@volverjs/ui-vue 0.0.3 → 0.0.4

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 as D, computed as d, unref as i, defineComponent as E, ref as S, toRefs as F, openBlock as g, createBlock as C, mergeProps as _, createCommentVNode as $, Transition as I, toHandlers as P, withCtx as z, withDirectives as L, createElementVNode as f, createElementBlock as V, renderSlot as y, createTextVNode as M, toDisplayString as A, createVNode as q, vShow as H } from "vue";
+import { iconExists as v, Icon as R, addIcon as W } from "@iconify/vue";
+import { useVModel as J, onClickOutside as K, onKeyStroke as Y } from "@vueuse/core";
+const G = {
   /**
    * Color
    */
@@ -93,46 +94,64 @@ const T = {
   modifiers: {
     type: [String, Array]
   }
-}, q = {
+};
+var w = /* @__PURE__ */ ((e) => (e.left = "left", e.right = "right", e.top = "top", e.bottom = "bottom", e))(w || {}), N = /* @__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))(N || {}), B = /* @__PURE__ */ ((e) => (e.before = "before", e.after = "after", e))(B || {}), O = /* @__PURE__ */ ((e) => (e.button = "button", e.submit = "submit", e.reset = "reset", e))(O || {}), j = /* @__PURE__ */ ((e) => (e._blank = "_blank", e._self = "_self", e._parent = "_parent", e._top = "_top", e))(j || {});
+const Q = Symbol.for("volver");
+function T() {
+  return D(Q);
+}
+function U(e, r, a) {
+  return d(() => {
+    const n = {
+      [e]: !0
+    }, l = typeof (r == null ? void 0 : r.value) == "string" ? r.value.split(" ") : r == null ? void 0 : r.value;
+    return l && Array.isArray(l) && l.forEach((s) => {
+      n[`${e}--${s}`] = !0;
+    }), a && Object.keys(a.value).forEach((s) => {
+      n[`${e}--${s}`] = i(a.value[s]);
+    }), n;
+  });
+}
+const X = {
   name: "VvIcon"
-}, A = /* @__PURE__ */ _({
-  ...q,
-  props: T,
+}, Z = /* @__PURE__ */ E({
+  ...X,
+  props: G,
   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))
+    const r = e, a = S(!0), n = T(), { modifiers: l } = F(r), s = U("vv-icon", l), u = d(() => r.provider || (n == null ? void 0 : n.provider)), m = d(() => {
+      const t = r.name ?? "", o = `@${u.value}:${r.prefix}:${r.name}`;
+      return v(t) ? t : v(o) ? o : (n == null ? void 0 : n.iconsCollections.find(
+        (c) => {
+          const h = `@${u.value}:${c.prefix}:${t}`;
+          if (v(h))
             return h;
         }
       )) || t;
     });
-    function m(t) {
+    function b(t) {
       let o = null;
       if (typeof window > "u") {
-        const { JSDOM: O } = require("jsdom");
-        o = new O().window;
+        const { JSDOM: k } = require("jsdom");
+        o = new k().window;
       }
       return (o ? new o.DOMParser() : new window.DOMParser()).parseFromString(t, "text/html").querySelector("svg");
     }
-    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,
+    function p(t) {
+      const o = b(t), c = (o == null ? void 0 : o.innerHTML.trim()) || "";
+      o && c && W(`@${u.value}:${r.prefix}:${r.name}`, {
+        body: c,
         // Set height and width from svg content
         height: o.viewBox.baseVal.height,
         width: o.viewBox.baseVal.width
       });
     }
-    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);
+    return n && (r.src && !v(`@${u.value}:${r.prefix}:${r.name}`) ? (a.value = !1, n.fetchIcon(r.src).then((t) => {
+      t && (p(t), a.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({
+    })) : r.svg && p(r.svg)), (t, o) => i(a) ? (g(), C(i(R), _({
       key: 0,
-      class: a(u)
+      class: i(s)
     }, {
       inline: t.inline,
       width: t.width,
@@ -143,13 +162,58 @@ const T = {
       rotate: t.rotate,
       color: t.color,
       onLoad: t.onLoad,
-      icon: a(v)
-    }), null, 16, ["class"])) : y("", !0);
+      icon: i(m)
+    }), null, 16, ["class"])) : $("", !0);
   }
-});
-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 = {
+}), x = {
+  /**
+   * 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: (e) => Object.values(j).includes(e)
+  },
+  /**
+   * Anchor rel
+   */
+  rel: {
+    type: String,
+    default: "noopener noreferrer"
+  }
+}, ee = {
+  /**
+   * Whether the form control is disabled
+   */
+  disabled: Boolean
+}, te = {
+  /**
+   * Whether the item is active
+   */
+  active: Boolean
+}, oe = {
+  /**
+   * Whether the item is pressed
+   */
+  pressed: Boolean
+}, re = {
+  /**
+   * The item label
+   */
+  label: [String, Number]
+};
+B.before;
+const ne = {
   /**
    * Global attribute id
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
@@ -157,8 +221,19 @@ const H = {
   id: [String, Number]
 };
 w.bottom;
-const P = ["open", "close", "update:modelValue"], W = {
-  ...H,
+({
+  ...ee,
+  ...re,
+  ...oe,
+  ...te,
+  ...x,
+  /**
+   * Button type
+   */
+  type: O.button
+});
+const ae = ["open", "close", "update:modelValue"], le = {
+  ...ne,
   /**
    * Dialog title
    */
@@ -179,71 +254,71 @@ const P = ["open", "close", "update:modelValue"], W = {
    * Close dialog on click outside
    */
   autoClose: { type: Boolean, default: !0 }
-}, J = {
+}, se = {
   key: 0,
   class: "vv-dialog__header"
-}, K = { class: "vv-dialog__content" }, R = {
+}, ie = { class: "vv-dialog__content" }, ue = {
   key: 1,
   class: "vv-dialog__footer"
-}, G = {
+}, ce = {
   name: "VvDialog"
-}, Y = /* @__PURE__ */ _({
-  ...G,
-  props: W,
-  emits: P,
+}, ge = /* @__PURE__ */ E({
+  ...ce,
+  props: le,
+  emits: ae,
   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 a = e, n = J(a, "modelValue", r), l = S(!0), s = S(null), u = d(() => {
+      const { id: o } = a;
       return {
         id: o,
-        open: d.value
+        open: l.value
       };
-    }), v = computed(() => i.size ? ["vv-dialog", `vv-dialog--${i.size}`] : "vv-dialog"), m = computed(() => `vv-dialog--${i.transition}`), c = {
+    }), m = d(() => a.size ? ["vv-dialog", `vv-dialog--${a.size}`] : "vv-dialog"), b = d(() => `vv-dialog--${a.transition}`), p = {
       "before-enter": () => {
-        d.value = !0, r("open");
+        l.value = !0, r("open");
       },
       "after-leave": () => {
-        d.value = !1, r("close");
+        l.value = !1, r("close");
       }
     };
-    onClickOutside(u, () => {
-      i.autoClose && (n.value = !1);
+    K(s, () => {
+      a.autoClose && (n.value = !1);
     });
     function t() {
       n.value = !1;
     }
-    return onKeyStroke("Escape", (o) => {
+    return Y("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) }), [
+    }), (o, c) => (g(), C(I, _({ name: i(b) }, P(p)), {
+      default: z(() => [
+        L(f("dialog", _(i(u), { class: i(m) }), [
           f("article", {
             ref_key: "modalWrapper",
-            ref: u,
+            ref: s,
             class: "vv-dialog__wrapper"
           }, [
-            o.$slots.header || o.title ? (g(), B("header", J, [
-              b(o.$slots, "header", {}, () => [
-                F(j(o.title) + " ", 1),
+            o.$slots.header || o.title ? (g(), V("header", se, [
+              y(o.$slots, "header", {}, () => [
+                M(A(o.title) + " ", 1),
                 f("button", {
                   type: "button",
                   "aria-label": "Close",
                   class: "vv-dialog__close",
                   onClickPassive: t
                 }, [
-                  I(A, { name: "close" })
+                  q(Z, { name: "close" })
                 ], 32)
               ])
-            ])) : y("", !0),
-            f("div", K, [
-              b(o.$slots, "default")
+            ])) : $("", !0),
+            f("div", ie, [
+              y(o.$slots, "default")
             ]),
-            o.$slots.footer ? (g(), B("footer", R, [
-              b(o.$slots, "footer")
-            ])) : y("", !0)
+            o.$slots.footer ? (g(), V("footer", ue, [
+              y(o.$slots, "footer")
+            ])) : $("", !0)
           ], 512)
         ], 16), [
-          [z, a(n)]
+          [H, i(n)]
         ])
       ]),
       _: 3
@@ -251,5 +326,5 @@ const P = ["open", "close", "update:modelValue"], W = {
   }
 });
 export {
-  Y as default
+  ge 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,s){typeof exports=="object"&&typeof module<"u"?module.exports=s(require("vue"),require("@iconify/vue"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["vue","@iconify/vue","@vueuse/core"],s):(e=typeof globalThis<"u"?globalThis:e||self,e.VvDialog=s(e.vue,e.vue$1,e.core))})(this,function(e,s,u){"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]}};var g=(t=>(t.left="left",t.right="right",t.top="top",t.bottom="bottom",t))(g||{}),v=(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))(v||{}),m=(t=>(t.before="before",t.after="after",t))(m||{}),b=(t=>(t.button="button",t.submit="submit",t.reset="reset",t))(b||{}),_=(t=>(t._blank="_blank",t._self="_self",t._parent="_parent",t._top="_top",t))(_||{});const V=Symbol.for("volver");function w(){return e.inject(V)}function E(t,r,a){return e.computed(()=>{const i={[t]:!0},l=typeof(r==null?void 0:r.value)=="string"?r.value.split(" "):r==null?void 0:r.value;return l&&Array.isArray(l)&&l.forEach(c=>{i[`${t}--${c}`]=!0}),a&&Object.keys(a.value).forEach(c=>{i[`${t}--${c}`]=e.unref(a.value[c])}),i})}const $={name:"VvIcon"},N=e.defineComponent({...$,props:B,setup(t){const r=t,a=e.ref(!0),i=w(),{modifiers:l}=e.toRefs(r),c=E("vv-icon",l),d=e.computed(()=>r.provider||(i==null?void 0:i.provider)),h=e.computed(()=>{const o=r.name??"",n=`@${d.value}:${r.prefix}:${r.name}`;return s.iconExists(o)?o:s.iconExists(n)?n:(i==null?void 0:i.iconsCollections.find(f=>{const S=`@${d.value}:${f.prefix}:${o}`;if(s.iconExists(S))return S}))||o});function y(o){let n=null;if(typeof window>"u"){const{JSDOM:A}=require("jsdom");n=new A().window}return(n?new n.DOMParser:new window.DOMParser).parseFromString(o,"text/html").querySelector("svg")}function p(o){const n=y(o),f=(n==null?void 0:n.innerHTML.trim())||"";n&&f&&s.addIcon(`@${d.value}:${r.prefix}:${r.name}`,{body:f,height:n.viewBox.baseVal.height,width:n.viewBox.baseVal.width})}return i&&(r.src&&!s.iconExists(`@${d.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(c)},{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(h)}),null,16,["class"])):e.createCommentVNode("",!0)}}),O={to:{type:[String,Object]},href:String,target:{type:String,validator:t=>Object.values(_).includes(t)},rel:{type:String,default:"noopener noreferrer"}},k={disabled:Boolean},C={active:Boolean},j={pressed:Boolean},D={label:[String,Number]};m.before;const P={id:[String,Number]};g.bottom,{...k,...D,...j,...C,...O,type:b.button};const F=["open","close","update:modelValue"],I={...P,title:String,modelValue:Boolean,transition:{type:String,default:"fade-block"},size:String,autoClose:{type:Boolean,default:!0}},z={key:0,class:"vv-dialog__header"},L={class:"vv-dialog__content"},q={key:1,class:"vv-dialog__footer"},M={name:"VvDialog"};return e.defineComponent({...M,props:I,emits:F,setup(t,{emit:r}){const a=t,i=u.useVModel(a,"modelValue",r),l=e.ref(!0),c=e.ref(null),d=e.computed(()=>{const{id:n}=a;return{id:n,open:l.value}}),h=e.computed(()=>a.size?["vv-dialog",`vv-dialog--${a.size}`]:"vv-dialog"),y=e.computed(()=>`vv-dialog--${a.transition}`),p={"before-enter":()=>{l.value=!0,r("open")},"after-leave":()=>{l.value=!1,r("close")}};u.onClickOutside(c,()=>{a.autoClose&&(i.value=!1)});function o(){i.value=!1}return u.onKeyStroke("Escape",n=>{i.value&&(n.preventDefault(),o())}),(n,f)=>(e.openBlock(),e.createBlock(e.Transition,e.mergeProps({name:e.unref(y)},e.toHandlers(p)),{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("dialog",e.mergeProps(e.unref(d),{class:e.unref(h)}),[e.createElementVNode("article",{ref_key:"modalWrapper",ref:c,class:"vv-dialog__wrapper"},[n.$slots.header||n.title?(e.openBlock(),e.createElementBlock("header",z,[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(N,{name:"close"})],32)])])):e.createCommentVNode("",!0),e.createElementVNode("div",L,[e.renderSlot(n.$slots,"default")]),n.$slots.footer?(e.openBlock(),e.createElementBlock("footer",q,[e.renderSlot(n.$slots,"footer")])):e.createCommentVNode("",!0)],512)],16),[[e.vShow,e.unref(i)]])]),_:3},16,["name"]))}})});