@huyooo/ui 0.12.2 → 0.13.1

package/dist/CustomTable-BBcd4nNL.js

@@ -0,0 +1,278 @@
+/* empty css               */
+/* empty css               */
+/* empty css               */
+import "./index-D3Kp6R4z.js";
+/* empty css               */
+/* empty css               */
+/* empty css               */
+import { defineComponent as P, ref as N, computed as _, onMounted as Y, nextTick as V, watch as Z, onBeforeUnmount as I, openBlock as a, createElementBlock as d, normalizeStyle as x, normalizeClass as k, renderSlot as O, useModel as q, createVNode as z, unref as c, withCtx as S, createElementVNode as g, createBlock as K, createCommentVNode as m, Fragment as w, renderList as W, toDisplayString as E, createTextVNode as ee, mergeModels as A, useSlots as te } from "vue";
+import { Spin as ne, Checkbox as L, Tooltip as ie, Empty as le, Pagination as oe } from "@arco-design/web-vue";
+import { _ as R } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import { g as B, a as M } from "./index-D56hUMeD.js";
+const ae = /* @__PURE__ */ P({
+  __name: "Ellipsis",
+  props: {
+    open: {
+      type: Boolean,
+      required: !1,
+      default: () => !0
+    }
+  },
+  setup(v) {
+    const y = v, e = N(null), h = N(0), u = _(() => {
+      var C, b;
+      if (!y.open || h.value === 0)
+        return {};
+      const r = (b = (C = e.value) == null ? void 0 : C.parentElement) == null ? void 0 : b.style.width;
+      return r && r !== "auto" ? {
+        width: r
+      } : {
+        width: `${h.value}px`
+      };
+    });
+    function f() {
+      e.value && y.open && V(() => {
+        e.value && (h.value = e.value.clientWidth);
+      });
+    }
+    function p() {
+      f();
+    }
+    return Y(() => {
+      y.open && V(() => {
+        f(), window.addEventListener("resize", p);
+      });
+    }), Z(() => y.open, (r) => {
+      r ? (f(), window.addEventListener("resize", p)) : window.removeEventListener("resize", p);
+    }), I(() => {
+      window.removeEventListener("resize", p);
+    }), (r, C) => (a(), d("div", {
+      ref_key: "ellipsisContainer",
+      ref: e,
+      class: k({
+        ellipsis: v.open
+      }),
+      style: x(v.open ? u.value : {})
+    }, [O(r.$slots, "default", {}, void 0, !0)], 6));
+  }
+}), se = /* @__PURE__ */ R(ae, [["__scopeId", "data-v-4874d041"]]), re = {
+  class: "CubeTableCom"
+}, de = {
+  class: "tableContain"
+}, ue = {
+  class: "table-header"
+}, ce = {
+  key: 0,
+  class: "header-cell checkbox-cell"
+}, pe = {
+  class: "table-body"
+}, fe = ["onMouseenter", "onMouseleave"], he = {
+  style: {
+    width: "100%",
+    overflow: "hidden"
+  }
+}, ve = {
+  key: 0,
+  class: "contain"
+}, ge = {
+  class: "pagination"
+}, ye = /* @__PURE__ */ P({
+  __name: "CustomTable",
+  props: /* @__PURE__ */ A({
+    loading: {
+      type: Boolean,
+      required: !1,
+      default: () => !1
+    },
+    bordered: {
+      type: Boolean,
+      required: !1,
+      default: () => !0
+    },
+    data: {
+      type: Array,
+      required: !0
+    },
+    pagination: {
+      type: Object,
+      required: !1,
+      default: () => null
+    },
+    columns: {
+      type: Array,
+      required: !0
+    },
+    /** 行选择配置 */
+    rowSelection: {
+      type: Object,
+      required: !1,
+      default: void 0
+    },
+    /** 行数据的唯一标识字段，默认 'id' */
+    rowKey: {
+      type: String,
+      required: !1,
+      default: "id"
+    }
+  }, {
+    selectedKeys: {
+      default: () => []
+    },
+    selectedKeysModifiers: {},
+    activeKey: {
+      default: -1
+    },
+    activeKeyModifiers: {}
+  }),
+  emits: /* @__PURE__ */ A(["mouseenter", "mouseleave", "pageChange", "pageSizeChange"], ["update:selectedKeys", "update:activeKey"]),
+  setup(v, {
+    emit: y
+  }) {
+    const e = v, h = y, u = q(v, "selectedKeys"), f = q(v, "activeKey");
+    function p(t, i) {
+      return t[e.rowKey] ?? String(i);
+    }
+    function r(t, i) {
+      const s = p(t, i);
+      return u.value.includes(s);
+    }
+    const C = _(() => e.data.length === 0 ? !1 : e.data.every((t, i) => r(t, i))), b = _(() => {
+      if (e.data.length === 0) return !1;
+      const t = e.data.filter((i, s) => r(i, s)).length;
+      return t > 0 && t < e.data.length;
+    });
+    function j(t, i, s) {
+      const n = p(t, i);
+      s ? u.value.includes(n) || (u.value = [...u.value, n]) : u.value = u.value.filter((l) => l !== n);
+    }
+    function H(t) {
+      if (Array.isArray(t) ? t.length > 0 : t) {
+        const s = e.data.map((l, o) => p(l, o)), n = /* @__PURE__ */ new Set([...u.value, ...s]);
+        u.value = Array.from(n);
+      } else {
+        const s = new Set(e.data.map((n, l) => p(n, l)));
+        u.value = u.value.filter((n) => !s.has(n));
+      }
+    }
+    const J = _(() => {
+      const t = e.columns.map((i) => i.width ? `${i.width}px` : i.minWidth ? `minmax(${i.minWidth}px, 1fr)` : "minmax(120px, 1fr)");
+      return e.rowSelection && t.unshift("48px"), t.join(" ");
+    }), U = _(() => `${e.columns.reduce((i, s) => {
+      const n = Number(s.width || s.minWidth || 120);
+      return i + n;
+    }, e.rowSelection ? 48 : 0)}px`);
+    function T(t) {
+      const i = {};
+      return t.maxWidth && (i.maxWidth = `${t.maxWidth}px`), i;
+    }
+    function D(t) {
+      h("pageChange", t);
+    }
+    function F(t) {
+      h("pageSizeChange", t);
+    }
+    function G(t) {
+      const i = te();
+      return t ? !!i[t] : !1;
+    }
+    function Q(t) {
+      f.value = t, h("mouseenter", t);
+    }
+    function X(t) {
+      f.value = -1, h("mouseleave", t);
+    }
+    return (t, i) => (a(), d("div", re, [z(c(ne), {
+      loading: e.loading,
+      tip: "数据加载中"
+    }, {
+      default: S(() => {
+        var s;
+        return [g("div", de, [g("div", {
+          class: "flex-table",
+          style: x({
+            "grid-template-columns": J.value,
+            "min-width": U.value
+          })
+        }, [g("div", ue, [e.rowSelection ? (a(), d("div", ce, [e.rowSelection.showCheckedAll !== !1 ? (a(), K(c(L), {
+          key: 0,
+          "model-value": C.value,
+          indeterminate: b.value,
+          onChange: H
+        }, null, 8, ["model-value", "indeterminate"])) : m("", !0)])) : m("", !0), (a(!0), d(w, null, W(e.columns, (n, l) => (a(), d("div", {
+          key: l,
+          class: k(["header-cell", {
+            fixed: n.fixed,
+            fixedBackground: n.fixed,
+            lastBorder: l === e.columns.length - 1
+          }]),
+          style: x(T(n))
+        }, E(n.title), 7))), 128))]), g("div", pe, [(a(!0), d(w, null, W(e.data, (n, l) => (a(), d("div", {
+          key: p(n, l),
+          class: k(["table-row", {
+            trListHover: l === f.value,
+            "row-selected": r(n, l)
+          }]),
+          onMouseenter: (o) => Q(l),
+          onMouseleave: (o) => X(l)
+        }, [e.rowSelection ? (a(), d("div", {
+          key: 0,
+          class: k(["body-cell checkbox-cell", {
+            trListHover: l === f.value,
+            "row-selected": r(n, l)
+          }])
+        }, [z(c(L), {
+          "model-value": r(n, l),
+          onChange: (o) => j(n, l, o)
+        }, null, 8, ["model-value", "onChange"])], 2)) : m("", !0), (a(!0), d(w, null, W(e.columns, (o, $) => (a(), d("div", {
+          key: $,
+          class: k(["body-cell", {
+            [o.cellClassName]: typeof o.cellClassName == "string",
+            fixed: o.fixed,
+            trListHover: l === f.value,
+            "row-selected": r(n, l),
+            lastBorder: $ === e.columns.length - 1
+          }]),
+          style: x(T(o))
+        }, [g("div", he, [z(se, {
+          open: o.ellipsis
+        }, {
+          default: S(() => [G(o.slotName) ? O(t.$slots, o.slotName, {
+            key: 0,
+            record: n
+          }, void 0, !0) : (a(), d(w, {
+            key: 1
+          }, [o.dataIndex ? (a(), d(w, {
+            key: 0
+          }, [o.tooltip ? (a(), K(c(ie), {
+            key: 0,
+            content: c(B)(c(M)(n, o.dataIndex)),
+            position: "bottom"
+          }, {
+            default: S(() => [g("span", null, E(c(B)(c(M)(n, o.dataIndex))), 1)]),
+            _: 2
+          }, 1032, ["content"])) : (a(), d(w, {
+            key: 1
+          }, [ee(E(c(B)(c(M)(n, o.dataIndex))), 1)], 64))], 64)) : m("", !0)], 64))]),
+          _: 2
+        }, 1032, ["open"])])], 6))), 128))], 42, fe))), 128))])], 4), e.data.length === 0 ? (a(), d("div", ve, [z(c(le))])) : m("", !0)]), g("div", ge, [e.pagination ? (a(), K(c(oe), {
+          key: 0,
+          modelValue: e.pagination.current,
+          "onUpdate:modelValue": i[0] || (i[0] = (n) => e.pagination.current = n),
+          total: ((s = e.pagination) == null ? void 0 : s.total) || 0,
+          pageSize: e.pagination.pageSize,
+          showTotal: e.pagination.showTotal ?? !0,
+          showJumper: e.pagination.showJumper ?? !1,
+          showPageSize: e.pagination.showPageSize ?? !0,
+          pageSizeOptions: e.pagination.pageSizeOptions ?? [10, 20, 50, 100],
+          onChange: D,
+          onPageSizeChange: F
+        }, null, 8, ["modelValue", "total", "pageSize", "showTotal", "showJumper", "showPageSize", "pageSizeOptions"])) : m("", !0)])];
+      }),
+      _: 3
+    }, 8, ["loading"])]));
+  }
+}), Ee = /* @__PURE__ */ R(ye, [["__scopeId", "data-v-d435fdc7"]]);
+export {
+  Ee as C,
+  se as E
+};