@volverjs/ui-vue 0.0.10-beta.24 → 0.0.10-beta.26

package/dist/components/index.es.js

@@ -1,12 +1,17 @@
-import { inject, computed, toRef, unref, defineComponent, useAttrs, toRefs, ref, watch, onBeforeUnmount, openBlock, createElementBlock, normalizeClass, createElementVNode, withModifiers, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString, provide, watchEffect, reactive, Fragment, renderList, createBlock, mergeProps, withCtx, resolveDynamicComponent, mergeDefaults, createCommentVNode, createVNode, TransitionGroup, toHandlers, useSlots, isRef, h, onMounted, withDirectives, vModelCheckbox, createSlots, nextTick, Transition, normalizeStyle, vShow, vModelSelect, vModelText, vModelRadio } from "vue";
+import { inject, computed, toRef, unref, defineComponent, useAttrs, toRefs, ref, watch, onBeforeUnmount, openBlock, createElementBlock, normalizeClass, createElementVNode, withModifiers, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString, isRef, provide, watchEffect, reactive, onMounted, nextTick, Fragment, renderList, createBlock, mergeProps, createSlots, withCtx, resolveDynamicComponent, mergeDefaults, createCommentVNode, createVNode, TransitionGroup, toHandlers, useSlots, h, withDirectives, vModelCheckbox, Transition, normalizeStyle, vShow, vModelSelect, vModelText, vModelRadio } from "vue";
 import { uid } from "uid";
-import { useVModel, useLocalStorage, useMutationObserver, onClickOutside, useFocusWithin, onKeyStroke, useElementHover, useFocus, useElementVisibility, refDebounced, computedAsync } from "@vueuse/core";
+import { useVModel, useStorage, useMutationObserver, onClickOutside, useFocusWithin, useElementHover, onKeyStroke, useFocus, useElementVisibility, refDebounced, computedAsync } from "@vueuse/core";
 import mitt from "mitt";
 import { iconExists, Icon, addIcon } from "@iconify/vue";
 import { get } from "ts-dot-prop";
 import { autoPlacement, flip, shift, size, offset, arrow, useFloating, autoUpdate } from "@floating-ui/vue";
 import { useIMask } from "vue-imask";
 import Sortable from "vuedraggable";
