@shwfed/config 2.12.4 → 2.12.6

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

@@ -28,6 +28,11 @@ import ShwfedActions from "../actions/components/group.vue";
 import ShwfedForm from "../form/index.vue";
 import { evaluateInitial } from "../form/utils/initial";
 import { provideTableInstanceId } from "./utils/instance";
+import {
+  mergeCustomization,
+  useTableCustomization
+} from "./utils/customization";
+import TableCustomization from "./customization.vue";
 import { provideSharedFetchLayer } from "./utils/shared-fetch";
 import { provideEventTarget } from "../../share/event-bus";
 import { usePersistedQuery } from "../../share/use-persisted-query";
@@ -50,6 +55,8 @@ const persistedQuery = usePersistedQuery(
   queryState,
   () => config.value?.persistQuery === true
 );
+const customization = useTableCustomization(config.value?.id);
+customization.load();
 const { t, locale } = useI18n({
   inheritLocale: true,
   messages: {
@@ -118,9 +125,20 @@ function freezeGrowColumns() {
   frozenGrowColumns.value = next;
 }
 function onResizeMouseDown(header, event) {
+  resizeGestureSeen = true;
   freezeGrowColumns();
   header.getResizeHandler()(event);
 }
+let resizeGestureSeen = false;
+function restoreFrozenGrowColumns() {
+  const userSizing = customization.snapshot()?.columnSizing;
+  if (!userSizing) return;
+  const grows = (config.value?.columns ?? []).filter((c) => c.grow === true && userSizing[c.id] !== void 0);
+  if (grows.length === 0) return;
+  const next = new Set(frozenGrowColumns.value);
+  grows.forEach((c) => next.add(c.id));
+  frozenGrowColumns.value = next;
+}
 function growLeafCount(header) {
   return header.getLeafHeaders().filter((h2) => isEffectiveGrow(h2.column)).length;
 }
@@ -301,6 +319,10 @@ const tableApi = useVueTable({
   getSortedRowModel: getSortedRowModel(),
   columnResizeMode: "onChange"
 });
+watch(() => tableApi.getState().columnSizing, (sizing) => {
+  if (!resizeGestureSeen) return;
+  customization.persistPatch({ columnSizing: { ...sizing } });
+});
 provideCELContext({
   selected: {
     type: "list<dyn>",
@@ -519,7 +541,7 @@ const sortedRowIndexMap = computed(() => {
 function getDisplayIndex(row) {
   return sortedRowIndexMap.value.get(row.id) ?? row.index;
 }
-watch(config, (config2) => {
+watch([config, customization.revision], ([config2]) => {
   if (!config2) return;
   const initialState = config2.initialState;
   const hiddenSeed = {};
@@ -528,17 +550,47 @@ watch(config, (config2) => {
   }
   const hasSeed = Object.keys(hiddenSeed).length > 0;
   const effective = initialState || hasSeed ? { ...initialState ?? {}, columnVisibility: { ...hiddenSeed, ...initialState?.columnVisibility ?? {} } } : void 0;
-  const nextKey = effective ? JSON.stringify(effective) : "";
-  if (appliedInitialStateKey.value === nextKey || !effective) {
+  const { state: merged, pageSize: pageSizeOverride } = mergeCustomization(
+    effective,
+    customization.snapshot(),
+    buildCustomizationContext(config2),
+    { explicit: customization.wasCustomized() }
+  );
+  const nextKey = merged ? JSON.stringify({ merged, pageSize: pageSizeOverride ?? null }) : "";
+  if (appliedInitialStateKey.value === nextKey || !merged) {
     appliedInitialStateKey.value = nextKey;
     syncPaginationPageSize();
     return;
   }
-  tableApi.initialState = mergeInitialState(tableApi.initialState, effective);
+  tableApi.initialState = mergeInitialState(tableApi.initialState, merged, pageSizeOverride);
   tableApi.reset();
+  restoreFrozenGrowColumns();
   appliedInitialStateKey.value = nextKey;
   syncPaginationPageSize();
 }, { immediate: true });
+function buildCustomizationContext(config2) {
+  return {
+    columnIds: new Set(config2.columns.map((c) => c.id)),
+    pageSizes: config2.pagination?.pageSizes ?? [],
+    paginationEnabled: config2.pagination !== void 0
+  };
+}
+function onCustomizationConfirm(payload) {
+  customization.persistPatch(payload);
+  if (payload.columnVisibility) tableApi.setColumnVisibility({ ...payload.columnVisibility });
+  if (payload.columnOrder) tableApi.setColumnOrder([...payload.columnOrder]);
+  if (payload.columnPinning) {
+    tableApi.setColumnPinning({
+      left: [...payload.columnPinning.left],
+      right: [...payload.columnPinning.right]
+    });
+  }
+}
+function resetCustomization() {
+  customization.clear();
+  resizeGestureSeen = false;
+  frozenGrowColumns.value = /* @__PURE__ */ new Set();
+}
 defineExpose(tableApi);
 const rows = computed(() => isPaginationEnabled.value ? tableApi.getRowModel().rows : tableApi.getPrePaginationRowModel().rows);
 const maxPage = computed(() => isPaginationEnabled.value ? Math.max(tableApi.getPageCount(), 1) : 1);
@@ -635,6 +687,7 @@ const currentPageSize = computed({
     const nextPageSize = Number(value);
     if (!Number.isInteger(nextPageSize) || nextPageSize <= 0) return;
     tableApi.setPageSize(nextPageSize);
+    customization.persistPatch({ pageSize: nextPageSize });
   }
 });
 function syncPaginationPageSize() {
@@ -659,7 +712,7 @@ function normalizeExpandedState(expanded, current) {
   if (expanded === false) return {};
   return expanded;
 }
-function mergeInitialState(current, initialState) {
+function mergeInitialState(current, initialState, pageSizeOverride) {
   return {
     ...current,
     columnVisibility: initialState.columnVisibility ?? current.columnVisibility,
@@ -680,7 +733,7 @@ function mergeInitialState(current, initialState) {
     columnSizing: initialState.columnSizing ?? current.columnSizing,
     pagination: isPaginationEnabled.value ? {
       pageIndex: paginationConfig.value?.pageIndex ?? current.pagination.pageIndex,
-      pageSize: paginationConfig.value?.pageSize ?? current.pagination.pageSize
+      pageSize: pageSizeOverride ?? paginationConfig.value?.pageSize ?? current.pagination.pageSize
     } : current.pagination,
     rowSelection: initialState.rowSelection ?? current.rowSelection
   };
@@ -724,6 +777,16 @@ export { TableConfig, createTableConfig, getColumnTechnicalKey } from "./schema"
         class="absolute inset-0 bg-white/20 z-30 pointer-events-auto"
         aria-hidden="true"
       />
+      <!-- User-land customization trigger: floats over the sticky thead's
+           far-right corner, outside the scroll container so it neither moves
+           on horizontal scroll nor collides with right-pinned columns. -->
+      <TableCustomization
+        v-if="config?.id"
+        :config="config"
+        :table-api="tableApi"
+        @confirm="onCustomizationConfirm"
+        @reset="resetCustomization"
+      />
       <ClientOnly>
         <!-- Scrollable table container -->
         <div

package/dist/runtime/components/table/schema.d.ts

@@ -157,40 +157,6 @@ export declare function TableConfig(configure: (env: Environment) => void): Sche
             readonly message: string;
         }[]] | undefined;
     }[];
-    readonly query?: {
-        readonly style?: string | undefined;
-        readonly id?: string | undefined;
-        readonly initial?: {
-            readonly data: string;
-            readonly request?: string | undefined;
-        } | undefined;
-        readonly displayName?: string | undefined;
-        readonly kind: "shwfed.component.form";
-        readonly fields: readonly any[];
-        readonly layouts: readonly {
-            readonly name: string;
-            readonly layout: {
-                readonly style?: string | undefined;
-                readonly columns: number;
-                readonly gap?: number | undefined;
-                readonly rows?: number | undefined;
-                readonly placements: {
-                    readonly [x: string]: {
-                        readonly area: readonly [readonly [number, number], readonly [number, number]];
-                        readonly v?: "stretch" | "center" | "end" | "start" | undefined;
-                        readonly h?: "stretch" | "center" | "end" | "start" | undefined;
-                    };
-                };
-            };
-            readonly media?: string | undefined;
-        }[];
-        readonly readonly?: string | undefined;
-    } | undefined;
-    readonly dataSource?: {
-        readonly data: string;
-        readonly total?: string | undefined;
-        readonly request?: string | undefined;
-    } | undefined;
     readonly actions?: {
         readonly size: "default" | "sm" | "xs";
         readonly style?: string | undefined;
@@ -258,6 +224,40 @@ export declare function TableConfig(configure: (env: Environment) => void): Sche
             readonly variant?: "default" | "link" | "destructive" | "primary" | "ghost" | undefined;
         }[];
     } | undefined;
+    readonly query?: {
+        readonly style?: string | undefined;
+        readonly id?: string | undefined;
+        readonly initial?: {
+            readonly data: string;
+            readonly request?: string | undefined;
+        } | undefined;
+        readonly displayName?: string | undefined;
+        readonly kind: "shwfed.component.form";
+        readonly fields: readonly any[];
+        readonly layouts: readonly {
+            readonly name: string;
+            readonly layout: {
+                readonly style?: string | undefined;
+                readonly columns: number;
+                readonly gap?: number | undefined;
+                readonly rows?: number | undefined;
+                readonly placements: {
+                    readonly [x: string]: {
+                        readonly area: readonly [readonly [number, number], readonly [number, number]];
+                        readonly v?: "stretch" | "center" | "end" | "start" | undefined;
+                        readonly h?: "stretch" | "center" | "end" | "start" | undefined;
+                    };
+                };
+            };
+            readonly media?: string | undefined;
+        }[];
+        readonly readonly?: string | undefined;
+    } | undefined;
+    readonly dataSource?: {
+        readonly data: string;
+        readonly total?: string | undefined;
+        readonly request?: string | undefined;
+    } | undefined;
     readonly bottomActions?: {
         readonly size: "default" | "sm" | "xs";
         readonly style?: string | undefined;
@@ -826,40 +826,6 @@ export declare function createTableConfig(body: Omit<Schema.Schema.Type<ReturnTy
             readonly message: string;
         }[]] | undefined;
     }[];
-    query?: {
-        readonly style?: string | undefined;
-        readonly id?: string | undefined;
-        readonly initial?: {
-            readonly data: string;
-            readonly request?: string | undefined;
-        } | undefined;
-        readonly displayName?: string | undefined;
-        readonly kind: "shwfed.component.form";
-        readonly fields: readonly any[];
-        readonly layouts: readonly {
-            readonly name: string;
-            readonly layout: {
-                readonly style?: string | undefined;
-                readonly columns: number;
-                readonly gap?: number | undefined;
-                readonly rows?: number | undefined;
-                readonly placements: {
-                    readonly [x: string]: {
-                        readonly area: readonly [readonly [number, number], readonly [number, number]];
-                        readonly v?: "stretch" | "center" | "end" | "start" | undefined;
-                        readonly h?: "stretch" | "center" | "end" | "start" | undefined;
-                    };
-                };
-            };
-            readonly media?: string | undefined;
-        }[];
-        readonly readonly?: string | undefined;
-    } | undefined;
-    dataSource?: {
-        readonly data: string;
-        readonly total?: string | undefined;
-        readonly request?: string | undefined;
-    } | undefined;
     actions?: {
         readonly size: "default" | "sm" | "xs";
         readonly style?: string | undefined;
@@ -927,6 +893,40 @@ export declare function createTableConfig(body: Omit<Schema.Schema.Type<ReturnTy
             readonly variant?: "default" | "link" | "destructive" | "primary" | "ghost" | undefined;
         }[];
     } | undefined;
+    query?: {
+        readonly style?: string | undefined;
+        readonly id?: string | undefined;
+        readonly initial?: {
+            readonly data: string;
+            readonly request?: string | undefined;
+        } | undefined;
+        readonly displayName?: string | undefined;
+        readonly kind: "shwfed.component.form";
+        readonly fields: readonly any[];
+        readonly layouts: readonly {
+            readonly name: string;
+            readonly layout: {
+                readonly style?: string | undefined;
+                readonly columns: number;
+                readonly gap?: number | undefined;
+                readonly rows?: number | undefined;
+                readonly placements: {
+                    readonly [x: string]: {
+                        readonly area: readonly [readonly [number, number], readonly [number, number]];
+                        readonly v?: "stretch" | "center" | "end" | "start" | undefined;
+                        readonly h?: "stretch" | "center" | "end" | "start" | undefined;
+                    };
+                };
+            };
+            readonly media?: string | undefined;
+        }[];
+        readonly readonly?: string | undefined;
+    } | undefined;
+    dataSource?: {
+        readonly data: string;
+        readonly total?: string | undefined;
+        readonly request?: string | undefined;
+    } | undefined;
     bottomActions?: {
         readonly size: "default" | "sm" | "xs";
         readonly style?: string | undefined;

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

@@ -0,0 +1,158 @@
+import type { InitialStateValue } from '../schema.js';
+export interface TableCustomizationSnapshot {
+    v: 1;
+    columnVisibility?: Record<string, boolean>;
+    columnOrder?: string[];
+    columnPinning?: {
+        left: string[];
+        right: string[];
+    };
+    columnSizing?: Record<string, number>;
+    pageSize?: number;
+}
+export type TableCustomizationPatch = Partial<Omit<TableCustomizationSnapshot, 'v'>>;
+export interface CustomizationContext {
+    columnIds: ReadonlySet<string>;
+    pageSizes: ReadonlyArray<number>;
+    paginationEnabled: boolean;
+}
+/**
+ * Parse a raw localStorage value into a snapshot. Anything off — null, bad
+ * JSON, wrong version, non-object — yields `undefined` (treated as "no
+ * customization"). Slices are validated individually so one corrupted field
+ * drops alone instead of discarding the whole snapshot.
+ */
+export declare function parseSnapshot(raw: string | null): TableCustomizationSnapshot | undefined;
+/**
+ * Reconcile a snapshot against the live column set: entries referencing
+ * columns the designer has since deleted are dropped, and a persisted
+ * `pageSize` survives only while it is still one of the configured
+ * `pageSizes`.
+ *
+ * Emptied-by-prune rule for the wholesale slices (`columnOrder`,
+ * `columnPinning`): a slice that was non-empty but lost every entry to
+ * pruning is removed entirely — the user's whole choice referenced dead
+ * columns, so the designer's slice should apply again. A slice the user
+ * deliberately saved empty (e.g. unpinned everything) stays authoritative.
+ */
+export declare function pruneSnapshot(snapshot: TableCustomizationSnapshot, ctx: CustomizationContext): TableCustomizationSnapshot;
+export interface MergedCustomization {
+    state?: InitialStateValue;
+    pageSize?: number;
+}
+/**
+ * Fold a user snapshot over the designer's effective initial state.
+ *
+ * - Per-key slices (`columnVisibility`, `columnSizing`) merge entry-wise, user
+ *   over design — an explicit user `true` re-shows a designer-hidden column.
+ * - Wholesale slices (`columnOrder`, `columnPinning`) are taken from the user
+ *   when present (after pruning), else from the design.
+ * - `sorting` / `rowPinning` / `expanded` / `grouping` / `rowSelection` are
+ *   designer-only and pass through untouched.
+ *
+ * With a snapshot present, every user-editable slice is emitted explicitly
+ * (empty rather than absent) so the host's `mergeInitialState` overrides stale
+ * live state instead of falling through to it. `explicit` forces that same
+ * fully-specified output when the snapshot is absent — the reset path, where
+ * previously-applied user state must not survive the fall-through. Without a
+ * snapshot and without `explicit`, the design passes through unchanged
+ * (identical to pre-customization behavior).
+ */
+export declare function mergeCustomization(design: InitialStateValue | undefined, snapshot: TableCustomizationSnapshot | undefined, ctx: CustomizationContext, options?: {
+    explicit?: boolean;
+}): MergedCustomization;
+/**
+ * Rebuild a full leaf `columnOrder` from the modal's draft. Locked columns
+ * (select / drag-handle — structural, not shown in the modal) keep their
+ * current slots; the remaining slots are filled with the draft order. Draft
+ * ids missing from the current order (shouldn't happen, but a stale draft is
+ * cheap to tolerate) append at the end.
+ */
+export declare function weaveLockedColumns(currentLeafOrder: ReadonlyArray<string>, lockedIds: ReadonlySet<string>, draftOrder: ReadonlyArray<string>): string[];
+export type DraftBand = 'left' | 'main' | 'right' | 'hidden';
+export type DraftBands = Record<DraftBand, string[]>;
+export type GroupOf = (id: string) => string | undefined;
+export type DraftAnchor = {
+    at: 'append';
+} | {
+    at: 'before' | 'after';
+    ref: string;
+};
+export declare function bandOf(bands: DraftBands, id: string): DraftBand | undefined;
+/** A group's members currently in the visible bands, in order. */
+export declare function groupVisibleMembers(bands: DraftBands, groupOf: GroupOf, groupId: string): string[];
+/** A group's members currently in the hidden band, in order. */
+export declare function groupHiddenMembers(bands: DraftBands, groupOf: GroupOf, groupId: string): string[];
+/** The single visible band a group occupies, or undefined when fully hidden. */
+export declare function bandOfGroup(bands: DraftBands, groupOf: GroupOf, groupId: string): DraftBand | undefined;
+export declare function groupEdgeMember(bands: DraftBands, groupOf: GroupOf, groupId: string, edge: 'first' | 'last'): string | undefined;
+/**
+ * Remove `runIds` from wherever they sit, then reinsert them — contiguous, in
+ * the given order — at `anchor` within `band`.
+ */
+export declare function moveRun(bands: DraftBands, runIds: readonly string[], band: DraftBand, anchor: DraftAnchor): DraftBands;
+/**
+ * Safety weld: re-collect each group's members into one contiguous run.
+ *
+ * - Visible members collapse into the group's "home" band (the first visible
+ *   band holding any member) as a single run.
+ * - Hidden members are welded WITHIN the hidden band only — never merged with
+ *   the visible bands (that would silently un-hide them), so a fully-hidden
+ *   group still renders as one folder in the hidden pane.
+ *
+ * A no-op on already-welded input — the only state the designer or a prior
+ * confirm ever produce — it exists so a drifted / corrupted snapshot, or a
+ * multi-step drag, can't render a fragmented group.
+ */
+export declare function weldGroups(bands: DraftBands, groupOf: GroupOf): DraftBands;
+export interface DraftRowDrop {
+    sourceKind: 'group' | 'column';
+    sourceId: string;
+    sourceGroupId?: string;
+    targetKind: 'group' | 'column';
+    targetId: string;
+    before: boolean;
+}
+/**
+ * Resolve a row-to-row drop into the next bands. Assumes the drop already
+ * passed the modal's `canDrop` gate (group↔group, group↔standalone,
+ * same-group member reorder, standalone↔standalone) — combinations outside
+ * that set return the bands unchanged. A group source carries its whole run,
+ * which is its hidden members when the group is being revived from a
+ * fully-hidden state (see `groupRun`).
+ */
+export declare function applyRowDrop(bands: DraftBands, groupOf: GroupOf, drop: DraftRowDrop): DraftBands;
+export interface DraftZoneDrop {
+    sourceKind: 'group' | 'column';
+    sourceId: string;
+    band: DraftBand;
+}
+/**
+ * Resolve a drop onto a band zone (pin-left / pin-right / main filler /
+ * hidden). A group source carries its whole run — its visible members when
+ * hiding / re-pinning a visible group, or its hidden members when reviving a
+ * fully-hidden group back into a visible band (see `groupRun`).
+ */
+export declare function applyZoneDrop(bands: DraftBands, groupOf: GroupOf, drop: DraftZoneDrop): DraftBands;
+/**
+ * Owns the localStorage-backed customization snapshot for one table.
+ *
+ * Modeled on `usePersistedQuery`: storage is keyed on the table's stable
+ * `config.id`, every access is SSR- and privacy-mode-guarded, and the feature
+ * is fully off without an id.
+ *
+ * The snapshot itself is deliberately NON-reactive; `revision` is bumped only
+ * by `load()` and `clear()`. Live captures (resize, page size) and the modal
+ * confirm go through `persistPatch`, which updates storage and the in-memory
+ * snapshot WITHOUT bumping `revision` — so they never re-trigger the host's
+ * `watch([config, revision])` and its `tableApi.reset()` (which would nuke row
+ * selection). A later config change still re-reads the fresh snapshot.
+ */
+export declare function useTableCustomization(tableId: string | undefined): {
+    revision: import("vue").Ref<number, number>;
+    load: () => void;
+    snapshot: () => TableCustomizationSnapshot | undefined;
+    persistPatch: (patch: TableCustomizationPatch) => void;
+    clear: () => void;
+    wasCustomized: () => boolean;
+};