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

package/dist/components/VvDialog/VvDialog.es.js

@@ -1,105 +1,10 @@
-import { inject, computed, unref, defineComponent, ref, toRefs, openBlock, createBlock, mergeProps, createCommentVNode, Transition, toHandlers, withCtx, withDirectives, createElementVNode, withModifiers, createElementBlock, renderSlot, createTextVNode, toDisplayString, createVNode, vShow } from "vue";
-import { iconExists, Icon, addIcon } from "@iconify/vue";
+import { computed, unref, defineComponent, ref, toRefs, createBlock, openBlock, Transition, mergeProps, toHandlers, withCtx, withDirectives, createElementVNode, withModifiers, createElementBlock, createCommentVNode, renderSlot, createTextVNode, toDisplayString, vShow } from "vue";
 import { useVModel, onClickOutside } from "@vueuse/core";
-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 || {});
+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";
@@ -129,206 +23,28 @@ var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
   ButtonType2["reset"] = "reset";
   return ButtonType2;
 })(ButtonType || {});
-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");
-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__$1 = {
-  name: "VvIcon"
-};
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  ...__default__$1,
-  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("", true);
-    };
-  }
-});
-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,
+var ActionTag = /* @__PURE__ */ ((ActionTag2) => {
+  ActionTag2["nuxtLink"] = "nuxt-link";
+  ActionTag2["routerLink"] = "router-link";
+  ActionTag2["a"] = "a";
+  ActionTag2["button"] = "button";
+  return ActionTag2;
+})(ActionTag || {});
+const ModifiersProps = {
   /**
-   * Anchor target
+   * Component BEM modifiers
    */
-  target: {
-    type: String,
-    validator: (value) => Object.values(AnchorTarget).includes(value)
-  },
-  /**
-   * Anchor rel
-   */
-  rel: {
-    type: String,
-    default: "noopener noreferrer"
+  modifiers: {
+    type: [String, Array],
+    default: void 0
   }
 };
-const DisabledProps = {
-  /**
-   * Whether the form control is disabled
-   */
-  disabled: 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]
-};
 ({
-  /**
-   * 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 IdProps = {
@@ -343,130 +59,43 @@ const IdProps = {
    * 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)
-  },
-  /**
-   * 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
-  },
-  /**
-   * 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
-  },
-  /**
-   * Add arrow to the dropdown
-   * @see https://floating-ui.com/docs/arrow
-   */
-  arrow: {
-    type: Boolean,
-    default: false
-  },
-  /**
-   * Keep open dropdown on click outside
-   */
-  keepOpen: {
-    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
+    default: Side.bottom
   }
 });
 ({
-  ...DisabledProps,
-  ...LabelProps,
-  ...PressedProps,
-  ...ActiveProps,
-  ...CurrentProps,
-  ...LinkProps,
   /**
    * Button type
    */
   type: {
-    type: String,
-    default: ButtonType.button,
-    validator: (value) => Object.values(ButtonType).includes(value)
+    default: ButtonType.button
   },
   /**
-   * Button aria-label
+   * Default tag for the action
    */
-  ariaLabel: {
-    type: String,
-    default: void 0
+  defaultTag: {
+    default: ActionTag.button
+  }
+});
+({
+  storageType: {
+    default: StorageType.local
   }
 });
 const VvDialogEvents = [
   "open",
   "close",
   "update:modelValue",
-  "before-enter",
-  "after-leave",
+  "beforeEnter",
+  "afterLeave",
   "enter",
-  "after-enter",
-  "enter-cancelled",
-  "before-leave",
+  "afterEnter",
+  "enterCancelled",
+  "beforeLeave",
   "leave",
-  "leave-cancelled"
+  "leaveCancelled"
 ];
 const VvDialogProps = {
+  ...ModifiersProps,
   ...IdProps,
   /**
    * Dialog title
@@ -485,18 +114,46 @@ const VvDialogProps = {
   transition: { type: String, default: "fade-block" },
   /**
    * Dialog size
+   * @deprecated use modifiers instead
    */
   size: String,
   /**
    * Keep open dialog on click outside
    */
-  keepOpen: { type: Boolean, default: false }
+  keepOpen: { type: Boolean, default: false },
+  /**
+   * Close button label
+   */
+  labelClose: { type: String, default: "Close" }
 };
-const _hoisted_1 = ["onCancel"];
-const _hoisted_2 = {
+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 _hoisted_1 = {
   key: 0,
   class: "vv-dialog__header"
 };
+const _hoisted_2 = ["aria-label", "title"];
 const _hoisted_3 = { class: "vv-dialog__content" };
 const _hoisted_4 = {
   key: 1,
@@ -509,8 +166,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
   props: VvDialogProps,
   emits: VvDialogEvents,
-  setup(__props, { expose: __expose, emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const dialogEl = ref();
     const modelValue = useVModel(props, "modelValue", emit);
     const localModelValue = ref(false);
@@ -525,18 +183,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     });
     const modalWrapper = ref(null);
+    const { modifiers } = toRefs(props);
+    const bemCssClasses = useModifiers(
+      "vv-dialog",
+      modifiers,
+      // DEPRECATED: Must be removed in the future
+      computed(() => {
+        if (props.size) {
+          return { [props.size]: !!props.size };
+        }
+        return {};
+      })
+    );
     const dialogAttrs = computed(() => {
       const { id } = props;
       return {
         id
       };
     });
-    const dialogClass = computed(() => {
-      if (!props.size) {
-        return "vv-dialog";
-      }
-      return ["vv-dialog", `vv-dialog--${props.size}`];
-    });
     const transitioName = computed(() => `vv-dialog--${props.transition}`);
     const dialogTransitionHandlers = {
       "before-enter": () => {
@@ -545,7 +209,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           (_b = dialogEl.value) == null ? void 0 : _b.showModal();
         }
         emit("open");
-        emit("before-enter");
+        emit("beforeEnter");
       },
       "after-leave": () => {
         var _a, _b;
@@ -553,25 +217,25 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           (_b = dialogEl.value) == null ? void 0 : _b.close();
         }
         emit("close");
-        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");
       }
     };
     onClickOutside(modalWrapper, () => {
@@ -586,50 +250,66 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       isOpened.value = true;
     }
     __expose({ close, open });
-    const onCancel = () => {
+    function onCancel() {
       if (!props.keepOpen) {
         close();
       }
-    };
+    }
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(Transition, mergeProps({ name: unref(transitioName) }, toHandlers(dialogTransitionHandlers)), {
+      return openBlock(), createBlock(Transition, mergeProps({ name: unref(transitioName) }, toHandlers(dialogTransitionHandlers), { persisted: "" }), {
         default: withCtx(() => [
-          withDirectives(createElementVNode("dialog", mergeProps(unref(dialogAttrs), {
-            ref_key: "dialogEl",
-            ref: dialogEl,
-            class: unref(dialogClass),
-            onCancel: withModifiers(onCancel, ["stop", "prevent"])
-          }), [
-            createElementVNode("article", {
-              ref_key: "modalWrapper",
-              ref: modalWrapper,
-              class: "vv-dialog__wrapper"
-            }, [
-              _ctx.$slots.header || _ctx.title ? (openBlock(), createElementBlock("header", _hoisted_2, [
-                renderSlot(_ctx.$slots, "header", {}, () => [
-                  createTextVNode(toDisplayString(_ctx.title) + " ", 1),
-                  createElementVNode("button", {
-                    type: "button",
-                    "aria-label": "Close",
-                    class: "vv-dialog__close",
-                    onClickPassive: close
-                  }, [
-                    createVNode(_sfc_main$1, { name: "close" })
-                  ], 32)
-                ])
-              ])) : createCommentVNode("", true),
-              createElementVNode("div", _hoisted_3, [
-                renderSlot(_ctx.$slots, "default")
-              ]),
-              _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_4, [
-                renderSlot(_ctx.$slots, "footer")
-              ])) : createCommentVNode("", true)
-            ], 512)
-          ], 16, _hoisted_1), [
+          withDirectives(createElementVNode(
+            "dialog",
+            mergeProps(unref(dialogAttrs), {
+              ref_key: "dialogEl",
+              ref: dialogEl,
+              class: unref(bemCssClasses),
+              onCancel: withModifiers(onCancel, ["stop", "prevent"])
+            }),
+            [
+              createElementVNode(
+                "article",
+                {
+                  ref_key: "modalWrapper",
+                  ref: modalWrapper,
+                  class: "vv-dialog__wrapper"
+                },
+                [
+                  _ctx.$slots.header || _ctx.title ? (openBlock(), createElementBlock("header", _hoisted_1, [
+                    renderSlot(_ctx.$slots, "header", {}, () => [
+                      createTextVNode(
+                        toDisplayString(_ctx.title) + " ",
+                        1
+                        /* TEXT */
+                      ),
+                      createElementVNode("button", {
+                        type: "button",
+                        "aria-label": _ctx.labelClose,
+                        title: _ctx.labelClose,
+                        class: "vv-dialog__close",
+                        onClickPassive: close
+                      }, null, 40, _hoisted_2)
+                    ])
+                  ])) : createCommentVNode("v-if", true),
+                  createElementVNode("div", _hoisted_3, [
+                    renderSlot(_ctx.$slots, "default")
+                  ]),
+                  _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_4, [
+                    renderSlot(_ctx.$slots, "footer")
+                  ])) : createCommentVNode("v-if", true)
+                ],
+                512
+                /* NEED_PATCH */
+              )
+            ],
+            16
+            /* FULL_PROPS */
+          ), [
             [vShow, unref(isOpened)]
           ])
         ]),
         _: 3
+        /* FORWARDED */
       }, 16, ["name"]);
     };
   }