Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

solid-toast

Package Overview
Dependencies
Maintainers
1
Versions
50
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

solid-toast - npm Package Compare versions

Comparing version 0.3.3 to 0.3.4

2

dist/cjs/index.js

@@ -1,2 +0,2 @@

Object.defineProperty(exports,"__esModule",{value:!0});var t=require("solid-js"),e=require("solid-js/store"),o=require("solid-js/web");const s=(t,e)=>(t=>"function"==typeof t)(t)?t(e):t;var i;exports.ActionType=void 0,(i=exports.ActionType||(exports.ActionType={}))[i.ADD_TOAST=0]="ADD_TOAST",i[i.UPDATE_TOAST=1]="UPDATE_TOAST",i[i.UPSERT_TOAST=2]="UPSERT_TOAST",i[i.DISMISS_TOAST=3]="DISMISS_TOAST",i[i.REMOVE_TOAST=4]="REMOVE_TOAST",i[i.START_PAUSE=5]="START_PAUSE",i[i.END_PAUSE=6]="END_PAUSE";const[r,n]=e.createStore({toasts:[],pausedAt:void 0}),a=new Map,c=(t,e)=>{if(a.has(t))return;const o=setTimeout((()=>{a.delete(t),l({type:exports.ActionType.REMOVE_TOAST,toastId:t})}),e);a.set(t,o)},l=t=>{switch(t.type){case exports.ActionType.ADD_TOAST:n("toasts",(e=>{const o=e;return[t.toast,...o]}));break;case exports.ActionType.DISMISS_TOAST:const{toastId:o}=t,s=r.toasts;if(o){const t=s.find((t=>t.id===o));t&&c(o,t.unmountDelay),n("toasts",(t=>t.id===o),e.produce((t=>t.visible=!1)))}else s.forEach((t=>{c(t.id,t.unmountDelay)})),n("toasts",(t=>void 0!==t.id),e.produce((t=>t.visible=!1)));break;case exports.ActionType.REMOVE_TOAST:if(!t.toastId){n("toasts",[]);break}n("toasts",(e=>e.filter((e=>e.id!==t.toastId))));break;case exports.ActionType.UPDATE_TOAST:t.toast.id&&(t=>{const e=a.get(t);a.delete(t),e&&clearTimeout(e)})(t.toast.id),n("toasts",(e=>e.id===t.toast.id),(e=>({...e,...t.toast})));break;case exports.ActionType.UPSERT_TOAST:r.toasts.find((e=>e.id===t.toast.id))?l({type:exports.ActionType.UPDATE_TOAST,toast:t.toast}):l({type:exports.ActionType.ADD_TOAST,toast:t.toast});break;case exports.ActionType.START_PAUSE:n(e.produce((t=>{t.pausedAt=Date.now(),t.toasts.forEach((t=>{t.paused=!0}))})));break;case exports.ActionType.END_PAUSE:const i=t.time-(r.pausedAt||0);n(e.produce((t=>{t.pausedAt=void 0,t.toasts.forEach((t=>{t.pauseDuration+=i,t.paused=!1}))})))}},p={blank:4e3,error:4e3,success:2e3,loading:1/0,custom:4e3},d={id:"",icon:"",unmountDelay:500,duration:3e3,ariaProps:{role:"status","aria-live":"polite"},className:"",style:{},position:"top-right",iconTheme:{}},u={position:"top-right",toastOptions:d,gutter:8,containerStyle:{},containerClassName:""},m={position:"fixed","z-index":9999,top:"16px",bottom:"16px",left:"16px",right:"16px","pointer-events":"none"},f=(()=>{let t=0;return()=>String(++t)})(),v={display:"flex","align-items":"center",color:"#363636",background:"white","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"},y={display:"flex","align-items":"center",flex:"1 1 auto",margin:"4px 10px","white-space":"pre-line"},T={"flex-shrink":0,"min-width":"20px","min-height":"20px",display:"flex","align-items":"center","justify-content":"center","text-align":"center"},h=t=>({calcMode:"spline",keyTimes:"0; 1",keySplines:t}),[g,A]=t.createSignal(u),S=t=>(e,o={})=>{const s=r.toasts.find((t=>t.id===o.id)),i=((t,e="blank",o)=>({...d,...g().toastOptions,...o,type:e,message:t,pauseDuration:0,createdAt:Date.now(),visible:!0,id:o.id||f(),paused:!1,style:{...d.style,...g().toastOptions?.style,...o.style},duration:o.duration||g().toastOptions?.duration||p[e],position:o.position||g().toastOptions?.position||g().position||d.position}))(e,t,{...s,duration:void 0,...o});return l({type:exports.ActionType.UPSERT_TOAST,toast:i}),i.id},x=(t,e)=>S("blank")(t,e);x.error=S("error"),x.success=S("success"),x.loading=S("loading"),x.custom=S("custom"),x.dismiss=t=>{l({type:exports.ActionType.DISMISS_TOAST,toastId:t})},x.promise=(t,e,o)=>{const i=x.loading(e.loading,{...o});return t.then((t=>(x.success(s(e.success,t),{id:i,...o}),t))).catch((t=>{x.error(s(e.error,t),{id:i,...o})})),t},x.remove=t=>{l({type:exports.ActionType.REMOVE_TOAST,toastId:t})};const _=o.template("<div><style>.sldt-active{z-index:9999;}.sldt-active>*{pointer-events:auto;}</style></div>",4),b=o.template("<div></div>",2),E=o.template("<div><div></div></div>",4),C=e=>{let i;return t.createEffect((()=>{if(!i)return;const t=((t,e)=>(t.position||e).includes("top")?1:-1)(e.toast,e.position);e.toast.visible?i.animate([{transform:`translate3d(0,${-200*t}%,0) scale(.6)`,opacity:.5},{transform:"translate3d(0,0,0) scale(1)",opacity:1}],{duration:350,fill:"forwards",easing:"cubic-bezier(.21,1.02,.73,1)"}):i.animate([{transform:"translate3d(0,0,-1px) scale(1)",opacity:1},{transform:`translate3d(0,${-150*t}%,-1px) scale(.4)`,opacity:0}],{duration:400,fill:"forwards",easing:"cubic-bezier(.06,.71,.55,1)"})})),console.log("CLASSSNAME",e.toast.className),(()=>{const r=E.cloneNode(!0),n=r.firstChild;return"function"==typeof i?i(r):i=r,o.insert(r,o.createComponent(t.Switch,{get children(){return[o.createComponent(t.Match,{get when(){return e.toast.icon},get children(){const t=b.cloneNode(!0);return o.insert(t,(()=>e.toast.icon)),o.effect((e=>o.style(t,T,e))),t}}),o.createComponent(t.Match,{get when(){return"loading"===e.toast.type},get children(){const t=b.cloneNode(!0);return o.insert(t,o.createComponent(R,o.mergeProps((()=>e.toast.iconTheme)))),o.effect((e=>o.style(t,T,e))),t}}),o.createComponent(t.Match,{get when(){return"success"===e.toast.type},get children(){const t=b.cloneNode(!0);return o.insert(t,o.createComponent(M,o.mergeProps((()=>e.toast.iconTheme)))),o.effect((e=>o.style(t,T,e))),t}}),o.createComponent(t.Match,{get when(){return"error"===e.toast.type},get children(){const t=b.cloneNode(!0);return o.insert(t,o.createComponent(F,o.mergeProps((()=>e.toast.iconTheme)))),o.effect((e=>o.style(t,T,e))),t}})]}}),n),o.spread(n,(()=>e.toast.ariaProps),!1,!0),o.insert(n,(()=>s(e.toast.message,e.toast))),o.effect((t=>{const s=e.toast.className,i={...v,...e.toast.style},a=y;return s!==t._v$&&o.className(r,t._v$=s),t._v$2=o.style(r,i,t._v$2),t._v$3=o.style(n,a,t._v$3),t}),{_v$:void 0,_v$2:void 0,_v$3:void 0}),r})()},O=o.template("<div></div>",2),$=e=>{const i=()=>{const t=e.toast.position||d.position,o=((t,e)=>{const{toasts:o}=r,s=g().gutter||u.gutter||8,i=o.filter((t=>(t.position||e)===e&&t.height)),n=i.findIndex((e=>e.id===t.id)),a=i.filter(((t,e)=>e<n&&t.visible)).length;return i.slice(0,a).reduce(((t,e)=>t+s+(e.height||0)),0)})(e.toast,t),s=((t,e)=>({left:0,right:0,display:"flex",position:"absolute",transition:"all 230ms cubic-bezier(.21,1.02,.73,1)",...t.includes("top")?{top:0,"margin-top":`${e}px`}:{bottom:0,"margin-bottom":`${e}px`},...t.includes("center")?{"justify-content":"center"}:t.includes("right")?{"justify-content":"flex-end"}:{}}))(t,o);return s},[n,a]=t.createSignal(i());let c;return t.createEffect((()=>{const t=i();a(t)})),t.onMount((()=>{c&&((t,e)=>{const o=t.getBoundingClientRect();o.height!==e.height&&l({type:exports.ActionType.UPDATE_TOAST,toast:{id:e.id,height:o.height}})})(c,e.toast)})),(()=>{const t=O.cloneNode(!0);t.addEventListener("mouseleave",(()=>l({type:exports.ActionType.END_PAUSE,time:Date.now()}))),t.addEventListener("mouseenter",(()=>l({type:exports.ActionType.START_PAUSE,time:Date.now()})));return"function"==typeof c?c(t):c=t,o.insert(t,(()=>{const t=o.memo((()=>"custom"===e.toast.type),!0);return()=>t()?s(e.toast.message,e.toast):o.createComponent(C,{get toast(){return e.toast},get position(){return e.toast.position||d.position}})})()),o.effect((s=>{const i=n(),r=e.toast.visible?"sldt-active":"";return s._v$=o.style(t,i,s._v$),r!==s._v$2&&o.className(t,s._v$2=r),s}),{_v$:void 0,_v$2:void 0}),t})()},k=o.template('<svg><circle cx="16" cy="16" r="0"><animate attributeName="opacity" values="0; 1; 1"></animate><animate attributeName="r" values="0; 17.5; 16"></animate></circle></svg>',8,!0),N=o.template('<svg><circle cx="16" cy="16" r="12"><animate attributeName="opacity" values="1; 0"></animate><animate attributeName="r" values="12; 26"></animate></circle></svg>',8,!0),w=t=>{const e={dur:"0.35s",begin:"100ms",fill:"freeze",calcMode:"spline",keyTimes:"0; 0.6; 1",keySplines:"0.25 0.71 0.4 0.88; .59 .22 .87 .63"};return(()=>{const s=k.cloneNode(!0),i=s.firstChild,r=i.nextSibling;return o.spread(i,e,!0,!1),o.spread(r,e,!0,!1),o.effect((()=>o.setAttribute(s,"fill",t.fill))),s})()},D=t=>{const e={dur:"1s",begin:t.begin||"320ms",fill:"freeze",...h("0.0 0.0 0.2 1")};return(()=>{const s=N.cloneNode(!0),i=s.firstChild,r=i.nextSibling;return o.spread(i,e,!0,!1),o.spread(r,e,!0,!1),o.effect((()=>o.setAttribute(s,"fill",t.fill))),s})()},P=o.template('<svg viewBox="0 0 32 32" width="1.25rem" height="1.25rem"><path fill="none" stroke-width="4" stroke-dasharray="22" stroke-dashoffset="22" 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"><animate attributeName="stroke-dashoffset" values="22;0" dur="0.25s" begin="250ms" fill="freeze"></animate></path></svg>',6),M=t=>{const e=t.primary||"#34C759";return(()=>{const s=P.cloneNode(!0),i=s.firstChild,r=i.firstChild;return s.style.setProperty("overflow","visible"),o.insert(s,o.createComponent(w,{fill:e}),i),o.insert(s,o.createComponent(D,{fill:e,begin:"350ms"}),i),o.spread(r,(()=>h("0.0, 0.0, 0.58, 1.0")),!0,!1),o.effect((()=>o.setAttribute(i,"stroke",t.secondary||"#FCFCFC"))),s})()},I=o.template('<svg viewBox="0 0 32 32" width="1.25rem" height="1.25rem"><path fill="none" stroke-width="4" stroke-dasharray="9" stroke-dashoffset="9" stroke-linecap="round" d="M16,7l0,9"><animate attributeName="stroke-dashoffset" values="9;0" dur="0.2s" begin="250ms" fill="freeze"></animate></path><circle cx="16" cy="23" r="2.5" opacity="0"><animate attributeName="opacity" values="0;1" dur="0.25s" begin="350ms" fill="freeze"></animate></circle></svg>',10),F=t=>{const e=t.primary||"#FF3B30";return(()=>{const s=I.cloneNode(!0),i=s.firstChild,r=i.firstChild,n=i.nextSibling,a=n.firstChild;return s.style.setProperty("overflow","visible"),o.insert(s,o.createComponent(w,{fill:e}),i),o.insert(s,o.createComponent(D,{fill:e}),i),o.spread(r,(()=>h("0.0, 0.0, 0.58, 1.0")),!0,!1),o.spread(a,(()=>h("0.0, 0.0, 0.58, 1.0")),!0,!1),o.effect((e=>{const s=t.secondary||"#FFFFFF",r=t.secondary||"#FFFFFF";return s!==e._v$&&o.setAttribute(i,"stroke",e._v$=s),r!==e._v$2&&o.setAttribute(n,"fill",e._v$2=r),e}),{_v$:void 0,_v$2:void 0}),s})()},U=o.template('<svg viewBox="0 0 32 32" width="1.25rem" height="1.25rem"><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"><animateTransform attributeName="transform" type="rotate" from="0 16 16" to="360 16 16" dur="0.75s" repeatCount="indefinite"></animateTransform></path></svg>',8),R=t=>(()=>{const e=U.cloneNode(!0),s=e.firstChild,i=s.nextSibling;return e.style.setProperty("overflow","visible"),o.effect((e=>{const r=t.primary||"#E5E7EB",n=t.secondary||"#4b5563";return r!==e._v$&&o.setAttribute(s,"stroke",e._v$=r),n!==e._v$2&&o.setAttribute(i,"stroke",e._v$2=n),e}),{_v$:void 0,_v$2:void 0}),e})();var z=x;exports.Toaster=e=>(t.createEffect((()=>{(t=>{A((e=>({containerClassName:t.containerClassName??e.containerClassName,containerStyle:t.containerStyle??e.containerStyle,gutter:t.gutter??e.gutter,position:t.position??e.position,toastOptions:{...t.toastOptions}})))})(e)})),t.createEffect((()=>{const e=(()=>{const{pausedAt:t,toasts:e}=r;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((()=>{l({type:exports.ActionType.DISMISS_TOAST,toastId:t.id})}),e);t.visible&&l({type:exports.ActionType.DISMISS_TOAST,toastId:t.id})}));return s})();t.onCleanup((()=>{e&&e.forEach((t=>t&&clearTimeout(t)))}))})),(()=>{const s=_.cloneNode(!0);return s.firstChild,o.insert(s,o.createComponent(t.For,{get each(){return r.toasts},children:t=>o.createComponent($,{toast:t})}),null),o.effect((t=>{const i={...m,...e.containerStyle},r=e.containerClassName;return t._v$=o.style(s,i,t._v$),r!==t._v$2&&o.className(s,t._v$2=r),t}),{_v$:void 0,_v$2:void 0}),s})()),exports.default=z,exports.resolveValue=s,exports.toast=x;
Object.defineProperty(exports,"__esModule",{value:!0});var t=require("solid-js"),e=require("solid-js/store"),o=require("solid-js/web");const s=(t,e)=>(t=>"function"==typeof t)(t)?t(e):t;var i;exports.ActionType=void 0,(i=exports.ActionType||(exports.ActionType={}))[i.ADD_TOAST=0]="ADD_TOAST",i[i.UPDATE_TOAST=1]="UPDATE_TOAST",i[i.UPSERT_TOAST=2]="UPSERT_TOAST",i[i.DISMISS_TOAST=3]="DISMISS_TOAST",i[i.REMOVE_TOAST=4]="REMOVE_TOAST",i[i.START_PAUSE=5]="START_PAUSE",i[i.END_PAUSE=6]="END_PAUSE";const[r,n]=e.createStore({toasts:[],pausedAt:void 0}),a=new Map,c=(t,e)=>{if(a.has(t))return;const o=setTimeout((()=>{a.delete(t),l({type:exports.ActionType.REMOVE_TOAST,toastId:t})}),e);a.set(t,o)},l=t=>{switch(t.type){case exports.ActionType.ADD_TOAST:n("toasts",(e=>{const o=e;return[t.toast,...o]}));break;case exports.ActionType.DISMISS_TOAST:const{toastId:o}=t,s=r.toasts;if(o){const t=s.find((t=>t.id===o));t&&c(o,t.unmountDelay),n("toasts",(t=>t.id===o),e.produce((t=>t.visible=!1)))}else s.forEach((t=>{c(t.id,t.unmountDelay)})),n("toasts",(t=>void 0!==t.id),e.produce((t=>t.visible=!1)));break;case exports.ActionType.REMOVE_TOAST:if(!t.toastId){n("toasts",[]);break}n("toasts",(e=>e.filter((e=>e.id!==t.toastId))));break;case exports.ActionType.UPDATE_TOAST:t.toast.id&&(t=>{const e=a.get(t);a.delete(t),e&&clearTimeout(e)})(t.toast.id),n("toasts",(e=>e.id===t.toast.id),(e=>({...e,...t.toast})));break;case exports.ActionType.UPSERT_TOAST:r.toasts.find((e=>e.id===t.toast.id))?l({type:exports.ActionType.UPDATE_TOAST,toast:t.toast}):l({type:exports.ActionType.ADD_TOAST,toast:t.toast});break;case exports.ActionType.START_PAUSE:n(e.produce((t=>{t.pausedAt=Date.now(),t.toasts.forEach((t=>{t.paused=!0}))})));break;case exports.ActionType.END_PAUSE:const i=t.time-(r.pausedAt||0);n(e.produce((t=>{t.pausedAt=void 0,t.toasts.forEach((t=>{t.pauseDuration+=i,t.paused=!1}))})))}},p={blank:4e3,error:4e3,success:2e3,loading:1/0,custom:4e3},d={id:"",icon:"",unmountDelay:500,duration:3e3,ariaProps:{role:"status","aria-live":"polite"},className:"",style:{},position:"top-right",iconTheme:{}},u={position:"top-right",toastOptions:d,gutter:8,containerStyle:{},containerClassName:""},m={position:"fixed","z-index":9999,top:"16px",bottom:"16px",left:"16px",right:"16px","pointer-events":"none"},f=(()=>{let t=0;return()=>String(++t)})(),v={display:"flex","align-items":"center",color:"#363636",background:"white","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"},y={display:"flex","align-items":"center",flex:"1 1 auto",margin:"4px 10px","white-space":"pre-line"},T={"flex-shrink":0,"min-width":"20px","min-height":"20px",display:"flex","align-items":"center","justify-content":"center","text-align":"center"},h=t=>({calcMode:"spline",keyTimes:"0; 1",keySplines:t}),[g,A]=t.createSignal(u),S=t=>(e,o={})=>{const s=r.toasts.find((t=>t.id===o.id)),i=((t,e="blank",o)=>({...d,...g().toastOptions,...o,type:e,message:t,pauseDuration:0,createdAt:Date.now(),visible:!0,id:o.id||f(),paused:!1,style:{...d.style,...g().toastOptions?.style,...o.style},duration:o.duration||g().toastOptions?.duration||p[e],position:o.position||g().toastOptions?.position||g().position||d.position}))(e,t,{...s,duration:void 0,...o});return l({type:exports.ActionType.UPSERT_TOAST,toast:i}),i.id},x=(t,e)=>S("blank")(t,e);x.error=S("error"),x.success=S("success"),x.loading=S("loading"),x.custom=S("custom"),x.dismiss=t=>{l({type:exports.ActionType.DISMISS_TOAST,toastId:t})},x.promise=(t,e,o)=>{const i=x.loading(e.loading,{...o});return t.then((t=>(x.success(s(e.success,t),{id:i,...o}),t))).catch((t=>{x.error(s(e.error,t),{id:i,...o})})),t},x.remove=t=>{l({type:exports.ActionType.REMOVE_TOAST,toastId:t})};const _=o.template("<div><style>.sldt-active{z-index:9999;}.sldt-active>*{pointer-events:auto;}</style></div>",4),b=o.template("<div></div>",2),E=o.template("<div><div></div></div>",4),C=e=>{let i;return t.createEffect((()=>{if(!i)return;const t=((t,e)=>(t.position||e).includes("top")?1:-1)(e.toast,e.position);e.toast.visible?i.animate([{transform:`translate3d(0,${-200*t}%,0) scale(.6)`,opacity:.5},{transform:"translate3d(0,0,0) scale(1)",opacity:1}],{duration:350,fill:"forwards",easing:"cubic-bezier(.21,1.02,.73,1)"}):i.animate([{transform:"translate3d(0,0,-1px) scale(1)",opacity:1},{transform:`translate3d(0,${-150*t}%,-1px) scale(.4)`,opacity:0}],{duration:400,fill:"forwards",easing:"cubic-bezier(.06,.71,.55,1)"})})),(()=>{const r=E.cloneNode(!0),n=r.firstChild;return"function"==typeof i?i(r):i=r,o.insert(r,o.createComponent(t.Switch,{get children(){return[o.createComponent(t.Match,{get when(){return e.toast.icon},get children(){const t=b.cloneNode(!0);return o.insert(t,(()=>e.toast.icon)),o.effect((e=>o.style(t,T,e))),t}}),o.createComponent(t.Match,{get when(){return"loading"===e.toast.type},get children(){const t=b.cloneNode(!0);return o.insert(t,o.createComponent(R,o.mergeProps((()=>e.toast.iconTheme)))),o.effect((e=>o.style(t,T,e))),t}}),o.createComponent(t.Match,{get when(){return"success"===e.toast.type},get children(){const t=b.cloneNode(!0);return o.insert(t,o.createComponent(M,o.mergeProps((()=>e.toast.iconTheme)))),o.effect((e=>o.style(t,T,e))),t}}),o.createComponent(t.Match,{get when(){return"error"===e.toast.type},get children(){const t=b.cloneNode(!0);return o.insert(t,o.createComponent(F,o.mergeProps((()=>e.toast.iconTheme)))),o.effect((e=>o.style(t,T,e))),t}})]}}),n),o.spread(n,(()=>e.toast.ariaProps),!1,!0),o.insert(n,(()=>s(e.toast.message,e.toast))),o.effect((t=>{const s=e.toast.className,i={...v,...e.toast.style},a=y;return s!==t._v$&&o.className(r,t._v$=s),t._v$2=o.style(r,i,t._v$2),t._v$3=o.style(n,a,t._v$3),t}),{_v$:void 0,_v$2:void 0,_v$3:void 0}),r})()},O=o.template("<div></div>",2),$=e=>{const i=()=>{const t=e.toast.position||d.position,o=((t,e)=>{const{toasts:o}=r,s=g().gutter||u.gutter||8,i=o.filter((t=>(t.position||e)===e&&t.height)),n=i.findIndex((e=>e.id===t.id)),a=i.filter(((t,e)=>e<n&&t.visible)).length;return i.slice(0,a).reduce(((t,e)=>t+s+(e.height||0)),0)})(e.toast,t),s=((t,e)=>({left:0,right:0,display:"flex",position:"absolute",transition:"all 230ms cubic-bezier(.21,1.02,.73,1)",...t.includes("top")?{top:0,"margin-top":`${e}px`}:{bottom:0,"margin-bottom":`${e}px`},...t.includes("center")?{"justify-content":"center"}:t.includes("right")?{"justify-content":"flex-end"}:{}}))(t,o);return s},[n,a]=t.createSignal(i());let c;return t.createEffect((()=>{const t=i();a(t)})),t.onMount((()=>{c&&((t,e)=>{const o=t.getBoundingClientRect();o.height!==e.height&&l({type:exports.ActionType.UPDATE_TOAST,toast:{id:e.id,height:o.height}})})(c,e.toast)})),(()=>{const t=O.cloneNode(!0);t.addEventListener("mouseleave",(()=>l({type:exports.ActionType.END_PAUSE,time:Date.now()}))),t.addEventListener("mouseenter",(()=>l({type:exports.ActionType.START_PAUSE,time:Date.now()})));return"function"==typeof c?c(t):c=t,o.insert(t,(()=>{const t=o.memo((()=>"custom"===e.toast.type),!0);return()=>t()?s(e.toast.message,e.toast):o.createComponent(C,{get toast(){return e.toast},get position(){return e.toast.position||d.position}})})()),o.effect((s=>{const i=n(),r=e.toast.visible?"sldt-active":"";return s._v$=o.style(t,i,s._v$),r!==s._v$2&&o.className(t,s._v$2=r),s}),{_v$:void 0,_v$2:void 0}),t})()},k=o.template('<svg><circle cx="16" cy="16" r="0"><animate attributeName="opacity" values="0; 1; 1"></animate><animate attributeName="r" values="0; 17.5; 16"></animate></circle></svg>',8,!0),w=o.template('<svg><circle cx="16" cy="16" r="12" opacity="0"><animate attributeName="opacity" values="1; 0"></animate><animate attributeName="r" values="12; 26"></animate></circle></svg>',8,!0),D=t=>{const e={dur:"0.35s",begin:"100ms",fill:"freeze",calcMode:"spline",keyTimes:"0; 0.6; 1",keySplines:"0.25 0.71 0.4 0.88; .59 .22 .87 .63"};return(()=>{const s=k.cloneNode(!0),i=s.firstChild,r=i.nextSibling;return o.spread(i,e,!0,!1),o.spread(r,e,!0,!1),o.effect((()=>o.setAttribute(s,"fill",t.fill))),s})()},N=t=>{const e={dur:"1s",begin:t.begin||"320ms",fill:"freeze",...h("0.0 0.0 0.2 1")};return(()=>{const s=w.cloneNode(!0),i=s.firstChild,r=i.nextSibling;return o.spread(i,e,!0,!1),o.spread(r,e,!0,!1),o.effect((()=>o.setAttribute(s,"fill",t.fill))),s})()},P=o.template('<svg viewBox="0 0 32 32" width="1.25rem" height="1.25rem"><path fill="none" stroke-width="4" stroke-dasharray="22" stroke-dashoffset="22" 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"><animate attributeName="stroke-dashoffset" values="22;0" dur="0.25s" begin="250ms" fill="freeze"></animate></path></svg>',6),M=t=>{const e=t.primary||"#34C759";return(()=>{const s=P.cloneNode(!0),i=s.firstChild,r=i.firstChild;return s.style.setProperty("overflow","visible"),o.insert(s,o.createComponent(D,{fill:e}),i),o.insert(s,o.createComponent(N,{fill:e,begin:"350ms"}),i),o.spread(r,(()=>h("0.0, 0.0, 0.58, 1.0")),!0,!1),o.effect((()=>o.setAttribute(i,"stroke",t.secondary||"#FCFCFC"))),s})()},I=o.template('<svg viewBox="0 0 32 32" width="1.25rem" height="1.25rem"><path fill="none" stroke-width="4" stroke-dasharray="9" stroke-dashoffset="9" stroke-linecap="round" d="M16,7l0,9"><animate attributeName="stroke-dashoffset" values="9;0" dur="0.2s" begin="250ms" fill="freeze"></animate></path><circle cx="16" cy="23" r="2.5" opacity="0"><animate attributeName="opacity" values="0;1" dur="0.25s" begin="350ms" fill="freeze"></animate></circle></svg>',10),F=t=>{const e=t.primary||"#FF3B30";return(()=>{const s=I.cloneNode(!0),i=s.firstChild,r=i.firstChild,n=i.nextSibling,a=n.firstChild;return s.style.setProperty("overflow","visible"),o.insert(s,o.createComponent(D,{fill:e}),i),o.insert(s,o.createComponent(N,{fill:e}),i),o.spread(r,(()=>h("0.0, 0.0, 0.58, 1.0")),!0,!1),o.spread(a,(()=>h("0.0, 0.0, 0.58, 1.0")),!0,!1),o.effect((e=>{const s=t.secondary||"#FFFFFF",r=t.secondary||"#FFFFFF";return s!==e._v$&&o.setAttribute(i,"stroke",e._v$=s),r!==e._v$2&&o.setAttribute(n,"fill",e._v$2=r),e}),{_v$:void 0,_v$2:void 0}),s})()},U=o.template('<svg viewBox="0 0 32 32" width="1.25rem" height="1.25rem"><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"><animateTransform attributeName="transform" type="rotate" from="0 16 16" to="360 16 16" dur="0.75s" repeatCount="indefinite"></animateTransform></path></svg>',8),R=t=>(()=>{const e=U.cloneNode(!0),s=e.firstChild,i=s.nextSibling;return e.style.setProperty("overflow","visible"),o.effect((e=>{const r=t.primary||"#E5E7EB",n=t.secondary||"#4b5563";return r!==e._v$&&o.setAttribute(s,"stroke",e._v$=r),n!==e._v$2&&o.setAttribute(i,"stroke",e._v$2=n),e}),{_v$:void 0,_v$2:void 0}),e})();var z=x;exports.Toaster=e=>(t.createEffect((()=>{(t=>{A((e=>({containerClassName:t.containerClassName??e.containerClassName,containerStyle:t.containerStyle??e.containerStyle,gutter:t.gutter??e.gutter,position:t.position??e.position,toastOptions:{...t.toastOptions}})))})(e)})),t.createEffect((()=>{const e=(()=>{const{pausedAt:t,toasts:e}=r;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((()=>{l({type:exports.ActionType.DISMISS_TOAST,toastId:t.id})}),e);t.visible&&l({type:exports.ActionType.DISMISS_TOAST,toastId:t.id})}));return s})();t.onCleanup((()=>{e&&e.forEach((t=>t&&clearTimeout(t)))}))})),(()=>{const s=_.cloneNode(!0);return s.firstChild,o.insert(s,o.createComponent(t.For,{get each(){return r.toasts},children:t=>o.createComponent($,{toast:t})}),null),o.effect((t=>{const i={...m,...e.containerStyle},r=e.containerClassName;return t._v$=o.style(s,i,t._v$),r!==t._v$2&&o.className(s,t._v$2=r),t}),{_v$:void 0,_v$2:void 0}),s})()),exports.default=z,exports.resolveValue=s,exports.toast=x;
//# sourceMappingURL=index.js.map

2

dist/esm/index.js

@@ -1,2 +0,2 @@

import{createSignal as t,createEffect as e,onCleanup as i,For as s,Switch as o,Match as n,onMount as r}from"solid-js";import{createStore as a,produce as l}from"solid-js/store";import{insert as c,createComponent as d,effect as u,style as p,className as m,template as v,mergeProps as f,spread as h,memo as g,setAttribute as T}from"solid-js/web";const S=(t,e)=>(t=>"function"==typeof t)(t)?t(e):t;let y;!function(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"}(y||(y={}));const[_,b]=a({toasts:[],pausedAt:void 0}),A=new Map,x=(t,e)=>{if(A.has(t))return;const i=setTimeout((()=>{A.delete(t),E({type:y.REMOVE_TOAST,toastId:t})}),e);A.set(t,i)},E=t=>{switch(t.type){case y.ADD_TOAST:b("toasts",(e=>{const i=e;return[t.toast,...i]}));break;case y.DISMISS_TOAST:const{toastId:e}=t,i=_.toasts;if(e){const t=i.find((t=>t.id===e));t&&x(e,t.unmountDelay),b("toasts",(t=>t.id===e),l((t=>t.visible=!1)))}else i.forEach((t=>{x(t.id,t.unmountDelay)})),b("toasts",(t=>void 0!==t.id),l((t=>t.visible=!1)));break;case y.REMOVE_TOAST:if(!t.toastId){b("toasts",[]);break}b("toasts",(e=>e.filter((e=>e.id!==t.toastId))));break;case y.UPDATE_TOAST:t.toast.id&&(t=>{const e=A.get(t);A.delete(t),e&&clearTimeout(e)})(t.toast.id),b("toasts",(e=>e.id===t.toast.id),(e=>({...e,...t.toast})));break;case y.UPSERT_TOAST:_.toasts.find((e=>e.id===t.toast.id))?E({type:y.UPDATE_TOAST,toast:t.toast}):E({type:y.ADD_TOAST,toast:t.toast});break;case y.START_PAUSE:b(l((t=>{t.pausedAt=Date.now(),t.toasts.forEach((t=>{t.paused=!0}))})));break;case y.END_PAUSE:const s=t.time-(_.pausedAt||0);b(l((t=>{t.pausedAt=void 0,t.toasts.forEach((t=>{t.pauseDuration+=s,t.paused=!1}))})))}},$={blank:4e3,error:4e3,success:2e3,loading:1/0,custom:4e3},k={id:"",icon:"",unmountDelay:500,duration:3e3,ariaProps:{role:"status","aria-live":"polite"},className:"",style:{},position:"top-right",iconTheme:{}},O={position:"top-right",toastOptions:k,gutter:8,containerStyle:{},containerClassName:""},D={position:"fixed","z-index":9999,top:"16px",bottom:"16px",left:"16px",right:"16px","pointer-events":"none"},w=(()=>{let t=0;return()=>String(++t)})(),N={display:"flex","align-items":"center",color:"#363636",background:"white","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"},C={display:"flex","align-items":"center",flex:"1 1 auto",margin:"4px 10px","white-space":"pre-line"},P={"flex-shrink":0,"min-width":"20px","min-height":"20px",display:"flex","align-items":"center","justify-content":"center","text-align":"center"},I=t=>({calcMode:"spline",keyTimes:"0; 1",keySplines:t}),[M,F]=t(O),U=t=>(e,i={})=>{const s=_.toasts.find((t=>t.id===i.id)),o=((t,e="blank",i)=>({...k,...M().toastOptions,...i,type:e,message:t,pauseDuration:0,createdAt:Date.now(),visible:!0,id:i.id||w(),paused:!1,style:{...k.style,...M().toastOptions?.style,...i.style},duration:i.duration||M().toastOptions?.duration||$[e],position:i.position||M().toastOptions?.position||M().position||k.position}))(e,t,{...s,duration:void 0,...i});return E({type:y.UPSERT_TOAST,toast:o}),o.id},R=(t,e)=>U("blank")(t,e);R.error=U("error"),R.success=U("success"),R.loading=U("loading"),R.custom=U("custom"),R.dismiss=t=>{E({type:y.DISMISS_TOAST,toastId:t})},R.promise=(t,e,i)=>{const s=R.loading(e.loading,{...i});return t.then((t=>(R.success(S(e.success,t),{id:s,...i}),t))).catch((t=>{R.error(S(e.error,t),{id:s,...i})})),t},R.remove=t=>{E({type:y.REMOVE_TOAST,toastId:t})};const z=v("<div><style>.sldt-active{z-index:9999;}.sldt-active>*{pointer-events:auto;}</style></div>",4),j=t=>(e((()=>{(t=>{F((e=>({containerClassName:t.containerClassName??e.containerClassName,containerStyle:t.containerStyle??e.containerStyle,gutter:t.gutter??e.gutter,position:t.position??e.position,toastOptions:{...t.toastOptions}})))})(t)})),e((()=>{const t=(()=>{const{pausedAt:t,toasts:e}=_;if(t)return;const i=Date.now(),s=e.map((t=>{if(t.duration===1/0)return;const e=(t.duration||0)+t.pauseDuration-(i-t.createdAt);if(!(e<=0))return setTimeout((()=>{E({type:y.DISMISS_TOAST,toastId:t.id})}),e);t.visible&&E({type:y.DISMISS_TOAST,toastId:t.id})}));return s})();i((()=>{t&&t.forEach((t=>t&&clearTimeout(t)))}))})),(()=>{const e=z.cloneNode(!0);return e.firstChild,c(e,d(s,{get each(){return _.toasts},children:t=>d(G,{toast:t})}),null),u((i=>{const s={...D,...t.containerStyle},o=t.containerClassName;return i._v$=p(e,s,i._v$),o!==i._v$2&&m(e,i._v$2=o),i}),{_v$:void 0,_v$2:void 0}),e})()),B=v("<div></div>",2),V=v("<div><div></div></div>",4),L=t=>{let i;return e((()=>{if(!i)return;const e=((t,e)=>(t.position||e).includes("top")?1:-1)(t.toast,t.position);t.toast.visible?i.animate([{transform:`translate3d(0,${-200*e}%,0) scale(.6)`,opacity:.5},{transform:"translate3d(0,0,0) scale(1)",opacity:1}],{duration:350,fill:"forwards",easing:"cubic-bezier(.21,1.02,.73,1)"}):i.animate([{transform:"translate3d(0,0,-1px) scale(1)",opacity:1},{transform:`translate3d(0,${-150*e}%,-1px) scale(.4)`,opacity:0}],{duration:400,fill:"forwards",easing:"cubic-bezier(.06,.71,.55,1)"})})),console.log("CLASSSNAME",t.toast.className),(()=>{const e=V.cloneNode(!0),s=e.firstChild;return"function"==typeof i?i(e):i=e,c(e,d(o,{get children(){return[d(n,{get when(){return t.toast.icon},get children(){const e=B.cloneNode(!0);return c(e,(()=>t.toast.icon)),u((t=>p(e,P,t))),e}}),d(n,{get when(){return"loading"===t.toast.type},get children(){const e=B.cloneNode(!0);return c(e,d(et,f((()=>t.toast.iconTheme)))),u((t=>p(e,P,t))),e}}),d(n,{get when(){return"success"===t.toast.type},get children(){const e=B.cloneNode(!0);return c(e,d(X,f((()=>t.toast.iconTheme)))),u((t=>p(e,P,t))),e}}),d(n,{get when(){return"error"===t.toast.type},get children(){const e=B.cloneNode(!0);return c(e,d(Z,f((()=>t.toast.iconTheme)))),u((t=>p(e,P,t))),e}})]}}),s),h(s,(()=>t.toast.ariaProps),!1,!0),c(s,(()=>S(t.toast.message,t.toast))),u((i=>{const o=t.toast.className,n={...N,...t.toast.style},r=C;return o!==i._v$&&m(e,i._v$=o),i._v$2=p(e,n,i._v$2),i._v$3=p(s,r,i._v$3),i}),{_v$:void 0,_v$2:void 0,_v$3:void 0}),e})()},q=v("<div></div>",2),G=i=>{const s=()=>{const t=i.toast.position||k.position,e=((t,e)=>{const{toasts:i}=_,s=M().gutter||O.gutter||8,o=i.filter((t=>(t.position||e)===e&&t.height)),n=o.findIndex((e=>e.id===t.id)),r=o.filter(((t,e)=>e<n&&t.visible)).length;return o.slice(0,r).reduce(((t,e)=>t+s+(e.height||0)),0)})(i.toast,t),s=((t,e)=>({left:0,right:0,display:"flex",position:"absolute",transition:"all 230ms cubic-bezier(.21,1.02,.73,1)",...t.includes("top")?{top:0,"margin-top":`${e}px`}:{bottom:0,"margin-bottom":`${e}px`},...t.includes("center")?{"justify-content":"center"}:t.includes("right")?{"justify-content":"flex-end"}:{}}))(t,e);return s},[o,n]=t(s());let a;return e((()=>{const t=s();n(t)})),r((()=>{a&&((t,e)=>{const i=t.getBoundingClientRect();i.height!==e.height&&E({type:y.UPDATE_TOAST,toast:{id:e.id,height:i.height}})})(a,i.toast)})),(()=>{const t=q.cloneNode(!0);t.addEventListener("mouseleave",(()=>E({type:y.END_PAUSE,time:Date.now()}))),t.addEventListener("mouseenter",(()=>E({type:y.START_PAUSE,time:Date.now()})));return"function"==typeof a?a(t):a=t,c(t,(()=>{const t=g((()=>"custom"===i.toast.type),!0);return()=>t()?S(i.toast.message,i.toast):d(L,{get toast(){return i.toast},get position(){return i.toast.position||k.position}})})()),u((e=>{const s=o(),n=i.toast.visible?"sldt-active":"";return e._v$=p(t,s,e._v$),n!==e._v$2&&m(t,e._v$2=n),e}),{_v$:void 0,_v$2:void 0}),t})()},H=v('<svg><circle cx="16" cy="16" r="0"><animate attributeName="opacity" values="0; 1; 1"></animate><animate attributeName="r" values="0; 17.5; 16"></animate></circle></svg>',8,!0),J=v('<svg><circle cx="16" cy="16" r="12"><animate attributeName="opacity" values="1; 0"></animate><animate attributeName="r" values="12; 26"></animate></circle></svg>',8,!0),K=t=>{const e={dur:"0.35s",begin:"100ms",fill:"freeze",calcMode:"spline",keyTimes:"0; 0.6; 1",keySplines:"0.25 0.71 0.4 0.88; .59 .22 .87 .63"};return(()=>{const i=H.cloneNode(!0),s=i.firstChild,o=s.nextSibling;return h(s,e,!0,!1),h(o,e,!0,!1),u((()=>T(i,"fill",t.fill))),i})()},Q=t=>{const e={dur:"1s",begin:t.begin||"320ms",fill:"freeze",...I("0.0 0.0 0.2 1")};return(()=>{const i=J.cloneNode(!0),s=i.firstChild,o=s.nextSibling;return h(s,e,!0,!1),h(o,e,!0,!1),u((()=>T(i,"fill",t.fill))),i})()},W=v('<svg viewBox="0 0 32 32" width="1.25rem" height="1.25rem"><path fill="none" stroke-width="4" stroke-dasharray="22" stroke-dashoffset="22" 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"><animate attributeName="stroke-dashoffset" values="22;0" dur="0.25s" begin="250ms" fill="freeze"></animate></path></svg>',6),X=t=>{const e=t.primary||"#34C759";return(()=>{const i=W.cloneNode(!0),s=i.firstChild,o=s.firstChild;return i.style.setProperty("overflow","visible"),c(i,d(K,{fill:e}),s),c(i,d(Q,{fill:e,begin:"350ms"}),s),h(o,(()=>I("0.0, 0.0, 0.58, 1.0")),!0,!1),u((()=>T(s,"stroke",t.secondary||"#FCFCFC"))),i})()},Y=v('<svg viewBox="0 0 32 32" width="1.25rem" height="1.25rem"><path fill="none" stroke-width="4" stroke-dasharray="9" stroke-dashoffset="9" stroke-linecap="round" d="M16,7l0,9"><animate attributeName="stroke-dashoffset" values="9;0" dur="0.2s" begin="250ms" fill="freeze"></animate></path><circle cx="16" cy="23" r="2.5" opacity="0"><animate attributeName="opacity" values="0;1" dur="0.25s" begin="350ms" fill="freeze"></animate></circle></svg>',10),Z=t=>{const e=t.primary||"#FF3B30";return(()=>{const i=Y.cloneNode(!0),s=i.firstChild,o=s.firstChild,n=s.nextSibling,r=n.firstChild;return i.style.setProperty("overflow","visible"),c(i,d(K,{fill:e}),s),c(i,d(Q,{fill:e}),s),h(o,(()=>I("0.0, 0.0, 0.58, 1.0")),!0,!1),h(r,(()=>I("0.0, 0.0, 0.58, 1.0")),!0,!1),u((e=>{const i=t.secondary||"#FFFFFF",o=t.secondary||"#FFFFFF";return i!==e._v$&&T(s,"stroke",e._v$=i),o!==e._v$2&&T(n,"fill",e._v$2=o),e}),{_v$:void 0,_v$2:void 0}),i})()},tt=v('<svg viewBox="0 0 32 32" width="1.25rem" height="1.25rem"><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"><animateTransform attributeName="transform" type="rotate" from="0 16 16" to="360 16 16" dur="0.75s" repeatCount="indefinite"></animateTransform></path></svg>',8),et=t=>(()=>{const e=tt.cloneNode(!0),i=e.firstChild,s=i.nextSibling;return e.style.setProperty("overflow","visible"),u((e=>{const o=t.primary||"#E5E7EB",n=t.secondary||"#4b5563";return o!==e._v$&&T(i,"stroke",e._v$=o),n!==e._v$2&&T(s,"stroke",e._v$2=n),e}),{_v$:void 0,_v$2:void 0}),e})();var it=R;export{y as ActionType,j as Toaster,it as default,S as resolveValue,R as toast};
import{createSignal as t,createEffect as e,onCleanup as i,For as s,Switch as o,Match as n,onMount as r}from"solid-js";import{createStore as a,produce as l}from"solid-js/store";import{insert as c,createComponent as d,effect as u,style as p,className as m,template as v,mergeProps as f,spread as h,memo as g,setAttribute as T}from"solid-js/web";const y=(t,e)=>(t=>"function"==typeof t)(t)?t(e):t;let S;!function(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"}(S||(S={}));const[_,b]=a({toasts:[],pausedAt:void 0}),A=new Map,x=(t,e)=>{if(A.has(t))return;const i=setTimeout((()=>{A.delete(t),E({type:S.REMOVE_TOAST,toastId:t})}),e);A.set(t,i)},E=t=>{switch(t.type){case S.ADD_TOAST:b("toasts",(e=>{const i=e;return[t.toast,...i]}));break;case S.DISMISS_TOAST:const{toastId:e}=t,i=_.toasts;if(e){const t=i.find((t=>t.id===e));t&&x(e,t.unmountDelay),b("toasts",(t=>t.id===e),l((t=>t.visible=!1)))}else i.forEach((t=>{x(t.id,t.unmountDelay)})),b("toasts",(t=>void 0!==t.id),l((t=>t.visible=!1)));break;case S.REMOVE_TOAST:if(!t.toastId){b("toasts",[]);break}b("toasts",(e=>e.filter((e=>e.id!==t.toastId))));break;case S.UPDATE_TOAST:t.toast.id&&(t=>{const e=A.get(t);A.delete(t),e&&clearTimeout(e)})(t.toast.id),b("toasts",(e=>e.id===t.toast.id),(e=>({...e,...t.toast})));break;case S.UPSERT_TOAST:_.toasts.find((e=>e.id===t.toast.id))?E({type:S.UPDATE_TOAST,toast:t.toast}):E({type:S.ADD_TOAST,toast:t.toast});break;case S.START_PAUSE:b(l((t=>{t.pausedAt=Date.now(),t.toasts.forEach((t=>{t.paused=!0}))})));break;case S.END_PAUSE:const s=t.time-(_.pausedAt||0);b(l((t=>{t.pausedAt=void 0,t.toasts.forEach((t=>{t.pauseDuration+=s,t.paused=!1}))})))}},$={blank:4e3,error:4e3,success:2e3,loading:1/0,custom:4e3},k={id:"",icon:"",unmountDelay:500,duration:3e3,ariaProps:{role:"status","aria-live":"polite"},className:"",style:{},position:"top-right",iconTheme:{}},O={position:"top-right",toastOptions:k,gutter:8,containerStyle:{},containerClassName:""},D={position:"fixed","z-index":9999,top:"16px",bottom:"16px",left:"16px",right:"16px","pointer-events":"none"},w=(()=>{let t=0;return()=>String(++t)})(),N={display:"flex","align-items":"center",color:"#363636",background:"white","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"},P={display:"flex","align-items":"center",flex:"1 1 auto",margin:"4px 10px","white-space":"pre-line"},C={"flex-shrink":0,"min-width":"20px","min-height":"20px",display:"flex","align-items":"center","justify-content":"center","text-align":"center"},I=t=>({calcMode:"spline",keyTimes:"0; 1",keySplines:t}),[M,F]=t(O),U=t=>(e,i={})=>{const s=_.toasts.find((t=>t.id===i.id)),o=((t,e="blank",i)=>({...k,...M().toastOptions,...i,type:e,message:t,pauseDuration:0,createdAt:Date.now(),visible:!0,id:i.id||w(),paused:!1,style:{...k.style,...M().toastOptions?.style,...i.style},duration:i.duration||M().toastOptions?.duration||$[e],position:i.position||M().toastOptions?.position||M().position||k.position}))(e,t,{...s,duration:void 0,...i});return E({type:S.UPSERT_TOAST,toast:o}),o.id},R=(t,e)=>U("blank")(t,e);R.error=U("error"),R.success=U("success"),R.loading=U("loading"),R.custom=U("custom"),R.dismiss=t=>{E({type:S.DISMISS_TOAST,toastId:t})},R.promise=(t,e,i)=>{const s=R.loading(e.loading,{...i});return t.then((t=>(R.success(y(e.success,t),{id:s,...i}),t))).catch((t=>{R.error(y(e.error,t),{id:s,...i})})),t},R.remove=t=>{E({type:S.REMOVE_TOAST,toastId:t})};const z=v("<div><style>.sldt-active{z-index:9999;}.sldt-active>*{pointer-events:auto;}</style></div>",4),j=t=>(e((()=>{(t=>{F((e=>({containerClassName:t.containerClassName??e.containerClassName,containerStyle:t.containerStyle??e.containerStyle,gutter:t.gutter??e.gutter,position:t.position??e.position,toastOptions:{...t.toastOptions}})))})(t)})),e((()=>{const t=(()=>{const{pausedAt:t,toasts:e}=_;if(t)return;const i=Date.now(),s=e.map((t=>{if(t.duration===1/0)return;const e=(t.duration||0)+t.pauseDuration-(i-t.createdAt);if(!(e<=0))return setTimeout((()=>{E({type:S.DISMISS_TOAST,toastId:t.id})}),e);t.visible&&E({type:S.DISMISS_TOAST,toastId:t.id})}));return s})();i((()=>{t&&t.forEach((t=>t&&clearTimeout(t)))}))})),(()=>{const e=z.cloneNode(!0);return e.firstChild,c(e,d(s,{get each(){return _.toasts},children:t=>d(G,{toast:t})}),null),u((i=>{const s={...D,...t.containerStyle},o=t.containerClassName;return i._v$=p(e,s,i._v$),o!==i._v$2&&m(e,i._v$2=o),i}),{_v$:void 0,_v$2:void 0}),e})()),B=v("<div></div>",2),V=v("<div><div></div></div>",4),L=t=>{let i;return e((()=>{if(!i)return;const e=((t,e)=>(t.position||e).includes("top")?1:-1)(t.toast,t.position);t.toast.visible?i.animate([{transform:`translate3d(0,${-200*e}%,0) scale(.6)`,opacity:.5},{transform:"translate3d(0,0,0) scale(1)",opacity:1}],{duration:350,fill:"forwards",easing:"cubic-bezier(.21,1.02,.73,1)"}):i.animate([{transform:"translate3d(0,0,-1px) scale(1)",opacity:1},{transform:`translate3d(0,${-150*e}%,-1px) scale(.4)`,opacity:0}],{duration:400,fill:"forwards",easing:"cubic-bezier(.06,.71,.55,1)"})})),(()=>{const e=V.cloneNode(!0),s=e.firstChild;return"function"==typeof i?i(e):i=e,c(e,d(o,{get children(){return[d(n,{get when(){return t.toast.icon},get children(){const e=B.cloneNode(!0);return c(e,(()=>t.toast.icon)),u((t=>p(e,C,t))),e}}),d(n,{get when(){return"loading"===t.toast.type},get children(){const e=B.cloneNode(!0);return c(e,d(et,f((()=>t.toast.iconTheme)))),u((t=>p(e,C,t))),e}}),d(n,{get when(){return"success"===t.toast.type},get children(){const e=B.cloneNode(!0);return c(e,d(X,f((()=>t.toast.iconTheme)))),u((t=>p(e,C,t))),e}}),d(n,{get when(){return"error"===t.toast.type},get children(){const e=B.cloneNode(!0);return c(e,d(Z,f((()=>t.toast.iconTheme)))),u((t=>p(e,C,t))),e}})]}}),s),h(s,(()=>t.toast.ariaProps),!1,!0),c(s,(()=>y(t.toast.message,t.toast))),u((i=>{const o=t.toast.className,n={...N,...t.toast.style},r=P;return o!==i._v$&&m(e,i._v$=o),i._v$2=p(e,n,i._v$2),i._v$3=p(s,r,i._v$3),i}),{_v$:void 0,_v$2:void 0,_v$3:void 0}),e})()},q=v("<div></div>",2),G=i=>{const s=()=>{const t=i.toast.position||k.position,e=((t,e)=>{const{toasts:i}=_,s=M().gutter||O.gutter||8,o=i.filter((t=>(t.position||e)===e&&t.height)),n=o.findIndex((e=>e.id===t.id)),r=o.filter(((t,e)=>e<n&&t.visible)).length;return o.slice(0,r).reduce(((t,e)=>t+s+(e.height||0)),0)})(i.toast,t),s=((t,e)=>({left:0,right:0,display:"flex",position:"absolute",transition:"all 230ms cubic-bezier(.21,1.02,.73,1)",...t.includes("top")?{top:0,"margin-top":`${e}px`}:{bottom:0,"margin-bottom":`${e}px`},...t.includes("center")?{"justify-content":"center"}:t.includes("right")?{"justify-content":"flex-end"}:{}}))(t,e);return s},[o,n]=t(s());let a;return e((()=>{const t=s();n(t)})),r((()=>{a&&((t,e)=>{const i=t.getBoundingClientRect();i.height!==e.height&&E({type:S.UPDATE_TOAST,toast:{id:e.id,height:i.height}})})(a,i.toast)})),(()=>{const t=q.cloneNode(!0);t.addEventListener("mouseleave",(()=>E({type:S.END_PAUSE,time:Date.now()}))),t.addEventListener("mouseenter",(()=>E({type:S.START_PAUSE,time:Date.now()})));return"function"==typeof a?a(t):a=t,c(t,(()=>{const t=g((()=>"custom"===i.toast.type),!0);return()=>t()?y(i.toast.message,i.toast):d(L,{get toast(){return i.toast},get position(){return i.toast.position||k.position}})})()),u((e=>{const s=o(),n=i.toast.visible?"sldt-active":"";return e._v$=p(t,s,e._v$),n!==e._v$2&&m(t,e._v$2=n),e}),{_v$:void 0,_v$2:void 0}),t})()},H=v('<svg><circle cx="16" cy="16" r="0"><animate attributeName="opacity" values="0; 1; 1"></animate><animate attributeName="r" values="0; 17.5; 16"></animate></circle></svg>',8,!0),J=v('<svg><circle cx="16" cy="16" r="12" opacity="0"><animate attributeName="opacity" values="1; 0"></animate><animate attributeName="r" values="12; 26"></animate></circle></svg>',8,!0),K=t=>{const e={dur:"0.35s",begin:"100ms",fill:"freeze",calcMode:"spline",keyTimes:"0; 0.6; 1",keySplines:"0.25 0.71 0.4 0.88; .59 .22 .87 .63"};return(()=>{const i=H.cloneNode(!0),s=i.firstChild,o=s.nextSibling;return h(s,e,!0,!1),h(o,e,!0,!1),u((()=>T(i,"fill",t.fill))),i})()},Q=t=>{const e={dur:"1s",begin:t.begin||"320ms",fill:"freeze",...I("0.0 0.0 0.2 1")};return(()=>{const i=J.cloneNode(!0),s=i.firstChild,o=s.nextSibling;return h(s,e,!0,!1),h(o,e,!0,!1),u((()=>T(i,"fill",t.fill))),i})()},W=v('<svg viewBox="0 0 32 32" width="1.25rem" height="1.25rem"><path fill="none" stroke-width="4" stroke-dasharray="22" stroke-dashoffset="22" 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"><animate attributeName="stroke-dashoffset" values="22;0" dur="0.25s" begin="250ms" fill="freeze"></animate></path></svg>',6),X=t=>{const e=t.primary||"#34C759";return(()=>{const i=W.cloneNode(!0),s=i.firstChild,o=s.firstChild;return i.style.setProperty("overflow","visible"),c(i,d(K,{fill:e}),s),c(i,d(Q,{fill:e,begin:"350ms"}),s),h(o,(()=>I("0.0, 0.0, 0.58, 1.0")),!0,!1),u((()=>T(s,"stroke",t.secondary||"#FCFCFC"))),i})()},Y=v('<svg viewBox="0 0 32 32" width="1.25rem" height="1.25rem"><path fill="none" stroke-width="4" stroke-dasharray="9" stroke-dashoffset="9" stroke-linecap="round" d="M16,7l0,9"><animate attributeName="stroke-dashoffset" values="9;0" dur="0.2s" begin="250ms" fill="freeze"></animate></path><circle cx="16" cy="23" r="2.5" opacity="0"><animate attributeName="opacity" values="0;1" dur="0.25s" begin="350ms" fill="freeze"></animate></circle></svg>',10),Z=t=>{const e=t.primary||"#FF3B30";return(()=>{const i=Y.cloneNode(!0),s=i.firstChild,o=s.firstChild,n=s.nextSibling,r=n.firstChild;return i.style.setProperty("overflow","visible"),c(i,d(K,{fill:e}),s),c(i,d(Q,{fill:e}),s),h(o,(()=>I("0.0, 0.0, 0.58, 1.0")),!0,!1),h(r,(()=>I("0.0, 0.0, 0.58, 1.0")),!0,!1),u((e=>{const i=t.secondary||"#FFFFFF",o=t.secondary||"#FFFFFF";return i!==e._v$&&T(s,"stroke",e._v$=i),o!==e._v$2&&T(n,"fill",e._v$2=o),e}),{_v$:void 0,_v$2:void 0}),i})()},tt=v('<svg viewBox="0 0 32 32" width="1.25rem" height="1.25rem"><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"><animateTransform attributeName="transform" type="rotate" from="0 16 16" to="360 16 16" dur="0.75s" repeatCount="indefinite"></animateTransform></path></svg>',8),et=t=>(()=>{const e=tt.cloneNode(!0),i=e.firstChild,s=i.nextSibling;return e.style.setProperty("overflow","visible"),u((e=>{const o=t.primary||"#E5E7EB",n=t.secondary||"#4b5563";return o!==e._v$&&T(i,"stroke",e._v$=o),n!==e._v$2&&T(s,"stroke",e._v$2=n),e}),{_v$:void 0,_v$2:void 0}),e})();var it=R;export{S as ActionType,j as Toaster,it as default,y as resolveValue,R as toast};
//# sourceMappingURL=index.js.map

2

dist/source/components/IconCircle.jsx

@@ -23,3 +23,3 @@ import { genSVGCubicBezier } from '../util';

};
return (<circle fill={props.fill} cx="16" cy="16" r="12">
return (<circle fill={props.fill} cx="16" cy="16" r="12" opacity="0">
<animate attributeName="opacity" values="1; 0" {...publicProps}/>

@@ -26,0 +26,0 @@ <animate attributeName="r" values="12; 26" {...publicProps}/>

1

dist/source/components/ToastBar.jsx

@@ -32,3 +32,2 @@ import { createEffect, Match, Switch } from 'solid-js';

});
console.log('CLASSSNAME', props.toast.className);
return (<div ref={el} class={props.toast.className} style={{

@@ -35,0 +34,0 @@ ...toastBarBase,

2

package.json
{
"name": "solid-toast",
"version": "0.3.3",
"version": "0.3.4",
"description": "Customizable Toast Notifications for SolidJS",

@@ -5,0 +5,0 @@ "source": "./src/index.tsx",

dist/cjs/index.js.map

Sorry, the diff of this file is not supported yet

dist/esm/index.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc