迁移 - Radix Vue 到 Reka UI ​

安装 ​

首先，你需要安装最新版的 reka-ui。

$ npm add reka-ui

恭喜！🎉 既然你已经安装了上述包，让我们开始迁移吧！前2个步骤相对简单。只需对以下更改进行全局搜索和替换。

导入语句更改 ​

导入的主要变化是将 radix-vue 替换为 reka-ui。

<script setup lang="ts">
import { TooltipPortal, TooltipRoot, TooltipTrigger } from 'radix-vue'
import { TooltipPortal, TooltipRoot, TooltipTrigger } from 'reka-ui'
</script>

命名约定更改 ​

CSS 变量和数据属性名称已更新，使用 reka 前缀代替 radix。

  --radix-accordion-content-width: 300px; 
  --reka-accordion-content-width: 300px; 

  [data-radix-collection-item] {} 
  [data-reka-collection-item] {} 

组件重大更改 ​

Combobox ​

• 移除 filter-function prop - Combobox 已重构并改进以支持更好的自定义过滤。阅读更多。

  vue

  <template>
    <ComboboxRoot :filter-function="customFilter" />  
  </template>

• 将 Root 的 searchTerm prop 替换为 Input 的 v-model

• 将 displayValue prop 从 Root 移至 Input

  vue

  <template>
    <ComboboxRoot v-model:search-term="search" :display-value="(v) => v.name" /> 
    <ComboboxRoot>
      <ComboboxInput v-model="search" :display-value="(v) => v.name" /> 
    </ComboboxRoot>
  </template>

Arrow ​

• 改进箭头多边形 - 更改 SVG 多边形以实现更好的样式。

表单组件 ​

• 将受控状态重命名为 v-model - 用更常见的 API 替换表单组件的 v-model:checked 和 v-model:pressed。

<template>
  <CheckboxRoot v-model:checked="value" /> 
  <CheckboxRoot v-model="value" /> 
</template>

• 重新定位 VisuallyHidden - 此前，VisuallyHidden 定位在根节点，导致作用域样式无法应用。

Menu CheckboxItem ​

• 与表单组件的更改类似，绑定 CheckboxItem 的 API 已从 v-model:checked 更改为 v-model。

<template>
  <DropdownMenuCheckboxItem v-model:checked="value" /> 
  <DropdownMenuCheckboxItem v-model="value" /> 

  <DropdownMenuCheckboxItem checked /> 
  <DropdownMenuCheckboxItem :model-value="true" /> 
</template>

分页 ​

• itemsPerPage prop 为必填项 - 不再使用默认的 itemsPerPage 值，现在它成为必填项，以提供更明确的页面大小提示。

  vue

  <template>
    <PaginationRoot :items-per-page="10" />  
  </template>

日历 ​

• 移除已弃用的 step prop - 使用 prevPage/nextPage prop 以获得更大的控制。

  vue

  <script setup lang="ts">
  function pagingFunc(date: DateValue, sign: -1 | 1) { 
    if (sign === -1) 
      return date.subtract({ years: 1 }) 
    return date.add({ years: 1 }) 
  } 
  </script>
  
  <template>
    <CalendarPrev step="year" /> 
    <CalendarPrev :prev-page="(date: DateValue) => pagingFunc(date, -1)" /> 
  
    <CalendarNext step="year" /> 
    <CalendarNext :next-page="(date: DateValue) => pagingFunc(date, 1)" /> 
  </template>

Select ​

• SelectValue 不再渲染 teleported 元素 - 之前 SelectValue 的实现会通过 teleporting fragment 渲染选定的 SelectItem。这会导致 SSR 闪烁，并且是没必要的计算。

  vue

  <template>
    <SelectValue>
      <!-- render the content similar to `SelectItem` -->
    </SelectValue>
  </template>

Presence ​

为了更好地支持 SSR 内容，我们还修改了使用 Presence 的组件中 forceMount 的逻辑。

• 折叠面板
• 可折叠
• 选项卡
• NavigationMenu

forceMount 现在将渲染组件 即使状态处于非活动状态。现在你需要手动处理组件的可见性逻辑。

<template>
  <TabsRoot
    v-slot="{ modelValue }"
    default-value="tab1"
  >
    <TabsContent
      value="tab1"
      force-mount
      :hidden="modelValue !== 'tab1'"
    >
      …
    </TabsContent>
    <TabsContent
      value="tab2"
      force-mount
      :hidden="modelValue !== 'tab2'"
    >
      …
    </TabsContent>
  </TabsRoot>
</template>

针对 Nuxt 模块用户 ​

如果你正在使用 Nuxt，你需要更新你的模块导入。

// nuxt.config.ts
export default defineNuxtConfig({
 modules: [
   'radix-vue/nuxt' <!-- [!code --] -->
   'reka-ui/nuxt' <!-- [!code ++] -->
 ],
})