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

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

@@ -1,10 +1,5 @@
-import { inject, computed, unref, defineComponent, mergeDefaults, ref, toRefs, openBlock, createBlock, mergeProps, createCommentVNode, getCurrentInstance, watch, resolveDynamicComponent, withCtx, renderSlot, createTextVNode, toDisplayString, toRef, useAttrs, useSlots, createElementBlock, Fragment } from "vue";
+import { inject, computed, toRef, toRefs, defineComponent, getCurrentInstance, ref, watch, openBlock, createBlock, resolveDynamicComponent, unref, mergeProps, withCtx, renderSlot, createTextVNode, toDisplayString, mergeDefaults, createCommentVNode, useId, useAttrs, useSlots, createElementBlock, Fragment } from "vue";
 import { iconExists, Icon, addIcon } from "@iconify/vue";
-import { uid } from "uid";
-const VvIconPropsDefaults = {
-  prefix: "normal"
-  /* normal */
-};
 var StorageType = /* @__PURE__ */ ((StorageType2) => {
   StorageType2["local"] = "local";
   StorageType2["session"] = "session";
@@ -61,145 +56,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__$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);
-    };
-  }
-});
 const LinkProps = {
   /**
    * The router-link/nuxt-link property, if it is defined the button is rendered as a ruouter-link or nuxt-link.
@@ -457,170 +313,29 @@ 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__$1 = {
-  name: "VvAction"
-};
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  ...__default__$1,
-  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 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;
-        }
-      });
-    }
-    const propRef = toRef(props, propName);
-    return computed({
-      get() {
-        return propRef.value;
-      },
-      set(value) {
-        if (emit) {
-          emit(`update:${propName}`, value);
+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);
         }
       }
     });
@@ -681,7 +396,7 @@ const VvButtonProps = {
   }
 };
 function useGroupProps(props, emit) {
-  const { group, isInGroup, getGroupOrLocalRef } = useInjectedGroupState(INJECTION_KEY_BUTTON_GROUP);
+  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);
@@ -726,8 +441,292 @@ function useGroupProps(props, emit) {
     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__$2 = {
+  name: "VvAction"
+};
+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 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"]);
+    };
+  }
+});
+const VvIconPropsDefaults = {
+  prefix: "normal"
+  /* normal */
+};
+function useModifiers(prefix, modifiers, others) {
+  return computed(() => {
+    const toReturn = {
+      [prefix]: true
+    };
+    const modifiersArray = typeof (modifiers == null ? void 0 : modifiers.value) === "string" ? modifiers.value.split(" ") : modifiers == null ? void 0 : modifiers.value;
+    if (modifiersArray) {
+      if (Array.isArray(modifiersArray)) {
+        modifiersArray.forEach((modifier) => {
+          if (modifier) {
+            toReturn[`${prefix}--${modifier}`] = true;
+          }
+        });
+      }
+    }
+    if (others) {
+      Object.keys(others.value).forEach((key) => {
+        toReturn[`${prefix}--${key}`] = unref(others.value[key]);
+      });
+    }
+    return toReturn;
+  });
+}
+const __default__$1 = {
+  name: "VvIcon"
+};
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...__default__$1,
+  props: /* @__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) || uid()));
+  return computed(() => String((id == null ? void 0 : id.value) || useId()));
 }
 function equals(obj1, obj2, field) {
   return deepEquals(obj1, obj2);
@@ -923,7 +922,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     }
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$1, mergeProps({
+      return openBlock(), createBlock(_sfc_main$2, mergeProps({
         ...unref(attrs),
         ...unref(hasListeners),
         disabled: unref(disabled),
@@ -944,7 +943,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         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
@@ -962,7 +961,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               [
                 renderSlot(_ctx.$slots, "before"),
                 unref(hasIcon) ? (openBlock(), createBlock(
-                  _sfc_main$2,
+                  _sfc_main$1,
                   mergeProps({ key: 0 }, unref(hasIcon), { class: "vv-button__icon" }),
                   null,
                   16