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

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

@@ -1,37 +1,61 @@
-import { defineComponent as L, unref as r, openBlock as P, createBlock as H, mergeProps as F, createCommentVNode as x, createElementBlock as R, normalizeClass as ee, toDisplayString as M, createElementVNode as z, renderSlot as T, normalizeProps as C, guardReactiveProps as A, withDirectives as te, isRef as oe, vModelText as ne, createTextVNode as re, createVNode as ae } from "vue";
-import { nanoid as se } from "nanoid";
-import { iconExists as $, Icon as ie, addIcon as le } from "@iconify/vue";
-function N(l) {
-  return Array.isArray(l) ? l.filter((a) => isString(a)).join(" ") : l;
+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 j(e) {
+  return Array.isArray(e) ? e.filter((t) => ke(t)).join(" ") : e;
 }
-function ue(l, a) {
+function Oe(e, t) {
   const {
-    invalid: e,
-    valid: m,
+    invalid: r,
+    valid: a,
     hint: i,
-    loading: f
-  } = a, {
-    hintLabel: n,
+    loading: c
+  } = t, {
+    hintLabel: s,
     modelValue: y,
-    valid: p,
-    validLabel: c,
-    invalid: t,
-    invalidLabel: o,
-    ...d
-  } = toRefs(l), s = resolveFieldData(d, "loading"), u = resolveFieldData(d, "loadingLabel"), g = computed(() => t.value ? !!(t.value && e || o != null && o.value && Array.isArray(o.value) && o.value.length > 0 || o != null && o.value && !isEmpty(o)) : !1), v = computed(
-    () => !!(n && n.value || i)
-  ), S = computed(
-    () => !!(c && c.value || m)
-  ), w = computed(
-    () => !!(s != null && s.value && f || s != null && s.value && (u != null && u.value))
-  ), I = computed(
-    () => v.value || S.value || g.value || w.value
+    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: g,
-    hasHint: v,
-    hasValid: S,
-    hasLoading: w,
+    hasHint: I,
+    hasValid: x,
+    hasLoading: h,
     HintSlot: {
       name: "HintSlot",
       props: {
@@ -40,34 +64,34 @@ function ue(l, a) {
           default: () => ({})
         }
       },
-      setup(B) {
-        const E = computed(() => {
-          const b = toReactive({
-            hintLabel: n,
+      setup(k) {
+        const O = o(() => {
+          const S = we({
+            hintLabel: s,
             modelValue: y,
-            valid: p,
-            validLabel: c,
-            invalid: t,
-            invalidLabel: o,
-            loading: s,
-            loadingLabel: u,
-            ...B.params
+            valid: v,
+            validLabel: f,
+            invalid: n,
+            invalidLabel: l,
+            loading: d,
+            loadingLabel: m,
+            ...k.params
           });
-          return t != null && t.value ? (e == null ? void 0 : e(b)) || N(o == null ? void 0 : o.value) || (n == null ? void 0 : n.value) : p != null && p.value ? (m == null ? void 0 : m(b)) || N(c == null ? void 0 : c.value) || (n == null ? void 0 : n.value) : s != null && s.value ? (f == null ? void 0 : f(b)) || N(u == null ? void 0 : u.value) || (n == null ? void 0 : n.value) : (i == null ? void 0 : i(b)) || N(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: I,
+          isVisible: V,
           hasInvalid: g,
-          hasValid: S,
-          hintContent: E
+          hasValid: x,
+          hintContent: O
         };
       },
       render() {
         if (this.isVisible)
-          return h(
+          return pe(
             "small",
             {
-              role: this.hasInvalid || this.hasValid ? "alert" : void 0
+              role: this.hasInvalid ? "alert" : this.hasValid ? "status" : void 0
             },
             this.hintContent
           );
@@ -75,294 +99,613 @@ function ue(l, a) {
     }
   };
 }
-const ce = "ds", de = {
+const Ce = {
+  /**
+   * Color
+   */
   color: String,
+  /**
+   * Width
+   */
   width: {
     type: [String, Number]
   },
+  /**
+   * Height
+   */
   height: {
     type: [String, Number]
   },
+  /**
+   * Icon name
+   * Can be the full composition of iconify name "@{provider}:{prefix}:{name}" or "{prefix}:{name}" or "{name}"
+   * https://docs.iconify.design/api/providers.html#provider-in-icon-name
+   */
   name: {
     type: String,
     required: !0
   },
+  /**
+   * By default 'vv'
+   * If custom collection is not added with "addCollection" DS class method, this prop could not be used
+   * Icon provider: https://docs.iconify.design/api/providers.html#provider-in-icon-name
+   */
   provider: {
     type: String
   },
+  /**
+   * The name of icon set.
+   * Icon default options prefix: simple | normal | detailed
+   */
   prefix: {
     type: String,
     default: "normal"
   },
+  /**
+   * Url remote SVG icon
+   */
   src: String,
+  /**
+   * Horizontal flip
+   */
   horizontalFlip: Boolean,
+  /**
+   * Vertical flip
+   */
   verticalFlip: Boolean,
+  /**
+   * String alternative to "horizontalFlip" and "verticalFlip".
+   * Example: https://docs.iconify.design/icon-components/vue/transform.html
+   */
   flip: String,
+  /**
+   * Icon render mode
+   * 'style' = 'bg' or 'mask', depending on icon content
+   * 'bg' = span with style using `background`
+   * 'mask' = span with style using `mask`
+   * 'svg' = svg
+   * Iconify doc: https://docs.iconify.design/iconify-icon/modes.html
+   */
   mode: String,
+  /**
+   * Toggles inline or block mode
+   * Example https://docs.iconify.design/icon-components/vue/inline.html
+   */
   inline: Boolean,
+  /**
+   * rotates icon
+   * Example https://docs.iconify.design/icon-components/vue/transform.html
+   */
   rotate: [Number, String],
+  /**
+   * A callback that is called when icon data has been loaded
+   */
   onLoad: Function,
+  /**
+   * SVG icon string
+   */
   svg: String,
+  /**
+   * Icon modifiers: vv-icon css helper classes, value/s are concatened with prefix 'vv-icon--'
+   * @values string | Array<string>
+   */
   modifiers: {
     type: [String, Array]
   }
-}, pe = {
+};
+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"
-}, q = /* @__PURE__ */ L({
-  ...pe,
-  props: de,
-  setup(l) {
-    const a = l, e = ref(!0), { modifiers: m } = toRefs(a), i = inject(ce), { bemCssClasses: f } = useBemModifiers("vv-icon", {
-      modifiers: m
-    }), n = computed(() => a.provider || (i == null ? void 0 : i.provider)), y = computed(() => {
-      const t = a.name ?? "", o = `@${n.value}:${a.prefix}:${a.name}`;
-      return $(t) ? t : $(o) ? o : (i == null ? void 0 : i.iconsCollections.find((d) => {
-        const s = `@${n.value}:${d.prefix}:${t}`;
-        if ($(s))
-          return s;
-      })) || t;
+}, 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;
+        }
+      )) || n;
     });
-    function p(t) {
-      let o = null;
+    function v(n) {
+      let l = null;
       if (typeof window > "u") {
         const { JSDOM: g } = require("jsdom");
-        o = new g().window;
+        l = new g().window;
       }
-      return (o ? new o.DOMParser() : new window.DOMParser()).parseFromString(t, "text/html").querySelector("svg");
+      return (l ? new l.DOMParser() : new window.DOMParser()).parseFromString(n, "text/html").querySelector("svg");
     }
-    function c(t) {
-      const o = p(t), d = (o == null ? void 0 : o.innerHTML.trim()) || "";
-      o && d && le(`@${n.value}:${a.prefix}:${a.name}`, {
-        body: d,
-        height: o.viewBox.baseVal.height,
-        width: o.viewBox.baseVal.width
+    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: l.viewBox.baseVal.height,
+        width: l.viewBox.baseVal.width
       });
     }
-    return i && (a.src && !$(`@${n.value}:${a.prefix}:${a.name}`) ? (e.value = !1, i.fetchIcon(a.src).then((t) => {
-      t && (c(t), e.value = !0);
-    }).catch((t) => {
-      throw new Error(`During fetch icon: ${t == null ? void 0 : t.message}`);
-    })) : a.svg && c(a.svg)), (t, o) => r(e) ? (P(), H(r(ie), F({
+    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: r(f)
+      class: u(c)
     }, {
-      inline: t.inline,
-      width: t.width,
-      height: t.height,
-      horizontalFlip: t.horizontalFlip,
-      verticalFlip: t.verticalFlip,
-      flip: t.flip,
-      rotate: t.rotate,
-      color: t.color,
-      onLoad: t.onLoad,
-      icon: r(y)
-    }), null, 16, ["class"])) : x("", !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);
   }
-}), 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]
-}, fe = {
+}, Le = {
+  /**
+   * Invalid status
+   */
   invalid: Boolean,
+  /**
+   * Invalid label
+   */
   invalidLabel: [String, Array]
-}, ve = {
+}, De = {
+  /**
+   * Loading status
+   */
   loading: Boolean,
-  loadingLabel: String
-}, ge = {
+  /**
+   * Loading label
+   */
+  loadingLabel: {
+    type: String,
+    default: "Loading..."
+  }
+}, te = {
+  /**
+   * Whether the form control is disabled
+   */
   disabled: Boolean
-}, he = {
+}, 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
-}, ye = {
+}, Me = {
+  /**
+   * Component BEM modifiers
+   */
   modifiers: [String, Array]
-}, Se = {
+}, Re = {
   hintLabel: { type: String, default: "" }
-}, be = {
+}, Te = {
+  /**
+   * Show character limit
+   */
   count: {
     type: [Boolean, String],
     default: !1,
-    validator: (l) => [!0, !1, "limit", "countdown"].includes(l)
+    validator: (e) => [!0, !1, "limit", "countdown"].includes(e)
   }
-}, Pe = {
+}, Ke = {
+  /**
+   * Milliseconds to wait before emitting the input event
+   */
   debounce: [Number, String]
-}, j = {
-  LEFT: "left",
-  RIGHT: "right"
-}, we = {
+}, Je = {
+  /**
+   * VvIcon name or props
+   * @see VVIcon
+   */
   icon: { type: [String, Object] },
+  /**
+   * VvIcon position
+   */
   iconPosition: {
     type: String,
-    validation: (l) => Object.values(j).includes(l),
-    default: j.RIGHT
+    default: P.before,
+    validation: (e) => Object.values(P).includes(e)
   }
-}, Ve = {
+}, Ue = {
+  /**
+   * Global attribute tabindex
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
+   */
   tabindex: { type: [String, Number], default: 0 }
-}, xe = {
+}, We = {
+  /**
+   * If true the label will be floating
+   */
   floating: Boolean
-}, Ie = {
-  id: [String, Number],
+}, Ye = {
+  /**
+   * Global attribute id
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
+   */
+  id: [String, Number]
+};
+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 }
-}, Be = {
+}, Qe = {
+  /**
+   * Global attribute autofocus
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
+   */
   autofocus: Boolean
-}, _e = {
+}, Xe = {
+  /**
+   * Global attribute autocomplete
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
+   */
   autocomplete: { type: String, default: "off" }
-}, Ce = {
-  ...Ie,
-  ...Be,
-  ..._e,
-  ...Ve,
-  ...ge,
-  ...he,
-  ...me,
-  ...fe,
-  ...Se,
-  ...ve,
-  ...ye,
-  ...be,
-  ...Pe,
-  ...we,
-  ...xe,
+}, 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
+   * Available for input types: text, search, url, tel, email, password
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength
+   */
   minlength: Number,
+  /**
+   * Input / Textarea maxlength
+   * Maximum length (number of characters) of value
+   * Available for input types: text, search, url, tel, email, password
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength
+   */
   maxlength: Number,
+  /**
+   * Input / Textarea placeholder
+   * Text that appears in the form control when it has no value set
+   * Available for input types: text, search, url, tel, email, password, number
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder
+   */
   placeholder: String,
-  required: Boolean,
-  label: String
-}, $e = {
+  /**
+   * Input / Textarea required
+   * A value is required or must be check for the form to be submittable
+   * Available for all input types except color
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#required
+   */
+  required: Boolean
+};
+({
+  ...te,
+  ...re,
+  ...He,
+  ...ze,
+  ...Ae,
+  /**
+   * Button type
+   */
+  type: R.button
+});
+const et = {
   hard: "hard",
   soft: "soft"
-}, Ne = {
+}, tt = {
   true: !0,
   false: !1,
   default: "default"
-}, Fe = ["update:modelValue", "focus", "blur", "keyup"], Ee = {
-  ...Ce,
+}, rt = ["update:modelValue", "focus", "blur", "keyup"], at = {
+  ...Ze,
+  /**
+   * Textarea value
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#value
+   */
   modelValue: String,
+  /**
+   * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. If it is not specified, the default value is 20.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#cols
+   */
   cols: { type: [String, Number], default: 20 },
+  /**
+   * The number of visible text lines for the control. If it is specified, it must be a positive integer. If it is not specified, the default value is 2.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#rows
+   */
   rows: { type: [String, Number], default: 2 },
-  wrap: { type: String, default: $e.soft },
-  spellcheck: { type: [Boolean, String], default: Ne.default },
+  /**
+   * 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: 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: tt.default },
+  /**
+   * If true, the textarea will be resizable
+   */
   resizable: Boolean
-}, ke = ["for"], De = { class: "vv-textarea__wrapper" }, Re = ["id"], 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"
+}, ft = { class: "vv-textarea__inner" }, vt = ["id"], pt = {
+  key: 1,
+  class: "vv-textarea__input-after"
+}, mt = {
+  key: 2,
   class: "vv-textarea__limit"
-}, Ae = {
+}, gt = {
   name: "VvTextarea"
-}, ze = /* @__PURE__ */ L({
-  ...Ae,
-  props: Ee,
-  emits: Fe,
-  setup(l, { emit: a }) {
-    const e = l, m = useSlots(), i = ref(), {
-      icon: f,
-      iconPosition: n,
-      label: y,
-      modelValue: p,
-      count: c,
-      valid: t,
-      invalid: o,
-      loading: d
-    } = toRefs(e), s = computed(() => String(e.id || se())), u = computed(() => `${s.value}-hint`), g = computed(
-      () => e.floating && isEmpty(e.placeholder) ? " " : e.placeholder
-    ), v = useDebouncedInput(p, a, e.debounce), { hasIcon: S, hasIconLeft: w, hasIconRight: I } = useComponentIcon(
-      f,
-      n
-    ), { focused: B } = useComponentFocus(i, a), E = useElementVisibility(i);
-    watch(E, (V) => {
-      V && 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: b } = useTextCount(v, {
-      mode: e.count,
-      upperLimit: e.maxlength,
-      lowerLimit: e.minlength
-    }), G = computed(() => !e.disabled && !e.readonly), K = computed(
-      () => G.value ? e.tabindex : -1
-    ), J = computed(() => !isEmpty(p)), U = 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: W, hasHint: X, hasInvalid: O } = ue(e, m), { bemCssClasses: Q } = useBemModifiers("vv-textarea", {
-      modifiers: e.modifiers,
-      valid: t,
-      invalid: o,
-      loading: d,
-      disabled: e.disabled,
-      readonly: e.readonly,
-      iconLeft: w,
-      iconRight: I,
-      floating: e.floating && !isEmpty(e.label),
-      dirty: J,
-      focused: B,
-      resizable: e.resizable
-    }), Y = computed(
+    }), { HintSlot: ie, hasHint: ce, hasInvalid: K } = Oe(r, a), de = ee(
+      "vv-textarea",
+      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
+      }))
+    ), fe = o(
       () => ({
-        name: e.name,
-        placeholder: g.value,
-        tabindex: K.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": U.value,
-        "aria-describedby": !O.value && X.value ? u.value : void 0,
-        "aria-errormessage": O.value ? u.value : void 0
+        name: r.name,
+        placeholder: x.value,
+        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
       })
-    ), k = computed(() => ({
-      valid: e.valid,
-      invalid: e.invalid,
-      modelValue: e.modelValue,
-      hintLabel: e.hintLabel,
-      maxlength: e.maxlength,
-      minlength: e.minlength,
-      clear: Z
-    })), Z = () => {
-      v.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 (V, _) => (P(), R("div", {
-      class: ee(r(Q))
+    return (_, C) => (b(), $("div", {
+      class: he(u(de))
     }, [
-      r(y) ? (P(), R("label", {
+      u(v) ? (b(), $("label", {
         key: 0,
-        for: r(s),
+        for: u(g),
         class: "vv-textarea__label"
-      }, M(r(y)), 9, ke)) : x("", !0),
-      z("div", De, [
-        T(V.$slots, "before", C(A(r(k))), () => [
-          r(w) ? (P(), H(q, F({
+      }, 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-left"
-          }, r(S)), null, 16)) : x("", !0)
-        ]),
-        te(z("textarea", F({
-          id: r(s),
-          ref_key: "textarea",
-          ref: i,
-          "onUpdate:modelValue": _[0] || (_[0] = (D) => oe(v) ? v.value = D : null)
-        }, r(Y), {
-          onKeyup: _[1] || (_[1] = (D) => a("keyup", D))
-        }), null, 16, Re), [
-          [ne, r(v)]
-        ]),
-        T(V.$slots, "after", C(A(r(k))), () => [
-          r(I) ? (P(), H(q, C(F({ key: 0 }, r(S))), null, 16)) : x("", !0)
+            class: "vv-textarea__icon"
+          }, u(V)), null, 16)) : B("", !0),
+          be(D("textarea", E({
+            id: u(g),
+            ref_key: "textarea",
+            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)]
+          ]),
+          u(O) ? (b(), M(W, E({
+            key: 1,
+            class: "vv-textarea__icon vv-textarea__icon-after"
+          }, u(V)), null, 16)) : B("", !0)
         ]),
-        r(c) ? (P(), R("span", Te, [
-          T(V.$slots, "count", C(A(r(k))), () => [
-            re(M(r(b)), 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)
           ])
-        ])) : x("", !0)
+        ])) : B("", !0)
       ]),
-      ae(r(W), {
-        id: r(u),
+      Be(u(ie), {
+        id: u(I),
         class: "vv-textarea__hint"
       }, null, 8, ["id"])
     ], 2));
   }
 });
 export {
-  ze as default
+  _t as default
 };