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

package/dist/components/VvTextarea/vv-textarea.es.js

@@ -1,60 +1,60 @@
-import { computed as d, unref as f, defineComponent as W, ref as D, toRefs as $, inject as ae, openBlock as O, createBlock as le, mergeProps as P, createCommentVNode as _, h as ue, watch as G, useSlots as ce, useAttrs as fe, onMounted as de, createElementBlock as q, toDisplayString as pe, createElementVNode as R, renderSlot as H, normalizeProps as M, createVNode as B, withDirectives as me, vModelText as ge } from "vue";
-import { iconExists as b, Icon as ve, addIcon as ye } from "@iconify/vue";
-import { useFocus as he, refDebounced as Se } from "@vueuse/core";
-const A = {
-  equals(e, t, n) {
-    return n ? this.resolveFieldData(e, n) === this.resolveFieldData(t, n) : this.deepEquals(e, t);
+import { computed as m, unref as l, defineComponent as z, ref as F, toRefs as L, inject as ee, openBlock as $, createBlock as te, mergeProps as w, createCommentVNode as _, h as re, watch as Z, useSlots as ne, useAttrs as oe, onMounted as se, createElementBlock as E, toDisplayString as q, createElementVNode as V, renderSlot as D, normalizeProps as R, createVNode as P, withDirectives as ie, isRef as ae, vModelText as le, createTextVNode as ue } from "vue";
+import { iconExists as O, Icon as ce, addIcon as fe } from "@iconify/vue";
+import { toReactive as de, useFocus as me, refDebounced as pe, isString as M } from "@vueuse/core";
+const y = {
+  equals(e, r, t) {
+    return t ? this.resolveFieldData(e, t) === this.resolveFieldData(r, t) : this.deepEquals(e, r);
   },
-  deepEquals(e, t) {
-    if (e === t)
+  deepEquals(e, r) {
+    if (e === r)
       return !0;
-    if (e && t && typeof e == "object" && typeof t == "object") {
-      const n = Array.isArray(e), o = Array.isArray(t);
-      let r, i, a;
-      if (n && o) {
-        if (i = e.length, i != t.length)
+    if (e && r && typeof e == "object" && typeof r == "object") {
+      const t = Array.isArray(e), o = Array.isArray(r);
+      let n, s, i;
+      if (t && o) {
+        if (s = e.length, s != r.length)
           return !1;
-        for (r = i; r-- !== 0; )
-          if (!this.deepEquals(e[r], t[r]))
+        for (n = s; n-- !== 0; )
+          if (!this.deepEquals(e[n], r[n]))
             return !1;
         return !0;
       }
-      if (n != o)
+      if (t != o)
         return !1;
-      const s = e instanceof Date, h = t instanceof Date;
-      if (s != h)
+      const d = e instanceof Date, a = r instanceof Date;
+      if (d != a)
         return !1;
-      if (s && h)
-        return e.getTime() == t.getTime();
-      const g = e instanceof RegExp, l = t instanceof RegExp;
-      if (g != l)
+      if (d && a)
+        return e.getTime() == r.getTime();
+      const h = e instanceof RegExp, u = r instanceof RegExp;
+      if (h != u)
         return !1;
-      if (g && l)
-        return e.toString() == t.toString();
-      const u = Object.keys(e);
-      if (i = u.length, i !== Object.keys(t).length)
+      if (h && u)
+        return e.toString() == r.toString();
+      const c = Object.keys(e);
+      if (s = c.length, s !== Object.keys(r).length)
         return !1;
-      for (r = i; r-- !== 0; )
-        if (!Object.prototype.hasOwnProperty.call(t, u[r]))
+      for (n = s; n-- !== 0; )
+        if (!Object.prototype.hasOwnProperty.call(r, c[n]))
           return !1;
-      for (r = i; r-- !== 0; )
-        if (a = u[r], !this.deepEquals(e[a], t[a]))
+      for (n = s; n-- !== 0; )
+        if (i = c[n], !this.deepEquals(e[i], r[i]))
           return !1;
       return !0;
     }
-    return e !== e && t !== t;
+    return e !== e && r !== r;
   },
-  resolveFieldData(e, t) {
-    if (e && Object.keys(e).length && t) {
-      if (t.indexOf(".") === -1)
-        return e[t];
+  resolveFieldData(e, r) {
+    if (e && Object.keys(e).length && r) {
+      if (r.indexOf(".") === -1)
+        return e[r];
       {
-        const n = t.split(".");
+        const t = r.split(".");
         let o = e;
-        for (let r = 0, i = n.length; r < i; ++r) {
+        for (let n = 0, s = t.length; n < s; ++n) {
           if (e == null)
             return null;
-          o = o[n[r]];
+          o = o[t[n]];
         }
         return o;
       }
@@ -64,21 +64,21 @@ const A = {
   isFunction(e) {
     return !!(e && e.constructor && e.call && e.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(e, r) {
+    let t = -1;
+    if (r) {
+      for (let o = 0; o < r.length; o++)
+        if (this.equals(r[o], e)) {
+          t = o;
           break;
         }
     }
-    return n;
+    return t;
   },
-  contains(e, t) {
-    if (e != null && t && t.length) {
-      for (const n of t)
-        if (this.equals(e, n))
+  contains(e, r) {
+    if (e != null && r && r.length) {
+      for (const t of r)
+        if (this.equals(e, t))
           return !0;
     }
     return !1;
@@ -89,66 +89,57 @@ const A = {
   isNotEmpty(e) {
     return !this.isEmpty(e);
   },
-  pickBy(e, t) {
+  pickBy(e, r) {
     return Object.fromEntries(
-      Object.entries(e).filter(([n]) => t(n))
+      Object.entries(e).filter(([t]) => r(t))
     );
   },
-  removeFromList(e, t) {
-    const n = this.findIndexInList(e, t);
-    return n > -1 ? t.filter((o, r) => r !== n) : t;
+  removeFromList(e, r) {
+    const t = this.findIndexInList(e, r);
+    return t > -1 ? r.filter((o, n) => n !== t) : r;
   },
   isString(e) {
     return typeof e == "string" || e instanceof String;
   },
   propsToObject(e) {
-    return Object.keys(e).reduce((t, n) => {
-      var o, r, i, a, 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] = ((a = e[n]) == null ? void 0 : a.default) || ((s = e[n]) == null ? void 0 : s.type())), t;
+    return Object.keys(e).reduce((r, t) => {
+      var o, n, s, i, d;
+      return this.isFunction(e[t]) ? r[t] = e[t]() : Array.isArray(e[t]) ? r[t] = e[t][0]() : (o = e[t]) != null && o.type && (Array.isArray(e[t].type) ? r[t] = ((n = e[t]) == null ? void 0 : n.default) || ((s = e[t]) == null ? void 0 : s.type[0]()) : r[t] = ((i = e[t]) == null ? void 0 : i.default) || ((d = e[t]) == null ? void 0 : d.type())), r;
     }, {});
   },
-  filterArray(e, t, n) {
-    return e.filter((o) => t.some((r) => typeof r == "string" ? o[n] == r : this.equals(
-      o[n],
-      r[n]
+  filterArray(e, r, t) {
+    return e.filter((o) => r.some((n) => typeof n == "string" ? o[t] == n : this.equals(
+      o[t],
+      n[t]
     )));
   },
   kebabCase(e) {
-    var t, n;
+    var r, t;
     if (e)
-      return (n = (t = e.match(
+      return (t = (r = e.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 : r.join("-")) == null ? void 0 : t.toLowerCase();
   }
-}, Ae = {
+}, ge = {
   valid: Boolean,
   validLabel: [String, Array]
-}, xe = {
+}, he = {
   error: Boolean,
   errorLabel: [String, Array]
-}, Ce = {
+}, ye = {
   loading: Boolean,
   loadingLabel: String
-}, Ie = {
-  disabled: Boolean
-}, Pe = {
-  readonly: Boolean
-}, _e = {
+}, ve = {
+  modifiers: [String, Array]
+}, be = {
   hintLabel: { type: String, default: "" }
-}, z = {
-  LEFT: "left",
-  RIGHT: "right"
-}, we = {
-  hard: "hard",
-  soft: "soft"
-}, Ee = ["update:modelValue", "focus", "blur"], Be = {
-  ...Ae,
-  ...xe,
-  ..._e,
-  ...Ce,
-  ...Ie,
-  ...Pe,
-  modelValue: null,
+}, xe = {
+  limit: {
+    type: [Boolean, String],
+    default: !1,
+    validator: (e) => [!0, !1, "countdown"].includes(e)
+  }
+}, Se = {
   id: String,
   name: { type: String, required: !0 },
   autocomplete: { type: String, default: "off" },
@@ -157,18 +148,40 @@ const A = {
   maxlength: Number,
   label: String,
   placeholder: String,
+  required: Boolean,
+  disabled: Boolean,
+  readonly: Boolean
+}, Ae = {
+  debounce: Number
+}, H = {
+  LEFT: "left",
+  RIGHT: "right"
+}, _e = {
+  hard: "hard",
+  soft: "soft"
+}, Be = ["update:modelValue", "focus", "blur"], $e = {
+  ...ge,
+  ...he,
+  ...be,
+  ...ye,
+  ...ve,
+  ...xe,
+  ...Se,
+  ...Ae,
+  modelValue: null,
+  cols: { type: Number, default: 50 },
+  rows: { type: Number, default: 5 },
   icon: { type: String, default: "" },
   iconPosition: {
     type: String,
-    validation: (e) => Object.values(z).includes(e),
-    default: z.RIGHT
+    validation: (e) => Object.values(H).includes(e),
+    default: H.RIGHT
   },
   floating: Boolean,
-  debounce: Number,
-  cols: { type: Number, default: 50 },
-  rows: { type: Number, default: 5 },
-  wrap: { type: String, default: we.soft }
-}, be = {
+  wrap: { type: String, default: _e.soft },
+  autoclear: Boolean,
+  resizable: Boolean
+}, we = {
   color: String,
   width: {
     type: [String, Number]
@@ -200,22 +213,22 @@ const A = {
     type: [String, Array]
   }
 };
-function U(e, t) {
-  const n = { [`${e}`]: !0 };
+function Ce(e, r) {
+  const t = { [`${e}`]: !0 };
   return {
-    bemCssClasses: d(() => Object.keys(t).reduce((r, i) => {
-      const a = f(t[i]) || !1;
-      if (!a)
-        return r;
-      if (i === "modifiers") {
-        const s = Array.isArray(a) ? a : [a];
+    bemCssClasses: m(() => Object.keys(r).reduce((n, s) => {
+      const i = l(r[s]) || !1;
+      if (!i)
+        return n;
+      if (s === "modifiers") {
+        const d = Array.isArray(i) ? i : [i];
         return {
-          ...r,
-          ...s.reduce(
-            (h, g) => ({
-              ...h,
-              [`${e}--${A.kebabCase(
-                g
+          ...n,
+          ...d.reduce(
+            (a, h) => ({
+              ...a,
+              [`${e}--${y.kebabCase(
+                h
               )}`]: !0
             }),
             {}
@@ -223,247 +236,310 @@ function U(e, t) {
         };
       } else
         return {
-          ...r,
-          [`${e}--${A.kebabCase(i)}`]: a
+          ...n,
+          [`${e}--${y.kebabCase(s)}`]: i
         };
-    }, n) || {})
+    }, t) || {})
   };
 }
-const Z = /* @__PURE__ */ W({
+function Ie(e, r) {
+  const t = { [`${e}`]: !0 };
+  return Object.keys(r).reduce((o, n) => {
+    const s = l(r[n]) || !1;
+    if (!s)
+      return o;
+    if (n === "modifiers") {
+      const i = Array.isArray(s) ? s : [s];
+      return {
+        ...o,
+        ...i.reduce(
+          (d, a) => ({
+            ...d,
+            [`${e}--${y.kebabCase(
+              a
+            )}`]: !0
+          }),
+          {}
+        )
+      };
+    } else
+      return {
+        ...o,
+        [`${e}--${y.kebabCase(n)}`]: s
+      };
+  }, t) || {};
+}
+const N = /* @__PURE__ */ z({
   __name: "VvIcon",
-  props: be,
+  props: we,
   setup(e) {
-    const t = e, n = D(!0), { modifiers: o } = $(t), r = ae("ds"), { bemCssClasses: i } = U("vv-icon", {
+    const r = e, t = F(!0), { modifiers: o } = L(r), n = ee("ds"), { bemCssClasses: s } = Ce("vv-icon", {
       modifiers: o
-    }), a = d(() => t.provider || (r == null ? void 0 : r.provider)), s = d(() => {
-      const l = t.name || "", u = `@${a.value}:${t.prefix}:${t.name}`;
-      return b(l) ? l : b(u) ? u : (r == null ? void 0 : r.iconsCollections.find((c) => {
-        const p = `@${a.value}:${c.prefix}:${l}`;
-        if (b(p))
-          return p;
-      })) || l;
+    }), i = m(() => r.provider || (n == null ? void 0 : n.provider)), d = m(() => {
+      const u = r.name || "", c = `@${i.value}:${r.prefix}:${r.name}`;
+      return O(u) ? u : O(c) ? c : (n == null ? void 0 : n.iconsCollections.find((p) => {
+        const f = `@${i.value}:${p.prefix}:${u}`;
+        if (O(f))
+          return f;
+      })) || u;
     });
-    function h(l) {
-      let u = null;
+    function a(u) {
+      let c = null;
       if (typeof window > "u") {
-        const { JSDOM: C } = require("jsdom");
-        u = new C().window;
+        const { JSDOM: v } = require("jsdom");
+        c = new v().window;
       }
-      return (u ? new u.DOMParser() : new window.DOMParser()).parseFromString(l, "text/html").querySelector("svg");
+      return (c ? new c.DOMParser() : new window.DOMParser()).parseFromString(u, "text/html").querySelector("svg");
     }
-    function g(l) {
-      const u = h(l), c = (u == null ? void 0 : u.innerHTML.trim()) || "";
-      u && c && ye(`@${a.value}:${t.prefix}:${t.name}`, {
-        body: c,
-        height: u.viewBox.baseVal.height,
-        width: u.viewBox.baseVal.width
+    function h(u) {
+      const c = a(u), p = (c == null ? void 0 : c.innerHTML.trim()) || "";
+      c && p && fe(`@${i.value}:${r.prefix}:${r.name}`, {
+        body: p,
+        height: c.viewBox.baseVal.height,
+        width: c.viewBox.baseVal.width
       });
     }
-    return r && (t.src ? (n.value = !1, r.fetchIcon(t.src).then((l) => {
-      l && (g(l), n.value = !0);
-    }).catch((l) => {
-      throw new Error(`During fetch icon: ${l == null ? void 0 : l.message}`);
-    })) : t.svg && g(t.svg)), (l, u) => n.value ? (O(), le(f(ve), P({
+    return n && (r.src ? (t.value = !1, n.fetchIcon(r.src).then((u) => {
+      u && (h(u), t.value = !0);
+    }).catch((u) => {
+      throw new Error(`During fetch icon: ${u == null ? void 0 : u.message}`);
+    })) : r.svg && h(r.svg)), (u, c) => t.value ? ($(), te(l(ce), w({
       key: 0,
-      class: f(i)
+      class: l(s)
     }, {
-      ...l.$props,
-      provider: f(a),
-      icon: f(s)
+      ...u.$props,
+      provider: l(i),
+      icon: l(d)
     }), null, 16, ["class"])) : _("", !0);
   }
 });
-function De(e) {
-  return Array.isArray(e) ? e.filter((t) => A.isString(t)).reduce((t, n) => t.length > 0 ? t + `
-` + n : n, "") : e;
+function k(e) {
+  return Array.isArray(e) ? e.filter((r) => y.isString(r)).reduce((r, t) => r.length > 0 ? r + `
+` + t : t, "") : e;
 }
-function Oe(e, t) {
+function Ee(e, r) {
   return {
     name: "HintSlot",
-    setup() {
-      const n = $(e), {
-        error: o,
-        valid: r,
+    props: {
+      params: { type: Object, default: () => {
+      } }
+    },
+    setup(t) {
+      const o = L(e), {
+        error: n,
+        valid: s,
         hint: i,
-        loading: a
-      } = t, {
-        hintLabel: s,
+        loading: d
+      } = r, {
+        hintLabel: a,
         modelValue: h,
-        valid: g,
-        validLabel: l,
-        error: u,
-        errorLabel: c
-      } = n, p = A.resolveFieldData(n, "loading"), v = A.resolveFieldData(
-        n,
+        valid: u,
+        validLabel: c,
+        error: p,
+        errorLabel: f
+      } = o, g = y.resolveFieldData(o, "loading"), v = y.resolveFieldData(
+        o,
         "loadingLabel"
-      ), C = d(() => u.value ? !!(u.value && o || (c == null ? void 0 : c.value) && Array.isArray(c.value) && c.value.length > 0 || (c == null ? void 0 : c.value) && A.isNotEmpty(c.value)) : !1), w = d(() => !!(s && s.value || i || r || l && l.value || C.value || (p == null ? void 0 : p.value) && a || (p == null ? void 0 : p.value) && (v == null ? void 0 : v.value))), I = d(() => Array.isArray(c == null ? void 0 : c.value) ? De((c == null ? void 0 : c.value) || "") : c == null ? void 0 : c.value), E = d(() => {
-        const x = { modelValue: h, error: u, valid: g };
-        return u != null && u.value ? (o == null ? void 0 : o(x)) || (I == null ? void 0 : I.value) || (s == null ? void 0 : s.value) : g != null && g.value ? (r == null ? void 0 : r(x)) || (l == null ? void 0 : l.value) || (s == null ? void 0 : s.value) : p != null && p.value ? (a == null ? void 0 : a(x)) || (v == null ? void 0 : v.value) || (s == null ? void 0 : s.value) : (i == null ? void 0 : i(x)) || (s == null ? void 0 : s.value) || (s == null ? void 0 : s.value);
+      ), S = m(() => p.value ? !!(p.value && n || (f == null ? void 0 : f.value) && Array.isArray(f.value) && f.value.length > 0 || (f == null ? void 0 : f.value) && y.isNotEmpty(f.value)) : !1), C = m(() => !!(a && a.value || i || s || c && c.value || S.value || (g == null ? void 0 : g.value) && d || (g == null ? void 0 : g.value) && (v == null ? void 0 : v.value))), I = m(() => {
+        const A = de({
+          hintLabel: a,
+          modelValue: h,
+          valid: u,
+          validLabel: c,
+          error: p,
+          errorLabel: f,
+          loading: g,
+          loadingLabel: v,
+          ...t.params
+        });
+        return p != null && p.value ? (n == null ? void 0 : n(A)) || k(f == null ? void 0 : f.value) || (a == null ? void 0 : a.value) : u != null && u.value ? (s == null ? void 0 : s(A)) || k(c == null ? void 0 : c.value) || (a == null ? void 0 : a.value) : g != null && g.value ? (d == null ? void 0 : d(A)) || k(v == null ? void 0 : v.value) || (a == null ? void 0 : a.value) : (i == null ? void 0 : i(A)) || k(a == null ? void 0 : a.value) || (a == null ? void 0 : a.value);
       });
       return {
-        hasHint: w,
-        hintContent: E
+        hasHint: C,
+        hintContent: I
       };
     },
     render() {
       if (this.hasHint)
-        return ue("span", null, this.hintContent);
+        return re(
+          "pre",
+          { style: { "white-space": "pre" } },
+          this.hintContent
+        );
     }
   };
 }
-function $e(e, t) {
-  const { icon: n, iconPosition: o } = e, r = d(
-    () => !!(n.value && o.value === "left" || t.iconLeft)
-  ), i = d(
-    () => !!(n.value && o.value === "right" || t.iconRight)
-  ), a = d(
-    () => !!(n.value && o.value === "top" || t.iconTop)
-  ), s = d(
-    () => !!(n.value && o.value === "bottom" || t.iconBottom)
+function Pe(e, r, t) {
+  const o = m(
+    () => !!(e.value && r.value === "left" || t.iconLeft)
+  ), n = m(
+    () => !!(e.value && r.value === "right" || t.iconRight)
+  ), s = m(
+    () => !!(e.value && r.value === "top" || t.iconTop)
+  ), i = m(
+    () => !!(e.value && r.value === "bottom" || t.iconBottom)
   );
   return {
-    icon: n,
-    iconPosition: o,
-    hasIconLeft: r,
-    hasIconRight: i,
-    hasIconTop: a,
-    hasIconBottom: s
+    hasIconLeft: o,
+    hasIconRight: n,
+    hasIconTop: s,
+    hasIconBottom: i
   };
 }
-function ke(e, t) {
-  const { focused: n } = he(e);
-  return G(n, (o) => {
-    t(o ? "focus" : "blur", e.value);
+function ke(e, r) {
+  const { focused: t } = me(e);
+  return Z(t, (o) => {
+    r(o ? "focus" : "blur", e.value);
   }), {
-    focused: n
+    focused: t
   };
 }
-const Fe = ["for"], Ne = { class: "vv-textarea__wrapper" }, Te = {
+function De(e, r, t) {
+  const o = F(e == null ? void 0 : e.value), n = pe(
+    o,
+    r || 0
+  );
+  return Z(n, (s) => t("update:modelValue", s)), o;
+}
+function Oe(e, r) {
+  const t = m(() => {
+    const s = l(e);
+    return M(s) ? s.length : 0;
+  }), o = m(() => {
+    const s = l(e) || "";
+    return !M(s) || r.mode === !1 ? 0 : r.mode === !0 ? s.length : l(r.upperLimit) - s.length;
+  }), n = m(() => r.mode === !1 ? "" : r.mode === !0 && r.upperLimit && r.upperLimit > 0 ? `${o.value}/${l(r.upperLimit)}` : o.value);
+  return {
+    textLength: t,
+    textLimitLength: o,
+    formattedTextLimitLength: n
+  };
+}
+const Ne = ["for"], Fe = { class: "vv-textarea__wrapper" }, Le = {
+  key: 3,
+  class: "vv-textarea__limit"
+}, je = {
   inheritAttrs: !1
-}, Re = /* @__PURE__ */ W({
-  ...Te,
+}, Re = /* @__PURE__ */ z({
+  ...je,
   __name: "VvTextarea",
-  props: Be,
-  emits: Ee,
-  setup(e, { emit: t }) {
-    const n = e, o = ce(), r = fe(), i = D(), a = D(n.modelValue), {
-      readonly: s,
-      icon: h,
-      iconPosition: g,
-      valid: l,
-      error: u,
-      loading: c,
-      floating: p,
-      label: v,
-      modelValue: C
-    } = $(n), w = Se(a, n.debounce || 0);
-    G(w, (m) => t("update:modelValue", m));
-    const I = { icon: h, iconPosition: g }, E = {
+  props: $e,
+  emits: Be,
+  setup(e, { emit: r }) {
+    const t = e, o = ne(), n = oe(), s = F(), { icon: i, iconPosition: d, label: a, modelValue: h, autoclear: u, limit: c } = L(t), p = t.id || t.name, f = `${t.name}-label`, g = `${t.name}-hint`, v = m(
+      () => t.floating && y.isEmpty(t.placeholder) ? " " : t.placeholder
+    ), S = De(h, t.debounce, r), { hasIconLeft: C, hasIconRight: I } = Pe(i, d, {
       iconLeft: o["icon-left"],
       iconRight: o["icon-right"]
-    }, { hasIconLeft: x, hasIconRight: k } = $e(I, E), { focused: F } = ke(i, t), { bemCssClasses: J } = U("vv-textarea", {
-      readonly: s,
-      valid: l,
-      invalid: u,
-      loading: c,
-      iconLeft: x,
-      iconRight: k,
-      floating: d(
-        () => p.value && A.isNotEmpty(v == null ? void 0 : v.value)
-      ),
-      dirty: d(() => A.isNotEmpty(C))
-    }), K = d(() => {
-      const { class: m } = r;
-      return {
-        class: m,
-        ...J.value
-      };
-    }), Q = d(() => {
-      const { style: m } = r, y = A.pickBy(
-        r,
-        (S) => S.startsWith("data-")
+    }), { focused: A } = ke(s, r), { textLength: j, formattedTextLimitLength: W } = Oe(S, {
+      mode: t.limit,
+      upperLimit: t.maxlength || 0
+    }), G = m(() => [
+      Ie("vv-textarea", {
+        modifiers: t.modifiers,
+        readonly: t.readonly,
+        valid: t.valid,
+        invalid: t.error,
+        loading: t.loading,
+        iconLeft: C,
+        iconRight: I,
+        floating: t.floating && y.isNotEmpty(t.label),
+        dirty: y.isNotEmpty(h == null ? void 0 : h.value),
+        resizable: t.resizable
+      }),
+      n.class
+    ]), U = m(() => {
+      const x = y.pickBy(
+        n,
+        (b) => b.startsWith("data-")
       );
       return {
-        style: m,
-        ...y
-      };
-    }), N = d(() => {
-      const {
-        id: m,
-        name: y,
-        autocomplete: S,
-        minlength: Y,
-        maxlength: L,
-        disabled: ee,
-        readonly: te,
-        floating: ne,
-        placeholder: j,
-        cols: re,
-        rows: oe
-      } = n, se = m || y, ie = ne && A.isEmpty(j) ? " " : j;
-      return {
-        id: se,
-        placeholder: ie,
-        name: y,
-        autocomplete: S,
-        disabled: ee,
-        readonly: te,
-        minlength: Y,
-        maxlength: L,
-        cols: re,
-        rows: oe,
-        ...T.value
+        style: n.style,
+        ...x
       };
-    }), T = d(() => {
-      const { name: m } = r, y = A.pickBy(
-        r,
-        (S) => S.startsWith("aria-")
+    }), J = m(() => {
+      const x = y.pickBy(
+        n,
+        (b) => b.startsWith("aria-")
       );
       return {
-        "aria-label": m,
-        "aria-describedby": `${m}-hint`,
-        "aria-invalid": n.error,
-        ...y
+        id: p,
+        placeholder: v.value,
+        name: t.name,
+        autocomplete: t.autocomplete,
+        disabled: t.disabled,
+        readonly: t.readonly,
+        minlength: t.minlength,
+        maxlength: t.maxlength,
+        cols: t.cols,
+        rows: t.rows,
+        required: t.required,
+        tabindex: n.tabindex,
+        "aria-invalid": t.error,
+        "aria-valid": !t.valid,
+        "aria-labeledby": f,
+        "aria-describedby": g,
+        "aria-errormessage": g,
+        ...x
       };
-    }), V = d(() => {
-      const { modelValue: m, valid: y, error: S } = n;
+    }), T = m(() => {
+      const { modelValue: x, valid: b, error: B, maxlength: X, hintLabel: Y } = t;
       return {
-        valid: y,
-        error: S,
-        modelValue: m
+        valid: b,
+        error: B,
+        modelValue: x,
+        hintLabel: Y,
+        maxlength: X,
+        textLength: j
       };
-    }), X = Oe(n, o);
-    return de(() => {
-      n.autofocus && (F.value = !0), console.log("Focused", F.value);
-    }), (m, y) => (O(), q("div", P(f(Q), { class: f(K) }), [
-      f(v) ? (O(), q("label", {
+    }), K = Ee(t, o);
+    function Q() {
+      S.value = "";
+    }
+    return se(() => {
+      t.autofocus && (A.value = !0), console.log("Focused", A.value);
+    }), (x, b) => ($(), E("div", w(l(U), { class: l(G) }), [
+      l(a) ? ($(), E("label", {
         key: 0,
-        for: f(N).id
-      }, pe(f(v)), 9, Fe)) : _("", !0),
-      R("div", Ne, [
-        f(x) ? H(m.$slots, "icon-left", M(P({ key: 0 }, f(V))), () => [
-          B(Z, {
+        id: f,
+        for: l(p)
+      }, q(l(a)), 9, Ne)) : _("", !0),
+      V("div", Fe, [
+        l(C) ? D(x.$slots, "icon-left", R(w({ key: 0 }, l(T))), () => [
+          P(N, {
             class: "vv-textarea__icon-left",
-            name: f(h)
+            name: l(i)
           }, null, 8, ["name"])
         ]) : _("", !0),
-        me(R("textarea", P({
+        ie(V("textarea", w({
           ref_key: "input",
-          ref: i
-        }, f(N), {
-          "onUpdate:modelValue": y[0] || (y[0] = (S) => a.value = S),
-          onInput: y[1] || (y[1] = (S) => t("input", S))
+          ref: s,
+          "onUpdate:modelValue": b[0] || (b[0] = (B) => ae(S) ? S.value = B : null)
+        }, l(J), {
+          onInput: b[1] || (b[1] = (B) => r("input", B))
         }), null, 16), [
-          [ge, a.value]
+          [le, l(S)]
         ]),
-        f(k) ? H(m.$slots, "icon-right", M(P({ key: 1 }, f(V))), () => [
-          B(Z, { name: f(h) }, null, 8, ["name"])
-        ]) : _("", !0)
+        l(u) && l(j) > 0 ? ($(), E("button", {
+          key: 1,
+          class: "vv-button vv-button--ghost",
+          onClick: Q
+        }, [
+          P(N, { name: "clear-field" })
+        ])) : _("", !0),
+        l(I) ? D(x.$slots, "icon-right", R(w({ key: 2 }, l(T))), () => [
+          P(N, { name: l(i) }, null, 8, ["name"])
+        ]) : _("", !0),
+        l(c) ? ($(), E("span", Le, [
+          D(x.$slots, "limit", {}, () => [
+            ue(q(l(W)), 1)
+          ])
+        ])) : _("", !0)
       ]),
-      B(f(X), {
-        id: f(T)["aria-describedby"],
+      P(l(K), {
+        id: g,
         class: "vv-textarea__hint"
-      }, null, 8, ["id"])
+      })
     ], 16));
   }
 });