@shwfed/config 2.10.8 → 2.10.10

package/dist/runtime/components/form/fields/2026-06-14/com.shwfed.form.field.combobox.multi/config.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { Icon } from "@iconify/vue";
-import { computed } from "vue";
+import { computed, ref } from "vue";
+import { useI18n } from "vue-i18n";
 import { Button } from "../../../../ui/button";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../../../ui/dropdown-menu";
 import { ExpressionEditor } from "../../../../ui/expression-editor";
@@ -19,11 +20,16 @@ import {
 } from "../../../../ui/select";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../../../ui/tabs";
 import { Textarea } from "../../../../ui/textarea";
+import { getLocalizedText } from "../../../../../share/locale";
+import {
+  useTreeDnd
+} from "../../../../../composables/useTreeDnd";
 import { getStructFieldDescription, getStructFieldTitle } from "../../../schema";
 import { DEFAULT_FIELD_ORIENTATION, FIELD_ORIENTATION_OPTIONS } from "../../../utils/common";
 import { itemSchema, remoteOptionsSchema, schema } from "./schema";
 defineOptions({ name: "ShwfedComboboxMultiFieldConfig" });
 const value = defineModel({ type: null, ...{ required: true } });
+const { locale } = useI18n();
 const fieldSchema = schema(() => {
 });
 const fieldTitle = (f) => getStructFieldTitle(fieldSchema, f) ?? f;
