vue3-snackbar
Version:
<p align="center"> <a href="https://evomark.co.uk" target="_blank" alt="Link to evoMark's website"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://evomark.co.uk/wp-content/uploads/static/evomark-logo--dark.svg
2 lines (1 loc) • 14.8 kB
JavaScript
;Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue");var O="M8.27,3L3,8.27V15.73L8.27,21H15.73C17.5,19.24 21,15.73 21,15.73V8.27L15.73,3M9.1,5H14.9L19,9.1V14.9L14.9,19H9.1L5,14.9V9.1M11,15H13V17H11V15M11,7H13V13H11V7",I="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16",_="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z",T="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z",D="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z";const z={transform:"rotate(var(--r, 0deg)) scale(var(--sx, 1), var(--sy, 1))"},M={mdi:{size:24,viewbox:"0 0 24 24"},"simple-icons":{size:24,viewbox:"0 0 24 24"},default:{size:0,viewbox:"0 0 0 0"}},H={props:{type:{type:String,required:!0},path:{type:[String,Object,Array],required:!1},pathString:{type:[Array,String,Object],required:!1}},setup(s){return()=>s.type==="fad"?(console.warn("vue3-icon does not currently support Duotone FontAwesome icons"),t.h("path")):Array.isArray(s.path)?t.h("g",{style:{fill:"currentcolor"}},s.path.map(o=>typeof o=="string"?t.h("path",{d:o}):t.h("path",{...o}))):t.h("path",{d:s.pathString,style:{fill:"currentcolor"}})}},V={name:"icon",props:{type:{type:String,default:"mdi"},faIcon:{type:Object,default:null},path:{type:[String,Object,Array]},size:{type:[Number,String],default:24},viewbox:{type:String,required:!1},flip:{type:String,default:"",validator:s=>["","horizontal","vertical","both"].includes(s)},rotate:{type:[Number,String],default:0},noNamespace:{type:Boolean,default:!1},noStyles:{type:Boolean,default:!1},noDimensions:{type:Boolean,default:!1}},setup(s){if(!s.path&&!s.faIcon)return console.warn("vue3-icon requires either a 'path' or an 'fa-icon' property"),()=>t.h("div");const o=t.computed(()=>{var m;return((m=s.faIcon)==null?void 0:m.prefix)||s.type}),n=t.computed(()=>parseInt(s.rotate,10)),e=t.computed(()=>M[o.value]||M.default),a=t.computed(()=>parseInt(s.size,10)||e.value.size),l=t.computed(()=>s.faIcon?`0 0 ${s.faIcon.icon[0]} ${s.faIcon.icon[1]}`:!1),u=t.computed(()=>l.value||s.viewbox||e.value.viewbox),f=t.computed(()=>{if(s.noStyles!==!0)return{...z,"--sx":["both","horizontal"].includes(s.flip)?"-1":"1","--sy":["both","vertical"].includes(s.flip)?"-1":"1","--r":isNaN(n.value)?n.value:n.value+"deg"}}),p=t.computed(()=>{var m;return s.faIcon?(m=s.faIcon)==null?void 0:m.icon[4]:s.type==="simple-icons"&&typeof s.path=="object"?s.path.path:s.path});return()=>t.h("svg",{xmlns:s.noNamespace!==!0?"http://www.w3.org/2000/svg":void 0,style:f.value,class:["vue3-icon"],width:s.noDimensions!==!0?a.value:void 0,height:s.noDimensions!==!0?a.value:void 0,viewBox:u.value},[t.h(H,{path:s.path,type:o.value,pathString:p.value})])}},j=["role"],q={class:"vue3-snackbar-message-wrapper"},R={key:0,class:"vue3-snackbar-message-icon"},P={class:"vue3-snackbar-message-content"},W={key:0,class:"vue3-snackbar-message-badge"},F={class:"vue3-snackbar-message-title"},Z={key:0,class:"vue3-snackbar-message-additional"},G={class:"vue3-snackbar-message-close"},U={__name:"Vue3SnackbarMessage",props:{borderClass:{type:String,default:""},message:{type:Object,default:()=>({})},messageClass:{type:String,default:""},messageActionClass:{type:String,default:"vue3-snackbar-message-action"},dense:{type:Boolean,default:!1},iconPresets:{type:Object,required:!0}},emits:["dismiss","click:action"],setup(s,{emit:o}){const n=o,e=s;let a=null,l=null,u=t.ref(!1);const f=()=>{if((e.message.duration===0||e.message.duration==="0")&&e.message.dismissible!==!1)return;const c=!e.message.duration&&!e.message.dismissible?4e3:e.message.duration;a=setTimeout(m,c)};t.onMounted(f),t.watch(()=>e.message.count,i=>{if(i===1)return!1;clearTimeout(a),clearTimeout(l),l=setTimeout(()=>{u.value=!1},1e3),u.value=!0,f()});const p=()=>{a&&clearTimeout(a),m()},m=()=>{n("dismiss",e.message)},b=t.computed(()=>Object.assign({},{success:{path:_},info:{path:D},warning:{path:I},error:{path:O}},e.iconPresets)),v=t.computed(()=>{const i=b.value[e.message.type];return e.message.type&&!i&&console.warn("[Vue3 Snackbar] Couldn't find icon preset for type "+e.message.type),i?(i.type="mdi",i):e.message.icon&&typeof e.message.icon=="object"?e.message.icon:{path:"",type:"default"}}),y=t.computed(()=>{var i;return e.message.type==="error"?"alert":((i=e.message)==null?void 0:i.role)??"status"}),r={name:"RenderedAction",render(){const i=t.computed(()=>t.toRaw(e.message.action));return i.value?t.h(i.value,{message:e.message,isDismissible:e.message.isDismissible,dismiss:p}):null}};return(i,c)=>(t.openBlock(),t.createElementBlock("article",{class:t.normalizeClass(["vue3-snackbar-message",[e.message.type||"custom",e.messageClass,e.borderClass,{"has-background":e.message.background,"has-border":e.borderClass,"is-dense":e.dense,"shake-baby-shake":t.unref(u)}]]),role:y.value,style:t.normalizeStyle({"--message-background":e.message.background,"--message-text-color":e.message.textColor,"--message-icon-color":e.message.iconColor})},[t.renderSlot(i.$slots,"message-inner",{message:e.message},()=>[t.createElementVNode("div",q,[v.value?(t.openBlock(),t.createElementBlock("div",R,[t.renderSlot(i.$slots,"message-icon",{message:e.message,icon:v.value},()=>[t.createVNode(t.unref(V),t.mergeProps(v.value,{role:"img"}),null,16)])])):t.createCommentVNode("",!0),t.createElementVNode("div",P,[t.renderSlot(i.$slots,"message-badge",{message:e.message,count:e.message.count},()=>[e.message.count>1?(t.openBlock(),t.createElementBlock("div",W,t.toDisplayString(e.message.count),1)):t.createCommentVNode("",!0)]),t.renderSlot(i.$slots,"message-content",{message:e.message,title:e.message.title,text:e.message.text},()=>[t.createElementVNode("div",F,t.toDisplayString(e.message.title||e.message.text),1),e.message.title&&e.message.text?(t.openBlock(),t.createElementBlock("div",Z,t.toDisplayString(e.message.text),1)):t.createCommentVNode("",!0)]),i.$slots["message-action"]?(t.openBlock(),t.createElementBlock("div",{key:0,class:t.normalizeClass(e.messageActionClass),onClick:c[0]||(c[0]=t.withModifiers(d=>n("click:action",{message:e.message}),["stop"]))},[t.renderSlot(i.$slots,"message-action",{message:e.message,isDismissible:e.message.dismissible,dismiss:p},()=>[t.createVNode(r)])],2)):t.createCommentVNode("",!0)]),c[1]||(c[1]=t.createElementVNode("div",{class:"spacer"},null,-1)),t.createElementVNode("div",G,[t.renderSlot(i.$slots,"message-close-icon",{message:e.message,isDimissible:e.message.dismissible,isDismissible:e.message.dismissible,dismiss:p},()=>[e.message.dismissible!==!1?(t.openBlock(),t.createElementBlock("button",{key:0,onClick:t.withModifiers(p,["stop"])},[t.createVNode(t.unref(V),{type:"mdi",path:t.unref(T)},null,8,["path"])])):t.createCommentVNode("",!0)])])])])],14,j))}},J=typeof window<"u"?HTMLElement:Object,K={top:{type:Boolean,default:!1},bottom:{type:Boolean,default:!1},left:{type:Boolean,default:!1},right:{type:Boolean,default:!1},start:{type:Boolean,default:!1},end:{type:Boolean,default:!1},success:{type:String,default:"#4caf50"},error:{type:String,default:"#ff5252"},warning:{type:String,default:"#fb8c00"},info:{type:String,default:"#2196f3"},iconPresets:{type:Object,default:()=>({})},messageTextColor:{type:String,default:"#fff"},messageIconColor:{type:String,default:"currentColor"},backgroundOpacity:{type:[String,Number],default:.12,validator:s=>!isNaN(parseFloat(s))&&isFinite(s)},backgroundColor:{type:String,default:"currentColor"},baseBackgroundColor:{type:String,default:"#fff"},duration:{type:[Number,String],default:null},reverse:{type:Boolean,default:!1},limit:{type:Number,default:null},dismissOnActionClick:{type:Boolean,default:!0},groups:{type:Boolean,default:!1},attach:{type:[String,J],default:"body"},border:{type:String,default:"",validator:s=>["top","bottom","left","right","start","end",""].includes(s)},messageClass:{type:String},messageActionClass:{type:String,default:"vue3-snackbar-message-action"},zIndex:{type:Number,default:1e4},dense:{type:Boolean,default:!1},shadow:{type:[Boolean,String],default:!1,validator:s=>s===!0||s===!1||["xs","sm","md","lg","xl","2xl"].includes(s)},contentWidth:{type:String,default:"min(50vw, 350px)"},borderWidth:{type:[String,Number],default:8}};function Q(s){return s&&s.__esModule&&Object.prototype.hasOwnProperty.call(s,"default")?s.default:s}var w={exports:{}},x;function X(){if(x)return w.exports;x=1;function s(){}return s.prototype={on:function(o,n,e){var a=this.e||(this.e={});return(a[o]||(a[o]=[])).push({fn:n,ctx:e}),this},once:function(o,n,e){var a=this;function l(){a.off(o,l),n.apply(e,arguments)}return l._=n,this.on(o,l,e)},emit:function(o){var n=[].slice.call(arguments,1),e=((this.e||(this.e={}))[o]||[]).slice(),a=0,l=e.length;for(a;a<l;a++)e[a].fn.apply(e[a].ctx,n);return this},off:function(o,n){var e=this.e||(this.e={}),a=e[o],l=[];if(a&&n)for(var u=0,f=a.length;u<f;u++)a[u].fn!==n&&a[u].fn._!==n&&l.push(a[u]);return l.length?e[o]=l:delete e[o],this}},w.exports=s,w.exports.TinyEmitter=s,w.exports}var B,A;function Y(){if(A)return B;A=1;var s=X();return B=new s,B}var ee=Y();const C=Q(ee),S={$on:(...s)=>C.on(...s),$once:(...s)=>C.once(...s),$off:(...s)=>C.off(...s),$emit:(...s)=>C.emit(...s)},k=t.ref([]),$=Symbol(),te=s=>Math.abs(s.split("").reduce((o,n)=>(o<<5)-o+n.charCodeAt(0)|0,0));let L=1;S.$on("add",s=>{s={...s},s.group||(s.group=te(`${s.type}${s.title}${s.text}`).toString(16)),s.id=L,L++,k.value.push(s)});function se(){const s=t.inject($);if(!s)throw new Error("No Snackbar provided!");return s}const oe={install:(s,o={})=>{const{disableGlobals:n=!1}=o,e={add:a=>{S.$emit("add",a)},clear:()=>{S.$emit("clear")}};n!==!0&&(s.config.globalProperties.$snackbar=e,typeof window<"u"&&(window.$snackbar=e)),s.provide($,e)}};function ae(s){return t.getCurrentScope()?(t.onScopeDispose(s),!0):!1}const N=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const ne=s=>s!=null;function re(s){return Array.isArray(s)?s:[s]}function ie(s){return t.getCurrentInstance()}function le(s,o=!0,n){ie()?t.onMounted(s,n):o?s():t.nextTick(s)}const ue=N?window:void 0,ce=N?window.document:void 0;function de(s){var o;const n=t.toValue(s);return(o=n==null?void 0:n.$el)!=null?o:n}function me(){const s=t.shallowRef(!1),o=t.getCurrentInstance();return o&&t.onMounted(()=>{s.value=!0},o),s}function fe(s){const o=me();return t.computed(()=>(o.value,!!s()))}function pe(s,o,n={}){const{window:e=ue,...a}=n;let l;const u=fe(()=>e&&"MutationObserver"in e),f=()=>{l&&(l.disconnect(),l=void 0)},p=t.computed(()=>{const y=t.toValue(s),r=re(y).map(de).filter(ne);return new Set(r)}),m=t.watch(()=>p.value,y=>{f(),u.value&&y.size&&(l=new MutationObserver(o),y.forEach(r=>l.observe(r,a)))},{immediate:!0,flush:"post"}),b=()=>l==null?void 0:l.takeRecords(),v=()=>{m(),f()};return ae(v),{isSupported:u,stop:v,takeRecords:b}}function ge(s={}){const{document:o=ce,selector:n="html",observe:e=!1,initialValue:a="ltr"}=s;function l(){var f,p;return(p=(f=o==null?void 0:o.querySelector(n))==null?void 0:f.getAttribute("dir"))!=null?p:a}const u=t.ref(l());return le(()=>u.value=l()),e&&o&&pe(o.querySelector(n),()=>u.value=l(),{attributes:!0}),t.computed({get(){return u.value},set(f){var p,m;u.value=f,o&&(u.value?(p=o.querySelector(n))==null||p.setAttribute("dir",u.value):(m=o.querySelector(n))==null||m.removeAttribute("dir"))}})}const ve={__name:"Vue3Snackbar",props:{...K},emits:["added","group-added","dismissed","removed","cleared","click:action"],setup(s,{emit:o}){const n=ge(),e=s,a=o,l=t.computed(()=>((e.left||e.right)&&(e.start||e.end)&&console.warn("[Vue3 Snackbar] The left/right and start/end position properties should not be used together."),{"is-top":e.top,"is-bottom":e.top===!1&&e.bottom,"is-left":e.left,"is-right":e.left===!1&&e.right,"is-start":e.start,"is-end":e.start===!1&&e.end,"is-middle":e.top===!1&&e.bottom===!1,"is-centre":["left","right","start","end"].every(r=>e[r]===!1),"shadow-md":e.shadow===!0,[`shadow-${e.shadow}`]:typeof e.shadow=="string","is-rtl":n.value==="rtl"})),u=r=>typeof r=="number"||/[^\d]/.test(r)===!1?`${r}px`:r,f=t.computed(()=>({"--success-colour":e.success,"--error-colour":e.error,"--warning-colour":e.warning,"--info-colour":e.info,"--snackbar-zindex":e.zIndex,"--background-opacity":e.backgroundOpacity,"--background-color":e.backgroundColor,"--base-background-color":e.baseBackgroundColor,"--message-text-color":e.messageTextColor,"--message-icon-color":e.messageIconColor,"--snackbar-content-width":e.contentWidth,"--snackbar-border-width":u(e.borderWidth)})),p=t.computed(()=>e.border?`border-${e.border}`:""),m=(r,i=!1)=>{Object.hasOwn(r,"onRemoved")&&typeof r.onRemoved=="function"&&r.onRemoved(r,i),a(i?"dismissed":"removed",r),k.value=k.value.filter(c=>e.groups?c.group!==r.group:c.id!==r.id)},b=t.computed(()=>{const i=[...k.value].reduce((c,d)=>{e.duration&&!d.duration&&d.duration!==0&&(d.duration=+e.duration);const g=e.groups?d.group:d.id;if(c.has(g)){const h=c.get(g);d.count=h.count+1,d.id=h.id,c.set(g,d),a("group-added",d)}else d.count=1,a("added",d),c.set(g,d);return c},new Map);return Array.from(i.values())}),v=t.computed(()=>{const r=e.limit?b.value.slice(e.limit*-1):b.value;return e.reverse?r.reverse():r});t.watch(v,r=>{const i=r.map(g=>g.id),d=b.value.map(g=>g.id).filter(g=>!i.includes(g));for(const g of d){const h=b.value.find(E=>E.id===g);h&&m(h,!1)}},{immediate:!0}),S.$on("clear",()=>{a("cleared"),k.value=[]}),t.onUnmounted(()=>{S.$off("add"),S.$off("clear")});const y=r=>{a("click:action",r),e.dismissOnActionClick&&m(r.message,!0)};return(r,i)=>(t.openBlock(),t.createBlock(t.Teleport,{to:e.attach},[t.createElementVNode("section",{id:"vue3-snackbar--container",class:t.normalizeClass(["vue3-snackbar",[l.value]]),style:t.normalizeStyle(f.value),"aria-live":"polite"},[t.createVNode(t.TransitionGroup,{name:"vue3-snackbar-message",tag:"div",class:"vue3-snackbar--messages"},{default:t.withCtx(()=>[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(v.value,c=>(t.openBlock(),t.createBlock(U,{key:c.id,message:c,"message-class":e.messageClass,"message-action-class":e.messageActionClass,dense:e.dense,"border-class":p.value,"icon-presets":e.iconPresets,onDismiss:i[0]||(i[0]=d=>m(d,!0)),"onClick:action":y},t.createSlots({_:2},[t.renderList(r.$slots,(d,g)=>({name:g,fn:t.withCtx(h=>[t.renderSlot(r.$slots,g,t.mergeProps({ref_for:!0},h))])}))]),1032,["message","message-class","message-action-class","dense","border-class","icon-presets"]))),128))]),_:3})],6)],8,["to"]))}};exports.SnackbarMessages=k;exports.SnackbarService=oe;exports.Vue3Snackbar=ve;exports.useSnackbar=se;