@volverjs/ui-vue 0.0.3 → 0.0.4

package/dist/components/VvTextarea/VvTextarea.es.js

@@ -1,36 +1,61 @@
-import { defineComponent as U, unref as a, openBlock as y, createBlock as z, mergeProps as E, createCommentVNode as _, createElementBlock as P, normalizeClass as ne, toDisplayString as R, createElementVNode as A, renderSlot as O, normalizeProps as j, guardReactiveProps as T, withDirectives as ae, isRef as se, vModelText as ie, createTextVNode as le, createVNode as ue } from "vue";
-import { iconExists as N, Icon as ce, addIcon as de } from "@iconify/vue";
-function k(t) {
-  return Array.isArray(t) ? t.filter((s) => isString(s)).join(" ") : t;
+import { unref as u, toRefs as T, computed as o, h as pe, inject as me, defineComponent as Y, ref as G, openBlock as b, createBlock as M, mergeProps as E, createCommentVNode as B, watch as Q, useSlots as ge, createElementBlock as $, normalizeClass as he, toDisplayString as J, createElementVNode as D, renderSlot as z, normalizeProps as H, guardReactiveProps as q, withDirectives as be, isRef as ye, vModelText as Se, createTextVNode as _e, createVNode as Be } from "vue";
+import { toReactive as we, useFocus as Ie, useElementVisibility as xe } from "@vueuse/core";
+import { iconExists as N, Icon as $e, addIcon as Pe } from "@iconify/vue";
+import { nanoid as Ve } from "nanoid";
+function U(e, t) {
+  if (e && Object.keys(e).length && t) {
+    if (t.indexOf(".") === -1)
+      return e[t];
+    {
+      const r = t.split(".");
+      let a = e;
+      for (let i = 0, c = r.length; i < c; ++i) {
+        if (e == null)
+          return null;
+        a = a[r[i]];
+      }
+      return a;
+    }
+  } else
+    return null;
+}
+function A(e) {
+  return ((t) => t == null || t === "" || Array.isArray(t) && t.length === 0 || !(t instanceof Date) && typeof t == "object" && Object.keys(t).length === 0)(u(e));
+}
+function ke(e) {
+  return typeof e == "string" || e instanceof String;
 }
-function pe(t, s) {
+function j(e) {
+  return Array.isArray(e) ? e.filter((t) => ke(t)).join(" ") : e;
+}
+function Oe(e, t) {
   const {
-    invalid: e,
-    valid: l,
-    hint: c,
-    loading: m
-  } = s, {
-    hintLabel: n,
-    modelValue: B,
-    valid: f,
-    validLabel: u,
-    invalid: o,
-    invalidLabel: r,
-    ...d
-  } = toRefs(t), i = resolveFieldData(d, "loading"), p = resolveFieldData(d, "loadingLabel"), v = computed(() => o.value ? !!(o.value && e || r != null && r.value && Array.isArray(r.value) && r.value.length > 0 || r != null && r.value && !isEmpty(r)) : !1), w = computed(
-    () => !!(n && n.value || c)
-  ), x = computed(
-    () => !!(u && u.value || l)
-  ), g = computed(
-    () => !!(i != null && i.value && m || i != null && i.value && (p != null && p.value))
-  ), V = computed(
-    () => w.value || x.value || v.value || g.value
+    invalid: r,
+    valid: a,
+    hint: i,
+    loading: c
+  } = t, {
+    hintLabel: s,
+    modelValue: y,
+    valid: v,
+    validLabel: f,
+    invalid: n,
+    invalidLabel: l,
+    ...p
+  } = T(e), d = U(p, "loading"), m = U(p, "loadingLabel"), g = o(() => n.value ? !!(n.value && r || l != null && l.value && Array.isArray(l.value) && l.value.length > 0 || l != null && l.value && !A(l)) : !1), I = o(
+    () => !!(s && s.value || i)
+  ), x = o(
+    () => !!(f && f.value || a)
+  ), h = o(
+    () => !!(d != null && d.value && c || d != null && d.value && (m != null && m.value))
+  ), V = o(
+    () => I.value || x.value || g.value || h.value
   );
   return {
-    hasInvalid: v,
-    hasHint: w,
+    hasInvalid: g,
+    hasHint: I,
     hasValid: x,
-    hasLoading: g,
+    hasLoading: h,
     HintSlot: {
       name: "HintSlot",
       props: {
@@ -39,31 +64,31 @@ function pe(t, s) {
           default: () => ({})
         }
       },
-      setup(I) {
-        const $ = computed(() => {
-          const b = toReactive({
-            hintLabel: n,
-            modelValue: B,
-            valid: f,
-            validLabel: u,
-            invalid: o,
-            invalidLabel: r,
-            loading: i,
-            loadingLabel: p,
-            ...I.params
+      setup(k) {
+        const O = o(() => {
+          const S = we({
+            hintLabel: s,
+            modelValue: y,
+            valid: v,
+            validLabel: f,
+            invalid: n,
+            invalidLabel: l,
+            loading: d,
+            loadingLabel: m,
+            ...k.params
           });
-          return o != null && o.value ? (e == null ? void 0 : e(b)) || k(r == null ? void 0 : r.value) || (n == null ? void 0 : n.value) : f != null && f.value ? (l == null ? void 0 : l(b)) || k(u == null ? void 0 : u.value) || (n == null ? void 0 : n.value) : i != null && i.value ? (m == null ? void 0 : m(b)) || k(p == null ? void 0 : p.value) || (n == null ? void 0 : n.value) : (c == null ? void 0 : c(b)) || k(n == null ? void 0 : n.value) || (n == null ? void 0 : n.value);
+          return n != null && n.value ? (r == null ? void 0 : r(S)) || j(l == null ? void 0 : l.value) || (s == null ? void 0 : s.value) : v != null && v.value ? (a == null ? void 0 : a(S)) || j(f == null ? void 0 : f.value) || (s == null ? void 0 : s.value) : d != null && d.value ? (c == null ? void 0 : c(S)) || j(m == null ? void 0 : m.value) || (s == null ? void 0 : s.value) : (i == null ? void 0 : i(S)) || j(s == null ? void 0 : s.value) || (s == null ? void 0 : s.value);
         });
         return {
           isVisible: V,
-          hasInvalid: v,
+          hasInvalid: g,
           hasValid: x,
-          hintContent: $
+          hintContent: O
         };
       },
       render() {
         if (this.isVisible)
-          return h(
+          return pe(
             "small",
             {
               role: this.hasInvalid ? "alert" : this.hasValid ? "status" : void 0
@@ -74,7 +99,7 @@ function pe(t, s) {
     }
   };
 }
-const fe = {
+const Ce = {
   /**
    * Color
    */
@@ -167,102 +192,180 @@ const fe = {
   modifiers: {
     type: [String, Array]
   }
-}, ve = {
+};
+var w = /* @__PURE__ */ ((e) => (e.left = "left", e.right = "right", e.top = "top", e.bottom = "bottom", e))(w || {}), X = /* @__PURE__ */ ((e) => (e.topStart = "top-start", e.topEnd = "top-end", e.bottomStart = "bottom-start", e.bottomEnd = "bottom-end", e.leftStart = "left-start", e.leftEnd = "left-end", e.rightStart = "right-start", e.rightEnd = "right-end", e))(X || {}), P = /* @__PURE__ */ ((e) => (e.before = "before", e.after = "after", e))(P || {}), R = /* @__PURE__ */ ((e) => (e.button = "button", e.submit = "submit", e.reset = "reset", e))(R || {}), Z = /* @__PURE__ */ ((e) => (e._blank = "_blank", e._self = "_self", e._parent = "_parent", e._top = "_top", e))(Z || {});
+const Ne = Symbol.for("volver");
+function je() {
+  return me(Ne);
+}
+function ee(e, t, r) {
+  return o(() => {
+    const a = {
+      [e]: !0
+    }, i = typeof (t == null ? void 0 : t.value) == "string" ? t.value.split(" ") : t == null ? void 0 : t.value;
+    return i && Array.isArray(i) && i.forEach((c) => {
+      a[`${e}--${c}`] = !0;
+    }), r && Object.keys(r.value).forEach((c) => {
+      a[`${e}--${c}`] = u(r.value[c]);
+    }), a;
+  });
+}
+const Ee = {
   name: "VvIcon"
-}, K = /* @__PURE__ */ U({
-  ...ve,
-  props: fe,
-  setup(t) {
-    const s = t, e = ref(!0), l = useVolver(), { modifiers: c } = toRefs(s), m = useBemModifiers("vv-icon", c), n = computed(() => s.provider || (l == null ? void 0 : l.provider)), B = computed(() => {
-      const o = s.name ?? "", r = `@${n.value}:${s.prefix}:${s.name}`;
-      return N(o) ? o : N(r) ? r : (l == null ? void 0 : l.iconsCollections.find(
-        (d) => {
-          const i = `@${n.value}:${d.prefix}:${o}`;
-          if (N(i))
-            return i;
+}, W = /* @__PURE__ */ Y({
+  ...Ee,
+  props: Ce,
+  setup(e) {
+    const t = e, r = G(!0), a = je(), { modifiers: i } = T(t), c = ee("vv-icon", i), s = o(() => t.provider || (a == null ? void 0 : a.provider)), y = o(() => {
+      const n = t.name ?? "", l = `@${s.value}:${t.prefix}:${t.name}`;
+      return N(n) ? n : N(l) ? l : (a == null ? void 0 : a.iconsCollections.find(
+        (p) => {
+          const d = `@${s.value}:${p.prefix}:${n}`;
+          if (N(d))
+            return d;
         }
-      )) || o;
+      )) || n;
     });
-    function f(o) {
-      let r = null;
+    function v(n) {
+      let l = null;
       if (typeof window > "u") {
-        const { JSDOM: v } = require("jsdom");
-        r = new v().window;
+        const { JSDOM: g } = require("jsdom");
+        l = new g().window;
       }
-      return (r ? new r.DOMParser() : new window.DOMParser()).parseFromString(o, "text/html").querySelector("svg");
+      return (l ? new l.DOMParser() : new window.DOMParser()).parseFromString(n, "text/html").querySelector("svg");
     }
-    function u(o) {
-      const r = f(o), d = (r == null ? void 0 : r.innerHTML.trim()) || "";
-      r && d && de(`@${n.value}:${s.prefix}:${s.name}`, {
-        body: d,
+    function f(n) {
+      const l = v(n), p = (l == null ? void 0 : l.innerHTML.trim()) || "";
+      l && p && Pe(`@${s.value}:${t.prefix}:${t.name}`, {
+        body: p,
         // Set height and width from svg content
-        height: r.viewBox.baseVal.height,
-        width: r.viewBox.baseVal.width
+        height: l.viewBox.baseVal.height,
+        width: l.viewBox.baseVal.width
       });
     }
-    return l && (s.src && !N(`@${n.value}:${s.prefix}:${s.name}`) ? (e.value = !1, l.fetchIcon(s.src).then((o) => {
-      o && (u(o), e.value = !0);
-    }).catch((o) => {
-      throw new Error(`During fetch icon: ${o == null ? void 0 : o.message}`);
-    })) : s.svg && u(s.svg)), (o, r) => a(e) ? (y(), z(a(ce), E({
+    return a && (t.src && !N(`@${s.value}:${t.prefix}:${t.name}`) ? (r.value = !1, a.fetchIcon(t.src).then((n) => {
+      n && (f(n), r.value = !0);
+    }).catch((n) => {
+      throw new Error(`During fetch icon: ${n == null ? void 0 : n.message}`);
+    })) : t.svg && f(t.svg)), (n, l) => u(r) ? (b(), M(u($e), E({
       key: 0,
-      class: a(m)
+      class: u(c)
     }, {
-      inline: o.inline,
-      width: o.width,
-      height: o.height,
-      horizontalFlip: o.horizontalFlip,
-      verticalFlip: o.verticalFlip,
-      flip: o.flip,
-      rotate: o.rotate,
-      color: o.color,
-      onLoad: o.onLoad,
-      icon: a(B)
-    }), null, 16, ["class"])) : _("", !0);
+      inline: n.inline,
+      width: n.width,
+      height: n.height,
+      horizontalFlip: n.horizontalFlip,
+      verticalFlip: n.verticalFlip,
+      flip: n.flip,
+      rotate: n.rotate,
+      color: n.color,
+      onLoad: n.onLoad,
+      icon: u(y)
+    }), null, 16, ["class"])) : B("", !0);
   }
-});
-var H = /* @__PURE__ */ ((t) => (t.left = "left", t.right = "right", t.top = "top", t.bottom = "bottom", t))(H || {}), W = /* @__PURE__ */ ((t) => (t.topStart = "top-start", t.topEnd = "top-end", t.bottomStart = "bottom-start", t.bottomEnd = "bottom-end", t.leftStart = "left-start", t.leftEnd = "left-end", t.rightStart = "right-start", t.rightEnd = "right-end", t))(W || {}), M = /* @__PURE__ */ ((t) => (t.before = "before", t.after = "after", t))(M || {});
-const me = {
+}), Ae = {
+  /**
+   * The router-link/nuxt-link property, if it is defined the button is rendered as a ruouter-link or nuxt-link.
+   * @see Documentation of [router-link](https://router.vuejs.org/api/#router-link) and [nuxt-link](https://nuxtjs.org/api/components-nuxt-link/)
+   */
+  to: {
+    type: [String, Object]
+  },
+  /**
+   * Anchor href
+   */
+  href: String,
+  /**
+   * Anchor target
+   */
+  target: {
+    type: String,
+    validator: (e) => Object.values(Z).includes(e)
+  },
+  /**
+   * Anchor rel
+   */
+  rel: {
+    type: String,
+    default: "noopener noreferrer"
+  }
+}, Fe = {
+  /**
+   * Valid status
+   */
   valid: Boolean,
+  /**
+   * Valid label
+   */
   validLabel: [String, Array]
-}, ge = {
+}, Le = {
+  /**
+   * Invalid status
+   */
   invalid: Boolean,
+  /**
+   * Invalid label
+   */
   invalidLabel: [String, Array]
-}, he = {
+}, De = {
+  /**
+   * Loading status
+   */
   loading: Boolean,
-  loadingLabel: String
-}, ye = {
+  /**
+   * Loading label
+   */
+  loadingLabel: {
+    type: String,
+    default: "Loading..."
+  }
+}, te = {
   /**
    * Whether the form control is disabled
    */
   disabled: Boolean
-}, be = {
+}, ze = {
+  /**
+   * Whether the item is active
+   */
+  active: Boolean
+}, He = {
+  /**
+   * Whether the item is pressed
+   */
+  pressed: Boolean
+}, re = {
+  /**
+   * The item label
+   */
+  label: [String, Number]
+}, qe = {
   /**
    * The value is not editable
    */
   readonly: Boolean
-}, Se = {
+}, Me = {
   /**
    * Component BEM modifiers
    */
   modifiers: [String, Array]
-}, _e = {
+}, Re = {
   hintLabel: { type: String, default: "" }
-}, we = {
+}, Te = {
   /**
    * Show character limit
    */
   count: {
     type: [Boolean, String],
     default: !1,
-    validator: (t) => [!0, !1, "limit", "countdown"].includes(t)
+    validator: (e) => [!0, !1, "limit", "countdown"].includes(e)
   }
-}, Be = {
+}, Ke = {
   /**
    * Milliseconds to wait before emitting the input event
    */
   debounce: [Number, String]
-}, xe = {
+}, Je = {
   /**
    * VvIcon name or props
    * @see VVIcon
@@ -273,64 +376,65 @@ const me = {
    */
   iconPosition: {
     type: String,
-    default: M.before,
-    validation: (t) => Object.values(M).includes(t)
+    default: P.before,
+    validation: (e) => Object.values(P).includes(e)
   }
-}, Pe = {
+}, Ue = {
   /**
    * Global attribute tabindex
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
    */
   tabindex: { type: [String, Number], default: 0 }
-}, Ve = {
+}, We = {
   /**
    * If true the label will be floating
    */
   floating: Boolean
-}, Ie = {
+}, Ye = {
   /**
    * Global attribute id
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
    */
   id: [String, Number]
 };
-H.bottom;
-const $e = {
-  ...Ie,
+w.bottom;
+const Ge = {
+  ...Ye,
   /**
    * Input / Textarea name
    * Name of the form control. Submitted with the form as part of a name/value pair
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name
    */
   name: { type: String, required: !0 }
-}, Ce = {
+}, Qe = {
   /**
    * Global attribute autofocus
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
    */
   autofocus: Boolean
-}, Ne = {
+}, Xe = {
   /**
    * Global attribute autocomplete
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
    */
   autocomplete: { type: String, default: "off" }
-}, ke = {
-  ...$e,
-  ...Ce,
-  ...Ne,
-  ...Pe,
-  ...ye,
-  ...be,
-  ...me,
-  ...ge,
-  ..._e,
-  ...he,
-  ...Se,
-  ...we,
-  ...Be,
-  ...xe,
-  ...Ve,
+}, Ze = {
+  ...Ge,
+  ...Qe,
+  ...Xe,
+  ...Ue,
+  ...te,
+  ...qe,
+  ...Fe,
+  ...Le,
+  ...Re,
+  ...De,
+  ...Me,
+  ...Te,
+  ...Ke,
+  ...Je,
+  ...We,
+  ...re,
   /**
    * Input / Textarea minlength
    * Minimum length (number of characters) of value
@@ -358,20 +462,28 @@ const $e = {
    * Available for all input types except color
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#required
    */
-  required: Boolean,
+  required: Boolean
+};
+({
+  ...te,
+  ...re,
+  ...He,
+  ...ze,
+  ...Ae,
   /**
-   * <label> value for the Input / Textarea
+   * Button type
    */
-  label: String
-}, Ee = {
+  type: R.button
+});
+const et = {
   hard: "hard",
   soft: "soft"
-}, Fe = {
+}, tt = {
   true: !0,
   false: !1,
   default: "default"
-}, De = ["update:modelValue", "focus", "blur", "keyup"], Ae = {
-  ...ke,
+}, rt = ["update:modelValue", "focus", "blur", "keyup"], at = {
+  ...Ze,
   /**
    * Textarea value
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#value
@@ -391,157 +503,209 @@ const $e = {
    * Indicates how the control should wrap the value for form submission.
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#wrap
    */
-  wrap: { type: String, default: Ee.soft },
+  wrap: { type: String, default: et.soft },
   /**
    * Specifies whether the <textarea> is subject to spell checking by the underlying browser/OS.
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#wrap
    */
-  spellcheck: { type: [Boolean, String], default: Fe.default },
+  spellcheck: { type: [Boolean, String], default: tt.default },
   /**
    * If true, the textarea will be resizable
    */
   resizable: Boolean
-}, Oe = ["for"], je = { class: "vv-textarea__wrapper" }, Te = {
+}, nt = (e) => o(() => String((e == null ? void 0 : e.value) || Ve()));
+function lt(e, t, r = 0) {
+  let a;
+  return typeof r == "string" && (r = parseInt(r)), o({
+    get: () => e == null ? void 0 : e.value,
+    set: (i) => {
+      a && clearTimeout(a), a = setTimeout(() => {
+        t("update:modelValue", i);
+      }, r);
+    }
+  });
+}
+function ot(e, t) {
+  const r = o(
+    () => Boolean((e == null ? void 0 : e.value) && t.value === P.before)
+  ), a = o(
+    () => Boolean((e == null ? void 0 : e.value) && t.value === P.after)
+  ), i = o(
+    () => Boolean((e == null ? void 0 : e.value) && t.value === w.left)
+  ), c = o(
+    () => Boolean((e == null ? void 0 : e.value) && t.value === w.right)
+  ), s = o(
+    () => Boolean((e == null ? void 0 : e.value) && t.value === w.top)
+  ), y = o(
+    () => Boolean((e == null ? void 0 : e.value) && t.value === w.bottom)
+  );
+  return {
+    hasIcon: o(() => typeof (e == null ? void 0 : e.value) == "string" ? { name: e == null ? void 0 : e.value } : e == null ? void 0 : e.value),
+    hasIconLeft: i,
+    hasIconRight: c,
+    hasIconTop: s,
+    hasIconBottom: y,
+    hasIconBefore: r,
+    hasIconAfter: a
+  };
+}
+function st(e, t) {
+  const { focused: r } = Ie(e);
+  return Q(r, (a) => {
+    t(a ? "focus" : "blur", u(e));
+  }), {
+    focused: r
+  };
+}
+function ut(e, t) {
+  const r = o(() => (u(e) ?? "").length), a = o(() => (t == null ? void 0 : t.lowerLimit) !== void 0 && r.value < (t == null ? void 0 : t.lowerLimit) ? r.value - t.lowerLimit : (t == null ? void 0 : t.upperLimit) !== void 0 && r.value < (t == null ? void 0 : t.upperLimit) ? t.upperLimit - r.value : 0), i = o(() => (t == null ? void 0 : t.mode) === !1 ? "" : (t == null ? void 0 : t.mode) === "limit" && (t != null && t.upperLimit) ? `${r.value} / ${t.lowerLimit ? `${t.lowerLimit}-` : ""}${t.upperLimit}` : (t == null ? void 0 : t.mode) === "countdown" ? a.value === 0 ? void 0 : a : r.value);
+  return {
+    length: r,
+    gap: a,
+    formatted: i
+  };
+}
+const it = ["for"], ct = { class: "vv-textarea__wrapper" }, dt = {
   key: 0,
   class: "vv-textarea__input-before"
-}, ze = { class: "vv-textarea__inner" }, He = ["id"], Me = {
+}, ft = { class: "vv-textarea__inner" }, vt = ["id"], pt = {
   key: 1,
   class: "vv-textarea__input-after"
-}, qe = {
+}, mt = {
   key: 2,
   class: "vv-textarea__limit"
-}, Re = {
+}, gt = {
   name: "VvTextarea"
-}, We = /* @__PURE__ */ U({
-  ...Re,
-  props: Ae,
-  emits: De,
-  setup(t, { emit: s }) {
-    const e = t, l = useSlots(), c = ref(), {
-      id: m,
-      icon: n,
-      iconPosition: B,
-      label: f,
-      modelValue: u,
-      count: o,
-      valid: r,
-      invalid: d,
-      loading: i,
-      modifiers: p
-    } = toRefs(e), v = useUniqueId(m), w = computed(() => `${v.value}-hint`), x = computed(
-      () => e.floating && isEmpty(e.placeholder) ? " " : e.placeholder
-    ), g = useDebouncedInput(u, s, e.debounce), { hasIcon: V, hasIconBefore: I, hasIconAfter: $ } = useComponentIcon(
-      n,
-      B
-    ), { focused: b } = useComponentFocus(c, s), J = useElementVisibility(c);
-    watch(J, (S) => {
-      S && e.autofocus && (b.value = !0);
+}, _t = /* @__PURE__ */ Y({
+  ...gt,
+  props: at,
+  emits: rt,
+  setup(e, { emit: t }) {
+    const r = e, a = ge(), i = G(), {
+      id: c,
+      icon: s,
+      iconPosition: y,
+      label: v,
+      modelValue: f,
+      count: n,
+      valid: l,
+      invalid: p,
+      loading: d,
+      modifiers: m
+    } = T(r), g = nt(c), I = o(() => `${g.value}-hint`), x = o(
+      () => r.floating && A(r.placeholder) ? " " : r.placeholder
+    ), h = lt(f, t, r.debounce), { hasIcon: V, hasIconBefore: k, hasIconAfter: O } = ot(
+      s,
+      y
+    ), { focused: S } = st(i, t), ae = xe(i);
+    Q(ae, (_) => {
+      _ && r.autofocus && (S.value = !0);
     });
-    const { formatted: L } = useTextCount(g, {
-      mode: e.count,
-      upperLimit: e.maxlength,
-      lowerLimit: e.minlength
-    }), G = computed(() => !e.disabled && !e.readonly), Q = computed(
-      () => G.value ? e.tabindex : -1
-    ), X = computed(() => !isEmpty(u)), Y = computed(() => {
-      if (e.invalid === !0)
+    const { formatted: ne } = ut(h, {
+      mode: r.count,
+      upperLimit: r.maxlength,
+      lowerLimit: r.minlength
+    }), le = o(() => !r.disabled && !r.readonly), oe = o(
+      () => le.value ? r.tabindex : -1
+    ), se = o(() => !A(f)), ue = o(() => {
+      if (r.invalid === !0)
         return !0;
-      if (e.valid === !0)
+      if (r.valid === !0)
         return !1;
-    }), { HintSlot: Z, hasHint: ee, hasInvalid: q } = pe(e, l), te = useBemModifiers(
+    }), { HintSlot: ie, hasHint: ce, hasInvalid: K } = Oe(r, a), de = ee(
       "vv-textarea",
-      p,
-      computed(() => ({
-        valid: r.value,
-        invalid: d.value,
-        loading: i.value,
-        disabled: e.disabled,
-        readonly: e.readonly,
-        "icon-before": I.value,
-        "icon-after": $.value,
-        floating: e.floating && !isEmpty(e.label),
-        dirty: X.value,
-        focused: b.value,
-        resizable: e.resizable
+      m,
+      o(() => ({
+        valid: l.value,
+        invalid: p.value,
+        loading: d.value,
+        disabled: r.disabled,
+        readonly: r.readonly,
+        "icon-before": k.value,
+        "icon-after": O.value,
+        floating: r.floating && !A(r.label),
+        dirty: se.value,
+        focused: S.value,
+        resizable: r.resizable
       }))
-    ), oe = computed(
+    ), fe = o(
       () => ({
-        name: e.name,
+        name: r.name,
         placeholder: x.value,
-        tabindex: Q.value,
-        disabled: e.disabled,
-        readonly: e.readonly,
-        required: e.required,
-        autocomplete: e.autocomplete,
-        minlength: e.minlength,
-        maxlength: e.maxlength,
-        cols: e.cols,
-        rows: e.rows,
-        wrap: e.wrap,
-        spellcheck: e.spellcheck,
-        "aria-invalid": Y.value,
-        "aria-describedby": !q.value && ee.value ? w.value : void 0,
-        "aria-errormessage": q.value ? w.value : void 0
+        tabindex: oe.value,
+        disabled: r.disabled,
+        readonly: r.readonly,
+        required: r.required,
+        autocomplete: r.autocomplete,
+        minlength: r.minlength,
+        maxlength: r.maxlength,
+        cols: r.cols,
+        rows: r.rows,
+        wrap: r.wrap,
+        spellcheck: r.spellcheck,
+        "aria-invalid": ue.value,
+        "aria-describedby": !K.value && ce.value ? I.value : void 0,
+        "aria-errormessage": K.value ? I.value : void 0
       })
-    ), F = computed(() => ({
-      valid: e.valid,
-      invalid: e.invalid,
-      modelValue: e.modelValue,
-      hintLabel: e.hintLabel,
-      maxlength: e.maxlength,
-      minlength: e.minlength,
-      clear: re
-    })), re = () => {
-      g.value = void 0;
+    ), F = o(() => ({
+      valid: r.valid,
+      invalid: r.invalid,
+      modelValue: r.modelValue,
+      hintLabel: r.hintLabel,
+      maxlength: r.maxlength,
+      minlength: r.minlength,
+      clear: ve
+    })), ve = () => {
+      h.value = void 0;
     };
-    return (S, C) => (y(), P("div", {
-      class: ne(a(te))
+    return (_, C) => (b(), $("div", {
+      class: he(u(de))
     }, [
-      a(f) ? (y(), P("label", {
+      u(v) ? (b(), $("label", {
         key: 0,
-        for: a(v),
+        for: u(g),
         class: "vv-textarea__label"
-      }, R(a(f)), 9, Oe)) : _("", !0),
-      A("div", je, [
-        S.$slots.before ? (y(), P("div", Te, [
-          O(S.$slots, "before", j(T(a(F))))
-        ])) : _("", !0),
-        A("div", ze, [
-          a(I) ? (y(), z(K, E({
+      }, J(u(v)), 9, it)) : B("", !0),
+      D("div", ct, [
+        _.$slots.before ? (b(), $("div", dt, [
+          z(_.$slots, "before", H(q(u(F))))
+        ])) : B("", !0),
+        D("div", ft, [
+          u(k) ? (b(), M(W, E({
             key: 0,
             class: "vv-textarea__icon"
-          }, a(V)), null, 16)) : _("", !0),
-          ae(A("textarea", E({
-            id: a(v),
+          }, u(V)), null, 16)) : B("", !0),
+          be(D("textarea", E({
+            id: u(g),
             ref_key: "textarea",
-            ref: c,
-            "onUpdate:modelValue": C[0] || (C[0] = (D) => se(g) ? g.value = D : null)
-          }, a(oe), {
-            onKeyup: C[1] || (C[1] = (D) => s("keyup", D))
-          }), null, 16, He), [
-            [ie, a(g)]
+            ref: i,
+            "onUpdate:modelValue": C[0] || (C[0] = (L) => ye(h) ? h.value = L : null)
+          }, u(fe), {
+            onKeyup: C[1] || (C[1] = (L) => t("keyup", L))
+          }), null, 16, vt), [
+            [Se, u(h)]
           ]),
-          a($) ? (y(), z(K, E({
+          u(O) ? (b(), M(W, E({
             key: 1,
             class: "vv-textarea__icon vv-textarea__icon-after"
-          }, a(V)), null, 16)) : _("", !0)
+          }, u(V)), null, 16)) : B("", !0)
         ]),
-        S.$slots.after ? (y(), P("div", Me, [
-          O(S.$slots, "after", j(T(a(F))))
-        ])) : _("", !0),
-        a(o) ? (y(), P("span", qe, [
-          O(S.$slots, "count", j(T(a(F))), () => [
-            le(R(a(L)), 1)
+        _.$slots.after ? (b(), $("div", pt, [
+          z(_.$slots, "after", H(q(u(F))))
+        ])) : B("", !0),
+        u(n) ? (b(), $("span", mt, [
+          z(_.$slots, "count", H(q(u(F))), () => [
+            _e(J(u(ne)), 1)
           ])
-        ])) : _("", !0)
+        ])) : B("", !0)
       ]),
-      ue(a(Z), {
-        id: a(w),
+      Be(u(ie), {
+        id: u(I),
         class: "vv-textarea__hint"
       }, null, 8, ["id"])
     ], 2));
   }
 });
 export {
-  We as default
+  _t as default
 };