+var StorageType = /* @__PURE__ */ ((StorageType2) => {
+  StorageType2["local"] = "local";
+  StorageType2["session"] = "session";
+  return StorageType2;
+})(StorageType || {});
 var Strategy = /* @__PURE__ */ ((Strategy2) => {
   Strategy2["absolute"] = "absolute";
   Strategy2["fixed"] = "fixed";
@@ -64,13 +69,6 @@ var DropdownItemRole = /* @__PURE__ */ ((DropdownItemRole2) => {
   DropdownItemRole2["presentation"] = "presentation";
   return DropdownItemRole2;
 })(DropdownItemRole || {});
-var AnchorTarget = /* @__PURE__ */ ((AnchorTarget2) => {
-  AnchorTarget2["_blank"] = "_blank";
-  AnchorTarget2["_self"] = "_self";
-  AnchorTarget2["_parent"] = "_parent";
-  AnchorTarget2["_top"] = "_top";
-  return AnchorTarget2;
-})(AnchorTarget || {});
 const INJECTION_KEY_VOLVER = Symbol.for("volver");
 const INJECTION_KEY_BUTTON_GROUP = Symbol.for(
   "buttonGroup"
@@ -111,11 +109,7 @@ const LinkProps = {
   /**
    * Anchor target
    */
-  target: {
-    type: String,
-    default: void 0,
-    validator: (value) => Object.values(AnchorTarget).includes(value)
-  },
+  target: String,
   /**
    * Anchor rel
    */
@@ -589,6 +583,14 @@ const NavProps = {
     default: () => []
   }
 };
+const StorageProps = {
+  storageType: {
+    type: String,
+    default: StorageType.local,
+    validator: (value) => Object.values(StorageType).includes(value)
+  },
+  storageKey: String
+};
 function useInjectedGroupState(groupKey) {
   const group = inject(groupKey, void 0);
   const isInGroup = computed(() => group !== void 0);
@@ -875,11 +877,13 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
 });
 const VvAccordionGroupProps = {
   ...ModifiersProps,
+  ...StorageProps,
   /**
    * VModel
    */
   modelValue: {
-    type: [String, Array]
+    type: [String, Array],
+    default: void 0
   },
   /**
    * Accordion items
@@ -907,13 +911,69 @@ const VvAccordionGroupProps = {
   /**
    * If true, the accordion items will be opened by default
    */
-  not: Boolean,
-  /**
-   * Enable local storage persistence
-   */
-  storeKey: String
+  not: Boolean
 };
 const VvAccordionGroupEvents = ["update:modelValue"];
+const usePersistence = (storageKey, storageType = StorageType.local, defaultValue) => {
+  const localValue = ref();
+  if (defaultValue) {
+    localValue.value = defaultValue;
+  }
+  let storageValue;
+  if (storageKey) {
+    watch(
+      storageKey,
+      (newKey, oldKey) => {
+        const storage = unref(storageType) === StorageType.session ? sessionStorage : localStorage;
+        if (oldKey && oldKey !== newKey) {
+          storage.removeItem(oldKey);
+        }
+        if (newKey) {
+          storageValue = useStorage(
+            newKey,
+            (storageValue == null ? void 0 : storageValue.value) ?? localValue.value,
+            storage
+          );
+          return;
+        }
+        storageValue = void 0;
+      },
+      {
+        immediate: true
+      }
+    );
+  }
+  if (isRef(storageType)) {
+    watch(storageType, (newType, oldType) => {
+      if (storageKey == null ? void 0 : storageKey.value) {
+        if (newType) {
+          const storage = newType === StorageType.session ? sessionStorage : localStorage;
+          storageValue = useStorage(
+            storageKey.value,
+            (storageValue == null ? void 0 : storageValue.value) ?? localValue.value,
+            storage
+          );
+        }
+        if (oldType && oldType !== newType) {
+          const oldStorage = oldType === StorageType.session ? sessionStorage : localStorage;
+          oldStorage.removeItem(storageKey.value);
+        }
+      }
+    });
+  }
+  return computed({
+    get: () => {
+      return (storageValue == null ? void 0 : storageValue.value) ?? localValue.value;
+    },
+    set: (value) => {
+      if (storageValue) {
+        storageValue.value = value;
+        return;
+      }
+      localValue.value = value;
+    }
+  });
+};
 function useProvideGroupState(key, groupState) {
   provide(key, groupState);
 }
@@ -927,7 +987,14 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    const { disabled, modifiers, itemModifiers, items } = toRefs(props);
+    const {
+      disabled,
+      modifiers,
+      itemModifiers,
+      items,
+      storageKey,
+      storageType
+    } = toRefs(props);
     watchEffect(() => {
       if (typeof props.modelValue === "string" && props.collapse) {
         console.warn(
@@ -936,77 +1003,78 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
       }
     });
     const accordionNames = reactive(/* @__PURE__ */ new Set());
-    let modelValue = ref(/* @__PURE__ */ new Set());
-    watch(
-      () => props.storeKey,
-      (newKey, oldKey) => {
-        if (oldKey && oldKey !== newKey) {
-          localStorage.removeItem(oldKey);
-        }
-        if (newKey) {
-          modelValue = useLocalStorage(newKey, modelValue.value);
-          return;
-        }
-        modelValue = ref(new Set(modelValue.value));
-      },
-      { immediate: true }
+    const storageModelValue = usePersistence(
+      storageKey,
+      storageType
     );
-    watch(
-      [modelValue, accordionNames, () => props.not, () => props.collapse],
-      () => {
-        if (props.not) {
-          emit(
-            "update:modelValue",
-            [...accordionNames].filter(
-              (name) => !modelValue.value.has(name)
-            )
-          );
-          return;
-        }
-        if (props.collapse) {
-          emit("update:modelValue", [...modelValue.value]);
-          return;
+    const localModelValue = computed({
+      get: () => {
+        if (props.modelValue !== null && props.modelValue !== void 0) {
+          return props.modelValue;
         }
-        emit("update:modelValue", modelValue.value.values().next().value);
+        return storageModelValue.value;
       },
-      {
-        deep: true,
-        immediate: true
+      set: (newValue) => {
+        emit("update:modelValue", newValue);
+        storageModelValue.value = newValue;
       }
-    );
-    watch(
-      () => props.modelValue,
-      (newValue, oldValue) => {
-        if (newValue === void 0 || newValue === null || JSON.stringify(newValue) === JSON.stringify(oldValue)) {
-          return;
+    });
+    const expandedAccordions = computed({
+      get: () => {
+        if (localModelValue.value === void 0) {
+          return /* @__PURE__ */ new Set();
         }
         let toReturn = /* @__PURE__ */ new Set();
         if (props.not) {
-          if (typeof newValue === "string") {
+          if (typeof localModelValue.value === "string") {
             toReturn = new Set(
-              [...accordionNames].filter((name) => name !== newValue)
+              [...accordionNames].filter(
+                (name) => name !== localModelValue.value
+              )
             );
-          } else if (Array.isArray(newValue)) {
+          } else if (Array.isArray(localModelValue.value)) {
             toReturn = new Set(
               [...accordionNames].filter(
-                (name) => !newValue.includes(name)
+                (name) => !localModelValue.value.includes(
+                  name
+                )
               )
             );
           }
-        } else if (typeof newValue === "string") {
-          toReturn = /* @__PURE__ */ new Set([newValue]);
-        } else if (Array.isArray(newValue)) {
-          toReturn = new Set(newValue);
-        }
-        for (const name of accordionNames) {
-          bus.emit("toggle", { name, value: toReturn.has(name) });
+        } else if (typeof localModelValue.value === "string") {
+          toReturn = /* @__PURE__ */ new Set([localModelValue.value]);
+        } else if (Array.isArray(localModelValue.value)) {
+          toReturn = new Set(localModelValue.value);
         }
-        modelValue.value = toReturn;
+        return toReturn;
       },
-      {
-        immediate: true
+      set: (newValue) => {
+        if (props.not) {
+          localModelValue.value = [...accordionNames].filter(
+            (name) => !newValue.has(name)
+          );
+          return;
+        }
+        if (props.collapse) {
+          localModelValue.value = [...newValue];
+          return;
+        }
+        localModelValue.value = newValue.values().next().value;
       }
-    );
+    });
+    onMounted(() => {
+      if (props.not && localModelValue.value === void 0) {
+        localModelValue.value = props.collapse ? [] : [...accordionNames.values()].splice(1, accordionNames.size);
+      }
+      nextTick(() => {
+        for (const name of accordionNames) {
+          bus.emit("toggle", {
+            name,
+            value: expandedAccordions.value.has(name)
+          });
+        }
+      });
+    });
     const bus = mitt();
     useProvideGroupState(INJECTION_KEY_ACCORDION_GROUP, {
       disabled,
@@ -1020,19 +1088,22 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
       accordionNames.delete(name);
     });
     bus.on("toggle", ({ name, value }) => {
+      const newValue = new Set(expandedAccordions.value);
       if (value) {
         if (!props.collapse) {
-          for (const item of modelValue.value) {
+          for (const item of newValue) {
             if (item !== name) {
               bus.emit("toggle", { name: item, value: false });
             }
           }
-          modelValue.value.clear();
+          newValue.clear();
         }
-        modelValue.value.add(name);
+        newValue.add(name);
+        expandedAccordions.value = newValue;
         return;
       }
-      modelValue.value.delete(name);
+      newValue.delete(name);
+      expandedAccordions.value = newValue;
     });
     const expand = (name) => {
       if (typeof name === "string") {
@@ -1066,7 +1137,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
       }
     };
     bus.on("collapse", ({ name }) => collapse(name));
-    __expose({ modelValue, expand, collapse });
+    __expose({ expandedAccordions, expand, collapse });
     const bemCssClasses = useModifiers(
       "vv-accordion-group",
       modifiers,
@@ -1082,7 +1153,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
         },
         [
           renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({
-            modelValue: unref(modelValue),
+            expandedAccordions: unref(expandedAccordions),
             expand,
             collapse
           })), () => [
@@ -1099,16 +1170,25 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
                     title: item.title,
                     content: item.content
                   }),
-                  {
-                    header: withCtx((data) => [
-                      renderSlot(_ctx.$slots, `header::${item.name}`, normalizeProps(guardReactiveProps(data)))
-                    ]),
-                    details: withCtx((data) => [
-                      renderSlot(_ctx.$slots, `details::${item.name}`, normalizeProps(guardReactiveProps(data)))
-                    ]),
+                  createSlots({
                     _: 2
                     /* DYNAMIC */
-                  },
+                  }, [
+                    _ctx.$slots[`summary::${item.name}`] ? {
+                      name: "summary",
+                      fn: withCtx((data) => [
+                        renderSlot(_ctx.$slots, `summary::${item.name}`, normalizeProps(guardReactiveProps(data)))
+                      ]),
+                      key: "0"
+                    } : void 0,
+                    _ctx.$slots[`content::${item.name}`] ? {
+                      name: "default",
+                      fn: withCtx((data) => [
+                        renderSlot(_ctx.$slots, `content::${item.name}`, normalizeProps(guardReactiveProps(data)))
+                      ]),
+                      key: "1"
+                    } : void 0
+                  ]),
                   1040
                   /* FULL_PROPS, DYNAMIC_SLOTS */
                 );
@@ -3373,6 +3453,31 @@ const VvDropdownProps = {
     validator: (value) => Object.values(DropdownRole).includes(value)
   }
 };
+const VvDropdownItemProps = {
+  focusOnHover: {
+    type: Boolean,
+    default: false
+  }
+};
+const VvDropdownOptionProps = {
+  ...DisabledProps,
+  ...SelectedProps,
+  ...UnselectableProps,
+  ...ModifiersProps,
+  deselectHintLabel: {
+    type: String
+  },
+  selectHintLabel: {
+    type: String
+  },
+  selectedHintLabel: {
+    type: String
+  },
+  focusOnHover: {
+    type: Boolean,
+    default: false
+  }
+};
 function useProvideDropdownTrigger({
   reference,
   id,
@@ -3403,14 +3508,14 @@ function useProvideDropdownTrigger({
 }
 function useProvideDropdownItem({
   role,
-  expanded
+  ...others
 }) {
   const itemRole = computed(
     () => role.value === DropdownRole.listbox ? DropdownItemRole.option : DropdownItemRole.presentation
   );
   provide(INJECTION_KEY_DROPDOWN_ITEM, {
     role: itemRole,
-    expanded
+    ...others
   });
   return { itemRole };
 }
@@ -3661,7 +3766,6 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     });
     bus.on("click", toggle);
     const { role, modifiers } = toRefs(props);
-    const { itemRole } = useProvideDropdownItem({ role, expanded });
     const bemCssClasses = useModifiers(
       "vv-dropdown",
       modifiers,
@@ -3730,6 +3834,13 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
         }
       });
     };
+    const hovered = useElementHover(floatingEl);
+    const { itemRole } = useProvideDropdownItem({
+      role,
+      expanded,
+      focused,
+      hovered
+    });
     onKeyStroke("Escape", (e) => {
       if (expanded.value) {
         e.preventDefault();
@@ -3855,7 +3966,9 @@ const __default__$d = {
 };
 const _sfc_main$h = /* @__PURE__ */ defineComponent({
   ...__default__$d,
+  props: VvDropdownItemProps,
   setup(__props) {
+    const props = __props;
     const { role, expanded } = useInjectedDropdownItem();
     const element = ref(null);
     useProvideDropdownAction({ expanded });
@@ -3863,7 +3976,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     const { focused } = useFocus(element);
     const { focused: focusedWithin } = useFocusWithin(element);
     watch(hovered, (newValue) => {
-      if (newValue) {
+      if (newValue && props.focusOnHover) {
         focused.value = true;
       }
     });
@@ -3890,21 +4003,7 @@ const __default__$c = {
 };
 const _sfc_main$g = /* @__PURE__ */ defineComponent({
   ...__default__$c,
-  props: {
-    ...DisabledProps,
-    ...SelectedProps,
-    ...UnselectableProps,
-    ...ModifiersProps,
-    deselectHintLabel: {
-      type: String
-    },
-    selectHintLabel: {
-      type: String
-    },
-    selectedHintLabel: {
-      type: String
-    }
-  },
+  props: VvDropdownOptionProps,
   setup(__props) {
     const props = __props;
     const { modifiers } = toRefs(props);
@@ -3930,7 +4029,8 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
         class: normalizeClass(unref(bemCssClasses)),
         tabindex: _ctx.disabled ? -1 : 0,
         "aria-selected": _ctx.selected,
-        "aria-disabled": _ctx.disabled
+        "aria-disabled": _ctx.disabled,
+        "focus-on-hover": _ctx.focusOnHover
       }, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default"),
@@ -3949,7 +4049,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
         ]),
         _: 3
         /* FORWARDED */
-      }, 8, ["class", "tabindex", "aria-selected", "aria-disabled"]);
+      }, 8, ["class", "tabindex", "aria-selected", "aria-disabled", "focus-on-hover"]);
     };
   }
 });
@@ -4047,7 +4147,7 @@ const _hoisted_4$4 = { class: "vv-select__inner" };
 const _hoisted_5$4 = ["id"];
 const _hoisted_6$4 = ["disabled", "hidden"];
 const _hoisted_7$4 = ["disabled", "value"];
-const _hoisted_8$2 = ["disabled", "label"];
+const _hoisted_8$3 = ["disabled", "label"];
 const _hoisted_9$2 = ["disabled", "value"];
 const _hoisted_10$1 = {
   key: 1,
@@ -4236,7 +4336,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                             128
                             /* KEYED_FRAGMENT */
                           ))
-                        ], 8, _hoisted_8$2))
+                        ], 8, _hoisted_8$3))
                       ],
                       64
                       /* STABLE_FRAGMENT */
