docs: add @nuxt/ui-pro source (#2775)

docs/app/composables/useContentNavigation.ts

@@ -2,25 +2,34 @@ import type { ContentNavigationItem } from '@nuxt/content'
 
 function processNavigationItem(item: ContentNavigationItem, parent?: ContentNavigationItem): any {
   if (item.shadow) {
-    return item.children?.map(child => processNavigationItem(child, item))
+    return item.children?.flatMap(child => processNavigationItem(child, item))
   }
 
   return {
     ...item,
-    title: parent?.title || item.title,
-    class: item.framework ? `${item.framework}-only` : undefined,
+    title: parent?.title && parent.title !== 'Pro' ? parent.title : item.title,
+    badge: parent?.badge || item.badge,
+    class: [item.framework && `${item.framework}-only`, item.module && `${item.module}-only`].filter(Boolean),
     children: item.children?.length ? item.children?.flatMap(child => processNavigationItem(child)) : undefined
   }
 }
 
 export const useContentNavigation = (navigation: Ref<ContentNavigationItem[] | undefined>) => {
-  const { framework } = useSharedData()
+  const { framework, module } = useSharedData()
 
   const mappedNavigation = computed(() => navigation.value?.map(item => processNavigationItem(item)))
   const filteredNavigation = computed(() => mappedNavigation.value?.map((item) => {
     return {
       ...item,
-      children: item.children?.filter((child: any) => !child.framework || child.framework === framework.value)
+      children: item.children?.filter((child: any) => {
+        if (child.framework && child.framework !== framework.value) {
+          return false
+        }
+        if (child.module && child.module !== module.value) {
+          return false
+        }
+        return true
+      })
     }
   }))
 

docs/app/composables/useSharedData.ts

@@ -11,12 +11,29 @@ function _useSharedData() {
     label: 'Vue',
     icon: 'i-logos-vue',
     value: 'vue',
+    disabled: module.value === 'ui-pro',
     onSelect: () => framework.value = 'vue'
   }].map(f => ({ ...f, active: framework.value === f.value })))
 
+  const module = useCookie('nuxt-ui-module', { default: () => 'ui' })
+  const modules = computed(() => [{
+    label: 'nuxt/ui',
+    icon: 'i-lucide-box',
+    value: 'ui',
+    onSelect: () => module.value = 'ui'
+  }, {
+    label: 'nuxt/ui-pro',
+    icon: 'i-lucide-boxes',
+    value: 'ui-pro',
+    disabled: framework.value === 'vue',
+    onSelect: () => module.value = 'ui-pro'
+  }].map(m => ({ ...m, active: module.value === m.value })))
+
   return {
     framework,
-    frameworks
+    frameworks,
+    module,
+    modules
   }
 }