solid-toast - npm Package Compare versions

Comparing version 0.1.4 to 0.1.5-alpha.0

dist/solid-toast.cjs.js

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

dist/solid-toast.es.js

@@ -264,4 +264,8 @@ var __defProp = Object.defineProperty;
   "flex-shrink": 0,
-  width: "20px",
-  height: "20px"
+  "min-width": "20px",
+  "min-height": "20px",
+  display: "flex",
+  "align-items": "center",
+  "justify-content": "center",
+  "text-align": "center"
 };
@@ -268,0 +272,0 @@ const iconCircle = keyframes`from{transform:scale(0)rotate(45deg);opacity:0;}to{transform:scale(1)rotate(45deg);opacity:1;}`;

package.json

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

README.md

@@ -5,2 +5,3 @@ <a href="https://github.com/ardeora/solid-toast"><img alt="Solid Toast header image showing a cute toaster with a toast popping out" src="https://github.com/ardeora/solid-toast/raw/main/assets/header.png"/></a>
     <img src="https://badgen.net/npm/v/solid-toast" alt="NPM Version" />
+    <img src="https://badgen.net/bundlephobia/minzip/solid-toast" alt="minzipped size"/>
     <img src="https://github.com/ardeora/solid-toast/workflows/build/badge.svg" alt="Build Status" />
@@ -11,2 +12,6 @@ </a>
 <div align="center"><strong>Create beautiful, customizable toasts in SolidJS.</strong></div>
+<br />
+<div align="center" >
+<a  href="https://stackblitz.com/edit/vitejs-vite-njwzfq?file=src/App.tsx">StackBlitz Demo</a>
+</div>
 
@@ -13,0 +18,0 @@ <br />

src/util/styles.ts

@@ -36,4 +36,8 @@ import { JSX } from 'solid-js'
   'flex-shrink': 0,
-  width: '20px',
-  height: '20px'
+  'min-width': '20px',
+  'min-height': '20px',
+  display: 'flex',
+  'align-items': 'center',
+  'justify-content': 'center',
+  'text-align': 'center',
 }
@@ -40,0 +44,0 @@

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

71226

increased by0.79%

Lines of code

1432

increased by0.63%

Number of lines in readme file

232

increased by2.2%

No dependency changes