@@ -4316,7 +4416,7 @@ const _hoisted_7$3 = {
   key: 0,
   class: "vv-select__value"
 };
-const _hoisted_8$1 = ["aria-label", "onClick"];
+const _hoisted_8$2 = ["aria-label", "onClick"];
 const _hoisted_9$1 = {
   key: 1,
   class: "vv-select__input-after"
@@ -4689,7 +4789,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                                     onClick: withModifiers(($event) => onInput(option), ["stop"])
                                   }, [
                                     createVNode(_sfc_main$u, { name: "close" })
-                                  ], 8, _hoisted_8$1)) : createCommentVNode("v-if", true)
+                                  ], 8, _hoisted_8$2)) : createCommentVNode("v-if", true)
                                 ]),
                                 _: 2
                                 /* DYNAMIC */
@@ -4762,6 +4862,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                                   }, {
                                     key: i,
                                     class: "vv-dropdown-option",
+                                    "focus-on-hover": "",
                                     onClickPassive: ($event) => onInput(item)
                                   }), {
                                     default: withCtx(() => [
@@ -4797,6 +4898,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                             selectedHintLabel: unref(propsDefaults).selectedHintLabel
                           }, {
                             class: "vv-dropdown-option",
+                            "focus-on-hover": "",
                             onClickPassive: ($event) => onInput(option)
                           }), {
                             default: withCtx(() => [
@@ -5231,6 +5333,7 @@ const VvInputTextEvents = [
 ];
 const VvInputTextProps = {
   ...InputTextareaProps,
+  ...StorageProps,
   /**
    * Input value
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
@@ -5299,6 +5402,14 @@ const VvInputTextProps = {
     type: [String, Object],
     default: ACTION_ICONS.clear
   },
+  /**
+   * VvIcon name for remove suggestion button
+   * @see VVIcon
+   */
+  iconRemoveSuggestion: {
+    type: [String, Object],
+    default: ACTION_ICONS.remove
+  },
   /**
    * Label for step up button
    */
@@ -5334,6 +5445,13 @@ const VvInputTextProps = {
     type: String,
     default: "Clear"
   },
+  /**
+   * Label for remove suggestion button
+   */
+  labelRemoveSuggestion: {
+    type: String,
+    default: "Remove suggestion"
+  },
   /**
    * iMask options
    * @see https://imask.js.org/guide.html
@@ -5375,6 +5493,13 @@ const VvInputTextProps = {
   selectOnFocus: {
     type: Boolean,
     default: false
+  },
+  /**
+   * Maximum number of suggestions
+   */
+  maxSuggestions: {
+    type: Number,
+    default: 5
   }
 };
 const VvInputPasswordAction = defineComponent({
@@ -5669,24 +5794,25 @@ function useTextCount(text, options) {
   };
 }
 const _hoisted_1$6 = ["for"];
-const _hoisted_2$4 = { class: "vv-input-text__wrapper" };
-const _hoisted_3$2 = {
+const _hoisted_2$4 = {
   key: 0,
   class: "vv-input-text__input-before"
 };
-const _hoisted_4$2 = ["id"];
-const _hoisted_5$2 = {
+const _hoisted_3$2 = ["id"];
+const _hoisted_4$2 = {
   key: 1,
   class: "vv-input-text__unit"
 };
-const _hoisted_6$2 = {
+const _hoisted_5$2 = {
   key: 5,
   class: "vv-input-text__input-after"
 };
-const _hoisted_7$2 = {
+const _hoisted_6$2 = {
   key: 6,
   class: "vv-input-text__limit"
 };
+const _hoisted_7$2 = { class: "flex-1" };
+const _hoisted_8$1 = ["title", "onClick"];
 const __default__$6 = {
   name: "VvInputText"
 };
@@ -5707,6 +5833,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       id,
       icon,
       iconPosition,
+      iconRemoveSuggestion,
       label,
       modelValue,
       count,
@@ -5718,7 +5845,9 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       minlength,
       type,
       iMask,
-      step
+      step,
+      storageKey,
+      storageType
     } = toRefs(props);
     const hasId = useUniqueId(id);
     const hasHintId = computed(() => `${hasId.value}-hint`);
@@ -5822,6 +5951,8 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     );
     const inputEl = el;
     const innerEl = ref();
+    const wrapperEl = ref();
+    const dropdownEl = ref();
     __expose({ $inner: innerEl });
     const localModelValue = useDebouncedInput(
       modelValue,
@@ -5833,9 +5964,27 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       () => focused.value && !props.disabled && !props.readonly
     );
     watch(isFocused, (newValue) => {
+      var _a;
       if (newValue && propsDefaults.value.selectOnFocus && inputEl.value) {
         inputEl.value.select();
       }
+      if (newValue) {
+        (_a = dropdownEl.value) == null ? void 0 : _a.show();
+        return;
+      }
+      setTimeout(() => {
+        if (isDirty.value && suggestions.value) {
+          const suggestionsLimit = props.maxSuggestions - 1;
+          if (suggestions.value.size > suggestionsLimit && !suggestions.value.has(localModelValue.value)) {
+            suggestions.value = new Set(
+              [...suggestions.value].slice(
+                suggestions.value.size - suggestionsLimit
+              )
+            );
+          }
+          suggestions.value.add(localModelValue.value);
+        }
+      }, 300);
     });
     const isVisible = useElementVisibility(inputEl);
     watch(isVisible, (newValue) => {
@@ -5894,6 +6043,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       }
       return void 0;
     });
+    const { hasIcon: hasIconRemoveSuggestion } = useComponentIcon(iconRemoveSuggestion);
     const { formatted: countFormatted } = useTextCount(localModelValue, {
       mode: count.value,
       upperLimit: Number(maxlength == null ? void 0 : maxlength.value),
@@ -5913,6 +6063,31 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       }
       return void 0;
     });
+    const suggestions = usePersistence(
+      storageKey,
+      storageType,
+      /* @__PURE__ */ new Set()
+    );
+    const filteredSuggestions = computed(() => {
+      if (!suggestions.value) {
+        return [];
+      }
+      return [...suggestions.value].filter(
+        (suggestion) => isEmpty(localModelValue.value) || `${suggestion}`.toLowerCase().includes(`${localModelValue.value}`.toLowerCase()) && suggestion !== localModelValue.value
+      );
+    });
+    const hasSuggestions = computed(
+      () => (storageKey == null ? void 0 : storageKey.value) && suggestions.value && suggestions.value.size > 0
+    );
+    const onSuggestionSelect = (suggestion) => {
+      var _a;
+      localModelValue.value = suggestion;
+      (_a = dropdownEl.value) == null ? void 0 : _a.hide();
+    };
+    const onSuggestionRemove = (suggestion) => {
+      var _a;
+      (_a = suggestions.value) == null ? void 0 : _a.delete(suggestion);
+    };
     const { modifiers } = toRefs(props);
     const bemCssClasses = useModifiers(
       "vv-input-text",
@@ -6043,79 +6218,89 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
             for: unref(hasId),
             class: "vv-input-text__label"
           }, toDisplayString(unref(label)), 9, _hoisted_1$6)) : createCommentVNode("v-if", true),
-          createElementVNode("div", _hoisted_2$4, [
-            _ctx.$slots.before ? (openBlock(), createElementBlock("div", _hoisted_3$2, [
-              renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
-            ])) : createCommentVNode("v-if", true),
-            createElementVNode(
-              "div",
-              {
-                ref_key: "innerEl",
-                ref: innerEl,
-                class: "vv-input-text__inner",
-                onClick: withModifiers(onClickInner, ["stop"])
-              },
-              [
-                unref(hasIconBefore) ? (openBlock(), createBlock(
-                  _sfc_main$u,
-                  mergeProps({ key: 0 }, unref(hasIconBefore), { class: "vv-input-text__icon" }),
-                  null,
-                  16
-                  /* FULL_PROPS */
-                )) : createCommentVNode("v-if", true),
-                createElementVNode("input", mergeProps({
-                  id: unref(hasId),
-                  ref_key: "inputEl",
-                  ref: inputEl
-                }, unref(hasAttrs), {
-                  style: unref(hasStyle),
-                  onKeyup: _cache[0] || (_cache[0] = ($event) => emit("keyup", $event)),
-                  onKeydown: onKeyDown,
-                  onKeypress: _cache[1] || (_cache[1] = ($event) => emit("keypress", $event))
-                }), null, 16, _hoisted_4$2),
-                (_ctx.unit || _ctx.$slots.unit) && unref(isDirty) ? (openBlock(), createElementBlock("div", _hoisted_5$2, [
-                  renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(slotProps))), () => [
-                    createTextVNode(
-                      toDisplayString(_ctx.unit),
-                      1
-                      /* TEXT */
-                    )
-                  ])
-                ])) : createCommentVNode("v-if", true)
-              ],
-              512
-              /* NEED_PATCH */
-            ),
-            unref(iconAfter) ? (openBlock(), createBlock(
-              _sfc_main$u,
-              mergeProps({ key: 1 }, unref(iconAfter), { class: "vv-input-text__icon vv-input-text__icon-after" }),
-              null,
-              16
-              /* FULL_PROPS */
-            )) : unref(isPassword) && !_ctx.hideActions && unref(isClickable) ? (openBlock(), createBlock(unref(PasswordInputActions), {
-              key: 2,
-              onTogglePassword
-            })) : unref(isNumber) && !_ctx.hideActions && unref(isClickable) ? (openBlock(), createBlock(unref(NumberInputActions), {
-              key: 3,
-              onStepUp,
-              onStepDown
-            })) : unref(isSearch) && !_ctx.hideActions && unref(isClickable) ? (openBlock(), createBlock(unref(SearchInputActions), {
-              key: 4,
-              onClear
-            })) : createCommentVNode("v-if", true),
-            _ctx.$slots.after ? (openBlock(), createElementBlock("div", _hoisted_6$2, [
-              renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps(unref(slotProps))))
-            ])) : createCommentVNode("v-if", true),
-            unref(count) ? (openBlock(), createElementBlock("span", _hoisted_7$2, [
-              renderSlot(_ctx.$slots, "count", normalizeProps(guardReactiveProps(unref(slotProps))), () => [
-                createTextVNode(
-                  toDisplayString(unref(countFormatted)),
-                  1
-                  /* TEXT */
-                )
-              ])
-            ])) : createCommentVNode("v-if", true)
-          ]),
+          createElementVNode(
+            "div",
+            {
+              ref_key: "wrapperEl",
+              ref: wrapperEl,
+              class: "vv-input-text__wrapper"
+            },
+            [
+              _ctx.$slots.before ? (openBlock(), createElementBlock("div", _hoisted_2$4, [
+                renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
+              ])) : createCommentVNode("v-if", true),
+              createElementVNode(
+                "div",
+                {
+                  ref_key: "innerEl",
+                  ref: innerEl,
+                  class: "vv-input-text__inner",
+                  onClick: withModifiers(onClickInner, ["stop"])
+                },
+                [
+                  unref(hasIconBefore) ? (openBlock(), createBlock(
+                    _sfc_main$u,
+                    mergeProps({ key: 0 }, unref(hasIconBefore), { class: "vv-input-text__icon" }),
+                    null,
+                    16
+                    /* FULL_PROPS */
+                  )) : createCommentVNode("v-if", true),
+                  createElementVNode("input", mergeProps({
+                    id: unref(hasId),
+                    ref_key: "inputEl",
+                    ref: inputEl
+                  }, unref(hasAttrs), {
+                    style: unref(hasStyle),
+                    onKeyup: _cache[0] || (_cache[0] = ($event) => emit("keyup", $event)),
+                    onKeydown: onKeyDown,
+                    onKeypress: _cache[1] || (_cache[1] = ($event) => emit("keypress", $event))
+                  }), null, 16, _hoisted_3$2),
+                  (_ctx.unit || _ctx.$slots.unit) && unref(isDirty) ? (openBlock(), createElementBlock("div", _hoisted_4$2, [
+                    renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(slotProps))), () => [
+                      createTextVNode(
+                        toDisplayString(_ctx.unit),
+                        1
+                        /* TEXT */
+                      )
+                    ])
+                  ])) : createCommentVNode("v-if", true)
+                ],
+                512
+                /* NEED_PATCH */
+              ),
+              unref(iconAfter) ? (openBlock(), createBlock(
+                _sfc_main$u,
+                mergeProps({ key: 1 }, unref(iconAfter), { class: "vv-input-text__icon vv-input-text__icon-after" }),
+                null,
+                16
+                /* FULL_PROPS */
+              )) : unref(isPassword) && !_ctx.hideActions && unref(isClickable) ? (openBlock(), createBlock(unref(PasswordInputActions), {
+                key: 2,
+                onTogglePassword
+              })) : unref(isNumber) && !_ctx.hideActions && unref(isClickable) ? (openBlock(), createBlock(unref(NumberInputActions), {
+                key: 3,
+                onStepUp,
+                onStepDown
+              })) : unref(isSearch) && !_ctx.hideActions && unref(isClickable) ? (openBlock(), createBlock(unref(SearchInputActions), {
+                key: 4,
+                onClear
+              })) : createCommentVNode("v-if", true),
+              _ctx.$slots.after ? (openBlock(), createElementBlock("div", _hoisted_5$2, [
+                renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps(unref(slotProps))))
+              ])) : createCommentVNode("v-if", true),
+              unref(count) ? (openBlock(), createElementBlock("span", _hoisted_6$2, [
+                renderSlot(_ctx.$slots, "count", normalizeProps(guardReactiveProps(unref(slotProps))), () => [
+                  createTextVNode(
+                    toDisplayString(unref(countFormatted)),
+                    1
+                    /* TEXT */
+                  )
+                ])
+              ])) : createCommentVNode("v-if", true)
+            ],
+            512
+            /* NEED_PATCH */
+          ),
           createVNode(unref(HintSlot), {
             id: unref(hasHintId),
             class: "vv-input-text__hint"
@@ -6151,7 +6336,62 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
               ]),
               key: "3"
             } : void 0
