@shwfed/nuxt 0.1.51 → 0.1.53

package/dist/module.d.mts

@@ -66,6 +66,7 @@ interface ModuleOptions {
          */
         name: string;
     }>;
+    title: string;
 }
 interface Env {
     git: Readonly<{

package/dist/module.json

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

package/dist/runtime/components/app.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { useHead, useNuxtApp, useRouter } from "#app";
+import { useHead, useNuxtApp, useRouter, useRuntimeConfig } from "#app";
 import { computed, ref } from "vue";
 import { CommandDialog, CommandInput, CommandList, CommandGroup, CommandEmpty, CommandItem } from "./ui/command";
 import { TooltipProvider } from "./ui/tooltip";
@@ -14,6 +14,7 @@ import { Sidebar, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarMenu,
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./ui/collapsible";
 import Logo from "./logo.vue";
 const { $dsl } = useNuxtApp();
+const config = useRuntimeConfig().public.shwfed;
 const props = defineProps({
   navigation: { type: Array, required: false },
   commands: { type: Array, required: false },
@@ -38,6 +39,28 @@ whenever(() => meta_k?.value, () => {
 });
 const router = useRouter();
 setGlobalDslContext(await props.dsl?.pipe(Effect.scoped).pipe(Effect.runPromise) ?? {});
+function toNavigationKey(groupId, itemId) {
+  return groupId ? `${groupId}::${itemId}` : `::${itemId}`;
+}
+function findNavigationByKey(navList, key) {
+  const parts = key.split("::");
+  if (parts.length < 2) return void 0;
+  const groupId = parts[0] ?? "";
+  const itemId = parts[1] ?? "";
+  if (groupId === "") {
+    for (const el of navList) {
+      if (el.type === "item" && el.id === itemId) return el;
+    }
+    return void 0;
+  }
+  for (const el of navList) {
+    if (el.type === "group" && el.id === groupId) {
+      const child = el.children.find((c) => c.id === itemId);
+      return child;
+    }
+  }
+  return void 0;
+}
 const palette = computed(() => {
   const items = [];
   for (const navigation2 of props.navigation ?? []) {
@@ -62,8 +85,8 @@ const palette = computed(() => {
             external: $dsl.evaluate`${child.external}`(),
             effect: Effect.sync(function() {
               if ($dsl.evaluate`${child.external}`() !== true) {
-                tabs.value.add(child.id);
-                activeTab.value = child.id;
+                tabs.value.add(toNavigationKey(navigation2.id, child.id));
+                activeTab.value = toNavigationKey(navigation2.id, child.id);
               }
             })
           }))
@@ -81,8 +104,8 @@ const palette = computed(() => {
         external: $dsl.evaluate`${navigation2.external}`(),
         effect: Effect.sync(function() {
           if ($dsl.evaluate`${navigation2.external}`() !== true) {
-            tabs.value.add(navigation2.id);
-            activeTab.value = navigation2.id;
+            tabs.value.add(toNavigationKey("", navigation2.id));
+            activeTab.value = toNavigationKey("", navigation2.id);
           }
         })
       });
@@ -146,8 +169,8 @@ const navigation = computed(() => {
             target: child.target,
             effect: Effect.sync(function() {
               if ($dsl.evaluate`${child.external}`() !== true) {
-                tabs.value.add(child.id);
-                activeTab.value = child.id;
+                tabs.value.add(toNavigationKey(navigation2.id, child.id));
+                activeTab.value = toNavigationKey(navigation2.id, child.id);
                 router.replace(child.target);
               }
             })
@@ -165,8 +188,8 @@ const navigation = computed(() => {
           target: navigation2.target,
           effect: Effect.sync(function() {
             if ($dsl.evaluate`${navigation2.external}`() !== true) {
-              tabs.value.add(navigation2.id);
-              activeTab.value = navigation2.id;
+              tabs.value.add(toNavigationKey("", navigation2.id));
+              activeTab.value = toNavigationKey("", navigation2.id);
               router.replace(navigation2.target);
             }
           })
@@ -219,17 +242,17 @@ const navigationFavorites = useLocalStorage("navigation-favorites", [], {
 });
 const navigationFavoritesItems = computed(() => {
   const items = [];
-  for (const id of navigationFavorites.value) {
-    const item = navigation.value.flatMap((item2) => item2.type === "group" ? item2.children : [item2]).find((item2) => item2.id === id);
+  for (const key of navigationFavorites.value) {
+    const item = findNavigationByKey(navigation.value, key);
     if (!item) continue;
     items.push({
-      id: item.id,
+      id: key,
       title: item.title,
       icon: item.icon,
       effect: Effect.sync(function() {
         if (item.external !== true) {
-          tabs.value.add(item.id);
-          activeTab.value = item.id;
+          tabs.value.add(key);
+          activeTab.value = key;
           router.replace(item.target);
         }
       })
@@ -239,18 +262,18 @@ const navigationFavoritesItems = computed(() => {
 });
 const paletteFavorites = computed(() => {
   const items = [];
-  for (const id of navigationFavorites.value) {
-    const item = navigation.value.flatMap((item2) => item2.type === "group" ? item2.children : [item2]).find((item2) => item2.id === id);
+  for (const key of navigationFavorites.value) {
+    const item = findNavigationByKey(navigation.value, key);
     if (!item) continue;
     items.push({
-      id: item.id,
+      id: key,
       title: item.title,
       icon: item.icon,
       external: item.external,
       effect: Effect.sync(function() {
         if (item.external !== true) {
-          tabs.value.add(item.id);
-          activeTab.value = item.id;
+          tabs.value.add(key);
+          activeTab.value = key;
           router.replace(item.target);
         }
       })
@@ -264,6 +287,9 @@ const tabs = useSessionStorage("navigation-tabs", /* @__PURE__ */ new Set(), {
 const activeTab = useSessionStorage("navigation-active-tab", void 0, {
   writeDefaults: false
 });
+useHead({
+  title: () => activeTab.value ? findNavigationByKey(navigation.value, activeTab.value)?.title ?? config.title : config.title
+});
 </script>
 
 <template>
@@ -523,7 +549,7 @@ const activeTab = useSessionStorage("navigation-active-tab", void 0, {
                     <Collapsible
                       v-if="el.type === 'group'"
                       class="group/collapsible"
-                      :default-open="el.children.some((child) => child.id === activeTab)"
+                      :default-open="el.children.some((child) => toNavigationKey(el.id, child.id) === activeTab)"
                       as-child
                     >
                       <SidebarMenuItem>
@@ -548,7 +574,7 @@ const activeTab = useSessionStorage("navigation-active-tab", void 0, {
                               >
                                 <SidebarMenuSubButton
                                   as-child
-                                  :is-active="item.id === activeTab"
+                                  :is-active="toNavigationKey(el.id, item.id) === activeTab"
                                 >
                                   <button
                                     type="button"
@@ -563,21 +589,22 @@ const activeTab = useSessionStorage("navigation-active-tab", void 0, {
                                   </button>
                                 </SidebarMenuSubButton>
                                 <SidebarMenuAction
-                                  :class="['transition-opacity duration-80 text-yellow-400 -translate-y-1/2', !navigationFavorites.includes(item.id) && 'group-hover/menu-sub-item:opacity-100 opacity-0 ']"
+                                  :class="['transition-opacity duration-80 text-yellow-400 -translate-y-1/2', !navigationFavorites.includes(toNavigationKey(el.id, item.id)) && 'group-hover/menu-sub-item:opacity-100 opacity-0 ']"
                                   as-child
                                 >
                                   <button
                                     type="button"
                                     @click="() => {
-  if (navigationFavorites.includes(item.id)) {
-    navigationFavorites = navigationFavorites.filter((id) => id !== item.id);
+  const key = toNavigationKey(el.id, item.id);
+  if (navigationFavorites.includes(key)) {
+    navigationFavorites = navigationFavorites.filter((id) => id !== key);
   } else {
-    navigationFavorites = Array.from(/* @__PURE__ */ new Set([...navigationFavorites, item.id]));
+    navigationFavorites = Array.from(/* @__PURE__ */ new Set([...navigationFavorites, key]));
   }
 }"
                                   >
                                     <Icon
-                                      v-if="navigationFavorites.includes(item.id)"
+                                      v-if="navigationFavorites.includes(toNavigationKey(el.id, item.id))"
                                       icon="fluent:star-20-filled"
                                       class="text-yellow-400"
                                     />
@@ -607,7 +634,7 @@ const activeTab = useSessionStorage("navigation-active-tab", void 0, {
             </SidebarContent>
           </Sidebar>
         </SidebarProvider>
-        <main class="flex-1 flex flex-col bg-zinc-100">
+        <main class="flex-1 flex flex-col bg-zinc-100 overflow-hidden">
           <nav class="bg-white p-1 border-b border-zinc-100 h-10 flex items-center justify-start gap-1 overflow-x-hidden cursor-pointer min-w-0">
             <div
               v-for="tab in tabs"
@@ -615,20 +642,22 @@ const activeTab = useSessionStorage("navigation-active-tab", void 0, {
               :class="['border rounded cursor-pointer px-2 py-1 text-sm flex items-center gap-2 truncate', activeTab === tab ? 'text-(--primary) border-(--primary)' : 'text-zinc-500 border-zinc-300 hover:text-zinc-700']"
               @click="() => {
   activeTab = tab;
-  $router.replace(navigation.flatMap((item2) => item2.type === 'group' ? item2.children : [item2]).find((item2) => item2.id === tab)?.target ?? '');
+  const item2 = findNavigationByKey(navigation, tab);
+  $router.replace(item2?.target ?? '');
 }"
             >
-              {{ navigation.flatMap((item2) => item2.type === "group" ? item2.children : [item2]).find((item2) => item2.id === tab)?.title }}
+              {{ findNavigationByKey(navigation, tab)?.title ?? tab ?? "Unknown" }}
               <button
                 type="button"
                 class="opacity-80 group-hover/tab:opacity-100 transition-opacity cursor-pointer text-zinc-500 hover:text-(--primary) duration-180"
                 @click.stop="() => {
   if (activeTab === tab) {
-    const idx = Array.from(tabs).findIndex((tab2) => tab2 === activeTab) - 1;
+    const idx = Array.from(tabs).findIndex((t2) => t2 === activeTab) - 1;
     const previous = Array.from(tabs)[idx];
     if (previous) {
       activeTab = previous;
-      $router.replace(navigation.flatMap((item2) => item2.type === 'group' ? item2.children : [item2]).find((item2) => item2.id === previous)?.target ?? '');
+      const item2 = findNavigationByKey(navigation, previous);
+      $router.replace(item2?.target ?? '');
     } else {
       activeTab = void 0;
     }
@@ -640,7 +669,7 @@ const activeTab = useSessionStorage("navigation-active-tab", void 0, {
               </button>
             </div>
           </nav>
-          <main class="m-2 flex-1 p-1 bg-white border border-zinc-100 rounded">
+          <main class="m-2 flex-1 p-1 bg-white border border-zinc-100 rounded overflow-hidden">
             <slot />
           </main>
         </main>

package/package.json

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