solid-toast - npm Package Compare versions

Comparing version 0.0.11 to 0.0.12

dist/solid-toast.cjs.js

@@ -1,1 +0,1 @@
-"use strict";var t=Object.defineProperty,e=Object.defineProperties,o=Object.getOwnPropertyDescriptors,s=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,i=Object.prototype.propertyIsEnumerable,a=(e,o,s)=>o in e?t(e,o,{enumerable:!0,configurable:!0,writable:!0,value:s}):e[o]=s,n=(t,e)=>{for(var o in e||(e={}))r.call(e,o)&&a(t,o,e[o]);if(s)for(var o of s(e))i.call(e,o)&&a(t,o,e[o]);return t},l=(t,s)=>e(t,o(s));Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var c=require("solid-js"),p=require("goober"),d=require("solid-js/web");const y=(t,e)=>(t=>"function"==typeof t)(t)?t(e):t;var u=(t=>(t[t.ADD_TOAST=0]="ADD_TOAST",t[t.UPDATE_TOAST=1]="UPDATE_TOAST",t[t.UPSERT_TOAST=2]="UPSERT_TOAST",t[t.DISMISS_TOAST=3]="DISMISS_TOAST",t[t.REMOVE_TOAST=4]="REMOVE_TOAST",t[t.START_PAUSE=5]="START_PAUSE",t[t.END_PAUSE=6]="END_PAUSE",t))(u||{});const[m,f]=c.createSignal({toasts:[],pausedAt:void 0});c.createEffect((()=>{const{pausedAt:t,toasts:e}=m();if(t)return;const o=Date.now(),s=e.map((t=>{if(t.duration===1/0)return;const e=(t.duration||0)+t.pauseDuration-(o-t.createdAt);if(!(e<=0))return setTimeout((()=>{h({type:u.DISMISS_TOAST,toastId:t.id})}),e);t.visible&&h({type:u.DISMISS_TOAST,toastId:t.id})}));c.onCleanup((()=>{s.forEach((t=>t&&clearTimeout(t)))}))}));const v=new Map,g=(t,e)=>{if(v.has(t))return;const o=setTimeout((()=>{v.delete(t),h({type:u.REMOVE_TOAST,toastId:t})}),e);v.set(t,o)},h=t=>{switch(t.type){case u.ADD_TOAST:f((e=>l(n({},e),{toasts:[t.toast,...e.toasts]})));break;case u.DISMISS_TOAST:const{toastId:e}=t,o=m().toasts;if(e){const t=o.find((t=>t.id===e));t&&g(e,t.unmountDelay)}else o.forEach((t=>{g(t.id,t.unmountDelay)}));f((t=>l(n({},t),{toasts:t.toasts.map((t=>t.id===e?l(n({},t),{visible:!1}):t))})));break;case u.REMOVE_TOAST:if(!t.toastId){f((t=>l(n({},t),{toasts:[]})));break}f((e=>l(n({},e),{toasts:e.toasts.filter((e=>e.id!==t.toastId))})));break;case u.UPDATE_TOAST:t.toast.id&&(t=>{const e=v.get(t);v.delete(t),e&&clearTimeout(e)})(t.toast.id),f((e=>l(n({},e),{toasts:e.toasts.map((e=>e.id===t.toast.id?l(n(n({},e),t.toast),{updatedAt:t.silent?void 0:Date.now()}):e))})));break;case u.UPSERT_TOAST:m().toasts.find((e=>e.id===t.toast.id))?h({type:u.UPDATE_TOAST,toast:t.toast}):h({type:u.ADD_TOAST,toast:t.toast});break;case u.START_PAUSE:f((e=>l(n({},e),{pausedAt:t.time})));break;case u.END_PAUSE:const s=t.time-(m().pausedAt||0);f((t=>l(n({},t),{pausedAt:void 0,toasts:t.toasts.map((t=>l(n({},t),{pauseDuration:t.pauseDuration+s})))})))}},S={blank:4e3,error:4e3,success:2e3,loading:1/0,custom:4e3},_={id:"",icon:"",unmountDelay:500,duration:3e3,ariaProps:{role:"status","aria-live":"polite"},className:"",style:{},position:"top-right",iconTheme:{}},T={position:"top-right",toastOptions:_,gutter:8,containerStyle:{},containerClassName:""},b={position:"fixed","z-index":9999,top:"16px",bottom:"16px",left:"16px",right:"16px","pointer-events":"none"},A=(()=>{let t=0;return()=>String(++t)})(),$=(t,e)=>(t.position||e).includes("top")?1:-1,P={display:"flex","align-items":"center",background:"white",color:"#363636","box-shadow":"0 3px 10px rgba(0, 0, 0, 0.1), 0 3px 3px rgba(0, 0, 0, 0.05)","max-width":"350px","pointer-events":"auto",padding:"8px 10px","border-radius":"4px","line-height":"1.3","will-change":"transform"},x={display:"flex","align-items":"center",flex:"1 1 auto",margin:"4px 10px","white-space":"pre-line"},O={"flex-shrink":0,width:"20px",height:"20px"},w=p.keyframes`from{transform:scale(0)rotate(45deg);opacity:0;}to{transform:scale(1)rotate(45deg);opacity:1;}`,k=p.keyframes`75%,100%{transform: scale(2.25);opacity:0;}`,E=p.keyframes`to{stroke-dashoffset: 0;}`,D=p.keyframes`0%{transform:translate3d(0,0,0);opacity:1;}100%{transform:translate3d(0,7px,0)scale(1);opacity:1;}`,C=p.keyframes`from{transform: rotate(0deg);}to{transform: rotate(360deg);}`,[M,N]=c.createSignal(T),I=t=>(e,o={})=>{const s=m().toasts.find((t=>t.id===o.id)),r=((t,e="blank",o)=>{var s,r,i;return l(n(n(n({},_),M().toastOptions),o),{type:e,message:t,pauseDuration:0,createdAt:Date.now(),visible:!0,id:o.id||A(),style:n(n(n({},_.style),null==(s=M().toastOptions)?void 0:s.style),o.style),duration:o.duration||(null==(r=M().toastOptions)?void 0:r.duration)||S[e],position:o.position||(null==(i=M().toastOptions)?void 0:i.position)||M().position||_.position})})(e,t,n(l(n({},s),{duration:void 0}),o));return h({type:u.UPSERT_TOAST,toast:r}),r.id},F=(t,e)=>I("blank")(t,e);F.error=I("error"),F.success=I("success"),F.loading=I("loading"),F.custom=I("custom"),F.dismiss=t=>{h({type:u.DISMISS_TOAST,toastId:t})},F.promise=(t,e,o)=>{const s=F.loading(e.loading,n({},o));return t.then((t=>(F.success(y(e.success,t),n({id:s},o)),t))).catch((t=>{F.error(y(e.error,t),n({id:s},o))})),t},F.remove=t=>{h({type:u.REMOVE_TOAST,toastId:t})};const U=d.template("<div></div>",2),R=d.template("<div></div>",2),j=d.template("<div><div></div></div>",4),z=t=>{const e=y(t.toast.message,t.toast),[o,s]=c.createSignal("");return c.createEffect((()=>{var e;t.toast.visible&&!t.toast.updatedAt&&s(`${p.keyframes((e=$(t.toast,t.position),`\n0% {transform: translate3d(0,${-200*e}%,0) scale(.6); opacity:.5;}\n100% {transform: translate3d(0,0,0) scale(1); opacity:1;}\n`))} 0.35s cubic-bezier(.21,1.02,.73,1) forwards`),!t.toast.visible&&s(`${p.keyframes((t=>`\n0% {transform: translate3d(0,0,-1px) scale(1); opacity:1;}\n100% {transform: translate3d(0,${-150*t}%,-1px) scale(.4); opacity:0;}\n`)($(t.toast,t.position)))}  0.4s forwards cubic-bezier(.06,.71,.55,1)`)})),(()=>{const s=j.cloneNode(!0),r=s.firstChild;return d.insert(s,d.createComponent(c.Switch,{get children(){return[d.createComponent(c.Match,{get when(){return t.toast.icon},get children(){const e=R.cloneNode(!0);return d.style(e,O),d.insert(e,(()=>t.toast.icon)),e}}),d.createComponent(c.Match,{get when(){return"loading"===t.toast.type},get children(){const e=R.cloneNode(!0);return d.style(e,O),d.insert(e,d.createComponent(L,d.mergeProps((()=>t.toast.iconTheme)))),e}}),d.createComponent(c.Match,{get when(){return"success"===t.toast.type},get children(){const e=R.cloneNode(!0);return d.style(e,O),d.insert(e,d.createComponent(G,d.mergeProps((()=>t.toast.iconTheme)))),e}}),d.createComponent(c.Match,{get when(){return"error"===t.toast.type},get children(){const e=R.cloneNode(!0);return d.style(e,O),d.insert(e,d.createComponent(J,d.mergeProps((()=>t.toast.iconTheme)))),e}})]}}),r),d.style(r,x),d.spread(r,(()=>t.toast.ariaProps),!1,!0),d.insert(r,e),d.effect((e=>{const r=t.toast.className,i=n(l(n({},P),{animation:o()}),t.toast.style);return r!==e._v$&&d.className(s,e._v$=r),e._v$2=d.style(s,i,e._v$2),e}),{_v$:void 0,_v$2:void 0}),s})()},B=d.template("<div></div>",2),V=p.css`z-index: 9999;> * { pointer-events: auto;}`,q=t=>{const e=()=>{const e=t.toast.position||_.position,o=((t,e)=>{const{toasts:o}=m(),s=M().gutter||T.gutter||8,r=o.filter((t=>(t.position||e)===e&&t.height)),i=r.findIndex((e=>e.id===t.id)),a=r.filter(((t,e)=>e<i&&t.visible)).length;return r.slice(0,a).reduce(((t,e)=>t+s+(e.height||0)),0)})(t.toast,e),s=((t,e)=>{const o=t.includes("top"),s=o?{top:0}:{bottom:0},r=t.includes("center")?{"justify-content":"center"}:t.includes("right")?{"justify-content":"flex-end"}:{};return n(n({left:0,right:0,display:"flex",position:"absolute",transition:"all 230ms cubic-bezier(.21,1.02,.73,1)",transform:`translateY(${e*(o?1:-1)}px)`},s),r)})(e,o);return s},[o,s]=c.createSignal(e());let r;return c.createEffect(c.on(m,(()=>{const t=e();s(t)}))),c.onMount((()=>{r&&((t,e)=>{const o=t.getBoundingClientRect();o.height!==e.height&&h({type:u.UPDATE_TOAST,toast:{id:e.id,height:o.height},silent:!0})})(r,t.toast)})),(()=>{const e=B.cloneNode(!0);return"function"==typeof r?r(e):r=e,d.insert(e,(()=>{const e=d.memo((()=>"custom"===t.toast.type),!0);return()=>e()?y(t.toast.message,t.toast):d.createComponent(z,{get toast(){return t.toast},get position(){return t.toast.position||_.position}})})()),d.effect((s=>{const r=o(),i=t.toast.visible?V:"";return s._v$=d.style(e,r,s._v$),i!==s._v$2&&d.className(e,s._v$2=i),s}),{_v$:void 0,_v$2:void 0}),e})()},Y=d.template('<svg viewBox="0 0 32 32"><circle cx="16" cy="16" r="16"></circle><circle cx="16" cy="16" r="12"></circle><path fill="none" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M9.8,17.2l3.8,3.6c0.1,0.1,0.3,0.1,0.4,0l9.6-9.7"></path></svg>',8),G=t=>{const e=`${w} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards`,o=`${k} 1s cubic-bezier(0, 0, 0.2, 1) forwards`,s=`${E} 0.2s ease-out forwards`;return(()=>{const r=Y.cloneNode(!0),i=r.firstChild,a=i.nextSibling,n=a.nextSibling;return r.style.setProperty("overflow","visible"),i.style.setProperty("animation",e),i.style.setProperty("transform-origin","50% 50%"),i.style.setProperty("animation-delay","100ms"),i.style.setProperty("opacity","0"),a.style.setProperty("animation",o),a.style.setProperty("transform-origin","50% 50%"),a.style.setProperty("animation-delay","250ms"),n.style.setProperty("animation",s),n.style.setProperty("stroke-dasharray","22"),n.style.setProperty("stroke-dashoffset","22"),n.style.setProperty("animation-delay","250ms"),d.effect((e=>{const o=t.primary||"#34C759",s=t.primary||"#34C759",r=t.secondary||"#FCFCFC";return o!==e._v$&&d.setAttribute(i,"fill",e._v$=o),s!==e._v$2&&d.setAttribute(a,"fill",e._v$2=s),r!==e._v$3&&d.setAttribute(n,"stroke",e._v$3=r),e}),{_v$:void 0,_v$2:void 0,_v$3:void 0}),r})()},H=d.template('<svg viewBox="0 0 32 32"><circle cx="16" cy="16" r="16"></circle><circle cx="16" cy="16" r="12"></circle><path fill="none" stroke-width="4" stroke-linecap="round" d="M16,7l0,9"></path><circle cx="16" cy="16" r="2.5"></circle></svg>',10),J=t=>{const e=`${w} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards`,o=`${k} 1s cubic-bezier(0, 0, 0.2, 1) forwards`,s=`${E} 0.1s ease-in forwards`,r=`${D} 0.2s ease-out forwards`;return(()=>{const i=H.cloneNode(!0),a=i.firstChild,n=a.nextSibling,l=n.nextSibling,c=l.nextSibling;return i.style.setProperty("overflow","visible"),a.style.setProperty("animation",e),a.style.setProperty("transform-origin","50% 50%"),a.style.setProperty("animation-delay","100ms"),a.style.setProperty("opacity","0"),n.style.setProperty("animation",o),n.style.setProperty("transform-origin","50% 50%"),n.style.setProperty("animation-delay","320ms"),l.style.setProperty("animation",s),l.style.setProperty("stroke-dasharray","9"),l.style.setProperty("stroke-dashoffset","9"),l.style.setProperty("animation-delay","200ms"),c.style.setProperty("animation",r),c.style.setProperty("animation-delay","320ms"),c.style.setProperty("opacity","0"),d.effect((e=>{const o=t.primary||"#FF3B30",s=t.primary||"#FF3B30",r=t.secondary||"#FFFFFF",i=t.secondary||"#FFFFFF";return o!==e._v$&&d.setAttribute(a,"fill",e._v$=o),s!==e._v$2&&d.setAttribute(n,"fill",e._v$2=s),r!==e._v$3&&d.setAttribute(l,"stroke",e._v$3=r),i!==e._v$4&&d.setAttribute(c,"fill",e._v$4=i),e}),{_v$:void 0,_v$2:void 0,_v$3:void 0,_v$4:void 0}),i})()},K=d.template('<svg viewBox="0 0 32 32"><path fill="none" stroke-width="4" stroke-miterlimit="10" d="M16,6c3,0,5.7,1.3,7.5,3.4c1.5,1.8,2.5,4,2.5,6.6c0,5.5-4.5,10-10,10S6,21.6,6,16S10.5,6,16,6z"></path><path fill="none" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M16,6c3,0,5.7,1.3,7.5,3.4c0.6,0.7,1.1,1.4,1.5,2.2"></path></svg>',6),L=t=>{const e=`${C} 0.75s linear infinite`;return(()=>{const o=K.cloneNode(!0),s=o.firstChild,r=s.nextSibling;return o.style.setProperty("overflow","visible"),r.style.setProperty("animation",e),r.style.setProperty("transform-origin","50% 50%"),d.effect((e=>{const o=t.primary||"#E5E7EB",i=t.secondary||"#4b5563";return o!==e._v$&&d.setAttribute(s,"stroke",e._v$=o),i!==e._v$2&&d.setAttribute(r,"stroke",e._v$2=i),e}),{_v$:void 0,_v$2:void 0}),o})()};exports.ActionType=u,exports.Toaster=t=>(c.createEffect((()=>{(t=>{N((e=>{var o,s,r,i;return{containerClassName:null!=(o=t.containerClassName)?o:e.containerClassName,containerStyle:null!=(s=t.containerStyle)?s:e.containerStyle,gutter:null!=(r=t.gutter)?r:e.gutter,position:null!=(i=t.position)?i:e.position,toastOptions:n({},t.toastOptions)}}))})(t)})),(()=>{const e=U.cloneNode(!0);return d.insert(e,d.createComponent(c.For,{get each(){return m().toasts},children:t=>d.createComponent(q,{toast:t})})),d.effect((o=>{const s=n(n({},b),t.containerStyle),r=t.containerClassName;return o._v$=d.style(e,s,o._v$),r!==o._v$2&&d.className(e,o._v$2=r),o}),{_v$:void 0,_v$2:void 0}),e})()),exports.default=F,exports.resolveValue=y,exports.toast=F;
+"use strict";var t=Object.defineProperty,e=Object.defineProperties,o=Object.getOwnPropertyDescriptors,s=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,i=Object.prototype.propertyIsEnumerable,a=(e,o,s)=>o in e?t(e,o,{enumerable:!0,configurable:!0,writable:!0,value:s}):e[o]=s,n=(t,e)=>{for(var o in e||(e={}))r.call(e,o)&&a(t,o,e[o]);if(s)for(var o of s(e))i.call(e,o)&&a(t,o,e[o]);return t},l=(t,s)=>e(t,o(s));Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var c=require("solid-js"),p=require("goober"),d=require("solid-js/web");const y=(t,e)=>(t=>"function"==typeof t)(t)?t(e):t;var u=(t=>(t[t.ADD_TOAST=0]="ADD_TOAST",t[t.UPDATE_TOAST=1]="UPDATE_TOAST",t[t.UPSERT_TOAST=2]="UPSERT_TOAST",t[t.DISMISS_TOAST=3]="DISMISS_TOAST",t[t.REMOVE_TOAST=4]="REMOVE_TOAST",t[t.START_PAUSE=5]="START_PAUSE",t[t.END_PAUSE=6]="END_PAUSE",t))(u||{});const[m,f]=c.createSignal({toasts:[],pausedAt:void 0}),v=new Map,g=(t,e)=>{if(v.has(t))return;const o=setTimeout((()=>{v.delete(t),h({type:u.REMOVE_TOAST,toastId:t})}),e);v.set(t,o)},h=t=>{switch(t.type){case u.ADD_TOAST:f((e=>l(n({},e),{toasts:[t.toast,...e.toasts]})));break;case u.DISMISS_TOAST:const{toastId:e}=t,o=m().toasts;if(e){const t=o.find((t=>t.id===e));t&&g(e,t.unmountDelay)}else o.forEach((t=>{g(t.id,t.unmountDelay)}));f((t=>l(n({},t),{toasts:t.toasts.map((t=>t.id===e?l(n({},t),{visible:!1}):t))})));break;case u.REMOVE_TOAST:if(!t.toastId){f((t=>l(n({},t),{toasts:[]})));break}f((e=>l(n({},e),{toasts:e.toasts.filter((e=>e.id!==t.toastId))})));break;case u.UPDATE_TOAST:t.toast.id&&(t=>{const e=v.get(t);v.delete(t),e&&clearTimeout(e)})(t.toast.id),f((e=>l(n({},e),{toasts:e.toasts.map((e=>e.id===t.toast.id?l(n(n({},e),t.toast),{updatedAt:t.silent?void 0:Date.now()}):e))})));break;case u.UPSERT_TOAST:m().toasts.find((e=>e.id===t.toast.id))?h({type:u.UPDATE_TOAST,toast:t.toast}):h({type:u.ADD_TOAST,toast:t.toast});break;case u.START_PAUSE:f((e=>l(n({},e),{pausedAt:t.time})));break;case u.END_PAUSE:const s=t.time-(m().pausedAt||0);f((t=>l(n({},t),{pausedAt:void 0,toasts:t.toasts.map((t=>l(n({},t),{pauseDuration:t.pauseDuration+s})))})))}},S={blank:4e3,error:4e3,success:2e3,loading:1/0,custom:4e3},_={id:"",icon:"",unmountDelay:500,duration:3e3,ariaProps:{role:"status","aria-live":"polite"},className:"",style:{},position:"top-right",iconTheme:{}},T={position:"top-right",toastOptions:_,gutter:8,containerStyle:{},containerClassName:""},b={position:"fixed","z-index":9999,top:"16px",bottom:"16px",left:"16px",right:"16px","pointer-events":"none"},A=(()=>{let t=0;return()=>String(++t)})(),$=(t,e)=>(t.position||e).includes("top")?1:-1,P={display:"flex","align-items":"center",background:"white",color:"#363636","box-shadow":"0 3px 10px rgba(0, 0, 0, 0.1), 0 3px 3px rgba(0, 0, 0, 0.05)","max-width":"350px","pointer-events":"auto",padding:"8px 10px","border-radius":"4px","line-height":"1.3","will-change":"transform"},x={display:"flex","align-items":"center",flex:"1 1 auto",margin:"4px 10px","white-space":"pre-line"},O={"flex-shrink":0,width:"20px",height:"20px"},w=p.keyframes`from{transform:scale(0)rotate(45deg);opacity:0;}to{transform:scale(1)rotate(45deg);opacity:1;}`,k=p.keyframes`75%,100%{transform: scale(2.25);opacity:0;}`,E=p.keyframes`to{stroke-dashoffset: 0;}`,D=p.keyframes`0%{transform:translate3d(0,0,0);opacity:1;}100%{transform:translate3d(0,7px,0)scale(1);opacity:1;}`,C=p.keyframes`from{transform: rotate(0deg);}to{transform: rotate(360deg);}`,[M,N]=c.createSignal(T),I=t=>(e,o={})=>{const s=m().toasts.find((t=>t.id===o.id)),r=((t,e="blank",o)=>{var s,r,i;return l(n(n(n({},_),M().toastOptions),o),{type:e,message:t,pauseDuration:0,createdAt:Date.now(),visible:!0,id:o.id||A(),style:n(n(n({},_.style),null==(s=M().toastOptions)?void 0:s.style),o.style),duration:o.duration||(null==(r=M().toastOptions)?void 0:r.duration)||S[e],position:o.position||(null==(i=M().toastOptions)?void 0:i.position)||M().position||_.position})})(e,t,n(l(n({},s),{duration:void 0}),o));return h({type:u.UPSERT_TOAST,toast:r}),r.id},F=(t,e)=>I("blank")(t,e);F.error=I("error"),F.success=I("success"),F.loading=I("loading"),F.custom=I("custom"),F.dismiss=t=>{h({type:u.DISMISS_TOAST,toastId:t})},F.promise=(t,e,o)=>{const s=F.loading(e.loading,n({},o));return t.then((t=>(F.success(y(e.success,t),n({id:s},o)),t))).catch((t=>{F.error(y(e.error,t),n({id:s},o))})),t},F.remove=t=>{h({type:u.REMOVE_TOAST,toastId:t})};const U=d.template("<div></div>",2),R=d.template("<div></div>",2),j=d.template("<div><div></div></div>",4),z=t=>{const e=y(t.toast.message,t.toast),[o,s]=c.createSignal("");return c.createEffect((()=>{var e;t.toast.visible&&!t.toast.updatedAt&&s(`${p.keyframes((e=$(t.toast,t.position),`\n0% {transform: translate3d(0,${-200*e}%,0) scale(.6); opacity:.5;}\n100% {transform: translate3d(0,0,0) scale(1); opacity:1;}\n`))} 0.35s cubic-bezier(.21,1.02,.73,1) forwards`),!t.toast.visible&&s(`${p.keyframes((t=>`\n0% {transform: translate3d(0,0,-1px) scale(1); opacity:1;}\n100% {transform: translate3d(0,${-150*t}%,-1px) scale(.4); opacity:0;}\n`)($(t.toast,t.position)))}  0.4s forwards cubic-bezier(.06,.71,.55,1)`)})),(()=>{const s=j.cloneNode(!0),r=s.firstChild;return d.insert(s,d.createComponent(c.Switch,{get children(){return[d.createComponent(c.Match,{get when(){return t.toast.icon},get children(){const e=R.cloneNode(!0);return d.style(e,O),d.insert(e,(()=>t.toast.icon)),e}}),d.createComponent(c.Match,{get when(){return"loading"===t.toast.type},get children(){const e=R.cloneNode(!0);return d.style(e,O),d.insert(e,d.createComponent(L,d.mergeProps((()=>t.toast.iconTheme)))),e}}),d.createComponent(c.Match,{get when(){return"success"===t.toast.type},get children(){const e=R.cloneNode(!0);return d.style(e,O),d.insert(e,d.createComponent(G,d.mergeProps((()=>t.toast.iconTheme)))),e}}),d.createComponent(c.Match,{get when(){return"error"===t.toast.type},get children(){const e=R.cloneNode(!0);return d.style(e,O),d.insert(e,d.createComponent(J,d.mergeProps((()=>t.toast.iconTheme)))),e}})]}}),r),d.style(r,x),d.spread(r,(()=>t.toast.ariaProps),!1,!0),d.insert(r,e),d.effect((e=>{const r=t.toast.className,i=n(l(n({},P),{animation:o()}),t.toast.style);return r!==e._v$&&d.className(s,e._v$=r),e._v$2=d.style(s,i,e._v$2),e}),{_v$:void 0,_v$2:void 0}),s})()},B=d.template("<div></div>",2),V=p.css`z-index: 9999;> * { pointer-events: auto;}`,q=t=>{const e=()=>{const e=t.toast.position||_.position,o=((t,e)=>{const{toasts:o}=m(),s=M().gutter||T.gutter||8,r=o.filter((t=>(t.position||e)===e&&t.height)),i=r.findIndex((e=>e.id===t.id)),a=r.filter(((t,e)=>e<i&&t.visible)).length;return r.slice(0,a).reduce(((t,e)=>t+s+(e.height||0)),0)})(t.toast,e),s=((t,e)=>{const o=t.includes("top"),s=o?{top:0}:{bottom:0},r=t.includes("center")?{"justify-content":"center"}:t.includes("right")?{"justify-content":"flex-end"}:{};return n(n({left:0,right:0,display:"flex",position:"absolute",transition:"all 230ms cubic-bezier(.21,1.02,.73,1)",transform:`translateY(${e*(o?1:-1)}px)`},s),r)})(e,o);return s},[o,s]=c.createSignal(e());let r;return c.createEffect(c.on(m,(()=>{const t=e();s(t)}))),c.onMount((()=>{r&&((t,e)=>{const o=t.getBoundingClientRect();o.height!==e.height&&h({type:u.UPDATE_TOAST,toast:{id:e.id,height:o.height},silent:!0})})(r,t.toast)})),(()=>{const e=B.cloneNode(!0);return"function"==typeof r?r(e):r=e,d.insert(e,(()=>{const e=d.memo((()=>"custom"===t.toast.type),!0);return()=>e()?y(t.toast.message,t.toast):d.createComponent(z,{get toast(){return t.toast},get position(){return t.toast.position||_.position}})})()),d.effect((s=>{const r=o(),i=t.toast.visible?V:"";return s._v$=d.style(e,r,s._v$),i!==s._v$2&&d.className(e,s._v$2=i),s}),{_v$:void 0,_v$2:void 0}),e})()},Y=d.template('<svg viewBox="0 0 32 32"><circle cx="16" cy="16" r="16"></circle><circle cx="16" cy="16" r="12"></circle><path fill="none" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M9.8,17.2l3.8,3.6c0.1,0.1,0.3,0.1,0.4,0l9.6-9.7"></path></svg>',8),G=t=>{const e=`${w} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards`,o=`${k} 1s cubic-bezier(0, 0, 0.2, 1) forwards`,s=`${E} 0.2s ease-out forwards`;return(()=>{const r=Y.cloneNode(!0),i=r.firstChild,a=i.nextSibling,n=a.nextSibling;return r.style.setProperty("overflow","visible"),i.style.setProperty("animation",e),i.style.setProperty("transform-origin","50% 50%"),i.style.setProperty("animation-delay","100ms"),i.style.setProperty("opacity","0"),a.style.setProperty("animation",o),a.style.setProperty("transform-origin","50% 50%"),a.style.setProperty("animation-delay","250ms"),n.style.setProperty("animation",s),n.style.setProperty("stroke-dasharray","22"),n.style.setProperty("stroke-dashoffset","22"),n.style.setProperty("animation-delay","250ms"),d.effect((e=>{const o=t.primary||"#34C759",s=t.primary||"#34C759",r=t.secondary||"#FCFCFC";return o!==e._v$&&d.setAttribute(i,"fill",e._v$=o),s!==e._v$2&&d.setAttribute(a,"fill",e._v$2=s),r!==e._v$3&&d.setAttribute(n,"stroke",e._v$3=r),e}),{_v$:void 0,_v$2:void 0,_v$3:void 0}),r})()},H=d.template('<svg viewBox="0 0 32 32"><circle cx="16" cy="16" r="16"></circle><circle cx="16" cy="16" r="12"></circle><path fill="none" stroke-width="4" stroke-linecap="round" d="M16,7l0,9"></path><circle cx="16" cy="16" r="2.5"></circle></svg>',10),J=t=>{const e=`${w} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards`,o=`${k} 1s cubic-bezier(0, 0, 0.2, 1) forwards`,s=`${E} 0.1s ease-in forwards`,r=`${D} 0.2s ease-out forwards`;return(()=>{const i=H.cloneNode(!0),a=i.firstChild,n=a.nextSibling,l=n.nextSibling,c=l.nextSibling;return i.style.setProperty("overflow","visible"),a.style.setProperty("animation",e),a.style.setProperty("transform-origin","50% 50%"),a.style.setProperty("animation-delay","100ms"),a.style.setProperty("opacity","0"),n.style.setProperty("animation",o),n.style.setProperty("transform-origin","50% 50%"),n.style.setProperty("animation-delay","320ms"),l.style.setProperty("animation",s),l.style.setProperty("stroke-dasharray","9"),l.style.setProperty("stroke-dashoffset","9"),l.style.setProperty("animation-delay","200ms"),c.style.setProperty("animation",r),c.style.setProperty("animation-delay","320ms"),c.style.setProperty("opacity","0"),d.effect((e=>{const o=t.primary||"#FF3B30",s=t.primary||"#FF3B30",r=t.secondary||"#FFFFFF",i=t.secondary||"#FFFFFF";return o!==e._v$&&d.setAttribute(a,"fill",e._v$=o),s!==e._v$2&&d.setAttribute(n,"fill",e._v$2=s),r!==e._v$3&&d.setAttribute(l,"stroke",e._v$3=r),i!==e._v$4&&d.setAttribute(c,"fill",e._v$4=i),e}),{_v$:void 0,_v$2:void 0,_v$3:void 0,_v$4:void 0}),i})()},K=d.template('<svg viewBox="0 0 32 32"><path fill="none" stroke-width="4" stroke-miterlimit="10" d="M16,6c3,0,5.7,1.3,7.5,3.4c1.5,1.8,2.5,4,2.5,6.6c0,5.5-4.5,10-10,10S6,21.6,6,16S10.5,6,16,6z"></path><path fill="none" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M16,6c3,0,5.7,1.3,7.5,3.4c0.6,0.7,1.1,1.4,1.5,2.2"></path></svg>',6),L=t=>{const e=`${C} 0.75s linear infinite`;return(()=>{const o=K.cloneNode(!0),s=o.firstChild,r=s.nextSibling;return o.style.setProperty("overflow","visible"),r.style.setProperty("animation",e),r.style.setProperty("transform-origin","50% 50%"),d.effect((e=>{const o=t.primary||"#E5E7EB",i=t.secondary||"#4b5563";return o!==e._v$&&d.setAttribute(s,"stroke",e._v$=o),i!==e._v$2&&d.setAttribute(r,"stroke",e._v$2=i),e}),{_v$:void 0,_v$2:void 0}),o})()};exports.ActionType=u,exports.Toaster=t=>(c.createEffect((()=>{(t=>{N((e=>{var o,s,r,i;return{containerClassName:null!=(o=t.containerClassName)?o:e.containerClassName,containerStyle:null!=(s=t.containerStyle)?s:e.containerStyle,gutter:null!=(r=t.gutter)?r:e.gutter,position:null!=(i=t.position)?i:e.position,toastOptions:n({},t.toastOptions)}}))})(t)})),c.createEffect((()=>{const t=(()=>{const{pausedAt:t,toasts:e}=m();if(t)return;const o=Date.now();return e.map((t=>{if(t.duration===1/0)return;const e=(t.duration||0)+t.pauseDuration-(o-t.createdAt);if(!(e<=0))return setTimeout((()=>{h({type:u.DISMISS_TOAST,toastId:t.id})}),e);t.visible&&h({type:u.DISMISS_TOAST,toastId:t.id})}))})();c.onCleanup((()=>{t&&t.forEach((t=>t&&clearTimeout(t)))}))})),(()=>{const e=U.cloneNode(!0);return d.insert(e,d.createComponent(c.For,{get each(){return m().toasts},children:t=>d.createComponent(q,{toast:t})})),d.effect((o=>{const s=n(n({},b),t.containerStyle),r=t.containerClassName;return o._v$=d.style(e,s,o._v$),r!==o._v$2&&d.className(e,o._v$2=r),o}),{_v$:void 0,_v$2:void 0}),e})()),exports.default=F,exports.resolveValue=y,exports.toast=F;

dist/solid-toast.es.js

@@ -39,3 +39,3 @@ var __defProp = Object.defineProperty;
 });
-createEffect(() => {
+const createTimers = () => {
   const { pausedAt, toasts } = store();
@@ -65,6 +65,4 @@ if (pausedAt)
   });
-  onCleanup(() => {
-    timers.forEach((timer) => timer && clearTimeout(timer));
-  });
-});
+  return timers;
+};
 const removalQueue = /* @__PURE__ */ new Map();
@@ -337,2 +335,10 @@ const scheduleRemoval = (toastId, unmountDelay) => {
   });
+  createEffect(() => {
+    const timers = createTimers();
+    onCleanup(() => {
+      if (!timers)
+        return;
+      timers.forEach((timer) => timer && clearTimeout(timer));
+    });
+  });
   return (() => {
@@ -339,0 +345,0 @@ const _el$ = _tmpl$$5.cloneNode(true);

package.json

 {
   "name": "solid-toast",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "description": "Customizable Toast Notifications for SolidJS",
@@ -5,0 +5,0 @@ "main": "./dist/solid-toast.cjs.js",

README.md

@@ -91,3 +91,3 @@ <a href="https://github.com/ardeora/solid-toast"><img alt="Solid Toast header image showing a cute toaster with a toast popping out" src="https://github.com/ardeora/solid-toast/raw/main/assets/header.png"/></a>
 #### Creating Toasts
-There are several ways of generating toasts
+There are several options for creating toasts
 
@@ -119,3 +119,3 @@ ##### Blank
 ##### Promise
-The `promise()` function can be used to create a toast from a promise. This will automatically show a loading icon and update the toast with the result of the promise.
+The `promise()` function can be used to create a toast from a promise. This function will automatically show a loading icon and update the toast with the result of the promise.
 ```jsx
@@ -133,3 +133,3 @@ const myPromise = fetchData();
 You also have the ability to completely customize the appearance of your toast.
-A custom JSX Element can be passed like so:
+A custom JSX Element can be passed in like so:
 
@@ -169,3 +169,3 @@ ```jsx
 ##### Dismiss Toasts Programatically
-You can manually dismiss a notification with toast.dismiss. Be aware that it triggers the exit animation and does not remove the Toast instantly. Toasts will auto-remove after 1 second by default. You can adjust the dismiss duration with the `unmountDelay` option.
+You can manually dismiss a notification with `toast.dismiss`. Beware that it triggers the exit animation and does not remove the Toast instantly. Toasts will auto-remove after 500ms by default. You can adjust the dismiss duration with the `unmountDelay` option.
 
@@ -172,0 +172,0 @@ ###### Dismiss Single Toast

src/core/store.ts

@@ -1,2 +0,2 @@
-import { createSignal, createEffect, onCleanup } from 'solid-js';
+import { createSignal } from 'solid-js';
 import { State, Action, ActionType, Toast } from '../types';
@@ -9,3 +9,3 @@
 
-createEffect(() => {
+export const createTimers = () => {
   const { pausedAt, toasts } = store()
@@ -37,8 +37,5 @@ if(pausedAt) return;
 
-  onCleanup(() => {
-    timers.forEach(timer => timer && clearTimeout(timer))
-  })
+  return timers
+}
 
-})
-
 const removalQueue = new Map<Toast['id'], ReturnType<typeof setTimeout>>();
@@ -45,0 +42,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

64353

increased by0.44%

Lines of code

1265

increased by0.88%

No dependency changes