Merge branch 'feature/useOverlayManager' of https://github.com/genu/ui …

…into feature/useOverlayManager

docs/app/components/Header.vue

@@ -25,7 +25,7 @@ const items = computed(() => props.links.map(({ icon, ...link }) => link))
 </script>
 
 <template>
-  <UHeader :ui="{ left: 'min-w-0' }" mode="drawer" :menu="{ shouldScaleBackground: true }">
+  <UHeader :ui="{ left: 'min-w-0' }" :menu="{ shouldScaleBackground: true }">
     <template #left>
       <NuxtLink to="/" class="flex items-end gap-2 font-bold text-xl text-(--ui-text-highlighted) min-w-0 focus-visible:outline-(--ui-primary) shrink-0" aria-label="Nuxt UI">
         <LogoPro class="w-auto h-6 shrink-0 ui-pro-only" />
@@ -64,6 +64,7 @@ const items = computed(() => props.links.map(({ icon, ...link }) => link))
 
       <UTooltip text="Open on GitHub" class="hidden lg:flex">
         <UButton
+          :key="value"
           color="neutral"
           variant="ghost"
           :to="`https://github.com/nuxt/${value}`"
@@ -89,7 +90,7 @@ const items = computed(() => props.links.map(({ icon, ...link }) => link))
           <span class="inline-flex items-center gap-0.5">
             {{ link.title }}
 
-            <sup v-if="link.module === 'ui-pro' && link.path.startsWith('/components')" class="text-[8px] font-medium text-(--ui-primary)">PRO</sup>
+            <sup v-if="link.module === 'ui-pro'" class="text-[8px] font-medium text-(--ui-primary)">PRO</sup>
           </span>
         </template>
       </UContentNavigation>

docs/app/components/content/ComponentCode.vue

@@ -316,7 +316,7 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
 <template>
   <div class="my-5">
     <div>
-      <div v-if="options.length" class="flex items-center gap-2.5 border border-(--ui-border-muted) border-b-0 relative rounded-t-[calc(var(--ui-radius)*1.5)] px-4 py-2.5 overflow-x-auto">
+      <div v-if="options.length" class="flex flex-wrap items-center gap-2.5 border border-(--ui-border-muted) border-b-0 relative rounded-t-[calc(var(--ui-radius)*1.5)] px-4 py-2.5 overflow-x-auto">
         <template v-for="option in options" :key="option.name">
           <UFormField
             :label="option.label"

