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.1.8 to 0.2.0

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"),s=require("goober");const r=(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[n,a]=e.createStore({toasts:[],pausedAt:void 0}),c=new Map,l=(t,e)=>{if(c.has(t))return;const o=setTimeout((()=>{c.delete(t),p({type:exports.ActionType.REMOVE_TOAST,toastId:t})}),e);c.set(t,o)},p=t=>{switch(t.type){case exports.ActionType.ADD_TOAST:a("toasts",(e=>{const o=e;return[t.toast,...o]}));break;case exports.ActionType.DISMISS_TOAST:const{toastId:o}=t,s=n.toasts;if(o){const t=s.find((t=>t.id===o));t&&l(o,t.unmountDelay),a("toasts",(t=>t.id===o),e.produce((t=>t.visible=!1)))}else s.forEach((t=>{l(t.id,t.unmountDelay)})),a("toasts",(t=>void 0!==t.id),e.produce((t=>t.visible=!1)));break;case exports.ActionType.REMOVE_TOAST:if(!t.toastId){a("toasts",[]);break}a("toasts",(e=>e.filter((e=>e.id!==t.toastId))));break;case exports.ActionType.UPDATE_TOAST:t.toast.id&&(t=>{const e=c.get(t);c.delete(t),e&&clearTimeout(e)})(t.toast.id),a("toasts",(e=>e.id===t.toast.id),(e=>({...e,...t.toast})));break;case exports.ActionType.UPSERT_TOAST:n.toasts.find((e=>e.id===t.toast.id))?p({type:exports.ActionType.UPDATE_TOAST,toast:t.toast}):p({type:exports.ActionType.ADD_TOAST,toast:t.toast});break;case exports.ActionType.START_PAUSE:a("pausedAt",Date.now());break;case exports.ActionType.END_PAUSE:const r=t.time-(n.pausedAt||0);a(e.produce((t=>{t.pausedAt=void 0,t.toasts.forEach((t=>{t.pauseDuration+=r}))})))}},d={blank:4e3,error:4e3,success:2e3,loading:1/0,custom:4e3},y={id:"",icon:"",unmountDelay:500,duration:3e3,ariaProps:{role:"status","aria-live":"polite"},className:"",style:{},position:"top-right",iconTheme:{}},u={position:"top-right",toastOptions:y,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=(t,e)=>(t.position||e).includes("top")?1:-1,T={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"},g={display:"flex","align-items":"center",flex:"1 1 auto",margin:"4px 10px","white-space":"pre-line"},A={"flex-shrink":0,"min-width":"20px","min-height":"20px",display:"flex","align-items":"center","justify-content":"center","text-align":"center"},_=s.keyframes`from{transform:scale(0)rotate(45deg);opacity:0;}to{transform:scale(1)rotate(45deg);opacity:1;}`,h=s.keyframes`75%,100%{transform: scale(2.25);opacity:0;}`,S=s.keyframes`to{stroke-dashoffset: 0;}`,x=s.keyframes`0%{transform:translate3d(0,0,0);opacity:1;}100%{transform:translate3d(0,7px,0)scale(1);opacity:1;}`,b=s.keyframes`from{transform: rotate(0deg);}to{transform: rotate(360deg);}`,[$,P]=t.createSignal(u),E=t=>(e,o={})=>{const s=n.toasts.find((t=>t.id===o.id)),r=((t,e="blank",o)=>({...y,...$().toastOptions,...o,type:e,message:t,pauseDuration:0,createdAt:Date.now(),visible:!0,id:o.id||f(),style:{...y.style,...$().toastOptions?.style,...o.style},duration:o.duration||$().toastOptions?.duration||d[e],position:o.position||$().toastOptions?.position||$().position||y.position}))(e,t,{...s,duration:void 0,...o});return p({type:exports.ActionType.UPSERT_TOAST,toast:r}),r.id},k=(t,e)=>E("blank")(t,e);k.error=E("error"),k.success=E("success"),k.loading=E("loading"),k.custom=E("custom"),k.dismiss=t=>{p({type:exports.ActionType.DISMISS_TOAST,toastId:t})},k.promise=(t,e,o)=>{const s=k.loading(e.loading,{...o});return t.then((t=>(k.success(r(e.success,t),{id:s,...o}),t))).catch((t=>{k.error(r(e.error,t),{id:s,...o})})),t},k.remove=t=>{p({type:exports.ActionType.REMOVE_TOAST,toastId:t})};const w=o.template("<div></div>",2),O=o.template("<div></div>",2),D=o.template("<div><div></div></div>",4),C=e=>{const[i,n]=t.createSignal("");return t.createEffect((()=>{var t;e.toast.visible?n(`${s.keyframes((t=v(e.toast,e.position),`\n0% {transform: translate3d(0,${-200*t}%,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`):n(`${s.keyframes((t=>`\n0% {transform: translate3d(0,0,-1px) scale(1); opacity:1;}\n100% {transform: translate3d(0,${-150*t}%,-1px) scale(.4); opacity:0;}\n`)(v(e.toast,e.position)))} 0.4s forwards cubic-bezier(.06,.71,.55,1)`)})),(()=>{const s=D.cloneNode(!0),n=s.firstChild;return o.insert(s,o.createComponent(t.Switch,{get children(){return[o.createComponent(t.Match,{get when(){return e.toast.icon},get children(){const t=O.cloneNode(!0);return o.insert(t,(()=>e.toast.icon)),o.effect((e=>o.style(t,A,e))),t}}),o.createComponent(t.Match,{get when(){return"loading"===e.toast.type},get children(){const t=O.cloneNode(!0);return o.insert(t,o.createComponent(B,o.mergeProps((()=>e.toast.iconTheme)))),o.effect((e=>o.style(t,A,e))),t}}),o.createComponent(t.Match,{get when(){return"success"===e.toast.type},get children(){const t=O.cloneNode(!0);return o.insert(t,o.createComponent(U,o.mergeProps((()=>e.toast.iconTheme)))),o.effect((e=>o.style(t,A,e))),t}}),o.createComponent(t.Match,{get when(){return"error"===e.toast.type},get children(){const t=O.cloneNode(!0);return o.insert(t,o.createComponent(z,o.mergeProps((()=>e.toast.iconTheme)))),o.effect((e=>o.style(t,A,e))),t}})]}}),n),o.spread(n,(()=>e.toast.ariaProps),!1,!0),o.insert(n,(()=>r(e.toast.message,e.toast))),o.effect((t=>{const r=e.toast.className,a={...T,animation:i(),...e.toast.style},c=g;return r!==t._v$&&o.className(s,t._v$=r),t._v$2=o.style(s,a,t._v$2),t._v$3=o.style(n,c,t._v$3),t}),{_v$:void 0,_v$2:void 0,_v$3:void 0}),s})()},N=o.template("<div></div>",2),M=s.css`z-index: 9999;> * { pointer-events: auto;}`,I=e=>{const s=()=>{const t=e.toast.position||y.position,o=((t,e)=>{const{toasts:o}=n,s=$().gutter||u.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)})(e.toast,t),s=((t,e)=>{const o=t.includes("top");return{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)`,...o?{top:0}:{bottom:0},...t.includes("center")?{"justify-content":"center"}:t.includes("right")?{"justify-content":"flex-end"}:{}}})(t,o);return s},[i,a]=t.createSignal(s());let c;return t.createEffect((()=>{const t=s();a(t)})),t.onMount((()=>{c&&((t,e)=>{const o=t.getBoundingClientRect();o.height!==e.height&&p({type:exports.ActionType.UPDATE_TOAST,toast:{id:e.id,height:o.height}})})(c,e.toast)})),(()=>{const t=N.cloneNode(!0);t.addEventListener("mouseleave",(()=>p({type:exports.ActionType.END_PAUSE,time:Date.now()}))),t.addEventListener("mouseenter",(()=>p({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()?r(e.toast.message,e.toast):o.createComponent(C,{get toast(){return e.toast},get position(){return e.toast.position||y.position}})})()),o.effect((s=>{const r=i(),n=e.toast.visible?M:"";return s._v$=o.style(t,r,s._v$),n!==s._v$2&&o.className(t,s._v$2=n),s}),{_v$:void 0,_v$2:void 0}),t})()},F=o.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),U=t=>{const e=`${_} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards`,s=`${h} 1s cubic-bezier(0, 0, 0.2, 1) forwards`,r=`${S} 0.2s ease-out forwards`;return(()=>{const i=F.cloneNode(!0),n=i.firstChild,a=n.nextSibling,c=a.nextSibling;return i.style.setProperty("overflow","visible"),n.style.setProperty("animation",e),n.style.setProperty("transform-origin","50% 50%"),n.style.setProperty("animation-delay","100ms"),n.style.setProperty("opacity","0"),a.style.setProperty("animation",s),a.style.setProperty("transform-origin","50% 50%"),a.style.setProperty("animation-delay","250ms"),c.style.setProperty("animation",r),c.style.setProperty("stroke-dasharray","22"),c.style.setProperty("stroke-dashoffset","22"),c.style.setProperty("animation-delay","250ms"),o.effect((e=>{const s=t.primary||"#34C759",r=t.primary||"#34C759",i=t.secondary||"#FCFCFC";return s!==e._v$&&o.setAttribute(n,"fill",e._v$=s),r!==e._v$2&&o.setAttribute(a,"fill",e._v$2=r),i!==e._v$3&&o.setAttribute(c,"stroke",e._v$3=i),e}),{_v$:void 0,_v$2:void 0,_v$3:void 0}),i})()},R=o.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),z=t=>{const e=`${_} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards`,s=`${h} 1s cubic-bezier(0, 0, 0.2, 1) forwards`,r=`${S} 0.1s ease-in forwards`,i=`${x} 0.2s ease-out forwards`;return(()=>{const n=R.cloneNode(!0),a=n.firstChild,c=a.nextSibling,l=c.nextSibling,p=l.nextSibling;return n.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"),c.style.setProperty("animation",s),c.style.setProperty("transform-origin","50% 50%"),c.style.setProperty("animation-delay","320ms"),l.style.setProperty("animation",r),l.style.setProperty("stroke-dasharray","9"),l.style.setProperty("stroke-dashoffset","9"),l.style.setProperty("animation-delay","200ms"),p.style.setProperty("animation",i),p.style.setProperty("animation-delay","320ms"),p.style.setProperty("opacity","0"),o.effect((e=>{const s=t.primary||"#FF3B30",r=t.primary||"#FF3B30",i=t.secondary||"#FFFFFF",n=t.secondary||"#FFFFFF";return s!==e._v$&&o.setAttribute(a,"fill",e._v$=s),r!==e._v$2&&o.setAttribute(c,"fill",e._v$2=r),i!==e._v$3&&o.setAttribute(l,"stroke",e._v$3=i),n!==e._v$4&&o.setAttribute(p,"fill",e._v$4=n),e}),{_v$:void 0,_v$2:void 0,_v$3:void 0,_v$4:void 0}),n})()},j=o.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),B=t=>{const e=`${b} 0.75s linear infinite`;return(()=>{const s=j.cloneNode(!0),r=s.firstChild,i=r.nextSibling;return s.style.setProperty("overflow","visible"),i.style.setProperty("animation",e),i.style.setProperty("transform-origin","50% 50%"),o.effect((e=>{const s=t.primary||"#E5E7EB",n=t.secondary||"#4b5563";return s!==e._v$&&o.setAttribute(r,"stroke",e._v$=s),n!==e._v$2&&o.setAttribute(i,"stroke",e._v$2=n),e}),{_v$:void 0,_v$2:void 0}),s})()};var V=k;exports.Toaster=e=>(t.createEffect((()=>{(t=>{P((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}=n;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((()=>{p({type:exports.ActionType.DISMISS_TOAST,toastId:t.id})}),e);t.visible&&p({type:exports.ActionType.DISMISS_TOAST,toastId:t.id})}));return s})();t.onCleanup((()=>{e&&e.forEach((t=>t&&clearTimeout(t)))}))})),(()=>{const s=w.cloneNode(!0);return o.insert(s,o.createComponent(t.For,{get each(){return n.toasts},children:t=>o.createComponent(I,{toast:t})})),o.effect((t=>{const r={...m,...e.containerStyle},i=e.containerClassName;return t._v$=o.style(s,r,t._v$),i!==t._v$2&&o.className(s,t._v$2=i),t}),{_v$:void 0,_v$2:void 0}),s})()),exports.default=V,exports.resolveValue=r,exports.toast=k;
Object.defineProperty(exports,"__esModule",{value:!0});var t=require("solid-js"),e=require("solid-js/store"),o=require("solid-js/web"),s=require("goober");const r=(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[n,a]=e.createStore({toasts:[],pausedAt:void 0}),c=new Map,l=(t,e)=>{if(c.has(t))return;const o=setTimeout((()=>{c.delete(t),p({type:exports.ActionType.REMOVE_TOAST,toastId:t})}),e);c.set(t,o)},p=t=>{switch(t.type){case exports.ActionType.ADD_TOAST:a("toasts",(e=>{const o=e;return[t.toast,...o]}));break;case exports.ActionType.DISMISS_TOAST:const{toastId:o}=t,s=n.toasts;if(o){const t=s.find((t=>t.id===o));t&&l(o,t.unmountDelay),a("toasts",(t=>t.id===o),e.produce((t=>t.visible=!1)))}else s.forEach((t=>{l(t.id,t.unmountDelay)})),a("toasts",(t=>void 0!==t.id),e.produce((t=>t.visible=!1)));break;case exports.ActionType.REMOVE_TOAST:if(!t.toastId){a("toasts",[]);break}a("toasts",(e=>e.filter((e=>e.id!==t.toastId))));break;case exports.ActionType.UPDATE_TOAST:t.toast.id&&(t=>{const e=c.get(t);c.delete(t),e&&clearTimeout(e)})(t.toast.id),a("toasts",(e=>e.id===t.toast.id),(e=>({...e,...t.toast})));break;case exports.ActionType.UPSERT_TOAST:n.toasts.find((e=>e.id===t.toast.id))?p({type:exports.ActionType.UPDATE_TOAST,toast:t.toast}):p({type:exports.ActionType.ADD_TOAST,toast:t.toast});break;case exports.ActionType.START_PAUSE:a("pausedAt",Date.now());break;case exports.ActionType.END_PAUSE:const r=t.time-(n.pausedAt||0);a(e.produce((t=>{t.pausedAt=void 0,t.toasts.forEach((t=>{t.pauseDuration+=r}))})))}},d={blank:4e3,error:4e3,success:2e3,loading:1/0,custom:4e3},y={id:"",icon:"",unmountDelay:500,duration:3e3,ariaProps:{role:"status","aria-live":"polite"},className:"",style:{},position:"top-right",iconTheme:{}},m={position:"top-right",toastOptions:y,gutter:8,containerStyle:{},containerClassName:""},u={position:"fixed","z-index":9999,top:"16px",bottom:"16px",left:"16px",right:"16px","pointer-events":"none"},f=(()=>{let t=0;return()=>String(++t)})(),v=(t,e)=>(t.position||e).includes("top")?1:-1,T={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"},g={display:"flex","align-items":"center",flex:"1 1 auto",margin:"4px 10px","white-space":"pre-line"},h={"flex-shrink":0,"min-width":"20px","min-height":"20px",display:"flex","align-items":"center","justify-content":"center","text-align":"center"},A=s.keyframes`from{transform:scale(0)rotate(45deg);opacity:0;}to{transform:scale(1)rotate(45deg);opacity:1;}`,_=s.keyframes`75%,100%{transform: scale(2.25);opacity:0;}`,S=s.keyframes`to{stroke-dashoffset: 0;}`,x=s.keyframes`0%{transform:translate3d(0,0,0);opacity:1;}100%{transform:translate3d(0,7px,0)scale(1);opacity:1;}`,b=s.keyframes`from{transform: rotate(0deg);}to{transform: rotate(360deg);}`,[$,P]=t.createSignal(m),E=t=>(e,o={})=>{const s=n.toasts.find((t=>t.id===o.id)),r=((t,e="blank",o)=>({...y,...$().toastOptions,...o,type:e,message:t,pauseDuration:0,createdAt:Date.now(),visible:!0,id:o.id||f(),style:{...y.style,...$().toastOptions?.style,...o.style},duration:o.duration||$().toastOptions?.duration||d[e],position:o.position||$().toastOptions?.position||$().position||y.position}))(e,t,{...s,duration:void 0,...o});return p({type:exports.ActionType.UPSERT_TOAST,toast:r}),r.id},w=(t,e)=>E("blank")(t,e);w.error=E("error"),w.success=E("success"),w.loading=E("loading"),w.custom=E("custom"),w.dismiss=t=>{p({type:exports.ActionType.DISMISS_TOAST,toastId:t})},w.promise=(t,e,o)=>{const s=w.loading(e.loading,{...o});return t.then((t=>(w.success(r(e.success,t),{id:s,...o}),t))).catch((t=>{w.error(r(e.error,t),{id:s,...o})})),t},w.remove=t=>{p({type:exports.ActionType.REMOVE_TOAST,toastId:t})};const k=o.template("<div></div>",2),O=o.template("<div></div>",2),D=o.template("<div><div></div></div>",4),C=e=>{const[i,n]=t.createSignal("");return t.createEffect((()=>{var t;e.toast.visible?n(`${s.keyframes((t=v(e.toast,e.position),`\n0% {transform: translate3d(0,${-200*t}%,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`):n(`${s.keyframes((t=>`\n0% {transform: translate3d(0,0,-1px) scale(1); opacity:1;}\n100% {transform: translate3d(0,${-150*t}%,-1px) scale(.4); opacity:0;}\n`)(v(e.toast,e.position)))} 0.4s forwards cubic-bezier(.06,.71,.55,1)`)})),(()=>{const s=D.cloneNode(!0),n=s.firstChild;return o.insert(s,o.createComponent(t.Switch,{get children(){return[o.createComponent(t.Match,{get when(){return e.toast.icon},get children(){const t=O.cloneNode(!0);return o.insert(t,(()=>e.toast.icon)),o.effect((e=>o.style(t,h,e))),t}}),o.createComponent(t.Match,{get when(){return"loading"===e.toast.type},get children(){const t=O.cloneNode(!0);return o.insert(t,o.createComponent(B,o.mergeProps((()=>e.toast.iconTheme)))),o.effect((e=>o.style(t,h,e))),t}}),o.createComponent(t.Match,{get when(){return"success"===e.toast.type},get children(){const t=O.cloneNode(!0);return o.insert(t,o.createComponent(U,o.mergeProps((()=>e.toast.iconTheme)))),o.effect((e=>o.style(t,h,e))),t}}),o.createComponent(t.Match,{get when(){return"error"===e.toast.type},get children(){const t=O.cloneNode(!0);return o.insert(t,o.createComponent(z,o.mergeProps((()=>e.toast.iconTheme)))),o.effect((e=>o.style(t,h,e))),t}})]}}),n),o.spread(n,(()=>e.toast.ariaProps),!1,!0),o.insert(n,(()=>r(e.toast.message,e.toast))),o.effect((t=>{const r=e.toast.className,a={...T,animation:i(),...e.toast.style},c=g;return r!==t._v$&&o.className(s,t._v$=r),t._v$2=o.style(s,a,t._v$2),t._v$3=o.style(n,c,t._v$3),t}),{_v$:void 0,_v$2:void 0,_v$3:void 0}),s})()},N=o.template("<div></div>",2),M=s.css`z-index: 9999;> * {pointer-events: auto;}`,I=e=>{const s=()=>{const t=e.toast.position||y.position,o=((t,e)=>{const{toasts:o}=n,s=$().gutter||m.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)})(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},[i,a]=t.createSignal(s());let c;return t.createEffect((()=>{const t=s();a(t)})),t.onMount((()=>{c&&((t,e)=>{const o=t.getBoundingClientRect();o.height!==e.height&&p({type:exports.ActionType.UPDATE_TOAST,toast:{id:e.id,height:o.height}})})(c,e.toast)})),(()=>{const t=N.cloneNode(!0);t.addEventListener("mouseleave",(()=>p({type:exports.ActionType.END_PAUSE,time:Date.now()}))),t.addEventListener("mouseenter",(()=>p({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()?r(e.toast.message,e.toast):o.createComponent(C,{get toast(){return e.toast},get position(){return e.toast.position||y.position}})})()),o.effect((s=>{const r=i(),n=e.toast.visible?M:"";return s._v$=o.style(t,r,s._v$),n!==s._v$2&&o.className(t,s._v$2=n),s}),{_v$:void 0,_v$2:void 0}),t})()},F=o.template('<svg viewBox="0 0 32 32" width="1.25rem" height="1.25rem"><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),U=t=>{const e=`${A} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards`,s=`${_} 1s cubic-bezier(0, 0, 0.2, 1) forwards`,r=`${S} 0.2s ease-out forwards`;return(()=>{const i=F.cloneNode(!0),n=i.firstChild,a=n.nextSibling,c=a.nextSibling;return i.style.setProperty("overflow","visible"),n.style.setProperty("animation",e),n.style.setProperty("transform-origin","50% 50%"),n.style.setProperty("animation-delay","100ms"),n.style.setProperty("opacity","0"),a.style.setProperty("animation",s),a.style.setProperty("transform-origin","50% 50%"),a.style.setProperty("animation-delay","250ms"),c.style.setProperty("animation",r),c.style.setProperty("stroke-dasharray","22"),c.style.setProperty("stroke-dashoffset","22"),c.style.setProperty("animation-delay","250ms"),o.effect((e=>{const s=t.primary||"#34C759",r=t.primary||"#34C759",i=t.secondary||"#FCFCFC";return s!==e._v$&&o.setAttribute(n,"fill",e._v$=s),r!==e._v$2&&o.setAttribute(a,"fill",e._v$2=r),i!==e._v$3&&o.setAttribute(c,"stroke",e._v$3=i),e}),{_v$:void 0,_v$2:void 0,_v$3:void 0}),i})()},R=o.template('<svg viewBox="0 0 32 32" width="1.25rem" height="1.25rem"><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),z=t=>{const e=`${A} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards`,s=`${_} 1s cubic-bezier(0, 0, 0.2, 1) forwards`,r=`${S} 0.1s ease-in forwards`,i=`${x} 0.2s ease-out forwards`;return(()=>{const n=R.cloneNode(!0),a=n.firstChild,c=a.nextSibling,l=c.nextSibling,p=l.nextSibling;return n.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"),c.style.setProperty("animation",s),c.style.setProperty("transform-origin","50% 50%"),c.style.setProperty("animation-delay","320ms"),l.style.setProperty("animation",r),l.style.setProperty("stroke-dasharray","9"),l.style.setProperty("stroke-dashoffset","9"),l.style.setProperty("animation-delay","200ms"),p.style.setProperty("animation",i),p.style.setProperty("animation-delay","320ms"),p.style.setProperty("opacity","0"),o.effect((e=>{const s=t.primary||"#FF3B30",r=t.primary||"#FF3B30",i=t.secondary||"#FFFFFF",n=t.secondary||"#FFFFFF";return s!==e._v$&&o.setAttribute(a,"fill",e._v$=s),r!==e._v$2&&o.setAttribute(c,"fill",e._v$2=r),i!==e._v$3&&o.setAttribute(l,"stroke",e._v$3=i),n!==e._v$4&&o.setAttribute(p,"fill",e._v$4=n),e}),{_v$:void 0,_v$2:void 0,_v$3:void 0,_v$4:void 0}),n})()},j=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"></path></svg>',6),B=t=>{const e=`${b} 0.75s linear infinite`;return(()=>{const s=j.cloneNode(!0),r=s.firstChild,i=r.nextSibling;return s.style.setProperty("overflow","visible"),i.style.setProperty("animation",e),i.style.setProperty("transform-origin","50% 50%"),o.effect((e=>{const s=t.primary||"#E5E7EB",n=t.secondary||"#4b5563";return s!==e._v$&&o.setAttribute(r,"stroke",e._v$=s),n!==e._v$2&&o.setAttribute(i,"stroke",e._v$2=n),e}),{_v$:void 0,_v$2:void 0}),s})()};var V=w;exports.Toaster=e=>(t.createEffect((()=>{(t=>{P((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}=n;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((()=>{p({type:exports.ActionType.DISMISS_TOAST,toastId:t.id})}),e);t.visible&&p({type:exports.ActionType.DISMISS_TOAST,toastId:t.id})}));return s})();t.onCleanup((()=>{e&&e.forEach((t=>t&&clearTimeout(t)))}))})),(()=>{const s=k.cloneNode(!0);return o.insert(s,o.createComponent(t.For,{get each(){return n.toasts},children:t=>o.createComponent(I,{toast:t})})),o.effect((t=>{const r={...u,...e.containerStyle},i=e.containerClassName;return t._v$=o.style(s,r,t._v$),i!==t._v$2&&o.className(s,t._v$2=i),t}),{_v$:void 0,_v$2:void 0}),s})()),exports.default=V,exports.resolveValue=r,exports.toast=w;
//# sourceMappingURL=index.js.map

2

dist/esm/index.js

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

import{createSignal as t,createEffect as e,onCleanup as o,For as s,Switch as r,Match as i,onMount as n}from"solid-js";import{createStore as a,produce as c}from"solid-js/store";import{insert as l,createComponent as d,effect as p,style as y,className as u,template as v,mergeProps as m,spread as f,memo as _,setAttribute as g}from"solid-js/web";import{keyframes as T,css as h}from"goober";const S=(t,e)=>(t=>"function"==typeof t)(t)?t(e):t;let $;!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"}($||($={}));const[A,b]=a({toasts:[],pausedAt:void 0}),x=new Map,P=(t,e)=>{if(x.has(t))return;const o=setTimeout((()=>{x.delete(t),E({type:$.REMOVE_TOAST,toastId:t})}),e);x.set(t,o)},E=t=>{switch(t.type){case $.ADD_TOAST:b("toasts",(e=>{const o=e;return[t.toast,...o]}));break;case $.DISMISS_TOAST:const{toastId:e}=t,o=A.toasts;if(e){const t=o.find((t=>t.id===e));t&&P(e,t.unmountDelay),b("toasts",(t=>t.id===e),c((t=>t.visible=!1)))}else o.forEach((t=>{P(t.id,t.unmountDelay)})),b("toasts",(t=>void 0!==t.id),c((t=>t.visible=!1)));break;case $.REMOVE_TOAST:if(!t.toastId){b("toasts",[]);break}b("toasts",(e=>e.filter((e=>e.id!==t.toastId))));break;case $.UPDATE_TOAST:t.toast.id&&(t=>{const e=x.get(t);x.delete(t),e&&clearTimeout(e)})(t.toast.id),b("toasts",(e=>e.id===t.toast.id),(e=>({...e,...t.toast})));break;case $.UPSERT_TOAST:A.toasts.find((e=>e.id===t.toast.id))?E({type:$.UPDATE_TOAST,toast:t.toast}):E({type:$.ADD_TOAST,toast:t.toast});break;case $.START_PAUSE:b("pausedAt",Date.now());break;case $.END_PAUSE:const s=t.time-(A.pausedAt||0);b(c((t=>{t.pausedAt=void 0,t.toasts.forEach((t=>{t.pauseDuration+=s}))})))}},w={blank:4e3,error:4e3,success:2e3,loading:1/0,custom:4e3},O={id:"",icon:"",unmountDelay:500,duration:3e3,ariaProps:{role:"status","aria-live":"polite"},className:"",style:{},position:"top-right",iconTheme:{}},D={position:"top-right",toastOptions:O,gutter:8,containerStyle:{},containerClassName:""},k={position:"fixed","z-index":9999,top:"16px",bottom:"16px",left:"16px",right:"16px","pointer-events":"none"},I=(()=>{let t=0;return()=>String(++t)})(),N=(t,e)=>(t.position||e).includes("top")?1:-1,F={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"},U={display:"flex","align-items":"center",flex:"1 1 auto",margin:"4px 10px","white-space":"pre-line"},M={"flex-shrink":0,"min-width":"20px","min-height":"20px",display:"flex","align-items":"center","justify-content":"center","text-align":"center"},C=T`from{transform:scale(0)rotate(45deg);opacity:0;}to{transform:scale(1)rotate(45deg);opacity:1;}`,R=T`75%,100%{transform: scale(2.25);opacity:0;}`,z=T`to{stroke-dashoffset: 0;}`,B=T`0%{transform:translate3d(0,0,0);opacity:1;}100%{transform:translate3d(0,7px,0)scale(1);opacity:1;}`,j=T`from{transform: rotate(0deg);}to{transform: rotate(360deg);}`,[V,L]=t(D),Y=t=>(e,o={})=>{const s=A.toasts.find((t=>t.id===o.id)),r=((t,e="blank",o)=>({...O,...V().toastOptions,...o,type:e,message:t,pauseDuration:0,createdAt:Date.now(),visible:!0,id:o.id||I(),style:{...O.style,...V().toastOptions?.style,...o.style},duration:o.duration||V().toastOptions?.duration||w[e],position:o.position||V().toastOptions?.position||V().position||O.position}))(e,t,{...s,duration:void 0,...o});return E({type:$.UPSERT_TOAST,toast:r}),r.id},q=(t,e)=>Y("blank")(t,e);q.error=Y("error"),q.success=Y("success"),q.loading=Y("loading"),q.custom=Y("custom"),q.dismiss=t=>{E({type:$.DISMISS_TOAST,toastId:t})},q.promise=(t,e,o)=>{const s=q.loading(e.loading,{...o});return t.then((t=>(q.success(S(e.success,t),{id:s,...o}),t))).catch((t=>{q.error(S(e.error,t),{id:s,...o})})),t},q.remove=t=>{E({type:$.REMOVE_TOAST,toastId:t})};const G=v("<div></div>",2),H=t=>(e((()=>{(t=>{L((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}=A;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((()=>{E({type:$.DISMISS_TOAST,toastId:t.id})}),e);t.visible&&E({type:$.DISMISS_TOAST,toastId:t.id})}));return s})();o((()=>{t&&t.forEach((t=>t&&clearTimeout(t)))}))})),(()=>{const e=G.cloneNode(!0);return l(e,d(s,{get each(){return A.toasts},children:t=>d(Z,{toast:t})})),p((o=>{const s={...k,...t.containerStyle},r=t.containerClassName;return o._v$=y(e,s,o._v$),r!==o._v$2&&u(e,o._v$2=r),o}),{_v$:void 0,_v$2:void 0}),e})()),J=v("<div></div>",2),K=v("<div><div></div></div>",4),Q=o=>{const[s,n]=t("");return e((()=>{var t;o.toast.visible?n(`${T((t=N(o.toast,o.position),`\n0% {transform: translate3d(0,${-200*t}%,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`):n(`${T((t=>`\n0% {transform: translate3d(0,0,-1px) scale(1); opacity:1;}\n100% {transform: translate3d(0,${-150*t}%,-1px) scale(.4); opacity:0;}\n`)(N(o.toast,o.position)))} 0.4s forwards cubic-bezier(.06,.71,.55,1)`)})),(()=>{const t=K.cloneNode(!0),e=t.firstChild;return l(t,d(r,{get children(){return[d(i,{get when(){return o.toast.icon},get children(){const t=J.cloneNode(!0);return l(t,(()=>o.toast.icon)),p((e=>y(t,M,e))),t}}),d(i,{get when(){return"loading"===o.toast.type},get children(){const t=J.cloneNode(!0);return l(t,d(it,m((()=>o.toast.iconTheme)))),p((e=>y(t,M,e))),t}}),d(i,{get when(){return"success"===o.toast.type},get children(){const t=J.cloneNode(!0);return l(t,d(et,m((()=>o.toast.iconTheme)))),p((e=>y(t,M,e))),t}}),d(i,{get when(){return"error"===o.toast.type},get children(){const t=J.cloneNode(!0);return l(t,d(st,m((()=>o.toast.iconTheme)))),p((e=>y(t,M,e))),t}})]}}),e),f(e,(()=>o.toast.ariaProps),!1,!0),l(e,(()=>S(o.toast.message,o.toast))),p((r=>{const i=o.toast.className,n={...F,animation:s(),...o.toast.style},a=U;return i!==r._v$&&u(t,r._v$=i),r._v$2=y(t,n,r._v$2),r._v$3=y(e,a,r._v$3),r}),{_v$:void 0,_v$2:void 0,_v$3:void 0}),t})()},W=v("<div></div>",2),X=h`z-index: 9999;> * { pointer-events: auto;}`,Z=o=>{const s=()=>{const t=o.toast.position||O.position,e=((t,e)=>{const{toasts:o}=A,s=V().gutter||D.gutter||8,r=o.filter((t=>(t.position||e)===e&&t.height)),i=r.findIndex((e=>e.id===t.id)),n=r.filter(((t,e)=>e<i&&t.visible)).length;return r.slice(0,n).reduce(((t,e)=>t+s+(e.height||0)),0)})(o.toast,t),s=((t,e)=>{const o=t.includes("top");return{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)`,...o?{top:0}:{bottom:0},...t.includes("center")?{"justify-content":"center"}:t.includes("right")?{"justify-content":"flex-end"}:{}}})(t,e);return s},[r,i]=t(s());let a;return e((()=>{const t=s();i(t)})),n((()=>{a&&((t,e)=>{const o=t.getBoundingClientRect();o.height!==e.height&&E({type:$.UPDATE_TOAST,toast:{id:e.id,height:o.height}})})(a,o.toast)})),(()=>{const t=W.cloneNode(!0);t.addEventListener("mouseleave",(()=>E({type:$.END_PAUSE,time:Date.now()}))),t.addEventListener("mouseenter",(()=>E({type:$.START_PAUSE,time:Date.now()})));return"function"==typeof a?a(t):a=t,l(t,(()=>{const t=_((()=>"custom"===o.toast.type),!0);return()=>t()?S(o.toast.message,o.toast):d(Q,{get toast(){return o.toast},get position(){return o.toast.position||O.position}})})()),p((e=>{const s=r(),i=o.toast.visible?X:"";return e._v$=y(t,s,e._v$),i!==e._v$2&&u(t,e._v$2=i),e}),{_v$:void 0,_v$2:void 0}),t})()},tt=v('<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),et=t=>{const e=`${C} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards`,o=`${R} 1s cubic-bezier(0, 0, 0.2, 1) forwards`,s=`${z} 0.2s ease-out forwards`;return(()=>{const r=tt.cloneNode(!0),i=r.firstChild,n=i.nextSibling,a=n.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"),n.style.setProperty("animation",o),n.style.setProperty("transform-origin","50% 50%"),n.style.setProperty("animation-delay","250ms"),a.style.setProperty("animation",s),a.style.setProperty("stroke-dasharray","22"),a.style.setProperty("stroke-dashoffset","22"),a.style.setProperty("animation-delay","250ms"),p((e=>{const o=t.primary||"#34C759",s=t.primary||"#34C759",r=t.secondary||"#FCFCFC";return o!==e._v$&&g(i,"fill",e._v$=o),s!==e._v$2&&g(n,"fill",e._v$2=s),r!==e._v$3&&g(a,"stroke",e._v$3=r),e}),{_v$:void 0,_v$2:void 0,_v$3:void 0}),r})()},ot=v('<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),st=t=>{const e=`${C} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards`,o=`${R} 1s cubic-bezier(0, 0, 0.2, 1) forwards`,s=`${z} 0.1s ease-in forwards`,r=`${B} 0.2s ease-out forwards`;return(()=>{const i=ot.cloneNode(!0),n=i.firstChild,a=n.nextSibling,c=a.nextSibling,l=c.nextSibling;return i.style.setProperty("overflow","visible"),n.style.setProperty("animation",e),n.style.setProperty("transform-origin","50% 50%"),n.style.setProperty("animation-delay","100ms"),n.style.setProperty("opacity","0"),a.style.setProperty("animation",o),a.style.setProperty("transform-origin","50% 50%"),a.style.setProperty("animation-delay","320ms"),c.style.setProperty("animation",s),c.style.setProperty("stroke-dasharray","9"),c.style.setProperty("stroke-dashoffset","9"),c.style.setProperty("animation-delay","200ms"),l.style.setProperty("animation",r),l.style.setProperty("animation-delay","320ms"),l.style.setProperty("opacity","0"),p((e=>{const o=t.primary||"#FF3B30",s=t.primary||"#FF3B30",r=t.secondary||"#FFFFFF",i=t.secondary||"#FFFFFF";return o!==e._v$&&g(n,"fill",e._v$=o),s!==e._v$2&&g(a,"fill",e._v$2=s),r!==e._v$3&&g(c,"stroke",e._v$3=r),i!==e._v$4&&g(l,"fill",e._v$4=i),e}),{_v$:void 0,_v$2:void 0,_v$3:void 0,_v$4:void 0}),i})()},rt=v('<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),it=t=>{const e=`${j} 0.75s linear infinite`;return(()=>{const o=rt.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%"),p((e=>{const o=t.primary||"#E5E7EB",i=t.secondary||"#4b5563";return o!==e._v$&&g(s,"stroke",e._v$=o),i!==e._v$2&&g(r,"stroke",e._v$2=i),e}),{_v$:void 0,_v$2:void 0}),o})()};var nt=q;export{$ as ActionType,H as Toaster,nt as default,S as resolveValue,q as toast};
import{createSignal as t,createEffect as e,onCleanup as o,For as s,Switch as r,Match as i,onMount as n}from"solid-js";import{createStore as a,produce as c}from"solid-js/store";import{insert as l,createComponent as d,effect as p,style as y,className as u,template as m,mergeProps as v,spread as f,memo as g,setAttribute as h}from"solid-js/web";import{keyframes as _,css as T}from"goober";const S=(t,e)=>(t=>"function"==typeof t)(t)?t(e):t;let $;!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"}($||($={}));const[b,A]=a({toasts:[],pausedAt:void 0}),x=new Map,P=(t,e)=>{if(x.has(t))return;const o=setTimeout((()=>{x.delete(t),w({type:$.REMOVE_TOAST,toastId:t})}),e);x.set(t,o)},w=t=>{switch(t.type){case $.ADD_TOAST:A("toasts",(e=>{const o=e;return[t.toast,...o]}));break;case $.DISMISS_TOAST:const{toastId:e}=t,o=b.toasts;if(e){const t=o.find((t=>t.id===e));t&&P(e,t.unmountDelay),A("toasts",(t=>t.id===e),c((t=>t.visible=!1)))}else o.forEach((t=>{P(t.id,t.unmountDelay)})),A("toasts",(t=>void 0!==t.id),c((t=>t.visible=!1)));break;case $.REMOVE_TOAST:if(!t.toastId){A("toasts",[]);break}A("toasts",(e=>e.filter((e=>e.id!==t.toastId))));break;case $.UPDATE_TOAST:t.toast.id&&(t=>{const e=x.get(t);x.delete(t),e&&clearTimeout(e)})(t.toast.id),A("toasts",(e=>e.id===t.toast.id),(e=>({...e,...t.toast})));break;case $.UPSERT_TOAST:b.toasts.find((e=>e.id===t.toast.id))?w({type:$.UPDATE_TOAST,toast:t.toast}):w({type:$.ADD_TOAST,toast:t.toast});break;case $.START_PAUSE:A("pausedAt",Date.now());break;case $.END_PAUSE:const s=t.time-(b.pausedAt||0);A(c((t=>{t.pausedAt=void 0,t.toasts.forEach((t=>{t.pauseDuration+=s}))})))}},E={blank:4e3,error:4e3,success:2e3,loading:1/0,custom:4e3},O={id:"",icon:"",unmountDelay:500,duration:3e3,ariaProps:{role:"status","aria-live":"polite"},className:"",style:{},position:"top-right",iconTheme:{}},D={position:"top-right",toastOptions:O,gutter:8,containerStyle:{},containerClassName:""},k={position:"fixed","z-index":9999,top:"16px",bottom:"16px",left:"16px",right:"16px","pointer-events":"none"},I=(()=>{let t=0;return()=>String(++t)})(),N=(t,e)=>(t.position||e).includes("top")?1:-1,F={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"},U={display:"flex","align-items":"center",flex:"1 1 auto",margin:"4px 10px","white-space":"pre-line"},M={"flex-shrink":0,"min-width":"20px","min-height":"20px",display:"flex","align-items":"center","justify-content":"center","text-align":"center"},C=_`from{transform:scale(0)rotate(45deg);opacity:0;}to{transform:scale(1)rotate(45deg);opacity:1;}`,R=_`75%,100%{transform: scale(2.25);opacity:0;}`,z=_`to{stroke-dashoffset: 0;}`,B=_`0%{transform:translate3d(0,0,0);opacity:1;}100%{transform:translate3d(0,7px,0)scale(1);opacity:1;}`,j=_`from{transform: rotate(0deg);}to{transform: rotate(360deg);}`,[V,L]=t(D),q=t=>(e,o={})=>{const s=b.toasts.find((t=>t.id===o.id)),r=((t,e="blank",o)=>({...O,...V().toastOptions,...o,type:e,message:t,pauseDuration:0,createdAt:Date.now(),visible:!0,id:o.id||I(),style:{...O.style,...V().toastOptions?.style,...o.style},duration:o.duration||V().toastOptions?.duration||E[e],position:o.position||V().toastOptions?.position||V().position||O.position}))(e,t,{...s,duration:void 0,...o});return w({type:$.UPSERT_TOAST,toast:r}),r.id},G=(t,e)=>q("blank")(t,e);G.error=q("error"),G.success=q("success"),G.loading=q("loading"),G.custom=q("custom"),G.dismiss=t=>{w({type:$.DISMISS_TOAST,toastId:t})},G.promise=(t,e,o)=>{const s=G.loading(e.loading,{...o});return t.then((t=>(G.success(S(e.success,t),{id:s,...o}),t))).catch((t=>{G.error(S(e.error,t),{id:s,...o})})),t},G.remove=t=>{w({type:$.REMOVE_TOAST,toastId:t})};const H=m("<div></div>",2),J=t=>(e((()=>{(t=>{L((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}=b;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((()=>{w({type:$.DISMISS_TOAST,toastId:t.id})}),e);t.visible&&w({type:$.DISMISS_TOAST,toastId:t.id})}));return s})();o((()=>{t&&t.forEach((t=>t&&clearTimeout(t)))}))})),(()=>{const e=H.cloneNode(!0);return l(e,d(s,{get each(){return b.toasts},children:t=>d(Z,{toast:t})})),p((o=>{const s={...k,...t.containerStyle},r=t.containerClassName;return o._v$=y(e,s,o._v$),r!==o._v$2&&u(e,o._v$2=r),o}),{_v$:void 0,_v$2:void 0}),e})()),K=m("<div></div>",2),Q=m("<div><div></div></div>",4),W=o=>{const[s,n]=t("");return e((()=>{var t;o.toast.visible?n(`${_((t=N(o.toast,o.position),`\n0% {transform: translate3d(0,${-200*t}%,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`):n(`${_((t=>`\n0% {transform: translate3d(0,0,-1px) scale(1); opacity:1;}\n100% {transform: translate3d(0,${-150*t}%,-1px) scale(.4); opacity:0;}\n`)(N(o.toast,o.position)))} 0.4s forwards cubic-bezier(.06,.71,.55,1)`)})),(()=>{const t=Q.cloneNode(!0),e=t.firstChild;return l(t,d(r,{get children(){return[d(i,{get when(){return o.toast.icon},get children(){const t=K.cloneNode(!0);return l(t,(()=>o.toast.icon)),p((e=>y(t,M,e))),t}}),d(i,{get when(){return"loading"===o.toast.type},get children(){const t=K.cloneNode(!0);return l(t,d(it,v((()=>o.toast.iconTheme)))),p((e=>y(t,M,e))),t}}),d(i,{get when(){return"success"===o.toast.type},get children(){const t=K.cloneNode(!0);return l(t,d(et,v((()=>o.toast.iconTheme)))),p((e=>y(t,M,e))),t}}),d(i,{get when(){return"error"===o.toast.type},get children(){const t=K.cloneNode(!0);return l(t,d(st,v((()=>o.toast.iconTheme)))),p((e=>y(t,M,e))),t}})]}}),e),f(e,(()=>o.toast.ariaProps),!1,!0),l(e,(()=>S(o.toast.message,o.toast))),p((r=>{const i=o.toast.className,n={...F,animation:s(),...o.toast.style},a=U;return i!==r._v$&&u(t,r._v$=i),r._v$2=y(t,n,r._v$2),r._v$3=y(e,a,r._v$3),r}),{_v$:void 0,_v$2:void 0,_v$3:void 0}),t})()},X=m("<div></div>",2),Y=T`z-index: 9999;> * {pointer-events: auto;}`,Z=o=>{const s=()=>{const t=o.toast.position||O.position,e=((t,e)=>{const{toasts:o}=b,s=V().gutter||D.gutter||8,r=o.filter((t=>(t.position||e)===e&&t.height)),i=r.findIndex((e=>e.id===t.id)),n=r.filter(((t,e)=>e<i&&t.visible)).length;return r.slice(0,n).reduce(((t,e)=>t+s+(e.height||0)),0)})(o.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},[r,i]=t(s());let a;return e((()=>{const t=s();i(t)})),n((()=>{a&&((t,e)=>{const o=t.getBoundingClientRect();o.height!==e.height&&w({type:$.UPDATE_TOAST,toast:{id:e.id,height:o.height}})})(a,o.toast)})),(()=>{const t=X.cloneNode(!0);t.addEventListener("mouseleave",(()=>w({type:$.END_PAUSE,time:Date.now()}))),t.addEventListener("mouseenter",(()=>w({type:$.START_PAUSE,time:Date.now()})));return"function"==typeof a?a(t):a=t,l(t,(()=>{const t=g((()=>"custom"===o.toast.type),!0);return()=>t()?S(o.toast.message,o.toast):d(W,{get toast(){return o.toast},get position(){return o.toast.position||O.position}})})()),p((e=>{const s=r(),i=o.toast.visible?Y:"";return e._v$=y(t,s,e._v$),i!==e._v$2&&u(t,e._v$2=i),e}),{_v$:void 0,_v$2:void 0}),t})()},tt=m('<svg viewBox="0 0 32 32" width="1.25rem" height="1.25rem"><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),et=t=>{const e=`${C} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards`,o=`${R} 1s cubic-bezier(0, 0, 0.2, 1) forwards`,s=`${z} 0.2s ease-out forwards`;return(()=>{const r=tt.cloneNode(!0),i=r.firstChild,n=i.nextSibling,a=n.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"),n.style.setProperty("animation",o),n.style.setProperty("transform-origin","50% 50%"),n.style.setProperty("animation-delay","250ms"),a.style.setProperty("animation",s),a.style.setProperty("stroke-dasharray","22"),a.style.setProperty("stroke-dashoffset","22"),a.style.setProperty("animation-delay","250ms"),p((e=>{const o=t.primary||"#34C759",s=t.primary||"#34C759",r=t.secondary||"#FCFCFC";return o!==e._v$&&h(i,"fill",e._v$=o),s!==e._v$2&&h(n,"fill",e._v$2=s),r!==e._v$3&&h(a,"stroke",e._v$3=r),e}),{_v$:void 0,_v$2:void 0,_v$3:void 0}),r})()},ot=m('<svg viewBox="0 0 32 32" width="1.25rem" height="1.25rem"><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),st=t=>{const e=`${C} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards`,o=`${R} 1s cubic-bezier(0, 0, 0.2, 1) forwards`,s=`${z} 0.1s ease-in forwards`,r=`${B} 0.2s ease-out forwards`;return(()=>{const i=ot.cloneNode(!0),n=i.firstChild,a=n.nextSibling,c=a.nextSibling,l=c.nextSibling;return i.style.setProperty("overflow","visible"),n.style.setProperty("animation",e),n.style.setProperty("transform-origin","50% 50%"),n.style.setProperty("animation-delay","100ms"),n.style.setProperty("opacity","0"),a.style.setProperty("animation",o),a.style.setProperty("transform-origin","50% 50%"),a.style.setProperty("animation-delay","320ms"),c.style.setProperty("animation",s),c.style.setProperty("stroke-dasharray","9"),c.style.setProperty("stroke-dashoffset","9"),c.style.setProperty("animation-delay","200ms"),l.style.setProperty("animation",r),l.style.setProperty("animation-delay","320ms"),l.style.setProperty("opacity","0"),p((e=>{const o=t.primary||"#FF3B30",s=t.primary||"#FF3B30",r=t.secondary||"#FFFFFF",i=t.secondary||"#FFFFFF";return o!==e._v$&&h(n,"fill",e._v$=o),s!==e._v$2&&h(a,"fill",e._v$2=s),r!==e._v$3&&h(c,"stroke",e._v$3=r),i!==e._v$4&&h(l,"fill",e._v$4=i),e}),{_v$:void 0,_v$2:void 0,_v$3:void 0,_v$4:void 0}),i})()},rt=m('<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"></path></svg>',6),it=t=>{const e=`${j} 0.75s linear infinite`;return(()=>{const o=rt.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%"),p((e=>{const o=t.primary||"#E5E7EB",i=t.secondary||"#4b5563";return o!==e._v$&&h(s,"stroke",e._v$=o),i!==e._v$2&&h(r,"stroke",e._v$2=i),e}),{_v$:void 0,_v$2:void 0}),o})()};var nt=G;export{$ as ActionType,J as Toaster,nt as default,S as resolveValue,G as toast};
//# sourceMappingURL=index.js.map

30

dist/source/components/ErrorIcon.jsx

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

import { iconCircle, pingCircle, icon, infoDot } from "../util";
import { iconCircle, pingCircle, icon, infoDot } from '../util';
export const Error = (props) => {

@@ -7,8 +7,26 @@ const mainCircle = `${iconCircle} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards`;

const infoCircle = `${infoDot} 0.2s ease-out forwards`;
return (<svg style={{ overflow: 'visible' }} viewBox="0 0 32 32">
<circle style={{ animation: mainCircle, 'transform-origin': '50% 50%', 'animation-delay': '100ms', opacity: 0 }} fill={props.primary || "#FF3B30"} cx="16" cy="16" r="16"/>
<circle style={{ animation: secondaryCircle, 'transform-origin': '50% 50%', 'animation-delay': '320ms' }} fill={props.primary || "#FF3B30"} cx="16" cy="16" r="12"/>
<path style={{ animation: infoDash, 'stroke-dasharray': 9, 'stroke-dashoffset': 9, 'animation-delay': '200ms' }} fill="none" stroke={props.secondary || "#FFFFFF"} stroke-width="4" stroke-linecap="round" d="M16,7l0,9"/>
<circle style={{ animation: infoCircle, 'animation-delay': '320ms', opacity: 0 }} fill={props.secondary || "#FFFFFF"} cx="16" cy="16" r="2.5"/>
return (<svg style={{ overflow: 'visible' }} viewBox="0 0 32 32" width="1.25rem" height="1.25rem">
<circle style={{
animation: mainCircle,
'transform-origin': '50% 50%',
'animation-delay': '100ms',
opacity: 0,
}} fill={props.primary || '#FF3B30'} cx="16" cy="16" r="16"/>
<circle style={{
animation: secondaryCircle,
'transform-origin': '50% 50%',
'animation-delay': '320ms',
}} fill={props.primary || '#FF3B30'} cx="16" cy="16" r="12"/>
<path style={{
animation: infoDash,
'stroke-dasharray': 9,
'stroke-dashoffset': 9,
'animation-delay': '200ms',
}} fill="none" stroke={props.secondary || '#FFFFFF'} stroke-width="4" stroke-linecap="round" d="M16,7l0,9"/>
<circle style={{
animation: infoCircle,
'animation-delay': '320ms',
opacity: 0,
}} fill={props.secondary || '#FFFFFF'} cx="16" cy="16" r="2.5"/>
</svg>);
};

8

dist/source/components/LoaderIcon.jsx

@@ -1,8 +0,8 @@

import { rotate } from "../util";
import { rotate } from '../util';
export const Loader = (props) => {
const animation = `${rotate} 0.75s linear infinite`;
return (<svg style={{ overflow: 'visible' }} viewBox="0 0 32 32">
<path fill="none" stroke={props.primary || "#E5E7EB"} 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 style={{ animation, 'transform-origin': '50% 50%' }} fill="none" stroke={props.secondary || "#4b5563"} 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"/>
return (<svg style={{ overflow: 'visible' }} viewBox="0 0 32 32" width="1.25rem" height="1.25rem">
<path fill="none" stroke={props.primary || '#E5E7EB'} 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 style={{ animation, 'transform-origin': '50% 50%' }} fill="none" stroke={props.secondary || '#4b5563'} 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"/>
</svg>);
};

24

dist/source/components/SuccessIcon.jsx

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

import { iconCircle, pingCircle, icon } from "../util";
import { iconCircle, pingCircle, icon } from '../util';
export const Success = (props) => {

@@ -6,7 +6,21 @@ const mainCircle = `${iconCircle} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards`;

const check = `${icon} 0.2s ease-out forwards`;
return (<svg style={{ overflow: 'visible' }} viewBox="0 0 32 32">
<circle style={{ animation: mainCircle, 'transform-origin': '50% 50%', 'animation-delay': '100ms', opacity: 0 }} fill={props.primary || '#34C759'} cx="16" cy="16" r="16"/>
<circle style={{ animation: secondaryCircle, 'transform-origin': '50% 50%', 'animation-delay': '250ms' }} fill={props.primary || '#34C759'} cx="16" cy="16" r="12"/>
<path style={{ animation: check, 'stroke-dasharray': 22, 'stroke-dashoffset': 22, 'animation-delay': '250ms' }} fill="none" stroke={props.secondary || '#FCFCFC'} 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"/>
return (<svg style={{ overflow: 'visible' }} viewBox="0 0 32 32" width="1.25rem" height="1.25rem">
<circle style={{
animation: mainCircle,
'transform-origin': '50% 50%',
'animation-delay': '100ms',
opacity: 0,
}} fill={props.primary || '#34C759'} cx="16" cy="16" r="16"/>
<circle style={{
animation: secondaryCircle,
'transform-origin': '50% 50%',
'animation-delay': '250ms',
}} fill={props.primary || '#34C759'} cx="16" cy="16" r="12"/>
<path style={{
animation: check,
'stroke-dasharray': 22,
'stroke-dashoffset': 22,
'animation-delay': '250ms',
}} fill="none" stroke={props.secondary || '#FCFCFC'} 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"/>
</svg>);
};

27

dist/source/components/ToastBar.jsx
import { keyframes } from 'goober';
import { createEffect, createSignal, Match, Switch } from 'solid-js';
import { resolveValue } from '../types';
import { toastBarBase, messageContainer, entranceAnimation, exitAnimation, iconContainer, getToastYDirection as d } from '../util';
import { toastBarBase, messageContainer, entranceAnimation, exitAnimation, iconContainer, getToastYDirection as d, } from '../util';
import { Success, Error, Loader } from './';

@@ -9,5 +9,5 @@ export const ToastBar = (props) => {

createEffect(() => {
props.toast.visible ?
setAnimation(`${keyframes(entranceAnimation(d(props.toast, props.position)))} 0.35s cubic-bezier(.21,1.02,.73,1) forwards`) :
setAnimation(`${keyframes(exitAnimation(d(props.toast, props.position)))} 0.4s forwards cubic-bezier(.06,.71,.55,1)`);
props.toast.visible
? setAnimation(`${keyframes(entranceAnimation(d(props.toast, props.position)))} 0.35s cubic-bezier(.21,1.02,.73,1) forwards`)
: setAnimation(`${keyframes(exitAnimation(d(props.toast, props.position)))} 0.4s forwards cubic-bezier(.06,.71,.55,1)`);
});

@@ -17,5 +17,4 @@ return (<div class={props.toast.className} style={{

animation: animation(),
...props.toast.style
...props.toast.style,
}}>
<Switch>

@@ -26,14 +25,22 @@ <Match when={props.toast.icon}>

<Match when={props.toast.type === 'loading'}>
<div style={iconContainer}><Loader {...props.toast.iconTheme}/></div>
<div style={iconContainer}>
<Loader {...props.toast.iconTheme}/>
</div>
</Match>
<Match when={props.toast.type === 'success'}>
<div style={iconContainer}><Success {...props.toast.iconTheme}/></div>
<div style={iconContainer}>
<Success {...props.toast.iconTheme}/>
</div>
</Match>
<Match when={props.toast.type === 'error'}>
<div style={iconContainer}><Error {...props.toast.iconTheme}/></div>
<div style={iconContainer}>
<Error {...props.toast.iconTheme}/>
</div>
</Match>
</Switch>
<div style={messageContainer} {...props.toast.ariaProps}>{resolveValue(props.toast.message, props.toast)}</div>
<div style={messageContainer} {...props.toast.ariaProps}>
{resolveValue(props.toast.message, props.toast)}
</div>
</div>);
};

21

dist/source/components/ToastContainer.jsx

@@ -1,8 +0,9 @@

import { getToastWrapperStyles, updateToastHeight, getWrapperYAxisOffset } from "../util";
import { createEffect, createSignal, onMount } from "solid-js";
import { getToastWrapperStyles, updateToastHeight, getWrapperYAxisOffset } from '../util';
import { createEffect, createSignal, onMount } from 'solid-js';
import { defaultToastOptions, dispatch } from '../core';
import { ActionType, resolveValue } from "../types";
import { ToastBar } from "./ToastBar";
import { ActionType, resolveValue } from '../types';
import { ToastBar } from './ToastBar';
import { css } from 'goober';
const activeClass = css `z-index: 9999;> * { pointer-events: auto;}`;
{ /* prettier-ignore */ }
const activeClass = css `z-index: 9999;> * {pointer-events: auto;}`;
export const ToastContainer = (props) => {

@@ -28,11 +29,9 @@ const calculatePosition = () => {

type: ActionType.START_PAUSE,
time: Date.now()
time: Date.now(),
})} onMouseLeave={() => dispatch({
type: ActionType.END_PAUSE,
time: Date.now()
time: Date.now(),
})}>
{props.toast.type === 'custom' ?
resolveValue(props.toast.message, props.toast) :
<ToastBar toast={props.toast} position={props.toast.position || defaultToastOptions.position}/>}
</div>);
{props.toast.type === 'custom' ? (resolveValue(props.toast.message, props.toast)) : (<ToastBar toast={props.toast} position={props.toast.position || defaultToastOptions.position}/>)}
</div>);
};

16

dist/source/components/Toaster.jsx

@@ -1,6 +0,6 @@

import { defaultContainerStyle } from "../core";
import { mergeContainerOptions } from "../util";
import { createEffect, For, onCleanup } from "solid-js";
import { defaultContainerStyle } from '../core';
import { mergeContainerOptions } from '../util';
import { createEffect, For, onCleanup } from 'solid-js';
import { store, createTimers } from '../core';
import { ToastContainer } from "./";
import { ToastContainer } from './';
export const Toaster = (props) => {

@@ -15,3 +15,3 @@ createEffect(() => {

return;
timers.forEach(timer => timer && clearTimeout(timer));
timers.forEach((timer) => timer && clearTimeout(timer));
});

@@ -21,8 +21,6 @@ });

...defaultContainerStyle,
...props.containerStyle
...props.containerStyle,
}} class={props.containerClassName}>
<For each={store.toasts}>
{(toast) => <ToastContainer toast={toast}/>}
</For>
<For each={store.toasts}>{(toast) => <ToastContainer toast={toast}/>}</For>
</div>);
};

6

dist/source/core/defaults.js

@@ -20,3 +20,3 @@ export const defaultTimeouts = {

position: 'top-right',
iconTheme: {}
iconTheme: {},
};

@@ -28,3 +28,3 @@ export const defaultToasterOptions = {

containerStyle: {},
containerClassName: ''
containerClassName: '',
};

@@ -39,3 +39,3 @@ const defaultContainerPadding = '16px';

right: defaultContainerPadding,
"pointer-events": 'none'
'pointer-events': 'none',
};

34

dist/source/core/store.js

@@ -12,3 +12,3 @@ import { ActionType } from '../types';

const now = Date.now();
const timers = toasts.map(toast => {
const timers = toasts.map((toast) => {
if (toast.duration === Infinity)

@@ -21,3 +21,3 @@ return;

type: ActionType.DISMISS_TOAST,
toastId: toast.id
toastId: toast.id,
});

@@ -30,3 +30,3 @@ }

type: ActionType.DISMISS_TOAST,
toastId: toast.id
toastId: toast.id,
});

@@ -45,3 +45,3 @@ }, durationLeft);

type: ActionType.REMOVE_TOAST,
toastId
toastId,
});

@@ -60,3 +60,3 @@ }, unmountDelay);

case ActionType.ADD_TOAST:
setStore('toasts', t => {
setStore('toasts', (t) => {
const toasts = t;

@@ -70,12 +70,12 @@ return [action.toast, ...toasts];

if (toastId) {
const toastToRemove = toasts.find(t => t.id === toastId);
const toastToRemove = toasts.find((t) => t.id === toastId);
if (toastToRemove)
scheduleRemoval(toastId, toastToRemove.unmountDelay);
setStore('toasts', t => t.id === toastId, p(t => t.visible = false));
setStore('toasts', (t) => t.id === toastId, p((t) => (t.visible = false)));
}
else {
toasts.forEach(t => {
toasts.forEach((t) => {
scheduleRemoval(t.id, t.unmountDelay);
});
setStore('toasts', t => t.id !== undefined, p(t => t.visible = false));
setStore('toasts', (t) => t.id !== undefined, p((t) => (t.visible = false)));
}

@@ -88,5 +88,5 @@ break;

}
setStore('toasts', t => {
setStore('toasts', (t) => {
const toasts = t;
return toasts.filter(t => t.id !== action.toastId);
return toasts.filter((t) => t.id !== action.toastId);
});

@@ -98,3 +98,3 @@ break;

}
setStore('toasts', t => t.id === action.toast.id, t => {
setStore('toasts', (t) => t.id === action.toast.id, (t) => {
const toast = t;

@@ -108,5 +108,5 @@ return {

case ActionType.UPSERT_TOAST:
store.toasts.find(t => t.id === action.toast.id) ?
dispatch({ type: ActionType.UPDATE_TOAST, toast: action.toast }) :
dispatch({ type: ActionType.ADD_TOAST, toast: action.toast });
store.toasts.find((t) => t.id === action.toast.id)
? dispatch({ type: ActionType.UPDATE_TOAST, toast: action.toast })
: dispatch({ type: ActionType.ADD_TOAST, toast: action.toast });
break;

@@ -118,5 +118,5 @@ case ActionType.START_PAUSE:

const pauseInterval = action.time - (store.pausedAt || 0);
setStore(p(s => {
setStore(p((s) => {
s.pausedAt = undefined;
s.toasts.forEach(t => {
s.toasts.forEach((t) => {
t.pauseDuration += pauseInterval;

@@ -123,0 +123,0 @@ });

10

dist/source/core/toast.js

@@ -21,9 +21,9 @@ import { createSignal } from 'solid-js';

...defaultOpts().toastOptions?.style,
...options.style
...options.style,
},
duration: options.duration || defaultOpts().toastOptions?.duration || defaultTimeouts[type],
position: options.position || defaultOpts().toastOptions?.position || defaultOpts().position || defaultToastOptions.position
position: options.position || defaultOpts().toastOptions?.position || defaultOpts().position || defaultToastOptions.position,
});
const createToastCreator = (type) => (message, options = {}) => {
const existingToast = store.toasts.find(t => t.id === options.id);
const existingToast = store.toasts.find((t) => t.id === options.id);
const toast = createToast(message, type, { ...existingToast, duration: undefined, ...options });

@@ -41,3 +41,3 @@ dispatch({ type: ActionType.UPSERT_TOAST, toast });

type: ActionType.DISMISS_TOAST,
toastId
toastId,
});

@@ -66,5 +66,5 @@ };

type: ActionType.REMOVE_TOAST,
toastId
toastId,
});
};
export { toast };

2

dist/source/types/toast.js
const isFunction = (valOrFunction) => typeof valOrFunction === 'function';
export const resolveValue = (valOrFunction, arg) => (isFunction(valOrFunction) ? valOrFunction(arg) : valOrFunction);
export const resolveValue = (valOrFunction, arg) => isFunction(valOrFunction) ? valOrFunction(arg) : valOrFunction;

4

dist/source/util/styles.js

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

import { keyframes } from "goober";
import { keyframes } from 'goober';
export const toastBarBase = {

@@ -13,3 +13,3 @@ display: 'flex',

'line-height': '1.3',
'will-change': 'transform'
'will-change': 'transform',
};

@@ -16,0 +16,0 @@ export const entranceAnimation = (direction) => `

19

dist/source/util/util.js

@@ -1,3 +0,3 @@

import { setDefaultOpts, defaultOpts, store, dispatch, defaultToasterOptions } from "../core";
import { ActionType } from "../types";
import { setDefaultOpts, defaultOpts, store, dispatch, defaultToasterOptions } from '../core';
import { ActionType } from '../types';
export const generateID = (() => {

@@ -8,3 +8,3 @@ let count = 0;

export const mergeContainerOptions = (props) => {
setDefaultOpts(s => ({
setDefaultOpts((s) => ({
containerClassName: props.containerClassName ?? s.containerClassName,

@@ -16,3 +16,3 @@ containerStyle: props.containerStyle ?? s.containerStyle,

...props.toastOptions,
}
},
}));

@@ -22,3 +22,5 @@ };

const top = position.includes('top');
const verticalStyle = top ? { top: 0 } : { bottom: 0 };
const verticalStyle = top
? { top: 0, 'margin-top': `${offset}px` }
: { bottom: 0, 'margin-bottom': `${offset}px` };
const horizontalStyle = position.includes('center')

@@ -35,3 +37,2 @@ ? { 'justify-content': 'center' }

transition: `all 230ms cubic-bezier(.21,1.02,.73,1)`,
transform: `translateY(${offset * (top ? 1 : -1)}px)`,
...verticalStyle,

@@ -53,8 +54,6 @@ ...horizontalStyle,

const gutter = defaultOpts().gutter || defaultToasterOptions.gutter || 8;
const relevantToasts = toasts.filter(t => ((t.position || position) === position && t.height));
const relevantToasts = toasts.filter((t) => (t.position || position) === position && t.height);
const toastIndex = relevantToasts.findIndex((t) => t.id === toast.id);
const toastsBefore = relevantToasts.filter((toast, i) => i < toastIndex && toast.visible).length;
const offset = relevantToasts
.slice(0, toastsBefore)
.reduce((acc, t) => acc + gutter + (t.height || 0), 0);
const offset = relevantToasts.slice(0, toastsBefore).reduce((acc, t) => acc + gutter + (t.height || 0), 0);
return offset;

@@ -61,0 +60,0 @@ };

2

dist/types/components/ErrorIcon.d.ts

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

import { IconProps } from "../types";
import { IconProps } from '../types';
export declare const Error: (props: IconProps) => import("solid-js").JSX.Element;

2

dist/types/components/LoaderIcon.d.ts

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

import { IconProps } from "../types";
import { IconProps } from '../types';
export declare const Loader: (props: IconProps) => import("solid-js").JSX.Element;

2

dist/types/components/SuccessIcon.d.ts

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

import { IconProps } from "../types";
import { IconProps } from '../types';
export declare const Success: (props: IconProps) => import("solid-js").JSX.Element;

2

dist/types/components/ToastContainer.d.ts

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

import { ToastContainerProps } from "../";
import { ToastContainerProps } from '../';
export declare const ToastContainer: (props: ToastContainerProps) => import("solid-js").JSX.Element;

2

dist/types/components/Toaster.d.ts

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

import { ToasterProps } from "..";
import { ToasterProps } from '..';
export declare const Toaster: (props: ToasterProps) => import("solid-js").JSX.Element;

4

dist/types/core/defaults.d.ts

@@ -1,3 +0,3 @@

import { ToasterProps, ToastOptions, ToastTimeouts } from "../types";
import { JSX } from "solid-js";
import { ToasterProps, ToastOptions, ToastTimeouts } from '../types';
import { JSX } from 'solid-js';
export declare const defaultTimeouts: ToastTimeouts;

@@ -4,0 +4,0 @@ export declare const defaultToastOptions: Required<ToastOptions>;

4

dist/types/util/util.d.ts

@@ -1,3 +0,3 @@

import { Toast, ToasterProps, ToastPosition } from "../types";
import { JSX } from "solid-js";
import { Toast, ToasterProps, ToastPosition } from '../types';
import { JSX } from 'solid-js';
export declare const generateID: () => string;

@@ -4,0 +4,0 @@ export declare const mergeContainerOptions: (props: ToasterProps) => void;

9

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

@@ -38,6 +38,6 @@ "source": "./src/index.tsx",

"scripts": {
"dev": "vite",
"dev": "vite --config ./dev/vite.config.ts",
"build": "rollup -c",
"preview": "vite preview",
"minify": "terser --compress --mangle --module -- dist/cjs/index.js > dist/cjs/index.min.js"
"minify": "terser --compress --mangle --module -- dist/cjs/index.js > dist/cjs/index.min.js",
"format": "prettier --write src dev"
},

@@ -53,2 +53,3 @@ "homepage": "https://github.com/ardeora/solid-toast#readme",

"@types/node": "^17.0.35",
"prettier": "^2.7.1",
"rollup": "^2.75.7",

@@ -55,0 +56,0 @@ "rollup-plugin-terser": "^7.0.2",

10

src/components/index.ts

@@ -1,5 +0,5 @@

export * from './Toaster'
export * from './ToastContainer'
export * from './SuccessIcon'
export * from './ErrorIcon'
export * from './LoaderIcon'
export * from './Toaster';
export * from './ToastContainer';
export * from './SuccessIcon';
export * from './ErrorIcon';
export * from './LoaderIcon';

18

src/core/defaults.ts

@@ -1,3 +0,3 @@

import { ToasterProps, ToastOptions, ToastTimeouts } from "../types";
import { JSX } from "solid-js";
import { ToasterProps, ToastOptions, ToastTimeouts } from '../types';
import { JSX } from 'solid-js';

@@ -24,4 +24,4 @@ export const defaultTimeouts: ToastTimeouts = {

position: 'top-right',
iconTheme: {}
}
iconTheme: {},
};

@@ -33,6 +33,6 @@ export const defaultToasterOptions: ToasterProps = {

containerStyle: {},
containerClassName: ''
}
containerClassName: '',
};
const defaultContainerPadding = '16px'
const defaultContainerPadding = '16px';

@@ -46,3 +46,3 @@ export const defaultContainerStyle: JSX.CSSProperties = {

right: defaultContainerPadding,
"pointer-events": 'none'
}
'pointer-events': 'none',
};

6

src/core/index.ts

@@ -1,3 +0,3 @@

export * from './store'
export * from './toast'
export * from './defaults'
export * from './store';
export * from './toast';
export * from './defaults';

137

src/core/store.ts

@@ -7,19 +7,19 @@ import { State, Action, ActionType, Toast } from '../types';

pausedAt: undefined,
})
});
export const createTimers = () => {
const { pausedAt, toasts } = store
if(pausedAt) return;
const now = Date.now()
const timers = toasts.map(toast => {
if(toast.duration === Infinity) return;
const { pausedAt, toasts } = store;
if (pausedAt) return;
const now = Date.now();
const timers = toasts.map((toast) => {
if (toast.duration === Infinity) return;
const durationLeft = (toast.duration || 0) + toast.pauseDuration - (now - toast.createdAt)
const durationLeft = (toast.duration || 0) + toast.pauseDuration - (now - toast.createdAt);
if (durationLeft <= 0) {
if(toast.visible) {
if (toast.visible) {
dispatch({
type: ActionType.DISMISS_TOAST,
toastId: toast.id
})
toastId: toast.id,
});
}

@@ -32,9 +32,9 @@ return;

type: ActionType.DISMISS_TOAST,
toastId: toast.id
})
}, durationLeft)
})
toastId: toast.id,
});
}, durationLeft);
});
return timers
}
return timers;
};

