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