@volverjs/ui-vue 0.0.3-beta.4 → 0.0.4

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

@@ -1,37 +1,61 @@
-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;
+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 De(i, o) {
+function Xe(e, t) {
   const {
-    invalid: e,
-    valid: c,
-    hint: l,
-    loading: m
-  } = o, {
-    hintLabel: u,
-    modelValue: T,
-    valid: g,
-    validLabel: f,
     invalid: n,
-    invalidLabel: s,
+    valid: a,
+    hint: o,
+    loading: p
+  } = t, {
+    hintLabel: d,
+    modelValue: A,
+    valid: w,
+    validLabel: m,
+    invalid: i,
+    invalidLabel: u,
     ...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
+  } = 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: I,
-    hasHint: b,
-    hasValid: P,
-    hasLoading: _,
+    hasInvalid: E,
+    hasHint: N,
+    hasValid: h,
+    hasLoading: C,
     HintSlot: {
       name: "HintSlot",
       props: {
@@ -40,34 +64,34 @@ function De(i, o) {
           default: () => ({})
         }
       },
-      setup(H) {
-        const O = computed(() => {
-          const A = toReactive({
-            hintLabel: u,
-            modelValue: T,
-            valid: g,
-            validLabel: f,
-            invalid: n,
-            invalidLabel: s,
-            loading: d,
-            loadingLabel: v,
-            ...H.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 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 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: C,
-          hasInvalid: I,
-          hasValid: P,
-          hintContent: O
+          isVisible: W,
+          hasInvalid: E,
+          hasValid: h,
+          hintContent: V
         };
       },
       render() {
         if (this.isVisible)
-          return h(
+          return y(
             "small",
             {
-              role: this.hasInvalid || this.hasValid ? "alert" : void 0
+              role: this.hasInvalid ? "alert" : this.hasValid ? "status" : void 0
             },
             this.hintContent
           );
@@ -75,157 +99,383 @@ function De(i, o) {
     }
   };
 }
-const Ce = "ds", Re = {
+const Ye = {
+  /**
+   * Color
+   */
   color: String,
+  /**
+   * Width
+   */
   width: {
     type: [String, Number]
   },
+  /**
+   * Height
+   */
   height: {
     type: [String, Number]
   },
+  /**
+   * Icon name
+   * Can be the full composition of iconify name "@{provider}:{prefix}:{name}" or "{prefix}:{name}" or "{name}"
+   * https://docs.iconify.design/api/providers.html#provider-in-icon-name
+   */
   name: {
     type: String,
     required: !0
   },
+  /**
+   * By default 'vv'
+   * If custom collection is not added with "addCollection" DS class method, this prop could not be used
+   * Icon provider: https://docs.iconify.design/api/providers.html#provider-in-icon-name
+   */
   provider: {
     type: String
   },
+  /**
+   * The name of icon set.
+   * Icon default options prefix: simple | normal | detailed
+   */
   prefix: {
     type: String,
     default: "normal"
   },
+  /**
+   * Url remote SVG icon
+   */
   src: String,
+  /**
+   * Horizontal flip
+   */
   horizontalFlip: Boolean,
+  /**
+   * Vertical flip
+   */
   verticalFlip: Boolean,
+  /**
+   * String alternative to "horizontalFlip" and "verticalFlip".
+   * Example: https://docs.iconify.design/icon-components/vue/transform.html
+   */
   flip: String,
+  /**
+   * Icon render mode
+   * 'style' = 'bg' or 'mask', depending on icon content
+   * 'bg' = span with style using `background`
+   * 'mask' = span with style using `mask`
+   * 'svg' = svg
+   * Iconify doc: https://docs.iconify.design/iconify-icon/modes.html
+   */
   mode: String,
+  /**
+   * Toggles inline or block mode
+   * Example https://docs.iconify.design/icon-components/vue/inline.html
+   */
   inline: Boolean,
+  /**
+   * rotates icon
+   * Example https://docs.iconify.design/icon-components/vue/transform.html
+   */
   rotate: [Number, String],
+  /**
+   * A callback that is called when icon data has been loaded
+   */
   onLoad: Function,
+  /**
+   * SVG icon string
+   */
   svg: String,
+  /**
+   * Icon modifiers: vv-icon css helper classes, value/s are concatened with prefix 'vv-icon--'
+   * @values string | Array<string>
+   */
   modifiers: {
     type: [String, Array]
   }
-}, _e = {
+};
+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"
-}, 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;
+}, _ = /* @__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;
     });
-    function g(n) {
-      let s = null;
+    function w(i) {
+      let u = null;
       if (typeof window > "u") {
-        const { JSDOM: I } = require("jsdom");
-        s = new I().window;
+        const { JSDOM: E } = require("jsdom");
+        u = new E().window;
       }
-      return (s ? new s.DOMParser() : new window.DOMParser()).parseFromString(n, "text/html").querySelector("svg");
+      return (u ? new u.DOMParser() : new window.DOMParser()).parseFromString(i, "text/html").querySelector("svg");
     }
-    function f(n) {
-      const s = g(n), S = (s == null ? void 0 : s.innerHTML.trim()) || "";
-      s && S && Ae(`@${u.value}:${o.prefix}:${o.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,
-        height: s.viewBox.baseVal.height,
-        width: s.viewBox.baseVal.width
+        // Set height and width from svg content
+        height: u.viewBox.baseVal.height,
+        width: u.viewBox.baseVal.width
       });
     }
-    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({
+    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: a(m)
+      class: s(p)
     }, {
-      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);
+      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);
+  }
+}), 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"
   }
-}), He = {
+}, et = {
+  /**
+   * Valid status
+   */
   valid: Boolean,
+  /**
+   * Valid label
+   */
   validLabel: [String, Array]
-}, Oe = {
+}, tt = {
+  /**
+   * Invalid status
+   */
   invalid: Boolean,
+  /**
+   * Invalid label
+   */
   invalidLabel: [String, Array]
-}, Ve = {
+}, nt = {
+  /**
+   * Loading status
+   */
   loading: Boolean,
-  loadingLabel: String
-}, xe = {
+  /**
+   * Loading label
+   */
+  loadingLabel: {
+    type: String,
+    default: "Loading..."
+  }
+}, Se = {
+  /**
+   * Whether the form control is disabled
+   */
   disabled: Boolean
-}, Ne = {
+}, 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
-}, Me = {
+}, ot = {
+  /**
+   * Component BEM modifiers
+   */
   modifiers: [String, Array]
-}, Be = {
+}, st = {
   hintLabel: { type: String, default: "" }
-}, ke = {
+}, it = {
+  /**
+   * Show character limit
+   */
   count: {
     type: [Boolean, String],
     default: !1,
-    validator: (i) => [!0, !1, "limit", "countdown"].includes(i)
+    validator: (e) => [!0, !1, "limit", "countdown"].includes(e)
   }
-}, Le = {
+}, ut = {
+  /**
+   * Milliseconds to wait before emitting the input event
+   */
   debounce: [Number, String]
-}, oe = {
-  LEFT: "left",
-  RIGHT: "right"
-}, $e = {
+}, ct = {
+  /**
+   * VvIcon name or props
+   * @see VVIcon
+   */
   icon: { type: [String, Object] },
+  /**
+   * VvIcon position
+   */
   iconPosition: {
     type: String,
-    validation: (i) => Object.values(oe).includes(i),
-    default: oe.RIGHT
+    default: x.before,
+    validation: (e) => Object.values(x).includes(e)
   }
-}, Ue = {
+}, dt = {
+  /**
+   * Global attribute tabindex
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
+   */
   tabindex: { type: [String, Number], default: 0 }
-}, We = {
+}, pt = {
+  /**
+   * If true the label will be floating
+   */
   floating: Boolean
-}, Fe = {
-  id: [String, Number],
+}, vt = {
+  /**
+   * Global attribute id
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
+   */
+  id: [String, Number]
+};
+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 }
-}, je = {
+}, mt = {
+  /**
+   * Global attribute autofocus
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
+   */
   autofocus: Boolean
-}, qe = {
+}, bt = {
+  /**
+   * Global attribute autocomplete
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
+   */
   autocomplete: { type: String, default: "off" }
-}, Xe = {
-  ...Fe,
-  ...je,
-  ...qe,
-  ...Ue,
-  ...xe,
-  ...Ne,
-  ...He,
-  ...Oe,
-  ...Be,
-  ...Ve,
-  ...Me,
-  ...ke,
-  ...Le,
-  ...$e,
-  ...We,
+}, 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
+   * 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,
+  /**
+   * 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,
+  /**
+   * Input / Textarea placeholder
+   * Text that appears in the form control when it has no value set
+   * Available for input types: text, search, url, tel, email, password, number
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder
+   */
   placeholder: String,
-  required: Boolean,
-  label: String
-}, t = {
+  /**
+   * Input / Textarea required
+   * A value is required or must be check for the form to be submittable
+   * Available for all input types except color
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#required
+   */
+  required: Boolean
+};
+({
+  ...Se,
+  ...he,
+  ...rt,
+  ...at,
+  ...Ze,
+  /**
+   * Button type
+   */
+  type: te.button
+});
+const r = {
   TEXT: "text",
   PASSWORD: "password",
   NUMBER: "number",
@@ -239,61 +489,121 @@ const Ce = "ds", Re = {
   DATETIME_LOCAL: "datetime-local",
   MONTH: "month",
   WEEK: "week"
-}, w = {
+}, I = {
   PASSWORD_SHOW: "eye-on",
   PASSWORD_HIDE: "eye-off",
   DATE: "calendar",
   TIME: "time",
   COLOR: "color",
   SEARCH: "close"
-}, ze = ["update:modelValue", "focus", "blur", "keyup"], Ke = {
-  ...Xe,
+}, ht = ["update:modelValue", "focus", "blur", "keyup"], gt = {
+  ...St,
+  /**
+   * Input value
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
+   */
   modelValue: [String, Number],
+  /**
+   * Type of form control
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#type
+   */
   type: {
     type: String,
-    default: t.TEXT,
-    validator: (i) => Object.values(t).includes(i)
+    default: r.TEXT,
+    validator: (e) => Object.values(r).includes(e)
   },
+  /**
+   * Minimum value
+   * Available for input types: date, month, week, time, datetime-local, number, range.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min
+   */
   min: [Number, Date, String],
+  /**
+   * Maximum value
+   * Available for input types: date, month, week, time, datetime-local, number, range.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max
+   */
   max: [Number, Date, String],
+  /**
+   * Incremental values that are valid
+   * Available for input types: date, month, week, time, datetime-local and number
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step
+   */
   step: { type: [String, Number], default: 1 },
+  /**
+   * Pattern the value must match to be valid
+   * Available for input types: text, search, url, tel, email and password
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern
+   */
   pattern: String,
+  /**
+   * Whether to allow multiple values
+   * Available for input type email
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#multiple
+   */
   multiple: Boolean,
+  /**
+   * VvIcon name for show password button
+   * @see VVIcon
+   */
   iconShowPassword: {
     type: String,
-    default: w.PASSWORD_SHOW
+    default: I.PASSWORD_SHOW
   },
+  /**
+   * VvIcon name for hide password button
+   * @see VVIcon
+   */
   iconHidePassword: {
     type: String,
-    default: w.PASSWORD_HIDE
+    default: I.PASSWORD_HIDE
   },
+  /**
+   * VvIcon name for clear button
+   * @see VVIcon
+   */
   iconClear: {
     type: String,
-    default: w.SEARCH
+    default: I.SEARCH
   },
+  /**
+   * Label for step up button
+   */
   labelStepUp: {
     type: String,
     default: "Increase value"
   },
+  /**
+   * Label for step down button
+   */
   labelStepDown: {
     type: String,
     default: "Decrease value"
   },
+  /**
+   * Label for show password button
+   */
   labelShowPassword: {
     type: String,
     default: "Show password"
   },
+  /**
+   * Label for hide password button
+   */
   labelHidePassword: {
     type: String,
     default: "Hide password"
   },
+  /**
+   * Label for clear button
+   */
   labelClear: {
     type: String,
     default: "Clear"
   }
-}, ne = defineComponent({
+}, de = L({
   components: {
-    VvIcon: E
+    VvIcon: _
   },
   props: {
     disabled: {
@@ -310,33 +620,33 @@ const Ce = "ds", Re = {
     },
     iconShow: {
       type: String,
-      default: w.PASSWORD_SHOW
+      default: I.PASSWORD_SHOW
     },
     iconHide: {
       type: String,
-      default: w.PASSWORD_HIDE
+      default: I.PASSWORD_HIDE
     }
   },
   emits: ["toggle-password"],
-  setup(i, { emit: o }) {
-    const e = ref(!1), c = computed(
-      () => e.value ? i.iconHide : i.iconShow
+  setup(e, { emit: t }) {
+    const n = j(!1), a = l(
+      () => n.value ? e.iconHide : e.iconShow
     );
-    function l(m) {
-      m == null || m.stopPropagation(), i.disabled || (e.value = !e.value, o("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: c,
-      onClick: l
+      active: n,
+      activeIcon: a,
+      onClick: o
     };
   },
   render() {
-    const i = h(E, {
+    const e = y(_, {
       name: this.activeIcon,
       class: "vv-input-text__action-icon"
     });
-    return h(
+    return y(
       "button",
       {
         disabled: this.disabled,
@@ -345,12 +655,12 @@ const Ce = "ds", Re = {
         type: "button",
         onClick: this.onClick
       },
-      i
+      e
     );
   }
-}), q = defineComponent({
+}), Z = L({
   components: {
-    VvIcon: E
+    VvIcon: _
   },
   props: {
     disabled: {
@@ -362,22 +672,22 @@ const Ce = "ds", Re = {
     },
     mode: {
       type: String,
-      validator: (i) => ["up", "down"].includes(i),
+      validator: (e) => ["up", "down"].includes(e),
       default: "up"
     }
   },
   emits: ["step-up", "step-down"],
-  setup(i, { emit: o }) {
-    const e = computed(() => i.mode === "up");
+  setup(e, { emit: t }) {
+    const n = l(() => e.mode === "up");
     return {
-      isUp: e,
-      onClick: (l) => {
-        l == null || l.stopPropagation(), i.disabled || o(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"
@@ -387,9 +697,9 @@ const Ce = "ds", Re = {
       onClick: this.onClick
     });
   }
-}), ie = defineComponent({
+}), pe = L({
   components: {
-    VvIcon: E
+    VvIcon: _
   },
   props: {
     disabled: {
@@ -406,20 +716,20 @@ const Ce = "ds", Re = {
     }
   },
   emits: ["clear"],
-  setup(i, { emit: o }) {
-    function e(c) {
-      c == null || c.stopPropagation(), i.disabled || o("clear");
+  setup(e, { emit: t }) {
+    function n(a) {
+      a == null || a.stopPropagation(), e.disabled || t("clear");
     }
     return {
-      onClick: e
+      onClick: n
     };
   },
   render() {
-    const i = h(E, {
+    const e = y(_, {
       name: this.icon,
       class: "vv-input-text__action-icon"
     });
-    return h(
+    return y(
       "button",
       {
         disabled: this.disabled,
@@ -428,51 +738,51 @@ const Ce = "ds", Re = {
         type: "button",
         onClick: this.onClick
       },
-      i
+      e
     );
   }
 });
-function X(i, o) {
+function ee(e, t) {
   return {
     name: "VvInputTextActions",
     components: {
-      VvIcon: E,
-      VvInputPasswordAction: ne,
-      VvInputStepAction: q,
-      VvInputClearAction: ie
+      VvIcon: _,
+      VvInputPasswordAction: de,
+      VvInputStepAction: Z,
+      VvInputClearAction: pe
     },
     setup() {
       return {
-        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
+        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 (i) {
-        case t.SEARCH: {
-          const { onClear: c } = this.$attrs;
-          e = [
-            h(ie, {
+      let n = null;
+      switch (e) {
+        case r.SEARCH: {
+          const { onClear: a } = this.$attrs;
+          n = [
+            y(pe, {
               disabled: this.isDisabled,
               label: this.labelShowPassword,
-              onClear: c
+              onClear: a
             })
           ];
           break;
         }
-        case t.PASSWORD: {
-          const { onTogglePassword: c } = this.$attrs;
-          e = [
-            h(ne, {
+        case r.PASSWORD: {
+          const { onTogglePassword: a } = this.$attrs;
+          n = [
+            y(de, {
               disabled: this.isDisabled,
-              onTogglePassword: c,
+              onTogglePassword: a,
               labelShow: this.labelShowPassword,
               labelHide: this.labelHidePassword,
               iconShow: this.iconShowPassword,
@@ -481,189 +791,258 @@ function X(i, o) {
           ];
           break;
         }
-        case t.NUMBER: {
-          const { onStepUp: c, onStepDown: l } = this.$attrs;
-          e = [
-            h(q, {
+        case r.NUMBER: {
+          const { onStepUp: a, onStepDown: o } = this.$attrs;
+          n = [
+            y(Z, {
               mode: "up",
-              disabled: this.isDisabled || o.max !== void 0 && o.modelValue === o.max,
+              disabled: this.isDisabled || t.max !== void 0 && t.modelValue === t.max,
               label: this.labelStepUp,
-              onStepUp: c,
-              onStepDown: l
+              onStepUp: a,
+              onStepDown: o
             }),
-            h(q, {
+            y(Z, {
               mode: "down",
-              disabled: this.isDisabled || o.min !== void 0 && o.modelValue === o.min,
+              disabled: this.isDisabled || t.min !== void 0 && t.modelValue === t.min,
               label: this.labelStepDown,
-              onStepUp: c,
-              onStepDown: l
+              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 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
   };
 }
-const Ge = ["for"], Ye = { class: "vv-input-text__wrapper" }, Je = ["id"], Qe = {
+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" }, Ct = ["id"], Pt = {
+  key: 1,
+  class: "vv-input-text__input-after"
+}, Bt = {
+  key: 2,
   class: "vv-input-text__limit"
-}, Ze = {
+}, Ht = {
   name: "VvInputText"
-}, nt = /* @__PURE__ */ se({
-  ...Ze,
-  props: Ke,
-  emits: ze,
-  setup(i, { emit: o }) {
-    const e = i, c = useSlots(), l = ref(), {
-      icon: m,
-      iconPosition: u,
-      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);
+}, 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 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
-    ), k = computed(() => {
-      switch (e.type) {
-        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 };
+    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: re } = useTextCount(b, {
-      mode: e.count,
-      upperLimit: e.maxlength,
-      lowerLimit: e.minlength
-    }), L = computed(() => !e.disabled && !e.readonly), ue = computed(
-      () => L.value ? e.tabindex : -1
-    ), Q = computed(() => !isEmpty(g)), ce = computed(() => {
-      if (s.value === !0)
+    }), { 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 (n.value === !0)
+      if (u.value === !0)
         return !1;
-    }), { bemCssClasses: de } = useBemModifiers("vv-input-text", {
-      modifiers: e.modifiers,
-      valid: n,
-      invalid: s,
-      loading: S,
-      disabled: e.disabled,
-      readonly: e.readonly,
-      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: ue.value,
-        disabled: e.disabled,
-        readonly: e.readonly,
-        required: e.required,
-        autocomplete: e.autocomplete,
-        "aria-invalid": ce.value,
-        "aria-describedby": !Z.value && ve.value ? v.value : void 0,
-        "aria-errormessage": Z.value ? v.value : void 0
+    }), { modifiers: Ae } = U(n), De = be(
+      "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
+      }))
+    ), 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 === 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: O,
-      stepUp: z,
-      stepDown: K,
-      clear: G
-    })), { HintSlot: me, hasHint: ve, hasInvalid: Z } = De(e, c), fe = X(
-      t.PASSWORD,
-      e
-    ), Se = X(
-      t.NUMBER,
-      e
-    ), he = X(
-      t.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) => (y(), W("div", {
-      class: be(a(de))
+    return (c, f) => (g(), H("div", {
+      class: Le(s(De))
     }, [
-      a(T) ? (y(), W("label", {
+      s(w) ? (g(), H("label", {
         key: 0,
-        for: a(d),
+        for: s(b),
         class: "vv-input-text__label"
-      }, ee(a(T)), 9, Ge)) : R("", !0),
-      te("div", Ye, [
-        F(r.$slots, "before", V(j(a($))), () => [
-          a(Y) ? (y(), D(E, M({
+      }, 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-left"
-          }, a(J)), null, 16)) : R("", !0)
-        ]),
-        ge(te("input", M({
-          id: a(d),
-          ref_key: "input",
-          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)]
-        ]),
-        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), {
+            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(_, $({
             key: 1,
-            onTogglePassword: O
-          })) : a(ae) ? (y(), D(a(Se), {
+            class: "vv-input-text__icon vv-input-text__icon-after"
+          }, s(F) ? s(le) : s(q)), null, 16)) : s(V) ? (g(), P(s(Pe), {
             key: 2,
-            onStepUp: z,
-            onStepDown: K
-          })) : a(le) ? (y(), D(a(he), {
+            onTogglePassword: D
+          })) : s(ye) ? (g(), P(s(Be), {
             key: 3,
-            onClear: G
-          })) : R("", !0)
+            onStepUp: ne,
+            onStepDown: ae
+          })) : s(we) ? (g(), P(s(He), {
+            key: 4,
+            onClear: re
+          })) : O("", !0)
         ]),
-        a(f) ? (y(), W("span", Qe, [
-          F(r.$slots, "count", V(j(a($))), () => [
-            Ee(ee(a(re)), 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)
           ])
-        ])) : R("", !0)
+        ])) : O("", !0)
       ]),
-      Ie(a(me), {
-        id: a(v),
+      $e(s(Te), {
+        id: s(E),
         class: "vv-input-text__hint"
       }, null, 8, ["id"])
     ], 2));
   }
 });
 export {
-  nt as default
+  Vt as default
 };