@volverjs/ui-vue 0.0.10-beta.7 → 0.0.10-beta.70

package/dist/components/VvDropdownOption/VvDropdownOption.es.js

@@ -1,11 +1,11 @@
-import { inject, provide, ref, defineComponent, watch, openBlock, createElementBlock, mergeProps, unref, renderSlot, computed, toRefs, createBlock, normalizeClass, withCtx, createElementVNode, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString } from "vue";
+import { inject, provide, ref, defineComponent, watch, createElementBlock, openBlock, mergeProps, unref, renderSlot, computed, toRefs, createBlock, normalizeClass, withCtx, createElementVNode, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString } from "vue";
 import "mitt";
 import { useElementHover, useFocus, useFocusWithin } from "@vueuse/core";
-var Strategy = /* @__PURE__ */ ((Strategy2) => {
-  Strategy2["absolute"] = "absolute";
-  Strategy2["fixed"] = "fixed";
-  return Strategy2;
-})(Strategy || {});
+var StorageType = /* @__PURE__ */ ((StorageType2) => {
+  StorageType2["local"] = "local";
+  StorageType2["session"] = "session";
+  return StorageType2;
+})(StorageType || {});
 var Side = /* @__PURE__ */ ((Side2) => {
   Side2["left"] = "left";
   Side2["right"] = "right";
@@ -13,17 +13,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";
@@ -35,146 +24,63 @@ var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
   ButtonType2["reset"] = "reset";
   return ButtonType2;
 })(ButtonType || {});
+var ActionTag = /* @__PURE__ */ ((ActionTag2) => {
+  ActionTag2["nuxtLink"] = "nuxt-link";
+  ActionTag2["routerLink"] = "router-link";
+  ActionTag2["a"] = "a";
+  ActionTag2["button"] = "button";
+  return ActionTag2;
+})(ActionTag || {});
 var ActionRoles = /* @__PURE__ */ ((ActionRoles2) => {
   ActionRoles2["button"] = "button";
   ActionRoles2["link"] = "link";
   ActionRoles2["menuitem"] = "menuitem";
   return ActionRoles2;
 })(ActionRoles || {});
-var AnchorTarget = /* @__PURE__ */ ((AnchorTarget2) => {
-  AnchorTarget2["_blank"] = "_blank";
-  AnchorTarget2["_self"] = "_self";
-  AnchorTarget2["_parent"] = "_parent";
-  AnchorTarget2["_top"] = "_top";
-  return AnchorTarget2;
-})(AnchorTarget || {});
+var DropdownRole = /* @__PURE__ */ ((DropdownRole2) => {
+  DropdownRole2["listbox"] = "listbox";
+  DropdownRole2["menu"] = "menu";
+  return DropdownRole2;
+})(DropdownRole || {});
 const INJECTION_KEY_DROPDOWN_ITEM = Symbol.for(
   "dropdownItem"
 );
 const INJECTION_KEY_DROPDOWN_ACTION = Symbol.for(
   "dropdownAction"
 );
