@volverjs/ui-vue 0.0.10-beta.53 → 0.0.10-beta.55

package/dist/components/index.es.js

@@ -538,6 +538,7 @@ const CheckboxRadioGroupProps = {
   ...ModifiersProps,
   ...LabelProps,
   ...LoadingProps,
+  ...RequiredProps,
   /**
    * Input value
    */
@@ -3225,6 +3226,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
       computed(() => ({
         disabled: disabled.value,
         readonly: readonly.value,
+        required: props.required,
         horizontal: !vertical.value,
         valid: valid.value,
         invalid: invalid.value
@@ -3235,7 +3237,8 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
         id: `${props.name}_opt${index}`,
         name: props.name,
         label: getOptionLabel(option),
-        value: getOptionValue(option)
+        value: getOptionValue(option),
+        required: props.required
       };
     }
     const { HintSlot, hintSlotScope } = HintSlotFactory(propsDefaults, slots);
@@ -3316,6 +3319,181 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const VvComboboxProps = {
+  ...IdNameProps,
+  ...TabindexProps,
+  ...ValidProps,
+  ...InvalidProps,
+  ...HintProps,
+  ...LoadingProps,
+  ...DisabledProps,
+  ...ReadonlyProps,
+  ...ModifiersProps,
+  ...OptionsProps,
+  ...IconProps,
+  ...FloatingLabelProps,
+  ...DropdownProps,
+  ...LabelProps,
+  ...RequiredProps,
+  /**
+   * Dropdown show / hide transition name
+   */
+  transitionName: {
+    type: String,
+    default: "vv-dropdown--mobile-fade-block"
+  },
+  /**
+   * modelValue can be a string, number, boolean, object or array of string, number, boolean, object
+   */
+  modelValue: {
+    type: [String, Number, Boolean, Object, Array],
+    default: void 0
+  },
+  /**
+   * Label for no search results
+   */
+  noResultsLabel: { type: String, default: "No results" },
+  /**
+   * Label for no options	available
+   */
+  noOptionsLabel: { type: String, default: "No options available" },
+  /**
+   * Label for selected option hint
+   */
+  selectedHintLabel: { type: String, default: "Selected" },
+  /**
+   * Label for deselect action button
+   */
+  deselectActionLabel: { type: String, default: "Deselect" },
+  /**
+   * Label for select option hint
+   */
+  selectHintLabel: { type: String, default: "Press enter to select" },
+  /**
+   * Label for deselected option hint
+   */
+  deselectHintLabel: { type: String, default: "Press enter to remove" },
+  /**
+   * Label close button
+   */
+  closeLabel: { type: String, default: "Close" },
+  /**
+   * Select input placeholder
+   */
+  placeholder: String,
+  /**
+   * Use input text to search on options
+   */
+  searchable: Boolean,
+  /**
+   * Search function to filter options
+   */
+  searchFunction: {
+    type: Function,
+    default: void 0
+  },
+  /**
+   * On searchable select is the input search placeholder
+   */
+  searchPlaceholder: {
+    type: String,
+    default: "Search..."
+  },
+  /**
+   * The input search debounce time in ms
+   */
+  debounceSearch: {
+    type: [Number, String],
+    default: 0
+  },
+  /**
+   * Manage modelValue as string[] or object[]
+   */
+  multiple: Boolean,
+  /**
+   * The min number of selected values
+   */
+  minValues: {
+    type: [Number, String],
+    default: 0
+  },
+  /**
+   * The max number of selected values
+   */
+  maxValues: [Number, String],
+  /**
+   * If true the input will be unselectable
+   * @deprecated use minValues instead
+   */
+  unselectable: { type: Boolean, default: true },
+  /**
+   * The select label separator visible to the user
+   */
+  separator: { type: String, default: ", " },
+  /**
+   * Show native select
+   */
+  native: Boolean,
+  /**
+   * Show badges
+   */
+  badges: Boolean,
+  /**
+   * Badge modifiers
+   */
+  badgeModifiers: {
+    type: [String, Array],
+    default: "action sm"
+  },
+  /**
+   * Set dropdown width to the same as the trigger
+   */
+  triggerWidth: {
+    ...DropdownProps.triggerWidth,
+    default: true
+  },
+  /**
+   * Dropdown modifiers
+   */
+  dropdownModifiers: {
+    type: [String, Array],
+    default: "mobile"
+  },
+  /**
+   * Open dropdown on focus
+   */
+  autoOpen: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Select first option automatically
+   */
+  autoselectFirst: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Keep open dropdown on single select
+   */
+  keepOpen: {
+    type: Boolean,
+    default: false
+  }
+};
+function useVvComboboxProps() {
+  return {
+    ...VvComboboxProps,
+    options: {
+      ...VvComboboxProps.options,
+      type: Array
+    },
+    searchFunction: {
+      ...VvComboboxProps.searchFunction,
+      type: Function
+    }
+  };
+}
 const VvDropdownProps = {
   ...IdProps,
   ...DropdownProps,
@@ -4056,7 +4234,7 @@ const _hoisted_4$5 = { class: "vv-select__inner" };
 const _hoisted_5$4 = ["id"];
 const _hoisted_6$4 = ["disabled", "hidden"];
 const _hoisted_7$4 = ["disabled", "value"];
-const _hoisted_8$3 = ["disabled", "label"];
+const _hoisted_8$4 = ["disabled", "label"];
 const _hoisted_9$2 = ["disabled", "value"];
 const _hoisted_10$1 = {
   key: 1,
@@ -4268,7 +4446,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                             128
                             /* KEYED_FRAGMENT */
                           ))
-                        ], 8, _hoisted_8$3))
+                        ], 8, _hoisted_8$4))
                       ],
                       64
                       /* STABLE_FRAGMENT */
