@shwfed/nuxt 0.1.75 → 0.1.77

package/dist/runtime/components/app.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { useHead, useNuxtApp, useRoute, useRuntimeConfig } from "#app";
-import { computed, reactive, watch } from "vue";
+import { useHead, useNuxtApp, useRuntimeConfig } from "#app";
+import { reactive } from "vue";
 import { CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from "./ui/command";
 import { TooltipProvider } from "./ui/tooltip";
 import { Toaster } from "vue-sonner";
@@ -12,25 +12,28 @@ import { setGlobalDslContext } from "../plugins/cel/context";
 import { Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuAction, SidebarMenuButton, SidebarMenuItem, SidebarProvider } from "./ui/sidebar";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./ui/collapsible";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "./ui/dropdown-menu";
-import { z } from "zod";
 import Logo from "./logo.vue";
 import { useFavorite } from "../composables/useFavorite";
 import { useNavigationTabs } from "../composables/useNavigationTabs";
-import { commandActionSchema, executeCommandAction } from "../utils/command";
-import { createPaletteItemValue, normalizeCommandsForPalette, splitNavigationForPalette } from "../utils/command-palette";
-import { resolveNavigationTitle } from "../utils/navigation-title";
-import { isRouteActive } from "../utils/route";
-import { applyRootNavigationFallback } from "../utils/sidebar-fallback";
-const { $dsl, $logout, $md, $api, $toast } = useNuxtApp();
-const { t } = useI18n();
-const route = useRoute();
-const { tabs, active, tabList, activateTab, closeTab } = useNavigationTabs();
 const {
   public: {
-    shwfed: config
+    shwfed
   }
 } = useRuntimeConfig();
+const { $dsl } = useNuxtApp();
+const { t } = useI18n();
+const props = defineProps({
+  dsl: { type: null, required: false },
+  sidebar: { type: Array, required: false },
+  commands: { type: Array, required: false }
+});
+const { active, tabs, nameOf, close } = useNavigationTabs(() => props.sidebar ?? []);
+const ui = reactive({
+  isCommandPaletteOpen: false,
+  isProfileDropdownOpen: false
+});
 useHead({
+  title: () => active.value && nameOf(active.value),
   bodyAttrs: {
     style: {
       "--primary": "#2DA8BC",
@@ -38,221 +41,23 @@ useHead({
     }
   }
 });
-const props = defineProps({
-  dsl: { type: null, required: false }
-});
-const ui = reactive({
-  isCommandPaletteOpen: false,
-  isProfileDropdownOpen: false
-});
 const { start: startProfileCloseTimer, stop: stopProfileCloseTimer } = useTimeoutFn(() => {
   ui.isProfileDropdownOpen = false;
 }, 150, { immediate: false });
 const { meta_k } = useMagicKeys();
 whenever(() => meta_k?.value, () => ui.isCommandPaletteOpen = !ui.isCommandPaletteOpen);
 setGlobalDslContext(await props.dsl?.pipe(Effect.scoped).pipe(Effect.runPromise) ?? {});
-const navigationItem = z.object({
-  id: z.union([z.string(), z.number()]),
-  title: z.string(),
-  icon: z.string().optional(),
-  route: z.string(),
-  keywords: z.array(z.string()).optional()
-});
-const navigationGroup = z.object({
-  id: z.union([z.string(), z.number()]),
-  title: z.string(),
-  icon: z.string().optional(),
-  children: z.array(navigationItem)
-});
-const navigationEntry = z.union([navigationGroup, navigationItem]);
-const navigationItems = computed(() => {
-  try {
-    const result = $dsl.evaluate`${config.sidebar.menus}`();
-    return z.array(navigationEntry).parse(result);
-  } catch {
-    return [];
-  }
-});
 const {
   isFavorited: isNavigationFavorited,
   canBeFavorited: canBeNavigationFavorited,
   toggle: toggleNavigationFavorite,
   withFavorites: navigations
-} = useFavorite("navigation", navigationItems);
-const isNavigationItemActive = (itemRoute) => isRouteActive(route.path, itemRoute);
-const getTabLabel = (tab) => {
-  return resolveNavigationTitle(navigationItems.value, tab);
+} = useFavorite("navigation", () => props.sidebar ?? []);
+const logout = () => {
+  if (shwfed.api.logout)
+    window.location.href = shwfed.api.logout;
+  return Effect.void;
 };
-const activeTabLabel = computed(() => {
-  if (active.value === void 0)
-    return void 0;
-  return getTabLabel(active.value);
-});
-useHead(() => ({
-  title: activeTabLabel.value
-}));
-const profileName = computed(() => {
-  if (config.profile.name === void 0)
-    return t("profile");
-  try {
-    const content = $md.inline`${config.profile.name}`();
-    const plainText = content.replace(/<[^>]*>/g, "").trim();
-    if (plainText.length === 0)
-      return t("profile");
-    return plainText;
-  } catch {
-    return t("profile");
-  }
-});
-const commandItem = z.object({
-  id: z.union([z.string(), z.number()]),
-  title: z.string(),
-  icon: z.string().optional(),
-  hidden: z.string().optional(),
-  disabled: z.string().optional(),
-  effect: z.string().optional(),
-  keywords: z.array(z.string()).optional()
-});
-const commandGroup = z.object({
-  id: z.union([z.string(), z.number()]),
-  title: z.string(),
-  icon: z.string().optional(),
-  children: z.array(commandItem)
-});
-const evaluateDslBoolean = (expression) => {
-  if (expression === void 0)
-    return false;
-  try {
-    return $dsl.evaluate`${expression}`() === true;
-  } catch {
-    return false;
-  }
-};
-const normalizeEffectExpression = (expression) => {
-  return expression.replace(/([{,]\s*)([a-z_][\w-]*)(\s*:)/gi, "$1'$2'$3");
-};
-const profileCommands = computed(() => {
-  if (config.commands === void 0)
-    return [];
-  try {
-    const result = $dsl.evaluate`${config.commands}`();
-    const entries = z.array(z.union([commandGroup, commandItem])).parse(result);
-    const normalized = [];
-    for (const entry of entries) {
-      if ("children" in entry) {
-        const children = entry.children.filter((child) => !evaluateDslBoolean(child.hidden)).map((child) => ({
-          id: child.id,
-          title: child.title,
-          icon: child.icon,
-          disabled: evaluateDslBoolean(child.disabled),
-          effect: child.effect,
-          keywords: child.keywords
-        }));
-        if (children.length > 0) {
-          normalized.push({
-            id: entry.id,
-            title: entry.title,
-            icon: entry.icon,
-            children
-          });
-        }
-        continue;
-      }
-      if (evaluateDslBoolean(entry.hidden))
-        continue;
-      normalized.push({
-        id: entry.id,
-        title: entry.title,
-        icon: entry.icon,
-        disabled: evaluateDslBoolean(entry.disabled),
-        effect: entry.effect,
-        keywords: entry.keywords
-      });
-    }
-    return normalized;
-  } catch {
-    return [];
-  }
-});
-const isBodyInit = (value) => {
-  return typeof value === "string" || value instanceof Blob || value instanceof ArrayBuffer || ArrayBuffer.isView(value) || value instanceof FormData || value instanceof URLSearchParams || value instanceof ReadableStream;
-};
-const toApiRequestBody = (value) => {
-  if (value === void 0 || value === null)
-    return value;
-  if (isBodyInit(value))
-    return value;
-  if (typeof value === "object")
-    return value;
-  return void 0;
-};
-const executeCommandEffect = async (effect) => {
-  if (effect === void 0)
-    return false;
-  let action;
-  try {
-    let result;
-    try {
-      result = $dsl.evaluate`${effect}`();
-    } catch {
-      result = $dsl.evaluate`${normalizeEffectExpression(effect)}`();
-    }
-    action = commandActionSchema.parse(result);
-    await executeCommandAction(action, {
-      logout: $logout,
-      request: async (requestAction) => $api(requestAction.url, {
-        method: requestAction.method,
-        body: toApiRequestBody(requestAction.body),
-        query: requestAction.query,
-        headers: requestAction.headers
-      })
-    });
-    return true;
-  } catch (error) {
-    if (action?.type === "request") {
-      const message = error instanceof Error && error.message.length > 0 ? error.message : "Request failed";
-      $toast.error(message);
-    }
-    return false;
-  }
-};
-const executeProfileCommand = async (effect) => {
-  if (effect === void 0 || await executeCommandEffect(effect))
-    ui.isProfileDropdownOpen = false;
-};
-const normalizedNavigationForPalette = computed(() => {
-  try {
-    return z.array(navigationEntry).parse(navigations.value);
-  } catch {
-    return navigationItems.value;
-  }
-});
-const paletteNavigation = computed(() => splitNavigationForPalette(normalizedNavigationForPalette.value));
-const favoriteRoutesForPalette = computed(() => paletteNavigation.value.favoriteRoutes);
-const navigationForPalette = computed(() => paletteNavigation.value.navigationEntries);
-const commandForPalette = computed(() => normalizeCommandsForPalette(profileCommands.value));
-const executePaletteItem = async (item) => {
-  if (item.type === "route") {
-    activateTab(item.route);
-    ui.isCommandPaletteOpen = false;
-    return;
-  }
-  if (item.effect !== void 0 && !await executeCommandEffect(item.effect))
-    return;
-  ui.isCommandPaletteOpen = false;
-};
-watch(
-  () => route.path,
-  (path) => {
-    applyRootNavigationFallback({
-      path,
-      items: navigationItems.value,
-      tabs: tabs.value,
-      activateTab
-    });
-  },
-  { immediate: true }
-);
 </script>
 
 <template>
@@ -276,102 +81,68 @@ watch(
             </section>
           </CommandEmpty>
 
-          <CommandGroup
-            v-if="favoriteRoutesForPalette.length > 0"
-            :heading="t('favorites')"
-          >
-            <CommandItem
-              v-for="menu in favoriteRoutesForPalette"
-              :key="`fav:${menu.id}:${menu.route}`"
-              :value="createPaletteItemValue('fav', `${menu.id}:${menu.route}`)"
-              @select="executePaletteItem({ type: 'route', route: menu.route })"
-            >
-              <span>{{ menu.title }}</span>
-              <span
-                v-if="menu.keywords.length > 0"
-                class="sr-only"
-              >
-                {{ menu.keywords.join(" ") }}
-              </span>
-            </CommandItem>
-          </CommandGroup>
-
           <template
-            v-for="navigation in navigationForPalette"
-            :key="navigation.id"
+            v-for="command in props.commands"
+            :key="command.id"
           >
             <CommandGroup
-              v-if="'children' in navigation"
-              :heading="navigation.title"
+              v-if="'children' in command"
+              :heading="command.title"
             >
               <CommandItem
-                v-for="menu in navigation.children"
-                :key="menu.id"
-                :value="createPaletteItemValue('nav', menu.id, navigation.id)"
-                @select="executePaletteItem({ type: 'route', route: menu.route })"
+                v-for="child in command.children.filter((child2) => !child2.hidden)"
+                :key="child.id"
+                :value="child.id"
+                :disabled="child.disabled"
+                @select="child.effect?.pipe(Effect.tap(() => {
+  ui.isCommandPaletteOpen = false;
+})).pipe(Effect.runPromise)"
               >
-                <span>{{ menu.title }}</span>
-                <span
-                  v-if="menu.keywords.length > 0"
-                  class="sr-only"
-                >
-                  {{ menu.keywords.join(" ") }}
+                <span>{{ child.title }}</span>
+                <span class="sr-only">
+                  {{ child.keywords?.join(" ") }}
                 </span>
               </CommandItem>
             </CommandGroup>
             <CommandGroup v-else>
               <CommandItem
-                :value="createPaletteItemValue('nav', navigation.id)"
-                @select="executePaletteItem({ type: 'route', route: navigation.route })"
+                :value="command.id"
+                :disabled="command.disabled"
+                @select="command.effect?.pipe(Effect.tap(() => {
+  ui.isCommandPaletteOpen = false;
+})).pipe(Effect.runPromise)"
               >
