feather-toast-vue 1.0.7 → 1.0.9

package/dist/feather-toast.es.js

@@ -327,11 +327,15 @@ var N = M, P = {
 			_: 2
 		}, 1032, ["name"])], 2)) : i("", !0)], 64))), 64))]));
 	}
-}), [["__scopeId", "data-v-3eb39527"]]), W = "feather-toast-root", G = { install(e) {
+}), [["__scopeId", "data-v-3eb39527"]]), W = ":root{--toast-bg:#fff;--toast-border:#e4e4e7;--toast-text:#18181b;--toast-text-muted:#71717a;--toast-shadow:0 2px 8px #0000000f, 0 1px 2px #0000000a;--toast-shadow-hover:0 4px 16px #0000001a, 0 2px 4px #0000000f;--toast-radius:10px;--toast-width:360px;--toast-gap:8px;--toast-z:99999;--toast-c-success:#16a34a;--toast-c-error:#dc2626;--toast-c-warning:#d97706;--toast-c-info:#2563eb;--toast-c-muted:#71717a;--ease-spring:cubic-bezier(.16, 1, .3, 1);--ease-out:cubic-bezier(.4, 0, .2, 1);--ease-exit:cubic-bezier(.4, 0, 1, 1)}.toast-viewport{z-index:var(--toast-z);gap:var(--toast-gap);pointer-events:none;flex-direction:column;width:fit-content;max-height:100svh;padding:16px;display:flex;position:fixed;overflow:visible}.toast-viewport--top-right{align-items:flex-end;top:0;right:0}.toast-viewport--top-left{align-items:flex-start;top:0;left:0}.toast-viewport--top-center{align-items:center;top:0;left:50%;transform:translate(-50%)}.toast-viewport--bottom-right{flex-direction:column-reverse;align-items:flex-end;bottom:0;right:0}.toast-viewport--bottom-left{flex-direction:column-reverse;align-items:flex-start;bottom:0;left:0}.toast-viewport--bottom-center{flex-direction:column-reverse;align-items:center;bottom:0;left:50%;transform:translate(-50%)}.toast-card{width:var(--toast-width);background:var(--toast-bg);border:1px solid var(--toast-border);border-radius:var(--toast-radius);max-width:calc(100vw - 32px);box-shadow:var(--toast-shadow);pointer-events:auto;cursor:default;-webkit-user-select:none;user-select:none;touch-action:pan-y;align-items:flex-start;gap:10px;padding:14px;transition:box-shadow .18s;display:flex;position:relative}.toast-card:hover{box-shadow:var(--toast-shadow-hover)}.toast-icon{flex-shrink:0;width:16px;height:16px;margin-top:1px}.toast-icon--success{color:var(--toast-c-success)}.toast-icon--error{color:var(--toast-c-error)}.toast-icon--warning{color:var(--toast-c-warning)}.toast-icon--info{color:var(--toast-c-info)}@keyframes toast-spin{to{transform:rotate(360deg)}}.toast-spinner{border:1.5px solid #e4e4e7;border-top-color:var(--toast-c-muted);border-radius:50%;flex-shrink:0;width:16px;height:16px;margin-top:1px;animation:.7s linear infinite toast-spin}.toast-body{flex:1;min-width:0}.toast-title{color:var(--toast-text);letter-spacing:-.01em;margin:0;font-size:13.5px;font-weight:600;line-height:1.45}.toast-description{color:var(--toast-text-muted);margin:2px 0 0;font-size:13px;font-weight:400;line-height:1.5}.toast-close{color:#a1a1aa;cursor:pointer;opacity:0;background:0 0;border:none;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:22px;height:22px;margin:-3px -3px 0 0;padding:0;transition:opacity .15s,background .15s,color .15s;display:flex}.toast-card:hover .toast-close{opacity:1}.toast-close:hover{color:var(--toast-text);background:#f4f4f5}.toast-close svg{width:12px;height:12px}.toast-action-btn{color:var(--toast-text);border:1px solid var(--toast-border);cursor:pointer;white-space:nowrap;background:0 0;border-radius:6px;flex-shrink:0;align-self:center;padding:4px 11px;font-family:inherit;font-size:12px;font-weight:500;line-height:1.4;transition:background .15s,border-color .15s}.toast-action-btn:hover{background:#f4f4f5;border-color:#d4d4d8}.toast-slide-right-move,.toast-slide-left-move,.toast-slide-down-move,.toast-slide-up-move{transition:transform .35s var(--ease-spring)}.toast-slide-right-enter-active{transition:opacity .4s var(--ease-spring), transform .4s var(--ease-spring)}.toast-slide-right-leave-active{transition:opacity .22s var(--ease-exit), transform .22s var(--ease-exit);pointer-events:none;position:absolute;right:16px}.toast-slide-right-enter-from{opacity:0;transform:translate(calc(100% + 24px))scale(.94)}.toast-slide-right-enter-to,.toast-slide-right-leave-from{opacity:1;transform:translate(0)scale(1)}.toast-slide-right-leave-to{opacity:0;transform:translate(calc(100% + 24px))scale(.94)}.toast-slide-left-enter-active{transition:opacity .4s var(--ease-spring), transform .4s var(--ease-spring)}.toast-slide-left-leave-active{transition:opacity .22s var(--ease-exit), transform .22s var(--ease-exit);pointer-events:none;position:absolute;left:16px}.toast-slide-left-enter-from{opacity:0;transform:translate(calc(-100% - 24px))scale(.94)}.toast-slide-left-enter-to,.toast-slide-left-leave-from{opacity:1;transform:translate(0)scale(1)}.toast-slide-left-leave-to{opacity:0;transform:translate(calc(-100% - 24px))scale(.94)}.toast-slide-down-enter-active{transition:opacity .4s var(--ease-spring), transform .4s var(--ease-spring)}.toast-slide-down-leave-active{transition:opacity .22s var(--ease-exit), transform .22s var(--ease-exit);pointer-events:none;position:absolute}.toast-slide-down-enter-from{opacity:0;transform:translateY(-18px)scale(.94)}.toast-slide-down-enter-to,.toast-slide-down-leave-from{opacity:1;transform:translateY(0)scale(1)}.toast-slide-down-leave-to{opacity:0;transform:translateY(-18px)scale(.94)}.toast-slide-up-enter-active{transition:opacity .4s var(--ease-spring), transform .4s var(--ease-spring)}.toast-slide-up-leave-active{transition:opacity .22s var(--ease-exit), transform .22s var(--ease-exit);pointer-events:none;position:absolute}.toast-slide-up-enter-from{opacity:0;transform:translateY(18px)scale(.94)}.toast-slide-up-enter-to,.toast-slide-up-leave-from{opacity:1;transform:translateY(0)scale(1)}.toast-slide-up-leave-to{opacity:0;transform:translateY(18px)scale(.94)}@media (prefers-reduced-motion){.toast-card,.toast-slide-right-enter-active,.toast-slide-right-leave-active,.toast-slide-left-enter-active,.toast-slide-left-leave-active,.toast-slide-down-enter-active,.toast-slide-down-leave-active,.toast-slide-up-enter-active,.toast-slide-up-leave-active,.toast-slide-right-move,.toast-slide-left-move,.toast-slide-down-move,.toast-slide-up-move{transition:none!important;animation:none!important}}", G = "feather-toast-root", K = "feather-toast-style", q = { install(e) {
 	let t = M();
 	if (e.provide("toast", t), typeof document > "u") return;
-	let n = document.getElementById(W);
-	n || (n = document.createElement("div"), n.id = W, document.body.appendChild(n));
+	if (!document.getElementById(K)) {
+		let e = document.createElement("style");
+		e.id = K, e.textContent = W, document.head.appendChild(e);
+	}
+	let n = document.getElementById(G);
+	n || (n = document.createElement("div"), n.id = G, document.body.appendChild(n));
 	let r = s(U);
 	r.appContext = e._context, h(r, n);
 	let i = e.unmount;
@@ -340,4 +344,4 @@ var N = M, P = {
 	};
 } };
 //#endregion