@@ -121,6 +127,19 @@ const optionKeywordsModel = computed({
 const items = computed(
   () => value.value.options.kind === "static" ? value.value.options.items : []
 );
+const expandedIds = ref(/* @__PURE__ */ new Set());
+function isExpanded(id) {
+  return expandedIds.value.has(id);
+}
+function toggleExpanded(id) {
+  const next = new Set(expandedIds.value);
+  if (next.has(id)) next.delete(id);
+  else next.add(id);
+  expandedIds.value = next;
+}
+function summaryFor(item) {
+  return getLocalizedText(item.label, locale.value) || "\u672A\u547D\u540D\u9009\u9879";
+}
 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;
@@ -145,7 +164,9 @@ function patchItem(index, patch) {
 }
 function addItem() {
   if (value.value.options.kind !== "static") return;
-  patchStatic({ items: [...value.value.options.items, newItem()] });
+  const item = newItem();
+  patchStatic({ items: [...value.value.options.items, item] });
+  expandedIds.value = new Set(expandedIds.value).add(item.id);
 }
 function removeItem(index) {
   if (value.value.options.kind !== "static") return;
@@ -153,6 +174,39 @@ function removeItem(index) {
   next.splice(index, 1);
   patchStatic({ items: next });
 }
+function moveItem(from, to) {
+  if (value.value.options.kind !== "static") return;
+  const next = [...value.value.options.items];
+  if (from < 0 || to < 0 || from >= next.length || to >= next.length) return;
+  const [m] = next.splice(from, 1);
+  if (!m) return;
+  next.splice(to, 0, m);
+  patchStatic({ items: next });
+}
+const ROW_KIND = "combobox-multi-option";
+function onRowDrop(e) {
+  if (e.source.kind !== ROW_KIND || e.target.kind !== ROW_KIND) return;
+  const from = items.value.findIndex((it) => it.id === e.source.id);
+  const to = items.value.findIndex((it) => it.id === e.target.id);
+  if (from < 0 || to < 0) return;
+  if (e.instruction === "reorder-above") moveItem(from, from < to ? to - 1 : to);
+  else if (e.instruction === "reorder-below") moveItem(from, from <= to ? to : to + 1);
+}
+const dnd = useTreeDnd({ onRowDrop });
+const pickDragHandle = (el) => el.querySelector(".drag-handle");
+function rowConfig(index) {
+  const id = items.value[index]?.id ?? `idx-${index}`;
+  return {
+    kind: ROW_KIND,
+    canDrop: (src) => src.kind === ROW_KIND,
+    blockInstructions: (src) => {
+      const block = ["make-child", "reparent"];
+      if (src.id === id) block.push("reorder-above", "reorder-below");
+      return block;
+    },
+    dragHandle: pickDragHandle
+  };
+}
 function setItemKind(index, kind) {
   if (value.value.options.kind !== "static") return;
   const cur = value.value.options.items[index];
@@ -393,145 +447,178 @@ function setItemKeywords(index, text) {
             <div
               v-for="(item, index) in items"
               :key="item.id"
+              :ref="dnd.rowRef(item.id, rowConfig(index))"
               data-slot="combobox-multi-item"
-              class="relative pt-8 grid grid-cols-2 gap-3 rounded border border-zinc-200 bg-zinc-50/40 p-3"
+              class="relative rounded border border-zinc-200 bg-zinc-50/40"
+              :data-instruction="dnd.instructionFor(item.id) ?? void 0"
             >
-              <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)"
+              <div class="flex items-center gap-2 p-2">
+                <Icon
+                  icon="fluent:re-order-dots-vertical-20-regular"
+                  class="drag-handle size-4 shrink-0 cursor-grab text-zinc-400"
+                  data-slot="combobox-multi-item-drag-handle"
+                />
+                <InputGroupButton
+                  size="icon-xs"
+                  class="shrink-0"
+                  data-slot="combobox-multi-item-collapse"
+                  :aria-expanded="isExpanded(item.id)"
+                  :aria-label="isExpanded(item.id) ? '\u6298\u53E0' : '\u5C55\u5F00'"
+                  @click="toggleExpanded(item.id)"
+                >
+                  <Icon
+                    :icon="isExpanded(item.id) ? 'fluent:chevron-down-20-regular' : 'fluent:chevron-right-20-regular'"
+                  />
+                </InputGroupButton>
+                <div
+                  class="min-w-0 flex-1 truncate text-sm text-zinc-700"
+                  data-slot="combobox-multi-item-summary"
+                >
+                  {{ summaryFor(item) }}
+                </div>
+                <InputGroupButton
+                  variant="destructive"
+                  size="icon-xs"
+                  data-slot="combobox-multi-item-delete"
+                  aria-label="删除选项"
+                  class="shrink-0"
+                  @click="removeItem(index)"
+                >
+                  <Icon icon="fluent:delete-20-regular" />
+                </InputGroupButton>
+              </div>
+
+              <div
+                v-show="isExpanded(item.id)"
+                class="grid grid-cols-2 gap-3 px-3 pb-3"
+                data-slot="combobox-multi-item-content"
               >
-                <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>
+                  <LocaleField
+                    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('label')"
-                    #tooltip
-                  >
-                    <Markdown
-                      :source="itemFieldDescription('label')"
-                      block
-                      class="prose prose-sm prose-zinc"
-                    />
-                  </template>
-                  {{ itemFieldTitle("label") }}
-                </FieldLabel>
-                <LocaleField
-                  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>
 
-              <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"
+                    <InputGroupInput
+                      v-if="item.value.kind === 'text'"
+                      :model-value="item.value.value"
+                      placeholder="例：admin"
+                      @update:model-value="(v) => setItemTextValue(index, String(v ?? ''))"
                     />
-                  </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>
+                    <InputGroupNumberField
+                      v-else
+                      :model-value="item.value.value"
+                      @update:model-value="(v) => setItemNumberValue(index, v)"
+                    />
+                  </InputGroup>
+                </Field>
 
-                  <InputGroupInput
-                    v-if="item.value.kind === 'text'"
-                    :model-value="item.value.value"
-                    placeholder="例：admin"
-                    @update:model-value="(v) => setItemTextValue(index, String(v ?? ''))"
+                <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>
+                  <LocaleField
+                    markdown
+                    translate-hint="combobox option tooltip"
+                    :model-value="item.tooltip"
+                    @update:model-value="(v) => setItemTooltip(index, 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>
-                <LocaleField
-                  markdown
-                  translate-hint="combobox option tooltip"
-                  :model-value="item.tooltip"
-                  @update:model-value="(v) => setItemTooltip(index, v)"
-                />
-              </Field>
+                </Field>
 
-              <Field orientation="vertical">
-                <FieldLabel class="text-xs text-zinc-500">
-                  <template
-                    v-if="itemFieldDescription('keywords')"
-                    #tooltip
-                  >
-                    <Markdown
-                      :source="itemFieldDescription('keywords')"
-                      block
-                      class="prose prose-sm prose-zinc"
-                    />
-                  </template>
-                  {{ itemFieldTitle("keywords") }}
-                </FieldLabel>
-                <Textarea
-                  data-slot="combobox-multi-item-keywords"
-                  placeholder="每行一个关键词"
-                  :model-value="keywordsText(item)"
-                  @update:model-value="(v) => setItemKeywords(index, String(v ?? ''))"
-                />
-              </Field>
+                <Field orientation="vertical">
+                  <FieldLabel class="text-xs text-zinc-500">
+                    <template
+                      v-if="itemFieldDescription('keywords')"
+                      #tooltip
+                    >
+                      <Markdown
+                        :source="itemFieldDescription('keywords')"
+                        block
+                        class="prose prose-sm prose-zinc"
+                      />
+                    </template>
+                    {{ itemFieldTitle("keywords") }}
+                  </FieldLabel>
+                  <Textarea
+                    data-slot="combobox-multi-item-keywords"
+                    placeholder="每行一个关键词"
+                    :model-value="keywordsText(item)"
+                    @update:model-value="(v) => setItemKeywords(index, String(v ?? ''))"
+                  />
+                </Field>
+              </div>
             </div>
 
             <Button
@@ -780,3 +867,7 @@ function setItemKeywords(index, text) {
     </Field>
   </div>
 </template>
+
+<style scoped>
+[data-instruction=reorder-above]:before,[data-instruction=reorder-below]:after{background:var(--primary,#2563eb);content:"";height:2px;left:0;pointer-events:none;position:absolute;right:0;z-index:1}[data-instruction=reorder-above]:before{top:-7px}[data-instruction=reorder-below]:after{bottom:-7px}
+</style>