@shwfed/config 2.0.0 → 2.0.1

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

@@ -0,0 +1,426 @@
+<script setup>
+import { computed } from "vue";
+import { Icon } from "@iconify/vue";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "../../../../ui/dropdown-menu";
+import { ExpressionEditor } from "../../../../ui/expression-editor";
+import DerivedValueEditor from "../../../DerivedValueEditor.vue";
+import { Field, FieldLabel } from "../../../../ui/field";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupNumberField
+} 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 { schema } from "./schema";
+defineOptions({ name: "ShwfedNumberFieldConfig" });
+const value = defineModel({ type: null, ...{ required: true } });
+const fieldSchema = schema(() => {
+});
+const fieldTitle = (f) => getStructFieldTitle(fieldSchema, f) ?? f;
+const fieldDescription = (f) => getStructFieldDescription(fieldSchema, f);
+const ROUNDING_MODE_OPTIONS = [
+  { value: "round", label: "\u56DB\u820D\u4E94\u5165" },
+  { value: "floor", label: "\u5411\u4E0B\u53D6\u6574" },
+  { value: "ceil", label: "\u5411\u4E0A\u53D6\u6574" }
+];
+const pathText = computed({
+  get: () => 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 currentRoundingModeLabel = computed(
+  () => ROUNDING_MODE_OPTIONS.find((o) => o.value === (value.value.roundingMode ?? "round"))?.label
+);
+function onPrecisionChange(v) {
+  if (v === void 0) {
+    const { precision: _p, roundingMode: _r, ...rest } = value.value;
+    value.value = rest;
+  } else if (value.value.roundingMode === void 0) {
+    value.value = { ...value.value, precision: v, roundingMode: "round" };
+  } else {
+    value.value = { ...value.value, precision: v };
+  }
+}
+function onRoundingModeChange(mode) {
+  value.value = { ...value.value, roundingMode: mode };
+}
+function onStepChange(v) {
+  if (v === void 0 || !(v > 0)) {
+    const { step: _omit, ...rest } = value.value;
+    value.value = rest;
+  } else {
+    value.value = { ...value.value, step: v };
+  }
+}
+</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="写入表单状态的嵌套键路径，使用 `.` 分隔，例如 `user.age`"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("binding") }}
+        </FieldLabel>
+        <InputGroup>
+          <InputGroupInput
+            v-model="pathText"
+            placeholder="例：user.age"
+            class="font-mono"
+          />
+        </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('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('placeholder')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('placeholder')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("placeholder") }}
+        </FieldLabel>
+        <LocaleField
+          :model-value="value.placeholder"
+          @update:model-value="(v) => value = { ...value, placeholder: 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-3 gap-3">
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template
+            v-if="fieldDescription('precision')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('precision')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("precision") }}
+        </FieldLabel>
+        <InputGroup>
+          <InputGroupNumberField
+            :model-value="value.precision"
+            :min="0"
+            @update:model-value="onPrecisionChange"
+          />
+          <InputGroupAddon
+            v-if="value.precision !== void 0"
+            align="inline-end"
+          >
+            <DropdownMenu>
+              <DropdownMenuTrigger as-child>
+                <InputGroupButton
+                  variant="ghost"
+                  class="pr-1.5! text-xs"
+                >
+                  {{ currentRoundingModeLabel }}
+                  <Icon
+                    icon="lucide:chevron-down"
+                    class="size-3"
+                  />
+                </InputGroupButton>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem
+                  v-for="opt in ROUNDING_MODE_OPTIONS"
+                  :key="opt.value"
+                  @select="onRoundingModeChange(opt.value)"
+                >
+                  {{ opt.label }}
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </InputGroupAddon>
+        </InputGroup>
+      </Field>
+
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template
+            v-if="fieldDescription('step')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('step')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("step") }}
+        </FieldLabel>
+        <InputGroup>
+          <InputGroupNumberField
+            :model-value="value.step"
+            :min="0"
+            @update:model-value="onStepChange"
+          />
+        </InputGroup>
+      </Field>
+
+      <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>
+    </div>
+
+    <div class="grid grid-cols-2 gap-3">
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template #tooltip>
+            <Markdown
+              :source="fieldDescription('min') ?? '\u5141\u8BB8\u8F93\u5165\u7684\u6700\u5C0F\u503C\u8868\u8FBE\u5F0F'"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("min") }}
+        </FieldLabel>
+        <ExpressionEditor
+          :model-value="value.min ?? ''"
+          placeholder="例：0"
+          result-type="number"
+          class="min-h-10"
+          @update:model-value="(v) => value = { ...value, min: v.length > 0 ? v : void 0 }"
+        />
+      </Field>
+
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template #tooltip>
+            <Markdown
+              :source="fieldDescription('max') ?? '\u5141\u8BB8\u8F93\u5165\u7684\u6700\u5927\u503C\u8868\u8FBE\u5F0F'"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("max") }}
+        </FieldLabel>
+        <ExpressionEditor
+          :model-value="value.max ?? ''"
+          placeholder="例：100"
+          result-type="number"
+          class="min-h-10"
+          @update:model-value="(v) => value = { ...value, max: v.length > 0 ? v : void 0 }"
+        />
+      </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="number"
+        placeholder="例：form.price * form.qty"
+        @update:model-value="(v) => value = { ...value, derived: v }"
+      />
+    </Field>
+  </div>
+</template>

