版本发布 8
**修正** - 修正 JavaScript 執行效能問題可能在 Vue.js 變更 DOM 時發生，從 Spread Operator 改用 push (#1083)
**修正** - [AppCenter] 修正沒在 Firefox 上置中 (#1051) - [Chip] 修正 `.is-dense` 沒有效果 (#1045) - [Iconset] 修正如果 `.text` 裡子元素有 `.icon` 會被影響 (#1054) - [Select] 修正套用在 `<button>` 上有文字不對齊 (#1057) - [Select] 修正 `[disabled]` 時卻還是有游標效果 (#1058) - [Text] 修正在 `<button>` 套用 `.is-icon-link` 的圖示沒有對齊 (#1061) - [Modal] 修正 iOS 16 不支援 `:popover-open` 而導致 `<dialog>` 無法開啟 (#1064) - [Icon] 修正 `min-width` 不起作用 (#1068) - [Table] 修正 `tbody` 與 `tbody` 緊鄰使用時沒顯示框線 (#1067) **修改** - 預設字型會先選擇 Noto CJK 體系，若有引用的話 (#1052) - [Progress] `.is-active` 的效果會更顯眼 (#1044) - [Iconset] 沒有 `.text` 的時候，現在會垂直置中 `.title` 標題 (#1055) **新增** - [Dropdown] 新增 `.is-negative` 負面語氣項目 (#1047) - [Table] 新增 `.is-selectable` 樣式，滑鼠移到指定行列就會有效果 (#1053) - [Meta] 新增 `.is-link` 樣式，讓文字有連結顏色 (#1059) - [Range] 新增給 `<input type="range">` 用的元件 (#941) - [Menu] 新增 `.is-negative` 負面語氣項目 (#1069)
**修正** - [Icons] `cdnjs` 沒有快取到 FontAwesome 而導致圖示無法顯示的問題 💀 (0bb185e666d74a3925df78386e31abcfaed4cec1)
儘管 Tocas 5.0 與 4.2.5 大部分相同，但有些元件被移除或是改變用法。 文件網址 [https://tocas-ui.com/5.0/zh-tw/index.html](https://tocas-ui.com/5.0/zh-tw/index.html) **⚠️ 破壞性異動 ⚠️** - [Segment] 元件被移除，請使用 `.ts-box` 與 `.ts-content` (#997) - [Avatar] 元件被移除，請使用 `.ts-image` 自訂尺寸 (#1029) - [Placeholder] 元件被移除，建議使用 `.ts-loader` 載入指示器 (#1040) - [Button, Input, Chip, Selection] `.is-disabled` 樣式改為 `[disabled]` 標籤，除非是連結 (#960, #980) - [Image] 移除所有尺寸樣式，現在必須自己指定 `width` 與 `height` (#959, #989) - [Modal, AppDrawer] 必須使用 `<dialog>` 原生標籤 (#946) - [Dropdown, Tab] 模組不再使用 `[data-name]`，而是基於元素的 `id` (#971) - [Tab] `.is-indicated` 改名為 `.is-short-indicated` 與 `.is-very-short-indicated` (#972) - [Dropdown] 項目標題從 `.item.is-header` 簡化為 `.header` (#1007) - [Dropdown] 移除 `.is-large` 與 `.is-small` 尺寸樣式，現在統一規格 (#981) - [Box] `.is-squared` 改名為 `.is-sharp` (5348046a130b5e314b1a5645068626ab73c1bcb6) - [Box] `.is-elevated` 改名為 `.is-raised` (#1041) - [Box] `.is-left/right-indicated` 樣式改為 `.is-start/end-indicated` (#996) - [AppDrawer] 方向樣式從 `.is-left/right` 改為 `.is-start/end` - [Utilities] 色系輔助樣式 `.has-light/dark-hidden` 改為 `.has-hidden-light/dark` (#1015) - 所有的東西不再是預設 `position: relative` (#978. #977) **修正** - [Modal] 修正 Tooltip 的相關 `z-index` 層級覆蓋問題 (#953) - [App Topbar] 修正文字在 Firefox 上因為 `line-height` 而被裁切的問題 (#948) - [Wrap] 修正使用 `.is-vertical` 時，導致內部元素被拉伸的問題 (#944) - [Control] 修正在內部擺放 `ts-select` 或 `ts-input` 造成的樣式問題 (#920, #956) - [Button] 移除套用 `.is-disabled` 卻不會被觸發的 `cursor: not-allowed` 樣式 (#950) - [Pagination] 修正頁數與文字上下不對齊 (#1005) - [Content] 互動的 `.is-interactive` 樣式現在是 `100%` 全寬 (#1010) - [Select] 修正文字在 `.is-basic` 會被裁切的問題 (#1038) - 修正暗黑色系前景、背景相反的問題 (#909) **修改** - [Tooltip] 改用系統原生的 Popover API 作為基底 (bc093bbfb490e1fe37b36eacde676d036cf63a56) - [Button] 圖示按鈕 `.is-icon` 的比例現在一定會是 1:1 正方形 (#968) - [Flag] 國旗現在可以自由地變更寬度 (#964) - [Select] 不再需要手動指定 `.is-multiple` 多選樣式，現在透過 `:has([multiple])` 自動偵測 (#973) - [Dropdown] 增加內距，令其看起來更輕鬆 (#982, 757d33b4958915b39bbac07f64c966346a61e1e1) - [Dropdown] 展開時的預設 `[data-position]` 位置現在改為 `bottom-start` (#984) - [Dropdown] 現在有預設的最小寬度 `10rem` (#984) - [Dropdown] 重新設計 `.header` 的標題項目樣式 (#985) - [Dropdown] 自動依據畫面剩餘的空間調整高度(#986) - [Text] 將 `.is-editable` 文字樣式顏色改得更深 (1d9310053f7e5878b77713ba6da1da1de5178626) - [Box] `.is-indicated` 邊框變得更厚了 (#1002) - [Image] `.is-1-by-1` 這種長寬比樣式的圖片現在會自動套用 `.is-covered` 樣式 (#1011) - `<form>` 元素現在是 `display: contents` 這樣就不會影響某些樣式 (#1036) - `<body>` 改為 `display: table-cell` 以符合某些內容溢出捲動的情境 (ff22c1c7439a6c89d4a0043a682f7a9ed88abfe2) - FontAwesome 更新至 6.5.2 (46203e4a5a970dc1d641b3d981e337d83c986e63) **新增** - [Pagination] 新增 `.is-outlined` 外框線樣式 (#939, #969) - [Pagination] 新增 `.is-relaxed` 寬鬆樣式 (#940) - [Button] 新增 `.is-negative` + `.is-secondary` 負面次要樣式 (#957) - [AppDrawer] 新增 `--width` 變更抽屜寬度 (26816dbf00c876e01a636225de1bfd9b0debb672) - [Modal] 新增 `--width` 變更視窗寬度 (9397cecdc49f30af3b30fdbe4210edc26a851f4b) - [Grid, Wrap] 新增 `--gap` 變更欄位間隔 (#962) - [Tooltip] 新增 `[data-html="true"]` 可以讓工具提示使用 HTML 內容 (#976) - [Tooltip] 新增 `[data-trigger="focus"]` 可以在元素取得焦點時觸發工具提示 (#961) - [Dropdown] 新增 `.is-indented` 縮排項目 (#987) - [Popover] 全新的 Popover 元件 (#970) - [Text] 新增 `.is-icon-link` 樣式可以在文字旁邊擺放圖示且有基本間距 (#988) - [Snackbar] 新增 `.close` 關閉按鈕 (#990) - [Modal, AppDrawer] 新增 `.is-fullscreen` 的全螢幕樣式，可以用於手機上 (#995, #1000) - [Drawer] 新增 `.is-modal` 樣式能看起來像快顯視窗 (#996) - [Container] 容器現在可以使用 `--width` 來自定寬度 (60d804fb68b6c5f31160005e4df120f25ebc29eb) - [Container] 透過 `--gap` 微調距離螢幕邊緣的空白 (#1016) - [Dropdown] 現在有了 `.divider` 分隔線項目，不再需要 `.ts-divider` 了 (#1006) - [Mask] 新增 `.is-centered` 可以置中內容而不再需要 `.ts-center` (#1012) - [Icon] 新增 `.is-flipped` 等翻轉、旋轉樣式 (#1013) - [Button, File, Selection] 新增 `.is-relaxed` 寬鬆樣式 (#1018, #1020, #1022) - [Tab] 新增 `.is-highlighted` 可以只醒目顯示正在啟用的項目並淡化其他項目 (#1028) - [Input] 讓 Textarea 支援 `.is-basic` 基本樣式 (#1030) - [List] 透過 `--gap` 調整項目之間的間距 (#1027) - [Table] `thead`, `tbody` 和 `tfoot` 可以使用 `th` 來粗體化文字 (#1033) - [AppCenter] 原先的 `.ts-center` 改為 `.ts-app-center` 加回來了 (f18876de14d93101bf8082207b199ee5b68840b0, #945) - [Fieldset] 新增了 `[disabled]` 樣式 - 新增 `.is-rounded` 與 `.is-sharp` 來變更全域圓角設定 (#933, #994)
**⚠️ 破壞性異動 ⚠️** 這些破壞性異動仍可以繼續在 4.2.5 版本中正常使用，下一個 4.3.0 版本將會全數移除，請盡快改為新用法。這些樣式被移至 `/src/deprecated_431.css`。 - [Center] Center 元件被廢除，請改用輔助樣式的 `has-flex-center` 與 `has-full-size` (#921, 7ef743fbaa50e6668e3b7ee083bfbb34c83958e7)。 - [Utilities] 所有的輔助樣式從 `u-` 前輟改為 `has-` (#935, 7d1e502cda3e8fe332789f50c385369798c3351b)。 **修正** - [Grid] 使用 `is-stacked` 的時候會導致子 Grid 也被 Stack (#926, ed3658a7ed79686ff9d1f30efcc745d4b55873bd)。 - [Grid] 使用 `is-stacked` 和 `is-reversed` 不起作用 (#927, 5de2be98f6e7fb1721c2557f3c64fc0244efd8c5)。 - [Rating] Firefox 尚未支援 `:has` 選擇器而導致 `is-active` 顏色不起作用 (#924, 6bdbfb127b7227b027e5eaf88f1ef962d6bbe11b)。 - [Divider] `is-vertical` 的分隔線會因為指定 `height: 100%` 而不在 Flexbox 生效 (#923, 95f6fde707d1aa2ff22de0b8ea4a49e4dcc1115f)。 - [Control] `is-stacked` 的時候 Firefox 會因為 `overflow: hidden` 而裁切較矮 `line-height` 的文字 (#925, 4fa65eff748a66caed767d6f4b19ece0c209291a)。 - `is-light` 的時候，連結顏色仍然會受到系統暗黑主題的影響而改變顏色 (#928, ae3dd6dacb46bec84579864f96db9ed1a82466d8)。 **修改** - [Text] `is-x-lines` 使用 `word-break: break-all` 來避免只呈現一個單字 (#929, 60631e0f64681c7f7156b1d3e7f541840a16764a)。 - FontAwesome 更新到 6.4.2 (#932, 00af503467ef73405a4d6899c35a65ec7a563112)。 - [Header] 帶有圖示的標題大小從 `1.5em` 降低為 `1.25em` (#922, dd5b5d202232e705e4733553fe553f91784a259b)。 **新增** - [Tab] 新增 `is-indicated` 的短點指示樣式 (#937, a9568d351c898267a478a9618d8c85bcc4e82717)。 - [Tab] 新增 `is-tall` 的樣式能讓項目的上下更高一點，距離指示器更寬鬆 (#938, 485198dde8849e4d09e35494cdc802a8577c06e1)。 - 新增多個 `has-` 輔助樣式，如 `has-leading-none` 改變行距高度。
**⚠️ 破壞性異動 ⚠️** 這些破壞性異動仍可以繼續在 4.2.4 版本中正常使用，但在未來的版本可能隨時都會被移除，請盡快改為新用法。這些樣式被移至 `/src/deprecated_423.css` 跟 `/src/deprecated_430.css`。 - [Row] Row 元件被廢除，請改用 Grid (#913, 93b757d8858cfaffbaed2f63ee696b2bd0055fea)。 - [Spaced] Space 元件被廢除，請改用輔助樣式的 `u-spaced` 與 `u-padded` (#914, 93b757d8858cfaffbaed2f63ee696b2bd0055fea)。 **新元件** - [Blankslate] 空白預置區塊，再沒有項目的情況下提供使用者一個預設的行為或提示 (9cb08f8db7d906c987b08254d5149dc9cdbf15f0)。 **修正** - [App Topbar] 修正文字頂部被裁切的問題 (#908, 2bcf4e3937e88a623804a5fe7a3546b7187175e2)。 - [Flag] 使國旗的邊框以透明方式呈現，這樣邊框就不會在有底色的元素上過於明顯 (#917, 36b9bc0266121cafa8a61475ce3b3d0760e29c03)。 **修改** - [Button] `is-large` 的按鈕文字大小從 `17px` 降為 `16px` (#911, 9e9b221323bdabb1adf066523dd487c285f69bec)。 - [App Layout] `is-full` 的填滿尺寸從 `100%` 改為 `100vw` 與 `100vh` (3e46cf8973d919c686e7f138080623cf22904845)。 - [Breadcrumb] 項目底限的效果現在只在 `a` 標籤上生效 (f76de075f639a3c534fb6a74fe89ad1b78cced99)。 **新增** - [Table] 新增了 `is-compact` 來縮短左右水平密度 (72bd6645b0b4e2c399b44d5b801ad149b6c8cbe7)。 - [Header] 新增了 `is-tight` 來減少 `line-height` 讓文字換行更緊湊 (#910, f98f567d3a77e774afae5dcdcfd10d1da85b3381, 648b2cce6e63c782bdb064a49ac12077cf32f250)。 - [Grid] 新增了 `is-stretched` 來延展每個欄位的子元素高度，讓所有元素同高 (1a2a92906a5e606166e8326ccd1eea0be310b7cd)。 - [Pagination] 新增 `is-first` 與 `is-last` 來表示第一或最後一頁按鈕 (2fd7d791d27e5e373260235577175e264be572c9。 - [Text] 新增了 `is-justified-aligned` 來均衡對齊文字，感謝 @KageRyo (86b50d726b81d845f2bf81d1df96a055028de25a)。 - [Pagination] 新增 `is-skipped` 來透過 `...` 表示被省略的頁面 (d49cb167e233a83d1e23019764c10d45b0b356a3)。 - [Select] 新增 `is-relaxed` 呈現上下更寬鬆的下拉式選擇欄位 (1797160817b5a73aca7311ced6f9277454f068cf)。 - `u-spaced` 和 `u-padded` 輔助樣式更多元 (2753d10e24be30b4d6d0d6cab73ff293b4ef5122)。
**修正** - 避免 Tocas 重複監聽被重複渲染的元素 (#907, 17820693178e72aaded1a5ee5c3b65e0d80b15e8)。 **修改** - [Tooltip] 暫時移除 Tooltip 避免撞到邊緣的外距間隔，主要是計算問題會有偏移 (fd31b2f948e6641fab27c1d4781819885b38c150)。
**修正** - 移除先前修正 MutationObserver 忘記移除 `characterData: true` 的多餘監聽 (a54d0cf4c6693f63780aefb5e83e723d104b7b71)。