@volverjs/ui-vue 0.0.3 → 0.0.5-beta.1

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

@@ -1,36 +1,89 @@
-import { defineComponent as ie, unref as i, openBlock as g, createBlock as C, mergeProps as V, createCommentVNode as _, createElementBlock as O, normalizeClass as Ee, toDisplayString as ne, createElementVNode as W, renderSlot as F, normalizeProps as j, guardReactiveProps as q, withDirectives as Ae, isRef as Ie, vModelDynamic as _e, createTextVNode as De, createVNode as Ce } from "vue";
-import { iconExists as x, Icon as Te, addIcon as Pe } from "@iconify/vue";
-function B(t) {
-  return Array.isArray(t) ? t.filter((n) => isString(n)).join(" ") : t;
+import { unref, toRefs, computed, h, inject, defineComponent, ref, openBlock, createBlock, mergeProps, createCommentVNode, watch, useSlots, createElementBlock, normalizeClass, toDisplayString, createElementVNode, renderSlot, normalizeProps, guardReactiveProps, withModifiers, withDirectives, isRef, vModelDynamic, createTextVNode, createVNode } from "vue";
+import { Mask } from "maska";
+import { toReactive, useFocus, useElementVisibility } from "@vueuse/core";
+import { iconExists, Icon, addIcon } from "@iconify/vue";
+import { nanoid } from "nanoid";
+function resolveFieldData(data, field) {
+  if (data && Object.keys(data).length && field) {
+    if (field.indexOf(".") === -1) {
+      return data[field];
+    } else {
+      const fields = field.split(".");
+      let value = data;
+      for (let i = 0, len = fields.length; i < len; ++i) {
+        if (data == null) {
+          return null;
+        }
+        value = value[fields[i]];
+      }
+      return value;
+    }
+  } else {
+    return null;
+  }
+}
+function isEmpty(value) {
+  return ((value2) => value2 === null || value2 === void 0 || value2 === "" || Array.isArray(value2) && value2.length === 0 || !(value2 instanceof Date) && typeof value2 === "object" && Object.keys(value2).length === 0)(unref(value));
+}
+function isString(value) {
+  return typeof value === "string" || value instanceof String;
+}
+function joinLines(errors) {
+  if (Array.isArray(errors)) {
+    return errors.filter((e) => isString(e)).join(" ");
+  }
+  return errors;
 }
-function Oe(t, n) {
+function HintSlotFactory(parentProps, parentSlots) {
   const {
-    invalid: e,
-    valid: l,
-    hint: d,
-    loading: v
-  } = n, {
-    hintLabel: u,
-    modelValue: T,
-    valid: y,
-    validLabel: f,
-    invalid: s,
-    invalidLabel: a,
-    ...S
-  } = toRefs(t), c = resolveFieldData(S, "loading"), m = resolveFieldData(S, "loadingLabel"), w = computed(() => s.value ? !!(s.value && e || a != null && a.value && Array.isArray(a.value) && a.value.length > 0 || a != null && a.value && !isEmpty(a)) : !1), H = computed(
-    () => !!(u && u.value || d)
-  ), b = computed(
-    () => !!(f && f.value || l)
-  ), D = computed(
-    () => !!(c != null && c.value && v || c != null && c.value && (m != null && m.value))
-  ), N = computed(
-    () => H.value || b.value || w.value || D.value
+    invalid: invalidSlot,
+    valid: validSlot,
+    hint: hintSlot,
+    loading: loadingSlot
+  } = parentSlots;
+  const {
+    hintLabel,
+    modelValue,
+    valid,
+    validLabel,
+    invalid,
+    invalidLabel,
+    ...otherProps
+  } = toRefs(parentProps);
+  const loading = resolveFieldData(otherProps, "loading");
+  const loadingLabel = resolveFieldData(otherProps, "loadingLabel");
+  const hasInvalid = computed(() => {
+    if (!invalid.value) {
+      return false;
+    }
+    if (invalid.value && invalidSlot) {
+      return true;
+    }
+    if ((invalidLabel == null ? void 0 : invalidLabel.value) && Array.isArray(invalidLabel.value) && invalidLabel.value.length > 0) {
+      return true;
+    }
+    if ((invalidLabel == null ? void 0 : invalidLabel.value) && !isEmpty(invalidLabel)) {
+      return true;
+    }
+    return false;
+  });
+  const hasHint = computed(
+    () => !!(hintLabel && hintLabel.value || hintSlot)
+  );
+  const hasValid = computed(
+    () => !!(validLabel && validLabel.value || validSlot)
+  );
+  const hasLoading = computed(
+    () => !!((loading == null ? void 0 : loading.value) && loadingSlot || (loading == null ? void 0 : loading.value) && (loadingLabel == null ? void 0 : loadingLabel.value))
+  );
+  const isVisible = computed(
+    () => hasHint.value || hasValid.value || hasInvalid.value || hasLoading.value
   );
   return {
-    hasInvalid: w,
-    hasHint: H,
-    hasValid: b,
-    hasLoading: D,
+    hasInvalid,
+    hasHint,
+    hasValid,
+    hasLoading,
     HintSlot: {
       name: "HintSlot",
       props: {
@@ -39,30 +92,37 @@ function Oe(t, n) {
           default: () => ({})
         }
       },
-      setup(P) {
-        const R = computed(() => {
-          const I = toReactive({
-            hintLabel: u,
-            modelValue: T,
-            valid: y,
-            validLabel: f,
-            invalid: s,
-            invalidLabel: a,
-            loading: c,
-            loadingLabel: m,
-            ...P.params
+      setup(props) {
+        const hintContent = computed(() => {
+          const slotProps = toReactive({
+            hintLabel,
+            modelValue,
+            valid,
+            validLabel,
+            invalid,
+            invalidLabel,
+            loading,
+            loadingLabel,
+            ...props.params
           });
-          return s != null && s.value ? (e == null ? void 0 : e(I)) || B(a == null ? void 0 : a.value) || (u == null ? void 0 : u.value) : y != null && y.value ? (l == null ? void 0 : l(I)) || B(f == null ? void 0 : f.value) || (u == null ? void 0 : u.value) : c != null && c.value ? (v == null ? void 0 : v(I)) || B(m == null ? void 0 : m.value) || (u == null ? void 0 : u.value) : (d == null ? void 0 : d(I)) || B(u == null ? void 0 : u.value) || (u == null ? void 0 : u.value);
+          if (invalid == null ? void 0 : invalid.value) {
+            return (invalidSlot == null ? void 0 : invalidSlot(slotProps)) || joinLines(invalidLabel == null ? void 0 : invalidLabel.value) || (hintLabel == null ? void 0 : hintLabel.value);
+          }
+          if (valid == null ? void 0 : valid.value)
+            return (validSlot == null ? void 0 : validSlot(slotProps)) || joinLines(validLabel == null ? void 0 : validLabel.value) || (hintLabel == null ? void 0 : hintLabel.value);
+          if (loading == null ? void 0 : loading.value)
+            return (loadingSlot == null ? void 0 : loadingSlot(slotProps)) || joinLines(loadingLabel == null ? void 0 : loadingLabel.value) || (hintLabel == null ? void 0 : hintLabel.value);
+          return (hintSlot == null ? void 0 : hintSlot(slotProps)) || joinLines(hintLabel == null ? void 0 : hintLabel.value) || (hintLabel == null ? void 0 : hintLabel.value);
         });
         return {
-          isVisible: N,
-          hasInvalid: w,
-          hasValid: b,
-          hintContent: R
+          isVisible,
+          hasInvalid,
+          hasValid,
+          hintContent
         };
       },
       render() {
-        if (this.isVisible)
+        if (this.isVisible) {
           return h(
             "small",
             {
@@ -70,11 +130,12 @@ function Oe(t, n) {
             },
             this.hintContent
           );
+        }
       }
     }
   };
 }
-const He = {
+const VvIconProps = {
   /**
    * Color
    */
@@ -98,7 +159,7 @@ const He = {
    */
   name: {
     type: String,
-    required: !0
+    required: true
   },
   /**
    * By default 'vv'
@@ -167,102 +228,276 @@ const He = {
   modifiers: {
     type: [String, Array]
   }
-}, Re = {
+};
+var Side = /* @__PURE__ */ ((Side2) => {
+  Side2["left"] = "left";
+  Side2["right"] = "right";
+  Side2["top"] = "top";
+  Side2["bottom"] = "bottom";
+  return Side2;
+})(Side || {});
+var Placement = /* @__PURE__ */ ((Placement2) => {
+  Placement2["topStart"] = "top-start";
+  Placement2["topEnd"] = "top-end";
+  Placement2["bottomStart"] = "bottom-start";
+  Placement2["bottomEnd"] = "bottom-end";
+  Placement2["leftStart"] = "left-start";
+  Placement2["leftEnd"] = "left-end";
+  Placement2["rightStart"] = "right-start";
+  Placement2["rightEnd"] = "right-end";
+  return Placement2;
+})(Placement || {});
+var Position = /* @__PURE__ */ ((Position2) => {
+  Position2["before"] = "before";
+  Position2["after"] = "after";
+  return Position2;
+})(Position || {});
+var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
+  ButtonType2["button"] = "button";
+  ButtonType2["submit"] = "submit";
+  ButtonType2["reset"] = "reset";
+  return ButtonType2;
+})(ButtonType || {});
+var AnchorTarget = /* @__PURE__ */ ((AnchorTarget2) => {
+  AnchorTarget2["_blank"] = "_blank";
+  AnchorTarget2["_self"] = "_self";
+  AnchorTarget2["_parent"] = "_parent";
+  AnchorTarget2["_top"] = "_top";
+  return AnchorTarget2;
+})(AnchorTarget || {});
+const INJECTION_KEY_VOLVER = Symbol.for("volver");
+function useVolver() {
+  return inject(INJECTION_KEY_VOLVER);
+}
+function useModifiers(prefix, modifiers, others) {
+  return computed(() => {
+    const toReturn = {
+      [prefix]: true
+    };
+    const modifiersArray = typeof (modifiers == null ? void 0 : modifiers.value) === "string" ? modifiers.value.split(" ") : modifiers == null ? void 0 : modifiers.value;
+    if (modifiersArray) {
+      if (Array.isArray(modifiersArray)) {
+        modifiersArray.forEach((modifier) => {
+          if (modifier) {
+            toReturn[`${prefix}--${modifier}`] = true;
+          }
+        });
+      }
+    }
+    if (others) {
+      Object.keys(others.value).forEach((key) => {
+        toReturn[`${prefix}--${key}`] = unref(others.value[key]);
+      });
+    }
+    return toReturn;
+  });
+}
+const __default__$1 = {
   name: "VvIcon"
-}, A = /* @__PURE__ */ ie({
-  ...Re,
-  props: He,
-  setup(t) {
-    const n = t, e = ref(!0), l = useVolver(), { modifiers: d } = toRefs(n), v = useBemModifiers("vv-icon", d), u = computed(() => n.provider || (l == null ? void 0 : l.provider)), T = computed(() => {
-      const s = n.name ?? "", a = `@${u.value}:${n.prefix}:${n.name}`;
-      return x(s) ? s : x(a) ? a : (l == null ? void 0 : l.iconsCollections.find(
-        (S) => {
-          const c = `@${u.value}:${S.prefix}:${s}`;
-          if (x(c))
-            return c;
-        }
-      )) || s;
+};
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...__default__$1,
+  props: VvIconProps,
+  setup(__props) {
+    const props = __props;
+    const show = ref(true);
+    const volver = useVolver();
+    const { modifiers } = toRefs(props);
+    const bemCssClasses = useModifiers("vv-icon", modifiers);
+    const provider = computed(() => {
+      return props.provider || (volver == null ? void 0 : volver.iconsProvider);
     });
-    function y(s) {
-      let a = null;
-      if (typeof window > "u") {
-        const { JSDOM: w } = require("jsdom");
-        a = new w().window;
+    const icon = computed(() => {
+      const _name = props.name ?? "";
+      const iconName = `@${provider.value}:${props.prefix}:${props.name}`;
+      if (iconExists(_name)) {
+        return _name;
+      } else if (iconExists(iconName)) {
+        return iconName;
+      } else {
+        return (volver == null ? void 0 : volver.iconsCollections.find(
+          (iconsCollection) => {
+            const icon2 = `@${provider.value}:${iconsCollection.prefix}:${_name}`;
+            if (iconExists(icon2)) {
+              return icon2;
+            }
+          }
+        )) || _name;
       }
-      return (a ? new a.DOMParser() : new window.DOMParser()).parseFromString(s, "text/html").querySelector("svg");
+    });
+    function getSvgContent(svg) {
+      let dom = null;
+      if (typeof window === "undefined") {
+        const { JSDOM } = require("jsdom");
+        dom = new JSDOM().window;
+      }
+      const domParser = dom ? new dom.DOMParser() : new window.DOMParser();
+      const svgDomString = domParser.parseFromString(svg, "text/html");
+      const svgEl = svgDomString.querySelector("svg");
+      return svgEl;
     }
-    function f(s) {
-      const a = y(s), S = (a == null ? void 0 : a.innerHTML.trim()) || "";
-      a && S && Pe(`@${u.value}:${n.prefix}:${n.name}`, {
-        body: S,
-        // Set height and width from svg content
-        height: a.viewBox.baseVal.height,
-        width: a.viewBox.baseVal.width
-      });
+    function addIconFromSvg(svg) {
+      const svgContentEl = getSvgContent(svg);
+      const svgContent = (svgContentEl == null ? void 0 : svgContentEl.innerHTML.trim()) || "";
+      if (svgContentEl && svgContent) {
+        addIcon(`@${provider.value}:${props.prefix}:${props.name}`, {
+          body: svgContent,
+          // Set height and width from svg content
+          height: svgContentEl.viewBox.baseVal.height,
+          width: svgContentEl.viewBox.baseVal.width
+        });
+      }
+    }
+    if (volver) {
+      if (props.src && !iconExists(`@${provider.value}:${props.prefix}:${props.name}`)) {
+        show.value = false;
+        volver.fetchIcon(props.src).then((svg) => {
+          if (svg) {
+            addIconFromSvg(svg);
+            show.value = true;
+          }
+        }).catch((e) => {
+          throw new Error(`During fetch icon: ${e == null ? void 0 : e.message}`);
+        });
+      } else if (props.svg) {
+        addIconFromSvg(props.svg);
+      }
     }
-    return l && (n.src && !x(`@${u.value}:${n.prefix}:${n.name}`) ? (e.value = !1, l.fetchIcon(n.src).then((s) => {
-      s && (f(s), e.value = !0);
-    }).catch((s) => {
-      throw new Error(`During fetch icon: ${s == null ? void 0 : s.message}`);
-    })) : n.svg && f(n.svg)), (s, a) => i(e) ? (g(), C(i(Te), V({
-      key: 0,
-      class: i(v)
-    }, {
-      inline: s.inline,
-      width: s.width,
-      height: s.height,
-      horizontalFlip: s.horizontalFlip,
-      verticalFlip: s.verticalFlip,
-      flip: s.flip,
-      rotate: s.rotate,
-      color: s.color,
-      onLoad: s.onLoad,
-      icon: i(T)
-    }), null, 16, ["class"])) : _("", !0);
+    return (_ctx, _cache) => {
+      return unref(show) ? (openBlock(), createBlock(unref(Icon), mergeProps({
+        key: 0,
+        class: unref(bemCssClasses)
+      }, {
+        inline: _ctx.inline,
+        width: _ctx.width,
+        height: _ctx.height,
+        horizontalFlip: _ctx.horizontalFlip,
+        verticalFlip: _ctx.verticalFlip,
+        flip: _ctx.flip,
+        rotate: _ctx.rotate,
+        color: _ctx.color,
+        onLoad: _ctx.onLoad,
+        icon: unref(icon)
+      }), null, 16, ["class"])) : createCommentVNode("", true);
+    };
   }
 });
-var K = /* @__PURE__ */ ((t) => (t.left = "left", t.right = "right", t.top = "top", t.bottom = "bottom", t))(K || {}), le = /* @__PURE__ */ ((t) => (t.topStart = "top-start", t.topEnd = "top-end", t.bottomStart = "bottom-start", t.bottomEnd = "bottom-end", t.leftStart = "left-start", t.leftEnd = "left-end", t.rightStart = "right-start", t.rightEnd = "right-end", t))(le || {}), Y = /* @__PURE__ */ ((t) => (t.before = "before", t.after = "after", t))(Y || {});
-const xe = {
+const LinkProps = {
+  /**
+   * The router-link/nuxt-link property, if it is defined the button is rendered as a ruouter-link or nuxt-link.
+   * @see Documentation of [router-link](https://router.vuejs.org/api/#router-link) and [nuxt-link](https://nuxtjs.org/api/components-nuxt-link/)
+   */
+  to: {
+    type: [String, Object]
+  },
+  /**
+   * Anchor href
+   */
+  href: String,
+  /**
+   * Anchor target
+   */
+  target: {
+    type: String,
+    validator: (value) => Object.values(AnchorTarget).includes(value)
+  },
+  /**
+   * Anchor rel
+   */
+  rel: {
+    type: String,
+    default: "noopener noreferrer"
+  }
+};
+const ValidProps = {
+  /**
+   * Valid status
+   */
   valid: Boolean,
+  /**
+   * Valid label
+   */
   validLabel: [String, Array]
-}, Be = {
+};
+const InvalidProps = {
+  /**
+   * Invalid status
+   */
   invalid: Boolean,
+  /**
+   * Invalid label
+   */
   invalidLabel: [String, Array]
-}, Ve = {
+};
+const LoadingProps = {
+  /**
+   * Loading status
+   */
   loading: Boolean,
-  loadingLabel: String
-}, Ne = {
+  /**
+   * Loading label
+   */
+  loadingLabel: {
+    type: String,
+    default: "Loading..."
+  }
+};
+const DisabledProps = {
   /**
    * Whether the form control is disabled
    */
   disabled: Boolean
-}, Me = {
+};
+const ActiveProps = {
+  /**
+   * Whether the item is active
+   */
+  active: Boolean
+};
+const PressedProps = {
+  /**
+   * Whether the item is pressed
+   */
+  pressed: Boolean
+};
+const LabelProps = {
+  /**
+   * The item label
+   */
+  label: [String, Number]
+};
+const ReadonlyProps = {
   /**
    * The value is not editable
    */
   readonly: Boolean
-}, ke = {
+};
+const ModifiersProps = {
   /**
    * Component BEM modifiers
    */
   modifiers: [String, Array]
-}, $e = {
+};
+const HintProps = {
   hintLabel: { type: String, default: "" }
-}, Le = {
+};
+const CountProps = {
   /**
    * Show character limit
    */
   count: {
     type: [Boolean, String],
-    default: !1,
-    validator: (t) => [!0, !1, "limit", "countdown"].includes(t)
+    default: false,
+    validator: (value) => [true, false, "limit", "countdown"].includes(value)
   }
-}, Ue = {
+};
+const DebounceProps = {
   /**
    * Milliseconds to wait before emitting the input event
    */
   debounce: [Number, String]
-}, We = {
+};
+const IconProps = {
   /**
    * VvIcon name or props
    * @see VVIcon
@@ -273,64 +508,156 @@ const xe = {
    */
   iconPosition: {
     type: String,
-    default: Y.before,
-    validation: (t) => Object.values(Y).includes(t)
+    default: Position.before,
+    validation: (value) => Object.values(Position).includes(value)
   }
-}, Fe = {
+};
+const TabindexProps = {
   /**
    * Global attribute tabindex
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
    */
   tabindex: { type: [String, Number], default: 0 }
-}, je = {
+};
+const FloatingLabelProps = {
   /**
    * If true the label will be floating
    */
   floating: Boolean
-}, qe = {
+};
+const IdProps = {
   /**
    * Global attribute id
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
    */
   id: [String, Number]
 };
-K.bottom;
-const ze = {
-  ...qe,
+({
+  /**
+   * Dropdown placement
+   */
+  placement: {
+    type: String,
+    default: Side.bottom,
+    validator: (value) => {
+      return Object.values(Side).includes(value) || Object.values(Placement).includes(value);
+    }
+  },
+  /**
+   * Dropdown show / hide transition name
+   */
+  transitionName: {
+    type: String
+  },
+  /**
+   * Offset of the dropdown from the trigger
+   * @see https://floating-ui.com/docs/offset
+   */
+  offset: {
+    type: [Number, String, Object],
+    default: 0
+  },
+  /**
+   * Move dropdown to the side if there is no space in the default position
+   * @see https://floating-ui.com/docs/shift
+   */
+  shift: {
+    type: [Boolean, Object],
+    default: false
+  },
+  /**
+   * Flip dropdown position if there is no space in the default position
+   * @see https://floating-ui.com/docs/flip
+   */
+  flip: {
+    type: [Boolean, Object],
+    default: true
+  },
+  /**
+   * Size of the dropdown
+   * @see https://floating-ui.com/docs/size
+   */
+  size: {
+    type: [Boolean, Object],
+    default: () => ({ padding: 10 })
+  },
+  /**
+   * Automatically change the position of the dropdown
+   * @see https://floating-ui.com/docs/autoPlacement
+   */
+  autoPlacement: {
+    type: [Boolean, Object],
+    default: false
+  },
+  /**
+   * Add arrow to the dropdown
+   * @see https://floating-ui.com/docs/arrow
+   */
+  arrow: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Close dropdown on click outside
+   */
+  autoClose: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * Autofocus first item on dropdown open
+   */
+  autofocusFirst: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * Set dropdown width to the same as the trigger
+   */
+  triggerWidth: {
+    type: Boolean
+  }
+});
+const IdNameProps = {
+  ...IdProps,
   /**
    * Input / Textarea name
    * Name of the form control. Submitted with the form as part of a name/value pair
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name
    */
-  name: { type: String, required: !0 }
-}, Xe = {
+  name: { type: String, required: true }
+};
+const AutofocusProps = {
   /**
    * Global attribute autofocus
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
    */
   autofocus: Boolean
-}, Ke = {
+};
+const AutocompleteProps = {
   /**
    * Global attribute autocomplete
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
    */
   autocomplete: { type: String, default: "off" }
-}, Ye = {
-  ...ze,
-  ...Xe,
-  ...Ke,
-  ...Fe,
-  ...Ne,
-  ...Me,
-  ...xe,
-  ...Be,
-  ...$e,
-  ...Ve,
-  ...ke,
-  ...Le,
-  ...Ue,
-  ...We,
-  ...je,
+};
+const InputTextareaProps = {
+  ...IdNameProps,
+  ...AutofocusProps,
+  ...AutocompleteProps,
+  ...TabindexProps,
+  ...DisabledProps,
+  ...ReadonlyProps,
+  ...ValidProps,
+  ...InvalidProps,
+  ...HintProps,
+  ...LoadingProps,
+  ...ModifiersProps,
+  ...CountProps,
+  ...DebounceProps,
+  ...IconProps,
+  ...FloatingLabelProps,
+  ...LabelProps,
   /**
    * Input / Textarea minlength
    * Minimum length (number of characters) of value
@@ -358,12 +685,24 @@ const ze = {
    * Available for all input types except color
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#required
    */
-  required: Boolean,
+  required: Boolean
+};
+({
+  ...DisabledProps,
+  ...LabelProps,
+  ...PressedProps,
+  ...ActiveProps,
+  ...LinkProps,
   /**
-   * <label> value for the Input / Textarea
+   * Button type
    */
-  label: String
-}, o = {
+  type: {
+    type: String,
+    default: ButtonType.button,
+    validator: (value) => Object.values(ButtonType).includes(value)
+  }
+});
+const INPUT_TYPES = {
   TEXT: "text",
   PASSWORD: "password",
   NUMBER: "number",
@@ -377,15 +716,18 @@ const ze = {
   DATETIME_LOCAL: "datetime-local",
   MONTH: "month",
   WEEK: "week"
-}, E = {
+};
+const TYPES_ICON = {
   PASSWORD_SHOW: "eye-on",
   PASSWORD_HIDE: "eye-off",
   DATE: "calendar",
   TIME: "time",
   COLOR: "color",
   SEARCH: "close"
-}, Je = ["update:modelValue", "focus", "blur", "keyup"], Ge = {
-  ...Ye,
+};
+const VvInputTextEvents = ["update:modelValue", "focus", "blur", "keyup"];
+const VvInputTextProps = {
+  ...InputTextareaProps,
   /**
    * Input value
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
@@ -397,8 +739,8 @@ const ze = {
    */
   type: {
     type: String,
-    default: o.TEXT,
-    validator: (t) => Object.values(o).includes(t)
+    default: INPUT_TYPES.TEXT,
+    validator: (value) => Object.values(INPUT_TYPES).includes(value)
   },
   /**
    * Minimum value
@@ -436,7 +778,7 @@ const ze = {
    */
   iconShowPassword: {
     type: String,
-    default: E.PASSWORD_SHOW
+    default: TYPES_ICON.PASSWORD_SHOW
   },
   /**
    * VvIcon name for hide password button
@@ -444,7 +786,7 @@ const ze = {
    */
   iconHidePassword: {
     type: String,
-    default: E.PASSWORD_HIDE
+    default: TYPES_ICON.PASSWORD_HIDE
   },
   /**
    * VvIcon name for clear button
@@ -452,7 +794,7 @@ const ze = {
    */
   iconClear: {
     type: String,
-    default: E.SEARCH
+    default: TYPES_ICON.SEARCH
   },
   /**
    * Label for step up button
@@ -488,15 +830,76 @@ const ze = {
   labelClear: {
     type: String,
     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
+   */
+  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: {
+    type: Object,
+    default: void 0
+  },
+  /**
+   * Replace default tokens
+   * @see https://beholdr.github.io/maska/#/?id=custom-tokens
+   */
+  maskTokensReplace: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Adjust input width to content
+   */
+  autoWidth: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Hide type number, password and search actions
+   */
+  hideActions: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Add unit label to input
+   */
+  unit: {
+    type: String
   }
-}, se = defineComponent({
+};
+const VvInputPasswordAction = defineComponent({
   components: {
-    VvIcon: A
+    VvIcon: _sfc_main$1
   },
   props: {
     disabled: {
       type: Boolean,
-      default: !1
+      default: false
     },
     labelShow: {
       type: String,
@@ -508,31 +911,36 @@ const ze = {
     },
     iconShow: {
       type: String,
-      default: E.PASSWORD_SHOW
+      default: TYPES_ICON.PASSWORD_SHOW
     },
     iconHide: {
       type: String,
-      default: E.PASSWORD_HIDE
+      default: TYPES_ICON.PASSWORD_HIDE
     }
   },
   emits: ["toggle-password"],
-  setup(t, { emit: n }) {
-    const e = ref(!1), l = computed(
-      () => e.value ? t.iconHide : t.iconShow
+  setup(props, { emit }) {
+    const active = ref(false);
+    const activeIcon = computed(
+      () => active.value ? props.iconHide : props.iconShow
     );
-    function d(v) {
-      v == null || v.stopPropagation(), t.disabled || (e.value = !e.value, n("toggle-password", e.value));
+    function onClick(e) {
+      e == null ? void 0 : e.stopPropagation();
+      if (!props.disabled) {
+        active.value = !active.value;
+        emit("toggle-password", active.value);
+      }
     }
     return {
-      active: e,
-      activeIcon: l,
-      onClick: d
+      active,
+      activeIcon,
+      onClick
     };
   },
   render() {
-    const t = h(A, {
+    const icon = h(_sfc_main$1, {
       name: this.activeIcon,
-      class: "vv-input-text__action-icon"
+      class: "vv-input-text__icon"
     });
     return h(
       "button",
@@ -543,56 +951,63 @@ const ze = {
         type: "button",
         onClick: this.onClick
       },
-      t
+      icon
     );
   }
-}), z = defineComponent({
+});
+const VvInputStepAction = defineComponent({
   components: {
-    VvIcon: A
+    VvIcon: _sfc_main$1
   },
   props: {
     disabled: {
       type: Boolean,
-      default: !1
+      default: false
     },
     label: {
       type: String
     },
     mode: {
       type: String,
-      validator: (t) => ["up", "down"].includes(t),
+      validator: (v) => ["up", "down"].includes(v),
       default: "up"
     }
   },
   emits: ["step-up", "step-down"],
-  setup(t, { emit: n }) {
-    const e = computed(() => t.mode === "up");
-    return {
-      isUp: e,
-      onClick: (d) => {
-        d == null || d.stopPropagation(), t.disabled || n(e.value ? "step-up" : "step-down");
+  setup(props, { emit }) {
+    const isUp = computed(() => props.mode === "up");
+    const onClick = (e) => {
+      e == null ? void 0 : e.stopPropagation();
+      if (!props.disabled) {
+        emit(isUp.value ? "step-up" : "step-down");
       }
     };
+    return {
+      isUp,
+      onClick
+    };
   },
   render() {
     return h("button", {
       class: [
-        "vv-input-text__action-chevron",
+        "vv-input-text__action vv-input-text__action-chevron",
         this.isUp && "vv-input-text__action-chevron-up"
       ],
       disabled: this.disabled,
       ariaLabel: this.label,
+      type: "button",
       onClick: this.onClick
     });
   }
-}), ae = defineComponent({
+});
+const VvInputClearAction = defineComponent({
   components: {
-    VvIcon: A
+    VvIcon: _sfc_main$1
   },
   props: {
     disabled: {
       type: Boolean,
-      default: !1
+      default: false
     },
     label: {
       type: String,
@@ -604,18 +1019,21 @@ const ze = {
     }
   },
   emits: ["clear"],
-  setup(t, { emit: n }) {
-    function e(l) {
-      l == null || l.stopPropagation(), t.disabled || n("clear");
+  setup(props, { emit }) {
+    function onClick(e) {
+      e == null ? void 0 : e.stopPropagation();
+      if (!props.disabled) {
+        emit("clear");
+      }
     }
     return {
-      onClick: e
+      onClick
     };
   },
   render() {
-    const t = h(A, {
+    const icon = h(_sfc_main$1, {
       name: this.icon,
-      class: "vv-input-text__action-icon"
+      class: "vv-input-text__icon"
     });
     return h(
       "button",
@@ -626,51 +1044,54 @@ const ze = {
         type: "button",
         onClick: this.onClick
       },
-      t
+      icon
     );
   }
 });
-function X(t, n) {
+function VvInputTextActionsFactory(type, parentProps) {
   return {
     name: "VvInputTextActions",
     components: {
-      VvIcon: A,
-      VvInputPasswordAction: se,
-      VvInputStepAction: z,
-      VvInputClearAction: ae
+      VvIcon: _sfc_main$1,
+      VvInputPasswordAction,
+      VvInputStepAction,
+      VvInputClearAction
     },
     setup() {
+      const isDisabled = computed(() => {
+        return parentProps.disabled || parentProps.readonly;
+      });
       return {
-        isDisabled: computed(() => n.disabled || n.readonly),
-        labelStepUp: n.labelStepUp,
-        labelStepDown: n.labelStepDown,
-        labelShowPassword: n.labelShowPassword,
-        labelHidePassword: n.labelHidePassword,
-        labelClear: n.labelClear,
-        iconShowPassword: n.iconShowPassword,
-        iconHidePassword: n.iconHidePassword
+        isDisabled,
+        labelStepUp: parentProps.labelStepUp,
+        labelStepDown: parentProps.labelStepDown,
+        labelShowPassword: parentProps.labelShowPassword,
+        labelHidePassword: parentProps.labelHidePassword,
+        labelClear: parentProps.labelClear,
+        iconShowPassword: parentProps.iconShowPassword,
+        iconHidePassword: parentProps.iconHidePassword
       };
     },
     render() {
-      let e = null;
-      switch (t) {
-        case o.SEARCH: {
-          const { onClear: l } = this.$attrs;
-          e = [
-            h(ae, {
+      let actions = null;
+      switch (type) {
+        case INPUT_TYPES.SEARCH: {
+          const { onClear } = this.$attrs;
+          actions = [
+            h(VvInputClearAction, {
               disabled: this.isDisabled,
               label: this.labelShowPassword,
-              onClear: l
+              onClear
             })
           ];
           break;
         }
-        case o.PASSWORD: {
-          const { onTogglePassword: l } = this.$attrs;
-          e = [
-            h(se, {
+        case INPUT_TYPES.PASSWORD: {
+          const { onTogglePassword } = this.$attrs;
+          actions = [
+            h(VvInputPasswordAction, {
               disabled: this.isDisabled,
-              onTogglePassword: l,
+              onTogglePassword,
               labelShow: this.labelShowPassword,
               labelHide: this.labelHidePassword,
               iconShow: this.iconShowPassword,
@@ -679,206 +1100,463 @@ function X(t, n) {
           ];
           break;
         }
-        case o.NUMBER: {
-          const { onStepUp: l, onStepDown: d } = this.$attrs;
-          e = [
-            h(z, {
+        case INPUT_TYPES.NUMBER: {
+          const { onStepUp, onStepDown } = this.$attrs;
+          actions = [
+            h(VvInputStepAction, {
               mode: "up",
-              disabled: this.isDisabled || n.max !== void 0 && n.modelValue === n.max,
+              disabled: this.isDisabled || parentProps.max !== void 0 && parentProps.modelValue === parentProps.max,
               label: this.labelStepUp,
-              onStepUp: l,
-              onStepDown: d
+              onStepUp,
+              onStepDown
             }),
-            h(z, {
+            h(VvInputStepAction, {
               mode: "down",
-              disabled: this.isDisabled || n.min !== void 0 && n.modelValue === n.min,
+              disabled: this.isDisabled || parentProps.min !== void 0 && parentProps.modelValue === parentProps.min,
               label: this.labelStepDown,
-              onStepUp: l,
-              onStepDown: d
+              onStepUp,
+              onStepDown
             })
           ];
           break;
         }
       }
-      return Array.isArray(e) ? h("div", { class: "vv-input-text__actions-group" }, e) : e;
+      return Array.isArray(actions) ? h("div", { class: "vv-input-text__actions-group" }, actions) : actions;
+    }
+  };
+}
+const useUniqueId = (id) => computed(() => String((id == null ? void 0 : id.value) || nanoid()));
+function useDebouncedInput(modelValue, emit, ms = 0, {
+  getter = (value) => value,
+  setter = (value) => value
+} = {}) {
+  let timeout;
+  if (typeof ms === "string") {
+    ms = parseInt(ms);
+  }
+  return computed({
+    get: () => getter(modelValue == null ? void 0 : modelValue.value),
+    set: (value) => {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+      timeout = setTimeout(() => {
+        emit("update:modelValue", setter(value));
+      }, ms);
+    }
+  });
+}
+function useComponentFocus(inputTemplateRef, emit) {
+  const { focused } = useFocus(inputTemplateRef);
+  watch(focused, (newValue) => {
+    emit(newValue ? "focus" : "blur", unref(inputTemplateRef));
+  });
+  return {
+    focused
+  };
+}
+function useComponentIcon(icon, iconPosition) {
+  const hasIconBefore = computed(
+    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Position.before)
+  );
+  const hasIconAfter = computed(
+    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Position.after)
+  );
+  const hasIconLeft = computed(
+    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Side.left)
+  );
+  const hasIconRight = computed(
+    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Side.right)
+  );
+  const hasIconTop = computed(
+    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Side.top)
+  );
+  const hasIconBottom = computed(
+    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Side.bottom)
+  );
+  const hasIcon = computed(() => {
+    if (typeof (icon == null ? void 0 : icon.value) === "string") {
+      return { name: icon == null ? void 0 : icon.value };
+    }
+    return icon == null ? void 0 : icon.value;
+  });
+  return {
+    hasIcon,
+    hasIconLeft,
+    hasIconRight,
+    hasIconTop,
+    hasIconBottom,
+    hasIconBefore,
+    hasIconAfter
+  };
+}
+function useTextCount(text, options) {
+  const length = computed(() => {
+    return (unref(text) ?? "").length;
+  });
+  const gap = computed(() => {
+    if ((options == null ? void 0 : options.lowerLimit) !== void 0 && length.value < (options == null ? void 0 : options.lowerLimit)) {
+      return length.value - options.lowerLimit;
+    }
+    if ((options == null ? void 0 : options.upperLimit) !== void 0 && length.value < (options == null ? void 0 : options.upperLimit)) {
+      return options.upperLimit - length.value;
+    }
+    return 0;
+  });
+  const formatted = computed(() => {
+    if ((options == null ? void 0 : options.mode) === false) {
+      return "";
+    }
+    if ((options == null ? void 0 : options.mode) === "limit" && (options == null ? void 0 : options.upperLimit)) {
+      return `${length.value} / ${options.lowerLimit ? `${options.lowerLimit}-` : ""}${options.upperLimit}`;
+    }
+    if ((options == null ? void 0 : options.mode) === "countdown") {
+      if (gap.value === 0) {
+        return void 0;
+      }
+      return gap;
     }
+    return length.value;
+  });
+  return {
+    length,
+    gap,
+    formatted
   };
 }
-const Qe = ["for"], Ze = { class: "vv-input-text__wrapper" }, et = {
+const _hoisted_1 = ["for"];
+const _hoisted_2 = { class: "vv-input-text__wrapper" };
+const _hoisted_3 = {
   key: 0,
   class: "vv-input-text__input-before"
-}, tt = { class: "vv-input-text__inner" }, ot = ["id"], nt = {
+};
+const _hoisted_4 = ["onClick"];
+const _hoisted_5 = ["id"];
+const _hoisted_6 = {
   key: 1,
+  class: "vv-input-text__unit"
+};
+const _hoisted_7 = {
+  key: 5,
   class: "vv-input-text__input-after"
-}, st = {
-  key: 2,
+};
+const _hoisted_8 = {
+  key: 6,
   class: "vv-input-text__limit"
-}, at = {
+};
+const __default__ = {
   name: "VvInputText"
-}, rt = /* @__PURE__ */ ie({
-  ...at,
-  props: Ge,
-  emits: Je,
-  setup(t, { emit: n }) {
-    const e = t, l = useSlots(), d = ref(), {
-      id: v,
-      icon: u,
-      iconPosition: T,
-      label: y,
-      modelValue: f,
-      count: s,
-      valid: a,
-      invalid: S,
-      loading: c
-    } = toRefs(e), m = useUniqueId(v), w = computed(() => `${m.value}-hint`), H = computed(
-      () => e.floating && isEmpty(e.placeholder) ? " " : e.placeholder
-    ), b = useDebouncedInput(f, n, e.debounce), { focused: D } = useComponentFocus(d, n), N = useElementVisibility(d);
-    watch(N, (r) => {
-      r && e.autofocus && (D.value = !0);
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: VvInputTextProps,
+  emits: VvInputTextEvents,
+  setup(__props, { expose, emit }) {
+    const props = __props;
+    const slots = useSlots();
+    const inputEl = ref();
+    const innerEl = ref();
+    expose({ $inner: innerEl });
+    const {
+      id,
+      icon,
+      iconPosition,
+      label,
+      modelValue,
+      count,
+      valid,
+      invalid,
+      loading
+    } = toRefs(props);
+    const hasId = useUniqueId(id);
+    const hasDescribedBy = computed(() => `${hasId.value}-hint`);
+    const inputTextPlaceholder = computed(
+      () => props.floating && isEmpty(props.placeholder) ? " " : props.placeholder
+    );
+    const localModelValue = useDebouncedInput(
+      modelValue,
+      emit,
+      props.debounce,
+      {
+        getter: (value) => {
+          if (mask.value) {
+            return mask.value.masked(value ?? "");
+          }
+          return value;
+        },
+        setter: (value) => {
+          if (mask.value) {
+            value = mask.value.unmasked(value);
+          }
+          if (props.type === INPUT_TYPES.NUMBER) {
+            return Number(value);
+          }
+          return value;
+        }
+      }
+    );
+    const { focused } = useComponentFocus(inputEl, emit);
+    const isFocused = computed(
+      () => focused.value && !props.disabled && !props.readonly
+    );
+    const isVisible = useElementVisibility(inputEl);
+    watch(isVisible, (newValue) => {
+      if (newValue && props.autofocus && !props.disabled && !props.readonly) {
+        focused.value = true;
+      }
     });
-    const P = ref(!1), R = computed(() => e.type === o.PASSWORD), I = () => {
-      P.value = !P.value;
-    }, re = computed(
-      () => e.type === o.TIME || e.type === o.DATETIME_LOCAL || e.type === o.DATE || e.type === o.WEEK || e.type === o.MONTH
-    ), ue = computed(() => e.type === o.NUMBER), J = () => {
-      $.value && (d.value.stepUp(), b.value = unref(d).value);
-    }, G = () => {
-      $.value && (d.value.stepDown(), b.value = unref(d).value);
-    }, de = computed(() => e.type === o.SEARCH), Q = () => {
-      b.value = void 0;
-    }, { hasIcon: Z, hasIconBefore: ee, hasIconAfter: M } = useComponentIcon(
-      u,
-      T
-    ), k = computed(() => {
-      switch (e.type) {
-        case o.COLOR:
-          return { name: E.COLOR };
-        case o.DATE:
-        case o.DATETIME_LOCAL:
-        case o.WEEK:
-        case o.MONTH:
-          return { name: E.DATE };
-        case o.TIME:
-          return { name: E.TIME };
+    const showPassword = ref(false);
+    const isPassword = computed(() => props.type === INPUT_TYPES.PASSWORD);
+    const onTogglePassword = () => {
+      showPassword.value = !showPassword.value;
+    };
+    const isDateTime = computed(
+      () => props.type === INPUT_TYPES.TIME || props.type === INPUT_TYPES.DATETIME_LOCAL || props.type === INPUT_TYPES.DATE || props.type === INPUT_TYPES.WEEK || props.type === INPUT_TYPES.MONTH
+    );
+    const isNumber = computed(() => props.type === INPUT_TYPES.NUMBER);
+    const onStepUp = () => {
+      if (isClickable.value) {
+        inputEl.value.stepUp();
+        localModelValue.value = unref(inputEl).value;
+      }
+    };
+    const onStepDown = () => {
+      if (isClickable.value) {
+        inputEl.value.stepDown();
+        localModelValue.value = unref(inputEl).value;
+      }
+    };
+    const isSearch = computed(() => props.type === INPUT_TYPES.SEARCH);
+    const onClear = () => {
+      localModelValue.value = void 0;
+    };
+    const { hasIcon, hasIconBefore, hasIconAfter } = useComponentIcon(
+      icon,
+      iconPosition
+    );
+    const defaultAfterIcon = computed(() => {
+      switch (props.type) {
+        case INPUT_TYPES.COLOR:
+          return { name: TYPES_ICON.COLOR };
+        case INPUT_TYPES.DATE:
+        case INPUT_TYPES.DATETIME_LOCAL:
+        case INPUT_TYPES.WEEK:
+        case INPUT_TYPES.MONTH:
+          return { name: TYPES_ICON.DATE };
+        case INPUT_TYPES.TIME:
+          return { name: TYPES_ICON.TIME };
         default:
           return "";
       }
-    }), { formatted: ce } = useTextCount(b, {
-      mode: e.count,
-      upperLimit: e.maxlength,
-      lowerLimit: e.minlength
-    }), $ = computed(() => !e.disabled && !e.readonly), pe = computed(
-      () => $.value ? e.tabindex : -1
-    ), te = computed(() => !isEmpty(f)), ve = computed(() => {
-      if (S.value === !0)
-        return !0;
-      if (a.value === !0)
-        return !1;
-    }), { modifiers: fe } = toRefs(e), me = useBemModifiers(
+    });
+    const { formatted: countFormatted } = useTextCount(localModelValue, {
+      mode: props.count,
+      upperLimit: props.maxlength,
+      lowerLimit: props.minlength
+    });
+    const isClickable = computed(() => !props.disabled && !props.readonly);
+    const hasTabindex = computed(
+      () => isClickable.value ? props.tabindex : -1
+    );
+    const isDirty = computed(() => !isEmpty(modelValue));
+    const isInvalid = computed(() => {
+      if (invalid.value === true) {
+        return true;
+      }
+      if (valid.value === true) {
+        return false;
+      }
+      return void 0;
+    });
+    const { modifiers } = toRefs(props);
+    const bemCssClasses = useModifiers(
       "vv-input-text",
-      fe,
+      modifiers,
       computed(() => ({
-        valid: a.value,
-        invalid: S.value,
-        loading: c.value,
-        disabled: e.disabled,
-        readonly: e.readonly,
-        "icon-before": ee.value,
-        "icon-after": M.value || !isEmpty(k),
-        floating: e.floating && !isEmpty(e.label),
-        dirty: te.value,
-        focus: D.value
+        valid: valid.value,
+        invalid: invalid.value,
+        loading: loading.value,
+        disabled: props.disabled,
+        readonly: props.readonly,
+        "icon-before": hasIconBefore.value,
+        "icon-after": hasIconAfter.value || !isEmpty(defaultAfterIcon),
+        floating: props.floating && !isEmpty(props.label),
+        dirty: isDirty.value,
+        focus: isFocused.value,
+        "auto-width": props.autoWidth
       }))
-    ), he = computed(() => {
-      const r = (() => R.value && P.value || re.value && !te.value && !D.value ? o.TEXT : e.type)(), p = {
-        type: r,
-        name: e.name,
-        tabindex: pe.value,
-        disabled: e.disabled,
-        readonly: e.readonly,
-        required: e.required,
-        autocomplete: e.autocomplete,
-        "aria-invalid": ve.value,
-        "aria-describedby": !oe.value && be.value ? w.value : void 0,
-        "aria-errormessage": oe.value ? w.value : void 0
+    );
+    const hasAttrs = computed(() => {
+      const type = (() => {
+        if (isPassword.value && showPassword.value) {
+          return INPUT_TYPES.TEXT;
+        }
+        if (isDateTime.value && !isDirty.value && !focused.value) {
+          return INPUT_TYPES.TEXT;
+        }
+        return props.type;
+      })();
+      const toReturn = {
+        type,
+        name: props.name,
+        tabindex: hasTabindex.value,
+        disabled: props.disabled,
+        readonly: props.readonly,
+        required: props.required,
+        autocomplete: props.autocomplete,
+        "aria-invalid": isInvalid.value,
+        "aria-describedby": !hasInvalid.value && hasHint.value ? hasDescribedBy.value : void 0,
+        "aria-errormessage": hasInvalid.value ? hasDescribedBy.value : void 0
       };
-      return (r === o.DATE || r === o.MONTH || r === o.WEEK || r === o.TIME || r === o.DATETIME_LOCAL || r === o.NUMBER) && (p.step = e.step, p.max = String(e.max), p.min = String(e.min)), (r === o.TEXT || r === o.SEARCH || r === o.URL || r === o.TEL || r === o.EMAIL || r === o.PASSWORD || r === o.NUMBER) && (p.placeholder = H.value), (r === o.TEXT || r === o.SEARCH || r === o.URL || r === o.TEL || r === o.EMAIL || r === o.PASSWORD) && (p.minlength = e.minlength, p.maxlength = e.maxlength, p.pattern = e.pattern), r === o.EMAIL && (p.multiple = e.multiple), p;
-    }), L = computed(() => ({
-      valid: e.valid,
-      invalid: e.invalid,
-      modelValue: e.modelValue,
-      togglePassword: I,
-      stepUp: J,
-      stepDown: G,
-      clear: Q
-    })), { HintSlot: Se, hasHint: be, hasInvalid: oe } = Oe(e, l), ge = X(
-      o.PASSWORD,
-      e
-    ), ye = X(
-      o.NUMBER,
-      e
-    ), we = X(
-      o.SEARCH,
-      e
+      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) {
+        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) {
+        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) {
+        toReturn.minlength = props.minlength;
+        toReturn.maxlength = props.maxlength;
+        toReturn.pattern = props.pattern;
+      }
+      if (type === INPUT_TYPES.EMAIL) {
+        toReturn.multiple = props.multiple;
+      }
+      return toReturn;
+    });
+    const slotProps = computed(() => ({
+      valid: props.valid,
+      invalid: props.invalid,
+      modelValue: props.modelValue,
+      togglePassword: onTogglePassword,
+      stepUp: onStepUp,
+      stepDown: onStepDown,
+      clear: onClear
+    }));
+    const { HintSlot, hasHint, hasInvalid } = HintSlotFactory(props, slots);
+    const PasswordInputActions = VvInputTextActionsFactory(
+      INPUT_TYPES.PASSWORD,
+      props
     );
-    return (r, p) => (g(), O("div", {
-      class: Ee(i(me))
-    }, [
-      i(y) ? (g(), O("label", {
-        key: 0,
-        for: i(m),
-        class: "vv-input-text__label"
-      }, ne(i(y)), 9, Qe)) : _("", !0),
-      W("div", Ze, [
-        r.$slots.before ? (g(), O("div", et, [
-          F(r.$slots, "before", j(q(i(L))))
-        ])) : _("", !0),
-        W("div", tt, [
-          i(ee) ? (g(), C(A, V({
-            key: 0,
-            class: "vv-input-text__icon"
-          }, i(Z)), null, 16)) : _("", !0),
-          Ae(W("input", V({
-            id: i(m),
-            ref_key: "input",
-            ref: d,
-            "onUpdate:modelValue": p[0] || (p[0] = (U) => Ie(b) ? b.value = U : null)
-          }, i(he), {
-            onKeyup: p[1] || (p[1] = (U) => n("keyup", U))
-          }), null, 16, ot), [
-            [_e, i(b)]
-          ]),
-          i(M) || i(k) ? (g(), C(A, V({
+    const NumberInputActions = VvInputTextActionsFactory(
+      INPUT_TYPES.NUMBER,
+      props
+    );
+    const SearchInputActions = VvInputTextActionsFactory(
+      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;
+      }
+    };
+    const hasStyle = computed(() => {
+      if (!props.autoWidth) {
+        return void 0;
+      }
+      return {
+        width: localModelValue.value !== void 0 ? `${String(localModelValue.value).length + 1}ch` : void 0
+      };
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(unref(bemCssClasses))
+      }, [
+        unref(label) ? (openBlock(), createElementBlock("label", {
+          key: 0,
+          for: unref(hasId),
+          class: "vv-input-text__label"
+        }, toDisplayString(unref(label)), 9, _hoisted_1)) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_2, [
+          _ctx.$slots.before ? (openBlock(), createElementBlock("div", _hoisted_3, [
+            renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
+          ])) : createCommentVNode("", true),
+          createElementVNode("div", {
+            ref_key: "innerEl",
+            ref: innerEl,
+            class: "vv-input-text__inner",
+            onClick: withModifiers(onClickInner, ["stop"])
+          }, [
+            unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$1, mergeProps({
+              key: 0,
+              class: "vv-input-text__icon"
+            }, unref(hasIcon)), null, 16)) : createCommentVNode("", true),
+            withDirectives(createElementVNode("input", mergeProps({
+              id: unref(hasId),
+              ref_key: "inputEl",
+              ref: inputEl,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(localModelValue) ? localModelValue.value = $event : null)
+            }, unref(hasAttrs), {
+              style: unref(hasStyle),
+              onKeyup: _cache[1] || (_cache[1] = ($event) => emit("keyup", $event))
+            }), null, 16, _hoisted_5), [
+              [vModelDynamic, unref(localModelValue)]
+            ]),
+            (_ctx.unit || _ctx.$slots.unit) && unref(isDirty) ? (openBlock(), createElementBlock("div", _hoisted_6, [
+              renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(slotProps))), () => [
+                createTextVNode(toDisplayString(_ctx.unit), 1)
+              ])
+            ])) : createCommentVNode("", true)
+          ], 8, _hoisted_4),
+          unref(hasIconAfter) || unref(defaultAfterIcon) ? (openBlock(), createBlock(_sfc_main$1, mergeProps({
             key: 1,
             class: "vv-input-text__icon vv-input-text__icon-after"
-          }, i(M) ? i(Z) : i(k)), null, 16)) : i(R) ? (g(), C(i(ge), {
+          }, unref(hasIconAfter) ? unref(hasIcon) : unref(defaultAfterIcon)), null, 16)) : unref(isPassword) && !_ctx.hideActions && unref(isClickable) ? (openBlock(), createBlock(unref(PasswordInputActions), {
             key: 2,
-            onTogglePassword: I
-          })) : i(ue) ? (g(), C(i(ye), {
+            onTogglePassword
+          })) : unref(isNumber) && !_ctx.hideActions && unref(isClickable) ? (openBlock(), createBlock(unref(NumberInputActions), {
             key: 3,
-            onStepUp: J,
-            onStepDown: G
-          })) : i(de) ? (g(), C(i(we), {
+            onStepUp,
+            onStepDown
+          })) : unref(isSearch) && !_ctx.hideActions && unref(isClickable) ? (openBlock(), createBlock(unref(SearchInputActions), {
             key: 4,
-            onClear: Q
-          })) : _("", !0)
+            onClear
+          })) : createCommentVNode("", true),
+          _ctx.$slots.after ? (openBlock(), createElementBlock("div", _hoisted_7, [
+            renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps(unref(slotProps))))
+          ])) : createCommentVNode("", true),
+          unref(count) ? (openBlock(), createElementBlock("span", _hoisted_8, [
+            renderSlot(_ctx.$slots, "count", normalizeProps(guardReactiveProps(unref(slotProps))), () => [
+              createTextVNode(toDisplayString(unref(countFormatted)), 1)
+            ])
+          ])) : createCommentVNode("", true)
         ]),
-        r.$slots.after ? (g(), O("div", nt, [
-          F(r.$slots, "after", j(q(i(L))))
-        ])) : _("", !0),
-        i(s) ? (g(), O("span", st, [
-          F(r.$slots, "count", j(q(i(L))), () => [
-            De(ne(i(ce)), 1)
-          ])
-        ])) : _("", !0)
-      ]),
-      Ce(i(Se), {
-        id: i(w),
-        class: "vv-input-text__hint"
-      }, null, 8, ["id"])
-    ], 2));
+        createVNode(unref(HintSlot), {
+          id: unref(hasDescribedBy),
+          class: "vv-input-text__hint"
+        }, null, 8, ["id"])
+      ], 2);
+    };
   }
 });
 export {
-  rt as default
+  _sfc_main as default
 };