feat: rewrite to use app config and rework docs (#143)

Co-authored-by: Daniel Roe <daniel@roe.dev>
Co-authored-by: Sébastien Chopin <seb@nuxt.com>

docs/components/content/Alert.vue

@@ -0,0 +1,33 @@
+<template>
+  <component
+    :is="to ? NuxtLink : 'div'"
+    :to="to"
+    class="block pl-4 pr-6 py-3 rounded-md !border !border-gray-200 dark:!border-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200 text-sm leading-6 my-5 last:mb-0 font-normal group relative prose-code:bg-gray-200 dark:prose-code:bg-gray-800"
+    :class="[to ? 'hover:!border-primary-500 dark:hover:!border-primary-400 hover:text-primary-500 dark:hover:text-primary-400 border-dashed' : '']"
+  >
+    <UIcon v-if="!!to" name="i-heroicons-link-20-solid" class="w-3 h-3 absolute right-2 top-2 text-gray-400 dark:text-gray-500 group-hover:text-primary-500 dark:group-hover:text-primary-400" />
+
+    <UIcon v-if="icon" :name="icon" class="w-4 h-4 mr-2 inline-flex items-center align-text-top" :class="color" />
+
+    <ContentSlot :use="$slots.default" unwrap="p" />
+  </component>
+</template>
+
+<script setup lang="ts">
+const NuxtLink = resolveComponent('NuxtLink')
+
+defineProps({
+  icon: {
+    type: String,
+    default: null
+  },
+  color: {
+    type: String,
+    default: 'text-primary-500 dark:text-primary-400'
+  },
+  to: {
+    type: String,
+    default: null
+  }
+})
+</script>

docs/components/content/CodeGroup.vue

@@ -0,0 +1,53 @@
+<template>
+  <div :selected-index="selectedIndex" @change="changeTab">
+    <div class="flex border border-gray-200 dark:border-gray-700 border-b-0 rounded-t-md overflow-hidden -mb-px">
+      <div
+        v-for="(tab, index) in tabs"
+        :key="index"
+        as="template"
+        @click="selectedIndex = index"
+      >
+        <button
+          class="px-4 py-2 focus:outline-none text-sm border-r border-r-gray-200 dark:border-r-gray-700 transition-colors"
+          tabindex="-1"
+          :class="[selectedIndex === index ? 'font-medium text-primary-500 dark:text-primary-400 bg-gray-50 dark:bg-gray-800' : 'hover:bg-gray-50 dark:hover:bg-gray-800']"
+        >
+          {{ tab.label }}
+        </button>
+      </div>
+    </div>
+
+    <div class="[&>div>pre]:!rounded-t-none">
+      <component :is="selectedTab.component" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const slots = useSlots()
+
+const selectedIndex = ref(0)
+
+// Computed
+
+const tabs = computed(() => slots.default?.().map((slot, index) => {
+  return {
+    label: slot.props?.filename || slot.props?.label || `${index}`,
+    component: slot
+  }
+}) || [])
+
+const selectedTab = computed(() => tabs.value.find((_, index) => index === selectedIndex.value))
+
+// Methods
+
+function changeTab (index) {
+  selectedIndex.value = index
+}
+</script>
+
+<script lang="ts">
+export default {
+  inheritAttrs: false
+}
+</script>

docs/components/content/ComponentCard.vue

@@ -0,0 +1,184 @@
+<template>
+  <div>
+    <div v-if="propsToSelect.length" class="relative flex border border-gray-200 dark:border-gray-700 rounded-t-md overflow-hidden not-prose">
+      <div v-for="prop in propsToSelect" :key="prop.name" class="flex flex-col gap-0.5 justify-between py-1.5 font-medium bg-gray-50 dark:bg-gray-800 border-r border-r-gray-200 dark:border-r-gray-700">
+        <label :for="prop.name" class="block text-xs px-3 font-medium text-gray-400 dark:text-gray-500 -my-px">{{ prop.label }}</label>
+        <UCheckbox
+          v-if="prop.type === 'boolean'"
+          v-model="componentProps[prop.name]"
+          :name="prop.name"
+          appearance="none"
+          class="justify-center"
+        />
+        <USelectMenu
+          v-else-if="prop.type === 'string' && prop.options.length"
+          v-model="componentProps[prop.name]"
+          :options="prop.options"
+          :name="prop.name"
+          :label="componentProps[prop.name]"
+          appearance="none"
+          class="inline-flex"
+          :ui="{ width: 'w-32 !-mt-px', rounded: 'rounded-b-md' }"
+          :ui-select="{ custom: '!py-0' }"
+          :popper="{ strategy: 'fixed', placement: 'bottom-start' }"
+        />
+        <UInput
+          v-else
+          :model-value="componentProps[prop.name]"
+          :type="prop.type === 'number' ? 'number' : 'text'"
+          :name="prop.name"
+          appearance="none"
+          autocomplete="off"
+          :ui="{ custom: '!py-0' }"
+          @update:model-value="val => componentProps[prop.name] = prop.type === 'number' ? Number(val) : val"
+        />
+      </div>
+    </div>
+
+    <div class="flex border border-b-0 border-gray-200 dark:border-gray-700 relative not-prose" :class="[{ 'p-4': padding }, propsToSelect.length ? 'border-t-0' : 'rounded-t-md', backgroundClass]">
+      <component :is="name" v-model="vModel" v-bind="fullProps">
+        <ContentSlot v-if="$slots.default" :use="$slots.default" />
+      </component>
+    </div>
+
+    <ContentRenderer :value="ast" class="[&>div>pre]:!rounded-t-none" />
+  </div>
+</template>
+
+<script setup lang="ts">
+// @ts-expect-error
+import { transformContent } from '@nuxt/content/transformers'
+
+const props = defineProps({
+  slug: {
+    type: String,
+    default: null
+  },
+  padding: {
+    type: Boolean,
+    default: true
+  },
+  props: {
+    type: Object,
+    default: () => ({})
+  },
+  code: {
+    type: String,
+    default: null
+  },
+  baseProps: {
+    type: Object,
+    default: () => ({})
+  },
+  ui: {
+    type: Object,
+    default: () => ({})
+  },
+  excludedProps: {
+    type: Array,
+    default: () => []
+  },
+  backgroundClass: {
+    type: String,
+    default: 'bg-white dark:bg-gray-900'
+  }
+})
+
+const baseProps = reactive({ ...props.baseProps })
+const componentProps = reactive({ ...props.props })
+
+const appConfig = useAppConfig()
+const route = useRoute()
+const slug = props.slug || route.params.slug[1]
+const camelName = useCamelCase(slug)
+const name = `U${useUpperFirst(camelName)}`
+
+const meta = await fetchComponentMeta(name)
+
+// Computed
+
+const ui = computed(() => ({ ...appConfig.ui[camelName], ...props.ui }))
+
+const fullProps = computed(() => ({ ...props.baseProps, ...componentProps }))
+const vModel = computed({
+  get: () => baseProps.modelValue,
+  set: (value) => {
+    baseProps.modelValue = value
+  }
+})
+
+const propsToSelect = computed(() => Object.keys(componentProps).map((key) => {
+  if (props.excludedProps.includes(key)) {
+    return null
+  }
+
+  const prop = meta?.meta?.props?.find((prop: any) => prop.name === key)
+  const dottedKey = useKebabCase(key).replaceAll('-', '.')
+  const keys = useGet(ui.value, dottedKey, {})
+  let options = typeof keys === 'object' && Object.keys(keys)
+  if (key.toLowerCase().endsWith('color')) {
+    options = appConfig.ui.colors
+  }
+
+  return {
+    type: prop?.type || 'string',
+    name: key,
+    label: key === 'modelValue' ? 'value' : useCamelCase(key),
+    options
+  }
+}).filter(Boolean))
+
+const code = computed(() => {
+  let code = `\`\`\`html
+<${name}`
+  for (const [key, value] of Object.entries(componentProps)) {
+    if (value === 'undefined' || value === null) {
+      continue
+    }
+
+    const prop = meta?.meta?.props?.find((prop: any) => prop.name === key)
+
+    code += ` ${(prop?.type === 'boolean' && value !== true) || typeof value === 'object' ? ':' : ''}${key === 'modelValue' ? 'value' : useKebabCase(key)}${prop?.type === 'boolean' && !!value && key !== 'modelValue' ? '' : `="${typeof value === 'object' ? renderObject(value) : value}"`}`
+  }
+  if (props.code) {
+    const lineBreaks = (props.code.match(/\n/g) || []).length
+    if (lineBreaks > 1) {
+      code += `>
+  ${props.code}</${name}>`
+    } else {
+      code += `>${props.code}</${name}>`
+    }
+  } else {
+    code += ' />'
+  }
+  code += `
+\`\`\`
+`
+  return code
+})
+
+function renderObject (obj: any) {
+  if (Array.isArray(obj)) {
+    return `[${obj.map(renderObject).join(', ')}]`
+  }
+
+  if (typeof obj === 'object') {
+    return `{ ${Object.entries(obj).map(([key, value]) => `${key}: ${renderObject(value)}`).join(', ')} }`
+  }
+
+  if (typeof obj === 'string') {
+    return `'${obj}'`
+  }
+
+  return obj
+}
+
+const { data: ast } = await useAsyncData(`${name}-ast-${JSON.stringify(componentProps)}`, () => transformContent('content:_markdown.md', code.value, {
+  highlight: {
+    theme: {
+      light: 'material-lighter',
+      dark: 'material-palenight'
+    }
+  }
+}), { watch: [code] })
+</script>

docs/components/content/ComponentExample.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="[&>div>pre]:!rounded-t-none">
+    <div class="flex border border-gray-200 dark:border-gray-700 relative not-prose rounded-t-md" :class="[{ 'p-4': padding, 'rounded-b-md': !$slots.code, 'border-b-0': !!$slots.code }, backgroundClass]">
+      <ContentSlot v-if="$slots.default" :use="$slots.default" />
+    </div>
+
+    <ContentSlot v-if="$slots.code" :use="$slots.code" />
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  padding: {
+    type: Boolean,
+    default: true
+  },
+  backgroundClass: {
+    type: String,
+    default: 'bg-white dark:bg-gray-900'
+  }
+})
+</script>

