little-dizzy 2.2.0 → 2.4.0

package/dist/little-dizzy.js

@@ -1,23 +1,23 @@
-import { createElementBlock as a, openBlock as n, normalizeClass as m, renderSlot as r, createCommentVNode as i, createElementVNode as e, toDisplayString as f, createTextVNode as v } from "vue";
-const d = (t, o) => {
-  const s = t.__vccOpts || t;
-  for (const [l, c] of o)
-    s[l] = c;
+import { createElementBlock as p, openBlock as c, normalizeClass as w, renderSlot as f, createCommentVNode as h, createElementVNode as l, toDisplayString as _, normalizeStyle as S, ref as b, createBlock as L, Teleport as I, createVNode as E, TransitionGroup as V, withCtx as T, Fragment as j, renderList as O, createTextVNode as A, createStaticVNode as z, watch as D } from "vue";
+const v = (e, t) => {
+  const s = e.__vccOpts || e;
+  for (const [d, i] of t)
+    s[d] = i;
   return s;
-}, g = ["disabled"], B = {
+}, N = ["disabled"], H = {
   __name: "Button",
   props: {
     // 按钮类型
     type: {
       type: String,
       default: "primary",
-      validator: (t) => ["primary", "success", "warning", "danger", "info", "secondary"].includes(t)
+      validator: (e) => ["primary", "success", "warning", "danger", "info", "secondary"].includes(e)
     },
     // 按钮尺寸
     size: {
       type: String,
       default: "medium",
-      validator: (t) => ["small", "medium", "large"].includes(t)
+      validator: (e) => ["small", "medium", "large"].includes(e)
     },
     // 是否为块级按钮
     block: {
@@ -31,30 +31,30 @@ const d = (t, o) => {
     }
   },
   emits: ["click"],
-  setup(t, { emit: o }) {
-    return (s, l) => (n(), a("button", {
-      class: m(["btn", [
-        `btn-${t.type}`,
-        `btn-${t.size}`,
-        { "btn-block": t.block },
-        { "btn-disabled": t.disabled }
+  setup(e, { emit: t }) {
+    return (s, d) => (c(), p("button", {
+      class: w(["btn", [
+        `btn-${e.type}`,
+        `btn-${e.size}`,
+        { "btn-block": e.block },
+        { "btn-disabled": e.disabled }
       ]]),
-      disabled: t.disabled,
-      onClick: l[0] || (l[0] = (c) => s.$emit("click", c))
+      disabled: e.disabled,
+      onClick: d[0] || (d[0] = (i) => s.$emit("click", i))
     }, [
-      r(s.$slots, "default", {}, void 0, !0)
-    ], 10, g));
+      f(s.$slots, "default", {}, void 0, !0)
+    ], 10, N));
   }
-}, $ = /* @__PURE__ */ d(B, [["__scopeId", "data-v-75f082b2"]]), z = {
+}, F = /* @__PURE__ */ v(H, [["__scopeId", "data-v-75f082b2"]]), R = {
   key: 0,
   class: "card-header"
-}, k = {
+}, Y = {
   key: 0,
   class: "card-header-title"
-}, w = { class: "card-body" }, C = {
+}, G = { class: "card-body" }, P = {
   key: 1,
   class: "card-footer"
-}, S = {
+}, U = {
   __name: "Card",
   props: {
     // 卡片标题
@@ -68,32 +68,32 @@ const d = (t, o) => {
       default: !0
     }
   },
-  setup(t) {
-    return (o, s) => (n(), a("div", {
-      class: m(["card", { "card-shadow": t.shadow }])
+  setup(e) {
+    return (t, s) => (c(), p("div", {
+      class: w(["card", { "card-shadow": e.shadow }])
     }, [
-      o.$slots.header || t.title ? (n(), a("div", z, [
-        t.title ? (n(), a("h3", k, f(t.title), 1)) : i("", !0),
-        r(o.$slots, "header", {}, void 0, !0)
-      ])) : i("", !0),
-      e("div", w, [
-        r(o.$slots, "default", {}, void 0, !0)
+      t.$slots.header || e.title ? (c(), p("div", R, [
+        e.title ? (c(), p("h3", Y, _(e.title), 1)) : h("", !0),
+        f(t.$slots, "header", {}, void 0, !0)
+      ])) : h("", !0),
+      l("div", G, [
+        f(t.$slots, "default", {}, void 0, !0)
       ]),
-      o.$slots.footer ? (n(), a("div", C, [
-        r(o.$slots, "footer", {}, void 0, !0)
-      ])) : i("", !0)
+      t.$slots.footer ? (c(), p("div", P, [
+        f(t.$slots, "footer", {}, void 0, !0)
+      ])) : h("", !0)
     ], 2));
   }
-}, M = /* @__PURE__ */ d(S, [["__scopeId", "data-v-2d83e63a"]]), L = { class: "modal-dialog" }, x = { class: "modal-content" }, E = { class: "modal-header" }, I = {
+}, W = /* @__PURE__ */ v(U, [["__scopeId", "data-v-1e2b2467"]]), q = { class: "modal-dialog" }, X = { class: "modal-header" }, J = {
   key: 0,
   class: "modal-header-title"
-}, O = { class: "modal-body" }, j = {
+}, K = { class: "modal-body" }, Q = {
   key: 0,
   class: "modal-footer"
-}, D = {
+}, Z = {
   key: 1,
   class: "modal-footer"
-}, N = {
+}, ee = {
   __name: "Modal",
   props: {
     // 是否显示模态框
@@ -106,6 +106,10 @@ const d = (t, o) => {
       type: String,
       default: ""
     },
+    width: {
+      type: String,
+      default: "500px"
+    },
     // 是否显示默认底部按钮
     showFooter: {
       type: Boolean,
@@ -113,102 +117,342 @@ const d = (t, o) => {
     }
   },
   emits: ["close", "cancel", "confirm"],
-  setup(t, { emit: o }) {
-    const s = o, l = () => {
+  setup(e, { emit: t }) {
+    const s = t, d = () => {
       s("close");
-    }, c = () => {
+    }, i = () => {
       s("cancel");
-    }, b = () => {
+    }, m = () => {
       s("confirm");
     };
-    return (u, Y) => t.visible ? (n(), a("div", {
+    return (o, u) => e.visible ? (c(), p("div", {
       key: 0,
-      class: m(["modal", { "modal-show": t.visible }])
+      class: w(["modal", { "modal-show": e.visible }])
     }, [
-      e("div", L, [
-        e("div", x, [
-          e("div", E, [
-            t.title ? (n(), a("h3", I, f(t.title), 1)) : i("", !0),
-            e("button", {
+      l("div", q, [
+        l("div", {
+          class: "modal-content",
+          style: S({ width: e.width })
+        }, [
+          l("div", X, [
+            e.title ? (c(), p("h3", J, _(e.title), 1)) : h("", !0),
+            l("button", {
               class: "modal-header-close",
-              onClick: l
+              onClick: d
             }, "×")
           ]),
-          e("div", O, [
-            r(u.$slots, "default", {}, void 0, !0)
+          l("div", K, [
+            f(o.$slots, "default", {}, void 0, !0)
           ]),
-          u.$slots.footer ? (n(), a("div", j, [
-            r(u.$slots, "footer", {}, void 0, !0)
-          ])) : t.showFooter ? (n(), a("div", D, [
-            e("button", {
+          o.$slots.footer ? (c(), p("div", Q, [
+            f(o.$slots, "footer", {}, void 0, !0)
+          ])) : e.showFooter ? (c(), p("div", Z, [
+            l("button", {
               class: "btn btn-secondary",
-              onClick: c
+              onClick: i
             }, "取消"),
-            e("button", {
+            l("button", {
               class: "btn btn-primary",
-              onClick: b
+              onClick: m
             }, "确定")
-          ])) : i("", !0)
-        ])
+          ])) : h("", !0)
+        ], 4)
       ])
-    ], 2)) : i("", !0);
+    ], 2)) : h("", !0);
   }
-}, V = /* @__PURE__ */ d(N, [["__scopeId", "data-v-c66cec30"]]), A = { class: "lzbutton-wrapper" }, F = /* @__PURE__ */ Object.assign({
+}, te = /* @__PURE__ */ v(ee, [["__scopeId", "data-v-39af2dcd"]]), se = ["innerHTML"], ae = { class: "text-sm font-medium" }, oe = ["onClick"], ne = /* @__PURE__ */ Object.assign({
+  name: "Message"
+}, {
+  __name: "Message",
+  setup(e, { expose: t }) {
+    const s = b([]), d = {
+      success: "bg-emerald-500/95 text-white",
+      warning: "bg-amber-500/95 text-white",
+      error: "bg-rose-500/95 text-white",
+      info: "bg-sky-500/95 text-white"
+    }, i = {
+      success: `<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+    <path d="M20 6L9 17l-5-5" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>`,
+      warning: `<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
+  </svg>`,
+      error: `<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+    <circle cx="12" cy="12" r="10"/>
+    <path d="M15 9l-6 6M9 9l6 6" stroke-linecap="round"/>
+  </svg>`,
+      info: `<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
+  </svg>`
+    };
+    let m = 0;
+    const o = (r) => {
+      const a = ++m, n = {
+        id: a,
+        type: r.type || "info",
+        content: r.content || "",
+        duration: r.duration ?? 3e3,
+        closable: r.closable ?? !1
+      };
+      return s.value.push(n), n.duration > 0 && setTimeout(() => {
+        u(a);
+      }, n.duration), a;
+    }, u = (r) => {
+      const a = s.value.findIndex((n) => n.id === r);
+      a > -1 && s.value.splice(a, 1);
+    };
+    return t({
+      addMessage: o,
+      removeMessage: u,
+      clearAll: () => {
+        s.value = [];
+      },
+      // Shorthand methods
+      success: (r, a = {}) => o({ ...a, type: "success", content: r }),
+      warning: (r, a = {}) => o({ ...a, type: "warning", content: r }),
+      error: (r, a = {}) => o({ ...a, type: "error", content: r }),
+      info: (r, a = {}) => o({ ...a, type: "info", content: r })
+    }), (r, a) => (c(), L(I, { to: "body" }, [
+      E(V, {
+        name: "message",
+        tag: "div",
+        class: "fixed top-4 left-1/2 -translate-x-1/2 z-[9999] flex flex-col items-center gap-3 pointer-events-none"
+      }, {
+        default: T(() => [
+          (c(!0), p(j, null, O(s.value, (n) => (c(), p("div", {
+            key: n.id,
+            class: w(["pointer-events-auto flex items-center gap-3 px-5 py-3 rounded-lg shadow-lg backdrop-blur-sm transition-all duration-300", d[n.type]])
+          }, [
+            l("span", {
+              class: "flex-shrink-0",
+              innerHTML: i[n.type]
+            }, null, 8, se),
+            l("span", ae, _(n.content), 1),
+            n.closable ? (c(), p("button", {
+              key: 0,
+              onClick: (Ie) => u(n.id),
+              class: "flex-shrink-0 ml-2 p-1 rounded-full hover:bg-black/10 transition-colors"
+            }, [...a[0] || (a[0] = [
+              l("svg", {
+                class: "w-4 h-4",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                "stroke-width": "2"
+              }, [
+                l("path", { d: "M18 6L6 18M6 6l12 12" })
+              ], -1)
+            ])], 8, oe)) : h("", !0)
+          ], 2))), 128))
+        ]),
+        _: 1
+      })
+    ]));
+  }
+}), le = /* @__PURE__ */ v(ne, [["__scopeId", "data-v-d727fd6c"]]);
+b([]);
+let re = 0;
+const de = (e) => {
+  const t = ++re, s = e.type || "info", d = e.content || "", i = e.duration ?? 3e3, m = e.closable ?? !1, o = document.createElement("div");
+  o.className = `ld-message ld-message--${s}`, o.setAttribute("data-id", t);
+  let g = `${{
+    success: `<svg class="ld-message-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+      <path d="M20 6L9 17l-5-5" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>`,
+    warning: `<svg class="ld-message-icon" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
+    </svg>`,
+    error: `<svg class="ld-message-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+      <circle cx="12" cy="12" r="10"/>
+      <path d="M15 9l-6 6M9 9l6 6" stroke-linecap="round"/>
+    </svg>`,
+    info: `<svg class="ld-message-icon" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
+    </svg>`
+  }[s]}<span class="ld-message-content">${d}</span>`;
+  return m && (g += `<button class="ld-message-close" onclick="window.__ldMessageClose(${t})">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M18 6L6 18M6 6l12 12"/>
+      </svg>
+    </button>`), o.innerHTML = g, { id: t, element: o, duration: i };
+}, ce = () => {
+  let e = document.getElementById("ld-message-root");
+  if (!e) {
+    e = document.createElement("div"), e.id = "ld-message-root", document.body.appendChild(e);
+    const t = document.createElement("style");
+    t.textContent = `
+      #ld-message-root {
+        position: fixed;
+        top: 16px;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 9999;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 12px;
+        pointer-events: none;
+      }
+      .ld-message {
+        pointer-events: auto;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 12px 20px;
+        border-radius: 8px;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+        backdrop-filter: blur(8px);
+        animation: ldMessageIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        font-size: 14px;
+        font-weight: 500;
+      }
+      .ld-message.ld-message--closing {
+        animation: ldMessageOut 0.2s ease-in forwards;
+      }
+      .ld-message--success { background: rgba(16, 185, 129, 0.95); color: white; }
+      .ld-message--warning { background: rgba(245, 158, 11, 0.95); color: white; }
+      .ld-message--error { background: rgba(239, 68, 68, 0.95); color: white; }
+      .ld-message--info { background: rgba(14, 165, 233, 0.95); color: white; }
+      .ld-message-icon { width: 20px; height: 20px; flex-shrink: 0; }
+      .ld-message-content { white-space: nowrap; }
+      .ld-message-close {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 20px;
+        height: 20px;
+        margin-left: 4px;
+        padding: 0;
+        border: none;
+        background: transparent;
+        color: currentColor;
+        cursor: pointer;
+        border-radius: 50%;
+        transition: background 0.2s;
+      }
+      .ld-message-close:hover { background: rgba(255,255,255,0.2); }
+      .ld-message-close svg { width: 14px; height: 14px; }
+      @keyframes ldMessageIn {
+        from { opacity: 0; transform: translateY(-20px) scale(0.9); }
+        to { opacity: 1; transform: translateY(0) scale(1); }
+      }
+      @keyframes ldMessageOut {
+        from { opacity: 1; transform: translateY(0) scale(1); }
+        to { opacity: 0; transform: translateY(-10px) scale(0.95); }
+      }
+    `, document.head.appendChild(t);
+  }
+  return e;
+}, k = (e) => {
+  const t = document.getElementById("ld-message-root");
+  if (!t) return;
+  const s = t.querySelector(`[data-id="${e}"]`);
+  s && (s.classList.add("ld-message--closing"), setTimeout(() => {
+    s.remove();
+  }, 200));
+};
+typeof window < "u" && (window.__ldMessageClose = k);
+const y = (e) => {
+  const t = ce(), { id: s, element: d, duration: i } = de(e);
+  return t.appendChild(d), i > 0 && setTimeout(() => {
+    k(s);
+  }, i), s;
+}, B = {
+  success: (e, t = {}) => y({ ...t, type: "success", content: e }),
+  warning: (e, t = {}) => y({ ...t, type: "warning", content: e }),
+  error: (e, t = {}) => y({ ...t, type: "error", content: e }),
+  info: (e, t = {}) => y({ ...t, type: "info", content: e }),
+  close: k,
+  closeAll: () => {
+    const e = document.getElementById("ld-message-root");
+    e && (e.innerHTML = "");
+  }
+}, ie = { class: "lzbutton-wrapper" }, pe = { class: "button" }, ue = /* @__PURE__ */ Object.assign({
   name: "Lzbutton"
 }, {
   __name: "lzbutton",
-  setup(t) {
-    return (o, s) => (n(), a("div", A, [...s[0] || (s[0] = [
-      e("button", { class: "button" }, [
-        e("svg", {
+  setup(e) {
+    return (t, s) => (c(), p("div", ie, [
+      l("button", pe, [
+        s[1] || (s[1] = l("svg", {
           xmlns: "http://www.w3.org/2000/svg",
           viewBox: "0 0 36 24"
         }, [
-          e("path", { d: "m18 0 8 12 10-8-4 20H4L0 4l10 8 8-12z" })
-        ]),
-        v(" Unlock Pro ")
-      ], -1)
+          l("path", { d: "m18 0 8 12 10-8-4 20H4L0 4l10 8 8-12z" })
+        ], -1)),
+        f(t.$slots, "default", {}, () => [
+          s[0] || (s[0] = A("Unlock Pro", -1))
+        ], !0)
+      ])
+    ]));
+  }
+}), me = /* @__PURE__ */ v(ue, [["__scopeId", "data-v-7124b716"]]), ge = { class: "Lztext-wrapper" }, fe = /* @__PURE__ */ Object.assign({
+  name: "Lztext"
+}, {
+  __name: "Lztext",
+  setup(e) {
+    return (t, s) => (c(), p("div", ge, [...s[0] || (s[0] = [
+      z('<div class="loader-wrapper" data-v-f22456dd><span class="loader-letter" data-v-f22456dd>G</span><span class="loader-letter" data-v-f22456dd>e</span><span class="loader-letter" data-v-f22456dd>n</span><span class="loader-letter" data-v-f22456dd>e</span><span class="loader-letter" data-v-f22456dd>r</span><span class="loader-letter" data-v-f22456dd>a</span><span class="loader-letter" data-v-f22456dd>t</span><span class="loader-letter" data-v-f22456dd>i</span><span class="loader-letter" data-v-f22456dd>n</span><span class="loader-letter" data-v-f22456dd>g</span><div class="loader" data-v-f22456dd></div></div>', 1)
     ])]));
   }
-}), H = /* @__PURE__ */ d(F, [["__scopeId", "data-v-c2498af3"]]), P = { class: "lztheme-wrapper" }, R = /* @__PURE__ */ Object.assign({
+}), he = /* @__PURE__ */ v(fe, [["__scopeId", "data-v-f22456dd"]]), ve = { class: "lztheme-wrapper" }, ye = { class: "theme__toggle-wrap" }, be = ["checked"], we = /* @__PURE__ */ Object.assign({
   name: "Lztheme"
 }, {
   __name: "lztheme",
-  setup(t) {
-    return (o, s) => (n(), a("div", P, [...s[0] || (s[0] = [
-      e("label", {
-        for: "theme",
+  props: {
+    // 是否为暗色主题
+    modelValue: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(e, { expose: t, emit: s }) {
+    let d = 0;
+    const i = `lztheme-toggle-${++d}-${Date.now()}`, m = e, o = s, u = b(null), g = b(m.modelValue);
+    D(() => m.modelValue, (a) => {
+      g.value = a;
+    });
+    const r = (a) => {
+      const n = a.target.checked;
+      g.value = n, o("update:modelValue", n), o("change", n);
+    };
+    return t({
+      toggle: () => {
+        u.value && u.value.click();
+      },
+      setDark: (a) => {
+        g.value = a, o("update:modelValue", a), o("change", a);
+      }
+    }), (a, n) => (c(), p("div", ve, [
+      l("label", {
+        for: i,
         class: "theme"
       }, [
-        e("span", { class: "theme__toggle-wrap" }, [
-          e("input", {
-            id: "theme",
+        l("span", ye, [
+          l("input", {
+            id: i,
+            ref_key: "toggleRef",
+            ref: u,
             class: "theme__toggle",
             type: "checkbox",
             role: "switch",
             name: "theme",
-            value: "dark"
-          }),
-          e("span", { class: "theme__fill" }),
-          e("span", { class: "theme__icon" }, [
-            e("span", { class: "theme__icon-part" }),
-            e("span", { class: "theme__icon-part" }),
-            e("span", { class: "theme__icon-part" }),
-            e("span", { class: "theme__icon-part" }),
-            e("span", { class: "theme__icon-part" }),
-            e("span", { class: "theme__icon-part" }),
-            e("span", { class: "theme__icon-part" }),
-            e("span", { class: "theme__icon-part" }),
-            e("span", { class: "theme__icon-part" })
-          ])
+            value: "dark",
+            checked: g.value,
+            onChange: r
+          }, null, 40, be),
+          n[0] || (n[0] = z('<span class="theme__icon" data-v-e887d581><span class="theme__icon-part" data-v-e887d581></span><span class="theme__icon-part" data-v-e887d581></span><span class="theme__icon-part" data-v-e887d581></span><span class="theme__icon-part" data-v-e887d581></span><span class="theme__icon-part" data-v-e887d581></span><span class="theme__icon-part" data-v-e887d581></span><span class="theme__icon-part" data-v-e887d581></span><span class="theme__icon-part" data-v-e887d581></span><span class="theme__icon-part" data-v-e887d581></span></span>', 1))
         ])
-      ], -1)
-    ])]));
+      ])
+    ]));
   }
-}), T = /* @__PURE__ */ d(R, [["__scopeId", "data-v-0b85d094"]]), U = {
-  Lzbutton: H,
-  Lztheme: T
-}, q = {
+}), _e = /* @__PURE__ */ v(we, [["__scopeId", "data-v-e887d581"]]), ke = {
+  Lzbutton: me,
+  Lztext: he,
+  Lztheme: _e
+}, xe = {
   name: "Button",
   type: "vue",
   label: "Button 按钮",
@@ -222,7 +466,7 @@ const d = (t, o) => {
 <script setup>
 import { Button } from 'little-dizzy'
 <\/script>`
-}, G = {
+}, Be = {
   name: "Card",
   type: "vue",
   label: "Card 卡片",
@@ -242,7 +486,7 @@ import { Button } from 'little-dizzy'
 <script setup>
 import { Card, Button } from 'little-dizzy'
 <\/script>`
-}, J = {
+}, ze = {
   name: "Modal",
   type: "vue",
   label: "Modal 模态框",
@@ -267,62 +511,107 @@ import { Modal, Button } from 'little-dizzy'
 
 const visible = ref(false)
 <\/script>`
-}, K = [
-  q,
-  G,
-  J
-], p = /* @__PURE__ */ new Map();
-function _(t) {
-  return !t || !t.name ? (console.warn("[LittleDizzy] Snippet must have a name property"), !1) : (p.set(t.name, {
-    name: t.name,
-    type: t.type || "html",
-    label: t.label || t.name,
-    code: t.code || "",
-    isCustom: t.isCustom || !1,
-    ...t
+}, Ce = {
+  name: "Message",
+  type: "vue",
+  label: "Message 消息提示",
+  code: `<template>
+  <div class="message-demo">
+    <Button type="success" @click="showSuccess">成功提示</Button>
+    <Button type="warning" @click="showWarning">警告提示</Button>
+    <Button type="danger" @click="showError">错误提示</Button>
+    <Button type="info" @click="showInfo">信息提示</Button>
+  </div>
+</template>
+
+<script setup>
+import { Button, message } from 'little-dizzy'
+
+const showSuccess = () => {
+  message.success('操作成功！')
+}
+
+const showWarning = () => {
+  message.warning('请注意！')
+}
+
+const showError = () => {
+  message.error('操作失败！')
+}
+
+const showInfo = () => {
+  message.info('这是一条提示信息', { duration: 5000, closable: true })
+}
+<\/script>
+
+<style scoped>
+.message-demo {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+</style>`
+}, $e = [
+  xe,
+  Be,
+  ze,
+  Ce
+], x = /* @__PURE__ */ new Map();
+function C(e) {
+  return !e || !e.name ? (console.warn("[LittleDizzy] Snippet must have a name property"), !1) : (x.set(e.name, {
+    name: e.name,
+    type: e.type || "html",
+    label: e.label || e.name,
+    code: e.code || "",
+    isCustom: e.isCustom || !1,
+    ...e
   }), !0);
 }
-function h(t) {
-  if (!Array.isArray(t))
+function $(e) {
+  if (!Array.isArray(e))
     return console.warn("[LittleDizzy] registerSnippets expects an array"), 0;
-  let o = 0;
-  return t.forEach((s) => {
-    _(s) && o++;
-  }), o;
-}
-function Q() {
-  const t = {};
-  return p.forEach((o, s) => {
-    t[s] = o;
+  let t = 0;
+  return e.forEach((s) => {
+    C(s) && t++;
   }), t;
 }
-function W(t) {
-  return p.get(t);
+function Me() {
+  const e = {};
+  return x.forEach((t, s) => {
+    e[s] = t;
+  }), e;
+}
+function Se(e) {
+  return x.get(e);
 }
-h(K);
-const y = {
-  Button: $,
-  Card: M,
-  Modal: V,
-  ...U
-}, X = (t, o = {}) => {
-  Object.entries(y).forEach(([s, l]) => {
-    t.component(o.prefix ? `${o.prefix}${s}` : s, l);
-  });
-}, tt = Q, et = _, st = h, ot = W, at = {
-  install: X,
-  ...y
+$($e);
+const M = {
+  Button: F,
+  Card: W,
+  Modal: te,
+  Message: le,
+  ...ke
+}, Le = (e, t = {}) => {
+  Object.entries(M).forEach(([s, d]) => {
+    e.component(t.prefix ? `${t.prefix}${s}` : s, d);
+  }), e.config.globalProperties.$message = B, e.provide("message", B);
+}, Ve = Me, Te = C, je = $, Oe = Se, Ae = {
+  install: Le,
+  ...M
 };
 export {
-  $ as Button,
-  M as Card,
-  H as Lzbutton,
-  T as Lztheme,
-  V as Modal,
-  U as customComponents,
-  at as default,
-  ot as getSnippet,
-  et as registerSnippet,
-  st as registerSnippets,
-  tt as snippets
+  F as Button,
+  W as Card,
+  me as Lzbutton,
+  he as Lztext,
+  _e as Lztheme,
+  le as Message,
+  te as Modal,
+  ke as customComponents,
+  Ae as default,
+  Oe as getSnippet,
+  B as message,
+  Te as registerSnippet,
+  je as registerSnippets,
+  Ve as snippets
 };