@shwfed/config 2.3.28 → 2.4.0

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

@@ -0,0 +1,931 @@
+<script setup>
+import { computed } from "vue";
+import { Icon } from "@iconify/vue";
+import { Button } from "../../../../ui/button";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../../../ui/dropdown-menu";
+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";
+import { Textarea } from "../../../../ui/textarea";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupNumberField
+} from "../../../../ui/input-group";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../../../ui/tabs";
+import { getStructFieldDescription, getStructFieldTitle } from "../../../utils/schema-meta";
+import { Markdown } from "../../../../ui/markdown";
+import TriggersField from "../../../../actions/components/triggers-field.vue";
+import { itemSchema, remoteOptionsSchema, schema, writeSchema } from "./schema";
+defineOptions({ name: "ShwfedTableComboboxSingleConfig" });
+const value = defineModel({ type: null, ...{ required: true } });
+const fieldSchema = schema(() => {
+});
+const fieldTitle = (field) => getStructFieldTitle(fieldSchema, field) ?? field;
+const fieldDescription = (field) => getStructFieldDescription(fieldSchema, field);
+const itemFieldSchema = itemSchema(() => {
+});
+const itemFieldTitle = (f) => getStructFieldTitle(itemFieldSchema, f) ?? f;
+const itemFieldDescription = (f) => getStructFieldDescription(itemFieldSchema, f);
+const remoteSchema = remoteOptionsSchema(() => {
+});
+const remoteFieldTitle = (f) => getStructFieldTitle(remoteSchema, f) ?? f;
+const remoteFieldDescription = (f) => getStructFieldDescription(remoteSchema, f);
+const writeUnion = writeSchema(() => {
+});
+const writeMembers = (writeUnion.ast.types ?? []).map(
+  (ast) => (
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    { ast }
+  )
+);
+const writeFieldTitle = (f) => {
+  for (const m of writeMembers) {
+    const t = getStructFieldTitle(m, f);
+    if (t) return t;
+  }
+  return f;
+};
+const writeFieldDescription = (f) => {
+  for (const m of writeMembers) {
+    const d = getStructFieldDescription(m, f);
+    if (d) return d;
+  }
+  return void 0;
+};
+const ROW_VARS = {
+  row: { type: "dyn", label: "\u5F53\u524D\u884C\u6570\u636E" },
+  index: { type: "number", label: "\u884C\u7D22\u5F15" }
+};
+const ROW_JSON_VARS = {
+  ...ROW_VARS,
+  json: { type: "dyn", label: "HTTP \u54CD\u5E94\u4F53\uFF08\u5DF2\u89E3\u6790 JSON\uFF09" }
+};
+const ROW_OPTION_VARS = {
+  ...ROW_VARS,
+  option: { type: "dyn", label: "\u5F53\u524D\u9009\u9879" }
+};
+const ROW_VALUE_VARS = {
+  ...ROW_VARS,
+  value: { type: "dyn", label: "\u7528\u6237\u9009\u4E2D\u7684\u65B0\u503C\uFF08\u6E05\u7A7A\u65F6\u4E3A `null`\uFF09" }
+};
+const JSON_VARS = {
+  json: { type: "dyn", label: "HTTP \u54CD\u5E94\u4F53" }
+};
+function celModel(field) {
+  return computed({
+    get: () => value.value[field] ?? "",
+    set: (v) => {
+      if (v === "") {
+        const { [field]: _omit, ...rest } = value.value;
+        value.value = rest;
+      } else {
+        value.value = { ...value.value, [field]: v };
+      }
+    }
+  });
+}
+const hiddenModel = celModel("hidden");
+const disabledModel = celModel("disabled");
+const readonlyModel = celModel("readonly");
+const writeKind = computed(() => value.value.write.kind);
+function setWriteKind(kind) {
+  if (value.value.write.kind === kind) return;
+  const write = kind === "binding" ? { kind: "binding", binding: "" } : { kind: "remote", accessor: "" };
+  value.value = { ...value.value, write };
+}
+function patchRemoteWrite(patch) {
+  if (value.value.write.kind !== "remote") return;
+  value.value = { ...value.value, write: { ...value.value.write, ...patch } };
+}
+function remoteWriteCelModel(field) {
+  return computed({
+    get: () => value.value.write.kind === "remote" ? value.value.write[field] ?? "" : "",
+    set: (v) => {
+      if (value.value.write.kind !== "remote") return;
+      if (v === "") {
+        const { [field]: _omit, ...rest } = value.value.write;
+        value.value = { ...value.value, write: rest };
+      } else {
+        patchRemoteWrite({ [field]: v });
+      }
+    }
+  });
+}
+const bindingModel = computed({
+  get: () => value.value.write.kind === "binding" ? value.value.write.binding : "",
+  set: (v) => {
+    if (value.value.write.kind !== "binding") return;
+    value.value = { ...value.value, write: { kind: "binding", binding: v.trim() } };
+  }
+});
+const accessorModel = computed({
+  get: () => value.value.write.kind === "remote" ? value.value.write.accessor : "",
+  set: (v) => patchRemoteWrite({ accessor: v })
+});
+const onChangeModel = remoteWriteCelModel("onChange");
+const successMessageModel = remoteWriteCelModel("successMessage");
+const triggers = computed(
+  () => value.value.write.kind === "remote" ? value.value.write.triggers ?? [] : []
+);
+function updateTriggers(next) {
+  if (value.value.write.kind !== "remote") return;
+  if (next.length === 0) {
+    const { triggers: _omit, ...rest } = value.value.write;
+    value.value = { ...value.value, write: rest };
+  } else {
+    value.value = { ...value.value, write: { ...value.value.write, triggers: [...next] } };
+  }
+}
+const optionsKind = computed(() => value.value.options.kind);
+function emptyStatic() {
+  return { kind: "static", items: [] };
+}
+function emptyRemote() {
+  return {
+    kind: "remote",
+    request: "",
+    options: "",
+    optionValue: "option",
+    optionLabel: [{ locale: "zh", message: "" }]
+  };
+}
+function setKind(kind) {
+  if (value.value.options.kind === kind) return;
+  value.value = {
+    ...value.value,
+    options: kind === "static" ? emptyStatic() : emptyRemote()
+  };
+}
+const items = computed(() => {
+  return value.value.options.kind === "static" ? value.value.options.items : [];
+});
+function patchStatic(patch) {
+  if (value.value.options.kind !== "static") return;
+  value.value = {
+    ...value.value,
+    options: { ...value.value.options, ...patch }
+  };
+}
+function patchRemote(patch) {
+  if (value.value.options.kind !== "remote") return;
+  value.value = {
+    ...value.value,
+    options: { ...value.value.options, ...patch }
+  };
+}
+const requestModel = computed({
+  get: () => value.value.options.kind === "remote" ? value.value.options.request : "",
+  set: (v) => patchRemote({ request: v })
+});
+const optionsExprModel = computed({
+  get: () => value.value.options.kind === "remote" ? value.value.options.options : "",
+  set: (v) => patchRemote({ options: v })
+});
+const optionValueModel = computed({
+  get: () => value.value.options.kind === "remote" ? value.value.options.optionValue : "option",
+  set: (v) => patchRemote({ optionValue: v })
+});
+const optionLabelModel = computed({
+  get: () => value.value.options.kind === "remote" ? value.value.options.optionLabel : [{ locale: "zh", message: "" }],
+  set: (v) => patchRemote({ optionLabel: v })
+});
+const optionKeywordsModel = computed({
+  get: () => value.value.options.kind === "remote" ? value.value.options.optionKeywords ?? "" : "",
+  set: (v) => {
+    if (value.value.options.kind !== "remote") return;
+    if (v === "") {
+      const { optionKeywords: _omit, ...rest } = value.value.options;
+      value.value = { ...value.value, options: rest };
+    } else {
+      patchRemote({ optionKeywords: v });
+    }
+  }
+});
+function newId() {
+  return typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID() : "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+    const r = Math.random() * 16 | 0;
+    const v = c === "x" ? r : r & 3 | 8;
+    return v.toString(16);
+  });
+}
+function newItem() {
+  return {
+    id: newId(),
+    label: [{ locale: "zh", message: "" }],
+    value: { kind: "text", value: "" }
+  };
+}
+function patchItem(index, patch) {
+  if (value.value.options.kind !== "static") return;
+  const next = [...value.value.options.items];
+  const cur = next[index];
+  if (!cur) return;
+  next[index] = { ...cur, ...patch };
+  patchStatic({ items: next });
+}
+function addItem() {
+  if (value.value.options.kind !== "static") return;
+  patchStatic({ items: [...value.value.options.items, newItem()] });
+}
+function removeItem(index) {
+  if (value.value.options.kind !== "static") return;
+  const next = [...value.value.options.items];
+  next.splice(index, 1);
+  patchStatic({ items: next });
+}
+function setItemKind(index, kind) {
+  if (value.value.options.kind !== "static") return;
+  const cur = value.value.options.items[index];
+  if (!cur || cur.value.kind === kind) return;
+  patchItem(index, {
+    value: kind === "text" ? { kind: "text", value: "" } : { kind: "number", value: 0 }
+  });
+}
+function setItemTextValue(index, text) {
+  patchItem(index, { value: { kind: "text", value: text } });
+}
+function setItemNumberValue(index, n) {
+  patchItem(index, {
+    value: {
+      kind: "number",
+      value: typeof n === "number" && Number.isFinite(n) ? n : 0
+    }
+  });
+}
+function setItemLabel(index, label) {
+  patchItem(index, { label });
+}
+function setItemTooltip(index, tooltip) {
+  const isEmpty = !tooltip || tooltip.every((l) => l.message.trim().length === 0);
+  if (value.value.options.kind !== "static") return;
+  if (isEmpty) {
+    const cur = value.value.options.items[index];
+    if (!cur) return;
+    const { tooltip: _omit, ...rest } = cur;
+    const next = [...value.value.options.items];
+    next[index] = rest;
+    patchStatic({ items: next });
+  } else {
+    patchItem(index, { tooltip });
+  }
+}
+function keywordsText(item) {
+  return (item.keywords ?? []).join("\n");
+}
+function setItemKeywords(index, text) {
+  if (value.value.options.kind !== "static") return;
+  const list = text.split("\n").map((s) => s.trim()).filter((s) => s.length > 0);
+  const cur = value.value.options.items[index];
+  if (!cur) return;
+  const next = [...value.value.options.items];
+  if (list.length === 0) {
+    const { keywords: _omit, ...rest } = cur;
+    next[index] = rest;
+  } else {
+    next[index] = { ...cur, keywords: list };
+  }
+  patchStatic({ items: 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('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('placeholder')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('placeholder')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("placeholder") }}
+        </FieldLabel>
+        <Locale v-model="value.placeholder" />
+      </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>
+          <InputGroupNumberField
+            :model-value="value.size"
+            :disabled="value.grow"
+            :min="0"
+            @update:model-value="(v) => value = { ...value, size: v }"
+          />
+          <InputGroupAddon align="inline-end">
+            <InputGroupButton
+              :variant="value.grow ? 'primary' : 'ghost'"
+              size="xs"
+              @click="value = { ...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>
+    </div>
+
+    <Field orientation="vertical">
+      <FieldLabel class="text-xs text-zinc-500">
+        <template #tooltip>
+          <Markdown
+            source="选项可以是静态配置的固定列表，也可以由远程接口实时加载"
+            block
+            class="prose prose-sm prose-zinc"
+          />
+        </template>
+        选项来源
+      </FieldLabel>
+
+      <Tabs
+        :model-value="optionsKind"
+        @update:model-value="(v) => {
+  if (v === 'static' || v === 'remote') setKind(v);
+}"
+      >
+        <TabsList>
+          <TabsTrigger value="static">
+            静态
+          </TabsTrigger>
+          <TabsTrigger value="remote">
+            远程
+          </TabsTrigger>
+        </TabsList>
+        <TabsContent
+          value="static"
+          class="outline-none"
+        >
+          <div class="flex flex-col gap-3 pt-3">
+            <div
+              v-for="(item, index) in items"
+              :key="item.id"
+              data-slot="combobox-single-item"
+              class="relative pt-8 grid grid-cols-2 gap-3 rounded border border-zinc-200 bg-zinc-50/40 p-3"
+            >
+              <InputGroupButton
+                variant="destructive"
+                size="icon-xs"
+                data-slot="combobox-single-item-delete"
+                aria-label="删除选项"
+                class="absolute right-2 top-2 z-10"
+                @click="removeItem(index)"
+              >
+                <Icon icon="fluent:delete-20-regular" />
+              </InputGroupButton>
+
+              <Field orientation="vertical">
+                <FieldLabel class="text-xs text-zinc-500">
+                  <template
+                    v-if="itemFieldDescription('label')"
+                    #tooltip
+                  >
+                    <Markdown
+                      :source="itemFieldDescription('label')"
+                      block
+                      class="prose prose-sm prose-zinc"
+                    />
+                  </template>
+                  {{ itemFieldTitle("label") }}
+                </FieldLabel>
+                <Locale
+                  markdown
+                  translate-hint="combobox option label"
+                  :model-value="item.label"
+                  @update:model-value="(v) => setItemLabel(index, v)"
+                />
+              </Field>
+
+              <Field orientation="vertical">
+                <FieldLabel class="text-xs text-zinc-500">
+                  <template
+                    v-if="itemFieldDescription('value')"
+                    #tooltip
+                  >
+                    <Markdown
+                      :source="itemFieldDescription('value')"
+                      block
+                      class="prose prose-sm prose-zinc"
+                    />
+                  </template>
+                  {{ itemFieldTitle("value") }}
+                </FieldLabel>
+                <InputGroup>
+                  <InputGroupAddon align="inline-start">
+                    <DropdownMenu>
+                      <DropdownMenuTrigger as-child>
+                        <InputGroupButton
+                          size="icon-sm"
+                          as-child
+                        >
+                          <button
+                            type="button"
+                            data-slot="combobox-single-item-kind-trigger"
+                            class="text-zinc-500 transition-colors hover:text-zinc-700 [&_svg:not([class*='size-'])]:size-3.5"
+                            aria-label="切换值类型"
+                          >
+                            <Icon
+                              :icon="item.value.kind === 'number' ? 'fluent:number-symbol-20-regular' : 'fluent:textbox-20-regular'"
+                            />
+                          </button>
+                        </InputGroupButton>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="start">
+                        <DropdownMenuItem @select="setItemKind(index, 'text')">
+                          <Icon icon="fluent:textbox-20-regular" />
+                          <span>文本</span>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem @select="setItemKind(index, 'number')">
+                          <Icon icon="fluent:number-symbol-20-regular" />
+                          <span>数字</span>
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </InputGroupAddon>
+
+                  <InputGroupInput
+                    v-if="item.value.kind === 'text'"
+                    :model-value="item.value.value"
+                    placeholder="例：admin"
+                    @update:model-value="(v) => setItemTextValue(index, String(v ?? ''))"
+                  />
+                  <InputGroupNumberField
+                    v-else
+                    :model-value="item.value.value"
+                    @update:model-value="(v) => setItemNumberValue(index, v)"
+                  />
+                </InputGroup>
+              </Field>
+
+              <Field orientation="vertical">
+                <FieldLabel class="text-xs text-zinc-500">
+                  <template
+                    v-if="itemFieldDescription('tooltip')"
+                    #tooltip
+                  >
+                    <Markdown
+                      :source="itemFieldDescription('tooltip')"
+                      block
+                      class="prose prose-sm prose-zinc"
+                    />
+                  </template>
+                  {{ itemFieldTitle("tooltip") }}
+                </FieldLabel>
+                <Locale
+                  markdown
+                  translate-hint="combobox option tooltip"
+                  :model-value="item.tooltip"
+                  @update:model-value="(v) => setItemTooltip(index, v)"
+                />
+              </Field>
+
+              <Field orientation="vertical">
+                <FieldLabel class="text-xs text-zinc-500">
+                  <template
+                    v-if="itemFieldDescription('keywords')"
+                    #tooltip
+                  >
+                    <Markdown
+                      :source="itemFieldDescription('keywords')"
+                      block
+                      class="prose prose-sm prose-zinc"
+                    />
+                  </template>
+                  {{ itemFieldTitle("keywords") }}
+                </FieldLabel>
+                <Textarea
+                  data-slot="combobox-single-item-keywords"
+                  :model-value="keywordsText(item)"
+                  placeholder="每行一个关键词"
+                  :rows="2"
+                  @update:model-value="(v) => setItemKeywords(index, String(v ?? ''))"
+                />
+              </Field>
+            </div>
+
+            <Button
+              type="button"
+              data-slot="combobox-single-add-item"
+              class="w-full justify-center"
+              @click="addItem"
+            >
+              <Icon icon="fluent:add-20-regular" />
+              <span>增加选项</span>
+            </Button>
+          </div>
+        </TabsContent>
+        <TabsContent
+          value="remote"
+          class="outline-none"
+        >
+          <div class="grid grid-cols-2 gap-x-6 gap-y-4 pt-3">
+            <Field orientation="vertical">
+              <FieldLabel class="text-xs text-zinc-500">
+                <template
+                  v-if="remoteFieldDescription('request')"
+                  #tooltip
+                >
+                  <Markdown
+                    :source="remoteFieldDescription('request')"
+                    block
+                    class="prose prose-sm prose-zinc"
+                  />
+                </template>
+                {{ remoteFieldTitle("request") }}
+              </FieldLabel>
+              <ExpressionEditor
+                v-model="requestModel"
+                placeholder="如 http.get('/api/roles')"
+                result-type="HttpRequest"
+                :extra-vars="ROW_VARS"
+                multiline
+              />
+            </Field>
+            <Field orientation="vertical">
+              <FieldLabel class="text-xs text-zinc-500">
+                <template
+                  v-if="remoteFieldDescription('options')"
+                  #tooltip
+                >
+                  <Markdown
+                    :source="remoteFieldDescription('options')"
+                    block
+                    class="prose prose-sm prose-zinc"
+                  />
+                </template>
+                {{ remoteFieldTitle("options") }}
+              </FieldLabel>
+              <ExpressionEditor
+                v-model="optionsExprModel"
+                placeholder="如 json.data"
+                result-type="dyn"
+                :extra-vars="ROW_JSON_VARS"
+                multiline
+              />
+            </Field>
+            <Field orientation="vertical">
+              <FieldLabel class="text-xs text-zinc-500">
+                <template
+                  v-if="remoteFieldDescription('optionValue')"
+                  #tooltip
+                >
+                  <Markdown
+                    :source="remoteFieldDescription('optionValue')"
+                    block
+                    class="prose prose-sm prose-zinc"
+                  />
+                </template>
+                {{ remoteFieldTitle("optionValue") }}
+              </FieldLabel>
+              <ExpressionEditor
+                v-model="optionValueModel"
+                placeholder="如 option.id"
+                result-type="dyn"
+                :extra-vars="ROW_OPTION_VARS"
+              />
+            </Field>
+            <Field orientation="vertical">
+              <FieldLabel class="text-xs text-zinc-500">
+                <template
+                  v-if="remoteFieldDescription('optionLabel')"
+                  #tooltip
+                >
+                  <Markdown
+                    :source="remoteFieldDescription('optionLabel')"
+                    block
+                    class="prose prose-sm prose-zinc"
+                  />
+                </template>
+                {{ remoteFieldTitle("optionLabel") }}
+              </FieldLabel>
+              <Locale
+                :model-value="optionLabelModel"
+                markdown
+                translate-hint="combobox option label"
+                @update:model-value="(v) => optionLabelModel = v"
+              />
+            </Field>
+            <Field orientation="vertical">
+              <FieldLabel class="text-xs text-zinc-500">
+                <template
+                  v-if="remoteFieldDescription('optionKeywords')"
+                  #tooltip
+                >
+                  <Markdown
+                    :source="remoteFieldDescription('optionKeywords')"
+                    block
+                    class="prose prose-sm prose-zinc"
+                  />
+                </template>
+                {{ remoteFieldTitle("optionKeywords") }}
+              </FieldLabel>
+              <ExpressionEditor
+                v-model="optionKeywordsModel"
+                placeholder="如 option.aliases"
+                result-type="dyn"
+                :extra-vars="ROW_OPTION_VARS"
+              />
+            </Field>
+          </div>
+        </TabsContent>
+      </Tabs>
+    </Field>
+
+    <Field orientation="vertical">
+      <FieldLabel class="text-xs text-zinc-500">
+        <template #tooltip>
+          <Markdown
+            source="**绑定**：单元格行内可编辑，读写同一 dot-prop 路径；**远程**：只读回显行数据，选择后发起请求写入服务端"
+            block
+            class="prose prose-sm prose-zinc"
+          />
+        </template>
+        写入方式
+      </FieldLabel>
+
+      <Tabs
+        :model-value="writeKind"
+        @update:model-value="(v) => {
+  if (v === 'binding' || v === 'remote') setWriteKind(v);
+}"
+      >
+        <TabsList>
+          <TabsTrigger value="binding">
+            绑定
+          </TabsTrigger>
+          <TabsTrigger value="remote">
+            远程
+          </TabsTrigger>
+        </TabsList>
+        <TabsContent
+          value="binding"
+          class="outline-none"
+        >
+          <div class="pt-3">
+            <Field orientation="vertical">
+              <FieldLabel class="text-xs text-zinc-500">
+                <template
+                  v-if="writeFieldDescription('binding')"
+                  #tooltip
+                >
+                  <Markdown
+                    :source="writeFieldDescription('binding')"
+                    block
+                    class="prose prose-sm prose-zinc"
+                  />
+                </template>
+                {{ writeFieldTitle("binding") }}
+              </FieldLabel>
+              <InputGroup>
+                <InputGroupInput
+                  v-model="bindingModel"
+                  placeholder="例：role"
+                  class="font-mono"
+                />
+              </InputGroup>
+            </Field>
+          </div>
+        </TabsContent>
+        <TabsContent
+          value="remote"
+          class="outline-none"
+        >
+          <div class="grid grid-cols-2 gap-x-6 gap-y-4 pt-3">
+            <Field orientation="vertical">
+              <FieldLabel class="text-xs text-zinc-500">
+                <template
+                  v-if="writeFieldDescription('accessor')"
+                  #tooltip
+                >
+                  <Markdown
+                    :source="writeFieldDescription('accessor')"
+                    block
+                    class="prose prose-sm prose-zinc"
+                  />
+                </template>
+                {{ writeFieldTitle("accessor") }}
+              </FieldLabel>
+              <ExpressionEditor
+                v-model="accessorModel"
+                placeholder="如 row.role"
+                result-type="dyn"
+                :extra-vars="ROW_VARS"
+              />
+            </Field>
+            <Field orientation="vertical">
+              <FieldLabel class="text-xs text-zinc-500">
+                <template
+                  v-if="writeFieldDescription('onChange')"
+                  #tooltip
+                >
+                  <Markdown
+                    :source="writeFieldDescription('onChange')"
+                    block
+                    class="prose prose-sm prose-zinc"
+                  />
+                </template>
+                {{ writeFieldTitle("onChange") }}
+              </FieldLabel>
+              <ExpressionEditor
+                v-model="onChangeModel"
+                placeholder="如 http.patch('/api/items/' + row.id).body({ role: value })"
+                result-type="HttpRequest"
+                :extra-vars="ROW_VALUE_VARS"
+                multiline
+              />
+            </Field>
+            <Field orientation="vertical">
+              <FieldLabel class="text-xs text-zinc-500">
+                <template
+                  v-if="writeFieldDescription('successMessage')"
+                  #tooltip
+                >
+                  <Markdown
+                    :source="writeFieldDescription('successMessage')"
+                    block
+                    class="prose prose-sm prose-zinc"
+                  />
+                </template>
+                {{ writeFieldTitle("successMessage") }}
+              </FieldLabel>
+              <ExpressionEditor
+                v-model="successMessageModel"
+                placeholder="如 '已更新'"
+                result-type="string"
+                :extra-vars="JSON_VARS"
+              />
+            </Field>
+            <Field orientation="vertical">
+              <FieldLabel class="text-xs text-zinc-500">
+                <template
+                  v-if="writeFieldDescription('triggers')"
+                  #tooltip
+                >
+                  <Markdown
+                    :source="writeFieldDescription('triggers')"
+                    block
+                    class="prose prose-sm prose-zinc"
+                  />
+                </template>
+                {{ writeFieldTitle("triggers") }}
+              </FieldLabel>
+              <TriggersField
+                :triggers="triggers"
+                @update:triggers="updateTriggers"
+              />
+            </Field>
+          </div>
+        </TabsContent>
+      </Tabs>
+    </Field>
+
+    <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('hidden')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('hidden')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("hidden") }}
+        </FieldLabel>
+        <ExpressionEditor
+          v-model="hiddenModel"
+          placeholder="例：row.archived"
+          result-type="bool"
+          :extra-vars="ROW_VARS"
+        />
+      </Field>
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template
+            v-if="fieldDescription('disabled')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('disabled')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("disabled") }}
+        </FieldLabel>
+        <ExpressionEditor
+          v-model="disabledModel"
+          placeholder="例：row.locked"
+          result-type="bool"
+          :extra-vars="ROW_VARS"
+        />
+      </Field>
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template
+            v-if="fieldDescription('readonly')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('readonly')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("readonly") }}
+        </FieldLabel>
+        <ExpressionEditor
+          v-model="readonlyModel"
+          placeholder="例：row.id == null"
+          result-type="bool"
+          :extra-vars="ROW_VARS"
+        />
+      </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 = { ...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>