@volverjs/ui-vue 0.0.4 → 0.0.5-beta.1

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

@@ -1,61 +1,88 @@
-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)
+import { unref, toRefs, computed, h, inject, defineComponent, ref, openBlock, createBlock, mergeProps, createCommentVNode, watch, useSlots, createElementBlock, normalizeClass, toDisplayString, createElementVNode, renderSlot, normalizeProps, guardReactiveProps, withDirectives, isRef, vModelText, createTextVNode, createVNode } from "vue";
+import { toReactive, useFocus, useElementVisibility } from "@vueuse/core";
+import { iconExists, Icon, addIcon } from "@iconify/vue";
+import { nanoid } from "nanoid";
+function resolveFieldData(data, field) {
+  if (data && Object.keys(data).length && field) {
+    if (field.indexOf(".") === -1) {
+      return data[field];
+    } else {
+      const fields = field.split(".");
+      let value = data;
+      for (let i = 0, len = fields.length; i < len; ++i) {
+        if (data == null) {
           return null;
-        a = a[r[i]];
+        }
+        value = value[fields[i]];
       }
-      return a;
+      return value;
     }
-  } else
+  } 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 isEmpty(value) {
+  return ((value2) => value2 === null || value2 === void 0 || value2 === "" || Array.isArray(value2) && value2.length === 0 || !(value2 instanceof Date) && typeof value2 === "object" && Object.keys(value2).length === 0)(unref(value));
 }
