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

2026-01-14 20:19:34 +01:00 · 2024-12-05 19:01:40 +01:00
parent a938d24f90
commit 984bb0899c
7 changed files with 41 additions and 69 deletions
--- a/docs/app/components/FrameworkSelect.vue
+++ b/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>
--- a/docs/app/components/Header.vue
+++ b/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>
--- a/docs/app/components/ModuleSelect.vue
+++ b/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>
--- a/docs/app/composables/useSharedData.ts
+++ b/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)
--- a/docs/app/layouts/docs.vue
+++ b/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>
--- a/docs/package.json
+++ b/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",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -266,8 +266,8 @@ importers:
        specifier: workspace:*
        version: link:..
      '@nuxt/ui-pro':
-        specifier: https://pkg.pr.new/@nuxt/ui-pro@69c8478
-        version: https://pkg.pr.new/@nuxt/ui-pro@69c8478(magicast@0.3.5)(rollup@4.27.3)(typescript@5.6.3)
+        specifier: https://pkg.pr.new/@nuxt/ui-pro@fcc00ad
+        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':
-    resolution: {tarball: 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@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':
-    resolution: {integrity: sha512-I1LG9vqlw6J1rVoQci4E8Q/mjUXrmQ/gjdqc/Y2ywsY0uneEAjPou0hwhQMOKR9K3VamhQM/SVuJe6EEQITpVA==}
+  '@nuxtjs/mdc-edge@0.10.1-28890238.42b9f9b':
+    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