@volverjs/ui-vue 0.0.3 → 0.0.5-beta.1

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

@@ -1,6 +1,7 @@
-import { defineComponent as _, unref as a, openBlock as g, createBlock as V, mergeProps as S, createCommentVNode as y, Transition as D, toHandlers as N, withCtx as k, withDirectives as E, createElementVNode as f, createElementBlock as B, renderSlot as b, createTextVNode as F, toDisplayString as j, createVNode as I, vShow as z } from "vue";
-import { iconExists as p, Icon as M, addIcon as L } from "@iconify/vue";
-const T = {
+import { inject, computed, unref, defineComponent, ref, toRefs, openBlock, createBlock, mergeProps, createCommentVNode, Transition, toHandlers, withCtx, withDirectives, createElementVNode, createElementBlock, renderSlot, createTextVNode, toDisplayString, createVNode, vShow } from "vue";
+import { iconExists, Icon, addIcon } from "@iconify/vue";
+import { onClickOutside, onKeyStroke } from "@vueuse/core";
+const VvIconProps = {
   /**
    * Color
    */
@@ -24,7 +25,7 @@ const T = {
    */
   name: {
     type: String,
-    required: !0
+    required: true
   },
   /**
    * By default 'vv'
@@ -93,72 +94,337 @@ const T = {
   modifiers: {
     type: [String, Array]
   }
-}, q = {
+};
+var Side = /* @__PURE__ */ ((Side2) => {
+  Side2["left"] = "left";
+  Side2["right"] = "right";
+  Side2["top"] = "top";
+  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";
+  return Position2;
+})(Position || {});
+var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
+  ButtonType2["button"] = "button";
+  ButtonType2["submit"] = "submit";
+  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"
-}, A = /* @__PURE__ */ _({
-  ...q,
-  props: T,
-  setup(e) {
-    const r = e, i = ref(!0), n = useVolver(), { modifiers: d } = toRefs(r), u = useBemModifiers("vv-icon", d), s = computed(() => r.provider || (n == null ? void 0 : n.provider)), v = computed(() => {
-      const t = r.name ?? "", o = `@${s.value}:${r.prefix}:${r.name}`;
-      return p(t) ? t : p(o) ? o : (n == null ? void 0 : n.iconsCollections.find(
-        (l) => {
-          const h = `@${s.value}:${l.prefix}:${t}`;
-          if (p(h))
-            return h;
-        }
-      )) || t;
+};
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...__default__$1,
+  props: VvIconProps,
+  setup(__props) {
+    const props = __props;
+    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}:${props.name}`;
+      if (iconExists(_name)) {
+        return _name;
+      } else if (iconExists(iconName)) {
+        return iconName;
+      } else {
+        return (volver == null ? void 0 : volver.iconsCollections.find(
+          (iconsCollection) => {
+            const icon2 = `@${provider.value}:${iconsCollection.prefix}:${_name}`;
+            if (iconExists(icon2)) {
+              return icon2;
+            }
+          }
+        )) || _name;
+      }
     });
-    function m(t) {
-      let o = null;
-      if (typeof window > "u") {
-        const { JSDOM: O } = require("jsdom");
-        o = new O().window;
+    function getSvgContent(svg) {
+      let dom = null;
+      if (typeof window === "undefined") {
+        const { JSDOM } = require("jsdom");
+        dom = new JSDOM().window;
       }
-      return (o ? new o.DOMParser() : new window.DOMParser()).parseFromString(t, "text/html").querySelector("svg");
+      const domParser = dom ? new dom.DOMParser() : new window.DOMParser();
+      const svgDomString = domParser.parseFromString(svg, "text/html");
+      const svgEl = svgDomString.querySelector("svg");
+      return svgEl;
     }
-    function c(t) {
-      const o = m(t), l = (o == null ? void 0 : o.innerHTML.trim()) || "";
-      o && l && L(`@${s.value}:${r.prefix}:${r.name}`, {
-        body: l,
-        // Set height and width from svg content
-        height: o.viewBox.baseVal.height,
-        width: o.viewBox.baseVal.width
-      });
+    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(`During fetch icon: ${e == null ? void 0 : e.message}`);
+        });
+      } else if (props.svg) {
+        addIconFromSvg(props.svg);
+      }
     }
-    return n && (r.src && !p(`@${s.value}:${r.prefix}:${r.name}`) ? (i.value = !1, n.fetchIcon(r.src).then((t) => {
-      t && (c(t), i.value = !0);
-    }).catch((t) => {
-      throw new Error(`During fetch icon: ${t == null ? void 0 : t.message}`);
-    })) : r.svg && c(r.svg)), (t, o) => a(i) ? (g(), V(a(M), S({
-      key: 0,
-      class: a(u)
-    }, {
-      inline: t.inline,
-      width: t.width,
-      height: t.height,
-      horizontalFlip: t.horizontalFlip,
-      verticalFlip: t.verticalFlip,
-      flip: t.flip,
-      rotate: t.rotate,
-      color: t.color,
-      onLoad: t.onLoad,
-      icon: a(v)
-    }), null, 16, ["class"])) : y("", !0);
+    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: _ctx.rotate,
+        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,
+  /**
+   * Anchor target
+   */
+  target: {
+    type: String,
+    validator: (value) => Object.values(AnchorTarget).includes(value)
+  },
+  /**
+   * Anchor rel
+   */
+  rel: {
+    type: String,
+    default: "noopener noreferrer"
+  }
+};
+const DisabledProps = {
+  /**
+   * Whether the form control is disabled
+   */
+  disabled: Boolean
+};
+const ActiveProps = {
+  /**
+   * Whether the item is active
+   */
+  active: 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)
   }
 });
-var w = /* @__PURE__ */ ((e) => (e.left = "left", e.right = "right", e.top = "top", e.bottom = "bottom", e))(w || {}), C = /* @__PURE__ */ ((e) => (e.topStart = "top-start", e.topEnd = "top-end", e.bottomStart = "bottom-start", e.bottomEnd = "bottom-end", e.leftStart = "left-start", e.leftEnd = "left-end", e.rightStart = "right-start", e.rightEnd = "right-end", e))(C || {}), $ = /* @__PURE__ */ ((e) => (e.before = "before", e.after = "after", e))($ || {});
-$.before;
-const H = {
+const IdProps = {
   /**
    * Global attribute id
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
    */
   id: [String, Number]
 };
-w.bottom;
-const P = ["open", "close", "update:modelValue"], W = {
-  ...H,
+({
+  /**
+   * Dropdown placement
+   */
+  placement: {
+    type: String,
+    default: Side.bottom,
+    validator: (value) => {
+      return Object.values(Side).includes(value) || Object.values(Placement).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
+  },
+  /**
+   * Close dropdown on click outside
+   */
+  autoClose: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * Autofocus first item on dropdown open
+   */
+  autofocusFirst: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * Set dropdown width to the same as the trigger
+   */
+  triggerWidth: {
+    type: Boolean
+  }
+});
+({
+  ...DisabledProps,
+  ...LabelProps,
+  ...PressedProps,
+  ...ActiveProps,
+  ...LinkProps,
+  /**
+   * Button type
+   */
+  type: {
+    type: String,
+    default: ButtonType.button,
+    validator: (value) => Object.values(ButtonType).includes(value)
+  }
+});
+const VvDialogEvents = ["open", "close", "update:modelValue"];
+const VvDialogProps = {
+  ...IdProps,
   /**
    * Dialog title
    */
@@ -166,7 +432,10 @@ const P = ["open", "close", "update:modelValue"], W = {
   /**
    * Show / hide dialog programmatically
    */
-  modelValue: Boolean,
+  modelValue: {
+    type: Boolean,
+    default: void 0
+  },
   /**
    * Dialog transition
    */
@@ -178,78 +447,120 @@ const P = ["open", "close", "update:modelValue"], W = {
   /**
    * Close dialog on click outside
    */
-  autoClose: { type: Boolean, default: !0 }
-}, J = {
+  autoClose: { type: Boolean, default: true }
+};
+const _hoisted_1 = {
   key: 0,
   class: "vv-dialog__header"
-}, K = { class: "vv-dialog__content" }, R = {
+};
+const _hoisted_2 = { class: "vv-dialog__content" };
+const _hoisted_3 = {
   key: 1,
   class: "vv-dialog__footer"
-}, G = {
+};
+const __default__ = {
   name: "VvDialog"
-}, Y = /* @__PURE__ */ _({
-  ...G,
-  props: W,
-  emits: P,
-  setup(e, { emit: r }) {
-    const i = e, n = useVModel(i, "modelValue", r), d = ref(!0), u = ref(null), s = computed(() => {
-      const { id: o } = i;
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: VvDialogProps,
+  emits: VvDialogEvents,
+  setup(__props, { expose, emit }) {
+    const props = __props;
+    const localModelValue = ref(false);
+    const modelValue = computed({
+      get() {
+        return props.modelValue ?? localModelValue.value;
+      },
+      set(value) {
+        if (props.modelValue === void 0) {
+          localModelValue.value = value;
+        }
+        emit("update:modelValue", value);
+      }
+    });
+    const htmlAttrIsOpen = ref(true);
+    const modalWrapper = ref(null);
+    const dialogAttrs = computed(() => {
+      const { id } = props;
       return {
-        id: o,
-        open: d.value
+        id,
+        open: htmlAttrIsOpen.value
       };
-    }), v = computed(() => i.size ? ["vv-dialog", `vv-dialog--${i.size}`] : "vv-dialog"), m = computed(() => `vv-dialog--${i.transition}`), c = {
+    });
+    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": () => {
-        d.value = !0, r("open");
+        htmlAttrIsOpen.value = true;
+        emit("open");
       },
       "after-leave": () => {
-        d.value = !1, r("close");
+        htmlAttrIsOpen.value = false;
+        emit("close");
       }
     };
-    onClickOutside(u, () => {
-      i.autoClose && (n.value = !1);
+    onClickOutside(modalWrapper, () => {
+      if (props.autoClose) {
+        modelValue.value = false;
+      }
     });
-    function t() {
-      n.value = !1;
+    function close() {
+      modelValue.value = false;
+    }
+    function open() {
+      modelValue.value = true;
     }
-    return onKeyStroke("Escape", (o) => {
-      n.value && (o.preventDefault(), t());
-    }), (o, l) => (g(), V(D, S({ name: a(m) }, N(c)), {
-      default: k(() => [
-        E(f("dialog", S(a(s), { class: a(v) }), [
-          f("article", {
-            ref_key: "modalWrapper",
-            ref: u,
-            class: "vv-dialog__wrapper"
-          }, [
-            o.$slots.header || o.title ? (g(), B("header", J, [
-              b(o.$slots, "header", {}, () => [
-                F(j(o.title) + " ", 1),
-                f("button", {
-                  type: "button",
-                  "aria-label": "Close",
-                  class: "vv-dialog__close",
-                  onClickPassive: t
-                }, [
-                  I(A, { name: "close" })
-                ], 32)
-              ])
-            ])) : y("", !0),
-            f("div", K, [
-              b(o.$slots, "default")
-            ]),
-            o.$slots.footer ? (g(), B("footer", R, [
-              b(o.$slots, "footer")
-            ])) : y("", !0)
-          ], 512)
-        ], 16), [
-          [z, a(n)]
-        ])
-      ]),
-      _: 3
-    }, 16, ["name"]));
+    expose({ close, open });
+    onKeyStroke("Escape", (e) => {
+      if (modelValue.value) {
+        e.preventDefault();
+        close();
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Transition, mergeProps({ name: unref(transitioName) }, toHandlers(dialogTransitionHandlers)), {
+        default: withCtx(() => [
+          withDirectives(createElementVNode("dialog", mergeProps(unref(dialogAttrs), { class: unref(dialogClass) }), [
+            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),
+                  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_2, [
+                renderSlot(_ctx.$slots, "default")
+              ]),
+              _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_3, [
+                renderSlot(_ctx.$slots, "footer")
+              ])) : createCommentVNode("", true)
+            ], 512)
+          ], 16), [
+            [vShow, unref(modelValue)]
+          ])
+        ]),
+        _: 3
+      }, 16, ["name"]);
+    };
   }
 });
 export {
-  Y as default
+  _sfc_main as default
 };

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

@@ -1 +1 @@
-(function(e,s){typeof exports=="object"&&typeof module<"u"?module.exports=s(require("vue"),require("@iconify/vue")):typeof define=="function"&&define.amd?define(["vue","@iconify/vue"],s):(e=typeof globalThis<"u"?globalThis:e||self,e.VvDialog=s(e.vue,e.vue$1))})(this,function(e,s){"use strict";const b={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]}},v={name:"VvIcon"},w=e.defineComponent({...v,props:b,setup(t){const r=t,a=ref(!0),i=useVolver(),{modifiers:d}=toRefs(r),f=useBemModifiers("vv-icon",d),l=computed(()=>r.provider||(i==null?void 0:i.provider)),g=computed(()=>{const o=r.name??"",n=`@${l.value}:${r.prefix}:${r.name}`;return s.iconExists(o)?o:s.iconExists(n)?n:(i==null?void 0:i.iconsCollections.find(c=>{const y=`@${l.value}:${c.prefix}:${o}`;if(s.iconExists(y))return y}))||o});function h(o){let n=null;if(typeof window>"u"){const{JSDOM:k}=require("jsdom");n=new k().window}return(n?new n.DOMParser:new window.DOMParser).parseFromString(o,"text/html").querySelector("svg")}function p(o){const n=h(o),c=(n==null?void 0:n.innerHTML.trim())||"";n&&c&&s.addIcon(`@${l.value}:${r.prefix}:${r.name}`,{body:c,height:n.viewBox.baseVal.height,width:n.viewBox.baseVal.width})}return i&&(r.src&&!s.iconExists(`@${l.value}:${r.prefix}:${r.name}`)?(a.value=!1,i.fetchIcon(r.src).then(o=>{o&&(p(o),a.value=!0)}).catch(o=>{throw new Error(`During fetch icon: ${o==null?void 0:o.message}`)})):r.svg&&p(r.svg)),(o,n)=>e.unref(a)?(e.openBlock(),e.createBlock(e.unref(s.Icon),e.mergeProps({key:0,class:e.unref(f)},{inline:o.inline,width:o.width,height:o.height,horizontalFlip:o.horizontalFlip,verticalFlip:o.verticalFlip,flip:o.flip,rotate:o.rotate,color:o.color,onLoad:o.onLoad,icon:e.unref(g)}),null,16,["class"])):e.createCommentVNode("",!0)}});var u=(t=>(t.left="left",t.right="right",t.top="top",t.bottom="bottom",t))(u||{}),S=(t=>(t.topStart="top-start",t.topEnd="top-end",t.bottomStart="bottom-start",t.bottomEnd="bottom-end",t.leftStart="left-start",t.leftEnd="left-end",t.rightStart="right-start",t.rightEnd="right-end",t))(S||{}),m=(t=>(t.before="before",t.after="after",t))(m||{});m.before;const B={id:[String,Number]};u.bottom;const V=["open","close","update:modelValue"],_={...B,title:String,modelValue:Boolean,transition:{type:String,default:"fade-block"},size:String,autoClose:{type:Boolean,default:!0}},E={key:0,class:"vv-dialog__header"},$={class:"vv-dialog__content"},C={key:1,class:"vv-dialog__footer"},N={name:"VvDialog"};return e.defineComponent({...N,props:_,emits:V,setup(t,{emit:r}){const a=t,i=useVModel(a,"modelValue",r),d=ref(!0),f=ref(null),l=computed(()=>{const{id:n}=a;return{id:n,open:d.value}}),g=computed(()=>a.size?["vv-dialog",`vv-dialog--${a.size}`]:"vv-dialog"),h=computed(()=>`vv-dialog--${a.transition}`),p={"before-enter":()=>{d.value=!0,r("open")},"after-leave":()=>{d.value=!1,r("close")}};onClickOutside(f,()=>{a.autoClose&&(i.value=!1)});function o(){i.value=!1}return onKeyStroke("Escape",n=>{i.value&&(n.preventDefault(),o())}),(n,c)=>(e.openBlock(),e.createBlock(e.Transition,e.mergeProps({name:e.unref(h)},e.toHandlers(p)),{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("dialog",e.mergeProps(e.unref(l),{class:e.unref(g)}),[e.createElementVNode("article",{ref_key:"modalWrapper",ref:f,class:"vv-dialog__wrapper"},[n.$slots.header||n.title?(e.openBlock(),e.createElementBlock("header",E,[e.renderSlot(n.$slots,"header",{},()=>[e.createTextVNode(e.toDisplayString(n.title)+" ",1),e.createElementVNode("button",{type:"button","aria-label":"Close",class:"vv-dialog__close",onClickPassive:o},[e.createVNode(w,{name:"close"})],32)])])):e.createCommentVNode("",!0),e.createElementVNode("div",$,[e.renderSlot(n.$slots,"default")]),n.$slots.footer?(e.openBlock(),e.createElementBlock("footer",C,[e.renderSlot(n.$slots,"footer")])):e.createCommentVNode("",!0)],512)],16),[[e.vShow,e.unref(i)]])]),_: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={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 s=e.defineComponent({name:"VvIcon",props:n,setup(t){const n=t,r=e.ref(!0),l=e.inject(a),{modifiers:i}=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",i),u=e.computed((()=>n.provider||(null==l?void 0:l.iconsProvider))),c=e.computed((()=>{const e=n.name??"",t=`@${u.value}:${n.prefix}:${n.name}`;return o.iconExists(e)?e:o.iconExists(t)?t:(null==l?void 0:l.iconsCollections.find((t=>{const n=`@${u.value}:${t.prefix}:${e}`;if(o.iconExists(n))return n})))||e}));function d(e){const t=function(e){let o=null;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 l&&(n.src&&!o.iconExists(`@${u.value}:${n.prefix}:${n.name}`)?(r.value=!1,l.fetchIcon(n.src).then((e=>{e&&(d(e),r.value=!0)})).catch((e=>{throw new Error(`During fetch icon: ${null==e?void 0:e.message}`)}))):n.svg&&d(n.svg)),(t,n)=>e.unref(r)?(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:t.rotate,color:t.color,onLoad:t.onLoad,icon:e.unref(c)}),null,16,["class"])):e.createCommentVNode("",!0)}});Boolean,Boolean,Boolean;l.before;const u={id:[String,Number]};r.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,i.button;const c={...u,title:String,modelValue:{type:Boolean,default:void 0},transition:{type:String,default:"fade-block"},size:String,autoClose:{type:Boolean,default:!0}},d={key:0,class:"vv-dialog__header"},f={class:"vv-dialog__content"},v={key:1,class:"vv-dialog__footer"};return e.defineComponent({name:"VvDialog",props:c,emits:["open","close","update:modelValue"],setup(o,{expose:n,emit:r}){const l=o,i=e.ref(!1),a=e.computed({get:()=>l.modelValue??i.value,set(e){void 0===l.modelValue&&(i.value=e),r("update:modelValue",e)}}),u=e.ref(!0),c=e.ref(null),p=e.computed((()=>{const{id:e}=l;return{id:e,open:u.value}})),m=e.computed((()=>l.size?["vv-dialog",`vv-dialog--${l.size}`]:"vv-dialog")),g=e.computed((()=>`vv-dialog--${l.transition}`)),h={"before-enter":()=>{u.value=!0,r("open")},"after-leave":()=>{u.value=!1,r("close")}};function y(){a.value=!1}return t.onClickOutside(c,(()=>{l.autoClose&&(a.value=!1)})),n({close:y,open:function(){a.value=!0}}),t.onKeyStroke("Escape",(e=>{a.value&&(e.preventDefault(),y())})),(o,t)=>(e.openBlock(),e.createBlock(e.Transition,e.mergeProps({name:e.unref(g)},e.toHandlers(h)),{default:e.withCtx((()=>[e.withDirectives(e.createElementVNode("dialog",e.mergeProps(e.unref(p),{class:e.unref(m)}),[e.createElementVNode("article",{ref_key:"modalWrapper",ref:c,class:"vv-dialog__wrapper"},[o.$slots.header||o.title?(e.openBlock(),e.createElementBlock("header",d,[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:y},[e.createVNode(s,{name:"close"})],32)]))])):e.createCommentVNode("",!0),e.createElementVNode("div",f,[e.renderSlot(o.$slots,"default")]),o.$slots.footer?(e.openBlock(),e.createElementBlock("footer",v,[e.renderSlot(o.$slots,"footer")])):e.createCommentVNode("",!0)],512)],16),[[e.vShow,e.unref(a)]])])),_:3},16,["name"]))}})}));

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

@@ -1,6 +1,9 @@
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     title: StringConstructor;
-    modelValue: BooleanConstructor;
+    modelValue: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
     transition: {
         type: StringConstructor;
         default: string;
@@ -11,9 +14,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
     };
     id: (StringConstructor | NumberConstructor)[];
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {
+    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<{
     title: StringConstructor;
-    modelValue: BooleanConstructor;
+    modelValue: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
     transition: {
         type: StringConstructor;
         default: string;