docs(app): use tabs to switch framework & module (#2837)

docs/app/components/FrameworkSelect.vue

@@ -1,31 +1,20 @@
 <script setup lang="ts">
-const { frameworks } = useSharedData()
+const { framework, frameworks } = useSharedData()
+
+const value = ref<string | undefined>(undefined)
+
+onMounted(() => {
+  value.value = framework.value
+})
 </script>
 
 <template>
-  <UDropdownMenu
-    v-slot="{ open }"
-    :modal="false"
+  <UTabs
+    v-model="value"
     :items="frameworks"
-    :ui="{ content: 'w-(--reka-dropdown-menu-trigger-width)' }"
-  >
-    <UButton
-      color="neutral"
-      variant="outline"
-      block
-      trailing-icon="i-lucide-chevron-down"
-      :class="[open && 'bg-[var(--ui-bg-elevated)]']"
-      :ui="{
-        trailingIcon: ['transition-transform duration-200', open ? 'rotate-180' : undefined].filter(Boolean).join(' ')
-      }"
-    >
-      <template #leading>
-        <UIcon v-for="framework in frameworks" :key="framework.value" :name="framework.icon" :class="`${framework.value}-only`" class="shrink-0 size-5" />
-      </template>
-
-      <span v-for="framework in frameworks" :key="framework.value" :class="`${framework.value}-only`">
-        {{ framework.label }}
-      </span>
-    </UButton>
-  </UDropdownMenu>
+    :content="false"
+    color="neutral"
+    :ui="{ leadingIcon: 'group-data-[state=inactive]:grayscale' }"
+    @update:model-value="(framework = $event as string)"
+  />
 </template>

docs/app/components/Header.vue

@@ -71,11 +71,11 @@ defineShortcuts({
     </template>
 
     <template #content>
-      <UNavigationMenu orientation="vertical" :items="links" class="-ml-2.5" />
+      <UNavigationMenu orientation="vertical" :items="links" class="-mx-2.5" />
 
       <USeparator type="dashed" class="my-4" />
 
-      <div class="flex flex-col gap-2 w-[calc(100%+1rem)] mb-4 -mx-2">
+      <div class="flex flex-col gap-2 w-[calc(100%+1.25rem)] mb-4 -mx-2.5">
         <ModuleSelect />
         <FrameworkSelect />
       </div>

docs/app/components/ModuleSelect.vue

@@ -1,32 +1,19 @@
 <script setup lang="ts">
-const { modules } = useSharedData()
+const { module, modules } = useSharedData()
+
+const value = ref<string | undefined>(undefined)
+
+onMounted(() => {
+  value.value = module.value
+})
 </script>
 
 <template>
-  <UDropdownMenu
-    v-slot="{ open }"
-    :modal="false"
+  <UTabs
+    v-model="value"
     :items="modules"
-    :ui="{ content: 'w-(--reka-dropdown-menu-trigger-width)' }"
-  >
-    <UButton
-      color="neutral"
-      variant="outline"
-      block
-      trailing-icon="i-lucide-chevron-down"
-      class="min-w-0"
-      :class="[open && 'bg-[var(--ui-bg-elevated)]']"
-      :ui="{
-        trailingIcon: ['transition-transform duration-200', open ? 'rotate-180' : undefined].filter(Boolean).join(' ')
-      }"
-    >
-      <template #leading>
-        <UIcon v-for="module in modules" :key="module.value" :name="module.icon" :class="`${module.value}-only`" class="shrink-0 size-5" />
-      </template>
-
-      <span v-for="module in modules" :key="module.value" :class="`${module.value}-only`" class="truncate">
-        {{ module.label }}
-      </span>
-    </UButton>
-  </UDropdownMenu>
+    :content="false"
+    color="neutral"
+    @update:model-value="(module = $event as string)"
+  />
 </template>

docs/app/composables/useSharedData.ts

@@ -1,6 +1,4 @@
-import { createSharedComposable } from '@vueuse/core'
-
-function _useSharedData() {
+export function useSharedData() {
   const framework = useCookie('nuxt-ui-framework', { default: () => 'nuxt' })
   const frameworks = computed(() => [{
     label: 'Nuxt',
@@ -36,5 +34,3 @@ function _useSharedData() {
     modules
   }
 }
-
-export const useSharedData = createSharedComposable(_useSharedData)

docs/app/layouts/docs.vue

@@ -11,7 +11,7 @@ const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
         <template #left>
           <UPageAside>
             <template #top>
-              <div class="flex flex-col gap-2 w-[calc(100%+1rem)] -mx-2">
+              <div class="flex flex-col gap-2 w-[calc(100%+1.25rem)] -mx-2.5">
                 <ModuleSelect />
                 <FrameworkSelect />
               </div>

docs/package.json

@@ -10,7 +10,7 @@
     "@nuxt/content": "https://pkg.pr.new/@nuxt/content@c5b1a4f",
     "@nuxt/image": "^1.8.1",
     "@nuxt/ui": "latest",
-    "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@69c8478",
+    "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@fcc00ad",
     "@nuxthub/core": "^0.8.7",
     "@nuxtjs/plausible": "^1.2.0",
     "@octokit/rest": "^21.0.2",