@volverjs/ui-vue 0.0.9-beta.9 → 0.0.9

package/dist/components/index.es.js

@@ -1,11 +1,16 @@
-import { unref, inject, computed, toRef, toRefs, defineComponent, useAttrs, ref, openBlock, createElementBlock, normalizeClass, createElementVNode, withModifiers, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString, isRef, provide, watchEffect, watch, Fragment, renderList, createBlock, mergeProps, withCtx, resolveDynamicComponent, createCommentVNode, useSlots, h, onMounted, withDirectives, vModelCheckbox, createVNode, createSlots, nextTick, Transition, toHandlers, normalizeStyle, vShow, vModelSelect, vModelText, vModelDynamic, vModelRadio } from "vue";
+import { unref, inject, computed, toRef, toRefs, defineComponent, useAttrs, ref, openBlock, createElementBlock, normalizeClass, createElementVNode, withModifiers, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString, isRef, provide, watchEffect, watch, Fragment, renderList, createBlock, mergeProps, withCtx, resolveDynamicComponent, createCommentVNode, useSlots, h, onMounted, withDirectives, vModelCheckbox, createVNode, createSlots, nextTick, Transition, toHandlers, normalizeStyle, vShow, vModelSelect, vModelText, vModelRadio } from "vue";
 import { nanoid } from "nanoid";
-import { useToggle, useStorage, useVModel, useMutationObserver, onClickOutside, useFocusWithin, onKeyStroke, useElementHover, useFocus, useElementVisibility, refDebounced } from "@vueuse/core";
+import { useToggle, useStorage, useVModel, useMutationObserver, onClickOutside, useFocusWithin, onKeyStroke, useElementHover, useFocus, useElementVisibility, refDebounced, computedAsync } from "@vueuse/core";
 import { iconExists, Icon, addIcon } from "@iconify/vue";
 import { get } from "ts-dot-prop";
 import { autoPlacement, flip, shift, size, offset, arrow, useFloating, autoUpdate } from "@floating-ui/vue";
 import mitt from "mitt";
-import { Mask } from "maska";
+import { useIMask } from "vue-imask";
+var Strategy = /* @__PURE__ */ ((Strategy2) => {
+  Strategy2["absolute"] = "absolute";
+  Strategy2["fixed"] = "fixed";
+  return Strategy2;
+})(Strategy || {});
 var Side = /* @__PURE__ */ ((Side2) => {
   Side2["left"] = "left";
   Side2["right"] = "right";
@@ -272,19 +277,15 @@ const DropdownProps = {
   placement: {
     type: String,
     default: Side.bottom,
-    validator: (value) => {
-      return Object.values(Side).includes(value) || Object.values(Placement).includes(value);
-    }
+    validator: (value) => Object.values(Side).includes(value) || Object.values(Placement).includes(value)
   },
   /**
    * Dropdown strategy
    */
   strategy: {
     type: String,
-    default: "absolute",
-    validator: (value) => {
-      return ["fixed", "absolute"].includes(value);
-    }
+    default: void 0,
+    validator: (value) => Object.values(Strategy).includes(value)
   },
   /**
    * Dropdown show / hide transition name
@@ -2572,6 +2573,13 @@ const VvComboboxProps = {
    * 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
    */
@@ -2784,7 +2792,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
         }
       } else if (props.flip) {
         if (typeof props.flip === "boolean") {
-          toReturn.push(flip());
+          toReturn.push(flip({ fallbackStrategy: "initialPlacement" }));
         } else {
           toReturn.push(flip(props.flip));
         }
@@ -2836,13 +2844,13 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
       }
       return toReturn;
     });
