@shwfed/nuxt 0.10.11 → 0.10.13

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@shwfed/nuxt",
   "configKey": "shwfed",
-  "version": "0.10.11",
+  "version": "0.10.13",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

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

@@ -43,7 +43,7 @@ const open = defineModel("open", { type: Boolean, ...{
 const { $toast } = useNuxtApp();
 const { t } = useI18n();
 const search = ref("");
-const draftGap = ref(props.config.gap ?? 12);
+const draftGap = ref(props.config.gap ?? 4);
 const draftStyle = ref(props.config.style);
 const selectedItemId = ref("general");
 const draftTree = ref(buildButtonConfiguratorTree(props.config.groups));
@@ -90,7 +90,6 @@ const selectedNode = computed(() => {
 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) {
@@ -109,13 +108,19 @@ 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 flattenedItems = computed(() => flattenButtonConfiguratorTree(draftTree.value).flatMap((item) => {
+  const node = getButtonConfiguratorNode(draftTree.value, item.itemId);
+  if (!node) {
+    return [];
+  }
+  return [{
+    itemId: item.itemId,
+    depth: item.depth,
+    label: getNodeLabel(node),
+    type: item.item.type,
+    id: item.item.id
+  }];
+}));
 const filteredItems = computed(() => {
   if (!normalizedSearch.value) {
     return flattenedItems.value;
@@ -129,7 +134,7 @@ const selectedItemLabel = computed(() => {
   if (!selectedNode.value) {
     return generalItem.value.label;
   }
-  return getNodeLabel(selectedNode.value.item);
+  return getNodeLabel(selectedNode.value);
 });
 const selectedContainerItemIds = computed(() => {
   if (selectedItemId.value === "general") {
@@ -159,7 +164,7 @@ const childItems = computed(() => selectedContainerItemIds.value.flatMap((itemId
   }
   return [{
     itemId: node.itemId,
-    label: getNodeLabel(node.item),
+    label: getNodeLabel(node),
     type: node.item.type,
     id: node.item.id
   }];
@@ -169,7 +174,7 @@ const buttonParentOptions = computed(() => draftTree.value.nodes.flatMap((node)
     return [{
       id: node.item.id,
       itemId: node.itemId,
-      label: getNodeLabel(node.item),
+      label: getNodeLabel(node),
       type: "group"
     }];
   }
@@ -177,7 +182,7 @@ const buttonParentOptions = computed(() => draftTree.value.nodes.flatMap((node)
     return [{
       id: node.item.id,
       itemId: node.itemId,
-      label: getNodeLabel(node.item),
+      label: getNodeLabel(node),
       type: "dropdown"
     }];
   }
@@ -186,7 +191,7 @@ const buttonParentOptions = computed(() => draftTree.value.nodes.flatMap((node)
 const dropdownParentOptions = computed(() => draftTree.value.nodes.flatMap((node) => node.item.type === "group" ? [{
   id: node.item.id,
   itemId: node.itemId,
-  label: getNodeLabel(node.item)
+  label: getNodeLabel(node)
 }] : []));
 watch(() => props.config, (config) => {
   applyDraftConfig(config);
@@ -240,14 +245,24 @@ function isCopyableNode(node) {
   }
   return node.item.type === "button" || node.item.type === "dropdown";
 }
-function getNodeLabel(item) {
-  if (item.type === "group") {
+function getNodeLabel(node) {
+  if (node.item.type === "group") {
+    const childLabels = node.childItemIds.flatMap((itemId) => {
+      const childNode = getButtonConfiguratorNode(draftTree.value, itemId);
+      if (!childNode || childNode.item.type === "group") {
+        return [];
+      }
+      return [getNodeLabel(childNode)];
+    });
+    if (childLabels.length > 0) {
+      return childLabels.join("\u3001");
+    }
     return t("group-label");
   }
-  return getZhText(item.title) ?? t(item.type === "button" ? "untitled-button" : "untitled-dropdown");
+  return getZhText(node.item.title) ?? t(node.item.type === "button" ? "untitled-button" : "untitled-dropdown");
 }
 function applyDraftConfig(config) {
-  draftGap.value = config.gap ?? 12;
+  draftGap.value = config.gap ?? 4;
   draftStyle.value = config.style;
   draftTree.value = buildButtonConfiguratorTree(config.groups);
   validationErrors.value = {};
@@ -882,18 +897,7 @@ function confirmChanges() {
             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"
@@ -980,17 +984,6 @@ function confirmChanges() {
               />
               <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
@@ -1032,17 +1025,6 @@ function confirmChanges() {
                 </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
@@ -1099,43 +1081,50 @@ function confirmChanges() {
         </section>
       </div>
 
-      <DialogFooter class="border-t border-zinc-200 px-6 py-4">
-        <Button
-          type="button"
-          variant="ghost"
-          data-slot="button-configurator-copy-markdown"
-          @click="void copyMarkdown()"
-        >
-          <Icon icon="fluent:document-one-page-20-regular" />
-          {{ t("copy-markdown") }}
-        </Button>
-        <Button
-          type="button"
-          variant="ghost"
-          data-slot="button-configurator-copy-config"
-          @click="void copyConfig()"
+      <DialogFooter class="border-t border-zinc-200 px-6 py-4 sm:justify-between">
+        <div
+          data-slot="button-configurator-copy-actions"
+          class="flex items-center gap-2"
         >
-          <Icon icon="fluent:code-text-20-regular" />
-          {{ t("copy-config") }}
-        </Button>
-        <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>
+          <Button
+            type="button"
+            variant="ghost"
+            data-slot="button-configurator-copy-markdown"
+            @click="void copyMarkdown()"
+          >
+            <Icon icon="simple-icons:markdown" />
+            {{ t("copy-markdown") }}
+          </Button>
+          <Button
+            type="button"
+            variant="ghost"
+            data-slot="button-configurator-copy-config"
+            @click="void copyConfig()"
+          >
+            <Icon icon="fluent:copy-20-regular" />
+            {{ t("copy-config") }}
+          </Button>
+        </div>
+        <div class="flex items-center gap-2">
+          <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>
+        </div>
       </DialogFooter>
     </DialogContent>
   </Dialog>

package/dist/runtime/components/ui/buttons/Buttons.vue

@@ -23,7 +23,7 @@ const props = defineProps({
 });
 const emit = defineEmits(["update:config"]);
 const defaultConfig = {
-  gap: 12,
+  gap: 4,
   groups: []
 };
 const uuidPattern = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/iu;
@@ -80,7 +80,7 @@ function getConfigStyle(config) {
   return style;
 }
 const rootStyle = computed(() => ({
-  gap: `calc(${displayConfig.value.gap ?? defaultConfig.gap ?? 12} * 0.25rem)`,
+  gap: `calc(${displayConfig.value.gap ?? defaultConfig.gap ?? 4} * 0.25rem)`,
   ...getConfigStyle(displayConfig.value)
 }));
 function getButtonLabel(button) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shwfed/nuxt",
-  "version": "0.10.11",
+  "version": "0.10.13",
   "description": "",
   "license": "MIT",
   "type": "module",