@@ -44,3 +44,3 @@ const removalQueue = new Map<Toast['id'], ReturnType<typeof setTimeout>>();

const scheduleRemoval = (toastId: string, unmountDelay: number) => {
if(removalQueue.has(toastId)) return;
if (removalQueue.has(toastId)) return;

@@ -51,83 +51,96 @@ const timeout = setTimeout(() => {

type: ActionType.REMOVE_TOAST,
toastId
})
}, unmountDelay)
toastId,
});
}, unmountDelay);
removalQueue.set(toastId, timeout)
}
removalQueue.set(toastId, timeout);
};
const unscheduleRemoval = (toastId: string) => {
const timeout = removalQueue.get(toastId)
const timeout = removalQueue.get(toastId);
removalQueue.delete(toastId);
if (timeout) clearTimeout(timeout)
}
if (timeout) clearTimeout(timeout);
};
export const dispatch = (action: Action) => {
switch(action.type) {
switch (action.type) {
case ActionType.ADD_TOAST:
setStore('toasts', t => {
setStore('toasts', (t) => {
const toasts = t as Toast[];
return [action.toast, ...toasts]
})
return [action.toast, ...toasts];
});
break;
case ActionType.DISMISS_TOAST:
const { toastId } = action
const toasts = store.toasts
const { toastId } = action;
const toasts = store.toasts;
if (toastId) {
const toastToRemove = toasts.find(t => t.id === toastId)
if (toastToRemove) scheduleRemoval(toastId, toastToRemove.unmountDelay)
setStore('toasts', t => t.id === toastId, p(t => t.visible = false))
const toastToRemove = toasts.find((t) => t.id === toastId);
if (toastToRemove) scheduleRemoval(toastId, toastToRemove.unmountDelay);
setStore(
'toasts',
(t) => t.id === toastId,
p((t) => (t.visible = false))
);
} else {
toasts.forEach(t => {
scheduleRemoval(t.id, t.unmountDelay)
})
setStore('toasts', t => t.id !== undefined, p(t => t.visible = false))
toasts.forEach((t) => {
scheduleRemoval(t.id, t.unmountDelay);
});
setStore(
'toasts',
(t) => t.id !== undefined,
p((t) => (t.visible = false))
);
}
break;
case ActionType.REMOVE_TOAST:
if (!action.toastId) {
setStore('toasts', [])
setStore('toasts', []);
break;
}
setStore('toasts', t => {
setStore('toasts', (t) => {
const toasts = t as Toast[];
return toasts.filter(t => t.id !== action.toastId)
})
return toasts.filter((t) => t.id !== action.toastId);
});
break;
case ActionType.UPDATE_TOAST:
if (action.toast.id) {
unscheduleRemoval(action.toast.id)
unscheduleRemoval(action.toast.id);
}
setStore('toasts', t => t.id === action.toast.id, t => {
const toast = t as Toast;
return {
...toast,
...action.toast,
setStore(
'toasts',
(t) => t.id === action.toast.id,
(t) => {
const toast = t as Toast;
return {
...toast,
...action.toast,
};
}
})
);
break;
case ActionType.UPSERT_TOAST:
store.toasts.find(t => t.id === action.toast.id) ?
dispatch({ type: ActionType.UPDATE_TOAST, toast: action.toast}) :
dispatch({ type: ActionType.ADD_TOAST, toast: action.toast})
store.toasts.find((t) => t.id === action.toast.id)
? dispatch({ type: ActionType.UPDATE_TOAST, toast: action.toast })
: dispatch({ type: ActionType.ADD_TOAST, toast: action.toast });
break;
case ActionType.START_PAUSE:
setStore('pausedAt', Date.now())
setStore('pausedAt', Date.now());
break;
case ActionType.END_PAUSE:
const pauseInterval = action.time - (store.pausedAt || 0)
setStore(p(s => {
s.pausedAt = undefined;
s.toasts.forEach(t => {
t.pauseDuration += pauseInterval;
const pauseInterval = action.time - (store.pausedAt || 0);
setStore(
p((s) => {
s.pausedAt = undefined;
s.toasts.forEach((t) => {
t.pauseDuration += pauseInterval;
});
})
}))
);
break;
}
}
};
export { store };
export { store };

55

src/core/toast.ts

@@ -11,7 +11,3 @@ import { createSignal } from 'solid-js';

export const createToast = (
message: Message,
type: ToastType = 'blank',
options: ToastOptions
): Toast => ({
export const createToast = (message: Message, type: ToastType = 'blank', options: ToastOptions): Toast => ({
...defaultToastOptions,

@@ -29,25 +25,24 @@ ...defaultOpts().toastOptions,

...defaultOpts().toastOptions?.style,
...options.style
...options.style,
},
duration: options.duration || defaultOpts().toastOptions?.duration || defaultTimeouts[type],
position: options.position || defaultOpts().toastOptions?.position || defaultOpts().position || defaultToastOptions.position
})
position:
options.position || defaultOpts().toastOptions?.position || defaultOpts().position || defaultToastOptions.position,
});
const createToastCreator = (type?: ToastType): ToastHandler => (
message: Message,
options: ToastOptions = {}
) => {
const existingToast = store.toasts.find(t => t.id === options.id) as Toast;
const toast = createToast(message, type, {...existingToast, duration: undefined, ...options})
dispatch({ type: ActionType.UPSERT_TOAST, toast})
return toast.id;
};
const createToastCreator =
(type?: ToastType): ToastHandler =>
(message: Message, options: ToastOptions = {}) => {
const existingToast = store.toasts.find((t) => t.id === options.id) as Toast;
const toast = createToast(message, type, { ...existingToast, duration: undefined, ...options });
dispatch({ type: ActionType.UPSERT_TOAST, toast });
return toast.id;
};
const toast = (message: Message, opts?: ToastOptions) =>
createToastCreator('blank')(message, opts);
const toast = (message: Message, opts?: ToastOptions) => createToastCreator('blank')(message, opts);
toast.error = createToastCreator('error')
toast.success = createToastCreator('success')
toast.loading = createToastCreator('loading')
toast.custom = createToastCreator('custom')
toast.error = createToastCreator('error');
toast.success = createToastCreator('success');
toast.loading = createToastCreator('loading');
toast.custom = createToastCreator('custom');

@@ -57,5 +52,5 @@ toast.dismiss = (toastId?: string) => {

type: ActionType.DISMISS_TOAST,
toastId
})
}
toastId,
});
};