docs/components/content/ComponentPreset.vue

@@ -0,0 +1,36 @@
+<template>
+  <ContentRenderer :value="ast" />
+</template>
+
+<script setup lang="ts">
+// @ts-expect-error
+import { transformContent } from '@nuxt/content/transformers'
+
+const props = defineProps({
+  slug: {
+    type: String,
+    default: null
+  }
+})
+
+const appConfig = useAppConfig()
+const route = useRoute()
+const slug = props.slug || route.params.slug[1]
+const camelName = useCamelCase(slug)
+const name = `U${useUpperFirst(camelName)}`
+
+const preset = appConfig.ui[camelName]
+
+const { data: ast } = await useAsyncData(`${name}-preset`, () => transformContent('content:_markdown.md', `
+\`\`\`json
+${JSON.stringify(preset, null, 2)}
+\`\`\`\
+`, {
+  highlight: {
+    theme: {
+      light: 'material-lighter',
+      dark: 'material-palenight'
+    }
+  }
+}))
+</script>

docs/components/content/ComponentProps.vue

@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <table class="table-fixed">
+      <thead>
+        <tr>
+          <th class="w-[25%]">
+            Prop
+          </th>
+          <th class="w-[50%]">
+            Default
+          </th>
+          <th>Description</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="prop in metaProps" :key="prop.name">
+          <td class="relative flex-shrink-0">
+            <code>{{ prop.name }}</code><span v-if="prop.required" class="font-bold text-red-500 dark:text-red-400 absolute top-0 ml-1">*</span>
+          </td>
+          <td>
+            <code v-if="prop.default">{{ prop.default }}</code>
+          </td>
+          <td>
+            <a v-if="prop.name === 'ui'" href="#preset">
+              <code>{{ prop.type }}</code>
+            </a>
+            <code v-else class="break-all">
+              {{ prop.type }}
+            </code>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  slug: {
+    type: String,
+    default: null
+  }
+})
+
+const route = useRoute()
+const slug = props.slug || route.params.slug[1]
+const camelName = useCamelCase(slug)
+const name = `U${useUpperFirst(camelName)}`
+
+const meta = await fetchComponentMeta(name)
+
+const metaProps = computed(() => useSortBy(meta?.meta?.props || [], [
+  prop => ['string', 'number', 'boolean', 'any'].indexOf(prop.type)
+]))
+</script>

