@volverjs/ui-vue 0.0.4 → 0.0.5-beta.2

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

@@ -1,61 +1,89 @@
-import { unref as s, toRefs as U, computed as l, h as y, inject as Re, defineComponent as L, ref as j, openBlock as g, createBlock as P, mergeProps as $, createCommentVNode as O, watch as ve, useSlots as xe, createElementBlock as H, normalizeClass as Le, toDisplayString as ue, createElementVNode as Y, renderSlot as J, normalizeProps as G, guardReactiveProps as Q, withDirectives as Ne, isRef as Ve, vModelDynamic as ke, createTextVNode as Me, createVNode as $e } from "vue";
-import { toReactive as Ue, useFocus as je, useElementVisibility as We } from "@vueuse/core";
-import { iconExists as k, Icon as Fe, addIcon as qe } from "@iconify/vue";
-import { nanoid as ze } from "nanoid";
-function ce(e, t) {
-  if (e && Object.keys(e).length && t) {
-    if (t.indexOf(".") === -1)
-      return e[t];
-    {
-      const n = t.split(".");
-      let a = e;
-      for (let o = 0, p = n.length; o < p; ++o) {
-        if (e == null)
+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;
-        a = a[n[o]];
+        }
+        value = value[fields[i]];
       }
-      return a;
+      return value;
     }
-  } else
+  } else {
     return null;
+  }
 }
