@vtable-guild/vtable-guild 2.8.0 → 2.9.0-alpha.0

package/dist/table/src/components/TableColumnSettings.mjs

@@ -0,0 +1,360 @@
+import { defineComponent as te, inject as ne, computed as k, useId as le, ref as b, watch as C, onBeforeUnmount as ie, createVNode as n, Teleport as ae, Fragment as _, nextTick as oe, createTextVNode as ue } from "vue";
+import { useTheme as se } from "../../../core/src/composables/useTheme.mjs";
+import F from "../../../core/src/components/Tooltip.mjs";
+import { VTABLE_GUILD_INJECTION_KEY as re } from "../../../core/src/plugin/index.mjs";
+import ce from "../../../icons/src/SettingOutlinedIcon.mjs";
+import de from "../../../icons/src/ColumnHeightOutlinedIcon.mjs";
+import { resolveColumnSettingsThemePreset as fe, columnSettingsZhCN as me } from "../../../theme/src/column-settings.mjs";
+import { resolveTableThemePreset as ve, resolveBuiltInLocale as ge } from "../../../theme/src/presets/index.mjs";
+import { configurableEntries as he, isColumnSettingDisabled as T, isVisibilityLocked as P, setColumnVisibility as K, columnFixedRegion as S, canSetColumnFixed as H, moveSettingColumn as be, setColumnFixed as pe } from "../utils/columnSettings.mjs";
+import { getPopupPositionStyle as ye } from "../utils/popupPosition.mjs";
+const Pe = /* @__PURE__ */ te({
+  name: "TableColumnSettings",
+  props: {
+    columns: {
+      type: Array,
+      required: !0
+    },
+    size: String,
+    disabled: Boolean,
+    options: Object,
+    locale: Object,
+    ui: Object,
+    class: String,
+    getPopupContainer: Function
+  },
+  emits: {
+    "update:columns": (l) => !0,
+    "update:size": (l) => !0,
+    reset: () => !0
+  },
+  slots: Object,
+  setup(l, {
+    emit: g,
+    slots: U
+  }) {
+    const p = ne(re, null), E = k(() => p?.themePreset ?? "antdv"), G = k(() => fe(E.value)), {
+      slots: i
+    } = se("columnSettings", G, l), A = k(() => {
+      if (l.size) return l.size;
+      const e = p?.theme.table?.defaultVariants?.size;
+      return e === "large" || e === "middle" || e === "small" ? e : ve(E.value).defaultVariants.size;
+    }), r = k(() => ({
+      ...me,
+      ...ge(E.value, p?.locale)?.columnSettings,
+      ...p?.locales[p.locale]?.columnSettings,
+      ...p?.localeOverrides.columnSettings,
+      ...l.locale
+    })), M = le(), I = b(null), O = b(null), f = b(null), u = b(null), D = b({}), z = b("body"), m = k(() => he(l.columns)), x = b(null), B = /* @__PURE__ */ new Map(), y = k(() => {
+      const e = [];
+      function t(a, o = !0) {
+        for (const s of a) {
+          if (T(s.column, "checkbox")) continue;
+          const d = o && s.column.visible !== !1;
+          P(s) || e.push(d), t(s.children, d);
+        }
+      }
+      return t(m.value), {
+        all: e.length > 0 && e.every(Boolean),
+        partial: e.some(Boolean) && !e.every(Boolean)
+      };
+    });
+    function j(e) {
+      for (const t of e)
+        B.has(t.id) || B.set(t.id, t.column.visible), j(t.children);
+    }
+    C(m, j, {
+      immediate: !0,
+      flush: "sync"
+    });
+    function J(e, t) {
+      if (l.disabled || P(e)) return;
+      const a = t.target;
+      g("update:columns", K(l.columns, /* @__PURE__ */ new Map([[e.id, a.checked]]))), a.checked = e.column.visible !== !1;
+    }
+    function W() {
+      l.disabled || (g("update:columns", K(l.columns, B)), g("reset"));
+    }
+    function Y(e) {
+      if (l.disabled || !m.value.length) return;
+      const t = e.target, a = /* @__PURE__ */ new Map();
+      function o(s) {
+        for (const d of s)
+          T(d.column, "checkbox") || (P(d) || a.set(d.id, t.checked), o(d.children));
+      }
+      o(m.value), g("update:columns", K(l.columns, a)), t.checked = y.value.all, t.indeterminate = y.value.partial;
+    }
+    function V(e = u.value) {
+      return e === "density" ? O.value : I.value;
+    }
+    let w;
+    function v(e = !1) {
+      const t = V();
+      u.value = null, e && t?.focus();
+    }
+    function h() {
+      const e = V();
+      if (!u.value || !e) return;
+      const t = e.getBoundingClientRect(), a = f.value?.getBoundingClientRect().width ?? 0, o = {
+        top: t.top,
+        right: t.right,
+        bottom: t.bottom,
+        left: t.right - a
+      };
+      D.value = {
+        ...ye(o, z.value, a, f.value?.scrollHeight),
+        zIndex: "var(--vtg-column-settings-z)"
+      }, z.value === document.body && (D.value.left = `${Math.max(8, Math.min(o.left, window.innerWidth - a - 8))}px`, delete D.value.right);
+    }
+    function L(e) {
+      const t = e.target;
+      !I.value?.contains(t) && !O.value?.contains(t) && !f.value?.contains(t) && v();
+    }
+    async function q(e) {
+      const t = V(e);
+      if (l.disabled || !t) return;
+      if (u.value === e) return v();
+      if (R(), z.value = l.getPopupContainer?.(t) ?? document.body, u.value = e, h(), await oe(), u.value !== e) return;
+      h();
+      const a = e === "density" ? '[aria-checked="true"]' : "input:not(:disabled), button:not(:disabled)";
+      (f.value?.querySelector(a) ?? f.value?.querySelector("button:not(:disabled)"))?.focus(), typeof ResizeObserver < "u" && (w = new ResizeObserver(h), w.observe(t), f.value && w.observe(f.value));
+    }
+    function Z(e) {
+      if (u.value === "density" && ["ArrowDown", "ArrowUp", "Home", "End"].includes(e.key)) {
+        const t = Array.from(f.value?.querySelectorAll('[role="menuitemradio"]') ?? []);
+        if (!t.length) return;
+        e.preventDefault();
+        const a = t.indexOf(e.target), o = e.key === "Home" ? 0 : e.key === "End" ? t.length - 1 : (a + (e.key === "ArrowDown" ? 1 : -1) + t.length) % t.length;
+        t[o]?.focus();
+      } else if (e.key === "Escape")
+        e.preventDefault(), e.stopPropagation(), v(!0);
+      else if (e.key === "Tab") {
+        if (u.value === "density") {
+          v(!0), e.shiftKey && e.preventDefault();
+          return;
+        }
+        const t = f.value?.querySelectorAll("button:not(:disabled), input:not(:disabled), select:not(:disabled)");
+        if (!t?.length) return;
+        (e.shiftKey && e.target === t[0] || !e.shiftKey && e.target === t[t.length - 1]) && (v(!0), e.shiftKey && e.preventDefault());
+      }
+    }
+    function R() {
+      w?.disconnect(), w = void 0, !(typeof document > "u") && (document.removeEventListener("pointerdown", L), document.removeEventListener("focusin", L), window.removeEventListener("resize", h), window.removeEventListener("scroll", h, !0));
+    }
+    C(u, (e) => {
+      if (!e) return R();
+      document.addEventListener("pointerdown", L), document.addEventListener("focusin", L), window.addEventListener("resize", h), window.addEventListener("scroll", h, !0);
+    }), C(() => l.disabled, (e) => {
+      e && v();
+    }), C(() => l.getPopupContainer, () => v()), C(() => [l.options?.density, l.options?.setting], () => {
+      (u.value === "density" && l.options?.density === !1 || u.value === "columns" && l.options?.setting === !1) && v();
+    }), ie(R);
+    function Q(e, t) {
+      if (l.disabled || !H(e) || S(e.column) === t) return;
+      const a = pe(l.columns, e.id, t);
+      a !== l.columns && g("update:columns", a);
+    }
+    function X(e, t) {
+      t.preventDefault(), t.stopPropagation();
+      const a = x.value;
+      if (x.value = null, !a || l.disabled || l.options?.draggable === !1) return;
+      const o = be(l.columns, a, e.id);
+      o !== l.columns && g("update:columns", o);
+    }
+    function $(e, t = !1, a = !1) {
+      return e.map((o) => {
+        const s = o.column, d = U.columnLabel?.({
+          column: s
+        }) ?? (typeof s.title == "function" ? void 0 : s.title) ?? String(s.key ?? ("dataIndex" in s ? s.dataIndex ?? "" : ""));
+        return n("li", {
+          key: o.id,
+          class: i.item(),
+          "data-column-setting": o.id,
+          onDragover: (c) => {
+            x.value && !a && c.preventDefault();
+          },
+          onDrop: a ? void 0 : (c) => X(o, c)
+        }, [n("div", {
+          class: i.row()
+        }, [!a && l.options?.draggable !== !1 && n("span", {
+          class: i.dragHandle(),
+          draggable: !l.disabled && !T(s, "order") && S(s) !== "mixed",
+          title: r.value.move,
+          "aria-hidden": "true",
+          onDragstart: (c) => {
+            if (l.disabled || T(s, "order")) return c.preventDefault();
+            x.value = o.id, c.dataTransfer?.setData("text/plain", o.id), c.dataTransfer && (c.dataTransfer.effectAllowed = "move");
+          },
+          onDragend: () => {
+            x.value = null;
+          }
+        }, [ue("⋮⋮")]), n("label", {
+          class: i.label()
+        }, [n("span", {
+          class: i.checkboxControl()
+        }, [n("input", {
+          type: "checkbox",
+          class: i.checkbox(),
+          checked: s.visible !== !1,
+          disabled: l.disabled || t || P(o),
+          onChange: (c) => J(o, c)
+        }, null), s.visible !== !1 && n("span", {
+          class: i.checkMark(),
+          "aria-hidden": "true"
+        }, null)]), n("span", {
+          class: i.labelText()
+        }, [d])]), !a && l.options?.fixed !== !1 && n("span", {
+          class: i.pinActions()
+        }, [["left", void 0, "right"].map((c) => {
+          const N = c === "left" ? r.value.fixedLeft : c === "right" ? r.value.fixedRight : r.value.unfixed;
+          return n(F, {
+            title: N
+          }, {
+            default: () => [n("button", {
+              type: "button",
+              class: i.pinAction(),
+              disabled: l.disabled || !H(o),
+              "aria-label": `${String(typeof d == "string" || typeof d == "number" ? d : s.key ?? "")}: ${N}`,
+              "aria-pressed": S(s) === c,
+              "data-column-pin": c ?? "none",
+              onClick: () => Q(o, c)
+            }, [n("svg", {
+              class: i.pinIcon(),
+              viewBox: "0 0 16 16",
+              fill: "none",
+              "aria-hidden": "true"
+            }, [n("rect", {
+              x: "2",
+              y: "3",
+              width: "12",
+              height: "10",
+              rx: "1",
+              stroke: "currentColor"
+            }, null), c ? n(_, null, [n("path", {
+              d: c === "left" ? "M6 3v10" : "M10 3v10",
+              stroke: "currentColor"
+            }, null), n("rect", {
+              x: c === "left" ? "2" : "10",
+              y: "3",
+              width: "4",
+              height: "10",
+              fill: "currentColor",
+              opacity: ".25"
+            }, null)]) : n("path", {
+              d: "M6 3v10M10 3v10",
+              stroke: "currentColor"
+            }, null)])])]
+          });
+        })])]), o.children.length > 0 && n("ul", {
+          class: i.children()
+        }, [$(o.children, t || s.visible === !1 || T(s, "checkbox"), !0)])]);
+      });
+    }
+    function ee() {
+      return m.value.some((t) => S(t.column) !== void 0) ? ["left", void 0, "right", "mixed"].map((t) => {
+        const a = m.value.filter((s) => S(s.column) === t);
+        if (!a.length) return null;
+        const o = t === "left" ? r.value.fixedLeft : t === "right" ? r.value.fixedRight : t === "mixed" ? r.value.mixed : r.value.unfixed;
+        return n("li", {
+          key: t ?? "none",
+          class: i.group()
+        }, [n("div", {
+          class: i.groupTitle()
+        }, [o]), n("ul", {
+          class: i.groupColumns()
+        }, [$(a)])]);
+      }) : $(m.value);
+    }
+    return () => n("span", {
+      class: i.root()
+    }, [l.options?.density !== !1 && n(F, {
+      title: r.value.density,
+      open: u.value ? !1 : void 0
+    }, {
+      default: () => [n("button", {
+        ref: O,
+        type: "button",
+        class: i.densityTrigger(),
+        disabled: l.disabled,
+        "aria-label": r.value.density,
+        "aria-haspopup": "menu",
+        "aria-expanded": u.value === "density",
+        "aria-controls": u.value === "density" ? `${M}-density` : void 0,
+        onClick: () => {
+          q("density");
+        }
+      }, [n(de, null, null)])]
+    }), l.options?.setting !== !1 && n(F, {
+      title: r.value.title,
+      open: u.value ? !1 : void 0
+    }, {
+      default: () => [n("button", {
+        ref: I,
+        type: "button",
+        class: i.trigger(),
+        disabled: l.disabled,
+        "aria-label": r.value.title,
+        "aria-haspopup": "dialog",
+        "aria-expanded": u.value === "columns",
+        "aria-controls": u.value === "columns" ? `${M}-columns` : void 0,
+        onClick: () => {
+          q("columns");
+        }
+      }, [n(ce, null, null)])]
+    }), u.value && n(ae, {
+      to: z.value
+    }, {
+      default: () => [n("div", {
+        ref: f,
+        key: u.value,
+        id: `${M}-${u.value}`,
+        role: u.value === "density" ? "menu" : "dialog",
+        "aria-label": u.value === "density" ? r.value.density : r.value.title,
+        "data-vtg-preset": E.value,
+        class: u.value === "density" ? i.densityPopup() : i.popup(),
+        style: D.value,
+        onKeydown: Z
+      }, [u.value === "density" ? ["large", "middle", "small"].map((e) => n("button", {
+        type: "button",
+        role: "menuitemradio",
+        tabindex: A.value === e ? 0 : -1,
+        class: i.density(),
+        "aria-checked": A.value === e,
+        onClick: () => {
+          l.disabled || (A.value !== e && g("update:size", e), v(!0));
+        }
+      }, [r.value[e]])) : n(_, null, [n("div", {
+        class: i.header()
+      }, [n("label", {
+        class: i.heading()
+      }, [n("span", {
+        class: i.checkboxControl()
+      }, [n("input", {
+        type: "checkbox",
+        class: i.checkbox(),
+        checked: y.value.all,
+        indeterminate: y.value.partial,
+        disabled: l.disabled || !m.value.length,
+        onChange: Y
+      }, null), y.value.all && n("span", {
+        class: i.checkMark(),
+        "aria-hidden": "true"
+      }, null), y.value.partial && n("span", {
+        class: i.indeterminateMark(),
+        "aria-hidden": "true"
+      }, null)]), r.value.columns]), n("button", {
+        type: "button",
+        class: i.reset(),
+        onClick: W
+      }, [r.value.reset])]), m.value.length ? n("ul", {
+        class: i.columns(),
+        "aria-label": r.value.columns
+      }, [ee()]) : n("div", {
+        class: i.empty()
+      }, [r.value.empty])])])]
+    })]);
+  }
+});
+export {
+  Pe as default
+};