-function useInjectedDropdownItem() {
-  return inject(INJECTION_KEY_DROPDOWN_ITEM, {});
-}
-function useProvideDropdownAction({
-  expanded
-}) {
-  provide(INJECTION_KEY_DROPDOWN_ACTION, {
-    role: ref(ActionRoles.menuitem),
-    expanded
-  });
-}
-const __default__$1 = {
-  name: "VvDropdownItem"
-};
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  ...__default__$1,
-  setup(__props) {
-    const { role, expanded } = useInjectedDropdownItem();
-    const element = ref(null);
-    useProvideDropdownAction({ expanded });
-    const hovered = useElementHover(element);
-    const { focused } = useFocus(element);
-    const { focused: focusedWithin } = useFocusWithin(element);
-    watch(hovered, (newValue) => {
-      if (newValue) {
-        focused.value = true;
-      }
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", mergeProps({ role: unref(role) }, {
-        ref_key: "element",
-        ref: element,
-        class: ["vv-dropdown__item", { "focus-visible": unref(focused) || unref(focusedWithin) }]
-      }), [
-        renderSlot(_ctx.$slots, "default")
-      ], 16);
-    };
-  }
-});
-const LinkProps = {
-  /**
-   * The router-link/nuxt-link property, if it is defined the button is rendered as a ruouter-link or nuxt-link.
-   * @see Documentation of [router-link](https://router.vuejs.org/api/#router-link) and [nuxt-link](https://nuxtjs.org/api/components-nuxt-link/)
-   */
-  to: {
-    type: [String, Object]
-  },
-  /**
-   * Anchor href
-   */
-  href: String,
-  /**
-   * Anchor target
-   */
-  target: {
-    type: String,
-    validator: (value) => Object.values(AnchorTarget).includes(value)
-  },
-  /**
-   * Anchor rel
-   */
-  rel: {
-    type: String,
-    default: "noopener noreferrer"
-  }
-};
 const DisabledProps = {
   /**
    * Whether the form control is disabled
    */
-  disabled: Boolean
+  disabled: {
+    type: Boolean,
+    default: false
+  }
 };
 const SelectedProps = {
   /**
    * Whether the item is selected
    */
-  selected: Boolean
-};
-const ActiveProps = {
-  /**
-   * Whether the item is active
-   */
-  active: Boolean
-};
-const CurrentProps = {
-  /**
-   * Whether the item is current
-   */
-  current: Boolean
-};
-const PressedProps = {
-  /**
-   * Whether the item is pressed
-   */
-  pressed: Boolean
-};
-const LabelProps = {
-  /**
-   * The item label
-   */
-  label: [String, Number]
+  selected: {
+    type: Boolean,
+    default: false
+  }
 };
 const ModifiersProps = {
   /**
    * Component BEM modifiers
    */
-  modifiers: [String, Array]
+  modifiers: {
+    type: [String, Array],
+    default: void 0
+  }
 };
 ({
-  /**
-   * VvIcon name or props
-   * @see VVIcon
-   */
-  icon: { type: [String, Object] },
   /**
    * VvIcon position
    */
   iconPosition: {
-    type: String,
-    default: Position.before,
-    validation: (value) => Object.values(Position).includes(value)
+    default: Position.before
   }
 });
 const UnselectableProps = {
@@ -188,114 +94,106 @@ const UnselectableProps = {
    * Dropdown placement
    */
   placement: {
-    type: String,
-    default: Side.bottom,
-    validator: (value) => Object.values(Side).includes(value) || Object.values(Placement).includes(value)
-  },
-  /**
-   * Dropdown strategy
-   */
-  strategy: {
-    type: String,
-    default: void 0,
-    validator: (value) => Object.values(Strategy).includes(value)
-  },
+    default: Side.bottom
+  }
+});
+({
   /**
-   * Dropdown show / hide transition name
+   * Button type
    */
-  transitionName: {
-    type: String
+  type: {
+    default: ButtonType.button
   },
   /**
-   * Offset of the dropdown from the trigger
-   * @see https://floating-ui.com/docs/offset
+   * Default tag for the action
    */
-  offset: {
-    type: [Number, String, Object],
-    default: 0
-  },
+  defaultTag: {
+    default: ActionTag.button
+  }
+});
+({
+  storageType: {
+    default: StorageType.local
+  }
+});
+({
   /**
-   * Move dropdown to the side if there is no space in the default position
-   * @see https://floating-ui.com/docs/shift
+   * Dropdown role
    */
-  shift: {
-    type: [Boolean, Object],
+  role: {
+    default: DropdownRole.menu
+  }
+});
+const VvDropdownItemProps = {
+  focusOnHover: {
+    type: Boolean,
     default: false
+  }
+};
+const VvDropdownOptionProps = {
+  ...DisabledProps,
+  ...SelectedProps,
+  ...UnselectableProps,
+  ...ModifiersProps,
+  deselectHintLabel: {
+    type: String
   },
-  /**
-   * Flip dropdown position if there is no space in the default position
-   * @see https://floating-ui.com/docs/flip
-   */
-  flip: {
-    type: [Boolean, Object],
-    default: true
-  },
-  /**
-   * Size of the dropdown
-   * @see https://floating-ui.com/docs/size
-   */
-  size: {
-    type: [Boolean, Object],
-    default: () => ({ padding: 10 })
-  },
-  /**
-   * Automatically change the position of the dropdown
-   * @see https://floating-ui.com/docs/autoPlacement
-   */
-  autoPlacement: {
-    type: [Boolean, Object],
-    default: false
+  selectHintLabel: {
+    type: String
   },
-  /**
-   * Add arrow to the dropdown
-   * @see https://floating-ui.com/docs/arrow
-   */
-  arrow: {
-    type: Boolean,
-    default: false
+  selectedHintLabel: {
+    type: String
   },
-  /**
-   * Keep open dropdown on click outside
-   */
-  keepOpen: {
+  focusOnHover: {
     type: Boolean,
     default: false
-  },
-  /**
-   * Autofocus first item on dropdown open
-   */
-  autofocusFirst: {
-    type: Boolean,
-    default: true
-  },
-  /**
-   * Set dropdown width to the same as the trigger
-   */
-  triggerWidth: {
-    type: Boolean
   }
-});
-({
-  ...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
+};
+function useInjectedDropdownItem() {
+  return inject(INJECTION_KEY_DROPDOWN_ITEM, {});
+}
+function useDropdownProvideAction({
+  expanded
+}) {
+  provide(INJECTION_KEY_DROPDOWN_ACTION, {
+    role: ref(ActionRoles.menuitem),
+    expanded
+  });
+}
+const __default__$1 = {
+  name: "VvDropdownItem"
+};
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...__default__$1,
+  props: VvDropdownItemProps,
+  setup(__props) {
+    const props = __props;
+    const { role, expanded } = useInjectedDropdownItem();
+    const element = ref(null);
+    useDropdownProvideAction({ expanded });
+    const hovered = useElementHover(element);
+    const { focused } = useFocus(element);
+    const { focused: focusedWithin } = useFocusWithin(element);
+    watch(hovered, (newValue) => {
+      if (newValue && props.focusOnHover) {
+        focused.value = true;
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "div",
+        mergeProps({ role: unref(role) }, {
+          ref_key: "element",
+          ref: element,
+          class: ["vv-dropdown__item", { "focus-visible": unref(focused) || unref(focusedWithin) }]
+        }),
+        [
+          renderSlot(_ctx.$slots, "default")
+        ],
+        16
+        /* FULL_PROPS */
+      );
+    };
   }
 });
 function useModifiers(prefix, modifiers, others) {
@@ -327,21 +225,7 @@ const __default__ = {
 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
-  props: {
-    ...DisabledProps,
-    ...SelectedProps,
-    ...UnselectableProps,
-    ...ModifiersProps,
-    deselectHintLabel: {
-      type: String
-    },
-    selectHintLabel: {
-      type: String
-    },
-    selectedHintLabel: {
-      type: String
-    }
-  },
+  props: VvDropdownOptionProps,
   setup(__props) {
     const props = __props;
     const { modifiers } = toRefs(props);
@@ -361,13 +245,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (!props.disabled) {
         return props.selectHintLabel;
       }
+      return "";
     });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(_sfc_main$1, {
         class: normalizeClass(unref(bemCssClasses)),
         tabindex: _ctx.disabled ? -1 : 0,
         "aria-selected": _ctx.selected,
-        "aria-disabled": _ctx.disabled
+        "aria-disabled": _ctx.disabled,
+        "focus-on-hover": _ctx.focusOnHover
       }, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default"),
@@ -376,12 +262,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             title: unref(hintLabel)
           }, [
             renderSlot(_ctx.$slots, "hint", normalizeProps(guardReactiveProps({ disabled: _ctx.disabled, selected: _ctx.selected, unselectable: _ctx.unselectable })), () => [
-              createTextVNode(toDisplayString(unref(hintLabel)), 1)
+              createTextVNode(
+                toDisplayString(unref(hintLabel)),
+                1
+                /* TEXT */
+              )
             ])
           ], 8, _hoisted_1)
         ]),
         _: 3
-      }, 8, ["class", "tabindex", "aria-selected", "aria-disabled"]);
+        /* FORWARDED */
+      }, 8, ["class", "tabindex", "aria-selected", "aria-disabled", "focus-on-hover"]);
     };
   }
 });

