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

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

@@ -1,37 +1,36 @@
-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 { 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;
 }
-function ue(l, a) {
+function pe(t, s) {
   const {
     invalid: e,
-    valid: m,
-    hint: i,
-    loading: f
-  } = a, {
+    valid: l,
+    hint: c,
+    loading: m
+  } = s, {
     hintLabel: n,
-    modelValue: y,
-    valid: p,
-    validLabel: c,
-    invalid: t,
-    invalidLabel: o,
+    modelValue: B,
+    valid: f,
+    validLabel: u,
+    invalid: o,
+    invalidLabel: r,
     ...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
+  } = 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
   );
   return {
-    hasInvalid: g,
-    hasHint: v,
-    hasValid: S,
-    hasLoading: w,
+    hasInvalid: v,
+    hasHint: w,
+    hasValid: x,
+    hasLoading: g,
     HintSlot: {
       name: "HintSlot",
       props: {
@@ -40,26 +39,26 @@ function ue(l, a) {
           default: () => ({})
         }
       },
-      setup(B) {
-        const E = computed(() => {
+      setup(I) {
+        const $ = computed(() => {
           const b = toReactive({
             hintLabel: n,
-            modelValue: y,
-            valid: p,
-            validLabel: c,
-            invalid: t,
-            invalidLabel: o,
-            loading: s,
-            loadingLabel: u,
-            ...B.params
+            modelValue: B,
+            valid: f,
+            validLabel: u,
+            invalid: o,
+            invalidLabel: r,
+            loading: i,
+            loadingLabel: p,
+            ...I.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 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 {
-          isVisible: I,
-          hasInvalid: g,
-          hasValid: S,
-          hintContent: E
+          isVisible: V,
+          hasInvalid: v,
+          hasValid: x,
+          hintContent: $
         };
       },
       render() {
@@ -67,7 +66,7 @@ function ue(l, a) {
           return h(
             "small",
             {
-              role: this.hasInvalid || this.hasValid ? "alert" : void 0
+              role: this.hasInvalid ? "alert" : this.hasValid ? "status" : void 0
             },
             this.hintContent
           );
@@ -75,228 +74,401 @@ function ue(l, a) {
     }
   };
 }
-const ce = "ds", de = {
+const fe = {
+  /**
+   * 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 = {
+}, ve = {
   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;
+}, 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;
+        }
+      )) || o;
     });
-    function p(t) {
-      let o = null;
+    function f(o) {
+      let r = null;
       if (typeof window > "u") {
-        const { JSDOM: g } = require("jsdom");
-        o = new g().window;
+        const { JSDOM: v } = require("jsdom");
+        r = new v().window;
       }
-      return (o ? new o.DOMParser() : new window.DOMParser()).parseFromString(t, "text/html").querySelector("svg");
+      return (r ? new r.DOMParser() : new window.DOMParser()).parseFromString(o, "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}`, {
+    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,
-        height: o.viewBox.baseVal.height,
-        width: o.viewBox.baseVal.width
+        // Set height and width from svg content
+        height: r.viewBox.baseVal.height,
+        width: r.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 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({
       key: 0,
-      class: r(f)
+      class: a(m)
     }, {
-      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: 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);
   }
-}), me = {
+});
+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 = {
   valid: Boolean,
   validLabel: [String, Array]
-}, fe = {
+}, ge = {
   invalid: Boolean,
   invalidLabel: [String, Array]
-}, ve = {
+}, he = {
   loading: Boolean,
   loadingLabel: String
-}, ge = {
+}, ye = {
+  /**
+   * Whether the form control is disabled
+   */
   disabled: Boolean
-}, he = {
+}, be = {
+  /**
+   * The value is not editable
+   */
   readonly: Boolean
-}, ye = {
-  modifiers: [String, Array]
 }, Se = {
+  /**
+   * Component BEM modifiers
+   */
+  modifiers: [String, Array]
+}, _e = {
   hintLabel: { type: String, default: "" }
-}, be = {
+}, we = {
+  /**
+   * Show character limit
+   */
   count: {
     type: [Boolean, String],
     default: !1,
-    validator: (l) => [!0, !1, "limit", "countdown"].includes(l)
+    validator: (t) => [!0, !1, "limit", "countdown"].includes(t)
   }
-}, Pe = {
+}, Be = {
+  /**
+   * Milliseconds to wait before emitting the input event
+   */
   debounce: [Number, String]
-}, j = {
-  LEFT: "left",
-  RIGHT: "right"
-}, we = {
+}, xe = {
+  /**
+   * 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: M.before,
+    validation: (t) => Object.values(M).includes(t)
   }
-}, Ve = {
+}, Pe = {
+  /**
+   * Global attribute tabindex
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
+   */
   tabindex: { type: [String, Number], default: 0 }
-}, xe = {
+}, Ve = {
+  /**
+   * If true the label will be floating
+   */
   floating: Boolean
 }, Ie = {
-  id: [String, Number],
+  /**
+   * Global attribute id
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
+   */
+  id: [String, Number]
+};
+H.bottom;
+const $e = {
+  ...Ie,
+  /**
+   * 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 = {
+}, Ce = {
+  /**
+   * Global attribute autofocus
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
+   */
   autofocus: Boolean
-}, _e = {
+}, Ne = {
+  /**
+   * 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,
+}, ke = {
+  ...$e,
+  ...Ce,
+  ...Ne,
+  ...Pe,
+  ...ye,
+  ...be,
+  ...me,
   ...ge,
+  ..._e,
   ...he,
-  ...me,
-  ...fe,
   ...Se,
-  ...ve,
-  ...ye,
-  ...be,
-  ...Pe,
   ...we,
+  ...Be,
   ...xe,
+  ...Ve,
+  /**
+   * 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,
+  /**
+   * 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,
+  /**
+   * <label> value for the Input / Textarea
+   */
   label: String
-}, $e = {
+}, Ee = {
   hard: "hard",
   soft: "soft"
-}, Ne = {
+}, Fe = {
   true: !0,
   false: !1,
   default: "default"
-}, Fe = ["update:modelValue", "focus", "blur", "keyup"], Ee = {
-  ...Ce,
+}, De = ["update:modelValue", "focus", "blur", "keyup"], Ae = {
+  ...ke,
+  /**
+   * 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: Ee.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 },
+  /**
+   * If true, the textarea will be resizable
+   */
   resizable: Boolean
-}, ke = ["for"], De = { class: "vv-textarea__wrapper" }, Re = ["id"], Te = {
+}, Oe = ["for"], je = { class: "vv-textarea__wrapper" }, Te = {
   key: 0,
+  class: "vv-textarea__input-before"
+}, ze = { class: "vv-textarea__inner" }, He = ["id"], Me = {
+  key: 1,
+  class: "vv-textarea__input-after"
+}, qe = {
+  key: 2,
   class: "vv-textarea__limit"
-}, Ae = {
+}, Re = {
   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(
+}, 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
-    ), 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);
+    ), 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);
     });
-    const { formatted: b } = useTextCount(v, {
+    const { formatted: L } = useTextCount(g, {
       mode: e.count,
       upperLimit: e.maxlength,
       lowerLimit: e.minlength
-    }), G = computed(() => !e.disabled && !e.readonly), K = computed(
+    }), G = computed(() => !e.disabled && !e.readonly), Q = computed(
       () => G.value ? e.tabindex : -1
-    ), J = computed(() => !isEmpty(p)), U = computed(() => {
+    ), X = computed(() => !isEmpty(u)), Y = computed(() => {
       if (e.invalid === !0)
         return !0;
       if (e.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: Z, hasHint: ee, hasInvalid: q } = pe(e, l), te = useBemModifiers(
+      "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
+      }))
+    ), oe = computed(
       () => ({
         name: e.name,
-        placeholder: g.value,
-        tabindex: K.value,
+        placeholder: x.value,
+        tabindex: Q.value,
         disabled: e.disabled,
         readonly: e.readonly,
         required: e.required,
@@ -307,62 +479,69 @@ const ce = "ds", de = {
         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
+        "aria-invalid": Y.value,
+        "aria-describedby": !q.value && ee.value ? w.value : void 0,
+        "aria-errormessage": q.value ? w.value : void 0
       })
-    ), k = computed(() => ({
+    ), F = 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;
+      clear: re
+    })), re = () => {
+      g.value = void 0;
     };
-    return (V, _) => (P(), R("div", {
-      class: ee(r(Q))
+    return (S, C) => (y(), P("div", {
+      class: ne(a(te))
     }, [
-      r(y) ? (P(), R("label", {
+      a(f) ? (y(), P("label", {
         key: 0,
-        for: r(s),
+        for: a(v),
         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({
+      }, 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({
             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"
+          }, a(V)), null, 16)) : _("", !0),
+          ae(A("textarea", E({
+            id: a(v),
+            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)]
+          ]),
+          a($) ? (y(), z(K, E({
+            key: 1,
+            class: "vv-textarea__icon vv-textarea__icon-after"
+          }, a(V)), null, 16)) : _("", !0)
         ]),
-        r(c) ? (P(), R("span", Te, [
-          T(V.$slots, "count", C(A(r(k))), () => [
-            re(M(r(b)), 1)
+        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)
           ])
-        ])) : x("", !0)
+        ])) : _("", !0)
       ]),
-      ae(r(W), {
-        id: r(u),
+      ue(a(Z), {
+        id: a(w),
         class: "vv-textarea__hint"
       }, null, 8, ["id"])
     ], 2));
   }
 });
 export {
-  ze as default
+  We as default
 };