@shwfed/config 2.2.4 → 2.3.0

package/dist/runtime/components/table/columns/2026-05-20/com.shwfed.table.column.number-input/config.vue

@@ -0,0 +1,475 @@
+<script setup>
+import { computed } from "vue";
+import { Icon } from "@iconify/vue";
+import { ExpressionEditor } from "../../../../ui/expression-editor";
+import { Switch } from "../../../../ui/switch";
+import { Separator } from "../../../../ui/separator";
+import { Field, FieldLabel } from "../../../../ui/field";
+import { Locale } from "../../../../ui/locale";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "../../../../ui/dropdown-menu";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupNumberField
+} from "../../../../ui/input-group";
+import { getStructFieldDescription, getStructFieldTitle } from "../../../utils/schema-meta";
+import { Markdown } from "../../../../ui/markdown";
+import DerivedValueEditor from "../../../../form/DerivedValueEditor.vue";
+import { schema } from "./schema";
+defineOptions({ name: "ShwfedTableNumberInputRendererConfig" });
+const value = defineModel({ type: Object, ...{ required: true } });
+const fieldSchema = schema(() => {
+});
+const fieldTitle = (field) => getStructFieldTitle(fieldSchema, field) ?? field;
+const fieldDescription = (field) => getStructFieldDescription(fieldSchema, field);
+const ROW_VARS = {
+  row: { type: "dyn", label: "\u5F53\u524D\u884C\u6570\u636E" },
+  index: { type: "number", label: "\u884C\u7D22\u5F15" }
+};
+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 bindingText = computed({
+  get: () => value.value.binding ?? "",
+  set: (v) => {
+    const trimmed = v.trim();
+    if (trimmed === "") delete value.value.binding;
+    else value.value.binding = trimmed;
+  }
+});
+const hiddenModel = computed({
+  get: () => value.value.hidden ?? "",
+  set: (v) => {
+    if (v === "") delete value.value.hidden;
+    else value.value.hidden = v;
+  }
+});
+const disabledModel = computed({
+  get: () => value.value.disabled ?? "",
+  set: (v) => {
+    if (v === "") delete value.value.disabled;
+    else value.value.disabled = v;
+  }
+});
+const readonlyModel = computed({
+  get: () => value.value.readonly ?? "",
+  set: (v) => {
+    if (v === "") delete value.value.readonly;
+    else value.value.readonly = v;
+  }
+});
+const derivedModel = computed({
+  get: () => value.value.derived,
+  set: (v) => {
+    if (v == null) delete value.value.derived;
+    else value.value.derived = v;
+  }
+});
+const currentRoundingModeLabel = computed(
+  () => ROUNDING_MODE_OPTIONS.find((o) => o.value === (value.value.roundingMode ?? "round"))?.label
+);
+function onPrecisionChange(v) {
+  if (v === void 0) {
+    delete value.value.precision;
+    delete value.value.roundingMode;
+  } else {
+    value.value.precision = v;
+    if (value.value.roundingMode === void 0) value.value.roundingMode = "round";
+  }
+}
+function onRoundingModeChange(mode) {
+  value.value.roundingMode = mode;
+}
+function onStepChange(v) {
+  if (v === void 0 || !(v > 0)) delete value.value.step;
+  else value.value.step = v;
+}
+function onValueAsStringChange(next) {
+  if (next) value.value.valueAsString = true;
+  else delete value.value.valueAsString;
+}
+</script>
+
+<template>
+  <div class="space-y-5">
+    <div class="grid grid-cols-2 gap-x-6 gap-y-4">
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template
+            v-if="fieldDescription('title')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('title')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("title") }}
+        </FieldLabel>
+        <Locale v-model="value.title" />
+      </Field>
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template
+            v-if="fieldDescription('tooltip')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('tooltip')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("tooltip") }}
+        </FieldLabel>
+        <Locale
+          v-model="value.tooltip"
+          markdown
+        />
+      </Field>
+    </div>
+    <div class="grid grid-cols-2 gap-x-6 gap-y-4">
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template
+            v-if="fieldDescription('binding')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('binding')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("binding") }}
+        </FieldLabel>
+        <InputGroup>
+          <InputGroupInput
+            v-model="bindingText"
+            placeholder="例：age"
+            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 v-model="value.placeholder" />
+      </Field>
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template
+            v-if="fieldDescription('size')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('size')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("size") }}
+        </FieldLabel>
+        <InputGroup>
+          <InputGroupNumberField
+            :model-value="value.size"
+            :disabled="value.grow"
+            :min="0"
+            @update:model-value="(v) => value.size = v"
+          />
+          <InputGroupAddon align="inline-end">
+            <InputGroupButton
+              :variant="value.grow ? 'primary' : 'ghost'"
+              size="xs"
+              @click="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('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('valueAsString')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('valueAsString')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("valueAsString") }}
+        </FieldLabel>
+        <div>
+          <Switch
+            :model-value="value.valueAsString ?? false"
+            @update:model-value="onValueAsStringChange"
+          />
+        </div>
+      </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('min')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('min')"
+              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"
+          :extra-vars="ROW_VARS"
+          @update:model-value="(v) => {
+  if (v.length > 0) value.min = v;
+  else delete value.min;
+}"
+        />
+      </Field>
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template
+            v-if="fieldDescription('max')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('max')"
+              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"
+          :extra-vars="ROW_VARS"
+          @update:model-value="(v) => {
+  if (v.length > 0) value.max = v;
+  else delete value.max;
+}"
+        />
+      </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('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="number"
+          placeholder="例：row.unitPrice * row.quantity"
+        />
+      </Field>
+    </div>
+    <Separator />
+    <div class="flex flex-wrap gap-x-8 gap-y-3">
+      <Field
+        orientation="horizontal"
+        class="w-auto gap-2"
+      >
+        <Switch
+          :model-value="value.enableSorting ?? false"
+          @update:model-value="(v) => value.enableSorting = v"
+        />
+        <FieldLabel class="text-sm text-zinc-600">
+          <template
+            v-if="fieldDescription('enableSorting')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('enableSorting')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("enableSorting") }}
+        </FieldLabel>
+      </Field>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/table/columns/2026-05-20/com.shwfed.table.column.number-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-05-20/com.shwfed.table.column.number-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-05-20/com.shwfed.table.column.number-input/runtime.vue

@@ -0,0 +1,156 @@
+<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 { InputGroup, InputGroupAddon, InputGroupButton, InputGroupNumberField } from "../../../../ui/input-group";
+import { useFieldValue } from "../../../../form/utils/field-value";
+defineOptions({ name: "ShwfedTableNumberInputRendererRuntime" });
+const props = defineProps({
+  column: { type: null, required: true },
+  ctx: { type: Object, required: true }
+});
+const { locale } = useI18n();
+const inherited = injectCELContext();
+const $cel = (expression, context) => _rawCel(expression, { ...celBindings(inherited), ...context });
+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)) === true;
+  } catch (e) {
+    console.error(`[shwfed-table] number-input ${label} failed`, e);
+    return false;
+  }
+}
+function evalNumber(expression, label) {
+  if (!expression) return void 0;
+  try {
+    const result = Effect.runSync($cel(expression));
+    return typeof result === "number" && Number.isFinite(result) ? result : void 0;
+  } catch (e) {
+    console.error(`[shwfed-table] number-input ${label} failed`, e);
+    return void 0;
+  }
+}
+const isHidden = computed(() => evalBool(props.column.hidden, "hidden"));
+const isDisabled = computed(() => evalBool(props.column.disabled, "disabled"));
+const isReadonly = computed(() => evalBool(props.column.readonly, "readonly"));
+const effectiveReadonly = computed(
+  () => isReadonly.value || props.column.derived?.mode === "formula"
+);
+const minValue = computed(() => evalNumber(props.column.min, "min"));
+const maxValue = computed(() => evalNumber(props.column.max, "max"));
+const formatOptions = computed(() => ({
+  useGrouping: false,
+  maximumFractionDigits: 20
+}));
+const { draft, commit } = useFieldValue({
+  binding: () => props.column.binding,
+  fromState: (raw) => {
+    if (typeof raw === "number" && Number.isFinite(raw)) return raw;
+    if (typeof raw === "string" && raw.length > 0) {
+      const n = Number(raw);
+      return Number.isFinite(n) ? n : void 0;
+    }
+    return void 0;
+  },
+  toState: (next) => {
+    if (typeof next !== "number" || !Number.isFinite(next)) return null;
+    return props.column.valueAsString ? String(next) : next;
+  }
+});
+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.column.precision;
+  if (precision !== void 0) {
+    const current = draft.value;
+    if (current !== void 0) {
+      const rounded = applyRounding(current, precision, props.column.roundingMode ?? "round");
+      if (rounded !== current) draft.value = rounded;
+    }
+  }
+  commit();
+}
+</script>
+
+<template>
+  <!--
+    Row budget matches the text-input cell: 2px outer inset around an `h-7`
+    (28px) input — 32px total. Every branch (hidden / readonly / editable)
+    is sized identically so rows do not jump when a CEL condition flips.
+    Both `text-[0.75rem]` breakpoints are explicit so `Input`'s default
+    `md:text-sm` cannot beat the override at md+.
+  -->
+  <div class="p-[0.125rem] w-full">
+    <span
+      v-if="isHidden"
+      class="block h-7 w-full"
+    />
+    <span
+      v-else-if="effectiveReadonly"
+      class="flex items-center h-7 w-full px-2 text-[0.75rem] text-zinc-700 truncate"
+    >
+      {{ draft ?? "\u2014" }}
+    </span>
+    <InputGroup
+      v-else
+      class="group/number-input h-7 rounded border-zinc-200/30 hover:border-zinc-200 focus-within:border-zinc-200 transition-colors ease-out duration-180"
+      :data-disabled="isDisabled ? 'true' : void 0"
+    >
+      <InputGroupNumberField
+        :model-value="draft"
+        :step="column.step"
+        :step-snapping="column.step !== void 0"
+        :min="minValue"
+        :max="maxValue"
+        :format-options="formatOptions"
+        :disabled="isDisabled"
+        :placeholder="placeholderText"
+        input-class="h-7 text-[0.75rem] md:text-[0.75rem] px-2 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-input:opacity-100 focus-within:opacity-100"
+      >
+        <InputGroupButton
+          size="icon-xs"
+          data-slot="number-input-clear"
+          class="size-4 text-zinc-500 hover:text-zinc-700"
+          tabindex="-1"
+          @mousedown.prevent
+          @click.stop="handleClear"
+        >
+          <Icon
+            icon="fluent:dismiss-20-regular"
+            class="size-3"
+          />
+        </InputGroupButton>
+      </InputGroupAddon>
+    </InputGroup>
+  </div>
+</template>

package/dist/runtime/components/table/columns/2026-05-20/com.shwfed.table.column.number-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;