package/dist/components/VvDropdownOption/VvDropdownOption.umd.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue"),require("mitt"),require("@vueuse/core")):"function"==typeof define&&define.amd?define(["vue","mitt","@vueuse/core"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).VvDropdownOption=t(e.vue,null,e.core)}(this,(function(e,t,o){"use strict";var n=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(n||{}),l=(e=>(e.before="before",e.after="after",e))(l||{}),r=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(r||{}),s=(e=>(e.button="button",e.link="link",e.menuitem="menuitem",e))(s||{});const d=Symbol.for("dropdownItem"),a=Symbol.for("dropdownAction");const i=e.defineComponent({name:"VvDropdownItem",setup(t){const{role:n,expanded:l}=e.inject(d,{}),r=e.ref(null);!function({expanded:t}){e.provide(a,{role:e.ref(s.menuitem),expanded:t})}({expanded:l});const i=o.useElementHover(r),{focused:u}=o.useFocus(r),{focused:c}=o.useFocusWithin(r);return e.watch(i,(e=>{e&&(u.value=!0)})),(t,o)=>(e.openBlock(),e.createElementBlock("div",e.mergeProps({role:e.unref(n)},{ref_key:"element",ref:r,class:["vv-dropdown__item",{"focus-visible":e.unref(u)||e.unref(c)}]}),[e.renderSlot(t.$slots,"default")],16))}}),u={disabled:Boolean},c={selected:Boolean},f=(Boolean,Boolean,Boolean,{modifiers:[String,Array]});l.before;const p={unselectable:{type:Boolean,default:!0}};n.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,r.button;const b=["title"];return e.defineComponent({name:"VvDropdownOption",props:{...u,...c,...p,...f,deselectHintLabel:{type:String},selectHintLabel:{type:String},selectedHintLabel:{type:String}},setup(t){const o=t,{modifiers:n}=e.toRefs(o),l=function(t,o,n){return e.computed((()=>{const l={[t]:!0},r="string"==typeof(null==o?void 0:o.value)?o.value.split(" "):null==o?void 0:o.value;return r&&Array.isArray(r)&&r.forEach((e=>{e&&(l[`${t}--${e}`]=!0)})),n&&Object.keys(n.value).forEach((o=>{l[`${t}--${o}`]=e.unref(n.value[o])})),l}))}("vv-dropdown-option",n,e.computed((()=>({disabled:o.disabled,selected:o.selected,unselectable:o.unselectable&&o.selected})))),r=e.computed((()=>o.selected?o.unselectable?o.deselectHintLabel:o.selectedHintLabel:o.disabled?void 0:o.selectHintLabel));return(t,o)=>(e.openBlock(),e.createBlock(i,{class:e.normalizeClass(e.unref(l)),tabindex:t.disabled?-1:0,"aria-selected":t.selected,"aria-disabled":t.disabled},{default:e.withCtx((()=>[e.renderSlot(t.$slots,"default"),e.createElementVNode("span",{class:"vv-dropdown-option__hint",title:e.unref(r)},[e.renderSlot(t.$slots,"hint",e.normalizeProps(e.guardReactiveProps({disabled:t.disabled,selected:t.selected,unselectable:t.unselectable})),(()=>[e.createTextVNode(e.toDisplayString(e.unref(r)),1)]))],8,b)])),_:3},8,["class","tabindex","aria-selected","aria-disabled"]))}})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue"),require("mitt"),require("@vueuse/core")):"function"==typeof define&&define.amd?define(["vue","mitt","@vueuse/core"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).VvDropdownOption=t(e.vue,null,e.core)}(this,(function(e,t,o){"use strict";var n=(e=>(e.local="local",e.session="session",e))(n||{}),l=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(l||{}),s=(e=>(e.before="before",e.after="after",e))(s||{}),r=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(r||{}),i=(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(i||{}),u=(e=>(e.button="button",e.link="link",e.menuitem="menuitem",e))(u||{}),d=(e=>(e.listbox="listbox",e.menu="menu",e))(d||{});const a=Symbol.for("dropdownItem"),c=Symbol.for("dropdownAction"),f={disabled:{type:Boolean,default:!1}},p={selected:{type:Boolean,default:!1}},b={modifiers:{type:[String,Array],default:void 0}};s.before;const m={unselectable:{type:Boolean,default:!0}};l.bottom,r.button,i.button,n.local,d.menu;const v={focusOnHover:{type:Boolean,default:!1}},y={...f,...p,...m,...b,deselectHintLabel:{type:String},selectHintLabel:{type:String},selectedHintLabel:{type:String},focusOnHover:{type:Boolean,default:!1}};const h=e.defineComponent({name:"VvDropdownItem",props:v,setup(t){const n=t,{role:l,expanded:s}=e.inject(a,{}),r=e.ref(null);!function({expanded:t}){e.provide(c,{role:e.ref(u.menuitem),expanded:t})}({expanded:s});const i=o.useElementHover(r),{focused:d}=o.useFocus(r),{focused:f}=o.useFocusWithin(r);return e.watch(i,(e=>{e&&n.focusOnHover&&(d.value=!0)})),(t,o)=>(e.openBlock(),e.createElementBlock("div",e.mergeProps({role:e.unref(l)},{ref_key:"element",ref:r,class:["vv-dropdown__item",{"focus-visible":e.unref(d)||e.unref(f)}]}),[e.renderSlot(t.$slots,"default")],16))}});const x=["title"];return e.defineComponent({name:"VvDropdownOption",props:y,setup(t){const o=t,{modifiers:n}=e.toRefs(o),l=function(t,o,n){return e.computed((()=>{const l={[t]:!0},s="string"==typeof(null==o?void 0:o.value)?o.value.split(" "):null==o?void 0:o.value;return s&&Array.isArray(s)&&s.forEach((e=>{e&&(l[`${t}--${e}`]=!0)})),n&&Object.keys(n.value).forEach((o=>{l[`${t}--${o}`]=e.unref(n.value[o])})),l}))}("vv-dropdown-option",n,e.computed((()=>({disabled:o.disabled,selected:o.selected,unselectable:o.unselectable&&o.selected})))),s=e.computed((()=>o.selected?o.unselectable?o.deselectHintLabel:o.selectedHintLabel:o.disabled?"":o.selectHintLabel));return(t,o)=>(e.openBlock(),e.createBlock(h,{class:e.normalizeClass(e.unref(l)),tabindex:t.disabled?-1:0,"aria-selected":t.selected,"aria-disabled":t.disabled,"focus-on-hover":t.focusOnHover},{default:e.withCtx((()=>[e.renderSlot(t.$slots,"default"),e.createElementVNode("span",{class:"vv-dropdown-option__hint",title:e.unref(s)},[e.renderSlot(t.$slots,"hint",e.normalizeProps(e.guardReactiveProps({disabled:t.disabled,selected:t.selected,unselectable:t.unselectable})),(()=>[e.createTextVNode(e.toDisplayString(e.unref(s)),1)]))],8,x)])),_:3},8,["class","tabindex","aria-selected","aria-disabled","focus-on-hover"]))}})}));

package/dist/components/VvIcon/VvIcon.es.js

@@ -1,102 +1,12 @@
-import { inject, computed, unref, defineComponent, ref, toRefs, openBlock, createBlock, mergeProps, createCommentVNode } from "vue";
-import { iconExists, Icon, addIcon } from "@iconify/vue";
-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]
-  }
+import { inject, computed, defineComponent, mergeDefaults, ref, toRefs, createBlock, createCommentVNode, unref, openBlock, mergeProps } from "vue";
+import { iconLoaded, Icon, addIcon } from "@iconify/vue";
+const VvIconPropsDefaults = {
+  prefix: "normal"
+  /* normal */
 };
 const INJECTION_KEY_VOLVER = Symbol.for("volver");
 function useVolver() {
-  return inject(INJECTION_KEY_VOLVER);
+  return inject(INJECTION_KEY_VOLVER, void 0);
 }
 function useModifiers(prefix, modifiers, others) {
   return computed(() => {
@@ -113,11 +23,6 @@ function useModifiers(prefix, modifiers, others) {
         });
       }
     }
