@volverjs/ui-vue 0.0.10-beta.47 → 0.0.10-beta.49

package/dist/components/VvInputFile/VvInputFile.es.js

@@ -1,24 +1,7 @@
-import { inject, computed, unref, defineComponent, mergeDefaults, ref, toRefs, openBlock, createBlock, mergeProps, createCommentVNode, getCurrentInstance, watch, resolveDynamicComponent, withCtx, renderSlot, createTextVNode, toDisplayString, toRef, useAttrs, useSlots, createElementBlock, Fragment, isRef, h, onBeforeUnmount, normalizeClass, withModifiers, createElementVNode, normalizeProps, createVNode, guardReactiveProps, createSlots } from "vue";
+import { computed, isRef, defineComponent, h, inject, toRef, toRefs, getCurrentInstance, ref, watch, openBlock, createBlock, resolveDynamicComponent, unref, mergeProps, withCtx, renderSlot, createTextVNode, toDisplayString, mergeDefaults, createCommentVNode, useId, useAttrs, useSlots, createElementBlock, Fragment, useTemplateRef, onBeforeUnmount, normalizeClass, withModifiers, createElementVNode, normalizeProps, createVNode, guardReactiveProps, createSlots } from "vue";
 import { useVModel } from "@vueuse/core";
 import Sortable from "vuedraggable";
 import { iconExists, Icon, addIcon } from "@iconify/vue";
