docs: add version select (#532)

docs/components/BranchSelect.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="mb-3 lg:mb-6">
+    <label for="branch" class="block mb-1.5 font-semibold text-sm/6">Version</label>
+
+    <USelectMenu
+      id="branch"
+      :model-value="branch"
+      name="branch"
+      :options="branches"
+      color="gray"
+      :ui="{ icon: { trailing: { padding: { sm: 'pe-1.5' } } } }"
+      :ui-menu="{ option: { container: 'gap-1.5' } }"
+      @update:model-value="selectBranch"
+    >
+      <template #label>
+        <UIcon v-if="branch.icon" :name="branch.icon" class="w-4 h-4 flex-shrink-0 text-gray-600 dark:text-gray-300" />
+
+        <span class="font-medium">{{ branch.label }}</span>
+
+        <span class="truncate text-gray-400 dark:text-gray-500">{{ branch.suffix }}</span>
+      </template>
+
+      <template #option="{ option }">
+        <UIcon v-if="option.icon" :name="option.icon" class="w-4 h-4 flex-shrink-0 text-gray-600 dark:text-gray-300" />
+
+        <span class="font-medium">{{ option.label }}</span>
+
+        <span class="truncate text-gray-400 dark:text-gray-500">{{ option.suffix }}</span>
+      </template>
+    </USelectMenu>
+  </div>
+</template>
+
+<script setup lang="ts">
+const route = useRoute()
+const router = useRouter()
+const { branches, branch } = useContentSource()
+
+function selectBranch (branch) {
+  if (branch.name === 'dev') {
+    if (route.path.startsWith('/dev')) {
+      return
+    }
+
+    router.push(`/dev${route.path}`)
+  } else {
+    router.push(route.path.replace('/dev', ''))
+  }
+}
+</script>

docs/components/Header.vue

@@ -20,6 +20,8 @@
     </template>
 
     <template #panel>
+      <BranchSelect />
+
       <UNavigationTree :links="mapContentNavigation(navigation)" />
     </template>
   </UHeader>

docs/components/content/ComponentCard.vue

@@ -115,7 +115,7 @@ const componentProps = reactive({ ...props.props })
 const appConfig = useAppConfig()
 const route = useRoute()
 // eslint-disable-next-line vue/no-dupe-keys
-const slug = props.slug || route.params.slug[1]
+const slug = props.slug || route.params.slug[route.params.slug.length - 1]
 const camelName = useCamelCase(slug)
 const name = `U${useUpperFirst(camelName)}`
 

docs/components/content/ComponentPreset.vue

@@ -16,7 +16,7 @@ const props = defineProps({
 const appConfig = useAppConfig()
 const route = useRoute()
 // eslint-disable-next-line vue/no-dupe-keys
-const slug = props.slug || route.params.slug[1]
+const slug = props.slug || route.params.slug[route.params.slug.length - 1]
 const camelName = useCamelCase(slug)
 const name = `U${useUpperFirst(camelName)}`
 

docs/components/content/ComponentProps.vue

@@ -29,7 +29,7 @@ const props = defineProps({
 
 const route = useRoute()
 // eslint-disable-next-line vue/no-dupe-keys
-const slug = props.slug || route.params.slug[1]
+const slug = props.slug || route.params.slug[route.params.slug.length - 1]
 const camelName = useCamelCase(slug)
 const name = `U${useUpperFirst(camelName)}`
 

docs/components/content/ComponentSlots.vue

@@ -27,7 +27,7 @@ const props = defineProps({
 
 const route = useRoute()
 // eslint-disable-next-line vue/no-dupe-keys
-const slug = props.slug || route.params.slug[1]
+const slug = props.slug || route.params.slug[route.params.slug.length - 1]
 const camelName = useCamelCase(slug)
 const name = `U${useUpperFirst(camelName)}`
 

docs/components/content/themes/CommandPaletteThemeAlgolia.vue

@@ -2,8 +2,7 @@
 const commandPaletteRef = ref()
 
 const navigation = inject('navigation')
-
-const { data: files } = await useLazyAsyncData('search', () => queryContent().where({ _type: 'markdown' }).find(), { default: () => [] })
+const files = inject('files')
 
 const groups = computed(() => navigation.value.map(item => ({
   key: item._path,