Releases · teacat/tocas

包含所有 4.2.5 之前的破壞性變更，請檢視先前的歷史更新，往前追溯
[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 (5348046)
[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 作為基底 (bc093bb)
[Button] 圖示按鈕 .is-icon 的比例現在一定會是 1:1 正方形 (#968)
[Flag] 國旗現在可以自由地變更寬度 (#964)
[Select] 不再需要手動指定 .is-multiple 多選樣式，現在透過 :has([multiple]) 自動偵測 (#973)
[Dropdown] 增加內距，令其看起來更輕鬆 (#982, 757d33b)
[Dropdown] 展開時的預設 [data-position] 位置現在改為 bottom-start (#984)
[Dropdown] 現在有預設的最小寬度 10rem (#984)
[Dropdown] 重新設計 .header 的標題項目樣式 (#985)
[Dropdown] 自動依據畫面剩餘的空間調整高度(#986)
[Text] 將 .is-editable 文字樣式顏色改得更深 (1d93100)
[Box] .is-indicated 邊框變得更厚了 (#1002)
[Image] .is-1-by-1 這種長寬比樣式的圖片現在會自動套用 .is-covered 樣式 (#1011)
<form> 元素現在是 display: contents 這樣就不會影響某些樣式 (#1036)
<body> 改為 display: table-cell 以符合某些內容溢出捲動的情境 (ff22c1c)
FontAwesome 更新至 6.5.2 (46203e4)

新增

[Pagination] 新增 .is-outlined 外框線樣式 (#939, #969)
[Pagination] 新增 .is-relaxed 寬鬆樣式 (#940)
[Button] 新增 .is-negative + .is-secondary 負面次要樣式 (#957)
[AppDrawer] 新增 --width 變更抽屜寬度 (26816db)
[Modal] 新增 --width 變更視窗寬度 (9397cec)
[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 來自定寬度 (60d804f)
[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 加回來了 (f18876d, #945)
[Fieldset] 新增了 [disabled] 樣式
新增 .is-rounded 與 .is-sharp 來變更全域圓角設定 (#933, #994)

Assets 2

05 Sep 21:23

YamiOdymel

4.2.5

2779e2b

Tocas 4.2.5

⚠️ 破壞性異動 ⚠️

這些破壞性異動仍可以繼續在 4.2.5 版本中正常使用，下一個 4.3.0 版本將會全數移除，請盡快改為新用法。這些樣式被移至 /src/deprecated_431.css。

[Center] Center 元件被廢除，請改用輔助樣式的 has-flex-center 與 has-full-size (#921, 7ef743f)。
[Utilities] 所有的輔助樣式從 u- 前輟改為 has- (#935, 7d1e502)。

修正

[Grid] 使用 is-stacked 的時候會導致子 Grid 也被 Stack (#926, ed3658a)。
[Grid] 使用 is-stacked 和 is-reversed 不起作用 (#927, 5de2be9)。
[Rating] Firefox 尚未支援 :has 選擇器而導致 is-active 顏色不起作用 (#924, 6bdbfb1)。
[Divider] is-vertical 的分隔線會因為指定 height: 100% 而不在 Flexbox 生效 (#923, 95f6fde)。
[Control] is-stacked 的時候 Firefox 會因為 overflow: hidden 而裁切較矮 line-height 的文字 (#925, 4fa65ef)。
is-light 的時候，連結顏色仍然會受到系統暗黑主題的影響而改變顏色 (#928, ae3dd6d)。

修改

[Text] is-x-lines 使用 word-break: break-all 來避免只呈現一個單字 (#929, 60631e0)。
[Header] 帶有圖示的標題大小從 1.5em 降低為 1.25em (#922, dd5b5d2)。
FontAwesome 更新到 6.4.2 (#932, 00af503)。

新增

[Tab] 新增 is-indicated 的短點指示樣式 (#937, a9568d3)。
[Tab] 新增 is-tall 的樣式能讓項目的上下更高一點，距離指示器更寬鬆 (#938, 485198d)。
新增多個 has- 輔助樣式，如 has-leading-none 改變行距高度。

Assets 2

24 Jun 13:49

YamiOdymel

4.2.4

536f885

Tocas 4.2.4

⚠️ 破壞性異動 ⚠️

這些破壞性異動仍可以繼續在 4.2.4 版本中正常使用，但在未來的版本可能隨時都會被移除，請盡快改為新用法。這些樣式被移至 /src/deprecated_423.css 跟 /src/deprecated_430.css。

[Row] Row 元件被廢除，請改用 Grid (#913, 93b757d)。
[Space] Space 元件被廢除，請改用輔助樣式的 u-spaced 與 u-padded (#914, 93b757d)。

新元件

[Blankslate] 空白預置區塊，在沒有項目的情況下提供使用者一個預設的行為或提示 (9cb08f8)。

修正

[App Topbar] 修正文字頂部被裁切的問題 (#908, 2bcf4e3)。
[Flag] 使國旗的邊框以透明方式呈現，這樣邊框就不會在有底色的元素上過於明顯 (#917, 36b9bc0)。

修改

[Button] is-large 的按鈕文字大小從 17px 降為 16px (#911, 9e9b221)。
[App Layout] is-full 的填滿尺寸從 100% 改為 100vw 與 100vh (3e46cf8)。
[Breadcrumb] 項目底限的效果現在只在 a 標籤上生效 (f76de07)。

新增

[Table] 新增了 is-compact 來縮短左右水平密度 (72bd664)。
[Header] 新增了 is-tight 來減少 line-height 讓文字換行更緊湊 (#910, f98f567, 648b2cc)。
[Grid] 新增了 is-stretched 來延展每個欄位的子元素高度，讓所有元素同高 (1a2a929)。
[Pagination] 新增 is-first 與 is-last 來表示第一或最後一頁按鈕 (2fd7d79。
[Text] 新增了 is-justified-aligned 來均衡對齊文字，感謝 @KageRyo (86b50d7)。
[Pagination] 新增 is-skipped 來透過 ... 表示被省略的頁面 (d49cb16)。
[Select] 新增 is-relaxed 呈現上下更寬鬆的下拉式選擇欄位 (1797160)。
u-spaced 和 u-padded 輔助樣式更多元 (2753d10)。

Contributors

KageRyo

Assets 2

08 Mar 03:37

YamiOdymel

4.2.3

1782069

Tocas 4.2.3

修正

避免 Tocas 重複監聽被重複渲染的元素 (#907, 1782069)。

修改

[Tooltip] 暫時移除 Tooltip 避免撞到邊緣的外距間隔，主要是計算問題會有偏移 (fd31b2f)。

Assets 2

04 Mar 16:53

YamiOdymel

4.2.2

b6ebb34

Tocas 4.2.2

修正

移除先前修正 MutationObserver 忘記移除 characterData: true 的多餘監聽 (a54d0cf)。

Assets 2

04 Mar 16:30

YamiOdymel

4.2.1

2f08390

Tocas 4.2.1

修正

修正 Vue.js 因為使用非正規 DOM 編輯方式而導致 Tocas JS 無法使用 MutationObserver 監聽的問題 (821d90e)。

新增

[Grid] column 新增了 is-center-aligned 可以讓欄位成為 display: flex; 並置中內容 (a5f9fef)。
對 <html> 新增 is-medium 來將字體大小改為 15px，這是預設值通常不需要特別套用 (9d41aa5)。

Assets 2

03 Mar 11:23

YamiOdymel

4.2.0

f828912

Tocas 4.2.0

⚠️ 破壞性異動 ⚠️

這些破壞性異動仍可以繼續在 4.2.0 版本中正常使用，但在未來的版本可能隨時都會被移除，請盡快改為新用法。這些樣式被移至 /src/deprecated_420.css。

[Accordion] 改為使用 HTML 原生的 <details> 標籤 (#882, ab82979)。
[Grid] 多項功能被移除：is-doubling、is-stackable，請透過新的響應式系統搭配 is-x-columns 跟 is-stacked 使用。
HTML 的 [data-scale] 與 [data-scheme] 改為 is- 用法（如：is-small 跟 is-dark） (#896)。
舊有的響應式系統完全重構，如 is-minimal-x, is-standard-x, is-maximal-x 都不再支援（包含網格系統的 is-minimal-5 用法…等），請使用新的響應式系統。
is-dark, is-light, is-inverted 都改為 u- 前輟，如：u-dark。
is-dark-only, is-light-only 改為 u-dark-hidden 跟 u-light-hidden 而且作用相反，需要額外注意。

新元件

[App Drawer] 可以讓左、右、下出現置頂的抽屜 (58f5631)。
[App Topbar] 可以呈現像應用程式那樣的頂部按鈕列 (5f2d867)。
[Timeline] 能以時間軸的方式陳列事情發生的經過 (70b8982)。
[Buttons] 新的按鈕群組，用以呈現類似 Split Button 樣式，可以讓按鈕旁邊緊鄰另一個按鈕 (#865, 92eb54b)。
新增數個 JavaScript 模組：Dropdown, Tooltip, Toggle, Tab。

修正

[App Layout] 每個 .cell 現在都是 overflow: auto 來修正會在容器異常 Scrollable 的問題 (#900, a273064)。
[Procedure] 因為多行文字而造成 .indicator 扁掉的問題 (#883, f334bd7)。
[Dropdown] 修正 Dropdown 的 z-index 穿透更上層的 Modal 問題 (#853, 119054a)。
[Button] 修正帶有 is-large 的 Icon 在 is-labeled-icon 按鈕會不成比例的 em 問題 (#849, ccdd4a7)。
[Button] is-loading 會因為帶有 is-labeled-icon 樣式而看起來很奇怪 (#850, f72b9b7)。
[Button] 修正 is-ghost 的 Loading 顏色 (#868, f00c809)。
[Select] 項目的圖示大小跟 Dropdown 的 1.1em 不相符而看起來不對齊 (#857, dda2048)。
[Select] is-solid 會因為 CSS 優先順序而永遠無法套用 is-acitve 樣式的問題 (#858, dda2048)。
[Icon] 圖示的 z-index 會突破 Mask (#876, 0fdaaf6)。
[Tab] Item 裡面的文字與圖示現在會上下垂直置中避免跑位 (#864, e8838a2)。
[Tab] 修正 Item 若是 <button> 則會跑位的問題 (#859, 4c075cd)。
is-dark-only 原本只會相依使用者裝置的 color-scheme 但卻忽略了套用 is-dark 元素的條件 (#888, 95772e3)。

修改

[Procedure] 簡化結構，已經不再需要 .line 元素 (#899, 79ec645)。
[Dropdown] 項目套用 min-width: 0 來支援 text-overflow (3643801)。
[Dropdown] 項目裡的 Avatar 會有負外距來讓對齊看起來更整齊 (#854, 49c49cb)。
[Imageset] is-portrait 因為人像重點通常在上面，現在預設會以置上裁切為主 (#862, 2d3616f)。
[Imageset] is-portrait 左側欄位為了更妥善地呈現主體照片，比起右側欄位會有更大的佔比 (#860, 2d3616f)。
[Button] is-labeled-icon 裡的圖示現在會以 1.2em 大一點的尺寸顯示 (f69ce39)。
[Table] 調整了 <td> 的 is-padded 樣式相關內距 (8e05327)。
[Grid] 已經不再使用 display: grid 並改回使用 display: flex (cf9ff32)。
[File] 現在也跟其他 Input 一樣預設都是 100% 流動寬度 (#871, 90e1256)。
[Text] 沒有公開的 is-x-lines 的 is-1-line 改為複數的 is-1-lines (fa0f323)。
[Tab] 圖示現在是 1.1em 尺寸，變得更大一點了 (4c075cd)。
移除了英文版本的文件，因為目前沒時間維護 (36a69c4)。
更新到 FontAwesome 6.3.0 (3362365)。

新增

[Checklist] 新增了 is-info 跟 is-warning 的項目用來呈現資訊與警告項目 (#890, a40b794)。
[Container] 新增 is-padded 和 is-fitted 來變更內距大小，很適合響應式設計在行動裝置上減小內距 (#893, 1581215)。
[Dropdown] 新增 is-top-center 跟 is-bottom-center 來置中上下邊的選單 (#855, 3e8675e)。
[Control] 新的 is-stacked 可以搭配響應式設計在行動裝置上層疊 (#845, 715a4c0)。
[Loading] 可以水平置中的 is-centered (2eb22eb)。
[Content] 現在可以上下或左右單獨使用 is-fitted (d0aaa50)。
[Header] 現在和 Text 一樣有了 is-lowercased 與 is-uppercased 可以強制英文字母大小寫 (#878, 15a659c)。
[Rating] 現在支援 is-input 來讓使用者可以透過 checkbox 評分了 (#881, f3ad84b)。
[Button] 因為 is-secondary 按鈕在 is-secondary Content 上會不太明顯，所以新增一個 is-tertiary 樣式來暫時解決這個問題 (#810, f72b9b7)。
[Select] 透過 is-multiple 來使用複選的 [multiple] (#884, 01955e9)。
[Table] 新的 is-fitted 無內距的樣式 (#874, 8a5d2d0)。
[Input] 新增 is-relaxed 可以讓高度更高來呈現較寬鬆的模樣 (8784caa)。
[Close] 新增一個更大的 is-big 尺寸 (#851, 07726d7)。
[Close] 新的 is-rounded 正圓角樣式 (#852, 07726d7)。
[Flag] 新增 is-zz-flag 或 is-unknown-flag 來代表未知的國旗 (#875, 23a8a1b)。
[Grid] 新的 is-1-columns 來呈現只有一欄的欄位，通常用於響應式設計在 is-x-columns 之間切換 (#891, 73144d8)。
[Grid] 新增 is-reversed, is-stacked 和 is-order-x (e3f597e)。
[Menu] 現在也支援 is-horizontally-padded 來增加項目的內距 (#869, 722c580)。
Switch, Checkbox 跟 Radio 現在有 is-solo 樣式可以用來呈現沒有文字只有開關的模樣 (#833, 7ed49f3)。
未公開的 Tocas Email 元件，可以檢視 /examples/email 先行預覽 (#866, fa1c2ae)。
大部分的元件現已支援 Accent Color 領銜主色，可以替元件加上主要色系 (e56c86b)。
全新的響應式系統可以透過 中斷點:樣式 來更加彈性地切換樣式 (#894)。

筆記

Grid 已經不再是 display: grid 並改回使用 display: flex (cf9ff32)。

Tocas 4 試圖在 Grid 元件使用 display: grid 來取代 Tocas 2 時的 display: flex 設計，結果不僅沒有變得更彈性，反而更加地綁手綁腳了。

舉例來說，沒有辦法像 Flexbox 那樣反轉欄位順序或是填滿剩餘空間；即便有，也沒有辦法自動將欄位換到下一列。

總之，display: grid 更像是給已經有一個排版設計的網頁使用，現在改回 Flexbox 設計之後，Tocas Grid 現在也多了幾項功能（例如：is-reversed 跟 is-order-x）。

Accordion 改用 <details> (#882, ab82979)。

正如 #882 說的那樣，使用者可以自行使用 .ts-row 來得到近似原本的設計，現在改為使用 HTML 原生的 <details> 可以更快地擁有一個簡易可折疊內容的功能。

基於 JavaScript 的全新的響應式系統 (#894)。

原先 Tocas 4 試圖簡化響應式設計系統，使用 CSS 來將介面劃分為 minimal、standard 和 maximal，希望使用者能以最小化、標準、最大化來決定介面上應該要有哪些元素。

但很快地這個系統並不可靠，主要的問題有這幾項：

依靠視窗寬度來決定元素的斷點實在是太過無用，例如：頁面上已經變得很擁擠，卻因為視窗還是很寬而無法觸發 CSS 的中斷點設定。
使用者可能有自訂樣式想要在行動裝置使用，但是要跟 Tocas UI 的中斷點同時觸發，就還要跑來看原始碼複製裝置中斷點的定義，實在太過繁瑣。
中斷點的定義寫死在 Tocas CSS 裡而不能自行修改，因為 Media Query 不支援從 CSS Variables 裡面讀取。
每個中斷點都要有重複的樣式，一個樣式如果有四個中斷點，就要重複寫四次。

在思考後，決定使用類似 Tailwind 那樣的 mobile:is-small 定義，但因為 Tocas 沒有編譯器，因此以 JavaScript 搭配 Mutation Observer 作為基礎系統。現在搭配 Tocas JS，可以透過 CSS Variable 定義中斷點，甚至還支援 Container Query，也可以使用中斷點來切換自己的樣式。

全域樣式 Utilities 系統 (0510e8e)。

全域樣式可以在任何元素上使用（甚至不是 Tocas UI 的元件），例如：想要隱藏某些元素，就勢必要有一個 is-hidden 樣式。

起初的前輟是 has- 但某些命名仍不太符合文法（如：has-dark、has-hidden），所以決定改為 u- 前輟。

Assets 2

Releases: teacat/tocas

Tocas 5.0.3

Uh oh!

Tocas 5.0.2

Uh oh!

Tocas 5.0.1

Uh oh!

Tocas 5.0.0

Uh oh!

Tocas 4.2.5

Uh oh!

Tocas 4.2.4

Contributors

Uh oh!

Tocas 4.2.3

Uh oh!

Tocas 4.2.2

Uh oh!

Tocas 4.2.1

Uh oh!

Tocas 4.2.0

Uh oh!