@shwfed/config 2.3.22 → 2.3.24

package/dist/runtime/components/table/columns/2026-05-25/com.shwfed.table.column.combobox-multi/config.vue

@@ -0,0 +1,533 @@
+<script setup>
+import { computed } from "vue";
+import { Icon } from "@iconify/vue";
+import { Button } from "../../../../ui/button";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../../../ui/dropdown-menu";
+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 {
+  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 { itemSchema, schema } from "./schema";
+defineOptions({ name: "ShwfedTableComboboxMultiRendererConfig" });
+const value = defineModel({ type: null, ...{ required: true } });
+const fieldSchema = schema(() => {
+});
+const fieldTitle = (field) => getStructFieldTitle(fieldSchema, field) ?? field;
+const fieldDescription = (field) => getStructFieldDescription(fieldSchema, field);
+const itemFieldSchema = itemSchema(() => {
+});
+const itemFieldTitle = (f) => getStructFieldTitle(itemFieldSchema, f) ?? f;
+const itemFieldDescription = (f) => getStructFieldDescription(itemFieldSchema, f);
+const ROW_VARS = {
+  row: { type: "dyn", label: "\u5F53\u524D\u884C\u6570\u636E" },
+  index: { type: "number", label: "\u884C\u7D22\u5F15" }
+};
+const bindingText = computed({
+  get: () => value.value.binding ?? "",
+  set: (v) => {
+    const trimmed = v.trim();
+    if (trimmed === "") {
+      const { binding: _omit, ...rest } = value.value;
+      value.value = rest;
+    } else {
+      value.value = { ...value.value, binding: trimmed };
+    }
+  }
+});
+const hiddenModel = computed({
+  get: () => value.value.hidden ?? "",
+  set: (v) => {
+    if (v === "") {
+      const { hidden: _omit, ...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: _omit, ...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: _omit, ...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: _omit, ...rest } = value.value;
+      value.value = rest;
+    } else {
+      value.value = { ...value.value, derived: v };
+    }
+  }
+});
+const items = computed(() => value.value.items ?? []);
+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 newItem() {
+  return {
+    id: newId(),
+    label: [{ locale: "zh", message: "" }],
+    value: { kind: "text", value: "" }
+  };
+}
+function patchItem(index, patch) {
+  const next = [...value.value.items ?? []];
+  const cur = next[index];
+  if (!cur) return;
+  next[index] = { ...cur, ...patch };
+  value.value = { ...value.value, items: next };
+}
+function addItem() {
+  value.value = { ...value.value, items: [...value.value.items ?? [], newItem()] };
+}
+function removeItem(index) {
+  const next = [...value.value.items ?? []];
+  next.splice(index, 1);
+  value.value = { ...value.value, items: next };
+}
+function setItemKind(index, kind) {
+  const cur = value.value.items?.[index];
+  if (!cur || cur.value.kind === kind) return;
+  patchItem(index, {
+    value: kind === "text" ? { kind: "text", value: "" } : { kind: "number", value: 0 }
+  });
+}
+function setItemTextValue(index, text) {
+  patchItem(index, { value: { kind: "text", value: text } });
+}
+function setItemNumberValue(index, n) {
+  patchItem(index, {
+    value: {
+      kind: "number",
+      value: typeof n === "number" && Number.isFinite(n) ? n : 0
+    }
+  });
+}
+function setItemLabel(index, label) {
+  patchItem(index, { label });
+}
+function setItemTooltip(index, tooltip) {
+  const isEmpty = !tooltip || tooltip.every((l) => l.message.trim().length === 0);
+  if (isEmpty) {
+    const cur = value.value.items?.[index];
+    if (!cur) return;
+    const { tooltip: _omit, ...rest } = cur;
+    const next = [...value.value.items ?? []];
+    next[index] = rest;
+    value.value = { ...value.value, items: next };
+  } else {
+    patchItem(index, { tooltip });
+  }
+}
+</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="例：roles"
+            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 = { ...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>
+    </div>
+
+    <Field orientation="vertical">
+      <FieldLabel class="text-xs text-zinc-500">
+        <template #tooltip>
+          <Markdown
+            source="下拉框可选项列表"
+            block
+            class="prose prose-sm prose-zinc"
+          />
+        </template>
+        {{ fieldTitle("items") }}
+      </FieldLabel>
+
+      <div class="flex flex-col gap-3">
+        <div
+          v-for="(item, index) in items"
+          :key="item.id"
+          data-slot="combobox-multi-item"
+          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="combobox-multi-item-delete"
+            aria-label="删除选项"
+            class="absolute right-2 top-2 z-10"
+            @click="removeItem(index)"
+          >
+            <Icon icon="fluent:delete-20-regular" />
+          </InputGroupButton>
+
+          <Field orientation="vertical">
+            <FieldLabel class="text-xs text-zinc-500">
+              <template
+                v-if="itemFieldDescription('label')"
+                #tooltip
+              >
+                <Markdown
+                  :source="itemFieldDescription('label')"
+                  block
+                  class="prose prose-sm prose-zinc"
+                />
+              </template>
+              {{ itemFieldTitle("label") }}
+            </FieldLabel>
+            <Locale
+              markdown
+              translate-hint="combobox option label"
+              :model-value="item.label"
+              @update:model-value="(v) => setItemLabel(index, v)"
+            />
+          </Field>
+
+          <Field orientation="vertical">
+            <FieldLabel class="text-xs text-zinc-500">
+              <template
+                v-if="itemFieldDescription('value')"
+                #tooltip
+              >
+                <Markdown
+                  :source="itemFieldDescription('value')"
+                  block
+                  class="prose prose-sm prose-zinc"
+                />
+              </template>
+              {{ itemFieldTitle("value") }}
+            </FieldLabel>
+            <InputGroup>
+              <InputGroupAddon align="inline-start">
+                <DropdownMenu>
+                  <DropdownMenuTrigger as-child>
+                    <InputGroupButton
+                      size="icon-sm"
+                      as-child
+                    >
+                      <button
+                        type="button"
+                        data-slot="combobox-multi-item-kind-trigger"
+                        class="text-zinc-500 transition-colors hover:text-zinc-700 [&_svg:not([class*='size-'])]:size-3.5"
+                        aria-label="切换值类型"
+                      >
+                        <Icon
+                          :icon="item.value.kind === 'number' ? 'fluent:number-symbol-20-regular' : 'fluent:textbox-20-regular'"
+                        />
+                      </button>
+                    </InputGroupButton>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="start">
+                    <DropdownMenuItem @select="setItemKind(index, 'text')">
+                      <Icon icon="fluent:textbox-20-regular" />
+                      <span>文本</span>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem @select="setItemKind(index, 'number')">
+                      <Icon icon="fluent:number-symbol-20-regular" />
+                      <span>数字</span>
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </InputGroupAddon>
+
+              <InputGroupInput
+                v-if="item.value.kind === 'text'"
+                :model-value="item.value.value"
+                placeholder="例：admin"
+                @update:model-value="(v) => setItemTextValue(index, String(v ?? ''))"
+              />
+              <InputGroupNumberField
+                v-else
+                :model-value="item.value.value"
+                @update:model-value="(v) => setItemNumberValue(index, v)"
+              />
+            </InputGroup>
+          </Field>
+
+          <Field orientation="vertical">
+            <FieldLabel class="text-xs text-zinc-500">
+              <template
+                v-if="itemFieldDescription('tooltip')"
+                #tooltip
+              >
+                <Markdown
+                  :source="itemFieldDescription('tooltip')"
+                  block
+                  class="prose prose-sm prose-zinc"
+                />
+              </template>
+              {{ itemFieldTitle("tooltip") }}
+            </FieldLabel>
+            <Locale
+              markdown
+              translate-hint="combobox option tooltip"
+              :model-value="item.tooltip"
+              @update:model-value="(v) => setItemTooltip(index, v)"
+            />
+          </Field>
+        </div>
+
+        <Button
+          type="button"
+          data-slot="combobox-multi-add-item"
+          class="w-full justify-center"
+          @click="addItem"
+        >
+          <Icon icon="fluent:add-20-regular" />
+          <span>增加选项</span>
+        </Button>
+      </div>
+    </Field>
+
+    <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="dyn"
+          placeholder="例：form.defaults[row.kind]"
+        />
+      </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 = { ...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-25/com.shwfed.table.column.combobox-multi/config.vue.d.ts

@@ -0,0 +1,133 @@
+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 size?: number | undefined;
+        readonly disabled?: string | undefined;
+        readonly type: "com.shwfed.table.column.combobox-multi";
+        readonly id: string;
+        readonly title: readonly [{
+            readonly locale: "zh";
+            readonly message: string;
+        }, ...{
+            readonly locale: "en" | "ja" | "ko";
+            readonly message: string;
+        }[]];
+        readonly hidden?: string | undefined;
+        readonly tooltip?: readonly [{
+            readonly locale: "zh";
+            readonly message: string;
+        }, ...{
+            readonly locale: "en" | "ja" | "ko";
+            readonly message: string;
+        }[]] | undefined;
+        readonly compatibilityDate: "2026-05-25";
+        readonly items: readonly {
+            readonly label: readonly [{
+                readonly locale: "zh";
+                readonly message: string;
+            }, ...{
+                readonly locale: "en" | "ja" | "ko";
+                readonly message: string;
+            }[]];
+            readonly id: string;
+            readonly tooltip?: readonly [{
+                readonly locale: "zh";
+                readonly message: string;
+            }, ...{
+                readonly locale: "en" | "ja" | "ko";
+                readonly message: string;
+            }[]] | undefined;
+            readonly value: {
+                readonly value: string;
+                readonly kind: "text";
+            } | {
+                readonly value: number;
+                readonly kind: "number";
+            };
+        }[];
+        readonly groupId?: string | undefined;
+        readonly placeholder?: readonly [{
+            readonly locale: "zh";
+            readonly message: string;
+        }, ...{
+            readonly locale: "en" | "ja" | "ko";
+            readonly message: string;
+        }[]] | undefined;
+        readonly readonly?: string | undefined;
+        readonly grow?: boolean | undefined;
+        readonly binding: string;
+        readonly derived?: {
+            readonly mode: "formula" | "prefill";
+            readonly expression: string;
+        } | undefined;
+        readonly enableSorting?: boolean | undefined;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: {
+        readonly size?: number | undefined;
+        readonly disabled?: string | undefined;
+        readonly type: "com.shwfed.table.column.combobox-multi";
+        readonly id: string;
+        readonly title: readonly [{
+            readonly locale: "zh";
+            readonly message: string;
+        }, ...{
+            readonly locale: "en" | "ja" | "ko";
+            readonly message: string;
+        }[]];
+        readonly hidden?: string | undefined;
+        readonly tooltip?: readonly [{
+            readonly locale: "zh";
+            readonly message: string;
+        }, ...{
+            readonly locale: "en" | "ja" | "ko";
+            readonly message: string;
+        }[]] | undefined;
+        readonly compatibilityDate: "2026-05-25";
+        readonly items: readonly {
+            readonly label: readonly [{
+                readonly locale: "zh";
+                readonly message: string;
+            }, ...{
+                readonly locale: "en" | "ja" | "ko";
+                readonly message: string;
+            }[]];
+            readonly id: string;
+            readonly tooltip?: readonly [{
+                readonly locale: "zh";
+                readonly message: string;
+            }, ...{
+                readonly locale: "en" | "ja" | "ko";
+                readonly message: string;
+            }[]] | undefined;
+            readonly value: {
+                readonly value: string;
+                readonly kind: "text";
+            } | {
+                readonly value: number;
+                readonly kind: "number";
+            };
+        }[];
+        readonly groupId?: string | undefined;
+        readonly placeholder?: readonly [{
+            readonly locale: "zh";
+            readonly message: string;
+        }, ...{
+            readonly locale: "en" | "ja" | "ko";
+            readonly message: string;
+        }[]] | undefined;
+        readonly readonly?: string | undefined;
+        readonly grow?: boolean | undefined;
+        readonly binding: string;
+        readonly derived?: {
+            readonly mode: "formula" | "prefill";
+            readonly expression: string;
+        } | undefined;
+        readonly enableSorting?: boolean | undefined;
+    }) => 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-25/com.shwfed.table.column.combobox-multi/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;