@volverjs/ui-vue 0.0.10-beta.54 → 0.0.10-beta.56

package/dist/components/index.es.js

@@ -3319,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,
@@ -4059,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,
@@ -4271,7 +4446,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                             128
                             /* KEYED_FRAGMENT */
                           ))
-                        ], 8, _hoisted_8$3))
+                        ], 8, _hoisted_8$4))
                       ],
                       64
                       /* STABLE_FRAGMENT */
@@ -4334,185 +4509,10 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
         ],
         2
         /* CLASS */
-      );
-    };
-  }
-});
-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"];
@@ -4526,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"
@@ -4948,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 */
@@ -5588,7 +5588,7 @@ const _hoisted_4$2 = { class: "vv-input-file__wrapper" };
 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"];
@@ -5949,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,
@@ -6020,6 +6020,78 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
   }
 });
+function isDateIsoString(dateString) {
+  if (typeof dateString !== "string") {
+    return false;
+  }
+  if (!/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d{1,3})?(?:Z|[+-]\d{2}:?\d{2})?$/.test(dateString)) {
+    return false;
+  }
+  const d = new Date(dateString);
+  return !Number.isNaN(d.getTime()) && d.toISOString() === dateString;
+}
+function getInputValueFromDate(date, typeOfInput = "date", withSeconds) {
+  if (typeof date === "string") {
+    if (!isDateIsoString(date)) {
+      return "";
+    }
+  }
+  const currentDate = new Date(date);
+  if (Number.isNaN(currentDate.getTime())) {
+    return "";
+  }
+  const span = (num) => num.toString().padStart(2, "0");
+  let toReturn = `${currentDate.getFullYear()}-${span(currentDate.getMonth() + 1)}`;
+  if (typeOfInput === "month") {
+    return toReturn;
+  }
+  toReturn += `-${span(currentDate.getDate())}`;
+  if (typeOfInput === "date") {
+    return toReturn;
+  }
+  const time = withSeconds ? `${span(currentDate.getHours())}:${span(currentDate.getMinutes())}:${span(currentDate.getSeconds())}` : `${span(currentDate.getHours())}:${span(currentDate.getMinutes())}`;
+  if (typeOfInput === "time") {
+    return time;
+  }
+  return `${toReturn}T${time}`;
+}
+function getDateFromInputValue(value, typeOfInput = "date") {
+  if (!(value == null ? void 0 : value.trim())) {
+    return null;
+  }
+  const today = /* @__PURE__ */ new Date();
+  const currentYear = today.getFullYear();
+  const currentMonth = today.getMonth();
+  const currentDate = today.getDate();
+  if (typeOfInput === "date") {
+    if (!/^\d{4}-\d{2}-\d{2}$/.test(value)) {
+      throw new Error("Invalid date format. Expected: YYYY-MM-DD");
+    }
+    return /* @__PURE__ */ new Date(`${value}T00:00:00`);
+  }
+  if (typeOfInput === "month") {
+    if (!/^\d{4}-\d{2}$/.test(value)) {
+      throw new Error("Invalid month format. Expected: YYYY-MM");
+    }
+    return /* @__PURE__ */ new Date(`${value}-01T00:00:00`);
+  }
+  if (typeOfInput === "time") {
+    if (!/^(?:[01]\d|2[0-3]):[0-5]\d(?::[0-5]\d)?$/.test(value)) {
+      throw new Error("Invalid time format. Expected: HH:mm or HH:mm:ss");
+    }
+    if (value.length === 8) {
+      return /* @__PURE__ */ new Date(`${currentYear}-${currentMonth + 1}-${currentDate}T${value}`);
+    }
+    return /* @__PURE__ */ new Date(`${currentYear}-${currentMonth + 1}-${currentDate}T${value}:00`);
+  }
+  if (!/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(?::\d{2})?$/.test(value)) {
+    throw new Error("Invalid datetime format. Expected: YYYY-MM-DDThh:mm or YYYY-MM-DDThh:mm:ss");
+  }
+  if (value.length === 16) {
+    return /* @__PURE__ */ new Date(`${value}:00`);
+  }
+  return /* @__PURE__ */ new Date(`${value}`);
+}
 const INPUT_TYPES = {
   TEXT: "text",
   PASSWORD: "password",
@@ -6059,7 +6131,7 @@ const VvInputTextProps = {
    * Input value
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
    */
-  modelValue: [String, Number],
+  modelValue: [String, Number, Date],
   /**
    * Type of form control
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#type
@@ -6533,7 +6605,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"
 };
@@ -6579,8 +6651,17 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       emit,
       (debounce == null ? void 0 : debounce.value) ?? 0
     );
+    const hasSeconds = computed(() => {
+      const stepValue = typeof step.value === "number" ? step.value : Number.parseInt(step.value);
+      if (Number.isNaN(stepValue)) {
+        return false;
+      }
+      return stepValue % 60 !== 0;
+    });
     const NEGATIVE_ZERO_REGEX = /^-0?[.,]?[0*]?$/;
     const maskReady = ref(false);
+    const modelValueDate = ref();
+    const modelValueDateIsoString = ref();
     const { el, mask, typed, masked, unmasked } = useIMask(
       computed(
         () => {
@@ -6605,6 +6686,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       {
         emit,
         onAccept: () => {
+          var _a;
           if (!maskReady.value) {
             return;
           }
@@ -6628,42 +6710,51 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
             localModelValue.value = typed.value;
             return;
           }
-          if (type.value === INPUT_TYPES.DATE) {
-            if (el.value instanceof HTMLInputElement && el.value.type === "date") {
-              localModelValue.value = el.value.value;
-              return;
-            }
-            let date = typed.value;
-            if (date === null || date === "") {
+          if (type.value === INPUT_TYPES.DATETIME_LOCAL || type.value === INPUT_TYPES.DATE || type.value === INPUT_TYPES.TIME || type.value === INPUT_TYPES.MONTH) {
+            if (!typed.value) {
               if (!localModelValue.value) {
                 return;
               }
+              if (modelValueDate.value) {
+                localModelValue.value = void 0;
+                return;
+              }
               localModelValue.value = "";
               return;
             }
-            if (!(date instanceof Date)) {
-              date = new Date(date);
-            }
-            localModelValue.value = `${date.getFullYear()}-${`0${date.getMonth() + 1}`.slice(-2)}-${`0${date.getDate()}`.slice(-2)}`;
-            return;
-          }
-          if (type.value === INPUT_TYPES.DATETIME_LOCAL) {
-            if (el.value instanceof HTMLInputElement && el.value.type === "datetime-local") {
-              localModelValue.value = el.value.value;
+            if (!(typed.value instanceof Date) && !modelValueDate.value && !modelValueDateIsoString.value) {
+              localModelValue.value = typed.value;
               return;
             }
             let date = typed.value;
-            if (date === null || date === "") {
-              if (!localModelValue.value) {
+            if (!(date instanceof Date)) {
+              date = getDateFromInputValue(typed.value, type.value);
+            }
+            if (modelValueDate.value || modelValueDateIsoString.value) {
+              const toReturn = new Date(modelValueDate.value || modelValueDateIsoString.value);
+              if (type.value === INPUT_TYPES.DATETIME_LOCAL || type.value === INPUT_TYPES.DATE || type.value === INPUT_TYPES.MONTH) {
+                toReturn.setFullYear(date.getFullYear());
+                toReturn.setMonth(date.getMonth());
+              }
+              if (type.value === INPUT_TYPES.DATETIME_LOCAL || type.value === INPUT_TYPES.DATE) {
+                toReturn.setDate(date.getDate());
+              }
+              if (type.value === INPUT_TYPES.DATETIME_LOCAL || type.value === INPUT_TYPES.TIME) {
+                toReturn.setHours(date.getHours());
+                toReturn.setMinutes(date.getMinutes());
+                toReturn.setSeconds(date.getSeconds());
+              }
+              if (modelValueDate.value instanceof Date) {
+                if (((_a = localModelValue.value) == null ? void 0 : _a.getTime()) === toReturn.getTime()) {
+                  return;
+                }
+                localModelValue.value = toReturn;
                 return;
               }
-              localModelValue.value = "";
+              localModelValue.value = toReturn.toISOString();
               return;
             }
-            if (!(typed.value instanceof Date)) {
-              date = new Date(date);
-            }
-            localModelValue.value = `${date.getFullYear()}-${`0${date.getMonth() + 1}`.slice(-2)}-${`0${date.getDate()}`.slice(-2)}T${`0${date.getHours()}`.slice(-2)}:${`0${date.getMinutes()}`.slice(-2)}`;
+            localModelValue.value = getInputValueFromDate(date, type.value, hasSeconds.value);
             return;
           }
           if (!localModelValue.value && !unmasked.value) {
@@ -6681,12 +6772,29 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
         return;
       }
       if (((_a = props.iMask) == null ? void 0 : _a.mask) === Date) {
-        typed.value = new Date(newValue);
+        typed.value = newValue instanceof Date ? newValue : new Date(newValue);
         return;
       }
       if (type.value === INPUT_TYPES.NUMBER && NEGATIVE_ZERO_REGEX.test(unmasked.value) && newValue === 0) {
         return;
       }
+      if (type.value === INPUT_TYPES.DATE || type.value === INPUT_TYPES.MONTH || type.value === INPUT_TYPES.DATETIME_LOCAL || type.value === INPUT_TYPES.TIME) {
+        if (newValue instanceof Date || isDateIsoString(newValue)) {
+          if (newValue instanceof Date) {
+            modelValueDate.value = newValue;
+            modelValueDateIsoString.value = void 0;
+          } else {
+            modelValueDateIsoString.value = newValue;
+            modelValueDate.value = void 0;
+          }
+          const newDate = new Date(newValue);
+          typed.value = getInputValueFromDate(newDate, type.value, hasSeconds.value);
+          unmasked.value = typed.value;
+          return;
+        }
+        modelValueDate.value = void 0;
+        modelValueDateIsoString.value = void 0;
+      }
       typed.value = newValue;
       unmasked.value = `${typed.value}`;
     }
@@ -6713,34 +6821,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) => {
@@ -6838,7 +6944,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;
@@ -7100,8 +7206,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
@@ -7140,7 +7246,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 */
@@ -7773,6 +7879,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
@@ -7798,27 +7905,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"
 };
@@ -7835,11 +7972,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,
@@ -7849,7 +7990,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`);
@@ -7858,8 +8001,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;
@@ -7884,6 +8052,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,
@@ -7952,49 +8145,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"
@@ -8030,7 +8233,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 */