feat: migrate from Radix Vue to Reka UI (#6870)

* Initial plan

* Update dependencies and imports from radix-vue to reka-ui

Co-authored-by: likui628 <[email protected]>

* Fix type errors after reka-ui migration

Co-authored-by: likui628 <[email protected]>

* Run formatter to fix code style

Co-authored-by: likui628 <[email protected]>

---------

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: likui628 <[email protected]>

Author: Copilot

docs/.vitepress/components/preview-group.vue

@@ -12,7 +12,7 @@ import {
   TabsList,
   TabsRoot,
   TabsTrigger,
-} from 'radix-vue';
+} from 'reka-ui';
 
 defineOptions({
   inheritAttrs: false,
@@ -56,7 +56,7 @@ const toggleOpen = () => {
         <TabsList class="relative flex">
           <template v-if="open">
             <TabsIndicator
-              class="absolute bottom-0 left-0 h-[2px] w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] rounded-full transition-[width,transform] duration-300"
+              class="absolute bottom-0 left-0 h-[2px] w-[--reka-tabs-indicator-size] translate-x-[--reka-tabs-indicator-position] rounded-full transition-[width,transform] duration-300"
             >
               <div class="size-full bg-[var(--vp-c-indigo-1)]"></div>
             </TabsIndicator>

docs/package.json

@@ -22,7 +22,7 @@
     "ant-design-vue": "catalog:",
     "lucide-vue-next": "catalog:",
     "medium-zoom": "catalog:",
-    "radix-vue": "catalog:",
+    "reka-ui": "catalog:",
     "vitepress-plugin-group-icons": "catalog:"
   },
   "devDependencies": {

docs/src/demos/vben-vxe-table/custom-cell/index.vue

@@ -92,7 +92,7 @@ const [Grid] = useVbenVxeGrid({ gridOptions });
         <Image :src="row.imageUrl" height="30" width="30" />
       </template>
       <template #open="{ row }">
-        <Switch v-model:checked="row.open" />
+        <Switch v-model="row.open" />
       </template>
       <template #status="{ row }">
         <Tag :color="row.color">{{ row.status }}</Tag>

packages/@core/composables/package.json

@@ -37,7 +37,7 @@
   "dependencies": {
     "@vben-core/shared": "workspace:*",
     "@vueuse/core": "catalog:",
-    "radix-vue": "catalog:",
+    "reka-ui": "catalog:",
     "sortablejs": "catalog:",
     "vue": "catalog:"
   },

packages/@core/composables/src/index.ts

@@ -10,4 +10,4 @@ export {
   useForwardExpose,
   useForwardProps,
   useForwardPropsEmits,
-} from 'radix-vue';
+} from 'reka-ui';

packages/@core/ui-kit/menu-ui/src/components/sub-menu.vue

@@ -209,7 +209,7 @@ onBeforeUnmount(() => {
           is(rootMenu.theme, true),
           opened ? '' : 'hidden',
           'overflow-auto',
-          'max-h-[calc(var(--radix-hover-card-content-available-height)-20px)]',
+          'max-h-[calc(var(--reka-hover-card-content-available-height)-20px)]',
         ]"
         :content-props="contentProps"
         :open="true"

packages/@core/ui-kit/shadcn-ui/package.json

@@ -47,7 +47,7 @@
     "@vueuse/core": "catalog:",
     "class-variance-authority": "catalog:",
     "lucide-vue-next": "catalog:",
-    "radix-vue": "catalog:",
+    "reka-ui": "catalog:",
     "vee-validate": "catalog:",
     "vue": "catalog:"
   }

packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue

@@ -3,7 +3,7 @@ import type {
   AvatarFallbackProps,
   AvatarImageProps,
   AvatarRootProps,
-} from 'radix-vue';
+} from 'reka-ui';
 
 import type { CSSProperties } from 'vue';
 

packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb-view.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { BreadcrumbProps } from './types';
 
-import { useForwardPropsEmits } from 'radix-vue';
+import { useForwardPropsEmits } from 'reka-ui';
 
 import BreadcrumbBackground from './breadcrumb-background.vue';
 import Breadcrumb from './breadcrumb.vue';

packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts

@@ -1,4 +1,4 @@
-import type { AsTag } from 'radix-vue';
+import type { AsTag } from 'reka-ui';
 
 import type { Component } from 'vue';