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

package/dist/components/VvInputText/VvInputText.es.js

@@ -1,8 +1,10 @@
-import { unref, computed, isRef, defineComponent, h, inject, mergeDefaults, ref, toRefs, openBlock, createBlock, mergeProps, createCommentVNode, watch, useSlots, onMounted, createElementBlock, normalizeClass, toDisplayString, createElementVNode, renderSlot, normalizeProps, guardReactiveProps, withModifiers, createTextVNode, createVNode, createSlots, withCtx } from "vue";
+import { unref, computed, isRef, defineComponent, h, inject, mergeDefaults, ref, toRefs, openBlock, createBlock, mergeProps, createCommentVNode, provide, Fragment, useAttrs, onMounted, watch, nextTick, createElementBlock, createVNode, withCtx, renderSlot, normalizeProps, guardReactiveProps, Transition, toHandlers, withDirectives, createElementVNode, normalizeStyle, normalizeClass, vShow, createTextVNode, toDisplayString, useSlots, withModifiers, createSlots, renderList } from "vue";
 import { useIMask } from "vue-imask";
 import { iconExists, Icon, addIcon } from "@iconify/vue";
+import { autoPlacement, flip, shift, size, offset, arrow, useFloating, autoUpdate } from "@floating-ui/vue";
 import { uid } from "uid";
-import { useFocus, useElementVisibility } from "@vueuse/core";
+import { useMutationObserver, useVModel, onClickOutside, useFocusWithin, useElementHover, onKeyStroke, useFocus, useStorage, useElementVisibility } from "@vueuse/core";
+import mitt from "mitt";
 function isEmpty(value) {
   return ((value2) => value2 === null || value2 === void 0 || value2 === "" || Array.isArray(value2) && value2.length === 0 || !(value2 instanceof Date) && typeof value2 === "object" && Object.keys(value2).length === 0)(unref(value));
 }
@@ -143,6 +145,11 @@ const VvIconPropsDefaults = {
   prefix: "normal"
   /* normal */
 };
+var StorageType = /* @__PURE__ */ ((StorageType2) => {
+  StorageType2["local"] = "local";
+  StorageType2["session"] = "session";
+  return StorageType2;
+})(StorageType || {});
 var Strategy = /* @__PURE__ */ ((Strategy2) => {
   Strategy2["absolute"] = "absolute";
   Strategy2["fixed"] = "fixed";
@@ -184,14 +191,32 @@ var ActionTag = /* @__PURE__ */ ((ActionTag2) => {
   ActionTag2["button"] = "button";
   return ActionTag2;
 })(ActionTag || {});
-var AnchorTarget = /* @__PURE__ */ ((AnchorTarget2) => {
-  AnchorTarget2["_blank"] = "_blank";
-  AnchorTarget2["_self"] = "_self";
-  AnchorTarget2["_parent"] = "_parent";
-  AnchorTarget2["_top"] = "_top";
-  return AnchorTarget2;
-})(AnchorTarget || {});
+var ActionRoles = /* @__PURE__ */ ((ActionRoles2) => {
+  ActionRoles2["button"] = "button";
+  ActionRoles2["link"] = "link";
+  ActionRoles2["menuitem"] = "menuitem";
+  return ActionRoles2;
+})(ActionRoles || {});
+var DropdownRole = /* @__PURE__ */ ((DropdownRole2) => {
+  DropdownRole2["listbox"] = "listbox";
+  DropdownRole2["menu"] = "menu";
+  return DropdownRole2;
+})(DropdownRole || {});
+var DropdownItemRole = /* @__PURE__ */ ((DropdownItemRole2) => {
+  DropdownItemRole2["option"] = "option";
+  DropdownItemRole2["presentation"] = "presentation";
+  return DropdownItemRole2;
+})(DropdownItemRole || {});
 const INJECTION_KEY_VOLVER = Symbol.for("volver");
+const INJECTION_KEY_DROPDOWN_TRIGGER = Symbol.for(
+  "dropdownTrigger"
+);
+const INJECTION_KEY_DROPDOWN_ITEM = Symbol.for(
+  "dropdownItem"
+);
+const INJECTION_KEY_DROPDOWN_ACTION = Symbol.for(
+  "dropdownAction"
+);
 function useVolver() {
   return inject(INJECTION_KEY_VOLVER);
 }
@@ -218,11 +243,11 @@ function useModifiers(prefix, modifiers, others) {
     return toReturn;
   });
 }
