@volverjs/ui-vue 0.0.10-beta.5 → 0.0.10-beta.50

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

@@ -1,225 +1,11 @@
-import { unref, computed, isRef, defineComponent, h, inject, ref, toRefs, openBlock, createBlock, mergeProps, createCommentVNode, watch, useSlots, createElementBlock, normalizeClass, toDisplayString, createElementVNode, renderSlot, normalizeProps, guardReactiveProps, withDirectives, vModelText, createTextVNode, createVNode, createSlots, withCtx } from "vue";
+import { unref, computed, isRef, defineComponent, h, inject, mergeDefaults, ref, toRefs, openBlock, createBlock, mergeProps, createCommentVNode, useId, watch, useSlots, createElementBlock, normalizeClass, toDisplayString, createElementVNode, renderSlot, normalizeProps, guardReactiveProps, withDirectives, vModelText, createTextVNode, createVNode, createSlots, withCtx } from "vue";
 import { iconExists, Icon, addIcon } from "@iconify/vue";
-import { uid } from "uid";
 import { useFocus, useElementVisibility } from "@vueuse/core";
-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 isString(value) {
-  return typeof value === "string" || value instanceof String;
-}
-function joinLines(items) {
-  if (Array.isArray(items)) {
-    return items.filter((item) => isString(item)).join(" ");
-  }
-  return items;
-}
-function HintSlotFactory(propsOrRef, slots) {
-  const props = computed(() => {
-    if (isRef(propsOrRef)) {
-      return propsOrRef.value;
-    }
-    return propsOrRef;
-  });
-  const invalidLabel = computed(() => joinLines(props.value.invalidLabel));
-  const validLabel = computed(() => joinLines(props.value.validLabel));
-  const loadingLabel = computed(() => props.value.loadingLabel);
-  const hintLabel = computed(() => props.value.hintLabel);
-  const hasLoadingLabelOrSlot = computed(
-    () => Boolean(props.value.loading && (slots.loading || loadingLabel.value))
-  );
-  const hasInvalidLabelOrSlot = computed(
-    () => !hasLoadingLabelOrSlot.value && Boolean(
-      props.value.invalid && (slots.invalid || invalidLabel.value)
-    )
-  );
-  const hasValidLabelOrSlot = computed(
-    () => !hasLoadingLabelOrSlot.value && !hasInvalidLabelOrSlot.value && Boolean(props.value.valid && (slots.valid || validLabel.value))
-  );
-  const hasHintLabelOrSlot = computed(
-    () => !hasLoadingLabelOrSlot.value && !hasInvalidLabelOrSlot.value && !hasValidLabelOrSlot.value && Boolean(slots.hint || hintLabel.value)
-  );
-  const isVisible = computed(
-    () => hasInvalidLabelOrSlot.value || hasValidLabelOrSlot.value || hasLoadingLabelOrSlot.value || hasHintLabelOrSlot.value
-  );
-  const hintSlotScope = computed(() => ({
-    modelValue: props.value.modelValue,
-    valid: props.value.valid,
-    invalid: props.value.invalid,
-    loading: props.value.loading
-  }));
-  const HintSlot = defineComponent({
-    name: "HintSlot",
-    props: {
-      tag: {
-        type: String,
-        default: "small"
-      }
-    },
-    setup() {
-      return {
-        isVisible,
-        invalidLabel,
-        validLabel,
-        loadingLabel,
-        hintLabel,
-        hasInvalidLabelOrSlot,
-        hasValidLabelOrSlot,
-        hasLoadingLabelOrSlot,
-        hasHintLabelOrSlot
-      };
-    },
-    render() {
-      var _a, _b, _c, _d, _e, _f, _g, _h;
-      if (this.isVisible) {
-        let role;
-        if (this.hasInvalidLabelOrSlot) {
-          role = "alert";
-        }
-        if (this.hasValidLabelOrSlot) {
-          role = "status";
-        }
-        if (this.hasLoadingLabelOrSlot) {
-          return h(
-            this.tag,
-            {
-              role
-            },
-            ((_b = (_a = this.$slots).loading) == null ? void 0 : _b.call(_a)) ?? this.loadingLabel
-          );
-        }
-        if (this.hasInvalidLabelOrSlot) {
-          return h(
-            this.tag,
-            {
-              role
-            },
-            ((_d = (_c = this.$slots).invalid) == null ? void 0 : _d.call(_c)) ?? this.$slots.invalid ?? this.invalidLabel
-          );
-        }
-        if (this.hasValidLabelOrSlot) {
-          return h(
-            this.tag,
-            {
-              role
-            },
-            ((_f = (_e = this.$slots).valid) == null ? void 0 : _f.call(_e)) ?? this.validLabel
-          );
-        }
-        return h(
-          this.tag,
-          {
-            role
-          },
-          ((_h = (_g = this.$slots).hint) == null ? void 0 : _h.call(_g)) ?? this.$slots.hint ?? this.hintLabel
-        );
-      }
-      return null;
-    }
-  });
-  return {
-    hasInvalidLabelOrSlot,
-    hasHintLabelOrSlot,
-    hasValidLabelOrSlot,
-    hasLoadingLabelOrSlot,
-    hintSlotScope,
-    HintSlot
-  };
-}
-const VvIconProps = {
-  /**
-   * 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: true
-  },
-  /**
-   * 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 | string[]
-   */
-  modifiers: {
-    type: [String, Array]
-  }
-};
+var StorageType = /* @__PURE__ */ ((StorageType2) => {
+  StorageType2["local"] = "local";
+  StorageType2["session"] = "session";
+  return StorageType2;
+})(StorageType || {});
 var Strategy = /* @__PURE__ */ ((Strategy2) => {
   Strategy2["absolute"] = "absolute";
   Strategy2["fixed"] = "fixed";
@@ -254,136 +40,14 @@ var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
   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 || {});
+var ActionTag = /* @__PURE__ */ ((ActionTag2) => {
+  ActionTag2["nuxtLink"] = "nuxt-link";
+  ActionTag2["routerLink"] = "router-link";
+  ActionTag2["a"] = "a";
+  ActionTag2["button"] = "button";
+  return ActionTag2;
+})(ActionTag || {});
 const INJECTION_KEY_VOLVER = Symbol.for("volver");
-function useVolver() {
-  return inject(INJECTION_KEY_VOLVER);
-}
-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 __default__$1 = {
-  name: "VvIcon"
-};
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  ...__default__$1,
-  props: VvIconProps,
-  setup(__props) {
-    const props = __props;
-    const hasRotate = computed(() => {
-      if (typeof props.rotate === "string") {
-        return parseFloat(props.rotate);
-      }
-      return props.rotate;
-    });
-    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}:${name}`;
-      if (iconExists(iconName)) {
-        return iconName;
-      }
-      const iconsCollection = volver == null ? void 0 : volver.iconsCollections.find(
-        (iconsCollection2) => {
-          const icon2 = `@${provider.value}:${iconsCollection2.prefix}:${name}`;
-          return iconExists(icon2);
-        }
-      );
-      if (iconsCollection) {
-        return `@${provider.value}:${iconsCollection.prefix}:${name}`;
-      }
-      return name;
-    });
-    function getSvgContent(svg) {
-      let dom;
-      if (typeof window === "undefined") {
-        const { JSDOM } = require("jsdom");
-        dom = new JSDOM().window;
-      }
-      const domParser = dom ? new dom.DOMParser() : new window.DOMParser();
-      const svgDomString = domParser.parseFromString(svg, "text/html");
-      const svgEl = svgDomString.querySelector("svg");
-      return svgEl;
-    }
-    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(`Error during fetch icon: ${e == null ? void 0 : e.message}`);
-        });
-      }
-    }
-    if (props.svg) {
-      addIconFromSvg(props.svg);
-    }
-    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: unref(hasRotate),
-        color: _ctx.color,
-        onLoad: _ctx.onLoad,
-        icon: unref(icon)
-      }), null, 16, ["class"])) : createCommentVNode("", true);
-    };
-  }
-});
 const LinkProps = {
   /**
    * The router-link/nuxt-link property, if it is defined the button is rendered as a ruouter-link or nuxt-link.
@@ -399,10 +63,7 @@ const LinkProps = {
   /**
    * Anchor target
    */
-  target: {
-    type: String,
-    validator: (value) => Object.values(AnchorTarget).includes(value)
-  },
+  target: String,
   /**
    * Anchor rel
    */
@@ -415,27 +76,33 @@ const ValidProps = {
   /**
    * Valid status
    */
-  valid: Boolean,
+  valid: { type: Boolean, default: false },
   /**
    * Valid label
    */
-  validLabel: [String, Array]
+  validLabel: { type: [String, Array], default: void 0 }
 };
 const InvalidProps = {
   /**
    * Invalid status
    */
-  invalid: Boolean,
+  invalid: {
+    type: Boolean,
+    default: false
+  },
   /**
    * Invalid label
    */
-  invalidLabel: [String, Array]
+  invalidLabel: { type: [String, Array], default: void 0 }
 };
 const LoadingProps = {
   /**
    * Loading status
    */
-  loading: Boolean,
+  loading: {
+    type: Boolean,
+    default: false
+  },
   /**
    * Loading label
    */
@@ -448,43 +115,64 @@ const DisabledProps = {
   /**
    * Whether the form control is disabled
    */
-  disabled: Boolean
+  disabled: {
+    type: Boolean,
+    default: false
+  }
 };
 const ActiveProps = {
   /**
    * Whether the item is active
    */
-  active: Boolean
+  active: {
+    type: Boolean,
+    default: false
+  }
 };
 const CurrentProps = {
   /**
    * Whether the item is current
    */
-  current: Boolean
+  current: {
+    type: Boolean,
+    default: false
+  }
 };
 const PressedProps = {
   /**
    * Whether the item is pressed
    */
-  pressed: Boolean
+  pressed: {
+    type: Boolean,
+    default: false
+  }
 };
 const LabelProps = {
   /**
    * The item label
    */
-  label: [String, Number]
+  label: {
+    type: [String, Number],
+    default: void 0
+  }
 };
 const ReadonlyProps = {
   /**
    * The value is not editable
    */
-  readonly: Boolean
+  readonly: {
+    type: Boolean,
+    default: false
+  }
 };
 const ModifiersProps = {
   /**
    * Component BEM modifiers
    */
-  modifiers: [String, Array]
+  modifiers: {
+    type: [String, Array],
+    default: void 0
+  }
 };
 const HintProps = {
   hintLabel: { type: String, default: "" }
@@ -503,14 +191,20 @@ const DebounceProps = {
   /**
    * Milliseconds to wait before emitting the input event
    */
-  debounce: [Number, String]
+  debounce: {
+    type: [Number, String],
+    default: void 0
+  }
 };
 const IconProps = {
   /**
    * VvIcon name or props
    * @see VVIcon
    */
-  icon: { type: [String, Object] },
+  icon: {
+    type: [String, Object],
+    default: void 0
+  },
   /**
    * VvIcon position
    */
@@ -531,7 +225,10 @@ const FloatingLabelProps = {
   /**
    * If true the label will be floating
    */
-  floating: Boolean
+  floating: {
+    type: Boolean,
+    default: false
+  }
 };
 const IdProps = {
   /**
@@ -561,7 +258,8 @@ const IdProps = {
    * Dropdown show / hide transition name
    */
   transitionName: {
-    type: String
+    type: String,
+    default: void 0
   },
   /**
    * Offset of the dropdown from the trigger
@@ -629,7 +327,8 @@ const IdProps = {
    * Set dropdown width to the same as the trigger
    */
   triggerWidth: {
-    type: Boolean
+    type: Boolean,
+    default: false
   }
 });
 const IdNameProps = {
@@ -646,7 +345,10 @@ const AutofocusProps = {
    * Global attribute autofocus
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
    */
-  autofocus: Boolean
+  autofocus: {
+    type: Boolean,
+    default: false
+  }
 };
 const AutocompleteProps = {
   /**
@@ -655,117 +357,405 @@ const AutocompleteProps = {
    */
   autocomplete: { type: String, default: "off" }
 };
-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
-   * Available for input types: text, search, url, tel, email, password
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength
-   */
-  minlength: [String, 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: [String, 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
+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
+   * Available for input types: text, search, url, tel, email, password
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength
+   */
+  minlength: { type: [String, Number], default: void 0 },
+  /**
+   * 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: { type: [String, Number], default: void 0 },
+  /**
+   * 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: {
+    type: String,
+    default: void 0
+  },
+  /**
+   * 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: {
+    type: Boolean,
+    default: false
+  }
+};
+({
+  ...DisabledProps,
+  ...LabelProps,
+  ...PressedProps,
+  ...ActiveProps,
+  ...CurrentProps,
+  ...LinkProps,
+  /**
+   * Button type
+   */
+  type: {
+    type: String,
+    default: ButtonType.button,
+    validator: (value) => Object.values(ButtonType).includes(value)
+  },
+  /**
+   * Button aria-label
+   */
+  ariaLabel: {
+    type: String,
+    default: void 0
+  },
+  /**
+   * Default tag for the action
+   */
+  defaultTag: {
+    type: String,
+    default: ActionTag.button
+  }
+});
+({
+  storageType: {
+    type: String,
+    default: StorageType.local,
+    validator: (value) => Object.values(StorageType).includes(value)
+  },
+  storageKey: String
+});
+const WRAP = {
+  hard: "hard",
+  soft: "soft"
+};
+const SPELLCHECK = {
+  true: true,
+  false: false,
+  default: "default"
+};
+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
+   */
+  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 },
+  /**
+   * 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: 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: SPELLCHECK.default },
+  /**
+   * If true, the textarea will be resizable
+   */
+  resizable: Boolean
+};
+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 isString(value) {
+  return typeof value === "string" || value instanceof String;
+}
+function joinLines(items) {
+  if (Array.isArray(items)) {
+    return items.filter((item) => isString(item)).join(" ");
+  }
+  return items;
+}
+function HintSlotFactory(propsOrRef, slots) {
+  const props = computed(() => {
+    if (isRef(propsOrRef)) {
+      return propsOrRef.value;
+    }
+    return propsOrRef;
+  });
+  const invalidLabel = computed(() => joinLines(props.value.invalidLabel));
+  const validLabel = computed(() => joinLines(props.value.validLabel));
+  const loadingLabel = computed(() => props.value.loadingLabel);
+  const hintLabel = computed(() => props.value.hintLabel);
+  const hasLoadingLabelOrSlot = computed(
+    () => Boolean(props.value.loading && (slots.loading || loadingLabel.value))
+  );
+  const hasInvalidLabelOrSlot = computed(
+    () => !hasLoadingLabelOrSlot.value && Boolean(
+      props.value.invalid && (slots.invalid || invalidLabel.value)
+    )
+  );
+  const hasValidLabelOrSlot = computed(
+    () => !hasLoadingLabelOrSlot.value && !hasInvalidLabelOrSlot.value && Boolean(props.value.valid && (slots.valid || validLabel.value))
+  );
+  const hasHintLabelOrSlot = computed(
+    () => !hasLoadingLabelOrSlot.value && !hasInvalidLabelOrSlot.value && !hasValidLabelOrSlot.value && Boolean(slots.hint || hintLabel.value)
+  );
+  const isVisible = computed(
+    () => hasInvalidLabelOrSlot.value || hasValidLabelOrSlot.value || hasLoadingLabelOrSlot.value || hasHintLabelOrSlot.value
+  );
+  const hintSlotScope = computed(() => ({
+    modelValue: props.value.modelValue,
+    valid: props.value.valid,
+    invalid: props.value.invalid,
+    loading: props.value.loading
+  }));
+  const HintSlot = defineComponent({
+    name: "HintSlot",
+    props: {
+      tag: {
+        type: String,
+        default: "small"
+      }
+    },
+    setup() {
+      return {
+        isVisible,
+        invalidLabel,
+        validLabel,
+        loadingLabel,
+        hintLabel,
+        hasInvalidLabelOrSlot,
+        hasValidLabelOrSlot,
+        hasLoadingLabelOrSlot,
+        hasHintLabelOrSlot
+      };
+    },
+    render() {
+      var _a, _b, _c, _d, _e, _f, _g, _h;
+      if (this.isVisible) {
+        let role;
+        if (this.hasInvalidLabelOrSlot) {
+          role = "alert";
+        }
+        if (this.hasValidLabelOrSlot) {
+          role = "status";
+        }
+        if (this.hasLoadingLabelOrSlot) {
+          return h(
+            this.tag,
+            {
+              role
+            },
+            ((_b = (_a = this.$slots).loading) == null ? void 0 : _b.call(_a)) ?? this.loadingLabel
+          );
+        }
+        if (this.hasInvalidLabelOrSlot) {
+          return h(
+            this.tag,
+            {
+              role
+            },
+            ((_d = (_c = this.$slots).invalid) == null ? void 0 : _d.call(_c)) ?? this.$slots.invalid ?? this.invalidLabel
+          );
+        }
+        if (this.hasValidLabelOrSlot) {
+          return h(
+            this.tag,
+            {
+              role
+            },
+            ((_f = (_e = this.$slots).valid) == null ? void 0 : _f.call(_e)) ?? this.validLabel
+          );
+        }
+        return h(
+          this.tag,
+          {
+            role
+          },
+          ((_h = (_g = this.$slots).hint) == null ? void 0 : _h.call(_g)) ?? this.$slots.hint ?? this.hintLabel
+        );
+      }
+      return null;
+    }
+  });
+  return {
+    hasInvalidLabelOrSlot,
+    hasHintLabelOrSlot,
+    hasValidLabelOrSlot,
+    hasLoadingLabelOrSlot,
+    hintSlotScope,
+    HintSlot
+  };
+}
+const VvIconPropsDefaults = {
+  prefix: "normal"
+  /* normal */
+};
+function useVolver() {
+  return inject(INJECTION_KEY_VOLVER);
+}
+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 __default__$1 = {
+  name: "VvIcon"
 };
-({
-  ...DisabledProps,
-  ...LabelProps,
-  ...PressedProps,
-  ...ActiveProps,
-  ...CurrentProps,
-  ...LinkProps,
-  /**
-   * Button type
-   */
-  type: {
-    type: String,
-    default: ButtonType.button,
-    validator: (value) => Object.values(ButtonType).includes(value)
-  },
-  /**
-   * Button aria-label
-   */
-  ariaLabel: {
-    type: String,
-    default: void 0
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...__default__$1,
+  props: /* @__PURE__ */ mergeDefaults({
+    name: {},
+    color: {},
+    width: {},
+    height: {},
+    provider: {},
+    prefix: {},
+    src: {},
+    horizontalFlip: { type: Boolean },
+    verticalFlip: { type: Boolean },
+    flip: {},
+    mode: {},
+    inline: { type: Boolean },
+    rotate: {},
+    onLoad: { type: Function },
+    svg: {},
+    modifiers: {}
+  }, VvIconPropsDefaults),
+  setup(__props) {
+    const props = __props;
+    const hasRotate = computed(() => {
+      if (typeof props.rotate === "string") {
+        return Number.parseFloat(props.rotate);
+      }
+      return props.rotate;
+    });
+    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}:${name}`;
+      if (iconExists(iconName)) {
+        return iconName;
+      }
+      const iconsCollection = volver == null ? void 0 : volver.iconsCollections.find(
+        (iconsCollection2) => {
+          const icon2 = `@${provider.value}:${iconsCollection2.prefix}:${name}`;
+          return iconExists(icon2);
+        }
+      );
+      if (iconsCollection) {
+        return `@${provider.value}:${iconsCollection.prefix}:${name}`;
+      }
+      return name;
+    });
+    function getSvgContent(svg) {
+      let dom;
+      if (typeof window === "undefined") {
+        const { JSDOM } = require("jsdom");
+        dom = new JSDOM().window;
+      }
+      const domParser = dom ? new dom.DOMParser() : new window.DOMParser();
+      const svgDomString = domParser.parseFromString(svg, "text/html");
+      const svgEl = svgDomString.querySelector("svg");
+      return svgEl;
+    }
+    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(`Error during fetch icon: ${e == null ? void 0 : e.message}`);
+        });
+      }
+    }
+    if (props.svg) {
+      addIconFromSvg(props.svg);
+    }
+    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: unref(hasRotate),
+        color: _ctx.color,
+        onLoad: _ctx.onLoad,
+        icon: unref(icon)
+      }), null, 16, ["class"])) : createCommentVNode("v-if", true);
+    };
   }
 });
