@volverjs/ui-vue 0.0.10-beta.4 → 0.0.10-beta.40

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

@@ -1,100 +1,15 @@
-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 { inject, computed, unref, defineComponent, mergeDefaults, 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 { 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]
-  }
+const VvIconPropsDefaults = {
+  prefix: "normal"
+  /* normal */
 };
+var StorageType = /* @__PURE__ */ ((StorageType2) => {
+  StorageType2["local"] = "local";
+  StorageType2["session"] = "session";
+  return StorageType2;
+})(StorageType || {});
 var Strategy = /* @__PURE__ */ ((Strategy2) => {
   Strategy2["absolute"] = "absolute";
   Strategy2["fixed"] = "fixed";
@@ -129,13 +44,13 @@ 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 || {});
+var ActionTag = /* @__PURE__ */ ((ActionTag2) => {
+  ActionTag2["nuxtLink"] = "nuxt-link";
+  ActionTag2["routerLink"] = "router-link";
+  ActionTag2["a"] = "a";
+  ActionTag2["button"] = "button";
+  return ActionTag2;
+})(ActionTag || {});
 const INJECTION_KEY_VOLVER = Symbol.for("volver");
 function useVolver() {
   return inject(INJECTION_KEY_VOLVER);
@@ -168,12 +83,29 @@ const __default__$1 = {
 };
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   ...__default__$1,
-  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;
     });
@@ -255,7 +187,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         color: _ctx.color,
         onLoad: _ctx.onLoad,
         icon: unref(icon)
-      }), null, 16, ["class"])) : createCommentVNode("", true);
+      }), null, 16, ["class"])) : createCommentVNode("v-if", true);
     };
   }
 });
@@ -274,10 +206,7 @@ const LinkProps = {
   /**
    * Anchor target
    */
-  target: {
-    type: String,
-    validator: (value) => Object.values(AnchorTarget).includes(value)
-  },
+  target: String,
   /**
    * Anchor rel
    */
@@ -290,38 +219,65 @@ const DisabledProps = {
   /**
    * Whether the form control is disabled
    */
-  disabled: Boolean
+  disabled: {
+    type: Boolean,
+    default: false
+  }
 };
 const ActiveProps = {
   /**
    * Whether the item is active
    */
-  active: Boolean
+  active: {
+    type: Boolean,
+    default: false
+  }
 };
 const CurrentProps = {
   /**
    * Whether the item is current
    */
-  current: Boolean
+  current: {
+    type: Boolean,
+    default: false
+  }
 };
 const PressedProps = {
   /**
    * Whether the item is pressed
    */
-  pressed: Boolean
+  pressed: {
+    type: Boolean,
+    default: false
+  }
 };
 const LabelProps = {
   /**
    * The item label
    */
-  label: [String, Number]
+  label: {
+    type: [String, Number],
+    default: void 0
+  }
+};
+const ModifiersProps = {
+  /**
+   * Component BEM modifiers
+   */
+  modifiers: {
+    type: [String, Array],
+    default: void 0
+  }
 };
 ({
   /**
    * VvIcon name or props
    * @see VVIcon
    */
-  icon: { type: [String, Object] },
+  icon: {
+    type: [String, Object],
+    default: void 0
+  },
   /**
    * VvIcon position
    */
@@ -359,7 +315,8 @@ const IdProps = {
    * Dropdown show / hide transition name
    */
   transitionName: {
-    type: String
+    type: String,
+    default: void 0
   },
   /**
    * Offset of the dropdown from the trigger
@@ -427,7 +384,8 @@ const IdProps = {
    * Set dropdown width to the same as the trigger
    */
   triggerWidth: {
-    type: Boolean
+    type: Boolean,
+    default: false
   }
 });
 ({
@@ -451,22 +409,38 @@ const IdProps = {
   ariaLabel: {
     type: String,
     default: void 0
+  },
+  /**
+   * Default tag for the action
+   */
+  defaultTag: {
+    type: String,
+    default: ActionTag.button
   }
 });
+({
+  storageType: {
+    type: String,
+    default: StorageType.local,
+    validator: (value) => Object.values(StorageType).includes(value)
+  },
+  storageKey: String
+});
 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,6 +459,7 @@ const VvDialogProps = {
   transition: { type: String, default: "fade-block" },
   /**
    * Dialog size
+   * @deprecated use modifiers instead
    */
   size: String,
   /**
@@ -492,13 +467,12 @@ const VvDialogProps = {
    */
   keepOpen: { type: Boolean, default: false }
 };
-const _hoisted_1 = ["onCancel"];
-const _hoisted_2 = {
+const _hoisted_1 = {
   key: 0,
   class: "vv-dialog__header"
 };
-const _hoisted_3 = { class: "vv-dialog__content" };
-const _hoisted_4 = {
+const _hoisted_2 = { class: "vv-dialog__content" };
+const _hoisted_3 = {
   key: 1,
   class: "vv-dialog__footer"
 };
@@ -509,8 +483,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 +500,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 +526,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 +534,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 +567,73 @@ 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": "Close",
+                          class: "vv-dialog__close",
+                          onClickPassive: close
+                        },
+                        [
+                          createVNode(_sfc_main$1, { name: "close" })
+                        ],
+                        32
+                        /* NEED_HYDRATION */
+                      )
+                    ])
+                  ])) : createCommentVNode("v-if", true),
+                  createElementVNode("div", _hoisted_2, [
+                    renderSlot(_ctx.$slots, "default")
+                  ]),
+                  _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_3, [
+                    renderSlot(_ctx.$slots, "footer")
+                  ])) : createCommentVNode("v-if", true)
+                ],
+                512
+                /* NEED_PATCH */
+              )
+            ],
+            16
+            /* FULL_PROPS */
+          ), [
             [vShow, unref(isOpened)]
           ])
         ]),
         _: 3