@@ -4335,181 +4513,6 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const VvComboboxProps = {
-  ...IdNameProps,
-  ...TabindexProps,
-  ...ValidProps,
-  ...InvalidProps,
-  ...HintProps,
-  ...LoadingProps,
-  ...DisabledProps,
-  ...ReadonlyProps,
-  ...ModifiersProps,
-  ...OptionsProps,
-  ...IconProps,
-  ...FloatingLabelProps,
-  ...DropdownProps,
-  ...LabelProps,
-  ...RequiredProps,
-  /**
-   * Dropdown show / hide transition name
-   */
-  transitionName: {
-    type: String,
-    default: "vv-dropdown--mobile-fade-block"
-  },
-  /**
-   * modelValue can be a string, number, boolean, object or array of string, number, boolean, object
-   */
-  modelValue: {
-    type: [String, Number, Boolean, Object, Array],
-    default: void 0
-  },
-  /**
-   * Label for no search results
-   */
-  noResultsLabel: { type: String, default: "No results" },
-  /**
-   * Label for no options	available
-   */
-  noOptionsLabel: { type: String, default: "No options available" },
-  /**
-   * Label for selected option hint
-   */
-  selectedHintLabel: { type: String, default: "Selected" },
-  /**
-   * Label for deselect action button
-   */
-  deselectActionLabel: { type: String, default: "Deselect" },
-  /**
-   * Label for select option hint
-   */
-  selectHintLabel: { type: String, default: "Press enter to select" },
-  /**
-   * Label for deselected option hint
-   */
-  deselectHintLabel: { type: String, default: "Press enter to remove" },
-  /**
-   * Label close button
-   */
-  closeLabel: { type: String, default: "Close" },
-  /**
-   * Select input placeholder
-   */
-  placeholder: String,
-  /**
-   * Use input text to search on options
-   */
-  searchable: Boolean,
-  /**
-   * Search function to filter options
-   */
-  searchFunction: {
-    type: Function,
-    default: void 0
-  },
-  /**
-   * On searchable select is the input search placeholder
-   */
-  searchPlaceholder: {
-    type: String,
-    default: "Search..."
-  },
-  /**
-   * The input search debounce time in ms
-   */
-  debounceSearch: {
-    type: [Number, String],
-    default: 0
-  },
-  /**
-   * Manage modelValue as string[] or object[]
-   */
-  multiple: Boolean,
-  /**
-   * The min number of selected values
-   */
-  minValues: {
-    type: [Number, String],
-    default: 0
-  },
-  /**
-   * The max number of selected values
-   */
-  maxValues: [Number, String],
-  /**
-   * If true the input will be unselectable
-   * @deprecated use minValues instead
-   */
-  unselectable: { type: Boolean, default: true },
-  /**
-   * The select label separator visible to the user
-   */
-  separator: { type: String, default: ", " },
-  /**
-   * Show native select
-   */
-  native: Boolean,
-  /**
-   * Show badges
-   */
-  badges: Boolean,
-  /**
-   * Badge modifiers
-   */
-  badgeModifiers: {
-    type: [String, Array],
-    default: "action sm"
-  },
-  /**
-   * Set dropdown width to the same as the trigger
-   */
-  triggerWidth: {
-    ...DropdownProps.triggerWidth,
-    default: true
-  },
-  /**
-   * Dropdown modifiers
-   */
-  dropdownModifiers: {
-    type: [String, Array],
-    default: "mobile"
-  },
-  /**
-   * Open dropdown on focus
-   */
-  autoOpen: {
-    type: Boolean,
-    default: false
-  },
-  /**
-   * Select first option automatically
-   */
-  autoselectFirst: {
-    type: Boolean,
-    default: false
-  },
-  /**
-   * Keep open dropdown on single select
-   */
-  keepOpen: {
-    type: Boolean,
-    default: false
-  }
-};
-function useVvComboboxProps() {
-  return {
-    ...VvComboboxProps,
-    options: {
-      ...VvComboboxProps.options,
-      type: Array
-    },
-    searchFunction: {
-      ...VvComboboxProps.searchFunction,
-      type: Function
-    }
-  };
-}
 const _hoisted_1$8 = ["id"];
 const _hoisted_2$6 = ["id", "for"];
 const _hoisted_3$4 = ["id", "aria-controls", "placeholder"];
