@shwfed/config 1.0.0

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

@@ -0,0 +1,293 @@
+<script setup>
+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";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupNumberField
+} from "../../../../ui/input-group";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "../../../../ui/select";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "../../../../ui/dropdown-menu";
+import { getStructFieldDescription, getStructFieldTitle } from "../../../utils/schema-meta";
+import { Markdown } from "../../../../ui/markdown";
+import { schema } from "./schema";
+defineOptions({ name: "ShwfedTableNumberRendererConfig" });
+const value = defineModel({ type: Object, ...{ required: true } });
+const fieldSchema = schema(() => {
+});
+const fieldTitle = (field) => getStructFieldTitle(fieldSchema, field) ?? field;
+const fieldDescription = (field) => getStructFieldDescription(fieldSchema, field);
+const ALIGN_OPTIONS = [
+  { value: "left", label: "\u5DE6\u5BF9\u9F50", icon: "fluent:text-align-left-20-regular" },
+  { value: "center", label: "\u5C45\u4E2D", icon: "fluent:text-align-center-20-regular" },
+  { value: "right", label: "\u53F3\u5BF9\u9F50", icon: "fluent:text-align-right-20-regular" }
+];
+const currentAlignIcon = computed(
+  () => (ALIGN_OPTIONS.find((o) => o.value === (value.value.align ?? "right")) ?? ALIGN_OPTIONS[2]).icon
+);
+const PRESERVE_MODE_OPTIONS = [
+  { value: "round", label: "\u56DB\u820D\u4E94\u5165" },
+  { value: "floor", label: "\u5411\u4E0B\u53D6\u6574" },
+  { value: "ceil", label: "\u5411\u4E0A\u53D6\u6574" }
+];
+const DISPLAY_MODE_OPTIONS = [
+  { value: "plain", label: "\u6570\u503C" },
+  { value: "uppercaseChinese", label: "\u4E2D\u6587\u5927\u5199" },
+  { value: "monoThousand", label: "\u7B49\u5BBD\u5B57\u4F53\u52A0\u5343\u5206\u4F4D" }
+];
+const currentPreserveModeLabel = computed(
+  () => PRESERVE_MODE_OPTIONS.find((o) => o.value === (value.value.preserveMode ?? "round"))?.label
+);
+function onPreserveDigitsChange(v) {
+  value.value.preserveDigits = v;
+  if (v === void 0) {
+    value.value.preserveMode = void 0;
+  } else if (value.value.preserveMode === void 0) {
+    value.value.preserveMode = "round";
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-5">
+    <div class="grid grid-cols-2 gap-x-6 gap-y-4">
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template
+            v-if="fieldDescription('title')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('title')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("title") }}
+        </FieldLabel>
+        <Locale v-model="value.title" />
+      </Field>
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template
+            v-if="fieldDescription('tooltip')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('tooltip')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("tooltip") }}
+        </FieldLabel>
+        <Locale
+          v-model="value.tooltip"
+          markdown
+        />
+      </Field>
+    </div>
+    <div class="grid grid-cols-2 gap-x-6 gap-y-4">
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template
+            v-if="fieldDescription('accessor')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('accessor')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("accessor") }}
+        </FieldLabel>
+        <Input
+          v-model="value.accessor"
+          placeholder="如 row.salary"
+          class="font-mono text-xs"
+        />
+      </Field>
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template
+            v-if="fieldDescription('size')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('size')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("size") }}
+        </FieldLabel>
+        <InputGroup>
+          <InputGroupAddon align="inline-start">
+            <DropdownMenu>
+              <DropdownMenuTrigger as-child>
+                <InputGroupButton
+                  variant="ghost"
+                  size="xs"
+                  :title="fieldTitle('align')"
+                >
+                  <Icon :icon="currentAlignIcon" />
+                </InputGroupButton>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start">
+                <DropdownMenuItem
+                  v-for="opt in ALIGN_OPTIONS"
+                  :key="opt.value"
+                  @select="value.align = opt.value"
+                >
+                  <Icon :icon="opt.icon" />
+                  {{ opt.label }}
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </InputGroupAddon>
+          <InputGroupNumberField
+            :model-value="value.size"
+            :disabled="value.grow"
+            :min="0"
+            @update:model-value="(v) => value.size = v"
+          />
+          <InputGroupAddon align="inline-end">
+            <InputGroupButton
+              :variant="value.grow ? 'primary' : 'ghost'"
+              size="xs"
+              @click="value.grow = !value.grow"
+            >
+              <Icon :icon="value.grow ? 'fluent:lock-closed-20-regular' : 'fluent:arrow-autofit-width-20-regular'" />
+              {{ fieldTitle("grow") }}
+            </InputGroupButton>
+          </InputGroupAddon>
+        </InputGroup>
+      </Field>
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template
+            v-if="fieldDescription('displayMode')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('displayMode')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("displayMode") }}
+        </FieldLabel>
+        <Select
+          :model-value="value.displayMode ?? 'plain'"
+          @update:model-value="(v) => value.displayMode = v"
+        >
+          <SelectTrigger class="w-full">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem
+              v-for="opt in DISPLAY_MODE_OPTIONS"
+              :key="opt.value"
+              :value="opt.value"
+            >
+              {{ opt.label }}
+            </SelectItem>
+          </SelectContent>
+        </Select>
+      </Field>
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template
+            v-if="fieldDescription('preserveDigits')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('preserveDigits')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("preserveDigits") }}
+        </FieldLabel>
+        <InputGroup>
+          <InputGroupNumberField
+            :model-value="value.preserveDigits"
+            :min="0"
+            @update:model-value="onPreserveDigitsChange"
+          />
+          <InputGroupAddon
+            v-if="value.preserveDigits !== void 0"
+            align="inline-end"
+          >
+            <DropdownMenu>
+              <DropdownMenuTrigger as-child>
+                <InputGroupButton
+                  variant="ghost"
+                  class="!pr-1.5 text-xs"
+                >
+                  {{ currentPreserveModeLabel }}
+                  <Icon
+                    icon="lucide:chevron-down"
+                    class="size-3"
+                  />
+                </InputGroupButton>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem
+                  v-for="opt in PRESERVE_MODE_OPTIONS"
+                  :key="opt.value"
+                  @select="value.preserveMode = opt.value"
+                >
+                  {{ opt.label }}
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </InputGroupAddon>
+        </InputGroup>
+      </Field>
+    </div>
+    <Separator />
+    <div class="flex flex-wrap gap-x-8 gap-y-3">
+      <Field
+        orientation="horizontal"
+        class="w-auto gap-2"
+      >
+        <Switch
+          :model-value="value.enableSorting ?? false"
+          @update:model-value="(v) => value.enableSorting = v"
+        />
+        <FieldLabel class="text-sm text-zinc-600">
+          <template
+            v-if="fieldDescription('enableSorting')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('enableSorting')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("enableSorting") }}
+        </FieldLabel>
+      </Field>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/table/columns/2026-04-14/com.shwfed.table.column.number/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-04-14/com.shwfed.table.column.number/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-04-14/com.shwfed.table.column.number/runtime.vue

@@ -0,0 +1,97 @@
+<script setup>
+import { computed } from "vue";
+import { JUSTIFY_CLASS } from "../../../utils/runtime";
+defineOptions({ name: "ShwfedTableNumberRendererRuntime" });
+const props = defineProps({
+  column: { type: null, required: true },
+  ctx: { type: Object, required: true }
+});
+const CHINESE_DIGITS = ["\u96F6", "\u58F9", "\u8D30", "\u53C1", "\u8086", "\u4F0D", "\u9646", "\u67D2", "\u634C", "\u7396"];
+const CHINESE_UNITS = ["", "\u62FE", "\u4F70", "\u4EDF"];
+const CHINESE_GROUP_UNITS = ["", "\u4E07", "\u4EBF", "\u5146"];
+function toChineseUppercase(n) {
+  if (Number.isNaN(n)) return "-";
+  if (n === 0) return "\u96F6";
+  const isNegative = n < 0;
+  const absN = Math.abs(n);
+  const [intPart, decPart] = String(absN).split(".");
+  let result = "";
+  const digits = intPart.split("").reverse();
+  let zeroFlag = false;
+  for (let i = 0; i < digits.length; i++) {
+    const d = Number(digits[i]);
+    const groupIndex = Math.floor(i / 4);
+    const posInGroup = i % 4;
+    if (d === 0) {
+      zeroFlag = true;
+    } else {
+      if (zeroFlag) {
+        result = CHINESE_DIGITS[0] + result;
+        zeroFlag = false;
+      }
+      result = CHINESE_DIGITS[d] + CHINESE_UNITS[posInGroup] + result;
+    }
+    if (posInGroup === 0 && groupIndex > 0 && !zeroFlag) {
+      result = (CHINESE_GROUP_UNITS[groupIndex] ?? "") + result;
+    }
+  }
+  if (decPart) {
+    result += "\u70B9";
+    for (const ch of decPart) {
+      result += CHINESE_DIGITS[Number(ch)];
+    }
+  }
+  return isNegative ? `\u8D1F${result}` : result;
+}
+function formatNumber(value, column) {
+  const n = Number(value);
+  if (Number.isNaN(n)) return "-";
+  const displayMode = column.displayMode ?? "plain";
+  if (displayMode === "uppercaseChinese") {
+    return toChineseUppercase(n);
+  }
+  let result;
+  if (column.preserveDigits !== void 0) {
+    const mode = column.preserveMode ?? "round";
+    const digits = column.preserveDigits;
+    const factor = 10 ** digits;
+    let processed;
+    switch (mode) {
+      case "floor":
+        processed = Math.floor(n * factor) / factor;
+        break;
+      case "ceil":
+        processed = Math.ceil(n * factor) / factor;
+        break;
+      default:
+        processed = Math.round(n * factor) / factor;
+    }
+    result = processed.toFixed(digits);
+  } else {
+    result = String(n);
+  }
+  if (displayMode === "monoThousand") {
+    const [integer, decimal] = result.split(".");
+    const formattedInt = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+    result = decimal !== void 0 ? `${formattedInt}.${decimal}` : formattedInt;
+  }
+  return result;
+}
+const formatted = computed(() => formatNumber(props.ctx.cell.getValue(), props.column));
+const isNan = computed(() => formatted.value === "-");
+const align = computed(() => isNan.value ? "center" : props.column.align ?? "right");
+const justifyClass = computed(() => JUSTIFY_CLASS[align.value] ?? JUSTIFY_CLASS.right);
+</script>
+
+<template>
+  <div
+    :class="[
+  'relative w-full py-2 px-1 flex items-center text-xs',
+  justifyClass,
+  column.displayMode === 'monoThousand' && 'font-mono',
+  isNan ? 'text-zinc-300 select-none' : 'text-zinc-600'
+]"
+  >
+    {{ formatted }}
+  </div>
+</template>

package/dist/runtime/components/table/columns/2026-04-14/com.shwfed.table.column.number/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-04-14/com.shwfed.table.column.number/schema.d.ts

@@ -0,0 +1,44 @@
+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.number";
+export declare const compatibilityDate: "2026-04-14";
+export declare const metadata: {
+    readonly name: "数值";
+    readonly icon: "fluent:number-symbol-20-regular";
+};
+export declare function schema(configure: (env: Environment) => void): Schema.Struct<{
+    align: Schema.optionalWith<Schema.Literal<["left", "center", "right"]>, {
+        default: () => "right";
+    }>;
+    displayMode: Schema.optionalWith<Schema.Literal<["plain", "uppercaseChinese", "monoThousand"]>, {
+        default: () => "plain";
+    }>;
+    preserveMode: Schema.optional<Schema.Literal<["round", "floor", "ceil"]>>;
+    preserveDigits: Schema.optional<Schema.refine<number, Schema.filter<typeof Schema.Number>>>;
+    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>;
+    }>]>;
+    accessor: Schema.Schema<string, string, never>;
+    enableSorting: Schema.optional<Schema.SchemaClass<boolean, boolean, never>>;
+    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>;
+    }>]>>;
+    id: Schema.refine<string, typeof Schema.String>;
+    groupId: Schema.optional<typeof Schema.UUID>;
+    type: Schema.Literal<["com.shwfed.table.column.number"]>;
+    compatibilityDate: Schema.Literal<["2026-04-14"]>;
+}>;
+export type Value = Schema.Schema.Type<ReturnType<typeof schema>>;
+export declare function toColumnDef(value: Value, { getLocaleText, $cel, inheritedContext }: ColumnDefDeps): Partial<ColumnDef<unknown, unknown>>;

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

