little-dizzy 2.4.0 → 2.5.0

package/dist/little-dizzy.js

@@ -1,10 +1,10 @@
-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;
-}, N = ["disabled"], H = {
+import { createElementBlock as a, openBlock as s, normalizeClass as $, renderSlot as z, createCommentVNode as g, createElementVNode as o, toDisplayString as T, normalizeStyle as x, ref as I, createBlock as X, Teleport as K, createVNode as J, TransitionGroup as Q, withCtx as Z, Fragment as _, renderList as B, computed as A, onMounted as F, onUnmounted as ee, watch as Y, createStaticVNode as R, createTextVNode as U } from "vue";
+const C = (e, t) => {
+  const n = e.__vccOpts || e;
+  for (const [r, d] of t)
+    n[r] = d;
+  return n;
+}, te = ["disabled"], se = {
   __name: "Button",
   props: {
     // 按钮类型
@@ -32,29 +32,29 @@ const v = (e, t) => {
   },
   emits: ["click"],
   setup(e, { emit: t }) {
-    return (s, d) => (c(), p("button", {
-      class: w(["btn", [
+    return (n, r) => (s(), a("button", {
+      class: $(["btn", [
         `btn-${e.type}`,
         `btn-${e.size}`,
         { "btn-block": e.block },
         { "btn-disabled": e.disabled }
       ]]),
       disabled: e.disabled,
-      onClick: d[0] || (d[0] = (i) => s.$emit("click", i))
+      onClick: r[0] || (r[0] = (d) => n.$emit("click", d))
     }, [
-      f(s.$slots, "default", {}, void 0, !0)
-    ], 10, N));
+      z(n.$slots, "default", {}, void 0, !0)
+    ], 10, te));
   }
-}, F = /* @__PURE__ */ v(H, [["__scopeId", "data-v-75f082b2"]]), R = {
+}, ae = /* @__PURE__ */ C(se, [["__scopeId", "data-v-75f082b2"]]), ne = {
   key: 0,
   class: "card-header"
-}, Y = {
+}, oe = {
   key: 0,
   class: "card-header-title"
-}, G = { class: "card-body" }, P = {
+}, le = { class: "card-body" }, re = {
   key: 1,
   class: "card-footer"
-}, U = {
+}, ie = {
   __name: "Card",
   props: {
     // 卡片标题
@@ -69,31 +69,31 @@ const v = (e, t) => {
     }
   },
   setup(e) {
-    return (t, s) => (c(), p("div", {
-      class: w(["card", { "card-shadow": e.shadow }])
+    return (t, n) => (s(), a("div", {
+      class: $(["card", { "card-shadow": e.shadow }])
     }, [
-      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)
+      t.$slots.header || e.title ? (s(), a("div", ne, [
+        e.title ? (s(), a("h3", oe, T(e.title), 1)) : g("", !0),
+        z(t.$slots, "header", {}, void 0, !0)
+      ])) : g("", !0),
+      o("div", le, [
+        z(t.$slots, "default", {}, void 0, !0)
       ]),
-      t.$slots.footer ? (c(), p("div", P, [
-        f(t.$slots, "footer", {}, void 0, !0)
-      ])) : h("", !0)
+      t.$slots.footer ? (s(), a("div", re, [
+        z(t.$slots, "footer", {}, void 0, !0)
+      ])) : g("", !0)
     ], 2));
   }
-}, W = /* @__PURE__ */ v(U, [["__scopeId", "data-v-1e2b2467"]]), q = { class: "modal-dialog" }, X = { class: "modal-header" }, J = {
+}, ce = /* @__PURE__ */ C(ie, [["__scopeId", "data-v-1e2b2467"]]), de = { class: "modal-dialog" }, ue = { class: "modal-header" }, pe = {
   key: 0,
   class: "modal-header-title"
-}, K = { class: "modal-body" }, Q = {
+}, me = { class: "modal-body" }, ge = {
   key: 0,
   class: "modal-footer"
-}, Z = {
+}, ve = {
   key: 1,
   class: "modal-footer"
-}, ee = {
+}, he = {
   __name: "Modal",
   props: {
     // 是否显示模态框
@@ -118,59 +118,59 @@ const v = (e, t) => {
   },
   emits: ["close", "cancel", "confirm"],
   setup(e, { emit: t }) {
-    const s = t, d = () => {
-      s("close");
-    }, i = () => {
-      s("cancel");
-    }, m = () => {
-      s("confirm");
+    const n = t, r = () => {
+      n("close");
+    }, d = () => {
+      n("cancel");
+    }, c = () => {
+      n("confirm");
     };
-    return (o, u) => e.visible ? (c(), p("div", {
+    return (l, v) => e.visible ? (s(), a("div", {
       key: 0,
-      class: w(["modal", { "modal-show": e.visible }])
+      class: $(["modal", { "modal-show": e.visible }])
     }, [
-      l("div", q, [
-        l("div", {
+      o("div", de, [
+        o("div", {
           class: "modal-content",
-          style: S({ width: e.width })
+          style: x({ width: e.width })
         }, [
-          l("div", X, [
-            e.title ? (c(), p("h3", J, _(e.title), 1)) : h("", !0),
-            l("button", {
+          o("div", ue, [
+            e.title ? (s(), a("h3", pe, T(e.title), 1)) : g("", !0),
+            o("button", {
               class: "modal-header-close",
-              onClick: d
+              onClick: r
             }, "×")
           ]),
-          l("div", K, [
-            f(o.$slots, "default", {}, void 0, !0)
+          o("div", me, [
+            z(l.$slots, "default", {}, void 0, !0)
           ]),
-          o.$slots.footer ? (c(), p("div", Q, [
-            f(o.$slots, "footer", {}, void 0, !0)
-          ])) : e.showFooter ? (c(), p("div", Z, [
-            l("button", {
+          l.$slots.footer ? (s(), a("div", ge, [
+            z(l.$slots, "footer", {}, void 0, !0)
+          ])) : e.showFooter ? (s(), a("div", ve, [
+            o("button", {
               class: "btn btn-secondary",
-              onClick: i
+              onClick: d
             }, "取消"),
-            l("button", {
+            o("button", {
               class: "btn btn-primary",
-              onClick: m
+              onClick: c
             }, "确定")
-          ])) : h("", !0)
+          ])) : g("", !0)
         ], 4)
       ])
-    ], 2)) : h("", !0);
+    ], 2)) : g("", !0);
   }
-}, te = /* @__PURE__ */ v(ee, [["__scopeId", "data-v-39af2dcd"]]), se = ["innerHTML"], ae = { class: "text-sm font-medium" }, oe = ["onClick"], ne = /* @__PURE__ */ Object.assign({
+}, fe = /* @__PURE__ */ C(he, [["__scopeId", "data-v-39af2dcd"]]), ye = ["innerHTML"], be = { class: "text-sm font-medium" }, ke = ["onClick"], we = /* @__PURE__ */ Object.assign({
   name: "Message"
 }, {
   __name: "Message",
   setup(e, { expose: t }) {
-    const s = b([]), d = {
+    const n = I([]), r = {
       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 = {
+    }, d = {
       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>`,
@@ -185,77 +185,464 @@ const v = (e, t) => {
     <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
+    let c = 0;
+    const l = (p) => {
+      const i = ++c, u = {
+        id: i,
+        type: p.type || "info",
+        content: p.content || "",
+        duration: p.duration ?? 3e3,
+        closable: p.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 n.value.push(u), u.duration > 0 && setTimeout(() => {
+        v(i);
+      }, u.duration), i;
+    }, v = (p) => {
+      const i = n.value.findIndex((u) => u.id === p);
+      i > -1 && n.value.splice(i, 1);
     };
     return t({
-      addMessage: o,
-      removeMessage: u,
+      addMessage: l,
+      removeMessage: v,
       clearAll: () => {
-        s.value = [];
+        n.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, {
+      success: (p, i = {}) => l({ ...i, type: "success", content: p }),
+      warning: (p, i = {}) => l({ ...i, type: "warning", content: p }),
+      error: (p, i = {}) => l({ ...i, type: "error", content: p }),
+      info: (p, i = {}) => l({ ...i, type: "info", content: p })
+    }), (p, i) => (s(), X(K, { to: "body" }, [
+      J(Q, {
         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]])
+        default: Z(() => [
+          (s(!0), a(_, null, B(n.value, (u) => (s(), a("div", {
+            key: u.id,
+            class: $(["pointer-events-auto flex items-center gap-3 px-5 py-3 rounded-lg shadow-lg backdrop-blur-sm transition-all duration-300", r[u.type]])
           }, [
-            l("span", {
+            o("span", {
               class: "flex-shrink-0",
-              innerHTML: i[n.type]
-            }, null, 8, se),
-            l("span", ae, _(n.content), 1),
-            n.closable ? (c(), p("button", {
+              innerHTML: d[u.type]
+            }, null, 8, ye),
+            o("span", be, T(u.content), 1),
+            u.closable ? (s(), a("button", {
               key: 0,
-              onClick: (Ie) => u(n.id),
+              onClick: (V) => v(u.id),
               class: "flex-shrink-0 ml-2 p-1 rounded-full hover:bg-black/10 transition-colors"
-            }, [...a[0] || (a[0] = [
-              l("svg", {
+            }, [...i[0] || (i[0] = [
+              o("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" })
+                o("path", { d: "M18 6L6 18M6 6l12 12" })
               ], -1)
-            ])], 8, oe)) : h("", !0)
+            ])], 8, ke)) : g("", !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 = `${{
+}), xe = /* @__PURE__ */ C(we, [["__scopeId", "data-v-d727fd6c"]]), _e = ["src", "alt"], $e = {
+  key: 1,
+  class: "slide-title"
+}, ze = {
+  key: 0,
+  class: "carousel-indicators"
+}, Be = ["onClick"], Ce = {
+  viewBox: "0 0 24 24",
+  width: "24",
+  height: "24"
+}, Se = ["d"], Me = {
+  viewBox: "0 0 24 24",
+  width: "24",
+  height: "24"
+}, Le = ["d"], Ie = /* @__PURE__ */ Object.assign({
+  name: "Carousel"
+}, {
+  __name: "Carousel",
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    },
+    height: {
+      type: String,
+      default: "300px"
+    },
+    direction: {
+      type: String,
+      default: "horizontal",
+      validator: (e) => ["horizontal", "vertical"].includes(e)
+    },
+    autoplay: {
+      type: Boolean,
+      default: !0
+    },
+    interval: {
+      type: Number,
+      default: 3e3
+    },
+    showIndicators: {
+      type: Boolean,
+      default: !0
+    },
+    showArrows: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  emits: ["change"],
+  setup(e, { expose: t, emit: n }) {
+    const r = e, d = n, c = I(0);
+    let l = null;
+    const v = A(() => {
+      const y = c.value * 100;
+      return r.direction === "vertical" ? { transform: `translateY(-${y}%)` } : { transform: `translateX(-${y}%)` };
+    }), f = () => {
+      c.value = (c.value + 1) % r.items.length, d("change", c.value);
+    }, p = () => {
+      c.value = (c.value - 1 + r.items.length) % r.items.length, d("change", c.value);
+    }, i = (y) => {
+      c.value = y, d("change", c.value);
+    }, u = () => {
+      r.autoplay && r.items.length > 1 && (l = setInterval(f, r.interval));
+    }, V = () => {
+      l && (clearInterval(l), l = null);
+    };
+    return F(() => {
+      u();
+    }), ee(() => {
+      V();
+    }), t({
+      next: f,
+      prev: p,
+      goTo: i,
+      currentIndex: c
+    }), (y, k) => (s(), a("div", {
+      class: $(["ld-carousel", { "ld-carousel--vertical": e.direction === "vertical" }]),
+      style: x({ height: e.height })
+    }, [
+      o("div", {
+        class: "carousel-container",
+        style: x(v.value)
+      }, [
+        (s(!0), a(_, null, B(e.items, (S, M) => (s(), a("div", {
+          key: M,
+          class: $(["carousel-slide", { active: M === c.value }])
+        }, [
+          z(y.$slots, "item", {
+            item: S,
+            index: M
+          }, () => [
+            S.image ? (s(), a("img", {
+              key: 0,
+              src: S.image,
+              alt: S.title || ""
+            }, null, 8, _e)) : g("", !0),
+            S.title ? (s(), a("div", $e, T(S.title), 1)) : g("", !0)
+          ], !0)
+        ], 2))), 128))
+      ], 4),
+      e.showIndicators ? (s(), a("div", ze, [
+        (s(!0), a(_, null, B(e.items, (S, M) => (s(), a("span", {
+          key: M,
+          class: $(["indicator", { active: M === c.value }]),
+          onClick: (O) => i(M)
+        }, null, 10, Be))), 128))
+      ])) : g("", !0),
+      e.showArrows ? (s(), a(_, { key: 1 }, [
+        o("button", {
+          class: "carousel-arrow prev",
+          onClick: p
+        }, [
+          (s(), a("svg", Ce, [
+            o("path", {
+              fill: "currentColor",
+              d: e.direction === "vertical" ? "M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" : "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
+            }, null, 8, Se)
+          ]))
+        ]),
+        o("button", {
+          class: "carousel-arrow next",
+          onClick: f
+        }, [
+          (s(), a("svg", Me, [
+            o("path", {
+              fill: "currentColor",
+              d: e.direction === "vertical" ? "M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z" : "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
+            }, null, 8, Le)
+          ]))
+        ])
+      ], 64)) : g("", !0)
+    ], 6));
+  }
+}), Te = /* @__PURE__ */ C(Ie, [["__scopeId", "data-v-42bf1623"]]), Ae = {
+  key: 1,
+  class: "dots"
+}, Ve = {
+  key: 4,
+  class: "bars"
+}, Ee = {
+  key: 5,
+  class: "loading-text"
+}, Oe = /* @__PURE__ */ Object.assign({
+  name: "Loading"
+}, {
+  __name: "Loading",
+  props: {
+    type: {
+      type: String,
+      default: "spinner",
+      validator: (e) => ["spinner", "dots", "ring", "pulse", "bars"].includes(e)
+    },
+    size: {
+      type: String,
+      default: "40px"
+    },
+    color: {
+      type: String,
+      default: "var(--ld-color-primary, #6366f1)"
+    },
+    text: {
+      type: String,
+      default: ""
+    },
+    fullscreen: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(e) {
+    const t = e, n = A(() => ({
+      width: t.size,
+      height: t.size,
+      "--spinner-color": t.color
+    })), r = A(() => ({
+      width: t.size,
+      height: t.size,
+      "--ring-color": t.color
+    }));
+    return (d, c) => (s(), a("div", {
+      class: $(["ld-loading", [`ld-loading--${e.type}`, { "ld-loading--fullscreen": e.fullscreen }]])
+    }, [
+      e.type === "spinner" ? (s(), a("div", {
+        key: 0,
+        class: "spinner",
+        style: x(n.value)
+      }, [
+        (s(), a(_, null, B(12, (l) => o("div", {
+          key: l,
+          class: "spinner-blade"
+        })), 64))
+      ], 4)) : e.type === "dots" ? (s(), a("div", Ae, [
+        (s(), a(_, null, B(3, (l) => o("span", {
+          key: l,
+          class: "dot",
+          style: x({ background: e.color })
+        }, null, 4)), 64))
+      ])) : e.type === "ring" ? (s(), a("div", {
+        key: 2,
+        class: "ring",
+        style: x(r.value)
+      }, [...c[0] || (c[0] = [
+        o("div", { class: "ring-inner" }, null, -1)
+      ])], 4)) : e.type === "pulse" ? (s(), a("div", {
+        key: 3,
+        class: "pulse",
+        style: x({ background: e.color, width: e.size, height: e.size })
+      }, null, 4)) : e.type === "bars" ? (s(), a("div", Ve, [
+        (s(), a(_, null, B(5, (l) => o("span", {
+          key: l,
+          class: "bar",
+          style: x({ background: e.color })
+        }, null, 4)), 64))
+      ])) : g("", !0),
+      e.text ? (s(), a("div", Ee, T(e.text), 1)) : g("", !0)
+    ], 2));
+  }
+}), je = /* @__PURE__ */ C(Oe, [["__scopeId", "data-v-5052ea89"]]), De = {
+  key: 0,
+  class: "ld-table-loading"
+}, He = {
+  key: 0,
+  class: "loading-text"
+}, Pe = { class: "ld-table" }, Ne = ["onClick"], Fe = { class: "th-content" }, Ye = { key: 0 }, Re = ["colspan"], Ue = ["onClick"], qe = /* @__PURE__ */ Object.assign({
+  name: "ldTable"
+}, {
+  __name: "Table",
+  props: {
+    columns: {
+      type: Array,
+      required: !0
+    },
+    data: {
+      type: Array,
+      default: () => []
+    },
+    bordered: {
+      type: Boolean,
+      default: !1
+    },
+    striped: {
+      type: Boolean,
+      default: !1
+    },
+    loading: {
+      type: Boolean,
+      default: !1
+    },
+    loadingText: {
+      type: String,
+      default: ""
+    },
+    // API 相关
+    api: {
+      type: Function,
+      default: null
+    },
+    autoLoad: {
+      type: Boolean,
+      default: !0
+    },
+    loadParams: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: ["row-click", "load-success", "load-error"],
+  setup(e, { expose: t, emit: n }) {
+    const r = e, d = n, c = I(!1), l = I([]), v = A(() => typeof r.api == "function"), f = A(() => r.loading || c.value), p = A(() => v.value ? l.value : r.data), i = async (h = {}) => {
+      if (v.value) {
+        c.value = !0;
+        try {
+          const b = { ...r.loadParams, ...h }, m = await r.api(b);
+          return l.value = Array.isArray(m) ? m : m?.data || m?.list || [], d("load-success", l.value), l.value;
+        } catch (b) {
+          throw console.error("[ld-table] Load error:", b), d("load-error", b), b;
+        } finally {
+          c.value = !1;
+        }
+      }
+    }, u = (h = {}) => i(h), V = () => {
+      l.value = [];
+    };
+    Y(() => r.loadParams, (h) => {
+      v.value && r.autoLoad && i();
+    }, { deep: !0 }), F(() => {
+      v.value && r.autoLoad && i();
+    });
+    const y = I(""), k = I(""), S = (h) => {
+      y.value === h ? (k.value = k.value === "asc" ? "desc" : k.value === "desc" ? "" : "asc", k.value || (y.value = "")) : (y.value = h, k.value = "asc");
+    }, M = (h) => y.value !== h ? "" : k.value === "asc" ? "sort-asc" : k.value === "desc" ? "sort-desc" : "", O = A(() => {
+      const h = p.value;
+      return !y.value || !k.value ? h : [...h].sort((b, m) => {
+        const L = b[y.value], w = m[y.value];
+        if (typeof L == "number" && typeof w == "number")
+          return k.value === "asc" ? L - w : w - L;
+        const H = String(L || ""), P = String(w || "");
+        return k.value === "asc" ? H.localeCompare(P) : P.localeCompare(H);
+      });
+    });
+    return t({
+      load: i,
+      reload: u,
+      clear: V,
+      getData: () => l.value
+    }), (h, b) => (s(), a("div", {
+      class: $(["ld-table-wrapper", { "ld-table--bordered": e.bordered, "ld-table--striped": e.striped }])
+    }, [
+      f.value ? (s(), a("div", De, [
+        b[0] || (b[0] = o("div", { class: "loading-spinner" }, [
+          o("svg", {
+            class: "circular",
+            viewBox: "0 0 50 50"
+          }, [
+            o("circle", {
+              class: "path",
+              cx: "25",
+              cy: "25",
+              r: "20",
+              fill: "none"
+            })
+          ])
+        ], -1)),
+        e.loadingText ? (s(), a("span", He, T(e.loadingText), 1)) : g("", !0)
+      ])) : g("", !0),
+      o("table", Pe, [
+        o("thead", null, [
+          o("tr", null, [
+            (s(!0), a(_, null, B(e.columns, (m) => (s(), a("th", {
+              key: m.key,
+              style: x({ width: m.width, textAlign: m.align || "left" }),
+              onClick: (L) => m.sortable && S(m.key)
+            }, [
+              o("div", Fe, [
+                o("span", null, T(m.title), 1),
+                m.sortable ? (s(), a("span", {
+                  key: 0,
+                  class: $(["sort-icon", M(m.key)])
+                }, [...b[1] || (b[1] = [
+                  o("svg", {
+                    viewBox: "0 0 24 24",
+                    width: "14",
+                    height: "14"
+                  }, [
+                    o("path", {
+                      fill: "currentColor",
+                      d: "M7 10l5-5 5 5H7zm0 4l5 5 5-5H7z"
+                    })
+                  ], -1)
+                ])], 2)) : g("", !0)
+              ])
+            ], 12, Ne))), 128))
+          ])
+        ]),
+        o("tbody", null, [
+          !O.value.length && !f.value ? (s(), a("tr", Ye, [
+            o("td", {
+              colspan: e.columns.length,
+              class: "empty-cell"
+            }, [
+              z(h.$slots, "empty", {}, () => [
+                b[2] || (b[2] = R('<div class="empty-content" data-v-567f3024><svg viewBox="0 0 64 41" width="64" height="41" data-v-567f3024><g transform="translate(0 1)" fill="none" fill-rule="evenodd" data-v-567f3024><ellipse fill="var(--ld-color-bg-secondary, #f5f5f5)" cx="32" cy="33" rx="32" ry="7" data-v-567f3024></ellipse><g fill-rule="nonzero" stroke="var(--ld-color-border, #d9d9d9)" data-v-567f3024><path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" data-v-567f3024></path><path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="var(--ld-color-bg, #fafafa)" data-v-567f3024></path></g></g></svg><span data-v-567f3024>暂无数据</span></div>', 1))
+              ], !0)
+            ], 8, Re)
+          ])) : g("", !0),
+          (s(!0), a(_, null, B(O.value, (m, L) => (s(), a("tr", {
+            key: L,
+            onClick: (w) => h.$emit("row-click", m, L)
+          }, [
+            (s(!0), a(_, null, B(e.columns, (w) => (s(), a("td", {
+              key: w.key,
+              style: x({ textAlign: w.align || "left" })
+            }, [
+              z(h.$slots, w.key, {
+                row: m,
+                index: L,
+                value: m[w.key]
+              }, () => [
+                U(T(m[w.key]), 1)
+              ], !0)
+            ], 4))), 128))
+          ], 8, Ue))), 128))
+        ])
+      ])
+    ], 2));
+  }
+}), Ge = /* @__PURE__ */ C(qe, [["__scopeId", "data-v-567f3024"]]);
+I([]);
+let We = 0;
+const Xe = (e) => {
+  const t = ++We, n = e.type || "info", r = e.content || "", d = e.duration ?? 3e3, c = e.closable ?? !1, l = document.createElement("div");
+  l.className = `ld-message ld-message--${n}`, l.setAttribute("data-id", t);
+  let f = `${{
     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>`,
@@ -269,13 +656,13 @@ const de = (e) => {
     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})">
+  }[n]}<span class="ld-message-content">${r}</span>`;
+  return c && (f += `<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 = () => {
+    </button>`), l.innerHTML = f, { id: t, element: l, duration: d };
+}, Ke = () => {
   let e = document.getElementById("ld-message-root");
   if (!e) {
     e = document.createElement("div"), e.id = "ld-message-root", document.body.appendChild(e);
@@ -344,59 +731,76 @@ const de = (e) => {
     `, document.head.appendChild(t);
   }
   return e;
-}, k = (e) => {
+}, j = (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();
+  const n = t.querySelector(`[data-id="${e}"]`);
+  n && (n.classList.add("ld-message--closing"), setTimeout(() => {
+    n.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,
+typeof window < "u" && (window.__ldMessageClose = j);
+const E = (e) => {
+  const t = Ke(), { id: n, element: r, duration: d } = Xe(e);
+  return t.appendChild(r), d > 0 && setTimeout(() => {
+    j(n);
+  }, d), n;
+}, N = {
+  success: (e, t = {}) => E({ ...t, type: "success", content: e }),
+  warning: (e, t = {}) => E({ ...t, type: "warning", content: e }),
+  error: (e, t = {}) => E({ ...t, type: "error", content: e }),
+  info: (e, t = {}) => E({ ...t, type: "info", content: e }),
+  close: j,
   closeAll: () => {
     const e = document.getElementById("ld-message-root");
     e && (e.innerHTML = "");
   }
-}, ie = { class: "lzbutton-wrapper" }, pe = { class: "button" }, ue = /* @__PURE__ */ Object.assign({
+}, Je = { class: "lzbutton-wrapper" }, Qe = { class: "button" }, Ze = /* @__PURE__ */ Object.assign({
   name: "Lzbutton"
 }, {
   __name: "lzbutton",
   setup(e) {
-    return (t, s) => (c(), p("div", ie, [
-      l("button", pe, [
-        s[1] || (s[1] = l("svg", {
+    return (t, n) => (s(), a("div", Je, [
+      o("button", Qe, [
+        n[1] || (n[1] = o("svg", {
           xmlns: "http://www.w3.org/2000/svg",
           viewBox: "0 0 36 24"
         }, [
-          l("path", { d: "m18 0 8 12 10-8-4 20H4L0 4l10 8 8-12z" })
+          o("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))
+        z(t.$slots, "default", {}, () => [
+          n[0] || (n[0] = U("Unlock Pro", -1))
         ], !0)
       ])
     ]));
   }
-}), me = /* @__PURE__ */ v(ue, [["__scopeId", "data-v-7124b716"]]), ge = { class: "Lztext-wrapper" }, fe = /* @__PURE__ */ Object.assign({
+}), et = /* @__PURE__ */ C(Ze, [["__scopeId", "data-v-7124b716"]]), tt = { class: "Lztext-wrapper" }, st = { class: "loader-wrapper" }, at = /* @__PURE__ */ Object.assign({
   name: "Lztext"
 }, {
   __name: "Lztext",
+  props: {
+    /**
+     * 显示的文字内容
+     */
+    text: {
+      type: String,
+      default: "Generating"
+    }
+  },
   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)
-    ])]));
+    const t = e, n = A(() => t.text.split(""));
+    return (r, d) => (s(), a("div", tt, [
+      o("div", st, [
+        (s(!0), a(_, null, B(n.value, (c, l) => (s(), a("span", {
+          key: l,
+          class: "loader-letter",
+          style: x({ animationDelay: `${0.1 + l * 0.105}s` })
+        }, T(c === " " ? " " : c), 5))), 128)),
+        d[0] || (d[0] = o("div", { class: "loader" }, null, -1))
+      ])
+    ]));
   }
-}), he = /* @__PURE__ */ v(fe, [["__scopeId", "data-v-f22456dd"]]), ve = { class: "lztheme-wrapper" }, ye = { class: "theme__toggle-wrap" }, be = ["checked"], we = /* @__PURE__ */ Object.assign({
+}), nt = /* @__PURE__ */ C(at, [["__scopeId", "data-v-2cca50b0"]]), ot = { class: "lztheme-wrapper" }, lt = { class: "theme__toggle-wrap" }, rt = ["checked"], it = /* @__PURE__ */ Object.assign({
   name: "Lztheme"
 }, {
   __name: "lztheme",
@@ -408,51 +812,51 @@ const y = (e) => {
     }
   },
   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;
+  setup(e, { expose: t, emit: n }) {
+    let r = 0;
+    const d = `lztheme-toggle-${++r}-${Date.now()}`, c = e, l = n, v = I(null), f = I(c.modelValue);
+    Y(() => c.modelValue, (i) => {
+      f.value = i;
     });
-    const r = (a) => {
-      const n = a.target.checked;
-      g.value = n, o("update:modelValue", n), o("change", n);
+    const p = (i) => {
+      const u = i.target.checked;
+      f.value = u, l("update:modelValue", u), l("change", u);
     };
     return t({
       toggle: () => {
-        u.value && u.value.click();
+        v.value && v.value.click();
       },
-      setDark: (a) => {
-        g.value = a, o("update:modelValue", a), o("change", a);
+      setDark: (i) => {
+        f.value = i, l("update:modelValue", i), l("change", i);
       }
-    }), (a, n) => (c(), p("div", ve, [
-      l("label", {
-        for: i,
+    }), (i, u) => (s(), a("div", ot, [
+      o("label", {
+        for: d,
         class: "theme"
       }, [
-        l("span", ye, [
-          l("input", {
-            id: i,
+        o("span", lt, [
+          o("input", {
+            id: d,
             ref_key: "toggleRef",
-            ref: u,
+            ref: v,
             class: "theme__toggle",
             type: "checkbox",
             role: "switch",
             name: "theme",
             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))
+            checked: f.value,
+            onChange: p
+          }, null, 40, rt),
+          u[0] || (u[0] = R('<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))
         ])
       ])
     ]));
   }
-}), _e = /* @__PURE__ */ v(we, [["__scopeId", "data-v-e887d581"]]), ke = {
-  Lzbutton: me,
-  Lztext: he,
-  Lztheme: _e
-}, xe = {
+}), ct = /* @__PURE__ */ C(it, [["__scopeId", "data-v-e887d581"]]), dt = {
+  Lzbutton: et,
+  Lztext: nt,
+  Lztheme: ct
+}, ut = {
   name: "Button",
   type: "vue",
   label: "Button 按钮",
@@ -466,7 +870,7 @@ const y = (e) => {
 <script setup>
 import { Button } from 'little-dizzy'
 <\/script>`
-}, Be = {
+}, pt = {
   name: "Card",
   type: "vue",
   label: "Card 卡片",
@@ -486,7 +890,7 @@ import { Button } from 'little-dizzy'
 <script setup>
 import { Card, Button } from 'little-dizzy'
 <\/script>`
-}, ze = {
+}, mt = {
   name: "Modal",
   type: "vue",
   label: "Modal 模态框",
@@ -511,7 +915,7 @@ import { Modal, Button } from 'little-dizzy'
 
 const visible = ref(false)
 <\/script>`
-}, Ce = {
+}, gt = {
   name: "Message",
   type: "vue",
   label: "Message 消息提示",
@@ -551,14 +955,93 @@ const showInfo = () => {
   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, {
+}, vt = {
+  name: "Carousel",
+  type: "vue",
+  label: "Carousel 轮播图",
+  code: `<template>
+  <Carousel :items="items" height="300px" />
+</template>
+
+<script setup>
+import { Carousel } from 'little-dizzy'
+
+const items = [
+  { image: 'https://picsum.photos/800/300?random=1', title: '图片 1' },
+  { image: 'https://picsum.photos/800/300?random=2', title: '图片 2' },
+  { image: 'https://picsum.photos/800/300?random=3', title: '图片 3' }
+]
+<\/script>`
+}, ht = {
+  name: "Loading",
+  type: "vue",
+  label: "Loading 加载",
+  code: `<template>
+  <Loading type="spinner" />
+  <Loading type="dots" />
+  <Loading type="ring" />
+  <Loading type="pulse" />
+  <Loading type="bars" />
+</template>
+
+<script setup>
+import { Loading } from 'little-dizzy'
+<\/script>`
+}, ft = {
+  name: "Table",
+  type: "vue",
+  label: "Table 表格",
+  code: `<template>
+  <Table :columns="columns" :data="data" bordered striped />
+</template>
+
+<script setup>
+import { Table } from 'little-dizzy'
+
+const columns = [
+  { key: 'name', title: '姓名', width: '120px' },
+  { key: 'age', title: '年龄', width: '80px' },
+  { key: 'address', title: '地址' }
+]
+
+const data = [
+  { name: '张三', age: 28, address: '北京市朝阳区' },
+  { name: '李四', age: 32, address: '上海市浦东新区' },
+  { name: '王五', age: 25, address: '广州市天河区' }
+]
+<\/script>`
+}, yt = {
+  name: "Backtop",
+  type: "vue",
+  label: "Backtop 回到顶部",
+  code: `<template>
+  <!-- 基础用法 -->
+  <Backtop />
+
+  <!-- 指定滚动容器 -->
+  <Backtop target=".my-container" :visibility-height="100" />
+
+  <!-- 自定义内容 -->
+  <Backtop>
+    <span style="font-size: 12px;">UP</span>
+  </Backtop>
+</template>
+
+<script setup>
+import { Backtop } from 'little-dizzy'
+<\/script>`
+}, bt = [
+  ut,
+  pt,
+  mt,
+  gt,
+  vt,
+  ht,
+  ft,
+  yt
+], D = /* @__PURE__ */ new Map();
+function q(e) {
+  return !e || !e.name ? (console.warn("[LittleDizzy] Snippet must have a name property"), !1) : (D.set(e.name, {
     name: e.name,
     type: e.type || "html",
     label: e.label || e.name,
@@ -567,51 +1050,57 @@ function C(e) {
     ...e
   }), !0);
 }
-function $(e) {
+function G(e) {
   if (!Array.isArray(e))
     return console.warn("[LittleDizzy] registerSnippets expects an array"), 0;
   let t = 0;
-  return e.forEach((s) => {
-    C(s) && t++;
+  return e.forEach((n) => {
+    q(n) && t++;
   }), t;
 }
-function Me() {
+function kt() {
   const e = {};
-  return x.forEach((t, s) => {
-    e[s] = t;
+  return D.forEach((t, n) => {
+    e[n] = t;
   }), e;
 }
-function Se(e) {
-  return x.get(e);
+function wt(e) {
+  return D.get(e);
 }
-$($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
+G(bt);
+const W = {
+  Button: ae,
+  Card: ce,
+  Modal: fe,
+  Message: xe,
+  Carousel: Te,
+  Loading: je,
+  Table: Ge,
+  ...dt
+}, xt = (e, t = {}) => {
+  Object.entries(W).forEach(([n, r]) => {
+    e.component(t.prefix ? `${t.prefix}${n}` : n, r);
+  }), e.config.globalProperties.$message = N, e.provide("message", N);
+}, $t = kt, zt = q, Bt = G, Ct = wt, St = {
+  install: xt,
+  ...W
 };
 export {
-  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
+  ae as Button,
+  ce as Card,
+  Te as Carousel,
+  je as Loading,
+  et as Lzbutton,
+  nt as Lztext,
+  ct as Lztheme,
+  xe as Message,
+  fe as Modal,
+  Ge as Table,
+  dt as customComponents,
+  St as default,
+  Ct as getSnippet,
+  N as message,
+  zt as registerSnippet,
+  Bt as registerSnippets,
+  $t as snippets
 };