reka-ui-skilld

Reka UI [email protected]

Vue 3 向けのスタイルを持たない、アクセシブルなコンポーネントプリミティブです。vue >= 3.4.0 が必要です（用意されたソース package.json:87-89）。ドキュメント：https://reka-ui.com

参考資料

• API の概要：エントリーポイント、各コンポーネントのパーツ、ユーティリティ。
• コンポジション：asChild、プロパティの転送、コンテキストの注入、制御された状態。
• スタイリングとアニメーション：data-state、--reka- CSS 変数、<Transition> による force-mount。
• 新規・変更コンポーネント：Drawer、Autocomplete、Color プリミティブ、Month/Year ピッカー、バージョン固有のプロパティの変更。
• インテグレーション：名前空間付きエントリー、Nuxt モジュール、コンポーネントリゾルバー、@internationalized/date による日付、仮想化。

セットアップ

pnpm add reka-ui   # or npm / yarn / bun

<script setup lang="ts">
import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle } from 'reka-ui'
</script>

<template>
  <DialogRoot>
    <DialogTrigger>Edit profile</DialogTrigger>
    <DialogPortal>
      <DialogOverlay />
      <DialogContent>
        <DialogTitle>Edit profile</DialogTitle>
      </DialogContent>
    </DialogPortal>
  </DialogRoot>
</template>

API の変更（2.10.x および 2.9.x）

最近のリリースを優先して記載しています。ベースラインのスキルは 2.9.7 までを対象としていました。

• 新規 Drawer プリミティブ（2.10.0）：スワイプで閉じる、スナップポイント、ネストされたドロワーに対応します。パーツ：DrawerRoot/Trigger/Portal/Overlay/Content/Close/Title/Description/Handle/SwipeArea/Viewport/Indent/IndentBackground（準備済みソース src/Drawer/）。リリース：https://github.com/unovue/reka-ui/releases/tag/v2.10.0
• 新規 ConfigProvider の teleportTo プロパティ：テレポート先のグローバルなデフォルト値（準備済みソース src/ConfigProvider/ConfigProvider.vue:45）
• 新規 DialogRoot の unmountOnHide プロパティ。デフォルトは true です。非表示時もコンテンツをマウントしたままにするには false を設定します（準備済みソース src/Dialog/DialogRoot.vue:20）
• 新規 SelectRoot の nullableValue プロパティ：空の選択状態を表す隠し入力の値を指定します（準備済みソース src/Select/SelectRoot.vue:18）
• 新規 HoverCardRoot の enableTouch プロパティ。デフォルトは false です（準備済みソース src/HoverCard/HoverCardRoot.vue:15）
• 新規 DateFieldRoot の stepSnapping プロパティ。デフォルトは false です（準備済みソース src/DateField/DateFieldRoot.vue:57）
• 新規 TreeItem の disabled プロパティ（2.10.0）：https://github.com/unovue/reka-ui/releases/tag/v2.10.0
• 新規 TabsIndicator が --reka-tabs-indicator-size、--reka-tabs-indicator-thickness、--reka-tabs-indicator-position の CSS 変数を公開します（準備済みソース src/Tabs/TabsIndicator.vue:73-75）
• useEmitAsProps と useForwardPropsEmits の型推論が改善されました（2.10.0）
• 新規 Autocomplete コンポーネント（2.9.0）。専用の Autocomplete* パーツファミリーを備えた、Combobox スタイルの入力です。ドキュメント：https://reka-ui.com/docs/components/autocomplete
• 新規 Color プリミティブ（2.9.0）：ColorArea*、ColorField*、ColorSlider*、ColorSwatch、ColorSwatchPicker*。色の解析／変換ユーティリティもルートからエクスポートされます
• 新規 TimeRangeField（2.9.0）：TimeRangeFieldRoot、TimeRangeFieldInput
• 新規 Month および Year ピッカー（2.9.0）：MonthPicker*、YearPicker*、MonthRangePicker*、YearRangePicker* の各ファミリー
• 新規 CheckboxRoot／SwitchRoot のカスタム boolean 値：trueValue および falseValue プロパティで、固定の true／false を置き換えます（準備済みソース src/Checkbox/CheckboxRoot.vue:27-31）
• 新規 DropdownMenuFilter パーツ。検索可能なドロップダウンメニューに対応します（2.9.0）
• 新規 Splitter のピクセル単位のサイズ指定と制約（2.9.0）
• 新規 TooltipProvider によるグローバルなツールチップコンテンツの設定（2.9.0）
• reka-ui/internal からメニューの内部機能をエクスポートします。不安定な機能であり、セマンティックバージョニングに従わず変更される可能性があります（準備済みソース src/internal.ts:1-7）

古いコードを扱う際に、引き続き関係する以前の破壊的変更：

