@shwfed/config 2.4.0 → 2.5.0

package/dist/runtime/components/form/utils/common.js

@@ -1,6 +1,27 @@
 import { Schema } from "effect";
-import { Expression } from "../../../share/expression.js";
+import { Expression, LocaleMarkdown } from "../../../share/expression.js";
 import { md } from "../../../share/markdown.js";
+export function validationRuleStruct(configure) {
+  const CelBool = Expression({ configure, resultType: "bool" });
+  return Schema.Struct({
+    when: CelBool.annotations({
+      title: "\u89C4\u5219",
+      description: md`
+        返回 \`true\` 时视为校验**未**通过，返回 \`false\` 视为通过
+      `
+    }),
+    // Severity toggle. Off (default / absent) ⇒ error: standard blocks submit
+    // and reds the field. On ⇒ warning: yellow hint only, never blocks submit.
+    warning: Schema.optional(Schema.Boolean.annotations({
+      title: "\u4EC5\u8B66\u544A",
+      description: "\u5F00\u542F\u540E\u8BE5\u89C4\u5219\u4EC5\u9EC4\u8272\u63D0\u793A\u3001\u4E0D\u963B\u6B62\u63D0\u4EA4"
+    })),
+    message: LocaleMarkdown({ configure }).annotations({
+      title: "\u6D88\u606F",
+      description: "\u6821\u9A8C\u672A\u901A\u8FC7\u65F6\u5C55\u793A\u7684\u672C\u5730\u5316\u6D88\u606F\uFF0C\u652F\u6301 inline Markdown \u4E0E `{{ \u8868\u8FBE\u5F0F }}` \u63D2\u503C"
+    })
+  });
+}
 export function commonFieldFields(configure) {
   const CelBool = Expression({ configure, resultType: "bool" });
   return {
@@ -12,7 +33,24 @@ export function commonFieldFields(configure) {
     hidden: Schema.optional(CelBool.annotations({
       title: "\u9690\u85CF\u6761\u4EF6",
       description: "\u8FD4\u56DE `true` \u65F6\u5B57\u6BB5\u5728\u6240\u6709\u5E03\u5C40\u4E2D\u90FD\u4E0D\u6E32\u67D3"
-    }))
+    })),
+    // Required marker + non-empty check share one expression — no drift
+    // between the star the user sees and the rule that gates submit.
+    required: Schema.optional(CelBool.annotations({
+      title: "\u5FC5\u586B\u6761\u4EF6",
+      description: "\u8FD4\u56DE `true` \u65F6\u663E\u793A\u5FC5\u586B\u661F\u53F7\u5E76\u8981\u6C42\u975E\u7A7A\uFF0C\u7559\u7A7A\u8868\u793A\u4E0D\u5FC5\u586B"
+    })),
+    // Field-owned rules. `when` returns a bool — `true` triggers the rule; the
+    // per-rule `warning` switch picks the severity (error by default, warning
+    // when on). The message is a localized Markdown template with `{{ 表达式 }}`
+    // interpolation. Cross-field rules read `form.*` and live on the field where
+    // the error should appear.
+    validations: Schema.optional(
+      Schema.Array(validationRuleStruct(configure)).annotations({
+        title: "\u6821\u9A8C\u89C4\u5219",
+        description: "\u53CD\u9988\u6D88\u606F\u5C06\u6309\u7167\u6821\u9A8C\u89C4\u5219\u5217\u8868\u987A\u5E8F\u5C55\u793A"
+      })
+    )
   };
 }
 export const FIELD_ORIENTATIONS = ["vertical", "floating"];

package/dist/runtime/components/form/utils/form-vars.d.ts

