docs: update

docs/app/app.config.ts

@@ -1,6 +1,6 @@
 export default defineAppConfig({
   ui: {
-    primary: 'green',
-    gray: 'slate'
+    primary: 'sky',
+    gray: 'cool'
   }
 })

docs/app/assets/icons/radix-vue.svg

@@ -0,0 +1,34 @@
+<svg width="290" height="290" viewBox="0 0 290 290" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M226.269 52.4044L226.274 52.4067C237.406 58.2619 245.614 66.3008 250.94 76.5218C256.285 86.7776 258.969 98.4614 258.969 111.596C258.969 124.732 256.285 136.34 250.943 146.446C245.618 156.521 237.447 164.451 226.389 170.234C221.59 172.712 219.355 178.881 222.459 183.542L257.922 236.789C261.773 242.571 257.628 250.311 250.681 250.311H196.906C193.806 250.311 190.939 248.661 189.382 245.98L79.3991 56.5686C76.0313 50.7687 80.2159 43.5 86.9227 43.5H183.394C200.888 43.5 215.161 46.4896 226.269 52.4044Z" fill="url(#paint0_linear_30_25)" stroke="url(#paint1_linear_30_25)" stroke-width="1.93333"/>
+<path d="M116.722 247.228C113.004 253.687 103.684 253.687 99.9661 247.228L26.2042 119.085C22.4947 112.64 27.1462 104.596 34.5821 104.596L182.106 104.596C189.542 104.596 194.193 112.64 190.484 119.085L116.722 247.228Z" fill="url(#paint2_radial_30_25)"/>
+<path d="M116.722 247.228C113.004 253.687 103.684 253.687 99.9661 247.228L26.2042 119.085C22.4947 112.64 27.1462 104.596 34.5821 104.596L182.106 104.596C189.542 104.596 194.193 112.64 190.484 119.085L116.722 247.228Z" fill="url(#paint3_radial_30_25)" fill-opacity="0.5"/>
+<path d="M100.804 246.745L27.042 118.602C23.7034 112.802 27.8898 105.562 34.5821 105.562L182.106 105.562C188.798 105.562 192.985 112.802 189.646 118.602L115.884 246.745C112.538 252.558 104.15 252.558 100.804 246.745Z" fill="url(#paint4_radial_30_25)" fill-opacity="0.5" stroke="url(#paint5_linear_30_25)" stroke-width="1.93333" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_30_25" x1="241.666" y1="264.867" x2="88.9331" y2="7.73334" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00996C"/>
+<stop offset="1" stop-color="#7AFFD8"/>
+</linearGradient>
+<linearGradient id="paint1_linear_30_25" x1="192.366" y1="289.033" x2="233.933" y2="42.5333" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0.56"/>
+<stop offset="0.494792" stop-color="white" stop-opacity="0"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<radialGradient id="paint2_radial_30_25" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(185.6 110.2) rotate(147.858) scale(129.006 128.619)">
+<stop offset="0.48614" stop-color="#00C58A"/>
+<stop offset="1" stop-color="white" stop-opacity="0.21"/>
+</radialGradient>
+<radialGradient id="paint3_radial_30_25" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(108.266 160.467) rotate(90) scale(191.4 190.827)">
+<stop stop-color="white" stop-opacity="0"/>
+<stop offset="1" stop-color="white"/>
+</radialGradient>
+<radialGradient id="paint4_radial_30_25" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(108.266 181.733) rotate(-90) scale(129.533 129.145)">
+<stop stop-color="white" stop-opacity="0"/>
+<stop offset="1" stop-color="white"/>
+</radialGradient>
+<linearGradient id="paint5_linear_30_25" x1="105.366" y1="105.367" x2="105.366" y2="261" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0.6"/>
+<stop offset="0.494792" stop-color="white" stop-opacity="0"/>
+<stop offset="1" stop-color="white" stop-opacity="0.38"/>
+</linearGradient>
+</defs>
+</svg>

docs/app/components/Header.vue

@@ -30,7 +30,7 @@ const items = computed(() => props.links.map(({ icon, ...link }) => link))
       </NuxtLink>
     </template>
 
-    <UNavigationMenu :items="items" variant="link" />
+    <!-- <UNavigationMenu :items="items" variant="link" /> -->
 
     <template #right>
       <!-- <ColorPicker /> -->

docs/app/components/content/ComponentApi.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { upperFirst, camelCase } from 'scule'
+import type { ComponentMeta } from 'vue-component-meta'
+
+const props = defineProps<{ slug?: string }>()
+
+const route = useRoute()
+
+const name = props.slug || `U${upperFirst(camelCase(route.params.slug[route.params.slug.length - 1]))}`
+
+const componentMeta = await useComponentMeta(name as any)
+
+const meta: ComputedRef<ComponentMeta> = computed(() => componentMeta.value.meta)
+
+const { data: ast } = await useAsyncData(`${name}-api`, () => parseMarkdown(`
+## API
+
+${section('props')}
+${section('slots')}
+${section('events')}
+`))
+
+function section(type: string) {
+  const columns = {
+    props: [{ key: 'name', label: 'Prop' }, { key: 'default', label: 'Default' }, { key: 'type', addKey: 'description', label: 'Type' }],
+    slots: [{ key: 'name', label: 'Slot' }, { key: 'type', addKey: 'description', label: 'Type' }],
+    events: [{ key: 'name', label: 'Event' }, { key: 'type', addKey: 'description', label: 'Type' }]
+  }
+
+  const items = meta.value[type]
+  if (!items?.length) {
+    return ''
+  }
+
+  return `
+### ${upperFirst(type)}
+
+${table(items, columns[type])}
+`
+}
+
+function table(items: any[], columns?: { key: string, addKey?: string, label: string }[], align: string = 'left') {
+  let table = ''
+  const separator = {
+    left: ':---',
+    right: '---:',
+    center: '---'
+  }
+
+  // Generate columns
+  const cols = columns?.length ? columns : Object.keys(items[0]).map(key => ({ key, label: upperFirst(key) }))
+
+  // Generate table headers
+  table += cols.map(col => col.label).join(' | ')
+  table += '\r\n'
+
+  // Generate table separator
+  table += cols.map(() => {
+    return separator[align] || separator.center
+  }).join(' | ')
+  table += '\r\n'
+
+  // Generate table body
+  items.forEach((item) => {
+    table += cols.map((col) => {
+      let code = item[col.key] ? `<code>${item[col.key].replaceAll('|', '&#124;')}</code>` : ''
+
+      if (col.addKey) {
+        code += item[col.addKey] ? `<p class="!mt-1">${item[col.addKey].replaceAll('\n\n', '<br>').replaceAll('\n', '<br>')}</p>` : ''
+      }
+
+      return code
+    }).join(' | ') + '\r\n'
+  })
+
+  return table
+}
+</script>
+
+<template>
+  <MDCRenderer v-if="ast && (meta.props?.length || meta.slots?.length || meta.events?.length)" :body="ast.body" :data="ast.data" :tag="false" />
+</template>

docs/app/components/content/ComponentTheme.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import json5 from 'json5'
+import { parseMarkdown } from '@nuxtjs/mdc/runtime'
+import * as theme from '#build/ui'
+
+const props = defineProps<{ slug?: string }>()
+
+const route = useRoute()
+
+const name = props.slug || route.params.slug[route.params.slug.length - 1]
+
+const { data: ast } = await useAsyncData(`${name}-theme`, () => parseMarkdown(`
+## Theme
+
+\`\`\`yml
+${json5.stringify(theme[name], null, 2).replace(/,([ |\t\n]+[}|\])])/g, '$1')}
+\`\`\`\
+
+::callout{icon="i-heroicons-light-bulb"}
+You can customize this component in your \`app.config.ts\` under \`ui.card\` key.
+::
+`))
+</script>
+
+<template>
+  <MDCRenderer v-if="ast" :body="ast.body" :data="ast.data" />
+</template>

docs/app/composables/useComponentMeta.ts

@@ -1,28 +0,0 @@
-const useComponentsMetaState = () => useState('components-meta', () => ({}))
-
-export async function fetchComponentMeta (name: string) {
-  const state = useComponentsMetaState()
-
-  if (state.value[name]?.then) {
-    await state.value[name]
-    return state.value[name]
-  }
-  if (state.value[name]) { return state.value[name] }
-
-  // Store promise to avoid multiple calls
-
-  // add to nitro prerender
-  if (import.meta.server) {
-    const event = useRequestEvent()
-    event.node.res.setHeader(
-      'x-nitro-prerender',
-      [event.node.res.getHeader('x-nitro-prerender'), `/api/component-meta/${name}.json`].filter(Boolean).join(',')
-    )
-  }
-  state.value[name] = $fetch(`/api/component-meta/${name}.json`).then((meta) => {
-    state.value[name] = meta
-  })
-
-  await state.value[name]
-  return state.value[name]
-}

docs/app/composables/useModule.ts

@@ -1,24 +0,0 @@
-import pkg from '../../ui-pro2/package.json'
-
-export function useModule() {
-  const config = useRuntimeConfig().public
-
-  const modules = [{
-    label: 'nuxt/ui',
-    icon: 'i-heroicons-cube-transparent',
-    suffix: `v${config.version}`,
-    value: 'ui'
-    }, {
-    label: 'nuxt/ui-pro',
-    icon: 'i-heroicons-cube-transparent',
-    suffix: `v${pkg.version.split('-')[0]}`,
-    value: 'ui-pro'
-  }]
-
-  const module = useCookie<string>('module', { default: () => modules[0].value })
-
-  return {
-    module,
-    modules
-  }
-}

docs/app/error.vue

@@ -30,20 +30,22 @@ const links = computed(() => {
     icon: 'i-heroicons-book-open',
     to: '/getting-started',
     active: route.path.startsWith('/getting-started') || route.path.startsWith('/components')
-  }, ...(navigation.value.find(item => item._path === '/pro') ? [{
-    label: 'Pro',
-    icon: 'i-heroicons-square-3-stack-3d',
-    to: '/pro',
-    active: route.path.startsWith('/pro/getting-started') || route.path.startsWith('/pro/components') || route.path.startsWith('/pro/prose')
-  }, {
-    label: 'Pricing',
-    icon: 'i-heroicons-credit-card',
-    to: '/pro/pricing'
-  }, {
-    label: 'Templates',
-    icon: 'i-heroicons-computer-desktop',
-    to: '/pro/templates'
-  }] : []), {
+  }, ...(navigation.value.find(item => item._path === '/pro')
+    ? [{
+        label: 'Pro',
+        icon: 'i-heroicons-square-3-stack-3d',
+        to: '/pro',
+        active: route.path.startsWith('/pro/getting-started') || route.path.startsWith('/pro/components') || route.path.startsWith('/pro/prose')
+      }, {
+        label: 'Pricing',
+        icon: 'i-heroicons-credit-card',
+        to: '/pro/pricing'
+      }, {
+        label: 'Templates',
+        icon: 'i-heroicons-computer-desktop',
+        to: '/pro/templates'
+      }]
+    : []), {
     label: 'Releases',
     icon: 'i-heroicons-rocket-launch',
     to: '/releases'
@@ -54,7 +56,7 @@ const links = computed(() => {
 
 useHead({
   meta: [
-    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+    { name: 'viewport', content: 'width=device-width, initial-scale=1' }
     // { key: 'theme-color', name: 'theme-color', content: color }
   ],
   link: [

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { withoutTrailingSlash } from 'ufo'
-import { findPageHeadline } from '@nuxt/ui-pro/runtime/utils/content'
+import { findPageHeadline } from '#ui-pro/utils/content'
 
 const route = useRoute()