docs/components/content/ComponentSlots.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <table>
+      <thead>
+        <tr>
+          <th>Slot</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="slot in (meta.meta.slots as any[])" :key="slot.name">
+          <td class="whitespace-nowrap">
+            <code>{{ slot.name }}</code>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  slug: {
+    type: String,
+    default: null
+  }
+})
+
+const route = useRoute()
+const slug = props.slug || route.params.slug[1]
+const camelName = useCamelCase(slug)
+const name = `U${useUpperFirst(camelName)}`
+
+const meta = await fetchComponentMeta(name)
+</script>

docs/components/content/Placeholder.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="relative overflow-hidden rounded border border-dashed border-gray-400 dark:border-gray-500 opacity-75">
+    <svg class="absolute inset-0 h-full w-full stroke-gray-900/10 dark:stroke-white/10" fill="none">
+      <defs>
+        <pattern
+          id="pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e"
+          x="0"
+          y="0"
+          width="10"
+          height="10"
+          patternUnits="userSpaceOnUse"
+        >
+          <path d="M-3 13 15-5M-5 5l18-18M-1 21 17 3" />
+        </pattern>
+      </defs>
+      <rect stroke="none" fill="url(#pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e)" width="100%" height="100%" />
+    </svg>
+
+    <slot />
+  </div>
+</template>

