@volverjs/ui-vue 0.0.10-beta.9 → 0.0.11

package/dist/components/VvAlert/VvAlert.umd.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue"),require("@iconify/vue"),require("uid")):"function"==typeof define&&define.amd?define(["vue","@iconify/vue","uid"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).VvAlert=t(e.vue,e.vue$1,e.uid)}(this,(function(e,t,o){"use strict";const l={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||{}),n=(e=>(e.before="before",e.after="after",e))(n||{}),i=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(i||{}),a=(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(a||{});const s=Symbol.for("volver"),u=Symbol.for("alertGroup");function c(t,o,l){return e.computed((()=>{const r={[t]:!0},n="string"==typeof(null==o?void 0:o.value)?o.value.split(" "):null==o?void 0:o.value;return n&&Array.isArray(n)&&n.forEach((e=>{e&&(r[`${t}--${e}`]=!0)})),l&&Object.keys(l.value).forEach((o=>{r[`${t}--${o}`]=e.unref(l.value[o])})),r}))}const d=e.defineComponent({name:"VvIcon",props:l,setup(o){const l=o,r=e.computed((()=>"string"==typeof l.rotate?parseFloat(l.rotate):l.rotate)),n=e.ref(!0),i=e.inject(s),{modifiers:a}=e.toRefs(l),u=c("vv-icon",a),d=e.computed((()=>l.provider||(null==i?void 0:i.iconsProvider))),f=e.computed((()=>{const e=l.name??"",o=`@${d.value}:${l.prefix}:${e}`;if(t.iconExists(o))return o;const r=null==i?void 0:i.iconsCollections.find((o=>{const l=`@${d.value}:${o.prefix}:${e}`;return t.iconExists(l)}));return r?`@${d.value}:${r.prefix}:${e}`:e}));function v(e){const o=function(e){let t;if("undefined"==typeof window){const{JSDOM:e}=require("jsdom");t=(new e).window}return(t?new t.DOMParser:new window.DOMParser).parseFromString(e,"text/html").querySelector("svg")}(e),r=(null==o?void 0:o.innerHTML.trim())||"";o&&r&&t.addIcon(`@${d.value}:${l.prefix}:${l.name}`,{body:r,height:o.viewBox.baseVal.height,width:o.viewBox.baseVal.width})}return i&&l.src&&!t.iconExists(`@${d.value}:${l.prefix}:${l.name}`)&&(n.value=!1,i.fetchIcon(l.src).then((e=>{e&&(v(e),n.value=!0)})).catch((e=>{throw new Error(`Error during fetch icon: ${null==e?void 0:e.message}`)}))),l.svg&&v(l.svg),(o,l)=>e.unref(n)?(e.openBlock(),e.createBlock(e.unref(t.Icon),e.mergeProps({key:0,class:e.unref(u)},{inline:o.inline,width:o.width,height:o.height,horizontalFlip:o.horizontalFlip,verticalFlip:o.verticalFlip,flip:o.flip,rotate:e.unref(r),color:o.color,onLoad:o.onLoad,icon:e.unref(f)}),null,16,["class"])):e.createCommentVNode("v-if",!0)}}),f=(Boolean,Boolean,Boolean,Boolean,{modifiers:[String,Array]}),v={icon:{type:[String,Object]},iconPosition:{type:String,default:n.before,validation:e=>Object.values(n).includes(e)}},p={id:[String,Number]};r.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,i.button,a.button;const m={...p,...f,...v,dismissable:{type:Boolean,default:!1},autoClose:{type:Number,default:0},closeLabel:{type:String,default:"Close"},title:{type:String,default:void 0},content:{type:String,default:void 0},footer:{type:String,default:void 0},role:{type:String,default:"alert"}},g=(t,l)=>{const{bus:r}=e.inject(u,{}),n=(i=e.computed((()=>t.id)),e.computed((()=>String((null==i?void 0:i.value)||o.uid()))));var i;const a=e.computed((()=>`${n.value}-title`)),s=e.computed((()=>"string"==typeof t.icon?{name:t.icon}:t.icon)),d=c("vv-alert",e.computed((()=>t.modifiers)),e.computed((()=>({dismissable:t.autoClose>0||t.dismissable,"auto-close":t.autoClose>0,hover:m.value})))),f=e.computed((()=>({"--alert-duration":`${t.autoClose}ms`}))),v=()=>{p&&clearTimeout(p),l("close",n.value),null==r||r.emit("close",n.value)};let p;e.watch((()=>t.autoClose),(e=>{e>0?p=setTimeout(v,e):p&&clearTimeout(p)}),{immediate:!0});const m=e.ref(!1),g=e.withModifiers((()=>{m.value=!0,p&&clearTimeout(p)}),["passive"]),y=e.withModifiers((()=>{m.value=!1,t.autoClose>0&&(p=setTimeout(v,t.autoClose))}),["passive"]);return{close:v,hasIcon:s,hasTitleId:a,hasProps:e.computed((()=>({onMouseover:g,onMouseleave:y,class:d.value,style:f.value,role:t.role,"aria-labelledby":a.value})))}},y={key:0,class:"vv-alert__header"},b=["id"],h=["aria-label"],$=[e.createElementVNode("div",{class:"vv-alert__close-mask"},null,-1)],S={key:1,class:"vv-alert__content"},B={key:2,class:"vv-alert__footer"};return e.defineComponent({name:"VvAlert",props:m,emits:["close"],setup(t,{expose:o,emit:l}){const r=t,{hasProps:n,hasTitleId:i,hasIcon:a,close:s}=g(r,l);return o({close:s}),(t,o)=>(e.openBlock(),e.createElementBlock("div",e.normalizeProps(e.guardReactiveProps(e.unref(n))),[t.$slots.header||t.$slots.title||t.$slots.close||t.$slots["title::before"]||t.$slots["title::after"]||t.title||t.dismissable||t.autoClose?(e.openBlock(),e.createElementBlock("div",y,[e.unref(a)?(e.openBlock(),e.createBlock(d,e.mergeProps({key:0},e.unref(a),{class:"vv-alert__icon"}),null,16)):e.createCommentVNode("v-if",!0),e.renderSlot(t.$slots,"header",{},(()=>[e.renderSlot(t.$slots,"title::before"),t.$slots.title||t.title?(e.openBlock(),e.createElementBlock("strong",{key:0,id:e.unref(i),class:"vv-alert__title"},[e.renderSlot(t.$slots,"title",{},(()=>[e.createTextVNode(e.toDisplayString(t.title),1)]))],8,b)):e.createCommentVNode("v-if",!0),e.renderSlot(t.$slots,"title::after")])),e.renderSlot(t.$slots,"close",e.normalizeProps(e.guardReactiveProps({close:e.unref(s)})),(()=>[t.dismissable||t.autoClose?(e.openBlock(),e.createElementBlock("button",{key:0,class:"vv-alert__close",type:"button","aria-label":t.closeLabel,onClick:o[0]||(o[0]=e.withModifiers(((...t)=>e.unref(s)&&e.unref(s)(...t)),["stop"]))},$,8,h)):e.createCommentVNode("v-if",!0)]))])):e.createCommentVNode("v-if",!0),t.$slots.default||t.content?(e.openBlock(),e.createElementBlock("div",S,[e.renderSlot(t.$slots,"default",{},(()=>[e.createTextVNode(e.toDisplayString(t.content),1)]))])):e.createCommentVNode("v-if",!0),t.$slots.footer||t.footer?(e.openBlock(),e.createElementBlock("div",B,[e.renderSlot(t.$slots,"footer",{},(()=>[e.createTextVNode(e.toDisplayString(t.footer),1)]))])):e.createCommentVNode("v-if",!0)],16))}})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue"),require("@iconify/vue")):"function"==typeof define&&define.amd?define(["vue","@iconify/vue"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).VvAlert=t(e.vue,e.vue$1)}(this,function(e,t){"use strict";var o=(e=>(e.local="local",e.session="session",e))(o||{}),l=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(l||{}),r=(e=>(e.before="before",e.after="after",e))(r||{}),n=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(n||{}),a=(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(a||{}),i=(e=>(e.alert="alert",e.alertdialog="alertdialog",e))(i||{});const s=Symbol.for("volver"),c=Symbol.for("alertGroup"),u={prefix:"normal"},d={icon:{type:[String,Object],default:void 0},iconPosition:{type:String,default:r.before,validation:e=>Object.values(r).includes(e)}},f={id:[String,Number]};function v(t,o,l){return e.computed(()=>{const r={[t]:!0},n="string"==typeof o?.value?o.value.split(" "):o?.value;return n&&Array.isArray(n)&&n.forEach(e=>{e&&(r[`${t}--${e}`]=!0)}),l&&Object.keys(l.value).forEach(o=>{r[`${t}--${o}`]=e.unref(l.value[o])}),r})}l.bottom,n.button,a.button,o.local;const p={...f,...d,modifiers:{type:[String,Array],default:void 0},dismissable:{type:Boolean,default:!1},autoClose:{type:Number,default:0},closeLabel:{type:String,default:"Close"},title:{type:String,default:void 0},content:{type:String,default:void 0},footer:{type:String,default:void 0},role:{type:String,default:i.alert}};function m(t,o){const{bus:n}=e.inject(c,{}),a=(i=e.computed(()=>t.id),e.computed(()=>String(i?.value||e.useId())));var i;const s=e.computed(()=>`${a.value}-title`);let u;const d=()=>{u&&clearTimeout(u),o("close",a.value),n?.emit("close",a.value)};e.watch(()=>t.autoClose,e=>{e>0?u=setTimeout(d,e):u&&clearTimeout(u)},{immediate:!0});const f=e.ref(!1),p=()=>{f.value=!0,u&&clearTimeout(u)},m=()=>{f.value=!1,t.autoClose>0&&(u=setTimeout(d,t.autoClose))},{hasIcon:h}=function(t,o){const n=e.computed(()=>"string"==typeof t?.value?{name:t?.value}:t?.value),a=e.computed(()=>o?.value===r.before?n.value:void 0),i=e.computed(()=>o?.value===r.after?n.value:void 0),s=e.computed(()=>o?.value===l.left?n.value:void 0),c=e.computed(()=>o?.value===l.right?n.value:void 0),u=e.computed(()=>o?.value===l.top?n.value:void 0),d=e.computed(()=>o?.value===l.bottom?n.value:void 0);return{hasIcon:n,hasIconLeft:s,hasIconRight:c,hasIconTop:u,hasIconBottom:d,hasIconBefore:a,hasIconAfter:i}}(e.computed(()=>t.icon)),b=v("vv-alert",e.computed(()=>t.modifiers),e.computed(()=>({dismissable:t.autoClose>0||t.dismissable,"auto-close":t.autoClose>0,hover:f.value}))),y=e.computed(()=>({"--alert-duration":`${t.autoClose}ms`}));return{close:d,hasIcon:h,hasTitleId:s,hasProps:e.computed(()=>({onMouseover:p,onMouseleave:m,class:b.value,style:y.value,role:t.role,"aria-labelledby":s.value}))}}const h=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:{}},u),setup(o){const l=o,r=e.computed(()=>"string"==typeof l.rotate?Number.parseFloat(l.rotate):l.rotate),n=e.ref(!0),a=e.inject(s,void 0),{modifiers:i}=e.toRefs(l),c=v("vv-icon",i),u=e.computed(()=>l.provider||a?.iconsProvider),d=e.computed(()=>{const e=l.name??"",o=`@${u.value}:${l.prefix}:${e}`;if(t.iconLoaded(o))return o;const r=a?.iconsCollections.find(o=>{const l=`@${u.value}:${o.prefix}:${e}`;return t.iconLoaded(l)});return r?`@${u.value}:${r.prefix}:${e}`:e});function f(e){const o=function(e){let t;if("undefined"==typeof window){const{JSDOM:e}=require("jsdom");t=(new e).window}return(t?new t.DOMParser:new window.DOMParser).parseFromString(e,"text/html").querySelector("svg")}(e),r=o?.innerHTML.trim()||"";o&&r&&t.addIcon(`@${u.value}:${l.prefix}:${l.name}`,{body:r,height:o.viewBox.baseVal.height,width:o.viewBox.baseVal.width})}return a&&l.src&&!t.iconLoaded(`@${u.value}:${l.prefix}:${l.name}`)&&(n.value=!1,a.fetchIcon(l.src).then(e=>{e&&(f(e),n.value=!0)}).catch(e=>{throw new Error(`Error during fetch icon: ${e?.message}`)})),l.svg&&f(l.svg),(l,a)=>e.unref(n)?(e.openBlock(),e.createBlock(e.unref(t.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:e.unref(r),color:o.color,icon:e.unref(d)},{onLoad:o.onLoad}),null,16,["class","onLoad"])):e.createCommentVNode("v-if",!0)}}),b={key:0,class:"vv-alert__header"},y=["id"],g=["aria-label"],$={key:1,class:"vv-alert__content"},k={key:2,class:"vv-alert__footer"};return e.defineComponent({name:"VvAlert",props:p,emits:["close"],setup(t,{expose:o,emit:l}){const r=t,n=l,{hasProps:a,hasTitleId:i,hasIcon:s,close:c}=m(r,n);return o({close:c}),(t,o)=>(e.openBlock(),e.createElementBlock("div",e.normalizeProps(e.guardReactiveProps(e.unref(a))),[t.$slots.header||t.$slots.title||t.$slots.close||t.$slots["title::before"]||t.$slots["title::after"]||t.title||e.unref(s)||t.dismissable||t.autoClose?(e.openBlock(),e.createElementBlock("div",b,[e.unref(s)?(e.openBlock(),e.createBlock(h,e.mergeProps({key:0},e.unref(s),{class:"vv-alert__icon"}),null,16)):e.createCommentVNode("v-if",!0),e.renderSlot(t.$slots,"header",{},()=>[e.renderSlot(t.$slots,"title::before"),t.$slots.title||t.title?(e.openBlock(),e.createElementBlock("strong",{key:0,id:e.unref(i),class:"vv-alert__title"},[e.renderSlot(t.$slots,"title",{},()=>[e.createTextVNode(e.toDisplayString(t.title),1)])],8,y)):e.createCommentVNode("v-if",!0),e.renderSlot(t.$slots,"title::after")]),e.renderSlot(t.$slots,"close",e.normalizeProps(e.guardReactiveProps({close:e.unref(c)})),()=>[t.dismissable||t.autoClose?(e.openBlock(),e.createElementBlock("button",{key:0,class:"vv-alert__close",type:"button","aria-label":t.closeLabel,onClick:o[0]||(o[0]=e.withModifiers((...t)=>e.unref(c)&&e.unref(c)(...t),["stop"]))},[...o[1]||(o[1]=[e.createElementVNode("div",{class:"vv-alert__close-mask"},null,-1)])],8,g)):e.createCommentVNode("v-if",!0)])])):e.createCommentVNode("v-if",!0),t.$slots.default||t.content?(e.openBlock(),e.createElementBlock("div",$,[e.renderSlot(t.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.content),1)])])):e.createCommentVNode("v-if",!0),t.$slots.footer||t.footer?(e.openBlock(),e.createElementBlock("div",k,[e.renderSlot(t.$slots,"footer",{},()=>[e.createTextVNode(e.toDisplayString(t.footer),1)])])):e.createCommentVNode("v-if",!0)],16))}})});

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