-export { G as CreateFeatherToast, U as ToastContainer, M as useFeatherToast, N as useToast };
+export { q as CreateFeatherToast, U as ToastContainer, M as useFeatherToast, N as useToast };

package/dist/feather-toast.umd.cjs

@@ -1 +1 @@
-(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`vue`)):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.FeatherToast={},e.Vue))})(this,function(e,t){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var n=(0,t.ref)([]),r=0;function i(){return`toast-${++r}-${Date.now()}`}var a=5e3,o=`bottom-right`;function s(e){let t=i(),r=e.variant??`default`,s=e.duration??(r===`loading`?1/0:a),c={id:t,title:e.title,description:e.description,variant:r,position:e.position??o,duration:s,dismissible:e.dismissible??!0,action:e.action};return n.value.push(c),t}function c(e){let t=n.value.findIndex(t=>t.id===e);t>-1&&n.value.splice(t,1)}function l(){n.value.splice(0,n.value.length)}function u(e,t){let r=n.value.findIndex(t=>t.id===e);if(r>-1){let e=n.value[r];if(!e)return;n.value[r]={...e,...t,variant:t.variant??e.variant,position:t.position??e.position,duration:t.duration??e.duration,dismissible:t.dismissible??!0}}}function d(e){return s(e)}d.success=e=>s({...e,variant:`success`}),d.error=e=>s({...e,variant:`error`}),d.warning=e=>s({...e,variant:`warning`}),d.info=e=>s({...e,variant:`info`}),d.loading=e=>s({...e,variant:`loading`}),d.dismiss=c,d.dismissAll=l,d.promise=async function(e,t){let n=s({...t.loading,variant:`loading`});try{let r=await e,i=typeof t.success==`function`?t.success(r):t.success;return u(n,{...i,variant:`success`,dismissible:!0,duration:i.duration??a}),r}catch(e){let r=typeof t.error==`function`?t.error(e):t.error;throw u(n,{...r,variant:`error`,dismissible:!0,duration:r.duration??a}),e}};function f(){return{toast:d,toasts:n,dismiss:c,dismissAll:l}}var p=f,m={key:0,class:`toast-spinner`,"aria-hidden":`true`},h={key:1,class:`toast-icon toast-icon--success`,viewBox:`0 0 16 16`,fill:`none`,"aria-hidden":`true`},g={key:2,class:`toast-icon toast-icon--error`,viewBox:`0 0 16 16`,fill:`none`,"aria-hidden":`true`},_={key:3,class:`toast-icon toast-icon--warning`,viewBox:`0 0 16 16`,fill:`none`,"aria-hidden":`true`},v={key:4,class:`toast-icon toast-icon--info`,viewBox:`0 0 16 16`,fill:`none`,"aria-hidden":`true`},y={class:`toast-body`},b={key:0,class:`toast-title`},x={key:1,class:`toast-description`},S=(0,t.defineComponent)({__name:`Toast`,props:{toast:{}},emits:[`close`],setup(e,{emit:n}){let r=e,i=n,a=r.toast.duration,o=0,s=null;function c(e){e===1/0||e<=0||r.toast.variant===`loading`||(l(),o=Date.now(),a=e,s=setTimeout(()=>i(`close`,r.toast.id),e))}function l(){s&&=(clearTimeout(s),null)}function u(){s&&(l(),a=Math.max(500,a-(Date.now()-o)))}function d(){r.toast.variant!==`loading`&&c(a)}(0,t.watch)(()=>r.toast.variant,e=>{e!==`loading`&&(a=r.toast.duration,c(r.toast.duration))}),(0,t.onMounted)(()=>c(r.toast.duration)),(0,t.onBeforeUnmount)(()=>l());let f=!1,p=0,S=0,C=!1,w=(0,t.ref)({});function T(e){r.toast.dismissible&&(f=!0,p=e.clientX,S=e.clientY,C=!1,e.currentTarget.setPointerCapture(e.pointerId))}function E(e){if(!f||!r.toast.dismissible)return;let t=e.clientX-p,n=e.clientY-S;if(!C){if(Math.abs(t)<6&&Math.abs(n)<6)return;if(Math.abs(t)>=Math.abs(n))C=!0;else{f=!1;return}}u(),w.value={transform:`translateX(${t}px)`,opacity:Math.max(0,1-Math.abs(t)/240),transition:`none`}}function D(e){if(!f)return;let t=C;if(f=!1,C=!1,!t)return;let n=e.clientX-p;Math.abs(n)>110?(w.value={transform:`translateX(${n>0?500:-500}px)`,opacity:0,transition:`transform 0.22s ease, opacity 0.22s ease`},setTimeout(()=>i(`close`,r.toast.id),220)):(w.value={transform:`translateX(0)`,opacity:1,transition:`transform 0.36s cubic-bezier(0.16,1,0.3,1), opacity 0.2s ease`},setTimeout(()=>{w.value={},d()},370))}function O(){i(`close`,r.toast.id)}function k(){r.toast.action?.onClick()}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:(0,t.normalizeClass)([`toast-card`,`toast-card--${e.toast.variant}`]),style:(0,t.normalizeStyle)(w.value),role:`alert`,"aria-live":`polite`,onPointerdown:T,onPointermove:E,onPointerup:D,onPointercancel:D,onMouseenter:u,onMouseleave:d},[e.toast.variant===`loading`?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,m)):e.toast.variant===`success`?((0,t.openBlock)(),(0,t.createElementBlock)(`svg`,h,[...r[2]||=[(0,t.createElementVNode)(`circle`,{cx:`8`,cy:`8`,r:`7`,stroke:`currentColor`,"stroke-width":`1.5`},null,-1),(0,t.createElementVNode)(`path`,{d:`M5 8l2 2 4-4`,stroke:`currentColor`,"stroke-width":`1.5`,"stroke-linecap":`round`,"stroke-linejoin":`round`},null,-1)]])):e.toast.variant===`error`?((0,t.openBlock)(),(0,t.createElementBlock)(`svg`,g,[...r[3]||=[(0,t.createElementVNode)(`circle`,{cx:`8`,cy:`8`,r:`7`,stroke:`currentColor`,"stroke-width":`1.5`},null,-1),(0,t.createElementVNode)(`path`,{d:`M5.5 5.5l5 5M10.5 5.5l-5 5`,stroke:`currentColor`,"stroke-width":`1.5`,"stroke-linecap":`round`},null,-1)]])):e.toast.variant===`warning`?((0,t.openBlock)(),(0,t.createElementBlock)(`svg`,_,[...r[4]||=[(0,t.createElementVNode)(`path`,{d:`M8 2L14.5 13.5H1.5L8 2z`,stroke:`currentColor`,"stroke-width":`1.5`,"stroke-linejoin":`round`},null,-1),(0,t.createElementVNode)(`path`,{d:`M8 7v2.5`,stroke:`currentColor`,"stroke-width":`1.5`,"stroke-linecap":`round`},null,-1),(0,t.createElementVNode)(`circle`,{cx:`8`,cy:`11.5`,r:`0.75`,fill:`currentColor`},null,-1)]])):e.toast.variant===`info`?((0,t.openBlock)(),(0,t.createElementBlock)(`svg`,v,[...r[5]||=[(0,t.createElementVNode)(`circle`,{cx:`8`,cy:`8`,r:`7`,stroke:`currentColor`,"stroke-width":`1.5`},null,-1),(0,t.createElementVNode)(`path`,{d:`M8 7v4`,stroke:`currentColor`,"stroke-width":`1.5`,"stroke-linecap":`round`},null,-1),(0,t.createElementVNode)(`circle`,{cx:`8`,cy:`5`,r:`0.75`,fill:`currentColor`},null,-1)]])):(0,t.createCommentVNode)(``,!0),(0,t.createElementVNode)(`div`,y,[e.toast.title?((0,t.openBlock)(),(0,t.createElementBlock)(`p`,b,(0,t.toDisplayString)(e.toast.title),1)):(0,t.createCommentVNode)(``,!0),e.toast.description?((0,t.openBlock)(),(0,t.createElementBlock)(`p`,x,(0,t.toDisplayString)(e.toast.description),1)):(0,t.createCommentVNode)(``,!0)]),e.toast.action?((0,t.openBlock)(),(0,t.createElementBlock)(`button`,{key:5,class:`toast-action-btn`,onPointerdown:r[0]||=(0,t.withModifiers)(()=>{},[`stop`]),onClick:(0,t.withModifiers)(k,[`stop`])},(0,t.toDisplayString)(e.toast.action.label),33)):(0,t.createCommentVNode)(``,!0),e.toast.dismissible?((0,t.openBlock)(),(0,t.createElementBlock)(`button`,{key:6,class:`toast-close`,"aria-label":`Dismiss`,onPointerdown:r[1]||=(0,t.withModifiers)(()=>{},[`stop`]),onClick:(0,t.withModifiers)(O,[`stop`])},[...r[6]||=[(0,t.createElementVNode)(`svg`,{viewBox:`0 0 14 14`,fill:`none`,"aria-hidden":`true`},[(0,t.createElementVNode)(`path`,{d:`M2 2l10 10M12 2L2 12`,stroke:`currentColor`,"stroke-width":`1.5`,"stroke-linecap":`round`})],-1)]],32)):(0,t.createCommentVNode)(``,!0)],38))}}),C=((e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n})((0,t.defineComponent)({__name:`ToastContainer`,setup(e){let{toasts:n,dismiss:r}=p(),i=[`top-right`,`top-left`,`top-center`,`bottom-right`,`bottom-left`,`bottom-center`];function a(e){return n.value.filter(t=>t.position===e)}function o(e){return e.includes(`right`)?`toast-slide-right`:e.includes(`left`)?`toast-slide-left`:e.startsWith(`top`)?`toast-slide-down`:`toast-slide-up`}return(e,n)=>((0,t.openBlock)(),(0,t.createBlock)(t.Teleport,{to:`body`},[((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(i,e=>((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,{key:e},[a(e).length>0?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,class:(0,t.normalizeClass)([`toast-viewport`,`toast-viewport--${e}`]),"aria-live":`polite`,"aria-label":`Notifications`},[(0,t.createVNode)(t.TransitionGroup,{name:o(e),tag:`div`,class:`toast-tg`},{default:(0,t.withCtx)(()=>[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(a(e),e=>((0,t.openBlock)(),(0,t.createBlock)(S,{key:e.id,toast:e,onClose:(0,t.unref)(r)},null,8,[`toast`,`onClose`]))),128))]),_:2},1032,[`name`])],2)):(0,t.createCommentVNode)(``,!0)],64))),64))]))}}),[[`__scopeId`,`data-v-3eb39527`]]),w=`feather-toast-root`;e.CreateFeatherToast={install(e){let n=f();if(e.provide(`toast`,n),typeof document>`u`)return;let r=document.getElementById(w);r||(r=document.createElement(`div`),r.id=w,document.body.appendChild(r));let i=(0,t.createVNode)(C);i.appContext=e._context,(0,t.render)(i,r);let a=e.unmount;e.unmount=(...e)=>{(0,t.render)(null,r),r?.parentNode&&r.parentNode.removeChild(r),a(...e)}}},e.ToastContainer=C,e.useFeatherToast=f,e.useToast=p});
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`vue`)):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.FeatherToast={},e.Vue))})(this,function(e,t){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var n=(0,t.ref)([]),r=0;function i(){return`toast-${++r}-${Date.now()}`}var a=5e3,o=`bottom-right`;function s(e){let t=i(),r=e.variant??`default`,s=e.duration??(r===`loading`?1/0:a),c={id:t,title:e.title,description:e.description,variant:r,position:e.position??o,duration:s,dismissible:e.dismissible??!0,action:e.action};return n.value.push(c),t}function c(e){let t=n.value.findIndex(t=>t.id===e);t>-1&&n.value.splice(t,1)}function l(){n.value.splice(0,n.value.length)}function u(e,t){let r=n.value.findIndex(t=>t.id===e);if(r>-1){let e=n.value[r];if(!e)return;n.value[r]={...e,...t,variant:t.variant??e.variant,position:t.position??e.position,duration:t.duration??e.duration,dismissible:t.dismissible??!0}}}function d(e){return s(e)}d.success=e=>s({...e,variant:`success`}),d.error=e=>s({...e,variant:`error`}),d.warning=e=>s({...e,variant:`warning`}),d.info=e=>s({...e,variant:`info`}),d.loading=e=>s({...e,variant:`loading`}),d.dismiss=c,d.dismissAll=l,d.promise=async function(e,t){let n=s({...t.loading,variant:`loading`});try{let r=await e,i=typeof t.success==`function`?t.success(r):t.success;return u(n,{...i,variant:`success`,dismissible:!0,duration:i.duration??a}),r}catch(e){let r=typeof t.error==`function`?t.error(e):t.error;throw u(n,{...r,variant:`error`,dismissible:!0,duration:r.duration??a}),e}};function f(){return{toast:d,toasts:n,dismiss:c,dismissAll:l}}var p=f,m={key:0,class:`toast-spinner`,"aria-hidden":`true`},h={key:1,class:`toast-icon toast-icon--success`,viewBox:`0 0 16 16`,fill:`none`,"aria-hidden":`true`},g={key:2,class:`toast-icon toast-icon--error`,viewBox:`0 0 16 16`,fill:`none`,"aria-hidden":`true`},_={key:3,class:`toast-icon toast-icon--warning`,viewBox:`0 0 16 16`,fill:`none`,"aria-hidden":`true`},v={key:4,class:`toast-icon toast-icon--info`,viewBox:`0 0 16 16`,fill:`none`,"aria-hidden":`true`},y={class:`toast-body`},b={key:0,class:`toast-title`},x={key:1,class:`toast-description`},S=(0,t.defineComponent)({__name:`Toast`,props:{toast:{}},emits:[`close`],setup(e,{emit:n}){let r=e,i=n,a=r.toast.duration,o=0,s=null;function c(e){e===1/0||e<=0||r.toast.variant===`loading`||(l(),o=Date.now(),a=e,s=setTimeout(()=>i(`close`,r.toast.id),e))}function l(){s&&=(clearTimeout(s),null)}function u(){s&&(l(),a=Math.max(500,a-(Date.now()-o)))}function d(){r.toast.variant!==`loading`&&c(a)}(0,t.watch)(()=>r.toast.variant,e=>{e!==`loading`&&(a=r.toast.duration,c(r.toast.duration))}),(0,t.onMounted)(()=>c(r.toast.duration)),(0,t.onBeforeUnmount)(()=>l());let f=!1,p=0,S=0,C=!1,w=(0,t.ref)({});function T(e){r.toast.dismissible&&(f=!0,p=e.clientX,S=e.clientY,C=!1,e.currentTarget.setPointerCapture(e.pointerId))}function E(e){if(!f||!r.toast.dismissible)return;let t=e.clientX-p,n=e.clientY-S;if(!C){if(Math.abs(t)<6&&Math.abs(n)<6)return;if(Math.abs(t)>=Math.abs(n))C=!0;else{f=!1;return}}u(),w.value={transform:`translateX(${t}px)`,opacity:Math.max(0,1-Math.abs(t)/240),transition:`none`}}function D(e){if(!f)return;let t=C;if(f=!1,C=!1,!t)return;let n=e.clientX-p;Math.abs(n)>110?(w.value={transform:`translateX(${n>0?500:-500}px)`,opacity:0,transition:`transform 0.22s ease, opacity 0.22s ease`},setTimeout(()=>i(`close`,r.toast.id),220)):(w.value={transform:`translateX(0)`,opacity:1,transition:`transform 0.36s cubic-bezier(0.16,1,0.3,1), opacity 0.2s ease`},setTimeout(()=>{w.value={},d()},370))}function O(){i(`close`,r.toast.id)}function k(){r.toast.action?.onClick()}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:(0,t.normalizeClass)([`toast-card`,`toast-card--${e.toast.variant}`]),style:(0,t.normalizeStyle)(w.value),role:`alert`,"aria-live":`polite`,onPointerdown:T,onPointermove:E,onPointerup:D,onPointercancel:D,onMouseenter:u,onMouseleave:d},[e.toast.variant===`loading`?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,m)):e.toast.variant===`success`?((0,t.openBlock)(),(0,t.createElementBlock)(`svg`,h,[...r[2]||=[(0,t.createElementVNode)(`circle`,{cx:`8`,cy:`8`,r:`7`,stroke:`currentColor`,"stroke-width":`1.5`},null,-1),(0,t.createElementVNode)(`path`,{d:`M5 8l2 2 4-4`,stroke:`currentColor`,"stroke-width":`1.5`,"stroke-linecap":`round`,"stroke-linejoin":`round`},null,-1)]])):e.toast.variant===`error`?((0,t.openBlock)(),(0,t.createElementBlock)(`svg`,g,[...r[3]||=[(0,t.createElementVNode)(`circle`,{cx:`8`,cy:`8`,r:`7`,stroke:`currentColor`,"stroke-width":`1.5`},null,-1),(0,t.createElementVNode)(`path`,{d:`M5.5 5.5l5 5M10.5 5.5l-5 5`,stroke:`currentColor`,"stroke-width":`1.5`,"stroke-linecap":`round`},null,-1)]])):e.toast.variant===`warning`?((0,t.openBlock)(),(0,t.createElementBlock)(`svg`,_,[...r[4]||=[(0,t.createElementVNode)(`path`,{d:`M8 2L14.5 13.5H1.5L8 2z`,stroke:`currentColor`,"stroke-width":`1.5`,"stroke-linejoin":`round`},null,-1),(0,t.createElementVNode)(`path`,{d:`M8 7v2.5`,stroke:`currentColor`,"stroke-width":`1.5`,"stroke-linecap":`round`},null,-1),(0,t.createElementVNode)(`circle`,{cx:`8`,cy:`11.5`,r:`0.75`,fill:`currentColor`},null,-1)]])):e.toast.variant===`info`?((0,t.openBlock)(),(0,t.createElementBlock)(`svg`,v,[...r[5]||=[(0,t.createElementVNode)(`circle`,{cx:`8`,cy:`8`,r:`7`,stroke:`currentColor`,"stroke-width":`1.5`},null,-1),(0,t.createElementVNode)(`path`,{d:`M8 7v4`,stroke:`currentColor`,"stroke-width":`1.5`,"stroke-linecap":`round`},null,-1),(0,t.createElementVNode)(`circle`,{cx:`8`,cy:`5`,r:`0.75`,fill:`currentColor`},null,-1)]])):(0,t.createCommentVNode)(``,!0),(0,t.createElementVNode)(`div`,y,[e.toast.title?((0,t.openBlock)(),(0,t.createElementBlock)(`p`,b,(0,t.toDisplayString)(e.toast.title),1)):(0,t.createCommentVNode)(``,!0),e.toast.description?((0,t.openBlock)(),(0,t.createElementBlock)(`p`,x,(0,t.toDisplayString)(e.toast.description),1)):(0,t.createCommentVNode)(``,!0)]),e.toast.action?((0,t.openBlock)(),(0,t.createElementBlock)(`button`,{key:5,class:`toast-action-btn`,onPointerdown:r[0]||=(0,t.withModifiers)(()=>{},[`stop`]),onClick:(0,t.withModifiers)(k,[`stop`])},(0,t.toDisplayString)(e.toast.action.label),33)):(0,t.createCommentVNode)(``,!0),e.toast.dismissible?((0,t.openBlock)(),(0,t.createElementBlock)(`button`,{key:6,class:`toast-close`,"aria-label":`Dismiss`,onPointerdown:r[1]||=(0,t.withModifiers)(()=>{},[`stop`]),onClick:(0,t.withModifiers)(O,[`stop`])},[...r[6]||=[(0,t.createElementVNode)(`svg`,{viewBox:`0 0 14 14`,fill:`none`,"aria-hidden":`true`},[(0,t.createElementVNode)(`path`,{d:`M2 2l10 10M12 2L2 12`,stroke:`currentColor`,"stroke-width":`1.5`,"stroke-linecap":`round`})],-1)]],32)):(0,t.createCommentVNode)(``,!0)],38))}}),C=((e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n})((0,t.defineComponent)({__name:`ToastContainer`,setup(e){let{toasts:n,dismiss:r}=p(),i=[`top-right`,`top-left`,`top-center`,`bottom-right`,`bottom-left`,`bottom-center`];function a(e){return n.value.filter(t=>t.position===e)}function o(e){return e.includes(`right`)?`toast-slide-right`:e.includes(`left`)?`toast-slide-left`:e.startsWith(`top`)?`toast-slide-down`:`toast-slide-up`}return(e,n)=>((0,t.openBlock)(),(0,t.createBlock)(t.Teleport,{to:`body`},[((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(i,e=>((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,{key:e},[a(e).length>0?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,class:(0,t.normalizeClass)([`toast-viewport`,`toast-viewport--${e}`]),"aria-live":`polite`,"aria-label":`Notifications`},[(0,t.createVNode)(t.TransitionGroup,{name:o(e),tag:`div`,class:`toast-tg`},{default:(0,t.withCtx)(()=>[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(a(e),e=>((0,t.openBlock)(),(0,t.createBlock)(S,{key:e.id,toast:e,onClose:(0,t.unref)(r)},null,8,[`toast`,`onClose`]))),128))]),_:2},1032,[`name`])],2)):(0,t.createCommentVNode)(``,!0)],64))),64))]))}}),[[`__scopeId`,`data-v-3eb39527`]]),w=`:root{--toast-bg:#fff;--toast-border:#e4e4e7;--toast-text:#18181b;--toast-text-muted:#71717a;--toast-shadow:0 2px 8px #0000000f, 0 1px 2px #0000000a;--toast-shadow-hover:0 4px 16px #0000001a, 0 2px 4px #0000000f;--toast-radius:10px;--toast-width:360px;--toast-gap:8px;--toast-z:99999;--toast-c-success:#16a34a;--toast-c-error:#dc2626;--toast-c-warning:#d97706;--toast-c-info:#2563eb;--toast-c-muted:#71717a;--ease-spring:cubic-bezier(.16, 1, .3, 1);--ease-out:cubic-bezier(.4, 0, .2, 1);--ease-exit:cubic-bezier(.4, 0, 1, 1)}.toast-viewport{z-index:var(--toast-z);gap:var(--toast-gap);pointer-events:none;flex-direction:column;width:fit-content;max-height:100svh;padding:16px;display:flex;position:fixed;overflow:visible}.toast-viewport--top-right{align-items:flex-end;top:0;right:0}.toast-viewport--top-left{align-items:flex-start;top:0;left:0}.toast-viewport--top-center{align-items:center;top:0;left:50%;transform:translate(-50%)}.toast-viewport--bottom-right{flex-direction:column-reverse;align-items:flex-end;bottom:0;right:0}.toast-viewport--bottom-left{flex-direction:column-reverse;align-items:flex-start;bottom:0;left:0}.toast-viewport--bottom-center{flex-direction:column-reverse;align-items:center;bottom:0;left:50%;transform:translate(-50%)}.toast-card{width:var(--toast-width);background:var(--toast-bg);border:1px solid var(--toast-border);border-radius:var(--toast-radius);max-width:calc(100vw - 32px);box-shadow:var(--toast-shadow);pointer-events:auto;cursor:default;-webkit-user-select:none;user-select:none;touch-action:pan-y;align-items:flex-start;gap:10px;padding:14px;transition:box-shadow .18s;display:flex;position:relative}.toast-card:hover{box-shadow:var(--toast-shadow-hover)}.toast-icon{flex-shrink:0;width:16px;height:16px;margin-top:1px}.toast-icon--success{color:var(--toast-c-success)}.toast-icon--error{color:var(--toast-c-error)}.toast-icon--warning{color:var(--toast-c-warning)}.toast-icon--info{color:var(--toast-c-info)}@keyframes toast-spin{to{transform:rotate(360deg)}}.toast-spinner{border:1.5px solid #e4e4e7;border-top-color:var(--toast-c-muted);border-radius:50%;flex-shrink:0;width:16px;height:16px;margin-top:1px;animation:.7s linear infinite toast-spin}.toast-body{flex:1;min-width:0}.toast-title{color:var(--toast-text);letter-spacing:-.01em;margin:0;font-size:13.5px;font-weight:600;line-height:1.45}.toast-description{color:var(--toast-text-muted);margin:2px 0 0;font-size:13px;font-weight:400;line-height:1.5}.toast-close{color:#a1a1aa;cursor:pointer;opacity:0;background:0 0;border:none;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:22px;height:22px;margin:-3px -3px 0 0;padding:0;transition:opacity .15s,background .15s,color .15s;display:flex}.toast-card:hover .toast-close{opacity:1}.toast-close:hover{color:var(--toast-text);background:#f4f4f5}.toast-close svg{width:12px;height:12px}.toast-action-btn{color:var(--toast-text);border:1px solid var(--toast-border);cursor:pointer;white-space:nowrap;background:0 0;border-radius:6px;flex-shrink:0;align-self:center;padding:4px 11px;font-family:inherit;font-size:12px;font-weight:500;line-height:1.4;transition:background .15s,border-color .15s}.toast-action-btn:hover{background:#f4f4f5;border-color:#d4d4d8}.toast-slide-right-move,.toast-slide-left-move,.toast-slide-down-move,.toast-slide-up-move{transition:transform .35s var(--ease-spring)}.toast-slide-right-enter-active{transition:opacity .4s var(--ease-spring), transform .4s var(--ease-spring)}.toast-slide-right-leave-active{transition:opacity .22s var(--ease-exit), transform .22s var(--ease-exit);pointer-events:none;position:absolute;right:16px}.toast-slide-right-enter-from{opacity:0;transform:translate(calc(100% + 24px))scale(.94)}.toast-slide-right-enter-to,.toast-slide-right-leave-from{opacity:1;transform:translate(0)scale(1)}.toast-slide-right-leave-to{opacity:0;transform:translate(calc(100% + 24px))scale(.94)}.toast-slide-left-enter-active{transition:opacity .4s var(--ease-spring), transform .4s var(--ease-spring)}.toast-slide-left-leave-active{transition:opacity .22s var(--ease-exit), transform .22s var(--ease-exit);pointer-events:none;position:absolute;left:16px}.toast-slide-left-enter-from{opacity:0;transform:translate(calc(-100% - 24px))scale(.94)}.toast-slide-left-enter-to,.toast-slide-left-leave-from{opacity:1;transform:translate(0)scale(1)}.toast-slide-left-leave-to{opacity:0;transform:translate(calc(-100% - 24px))scale(.94)}.toast-slide-down-enter-active{transition:opacity .4s var(--ease-spring), transform .4s var(--ease-spring)}.toast-slide-down-leave-active{transition:opacity .22s var(--ease-exit), transform .22s var(--ease-exit);pointer-events:none;position:absolute}.toast-slide-down-enter-from{opacity:0;transform:translateY(-18px)scale(.94)}.toast-slide-down-enter-to,.toast-slide-down-leave-from{opacity:1;transform:translateY(0)scale(1)}.toast-slide-down-leave-to{opacity:0;transform:translateY(-18px)scale(.94)}.toast-slide-up-enter-active{transition:opacity .4s var(--ease-spring), transform .4s var(--ease-spring)}.toast-slide-up-leave-active{transition:opacity .22s var(--ease-exit), transform .22s var(--ease-exit);pointer-events:none;position:absolute}.toast-slide-up-enter-from{opacity:0;transform:translateY(18px)scale(.94)}.toast-slide-up-enter-to,.toast-slide-up-leave-from{opacity:1;transform:translateY(0)scale(1)}.toast-slide-up-leave-to{opacity:0;transform:translateY(18px)scale(.94)}@media (prefers-reduced-motion){.toast-card,.toast-slide-right-enter-active,.toast-slide-right-leave-active,.toast-slide-left-enter-active,.toast-slide-left-leave-active,.toast-slide-down-enter-active,.toast-slide-down-leave-active,.toast-slide-up-enter-active,.toast-slide-up-leave-active,.toast-slide-right-move,.toast-slide-left-move,.toast-slide-down-move,.toast-slide-up-move{transition:none!important;animation:none!important}}`,T=`feather-toast-root`,E=`feather-toast-style`;e.CreateFeatherToast={install(e){let n=f();if(e.provide(`toast`,n),typeof document>`u`)return;if(!document.getElementById(E)){let e=document.createElement(`style`);e.id=E,e.textContent=w,document.head.appendChild(e)}let r=document.getElementById(T);r||(r=document.createElement(`div`),r.id=T,document.body.appendChild(r));let i=(0,t.createVNode)(C);i.appContext=e._context,(0,t.render)(i,r);let a=e.unmount;e.unmount=(...e)=>{(0,t.render)(null,r),r?.parentNode&&r.parentNode.removeChild(r),a(...e)}}},e.ToastContainer=C,e.useFeatherToast=f,e.useToast=p});