-const WRAP = {
-  hard: "hard",
-  soft: "soft"
-};
-const SPELLCHECK = {
-  true: true,
-  false: false,
-  default: "default"
-};
-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
-   */
-  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 },
-  /**
-   * 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: 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: SPELLCHECK.default },
-  /**
-   * If true, the textarea will be resizable
-   */
-  resizable: Boolean
-};
 function useDefaults(componentName, propsDefinition, props) {
   const volver = useVolver();
   const volverComponentDefaults = computed(() => {
@@ -819,14 +809,16 @@ function useDefaults(componentName, propsDefinition, props) {
     }, {});
   });
 }
-const useUniqueId = (id) => computed(() => String((id == null ? void 0 : id.value) || uid()));
+function useUniqueId(id) {
+  return computed(() => String((id == null ? void 0 : id.value) || useId()));
+}
 function useDebouncedInput(modelValue, emit, ms = 0, {
   getter = (value) => value,
   setter = (value) => value
 } = {}) {
   let timeout;
   if (typeof ms === "string") {
-    ms = parseInt(ms);
+    ms = Number.parseInt(ms);
   }
   return computed({
     get: () => getter(modelValue == null ? void 0 : modelValue.value),
@@ -841,30 +833,30 @@ function useDebouncedInput(modelValue, emit, ms = 0, {
   });
 }
 function useComponentIcon(icon, iconPosition) {
+  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;
+  });
   const hasIconBefore = computed(
-    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Position.before)
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Position.before ? hasIcon.value : void 0
   );
   const hasIconAfter = computed(
-    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Position.after)
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Position.after ? hasIcon.value : void 0
   );
   const hasIconLeft = computed(
-    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Side.left)
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.left ? hasIcon.value : void 0
   );
   const hasIconRight = computed(
-    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Side.right)
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.right ? hasIcon.value : void 0
   );
   const hasIconTop = computed(
-    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Side.top)
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.top ? hasIcon.value : void 0
   );
   const hasIconBottom = computed(
-    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Side.bottom)
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.bottom ? hasIcon.value : void 0
   );
-  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,
     hasIconLeft,
@@ -941,8 +933,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
   props: VvTextareaProps,
   emits: VvTextareaEvents,
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const slots = useSlots();
     const propsDefaults = useDefaults(
       "VvTextarea",
@@ -971,10 +964,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       () => props.floating && isEmpty(props.placeholder) ? " " : props.placeholder
     );
     const localModelValue = useDebouncedInput(modelValue, emit, debounce == null ? void 0 : debounce.value);
-    const { hasIcon, hasIconBefore, hasIconAfter } = useComponentIcon(
-      icon,
-      iconPosition
-    );
+    const { hasIconBefore, hasIconAfter } = useComponentIcon(icon, iconPosition);
     const { focused } = useComponentFocus(textarea, emit);
     const isVisible = useElementVisibility(textarea);
     watch(isVisible, (newValue) => {
@@ -1011,34 +1001,34 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       "vv-textarea",
       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
+        "valid": valid.value,
+        "invalid": invalid.value,
+        "loading": loading.value,
+        "disabled": props.disabled,
+        "readonly": props.readonly,
+        "icon-before": hasIconBefore.value !== void 0,
+        "icon-after": hasIconAfter.value !== void 0,
+        "floating": props.floating && !isEmpty(props.label),
+        "dirty": isDirty.value,
+        "focus": focused.value,
+        "resizable": props.resizable
       }))
     );
     const hasAttrs = computed(
       () => ({
-        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,
+        "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": hasHintLabelOrSlot.value ? hasHintId.value : void 0,
         "aria-errormessage": hasInvalidLabelOrSlot.value ? hasHintId.value : void 0
@@ -1053,85 +1043,104 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       minlength: props.minlength,
       clear: onClear
     }));
