Merge remote-tracking branch 'origin/v3' into feat/improve-safelist

docs/app/components/FrameworkSelect.vue

@@ -6,6 +6,10 @@ const value = ref<string | undefined>(undefined)
 onMounted(() => {
   value.value = framework.value
 })
+
+watch(framework, () => {
+  value.value = framework.value
+})
 </script>
 
 <template>

docs/app/components/Header.vue

@@ -9,6 +9,16 @@ const props = defineProps<{
 const config = useRuntimeConfig().public
 const { module } = useSharedData()
 
+const value = ref<string | undefined>(module.value)
+
+watch(module, () => {
+  value.value = module.value
+})
+
+onMounted(() => {
+  value.value = module.value
+})
+
 const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
 
 const items = computed(() => props.links.map(({ icon, ...link }) => link))
@@ -52,11 +62,11 @@ const items = computed(() => props.links.map(({ icon, ...link }) => link))
         <UContentSearchButton />
       </UTooltip>
 
-      <UTooltip text="Open on GitHub" :kbds="['meta', 'G']" class="hidden lg:flex">
+      <UTooltip text="Open on GitHub" class="hidden lg:flex">
         <UButton
           color="neutral"
           variant="ghost"
-          :to="`https://github.com/nuxt/${module}`"
+          :to="`https://github.com/nuxt/${value}`"
           target="_blank"
           icon="i-simple-icons-github"
           aria-label="GitHub"

docs/app/components/ModuleSelect.vue

@@ -6,6 +6,10 @@ const value = ref<string | undefined>(undefined)
 onMounted(() => {
   value.value = module.value
 })
+
+watch(module, () => {
+  value.value = module.value
+})
 </script>
 
 <template>

docs/content/3.components/navigation-menu.md

@@ -21,6 +21,7 @@ Use the `items` prop as an array of objects with the following properties:
 - `avatar?: AvatarProps`{lang="ts-type"}
 - `badge?: string | number | BadgeProps`{lang="ts-type"}
 - `trailingIcon?: string`{lang="ts-type"}
+- `type?: 'label' | 'link'`{lang="ts-type"}
 - `value?: string`{lang="ts-type"}
 - `disabled?: boolean`{lang="ts-type"}
 - `class?: any`{lang="ts-type"}
@@ -138,7 +139,9 @@ Each item can take a `children` array of objects with the following properties t
 
 Use the `orientation` prop to change the orientation of the NavigationMenu.
 
+::note
 When orientation is `vertical`, a [Collapsible](/components/collapsible) component is used to display children. You can control the open state of each item using the `open` and `defaultOpen` properties.
+::
 
 ::component-code
 ---
@@ -151,7 +154,9 @@ external:
 props:
   orientation: 'vertical'
   items:
-    - - label: Guide
+    - - label: Links
+        type: 'label'
+      - label: Guide
         icon: i-lucide-book-open
         children:
           - label: Introduction

docs/package.json

@@ -7,7 +7,7 @@
     "@iconify-json/lucide": "^1.2.22",
     "@iconify-json/simple-icons": "^1.2.19",
     "@iconify-json/vscode-icons": "^1.2.10",
-    "@nuxt/content": "3.0.0-alpha.9",
+    "@nuxt/content": "^3.0.0",
     "@nuxt/image": "^1.9.0",
     "@nuxt/ui": "latest",
     "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@2dbbff0",

playground/app/pages/components/navigation-menu.vue

@@ -10,9 +10,13 @@ const highlightColor = ref()
 const variant = ref(theme.defaultVariants.variant)
 const orientation = ref('vertical' as const)
 const highlight = ref(true)
+const collapsed = ref(false)
 
 const items = [
   [{
+    label: 'Link',
+    type: 'label' as const
+  }, {
     label: 'Documentation',
     icon: 'i-lucide-book-open',
     badge: 10,
@@ -40,33 +44,33 @@ const items = [
     defaultOpen: true,
     children: [{
       label: 'Link',
-      icon: 'i-lucide-file',
+      icon: 'i-lucide-link',
       description: 'Use NuxtLink with superpowers.',
       to: '/components/link'
     }, {
       label: 'Modal',
-      icon: 'i-lucide-file',
-      description: 'Display a modal within your application.',
+      icon: 'i-lucide-square',
+      description: 'Display a modal dialog overlay for important content.',
       to: '/components/modal'
     }, {
       label: 'NavigationMenu',
-      icon: 'i-lucide-file',
+      icon: 'i-lucide-list',
       description: 'Display a list of links.',
       to: '/components/navigation-menu',
       trailingIcon: 'i-lucide-check'
     }, {
       label: 'Pagination',
-      icon: 'i-lucide-file',
+      icon: 'i-lucide-parking-meter',
       description: 'Display a list of pages.',
       to: '/components/pagination'
     }, {
       label: 'Popover',
-      icon: 'i-lucide-file',
+      icon: 'i-lucide-message-circle',
       description: 'Display a non-modal dialog that floats around a trigger element.',
       to: '/components/popover'
     }, {
       label: 'Progress',
-      icon: 'i-lucide-file',
+      icon: 'i-lucide-loader',
       description: 'Show a horizontal bar to indicate task progression.',
       to: '/components/progress'
     }]
@@ -89,20 +93,22 @@ const items = [
       <USelect v-model="color" :items="colors" placeholder="Color" />
       <USelect v-model="variant" :items="variants" placeholder="Variant" />
       <USelect v-model="orientation" :items="orientations" placeholder="Orientation" />
+      <USwitch v-model="collapsed" label="Collapsed" />
       <USwitch v-model="highlight" label="Highlight" />
       <USelect v-model="highlightColor" :items="colors" placeholder="Highlight color" />
     </div>
 
     <UNavigationMenu
       arrow
+      :collapsed="collapsed"
       :items="items"
       :color="color"
       :variant="variant"
       :orientation="orientation"
       :highlight="highlight"
       :highlight-color="highlightColor"
       :class="highlight && 'data-[orientation=horizontal]:border-b border-[var(--ui-border)]'"
-      class="data-[orientation=vertical]:w-48"
+      class="data-[orientation=vertical]:data-[collapsed=false]:w-48"
     />
   </div>
 </template>