version selector

Author: devdumpling

app/components/DocsVersionSelector.vue

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { onClickOutside } from '@vueuse/core'
+import { compareVersions } from '~/utils/versions'
+
+const props = defineProps<{
+  packageName: string
+  currentVersion: string
+  versions: Record<string, unknown>
+  distTags: Record<string, string>
+}>()
+
+const isOpen = ref(false)
+const dropdownRef = ref<HTMLElement>()
+
+onClickOutside(dropdownRef, () => {
+  isOpen.value = false
+})
+
+/** Maximum number of versions to show in dropdown */
+const MAX_VERSIONS = 10
+
+/** Get sorted list of recent versions with their tags */
+const recentVersions = computed(() => {
+  const versionList = Object.keys(props.versions)
+    .sort((a, b) => compareVersions(b, a))
+    .slice(0, MAX_VERSIONS)
+
+  // Create a map of version -> tags
+  const versionTags = new Map<string, string[]>()
+  for (const [tag, version] of Object.entries(props.distTags)) {
+    const existing = versionTags.get(version)
+    if (existing) {
+      existing.push(tag)
+    } else {
+      versionTags.set(version, [tag])
+    }
+  }
+
+  return versionList.map(version => ({
+    version,
+    tags: versionTags.get(version) ?? [],
+    isCurrent: version === props.currentVersion,
+  }))
+})
+
+const latestVersion = computed(() => props.distTags.latest)
+
+function getDocsUrl(version: string): string {
+  return `/docs/${props.packageName}/v/${version}`
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape') {
+    isOpen.value = false
+  }
+}
+</script>
+
+<template>
+  <div ref="dropdownRef" class="relative">
+    <button
+      type="button"
+      aria-haspopup="listbox"
+      :aria-expanded="isOpen"
+      class="flex items-center gap-1.5 text-fg-subtle font-mono text-sm hover:text-fg transition-colors"
+      @click="isOpen = !isOpen"
+      @keydown="handleKeydown"
+    >
+      <span>{{ currentVersion }}</span>
+      <span
+        v-if="currentVersion === latestVersion"
+        class="text-[10px] px-1.5 py-0.5 rounded bg-emerald-500/10 text-emerald-400 font-sans font-medium"
+      >
+        latest
+      </span>
+      <span
+        class="i-carbon-chevron-down w-3.5 h-3.5 transition-transform duration-200"
+        :class="{ 'rotate-180': isOpen }"
+        aria-hidden="true"
+      />
+    </button>
+
+    <Transition
+      enter-active-class="transition duration-150 ease-out"
+      enter-from-class="opacity-0 scale-95"
+      enter-to-class="opacity-100 scale-100"
+      leave-active-class="transition duration-100 ease-in"
+      leave-from-class="opacity-100 scale-100"
+      leave-to-class="opacity-0 scale-95"
+    >
+      <div
+        v-if="isOpen"
+        role="listbox"
+        :aria-activedescendant="`version-${currentVersion}`"
+        class="absolute top-full left-0 mt-2 min-w-[180px] bg-bg-elevated border border-border rounded-lg shadow-lg z-50 py-1 max-h-[300px] overflow-y-auto"
+        @keydown="handleKeydown"
+      >
+        <NuxtLink
+          v-for="{ version, tags, isCurrent } in recentVersions"
+          :id="`version-${version}`"
+          :key="version"
+          :to="getDocsUrl(version)"
+          role="option"
+          :aria-selected="isCurrent"
+          class="flex items-center justify-between gap-3 px-3 py-2 text-sm font-mono hover:bg-bg-muted transition-colors"
+          :class="isCurrent ? 'text-fg bg-bg-muted' : 'text-fg-muted'"
+          @click="isOpen = false"
+        >
+          <span class="truncate">{{ version }}</span>
+          <span v-if="tags.length > 0" class="flex items-center gap-1 shrink-0">
+            <span
+              v-for="tag in tags"
+              :key="tag"
+              class="text-[10px] px-1.5 py-0.5 rounded font-sans font-medium"
+              :class="tag === 'latest' ? 'bg-emerald-500/10 text-emerald-400' : 'bg-bg-muted text-fg-subtle'"
+            >
+              {{ tag }}
+            </span>
+          </span>
+        </NuxtLink>
+
+        <div
+          v-if="Object.keys(versions).length > MAX_VERSIONS"
+          class="border-t border-border mt-1 pt-1 px-3 py-2"
+        >
+          <NuxtLink
+            :to="`/${packageName}`"
+            class="text-xs text-fg-subtle hover:text-fg transition-colors"
+            @click="isOpen = false"
+          >
+            View all {{ Object.keys(versions).length }} versions
+          </NuxtLink>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>

app/pages/docs/[...path].vue

@@ -101,7 +101,14 @@ const showEmptyState = computed(() => docsData.value?.status !== 'ok')
             >
               {{ packageName }}
             </NuxtLink>
-            <span v-if="resolvedVersion" class="text-fg-subtle font-mono text-sm shrink-0">
+            <DocsVersionSelector
+              v-if="resolvedVersion && pkg?.versions && pkg?.['dist-tags']"
+              :package-name="packageName"
+              :current-version="resolvedVersion"
+              :versions="pkg.versions"
+              :dist-tags="pkg['dist-tags']"
+            />
+            <span v-else-if="resolvedVersion" class="text-fg-subtle font-mono text-sm shrink-0">
               {{ resolvedVersion }}
             </span>
           </div>