@lanxuexing/vue2toast 1.0.0 → 1.0.2

package/README.md

@@ -29,6 +29,8 @@ Check out the component in action: **[https://lanxuexing.github.io/vue2toast/](h
 
 - 🚀 **Vue 3 Optimized**: Built with `createVNode` and `render` for minimal overhead.
 - 📐 **TypeScript Ready**: Full type definitions included.
+- 📚 **Stackable**: Multiple toasts stack automatically without overlapping.
+- 📱 **Responsive**: Auto-resizing width to fit content comfortably.
 - 🎨 **Modern Design**: Clean and accessible UI with smooth animations.
 - 🔄 **Updateable Toasts**: Update message content programmatically (e.g., for progress bars).
 - 📦 **Lightweight**: Zero dependencies, tiny bundle size.
@@ -148,7 +150,7 @@ const showPersist = () => {
 | :--- | :--- | :--- | :--- |
 | `duration` | `number` | `3000` | Duration in ms. Set to `0` to persist indefinitely. |
 | `pauseOnHover` | `boolean` | `true` | Pauses timer when hovering over the toast. |
-| `position` | `'top' \| 'bottom' \| 'center'` | `'center'` | Vertical position of the toast. |
+| `position` | `'top' \| 'bottom' \| 'center'` | `'top'` | Vertical position of the toast. |
 | `zIndex` | `number` | `9999` | Z-Index of the toast container. |
 | `className` | `string` | `''` | Custom CSS class name for the toast content. |
 | `style` | `CSSProperties` | `{}` | Custom inline styles (Vue CSS object). |
@@ -158,6 +160,7 @@ const showPersist = () => {
 
 This repository is powered by Vite.
 
+- **Node.js**: >= 18.0.0 (Required for Vite 6+ / Tailwind 4)
 - **Dev Server**: `npm run dev`
 - **Build Lib**: `npm run build`
 - **Build Demo**: `npm run build:demo`

package/README.zh-CN.md

@@ -29,6 +29,8 @@
 
 - 🚀 **Vue 3 优化**: 使用 `createVNode` 和 `render` 函数构建，性能极致。
 - 📐 **TypeScript 支持**: 内置完整的类型定义 (d.ts)。
+- 📚 **堆叠显示**: 支持多个 Toast 自动垂直堆叠，不重叠。
+- 📱 **响应式**: 宽度随内容自动调整，适应长文本。
 - 🎨 **现代设计**: 简洁美观的 UI，流畅的动画。
 - 🔄 **支持更新**: 可编程更新 Toast 内容 (适用于进度条、倒计时等)。
 - 📦 **轻量级**: 零依赖，体积极小。
@@ -146,7 +148,7 @@ const showPersist = () => {
 | :--- | :--- | :--- | :--- |
 | `duration` | `number` | `3000` | 显示时长 (ms)。设置为 `0` 则永久显示。 |
 | `pauseOnHover` | `boolean` | `true` | 鼠标悬停时是否暂停倒计时。 |
-| `position` | `'top' \| 'bottom' \| 'center'` | `'center'` | Toast 的垂直显示位置。 |
+| `position` | `'top' \| 'bottom' \| 'center'` | `'top'` | Toast 的垂直显示位置。 |
 | `zIndex` | `number` | `9999` | Toast 容器的层级 (z-index)。 |
 | `className` | `string` | `''` | 自定义 CSS 类名。 |
 | `style` | `CSSProperties` | `{}` | 自定义内联样式对象 (Vue CSS)。 |
@@ -156,6 +158,7 @@ const showPersist = () => {
 
 本项目使用 Vite 构建。
 
+- **Node.js**: >= 18.0.0 (Vite 6+ / Tailwind 4 需要)
 - **启动开发服务器**: `npm run dev`
 - **构建库**: `npm run build`
 - **构建 Demo**: `npm run build:demo`

package/dist/vue2toast.css

@@ -1 +1 @@
-.toast-container[data-v-00a26138]{position:fixed;left:0;top:0;bottom:0;right:0;display:flex;justify-content:center;pointer-events:none}.toast-container.is-center[data-v-00a26138]{align-items:center}.toast-container.is-top[data-v-00a26138]{align-items:flex-start;padding-top:60px}.toast-container.is-bottom[data-v-00a26138]{align-items:flex-end;padding-bottom:60px}.toast-container .toast[data-v-00a26138]{width:180px;height:60px;line-height:60px;text-align:center;background-color:#0000009c;border-radius:10px;color:#fff;pointer-events:auto;transition:transform .2s ease,box-shadow .2s ease;cursor:default}.toast-container .toast[data-v-00a26138]:hover{transform:scale(1.05);box-shadow:0 8px 20px #0003}.toast-container .message[data-v-00a26138]{font-size:14px;color:#fff}.fade-enter-active[data-v-00a26138],.fade-leave-active[data-v-00a26138]{transition:opacity .3s,transform .3s}.fade-enter-from[data-v-00a26138],.fade-leave-to[data-v-00a26138]{opacity:0;transform:scale(.7)}
+.toast[data-v-c8a446fe]{display:flex;align-items:center;justify-content:center;min-width:200px;max-width:400px;padding:12px 24px;background-color:#000c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:8px;color:#fff;pointer-events:auto;box-shadow:0 4px 12px #00000026;cursor:default;font-size:14px;line-height:1.5;text-align:center;word-break:break-word}.toast[data-v-c8a446fe]:hover{transform:translateY(-1px);box-shadow:0 6px 16px #0003}.toast .message[data-v-c8a446fe]{color:#fff}.toast-container[data-v-39f2ff69]{position:fixed;left:0;right:0;display:flex;justify-content:center;pointer-events:none;padding:20px}.toast-container.is-top[data-v-39f2ff69]{top:0;align-items:flex-start}.toast-container.is-bottom[data-v-39f2ff69]{bottom:0;align-items:flex-end}.toast-container.is-center[data-v-39f2ff69]{top:50%;transform:translateY(-50%);align-items:center}.toast-list[data-v-39f2ff69]{display:flex;flex-direction:column;align-items:center;gap:10px}.toast-list-enter-active[data-v-39f2ff69],.toast-list-leave-active[data-v-39f2ff69]{transition:all .3s ease}.toast-list-enter-from[data-v-39f2ff69],.toast-list-leave-to[data-v-39f2ff69]{opacity:0;transform:translateY(-20px)}

package/dist/vue2toast.es.js

@@ -1,18 +1,13 @@
-import { defineComponent as _, ref as g, createBlock as h, openBlock as m, Transition as k, withCtx as z, createElementBlock as f, createCommentVNode as S, normalizeStyle as b, normalizeClass as x, createElementVNode as I, toDisplayString as N, inject as j, createVNode as M, render as C } from "vue";
-const w = ["innerHTML"], B = {
+import { defineComponent as T, createElementBlock as f, openBlock as d, normalizeStyle as x, normalizeClass as C, toDisplayString as O, ref as h, createVNode as $, TransitionGroup as H, withCtx as S, Fragment as k, renderList as z, createBlock as _, inject as w, render as j } from "vue";
+const B = ["innerHTML"], E = {
   key: 1,
   class: "message"
-}, E = /* @__PURE__ */ _({
+}, L = /* @__PURE__ */ T({
   __name: "Toast",
   props: {
-    zIndex: {
-      type: Number,
-      default: 9999
-    },
-    position: {
+    message: {
       type: String,
-      default: "center"
-      // 'top' | 'bottom' | 'center'
+      required: !0
     },
     useHtml: {
       type: Boolean,
@@ -25,110 +20,147 @@ const w = ["innerHTML"], B = {
     customStyle: {
       type: Object,
       default: () => ({})
+    },
+    type: {
+      type: String,
+      default: "info"
+    }
+  },
+  emits: ["mouseenter", "mouseleave", "close"],
+  setup(o) {
+    return (i, n) => (d(), f("div", {
+      class: C(["toast", o.customClass]),
+      style: x(o.customStyle),
+      onMouseenter: n[0] || (n[0] = (s) => i.$emit("mouseenter")),
+      onMouseleave: n[1] || (n[1] = (s) => i.$emit("mouseleave"))
+    }, [
+      o.useHtml ? (d(), f("div", {
+        key: 0,
+        innerHTML: o.message,
+        class: "message-html"
+      }, null, 8, B)) : (d(), f("span", E, O(o.message), 1))
+    ], 38));
+  }
+}), b = (o, i) => {
+  const n = o.__vccOpts || o;
+  for (const [s, u] of i)
+    n[s] = u;
+  return n;
+}, N = /* @__PURE__ */ b(L, [["__scopeId", "data-v-c8a446fe"]]), D = /* @__PURE__ */ T({
+  __name: "ToastContainer",
+  props: {
+    zIndex: {
+      type: Number,
+      default: 9999
+    },
+    position: {
+      type: String,
+      default: "top"
     }
   },
-  emits: ["mouseenter", "mouseleave"],
-  setup(e, { expose: c, emit: s }) {
-    const n = g(!1), a = g(""), l = s, t = () => l("mouseenter"), r = () => l("mouseleave");
-    return c({
-      visible: n,
-      message: a
-    }), (o, u) => (m(), h(k, { name: "fade" }, {
-      default: z(() => [
-        n.value ? (m(), f("section", {
-          key: 0,
-          class: x(["toast-container", [`is-${e.position}`]]),
-          style: b({ zIndex: e.zIndex })
-        }, [
-          I("div", {
-            class: x(["toast", e.customClass]),
-            style: b(e.customStyle),
-            onMouseenter: t,
-            onMouseleave: r
-          }, [
-            e.useHtml ? (m(), f("div", {
-              key: 0,
-              innerHTML: a.value,
-              class: "message-html"
-            }, null, 8, w)) : (m(), f("span", B, N(a.value), 1))
-          ], 38)
-        ], 6)) : S("", !0)
-      ]),
-      _: 1
-    }));
+  setup(o, { expose: i }) {
+    const n = o, s = h([]);
+    let u = 0;
+    const y = (t, r) => {
+      const e = `toast-${Date.now()}-${u++}`, l = {
+        id: e,
+        message: t,
+        options: r
+      };
+      return n.position.includes("bottom") ? s.value.unshift(l) : s.value.push(l), r.duration > 0 && c(l), {
+        close: () => a(e),
+        update: (m) => {
+          const g = s.value.find((M) => M.id === e);
+          g && (g.message = m);
+        }
+      };
+    }, a = (t) => {
+      const r = s.value.findIndex((e) => e.id === t);
+      if (r !== -1) {
+        const e = s.value[r];
+        e.timer && clearTimeout(e.timer), s.value.splice(r, 1), e.options.onClose && e.options.onClose();
+      }
+    }, c = (t) => {
+      t.timer = setTimeout(() => {
+        a(t.id);
+      }, t.options.duration);
+    }, v = (t) => {
+      t.timer && (clearTimeout(t.timer), t.timer = null);
+    }, p = (t) => {
+      t.options.duration > 0 && c(t);
+    };
+    return i({
+      add: y,
+      remove: a
+    }), (t, r) => (d(), f("div", {
+      class: C(["toast-container", [`is-${o.position}`]]),
+      style: x({ zIndex: o.zIndex })
+    }, [
+      $(H, {
+        name: "toast-list",
+        tag: "div",
+        class: "toast-list"
+      }, {
+        default: S(() => [
+          (d(!0), f(k, null, z(s.value, (e) => (d(), _(N, {
+            key: e.id,
+            message: e.message,
+            type: e.options.type,
+            "use-html": e.options.useHtml,
+            "custom-class": e.options.className,
+            "custom-style": e.options.style,
+            onClose: (l) => a(e.id),
+            onMouseenter: (l) => e.options.pauseOnHover && v(e),
+            onMouseleave: (l) => e.options.pauseOnHover && p(e)
+          }, null, 8, ["message", "type", "use-html", "custom-class", "custom-style", "onClose", "onMouseenter", "onMouseleave"]))), 128))
+        ]),
+        _: 1
+      })
+    ], 6));
   }
-}), V = (e, c) => {
-  const s = e.__vccOpts || e;
-  for (const [n, a] of c)
-    s[n] = a;
-  return s;
-}, L = /* @__PURE__ */ V(E, [["__scopeId", "data-v-00a26138"]]), H = Symbol("Toast"), A = {
-  install(e, c = {}) {
-    let s = {
+}), q = /* @__PURE__ */ b(D, [["__scopeId", "data-v-39f2ff69"]]), I = Symbol("Toast"), F = {
+  install(o, i = {}) {
+    let n = {
       duration: 3e3,
       pauseOnHover: !0,
       zIndex: 9999,
-      position: "center",
+      position: "top",
+      // Changed default to top as it's more standard for stacks, but center is fine too. Let's stick to center to match old default if possible, but stack usually implies top/bottom. Let's use 'top' as default for modern feel.
       useHtml: !1
     };
-    Object.assign(s, c);
-    const n = (a, l) => {
-      var T;
-      let t = { ...s }, r = null;
-      if (typeof l == "object" ? Object.assign(t, l) : typeof l == "function" && (r = l), typeof document > "u")
-        return {
-          close: () => {
-          },
-          update: () => {
-          }
-        };
-      const o = document.createElement("div");
-      document.body.appendChild(o);
-      let u = null;
-      const p = () => {
-        t.duration && t.duration > 0 && (u = setTimeout(() => {
-          y();
-        }, t.duration));
-      }, v = () => {
-        u && (clearTimeout(u), u = null);
-      };
-      let d = M(L, {
-        zIndex: t.zIndex,
-        position: t.position,
-        useHtml: t.useHtml,
-        customClass: t.className,
-        customStyle: t.style,
-        onMouseenter: () => {
-          t.pauseOnHover && v();
-        },
-        onMouseleave: () => {
-          t.pauseOnHover && p();
-        }
+    Object.assign(n, i);
+    const s = /* @__PURE__ */ new Map(), u = (y, a) => {
+      var e;
+      let c = { ...n }, v = null;
+      if (typeof a == "object" ? Object.assign(c, a) : typeof a == "function" && (v = a), typeof document > "u")
+        return { close: () => {
+        }, update: () => {
+        } };
+      const p = c.position || "top";
+      let t = s.get(p);
+      if (!t) {
+        const l = document.createElement("div");
+        document.body.appendChild(l);
+        const m = $(q, {
+          position: p,
+          zIndex: c.zIndex
+        });
+        m.appContext = o._context, j(m, l), t = (e = m.component) == null ? void 0 : e.exposed, s.set(p, t);
+      }
+      return t.add(y, {
+        ...c,
+        onClose: v
       });
-      d.appContext = e._context, C(d, o);
-      const i = (T = d.component) == null ? void 0 : T.exposed;
-      i && (i.message.value = a, i.visible.value = !0);
-      const y = () => {
-        i && (i.visible.value = !1), v(), setTimeout(() => {
-          o && o.parentNode && (C(null, o), o.parentNode.removeChild(o)), r && r();
-        }, 300);
-      };
-      return p(), {
-        close: y,
-        update: (O) => {
-          i && (i.message.value = O);
-        }
-      };
     };
-    e.config.globalProperties.$toast = n, e.provide(H, n);
+    o.config.globalProperties.$toast = u, o.provide(I, u);
   }
-}, D = () => {
-  const e = j(H);
-  if (!e)
+}, G = () => {
+  const o = w(I);
+  if (!o)
     throw new Error("Toast plugin not installed");
-  return e;
+  return o;
 };
 export {
-  A as default,
-  D as useToast
+  F as default,
+  G as useToast
 };

package/dist/vue2toast.umd.js

@@ -1 +1 @@
-(function(n,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(n=typeof globalThis<"u"?globalThis:n||self,e(n.vue2toast={},n.Vue))})(this,(function(n,e){"use strict";const _=["innerHTML"],x={key:1,class:"message"},k=((t,u)=>{const l=t.__vccOpts||t;for(const[a,i]of u)l[a]=i;return l})(e.defineComponent({__name:"Toast",props:{zIndex:{type:Number,default:9999},position:{type:String,default:"center"},useHtml:{type:Boolean,default:!1},customClass:{type:[String,Object,Array],default:""},customStyle:{type:Object,default:()=>({})}},emits:["mouseenter","mouseleave"],setup(t,{expose:u,emit:l}){const a=e.ref(!1),i=e.ref(""),c=l,o=()=>c("mouseenter"),d=()=>c("mouseleave");return u({visible:a,message:i}),(s,m)=>(e.openBlock(),e.createBlock(e.Transition,{name:"fade"},{default:e.withCtx(()=>[a.value?(e.openBlock(),e.createElementBlock("section",{key:0,class:e.normalizeClass(["toast-container",[`is-${t.position}`]]),style:e.normalizeStyle({zIndex:t.zIndex})},[e.createElementVNode("div",{class:e.normalizeClass(["toast",t.customClass]),style:e.normalizeStyle(t.customStyle),onMouseenter:o,onMouseleave:d},[t.useHtml?(e.openBlock(),e.createElementBlock("div",{key:0,innerHTML:i.value,class:"message-html"},null,8,_)):(e.openBlock(),e.createElementBlock("span",x,e.toDisplayString(i.value),1))],38)],6)):e.createCommentVNode("",!0)]),_:1}))}}),[["__scopeId","data-v-00a26138"]]),p=Symbol("Toast"),h={install(t,u={}){let l={duration:3e3,pauseOnHover:!0,zIndex:9999,position:"center",useHtml:!1};Object.assign(l,u);const a=(i,c)=>{var g;let o={...l},d=null;if(typeof c=="object"?Object.assign(o,c):typeof c=="function"&&(d=c),typeof document>"u")return{close:()=>{},update:()=>{}};const s=document.createElement("div");document.body.appendChild(s);let m=null;const y=()=>{o.duration&&o.duration>0&&(m=setTimeout(()=>{b()},o.duration))},T=()=>{m&&(clearTimeout(m),m=null)};let f=e.createVNode(k,{zIndex:o.zIndex,position:o.position,useHtml:o.useHtml,customClass:o.className,customStyle:o.style,onMouseenter:()=>{o.pauseOnHover&&T()},onMouseleave:()=>{o.pauseOnHover&&y()}});f.appContext=t._context,e.render(f,s);const r=(g=f.component)==null?void 0:g.exposed;r&&(r.message.value=i,r.visible.value=!0);const b=()=>{r&&(r.visible.value=!1),T(),setTimeout(()=>{s&&s.parentNode&&(e.render(null,s),s.parentNode.removeChild(s)),d&&d()},300)};return y(),{close:b,update:O=>{r&&(r.message.value=O)}}};t.config.globalProperties.$toast=a,t.provide(p,a)}},C=()=>{const t=e.inject(p);if(!t)throw new Error("Toast plugin not installed");return t};n.default=h,n.useToast=C,Object.defineProperties(n,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
+(function(c,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(c=typeof globalThis<"u"?globalThis:c||self,e(c.vue2toast={},c.Vue))})(this,(function(c,e){"use strict";const x=["innerHTML"],b={key:1,class:"message"},B=e.defineComponent({__name:"Toast",props:{message:{type:String,required:!0},useHtml:{type:Boolean,default:!1},customClass:{type:[String,Object,Array],default:""},customStyle:{type:Object,default:()=>({})},type:{type:String,default:"info"}},emits:["mouseenter","mouseleave","close"],setup(n){return(r,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["toast",n.customClass]),style:e.normalizeStyle(n.customStyle),onMouseenter:a[0]||(a[0]=s=>r.$emit("mouseenter")),onMouseleave:a[1]||(a[1]=s=>r.$emit("mouseleave"))},[n.useHtml?(e.openBlock(),e.createElementBlock("div",{key:0,innerHTML:n.message,class:"message-html"},null,8,x)):(e.openBlock(),e.createElementBlock("span",b,e.toDisplayString(n.message),1))],38))}}),T=(n,r)=>{const a=n.__vccOpts||n;for(const[s,p]of r)a[s]=p;return a},M=T(B,[["__scopeId","data-v-c8a446fe"]]),$=T(e.defineComponent({__name:"ToastContainer",props:{zIndex:{type:Number,default:9999},position:{type:String,default:"top"}},setup(n,{expose:r}){const a=n,s=e.ref([]);let p=0;const g=(o,u)=>{const t=`toast-${Date.now()}-${p++}`,i={id:t,message:o,options:u};return a.position.includes("bottom")?s.value.unshift(i):s.value.push(i),u.duration>0&&d(i),{close:()=>l(t),update:f=>{const C=s.value.find(_=>_.id===t);C&&(C.message=f)}}},l=o=>{const u=s.value.findIndex(t=>t.id===o);if(u!==-1){const t=s.value[u];t.timer&&clearTimeout(t.timer),s.value.splice(u,1),t.options.onClose&&t.options.onClose()}},d=o=>{o.timer=setTimeout(()=>{l(o.id)},o.options.duration)},y=o=>{o.timer&&(clearTimeout(o.timer),o.timer=null)},m=o=>{o.options.duration>0&&d(o)};return r({add:g,remove:l}),(o,u)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["toast-container",[`is-${n.position}`]]),style:e.normalizeStyle({zIndex:n.zIndex})},[e.createVNode(e.TransitionGroup,{name:"toast-list",tag:"div",class:"toast-list"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.value,t=>(e.openBlock(),e.createBlock(M,{key:t.id,message:t.message,type:t.options.type,"use-html":t.options.useHtml,"custom-class":t.options.className,"custom-style":t.options.style,onClose:i=>l(t.id),onMouseenter:i=>t.options.pauseOnHover&&y(t),onMouseleave:i=>t.options.pauseOnHover&&m(t)},null,8,["message","type","use-html","custom-class","custom-style","onClose","onMouseenter","onMouseleave"]))),128))]),_:1})],6))}}),[["__scopeId","data-v-39f2ff69"]]),k=Symbol("Toast"),h={install(n,r={}){let a={duration:3e3,pauseOnHover:!0,zIndex:9999,position:"top",useHtml:!1};Object.assign(a,r);const s=new Map,p=(g,l)=>{var t;let d={...a},y=null;if(typeof l=="object"?Object.assign(d,l):typeof l=="function"&&(y=l),typeof document>"u")return{close:()=>{},update:()=>{}};const m=d.position||"top";let o=s.get(m);if(!o){const i=document.createElement("div");document.body.appendChild(i);const f=e.createVNode($,{position:m,zIndex:d.zIndex});f.appContext=n._context,e.render(f,i),o=(t=f.component)==null?void 0:t.exposed,s.set(m,o)}return o.add(g,{...d,onClose:y})};n.config.globalProperties.$toast=p,n.provide(k,p)}},S=()=>{const n=e.inject(k);if(!n)throw new Error("Toast plugin not installed");return n};c.default=h,c.useToast=S,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lanxuexing/vue2toast",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "A lightweight, high-performance Toast notification plugin for Vue 3, built with TypeScript.",
   "main": "dist/vue2toast.umd.js",
   "module": "dist/vue2toast.es.js",
@@ -72,6 +72,6 @@
   },
   "homepage": "https://github.com/lanxuexing/vue2toast#readme",
   "engines": {
-    "node": ">=24.0.0"
+    "node": ">=18.0.0"
   }
 }