Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
solid-toast
Advanced tools
solid-toast - npm Package Compare versions
Comparing version 0.1.7-alpha.9 to 0.1.7-alpha.10
@@ -1,2 +0,743 @@ | ||
| "use strict";var _templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,_templateObject6;function _taggedTemplateLiteral(t,e){return e=e||t.slice(0),Object.freeze(Object.defineProperties(t,{raw:{value:Object.freeze(e)}}))}function ownKeys(e,t){var r,o=Object.keys(e);return Object.getOwnPropertySymbols&&(r=Object.getOwnPropertySymbols(e),t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),o.push.apply(o,r)),o}function _objectSpread(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?ownKeys(Object(r),!0).forEach(function(t){_defineProperty(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):ownKeys(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}function _defineProperty(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}function _toConsumableArray(t){return _arrayWithoutHoles(t)||_iterableToArray(t)||_unsupportedIterableToArray(t)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _iterableToArray(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}function _arrayWithoutHoles(t){if(Array.isArray(t))return _arrayLikeToArray(t)}function _slicedToArray(t,e){return _arrayWithHoles(t)||_iterableToArrayLimit(t,e)||_unsupportedIterableToArray(t,e)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(t,e){if(t){if("string"==typeof t)return _arrayLikeToArray(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);return"Map"===(r="Object"===r&&t.constructor?t.constructor.name:r)||"Set"===r?Array.from(t):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?_arrayLikeToArray(t,e):void 0}}function _arrayLikeToArray(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,o=new Array(e);r<e;r++)o[r]=t[r];return o}function _iterableToArrayLimit(t,e){var r=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=r){var o,n,i=[],a=!0,s=!1;try{for(r=r.call(t);!(a=(o=r.next()).done)&&(i.push(o.value),!e||i.length!==e);a=!0);}catch(t){s=!0,n=t}finally{try{a||null==r.return||r.return()}finally{if(s)throw n}}return i}}function _arrayWithHoles(t){if(Array.isArray(t))return t}Object.defineProperty(exports,"__esModule",{value:!0});var i,t=require("solid-js"),e=require("solid-js/store"),o=require("solid-js/web"),s=require("goober"),r=function(t,e){return"function"==typeof t?t(e):t},_e$createStore=(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",e.createStore({toasts:[],pausedAt:void 0})),_e$createStore2=_slicedToArray(_e$createStore,2),n=_e$createStore2[0],a=_e$createStore2[1],c=new Map,l=function(t,e){c.has(t)||(e=setTimeout(function(){c.delete(t),p({type:exports.ActionType.REMOVE_TOAST,toastId:t})},e),c.set(t,e))},p=function t(r){switch(r.type){case exports.ActionType.ADD_TOAST:a("toasts",function(t){return[r.toast].concat(_toConsumableArray(t))});break;case exports.ActionType.DISMISS_TOAST:var o=r.toastId,i=n.toasts;o?(p=i.find(function(t){return t.id===o}))&&l(o,p.unmountDelay):i.forEach(function(t){l(t.id,t.unmountDelay)}),a("toasts",function(t){return t.id===o},e.produce(function(t){return t.visible=!1}));break;case exports.ActionType.REMOVE_TOAST:if(!r.toastId){a("toasts",[]);break}a("toasts",function(t){return t.filter(function(t){return t.id!==r.toastId})});break;case exports.ActionType.UPDATE_TOAST:r.toast.id&&(p=r.toast.id,i=c.get(p),c.delete(p),i&&clearTimeout(i)),a("toasts",function(t){return t.id===r.toast.id},function(t){return _objectSpread(_objectSpread({},t),r.toast)});break;case exports.ActionType.UPSERT_TOAST:n.toasts.find(function(t){return t.id===r.toast.id})?t({type:exports.ActionType.UPDATE_TOAST,toast:r.toast}):t({type:exports.ActionType.ADD_TOAST,toast:r.toast});break;case exports.ActionType.START_PAUSE:a("pausedAt",Date.now());break;case exports.ActionType.END_PAUSE:var s=r.time-(n.pausedAt||0);a(e.produce(function(t){t.pausedAt=void 0,t.toasts.forEach(function(t){t.pauseDuration+=s})}))}var p},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=function(){var t=0;return function(){return String(++t)}}(),v=function(t,e){return(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(_templateObject=_templateObject||_taggedTemplateLiteral(["from{transform:scale(0)rotate(45deg);opacity:0;}to{transform:scale(1)rotate(45deg);opacity:1;}"])),h=s.keyframes(_templateObject2=_templateObject2||_taggedTemplateLiteral(["75%,100%{transform: scale(2.25);opacity:0;}"])),S=s.keyframes(_templateObject3=_templateObject3||_taggedTemplateLiteral(["to{stroke-dashoffset: 0;}"])),x=s.keyframes(_templateObject4=_templateObject4||_taggedTemplateLiteral(["0%{transform:translate3d(0,0,0);opacity:1;}100%{transform:translate3d(0,7px,0)scale(1);opacity:1;}"])),$=s.keyframes(_templateObject5=_templateObject5||_taggedTemplateLiteral(["from{transform: rotate(0deg);}to{transform: rotate(360deg);}"])),_t$createSignal=t.createSignal(u),_t$createSignal2=_slicedToArray(_t$createSignal,2),b=_t$createSignal2[0],P=_t$createSignal2[1],E=function(o){return function(t){var e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{},r=n.toasts.find(function(t){return t.id===e.id}),t=function(t,e,r){e=1<arguments.length&&void 0!==e?e:"blank",r=2<arguments.length?r:void 0;return _objectSpread(_objectSpread(_objectSpread(_objectSpread({},y),b().toastOptions),r),{},{type:e,message:t,pauseDuration:0,createdAt:Date.now(),visible:!0,id:r.id||f(),style:_objectSpread(_objectSpread(_objectSpread({},y.style),null==(t=b().toastOptions)?void 0:t.style),r.style),duration:r.duration||(null==(t=b().toastOptions)?void 0:t.duration)||d[e],position:r.position||(null==(t=b().toastOptions)?void 0:t.position)||b().position||y.position})}(t,o,_objectSpread(_objectSpread({},r),{},{duration:void 0},e));return p({type:exports.ActionType.UPSERT_TOAST,toast:t}),t.id}},k=function(t,e){return E("blank")(t,e)},w=(k.error=E("error"),k.success=E("success"),k.loading=E("loading"),k.custom=E("custom"),k.dismiss=function(t){p({type:exports.ActionType.DISMISS_TOAST,toastId:t})},k.promise=function(t,e,o){var n=k.loading(e.loading,_objectSpread({},o));return t.then(function(t){return k.success(r(e.success,t),_objectSpread({id:n},o)),t}).catch(function(t){k.error(r(e.error,t),_objectSpread({id:n},o))}),t},k.remove=function(t){p({type:exports.ActionType.REMOVE_TOAST,toastId:t})},o.template("<div></div>",2)),O=o.template("<div></div>",2),D=o.template("<div><div></div></div>",4),C=function(i){var a,c,e=_slicedToArray(t.createSignal(""),2),l=e[0],n=e[1];return t.createEffect(function(){var t;i.toast.visible?n("".concat(s.keyframes((t=v(i.toast,i.position),"\n0% {transform: translate3d(0,".concat(-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("".concat(s.keyframes("\n0% {transform: translate3d(0,0,-1px) scale(1); opacity:1;}\n100% {transform: translate3d(0,".concat(-150*v(i.toast,i.position),"%,-1px) scale(.4); opacity:0;}\n"))," 0.4s forwards cubic-bezier(.06,.71,.55,1)"))}),a=D.cloneNode(!0),c=a.firstChild,o.insert(a,o.createComponent(t.Switch,{get children(){return[o.createComponent(t.Match,{get when(){return i.toast.icon},get children(){var e=O.cloneNode(!0);return o.insert(e,function(){return i.toast.icon}),o.effect(function(t){return o.style(e,A,t)}),e}}),o.createComponent(t.Match,{get when(){return"loading"===i.toast.type},get children(){var e=O.cloneNode(!0);return o.insert(e,o.createComponent(B,o.mergeProps(function(){return i.toast.iconTheme}))),o.effect(function(t){return o.style(e,A,t)}),e}}),o.createComponent(t.Match,{get when(){return"success"===i.toast.type},get children(){var e=O.cloneNode(!0);return o.insert(e,o.createComponent(U,o.mergeProps(function(){return i.toast.iconTheme}))),o.effect(function(t){return o.style(e,A,t)}),e}}),o.createComponent(t.Match,{get when(){return"error"===i.toast.type},get children(){var e=O.cloneNode(!0);return o.insert(e,o.createComponent(z,o.mergeProps(function(){return i.toast.iconTheme}))),o.effect(function(t){return o.style(e,A,t)}),e}})]}}),c),o.spread(c,function(){return i.toast.ariaProps},!1,!0),o.insert(c,function(){return r(i.toast.message,i.toast)}),o.effect(function(t){var e=i.toast.className,r=_objectSpread(_objectSpread({},T),{},{animation:l()},i.toast.style),n=g;return e!==t._v$&&o.className(a,t._v$=e),t._v$2=o.style(a,r,t._v$2),t._v$3=o.style(c,n,t._v$3),t},{_v$:void 0,_v$2:void 0,_v$3:void 0}),a},N=o.template("<div></div>",2),M=s.css(_templateObject6=_templateObject6||_taggedTemplateLiteral(["z-index: 9999;> * { pointer-events: auto;}"])),I=function(c){function e(){var e,r,o,i,t,a,s=c.toast.position||y.position;return e=c.toast,r=s,a=n.toasts,o=b().gutter||u.gutter||8,a=a.filter(function(t){return(t.position||r)===r&&t.height}),i=a.findIndex(function(t){return t.id===e.id}),t=a.filter(function(t,e){return e<i&&t.visible}).length,t=a=a.slice(0,t).reduce(function(t,e){return t+o+(e.height||0)},0),s=(a=s).includes("top"),_objectSpread(_objectSpread({left:0,right:0,display:"flex",position:"absolute",transition:"all 230ms cubic-bezier(.21,1.02,.73,1)",transform:"translateY(".concat(t*(s?1:-1),"px)")},s?{top:0}:{bottom:0}),a.includes("center")?{"justify-content":"center"}:a.includes("right")?{"justify-content":"flex-end"}:{})}var i,a,s,l=_slicedToArray(t.createSignal(e()),2),d=l[0],f=l[1];return t.createEffect(function(){var t=e();f(t)}),t.onMount(function(){var t,e;i&&(t=i,e=c.toast,(t=t.getBoundingClientRect()).height!==e.height&&p({type:exports.ActionType.UPDATE_TOAST,toast:{id:e.id,height:t.height}}))}),(s=N.cloneNode(!0)).addEventListener("mouseleave",function(){return p({type:exports.ActionType.END_PAUSE,time:Date.now()})}),s.addEventListener("mouseenter",function(){return p({type:exports.ActionType.START_PAUSE,time:Date.now()})}),"function"==typeof i?i(s):i=s,o.insert(s,(a=o.memo(function(){return"custom"===c.toast.type},!0),function(){return a()?r(c.toast.message,c.toast):o.createComponent(C,{get toast(){return c.toast},get position(){return c.toast.position||y.position}})})),o.effect(function(t){var e=d(),r=c.toast.visible?M:"";return t._v$=o.style(s,e,t._v$),r!==t._v$2&&o.className(s,t._v$2=r),t},{_v$:void 0,_v$2:void 0}),s},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=function(i){var t,a,s,c,e="".concat(_," 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards"),r="".concat(h," 1s cubic-bezier(0, 0, 0.2, 1) forwards"),n="".concat(S," 0.2s ease-out forwards");return t=F.cloneNode(!0),a=t.firstChild,s=a.nextSibling,c=s.nextSibling,t.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"),s.style.setProperty("animation",r),s.style.setProperty("transform-origin","50% 50%"),s.style.setProperty("animation-delay","250ms"),c.style.setProperty("animation",n),c.style.setProperty("stroke-dasharray","22"),c.style.setProperty("stroke-dashoffset","22"),c.style.setProperty("animation-delay","250ms"),o.effect(function(t){var e=i.primary||"#34C759",r=i.primary||"#34C759",n=i.secondary||"#FCFCFC";return e!==t._v$&&o.setAttribute(a,"fill",t._v$=e),r!==t._v$2&&o.setAttribute(s,"fill",t._v$2=r),n!==t._v$3&&o.setAttribute(c,"stroke",t._v$3=n),t},{_v$:void 0,_v$2:void 0,_v$3:void 0}),t},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=function(a){var t,s,c,l,p,e="".concat(_," 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards"),r="".concat(h," 1s cubic-bezier(0, 0, 0.2, 1) forwards"),n="".concat(S," 0.1s ease-in forwards"),i="".concat(x," 0.2s ease-out forwards");return t=R.cloneNode(!0),s=t.firstChild,c=s.nextSibling,l=c.nextSibling,p=l.nextSibling,t.style.setProperty("overflow","visible"),s.style.setProperty("animation",e),s.style.setProperty("transform-origin","50% 50%"),s.style.setProperty("animation-delay","100ms"),s.style.setProperty("opacity","0"),c.style.setProperty("animation",r),c.style.setProperty("transform-origin","50% 50%"),c.style.setProperty("animation-delay","320ms"),l.style.setProperty("animation",n),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(function(t){var e=a.primary||"#FF3B30",r=a.primary||"#FF3B30",n=a.secondary||"#FFFFFF",i=a.secondary||"#FFFFFF";return e!==t._v$&&o.setAttribute(s,"fill",t._v$=e),r!==t._v$2&&o.setAttribute(c,"fill",t._v$2=r),n!==t._v$3&&o.setAttribute(l,"stroke",t._v$3=n),i!==t._v$4&&o.setAttribute(p,"fill",t._v$4=i),t},{_v$:void 0,_v$2:void 0,_v$3:void 0,_v$4:void 0}),t},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=function(n){var t,i,a,e="".concat($," 0.75s linear infinite");return t=j.cloneNode(!0),i=t.firstChild,a=i.nextSibling,t.style.setProperty("overflow","visible"),a.style.setProperty("animation",e),a.style.setProperty("transform-origin","50% 50%"),o.effect(function(t){var e=n.primary||"#E5E7EB",r=n.secondary||"#4b5563";return e!==t._v$&&o.setAttribute(i,"stroke",t._v$=e),r!==t._v$2&&o.setAttribute(a,"stroke",t._v$2=r),t},{_v$:void 0,_v$2:void 0}),t};exports.Toaster=function(i){return t.createEffect(function(){var r;r=i,P(function(t){var e;return{containerClassName:null!=(e=r.containerClassName)?e:t.containerClassName,containerStyle:null!=(e=r.containerStyle)?e:t.containerStyle,gutter:null!=(e=r.gutter)?e:t.gutter,position:null!=(e=r.position)?e:t.position,toastOptions:_objectSpread({},r.toastOptions)}})}),t.createEffect(function(){var e=function(){var r,t=n.pausedAt,e=n.toasts;if(!t)return r=Date.now(),e.map(function(t){var e;if(t.duration!==1/0)return e=(t.duration||0)+t.pauseDuration-(r-t.createdAt),e<=0?void(t.visible&&p({type:exports.ActionType.DISMISS_TOAST,toastId:t.id})):setTimeout(function(){p({type:exports.ActionType.DISMISS_TOAST,toastId:t.id})},e)})}();t.onCleanup(function(){e&&e.forEach(function(t){return t&&clearTimeout(t)})})}),a=w.cloneNode(!0),o.insert(a,o.createComponent(t.For,{get each(){return n.toasts},children:function(t){return o.createComponent(I,{toast:t})}})),o.effect(function(t){var e=_objectSpread(_objectSpread({},m),i.containerStyle),r=i.containerClassName;return t._v$=o.style(a,e,t._v$),r!==t._v$2&&o.className(a,t._v$2=r),t},{_v$:void 0,_v$2:void 0}),a;var a},exports.resolveValue=r,exports.toast=k; | ||
| 'use strict'; | ||
| Object.defineProperty(exports, '__esModule', { value: true }); | ||
| var solidJs = require('solid-js'); | ||
| var store$1 = require('solid-js/store'); | ||
| var web = require('solid-js/web'); | ||
| var goober = require('goober'); | ||
| const isFunction = valOrFunction => typeof valOrFunction === 'function'; | ||
| const resolveValue = (valOrFunction, arg) => isFunction(valOrFunction) ? valOrFunction(arg) : valOrFunction; | ||
| exports.ActionType = void 0; | ||
| (function (ActionType) { | ||
| ActionType[ActionType["ADD_TOAST"] = 0] = "ADD_TOAST"; | ||
| ActionType[ActionType["UPDATE_TOAST"] = 1] = "UPDATE_TOAST"; | ||
| ActionType[ActionType["UPSERT_TOAST"] = 2] = "UPSERT_TOAST"; | ||
| ActionType[ActionType["DISMISS_TOAST"] = 3] = "DISMISS_TOAST"; | ||
| ActionType[ActionType["REMOVE_TOAST"] = 4] = "REMOVE_TOAST"; | ||
| ActionType[ActionType["START_PAUSE"] = 5] = "START_PAUSE"; | ||
| ActionType[ActionType["END_PAUSE"] = 6] = "END_PAUSE"; | ||
| })(exports.ActionType || (exports.ActionType = {})); | ||
| const [store, setStore] = store$1.createStore({ | ||
| toasts: [], | ||
| pausedAt: undefined | ||
| }); | ||
| const createTimers = () => { | ||
| 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); | ||
| if (durationLeft <= 0) { | ||
| if (toast.visible) { | ||
| dispatch({ | ||
| type: exports.ActionType.DISMISS_TOAST, | ||
| toastId: toast.id | ||
| }); | ||
| } | ||
| return; | ||
| } | ||
| return setTimeout(() => { | ||
| dispatch({ | ||
| type: exports.ActionType.DISMISS_TOAST, | ||
| toastId: toast.id | ||
| }); | ||
| }, durationLeft); | ||
| }); | ||
| return timers; | ||
| }; | ||
| const removalQueue = new Map(); | ||
| const scheduleRemoval = (toastId, unmountDelay) => { | ||
| if (removalQueue.has(toastId)) return; | ||
| const timeout = setTimeout(() => { | ||
| removalQueue.delete(toastId); | ||
| dispatch({ | ||
| type: exports.ActionType.REMOVE_TOAST, | ||
| toastId | ||
| }); | ||
| }, unmountDelay); | ||
| removalQueue.set(toastId, timeout); | ||
| }; | ||
| const unscheduleRemoval = toastId => { | ||
| const timeout = removalQueue.get(toastId); | ||
| removalQueue.delete(toastId); | ||
| if (timeout) clearTimeout(timeout); | ||
| }; | ||
| const dispatch = action => { | ||
| switch (action.type) { | ||
| case exports.ActionType.ADD_TOAST: | ||
| setStore('toasts', t => { | ||
| const toasts = t; | ||
| return [action.toast, ...toasts]; | ||
| }); | ||
| break; | ||
| case exports.ActionType.DISMISS_TOAST: | ||
| const { | ||
| toastId | ||
| } = action; | ||
| const toasts = store.toasts; | ||
| if (toastId) { | ||
| const toastToRemove = toasts.find(t => t.id === toastId); | ||
| if (toastToRemove) scheduleRemoval(toastId, toastToRemove.unmountDelay); | ||
| } else { | ||
| toasts.forEach(t => { | ||
| scheduleRemoval(t.id, t.unmountDelay); | ||
| }); | ||
| } | ||
| setStore('toasts', t => t.id === toastId, store$1.produce(t => t.visible = false)); | ||
| break; | ||
| case exports.ActionType.REMOVE_TOAST: | ||
| if (!action.toastId) { | ||
| setStore('toasts', []); | ||
| break; | ||
| } | ||
| setStore('toasts', t => { | ||
| const toasts = t; | ||
| return toasts.filter(t => t.id !== action.toastId); | ||
| }); | ||
| break; | ||
| case exports.ActionType.UPDATE_TOAST: | ||
| if (action.toast.id) { | ||
| unscheduleRemoval(action.toast.id); | ||
| } | ||
| setStore('toasts', t => t.id === action.toast.id, t => { | ||
| const toast = t; | ||
| return { ...toast, | ||
| ...action.toast | ||
| }; | ||
| }); | ||
| break; | ||
| case exports.ActionType.UPSERT_TOAST: | ||
| store.toasts.find(t => t.id === action.toast.id) ? dispatch({ | ||
| type: exports.ActionType.UPDATE_TOAST, | ||
| toast: action.toast | ||
| }) : dispatch({ | ||
| type: exports.ActionType.ADD_TOAST, | ||
| toast: action.toast | ||
| }); | ||
| break; | ||
| case exports.ActionType.START_PAUSE: | ||
| setStore('pausedAt', Date.now()); | ||
| break; | ||
| case exports.ActionType.END_PAUSE: | ||
| const pauseInterval = action.time - (store.pausedAt || 0); | ||
| setStore(store$1.produce(s => { | ||
| s.pausedAt = undefined; | ||
| s.toasts.forEach(t => { | ||
| t.pauseDuration += pauseInterval; | ||
| }); | ||
| })); | ||
| break; | ||
| } | ||
| }; | ||
| const defaultTimeouts = { | ||
| blank: 4000, | ||
| error: 4000, | ||
| success: 2000, | ||
| loading: Infinity, | ||
| custom: 4000 | ||
| }; | ||
| const defaultToastOptions = { | ||
| id: '', | ||
| icon: '', | ||
| unmountDelay: 500, | ||
| duration: 3000, | ||
| ariaProps: { | ||
| role: 'status', | ||
| 'aria-live': 'polite' | ||
| }, | ||
| className: '', | ||
| style: {}, | ||
| position: 'top-right', | ||
| iconTheme: {} | ||
| }; | ||
| const defaultToasterOptions = { | ||
| position: 'top-right', | ||
| toastOptions: defaultToastOptions, | ||
| gutter: 8, | ||
| containerStyle: {}, | ||
| containerClassName: '' | ||
| }; | ||
| const defaultContainerPadding = '16px'; | ||
| const defaultContainerStyle = { | ||
| position: 'fixed', | ||
| 'z-index': 9999, | ||
| top: defaultContainerPadding, | ||
| bottom: defaultContainerPadding, | ||
| left: defaultContainerPadding, | ||
| right: defaultContainerPadding, | ||
| "pointer-events": 'none' | ||
| }; | ||
| const generateID = (() => { | ||
| let count = 0; | ||
| return () => String(++count); | ||
| })(); | ||
| const mergeContainerOptions = props => { | ||
| setDefaultOpts(s => ({ | ||
| containerClassName: props.containerClassName ?? s.containerClassName, | ||
| containerStyle: props.containerStyle ?? s.containerStyle, | ||
| gutter: props.gutter ?? s.gutter, | ||
| position: props.position ?? s.position, | ||
| toastOptions: { ...props.toastOptions | ||
| } | ||
| })); | ||
| }; | ||
| const getToastWrapperStyles = (position, offset) => { | ||
| const top = position.includes('top'); | ||
| const verticalStyle = top ? { | ||
| top: 0 | ||
| } : { | ||
| bottom: 0 | ||
| }; | ||
| const horizontalStyle = position.includes('center') ? { | ||
| 'justify-content': 'center' | ||
| } : position.includes('right') ? { | ||
| 'justify-content': 'flex-end' | ||
| } : {}; | ||
| return { | ||
| left: 0, | ||
| right: 0, | ||
| display: 'flex', | ||
| position: 'absolute', | ||
| transition: `all 230ms cubic-bezier(.21,1.02,.73,1)`, | ||
| transform: `translateY(${offset * (top ? 1 : -1)}px)`, | ||
| ...verticalStyle, | ||
| ...horizontalStyle | ||
| }; | ||
| }; | ||
| const updateToastHeight = (ref, toast) => { | ||
| const boundingRect = ref.getBoundingClientRect(); | ||
| if (boundingRect.height !== toast.height) { | ||
| dispatch({ | ||
| type: exports.ActionType.UPDATE_TOAST, | ||
| toast: { | ||
| id: toast.id, | ||
| height: boundingRect.height | ||
| } | ||
| }); | ||
| } | ||
| }; | ||
| const getWrapperYAxisOffset = (toast, position) => { | ||
| const { | ||
| toasts | ||
| } = store; | ||
| const gutter = defaultOpts().gutter || defaultToasterOptions.gutter || 8; | ||
| 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); | ||
| return offset; | ||
| }; | ||
| const getToastYDirection = (toast, defaultPos) => { | ||
| const position = toast.position || defaultPos; | ||
| const top = position.includes('top'); | ||
| return top ? 1 : -1; | ||
| }; | ||
| const toastBarBase = { | ||
| 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' | ||
| }; | ||
| const entranceAnimation = direction => ` | ||
| 0% {transform: translate3d(0,${direction * -200}%,0) scale(.6); opacity:.5;} | ||
| 100% {transform: translate3d(0,0,0) scale(1); opacity:1;} | ||
| `; | ||
| const exitAnimation = direction => ` | ||
| 0% {transform: translate3d(0,0,-1px) scale(1); opacity:1;} | ||
| 100% {transform: translate3d(0,${direction * -150}%,-1px) scale(.4); opacity:0;} | ||
| `; | ||
| const messageContainer = { | ||
| display: 'flex', | ||
| 'align-items': 'center', | ||
| flex: '1 1 auto', | ||
| margin: '4px 10px', | ||
| 'white-space': 'pre-line' | ||
| }; | ||
| const iconContainer = { | ||
| 'flex-shrink': 0, | ||
| 'min-width': '20px', | ||
| 'min-height': '20px', | ||
| display: 'flex', | ||
| 'align-items': 'center', | ||
| 'justify-content': 'center', | ||
| 'text-align': 'center' | ||
| }; | ||
| const iconCircle = goober.keyframes`from{transform:scale(0)rotate(45deg);opacity:0;}to{transform:scale(1)rotate(45deg);opacity:1;}`; | ||
| const pingCircle = goober.keyframes`75%,100%{transform: scale(2.25);opacity:0;}`; | ||
| const icon = goober.keyframes`to{stroke-dashoffset: 0;}`; | ||
| const infoDot = goober.keyframes`0%{transform:translate3d(0,0,0);opacity:1;}100%{transform:translate3d(0,7px,0)scale(1);opacity:1;}`; | ||
| const rotate = goober.keyframes`from{transform: rotate(0deg);}to{transform: rotate(360deg);}`; | ||
| const [defaultOpts, setDefaultOpts] = solidJs.createSignal(defaultToasterOptions); | ||
| const createToast = (message, type = 'blank', options) => ({ ...defaultToastOptions, | ||
| ...defaultOpts().toastOptions, | ||
| ...options, | ||
| type, | ||
| message, | ||
| pauseDuration: 0, | ||
| createdAt: Date.now(), | ||
| visible: true, | ||
| id: options.id || generateID(), | ||
| style: { ...defaultToastOptions.style, | ||
| ...defaultOpts().toastOptions?.style, | ||
| ...options.style | ||
| }, | ||
| duration: options.duration || defaultOpts().toastOptions?.duration || defaultTimeouts[type], | ||
| 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 toast = createToast(message, type, { ...existingToast, | ||
| duration: undefined, | ||
| ...options | ||
| }); | ||
| dispatch({ | ||
| type: exports.ActionType.UPSERT_TOAST, | ||
| toast | ||
| }); | ||
| return toast.id; | ||
| }; | ||
| const toast = (message, opts) => createToastCreator('blank')(message, opts); | ||
| toast.error = createToastCreator('error'); | ||
| toast.success = createToastCreator('success'); | ||
| toast.loading = createToastCreator('loading'); | ||
| toast.custom = createToastCreator('custom'); | ||
| toast.dismiss = toastId => { | ||
| dispatch({ | ||
| type: exports.ActionType.DISMISS_TOAST, | ||
| toastId | ||
| }); | ||
| }; | ||
| toast.promise = (promise, msgs, opts) => { | ||
| const id = toast.loading(msgs.loading, { ...opts | ||
| }); | ||
| promise.then(p => { | ||
| toast.success(resolveValue(msgs.success, p), { | ||
| id, | ||
| ...opts | ||
| }); | ||
| return p; | ||
| }).catch(e => { | ||
| toast.error(resolveValue(msgs.error, e), { | ||
| id, | ||
| ...opts | ||
| }); | ||
| }); | ||
| return promise; | ||
| }; | ||
| toast.remove = toastId => { | ||
| dispatch({ | ||
| type: exports.ActionType.REMOVE_TOAST, | ||
| toastId | ||
| }); | ||
| }; | ||
| const _tmpl$$5 = /*#__PURE__*/web.template(`<div></div>`, 2); | ||
| const Toaster = props => { | ||
| solidJs.createEffect(() => { | ||
| mergeContainerOptions(props); | ||
| }); | ||
| solidJs.createEffect(() => { | ||
| const timers = createTimers(); | ||
| solidJs.onCleanup(() => { | ||
| if (!timers) return; | ||
| timers.forEach(timer => timer && clearTimeout(timer)); | ||
| }); | ||
| }); | ||
| return (() => { | ||
| const _el$ = _tmpl$$5.cloneNode(true); | ||
| web.insert(_el$, web.createComponent(solidJs.For, { | ||
| get each() { | ||
| return store.toasts; | ||
| }, | ||
| children: toast => web.createComponent(ToastContainer, { | ||
| toast: toast | ||
| }) | ||
| })); | ||
| web.effect(_p$ => { | ||
| const _v$ = { ...defaultContainerStyle, | ||
| ...props.containerStyle | ||
| }, | ||
| _v$2 = props.containerClassName; | ||
| _p$._v$ = web.style(_el$, _v$, _p$._v$); | ||
| _v$2 !== _p$._v$2 && web.className(_el$, _p$._v$2 = _v$2); | ||
| return _p$; | ||
| }, { | ||
| _v$: undefined, | ||
| _v$2: undefined | ||
| }); | ||
| return _el$; | ||
| })(); | ||
| }; | ||
| const _tmpl$$4 = /*#__PURE__*/web.template(`<div></div>`, 2), | ||
| _tmpl$2 = /*#__PURE__*/web.template(`<div><div></div></div>`, 4); | ||
| const ToastBar = props => { | ||
| const [animation, setAnimation] = solidJs.createSignal(''); | ||
| solidJs.createEffect(() => { | ||
| props.toast.visible ? setAnimation(`${goober.keyframes(entranceAnimation(getToastYDirection(props.toast, props.position)))} 0.35s cubic-bezier(.21,1.02,.73,1) forwards`) : setAnimation(`${goober.keyframes(exitAnimation(getToastYDirection(props.toast, props.position)))} 0.4s forwards cubic-bezier(.06,.71,.55,1)`); | ||
| }); | ||
| return (() => { | ||
| const _el$ = _tmpl$2.cloneNode(true), | ||
| _el$6 = _el$.firstChild; | ||
| web.insert(_el$, web.createComponent(solidJs.Switch, { | ||
| get children() { | ||
| return [web.createComponent(solidJs.Match, { | ||
| get when() { | ||
| return props.toast.icon; | ||
| }, | ||
| get children() { | ||
| const _el$2 = _tmpl$$4.cloneNode(true); | ||
| web.insert(_el$2, () => props.toast.icon); | ||
| web.effect(_$p => web.style(_el$2, iconContainer, _$p)); | ||
| return _el$2; | ||
| } | ||
| }), web.createComponent(solidJs.Match, { | ||
| get when() { | ||
| return props.toast.type === 'loading'; | ||
| }, | ||
| get children() { | ||
| const _el$3 = _tmpl$$4.cloneNode(true); | ||
| web.insert(_el$3, web.createComponent(Loader, web.mergeProps(() => props.toast.iconTheme))); | ||
| web.effect(_$p => web.style(_el$3, iconContainer, _$p)); | ||
| return _el$3; | ||
| } | ||
| }), web.createComponent(solidJs.Match, { | ||
| get when() { | ||
| return props.toast.type === 'success'; | ||
| }, | ||
| get children() { | ||
| const _el$4 = _tmpl$$4.cloneNode(true); | ||
| web.insert(_el$4, web.createComponent(Success, web.mergeProps(() => props.toast.iconTheme))); | ||
| web.effect(_$p => web.style(_el$4, iconContainer, _$p)); | ||
| return _el$4; | ||
| } | ||
| }), web.createComponent(solidJs.Match, { | ||
| get when() { | ||
| return props.toast.type === 'error'; | ||
| }, | ||
| get children() { | ||
| const _el$5 = _tmpl$$4.cloneNode(true); | ||
| web.insert(_el$5, web.createComponent(Error, web.mergeProps(() => props.toast.iconTheme))); | ||
| web.effect(_$p => web.style(_el$5, iconContainer, _$p)); | ||
| return _el$5; | ||
| } | ||
| })]; | ||
| } | ||
| }), _el$6); | ||
| web.spread(_el$6, () => props.toast.ariaProps, false, true); | ||
| web.insert(_el$6, () => resolveValue(props.toast.message, props.toast)); | ||
| web.effect(_p$ => { | ||
| const _v$ = props.toast.className, | ||
| _v$2 = { ...toastBarBase, | ||
| animation: animation(), | ||
| ...props.toast.style | ||
| }, | ||
| _v$3 = messageContainer; | ||
| _v$ !== _p$._v$ && web.className(_el$, _p$._v$ = _v$); | ||
| _p$._v$2 = web.style(_el$, _v$2, _p$._v$2); | ||
| _p$._v$3 = web.style(_el$6, _v$3, _p$._v$3); | ||
| return _p$; | ||
| }, { | ||
| _v$: undefined, | ||
| _v$2: undefined, | ||
| _v$3: undefined | ||
| }); | ||
| return _el$; | ||
| })(); | ||
| }; | ||
| const _tmpl$$3 = /*#__PURE__*/web.template(`<div></div>`, 2); | ||
| const activeClass = goober.css`z-index: 9999;> * { pointer-events: auto;}`; | ||
| const ToastContainer = props => { | ||
| const calculatePosition = () => { | ||
| const position = props.toast.position || defaultToastOptions.position; | ||
| const offset = getWrapperYAxisOffset(props.toast, position); | ||
| const positionStyle = getToastWrapperStyles(position, offset); | ||
| return positionStyle; | ||
| }; | ||
| const [positionStyle, setPositionStyle] = solidJs.createSignal(calculatePosition()); | ||
| solidJs.createEffect(() => { | ||
| const newStyles = calculatePosition(); | ||
| setPositionStyle(newStyles); | ||
| }); | ||
| let el = undefined; | ||
| solidJs.onMount(() => { | ||
| if (el) { | ||
| updateToastHeight(el, props.toast); | ||
| } | ||
| }); | ||
| return (() => { | ||
| const _el$ = _tmpl$$3.cloneNode(true); | ||
| _el$.addEventListener("mouseleave", () => dispatch({ | ||
| type: exports.ActionType.END_PAUSE, | ||
| time: Date.now() | ||
| })); | ||
| _el$.addEventListener("mouseenter", () => dispatch({ | ||
| type: exports.ActionType.START_PAUSE, | ||
| time: Date.now() | ||
| })); | ||
| const _ref$ = el; | ||
| typeof _ref$ === "function" ? _ref$(_el$) : el = _el$; | ||
| web.insert(_el$, (() => { | ||
| const _c$ = web.memo(() => props.toast.type === 'custom', true); | ||
| return () => _c$() ? resolveValue(props.toast.message, props.toast) : web.createComponent(ToastBar, { | ||
| get toast() { | ||
| return props.toast; | ||
| }, | ||
| get position() { | ||
| return props.toast.position || defaultToastOptions.position; | ||
| } | ||
| }); | ||
| })()); | ||
| web.effect(_p$ => { | ||
| const _v$ = positionStyle(), | ||
| _v$2 = props.toast.visible ? activeClass : ''; | ||
| _p$._v$ = web.style(_el$, _v$, _p$._v$); | ||
| _v$2 !== _p$._v$2 && web.className(_el$, _p$._v$2 = _v$2); | ||
| return _p$; | ||
| }, { | ||
| _v$: undefined, | ||
| _v$2: undefined | ||
| }); | ||
| return _el$; | ||
| })(); | ||
| }; | ||
| const _tmpl$$2 = /*#__PURE__*/web.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); | ||
| const Success = props => { | ||
| const mainCircle = `${iconCircle} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards`; | ||
| const secondaryCircle = `${pingCircle} 1s cubic-bezier(0, 0, 0.2, 1) forwards`; | ||
| const check = `${icon} 0.2s ease-out forwards`; | ||
| return (() => { | ||
| const _el$ = _tmpl$$2.cloneNode(true), | ||
| _el$2 = _el$.firstChild, | ||
| _el$3 = _el$2.nextSibling, | ||
| _el$4 = _el$3.nextSibling; | ||
| _el$.style.setProperty("overflow", "visible"); | ||
| _el$2.style.setProperty("animation", mainCircle); | ||
| _el$2.style.setProperty("transform-origin", "50% 50%"); | ||
| _el$2.style.setProperty("animation-delay", "100ms"); | ||
| _el$2.style.setProperty("opacity", "0"); | ||
| _el$3.style.setProperty("animation", secondaryCircle); | ||
| _el$3.style.setProperty("transform-origin", "50% 50%"); | ||
| _el$3.style.setProperty("animation-delay", "250ms"); | ||
| _el$4.style.setProperty("animation", check); | ||
| _el$4.style.setProperty("stroke-dasharray", "22"); | ||
| _el$4.style.setProperty("stroke-dashoffset", "22"); | ||
| _el$4.style.setProperty("animation-delay", "250ms"); | ||
| web.effect(_p$ => { | ||
| const _v$ = props.primary || '#34C759', | ||
| _v$2 = props.primary || '#34C759', | ||
| _v$3 = props.secondary || '#FCFCFC'; | ||
| _v$ !== _p$._v$ && web.setAttribute(_el$2, "fill", _p$._v$ = _v$); | ||
| _v$2 !== _p$._v$2 && web.setAttribute(_el$3, "fill", _p$._v$2 = _v$2); | ||
| _v$3 !== _p$._v$3 && web.setAttribute(_el$4, "stroke", _p$._v$3 = _v$3); | ||
| return _p$; | ||
| }, { | ||
| _v$: undefined, | ||
| _v$2: undefined, | ||
| _v$3: undefined | ||
| }); | ||
| return _el$; | ||
| })(); | ||
| }; | ||
| const _tmpl$$1 = /*#__PURE__*/web.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); | ||
| const Error = props => { | ||
| const mainCircle = `${iconCircle} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards`; | ||
| const secondaryCircle = `${pingCircle} 1s cubic-bezier(0, 0, 0.2, 1) forwards`; | ||
| const infoDash = `${icon} 0.1s ease-in forwards`; | ||
| const infoCircle = `${infoDot} 0.2s ease-out forwards`; | ||
| return (() => { | ||
| const _el$ = _tmpl$$1.cloneNode(true), | ||
| _el$2 = _el$.firstChild, | ||
| _el$3 = _el$2.nextSibling, | ||
| _el$4 = _el$3.nextSibling, | ||
| _el$5 = _el$4.nextSibling; | ||
| _el$.style.setProperty("overflow", "visible"); | ||
| _el$2.style.setProperty("animation", mainCircle); | ||
| _el$2.style.setProperty("transform-origin", "50% 50%"); | ||
| _el$2.style.setProperty("animation-delay", "100ms"); | ||
| _el$2.style.setProperty("opacity", "0"); | ||
| _el$3.style.setProperty("animation", secondaryCircle); | ||
| _el$3.style.setProperty("transform-origin", "50% 50%"); | ||
| _el$3.style.setProperty("animation-delay", "320ms"); | ||
| _el$4.style.setProperty("animation", infoDash); | ||
| _el$4.style.setProperty("stroke-dasharray", "9"); | ||
| _el$4.style.setProperty("stroke-dashoffset", "9"); | ||
| _el$4.style.setProperty("animation-delay", "200ms"); | ||
| _el$5.style.setProperty("animation", infoCircle); | ||
| _el$5.style.setProperty("animation-delay", "320ms"); | ||
| _el$5.style.setProperty("opacity", "0"); | ||
| web.effect(_p$ => { | ||
| const _v$ = props.primary || "#FF3B30", | ||
| _v$2 = props.primary || "#FF3B30", | ||
| _v$3 = props.secondary || "#FFFFFF", | ||
| _v$4 = props.secondary || "#FFFFFF"; | ||
| _v$ !== _p$._v$ && web.setAttribute(_el$2, "fill", _p$._v$ = _v$); | ||
| _v$2 !== _p$._v$2 && web.setAttribute(_el$3, "fill", _p$._v$2 = _v$2); | ||
| _v$3 !== _p$._v$3 && web.setAttribute(_el$4, "stroke", _p$._v$3 = _v$3); | ||
| _v$4 !== _p$._v$4 && web.setAttribute(_el$5, "fill", _p$._v$4 = _v$4); | ||
| return _p$; | ||
| }, { | ||
| _v$: undefined, | ||
| _v$2: undefined, | ||
| _v$3: undefined, | ||
| _v$4: undefined | ||
| }); | ||
| return _el$; | ||
| })(); | ||
| }; | ||
| const _tmpl$ = /*#__PURE__*/web.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); | ||
| const Loader = props => { | ||
| const animation = `${rotate} 0.75s linear infinite`; | ||
| return (() => { | ||
| const _el$ = _tmpl$.cloneNode(true), | ||
| _el$2 = _el$.firstChild, | ||
| _el$3 = _el$2.nextSibling; | ||
| _el$.style.setProperty("overflow", "visible"); | ||
| _el$3.style.setProperty("animation", animation); | ||
| _el$3.style.setProperty("transform-origin", "50% 50%"); | ||
| web.effect(_p$ => { | ||
| const _v$ = props.primary || "#E5E7EB", | ||
| _v$2 = props.secondary || "#4b5563"; | ||
| _v$ !== _p$._v$ && web.setAttribute(_el$2, "stroke", _p$._v$ = _v$); | ||
| _v$2 !== _p$._v$2 && web.setAttribute(_el$3, "stroke", _p$._v$2 = _v$2); | ||
| return _p$; | ||
| }, { | ||
| _v$: undefined, | ||
| _v$2: undefined | ||
| }); | ||
| return _el$; | ||
| })(); | ||
| }; | ||
| exports.Toaster = Toaster; | ||
| exports.resolveValue = resolveValue; | ||
| exports.toast = toast; | ||
| //# sourceMappingURL=index.js.map |
@@ -1,2 +0,737 @@ | ||
| var _templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,_templateObject6;function _taggedTemplateLiteral(t,e){return e=e||t.slice(0),Object.freeze(Object.defineProperties(t,{raw:{value:Object.freeze(e)}}))}function ownKeys(e,t){var r,o=Object.keys(e);return Object.getOwnPropertySymbols&&(r=Object.getOwnPropertySymbols(e),t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),o.push.apply(o,r)),o}function _objectSpread(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?ownKeys(Object(r),!0).forEach(function(t){_defineProperty(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):ownKeys(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}function _defineProperty(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}function _toConsumableArray(t){return _arrayWithoutHoles(t)||_iterableToArray(t)||_unsupportedIterableToArray(t)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _iterableToArray(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}function _arrayWithoutHoles(t){if(Array.isArray(t))return _arrayLikeToArray(t)}function _slicedToArray(t,e){return _arrayWithHoles(t)||_iterableToArrayLimit(t,e)||_unsupportedIterableToArray(t,e)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(t,e){if(t){if("string"==typeof t)return _arrayLikeToArray(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);return"Map"===(r="Object"===r&&t.constructor?t.constructor.name:r)||"Set"===r?Array.from(t):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?_arrayLikeToArray(t,e):void 0}}function _arrayLikeToArray(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,o=new Array(e);r<e;r++)o[r]=t[r];return o}function _iterableToArrayLimit(t,e){var r=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=r){var o,n,a=[],i=!0,s=!1;try{for(r=r.call(t);!(i=(o=r.next()).done)&&(a.push(o.value),!e||a.length!==e);i=!0);}catch(t){s=!0,n=t}finally{try{i||null==r.return||r.return()}finally{if(s)throw n}}return a}}function _arrayWithHoles(t){if(Array.isArray(t))return t}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";var $,S=function(t,e){return"function"==typeof t?t(e):t},_a=(!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"}($=$||{}),a({toasts:[],pausedAt:void 0})),_a2=_slicedToArray(_a,2),A=_a2[0],b=_a2[1],x=new Map,P=function(t,e){x.has(t)||(e=setTimeout(function(){x.delete(t),E({type:$.REMOVE_TOAST,toastId:t})},e),x.set(t,e))},E=function t(e){switch(e.type){case $.ADD_TOAST:b("toasts",function(t){return[e.toast].concat(_toConsumableArray(t))});break;case $.DISMISS_TOAST:var r=e.toastId,o=A.toasts;r?(a=o.find(function(t){return t.id===r}))&&P(r,a.unmountDelay):o.forEach(function(t){P(t.id,t.unmountDelay)}),b("toasts",function(t){return t.id===r},c(function(t){return t.visible=!1}));break;case $.REMOVE_TOAST:if(!e.toastId){b("toasts",[]);break}b("toasts",function(t){return t.filter(function(t){return t.id!==e.toastId})});break;case $.UPDATE_TOAST:e.toast.id&&(a=e.toast.id,o=x.get(a),x.delete(a),o&&clearTimeout(o)),b("toasts",function(t){return t.id===e.toast.id},function(t){return _objectSpread(_objectSpread({},t),e.toast)});break;case $.UPSERT_TOAST:A.toasts.find(function(t){return t.id===e.toast.id})?t({type:$.UPDATE_TOAST,toast:e.toast}):t({type:$.ADD_TOAST,toast:e.toast});break;case $.START_PAUSE:b("pausedAt",Date.now());break;case $.END_PAUSE:var n=e.time-(A.pausedAt||0);b(c(function(t){t.pausedAt=void 0,t.toasts.forEach(function(t){t.pauseDuration+=n})}))}var a},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=function(){var t=0;return function(){return String(++t)}}(),N=function(t,e){return(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(_templateObject=_templateObject||_taggedTemplateLiteral(["from{transform:scale(0)rotate(45deg);opacity:0;}to{transform:scale(1)rotate(45deg);opacity:1;}"])),R=T(_templateObject2=_templateObject2||_taggedTemplateLiteral(["75%,100%{transform: scale(2.25);opacity:0;}"])),z=T(_templateObject3=_templateObject3||_taggedTemplateLiteral(["to{stroke-dashoffset: 0;}"])),B=T(_templateObject4=_templateObject4||_taggedTemplateLiteral(["0%{transform:translate3d(0,0,0);opacity:1;}100%{transform:translate3d(0,7px,0)scale(1);opacity:1;}"])),j=T(_templateObject5=_templateObject5||_taggedTemplateLiteral(["from{transform: rotate(0deg);}to{transform: rotate(360deg);}"])),_t=t(D),_t2=_slicedToArray(_t,2),V=_t2[0],L=_t2[1],Y=function(o){return function(t){var e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{},r=A.toasts.find(function(t){return t.id===e.id}),r=function(t,e,r){var o,n=1<arguments.length&&void 0!==e?e:"blank",a=2<arguments.length?r:void 0;return _objectSpread(_objectSpread(_objectSpread(_objectSpread({},O),V().toastOptions),a),{},{type:n,message:t,pauseDuration:0,createdAt:Date.now(),visible:!0,id:a.id||I(),style:_objectSpread(_objectSpread(_objectSpread({},O.style),null==(o=V().toastOptions)?void 0:o.style),a.style),duration:a.duration||(null==(o=V().toastOptions)?void 0:o.duration)||w[n],position:a.position||(null==(o=V().toastOptions)?void 0:o.position)||V().position||O.position})}(t,o,_objectSpread(_objectSpread({},r),{},{duration:void 0},e));return E({type:$.UPSERT_TOAST,toast:r}),r.id}},q=function(t,e){return Y("blank")(t,e)},G=(q.error=Y("error"),q.success=Y("success"),q.loading=Y("loading"),q.custom=Y("custom"),q.dismiss=function(t){E({type:$.DISMISS_TOAST,toastId:t})},q.promise=function(t,e,r){var o=q.loading(e.loading,_objectSpread({},r));return t.then(function(t){return q.success(S(e.success,t),_objectSpread({id:o},r)),t}).catch(function(t){q.error(S(e.error,t),_objectSpread({id:o},r))}),t},q.remove=function(t){E({type:$.REMOVE_TOAST,toastId:t})},v("<div></div>",2)),H=function(n){return e(function(){var r;r=n,L(function(t){var e;return{containerClassName:null!=(e=r.containerClassName)?e:t.containerClassName,containerStyle:null!=(e=r.containerStyle)?e:t.containerStyle,gutter:null!=(e=r.gutter)?e:t.gutter,position:null!=(e=r.position)?e:t.position,toastOptions:_objectSpread({},r.toastOptions)}})}),e(function(){var t=function(){var r,t=A.pausedAt,e=A.toasts;if(!t)return r=Date.now(),e.map(function(t){var e;if(t.duration!==1/0)return e=(t.duration||0)+t.pauseDuration-(r-t.createdAt),e<=0?void(t.visible&&E({type:$.DISMISS_TOAST,toastId:t.id})):setTimeout(function(){E({type:$.DISMISS_TOAST,toastId:t.id})},e)})}();o(function(){t&&t.forEach(function(t){return t&&clearTimeout(t)})})}),a=G.cloneNode(!0),l(a,d(s,{get each(){return A.toasts},children:function(t){return d(Z,{toast:t})}})),p(function(t){var e=_objectSpread(_objectSpread({},k),n.containerStyle),r=n.containerClassName;return t._v$=y(a,e,t._v$),r!==t._v$2&&u(a,t._v$2=r),t},{_v$:void 0,_v$2:void 0}),a;var a},J=v("<div></div>",2),K=v("<div><div></div></div>",4),Q=function(n){var a,s,o=_slicedToArray(t(""),2),c=o[0],v=o[1];return e(function(){var t;n.toast.visible?v("".concat(T((t=N(n.toast,n.position),"\n0% {transform: translate3d(0,".concat(-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")):v("".concat(T("\n0% {transform: translate3d(0,0,-1px) scale(1); opacity:1;}\n100% {transform: translate3d(0,".concat(-150*N(n.toast,n.position),"%,-1px) scale(.4); opacity:0;}\n"))," 0.4s forwards cubic-bezier(.06,.71,.55,1)"))}),a=K.cloneNode(!0),s=a.firstChild,l(a,d(r,{get children(){return[d(i,{get when(){return n.toast.icon},get children(){var e=J.cloneNode(!0);return l(e,function(){return n.toast.icon}),p(function(t){return y(e,M,t)}),e}}),d(i,{get when(){return"loading"===n.toast.type},get children(){var e=J.cloneNode(!0);return l(e,d(it,m(function(){return n.toast.iconTheme}))),p(function(t){return y(e,M,t)}),e}}),d(i,{get when(){return"success"===n.toast.type},get children(){var e=J.cloneNode(!0);return l(e,d(et,m(function(){return n.toast.iconTheme}))),p(function(t){return y(e,M,t)}),e}}),d(i,{get when(){return"error"===n.toast.type},get children(){var e=J.cloneNode(!0);return l(e,d(st,m(function(){return n.toast.iconTheme}))),p(function(t){return y(e,M,t)}),e}})]}}),s),f(s,function(){return n.toast.ariaProps},!1,!0),l(s,function(){return S(n.toast.message,n.toast)}),p(function(t){var e=n.toast.className,r=_objectSpread(_objectSpread({},F),{},{animation:c()},n.toast.style),o=U;return e!==t._v$&&u(a,t._v$=e),t._v$2=y(a,r,t._v$2),t._v$3=y(s,o,t._v$3),t},{_v$:void 0,_v$2:void 0,_v$3:void 0}),a},W=v("<div></div>",2),X=h(_templateObject6=_templateObject6||_taggedTemplateLiteral(["z-index: 9999;> * { pointer-events: auto;}"])),Z=function(s){function r(){var e,r,o,n,t,a,i=s.toast.position||O.position;return e=s.toast,r=i,a=A.toasts,o=V().gutter||D.gutter||8,a=a.filter(function(t){return(t.position||r)===r&&t.height}),n=a.findIndex(function(t){return t.id===e.id}),t=a.filter(function(t,e){return e<n&&t.visible}).length,t=a=a.slice(0,t).reduce(function(t,e){return t+o+(e.height||0)},0),i=(a=i).includes("top"),_objectSpread(_objectSpread({left:0,right:0,display:"flex",position:"absolute",transition:"all 230ms cubic-bezier(.21,1.02,.73,1)",transform:"translateY(".concat(t*(i?1:-1),"px)")},i?{top:0}:{bottom:0}),a.includes("center")?{"justify-content":"center"}:a.includes("right")?{"justify-content":"flex-end"}:{})}var o,a,i,c=_slicedToArray(t(r()),2),f=c[0],v=c[1];return e(function(){var t=r();v(t)}),n(function(){var t,e;o&&(t=o,e=s.toast,(t=t.getBoundingClientRect()).height!==e.height&&E({type:$.UPDATE_TOAST,toast:{id:e.id,height:t.height}}))}),(i=W.cloneNode(!0)).addEventListener("mouseleave",function(){return E({type:$.END_PAUSE,time:Date.now()})}),i.addEventListener("mouseenter",function(){return E({type:$.START_PAUSE,time:Date.now()})}),"function"==typeof o?o(i):o=i,l(i,(a=_(function(){return"custom"===s.toast.type},!0),function(){return a()?S(s.toast.message,s.toast):d(Q,{get toast(){return s.toast},get position(){return s.toast.position||O.position}})})),p(function(t){var e=f(),r=s.toast.visible?X:"";return t._v$=y(i,e,t._v$),r!==t._v$2&&u(i,t._v$2=r),t},{_v$:void 0,_v$2:void 0}),i},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=function(n){var t,a,i,s,e="".concat(C," 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards"),r="".concat(R," 1s cubic-bezier(0, 0, 0.2, 1) forwards"),o="".concat(z," 0.2s ease-out forwards");return t=tt.cloneNode(!0),a=t.firstChild,i=a.nextSibling,s=i.nextSibling,t.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"),i.style.setProperty("animation",r),i.style.setProperty("transform-origin","50% 50%"),i.style.setProperty("animation-delay","250ms"),s.style.setProperty("animation",o),s.style.setProperty("stroke-dasharray","22"),s.style.setProperty("stroke-dashoffset","22"),s.style.setProperty("animation-delay","250ms"),p(function(t){var e=n.primary||"#34C759",r=n.primary||"#34C759",o=n.secondary||"#FCFCFC";return e!==t._v$&&g(a,"fill",t._v$=e),r!==t._v$2&&g(i,"fill",t._v$2=r),o!==t._v$3&&g(s,"stroke",t._v$3=o),t},{_v$:void 0,_v$2:void 0,_v$3:void 0}),t},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=function(a){var t,i,s,c,l,e="".concat(C," 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards"),r="".concat(R," 1s cubic-bezier(0, 0, 0.2, 1) forwards"),o="".concat(z," 0.1s ease-in forwards"),n="".concat(B," 0.2s ease-out forwards");return t=ot.cloneNode(!0),i=t.firstChild,s=i.nextSibling,c=s.nextSibling,l=c.nextSibling,t.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"),s.style.setProperty("animation",r),s.style.setProperty("transform-origin","50% 50%"),s.style.setProperty("animation-delay","320ms"),c.style.setProperty("animation",o),c.style.setProperty("stroke-dasharray","9"),c.style.setProperty("stroke-dashoffset","9"),c.style.setProperty("animation-delay","200ms"),l.style.setProperty("animation",n),l.style.setProperty("animation-delay","320ms"),l.style.setProperty("opacity","0"),p(function(t){var e=a.primary||"#FF3B30",r=a.primary||"#FF3B30",o=a.secondary||"#FFFFFF",n=a.secondary||"#FFFFFF";return e!==t._v$&&g(i,"fill",t._v$=e),r!==t._v$2&&g(s,"fill",t._v$2=r),o!==t._v$3&&g(c,"stroke",t._v$3=o),n!==t._v$4&&g(l,"fill",t._v$4=n),t},{_v$:void 0,_v$2:void 0,_v$3:void 0,_v$4:void 0}),t},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=function(o){var t,n,a,e="".concat(j," 0.75s linear infinite");return t=rt.cloneNode(!0),n=t.firstChild,a=n.nextSibling,t.style.setProperty("overflow","visible"),a.style.setProperty("animation",e),a.style.setProperty("transform-origin","50% 50%"),p(function(t){var e=o.primary||"#E5E7EB",r=o.secondary||"#4b5563";return e!==t._v$&&g(n,"stroke",t._v$=e),r!==t._v$2&&g(a,"stroke",t._v$2=r),t},{_v$:void 0,_v$2:void 0}),t};export{$ as ActionType,H as Toaster,S as resolveValue,q as toast}; | ||
| import { createSignal, createEffect, onCleanup, For, Switch, Match, onMount } from 'solid-js'; | ||
| import { createStore, produce } from 'solid-js/store'; | ||
| import { insert, createComponent, effect, style, className, template, mergeProps, spread, memo, setAttribute } from 'solid-js/web'; | ||
| import { keyframes, css } from 'goober'; | ||
| const isFunction = valOrFunction => typeof valOrFunction === 'function'; | ||
| const resolveValue = (valOrFunction, arg) => isFunction(valOrFunction) ? valOrFunction(arg) : valOrFunction; | ||
| let ActionType; | ||
| (function (ActionType) { | ||
| ActionType[ActionType["ADD_TOAST"] = 0] = "ADD_TOAST"; | ||
| ActionType[ActionType["UPDATE_TOAST"] = 1] = "UPDATE_TOAST"; | ||
| ActionType[ActionType["UPSERT_TOAST"] = 2] = "UPSERT_TOAST"; | ||
| ActionType[ActionType["DISMISS_TOAST"] = 3] = "DISMISS_TOAST"; | ||
| ActionType[ActionType["REMOVE_TOAST"] = 4] = "REMOVE_TOAST"; | ||
| ActionType[ActionType["START_PAUSE"] = 5] = "START_PAUSE"; | ||
| ActionType[ActionType["END_PAUSE"] = 6] = "END_PAUSE"; | ||
| })(ActionType || (ActionType = {})); | ||
| const [store, setStore] = createStore({ | ||
| toasts: [], | ||
| pausedAt: undefined | ||
| }); | ||
| const createTimers = () => { | ||
| 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); | ||
| if (durationLeft <= 0) { | ||
| if (toast.visible) { | ||
| dispatch({ | ||
| type: ActionType.DISMISS_TOAST, | ||
| toastId: toast.id | ||
| }); | ||
| } | ||
| return; | ||
| } | ||
| return setTimeout(() => { | ||
| dispatch({ | ||
| type: ActionType.DISMISS_TOAST, | ||
| toastId: toast.id | ||
| }); | ||
| }, durationLeft); | ||
| }); | ||
| return timers; | ||
| }; | ||
| const removalQueue = new Map(); | ||
| const scheduleRemoval = (toastId, unmountDelay) => { | ||
| if (removalQueue.has(toastId)) return; | ||
| const timeout = setTimeout(() => { | ||
| removalQueue.delete(toastId); | ||
| dispatch({ | ||
| type: ActionType.REMOVE_TOAST, | ||
| toastId | ||
| }); | ||
| }, unmountDelay); | ||
| removalQueue.set(toastId, timeout); | ||
| }; | ||
| const unscheduleRemoval = toastId => { | ||
| const timeout = removalQueue.get(toastId); | ||
| removalQueue.delete(toastId); | ||
| if (timeout) clearTimeout(timeout); | ||
| }; | ||
| const dispatch = action => { | ||
| switch (action.type) { | ||
| case ActionType.ADD_TOAST: | ||
| setStore('toasts', t => { | ||
| const toasts = t; | ||
| return [action.toast, ...toasts]; | ||
| }); | ||
| break; | ||
| case ActionType.DISMISS_TOAST: | ||
| const { | ||
| toastId | ||
| } = action; | ||
| const toasts = store.toasts; | ||
| if (toastId) { | ||
| const toastToRemove = toasts.find(t => t.id === toastId); | ||
| if (toastToRemove) scheduleRemoval(toastId, toastToRemove.unmountDelay); | ||
| } else { | ||
| toasts.forEach(t => { | ||
| scheduleRemoval(t.id, t.unmountDelay); | ||
| }); | ||
| } | ||
| setStore('toasts', t => t.id === toastId, produce(t => t.visible = false)); | ||
| break; | ||
| case ActionType.REMOVE_TOAST: | ||
| if (!action.toastId) { | ||
| setStore('toasts', []); | ||
| break; | ||
| } | ||
| setStore('toasts', t => { | ||
| const toasts = t; | ||
| return toasts.filter(t => t.id !== action.toastId); | ||
| }); | ||
| break; | ||
| case ActionType.UPDATE_TOAST: | ||
| if (action.toast.id) { | ||
| unscheduleRemoval(action.toast.id); | ||
| } | ||
| setStore('toasts', t => t.id === action.toast.id, t => { | ||
| const toast = t; | ||
| 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 | ||
| }); | ||
| break; | ||
| case ActionType.START_PAUSE: | ||
| setStore('pausedAt', Date.now()); | ||
| break; | ||
| case ActionType.END_PAUSE: | ||
| const pauseInterval = action.time - (store.pausedAt || 0); | ||
| setStore(produce(s => { | ||
| s.pausedAt = undefined; | ||
| s.toasts.forEach(t => { | ||
| t.pauseDuration += pauseInterval; | ||
| }); | ||
| })); | ||
| break; | ||
| } | ||
| }; | ||
| const defaultTimeouts = { | ||
| blank: 4000, | ||
| error: 4000, | ||
| success: 2000, | ||
| loading: Infinity, | ||
| custom: 4000 | ||
| }; | ||
| const defaultToastOptions = { | ||
| id: '', | ||
| icon: '', | ||
| unmountDelay: 500, | ||
| duration: 3000, | ||
| ariaProps: { | ||
| role: 'status', | ||
| 'aria-live': 'polite' | ||
| }, | ||
| className: '', | ||
| style: {}, | ||
| position: 'top-right', | ||
| iconTheme: {} | ||
| }; | ||
| const defaultToasterOptions = { | ||
| position: 'top-right', | ||
| toastOptions: defaultToastOptions, | ||
| gutter: 8, | ||
| containerStyle: {}, | ||
| containerClassName: '' | ||
| }; | ||
| const defaultContainerPadding = '16px'; | ||
| const defaultContainerStyle = { | ||
| position: 'fixed', | ||
| 'z-index': 9999, | ||
| top: defaultContainerPadding, | ||
| bottom: defaultContainerPadding, | ||
| left: defaultContainerPadding, | ||
| right: defaultContainerPadding, | ||
| "pointer-events": 'none' | ||
| }; | ||
| const generateID = (() => { | ||
| let count = 0; | ||
| return () => String(++count); | ||
| })(); | ||
| const mergeContainerOptions = props => { | ||
| setDefaultOpts(s => ({ | ||
| containerClassName: props.containerClassName ?? s.containerClassName, | ||
| containerStyle: props.containerStyle ?? s.containerStyle, | ||
| gutter: props.gutter ?? s.gutter, | ||
| position: props.position ?? s.position, | ||
| toastOptions: { ...props.toastOptions | ||
| } | ||
| })); | ||
| }; | ||
| const getToastWrapperStyles = (position, offset) => { | ||
| const top = position.includes('top'); | ||
| const verticalStyle = top ? { | ||
| top: 0 | ||
| } : { | ||
| bottom: 0 | ||
| }; | ||
| const horizontalStyle = position.includes('center') ? { | ||
| 'justify-content': 'center' | ||
| } : position.includes('right') ? { | ||
| 'justify-content': 'flex-end' | ||
| } : {}; | ||
| return { | ||
| left: 0, | ||
| right: 0, | ||
| display: 'flex', | ||
| position: 'absolute', | ||
| transition: `all 230ms cubic-bezier(.21,1.02,.73,1)`, | ||
| transform: `translateY(${offset * (top ? 1 : -1)}px)`, | ||
| ...verticalStyle, | ||
| ...horizontalStyle | ||
| }; | ||
| }; | ||
| const updateToastHeight = (ref, toast) => { | ||
| const boundingRect = ref.getBoundingClientRect(); | ||
| if (boundingRect.height !== toast.height) { | ||
| dispatch({ | ||
| type: ActionType.UPDATE_TOAST, | ||
| toast: { | ||
| id: toast.id, | ||
| height: boundingRect.height | ||
| } | ||
| }); | ||
| } | ||
| }; | ||
| const getWrapperYAxisOffset = (toast, position) => { | ||
| const { | ||
| toasts | ||
| } = store; | ||
| const gutter = defaultOpts().gutter || defaultToasterOptions.gutter || 8; | ||
| 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); | ||
| return offset; | ||
| }; | ||
| const getToastYDirection = (toast, defaultPos) => { | ||
| const position = toast.position || defaultPos; | ||
| const top = position.includes('top'); | ||
| return top ? 1 : -1; | ||
| }; | ||
| const toastBarBase = { | ||
| 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' | ||
| }; | ||
| const entranceAnimation = direction => ` | ||
| 0% {transform: translate3d(0,${direction * -200}%,0) scale(.6); opacity:.5;} | ||
| 100% {transform: translate3d(0,0,0) scale(1); opacity:1;} | ||
| `; | ||
| const exitAnimation = direction => ` | ||
| 0% {transform: translate3d(0,0,-1px) scale(1); opacity:1;} | ||
| 100% {transform: translate3d(0,${direction * -150}%,-1px) scale(.4); opacity:0;} | ||
| `; | ||
| const messageContainer = { | ||
| display: 'flex', | ||
| 'align-items': 'center', | ||
| flex: '1 1 auto', | ||
| margin: '4px 10px', | ||
| 'white-space': 'pre-line' | ||
| }; | ||
| const iconContainer = { | ||
| 'flex-shrink': 0, | ||
| 'min-width': '20px', | ||
| 'min-height': '20px', | ||
| display: 'flex', | ||
| 'align-items': 'center', | ||
| 'justify-content': 'center', | ||
| 'text-align': 'center' | ||
| }; | ||
| const iconCircle = keyframes`from{transform:scale(0)rotate(45deg);opacity:0;}to{transform:scale(1)rotate(45deg);opacity:1;}`; | ||
| const pingCircle = keyframes`75%,100%{transform: scale(2.25);opacity:0;}`; | ||
| const icon = keyframes`to{stroke-dashoffset: 0;}`; | ||
| const infoDot = keyframes`0%{transform:translate3d(0,0,0);opacity:1;}100%{transform:translate3d(0,7px,0)scale(1);opacity:1;}`; | ||
| const rotate = keyframes`from{transform: rotate(0deg);}to{transform: rotate(360deg);}`; | ||
| const [defaultOpts, setDefaultOpts] = createSignal(defaultToasterOptions); | ||
| const createToast = (message, type = 'blank', options) => ({ ...defaultToastOptions, | ||
| ...defaultOpts().toastOptions, | ||
| ...options, | ||
| type, | ||
| message, | ||
| pauseDuration: 0, | ||
| createdAt: Date.now(), | ||
| visible: true, | ||
| id: options.id || generateID(), | ||
| style: { ...defaultToastOptions.style, | ||
| ...defaultOpts().toastOptions?.style, | ||
| ...options.style | ||
| }, | ||
| duration: options.duration || defaultOpts().toastOptions?.duration || defaultTimeouts[type], | ||
| 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 toast = createToast(message, type, { ...existingToast, | ||
| duration: undefined, | ||
| ...options | ||
| }); | ||
| dispatch({ | ||
| type: ActionType.UPSERT_TOAST, | ||
| toast | ||
| }); | ||
| return toast.id; | ||
| }; | ||
| const toast = (message, opts) => createToastCreator('blank')(message, opts); | ||
| toast.error = createToastCreator('error'); | ||
| toast.success = createToastCreator('success'); | ||
| toast.loading = createToastCreator('loading'); | ||
| toast.custom = createToastCreator('custom'); | ||
| toast.dismiss = toastId => { | ||
| dispatch({ | ||
| type: ActionType.DISMISS_TOAST, | ||
| toastId | ||
| }); | ||
| }; | ||
| toast.promise = (promise, msgs, opts) => { | ||
| const id = toast.loading(msgs.loading, { ...opts | ||
| }); | ||
| promise.then(p => { | ||
| toast.success(resolveValue(msgs.success, p), { | ||
| id, | ||
| ...opts | ||
| }); | ||
| return p; | ||
| }).catch(e => { | ||
| toast.error(resolveValue(msgs.error, e), { | ||
| id, | ||
| ...opts | ||
| }); | ||
| }); | ||
| return promise; | ||
| }; | ||
| toast.remove = toastId => { | ||
| dispatch({ | ||
| type: ActionType.REMOVE_TOAST, | ||
| toastId | ||
| }); | ||
| }; | ||
| const _tmpl$$5 = /*#__PURE__*/template(`<div></div>`, 2); | ||
| const Toaster = props => { | ||
| createEffect(() => { | ||
| mergeContainerOptions(props); | ||
| }); | ||
| createEffect(() => { | ||
| const timers = createTimers(); | ||
| onCleanup(() => { | ||
| if (!timers) return; | ||
| timers.forEach(timer => timer && clearTimeout(timer)); | ||
| }); | ||
| }); | ||
| return (() => { | ||
| const _el$ = _tmpl$$5.cloneNode(true); | ||
| insert(_el$, createComponent(For, { | ||
| get each() { | ||
| return store.toasts; | ||
| }, | ||
| children: toast => createComponent(ToastContainer, { | ||
| toast: toast | ||
| }) | ||
| })); | ||
| effect(_p$ => { | ||
| const _v$ = { ...defaultContainerStyle, | ||
| ...props.containerStyle | ||
| }, | ||
| _v$2 = props.containerClassName; | ||
| _p$._v$ = style(_el$, _v$, _p$._v$); | ||
| _v$2 !== _p$._v$2 && className(_el$, _p$._v$2 = _v$2); | ||
| return _p$; | ||
| }, { | ||
| _v$: undefined, | ||
| _v$2: undefined | ||
| }); | ||
| return _el$; | ||
| })(); | ||
| }; | ||
| const _tmpl$$4 = /*#__PURE__*/template(`<div></div>`, 2), | ||
| _tmpl$2 = /*#__PURE__*/template(`<div><div></div></div>`, 4); | ||
| const ToastBar = props => { | ||
| const [animation, setAnimation] = createSignal(''); | ||
| createEffect(() => { | ||
| props.toast.visible ? setAnimation(`${keyframes(entranceAnimation(getToastYDirection(props.toast, props.position)))} 0.35s cubic-bezier(.21,1.02,.73,1) forwards`) : setAnimation(`${keyframes(exitAnimation(getToastYDirection(props.toast, props.position)))} 0.4s forwards cubic-bezier(.06,.71,.55,1)`); | ||
| }); | ||
| return (() => { | ||
| const _el$ = _tmpl$2.cloneNode(true), | ||
| _el$6 = _el$.firstChild; | ||
| insert(_el$, createComponent(Switch, { | ||
| get children() { | ||
| return [createComponent(Match, { | ||
| get when() { | ||
| return props.toast.icon; | ||
| }, | ||
| get children() { | ||
| const _el$2 = _tmpl$$4.cloneNode(true); | ||
| insert(_el$2, () => props.toast.icon); | ||
| effect(_$p => style(_el$2, iconContainer, _$p)); | ||
| return _el$2; | ||
| } | ||
| }), createComponent(Match, { | ||
| get when() { | ||
| return props.toast.type === 'loading'; | ||
| }, | ||
| get children() { | ||
| const _el$3 = _tmpl$$4.cloneNode(true); | ||
| insert(_el$3, createComponent(Loader, mergeProps(() => props.toast.iconTheme))); | ||
| effect(_$p => style(_el$3, iconContainer, _$p)); | ||
| return _el$3; | ||
| } | ||
| }), createComponent(Match, { | ||
| get when() { | ||
| return props.toast.type === 'success'; | ||
| }, | ||
| get children() { | ||
| const _el$4 = _tmpl$$4.cloneNode(true); | ||
| insert(_el$4, createComponent(Success, mergeProps(() => props.toast.iconTheme))); | ||
| effect(_$p => style(_el$4, iconContainer, _$p)); | ||
| return _el$4; | ||
| } | ||
| }), createComponent(Match, { | ||
| get when() { | ||
| return props.toast.type === 'error'; | ||
| }, | ||
| get children() { | ||
| const _el$5 = _tmpl$$4.cloneNode(true); | ||
| insert(_el$5, createComponent(Error, mergeProps(() => props.toast.iconTheme))); | ||
| effect(_$p => style(_el$5, iconContainer, _$p)); | ||
| return _el$5; | ||
| } | ||
| })]; | ||
| } | ||
| }), _el$6); | ||
| spread(_el$6, () => props.toast.ariaProps, false, true); | ||
| insert(_el$6, () => resolveValue(props.toast.message, props.toast)); | ||
| effect(_p$ => { | ||
| const _v$ = props.toast.className, | ||
| _v$2 = { ...toastBarBase, | ||
| animation: animation(), | ||
| ...props.toast.style | ||
| }, | ||
| _v$3 = messageContainer; | ||
| _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$); | ||
| _p$._v$2 = style(_el$, _v$2, _p$._v$2); | ||
| _p$._v$3 = style(_el$6, _v$3, _p$._v$3); | ||
| return _p$; | ||
| }, { | ||
| _v$: undefined, | ||
| _v$2: undefined, | ||
| _v$3: undefined | ||
| }); | ||
| return _el$; | ||
| })(); | ||
| }; | ||
| const _tmpl$$3 = /*#__PURE__*/template(`<div></div>`, 2); | ||
| const activeClass = css`z-index: 9999;> * { pointer-events: auto;}`; | ||
| const ToastContainer = props => { | ||
| const calculatePosition = () => { | ||
| const position = props.toast.position || defaultToastOptions.position; | ||
| const offset = getWrapperYAxisOffset(props.toast, position); | ||
| const positionStyle = getToastWrapperStyles(position, offset); | ||
| return positionStyle; | ||
| }; | ||
| const [positionStyle, setPositionStyle] = createSignal(calculatePosition()); | ||
| createEffect(() => { | ||
| const newStyles = calculatePosition(); | ||
| setPositionStyle(newStyles); | ||
| }); | ||
| let el = undefined; | ||
| onMount(() => { | ||
| if (el) { | ||
| updateToastHeight(el, props.toast); | ||
| } | ||
| }); | ||
| return (() => { | ||
| const _el$ = _tmpl$$3.cloneNode(true); | ||
| _el$.addEventListener("mouseleave", () => dispatch({ | ||
| type: ActionType.END_PAUSE, | ||
| time: Date.now() | ||
| })); | ||
| _el$.addEventListener("mouseenter", () => dispatch({ | ||
| type: ActionType.START_PAUSE, | ||
| time: Date.now() | ||
| })); | ||
| const _ref$ = el; | ||
| typeof _ref$ === "function" ? _ref$(_el$) : el = _el$; | ||
| insert(_el$, (() => { | ||
| const _c$ = memo(() => props.toast.type === 'custom', true); | ||
| return () => _c$() ? resolveValue(props.toast.message, props.toast) : createComponent(ToastBar, { | ||
| get toast() { | ||
| return props.toast; | ||
| }, | ||
| get position() { | ||
| return props.toast.position || defaultToastOptions.position; | ||
| } | ||
| }); | ||
| })()); | ||
| effect(_p$ => { | ||
| const _v$ = positionStyle(), | ||
| _v$2 = props.toast.visible ? activeClass : ''; | ||
| _p$._v$ = style(_el$, _v$, _p$._v$); | ||
| _v$2 !== _p$._v$2 && className(_el$, _p$._v$2 = _v$2); | ||
| return _p$; | ||
| }, { | ||
| _v$: undefined, | ||
| _v$2: undefined | ||
| }); | ||
| return _el$; | ||
| })(); | ||
| }; | ||
| const _tmpl$$2 = /*#__PURE__*/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); | ||
| const Success = props => { | ||
| const mainCircle = `${iconCircle} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards`; | ||
| const secondaryCircle = `${pingCircle} 1s cubic-bezier(0, 0, 0.2, 1) forwards`; | ||
| const check = `${icon} 0.2s ease-out forwards`; | ||
| return (() => { | ||
| const _el$ = _tmpl$$2.cloneNode(true), | ||
| _el$2 = _el$.firstChild, | ||
| _el$3 = _el$2.nextSibling, | ||
| _el$4 = _el$3.nextSibling; | ||
| _el$.style.setProperty("overflow", "visible"); | ||
| _el$2.style.setProperty("animation", mainCircle); | ||
| _el$2.style.setProperty("transform-origin", "50% 50%"); | ||
| _el$2.style.setProperty("animation-delay", "100ms"); | ||
| _el$2.style.setProperty("opacity", "0"); | ||
| _el$3.style.setProperty("animation", secondaryCircle); | ||
| _el$3.style.setProperty("transform-origin", "50% 50%"); | ||
| _el$3.style.setProperty("animation-delay", "250ms"); | ||
| _el$4.style.setProperty("animation", check); | ||
| _el$4.style.setProperty("stroke-dasharray", "22"); | ||
| _el$4.style.setProperty("stroke-dashoffset", "22"); | ||
| _el$4.style.setProperty("animation-delay", "250ms"); | ||
| effect(_p$ => { | ||
| const _v$ = props.primary || '#34C759', | ||
| _v$2 = props.primary || '#34C759', | ||
| _v$3 = props.secondary || '#FCFCFC'; | ||
| _v$ !== _p$._v$ && setAttribute(_el$2, "fill", _p$._v$ = _v$); | ||
| _v$2 !== _p$._v$2 && setAttribute(_el$3, "fill", _p$._v$2 = _v$2); | ||
| _v$3 !== _p$._v$3 && setAttribute(_el$4, "stroke", _p$._v$3 = _v$3); | ||
| return _p$; | ||
| }, { | ||
| _v$: undefined, | ||
| _v$2: undefined, | ||
| _v$3: undefined | ||
| }); | ||
| return _el$; | ||
| })(); | ||
| }; | ||
| const _tmpl$$1 = /*#__PURE__*/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); | ||
| const Error = props => { | ||
| const mainCircle = `${iconCircle} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards`; | ||
| const secondaryCircle = `${pingCircle} 1s cubic-bezier(0, 0, 0.2, 1) forwards`; | ||
| const infoDash = `${icon} 0.1s ease-in forwards`; | ||
| const infoCircle = `${infoDot} 0.2s ease-out forwards`; | ||
| return (() => { | ||
| const _el$ = _tmpl$$1.cloneNode(true), | ||
| _el$2 = _el$.firstChild, | ||
| _el$3 = _el$2.nextSibling, | ||
| _el$4 = _el$3.nextSibling, | ||
| _el$5 = _el$4.nextSibling; | ||
| _el$.style.setProperty("overflow", "visible"); | ||
| _el$2.style.setProperty("animation", mainCircle); | ||
| _el$2.style.setProperty("transform-origin", "50% 50%"); | ||
| _el$2.style.setProperty("animation-delay", "100ms"); | ||
| _el$2.style.setProperty("opacity", "0"); | ||
| _el$3.style.setProperty("animation", secondaryCircle); | ||
| _el$3.style.setProperty("transform-origin", "50% 50%"); | ||
| _el$3.style.setProperty("animation-delay", "320ms"); | ||
| _el$4.style.setProperty("animation", infoDash); | ||
| _el$4.style.setProperty("stroke-dasharray", "9"); | ||
| _el$4.style.setProperty("stroke-dashoffset", "9"); | ||
| _el$4.style.setProperty("animation-delay", "200ms"); | ||
| _el$5.style.setProperty("animation", infoCircle); | ||
| _el$5.style.setProperty("animation-delay", "320ms"); | ||
| _el$5.style.setProperty("opacity", "0"); | ||
| effect(_p$ => { | ||
| const _v$ = props.primary || "#FF3B30", | ||
| _v$2 = props.primary || "#FF3B30", | ||
| _v$3 = props.secondary || "#FFFFFF", | ||
| _v$4 = props.secondary || "#FFFFFF"; | ||
| _v$ !== _p$._v$ && setAttribute(_el$2, "fill", _p$._v$ = _v$); | ||
| _v$2 !== _p$._v$2 && setAttribute(_el$3, "fill", _p$._v$2 = _v$2); | ||
| _v$3 !== _p$._v$3 && setAttribute(_el$4, "stroke", _p$._v$3 = _v$3); | ||
| _v$4 !== _p$._v$4 && setAttribute(_el$5, "fill", _p$._v$4 = _v$4); | ||
| return _p$; | ||
| }, { | ||
| _v$: undefined, | ||
| _v$2: undefined, | ||
| _v$3: undefined, | ||
| _v$4: undefined | ||
| }); | ||
| return _el$; | ||
| })(); | ||
| }; | ||
| const _tmpl$ = /*#__PURE__*/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); | ||
| const Loader = props => { | ||
| const animation = `${rotate} 0.75s linear infinite`; | ||
| return (() => { | ||
| const _el$ = _tmpl$.cloneNode(true), | ||
| _el$2 = _el$.firstChild, | ||
| _el$3 = _el$2.nextSibling; | ||
| _el$.style.setProperty("overflow", "visible"); | ||
| _el$3.style.setProperty("animation", animation); | ||
| _el$3.style.setProperty("transform-origin", "50% 50%"); | ||
| effect(_p$ => { | ||
| const _v$ = props.primary || "#E5E7EB", | ||
| _v$2 = props.secondary || "#4b5563"; | ||
| _v$ !== _p$._v$ && setAttribute(_el$2, "stroke", _p$._v$ = _v$); | ||
| _v$2 !== _p$._v$2 && setAttribute(_el$3, "stroke", _p$._v$2 = _v$2); | ||
| return _p$; | ||
| }, { | ||
| _v$: undefined, | ||
| _v$2: undefined | ||
| }); | ||
| return _el$; | ||
| })(); | ||
| }; | ||
| export { ActionType, Toaster, resolveValue, toast }; | ||
| //# sourceMappingURL=index.js.map |
| { | ||
| "name": "solid-toast", | ||
| "version": "0.1.7-alpha.9", | ||
| "version": "0.1.7-alpha.10", | ||
| "description": "Customizable Toast Notifications for SolidJS", | ||
@@ -5,0 +5,0 @@ "source": "./src/index.tsx", |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by21.61%
197943
- Lines of code
- increased by79.39%
2533
- Number of low quality alerts
- decreased by-50%
1
No dependency changes