Releases · teacat/tocas

04 Jun 06:00

YamiOdymel

5.7.0

3d4f2d8

Tocas 5.7.0 Latest

Latest

⚠️ 破壞性異動 ⚠️

[Progress] 移除 .is-queried 樣式 (#1076)
[AppNavbar, Notice] 移除 .is-dense 樣式 (0437ed7)
[AppNavbar] 移除純圖示的 .is-unlabeled 樣式 (#1080)
[Menu] 選單內的 Badge 由 .ts-badge 改為通用的 .badge (#1087)

修正

[Accordion] 修正巢狀 <details> 展開時，父容器狀態導致子元素圖示方向跟著改變 (#1072)
[AppTopbar, Snackbar] 修正顏色使用了已被移除的靜態白色 (fe79096)
[Checkbox, Radio, Switch] 修正元件頂部有多餘的空白 (fc3f4de)
[Chip] 修正 .is-spaced 沒有效果 (#1082)
[Conversation] 修正大頭貼底部有多餘空白 (#1071)
[Icon] 修正字型大小等樣式因為 !important 導致無法由外部樣式覆蓋 (#1099)
[Modal] 修正 <dialog> 的文字顏色沒有繼承父容器，預設會呈現正黑色 (#1097)
[RWD] 修正套用在 <html> 的 RWD 樣式要在重新調整視窗後才會生效，現已將全域樣式改至 <body> 定義 (#1050)
[Tab] 修正 Tab 與 Content 的 JS 載入順序問題，在 Tab 早於 Content 插入 DOM 時導致找不到對應面板 (#1078)
[Table] 修正 .is-basic 搭配 .is-striped 時第一行底色不正確 (#1085)
[Table] 修正 .is-relaxed 樣式也影響到 <th> 標題列 (f0d8ac5)
[Table] 修正 .is-fitted 的 start、end 方向相反 (e918551)

修改

[Accordion] 圖示改至右側，並新增 .is-plus-sign 使用加減號做為切換圖示 (#1091, 2d34309)
[AppNavbar] 預設選取效果改為底部指示線樣式 (#1079)
[Badge] 預設字型大小由 14px 調整為 13px (91f1b47)
[Button] 整頓按鈕樣式，新增 --border-width、--icon-size CSS 變數，並移除 .is-small.is-dense 的組合樣式 (a01ec14)
~~[Checkbox, Radio] 背景色從 gray-200 改為 gray-50，在淺色背景下視覺上更自然 (#1095)~~ (已復原 1c67c24)
[Chip] 整頓 .is-input、.is-toggle、.is-secondary、.is-outlined 的使用方式，改以 :has 偵測子元素來自動套用樣式 (#1081)
[Dropdown] .item 選擇器改為明確針對 a、button、input[type=submit]，以支援外層有 <form> 的情境 (#1092)
[Progress] 縮小預設高度，讓比例更貼近其他主流框架 (#1073)
[Progress] 改善 indeterminate 動畫，改為短條從左到右持續移動的方式 (#1075)
[Progress] 移除進度條內部的圓角 (#1074)
[Table] 對齊樣式現在也可以直接套用在 <table> 元素本身 (1a2c7c8)
[Table] <table> 不再繼承父容器的 vertical-align 設定 (df1bab7)
[Table] .is-definition 第一欄 <td> 現在也會視為標題列，可加上 .is-ignored 取消此行為 (6cf1373)
[Text] 移除 .is-negative.is-secondary 組合樣式 (77f0ace)
[disabled] 狀態現改為僅使用透明度表示，不再強制改變文字顏色 (9115b66)
顏色系統整頓，移除 --ts-white、--ts-black 改用實際顏色名稱，並將顏色定義整合至 colors.css (9397486, f3c04a1)
顏色系統改用 light-dark() 函數搭配 color-scheme 屬性，讓暗色模式切換更簡潔 (0341fbe)
FontAwesome 更新至 7.1.0 (84aee31)
移除沒用到的 .stretched-link、.hover-target (07e7acb)

新增

[Divider] .is-section 現在可透過 --gap 調整分隔上下的間距 (#1070)
[Dropdown] 新增 data-collapse="false" 屬性，讓觸發器在重複點擊時不會關閉選單 (#1063)
[Menu] 新增 .is-indicated 側邊指示線樣式 (#1084)
[Menu] .is-secondary 的 .is-active 效果現在更為低調，不再如此搶眼 (#1088)
工具類新增 .gray-background 背景色與垂直對齊相關工具類 (ace0bd1)
間距工具類新增 tiny 尺寸 (9dea462)

Assets 2

01 Jul 19:39

YamiOdymel

5.0.3

e3a430c

Tocas 5.0.3

修正

修正 JavaScript 執行效能問題可能在 Vue.js 變更 DOM 時發生，從 Spread Operator 改用 push (#1083)

Assets 2

19 Mar 15:49

YamiOdymel

5.0.2

62f96d2

Tocas 5.0.2

修正

[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)

Assets 2

05 Jul 00:30

YamiOdymel

5.0.1

0bb185e

Tocas 5.0.1

修正

[Icons] cdnjs 沒有快取到 FontAwesome 而導致圖示無法顯示的問題 💀 (0bb185e)

Assets 2

04 Jul 05:17

YamiOdymel

5.0.0

7f118f0

Tocas 5.0.0

儘管 Tocas 5.0 與 4.2.5 大部分相同，但有些元件被移除或是改變用法。
文件網址 https://tocas-ui.com/5.0/zh-tw/index.html

⚠️ 破壞性異動 ⚠️

包含所有 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

Releases: teacat/tocas

Tocas 5.7.0

修正

修改

新增

Uh oh!

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!