@shwfed/config 2.10.0 → 2.10.2

package/dist/runtime/components/table/columns/2026-06-14/com.shwfed.table.column.tree-combobox-single/schema.js

@@ -0,0 +1,171 @@
+import { Effect, Schema } from "effect";
+import { getProperty } from "dot-prop";
+import { Locale } from "../../../../../share/locale.js";
+import { Expression, HttpRequestResult, LocaleMarkdown } from "../../../../../share/expression.js";
+import {
+  CelRowAccess,
+  derivedRowField,
+  editableColumnFields,
+  editableHeader,
+  registerRowVariablesIfAbsent
+} from "../../../utils/shared.js";
+import { localeLabelToExpression } from "../combobox-migrate.js";
+export const type = "com.shwfed.table.column.tree-combobox-single";
+export const compatibilityDate = "2026-06-14";
+export const metadata = {
+  name: "\u4E0B\u62C9\u6811\uFF08\u5355\u9009\uFF09",
+  icon: "fluent:tree-evergreen-20-regular",
+  // Publishes its resolved node (backend record) to the per-row `selections` registry (runtime.vue), readable via `selections["<id>"]`.
+  selection: true
+};
+const isListLike = (t) => t === "dyn" || t.startsWith("list") || t.startsWith("optional");
+const isKeyType = (t) => t === "string" || t === "number" || t === "dyn";
+function withRowAndNode(configure) {
+  return (env) => {
+    configure(env);
+    registerRowVariablesIfAbsent(env);
+    env.registerVariable("node", "dyn", { description: "`\u6570\u636E\u6E90` \u8FD4\u56DE\u7684\u8282\u70B9\uFF1B\u7531\u6811\u9010\u5C42\u5411\u4E0B\u8BFB\u53D6" });
+  };
+}
+export function schema(configure) {
+  const CelBool = CelRowAccess(configure, { resultType: "bool" });
+  const CelNodeKey = Expression({ configure: withRowAndNode(configure), resultType: isKeyType });
+  const CelNodeChildren = Expression({ configure: withRowAndNode(configure), resultType: isListLike });
+  const CelNodeBool = Expression({ configure: withRowAndNode(configure), resultType: "bool" });
+  const CelKeywords = Expression({ configure: withRowAndNode(configure), resultType: isListLike });
+  const CelNodeLabel = Expression({ configure: withRowAndNode(configure), resultType: "dyn" });
+  const NodeLocaleMd = LocaleMarkdown({ configure: withRowAndNode(configure) });
+  const dataSourceConfigure = (env) => {
+    configure(env);
+    registerRowVariablesIfAbsent(env);
+  };
+  const CelDataSourceRequest = Expression({
+    configure: dataSourceConfigure,
+    resultType: HttpRequestResult
+  });
+  const CelDataSourceData = Expression({
+    configure: (env) => {
+      dataSourceConfigure(env);
+      env.registerVariable("json", "optional<dyn>", {
+        description: "HTTP \u54CD\u5E94\u4F53\uFF08\u5DF2\u89E3\u6790 JSON\uFF09\uFF1B\u672A\u914D\u7F6E `request` \u65F6\u4E3A `none`"
+      });
+    },
+    resultType: (t) => t.startsWith("list") || t === "dyn" || t.startsWith("optional")
+  });
+  const TreeDataSource = Schema.Struct({
+    request: Schema.optional(CelDataSourceRequest).annotations({
+      title: "\u8BF7\u6C42",
+      description: "\u53EF\u9009\u7684 HTTP \u8BF7\u6C42\u8868\u8FBE\u5F0F\uFF1B\u672A\u914D\u7F6E\u65F6\u6570\u636E\u4ECE `data` \u8868\u8FBE\u5F0F\u4E2D\u8BFB\u53D6"
+    }),
+    data: CelDataSourceData.annotations({
+      title: "\u6570\u636E",
+      description: "\u8FD4\u56DE\u884C\u6570\u636E\u5217\u8868\u7684 CEL \u8868\u8FBE\u5F0F\uFF1B\u914D\u7F6E\u4E86 `request` \u65F6\u53EF\u901A\u8FC7 `json` \u5F15\u7528\u54CD\u5E94\u4F53"
+    })
+  }).annotations({ title: "DataSource", description: "\u6570\u636E\u6E90\u914D\u7F6E" });
+  return Schema.Struct({
+    type: Schema.Literal(type),
+    compatibilityDate: Schema.Literal(compatibilityDate),
+    ...editableColumnFields(),
+    placeholder: Schema.optional(Locale.annotations({
+      title: "\u5360\u4F4D\u7B26",
+      description: "\u672A\u9009\u4E2D\u4EFB\u4F55\u9009\u9879\u65F6\u8F93\u5165\u6846\u4E2D\u7684\u5360\u4F4D\u6587\u672C"
+    })),
+    hidden: Schema.optional(CelBool.annotations({
+      title: "\u9690\u85CF\u6761\u4EF6",
+      description: "\u8FD4\u56DE `true` \u65F6\u8BE5\u884C\u7684\u4E0B\u62C9\u6811\u4E0D\u6E32\u67D3\uFF08\u5176\u4F59\u884C\u4E0D\u53D7\u5F71\u54CD\uFF09"
+    })),
+    disabled: Schema.optional(CelBool.annotations({
+      title: "\u7981\u7528\u6761\u4EF6",
+      description: "\u8FD4\u56DE `true` \u65F6\u4E0B\u62C9\u6811\u4ECD\u7136\u6E32\u67D3\u4F46\u4E0D\u53EF\u9009\u62E9"
+    })),
+    readonly: Schema.optional(CelBool.annotations({
+      title: "\u53EA\u8BFB\u6761\u4EF6",
+      description: "\u8FD4\u56DE `true` \u65F6\u4EC5\u4EE5\u7EAF\u6587\u672C\u5C55\u793A\u5F53\u524D\u9009\u9879\u7684\u6807\u7B7E"
+    })),
+    derived: derivedRowField(configure, "dyn"),
+    dataSource: TreeDataSource.annotations({
+      title: "\u6570\u636E\u6E90",
+      description: "\u8FD4\u56DE\u5B8C\u6574\u6811\uFF08\u6839\u8282\u70B9\u5217\u8868\uFF09\u7684\u6570\u636E\u6E90\uFF1B\u901A\u8FC7 `\u8282\u70B9\u5B50\u7EA7` \u8868\u8FBE\u5F0F\u9010\u5C42\u5411\u4E0B\u8BFB\u53D6\uFF1B\u53EF\u8BBF\u95EE `row`\u3001`index`"
+    }),
+    nodeKey: CelNodeKey.annotations({
+      title: "\u8282\u70B9 ID",
+      description: "\u4E3A\u6BCF\u4E2A\u8282\u70B9\u8BA1\u7B97\u7A33\u5B9A\u552F\u4E00 ID \u7684 CEL \u8868\u8FBE\u5F0F\uFF0C\u53EF\u8BBF\u95EE `node`\u3001`row`\u3001`index`\uFF1B\u8FD0\u884C\u65F6\u4EE5\u5B57\u7B26\u4E32\u5F62\u5F0F\u5B58\u50A8"
+    }),
+    nodeChildren: CelNodeChildren.annotations({
+      title: "\u8282\u70B9\u5B50\u7EA7",
+      description: "\u8FD4\u56DE\u5F53\u524D\u8282\u70B9\u5B50\u7EA7\u5217\u8868\u7684 CEL \u8868\u8FBE\u5F0F\uFF1B\u8FD4\u56DE `none`/`null` \u6216\u7A7A\u6570\u7EC4\u65F6\u8BE5\u8282\u70B9\u89C6\u4E3A\u53F6\u5B50\uFF08\u7EC8\u7AEF\u8282\u70B9\uFF09"
+    }),
+    nodeLabel: CelNodeLabel.annotations({
+      title: "\u8282\u70B9\u6807\u7B7E",
+      description: '\u8FD4\u56DE\u8282\u70B9\u5C55\u793A\u6587\u672C\u7684 CEL \u8868\u8FBE\u5F0F\uFF0C\u53EF\u8BBF\u95EE `node`\u3001`row`\u3001`index`\uFF1B\u4F8B\uFF1A`node.label` \u6216 `string(node.code) + " " + node.name`'
+    }),
+    nodeTooltip: Schema.optional(NodeLocaleMd.annotations({
+      title: "\u8282\u70B9\u63D0\u793A",
+      description: "\u9F20\u6807\u60AC\u505C\u5728\u8282\u70B9\u4E0A\u65F6\u5C55\u793A\u7684\u672C\u5730\u5316\u63D0\u793A"
+    })),
+    keywords: Schema.optional(CelKeywords.annotations({
+      title: "\u989D\u5916\u5173\u952E\u8BCD",
+      description: "\u8FD4\u56DE\u5B57\u7B26\u4E32\u5217\u8868\u7684 CEL \u8868\u8FBE\u5F0F\uFF0C\u53EF\u8BBF\u95EE `node`\u3001`row`\u3001`index`\uFF1B\u641C\u7D22\u65F6\u53EA\u8981 `\u8282\u70B9\u6807\u7B7E` \u6216 \u4EFB\u4E00\u5173\u952E\u8BCD \u5305\u542B\u67E5\u8BE2\u8BCD\uFF08\u4E0D\u533A\u5206\u5927\u5C0F\u5199\uFF09\u5373\u547D\u4E2D"
+    })),
+    nodeSelectable: Schema.optional(CelNodeBool.annotations({
+      title: "\u8282\u70B9\u53EF\u9009\u6761\u4EF6",
+      description: "\u8FD4\u56DE `true` \u8868\u793A\u8BE5\u8282\u70B9\u53EF\u88AB\u9009\u4E2D\uFF1B\u9ED8\u8BA4\u5168\u90E8\u53EF\u9009"
+    })),
+    expandAll: Schema.optionalWith(Schema.Boolean, { default: () => false }).annotations({
+      title: "\u9ED8\u8BA4\u5168\u90E8\u5C55\u5F00",
+      description: "\u5F00\u542F\u540E\u6302\u8F7D\u65F6\u5C55\u5F00\u6240\u6709\u975E\u53F6\u5B50\u8282\u70B9"
+    })
+  }).annotations({ title: "TreeComboboxSingleRenderer", description: "\u4E0B\u62C9\u6811\u5355\u9009\u6E32\u67D3\u5668\uFF08\u53EF\u7F16\u8F91\uFF09" });
+}
+export function defaults() {
+  return {
+    title: [{ locale: "zh", message: "" }],
+    binding: "",
+    size: 200,
+    dataSource: { data: "[]" },
+    nodeKey: "string(node.id)",
+    nodeChildren: "has(node.children) ? node.children : null",
+    nodeLabel: "node.label",
+    expandAll: false
+  };
+}
+export const migrateFrom = [
+  { type: "com.shwfed.table.column.tree-combobox-single", compatibilityDate: "2026-05-28" }
+];
+export const migrate = (prev) => Effect.try({
+  try: () => {
+    if (!prev || typeof prev !== "object") {
+      throw new Error("\u4E0B\u62C9\u6811\uFF08\u5355\u9009\uFF09\u8FC1\u79FB\u5931\u8D25\uFF1A\u539F\u503C\u4E0D\u662F\u5BF9\u8C61");
+    }
+    const src = prev;
+    const srcType = src.type;
+    const srcDate = src.compatibilityDate;
+    if (srcType === "com.shwfed.table.column.tree-combobox-single" && srcDate === "2026-05-28") {
+      const { nodeLabel, type: _t, compatibilityDate: _c, ...rest } = src;
+      return {
+        ...rest,
+        type,
+        compatibilityDate,
+        nodeLabel: localeLabelToExpression(nodeLabel)
+      };
+    }
+    throw new Error(`\u4E0B\u62C9\u6811\uFF08\u5355\u9009\uFF09\u8FC1\u79FB\u5931\u8D25\uFF1A\u672A\u8BC6\u522B\u7684\u6765\u6E90 ${String(srcType)}@${String(srcDate)}`);
+  },
+  catch: (e) => e instanceof Error ? e : new Error(String(e))
+});
+export function toColumnDef(value, { getLocaleText }) {
+  return {
+    header: editableHeader(getLocaleText(value.title)),
+    accessorFn: (row) => {
+      if (!row || typeof row !== "object") return void 0;
+      return getProperty(row, value.binding);
+    },
+    enableSorting: value.enableSorting ?? false,
+    sortingFn: "basic",
+    size: value.size,
+    meta: {
+      grow: value.grow ?? false,
+      tooltip: getLocaleText(value.tooltip)
+    }
+  };
+}