docs/components/content/Shortcut.vue

@@ -0,0 +1,20 @@
+<template>
+  <kbd class="inline-flex items-center justify-center font-sans font-semibold px-1 h-5 min-w-[20px] text-[11px] rounded !my-0 align-text-top ring-1 ring-gray-300 dark:ring-gray-700">
+    <ClientOnly>
+      {{ shortcut }}
+    </ClientOnly>
+  </kbd>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  value: {
+    type: String,
+    required: true
+  }
+})
+
+const { metaSymbol } = useShortcuts()
+
+const shortcut = computed(() => props.value === 'meta' ? metaSymbol.value : props.value)
+</script>

docs/components/content/examples/CardExample.vue

@@ -0,0 +1,13 @@
+<template>
+  <UCard>
+    <template #header>
+      <Placeholder class="h-8" />
+    </template>
+
+    <Placeholder class="h-32" />
+
+    <template #footer>
+      <Placeholder class="h-8" />
+    </template>
+  </UCard>
+</template>

docs/components/content/examples/CommandPaletteExampleBasic.vue

@@ -0,0 +1,26 @@
+<script setup>
+const people = [
+  { id: 1, label: 'Wade Cooper' },
+  { id: 2, label: 'Arlene Mccoy' },
+  { id: 3, label: 'Devon Webb' },
+  { id: 4, label: 'Tom Cook' },
+  { id: 5, label: 'Tanya Fox' },
+  { id: 6, label: 'Hellen Schmidt' },
+  { id: 7, label: 'Caroline Schultz' },
+  { id: 8, label: 'Mason Heaney' },
+  { id: 9, label: 'Claudie Smitham' },
+  { id: 10, label: 'Emil Schaefer' }
+]
+
+const selected = ref([people[3]])
+</script>
+
+<template>
+  <UCommandPalette
+    v-model="selected"
+    multiple
+    nullable
+    :groups="[{ key: 'people', commands: people }]"
+    :fuse="{ resultLimit: 6 }"
+  />
+</template>

docs/components/content/examples/CommandPaletteExampleGroups.vue

@@ -0,0 +1,46 @@
+<script setup>
+const router = useRouter()
+
+const commandPaletteRef = ref()
+
+const users = [
+  { id: 'benjamincanac', label: 'benjamincanac', href: 'https://github.com/benjamincanac', target: '_blank', avatar: { src: 'https://avatars.githubusercontent.com/u/739984?v=4' } },
+  { id: 'Atinux', label: 'Atinux', href: 'https://github.com/Atinux', target: '_blank', avatar: { src: 'https://avatars.githubusercontent.com/u/904724?v=4' } },
+  { id: 'smarroufin', label: 'smarroufin', href: 'https://github.com/smarroufin', target: '_blank', avatar: { src: 'https://avatars.githubusercontent.com/u/7547335?v=4' } }
+]
+
+const actions = [
+  { id: 'new-file', label: 'Add new file', icon: 'i-heroicons-document-plus', click: () => alert('New file') },
+  { id: 'new-folder', label: 'Add new folder', icon: 'i-heroicons-folder-plus', click: () => alert('New folder') },
+  { id: 'hashtag', label: 'Add hashtag', icon: 'i-heroicons-hashtag', click: () => alert('Add hashtag') },
+  { id: 'label', label: 'Add label', icon: 'i-heroicons-tag', click: () => alert('Add label') }
+]
+
+const groups = computed(() => commandPaletteRef.value?.query
+  ? [{
+      key: 'users',
+      commands: users
+    }]
+  : [{
+      key: 'recent',
+      label: 'Recent searches',
+      commands: users.slice(0, 1)
+    }, {
+      key: 'actions',
+      commands: actions
+    }])
+
+function onSelect (option) {
+  if (option.click) {
+    option.click()
+  } else if (option.to) {
+    router.push(option.to)
+  } else if (option.href) {
+    window.open(option.href, '_blank')
+  }
+}
+</script>
+
+<template>
+  <UCommandPalette ref="commandPaletteRef" :groups="groups" @update:model-value="onSelect" />
+</template>

docs/components/content/examples/CommandPaletteExampleModal.vue