@@ -0,0 +1,19 @@
+import type { Environment } from '../../../vendor/cel-js/lib/index.js';
+/**
+ * Register the form-wide `now` / `form` live variables on `env`, skipping any
+ * already declared. Idempotent so it composes safely from either side: a
+ * `FormConfig` nested inside another (the `table` form field embeds a table
+ * whose `query` is its own sub-form, and the embedding `configure` advertises
+ * the same pair) would otherwise register `form` twice on one env and the CEL
+ * registry throws `'form' is already registered`. Mirrors
+ * `registerRowVariablesIfAbsent`.
+ *
+ * This is the single source of truth for the `form` / `now` metadata: the
+ * schema's expression validators register it here, the designer-time picker
+ * probes it (`buildFormCelScope`), and the runtime scope derives its
+ * type/label/description from it too (`buildFormRuntimeScope`). Lives in this
+ * dependency-light module — not `schema.ts` — so the scope helpers can import it
+ * without pulling `utils/resolve` (and its `import.meta.glob`) into per-folder
+ * unit tests. `schema.ts` re-exports it for existing call sites.
+ */
+export declare function registerFormVariablesIfAbsent(env: Environment): void;

package/dist/runtime/components/form/utils/form-vars.js

@@ -0,0 +1,5 @@
+export function registerFormVariablesIfAbsent(env) {
+  const declared = new Set(env.getDefinitions().variables.map((v) => v.name));
+  if (!declared.has("now")) env.registerVariable("now", "Date", { label: "\u5F53\u524D\u65F6\u95F4", description: "\u5F53\u524D\u65E5\u671F/\u65F6\u95F4" });
+  if (!declared.has("form")) env.registerVariable("form", "dyn", { label: "\u8868\u5355\u503C", description: "\u5F53\u524D\u8868\u5355\u72B6\u6001" });
+}

package/dist/runtime/components/form/utils/validation.d.ts

@@ -0,0 +1,85 @@
+import { Effect } from 'effect';
+import type { ComputedRef, Ref } from 'vue';
+import { type LocaleValue } from '../../../share/locale.js';
+export type Severity = 'error' | 'warning';
+export type FieldValidationResult = {
+    severity: Severity;
+    /** Already i18n-resolved and `{{ }}`-interpolated — ready to render. */
+    message: string;
+    /** Index in the field's `validations[]`; `-1` for the implicit required rule. */
+    ruleIndex: number;
+};
+/** The slice of a field's config the validation engine reads. */
+export type ValidatableConfig = {
+    required?: string;
+    validations?: ReadonlyArray<{
+        when: string;
+        warning?: boolean;
+        message: LocaleValue;
+    }>;
+    binding?: string | readonly [string, string];
+};
+type Registration = () => ReadonlyArray<FieldValidationResult>;
+export type ValidationProvider = {
+    /**
+     * Global reveal gate. Errors on a pristine field stay hidden until that
+     * field's binding is dirtied (first blur) or `reveal()` flips this true.
+     * Once true it never retracts during the form's life — only a full unmount
+     * resets it. `undo`/`redo` do not touch it (they roll back state, not the
+     * gate).
+     */
+    revealed: Ref<boolean>;
+    reveal: () => void;
+    /** Register a mounted field's id + live results thunk; returns an unregister fn. */
+    register: (fieldId: () => string, results: Registration) => () => void;
+    /**
+     * Drain pending drafts, await the seed and derived-value settlement, then
+     * read every registered field's results. `true` ⇒ no `error`-severity
+     * result anywhere. Always calls `reveal()` so the failing fields surface.
+     */
+    validate: () => Promise<boolean>;
+    /** Union of results across the given field ids — used by collapsible aggregation. */
+    resultsFor: (fieldIds: ReadonlyArray<string>) => ReadonlyArray<FieldValidationResult>;
+};
+export type ValidationHost = {
+    /** Drain pending field commits (the form's commit bus). */
+    flush: () => void;
+    /** Resolves once the initial seed has landed. */
+    seeded: Promise<void>;
+    /** Resolves once every derived value — cascades included — has settled. */
+    settled: () => Promise<void>;
+};
+/**
+ * Provide the form-wide validation registry. Called once at the top-level form
+ * host, after the commit bus / quiescence are available; nested list rows
+ * inherit it through `inject`, so every field in the form — at any nesting
+ * depth — registers into this single provider.
+ */
+export declare function provideValidation(host: ValidationHost): ValidationProvider;
+/**
+ * Inject the form's validation provider. Returns `undefined` when used outside
+ * a `<Form>` host (e.g. a submit button placed on a bare page) — callers treat
+ * that as "no validation".
+ */
+export declare function useValidationProvider(): ValidationProvider | undefined;
+/**
+ * Field-level validation. Called inside an input field's `runtime.vue`. Reads
+ * the field's `required` / `validations` config, evaluates them synchronously
+ * against the field's CEL context (`form`, plus a list row's `item`/`index`),
+ * registers the live results into the form-wide provider for as long as the
+ * field is mounted, and returns the bits the field renders: the required star,
+ * the error/warning message lists, and the dirty-gated `visible` flag.
+ */
+export declare function useFieldValidation(options: {
+    fieldId: () => string;
+    config: () => ValidatableConfig;
+    $cel: <T>(expression: string, context?: Record<string, unknown>) => Effect.Effect<T, any>;
+    /** Current i18n locale, for resolving the message `Locale`. */
+    locale: () => string;
+}): {
+    isRequired: ComputedRef<boolean>;
+    errors: ComputedRef<ReadonlyArray<string>>;
+    warnings: ComputedRef<ReadonlyArray<string>>;
+    visible: ComputedRef<boolean>;
+};
+export {};