@@ -4523,7 +4526,7 @@ const _hoisted_7$3 = {
   key: 0,
   class: "vv-select__value"
 };
-const _hoisted_8$2 = ["aria-label", "onClick"];
+const _hoisted_8$3 = ["aria-label", "onClick"];
 const _hoisted_9$1 = {
   key: 1,
   class: "vv-select__input-after"
@@ -4945,7 +4948,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                                     onClick: withModifiers(($event) => onInput(option), ["stop"])
                                   }, [
                                     createVNode(_sfc_main$u, { name: "close" })
-                                  ], 8, _hoisted_8$2)) : createCommentVNode("v-if", true)
+                                  ], 8, _hoisted_8$3)) : createCommentVNode("v-if", true)
                                 ]),
                                 _: 2
                                 /* DYNAMIC */
@@ -5471,6 +5474,7 @@ const VvInputFileProps = {
   ...LoadingProps,
   ...ReadonlyProps,
   ...DisabledProps,
+  ...RequiredProps,
   ...IconProps,
   /**
    * Input value
@@ -5581,10 +5585,10 @@ const _hoisted_1$6 = ["for"];
 const _hoisted_2$4 = { class: "vv-input-file__preview" };
 const _hoisted_3$2 = ["src", "alt"];
 const _hoisted_4$2 = { class: "vv-input-file__wrapper" };
-const _hoisted_5$2 = ["id", "readonly", "disabled", "placeholder", "aria-describedby", "aria-invalid", "aria-errormessage", "multiple", "accept", "capture", "name"];
+const _hoisted_5$2 = ["id", "readonly", "disabled", "required", "placeholder", "aria-describedby", "aria-invalid", "aria-errormessage", "multiple", "accept", "capture", "name"];
 const _hoisted_6$2 = ["value"];
 const _hoisted_7$2 = ["onClick"];
-const _hoisted_8$1 = ["title", "onClick"];
+const _hoisted_8$2 = ["title", "onClick"];
 const _hoisted_9 = { class: "vv-input-file__item-name" };
 const _hoisted_10 = { class: "vv-input-file__item-info" };
 const _hoisted_11 = ["title", "disabled", "onClick"];
@@ -5620,10 +5624,13 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       "vv-input-file",
       modifiers,
       computed(() => ({
-        "dragging": isDragging.value,
-        "loading": props.loading && !hasProgress.value,
         "valid": props.valid === true,
         "invalid": props.invalid === true,
+        "loading": props.loading && !hasProgress.value,
+        "disabled": props.disabled,
+        "required": props.required,
+        "readonly": props.readonly,
+        "dragging": isDragging.value,
         "icon-before": !!hasIconBefore.value,
         "icon-after": !!hasIconAfter.value,
         "drop-area": hasDropArea.value
@@ -5886,6 +5893,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
               type: "file",
               readonly: unref(readonly),
               disabled: unref(disabled),
+              required: _ctx.required,
               placeholder: _ctx.placeholder,
               "aria-describedby": unref(hasHintLabelOrSlot) ? hasHintId.value : void 0,
               "aria-invalid": _ctx.invalid,
@@ -5941,7 +5949,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                     16
                     /* FULL_PROPS */
                   )