@@ -94,6 +89,6 @@ toast.promise = <T>(

type: ActionType.REMOVE_TOAST,
toastId
})
}
toastId,
});
};
export { toast }
export { toast };

2

src/types/index.ts
export * from './toast';
export * from './store';
export * from './store';

2

src/types/store.ts

@@ -46,2 +46,2 @@ import { Toast } from './';

pausedAt: number | undefined;
}
}

41

src/types/toast.ts
import { JSX } from 'solid-js';
export type ToastType = 'success' | 'error' | 'loading' | 'blank' | 'custom';
export type ToastPosition =
| 'top-left'
| 'top-center'
| 'top-right'
| 'bottom-left'
| 'bottom-center'
| 'bottom-right';
export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';

@@ -15,15 +9,10 @@ export type Renderable = JSX.Element | string | null;

export type ValueFunction<TValue, TArg> = (arg: TArg) => TValue;
export type ValueOrFunction<TValue, TArg> =
| TValue
| ValueFunction<TValue, TArg>;
export type ValueOrFunction<TValue, TArg> = TValue | ValueFunction<TValue, TArg>;
const isFunction = <TValue, TArg>(
valOrFunction: ValueOrFunction<TValue, TArg>
): valOrFunction is ValueFunction<TValue, TArg> =>
typeof valOrFunction === 'function';
): valOrFunction is ValueFunction<TValue, TArg> => typeof valOrFunction === 'function';
export const resolveValue = <TValue, TArg>(
valOrFunction: ValueOrFunction<TValue, TArg>,
arg: TArg
): TValue => (isFunction(valOrFunction) ? valOrFunction(arg) : valOrFunction);
export const resolveValue = <TValue, TArg>(valOrFunction: ValueOrFunction<TValue, TArg>, arg: TArg): TValue =>
isFunction(valOrFunction) ? valOrFunction(arg) : valOrFunction;

