@volverjs/ui-vue/dist/components/VvAlertGroup/VvAlertGroup.umd.js

@volverjs/ui-vue is a lightweight Vue 3 component library to accompany @volverjs/style.

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue"),require("mitt"),require("@iconify/vue")):"function"==typeof define&&define.amd?define(["vue","mitt","@iconify/vue"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).VvAlertGroup=t(e.vue,e.mitt,e.vue$1)}(this,function(e,t,o){"use strict";const r={prefix:"normal"};var l=(e=>(e.local="local",e.session="session",e))(l||{}),n=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(n||{}),a=(e=>(e.before="before",e.after="after",e))(a||{}),i=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(i||{}),s=(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(s||{}),c=(e=>(e.alert="alert",e.alertdialog="alertdialog",e))(c||{});const u=Symbol.for("volver"),d=Symbol.for("alertGroup"),v={modifiers:{type:[String,Array],default:void 0}},f={icon:{type:[String,Object],default:void 0},iconPosition:{type:String,default:a.before,validation:e=>Object.values(a).includes(e)}},p={id:[String,Number]};function m(t,o,r){return e.computed(()=>{const l={[t]:!0},n="string"==typeof o?.value?o.value.split(" "):o?.value;return n&&Array.isArray(n)&&n.forEach(e=>{e&&(l[`${t}--${e}`]=!0)}),r&&Object.keys(r.value).forEach(o=>{l[`${t}--${o}`]=e.unref(r.value[o])}),l})}n.bottom,i.button,s.button,l.local;const b={...v,name:{type:String,required:!0},items:{type:Array,default:()=>[]},stack:{type:Boolean,default:!1},reverse:{type:Boolean,default:!1},inline:{type:String,default:void 0},block:{type:String,default:void 0},position:{type:String,default:void 0},transition:{type:String,default:void 0}};function h(o,r){const l=function({name:o}){const r=t();return e.provide(d,{name:o,bus:r}),r}({name:e.computed(()=>o.name)});(o.block&&!o.inline||!o.block&&o.inline)&&console.warn("[VvAlertGroup]: block and inline props must coexist at the same time.");const n=e.computed(()=>{const t=[m("vv-alert-group",e.computed(()=>o.modifiers),e.computed(()=>({stack:o.stack,reverse:o.reverse,absolute:"absolute"===o.position,fixed:"fixed"===o.position}))).value];return o.inline&&o.block&&t.push(`vv-alert-group--${o.block}-${o.inline}`),t}),a=e.computed(()=>o.transition?o.transition:o.position?"start"===o.inline?"vv-alert--fade-inline-start":"end"===o.inline?"vv-alert--fade-inline-end":"top"===o.block?"vv-alert--fade-block-top":"bottom"===o.block?"vv-alert--fade-block-bottom":"vv-alert--fade":"vv-alert--fade");return l.on("close",e=>{r("close",e)}),{hasTransition:a,hasProps:e.computed(()=>({class:n.value}))}}const g={...p,...f,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:c.alert}};function y(t,o){const{bus:r}=e.inject(d,{}),l=(i=e.computed(()=>t.id),e.computed(()=>String(i?.value||e.useId())));var i;const s=e.computed(()=>`${l.value}-title`);let c;const u=()=>{c&&clearTimeout(c),o("close",l.value),r?.emit("close",l.value)};e.watch(()=>t.autoClose,e=>{e>0?c=setTimeout(u,e):c&&clearTimeout(c)},{immediate:!0});const v=e.ref(!1),f=()=>{v.value=!0,c&&clearTimeout(c)},p=()=>{v.value=!1,t.autoClose>0&&(c=setTimeout(u,t.autoClose))},{hasIcon:b}=function(t,o){const r=e.computed(()=>"string"==typeof t?.value?{name:t?.value}:t?.value),l=e.computed(()=>o?.value===a.before?r.value:void 0),i=e.computed(()=>o?.value===a.after?r.value:void 0),s=e.computed(()=>o?.value===n.left?r.value:void 0),c=e.computed(()=>o?.value===n.right?r.value:void 0),u=e.computed(()=>o?.value===n.top?r.value:void 0),d=e.computed(()=>o?.value===n.bottom?r.value:void 0);return{hasIcon:r,hasIconLeft:s,hasIconRight:c,hasIconTop:u,hasIconBottom:d,hasIconBefore:l,hasIconAfter:i}}(e.computed(()=>t.icon)),h=m("vv-alert",e.computed(()=>t.modifiers),e.computed(()=>({dismissable:t.autoClose>0||t.dismissable,"auto-close":t.autoClose>0,hover:v.value}))),g=e.computed(()=>({"--alert-duration":`${t.autoClose}ms`}));return{close:u,hasIcon:b,hasTitleId:s,hasProps:e.computed(()=>({onMouseover:f,onMouseleave:p,class:h.value,style:g.value,role:t.role,"aria-labelledby":s.value}))}}const k=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:{}},r),setup(t){const r=t,l=e.computed(()=>"string"==typeof r.rotate?Number.parseFloat(r.rotate):r.rotate),n=e.ref(!0),a=e.inject(u,void 0),{modifiers:i}=e.toRefs(r),s=m("vv-icon",i),c=e.computed(()=>r.provider||a?.iconsProvider),d=e.computed(()=>{const e=r.name??"",t=`@${c.value}:${r.prefix}:${e}`;if(o.iconLoaded(t))return t;const l=a?.iconsCollections.find(t=>{const r=`@${c.value}:${t.prefix}:${e}`;return o.iconLoaded(r)});return l?`@${c.value}:${l.prefix}:${e}`:e});function v(e){const t=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),l=t?.innerHTML.trim()||"";t&&l&&o.addIcon(`@${c.value}:${r.prefix}:${r.name}`,{body:l,height:t.viewBox.baseVal.height,width:t.viewBox.baseVal.width})}return a&&r.src&&!o.iconLoaded(`@${c.value}:${r.prefix}:${r.name}`)&&(n.value=!1,a.fetchIcon(r.src).then(e=>{e&&(v(e),n.value=!0)}).catch(e=>{throw new Error(`Error during fetch icon: ${e?.message}`)})),r.svg&&v(r.svg),(r,a)=>e.unref(n)?(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(l),color:t.color,icon:e.unref(d)},{onLoad:t.onLoad}),null,16,["class","onLoad"])):e.createCommentVNode("v-if",!0)}}),$={key:0,class:"vv-alert__header"},S=["id"],B=["aria-label"],C={key:1,class:"vv-alert__content"},w={key:2,class:"vv-alert__footer"},x=e.defineComponent({name:"VvAlert",props:g,emits:["close"],setup(t,{expose:o,emit:r}){const l=t,n=r,{hasProps:a,hasTitleId:i,hasIcon:s,close:c}=y(l,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",$,[e.unref(s)?(e.openBlock(),e.createBlock(k,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,S)):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,B)):e.createCommentVNode("v-if",!0)])])):e.createCommentVNode("v-if",!0),t.$slots.default||t.content?(e.openBlock(),e.createElementBlock("div",C,[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",w,[e.renderSlot(t.$slots,"footer",{},()=>[e.createTextVNode(e.toDisplayString(t.footer),1)])])):e.createCommentVNode("v-if",!0)],16))}});return e.defineComponent({name:"VvAlertGroup",props:b,emits:["close","beforeEnter","afterLeave","enter","afterEnter","enterCancelled","beforeLeave","leave","leaveCancelled"],setup(t,{emit:o}){const r=t,l=o,{hasProps:n,hasTransition:a}=h(r,l),i={"before-enter":()=>{l("beforeEnter")},"after-leave":()=>{l("afterLeave")},enter:()=>{l("enter")},"after-enter":()=>{l("afterEnter")},"enter-cancelled":()=>{l("enterCancelled")},"before-leave":()=>{l("beforeLeave")},leave:()=>{l("leave")},"leave-cancelled":()=>{l("leaveCancelled")}};return(t,o)=>(e.openBlock(),e.createElementBlock("div",e.normalizeProps(e.guardReactiveProps(e.unref(n))),[e.renderSlot(t.$slots,"before"),e.createVNode(e.TransitionGroup,e.mergeProps({tag:"div",role:"group",name:e.unref(a),class:"vv-alert-group__list"},e.toHandlers(i)),{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default",{},()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.items,t=>(e.openBlock(),e.createBlock(x,e.mergeProps({ref_for:!0},t,{key:t.id}),null,16))),128))])]),_:3},16,["name"]),e.renderSlot(t.$slots,"after")],16))}})});