-                ], 8, _hoisted_8$1)) : createCommentVNode("v-if", true),
+                ], 8, _hoisted_8$2)) : createCommentVNode("v-if", true),
                 createElementVNode(
                   "div",
                   _hoisted_9,
@@ -6525,7 +6533,7 @@ const _hoisted_6$1 = {
   class: "vv-input-text__limit"
 };
 const _hoisted_7$1 = { class: "flex-1" };
-const _hoisted_8 = ["title", "onClick"];
+const _hoisted_8$1 = ["title", "onClick"];
 const __default__$8 = {
   name: "VvInputText"
 };
@@ -6667,7 +6675,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     );
     function updateMaskValue(newValue) {
       var _a;
-      if (newValue === void 0) {
+      if (newValue === void 0 || newValue === null) {
         typed.value = "";
         unmasked.value = "";
         return;
@@ -6705,34 +6713,32 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     const inputEl = el;
     const innerEl = ref();
     const wrapperEl = ref();
-    const dropdownEl = ref();
+    const suggestionsDropdownEl = ref();
     __expose({ $inner: innerEl });
     const { focused } = useComponentFocus(inputEl, emit);
     const isFocused = computed(
       () => focused.value && !props.disabled && !props.readonly
     );
     watch(isFocused, (newValue) => {
-      var _a;
+      var _a, _b;
       if (newValue && propsDefaults.value.selectOnFocus && inputEl.value) {
         inputEl.value.select();
       }
-      if (newValue) {
-        (_a = dropdownEl.value) == null ? void 0 : _a.show();
+      if (newValue && ((_a = suggestions.value) == null ? void 0 : _a.size)) {
+        (_b = suggestionsDropdownEl.value) == null ? void 0 : _b.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);
+      if (isDirty.value && suggestions.value) {
+        const suggestionsLimit = props.maxSuggestions;
+        if (suggestions.value.size >= suggestionsLimit && !suggestions.value.has(localModelValue.value)) {
+          suggestions.value = new Set(
+            [...suggestions.value].slice(
+              suggestions.value.size - suggestionsLimit + 1
+            )
+          );
         }
-      }, 300);
+        suggestions.value.add(localModelValue.value);
+      }
     });
     const isVisible = useElementVisibility(inputEl);
     watch(isVisible, (newValue) => {
@@ -6830,7 +6836,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     function onSuggestionSelect(suggestion) {
       var _a;
       localModelValue.value = suggestion;
-      (_a = dropdownEl.value) == null ? void 0 : _a.hide();
+      (_a = suggestionsDropdownEl.value) == null ? void 0 : _a.hide();
     }
     function onSuggestionRemove(suggestion) {
       var _a;
@@ -7092,8 +7098,8 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
           ]), 1032, ["id"]),
           unref(hasSuggestions) ? (openBlock(), createBlock(_sfc_main$i, {
             key: 1,
-            ref_key: "dropdownEl",
-            ref: dropdownEl,
+            ref_key: "suggestionsDropdownEl",
+            ref: suggestionsDropdownEl,
             reference: unref(wrapperEl),
             "autofocus-first": false,
             "trigger-width": true
@@ -7132,7 +7138,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                           16
                           /* FULL_PROPS */
                         )
-                      ], 8, _hoisted_8)) : createCommentVNode("v-if", true)
+                      ], 8, _hoisted_8$1)) : createCommentVNode("v-if", true)
                     ]),
                     _: 2
                     /* DYNAMIC */
