Skip to content

chore: radix-vueパッケージを最新のreka-uiに更新 - #2691

Merged
sevenc-nanashi merged 11 commits into
VOICEVOX:mainfrom
takusea:update-radix-vue-to-reka-ui
Jul 3, 2025
Merged

chore: radix-vueパッケージを最新のreka-uiに更新#2691
sevenc-nanashi merged 11 commits into
VOICEVOX:mainfrom
takusea:update-radix-vue-to-reka-ui

Conversation

@takusea

@takusea takusea commented Jun 26, 2025

Copy link
Copy Markdown
Member

内容

radix-vueがバージョンアップでreka-uiにパッケージ名が変わり、いくつか破壊的変更も発生しているので、今のうちに更新します。

それに伴い、以下の変更を行っています。

  • reka-uiをimportしている箇所のパッケージ名変更
  • BaseCheckboxとBaseSwitchのRootコンポーネントに渡すmodel名をcheckedからmodelValue(デフォルト)に変更
  • BaseSelectとBaseToggleGroupの受け取るmodelの型をreka-uiに追従しAcceptableValueに変更
  • SelectArrowでエラーが発生する問題が解消しているため、該当箇所のコメントアウトを解除

@takusea
takusea requested a review from a team as a code owner June 26, 2025 12:47
@takusea
takusea requested review from Hiroshiba and removed request for a team June 26, 2025 12:47
@voicevox-preview-pages

voicevox-preview-pages Bot commented Jun 26, 2025

Copy link
Copy Markdown

🚀 プレビュー用ページを作成しました 🚀

更新時点でのコミットハッシュ:a9a7dae

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR migrates from radix-vue to the renamed reka-ui package, updates component bindings to use the new modelValue defaults, aligns prop types with AcceptableValue, and re-enables a previously commented-out SelectArrow.

  • Replace all radix-vue imports with reka-ui
  • Change root components to default v-model/modelValue and update prop types to AcceptableValue
  • Restore the SelectArrow component in BaseSelect.vue

Reviewed Changes

Copilot reviewed 15 out of 16 changed files in this pull request and generated no comments.

Show a summary per file
File Description
src/components/Dialog/SettingDialog/ButtonToggleCell.vue Updated generic constraint and model type to AcceptableValue
src/components/Base/BaseTooltip.vue Swapped radix-vue import for reka-ui
src/components/Base/BaseTooltip.stories.ts Swapped radix-vue import for reka-ui
src/components/Base/BaseToggleGroupItem.vue Updated value prop type and imported AcceptableValue
src/components/Base/BaseToggleGroup.vue Migrated to v-model:modelValue with defineModel and new import
src/components/Base/BaseSwitch.vue Switched to default v-model, updated import to reka-ui
src/components/Base/BaseSlider.vue Swapped radix-vue import for reka-ui
src/components/Base/BaseSelectItem.vue Updated value prop type and imported AcceptableValue
src/components/Base/BaseSelect.vue Restored SelectArrow, updated import and model type to AcceptableValue
src/components/Base/BaseScrollArea.vue Swapped radix-vue import for reka-ui
src/components/Base/BaseIconButton.stories.ts Swapped radix-vue import for reka-ui
src/components/Base/BaseDialog.vue Swapped radix-vue import for reka-ui
src/components/Base/BaseCheckbox.vue Switched to default v-model, updated import to reka-ui
src/components/App.vue Swapped radix-vue import for reka-ui
package.json Bumped dependency from radix-vue to reka-ui
Files not reviewed (1)
  • pnpm-lock.yaml: Language not supported
Comments suppressed due to low confidence (5)

src/components/Base/BaseToggleGroup.vue:3

  • [nitpick] Using modelValue as both the prop/event name and local variable may be confusing. Consider renaming the local variable to something like value or selected to improve clarity.
    v-model:modelValue="modelValue"

src/components/Base/BaseSwitch.vue:4

  • The component uses v-model without a corresponding defineModel declaration for checked. Please add const checked = defineModel<boolean>(); in the script setup to properly support v-model bindings.
    <SwitchRoot :id v-model="checked" :disabled class="SwitchRoot">

src/components/Base/BaseSwitch.vue:4

  • The :id binding lacks an expression. It should be :id="id" to bind the id prop.
    <SwitchRoot :id v-model="checked" :disabled class="SwitchRoot">

src/components/Base/BaseCheckbox.vue:3

  • The checkbox uses v-model but there is no defineModel for checked. Add const checked = defineModel<boolean>(); in the script setup to enable two-way binding.
    <CheckboxRoot v-model="checked" class="CheckboxRoot">

src/components/Dialog/SettingDialog/ButtonToggleCell.vue:23

  • [nitpick] The generic="T extends AcceptableValue" is not used within the component. Consider removing the unused generic parameter to simplify the component signature.
<script setup lang="ts" generic="T extends AcceptableValue">

}>();

const model = defineModel<string | string[]>({ required: true });
const model = defineModel<AcceptableValue | AcceptableValue[]>({

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
const model = defineModel<AcceptableValue | AcceptableValue[]>({
const model = defineModel<T | T[]>({

こうかも?

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

AcceptableValueという型がreka-uiがexportされてるっぽい?

Comment thread src/components/Base/BaseToggleGroup.vue Outdated
</ToggleGroupRoot>
</template>

<script setup lang="ts">

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ここもgenericsの方が良さそう(具体的には"hoge" | "fuga"みたいな型をいい感じに使えるはず)

Comment thread src/components/Base/BaseSelect.vue Outdated
defineProps<{
placeholder?: string;
defaultValue?: string;
defaultValue?: AcceptableValue;

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

同じくここも。

Comment thread src/components/Base/BaseToggleGroup.vue Outdated
@Hiroshiba
Hiroshiba requested a review from sevenc-nanashi July 2, 2025 16:41

@sevenc-nanashi sevenc-nanashi left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

特に問題なさそう。手元でconflict直してマージします!

@sevenc-nanashi
sevenc-nanashi enabled auto-merge July 3, 2025 12:13
@sevenc-nanashi
sevenc-nanashi added this pull request to the merge queue Jul 3, 2025
@github-merge-queue
github-merge-queue Bot removed this pull request from the merge queue due to failed status checks Jul 3, 2025
@sevenc-nanashi
sevenc-nanashi added this pull request to the merge queue Jul 3, 2025
Merged via the queue into VOICEVOX:main with commit 7a75f93 Jul 3, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants