移行

PrimeVue v4への移行ガイド。

PrimeTekでは、2008年からUIコンポーネントライブラリを開発してきました。Webは技術的な進歩を続けており、その結果、関連性を維持するためにライブラリを最新化および更新する必要があります。PrimeVue v4は、最新のWeb APIを完全に採用し、レガシースタイルモードのような技術的負債を解消した次世代バージョンです。すべてのコンポーネントが見直され、強化されています。製品とコミュニティへの取り組みの一環として、PrimeVue v3は2024年末までメンテナンスを継続します。

最も注目すべき機能は、新しいスタイル付きモードの実装です。以前のイテレーションでは、primevue-sass-themeと呼ばれる外部リポジトリでSASSを使用しており、theme.cssファイルのコンパイルが必要でした。このファイルはアプリケーションに含める必要があり、ダークモードやプライマリカラーの変更などの基本的なタスクのためにランタイムで交換する必要がありました。v4では、スタイル付きモードがコアの一部となり、SASSはまったく使用されなくなり、CSS変数を利用した新しいデザイントークンベースのアーキテクチャが作成されました。新しいAPIは、レガシースタイルモードよりもモダンで優れています。

一部のコンポーネントの名前は、より一般的な代替名に変更されました。たとえば、OverlayPanelPopoverに、InputSwitchToggleSwitchになりました。各コンポーネントは、CSSクラス名とPTセクション間で一貫した命名になるように見直されました。例としては、クラス名にp-select-optionを使用するSelectコンポーネントのoption要素が挙げられます。

コンポーネントは他のコンポーネント内でより多く利用されるようになりました。たとえば、Dialogの閉じるボタンは実際にはPrimeVueボタンではないため、closeButtonPropsを使用して、アウトライン、レイズなどのボタンの機能を有効にすることができます。コンポーネントが別のコンポーネントを使用する場合、v3ではptセクションが混乱を招いていました。これを防ぐために、PTセクションが実際には単純なDOM要素ではなくPrimeVueコンポーネントであることを示すためにpcプレフィックスが追加されます。これは、PTがDOM要素に任意の属性を渡すことを許可する一方で、要素が実際にPrimeVueコンポーネントである場合は、propsも渡すことができるため、特に役立ちます。

下位互換性のある変更と破壊的な変更のリスト。

名前変更されたコンポーネント

古い名前は非推奨ですが、引き続き機能します。代わりに、新しいインポートパスに移行してください。例:primevue/calendarprimevue/datepickerになります。

  • Calendar -> DatePicker
  • Dropdown -> Select
  • InputSwitch -> ToggleSwitch
  • OverlayPanel -> Popover
  • Sidebar -> Drawer

非推奨のコンポーネント

他のコンポーネントで機能が提供されているため、非推奨になっているコンポーネント。

  • Chips | multipleを有効にし、typeaheadを無効にした状態でAutoCompleteを使用します。
  • TabMenu | パネルなしでTabsを使用します。
  • Steps | パネルなしでStepperを使用します。
  • InlineMessage | Messageコンポーネントを使用します。
  • BadgeDirective | 代わりにOverlayBadgeを使用します。
  • TabView | 新しいTabsコンポーネントを使用します。
  • Accordion | 新しいAccordionHeaderおよびAccordionContentコンポーネントと一緒に使用します。

重要なチケット

コンポーネントの内部変更に関する詳細情報を含むIssueチケット。

SASSテーマ

スタイル付きモードのテーマは、まったく新しいアーキテクチャに基づいてゼロから再実装されました。theme.cssprimevue/resourcesはもう存在しないため、これらのアセットのインポートをすべて削除する必要があります。v3のカスタムテーマがあった場合は、新しいAPIを使用してテーマを再作成する必要があります。詳細については、スタイル付きモードのカスタマイズセクションを参照してください。

削除されたコンポーネント

  • TriStateCheckbox | 不確定オプション付きでCheckboxを使用します。
  • DataViewLayoutOptions | 代わりにSelectButtonを使用します。

削除されたAPI

  • switchTheme関数。動的なテーマ切り替えには代わりにusePresetのような新しいAPIを使用します。

再配置されたAPI

  • primevue/apiからのインポートは、@primevue/core/apiに再配置されました。

削除されたファイル

  • primevue/resourcesパスの下のテーマ。新しいスタイル付きモードへの移行が必要です。
  • primevue/passthrough/tailwindのレガシーTailwindプリセット。Tailwind Presetsプロジェクトに移行してください。

MessageとInlineMessage

InlineMessageは、Messageとの重複のため非推奨になりました。Messageの間隔、closable、およびlifeプロパティには、InlineMessage機能を提供するための破壊的な変更があります。デフォルトのマージンが削除され、closableはデフォルトでfalseになり、メッセージは自動的に消えません。

PTセクション名

実験的なPassThrough機能は本番環境に対応できていません。特定のコンポーネントのCSSクラスとの整合性のために、PTセクション名が変更されています。コンポーネント要素が別のPrimeVueコンポーネントである場合は、示すためにpcプレフィックスが追加されます。新しいAPIについては、コンポーネントのPass Throughセクションを確認してください。スタイルなしモード用のTailwind CSSプリセットは、まだv4に更新されていません。

削除された機能

  • Sidebar/Drawerのsizeプロパティが削除されました。代わりにレスポンシブクラスユーティリティを使用してください。デモには新しい例があります。
  • Ratingのcancelプロップは、選択した星の値を切り替えることでクリアされるため削除されました。
  • Inplaceのclosableは、テンプレートとcloseCallbackプロップを優先して削除されました。

削除されたスタイルクラス

  • .p-link、リンクモードでボタンを使用します。
  • .p-highlight、各コンポーネントには.p-select-option-selectedのような独自のクラスがあります。
  • .p-fluid、サポートされているコンポーネントの新しい組み込みfluidプロパティまたはFluidコンポーネントを使用します。

Tailwind CSSプリセット

スタイルなしモード用のTailwind CSSプリセットは、まだv4をサポートしていません。更新は開発中で、2024年7月末に予定されています。

プレミアムテンプレート

Apolloのようなアプリケーションテンプレートはまだv4をサポートしていません。すべてのテンプレートは、新しいテーマAPIに基づく新しい機能強化とともに、2024年8月末までにv4に更新される予定です。

Nuxtモジュール

nuxt-primevueモジュールは、新しい@primevue/nuxt-moduleに置き換えられました。古いモジュールは、v3ユーザー向けに引き続きメンテナンスされます。