mosha-vue-toastify
Advanced tools
Comparing version 1.0.18 to 1.0.19
import { Component, VNode } from 'vue'; | ||
import { Position, ToastObject, ToastOptions, ToastContent, DisplayContentObject, ToastContentType } from './types'; | ||
export declare const createToast: (content: ToastContent, options?: ToastOptions | undefined) => void; | ||
export declare const setupVNode: (contentType: ToastContentType, options: ToastOptions, content: DisplayContentObject | Component | VNode) => void; | ||
/** | ||
* Creates a toast based on content and options | ||
* | ||
* @param content can be a content object with title and description or a Vue component or just plain text. | ||
* @param options options for the toast, please refer to the README for more details | ||
* @returns an object contains the close function that can be used to dismiss the toast | ||
*/ | ||
export declare const createToast: (content: ToastContent, options?: ToastOptions | undefined) => { | ||
close: () => void; | ||
}; | ||
export declare const setupVNode: (contentType: ToastContentType, options: ToastOptions, content: DisplayContentObject | Component | VNode) => () => void; | ||
export declare const setupVNodeProps: (options: ToastOptions, id: number, offset: number, closeFn: (id: number, position: Position) => void, content?: DisplayContentObject | undefined) => { | ||
@@ -28,1 +37,5 @@ id: number; | ||
export declare const close: (id: number, position: Position) => void; | ||
/** | ||
* Clear all the toasts | ||
*/ | ||
export declare const clearToasts: () => void; |
import { App } from '@vue/runtime-core'; | ||
import './index.scss'; | ||
export { createToast } from './createToast'; | ||
export { createToast, clearToasts } from './createToast'; | ||
export { withProps } from './util'; | ||
@@ -5,0 +5,0 @@ export * from './types'; |
@@ -1,1 +0,1 @@ | ||
var e=Object.defineProperty,t=Object.prototype.hasOwnProperty,o=Object.getOwnPropertySymbols,n=Object.prototype.propertyIsEnumerable,s=(t,o,n)=>o in t?e(t,o,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[o]=n,i=(e,i)=>{for(var r in i||(i={}))t.call(i,r)&&s(e,r,i[r]);if(o)for(var r of o(i))n.call(i,r)&&s(e,r,i[r]);return e};import{ref as r,onMounted as l,onUnmounted as a,computed as p,defineComponent as u,openBlock as c,createBlock as h,createVNode as d,watchEffect as m,resolveComponent as v,Transition as f,withCtx as _,createCommentVNode as g,toDisplayString as w,renderSlot as y,render as b}from"vue";const I={type:"default",timeout:5e3,showCloseButton:!0,position:"top-right",transition:"bounce",hideProgressBar:!1,swipeClose:!0};var T,x;(x=T||(T={}))[x.TITLE_ONLY=0]="TITLE_ONLY",x[x.TITLE_DESCRIPTION=1]="TITLE_DESCRIPTION",x[x.COMPONENT=2]="COMPONENT",x[x.VNODE=3]="VNODE";const C={"top-left":{bounce:"mosha__bounceInLeft",zoom:"mosha__zoomIn",slide:"mosha__slideInLeft"},"top-right":{bounce:"mosha__bounceInRight",zoom:"mosha__zoomIn",slide:"mosha__slideInRight"},"top-center":{bounce:"mosha__bounceInDown",zoom:"mosha__zoomIn",slide:"mosha__slideInDown"},"bottom-center":{bounce:"mosha__bounceInUp",zoom:"mosha__zoomIn",slide:"mosha__slideInUp"},"bottom-right":{bounce:"mosha__bounceInRight",zoom:"mosha__zoomIn",slide:"mosha__slideInRight"},"bottom-left":{bounce:"mosha__bounceInLeft",zoom:"mosha__zoomIn",slide:"mosha__slideInLeft"}},M=(e,t,o)=>{const n=r(),s=r(void 0),l=r(),p=e=>e instanceof MouseEvent,u=r=>{!1!==o&&n.value&&(p(r)?s.value=n.value.clientX-r.clientX:s.value=n.value.touches[0].clientX-r.touches[0].clientX,l.value=i(i({},l.value),{transition:"none"}),e.endsWith("left")?l.value.left=-s.value+"px !important":e.endsWith("right")?l.value.right=`${s.value}px !important`:s.value>0?l.value.left=-s.value+"px !important":l.value.right=`${s.value}px !important`,Math.abs(s.value)>200&&t())},c=e=>{!1!==o&&(n.value&&(n.value=void 0),s.value&&(s.value=void 0),removeEventListener(e,u))};return a((()=>{!1!==o&&(c("mousemove"),c("touchmove"))})),{swipedDiff:s,swipeStart:n,swipeStyle:l,swipeHandler:u,startSwipeHandler:t=>{if(!1===o)return;n.value=t;const r=p(t)?"mousemove":"touchmove",a=p(t)?"mouseup":"touchend";addEventListener(r,u),addEventListener(a,(()=>(t=>{const o={transition:"left .3s ease-out",left:0},r={transition:"right .3s ease-out",right:0},a={transition:"all .3s ease-out",left:0,right:0};e.endsWith("left")?l.value=i(i({},l.value),o):e.endsWith("right")?l.value=i(i({},l.value),r):l.value=i(i({},l.value),a),n.value=void 0,s.value=void 0,removeEventListener(t,u)})(r)))},cleanUpMove:c}};var S=u({props:{type:{type:String,default:"default"}}});const z={class:"mosha__icon"},L={key:0,xmlns:"http://www.w3.org/2000/svg",height:"32px",viewBox:"0 0 24 24",width:"32px",fill:"#ffffff"},E=d("path",{d:"M4.47 21h15.06c1.54 0 2.5-1.67 1.73-3L13.73 4.99c-.77-1.33-2.69-1.33-3.46 0L2.74 18c-.77 1.33.19 3 1.73 3zM12 14c-.55 0-1-.45-1-1v-2c0-.55.45-1 1-1s1 .45 1 1v2c0 .55-.45 1-1 1zm1 4h-2v-2h2v2z"},null,-1),B={key:1,xmlns:"http://www.w3.org/2000/svg",height:"32px",viewBox:"0 0 24 24",width:"32px",fill:"#ffffff"},N=d("path",{d:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 11c-.55 0-1-.45-1-1V8c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1zm1 4h-2v-2h2v2z"},null,-1),O={key:2,xmlns:"http://www.w3.org/2000/svg",height:"32px",viewBox:"0 0 24 24",width:"32px",fill:"#ffffff"},P=d("path",{d:"M0 0h24v24H0V0z",fill:"none"},null,-1),D=d("path",{d:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM9.29 16.29L5.7 12.7c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0L10 14.17l6.88-6.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-7.59 7.59c-.38.39-1.02.39-1.41 0z"},null,-1),H={key:3,xmlns:"http://www.w3.org/2000/svg",height:"32px",viewBox:"0 0 24 24",width:"32px",fill:"#616161"},k=d("path",{d:"M0 0h24v24H0z",fill:"none"},null,-1),V=d("path",{d:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"},null,-1),R={key:4,xmlns:"http://www.w3.org/2000/svg",height:"32px",viewBox:"0 0 24 24",width:"32px",fill:"#ffffff"},$=d("path",{d:"M0 0h24v24H0z",fill:"none"},null,-1),j=d("path",{d:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"},null,-1);S.render=function(e,t,o,n,s,i){return c(),h("span",z,["warning"===e.type?(c(),h("svg",L,[E])):"danger"===e.type?(c(),h("svg",B,[N])):"success"===e.type?(c(),h("svg",O,[P,D])):"default"===e.type?(c(),h("svg",H,[k,V])):(c(),h("svg",R,[$,j]))])};var q=u({name:"MToast",components:{MIcon:S},props:{visible:Boolean,text:{type:String,default:""},description:{type:String,default:""},toastBackgroundColor:{type:String,default:""},type:{type:String,default:"default"},onClose:{type:Function,default:()=>null},onCloseHandler:{type:Function,required:!0},offset:{type:Number,required:!0},id:{type:Number,required:!0},timeout:{type:Number,default:5e3},position:{type:String,required:!0},showCloseButton:{type:Boolean,default:!0},swipeClose:{type:Boolean,default:!0},hideProgressBar:{type:Boolean,default:!1},showIcon:{type:Boolean,default:!1},transition:{type:String,default:"bounce"}},setup(e,t){const o=r(),{swipedDiff:n,startSwipeHandler:s,swipeStyle:i,cleanUpMove:u}=M(e.position,e.onCloseHandler,e.swipeClose),{transitionType:c}=(h=e.position,d=e.transition,v=n,{transitionType:p((()=>v.value>200?"mosha__fadeOutLeft":v.value<-200?"mosha__fadeOutRight":C[h][d]))});var h,d,v;const{start:f,stop:_,progress:g}=((e,t)=>{const o=r(),n=r(0),s=r(t),i=r(),p=r(100),u=()=>{clearInterval(i.value),clearTimeout(o.value)};return l((()=>{})),a((()=>{u()})),{start:()=>{n.value=Date.now(),clearTimeout(o.value),i.value=setInterval((()=>{p.value--}),t/100-2),o.value=setTimeout(e,s.value)},stop:()=>{clearInterval(i.value),clearTimeout(o.value),s.value-=Date.now()-n.value},clear:u,progress:p}})((()=>{e.onCloseHandler()}),e.timeout),w=p((()=>t.slots.default)),y=p((()=>/<\/?[a-z][\s\S]*>/i.test(e.description))),b=()=>{e.timeout>0&&f()};return m((()=>{const{customStyle:t}=((e,t,o)=>{const n=p((()=>{switch(e){case"top-left":return{left:"0",top:`${t}px`};case"bottom-left":return{left:"0",bottom:`${t}px`};case"bottom-right":return{right:"0",bottom:`${t}px`};case"top-center":return{top:`${t}px`,left:"0",right:"0",marginRight:"auto",marginLeft:"auto"};case"bottom-center":return{bottom:`${t}px`,left:"0",right:"0",marginRight:"auto",marginLeft:"auto"};default:return{right:"0",top:`${t}px`}}}));return o.length>0&&(n.value.backgroundColor=o),{customStyle:n}})(e.position,e.offset,e.toastBackgroundColor);o.value=t.value})),l((()=>{b()})),{style:o,transitionType:c,startTimer:b,stopTimer:()=>{e.timeout>0&&_()},progress:g,onTouchStart:e=>{s(e)},onMouseLeave:()=>{u("mousemove"),b()},onMouseDown:e=>{s(e)},swipeStyle:i,isSlotPassed:w,isDescriptionHtml:y}}});const U={class:"mosha__toast__content-wrapper"},W={class:"mosha__toast__content"},X={class:"mosha__toast__content__text"},F={key:1,class:"mosha__toast__content__description"},Y={key:0,class:"mosha__toast__slot-wrapper"};q.render=function(e,t,o,n,s,i){const r=v("MIcon");return c(),h(f,{name:e.transitionType,type:"animation"},{default:_((()=>[e.visible?(c(),h("div",{key:0,class:["mosha__toast",e.toastBackgroundColor?null:e.type],style:[e.style,e.swipeStyle],onMouseenter:t[2]||(t[2]=(...t)=>e.stopTimer&&e.stopTimer(...t)),onMouseleave:t[3]||(t[3]=(...t)=>e.onMouseLeave&&e.onMouseLeave(...t)),onTouchstart:t[4]||(t[4]=(...t)=>e.onTouchStart&&e.onTouchStart(...t)),onMousedown:t[5]||(t[5]=(...t)=>e.onMouseDown&&e.onMouseDown(...t))},[d("div",U,[e.showIcon?(c(),h(r,{key:0,type:e.type},null,8,["type"])):g("",!0),d("div",W,[d("div",X,w(e.text),1),e.description.length>0&&e.isDescriptionHtml?(c(),h("div",{key:0,class:"mosha__toast__content__description",innerHTML:e.description},null,8,["innerHTML"])):g("",!0),e.description.length>0&&!e.isDescriptionHtml?(c(),h("div",F,w(e.description),1)):g("",!0)])]),e.isSlotPassed?(c(),h("div",Y,[y(e.$slots,"default")])):g("",!0),e.showCloseButton?(c(),h("div",{key:1,class:"mosha__toast__close-icon",onClick:t[1]||(t[1]=(...t)=>e.onCloseHandler&&e.onCloseHandler(...t))})):g("",!0),e.hideProgressBar?g("",!0):(c(),h("div",{key:2,class:"mosha__toast__progress",style:{width:`${e.progress}%`}},null,4))],38)):g("",!0)])),_:3},8,["name"])};const A={"top-left":[],"top-right":[],"bottom-left":[],"bottom-right":[],"top-center":[],"bottom-center":[]};let G=0;const J=(e,t)=>{if(!e)return;const o=t?Z(t):I;if(e.__v_isVNode)return void K(T.VNODE,o,e);if(e.hasOwnProperty("render"))return void K(T.COMPONENT,o,e);const n=ee(e);K(T.TITLE_DESCRIPTION,o,n)},K=(e,t,o)=>{const n=te(t,A,12),s=G++,i=document.createElement("div");let r;document.body.appendChild(i),r=e===T.VNODE?d(q,Q(t,s,n,oe),(()=>[o])):e===T.TITLE_DESCRIPTION?d(q,Q(t,s,n,oe,o)):d(q,Q(t,s,n,oe),(()=>[d(o)])),b(r,i),t.position&&(A[t.position].push({toastVNode:r,container:i}),r.component&&(r.component.props.visible=!0))},Q=(e,t,o,n,s)=>i(i(i({},e),s),{id:t,offset:o,visible:!1,onCloseHandler:()=>{n(t,e.position?e.position:"top-right")}}),Z=e=>{const t=i(i({},e),{type:e.type||I.type,timeout:e.timeout||I.timeout,showCloseButton:e.showCloseButton,position:e.position||I.position,showIcon:e.showIcon,swipeClose:e.swipeClose,transition:e.transition||I.transition});return t.hideProgressBar=void 0!==t.timeout&&t.timeout<=0,void 0!==e.hideProgressBar&&(t.hideProgressBar=e.hideProgressBar),t},ee=e=>({text:"string"==typeof e?e:e.title,description:"string"==typeof e?void 0:e.description}),te=(e,t,o)=>{let n=o;if(!e.position)throw new Error("no position");return t[e.position].forEach((({toastVNode:e})=>{const t=e.el.offsetHeight+o;n+=t||0})),n},oe=(e,t)=>{const o=A[t],n=o.findIndex((({toastVNode:t})=>t.props&&e===t.props.id));if(-1===n)return;const{container:s,toastVNode:i}=o[n];if(!i.el)return;const r=i.el.offsetHeight;A[t].splice(n,1),((e,t,o,n)=>{for(let s=e;s<t.length;s++){const{toastVNode:e}=t[s];if(!e.el)return;const i=o.split("-")[0]||"top",r=parseInt(e.el.style[i],10)-n-12;if(!e.component)return;e.component.props.offset=r}})(n,o,t,r),i.component&&(i.component.props.visible=!1,i.component.props.onClose&&i.component.props.onClose(),setTimeout((()=>{b(null,s),document.body.removeChild(s)}),1e3))};const ne=(e,t)=>d(e,t);var se={install:e=>{e.config.globalProperties.$moshaToast=J,e.provide("moshaToast",J)}};export default se;export{T as ToastContentType,J as createToast,ne as withProps}; | ||
var e=Object.defineProperty,t=Object.prototype.hasOwnProperty,o=Object.getOwnPropertySymbols,n=Object.prototype.propertyIsEnumerable,s=(t,o,n)=>o in t?e(t,o,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[o]=n,i=(e,i)=>{for(var r in i||(i={}))t.call(i,r)&&s(e,r,i[r]);if(o)for(var r of o(i))n.call(i,r)&&s(e,r,i[r]);return e};import{ref as r,onMounted as l,onUnmounted as a,computed as u,createVNode as p,defineComponent as c,openBlock as h,createBlock as d,watchEffect as v,resolveComponent as m,Transition as f,withCtx as g,createCommentVNode as _,toDisplayString as w,renderSlot as y,render as b}from"vue";const I={type:"default",timeout:5e3,showCloseButton:!0,position:"top-right",transition:"bounce",hideProgressBar:!1,swipeClose:!0};var T,x;(x=T||(T={}))[x.TITLE_ONLY=0]="TITLE_ONLY",x[x.TITLE_DESCRIPTION=1]="TITLE_DESCRIPTION",x[x.COMPONENT=2]="COMPONENT",x[x.VNODE=3]="VNODE";const C={"top-left":{bounce:"mosha__bounceInLeft",zoom:"mosha__zoomIn",slide:"mosha__slideInLeft"},"top-right":{bounce:"mosha__bounceInRight",zoom:"mosha__zoomIn",slide:"mosha__slideInRight"},"top-center":{bounce:"mosha__bounceInDown",zoom:"mosha__zoomIn",slide:"mosha__slideInDown"},"bottom-center":{bounce:"mosha__bounceInUp",zoom:"mosha__zoomIn",slide:"mosha__slideInUp"},"bottom-right":{bounce:"mosha__bounceInRight",zoom:"mosha__zoomIn",slide:"mosha__slideInRight"},"bottom-left":{bounce:"mosha__bounceInLeft",zoom:"mosha__zoomIn",slide:"mosha__slideInLeft"}},M=(e,t)=>p(e,t),E=(e,t=300)=>{let o;return(...n)=>{o&&(clearTimeout(o),o=void 0),o=setTimeout((()=>e(...n)),t)}},z=(e,t,o)=>{const n=r(),s=r(void 0),l=r(),u=e=>e instanceof MouseEvent,p=r=>{!1!==o&&n.value&&(u(r)?s.value=n.value.clientX-r.clientX:s.value=n.value.touches[0].clientX-r.touches[0].clientX,l.value=i(i({},l.value),{transition:"none"}),e.endsWith("left")?l.value.left=-s.value+"px !important":e.endsWith("right")?l.value.right=`${s.value}px !important`:s.value>0?l.value.left=-s.value+"px !important":l.value.right=`${s.value}px !important`,Math.abs(s.value)>200&&t())},c=e=>{!1!==o&&(n.value&&(n.value=void 0),s.value&&(s.value=void 0),removeEventListener(e,p))};return a((()=>{!1!==o&&(c("mousemove"),c("touchmove"))})),{swipedDiff:s,swipeStart:n,swipeStyle:l,swipeHandler:p,startSwipeHandler:t=>{if(!1===o)return;n.value=t;const r=u(t)?"mousemove":"touchmove",a=u(t)?"mouseup":"touchend";addEventListener(r,p),addEventListener(a,(()=>(t=>{const o={transition:"left .3s ease-out",left:0},r={transition:"right .3s ease-out",right:0},a={transition:"all .3s ease-out",left:0,right:0};e.endsWith("left")?l.value=i(i({},l.value),o):e.endsWith("right")?l.value=i(i({},l.value),r):l.value=i(i({},l.value),a),n.value=void 0,s.value=void 0,removeEventListener(t,p)})(r)))},cleanUpMove:c}};var S=c({props:{type:{type:String,default:"default"}}});const L={class:"mosha__icon"},N={key:0,xmlns:"http://www.w3.org/2000/svg",height:"32px",viewBox:"0 0 24 24",width:"32px",fill:"#ffffff"},O=p("path",{d:"M4.47 21h15.06c1.54 0 2.5-1.67 1.73-3L13.73 4.99c-.77-1.33-2.69-1.33-3.46 0L2.74 18c-.77 1.33.19 3 1.73 3zM12 14c-.55 0-1-.45-1-1v-2c0-.55.45-1 1-1s1 .45 1 1v2c0 .55-.45 1-1 1zm1 4h-2v-2h2v2z"},null,-1),B={key:1,xmlns:"http://www.w3.org/2000/svg",height:"32px",viewBox:"0 0 24 24",width:"32px",fill:"#ffffff"},H=p("path",{d:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 11c-.55 0-1-.45-1-1V8c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1zm1 4h-2v-2h2v2z"},null,-1),P={key:2,xmlns:"http://www.w3.org/2000/svg",height:"32px",viewBox:"0 0 24 24",width:"32px",fill:"#ffffff"},D=p("path",{d:"M0 0h24v24H0V0z",fill:"none"},null,-1),k=p("path",{d:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM9.29 16.29L5.7 12.7c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0L10 14.17l6.88-6.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-7.59 7.59c-.38.39-1.02.39-1.41 0z"},null,-1),V={key:3,xmlns:"http://www.w3.org/2000/svg",height:"32px",viewBox:"0 0 24 24",width:"32px",fill:"#616161"},R=p("path",{d:"M0 0h24v24H0z",fill:"none"},null,-1),$=p("path",{d:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"},null,-1),W={key:4,xmlns:"http://www.w3.org/2000/svg",height:"32px",viewBox:"0 0 24 24",width:"32px",fill:"#ffffff"},j=p("path",{d:"M0 0h24v24H0z",fill:"none"},null,-1),q=p("path",{d:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"},null,-1);S.render=function(e,t,o,n,s,i){return h(),d("span",L,["warning"===e.type?(h(),d("svg",N,[O])):"danger"===e.type?(h(),d("svg",B,[H])):"success"===e.type?(h(),d("svg",P,[D,k])):"default"===e.type?(h(),d("svg",V,[R,$])):(h(),d("svg",W,[j,q]))])};var U=c({name:"MToast",components:{MIcon:S},props:{visible:Boolean,text:{type:String,default:""},description:{type:String,default:""},toastBackgroundColor:{type:String,default:""},type:{type:String,default:"default"},onClose:{type:Function,default:()=>null},onCloseHandler:{type:Function,required:!0},offset:{type:Number,required:!0},id:{type:Number,required:!0},timeout:{type:Number,default:5e3},position:{type:String,required:!0},showCloseButton:{type:Boolean,default:!0},swipeClose:{type:Boolean,default:!0},hideProgressBar:{type:Boolean,default:!1},showIcon:{type:Boolean,default:!1},transition:{type:String,default:"bounce"}},setup(e,t){const o=r(),{width:n}=(()=>{const e=r(-1),t=r(-1),o=o=>{null!==o&&(e.value=o.currentTarget.innerWidth,t.value=o.currentTarget.innerHeight)};return l((()=>{window.innerWidth>0&&(e.value=window.innerWidth,t.value=window.innerHeight),window.addEventListener("resize",E(o))})),a((()=>{window.removeEventListener("resize",E(o))})),{width:e,height:t}})(),{swipedDiff:s,startSwipeHandler:i,swipeStyle:p,cleanUpMove:c}=z(e.position,e.onCloseHandler,e.swipeClose),{transitionType:h}=(d=e.position,m=e.transition,f=s,{transitionType:u((()=>f.value>200?"mosha__fadeOutLeft":f.value<-200?"mosha__fadeOutRight":C[d][m]))});var d,m,f;const{start:g,stop:_,progress:w}=((e,t)=>{const o=r(),n=r(0),s=r(t),i=r(),u=r(100),p=()=>{clearInterval(i.value),clearTimeout(o.value)};return l((()=>{})),a((()=>{p()})),{start:()=>{n.value=Date.now(),clearTimeout(o.value),i.value=setInterval((()=>{u.value--}),t/100-5),o.value=setTimeout(e,s.value)},stop:()=>{clearInterval(i.value),clearTimeout(o.value),s.value-=Date.now()-n.value},clear:p,progress:u}})((()=>{e.onCloseHandler()}),e.timeout),y=u((()=>t.slots.default)),b=u((()=>/<\/?[a-z][\s\S]*>/i.test(e.description))),I=()=>{e.timeout>0&&g()};return v((()=>{const{customStyle:t}=((e,t,o)=>{const n=u((()=>{switch(e){case"top-left":return{left:"0",top:`${t}px`};case"bottom-left":return{left:"0",bottom:`${t}px`};case"bottom-right":return{right:"0",bottom:`${t}px`};case"top-center":return{top:`${t}px`,left:"0",right:"0",marginRight:"auto",marginLeft:"auto"};case"bottom-center":return{bottom:`${t}px`,left:"0",right:"0",marginRight:"auto",marginLeft:"auto"};default:return{right:"0",top:`${t}px`}}}));return o.length>0&&(n.value.backgroundColor=o),{customStyle:n}})(e.position,e.offset,e.toastBackgroundColor);o.value=t.value})),l((()=>{I()})),{style:o,transitionType:h,startTimer:I,progress:w,onTouchStart:e=>{i(e)},onMouseLeave:()=>{c("mousemove"),I()},onMouseDown:e=>{i(e)},swipeStyle:p,isSlotPassed:y,isDescriptionHtml:b,onMouseEnter:()=>{e.timeout>0&&n.value>425&&_()}}}});const X={class:"mosha__toast__content-wrapper"},F={class:"mosha__toast__content"},Y={class:"mosha__toast__content__text"},A={key:1,class:"mosha__toast__content__description"},G={key:0,class:"mosha__toast__slot-wrapper"};U.render=function(e,t,o,n,s,i){const r=m("MIcon");return h(),d(f,{name:e.transitionType,type:"animation"},{default:g((()=>[e.visible?(h(),d("div",{key:0,class:["mosha__toast",e.toastBackgroundColor?null:e.type],style:[e.style,e.swipeStyle],onMouseenter:t[2]||(t[2]=(...t)=>e.onMouseEnter&&e.onMouseEnter(...t)),onMouseleave:t[3]||(t[3]=(...t)=>e.onMouseLeave&&e.onMouseLeave(...t)),onTouchstart:t[4]||(t[4]=(...t)=>e.onTouchStart&&e.onTouchStart(...t)),onMousedown:t[5]||(t[5]=(...t)=>e.onMouseDown&&e.onMouseDown(...t))},[p("div",X,[e.showIcon?(h(),d(r,{key:0,type:e.type},null,8,["type"])):_("",!0),p("div",F,[p("div",Y,w(e.text),1),e.description.length>0&&e.isDescriptionHtml?(h(),d("div",{key:0,class:"mosha__toast__content__description",innerHTML:e.description},null,8,["innerHTML"])):_("",!0),e.description.length>0&&!e.isDescriptionHtml?(h(),d("div",A,w(e.description),1)):_("",!0)])]),e.isSlotPassed?(h(),d("div",G,[y(e.$slots,"default")])):_("",!0),e.showCloseButton?(h(),d("div",{key:1,class:"mosha__toast__close-icon",onClick:t[1]||(t[1]=(...t)=>e.onCloseHandler&&e.onCloseHandler(...t))})):_("",!0),e.hideProgressBar?_("",!0):(h(),d("div",{key:2,class:"mosha__toast__progress",style:{width:`${e.progress}%`}},null,4))],38)):_("",!0)])),_:3},8,["name"])};const J={"top-left":[],"top-right":[],"bottom-left":[],"bottom-right":[],"top-center":[],"bottom-center":[]};let K=0;const Q=(e,t)=>{if(!e)return{close:()=>console.warn("no toast available.")};const o=t?te(t):I;if(e.__v_isVNode){return{close:Z(T.VNODE,o,e)}}if(e.hasOwnProperty("render")){return{close:Z(T.COMPONENT,o,e)}}const n=oe(e);return{close:Z(T.TITLE_DESCRIPTION,o,n)}},Z=(e,t,o)=>{const n=ne(t,J,12),s=K++,i=document.createElement("div");let r;return document.body.appendChild(i),r=e===T.VNODE?p(U,ee(t,s,n,se),(()=>[o])):e===T.TITLE_DESCRIPTION?p(U,ee(t,s,n,se,o)):p(U,ee(t,s,n,se),(()=>[p(o)])),b(r,i),J[t.position].push({toastVNode:r,container:i}),r.component&&(r.component.props.visible=!0),()=>se(s,t.position)},ee=(e,t,o,n,s)=>i(i(i({},e),s),{id:t,offset:o,visible:!1,onCloseHandler:()=>{n(t,e.position?e.position:"top-right")}}),te=e=>{const t=i(i({},e),{type:e.type||I.type,timeout:e.timeout||I.timeout,showCloseButton:e.showCloseButton,position:e.position||I.position,showIcon:e.showIcon,swipeClose:e.swipeClose,transition:e.transition||I.transition});return t.hideProgressBar=void 0!==t.timeout&&t.timeout<=0,void 0!==e.hideProgressBar&&(t.hideProgressBar=e.hideProgressBar),t},oe=e=>({text:"string"==typeof e?e:e.title,description:"string"==typeof e?void 0:e.description}),ne=(e,t,o)=>{let n=o;if(!e.position)throw new Error("no position");return t[e.position].forEach((({toastVNode:e})=>{const t=e.el.offsetHeight+o;n+=t||0})),n},se=(e,t)=>{const o=J[t],n=o.findIndex((({toastVNode:t})=>t.props&&e===t.props.id));if(-1===n)return;const{container:s,toastVNode:i}=o[n];if(!i.el)return;const r=i.el.offsetHeight;J[t].splice(n,1),((e,t,o,n)=>{for(let s=e;s<t.length;s++){const{toastVNode:e}=t[s];if(!e.el)return;const i=o.split("-")[0]||"top",r=parseInt(e.el.style[i],10)-n-12;if(!e.component)return;e.component.props.offset=r}})(n,o,t,r),i.component&&(i.component.props.visible=!1,i.component.props.onClose&&i.component.props.onClose(),setTimeout((()=>{b(null,s),document.body.removeChild(s)}),1e3))},ie=()=>{Object.entries(J).forEach((([e,t])=>{if(t.length>0){t.map((e=>e.toastVNode.props.id)).forEach((t=>{se(t,e)}))}}))};var re={install:e=>{e.config.globalProperties.$moshaToast=Q,e.provide("moshaToast",Q)}};export default re;export{T as ToastContentType,ie as clearToasts,Q as createToast,M as withProps}; |
@@ -1,1 +0,1 @@ | ||
var __defProp=Object.defineProperty,__hasOwnProp=Object.prototype.hasOwnProperty,__getOwnPropSymbols=Object.getOwnPropertySymbols,__propIsEnum=Object.prototype.propertyIsEnumerable,__defNormalProp=(e,t,o)=>t in e?__defProp(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,__assign=(e,t)=>{for(var o in t||(t={}))__hasOwnProp.call(t,o)&&__defNormalProp(e,o,t[o]);if(__getOwnPropSymbols)for(var o of __getOwnPropSymbols(t))__propIsEnum.call(t,o)&&__defNormalProp(e,o,t[o]);return e};!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["mosha-vue-toastify"]={},e.Vue)}(this,(function(e,t){"use strict";const o={type:"default",timeout:5e3,showCloseButton:!0,position:"top-right",transition:"bounce",hideProgressBar:!1,swipeClose:!0};var n;e.ToastContentType=void 0,(n=e.ToastContentType||(e.ToastContentType={}))[n.TITLE_ONLY=0]="TITLE_ONLY",n[n.TITLE_DESCRIPTION=1]="TITLE_DESCRIPTION",n[n.COMPONENT=2]="COMPONENT",n[n.VNODE=3]="VNODE";const s={"top-left":{bounce:"mosha__bounceInLeft",zoom:"mosha__zoomIn",slide:"mosha__slideInLeft"},"top-right":{bounce:"mosha__bounceInRight",zoom:"mosha__zoomIn",slide:"mosha__slideInRight"},"top-center":{bounce:"mosha__bounceInDown",zoom:"mosha__zoomIn",slide:"mosha__slideInDown"},"bottom-center":{bounce:"mosha__bounceInUp",zoom:"mosha__zoomIn",slide:"mosha__slideInUp"},"bottom-right":{bounce:"mosha__bounceInRight",zoom:"mosha__zoomIn",slide:"mosha__slideInRight"},"bottom-left":{bounce:"mosha__bounceInLeft",zoom:"mosha__zoomIn",slide:"mosha__slideInLeft"}},r=(e,o,n)=>{const s=t.ref(),r=t.ref(void 0),a=t.ref(),i=e=>e instanceof MouseEvent,l=t=>{!1!==n&&s.value&&(i(t)?r.value=s.value.clientX-t.clientX:r.value=s.value.touches[0].clientX-t.touches[0].clientX,a.value=__assign(__assign({},a.value),{transition:"none"}),e.endsWith("left")?a.value.left=-r.value+"px !important":e.endsWith("right")?a.value.right=`${r.value}px !important`:r.value>0?a.value.left=-r.value+"px !important":a.value.right=`${r.value}px !important`,Math.abs(r.value)>200&&o())},p=e=>{!1!==n&&(s.value&&(s.value=void 0),r.value&&(r.value=void 0),removeEventListener(e,l))};return t.onUnmounted((()=>{!1!==n&&(p("mousemove"),p("touchmove"))})),{swipedDiff:r,swipeStart:s,swipeStyle:a,swipeHandler:l,startSwipeHandler:t=>{if(!1===n)return;s.value=t;const o=i(t)?"mousemove":"touchmove",p=i(t)?"mouseup":"touchend";addEventListener(o,l),addEventListener(p,(()=>(t=>{const o={transition:"left .3s ease-out",left:0},n={transition:"right .3s ease-out",right:0},i={transition:"all .3s ease-out",left:0,right:0};e.endsWith("left")?a.value=__assign(__assign({},a.value),o):e.endsWith("right")?a.value=__assign(__assign({},a.value),n):a.value=__assign(__assign({},a.value),i),s.value=void 0,r.value=void 0,removeEventListener(t,l)})(o)))},cleanUpMove:p}};var a=t.defineComponent({props:{type:{type:String,default:"default"}}});const i={class:"mosha__icon"},l={key:0,xmlns:"http://www.w3.org/2000/svg",height:"32px",viewBox:"0 0 24 24",width:"32px",fill:"#ffffff"},p=t.createVNode("path",{d:"M4.47 21h15.06c1.54 0 2.5-1.67 1.73-3L13.73 4.99c-.77-1.33-2.69-1.33-3.46 0L2.74 18c-.77 1.33.19 3 1.73 3zM12 14c-.55 0-1-.45-1-1v-2c0-.55.45-1 1-1s1 .45 1 1v2c0 .55-.45 1-1 1zm1 4h-2v-2h2v2z"},null,-1),c={key:1,xmlns:"http://www.w3.org/2000/svg",height:"32px",viewBox:"0 0 24 24",width:"32px",fill:"#ffffff"},u=t.createVNode("path",{d:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 11c-.55 0-1-.45-1-1V8c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1zm1 4h-2v-2h2v2z"},null,-1),d={key:2,xmlns:"http://www.w3.org/2000/svg",height:"32px",viewBox:"0 0 24 24",width:"32px",fill:"#ffffff"},m=t.createVNode("path",{d:"M0 0h24v24H0V0z",fill:"none"},null,-1),h=t.createVNode("path",{d:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM9.29 16.29L5.7 12.7c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0L10 14.17l6.88-6.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-7.59 7.59c-.38.39-1.02.39-1.41 0z"},null,-1),f={key:3,xmlns:"http://www.w3.org/2000/svg",height:"32px",viewBox:"0 0 24 24",width:"32px",fill:"#616161"},_=t.createVNode("path",{d:"M0 0h24v24H0z",fill:"none"},null,-1),v=t.createVNode("path",{d:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"},null,-1),g={key:4,xmlns:"http://www.w3.org/2000/svg",height:"32px",viewBox:"0 0 24 24",width:"32px",fill:"#ffffff"},y=t.createVNode("path",{d:"M0 0h24v24H0z",fill:"none"},null,-1),w=t.createVNode("path",{d:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"},null,-1);a.render=function(e,o,n,s,r,a){return t.openBlock(),t.createBlock("span",i,["warning"===e.type?(t.openBlock(),t.createBlock("svg",l,[p])):"danger"===e.type?(t.openBlock(),t.createBlock("svg",c,[u])):"success"===e.type?(t.openBlock(),t.createBlock("svg",d,[m,h])):"default"===e.type?(t.openBlock(),t.createBlock("svg",f,[_,v])):(t.openBlock(),t.createBlock("svg",g,[y,w]))])};var T=t.defineComponent({name:"MToast",components:{MIcon:a},props:{visible:Boolean,text:{type:String,default:""},description:{type:String,default:""},toastBackgroundColor:{type:String,default:""},type:{type:String,default:"default"},onClose:{type:Function,default:()=>null},onCloseHandler:{type:Function,required:!0},offset:{type:Number,required:!0},id:{type:Number,required:!0},timeout:{type:Number,default:5e3},position:{type:String,required:!0},showCloseButton:{type:Boolean,default:!0},swipeClose:{type:Boolean,default:!0},hideProgressBar:{type:Boolean,default:!1},showIcon:{type:Boolean,default:!1},transition:{type:String,default:"bounce"}},setup(e,o){const n=t.ref(),{swipedDiff:a,startSwipeHandler:i,swipeStyle:l,cleanUpMove:p}=r(e.position,e.onCloseHandler,e.swipeClose),{transitionType:c}=(u=e.position,d=e.transition,m=a,{transitionType:t.computed((()=>m.value>200?"mosha__fadeOutLeft":m.value<-200?"mosha__fadeOutRight":s[u][d]))});var u,d,m;const{start:h,stop:f,progress:_}=((e,o)=>{const n=t.ref(),s=t.ref(0),r=t.ref(o),a=t.ref(),i=t.ref(100),l=()=>{clearInterval(a.value),clearTimeout(n.value)};return t.onMounted((()=>{})),t.onUnmounted((()=>{l()})),{start:()=>{s.value=Date.now(),clearTimeout(n.value),a.value=setInterval((()=>{i.value--}),o/100-2),n.value=setTimeout(e,r.value)},stop:()=>{clearInterval(a.value),clearTimeout(n.value),r.value-=Date.now()-s.value},clear:l,progress:i}})((()=>{e.onCloseHandler()}),e.timeout),v=t.computed((()=>o.slots.default)),g=t.computed((()=>/<\/?[a-z][\s\S]*>/i.test(e.description))),y=()=>{e.timeout>0&&h()};return t.watchEffect((()=>{const{customStyle:o}=((e,o,n)=>{const s=t.computed((()=>{switch(e){case"top-left":return{left:"0",top:`${o}px`};case"bottom-left":return{left:"0",bottom:`${o}px`};case"bottom-right":return{right:"0",bottom:`${o}px`};case"top-center":return{top:`${o}px`,left:"0",right:"0",marginRight:"auto",marginLeft:"auto"};case"bottom-center":return{bottom:`${o}px`,left:"0",right:"0",marginRight:"auto",marginLeft:"auto"};default:return{right:"0",top:`${o}px`}}}));return n.length>0&&(s.value.backgroundColor=n),{customStyle:s}})(e.position,e.offset,e.toastBackgroundColor);n.value=o.value})),t.onMounted((()=>{y()})),{style:n,transitionType:c,startTimer:y,stopTimer:()=>{e.timeout>0&&f()},progress:_,onTouchStart:e=>{i(e)},onMouseLeave:()=>{p("mousemove"),y()},onMouseDown:e=>{i(e)},swipeStyle:l,isSlotPassed:v,isDescriptionHtml:g}}});const b={class:"mosha__toast__content-wrapper"},C={class:"mosha__toast__content"},B={class:"mosha__toast__content__text"},N={key:1,class:"mosha__toast__content__description"},I={key:0,class:"mosha__toast__slot-wrapper"};T.render=function(e,o,n,s,r,a){const i=t.resolveComponent("MIcon");return t.openBlock(),t.createBlock(t.Transition,{name:e.transitionType,type:"animation"},{default:t.withCtx((()=>[e.visible?(t.openBlock(),t.createBlock("div",{key:0,class:["mosha__toast",e.toastBackgroundColor?null:e.type],style:[e.style,e.swipeStyle],onMouseenter:o[2]||(o[2]=(...t)=>e.stopTimer&&e.stopTimer(...t)),onMouseleave:o[3]||(o[3]=(...t)=>e.onMouseLeave&&e.onMouseLeave(...t)),onTouchstart:o[4]||(o[4]=(...t)=>e.onTouchStart&&e.onTouchStart(...t)),onMousedown:o[5]||(o[5]=(...t)=>e.onMouseDown&&e.onMouseDown(...t))},[t.createVNode("div",b,[e.showIcon?(t.openBlock(),t.createBlock(i,{key:0,type:e.type},null,8,["type"])):t.createCommentVNode("",!0),t.createVNode("div",C,[t.createVNode("div",B,t.toDisplayString(e.text),1),e.description.length>0&&e.isDescriptionHtml?(t.openBlock(),t.createBlock("div",{key:0,class:"mosha__toast__content__description",innerHTML:e.description},null,8,["innerHTML"])):t.createCommentVNode("",!0),e.description.length>0&&!e.isDescriptionHtml?(t.openBlock(),t.createBlock("div",N,t.toDisplayString(e.description),1)):t.createCommentVNode("",!0)])]),e.isSlotPassed?(t.openBlock(),t.createBlock("div",I,[t.renderSlot(e.$slots,"default")])):t.createCommentVNode("",!0),e.showCloseButton?(t.openBlock(),t.createBlock("div",{key:1,class:"mosha__toast__close-icon",onClick:o[1]||(o[1]=(...t)=>e.onCloseHandler&&e.onCloseHandler(...t))})):t.createCommentVNode("",!0),e.hideProgressBar?t.createCommentVNode("",!0):(t.openBlock(),t.createBlock("div",{key:2,class:"mosha__toast__progress",style:{width:`${e.progress}%`}},null,4))],38)):t.createCommentVNode("",!0)])),_:3},8,["name"])};const k={"top-left":[],"top-right":[],"bottom-left":[],"bottom-right":[],"top-center":[],"bottom-center":[]};let x=0;const S=(t,n)=>{if(!t)return;const s=n?P(n):o;if(t.__v_isVNode)return void V(e.ToastContentType.VNODE,s,t);if(t.hasOwnProperty("render"))return void V(e.ToastContentType.COMPONENT,s,t);const r=O(t);V(e.ToastContentType.TITLE_DESCRIPTION,s,r)},V=(o,n,s)=>{const r=z(n,k,12),a=x++,i=document.createElement("div");let l;document.body.appendChild(i),l=o===e.ToastContentType.VNODE?t.createVNode(T,M(n,a,r,E),(()=>[s])):o===e.ToastContentType.TITLE_DESCRIPTION?t.createVNode(T,M(n,a,r,E,s)):t.createVNode(T,M(n,a,r,E),(()=>[t.createVNode(s)])),t.render(l,i),n.position&&(k[n.position].push({toastVNode:l,container:i}),l.component&&(l.component.props.visible=!0))},M=(e,t,o,n,s)=>__assign(__assign(__assign({},e),s),{id:t,offset:o,visible:!1,onCloseHandler:()=>{n(t,e.position?e.position:"top-right")}}),P=e=>{const t=__assign(__assign({},e),{type:e.type||o.type,timeout:e.timeout||o.timeout,showCloseButton:e.showCloseButton,position:e.position||o.position,showIcon:e.showIcon,swipeClose:e.swipeClose,transition:e.transition||o.transition});return t.hideProgressBar=void 0!==t.timeout&&t.timeout<=0,void 0!==e.hideProgressBar&&(t.hideProgressBar=e.hideProgressBar),t},O=e=>({text:"string"==typeof e?e:e.title,description:"string"==typeof e?void 0:e.description}),z=(e,t,o)=>{let n=o;if(!e.position)throw new Error("no position");return t[e.position].forEach((({toastVNode:e})=>{const t=e.el.offsetHeight+o;n+=t||0})),n},E=(e,o)=>{const n=k[o],s=n.findIndex((({toastVNode:t})=>t.props&&e===t.props.id));if(-1===s)return;const{container:r,toastVNode:a}=n[s];if(!a.el)return;const i=a.el.offsetHeight;k[o].splice(s,1),((e,t,o,n)=>{for(let s=e;s<t.length;s++){const{toastVNode:e}=t[s];if(!e.el)return;const r=o.split("-")[0]||"top",a=parseInt(e.el.style[r],10)-n-12;if(!e.component)return;e.component.props.offset=a}})(s,n,o,i),a.component&&(a.component.props.visible=!1,a.component.props.onClose&&a.component.props.onClose(),setTimeout((()=>{t.render(null,r),document.body.removeChild(r)}),1e3))};var L={install:e=>{e.config.globalProperties.$moshaToast=S,e.provide("moshaToast",S)}};e.createToast=S,e.default=L,e.withProps=(e,o)=>t.createVNode(e,o),Object.defineProperty(e,"__esModule",{value:!0}),e[Symbol.toStringTag]="Module"})); | ||
var __defProp=Object.defineProperty,__hasOwnProp=Object.prototype.hasOwnProperty,__getOwnPropSymbols=Object.getOwnPropertySymbols,__propIsEnum=Object.prototype.propertyIsEnumerable,__defNormalProp=(e,t,o)=>t in e?__defProp(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,__assign=(e,t)=>{for(var o in t||(t={}))__hasOwnProp.call(t,o)&&__defNormalProp(e,o,t[o]);if(__getOwnPropSymbols)for(var o of __getOwnPropSymbols(t))__propIsEnum.call(t,o)&&__defNormalProp(e,o,t[o]);return e};!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["mosha-vue-toastify"]={},e.Vue)}(this,(function(e,t){"use strict";const o={type:"default",timeout:5e3,showCloseButton:!0,position:"top-right",transition:"bounce",hideProgressBar:!1,swipeClose:!0};var n;e.ToastContentType=void 0,(n=e.ToastContentType||(e.ToastContentType={}))[n.TITLE_ONLY=0]="TITLE_ONLY",n[n.TITLE_DESCRIPTION=1]="TITLE_DESCRIPTION",n[n.COMPONENT=2]="COMPONENT",n[n.VNODE=3]="VNODE";const s={"top-left":{bounce:"mosha__bounceInLeft",zoom:"mosha__zoomIn",slide:"mosha__slideInLeft"},"top-right":{bounce:"mosha__bounceInRight",zoom:"mosha__zoomIn",slide:"mosha__slideInRight"},"top-center":{bounce:"mosha__bounceInDown",zoom:"mosha__zoomIn",slide:"mosha__slideInDown"},"bottom-center":{bounce:"mosha__bounceInUp",zoom:"mosha__zoomIn",slide:"mosha__slideInUp"},"bottom-right":{bounce:"mosha__bounceInRight",zoom:"mosha__zoomIn",slide:"mosha__slideInRight"},"bottom-left":{bounce:"mosha__bounceInLeft",zoom:"mosha__zoomIn",slide:"mosha__slideInLeft"}},r=(e,t=300)=>{let o;return(...n)=>{o&&(clearTimeout(o),o=void 0),o=setTimeout((()=>e(...n)),t)}},i=(e,o,n)=>{const s=t.ref(),r=t.ref(void 0),i=t.ref(),a=e=>e instanceof MouseEvent,l=t=>{!1!==n&&s.value&&(a(t)?r.value=s.value.clientX-t.clientX:r.value=s.value.touches[0].clientX-t.touches[0].clientX,i.value=__assign(__assign({},i.value),{transition:"none"}),e.endsWith("left")?i.value.left=-r.value+"px !important":e.endsWith("right")?i.value.right=`${r.value}px !important`:r.value>0?i.value.left=-r.value+"px !important":i.value.right=`${r.value}px !important`,Math.abs(r.value)>200&&o())},c=e=>{!1!==n&&(s.value&&(s.value=void 0),r.value&&(r.value=void 0),removeEventListener(e,l))};return t.onUnmounted((()=>{!1!==n&&(c("mousemove"),c("touchmove"))})),{swipedDiff:r,swipeStart:s,swipeStyle:i,swipeHandler:l,startSwipeHandler:t=>{if(!1===n)return;s.value=t;const o=a(t)?"mousemove":"touchmove",c=a(t)?"mouseup":"touchend";addEventListener(o,l),addEventListener(c,(()=>(t=>{const o={transition:"left .3s ease-out",left:0},n={transition:"right .3s ease-out",right:0},a={transition:"all .3s ease-out",left:0,right:0};e.endsWith("left")?i.value=__assign(__assign({},i.value),o):e.endsWith("right")?i.value=__assign(__assign({},i.value),n):i.value=__assign(__assign({},i.value),a),s.value=void 0,r.value=void 0,removeEventListener(t,l)})(o)))},cleanUpMove:c}};var a=t.defineComponent({props:{type:{type:String,default:"default"}}});const l={class:"mosha__icon"},c={key:0,xmlns:"http://www.w3.org/2000/svg",height:"32px",viewBox:"0 0 24 24",width:"32px",fill:"#ffffff"},p=t.createVNode("path",{d:"M4.47 21h15.06c1.54 0 2.5-1.67 1.73-3L13.73 4.99c-.77-1.33-2.69-1.33-3.46 0L2.74 18c-.77 1.33.19 3 1.73 3zM12 14c-.55 0-1-.45-1-1v-2c0-.55.45-1 1-1s1 .45 1 1v2c0 .55-.45 1-1 1zm1 4h-2v-2h2v2z"},null,-1),u={key:1,xmlns:"http://www.w3.org/2000/svg",height:"32px",viewBox:"0 0 24 24",width:"32px",fill:"#ffffff"},d=t.createVNode("path",{d:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 11c-.55 0-1-.45-1-1V8c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1zm1 4h-2v-2h2v2z"},null,-1),m={key:2,xmlns:"http://www.w3.org/2000/svg",height:"32px",viewBox:"0 0 24 24",width:"32px",fill:"#ffffff"},h=t.createVNode("path",{d:"M0 0h24v24H0V0z",fill:"none"},null,-1),f=t.createVNode("path",{d:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM9.29 16.29L5.7 12.7c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0L10 14.17l6.88-6.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-7.59 7.59c-.38.39-1.02.39-1.41 0z"},null,-1),v={key:3,xmlns:"http://www.w3.org/2000/svg",height:"32px",viewBox:"0 0 24 24",width:"32px",fill:"#616161"},_=t.createVNode("path",{d:"M0 0h24v24H0z",fill:"none"},null,-1),g=t.createVNode("path",{d:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"},null,-1),w={key:4,xmlns:"http://www.w3.org/2000/svg",height:"32px",viewBox:"0 0 24 24",width:"32px",fill:"#ffffff"},y=t.createVNode("path",{d:"M0 0h24v24H0z",fill:"none"},null,-1),T=t.createVNode("path",{d:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"},null,-1);a.render=function(e,o,n,s,r,i){return t.openBlock(),t.createBlock("span",l,["warning"===e.type?(t.openBlock(),t.createBlock("svg",c,[p])):"danger"===e.type?(t.openBlock(),t.createBlock("svg",u,[d])):"success"===e.type?(t.openBlock(),t.createBlock("svg",m,[h,f])):"default"===e.type?(t.openBlock(),t.createBlock("svg",v,[_,g])):(t.openBlock(),t.createBlock("svg",w,[y,T]))])};var b=t.defineComponent({name:"MToast",components:{MIcon:a},props:{visible:Boolean,text:{type:String,default:""},description:{type:String,default:""},toastBackgroundColor:{type:String,default:""},type:{type:String,default:"default"},onClose:{type:Function,default:()=>null},onCloseHandler:{type:Function,required:!0},offset:{type:Number,required:!0},id:{type:Number,required:!0},timeout:{type:Number,default:5e3},position:{type:String,required:!0},showCloseButton:{type:Boolean,default:!0},swipeClose:{type:Boolean,default:!0},hideProgressBar:{type:Boolean,default:!1},showIcon:{type:Boolean,default:!1},transition:{type:String,default:"bounce"}},setup(e,o){const n=t.ref(),{width:a}=(()=>{const e=t.ref(-1),o=t.ref(-1),n=t=>{null!==t&&(e.value=t.currentTarget.innerWidth,o.value=t.currentTarget.innerHeight)};return t.onMounted((()=>{window.innerWidth>0&&(e.value=window.innerWidth,o.value=window.innerHeight),window.addEventListener("resize",r(n))})),t.onUnmounted((()=>{window.removeEventListener("resize",r(n))})),{width:e,height:o}})(),{swipedDiff:l,startSwipeHandler:c,swipeStyle:p,cleanUpMove:u}=i(e.position,e.onCloseHandler,e.swipeClose),{transitionType:d}=(m=e.position,h=e.transition,f=l,{transitionType:t.computed((()=>f.value>200?"mosha__fadeOutLeft":f.value<-200?"mosha__fadeOutRight":s[m][h]))});var m,h,f;const{start:v,stop:_,progress:g}=((e,o)=>{const n=t.ref(),s=t.ref(0),r=t.ref(o),i=t.ref(),a=t.ref(100),l=()=>{clearInterval(i.value),clearTimeout(n.value)};return t.onMounted((()=>{})),t.onUnmounted((()=>{l()})),{start:()=>{s.value=Date.now(),clearTimeout(n.value),i.value=setInterval((()=>{a.value--}),o/100-5),n.value=setTimeout(e,r.value)},stop:()=>{clearInterval(i.value),clearTimeout(n.value),r.value-=Date.now()-s.value},clear:l,progress:a}})((()=>{e.onCloseHandler()}),e.timeout),w=t.computed((()=>o.slots.default)),y=t.computed((()=>/<\/?[a-z][\s\S]*>/i.test(e.description))),T=()=>{e.timeout>0&&v()};return t.watchEffect((()=>{const{customStyle:o}=((e,o,n)=>{const s=t.computed((()=>{switch(e){case"top-left":return{left:"0",top:`${o}px`};case"bottom-left":return{left:"0",bottom:`${o}px`};case"bottom-right":return{right:"0",bottom:`${o}px`};case"top-center":return{top:`${o}px`,left:"0",right:"0",marginRight:"auto",marginLeft:"auto"};case"bottom-center":return{bottom:`${o}px`,left:"0",right:"0",marginRight:"auto",marginLeft:"auto"};default:return{right:"0",top:`${o}px`}}}));return n.length>0&&(s.value.backgroundColor=n),{customStyle:s}})(e.position,e.offset,e.toastBackgroundColor);n.value=o.value})),t.onMounted((()=>{T()})),{style:n,transitionType:d,startTimer:T,progress:g,onTouchStart:e=>{c(e)},onMouseLeave:()=>{u("mousemove"),T()},onMouseDown:e=>{c(e)},swipeStyle:p,isSlotPassed:w,isDescriptionHtml:y,onMouseEnter:()=>{e.timeout>0&&a.value>425&&_()}}}});const C={class:"mosha__toast__content-wrapper"},B={class:"mosha__toast__content"},N={class:"mosha__toast__content__text"},I={key:1,class:"mosha__toast__content__description"},k={key:0,class:"mosha__toast__slot-wrapper"};b.render=function(e,o,n,s,r,i){const a=t.resolveComponent("MIcon");return t.openBlock(),t.createBlock(t.Transition,{name:e.transitionType,type:"animation"},{default:t.withCtx((()=>[e.visible?(t.openBlock(),t.createBlock("div",{key:0,class:["mosha__toast",e.toastBackgroundColor?null:e.type],style:[e.style,e.swipeStyle],onMouseenter:o[2]||(o[2]=(...t)=>e.onMouseEnter&&e.onMouseEnter(...t)),onMouseleave:o[3]||(o[3]=(...t)=>e.onMouseLeave&&e.onMouseLeave(...t)),onTouchstart:o[4]||(o[4]=(...t)=>e.onTouchStart&&e.onTouchStart(...t)),onMousedown:o[5]||(o[5]=(...t)=>e.onMouseDown&&e.onMouseDown(...t))},[t.createVNode("div",C,[e.showIcon?(t.openBlock(),t.createBlock(a,{key:0,type:e.type},null,8,["type"])):t.createCommentVNode("",!0),t.createVNode("div",B,[t.createVNode("div",N,t.toDisplayString(e.text),1),e.description.length>0&&e.isDescriptionHtml?(t.openBlock(),t.createBlock("div",{key:0,class:"mosha__toast__content__description",innerHTML:e.description},null,8,["innerHTML"])):t.createCommentVNode("",!0),e.description.length>0&&!e.isDescriptionHtml?(t.openBlock(),t.createBlock("div",I,t.toDisplayString(e.description),1)):t.createCommentVNode("",!0)])]),e.isSlotPassed?(t.openBlock(),t.createBlock("div",k,[t.renderSlot(e.$slots,"default")])):t.createCommentVNode("",!0),e.showCloseButton?(t.openBlock(),t.createBlock("div",{key:1,class:"mosha__toast__close-icon",onClick:o[1]||(o[1]=(...t)=>e.onCloseHandler&&e.onCloseHandler(...t))})):t.createCommentVNode("",!0),e.hideProgressBar?t.createCommentVNode("",!0):(t.openBlock(),t.createBlock("div",{key:2,class:"mosha__toast__progress",style:{width:`${e.progress}%`}},null,4))],38)):t.createCommentVNode("",!0)])),_:3},8,["name"])};const x={"top-left":[],"top-right":[],"bottom-left":[],"bottom-right":[],"top-center":[],"bottom-center":[]};let M=0;const S=(t,n)=>{if(!t)return{close:()=>console.warn("no toast available.")};const s=n?P(n):o;if(t.__v_isVNode){return{close:V(e.ToastContentType.VNODE,s,t)}}if(t.hasOwnProperty("render")){return{close:V(e.ToastContentType.COMPONENT,s,t)}}const r=z(t);return{close:V(e.ToastContentType.TITLE_DESCRIPTION,s,r)}},V=(o,n,s)=>{const r=O(n,x,12),i=M++,a=document.createElement("div");let l;return document.body.appendChild(a),l=o===e.ToastContentType.VNODE?t.createVNode(b,E(n,i,r,L),(()=>[s])):o===e.ToastContentType.TITLE_DESCRIPTION?t.createVNode(b,E(n,i,r,L,s)):t.createVNode(b,E(n,i,r,L),(()=>[t.createVNode(s)])),t.render(l,a),x[n.position].push({toastVNode:l,container:a}),l.component&&(l.component.props.visible=!0),()=>L(i,n.position)},E=(e,t,o,n,s)=>__assign(__assign(__assign({},e),s),{id:t,offset:o,visible:!1,onCloseHandler:()=>{n(t,e.position?e.position:"top-right")}}),P=e=>{const t=__assign(__assign({},e),{type:e.type||o.type,timeout:e.timeout||o.timeout,showCloseButton:e.showCloseButton,position:e.position||o.position,showIcon:e.showIcon,swipeClose:e.swipeClose,transition:e.transition||o.transition});return t.hideProgressBar=void 0!==t.timeout&&t.timeout<=0,void 0!==e.hideProgressBar&&(t.hideProgressBar=e.hideProgressBar),t},z=e=>({text:"string"==typeof e?e:e.title,description:"string"==typeof e?void 0:e.description}),O=(e,t,o)=>{let n=o;if(!e.position)throw new Error("no position");return t[e.position].forEach((({toastVNode:e})=>{const t=e.el.offsetHeight+o;n+=t||0})),n},L=(e,o)=>{const n=x[o],s=n.findIndex((({toastVNode:t})=>t.props&&e===t.props.id));if(-1===s)return;const{container:r,toastVNode:i}=n[s];if(!i.el)return;const a=i.el.offsetHeight;x[o].splice(s,1),((e,t,o,n)=>{for(let s=e;s<t.length;s++){const{toastVNode:e}=t[s];if(!e.el)return;const r=o.split("-")[0]||"top",i=parseInt(e.el.style[r],10)-n-12;if(!e.component)return;e.component.props.offset=i}})(s,n,o,a),i.component&&(i.component.props.visible=!1,i.component.props.onClose&&i.component.props.onClose(),setTimeout((()=>{t.render(null,r),document.body.removeChild(r)}),1e3))};var D={install:e=>{e.config.globalProperties.$moshaToast=S,e.provide("moshaToast",S)}};e.clearToasts=()=>{Object.entries(x).forEach((([e,t])=>{if(t.length>0){t.map((e=>e.toastVNode.props.id)).forEach((t=>{L(t,e)}))}}))},e.createToast=S,e.default=D,e.withProps=(e,o)=>t.createVNode(e,o),Object.defineProperty(e,"__esModule",{value:!0}),e[Symbol.toStringTag]="Module"})); |
import { Component, VNode } from 'vue'; | ||
export declare const withProps: (component: Component, props: (Record<string, unknown>)) => VNode; | ||
export declare const debounce: <T extends (...args: any[]) => any>(fn: T, delay?: number) => (...args: any[]) => void; |
{ | ||
"name": "mosha-vue-toastify", | ||
"version": "1.0.18", | ||
"version": "1.0.19", | ||
"license": "MIT", | ||
@@ -5,0 +5,0 @@ "description": "A light weight and fun Vue 3 toast or notification or snack bar or however you wanna call it library.", |
@@ -65,3 +65,3 @@ # Mosha Vue Toastify | ||
## 自定义 | ||
## 具体用法 | ||
@@ -105,20 +105,54 @@ | ||
| name | type | default | description | | ||
| ------------- |:-------------:| -----:| -----:| | ||
| type | 'info', 'danger', 'warning', 'success', 'default' | 'default' | 给与不同的样式 | | ||
| timeout | number | 5000 | 自定义多少ms后关闭 | ||
| position | 'top-left', 'top-right', 'bottom-left', 'bottom-right', 'top-center', 'bottom-center' | 'top-right' | 自定义提醒框位置 | | ||
| showCloseButton | boolean | true | 显示关闭按钮 | | ||
| showIcon | boolean | false | 显示图标 | | ||
| transition | 'bounce', 'zoom', 'slide' | 'bounce' | 自定义动画 | | ||
| hideProgressBar | boolean | false | 关闭进度条 | | ||
| swipeClose | boolean | true | 是否允许滑动关闭 | | ||
| toastBackgroundColor | string | default color | 自定义背景颜色 | | ||
| onClose | function | N/A | 这个方法会在提醒框消失时调用 | | ||
Options: | ||
- **以编程的方式关闭提醒框** | ||
`createToast`函数会返回一个对象,对象中包含一个叫`close`的函数。调用`close`函数会关闭所属提醒框,请看下面例子。 | ||
```ts | ||
import { createToast } from 'mosha-vue-toastify'; | ||
import CustomizedContent from "./CustomizedContent.vue"; | ||
import 'mosha-vue-toastify/dist/style.css'; | ||
| name | type | default | description | | ||
| ------------- |:-------------:| -----:| -----:| | ||
| type | 'info', 'danger', 'warning', 'success', 'default' | 'default' | 给与不同的样式 | | ||
| timeout | number | 5000 | 自定义多少ms后关闭 | ||
| position | 'top-left', 'top-right', 'bottom-left', 'bottom-right', 'top-center', 'bottom-center' | 'top-right' | 自定义提醒框位置 | | ||
| showCloseButton | boolean | true | 显示关闭按钮 | | ||
| showIcon | boolean | false | 显示图标 | | ||
| transition | 'bounce', 'zoom', 'slide' | 'bounce' | 自定义动画 | | ||
| hideProgressBar | boolean | false | 关闭进度条 | | ||
| swipeClose | boolean | true | 是否允许滑动关闭 | | ||
| toastBackgroundColor | string | default color | 自定义背景颜色 | | ||
| onClose | function | N/A | 这个方法会在提醒框消失时调用 | | ||
export default defineComponent({ | ||
setup () { | ||
const toast = () => { | ||
// 调用close能直接关闭提醒框 | ||
const { close } = createToast(CustomizedContent) | ||
// close() | ||
} | ||
return { toast } | ||
} | ||
}) | ||
``` | ||
调用`clearToasts`函数会关闭页面上所有的提醒框。 | ||
```ts | ||
import { createToast, clearToasts } from 'mosha-vue-toastify'; | ||
import CustomizedContent from "./CustomizedContent.vue"; | ||
import 'mosha-vue-toastify/dist/style.css'; | ||
export default defineComponent({ | ||
setup () { | ||
const clear = () => { | ||
// 关闭所以提醒框 | ||
clearToasts() | ||
} | ||
return { clear } | ||
} | ||
}) | ||
``` | ||
## 支持一下吧 | ||
喜欢的话给这个[项目](https://github.com/szboynono/mosha-vue-toastify) 一个⭐吧。有什么建议的话欢迎开issue噢。 |
@@ -105,20 +105,55 @@ # Mosha Vue Toastify | ||
| name | type | default | description | | ||
| ------------- |:-------------:| -----:| -----:| | ||
| type | 'info', 'danger', 'warning', 'success', 'default' | 'default' | Give the toast different styles and icons. | | ||
| timeout | number | 5000 | How many ms you want the toggle to close itself? | ||
| position | 'top-left', 'top-right', 'bottom-left', 'bottom-right', 'top-center', 'bottom-center' | 'top-right' | Where do you want the toast to appear? | | ||
| showCloseButton | boolean | true | Do you wanna show the close button ? | | ||
| showIcon | boolean | false | Do you wanna show the icon ? | | ||
| transition | 'bounce', 'zoom', 'slide' | 'bounce' | Which animation do you want? | | ||
| hideProgressBar | boolean | false | Do we wanna hide the fancy progress bar? | | ||
| swipeClose | boolean | true | Allows the user swipe close the toast | | ||
| toastBackgroundColor | string | default color | Customize the background color of the toast. | | ||
| onClose | function | N/A | This function will be called at the end of the toast's lifecycle| | ||
Options: | ||
- **Programatically closing** | ||
The `createToast` function returns an object that contains a `close` funtion that allows the user to programatically dismiss the toast. See below: | ||
```ts | ||
import { createToast } from 'mosha-vue-toastify'; | ||
import CustomizedContent from "./CustomizedContent.vue"; | ||
import 'mosha-vue-toastify/dist/style.css'; | ||
| name | type | default | description | | ||
| ------------- |:-------------:| -----:| -----:| | ||
| type | 'info', 'danger', 'warning', 'success', 'default' | 'default' | Give the toast different styles and icons. | | ||
| timeout | number | 5000 | How many ms you want the toggle to close itself? | ||
| position | 'top-left', 'top-right', 'bottom-left', 'bottom-right', 'top-center', 'bottom-center' | 'top-right' | Where do you want the toast to appear? | | ||
| showCloseButton | boolean | true | Do you wanna show the close button ? | | ||
| showIcon | boolean | false | Do you wanna show the icon ? | | ||
| transition | 'bounce', 'zoom', 'slide' | 'bounce' | Which animation do you want? | | ||
| hideProgressBar | boolean | false | Do we wanna hide the fancy progress bar? | | ||
| swipeClose | boolean | true | Allows the user swipe close the toast | | ||
| toastBackgroundColor | string | default color | Customize the background color of the toast. | | ||
| onClose | function | N/A | This function will be called at the end of the toast's lifecycle| | ||
export default defineComponent({ | ||
setup () { | ||
const toast = () => { | ||
// This close function can be used to close the toast | ||
const { close } = createToast(CustomizedContent) | ||
// close() | ||
} | ||
return { toast } | ||
} | ||
}) | ||
``` | ||
To clear all the toasts, use the `clearToasts` function. See below | ||
```ts | ||
import { createToast, clearToasts } from 'mosha-vue-toastify'; | ||
import CustomizedContent from "./CustomizedContent.vue"; | ||
import 'mosha-vue-toastify/dist/style.css'; | ||
export default defineComponent({ | ||
setup () { | ||
const clear = () => { | ||
// clears all the toasts | ||
clearToasts() | ||
} | ||
return { clear } | ||
} | ||
}) | ||
``` | ||
## Support | ||
Give this [project](https://github.com/szboynono/mosha-vue-toastify) a ⭐ if you like it. Any suggestions are welcome! |
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
52260
17
221
158
1