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
+  <UTabs
-    v-slot="{ open }"
+    v-model="value"
-    :modal="false"
     :items="frameworks"
-    :ui="{ content: 'w-(--reka-dropdown-menu-trigger-width)' }"
+    :content="false"
-  >
+    color="neutral"
-    <UButton
+    :ui="{ leadingIcon: 'group-data-[state=inactive]:grayscale' }"
-      color="neutral"
+    @update:model-value="(framework = $event as string)"
-      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>
 </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
+  <UTabs
-    v-slot="{ open }"
+    v-model="value"
-    :modal="false"
     :items="modules"
-    :ui="{ content: 'w-(--reka-dropdown-menu-trigger-width)' }"
+    :content="false"
-  >
+    color="neutral"
-    <UButton
+    @update:model-value="(module = $event as string)"
-      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>
 </template>

docs/app/composables/useSharedData.ts

@@ -1,6 +1,4 @@
-import { createSharedComposable } from '@vueuse/core'
+export function useSharedData() {
-
-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",

pnpm-lock.yaml

@@ -266,8 +266,8 @@ importers:
         specifier: workspace:*
         version: link:..
       '@nuxt/ui-pro':
-        specifier: https://pkg.pr.new/@nuxt/ui-pro@69c8478
+        specifier: https://pkg.pr.new/@nuxt/ui-pro@fcc00ad
-        version: https://pkg.pr.new/@nuxt/ui-pro@69c8478(magicast@0.3.5)(rollup@4.27.3)(typescript@5.6.3)
+        version: https://pkg.pr.new/@nuxt/ui-pro@fcc00ad(magicast@0.3.5)(rollup@4.27.3)(typescript@5.6.3)
       '@nuxthub/core':
         specifier: ^0.8.7
         version: 0.8.7(ioredis@5.4.1)(magicast@0.3.5)(rollup@4.27.3)(vite@5.4.11(@types/node@22.9.0)(lightningcss@1.28.1)(terser@5.36.0))
@@ -1536,8 +1536,8 @@ packages:
       vitest:
         optional: true
 
-  '@nuxt/ui-pro@https://pkg.pr.new/@nuxt/ui-pro@69c8478':
+  '@nuxt/ui-pro@https://pkg.pr.new/@nuxt/ui-pro@fcc00ad':
-    resolution: {tarball: https://pkg.pr.new/@nuxt/ui-pro@69c8478}
+    resolution: {tarball: https://pkg.pr.new/@nuxt/ui-pro@fcc00ad}
     version: 3.0.0-alpha.9
     peerDependencies:
       typescript: 5.6.3
@@ -1554,8 +1554,8 @@ packages:
   '@nuxtjs/color-mode@3.5.2':
     resolution: {integrity: sha512-cC6RfgZh3guHBMLLjrBB2Uti5eUoGM9KyauOaYS9ETmxNWBMTvpgjvSiSJp1OFljIXPIqVTJ3xtJpSNZiO3ZaA==}
 
-  '@nuxtjs/mdc-edge@0.10.1-28888910.a0601df':
+  '@nuxtjs/mdc-edge@0.10.1-28890238.42b9f9b':
-    resolution: {integrity: sha512-I1LG9vqlw6J1rVoQci4E8Q/mjUXrmQ/gjdqc/Y2ywsY0uneEAjPou0hwhQMOKR9K3VamhQM/SVuJe6EEQITpVA==}
+    resolution: {integrity: sha512-Ix/13MucZILvZEI3h/o+RUE1psUWRSHmxNV4XHOlXqwmiyE67iqUbCdmGZ7Q8+xEiL1f6V74pCeuCCa0HkcqbQ==}
 
   '@nuxtjs/plausible@1.2.0':
     resolution: {integrity: sha512-pjfps32fFN77BhjqHmq2Jx4XCNso9TcYnB+S4IR2qH/c26WDfYB5mQxN5pOEiWRlMkiKq+Y45mBBFtSOVKClCA==}
@@ -8165,7 +8165,7 @@ snapshots:
     dependencies:
       '@libsql/client': 0.14.0
       '@nuxt/kit': 3.14.1592(magicast@0.3.5)(rollup@4.27.3)
-      '@nuxtjs/mdc': '@nuxtjs/mdc-edge@0.10.1-28888910.a0601df(magicast@0.3.5)(rollup@4.27.3)'
+      '@nuxtjs/mdc': '@nuxtjs/mdc-edge@0.10.1-28890238.42b9f9b(magicast@0.3.5)(rollup@4.27.3)'
       '@sqlite.org/sqlite-wasm': 3.47.0-build1
       better-sqlite3: 11.5.0
       c12: 2.0.1(magicast@0.3.5)
@@ -8610,7 +8610,7 @@ snapshots:
       - rollup
       - supports-color
 
-  '@nuxt/ui-pro@https://pkg.pr.new/@nuxt/ui-pro@69c8478(magicast@0.3.5)(rollup@4.27.3)(typescript@5.6.3)':
+  '@nuxt/ui-pro@https://pkg.pr.new/@nuxt/ui-pro@fcc00ad(magicast@0.3.5)(rollup@4.27.3)(typescript@5.6.3)':
     dependencies:
       '@nuxt/kit': 3.14.1592(magicast@0.3.5)(rollup@4.27.3)
       '@nuxt/schema': 3.14.1592(magicast@0.3.5)(rollup@4.27.3)
@@ -8798,7 +8798,7 @@ snapshots:
       - rollup
       - supports-color
 
-  '@nuxtjs/mdc-edge@0.10.1-28888910.a0601df(magicast@0.3.5)(rollup@4.27.3)':
+  '@nuxtjs/mdc-edge@0.10.1-28890238.42b9f9b(magicast@0.3.5)(rollup@4.27.3)':
     dependencies:
       '@nuxt/kit': 3.14.1592(magicast@0.3.5)(rollup@4.27.3)
       '@shikijs/transformers': 1.24.0