@volverjs/ui-vue 0.0.10-beta.35 → 0.0.10-beta.37

package/dist/components/VvAlertGroup/VvAlertGroup.es.js

@@ -1,7 +1,11 @@
-import { provide, computed, unref, inject, defineComponent, mergeDefaults, ref, toRefs, openBlock, createBlock, mergeProps, createCommentVNode, watch, createElementBlock, normalizeProps, guardReactiveProps, renderSlot, createTextVNode, toDisplayString, withModifiers, createElementVNode, createVNode, TransitionGroup, toHandlers, withCtx, Fragment, renderList } from "vue";
-import mitt from "mitt";
+import { inject, computed, unref, defineComponent, mergeDefaults, ref, toRefs, openBlock, createBlock, mergeProps, createCommentVNode, watch, createElementBlock, normalizeProps, guardReactiveProps, renderSlot, createTextVNode, toDisplayString, withModifiers, createElementVNode, provide, createVNode, TransitionGroup, toHandlers, withCtx, Fragment, renderList } from "vue";
 import { iconExists, Icon, addIcon } from "@iconify/vue";
 import { uid } from "uid";
+import mitt from "mitt";
+const VvIconPropsDefaults = {
+  prefix: "normal"
+  /* normal */
+};
 var StorageType = /* @__PURE__ */ ((StorageType2) => {
   StorageType2["local"] = "local";
   StorageType2["session"] = "session";
@@ -57,6 +61,145 @@ const INJECTION_KEY_VOLVER = Symbol.for("volver");
 const INJECTION_KEY_ALERT_GROUP = Symbol.for(
   "alertGroup"
 );
+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.
@@ -292,336 +435,83 @@ const IdProps = {
   },
   storageKey: String
 });
-function useProvideAlertGroup({
-  name
-}) {
-  const bus = mitt();
-  provide(INJECTION_KEY_ALERT_GROUP, {
-    name,
-    bus
-  });
-  return bus;
+function useInjectedAlertGroup() {
+  return inject(INJECTION_KEY_ALERT_GROUP, {});
 }
-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]);
-      });
+function useUniqueId(id) {
+  return computed(() => String((id == null ? void 0 : id.value) || uid()));
+}
+function useComponentIcon(icon, iconPosition) {
+  const hasIcon = computed(() => {
+    if (typeof (icon == null ? void 0 : icon.value) === "string") {
+      return { name: icon == null ? void 0 : icon.value };
     }
-    return toReturn;
+    return icon == null ? void 0 : icon.value;
   });
+  const hasIconBefore = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Position.before ? hasIcon.value : void 0
+  );
+  const hasIconAfter = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Position.after ? hasIcon.value : void 0
+  );
+  const hasIconLeft = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.left ? hasIcon.value : void 0
+  );
+  const hasIconRight = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.right ? hasIcon.value : void 0
+  );
+  const hasIconTop = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.top ? hasIcon.value : void 0
+  );
+  const hasIconBottom = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.bottom ? hasIcon.value : void 0
+  );
+  return {
+    hasIcon,
+    hasIconLeft,
+    hasIconRight,
+    hasIconTop,
+    hasIconBottom,
+    hasIconBefore,
+    hasIconAfter
+  };
 }