-function ke(e) {
-  return typeof e == "string" || e instanceof String;
+function isString(value) {
+  return typeof value === "string" || value instanceof String;
 }
-function j(e) {
-  return Array.isArray(e) ? e.filter((t) => ke(t)).join(" ") : e;
+function joinLines(errors) {
+  if (Array.isArray(errors)) {
+    return errors.filter((e) => isString(e)).join(" ");
+  }
+  return errors;
 }
-function Oe(e, t) {
+function HintSlotFactory(parentProps, parentSlots) {
+  const {
+    invalid: invalidSlot,
+    valid: validSlot,
+    hint: hintSlot,
+    loading: loadingSlot
+  } = parentSlots;
   const {
-    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
+    hintLabel,
+    modelValue,
+    valid,
+    validLabel,
+    invalid,
+    invalidLabel,
+    ...otherProps
+  } = toRefs(parentProps);
+  const loading = resolveFieldData(otherProps, "loading");
+  const loadingLabel = resolveFieldData(otherProps, "loadingLabel");
+  const hasInvalid = computed(() => {
+    if (!invalid.value) {
+      return false;
+    }
+    if (invalid.value && invalidSlot) {
+      return true;
+    }
+    if ((invalidLabel == null ? void 0 : invalidLabel.value) && Array.isArray(invalidLabel.value) && invalidLabel.value.length > 0) {
+      return true;
+    }
+    if ((invalidLabel == null ? void 0 : invalidLabel.value) && !isEmpty(invalidLabel)) {
+      return true;
+    }
+    return false;
+  });
+  const hasHint = computed(
+    () => !!(hintLabel && hintLabel.value || hintSlot)
+  );
+  const hasValid = computed(
+    () => !!(validLabel && validLabel.value || validSlot)
+  );
+  const hasLoading = computed(
+    () => !!((loading == null ? void 0 : loading.value) && loadingSlot || (loading == null ? void 0 : loading.value) && (loadingLabel == null ? void 0 : loadingLabel.value))
+  );
+  const isVisible = computed(
+    () => hasHint.value || hasValid.value || hasInvalid.value || hasLoading.value
   );
   return {
-    hasInvalid: g,
-    hasHint: I,
-    hasValid: x,
-    hasLoading: h,
+    hasInvalid,
+    hasHint,
+    hasValid,
+    hasLoading,
     HintSlot: {
       name: "HintSlot",
       props: {
@@ -64,42 +91,50 @@ function Oe(e, t) {
           default: () => ({})
         }
       },
-      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
+      setup(props) {
+        const hintContent = computed(() => {
+          const slotProps = toReactive({
+            hintLabel,
+            modelValue,
+            valid,
+            validLabel,
+            invalid,
+            invalidLabel,
+            loading,
+            loadingLabel,
+            ...props.params
           });
-          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);
+          if (invalid == null ? void 0 : invalid.value) {
+            return (invalidSlot == null ? void 0 : invalidSlot(slotProps)) || joinLines(invalidLabel == null ? void 0 : invalidLabel.value) || (hintLabel == null ? void 0 : hintLabel.value);
+          }
+          if (valid == null ? void 0 : valid.value)
+            return (validSlot == null ? void 0 : validSlot(slotProps)) || joinLines(validLabel == null ? void 0 : validLabel.value) || (hintLabel == null ? void 0 : hintLabel.value);
+          if (loading == null ? void 0 : loading.value)
+            return (loadingSlot == null ? void 0 : loadingSlot(slotProps)) || joinLines(loadingLabel == null ? void 0 : loadingLabel.value) || (hintLabel == null ? void 0 : hintLabel.value);
+          return (hintSlot == null ? void 0 : hintSlot(slotProps)) || joinLines(hintLabel == null ? void 0 : hintLabel.value) || (hintLabel == null ? void 0 : hintLabel.value);
         });
         return {
-          isVisible: V,
-          hasInvalid: g,
-          hasValid: x,
-          hintContent: O
+          isVisible,
+          hasInvalid,
+          hasValid,
+          hintContent
         };
       },
       render() {
-        if (this.isVisible)
-          return pe(
+        if (this.isVisible) {
+          return h(
             "small",
             {
               role: this.hasInvalid ? "alert" : this.hasValid ? "status" : void 0
             },
             this.hintContent
           );
+        }
       }
     }
   };
 }
-const Ce = {
+const VvIconProps = {
   /**
    * Color
    */
@@ -123,7 +158,7 @@ const Ce = {
    */
   name: {
     type: String,
-    required: !0
+    required: true
   },
   /**
    * By default 'vv'
@@ -193,77 +228,160 @@ const Ce = {
     type: [String, Array]
   }
 };
-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);
+var Side = /* @__PURE__ */ ((Side2) => {
+  Side2["left"] = "left";
+  Side2["right"] = "right";
+  Side2["top"] = "top";
+  Side2["bottom"] = "bottom";
+  return Side2;
+})(Side || {});
+var Placement = /* @__PURE__ */ ((Placement2) => {
+  Placement2["topStart"] = "top-start";
+  Placement2["topEnd"] = "top-end";
+  Placement2["bottomStart"] = "bottom-start";
+  Placement2["bottomEnd"] = "bottom-end";
+  Placement2["leftStart"] = "left-start";
+  Placement2["leftEnd"] = "left-end";
+  Placement2["rightStart"] = "right-start";
+  Placement2["rightEnd"] = "right-end";
+  return Placement2;
+})(Placement || {});
+var Position = /* @__PURE__ */ ((Position2) => {
+  Position2["before"] = "before";
+  Position2["after"] = "after";
+  return Position2;
+})(Position || {});
+var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
+  ButtonType2["button"] = "button";
+  ButtonType2["submit"] = "submit";
+  ButtonType2["reset"] = "reset";
+  return ButtonType2;
+})(ButtonType || {});
+var AnchorTarget = /* @__PURE__ */ ((AnchorTarget2) => {
+  AnchorTarget2["_blank"] = "_blank";
+  AnchorTarget2["_self"] = "_self";
+  AnchorTarget2["_parent"] = "_parent";
+  AnchorTarget2["_top"] = "_top";
+  return AnchorTarget2;
+})(AnchorTarget || {});
+const INJECTION_KEY_VOLVER = Symbol.for("volver");
+function useVolver() {
+  return inject(INJECTION_KEY_VOLVER);
 }
-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;
+function useModifiers(prefix, modifiers, others) {
+  return computed(() => {
+    const toReturn = {
+      [prefix]: true
+    };
+    const modifiersArray = typeof (modifiers == null ? void 0 : modifiers.value) === "string" ? modifiers.value.split(" ") : modifiers == null ? void 0 : modifiers.value;
+    if (modifiersArray) {
+      if (Array.isArray(modifiersArray)) {
+        modifiersArray.forEach((modifier) => {
+          if (modifier) {
+            toReturn[`${prefix}--${modifier}`] = true;
+          }
+        });
+      }
+    }
+    if (others) {
+      Object.keys(others.value).forEach((key) => {
+        toReturn[`${prefix}--${key}`] = unref(others.value[key]);
+      });
+    }
+    return toReturn;
   });
 }
-const Ee = {
+const __default__$1 = {
   name: "VvIcon"
-}, 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;
+};
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...__default__$1,
+  props: VvIconProps,
+  setup(__props) {
+    const props = __props;
+    const show = ref(true);
+    const volver = useVolver();
+    const { modifiers } = toRefs(props);
+    const bemCssClasses = useModifiers("vv-icon", modifiers);
+    const provider = computed(() => {
+      return props.provider || (volver == null ? void 0 : volver.iconsProvider);
+    });
+    const icon = computed(() => {
+      const _name = props.name ?? "";
+      const iconName = `@${provider.value}:${props.prefix}:${props.name}`;
+      if (iconExists(_name)) {
+        return _name;
+      } else if (iconExists(iconName)) {
+        return iconName;
+      } else {
+        return (volver == null ? void 0 : volver.iconsCollections.find(
+          (iconsCollection) => {
+            const icon2 = `@${provider.value}:${iconsCollection.prefix}:${_name}`;
+            if (iconExists(icon2)) {
+              return icon2;
+            }
+          }
+        )) || _name;
+      }
     });
-    function v(n) {
-      let l = null;
-      if (typeof window > "u") {
-        const { JSDOM: g } = require("jsdom");
-        l = new g().window;
+    function getSvgContent(svg) {
+      let dom = null;
+      if (typeof window === "undefined") {
+        const { JSDOM } = require("jsdom");
+        dom = new JSDOM().window;
       }
-      return (l ? new l.DOMParser() : new window.DOMParser()).parseFromString(n, "text/html").querySelector("svg");
+      const domParser = dom ? new dom.DOMParser() : new window.DOMParser();
+      const svgDomString = domParser.parseFromString(svg, "text/html");
+      const svgEl = svgDomString.querySelector("svg");
+      return svgEl;
     }
-    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
-      });
+    function addIconFromSvg(svg) {
+      const svgContentEl = getSvgContent(svg);
+      const svgContent = (svgContentEl == null ? void 0 : svgContentEl.innerHTML.trim()) || "";
+      if (svgContentEl && svgContent) {
+        addIcon(`@${provider.value}:${props.prefix}:${props.name}`, {
+          body: svgContent,
+          // Set height and width from svg content
+          height: svgContentEl.viewBox.baseVal.height,
+          width: svgContentEl.viewBox.baseVal.width
+        });
+      }
+    }
+    if (volver) {
+      if (props.src && !iconExists(`@${provider.value}:${props.prefix}:${props.name}`)) {
+        show.value = false;
+        volver.fetchIcon(props.src).then((svg) => {
+          if (svg) {
+            addIconFromSvg(svg);
+            show.value = true;
+          }
+        }).catch((e) => {
+          throw new Error(`During fetch icon: ${e == null ? void 0 : e.message}`);
+        });
+      } else if (props.svg) {
+        addIconFromSvg(props.svg);
+      }
     }
-    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: u(c)
-    }, {
-      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);
+    return (_ctx, _cache) => {
+      return unref(show) ? (openBlock(), createBlock(unref(Icon), mergeProps({
+        key: 0,
+        class: unref(bemCssClasses)
+      }, {
+        inline: _ctx.inline,
+        width: _ctx.width,
+        height: _ctx.height,
+        horizontalFlip: _ctx.horizontalFlip,
+        verticalFlip: _ctx.verticalFlip,
+        flip: _ctx.flip,
+        rotate: _ctx.rotate,
+        color: _ctx.color,
+        onLoad: _ctx.onLoad,
+        icon: unref(icon)
+      }), null, 16, ["class"])) : createCommentVNode("", true);
+    };
   }
-}), Ae = {
+});
+const LinkProps = {
   /**
    * 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/)
@@ -280,7 +398,7 @@ const Ee = {
    */
   target: {
     type: String,
-    validator: (e) => Object.values(Z).includes(e)
+    validator: (value) => Object.values(AnchorTarget).includes(value)
   },
   /**
    * Anchor rel
@@ -289,7 +407,8 @@ const Ee = {
     type: String,
     default: "noopener noreferrer"
   }
-}, Fe = {
+};
+const ValidProps = {
   /**
    * Valid status
    */
@@ -298,7 +417,8 @@ const Ee = {
    * Valid label
    */
   validLabel: [String, Array]
-}, Le = {
+};
+const InvalidProps = {
   /**
    * Invalid status
    */
@@ -307,7 +427,8 @@ const Ee = {
    * Invalid label
    */
   invalidLabel: [String, Array]
-}, De = {
+};
+const LoadingProps = {
   /**
    * Loading status
    */
@@ -319,53 +440,63 @@ const Ee = {
     type: String,
     default: "Loading..."
   }
-}, te = {
+};
+const DisabledProps = {
   /**
    * Whether the form control is disabled
    */
   disabled: Boolean
-}, ze = {
+};
+const ActiveProps = {
   /**
    * Whether the item is active
    */
   active: Boolean
-}, He = {
+};
+const PressedProps = {
   /**
    * Whether the item is pressed
    */
   pressed: Boolean
-}, re = {
+};
+const LabelProps = {
   /**
    * The item label
    */
   label: [String, Number]
-}, qe = {
+};
+const ReadonlyProps = {
   /**
    * The value is not editable
    */
   readonly: Boolean
-}, Me = {
+};
+const ModifiersProps = {
   /**
    * Component BEM modifiers
    */
   modifiers: [String, Array]
-}, Re = {
+};
+const HintProps = {
   hintLabel: { type: String, default: "" }
-}, Te = {
+};
+const CountProps = {
   /**
    * Show character limit
    */
   count: {
     type: [Boolean, String],
-    default: !1,
-    validator: (e) => [!0, !1, "limit", "countdown"].includes(e)
+    default: false,
+    validator: (value) => [true, false, "limit", "countdown"].includes(value)
   }
-}, Ke = {
+};
+const DebounceProps = {
   /**
    * Milliseconds to wait before emitting the input event
    */
   debounce: [Number, String]
-}, Je = {
+};
+const IconProps = {
   /**
    * VvIcon name or props
    * @see VVIcon
@@ -376,65 +507,156 @@ const Ee = {
    */
   iconPosition: {
     type: String,
-    default: P.before,
-    validation: (e) => Object.values(P).includes(e)
+    default: Position.before,
+    validation: (value) => Object.values(Position).includes(value)
   }
-}, Ue = {
+};
+const TabindexProps = {
   /**
    * Global attribute tabindex
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
    */
   tabindex: { type: [String, Number], default: 0 }
-}, We = {
+};
+const FloatingLabelProps = {
   /**
    * If true the label will be floating
    */
   floating: Boolean
-}, Ye = {
+};
+const IdProps = {
   /**
    * Global attribute id
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
    */
   id: [String, Number]
 };
-w.bottom;
-const Ge = {
-  ...Ye,
+({
+  /**
+   * Dropdown placement
+   */
+  placement: {
+    type: String,
+    default: Side.bottom,
+    validator: (value) => {
+      return Object.values(Side).includes(value) || Object.values(Placement).includes(value);
+    }
+  },
+  /**
+   * Dropdown show / hide transition name
+   */
+  transitionName: {
+    type: String
+  },
+  /**
+   * Offset of the dropdown from the trigger
+   * @see https://floating-ui.com/docs/offset
+   */
+  offset: {
+    type: [Number, String, Object],
+    default: 0
+  },
+  /**
+   * Move dropdown to the side if there is no space in the default position
+   * @see https://floating-ui.com/docs/shift
+   */
+  shift: {
+    type: [Boolean, Object],
+    default: false
+  },
+  /**
+   * Flip dropdown position if there is no space in the default position
+   * @see https://floating-ui.com/docs/flip
+   */
+  flip: {
+    type: [Boolean, Object],
+    default: true
+  },
+  /**
+   * Size of the dropdown
+   * @see https://floating-ui.com/docs/size
+   */
+  size: {
+    type: [Boolean, Object],
+    default: () => ({ padding: 10 })
+  },
+  /**
+   * Automatically change the position of the dropdown
+   * @see https://floating-ui.com/docs/autoPlacement
+   */
+  autoPlacement: {
+    type: [Boolean, Object],
+    default: false
+  },
+  /**
+   * Add arrow to the dropdown
+   * @see https://floating-ui.com/docs/arrow
+   */
+  arrow: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Close dropdown on click outside
+   */
+  autoClose: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * Autofocus first item on dropdown open
+   */
+  autofocusFirst: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * Set dropdown width to the same as the trigger
+   */
+  triggerWidth: {
+    type: Boolean
+  }
+});
+const IdNameProps = {
+  ...IdProps,
   /**
    * 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 }
-}, Qe = {
+  name: { type: String, required: true }
+};
+const AutofocusProps = {
   /**
    * Global attribute autofocus
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
    */
   autofocus: Boolean
-}, Xe = {
+};
+const AutocompleteProps = {
   /**
    * Global attribute autocomplete
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
    */
   autocomplete: { type: String, default: "off" }
-}, Ze = {
-  ...Ge,
-  ...Qe,
-  ...Xe,
-  ...Ue,
-  ...te,
-  ...qe,
-  ...Fe,
-  ...Le,
-  ...Re,
-  ...De,
-  ...Me,
-  ...Te,
-  ...Ke,
-  ...Je,
-  ...We,
-  ...re,
+};
+const InputTextareaProps = {
+  ...IdNameProps,
+  ...AutofocusProps,
+  ...AutocompleteProps,
+  ...TabindexProps,
+  ...DisabledProps,
+  ...ReadonlyProps,
+  ...ValidProps,
+  ...InvalidProps,
+  ...HintProps,
+  ...LoadingProps,
+  ...ModifiersProps,
+  ...CountProps,
+  ...DebounceProps,
+  ...IconProps,
+  ...FloatingLabelProps,
+  ...LabelProps,
   /**
    * Input / Textarea minlength
    * Minimum length (number of characters) of value
@@ -465,25 +687,32 @@ const Ge = {
   required: Boolean
 };
 ({
-  ...te,
-  ...re,
-  ...He,
-  ...ze,
-  ...Ae,
+  ...DisabledProps,
+  ...LabelProps,
+  ...PressedProps,
+  ...ActiveProps,
+  ...LinkProps,
   /**
    * Button type
    */
-  type: R.button
+  type: {
+    type: String,
+    default: ButtonType.button,
+    validator: (value) => Object.values(ButtonType).includes(value)
+  }
 });
-const et = {
+const WRAP = {
   hard: "hard",
   soft: "soft"
-}, tt = {
-  true: !0,
-  false: !1,
+};
+const SPELLCHECK = {
+  true: true,
+  false: false,
   default: "default"
-}, rt = ["update:modelValue", "focus", "blur", "keyup"], at = {
-  ...Ze,
+};
+const VvTextareaEvents = ["update:modelValue", "focus", "blur", "keyup"];
+const VvTextareaProps = {
+  ...InputTextareaProps,
   /**
    * Textarea value
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#value
@@ -503,209 +732,291 @@ const et = {
    * 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 },
+  wrap: { type: String, default: WRAP.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 },
+  spellcheck: { type: [Boolean, String], default: SPELLCHECK.default },
   /**
    * If true, the textarea will be resizable
    */
   resizable: Boolean
-}, 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);
+};
+const useUniqueId = (id) => computed(() => String((id == null ? void 0 : id.value) || nanoid()));
+function useDebouncedInput(modelValue, emit, ms = 0, {
+  getter = (value) => value,
+  setter = (value) => value
+} = {}) {
+  let timeout;
+  if (typeof ms === "string") {
+    ms = parseInt(ms);
+  }
+  return computed({
+    get: () => getter(modelValue == null ? void 0 : modelValue.value),
+    set: (value) => {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+      timeout = setTimeout(() => {
+        emit("update:modelValue", setter(value));
+      }, ms);
     }
   });
 }
-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)
+function useComponentIcon(icon, iconPosition) {
+  const hasIconBefore = computed(
+    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Position.before)
+  );
+  const hasIconAfter = computed(
+    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Position.after)
+  );
+  const hasIconLeft = computed(
+    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Side.left)
   );
