@shwfed/config 2.10.8 → 2.10.9

package/dist/runtime/components/form/fields/2026-05-17/com.shwfed.form.field.checkbox.group/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";
@@ -10,10 +11,15 @@ 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 { getLocalizedText } from "../../../../../share/locale";
+import {
+  useTreeDnd
+} from "../../../../../composables/useTreeDnd";
 import { getStructFieldDescription, getStructFieldTitle } from "../../../schema";
 import { itemSchema, schema } from "./schema";
 defineOptions({ name: "ShwfedCheckboxGroupFieldConfig" });
 const value = defineModel({ type: null, ...{ required: true } });
+const { locale } = useI18n();
 const fieldSchema = schema(() => {
 });
 const fieldTitle = (f) => getStructFieldTitle(fieldSchema, f) ?? f;
@@ -35,6 +41,19 @@ const pathText = computed({
   }
 });
 const items = computed(() => value.value.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;
@@ -57,13 +76,47 @@ function patchItem(index, patch) {
   value.value = { ...value.value, items: next };
 }
 function addItem() {
-  value.value = { ...value.value, items: [...value.value.items ?? [], newItem()] };
+  const item = newItem();
+  value.value = { ...value.value, items: [...value.value.items ?? [], item] };
+  expandedIds.value = new Set(expandedIds.value).add(item.id);
 }
 function removeItem(index) {
   const next = [...value.value.items ?? []];
   next.splice(index, 1);
   value.value = { ...value.value, items: next };
 }
+function moveItem(from, to) {
+  const next = [...value.value.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);
+  value.value = { ...value.value, items: next };
+}
+const ROW_KIND = "checkbox-group-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) {
   const cur = value.value.items?.[index];
   if (!cur || cur.value.kind === kind) return;
@@ -211,124 +264,157 @@ function setItemTooltip(index, tooltip) {
         <div
           v-for="(item, index) in items"
           :key="item.id"
+          :ref="dnd.rowRef(item.id, rowConfig(index))"
           data-slot="checkbox-group-item"
-          class="relative pt-8 grid grid-cols-3 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="checkbox-group-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="checkbox-group-item-drag-handle"
+            />
+            <InputGroupButton
+              size="icon-xs"
+              class="shrink-0"
+              data-slot="checkbox-group-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="checkbox-group-item-summary"
+            >
+              {{ summaryFor(item) }}
+            </div>
+            <InputGroupButton
+              variant="destructive"
+              size="icon-xs"
+              data-slot="checkbox-group-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-3 gap-3 px-3 pb-3"
+            data-slot="checkbox-group-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
+                markdown
+                translate-hint="checkbox 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
-              markdown
-              translate-hint="checkbox 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="checkbox-group-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="例：cny"
+                  @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="checkbox-group-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="例：cny"
-                @update:model-value="(v) => setItemTextValue(index, String(v ?? ''))"
-              />
-              <InputGroupNumberField
-                v-else
-                :model-value="item.value.value"
-                @update:model-value="(v) => setItemNumberValue(index, 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="checkbox option tooltip"
+                :model-value="item.tooltip"
+                @update:model-value="(v) => setItemTooltip(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="checkbox option tooltip"
-              :model-value="item.tooltip"
-              @update:model-value="(v) => setItemTooltip(index, v)"
-            />
-          </Field>
+            </Field>
+          </div>
         </div>
 
         <Button
@@ -462,3 +548,7 @@ function setItemTooltip(index, tooltip) {
     </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>