@@ -64,11 +53,3 @@ export interface IconTheme {

Toast,
| 'id'
| 'icon'
| 'duration'
| 'ariaProps'
| 'className'
| 'style'
| 'position'
| 'unmountDelay'
| 'iconTheme'
'id' | 'icon' | 'duration' | 'ariaProps' | 'className' | 'style' | 'position' | 'unmountDelay' | 'iconTheme'
>

@@ -79,5 +60,5 @@ >;

[key in ToastType]: number;
}
};
export type DefaultToastOptions = ToastOptions
export type DefaultToastOptions = ToastOptions;

@@ -101,6 +82,6 @@ export type Message = ValueOrFunction<Renderable, Toast>;

export interface ToastBarProps {
toast: Toast,
position: ToastPosition
toast: Toast;
position: ToastPosition;
}
export type IconProps = Partial<IconTheme>
export type IconProps = Partial<IconTheme>;

4

src/util/index.ts

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

export * from './util'
export * from './styles'
export * from './util';
export * from './styles';

24

src/util/styles.ts

@@ -1,3 +0,3 @@

import { JSX } from 'solid-js'
import { keyframes } from "goober"
import { JSX } from 'solid-js';
import { keyframes } from 'goober';

@@ -15,4 +15,4 @@ export const toastBarBase: JSX.CSSProperties = {

'line-height': '1.3',
'will-change': 'transform'
}
'will-change': 'transform',
};