• radix-vue は reka-ui に名称変更されました。CSS 変数のプレフィックスは --reka- に、データ属性は data-reka- になりました。移行ガイド：https://reka-ui.com/docs/guides/migration
• Combobox のリファクタリング：filterFunction プロパティは削除され、searchTerm と displayValue は Root から ComboboxInput に移動しました（上記の移行ガイドを参照）
• Checkbox、Toggle、MenuCheckboxItem は、v-model:checked／v-model:pressed ではなく標準の v-model を使用します（上記の移行ガイドを参照）
• PaginationRoot の itemsPerPage は必須です（上記の移行ガイドを参照）
• Calendar／DatePicker の weekStartsOn は、2.8.0 以降ロケールに依存しません：https://github.com/unovue/reka-ui/releases/tag/v2.8.0

リリース一覧：https://github.com/unovue/reka-ui/releases

ベストプラクティス

• asChild で合成します。Reka のプリミティブを独自の要素またはコンポーネントとしてレンダリングしながら、動作とアクセシビリティを維持できます（https://reka-ui.com/docs/guides/composition）

<TooltipTrigger asChild>
  <MyButton>Hover me</MyButton>
</TooltipTrigger>

• useForwardPropsEmits でラッパーを作成すると、すべての props と emits がプリミティブに渡されます（https://reka-ui.com/docs/utilities/use-forward-props-emits）

const props = defineProps<AccordionRootProps>()
const emits = defineEmits<AccordionRootEmits>()
const forwarded = useForwardPropsEmits(props, emits)
// <AccordionRoot v-bind="forwarded">

• アプリを ConfigProvider でラップし、dir（RTL）、locale、scrollBody、teleportTo のデフォルト値を設定します（https://reka-ui.com/docs/utilities/config-provider）

<ConfigProvider dir="rtl" :scroll-body="false">
  <App />
</ConfigProvider>

• フラグメント（複数ルート）コンポーネントでは useForwardExpose を使用し、テンプレート参照が対象の DOM 要素を返すようにします（https://reka-ui.com/docs/utilities/use-forward-expose）

const { forwardRef } = useForwardExpose()
// <div :ref="forwardRef">...</div>

• クラスの切り替えではなく data-state 属性で状態をスタイル設定します。スコープ付きスタイルでテレポートされたコンテンツを扱う場合は :deep() を使用します（https://reka-ui.com/docs/guides/styling）

.AccordionItem[data-state="open"] { border-bottom-width: 2px; }

• コンテンツ部分に force-mount を追加してアンマウントを自分で制御し、<Transition> でアニメーションを付けます（https://reka-ui.com/docs/guides/animation）

<Transition name="fade">
  <DialogContent force-mount>...</DialogContent>
</Transition>

• 長いリストは ComboboxVirtualizer、ListboxVirtualizer、AutocompleteVirtualizer、または TreeVirtualizer で仮想化します。スクロールコンテナーには固定の高さを指定します（https://reka-ui.com/docs/guides/virtualization）

<ComboboxViewport class="max-h-80 overflow-y-auto">
  <ComboboxVirtualizer :options="items" :estimate-size="25" v-slot="{ option }">
    <ComboboxItem :value="option">{{ option.label }}</ComboboxItem>
  </ComboboxVirtualizer>
</ComboboxViewport>

• injectAccordionRootContext などの injectXContext 関数を使うと、カスタム子要素からプリミティブの内部状態にアクセスできます（https://reka-ui.com/docs/guides/inject-context）

• Reka UI の useId は、渡された決定論的な ID、ConfigProvider の useId ソース、Vue のネイティブ useId（Vue 3.5 以降）、カウンターによるフォールバックの順に解決します（準備済みのソース src/shared/useId.ts:26-34）。Vue 3.5 未満の Nuxt では、水和時の ID の不一致を避けるため、Nuxt の useId を ConfigProvider 経由で渡してください（https://reka-ui.com/docs/guides/server-side-rendering）

• 日付・時刻コンポーネントには、生の文字列ではなく、@internationalized/date（直接依存関係）の DateValue オブジェクトと TimeValue オブジェクトを渡します（https://reka-ui.com/docs/guides/dates）

よくある注意点

• すべてのパーツは Root の下に配置する必要があります。ほとんどのコンポーネントでは、正しい重なり順にするため、*Content を *Portal または Teleport の中に配置する必要もあります。
• Presence の forceMount は、開閉状態にかかわらずコンテンツをレンダリングします。たとえば :hidden を使って、表示状態は自分で制御してください（https://reka-ui.com/docs/utilities/presence）。
• 非表示のフォームフィールドでは、パーツの name および value props を使用します。SelectRoot は空の状態に対して nullableValue も受け付けます。
• ツリーシェイキングには reka-ui からインポートし、Dialog.Root のようにパーツをグループ化して使う場合は reka-ui/namespaced からインポートします。統合を参照してください。