@volverjs/ui-vue 0.0.10-beta.8 → 0.0.10

package/dist/components/VvButton/VvButton.es.js

@@ -1,105 +1,10 @@
-import { inject, computed, unref, defineComponent, ref, toRefs, openBlock, createBlock, mergeProps, createCommentVNode, watch, resolveDynamicComponent, withCtx, renderSlot, createTextVNode, toDisplayString, toRef, useAttrs, useSlots, createElementBlock, Fragment } from "vue";
-import { iconExists, Icon, addIcon } from "@iconify/vue";
-import { uid } from "uid";
-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 Strategy = /* @__PURE__ */ ((Strategy2) => {
-  Strategy2["absolute"] = "absolute";
-  Strategy2["fixed"] = "fixed";
-  return Strategy2;
-})(Strategy || {});
+import { inject, computed, toRef, toRefs, defineComponent, getCurrentInstance, ref, watch, resolveComponent, createBlock, openBlock, resolveDynamicComponent, unref, mergeProps, withCtx, renderSlot, createTextVNode, toDisplayString, mergeDefaults, createCommentVNode, useId, useAttrs, useSlots, createElementBlock, Fragment } from "vue";
+import { iconLoaded, Icon, addIcon } from "@iconify/vue";
+var StorageType = /* @__PURE__ */ ((StorageType2) => {
+  StorageType2["local"] = "local";
+  StorageType2["session"] = "session";
+  return StorageType2;
+})(StorageType || {});
 var Side = /* @__PURE__ */ ((Side2) => {
   Side2["left"] = "left";
   Side2["right"] = "right";
@@ -107,17 +12,6 @@ var Side = /* @__PURE__ */ ((Side2) => {
   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";
@@ -136,143 +30,20 @@ var ActionTag = /* @__PURE__ */ ((ActionTag2) => {
   ActionTag2["button"] = "button";
   return ActionTag2;
 })(ActionTag || {});
-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");
-const INJECTION_KEY_BUTTON_GROUP = Symbol.for("buttonGroup");
+const INJECTION_KEY_BUTTON_GROUP = Symbol.for(
+  "buttonGroup"
+);
 const INJECTION_KEY_DROPDOWN_TRIGGER = Symbol.for(
   "dropdownTrigger"
 );
 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__$2 = {
-  name: "VvIcon"
+const VvIconPropsDefaults = {
+  prefix: "normal"
+  /* normal */
 };
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
-  ...__default__$2,
-  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("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.
@@ -288,10 +59,7 @@ const LinkProps = {
   /**
    * Anchor target
    */
-  target: {
-    type: String,
-    validator: (value) => Object.values(AnchorTarget).includes(value)
-  },
+  target: String,
   /**
    * Anchor rel
    */
@@ -304,7 +72,10 @@ const LoadingProps = {
   /**
    * Loading status
    */
-  loading: Boolean,
+  loading: {
+    type: Boolean,
+    default: false
+  },
   /**
    * Loading label
    */
@@ -317,44 +88,65 @@ 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 ModifiersProps = {
   /**
    * Component BEM modifiers
    */
-  modifiers: [String, Array]
+  modifiers: {
+    type: [String, Array],
+    default: void 0
+  }
 };
-({
+const IconProps = {
   /**
    * VvIcon name or props
-   * @see VVIcon
+   * @see VvIcon
    */
-  icon: { type: [String, Object] },
+  icon: {
+    type: [String, Object],
+    default: void 0
+  },
   /**
    * VvIcon position
    */
@@ -363,7 +155,7 @@ const ModifiersProps = {
     default: Position.before,
     validation: (value) => Object.values(Position).includes(value)
   }
-});
+};
 const UnselectableProps = {
   /**
    * If true the input will be unselectable
@@ -382,133 +174,194 @@ const IdProps = {
    * Dropdown placement
    */
   placement: {
-    type: String,
-    default: Side.bottom,
-    validator: (value) => Object.values(Side).includes(value) || Object.values(Placement).includes(value)
-  },
+    default: Side.bottom
+  }
+});
+const ActionProps = {
+  ...DisabledProps,
+  ...LabelProps,
+  ...PressedProps,
+  ...ActiveProps,
+  ...CurrentProps,
+  ...LinkProps,
   /**
-   * Dropdown strategy
+   * Button type
    */
-  strategy: {
+  type: {
     type: String,
-    default: void 0,
-    validator: (value) => Object.values(Strategy).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
+    default: ButtonType.button,
+    validator: (value) => Object.values(ButtonType).includes(value)
   },
   /**
-   * Flip dropdown position if there is no space in the default position
-   * @see https://floating-ui.com/docs/flip
+   * Button aria-label
    */
-  flip: {
-    type: [Boolean, Object],
-    default: true
+  ariaLabel: {
+    type: String,
+    default: void 0
   },
   /**
-   * Size of the dropdown
-   * @see https://floating-ui.com/docs/size
+   * Default tag for the action
    */
-  size: {
-    type: [Boolean, Object],
-    default: () => ({ padding: 10 })
-  },
+  defaultTag: {
+    type: String,
+    default: ActionTag.button
+  }
+};
+({
+  storageType: {
+    default: StorageType.local
+  }
+});
+function useGroupStateInject(groupKey) {
+  const group = inject(groupKey, void 0);
+  const isInGroup = computed(() => group !== void 0);
+  function getGroupOrLocalRef(propName, props, emit) {
+    const groupPropValue = 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,
   /**
-   * Automatically change the position of the dropdown
-   * @see https://floating-ui.com/docs/autoPlacement
+   * Button icon position
    */
-  autoPlacement: {
-    type: [Boolean, Object],
-    default: false
+  iconPosition: {
+    type: String,
+    default: Side.left,
+    validator: (value) => Object.values(Side).includes(value)
   },
   /**
-   * Add arrow to the dropdown
-   * @see https://floating-ui.com/docs/arrow
+   * Loading icon
    */
-  arrow: {
-    type: Boolean,
-    default: false
-  },
+  loadingIcon: { type: String, default: "eos-icons:bubble-loading" },
   /**
-   * Keep open dropdown on click outside
+   * Enable button toggle
    */
-  keepOpen: {
+  toggle: {
     type: Boolean,
     default: false
   },
   /**
-   * Autofocus first item on dropdown open
+   * Button toggle value
    */
-  autofocusFirst: {
-    type: Boolean,
-    default: true
+  value: {
+    type: [String, Number, Boolean],
+    default: void 0
   },
   /**
-   * Set dropdown width to the same as the trigger
-   */
-  triggerWidth: {
-    type: Boolean
-  }
-});
-const ActionProps = {
-  ...DisabledProps,
-  ...LabelProps,
-  ...PressedProps,
-  ...ActiveProps,
-  ...CurrentProps,
-  ...LinkProps,
-  /**
-   * Button type
+   * Value associated with the unchecked state
    */
-  type: {
-    type: String,
-    default: ButtonType.button,
-    validator: (value) => Object.values(ButtonType).includes(value)
+  uncheckedValue: {
+    type: [String, Number, Boolean],
+    default: void 0
   },
   /**
-   * Button aria-label
+   * Button toggle model value
    */
-  ariaLabel: {
-    type: String,
+  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?.multiple.value ?? false);
+  const modifiers = computed(() => {
+    let localModifiers = props.modifiers;
+    let groupModifiers = 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?.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, void 0);
+}
 function useInjectedDropdownTrigger() {
   return inject(INJECTION_KEY_DROPDOWN_TRIGGER, {});
 }
 function useInjectedDropdownAction() {
   return inject(INJECTION_KEY_DROPDOWN_ACTION, {});
 }
-const __default__$1 = {
+const __default__$2 = {
   name: "VvAction"
 };
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  ...__default__$1,
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  ...__default__$2,
   props: VvActionProps,
   emits: VvActionEvents,
-  setup(__props, { expose: __expose, emit }) {
+  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 });
@@ -527,7 +380,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       }
     );
     const pressed = computed(() => {
-      return props.pressed || (dropdownExpanded == null ? void 0 : dropdownExpanded.value);
+      return props.pressed || dropdownExpanded?.value;
     });
     const { role } = useInjectedDropdownAction();
     const hasTag = computed(() => {
@@ -535,19 +388,19 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         case props.disabled:
           return ActionTag.button;
         case props.to !== void 0:
-          return (volver == null ? void 0 : volver.nuxt) ? ActionTag.nuxtLink : ActionTag.routerLink;
+          return volver?.nuxt ? resolveComponent(ActionTag.nuxtLink) : ActionTag.routerLink;
         case props.href !== void 0:
           return ActionTag.a;
         default:
-          return ActionTag.button;
+          return props.defaultTag;
       }
     });
     const hasProps = computed(() => {
       const toReturn = {
-        ...dropdownAria == null ? void 0 : dropdownAria.value,
+        ...dropdownAria?.value,
         ariaPressed: pressed.value ? true : void 0,
         ariaLabel: props.ariaLabel,
-        role: role == null ? void 0 : role.value
+        role: role?.value
       };
       switch (hasTag.value) {
         case ActionTag.a:
@@ -564,30 +417,41 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             to: props.to,
             target: props.target
           };
-        default:
+        case ActionTag.button:
           return {
             ...toReturn,
             type: props.type,
             disabled: props.disabled
           };
+        default:
+          return toReturn;
+      }
+    });
+    function onClick(e) {
+      if (props.disabled) {
+        e.preventDefault();
+        return;
+      }
+      if (instance?.vnode.props?.onClick) {
+        emit("click", e);
+        return;
+      }
+      dropdownEventBus?.emit("click", e);
+    }
+    function onMouseover(e) {
+      if (instance?.vnode.props?.onMouseover) {
+        emit("mouseover", e);
+        return;
       }
-    });
-    const onClick = (e) => {
-      if (props.disabled) {
-        e.preventDefault();
+      dropdownEventBus?.emit("mouseover", e);
+    }
+    function onMouseleave(e) {
+      if (instance?.vnode.props?.onMouseleave) {
+        emit("mouseleave", e);
         return;
       }
-      dropdownEventBus == null ? void 0 : dropdownEventBus.emit("click", e);
-      emit("click", e);
-    };
-    const onMouseover = (e) => {
-      dropdownEventBus == null ? void 0 : dropdownEventBus.emit("mouseover", e);
-      emit("mouseover", e);
-    };
-    const onMouseleave = (e) => {
-      dropdownEventBus == null ? void 0 : dropdownEventBus.emit("mouseleave", e);
-      emit("mouseleave", e);
-    };
+      dropdownEventBus?.emit("mouseleave", e);
+    }
     return (_ctx, _cache) => {
       return openBlock(), createBlock(resolveDynamicComponent(unref(hasTag)), mergeProps(unref(hasProps), {
         ref_key: "element",
@@ -617,10 +481,145 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-function equals(obj1, obj2, field) {
-  if (field) {
-    return resolveFieldData(obj1, field) === resolveFieldData(obj2, field);
+function useModifiers(prefix, modifiers, others) {
+  return computed(() => {
+    const toReturn = {
+      [prefix]: true
+    };
+    const modifiersArray = typeof modifiers?.value === "string" ? modifiers.value.split(" ") : 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: /* @__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?.iconsProvider;
+    });
+    const icon = computed(() => {
+      const name = props.name ?? "";
+      const iconName = `@${provider.value}:${props.prefix}:${name}`;
+      if (iconLoaded(iconName)) {
+        return iconName;
+      }
+      const iconsCollection = volver?.iconsCollections.find(
+        (iconsCollection2) => {
+          const icon2 = `@${provider.value}:${iconsCollection2.prefix}:${name}`;
+          return iconLoaded(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?.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 && !iconLoaded(`@${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?.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,
+        icon: unref(icon)
+      }, { onLoad: _ctx.onLoad }), null, 16, ["class", "onLoad"])) : createCommentVNode("v-if", true);
+    };
   }
+});
+function useUniqueId(id) {
+  return computed(() => String(id?.value || useId()));
+}
+function equals(obj1, obj2, field) {
   return deepEquals(obj1, obj2);
 }
 function deepEquals(a, b) {
@@ -632,32 +631,36 @@ function deepEquals(a, b) {
     let i, length, key;
     if (arrA && arrB) {
       length = a.length;
-      if (length != b.length)
+      if (length !== b.length)
         return false;
-      for (i = length; i-- !== 0; )
+      for (i = length; i-- !== 0; ) {
         if (!deepEquals(a[i], b[i]))
           return false;
+      }
       return true;
     }
-    if (arrA != arrB)
+    if (arrA !== arrB)
       return false;
-    const dateA = a instanceof Date, dateB = b instanceof Date;
-    if (dateA != dateB)
+    const dateA = a instanceof Date;
+    const dateB = b instanceof Date;
+    if (dateA !== dateB)
       return false;
     if (dateA && dateB)
-      return a.getTime() == b.getTime();
-    const regexpA = a instanceof RegExp, regexpB = b instanceof RegExp;
-    if (regexpA != regexpB)
+      return a.getTime() === b.getTime();
+    const regexpA = a instanceof RegExp;
+    const regexpB = b instanceof RegExp;
+    if (regexpA !== regexpB)
       return false;
     if (regexpA && regexpB)
-      return a.toString() == b.toString();
+      return a.toString() === b.toString();
     const keys = Object.keys(a);
     length = keys.length;
     if (length !== Object.keys(b).length)
       return false;
-    for (i = length; i-- !== 0; )
+    for (i = length; i-- !== 0; ) {
       if (!Object.prototype.hasOwnProperty.call(b, keys[i]))
         return false;
+    }
     for (i = length; i-- !== 0; ) {
       key = keys[i];
       if (!deepEquals(a[key], b[key]))
@@ -665,26 +668,7 @@ function deepEquals(a, b) {
     }
     return true;
   }
-  return a !== a && b !== b;
-}
-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;
-        }
-        value = value[fields[i]];
-      }
-      return value;
-    }
-  } else {
-    return null;
-  }
+  return Number.isNaN(a) && Number.isNaN(b);
 }
 function contains(value, list) {
   if (value != null && list && list.length) {
@@ -696,146 +680,41 @@ function contains(value, list) {
   }
   return false;
 }
-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 useInjectedGroupState(groupKey) {
-  const group = inject(groupKey, void 0);
-  const isInGroup = computed(() => !isEmpty(group));
-  function getGroupOrLocalRef(propName, props, emit) {
-    if (group == null ? void 0 : group.value) {
-      const groupPropValue = unref(group.value)[propName];
-      return computed({
-        get() {
-          return groupPropValue == null ? void 0 : 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,
-  /**
-   * Button icon
-   */
-  icon: [String, Object],
-  /**
-   * 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 } = 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.value.multiple.value) ?? false);
-  const modifiers = computed(() => {
-    let localModifiers = props.modifiers;
-    let groupModifiers = group == null ? void 0 : group.value.modifiers.value;
-    const toReturn = /* @__PURE__ */ new Set();
-    if (localModifiers) {
-      if (!Array.isArray(localModifiers)) {
-        localModifiers = localModifiers.split(" ");
-      }
-      localModifiers.forEach((modifier) => toReturn.add(modifier));
+function useComponentIcon(icon, iconPosition) {
+  const hasIcon = computed(() => {
+    if (typeof icon?.value === "string") {
+      return { name: icon?.value };
     }
-    if (groupModifiers) {
-      if (!Array.isArray(groupModifiers)) {
-        groupModifiers = groupModifiers.split(" ");
-      }
-      groupModifiers.forEach((modifier) => toReturn.add(modifier));
-    }
-    return Array.from(toReturn);
+    return icon?.value;
   });
-  const disabled = computed(
-    () => {
-      var _a;
-      return Boolean(props.disabled || ((_a = group == null ? void 0 : group.value) == null ? void 0 : _a.disabled.value));
-    }
+  const hasIconBefore = computed(
+    () => iconPosition?.value === Position.before ? hasIcon.value : void 0
+  );
+  const hasIconAfter = computed(
+    () => iconPosition?.value === Position.after ? hasIcon.value : void 0
+  );
+  const hasIconLeft = computed(
+    () => iconPosition?.value === Side.left ? hasIcon.value : void 0
+  );
+  const hasIconRight = computed(
+    () => iconPosition?.value === Side.right ? hasIcon.value : void 0
+  );
+  const hasIconTop = computed(
+    () => iconPosition?.value === Side.top ? hasIcon.value : void 0
+  );
+  const hasIconBottom = computed(
+    () => iconPosition?.value === Side.bottom ? hasIcon.value : void 0
   );
   return {
-    // group props
-    group,
-    isInGroup,
-    modelValue,
-    toggle,
-    unselectable,
-    multiple,
-    modifiers,
-    disabled,
-    // local props
-    id,
-    pressed,
-    iconPosition,
-    icon,
-    label
+    hasIcon,
+    hasIconLeft,
+    hasIconRight,
+    hasIconTop,
+    hasIconBottom,
+    hasIconBefore,
+    hasIconAfter
   };
 }
-const useUniqueId = (id) => computed(() => String((id == null ? void 0 : id.value) || uid()));
 const _hoisted_1 = {
   key: 1,
   class: "vv-button__label"
@@ -845,14 +724,16 @@ const _hoisted_2 = {
   class: "vv-button__label"
 };
 const __default__ = {
-  name: "VvButton"
+  name: "VvButton",
+  inheritAttrs: false
 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
   props: VvButtonProps,
   emits: VvButtonEvents,
-  setup(__props, { expose: __expose, emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const attrs = useAttrs();
     const slots = useSlots();
     const {
@@ -867,12 +748,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       unselectable
     } = useGroupProps(props, emit);
     const hasId = useUniqueId(id);
-    const name = computed(() => (attrs == null ? void 0 : attrs.name) || hasId.value);
+    const name = computed(() => attrs?.name || hasId.value);
     const element = ref(null);
-    const $el = computed(() => {
-      var _a;
-      return (_a = element.value) == null ? void 0 : _a.$el;
-    });
+    const $el = computed(() => element.value?.$el);
     __expose({ $el });
     const pressed = computed(() => {
       if (!toggle.value) {
@@ -887,24 +765,30 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       "vv-button",
       modifiers,
       computed(() => ({
-        reverse: [Side.right, Side.bottom].includes(
+        "reverse": [Side.right, Side.bottom].includes(
           iconPosition.value
         ),
-        column: [Side.top, Side.bottom].includes(
+        "column": [Side.top, Side.bottom].includes(
           iconPosition.value
         ),
         "icon-only": Boolean(
-          (icon == null ? void 0 : icon.value) && !(label == null ? void 0 : label.value) && !slots.default
+          icon?.value && !label?.value && !slots.default
         )
       }))
     );
-    const hasIconProps = computed(
-      () => typeof (icon == null ? void 0 : icon.value) === "string" ? { name: icon == null ? void 0 : icon.value } : icon == null ? void 0 : icon.value
-    );
+    const { hasIcon } = useComponentIcon(icon);
     const toggleValue = computed(() => {
       return props.value !== void 0 ? props.value : name.value;
     });
-    const onClick = () => {
+    const hasListeners = computed(() => {
+      if (!toggle.value) {
+        return void 0;
+      }
+      return {
+        onClick
+      };
+    });
+    function onClick() {
       if (toggle.value) {
         if (Array.isArray(modelValue.value)) {
           if (contains(toggleValue.value, modelValue.value)) {
@@ -924,9 +808,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }
         modelValue.value = toggleValue.value;
       }
-    };
+    }
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$1, mergeProps({
+      return openBlock(), createBlock(_sfc_main$2, mergeProps({
+        ...unref(attrs),
+        ...unref(hasListeners),
         disabled: unref(disabled),
         pressed: unref(pressed),
         active: _ctx.active,
@@ -940,13 +826,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         id: unref(hasId),
         ref_key: "element",
         ref: element,
-        class: unref(bemCssClasses),
-        onClick
+        class: unref(bemCssClasses)
       }), {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default", {}, () => [
             _ctx.loading ? renderSlot(_ctx.$slots, "loading", { key: 0 }, () => [
-              _ctx.loadingIcon ? (openBlock(), createBlock(_sfc_main$2, {
+              _ctx.loadingIcon ? (openBlock(), createBlock(_sfc_main$1, {
                 key: 0,
                 class: "vv-button__loading-icon",
                 name: _ctx.loadingIcon
@@ -963,12 +848,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               { key: 1 },
               [
                 renderSlot(_ctx.$slots, "before"),
-                unref(icon) ? (openBlock(), createBlock(
-                  _sfc_main$2,
-                  mergeProps({
-                    key: 0,
-                    class: "vv-button__icon"
-                  }, unref(hasIconProps)),
+                unref(hasIcon) ? (openBlock(), createBlock(
+                  _sfc_main$1,
+                  mergeProps({ key: 0 }, unref(hasIcon), { class: "vv-button__icon" }),
                   null,
                   16
                   /* FULL_PROPS */