@@ -22,7 +22,7 @@ export const entranceAnimation = (direction: number): string => `

100% {transform: translate3d(0,0,0) scale(1); opacity:1;}
`
`;
export const exitAnimation = (direction: number): string => `
0% {transform: translate3d(0,0,-1px) scale(1); opacity:1;}
100% {transform: translate3d(0,${direction * -150}%,-1px) scale(.4); opacity:0;}
`
`;
export const messageContainer: JSX.CSSProperties = {

@@ -34,3 +34,3 @@ display: 'flex',

'white-space': 'pre-line',
}
};

@@ -45,12 +45,12 @@ export const iconContainer: JSX.CSSProperties = {

'text-align': 'center',
}
};
export const iconCircle = keyframes`from{transform:scale(0)rotate(45deg);opacity:0;}to{transform:scale(1)rotate(45deg);opacity:1;}`;
export const pingCircle = keyframes`75%,100%{transform: scale(2.25);opacity:0;}`
export const pingCircle = keyframes`75%,100%{transform: scale(2.25);opacity:0;}`;
export const icon = keyframes`to{stroke-dashoffset: 0;}`
export const icon = keyframes`to{stroke-dashoffset: 0;}`;
export const infoDot = keyframes`0%{transform:translate3d(0,0,0);opacity:1;}100%{transform:translate3d(0,7px,0)scale(1);opacity:1;}`
export const infoDot = keyframes`0%{transform:translate3d(0,0,0);opacity:1;}100%{transform:translate3d(0,7px,0)scale(1);opacity:1;}`;
export const rotate = keyframes`from{transform: rotate(0deg);}to{transform: rotate(360deg);}`;
export const rotate = keyframes`from{transform: rotate(0deg);}to{transform: rotate(360deg);}`;

