feat(resolver): enable namespaced components

docs/content/overview/installation.md

@@ -33,6 +33,8 @@ Radix Vue also has resolver for the popular [unplugin-vue-components](https://gi
 
 In `vite.config.ts`, import `radix-vue/resolver`, and configure as such and it will auto-imports all the components from Radix Vue.
 
+You can also use it for [Namespaced components](../guides/namespaced-components.md).
+
 ```ts{2,10  }
 import Component from 'unplugin-vue-components/vite'
 import RadixVueResolver from 'radix-vue/resolver'
@@ -46,7 +48,8 @@ export default defineConfig({
         RadixVueResolver()
 
         // RadixVueResolver({
-        //   prefix: '' // use the prefix option to add Prefix to the imported components
+        //   prefix: '', // use the prefix option to add Prefix to the imported components
+        //   namespaced: false // set to true if you want to use namespaced components
         // })
       ],
     }),

packages/plugins/src/resolver/index.ts

@@ -1,5 +1,6 @@
 import { type ComponentResolver } from 'unplugin-vue-components'
 import { components } from '../../../radix-vue/constant/components'
+import * as NamespacedComponents from '../namespaced'
 
 export interface ResolverOptions {
   /**
@@ -8,20 +9,30 @@ export interface ResolverOptions {
    * @defaultValue ""
    */
   prefix?: string
+  /**
+   * Enable the use of namespaced components
+   *
+   * @defaultValue false
+   */
+  namespaced?: boolean
 }
 
 export default function (options: ResolverOptions = {}): ComponentResolver {
-  const { prefix = '' } = options
+  const { prefix = '', namespaced = false } = options
 
   return {
     type: 'component',
     resolve: (name: string) => {
       if (name.toLowerCase().startsWith(prefix.toLowerCase())) {
-        const componentName = name.substring(prefix.length)
-        if (Object.values(components).flat().includes(componentName)) {
+        const componentName = name.split('.')[0]
+        const importName = componentName.substring(prefix.length)
+        const isNamespacedComponent = Object.keys(NamespacedComponents).includes(importName)
+        const isComponent = Object.values(components).flat().includes(importName)
+        if (isNamespacedComponent || isComponent) {
           return {
-            name: componentName,
-            from: 'radix-vue',
+            name: importName,
+            as: componentName,
+            from: isNamespacedComponent && namespaced ? 'radix-vue/namespaced' : 'radix-vue',
           }
         }
       }