@shwfed/config 2.10.11 → 2.11.0

package/dist/runtime/components/table/columns/2026-06-22/com.shwfed.table.column.date-range-input/config.vue.d.ts

@@ -0,0 +1,10 @@
+type __VLS_ModelProps = {
+    modelValue: Record<string, any>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: Record<string, any>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: Record<string, any>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/table/columns/2026-06-22/com.shwfed.table.column.date-range-input/runtime.d.vue.ts

@@ -0,0 +1,9 @@
+import type { CellContext } from '@tanstack/vue-table';
+import type { Value } from './schema.js';
+type __VLS_Props = {
+    column: Value;
+    ctx: CellContext<unknown, unknown>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/table/columns/2026-06-22/com.shwfed.table.column.date-range-input/runtime.vue

@@ -0,0 +1,149 @@
+<script setup>
+import { Effect } from "effect";
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { format as formatDate } from "date-fns";
+import { cel as $cel } from "../../../../../utils/cel";
+import { celBindings, injectCELContext } from "../../../../../utils/cel-context";
+import { useFormReadonly } from "../../../../form/utils/readonly";
+import { getLocalizedText } from "../../../../../share/locale";
+import { DATE_RANGE_PICKER_DEFAULT_FORMATS, DateRangePicker } from "../../../../ui/date-range-picker";
+import { useFormState } from "../../../../form/utils/state";
+import { JUSTIFY_CLASS } from "../../../utils/runtime";
+defineOptions({ name: "ShwfedTableDateRangeInputRendererRuntime" });
+const props = defineProps({
+  column: { type: null, required: true },
+  ctx: { type: Object, required: true }
+});
+const { locale } = useI18n();
+const celContext = injectCELContext();
+const { getAt, setAt } = useFormState();
+const startPlaceholderText = computed(
+  () => props.column.startPlaceholder ? getLocalizedText(props.column.startPlaceholder, locale.value) : void 0
+);
+const endPlaceholderText = computed(
+  () => props.column.endPlaceholder ? getLocalizedText(props.column.endPlaceholder, locale.value) : void 0
+);
+function evalBool(expression, label) {
+  if (!expression) return false;
+  try {
+    return Effect.runSync($cel(expression, celBindings(celContext))) === true;
+  } catch (e) {
+    console.error(`[shwfed-table] date-range-input ${label} failed`, e);
+    return false;
+  }
+}
+const isDisabled = computed(() => evalBool(props.column.disabled, "disabled"));
+const formReadonly = useFormReadonly();
+const isReadonly = computed(
+  () => props.column.readonly != null ? evalBool(props.column.readonly, "readonly") : formReadonly.value
+);
+const effectiveReadonly = computed(
+  () => isReadonly.value || props.column.derived?.mode === "formula"
+);
+const resolvedValueFormat = computed(
+  () => props.column.valueFormat ?? DATE_RANGE_PICKER_DEFAULT_FORMATS.daterange.value
+);
+const justifyClass = computed(() => JUSTIFY_CLASS[props.column.align ?? "left"] ?? JUSTIFY_CLASS.left);
+const shortcuts = computed(() => {
+  const list = props.column.presets;
+  if (!list || list.length === 0) return void 0;
+  return list.map((preset) => ({
+    name: preset.label,
+    value: () => {
+      try {
+        const start = Effect.runSync($cel(preset.start, celBindings(celContext)));
+        const end = Effect.runSync($cel(preset.end, celBindings(celContext)));
+        return [
+          formatDate(start, resolvedValueFormat.value),
+          formatDate(end, resolvedValueFormat.value)
+        ];
+      } catch (e) {
+        console.error(`[shwfed-table] date-range-input preset "${preset.start}" .. "${preset.end}" failed`, e);
+        return ["", ""];
+      }
+    }
+  }));
+});
+function asRange(raw) {
+  if (!Array.isArray(raw) || raw.length !== 2) return void 0;
+  const [a, b] = raw;
+  if (typeof a !== "string" || typeof b !== "string") return void 0;
+  if (a.length === 0 || b.length === 0) return void 0;
+  return [a, b];
+}
+function asString(raw) {
+  return typeof raw === "string" && raw.length > 0 ? raw : void 0;
+}
+const model = computed({
+  get: () => {
+    const binding = props.column.binding;
+    if (typeof binding === "string") return asRange(getAt(binding));
+    const a = asString(getAt(binding[0]));
+    const b = asString(getAt(binding[1]));
+    if (a == null || b == null) return void 0;
+    return [a, b];
+  },
+  set: (next) => {
+    const binding = props.column.binding;
+    if (typeof binding === "string") {
+      setAt(binding, next ?? null);
+      return;
+    }
+    setAt(binding[0], next?.[0] ?? null);
+    setAt(binding[1], next?.[1] ?? null);
+  }
+});
+const readonlyText = computed(() => {
+  const v = model.value;
+  if (!v) return null;
+  return `${v[0]} ~ ${v[1]}`;
+});
+</script>
+
+<template>
+  <!--
+    Row budget matches the editable input columns: 2px outer inset around a 28px
+    (`h-7`) control — total 32px. Every branch (readonly / editable) is
+    sized identically so rows do not jump when a CEL condition flips.
+  -->
+  <div class="p-[0.125rem] w-full">
+    <!--
+      Readonly empty state mirrors the other editable columns: a centered, faded,
+      non-selectable `-` so a readonly grid reads uniformly. A non-empty readonly
+      range keeps left-aligned dark text joined by `~`.
+    -->
+    <span
+      v-if="effectiveReadonly"
+      :class="[
+  'flex items-center h-7 w-full px-2 text-[0.75rem] truncate',
+  readonlyText ? ['text-zinc-700', justifyClass] : 'justify-center font-mono text-zinc-300 select-none'
+]"
+    >
+      {{ readonlyText || "-" }}
+    </span>
+    <!--
+      Idle border is faded to 30% so a whole grid of date cells reads as data,
+      not chrome — `hover:` / `focus-within:` snap it back to full so the active
+      cell stands out. Mirrors the `date-input` column exactly; routed to the
+      inner range input via `input-class` because `class` lands on the
+      DateRangePicker's anchor wrapper, not the input.
+    -->
+    <DateRangePicker
+      v-else
+      v-model="model"
+      type="daterange"
+      size="sm"
+      class="w-full"
+      input-class="border-zinc-200/30 hover:border-zinc-200 focus-within:border-zinc-200 transition-colors ease-out duration-180"
+      :format="column.format"
+      :value-format="column.valueFormat"
+      :start-placeholder="startPlaceholderText"
+      :end-placeholder="endPlaceholderText"
+      :range-separator-icon="column.rangeSeparatorIcon"
+      :number-of-months="column.numberOfMonths"
+      :disabled="isDisabled"
+      :shortcuts="shortcuts"
+    />
+  </div>
+</template>

package/dist/runtime/components/table/columns/2026-06-22/com.shwfed.table.column.date-range-input/runtime.vue.d.ts

@@ -0,0 +1,9 @@
+import type { CellContext } from '@tanstack/vue-table';
+import type { Value } from './schema.js';
+type __VLS_Props = {
+    column: Value;
+    ctx: CellContext<unknown, unknown>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/table/columns/2026-06-22/com.shwfed.table.column.date-range-input/schema.d.ts

@@ -0,0 +1,90 @@
+import { Schema } from 'effect';
+import type { ColumnDef } from '@tanstack/vue-table';
+import type { Environment } from '../../../../../vendor/cel-js/lib/index.js';
+import type { ColumnDefDeps } from '../../../utils/resolve.js';
+export declare const type: "com.shwfed.table.column.date-range-input";
+export declare const compatibilityDate: "2026-06-22";
+export declare const metadata: {
+    readonly name: "日期范围输入";
+    readonly icon: "fluent:calendar-arrow-right-20-regular";
+};
+export declare function presetSchema(configure: (env: Environment) => void): Schema.Struct<{
+    id: Schema.refine<string, typeof Schema.String>;
+    label: Schema.TupleType<readonly [Schema.Struct<{
+        locale: Schema.Literal<["zh"]>;
+        message: Schema.SchemaClass<string, string, never>;
+    }>], [Schema.Struct<{
+        locale: Schema.Literal<["ja", "en", "ko"]>;
+        message: Schema.SchemaClass<string, string, never>;
+    }>]>;
+    start: Schema.Schema<string, string, never>;
+    end: Schema.Schema<string, string, never>;
+}>;
+export declare function schema(configure: (env: Environment) => void): Schema.Struct<{
+    align: Schema.optionalWith<Schema.Literal<["left", "center", "right"]>, {
+        default: () => "left";
+    }>;
+    binding: Schema.Union<[Schema.filter<typeof Schema.String>, Schema.filter<Schema.Tuple2<Schema.filter<typeof Schema.String>, Schema.filter<typeof Schema.String>>>]>;
+    startPlaceholder: Schema.optional<Schema.TupleType<readonly [Schema.Struct<{
+        locale: Schema.Literal<["zh"]>;
+        message: Schema.SchemaClass<string, string, never>;
+    }>], [Schema.Struct<{
+        locale: Schema.Literal<["ja", "en", "ko"]>;
+        message: Schema.SchemaClass<string, string, never>;
+    }>]>>;
+    endPlaceholder: Schema.optional<Schema.TupleType<readonly [Schema.Struct<{
+        locale: Schema.Literal<["zh"]>;
+        message: Schema.SchemaClass<string, string, never>;
+    }>], [Schema.Struct<{
+        locale: Schema.Literal<["ja", "en", "ko"]>;
+        message: Schema.SchemaClass<string, string, never>;
+    }>]>>;
+    disabled: Schema.optional<Schema.Schema<string, string, never>>;
+    readonly: Schema.optional<Schema.Schema<string, string, never>>;
+    derived: Schema.optional<Schema.Struct<{
+        mode: Schema.Literal<["formula", "prefill"]>;
+        expression: Schema.Schema<string, string, never>;
+    }>>;
+    format: Schema.optional<Schema.refine<string, typeof Schema.String>>;
+    valueFormat: Schema.optional<Schema.refine<string, typeof Schema.String>>;
+    rangeSeparatorIcon: Schema.optional<Schema.refine<string, typeof Schema.String>>;
+    numberOfMonths: Schema.optional<Schema.refine<number, Schema.filter<typeof Schema.Number>>>;
+    presets: Schema.optional<Schema.Array$<Schema.Struct<{
+        id: Schema.refine<string, typeof Schema.String>;
+        label: Schema.TupleType<readonly [Schema.Struct<{
+            locale: Schema.Literal<["zh"]>;
+            message: Schema.SchemaClass<string, string, never>;
+        }>], [Schema.Struct<{
+            locale: Schema.Literal<["ja", "en", "ko"]>;
+            message: Schema.SchemaClass<string, string, never>;
+        }>]>;
+        start: Schema.Schema<string, string, never>;
+        end: Schema.Schema<string, string, never>;
+    }>>>;
+    title: Schema.TupleType<readonly [Schema.Struct<{
+        locale: Schema.Literal<["zh"]>;
+        message: Schema.SchemaClass<string, string, never>;
+    }>], [Schema.Struct<{
+        locale: Schema.Literal<["ja", "en", "ko"]>;
+        message: Schema.SchemaClass<string, string, never>;
+    }>]>;
+    enableSorting: Schema.optional<Schema.SchemaClass<boolean, boolean, never>>;
+    sortKey: Schema.optional<Schema.refine<string, typeof Schema.String>>;
+    size: Schema.optional<Schema.refine<number, Schema.filter<typeof Schema.Number>>>;
+    grow: Schema.optional<Schema.SchemaClass<boolean, boolean, never>>;
+    tooltip: Schema.optional<Schema.TupleType<readonly [Schema.Struct<{
+        locale: Schema.Literal<["zh"]>;
+        message: Schema.SchemaClass<string, string, never>;
+    }>], [Schema.Struct<{
+        locale: Schema.Literal<["ja", "en", "ko"]>;
+        message: Schema.SchemaClass<string, string, never>;
+    }>]>>;
+    hidden: Schema.optional<Schema.SchemaClass<boolean, boolean, never>>;
+    id: Schema.refine<string, typeof Schema.String>;
+    groupId: Schema.optional<typeof Schema.UUID>;
+    type: Schema.Literal<["com.shwfed.table.column.date-range-input"]>;
+    compatibilityDate: Schema.Literal<["2026-06-22"]>;
+}>;
+export type Value = Schema.Schema.Type<ReturnType<typeof schema>>;
+export declare function defaults(): Partial<Value>;
+export declare function toColumnDef(value: Value, { getLocaleText }: ColumnDefDeps): Partial<ColumnDef<unknown, unknown>>;

package/dist/runtime/components/table/columns/2026-06-22/com.shwfed.table.column.date-range-input/schema.js

@@ -0,0 +1,119 @@
+import { Schema } from "effect";
+import { getProperty } from "dot-prop";
+import { Locale } from "../../../../../share/locale.js";
+import { Align, CelRowAccess, derivedRowField, editableColumnFields, editableHeader } from "../../../utils/shared.js";
+export const type = "com.shwfed.table.column.date-range-input";
+export const compatibilityDate = "2026-06-22";
+export const metadata = {
+  name: "\u65E5\u671F\u8303\u56F4\u8F93\u5165",
+  icon: "fluent:calendar-arrow-right-20-regular"
+};
+const BindingPath = Schema.String.pipe(Schema.minLength(1));
+const SplitBinding = Schema.Tuple(BindingPath, BindingPath).pipe(
+  Schema.filter(([a, b]) => a !== b, {
+    message: () => "\u8D77\u59CB\u4E0E\u7ED3\u675F\u7ED1\u5B9A\u8DEF\u5F84\u4E0D\u80FD\u76F8\u540C"
+  })
+);
+const bindingSchema = Schema.Union(BindingPath, SplitBinding).annotations({
+  title: "\u7ED1\u5B9A\u8DEF\u5F84",
+  description: "\u5355\u5143\u683C\u8BFB\u5199\u7684 `dot-prop` \u8DEF\u5F84\uFF1B\u586B\u5199\u5355\u4E2A\u8DEF\u5F84\u65F6\u8BFB\u5199 `[start, end]` \u5B57\u7B26\u4E32\u6570\u7EC4\uFF0C\u4F8B\u5982 `event.range`\uFF1B\u586B\u5199 `[\u8D77\u59CB\u8DEF\u5F84, \u7ED3\u675F\u8DEF\u5F84]` \u5143\u7EC4\u65F6\u5206\u522B\u8BFB\u5199\u4E24\u7AEF"
+});
+export function presetSchema(configure) {
+  const CelDate = CelRowAccess(configure, { resultType: "Date" });
+  return Schema.Struct({
+    id: Schema.UUID.annotations({ description: "\u9884\u8BBE\u552F\u4E00\u6807\u8BC6\uFF0C\u7528\u4E8E\u7A33\u5B9A\u7684 v-for key" }),
+    label: Locale.annotations({
+      title: "\u6807\u7B7E",
+      description: "\u5FEB\u6377\u9009\u9879\u5C55\u793A\u7684\u672C\u5730\u5316\u6587\u672C"
+    }),
+    start: CelDate.annotations({
+      title: "\u8D77\u59CB\u503C",
+      description: '\u70B9\u51FB\u8BE5\u9884\u8BBE\u65F6\u8BA1\u7B97\u51FA\u7684\u8D77\u59CB\u65E5\u671F\uFF0C\u4F8B\u5982 `now.offset(-7, "days")`'
+    }),
+    end: CelDate.annotations({
+      title: "\u7ED3\u675F\u503C",
+      description: "\u70B9\u51FB\u8BE5\u9884\u8BBE\u65F6\u8BA1\u7B97\u51FA\u7684\u7ED3\u675F\u65E5\u671F\uFF0C\u4F8B\u5982 `now`"
+    })
+  }).annotations({
+    title: "DateRangeInputPreset"
+  });
+}
+export function schema(configure) {
+  const CelBool = CelRowAccess(configure, { resultType: "bool" });
+  const Preset = presetSchema(configure);
+  return Schema.Struct({
+    type: Schema.Literal(type),
+    compatibilityDate: Schema.Literal(compatibilityDate),
+    ...editableColumnFields(),
+    align: Schema.optionalWith(Align.annotations({ title: "\u5BF9\u9F50" }), { default: () => "left" }),
+    // Swap the inherited single-string `binding` for the range union.
+    binding: bindingSchema,
+    startPlaceholder: Schema.optional(Locale.annotations({
+      title: "\u8D77\u59CB\u5360\u4F4D\u7B26",
+      description: "\u672A\u9009\u4E2D\u8D77\u59CB\u65E5\u671F\u65F6\u8F93\u5165\u6846\u4E2D\u7684\u5360\u4F4D\u6587\u672C"
+    })),
+    endPlaceholder: Schema.optional(Locale.annotations({
+      title: "\u7ED3\u675F\u5360\u4F4D\u7B26",
+      description: "\u672A\u9009\u4E2D\u7ED3\u675F\u65E5\u671F\u65F6\u8F93\u5165\u6846\u4E2D\u7684\u5360\u4F4D\u6587\u672C"
+    })),
+    disabled: Schema.optional(CelBool.annotations({
+      title: "\u7981\u7528\u6761\u4EF6",
+      description: "\u8FD4\u56DE `true` \u65F6\u8F93\u5165\u6846\u4ECD\u7136\u6E32\u67D3\u4F46\u4E0D\u53EF\u7F16\u8F91"
+    })),
+    readonly: Schema.optional(CelBool.annotations({
+      title: "\u53EA\u8BFB\u6761\u4EF6",
+      description: "\u8FD4\u56DE `true` \u65F6\u4EC5\u4EE5\u7EAF\u6587\u672C\u5C55\u793A\u5F53\u524D\u503C"
+    })),
+    derived: derivedRowField(configure, "dyn"),
+    format: Schema.optional(Schema.String.pipe(Schema.minLength(1)).annotations({
+      title: "\u5C55\u793A\u683C\u5F0F",
+      description: "\u8F93\u5165\u6846\u4E2D\u5C55\u793A\u65E5\u671F\u7684 `date-fns` \u683C\u5F0F\u4E32\uFF1B\u7559\u7A7A\u65F6\u4F7F\u7528\u9ED8\u8BA4 `yyyy-MM-dd`"
+    })),
+    valueFormat: Schema.optional(Schema.String.pipe(Schema.minLength(1)).annotations({
+      title: "\u5B58\u50A8\u683C\u5F0F",
+      description: "\u5199\u5165\u884C\u6570\u636E\u7684 `date-fns` \u683C\u5F0F\u4E32\uFF1B\u7559\u7A7A\u65F6\u4F7F\u7528\u9ED8\u8BA4 `yyyy-MM-dd`"
+    })),
+    rangeSeparatorIcon: Schema.optional(Schema.String.pipe(Schema.minLength(1)).annotations({
+      title: "\u8303\u56F4\u5206\u9694\u56FE\u6807",
+      description: "\u8303\u56F4\u4E24\u7AEF\u4E4B\u95F4\u5206\u9694\u56FE\u6807\u7684 Iconify \u540D\u79F0"
+    })),
+    numberOfMonths: Schema.optional(Schema.Number.pipe(Schema.int(), Schema.positive()).annotations({
+      title: "\u9762\u677F\u6708\u6570",
+      description: "\u65E5\u5386\u9762\u677F\u4E2D\u5E76\u6392\u663E\u793A\u7684\u6708\u4EFD\u6570\uFF1B\u9ED8\u8BA4 `2`"
+    })),
+    presets: Schema.optional(Schema.Array(Preset).annotations({
+      title: "\u5FEB\u6377\u9009\u9879",
+      description: "\u5728\u9009\u62E9\u5668\u5E95\u90E8\u5C55\u793A\u7684\u5FEB\u6377\u9884\u8BBE\uFF1B\u7559\u7A7A\u5219\u4E0D\u6E32\u67D3"
+    }))
+  }).annotations({ title: "DateRangeInputRenderer", description: "\u65E5\u671F\u8303\u56F4\u8F93\u5165\u6E32\u67D3\u5668\uFF08\u53EF\u7F16\u8F91\uFF09" });
+}
+export function defaults() {
+  return {
+    title: [{ locale: "zh", message: "" }],
+    binding: "",
+    size: 240
+  };
+}
+export function toColumnDef(value, { getLocaleText }) {
+  return {
+    header: editableHeader(getLocaleText(value.title)),
+    // `binding` is a literal `dot-prop` path (or pair); the cell reads through
+    // the same path(s) it writes. No CEL. A single path holds the `[start, end]`
+    // array directly; a split tuple is recomposed into a `[start, end]` pair so
+    // read-only display and sorting see one consistent shape.
+    accessorFn: (row) => {
+      if (!row || typeof row !== "object") return void 0;
+      const r = row;
+      const binding = value.binding;
+      if (typeof binding === "string") return getProperty(r, binding);
+      return [getProperty(r, binding[0]), getProperty(r, binding[1])];
+    },
+    enableSorting: value.enableSorting ?? false,
+    sortingFn: "alphanumeric",
+    size: value.size,
+    meta: {
+      grow: value.grow ?? false,
+      tooltip: getLocaleText(value.tooltip)
+    }
+  };
+}

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

@@ -100,6 +100,34 @@ const { t, locale } = useI18n({
 const inheritedContext = injectCELContext();
 const containerRef = ref(null);
 const appliedInitialStateKey = ref("");
+const frozenGrowColumns = ref(/* @__PURE__ */ new Set());
+function isEffectiveGrow(column) {
+  return !!column.columnDef.meta?.grow && !frozenGrowColumns.value.has(column.id);
+}
+function freezeGrowColumns() {
+  const grows = tableApi.getVisibleLeafColumns().filter(isEffectiveGrow);
+  if (grows.length === 0) return;
+  const measured = {};
+  for (const column of grows) {
+    const el = containerRef.value?.querySelector(`thead [data-col-id="${column.id}"]`);
+    if (el) measured[column.id] = el.offsetWidth;
+  }
+  tableApi.setColumnSizing((prev) => ({ ...prev, ...measured }));
+  const next = new Set(frozenGrowColumns.value);
+  grows.forEach((column) => next.add(column.id));
+  frozenGrowColumns.value = next;
+}
+function onResizeMouseDown(header, event) {
+  freezeGrowColumns();
+  header.getResizeHandler()(event);
+}
+function growLeafCount(header) {
+  return header.getLeafHeaders().filter((h2) => isEffectiveGrow(h2.column)).length;
+}
+function headerGrowStyle(header) {
+  const n = growLeafCount(header);
+  return n > 0 ? { flex: `${n} 1 auto` } : {};
+}
 const formReadonly = useFormReadonly();
 function isHeaderReadonly(readonlyExpr) {
   if (readonlyExpr == null) return formReadonly.value;
@@ -494,13 +522,19 @@ function getDisplayIndex(row) {
 watch(config, (config2) => {
   if (!config2) return;
   const initialState = config2.initialState;
-  const nextKey = initialState ? JSON.stringify(initialState) : "";
-  if (appliedInitialStateKey.value === nextKey || !initialState) {
+  const hiddenSeed = {};
+  for (const col of config2.columns) {
+    if (col.hidden) hiddenSeed[col.id] = false;
+  }
+  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) {
     appliedInitialStateKey.value = nextKey;
     syncPaginationPageSize();
     return;
   }
-  tableApi.initialState = mergeInitialState(tableApi.initialState, initialState);
+  tableApi.initialState = mergeInitialState(tableApi.initialState, effective);
   tableApi.reset();
   appliedInitialStateKey.value = nextKey;
   syncPaginationPageSize();
@@ -712,8 +746,8 @@ export { TableConfig, createTableConfig, getColumnTechnicalKey } from "./schema"
                     v-for="header in group.headers"
                     :key="header.id"
                     :colspan="header.colSpan"
+                    :data-col-id="header.column.id"
                     :class="[
-  header.column.columnDef.meta?.grow && 'flex-1',
   'flex items-center gap-2 border-zinc-300 py-2 text-zinc-600',
   'text-xs flex items-center justify-center relative',
   'bg-[color-mix(in_srgb,var(--primary)_7%,white)] group',
@@ -722,7 +756,12 @@ export { TableConfig, createTableConfig, getColumnTechnicalKey } from "./schema"
   shouldHaveLeftBorder(header.column) && 'border-l'
 ]"
                     :style="{
+  // Grow until first resize (see freezeGrowColumns): fill the
+  // remaining space, with `width` as the flex-basis so the
+  // configured size acts as a floor. Group headers grow by
+  // the count of grow leaves they span (see headerGrowStyle).
   width: `${header.getSize()}px`,
+  ...headerGrowStyle(header),
   ...pinnedStyle(header.column)
 }"
                   >
@@ -816,7 +855,7 @@ export { TableConfig, createTableConfig, getColumnTechnicalKey } from "./schema"
   'hover:opacity-100',
   'cursor-col-resize'
 ]"
-                      @mousedown="header.getResizeHandler()($event)"
+                      @mousedown="onResizeMouseDown(header, $event)"
                     >
                       <div class="w-2pt h-full translate-x-1pt transform-3d bg-[color-mix(in_srgb,var(--primary)_80%,white)]" />
                     </div>
@@ -875,7 +914,7 @@ export { TableConfig, createTableConfig, getColumnTechnicalKey } from "./schema"
                         :key="cell.id"
                         :class="[
   'border-zinc-300',
-  cell.column.columnDef.meta?.grow && 'flex-1',
+  isEffectiveGrow(cell.column) && 'flex-[1_1_auto]',
   cell.column.getIsPinned() && 'sticky z-15',
   shouldHaveRightBorder(cell.column) && 'border-r',
   shouldHaveLeftBorder(cell.column) && 'border-l'
@@ -908,7 +947,6 @@ export { TableConfig, createTableConfig, getColumnTechnicalKey } from "./schema"
                     :key="header.id"
                     :colspan="header.colSpan"
                     :class="[
-  header.column.columnDef.meta?.grow && 'flex-1',
   'flex items-center gap-2 border-zinc-300 text-zinc-600 p-0',
   'text-xs flex items-center justify-center relative',
   'bg-[color-mix(in_srgb,var(--primary)_7%,white)] group',
@@ -918,6 +956,7 @@ export { TableConfig, createTableConfig, getColumnTechnicalKey } from "./schema"
 ]"
                     :style="{
   width: `${header.getSize()}px`,
+  ...headerGrowStyle(header),
   ...pinnedStyle(header.column)
 }"
                   >

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

@@ -1,5 +1,6 @@
 import type { Effect as EffectType } from 'effect';
 export declare const JUSTIFY_CLASS: Record<string, string>;
+export declare const TEXT_ALIGN_CLASS: Record<string, string>;
 type CelEvaluator = <T>(expression: string, context?: Record<string, unknown>) => EffectType.Effect<T, any>;
 export declare function interpolateMarkdown(template: string, $cel: CelEvaluator, context: Record<string, unknown>): string;
 export declare function evaluateMarkdown(template: string, $cel: CelEvaluator, context: Record<string, unknown>): string;

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

@@ -5,6 +5,11 @@ export const JUSTIFY_CLASS = {
   center: "justify-center",
   right: "justify-end"
 };
+export const TEXT_ALIGN_CLASS = {
+  left: "text-left",
+  center: "text-center",
+  right: "text-right"
+};
 const INTERPOLATION_RE = /\{\{(.*?)\}\}/gs;
 function stringifyCelResult(value) {
   if (value === null || value === void 0) return "";

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

@@ -15,7 +15,7 @@ export declare function columnFields(configure: (env: Environment) => void): {
         locale: Schema.Literal<["ja", "en", "ko"]>;
         message: Schema.SchemaClass<string, string, never>;
     }>]>;
-    accessor: Schema.Schema<string, string, never>;
+    accessor: Schema.optional<Schema.Schema<string, string, never>>;
     enableSorting: Schema.optional<Schema.SchemaClass<boolean, boolean, never>>;
     sortKey: Schema.optional<Schema.refine<string, typeof Schema.String>>;
     size: Schema.optional<Schema.refine<number, Schema.filter<typeof Schema.Number>>>;
@@ -27,6 +27,7 @@ export declare function columnFields(configure: (env: Environment) => void): {
         locale: Schema.Literal<["ja", "en", "ko"]>;
         message: Schema.SchemaClass<string, string, never>;
     }>]>>;
+    hidden: Schema.optional<Schema.SchemaClass<boolean, boolean, never>>;
     id: Schema.refine<string, typeof Schema.String>;
     groupId: Schema.optional<typeof Schema.UUID>;
 };
@@ -50,6 +51,7 @@ export declare function editableColumnFields(): {
         locale: Schema.Literal<["ja", "en", "ko"]>;
         message: Schema.SchemaClass<string, string, never>;
     }>]>>;
