@shwfed/nuxt 0.10.3 → 0.10.5

package/dist/runtime/components/ui/button-configurator/ButtonConfiguratorDialog.vue

@@ -0,0 +1,1078 @@
+<script setup>
+import { useSortable } from "@vueuse/integrations/useSortable";
+import { Icon } from "@iconify/vue";
+import { computed, nextTick, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { cn } from "../../../utils/cn";
+import { Button } from "../button";
+import { ButtonConfigC, ButtonsStyleC } from "../buttons/schema";
+import { Checkbox } from "../checkbox";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "../dialog";
+import { IconPicker } from "../icon-picker";
+import { Input } from "../input";
+import Locale from "../locale/Locale.vue";
+import { NativeSelect, NativeSelectOption } from "../native-select";
+import { Textarea } from "../textarea";
+import {
+  buildButtonConfiguratorTree,
+  createButtonConfiguratorButtonNode,
+  createButtonConfiguratorDropdownNode,
+  createButtonConfiguratorGroupNode,
+  flattenButtonConfiguratorTree,
+  getButtonConfiguratorNode,
+  insertButtonConfiguratorChildNode,
+  insertButtonConfiguratorRootNode,
+  materializeButtonConfiguratorTree,
+  moveButtonConfiguratorNodeToParent,
+  moveButtonConfiguratorSibling,
+  removeButtonConfiguratorSubtree,
+  updateButtonConfiguratorNode
+} from "./menu";
+defineOptions({
+  inheritAttrs: false
+});
+const props = defineProps({
+  config: { type: null, required: true }
+});
+const emit = defineEmits(["confirm"]);
+const open = defineModel("open", { type: Boolean, ...{
+  default: false
+} });
+const { t } = useI18n();
+const search = ref("");
+const draftGap = ref(props.config.gap ?? 12);
+const draftStyle = ref(props.config.style);
+const selectedItemId = ref("general");
+const draftTree = ref(buildButtonConfiguratorTree(props.config.groups));
+const sortableListRef = ref(null);
+const sortableItemIds = ref([]);
+const validationErrors = ref({});
+const sortable = useSortable(sortableListRef, sortableItemIds);
+function handleSortableUpdate(event) {
+  if (event.oldIndex === void 0 || event.newIndex === void 0 || event.oldIndex === event.newIndex) {
+    return;
+  }
+  draftTree.value = moveButtonConfiguratorSibling(
+    draftTree.value,
+    selectedItemId.value === "general" ? void 0 : selectedItemId.value,
+    event.oldIndex,
+    event.newIndex
+  );
+}
+function configureSortable() {
+  sortable.option("handle", '[data-slot="button-configurator-drag-handle"]');
+  sortable.option("animation", 150);
+  sortable.option("onUpdate", handleSortableUpdate);
+}
+async function refreshSortable() {
+  sortable.stop();
+  if (!open.value || selectedContainerItemIds.value.length === 0) {
+    return;
+  }
+  await nextTick();
+  sortable.start();
+  configureSortable();
+}
+const normalizedSearch = computed(() => search.value.trim().toLocaleLowerCase());
+const generalItem = computed(() => ({
+  id: "general",
+  label: t("general")
+}));
+const selectedNode = computed(() => {
+  if (selectedItemId.value === "general") {
+    return void 0;
+  }
+  return getButtonConfiguratorNode(draftTree.value, selectedItemId.value);
+});
+const selectedGroup = computed(() => selectedNode.value?.item.type === "group" ? selectedNode.value.item : void 0);
+const selectedButton = computed(() => selectedNode.value?.item.type === "button" ? selectedNode.value.item : void 0);
+const selectedDropdown = computed(() => selectedNode.value?.item.type === "dropdown" ? selectedNode.value.item : void 0);
+const selectedNodeItemId = computed(() => selectedNode.value?.itemId ?? "");
+const selectedParentNodeId = computed(() => {
+  const parentItemId = selectedNode.value?.parentItemId;
+  if (!parentItemId) {
+    return "";
+  }
+  return getButtonConfiguratorNode(draftTree.value, parentItemId)?.item.id ?? "";
+});
+const selectedButtonIsInGroup = computed(() => {
+  const parentItemId = selectedNode.value?.parentItemId;
+  if (!parentItemId) {
+    return false;
+  }
+  return getButtonConfiguratorNode(draftTree.value, parentItemId)?.item.type === "group";
+});
+const canAddGroup = computed(() => selectedItemId.value === "general");
+const canAddGroupButton = computed(() => selectedNode.value?.item.type === "group");
+const canAddGroupDropdown = computed(() => selectedNode.value?.item.type === "group");
+const canAddDropdownChildButton = computed(() => selectedNode.value?.item.type === "dropdown");
+const flattenedItems = computed(() => flattenButtonConfiguratorTree(draftTree.value).map((item) => ({
+  itemId: item.itemId,
+  depth: item.depth,
+  label: getNodeLabel(item.item),
+  type: item.item.type,
+  id: item.item.id
+})));
+const filteredItems = computed(() => {
+  if (!normalizedSearch.value) {
+    return flattenedItems.value;
+  }
+  return flattenedItems.value.filter((item) => {
+    const haystack = `${item.label} ${item.id}`.toLocaleLowerCase();
+    return haystack.includes(normalizedSearch.value);
+  });
+});
+const selectedItemLabel = computed(() => {
+  if (!selectedNode.value) {
+    return generalItem.value.label;
+  }
+  return getNodeLabel(selectedNode.value.item);
+});
+const selectedContainerItemIds = computed(() => {
+  if (selectedItemId.value === "general") {
+    return draftTree.value.rootItemIds;
+  }
+  if (!selectedNode.value) {
+    return [];
+  }
+  if (selectedNode.value.item.type === "button") {
+    return [];
+  }
+  return selectedNode.value.childItemIds;
+});
+const childItemsTitle = computed(() => {
+  if (selectedItemId.value === "general") {
+    return t("groups");
+  }
+  if (selectedGroup.value) {
+    return t("group-items");
+  }
+  return t("children");
+});
+const childItems = computed(() => selectedContainerItemIds.value.flatMap((itemId) => {
+  const node = getButtonConfiguratorNode(draftTree.value, itemId);
+  if (!node) {
+    return [];
+  }
+  return [{
+    itemId: node.itemId,
+    label: getNodeLabel(node.item),
+    type: node.item.type,
+    id: node.item.id
+  }];
+}));
+const buttonParentOptions = computed(() => draftTree.value.nodes.flatMap((node) => {
+  if (node.item.type === "group") {
+    return [{
+      id: node.item.id,
+      itemId: node.itemId,
+      label: getNodeLabel(node.item),
+      type: "group"
+    }];
+  }
+  if (node.item.type === "dropdown") {
+    return [{
+      id: node.item.id,
+      itemId: node.itemId,
+      label: getNodeLabel(node.item),
+      type: "dropdown"
+    }];
+  }
+  return [];
+}));
+const dropdownParentOptions = computed(() => draftTree.value.nodes.flatMap((node) => node.item.type === "group" ? [{
+  id: node.item.id,
+  itemId: node.itemId,
+  label: getNodeLabel(node.item)
+}] : []));
+watch(() => props.config, (config) => {
+  applyDraftConfig(config);
+}, { immediate: true });
+watch([selectedContainerItemIds, selectedItemId], () => {
+  sortableItemIds.value = selectedContainerItemIds.value.slice();
+  sortable.option("disabled", selectedContainerItemIds.value.length === 0);
+});
+watch([open, selectedItemId, selectedContainerItemIds], async () => {
+  await refreshSortable();
+}, { immediate: true });
+watch(filteredItems, (items) => {
+  if (selectedItemId.value === "general") {
+    return;
+  }
+  if (items.some((item) => item.itemId === selectedItemId.value)) {
+    return;
+  }
+  selectedItemId.value = items[0]?.itemId ?? "general";
+}, { immediate: true });
+function getZhText(value) {
+  if (!value) {
+    return void 0;
+  }
+  const zhValue = value.find((item) => item.locale === "zh");
+  if (!zhValue) {
+    return void 0;
+  }
+  const message = zhValue.message.trim();
+  return message.length > 0 ? message : void 0;
+}
+function normalizeOptionalString(value) {
+  const normalized = value.trim();
+  return normalized.length > 0 ? normalized : void 0;
+}
+function getGeneralErrorKey(field) {
+  return `general.${field}`;
+}
+function clearError(key) {
+  const nextErrors = {};
+  for (const [errorKey, errorValue] of Object.entries(validationErrors.value)) {
+    if (errorKey !== key) {
+      Reflect.set(nextErrors, errorKey, errorValue);
+    }
+  }
+  validationErrors.value = nextErrors;
+}
+function isCopyableNode(node) {
+  if (!node) {
+    return false;
+  }
+  return node.item.type === "button" || node.item.type === "dropdown";
+}
+function getNodeLabel(item) {
+  if (item.type === "group") {
+    return t("group-label");
+  }
+  return getZhText(item.title) ?? t(item.type === "button" ? "untitled-button" : "untitled-dropdown");
+}
+function applyDraftConfig(config) {
+  draftGap.value = config.gap ?? 12;
+  draftStyle.value = config.style;
+  draftTree.value = buildButtonConfiguratorTree(config.groups);
+  validationErrors.value = {};
+  selectedItemId.value = "general";
+  sortableItemIds.value = draftTree.value.rootItemIds.slice();
+}
+function selectGeneral() {
+  selectedItemId.value = "general";
+}
+function selectItem(itemId) {
+  selectedItemId.value = itemId;
+}
+function addGroup() {
+  const node = createButtonConfiguratorGroupNode();
+  draftTree.value = insertButtonConfiguratorRootNode(draftTree.value, node);
+  selectedItemId.value = node.itemId;
+}
+function addButton() {
+  const node = createButtonConfiguratorButtonNode();
+  if (selectedNode.value?.item.type === "group" || selectedNode.value?.item.type === "dropdown") {
+    draftTree.value = insertButtonConfiguratorChildNode(draftTree.value, selectedNode.value.itemId, node);
+    selectedItemId.value = node.itemId;
+  }
+}
+function addDropdown() {
+  const node = createButtonConfiguratorDropdownNode();
+  if (selectedNode.value?.item.type === "group") {
+    draftTree.value = insertButtonConfiguratorChildNode(draftTree.value, selectedNode.value.itemId, node);
+    selectedItemId.value = node.itemId;
+  }
+}
+function deleteItem(itemId) {
+  draftTree.value = removeButtonConfiguratorSubtree(draftTree.value, itemId);
+  if (selectedItemId.value === itemId) {
+    selectedItemId.value = "general";
+  }
+}
+function updateGap(value) {
+  const parsed = Number(value);
+  if (Number.isFinite(parsed) && parsed >= 0) {
+    draftGap.value = parsed;
+  }
+}
+function updateDraftStyle(value) {
+  clearError(getGeneralErrorKey("style"));
+  draftStyle.value = normalizeOptionalString(String(value));
+}
+function updateSelectedTitle(value) {
+  const node = selectedNode.value;
+  if (!node) {
+    return;
+  }
+  draftTree.value = updateButtonConfiguratorNode(draftTree.value, node.itemId, (item) => {
+    if (item.type === "group") {
+      return item;
+    }
+    return {
+      ...item,
+      title: value
+    };
+  });
+}
+function updateSelectedTooltip(value) {
+  const node = selectedNode.value;
+  if (!node || node.item.type !== "button") {
+    return;
+  }
+  draftTree.value = updateButtonConfiguratorNode(draftTree.value, node.itemId, (item) => {
+    if (item.type !== "button") {
+      return item;
+    }
+    return {
+      ...item,
+      tooltip: value
+    };
+  });
+}
+function updateSelectedIcon(value) {
+  const node = selectedNode.value;
+  if (!node) {
+    return;
+  }
+  draftTree.value = updateButtonConfiguratorNode(draftTree.value, node.itemId, (item) => {
+    if (item.type === "group") {
+      return item;
+    }
+    if (item.type === "button") {
+      const nextItem2 = {
+        type: "button",
+        id: item.id,
+        title: item.title
+      };
+      if (item.variant) {
+        nextItem2.variant = item.variant;
+      }
+      if (item.hideTitle) {
+        nextItem2.hideTitle = item.hideTitle;
+      }
+      if (item.tooltip) {
+        nextItem2.tooltip = item.tooltip;
+      }
+      if (value) {
+        nextItem2.icon = value;
+      }
+      return nextItem2;
+    }
+    const nextItem = {
+      type: "dropdown",
+      id: item.id,
+      title: item.title
+    };
+    if (value) {
+      nextItem.icon = value;
+    }
+    return nextItem;
+  });
+}
+function updateSelectedVariant(value) {
+  const node = selectedNode.value;
+  if (!node || node.item.type !== "button" || typeof value !== "string") {
+    return;
+  }
+  draftTree.value = updateButtonConfiguratorNode(draftTree.value, node.itemId, (item) => {
+    if (item.type !== "button") {
+      return item;
+    }
+    return {
+      ...item,
+      variant: value === "default" || value === "primary" || value === "destructive" || value === "ghost" ? value : void 0
+    };
+  });
+}
+function updateSelectedHideTitle(value) {
+  const node = selectedNode.value;
+  if (!node || node.item.type !== "button" || !selectedButtonIsInGroup.value || typeof value !== "boolean") {
+    return;
+  }
+  draftTree.value = updateButtonConfiguratorNode(draftTree.value, node.itemId, (item) => {
+    if (item.type !== "button") {
+      return item;
+    }
+    if (!value) {
+      return {
+        type: "button",
+        id: item.id,
+        title: item.title,
+        tooltip: item.tooltip,
+        icon: item.icon,
+        variant: item.variant
+      };
+    }
+    return {
+      ...item,
+      hideTitle: true
+    };
+  });
+}
+function moveSelectedButtonParent(value) {
+  const node = selectedNode.value;
+  if (!node || node.item.type !== "button" || typeof value !== "string") {
+    return;
+  }
+  const targetParent = buttonParentOptions.value.find((option) => option.id === value);
+  if (!targetParent) {
+    return;
+  }
+  draftTree.value = moveButtonConfiguratorNodeToParent(draftTree.value, node.itemId, targetParent.itemId);
+}
+function moveSelectedDropdownParent(value) {
+  const node = selectedNode.value;
+  if (!node || node.item.type !== "dropdown" || typeof value !== "string") {
+    return;
+  }
+  const targetParent = dropdownParentOptions.value.find((option) => option.id === value);
+  if (!targetParent) {
+    return;
+  }
+  draftTree.value = moveButtonConfiguratorNodeToParent(draftTree.value, node.itemId, targetParent.itemId);
+}
+function handleSelectedVariantUpdate(value) {
+  if (typeof value === "string") {
+    updateSelectedVariant(value);
+  }
+}
+function handleSelectedButtonParentUpdate(value) {
+  if (typeof value === "string") {
+    moveSelectedButtonParent(value);
+  }
+}
+function handleSelectedDropdownParentUpdate(value) {
+  if (typeof value === "string") {
+    moveSelectedDropdownParent(value);
+  }
+}
+async function copySelectedId() {
+  const node = selectedNode.value;
+  if (!node || !isCopyableNode(node)) {
+    return;
+  }
+  try {
+    await navigator.clipboard.writeText(node.item.id);
+  } catch {
+    return;
+  }
+}
+function confirmChanges() {
+  const generalStyleResult = ButtonsStyleC.safeParse(draftStyle.value);
+  if (!generalStyleResult.success) {
+    validationErrors.value = {
+      ...validationErrors.value,
+      [getGeneralErrorKey("style")]: generalStyleResult.error.issues[0]?.message ?? t("general-style-invalid")
+    };
+    selectedItemId.value = "general";
+    return;
+  }
+  const result = ButtonConfigC.safeParse({
+    gap: draftGap.value,
+    style: generalStyleResult.data,
+    groups: materializeButtonConfiguratorTree(draftTree.value)
+  });
+  if (!result.success) {
+    return;
+  }
+  emit("confirm", result.data);
+  open.value = false;
+}
+</script>
+
+<template>
+  <Dialog
+    :open="open"
+    @update:open="open = $event"
+  >
+    <DialogContent class="flex h-[min(40rem,calc(100vh-4rem))] w-[calc(100%-2rem)] max-w-[calc(100%-2rem)] flex-col overflow-hidden p-0 sm:w-[72rem] sm:max-w-[72rem]">
+      <DialogHeader class="gap-1 border-b border-zinc-200 px-6 py-5">
+        <DialogTitle class="text-xl font-semibold text-zinc-800">
+          {{ t("configure-buttons") }}
+        </DialogTitle>
+        <DialogDescription class="text-sm text-zinc-500">
+          {{ t("configure-buttons-description") }}
+        </DialogDescription>
+      </DialogHeader>
+
+      <div class="grid min-h-0 flex-1 grid-cols-[18rem_minmax(0,1fr)]">
+        <section class="flex min-h-0 flex-col border-r border-zinc-200 px-4 py-4">
+          <Input
+            v-model="search"
+            data-slot="button-configurator-search"
+            :placeholder="t('search')"
+          />
+
+          <div class="mt-4 flex min-h-0 flex-1 flex-col overflow-hidden">
+            <div class="flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto pr-1">
+              <button
+                type="button"
+                data-slot="button-configurator-item"
+                data-item-id="general"
+                :data-selected="selectedItemId === 'general' ? 'true' : 'false'"
+                :class="cn(
+  'flex w-full items-center rounded-md border p-1 text-left transition-colors',
+  selectedItemId === 'general' ? 'border-(--primary)/25 bg-[color-mix(in_srgb,var(--primary)_10%,white)]' : 'border-transparent hover:border-zinc-200 hover:bg-zinc-50'
+)"
+                @click="selectGeneral"
+              >
+                <span class="truncate px-2 py-2 text-sm font-medium text-zinc-800">
+                  {{ generalItem.label }}
+                </span>
+              </button>
+
+              <div
+                v-for="item in filteredItems"
+                :key="item.itemId"
+                data-slot="button-configurator-item"
+                :data-item-id="item.itemId"
+                :data-node-id="item.id"
+                :data-selected="selectedItemId === item.itemId ? 'true' : 'false'"
+                :class="cn(
+  'flex w-full items-center gap-2 rounded-md border p-1 text-left transition-colors',
+  selectedItemId === item.itemId ? 'border-(--primary)/25 bg-[color-mix(in_srgb,var(--primary)_10%,white)]' : 'border-transparent hover:border-zinc-200 hover:bg-zinc-50'
+)"
+                :style="{ paddingInlineStart: `${item.depth * 14 + 8}px` }"
+              >
+                <button
+                  type="button"
+                  data-slot="button-configurator-item-select"
+                  class="min-w-0 flex-1 text-left"
+                  @click="selectItem(item.itemId)"
+                >
+                  <span
+                    data-slot="button-configurator-item-label"
+                    class="block truncate px-2 py-2 text-sm font-medium text-zinc-800"
+                  >
+                    {{ item.label }}
+                  </span>
+                </button>
+
+                <button
+                  type="button"
+                  data-slot="button-configurator-item-delete"
+                  class="flex size-8 shrink-0 items-center justify-center rounded-sm text-zinc-400 transition-colors hover:bg-red-50 hover:text-red-600"
+                  @click.stop="deleteItem(item.itemId)"
+                >
+                  <Icon icon="fluent:delete-20-regular" />
+                </button>
+              </div>
+
+              <p
+                v-if="filteredItems.length === 0 && normalizedSearch"
+                data-slot="button-configurator-empty"
+                class="px-2 pt-2 text-xs text-zinc-400"
+              >
+                {{ t("no-matches") }}
+              </p>
+            </div>
+          </div>
+        </section>
+
+        <section class="flex min-h-0 flex-col overflow-y-auto px-6 py-6">
+          <div class="flex items-center gap-2">
+            <h3
+              data-slot="button-configurator-detail-title"
+              class="text-lg font-semibold text-zinc-800"
+            >
+              {{ selectedItemLabel }}
+            </h3>
+            <Button
+              v-if="isCopyableNode(selectedNode)"
+              type="button"
+              variant="ghost"
+              size="sm"
+              data-slot="button-configurator-copy-id"
+              class="size-7 p-0 text-zinc-400 hover:text-zinc-700"
+              :title="selectedNode?.item.id"
+              @click="void copySelectedId()"
+            >
+              <Icon icon="fluent:copy-20-regular" />
+            </Button>
+          </div>
+
+          <p class="mt-2 text-sm text-zinc-500">
+            {{ selectedItemId === "general" ? t("general-description") : t("detail-description") }}
+          </p>
+
+          <div class="mt-6 flex flex-wrap gap-2">
+            <Button
+              v-if="canAddGroup"
+              type="button"
+              data-slot="button-configurator-add-group"
+              @click="addGroup"
+            >
+              <Icon icon="fluent:add-20-regular" />
+              {{ t("add-group") }}
+            </Button>
+
+            <Button
+              v-if="canAddGroupButton || canAddDropdownChildButton"
+              type="button"
+              data-slot="button-configurator-add-button"
+              @click="addButton"
+            >
+              <Icon icon="fluent:add-20-regular" />
+              {{ t("add-button") }}
+            </Button>
+
+            <Button
+              v-if="canAddGroupDropdown"
+              type="button"
+              data-slot="button-configurator-add-dropdown"
+              @click="addDropdown"
+            >
+              <Icon icon="fluent:add-20-regular" />
+              {{ t("add-dropdown") }}
+            </Button>
+          </div>
+
+          <section
+            v-if="selectedItemId === 'general'"
+            data-slot="button-configurator-general"
+            class="mt-6 grid gap-4"
+          >
+            <label class="flex flex-col gap-2">
+              <span class="text-xs font-medium text-zinc-500">{{ t("group-gap") }}</span>
+              <Input
+                data-slot="button-configurator-gap"
+                type="number"
+                min="0"
+                :model-value="`${draftGap}`"
+                @update:model-value="updateGap"
+              />
+            </label>
+
+            <label
+              data-slot="button-configurator-general-style-section"
+              class="flex flex-col gap-2"
+            >
+              <span class="text-xs font-medium text-zinc-500">{{ t("general-style") }}</span>
+              <Textarea
+                data-slot="button-configurator-general-style-input"
+                :model-value="draftStyle ?? ''"
+                :aria-invalid="validationErrors[getGeneralErrorKey('style')] ? 'true' : void 0"
+                :placeholder="t('general-style-placeholder')"
+                class="min-h-20 font-mono text-sm"
+                @update:model-value="updateDraftStyle"
+              />
+              <p
+                v-if="validationErrors[getGeneralErrorKey('style')]"
+                data-slot="button-configurator-general-style-error"
+                class="text-xs text-red-500"
+              >
+                {{ validationErrors[getGeneralErrorKey("style")] }}
+              </p>
+            </label>
+          </section>
+
+          <section
+            v-else-if="selectedGroup"
+            data-slot="button-configurator-group"
+            class="mt-6 grid gap-4"
+          >
+            <Button
+              type="button"
+              variant="ghost"
+              data-slot="button-configurator-delete-selected"
+              class="justify-start text-red-600 hover:bg-red-50 hover:text-red-700"
+              @click="deleteItem(selectedNodeItemId)"
+            >
+              <Icon icon="fluent:delete-20-regular" />
+              {{ t("delete-group") }}
+            </Button>
+          </section>
+
+          <section
+            v-else-if="selectedButton"
+            data-slot="button-configurator-button"
+            class="mt-6 grid gap-4"
+          >
+            <label class="flex flex-col gap-2">
+              <span class="text-xs font-medium text-zinc-500">{{ t("button-title") }}</span>
+              <Locale
+                data-slot="button-configurator-button-title"
+                :model-value="selectedButton.title"
+                @update:model-value="updateSelectedTitle"
+              />
+            </label>
+
+            <label class="flex flex-col gap-2">
+              <span class="text-xs font-medium text-zinc-500">{{ t("button-icon") }}</span>
+              <IconPicker
+                data-slot="button-configurator-button-icon"
+                :model-value="selectedButton.icon"
+                @update:model-value="updateSelectedIcon"
+              />
+            </label>
+
+            <label class="flex flex-col gap-2">
+              <span class="text-xs font-medium text-zinc-500">{{ t("tooltip") }}</span>
+              <Locale
+                data-slot="button-configurator-button-tooltip"
+                :model-value="selectedButton.tooltip"
+                @update:model-value="updateSelectedTooltip"
+              />
+            </label>
+
+            <label class="flex flex-col gap-2">
+              <span class="text-xs font-medium text-zinc-500">{{ t("button-variant") }}</span>
+              <NativeSelect
+                data-slot="button-configurator-button-variant"
+                :model-value="selectedButton.variant ?? ''"
+                @update:model-value="handleSelectedVariantUpdate"
+              >
+                <NativeSelectOption value="">
+                  {{ t("button-variant-default") }}
+                </NativeSelectOption>
+                <NativeSelectOption value="default">
+                  {{ t("button-variant-default-option") }}
+                </NativeSelectOption>
+                <NativeSelectOption value="primary">
+                  {{ t("button-variant-primary") }}
+                </NativeSelectOption>
+                <NativeSelectOption value="destructive">
+                  {{ t("button-variant-destructive") }}
+                </NativeSelectOption>
+                <NativeSelectOption value="ghost">
+                  {{ t("button-variant-ghost") }}
+                </NativeSelectOption>
+              </NativeSelect>
+            </label>
+
+            <label class="flex flex-col gap-2">
+              <span class="text-xs font-medium text-zinc-500">{{ t("button-parent") }}</span>
+              <NativeSelect
+                data-slot="button-configurator-button-parent"
+                :model-value="selectedParentNodeId"
+                @update:model-value="handleSelectedButtonParentUpdate"
+              >
+                <NativeSelectOption
+                  v-for="option in buttonParentOptions"
+                  :key="option.itemId"
+                  :value="option.id"
+                >
+                  {{ option.type === "group" ? `${t("group-label")} \xB7 ${option.label}` : `${t("dropdown-label")} \xB7 ${option.label}` }}
+                </NativeSelectOption>
+              </NativeSelect>
+            </label>
+
+            <label
+              v-if="selectedButtonIsInGroup"
+              class="flex items-center gap-3 rounded-md border border-zinc-200 px-3 py-2"
+            >
+              <Checkbox
+                data-slot="button-configurator-button-hide-title"
+                :model-value="selectedButton.hideTitle ?? false"
+                @update:model-value="updateSelectedHideTitle"
+              />
+              <span class="text-sm text-zinc-700">{{ t("button-hide-title") }}</span>
+            </label>
+
+            <Button
+              type="button"
+              variant="ghost"
+              data-slot="button-configurator-delete-selected"
+              class="justify-start text-red-600 hover:bg-red-50 hover:text-red-700"
+              @click="deleteItem(selectedNodeItemId)"
+            >
+              <Icon icon="fluent:delete-20-regular" />
+              {{ t("delete-button") }}
+            </Button>
+          </section>
+
+          <section
+            v-else-if="selectedDropdown"
+            data-slot="button-configurator-dropdown"
+            class="mt-6 grid gap-4"
+          >
+            <label class="flex flex-col gap-2">
+              <span class="text-xs font-medium text-zinc-500">{{ t("dropdown-title") }}</span>
+              <Locale
+                data-slot="button-configurator-dropdown-title"
+                :model-value="selectedDropdown.title"
+                @update:model-value="updateSelectedTitle"
+              />
+            </label>
+
+            <label class="flex flex-col gap-2">
+              <span class="text-xs font-medium text-zinc-500">{{ t("dropdown-icon") }}</span>
+              <IconPicker
+                data-slot="button-configurator-dropdown-icon"
+                :model-value="selectedDropdown.icon"
+                @update:model-value="updateSelectedIcon"
+              />
+            </label>
+
+            <label class="flex flex-col gap-2">
+              <span class="text-xs font-medium text-zinc-500">{{ t("dropdown-parent") }}</span>
+              <NativeSelect
+                data-slot="button-configurator-dropdown-parent"
+                :model-value="selectedParentNodeId"
+                @update:model-value="handleSelectedDropdownParentUpdate"
+              >
+                <NativeSelectOption
+                  v-for="option in dropdownParentOptions"
+                  :key="option.itemId"
+                  :value="option.id"
+                >
+                  {{ `${t("group-label")} \xB7 ${option.label}` }}
+                </NativeSelectOption>
+              </NativeSelect>
+            </label>
+
+            <Button
+              type="button"
+              variant="ghost"
+              data-slot="button-configurator-delete-selected"
+              class="justify-start text-red-600 hover:bg-red-50 hover:text-red-700"
+              @click="deleteItem(selectedNodeItemId)"
+            >
+              <Icon icon="fluent:delete-20-regular" />
+              {{ t("delete-dropdown") }}
+            </Button>
+          </section>
+
+          <section
+            v-if="childItems.length > 0"
+            class="mt-6 flex min-h-0 flex-1 flex-col"
+          >
+            <div class="mb-2 flex items-center justify-between">
+              <span class="text-xs font-medium text-zinc-500">{{ childItemsTitle }}</span>
+            </div>
+
+            <div
+              ref="sortableListRef"
+              data-slot="button-configurator-child-list"
+              class="flex flex-col gap-1"
+            >
+              <div
+                v-for="item in childItems"
+                :key="item.itemId"
+                data-slot="button-configurator-child-item"
+                :data-item-id="item.itemId"
+                :data-node-id="item.id"
+                class="flex items-center gap-2 rounded-md border border-zinc-200 p-1"
+              >
+                <button
+                  type="button"
+                  data-slot="button-configurator-drag-handle"
+                  class="flex size-8 shrink-0 cursor-grab items-center justify-center rounded-sm text-zinc-400 active:cursor-grabbing"
+                >
+                  <Icon icon="fluent:re-order-dots-vertical-20-regular" />
+                </button>
+
+                <button
+                  type="button"
+                  data-slot="button-configurator-child-select"
+                  class="min-w-0 flex-1 px-2 py-2 text-left"
+                  @click="selectItem(item.itemId)"
+                >
+                  <span class="block truncate text-sm font-medium text-zinc-800">
+                    {{ item.label }}
+                  </span>
+                </button>
+
+                <button
+                  type="button"
+                  data-slot="button-configurator-child-delete"
+                  class="flex size-8 shrink-0 items-center justify-center rounded-sm text-zinc-400 transition-colors hover:bg-red-50 hover:text-red-600"
+                  @click="deleteItem(item.itemId)"
+                >
+                  <Icon icon="fluent:delete-20-regular" />
+                </button>
+              </div>
+            </div>
+          </section>
+        </section>
+      </div>
+
+      <DialogFooter class="border-t border-zinc-200 px-6 py-4">
+        <Button
+          type="button"
+          variant="default"
+          data-slot="button-configurator-cancel"
+          @click="open = false"
+        >
+          <Icon icon="fluent:dismiss-20-regular" />
+          {{ t("cancel") }}
+        </Button>
+        <Button
+          type="button"
+          variant="primary"
+          data-slot="button-configurator-confirm"
+          @click="confirmChanges"
+        >
+          <Icon icon="fluent:checkmark-20-regular" />
+          {{ t("confirm") }}
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
+
+<i18n lang="json">
+{
+  "zh": {
+    "configure-buttons": "配置按钮",
+    "configure-buttons-description": "管理多个按钮组、组间距和下拉按钮结构。",
+    "general": "总览",
+    "general-description": "在这里管理按钮组和按钮组之间的间距。",
+    "detail-description": "编辑当前选中节点，或调整它的子项顺序。",
+    "search": "搜索按钮",
+    "no-matches": "没有匹配的按钮。",
+    "group-label": "按钮组",
+    "groups": "按钮组",
+    "group-items": "组内按钮",
+    "dropdown-label": "下拉按钮",
+    "untitled-button": "未命名按钮",
+    "untitled-dropdown": "未命名下拉按钮",
+    "add-group": "新增按钮组",
+    "add-button": "新增按钮",
+    "add-dropdown": "新增下拉按钮",
+    "group-gap": "按钮组间距",
+    "general-style": "通用样式表达式",
+    "general-style-placeholder": "例如返回一个 style map，例如 display: flex",
+    "general-style-invalid": "样式表达式无效",
+    "button-title": "按钮名称",
+    "tooltip": "提示",
+    "button-icon": "按钮图标",
+    "button-variant": "按钮变体",
+    "button-variant-default": "默认",
+    "button-variant-default-option": "默认按钮",
+    "button-variant-primary": "主按钮",
+    "button-variant-destructive": "危险按钮",
+    "button-variant-ghost": "幽灵按钮",
+    "button-parent": "所属容器",
+    "button-hide-title": "隐藏文字，仅显示图标",
+    "dropdown-title": "下拉名称",
+    "dropdown-icon": "下拉图标",
+    "dropdown-parent": "所属按钮组",
+    "children": "子项",
+    "delete-group": "删除按钮组",
+    "delete-button": "删除按钮",
+    "delete-dropdown": "删除下拉按钮",
+    "cancel": "取消",
+    "confirm": "确认"
+  },
+  "en": {
+    "configure-buttons": "Configure buttons",
+    "configure-buttons-description": "Manage button groups, group gaps, and dropdown structure.",
+    "general": "General",
+    "general-description": "Manage button groups and the gap between them.",
+    "detail-description": "Edit the selected node and reorder its children.",
+    "search": "Search buttons",
+    "no-matches": "No matching buttons.",
+    "group-label": "Group",
+    "groups": "Groups",
+    "group-items": "Group items",
+    "dropdown-label": "Dropdown",
+    "untitled-button": "Untitled button",
+    "untitled-dropdown": "Untitled dropdown",
+    "add-group": "Add group",
+    "add-button": "Add button",
+    "add-dropdown": "Add dropdown",
+    "group-gap": "Group gap",
+    "general-style": "Shared style expression",
+    "general-style-placeholder": "Return a style map, for example display: flex",
+    "general-style-invalid": "The style expression is invalid",
+    "button-title": "Button title",
+    "tooltip": "Tooltip",
+    "button-icon": "Button icon",
+    "button-variant": "Button variant",
+    "button-variant-default": "Default",
+    "button-variant-default-option": "Default",
+    "button-variant-primary": "Primary",
+    "button-variant-destructive": "Destructive",
+    "button-variant-ghost": "Ghost",
+    "button-parent": "Parent container",
+    "button-hide-title": "Hide text and show icon only",
+    "dropdown-title": "Dropdown title",
+    "dropdown-icon": "Dropdown icon",
+    "dropdown-parent": "Parent group",
+    "children": "Children",
+    "delete-group": "Delete group",
+    "delete-button": "Delete button",
+    "delete-dropdown": "Delete dropdown",
+    "cancel": "Cancel",
+    "confirm": "Confirm"
+  },
+  "ja": {
+    "configure-buttons": "ボタン設定",
+    "configure-buttons-description": "複数のボタングループとドロップダウン構造を管理します。",
+    "general": "全体",
+    "general-description": "ボタングループとその間隔を管理します。",
+    "detail-description": "選択中ノードを編集し、子項目を並び替えます。",
+    "search": "ボタンを検索",
+    "no-matches": "一致するボタンがありません。",
+    "group-label": "グループ",
+    "groups": "グループ",
+    "group-items": "グループ内項目",
+    "dropdown-label": "ドロップダウン",
+    "untitled-button": "未命名ボタン",
+    "untitled-dropdown": "未命名ドロップダウン",
+    "add-group": "グループを追加",
+    "add-button": "ボタンを追加",
+    "add-dropdown": "ドロップダウンを追加",
+    "group-gap": "グループ間隔",
+    "general-style": "共通スタイル式",
+    "general-style-placeholder": "例: style map を返す式。例: display: flex",
+    "general-style-invalid": "スタイル式が無効です",
+    "button-title": "ボタン名",
+    "tooltip": "ツールチップ",
+    "button-icon": "ボタンアイコン",
+    "button-variant": "ボタンバリアント",
+    "button-variant-default": "デフォルト",
+    "button-variant-default-option": "通常",
+    "button-variant-primary": "プライマリ",
+    "button-variant-destructive": "危険",
+    "button-variant-ghost": "ゴースト",
+    "button-parent": "親コンテナ",
+    "button-hide-title": "テキストを隠してアイコンのみ表示",
+    "dropdown-title": "ドロップダウン名",
+    "dropdown-icon": "ドロップダウンアイコン",
+    "dropdown-parent": "親グループ",
+    "children": "子項目",
+    "delete-group": "グループを削除",
+    "delete-button": "ボタンを削除",
+    "delete-dropdown": "ドロップダウンを削除",
+    "cancel": "キャンセル",
+    "confirm": "確認"
+  },
+  "ko": {
+    "configure-buttons": "버튼 설정",
+    "configure-buttons-description": "여러 버튼 그룹과 드롭다운 구조를 관리합니다.",
+    "general": "전체",
+    "general-description": "버튼 그룹과 그룹 간 간격을 관리합니다.",
+    "detail-description": "선택한 노드를 편집하고 하위 항목 순서를 조정합니다.",
+    "search": "버튼 검색",
+    "no-matches": "일치하는 버튼이 없습니다.",
+    "group-label": "그룹",
+    "groups": "그룹",
+    "group-items": "그룹 항목",
+    "dropdown-label": "드롭다운",
+    "untitled-button": "이름 없는 버튼",
+    "untitled-dropdown": "이름 없는 드롭다운",
+    "add-group": "그룹 추가",
+    "add-button": "버튼 추가",
+    "add-dropdown": "드롭다운 추가",
+    "group-gap": "그룹 간격",
+    "general-style": "공통 스타일 식",
+    "general-style-placeholder": "예: style map 을 반환하는 식. 예: display: flex",
+    "general-style-invalid": "스타일 식이 올바르지 않습니다",
+    "button-title": "버튼 이름",
+    "tooltip": "툴팁",
+    "button-icon": "버튼 아이콘",
+    "button-variant": "버튼 변형",
+    "button-variant-default": "기본값",
+    "button-variant-default-option": "기본",
+    "button-variant-primary": "주 버튼",
+    "button-variant-destructive": "위험",
+    "button-variant-ghost": "고스트",
+    "button-parent": "부모 컨테이너",
+    "button-hide-title": "텍스트를 숨기고 아이콘만 표시",
+    "dropdown-title": "드롭다운 이름",
+    "dropdown-icon": "드롭다운 아이콘",
+    "dropdown-parent": "부모 그룹",
+    "children": "하위 항목",
+    "delete-group": "그룹 삭제",
+    "delete-button": "버튼 삭제",
+    "delete-dropdown": "드롭다운 삭제",
+    "cancel": "취소",
+    "confirm": "확인"
+  }
+}
+</i18n>