package/dist/runtime/components/form/utils/validation.js

@@ -0,0 +1,113 @@
+import { Effect } from "effect";
+import { computed, inject, nextTick, onScopeDispose, provide, ref } from "vue";
+import { getLocalizedText } from "../../../share/locale.js";
+import { interpolate } from "../../../utils/interpolate.js";
+import { useFormState } from "./state.js";
+const VALIDATION_KEY = Symbol("shwfed-form-validation");
+export function provideValidation(host) {
+  const revealed = ref(false);
+  const entries = /* @__PURE__ */ new Map();
+  function union() {
+    const out = [];
+    for (const entry of entries.values()) out.push(...entry.results());
+    return out;
+  }
+  const provider = {
+    revealed,
+    reveal: () => {
+      revealed.value = true;
+    },
+    register: (fieldId, results) => {
+      const token = Symbol("field");
+      entries.set(token, { fieldId, results });
+      return () => {
+        entries.delete(token);
+      };
+    },
+    async validate() {
+      host.flush();
+      await host.seeded;
+      await host.settled();
+      await nextTick();
+      const results = union();
+      provider.reveal();
+      return results.every((r) => r.severity !== "error");
+    },
+    resultsFor(fieldIds) {
+      const wanted = new Set(fieldIds);
+      const out = [];
+      for (const entry of entries.values()) {
+        if (wanted.has(entry.fieldId())) out.push(...entry.results());
+      }
+      return out;
+    }
+  };
+  provide(VALIDATION_KEY, provider);
+  return provider;
+}
+export function useValidationProvider() {
+  return inject(VALIDATION_KEY, void 0);
+}
+const DEFAULT_REQUIRED_MESSAGE = {
+  zh: "\u8BF7\u586B\u5199\u6B64\u5B57\u6BB5",
+  ja: "\u3053\u306E\u9805\u76EE\u3092\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044",
+  en: "Please fill in this field",
+  ko: "\uC774 \uD56D\uBAA9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694"
+};
+function defaultRequiredMessage(locale) {
+  return DEFAULT_REQUIRED_MESSAGE[locale] ?? DEFAULT_REQUIRED_MESSAGE.zh;
+}
+function isEmptyValue(value) {
+  return value == null || value === "" || Array.isArray(value) && value.length === 0;
+}
+export function useFieldValidation(options) {
+  const { getAt, dirty } = useFormState();
+  const provider = useValidationProvider();
+  function evalBool(expression) {
+    if (!expression) return false;
+    try {
+      return Effect.runSync(options.$cel(expression));
+    } catch {
+      return false;
+    }
+  }
+  const isRequired = computed(() => evalBool(options.config().required));
+  function resolveMessage(message) {
+    const template = getLocalizedText(message, options.locale()) ?? "";
+    if (!template) return "";
+    return interpolate(template, (expression) => {
+      try {
+        const out = Effect.runSync(options.$cel(expression));
+        return out == null ? "" : String(out);
+      } catch {
+        return "";
+      }
+    });
+  }
+  const results = computed(() => {
+    const config = options.config();
+    const out = [];
+    if (typeof config.binding === "string" && isRequired.value && isEmptyValue(getAt(config.binding))) {
+      out.push({ severity: "error", message: defaultRequiredMessage(options.locale()), ruleIndex: -1 });
+    }
+    const rules = config.validations ?? [];
+    rules.forEach((rule, ruleIndex) => {
+      if (!evalBool(rule.when)) return;
+      const severity = rule.warning ? "warning" : "error";
+      out.push({ severity, message: resolveMessage(rule.message), ruleIndex });
+    });
+    return out;
+  });
+  if (provider) {
+    const unregister = provider.register(options.fieldId, () => results.value);
+    onScopeDispose(unregister);
+  }
+  const errors = computed(() => results.value.filter((r) => r.severity === "error").map((r) => r.message));
+  const warnings = computed(() => results.value.filter((r) => r.severity === "warning").map((r) => r.message));
+  const visible = computed(() => {
+    if (provider?.revealed.value) return true;
+    const binding = options.config().binding;
+    return typeof binding === "string" && dirty.value.has(binding);
+  });
+  return { isRequired, errors, warnings, visible };
+}