package/dist/index.d.ts

@@ -0,0 +1,88 @@
+import type { App } from 'vue'
+
+declare const CreateFeatherToast: {
+  install(app: App): void
+}
+
+export { CreateFeatherToast }
+
+declare const useFeatherToast: () => {
+  toast: {
+    (options: ToastOptions): string
+    success(options: ToastOptions): string
+    error(options: ToastOptions): string
+    warning(options: ToastOptions): string
+    info(options: ToastOptions): string
+    loading(options: ToastOptions): string
+    dismiss(id: string): void
+    dismissAll(): void
+    promise<T>(
+      promise: Promise<T>,
+      options: ToastPromiseOptions<T>
+    ): Promise<T>
+  }
+  toasts: import('vue').Ref<Toast[]>
+  dismiss(id: string): void
+  dismissAll(): void
+}
+
+declare const useToast: typeof useFeatherToast
+
+export { useFeatherToast, useToast }
+
+export { default as ToastContainer } from './feather-toast.es.js'
+
+export type {
+  Toast,
+  ToastOptions,
+  ToastAction,
+  ToastVariant,
+  ToastPosition,
+  ToastPromiseOptions,
+} from './feather-toast.es.js'
+
+declare module 'feather-toast-vue' {
+  export type { Toast, ToastOptions, ToastAction, ToastVariant, ToastPosition, ToastPromiseOptions }
+  export { CreateFeatherToast, useFeatherToast, useToast, ToastContainer }
+}
+
+interface Toast {
+  id: string
+  title?: string
+  description?: string
+  variant: 'default' | 'success' | 'error' | 'warning' | 'info' | 'loading'
+  position: 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center'
+  duration: number
+  dismissible: boolean
+  action?: {
+    label: string
+    onClick: () => void
+  }
+}
+
+interface ToastOptions {
+  title?: string
+  description?: string
+  variant?: 'default' | 'success' | 'error' | 'warning' | 'info' | 'loading'
+  position?: 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center'
+  duration?: number
+  dismissible?: boolean
+  action?: {
+    label: string
+    onClick: () => void
+  }
+}
+
+interface ToastAction {
+  label: string
+  onClick: () => void
+}
+
+type ToastVariant = 'default' | 'success' | 'error' | 'warning' | 'info' | 'loading'
+type ToastPosition = 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center'
+
+interface ToastPromiseOptions<T = any> {
+  loading: ToastOptions
+  success: ToastOptions | ((data: T) => ToastOptions)
+  error: ToastOptions | ((err: Error) => ToastOptions)
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "feather-toast-vue",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "A lightweight, smooth Vue 3 toast notification plugin",
   "homepage": "https://zin-ix.github.io/feather-toast-vue/",
   "type": "module",