-                <span>{{ navigation.title }}</span>
-                <span
-                  v-if="navigation.keywords.length > 0"
-                  class="sr-only"
-                >
-                  {{ navigation.keywords.join(" ") }}
+                <span>{{ command.title }}</span>
+                <span class="sr-only">
+                  {{ command.keywords?.join(" ") }}
                 </span>
               </CommandItem>
             </CommandGroup>
           </template>
 
           <template
-            v-for="command in commandForPalette"
-            :key="command.id"
+            v-for="navigation in props.sidebar"
+            :key="navigation.id"
           >
             <CommandGroup
-              v-if="'children' in command"
-              :heading="command.title"
+              v-if="'children' in navigation"
+              :heading="navigation.title"
             >
               <CommandItem
-                v-for="child in command.children"
-                :key="child.id"
-                :value="createPaletteItemValue('cmd', child.id, command.id)"
-                :disabled="child.disabled"
-                @select="executePaletteItem({ type: 'command', effect: child.effect })"
+                v-for="menu in navigation.children"
+                :key="menu.id"
+                :value="menu.id"
+                @select="$router.replace(menu.route)"
               >
-                <span>{{ child.title }}</span>
-                <span
-                  v-if="child.keywords.length > 0"
-                  class="sr-only"
-                >
-                  {{ child.keywords.join(" ") }}
-                </span>
+                <span>{{ menu.title }}</span>
               </CommandItem>
             </CommandGroup>
             <CommandGroup v-else>
               <CommandItem
