遷移

在 PrimeTek，我們自 2008 年以來一直在開發 UI 元件庫。網路持續經歷技術進步，因此，我們必須現代化和更新我們的庫，以保持其相關性。PrimeVue v4 是下一代版本，它完全採用現代 Web API 並刪除舊版樣式模式等技術債務。每個元件都經過審查和增強。作為我們對產品和社群承諾的一部分，PrimeVue v3 將繼續維護至 2024 年底。

最值得注意的功能是新的 樣式模式 實作。先前的迭代在一個名為 primevue-sass-theme 的外部儲存庫中使用 SASS，這需要編譯 theme.css 檔案。此檔案必須包含在應用程式中，並且需要在執行時交換，以進行諸如暗模式或主色變更等基本任務。在 v4 中，樣式模式現在是核心的一部分，完全不使用 SASS，並創建了一個基於新設計權杖的架構，該架構完全利用了 CSS 變數。新的 API 比舊版樣式模式更現代且更優越。

某些元件的名稱已更改為更常見的替代方案，例如，OverlayPanel 被替換為 Popover，而 InputSwitch 現在稱為 ToggleSwitch。每個元件都已針對 CSS 類別名稱和 PT 區段之間的一致命名進行了審查。一個範例是 Select 元件的 option 元素，該元素使用 p-select-option 作為類別名稱。

元件在其他元件中得到了更廣泛的使用，例如，對話框關閉按鈕實際上不是 PrimeVue 按鈕，因此可以使用 closeButtonProps 來啟用按鈕的功能，如外框、凸起等等。每當一個元件使用另一個元件時，在 v3 中，pt 區段會造成混淆，為了防止這種情況，新增了 pc 前綴來表示 PT 區段實際上是一個 PrimeVue 元件，而不是一個簡單的 DOM 元素。這特別有用，因為 PT 允許將任意屬性傳遞給 DOM 元素，而如果元素實際上是 PrimeVue 元件，則也可以傳遞 props。

重新命名元件

舊名稱已被棄用但仍可使用，請改為遷移到新的導入路徑，例如 primevue/calendar 變成 primevue/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 元件一起使用。

重要工單

包含有關元件內部變更的詳細資訊的工單。

• #5426
• #5437

SASS 主題

樣式模式主題已從頭開始根據全新的架構重新實作。theme.css 和 primevue/resources 不再存在，因此需要刪除對這些資產的所有導入。如果您有 v3 的自訂主題，則需要使用新的 API 重新建立主題。有關詳細資訊，請參閱 樣式模式 中的自訂部分。

已移除的元件

• TriStateCheckbox | 使用具有不確定選項的 Checkbox。
• DataViewLayoutOptions | 改用 SelectButton。

已移除的 API

• switchTheme 函式，改用新的 API，例如 usePreset 進行動態主題切換。

已重新定位的 API

• 從 primevue/api 導入的內容已重新定位到 @primevue/core/api。

已移除的檔案

• primevue/resources 路徑下的主題，必須遷移到新的樣式模式。
• 位於 primevue/passthrough/tailwind 的舊版 Tailwind 預設，遷移到 Tailwind Presets 專案。

Message 和 InlineMessage

由於與 Message 重疊，因此 InlineMessage 已被棄用。Message 的間距、可關閉和生命週期屬性發生了重大變更，以提供 InlineMessage 功能。已移除預設邊距，可關閉預設為 false，且訊息不會自動消失。

PT 區段名稱

實驗性的 PassThrough 功能尚未準備好投入生產，由於某些元件與 CSS 類別對齊，因此 PT 區段名稱發生了變更。如果元件元素是另一個 PrimeVue 元件，則新增 pc 前綴以進行指示。請檢閱元件的 Pass Through 區段以取得新的 API。unstyled 模式的 Tailwind CSS 預設尚未更新到 v4。

已移除的功能

• Sidebar/Drawer 的 size 屬性已移除，請使用響應式類別工具作為替代，演示中有新的範例。
• Rating 的 cancel 屬性已移除，因為切換選定的星星值會清除它。
• Inplace 的 closable 已移除，改用樣板和 closeCallback 屬性。

已移除的樣式類別

• .p-link，請在連結模式下使用按鈕。
• .p-highlight，每個元件都有自己的類別，例如 .p-select-option-selected。
• .p-fluid，請使用受支援元件的新內建 fluid 屬性或 Fluid 元件。

Nuxt 模組

nuxt-primevue 模組已被新的 @primevue/nuxt-module 取代。舊模組仍然為 v3 使用者維護。