package/dist/table/src/components/TableColumnSettings.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TableColumnSettings.test.d.ts.map

package/dist/table/src/components/TableColumnSettings.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableColumnSettings.test.d.ts","sourceRoot":"","sources":["../../../../../table/src/components/TableColumnSettings.test.ts"],"names":[],"mappings":""}

package/dist/table/src/components/TableCopyButton.d.ts

@@ -0,0 +1,41 @@
+import { PropType } from 'vue';
+import { ColumnType } from '../types';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    column: {
+        type: PropType<ColumnType<Record<string, unknown>>>;
+        required: true;
+    };
+    record: {
+        type: PropType<Record<string, unknown>>;
+        required: true;
+    };
+    rowIndex: {
+        type: NumberConstructor;
+        required: true;
+    };
+    defaultText: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    column: {
+        type: PropType<ColumnType<Record<string, unknown>>>;
+        required: true;
+    };
+    record: {
+        type: PropType<Record<string, unknown>>;
+        required: true;
+    };
+    rowIndex: {
+        type: NumberConstructor;
+        required: true;
+    };
+    defaultText: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    defaultText: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+//# sourceMappingURL=TableCopyButton.d.ts.map

package/dist/table/src/components/TableCopyButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCopyButton.d.ts","sourceRoot":"","sources":["../../../../../table/src/components/TableCopyButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2D,KAAK,QAAQ,EAAE,MAAM,KAAK,CAAA;AAE5F,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;;;cAMZ,QAAQ,CAAC,UAAU,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;;;;cAC7C,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;;;;;;;;;;;;;cADjC,QAAQ,CAAC,UAAU,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;;;;cAC7C,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;;;;;;;;;;;;;;AAJ/D,wBAuGE"}

