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
var Vue3Snackbar=function(S,t){"use strict";var x="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 H={transform:"rotate(var(--r, 0deg)) scale(var(--sx, 1), var(--sy, 1))"},v={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"}},z={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"}})}},L={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(()=>v[o.value]||v.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),c=t.computed(()=>l.value||s.viewbox||e.value.viewbox),f=t.computed(()=>{if(s.noStyles!==!0)return{...H,"--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:c.value},[t.h(z,{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,c=t.ref(!1);const f=()=>{if((e.message.duration===0||e.message.duration==="0")&&e.message.dismissible!==!1)return;const d=!e.message.duration&&!e.message.dismissible?4e3:e.message.duration;a=setTimeout(m,d)};t.onMounted(f),t.watch(()=>e.message.count,i=>{if(i===1)return!1;clearTimeout(a),clearTimeout(l),l=setTimeout(()=>{c.value=!1},1e3),c.value=!0,f()});const p=()=>{a&&clearTimeout(a),m()},m=()=>{n("dismiss",e.message)},y=t.computed(()=>Object.assign({},{success:{path:_},info:{path:D},warning:{path:I},error:{path:x}},e.iconPresets)),b=t.computed(()=>{const i=y.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"}}),h=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,d)=>(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(c)}]]),role:h.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,[b.value?(t.openBlock(),t.createElementBlock("div",R,[t.renderSlot(i.$slots,"message-icon",{message:e.message,icon:b.value},()=>[t.createVNode(t.unref(L),t.mergeProps(b.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:d[0]||(d[0]=t.withModifiers(u=>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)]),d[1]||(d[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(L),{type:"mdi",path:t.unref(T)},null,8,["path"])])):t.createCommentVNode("",!0)])])])])],14,j))}},J={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,typeof window<"u"?HTMLElement:Object],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 K(s){return s&&s.__esModule&&Object.prototype.hasOwnProperty.call(s,"default")?s.default:s}var M={exports:{}},A;function Q(){if(A)return M.exports;A=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 c=0,f=a.length;c<f;c++)a[c].fn!==n&&a[c].fn._!==n&&l.push(a[c]);return l.length?e[o]=l:delete e[o],this}},M.exports=s,M.exports.TinyEmitter=s,M.exports}var B,$;function X(){if($)return B;$=1;var s=Q();return B=new s,B}var Y=X();const V=K(Y),w={$on:(...s)=>V.on(...s),$once:(...s)=>V.once(...s),$off:(...s)=>V.off(...s),$emit:(...s)=>V.emit(...s)},C=t.ref([]),N=Symbol(),ee=s=>Math.abs(s.split("").reduce((o,n)=>(o<<5)-o+n.charCodeAt(0)|0,0));let E=1;w.$on("add",s=>{s={...s},s.group||(s.group=ee(`${s.type}${s.title}${s.text}`).toString(16)),s.id=E,E++,C.value.push(s)});function te(){const s=t.inject(N);if(!s)throw new Error("No Snackbar provided!");return s}const se={install:(s,o={})=>{const{disableGlobals:n=!1}=o,e={add:a=>{w.$emit("add",a)},clear:()=>{w.$emit("clear")}};n!==!0&&(s.config.globalProperties.$snackbar=e,typeof window<"u"&&(window.$snackbar=e)),s.provide(N,e)}};function oe(s){return t.getCurrentScope()?(t.onScopeDispose(s),!0):!1}const O=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const ae=s=>s!=null;function ne(s){return Array.isArray(s)?s:[s]}function re(s){return t.getCurrentInstance()}function ie(s,o=!0,n){re()?t.onMounted(s,n):o?s():t.nextTick(s)}const le=O?window:void 0,ce=O?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 ue(){const s=t.shallowRef(!1),o=t.getCurrentInstance();return o&&t.onMounted(()=>{s.value=!0},o),s}function me(s){const o=ue();return t.computed(()=>(o.value,!!s()))}function fe(s,o,n={}){const{window:e=le,...a}=n;let l;const c=me(()=>e&&"MutationObserver"in e),f=()=>{l&&(l.disconnect(),l=void 0)},p=t.computed(()=>{const h=t.toValue(s),r=ne(h).map(de).filter(ae);return new Set(r)}),m=t.watch(()=>p.value,h=>{f(),c.value&&h.size&&(l=new MutationObserver(o),h.forEach(r=>l.observe(r,a)))},{immediate:!0,flush:"post"}),y=()=>l==null?void 0:l.takeRecords(),b=()=>{m(),f()};return oe(b),{isSupported:c,stop:b,takeRecords:y}}function pe(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 c=t.ref(l());return ie(()=>c.value=l()),e&&o&&fe(o.querySelector(n),()=>c.value=l(),{attributes:!0}),t.computed({get(){return c.value},set(f){var p,m;c.value=f,o&&(c.value?(p=o.querySelector(n))==null||p.setAttribute("dir",c.value):(m=o.querySelector(n))==null||m.removeAttribute("dir"))}})}const ge={__name:"Vue3Snackbar",props:{...J},emits:["added","group-added","dismissed","removed","cleared","click:action"],setup(s,{emit:o}){const n=pe(),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"})),c=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":c(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),C.value=C.value.filter(d=>e.groups?d.group!==r.group:d.id!==r.id)},y=t.computed(()=>{const i=[...C.value].reduce((d,u)=>{e.duration&&!u.duration&&u.duration!==0&&(u.duration=+e.duration);const g=e.groups?u.group:u.id;if(d.has(g)){const k=d.get(g);u.count=k.count+1,u.id=k.id,d.set(g,u),a("group-added",u)}else u.count=1,a("added",u),d.set(g,u);return d},new Map);return Array.from(i.values())}),b=t.computed(()=>{const r=e.limit?y.value.slice(e.limit*-1):y.value;return e.reverse?r.reverse():r});t.watch(b,r=>{const i=r.map(g=>g.id),u=y.value.map(g=>g.id).filter(g=>!i.includes(g));for(const g of u){const k=y.value.find(be=>be.id===g);k&&m(k,!1)}},{immediate:!0}),w.$on("clear",()=>{a("cleared"),C.value=[]}),t.onUnmounted(()=>{w.$off("add"),w.$off("clear")});const h=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(b.value,d=>(t.openBlock(),t.createBlock(U,{key:d.id,message:d,"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]=u=>m(u,!0)),"onClick:action":h},t.createSlots({_:2},[t.renderList(r.$slots,(u,g)=>({name:g,fn:t.withCtx(k=>[t.renderSlot(r.$slots,g,t.mergeProps({ref_for:!0},k))])}))]),1032,["message","message-class","message-action-class","dense","border-class","icon-presets"]))),128))]),_:3})],6)],8,["to"]))}};return S.SnackbarMessages=C,S.SnackbarService=se,S.Vue3Snackbar=ge,S.useSnackbar=te,Object.defineProperty(S,Symbol.toStringTag,{value:"Module"}),S}({},Vue);