@volverjs/ui-vue 0.0.1-beta.12 → 0.0.1-beta.16

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

@@ -1,145 +1,296 @@
-import { computed as d, unref as i, defineComponent as L, ref as C, toRefs as U, inject as ve, openBlock as O, createBlock as k, mergeProps as $, createCommentVNode as x, h as P, watch as ne, useSlots as ye, useAttrs as ge, onMounted as he, createElementBlock as N, toDisplayString as G, createElementVNode as J, renderSlot as V, normalizeProps as K, createVNode as M, withDirectives as Se, isRef as Ae, vModelDynamic as Ee, guardReactiveProps as be, createTextVNode as Ie } from "vue";
-import { iconExists as j, Icon as Oe, addIcon as Pe } from "@iconify/vue";
-import { toReactive as Te, useFocus as _e, refDebounced as xe, isString as Q } from "@vueuse/core";
-const A = {
-  equals(t, n, e) {
-    return e ? this.resolveFieldData(t, e) === this.resolveFieldData(n, e) : this.deepEquals(t, n);
-  },
-  deepEquals(t, n) {
-    if (t === n)
-      return !0;
-    if (t && n && typeof t == "object" && typeof n == "object") {
-      const e = Array.isArray(t), o = Array.isArray(n);
-      let r, s, a;
-      if (e && o) {
-        if (s = t.length, s != n.length)
-          return !1;
-        for (r = s; r-- !== 0; )
-          if (!this.deepEquals(t[r], n[r]))
-            return !1;
-        return !0;
+import { unref as s, toRefs as K, computed as r, h as S, watch as Te, defineComponent as O, ref as N, inject as Pe, openBlock as w, createBlock as _, mergeProps as A, createCommentVNode as D, useSlots as Ie, onMounted as Ce, createElementBlock as q, normalizeClass as _e, toDisplayString as ie, createElementVNode as se, renderSlot as z, normalizeProps as X, createVNode as re, withDirectives as Ae, isRef as De, vModelDynamic as xe, guardReactiveProps as Oe, createTextVNode as Re } from "vue";
+import { nanoid as He } from "nanoid";
+import { toReactive as Ve, useFocus as ke, isString as ae } from "@vueuse/core";
+import { iconExists as k, Icon as Le, addIcon as Ne } from "@iconify/vue";
+function le(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 o = 0, u = e.length; o < u; ++o) {
+        if (n == null)
+          return null;
+        i = i[e[o]];
       }
-      if (e != o)
-        return !1;
-      const p = t instanceof Date, u = n instanceof Date;
-      if (p != u)
-        return !1;
-      if (p && u)
-        return t.getTime() == n.getTime();
-      const S = t instanceof RegExp, l = n instanceof RegExp;
-      if (S != l)
-        return !1;
-      if (S && l)
-        return t.toString() == n.toString();
-      const c = Object.keys(t);
-      if (s = c.length, s !== Object.keys(n).length)
-        return !1;
-      for (r = s; r-- !== 0; )
-        if (!Object.prototype.hasOwnProperty.call(n, c[r]))
-          return !1;
-      for (r = s; r-- !== 0; )
-        if (a = c[r], !this.deepEquals(t[a], n[a]))
-          return !1;
-      return !0;
+      return i;
     }
-    return t !== t && n !== n;
-  },
-  resolveFieldData(t, n) {
-    if (t && Object.keys(t).length && n) {
-      if (n.indexOf(".") === -1)
-        return t[n];
-      {
-        const e = n.split(".");
-        let o = t;
-        for (let r = 0, s = e.length; r < s; ++r) {
-          if (t == null)
-            return null;
-          o = o[e[r]];
+  } else
+    return null;
+}
+function x(n) {
+  return ((t) => t == null || t === "" || Array.isArray(t) && t.length === 0 || !(t instanceof Date) && typeof t == "object" && Object.keys(t).length === 0)(s(n));
+}
+function $e(n) {
+  return typeof n == "string" || n instanceof String;
+}
+function ue(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 L(n) {
+  return Array.isArray(n) ? n.filter((t) => $e(t)).join(" ") : n;
+}
+function Be(n, t) {
+  const {
+    error: e,
+    valid: i,
+    hint: o,
+    loading: u
+  } = t, {
+    hintLabel: a,
+    modelValue: b,
+    valid: m,
+    validLabel: f,
+    error: c,
+    errorLabel: l,
+    ...h
+  } = K(n), d = le(h, "loading"), v = le(h, "loadingLabel"), y = r(() => c.value ? !!(c.value && e || l != null && l.value && Array.isArray(l.value) && l.value.length > 0 || l != null && l.value && !x(l)) : !1), R = r(
+    () => !!(a && a.value || o)
+  ), C = r(
+    () => !!(f && f.value || i)
+  ), H = r(
+    () => !!(d != null && d.value && u || d != null && d.value && (v != null && v.value))
+  ), $ = r(
+    () => R.value || C || y.value || H.value
+  );
+  return {
+    hasErrors: y,
+    hasHint: R,
+    hasValid: C,
+    hasLoading: H,
+    HintSlot: {
+      name: "HintSlot",
+      props: {
+        params: {
+          type: Object,
+          default: () => ({})
         }
-        return o;
+      },
+      setup(B) {
+        const M = r(() => {
+          const T = Ve({
+            hintLabel: a,
+            modelValue: b,
+            valid: m,
+            validLabel: f,
+            error: c,
+            errorLabel: l,
+            loading: d,
+            loadingLabel: v,
+            ...B.params
+          });
+          return c != null && c.value ? (e == null ? void 0 : e(T)) || L(l == null ? void 0 : l.value) || (a == null ? void 0 : a.value) : m != null && m.value ? (i == null ? void 0 : i(T)) || L(f == null ? void 0 : f.value) || (a == null ? void 0 : a.value) : d != null && d.value ? (u == null ? void 0 : u(T)) || L(v == null ? void 0 : v.value) || (a == null ? void 0 : a.value) : (o == null ? void 0 : o(T)) || L(a == null ? void 0 : a.value) || (a == null ? void 0 : a.value);
+        });
+        return {
+          isVisible: $,
+          hasErrors: y,
+          hasValid: C,
+          hintContent: M
+        };
+      },
+      render() {
+        if (this.isVisible)
+          return S(
+            "small",
+            {
+              role: this.hasErrors || this.hasValid ? "alert" : void 0
+            },
+            this.hintContent
+          );
       }
-    } else
-      return null;
-  },
-  isFunction(t) {
-    return !!(t && t.constructor && t.call && t.apply);
-  },
-  findIndexInList(t, n) {
-    let e = -1;
-    if (n) {
-      for (let o = 0; o < n.length; o++)
-        if (this.equals(n[o], t)) {
-          e = o;
-          break;
-        }
     }
-    return e;
-  },
-  contains(t, n) {
-    if (t != null && n && n.length) {
-      for (const e of n)
-        if (this.equals(t, e))
-          return !0;
+  };
+}
+function Me(n, t, e) {
+  const i = r(
+    () => !!(n.value && t.value === "left" || e.iconLeft)
+  ), o = r(
+    () => !!(n.value && t.value === "right" || e.iconRight)
+  ), u = r(
+    () => !!(n.value && t.value === "top" || e.iconTop)
+  ), a = r(
+    () => !!(n.value && t.value === "bottom" || e.iconBottom)
+  );
+  return {
+    hasIconLeft: i,
+    hasIconRight: o,
+    hasIconTop: u,
+    hasIconBottom: a
+  };
+}
+function Ye(n, t) {
+  const { focused: e } = ke(n);
+  return Te(e, (i) => {
+    t(i ? "focus" : "blur", s(n));
+  }), {
+    focused: e
+  };
+}
+function Ue(n, t, e = 0) {
+  let i;
+  return typeof e == "string" && (e = parseInt(e)), r({
+    get: () => n == null ? void 0 : n.value,
+    set: (o) => {
+      i && clearTimeout(i), i = setTimeout(() => {
+        t("update:modelValue", o);
+      }, e);
     }
-    return !1;
-  },
-  isEmpty(t) {
-    return t == null || t === "" || Array.isArray(t) && t.length === 0 || !(t instanceof Date) && typeof t == "object" && Object.keys(t).length === 0;
-  },
-  isNotEmpty(t) {
-    return !this.isEmpty(t);
-  },
-  pickBy(t, n) {
-    return Object.fromEntries(
-      Object.entries(t).filter(([e]) => n(e))
-    );
+  });
+}
+function Fe(n, t) {
+  const e = r(() => {
+    const u = s(n);
+    return ae(u) ? u.length : 0;
+  }), i = r(() => {
+    const u = s(n) || "";
+    return !ae(u) || t.mode === !1 ? 0 : t.mode === !0 ? u.length : s(t.upperLimit) - u.length;
+  }), o = r(() => t.mode === !1 ? "" : t.mode === !0 && t.upperLimit && t.upperLimit > 0 ? `${i.value}/${s(t.upperLimit)}` : i.value);
+  return {
+    textLength: e,
+    textLimitLength: i,
+    formattedTextLimitLength: o
+  };
+}
+function pe(n, t) {
+  const e = { [`${n}`]: !0 };
+  return {
+    bemCssClasses: r(() => Object.keys(t).reduce((o, u) => {
+      const a = s(t[u]) || !1;
+      if (!a)
+        return o;
+      if (u === "modifiers") {
+        const b = Array.isArray(a) ? a : a.split(" ");
+        return {
+          ...o,
+          ...b.reduce(
+            (m, f) => ({
+              ...m,
+              [`${n}--${ue(f)}`]: !0
+            }),
+            {}
+          )
+        };
+      } else
+        return {
+          ...o,
+          [`${n}--${ue(u)}`]: a
+        };
+    }, e) || {})
+  };
+}
+const We = "ds", je = {
+  color: String,
+  width: {
+    type: [String, Number]
   },
-  removeFromList(t, n) {
-    const e = this.findIndexInList(t, n);
-    return e > -1 ? n.filter((o, r) => r !== e) : n;
+  height: {
+    type: [String, Number]
   },
-  isString(t) {
-    return typeof t == "string" || t instanceof String;
+  name: {
+    type: String,
+    required: !0
   },
-  propsToObject(t) {
-    return Object.keys(t).reduce((n, e) => {
-      var o, r, s, a, p;
-      return this.isFunction(t[e]) ? n[e] = t[e]() : Array.isArray(t[e]) ? n[e] = t[e][0]() : (o = t[e]) != null && o.type && (Array.isArray(t[e].type) ? n[e] = ((r = t[e]) == null ? void 0 : r.default) || ((s = t[e]) == null ? void 0 : s.type[0]()) : n[e] = ((a = t[e]) == null ? void 0 : a.default) || ((p = t[e]) == null ? void 0 : p.type())), n;
-    }, {});
+  provider: {
+    type: String
   },
-  filterArray(t, n, e) {
-    return t.filter((o) => n.some((r) => typeof r == "string" ? o[e] == r : this.equals(
-      o[e],
-      r[e]
-    )));
+  prefix: {
+    type: String,
+    default: "normal"
   },
-  kebabCase(t) {
-    var n, e;
-    if (t)
-      return (e = (n = t.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 : n.join("-")) == null ? void 0 : e.toLowerCase();
+  src: String,
+  horizontalFlip: Boolean,
+  verticalFlip: Boolean,
+  flip: String,
+  mode: String,
+  inline: Boolean,
+  rotate: [Number, String],
+  onLoad: Function,
+  svg: String,
+  modifiers: {
+    type: [String, Array]
   }
-}, De = {
+}, qe = {
+  name: "VvIcon"
+}, E = /* @__PURE__ */ O({
+  ...qe,
+  props: je,
+  setup(n) {
+    const t = n, e = N(!0), { modifiers: i } = K(t), o = Pe(We), { bemCssClasses: u } = pe("vv-icon", {
+      modifiers: i
+    }), a = r(() => t.provider || (o == null ? void 0 : o.provider)), b = r(() => {
+      const c = t.name || "", l = `@${a.value}:${t.prefix}:${t.name}`;
+      return k(c) ? c : k(l) ? l : (o == null ? void 0 : o.iconsCollections.find((h) => {
+        const d = `@${a.value}:${h.prefix}:${c}`;
+        if (k(d))
+          return d;
+      })) || c;
+    });
+    function m(c) {
+      let l = null;
+      if (typeof window > "u") {
+        const { JSDOM: y } = require("jsdom");
+        l = new y().window;
+      }
+      return (l ? new l.DOMParser() : new window.DOMParser()).parseFromString(c, "text/html").querySelector("svg");
+    }
+    function f(c) {
+      const l = m(c), h = (l == null ? void 0 : l.innerHTML.trim()) || "";
+      l && h && Ne(`@${a.value}:${t.prefix}:${t.name}`, {
+        body: h,
+        height: l.viewBox.baseVal.height,
+        width: l.viewBox.baseVal.width
+      });
+    }
+    return o && (t.src && !k(`@${a.value}:${t.prefix}:${t.name}`) ? (e.value = !1, o.fetchIcon(t.src).then((c) => {
+      c && (f(c), e.value = !0);
+    }).catch((c) => {
+      throw new Error(`During fetch icon: ${c == null ? void 0 : c.message}`);
+    })) : t.svg && f(t.svg)), (c, l) => e.value ? (w(), _(s(Le), A({
+      key: 0,
+      class: s(u)
+    }, {
+      ...c.$props,
+      provider: s(a),
+      icon: s(b)
+    }), null, 16, ["class"])) : D("", !0);
+  }
+}), ze = {
   valid: Boolean,
   validLabel: [String, Array]
-}, Ce = {
+}, Xe = {
   error: Boolean,
   errorLabel: [String, Array]
-}, we = {
+}, Ze = {
   loading: Boolean,
   loadingLabel: String
-}, Re = {
+}, Ge = {
   modifiers: [String, Array]
-}, Ne = {
+}, Je = {
   hintLabel: { type: String, default: "" }
-}, Be = {
+}, Ke = {
   limit: {
     type: [Boolean, String],
     default: !1,
-    validator: (t) => [!0, !1, "countdown"].includes(t)
+    validator: (n) => [!0, !1, "countdown"].includes(n)
   }
-}, w = {
+}, Qe = {
+  id: [String, Number],
+  name: { type: String, required: !0 },
+  autocomplete: { type: String, default: "off" },
+  autofocus: Boolean,
+  minlength: Number,
+  maxlength: Number,
+  label: String,
+  placeholder: String,
+  required: Boolean,
+  disabled: Boolean,
+  readonly: Boolean
+}, P = {
   TEXT: "text",
   PASSWORD: "password",
   DATE: "date",
@@ -152,576 +303,434 @@ const A = {
   COLOR: "color",
   SEARCH: "search",
   FILE: "file"
-}, H = {
+}, J = {
   LEFT: "left",
   RIGHT: "right"
-}, q = {
-  PASSWORD_ON: "eye-on",
-  PASSWORD_OFF: "eye-off",
+}, I = {
+  PASSWORD_SHOW: "eye-on",
+  PASSWORD_HIDE: "eye-off",
   DATE: "calendar",
   TIME: "time",
   COLOR: "color",
-  SEARCH: "search"
-}, h = {
-  TYPES: w,
-  ICON_POSITIONS: H,
-  TYPES_ICON: q
-}, ke = ["update:modelValue", "focus", "blur"], $e = {
-  ...De,
-  ...Ce,
-  ...Ne,
-  ...we,
-  ...Re,
-  ...Be,
-  modelValue: null,
+  SEARCH: "close"
+}, p = {
+  TYPES: P,
+  ICON_POSITIONS: J,
+  TYPES_ICON: I
+}, et = ["update:modelValue", "focus", "blur", "keyup"], tt = {
+  ...ze,
+  ...Xe,
+  ...Je,
+  ...Ze,
+  ...Ge,
+  ...Ke,
+  ...Qe,
+  modelValue: {
+    type: [String, Number],
+    default: void 0
+  },
   type: {
     type: String,
-    default: w.TEXT,
-    validator: (t) => Object.values(w).includes(t)
+    default: P.TEXT,
+    validator: (n) => Object.values(P).includes(n)
   },
-  id: String,
-  name: { type: String, required: !0 },
-  autocomplete: { type: String, default: "off" },
-  autofocus: Boolean,
-  minlength: Number,
-  maxlength: Number,
   min: [Number, Date],
   max: [Number, Date],
-  step: Number,
-  label: String,
-  disabled: Boolean,
-  readonly: Boolean,
-  placeholder: String,
-  icon: { type: String, default: "" },
-  iconPosition: {
+  step: { type: Number, default: 1 },
+  labelStepUp: {
     type: String,
-    validation: (t) => Object.values(H).includes(t),
-    default: H.RIGHT
+    default: "Increase value"
   },
-  floating: Boolean,
-  debounce: Number,
-  autoclear: Boolean
-}, Le = "ds", Fe = {
-  color: String,
-  width: {
-    type: [String, Number]
+  labelStepDown: {
+    type: String,
+    default: "Decrease value"
   },
-  height: {
-    type: [String, Number]
+  labelShowPassword: {
+    type: String,
+    default: "Show password"
   },
-  name: {
+  labelHidePassword: {
     type: String,
-    required: !0
+    default: "Hide password"
   },
-  provider: {
-    type: String
+  labelClear: {
+    type: String,
+    default: "Clear"
   },
-  prefix: {
+  iconShowPassword: {
     type: String,
-    default: "normal"
+    default: I.PASSWORD_SHOW
   },
-  src: String,
-  horizontalFlip: Boolean,
-  verticalFlip: Boolean,
-  flip: String,
-  mode: String,
-  inline: Boolean,
-  rotate: [Number, String],
-  onLoad: Function,
-  svg: String,
-  modifiers: {
-    type: [String, Array]
-  }
-};
-function Ve(t, n) {
-  const e = { [`${t}`]: !0 };
-  return {
-    bemCssClasses: d(() => Object.keys(n).reduce((r, s) => {
-      const a = i(n[s]) || !1;
-      if (!a)
-        return r;
-      if (s === "modifiers") {
-        const p = Array.isArray(a) ? a : [a];
-        return {
-          ...r,
-          ...p.reduce(
-            (u, S) => ({
-              ...u,
-              [`${t}--${A.kebabCase(
-                S
-              )}`]: !0
-            }),
-            {}
-          )
-        };
-      } else
-        return {
-          ...r,
-          [`${t}--${A.kebabCase(s)}`]: a
-        };
-    }, e) || {})
-  };
-}
-function Me(t, n) {
-  const e = { [`${t}`]: !0 };
-  return Object.keys(n).reduce((o, r) => {
-    const s = i(n[r]) || !1;
-    if (!s)
-      return o;
-    if (r === "modifiers") {
-      const a = Array.isArray(s) ? s : [s];
-      return {
-        ...o,
-        ...a.reduce(
-          (p, u) => ({
-            ...p,
-            [`${t}--${A.kebabCase(
-              u
-            )}`]: !0
-          }),
-          {}
-        )
-      };
-    } else
-      return {
-        ...o,
-        [`${t}--${A.kebabCase(r)}`]: s
-      };
-  }, e) || {};
-}
-const T = /* @__PURE__ */ L({
-  __name: "VvIcon",
-  props: Fe,
-  setup(t) {
-    const n = t, e = C(!0), { modifiers: o } = U(n), r = ve(Le), { bemCssClasses: s } = Ve("vv-icon", {
-      modifiers: o
-    }), a = d(() => n.provider || (r == null ? void 0 : r.provider)), p = d(() => {
-      const l = n.name || "", c = `@${a.value}:${n.prefix}:${n.name}`;
-      return j(l) ? l : j(c) ? c : (r == null ? void 0 : r.iconsCollections.find((v) => {
-        const f = `@${a.value}:${v.prefix}:${l}`;
-        if (j(f))
-          return f;
-      })) || l;
-    });
-    function u(l) {
-      let c = null;
-      if (typeof window > "u") {
-        const { JSDOM: b } = require("jsdom");
-        c = new b().window;
-      }
-      return (c ? new c.DOMParser() : new window.DOMParser()).parseFromString(l, "text/html").querySelector("svg");
-    }
-    function S(l) {
-      const c = u(l), v = (c == null ? void 0 : c.innerHTML.trim()) || "";
-      c && v && Pe(`@${a.value}:${n.prefix}:${n.name}`, {
-        body: v,
-        height: c.viewBox.baseVal.height,
-        width: c.viewBox.baseVal.width
-      });
-    }
-    return r && (n.src ? (e.value = !1, r.fetchIcon(n.src).then((l) => {
-      l && (S(l), e.value = !0);
-    }).catch((l) => {
-      throw new Error(`During fetch icon: ${l == null ? void 0 : l.message}`);
-    })) : n.svg && S(n.svg)), (l, c) => e.value ? (O(), k(i(Oe), $({
-      key: 0,
-      class: i(s)
-    }, {
-      ...l.$props,
-      provider: i(a),
-      icon: i(p)
-    }), null, 16, ["class"])) : x("", !0);
-  }
-});
-function B(t) {
-  return Array.isArray(t) ? t.filter((n) => A.isString(n)).reduce((n, e) => n.length > 0 ? n + `
-` + e : e, "") : t;
-}
-function je(t, n) {
-  return {
-    name: "HintSlot",
-    props: {
-      params: {
-        type: Object,
-        default: () => ({})
-      }
-    },
-    setup(e) {
-      const o = U(t), {
-        error: r,
-        valid: s,
-        hint: a,
-        loading: p
-      } = n, {
-        hintLabel: u,
-        modelValue: S,
-        valid: l,
-        validLabel: c,
-        error: v,
-        errorLabel: f
-      } = o, y = A.resolveFieldData(o, "loading"), b = A.resolveFieldData(
-        o,
-        "loadingLabel"
-      ), I = d(() => v.value ? !!(v.value && r || (f == null ? void 0 : f.value) && Array.isArray(f.value) && f.value.length > 0 || (f == null ? void 0 : f.value) && A.isNotEmpty(f.value)) : !1), D = d(() => !!(u && u.value || a || s || c && c.value || I.value || (y == null ? void 0 : y.value) && p || (y == null ? void 0 : y.value) && (b == null ? void 0 : b.value))), R = d(() => {
-        const _ = Te({
-          hintLabel: u,
-          modelValue: S,
-          valid: l,
-          validLabel: c,
-          error: v,
-          errorLabel: f,
-          loading: y,
-          loadingLabel: b,
-          ...e.params
-        });
-        return v != null && v.value ? (r == null ? void 0 : r(_)) || B(f == null ? void 0 : f.value) || (u == null ? void 0 : u.value) : l != null && l.value ? (s == null ? void 0 : s(_)) || B(c == null ? void 0 : c.value) || (u == null ? void 0 : u.value) : y != null && y.value ? (p == null ? void 0 : p(_)) || B(b == null ? void 0 : b.value) || (u == null ? void 0 : u.value) : (a == null ? void 0 : a(_)) || B(u == null ? void 0 : u.value) || (u == null ? void 0 : u.value);
-      });
-      return {
-        hasHint: D,
-        hintContent: R
-      };
-    },
-    render() {
-      if (this.hasHint)
-        return P(
-          "pre",
-          { style: { "white-space": "pre" } },
-          this.hintContent
-        );
-    }
-  };
-}
-const ee = L({
+  iconHidePassword: {
+    type: String,
+    default: I.PASSWORD_HIDE
+  },
+  iconClear: {
+    type: String,
+    default: I.SEARCH
+  },
+  icon: {
+    type: [String, Object],
+    default: ""
+  },
+  iconPosition: {
+    type: String,
+    validation: (n) => Object.values(J).includes(n),
+    default: J.RIGHT
+  },
+  floating: Boolean,
+  debounce: [String, Number],
+  tabindex: { type: [String, Number], default: 0 }
+}, ce = O({
   components: {
-    VvIcon: T
+    VvIcon: E
   },
   props: {
-    disabled: Boolean
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    labelShow: {
+      type: String,
+      default: "Show password"
+    },
+    labelHide: {
+      type: String,
+      default: "Hide password"
+    },
+    iconShow: {
+      type: String,
+      default: I.PASSWORD_SHOW
+    },
+    iconHide: {
+      type: String,
+      default: I.PASSWORD_HIDE
+    }
   },
-  setup(t, { emit: n }) {
-    const e = C(!1), o = d(
-      () => e.value ? q.PASSWORD_OFF : q.PASSWORD_ON
+  emits: ["toggle-password"],
+  setup(n, { emit: t }) {
+    const e = N(!1), i = r(
+      () => e.value ? n.iconHide : n.iconShow
     );
-    function r() {
-      t.disabled || (e.value = !e.value, n(
-        e.value ? "action-password-on" : "action-password-off"
-      ));
+    function o(u) {
+      u == null || u.stopPropagation(), n.disabled || (e.value = !e.value, t("toggle-password", e.value));
     }
     return {
-      activeIcon: o,
-      onClick: r
+      active: e,
+      activeIcon: i,
+      onClick: o
     };
   },
   render() {
-    const t = P(T, { name: this.activeIcon });
-    return P(
+    const n = S(E, {
+      name: this.activeIcon,
+      class: "vv-input-text__action-icon"
+    });
+    return S(
       "button",
       {
         disabled: this.disabled,
-        class: ["vv-input-text__action"],
+        class: "vv-input-text__action",
+        ariaLabel: this.active ? this.labelHide : this.labelShow,
+        type: "button",
         onClick: this.onClick
       },
-      t
+      n
     );
   }
-}), Y = L({
+}), Z = O({
   components: {
-    VvIcon: T
+    VvIcon: E
   },
   props: {
-    disabled: Boolean,
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    label: {
+      type: String
+    },
     mode: {
       type: String,
-      validator: (t) => ["up", "down"].includes(t),
+      validator: (n) => ["up", "down"].includes(n),
       default: "up"
     }
   },
-  setup(t, { emit: n }) {
-    function e() {
-      t.disabled || n(
-        t.mode === "up" ? "action-step-up" : "action-step-down"
-      );
-    }
+  emits: ["step-up", "step-down"],
+  setup(n, { emit: t }) {
+    const e = r(() => n.mode === "up");
     return {
-      onClick: e
+      isUp: e,
+      onClick: (o) => {
+        o == null || o.stopPropagation(), n.disabled || t(e.value ? "step-up" : "step-down");
+      }
     };
   },
   render() {
-    return P("button", {
+    return S("button", {
       class: [
         "vv-input-text__action-chevron",
-        this.mode === "up" && "vv-input-text__action-chevron-up"
+        this.isUp && "vv-input-text__action-chevron-up"
       ],
       disabled: this.disabled,
+      ariaLabel: this.label,
       onClick: this.onClick
     });
   }
+}), de = O({
+  components: {
+    VvIcon: E
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    label: {
+      type: String,
+      default: "Clear"
+    },
+    icon: {
+      type: String,
+      default: "close"
+    }
+  },
+  emits: ["clear"],
+  setup(n, { emit: t }) {
+    function e(i) {
+      i == null || i.stopPropagation(), n.disabled || t("clear");
+    }
+    return {
+      onClick: e
+    };
+  },
+  render() {
+    const n = S(E, {
+      name: this.icon,
+      class: "vv-input-text__action-icon"
+    });
+    return S(
+      "button",
+      {
+        disabled: this.disabled,
+        class: "vv-input-text__action",
+        ariaLabel: this.label,
+        type: "button",
+        onClick: this.onClick
+      },
+      n
+    );
+  }
 });
-function te(t, n) {
+function G(n, t) {
   return {
     name: "VvInputTextActions",
     components: {
-      VvIcon: T,
-      VvInputPasswordAction: ee,
-      VvInputStepAction: Y
+      VvIcon: E,
+      VvInputPasswordAction: ce,
+      VvInputStepAction: Z,
+      VvInputClearAction: de
     },
     setup() {
       return {
-        isDisabled: d(() => n.disabled || n.readonly)
+        isDisabled: r(() => 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 w.PASSWORD: {
-          const { onActionPasswordOn: o, onActionPasswordOff: r } = this.$attrs;
+      switch (n) {
+        case P.SEARCH: {
+          const { onClear: i } = this.$attrs;
           e = [
-            P(ee, {
+            S(de, {
               disabled: this.isDisabled,
-              onActionPasswordOn: o,
-              onActionPasswordOff: r
+              label: this.labelShowPassword,
+              onClear: i
             })
           ];
           break;
         }
-        case w.NUMBER: {
-          const { onActionStepUp: o, onActionStepDown: r } = this.$attrs;
+        case P.PASSWORD: {
+          const { onTogglePassword: i } = this.$attrs;
           e = [
-            P(Y, {
-              mode: "up",
-              disabled: this.isDisabled,
-              onActionStepUp: o,
-              onActionStepDown: r
-            }),
-            P(Y, {
-              mode: "down",
+            S(ce, {
               disabled: this.isDisabled,
-              onActionStepUp: o,
-              onActionStepDown: r
+              onTogglePassword: i,
+              labelShow: this.labelShowPassword,
+              labelHide: this.labelHidePassword,
+              iconShow: this.iconShowPassword,
+              iconHide: this.iconHidePassword
             })
           ];
           break;
         }
-        default: {
-          e = null;
+        case P.NUMBER: {
+          const { onStepUp: i, onStepDown: o } = this.$attrs;
+          e = [
+            S(Z, {
+              mode: "up",
+              disabled: this.isDisabled || t.max !== void 0 && t.modelValue === t.max,
+              label: this.labelStepUp,
+              onStepUp: i,
+              onStepDown: o
+            }),
+            S(Z, {
+              mode: "down",
+              disabled: this.isDisabled || t.min !== void 0 && t.modelValue === t.min,
+              label: this.labelStepDown,
+              onStepUp: i,
+              onStepDown: o
+            })
+          ];
           break;
         }
       }
-      return Array.isArray(e) ? P("div", { class: "vv-input-text__actions-group" }, e) : e;
+      return Array.isArray(e) ? S("div", { class: "vv-input-text__actions-group" }, e) : e;
     }
   };
 }
-function Ye(t, n, e) {
-  const o = d(
-    () => !!(t.value && n.value === "left" || e.iconLeft)
-  ), r = d(
-    () => !!(t.value && n.value === "right" || e.iconRight)
-  ), s = d(
-    () => !!(t.value && n.value === "top" || e.iconTop)
-  ), a = d(
-    () => !!(t.value && n.value === "bottom" || e.iconBottom)
-  );
-  return {
-    hasIconLeft: o,
-    hasIconRight: r,
-    hasIconTop: s,
-    hasIconBottom: a
-  };
-}
-function He(t, n) {
-  const { focused: e } = _e(t);
-  return ne(e, (o) => {
-    n(o ? "focus" : "blur", t.value);
-  }), {
-    focused: e
-  };
-}
-function qe(t, n, e) {
-  const o = C(t == null ? void 0 : t.value), r = xe(
-    o,
-    n || 0
-  );
-  return ne(r, (s) => e("update:modelValue", s)), o;
-}
-function Ue(t, n) {
-  const e = d(() => {
-    const s = i(t);
-    return Q(s) ? s.length : 0;
-  }), o = d(() => {
-    const s = i(t) || "";
-    return !Q(s) || n.mode === !1 ? 0 : n.mode === !0 ? s.length : i(n.upperLimit) - s.length;
-  }), r = d(() => n.mode === !1 ? "" : n.mode === !0 && n.upperLimit && n.upperLimit > 0 ? `${o.value}/${i(n.upperLimit)}` : o.value);
-  return {
-    textLength: e,
-    textLimitLength: o,
-    formattedTextLimitLength: r
-  };
-}
-const We = ["for"], ze = { class: "vv-input-text__wrapper" }, Ze = {
-  key: 2,
+const nt = ["for"], ot = { class: "vv-input-text__wrapper" }, it = ["id", "disabled", "readonly", "required"], st = {
+  key: 1,
   class: "vv-input-text__limit"
-}, Xe = {
-  inheritAttrs: !1
-}, Qe = /* @__PURE__ */ L({
-  ...Xe,
-  __name: "VvInputText",
-  props: $e,
-  emits: ke,
-  setup(t, { emit: n }) {
-    const e = t, o = ye(), r = ge(), s = C(), { icon: a, iconPosition: p, label: u, modelValue: S, autoclear: l, limit: c } = U(e), v = e.id || e.name, f = `${e.name}-label`, y = `${e.name}-hint`, b = d(
-      () => e.floating && A.isEmpty(e.placeholder) ? " " : e.placeholder
-    ), I = qe(S, e.debounce, n), D = C(!1), R = d(() => e.type === h.TYPES.PASSWORD), _ = d(() => e.type === h.TYPES.NUMBER);
-    function re() {
-      const g = e.max;
-      !Z.value && I.value + 1 <= g && (s.value.stepUp(), I.value = i(s.value).value);
-    }
-    function oe() {
-      const g = e.min;
-      !Z.value && I.value - 1 <= g && (s.value.stepDown(), I.value = i(s.value).value);
-    }
-    const { hasIconLeft: W, hasIconRight: z } = Ye(a, p, {
-      iconLeft: o["icon-left"],
-      iconRight: o["icon-right"]
-    }), F = d(() => {
+}, rt = {
+  name: "VvInputText"
+}, dt = /* @__PURE__ */ O({
+  ...rt,
+  props: tt,
+  emits: et,
+  setup(n, { emit: t }) {
+    const e = n, i = Ie(), o = N(), { icon: u, iconPosition: a, label: b, modelValue: m, limit: f } = K(e), c = r(() => String(e.id || He())), l = r(() => `${c.value}-hint`), h = r(
+      () => e.floating && x(e.placeholder) ? " " : e.placeholder
+    ), d = Ue(m, t, e.debounce), v = N(!1), y = r(() => e.type === p.TYPES.PASSWORD), R = () => {
+      v.value = !v.value;
+    }, C = r(
+      () => [p.TYPES.TIME, p.TYPES.DATETIME_LOCAL, p.TYPES.DATE].includes(
+        e.type
+      )
+    ), H = r(() => e.type === p.TYPES.NUMBER), $ = () => {
+      W.value || (o.value.stepUp(), d.value = s(o).value);
+    }, B = () => {
+      W.value || (o.value.stepDown(), d.value = s(o).value);
+    }, M = r(() => e.type === p.TYPES.SEARCH), T = () => {
+      d.value = null;
+    }, { hasIconLeft: Q, hasIconRight: Y } = Me(u, a, {
+      iconLeft: i["icon-left"],
+      iconRight: i["icon-right"]
+    }), ee = r(() => typeof u.value == "string" ? { name: u.value } : u.value), U = r(() => {
       switch (e.type) {
-        case h.TYPES.PASSWORD:
-          return h.TYPES_ICON.PASSWORD_OFF;
-        case h.TYPES.COLOR:
-          return h.TYPES_ICON.COLOR;
-        case h.TYPES.DATE:
-        case h.TYPES.DATETIME_LOCAL:
-          return h.TYPES_ICON.DATE;
-        case h.TYPES.TIME:
-          return h.TYPES_ICON.TIME;
-        case h.TYPES.SEARCH:
-          return h.TYPES_ICON.SEARCH;
+        case p.TYPES.COLOR:
+          return { name: p.TYPES_ICON.COLOR };
+        case p.TYPES.DATE:
+        case p.TYPES.DATETIME_LOCAL:
+          return { name: p.TYPES_ICON.DATE };
+        case p.TYPES.TIME:
+          return { name: p.TYPES_ICON.TIME };
         default:
           return "";
       }
-    }), { textLength: se, formattedTextLimitLength: ie } = Ue(I, {
+    }), { formattedTextLimitLength: fe } = Fe(d, {
       mode: e.limit,
       upperLimit: e.maxlength || 0
-    }), { focused: ae } = He(s, n), Z = d(() => e.disabled || e.readonly), ue = d(() => {
-      const g = z.value || A.isNotEmpty(F.value), m = e.floating && A.isNotEmpty(e.label), E = A.isNotEmpty(S == null ? void 0 : S.value);
-      return [
-        Me("vv-input-text", {
-          modifiers: e.modifiers,
-          readonly: e.readonly,
-          valid: e.valid,
-          invalid: e.error,
-          loading: e.loading,
-          iconLeft: W,
-          iconRight: g,
-          floating: m,
-          dirty: E
-        }),
-        r.class
-      ];
-    }), le = d(() => {
-      const { style: g } = r, m = A.pickBy(
-        r,
-        (E) => E.startsWith("data-")
-      );
-      return {
-        style: g,
-        ...m
-      };
-    }), ce = d(() => {
-      const g = R.value && D.value ? "text" : e.type, m = A.pickBy(
-        r,
-        (E) => E.startsWith("aria-")
-      );
+    }), { focused: F } = Ye(o, t), W = r(() => e.disabled || e.readonly), ve = r(() => W.value ? -1 : e.tabindex), te = r(() => !x(m)), me = r(() => {
+      if (e.error === !0)
+        return !0;
+      if (e.valid === !0)
+        return !1;
+    }), { bemCssClasses: Se } = pe("vv-input-text", {
+      modifiers: e.modifiers,
+      valid: e.valid,
+      invalid: e.error,
+      loading: e.loading,
+      iconLeft: Q,
+      iconRight: Y.value || !x(U),
+      floating: e.floating && !x(e.label),
+      dirty: te,
+      focus: F
+    }), he = r(() => {
+      const g = (() => y.value && v.value || C.value && !te.value && !F.value ? p.TYPES.TEXT : e.type)();
       return {
-        id: v,
         type: g,
-        placeholder: b.value,
+        placeholder: h.value,
         name: e.name,
         autocomplete: e.autocomplete,
-        disabled: e.disabled,
-        readonly: e.readonly,
         minlength: e.minlength,
         maxlength: e.maxlength,
         min: e.min,
         max: e.max,
-        step: e.step,
-        "aria-invalid": e.error,
-        "aria-valid": !e.valid,
-        "aria-labeledby": f,
-        "aria-describedby": y,
-        "aria-errormessage": y,
-        ...m
-      };
-    }), X = d(() => {
-      const { modelValue: g, valid: m, error: E } = e;
-      return {
-        valid: m,
-        error: E,
-        modelValue: g
+        step: g === p.TYPES.NUMBER ? e.step : void 0,
+        tabindex: ve.value,
+        "aria-invalid": me.value,
+        "aria-describedby": !oe.value && be.value ? l.value : void 0,
+        "aria-errormessage": oe.value ? l.value : void 0
       };
-    }), de = je(e, o), fe = te(
-      h.TYPES.PASSWORD,
+    }), ne = r(() => ({
+      valid: e.valid,
+      error: e.error,
+      modelValue: e.modelValue
+    })), { HintSlot: ge, hasHint: be, hasErrors: oe } = Be(e, i), ye = G(
+      p.TYPES.PASSWORD,
       e
-    ), pe = te(h.TYPES.NUMBER, e);
-    function me() {
-      I.value = null;
-    }
-    return he(() => {
-      e.autofocus && (ae.value = !0);
-    }), (g, m) => (O(), N("div", $(i(le), { class: i(ue) }), [
-      i(u) ? (O(), N("label", {
+    ), we = G(p.TYPES.NUMBER, e), Ee = G(p.TYPES.SEARCH, e);
+    return Ce(() => {
+      e.autofocus && (F.value = !0);
+    }), (g, V) => (w(), q("div", {
+      class: _e(s(Se))
+    }, [
+      s(b) ? (w(), q("label", {
         key: 0,
-        for: i(v)
-      }, G(i(u)), 9, We)) : x("", !0),
-      J("div", ze, [
-        i(W) ? V(g.$slots, "icon-left", K($({ key: 0 }, i(X))), () => [
-          M(T, {
-            class: "vv-input-text__icon-left",
-            name: i(a)
-          }, null, 8, ["name"])
-        ]) : x("", !0),
-        Se(J("input", $({
+        for: s(c),
+        class: "vv-input-text__label"
+      }, ie(s(b)), 9, nt)) : D("", !0),
+      se("div", ot, [
+        s(Q) ? z(g.$slots, "icon-left", X(A({ key: 0 }, s(ne))), () => [
+          re(E, A({ class: "vv-input-text__icon-left" }, s(ee)), null, 16)
+        ]) : D("", !0),
+        Ae(se("input", A({
+          id: s(c),
           ref_key: "input",
-          ref: s
-        }, i(ce), {
-          "onUpdate:modelValue": m[0] || (m[0] = (E) => Ae(I) ? I.value = E : null),
-          onInput: m[1] || (m[1] = (E) => n("input", E))
-        }), null, 16), [
-          [Ee, i(I)]
+          ref: o,
+          "onUpdate:modelValue": V[0] || (V[0] = (j) => De(d) ? d.value = j : null)
+        }, s(he), {
+          disabled: g.disabled,
+          readonly: g.readonly,
+          required: g.required,
+          onKeyup: V[1] || (V[1] = (j) => t("keyup", j))
+        }), null, 16, it), [
+          [xe, s(d)]
         ]),
-        i(l) && i(se) > 0 ? (O(), N("button", {
-          key: 1,
-          class: "vv-button vv-button--ghost",
-          onClick: me
-        }, [
-          M(T, { name: "clear-field" })
-        ])) : x("", !0),
-        V(g.$slots, "icon-right", K(be(i(X))), () => [
-          i(R) ? (O(), k(i(fe), {
-            key: 0,
-            onActionPasswordOn: m[2] || (m[2] = (E) => D.value = !0),
-            onActionPasswordOff: m[3] || (m[3] = (E) => D.value = !1)
-          })) : i(_) ? (O(), k(i(pe), {
+        z(g.$slots, "icon-right", X(Oe(s(ne))), () => [
+          s(Y) || s(U) ? (w(), _(E, X(A({ key: 0 }, s(Y) ? s(ee) : s(U))), null, 16)) : s(y) ? (w(), _(s(ye), {
             key: 1,
-            onActionStepUp: re,
-            onActionStepDown: oe
-          })) : i(z) || i(F) ? (O(), k(T, {
+            onTogglePassword: R
+          })) : s(H) ? (w(), _(s(we), {
             key: 2,
-            name: i(a) || i(F)
-          }, null, 8, ["name"])) : x("", !0)
+            onStepUp: $,
+            onStepDown: B
+          })) : s(M) ? (w(), _(s(Ee), {
+            key: 3,
+            onClear: T
+          })) : D("", !0)
         ]),
-        i(c) ? (O(), N("span", Ze, [
-          V(g.$slots, "limit", {}, () => [
-            Ie(G(i(ie)), 1)
+        s(f) ? (w(), q("span", st, [
+          z(g.$slots, "limit", {}, () => [
+            Re(ie(s(fe)), 1)
           ])
-        ])) : x("", !0)
+        ])) : D("", !0)
       ]),
-      M(i(de), {
-        id: y,
+      re(s(ge), {
+        id: s(l),
         class: "vv-input-text__hint"
-      })
-    ], 16));
+      }, null, 8, ["id"])
+    ], 2));
   }
 });
 export {
-  Qe as default
+  dt as default
 };