@@ -0,0 +1,33 @@
+<script setup>
+const open = ref(false)
+
+const people = [
+  { id: 1, label: 'Wade Cooper' },
+  { id: 2, label: 'Arlene Mccoy' },
+  { id: 3, label: 'Devon Webb' },
+  { id: 4, label: 'Tom Cook' },
+  { id: 5, label: 'Tanya Fox' },
+  { id: 6, label: 'Hellen Schmidt' },
+  { id: 7, label: 'Caroline Schultz' },
+  { id: 8, label: 'Mason Heaney' },
+  { id: 9, label: 'Claudie Smitham' },
+  { id: 10, label: 'Emil Schaefer' }
+]
+
+const selected = ref([])
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="open = true" />
+
+    <UModal v-model="open">
+      <UCommandPalette
+        v-model="selected"
+        multiple
+        nullable
+        :groups="[{ key: 'people', commands: people }]"
+      />
+    </UModal>
+  </div>
+</template>

docs/components/content/examples/ContainerExample.vue

@@ -0,0 +1,5 @@
+<template>
+  <UContainer>
+    <Placeholder class="h-32" />
+  </UContainer>
+</template>

docs/components/content/examples/ContextMenuExample.vue

@@ -0,0 +1,34 @@
+<script setup>
+const { x, y } = useMouse()
+
+const isOpen = ref(false)
+const virtualElement = ref({ getBoundingClientRect: () => ({}) })
+
+function openContextMenu () {
+  const top = unref(y)
+  const left = unref(x)
+
+  virtualElement.value.getBoundingClientRect = () => ({
+    width: 0,
+    height: 0,
+    top,
+    left
+  })
+
+  isOpen.value = true
+}
+</script>
+
+<template>
+  <div class="w-full" @contextmenu.prevent="openContextMenu">
+    <Placeholder class="h-20 w-full flex items-center justify-center">
+      Right click here
+    </Placeholder>
+
+    <UContextMenu v-model="isOpen" :virtual-element="virtualElement" width-class="w-48">
+      <div class="p-4">
+        Menu
+      </div>
+    </UContextMenu>
+  </div>
+</template>

docs/components/content/examples/DropdownExample.vue

@@ -0,0 +1,31 @@
+<script setup>
+const items = [
+  [{
+    label: 'Profile',
+    avatar: {
+      src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+    }
+  }], [{
+    label: 'Edit',
+    icon: 'i-heroicons-pencil-square-20-solid'
+  }, {
+    label: 'Duplicate',
+    icon: 'i-heroicons-document-duplicate-20-solid'
+  }], [{
+    label: 'Archive',
+    icon: 'i-heroicons-archive-box-20-solid'
+  }, {
+    label: 'Move',
+    icon: 'i-heroicons-arrow-right-circle-20-solid'
+  }], [{
+    label: 'Delete',
+    icon: 'i-heroicons-trash-20-solid'
+  }]
+]
+</script>
+
+<template>
+  <UDropdown :items="items" :popper="{ placement: 'bottom-start' }">
+    <UButton color="white" label="Options" trailing-icon="i-heroicons-chevron-down-20-solid" />
+  </UDropdown>
+</template>

docs/components/content/examples/ModalExampleBasic.vue

@@ -0,0 +1,15 @@
+<script setup>
+const open = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="open = true" />
+
+    <UModal v-model="open">
+      <div class="p-4">
+        <Placeholder class="h-48" />
+      </div>
+    </UModal>
+  </div>
+</template>

docs/components/content/examples/ModalExampleCard.vue

@@ -0,0 +1,23 @@
+<script setup>
+const open = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="open = true" />
+
+    <UModal v-model="open">
+      <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+        <template #header>
+          <Placeholder class="h-8" />
+        </template>
+
+        <Placeholder class="h-32" />
+
+        <template #footer>
+          <Placeholder class="h-8" />
+        </template>
+      </UCard>
+    </UModal>
+  </div>
+</template>

docs/components/content/examples/NotificationExampleActions.vue

@@ -0,0 +1,15 @@
+<script setup>
+const toast = useToast()
+
+const actions = ref([{
+  label: 'Action 1',
+  click: () => alert('Action 1 clicked!')
+}, {
+  label: 'Action 2',
+  click: () => alert('Action 2 clicked!')
+}])
+</script>
+
+<template>
+  <UButton label="Show toast" @click="toast.add({ title: 'With actions', actions })" />
+</template>

docs/components/content/examples/NotificationExampleBasic.vue

@@ -0,0 +1,7 @@
+<script setup>
+const toast = useToast()
+</script>
+
+<template>
+  <UButton label="Show toast" @click="toast.add({ title: 'Hello world!' })" />
+</template>

docs/components/content/examples/NotificationExampleCallback.vue

@@ -0,0 +1,11 @@
+<script setup>
+const toast = useToast()
+
+function onCallback () {
+  alert('Notification expired!')
+}
+</script>
+
+<template>
+  <UButton label="Show toast" @click="toast.add({ title: 'Expires soon...', timeout: 1000, callback: onCallback })" />
+</template>