@@ -7538,6 +7544,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       computed(() => ({
         disabled: disabled.value,
         readonly: readonly.value,
+        required: props.required,
         horizontal: !vertical.value,
         valid: valid.value,
         invalid: invalid.value
@@ -7548,7 +7555,8 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
         id: `${props.name}_opt${index}`,
         name: props.name,
         label: getOptionLabel(option),
-        value: getOptionValue(option)
+        value: getOptionValue(option),
+        required: props.required
       };
     }
     const { HintSlot, hintSlotScope } = HintSlotFactory(propsDefaults, slots);
@@ -7763,6 +7771,7 @@ const SPELLCHECK = {
 const VvTextareaEvents = ["update:modelValue", "focus", "blur", "keyup"];
 const VvTextareaProps = {
   ...InputTextareaProps,
+  ...StorageProps,
   /**
    * Textarea value
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#value
@@ -7788,27 +7797,57 @@ const VvTextareaProps = {
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#wrap
    */
   spellcheck: { type: [Boolean, String], default: SPELLCHECK.default },
+  /**
+   * VvIcon name for remove suggestion button
+   * @see VVIcon
+   */
+  iconRemoveSuggestion: {
+    type: [String, Object],
+    default: ACTION_ICONS.remove
+  },
+  /**
+   * Label for remove suggestion button
+   */
+  labelRemoveSuggestion: {
+    type: String,
+    default: "Remove suggestion"
+  },
+  /**
+   * Maximum number of suggestions
+   */
+  maxSuggestions: {
+    type: Number,
+    default: 5
+  },
+  /**
+   * Select input text on focus
+   */
+  selectOnFocus: {
+    type: Boolean,
+    default: false
+  },
   /**
    * If true, the textarea will be resizable
    */
   resizable: Boolean
 };
 const _hoisted_1 = ["for"];
-const _hoisted_2 = { class: "vv-textarea__wrapper" };
-const _hoisted_3 = {
+const _hoisted_2 = {
   key: 0,
   class: "vv-textarea__input-before"
 };
-const _hoisted_4 = { class: "vv-textarea__inner" };
-const _hoisted_5 = ["id"];
-const _hoisted_6 = {
+const _hoisted_3 = { class: "vv-textarea__inner" };
+const _hoisted_4 = ["id"];
+const _hoisted_5 = {
   key: 1,
   class: "vv-textarea__input-after"
 };
-const _hoisted_7 = {
+const _hoisted_6 = {
   key: 2,
   class: "vv-textarea__limit"
 };
+const _hoisted_7 = { class: "flex-1" };
+const _hoisted_8 = ["title", "onClick"];
 const __default__$1 = {
   name: "VvTextarea"
 };
@@ -7825,11 +7864,15 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       VvTextareaProps,
       props
     );
-    const textarea = ref();
+    const textareaEl = ref();
+    const wrapperEl = ref();
+    const suggestionsDropdownEl = ref();
     const {
       id,
       icon,
       iconPosition,
+      iconRemoveSuggestion,
+      labelRemoveSuggestion,
       label,
       modelValue,
       count,
@@ -7839,7 +7882,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       modifiers,
       debounce,
       minlength,
-      maxlength
+      maxlength,
+      storageKey,
+      storageType
     } = toRefs(props);
     const hasId = useUniqueId(id);
     const hasHintId = computed(() => `${hasId.value}-hint`);
@@ -7848,8 +7893,33 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     );
     const localModelValue = useDebouncedInput(modelValue, emit, debounce == null ? void 0 : debounce.value);
     const { hasIconBefore, hasIconAfter } = useComponentIcon(icon, iconPosition);
-    const { focused } = useComponentFocus(textarea, emit);
-    const isVisible = useElementVisibility(textarea);
+    const { hasIcon: hasIconRemoveSuggestion } = useComponentIcon(iconRemoveSuggestion);
+    const { focused } = useComponentFocus(textareaEl, emit);
+    const isFocused = computed(
+      () => focused.value && !props.disabled && !props.readonly
+    );
+    watch(isFocused, (newValue) => {
+      var _a, _b;
+      if (newValue && propsDefaults.value.selectOnFocus && textareaEl.value) {
+        textareaEl.value.select();
+      }
+      if (newValue && ((_a = suggestions.value) == null ? void 0 : _a.size)) {
+        (_b = suggestionsDropdownEl.value) == null ? void 0 : _b.show();
+        return;
+      }
+      if (isDirty.value && suggestions.value) {
+        const suggestionsLimit = props.maxSuggestions;
+        if (suggestions.value.size >= suggestionsLimit && !suggestions.value.has(localModelValue.value)) {
+          suggestions.value = new Set(
+            [...suggestions.value].slice(
+              suggestions.value.size - suggestionsLimit + 1
+            )
+          );
+        }
+        suggestions.value.add(localModelValue.value);
+      }
+    });
+    const isVisible = useElementVisibility(textareaEl);
     watch(isVisible, (newValue) => {
       if (newValue && props.autofocus) {
         focused.value = true;
@@ -7874,6 +7944,31 @@ const _sfc_main$1 = /* @__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
+      ).reverse();
+    });
+    const hasSuggestions = computed(
+      () => (storageKey == null ? void 0 : storageKey.value) && suggestions.value && suggestions.value.size > 0
+    );
+    function onSuggestionSelect(suggestion) {
+      var _a;
+      localModelValue.value = suggestion;
+      (_a = suggestionsDropdownEl.value) == null ? void 0 : _a.hide();
+    }
+    function onSuggestionRemove(suggestion) {
+      var _a;
+      (_a = suggestions.value) == null ? void 0 : _a.delete(suggestion);
+    }
     const {
       HintSlot,
       hasHintLabelOrSlot,
@@ -7942,49 +8037,59 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             for: unref(hasId),
             class: "vv-textarea__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", _hoisted_4, [
-              unref(hasIconBefore) ? (openBlock(), createBlock(
-                _sfc_main$u,
-                mergeProps({ key: 0 }, unref(hasIconBefore), { class: "vv-textarea__icon" }),
-                null,
-                16
-                /* FULL_PROPS */
-              )) : createCommentVNode("v-if", true),
-              withDirectives(createElementVNode("textarea", mergeProps({
-                id: unref(hasId),
-                ref_key: "textarea",
-                ref: textarea,
-                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(localModelValue) ? localModelValue.value = $event : null)
-              }, unref(hasAttrs), {
-                onKeyup: _cache[1] || (_cache[1] = ($event) => emit("keyup", $event))
-              }), null, 16, _hoisted_5), [
-                [vModelText, unref(localModelValue)]
+          createElementVNode(
+            "div",
+            {
+              ref_key: "wrapperEl",
+              ref: wrapperEl,
+              class: "vv-textarea__wrapper"
+            },
+            [
+              _ctx.$slots.before ? (openBlock(), createElementBlock("div", _hoisted_2, [
+                renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
+              ])) : createCommentVNode("v-if", true),
+              createElementVNode("div", _hoisted_3, [
+                unref(hasIconBefore) ? (openBlock(), createBlock(
+                  _sfc_main$u,
+                  mergeProps({ key: 0 }, unref(hasIconBefore), { class: "vv-textarea__icon" }),
+                  null,
+                  16
+                  /* FULL_PROPS */
+                )) : createCommentVNode("v-if", true),
+                withDirectives(createElementVNode("textarea", mergeProps({
+                  id: unref(hasId),
+                  ref_key: "textareaEl",
+                  ref: textareaEl,
+                  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(localModelValue) ? localModelValue.value = $event : null)
+                }, unref(hasAttrs), {
+                  onKeyup: _cache[1] || (_cache[1] = ($event) => emit("keyup", $event))
+                }), null, 16, _hoisted_4), [
+                  [vModelText, unref(localModelValue)]
+                ]),
+                unref(hasIconAfter) ? (openBlock(), createBlock(
+                  _sfc_main$u,
+                  mergeProps({ key: 1 }, unref(hasIconAfter), { class: "vv-textarea__icon vv-textarea__icon-after" }),
+                  null,
+                  16
+                  /* FULL_PROPS */
+                )) : createCommentVNode("v-if", true)
               ]),
-              unref(hasIconAfter) ? (openBlock(), createBlock(
-                _sfc_main$u,
-                mergeProps({ key: 1 }, unref(hasIconAfter), { class: "vv-textarea__icon vv-textarea__icon-after" }),
-                null,
-                16
-                /* FULL_PROPS */
-              )) : 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)
-          ]),
+              _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-textarea__hint"
@@ -8020,7 +8125,62 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               ]),
               key: "3"
             } : void 0