-                :value="createPaletteItemValue('cmd', command.id)"
-                :disabled="command.disabled"
-                @select="executePaletteItem({ type: 'command', effect: command.effect })"
+                :value="navigation.id"
+                @select="$router.replace(navigation.route)"
               >
-                <span>{{ command.title }}</span>
-                <span
-                  v-if="command.keywords.length > 0"
-                  class="sr-only"
-                >
-                  {{ command.keywords.join(" ") }}
-                </span>
+                <span>{{ navigation.title }}</span>
               </CommandItem>
             </CommandGroup>
           </template>
@@ -400,7 +171,7 @@ watch(
               @click.prevent="stopProfileCloseTimer();
   ui.isProfileDropdownOpen = true"
             >
-              {{ profileName }}
+              <slot name="profile" />
             </button>
           </DropdownMenuTrigger>
           <DropdownMenuContent
@@ -411,33 +182,37 @@ watch(
   startProfileCloseTimer()"
           >
             <template
-              v-for="command in profileCommands"
+              v-for="command in props.commands"
               :key="command.id"
             >
-              <template v-if="'children' in command">
+              <template v-if="'children' in command && command.children.some((child2) => !child2.hidden)">
                 <DropdownMenuLabel>
                   {{ command.title }}
                 </DropdownMenuLabel>
                 <DropdownMenuGroup>
-                  <DropdownMenuItem
+                  <template
                     v-for="child in command.children"
                     :key="child.id"
-                    :disabled="child.disabled"
-                    @select="executeProfileCommand(child.effect)"
                   >
-                    <Icon
-                      v-if="child.icon"
-                      :icon="child.icon"
-                    />
-                    {{ child.title }}
-                  </DropdownMenuItem>
+                    <DropdownMenuItem
+                      v-if="!child.hidden"
+                      :disabled="child.disabled"
+                      @select="child.effect?.pipe(Effect.runPromise)"
+                    >
+                      <Icon
+                        v-if="child.icon"
+                        :icon="child.icon"
+                      />
+                      {{ child.title }}
+                    </DropdownMenuItem>
+                  </template>
                 </DropdownMenuGroup>
                 <DropdownMenuSeparator />
               </template>
               <DropdownMenuItem
-                v-else
+                v-else-if="!('children' in command) && !command.hidden"
                 :disabled="command.disabled"
-                @select="executeProfileCommand(command.effect)"
+                @select="command.effect?.pipe(Effect.runPromise)"
               >
                 <Icon
                   v-if="command.icon"
@@ -446,7 +221,15 @@ watch(
                 {{ command.title }}
               </DropdownMenuItem>
             </template>
-            <DropdownMenuSeparator v-if="profileCommands.length > 0" />
+            <DropdownMenuItem
+              @select="logout"
+            >
+              <Icon
+                icon="fluent:sign-out-20-regular"
+              />
+              {{ t("logout") }}
+            </DropdownMenuItem>
+            <DropdownMenuSeparator v-if="props.commands?.some((command2) => 'children' in command2 ? command2.children.some((child2) => !child2.hidden) : !command2.hidden)" />
             <DropdownMenuItem disabled>
               <Icon icon="fluent:history-20-regular" />
               {{ t("build") }}
@@ -503,11 +286,11 @@ watch(
                             <SidebarMenuButton
                               v-if="'route' in menu"
                               as-child
-                              :is-active="isNavigationItemActive(menu.route)"
+                              :is-active="active === menu.route"
                             >
                               <button
                                 type="button"
-                                @click="activateTab(menu.route)"
+                                @click="active = menu.route"
                               >
                                 <Icon
                                   v-if="menu.icon"
@@ -539,11 +322,11 @@ watch(
                         <SidebarMenuItem>
                           <SidebarMenuButton
                             as-child
-                            :is-active="isNavigationItemActive(group.route)"
+                            :is-active="active === group.route"
                           >
                             <button
                               type="button"
-                              @click="activateTab(group.route)"
+                              @click="active = group.route"
                             >
                               <Icon
                                 v-if="group.icon"
@@ -564,7 +347,7 @@ watch(
         <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-auto min-w-0">
             <div
-              v-for="tab in tabList"
+              v-for="tab in tabs"
               :key="tab"
               :class="[
   'h-8 max-w-60 border rounded px-2 text-sm flex items-center gap-2 shrink-0 min-w-0 transition-colors',
@@ -574,14 +357,15 @@ watch(
               <button
                 type="button"
                 class="truncate cursor-pointer"
-                @click="activateTab(tab)"
+                @click="active = tab"
               >
-                {{ getTabLabel(tab) }}
+                {{ nameOf(tab) }}
               </button>
               <button
+                v-if="tabs.size !== 1"
                 type="button"
                 class="cursor-pointer text-zinc-500 hover:text-zinc-900"
-                @click.stop="closeTab(tab)"
+                @click.stop="close(tab)"
               >
                 <Icon icon="fluent:dismiss-20-regular" />
               </button>

package/dist/runtime/components/app.vue.d.ts

@@ -1,5 +1,21 @@
 import type { Scope } from 'effect';
 import { Effect } from 'effect';
+import { type Sidebar as SidebarType } from '../composables/useNavigationTabs.js';
+type ProfileCommandInputItem = Readonly<{
+    id: string | number;
+    title: string;
+    icon?: string;
+    hidden?: boolean;
+    disabled?: boolean;
+    effect?: Effect.Effect<void>;
+    keywords?: Array<string>;
+}>;
+type ProfileCommandInputGroup = Readonly<{
+    id: string | number;
+    title: string;
+    icon?: string;
+    children: Array<ProfileCommandInputItem>;
+}>;
 type __VLS_Props = {
     /**
      * 应用的全局 DSL（CEL）执行上下文。传入一个 Effect，在应用启动时运行一次；
@@ -38,12 +54,26 @@ type __VLS_Props = {
      * // CEL 中可访问 user.name、permissions.canEdit 等；失败时在 effect 内兜底，不抛错
      */
     dsl?: Effect.Effect<Record<string, unknown>, never, Scope.Scope>;
+    /**
+     * Sidebar config.
+     *
+     * `menus` is structured navigation data.
+     */
+    sidebar?: SidebarType;
+    /**
+     * Profile command config.
+     *
+     * Structured command entries for profile menu and command palette.
+     */
+    commands?: Array<ProfileCommandInputItem | ProfileCommandInputGroup>;
 };
-declare var __VLS_122: {}, __VLS_346: {};
+declare var __VLS_108: {}, __VLS_124: {}, __VLS_347: {};
 type __VLS_Slots = {} & {
-    menu?: (props: typeof __VLS_122) => any;
+    menu?: (props: typeof __VLS_108) => any;
+} & {
+    profile?: (props: typeof __VLS_124) => any;
 } & {
-    default?: (props: typeof __VLS_346) => any;
+    default?: (props: typeof __VLS_347) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/composables/useFavorite.d.ts

@@ -7,7 +7,7 @@ type Group<K extends string | number> = Readonly<{
     children: Array<Item<K>>;
 }>;
 type Favoritable<K extends string | number> = Item<K> | Group<K>;
-export declare function useFavorite<K extends string | number, T extends Favoritable<K>>(key: string, items: MaybeRefOrGetter<Array<T>>): {
+export declare function useFavorite<K extends string | number, T extends Favoritable<K>>(key: string, items: MaybeRefOrGetter<ReadonlyArray<T>>): {
     favorite: <I extends Item<K>>(item: I, of: K) => void;
     unfavorite: <I extends Item<K>>(item: I, of?: K) => void;
     toggle: <I extends Item<K>>(item: I, of: K) => void;

package/dist/runtime/composables/useNavigationTabs.d.ts

@@ -1,7 +1,21 @@
-export declare function useNavigationTabs(): {
+import { type MaybeRefOrGetter } from 'vue';
+type SidebarMenuItem = Readonly<{
+    id: string | number;
+    title: string;
+    icon?: string;
+    route: string;
+}>;
+type SidebarMenuGroup = Readonly<{
+    id: string | number;
+    title: string;
+    icon?: string;
+    children: Array<SidebarMenuItem>;
+}>;
+export type Sidebar = ReadonlyArray<SidebarMenuItem | SidebarMenuGroup>;
+export declare function useNavigationTabs(navigations: MaybeRefOrGetter<Sidebar>): {
     tabs: import("@vueuse/shared").RemovableRef<Set<string>>;
-    tabList: import("vue").ComputedRef<string[]>;
-    active: import("@vueuse/shared").RemovableRef<string | undefined>;
-    activateTab: (tab: string) => void;
-    closeTab: (tab: string) => void;
+    nameOf: (path: string) => string | undefined;
+    close: (raw: string) => void;
+    active: import("vue").WritableComputedRef<string | undefined, string>;
 };
+export {};