-          ]), 1032, ["id"])
+          ]), 1032, ["id"]),
+          unref(hasSuggestions) ? (openBlock(), createBlock(_sfc_main$i, {
+            key: 1,
+            ref_key: "dropdownEl",
+            ref: dropdownEl,
+            reference: unref(wrapperEl),
+            "autofocus-first": false,
+            "trigger-width": true
+          }, {
+            items: withCtx(() => [
+              (openBlock(true), createElementBlock(
+                Fragment,
+                null,
+                renderList(unref(filteredSuggestions), (value) => {
+                  return openBlock(), createBlock(_sfc_main$g, {
+                    key: value,
+                    onClick: withModifiers(($event) => onSuggestionSelect(value), ["stop"])
+                  }, {
+                    default: withCtx(() => [
+                      createElementVNode("div", _hoisted_7$2, [
+                        renderSlot(_ctx.$slots, "suggestion", normalizeProps(guardReactiveProps({ value })), () => [
+                          createTextVNode(
+                            toDisplayString(value),
+                            1
+                            /* TEXT */
+                          )
+                        ])
+                      ]),
+                      unref(suggestions) && unref(hasIconRemoveSuggestion) ? (openBlock(), createElementBlock("button", {
+                        key: 0,
+                        type: "button",
+                        tabindex: "-1",
+                        class: "cursor-pointer",
+                        title: _ctx.labelRemoveSuggestion,
+                        onClick: withModifiers(($event) => onSuggestionRemove(value), ["stop"])
+                      }, [
+                        createVNode(
+                          _sfc_main$u,
+                          normalizeProps(guardReactiveProps(unref(hasIconRemoveSuggestion))),
+                          null,
+                          16
+                          /* FULL_PROPS */
+                        )
+                      ], 8, _hoisted_8$1)) : createCommentVNode("v-if", true)
+                    ]),
+                    _: 2
+                    /* DYNAMIC */
+                  }, 1032, ["onClick"]);
+                }),
+                128
+                /* KEYED_FRAGMENT */
+              ))
+            ]),
+            _: 3
+            /* FORWARDED */
+          }, 8, ["reference"])) : createCommentVNode("v-if", true)
         ],
         2
         /* CLASS */