@volverjs/ui-vue 0.0.2 → 0.0.3-beta.3

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

@@ -1,68 +1,37 @@
-import { unref as l, toRefs as Y, computed as s, h as g, watch as pe, defineComponent as H, ref as $, inject as Ce, openBlock as E, createBlock as P, mergeProps as B, createCommentVNode as O, useSlots as De, createElementBlock as z, normalizeClass as Pe, toDisplayString as ie, createElementVNode as le, renderSlot as X, normalizeProps as N, guardReactiveProps as K, withDirectives as _e, isRef as Oe, vModelDynamic as Re, createTextVNode as He, createVNode as Le } from "vue";
-import { toReactive as xe, useFocus as Ve, useElementVisibility as Ne } from "@vueuse/core";
-import { nanoid as ke } from "nanoid";
-import { iconExists as k, Icon as Me, addIcon as Be } from "@iconify/vue";
-function oe(n, t) {
-  if (n && Object.keys(n).length && t) {
-    if (t.indexOf(".") === -1)
-      return n[t];
-    {
-      const e = t.split(".");
-      let i = n;
-      for (let r = 0, p = e.length; r < p; ++r) {
-        if (n == null)
-          return null;
-        i = i[e[r]];
-      }
-      return i;
-    }
-  } else
-    return null;
-}
-function R(n) {
-  return ((t) => t == null || t === "" || Array.isArray(t) && t.length === 0 || !(t instanceof Date) && typeof t == "object" && Object.keys(t).length === 0)(l(n));
-}
-function $e(n) {
-  return typeof n == "string" || n instanceof String;
+import { defineComponent as se, unref as a, openBlock as y, createBlock as D, mergeProps as M, createCommentVNode as R, createElementBlock as W, normalizeClass as be, toDisplayString as ee, createElementVNode as te, renderSlot as F, normalizeProps as V, guardReactiveProps as j, withDirectives as ge, isRef as ye, vModelDynamic as we, createTextVNode as Ee, createVNode as Ie } from "vue";
+import { nanoid as Pe } from "nanoid";
+import { iconExists as x, Icon as Te, addIcon as Ae } from "@iconify/vue";
+function N(i) {
+  return Array.isArray(i) ? i.filter((o) => isString(o)).join(" ") : i;
 }
-function se(n) {
-  var t, e;
-  if (n)
-    return (e = (t = n.match(
-      /[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g
-    )) == null ? void 0 : t.join("-")) == null ? void 0 : e.toLowerCase();
-}
-function M(n) {
-  return Array.isArray(n) ? n.filter((t) => $e(t)).join(" ") : n;
-}
-function Ue(n, t) {
+function De(i, o) {
   const {
     invalid: e,
-    valid: i,
-    hint: r,
-    loading: p
-  } = t, {
+    valid: c,
+    hint: l,
+    loading: m
+  } = o, {
     hintLabel: u,
-    modelValue: w,
-    valid: h,
-    validLabel: m,
-    invalid: o,
-    invalidLabel: c,
-    ...b
-  } = Y(n), v = oe(b, "loading"), S = oe(b, "loadingLabel"), T = s(() => o.value ? !!(o.value && e || c != null && c.value && Array.isArray(c.value) && c.value.length > 0 || c != null && c.value && !R(c)) : !1), y = s(
-    () => !!(u && u.value || r)
-  ), C = s(
-    () => !!(m && m.value || i)
-  ), L = s(
-    () => !!(v != null && v.value && p || v != null && v.value && (S != null && S.value))
-  ), _ = s(
-    () => y.value || C.value || T.value || L.value
+    modelValue: T,
+    valid: g,
+    validLabel: f,
+    invalid: n,
+    invalidLabel: s,
+    ...S
+  } = toRefs(i), d = resolveFieldData(S, "loading"), v = resolveFieldData(S, "loadingLabel"), I = computed(() => n.value ? !!(n.value && e || s != null && s.value && Array.isArray(s.value) && s.value.length > 0 || s != null && s.value && !isEmpty(s)) : !1), b = computed(
+    () => !!(u && u.value || l)
+  ), P = computed(
+    () => !!(f && f.value || c)
+  ), _ = computed(
+    () => !!(d != null && d.value && m || d != null && d.value && (v != null && v.value))
+  ), C = computed(
+    () => b.value || P.value || I.value || _.value
   );
   return {
-    hasInvalid: T,
-    hasHint: y,
-    hasValid: C,
-    hasLoading: L,
+    hasInvalid: I,
+    hasHint: b,
+    hasValid: P,
+    hasLoading: _,
     HintSlot: {
       name: "HintSlot",
       props: {
@@ -71,31 +40,31 @@ function Ue(n, t) {
           default: () => ({})
         }
       },
-      setup(x) {
-        const V = s(() => {
-          const D = xe({
+      setup(H) {
+        const O = computed(() => {
+          const A = toReactive({
             hintLabel: u,
-            modelValue: w,
-            valid: h,
-            validLabel: m,
-            invalid: o,
-            invalidLabel: c,
-            loading: v,
-            loadingLabel: S,
-            ...x.params
+            modelValue: T,
+            valid: g,
+            validLabel: f,
+            invalid: n,
+            invalidLabel: s,
+            loading: d,
+            loadingLabel: v,
+            ...H.params
           });
-          return o != null && o.value ? (e == null ? void 0 : e(D)) || M(c == null ? void 0 : c.value) || (u == null ? void 0 : u.value) : h != null && h.value ? (i == null ? void 0 : i(D)) || M(m == null ? void 0 : m.value) || (u == null ? void 0 : u.value) : v != null && v.value ? (p == null ? void 0 : p(D)) || M(S == null ? void 0 : S.value) || (u == null ? void 0 : u.value) : (r == null ? void 0 : r(D)) || M(u == null ? void 0 : u.value) || (u == null ? void 0 : u.value);
+          return n != null && n.value ? (e == null ? void 0 : e(A)) || N(s == null ? void 0 : s.value) || (u == null ? void 0 : u.value) : g != null && g.value ? (c == null ? void 0 : c(A)) || N(f == null ? void 0 : f.value) || (u == null ? void 0 : u.value) : d != null && d.value ? (m == null ? void 0 : m(A)) || N(v == null ? void 0 : v.value) || (u == null ? void 0 : u.value) : (l == null ? void 0 : l(A)) || N(u == null ? void 0 : u.value) || (u == null ? void 0 : u.value);
         });
         return {
-          isVisible: _,
-          hasInvalid: T,
-          hasValid: C,
-          hintContent: V
+          isVisible: C,
+          hasInvalid: I,
+          hasValid: P,
+          hintContent: O
         };
       },
       render() {
         if (this.isVisible)
-          return g(
+          return h(
             "small",
             {
               role: this.hasInvalid || this.hasValid ? "alert" : void 0
@@ -106,79 +75,7 @@ function Ue(n, t) {
     }
   };
 }
-function We(n, t, e) {
-  const i = s(
-    () => !!(n != null && n.value && t.value === "left" || e != null && e.iconLeft)
-  ), r = s(
-    () => !!(n != null && n.value && t.value === "right" || e != null && e.iconRight)
-  ), p = s(
-    () => !!(n != null && n.value && t.value === "top" || e != null && e.iconTop)
-  ), u = s(
-    () => !!(n != null && n.value && t.value === "bottom" || e != null && e.iconBottom)
-  );
-  return {
-    hasIcon: s(() => typeof (n == null ? void 0 : n.value) == "string" ? { name: n == null ? void 0 : n.value } : n == null ? void 0 : n.value),
-    hasIconLeft: i,
-    hasIconRight: r,
-    hasIconTop: p,
-    hasIconBottom: u
-  };
-}
-function Fe(n, t) {
-  const { focused: e } = Ve(n);
-  return pe(e, (i) => {
-    t(i ? "focus" : "blur", l(n));
-  }), {
-    focused: e
-  };
-}
-function je(n, t, e = 0) {
-  let i;
-  return typeof e == "string" && (e = parseInt(e)), s({
-    get: () => n == null ? void 0 : n.value,
-    set: (r) => {
-      i && clearTimeout(i), i = setTimeout(() => {
-        t("update:modelValue", r);
-      }, e);
-    }
-  });
-}
-function qe(n, t) {
-  const e = s(() => (l(n) ?? "").length), i = s(() => (t == null ? void 0 : t.lowerLimit) !== void 0 && e.value < (t == null ? void 0 : t.lowerLimit) ? e.value - t.lowerLimit : (t == null ? void 0 : t.upperLimit) !== void 0 && e.value < (t == null ? void 0 : t.upperLimit) ? t.upperLimit - e.value : 0), r = s(() => (t == null ? void 0 : t.mode) === !1 ? "" : (t == null ? void 0 : t.mode) === "limit" && (t != null && t.upperLimit) ? `${e.value} / ${t.lowerLimit ? `${t.lowerLimit}-` : ""}${t.upperLimit}` : (t == null ? void 0 : t.mode) === "countdown" ? i.value === 0 ? void 0 : i : e.value);
-  return {
-    length: e,
-    gap: i,
-    formatted: r
-  };
-}
-function ve(n, t) {
-  const e = { [`${n}`]: !0 };
-  return {
-    bemCssClasses: s(() => Object.keys(t).reduce((r, p) => {
-      const u = l(t[p]) || !1;
-      if (!u)
-        return r;
-      if (p === "modifiers") {
-        const w = Array.isArray(u) ? u : u.split(" ");
-        return {
-          ...r,
-          ...w.reduce(
-            (h, m) => ({
-              ...h,
-              [`${n}--${se(m)}`]: !0
-            }),
-            {}
-          )
-        };
-      } else
-        return {
-          ...r,
-          [`${n}--${se(p)}`]: u
-        };
-    }, e) || {})
-  };
-}
-const ze = "ds", Xe = {
+const Ce = "ds", Re = {
   color: String,
   width: {
     type: [String, Number]
@@ -209,126 +106,126 @@ const ze = "ds", Xe = {
   modifiers: {
     type: [String, Array]
   }
-}, Ke = {
+}, _e = {
   name: "VvIcon"
-}, A = /* @__PURE__ */ H({
-  ...Ke,
-  props: Xe,
-  setup(n) {
-    const t = n, e = $(!0), { modifiers: i } = Y(t), r = Ce(ze), { bemCssClasses: p } = ve("vv-icon", {
-      modifiers: i
-    }), u = s(() => t.provider || (r == null ? void 0 : r.provider)), w = s(() => {
-      const o = t.name ?? "", c = `@${u.value}:${t.prefix}:${t.name}`;
-      return k(o) ? o : k(c) ? c : (r == null ? void 0 : r.iconsCollections.find((b) => {
-        const v = `@${u.value}:${b.prefix}:${o}`;
-        if (k(v))
-          return v;
-      })) || o;
+}, E = /* @__PURE__ */ se({
+  ..._e,
+  props: Re,
+  setup(i) {
+    const o = i, e = ref(!0), { modifiers: c } = toRefs(o), l = inject(Ce), { bemCssClasses: m } = useBemModifiers("vv-icon", {
+      modifiers: c
+    }), u = computed(() => o.provider || (l == null ? void 0 : l.provider)), T = computed(() => {
+      const n = o.name ?? "", s = `@${u.value}:${o.prefix}:${o.name}`;
+      return x(n) ? n : x(s) ? s : (l == null ? void 0 : l.iconsCollections.find((S) => {
+        const d = `@${u.value}:${S.prefix}:${n}`;
+        if (x(d))
+          return d;
+      })) || n;
     });
-    function h(o) {
-      let c = null;
+    function g(n) {
+      let s = null;
       if (typeof window > "u") {
-        const { JSDOM: T } = require("jsdom");
-        c = new T().window;
+        const { JSDOM: I } = require("jsdom");
+        s = new I().window;
       }
-      return (c ? new c.DOMParser() : new window.DOMParser()).parseFromString(o, "text/html").querySelector("svg");
+      return (s ? new s.DOMParser() : new window.DOMParser()).parseFromString(n, "text/html").querySelector("svg");
     }
-    function m(o) {
-      const c = h(o), b = (c == null ? void 0 : c.innerHTML.trim()) || "";
-      c && b && Be(`@${u.value}:${t.prefix}:${t.name}`, {
-        body: b,
-        height: c.viewBox.baseVal.height,
-        width: c.viewBox.baseVal.width
+    function f(n) {
+      const s = g(n), S = (s == null ? void 0 : s.innerHTML.trim()) || "";
+      s && S && Ae(`@${u.value}:${o.prefix}:${o.name}`, {
+        body: S,
+        height: s.viewBox.baseVal.height,
+        width: s.viewBox.baseVal.width
       });
     }
-    return r && (t.src && !k(`@${u.value}:${t.prefix}:${t.name}`) ? (e.value = !1, r.fetchIcon(t.src).then((o) => {
-      o && (m(o), e.value = !0);
-    }).catch((o) => {
-      throw new Error(`During fetch icon: ${o == null ? void 0 : o.message}`);
-    })) : t.svg && m(t.svg)), (o, c) => e.value ? (E(), P(l(Me), B({
+    return l && (o.src && !x(`@${u.value}:${o.prefix}:${o.name}`) ? (e.value = !1, l.fetchIcon(o.src).then((n) => {
+      n && (f(n), e.value = !0);
+    }).catch((n) => {
+      throw new Error(`During fetch icon: ${n == null ? void 0 : n.message}`);
+    })) : o.svg && f(o.svg)), (n, s) => a(e) ? (y(), D(a(Te), M({
       key: 0,
-      class: l(p)
+      class: a(m)
     }, {
-      inline: o.inline,
-      width: o.width,
-      height: o.height,
-      horizontalFlip: o.horizontalFlip,
-      verticalFlip: o.verticalFlip,
-      flip: o.flip,
-      rotate: o.rotate,
-      color: o.color,
-      onLoad: o.onLoad,
-      icon: l(w)
-    }), null, 16, ["class"])) : O("", !0);
+      inline: n.inline,
+      width: n.width,
+      height: n.height,
+      horizontalFlip: n.horizontalFlip,
+      verticalFlip: n.verticalFlip,
+      flip: n.flip,
+      rotate: n.rotate,
+      color: n.color,
+      onLoad: n.onLoad,
+      icon: a(T)
+    }), null, 16, ["class"])) : R("", !0);
   }
-}), Ze = {
+}), He = {
   valid: Boolean,
   validLabel: [String, Array]
-}, Ge = {
+}, Oe = {
   invalid: Boolean,
   invalidLabel: [String, Array]
-}, Ye = {
+}, Ve = {
   loading: Boolean,
   loadingLabel: String
-}, Je = {
+}, xe = {
   disabled: Boolean
-}, Qe = {
+}, Ne = {
   readonly: Boolean
-}, et = {
+}, Me = {
   modifiers: [String, Array]
-}, tt = {
+}, Be = {
   hintLabel: { type: String, default: "" }
-}, nt = {
+}, ke = {
   count: {
     type: [Boolean, String],
     default: !1,
-    validator: (n) => [!0, !1, "limit", "countdown"].includes(n)
+    validator: (i) => [!0, !1, "limit", "countdown"].includes(i)
   }
-}, rt = {
+}, Le = {
   debounce: [Number, String]
-}, ue = {
+}, oe = {
   LEFT: "left",
   RIGHT: "right"
-}, at = {
+}, $e = {
   icon: { type: [String, Object] },
   iconPosition: {
     type: String,
-    validation: (n) => Object.values(ue).includes(n),
-    default: ue.RIGHT
+    validation: (i) => Object.values(oe).includes(i),
+    default: oe.RIGHT
   }
-}, it = {
+}, Ue = {
   tabindex: { type: [String, Number], default: 0 }
-}, lt = {
+}, We = {
   floating: Boolean
-}, ot = {
+}, Fe = {
   id: [String, Number],
   name: { type: String, required: !0 }
-}, st = {
+}, je = {
   autofocus: Boolean
-}, ut = {
+}, qe = {
   autocomplete: { type: String, default: "off" }
-}, ct = {
-  ...ot,
-  ...st,
-  ...ut,
-  ...it,
-  ...Je,
-  ...Qe,
-  ...Ze,
-  ...Ge,
-  ...tt,
-  ...Ye,
-  ...et,
-  ...nt,
-  ...rt,
-  ...at,
-  ...lt,
+}, Xe = {
+  ...Fe,
+  ...je,
+  ...qe,
+  ...Ue,
+  ...xe,
+  ...Ne,
+  ...He,
+  ...Oe,
+  ...Be,
+  ...Ve,
+  ...Me,
+  ...ke,
+  ...Le,
+  ...$e,
+  ...We,
   minlength: Number,
   maxlength: Number,
   placeholder: String,
   required: Boolean,
   label: String
-}, a = {
+}, t = {
   TEXT: "text",
   PASSWORD: "password",
   NUMBER: "number",
@@ -342,20 +239,20 @@ const ze = "ds", Xe = {
   DATETIME_LOCAL: "datetime-local",
   MONTH: "month",
   WEEK: "week"
-}, I = {
+}, w = {
   PASSWORD_SHOW: "eye-on",
   PASSWORD_HIDE: "eye-off",
   DATE: "calendar",
   TIME: "time",
   COLOR: "color",
   SEARCH: "close"
-}, dt = ["update:modelValue", "focus", "blur", "keyup"], pt = {
-  ...ct,
+}, ze = ["update:modelValue", "focus", "blur", "keyup"], Ke = {
+  ...Xe,
   modelValue: [String, Number],
   type: {
     type: String,
-    default: a.TEXT,
-    validator: (n) => Object.values(a).includes(n)
+    default: t.TEXT,
+    validator: (i) => Object.values(t).includes(i)
   },
   min: [Number, Date, String],
   max: [Number, Date, String],
@@ -364,15 +261,15 @@ const ze = "ds", Xe = {
   multiple: Boolean,
   iconShowPassword: {
     type: String,
-    default: I.PASSWORD_SHOW
+    default: w.PASSWORD_SHOW
   },
   iconHidePassword: {
     type: String,
-    default: I.PASSWORD_HIDE
+    default: w.PASSWORD_HIDE
   },
   iconClear: {
     type: String,
-    default: I.SEARCH
+    default: w.SEARCH
   },
   labelStepUp: {
     type: String,
@@ -394,9 +291,9 @@ const ze = "ds", Xe = {
     type: String,
     default: "Clear"
   }
-}, ce = H({
+}, ne = defineComponent({
   components: {
-    VvIcon: A
+    VvIcon: E
   },
   props: {
     disabled: {
@@ -413,33 +310,33 @@ const ze = "ds", Xe = {
     },
     iconShow: {
       type: String,
-      default: I.PASSWORD_SHOW
+      default: w.PASSWORD_SHOW
     },
     iconHide: {
       type: String,
-      default: I.PASSWORD_HIDE
+      default: w.PASSWORD_HIDE
     }
   },
   emits: ["toggle-password"],
-  setup(n, { emit: t }) {
-    const e = $(!1), i = s(
-      () => e.value ? n.iconHide : n.iconShow
+  setup(i, { emit: o }) {
+    const e = ref(!1), c = computed(
+      () => e.value ? i.iconHide : i.iconShow
     );
-    function r(p) {
-      p == null || p.stopPropagation(), n.disabled || (e.value = !e.value, t("toggle-password", e.value));
+    function l(m) {
+      m == null || m.stopPropagation(), i.disabled || (e.value = !e.value, o("toggle-password", e.value));
     }
     return {
       active: e,
-      activeIcon: i,
-      onClick: r
+      activeIcon: c,
+      onClick: l
     };
   },
   render() {
-    const n = g(A, {
+    const i = h(E, {
       name: this.activeIcon,
       class: "vv-input-text__action-icon"
     });
-    return g(
+    return h(
       "button",
       {
         disabled: this.disabled,
@@ -448,12 +345,12 @@ const ze = "ds", Xe = {
         type: "button",
         onClick: this.onClick
       },
-      n
+      i
     );
   }
-}), Z = H({
+}), q = defineComponent({
   components: {
-    VvIcon: A
+    VvIcon: E
   },
   props: {
     disabled: {
@@ -465,22 +362,22 @@ const ze = "ds", Xe = {
     },
     mode: {
       type: String,
-      validator: (n) => ["up", "down"].includes(n),
+      validator: (i) => ["up", "down"].includes(i),
       default: "up"
     }
   },
   emits: ["step-up", "step-down"],
-  setup(n, { emit: t }) {
-    const e = s(() => n.mode === "up");
+  setup(i, { emit: o }) {
+    const e = computed(() => i.mode === "up");
     return {
       isUp: e,
-      onClick: (r) => {
-        r == null || r.stopPropagation(), n.disabled || t(e.value ? "step-up" : "step-down");
+      onClick: (l) => {
+        l == null || l.stopPropagation(), i.disabled || o(e.value ? "step-up" : "step-down");
       }
     };
   },
   render() {
-    return g("button", {
+    return h("button", {
       class: [
         "vv-input-text__action-chevron",
         this.isUp && "vv-input-text__action-chevron-up"
@@ -490,9 +387,9 @@ const ze = "ds", Xe = {
       onClick: this.onClick
     });
   }
-}), de = H({
+}), ie = defineComponent({
   components: {
-    VvIcon: A
+    VvIcon: E
   },
   props: {
     disabled: {
@@ -509,20 +406,20 @@ const ze = "ds", Xe = {
     }
   },
   emits: ["clear"],
-  setup(n, { emit: t }) {
-    function e(i) {
-      i == null || i.stopPropagation(), n.disabled || t("clear");
+  setup(i, { emit: o }) {
+    function e(c) {
+      c == null || c.stopPropagation(), i.disabled || o("clear");
     }
     return {
       onClick: e
     };
   },
   render() {
-    const n = g(A, {
+    const i = h(E, {
       name: this.icon,
       class: "vv-input-text__action-icon"
     });
-    return g(
+    return h(
       "button",
       {
         disabled: this.disabled,
@@ -531,51 +428,51 @@ const ze = "ds", Xe = {
         type: "button",
         onClick: this.onClick
       },
-      n
+      i
     );
   }
 });
-function G(n, t) {
+function X(i, o) {
   return {
     name: "VvInputTextActions",
     components: {
-      VvIcon: A,
-      VvInputPasswordAction: ce,
-      VvInputStepAction: Z,
-      VvInputClearAction: de
+      VvIcon: E,
+      VvInputPasswordAction: ne,
+      VvInputStepAction: q,
+      VvInputClearAction: ie
     },
     setup() {
       return {
-        isDisabled: s(() => 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: computed(() => o.disabled || o.readonly),
+        labelStepUp: o.labelStepUp,
+        labelStepDown: o.labelStepDown,
+        labelShowPassword: o.labelShowPassword,
+        labelHidePassword: o.labelHidePassword,
+        labelClear: o.labelClear,
+        iconShowPassword: o.iconShowPassword,
+        iconHidePassword: o.iconHidePassword
       };
     },
     render() {
       let e = null;
-      switch (n) {
-        case a.SEARCH: {
-          const { onClear: i } = this.$attrs;
+      switch (i) {
+        case t.SEARCH: {
+          const { onClear: c } = this.$attrs;
           e = [
-            g(de, {
+            h(ie, {
               disabled: this.isDisabled,
               label: this.labelShowPassword,
-              onClear: i
+              onClear: c
             })
           ];
           break;
         }
-        case a.PASSWORD: {
-          const { onTogglePassword: i } = this.$attrs;
+        case t.PASSWORD: {
+          const { onTogglePassword: c } = this.$attrs;
           e = [
-            g(ce, {
+            h(ne, {
               disabled: this.isDisabled,
-              onTogglePassword: i,
+              onTogglePassword: c,
               labelShow: this.labelShowPassword,
               labelHide: this.labelHidePassword,
               iconShow: this.iconShowPassword,
@@ -584,189 +481,189 @@ function G(n, t) {
           ];
           break;
         }
-        case a.NUMBER: {
-          const { onStepUp: i, onStepDown: r } = this.$attrs;
+        case t.NUMBER: {
+          const { onStepUp: c, onStepDown: l } = this.$attrs;
           e = [
-            g(Z, {
+            h(q, {
               mode: "up",
-              disabled: this.isDisabled || t.max !== void 0 && t.modelValue === t.max,
+              disabled: this.isDisabled || o.max !== void 0 && o.modelValue === o.max,
               label: this.labelStepUp,
-              onStepUp: i,
-              onStepDown: r
+              onStepUp: c,
+              onStepDown: l
             }),
-            g(Z, {
+            h(q, {
               mode: "down",
-              disabled: this.isDisabled || t.min !== void 0 && t.modelValue === t.min,
+              disabled: this.isDisabled || o.min !== void 0 && o.modelValue === o.min,
               label: this.labelStepDown,
-              onStepUp: i,
-              onStepDown: r
+              onStepUp: c,
+              onStepDown: l
             })
           ];
           break;
         }
       }
-      return Array.isArray(e) ? g("div", { class: "vv-input-text__actions-group" }, e) : e;
+      return Array.isArray(e) ? h("div", { class: "vv-input-text__actions-group" }, e) : e;
     }
   };
 }
-const vt = ["for"], ft = { class: "vv-input-text__wrapper" }, mt = ["id"], St = {
+const Ge = ["for"], Ye = { class: "vv-input-text__wrapper" }, Je = ["id"], Qe = {
   key: 0,
   class: "vv-input-text__limit"
-}, ht = {
+}, Ze = {
   name: "VvInputText"
-}, Et = /* @__PURE__ */ H({
-  ...ht,
-  props: pt,
-  emits: dt,
-  setup(n, { emit: t }) {
-    const e = n, i = De(), r = $(), {
-      icon: p,
+}, nt = /* @__PURE__ */ se({
+  ...Ze,
+  props: Ke,
+  emits: ze,
+  setup(i, { emit: o }) {
+    const e = i, c = useSlots(), l = ref(), {
+      icon: m,
       iconPosition: u,
-      label: w,
-      modelValue: h,
-      count: m,
-      valid: o,
-      invalid: c,
-      loading: b
-    } = Y(e), v = s(() => String(e.id || ke())), S = s(() => `${v.value}-hint`), T = s(
-      () => e.floating && R(e.placeholder) ? " " : e.placeholder
-    ), y = je(h, t, e.debounce), { focused: C } = Fe(r, t), L = Ne(r);
-    pe(L, (d) => {
-      d && e.autofocus && (C.value = !0);
+      label: T,
+      modelValue: g,
+      count: f,
+      valid: n,
+      invalid: s,
+      loading: S
+    } = toRefs(e), d = computed(() => String(e.id || Pe())), v = computed(() => `${d.value}-hint`), I = computed(
+      () => e.floating && isEmpty(e.placeholder) ? " " : e.placeholder
+    ), b = useDebouncedInput(g, o, e.debounce), { focused: P } = useComponentFocus(l, o), _ = useElementVisibility(l);
+    watch(_, (r) => {
+      r && e.autofocus && (P.value = !0);
     });
-    const _ = $(!1), x = s(() => e.type === a.PASSWORD), V = () => {
-      _.value = !_.value;
-    }, D = s(
-      () => e.type === a.TIME || e.type === a.DATETIME_LOCAL || e.type === a.DATE || e.type === a.WEEK || e.type === a.MONTH
-    ), fe = s(() => e.type === a.NUMBER), J = () => {
-      F.value && (r.value.stepUp(), y.value = l(r).value);
-    }, Q = () => {
-      F.value && (r.value.stepDown(), y.value = l(r).value);
-    }, me = s(() => e.type === a.SEARCH), ee = () => {
-      y.value = void 0;
-    }, { hasIconLeft: te, hasIconRight: U, hasIcon: ne } = We(
-      p,
+    const C = ref(!1), H = computed(() => e.type === t.PASSWORD), O = () => {
+      C.value = !C.value;
+    }, A = computed(
+      () => e.type === t.TIME || e.type === t.DATETIME_LOCAL || e.type === t.DATE || e.type === t.WEEK || e.type === t.MONTH
+    ), ae = computed(() => e.type === t.NUMBER), z = () => {
+      L.value && (l.value.stepUp(), b.value = unref(l).value);
+    }, K = () => {
+      L.value && (l.value.stepDown(), b.value = unref(l).value);
+    }, le = computed(() => e.type === t.SEARCH), G = () => {
+      b.value = void 0;
+    }, { hasIconLeft: Y, hasIconRight: B, hasIcon: J } = useComponentIcon(
+      m,
       u
-    ), W = s(() => {
+    ), k = computed(() => {
       switch (e.type) {
-        case a.COLOR:
-          return { name: I.COLOR };
-        case a.DATE:
-        case a.DATETIME_LOCAL:
-        case a.WEEK:
-        case a.MONTH:
-          return { name: I.DATE };
-        case a.TIME:
-          return { name: I.TIME };
+        case t.COLOR:
+          return { name: w.COLOR };
+        case t.DATE:
+        case t.DATETIME_LOCAL:
+        case t.WEEK:
+        case t.MONTH:
+          return { name: w.DATE };
+        case t.TIME:
+          return { name: w.TIME };
         default:
           return "";
       }
-    }), { formatted: Se } = qe(y, {
+    }), { formatted: re } = useTextCount(b, {
       mode: e.count,
       upperLimit: e.maxlength,
       lowerLimit: e.minlength
-    }), F = s(() => !e.disabled && !e.readonly), he = s(
-      () => F.value ? e.tabindex : -1
-    ), re = s(() => !R(h)), ge = s(() => {
-      if (c.value === !0)
+    }), L = computed(() => !e.disabled && !e.readonly), ue = computed(
+      () => L.value ? e.tabindex : -1
+    ), Q = computed(() => !isEmpty(g)), ce = computed(() => {
+      if (s.value === !0)
         return !0;
-      if (o.value === !0)
+      if (n.value === !0)
         return !1;
-    }), { bemCssClasses: be } = ve("vv-input-text", {
+    }), { bemCssClasses: de } = useBemModifiers("vv-input-text", {
       modifiers: e.modifiers,
-      valid: o,
-      invalid: c,
-      loading: b,
+      valid: n,
+      invalid: s,
+      loading: S,
       disabled: e.disabled,
       readonly: e.readonly,
-      iconLeft: te,
-      iconRight: U.value || !R(W),
-      floating: e.floating && !R(e.label),
-      dirty: re,
-      focus: C
-    }), ye = s(() => {
-      const d = (() => x.value && _.value || D.value && !re.value && !C.value ? a.TEXT : e.type)(), f = {
-        type: d,
+      iconLeft: Y,
+      iconRight: B.value || !isEmpty(k),
+      floating: e.floating && !isEmpty(e.label),
+      dirty: Q,
+      focus: P
+    }), pe = computed(() => {
+      const r = (() => H.value && C.value || A.value && !Q.value && !P.value ? t.TEXT : e.type)(), p = {
+        type: r,
         name: e.name,
-        tabindex: he.value,
+        tabindex: ue.value,
         disabled: e.disabled,
         readonly: e.readonly,
         required: e.required,
         autocomplete: e.autocomplete,
-        "aria-invalid": ge.value,
-        "aria-describedby": !ae.value && Ee.value ? S.value : void 0,
-        "aria-errormessage": ae.value ? S.value : void 0
+        "aria-invalid": ce.value,
+        "aria-describedby": !Z.value && ve.value ? v.value : void 0,
+        "aria-errormessage": Z.value ? v.value : void 0
       };
-      return (d === a.DATE || d === a.MONTH || d === a.WEEK || d === a.TIME || d === a.DATETIME_LOCAL || d === a.NUMBER) && (f.step = e.step, f.max = String(e.max), f.min = String(e.min)), (d === a.TEXT || d === a.SEARCH || d === a.URL || d === a.TEL || d === a.EMAIL || d === a.PASSWORD || d === a.NUMBER) && (f.placeholder = T.value), (d === a.TEXT || d === a.SEARCH || d === a.URL || d === a.TEL || d === a.EMAIL || d === a.PASSWORD) && (f.minlength = e.minlength, f.maxlength = e.maxlength, f.pattern = e.pattern), d === a.EMAIL && (f.multiple = e.multiple), f;
-    }), j = s(() => ({
+      return (r === t.DATE || r === t.MONTH || r === t.WEEK || r === t.TIME || r === t.DATETIME_LOCAL || r === t.NUMBER) && (p.step = e.step, p.max = String(e.max), p.min = String(e.min)), (r === t.TEXT || r === t.SEARCH || r === t.URL || r === t.TEL || r === t.EMAIL || r === t.PASSWORD || r === t.NUMBER) && (p.placeholder = I.value), (r === t.TEXT || r === t.SEARCH || r === t.URL || r === t.TEL || r === t.EMAIL || r === t.PASSWORD) && (p.minlength = e.minlength, p.maxlength = e.maxlength, p.pattern = e.pattern), r === t.EMAIL && (p.multiple = e.multiple), p;
+    }), $ = computed(() => ({
       valid: e.valid,
       invalid: e.invalid,
       modelValue: e.modelValue,
-      togglePassword: V,
-      stepUp: J,
-      stepDown: Q,
-      clear: ee
-    })), { HintSlot: we, hasHint: Ee, hasInvalid: ae } = Ue(e, i), Ie = G(
-      a.PASSWORD,
+      togglePassword: O,
+      stepUp: z,
+      stepDown: K,
+      clear: G
+    })), { HintSlot: me, hasHint: ve, hasInvalid: Z } = De(e, c), fe = X(
+      t.PASSWORD,
       e
-    ), Ae = G(
-      a.NUMBER,
+    ), Se = X(
+      t.NUMBER,
       e
-    ), Te = G(
-      a.SEARCH,
+    ), he = X(
+      t.SEARCH,
       e
     );
-    return (d, f) => (E(), z("div", {
-      class: Pe(l(be))
+    return (r, p) => (y(), W("div", {
+      class: be(a(de))
     }, [
-      l(w) ? (E(), z("label", {
+      a(T) ? (y(), W("label", {
         key: 0,
-        for: l(v),
+        for: a(d),
         class: "vv-input-text__label"
-      }, ie(l(w)), 9, vt)) : O("", !0),
-      le("div", ft, [
-        X(d.$slots, "before", N(K(l(j))), () => [
-          l(te) ? (E(), P(A, B({
+      }, ee(a(T)), 9, Ge)) : R("", !0),
+      te("div", Ye, [
+        F(r.$slots, "before", V(j(a($))), () => [
+          a(Y) ? (y(), D(E, M({
             key: 0,
             class: "vv-input-text__icon-left"
-          }, l(ne)), null, 16)) : O("", !0)
+          }, a(J)), null, 16)) : R("", !0)
         ]),
-        _e(le("input", B({
-          id: l(v),
+        ge(te("input", M({
+          id: a(d),
           ref_key: "input",
-          ref: r,
-          "onUpdate:modelValue": f[0] || (f[0] = (q) => Oe(y) ? y.value = q : null)
-        }, l(ye), {
-          onKeyup: f[1] || (f[1] = (q) => t("keyup", q))
-        }), null, 16, mt), [
-          [Re, l(y)]
+          ref: l,
+          "onUpdate:modelValue": p[0] || (p[0] = (U) => ye(b) ? b.value = U : null)
+        }, a(pe), {
+          onKeyup: p[1] || (p[1] = (U) => o("keyup", U))
+        }), null, 16, Je), [
+          [we, a(b)]
         ]),
-        X(d.$slots, "after", N(K(l(j))), () => [
-          l(U) || l(W) ? (E(), P(A, N(B({ key: 0 }, l(U) ? l(ne) : l(W))), null, 16)) : l(x) ? (E(), P(l(Ie), {
+        F(r.$slots, "after", V(j(a($))), () => [
+          a(B) || a(k) ? (y(), D(E, V(M({ key: 0 }, a(B) ? a(J) : a(k))), null, 16)) : a(H) ? (y(), D(a(fe), {
             key: 1,
-            onTogglePassword: V
-          })) : l(fe) ? (E(), P(l(Ae), {
+            onTogglePassword: O
+          })) : a(ae) ? (y(), D(a(Se), {
             key: 2,
-            onStepUp: J,
-            onStepDown: Q
-          })) : l(me) ? (E(), P(l(Te), {
+            onStepUp: z,
+            onStepDown: K
+          })) : a(le) ? (y(), D(a(he), {
             key: 3,
-            onClear: ee
-          })) : O("", !0)
+            onClear: G
+          })) : R("", !0)
         ]),
-        l(m) ? (E(), z("span", St, [
-          X(d.$slots, "count", N(K(l(j))), () => [
-            He(ie(l(Se)), 1)
+        a(f) ? (y(), W("span", Qe, [
+          F(r.$slots, "count", V(j(a($))), () => [
+            Ee(ee(a(re)), 1)
           ])
-        ])) : O("", !0)
+        ])) : R("", !0)
       ]),
-      Le(l(we), {
-        id: l(S),
+      Ie(a(me), {
+        id: a(v),
         class: "vv-input-text__hint"
       }, null, 8, ["id"])
     ], 2));
   }
 });
 export {
-  Et as default
+  nt as default
 };