55

src/util/util.ts

@@ -1,29 +0,31 @@

import { setDefaultOpts, defaultOpts, store, dispatch, defaultToasterOptions } from "../core";
import { ActionType, Toast, ToasterProps, ToastPosition } from "../types";
import { JSX } from "solid-js";
import { setDefaultOpts, defaultOpts, store, dispatch, defaultToasterOptions } from '../core';
import { ActionType, Toast, ToasterProps, ToastPosition } from '../types';
import { JSX } from 'solid-js';
export const generateID = (() => {
let count = 0;
return () => String(++count)
})()
return () => String(++count);
})();
export const mergeContainerOptions = (props: ToasterProps) => {
setDefaultOpts(s => ({
setDefaultOpts((s) => ({
containerClassName: props.containerClassName ?? s.containerClassName,
containerStyle: props.containerStyle ?? s.containerStyle,
gutter: props.gutter ?? s.gutter ,
gutter: props.gutter ?? s.gutter,
position: props.position ?? s.position,
toastOptions: {
...props.toastOptions,
}
}))
}
},
}));
};
export const getToastWrapperStyles = (position: ToastPosition, offset: number): JSX.CSSProperties => {
const top = position.includes('top');
const verticalStyle: JSX.CSSProperties = top ? { top: 0 } : { bottom: 0 };
const verticalStyle: JSX.CSSProperties = top
? { top: 0, 'margin-top': `${offset}px` }
: { bottom: 0, 'margin-bottom': `${offset}px` };
const horizontalStyle: JSX.CSSProperties = position.includes('center')
? { 'justify-content': 'center'}
? { 'justify-content': 'center' }
: position.includes('right')
? { 'justify-content': 'flex-end'}
? { 'justify-content': 'flex-end' }
: {};

@@ -36,17 +38,16 @@ return {

transition: `all 230ms cubic-bezier(.21,1.02,.73,1)`,
transform: `translateY(${offset * (top ? 1 : -1)}px)`,
...verticalStyle,
...horizontalStyle,
};
}
};
export const updateToastHeight = (ref: HTMLDivElement, toast: Toast) => {
const boundingRect = ref.getBoundingClientRect()
if(boundingRect.height !== toast.height) {
const boundingRect = ref.getBoundingClientRect();
if (boundingRect.height !== toast.height) {
dispatch({
type: ActionType.UPDATE_TOAST,
toast: {id: toast.id, height: boundingRect.height},
})
toast: { id: toast.id, height: boundingRect.height },
});
}
}
};

