@volverjs/ui-vue 0.0.1-beta.6 → 0.0.1-beta.8

package/dist/components/VvInputText/vv-input-text.es.js

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