@@ -1,4 +1,8 @@
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<globalThis.ExtractPropTypes<{
+    modifiers: {
+        type: PropType<import("../..").AlertModifier | import("../..").AlertModifier[]>;
+        default: undefined;
+    };
     dismissable: {
         type: BooleanConstructor;
         default: boolean;
@@ -24,24 +28,26 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: undefined;
     };
     role: {
-        type: globalThis.PropType<"alert" | "alertdialog">;
-        default: string;
+        type: PropType<`${import("../../constants").AlertRole}`>;
+        default: import("../../constants").AlertRole;
     };
     icon: {
-        type: (ObjectConstructor | StringConstructor)[];
+        type: PropType<string | import("../VvIcon").VvIconProps>;
+        default: undefined;
     };
     iconPosition: {
-        type: globalThis.PropType<"before" | "after">;
+        type: PropType<`${import("../../constants").Position}`>;
         default: import("../../constants").Position;
         validation: (value: import("../../constants").Position) => boolean;
     };
-    modifiers: globalThis.PropType<string | string[]>;
     id: (StringConstructor | NumberConstructor)[];
-}, {
+}>, {
     close: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    [x: string]: (...args: any[]) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<globalThis.ExtractPropTypes<{
+    modifiers: {
+        type: PropType<import("../..").AlertModifier | import("../..").AlertModifier[]>;
+        default: undefined;
+    };
     dismissable: {
         type: BooleanConstructor;
         default: boolean;
@@ -67,41 +73,50 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: undefined;
     };
     role: {
-        type: globalThis.PropType<"alert" | "alertdialog">;
-        default: string;
+        type: PropType<`${import("../../constants").AlertRole}`>;
+        default: import("../../constants").AlertRole;
     };
     icon: {
-        type: (ObjectConstructor | StringConstructor)[];
+        type: PropType<string | import("../VvIcon").VvIconProps>;
+        default: undefined;
     };
     iconPosition: {
-        type: globalThis.PropType<"before" | "after">;
+        type: PropType<`${import("../../constants").Position}`>;
         default: import("../../constants").Position;
         validation: (value: import("../../constants").Position) => boolean;
     };
-    modifiers: globalThis.PropType<string | string[]>;
     id: (StringConstructor | NumberConstructor)[];
-}>>, {
+}>> & Readonly<{}>, {
     title: string;
     content: string;
+    modifiers: string | string[];
     footer: string;
     role: "alert" | "alertdialog";
     dismissable: boolean;
     autoClose: number;
     closeLabel: string;
+    icon: string | import("../VvIcon").VvIconProps;
     iconPosition: "before" | "after";
-}, {}>, {
-    header?(_: {}): any;
-    "title::before"?(_: {}): any;
-    title?(_: {}): any;
-    "title::after"?(_: {}): any;
-    close?(_: {
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
+    header?: (props: {}) => any;
+} & {
+    'title::before'?: (props: {}) => any;
+} & {
+    title?: (props: {}) => any;
+} & {
+    'title::after'?: (props: {}) => any;
+} & {
+    close?: (props: {
         close: () => void;
-    }): any;
-    default?(_: {}): any;
-    footer?(_: {}): any;
+    }) => any;
+} & {
+    default?: (props: {}) => any;
+} & {
+    footer?: (props: {}) => any;
 }>;
+declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

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

@@ -1,5 +1,14 @@
 import type { ExtractPropTypes, PropType } from 'vue';
+import type { AlertModifier } from '@/types';
+import { AlertRole } from '@/constants';
 export declare const VvAlertProps: {
+    /**
+     * Component BEM modifiers
+     */
+    modifiers: {
+        type: PropType<AlertModifier | AlertModifier[]>;
+        default: undefined;
+    };
     /**
      * The alert is dismissable
      * @default false
@@ -63,28 +72,28 @@ export declare const VvAlertProps: {
      * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Alertdialog_role
      */
     role: {
-        type: PropType<"alert" | "alertdialog">;
-        default: string;
+        type: PropType<`${AlertRole}`>;
+        default: AlertRole;
     };
     icon: {
-        type: (ObjectConstructor | StringConstructor)[];
+        type: PropType<string | import("../VvIcon").VvIconProps>;
+        default: undefined;
     };
     iconPosition: {
-        type: PropType<"before" | "after">;
-        default: import("../../constants").Position;
-        validation: (value: import("../../constants").Position) => boolean;
+        type: PropType<`${import("@/constants").Position}`>;
+        default: import("@/constants").Position;
+        validation: (value: import("@/constants").Position) => boolean;
     };
-    modifiers: PropType<string | string[]>;
     id: (StringConstructor | NumberConstructor)[];
 };
 export declare const VvAlertEvents: string[];
-export declare const useVvAlert: (props: Readonly<ExtractPropTypes<typeof VvAlertProps>>, emit: (event: string, ...args: unknown[]) => void) => {
+export declare function useVvAlert(props: Readonly<ExtractPropTypes<typeof VvAlertProps>>, emit: (event: string, ...args: unknown[]) => void): {
     close: () => void;
-    hasIcon: globalThis.ComputedRef<Record<string, any> | undefined>;
+    hasIcon: globalThis.ComputedRef<import("../VvIcon").VvIconProps | undefined>;
     hasTitleId: globalThis.ComputedRef<string>;
     hasProps: globalThis.ComputedRef<{
-        onMouseover: (event: Event, ...args: unknown[]) => any;
-        onMouseleave: (event: Event, ...args: unknown[]) => any;
+        onMouseover: () => void;
+        onMouseleave: () => void;
         class: Record<string, boolean>;
         style: {
             '--alert-duration': string;