-    if (others) {
-      Object.keys(others.value).forEach((key) => {
-        toReturn[`${prefix}--${key}`] = unref(others.value[key]);
-      });
-    }
     return toReturn;
   });
 }
@@ -126,12 +31,29 @@ const __default__ = {
 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
-  props: VvIconProps,
+  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 parseFloat(props.rotate);
+        return Number.parseFloat(props.rotate);
       }
       return props.rotate;
     });
@@ -145,13 +67,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const icon = computed(() => {
       const name = props.name ?? "";
       const iconName = `@${provider.value}:${props.prefix}:${name}`;
-      if (iconExists(iconName)) {
+      if (iconLoaded(iconName)) {
         return iconName;
       }
       const iconsCollection = volver == null ? void 0 : volver.iconsCollections.find(
         (iconsCollection2) => {
           const icon2 = `@${provider.value}:${iconsCollection2.prefix}:${name}`;
-          return iconExists(icon2);
+          return iconLoaded(icon2);
         }
       );
       if (iconsCollection) {
@@ -183,7 +105,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     }
     if (volver) {
-      if (props.src && !iconExists(`@${provider.value}:${props.prefix}:${props.name}`)) {
+      if (props.src && !iconLoaded(`@${provider.value}:${props.prefix}:${props.name}`)) {
         show.value = false;
         volver.fetchIcon(props.src).then((svg) => {
           if (svg) {
@@ -211,9 +133,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         flip: _ctx.flip,
         rotate: unref(hasRotate),
         color: _ctx.color,
-        onLoad: _ctx.onLoad,
         icon: unref(icon)
-      }), null, 16, ["class"])) : createCommentVNode("", true);
+      }, { onLoad: _ctx.onLoad }), null, 16, ["class", "onLoad"])) : createCommentVNode("v-if", true);
     };
   }
 });

