little-dizzy 2.4.0 → 2.6.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 n, openBlock as a, normalizeClass as C, renderSlot as _, createCommentVNode as f, createElementVNode as l, toDisplayString as V, normalizeStyle as w, ref as z, createBlock as R, Teleport as Z, createVNode as ee, TransitionGroup as te, withCtx as U, Fragment as $, renderList as S, computed as I, onMounted as j, onUnmounted as q, watch as G, createStaticVNode as W, createTextVNode as X, shallowRef as Y, Transition as se, withDirectives as ae, vShow as oe } from "vue";
+const B = (e, t) => {
+  const o = e.__vccOpts || e;
+  for (const [r, d] of t)
+    o[r] = d;
+  return o;
+}, ne = ["disabled"], le = {
   __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 (o, r) => (a(), n("button", {
+      class: C(["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) => o.$emit("click", d))
     }, [
-      f(s.$slots, "default", {}, void 0, !0)
-    ], 10, N));
+      _(o.$slots, "default", {}, void 0, !0)
+    ], 10, ne));
   }
-}, F = /* @__PURE__ */ v(H, [["__scopeId", "data-v-75f082b2"]]), R = {
+}, re = /* @__PURE__ */ B(le, [["__scopeId", "data-v-75f082b2"]]), ie = {
   key: 0,
   class: "card-header"
-}, Y = {
+}, ce = {
   key: 0,
   class: "card-header-title"
-}, G = { class: "card-body" }, P = {
+}, de = { class: "card-body" }, ue = {
   key: 1,
   class: "card-footer"
-}, U = {
+}, pe = {
   __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, o) => (a(), n("div", {
+      class: C(["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 ? (a(), n("div", ie, [
+        e.title ? (a(), n("h3", ce, V(e.title), 1)) : f("", !0),
+        _(t.$slots, "header", {}, void 0, !0)
+      ])) : f("", !0),
+      l("div", de, [
+        _(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 ? (a(), n("div", ue, [
+        _(t.$slots, "footer", {}, void 0, !0)
+      ])) : f("", !0)
     ], 2));
   }
-}, W = /* @__PURE__ */ v(U, [["__scopeId", "data-v-1e2b2467"]]), q = { class: "modal-dialog" }, X = { class: "modal-header" }, J = {
+}, me = /* @__PURE__ */ B(pe, [["__scopeId", "data-v-1e2b2467"]]), ge = { class: "modal-dialog" }, ve = { class: "modal-header" }, he = {
   key: 0,
   class: "modal-header-title"
-}, K = { class: "modal-body" }, Q = {
+}, fe = { class: "modal-body" }, ye = {
   key: 0,
   class: "modal-footer"
-}, Z = {
+}, be = {
   key: 1,
   class: "modal-footer"
-}, ee = {
+}, ke = {
   __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 o = t, r = () => {
+      o("close");
+    }, d = () => {
+      o("cancel");
+    }, c = () => {
+      o("confirm");
     };
-    return (o, u) => e.visible ? (c(), p("div", {
+    return (s, g) => e.visible ? (a(), n("div", {
       key: 0,
-      class: w(["modal", { "modal-show": e.visible }])
+      class: C(["modal", { "modal-show": e.visible }])
     }, [
-      l("div", q, [
+      l("div", ge, [
         l("div", {
           class: "modal-content",
-          style: S({ width: e.width })
+          style: w({ width: e.width })
         }, [
-          l("div", X, [
-            e.title ? (c(), p("h3", J, _(e.title), 1)) : h("", !0),
+          l("div", ve, [
+            e.title ? (a(), n("h3", he, V(e.title), 1)) : f("", !0),
             l("button", {
               class: "modal-header-close",
-              onClick: d
+              onClick: r
             }, "×")
           ]),
-          l("div", K, [
-            f(o.$slots, "default", {}, void 0, !0)
+          l("div", fe, [
+            _(s.$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, [
+          s.$slots.footer ? (a(), n("div", ye, [
+            _(s.$slots, "footer", {}, void 0, !0)
+          ])) : e.showFooter ? (a(), n("div", be, [
             l("button", {
               class: "btn btn-secondary",
-              onClick: i
+              onClick: d
             }, "取消"),
             l("button", {
               class: "btn btn-primary",
-              onClick: m
+              onClick: c
             }, "确定")
-          ])) : h("", !0)
+          ])) : f("", !0)
         ], 4)
       ])
-    ], 2)) : h("", !0);
+    ], 2)) : f("", !0);
   }
-}, te = /* @__PURE__ */ v(ee, [["__scopeId", "data-v-39af2dcd"]]), se = ["innerHTML"], ae = { class: "text-sm font-medium" }, oe = ["onClick"], ne = /* @__PURE__ */ Object.assign({
+}, we = /* @__PURE__ */ B(ke, [["__scopeId", "data-v-39af2dcd"]]), xe = ["innerHTML"], _e = { class: "text-sm font-medium" }, $e = ["onClick"], Be = /* @__PURE__ */ Object.assign({
   name: "Message"
 }, {
   __name: "Message",
   setup(e, { expose: t }) {
-    const s = b([]), d = {
+    const o = z([]), 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,54 +185,54 @@ 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 s = (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 o.value.push(u), u.duration > 0 && setTimeout(() => {
+        g(i);
+      }, u.duration), i;
+    }, g = (p) => {
+      const i = o.value.findIndex((u) => u.id === p);
+      i > -1 && o.value.splice(i, 1);
     };
     return t({
-      addMessage: o,
-      removeMessage: u,
+      addMessage: s,
+      removeMessage: g,
       clearAll: () => {
-        s.value = [];
+        o.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 = {}) => s({ ...i, type: "success", content: p }),
+      warning: (p, i = {}) => s({ ...i, type: "warning", content: p }),
+      error: (p, i = {}) => s({ ...i, type: "error", content: p }),
+      info: (p, i = {}) => s({ ...i, type: "info", content: p })
+    }), (p, i) => (a(), R(Z, { to: "body" }, [
+      ee(te, {
         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: U(() => [
+          (a(!0), n($, null, S(o.value, (u) => (a(), n("div", {
+            key: u.id,
+            class: C(["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", {
               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, xe),
+            l("span", _e, V(u.content), 1),
+            u.closable ? (a(), n("button", {
               key: 0,
-              onClick: (Ie) => u(n.id),
+              onClick: (A) => g(u.id),
               class: "flex-shrink-0 ml-2 p-1 rounded-full hover:bg-black/10 transition-colors"
-            }, [...a[0] || (a[0] = [
+            }, [...i[0] || (i[0] = [
               l("svg", {
                 class: "w-4 h-4",
                 viewBox: "0 0 24 24",
@@ -242,20 +242,484 @@ const v = (e, t) => {
               }, [
                 l("path", { d: "M18 6L6 18M6 6l12 12" })
               ], -1)
-            ])], 8, oe)) : h("", !0)
+            ])], 8, $e)) : f("", !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 = `${{
+}), ze = /* @__PURE__ */ B(Be, [["__scopeId", "data-v-d727fd6c"]]), Ce = ["src", "alt"], Se = {
+  key: 1,
+  class: "slide-title"
+}, Me = {
+  key: 0,
+  class: "carousel-indicators"
+}, Le = ["onClick"], Te = {
+  viewBox: "0 0 24 24",
+  width: "24",
+  height: "24"
+}, Ie = ["d"], Ve = {
+  viewBox: "0 0 24 24",
+  width: "24",
+  height: "24"
+}, Ae = ["d"], Ee = /* @__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: o }) {
+    const r = e, d = o, c = z(0);
+    let s = null;
+    const g = I(() => {
+      const v = c.value * 100;
+      return r.direction === "vertical" ? { transform: `translateY(-${v}%)` } : { transform: `translateX(-${v}%)` };
+    }), h = () => {
+      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 = (v) => {
+      c.value = v, d("change", c.value);
+    }, u = () => {
+      r.autoplay && r.items.length > 1 && (s = setInterval(h, r.interval));
+    }, A = () => {
+      s && (clearInterval(s), s = null);
+    };
+    return j(() => {
+      u();
+    }), q(() => {
+      A();
+    }), t({
+      next: h,
+      prev: p,
+      goTo: i,
+      currentIndex: c
+    }), (v, b) => (a(), n("div", {
+      class: C(["ld-carousel", { "ld-carousel--vertical": e.direction === "vertical" }]),
+      style: w({ height: e.height })
+    }, [
+      l("div", {
+        class: "carousel-container",
+        style: w(g.value)
+      }, [
+        (a(!0), n($, null, S(e.items, (M, L) => (a(), n("div", {
+          key: L,
+          class: C(["carousel-slide", { active: L === c.value }])
+        }, [
+          _(v.$slots, "item", {
+            item: M,
+            index: L
+          }, () => [
+            M.image ? (a(), n("img", {
+              key: 0,
+              src: M.image,
+              alt: M.title || ""
+            }, null, 8, Ce)) : f("", !0),
+            M.title ? (a(), n("div", Se, V(M.title), 1)) : f("", !0)
+          ], !0)
+        ], 2))), 128))
+      ], 4),
+      e.showIndicators ? (a(), n("div", Me, [
+        (a(!0), n($, null, S(e.items, (M, L) => (a(), n("span", {
+          key: L,
+          class: C(["indicator", { active: L === c.value }]),
+          onClick: (O) => i(L)
+        }, null, 10, Le))), 128))
+      ])) : f("", !0),
+      e.showArrows ? (a(), n($, { key: 1 }, [
+        l("button", {
+          class: "carousel-arrow prev",
+          onClick: p
+        }, [
+          (a(), n("svg", Te, [
+            l("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, Ie)
+          ]))
+        ]),
+        l("button", {
+          class: "carousel-arrow next",
+          onClick: h
+        }, [
+          (a(), n("svg", Ve, [
+            l("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, Ae)
+          ]))
+        ])
+      ], 64)) : f("", !0)
+    ], 6));
+  }
+}), Oe = /* @__PURE__ */ B(Ee, [["__scopeId", "data-v-42bf1623"]]), je = {
+  key: 1,
+  class: "dots"
+}, De = {
+  key: 4,
+  class: "bars"
+}, He = {
+  key: 5,
+  class: "loading-text"
+}, Ne = /* @__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, o = I(() => ({
+      width: t.size,
+      height: t.size,
+      "--spinner-color": t.color
+    })), r = I(() => ({
+      width: t.size,
+      height: t.size,
+      "--ring-color": t.color
+    }));
+    return (d, c) => (a(), n("div", {
+      class: C(["ld-loading", [`ld-loading--${e.type}`, { "ld-loading--fullscreen": e.fullscreen }]])
+    }, [
+      e.type === "spinner" ? (a(), n("div", {
+        key: 0,
+        class: "spinner",
+        style: w(o.value)
+      }, [
+        (a(), n($, null, S(12, (s) => l("div", {
+          key: s,
+          class: "spinner-blade"
+        })), 64))
+      ], 4)) : e.type === "dots" ? (a(), n("div", je, [
+        (a(), n($, null, S(3, (s) => l("span", {
+          key: s,
+          class: "dot",
+          style: w({ background: e.color })
+        }, null, 4)), 64))
+      ])) : e.type === "ring" ? (a(), n("div", {
+        key: 2,
+        class: "ring",
+        style: w(r.value)
+      }, [...c[0] || (c[0] = [
+        l("div", { class: "ring-inner" }, null, -1)
+      ])], 4)) : e.type === "pulse" ? (a(), n("div", {
+        key: 3,
+        class: "pulse",
+        style: w({ background: e.color, width: e.size, height: e.size })
+      }, null, 4)) : e.type === "bars" ? (a(), n("div", De, [
+        (a(), n($, null, S(5, (s) => l("span", {
+          key: s,
+          class: "bar",
+          style: w({ background: e.color })
+        }, null, 4)), 64))
+      ])) : f("", !0),
+      e.text ? (a(), n("div", He, V(e.text), 1)) : f("", !0)
+    ], 2));
+  }
+}), Pe = /* @__PURE__ */ B(Ne, [["__scopeId", "data-v-5052ea89"]]), Ye = {
+  key: 0,
+  class: "ld-table-loading"
+}, Fe = {
+  key: 0,
+  class: "loading-text"
+}, Re = { class: "ld-table" }, Ue = ["onClick"], qe = { class: "th-content" }, Ge = { key: 0 }, We = ["colspan"], Xe = ["onClick"], Ke = /* @__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: o }) {
+    const r = e, d = o, c = z(!1), s = z([]), g = I(() => typeof r.api == "function"), h = I(() => r.loading || c.value), p = I(() => g.value ? s.value : r.data), i = async (y = {}) => {
+      if (g.value) {
+        c.value = !0;
+        try {
+          const k = { ...r.loadParams, ...y }, m = await r.api(k);
+          return s.value = Array.isArray(m) ? m : m?.data || m?.list || [], d("load-success", s.value), s.value;
+        } catch (k) {
+          throw console.error("[ld-table] Load error:", k), d("load-error", k), k;
+        } finally {
+          c.value = !1;
+        }
+      }
+    }, u = (y = {}) => i(y), A = () => {
+      s.value = [];
+    };
+    G(() => r.loadParams, (y) => {
+      g.value && r.autoLoad && i();
+    }, { deep: !0 }), j(() => {
+      g.value && r.autoLoad && i();
+    });
+    const v = z(""), b = z(""), M = (y) => {
+      v.value === y ? (b.value = b.value === "asc" ? "desc" : b.value === "desc" ? "" : "asc", b.value || (v.value = "")) : (v.value = y, b.value = "asc");
+    }, L = (y) => v.value !== y ? "" : b.value === "asc" ? "sort-asc" : b.value === "desc" ? "sort-desc" : "", O = I(() => {
+      const y = p.value;
+      return !v.value || !b.value ? y : [...y].sort((k, m) => {
+        const T = k[v.value], x = m[v.value];
+        if (typeof T == "number" && typeof x == "number")
+          return b.value === "asc" ? T - x : x - T;
+        const N = String(T || ""), P = String(x || "");
+        return b.value === "asc" ? N.localeCompare(P) : P.localeCompare(N);
+      });
+    });
+    return t({
+      load: i,
+      reload: u,
+      clear: A,
+      getData: () => s.value
+    }), (y, k) => (a(), n("div", {
+      class: C(["ld-table-wrapper", { "ld-table--bordered": e.bordered, "ld-table--striped": e.striped }])
+    }, [
+      h.value ? (a(), n("div", Ye, [
+        k[0] || (k[0] = l("div", { class: "loading-spinner" }, [
+          l("svg", {
+            class: "circular",
+            viewBox: "0 0 50 50"
+          }, [
+            l("circle", {
+              class: "path",
+              cx: "25",
+              cy: "25",
+              r: "20",
+              fill: "none"
+            })
+          ])
+        ], -1)),
+        e.loadingText ? (a(), n("span", Fe, V(e.loadingText), 1)) : f("", !0)
+      ])) : f("", !0),
+      l("table", Re, [
+        l("thead", null, [
+          l("tr", null, [
+            (a(!0), n($, null, S(e.columns, (m) => (a(), n("th", {
+              key: m.key,
+              style: w({ width: m.width, textAlign: m.align || "left" }),
+              onClick: (T) => m.sortable && M(m.key)
+            }, [
+              l("div", qe, [
+                l("span", null, V(m.title), 1),
+                m.sortable ? (a(), n("span", {
+                  key: 0,
+                  class: C(["sort-icon", L(m.key)])
+                }, [...k[1] || (k[1] = [
+                  l("svg", {
+                    viewBox: "0 0 24 24",
+                    width: "14",
+                    height: "14"
+                  }, [
+                    l("path", {
+                      fill: "currentColor",
+                      d: "M7 10l5-5 5 5H7zm0 4l5 5 5-5H7z"
+                    })
+                  ], -1)
+                ])], 2)) : f("", !0)
+              ])
+            ], 12, Ue))), 128))
+          ])
+        ]),
+        l("tbody", null, [
+          !O.value.length && !h.value ? (a(), n("tr", Ge, [
+            l("td", {
+              colspan: e.columns.length,
+              class: "empty-cell"
+            }, [
+              _(y.$slots, "empty", {}, () => [
+                k[2] || (k[2] = W('<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, We)
+          ])) : f("", !0),
+          (a(!0), n($, null, S(O.value, (m, T) => (a(), n("tr", {
+            key: T,
+            onClick: (x) => y.$emit("row-click", m, T)
+          }, [
+            (a(!0), n($, null, S(e.columns, (x) => (a(), n("td", {
+              key: x.key,
+              style: w({ textAlign: x.align || "left" })
+            }, [
+              _(y.$slots, x.key, {
+                row: m,
+                index: T,
+                value: m[x.key]
+              }, () => [
+                X(V(m[x.key]), 1)
+              ], !0)
+            ], 4))), 128))
+          ], 8, Xe))), 128))
+        ])
+      ])
+    ], 2));
+  }
+}), Je = /* @__PURE__ */ B(Ke, [["__scopeId", "data-v-567f3024"]]), Qe = {
+  __name: "Backtop",
+  props: {
+    // 滚动高度达到此参数值才出现
+    visibilityHeight: {
+      type: Number,
+      default: 200
+    },
+    // 距离页面右边距
+    right: {
+      type: Number,
+      default: 40
+    },
+    // 距离页面底部距离
+    bottom: {
+      type: Number,
+      default: 40
+    },
+    // 触发滚动的对象
+    target: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["click"],
+  setup(e, { expose: t, emit: o }) {
+    const r = e, d = o, c = z(!1), s = Y(null);
+    Y(null);
+    const g = I(() => ({
+      right: `${r.right}px`,
+      bottom: `${r.bottom}px`
+    })), h = () => r.target ? document.querySelector(r.target) ?? window : window, p = () => s.value === window ? window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0 : s.value?.scrollTop ?? 0, i = () => {
+      c.value = p() >= r.visibilityHeight;
+    }, u = (v) => {
+      A(), d("click", v);
+    }, A = () => {
+      s.value && (s.value === window ? window.scrollTo({
+        top: 0,
+        behavior: "smooth"
+      }) : s.value.scrollTo({
+        top: 0,
+        behavior: "smooth"
+      }));
+    };
+    return j(() => {
+      s.value = h(), s.value && (s.value.addEventListener("scroll", i, { passive: !0 }), i());
+    }), q(() => {
+      s.value && s.value.removeEventListener("scroll", i);
+    }), t({
+      scrollToTop: A
+    }), (v, b) => (a(), R(se, { name: "ld-backtop-fade" }, {
+      default: U(() => [
+        ae(l("div", {
+          class: "ld-backtop",
+          style: w(g.value),
+          onClick: u
+        }, [
+          _(v.$slots, "default", {}, () => [
+            b[0] || (b[0] = l("svg", {
+              class: "ld-backtop-icon",
+              viewBox: "0 0 24 24",
+              width: "20",
+              height: "20"
+            }, [
+              l("path", {
+                fill: "currentColor",
+                d: "M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12z"
+              })
+            ], -1))
+          ], !0)
+        ], 4), [
+          [oe, c.value]
+        ])
+      ]),
+      _: 3
+    }));
+  }
+}, Ze = /* @__PURE__ */ B(Qe, [["__scopeId", "data-v-e2cc7059"]]);
+z([]);
+let et = 0;
+const tt = (e) => {
+  const t = ++et, o = e.type || "info", r = e.content || "", d = e.duration ?? 3e3, c = e.closable ?? !1, s = document.createElement("div");
+  s.className = `ld-message ld-message--${o}`, s.setAttribute("data-id", t);
+  let h = `${{
     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 +733,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})">
+  }[o]}<span class="ld-message-content">${r}</span>`;
+  return c && (h += `<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>`), s.innerHTML = h, { id: t, element: s, duration: d };
+}, st = () => {
   let e = document.getElementById("ld-message-root");
   if (!e) {
     e = document.createElement("div"), e.id = "ld-message-root", document.body.appendChild(e);
@@ -344,59 +808,76 @@ const de = (e) => {
     `, document.head.appendChild(t);
   }
   return e;
-}, k = (e) => {
+}, D = (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 o = t.querySelector(`[data-id="${e}"]`);
+  o && (o.classList.add("ld-message--closing"), setTimeout(() => {
+    o.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 = D);
+const E = (e) => {
+  const t = st(), { id: o, element: r, duration: d } = tt(e);
+  return t.appendChild(r), d > 0 && setTimeout(() => {
+    D(o);
+  }, d), o;
+}, F = {
+  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: D,
   closeAll: () => {
     const e = document.getElementById("ld-message-root");
     e && (e.innerHTML = "");
   }
-}, ie = { class: "lzbutton-wrapper" }, pe = { class: "button" }, ue = /* @__PURE__ */ Object.assign({
+}, at = { class: "lzbutton-wrapper" }, ot = { class: "button" }, nt = /* @__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, o) => (a(), n("div", at, [
+      l("button", ot, [
+        o[1] || (o[1] = l("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" })
         ], -1)),
-        f(t.$slots, "default", {}, () => [
-          s[0] || (s[0] = A("Unlock Pro", -1))
+        _(t.$slots, "default", {}, () => [
+          o[0] || (o[0] = X("Unlock Pro", -1))
         ], !0)
       ])
     ]));
   }
-}), me = /* @__PURE__ */ v(ue, [["__scopeId", "data-v-7124b716"]]), ge = { class: "Lztext-wrapper" }, fe = /* @__PURE__ */ Object.assign({
+}), lt = /* @__PURE__ */ B(nt, [["__scopeId", "data-v-7124b716"]]), rt = { class: "Lztext-wrapper" }, it = { class: "loader-wrapper" }, ct = /* @__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, o = I(() => t.text.split(""));
+    return (r, d) => (a(), n("div", rt, [
+      l("div", it, [
+        (a(!0), n($, null, S(o.value, (c, s) => (a(), n("span", {
+          key: s,
+          class: "loader-letter",
+          style: w({ animationDelay: `${0.1 + s * 0.105}s` })
+        }, V(c === " " ? " " : c), 5))), 128)),
+        d[0] || (d[0] = l("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({
+}), dt = /* @__PURE__ */ B(ct, [["__scopeId", "data-v-2cca50b0"]]), ut = { class: "lztheme-wrapper" }, pt = { class: "theme__toggle-wrap" }, mt = ["checked"], gt = /* @__PURE__ */ Object.assign({
   name: "Lztheme"
 }, {
   __name: "lztheme",
@@ -408,51 +889,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: o }) {
+    let r = 0;
+    const d = `lztheme-toggle-${++r}-${Date.now()}`, c = e, s = o, g = z(null), h = z(c.modelValue);
+    G(() => c.modelValue, (i) => {
+      h.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;
+      h.value = u, s("update:modelValue", u), s("change", u);
     };
     return t({
       toggle: () => {
-        u.value && u.value.click();
+        g.value && g.value.click();
       },
-      setDark: (a) => {
-        g.value = a, o("update:modelValue", a), o("change", a);
+      setDark: (i) => {
+        h.value = i, s("update:modelValue", i), s("change", i);
       }
-    }), (a, n) => (c(), p("div", ve, [
+    }), (i, u) => (a(), n("div", ut, [
       l("label", {
-        for: i,
+        for: d,
         class: "theme"
       }, [
-        l("span", ye, [
+        l("span", pt, [
           l("input", {
-            id: i,
+            id: d,
             ref_key: "toggleRef",
-            ref: u,
+            ref: g,
             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: h.value,
+            onChange: p
+          }, null, 40, mt),
+          u[0] || (u[0] = W('<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 = {
+}), vt = /* @__PURE__ */ B(gt, [["__scopeId", "data-v-e887d581"]]), ht = {
+  Lzbutton: lt,
+  Lztext: dt,
+  Lztheme: vt
+}, ft = {
   name: "Button",
   type: "vue",
   label: "Button 按钮",
@@ -466,7 +947,7 @@ const y = (e) => {
 <script setup>
 import { Button } from 'little-dizzy'
 <\/script>`
-}, Be = {
+}, yt = {
   name: "Card",
   type: "vue",
   label: "Card 卡片",
@@ -486,7 +967,7 @@ import { Button } from 'little-dizzy'
 <script setup>
 import { Card, Button } from 'little-dizzy'
 <\/script>`
-}, ze = {
+}, bt = {
   name: "Modal",
   type: "vue",
   label: "Modal 模态框",
@@ -511,7 +992,7 @@ import { Modal, Button } from 'little-dizzy'
 
 const visible = ref(false)
 <\/script>`
-}, Ce = {
+}, kt = {
   name: "Message",
   type: "vue",
   label: "Message 消息提示",
@@ -551,14 +1032,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, {
+}, wt = {
+  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>`
+}, xt = {
+  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>`
+}, _t = {
+  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>`
+}, $t = {
+  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 = [
+  ft,
+  yt,
+  bt,
+  kt,
+  wt,
+  xt,
+  _t,
+  $t
+], H = /* @__PURE__ */ new Map();
+function K(e) {
+  return !e || !e.name ? (console.warn("[LittleDizzy] Snippet must have a name property"), !1) : (H.set(e.name, {
     name: e.name,
     type: e.type || "html",
     label: e.label || e.name,
@@ -567,51 +1127,59 @@ function C(e) {
     ...e
   }), !0);
 }
-function $(e) {
+function J(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((o) => {
+    K(o) && t++;
   }), t;
 }
-function Me() {
+function zt() {
   const e = {};
-  return x.forEach((t, s) => {
-    e[s] = t;
+  return H.forEach((t, o) => {
+    e[o] = t;
   }), e;
 }
-function Se(e) {
-  return x.get(e);
+function Ct(e) {
+  return H.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
+J(Bt);
+const Q = {
+  Button: re,
+  Card: me,
+  Modal: we,
+  Message: ze,
+  Carousel: Oe,
+  Loading: Pe,
+  Table: Je,
+  Backtop: Ze,
+  ...ht
+}, St = (e, t = {}) => {
+  Object.entries(Q).forEach(([o, r]) => {
+    e.component(t.prefix ? `${t.prefix}${o}` : o, r);
+  }), e.config.globalProperties.$message = F, e.provide("message", F);
+}, Lt = zt, Tt = K, It = J, Vt = Ct, At = {
+  install: St,
+  ...Q
 };
 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
+  Ze as Backtop,
+  re as Button,
+  me as Card,
+  Oe as Carousel,
+  Pe as Loading,
+  lt as Lzbutton,
+  dt as Lztext,
+  vt as Lztheme,
+  ze as Message,
+  we as Modal,
+  Je as Table,
+  ht as customComponents,
+  At as default,
+  Vt as getSnippet,
+  F as message,
+  Tt as registerSnippet,
+  It as registerSnippets,
+  Lt as snippets
 };