@volverjs/ui-vue 0.0.9-beta.8 → 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
@@ -1442,9 +1443,9 @@ const _hoisted_1$h = {
 };
 const _hoisted_2$c = ["id"];
 const _hoisted_3$6 = ["aria-label"];
-const _hoisted_4$4 = /* @__PURE__ */ createElementVNode("div", { class: "vv-alert__close-mask" }, null, -1);
+const _hoisted_4$5 = /* @__PURE__ */ createElementVNode("div", { class: "vv-alert__close-mask" }, null, -1);
 const _hoisted_5$4 = [
-  _hoisted_4$4
+  _hoisted_4$5
 ];
 const _hoisted_6$4 = {
   key: 1,
@@ -2015,19 +2016,26 @@ function joinLines(items) {
   return items;
 }
 function HintSlotFactory(propsOrRef, slots) {
-  const props = unref(propsOrRef);
-  const invalidLabel = computed(() => joinLines(props.invalidLabel));
-  const validLabel = computed(() => joinLines(props.validLabel));
-  const loadingLabel = computed(() => props.loadingLabel);
-  const hintLabel = computed(() => props.hintLabel);
+  const props = computed(() => {
+    if (isRef(propsOrRef)) {
+      return propsOrRef.value;
+    }
+    return propsOrRef;
+  });
+  const invalidLabel = computed(() => joinLines(props.value.invalidLabel));
+  const validLabel = computed(() => joinLines(props.value.validLabel));
+  const loadingLabel = computed(() => props.value.loadingLabel);
+  const hintLabel = computed(() => props.value.hintLabel);
   const hasLoadingLabelOrSlot = computed(
-    () => Boolean(props.loading && (slots.loading || loadingLabel.value))
+    () => Boolean(props.value.loading && (slots.loading || loadingLabel.value))
   );
   const hasInvalidLabelOrSlot = computed(
-    () => !hasLoadingLabelOrSlot.value && Boolean(props.invalid && (slots.invalid || invalidLabel.value))
+    () => !hasLoadingLabelOrSlot.value && Boolean(
+      props.value.invalid && (slots.invalid || invalidLabel.value)
+    )
   );
   const hasValidLabelOrSlot = computed(
-    () => !hasLoadingLabelOrSlot.value && !hasInvalidLabelOrSlot.value && Boolean(props.valid && (slots.valid || validLabel.value))
+    () => !hasLoadingLabelOrSlot.value && !hasInvalidLabelOrSlot.value && Boolean(props.value.valid && (slots.valid || validLabel.value))
   );
   const hasHintLabelOrSlot = computed(
     () => !hasLoadingLabelOrSlot.value && !hasInvalidLabelOrSlot.value && !hasValidLabelOrSlot.value && Boolean(slots.hint || hintLabel.value)
@@ -2036,10 +2044,10 @@ function HintSlotFactory(propsOrRef, slots) {
     () => hasInvalidLabelOrSlot.value || hasValidLabelOrSlot.value || hasLoadingLabelOrSlot.value || hasHintLabelOrSlot.value
   );
   const hintSlotScope = computed(() => ({
-    modelValue: props.modelValue,
-    valid: props.valid,
-    invalid: props.invalid,
-    loading: props.loading
+    modelValue: props.value.modelValue,
+    valid: props.value.valid,
+    invalid: props.value.invalid,
+    loading: props.value.loading
   }));
   const HintSlot = defineComponent({
     name: "HintSlot",
@@ -2565,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
    */
@@ -2777,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));
         }
@@ -2829,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),
@@ -2844,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(
@@ -2865,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,
@@ -3327,7 +3344,7 @@ const _hoisted_3$4 = {
   key: 0,
   class: "vv-select__input-before"
 };
-const _hoisted_4$3 = { class: "vv-select__inner" };
+const _hoisted_4$4 = { class: "vv-select__inner" };
 const _hoisted_5$3 = ["id"];
 const _hoisted_6$3 = ["disabled", "hidden"];
 const _hoisted_7$3 = ["disabled", "value"];
@@ -3469,7 +3486,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
           _ctx.$slots.before ? (openBlock(), createElementBlock("div", _hoisted_3$4, [
             renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
           ])) : createCommentVNode("", true),
-          createElementVNode("div", _hoisted_4$3, [
+          createElementVNode("div", _hoisted_4$4, [
             unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$n, mergeProps({
               key: 0,
               class: "vv-select__icon"
@@ -3559,7 +3576,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
 const _hoisted_1$7 = ["id"];
 const _hoisted_2$5 = ["id", "for"];
 const _hoisted_3$3 = ["id", "aria-controls", "placeholder"];
-const _hoisted_4$2 = {
+const _hoisted_4$3 = {
   key: 0,
   class: "vv-select__input-before"
 };
@@ -3632,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,
@@ -3655,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
@@ -3664,7 +3681,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       }
     };
     const onAfterCollapse = () => {
-      if (searchable.value) {
+      if (propsDefaults.value.searchable) {
         searchText.value = "";
       }
     };
@@ -3678,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,
@@ -3700,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),
@@ -3718,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());
       });
@@ -3737,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(
@@ -3796,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,
@@ -3824,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
     }));
@@ -3856,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",
@@ -3874,7 +3906,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
             onAfterCollapse
           }), createSlots({
             default: withCtx(({ aria }) => [
-              _ctx.$slots.before ? (openBlock(), createElementBlock("div", _hoisted_4$2, [
+              _ctx.$slots.before ? (openBlock(), createElementBlock("div", _hoisted_4$3, [
                 renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
               ])) : createCommentVNode("", true),
               createElementVNode("div", _hoisted_5$2, [
@@ -3908,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" })
@@ -3930,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;
@@ -4026,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",
@@ -4129,12 +4165,13 @@ const VvDialogProps = {
    */
   keepOpen: { type: Boolean, default: false }
 };
-const _hoisted_1$6 = {
+const _hoisted_1$6 = ["onCancel"];
+const _hoisted_2$4 = {
   key: 0,
   class: "vv-dialog__header"
 };
-const _hoisted_2$4 = { class: "vv-dialog__content" };
-const _hoisted_3$2 = {
+const _hoisted_3$2 = { class: "vv-dialog__content" };
+const _hoisted_4$2 = {
   key: 1,
   class: "vv-dialog__footer"
 };
@@ -4150,7 +4187,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     const dialogEl = ref();
     const modelValue = useVModel(props, "modelValue", emit);
     const localModelValue = ref(false);
-    const opened = computed({
+    const isOpened = computed({
       get: () => modelValue.value ?? localModelValue.value,
       set: (newValue) => {
         if (modelValue.value === void 0) {
@@ -4176,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");
       },
@@ -4207,37 +4248,37 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       }
     };
     onClickOutside(modalWrapper, () => {
-      if (!props.keepOpen && opened.value) {
-        opened.value = false;
+      if (!props.keepOpen) {
+        close();
       }
     });
     function close() {
-      opened.value = false;
+      isOpened.value = false;
     }
     function open() {
-      opened.value = true;
+      isOpened.value = true;
     }
     __expose({ close, open });
-    onKeyStroke("Escape", (e) => {
-      if (opened.value) {
-        e.preventDefault();
+    const onCancel = () => {
+      if (!props.keepOpen) {
         close();
       }
-    });
+    };
     return (_ctx, _cache) => {
       return openBlock(), createBlock(Transition, mergeProps({ name: unref(transitioName) }, toHandlers(dialogTransitionHandlers)), {
         default: withCtx(() => [
           withDirectives(createElementVNode("dialog", mergeProps(unref(dialogAttrs), {
             ref_key: "dialogEl",
             ref: dialogEl,
-            class: unref(dialogClass)
+            class: unref(dialogClass),
+            onCancel: withModifiers(onCancel, ["stop", "prevent"])
           }), [
             createElementVNode("article", {
               ref_key: "modalWrapper",
               ref: modalWrapper,
               class: "vv-dialog__wrapper"
             }, [
-              _ctx.$slots.header || _ctx.title ? (openBlock(), createElementBlock("header", _hoisted_1$6, [
+              _ctx.$slots.header || _ctx.title ? (openBlock(), createElementBlock("header", _hoisted_2$4, [
                 renderSlot(_ctx.$slots, "header", {}, () => [
                   createTextVNode(toDisplayString(_ctx.title) + " ", 1),
                   createElementVNode("button", {
@@ -4250,15 +4291,15 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
                   ], 32)
                 ])
               ])) : createCommentVNode("", true),
-              createElementVNode("div", _hoisted_2$4, [
+              createElementVNode("div", _hoisted_3$2, [
                 renderSlot(_ctx.$slots, "default")
               ]),
-              _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_3$2, [
+              _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_4$2, [
                 renderSlot(_ctx.$slots, "footer")
               ])) : createCommentVNode("", true)
             ], 512)
-          ], 16), [
-            [vShow, unref(opened)]
+          ], 16, _hoisted_1$6), [
+            [vShow, unref(isOpened)]
           ])
         ]),
         _: 3
@@ -4289,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,
   /**
@@ -4396,44 +4453,19 @@ const VvInputTextProps = {
     default: "Clear"
   },
   /**
-   * Input mask, only for text type
-   * @see https://beholdr.github.io/maska/
+   * iMask options
+   * @see https://imask.js.org/guide.html
    */
-  mask: {
-    type: String,
-    default: void 0
-  },
-  /**
-   * Show mask before typing
-   * @see https://beholdr.github.io/maska/#/?id=maskinput-options
-   */
-  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
@@ -4454,6 +4486,13 @@ const VvInputTextProps = {
    */
   unit: {
     type: String
+  },
+  /**
+   * Select input text on focus
+   */
+  selectOnFocus: {
+    type: Boolean,
+    default: false
   }
 };
 const VvInputPasswordAction = defineComponent({
@@ -4778,9 +4817,6 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       VvInputTextProps,
       props
     );
-    const inputEl = ref();
-    const innerEl = ref();
-    __expose({ $inner: innerEl });
     const {
       id,
       icon,
@@ -4790,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 (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;
+          }
+          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 (props.type === INPUT_TYPES.NUMBER) {
-            return Number(value);
+          if (!localModelValue.value && !unmasked.value) {
+            return;
           }
-          return value;
+          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) {
@@ -4840,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,
@@ -4874,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(
@@ -4911,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,
@@ -4932,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;
@@ -4977,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;
@@ -5015,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))
@@ -5038,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)
@@ -5643,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
@@ -5663,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(