package/dist/runtime/components/table/columns/2026-04-14/com.shwfed.table.column.date/config.vue

@@ -3,7 +3,6 @@ import { computed } from "vue";
 import { Icon } from "@iconify/vue";
 import { format as formatDate } from "date-fns";
 import { Input } from "../../../../ui/input";
-import { Switch } from "../../../../ui/switch";
 import { Separator } from "../../../../ui/separator";
 import { Field, FieldLabel } from "../../../../ui/field";
 import { Locale } from "../../../../ui/locale";
@@ -199,14 +198,10 @@ const dateFormatExample = computed(() => {
     <Separator />
     <div class="flex flex-wrap gap-x-8 gap-y-3">
       <Field
-        orientation="horizontal"
-        class="w-auto gap-2"
+        orientation="vertical"
+        class="w-full max-w-xs"
       >
-        <Switch
-          :model-value="value.enableSorting ?? false"
-          @update:model-value="(v) => value.enableSorting = v"
-        />
-        <FieldLabel class="text-sm text-zinc-600">
+        <FieldLabel class="text-xs text-zinc-500">
           <template
             v-if="fieldDescription('enableSorting')"
             #tooltip
@@ -219,6 +214,23 @@ const dateFormatExample = computed(() => {
           </template>
           {{ fieldTitle("enableSorting") }}
         </FieldLabel>
+        <InputGroup>
+          <InputGroupInput
+            :model-value="value.sortKey"
+            placeholder="例：created_at"
+            @update:model-value="(v) => value.sortKey = v || void 0"
+          />
+          <InputGroupAddon align="inline-end">
+            <InputGroupButton
+              :variant="value.enableSorting ? 'primary' : 'ghost'"
+              size="xs"
+              @click="value.enableSorting = !value.enableSorting"
+            >
+              <Icon :icon="value.enableSorting ? 'fluent:arrow-sort-up-16-regular' : 'fluent:arrow-sort-16-regular'" />
+              {{ fieldTitle("enableSorting") }}
+            </InputGroupButton>
+          </InputGroupAddon>
+        </InputGroup>
       </Field>
     </div>
   </div>

package/dist/runtime/components/table/columns/2026-04-14/com.shwfed.table.column.date/schema.d.ts

@@ -22,6 +22,7 @@ export declare function schema(configure: (env: Environment) => void): Schema.St
     }>]>;
     accessor: 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>>>;
     grow: Schema.optional<Schema.SchemaClass<boolean, boolean, never>>;
     tooltip: Schema.optional<Schema.TupleType<readonly [Schema.Struct<{

package/dist/runtime/components/table/columns/2026-04-14/com.shwfed.table.column.icon/config.vue

@@ -2,7 +2,6 @@
 import { computed } from "vue";
 import { Icon } from "@iconify/vue";
 import { ExpressionEditor } from "../../../../ui/expression-editor";
-import { Switch } from "../../../../ui/switch";
 import { Separator } from "../../../../ui/separator";
 import { Field, FieldLabel } from "../../../../ui/field";
 import { Locale } from "../../../../ui/locale";
@@ -189,14 +188,10 @@ const ROW_VARS = {
     <Separator />
     <div class="flex flex-wrap gap-x-8 gap-y-3">
       <Field
-        orientation="horizontal"
-        class="w-auto gap-2"
+        orientation="vertical"
+        class="w-full max-w-xs"
       >
-        <Switch
-          :model-value="value.enableSorting ?? false"
-          @update:model-value="(v) => value.enableSorting = v"
-        />
-        <FieldLabel class="text-sm text-zinc-600">
+        <FieldLabel class="text-xs text-zinc-500">
           <template
             v-if="fieldDescription('enableSorting')"
             #tooltip
@@ -209,6 +204,23 @@ const ROW_VARS = {
           </template>
           {{ fieldTitle("enableSorting") }}
         </FieldLabel>
+        <InputGroup>
+          <InputGroupInput
+            :model-value="value.sortKey"
+            placeholder="例：created_at"
+            @update:model-value="(v) => value.sortKey = v || void 0"
+          />
+          <InputGroupAddon align="inline-end">
+            <InputGroupButton
+              :variant="value.enableSorting ? 'primary' : 'ghost'"
+              size="xs"
+              @click="value.enableSorting = !value.enableSorting"
+            >
+              <Icon :icon="value.enableSorting ? 'fluent:arrow-sort-up-16-regular' : 'fluent:arrow-sort-16-regular'" />
+              {{ fieldTitle("enableSorting") }}
+            </InputGroupButton>
+          </InputGroupAddon>
+        </InputGroup>
       </Field>
     </div>
   </div>

package/dist/runtime/components/table/columns/2026-04-14/com.shwfed.table.column.icon/schema.d.ts

@@ -22,6 +22,7 @@ export declare function schema(configure: (env: Environment) => void): Schema.St
         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<{

package/dist/runtime/components/table/columns/2026-04-14/com.shwfed.table.column.number/config.vue

@@ -2,7 +2,6 @@
 import { computed } from "vue";
 import { Icon } from "@iconify/vue";
 import { Input } from "../../../../ui/input";
-import { Switch } from "../../../../ui/switch";
 import { Separator } from "../../../../ui/separator";
 import { Field, FieldLabel } from "../../../../ui/field";
 import { Locale } from "../../../../ui/locale";
@@ -267,14 +266,10 @@ function onPreserveDigitsChange(v) {
     <Separator />
     <div class="flex flex-wrap gap-x-8 gap-y-3">
       <Field
-        orientation="horizontal"
-        class="w-auto gap-2"
+        orientation="vertical"
+        class="w-full max-w-xs"
       >
-        <Switch
-          :model-value="value.enableSorting ?? false"
-          @update:model-value="(v) => value.enableSorting = v"
-        />
-        <FieldLabel class="text-sm text-zinc-600">
+        <FieldLabel class="text-xs text-zinc-500">
           <template
             v-if="fieldDescription('enableSorting')"
             #tooltip
@@ -287,6 +282,23 @@ function onPreserveDigitsChange(v) {
           </template>
           {{ fieldTitle("enableSorting") }}
         </FieldLabel>
+        <InputGroup>
+          <InputGroupInput
+            :model-value="value.sortKey"
+            placeholder="例：created_at"
+            @update:model-value="(v) => value.sortKey = v || void 0"
+          />
+          <InputGroupAddon align="inline-end">
+            <InputGroupButton
+              :variant="value.enableSorting ? 'primary' : 'ghost'"
+              size="xs"
+              @click="value.enableSorting = !value.enableSorting"
+            >
+              <Icon :icon="value.enableSorting ? 'fluent:arrow-sort-up-16-regular' : 'fluent:arrow-sort-16-regular'" />
+              {{ fieldTitle("enableSorting") }}
+            </InputGroupButton>
+          </InputGroupAddon>
+        </InputGroup>
       </Field>
     </div>
   </div>

package/dist/runtime/components/table/columns/2026-04-14/com.shwfed.table.column.number/schema.d.ts

@@ -26,6 +26,7 @@ export declare function schema(configure: (env: Environment) => void): Schema.St
     }>]>;
     accessor: 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>>>;
     grow: Schema.optional<Schema.SchemaClass<boolean, boolean, never>>;
     tooltip: Schema.optional<Schema.TupleType<readonly [Schema.Struct<{

package/dist/runtime/components/table/columns/2026-04-14/com.shwfed.table.column.text/config.vue

@@ -3,7 +3,6 @@ import { computed } from "vue";
 import { Icon } from "@iconify/vue";
 import { Input } from "../../../../ui/input";
 import { ExpressionEditor } from "../../../../ui/expression-editor";
-import { Switch } from "../../../../ui/switch";
 import { Separator } from "../../../../ui/separator";
 import { Field, FieldLabel } from "../../../../ui/field";
 import { Locale } from "../../../../ui/locale";
@@ -229,14 +228,10 @@ const copyExpressionModel = computed({
     <Separator />
     <div class="flex flex-wrap gap-x-8 gap-y-3">
       <Field
-        orientation="horizontal"
-        class="w-auto gap-2"
+        orientation="vertical"
+        class="w-full max-w-xs"
       >
-        <Switch
-          :model-value="value.enableSorting ?? false"
-          @update:model-value="(v) => value.enableSorting = v"
-        />
-        <FieldLabel class="text-sm text-zinc-600">
+        <FieldLabel class="text-xs text-zinc-500">
           <template
             v-if="fieldDescription('enableSorting')"
             #tooltip
@@ -249,6 +244,23 @@ const copyExpressionModel = computed({
           </template>
           {{ fieldTitle("enableSorting") }}
         </FieldLabel>
+        <InputGroup>
+          <InputGroupInput
+            :model-value="value.sortKey"
+            placeholder="例：created_at"
+            @update:model-value="(v) => value.sortKey = v || void 0"
+          />
+          <InputGroupAddon align="inline-end">
+            <InputGroupButton
+              :variant="value.enableSorting ? 'primary' : 'ghost'"
+              size="xs"
+              @click="value.enableSorting = !value.enableSorting"
+            >
+              <Icon :icon="value.enableSorting ? 'fluent:arrow-sort-up-16-regular' : 'fluent:arrow-sort-16-regular'" />
+              {{ fieldTitle("enableSorting") }}
+            </InputGroupButton>
+          </InputGroupAddon>
+        </InputGroup>
       </Field>
     </div>
   </div>

package/dist/runtime/components/table/columns/2026-04-14/com.shwfed.table.column.text/schema.d.ts

@@ -25,6 +25,7 @@ export declare function schema(configure: (env: Environment) => void): Schema.St
     }>]>;
     accessor: 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>>>;
     grow: Schema.optional<Schema.SchemaClass<boolean, boolean, never>>;
     tooltip: Schema.optional<Schema.TupleType<readonly [Schema.Struct<{

package/dist/runtime/components/table/columns/2026-05-13/com.shwfed.table.column.switch/config.vue

@@ -2,7 +2,6 @@
 import { computed } from "vue";
 import { Icon } from "@iconify/vue";
 import { ExpressionEditor } from "../../../../ui/expression-editor";
-import { Switch } from "../../../../ui/switch";
 import { Separator } from "../../../../ui/separator";
 import { Field, FieldLabel } from "../../../../ui/field";
 import { Locale } from "../../../../ui/locale";
@@ -279,14 +278,10 @@ function updateTriggers(next) {
     <Separator />
     <div class="flex flex-wrap gap-x-8 gap-y-3">
       <Field
-        orientation="horizontal"
-        class="w-auto gap-2"
+        orientation="vertical"
+        class="w-full max-w-xs"
       >
-        <Switch
-          :model-value="value.enableSorting ?? false"
-          @update:model-value="(v) => value.enableSorting = v"
-        />
-        <FieldLabel class="text-sm text-zinc-600">
+        <FieldLabel class="text-xs text-zinc-500">
           <template
             v-if="fieldDescription('enableSorting')"
             #tooltip
@@ -299,6 +294,23 @@ function updateTriggers(next) {
           </template>
           {{ fieldTitle("enableSorting") }}
         </FieldLabel>
+        <InputGroup>
+          <InputGroupInput
+            :model-value="value.sortKey"
+            placeholder="例：created_at"
+            @update:model-value="(v) => value.sortKey = v || void 0"
+          />
+          <InputGroupAddon align="inline-end">
+            <InputGroupButton
+              :variant="value.enableSorting ? 'primary' : 'ghost'"
+              size="xs"
+              @click="value.enableSorting = !value.enableSorting"
+            >
+              <Icon :icon="value.enableSorting ? 'fluent:arrow-sort-up-16-regular' : 'fluent:arrow-sort-16-regular'" />
+              {{ fieldTitle("enableSorting") }}
+            </InputGroupButton>
+          </InputGroupAddon>
+        </InputGroup>
       </Field>
     </div>
   </div>

package/dist/runtime/components/table/columns/2026-05-13/com.shwfed.table.column.switch/schema.d.ts

@@ -28,6 +28,7 @@ export declare function schema(configure: (env: Environment) => void): Schema.St
     }>]>;
     accessor: 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>>>;
     grow: Schema.optional<Schema.SchemaClass<boolean, boolean, never>>;
     tooltip: Schema.optional<Schema.TupleType<readonly [Schema.Struct<{

package/dist/runtime/components/table/columns/2026-05-13/com.shwfed.table.column.switch.remote/config.vue

@@ -2,7 +2,6 @@
 import { computed } from "vue";
 import { Icon } from "@iconify/vue";
 import { ExpressionEditor } from "../../../../ui/expression-editor";
-import { Switch } from "../../../../ui/switch";
 import { Separator } from "../../../../ui/separator";
 import { Field, FieldLabel } from "../../../../ui/field";
 import { Locale } from "../../../../ui/locale";
@@ -279,14 +278,10 @@ function updateTriggers(next) {
     <Separator />
     <div class="flex flex-wrap gap-x-8 gap-y-3">
       <Field
-        orientation="horizontal"
-        class="w-auto gap-2"
+        orientation="vertical"
+        class="w-full max-w-xs"
       >
-        <Switch
-          :model-value="value.enableSorting ?? false"
-          @update:model-value="(v) => value.enableSorting = v"
-        />
-        <FieldLabel class="text-sm text-zinc-600">
+        <FieldLabel class="text-xs text-zinc-500">
           <template
             v-if="fieldDescription('enableSorting')"
             #tooltip
@@ -299,6 +294,23 @@ function updateTriggers(next) {
           </template>
           {{ fieldTitle("enableSorting") }}
         </FieldLabel>
+        <InputGroup>
+          <InputGroupInput
+            :model-value="value.sortKey"
+            placeholder="例：created_at"
+            @update:model-value="(v) => value.sortKey = v || void 0"
+          />
+          <InputGroupAddon align="inline-end">
+            <InputGroupButton
+              :variant="value.enableSorting ? 'primary' : 'ghost'"
+              size="xs"
+              @click="value.enableSorting = !value.enableSorting"
+            >
+              <Icon :icon="value.enableSorting ? 'fluent:arrow-sort-up-16-regular' : 'fluent:arrow-sort-16-regular'" />
+              {{ fieldTitle("enableSorting") }}
+            </InputGroupButton>
+          </InputGroupAddon>
+        </InputGroup>
       </Field>
     </div>
   </div>

package/dist/runtime/components/table/columns/2026-05-13/com.shwfed.table.column.switch.remote/schema.d.ts

@@ -28,6 +28,7 @@ export declare function schema(configure: (env: Environment) => void): Schema.St
     }>]>;
     accessor: 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>>>;
     grow: Schema.optional<Schema.SchemaClass<boolean, boolean, never>>;
     tooltip: Schema.optional<Schema.TupleType<readonly [Schema.Struct<{

package/dist/runtime/components/table/columns/2026-05-20/com.shwfed.table.column.combobox-single/config.d.vue.ts

@@ -64,6 +64,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
             readonly expression: string;
         } | undefined;
         readonly enableSorting?: boolean | undefined;
+        readonly sortKey?: string | undefined;
     }) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: {
@@ -127,6 +128,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
             readonly expression: string;
         } | undefined;
         readonly enableSorting?: boolean | undefined;
+        readonly sortKey?: string | undefined;
     }) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;