-import { uid } from "uid";
-const ACTION_ICONS = {
-  showPassword: "eye-on",
-  hidePassword: "eye-off",
-  showDatePicker: "calendar",
-  showTimePicker: "time",
-  showColorPicker: "color",
-  clear: "close",
-  add: "add",
-  remove: "trash",
-  edit: "edit",
-  download: "download"
-};
-const VvIconPropsDefaults = {
-  prefix: "normal"
-  /* normal */
-};
 var StorageType = /* @__PURE__ */ ((StorageType2) => {
   StorageType2["local"] = "local";
   StorageType2["session"] = "session";
@@ -75,145 +58,6 @@ const INJECTION_KEY_DROPDOWN_TRIGGER = Symbol.for(
 const INJECTION_KEY_DROPDOWN_ACTION = Symbol.for(
   "dropdownAction"
 );
-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__$3 = {
-  name: "VvIcon"
-};
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
-  ...__default__$3,
-  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 LinkProps = {
   /**
    * The router-link/nuxt-link property, if it is defined the button is rendered as a ruouter-link or nuxt-link.
@@ -515,278 +359,138 @@ const ActionProps = {
   },
   storageKey: String
 });
-const VvActionEvents = ["click", "mouseover", "mouseleave"];
-const VvActionProps = ActionProps;
-function useInjectedDropdownTrigger() {
-  return inject(INJECTION_KEY_DROPDOWN_TRIGGER, {});
-}
-function useInjectedDropdownAction() {
-  return inject(INJECTION_KEY_DROPDOWN_ACTION, {});
-}
-const __default__$2 = {
-  name: "VvAction"
+const ACTION_ICONS = {
+  showPassword: "eye-on",
+  hidePassword: "eye-off",
+  showDatePicker: "calendar",
+  showTimePicker: "time",
+  showColorPicker: "color",
+  clear: "close",
+  add: "add",
+  remove: "trash",
+  edit: "edit",
+  download: "download"
 };
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
-  ...__default__$2,
-  props: VvActionProps,
-  emits: VvActionEvents,
-  setup(__props, { expose: __expose, emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const instance = getCurrentInstance();
-    const volver = useVolver();
-    const element = ref(null);
-    __expose({ $el: element });
-    const {
-      reference: dropdownTriggerReference,
-      bus: dropdownEventBus,
-      aria: dropdownAria,
-      expanded: dropdownExpanded
-    } = useInjectedDropdownTrigger();
-    watch(
-      () => element.value,
-      (newValue) => {
-        if (dropdownTriggerReference) {
-          dropdownTriggerReference.value = newValue;
-        }
+const VvIconPropsDefaults = {
+  prefix: "normal"
+  /* normal */
+};
+const VvInputFileProps = {
+  ...IdNameProps,
+  ...ModifiersProps,
+  ...ValidProps,
+  ...InvalidProps,
+  ...HintProps,
+  ...LabelProps,
+  ...LoadingProps,
+  ...ReadonlyProps,
+  ...DisabledProps,
+  ...IconProps,
+  /**
+   * Input value
+   */
+  modelValue: {
+    type: Object
+  },
+  /**
+   * Whether to show progress bar
+   */
+  progress: { type: [Number, String], default: void 0 },
+  /**
+   * Input
+   * Text that appears in the form control when it has no value set
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder
+   */
+  placeholder: { type: String, default: void 0 },
+  /**
+   * File types to accept
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept
+   */
+  accept: { type: String, default: "*" },
+  /**
+   * Whether to allow multiple values
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#multiple
+   */
+  multiple: { type: Boolean, default: false },
+  /**
+   * Front or rear camera
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture
+   */
+  capture: {
+    type: String,
+    default: void 0,
+    validation: (value) => {
+      if (value === void 0) {
+        return true;
       }
-    );
-    const pressed = computed(() => {
-      return props.pressed || (dropdownExpanded == null ? void 0 : dropdownExpanded.value);
-    });
-    const { role } = useInjectedDropdownAction();
-    const hasTag = computed(() => {
-      switch (true) {
-        case props.disabled:
-          return ActionTag.button;
-        case props.to !== void 0:
-          return (volver == null ? void 0 : volver.nuxt) ? ActionTag.nuxtLink : ActionTag.routerLink;
-        case props.href !== void 0:
-          return ActionTag.a;
-        default:
-          return props.defaultTag;
-      }
-    });
-    const hasProps = computed(() => {
-      const toReturn = {
-        ...dropdownAria == null ? void 0 : dropdownAria.value,
-        ariaPressed: pressed.value ? true : void 0,
-        ariaLabel: props.ariaLabel,
-        role: role == null ? void 0 : role.value
-      };
-      switch (hasTag.value) {
-        case ActionTag.a:
-          return {
-            ...toReturn,
-            href: props.href,
-            target: props.target,
-            rel: props.rel
-          };
-        case ActionTag.routerLink:
-        case ActionTag.nuxtLink:
-          return {
-            ...toReturn,
-            to: props.to,
-            target: props.target
-          };
-        case ActionTag.button:
-          return {
-            ...toReturn,
-            type: props.type,
-            disabled: props.disabled
-          };
-        default:
-          return toReturn;
-      }
-    });
-    function onClick(e) {
-      var _a;
-      if (props.disabled) {
-        e.preventDefault();
-        return;
-      }
-      if ((_a = instance == null ? void 0 : instance.vnode.props) == null ? void 0 : _a.onClick) {
-        emit("click", e);
-        return;
-      }
-      dropdownEventBus == null ? void 0 : dropdownEventBus.emit("click", e);
-    }
-    function onMouseover(e) {
-      var _a;
-      if ((_a = instance == null ? void 0 : instance.vnode.props) == null ? void 0 : _a.onMouseover) {
-        emit("mouseover", e);
-        return;
-      }
-      dropdownEventBus == null ? void 0 : dropdownEventBus.emit("mouseover", e);
-    }
-    function onMouseleave(e) {
-      var _a;
-      if ((_a = instance == null ? void 0 : instance.vnode.props) == null ? void 0 : _a.onMouseleave) {
-        emit("mouseleave", e);
-        return;
-      }
-      dropdownEventBus == null ? void 0 : dropdownEventBus.emit("mouseleave", e);
-    }
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(resolveDynamicComponent(unref(hasTag)), mergeProps(unref(hasProps), {
-        ref_key: "element",
-        ref: element,
-        class: {
-          active: _ctx.active,
-          pressed: unref(pressed),
-          disabled: _ctx.disabled,
-          current: _ctx.current
-        },
-        onClickPassive: onClick,
-        onMouseoverPassive: onMouseover,
-        onMouseleavePassive: onMouseleave
-      }), {
-        default: withCtx(() => [
-          renderSlot(_ctx.$slots, "default", {}, () => [
-            createTextVNode(
-              toDisplayString(_ctx.label),
-              1
-              /* TEXT */
-            )
-          ])
-        ]),
-        _: 3
-        /* FORWARDED */
-      }, 16, ["class"]);
-    };
-  }
-});
-function useInjectedGroupState(groupKey) {
-  const group = inject(groupKey, void 0);
-  const isInGroup = computed(() => group !== void 0);
-  function getGroupOrLocalRef(propName, props, emit) {
-    const groupPropValue = group == null ? void 0 : group[propName];
-    if (groupPropValue) {
-      return computed({
-        get() {
-          return groupPropValue.value;
-        },
-        set(value) {
-          groupPropValue.value = value;
-        }
-      });
+      return ["user", "environment"].includes(value);
     }
-    const propRef = toRef(props, propName);
-    return computed({
-      get() {
-        return propRef.value;
-      },
-      set(value) {
-        if (emit) {
-          emit(`update:${propName}`, value);
-        }
-      }
-    });
-  }
-  return {
-    group,
-    isInGroup,
-    getGroupOrLocalRef
-  };
-}
-const VvButtonEvents = ["update:modelValue"];
-const VvButtonProps = {
-  ...ActionProps,
-  ...IdProps,
-  ...ModifiersProps,
-  ...UnselectableProps,
-  ...LoadingProps,
-  ...IconProps,
+  },
   /**
-   * Button icon position
+   * Max number of files
    */
-  iconPosition: {
+  max: { type: [Number, String], default: void 0 },
+  /**
+   * Show drop area
+   */
+  dropArea: { type: Boolean, default: false },
+  /**
+   * Enable sorting
+   */
+  sortable: { type: Boolean, default: false },
+  /**
+   * Label for add button
+   */
+  labelAdd: {
     type: String,
-    default: Side.left,
-    validator: (value) => Object.values(Side).includes(value)
+    default: "Add file"
   },
   /**
-   * Loading icon
+   * VvIcon name for add button
+   * @see VVIcon
    */
-  loadingIcon: { type: String, default: "eos-icons:bubble-loading" },
+  iconAdd: {
+    type: [String, Object],
+    default: ACTION_ICONS.add
+  },
   /**
-   * Enable button toggle
+   * Label for replace button
    */
-  toggle: {
-    type: Boolean,
-    default: false
+  labelReplace: {
+    type: String,
+    default: "Replace file"
   },
   /**
-   * Button toggle value
+   * VvIcon name for replace button
+   * @see VVIcon
    */
-  value: {
-    type: [String, Number, Boolean],
-    default: void 0
+  iconReplace: {
+    type: [String, Object],
+    default: ACTION_ICONS.edit
   },
   /**
-   * Value associated with the unchecked state
+   * Label for download button
    */
-  uncheckedValue: {
-    type: [String, Number, Boolean],
-    default: void 0
+  labelDownload: {
+    type: String,
+    default: "Downlaod file"
   },
   /**
-   * Button toggle model value
+   * VvIcon name for download button
+   * @see VVIcon
    */
-  modelValue: {
-    type: [String, Number, Boolean],
-    default: void 0
+  iconDownload: {
+    type: [String, Object],
+    default: ACTION_ICONS.download
+  },
+  /**
+   * Label for remove button
+   */
+  labelRemove: {
+    type: String,
+    default: "Remove file"
   }
 };
-function useGroupProps(props, emit) {
-  const { group, isInGroup, getGroupOrLocalRef } = useInjectedGroupState(INJECTION_KEY_BUTTON_GROUP);
-  const { id, iconPosition, icon, label, pressed } = toRefs(props);
-  const modelValue = getGroupOrLocalRef("modelValue", props, emit);
-  const toggle = getGroupOrLocalRef("toggle", props);
-  const unselectable = getGroupOrLocalRef("unselectable", props);
-  const multiple = computed(() => (group == null ? void 0 : group.multiple.value) ?? false);
-  const modifiers = computed(() => {
-    let localModifiers = props.modifiers;
-    let groupModifiers = group == null ? void 0 : group.modifiers.value;
-    const toReturn = /* @__PURE__ */ new Set();
-    if (localModifiers) {
-      if (!Array.isArray(localModifiers)) {
-        localModifiers = localModifiers.split(" ");
-      }
-      localModifiers.forEach((modifier) => toReturn.add(modifier));
-    }
-    if (groupModifiers) {
-      if (!Array.isArray(groupModifiers)) {
-        groupModifiers = groupModifiers.split(" ");
-      }
-      groupModifiers.forEach((modifier) => toReturn.add(modifier));
-    }
-    return Array.from(toReturn);
-  });
-  const disabled = computed(
-    () => Boolean(props.disabled || (group == null ? void 0 : group.disabled.value))
-  );
-  return {
-    // group props
-    group,
-    isInGroup,
-    modelValue,
-    toggle,
-    unselectable,
-    multiple,
-    modifiers,
-    disabled,
-    // local props
-    id,
-    pressed,
-    iconPosition,
-    icon,
-    label
-  };
-}
-function useUniqueId(id) {
-  return computed(() => String((id == null ? void 0 : id.value) || uid()));
-}
 function equals(obj1, obj2, field) {
   return deepEquals(obj1, obj2);
 }
@@ -846,10 +550,539 @@ function contains(value, list) {
       }
     }
   }
-  return false;
-}
-function isString(value) {
-  return typeof value === "string" || value instanceof String;
+  return false;
+}
+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
+  };
+}
+function useGroupStateInject(groupKey) {
+  const group = inject(groupKey, void 0);
+  const isInGroup = computed(() => group !== void 0);
+  function getGroupOrLocalRef(propName, props, emit) {
+    const groupPropValue = group == null ? void 0 : group[propName];
+    if (groupPropValue) {
+      return computed({
+        get() {
+          return groupPropValue.value;
+        },
+        set(value) {
+          groupPropValue.value = value;
+        }
+      });
+    }
+    const propRef = toRef(props, propName);
+    return computed({
+      get() {
+        return propRef.value;
+      },
+      set(value) {
+        if (emit) {
+          emit(`update:${propName}`, value);
+        }
+      }
+    });
+  }
+  return {
+    group,
+    isInGroup,
+    getGroupOrLocalRef
+  };
+}
+const VvButtonEvents = ["update:modelValue"];
+const VvButtonProps = {
+  ...ActionProps,
+  ...IdProps,
+  ...ModifiersProps,
+  ...UnselectableProps,
+  ...LoadingProps,
+  ...IconProps,
+  /**
+   * Button icon position
+   */
+  iconPosition: {
+    type: String,
+    default: Side.left,
+    validator: (value) => Object.values(Side).includes(value)
+  },
+  /**
+   * Loading icon
+   */
+  loadingIcon: { type: String, default: "eos-icons:bubble-loading" },
+  /**
+   * Enable button toggle
+   */
+  toggle: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Button toggle value
+   */
+  value: {
+    type: [String, Number, Boolean],
+    default: void 0
+  },
+  /**
+   * Value associated with the unchecked state
+   */
+  uncheckedValue: {
+    type: [String, Number, Boolean],
+    default: void 0
+  },
+  /**
+   * Button toggle model value
+   */
+  modelValue: {
+    type: [String, Number, Boolean],
+    default: void 0
+  }
+};
+function useGroupProps(props, emit) {
+  const { group, isInGroup, getGroupOrLocalRef } = useGroupStateInject(INJECTION_KEY_BUTTON_GROUP);
+  const { id, iconPosition, icon, label, pressed } = toRefs(props);
+  const modelValue = getGroupOrLocalRef("modelValue", props, emit);
+  const toggle = getGroupOrLocalRef("toggle", props);
+  const unselectable = getGroupOrLocalRef("unselectable", props);
+  const multiple = computed(() => (group == null ? void 0 : group.multiple.value) ?? false);
+  const modifiers = computed(() => {
+    let localModifiers = props.modifiers;
+    let groupModifiers = group == null ? void 0 : group.modifiers.value;
+    const toReturn = /* @__PURE__ */ new Set();
+    if (localModifiers) {
+      if (!Array.isArray(localModifiers)) {
+        localModifiers = localModifiers.split(" ");
+      }
+      localModifiers.forEach((modifier) => toReturn.add(modifier));
+    }
+    if (groupModifiers) {
+      if (!Array.isArray(groupModifiers)) {
+        groupModifiers = groupModifiers.split(" ");
+      }
+      groupModifiers.forEach((modifier) => toReturn.add(modifier));
+    }
+    return Array.from(toReturn);
+  });
+  const disabled = computed(
+    () => Boolean(props.disabled || (group == null ? void 0 : group.disabled.value))
+  );
+  return {
+    // group props
+    group,
+    isInGroup,
+    modelValue,
+    toggle,
+    unselectable,
+    multiple,
+    modifiers,
+    disabled,
+    // local props
+    id,
+    pressed,
+    iconPosition,
+    icon,
+    label
+  };
+}
+const VvActionEvents = ["click", "mouseover", "mouseleave"];
+const VvActionProps = ActionProps;
+function useVolver() {
+  return inject(INJECTION_KEY_VOLVER);
+}
+function useInjectedDropdownTrigger() {
+  return inject(INJECTION_KEY_DROPDOWN_TRIGGER, {});
+}
+function useInjectedDropdownAction() {
+  return inject(INJECTION_KEY_DROPDOWN_ACTION, {});
+}
+const __default__$3 = {
+  name: "VvAction"
+};
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  ...__default__$3,
+  props: VvActionProps,
+  emits: VvActionEvents,
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const instance = getCurrentInstance();
+    const volver = useVolver();
+    const element = ref(null);
+    __expose({ $el: element });
+    const {
+      reference: dropdownTriggerReference,
+      bus: dropdownEventBus,
+      aria: dropdownAria,
+      expanded: dropdownExpanded
+    } = useInjectedDropdownTrigger();
+    watch(
+      () => element.value,
+      (newValue) => {
+        if (dropdownTriggerReference) {
+          dropdownTriggerReference.value = newValue;
+        }
+      }
+    );
+    const pressed = computed(() => {
+      return props.pressed || (dropdownExpanded == null ? void 0 : dropdownExpanded.value);
+    });
+    const { role } = useInjectedDropdownAction();
+    const hasTag = computed(() => {
+      switch (true) {
+        case props.disabled:
+          return ActionTag.button;
+        case props.to !== void 0:
+          return (volver == null ? void 0 : volver.nuxt) ? ActionTag.nuxtLink : ActionTag.routerLink;
+        case props.href !== void 0:
+          return ActionTag.a;
+        default:
+          return props.defaultTag;
+      }
+    });
+    const hasProps = computed(() => {
+      const toReturn = {
+        ...dropdownAria == null ? void 0 : dropdownAria.value,
+        ariaPressed: pressed.value ? true : void 0,
+        ariaLabel: props.ariaLabel,
+        role: role == null ? void 0 : role.value
+      };
+      switch (hasTag.value) {
+        case ActionTag.a:
+          return {
+            ...toReturn,
+            href: props.href,
+            target: props.target,
+            rel: props.rel
+          };
+        case ActionTag.routerLink:
+        case ActionTag.nuxtLink:
+          return {
+            ...toReturn,
+            to: props.to,
+            target: props.target
+          };
+        case ActionTag.button:
+          return {
+            ...toReturn,
+            type: props.type,
+            disabled: props.disabled
+          };
+        default:
+          return toReturn;
+      }
+    });
+    function onClick(e) {
+      var _a;
+      if (props.disabled) {
+        e.preventDefault();
+        return;
+      }
+      if ((_a = instance == null ? void 0 : instance.vnode.props) == null ? void 0 : _a.onClick) {
+        emit("click", e);
+        return;
+      }
+      dropdownEventBus == null ? void 0 : dropdownEventBus.emit("click", e);
+    }
+    function onMouseover(e) {
+      var _a;
+      if ((_a = instance == null ? void 0 : instance.vnode.props) == null ? void 0 : _a.onMouseover) {
+        emit("mouseover", e);
+        return;
+      }
+      dropdownEventBus == null ? void 0 : dropdownEventBus.emit("mouseover", e);
+    }
+    function onMouseleave(e) {
+      var _a;
+      if ((_a = instance == null ? void 0 : instance.vnode.props) == null ? void 0 : _a.onMouseleave) {
+        emit("mouseleave", e);
+        return;
+      }
+      dropdownEventBus == null ? void 0 : dropdownEventBus.emit("mouseleave", e);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(unref(hasTag)), mergeProps(unref(hasProps), {
+        ref_key: "element",
+        ref: element,
+        class: {
+          active: _ctx.active,
+          pressed: unref(pressed),
+          disabled: _ctx.disabled,
+          current: _ctx.current
+        },
+        onClickPassive: onClick,
+        onMouseoverPassive: onMouseover,
+        onMouseleavePassive: onMouseleave
+      }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createTextVNode(
+              toDisplayString(_ctx.label),
+              1
+              /* TEXT */
+            )
+          ])
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 16, ["class"]);
+    };
+  }
+});
+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__$2 = {
+  name: "VvIcon"
+};
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  ...__default__$2,
+  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);
+    };
+  }
+});
+function useUniqueId(id) {
+  return computed(() => String((id == null ? void 0 : id.value) || useId()));
 }
 function useComponentIcon(icon, iconPosition) {
   const hasIcon = computed(() => {
@@ -984,7 +1217,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       }
     }
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$2, mergeProps({
+      return openBlock(), createBlock(_sfc_main$3, mergeProps({
         ...unref(attrs),
         ...unref(hasListeners),
         disabled: unref(disabled),
@@ -1005,7 +1238,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default", {}, () => [
             _ctx.loading ? renderSlot(_ctx.$slots, "loading", { key: 0 }, () => [
-              _ctx.loadingIcon ? (openBlock(), createBlock(_sfc_main$3, {
+              _ctx.loadingIcon ? (openBlock(), createBlock(_sfc_main$2, {
                 key: 0,
                 class: "vv-button__loading-icon",
                 name: _ctx.loadingIcon
@@ -1023,7 +1256,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               [
                 renderSlot(_ctx.$slots, "before"),
                 unref(hasIcon) ? (openBlock(), createBlock(
-                  _sfc_main$3,
+                  _sfc_main$2,
                   mergeProps({ key: 0 }, unref(hasIcon), { class: "vv-button__icon" }),
                   null,
                   16
@@ -1051,240 +1284,6 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-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 VvInputFileProps = {
-  ...IdNameProps,
-  ...ModifiersProps,
-  ...ValidProps,
-  ...InvalidProps,
-  ...HintProps,
-  ...LabelProps,
-  ...LoadingProps,
-  ...ReadonlyProps,
-  ...DisabledProps,
-  ...IconProps,
-  /**
-   * Input value
-   */
-  modelValue: {
-    type: Object
-  },
-  /**
-   * Whether to show progress bar
-   */
-  progress: { type: [Number, String], default: void 0 },
-  /**
-   * Input
-   * Text that appears in the form control when it has no value set
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder
-   */
-  placeholder: { type: String, default: void 0 },
-  /**
-   * File types to accept
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept
-   */
-  accept: { type: String, default: "*" },
-  /**
-   * Whether to allow multiple values
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#multiple
-   */
-  multiple: { type: Boolean, default: false },
-  /**
-   * Front or rear camera
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture
-   */
-  capture: {
-    type: String,
-    default: void 0,
-    validation: (value) => {
-      if (value === void 0) {
-        return true;
-      }
-      return ["user", "environment"].includes(value);
-    }
-  },
-  /**
-   * Max number of files
-   */
-  max: { type: [Number, String], default: void 0 },
-  /**
-   * Show drop area
-   */
-  dropArea: { type: Boolean, default: false },
-  /**
-   * Enable sorting
-   */
-  sortable: { type: Boolean, default: false },
-  /**
-   * Label for add button
-   */
-  labelAdd: {
-    type: String,
-    default: "Add file"
-  },
-  /**
-   * VvIcon name for add button
-   * @see VVIcon
-   */
-  iconAdd: {
-    type: [String, Object],
-    default: ACTION_ICONS.add
-  },
-  /**
-   * Label for replace button
-   */
-  labelReplace: {
-    type: String,
-    default: "Replace file"
-  },
-  /**
-   * VvIcon name for replace button
-   * @see VVIcon
-   */
-  iconReplace: {
-    type: [String, Object],
-    default: ACTION_ICONS.edit
-  },
-  /**
-   * Label for download button
-   */
-  labelDownload: {
-    type: String,
-    default: "Downlaod file"
-  },
-  /**
-   * VvIcon name for download button
-   * @see VVIcon
-   */
-  iconDownload: {
-    type: [String, Object],
-    default: ACTION_ICONS.download
-  },
-  /**
-   * Label for remove button
-   */
-  labelRemove: {
-    type: String,
-    default: "Remove file"
-  }
-};
 function useDefaults(componentName, propsDefinition, props) {
   const volver = useVolver();
   const volverComponentDefaults = computed(() => {
@@ -1430,7 +1429,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return hasMax.value - files.value.length > 1;
     });
     const isDragging = ref(false);
-    const inputEl = ref();
+    const inputEl = useTemplateRef("inputEl");
     function onDragenter() {
       isDragging.value = true;
     }
@@ -1634,7 +1633,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           )) : createCommentVNode("v-if", true),
           createElementVNode("div", _hoisted_4, [
             unref(hasIconBefore) ? (openBlock(), createBlock(
-              _sfc_main$3,
+              _sfc_main$2,
               normalizeProps(mergeProps({ key: 0 }, unref(hasIconBefore))),
               null,
               16
@@ -1664,7 +1663,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               max: "100"
             }, toDisplayString(_ctx.progress) + "% ", 9, _hoisted_6)) : createCommentVNode("v-if", true),
             unref(hasIconAfter) ? (openBlock(), createBlock(
-              _sfc_main$3,
+              _sfc_main$2,
               normalizeProps(mergeProps({ key: 2 }, unref(hasIconAfter))),
               null,
               16
@@ -1696,7 +1695,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   onClick: withModifiers(($event) => onClickDownloadFile(file), ["stop"])
                 }, [
                   createVNode(
-                    _sfc_main$3,
+                    _sfc_main$2,
                     normalizeProps(guardReactiveProps(unref(hasIconDownload))),
                     null,
                     16