@shwfed/config 2.10.3 → 2.10.5

package/dist/runtime/components/table/columns/2026-06-17/com.shwfed.table.column.date-input/config.vue

@@ -0,0 +1,543 @@
+<script setup>
+import { computed } from "vue";
+import { Icon } from "@iconify/vue";
+import { format as formatDate } from "date-fns";
+import { ExpressionEditor } from "../../../../ui/expression-editor";
+import { Separator } from "../../../../ui/separator";
+import { Button } from "../../../../ui/button";
+import { Field, FieldLabel } from "../../../../ui/field";
+import { Locale } from "../../../../ui/locale";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupNumberField,
+  InputGroupText
+} from "../../../../ui/input-group";
+import { getStructFieldDescription, getStructFieldTitle } from "../../../utils/schema-meta";
+import { Markdown } from "../../../../ui/markdown";
+import DerivedValueEditor from "../../../../form/DerivedValueEditor.vue";
+import { presetSchema, schema } from "./schema";
+defineOptions({ name: "ShwfedTableDateInputRendererConfig" });
+const value = defineModel({ type: Object, ...{ required: true } });
+const fieldSchema = schema(() => {
+});
+const fieldTitle = (field) => getStructFieldTitle(fieldSchema, field) ?? field;
+const fieldDescription = (field) => getStructFieldDescription(fieldSchema, field);
+const presetFieldSchema = presetSchema(() => {
+});
+const presetFieldTitle = (field) => getStructFieldTitle(presetFieldSchema, field) ?? field;
+const presetFieldDescription = (field) => getStructFieldDescription(presetFieldSchema, field);
+const ROW_VARS = {
+  row: { type: "dyn", label: "\u5F53\u524D\u884C\u6570\u636E" },
+  index: { type: "number", label: "\u884C\u7D22\u5F15" }
+};
+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: "" }], value: "" };
+}
+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 setPresetValue(index, expr) {
+  patchPreset(index, { value: expr });
+}
+const bindingText = computed({
+  get: () => value.value.binding ?? "",
+  set: (v) => {
+    const trimmed = v.trim();
+    if (trimmed === "") {
+      const { binding: _drop, ...rest } = value.value;
+      value.value = rest;
+    } else {
+      value.value = { ...value.value, binding: trimmed };
+    }
+  }
+});
+const formatText = computed({
+  get: () => value.value.format ?? "",
+  set: (v) => {
+    const trimmed = v.trim();
+    if (trimmed === "") {
+      const { format: _drop, ...rest } = value.value;
+      value.value = rest;
+    } else {
+      value.value = { ...value.value, format: trimmed };
+    }
+  }
+});
+const valueFormatText = computed({
+  get: () => value.value.valueFormat ?? "",
+  set: (v) => {
+    const trimmed = v.trim();
+    if (trimmed === "") {
+      const { valueFormat: _drop, ...rest } = value.value;
+      value.value = rest;
+    } else {
+      value.value = { ...value.value, valueFormat: trimmed };
+    }
+  }
+});
+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 ?? ""));
+const hiddenModel = computed({
+  get: () => value.value.hidden ?? "",
+  set: (v) => {
+    if (v === "") {
+      const { hidden: _drop, ...rest } = value.value;
+      value.value = rest;
+    } else {
+      value.value = { ...value.value, hidden: v };
+    }
+  }
+});
+const disabledModel = computed({
+  get: () => value.value.disabled ?? "",
+  set: (v) => {
+    if (v === "") {
+      const { disabled: _drop, ...rest } = value.value;
+      value.value = rest;
+    } else {
+      value.value = { ...value.value, disabled: v };
+    }
+  }
+});
+const readonlyModel = computed({
+  get: () => value.value.readonly ?? "",
+  set: (v) => {
+    if (v === "") {
+      const { readonly: _drop, ...rest } = value.value;
+      value.value = rest;
+    } else {
+      value.value = { ...value.value, readonly: v };
+    }
+  }
+});
+const derivedModel = computed({
+  get: () => value.value.derived,
+  set: (v) => {
+    if (v == null) {
+      const { derived: _drop, ...rest } = value.value;
+      value.value = rest;
+    } else {
+      value.value = { ...value.value, derived: v };
+    }
+  }
+});
+</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
+          :model-value="value.title"
+          @update:model-value="(v) => value = { ...value, title: 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>
+        <Locale
+          :model-value="value.tooltip"
+          markdown
+          @update:model-value="(v) => value = { ...value, tooltip: v }"
+        />
+      </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('binding')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('binding')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("binding") }}
+        </FieldLabel>
+        <InputGroup>
+          <InputGroupInput
+            v-model="bindingText"
+            placeholder="例：joinDate"
+            class="font-mono"
+          />
+        </InputGroup>
+      </Field>
+      <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
+          :model-value="value.placeholder"
+          @update:model-value="(v) => value = { ...value, placeholder: v }"
+        />
+      </Field>
+      <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\u884C\u6570\u636E\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>
+      <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>
+      <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>
+      <Field
+        orientation="vertical"
+        class="col-span-2"
+      >
+        <FieldLabel class="text-xs text-zinc-500">
+          <template
+            v-if="fieldDescription('derived')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('derived')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("derived") }}
+        </FieldLabel>
+        <DerivedValueEditor
+          v-model="derivedModel"
+          result-type="string"
+          placeholder="例：row.startDate"
+        />
+      </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="date-input-preset"
+          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="date-input-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>
+            <Locale
+              :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('value')"
+                #tooltip
+              >
+                <Markdown
+                  :source="presetFieldDescription('value')"
+                  block
+                  class="prose prose-sm prose-zinc"
+                />
+              </template>
+              {{ presetFieldTitle("value") }}
+            </FieldLabel>
+            <ExpressionEditor
+              :model-value="preset.value"
+              placeholder="例：now.offset(-7, &quot;days&quot;)"
+              result-type="Date"
+              class="min-h-10"
+              :extra-vars="ROW_VARS"
+              @update:model-value="(v) => setPresetValue(index, v)"
+            />
+          </Field>
+        </div>
+        <Button
+          type="button"
+          data-slot="date-input-add-preset"
+          class="w-full justify-center"
+          @click="addPreset"
+        >
+          <Icon icon="fluent:add-20-regular" />
+          <span>增加快捷选项</span>
+        </Button>
+      </div>
+    </Field>
+    <Separator />
+    <div class="flex flex-wrap gap-x-8 gap-y-3">
+      <Field
+        orientation="vertical"
+        class="w-full max-w-xs"
+      >
+        <FieldLabel class="text-xs text-zinc-500">
+          <template
+            v-if="fieldDescription('enableSorting')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('enableSorting')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("enableSorting") }}
+        </FieldLabel>
+        <InputGroup>
+          <InputGroupInput
+            :model-value="value.sortKey"
+            placeholder="例：created_at"
+            @update:model-value="(v) => value = { ...value, sortKey: v || void 0 }"
+          />
+          <InputGroupAddon align="inline-end">
+            <InputGroupButton
+              :variant="value.enableSorting ? 'primary' : 'ghost'"
+              size="xs"
+              @click="value = { ...value, enableSorting: !value.enableSorting }"
+            >
+              <Icon :icon="value.enableSorting ? 'fluent:arrow-sort-up-16-regular' : 'fluent:arrow-sort-16-regular'" />
+              {{ fieldTitle("enableSorting") }}
+            </InputGroupButton>
+          </InputGroupAddon>
+        </InputGroup>
+      </Field>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/table/columns/2026-06-17/com.shwfed.table.column.date-input/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-06-17/com.shwfed.table.column.date-input/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-06-17/com.shwfed.table.column.date-input/runtime.vue