docs/components/content/examples/NotificationExampleClick.vue

@@ -0,0 +1,11 @@
+<script setup>
+const toast = useToast()
+
+function onClick () {
+  alert('Clicked!')
+}
+</script>
+
+<template>
+  <UButton label="Show toast" @click="toast.add({ title: 'Click me', click: onClick })" />
+</template>

docs/components/content/examples/PopoverExample.vue

@@ -0,0 +1,11 @@
+<template>
+  <UPopover>
+    <UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
+
+    <template #panel>
+      <div class="p-4">
+        <Placeholder class="h-20 w-48" />
+      </div>
+    </template>
+  </UPopover>
+</template>

docs/components/content/examples/SelectMenuExampleBasic.vue

@@ -0,0 +1,9 @@
+<script setup>
+const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
+
+const selected = ref()
+</script>
+
+<template>
+  <USelectMenu v-model="selected" :options="people" />
+</template>

docs/components/content/examples/SelectMenuExampleButton.vue

@@ -0,0 +1,15 @@
+<script setup>
+const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
+
+const selected = ref(people[3])
+</script>
+
+<template>
+  <USelectMenu v-slot="{ open }" v-model="selected" :options="people">
+    <UButton>
+      {{ selected }}
+
+      <UIcon name="i-heroicons-chevron-right-20-solid" class="w-5 h-5 transition-transform" :class="[open && 'transform rotate-90']" />
+    </UButton>
+  </USelectMenu>
+</template>

docs/components/content/examples/SelectMenuExampleMultiple.vue

@@ -0,0 +1,14 @@
+<script setup>
+const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
+
+const selected = ref([])
+</script>
+
+<template>
+  <USelectMenu v-model="selected" :options="people" multiple>
+    <template #label>
+      <span v-if="selected.length" class="font-medium truncate">{{ selected.join(', ') }}</span>
+      <span v-else class="block truncate text-gray-400 dark:text-gray-500">Select people</span>
+    </template>
+  </USelectMenu>
+</template>

docs/components/content/examples/SelectMenuExampleObjects.vue

@@ -0,0 +1,41 @@
+<script setup>
+const people = [{
+  id: 'benjamincanac',
+  label: 'benjamincanac',
+  href: 'https://github.com/benjamincanac',
+  target: '_blank',
+  avatar: { src: 'https://avatars.githubusercontent.com/u/739984?v=4' }
+},
+{
+  id: 'Atinux',
+  label: 'Atinux',
+  href: 'https://github.com/Atinux',
+  target: '_blank',
+  avatar: { src: 'https://avatars.githubusercontent.com/u/904724?v=4' }
+},
+{
+  id: 'smarroufin',
+  label: 'smarroufin',
+  href: 'https://github.com/smarroufin',
+  target: '_blank',
+  avatar: { src: 'https://avatars.githubusercontent.com/u/7547335?v=4' }
+},
+{
+  id: 'nobody',
+  label: 'Nobody',
+  icon: 'i-heroicons-user-circle'
+}]
+
+const selected = ref(people[0])
+</script>
+
+<template>
+  <USelectMenu v-model="selected" :options="people">
+    <template #label>
+      <UIcon v-if="selected.icon" :name="selected.icon" class="w-4 h-4" />
+      <UAvatar v-else-if="selected.avatar" v-bind="selected.avatar" size="3xs" />
+
+      {{ selected.label }}
+    </template>
+  </USelectMenu>
+</template>

docs/components/content/examples/SlideoverExample.vue

@@ -0,0 +1,15 @@
+<script setup>
+const open = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="open = true" />
+
+    <USlideover v-model="open">
+      <div class="p-4 h-full">
+        <Placeholder class="w-full h-full" />
+      </div>
+    </USlideover>
+  </div>
+</template>

docs/components/content/examples/TooltipExample.vue

@@ -0,0 +1,5 @@
+<template>
+  <UTooltip text="Tooltip">
+    <UButton color="gray" label="Button" />
+  </UTooltip>
+</template>

docs/components/content/examples/VerticalNavigationExample.vue

@@ -0,0 +1,24 @@
+<script setup>
+const links = [{
+  label: 'Profile',
+  avatar: {
+    src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+  }
+}, {
+  label: 'Installation',
+  icon: 'i-heroicons-home',
+  to: '/getting-started/installation'
+}, {
+  label: 'Vertical Navigation',
+  icon: 'i-heroicons-chart-bar',
+  to: '/navigation/vertical-navigation'
+}, {
+  label: 'Command Palette',
+  icon: 'i-heroicons-command-line',
+  to: '/navigation/command-palette'
+}]
+</script>
+
+<template>
+  <UVerticalNavigation :links="links" />
+</template>