package/dist/table/src/components/TableCopyButton.mjs

@@ -0,0 +1,94 @@
+import { defineComponent as y, inject as x, ref as p, computed as b, onBeforeUnmount as g, createVNode as o, Fragment as w } from "vue";
+import { TABLE_CONTEXT_KEY as h } from "../context.mjs";
+import { getByDataIndex as T } from "../composables/useColumns.mjs";
+const E = /* @__PURE__ */ y({
+  name: "TableCopyButton",
+  props: {
+    column: {
+      type: Object,
+      required: !0
+    },
+    record: {
+      type: Object,
+      required: !0
+    },
+    rowIndex: {
+      type: Number,
+      required: !0
+    },
+    defaultText: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup(e) {
+    const u = x(h, {}), l = p("idle"), r = p(!1);
+    let s = !0, c;
+    const d = b(() => {
+      const t = u.locale?.value.cell;
+      return l.value === "copied" ? t?.copied ?? "已复制" : l.value === "failed" ? t?.copyFailed ?? "复制失败" : t?.copy ?? "复制";
+    });
+    g(() => {
+      s = !1, clearTimeout(c);
+    });
+    async function v(t) {
+      if (t.stopPropagation(), r.value) return;
+      r.value = !0;
+      const a = typeof e.column.copyable == "object" ? e.column.copyable : {};
+      let f = !1, m, n;
+      try {
+        const i = T(e.record, e.column.dataIndex);
+        if (n = typeof a.text == "function" ? await a.text({
+          text: i,
+          value: i,
+          record: e.record,
+          column: e.column,
+          index: e.rowIndex,
+          renderIndex: e.rowIndex
+        }) : a.text ?? e.defaultText, typeof n != "string") throw new Error("Provide copyable.text for non-scalar cell values");
+        if (!globalThis.navigator?.clipboard?.writeText) throw new Error("Clipboard API unavailable");
+        await navigator.clipboard.writeText(n);
+      } catch (i) {
+        f = !0, m = i;
+      }
+      s && (r.value = !1, l.value = f ? "failed" : "copied", clearTimeout(c), c = setTimeout(() => {
+        l.value = "idle";
+      }, 2e3), f ? a.onError?.(m, e.record) : a.onCopy?.(n, e.record));
+    }
+    return () => o("button", {
+      type: "button",
+      class: u.subThemeSlots?.copyButton(),
+      title: d.value,
+      "aria-label": d.value,
+      disabled: r.value,
+      onClick: v,
+      onMousedown: (t) => t.stopPropagation(),
+      onDragstart: (t) => {
+        t.preventDefault(), t.stopPropagation();
+      }
+    }, [o("svg", {
+      width: "1em",
+      height: "1em",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      stroke: "currentColor",
+      "aria-hidden": "true"
+    }, [l.value === "copied" ? o("path", {
+      d: "m3 8 3 3 7-7"
+    }, null) : o(w, null, [o("rect", {
+      x: "5",
+      y: "5",
+      width: "8",
+      height: "9",
+      rx: "1"
+    }, null), o("path", {
+      d: "M3 10H2V2h8v1"
+    }, null)])]), o("span", {
+      "aria-live": "polite",
+      class: u.vtgClass?.("sr-only")
+    }, [l.value === "idle" ? "" : d.value])]);
+  }
+});
+export {
+  E as default
+};

package/dist/table/src/components/TableEnterprise.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TableEnterprise.test.d.ts.map

package/dist/table/src/components/TableEnterprise.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableEnterprise.test.d.ts","sourceRoot":"","sources":["../../../../../table/src/components/TableEnterprise.test.ts"],"names":[],"mappings":""}

package/dist/table/src/components/TableHeaderCell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeaderCell.d.ts","sourceRoot":"","sources":["../../../../../table/src/components/TableHeaderCell.tsx"],"names":[],"mappings":"AAAA,OAAO,EASL,KAAK,QAAQ,EACd,MAAM,KAAK,CAAA;AAOZ,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;;;cAuBzC,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;cAAjD,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;AAJvE,wBAiwBE"}
+{"version":3,"file":"TableHeaderCell.d.ts","sourceRoot":"","sources":["../../../../../table/src/components/TableHeaderCell.tsx"],"names":[],"mappings":"AAAA,OAAO,EASL,KAAK,QAAQ,EACd,MAAM,KAAK,CAAA;AAOZ,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;;;cAwBzC,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;cAAjD,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;AAJvE,wBAuzBE"}