docs/app/components/content/examples/tree/TreeCustomSlotExample.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { TreeItem } from '@nuxt/ui'
+
+const items: TreeItem[] = [
+  {
+    label: 'app/',
+    slot: 'app',
+    defaultExpanded: true,
+    children: [{
+      label: 'composables/',
+      children: [
+        { label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' },
+        { label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' }
+      ]
+    },
+    {
+      label: 'components/',
+      defaultExpanded: true,
+      children: [
+        { label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
+        { label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
+      ]
+    }]
+  },
+  { label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' },
+  { label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }
+]
+</script>
+
+<template>
+  <UTree :items="items">
+    <template #app="{ item }">
+      <p class="italic font-bold">
+        {{ item.label }}
+      </p>
+    </template>
+  </UTree>
+</template>

docs/app/components/content/examples/tree/TreeExpandedExample.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { TreeItem } from '@nuxt/ui'
+
+const items: TreeItem[] = [
+  {
+    label: 'app/',
+    value: 'app',
+    children: [{
+      label: 'composables/',
+      value: 'composables',
+      children: [
+        { label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' },
+        { label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' }
+      ]
+    },
+    {
+      label: 'components/',
+      value: 'components',
+      children: [
+        { label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
+        { label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
+      ]
+    }]
+  },
+  { label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' },
+  { label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }
+]
+
+const expanded = ref(['app', 'composables'])
+</script>
+
+<template>
+  <UTree v-model:expanded="expanded" :items="items" />
+</template>

docs/app/components/content/examples/tree/TreeModelValueExample.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { TreeItem } from '@nuxt/ui'
+
+const items: TreeItem[] = [
+  {
+    label: 'app/',
+    defaultExpanded: true,
+    children: [{
+      label: 'composables/',
+      children: [
+        { label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' },
+        { label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' }
+      ]
+    },
+    {
+      label: 'components/',
+      defaultExpanded: true,
+      children: [
+        { label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
+        { label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
+      ]
+    }]
+  },
+  { label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' },
+  { label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }
+]
+
+const value = ref(items[items.length - 1])
+</script>
+
+<template>
+  <UTree v-model="value" :items="items" />
+</template>

docs/app/components/content/examples/tree/TreeOnSelectExample.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { TreeItem } from '@nuxt/ui'
+
+const items: TreeItem[] = [
+  {
+    label: 'app/',
+    defaultExpanded: true,
+    onSelect: (e: Event) => {
+      e.preventDefault()
+    },
+    children: [{
+      label: 'composables/',
+      children: [
+        { label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' },
+        { label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' }
+      ]
+    },
+    {
+      label: 'components/',
+      defaultExpanded: true,
+      children: [
+        { label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
+        { label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
+      ]
+    }]
+  },
+  { label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' },
+  { label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }
+]
+</script>
+
+<template>
+  <UTree :items="items" />
+</template>

docs/app/components/content/examples/tree/TreeOnToggleExample.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { TreeItem } from '@nuxt/ui'
+
+const items: TreeItem[] = [
+  {
+    label: 'app/',
+    defaultExpanded: true,
+    onToggle: (e: Event) => {
+      e.preventDefault()
+    },
+    children: [{
+      label: 'composables/',
+      children: [
+        { label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' },
+        { label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' }
+      ]
+    },
+    {
+      label: 'components/',
+      defaultExpanded: true,
+      children: [
+        { label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
+        { label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
+      ]
+    }]
+  },
+  { label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' },
+  { label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }
+]
+</script>
+
+<template>
+  <UTree :items="items" />
+</template>

docs/app/composables/useLinks.ts

@@ -5,12 +5,48 @@ export function useLinks() {
     label: 'Docs',
     icon: 'i-lucide-square-play',
     to: '/getting-started',
-    active: route.path.startsWith('/getting-started')
+    active: route.path.startsWith('/getting-started') || route.path.startsWith('/composables/') || (route.path.startsWith('/components/') && route.name !== 'components')
   }, {
     label: 'Components',
     icon: 'i-lucide-square-code',
     to: '/components',
-    active: route.path.startsWith('/components')
+    children: [{
+      label: 'Layout',
+      to: '/components#layout',
+      description: 'Container, grid, divider and responsive layout.',
+      icon: 'i-lucide-layout',
+      active: route.fullPath === '/components#layout'
+    }, {
+      label: 'Form',
+      to: '/components#form',
+      description: 'Input, select, checkbox, radio and form validation.',
+      icon: 'i-lucide-text-cursor-input',
+      active: route.fullPath === '/components#form'
+    }, {
+      label: 'Element',
+      to: '/components#element',
+      description: 'Button, badge, icon, alert, and small UI elements.',
+      icon: 'i-lucide-mouse-pointer',
+      active: route.fullPath === '/components#element'
+    }, {
+      label: 'Data',
+      to: '/components#data',
+      description: 'Table, list, card, carousel and visualization elements.',
+      icon: 'i-lucide-table',
+      active: route.fullPath === '/components#data'
+    }, {
+      label: 'Navigation',
+      to: '/components#navigation',
+      description: 'Menu, breadcrumb, pagination and navbar.',
+      icon: 'i-lucide-link',
+      active: route.fullPath === '/components#navigation'
+    }, {
+      label: 'Overlay',
+      to: '/components#overlay',
+      description: 'Modal, tooltip, dialog and popover.',
+      icon: 'i-lucide-layers',
+      active: route.fullPath === '/components#overlay'
+    }]
   }, {
     label: 'Pro',
     icon: 'i-lucide-panels-top-left',

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

@@ -116,11 +116,15 @@ const communityLinks = computed(() => [{
 
 <template>
   <UPage v-if="page">
-    <UPageHeader :title="page.title">
+    <UPageHeader>
       <template #headline>
         <UBreadcrumb :items="breadcrumb" />
       </template>
 
+      <template #title>
+        {{ page.title }}<sup v-if="page.module === 'ui-pro'" class="ml-1 text-xs align-super font-medium text-(--ui-primary)">PRO</sup>
+      </template>
+
       <template #description>
         <MDC v-if="page.description" :value="page.description" unwrap="p" />
       </template>