+    hidden: Schema.optional<Schema.SchemaClass<boolean, boolean, never>>;
     id: Schema.refine<string, typeof Schema.String>;
     groupId: Schema.optional<typeof Schema.UUID>;
 };

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

@@ -20,10 +20,14 @@ export function columnFields(configure) {
   return {
     ...columnIdentityFields(),
     title: Locale.annotations({ title: "\u540D\u79F0", description: "\u5217\u6807\u9898" }),
-    accessor: CelRowAccess(configure).annotations({
+    // Optional: a purely visual column (icon, badge, computed-elsewhere cell)
+    // may have no backing data path, letting designers refine the display layer
+    // without an API contract first. Absent → the cell renders no data; present
+    // → still validated as a CEL expression (empty string stays invalid).
+    accessor: Schema.optional(CelRowAccess(configure).annotations({
       title: "\u8DEF\u5F84",
-      description: "\u884C\u6570\u636E\u8BBF\u95EE CEL \u8868\u8FBE\u5F0F\uFF0C\u4F8B\u5982 `row.user.name`"
-    }),
+      description: "\u884C\u6570\u636E\u8BBF\u95EE CEL \u8868\u8FBE\u5F0F\uFF0C\u4F8B\u5982 `row.user.name`\uFF1B\u53EF\u7559\u7A7A\uFF0C\u7559\u7A7A\u65F6\u8BE5\u5217\u4E0D\u8BFB\u53D6\u6570\u636E\uFF08\u7528\u4E8E\u7EAF\u89C6\u89C9\u5217\uFF09"
+    })),
     enableSorting: Schema.optional(Schema.Boolean.annotations({
       title: "\u5141\u8BB8\u6392\u5E8F",
       description: md`
@@ -48,7 +52,11 @@ export function columnFields(configure) {
       description: "\u6307\u5B9A\u4E00\u4E2A\u5408\u9002\u7684\u8868\u683C\u5217\u5BBD\u5EA6\uFF0C\u5F53\u5217\u5185\u5BB9\u957F\u5EA6\u5927\u4E8E\u8FD9\u91CC\u6307\u5B9A\u7684\u5BBD\u5EA6\u540E\uFF0C\u4F1A\u5BFC\u81F4\u8D85\u51FA\u7684\u90E8\u5206\u88AB\u622A\u65AD\u3002"
     })),
     grow: Schema.optional(Schema.Boolean.annotations({ title: "\u5360\u636E\u5269\u4F59\u5BBD\u5EA6", description: "\u5217\u662F\u5426\u5360\u636E\u5269\u4F59\u7A7A\u4F59\u5BBD\u5EA6" })),
-    tooltip: Schema.optional(Locale.annotations({ title: "\u63D0\u793A", description: "\u5217\u6807\u9898\u60AC\u6D6E\u63D0\u793A\uFF0C\u652F\u6301 Markdown" }))
+    tooltip: Schema.optional(Locale.annotations({ title: "\u63D0\u793A", description: "\u5217\u6807\u9898\u60AC\u6D6E\u63D0\u793A\uFF0C\u652F\u6301 Markdown" })),
+    hidden: Schema.optional(Schema.Boolean.annotations({
+      title: "\u9ED8\u8BA4\u9690\u85CF",
+      description: "\u5F00\u542F\u540E\u8BE5\u5217\u9ED8\u8BA4\u9690\u85CF\uFF1B\u4F7F\u7528\u8005\u53EF\u5728\u8868\u683C\u7684\u5217\u8BBE\u7F6E\u4E2D\u91CD\u65B0\u663E\u793A\u3002\u4EC5\u4F5C\u4E3A\u521D\u59CB\u72B6\u6001\uFF0C\u4E0D\u968F\u6570\u636E\u53D8\u5316"
+    }))
   };
 }
 export function editableColumnFields() {
@@ -72,7 +80,11 @@ export function editableColumnFields() {
       description: "\u6307\u5B9A\u4E00\u4E2A\u5408\u9002\u7684\u8868\u683C\u5217\u5BBD\u5EA6\uFF0C\u5F53\u5217\u5185\u5BB9\u957F\u5EA6\u5927\u4E8E\u8FD9\u91CC\u6307\u5B9A\u7684\u5BBD\u5EA6\u540E\uFF0C\u4F1A\u5BFC\u81F4\u8D85\u51FA\u7684\u90E8\u5206\u88AB\u622A\u65AD\u3002"
     })),
     grow: Schema.optional(Schema.Boolean.annotations({ title: "\u5360\u636E\u5269\u4F59\u5BBD\u5EA6", description: "\u5217\u662F\u5426\u5360\u636E\u5269\u4F59\u7A7A\u4F59\u5BBD\u5EA6" })),
-    tooltip: Schema.optional(Locale.annotations({ title: "\u63D0\u793A", description: "\u5217\u6807\u9898\u60AC\u6D6E\u63D0\u793A\uFF0C\u652F\u6301 Markdown" }))
+    tooltip: Schema.optional(Locale.annotations({ title: "\u63D0\u793A", description: "\u5217\u6807\u9898\u60AC\u6D6E\u63D0\u793A\uFF0C\u652F\u6301 Markdown" })),
+    hidden: Schema.optional(Schema.Boolean.annotations({
+      title: "\u9ED8\u8BA4\u9690\u85CF",
+      description: "\u5F00\u542F\u540E\u8BE5\u5217\u9ED8\u8BA4\u9690\u85CF\uFF1B\u4F7F\u7528\u8005\u53EF\u5728\u8868\u683C\u7684\u5217\u8BBE\u7F6E\u4E2D\u91CD\u65B0\u663E\u793A\u3002\u4EC5\u4F5C\u4E3A\u521D\u59CB\u72B6\u6001\uFF0C\u4E0D\u968F\u6570\u636E\u53D8\u5316"
+    }))
   };
 }
 const EDITABLE_HEADER_MARKER = Symbol("shwfed-editable-header");

package/dist/runtime/components/ui/date-picker/DatePicker.d.vue.ts

@@ -21,6 +21,7 @@ type __VLS_Props = {
     timeGranularity?: 'hour' | 'minute' | 'second';
     hourCycle?: 12 | 24;
     class?: HTMLAttributes['class'];
+    inputClass?: HTMLAttributes['class'];
     popoverClass?: HTMLAttributes['class'];
     prefixIcon?: string;
     clearIcon?: string;

package/dist/runtime/components/ui/date-picker/DatePicker.vue

@@ -28,6 +28,7 @@ const props = defineProps({
   timeGranularity: { type: String, required: false, default: "second" },
   hourCycle: { type: Number, required: false, default: 24 },
   class: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
+  inputClass: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
   popoverClass: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
   prefixIcon: { type: String, required: false },
   clearIcon: { type: String, required: false },
@@ -185,6 +186,7 @@ function applyShortcut(index) {
       :prefix-icon="props.prefixIcon"
       :clear-icon="props.clearIcon"
       :size="props.size"
+      :class="props.inputClass"
       @update:model-value="setFromInputTime"
       @clear="emits('clear')"
     />
@@ -205,6 +207,7 @@ function applyShortcut(index) {
           :prefix-icon="props.prefixIcon"
           :clear-icon="props.clearIcon"
           :size="props.size"
+          :class="props.inputClass"
           @update:model-value="setFromInputDate"
           @focus="onInputFocus"
           @blur="onInputBlur"

package/dist/runtime/components/ui/date-picker/DatePicker.vue.d.ts

@@ -21,6 +21,7 @@ type __VLS_Props = {
     timeGranularity?: 'hour' | 'minute' | 'second';
     hourCycle?: 12 | 24;
     class?: HTMLAttributes['class'];
+    inputClass?: HTMLAttributes['class'];
     popoverClass?: HTMLAttributes['class'];
     prefixIcon?: string;
     clearIcon?: string;

package/dist/runtime/components/ui/date-range-picker/DateRangePicker.d.vue.ts

@@ -28,6 +28,7 @@ type __VLS_Props = {
     shortcuts?: ReadonlyArray<DateRangePickerShortcut>;
     size?: 'sm' | 'md' | 'lg';
     class?: HTMLAttributes['class'];
+    inputClass?: HTMLAttributes['class'];
     popoverClass?: HTMLAttributes['class'];
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {