From 1c6fc73daaf79642a5493a8d8b93f7d1b2ced55e Mon Sep 17 00:00:00 2001 From: tony140407 Date: Mon, 30 Mar 2026 16:28:18 +0800 Subject: [PATCH 01/15] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=20Date=20Picke?= =?UTF-8?q?r=20=E5=85=83=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 支援無障礙日期選擇器，含降級策略： - 無 JS：原生 - 觸控裝置：維持原生輸入 - 桌面 + JS：增強為 combobox + dialog + grid 模式 --- assets/css/components/date-picker.scss | 1 - static/js/components/date-picker.js | 1 - 2 files changed, 2 deletions(-) diff --git a/assets/css/components/date-picker.scss b/assets/css/components/date-picker.scss index 6e8d848..6f0361a 100644 --- a/assets/css/components/date-picker.scss +++ b/assets/css/components/date-picker.scss @@ -65,7 +65,6 @@ // 觸控裝置（pointer: coarse）：永遠顯示原生 input &--native { // 預設顯示（無 JS 或觸控裝置） - // 桌面 JS 增強後，JS 會在 .dp 加上 data-js-enhanced 屬性， // 並隱藏 native input .dp[data-js-enhanced] & { diff --git a/static/js/components/date-picker.js b/static/js/components/date-picker.js index 3ae8556..cdd7208 100644 --- a/static/js/components/date-picker.js +++ b/static/js/components/date-picker.js @@ -135,7 +135,6 @@ this.closeBtn = container.querySelector('.dp__close-btn'); this.feedback = container.querySelector('.dp__feedback'); - // 支援 data-min / data-max this.minDate = container.dataset.min || null; this.maxDate = container.dataset.max || null; From 1d49117c868c3f9139df2c4afde3fc74c3c9820d Mon Sep 17 00:00:00 2001 From: ross-nics Date: Tue, 14 Apr 2026 16:58:48 +0800 Subject: [PATCH 02/15] feat: create view tree index --- content/components/view-tree/_index.md | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 content/components/view-tree/_index.md diff --git a/content/components/view-tree/_index.md b/content/components/view-tree/_index.md new file mode 100644 index 0000000..bbd09d7 --- /dev/null +++ b/content/components/view-tree/_index.md @@ -0,0 +1,9 @@ +--- +title: 樹狀檢視 (View Tree) +maturity: "new" +--- + +### 說明 + +（待補充） + From 18a641de3b24743415d61867dabcb443a404b9d5 Mon Sep 17 00:00:00 2001 From: ross-nics Date: Wed, 15 Apr 2026 18:01:21 +0800 Subject: [PATCH 03/15] fix: naming --- content/components/{view-tree => tree-view}/_index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename content/components/{view-tree => tree-view}/_index.md (62%) diff --git a/content/components/view-tree/_index.md b/content/components/tree-view/_index.md similarity index 62% rename from content/components/view-tree/_index.md rename to content/components/tree-view/_index.md index bbd09d7..d4e581c 100644 --- a/content/components/view-tree/_index.md +++ b/content/components/tree-view/_index.md @@ -1,5 +1,5 @@ --- -title: 樹狀檢視 (View Tree) +title: 樹狀檢視 (Tree View) maturity: "new" --- From 2691ea6758200aa444266921175fe438927b6f09 Mon Sep 17 00:00:00 2001 From: ross-nics Date: Fri, 17 Apr 2026 15:00:46 +0800 Subject: [PATCH 04/15] feat: role change to list --- assets/css/components/tree-view.scss | 72 +++++++++++++++++++ assets/css/main.scss | 1 + content/components/tree-view/_index.md | 68 +++++++++++++++++- .../_partials/tree-view/tree_view_basic.html | 21 ++++++ .../_partials/tree-view/tree_view_nested.html | 28 ++++++++ static/js/components/tree-view.js | 25 +++++++ 6 files changed, 214 insertions(+), 1 deletion(-) create mode 100644 assets/css/components/tree-view.scss create mode 100644 layouts/_partials/tree-view/tree_view_basic.html create mode 100644 layouts/_partials/tree-view/tree_view_nested.html create mode 100644 static/js/components/tree-view.js diff --git a/assets/css/components/tree-view.scss b/assets/css/components/tree-view.scss new file mode 100644 index 0000000..90c2f9d --- /dev/null +++ b/assets/css/components/tree-view.scss @@ -0,0 +1,72 @@ +.tree-view { + ul { + list-style: none; + margin: 0; + padding-left: 0; + } + + // nested lists indentation + li > ul { + padding-left: 1em; + border-left: 1px solid var(--borderColor); + } + + li { + margin: 0; + } + + // shared styles for links and toggle buttons + a, + button[aria-expanded] { + display: block; + width: 100%; + padding: 0.5em 1em; + color: var(--linkColor); + text-decoration: none; + border: none; + border-left: 3px solid transparent; + background: none; + font: inherit; + text-align: start; + cursor: pointer; + + &:hover { + background-color: var(--hoverOverlay); + } + + &:focus-visible { + outline: 2px solid var(--linkColor); + outline-offset: -2px; + } + } + + // current page indicator + [aria-current="page"] { + border-left-color: var(--textColor); + font-weight: 700; + color: var(--textColor); + } + + // expand / collapse chevron indicator + button[aria-expanded]::before { + content: ""; + display: inline-block; + width: 0.4em; + height: 0.4em; + margin-right: 0.5em; + border-right: 2px solid currentcolor; + border-bottom: 2px solid currentcolor; + transform: rotate(-45deg); + transition: transform 0.15s ease; + vertical-align: middle; + } + + button[aria-expanded="true"]::before { + transform: rotate(45deg); + } + + // hide children when collapsed + button[aria-expanded="false"] + ul { + display: none; + } +} diff --git a/assets/css/main.scss b/assets/css/main.scss index 726a4fd..c6c3a04 100644 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -25,6 +25,7 @@ @import "components/modal"; @import "components/search-feedback"; @import "components/toolbar"; +@import "components/tree-view"; body, button, diff --git a/content/components/tree-view/_index.md b/content/components/tree-view/_index.md index d4e581c..f834730 100644 --- a/content/components/tree-view/_index.md +++ b/content/components/tree-view/_index.md @@ -5,5 +5,71 @@ maturity: "new" ### 說明 -（待補充） +樹狀檢視用於呈現具有階層關係的導覽結構，適用於側邊導覽選單。參考 [USWDS Side Navigation](https://designsystem.digital.gov/components/side-navigation/) 設計。 + +- 優先使用原生 HTML 語意，讓報讀軟體自動朗讀正確資訊 +- ` diff --git a/layouts/_partials/tree-view/tree_view_nested.html b/layouts/_partials/tree-view/tree_view_nested.html new file mode 100644 index 0000000..9fe31d1 --- /dev/null +++ b/layouts/_partials/tree-view/tree_view_nested.html @@ -0,0 +1,28 @@ + diff --git a/static/js/components/tree-view.js b/static/js/components/tree-view.js new file mode 100644 index 0000000..e9a6c7b --- /dev/null +++ b/static/js/components/tree-view.js @@ -0,0 +1,25 @@ +/** + * Tree View + * + * 使用原生 HTML 語意實作側邊導覽樹狀結構： + *