-          ]), 1032, ["id"])
+          ]), 1032, ["id"]),
+          unref(hasSuggestions) ? (openBlock(), createBlock(_sfc_main$i, {
+            key: 1,
+            ref_key: "suggestionsDropdownEl",
+            ref: suggestionsDropdownEl,
+            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$f, {
+                    key: value,
+                    onClick: withModifiers(($event) => onSuggestionSelect(value), ["stop"])
+                  }, {
+                    default: withCtx(() => [
+                      createElementVNode("div", _hoisted_7, [
+                        renderSlot(_ctx.$slots, "suggestion", mergeProps({ ref_for: true }, { value }), () => [
+                          createTextVNode(
+                            toDisplayString(value),
+                            1
+                            /* TEXT */
+                          )
+                        ])
+                      ]),
+                      unref(suggestions) && unref(hasIconRemoveSuggestion) ? (openBlock(), createElementBlock("button", {
+                        key: 0,
+                        type: "button",
+                        tabindex: "-1",
+                        class: "cursor-pointer",
+                        title: unref(labelRemoveSuggestion),
+                        onClick: withModifiers(($event) => onSuggestionRemove(value), ["stop"])
+                      }, [
+                        createVNode(
+                          _sfc_main$u,
+                          mergeProps({ ref_for: true }, 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 */