@@ -0,0 +1,110 @@
+<script setup>
+import { Effect } from "effect";
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { format as formatDate } from "date-fns";
+import { cel as $cel } from "../../../../../utils/cel";
+import { celBindings, injectCELContext } from "../../../../../utils/cel-context";
+import { useFormReadonly } from "../../../../form/utils/readonly";
+import { getLocalizedText } from "../../../../../share/locale";
+import { DATE_PICKER_DEFAULT_FORMATS, DatePicker } from "../../../../ui/date-picker";
+import { useFormState } from "../../../../form/utils/state";
+defineOptions({ name: "ShwfedTableDateInputRendererRuntime" });
+const props = defineProps({
+  column: { type: null, required: true },
+  ctx: { type: Object, required: true }
+});
+const { locale } = useI18n();
+const celContext = injectCELContext();
+const formState = useFormState();
+const placeholderText = computed(
+  () => props.column.placeholder ? getLocalizedText(props.column.placeholder, locale.value) : void 0
+);
+function evalBool(expression, label) {
+  if (!expression) return false;
+  try {
+    return Effect.runSync($cel(expression, celBindings(celContext))) === true;
+  } catch (e) {
+    console.error(`[shwfed-table] date-input ${label} failed`, e);
+    return false;
+  }
+}
+const isHidden = computed(() => evalBool(props.column.hidden, "hidden"));
+const isDisabled = computed(() => evalBool(props.column.disabled, "disabled"));
+const formReadonly = useFormReadonly();
+const isReadonly = computed(
+  () => props.column.readonly != null ? evalBool(props.column.readonly, "readonly") : formReadonly.value
+);
+const effectiveReadonly = computed(
+  () => isReadonly.value || props.column.derived?.mode === "formula"
+);
+const resolvedValueFormat = computed(
+  () => props.column.valueFormat ?? DATE_PICKER_DEFAULT_FORMATS.date.value
+);
+const shortcuts = computed(() => {
+  const list = props.column.presets;
+  if (!list || list.length === 0) return void 0;
+  return list.map((preset) => ({
+    name: preset.label,
+    value: () => {
+      try {
+        const d = Effect.runSync($cel(preset.value, celBindings(celContext)));
+        return formatDate(d, resolvedValueFormat.value);
+      } catch (e) {
+        console.error(`[shwfed-table] date-input preset "${preset.value}" failed`, e);
+        return "";
+      }
+    }
+  }));
+});
+const model = computed({
+  get: () => {
+    const v = formState.getAt(props.column.binding);
+    return typeof v === "string" && v.length > 0 ? v : void 0;
+  },
+  set: (next) => {
+    formState.setAt(props.column.binding, next ?? null);
+  }
+});
+</script>
+
+<template>
+  <!--
+    Row budget matches the editable input columns: 2px outer inset around a 28px
+    (`h-7`) control — total 32px. Every branch (hidden / readonly / editable) is
+    sized identically so rows do not jump when a CEL condition flips.
+  -->
+  <div class="p-[0.125rem] w-full">
+    <span
+      v-if="isHidden"
+      class="block h-7 w-full"
+    />
+    <!--
+      Readonly empty state mirrors the `text-input` column: a centered, faded,
+      non-selectable `-` so a readonly grid reads uniformly regardless of which
+      column type backs each cell. A non-empty readonly value keeps left-aligned
+      dark text.
+    -->
+    <span
+      v-else-if="effectiveReadonly"
+      :class="[
+  'flex items-center h-7 w-full px-2 text-[0.75rem] truncate',
+  model ? 'text-zinc-700' : 'justify-center font-mono text-zinc-300 select-none'
+]"
+    >
+      {{ model || "-" }}
+    </span>
+    <DatePicker
+      v-else
+      v-model="model"
+      type="date"
+      size="sm"
+      class="w-full"
+      :format="column.format"
+      :value-format="column.valueFormat"
+      :placeholder="placeholderText"
+      :disabled="isDisabled"
+      :shortcuts="shortcuts"
+    />
+  </div>
+</template>

package/dist/runtime/components/table/columns/2026-06-17/com.shwfed.table.column.date-input/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;