app.use(PrimeVue) を呼び出さないため、拡張機能は依存していた可能性のある3つの要素を失います:
- ホスト Vue アプリの
$primevueグローバルプロパティ。 - PrimeVue テーマスタイルシート。これにより、拡張機能がホストアプリ内でレンダリングする PrimeVue コンポーネントはスタイルが適用されずにレンダリングされます。
--p-primary-color、--p-surface-*、--p-text-color、--p-content-background、--p-form-field-border-colorなどのすべてのグローバル--p-*CSS 変数。
PrimeVueコンポーネントをレンダリングする拡張機能
ホストアプリのPrimeVueインスタンスに依存しないでください。PrimeVueコンポーネントを独自のマークアップに置き換えるか、UI用に独自のVueアプリを作成し、そのアプリにPrimeVueとそのテーマをインストールしてください。--p-* 変数を読み取る拡張機能
これらをデザインシステムのテーマ変数に置き換えてください。テーマ変数は、アクティブなライトまたはダークテーマと、アクティブなカラーパレットに従います。
ツールチップ
グローバルなv-tooltip ディレクティブは削除され、ツールチップは PrimeVue の DOM をレンダリングしなくなりました:
.p-tooltipと.p-tooltip-textdata-pd-tooltip属性$_ptooltip*要素のプロパティ
data-slot="tooltip-content" を持つ1つの要素をレンダリングし、document.body の末尾にポータルされるようになりました。この要素はツールチップが開いている間だけ存在します。独自の UI の表示中にツールチップを非表示にする拡張機能は、.p-tooltip ではなく [data-slot="tooltip-content"] を対象にしてください。
--node-component-tooltip* CSS 変数もデザインシステムのスタイルシートから削除されました。代わりにテーマ変数を使用してください: --background、--foreground、--border。古い名前 --base-background、--base-foreground、--border-default は非推奨です。詳細は非推奨の変数名を参照してください。
非推奨の変数名
これらのノートの以前のバージョンでは、古いデザインシステムの名前を指していました。それらはまだ有効ですが、非推奨であり、将来のリリースで削除される予定です。今すぐテーマ変数に移行してください:
PrimeIcons はまだ読み込まれているため、既存の
pi pi-* アイコンクラスは引き続き機能しますが、段階的に廃止されます。新たな使用を追加しないでください。