@volverjs/ui-vue 0.0.3 → 0.0.4

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

@@ -1,36 +1,61 @@
-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 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)
+          return null;
+        a = a[n[o]];
+      }
+      return a;
+    }
+  } 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 Ke(e) {
+  return typeof e == "string" || e instanceof String;
+}
+function M(e) {
+  return Array.isArray(e) ? e.filter((t) => Ke(t)).join(" ") : e;
 }
-function Oe(t, n) {
+function Xe(e, t) {
   const {
-    invalid: e,
-    valid: l,
-    hint: d,
-    loading: v
-  } = n, {
-    hintLabel: u,
-    modelValue: T,
-    valid: y,
-    validLabel: f,
-    invalid: s,
-    invalidLabel: a,
+    invalid: n,
+    valid: a,
+    hint: o,
+    loading: p
+  } = t, {
+    hintLabel: d,
+    modelValue: A,
+    valid: w,
+    validLabel: m,
+    invalid: i,
+    invalidLabel: u,
     ...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
+  } = 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
   );
   return {
-    hasInvalid: w,
-    hasHint: H,
-    hasValid: b,
-    hasLoading: D,
+    hasInvalid: E,
+    hasHint: N,
+    hasValid: h,
+    hasLoading: C,
     HintSlot: {
       name: "HintSlot",
       props: {
@@ -39,31 +64,31 @@ 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(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
           });
-          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);
+          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);
         });
         return {
-          isVisible: N,
-          hasInvalid: w,
-          hasValid: b,
-          hintContent: R
+          isVisible: W,
+          hasInvalid: E,
+          hasValid: h,
+          hintContent: V
         };
       },
       render() {
         if (this.isVisible)
-          return h(
+          return y(
             "small",
             {
               role: this.hasInvalid ? "alert" : this.hasValid ? "status" : void 0
@@ -74,7 +99,7 @@ function Oe(t, n) {
     }
   };
 }
-const He = {
+const Ye = {
   /**
    * Color
    */
@@ -167,102 +192,180 @@ const He = {
   modifiers: {
     type: [String, Array]
   }
-}, Re = {
+};
+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);
+}
+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;
+  });
+}
+const Qe = {
   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(
+}, _ = /* @__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 c = `@${u.value}:${S.prefix}:${s}`;
-          if (x(c))
-            return c;
+          const v = `@${d.value}:${S.prefix}:${i}`;
+          if (k(v))
+            return v;
         }
-      )) || s;
+      )) || i;
     });
-    function y(s) {
-      let a = null;
+    function w(i) {
+      let u = null;
       if (typeof window > "u") {
-        const { JSDOM: w } = require("jsdom");
-        a = new w().window;
+        const { JSDOM: E } = require("jsdom");
+        u = new E().window;
       }
-      return (a ? new a.DOMParser() : new window.DOMParser()).parseFromString(s, "text/html").querySelector("svg");
+      return (u ? new u.DOMParser() : new window.DOMParser()).parseFromString(i, "text/html").querySelector("svg");
     }
-    function f(s) {
-      const a = y(s), S = (a == null ? void 0 : a.innerHTML.trim()) || "";
-      a && S && Pe(`@${u.value}:${n.prefix}:${n.name}`, {
+    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: a.viewBox.baseVal.height,
-        width: a.viewBox.baseVal.width
+        height: u.viewBox.baseVal.height,
+        width: u.viewBox.baseVal.width
       });
     }
-    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({
+    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: i(v)
+      class: s(p)
     }, {
-      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);
+      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);
   }
-});
-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 = {
+}), Ze = {
+  /**
+   * 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: (e) => Object.values(me).includes(e)
+  },
+  /**
+   * Anchor rel
+   */
+  rel: {
+    type: String,
+    default: "noopener noreferrer"
+  }
+}, et = {
+  /**
+   * Valid status
+   */
   valid: Boolean,
+  /**
+   * Valid label
+   */
   validLabel: [String, Array]
-}, Be = {
+}, tt = {
+  /**
+   * Invalid status
+   */
   invalid: Boolean,
+  /**
+   * Invalid label
+   */
   invalidLabel: [String, Array]
-}, Ve = {
+}, nt = {
+  /**
+   * Loading status
+   */
   loading: Boolean,
-  loadingLabel: String
-}, Ne = {
+  /**
+   * Loading label
+   */
+  loadingLabel: {
+    type: String,
+    default: "Loading..."
+  }
+}, Se = {
   /**
    * Whether the form control is disabled
    */
   disabled: Boolean
-}, Me = {
+}, at = {
+  /**
+   * Whether the item is active
+   */
+  active: Boolean
+}, rt = {
+  /**
+   * Whether the item is pressed
+   */
+  pressed: Boolean
+}, he = {
+  /**
+   * The item label
+   */
+  label: [String, Number]
+}, lt = {
   /**
    * The value is not editable
    */
   readonly: Boolean
-}, ke = {
+}, ot = {
   /**
    * Component BEM modifiers
    */
   modifiers: [String, Array]
-}, $e = {
+}, st = {
   hintLabel: { type: String, default: "" }
-}, Le = {
+}, it = {
   /**
    * Show character limit
    */
   count: {
     type: [Boolean, String],
     default: !1,
-    validator: (t) => [!0, !1, "limit", "countdown"].includes(t)
+    validator: (e) => [!0, !1, "limit", "countdown"].includes(e)
   }
-}, Ue = {
+}, ut = {
   /**
    * Milliseconds to wait before emitting the input event
    */
   debounce: [Number, String]
-}, We = {
+}, ct = {
   /**
    * VvIcon name or props
    * @see VVIcon
@@ -273,64 +376,65 @@ const xe = {
    */
   iconPosition: {
     type: String,
-    default: Y.before,
-    validation: (t) => Object.values(Y).includes(t)
+    default: x.before,
+    validation: (e) => Object.values(x).includes(e)
   }
-}, Fe = {
+}, dt = {
   /**
    * Global attribute tabindex
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
    */
   tabindex: { type: [String, Number], default: 0 }
-}, je = {
+}, pt = {
   /**
    * If true the label will be floating
    */
   floating: Boolean
-}, qe = {
+}, vt = {
   /**
    * Global attribute id
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
    */
   id: [String, Number]
 };
