@volverjs/ui-vue 0.0.10-beta.5 → 0.0.10-beta.50

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

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

@@ -1,5 +1,14 @@
+import type { AlertModifier } from '@/types';
 import type { ExtractPropTypes, PropType } from 'vue';
+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;