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
1 lines • 15.8 kB
JavaScript
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`vue`)):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.Vue3Snackbar={},e.Vue))})(this,function(exports,t){var n=Object.create,r=Object.defineProperty,i=Object.getOwnPropertyDescriptor,a=Object.getOwnPropertyNames,o=Object.getPrototypeOf,s=Object.prototype.hasOwnProperty,c=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),l=(e,t,n,o)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var c=a(t),l=0,u=c.length,d;l<u;l++)d=c[l],!s.call(e,d)&&d!==n&&r(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(o=i(t,d))||o.enumerable});return e},u=(e,t,i)=>(i=e==null?{}:n(o(e)),l(t||!e||!e.__esModule?r(i,`default`,{value:e,enumerable:!0}):i,e));t=u(t);var d=`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`,f=`M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16`,p=`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`,m=`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`,h=`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`;let g={transform:`rotate(var(--r, 0deg)) scale(var(--sx, 1), var(--sy, 1))`},_={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`}},v={props:{type:{type:String,required:!0},path:{type:[String,Object,Array],required:!1},pathString:{type:[Array,String,Object],required:!1}},setup(e){return()=>e.type===`fad`?(console.warn(`vue3-icon does not currently support Duotone FontAwesome icons`),(0,t.h)(`path`)):Array.isArray(e.path)?(0,t.h)(`g`,{style:{fill:`currentcolor`}},e.path.map(e=>typeof e==`string`?(0,t.h)(`path`,{d:e}):(0,t.h)(`path`,{...e}))):(0,t.h)(`path`,{d:e.pathString,style:{fill:`currentcolor`}})}},y={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:e=>[``,`horizontal`,`vertical`,`both`].includes(e)},rotate:{type:[Number,String],default:0},noNamespace:{type:Boolean,default:!1},noStyles:{type:Boolean,default:!1},noDimensions:{type:Boolean,default:!1}},setup(e){if(!e.path&&!e.faIcon)return console.warn(`vue3-icon requires either a 'path' or an 'fa-icon' property`),()=>(0,t.h)(`div`);let n=(0,t.computed)(()=>{var t;return(t=e.faIcon)?.prefix||e.type}),r=(0,t.computed)(()=>parseInt(e.rotate,10)),i=(0,t.computed)(()=>_[n.value]||_.default),a=(0,t.computed)(()=>parseInt(e.size,10)||i.value.size),o=(0,t.computed)(()=>e.faIcon?`0 0 ${e.faIcon.icon[0]} ${e.faIcon.icon[1]}`:!1),s=(0,t.computed)(()=>o.value||e.viewbox||i.value.viewbox),c=(0,t.computed)(()=>{if(e.noStyles!==!0)return{...g,"--sx":[`both`,`horizontal`].includes(e.flip)?`-1`:`1`,"--sy":[`both`,`vertical`].includes(e.flip)?`-1`:`1`,"--r":isNaN(r.value)?r.value:r.value+`deg`}}),l=(0,t.computed)(()=>{var t;return e.faIcon?(t=e.faIcon)?.icon[4]:e.type===`simple-icons`&&typeof e.path==`object`?e.path.path:e.path});return()=>(0,t.h)(`svg`,{xmlns:e.noNamespace===!0?void 0:`http://www.w3.org/2000/svg`,style:c.value,class:[`vue3-icon`],width:e.noDimensions===!0?void 0:a.value,height:e.noDimensions===!0?void 0:a.value,viewBox:s.value},[(0,t.h)(v,{path:e.path,type:n.value,pathString:l.value})])}},b=[`role`],x={class:`vue3-snackbar-message-wrapper`},S={key:0,class:`vue3-snackbar-message-icon`},C={class:`vue3-snackbar-message-content`},w={key:0,class:`vue3-snackbar-message-badge`},ee={class:`vue3-snackbar-message-title`},T={key:0,class:`vue3-snackbar-message-additional`},E={class:`vue3-snackbar-message-close`},D={__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(e,{emit:n}){let r=n,i=e,a=null,o=null,s=(0,t.ref)(!1),c=()=>{let e=i.message.duration===0||i.message.duration===`0`;if(e&&i.message.dismissible!==!1)return;let t=!i.message.duration&&!i.message.dismissible?4e3:i.message.duration;a=setTimeout(u,t)};(0,t.onMounted)(c),(0,t.watch)(()=>i.message.count,e=>{if(e===1)return!1;clearTimeout(a),clearTimeout(o),o=setTimeout(()=>{s.value=!1},1e3),s.value=!0,c()});let l=()=>{a&&clearTimeout(a),u()},u=()=>{r(`dismiss`,i.message)},g=(0,t.computed)(()=>Object.assign({},{success:{path:p},info:{path:h},warning:{path:f},error:{path:d}},i.iconPresets)),_=(0,t.computed)(()=>{let e=g.value[i.message.type];return i.message.type&&!e&&console.warn(`[Vue3 Snackbar] Couldn't find icon preset for type `+i.message.type),e?(e.type=`mdi`,e):i.message.icon&&typeof i.message.icon==`object`?i.message.icon:{path:``,type:`default`}}),v=(0,t.computed)(()=>i.message.type===`error`?`alert`:i.message?.role??`status`),D={name:`RenderedAction`,render(){let e=(0,t.computed)(()=>(0,t.toRaw)(i.message.action));return e.value?(0,t.h)(e.value,{message:i.message,isDismissible:i.message.isDismissible,dismiss:l}):null}};return(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`article`,{class:(0,t.normalizeClass)([`vue3-snackbar-message`,[i.message.type||`custom`,i.messageClass,i.borderClass,{"has-background":i.message.background,"has-border":i.borderClass,"is-dense":i.dense,"shake-baby-shake":(0,t.unref)(s)}]]),role:v.value,style:(0,t.normalizeStyle)({"--message-background":i.message.background,"--message-text-color":i.message.textColor,"--message-icon-color":i.message.iconColor})},[(0,t.renderSlot)(e.$slots,`message-inner`,{message:i.message},()=>[(0,t.createElementVNode)(`div`,x,[_.value?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,S,[(0,t.renderSlot)(e.$slots,`message-icon`,{message:i.message,icon:_.value},()=>[(0,t.createVNode)((0,t.unref)(y),(0,t.mergeProps)(_.value,{role:`img`}),null,16)])])):(0,t.createCommentVNode)(``,!0),(0,t.createElementVNode)(`div`,C,[(0,t.renderSlot)(e.$slots,`message-badge`,{message:i.message,count:i.message.count},()=>[i.message.count>1?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,w,(0,t.toDisplayString)(i.message.count),1)):(0,t.createCommentVNode)(``,!0)]),(0,t.renderSlot)(e.$slots,`message-content`,{message:i.message,title:i.message.title,text:i.message.text},()=>[(0,t.createElementVNode)(`div`,ee,(0,t.toDisplayString)(i.message.title||i.message.text),1),i.message.title&&i.message.text?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,T,(0,t.toDisplayString)(i.message.text),1)):(0,t.createCommentVNode)(``,!0)]),e.$slots[`message-action`]?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,class:(0,t.normalizeClass)(i.messageActionClass),onClick:n[0]||=(0,t.withModifiers)(e=>r(`click:action`,{message:i.message}),[`stop`])},[(0,t.renderSlot)(e.$slots,`message-action`,{message:i.message,isDismissible:i.message.dismissible,dismiss:l},()=>[(0,t.createVNode)(D)])],2)):(0,t.createCommentVNode)(``,!0)]),n[1]||=(0,t.createElementVNode)(`div`,{class:`spacer`},null,-1),(0,t.createElementVNode)(`div`,E,[(0,t.renderSlot)(e.$slots,`message-close-icon`,{message:i.message,isDimissible:i.message.dismissible,isDismissible:i.message.dismissible,dismiss:l},()=>[i.message.dismissible===!1?(0,t.createCommentVNode)(``,!0):((0,t.openBlock)(),(0,t.createElementBlock)(`button`,{key:0,onClick:(0,t.withModifiers)(l,[`stop`])},[(0,t.createVNode)((0,t.unref)(y),{type:`mdi`,path:(0,t.unref)(m)},null,8,[`path`])]))])])])])],14,b))}};var O=D;let k=typeof window<`u`?HTMLElement:Object,A={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:e=>!isNaN(parseFloat(e))&&isFinite(e)},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,k],default:`body`},border:{type:String,default:``,validator:e=>[`top`,`bottom`,`left`,`right`,`start`,`end`,``].includes(e)},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:e=>e===!0||e===!1||[`xs`,`sm`,`md`,`lg`,`xl`,`2xl`].includes(e)},contentWidth:{type:String,default:`min(50vw, 350px)`},borderWidth:{type:[String,Number],default:8}};var j=c(((exports,t)=>{function n(){}n.prototype={on:function(e,t,n){var r=this.e||={};return(r[e]||(r[e]=[])).push({fn:t,ctx:n}),this},once:function(e,t,n){var r=this;function i(){r.off(e,i),t.apply(n,arguments)}return i._=t,this.on(e,i,n)},emit:function(e){for(var t=[].slice.call(arguments,1),n=((this.e||={})[e]||[]).slice(),r=0,i=n.length;r<i;r++)n[r].fn.apply(n[r].ctx,t);return this},off:function(e,t){var n=this.e||={},r=n[e],i=[];if(r&&t)for(var a=0,o=r.length;a<o;a++)r[a].fn!==t&&r[a].fn._!==t&&i.push(r[a]);return i.length?n[e]=i:delete n[e],this}},t.exports=n,t.exports.TinyEmitter=n})),M=c(((exports,t)=>{var n=j();t.exports=new n})),N=u(M()),P={$on:(...e)=>N.default.on(...e),$once:(...e)=>N.default.once(...e),$off:(...e)=>N.default.off(...e),$emit:(...e)=>N.default.emit(...e)};let F=(0,t.ref)([]),I=Symbol(),L=e=>Math.abs(e.split(``).reduce((e,t)=>(e<<5)-e+t.charCodeAt(0)|0,0)),R=1;P.$on(`add`,e=>{e={...e},e.group||=L(`${e.type}${e.title}${e.text}`).toString(16),e.id=R,R++,F.value.push(e)});function z(){let e=(0,t.inject)(I);if(!e)throw Error(`No Snackbar provided!`);return e}let B={install:(e,t={})=>{let{disableGlobals:n=!1}=t,r={add:e=>{P.$emit(`add`,e)},clear:()=>{P.$emit(`clear`)}};n!==!0&&(e.config.globalProperties.$snackbar=r,typeof window<`u`&&(window.$snackbar=r)),e.provide(I,r)}};function V(e){return(0,t.getCurrentScope)()?((0,t.onScopeDispose)(e),!0):!1}let H=typeof window<`u`&&typeof document<`u`;typeof WorkerGlobalScope<`u`&&globalThis instanceof WorkerGlobalScope;let U=e=>e!=null;function W(e){return Array.isArray(e)?e:[e]}function G(e){let t=Object.create(null);return n=>{let r=t[n];return r||(t[n]=e(n))}}let K=/\B([A-Z])/g;G(e=>e.replace(K,`-$1`).toLowerCase());let q=/-(\w)/g;G(e=>e.replace(q,(e,t)=>t?t.toUpperCase():``));function J(e){return e||(0,t.getCurrentInstance)()}function Y(e,n=!0,r){let i=J(r);i?(0,t.onMounted)(e,r):n?e():(0,t.nextTick)(e)}let X=H?window:void 0,Z=H?window.document:void 0;H&&window.navigator,H&&window.location;function Q(e){var n;let r=(0,t.toValue)(e);return(n=r?.$el)??r}function $(){let e=(0,t.shallowRef)(!1),n=(0,t.getCurrentInstance)();return n&&(0,t.onMounted)(()=>{e.value=!0},n),e}function te(e){let n=$();return(0,t.computed)(()=>(n.value,!!e()))}function ne(e,n,r={}){let{window:i=X,...a}=r,o,s=te(()=>i&&`MutationObserver`in i),c=()=>{o&&=(o.disconnect(),void 0)},l=(0,t.computed)(()=>{let n=(0,t.toValue)(e),r=W(n).map(Q).filter(U);return new Set(r)}),u=(0,t.watch)(l,e=>{c(),s.value&&e.size&&(o=new MutationObserver(n),e.forEach(e=>o.observe(e,a)))},{immediate:!0,flush:`post`}),d=()=>o?.takeRecords(),f=()=>{u(),c()};return V(f),{isSupported:s,stop:f,takeRecords:d}}function re(e={}){let{document:n=Z,selector:r=`html`,observe:i=!1,initialValue:a=`ltr`}=e;function o(){var e,t;return(t=(e=n?.querySelector(r))?.getAttribute(`dir`))??a}let s=(0,t.ref)(o());return Y(()=>s.value=o()),i&&n&&ne(n.querySelector(r),()=>s.value=o(),{attributes:!0}),(0,t.computed)({get(){return s.value},set(e){var t,i;s.value=e,n&&(s.value?(t=n.querySelector(r))==null||t.setAttribute(`dir`,s.value):(i=n.querySelector(r))==null||i.removeAttribute(`dir`))}})}let ie={__name:`Vue3Snackbar`,props:{...A},emits:[`added`,`group-added`,`dismissed`,`removed`,`cleared`,`click:action`],setup(e,{emit:n}){let r=re(),i=e,a=n,o=(0,t.computed)(()=>((i.left||i.right)&&(i.start||i.end)&&console.warn(`[Vue3 Snackbar] The left/right and start/end position properties should not be used together.`),{"is-top":i.top,"is-bottom":i.top===!1&&i.bottom,"is-left":i.left,"is-right":i.left===!1&&i.right,"is-start":i.start,"is-end":i.start===!1&&i.end,"is-middle":i.top===!1&&i.bottom===!1,"is-centre":[`left`,`right`,`start`,`end`].every(e=>i[e]===!1),"shadow-md":i.shadow===!0,[`shadow-${i.shadow}`]:typeof i.shadow==`string`,"is-rtl":r.value===`rtl`})),s=e=>typeof e==`number`||/[^\d]/.test(e)===!1?`${e}px`:e,c=(0,t.computed)(()=>({"--success-colour":i.success,"--error-colour":i.error,"--warning-colour":i.warning,"--info-colour":i.info,"--snackbar-zindex":i.zIndex,"--background-opacity":i.backgroundOpacity,"--background-color":i.backgroundColor,"--base-background-color":i.baseBackgroundColor,"--message-text-color":i.messageTextColor,"--message-icon-color":i.messageIconColor,"--snackbar-content-width":i.contentWidth,"--snackbar-border-width":s(i.borderWidth)})),l=(0,t.computed)(()=>i.border?`border-${i.border}`:``),u=(e,t=!1)=>{Object.hasOwn(e,`onRemoved`)&&typeof e.onRemoved==`function`&&e.onRemoved(e,t),a(t?`dismissed`:`removed`,e),F.value=F.value.filter(t=>i.groups?t.group!==e.group:t.id!==e.id)},d=(0,t.computed)(()=>{let e=[...F.value],t=e.reduce((e,t)=>{i.duration&&!t.duration&&t.duration!==0&&(t.duration=+i.duration);let n=i.groups?t.group:t.id;if(e.has(n)){let r=e.get(n);t.count=r.count+1,t.id=r.id,e.set(n,t),a(`group-added`,t)}else t.count=1,a(`added`,t),e.set(n,t);return e},new Map);return Array.from(t.values())}),f=(0,t.computed)(()=>{let e=i.limit?d.value.slice(i.limit*-1):d.value;return i.reverse?e.reverse():e});(0,t.watch)(f,e=>{let t=e.map(e=>e.id),n=d.value.map(e=>e.id),r=n.filter(e=>!t.includes(e));for(let e of r){let t=d.value.find(t=>t.id===e);t&&u(t,!1)}},{immediate:!0}),P.$on(`clear`,()=>{a(`cleared`),F.value=[]}),(0,t.onUnmounted)(()=>{P.$off(`add`),P.$off(`clear`)});let p=e=>{a(`click:action`,e),i.dismissOnActionClick&&u(e.message,!0)};return(e,n)=>((0,t.openBlock)(),(0,t.createBlock)(t.Teleport,{to:i.attach},[(0,t.createElementVNode)(`section`,{id:`vue3-snackbar--container`,class:(0,t.normalizeClass)([`vue3-snackbar`,[o.value]]),style:(0,t.normalizeStyle)(c.value),"aria-live":`polite`},[(0,t.createVNode)(t.TransitionGroup,{name:`vue3-snackbar-message`,tag:`div`,class:`vue3-snackbar--messages`},{default:(0,t.withCtx)(()=>[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(f.value,r=>((0,t.openBlock)(),(0,t.createBlock)(O,{key:r.id,message:r,"message-class":i.messageClass,"message-action-class":i.messageActionClass,dense:i.dense,"border-class":l.value,"icon-presets":i.iconPresets,onDismiss:n[0]||=e=>u(e,!0),"onClick:action":p},(0,t.createSlots)({_:2},[(0,t.renderList)(e.$slots,(n,r)=>({name:r,fn:(0,t.withCtx)(n=>[(0,t.renderSlot)(e.$slots,r,(0,t.mergeProps)({ref_for:!0},n))])}))]),1032,[`message`,`message-class`,`message-action-class`,`dense`,`border-class`,`icon-presets`]))),128))]),_:3})],6)],8,[`to`]))}};var ae=ie;exports.SnackbarMessages=F,exports.SnackbarService=B,exports.Vue3Snackbar=ae,exports.useSnackbar=z});