+        /* FORWARDED */
       }, 16, ["name"]);
     };
   }

package/dist/components/VvDialog/VvDialog.umd.js

@@ -1 +1 @@
-!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?module.exports=o(require("vue"),require("@iconify/vue"),require("@vueuse/core")):"function"==typeof define&&define.amd?define(["vue","@iconify/vue","@vueuse/core"],o):(e="undefined"!=typeof globalThis?globalThis:e||self).VvDialog=o(e.vue,e.vue$1,e.core)}(this,(function(e,o,t){"use strict";const n={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]}};var r=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(r||{}),l=(e=>(e.before="before",e.after="after",e))(l||{}),i=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(i||{});const a=Symbol.for("volver");const c=e.defineComponent({name:"VvIcon",props:n,setup(t){const n=t,r=e.computed((()=>"string"==typeof n.rotate?parseFloat(n.rotate):n.rotate)),l=e.ref(!0),i=e.inject(a),{modifiers:c}=e.toRefs(n),s=function(o,t,n){return e.computed((()=>{const r={[o]:!0},l="string"==typeof(null==t?void 0:t.value)?t.value.split(" "):null==t?void 0:t.value;return l&&Array.isArray(l)&&l.forEach((e=>{e&&(r[`${o}--${e}`]=!0)})),n&&Object.keys(n.value).forEach((t=>{r[`${o}--${t}`]=e.unref(n.value[t])})),r}))}("vv-icon",c),u=e.computed((()=>n.provider||(null==i?void 0:i.iconsProvider))),d=e.computed((()=>{const e=n.name??"",t=`@${u.value}:${n.prefix}:${e}`;if(o.iconExists(t))return t;const r=null==i?void 0:i.iconsCollections.find((t=>{const n=`@${u.value}:${t.prefix}:${e}`;return o.iconExists(n)}));return r?`@${u.value}:${r.prefix}:${e}`:e}));function v(e){const t=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),r=(null==t?void 0:t.innerHTML.trim())||"";t&&r&&o.addIcon(`@${u.value}:${n.prefix}:${n.name}`,{body:r,height:t.viewBox.baseVal.height,width:t.viewBox.baseVal.width})}return i&&n.src&&!o.iconExists(`@${u.value}:${n.prefix}:${n.name}`)&&(l.value=!1,i.fetchIcon(n.src).then((e=>{e&&(v(e),l.value=!0)})).catch((e=>{throw new Error(`Error during fetch icon: ${null==e?void 0:e.message}`)}))),n.svg&&v(n.svg),(t,n)=>e.unref(l)?(e.openBlock(),e.createBlock(e.unref(o.Icon),e.mergeProps({key:0,class:e.unref(s)},{inline:t.inline,width:t.width,height:t.height,horizontalFlip:t.horizontalFlip,verticalFlip:t.verticalFlip,flip:t.flip,rotate:e.unref(r),color:t.color,onLoad:t.onLoad,icon:e.unref(d)}),null,16,["class"])):e.createCommentVNode("",!0)}});Boolean,Boolean,Boolean,Boolean;l.before;const s={id:[String,Number]};r.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,i.button;const u={...s,title:String,modelValue:{type:Boolean,default:void 0},transition:{type:String,default:"fade-block"},size:String,keepOpen:{type:Boolean,default:!1}},d=["onCancel"],v={key:0,class:"vv-dialog__header"},f={class:"vv-dialog__content"},p={key:1,class:"vv-dialog__footer"};return e.defineComponent({name:"VvDialog",props:u,emits:["open","close","update:modelValue","before-enter","after-leave","enter","after-enter","enter-cancelled","before-leave","leave","leave-cancelled"],setup(o,{expose:n,emit:r}){const l=o,i=e.ref(),a=t.useVModel(l,"modelValue",r),s=e.ref(!1),u=e.computed({get:()=>a.value??s.value,set:e=>{void 0!==a.value?a.value=e:s.value=e}}),m=e.ref(null),g=e.computed((()=>{const{id:e}=l;return{id:e}})),h=e.computed((()=>l.size?["vv-dialog",`vv-dialog--${l.size}`]:"vv-dialog")),b=e.computed((()=>`vv-dialog--${l.transition}`)),y={"before-enter":()=>{var e,o;(null==(e=i.value)?void 0:e.open)||null==(o=i.value)||o.showModal(),r("open"),r("before-enter")},"after-leave":()=>{var e,o;(null==(e=i.value)?void 0:e.open)&&(null==(o=i.value)||o.close()),r("close"),r("after-leave")},enter:()=>{r("enter")},"after-enter":()=>{r("after-enter")},"enter-cancelled":()=>{r("enter-cancelled")},"before-leave":()=>{r("before-leave")},leave:()=>{r("leave")},"leave-cancelled":()=>{r("leave-cancelled")}};function $(){u.value=!1}t.onClickOutside(m,(()=>{l.keepOpen||$()})),n({close:$,open:function(){u.value=!0}});const B=()=>{l.keepOpen||$()};return(o,t)=>(e.openBlock(),e.createBlock(e.Transition,e.mergeProps({name:e.unref(b)},e.toHandlers(y)),{default:e.withCtx((()=>[e.withDirectives(e.createElementVNode("dialog",e.mergeProps(e.unref(g),{ref_key:"dialogEl",ref:i,class:e.unref(h),onCancel:e.withModifiers(B,["stop","prevent"])}),[e.createElementVNode("article",{ref_key:"modalWrapper",ref:m,class:"vv-dialog__wrapper"},[o.$slots.header||o.title?(e.openBlock(),e.createElementBlock("header",v,[e.renderSlot(o.$slots,"header",{},(()=>[e.createTextVNode(e.toDisplayString(o.title)+" ",1),e.createElementVNode("button",{type:"button","aria-label":"Close",class:"vv-dialog__close",onClickPassive:$},[e.createVNode(c,{name:"close"})],32)]))])):e.createCommentVNode("",!0),e.createElementVNode("div",f,[e.renderSlot(o.$slots,"default")]),o.$slots.footer?(e.openBlock(),e.createElementBlock("footer",p,[e.renderSlot(o.$slots,"footer")])):e.createCommentVNode("",!0)],512)],16,d),[[e.vShow,e.unref(u)]])])),_:3},16,["name"]))}})}));
+!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?module.exports=o(require("vue"),require("@iconify/vue"),require("@vueuse/core")):"function"==typeof define&&define.amd?define(["vue","@iconify/vue","@vueuse/core"],o):(e="undefined"!=typeof globalThis?globalThis:e||self).VvDialog=o(e.vue,e.vue$1,e.core)}(this,(function(e,o,t){"use strict";const n={prefix:"normal"};var r=(e=>(e.local="local",e.session="session",e))(r||{}),l=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(l||{}),i=(e=>(e.before="before",e.after="after",e))(i||{}),a=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(a||{}),s=(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(s||{});const u=Symbol.for("volver");function c(o,t,n){return e.computed((()=>{const r={[o]:!0},l="string"==typeof(null==t?void 0:t.value)?t.value.split(" "):null==t?void 0:t.value;return l&&Array.isArray(l)&&l.forEach((e=>{e&&(r[`${o}--${e}`]=!0)})),n&&Object.keys(n.value).forEach((t=>{r[`${o}--${t}`]=e.unref(n.value[t])})),r}))}const d=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(t){const n=t,r=e.computed((()=>"string"==typeof n.rotate?Number.parseFloat(n.rotate):n.rotate)),l=e.ref(!0),i=e.inject(u),{modifiers:a}=e.toRefs(n),s=c("vv-icon",a),d=e.computed((()=>n.provider||(null==i?void 0:i.iconsProvider))),f=e.computed((()=>{const e=n.name??"",t=`@${d.value}:${n.prefix}:${e}`;if(o.iconExists(t))return t;const r=null==i?void 0:i.iconsCollections.find((t=>{const n=`@${d.value}:${t.prefix}:${e}`;return o.iconExists(n)}));return r?`@${d.value}:${r.prefix}:${e}`:e}));function v(e){const t=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),r=(null==t?void 0:t.innerHTML.trim())||"";t&&r&&o.addIcon(`@${d.value}:${n.prefix}:${n.name}`,{body:r,height:t.viewBox.baseVal.height,width:t.viewBox.baseVal.width})}return i&&n.src&&!o.iconExists(`@${d.value}:${n.prefix}:${n.name}`)&&(l.value=!1,i.fetchIcon(n.src).then((e=>{e&&(v(e),l.value=!0)})).catch((e=>{throw new Error(`Error during fetch icon: ${null==e?void 0:e.message}`)}))),n.svg&&v(n.svg),(t,n)=>e.unref(l)?(e.openBlock(),e.createBlock(e.unref(o.Icon),e.mergeProps({key:0,class:e.unref(s)},{inline:t.inline,width:t.width,height:t.height,horizontalFlip:t.horizontalFlip,verticalFlip:t.verticalFlip,flip:t.flip,rotate:e.unref(r),color:t.color,onLoad:t.onLoad,icon:e.unref(f)}),null,16,["class"])):e.createCommentVNode("v-if",!0)}}),f=(Boolean,Boolean,Boolean,Boolean,{modifiers:{type:[String,Array],default:void 0}});i.before;const v={id:[String,Number]};l.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,a.button,s.button,r.local;const p={...f,...v,title:String,modelValue:{type:Boolean,default:void 0},transition:{type:String,default:"fade-block"},size:String,keepOpen:{type:Boolean,default:!1}},m={key:0,class:"vv-dialog__header"},g={class:"vv-dialog__content"},h={key:1,class:"vv-dialog__footer"};return e.defineComponent({name:"VvDialog",props:p,emits:["open","close","update:modelValue","beforeEnter","afterLeave","enter","afterEnter","enterCancelled","beforeLeave","leave","leaveCancelled"],setup(o,{expose:n,emit:r}){const l=o,i=r,a=e.ref(),s=t.useVModel(l,"modelValue",i),u=e.ref(!1),f=e.computed({get:()=>s.value??u.value,set:e=>{void 0!==s.value?s.value=e:u.value=e}}),v=e.ref(null),{modifiers:p}=e.toRefs(l),b=c("vv-dialog",p,e.computed((()=>l.size?{[l.size]:!!l.size}:{}))),y=e.computed((()=>{const{id:e}=l;return{id:e}})),B=e.computed((()=>`vv-dialog--${l.transition}`)),$={"before-enter":()=>{var e,o;(null==(e=a.value)?void 0:e.open)||null==(o=a.value)||o.showModal(),i("open"),i("beforeEnter")},"after-leave":()=>{var e,o;(null==(e=a.value)?void 0:e.open)&&(null==(o=a.value)||o.close()),i("close"),i("afterLeave")},enter:()=>{i("enter")},"after-enter":()=>{i("afterEnter")},"enter-cancelled":()=>{i("enterCancelled")},"before-leave":()=>{i("beforeLeave")},leave:()=>{i("leave")},"leave-cancelled":()=>{i("leaveCancelled")}};function k(){f.value=!1}function w(){l.keepOpen||k()}return t.onClickOutside(v,(()=>{l.keepOpen||k()})),n({close:k,open:function(){f.value=!0}}),(o,t)=>(e.openBlock(),e.createBlock(e.Transition,e.mergeProps({name:e.unref(B)},e.toHandlers($),{persisted:""}),{default:e.withCtx((()=>[e.withDirectives(e.createElementVNode("dialog",e.mergeProps(e.unref(y),{ref_key:"dialogEl",ref:a,class:e.unref(b),onCancel:e.withModifiers(w,["stop","prevent"])}),[e.createElementVNode("article",{ref_key:"modalWrapper",ref:v,class:"vv-dialog__wrapper"},[o.$slots.header||o.title?(e.openBlock(),e.createElementBlock("header",m,[e.renderSlot(o.$slots,"header",{},(()=>[e.createTextVNode(e.toDisplayString(o.title)+" ",1),e.createElementVNode("button",{type:"button","aria-label":"Close",class:"vv-dialog__close",onClickPassive:k},[e.createVNode(d,{name:"close"})],32)]))])):e.createCommentVNode("v-if",!0),e.createElementVNode("div",g,[e.renderSlot(o.$slots,"default")]),o.$slots.footer?(e.openBlock(),e.createElementBlock("footer",h,[e.renderSlot(o.$slots,"footer")])):e.createCommentVNode("v-if",!0)],512)],16),[[e.vShow,e.unref(f)]])])),_:3},16,["name"]))}})}));