-    const { x, y, strategy, middlewareData, placement } = useFloating(
+    const { x, y, middlewareData, placement, strategy } = useFloating(
       referenceEl,
       floatingEl,
       {
         whileElementsMounted: (...args) => {
           return autoUpdate(...args, {
-            animationFrame: props.strategy === "fixed"
+            animationFrame: props.strategy === Strategy.fixed
           });
         },
         placement: computed(() => props.placement),
@@ -2851,16 +2859,18 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
       }
     );
     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: maxWidth.value,
+        maxWidth: width ? void 0 : maxWidth.value,
         maxHeight: maxHeight.value,
-        width: props.triggerWidth && referenceEl.value ? `${referenceEl.value.offsetWidth}px` : void 0
+        width
       };
     });
     const side = computed(
@@ -2872,10 +2882,10 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
         return void 0;
       }
       const staticSide = {
-        top: "bottom",
-        right: "left",
-        bottom: "top",
-        left: "right"
+        [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,
@@ -3639,7 +3649,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     const searchText = ref("");
     const debouncedSearchText = refDebounced(
       searchText,
-      Number(props.debounceSearch)
+      computed(() => Number(props.debounceSearch))
     );
     watch(
       debouncedSearchText,
@@ -3662,7 +3672,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       expanded.value = false;
     };
     const onAfterExpand = () => {
-      if (searchable.value) {
+      if (propsDefaults.value.searchable) {
         if (inputSearchEl.value) {
           inputSearchEl.value.focus({
             preventScroll: true
@@ -3671,7 +3681,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       }
     };
     const onAfterCollapse = () => {
-      if (searchable.value) {
+      if (propsDefaults.value.searchable) {
         searchText.value = "";
       }
     };
@@ -3685,14 +3695,15 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       loading,
       valid,
       invalid,
-      floating,
-      searchable
+      floating
     } = toRefs(props);
     const hasId = useUniqueId(id);
     const hasHintId = computed(() => `${hasId.value}-hint`);
     const hasDropdownId = computed(() => `${hasId.value}-dropdown`);
     const hasSearchId = computed(() => `${hasId.value}-search`);
     const hasLabelId = computed(() => `${hasId.value}-label`);
+    const localLoading = ref(false);
+    const isLoading = computed(() => localLoading.value || loading.value);
     const dropdownEl = ref();
     const { hasIcon, hasIconBefore, hasIconAfter } = useComponentIcon(
       icon,
@@ -3707,7 +3718,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       modifiers,
       computed(() => ({
         disabled: disabled.value,
-        loading: loading.value,
+        loading: isLoading.value,
         readonly: readonly.value,
         "icon-before": Boolean(hasIconBefore.value),
         "icon-after": Boolean(hasIconAfter.value),
@@ -3725,8 +3736,19 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       getOptionDisabled,
       getOptionGrouped
     } = useOptions(props);
-    const filteredOptions = computed(() => {
+    const filteredOptions = computedAsync(async () => {
       var _a;
+      if (propsDefaults.value.searchFunction) {
+        localLoading.value = true;
+        const toReturn = await Promise.resolve(
+          propsDefaults.value.searchFunction(
+            debouncedSearchText.value,
+            props.options
+          )
+        );
+        localLoading.value = false;
+        return toReturn;
+      }
       return (_a = props.options) == null ? void 0 : _a.filter((option) => {
         return getOptionLabel(option).toLowerCase().includes(debouncedSearchText.value.toLowerCase().trim());
       });
@@ -3744,12 +3766,15 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       } else if (props.modelValue) {
         selectedValues = [props.modelValue];
       }
-      const options = props.options.reduce((acc, value) => {
-        if (isGroup(value)) {
-          return [...acc, ...getOptionGrouped(value)];
-        }
-        return [...acc, value];
-      }, []);
+      const options = props.options.reduce(
+        (acc, value) => {
+          if (isGroup(value)) {
+            return [...acc, ...getOptionGrouped(value)];
+          }
+          return [...acc, value];
+        },
+        []
+      );
       return options.filter((option) => {
         if (isGroup(option)) {
           return getOptionGrouped(option).some(
@@ -3803,7 +3828,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       invalid: invalid.value,
       invalidLabel: propsDefaults.value.invalidLabel,
       hintLabel: propsDefaults.value.hintLabel,
-      loading: loading.value,
+      loading: isLoading.value,
       loadingLabel: propsDefaults.value.loadingLabel,
       disabled: disabled.value,
       readonly: readonly.value,
@@ -3831,7 +3856,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       flip: propsDefaults.value.flip,
       autoPlacement: propsDefaults.value.autoPlacement,
       arrow: propsDefaults.value.arrow,
-      autofocusFirst: searchable.value ? true : propsDefaults.value.autofocusFirst,
+      autofocusFirst: propsDefaults.value.searchable ? true : propsDefaults.value.autofocusFirst,
       triggerWidth: propsDefaults.value.triggerWidth,
       modifiers: propsDefaults.value.dropdownModifiers
     }));
@@ -3863,7 +3888,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
         _ctx.label ? (openBlock(), createElementBlock("label", {
           key: 0,
           id: unref(hasLabelId),
-          for: unref(searchable) ? unref(hasSearchId) : void 0
+          for: unref(propsDefaults).searchable ? unref(hasSearchId) : void 0
         }, toDisplayString(_ctx.label), 9, _hoisted_2$5)) : createCommentVNode("", true),
         createElementVNode("div", {
           ref_key: "wrapperEl",
@@ -3915,6 +3940,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                             _ctx.unselectable && !unref(readonly) && !unref(disabled) ? (openBlock(), createElementBlock("button", {
                               key: 0,
                               "aria-label": unref(propsDefaults).deselectActionLabel,
+                              type: "button",
                               onClick: withModifiers(($event) => onInput(option), ["stop"])
                             }, [
                               createVNode(_sfc_main$n, { name: "close" })
@@ -3937,87 +3963,90 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                 renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps(unref(slotProps))))
               ])) : createCommentVNode("", true)
             ]),
-            items: withCtx(() => [
-              unref(filteredOptions).length ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(unref(filteredOptions), (option, index) => {
-                return openBlock(), createElementBlock(Fragment, { key: index }, [
-                  isGroup(option) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                    createVNode(_sfc_main$b, {
-                      label: unref(getOptionLabel)(option)
-                    }, null, 8, ["label"]),
-                    (openBlock(true), createElementBlock(Fragment, null, renderList(unref(getOptionGrouped)(
-                      option
-                    ), (item, i) => {
-                      return openBlock(), createBlock(_sfc_main$c, mergeProps({
-                        disabled: unref(getOptionDisabled)(item),
-                        selected: getOptionSelected(item),
-                        unselectable: _ctx.unselectable,
-                        deselectHintLabel: unref(propsDefaults).deselectHintLabel,
-                        selectHintLabel: unref(propsDefaults).selectHintLabel,
-                        selectedHintLabel: unref(propsDefaults).selectedHintLabel
-                      }, {
-                        key: i,
-                        class: "vv-dropdown-option",
-                        onClickPassive: ($event) => onInput(item)
-                      }), {
-                        default: withCtx(() => [
-                          renderSlot(_ctx.$slots, "option", normalizeProps(guardReactiveProps({
-                            option,
-                            selectedOptions: unref(selectedOptions),
-                            selected: getOptionSelected(item),
-                            disabled: unref(getOptionDisabled)(item)
-                          })), () => [
-                            createTextVNode(toDisplayString(unref(getOptionLabel)(item)), 1)
-                          ])
-                        ]),
-                        _: 2
-                      }, 1040, ["onClickPassive"]);
-                    }), 128))
-                  ], 64)) : (openBlock(), createBlock(_sfc_main$c, mergeProps({ key: 1 }, {
-                    disabled: unref(getOptionDisabled)(option),
-                    selected: getOptionSelected(option),
-                    unselectable: _ctx.unselectable,
-                    deselectHintLabel: unref(propsDefaults).deselectHintLabel,
-                    selectHintLabel: unref(propsDefaults).selectHintLabel,
-                    selectedHintLabel: unref(propsDefaults).selectedHintLabel
-                  }, {
-                    class: "vv-dropdown-option",
-                    onClickPassive: ($event) => onInput(option)
-                  }), {
-                    default: withCtx(() => [
-                      renderSlot(_ctx.$slots, "option", normalizeProps(guardReactiveProps({
-                        option,
-                        selectedOptions: unref(selectedOptions),
-                        selected: getOptionSelected(option),
-                        disabled: unref(getOptionDisabled)(option)
-                      })), () => [
-                        createTextVNode(toDisplayString(unref(getOptionLabel)(option)), 1)
-                      ])
-                    ]),
-                    _: 2
-                  }, 1040, ["onClickPassive"]))
-                ], 64);
-              }), 128)) : !_ctx.options.length ? (openBlock(), createBlock(_sfc_main$c, {
-                key: 1,
-                modifiers: "inert"
-              }, {
-                default: withCtx(() => [
-                  renderSlot(_ctx.$slots, "no-options", {}, () => [
-                    createTextVNode(toDisplayString(unref(propsDefaults).noOptionsLabel), 1)
-                  ])
-                ]),
-                _: 3
-              })) : (openBlock(), createBlock(_sfc_main$c, {
-                key: 2,
-                modifiers: "inert"
-              }, {
-                default: withCtx(() => [
-                  renderSlot(_ctx.$slots, "no-results", {}, () => [
-                    createTextVNode(toDisplayString(unref(propsDefaults).noResultsLabel), 1)
-                  ])
-                ]),
-                _: 3
-              }))
-            ]),
+            items: withCtx(() => {
+              var _a;
+              return [
+                !unref(disabled) && ((_a = unref(filteredOptions)) == null ? void 0 : _a.length) ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(unref(filteredOptions), (option, index) => {
+                  return openBlock(), createElementBlock(Fragment, { key: index }, [
+                    isGroup(option) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                      createVNode(_sfc_main$b, {
+                        label: unref(getOptionLabel)(option)
+                      }, null, 8, ["label"]),
+                      (openBlock(true), createElementBlock(Fragment, null, renderList(unref(getOptionGrouped)(
+                        option
+                      ), (item, i) => {
+                        return openBlock(), createBlock(_sfc_main$c, mergeProps({
+                          disabled: unref(getOptionDisabled)(item),
+                          selected: getOptionSelected(item),
+                          unselectable: _ctx.unselectable,
+                          deselectHintLabel: unref(propsDefaults).deselectHintLabel,
+                          selectHintLabel: unref(propsDefaults).selectHintLabel,
+                          selectedHintLabel: unref(propsDefaults).selectedHintLabel
+                        }, {
+                          key: i,
+                          class: "vv-dropdown-option",
+                          onClickPassive: ($event) => onInput(item)
+                        }), {
+                          default: withCtx(() => [
+                            renderSlot(_ctx.$slots, "option", normalizeProps(guardReactiveProps({
+                              option,
+                              selectedOptions: unref(selectedOptions),
+                              selected: getOptionSelected(item),
+                              disabled: unref(getOptionDisabled)(item)
+                            })), () => [
+                              createTextVNode(toDisplayString(unref(getOptionLabel)(item)), 1)
+                            ])
+                          ]),
+                          _: 2
+                        }, 1040, ["onClickPassive"]);
+                      }), 128))
+                    ], 64)) : (openBlock(), createBlock(_sfc_main$c, mergeProps({ key: 1 }, {
+                      disabled: unref(getOptionDisabled)(option),
+                      selected: getOptionSelected(option),
+                      unselectable: _ctx.unselectable,
+                      deselectHintLabel: unref(propsDefaults).deselectHintLabel,
+                      selectHintLabel: unref(propsDefaults).selectHintLabel,
+                      selectedHintLabel: unref(propsDefaults).selectedHintLabel
+                    }, {
+                      class: "vv-dropdown-option",
+                      onClickPassive: ($event) => onInput(option)
+                    }), {
+                      default: withCtx(() => [
+                        renderSlot(_ctx.$slots, "option", normalizeProps(guardReactiveProps({
+                          option,
+                          selectedOptions: unref(selectedOptions),
+                          selected: getOptionSelected(option),
+                          disabled: unref(getOptionDisabled)(option)
+                        })), () => [
+                          createTextVNode(toDisplayString(unref(getOptionLabel)(option)), 1)
+                        ])
+                      ]),
+                      _: 2
+                    }, 1040, ["onClickPassive"]))
+                  ], 64);
+                }), 128)) : !_ctx.options.length ? (openBlock(), createBlock(_sfc_main$c, {
+                  key: 1,
+                  modifiers: "inert"
+                }, {
+                  default: withCtx(() => [
+                    renderSlot(_ctx.$slots, "no-options", {}, () => [
+                      createTextVNode(toDisplayString(unref(propsDefaults).noOptionsLabel), 1)
+                    ])
+                  ]),
+                  _: 3
+                })) : !unref(disabled) ? (openBlock(), createBlock(_sfc_main$c, {
+                  key: 2,
+                  modifiers: "inert"
+                }, {
+                  default: withCtx(() => [
+                    renderSlot(_ctx.$slots, "no-results", {}, () => [
+                      createTextVNode(toDisplayString(unref(propsDefaults).noResultsLabel), 1)
+                    ])
+                  ]),
+                  _: 3
+                })) : createCommentVNode("", true)
+              ];
+            }),
             after: withCtx(() => [
               renderSlot(_ctx.$slots, "dropdown::after", {}, () => {
                 var _a;
@@ -4033,11 +4062,11 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
             ]),
             _: 2
           }, [
-            unref(searchable) || _ctx.$slots["dropdown::before"] ? {
+            unref(propsDefaults).searchable || _ctx.$slots["dropdown::before"] ? {
               name: "before",
               fn: withCtx(() => [
                 renderSlot(_ctx.$slots, "dropdown::before"),
-                unref(searchable) ? withDirectives((openBlock(), createElementBlock("input", {
+                unref(propsDefaults).searchable && !unref(disabled) ? withDirectives((openBlock(), createElementBlock("input", {
                   key: 0,
                   id: unref(hasSearchId),
                   ref_key: "inputSearchEl",
@@ -4184,14 +4213,18 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     const transitioName = computed(() => `vv-dialog--${props.transition}`);
     const dialogTransitionHandlers = {
       "before-enter": () => {
-        var _a;
-        (_a = dialogEl.value) == null ? void 0 : _a.showModal();
+        var _a, _b;
+        if (!((_a = dialogEl.value) == null ? void 0 : _a.open)) {
+          (_b = dialogEl.value) == null ? void 0 : _b.showModal();
+        }
         emit("open");
         emit("before-enter");
       },
       "after-leave": () => {
-        var _a;
-        (_a = dialogEl.value) == null ? void 0 : _a.close();
+        var _a, _b;
+        if ((_a = dialogEl.value) == null ? void 0 : _a.open) {
+          (_b = dialogEl.value) == null ? void 0 : _b.close();
+        }
         emit("close");
         emit("after-leave");
       },
@@ -4297,7 +4330,23 @@ const TYPES_ICON = {
   COLOR: "color",
   SEARCH: "close"
 };
-const VvInputTextEvents = ["update:modelValue", "focus", "blur", "keyup"];
+const VvInputTextEvents = [
+  "update:modelValue",
+  "update:masked",
+  "accept",
+  "accept:typed",
+  "accept:masked",
+  "accept:unmasked",
+  "complete",
+  "complete:typed",
+  "complete:masked",
+  "complete:unmasked",
+  "focus",
+  "blur",
+  "keyup",
+  "keydown",
+  "keypress"
+];
 const VvInputTextProps = {
   ...InputTextareaProps,
   /**
@@ -4404,44 +4453,19 @@ const VvInputTextProps = {
     default: "Clear"
   },
   /**
-   * Input mask, only for text type
-   * @see https://beholdr.github.io/maska/
-   */
-  mask: {
-    type: String,
-    default: void 0
-  },
-  /**
-   * Show mask before typing
-   * @see https://beholdr.github.io/maska/#/?id=maskinput-options
+   * iMask options
+   * @see https://imask.js.org/guide.html
    */
-  maskEager: {
-    type: Boolean,
-    default: false
-  },
-  /**
-   * Write values reverse (ex. for numbers)
-   * @see https://beholdr.github.io/maska/#/?id=maskinput-options
-   */
-  maskReversed: {
-    type: Boolean,
-    default: false
-  },
-  /**
-   * Add mask custom tokens
-   * @see https://beholdr.github.io/maska/#/?id=custom-tokens
-   */
-  maskTokens: {
+  iMask: {
     type: Object,
     default: void 0
   },
   /**
-   * Replace default tokens
-   * @see https://beholdr.github.io/maska/#/?id=custom-tokens
+   * Masked value
    */
-  maskTokensReplace: {
-    type: Boolean,
-    default: false
+  masked: {
+    type: String,
+    default: void 0
   },
   /**
    * Adjust input width to content
@@ -4462,6 +4486,13 @@ const VvInputTextProps = {
    */
   unit: {
     type: String
+  },
+  /**
+   * Select input text on focus
+   */
+  selectOnFocus: {
+    type: Boolean,
+    default: false
   }
 };
 const VvInputPasswordAction = defineComponent({
@@ -4786,9 +4817,6 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       VvInputTextProps,
       props
     );
-    const inputEl = ref();
-    const innerEl = ref();
-    __expose({ $inner: innerEl });
     const {
       id,
       icon,
@@ -4798,39 +4826,131 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       count,
       valid,
       invalid,
-      loading
+      loading,
+      debounce,
+      maxlength,
+      minlength,
+      type,
+      iMask,
+      step
     } = toRefs(props);
     const hasId = useUniqueId(id);
     const hasHintId = computed(() => `${hasId.value}-hint`);
     const inputTextPlaceholder = computed(
       () => props.floating && isEmpty(props.placeholder) ? " " : props.placeholder
     );
-    const localModelValue = useDebouncedInput(
-      modelValue,
-      emit,
-      props.debounce,
+    const maskReady = ref(false);
+    const { el, mask, typed, masked, unmasked } = useIMask(
+      computed(
+        () => (iMask == null ? void 0 : iMask.value) ?? {
+          mask: /./
+        }
+      ),
       {
-        getter: (value) => {
-          if (mask.value) {
-            return mask.value.masked(value ?? "");
+        emit,
+        onAccept: () => {
+          if (!maskReady.value) {
+            return;
           }
-          return value;
-        },
-        setter: (value) => {
-          if (mask.value) {
-            value = mask.value.unmasked(value);
+          emit("update:masked", masked.value);
+          if (type.value === INPUT_TYPES.NUMBER) {
+            if (masked.value === "") {
+              if (localModelValue.value === null || localModelValue.value === void 0) {
+                return;
+              }
+              localModelValue.value = void 0;
+              return;
+            }
+            if (typeof typed.value !== "number") {
+              localModelValue.value = Number(typed.value);
+              return;
+            }
+            localModelValue.value = typed.value;
+            return;
           }
-          if (props.type === INPUT_TYPES.NUMBER) {
-            return Number(value);
+          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 (!localModelValue.value) {
+                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;
           }
-          return value;
+          if (type.value === INPUT_TYPES.DATETIME_LOCAL) {
+            if (el.value instanceof HTMLInputElement && el.value.type === "datetime-local") {
+              localModelValue.value = el.value.value;
+              return;
+            }
+            let date = typed.value;
+            if (date === null || date === "") {
+              if (!localModelValue.value) {
+                return;
+              }
+              localModelValue.value = "";
+              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)}`;
+            return;
+          }
+          if (!localModelValue.value && !unmasked.value) {
+            return;
+          }
+          localModelValue.value = unmasked.value;
         }
       }
     );
+    onMounted(() => {
+      if (mask.value) {
+        maskReady.value = true;
+        typed.value = localModelValue.value ?? "";
+      }
+    });
+    watch(
+      () => props.modelValue,
+      (newValue) => {
+        var _a;
+        if (mask.value) {
+          typed.value = newValue && ((_a = iMask == null ? void 0 : iMask.value) == null ? void 0 : _a.mask) === Date ? new Date(newValue) : newValue ?? "";
+        }
+      }
+    );
+    watch(
+      () => props.masked,
+      (newValue) => {
+        masked.value = newValue ?? "";
+      }
+    );
+    const inputEl = el;
+    const innerEl = ref();
+    __expose({ $inner: innerEl });
+    const localModelValue = useDebouncedInput(
+      modelValue,
+      emit,
+      (debounce == null ? void 0 : debounce.value) ?? 0
+    );
     const { focused } = useComponentFocus(inputEl, emit);
     const isFocused = computed(
       () => focused.value && !props.disabled && !props.readonly
     );
+    watch(isFocused, (newValue) => {
+      if (newValue && propsDefaults.value.selectOnFocus && inputEl.value) {
+        inputEl.value.select();
+      }
+    });
     const isVisible = useElementVisibility(inputEl);
     watch(isVisible, (newValue) => {
       if (newValue && props.autofocus && !props.disabled && !props.readonly) {
@@ -4848,19 +4968,27 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     const isNumber = computed(() => props.type === INPUT_TYPES.NUMBER);
     const onStepUp = () => {
       if (isClickable.value) {
+        if (iMask == null ? void 0 : iMask.value) {
+          typed.value = typed.value + Number((step == null ? void 0 : step.value) ?? 1);
+          return;
+        }
         inputEl.value.stepUp();
         localModelValue.value = unref(inputEl).value;
       }
     };
     const onStepDown = () => {
       if (isClickable.value) {
+        if (iMask == null ? void 0 : iMask.value) {
+          typed.value = typed.value - Number((step == null ? void 0 : step.value) ?? 1);
+          return;
+        }
         inputEl.value.stepDown();
         localModelValue.value = unref(inputEl).value;
       }
     };
     const isSearch = computed(() => props.type === INPUT_TYPES.SEARCH);
     const onClear = () => {
-      localModelValue.value = void 0;
+      localModelValue.value = "";
     };
     const { hasIcon, hasIconBefore, hasIconAfter } = useComponentIcon(
       icon,
@@ -4882,9 +5010,9 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       }
     });
     const { formatted: countFormatted } = useTextCount(localModelValue, {
-      mode: props.count,
-      upperLimit: Number(props.maxlength),
-      lowerLimit: Number(props.minlength)
+      mode: count.value,
+      upperLimit: Number(maxlength == null ? void 0 : maxlength.value),
+      lowerLimit: Number(minlength == null ? void 0 : minlength.value)
     });
     const isClickable = computed(() => !props.disabled && !props.readonly);
     const hasTabindex = computed(
@@ -4919,17 +5047,20 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       }))
     );
     const hasAttrs = computed(() => {
-      const type = (() => {
+      const type2 = (() => {
         if (isPassword.value && showPassword.value) {
           return INPUT_TYPES.TEXT;
         }
         if (isDateTime.value && !isDirty.value && !focused.value) {
           return INPUT_TYPES.TEXT;
         }
+        if (iMask == null ? void 0 : iMask.value) {
+          return INPUT_TYPES.TEXT;
+        }
         return props.type;
       })();
       const toReturn = {
-        type,
+        type: type2,
         name: props.name,
         tabindex: hasTabindex.value,
         disabled: props.disabled,
@@ -4940,20 +5071,20 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         "aria-describedby": hasHintLabelOrSlot.value ? hasHintId.value : void 0,
         "aria-errormessage": hasInvalidLabelOrSlot.value ? hasHintId.value : void 0
       };
-      if (type === INPUT_TYPES.DATE || type === INPUT_TYPES.MONTH || type === INPUT_TYPES.WEEK || type === INPUT_TYPES.TIME || type === INPUT_TYPES.DATETIME_LOCAL || type === INPUT_TYPES.NUMBER) {
+      if (type2 === INPUT_TYPES.DATE || type2 === INPUT_TYPES.MONTH || type2 === INPUT_TYPES.WEEK || type2 === INPUT_TYPES.TIME || type2 === INPUT_TYPES.DATETIME_LOCAL || type2 === INPUT_TYPES.NUMBER) {
         toReturn.step = props.step;
         toReturn.max = props.max !== void 0 ? String(props.max) : void 0;
         toReturn.min = props.min !== void 0 ? String(props.min) : void 0;
       }
-      if (type === INPUT_TYPES.TEXT || type === INPUT_TYPES.SEARCH || type === INPUT_TYPES.URL || type === INPUT_TYPES.TEL || type === INPUT_TYPES.EMAIL || type === INPUT_TYPES.PASSWORD || type === INPUT_TYPES.NUMBER) {
+      if (type2 === INPUT_TYPES.TEXT || type2 === INPUT_TYPES.SEARCH || type2 === INPUT_TYPES.URL || type2 === INPUT_TYPES.TEL || type2 === INPUT_TYPES.EMAIL || type2 === INPUT_TYPES.PASSWORD || type2 === INPUT_TYPES.NUMBER) {
         toReturn.placeholder = inputTextPlaceholder.value;
       }
-      if (type === INPUT_TYPES.TEXT || type === INPUT_TYPES.SEARCH || type === INPUT_TYPES.URL || type === INPUT_TYPES.TEL || type === INPUT_TYPES.EMAIL || type === INPUT_TYPES.PASSWORD) {
+      if (type2 === INPUT_TYPES.TEXT || type2 === INPUT_TYPES.SEARCH || type2 === INPUT_TYPES.URL || type2 === INPUT_TYPES.TEL || type2 === INPUT_TYPES.EMAIL || type2 === INPUT_TYPES.PASSWORD) {
         toReturn.minlength = props.minlength;
         toReturn.maxlength = props.maxlength;
         toReturn.pattern = props.pattern;
       }
-      if (type === INPUT_TYPES.EMAIL) {
+      if (type2 === INPUT_TYPES.EMAIL) {
         toReturn.multiple = props.multiple;
       }
       return toReturn;
@@ -4985,31 +5116,6 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       INPUT_TYPES.SEARCH,
       props
     );
-    const mask = ref();
-    watch(
-      [
-        () => props.mask,
-        () => props.type,
-        () => props.maskEager,
-        () => props.maskReversed,
-        () => props.maskTokens,
-        () => props.maskTokensReplace
-      ],
-      ([newMask, newType, eager, reversed, tokens, tokensReplace]) => {
-        if (newMask && newType === INPUT_TYPES.TEXT) {
-          mask.value = new Mask({
-            mask: newMask,
-            eager,
-            reversed,
-            tokens,
-            tokensReplace
-          });
-          return;
-        }
-        mask.value = void 0;
-      },
-      { immediate: true }
-    );
     const onClickInner = () => {
       if (isClickable.value) {
         focused.value = true;
@@ -5023,6 +5129,23 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         width: localModelValue.value !== void 0 ? `${String(localModelValue.value).length + 1}ch` : void 0
       };
     });
+    const onKeyDown = (event) => {
+      switch (event.code) {
+        case "ArrowUp":
+          if (isNumber.value) {
+            onStepUp();
+            event.preventDefault();
+          }
+          break;
+        case "ArrowDown":
+          if (isNumber.value) {
+            onStepDown();
+            event.preventDefault();
+          }
+          break;
+      }
+      emit("keydown", event);
+    };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(unref(bemCssClasses))
@@ -5046,17 +5169,16 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
               key: 0,
               class: "vv-input-text__icon"
             }, unref(hasIcon)), null, 16)) : createCommentVNode("", true),
-            withDirectives(createElementVNode("input", mergeProps({
+            createElementVNode("input", mergeProps({
               id: unref(hasId),
               ref_key: "inputEl",
-              ref: inputEl,
-              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(localModelValue) ? localModelValue.value = $event : null)
+              ref: inputEl
             }, unref(hasAttrs), {
               style: unref(hasStyle),
-              onKeyup: _cache[1] || (_cache[1] = ($event) => emit("keyup", $event))
-            }), null, 16, _hoisted_5$1), [
-              [vModelDynamic, unref(localModelValue)]
-            ]),
+              onKeyup: _cache[0] || (_cache[0] = ($event) => emit("keyup", $event)),
+              onKeydown: onKeyDown,
+              onKeypress: _cache[1] || (_cache[1] = ($event) => emit("keypress", $event))
+            }), null, 16, _hoisted_5$1),
             (_ctx.unit || _ctx.$slots.unit) && unref(isDirty) ? (openBlock(), createElementBlock("div", _hoisted_6$1, [
               renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(slotProps))), () => [
                 createTextVNode(toDisplayString(_ctx.unit), 1)
@@ -5651,14 +5773,17 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       valid,
       invalid,
       loading,
-      modifiers
+      modifiers,
+      debounce,
+      minlength,
+      maxlength
     } = toRefs(props);
     const hasId = useUniqueId(id);
     const hasHintId = computed(() => `${hasId.value}-hint`);
     const hasPlaceholder = computed(
       () => props.floating && isEmpty(props.placeholder) ? " " : props.placeholder
     );
-    const localModelValue = useDebouncedInput(modelValue, emit, props.debounce);
+    const localModelValue = useDebouncedInput(modelValue, emit, debounce == null ? void 0 : debounce.value);
     const { hasIcon, hasIconBefore, hasIconAfter } = useComponentIcon(
       icon,
       iconPosition
@@ -5671,9 +5796,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       }
     });
     const { formatted: countFormatted } = useTextCount(localModelValue, {
-      mode: props.count,
-      upperLimit: Number(props.maxlength),
-      lowerLimit: Number(props.minlength)
+      mode: count == null ? void 0 : count.value,
+      upperLimit: Number(maxlength == null ? void 0 : maxlength.value),
+      lowerLimit: Number(minlength == null ? void 0 : minlength.value)
     });
     const isClickable = computed(() => !props.disabled && !props.readonly);
     const hasTabindex = computed(