@@ -0,0 +1,50 @@
+import { Effect, Schema } from "effect";
+import { Align, columnFields } from "../../../utils/shared.js";
+export const type = "com.shwfed.table.column.number";
+export const compatibilityDate = "2026-04-14";
+export const metadata = {
+  name: "\u6570\u503C",
+  icon: "fluent:number-symbol-20-regular"
+};
+export function schema(configure) {
+  return Schema.Struct({
+    type: Schema.Literal(type),
+    compatibilityDate: Schema.Literal(compatibilityDate),
+    ...columnFields(configure),
+    align: Schema.optionalWith(Align.annotations({ title: "\u5BF9\u9F50" }), { default: () => "right" }),
+    displayMode: Schema.optionalWith(
+      Schema.Literal("plain", "uppercaseChinese", "monoThousand").annotations({
+        title: "\u6A21\u5F0F",
+        description: "\u6570\u503C\u7684\u5C55\u793A\u6A21\u5F0F\uFF1A\u6570\u503C\uFF08\u539F\u6837\uFF09\u3001\u4E2D\u6587\u5927\u5199\uFF08\u5982 4200 \u2192 `\u8086\u4EDF\u8D30\u4F70\u96F6\u62FE`\uFF09\u3001\u7B49\u5BBD\u5B57\u4F53\u52A0\u5343\u5206\u4F4D\uFF08\u5982 `4,200`\uFF09"
+      }),
+      { default: () => "plain" }
+    ),
+    preserveMode: Schema.optional(Schema.Literal("round", "floor", "ceil").annotations({
+      title: "\u4FDD\u7559\u6A21\u5F0F",
+      description: "\u5C0F\u6570\u4FDD\u7559\u6A21\u5F0F"
+    })),
+    preserveDigits: Schema.optional(Schema.Number.pipe(Schema.int(), Schema.nonNegative()).annotations({
+      title: "\u4FDD\u7559\u5C0F\u6570\u4F4D\u6570",
+      description: "\u5F3A\u5236\u4FDD\u7559\u8BE5\u6570\u91CF\u7684\u5C0F\u6570\u4F4D\u6570\uFF1A\u5F53\u4E0D\u6EE1\u65F6\u81EA\u52A8\u586B\u5145\uFF1B\u5F53\u8D85\u8FC7\u65F6\u820D\u5F03"
+    }))
+  }).annotations({ title: "NumberRenderer", description: "\u6570\u503C\u6E32\u67D3\u5668" });
+}
+export function toColumnDef(value, { getLocaleText, $cel, inheritedContext }) {
+  return {
+    header: getLocaleText(value.title),
+    accessorFn: (row, index) => {
+      try {
+        return Effect.runSync($cel(value.accessor, { ...inheritedContext, row, index }));
+      } catch (e) {
+        console.error("[shwfed-table] accessor failed", e);
+        return void 0;
+      }
+    },
+    enableSorting: value.enableSorting ?? false,
+    size: value.size,
+    meta: {
+      grow: value.grow ?? false,
+      tooltip: getLocaleText(value.tooltip)
+    }
+  };
+}