package/dist/runtime/components/table/columns/2026-06-14/combobox-migrate.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Rewrite a `{{ }}`-interpolated template into a single CEL expression.
+ *
+ *  - `''` / no content                  → `''`           (valid empty-string literal)
+ *  - whole template is one `{{ expr }}` → `expr`         (kept bare; runtime coerces to string)
+ *  - mixed literal + interpolation      → `"lit" + string(expr) + …`
+ *
+ * Interpolated segments are wrapped in `string(...)` in the mixed case because
+ * CEL `+` requires matching operand types and the literal segments are strings;
+ * the old runtime stringified every interpolation, so this preserves behavior.
+ */
+export declare function templateToExpression(template: string): string;
+/**
+ * Collapse a legacy label (a Locale list of `{{ }}` templates) into the single
+ * CEL expression the 2026-06-14 schema expects. Picks the zh entry (or the
+ * first), then rewrites its template. Anything unrecognized → `''`.
+ */
+export declare function localeLabelToExpression(label: unknown): string;

package/dist/runtime/components/table/columns/2026-06-14/combobox-migrate.js

@@ -0,0 +1,36 @@
+const INTERPOLATION_RE = /\{\{(.*?)\}\}/gs;
+function celString(text) {
+  const body = text.replace(/\\/g, "\\\\").replace(/"/g, '\\"').replace(/\n/g, "\\n").replace(/\r/g, "\\r").replace(/\t/g, "\\t");
+  return `"${body}"`;
+}
+export function templateToExpression(template) {
+  const trimmed = template.trim();
+  if (trimmed.length === 0) return `''`;
+  const sole = /^\{\{([\s\S]*)\}\}$/.exec(trimmed);
+  if (sole && !sole[1].includes("{{")) {
+    const expr = sole[1].trim();
+    return expr.length > 0 ? expr : `''`;
+  }
+  const parts = [];
+  let last = 0;
+  let match;
+  INTERPOLATION_RE.lastIndex = 0;
+  while ((match = INTERPOLATION_RE.exec(template)) !== null) {
+    if (match.index > last) parts.push(celString(template.slice(last, match.index)));
+    const expr = match[1].trim();
+    if (expr.length > 0) parts.push(`string(${expr})`);
+    last = match.index + match[0].length;
+  }
+  if (last < template.length) parts.push(celString(template.slice(last)));
+  if (parts.length === 0) return `''`;
+  return parts.join(" + ");
+}
+export function localeLabelToExpression(label) {
+  if (!Array.isArray(label)) return `''`;
+  const zh = label.find(
+    (item) => !!item && typeof item === "object" && item.locale === "zh"
+  );
+  const chosen = zh ?? label[0];
+  const message = chosen && typeof chosen.message === "string" ? chosen.message : "";
+  return templateToExpression(message);
+}

package/dist/runtime/components/table/columns/2026-06-14/tree-combobox-shared.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Wrapping + adapter helpers shared by `tree-combobox-single` and
+ * `tree-combobox-multi`. The whole tree comes from `dataSource` in one
+ * shot, so wrapping is a pure walk over CEL-derived children: each raw
+ * node either has children (`branch`) or it doesn't (`terminal`).
+ */
+export type WrappedNode = {
+    readonly kind: 'branch';
+    readonly raw: unknown;
+    readonly key: string;
+    readonly children: WrappedNode[];
+} | {
+    readonly kind: 'terminal';
+    readonly raw: unknown;
+    readonly key: string;
+};
+export interface WrapStructureContext {
+    /** Stringified node id; one per raw node. Reuses `nodeKey` CEL. */
+    nodeKey: (raw: unknown) => string;
+    /**
+     * Normalised children array. `undefined`/`null`/empty all collapse to
+     * `undefined` here — the wrapping logic interprets that as
+     * "this node has no children" → `terminal`.
+     */
+    nodeChildren: (raw: unknown) => unknown[] | undefined;
+}
+export declare function wrapStructural(raw: unknown, ctx: WrapStructureContext): WrappedNode;
+export declare function wrapStructuralAll(raws: unknown[], ctx: WrapStructureContext): WrappedNode[];
+/** Synchronous `getChildren` adapter for ui/tree. */
+export declare function getWrappedChildren(w: WrappedNode): WrappedNode[] | undefined;
+/**
+ * Find the path from root to a node whose `key` matches. Returns `null`
+ * if the key isn't present in `roots`.
+ */
+export declare function findWrappedPath(roots: WrappedNode[], key: string): WrappedNode[] | null;

package/dist/runtime/components/table/columns/2026-06-14/tree-combobox-shared.js

@@ -0,0 +1,31 @@
+export function wrapStructural(raw, ctx) {
+  const kids = ctx.nodeChildren(raw);
+  if (!kids || kids.length === 0) {
+    return { kind: "terminal", raw, key: ctx.nodeKey(raw) };
+  }
+  return {
+    kind: "branch",
+    raw,
+    key: ctx.nodeKey(raw),
+    children: kids.map((c) => wrapStructural(c, ctx))
+  };
+}
+export function wrapStructuralAll(raws, ctx) {
+  return raws.map((r) => wrapStructural(r, ctx));
+}
+export function getWrappedChildren(w) {
+  return w.kind === "branch" ? w.children : void 0;
+}
+export function findWrappedPath(roots, key) {
+  const trail = [];
+  function walk(siblings) {
+    for (const n of siblings) {
+      trail.push(n);
+      if (n.key === key) return true;
+      if (n.kind === "branch" && n.children.length > 0 && walk(n.children)) return true;
+      trail.pop();
+    }
+    return false;
+  }
+  return walk(roots) ? trail.slice() : null;
+}

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

@@ -1,12 +1,13 @@
 <script setup>
 import { computed, defineComponent, inject, onBeforeUnmount, provide, ref, watch } from "vue";
-import { provideCELContext, provideScopeAncestor, provideSelectionRoster, SELECTIONS_VAR } from "../../utils/cel-context";
+import { celBindings, injectCELContext, provideCELContext, provideScopeAncestor, provideSelectionRoster, SELECTIONS_VAR } from "../../utils/cel-context";
 import { BREADCRUMB_EXTENSION_KEY } from "../config/breadcrumb-extension";
 import { TABLE_COLUMN_LAYOUT_KEY } from "./column-layout";
 import { Icon } from "@iconify/vue";
-import { ParseResult, Schema } from "effect";
+import { Effect, ParseResult, Schema } from "effect";
 import { TableConfig, Pagination, ColumnGroup, tableDataSource, configureTableActionsScope, registerDataSourceRequestVars, registerDataSourceResponseVars, metadata as tableMetadata } from "./schema";
 import { COLUMNS, findColumn as findColumnEntry } from "./utils/resolve";
+import { registerRowVariablesIfAbsent } from "./utils/shared";
 import {
   useTreeDnd
 } from "../../composables/useTreeDnd";
@@ -35,6 +36,9 @@ import ActionsConfigEditor from "../actions/config.vue";
 import ShwfedFormConfig from "../form/config.vue";
 import { defaultFormConfig } from "../form/schema";
 import { Environment } from "../../vendor/cel-js/lib/index";
+import { cel as rawCel } from "../../utils/cel";
+import { Button } from "../ui/button";
+import { toast } from "vue-sonner";
 defineOptions({ name: "ShwfedTableConfig" });
 function probeCELContext(register) {
   const probe = new Environment({ unlistedVariablesAreDyn: false });
@@ -110,6 +114,16 @@ const CellStyleCELContext = defineComponent({
     return () => slots.default?.();
   }
 });
+const ColumnCELContext = defineComponent({
+  name: "ColumnCELContext",
+  setup(_, { slots }) {
+    provideCELContext(probeCELContext((env) => {
+      configure(env);
+      registerRowVariablesIfAbsent(env);
+    }));
+    return () => slots.default?.();
+  }
+});
 const RequestCELContext = defineComponent({
   name: "RequestCELContext",
   setup(_, { slots }) {
@@ -574,6 +588,33 @@ function patchSelectedColumn(next) {
   if (selected.value.kind !== "column") return;
   patchColumn(selected.value.id, next);
 }
+const inheritedCEL = injectCELContext();
+function celForMigration(expression, context) {
+  return rawCel(expression, { ...celBindings(inheritedCEL), ...context });
+}
+const migrationContext = { $cel: celForMigration };
+const columnMigrationTarget = computed(() => {
+  const e = selectedColumnEntry.value;
+  if (!e?.deprecated || !e.supersededBy) return null;
+  return findColumnEntry(e.supersededBy.type, e.supersededBy.compatibilityDate) ?? null;
+});
+const canMigrateColumn = computed(() => !!columnMigrationTarget.value?.migrate);
+async function migrateSelectedColumn() {
+  const sel = selectedColumnRef.value;
+  const target = columnMigrationTarget.value;
+  if (!sel || !target?.migrate) return;
+  try {
+    const next = await Effect.runPromise(target.migrate(sel, migrationContext));
+    patchSelectedColumn(next);
+    const isSameType = target.type === sel.type;
+    toast.success(
+      isSameType ? `\u5DF2\u8FC1\u79FB\u5230 ${target.compatibilityDate} \u7248\u672C` : `\u5DF2\u8FC1\u79FB\u5230 ${target.type}@${target.compatibilityDate}`
+    );
+  } catch (err) {
+    const message = err instanceof Error ? err.message : String(err);
+    toast.error("\u8FC1\u79FB\u5931\u8D25", { description: message });
+  }
+}
 function patchSelectedGroup(next) {
   if (selected.value.kind !== "group") return;
   const id = selected.value.id;
@@ -1654,12 +1695,37 @@ const tableQueryValue = computed({
             v-else-if="selectedColumnRef"
             :class="columnFullPane ? '' : 'space-y-5'"
           >
-            <component
-              :is="selectedColumnEntry.config"
-              v-if="selectedColumnEntry"
-              :model-value="selectedColumnRef"
-              @update:model-value="(v) => patchSelectedColumn(v)"
-            />
+            <div
+              v-if="selectedColumnEntry?.deprecated && selectedColumnEntry.supersededBy"
+              class="mb-4 flex items-center gap-2 rounded border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-800"
+              role="alert"
+            >
+              <Icon
+                icon="fluent:warning-20-regular"
+                class="size-4 shrink-0"
+              />
+              <span class="flex-1">
+                此列类型已弃用，建议迁移至 <span class="tabular-nums font-medium">{{ selectedColumnEntry.supersededBy.type === selectedColumnEntry.type ? selectedColumnEntry.supersededBy.compatibilityDate : `${selectedColumnEntry.supersededBy.type}@${selectedColumnEntry.supersededBy.compatibilityDate}` }}</span>。
+              </span>
+              <Button
+                v-if="canMigrateColumn"
+                variant="ghost"
+                size="sm"
+                class="text-amber-800 hover:bg-amber-100 hover:text-amber-900"
+                data-slot="column-migrate"
+                @click="migrateSelectedColumn"
+              >
+                <Icon icon="fluent:arrow-sync-20-regular" />
+                迁移
+              </Button>
+            </div>
+            <ColumnCELContext v-if="selectedColumnEntry">
+              <component
+                :is="selectedColumnEntry.config"
+                :model-value="selectedColumnRef"
+                @update:model-value="(v) => patchSelectedColumn(v)"
+              />
+            </ColumnCELContext>
             <div
               v-else
               class="text-xs text-red-500"

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

@@ -6,6 +6,8 @@ declare module '@tanstack/vue-table' {
     interface ColumnMeta<TData extends import('@tanstack/vue-table').RowData, TValue> {
         tooltip?: string;
         grow?: boolean;
+        editable?: boolean;
+        readonlyExpr?: string;
     }
 }
 declare const _default: typeof __VLS_export;

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

@@ -32,6 +32,8 @@ import { provideSharedFetchLayer } from "./utils/shared-fetch";
 import { provideEventTarget } from "../../share/event-bus";
 import { usePersistedQuery } from "../../share/use-persisted-query";
 import { findColumn } from "./utils/resolve";
+import { isEditableHeader } from "./utils/shared";
+import { useFormReadonly } from "../form/utils/readonly";
 import { interpolateMarkdown } from "./utils/runtime";
 import { carrySymbolId, createRowKeyResolver } from "./utils/row-key";
 import { provideReorderContext } from "./utils/reorder";
@@ -98,6 +100,15 @@ const { t, locale } = useI18n({
 const inheritedContext = injectCELContext();
 const containerRef = ref(null);
 const appliedInitialStateKey = ref("");
+const formReadonly = useFormReadonly();
+function isHeaderReadonly(readonlyExpr) {
+  if (readonlyExpr == null) return formReadonly.value;
+  try {
+    return Effect.runSync($cel(readonlyExpr, celBindings(inheritedContext))) === true;
+  } catch {
+    return false;
+  }
+}
 function getLocaleText(value) {
   return getLocalizedText(value, locale.value);
 }
@@ -116,8 +127,11 @@ function translateColumn(column) {
     throw new Error(`[shwfed-table] no column registered for ${column.type}@${column.compatibilityDate}`);
   }
   const contribution = entry.toColumnDef(column, { getLocaleText, $cel, inheritedContext: celBindings(inheritedContext) });
+  const editable = isEditableHeader(contribution.header);
+  const readonlyExpr = editable ? column.readonly : void 0;
   return {
     ...contribution,
+    meta: { ...contribution.meta, editable, readonlyExpr },
     id: column.id,
     // `ctx` is the functional-component props object Vue mutates in place on
     // every update, so its identity stays stable across data refetches.
@@ -744,6 +758,16 @@ export { TableConfig, createTableConfig, getColumnTechnicalKey } from "./schema"
                       :props="header.getContext()"
                     />
 
+                    <!-- Edit affordance: marks an editable column, hidden when
+                         the column reads as readonly (form-wide or its own
+                         `readonly` condition). -->
+                    <Icon
+                      v-if="!header.isPlaceholder && header.column.columnDef.meta?.editable && !isHeaderReadonly(header.column.columnDef.meta?.readonlyExpr)"
+                      icon="fluent:edit-20-regular"
+                      class="size-3 shrink-0 text-zinc-400"
+                      aria-hidden="true"
+                    />
+
                     <!-- Sort toggle -->
                     <Tooltip
                       v-if="!header.isPlaceholder && header.column.getCanSort()"

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

@@ -6,6 +6,8 @@ declare module '@tanstack/vue-table' {
     interface ColumnMeta<TData extends import('@tanstack/vue-table').RowData, TValue> {
         tooltip?: string;
         grow?: boolean;
+        editable?: boolean;
+        readonlyExpr?: string;
     }
 }
 declare const _default: typeof __VLS_export;

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

@@ -143,6 +143,7 @@ export declare function TableConfig(configure: (env: Environment) => void): Sche
         readonly displayName?: string | undefined;
         readonly kind: "shwfed.component.form";
         readonly fields: readonly any[];
+        readonly readonly?: string | undefined;
         readonly layouts: readonly {
             readonly name: string;
             readonly layout: {
@@ -160,7 +161,6 @@ export declare function TableConfig(configure: (env: Environment) => void): Sche
             };
             readonly media?: string | undefined;
         }[];
-        readonly readonly?: string | undefined;
     } | undefined;
     readonly dataSource?: {
         readonly data: string;
@@ -646,6 +646,7 @@ export declare function TableConfig(configure: (env: Environment) => void): Sche
         readonly displayName?: string | undefined;
         readonly kind: "shwfed.component.form";
         readonly fields: readonly any[];
+        readonly readonly?: string | undefined;
         readonly layouts: readonly {
             readonly name: string;
             readonly layout: {
@@ -663,7 +664,6 @@ export declare function TableConfig(configure: (env: Environment) => void): Sche
             };
             readonly media?: string | undefined;
         }[];
-        readonly readonly?: string | undefined;
     }, Schema.Struct<{
         fields: Schema.Array$<Schema.Schema<any, any, never>>;
         layouts: Schema.refine<readonly {
@@ -788,6 +788,7 @@ export declare function createTableConfig(body: Omit<Schema.Schema.Type<ReturnTy
         readonly displayName?: string | undefined;
         readonly kind: "shwfed.component.form";
         readonly fields: readonly any[];
+        readonly readonly?: string | undefined;
         readonly layouts: readonly {
             readonly name: string;
             readonly layout: {
@@ -805,7 +806,6 @@ export declare function createTableConfig(body: Omit<Schema.Schema.Type<ReturnTy
             };
             readonly media?: string | undefined;
         }[];
-        readonly readonly?: string | undefined;
     } | undefined;
     dataSource?: {
         readonly data: string;

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

@@ -54,6 +54,7 @@ export declare function editableColumnFields(): {
     groupId: Schema.optional<typeof Schema.UUID>;
 };
 export declare function editableHeader(titleText: string | undefined): () => VNode;
+export declare function isEditableHeader(header: unknown): boolean;
 export declare function registerRowVariablesIfAbsent(env: Environment): void;
 export declare function CelRowAccess(configure: (env: Environment) => void, options?: {
     resultType?: ResultType;

package/dist/runtime/components/table/utils/shared.js

@@ -1,5 +1,4 @@
 import { Schema } from "effect";
-import { Icon } from "@iconify/vue";
 import { h } from "vue";
 import { SELECTIONS_VAR } from "../../../utils/cel-context.js";
 import { Expression, LocaleMarkdown } from "../../../share/expression.js";
@@ -76,19 +75,14 @@ export function editableColumnFields() {
     tooltip: Schema.optional(Locale.annotations({ title: "\u63D0\u793A", description: "\u5217\u6807\u9898\u60AC\u6D6E\u63D0\u793A\uFF0C\u652F\u6301 Markdown" }))
   };
 }
+const EDITABLE_HEADER_MARKER = Symbol("shwfed-editable-header");
 export function editableHeader(titleText) {
-  return () => h(
-    "span",
-    { class: "inline-flex items-center gap-1" },
-    [
-      titleText ?? "",
-      h(Icon, {
-        "icon": "fluent:edit-20-regular",
-        "class": "size-3 text-zinc-400",
-        "aria-hidden": "true"
-      })
-    ]
-  );
+  const render = () => h("span", { class: "inline-flex items-center" }, titleText ?? "");
+  render[EDITABLE_HEADER_MARKER] = true;
+  return render;
+}
+export function isEditableHeader(header) {
+  return typeof header === "function" && header[EDITABLE_HEADER_MARKER] === true;
 }
 export function registerRowVariablesIfAbsent(env) {
   const declared = new Set(env.getDefinitions().variables.map((v) => v.name));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shwfed/config",
-  "version": "2.10.0",
+  "version": "2.10.2",
   "description": "Configurable UI for SHWFED",
   "type": "module",
   "publishConfig": {