-    const onClear = () => {
+    function onClear() {
       localModelValue.value = void 0;
-    };
+    }
     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)]
+      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("v-if", true),
+          createElementVNode("div", _hoisted_2, [
+            _ctx.$slots.before ? (openBlock(), createElementBlock("div", _hoisted_3, [
+              renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
+            ])) : createCommentVNode("v-if", true),
+            createElementVNode("div", _hoisted_4, [
+              unref(hasIconBefore) ? (openBlock(), createBlock(
+                _sfc_main$1,
+                mergeProps({ key: 0 }, unref(hasIconBefore), { class: "vv-textarea__icon" }),
+                null,
+                16
+                /* FULL_PROPS */
+              )) : createCommentVNode("v-if", 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 }, unref(hasIconAfter), { class: "vv-textarea__icon vv-textarea__icon-after" }),
+                null,
+                16
+                /* FULL_PROPS */
+              )) : createCommentVNode("v-if", true)
             ]),
-            unref(hasIconAfter) ? (openBlock(), createBlock(_sfc_main$1, mergeProps({
-              key: 1,
-              class: "vv-textarea__icon vv-textarea__icon-after"
-            }, unref(hasIcon)), null, 16)) : createCommentVNode("", true)
+            _ctx.$slots.after ? (openBlock(), createElementBlock("div", _hoisted_6, [
+              renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps(unref(slotProps))))
+            ])) : createCommentVNode("v-if", true),
+            unref(count) ? (openBlock(), createElementBlock("span", _hoisted_7, [
+              renderSlot(_ctx.$slots, "count", normalizeProps(guardReactiveProps(unref(slotProps))), () => [
+                createTextVNode(
+                  toDisplayString(unref(countFormatted)),
+                  1
+                  /* TEXT */
+                )
+              ])
+            ])) : createCommentVNode("v-if", true)
           ]),
