@daoyi/nmtl-ui 2.0.1-beta.133 → 2.0.1-beta.134
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -54,7 +54,9 @@ const DrawerList = _ref => {
|
|
|
54
54
|
const internalProps = {
|
|
55
55
|
component: NavLink,
|
|
56
56
|
to: `${url}${path}`,
|
|
57
|
-
|
|
57
|
+
/* 不沿用 Mui-selected：各站的選中底色是為其他清單調的，套到抽屜會與文字色衝突
|
|
58
|
+
（ocean 白字配淺藍底只有 1.78:1）。選中樣式一律由 drawer__link--active 決定 */
|
|
59
|
+
activeClassName: 'drawer__link--active'
|
|
58
60
|
};
|
|
59
61
|
/* 外部連結比照桌機頁首另開新視窗，並預先提示（WCAG 3.2.2） */
|
|
60
62
|
const externalProps = {
|
|
@@ -89,7 +91,7 @@ DrawerList.propTypes = {
|
|
|
89
91
|
setOpen: PropTypes.func.isRequired
|
|
90
92
|
};
|
|
91
93
|
|
|
92
|
-
var css_248z = "@charset \"UTF-8\";\n/* 抽屜內容統一靠左對齊在同一條線上（選單文字、工具區標籤都從 1.5rem 起排） */\n.drawer {\n /* 兩層 class 提高權重，蓋過 MUI 主題注入的 .MuiIconButton-root */\n /* ListItem（渲染成 <a>）。hover／選中底色沿用 MUI 與各站主題的 MuiListItem、Mui-selected 設定 */\n /* 目前所在頁：左側色條＋粗體，不只靠底色（WCAG 1.4.1）。\n 色條畫在文字元素上取 currentColor：各站常以 !important 改抽屜文字色（ada 白字、tahl 藍綠），\n 色條才會與文字同色；ListItem 本身是 position:relative，色條貼齊整列左緣 */\n /* 語系超過 3 種時退回下拉：撐滿工具區寬度 */\n}\n.drawer__icon {\n display: none !important;\n}\n.drawer__paper {\n width: 20rem;\n max-width: 90vw;\n /* 開啟時 MUI 把焦點放在紙面本身（tabindex=-1 的容器，非操作元件），不畫焦點框；\n 須 !important 才蓋得過各站 a11y.scss 的全域 :focus-visible */\n}\n.drawer__paper:focus {\n outline: none !important;\n}\n.drawer__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.5rem;\n padding: 0.75rem 0.5rem 0.75rem 1.5rem;\n}\n.drawer__header-brand {\n display: flex;\n align-items: center;\n min-width: 0;\n}\n.drawer__header-title {\n font-size: 1.125rem;\n font-weight: bold;\n}\n.drawer__header .drawer__close {\n flex-shrink: 0;\n /* 觸控目標 48px（WCAG 2.5.5）：共用主題把 IconButton padding 改成 8（只剩 40px），\n 部分子站手機版又把根字級縮到 70%，故用 px 保底 */\n min-width: 48px;\n min-height: 48px;\n margin-left: auto;\n /* 深色主題（palette.type=dark，如 ada、tahl）的 IconButton 預設白色，在淺色抽屜上看不見 → 沿用抽屜文字色 */\n color: inherit;\n}\n.drawer__header .drawer__close.Mui-focusVisible {\n outline: 2px solid currentColor;\n}\n.drawer__list > li {\n list-style: none;\n}\n.drawer__list .drawer__link {\n /* 觸控目標 48px（WCAG 2.5.5） */\n min-height: 3rem;\n /* 文字與工具區標籤對齊 1.5rem（蓋過 MuiListItem-gutters 的 16px） */\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n color: inherit;\n text-decoration: none;\n /* 連結撐滿抽屜寬度，紙面又會捲動（overflow:auto），外凸的焦點框左右會被裁掉 → 內縮完整框。\n 各站 a11y.scss 的全域 :focus-visible 以 !important 設 outline-offset，這裡也須 !important 才蓋得過 */\n}\n.drawer__list .drawer__link:focus-visible {\n outline: 2px solid currentColor;\n outline-offset: -4px !important;\n}\n.drawer__link--active .MuiTypography-root {\n font-weight: 700;\n}\n.drawer__link--active .MuiTypography-root::before {\n content: \"\";\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: 0.25rem;\n background: currentColor;\n}\n.drawer__tools {\n display: flex;\n flex-direction: column;\n gap: 1.25rem;\n padding: 1.25rem 1.5rem;\n}\n.drawer__lang.select {\n width: 100%;\n}\n\n@media screen and (max-width: 768px) {\n .drawer {\n display: flex;\n justify-content: flex-end;\n }\n .drawer__icon {\n display: flex !important;\n }\n}";
|
|
94
|
+
var css_248z = "@charset \"UTF-8\";\n/* 抽屜內容統一靠左對齊在同一條線上（選單文字、工具區標籤都從 1.5rem 起排） */\n.drawer {\n /* 兩層 class 提高權重，蓋過 MUI 主題注入的 .MuiIconButton-root */\n /* ListItem（渲染成 <a>）。hover／選中底色沿用 MUI 與各站主題的 MuiListItem、Mui-selected 設定 */\n /* 目前所在頁的淡底：取文字色加 8% 透明度疊在原本的底色上，\n 深淺底、各站自訂色都不會讓文字對比變差（不像各站的 Mui-selected 底色會衝突） */\n /* 目前所在頁：左側色條＋粗體，不只靠底色（WCAG 1.4.1）。\n 色條畫在文字元素上取 currentColor：各站常以 !important 改抽屜文字色（ada 白字、tahl 藍綠），\n 色條才會與文字同色；ListItem 本身是 position:relative，色條貼齊整列左緣 */\n /* 語系超過 3 種時退回下拉：撐滿工具區寬度 */\n}\n.drawer__icon {\n display: none !important;\n}\n.drawer__paper {\n width: 20rem;\n max-width: 90vw;\n /* 開啟時 MUI 把焦點放在紙面本身（tabindex=-1 的容器，非操作元件），不畫焦點框；\n 須 !important 才蓋得過各站 a11y.scss 的全域 :focus-visible */\n}\n.drawer__paper:focus {\n outline: none !important;\n}\n.drawer__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.5rem;\n padding: 0.75rem 0.5rem 0.75rem 1.5rem;\n}\n.drawer__header-brand {\n display: flex;\n align-items: center;\n min-width: 0;\n}\n.drawer__header-title {\n font-size: 1.125rem;\n font-weight: bold;\n}\n.drawer__header .drawer__close {\n flex-shrink: 0;\n /* 觸控目標 48px（WCAG 2.5.5）：共用主題把 IconButton padding 改成 8（只剩 40px），\n 部分子站手機版又把根字級縮到 70%，故用 px 保底 */\n min-width: 48px;\n min-height: 48px;\n margin-left: auto;\n /* 深色主題（palette.type=dark，如 ada、tahl）的 IconButton 預設白色，在淺色抽屜上看不見 → 沿用抽屜文字色 */\n color: inherit;\n}\n.drawer__header .drawer__close.Mui-focusVisible {\n outline: 2px solid currentColor;\n}\n.drawer__list > li {\n list-style: none;\n}\n.drawer__list .drawer__link {\n /* 觸控目標 48px（WCAG 2.5.5） */\n min-height: 3rem;\n /* 文字與工具區標籤對齊 1.5rem（蓋過 MuiListItem-gutters 的 16px） */\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n color: inherit;\n text-decoration: none;\n /* 連結撐滿抽屜寬度，紙面又會捲動（overflow:auto），外凸的焦點框左右會被裁掉 → 內縮完整框。\n 各站 a11y.scss 的全域 :focus-visible 以 !important 設 outline-offset，這裡也須 !important 才蓋得過 */\n}\n.drawer__list .drawer__link:focus-visible {\n outline: 2px solid currentColor;\n outline-offset: -4px !important;\n}\n.drawer__link--active::before {\n content: \"\";\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background: currentColor;\n opacity: 0.08;\n pointer-events: none;\n}\n.drawer__link--active .MuiTypography-root {\n font-weight: 700;\n}\n.drawer__link--active .MuiTypography-root::before {\n content: \"\";\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: 0.25rem;\n background: currentColor;\n}\n.drawer__tools {\n display: flex;\n flex-direction: column;\n gap: 1.25rem;\n padding: 1.25rem 1.5rem;\n}\n.drawer__lang.select {\n width: 100%;\n}\n\n@media screen and (max-width: 768px) {\n .drawer {\n display: flex;\n justify-content: flex-end;\n }\n .drawer__icon {\n display: flex !important;\n }\n}";
|
|
93
95
|
styleInject(css_248z);
|
|
94
96
|
|
|
95
97
|
/* 語系不多時並排成分段按鈕（點一下即切換），太多才退回下拉 */
|
package/lib/components/Drawer.js
CHANGED
package/lib/components/Header.js
CHANGED
|
@@ -8,7 +8,7 @@ import { Typography, IconButton } from '@material-ui/core';
|
|
|
8
8
|
import { SearchOutlined } from '@material-ui/icons';
|
|
9
9
|
import { K as KeywordSearch } from './KeywordSearch-db9c45d9.js';
|
|
10
10
|
import { S as Select } from './Select-89841c71.js';
|
|
11
|
-
import { c as checkLanguageSupport, D as Drawer, d as defaultSupportLanguage } from './Drawer-
|
|
11
|
+
import { c as checkLanguageSupport, D as Drawer, d as defaultSupportLanguage } from './Drawer-2328b5f7.js';
|
|
12
12
|
import { getIntl } from './globalConfig';
|
|
13
13
|
import { s as styleInject } from './style-inject.es-1f59c1d0.js';
|
|
14
14
|
import './isObjectLike-e111475d.js';
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@daoyi/nmtl-ui",
|
|
3
3
|
"packageManager": "pnpm@10.34.5",
|
|
4
|
-
"version": "2.0.1-beta.
|
|
4
|
+
"version": "2.0.1-beta.134",
|
|
5
5
|
"description": "This project is to be used as a starter kit for building React component using Storybook and Rollup",
|
|
6
6
|
"author": "daoyi",
|
|
7
7
|
"main": "lib/index.js",
|