@shwfed/config 1.1.5 → 2.0.0

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

@@ -1,653 +0,0 @@
-<script setup>
-import { Icon } from "@iconify/vue";
-import { format as formatDate } from "date-fns";
-import { computed } from "vue";
-import { Button } from "../../../../ui/button";
-import { ExpressionEditor } from "../../../../ui/expression-editor";
-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 { presetSchema, schema } from "./schema";
-defineOptions({ name: "ShwfedDateRangeFieldConfig" });
-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 };
-}
-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
-          :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\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"
-            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"
-            class="font-mono"
-          />
-          <InputGroupAddon
-            v-if="valueFormatExample"
-            align="inline-end"
-          >
-            <InputGroupText class="text-xs text-zinc-400">
-              {{ valueFormatExample }}
-            </InputGroupText>
-          </InputGroupAddon>
-        </InputGroup>
-      </Field>
-    </div>
-
-    <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>
-
-    <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="daterange-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="daterange-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="date 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(-7, &quot;days&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="daterange-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 #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>
-  </div>
-</template>