-          _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)
-        ]),
-        createVNode(unref(HintSlot), {
-          id: unref(hasHintId),
-          class: "vv-textarea__hint"
-        }, createSlots({ _: 2 }, [
-          _ctx.$slots.hint ? {
-            name: "hint",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "hint", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
-            ]),
-            key: "0"
-          } : void 0,
-          _ctx.$slots.loading ? {
-            name: "loading",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "loading", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
-            ]),
-            key: "1"
-          } : void 0,
-          _ctx.$slots.valid ? {
-            name: "valid",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "valid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
-            ]),
-            key: "2"
-          } : void 0,
-          _ctx.$slots.invalid ? {
-            name: "invalid",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "invalid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
-            ]),
-            key: "3"
-          } : void 0
-        ]), 1032, ["id"])
-      ], 2);
+          createVNode(unref(HintSlot), {
+            id: unref(hasHintId),
+            class: "vv-textarea__hint"
+          }, createSlots({
+            _: 2
+            /* DYNAMIC */
+          }, [
+            _ctx.$slots.hint ? {
+              name: "hint",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "hint", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+              ]),
+              key: "0"
+            } : void 0,
+            _ctx.$slots.loading ? {
+              name: "loading",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "loading", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+              ]),
+              key: "1"
+            } : void 0,
+            _ctx.$slots.valid ? {
+              name: "valid",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "valid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+              ]),
+              key: "2"
+            } : void 0,
+            _ctx.$slots.invalid ? {
+              name: "invalid",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "invalid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+              ]),
+              key: "3"
+            } : void 0
+          ]), 1032, ["id"])
+        ],
+        2
+        /* CLASS */
+      );
     };
   }
 });