@shwfed/config 2.12.4 → 2.12.6

package/dist/runtime/components/table/customization.vue

@@ -0,0 +1,633 @@
+<script setup>
+import { Icon } from "@iconify/vue";
+import { computed, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { getLocalizedText } from "../../share/locale";
+import {
+  useTreeDnd
+} from "../../composables/useTreeDnd";
+import ResponsiveModal from "../modal.vue";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle
+} from "../ui/alert-dialog";
+import { Button } from "../ui/button";
+import { Separator } from "../ui/separator";
+import { findColumn as findColumnEntry } from "./utils/resolve";
+import { type as SELECT_COLUMN_TYPE } from "./columns/2026-04-14/com.shwfed.table.column.select/schema";
+import { type as DRAG_HANDLE_COLUMN_TYPE } from "./columns/2026-05-21/com.shwfed.table.column.drag-handle/schema";
+import {
+  applyRowDrop,
+  applyZoneDrop,
+  bandOf as bandOfBands,
+  bandOfGroup as bandOfGroupBands,
+  groupVisibleMembers as groupVisibleMembersBands,
+  weaveLockedColumns,
+  weldGroups
+} from "./utils/customization";
+defineOptions({ name: "ShwfedTableCustomization" });
+const props = defineProps({
+  config: { type: Object, required: true },
+  tableApi: { type: Object, required: true }
+});
+const emit = defineEmits(["confirm", "reset"]);
+const { t, locale } = useI18n({
+  inheritLocale: true,
+  messages: {
+    zh: {
+      "trigger": "\u81EA\u5B9A\u4E49\u8868\u683C",
+      "title": "\u8868\u683C\u8BBE\u7F6E",
+      "visible-pane": "\u663E\u793A\u5217",
+      "hidden-pane": "\u9690\u85CF\u5217",
+      "pinned-left": "\u56FA\u5B9A\u5728\u5DE6\u4FA7",
+      "pinned-right": "\u56FA\u5B9A\u5728\u53F3\u4FA7",
+      "pin-left-zone": "\u56FA\u5B9A\u5230\u5DE6\u4FA7",
+      "pin-right-zone": "\u56FA\u5B9A\u5230\u53F3\u4FA7",
+      "hide-hint": "\u62D6\u62FD\u5230\u6B64\u5904\u9690\u85CF",
+      "group-fallback": "\u5217\u5206\u7EC4",
+      "reset": "\u6062\u590D\u9ED8\u8BA4",
+      "reset-confirm-title": "\u6062\u590D\u9ED8\u8BA4\u8BBE\u7F6E\uFF1F",
+      "reset-confirm-body": "\u5C06\u653E\u5F03\u4F60\u5BF9\u672C\u8868\u683C\u7684\u6240\u6709\u81EA\u5B9A\u4E49\uFF08\u5217\u7684\u663E\u793A\u3001\u987A\u5E8F\u4E0E\u56FA\u5B9A\uFF09\uFF0C\u6062\u590D\u4E3A\u9ED8\u8BA4\u8BBE\u7F6E\u3002",
+      "cancel": "\u53D6\u6D88",
+      "confirm": "\u786E\u8BA4"
+    },
+    en: {
+      "trigger": "Customize table",
+      "title": "Table settings",
+      "visible-pane": "Visible columns",
+      "hidden-pane": "Hidden columns",
+      "pinned-left": "Pinned left",
+      "pinned-right": "Pinned right",
+      "pin-left-zone": "Pin to left",
+      "pin-right-zone": "Pin to right",
+      "hide-hint": "Drag here to hide",
+      "group-fallback": "Group",
+      "reset": "Reset to default",
+      "reset-confirm-title": "Reset to default?",
+      "reset-confirm-body": "This discards all your customizations to this table (column visibility, order, and pinning) and restores the default settings.",
+      "cancel": "Cancel",
+      "confirm": "Confirm"
+    },
+    ja: {
+      "trigger": "\u30C6\u30FC\u30D6\u30EB\u3092\u30AB\u30B9\u30BF\u30DE\u30A4\u30BA",
+      "title": "\u30C6\u30FC\u30D6\u30EB\u8A2D\u5B9A",
+      "visible-pane": "\u8868\u793A\u4E2D\u306E\u5217",
+      "hidden-pane": "\u975E\u8868\u793A\u306E\u5217",
+      "pinned-left": "\u5DE6\u306B\u56FA\u5B9A\u4E2D",
+      "pinned-right": "\u53F3\u306B\u56FA\u5B9A\u4E2D",
+      "pin-left-zone": "\u5DE6\u306B\u56FA\u5B9A",
+      "pin-right-zone": "\u53F3\u306B\u56FA\u5B9A",
+      "hide-hint": "\u3053\u3053\u306B\u30C9\u30E9\u30C3\u30B0\u3057\u3066\u975E\u8868\u793A",
+      "group-fallback": "\u30B0\u30EB\u30FC\u30D7",
+      "reset": "\u30C7\u30D5\u30A9\u30EB\u30C8\u306B\u623B\u3059",
+      "reset-confirm-title": "\u30C7\u30D5\u30A9\u30EB\u30C8\u306B\u623B\u3057\u307E\u3059\u304B\uFF1F",
+      "reset-confirm-body": "\u3053\u306E\u30C6\u30FC\u30D6\u30EB\u306E\u3059\u3079\u3066\u306E\u30AB\u30B9\u30BF\u30DE\u30A4\u30BA\uFF08\u5217\u306E\u8868\u793A\u30FB\u9806\u5E8F\u30FB\u56FA\u5B9A\uFF09\u3092\u7834\u68C4\u3057\u3001\u30C7\u30D5\u30A9\u30EB\u30C8\u8A2D\u5B9A\u306B\u623B\u3057\u307E\u3059\u3002",
+      "cancel": "\u30AD\u30E3\u30F3\u30BB\u30EB",
+      "confirm": "\u78BA\u8A8D"
+    }
+  }
+});
+const LOCKED_TYPES = /* @__PURE__ */ new Set([SELECT_COLUMN_TYPE, DRAG_HANDLE_COLUMN_TYPE]);
+const columnById = computed(() => new Map(props.config.columns.map((c) => [c.id, c])));
+const lockedIds = computed(() => new Set(
+  props.config.columns.filter((c) => LOCKED_TYPES.has(c.type)).map((c) => c.id)
+));
+function columnTypeLabel(id) {
+  const column = columnById.value.get(id);
+  if (!column) return "";
+  return findColumnEntry(column.type, column.compatibilityDate)?.metadata.name ?? column.type;
+}
+function columnLabel(id) {
+  const column = columnById.value.get(id);
+  const title = column ? getLocalizedText(column.title, locale.value) : void 0;
+  return title && title.length > 0 ? title : columnTypeLabel(id);
+}
+const groupById = computed(() => new Map(props.config.groups.map((g) => [g.id, g])));
+function memberGroupId(id) {
+  const gid = columnById.value.get(id)?.groupId;
+  return gid && groupById.value.has(gid) ? gid : void 0;
+}
+function groupLabel(groupId) {
+  const title = getLocalizedText(
+    groupById.value.get(groupId)?.title,
+    locale.value
+  );
+  return title && title.length > 0 ? title : t("group-fallback");
+}
+function currentLeafOrder() {
+  const liveIds = props.config.columns.map((c) => c.id);
+  const liveSet = new Set(liveIds);
+  const ordered = props.tableApi.getState().columnOrder.filter((id) => liveSet.has(id));
+  const mentioned = new Set(ordered);
+  return [...ordered, ...liveIds.filter((id) => !mentioned.has(id))];
+}
+const open = ref(false);
+const confirmResetOpen = ref(false);
+const draft = ref({ left: [], main: [], right: [], hidden: [] });
+function buildDraft() {
+  const state = props.tableApi.getState();
+  const customizable = currentLeafOrder().filter((id) => columnById.value.has(id) && !lockedIds.value.has(id));
+  const pinnedLeft = new Set(state.columnPinning.left ?? []);
+  const pinnedRight = new Set(state.columnPinning.right ?? []);
+  const next = { left: [], main: [], right: [], hidden: [] };
+  for (const id of customizable) {
+    if (state.columnVisibility[id] === false) next.hidden.push(id);
+    else if (pinnedLeft.has(id)) next.left.push(id);
+    else if (pinnedRight.has(id)) next.right.push(id);
+    else next.main.push(id);
+  }
+  draft.value = weldGroups(next, groupOf);
+}
+function onOpenChange(next) {
+  if (next) buildDraft();
+  open.value = next;
+}
+const groupOf = memberGroupId;
+const bandOf = (id) => bandOfBands(draft.value, id);
+const bandOfGroup = (groupId) => bandOfGroupBands(draft.value, groupOf, groupId);
+const groupVisibleMembers = (groupId) => groupVisibleMembersBands(draft.value, groupOf, groupId);
+const COLUMN_KIND = "table-customization-column";
+const GROUP_KIND = "table-customization-group";
+const ZONE_PIN_LEFT = "pin-left-zone";
+const ZONE_PIN_RIGHT = "pin-right-zone";
+const ZONE_MAIN = "main-zone";
+const ZONE_HIDDEN = "hidden-zone";
+function onRowDrop(e) {
+  const { source, target, instruction } = e;
+  if (instruction !== "reorder-above" && instruction !== "reorder-below") return;
+  draft.value = weldGroups(applyRowDrop(draft.value, groupOf, {
+    sourceKind: source.kind === GROUP_KIND ? "group" : "column",
+    sourceId: source.id,
+    sourceGroupId: typeof source.data.groupId === "string" ? source.data.groupId : void 0,
+    targetKind: target.kind === GROUP_KIND ? "group" : "column",
+    targetId: target.id,
+    before: instruction === "reorder-above"
+  }), groupOf);
+}
+function onZoneDrop(e) {
+  const band = e.zoneId === ZONE_PIN_LEFT ? "left" : e.zoneId === ZONE_PIN_RIGHT ? "right" : e.zoneId === ZONE_MAIN ? "main" : e.zoneId === ZONE_HIDDEN ? "hidden" : void 0;
+  if (!band) return;
+  draft.value = weldGroups(applyZoneDrop(draft.value, groupOf, {
+    sourceKind: e.source.kind === GROUP_KIND ? "group" : "column",
+    sourceId: e.source.id,
+    band
+  }), groupOf);
+}
+const dnd = useTreeDnd({ onRowDrop, onZoneDrop });
+const pickDragHandle = (el) => el.querySelector(".drag-handle");
+const STRUCTURAL_BLOCK = ["make-child", "reparent"];
+function groupRowConfig(groupId) {
+  return {
+    kind: GROUP_KIND,
+    data: { band: bandOfGroup(groupId) },
+    canDrop: (src) => {
+      if (src.kind === GROUP_KIND) return src.id !== groupId;
+      return src.kind === COLUMN_KIND && !src.data.groupId;
+    },
+    blockInstructions: (src) => {
+      const block = [...STRUCTURAL_BLOCK];
+      if (src.kind === GROUP_KIND && src.id === groupId) {
+        block.push("reorder-above", "reorder-below");
+      }
+      return block;
+    },
+    dragHandle: pickDragHandle
+  };
+}
+function memberRowConfig(columnId, groupId) {
+  return {
+    kind: COLUMN_KIND,
+    data: { groupId, band: bandOf(columnId) },
+    // Members only accept SIBLINGS of the same group — this is what confines a
+    // member's drag to intra-group reorder (and un-hide back into the run).
+    canDrop: (src) => src.kind === COLUMN_KIND && src.data.groupId === groupId && src.id !== columnId,
+    blockInstructions: (src) => {
+      const block = [...STRUCTURAL_BLOCK];
+      if (src.id === columnId) block.push("reorder-above", "reorder-below");
+      return block;
+    },
+    dragHandle: pickDragHandle
+  };
+}
+function standaloneRowConfig(columnId) {
+  return {
+    kind: COLUMN_KIND,
+    data: { groupId: void 0, band: bandOf(columnId) },
+    canDrop: (src) => {
+      if (src.kind === GROUP_KIND) return true;
+      return src.kind === COLUMN_KIND && !src.data.groupId && src.id !== columnId;
+    },
+    blockInstructions: (src) => {
+      const block = [...STRUCTURAL_BLOCK];
+      if (src.id === columnId) block.push("reorder-above", "reorder-below");
+      return block;
+    },
+    dragHandle: pickDragHandle
+  };
+}
+function hiddenRowConfig(columnId) {
+  return {
+    kind: COLUMN_KIND,
+    data: { groupId: memberGroupId(columnId), band: "hidden" },
+    canDrop: () => false,
+    dragHandle: pickDragHandle
+  };
+}
+function hiddenGroupRowConfig() {
+  return {
+    kind: GROUP_KIND,
+    data: { band: "hidden" },
+    canDrop: () => false,
+    dragHandle: pickDragHandle
+  };
+}
+function pinZoneConfig(side) {
+  return {
+    canDrop: (src) => {
+      if (src.kind === GROUP_KIND) return bandOfGroup(src.id) !== side;
+      const gid = typeof src.data.groupId === "string" ? src.data.groupId : void 0;
+      if (gid) return bandOf(src.id) === "hidden" && bandOfGroup(gid) === void 0;
+      return bandOf(src.id) !== side;
+    }
+  };
+}
+function mainZoneConfig() {
+  return {
+    canDrop: (src) => {
+      if (src.kind === GROUP_KIND) return bandOfGroup(src.id) !== "main";
+      const gid = typeof src.data.groupId === "string" ? src.data.groupId : void 0;
+      if (gid) return bandOf(src.id) === "hidden" && bandOfGroup(gid) === void 0;
+      return true;
+    }
+  };
+}
+function hiddenZoneConfig() {
+  return {
+    canDrop: (src) => src.kind === GROUP_KIND ? groupVisibleMembers(src.id).length > 0 : bandOf(src.id) !== "hidden"
+  };
+}
+function bandEntries(band) {
+  const out = [];
+  let lastGid;
+  for (const id of draft.value[band]) {
+    const gid = memberGroupId(id);
+    if (gid) {
+      if (gid !== lastGid) out.push({ kind: "group", key: `g-${band}-${gid}`, groupId: gid });
+      out.push({ kind: "member", key: `c-${id}`, columnId: id, groupId: gid });
+    } else {
+      out.push({ kind: "column", key: `c-${id}`, columnId: id });
+    }
+    lastGid = gid;
+  }
+  return out;
+}
+const visibleEntries = computed(() => {
+  const left = bandEntries("left");
+  const main = bandEntries("main");
+  const right = bandEntries("right");
+  const out = [];
+  if (left.length > 0) {
+    out.push({ kind: "caption", key: "cap-left", text: t("pinned-left") });
+    out.push(...left);
+  }
+  if (left.length > 0 && (main.length > 0 || right.length > 0)) {
+    out.push({ kind: "separator", key: "sep-left" });
+  }
+  out.push(...main);
+  if (right.length > 0) {
+    if (left.length > 0 || main.length > 0) {
+      out.push({ kind: "separator", key: "sep-right" });
+    }
+    out.push({ kind: "caption", key: "cap-right", text: t("pinned-right") });
+    out.push(...right);
+  }
+  return out;
+});
+const hiddenEntries = computed(() => {
+  const out = [];
+  let lastGid;
+  for (const id of draft.value.hidden) {
+    const gid = memberGroupId(id);
+    if (gid && bandOfGroup(gid) === void 0) {
+      if (gid !== lastGid) out.push({ kind: "group", key: `hg-${gid}`, groupId: gid });
+      out.push({ kind: "member", key: `c-${id}`, columnId: id, groupId: gid });
+      lastGid = gid;
+    } else {
+      out.push({ kind: "column", key: `c-${id}`, columnId: id });
+      lastGid = void 0;
+    }
+  }
+  return out;
+});
+function onConfirm(close) {
+  const state = props.tableApi.getState();
+  const columnVisibility = {};
+  for (const band of ["left", "main", "right"]) {
+    for (const id of draft.value[band]) columnVisibility[id] = true;
+  }
+  for (const id of draft.value.hidden) columnVisibility[id] = false;
+  const columnOrder = weaveLockedColumns(
+    currentLeafOrder(),
+    lockedIds.value,
+    [...draft.value.left, ...draft.value.main, ...draft.value.right, ...draft.value.hidden]
+  );
+  const left = state.columnPinning.left?.filter((id) => lockedIds.value.has(id)) ?? [];
+  const right = state.columnPinning.right?.filter((id) => lockedIds.value.has(id)) ?? [];
+  left.push(...draft.value.left);
+  right.push(...draft.value.right);
+  emit("confirm", { columnVisibility, columnOrder, columnPinning: { left, right } });
+  close();
+}
+function onResetConfirmed(close) {
+  confirmResetOpen.value = false;
+  emit("reset");
+  close();
+}
+</script>
+
+<template>
+  <ResponsiveModal
+    :open="open"
+    content-width="40rem"
+    @update:open="onOpenChange"
+  >
+    <template #trigger>
+      <button
+        type="button"
+        :aria-label="t('trigger')"
+        :title="t('trigger')"
+        :class="[
+  'absolute right-0.5 top-1 z-20 flex size-6 items-center justify-center rounded',
+  'text-zinc-600 opacity-30 hover:opacity-60 transition-opacity duration-180 cursor-pointer'
+]"
+      >
+        <Icon
+          icon="fluent:table-settings-20-regular"
+          class="size-4"
+        />
+      </button>
+    </template>
+
+    <template #title>
+      {{ t("title") }}
+    </template>
+
+    <div class="grid grid-cols-2 gap-4 text-sm">
+      <!-- Visible columns, banded by pin side -->
+      <section
+        class="flex min-h-48 flex-col gap-0.5"
+        data-slot="table-customization-visible"
+      >
+        <h4 class="pb-1 text-xs font-medium text-zinc-500">
+          {{ t("visible-pane") }}
+        </h4>
+
+        <div
+          v-if="draft.left.length === 0"
+          :ref="dnd.zoneRef(ZONE_PIN_LEFT, pinZoneConfig('left'))"
+          class="pin-zone"
+          :data-active="dnd.isZoneActive(ZONE_PIN_LEFT) ? 'true' : void 0"
+        >
+          <Icon
+            icon="fluent:pin-20-regular"
+            class="size-3.5"
+          />
+          <span>{{ t("pin-left-zone") }}</span>
+        </div>
+
+        <template
+          v-for="entry in visibleEntries"
+          :key="entry.key"
+        >
+          <p
+            v-if="entry.kind === 'caption'"
+            class="band-caption"
+          >
+            {{ entry.text }}
+          </p>
+
+          <Separator
+            v-else-if="entry.kind === 'separator'"
+            class="my-1"
+          />
+
+          <!-- Group header: the drag handle moves / pins the whole block. -->
+          <div
+            v-else-if="entry.kind === 'group'"
+            :ref="dnd.rowRef(entry.groupId, groupRowConfig(entry.groupId))"
+            class="row group-row"
+            data-slot="table-customization-group"
+            :data-instruction="dnd.instructionFor(entry.groupId) ?? void 0"
+          >
+            <Icon
+              icon="fluent:re-order-dots-vertical-20-filled"
+              class="drag-handle size-4 shrink-0 cursor-grab text-zinc-300"
+            />
+            <Icon
+              icon="fluent:folder-20-regular"
+              class="size-4 shrink-0 text-zinc-400"
+            />
+            <span class="flex-1 truncate">{{ groupLabel(entry.groupId) }}</span>
+          </div>
+
+          <!-- Grouped member: reorders among siblings or drags to hidden. -->
+          <div
+            v-else-if="entry.kind === 'member'"
+            :ref="dnd.rowRef(entry.columnId, memberRowConfig(entry.columnId, entry.groupId))"
+            class="row member-row"
+            data-slot="table-customization-column"
+            :data-instruction="dnd.instructionFor(entry.columnId) ?? void 0"
+          >
+            <Icon
+              icon="fluent:re-order-dots-vertical-20-filled"
+              class="drag-handle size-4 shrink-0 cursor-grab text-zinc-300"
+            />
+            <span class="flex-1 truncate">{{ columnLabel(entry.columnId) }}</span>
+          </div>
+
+          <!-- Ungrouped column. -->
+          <div
+            v-else
+            :ref="dnd.rowRef(entry.columnId, standaloneRowConfig(entry.columnId))"
+            class="row"
+            data-slot="table-customization-column"
+            :data-instruction="dnd.instructionFor(entry.columnId) ?? void 0"
+          >
+            <Icon
+              icon="fluent:re-order-dots-vertical-20-filled"
+              class="drag-handle size-4 shrink-0 cursor-grab text-zinc-300"
+            />
+            <span class="flex-1 truncate">{{ columnLabel(entry.columnId) }}</span>
+          </div>
+        </template>
+
+        <div
+          v-if="draft.right.length === 0"
+          :ref="dnd.zoneRef(ZONE_PIN_RIGHT, pinZoneConfig('right'))"
+          class="pin-zone"
+          :data-active="dnd.isZoneActive(ZONE_PIN_RIGHT) ? 'true' : void 0"
+        >
+          <Icon
+            icon="fluent:pin-20-regular"
+            class="size-3.5"
+          />
+          <span>{{ t("pin-right-zone") }}</span>
+        </div>
+
+        <!-- Empty-space catcher: dropping here appends to the main band. -->
+        <div
+          :ref="dnd.zoneRef(ZONE_MAIN, mainZoneConfig())"
+          class="filler-zone"
+          :data-active="dnd.isZoneActive(ZONE_MAIN) ? 'true' : void 0"
+        />
+      </section>
+
+      <!-- Hidden columns — separated from the visible pane by a hairline rule
+           rather than a boxed border, so the two lists read as one surface. -->
+      <section
+        class="flex min-h-48 flex-col gap-0.5 border-l border-zinc-100 pl-4"
+        data-slot="table-customization-hidden"
+      >
+        <h4 class="pb-1 text-xs font-medium text-zinc-500">
+          {{ t("hidden-pane") }}
+        </h4>
+
+        <template
+          v-for="entry in hiddenEntries"
+          :key="entry.key"
+        >
+          <!-- Fully-hidden group: its folder header drags the whole group
+               back to a visible band. -->
+          <div
+            v-if="entry.kind === 'group'"
+            :ref="dnd.rowRef(entry.groupId, hiddenGroupRowConfig())"
+            class="row group-row text-zinc-400"
+            data-slot="table-customization-group"
+          >
+            <Icon
+              icon="fluent:re-order-dots-vertical-20-filled"
+              class="drag-handle size-4 shrink-0 cursor-grab text-zinc-300"
+            />
+            <Icon
+              icon="fluent:folder-20-regular"
+              class="size-4 shrink-0 text-zinc-400"
+            />
+            <span class="flex-1 truncate">{{ groupLabel(entry.groupId) }}</span>
+          </div>
+
+          <!-- Member of a fully-hidden group: still individually revivable. -->
+          <div
+            v-else-if="entry.kind === 'member'"
+            :ref="dnd.rowRef(entry.columnId, hiddenRowConfig(entry.columnId))"
+            class="row member-row text-zinc-400"
+            data-slot="table-customization-column"
+          >
+            <Icon
+              icon="fluent:re-order-dots-vertical-20-filled"
+              class="drag-handle size-4 shrink-0 cursor-grab text-zinc-300"
+            />
+            <span class="flex-1 truncate">{{ columnLabel(entry.columnId) }}</span>
+          </div>
+
+          <!-- Standalone hidden column (or a member whose group is still
+               partly visible). -->
+          <div
+            v-else-if="entry.kind === 'column'"
+            :ref="dnd.rowRef(entry.columnId, hiddenRowConfig(entry.columnId))"
+            class="row text-zinc-400"
+            data-slot="table-customization-column"
+          >
+            <Icon
+              icon="fluent:re-order-dots-vertical-20-filled"
+              class="drag-handle size-4 shrink-0 cursor-grab text-zinc-300"
+            />
+            <span class="flex-1 truncate">{{ columnLabel(entry.columnId) }}</span>
+          </div>
+        </template>
+
+        <!-- Empty-space catcher: dropping here hides the column (or, for a
+             group header, its whole member run). -->
+        <div
+          :ref="dnd.zoneRef(ZONE_HIDDEN, hiddenZoneConfig())"
+          class="filler-zone flex items-center justify-center text-xs text-zinc-300"
+          :data-active="dnd.isZoneActive(ZONE_HIDDEN) ? 'true' : void 0"
+        >
+          <span v-if="draft.hidden.length === 0">{{ t("hide-hint") }}</span>
+        </div>
+      </section>
+    </div>
+
+    <template #footer="{ close }">
+      <div class="flex w-full items-center gap-2">
+        <Button
+          variant="ghost"
+          size="sm"
+          class="mr-auto text-zinc-500"
+          data-slot="table-customization-reset"
+          @click="confirmResetOpen = true"
+        >
+          <Icon icon="fluent:arrow-reset-20-regular" />
+          {{ t("reset") }}
+        </Button>
+        <Button
+          size="sm"
+          @click="close()"
+        >
+          <Icon icon="fluent:dismiss-20-regular" />
+          {{ t("cancel") }}
+        </Button>
+        <Button
+          variant="primary"
+          size="sm"
+          data-slot="table-customization-confirm"
+          @click="onConfirm(close)"
+        >
+          <Icon icon="fluent:checkmark-20-regular" />
+          {{ t("confirm") }}
+        </Button>
+
+        <!-- 恢复默认 is a wipe of the user's arrangement, so confirm first. On
+             confirm we reset AND close the whole modal (see `onResetConfirmed`). -->
+        <AlertDialog
+          :open="confirmResetOpen"
+          @update:open="(o) => {
+  confirmResetOpen = o;
+}"
+        >
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>{{ t("reset-confirm-title") }}</AlertDialogTitle>
+              <AlertDialogDescription>{{ t("reset-confirm-body") }}</AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel
+                data-slot="table-customization-reset-cancel"
+                @click="confirmResetOpen = false"
+              >
+                <Icon icon="fluent:dismiss-20-regular" />
+                {{ t("cancel") }}
+              </AlertDialogCancel>
+              <AlertDialogAction
+                data-slot="table-customization-reset-confirm"
+                @click="onResetConfirmed(close)"
+              >
+                <Icon icon="fluent:arrow-reset-20-regular" />
+                {{ t("reset") }}
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      </div>
+    </template>
+  </ResponsiveModal>
+</template>
+
+<style scoped>
+.row{align-items:center;border-radius:.25rem;display:flex;font-size:.875rem;gap:.375rem;padding-block:.375rem;padding-inline:.5rem;position:relative;transition:background-color .1s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none}.row:hover{background:#fafafa}.group-row{color:#52525b;font-weight:500}.member-row{padding-left:1.75rem}[data-instruction=reorder-above]:before,[data-instruction=reorder-below]:after{background:var(--primary,#2563eb);content:"";height:2px;left:.5rem;pointer-events:none;position:absolute;right:.5rem;z-index:1}[data-instruction=reorder-above]:before{top:-1px}[data-instruction=reorder-below]:after{bottom:-1px}.band-caption{color:#a1a1aa;font-size:.625rem;font-weight:500;letter-spacing:.04em;padding:.125rem .5rem;text-transform:uppercase}.pin-zone{align-items:center;border-radius:.25rem;color:transparent;display:flex;font-size:.75rem;gap:.25rem;height:.5rem;justify-content:center;margin:.125rem 0;pointer-events:auto;transition:height .12s ease,color .12s ease,background-color .12s ease}.pin-zone>*{pointer-events:none}.pin-zone[data-active=true]{background-color:color-mix(in srgb,var(--primary,#2563eb) 8%,#fff);color:var(--primary,#2563eb);height:1.75rem}.filler-zone{border-radius:.25rem;flex:1 1 auto;min-height:2rem;transition:background-color .12s ease}.filler-zone>*{pointer-events:none}.filler-zone[data-active=true]{background-color:color-mix(in srgb,var(--primary,#2563eb) 8%,#fff)}
+</style>

package/dist/runtime/components/table/customization.vue.d.ts

@@ -0,0 +1,15 @@
+import type { Table } from '@tanstack/vue-table';
+import type { TableConfigValue } from './schema.js';
+type __VLS_Props = {
+    config: TableConfigValue;
+    tableApi: Table<unknown>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    reset: () => any;
+    confirm: (payload: Required<Pick<Partial<Omit<import("./utils/customization.js").TableCustomizationSnapshot, "v">>, "columnVisibility" | "columnOrder" | "columnPinning">>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onReset?: (() => any) | undefined;
+    onConfirm?: ((payload: Required<Pick<Partial<Omit<import("./utils/customization.js").TableCustomizationSnapshot, "v">>, "columnVisibility" | "columnOrder" | "columnPinning">>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;