+  const hasIconRight = computed(
+    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Side.right)
+  );
+  const hasIconTop = computed(
+    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Side.top)
+  );
+  const hasIconBottom = computed(
+    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Side.bottom)
+  );
+  const hasIcon = computed(() => {
+    if (typeof (icon == null ? void 0 : icon.value) === "string") {
+      return { name: icon == null ? void 0 : icon.value };
+    }
+    return icon == null ? void 0 : icon.value;
+  });
   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
+    hasIcon,
+    hasIconLeft,
+    hasIconRight,
+    hasIconTop,
+    hasIconBottom,
+    hasIconBefore,
+    hasIconAfter
   };
 }
-function st(e, t) {
-  const { focused: r } = Ie(e);
-  return Q(r, (a) => {
-    t(a ? "focus" : "blur", u(e));
-  }), {
-    focused: r
+function useComponentFocus(inputTemplateRef, emit) {
+  const { focused } = useFocus(inputTemplateRef);
+  watch(focused, (newValue) => {
+    emit(newValue ? "focus" : "blur", unref(inputTemplateRef));
+  });
+  return {
+    focused
   };
 }
-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);
+function useTextCount(text, options) {
+  const length = computed(() => {
+    return (unref(text) ?? "").length;
+  });
+  const gap = computed(() => {
+    if ((options == null ? void 0 : options.lowerLimit) !== void 0 && length.value < (options == null ? void 0 : options.lowerLimit)) {
+      return length.value - options.lowerLimit;
+    }
+    if ((options == null ? void 0 : options.upperLimit) !== void 0 && length.value < (options == null ? void 0 : options.upperLimit)) {
+      return options.upperLimit - length.value;
+    }
+    return 0;
+  });
+  const formatted = computed(() => {
+    if ((options == null ? void 0 : options.mode) === false) {
+      return "";
+    }
+    if ((options == null ? void 0 : options.mode) === "limit" && (options == null ? void 0 : options.upperLimit)) {
+      return `${length.value} / ${options.lowerLimit ? `${options.lowerLimit}-` : ""}${options.upperLimit}`;
+    }
+    if ((options == null ? void 0 : options.mode) === "countdown") {
+      if (gap.value === 0) {
+        return void 0;
+      }
+      return gap;
+    }
+    return length.value;
+  });
   return {
-    length: r,
-    gap: a,
-    formatted: i
+    length,
+    gap,
+    formatted
   };
 }
-const it = ["for"], ct = { class: "vv-textarea__wrapper" }, dt = {
+const _hoisted_1 = ["for"];
+const _hoisted_2 = { class: "vv-textarea__wrapper" };
+const _hoisted_3 = {
   key: 0,
   class: "vv-textarea__input-before"
-}, ft = { class: "vv-textarea__inner" }, vt = ["id"], pt = {
+};
+const _hoisted_4 = { class: "vv-textarea__inner" };
+const _hoisted_5 = ["id"];
+const _hoisted_6 = {
   key: 1,
   class: "vv-textarea__input-after"
-}, mt = {
+};
+const _hoisted_7 = {
   key: 2,
   class: "vv-textarea__limit"
-}, gt = {
+};
+const __default__ = {
   name: "VvTextarea"
-}, _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 _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: VvTextareaProps,
+  emits: VvTextareaEvents,
+  setup(__props, { emit }) {
+    const props = __props;
+    const slots = useSlots();
+    const textarea = ref();
+    const {
+      id,
+      icon,
+      iconPosition,
+      label,
+      modelValue,
+      count,
+      valid,
+      invalid,
+      loading,
+      modifiers
+    } = toRefs(props);
+    const hasId = useUniqueId(id);
+    const hasDescribedBy = computed(() => `${hasId.value}-hint`);
+    const hasPlaceholder = computed(
+      () => props.floating && isEmpty(props.placeholder) ? " " : props.placeholder
+    );
+    const localModelValue = useDebouncedInput(modelValue, emit, props.debounce);
+    const { hasIcon, hasIconBefore, hasIconAfter } = useComponentIcon(
+      icon,
+      iconPosition
+    );
+    const { focused } = useComponentFocus(textarea, emit);
+    const isVisible = useElementVisibility(textarea);
+    watch(isVisible, (newValue) => {
+      if (newValue && props.autofocus) {
+        focused.value = true;
+      }
+    });
+    const { formatted: countFormatted } = useTextCount(localModelValue, {
+      mode: props.count,
+      upperLimit: props.maxlength,
+      lowerLimit: props.minlength
     });
-    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 (r.valid === !0)
-        return !1;
-    }), { HintSlot: ie, hasHint: ce, hasInvalid: K } = Oe(r, a), de = ee(
+    const isClickable = computed(() => !props.disabled && !props.readonly);
+    const hasTabindex = computed(
+      () => isClickable.value ? props.tabindex : -1
+    );
+    const isDirty = computed(() => !isEmpty(modelValue));
+    const isInvalid = computed(() => {
+      if (props.invalid === true) {
+        return true;
+      }
+      if (props.valid === true) {
+        return false;
+      }
+      return void 0;
+    });
+    const { HintSlot, hasHint, hasInvalid } = HintSlotFactory(props, slots);
+    const bemCssClasses = useModifiers(
       "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
+      modifiers,
+      computed(() => ({
+        valid: valid.value,
+        invalid: invalid.value,
+        loading: loading.value,
+        disabled: props.disabled,
+        readonly: props.readonly,
+        "icon-before": hasIconBefore.value,
+        "icon-after": hasIconAfter.value,
+        floating: props.floating && !isEmpty(props.label),
+        dirty: isDirty.value,
+        focused: focused.value,
+        resizable: props.resizable
       }))
-    ), fe = o(
+    );
+    const hasAttrs = computed(
       () => ({
-        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
+        name: props.name,
+        placeholder: hasPlaceholder.value,
+        tabindex: hasTabindex.value,
+        disabled: props.disabled,
+        readonly: props.readonly,
+        required: props.required,
+        autocomplete: props.autocomplete,
+        minlength: props.minlength,
+        maxlength: props.maxlength,
+        cols: props.cols,
+        rows: props.rows,
+        wrap: props.wrap,
+        spellcheck: props.spellcheck,
+        "aria-invalid": isInvalid.value,
+        "aria-describedby": !hasInvalid.value && hasHint.value ? hasDescribedBy.value : void 0,
+        "aria-errormessage": hasInvalid.value ? hasDescribedBy.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;
+    );
+    const slotProps = computed(() => ({
+      valid: props.valid,
+      invalid: props.invalid,
+      modelValue: props.modelValue,
+      hintLabel: props.hintLabel,
+      maxlength: props.maxlength,
+      minlength: props.minlength,
+      clear: onClear
+    }));
+    const onClear = () => {
+      localModelValue.value = void 0;
     };
-    return (_, C) => (b(), $("div", {
-      class: he(u(de))
-    }, [
-      u(v) ? (b(), $("label", {
-        key: 0,
-        for: u(g),
-        class: "vv-textarea__label"
-      }, 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"
-          }, 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)]
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(unref(bemCssClasses))
+      }, [
+        unref(label) ? (openBlock(), createElementBlock("label", {
+          key: 0,
+          for: unref(hasId),
+          class: "vv-textarea__label"
+        }, toDisplayString(unref(label)), 9, _hoisted_1)) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_2, [
+          _ctx.$slots.before ? (openBlock(), createElementBlock("div", _hoisted_3, [
+            renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
+          ])) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_4, [
+            unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$1, mergeProps({
+              key: 0,
+              class: "vv-textarea__icon"
+            }, unref(hasIcon)), null, 16)) : createCommentVNode("", true),
+            withDirectives(createElementVNode("textarea", mergeProps({
+              id: unref(hasId),
+              ref_key: "textarea",
+              ref: textarea,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(localModelValue) ? localModelValue.value = $event : null)
+            }, unref(hasAttrs), {
+              onKeyup: _cache[1] || (_cache[1] = ($event) => emit("keyup", $event))
+            }), null, 16, _hoisted_5), [
+              [vModelText, unref(localModelValue)]
+            ]),
+            unref(hasIconAfter) ? (openBlock(), createBlock(_sfc_main$1, mergeProps({
+              key: 1,
+              class: "vv-textarea__icon vv-textarea__icon-after"
+            }, unref(hasIcon)), null, 16)) : createCommentVNode("", true)
           ]),
-          u(O) ? (b(), M(W, E({
-            key: 1,
-            class: "vv-textarea__icon vv-textarea__icon-after"
-          }, u(V)), null, 16)) : B("", !0)
+          _ctx.$slots.after ? (openBlock(), createElementBlock("div", _hoisted_6, [
+            renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps(unref(slotProps))))
+          ])) : createCommentVNode("", true),
+          unref(count) ? (openBlock(), createElementBlock("span", _hoisted_7, [
+            renderSlot(_ctx.$slots, "count", normalizeProps(guardReactiveProps(unref(slotProps))), () => [
+              createTextVNode(toDisplayString(unref(countFormatted)), 1)
+            ])
+          ])) : createCommentVNode("", true)
         ]),
-        _.$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)
-          ])
-        ])) : B("", !0)
-      ]),
-      Be(u(ie), {
-        id: u(I),
-        class: "vv-textarea__hint"
-      }, null, 8, ["id"])
-    ], 2));
+        createVNode(unref(HintSlot), {
+          id: unref(hasDescribedBy),
+          class: "vv-textarea__hint"
+        }, null, 8, ["id"])
+      ], 2);
+    };
   }
 });
 export {
-  _t as default
+  _sfc_main as default
 };