docs/components/content/prose/ProseCode.vue

@@ -0,0 +1,71 @@
+<script lang="ts">
+import { defineComponent } from '#imports'
+
+export default defineComponent({
+  props: {
+    code: {
+      type: String,
+      default: ''
+    },
+    language: {
+      type: String,
+      default: null
+    },
+    filename: {
+      type: String,
+      default: null
+    },
+    highlights: {
+      type: Array as () => number[],
+      default: () => []
+    },
+    meta: {
+      type: String,
+      default: null
+    }
+  },
+  setup (props) {
+    const clipboard = useCopyToClipboard({ timeout: 2000 })
+    const icon = ref('i-heroicons-clipboard-document')
+
+    function copy () {
+      clipboard.copy(props.code, { title: 'Copied to clipboard!' })
+
+      icon.value = 'i-heroicons-clipboard-document-check'
+
+      setTimeout(() => {
+        icon.value = 'i-heroicons-clipboard-document'
+      }, 2000)
+    }
+
+    return {
+      icon,
+      copy
+    }
+  }
+})
+</script>
+
+<template>
+  <div class="group relative" :class="`language-${language}`">
+    <UButton
+      :icon="icon"
+      variant="link"
+      class="absolute right-3 top-3 opacity-0 group-hover:opacity-100 transition-opacity z-[1]"
+      size="xs"
+      tabindex="-1"
+      @click="copy"
+    />
+
+    <span v-if="filename" class="text-gray-400 dark:text-gray-500 absolute right-3 bottom-3 text-sm group-hover:opacity-0 transition-opacity">{{ filename }}</span>
+
+    <slot />
+  </div>
+</template>
+
+<style>
+pre code .line {
+  display: block;
+  min-height: 1rem;
+}
+</style>

docs/components/content/prose/ProseH2.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+defineProps<{ id: string }>()
+</script>
+
+<template>
+  <h2 :id="id" class="scroll-mt-[161px] lg:scroll-mt-[112px]">
+    <NuxtLink :href="`#${id}`" class="group">
+      <div class="-ml-6 pr-2 py-2 inline-flex opacity-0 group-hover:opacity-100 transition-opacity absolute">
+        <UIcon name="i-heroicons-hashtag-20-solid" class="w-4 h-4 text-primary-500 dark:text-primary-400" />
+      </div>
+
+      <slot />
+    </NuxtLink>
+  </h2>
+</template>

docs/components/content/prose/ProseH3.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+defineProps<{ id: string }>()
+</script>
+
+<template>
+  <h3 :id="id" class="scroll-mt-[145px] lg:scroll-mt-[96px]">
+    <NuxtLink :href="`#${id}`" class="group">
+      <div class="-ml-6 pr-2 py-2 inline-flex opacity-0 group-hover:opacity-100 transition-opacity absolute">
+        <UIcon name="i-heroicons-hashtag-20-solid" class="w-4 h-4 text-primary-500 dark:text-primary-400" />
+      </div>
+
+      <slot />
+    </NuxtLink>
+  </h3>
+</template>

docs/components/content/themes/CommandPaletteThemeAlgolia.vue