package/dist/components/VvDialog/VvDialog.vue.d.ts

@@ -14,10 +14,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
     };
     id: (StringConstructor | NumberConstructor)[];
+    modifiers: {
+        type: globalThis.PropType<string | string[]>;
+        default: undefined;
+    };
 }, {
     close: () => void;
     open: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    [x: string]: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<globalThis.ExtractPropTypes<{
     title: StringConstructor;
     modelValue: {
         type: BooleanConstructor;
@@ -33,10 +39,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
     };
     id: (StringConstructor | NumberConstructor)[];
-}>> & {
-    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, {
+    modifiers: {
+        type: globalThis.PropType<string | string[]>;
+        default: undefined;
+    };
+}>>, {
     modelValue: boolean;
+    modifiers: string | string[];
     transition: string;
     keepOpen: boolean;
 }, {}>, {

package/dist/components/VvDialog/index.d.ts

@@ -20,6 +20,7 @@ export declare const VvDialogProps: {
     };
     /**
      * Dialog size
+     * @deprecated use modifiers instead
      */
     size: StringConstructor;
     /**
@@ -30,4 +31,8 @@ export declare const VvDialogProps: {
         default: boolean;
     };
     id: (StringConstructor | NumberConstructor)[];
+    modifiers: {
+        type: globalThis.PropType<string | string[]>;
+        default: undefined;
+    };
 };