package/dist/runtime/components/table/columns/2026-04-14/com.shwfed.table.column.select/config.d.vue.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-04-14/com.shwfed.table.column.select/config.vue

@@ -0,0 +1,141 @@
+<script setup>
+import { Switch } from "../../../../ui/switch";
+import { Separator } from "../../../../ui/separator";
+import { Field, FieldLabel } from "../../../../ui/field";
+import { ExpressionEditor } from "../../../../ui/expression-editor";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "../../../../ui/select";
+import { getStructFieldDescription, getStructFieldTitle } from "../../../utils/schema-meta";
+import { Markdown } from "../../../../ui/markdown";
+import { schema } from "./schema";
+defineOptions({ name: "ShwfedTableSelectRendererConfig" });
+const value = defineModel({ type: Object, ...{ required: true } });
+const fieldSchema = schema(() => {
+});
+const fieldTitle = (field) => getStructFieldTitle(fieldSchema, field) ?? field;
+const fieldDescription = (field) => getStructFieldDescription(fieldSchema, field);
+const SELECT_MODE_OPTIONS = [
+  { value: "checkbox", label: "\u591A\u9009" },
+  { value: "radio", label: "\u5355\u9009" }
+];
+function updateOptionalString(key, next) {
+  if (next.trim() === "") {
+    const { [key]: _, ...rest } = value.value;
+    value.value = rest;
+  } else {
+    value.value = { ...value.value, [key]: next };
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-5">
+    <div class="grid grid-cols-2 gap-x-6 gap-y-4">
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template
+            v-if="fieldDescription('mode')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('mode')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("mode") }}
+        </FieldLabel>
+        <Select
+          :model-value="value.mode ?? 'checkbox'"
+          @update:model-value="(v) => value.mode = v"
+        >
+          <SelectTrigger class="w-full">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem
+              v-for="opt in SELECT_MODE_OPTIONS"
+              :key="opt.value"
+              :value="opt.value"
+            >
+              {{ opt.label }}
+            </SelectItem>
+          </SelectContent>
+        </Select>
+      </Field>
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template
+            v-if="fieldDescription('crossPage')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('crossPage')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("crossPage") }}
+        </FieldLabel>
+        <div class="flex h-9 items-center">
+          <Switch
+            :model-value="value.crossPage ?? false"
+            @update:model-value="(v) => value.crossPage = v"
+          />
+        </div>
+      </Field>
+    </div>
+    <Separator />
+    <div class="grid grid-cols-2 gap-x-6 gap-y-4">
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template
+            v-if="fieldDescription('enableRowSelection')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('enableRowSelection')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("enableRowSelection") }}
+        </FieldLabel>
+        <ExpressionEditor
+          :model-value="value.enableRowSelection ?? ''"
+          placeholder="如 row.id != 'foo'"
+          result-type="bool"
+          class="min-h-10"
+          @update:model-value="(v) => updateOptionalString('enableRowSelection', v)"
+        />
+      </Field>
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template
+            v-if="fieldDescription('enableMultiRowSelection')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('enableMultiRowSelection')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("enableMultiRowSelection") }}
+        </FieldLabel>
+        <ExpressionEditor
+          :model-value="value.enableMultiRowSelection ?? ''"
+          placeholder="如 row.id != 'foo'"
+          result-type="bool"
+          class="min-h-10"
+          @update:model-value="(v) => updateOptionalString('enableMultiRowSelection', v)"
+        />
+      </Field>
+    </div>
+  </div>
+</template>