package/dist/components/VvIcon/VvIcon.umd.js

@@ -1 +1 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n(require("vue"),require("@iconify/vue")):"function"==typeof define&&define.amd?define(["vue","@iconify/vue"],n):(e="undefined"!=typeof globalThis?globalThis:e||self).VvIcon=n(e.vue,e.vue$1)}(this,(function(e,n){"use strict";const o={color:String,width:{type:[String,Number]},height:{type:[String,Number]},name:{type:String,required:!0},provider:{type:String},prefix:{type:String,default:"normal"},src:String,horizontalFlip:Boolean,verticalFlip:Boolean,flip:String,mode:String,inline:Boolean,rotate:[Number,String],onLoad:Function,svg:String,modifiers:{type:[String,Array]}},r=Symbol.for("volver");return e.defineComponent({name:"VvIcon",props:o,setup(o){const i=o,t=e.computed((()=>"string"==typeof i.rotate?parseFloat(i.rotate):i.rotate)),l=e.ref(!0),u=e.inject(r),{modifiers:c}=e.toRefs(i),a=function(n,o,r){return e.computed((()=>{const i={[n]:!0},t="string"==typeof(null==o?void 0:o.value)?o.value.split(" "):null==o?void 0:o.value;return t&&Array.isArray(t)&&t.forEach((e=>{e&&(i[`${n}--${e}`]=!0)})),r&&Object.keys(r.value).forEach((o=>{i[`${n}--${o}`]=e.unref(r.value[o])})),i}))}("vv-icon",c),s=e.computed((()=>i.provider||(null==u?void 0:u.iconsProvider))),f=e.computed((()=>{const e=i.name??"",o=`@${s.value}:${i.prefix}:${e}`;if(n.iconExists(o))return o;const r=null==u?void 0:u.iconsCollections.find((o=>{const r=`@${s.value}:${o.prefix}:${e}`;return n.iconExists(r)}));return r?`@${s.value}:${r.prefix}:${e}`:e}));function d(e){const o=function(e){let n;if("undefined"==typeof window){const{JSDOM:e}=require("jsdom");n=(new e).window}return(n?new n.DOMParser:new window.DOMParser).parseFromString(e,"text/html").querySelector("svg")}(e),r=(null==o?void 0:o.innerHTML.trim())||"";o&&r&&n.addIcon(`@${s.value}:${i.prefix}:${i.name}`,{body:r,height:o.viewBox.baseVal.height,width:o.viewBox.baseVal.width})}return u&&i.src&&!n.iconExists(`@${s.value}:${i.prefix}:${i.name}`)&&(l.value=!1,u.fetchIcon(i.src).then((e=>{e&&(d(e),l.value=!0)})).catch((e=>{throw new Error(`Error during fetch icon: ${null==e?void 0:e.message}`)}))),i.svg&&d(i.svg),(o,r)=>e.unref(l)?(e.openBlock(),e.createBlock(e.unref(n.Icon),e.mergeProps({key:0,class:e.unref(a)},{inline:o.inline,width:o.width,height:o.height,horizontalFlip:o.horizontalFlip,verticalFlip:o.verticalFlip,flip:o.flip,rotate:e.unref(t),color:o.color,onLoad:o.onLoad,icon:e.unref(f)}),null,16,["class"])):e.createCommentVNode("",!0)}})}));
+!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?module.exports=o(require("vue"),require("@iconify/vue")):"function"==typeof define&&define.amd?define(["vue","@iconify/vue"],o):(e="undefined"!=typeof globalThis?globalThis:e||self).VvIcon=o(e.vue,e.vue$1)}(this,(function(e,o){"use strict";const n={prefix:"normal"},i=Symbol.for("volver");return e.defineComponent({name:"VvIcon",props:e.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:{}},n),setup(n){const r=n,t=e.computed((()=>"string"==typeof r.rotate?Number.parseFloat(r.rotate):r.rotate)),l=e.ref(!0),u=e.inject(i,void 0),{modifiers:a}=e.toRefs(r),c=function(o,n){return e.computed((()=>{const e={[o]:!0},i="string"==typeof(null==n?void 0:n.value)?n.value.split(" "):null==n?void 0:n.value;return i&&Array.isArray(i)&&i.forEach((n=>{n&&(e[`${o}--${n}`]=!0)})),e}))}("vv-icon",a),d=e.computed((()=>r.provider||(null==u?void 0:u.iconsProvider))),f=e.computed((()=>{const e=r.name??"",n=`@${d.value}:${r.prefix}:${e}`;if(o.iconLoaded(n))return n;const i=null==u?void 0:u.iconsCollections.find((n=>{const i=`@${d.value}:${n.prefix}:${e}`;return o.iconLoaded(i)}));return i?`@${d.value}:${i.prefix}:${e}`:e}));function s(e){const n=function(e){let o;if("undefined"==typeof window){const{JSDOM:e}=require("jsdom");o=(new e).window}return(o?new o.DOMParser:new window.DOMParser).parseFromString(e,"text/html").querySelector("svg")}(e),i=(null==n?void 0:n.innerHTML.trim())||"";n&&i&&o.addIcon(`@${d.value}:${r.prefix}:${r.name}`,{body:i,height:n.viewBox.baseVal.height,width:n.viewBox.baseVal.width})}return u&&r.src&&!o.iconLoaded(`@${d.value}:${r.prefix}:${r.name}`)&&(l.value=!1,u.fetchIcon(r.src).then((e=>{e&&(s(e),l.value=!0)})).catch((e=>{throw new Error(`Error during fetch icon: ${null==e?void 0:e.message}`)}))),r.svg&&s(r.svg),(n,i)=>e.unref(l)?(e.openBlock(),e.createBlock(e.unref(o.Icon),e.mergeProps({key:0,class:e.unref(c)},{inline:n.inline,width:n.width,height:n.height,horizontalFlip:n.horizontalFlip,verticalFlip:n.verticalFlip,flip:n.flip,rotate:e.unref(t),color:n.color,icon:e.unref(f)},{onLoad:n.onLoad}),null,16,["class","onLoad"])):e.createCommentVNode("v-if",!0)}})}));