-const __default__$1 = {
+const __default__$4 = {
   name: "VvIcon"
 };
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  ...__default__$1,
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  ...__default__$4,
   props: /* @__PURE__ */ mergeDefaults({
     name: {},
     color: {},
@@ -346,11 +371,7 @@ const LinkProps = {
   /**
    * Anchor target
    */
-  target: {
-    type: String,
-    default: void 0,
-    validator: (value) => Object.values(AnchorTarget).includes(value)
-  },
+  target: String,
   /**
    * Anchor rel
    */
@@ -407,6 +428,15 @@ const DisabledProps = {
     default: false
   }
 };
+const SelectedProps = {
+  /**
+   * Whether the item is selected
+   */
+  selected: {
+    type: Boolean,
+    default: false
+  }
+};
 const ActiveProps = {
   /**
    * Whether the item is active
@@ -517,6 +547,12 @@ const FloatingLabelProps = {
     default: false
   }
 };
+const UnselectableProps = {
+  /**
+   * If true the input will be unselectable
+   */
+  unselectable: { type: Boolean, default: true }
+};
 const IdProps = {
   /**
    * Global attribute id
@@ -524,7 +560,7 @@ const IdProps = {
    */
   id: [String, Number]
 };
-({
+const DropdownProps = {
   /**
    * Dropdown placement
    */
@@ -617,7 +653,7 @@ const IdProps = {
     type: Boolean,
     default: false
   }
-});
+};
 const IdNameProps = {
   ...IdProps,
   /**
@@ -726,6 +762,14 @@ const InputTextareaProps = {
     default: ActionTag.button
   }
 });
+const StorageProps = {
+  storageType: {
+    type: String,
+    default: StorageType.local,
+    validator: (value) => Object.values(StorageType).includes(value)
+  },
+  storageKey: String
+};
 const INPUT_TYPES = {
   TEXT: "text",
   PASSWORD: "password",
@@ -760,6 +804,7 @@ const VvInputTextEvents = [
 ];
 const VvInputTextProps = {
   ...InputTextareaProps,
+  ...StorageProps,
   /**
    * Input value
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
@@ -828,6 +873,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
    */
@@ -863,6 +916,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
@@ -904,6 +964,13 @@ const VvInputTextProps = {
   selectOnFocus: {
     type: Boolean,
     default: false
+  },
+  /**
+   * Maximum number of suggestions
+   */
+  maxSuggestions: {
+    type: Number,
+    default: 5
   }
 };
 function useComponentIcon(icon, iconPosition) {
@@ -943,7 +1010,7 @@ function useComponentIcon(icon, iconPosition) {
 }
 const VvInputPasswordAction = defineComponent({
   components: {
-    VvIcon: _sfc_main$1
+    VvIcon: _sfc_main$4
   },
   props: {
     disabled: {
@@ -989,7 +1056,7 @@ const VvInputPasswordAction = defineComponent({
     };
   },
   render() {
-    const icon = this.hasIcon ? h(_sfc_main$1, {
+    const icon = this.hasIcon ? h(_sfc_main$4, {
       ...this.hasIcon,
       class: "vv-input-text__icon"
     }) : void 0;
@@ -1008,7 +1075,7 @@ const VvInputPasswordAction = defineComponent({
 });
 const VvInputStepAction = defineComponent({
   components: {
-    VvIcon: _sfc_main$1
+    VvIcon: _sfc_main$4
   },
   props: {
     disabled: {
@@ -1053,7 +1120,7 @@ const VvInputStepAction = defineComponent({
 });
 const VvInputClearAction = defineComponent({
   components: {
-    VvIcon: _sfc_main$1
+    VvIcon: _sfc_main$4
   },
   props: {
     disabled: {
@@ -1084,7 +1151,7 @@ const VvInputClearAction = defineComponent({
     };
   },
   render() {
-    const icon = this.hasIcon ? h(_sfc_main$1, {
+    const icon = this.hasIcon ? h(_sfc_main$4, {
       ...this.hasIcon,
       class: "vv-input-text__icon"
     }) : void 0;
@@ -1105,7 +1172,7 @@ function VvInputTextActionsFactory(type, parentProps) {
   return {
     name: "VvInputTextActions",
     components: {
-      VvIcon: _sfc_main$1,
+      VvIcon: _sfc_main$4,
       VvInputPasswordAction,
       VvInputStepAction,
       VvInputClearAction
@@ -1178,6 +1245,637 @@ function VvInputTextActionsFactory(type, parentProps) {
     }
   };
 }
+const VvDropdownProps = {
+  ...IdProps,
+  ...DropdownProps,
+  ...ModifiersProps,
+  /**
+   * Show / hide dropdown programmatically
+   */
+  modelValue: {
+    type: Boolean,
+    default: void 0
+  },
+  /**
+   * Dropdown trigger element
+   */
+  reference: {
+    type: Object,
+    default: null
+  },
+  /**
+   * Dropdown role
+   */
+  role: {
+    type: String,
+    default: DropdownRole.menu,
+    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
+  }
+};
+const useUniqueId = (id) => computed(() => String((id == null ? void 0 : id.value) || uid()));
+function useProvideDropdownTrigger({
+  reference,
+  id,
+  expanded,
+  aria
+}) {
+  const bus = mitt();
+  const component = defineComponent({
+    name: "VvDropdownTriggerProvider",
+    setup() {
+      provide(INJECTION_KEY_DROPDOWN_TRIGGER, {
+        reference,
+        id,
+        expanded,
+        aria,
+        bus
+      });
+    },
+    render() {
+      var _a, _b;
+      return h(Fragment, {}, (_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a));
+    }
+  });
+  return {
+    bus,
+    component
+  };
+}
+function useProvideDropdownItem({
+  role,
+  ...others
+}) {
+  const itemRole = computed(
+    () => role.value === DropdownRole.listbox ? DropdownItemRole.option : DropdownItemRole.presentation
+  );
+  provide(INJECTION_KEY_DROPDOWN_ITEM, {
+    role: itemRole,
+    ...others
+  });
+  return { itemRole };
+}
+function useProvideDropdownAction({
+  expanded
+}) {
+  provide(INJECTION_KEY_DROPDOWN_ACTION, {
+    role: ref(ActionRoles.menuitem),
+    expanded
+  });
+}
+const _hoisted_1$2 = ["id", "tabindex", "role", "aria-labelledby"];
+const __default__$3 = {
+  name: "VvDropdown",
+  inheritAttrs: false
+};
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  ...__default__$3,
+  props: VvDropdownProps,
+  emits: [
+    "update:modelValue",
+    "beforeExpand",
+    "beforeCollapse",
+    "afterExpand",
+    "afterCollapse",
+    "before-enter",
+    "after-leave",
+    "enter",
+    "after-enter",
+    "enter-cancelled",
+    "before-leave",
+    "leave",
+    "leave-cancelled"
+  ],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { id } = toRefs(props);
+    const hasId = useUniqueId(id);
+    const attrs = useAttrs();
+    const maxWidth = ref("auto");
+    const maxHeight = ref("auto");
+    const localReferenceEl = ref(null);
+    const floatingEl = ref();
+    const arrowEl = ref(null);
+    const listEl = ref(null);
+    const referenceEl = computed({
+      get: () => props.reference ?? localReferenceEl.value,
+      set: (newValue) => {
+        localReferenceEl.value = newValue;
+      }
+    });
+    const hasCustomPosition = ref(false);
+    onMounted(() => {
+      useMutationObserver(
+        floatingEl.value,
+        () => {
+          var _a;
+          hasCustomPosition.value = ((_a = window.getComputedStyle(floatingEl.value).getPropertyValue("--dropdown-custom-position")) == null ? void 0 : _a.trim()) === "true";
+        },
+        {
+          attributeFilter: ["style"],
+          window
+        }
+      );
+    });
+    const middleware = computed(() => {
+      const toReturn = [];
+      if (props.autoPlacement) {
+        if (typeof props.autoPlacement === "boolean") {
+          toReturn.push(autoPlacement());
+        } else {
+          toReturn.push(
+            autoPlacement(props.autoPlacement)
+          );
+        }
+      } else if (props.flip) {
+        if (typeof props.flip === "boolean") {
+          toReturn.push(flip({ fallbackStrategy: "initialPlacement" }));
+        } else {
+          toReturn.push(flip(props.flip));
+        }
+      }
+      if (props.shift) {
+        if (typeof props.shift === "boolean") {
+          toReturn.push(shift());
+        } else {
+          toReturn.push(shift(props.shift));
+        }
+      }
+      if (props.size) {
+        const apply = ({
+          availableWidth,
+          availableHeight
+        }) => {
+          maxWidth.value = `${availableWidth}px`;
+          maxHeight.value = `${availableHeight}px`;
+        };
+        if (typeof props.size === "boolean") {
+          toReturn.push(
+            size({
+              apply
+            })
+          );
+        } else {
+          toReturn.push(
+            size({
+              ...props.size,
+              apply
+            })
+          );
+        }
+      }
+      if (props.offset) {
+        toReturn.push(offset(Number(props.offset)));
+        if (["string", "number"].includes(typeof props.offset)) {
+          toReturn.push(offset(Number(props.offset)));
+        } else {
+          toReturn.push(offset(props.offset));
+        }
+      }
+      if (props.arrow) {
+        toReturn.push(
+          arrow({
+            element: arrowEl
+          })
+        );
+      }
+      return toReturn;
+    });
+    const { x, y, middlewareData, placement, strategy } = useFloating(
+      referenceEl,
+      floatingEl,
+      {
+        whileElementsMounted: (...args) => {
+          return autoUpdate(...args, {
+            animationFrame: props.strategy === Strategy.fixed
+          });
+        },
+        placement: computed(() => props.placement),
+        strategy: computed(() => props.strategy),
+        middleware
+      }
+    );
+    const dropdownPlacement = computed(() => {
+      var _a;
+      if (hasCustomPosition.value) {
+        return void 0;
+      }
+      const width = props.triggerWidth && referenceEl.value ? `${(_a = referenceEl.value) == null ? void 0 : _a.offsetWidth}px` : void 0;
+      return {
+        position: strategy.value,
+        top: `${y.value ?? 0}px`,
+        left: `${x.value ?? 0}px`,
+        maxWidth: width ? void 0 : maxWidth.value,
+        maxHeight: maxHeight.value,
+        width
+      };
+    });
+    const side = computed(
+      () => placement.value.split("-")[0]
+    );
+    const arrowPlacement = computed(() => {
+      var _a, _b, _c, _d, _e;
+      if (hasCustomPosition.value) {
+        return void 0;
+      }
+      const staticSide = {
+        [Side.top]: Side.bottom,
+        [Side.right]: Side.left,
+        [Side.bottom]: Side.top,
+        [Side.left]: Side.right
+      }[side.value];
+      return {
+        left: ((_a = middlewareData.value.arrow) == null ? void 0 : _a.x) !== void 0 ? `${(_b = middlewareData.value.arrow) == null ? void 0 : _b.x}px` : void 0,
+        top: ((_c = middlewareData.value.arrow) == null ? void 0 : _c.y) !== void 0 ? `${(_d = middlewareData.value.arrow) == null ? void 0 : _d.y}px` : void 0,
+        [staticSide]: `${-(((_e = arrowEl.value) == null ? void 0 : _e.offsetWidth) ?? 0) / 2}px`
+      };
+    });
+    const modelValue = useVModel(props, "modelValue", emit);
+    const localModelValue = ref(false);
+    const expanded = computed({
+      get: () => modelValue.value ?? localModelValue.value,
+      set: (newValue) => {
+        if (modelValue.value === void 0) {
+          localModelValue.value = newValue;
+          return;
+        }
+        modelValue.value = newValue;
+      }
+    });
+    const show = () => {
+      expanded.value = true;
+    };
+    const hide = () => {
+      expanded.value = false;
+    };
+    const toggle = () => {
+      expanded.value = !expanded.value;
+    };
+    const init = (el) => {
+      referenceEl.value = el;
+    };
+    __expose({
+      toggle,
+      show,
+      hide,
+      init,
+      customPosition: hasCustomPosition
+    });
+    watch(expanded, (newValue) => {
+      if (newValue && props.autofocusFirst) {
+        nextTick(() => {
+          const focusableElements = getKeyboardFocusableElements(
+            floatingEl.value
+          );
+          if (focusableElements.length > 0) {
+            focusableElements[0].focus({
+              preventScroll: true
+            });
+          }
+        });
+      }
+    });
+    onClickOutside(
+      floatingEl,
+      () => {
+        if (!props.keepOpen && expanded.value) {
+          expanded.value = false;
+        }
+      },
+      { ignore: [referenceEl] }
+    );
+    const hasAriaLabelledby = computed(() => {
+      var _a, _b;
+      return ((_b = (_a = referenceEl.value) == null ? void 0 : _a.getAttribute) == null ? void 0 : _b.call(_a, "id")) ?? void 0;
+    });
+    const referenceAria = computed(() => ({
+      "aria-controls": hasId.value,
+      "aria-haspopup": true,
+      "aria-expanded": expanded.value
+    }));
+    const { component: VvDropdownTriggerProvider, bus } = useProvideDropdownTrigger({
+      reference: referenceEl,
+      id: hasId,
+      expanded,
+      aria: referenceAria
+    });
+    bus.on("click", toggle);
+    const { role, modifiers } = toRefs(props);
+    const bemCssClasses = useModifiers(
+      "vv-dropdown",
+      modifiers,
+      computed(() => ({
+        arrow: props.arrow
+      }))
+    );
+    const { focused } = useFocusWithin(floatingEl);
+    function getKeyboardFocusableElements(element) {
+      if (!element) {
+        return [];
+      }
+      return [
+        ...element.querySelectorAll(
+          'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'
+        )
+      ].filter(
+        (el) => !el.hasAttribute("disabled") && !el.getAttribute("aria-hidden")
+      );
+    }
+    const focusNext = () => {
+      nextTick(() => {
+        if (focused.value) {
+          const focusableElements = getKeyboardFocusableElements(
+            floatingEl.value
+          );
+          if (focusableElements.length === 0 || !document.activeElement) {
+            return;
+          }
+          const activeElementIndex = focusableElements.indexOf(
+            document.activeElement
+          );
+          if (activeElementIndex < focusableElements.length - 1) {
+            focusableElements[activeElementIndex + 1].focus({
+              preventScroll: true
+            });
+          } else {
+            focusableElements[0].focus({
+              preventScroll: true
+            });
+          }
+        }
+      });
+    };
+    const focusPrev = () => {
+      nextTick(() => {
+        if (focused.value) {
+          const focusableElements = getKeyboardFocusableElements(
+            floatingEl.value
+          );
+          if (focusableElements.length === 0 || !document.activeElement) {
+            return;
+          }
+          const activeElementIndex = focusableElements.indexOf(
+            document.activeElement
+          );
+          if (activeElementIndex > 0) {
+            focusableElements[activeElementIndex - 1].focus({
+              preventScroll: true
+            });
+          } else {
+            focusableElements[focusableElements.length - 1].focus({
+              preventScroll: true
+            });
+          }
+        }
+      });
+    };
+    const hovered = useElementHover(floatingEl);
+    const { itemRole } = useProvideDropdownItem({
+      role,
+      expanded,
+      focused,
+      hovered
+    });
+    onKeyStroke("Escape", (e) => {
+      if (expanded.value) {
+        e.preventDefault();
+        hide();
+      }
+    });
+    onKeyStroke("ArrowDown", (e) => {
+      if (expanded.value && focused.value) {
+        e.preventDefault();
+        focusNext();
+      }
+    });
+    onKeyStroke("ArrowUp", (e) => {
+      if (expanded.value && focused.value) {
+        e.preventDefault();
+        focusPrev();
+      }
+    });
+    onKeyStroke([" ", "Enter"], (e) => {
+      const htmlEl = e.target;
+      if (expanded.value && focused.value && htmlEl) {
+        htmlEl == null ? void 0 : htmlEl.click();
+      }
+    });
+    const dropdownTransitionHandlers = {
+      "before-enter": () => {
+        emit(expanded.value ? "beforeExpand" : "beforeCollapse");
+        emit("before-enter");
+      },
+      "after-leave": () => {
+        emit(expanded.value ? "afterExpand" : "afterCollapse");
+        emit("after-leave");
+      },
+      enter: () => {
+        emit("enter");
+      },
+      "after-enter": () => {
+        emit("after-enter");
+      },
+      "enter-cancelled": () => {
+        emit("enter-cancelled");
+      },
+      "before-leave": () => {
+        emit("before-leave");
+      },
+      leave: () => {
+        emit("leave");
+      },
+      "leave-cancelled": () => {
+        emit("leave-cancelled");
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        Fragment,
+        null,
+        [
+          createVNode(unref(VvDropdownTriggerProvider), null, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ init, show, hide, toggle, expanded: unref(expanded), aria: unref(referenceAria) })))
+            ]),
+            _: 3
+            /* FORWARDED */
+          }),
+          createVNode(Transition, mergeProps({ name: _ctx.transitionName }, toHandlers(dropdownTransitionHandlers), { persisted: "" }), {
+            default: withCtx(() => [
+              withDirectives(createElementVNode(
+                "div",
+                {
+                  ref_key: "floatingEl",
+                  ref: floatingEl,
+                  style: normalizeStyle(unref(dropdownPlacement)),
+                  class: normalizeClass(unref(bemCssClasses))
+                },
+                [
+                  props.arrow ? (openBlock(), createElementBlock(
+                    "div",
+                    {
+                      key: 0,
+                      ref_key: "arrowEl",
+                      ref: arrowEl,
+                      style: normalizeStyle(unref(arrowPlacement)),
+                      class: "vv-dropdown__arrow"
+                    },
+                    null,
+                    4
+                    /* STYLE */
+                  )) : createCommentVNode("v-if", true),
+                  renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps({ expanded: unref(expanded) }))),
+                  createElementVNode("div", mergeProps(unref(attrs), {
+                    id: unref(hasId),
+                    ref_key: "listEl",
+                    ref: listEl,
+                    tabindex: !unref(expanded) ? -1 : void 0,
+                    role: unref(role),
+                    "aria-labelledby": unref(hasAriaLabelledby),
+                    class: "vv-dropdown__list"
+                  }), [
+                    renderSlot(_ctx.$slots, "items", normalizeProps(guardReactiveProps({
+                      role: unref(itemRole)
+                    })))
+                  ], 16, _hoisted_1$2),
+                  renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps({ expanded: unref(expanded) })))
+                ],
+                6
+                /* CLASS, STYLE */
+              ), [
+                [vShow, unref(expanded)]
+              ])
+            ]),
+            _: 3
+            /* FORWARDED */
+          }, 16, ["name"])
+        ],
+        64
+        /* STABLE_FRAGMENT */
+      );
+    };
+  }
+});
+function useInjectedDropdownItem() {
+  return inject(INJECTION_KEY_DROPDOWN_ITEM, {});
+}
+const __default__$2 = {
+  name: "VvDropdownItem"
+};
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  ...__default__$2,
+  props: VvDropdownItemProps,
+  setup(__props) {
+    const props = __props;
+    const { role, expanded } = useInjectedDropdownItem();
+    const element = ref(null);
+    useProvideDropdownAction({ expanded });
+    const hovered = useElementHover(element);
+    const { focused } = useFocus(element);
+    const { focused: focusedWithin } = useFocusWithin(element);
+    watch(hovered, (newValue) => {
+      if (newValue && props.focusOnHover) {
+        focused.value = true;
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "div",
+        mergeProps({ role: unref(role) }, {
+          ref_key: "element",
+          ref: element,
+          class: ["vv-dropdown__item", { "focus-visible": unref(focused) || unref(focusedWithin) }]
+        }),
+        [
+          renderSlot(_ctx.$slots, "default")
+        ],
+        16
+        /* FULL_PROPS */
+      );
+    };
+  }
+});
+const _hoisted_1$1 = ["title"];
+const __default__$1 = {
+  name: "VvDropdownOption"
+};
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...__default__$1,
+  props: VvDropdownOptionProps,
+  setup(__props) {
+    const props = __props;
+    const { modifiers } = toRefs(props);
+    const bemCssClasses = useModifiers(
+      "vv-dropdown-option",
+      modifiers,
+      computed(() => ({
+        disabled: props.disabled,
+        selected: props.selected,
+        unselectable: props.unselectable && props.selected
+      }))
+    );
+    const hintLabel = computed(() => {
+      if (props.selected) {
+        return props.unselectable ? props.deselectHintLabel : props.selectedHintLabel;
+      }
+      if (!props.disabled) {
+        return props.selectHintLabel;
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$2, {
+        class: normalizeClass(unref(bemCssClasses)),
+        tabindex: _ctx.disabled ? -1 : 0,
+        "aria-selected": _ctx.selected,
+        "aria-disabled": _ctx.disabled,
+        "focus-on-hover": _ctx.focusOnHover
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default"),
+          createElementVNode("span", {
+            class: "vv-dropdown-option__hint",
+            title: unref(hintLabel)
+          }, [
+            renderSlot(_ctx.$slots, "hint", normalizeProps(guardReactiveProps({ disabled: _ctx.disabled, selected: _ctx.selected, unselectable: _ctx.unselectable })), () => [
+              createTextVNode(
+                toDisplayString(unref(hintLabel)),
+                1
+                /* TEXT */
+              )
+            ])
+          ], 8, _hoisted_1$1)
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 8, ["class", "tabindex", "aria-selected", "aria-disabled", "focus-on-hover"]);
+    };
+  }
+});
 function useDefaults(componentName, propsDefinition, props) {
   const volver = useVolver();
   const volverComponentDefaults = computed(() => {
@@ -1231,7 +1929,6 @@ function useDefaults(componentName, propsDefinition, props) {
     }, {});
   });
 }
-const useUniqueId = (id) => computed(() => String((id == null ? void 0 : id.value) || uid()));
 function useDebouncedInput(modelValue, emit, ms = 0, {
   getter = (value) => value,
   setter = (value) => value
@@ -1295,25 +1992,86 @@ function useTextCount(text, options) {
     formatted
   };
 }
+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;
+    }
+  });
+};
 const _hoisted_1 = ["for"];
-const _hoisted_2 = { class: "vv-input-text__wrapper" };
-const _hoisted_3 = {
+const _hoisted_2 = {
   key: 0,
   class: "vv-input-text__input-before"
 };
-const _hoisted_4 = ["id"];
-const _hoisted_5 = {
+const _hoisted_3 = ["id"];
+const _hoisted_4 = {
   key: 1,
   class: "vv-input-text__unit"
 };
-const _hoisted_6 = {
+const _hoisted_5 = {
   key: 5,
   class: "vv-input-text__input-after"
 };
-const _hoisted_7 = {
+const _hoisted_6 = {
   key: 6,
   class: "vv-input-text__limit"
 };
+const _hoisted_7 = { class: "flex-1" };
+const _hoisted_8 = ["title", "onClick"];
 const __default__ = {
   name: "VvInputText"
 };
@@ -1334,6 +2092,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       id,
       icon,
       iconPosition,
+      iconRemoveSuggestion,
       label,
       modelValue,
       count,
@@ -1345,7 +2104,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       minlength,
       type,
       iMask,
-      step
+      step,
+      storageKey,
+      storageType
     } = toRefs(props);
     const hasId = useUniqueId(id);
     const hasHintId = computed(() => `${hasId.value}-hint`);
@@ -1449,6 +2210,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     );
     const inputEl = el;
     const innerEl = ref();
+    const wrapperEl = ref();
+    const dropdownEl = ref();
     __expose({ $inner: innerEl });
     const localModelValue = useDebouncedInput(
       modelValue,
@@ -1460,9 +2223,27 @@ const _sfc_main = /* @__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) => {
@@ -1521,6 +2302,7 @@ const _sfc_main = /* @__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),
@@ -1540,6 +2322,31 @@ const _sfc_main = /* @__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",
@@ -1670,79 +2477,89 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             for: unref(hasId),
             class: "vv-input-text__label"
           }, toDisplayString(unref(label)), 9, _hoisted_1)) : createCommentVNode("v-if", true),
-          createElementVNode("div", _hoisted_2, [
-            _ctx.$slots.before ? (openBlock(), createElementBlock("div", _hoisted_3, [
-              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$1,
-                  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),
-                (_ctx.unit || _ctx.$slots.unit) && unref(isDirty) ? (openBlock(), createElementBlock("div", _hoisted_5, [
-                  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$1,
-              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, [
-              renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps(unref(slotProps))))
-            ])) : createCommentVNode("v-if", true),
-            unref(count) ? (openBlock(), createElementBlock("span", _hoisted_7, [
-              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, [
+                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$4,
+                    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),
+                  (_ctx.unit || _ctx.$slots.unit) && unref(isDirty) ? (openBlock(), createElementBlock("div", _hoisted_4, [
+                    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$4,
+                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, [
+                renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps(unref(slotProps))))
+              ])) : createCommentVNode("v-if", true),
+              unref(count) ? (openBlock(), createElementBlock("span", _hoisted_6, [
+                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"
@@ -1778,7 +2595,62 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               ]),
               key: "3"
             } : void 0
-          ]), 1032, ["id"])
+          ]), 1032, ["id"]),
+          unref(hasSuggestions) ? (openBlock(), createBlock(_sfc_main$3, {
+            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$1, {
+                    key: value,
+                    onClick: withModifiers(($event) => onSuggestionSelect(value), ["stop"])
+                  }, {
+                    default: withCtx(() => [
+                      createElementVNode("div", _hoisted_7, [
+                        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$4,
+                          normalizeProps(guardReactiveProps(unref(hasIconRemoveSuggestion))),
+                          null,
+                          16
+                          /* FULL_PROPS */
+                        )
+                      ], 8, _hoisted_8)) : createCommentVNode("v-if", true)
+                    ]),
+                    _: 2
+                    /* DYNAMIC */
+                  }, 1032, ["onClick"]);
+                }),
+                128
+                /* KEYED_FRAGMENT */
+              ))
+            ]),
+            _: 3
+            /* FORWARDED */
+          }, 8, ["reference"])) : createCommentVNode("v-if", true)
         ],
         2
         /* CLASS */