@shwfed/config 2.0.0 → 2.0.2

package/dist/runtime/components/form/fields/2026-04-27/com.shwfed.form.field.datetimerange/config.vue

@@ -0,0 +1,758 @@
+<script setup>
+import { Icon } from "@iconify/vue";
+import { computed } from "vue";
+import { format as formatDate } from "date-fns";
+import { Button } from "../../../../ui/button";
+import { ExpressionEditor } from "../../../../ui/expression-editor";
+import DerivedValueEditor from "../../../DerivedValueEditor.vue";
+import { Field, FieldLabel } from "../../../../ui/field";
+import { IconPicker } from "../../../../ui/icon-picker";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupNumberField, InputGroupText } from "../../../../ui/input-group";
+import { Locale as LocaleField } from "../../../../ui/locale";
+import { Markdown } from "../../../../ui/markdown";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "../../../../ui/select";
+import { getStructFieldDescription, getStructFieldTitle } from "../../../schema";
+import { DEFAULT_FIELD_ORIENTATION, FIELD_ORIENTATION_OPTIONS } from "../../../utils/common";
+import { HOUR_CYCLE_OPTIONS, presetSchema, schema, TIME_GRANULARITY_OPTIONS } from "./schema";
+defineOptions({ name: "ShwfedDateTimeRangeFieldConfig" });
+const value = defineModel({ type: null, ...{ required: true } });
+const fieldSchema = schema(() => {
+});
+const fieldTitle = (f) => getStructFieldTitle(fieldSchema, f) ?? f;
+const fieldDescription = (f) => getStructFieldDescription(fieldSchema, f);
+const presetFieldSchema = presetSchema(() => {
+});
+const presetFieldTitle = (f) => getStructFieldTitle(presetFieldSchema, f) ?? f;
+const presetFieldDescription = (f) => getStructFieldDescription(presetFieldSchema, f);
+const presets = computed(() => value.value.presets ?? []);
+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 newPreset() {
+  return {
+    id: newId(),
+    label: [{ locale: "zh", message: "" }],
+    start: "",
+    end: ""
+  };
+}
+function patchPreset(index, patch) {
+  const next = [...value.value.presets ?? []];
+  const cur = next[index];
+  if (!cur) return;
+  next[index] = { ...cur, ...patch };
+  value.value = { ...value.value, presets: next };
+}
+function addPreset() {
+  value.value = { ...value.value, presets: [...value.value.presets ?? [], newPreset()] };
+}
+function removePreset(index) {
+  const next = [...value.value.presets ?? []];
+  next.splice(index, 1);
+  value.value = { ...value.value, presets: next };
+}
+function setPresetLabel(index, label) {
+  patchPreset(index, { label });
+}
+function setPresetStart(index, expr) {
+  patchPreset(index, { start: expr });
+}
+function setPresetEnd(index, expr) {
+  patchPreset(index, { end: expr });
+}
+const bindingMode = computed(
+  () => Array.isArray(value.value.binding) ? "split" : "single"
+);
+const singlePathText = computed({
+  get: () => typeof value.value.binding === "string" ? value.value.binding : "",
+  set: (next) => {
+    const trimmed = next.trim();
+    if (trimmed.length === 0) {
+      const { binding: _omit, ...rest } = value.value;
+      value.value = rest;
+    } else {
+      value.value = { ...value.value, binding: trimmed };
+    }
+  }
+});
+const splitStartText = computed(
+  () => Array.isArray(value.value.binding) ? value.value.binding[0] : ""
+);
+const splitEndText = computed(
+  () => Array.isArray(value.value.binding) ? value.value.binding[1] : ""
+);
+function setSplitStart(next) {
+  const cur = Array.isArray(value.value.binding) ? value.value.binding : ["", ""];
+  value.value = { ...value.value, binding: [next.trim(), cur[1]] };
+}
+function setSplitEnd(next) {
+  const cur = Array.isArray(value.value.binding) ? value.value.binding : ["", ""];
+  value.value = { ...value.value, binding: [cur[0], next.trim()] };
+}
+function toggleBindingMode() {
+  if (bindingMode.value === "single") {
+    value.value = { ...value.value, binding: ["", ""] };
+  } else {
+    const { binding: _omit, ...rest } = value.value;
+    value.value = rest;
+  }
+}
+const formatText = computed({
+  get: () => value.value.format ?? "",
+  set: (next) => {
+    const trimmed = next.trim();
+    if (trimmed.length === 0) {
+      const { format: _omit, ...rest } = value.value;
+      value.value = rest;
+    } else {
+      value.value = { ...value.value, format: trimmed };
+    }
+  }
+});
+const valueFormatText = computed({
+  get: () => value.value.valueFormat ?? "",
+  set: (next) => {
+    const trimmed = next.trim();
+    if (trimmed.length === 0) {
+      const { valueFormat: _omit, ...rest } = value.value;
+      value.value = rest;
+    } else {
+      value.value = { ...value.value, valueFormat: trimmed };
+    }
+  }
+});
+function setSeparatorIcon(next) {
+  const trimmed = next.trim();
+  if (trimmed.length === 0) {
+    const { rangeSeparatorIcon: _omit, ...rest } = value.value;
+    value.value = rest;
+  } else {
+    value.value = { ...value.value, rangeSeparatorIcon: trimmed };
+  }
+}
+function setNumberOfMonths(next) {
+  if (next == null || !Number.isInteger(next) || next <= 0) {
+    const { numberOfMonths: _omit, ...rest } = value.value;
+    value.value = rest;
+    return;
+  }
+  value.value = { ...value.value, numberOfMonths: next };
+}
+const timeGranularity = computed({
+  get: () => value.value.timeGranularity ?? "second",
+  set: (next) => {
+    if (next === "second") {
+      const { timeGranularity: _omit, ...rest } = value.value;
+      value.value = rest;
+    } else {
+      value.value = { ...value.value, timeGranularity: next };
+    }
+  }
+});
+const hourCycle = computed({
+  get: () => value.value.hourCycle ?? 24,
+  set: (next) => {
+    if (next === 24) {
+      const { hourCycle: _omit, ...rest } = value.value;
+      value.value = rest;
+    } else {
+      value.value = { ...value.value, hourCycle: next };
+    }
+  }
+});
+function previewFormat(fmt) {
+  if (!fmt) return "";
+  try {
+    return formatDate(/* @__PURE__ */ new Date(), fmt);
+  } catch {
+    return "(\u65E0\u6548\u683C\u5F0F)";
+  }
+}
+const formatExample = computed(() => previewFormat(value.value.format ?? ""));
+const valueFormatExample = computed(() => previewFormat(value.value.valueFormat ?? ""));
+</script>
+
+<template>
+  <div class="flex flex-col gap-3">
+    <div class="grid grid-cols-2 gap-3">
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template
+            v-if="fieldDescription('displayName')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('displayName')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("displayName") }}
+        </FieldLabel>
+        <InputGroup>
+          <InputGroupInput
+            :model-value="value.displayName ?? ''"
+            placeholder="例：事件区间"
+            @update:model-value="(v) => {
+  const s = String(v ?? '');
+  value = { ...value, displayName: s.length > 0 ? s : void 0 };
+}"
+          />
+        </InputGroup>
+      </Field>
+
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template #tooltip>
+            <Markdown
+              source="写入表单状态的嵌套键路径，使用 `.` 分隔。单路径模式写入 `[start, end]` 字符串数组；拆分模式分别写入起始与结束两端"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("binding") }}
+        </FieldLabel>
+        <template v-if="bindingMode === 'single'">
+          <InputGroup>
+            <InputGroupInput
+              v-model="singlePathText"
+              placeholder="例：event.range"
+              class="font-mono"
+            />
+            <InputGroupAddon align="inline-end">
+              <InputGroupButton
+                size="icon-xs"
+                aria-label="拆分起止绑定路径"
+                @click="toggleBindingMode"
+              >
+                <Icon icon="fluent:split-horizontal-20-regular" />
+              </InputGroupButton>
+            </InputGroupAddon>
+          </InputGroup>
+        </template>
+        <template v-else>
+          <div class="grid grid-cols-2 gap-2">
+            <InputGroup>
+              <InputGroupAddon align="inline-start">
+                <InputGroupText class="text-xs text-zinc-400">
+                  起
+                </InputGroupText>
+              </InputGroupAddon>
+              <InputGroupInput
+                :model-value="splitStartText"
+                placeholder="例：event.start"
+                class="font-mono"
+                @update:model-value="(v) => setSplitStart(String(v ?? ''))"
+              />
+            </InputGroup>
+            <InputGroup>
+              <InputGroupAddon align="inline-start">
+                <InputGroupText class="text-xs text-zinc-400">
+                  止
+                </InputGroupText>
+              </InputGroupAddon>
+              <InputGroupInput
+                :model-value="splitEndText"
+                placeholder="例：event.end"
+                class="font-mono"
+                @update:model-value="(v) => setSplitEnd(String(v ?? ''))"
+              />
+              <InputGroupAddon align="inline-end">
+                <InputGroupButton
+                  size="icon-xs"
+                  aria-label="合并起止绑定路径"
+                  @click="toggleBindingMode"
+                >
+                  <Icon icon="fluent:merge-vertical-20-regular" />
+                </InputGroupButton>
+              </InputGroupAddon>
+            </InputGroup>
+          </div>
+        </template>
+      </Field>
+    </div>
+
+    <div class="grid grid-cols-2 gap-3">
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template
+            v-if="fieldDescription('label')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('label')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("label") }}
+        </FieldLabel>
+        <LocaleField
+          :model-value="value.label"
+          @update:model-value="(v) => value = { ...value, label: v }"
+        />
+      </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>
+        <LocaleField
+          markdown
+          :model-value="value.tooltip"
+          @update:model-value="(v) => value = { ...value, tooltip: v }"
+        />
+      </Field>
+    </div>
+
+    <div class="grid grid-cols-2 gap-3">
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template
+            v-if="fieldDescription('startPlaceholder')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('startPlaceholder')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("startPlaceholder") }}
+        </FieldLabel>
+        <LocaleField
+          :model-value="value.startPlaceholder"
+          @update:model-value="(v) => value = { ...value, startPlaceholder: v }"
+        />
+      </Field>
+
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template
+            v-if="fieldDescription('endPlaceholder')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('endPlaceholder')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("endPlaceholder") }}
+        </FieldLabel>
+        <LocaleField
+          :model-value="value.endPlaceholder"
+          @update:model-value="(v) => value = { ...value, endPlaceholder: v }"
+        />
+      </Field>
+    </div>
+
+    <div class="grid grid-cols-3 gap-3">
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template #tooltip>
+            <Markdown
+              :source="fieldDescription('format') ?? '\u8F93\u5165\u6846\u4E2D\u5C55\u793A\u65E5\u671F\u65F6\u95F4\u7684 `date-fns` \u683C\u5F0F\u4E32'"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("format") }}
+        </FieldLabel>
+        <InputGroup>
+          <InputGroupInput
+            v-model="formatText"
+            placeholder="例：yyyy-MM-dd HH:mm:ss"
+            class="font-mono"
+          />
+          <InputGroupAddon
+            v-if="formatExample"
+            align="inline-end"
+          >
+            <InputGroupText class="text-xs text-zinc-400">
+              {{ formatExample }}
+            </InputGroupText>
+          </InputGroupAddon>
+        </InputGroup>
+      </Field>
+
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template #tooltip>
+            <Markdown
+              :source="fieldDescription('valueFormat') ?? '\u5199\u5165\u8868\u5355\u72B6\u6001\u7684 `date-fns` \u683C\u5F0F\u4E32'"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("valueFormat") }}
+        </FieldLabel>
+        <InputGroup>
+          <InputGroupInput
+            v-model="valueFormatText"
+            placeholder="例：yyyy-MM-dd HH:mm:ss"
+            class="font-mono"
+          />
+          <InputGroupAddon
+            v-if="valueFormatExample"
+            align="inline-end"
+          >
+            <InputGroupText class="text-xs text-zinc-400">
+              {{ valueFormatExample }}
+            </InputGroupText>
+          </InputGroupAddon>
+        </InputGroup>
+      </Field>
+    </div>
+
+    <Field orientation="vertical">
+      <FieldLabel class="text-xs text-zinc-500">
+        <template
+          v-if="fieldDescription('presets')"
+          #tooltip
+        >
+          <Markdown
+            :source="fieldDescription('presets')"
+            block
+            class="prose prose-sm prose-zinc"
+          />
+        </template>
+        {{ fieldTitle("presets") }}
+      </FieldLabel>
+
+      <div class="flex flex-col gap-3">
+        <div
+          v-for="(preset, index) in presets"
+          :key="preset.id"
+          data-slot="datetimerange-field-preset"
+          class="relative pt-8 grid grid-cols-3 gap-3 rounded border border-zinc-200 bg-zinc-50/40 p-3"
+        >
+          <InputGroupButton
+            variant="destructive"
+            size="icon-xs"
+            data-slot="datetimerange-field-preset-delete"
+            aria-label="删除预设"
+            class="absolute right-2 top-2 z-10"
+            @click="removePreset(index)"
+          >
+            <Icon icon="fluent:delete-20-regular" />
+          </InputGroupButton>
+
+          <Field orientation="vertical">
+            <FieldLabel class="text-xs text-zinc-500">
+              <template
+                v-if="presetFieldDescription('label')"
+                #tooltip
+              >
+                <Markdown
+                  :source="presetFieldDescription('label')"
+                  block
+                  class="prose prose-sm prose-zinc"
+                />
+              </template>
+              {{ presetFieldTitle("label") }}
+            </FieldLabel>
+            <LocaleField
+              translate-hint="datetime range field preset label"
+              :model-value="preset.label"
+              @update:model-value="(v) => setPresetLabel(index, v)"
+            />
+          </Field>
+
+          <Field orientation="vertical">
+            <FieldLabel class="text-xs text-zinc-500">
+              <template
+                v-if="presetFieldDescription('start')"
+                #tooltip
+              >
+                <Markdown
+                  :source="presetFieldDescription('start')"
+                  block
+                  class="prose prose-sm prose-zinc"
+                />
+              </template>
+              {{ presetFieldTitle("start") }}
+            </FieldLabel>
+            <ExpressionEditor
+              :model-value="preset.start"
+              placeholder="例：now.offset(-1, &quot;hours&quot;)"
+              result-type="Date"
+              class="min-h-10"
+              @update:model-value="(v) => setPresetStart(index, v)"
+            />
+          </Field>
+
+          <Field orientation="vertical">
+            <FieldLabel class="text-xs text-zinc-500">
+              <template
+                v-if="presetFieldDescription('end')"
+                #tooltip
+              >
+                <Markdown
+                  :source="presetFieldDescription('end')"
+                  block
+                  class="prose prose-sm prose-zinc"
+                />
+              </template>
+              {{ presetFieldTitle("end") }}
+            </FieldLabel>
+            <ExpressionEditor
+              :model-value="preset.end"
+              placeholder="例：now"
+              result-type="Date"
+              class="min-h-10"
+              @update:model-value="(v) => setPresetEnd(index, v)"
+            />
+          </Field>
+        </div>
+
+        <Button
+          type="button"
+          data-slot="datetimerange-field-add-preset"
+          class="w-full justify-center"
+          @click="addPreset"
+        >
+          <Icon icon="fluent:add-20-regular" />
+          <span>增加快捷选项</span>
+        </Button>
+      </div>
+    </Field>
+
+    <div class="grid grid-cols-3 gap-3">
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template
+            v-if="fieldDescription('orientation')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('orientation')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("orientation") }}
+        </FieldLabel>
+        <Select
+          :model-value="value.orientation ?? DEFAULT_FIELD_ORIENTATION"
+          @update:model-value="(v) => value = { ...value, orientation: v }"
+        >
+          <SelectTrigger class="w-full">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem
+              v-for="opt in FIELD_ORIENTATION_OPTIONS"
+              :key="opt.value"
+              :value="opt.value"
+            >
+              {{ opt.label }}
+            </SelectItem>
+          </SelectContent>
+        </Select>
+      </Field>
+
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template #tooltip>
+            <Markdown
+              :source="fieldDescription('rangeSeparatorIcon') ?? '\u8303\u56F4\u4E24\u7AEF\u4E4B\u95F4\u5206\u9694\u56FE\u6807\u7684 Iconify \u540D\u79F0'"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("rangeSeparatorIcon") }}
+        </FieldLabel>
+        <IconPicker
+          :model-value="value.rangeSeparatorIcon ?? ''"
+          placeholder="例：lucide:arrow-right"
+          @update:model-value="setSeparatorIcon"
+        />
+      </Field>
+
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template #tooltip>
+            <Markdown
+              :source="fieldDescription('numberOfMonths') ?? '\u65E5\u5386\u9762\u677F\u4E2D\u5E76\u6392\u663E\u793A\u7684\u6708\u4EFD\u6570'"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("numberOfMonths") }}
+        </FieldLabel>
+        <InputGroup>
+          <InputGroupNumberField
+            :model-value="value.numberOfMonths"
+            :min="1"
+            :step="1"
+            @update:model-value="setNumberOfMonths"
+          />
+        </InputGroup>
+      </Field>
+    </div>
+
+    <div class="grid grid-cols-2 gap-3">
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template #tooltip>
+            <Markdown
+              :source="fieldDescription('timeGranularity') ?? '\u53EF\u7F16\u8F91\u5230\u7684\u6700\u5C0F\u65F6\u95F4\u5355\u4F4D'"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("timeGranularity") }}
+        </FieldLabel>
+        <Select
+          :model-value="timeGranularity"
+          @update:model-value="(v) => timeGranularity = v"
+        >
+          <SelectTrigger class="w-full">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem
+              v-for="opt in TIME_GRANULARITY_OPTIONS"
+              :key="opt.value"
+              :value="opt.value"
+            >
+              {{ opt.label }}
+            </SelectItem>
+          </SelectContent>
+        </Select>
+      </Field>
+
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template #tooltip>
+            <Markdown
+              :source="fieldDescription('hourCycle') ?? '12 \u5C0F\u65F6\u5236\u6216 24 \u5C0F\u65F6\u5236'"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("hourCycle") }}
+        </FieldLabel>
+        <Select
+          :model-value="String(hourCycle)"
+          @update:model-value="(v) => hourCycle = Number(v)"
+        >
+          <SelectTrigger class="w-full">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem
+              v-for="opt in HOUR_CYCLE_OPTIONS"
+              :key="opt.value"
+              :value="String(opt.value)"
+            >
+              {{ opt.label }}
+            </SelectItem>
+          </SelectContent>
+        </Select>
+      </Field>
+    </div>
+
+    <div class="grid grid-cols-3 gap-3">
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template #tooltip>
+            <Markdown
+              :source="fieldDescription('hidden') ?? '\u8FD4\u56DE `true` \u65F6\u5B57\u6BB5\u5728\u6240\u6709\u5E03\u5C40\u4E2D\u90FD\u4E0D\u6E32\u67D3'"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("hidden") }}
+        </FieldLabel>
+        <ExpressionEditor
+          :model-value="value.hidden ?? ''"
+          placeholder="例：form.role == 'guest'"
+          result-type="bool"
+          class="min-h-10"
+          @update:model-value="(v) => value = { ...value, hidden: v.length > 0 ? v : void 0 }"
+        />
+      </Field>
+
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template #tooltip>
+            <Markdown
+              :source="fieldDescription('disabled') ?? '\u8FD4\u56DE `true` \u65F6\u8F93\u5165\u6846\u4ECD\u7136\u6E32\u67D3\u4F46\u4E0D\u53EF\u7F16\u8F91'"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("disabled") }}
+        </FieldLabel>
+        <ExpressionEditor
+          :model-value="value.disabled ?? ''"
+          placeholder="例：form.status == 'locked'"
+          result-type="bool"
+          class="min-h-10"
+          @update:model-value="(v) => value = { ...value, disabled: v.length > 0 ? v : void 0 }"
+        />
+      </Field>
+
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template #tooltip>
+            <Markdown
+              :source="fieldDescription('readonly') ?? '\u8FD4\u56DE `true` \u65F6\u4EC5\u4EE5\u7EAF\u6587\u672C\u5C55\u793A\u5F53\u524D\u503C'"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("readonly") }}
+        </FieldLabel>
+        <ExpressionEditor
+          :model-value="value.readonly ?? ''"
+          placeholder="例：form.id != null"
+          result-type="bool"
+          class="min-h-10"
+          @update:model-value="(v) => value = { ...value, readonly: v.length > 0 ? v : void 0 }"
+        />
+      </Field>
+    </div>
+
+    <Field orientation="vertical">
+      <FieldLabel class="text-xs text-zinc-500">
+        <template #tooltip>
+          <Markdown
+            :source="fieldDescription('derived')"
+            block
+            class="prose prose-sm prose-zinc"
+          />
+        </template>
+        {{ fieldTitle("derived") }}
+      </FieldLabel>
+      <DerivedValueEditor
+        :model-value="value.derived"
+        result-type="dyn"
+        placeholder="例：[form.from, form.to]"
+        @update:model-value="(v) => value = { ...value, derived: v }"
+      />
+    </Field>
+  </div>
+</template>