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

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

import{provide as e,computed as t,unref as o,inject as l,useId as a,watch as r,ref as i,defineComponent as n,mergeDefaults as s,toRefs as u,createBlock as v,createCommentVNode as c,openBlock as f,mergeProps as d,createElementBlock as p,normalizeProps as m,guardReactiveProps as b,renderSlot as h,createTextVNode as y,toDisplayString as g,withModifiers as $,createElementVNode as k,createVNode as S,TransitionGroup as w,toHandlers as _,withCtx as x,Fragment as C,renderList as I}from"vue";import L from"mitt";import{iconLoaded as T,Icon as B,addIcon as A}from"@iconify/vue";const F={prefix:"normal"};var E=/* @__PURE__ */(e=>(e.local="local",e.session="session",e))(E||{}),P=/* @__PURE__ */(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(P||{}),M=/* @__PURE__ */(e=>(e.before="before",e.after="after",e))(M||{}),O=/* @__PURE__ */(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(O||{}),V=/* @__PURE__ */(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(V||{}),j=/* @__PURE__ */(e=>(e.alert="alert",e.alertdialog="alertdialog",e))(j||{});const q=Symbol.for("volver"),z=Symbol.for("alertGroup"),D={modifiers:{type:[String,Array],default:void 0}},G={icon:{type:[String,Object],default:void 0},iconPosition:{type:String,default:M.before,validation:e=>Object.values(M).includes(e)}},N={id:[String,Number]};function H(e,l,a){return t(()=>{const t={[e]:!0},r="string"==typeof l?.value?l.value.split(" "):l?.value;return r&&Array.isArray(r)&&r.forEach(o=>{o&&(t[`${e}--${o}`]=!0)}),a&&Object.keys(a.value).forEach(l=>{t[`${e}--${l}`]=o(a.value[l])}),t})}P.bottom,O.button,V.button,E.local;const J={...D,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 R(o,l){const a=function({name:t}){const o=L();return e(z,{name:t,bus:o}),o}({name:t(()=>o.name)});(o.block&&!o.inline||!o.block&&o.inline)&&console.warn("[VvAlertGroup]: block and inline props must coexist at the same time.");const r=t(()=>{const e=[H("vv-alert-group",t(()=>o.modifiers),t(()=>({stack:o.stack,reverse:o.reverse,absolute:"absolute"===o.position,fixed:"fixed"===o.position}))).value];return o.inline&&o.block&&e.push(`vv-alert-group--${o.block}-${o.inline}`),e}),i=t(()=>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 a.on("close",e=>{l("close",e)}),{hasTransition:i,hasProps:t(()=>({class:r.value}))}}const K={...N,...G,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:j.alert}};function Q(e,o){const{bus:n}=l(z,{}),s=(u=t(()=>e.id),t(()=>String(u?.value||a())));var u;const v=t(()=>`${s.value}-title`);let c;const f=()=>{c&&clearTimeout(c),o("close",s.value),n?.emit("close",s.value)};r(()=>e.autoClose,e=>{e>0?c=setTimeout(f,e):c&&clearTimeout(c)},{immediate:!0});const d=i(!1),p=()=>{d.value=!0,c&&clearTimeout(c)},m=()=>{d.value=!1,e.autoClose>0&&(c=setTimeout(f,e.autoClose))},{hasIcon:b}=function(e,o){const l=t(()=>"string"==typeof e?.value?{name:e?.value}:e?.value),a=t(()=>o?.value===M.before?l.value:void 0),r=t(()=>o?.value===M.after?l.value:void 0),i=t(()=>o?.value===P.left?l.value:void 0),n=t(()=>o?.value===P.right?l.value:void 0),s=t(()=>o?.value===P.top?l.value:void 0),u=t(()=>o?.value===P.bottom?l.value:void 0);return{hasIcon:l,hasIconLeft:i,hasIconRight:n,hasIconTop:s,hasIconBottom:u,hasIconBefore:a,hasIconAfter:r}}(t(()=>e.icon)),h=H("vv-alert",t(()=>e.modifiers),t(()=>({dismissable:e.autoClose>0||e.dismissable,"auto-close":e.autoClose>0,hover:d.value}))),y=t(()=>({"--alert-duration":`${e.autoClose}ms`}));return{close:f,hasIcon:b,hasTitleId:v,hasProps:t(()=>({onMouseover:p,onMouseleave:m,class:h.value,style:y.value,role:e.role,"aria-labelledby":v.value}))}}const U=/* @__PURE__ */n({name:"VvIcon",props:/* @__PURE__ */s({name:{},color:{},width:{},height:{},provider:{},prefix:{},src:{},horizontalFlip:{type:Boolean},verticalFlip:{type:Boolean},flip:{},mode:{},inline:{type:Boolean},rotate:{},onLoad:{type:Function},svg:{},modifiers:{}},F),setup(e){const a=e,r=t(()=>"string"==typeof a.rotate?Number.parseFloat(a.rotate):a.rotate),n=i(!0),s=l(q,void 0),{modifiers:p}=u(a),m=H("vv-icon",p),b=t(()=>a.provider||s?.iconsProvider),h=t(()=>{const e=a.name??"",t=`@${b.value}:${a.prefix}:${e}`;if(T(t))return t;const o=s?.iconsCollections.find(t=>{const o=`@${b.value}:${t.prefix}:${e}`;return T(o)});return o?`@${b.value}:${o.prefix}:${e}`:e});function y(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),o=t?.innerHTML.trim()||"";t&&o&&A(`@${b.value}:${a.prefix}:${a.name}`,{body:o,height:t.viewBox.baseVal.height,width:t.viewBox.baseVal.width})}return s&&a.src&&!T(`@${b.value}:${a.prefix}:${a.name}`)&&(n.value=!1,s.fetchIcon(a.src).then(e=>{e&&(y(e),n.value=!0)}).catch(e=>{throw new Error(`Error during fetch icon: ${e?.message}`)})),a.svg&&y(a.svg),(t,l)=>o(n)?(f(),v(o(B),d({key:0,class:o(m)},{inline:e.inline,width:e.width,height:e.height,horizontalFlip:e.horizontalFlip,verticalFlip:e.verticalFlip,flip:e.flip,rotate:o(r),color:e.color,icon:o(h)},{onLoad:e.onLoad}),null,16,["class","onLoad"])):c("v-if",!0)}}),W={key:0,class:"vv-alert__header"},X=["id"],Y=["aria-label"],Z={key:1,class:"vv-alert__content"},ee={key:2,class:"vv-alert__footer"},te=/* @__PURE__ */n({name:"VvAlert",props:K,emits:["close"],setup(e,{expose:t,emit:l}){const a=e,r=l,{hasProps:i,hasTitleId:n,hasIcon:s,close:u}=Q(a,r);return t({close:u}),(e,t)=>(f(),p("div",m(b(o(i))),[e.$slots.header||e.$slots.title||e.$slots.close||e.$slots["title::before"]||e.$slots["title::after"]||e.title||o(s)||e.dismissable||e.autoClose?(f(),p("div",W,[o(s)?(f(),v(U,d({key:0},o(s),{class:"vv-alert__icon"}),null,16)):c("v-if",!0),h(e.$slots,"header",{},()=>[h(e.$slots,"title::before"),e.$slots.title||e.title?(f(),p("strong",{key:0,id:o(n),class:"vv-alert__title"},[h(e.$slots,"title",{},()=>[y(g(e.title),1)])],8,X)):c("v-if",!0),h(e.$slots,"title::after")]),h(e.$slots,"close",m(b({close:o(u)})),()=>[e.dismissable||e.autoClose?(f(),p("button",{key:0,class:"vv-alert__close",type:"button","aria-label":e.closeLabel,onClick:t[0]||(t[0]=$((...e)=>o(u)&&o(u)(...e),["stop"]))},[...t[1]||(t[1]=[k("div",{class:"vv-alert__close-mask"},null,-1)])],8,Y)):c("v-if",!0)])])):c("v-if",!0),e.$slots.default||e.content?(f(),p("div",Z,[h(e.$slots,"default",{},()=>[y(g(e.content),1)])])):c("v-if",!0),e.$slots.footer||e.footer?(f(),p("div",ee,[h(e.$slots,"footer",{},()=>[y(g(e.footer),1)])])):c("v-if",!0)],16))}}),oe=/* @__PURE__ */n({name:"VvAlertGroup",props:J,emits:["close","beforeEnter","afterLeave","enter","afterEnter","enterCancelled","beforeLeave","leave","leaveCancelled"],setup(e,{emit:t}){const l=e,a=t,{hasProps:r,hasTransition:i}=R(l,a),n={"before-enter":()=>{a("beforeEnter")},"after-leave":()=>{a("afterLeave")},enter:()=>{a("enter")},"after-enter":()=>{a("afterEnter")},"enter-cancelled":()=>{a("enterCancelled")},"before-leave":()=>{a("beforeLeave")},leave:()=>{a("leave")},"leave-cancelled":()=>{a("leaveCancelled")}};return(e,t)=>(f(),p("div",m(b(o(r))),[h(e.$slots,"before"),S(w,d({tag:"div",role:"group",name:o(i),class:"vv-alert-group__list"},_(n)),{default:x(()=>[h(e.$slots,"default",{},()=>[(f(!0),p(C,null,I(e.items,e=>(f(),v(te,d({ref_for:!0},e,{key:e.id}),null,16))),128))])]),_:3},16,["name"]),h(e.$slots,"after")],16))}});export{oe as default};