-K.bottom;
-const ze = {
-  ...qe,
+T.bottom;
+const ft = {
+  ...vt,
   /**
    * 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 = {
+}, mt = {
   /**
    * Global attribute autofocus
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
    */
   autofocus: Boolean
-}, Ke = {
+}, bt = {
   /**
    * 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,
+}, St = {
+  ...ft,
+  ...mt,
+  ...bt,
+  ...dt,
+  ...Se,
+  ...lt,
+  ...et,
+  ...tt,
+  ...st,
+  ...nt,
+  ...ot,
+  ...it,
+  ...ut,
+  ...ct,
+  ...pt,
+  ...he,
   /**
    * Input / Textarea minlength
    * Minimum length (number of characters) of value
@@ -358,12 +462,20 @@ 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
+};
+({
+  ...Se,
+  ...he,
+  ...rt,
+  ...at,
+  ...Ze,
   /**
-   * <label> value for the Input / Textarea
+   * Button type
    */
-  label: String
-}, o = {
+  type: te.button
+});
+const r = {
   TEXT: "text",
   PASSWORD: "password",
   NUMBER: "number",
@@ -377,15 +489,15 @@ const ze = {
   DATETIME_LOCAL: "datetime-local",
   MONTH: "month",
   WEEK: "week"
-}, E = {
+}, I = {
   PASSWORD_SHOW: "eye-on",
   PASSWORD_HIDE: "eye-off",
   DATE: "calendar",
   TIME: "time",
   COLOR: "color",
   SEARCH: "close"
-}, Je = ["update:modelValue", "focus", "blur", "keyup"], Ge = {
-  ...Ye,
+}, ht = ["update:modelValue", "focus", "blur", "keyup"], gt = {
+  ...St,
   /**
    * Input value
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
@@ -397,8 +509,8 @@ const ze = {
    */
   type: {
     type: String,
-    default: o.TEXT,
-    validator: (t) => Object.values(o).includes(t)
+    default: r.TEXT,
+    validator: (e) => Object.values(r).includes(e)
   },
   /**
    * Minimum value
@@ -436,7 +548,7 @@ const ze = {
    */
   iconShowPassword: {
     type: String,
-    default: E.PASSWORD_SHOW
+    default: I.PASSWORD_SHOW
   },
   /**
    * VvIcon name for hide password button
@@ -444,7 +556,7 @@ const ze = {
    */
   iconHidePassword: {
     type: String,
-    default: E.PASSWORD_HIDE
+    default: I.PASSWORD_HIDE
   },
   /**
    * VvIcon name for clear button
@@ -452,7 +564,7 @@ const ze = {
    */
   iconClear: {
     type: String,
-    default: E.SEARCH
+    default: I.SEARCH
   },
   /**
    * Label for step up button
@@ -489,9 +601,9 @@ const ze = {
     type: String,
     default: "Clear"
   }
-}, se = defineComponent({
+}, de = L({
   components: {
-    VvIcon: A
+    VvIcon: _
   },
   props: {
     disabled: {
@@ -508,33 +620,33 @@ const ze = {
     },
     iconShow: {
       type: String,
-      default: E.PASSWORD_SHOW
+      default: I.PASSWORD_SHOW
     },
     iconHide: {
       type: String,
-      default: E.PASSWORD_HIDE
+      default: I.PASSWORD_HIDE
     }
   },
   emits: ["toggle-password"],
-  setup(t, { emit: n }) {
-    const e = ref(!1), l = computed(
-      () => e.value ? t.iconHide : t.iconShow
+  setup(e, { emit: t }) {
+    const n = j(!1), a = l(
+      () => n.value ? e.iconHide : e.iconShow
     );
-    function d(v) {
-      v == null || v.stopPropagation(), t.disabled || (e.value = !e.value, n("toggle-password", e.value));
+    function o(p) {
+      p == null || p.stopPropagation(), e.disabled || (n.value = !n.value, t("toggle-password", n.value));
     }
     return {
-      active: e,
-      activeIcon: l,
-      onClick: d
+      active: n,
+      activeIcon: a,
+      onClick: o
     };
   },
   render() {
-    const t = h(A, {
+    const e = y(_, {
       name: this.activeIcon,
       class: "vv-input-text__action-icon"
     });
-    return h(
+    return y(
       "button",
       {
         disabled: this.disabled,
@@ -543,12 +655,12 @@ const ze = {
         type: "button",
         onClick: this.onClick
       },
-      t
+      e
     );
   }
-}), z = defineComponent({
+}), Z = L({
   components: {
-    VvIcon: A
+    VvIcon: _
   },
   props: {
     disabled: {
@@ -560,22 +672,22 @@ const ze = {
     },
     mode: {
       type: String,
-      validator: (t) => ["up", "down"].includes(t),
+      validator: (e) => ["up", "down"].includes(e),
       default: "up"
     }
   },
   emits: ["step-up", "step-down"],
-  setup(t, { emit: n }) {
-    const e = computed(() => t.mode === "up");
+  setup(e, { emit: t }) {
+    const n = l(() => e.mode === "up");
     return {
-      isUp: e,
-      onClick: (d) => {
-        d == null || d.stopPropagation(), t.disabled || n(e.value ? "step-up" : "step-down");
+      isUp: n,
+      onClick: (o) => {
+        o == null || o.stopPropagation(), e.disabled || t(n.value ? "step-up" : "step-down");
       }
     };
   },
   render() {
-    return h("button", {
+    return y("button", {
       class: [
         "vv-input-text__action-chevron",
         this.isUp && "vv-input-text__action-chevron-up"
@@ -585,9 +697,9 @@ const ze = {
       onClick: this.onClick
     });
   }
-}), ae = defineComponent({
+}), pe = L({
   components: {
-    VvIcon: A
+    VvIcon: _
   },
   props: {
     disabled: {
@@ -604,20 +716,20 @@ const ze = {
     }
   },
   emits: ["clear"],
-  setup(t, { emit: n }) {
-    function e(l) {
-      l == null || l.stopPropagation(), t.disabled || n("clear");
+  setup(e, { emit: t }) {
+    function n(a) {
+      a == null || a.stopPropagation(), e.disabled || t("clear");
     }
     return {
-      onClick: e
+      onClick: n
     };
   },
   render() {
-    const t = h(A, {
+    const e = y(_, {
       name: this.icon,
       class: "vv-input-text__action-icon"
     });
-    return h(
+    return y(
       "button",
       {
         disabled: this.disabled,
@@ -626,51 +738,51 @@ const ze = {
         type: "button",
         onClick: this.onClick
       },
-      t
+      e
     );
   }
 });
-function X(t, n) {
+function ee(e, t) {
   return {
     name: "VvInputTextActions",
     components: {
-      VvIcon: A,
-      VvInputPasswordAction: se,
-      VvInputStepAction: z,
-      VvInputClearAction: ae
+      VvIcon: _,
+      VvInputPasswordAction: de,
+      VvInputStepAction: Z,
+      VvInputClearAction: pe
     },
     setup() {
       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: 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
       };
     },
     render() {
-      let e = null;
-      switch (t) {
-        case o.SEARCH: {
-          const { onClear: l } = this.$attrs;
-          e = [
-            h(ae, {
+      let n = null;
+      switch (e) {
+        case r.SEARCH: {
+          const { onClear: a } = this.$attrs;
+          n = [
+            y(pe, {
               disabled: this.isDisabled,
               label: this.labelShowPassword,
-              onClear: l
+              onClear: a
             })
           ];
           break;
         }
-        case o.PASSWORD: {
-          const { onTogglePassword: l } = this.$attrs;
-          e = [
-            h(se, {
+        case r.PASSWORD: {
+          const { onTogglePassword: a } = this.$attrs;
+          n = [
+            y(de, {
               disabled: this.isDisabled,
-              onTogglePassword: l,
+              onTogglePassword: a,
               labelShow: this.labelShowPassword,
               labelHide: this.labelHidePassword,
               iconShow: this.iconShowPassword,
@@ -679,206 +791,258 @@ function X(t, n) {
           ];
           break;
         }
-        case o.NUMBER: {
-          const { onStepUp: l, onStepDown: d } = this.$attrs;
-          e = [
-            h(z, {
+        case r.NUMBER: {
+          const { onStepUp: a, onStepDown: o } = this.$attrs;
+          n = [
+            y(Z, {
               mode: "up",
-              disabled: this.isDisabled || n.max !== void 0 && n.modelValue === n.max,
+              disabled: this.isDisabled || t.max !== void 0 && t.modelValue === t.max,
               label: this.labelStepUp,
-              onStepUp: l,
-              onStepDown: d
+              onStepUp: a,
+              onStepDown: o
             }),
-            h(z, {
+            y(Z, {
               mode: "down",
-              disabled: this.isDisabled || n.min !== void 0 && n.modelValue === n.min,
+              disabled: this.isDisabled || t.min !== void 0 && t.modelValue === t.min,
               label: this.labelStepDown,
-              onStepUp: l,
-              onStepDown: d
+              onStepUp: a,
+              onStepDown: o
             })
           ];
           break;
         }
       }
-      return Array.isArray(e) ? h("div", { class: "vv-input-text__actions-group" }, e) : e;
+      return Array.isArray(n) ? y("div", { class: "vv-input-text__actions-group" }, n) : n;
     }
   };
 }
-const Qe = ["for"], Ze = { class: "vv-input-text__wrapper" }, et = {
+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);
+    }
+  });
+}
+function Et(e, t) {
+  const { focused: n } = je(e);
+  return ve(n, (a) => {
+    t(a ? "focus" : "blur", s(e));
+  }), {
+    focused: n
+  };
+}
+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)
+  );
+  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
+  };
+}
+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);
+  return {
+    length: n,
+    gap: a,
+    formatted: o
+  };
+}
+const At = ["for"], Dt = { class: "vv-input-text__wrapper" }, Ot = {
   key: 0,
   class: "vv-input-text__input-before"
-}, tt = { class: "vv-input-text__inner" }, ot = ["id"], nt = {
+}, Tt = { class: "vv-input-text__inner" }, Ct = ["id"], Pt = {
   key: 1,
   class: "vv-input-text__input-after"
-}, st = {
+}, Bt = {
   key: 2,
   class: "vv-input-text__limit"
-}, at = {
+}, Ht = {
   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,
+}, 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: 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);
+      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 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 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 };
         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(() => {
+    }), { 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 (a.value === !0)
+      if (u.value === !0)
         return !1;
-    }), { modifiers: fe } = toRefs(e), me = useBemModifiers(
+    }), { modifiers: Ae } = U(n), De = be(
       "vv-input-text",
-      fe,
-      computed(() => ({
-        valid: a.value,
+      Ae,
+      l(() => ({
+        valid: u.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
+        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
       }))
-    ), 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
+    ), 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
       };
-      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
+      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
     );
-    return (r, p) => (g(), O("div", {
-      class: Ee(i(me))
+    return (c, f) => (g(), H("div", {
+      class: Le(s(De))
     }, [
-      i(y) ? (g(), O("label", {
+      s(w) ? (g(), H("label", {
         key: 0,
-        for: i(m),
+        for: s(b),
         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({
+      }, 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"
-          }, i(Z)), null, 16)) : _("", !0),
-          Ae(W("input", V({
-            id: i(m),
+          }, s(le)), null, 16)) : O("", !0),
+          Ne(Y("input", $({
+            id: s(b),
             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)]
+            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)]
           ]),
-          i(M) || i(k) ? (g(), C(A, V({
+          s(F) || s(q) ? (g(), P(_, $({
             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), {
+          }, s(F) ? s(le) : s(q)), null, 16)) : s(V) ? (g(), P(s(Pe), {
             key: 2,
-            onTogglePassword: I
-          })) : i(ue) ? (g(), C(i(ye), {
+            onTogglePassword: D
+          })) : s(ye) ? (g(), P(s(Be), {
             key: 3,
-            onStepUp: J,
-            onStepDown: G
-          })) : i(de) ? (g(), C(i(we), {
+            onStepUp: ne,
+            onStepDown: ae
+          })) : s(we) ? (g(), P(s(He), {
             key: 4,
-            onClear: Q
-          })) : _("", !0)
+            onClear: re
+          })) : O("", !0)
         ]),
-        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)
+        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)
           ])
-        ])) : _("", !0)
+        ])) : O("", !0)
       ]),
-      Ce(i(Se), {
-        id: i(w),
+      $e(s(Te), {
+        id: s(E),
         class: "vv-input-text__hint"
       }, null, 8, ["id"])
     ], 2));
   }
 });
 export {
-  rt as default
+  Vt as default
 };