@@ -56,17 +57,13 @@ export const getWrapperYAxisOffset = (toast: Toast, position: ToastPosition): number => {

const gutter = defaultOpts().gutter || defaultToasterOptions.gutter || 8;
const relevantToasts = toasts.filter(t => (
(t.position || position) === position && t.height
))
const relevantToasts = toasts.filter((t) => (t.position || position) === position && t.height);
const toastIndex = relevantToasts.findIndex((t) => t.id === toast.id);
const toastsBefore = relevantToasts.filter((toast, i) => i < toastIndex && toast.visible).length;
const offset = relevantToasts
.slice(0, toastsBefore)
.reduce((acc, t) => acc + gutter + (t.height || 0), 0)
const offset = relevantToasts.slice(0, toastsBefore).reduce((acc, t) => acc + gutter + (t.height || 0), 0);
return offset;
}
};
export const getToastYDirection = (toast: Toast, defaultPos: ToastPosition) => {
const position = toast.position || defaultPos
const position = toast.position || defaultPos;
const top = position.includes('top');
return top ? 1 : -1;
}
};
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

src/components/ErrorIcon.tsx

Sorry, the diff of this file is not supported yet

src/components/LoaderIcon.tsx

Sorry, the diff of this file is not supported yet

src/components/SuccessIcon.tsx

Sorry, the diff of this file is not supported yet

src/components/ToastBar.tsx

Sorry, the diff of this file is not supported yet

src/components/ToastContainer.tsx

Sorry, the diff of this file is not supported yet

src/components/Toaster.tsx

Sorry, the diff of this file is not supported yet

src/index.tsx

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