dsh-plugin-core 0.9.0 → 0.10.0
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.
- package/dist/ui/Segmented.d.ts +12 -0
- package/dist/ui/Segmented.d.ts.map +1 -1
- package/dist/ui/Segmented.js +11 -2
- package/dist/ui/Segmented.js.map +1 -1
- package/dist/ui/controls/datetime-css.generated.d.ts +1 -1
- package/dist/ui/controls/datetime-css.generated.d.ts.map +1 -1
- package/dist/ui/controls/datetime-css.generated.js +1 -1
- package/dist/ui/controls/datetime-css.generated.js.map +1 -1
- package/dist/ui/controls/segmented-css.generated.d.ts +1 -1
- package/dist/ui/controls/segmented-css.generated.d.ts.map +1 -1
- package/dist/ui/controls/segmented-css.generated.js +1 -1
- package/dist/ui/controls/segmented-css.generated.js.map +1 -1
- package/dist/ui/index.d.ts +1 -1
- package/dist/ui/index.d.ts.map +1 -1
- package/dist/ui/index.js.map +1 -1
- package/docs/design/style.md +13 -0
- package/docs/help/ui.doc.ts +2 -2
- package/docs/help/ui.md +2 -2
- package/package.json +1 -1
package/dist/ui/Segmented.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { ChipTone } from './Chip.js';
|
|
1
2
|
import { createElement as h, type CSSProperties } from 'react';
|
|
2
3
|
/** 一段(一个可选值)。 */
|
|
3
4
|
export interface SegmentedItem<T extends string = string> {
|
|
@@ -14,6 +15,15 @@ export interface SegmentedItem<T extends string = string> {
|
|
|
14
15
|
/** 段级悬停提示(核心 Tooltip 本体,官方气泡):鼠标移入该项浮出书面化说明;需宿主注入 renderer。 */
|
|
15
16
|
tooltip?: string;
|
|
16
17
|
}
|
|
18
|
+
/**
|
|
19
|
+
* 选中片配色(默认 = 主题亮片,字跟主题走):
|
|
20
|
+
* - 内置色名(与 Chip 同一套):底色 / 字色由核心定,深浅两个主题各自成立;
|
|
21
|
+
* - `{ bg, fg }`:一组背景 + 一组文字,**两个主题都一样**(调用方自己负责对比度)。
|
|
22
|
+
*/
|
|
23
|
+
export type SegmentedTone = Exclude<ChipTone, 'neutral'> | {
|
|
24
|
+
bg: string;
|
|
25
|
+
fg: string;
|
|
26
|
+
};
|
|
17
27
|
interface SegmentedBaseProps<T extends string = string> {
|
|
18
28
|
/** 段定义。 */
|
|
19
29
|
items: readonly SegmentedItem<T>[];
|
|
@@ -23,6 +33,8 @@ interface SegmentedBaseProps<T extends string = string> {
|
|
|
23
33
|
block?: boolean;
|
|
24
34
|
/** 最外层 1px 描边框(默认 false)。总高与无框版逐像素一致。 */
|
|
25
35
|
bordered?: boolean;
|
|
36
|
+
/** 选中片配色(默认主题亮片)。见 {@link SegmentedTone}。 */
|
|
37
|
+
tone?: SegmentedTone;
|
|
26
38
|
/** 无障碍组名(读屏用)。 */
|
|
27
39
|
label?: string;
|
|
28
40
|
/** 根节点 id(锚点 / 自动化测试用)。 */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Segmented.d.ts","sourceRoot":"","sources":["../../src/ui/Segmented.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Segmented.d.ts","sourceRoot":"","sources":["../../src/ui/Segmented.ts"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAA;AACzC,OAAO,EACL,aAAa,IAAI,CAAC,EAKlB,KAAK,aAAa,EACnB,MAAM,OAAO,CAAA;AAqBd,iBAAiB;AACjB,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IACtD,kBAAkB;IAClB,KAAK,EAAE,CAAC,CAAA;IACR,YAAY;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,aAAa;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+DAA+D;IAC/D,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,OAAO,CAAC,QAAQ,EAAE,SAAS,CAAC,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,CAAA;AAErF,UAAU,kBAAkB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IACpD,WAAW;IACX,KAAK,EAAE,SAAS,aAAa,CAAC,CAAC,CAAC,EAAE,CAAA;IAClC,2BAA2B;IAC3B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,iBAAiB;IACjB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,2BAA2B;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB;AAED,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,CAAE,SAAQ,kBAAkB,CAAC,CAAC,CAAC;IAC5F,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB,aAAa;IACb,KAAK,EAAE,CAAC,CAAA;IACR,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAA;CAC7B;AAED,MAAM,WAAW,mBAAmB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,CAAE,SAAQ,kBAAkB,CAAC,CAAC,CAAC;IAC3F,iBAAiB;IACjB,QAAQ,EAAE,IAAI,CAAA;IACd,eAAe;IACf,KAAK,EAAE,CAAC,EAAE,CAAA;IACV,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAA;CAC/B;AAED,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,oBAAoB,CAAC,CAAC,CAAC,GAAG,mBAAmB,CAAC,CAAC,CAAC,CAAA;AAExG;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC,CA0G1F"}
|
package/dist/ui/Segmented.js
CHANGED
|
@@ -8,6 +8,8 @@
|
|
|
8
8
|
* (border 由 padding 抵消),两种模式整行混排不跳高。
|
|
9
9
|
*
|
|
10
10
|
* 外观只有一套(灰底轨道 + 白色选中片,阴影来自宿主 elevation token)。
|
|
11
|
+
* 唯一的配色入口是 `tone`(2026-10-29):传内置色名则由核心定底 / 字(两主题各自成立),
|
|
12
|
+
* 传 `{ bg, fg }` 则两个主题都用调用方这一对颜色。
|
|
11
13
|
* 2026-10-26 删掉 `variant` 轴(原 default / inset 两档在 CSS 里只差 1px 内距,
|
|
12
14
|
* 且 default 比 `size` 承诺矮 2px,下游照 demo 对图时反复查不出原因 —— 见 docs/design/style.md)。
|
|
13
15
|
*
|
|
@@ -81,14 +83,21 @@ export function Segmented(props) {
|
|
|
81
83
|
}, [sliding, measure, value, size, props.items, props.bordered, props.block]);
|
|
82
84
|
// 核心 Tooltip 渲染器(宿主启动注入官方 Tooltip;未注入则段级提示降级为无)。
|
|
83
85
|
const renderer = getTooltipRenderer();
|
|
86
|
+
// tone:内置色名走 CSS 类(底 / 字配对在 segmented.css,两主题各自成立);
|
|
87
|
+
// 自定义一对颜色只能内联写根节点那两条局部变量(内联恒胜,两主题同值)。
|
|
88
|
+
const tone = props.tone;
|
|
89
|
+
const toneClass = typeof tone === 'string' ? ` dshpc-seg--tone-${tone}` : '';
|
|
90
|
+
const toneStyle = tone !== undefined && typeof tone !== 'string'
|
|
91
|
+
? { '--seg-thumb': tone.bg, '--seg-on': tone.fg }
|
|
92
|
+
: undefined;
|
|
84
93
|
return h('div', {
|
|
85
94
|
role: 'group',
|
|
86
95
|
'aria-label': props.label,
|
|
87
96
|
id: props.id,
|
|
88
97
|
ref: rootRef,
|
|
89
98
|
// 结构一套、皮肤只在 controls-css 里;此处只拼「轴」类名,不写任何颜色 / 尺寸字面值。
|
|
90
|
-
className: `dshpc-seg dshpc-seg--${size}${sliding ? ' dshpc-seg--slide' : ''}${props.block === true ? ' dshpc-seg--block' : ''}${props.bordered === true ? ' dshpc-seg--bordered' : ''}${props.className !== undefined ? ` ${props.className}` : ''}`,
|
|
91
|
-
style: props.style,
|
|
99
|
+
className: `dshpc-seg dshpc-seg--${size}${sliding ? ' dshpc-seg--slide' : ''}${props.block === true ? ' dshpc-seg--block' : ''}${props.bordered === true ? ' dshpc-seg--bordered' : ''}${toneClass}${props.className !== undefined ? ` ${props.className}` : ''}`,
|
|
100
|
+
style: toneStyle === undefined ? props.style : { ...toneStyle, ...props.style },
|
|
92
101
|
}, [
|
|
93
102
|
sliding && thumb !== null
|
|
94
103
|
? h('span', {
|
package/dist/ui/Segmented.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Segmented.js","sourceRoot":"","sources":["../../src/ui/Segmented.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"Segmented.js","sourceRoot":"","sources":["../../src/ui/Segmented.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const DATETIME_CSS = "/* \u65E5\u671F\u65F6\u95F4\u9009\u62E9\u5668\uFF08DateTimePicker\uFF09\u3002\u7C7B\u540D dshpc-dt-*\uFF1B\u914D\u8272\u53EA\u5403 token\uFF0C\u660E\u6697\u968F token \u5207\u6362\u3002\n \u7ED3\u6784\uFF1A\u89E6\u53D1\u5668\uFF08range = \u4E00\u4E2A\u6574\u6761\uFF1A\u4E24\u4E2A\u65E5\u671F\u533A + \u6837\u5F0F\u753B\u7684\u7070\u9694\u6761\uFF1Bsingle = \u5355\u65E5\u671F\uFF09\u2192 \u6D6E\u5C42\n \uFF08\u4E24\u4E2A\u72EC\u7ACB\u7AEF\u6846 + \u4E24\u5757\u72EC\u7ACB\u65E5\u5386 + \u5E95\u90E8\u52A8\u4F5C\uFF09\u3002\n \u6D6E\u5C42\u884C\u4E3A\u4E0E Picker \u4E00\u81F4\uFF1Aportal \u5230 body\u3001\u8D34\u8FB9\u7FFB\u8F6C\u3001\u70B9\u5916\u5173\u95ED\u3001\u65E0\u906E\u7F69\u3002 */\n.dshpc-dt{position:relative;display:inline-block;font-size:13px;line-height:20px}\n.dshpc-dt__trigger{\n display:inline-flex;align-items:center;justify-content:space-between;gap:6px;\n max-width:100%;height:var(--dshpc-control-h-md);padding:0 8px;\n color:var(--dshpc-fg);background:var(--dshpc-surface-1);\n border:1px solid var(--dshpc-border);border-radius:var(--dshpc-radius-md);cursor:pointer;\n}\n.dshpc-dt__trigger--sm{height:var(--dshpc-control-h-sm);font-size:12px}\n.dshpc-dt__trigger--lg{height:var(--dshpc-control-h-lg)}\n.dshpc-dt__trigger:disabled{color:var(--dshpc-fg-dim);cursor:not-allowed;opacity:.7}\n/* \u7126\u70B9\u4E0E\u57FA\u7840 Input \u5B8C\u5168\u540C\u6B3E\uFF08\u70B9\u51FB\u5373\u84DD\u63CF\u8FB9 + 1px \u5149\u73AF\uFF09\u3002 */\n.dshpc-dt__trigger:focus{border-color:var(--dshpc-focus);box-shadow:0 0 0 1px var(--dshpc-focus)}\n.dshpc-dt__trigger-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font-variant-numeric:tabular-nums}\n.dshpc-dt__trigger-label--empty{color:var(--dshpc-fg-dim)}\n.dshpc-dt__cal{flex:none;color:var(--dshpc-fg-3)}\n/* range \u89E6\u53D1\u5668\uFF1A\u4E00\u4E2A\u6574\u6761\u91CC\u4E24\u4E2A\u65E5\u671F\u533A + \u6837\u5F0F\u753B\u51FA\u6765\u7684\u7070\u9694\u6761\uFF08\u5DE6\u53F3\u4E24\u6761\u7AD6\u8FB9\uFF09\uFF0C\u70B9\u6574\u6761\u90FD\u5C55\u5F00\u3002 */\n/* \u7EC4\u6491\u6EE1\u89E6\u53D1\u5668\u5185\u5BB9\u9AD8\u5EA6\uFF0C\u9694\u6761\u624D\u80FD\u4E0A\u4E0B\u9876\u5230 border\u3002 */\n.dshpc-dt__pair-group{flex:1 1 auto;min-width:0;align-self:stretch;display:flex;align-items:center;gap:8px}\n/* \u4E24\u4E2A\u65E5\u671F\u533A\u5E73\u5206\uFF08flex:1 1 0\uFF09\uFF1A\u5F00\u59CB / \u7ED3\u675F\u6C38\u8FDC\u4E00\u6837\u5BBD\uFF0C\u4E0D\u968F\u5185\u5BB9\u504F\u8892\u3002 */\n.dshpc-dt__pair-date{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}\n.dshpc-dt__pair-date--empty{color:var(--dshpc-fg-dim)}\n/* \u9694\u6761\uFF1A\u4E0A\u4E0B\u9876\u5230\u89E6\u53D1\u5668 border\uFF08\u4E0E\u8FB9\u6846\u8FDE\u8D77\u6765\uFF09\uFF0C\u4E2D\u95F4\u9694\u51FA\u4E00\u5757\uFF1B\u5757\u91CC\u653E\u300C\u5230\u300D\u7684\u7B26\u53F7\uFF08-\uFF0C\u7528\u6237 2026-10-24 \u62CD\u677F\uFF09\u3002 */\n.dshpc-dt__pair-sep{\n flex:none;align-self:stretch;width:22px;margin:0;\n display:inline-flex;align-items:center;justify-content:center;\n background:var(--dshpc-surface-sunken);\n border-left:1px solid var(--dshpc-border);border-right:1px solid var(--dshpc-border);\n color:var(--dshpc-fg-3);font-size:12px;line-height:1;\n}\n/* \u9ED8\u8BA4\u5BBD\uFF1A**\u56FA\u5B9A**\uFF08\u9009\u4E2D\u524D\u540E\u4E0D\u53D8\uFF09\uFF0C\u6570\u503C\u5BF9\u7167\u53C2\u8003\u56FE\u5B9E\u6D4B\uFF082x \u5C4F\uFF0C\u6362\u7B97 CSS px\uFF09\u540E\n \u7EDF\u4E00 -6px\uFF08\u7528\u6237 2026-10-24\uFF1A\u5B9E\u6D4B\u503C\u7559\u5F97\u504F\u591A\uFF09\uFF1A\n \u5355\u503C day 128 / \u65F6\u00B7\u5206 153.2 / \u79D2 174.8\uFF1B\u533A\u95F4 day 269 / \u5206 341.4 / \u79D2 377.6\u3002\n ch = \u5B57\u4F53\u91CC \"0\" \u7684\u5BBD\uFF08\u65E5\u671F tabular-nums \u7B49\u5BBD\uFF09\u21D2 \u5199\u6210 Nch + \u5E38\u6570\uFF1B\u5E38\u6570\u540C\u65F6\u515C\u4F4F\n \u9ED8\u8BA4\u5360\u4F4D\u300C\u8BF7\u9009\u62E9\u65E5\u671F\u65F6\u95F4\u300D\uFF087 \u6C49\u5B57\uFF09\u4E0D\u7701\u7565\u3002\u8C03\u7528\u65B9\u8981\u53E6\u7ED9\u5BBD\uFF1AclassName \u4F20 width\u3002 */\n.dshpc-dt__trigger--w-day{width:calc(10ch + 56px)}\n.dshpc-dt__trigger--w-minute{width:calc(16ch + 38px)}\n.dshpc-dt__trigger--w-second{width:calc(19ch + 38px)}\n.dshpc-dt__trigger--wr-day{width:calc(20ch + 125px)}\n.dshpc-dt__trigger--wr-minute{width:calc(32ch + 111px)}\n.dshpc-dt__trigger--wr-second{width:calc(38ch + 104px)}\n\n.dshpc-dt__pop{\n z-index:60;padding:10px;user-select:none;\n font-size:13px;line-height:20px;\n background:var(--dshpc-surface-menu);border:1px solid var(--dshpc-border);\n border-radius:var(--dshpc-radius-md);box-shadow:0 8px 24px rgba(15,23,42,.12);\n}\n/* \u4E24\u4E2A\u72EC\u7ACB\u7AEF\u6846\uFF08range\uFF09\uFF1A\u70B9\u54EA\u4E2A\u54EA\u4E2A\u6210\u4E3A\u5F53\u524D\u7F16\u8F91\u7AEF\uFF0C\u4E92\u4E0D\u8054\u52A8\u3001\u53EA\u662F\u6392\u5728\u4E00\u8D77\u3002 */\n.dshpc-dt__ends{display:flex;gap:6px;margin-bottom:8px}\n.dshpc-dt__end{\n flex:1 1 0;min-width:0;display:flex;align-items:center;gap:6px;padding:4px 8px;\n text-align:left;background:var(--dshpc-surface-1);\n border:1px solid var(--dshpc-border-faint);border-radius:var(--dshpc-radius-sm);cursor:pointer;\n}\n.dshpc-dt__end--active{border-color:var(--dshpc-business);background:var(--dshpc-open-bg)}\n.dshpc-dt__end:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:1px}\n.dshpc-dt__end-label{flex:none;font-size:11px;line-height:16px;color:var(--dshpc-fg-3);white-space:nowrap}\n.dshpc-dt__end-value{font-size:12px;line-height:18px;color:var(--dshpc-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}\n.dshpc-dt__end-value--empty{color:var(--dshpc-fg-dim)}\n\n.dshpc-dt__nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}\n.dshpc-dt__nav-group{display:flex;gap:2px}\n.dshpc-dt__nav-btn{\n display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;\n color:var(--dshpc-fg-2);background:none;border:0;border-radius:var(--dshpc-radius-sm);cursor:pointer;\n}\n.dshpc-dt__nav-btn:hover{background:var(--dshpc-surface-sunken);color:var(--dshpc-fg)}\n.dshpc-dt__nav-btn:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:-1px}\n.dshpc-dt__caption{font-size:13px;font-weight:600;color:var(--dshpc-fg);white-space:nowrap}\n\n.dshpc-dt__grid{display:grid;grid-template-columns:repeat(7,30px);gap:2px}\n.dshpc-dt__wd{height:20px;font-size:11px;line-height:20px;color:var(--dshpc-fg-3);text-align:center}\n.dshpc-dt__cell{\n height:26px;padding:0;font-size:12px;font-variant-numeric:tabular-nums;\n color:var(--dshpc-fg);background:none;border:0;border-radius:var(--dshpc-radius-sm);cursor:pointer;\n}\n.dshpc-dt__cell:hover{background:var(--dshpc-surface-sunken)}\n.dshpc-dt__cell:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:-1px}\n.dshpc-dt__cell--out{color:var(--dshpc-fg-dim)}\n.dshpc-dt__cell--today{color:var(--dshpc-business);font-weight:600}\n/* \u8D77 / \u6B62\u7AEF\uFF1A\u54C1\u724C\u84DD\u5B9E\u9762\u53CD\u767D\uFF08\u4E0E Segmented weekday \u9009\u4E2D\u540C\u53E3\u5F84\uFF09\u3002 */\n.dshpc-dt__cell--sel{background:var(--dshpc-business);color:var(--dshpc-
|
|
1
|
+
export declare const DATETIME_CSS = "/* \u65E5\u671F\u65F6\u95F4\u9009\u62E9\u5668\uFF08DateTimePicker\uFF09\u3002\u7C7B\u540D dshpc-dt-*\uFF1B\u914D\u8272\u53EA\u5403 token\uFF0C\u660E\u6697\u968F token \u5207\u6362\u3002\n \u7ED3\u6784\uFF1A\u89E6\u53D1\u5668\uFF08range = \u4E00\u4E2A\u6574\u6761\uFF1A\u4E24\u4E2A\u65E5\u671F\u533A + \u6837\u5F0F\u753B\u7684\u7070\u9694\u6761\uFF1Bsingle = \u5355\u65E5\u671F\uFF09\u2192 \u6D6E\u5C42\n \uFF08\u4E24\u4E2A\u72EC\u7ACB\u7AEF\u6846 + \u4E24\u5757\u72EC\u7ACB\u65E5\u5386 + \u5E95\u90E8\u52A8\u4F5C\uFF09\u3002\n \u6D6E\u5C42\u884C\u4E3A\u4E0E Picker \u4E00\u81F4\uFF1Aportal \u5230 body\u3001\u8D34\u8FB9\u7FFB\u8F6C\u3001\u70B9\u5916\u5173\u95ED\u3001\u65E0\u906E\u7F69\u3002 */\n.dshpc-dt{position:relative;display:inline-block;font-size:13px;line-height:20px}\n.dshpc-dt__trigger{\n display:inline-flex;align-items:center;justify-content:space-between;gap:6px;\n max-width:100%;height:var(--dshpc-control-h-md);padding:0 8px;\n color:var(--dshpc-fg);background:var(--dshpc-surface-1);\n border:1px solid var(--dshpc-border);border-radius:var(--dshpc-radius-md);cursor:pointer;\n}\n.dshpc-dt__trigger--sm{height:var(--dshpc-control-h-sm);font-size:12px}\n.dshpc-dt__trigger--lg{height:var(--dshpc-control-h-lg)}\n.dshpc-dt__trigger:disabled{color:var(--dshpc-fg-dim);cursor:not-allowed;opacity:.7}\n/* \u7126\u70B9\u4E0E\u57FA\u7840 Input \u5B8C\u5168\u540C\u6B3E\uFF08\u70B9\u51FB\u5373\u84DD\u63CF\u8FB9 + 1px \u5149\u73AF\uFF09\u3002 */\n.dshpc-dt__trigger:focus{border-color:var(--dshpc-focus);box-shadow:0 0 0 1px var(--dshpc-focus)}\n.dshpc-dt__trigger-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font-variant-numeric:tabular-nums}\n.dshpc-dt__trigger-label--empty{color:var(--dshpc-fg-dim)}\n.dshpc-dt__cal{flex:none;color:var(--dshpc-fg-3)}\n/* range \u89E6\u53D1\u5668\uFF1A\u4E00\u4E2A\u6574\u6761\u91CC\u4E24\u4E2A\u65E5\u671F\u533A + \u6837\u5F0F\u753B\u51FA\u6765\u7684\u7070\u9694\u6761\uFF08\u5DE6\u53F3\u4E24\u6761\u7AD6\u8FB9\uFF09\uFF0C\u70B9\u6574\u6761\u90FD\u5C55\u5F00\u3002 */\n/* \u7EC4\u6491\u6EE1\u89E6\u53D1\u5668\u5185\u5BB9\u9AD8\u5EA6\uFF0C\u9694\u6761\u624D\u80FD\u4E0A\u4E0B\u9876\u5230 border\u3002 */\n.dshpc-dt__pair-group{flex:1 1 auto;min-width:0;align-self:stretch;display:flex;align-items:center;gap:8px}\n/* \u4E24\u4E2A\u65E5\u671F\u533A\u5E73\u5206\uFF08flex:1 1 0\uFF09\uFF1A\u5F00\u59CB / \u7ED3\u675F\u6C38\u8FDC\u4E00\u6837\u5BBD\uFF0C\u4E0D\u968F\u5185\u5BB9\u504F\u8892\u3002 */\n.dshpc-dt__pair-date{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}\n.dshpc-dt__pair-date--empty{color:var(--dshpc-fg-dim)}\n/* \u9694\u6761\uFF1A\u4E0A\u4E0B\u9876\u5230\u89E6\u53D1\u5668 border\uFF08\u4E0E\u8FB9\u6846\u8FDE\u8D77\u6765\uFF09\uFF0C\u4E2D\u95F4\u9694\u51FA\u4E00\u5757\uFF1B\u5757\u91CC\u653E\u300C\u5230\u300D\u7684\u7B26\u53F7\uFF08-\uFF0C\u7528\u6237 2026-10-24 \u62CD\u677F\uFF09\u3002 */\n.dshpc-dt__pair-sep{\n flex:none;align-self:stretch;width:22px;margin:0;\n display:inline-flex;align-items:center;justify-content:center;\n background:var(--dshpc-surface-sunken);\n border-left:1px solid var(--dshpc-border);border-right:1px solid var(--dshpc-border);\n color:var(--dshpc-fg-3);font-size:12px;line-height:1;\n}\n/* \u9ED8\u8BA4\u5BBD\uFF1A**\u56FA\u5B9A**\uFF08\u9009\u4E2D\u524D\u540E\u4E0D\u53D8\uFF09\uFF0C\u6570\u503C\u5BF9\u7167\u53C2\u8003\u56FE\u5B9E\u6D4B\uFF082x \u5C4F\uFF0C\u6362\u7B97 CSS px\uFF09\u540E\n \u7EDF\u4E00 -6px\uFF08\u7528\u6237 2026-10-24\uFF1A\u5B9E\u6D4B\u503C\u7559\u5F97\u504F\u591A\uFF09\uFF1A\n \u5355\u503C day 128 / \u65F6\u00B7\u5206 153.2 / \u79D2 174.8\uFF1B\u533A\u95F4 day 269 / \u5206 341.4 / \u79D2 377.6\u3002\n ch = \u5B57\u4F53\u91CC \"0\" \u7684\u5BBD\uFF08\u65E5\u671F tabular-nums \u7B49\u5BBD\uFF09\u21D2 \u5199\u6210 Nch + \u5E38\u6570\uFF1B\u5E38\u6570\u540C\u65F6\u515C\u4F4F\n \u9ED8\u8BA4\u5360\u4F4D\u300C\u8BF7\u9009\u62E9\u65E5\u671F\u65F6\u95F4\u300D\uFF087 \u6C49\u5B57\uFF09\u4E0D\u7701\u7565\u3002\u8C03\u7528\u65B9\u8981\u53E6\u7ED9\u5BBD\uFF1AclassName \u4F20 width\u3002 */\n.dshpc-dt__trigger--w-day{width:calc(10ch + 56px)}\n.dshpc-dt__trigger--w-minute{width:calc(16ch + 38px)}\n.dshpc-dt__trigger--w-second{width:calc(19ch + 38px)}\n.dshpc-dt__trigger--wr-day{width:calc(20ch + 125px)}\n.dshpc-dt__trigger--wr-minute{width:calc(32ch + 111px)}\n.dshpc-dt__trigger--wr-second{width:calc(38ch + 104px)}\n\n.dshpc-dt__pop{\n z-index:60;padding:10px;user-select:none;\n font-size:13px;line-height:20px;\n background:var(--dshpc-surface-menu);border:1px solid var(--dshpc-border);\n border-radius:var(--dshpc-radius-md);box-shadow:0 8px 24px rgba(15,23,42,.12);\n}\n/* \u4E24\u4E2A\u72EC\u7ACB\u7AEF\u6846\uFF08range\uFF09\uFF1A\u70B9\u54EA\u4E2A\u54EA\u4E2A\u6210\u4E3A\u5F53\u524D\u7F16\u8F91\u7AEF\uFF0C\u4E92\u4E0D\u8054\u52A8\u3001\u53EA\u662F\u6392\u5728\u4E00\u8D77\u3002 */\n.dshpc-dt__ends{display:flex;gap:6px;margin-bottom:8px}\n.dshpc-dt__end{\n flex:1 1 0;min-width:0;display:flex;align-items:center;gap:6px;padding:4px 8px;\n text-align:left;background:var(--dshpc-surface-1);\n border:1px solid var(--dshpc-border-faint);border-radius:var(--dshpc-radius-sm);cursor:pointer;\n}\n.dshpc-dt__end--active{border-color:var(--dshpc-business);background:var(--dshpc-open-bg)}\n.dshpc-dt__end:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:1px}\n.dshpc-dt__end-label{flex:none;font-size:11px;line-height:16px;color:var(--dshpc-fg-3);white-space:nowrap}\n.dshpc-dt__end-value{font-size:12px;line-height:18px;color:var(--dshpc-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}\n.dshpc-dt__end-value--empty{color:var(--dshpc-fg-dim)}\n\n.dshpc-dt__nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}\n.dshpc-dt__nav-group{display:flex;gap:2px}\n.dshpc-dt__nav-btn{\n display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;\n color:var(--dshpc-fg-2);background:none;border:0;border-radius:var(--dshpc-radius-sm);cursor:pointer;\n}\n.dshpc-dt__nav-btn:hover{background:var(--dshpc-surface-sunken);color:var(--dshpc-fg)}\n.dshpc-dt__nav-btn:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:-1px}\n.dshpc-dt__caption{font-size:13px;font-weight:600;color:var(--dshpc-fg);white-space:nowrap}\n\n.dshpc-dt__grid{display:grid;grid-template-columns:repeat(7,30px);gap:2px}\n.dshpc-dt__wd{height:20px;font-size:11px;line-height:20px;color:var(--dshpc-fg-3);text-align:center}\n.dshpc-dt__cell{\n height:26px;padding:0;font-size:12px;font-variant-numeric:tabular-nums;\n color:var(--dshpc-fg);background:none;border:0;border-radius:var(--dshpc-radius-sm);cursor:pointer;\n}\n.dshpc-dt__cell:hover{background:var(--dshpc-surface-sunken)}\n.dshpc-dt__cell:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:-1px}\n.dshpc-dt__cell--out{color:var(--dshpc-fg-dim)}\n.dshpc-dt__cell--today{color:var(--dshpc-business);font-weight:600}\n/* \u8D77 / \u6B62\u7AEF\uFF1A\u54C1\u724C\u84DD\u5B9E\u9762\u53CD\u767D\uFF08\u4E0E Segmented weekday \u9009\u4E2D\u540C\u53E3\u5F84\uFF09\u3002\n \u26A0\uFE0F \u5B57\u8272\u7528\u5E38\u91CF\u767D --dshpc-on-signal\uFF0C\u4E0D\u7528 --dshpc-fg-inverse\uFF1A\u540E\u8005\u8DDF\u5BBF\u4E3B label-primary-foreground\uFF0C\n \u6697\u8272\u4E3B\u9898\u4E0B\u662F\u8FD1\u9ED1 \u21D2 \u84DD\u5E95\u9ED1\u5B57\uFF08\u4E0E Segmented 2026-10-29 \u540C\u4E00\u4E8B\u6545\uFF09\u3002 */\n.dshpc-dt__cell--sel{background:var(--dshpc-business);color:var(--dshpc-on-signal);font-weight:600}\n.dshpc-dt__cell--sel:hover{background:var(--dshpc-business-hover)}\n\n/* \u4E24\u5757\u65E5\u5386\u9762\u677F\uFF08range\uFF1A\u5DE6\u5F00\u59CB\u3001\u53F3\u7ED3\u675F\uFF0C\u5404\u9009\u5404\u7684\uFF09\u3002 */\n.dshpc-dt__panels{display:flex;gap:14px;align-items:flex-start}\n.dshpc-dt__panel{display:flex;flex-direction:column;gap:6px}\n\n.dshpc-dt__time{display:flex;align-items:flex-end;justify-content:center;gap:4px;margin-top:2px;padding-top:8px;border-top:1px solid var(--dshpc-border-faint)}\n.dshpc-dt__unit{display:flex;flex-direction:column;align-items:center;gap:2px}\n.dshpc-dt__unit-label{font-size:10px;line-height:14px;color:var(--dshpc-fg-3)}\n.dshpc-dt__step-btn{\n display:inline-flex;align-items:center;justify-content:center;width:34px;height:14px;padding:0;\n color:var(--dshpc-fg-2);background:none;border:0;border-radius:var(--dshpc-radius-sm);cursor:pointer;\n}\n.dshpc-dt__step-btn:hover{background:var(--dshpc-surface-sunken);color:var(--dshpc-fg)}\n.dshpc-dt__step-btn:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:-1px}\n.dshpc-dt__step-val{\n width:34px;height:24px;padding:0;box-sizing:border-box;text-align:center;\n font-size:13px;font-variant-numeric:tabular-nums;color:var(--dshpc-fg);\n background:var(--dshpc-surface-sunken);border:1px solid var(--dshpc-border-faint);\n border-radius:var(--dshpc-radius-sm);outline:none;\n}\n.dshpc-dt__step-val:focus{border-color:var(--dshpc-focus);box-shadow:0 0 0 1px var(--dshpc-focus)}\n.dshpc-dt__step-val:disabled{color:var(--dshpc-fg-dim);cursor:not-allowed}\n.dshpc-dt__sep{padding-bottom:5px;color:var(--dshpc-fg-3);font-size:12px}\n\n.dshpc-dt__foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;padding-top:8px;border-top:1px solid var(--dshpc-border-faint)}\n.dshpc-dt__foot-side{display:flex;align-items:center;gap:6px}\n.dshpc-dt__warn{font-size:11px;color:var(--dshpc-warning-label);white-space:nowrap}\n";
|
|
2
2
|
//# sourceMappingURL=datetime-css.generated.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"datetime-css.generated.d.ts","sourceRoot":"","sources":["../../../src/ui/controls/datetime-css.generated.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,
|
|
1
|
+
{"version":3,"file":"datetime-css.generated.d.ts","sourceRoot":"","sources":["../../../src/ui/controls/datetime-css.generated.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,u6SAAgmO,CAAA"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
// ⚠️ 生成物,勿手改。真源 = src/ui/controls/datetime.css
|
|
2
2
|
// 由 scripts/gen-css.mjs 生成(`pnpm run gen:css`):改样式请改那个 .css 文件后重新生成。
|
|
3
|
-
export const DATETIME_CSS = "/* 日期时间选择器(DateTimePicker)。类名 dshpc-dt-*;配色只吃 token,明暗随 token 切换。\n 结构:触发器(range = 一个整条:两个日期区 + 样式画的灰隔条;single = 单日期)→ 浮层\n (两个独立端框 + 两块独立日历 + 底部动作)。\n 浮层行为与 Picker 一致:portal 到 body、贴边翻转、点外关闭、无遮罩。 */\n.dshpc-dt{position:relative;display:inline-block;font-size:13px;line-height:20px}\n.dshpc-dt__trigger{\n display:inline-flex;align-items:center;justify-content:space-between;gap:6px;\n max-width:100%;height:var(--dshpc-control-h-md);padding:0 8px;\n color:var(--dshpc-fg);background:var(--dshpc-surface-1);\n border:1px solid var(--dshpc-border);border-radius:var(--dshpc-radius-md);cursor:pointer;\n}\n.dshpc-dt__trigger--sm{height:var(--dshpc-control-h-sm);font-size:12px}\n.dshpc-dt__trigger--lg{height:var(--dshpc-control-h-lg)}\n.dshpc-dt__trigger:disabled{color:var(--dshpc-fg-dim);cursor:not-allowed;opacity:.7}\n/* 焦点与基础 Input 完全同款(点击即蓝描边 + 1px 光环)。 */\n.dshpc-dt__trigger:focus{border-color:var(--dshpc-focus);box-shadow:0 0 0 1px var(--dshpc-focus)}\n.dshpc-dt__trigger-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font-variant-numeric:tabular-nums}\n.dshpc-dt__trigger-label--empty{color:var(--dshpc-fg-dim)}\n.dshpc-dt__cal{flex:none;color:var(--dshpc-fg-3)}\n/* range 触发器:一个整条里两个日期区 + 样式画出来的灰隔条(左右两条竖边),点整条都展开。 */\n/* 组撑满触发器内容高度,隔条才能上下顶到 border。 */\n.dshpc-dt__pair-group{flex:1 1 auto;min-width:0;align-self:stretch;display:flex;align-items:center;gap:8px}\n/* 两个日期区平分(flex:1 1 0):开始 / 结束永远一样宽,不随内容偏袒。 */\n.dshpc-dt__pair-date{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}\n.dshpc-dt__pair-date--empty{color:var(--dshpc-fg-dim)}\n/* 隔条:上下顶到触发器 border(与边框连起来),中间隔出一块;块里放「到」的符号(-,用户 2026-10-24 拍板)。 */\n.dshpc-dt__pair-sep{\n flex:none;align-self:stretch;width:22px;margin:0;\n display:inline-flex;align-items:center;justify-content:center;\n background:var(--dshpc-surface-sunken);\n border-left:1px solid var(--dshpc-border);border-right:1px solid var(--dshpc-border);\n color:var(--dshpc-fg-3);font-size:12px;line-height:1;\n}\n/* 默认宽:**固定**(选中前后不变),数值对照参考图实测(2x 屏,换算 CSS px)后\n 统一 -6px(用户 2026-10-24:实测值留得偏多):\n 单值 day 128 / 时·分 153.2 / 秒 174.8;区间 day 269 / 分 341.4 / 秒 377.6。\n ch = 字体里 \"0\" 的宽(日期 tabular-nums 等宽)⇒ 写成 Nch + 常数;常数同时兜住\n 默认占位「请选择日期时间」(7 汉字)不省略。调用方要另给宽:className 传 width。 */\n.dshpc-dt__trigger--w-day{width:calc(10ch + 56px)}\n.dshpc-dt__trigger--w-minute{width:calc(16ch + 38px)}\n.dshpc-dt__trigger--w-second{width:calc(19ch + 38px)}\n.dshpc-dt__trigger--wr-day{width:calc(20ch + 125px)}\n.dshpc-dt__trigger--wr-minute{width:calc(32ch + 111px)}\n.dshpc-dt__trigger--wr-second{width:calc(38ch + 104px)}\n\n.dshpc-dt__pop{\n z-index:60;padding:10px;user-select:none;\n font-size:13px;line-height:20px;\n background:var(--dshpc-surface-menu);border:1px solid var(--dshpc-border);\n border-radius:var(--dshpc-radius-md);box-shadow:0 8px 24px rgba(15,23,42,.12);\n}\n/* 两个独立端框(range):点哪个哪个成为当前编辑端,互不联动、只是排在一起。 */\n.dshpc-dt__ends{display:flex;gap:6px;margin-bottom:8px}\n.dshpc-dt__end{\n flex:1 1 0;min-width:0;display:flex;align-items:center;gap:6px;padding:4px 8px;\n text-align:left;background:var(--dshpc-surface-1);\n border:1px solid var(--dshpc-border-faint);border-radius:var(--dshpc-radius-sm);cursor:pointer;\n}\n.dshpc-dt__end--active{border-color:var(--dshpc-business);background:var(--dshpc-open-bg)}\n.dshpc-dt__end:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:1px}\n.dshpc-dt__end-label{flex:none;font-size:11px;line-height:16px;color:var(--dshpc-fg-3);white-space:nowrap}\n.dshpc-dt__end-value{font-size:12px;line-height:18px;color:var(--dshpc-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}\n.dshpc-dt__end-value--empty{color:var(--dshpc-fg-dim)}\n\n.dshpc-dt__nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}\n.dshpc-dt__nav-group{display:flex;gap:2px}\n.dshpc-dt__nav-btn{\n display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;\n color:var(--dshpc-fg-2);background:none;border:0;border-radius:var(--dshpc-radius-sm);cursor:pointer;\n}\n.dshpc-dt__nav-btn:hover{background:var(--dshpc-surface-sunken);color:var(--dshpc-fg)}\n.dshpc-dt__nav-btn:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:-1px}\n.dshpc-dt__caption{font-size:13px;font-weight:600;color:var(--dshpc-fg);white-space:nowrap}\n\n.dshpc-dt__grid{display:grid;grid-template-columns:repeat(7,30px);gap:2px}\n.dshpc-dt__wd{height:20px;font-size:11px;line-height:20px;color:var(--dshpc-fg-3);text-align:center}\n.dshpc-dt__cell{\n height:26px;padding:0;font-size:12px;font-variant-numeric:tabular-nums;\n color:var(--dshpc-fg);background:none;border:0;border-radius:var(--dshpc-radius-sm);cursor:pointer;\n}\n.dshpc-dt__cell:hover{background:var(--dshpc-surface-sunken)}\n.dshpc-dt__cell:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:-1px}\n.dshpc-dt__cell--out{color:var(--dshpc-fg-dim)}\n.dshpc-dt__cell--today{color:var(--dshpc-business);font-weight:600}\n/* 起 / 止端:品牌蓝实面反白(与 Segmented weekday
|
|
3
|
+
export const DATETIME_CSS = "/* 日期时间选择器(DateTimePicker)。类名 dshpc-dt-*;配色只吃 token,明暗随 token 切换。\n 结构:触发器(range = 一个整条:两个日期区 + 样式画的灰隔条;single = 单日期)→ 浮层\n (两个独立端框 + 两块独立日历 + 底部动作)。\n 浮层行为与 Picker 一致:portal 到 body、贴边翻转、点外关闭、无遮罩。 */\n.dshpc-dt{position:relative;display:inline-block;font-size:13px;line-height:20px}\n.dshpc-dt__trigger{\n display:inline-flex;align-items:center;justify-content:space-between;gap:6px;\n max-width:100%;height:var(--dshpc-control-h-md);padding:0 8px;\n color:var(--dshpc-fg);background:var(--dshpc-surface-1);\n border:1px solid var(--dshpc-border);border-radius:var(--dshpc-radius-md);cursor:pointer;\n}\n.dshpc-dt__trigger--sm{height:var(--dshpc-control-h-sm);font-size:12px}\n.dshpc-dt__trigger--lg{height:var(--dshpc-control-h-lg)}\n.dshpc-dt__trigger:disabled{color:var(--dshpc-fg-dim);cursor:not-allowed;opacity:.7}\n/* 焦点与基础 Input 完全同款(点击即蓝描边 + 1px 光环)。 */\n.dshpc-dt__trigger:focus{border-color:var(--dshpc-focus);box-shadow:0 0 0 1px var(--dshpc-focus)}\n.dshpc-dt__trigger-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font-variant-numeric:tabular-nums}\n.dshpc-dt__trigger-label--empty{color:var(--dshpc-fg-dim)}\n.dshpc-dt__cal{flex:none;color:var(--dshpc-fg-3)}\n/* range 触发器:一个整条里两个日期区 + 样式画出来的灰隔条(左右两条竖边),点整条都展开。 */\n/* 组撑满触发器内容高度,隔条才能上下顶到 border。 */\n.dshpc-dt__pair-group{flex:1 1 auto;min-width:0;align-self:stretch;display:flex;align-items:center;gap:8px}\n/* 两个日期区平分(flex:1 1 0):开始 / 结束永远一样宽,不随内容偏袒。 */\n.dshpc-dt__pair-date{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}\n.dshpc-dt__pair-date--empty{color:var(--dshpc-fg-dim)}\n/* 隔条:上下顶到触发器 border(与边框连起来),中间隔出一块;块里放「到」的符号(-,用户 2026-10-24 拍板)。 */\n.dshpc-dt__pair-sep{\n flex:none;align-self:stretch;width:22px;margin:0;\n display:inline-flex;align-items:center;justify-content:center;\n background:var(--dshpc-surface-sunken);\n border-left:1px solid var(--dshpc-border);border-right:1px solid var(--dshpc-border);\n color:var(--dshpc-fg-3);font-size:12px;line-height:1;\n}\n/* 默认宽:**固定**(选中前后不变),数值对照参考图实测(2x 屏,换算 CSS px)后\n 统一 -6px(用户 2026-10-24:实测值留得偏多):\n 单值 day 128 / 时·分 153.2 / 秒 174.8;区间 day 269 / 分 341.4 / 秒 377.6。\n ch = 字体里 \"0\" 的宽(日期 tabular-nums 等宽)⇒ 写成 Nch + 常数;常数同时兜住\n 默认占位「请选择日期时间」(7 汉字)不省略。调用方要另给宽:className 传 width。 */\n.dshpc-dt__trigger--w-day{width:calc(10ch + 56px)}\n.dshpc-dt__trigger--w-minute{width:calc(16ch + 38px)}\n.dshpc-dt__trigger--w-second{width:calc(19ch + 38px)}\n.dshpc-dt__trigger--wr-day{width:calc(20ch + 125px)}\n.dshpc-dt__trigger--wr-minute{width:calc(32ch + 111px)}\n.dshpc-dt__trigger--wr-second{width:calc(38ch + 104px)}\n\n.dshpc-dt__pop{\n z-index:60;padding:10px;user-select:none;\n font-size:13px;line-height:20px;\n background:var(--dshpc-surface-menu);border:1px solid var(--dshpc-border);\n border-radius:var(--dshpc-radius-md);box-shadow:0 8px 24px rgba(15,23,42,.12);\n}\n/* 两个独立端框(range):点哪个哪个成为当前编辑端,互不联动、只是排在一起。 */\n.dshpc-dt__ends{display:flex;gap:6px;margin-bottom:8px}\n.dshpc-dt__end{\n flex:1 1 0;min-width:0;display:flex;align-items:center;gap:6px;padding:4px 8px;\n text-align:left;background:var(--dshpc-surface-1);\n border:1px solid var(--dshpc-border-faint);border-radius:var(--dshpc-radius-sm);cursor:pointer;\n}\n.dshpc-dt__end--active{border-color:var(--dshpc-business);background:var(--dshpc-open-bg)}\n.dshpc-dt__end:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:1px}\n.dshpc-dt__end-label{flex:none;font-size:11px;line-height:16px;color:var(--dshpc-fg-3);white-space:nowrap}\n.dshpc-dt__end-value{font-size:12px;line-height:18px;color:var(--dshpc-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}\n.dshpc-dt__end-value--empty{color:var(--dshpc-fg-dim)}\n\n.dshpc-dt__nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}\n.dshpc-dt__nav-group{display:flex;gap:2px}\n.dshpc-dt__nav-btn{\n display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;\n color:var(--dshpc-fg-2);background:none;border:0;border-radius:var(--dshpc-radius-sm);cursor:pointer;\n}\n.dshpc-dt__nav-btn:hover{background:var(--dshpc-surface-sunken);color:var(--dshpc-fg)}\n.dshpc-dt__nav-btn:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:-1px}\n.dshpc-dt__caption{font-size:13px;font-weight:600;color:var(--dshpc-fg);white-space:nowrap}\n\n.dshpc-dt__grid{display:grid;grid-template-columns:repeat(7,30px);gap:2px}\n.dshpc-dt__wd{height:20px;font-size:11px;line-height:20px;color:var(--dshpc-fg-3);text-align:center}\n.dshpc-dt__cell{\n height:26px;padding:0;font-size:12px;font-variant-numeric:tabular-nums;\n color:var(--dshpc-fg);background:none;border:0;border-radius:var(--dshpc-radius-sm);cursor:pointer;\n}\n.dshpc-dt__cell:hover{background:var(--dshpc-surface-sunken)}\n.dshpc-dt__cell:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:-1px}\n.dshpc-dt__cell--out{color:var(--dshpc-fg-dim)}\n.dshpc-dt__cell--today{color:var(--dshpc-business);font-weight:600}\n/* 起 / 止端:品牌蓝实面反白(与 Segmented weekday 选中同口径)。\n ⚠️ 字色用常量白 --dshpc-on-signal,不用 --dshpc-fg-inverse:后者跟宿主 label-primary-foreground,\n 暗色主题下是近黑 ⇒ 蓝底黑字(与 Segmented 2026-10-29 同一事故)。 */\n.dshpc-dt__cell--sel{background:var(--dshpc-business);color:var(--dshpc-on-signal);font-weight:600}\n.dshpc-dt__cell--sel:hover{background:var(--dshpc-business-hover)}\n\n/* 两块日历面板(range:左开始、右结束,各选各的)。 */\n.dshpc-dt__panels{display:flex;gap:14px;align-items:flex-start}\n.dshpc-dt__panel{display:flex;flex-direction:column;gap:6px}\n\n.dshpc-dt__time{display:flex;align-items:flex-end;justify-content:center;gap:4px;margin-top:2px;padding-top:8px;border-top:1px solid var(--dshpc-border-faint)}\n.dshpc-dt__unit{display:flex;flex-direction:column;align-items:center;gap:2px}\n.dshpc-dt__unit-label{font-size:10px;line-height:14px;color:var(--dshpc-fg-3)}\n.dshpc-dt__step-btn{\n display:inline-flex;align-items:center;justify-content:center;width:34px;height:14px;padding:0;\n color:var(--dshpc-fg-2);background:none;border:0;border-radius:var(--dshpc-radius-sm);cursor:pointer;\n}\n.dshpc-dt__step-btn:hover{background:var(--dshpc-surface-sunken);color:var(--dshpc-fg)}\n.dshpc-dt__step-btn:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:-1px}\n.dshpc-dt__step-val{\n width:34px;height:24px;padding:0;box-sizing:border-box;text-align:center;\n font-size:13px;font-variant-numeric:tabular-nums;color:var(--dshpc-fg);\n background:var(--dshpc-surface-sunken);border:1px solid var(--dshpc-border-faint);\n border-radius:var(--dshpc-radius-sm);outline:none;\n}\n.dshpc-dt__step-val:focus{border-color:var(--dshpc-focus);box-shadow:0 0 0 1px var(--dshpc-focus)}\n.dshpc-dt__step-val:disabled{color:var(--dshpc-fg-dim);cursor:not-allowed}\n.dshpc-dt__sep{padding-bottom:5px;color:var(--dshpc-fg-3);font-size:12px}\n\n.dshpc-dt__foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;padding-top:8px;border-top:1px solid var(--dshpc-border-faint)}\n.dshpc-dt__foot-side{display:flex;align-items:center;gap:6px}\n.dshpc-dt__warn{font-size:11px;color:var(--dshpc-warning-label);white-space:nowrap}\n";
|
|
4
4
|
//# sourceMappingURL=datetime-css.generated.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"datetime-css.generated.js","sourceRoot":"","sources":["../../../src/ui/controls/datetime-css.generated.ts"],"names":[],"mappings":"AAAA,+CAA+C;AAC/C,qEAAqE;AACrE,MAAM,CAAC,MAAM,YAAY,GAAG,
|
|
1
|
+
{"version":3,"file":"datetime-css.generated.js","sourceRoot":"","sources":["../../../src/ui/controls/datetime-css.generated.ts"],"names":[],"mappings":"AAAA,+CAA+C;AAC/C,qEAAqE;AACrE,MAAM,CAAC,MAAM,YAAY,GAAG,6lOAA6lO,CAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const SEGMENTED_CSS = "\n/* \u2500\u2500 \u5206\u6BB5\u63A7\u4EF6 P2 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n \u7ED3\u6784\u7167\u5144\u5F1F\u9879\u76EE dsh-task-dispatch-table \u7684 Segmented \u76AE\u80A4\uFF08item \u65E0\u8FB9\u6846\u3001hover \u53EA\u63D0\u4EAE\u6587\u5B57\uFF09\uFF0C\n \u524D\u7F00 / \u53D8\u91CF\u540D\u6362\u6210\u672C\u4ED3\u53E3\u5F84\u3002\u7528\u6237\u989D\u5916\u8981\u7684\u4E24\u5904\uFF08\u5144\u5F1F\u6CA1\u6709\uFF09\uFF1Aweekday \u65B9\u5757\u95F4\u9694\uFF08\u73B0\u4E3A 2px\uFF09\uFF1B\u6BB5\u5185\u4E2D\u6027\u8BA1\u6570 __count\u3002\n \u26A0\uFE0F 2026-10-19 \u4E24\u6B21\u8BEF\u5224\u5747\u5DF2\u6F84\u6E05\uFF1A\u2460 \u300C\u5BBF\u4E3B\u53EA\u8BA4\u5355\u884C CSS\u300D\u2014\u2014\u5047\uFF0C\u591A\u884C\u4E00\u76F4\u6B63\u5E38\uFF1B\n \u2461 \u300C\u5BBF\u4E3B\u5403\u6389 token \u5757\u4E4B\u540E\u7B2C\u4E00\u6761\u89C4\u5219\u300D\u2014\u2014\u4E5F\u5047\uFF0C\u771F\u56E0\u662F tokens \u6A21\u677F\u5B57\u7B26\u4E32\u7ED3\u5C3E\u591A\u4E86\u4E00\u4E2A\u53CD\u659C\u6760\uFF0C\n \u6CE8\u5165\u6587\u672C\u91CC\u7559\u4E0B\u5B57\u9762\u53CD\u5F15\u53F7\uFF0C\u628A\u7D27\u968F\u5176\u540E\u7684\u90A3\u6761\u89C4\u5219\u7684\u9009\u62E9\u5668\u6C61\u67D3\u6389\u4E86\uFF08\u89C1 dsh-host.md \u00A79\uFF09\u3002\n \u6837\u5F0F\u7167\u5E38\u591A\u884C\u4E66\u5199\uFF0C\u4E0D\u5FC5\u538B\u884C\uFF1B\u4E5F\u4E0D\u9700\u8981\u4EFB\u4F55\u300C\u727A\u7272\u89C4\u5219\u300D\u3002 */\n/* \u5916\u89C2\u53EA\u6709\u4E00\u5957\uFF082026-10-26\uFF09\uFF1A\u539F variant \u7684 default / inset \u4E24\u6863\u5728 CSS \u91CC\u53EA\u5DEE 1px \u5185\u8DDD\uFF0C\n \u4E14 default \u6BD4\u6587\u6863\u627F\u8BFA\u77EE 2px\uFF0C\u5374\u8BA9\u4E0B\u6E38\u4EE5\u4E3A\u300C\u6709\u5F97\u9009\u300D\u800C\u53CD\u590D\u5BF9\u56FE \u21D2 \u6574\u8F74\u5220\u9664\u3002\n padding 3px \u662F\u5C3A\u5BF8\u5951\u7EA6\u7684\u4E00\u90E8\u5206\uFF1Aitem \u9AD8\u5EA6 = \u63A7\u5236\u9AD8 \u2212 6px\uFF0C\u52A0\u8D77\u6765\u6B63\u597D 24 / 28 / 32\u3002 */\n.dshpc-seg{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:var(--dshpc-radius-md);--seg-thumb:var(--dshpc-surface-raised);background:var(--dshpc-seg-track);}\n.dshpc-seg__item{appearance:none;display:inline-flex;align-items:center;gap:4px;box-sizing:border-box;height:calc(var(--dshpc-control-h-sm) - 6px);padding:0 12px;border:0;border-radius:var(--dshpc-radius-sm);background:transparent;color:var(--dshpc-fg-2);font-family:inherit;font-size:var(--dshpc-font-xs);font-weight:500;white-space:nowrap;cursor:pointer;flex:none;transition:color var(--dshpc-dur-fast) var(--dshpc-ease),background-color var(--dshpc-dur-fast) var(--dshpc-ease),box-shadow var(--dshpc-dur-fast) var(--dshpc-ease);}\n.dshpc-seg--md .dshpc-seg__item{height:calc(var(--dshpc-control-h-md) - 6px);}\n.dshpc-seg--lg .dshpc-seg__item{height:calc(var(--dshpc-control-h-lg) - 6px);}\n.dshpc-seg__item:hover:not([aria-pressed='true']):not(:disabled){color:var(--dshpc-fg);}\n.dshpc-seg__item[aria-pressed='true']{background:var(--seg-thumb);box-shadow:var(--dshpc-shadow-raised);color:var(--dshpc-fg);font-weight:600;}\n.dshpc-seg__item:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:-2px;}\n.dshpc-seg__item:disabled{cursor:default;opacity:.4;}\n/* \u6BB5\u5185\u89D2\u6807\uFF08\u5982\u300C\u5F02\u5E38\u300D\u7684\u6570\u91CF\uFF09\uFF1A\u8BED\u4E49\u8272\u5B9E\u9762 + \u53CD\u767D\u5B57\uFF0C0 \u7531\u7EC4\u4EF6\u4FA7\u4E0D\u6E32\u67D3\u3002\u5FC5\u987B\u662F\u6B63\u5706\uFF08\u7528\u6237 2026-10-03\uFF09\u3002 */\n.dshpc-seg__badge{display:inline-flex;align-items:center;justify-content:center;flex:none;width:16px;height:16px;padding:0;overflow:hidden;border-radius:50%;background:var(--dshpc-danger);color:var(--dshpc-on-signal);font-size:10px;line-height:16px;font-weight:500;font-variant-numeric:tabular-nums;}\n/* \u6BB5\u5185\u4E2D\u6027\u8BA1\u6570\uFF08\u5982\u7B5B\u9009\u6761\u300C\u5168\u90E8 11\u300D\uFF09\uFF1A\u7EAF\u6587\u5B57\u3001\u65E0\u5E95\u65E0\u8FB9\uFF08\u5BF9\u9F50 task-ledger .dtl-seg__num \u62CD\u677F\u53E3\u5F84\uFF09\uFF1B0 \u7531\u7EC4\u4EF6\u4FA7\u4E0D\u6E32\u67D3\u3002 */\n.dshpc-seg__count{display:inline;flex:none;margin-left:3px;padding:0;border:0;border-radius:0;background:none;color:var(--dshpc-fg-3);font-size:10px;line-height:1;font-weight:400;font-variant-numeric:tabular-nums;}\n/* block\uFF1A\u6491\u6EE1\u7236\u5BBD\uFF08\u8868\u5355\u884C\u7528\uFF09\uFF0C\u5404\u6BB5\u7B49\u5206 */\n.dshpc-seg--block{display:flex;width:100%;}\n.dshpc-seg--block .dshpc-seg__item{flex:1 1 auto;justify-content:center;}\n/* weekday\uFF1A\u661F\u671F\u591A\u9009\u65B9\u5757\u3002\u57FA\u7840\u63D2\u4EF6\u7684\u7279\u6B8A\u5316\u5B9A\u5236\uFF08\u7528\u6237 2026-10-01\uFF1A\u539F WeekdayPicker \u5373\u300C\u84DD\u5E95 + \u8FD1\u4F3C\u65B9\u5F62\u300D\uFF09\uFF1A\n \u6BCF\u683C\u6B63\u65B9\u5F62\uFF08\u5BBD = \u6BB5\u9AD8\uFF09\u3001\u9009\u4E2D\u54C1\u724C\u84DD\u53CD\u767D\u5B57\u3001**\u65E0\u5916\u63CF\u8FB9**\uFF082026-10-18 \u91CD\u7533\uFF09\u3001\n \u65B9\u5757\u4E4B\u95F4\u95F4\u8DDD gap:2px\uFF082026-10-20 \u7528\u6237\u5B9A\u7A3F\uFF1A\u65B9\u5757\u6539\u5C0F\u540E 6px \u663E\u5F97\u592A\u5BBD\u300210-18 \u66FE\u4ECE 2px \u653E\u5BBD\u5230 6px\uFF0C\n \u4E24\u6B21\u90FD\u662F\u7528\u6237\u62CD\u677F \u2014\u2014 \u522B\u81EA\u4F5C\u4E3B\u5F20\u6539\u56DE\u53BB\uFF09\u3002 */\n.dshpc-seg--weekday{--seg-track:var(--dshpc-seg-track);gap:2px;border:0;padding:3px;background:var(--seg-track);}\n.dshpc-seg--weekday .dshpc-seg__item{width:calc(var(--dshpc-control-h-lg) - 8px);padding:0;justify-content:center;}\n.dshpc-seg--weekday .dshpc-seg__item[aria-pressed='true']{background:var(--dshpc-business);color:var(--dshpc-fg-inverse);box-shadow:var(--dshpc-shadow-raised);}\n\n/* \u2500\u2500 \u5355\u9009\u6ED1\u52A8\u5757\uFF082026-10-26 \u7528\u6237\uFF1A\u70B9\u9009\u540E\u9009\u4E2D\u5E95\u5E94\u300C\u6ED1\u8FC7\u53BB\u300D\uFF0C\u4E0D\u662F\u65E7\u6BB5\u6D88\u5931\u3001\u65B0\u6BB5\u76F4\u63A5\u4EAE\uFF09\u3002\n \u7ED3\u6784 = \u4E00\u5757\u7EDD\u5BF9\u5B9A\u4F4D\u7684\u5171\u7528\u5E95 + \u5404\u6BB5\u900F\u660E\uFF1B\u4F4D\u7F6E/\u5C3A\u5BF8\u7531\u7EC4\u4EF6\u91CF\u51FA\u540E\u5185\u8054\uFF0C\u8FD9\u91CC\u53EA\u7BA1\u5916\u89C2\u4E0E\u8FC7\u6E21\u3002\n --slide \u53EA\u5728\u5355\u9009\u6302\u4E0A\uFF1A\u591A\u9009\uFF08\u5982\u661F\u671F\uFF09\u6BCF\u6BB5\u5404\u81EA\u7740\u8272\uFF0C\u6CA1\u6709\u552F\u4E00\u6ED1\u5757\u53EF\u6ED1\uFF0C\u4FDD\u6301\u539F\u6837\u3002 */\n.dshpc-seg--slide{position:relative;}\n.dshpc-seg--slide .dshpc-seg__item{position:relative;z-index:1;}\n.dshpc-seg--slide .dshpc-seg__item[aria-pressed='true']{background:transparent;box-shadow:none;}\n.dshpc-seg__thumb{position:absolute;z-index:0;border-radius:var(--dshpc-radius-sm);background:var(--seg-thumb);box-shadow:var(--dshpc-shadow-raised);pointer-events:none;transition:left var(--dshpc-dur) var(--dshpc-ease),top var(--dshpc-dur) var(--dshpc-ease),width var(--dshpc-dur) var(--dshpc-ease),height var(--dshpc-dur) var(--dshpc-ease);}\n.dshpc-seg--weekday.dshpc-seg--slide .dshpc-seg__thumb{background:var(--dshpc-business);}\n\n/* \u2500\u2500 bordered \u5916\u6846\uFF082026-10-20 \u7528\u6237\u8981\u7684\u7B2C\u4E8C\u79CD\u6A21\u5F0F\uFF09\uFF1A**\u53EA\u5728\u6700\u5916\u9762\u5957\u4E00\u5708 1px \u63CF\u8FB9**\uFF0C\n \u91CC\u9762\u4E00\u6982\u4E0D\u52A8 \u2014\u2014 \u9009\u4E2D\u7247\u7684\u586B\u5145\u8272 / \u9634\u5F71 / \u6587\u5B57\u8272\u5168\u90E8\u4FDD\u6301\u539F\u6837\uFF08weekday \u7684\u84DD\u9762\u7167\u65E7\uFF09\uFF0C\n \u8FD9\u91CC\u4E0D\u5199\u4EFB\u4F55\u9488\u5BF9 __item \u7684\u89C4\u5219\u3002\n \u603B\u9AD8\u5FC5\u987B\u4E0E\u65E0\u6846\u7248\u9010\u50CF\u7D20\u4E00\u81F4\uFF1Aborder 1px\u00D72 \u7531 padding \u5404\u8BA9 1px \u62B5\u6D88\uFF083 \u2192 2\uFF09\uFF1B\n weekday \u81EA\u5DF1\u58F0\u660E\u7684 3px \u5728\u6587\u4EF6\u66F4\u540E\u9762\uFF0C\u9760\u53CC\u7C7B\u9009\u62E9\u5668\u538B\u56DE 2px\u3002 */\n.dshpc-seg--bordered{border:1px solid var(--dshpc-border);padding:2px;}\n.dshpc-seg--bordered.dshpc-seg--weekday{padding:2px;}\n\n@media (prefers-reduced-motion: reduce){.dshpc-seg__item{transition:none;}.dshpc-seg__thumb{transition:none;}}\n";
|
|
1
|
+
export declare const SEGMENTED_CSS = "\n/* \u2500\u2500 \u5206\u6BB5\u63A7\u4EF6 P2 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n \u7ED3\u6784\u7167\u5144\u5F1F\u9879\u76EE dsh-task-dispatch-table \u7684 Segmented \u76AE\u80A4\uFF08item \u65E0\u8FB9\u6846\u3001hover \u53EA\u63D0\u4EAE\u6587\u5B57\uFF09\uFF0C\n \u524D\u7F00 / \u53D8\u91CF\u540D\u6362\u6210\u672C\u4ED3\u53E3\u5F84\u3002\u7528\u6237\u989D\u5916\u8981\u7684\u4E24\u5904\uFF08\u5144\u5F1F\u6CA1\u6709\uFF09\uFF1Aweekday \u65B9\u5757\u95F4\u9694\uFF08\u73B0\u4E3A 2px\uFF09\uFF1B\u6BB5\u5185\u4E2D\u6027\u8BA1\u6570 __count\u3002\n \u26A0\uFE0F 2026-10-19 \u4E24\u6B21\u8BEF\u5224\u5747\u5DF2\u6F84\u6E05\uFF1A\u2460 \u300C\u5BBF\u4E3B\u53EA\u8BA4\u5355\u884C CSS\u300D\u2014\u2014\u5047\uFF0C\u591A\u884C\u4E00\u76F4\u6B63\u5E38\uFF1B\n \u2461 \u300C\u5BBF\u4E3B\u5403\u6389 token \u5757\u4E4B\u540E\u7B2C\u4E00\u6761\u89C4\u5219\u300D\u2014\u2014\u4E5F\u5047\uFF0C\u771F\u56E0\u662F tokens \u6A21\u677F\u5B57\u7B26\u4E32\u7ED3\u5C3E\u591A\u4E86\u4E00\u4E2A\u53CD\u659C\u6760\uFF0C\n \u6CE8\u5165\u6587\u672C\u91CC\u7559\u4E0B\u5B57\u9762\u53CD\u5F15\u53F7\uFF0C\u628A\u7D27\u968F\u5176\u540E\u7684\u90A3\u6761\u89C4\u5219\u7684\u9009\u62E9\u5668\u6C61\u67D3\u6389\u4E86\uFF08\u89C1 dsh-host.md \u00A79\uFF09\u3002\n \u6837\u5F0F\u7167\u5E38\u591A\u884C\u4E66\u5199\uFF0C\u4E0D\u5FC5\u538B\u884C\uFF1B\u4E5F\u4E0D\u9700\u8981\u4EFB\u4F55\u300C\u727A\u7272\u89C4\u5219\u300D\u3002 */\n/* \u5916\u89C2\u53EA\u6709\u4E00\u5957\uFF082026-10-26\uFF09\uFF1A\u539F variant \u7684 default / inset \u4E24\u6863\u5728 CSS \u91CC\u53EA\u5DEE 1px \u5185\u8DDD\uFF0C\n \u4E14 default \u6BD4\u6587\u6863\u627F\u8BFA\u77EE 2px\uFF0C\u5374\u8BA9\u4E0B\u6E38\u4EE5\u4E3A\u300C\u6709\u5F97\u9009\u300D\u800C\u53CD\u590D\u5BF9\u56FE \u21D2 \u6574\u8F74\u5220\u9664\u3002\n padding 3px \u662F\u5C3A\u5BF8\u5951\u7EA6\u7684\u4E00\u90E8\u5206\uFF1Aitem \u9AD8\u5EA6 = \u63A7\u5236\u9AD8 \u2212 6px\uFF0C\u52A0\u8D77\u6765\u6B63\u597D 24 / 28 / 32\u3002 */\n/* \u9009\u4E2D\u7247\u914D\u8272\u6536\u5728\u4E24\u6761\u5C40\u90E8\u53D8\u91CF\u91CC\uFF08--seg-thumb \u5E95 / --seg-on \u5B57\uFF09\uFF1A\u9ED8\u8BA4\u8D70\u4E3B\u9898\u4EAE\u7247\uFF0C\n tone \u6863\u4E0E\u81EA\u5B9A\u4E49 {bg, fg} \u90FD\u53EA\u6539\u8FD9\u4E24\u6761\uFF08\u540E\u8005\u7531\u7EC4\u4EF6\u5185\u8054\u5199\u6839\u8282\u70B9\uFF0C\u5185\u8054\u6052\u80DC\uFF09\u3002 */\n.dshpc-seg{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:var(--dshpc-radius-md);--seg-thumb:var(--dshpc-surface-raised);--seg-on:var(--dshpc-fg);background:var(--dshpc-seg-track);}\n.dshpc-seg__item{appearance:none;display:inline-flex;align-items:center;gap:4px;box-sizing:border-box;height:calc(var(--dshpc-control-h-sm) - 6px);padding:0 12px;border:0;border-radius:var(--dshpc-radius-sm);background:transparent;color:var(--dshpc-fg-2);font-family:inherit;font-size:var(--dshpc-font-xs);font-weight:500;white-space:nowrap;cursor:pointer;flex:none;transition:color var(--dshpc-dur-fast) var(--dshpc-ease),background-color var(--dshpc-dur-fast) var(--dshpc-ease),box-shadow var(--dshpc-dur-fast) var(--dshpc-ease);}\n.dshpc-seg--md .dshpc-seg__item{height:calc(var(--dshpc-control-h-md) - 6px);}\n.dshpc-seg--lg .dshpc-seg__item{height:calc(var(--dshpc-control-h-lg) - 6px);}\n.dshpc-seg__item:hover:not([aria-pressed='true']):not(:disabled){color:var(--dshpc-fg);}\n.dshpc-seg__item[aria-pressed='true']{background:var(--seg-thumb);box-shadow:var(--dshpc-shadow-raised);color:var(--seg-on);font-weight:600;}\n.dshpc-seg__item:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:-2px;}\n.dshpc-seg__item:disabled{cursor:default;opacity:.4;}\n/* \u6BB5\u5185\u89D2\u6807\uFF08\u5982\u300C\u5F02\u5E38\u300D\u7684\u6570\u91CF\uFF09\uFF1A\u8BED\u4E49\u8272\u5B9E\u9762 + \u53CD\u767D\u5B57\uFF0C0 \u7531\u7EC4\u4EF6\u4FA7\u4E0D\u6E32\u67D3\u3002\u5FC5\u987B\u662F\u6B63\u5706\uFF08\u7528\u6237 2026-10-03\uFF09\u3002 */\n.dshpc-seg__badge{display:inline-flex;align-items:center;justify-content:center;flex:none;width:16px;height:16px;padding:0;overflow:hidden;border-radius:50%;background:var(--dshpc-danger);color:var(--dshpc-on-signal);font-size:10px;line-height:16px;font-weight:500;font-variant-numeric:tabular-nums;}\n/* \u6BB5\u5185\u4E2D\u6027\u8BA1\u6570\uFF08\u5982\u7B5B\u9009\u6761\u300C\u5168\u90E8 11\u300D\uFF09\uFF1A\u7EAF\u6587\u5B57\u3001\u65E0\u5E95\u65E0\u8FB9\uFF08\u5BF9\u9F50 task-ledger .dtl-seg__num \u62CD\u677F\u53E3\u5F84\uFF09\uFF1B0 \u7531\u7EC4\u4EF6\u4FA7\u4E0D\u6E32\u67D3\u3002 */\n.dshpc-seg__count{display:inline;flex:none;margin-left:3px;padding:0;border:0;border-radius:0;background:none;color:var(--dshpc-fg-3);font-size:10px;line-height:1;font-weight:400;font-variant-numeric:tabular-nums;}\n/* block\uFF1A\u6491\u6EE1\u7236\u5BBD\uFF08\u8868\u5355\u884C\u7528\uFF09\uFF0C\u5404\u6BB5\u7B49\u5206 */\n.dshpc-seg--block{display:flex;width:100%;}\n.dshpc-seg--block .dshpc-seg__item{flex:1 1 auto;justify-content:center;}\n/* weekday\uFF1A\u661F\u671F\u591A\u9009\u65B9\u5757\u3002\u57FA\u7840\u63D2\u4EF6\u7684\u7279\u6B8A\u5316\u5B9A\u5236\uFF08\u7528\u6237 2026-10-01\uFF1A\u539F WeekdayPicker \u5373\u300C\u84DD\u5E95 + \u8FD1\u4F3C\u65B9\u5F62\u300D\uFF09\uFF1A\n \u6BCF\u683C\u6B63\u65B9\u5F62\uFF08\u5BBD = \u6BB5\u9AD8\uFF09\u3001\u9009\u4E2D\u54C1\u724C\u84DD\u53CD\u767D\u5B57\u3001**\u65E0\u5916\u63CF\u8FB9**\uFF082026-10-18 \u91CD\u7533\uFF09\u3001\n \u65B9\u5757\u4E4B\u95F4\u95F4\u8DDD gap:2px\uFF082026-10-20 \u7528\u6237\u5B9A\u7A3F\uFF1A\u65B9\u5757\u6539\u5C0F\u540E 6px \u663E\u5F97\u592A\u5BBD\u300210-18 \u66FE\u4ECE 2px \u653E\u5BBD\u5230 6px\uFF0C\n \u4E24\u6B21\u90FD\u662F\u7528\u6237\u62CD\u677F \u2014\u2014 \u522B\u81EA\u4F5C\u4E3B\u5F20\u6539\u56DE\u53BB\uFF09\u3002 */\n.dshpc-seg--weekday{--seg-track:var(--dshpc-seg-track);gap:2px;border:0;padding:3px;background:var(--seg-track);}\n.dshpc-seg--weekday .dshpc-seg__item{width:calc(var(--dshpc-control-h-lg) - 8px);padding:0;justify-content:center;}\n/* \u84DD\u5E95\u53CD\u767D\uFF1A\u5B57\u8272\u5FC5\u987B\u662F\u5E38\u91CF\u767D\uFF08--dshpc-on-signal\uFF09\u30022026-10-29 \u7528\u6237\u5B9E\u6D4B\uFF1A\u6697\u8272\u4E3B\u9898\u4E0B\u8FD9\u91CC\u66FE\u7528\n --dshpc-fg-inverse\uFF0C\u800C\u5B83\u8DDF\u968F\u5BBF\u4E3B label-primary-foreground\uFF0C\u6697\u8272\u4E0B\u662F\u8FD1\u9ED1 \u21D2 \u84DD\u5E95\u9ED1\u5B57\u770B\u4E0D\u6E05\u3002 */\n.dshpc-seg--weekday{--seg-thumb:var(--dshpc-business);--seg-on:var(--dshpc-on-signal);}\n\n/* \u2500\u2500 tone\uFF082026-10-29 \u7528\u6237\uFF09\uFF1A\u9009\u4E2D\u7247\u4F20\u5185\u7F6E\u57FA\u7840\u8272\u540D\uFF0C\u5E95 / \u5B57\u7531\u6838\u5FC3\u7ED9\uFF0C\u6DF1\u6D45\u4E24\u4E3B\u9898\u5404\u81EA\u6210\u7ACB\u3002\n \u653E\u5728 weekday \u4E4B\u540E\uFF1A\u540C\u540D\u53D8\u91CF\u540E\u5199\u8005\u80DC\uFF0Ctone \u4E0E className=\"dshpc-seg--weekday\" \u540C\u7ED9\u65F6\u4EE5 tone \u4E3A\u51C6\u3002\n \u9EC4\u5E95\u6309 Chip / Button \u540C\u6E90\u53E3\u5F84\u7528 on-warning\uFF08\u4E2D\u9AD8\u660E\u5EA6\uFF0C\u767D\u5B57\u770B\u4E0D\u6E05\uFF09\u3002 */\n.dshpc-seg--tone-business{--seg-thumb:var(--dshpc-business);--seg-on:var(--dshpc-on-signal);}\n.dshpc-seg--tone-success{--seg-thumb:var(--dshpc-success);--seg-on:var(--dshpc-on-signal);}\n.dshpc-seg--tone-warning{--seg-thumb:var(--dshpc-warning);--seg-on:var(--dshpc-on-warning);}\n.dshpc-seg--tone-danger{--seg-thumb:var(--dshpc-danger);--seg-on:var(--dshpc-on-signal);}\n.dshpc-seg--tone-purple{--seg-thumb:var(--dshpc-purple);--seg-on:var(--dshpc-on-signal);}\n.dshpc-seg--tone-pink{--seg-thumb:var(--dshpc-pink);--seg-on:var(--dshpc-on-signal);}\n.dshpc-seg--tone-cyan{--seg-thumb:var(--dshpc-cyan);--seg-on:var(--dshpc-on-signal);}\n.dshpc-seg--tone-teal{--seg-thumb:var(--dshpc-teal);--seg-on:var(--dshpc-on-signal);}\n.dshpc-seg--tone-orange{--seg-thumb:var(--dshpc-orange);--seg-on:var(--dshpc-on-signal);}\n.dshpc-seg--tone-indigo{--seg-thumb:var(--dshpc-indigo);--seg-on:var(--dshpc-on-signal);}\n.dshpc-seg--tone-rose{--seg-thumb:var(--dshpc-rose);--seg-on:var(--dshpc-on-signal);}\n.dshpc-seg--tone-slate{--seg-thumb:var(--dshpc-slate);--seg-on:var(--dshpc-on-signal);}\n\n/* \u2500\u2500 \u5355\u9009\u6ED1\u52A8\u5757\uFF082026-10-26 \u7528\u6237\uFF1A\u70B9\u9009\u540E\u9009\u4E2D\u5E95\u5E94\u300C\u6ED1\u8FC7\u53BB\u300D\uFF0C\u4E0D\u662F\u65E7\u6BB5\u6D88\u5931\u3001\u65B0\u6BB5\u76F4\u63A5\u4EAE\uFF09\u3002\n \u7ED3\u6784 = \u4E00\u5757\u7EDD\u5BF9\u5B9A\u4F4D\u7684\u5171\u7528\u5E95 + \u5404\u6BB5\u900F\u660E\uFF1B\u4F4D\u7F6E/\u5C3A\u5BF8\u7531\u7EC4\u4EF6\u91CF\u51FA\u540E\u5185\u8054\uFF0C\u8FD9\u91CC\u53EA\u7BA1\u5916\u89C2\u4E0E\u8FC7\u6E21\u3002\n --slide \u53EA\u5728\u5355\u9009\u6302\u4E0A\uFF1A\u591A\u9009\uFF08\u5982\u661F\u671F\uFF09\u6BCF\u6BB5\u5404\u81EA\u7740\u8272\uFF0C\u6CA1\u6709\u552F\u4E00\u6ED1\u5757\u53EF\u6ED1\uFF0C\u4FDD\u6301\u539F\u6837\u3002 */\n.dshpc-seg--slide{position:relative;}\n.dshpc-seg--slide .dshpc-seg__item{position:relative;z-index:1;}\n.dshpc-seg--slide .dshpc-seg__item[aria-pressed='true']{background:transparent;box-shadow:none;}\n.dshpc-seg__thumb{position:absolute;z-index:0;border-radius:var(--dshpc-radius-sm);background:var(--seg-thumb);box-shadow:var(--dshpc-shadow-raised);pointer-events:none;transition:left var(--dshpc-dur) var(--dshpc-ease),top var(--dshpc-dur) var(--dshpc-ease),width var(--dshpc-dur) var(--dshpc-ease),height var(--dshpc-dur) var(--dshpc-ease);}\n\n/* \u2500\u2500 bordered \u5916\u6846\uFF082026-10-20 \u7528\u6237\u8981\u7684\u7B2C\u4E8C\u79CD\u6A21\u5F0F\uFF09\uFF1A**\u53EA\u5728\u6700\u5916\u9762\u5957\u4E00\u5708 1px \u63CF\u8FB9**\uFF0C\n \u91CC\u9762\u4E00\u6982\u4E0D\u52A8 \u2014\u2014 \u9009\u4E2D\u7247\u7684\u586B\u5145\u8272 / \u9634\u5F71 / \u6587\u5B57\u8272\u5168\u90E8\u4FDD\u6301\u539F\u6837\uFF08weekday \u7684\u84DD\u9762\u7167\u65E7\uFF09\uFF0C\n \u8FD9\u91CC\u4E0D\u5199\u4EFB\u4F55\u9488\u5BF9 __item \u7684\u89C4\u5219\u3002\n \u603B\u9AD8\u5FC5\u987B\u4E0E\u65E0\u6846\u7248\u9010\u50CF\u7D20\u4E00\u81F4\uFF1Aborder 1px\u00D72 \u7531 padding \u5404\u8BA9 1px \u62B5\u6D88\uFF083 \u2192 2\uFF09\uFF1B\n weekday \u81EA\u5DF1\u58F0\u660E\u7684 3px \u5728\u6587\u4EF6\u66F4\u540E\u9762\uFF0C\u9760\u53CC\u7C7B\u9009\u62E9\u5668\u538B\u56DE 2px\u3002 */\n.dshpc-seg--bordered{border:1px solid var(--dshpc-border);padding:2px;}\n.dshpc-seg--bordered.dshpc-seg--weekday{padding:2px;}\n\n@media (prefers-reduced-motion: reduce){.dshpc-seg__item{transition:none;}.dshpc-seg__thumb{transition:none;}}\n";
|
|
2
2
|
//# sourceMappingURL=segmented-css.generated.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"segmented-css.generated.d.ts","sourceRoot":"","sources":["../../../src/ui/controls/segmented-css.generated.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,
|
|
1
|
+
{"version":3,"file":"segmented-css.generated.d.ts","sourceRoot":"","sources":["../../../src/ui/controls/segmented-css.generated.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,8hVAAm2L,CAAA"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
// ⚠️ 生成物,勿手改。真源 = src/ui/controls/segmented.css
|
|
2
2
|
// 由 scripts/gen-css.mjs 生成(`pnpm run gen:css`):改样式请改那个 .css 文件后重新生成。
|
|
3
|
-
export const SEGMENTED_CSS = "\n/* ── 分段控件 P2 ─────────────────────────────────────────────────────\n 结构照兄弟项目 dsh-task-dispatch-table 的 Segmented 皮肤(item 无边框、hover 只提亮文字),\n 前缀 / 变量名换成本仓口径。用户额外要的两处(兄弟没有):weekday 方块间隔(现为 2px);段内中性计数 __count。\n ⚠️ 2026-10-19 两次误判均已澄清:① 「宿主只认单行 CSS」——假,多行一直正常;\n ② 「宿主吃掉 token 块之后第一条规则」——也假,真因是 tokens 模板字符串结尾多了一个反斜杠,\n 注入文本里留下字面反引号,把紧随其后的那条规则的选择器污染掉了(见 dsh-host.md §9)。\n 样式照常多行书写,不必压行;也不需要任何「牺牲规则」。 */\n/* 外观只有一套(2026-10-26):原 variant 的 default / inset 两档在 CSS 里只差 1px 内距,\n 且 default 比文档承诺矮 2px,却让下游以为「有得选」而反复对图 ⇒ 整轴删除。\n padding 3px 是尺寸契约的一部分:item 高度 = 控制高 − 6px,加起来正好 24 / 28 / 32。 */\n.dshpc-seg{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:var(--dshpc-radius-md);--seg-thumb:var(--dshpc-surface-raised);background:var(--dshpc-seg-track);}\n.dshpc-seg__item{appearance:none;display:inline-flex;align-items:center;gap:4px;box-sizing:border-box;height:calc(var(--dshpc-control-h-sm) - 6px);padding:0 12px;border:0;border-radius:var(--dshpc-radius-sm);background:transparent;color:var(--dshpc-fg-2);font-family:inherit;font-size:var(--dshpc-font-xs);font-weight:500;white-space:nowrap;cursor:pointer;flex:none;transition:color var(--dshpc-dur-fast) var(--dshpc-ease),background-color var(--dshpc-dur-fast) var(--dshpc-ease),box-shadow var(--dshpc-dur-fast) var(--dshpc-ease);}\n.dshpc-seg--md .dshpc-seg__item{height:calc(var(--dshpc-control-h-md) - 6px);}\n.dshpc-seg--lg .dshpc-seg__item{height:calc(var(--dshpc-control-h-lg) - 6px);}\n.dshpc-seg__item:hover:not([aria-pressed='true']):not(:disabled){color:var(--dshpc-fg);}\n.dshpc-seg__item[aria-pressed='true']{background:var(--seg-thumb);box-shadow:var(--dshpc-shadow-raised);color:var(--
|
|
3
|
+
export const SEGMENTED_CSS = "\n/* ── 分段控件 P2 ─────────────────────────────────────────────────────\n 结构照兄弟项目 dsh-task-dispatch-table 的 Segmented 皮肤(item 无边框、hover 只提亮文字),\n 前缀 / 变量名换成本仓口径。用户额外要的两处(兄弟没有):weekday 方块间隔(现为 2px);段内中性计数 __count。\n ⚠️ 2026-10-19 两次误判均已澄清:① 「宿主只认单行 CSS」——假,多行一直正常;\n ② 「宿主吃掉 token 块之后第一条规则」——也假,真因是 tokens 模板字符串结尾多了一个反斜杠,\n 注入文本里留下字面反引号,把紧随其后的那条规则的选择器污染掉了(见 dsh-host.md §9)。\n 样式照常多行书写,不必压行;也不需要任何「牺牲规则」。 */\n/* 外观只有一套(2026-10-26):原 variant 的 default / inset 两档在 CSS 里只差 1px 内距,\n 且 default 比文档承诺矮 2px,却让下游以为「有得选」而反复对图 ⇒ 整轴删除。\n padding 3px 是尺寸契约的一部分:item 高度 = 控制高 − 6px,加起来正好 24 / 28 / 32。 */\n/* 选中片配色收在两条局部变量里(--seg-thumb 底 / --seg-on 字):默认走主题亮片,\n tone 档与自定义 {bg, fg} 都只改这两条(后者由组件内联写根节点,内联恒胜)。 */\n.dshpc-seg{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:var(--dshpc-radius-md);--seg-thumb:var(--dshpc-surface-raised);--seg-on:var(--dshpc-fg);background:var(--dshpc-seg-track);}\n.dshpc-seg__item{appearance:none;display:inline-flex;align-items:center;gap:4px;box-sizing:border-box;height:calc(var(--dshpc-control-h-sm) - 6px);padding:0 12px;border:0;border-radius:var(--dshpc-radius-sm);background:transparent;color:var(--dshpc-fg-2);font-family:inherit;font-size:var(--dshpc-font-xs);font-weight:500;white-space:nowrap;cursor:pointer;flex:none;transition:color var(--dshpc-dur-fast) var(--dshpc-ease),background-color var(--dshpc-dur-fast) var(--dshpc-ease),box-shadow var(--dshpc-dur-fast) var(--dshpc-ease);}\n.dshpc-seg--md .dshpc-seg__item{height:calc(var(--dshpc-control-h-md) - 6px);}\n.dshpc-seg--lg .dshpc-seg__item{height:calc(var(--dshpc-control-h-lg) - 6px);}\n.dshpc-seg__item:hover:not([aria-pressed='true']):not(:disabled){color:var(--dshpc-fg);}\n.dshpc-seg__item[aria-pressed='true']{background:var(--seg-thumb);box-shadow:var(--dshpc-shadow-raised);color:var(--seg-on);font-weight:600;}\n.dshpc-seg__item:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:-2px;}\n.dshpc-seg__item:disabled{cursor:default;opacity:.4;}\n/* 段内角标(如「异常」的数量):语义色实面 + 反白字,0 由组件侧不渲染。必须是正圆(用户 2026-10-03)。 */\n.dshpc-seg__badge{display:inline-flex;align-items:center;justify-content:center;flex:none;width:16px;height:16px;padding:0;overflow:hidden;border-radius:50%;background:var(--dshpc-danger);color:var(--dshpc-on-signal);font-size:10px;line-height:16px;font-weight:500;font-variant-numeric:tabular-nums;}\n/* 段内中性计数(如筛选条「全部 11」):纯文字、无底无边(对齐 task-ledger .dtl-seg__num 拍板口径);0 由组件侧不渲染。 */\n.dshpc-seg__count{display:inline;flex:none;margin-left:3px;padding:0;border:0;border-radius:0;background:none;color:var(--dshpc-fg-3);font-size:10px;line-height:1;font-weight:400;font-variant-numeric:tabular-nums;}\n/* block:撑满父宽(表单行用),各段等分 */\n.dshpc-seg--block{display:flex;width:100%;}\n.dshpc-seg--block .dshpc-seg__item{flex:1 1 auto;justify-content:center;}\n/* weekday:星期多选方块。基础插件的特殊化定制(用户 2026-10-01:原 WeekdayPicker 即「蓝底 + 近似方形」):\n 每格正方形(宽 = 段高)、选中品牌蓝反白字、**无外描边**(2026-10-18 重申)、\n 方块之间间距 gap:2px(2026-10-20 用户定稿:方块改小后 6px 显得太宽。10-18 曾从 2px 放宽到 6px,\n 两次都是用户拍板 —— 别自作主张改回去)。 */\n.dshpc-seg--weekday{--seg-track:var(--dshpc-seg-track);gap:2px;border:0;padding:3px;background:var(--seg-track);}\n.dshpc-seg--weekday .dshpc-seg__item{width:calc(var(--dshpc-control-h-lg) - 8px);padding:0;justify-content:center;}\n/* 蓝底反白:字色必须是常量白(--dshpc-on-signal)。2026-10-29 用户实测:暗色主题下这里曾用\n --dshpc-fg-inverse,而它跟随宿主 label-primary-foreground,暗色下是近黑 ⇒ 蓝底黑字看不清。 */\n.dshpc-seg--weekday{--seg-thumb:var(--dshpc-business);--seg-on:var(--dshpc-on-signal);}\n\n/* ── tone(2026-10-29 用户):选中片传内置基础色名,底 / 字由核心给,深浅两主题各自成立。\n 放在 weekday 之后:同名变量后写者胜,tone 与 className=\"dshpc-seg--weekday\" 同给时以 tone 为准。\n 黄底按 Chip / Button 同源口径用 on-warning(中高明度,白字看不清)。 */\n.dshpc-seg--tone-business{--seg-thumb:var(--dshpc-business);--seg-on:var(--dshpc-on-signal);}\n.dshpc-seg--tone-success{--seg-thumb:var(--dshpc-success);--seg-on:var(--dshpc-on-signal);}\n.dshpc-seg--tone-warning{--seg-thumb:var(--dshpc-warning);--seg-on:var(--dshpc-on-warning);}\n.dshpc-seg--tone-danger{--seg-thumb:var(--dshpc-danger);--seg-on:var(--dshpc-on-signal);}\n.dshpc-seg--tone-purple{--seg-thumb:var(--dshpc-purple);--seg-on:var(--dshpc-on-signal);}\n.dshpc-seg--tone-pink{--seg-thumb:var(--dshpc-pink);--seg-on:var(--dshpc-on-signal);}\n.dshpc-seg--tone-cyan{--seg-thumb:var(--dshpc-cyan);--seg-on:var(--dshpc-on-signal);}\n.dshpc-seg--tone-teal{--seg-thumb:var(--dshpc-teal);--seg-on:var(--dshpc-on-signal);}\n.dshpc-seg--tone-orange{--seg-thumb:var(--dshpc-orange);--seg-on:var(--dshpc-on-signal);}\n.dshpc-seg--tone-indigo{--seg-thumb:var(--dshpc-indigo);--seg-on:var(--dshpc-on-signal);}\n.dshpc-seg--tone-rose{--seg-thumb:var(--dshpc-rose);--seg-on:var(--dshpc-on-signal);}\n.dshpc-seg--tone-slate{--seg-thumb:var(--dshpc-slate);--seg-on:var(--dshpc-on-signal);}\n\n/* ── 单选滑动块(2026-10-26 用户:点选后选中底应「滑过去」,不是旧段消失、新段直接亮)。\n 结构 = 一块绝对定位的共用底 + 各段透明;位置/尺寸由组件量出后内联,这里只管外观与过渡。\n --slide 只在单选挂上:多选(如星期)每段各自着色,没有唯一滑块可滑,保持原样。 */\n.dshpc-seg--slide{position:relative;}\n.dshpc-seg--slide .dshpc-seg__item{position:relative;z-index:1;}\n.dshpc-seg--slide .dshpc-seg__item[aria-pressed='true']{background:transparent;box-shadow:none;}\n.dshpc-seg__thumb{position:absolute;z-index:0;border-radius:var(--dshpc-radius-sm);background:var(--seg-thumb);box-shadow:var(--dshpc-shadow-raised);pointer-events:none;transition:left var(--dshpc-dur) var(--dshpc-ease),top var(--dshpc-dur) var(--dshpc-ease),width var(--dshpc-dur) var(--dshpc-ease),height var(--dshpc-dur) var(--dshpc-ease);}\n\n/* ── bordered 外框(2026-10-20 用户要的第二种模式):**只在最外面套一圈 1px 描边**,\n 里面一概不动 —— 选中片的填充色 / 阴影 / 文字色全部保持原样(weekday 的蓝面照旧),\n 这里不写任何针对 __item 的规则。\n 总高必须与无框版逐像素一致:border 1px×2 由 padding 各让 1px 抵消(3 → 2);\n weekday 自己声明的 3px 在文件更后面,靠双类选择器压回 2px。 */\n.dshpc-seg--bordered{border:1px solid var(--dshpc-border);padding:2px;}\n.dshpc-seg--bordered.dshpc-seg--weekday{padding:2px;}\n\n@media (prefers-reduced-motion: reduce){.dshpc-seg__item{transition:none;}.dshpc-seg__thumb{transition:none;}}\n";
|
|
4
4
|
//# sourceMappingURL=segmented-css.generated.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"segmented-css.generated.js","sourceRoot":"","sources":["../../../src/ui/controls/segmented-css.generated.ts"],"names":[],"mappings":"AAAA,gDAAgD;AAChD,qEAAqE;AACrE,MAAM,CAAC,MAAM,aAAa,GAAG,
|
|
1
|
+
{"version":3,"file":"segmented-css.generated.js","sourceRoot":"","sources":["../../../src/ui/controls/segmented-css.generated.ts"],"names":[],"mappings":"AAAA,gDAAgD;AAChD,qEAAqE;AACrE,MAAM,CAAC,MAAM,aAAa,GAAG,g2LAAg2L,CAAA"}
|
package/dist/ui/index.d.ts
CHANGED
|
@@ -14,7 +14,7 @@ export { CARD_ACCENTS, Card, StripCard, type CardAccent, type CardSharedProps, }
|
|
|
14
14
|
export { Chip, type ChipProps, type ChipSize, type ChipTone } from './Chip.js';
|
|
15
15
|
export { showToast, notify, type ToastVariant, type ToastPosition, type ToastOptions, type ToastAction, type NotifyOptions, } from './Toast.js';
|
|
16
16
|
export { Button, IconButton, type ButtonProps, type ButtonSize, type ButtonVariant, type IconButtonProps } from './Button.js';
|
|
17
|
-
export { Segmented, type SegmentedProps } from './Segmented.js';
|
|
17
|
+
export { Segmented, type SegmentedProps, type SegmentedTone } from './Segmented.js';
|
|
18
18
|
export { SplitGroup, type SplitGroupProps } from './SplitGroup.js';
|
|
19
19
|
export { Textarea, type TextareaProps } from './Textarea.js';
|
|
20
20
|
export { Checkbox, type CheckboxProps } from './Checkbox.js';
|
package/dist/ui/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AACpF,OAAO,EACL,YAAY,EACZ,cAAc,EACd,OAAO,EACP,QAAQ,EACR,oBAAoB,EACpB,QAAQ,EACR,WAAW,EACX,KAAK,WAAW,EAChB,KAAK,YAAY,GAClB,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAA;AACvE,OAAO,EACL,cAAc,EACd,KAAK,cAAc,EACnB,KAAK,mBAAmB,EACxB,KAAK,YAAY,GAClB,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EACL,eAAe,EACf,eAAe,EACf,SAAS,EACT,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,UAAU,EACV,aAAa,EACb,OAAO,EACP,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,UAAU,EACV,aAAa,EACb,KAAK,aAAa,EAClB,KAAK,iBAAiB,EACtB,KAAK,OAAO,EACZ,KAAK,MAAM,EACX,KAAK,QAAQ,EACb,KAAK,QAAQ,EACb,KAAK,SAAS,GACf,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AAC9F,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,sBAAsB,CAAA;AACjF,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACb,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EACtB,KAAK,iBAAiB,EACtB,KAAK,mBAAmB,EACxB,KAAK,iBAAiB,EACtB,KAAK,UAAU,GAChB,MAAM,gBAAgB,CAAA;AACvB,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,YAAY,CAAA;AACnE,OAAO,EACL,UAAU,EACV,KAAK,eAAe,EACpB,KAAK,aAAa,GACnB,MAAM,iBAAiB,CAAA;AACxB,OAAO,EACL,YAAY,EACZ,KAAK,iBAAiB,EACtB,KAAK,WAAW,GACjB,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EACL,UAAU,EACV,YAAY,EACZ,KAAK,YAAY,EACjB,KAAK,cAAc,GACpB,MAAM,iBAAiB,CAAA;AACxB,OAAO,EACL,YAAY,EACZ,IAAI,EACJ,SAAS,EACT,KAAK,UAAU,EACf,KAAK,eAAe,GACrB,MAAM,WAAW,CAAA;AAClB,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,QAAQ,EAAE,KAAK,QAAQ,EAAE,MAAM,WAAW,CAAA;AAC9E,OAAO,EACL,SAAS,EACT,MAAM,EACN,KAAK,YAAY,EACjB,KAAK,aAAa,EAClB,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,aAAa,GACnB,MAAM,YAAY,CAAA;AAEnB,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,WAAW,EAAE,KAAK,UAAU,EAAE,KAAK,aAAa,EAAE,KAAK,eAAe,EAAE,MAAM,aAAa,CAAA;AAC7H,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"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"}
|
package/dist/ui/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,yBAAyB;AACzB,sDAAsD;AACtD,gDAAgD;AAChD,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AACpF,OAAO,EACL,YAAY,EACZ,cAAc,EACd,OAAO,EACP,QAAQ,EACR,oBAAoB,EACpB,QAAQ,EACR,WAAW,GAGZ,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EAAE,MAAM,EAAqC,MAAM,aAAa,CAAA;AACvE,OAAO,EACL,cAAc,GAIf,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EACL,eAAe,EACf,eAAe,EACf,SAAS,EACT,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,UAAU,EACV,aAAa,EACb,OAAO,EACP,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,UAAU,EACV,aAAa,GAQd,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EAAE,WAAW,EAAkD,MAAM,kBAAkB,CAAA;AAC9F,OAAO,EAAE,eAAe,EAA6B,MAAM,sBAAsB,CAAA;AACjF,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,YAAY,EACZ,aAAa,GAOd,MAAM,gBAAgB,CAAA;AACvB,OAAO,EAAE,KAAK,EAAmC,MAAM,YAAY,CAAA;AACnE,OAAO,EACL,UAAU,GAGX,MAAM,iBAAiB,CAAA;AACxB,OAAO,EACL,YAAY,GAGb,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EACL,UAAU,EACV,YAAY,GAGb,MAAM,iBAAiB,CAAA;AACxB,OAAO,EACL,YAAY,EACZ,IAAI,EACJ,SAAS,GAGV,MAAM,WAAW,CAAA;AAClB,OAAO,EAAE,IAAI,EAAgD,MAAM,WAAW,CAAA;AAC9E,OAAO,EACL,SAAS,EACT,MAAM,GAMP,MAAM,YAAY,CAAA;AAEnB,OAAO,EAAE,MAAM,EAAE,UAAU,EAA+E,MAAM,aAAa,CAAA;AAC7H,OAAO,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"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"}
|
package/docs/design/style.md
CHANGED
|
@@ -39,6 +39,19 @@ token colors instead.
|
|
|
39
39
|
EN: 22% / 36% for hover / active. Mix against literal `#fff` / `#000`, not host-provided neutrals. If an old
|
|
40
40
|
core ignores `color-mix`, the declaration drops and falls back to the base tier.
|
|
41
41
|
|
|
42
|
+
## 彩色实面上的字:只用常量色
|
|
43
|
+
|
|
44
|
+
> EN: Text on colored surfaces: constants only
|
|
45
|
+
|
|
46
|
+
语义色 / 扩展色实面(选中片、日期选中格、Chip、实心钮)上的字只能用 `--dshpc-on-signal`(白)或
|
|
47
|
+
`--dshpc-on-warning`(黄底深字)—— 这两条与主题无关。**不许用 `--dshpc-fg-inverse`**:它跟的是宿主
|
|
48
|
+
`label-primary-foreground`,暗色主题下是近黑 ⇒ 蓝底黑字。2026-10-29 用户实测发现(`Segmented` 多选蓝底与
|
|
49
|
+
`DateTimePicker` 起止格各中一次),已由 `test/css-contract.test.mjs` 盯着不再回潮。
|
|
50
|
+
|
|
51
|
+
EN: Text on semantic solid faces may only use `--dshpc-on-signal` (white) or `--dshpc-on-warning` (dark on
|
|
52
|
+
yellow); never `--dshpc-fg-inverse` — it follows the host's `label-primary-foreground`, which is near-black in
|
|
53
|
+
the dark theme.
|
|
54
|
+
|
|
42
55
|
## 外观轴:一个属性只有一套答案
|
|
43
56
|
|
|
44
57
|
> EN: Appearance axes: one answer per property
|
package/docs/help/ui.doc.ts
CHANGED
|
@@ -112,8 +112,8 @@ const doc: DocTopic = {
|
|
|
112
112
|
en: 'IconButton: variant plain|outline|danger (default plain), size (default lg), icon (required), label (required, doubles as a11y name and title).',
|
|
113
113
|
},
|
|
114
114
|
{
|
|
115
|
-
zh: 'Segmented:`items`(必填)支持单选 / 多选,`size`(默认 lg;三档总高 24 / 28 / 32)、`bordered`(1px 外框,总高不变)、`multiple`(多选)。外观只有一套:灰底轨道 + 白色选中片,选中片的描边环与阴影由宿主 elevation token
|
|
116
|
-
en: 'Segmented: `items` (required) supports single or multiple selection; `size` (default lg; totals 24 / 28 / 32), `bordered` (1px outer frame, same total height), `multiple` (multi-select). One look only: grey track + white selected pill; its stroke ring and shadow come from the host elevation token (the offline fallback has no ring). An item’s `count` (muted text) and `badge` (red pill) take `number | string`: numbers ≤0 render nothing, strings render as given (e.g. `\'1K\'` / `\'99+\'`).',
|
|
115
|
+
zh: 'Segmented:`items`(必填)支持单选 / 多选,`size`(默认 lg;三档总高 24 / 28 / 32)、`bordered`(1px 外框,总高不变)、`multiple`(多选)。外观只有一套:灰底轨道 + 白色选中片,选中片的描边环与阴影由宿主 elevation token 提供(离线兜底值没有那圈环)。选中片配色只经 `tone`:传内置色名(与 Chip 同名的 business / success / warning / danger / purple / pink / cyan / teal / orange / indigo / rose / slate)时底与字由核心定、深浅两主题各自成立;传 `{ bg, fg }` 时两个主题都用调用方这一对颜色(对比度由调用方负责)。段内 `count`(弱化灰字)/ `badge`(红角标)接受 `number | string`:数字 ≤0 不显示,字符串原样显示(如 `1K` / `99+`)。',
|
|
116
|
+
en: 'Segmented: `items` (required) supports single or multiple selection; `size` (default lg; totals 24 / 28 / 32), `bordered` (1px outer frame, same total height), `multiple` (multi-select). One look only: grey track + white selected pill; its stroke ring and shadow come from the host elevation token (the offline fallback has no ring). The selected pill’s colors go through `tone` only: a built-in color name (business / success / warning / danger / purple / pink / cyan / teal / orange / indigo / rose / slate, same names as Chip) lets the core pick background and text per theme; `{ bg, fg }` uses that pair verbatim in both themes (contrast is the caller’s call). An item’s `count` (muted text) and `badge` (red pill) take `number | string`: numbers ≤0 render nothing, strings render as given (e.g. `\'1K\'` / `\'99+\'`).',
|
|
117
117
|
},
|
|
118
118
|
],
|
|
119
119
|
api: [
|
package/docs/help/ui.md
CHANGED
|
@@ -42,9 +42,9 @@ IconButton:variant: plain|outline|danger(默认 plain)、size(默认 lg
|
|
|
42
42
|
|
|
43
43
|
> EN: IconButton: variant plain|outline|danger (default plain), size (default lg), icon (required), label (required, doubles as a11y name and title).
|
|
44
44
|
|
|
45
|
-
Segmented:`items`(必填)支持单选 / 多选,`size`(默认 lg;三档总高 24 / 28 / 32)、`bordered`(1px 外框,总高不变)、`multiple`(多选)。外观只有一套:灰底轨道 + 白色选中片,选中片的描边环与阴影由宿主 elevation token
|
|
45
|
+
Segmented:`items`(必填)支持单选 / 多选,`size`(默认 lg;三档总高 24 / 28 / 32)、`bordered`(1px 外框,总高不变)、`multiple`(多选)。外观只有一套:灰底轨道 + 白色选中片,选中片的描边环与阴影由宿主 elevation token 提供(离线兜底值没有那圈环)。选中片配色只经 `tone`:传内置色名(与 Chip 同名的 business / success / warning / danger / purple / pink / cyan / teal / orange / indigo / rose / slate)时底与字由核心定、深浅两主题各自成立;传 `{ bg, fg }` 时两个主题都用调用方这一对颜色(对比度由调用方负责)。段内 `count`(弱化灰字)/ `badge`(红角标)接受 `number | string`:数字 ≤0 不显示,字符串原样显示(如 `1K` / `99+`)。
|
|
46
46
|
|
|
47
|
-
> EN: Segmented: `items` (required) supports single or multiple selection; `size` (default lg; totals 24 / 28 / 32), `bordered` (1px outer frame, same total height), `multiple` (multi-select). One look only: grey track + white selected pill; its stroke ring and shadow come from the host elevation token (the offline fallback has no ring). An item’s `count` (muted text) and `badge` (red pill) take `number | string`: numbers ≤0 render nothing, strings render as given (e.g. `'1K'` / `'99+'`).
|
|
47
|
+
> EN: Segmented: `items` (required) supports single or multiple selection; `size` (default lg; totals 24 / 28 / 32), `bordered` (1px outer frame, same total height), `multiple` (multi-select). One look only: grey track + white selected pill; its stroke ring and shadow come from the host elevation token (the offline fallback has no ring). The selected pill’s colors go through `tone` only: a built-in color name (business / success / warning / danger / purple / pink / cyan / teal / orange / indigo / rose / slate, same names as Chip) lets the core pick background and text per theme; `{ bg, fg }` uses that pair verbatim in both themes (contrast is the caller’s call). An item’s `count` (muted text) and `badge` (red pill) take `number | string`: numbers ≤0 render nothing, strings render as given (e.g. `'1K'` / `'99+'`).
|
|
48
48
|
|
|
49
49
|
| 参数 | 类型 | 默认 | 说明(zh) | 说明(en) |
|
|
50
50
|
|---|---|---|---|---|
|
package/package.json
CHANGED