@@ -0,0 +1,69 @@
+<script setup>
+const commandPaletteRef = ref()
+
+const { navigation } = useContent()
+
+const { data: files } = await useLazyAsyncData('search', () => queryContent().where({ _type: 'markdown' }).find(), { default: () => [] })
+
+const groups = computed(() => navigation.value.map(item => ({
+  key: item._path,
+  label: item.title,
+  commands: files.value.filter(file => file._path.startsWith(item._path)).map(file => ({
+    id: file._id,
+    icon: 'i-heroicons-document',
+    title: file.navigation?.title || file.title,
+    category: item.title,
+    to: file._path
+  }))
+})))
+
+const close = computed(() => commandPaletteRef.value?.query ? ({ icon: 'i-heroicons-x-mark', color: 'black', variant: 'ghost', size: 'lg', padded: false }) : null)
+const empty = computed(() => commandPaletteRef.value?.query ? ({ icon: 'i-heroicons-magnifying-glass', queryLabel: 'No results' }) : ({ icon: '', label: 'No recent searches' }))
+
+const ui = {
+  wrapper: 'flex flex-col flex-1 min-h-0 bg-gray-50 dark:bg-gray-800',
+  input: {
+    wrapper: 'relative flex items-center mx-3 py-3',
+    base: 'w-full rounded border-2 border-primary-500 placeholder-gray-400 dark:placeholder-gray-500 focus:border-primary-500 focus:outline-none focus:ring-0 h-14 text-lg bg-white dark:bg-gray-900',
+    icon: 'pointer-events-none absolute left-3 h-6 w-6 text-primary-500 dark:text-primary-400'
+  },
+  group: {
+    wrapper: 'p-3 relative',
+    label: '-mx-3 px-3 -mt-4 mb-2 py-1 text-sm font-semibold text-primary-500 dark:text-primary-400 font-semibold sticky top-0 bg-gray-50 dark:bg-gray-800 z-10',
+    container: 'space-y-1',
+    command: {
+      base: 'flex justify-between select-none items-center rounded px-2 py-4 gap-2 relative font-medium text-sm group shadow',
+      active: 'bg-primary-500 dark:bg-primary-400 text-white',
+      inactive: 'bg-white dark:bg-gray-900',
+      label: 'flex flex-col min-w-0',
+      suffix: 'text-xs',
+      icon: {
+        base: 'flex-shrink-0 w-6 h-6',
+        active: 'text-white',
+        inactive: 'text-gray-400 dark:text-gray-500'
+      }
+    }
+  },
+  empty: {
+    wrapper: 'flex flex-col items-center justify-center flex-1 py-9',
+    label: 'text-sm text-center text-gray-500 dark:text-gray-400',
+    queryLabel: 'text-lg text-center text-gray-900 dark:text-white',
+    icon: 'w-12 h-12 mx-auto text-gray-400 dark:text-gray-500 mb-4'
+  }
+}
+</script>
+
+<template>
+  <UCommandPalette
+    ref="commandPaletteRef"
+    :groups="groups"
+    :ui="ui"
+    :close="close"
+    :empty="empty"
+    command-attribute="title"
+    :fuse="{
+      fuseOptions: { keys: ['title', 'category'] },
+    }"
+    placeholder="Search docs"
+  />
+</template>

docs/components/content/themes/CommandPaletteThemeRaycast.vue

@@ -0,0 +1,57 @@
+<script setup>
+const commandPaletteRef = ref()
+
+const suggestions = [
+  { id: 'linear', label: 'Linear', icon: 'i-simple-icons-linear' },
+  { id: 'figma', label: 'Figma', icon: 'i-simple-icons-figma' },
+  { id: 'slack', label: 'Slack', icon: 'i-simple-icons-slack' },
+  { id: 'youtube', label: 'YouTube', icon: 'i-simple-icons-youtube' },
+  { id: 'github', label: 'GitHub', icon: 'i-simple-icons-github' }
+]
+
+const commands = [
+  { id: 'clipboard-history', label: 'Clipboard History', icon: 'i-heroicons-clipboard', click: () => alert('New file') },
+  { id: 'import-extension', label: 'Import Extension', icon: 'i-heroicons-wrench-screwdriver', click: () => alert('New folder') },
+  { id: 'manage-extensions', label: 'Manage Extensions', icon: 'i-heroicons-wrench-screwdriver', click: () => alert('Add hashtag') }
+]
+
+const groups = [{
+  key: 'suggestions',
+  label: 'Suggestions',
+  inactive: 'Application',
+  commands: suggestions
+}, {
+  key: 'commands',
+  label: 'Commands',
+  inactive: 'Command',
+  commands
+}]
+
+const ui = {
+  wrapper: 'flex flex-col flex-1 min-h-0 divide-y divide-gray-200 dark:divide-gray-700 bg-gray-50 dark:bg-gray-800',
+  container: 'relative flex-1 overflow-y-auto divide-y divide-gray-200 dark:divide-gray-700 scroll-py-2',
+  input: {
+    base: 'w-full h-14 px-4 placeholder-gray-400 dark:placeholder-gray-500 bg-transparent border-0 text-gray-900 dark:text-white focus:ring-0'
+  },
+  group: {
+    label: 'px-2 my-2 text-xs font-semibold text-gray-500 dark:text-gray-400',
+    command: {
+      base: 'flex justify-between select-none cursor-default items-center rounded-md px-2 py-2 gap-2 relative',
+      active: 'bg-gray-200 dark:bg-gray-700/50 text-gray-900 dark:text-white',
+      container: 'flex items-center gap-3 min-w-0',
+      icon: {
+        base: 'flex-shrink-0 w-5 h-5',
+        active: 'text-gray-900 dark:text-white',
+        inactive: 'text-gray-400 dark:text-gray-500'
+      },
+      avatar: {
+        size: '2xs'
+      }
+    }
+  }
+}
+</script>
+
+<template>
+  <UCommandPalette ref="commandPaletteRef" :groups="groups" icon="" :ui="ui" placeholder="Search for apps and commands" />
+</template>