-const VvAlertGroupProps = {
-  ...ModifiersProps,
-  name: {
-    type: String,
-    required: true
-  },
-  items: {
-    type: Array,
-    default: () => []
+const VvAlertProps = {
+  ...IdProps,
+  ...IconProps,
+  /**
+   * Component BEM modifiers
+   */
+  modifiers: {
+    type: [String, Array],
+    default: void 0
   },
-  stack: {
+  /**
+   * The alert is dismissable
+   * @default false
+   * @type boolean
+   */
+  dismissable: {
     type: Boolean,
     default: false
   },
-  reverse: {
-    type: Boolean,
-    default: false
+  /**
+   * The alert auto close after the specified time in milliseconds
+   * @default 0
+   * @type number
+   */
+  autoClose: {
+    type: Number,
+    default: 0
   },
-  inline: {
+  /**
+   * The alert close label
+   * @default 'Close'
+   * @type string
+   */
+  closeLabel: {
     type: String,
-    default: void 0
-  },
-  block: {
-    type: String,
-    default: void 0
-  },
-  position: {
-    type: String,
-    default: void 0
-  },
-  transition: {
-    type: String,
-    default: void 0
-  }
-};
-const VvAlertGroupEvents = [
-  "close",
-  "before-enter",
-  "after-leave",
-  "enter",
-  "after-enter",
-  "enter-cancelled",
-  "before-leave",
-  "leave",
-  "leave-cancelled"
-];
-const useVvAlertGroup = (props, emit) => {
-  const bus = useProvideAlertGroup({ name: computed(() => props.name) });
-  if (props.block && !props.inline || !props.block && props.inline) {
-    console.warn(
-      `[VvAlertGroup]: block and inline props must coexist at the same time.`
-    );
-  }
-  const hasClass = computed(() => {
-    const toReturn = [
-      useModifiers(
-        "vv-alert-group",
-        computed(() => props.modifiers),
-        computed(() => ({
-          stack: props.stack,
-          reverse: props.reverse,
-          absolute: props.position === "absolute",
-          fixed: props.position === "fixed"
-        }))
-      ).value
-    ];
-    if (props.inline && props.block) {
-      toReturn.push(`vv-alert-group--${props.block}-${props.inline}`);
-    }
-    return toReturn;
-  });
-  const hasTransition = computed(() => {
-    if (props.transition) {
-      return props.transition;
-    }
-    if (!props.position) {
-      return "vv-alert--fade";
-    }
-    if (props.inline === "start") {
-      return "vv-alert--fade-inline-start";
-    }
-    if (props.inline === "end") {
-      return "vv-alert--fade-inline-end";
-    }
-    if (props.block === "top") {
-      return "vv-alert--fade-block-top";
-    }
-    if (props.block === "bottom") {
-      return "vv-alert--fade-block-bottom";
-    }
-    return "vv-alert--fade";
-  });
-  bus.on("close", (id) => {
-    emit("close", id);
-  });
-  return {
-    hasTransition,
-    hasProps: computed(() => ({
-      class: hasClass.value
-    }))
-  };
-};
-const VvIconPropsDefaults = {
-  prefix: "normal"
-  /* normal */
-};
-function useVolver() {
-  return inject(INJECTION_KEY_VOLVER);
-}
-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 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 useInjectedAlertGroup() {
-  return inject(INJECTION_KEY_ALERT_GROUP, {});
-}
-const useUniqueId = (id) => computed(() => String((id == null ? void 0 : id.value) || uid()));
-function useComponentIcon(icon, iconPosition) {
-  const hasIcon = computed(() => {
-    if (typeof (icon == null ? void 0 : icon.value) === "string") {
-      return { name: icon == null ? void 0 : icon.value };
-    }
-    return icon == null ? void 0 : icon.value;
-  });
-  const hasIconBefore = computed(
-    () => (iconPosition == null ? void 0 : iconPosition.value) === Position.before ? hasIcon.value : void 0
-  );
-  const hasIconAfter = computed(
-    () => (iconPosition == null ? void 0 : iconPosition.value) === Position.after ? hasIcon.value : void 0
-  );
-  const hasIconLeft = computed(
-    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.left ? hasIcon.value : void 0
-  );
-  const hasIconRight = computed(
-    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.right ? hasIcon.value : void 0
-  );
-  const hasIconTop = computed(
-    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.top ? hasIcon.value : void 0
-  );
-  const hasIconBottom = computed(
-    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.bottom ? hasIcon.value : void 0
-  );
-  return {
-    hasIcon,
-    hasIconLeft,
-    hasIconRight,
-    hasIconTop,
-    hasIconBottom,
-    hasIconBefore,
-    hasIconAfter
-  };
-}
-const VvAlertProps = {
-  ...IdProps,
-  ...IconProps,
-  /**
-   * Component BEM modifiers
-   */
-  modifiers: {
-    type: [String, Array],
-    default: void 0
-  },
-  /**
-   * The alert is dismissable
-   * @default false
-   * @type boolean
-   */
-  dismissable: {
-    type: Boolean,
-    default: false
-  },
-  /**
-   * The alert auto close after the specified time in milliseconds
-   * @default 0
-   * @type number
-   */
-  autoClose: {
-    type: Number,
-    default: 0
-  },
-  /**
-   * The alert close label
-   * @default 'Close'
-   * @type string
-   */
-  closeLabel: {
-    type: String,
-    default: "Close"
+    default: "Close"
   },
   /**
    * The alert title
@@ -664,23 +554,11 @@ const VvAlertProps = {
   }
 };
 const VvAlertEvents = ["close"];
-const useVvAlert = (props, emit) => {
+function useVvAlert(props, emit) {
   const { bus } = useInjectedAlertGroup();
   const hasId = useUniqueId(computed(() => props.id));
   const hasTitleId = computed(() => `${hasId.value}-title`);
-  const { hasIcon } = useComponentIcon(computed(() => props.icon));
-  const hasClass = useModifiers(
-    "vv-alert",
-    computed(() => props.modifiers),
-    computed(() => ({
-      dismissable: props.autoClose > 0 || props.dismissable,
-      "auto-close": props.autoClose > 0,
-      hover: isMouseover.value
-    }))
-  );
-  const hasStyle = computed(() => ({
-    "--alert-duration": `${props.autoClose}ms`
-  }));
+  let timeout;
   const close = () => {
     if (timeout) {
       clearTimeout(timeout);
@@ -688,7 +566,6 @@ const useVvAlert = (props, emit) => {
     emit("close", hasId.value);
     bus == null ? void 0 : bus.emit("close", hasId.value);
   };
-  let timeout;
   watch(
     () => props.autoClose,
     (value) => {
@@ -717,6 +594,19 @@ const useVvAlert = (props, emit) => {
       timeout = setTimeout(close, props.autoClose);
     }
   };
+  const { hasIcon } = useComponentIcon(computed(() => props.icon));
+  const hasClass = useModifiers(
+    "vv-alert",
+    computed(() => props.modifiers),
+    computed(() => ({
+      "dismissable": props.autoClose > 0 || props.dismissable,
+      "auto-close": props.autoClose > 0,
+      "hover": isMouseover.value
+    }))
+  );
+  const hasStyle = computed(() => ({
+    "--alert-duration": `${props.autoClose}ms`
+  }));
   return {
     close,
     hasIcon,
@@ -724,13 +614,13 @@ const useVvAlert = (props, emit) => {
     hasProps: computed(() => ({
       onMouseover,
       onMouseleave,
-      class: hasClass.value,
-      style: hasStyle.value,
-      role: props.role,
+      "class": hasClass.value,
+      "style": hasStyle.value,
+      "role": props.role,
       "aria-labelledby": hasTitleId.value
     }))
   };
-};
+}
 const _hoisted_1 = {
   key: 0,
   class: "vv-alert__header"
@@ -836,6 +726,118 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
+function useProvideAlertGroup({
+  name
+}) {
+  const bus = mitt();
+  provide(INJECTION_KEY_ALERT_GROUP, {
+    name,
+    bus
+  });
+  return bus;
+}
+const VvAlertGroupProps = {
+  ...ModifiersProps,
+  name: {
+    type: String,
+    required: true
+  },
+  items: {
+    type: Array,
+    default: () => []
+  },
+  stack: {
+    type: Boolean,
+    default: false
+  },
+  reverse: {
+    type: Boolean,
+    default: false
+  },
+  inline: {
+    type: String,
+    default: void 0
+  },
+  block: {
+    type: String,
+    default: void 0
+  },
+  position: {
+    type: String,
+    default: void 0
+  },
+  transition: {
+    type: String,
+    default: void 0
+  }
+};
+const VvAlertGroupEvents = [
+  "close",
+  "beforeEnter",
+  "afterLeave",
+  "enter",
+  "afterEnter",
+  "enterCancelled",
+  "beforeLeave",
+  "leave",
+  "leaveCancelled"
+];
+function useVvAlertGroup(props, emit) {
+  const bus = useProvideAlertGroup({ name: computed(() => props.name) });
+  if (props.block && !props.inline || !props.block && props.inline) {
+    console.warn(
+      `[VvAlertGroup]: block and inline props must coexist at the same time.`
+    );
+  }
+  const hasClass = computed(() => {
+    const toReturn = [
+      useModifiers(
+        "vv-alert-group",
+        computed(() => props.modifiers),
+        computed(() => ({
+          stack: props.stack,
+          reverse: props.reverse,
+          absolute: props.position === "absolute",
+          fixed: props.position === "fixed"
+        }))
+      ).value
+    ];
+    if (props.inline && props.block) {
+      toReturn.push(`vv-alert-group--${props.block}-${props.inline}`);
+    }
+    return toReturn;
+  });
+  const hasTransition = computed(() => {
+    if (props.transition) {
+      return props.transition;
+    }
+    if (!props.position) {
+      return "vv-alert--fade";
+    }
+    if (props.inline === "start") {
+      return "vv-alert--fade-inline-start";
+    }
+    if (props.inline === "end") {
+      return "vv-alert--fade-inline-end";
+    }
+    if (props.block === "top") {
+      return "vv-alert--fade-block-top";
+    }
+    if (props.block === "bottom") {
+      return "vv-alert--fade-block-bottom";
+    }
+    return "vv-alert--fade";
+  });
+  bus.on("close", (id) => {
+    emit("close", id);
+  });
+  return {
+    hasTransition,
+    hasProps: computed(() => ({
+      class: hasClass.value
+    }))
+  };
+}
 const __default__ = {
   name: "VvAlertGroup"
 };
@@ -849,28 +851,28 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const { hasProps, hasTransition } = useVvAlertGroup(props, emit);
     const alertGroupTransitionHandlers = {
       "before-enter": () => {
-        emit("before-enter");
+        emit("beforeEnter");
       },
       "after-leave": () => {
-        emit("after-leave");
+        emit("afterLeave");
       },
-      enter: () => {
+      "enter": () => {
         emit("enter");
       },
       "after-enter": () => {
-        emit("after-enter");
+        emit("afterEnter");
       },
       "enter-cancelled": () => {
-        emit("enter-cancelled");
+        emit("enterCancelled");
       },
       "before-leave": () => {
-        emit("before-leave");
+        emit("beforeLeave");
       },
-      leave: () => {
+      "leave": () => {
         emit("leave");
       },
       "leave-cancelled": () => {
-        emit("leave-cancelled");
+        emit("leaveCancelled");
       }
     };
     return (_ctx, _cache) => {