-function R(e) {
-  return ((t) => t == null || t === "" || Array.isArray(t) && t.length === 0 || !(t instanceof Date) && typeof t == "object" && Object.keys(t).length === 0)(s(e));
+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 Ke(e) {
-  return typeof e == "string" || e instanceof String;
+function isString(value) {
+  return typeof value === "string" || value instanceof String;
 }
-function M(e) {
-  return Array.isArray(e) ? e.filter((t) => Ke(t)).join(" ") : e;
+function joinLines(errors) {
+  if (Array.isArray(errors)) {
+    return errors.filter((e) => isString(e)).join(" ");
+  }
+  return errors;
 }
-function Xe(e, t) {
+function HintSlotFactory(parentProps, parentSlots) {
+  const {
+    invalid: invalidSlot,
+    valid: validSlot,
+    hint: hintSlot,
+    loading: loadingSlot
+  } = parentSlots;
   const {
-    invalid: n,
-    valid: a,
-    hint: o,
-    loading: p
-  } = t, {
-    hintLabel: d,
-    modelValue: A,
-    valid: w,
-    validLabel: m,
-    invalid: i,
-    invalidLabel: u,
-    ...S
-  } = U(e), v = ce(S, "loading"), b = ce(S, "loadingLabel"), E = l(() => i.value ? !!(i.value && n || u != null && u.value && Array.isArray(u.value) && u.value.length > 0 || u != null && u.value && !R(u)) : !1), N = l(
-    () => !!(d && d.value || o)
-  ), h = l(
-    () => !!(m && m.value || a)
-  ), C = l(
-    () => !!(v != null && v.value && p || v != null && v.value && (b != null && b.value))
-  ), W = l(
-    () => N.value || h.value || E.value || C.value
+    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: E,
-    hasHint: N,
-    hasValid: h,
-    hasLoading: C,
+    hasInvalid,
+    hasHint,
+    hasValid,
+    hasLoading,
     HintSlot: {
       name: "HintSlot",
       props: {
@@ -64,42 +92,50 @@ function Xe(e, t) {
           default: () => ({})
         }
       },
-      setup(B) {
-        const V = l(() => {
-          const D = Ue({
-            hintLabel: d,
-            modelValue: A,
-            valid: w,
-            validLabel: m,
-            invalid: i,
-            invalidLabel: u,
-            loading: v,
-            loadingLabel: b,
-            ...B.params
+      setup(props) {
+        const hintContent = computed(() => {
+          const slotProps = toReactive({
+            hintLabel,
+            modelValue,
+            valid,
+            validLabel,
+            invalid,
+            invalidLabel,
+            loading,
+            loadingLabel,
+            ...props.params
           });
-          return i != null && i.value ? (n == null ? void 0 : n(D)) || M(u == null ? void 0 : u.value) || (d == null ? void 0 : d.value) : w != null && w.value ? (a == null ? void 0 : a(D)) || M(m == null ? void 0 : m.value) || (d == null ? void 0 : d.value) : v != null && v.value ? (p == null ? void 0 : p(D)) || M(b == null ? void 0 : b.value) || (d == null ? void 0 : d.value) : (o == null ? void 0 : o(D)) || M(d == null ? void 0 : d.value) || (d == null ? void 0 : d.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: W,
-          hasInvalid: E,
-          hasValid: h,
-          hintContent: V
+          isVisible,
+          hasInvalid,
+          hasValid,
+          hintContent
         };
       },
       render() {
-        if (this.isVisible)
-          return y(
+        if (this.isVisible) {
+          return h(
             "small",
             {
               role: this.hasInvalid ? "alert" : this.hasValid ? "status" : void 0
             },
             this.hintContent
           );
+        }
       }
     }
   };
 }
-const Ye = {
+const VvIconProps = {
   /**
    * Color
    */
@@ -123,7 +159,7 @@ const Ye = {
    */
   name: {
     type: String,
-    required: !0
+    required: true
   },
   /**
    * By default 'vv'
@@ -193,77 +229,160 @@ const Ye = {
     type: [String, Array]
   }
 };
-var T = /* @__PURE__ */ ((e) => (e.left = "left", e.right = "right", e.top = "top", e.bottom = "bottom", e))(T || {}), fe = /* @__PURE__ */ ((e) => (e.topStart = "top-start", e.topEnd = "top-end", e.bottomStart = "bottom-start", e.bottomEnd = "bottom-end", e.leftStart = "left-start", e.leftEnd = "left-end", e.rightStart = "right-start", e.rightEnd = "right-end", e))(fe || {}), x = /* @__PURE__ */ ((e) => (e.before = "before", e.after = "after", e))(x || {}), te = /* @__PURE__ */ ((e) => (e.button = "button", e.submit = "submit", e.reset = "reset", e))(te || {}), me = /* @__PURE__ */ ((e) => (e._blank = "_blank", e._self = "_self", e._parent = "_parent", e._top = "_top", e))(me || {});
-const Je = Symbol.for("volver");
-function Ge() {
-  return Re(Je);
+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 be(e, t, n) {
-  return l(() => {
-    const a = {
-      [e]: !0
-    }, o = typeof (t == null ? void 0 : t.value) == "string" ? t.value.split(" ") : t == null ? void 0 : t.value;
-    return o && Array.isArray(o) && o.forEach((p) => {
-      a[`${e}--${p}`] = !0;
-    }), n && Object.keys(n.value).forEach((p) => {
-      a[`${e}--${p}`] = s(n.value[p]);
-    }), a;
+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 Qe = {
+const __default__$1 = {
   name: "VvIcon"
-}, _ = /* @__PURE__ */ L({
-  ...Qe,
-  props: Ye,
-  setup(e) {
-    const t = e, n = j(!0), a = Ge(), { modifiers: o } = U(t), p = be("vv-icon", o), d = l(() => t.provider || (a == null ? void 0 : a.provider)), A = l(() => {
-      const i = t.name ?? "", u = `@${d.value}:${t.prefix}:${t.name}`;
-      return k(i) ? i : k(u) ? u : (a == null ? void 0 : a.iconsCollections.find(
-        (S) => {
-          const v = `@${d.value}:${S.prefix}:${i}`;
-          if (k(v))
-            return v;
-        }
-      )) || i;
+};
+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);
+    });
+    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;
+      }
     });
-    function w(i) {
-      let u = null;
-      if (typeof window > "u") {
-        const { JSDOM: E } = require("jsdom");
-        u = new E().window;
+    function getSvgContent(svg) {
+      let dom = null;
+      if (typeof window === "undefined") {
+        const { JSDOM } = require("jsdom");
+        dom = new JSDOM().window;
       }
-      return (u ? new u.DOMParser() : new window.DOMParser()).parseFromString(i, "text/html").querySelector("svg");
+      const domParser = dom ? new dom.DOMParser() : new window.DOMParser();
+      const svgDomString = domParser.parseFromString(svg, "text/html");
+      const svgEl = svgDomString.querySelector("svg");
+      return svgEl;
     }
-    function m(i) {
-      const u = w(i), S = (u == null ? void 0 : u.innerHTML.trim()) || "";
-      u && S && qe(`@${d.value}:${t.prefix}:${t.name}`, {
-        body: S,
-        // Set height and width from svg content
-        height: u.viewBox.baseVal.height,
-        width: u.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
+        });
+      }
     }
-    return a && (t.src && !k(`@${d.value}:${t.prefix}:${t.name}`) ? (n.value = !1, a.fetchIcon(t.src).then((i) => {
-      i && (m(i), n.value = !0);
-    }).catch((i) => {
-      throw new Error(`During fetch icon: ${i == null ? void 0 : i.message}`);
-    })) : t.svg && m(t.svg)), (i, u) => s(n) ? (g(), P(s(Fe), $({
-      key: 0,
-      class: s(p)
-    }, {
-      inline: i.inline,
-      width: i.width,
-      height: i.height,
-      horizontalFlip: i.horizontalFlip,
-      verticalFlip: i.verticalFlip,
-      flip: i.flip,
-      rotate: i.rotate,
-      color: i.color,
-      onLoad: i.onLoad,
-      icon: s(A)
-    }), null, 16, ["class"])) : O("", !0);
+    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 (_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);
+    };
   }
-}), Ze = {
+});
+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/)
@@ -280,7 +399,7 @@ const Qe = {
    */
   target: {
     type: String,
-    validator: (e) => Object.values(me).includes(e)
+    validator: (value) => Object.values(AnchorTarget).includes(value)
   },
   /**
    * Anchor rel
@@ -289,7 +408,8 @@ const Qe = {
     type: String,
     default: "noopener noreferrer"
   }
-}, et = {
+};
+const ValidProps = {
   /**
    * Valid status
    */
@@ -298,7 +418,8 @@ const Qe = {
    * Valid label
    */
   validLabel: [String, Array]
-}, tt = {
+};
+const InvalidProps = {
   /**
    * Invalid status
    */
@@ -307,7 +428,8 @@ const Qe = {
    * Invalid label
    */
   invalidLabel: [String, Array]
-}, nt = {
+};
+const LoadingProps = {
   /**
    * Loading status
    */
@@ -319,53 +441,63 @@ const Qe = {
     type: String,
     default: "Loading..."
   }
-}, Se = {
+};
+const DisabledProps = {
   /**
    * Whether the form control is disabled
    */
   disabled: Boolean
-}, at = {
+};
+const ActiveProps = {
   /**
    * Whether the item is active
    */
   active: Boolean
-}, rt = {
+};
+const PressedProps = {
   /**
    * Whether the item is pressed
    */
   pressed: Boolean
-}, he = {
+};
+const LabelProps = {
   /**
    * The item label
    */
   label: [String, Number]
-}, lt = {
+};
+const ReadonlyProps = {
   /**
    * The value is not editable
    */
   readonly: Boolean
-}, ot = {
+};
+const ModifiersProps = {
   /**
    * Component BEM modifiers
    */
   modifiers: [String, Array]
-}, st = {
+};
+const HintProps = {
   hintLabel: { type: String, default: "" }
-}, it = {
+};
+const CountProps = {
   /**
    * Show character limit
    */
   count: {
     type: [Boolean, String],
-    default: !1,
-    validator: (e) => [!0, !1, "limit", "countdown"].includes(e)
+    default: false,
+    validator: (value) => [true, false, "limit", "countdown"].includes(value)
   }
-}, ut = {
+};
+const DebounceProps = {
   /**
    * Milliseconds to wait before emitting the input event
    */
   debounce: [Number, String]
-}, ct = {
+};
+const IconProps = {
   /**
    * VvIcon name or props
    * @see VVIcon
@@ -376,79 +508,180 @@ const Qe = {
    */
   iconPosition: {
     type: String,
-    default: x.before,
-    validation: (e) => Object.values(x).includes(e)
+    default: Position.before,
+    validation: (value) => Object.values(Position).includes(value)
   }
-}, dt = {
+};
+const TabindexProps = {
   /**
    * Global attribute tabindex
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
    */
   tabindex: { type: [String, Number], default: 0 }
-}, pt = {
+};
+const FloatingLabelProps = {
   /**
    * If true the label will be floating
    */
   floating: Boolean
-}, vt = {
+};
+const IdProps = {
   /**
    * Global attribute id
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
    */
   id: [String, Number]
 };
-T.bottom;
-const ft = {
-  ...vt,
+({
+  /**
+   * Dropdown placement
+   */
+  placement: {
+    type: String,
+    default: Side.bottom,
+    validator: (value) => {
+      return Object.values(Side).includes(value) || Object.values(Placement).includes(value);
+    }
+  },
+  /**
+   * Dropdown strategy
+   */
+  strategy: {
+    type: String,
+    default: "absolute",
+    validator: (value) => {
+      return ["fixed", "absolute"].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 }
-}, mt = {
+  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
-}, bt = {
+};
+const AutocompleteProps = {
   /**
    * Global attribute autocomplete
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
    */
   autocomplete: { type: String, default: "off" }
-}, St = {
-  ...ft,
-  ...mt,
-  ...bt,
-  ...dt,
-  ...Se,
-  ...lt,
-  ...et,
-  ...tt,
-  ...st,
-  ...nt,
-  ...ot,
-  ...it,
-  ...ut,
-  ...ct,
-  ...pt,
-  ...he,
+};
+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
    * Available for input types: text, search, url, tel, email, password
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength
    */
-  minlength: Number,
+  minlength: [String, Number],
   /**
    * Input / Textarea maxlength
    * Maximum length (number of characters) of value
    * Available for input types: text, search, url, tel, email, password
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength
    */
-  maxlength: Number,
+  maxlength: [String, Number],
   /**
    * Input / Textarea placeholder
    * Text that appears in the form control when it has no value set
@@ -465,17 +698,21 @@ const ft = {
   required: Boolean
 };
 ({
-  ...Se,
-  ...he,
-  ...rt,
-  ...at,
-  ...Ze,
+  ...DisabledProps,
+  ...LabelProps,
+  ...PressedProps,
+  ...ActiveProps,
+  ...LinkProps,
   /**
    * Button type
    */
-  type: te.button
+  type: {
+    type: String,
+    default: ButtonType.button,
+    validator: (value) => Object.values(ButtonType).includes(value)
+  }
 });
-const r = {
+const INPUT_TYPES = {
   TEXT: "text",
   PASSWORD: "password",
   NUMBER: "number",
@@ -489,15 +726,18 @@ const r = {
   DATETIME_LOCAL: "datetime-local",
   MONTH: "month",
   WEEK: "week"
-}, I = {
+};
+const TYPES_ICON = {
   PASSWORD_SHOW: "eye-on",
   PASSWORD_HIDE: "eye-off",
   DATE: "calendar",
   TIME: "time",
   COLOR: "color",
   SEARCH: "close"
-}, ht = ["update:modelValue", "focus", "blur", "keyup"], gt = {
-  ...St,
+};
+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
@@ -509,8 +749,8 @@ const r = {
    */
   type: {
     type: String,
-    default: r.TEXT,
-    validator: (e) => Object.values(r).includes(e)
+    default: INPUT_TYPES.TEXT,
+    validator: (value) => Object.values(INPUT_TYPES).includes(value)
   },
   /**
    * Minimum value
@@ -548,7 +788,7 @@ const r = {
    */
   iconShowPassword: {
     type: String,
-    default: I.PASSWORD_SHOW
+    default: TYPES_ICON.PASSWORD_SHOW
   },
   /**
    * VvIcon name for hide password button
@@ -556,7 +796,7 @@ const r = {
    */
   iconHidePassword: {
     type: String,
-    default: I.PASSWORD_HIDE
+    default: TYPES_ICON.PASSWORD_HIDE
   },
   /**
    * VvIcon name for clear button
@@ -564,7 +804,7 @@ const r = {
    */
   iconClear: {
     type: String,
-    default: I.SEARCH
+    default: TYPES_ICON.SEARCH
   },
   /**
    * Label for step up button
@@ -600,15 +840,76 @@ const r = {
   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
   }
-}, de = L({
+};
+const VvInputPasswordAction = defineComponent({
   components: {
-    VvIcon: _
+    VvIcon: _sfc_main$1
   },
   props: {
     disabled: {
       type: Boolean,
-      default: !1
+      default: false
     },
     labelShow: {
       type: String,
@@ -620,33 +921,38 @@ const r = {
     },
     iconShow: {
       type: String,
-      default: I.PASSWORD_SHOW
+      default: TYPES_ICON.PASSWORD_SHOW
     },
     iconHide: {
       type: String,
-      default: I.PASSWORD_HIDE
+      default: TYPES_ICON.PASSWORD_HIDE
     }
   },
   emits: ["toggle-password"],
-  setup(e, { emit: t }) {
-    const n = j(!1), a = l(
-      () => n.value ? e.iconHide : e.iconShow
+  setup(props, { emit }) {
+    const active = ref(false);
+    const activeIcon = computed(
+      () => active.value ? props.iconHide : props.iconShow
     );
-    function o(p) {
-      p == null || p.stopPropagation(), e.disabled || (n.value = !n.value, t("toggle-password", n.value));
+    function onClick(e) {
+      e == null ? void 0 : e.stopPropagation();
+      if (!props.disabled) {
+        active.value = !active.value;
+        emit("toggle-password", active.value);
+      }
     }
     return {
-      active: n,
-      activeIcon: a,
-      onClick: o
+      active,
+      activeIcon,
+      onClick
     };
   },
   render() {
-    const e = y(_, {
+    const icon = h(_sfc_main$1, {
       name: this.activeIcon,
-      class: "vv-input-text__action-icon"
+      class: "vv-input-text__icon"
     });
-    return y(
+    return h(
       "button",
       {
         disabled: this.disabled,
@@ -655,56 +961,63 @@ const r = {
         type: "button",
         onClick: this.onClick
       },
-      e
+      icon
     );
   }
-}), Z = L({
+});
+const VvInputStepAction = defineComponent({
   components: {
-    VvIcon: _
+    VvIcon: _sfc_main$1
   },
   props: {
     disabled: {
       type: Boolean,
-      default: !1
+      default: false
     },
     label: {
       type: String
     },
     mode: {
       type: String,
-      validator: (e) => ["up", "down"].includes(e),
+      validator: (v) => ["up", "down"].includes(v),
       default: "up"
     }
   },
   emits: ["step-up", "step-down"],
-  setup(e, { emit: t }) {
-    const n = l(() => e.mode === "up");
-    return {
-      isUp: n,
-      onClick: (o) => {
-        o == null || o.stopPropagation(), e.disabled || t(n.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 y("button", {
+    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
     });
   }
-}), pe = L({
+});
+const VvInputClearAction = defineComponent({
   components: {
-    VvIcon: _
+    VvIcon: _sfc_main$1
   },
   props: {
     disabled: {
       type: Boolean,
-      default: !1
+      default: false
     },
     label: {
       type: String,
@@ -716,20 +1029,23 @@ const r = {
     }
   },
   emits: ["clear"],
-  setup(e, { emit: t }) {
-    function n(a) {
-      a == null || a.stopPropagation(), e.disabled || t("clear");
+  setup(props, { emit }) {
+    function onClick(e) {
+      e == null ? void 0 : e.stopPropagation();
+      if (!props.disabled) {
+        emit("clear");
+      }
     }
     return {
-      onClick: n
+      onClick
     };
   },
   render() {
-    const e = y(_, {
+    const icon = h(_sfc_main$1, {
       name: this.icon,
-      class: "vv-input-text__action-icon"
+      class: "vv-input-text__icon"
     });
-    return y(
+    return h(
       "button",
       {
         disabled: this.disabled,
@@ -738,51 +1054,54 @@ const r = {
         type: "button",
         onClick: this.onClick
       },
-      e
+      icon
     );
   }
 });
-function ee(e, t) {
+function VvInputTextActionsFactory(type, parentProps) {
   return {
     name: "VvInputTextActions",
     components: {
-      VvIcon: _,
-      VvInputPasswordAction: de,
-      VvInputStepAction: Z,
-      VvInputClearAction: pe
+      VvIcon: _sfc_main$1,
+      VvInputPasswordAction,
+      VvInputStepAction,
+      VvInputClearAction
     },
     setup() {
+      const isDisabled = computed(() => {
+        return parentProps.disabled || parentProps.readonly;
+      });
       return {
-        isDisabled: l(() => t.disabled || t.readonly),
-        labelStepUp: t.labelStepUp,
-        labelStepDown: t.labelStepDown,
-        labelShowPassword: t.labelShowPassword,
-        labelHidePassword: t.labelHidePassword,
-        labelClear: t.labelClear,
-        iconShowPassword: t.iconShowPassword,
-        iconHidePassword: t.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 n = null;
-      switch (e) {
-        case r.SEARCH: {
-          const { onClear: a } = this.$attrs;
-          n = [
-            y(pe, {
+      let actions = null;
+      switch (type) {
+        case INPUT_TYPES.SEARCH: {
+          const { onClear } = this.$attrs;
+          actions = [
+            h(VvInputClearAction, {
               disabled: this.isDisabled,
               label: this.labelShowPassword,
-              onClear: a
+              onClear
             })
           ];
           break;
         }
-        case r.PASSWORD: {
-          const { onTogglePassword: a } = this.$attrs;
-          n = [
-            y(de, {
+        case INPUT_TYPES.PASSWORD: {
+          const { onTogglePassword } = this.$attrs;
+          actions = [
+            h(VvInputPasswordAction, {
               disabled: this.isDisabled,
-              onTogglePassword: a,
+              onTogglePassword,
               labelShow: this.labelShowPassword,
               labelHide: this.labelHidePassword,
               iconShow: this.iconShowPassword,
@@ -791,258 +1110,463 @@ function ee(e, t) {
           ];
           break;
         }
-        case r.NUMBER: {
-          const { onStepUp: a, onStepDown: o } = this.$attrs;
-          n = [
-            y(Z, {
+        case INPUT_TYPES.NUMBER: {
+          const { onStepUp, onStepDown } = this.$attrs;
+          actions = [
+            h(VvInputStepAction, {
               mode: "up",
-              disabled: this.isDisabled || t.max !== void 0 && t.modelValue === t.max,
+              disabled: this.isDisabled || parentProps.max !== void 0 && parentProps.modelValue === parentProps.max,
               label: this.labelStepUp,
-              onStepUp: a,
-              onStepDown: o
+              onStepUp,
+              onStepDown
             }),
-            y(Z, {
+            h(VvInputStepAction, {
               mode: "down",
-              disabled: this.isDisabled || t.min !== void 0 && t.modelValue === t.min,
+              disabled: this.isDisabled || parentProps.min !== void 0 && parentProps.modelValue === parentProps.min,
               label: this.labelStepDown,
-              onStepUp: a,
-              onStepDown: o
+              onStepUp,
+              onStepDown
             })
           ];
           break;
         }
       }
-      return Array.isArray(n) ? y("div", { class: "vv-input-text__actions-group" }, n) : n;
+      return Array.isArray(actions) ? h("div", { class: "vv-input-text__actions-group" }, actions) : actions;
     }
   };
 }
-const yt = (e) => l(() => String((e == null ? void 0 : e.value) || ze()));
-function wt(e, t, n = 0) {
-  let a;
-  return typeof n == "string" && (n = parseInt(n)), l({
-    get: () => e == null ? void 0 : e.value,
-    set: (o) => {
-      a && clearTimeout(a), a = setTimeout(() => {
-        t("update:modelValue", o);
-      }, n);
+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 Et(e, t) {
-  const { focused: n } = je(e);
-  return ve(n, (a) => {
-    t(a ? "focus" : "blur", s(e));
-  }), {
-    focused: n
+function useComponentFocus(inputTemplateRef, emit) {
+  const { focused } = useFocus(inputTemplateRef);
+  watch(focused, (newValue) => {
+    emit(newValue ? "focus" : "blur", unref(inputTemplateRef));
+  });
+  return {
+    focused
   };
 }
-function It(e, t) {
-  const n = l(
-    () => Boolean((e == null ? void 0 : e.value) && t.value === x.before)
-  ), a = l(
-    () => Boolean((e == null ? void 0 : e.value) && t.value === x.after)
-  ), o = l(
-    () => Boolean((e == null ? void 0 : e.value) && t.value === T.left)
-  ), p = l(
-    () => Boolean((e == null ? void 0 : e.value) && t.value === T.right)
-  ), d = l(
-    () => Boolean((e == null ? void 0 : e.value) && t.value === T.top)
-  ), A = l(
-    () => Boolean((e == null ? void 0 : e.value) && t.value === T.bottom)
+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: l(() => typeof (e == null ? void 0 : e.value) == "string" ? { name: e == null ? void 0 : e.value } : e == null ? void 0 : e.value),
-    hasIconLeft: o,
-    hasIconRight: p,
-    hasIconTop: d,
-    hasIconBottom: A,
-    hasIconBefore: n,
-    hasIconAfter: a
+    hasIcon,
+    hasIconLeft,
+    hasIconRight,
+    hasIconTop,
+    hasIconBottom,
+    hasIconBefore,
+    hasIconAfter
   };
 }
-function _t(e, t) {
-  const n = l(() => (s(e) ?? "").length), a = l(() => (t == null ? void 0 : t.lowerLimit) !== void 0 && n.value < (t == null ? void 0 : t.lowerLimit) ? n.value - t.lowerLimit : (t == null ? void 0 : t.upperLimit) !== void 0 && n.value < (t == null ? void 0 : t.upperLimit) ? t.upperLimit - n.value : 0), o = l(() => (t == null ? void 0 : t.mode) === !1 ? "" : (t == null ? void 0 : t.mode) === "limit" && (t != null && t.upperLimit) ? `${n.value} / ${t.lowerLimit ? `${t.lowerLimit}-` : ""}${t.upperLimit}` : (t == null ? void 0 : t.mode) === "countdown" ? a.value === 0 ? void 0 : a : n.value);
+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: n,
-    gap: a,
-    formatted: o
+    length,
+    gap,
+    formatted
   };
 }
-const At = ["for"], Dt = { class: "vv-input-text__wrapper" }, Ot = {
+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" }, Ct = ["id"], Pt = {
+};
+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"
-}, Bt = {
-  key: 2,
+};
+const _hoisted_8 = {
+  key: 6,
   class: "vv-input-text__limit"
-}, Ht = {
+};
+const __default__ = {
   name: "VvInputText"
-}, Vt = /* @__PURE__ */ L({
-  ...Ht,
-  props: gt,
-  emits: ht,
-  setup(e, { emit: t }) {
-    const n = e, a = xe(), o = j(), {
-      id: p,
-      icon: d,
-      iconPosition: A,
-      label: w,
-      modelValue: m,
-      count: i,
-      valid: u,
-      invalid: S,
-      loading: v
-    } = U(n), b = yt(p), E = l(() => `${b.value}-hint`), N = l(
-      () => n.floating && R(n.placeholder) ? " " : n.placeholder
-    ), h = wt(m, t, n.debounce), { focused: C } = Et(o, t), W = We(o);
-    ve(W, (c) => {
-      c && n.autofocus && (C.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 B = j(!1), V = l(() => n.type === r.PASSWORD), D = () => {
-      B.value = !B.value;
-    }, ge = l(
-      () => n.type === r.TIME || n.type === r.DATETIME_LOCAL || n.type === r.DATE || n.type === r.WEEK || n.type === r.MONTH
-    ), ye = l(() => n.type === r.NUMBER), ne = () => {
-      z.value && (o.value.stepUp(), h.value = s(o).value);
-    }, ae = () => {
-      z.value && (o.value.stepDown(), h.value = s(o).value);
-    }, we = l(() => n.type === r.SEARCH), re = () => {
-      h.value = void 0;
-    }, { hasIcon: le, hasIconBefore: oe, hasIconAfter: F } = It(
-      d,
-      A
-    ), q = l(() => {
-      switch (n.type) {
-        case r.COLOR:
-          return { name: I.COLOR };
-        case r.DATE:
-        case r.DATETIME_LOCAL:
-        case r.WEEK:
-        case r.MONTH:
-          return { name: I.DATE };
-        case r.TIME:
-          return { name: I.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: Ee } = _t(h, {
-      mode: n.count,
-      upperLimit: n.maxlength,
-      lowerLimit: n.minlength
-    }), z = l(() => !n.disabled && !n.readonly), Ie = l(
-      () => z.value ? n.tabindex : -1
-    ), se = l(() => !R(m)), _e = l(() => {
-      if (S.value === !0)
-        return !0;
-      if (u.value === !0)
-        return !1;
-    }), { modifiers: Ae } = U(n), De = be(
+    });
+    const { formatted: countFormatted } = useTextCount(localModelValue, {
+      mode: props.count,
+      upperLimit: Number(props.maxlength),
+      lowerLimit: Number(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",
-      Ae,
-      l(() => ({
-        valid: u.value,
-        invalid: S.value,
-        loading: v.value,
-        disabled: n.disabled,
-        readonly: n.readonly,
-        "icon-before": oe.value,
-        "icon-after": F.value || !R(q),
-        floating: n.floating && !R(n.label),
-        dirty: se.value,
-        focus: C.value
+      modifiers,
+      computed(() => ({
+        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
       }))
-    ), Oe = l(() => {
-      const c = (() => V.value && B.value || ge.value && !se.value && !C.value ? r.TEXT : n.type)(), f = {
-        type: c,
-        name: n.name,
-        tabindex: Ie.value,
-        disabled: n.disabled,
-        readonly: n.readonly,
-        required: n.required,
-        autocomplete: n.autocomplete,
-        "aria-invalid": _e.value,
-        "aria-describedby": !ie.value && Ce.value ? E.value : void 0,
-        "aria-errormessage": ie.value ? E.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 (c === r.DATE || c === r.MONTH || c === r.WEEK || c === r.TIME || c === r.DATETIME_LOCAL || c === r.NUMBER) && (f.step = n.step, f.max = String(n.max), f.min = String(n.min)), (c === r.TEXT || c === r.SEARCH || c === r.URL || c === r.TEL || c === r.EMAIL || c === r.PASSWORD || c === r.NUMBER) && (f.placeholder = N.value), (c === r.TEXT || c === r.SEARCH || c === r.URL || c === r.TEL || c === r.EMAIL || c === r.PASSWORD) && (f.minlength = n.minlength, f.maxlength = n.maxlength, f.pattern = n.pattern), c === r.EMAIL && (f.multiple = n.multiple), f;
-    }), K = l(() => ({
-      valid: n.valid,
-      invalid: n.invalid,
-      modelValue: n.modelValue,
-      togglePassword: D,
-      stepUp: ne,
-      stepDown: ae,
-      clear: re
-    })), { HintSlot: Te, hasHint: Ce, hasInvalid: ie } = Xe(n, a), Pe = ee(
-      r.PASSWORD,
-      n
-    ), Be = ee(
-      r.NUMBER,
-      n
-    ), He = ee(
-      r.SEARCH,
-      n
+      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 (c, f) => (g(), H("div", {
-      class: Le(s(De))
-    }, [
-      s(w) ? (g(), H("label", {
-        key: 0,
-        for: s(b),
-        class: "vv-input-text__label"
-      }, ue(s(w)), 9, At)) : O("", !0),
-      Y("div", Dt, [
-        c.$slots.before ? (g(), H("div", Ot, [
-          J(c.$slots, "before", G(Q(s(K))))
-        ])) : O("", !0),
-        Y("div", Tt, [
-          s(oe) ? (g(), P(_, $({
-            key: 0,
-            class: "vv-input-text__icon"
-          }, s(le)), null, 16)) : O("", !0),
-          Ne(Y("input", $({
-            id: s(b),
-            ref_key: "input",
-            ref: o,
-            "onUpdate:modelValue": f[0] || (f[0] = (X) => Ve(h) ? h.value = X : null)
-          }, s(Oe), {
-            onKeyup: f[1] || (f[1] = (X) => t("keyup", X))
-          }), null, 16, Ct), [
-            [ke, s(h)]
-          ]),
-          s(F) || s(q) ? (g(), P(_, $({
+    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"
-          }, s(F) ? s(le) : s(q)), null, 16)) : s(V) ? (g(), P(s(Pe), {
+          }, unref(hasIconAfter) ? unref(hasIcon) : unref(defaultAfterIcon)), null, 16)) : unref(isPassword) && !_ctx.hideActions && unref(isClickable) ? (openBlock(), createBlock(unref(PasswordInputActions), {
             key: 2,
-            onTogglePassword: D
-          })) : s(ye) ? (g(), P(s(Be), {
+            onTogglePassword
+          })) : unref(isNumber) && !_ctx.hideActions && unref(isClickable) ? (openBlock(), createBlock(unref(NumberInputActions), {
             key: 3,
-            onStepUp: ne,
-            onStepDown: ae
-          })) : s(we) ? (g(), P(s(He), {
+            onStepUp,
+            onStepDown
+          })) : unref(isSearch) && !_ctx.hideActions && unref(isClickable) ? (openBlock(), createBlock(unref(SearchInputActions), {
             key: 4,
-            onClear: re
-          })) : O("", !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)
         ]),
-        c.$slots.after ? (g(), H("div", Pt, [
-          J(c.$slots, "after", G(Q(s(K))))
-        ])) : O("", !0),
-        s(i) ? (g(), H("span", Bt, [
-          J(c.$slots, "count", G(Q(s(K))), () => [
-            Me(ue(s(Ee)), 1)
-          ])
-        ])) : O("", !0)
-      ]),
-      $e(s(Te), {
-        id: s(E),
-        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 {
-  Vt as default
+  _sfc_main as default
 };