package/dist/runtime/components/form/fields/2026-04-28/com.shwfed.form.field.number/config.vue.d.ts

@@ -0,0 +1,91 @@
+import { type Value } from './schema.js';
+type __VLS_ModelProps = {
+    modelValue: Value;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: {
+        readonly label?: readonly [{
+            readonly locale: "zh";
+            readonly message: string;
+        }, ...{
+            readonly locale: "en" | "ja" | "ko";
+            readonly message: string;
+        }[]] | undefined;
+        readonly disabled?: string | undefined;
+        readonly type: "com.shwfed.form.field.number";
+        readonly id: string;
+        readonly hidden?: string | undefined;
+        readonly tooltip?: readonly [{
+            readonly locale: "zh";
+            readonly message: string;
+        }, ...{
+            readonly locale: "en" | "ja" | "ko";
+            readonly message: string;
+        }[]] | undefined;
+        readonly displayName?: string | undefined;
+        readonly compatibilityDate: "2026-04-28";
+        readonly orientation?: "vertical" | "floating" | undefined;
+        readonly placeholder?: readonly [{
+            readonly locale: "zh";
+            readonly message: string;
+        }, ...{
+            readonly locale: "en" | "ja" | "ko";
+            readonly message: string;
+        }[]] | undefined;
+        readonly min?: string | undefined;
+        readonly max?: string | undefined;
+        readonly step?: number | undefined;
+        readonly readonly?: string | undefined;
+        readonly binding?: string | undefined;
+        readonly derived?: {
+            readonly mode: "formula" | "prefill";
+            readonly expression: string;
+        } | undefined;
+        readonly precision?: number | undefined;
+        readonly roundingMode?: "round" | "floor" | "ceil" | undefined;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: {
+        readonly label?: readonly [{
+            readonly locale: "zh";
+            readonly message: string;
+        }, ...{
+            readonly locale: "en" | "ja" | "ko";
+            readonly message: string;
+        }[]] | undefined;
+        readonly disabled?: string | undefined;
+        readonly type: "com.shwfed.form.field.number";
+        readonly id: string;
+        readonly hidden?: string | undefined;
+        readonly tooltip?: readonly [{
+            readonly locale: "zh";
+            readonly message: string;
+        }, ...{
+            readonly locale: "en" | "ja" | "ko";
+            readonly message: string;
+        }[]] | undefined;
+        readonly displayName?: string | undefined;
+        readonly compatibilityDate: "2026-04-28";
+        readonly orientation?: "vertical" | "floating" | undefined;
+        readonly placeholder?: readonly [{
+            readonly locale: "zh";
+            readonly message: string;
+        }, ...{
+            readonly locale: "en" | "ja" | "ko";
+            readonly message: string;
+        }[]] | undefined;
+        readonly min?: string | undefined;
+        readonly max?: string | undefined;
+        readonly step?: number | undefined;
+        readonly readonly?: string | undefined;
+        readonly binding?: string | undefined;
+        readonly derived?: {
+            readonly mode: "formula" | "prefill";
+            readonly expression: string;
+        } | undefined;
+        readonly precision?: number | undefined;
+        readonly roundingMode?: "round" | "floor" | "ceil" | undefined;
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/form/fields/2026-04-28/com.shwfed.form.field.number/runtime.d.vue.ts

@@ -0,0 +1,8 @@
+import type { Value } from './schema.js';
+type __VLS_Props = {
+    fieldId: string;
+    config: Value;
+};
+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/form/fields/2026-04-28/com.shwfed.form.field.number/runtime.vue

@@ -0,0 +1,162 @@
+<script setup>
+import { Icon } from "@iconify/vue";
+import { Effect } from "effect";
+import { computed, nextTick } from "vue";
+import { useI18n } from "vue-i18n";
+import { cel as _rawCel } from "../../../../../utils/cel";
+import { celBindings, injectCELContext } from "../../../../../utils/cel-context";
+import { getLocalizedText } from "../../../../../share/locale";
+import { Field, FieldLabel } from "../../../../ui/field";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupNumberField } from "../../../../ui/input-group";
+import { Markdown } from "../../../../ui/markdown";
+import { DEFAULT_FIELD_ORIENTATION } from "../../../utils/common";
+import { useFieldValue } from "../../../utils/field-value";
+import { useFormReadonly } from "../../../utils/readonly";
+import { useFormState } from "../../../utils/state";
+defineOptions({ name: "ShwfedNumberFieldRuntime" });
+const props = defineProps({
+  fieldId: { type: String, required: true },
+  config: { type: null, required: true }
+});
+const { locale } = useI18n();
+const { state } = useFormState();
+const inherited = injectCELContext();
+const $cel = (expression, context) => _rawCel(expression, { ...celBindings(inherited), ...context });
+const labelText = computed(() => getLocalizedText(props.config.label, locale.value));
+const placeholderText = computed(
+  () => props.config.placeholder ? getLocalizedText(props.config.placeholder, locale.value) : void 0
+);
+const tooltipText = computed(
+  () => props.config.tooltip ? getLocalizedText(props.config.tooltip, locale.value) : void 0
+);
+function evalBool(expression, label) {
+  if (!expression) return false;
+  try {
+    return Effect.runSync($cel(expression, { form: state.value ?? {} }));
+  } catch (err) {
+    console.error(`[shwfed-form] failed to evaluate ${label} for ${props.fieldId}:`, err);
+    return false;
+  }
+}
+function evalNumber(expression, label) {
+  if (!expression) return void 0;
+  try {
+    const result = Effect.runSync($cel(expression, { form: state.value ?? {} }));
+    return typeof result === "number" && Number.isFinite(result) ? result : void 0;
+  } catch (err) {
+    console.error(`[shwfed-form] failed to evaluate ${label} for ${props.fieldId}:`, err);
+    return void 0;
+  }
+}
+const isDisabled = computed(() => evalBool(props.config.disabled, "disabled"));
+const formReadonly = useFormReadonly();
+const isReadonly = computed(
+  () => props.config.readonly != null ? evalBool(props.config.readonly, "readonly") : formReadonly.value
+);
+const effectiveReadonly = computed(() => isReadonly.value || props.config.derived?.mode === "formula");
+const minValue = computed(() => evalNumber(props.config.min, "min"));
+const maxValue = computed(() => evalNumber(props.config.max, "max"));
+const formatOptions = computed(() => ({
+  useGrouping: false,
+  maximumFractionDigits: 20
+}));
+const { draft, commit } = useFieldValue({
+  binding: () => props.config.binding,
+  fromState: (raw) => typeof raw === "number" && Number.isFinite(raw) ? raw : void 0,
+  toState: (next) => typeof next === "number" && Number.isFinite(next) ? next : null
+});
+function applyRounding(n, precision, mode) {
+  const factor = 10 ** precision;
+  switch (mode) {
+    case "floor":
+      return Math.floor(n * factor) / factor;
+    case "ceil":
+      return Math.ceil(n * factor) / factor;
+    default:
+      return Math.round(n * factor) / factor;
+  }
+}
+const showClear = computed(() => !isDisabled.value && draft.value !== void 0);
+function handleClear() {
+  draft.value = void 0;
+  commit();
+}
+async function onBlur() {
+  await nextTick();
+  const precision = props.config.precision;
+  if (precision !== void 0) {
+    const current = draft.value;
+    if (current !== void 0) {
+      const rounded = applyRounding(current, precision, props.config.roundingMode ?? "round");
+      if (rounded !== current) draft.value = rounded;
+    }
+  }
+  commit();
+}
+</script>
+
+<template>
+  <Field
+    :orientation="config.orientation ?? DEFAULT_FIELD_ORIENTATION"
+    :data-disabled="isDisabled || void 0"
+  >
+    <FieldLabel
+      v-if="labelText"
+      :for="fieldId"
+      class="text-xs text-zinc-500"
+    >
+      <template
+        v-if="tooltipText"
+        #tooltip
+      >
+        <Markdown
+          :source="tooltipText"
+          class="prose prose-xs prose-zinc"
+        />
+      </template>
+      {{ labelText }}
+    </FieldLabel>
+    <div
+      v-if="effectiveReadonly"
+      class="min-h-9 py-1.5 text-sm text-zinc-700"
+    >
+      {{ draft ?? "\u2014" }}
+    </div>
+    <InputGroup
+      v-else
+      class="group/number-field"
+      :data-disabled="isDisabled ? 'true' : void 0"
+    >
+      <InputGroupNumberField
+        :id="fieldId"
+        :model-value="draft"
+        :step="config.step"
+        :step-snapping="config.step !== void 0"
+        :min="minValue"
+        :max="maxValue"
+        :format-options="formatOptions"
+        :disabled="isDisabled"
+        :placeholder="placeholderText"
+        input-class="text-left"
+        @update:model-value="(v) => draft = v"
+        @blur="onBlur"
+      />
+      <InputGroupAddon
+        v-if="showClear"
+        align="inline-end"
+        class="[@media(hover:hover)]:opacity-0 transition-opacity group-hover/number-field:opacity-100 focus-within:opacity-100"
+      >
+        <InputGroupButton
+          size="icon-xs"
+          data-slot="number-field-clear"
+          class="text-zinc-500 hover:text-zinc-700"
+          tabindex="-1"
+          @mousedown.prevent
+          @click.stop="handleClear"
+        >
+          <Icon icon="fluent:dismiss-20-regular" />
+        </InputGroupButton>
+      </InputGroupAddon>
+    </InputGroup>
+  </Field>
+</template>