@greypan/web-ui 8.1.0 → 9.1.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/README.CN.md +309 -135
- package/README.md +311 -135
- package/dist/assets/glass.js +1 -1
- package/dist/assets/glass.js.map +1 -1
- package/dist/assets/menu-portal.js +1 -1
- package/dist/assets/menu-portal.js.map +1 -1
- package/dist/assets/modal-surface.js +6 -0
- package/dist/assets/modal-surface.js.map +1 -0
- package/dist/assets/selection-control.js +1 -1
- package/dist/assets/selection-control.js.map +1 -1
- package/dist/assets/toast-containers.js +1 -1
- package/dist/assets/toast-containers.js.map +1 -1
- package/dist/components/autocomplete/index.d.ts +3 -2
- package/dist/components/autocomplete/index.js +40 -44
- package/dist/components/autocomplete/index.js.map +1 -1
- package/dist/components/autocomplete/style.js +1 -1
- package/dist/components/autocomplete/style.js.map +1 -1
- package/dist/components/avatar/index.js.map +1 -1
- package/dist/components/avatar/style.js +1 -1
- package/dist/components/avatar/style.js.map +1 -1
- package/dist/components/back-top/style.js +1 -1
- package/dist/components/back-top/style.js.map +1 -1
- package/dist/components/badge/style.js +1 -1
- package/dist/components/badge/style.js.map +1 -1
- package/dist/components/button/style.js +1 -1
- package/dist/components/button/style.js.map +1 -1
- package/dist/components/button-group/index.js +0 -1
- package/dist/components/button-group/index.js.map +1 -1
- package/dist/components/button-group/style.js +1 -1
- package/dist/components/button-group/style.js.map +1 -1
- package/dist/components/checkbox/index.js +4 -4
- package/dist/components/checkbox/index.js.map +1 -1
- package/dist/components/checkbox-group/style.js +1 -1
- package/dist/components/checkbox-group/style.js.map +1 -1
- package/dist/components/context-menu/index.d.ts +182 -3
- package/dist/components/context-menu/index.js +166 -91
- package/dist/components/context-menu/index.js.map +1 -1
- package/dist/components/context-menu/scrim.js +6 -0
- package/dist/components/context-menu/scrim.js.map +1 -0
- package/dist/components/context-menu/style.js +1 -1
- package/dist/components/context-menu/style.js.map +1 -1
- package/dist/components/dialog/index.d.ts +9 -0
- package/dist/components/dialog/index.js +68 -46
- package/dist/components/dialog/index.js.map +1 -1
- package/dist/components/dialog/style.js +1 -1
- package/dist/components/dialog/style.js.map +1 -1
- package/dist/components/drawer/index.d.ts +45 -0
- package/dist/components/drawer/index.js +122 -53
- package/dist/components/drawer/index.js.map +1 -1
- package/dist/components/drawer/style.js +1 -1
- package/dist/components/drawer/style.js.map +1 -1
- package/dist/components/dropdown/index.d.ts +12 -0
- package/dist/components/dropdown/index.js +13 -10
- package/dist/components/dropdown/index.js.map +1 -1
- package/dist/components/dropdown-divider/style.js +1 -1
- package/dist/components/dropdown-divider/style.js.map +1 -1
- package/dist/components/dropdown-header/style.js +1 -1
- package/dist/components/dropdown-header/style.js.map +1 -1
- package/dist/components/dropdown-item/style.js +1 -1
- package/dist/components/dropdown-item/style.js.map +1 -1
- package/dist/components/editable-text/index.d.ts +39 -0
- package/dist/components/editable-text/index.js +6 -2
- package/dist/components/editable-text/index.js.map +1 -1
- package/dist/components/empty/index.d.ts +21 -4
- package/dist/components/empty/index.js +37 -32
- package/dist/components/empty/index.js.map +1 -1
- package/dist/components/empty/style.js +1 -1
- package/dist/components/empty/style.js.map +1 -1
- package/dist/components/image-preview/index.js +75 -63
- package/dist/components/image-preview/index.js.map +1 -1
- package/dist/components/image-preview/style.js +1 -1
- package/dist/components/image-preview/style.js.map +1 -1
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +38 -37
- package/dist/components/input/style.js +1 -1
- package/dist/components/input/style.js.map +1 -1
- package/dist/components/input-number/style.js +1 -1
- package/dist/components/input-number/style.js.map +1 -1
- package/dist/components/layout/index.d.ts +21 -6
- package/dist/components/layout/index.js +47 -27
- package/dist/components/layout/index.js.map +1 -1
- package/dist/components/layout/style.js +1 -1
- package/dist/components/layout/style.js.map +1 -1
- package/dist/components/middle-ellipsis/index.d.ts +100 -0
- package/dist/components/middle-ellipsis/index.js +112 -0
- package/dist/components/middle-ellipsis/index.js.map +1 -0
- package/dist/components/middle-ellipsis/style.js +6 -0
- package/dist/components/middle-ellipsis/style.js.map +1 -0
- package/dist/components/middle-ellipsis/truncate.d.ts +62 -0
- package/dist/components/middle-ellipsis/truncate.js +45 -0
- package/dist/components/middle-ellipsis/truncate.js.map +1 -0
- package/dist/components/option/style.js +1 -1
- package/dist/components/option/style.js.map +1 -1
- package/dist/components/popover/index.js.map +1 -1
- package/dist/components/popover/style.js +1 -1
- package/dist/components/popover/style.js.map +1 -1
- package/dist/components/radio/style.js +1 -1
- package/dist/components/radio/style.js.map +1 -1
- package/dist/components/radio-group/style.js +1 -1
- package/dist/components/radio-group/style.js.map +1 -1
- package/dist/components/segmented/index.d.ts +5 -0
- package/dist/components/segmented/index.js +45 -28
- package/dist/components/segmented/index.js.map +1 -1
- package/dist/components/segmented/style.js +1 -1
- package/dist/components/segmented/style.js.map +1 -1
- package/dist/components/segmented-trigger/style.js +1 -1
- package/dist/components/segmented-trigger/style.js.map +1 -1
- package/dist/components/select/index.js +0 -1
- package/dist/components/select/index.js.map +1 -1
- package/dist/components/select/style.js +1 -1
- package/dist/components/select/style.js.map +1 -1
- package/dist/components/slider/style.js +1 -1
- package/dist/components/slider/style.js.map +1 -1
- package/dist/components/spinner/style.js +1 -1
- package/dist/components/spinner/style.js.map +1 -1
- package/dist/components/svg-draw-lines/index.js.map +1 -1
- package/dist/components/switch/style.js +1 -1
- package/dist/components/switch/style.js.map +1 -1
- package/dist/components/textarea/index.js +2 -2
- package/dist/components/textarea/index.js.map +1 -1
- package/dist/components/textarea/style.js +1 -1
- package/dist/components/textarea/style.js.map +1 -1
- package/dist/components/theme/style.js +1 -1
- package/dist/components/theme/style.js.map +1 -1
- package/dist/components/toast/style.js +1 -1
- package/dist/components/toast/style.js.map +1 -1
- package/dist/components/tooltip/index.js.map +1 -1
- package/dist/components/tooltip/style.js +1 -1
- package/dist/components/tooltip/style.js.map +1 -1
- package/dist/icons/generated/akar-icons-circle-check.d.ts +6 -0
- package/dist/icons/generated/akar-icons-circle-check.js +10 -0
- package/dist/icons/generated/akar-icons-circle-check.js.map +1 -0
- package/dist/icons/generated/bi-check-lg.d.ts +6 -0
- package/dist/icons/generated/bi-check-lg.js +10 -0
- package/dist/icons/generated/bi-check-lg.js.map +1 -0
- package/dist/icons/generated/fluent-tag-search-24-regular.d.ts +6 -0
- package/dist/icons/generated/fluent-tag-search-24-regular.js +10 -0
- package/dist/icons/generated/fluent-tag-search-24-regular.js.map +1 -0
- package/dist/icons/generated/mdi-tag-search-outline.d.ts +6 -0
- package/dist/icons/generated/mdi-tag-search-outline.js +10 -0
- package/dist/icons/generated/mdi-tag-search-outline.js.map +1 -0
- package/dist/icons/index.d.ts +4 -0
- package/dist/icons/index.js +5 -1
- package/dist/scrollbars/index.d.ts +33 -0
- package/dist/scrollbars/index.js +18 -0
- package/dist/scrollbars/index.js.map +1 -0
- package/dist/scrollbars/style.css +10 -0
- package/dist/shared/element-height/index.js +47 -0
- package/dist/shared/element-height/index.js.map +1 -0
- package/dist/shared/element-width/index.js +37 -0
- package/dist/shared/element-width/index.js.map +1 -0
- package/dist/shared/menu-portal/menu-portal.js +11 -11
- package/dist/shared/menu-portal/menu-portal.js.map +1 -1
- package/dist/shared/menu-portal/menu-tree.js +2 -2
- package/dist/shared/menu-portal/menu-tree.js.map +1 -1
- package/dist/shared/overlay/anchored-panel.js.map +1 -1
- package/dist/shared/overlay/native-dialog-presence.js +23 -11
- package/dist/shared/overlay/native-dialog-presence.js.map +1 -1
- package/dist/shared/overlay/nested-drawer-layers.js +30 -23
- package/dist/shared/overlay/nested-drawer-layers.js.map +1 -1
- package/dist/shared/scroll-lock/scroll-lock.js +3 -3
- package/dist/shared/scroll-lock/scroll-lock.js.map +1 -1
- package/package.json +19 -5
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 单行「中间省略」的切分运算。
|
|
3
|
+
*
|
|
4
|
+
* 目标:把 `text` 拆成 `head + marker + tail`,两端各自在原串里连续、中间那段被丢掉,
|
|
5
|
+
* 且合串不超过可用行内空间。切点只落在**字素簇**边界上,代理对、组合符序列和 ZWJ emoji
|
|
6
|
+
* 都不会被从中间劈开——按 UTF-16 下标切一定会。
|
|
7
|
+
*
|
|
8
|
+
* 为什么这一层不能由 CSS 承担:`text-overflow` 渲染的是行盒里**一段连续**的内容,结构上
|
|
9
|
+
* 不可能同时显示首尾而丢掉中间。能靠 `direction` / 双值写法挪动的只是省略号落在行的哪一
|
|
10
|
+
* 端,而且 `direction: rtl` 那条路还会按双向算法重排内容(`2026-report.pdf` → `report.pdf-2026`)。
|
|
11
|
+
* 完整调研见 docs/research/web-ui-middle-ellipsis-261007.md。
|
|
12
|
+
*
|
|
13
|
+
* 宽度口径:两端额度按 `position` 从可用空间里分出来,各自用「前 i 簇 / 后 i 簇」的**实测**
|
|
14
|
+
* 宽度二分逼近。实测走调用方给的探针(Range 读取,不写 DOM),所以重算一次只有若干次读取,
|
|
15
|
+
* 没有回流——面板里同时存在成百上千个这样的单元格时,这个差别就是「一帧一次布局」与
|
|
16
|
+
* 「一个单元格一次布局」的差别。
|
|
17
|
+
*
|
|
18
|
+
* 分段宽度不蕴含合串宽度:`head|marker` 与 `marker|tail` 两个接缝的字距和连字是分段量看不见
|
|
19
|
+
* 的。这里不做合串实测,因为那要写一次 DOM 再读、把上面省下的回流又付回去;复核交给调用方
|
|
20
|
+
* 对着**渲染出来的真实盒子**做一次(见组件的 `updated()`),那才是「放得下」的直接证据。
|
|
21
|
+
*/
|
|
22
|
+
/** 默认省略标记:U+2026 HORIZONTAL ELLIPSIS。 */
|
|
23
|
+
export declare const DEFAULT_MARKER = "\u2026";
|
|
24
|
+
/**
|
|
25
|
+
* 每个字素簇的 UTF-16 结束偏移(升序,不含 0),末项恒等于 `text.length`。
|
|
26
|
+
*
|
|
27
|
+
* `Intl.Segmenter` 的构造不便宜,单例复用。目标浏览器(见 package.json 的 browserslist)
|
|
28
|
+
* 与本地 node 测试环境都自带它,因此不写按码点切的退化分支——那会在部分环境里悄悄改变
|
|
29
|
+
* 切分口径,而这正是本模块唯一的正确性来源。
|
|
30
|
+
*/
|
|
31
|
+
export declare function clusterEnds(text: string): number[];
|
|
32
|
+
/**
|
|
33
|
+
* 宽度探针。
|
|
34
|
+
*
|
|
35
|
+
* 三段都必须是**真实排版**下量到的宽度:字体回退、字距、连字、`letter-spacing`、
|
|
36
|
+
* `text-transform` 都会改变字形的推进量,任何独立的估算(例如用 canvas 的 `measureText`)
|
|
37
|
+
* 都要自己复刻这一整套解析,复刻不全就是静默的量错。
|
|
38
|
+
*/
|
|
39
|
+
export interface WidthProbe {
|
|
40
|
+
/** 原文前 `units` 个 UTF-16 单元的渲染宽度。 */
|
|
41
|
+
prefix(units: number): number;
|
|
42
|
+
/** 原文后 `units` 个 UTF-16 单元的渲染宽度。 */
|
|
43
|
+
suffix(units: number): number;
|
|
44
|
+
/** 标记自身的渲染宽度。 */
|
|
45
|
+
marker(): number;
|
|
46
|
+
}
|
|
47
|
+
export interface MiddleTruncation {
|
|
48
|
+
/** 保留的原文前缀。 */
|
|
49
|
+
readonly head: string;
|
|
50
|
+
/** 保留的原文后缀。 */
|
|
51
|
+
readonly tail: string;
|
|
52
|
+
/** 是否真的丢掉了内容;`false` 时合串就是原文,标记不出现。 */
|
|
53
|
+
readonly truncated: boolean;
|
|
54
|
+
}
|
|
55
|
+
/**
|
|
56
|
+
* 在 `available` 内把 `text` 切成 `head + marker + tail`。
|
|
57
|
+
*
|
|
58
|
+
* `position` 与 CSSWG css-overflow-5 的 `text-overflow: ellipsis <length-percentage>` 同向:
|
|
59
|
+
* 量的是标记结束边距行末边的距离占可用行内空间的比例。`0` 把标记贴在行末(只剩头部,等价于
|
|
60
|
+
* 末尾省略),`100` 贴在行首(只剩尾部),`50` 居中;两端额度因此是 `(1 - p)` 与 `p`。
|
|
61
|
+
*/
|
|
62
|
+
export declare function truncateMiddle(text: string, marker: string, position: number, available: number, probe: WidthProbe): MiddleTruncation;
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
//#region src/components/middle-ellipsis/truncate.ts
|
|
2
|
+
var e;
|
|
3
|
+
function t(t) {
|
|
4
|
+
if (t === "") return [];
|
|
5
|
+
e ??= new Intl.Segmenter(void 0, { granularity: "grapheme" });
|
|
6
|
+
let n = [];
|
|
7
|
+
for (let { index: r, segment: i } of e.segment(t)) n.push(r + i.length);
|
|
8
|
+
return n;
|
|
9
|
+
}
|
|
10
|
+
function n(e, t) {
|
|
11
|
+
let n = 0, r = e;
|
|
12
|
+
for (; n < r;) {
|
|
13
|
+
let e = n + r + 1 >> 1;
|
|
14
|
+
t(e) ? n = e : r = e - 1;
|
|
15
|
+
}
|
|
16
|
+
return n;
|
|
17
|
+
}
|
|
18
|
+
function r(e, r, i, a, o) {
|
|
19
|
+
if (e === "") return {
|
|
20
|
+
head: "",
|
|
21
|
+
tail: "",
|
|
22
|
+
truncated: !1
|
|
23
|
+
};
|
|
24
|
+
if (o.prefix(e.length) <= a) return {
|
|
25
|
+
head: e,
|
|
26
|
+
tail: "",
|
|
27
|
+
truncated: !1
|
|
28
|
+
};
|
|
29
|
+
let s = t(e), c = s.length, l = a - o.marker();
|
|
30
|
+
if (l <= 0) return {
|
|
31
|
+
head: "",
|
|
32
|
+
tail: "",
|
|
33
|
+
truncated: !0
|
|
34
|
+
};
|
|
35
|
+
let u = Math.min(1, Math.max(0, i / 100)), d = l * (1 - u), f = l * u, p = (e) => e === 0 ? 0 : s[e - 1] ?? 0, m = (t) => t === 0 ? e.length : s[c - t - 1] ?? 0, h = n(c, (e) => o.prefix(p(e)) <= d), g = n(c, (t) => o.suffix(e.length - m(t)) <= f);
|
|
36
|
+
return h + g > c && (h = Math.min(h, c), g = c - h), {
|
|
37
|
+
head: e.slice(0, p(h)),
|
|
38
|
+
tail: e.slice(m(g)),
|
|
39
|
+
truncated: !0
|
|
40
|
+
};
|
|
41
|
+
}
|
|
42
|
+
//#endregion
|
|
43
|
+
export { t as clusterEnds, r as truncateMiddle };
|
|
44
|
+
|
|
45
|
+
//# sourceMappingURL=truncate.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"truncate.js","names":[],"sources":["../../../src/components/middle-ellipsis/truncate.ts"],"sourcesContent":["/**\n * 单行「中间省略」的切分运算。\n *\n * 目标:把 `text` 拆成 `head + marker + tail`,两端各自在原串里连续、中间那段被丢掉,\n * 且合串不超过可用行内空间。切点只落在**字素簇**边界上,代理对、组合符序列和 ZWJ emoji\n * 都不会被从中间劈开——按 UTF-16 下标切一定会。\n *\n * 为什么这一层不能由 CSS 承担:`text-overflow` 渲染的是行盒里**一段连续**的内容,结构上\n * 不可能同时显示首尾而丢掉中间。能靠 `direction` / 双值写法挪动的只是省略号落在行的哪一\n * 端,而且 `direction: rtl` 那条路还会按双向算法重排内容(`2026-report.pdf` → `report.pdf-2026`)。\n * 完整调研见 docs/research/web-ui-middle-ellipsis-261007.md。\n *\n * 宽度口径:两端额度按 `position` 从可用空间里分出来,各自用「前 i 簇 / 后 i 簇」的**实测**\n * 宽度二分逼近。实测走调用方给的探针(Range 读取,不写 DOM),所以重算一次只有若干次读取,\n * 没有回流——面板里同时存在成百上千个这样的单元格时,这个差别就是「一帧一次布局」与\n * 「一个单元格一次布局」的差别。\n *\n * 分段宽度不蕴含合串宽度:`head|marker` 与 `marker|tail` 两个接缝的字距和连字是分段量看不见\n * 的。这里不做合串实测,因为那要写一次 DOM 再读、把上面省下的回流又付回去;复核交给调用方\n * 对着**渲染出来的真实盒子**做一次(见组件的 `updated()`),那才是「放得下」的直接证据。\n */\n\n/** 默认省略标记:U+2026 HORIZONTAL ELLIPSIS。 */\nexport const DEFAULT_MARKER = '…'\n\nlet segmenter: Intl.Segmenter | undefined\n\n/**\n * 每个字素簇的 UTF-16 结束偏移(升序,不含 0),末项恒等于 `text.length`。\n *\n * `Intl.Segmenter` 的构造不便宜,单例复用。目标浏览器(见 package.json 的 browserslist)\n * 与本地 node 测试环境都自带它,因此不写按码点切的退化分支——那会在部分环境里悄悄改变\n * 切分口径,而这正是本模块唯一的正确性来源。\n */\nexport function clusterEnds(text: string): number[] {\n if (text === '') return []\n\n segmenter ??= new Intl.Segmenter(undefined, { granularity: 'grapheme' })\n\n const ends: number[] = []\n for (const { index, segment } of segmenter.segment(text)) ends.push(index + segment.length)\n return ends\n}\n\n/**\n * 宽度探针。\n *\n * 三段都必须是**真实排版**下量到的宽度:字体回退、字距、连字、`letter-spacing`、\n * `text-transform` 都会改变字形的推进量,任何独立的估算(例如用 canvas 的 `measureText`)\n * 都要自己复刻这一整套解析,复刻不全就是静默的量错。\n */\nexport interface WidthProbe {\n /** 原文前 `units` 个 UTF-16 单元的渲染宽度。 */\n prefix(units: number): number\n /** 原文后 `units` 个 UTF-16 单元的渲染宽度。 */\n suffix(units: number): number\n /** 标记自身的渲染宽度。 */\n marker(): number\n}\n\nexport interface MiddleTruncation {\n /** 保留的原文前缀。 */\n readonly head: string\n /** 保留的原文后缀。 */\n readonly tail: string\n /** 是否真的丢掉了内容;`false` 时合串就是原文,标记不出现。 */\n readonly truncated: boolean\n}\n\n/** 宽度对簇数单调不减,因此可以二分求预算内放得下的最大簇数。 */\nfunction fitCount(total: number, fits: (count: number) => boolean): number {\n let lo = 0\n let hi = total\n while (lo < hi) {\n const mid = (lo + hi + 1) >> 1\n if (fits(mid)) lo = mid\n else hi = mid - 1\n }\n return lo\n}\n\n/**\n * 在 `available` 内把 `text` 切成 `head + marker + tail`。\n *\n * `position` 与 CSSWG css-overflow-5 的 `text-overflow: ellipsis <length-percentage>` 同向:\n * 量的是标记结束边距行末边的距离占可用行内空间的比例。`0` 把标记贴在行末(只剩头部,等价于\n * 末尾省略),`100` 贴在行首(只剩尾部),`50` 居中;两端额度因此是 `(1 - p)` 与 `p`。\n */\nexport function truncateMiddle(\n text: string,\n marker: string,\n position: number,\n available: number,\n probe: WidthProbe\n): MiddleTruncation {\n if (text === '') return { head: '', tail: '', truncated: false }\n\n // 放得下就不截断,一个字符都不动——这既是正确性也是「短文本不该出现省略号」的体检点。\n if (probe.prefix(text.length) <= available) return { head: text, tail: '', truncated: false }\n\n const ends = clusterEnds(text)\n const total = ends.length\n\n /*\n * 标记自己都放不下的快速路径:让标记溢出、由 overflow 把它裁掉(与 text-overflow 的既有语义\n * 一致),而不是退回全文——退回全文会把标记挤出盒外,用户连「这里被截断了」的信号都看不到。\n *\n * 这一条不是正确性分支:预算为负时下面的通用路径同样得到 head / tail 都为空(`prefix(0) = 0`\n * 不满足 `<= 负数`,两次二分都返回 0)。变异验证过——把它改成 `available <= 0`,整套测试仍全绿。\n * 留着只是省掉两次二分,并把「标记放不下」这个意图写在明面上。\n */\n const space = available - probe.marker()\n if (space <= 0) return { head: '', tail: '', truncated: true }\n\n const ratio = Math.min(1, Math.max(0, position / 100))\n const headBudget = space * (1 - ratio)\n const tailBudget = space * ratio\n\n /** 前 `count` 个簇在原串里的结束偏移。 */\n const headEnd = (count: number): number => (count === 0 ? 0 : (ends[count - 1] ?? 0))\n /** 后 `count` 个簇在原串里的起始偏移。 */\n const tailStart = (count: number): number => (count === 0 ? text.length : (ends[total - count - 1] ?? 0))\n\n let headCount = fitCount(total, count => probe.prefix(headEnd(count)) <= headBudget)\n let tailCount = fitCount(total, count => probe.suffix(text.length - tailStart(count)) <= tailBudget)\n\n /*\n * 两端选中的簇加起来超过原文长度时,说明合串其实放得下,与上面的早退矛盾——那一步已经\n * 用同一个探针量过全文。浮点误差仍可能把两个预算都推过界一点点,这里按头部优先夹紧,\n * 保证 head 与 tail 不重叠。\n */\n if (headCount + tailCount > total) {\n headCount = Math.min(headCount, total)\n tailCount = total - headCount\n }\n\n return {\n head: text.slice(0, headEnd(headCount)),\n tail: text.slice(tailStart(tailCount)),\n truncated: true\n }\n}\n"],"mappings":";AAyBA,IAAI;AASJ,SAAgB,EAAY,GAAwB;CAClD,IAAI,MAAS,IAAI,OAAO,CAAC;CAEzB,MAAc,IAAI,KAAK,UAAU,KAAA,GAAW,EAAE,aAAa,WAAW,CAAC;CAEvE,IAAM,IAAiB,CAAC;CACxB,KAAK,IAAM,EAAE,UAAO,gBAAa,EAAU,QAAQ,CAAI,GAAG,EAAK,KAAK,IAAQ,EAAQ,MAAM;CAC1F,OAAO;AACT;AA4BA,SAAS,EAAS,GAAe,GAA0C;CACzE,IAAI,IAAK,GACL,IAAK;CACT,OAAO,IAAK,IAAI;EACd,IAAM,IAAO,IAAK,IAAK,KAAM;EAC7B,AAAI,EAAK,CAAG,IAAG,IAAK,IACf,IAAK,IAAM;CAClB;CACA,OAAO;AACT;AASA,SAAgB,EACd,GACA,GACA,GACA,GACA,GACkB;CAClB,IAAI,MAAS,IAAI,OAAO;EAAE,MAAM;EAAI,MAAM;EAAI,WAAW;CAAM;CAG/D,IAAI,EAAM,OAAO,EAAK,MAAM,KAAK,GAAW,OAAO;EAAE,MAAM;EAAM,MAAM;EAAI,WAAW;CAAM;CAE5F,IAAM,IAAO,EAAY,CAAI,GACvB,IAAQ,EAAK,QAUb,IAAQ,IAAY,EAAM,OAAO;CACvC,IAAI,KAAS,GAAG,OAAO;EAAE,MAAM;EAAI,MAAM;EAAI,WAAW;CAAK;CAE7D,IAAM,IAAQ,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,IAAW,GAAG,CAAC,GAC/C,IAAa,KAAS,IAAI,IAC1B,IAAa,IAAQ,GAGrB,KAAW,MAA2B,MAAU,IAAI,IAAK,EAAK,IAAQ,MAAM,GAE5E,KAAa,MAA2B,MAAU,IAAI,EAAK,SAAU,EAAK,IAAQ,IAAQ,MAAM,GAElG,IAAY,EAAS,IAAO,MAAS,EAAM,OAAO,EAAQ,CAAK,CAAC,KAAK,CAAU,GAC/E,IAAY,EAAS,IAAO,MAAS,EAAM,OAAO,EAAK,SAAS,EAAU,CAAK,CAAC,KAAK,CAAU;CAYnG,OALI,IAAY,IAAY,MAC1B,IAAY,KAAK,IAAI,GAAW,CAAK,GACrC,IAAY,IAAQ,IAGf;EACL,MAAM,EAAK,MAAM,GAAG,EAAQ,CAAS,CAAC;EACtC,MAAM,EAAK,MAAM,EAAU,CAAS,CAAC;EACrC,WAAW;CACb;AACF"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
//#region src/components/option/style.css?inline
|
|
2
|
-
var e = "*,:before,:after{box-sizing:border-box}:host{display:block}:host([disabled]){cursor:not-allowed;opacity:.4}.option-label{cursor:default;-webkit-user-select:none;user-select:none;box-sizing:border-box;border-radius:var(--wui-radius-control,calc(infinity * 1px));
|
|
2
|
+
var e = "*,:before,:after{box-sizing:border-box}:host{display:block}:host([disabled]){cursor:not-allowed;opacity:.4}.option-label{cursor:default;-webkit-user-select:none;user-select:none;gap:var(--wui-space-2,8px);box-sizing:border-box;height:32px;padding:0 var(--wui-space-2,8px);border-radius:var(--wui-radius-control,calc(infinity * 1px));font-size:var(--wui-font-size,14px);color:var(--wui-color-text,#1b1b1b);text-overflow:ellipsis;white-space:nowrap;align-items:center;display:flex;overflow:hidden}.check{display:var(--wui-option-check-display,block);flex-shrink:0}.content-wrap{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}:host(:not([selected])) .check{visibility:hidden}::slotted([slot=prefix]),::slotted([slot=suffix]){flex-shrink:0}.option-label:focus-visible{outline:var(--wui-focus-ring-width,3px) solid var(--wui-color-focus-ring,color-mix(in srgb, var(--wui-color-accent,#08f) 40%, transparent));outline-offset:2px}:host([active]) .option-label{color:var(--wui-color-on-accent,#fff);background:var(--wui-color-accent,#08f)}@media (hover:hover) and (pointer:fine){:host(:not([active])) .option-label:hover{background:var(--wui-color-border,#0000001a)}}:host([disabled]) .option-label{cursor:not-allowed}";
|
|
3
3
|
//#endregion
|
|
4
4
|
export { e as default };
|
|
5
5
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/option/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n display: block;\n}\n\n:host([disabled]) {\n cursor: not-allowed;\n opacity: 0.4;\n}\n\n.option-label {\n cursor: default;\n user-select: none;\n\n overflow: hidden;\n display: flex;\n gap: 8px;\n align-items: center;\n\n box-sizing: border-box;\n height: 32px;\n padding: 0 8px;\n border-radius: var(--wui-radius-control, calc(infinity * 1px));\n\n font-size: var(--wui-font-size, 14px);\n color: var(--wui-color-text, #1b1b1b);\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.check {\n display: var(--wui-option-check-display, block);\n flex-shrink: 0;\n}\n\n.content-wrap {\n overflow: hidden;\n flex: 1;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n:host(:not([selected])) .check {\n visibility: hidden;\n}\n\n::slotted([slot='prefix']),\n::slotted([slot='suffix']) {\n flex-shrink: 0;\n}\n\n.option-label:focus-visible {\n outline: var(--wui-focus-ring-width, 3px) solid
|
|
1
|
+
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/option/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n display: block;\n}\n\n:host([disabled]) {\n cursor: not-allowed;\n opacity: 0.4;\n}\n\n.option-label {\n cursor: default;\n user-select: none;\n\n overflow: hidden;\n display: flex;\n gap: var(--wui-space-2, 8px);\n align-items: center;\n\n box-sizing: border-box;\n height: 32px;\n padding: 0 var(--wui-space-2, 8px);\n border-radius: var(--wui-radius-control, calc(infinity * 1px));\n\n font-size: var(--wui-font-size, 14px);\n color: var(--wui-color-text, #1b1b1b);\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.check {\n display: var(--wui-option-check-display, block);\n flex-shrink: 0;\n}\n\n.content-wrap {\n overflow: hidden;\n flex: 1;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n:host(:not([selected])) .check {\n visibility: hidden;\n}\n\n::slotted([slot='prefix']),\n::slotted([slot='suffix']) {\n flex-shrink: 0;\n}\n\n.option-label:focus-visible {\n outline: var(--wui-focus-ring-width, 3px) solid\n var(--wui-color-focus-ring, color-mix(in srgb, var(--wui-color-accent, #08f) 40%, transparent));\n outline-offset: 2px;\n}\n\n:host([active]) .option-label {\n color: var(--wui-color-on-accent, #fff);\n background: var(--wui-color-accent, #08f);\n}\n\n@media (hover: hover) and (pointer: fine) {\n :host(:not([active])) .option-label:hover {\n background: var(--wui-color-border, rgb(0 0 0 / 0.1));\n }\n}\n\n:host([disabled]) .option-label {\n cursor: not-allowed;\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/popover/index.ts"],"sourcesContent":["import type { Placement } from '@floating-ui/dom'\nimport { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport glass from '@/assets/glass.css?inline'\nimport overlayMotion from '@/assets/overlay-motion.css?inline'\nimport { UserChangeController } from '@/shared/events/user-change'\nimport { normalizeLiteral, normalizeNumber } from '@/shared/normalize'\nimport { dispatchOpenChangeEvent } from '@/shared/open-state'\nimport { defineAnchoredPanel } from '@/shared/overlay/anchored-panel'\nimport { defineOpenOverlay } from '@/shared/overlay/open-overlay'\nimport { FLOATING_PLACEMENTS } from '@/shared/overlay/placement-props'\nimport { defineOverlayPortal } from '@/shared/overlay/portal'\nimport type { OverlayContainer, OverlayPortal } from '@/shared/overlay/portal'\n\nimport style from './style.css?inline'\n\nconst ALLOWED_TRIGGERS = ['click', 'hover', 'manual'] as const\n\nlet popoverIdCounter = 0\n\n@customElement('web-ui-popover')\nexport class WebUiPopover extends LitElement {\n static override styles = [unsafeCSS(glass), unsafeCSS(overlayMotion), unsafeCSS(style)]\n\n @property({ type: Boolean, reflect: true }) open = false\n @property({ type: Boolean, reflect: true }) disabled = false\n\n @property({ type: String, reflect: true })\n get placement(): Placement {\n return this._placement\n }\n set placement(v: string) {\n const old = this._placement\n this._placement = normalizeLiteral(v, FLOATING_PLACEMENTS, 'bottom')\n this.requestUpdate('placement', old)\n }\n private _placement: Placement = 'bottom'\n\n @property({ type: Number })\n get offset(): number {\n return this._offset\n }\n set offset(v: number) {\n const old = this._offset\n this._offset = normalizeNumber(v, 0, 100, 8)\n this.requestUpdate('offset', old)\n }\n private _offset = 8\n\n @property({ type: String, reflect: true })\n get trigger(): 'click' | 'hover' | 'manual' {\n return this._trigger\n }\n set trigger(v: string) {\n const old = this._trigger\n this._trigger = normalizeLiteral(v, ALLOWED_TRIGGERS, 'click')\n this.requestUpdate('trigger', old)\n }\n private _trigger: 'click' | 'hover' | 'manual' = 'click'\n\n @property({ type: Boolean, reflect: true }) portal = false\n @property({ attribute: false }) overlayContainer?: OverlayContainer\n\n private _showTimer?: ReturnType<typeof setTimeout>\n private _hideTimer?: ReturnType<typeof setTimeout>\n private readonly _userOpenChange = new UserChangeController()\n private _shouldOpenInstantly = true\n\n private _panelId = `wui-popover-panel-${++popoverIdCounter}`\n private _portal?: OverlayPortal\n /**\n * 开启态浮层(issue #120 Block 1):本组件不再自行监听 keydown,只声明「我开着」,\n * 由唯一仲裁者决定一次 Escape 关谁。实例作用域的帧事务入口也在这里(合并了原\n * lifecycle)—— 它的 lifetime 长于一次开合(跨 `suspend()`/`resume()`),\n * 但不长于实例本身。\n */\n private readonly _overlay = defineOpenOverlay().make({\n requestClose: () => {\n this._userOpenChange.mark()\n this.open = false\n },\n isConnected: () => this.isConnected\n })\n private readonly _panel = defineAnchoredPanel().make({\n getAnchor: () => this.shadowRoot?.querySelector<HTMLElement>('.popover-trigger') ?? null,\n getLocalPanel: () => this.shadowRoot?.querySelector<HTMLElement>('.popover-panel') ?? null,\n getPositioning: () => ({\n placement: this.placement,\n offset: this.offset,\n strategy: this.portal ? 'fixed' : 'absolute'\n }),\n isPortal: () => this.portal,\n createPortal: () => this._createPortal(),\n openOverlay: this._overlay\n })\n\n get isOpen(): boolean {\n return this.open\n }\n\n override connectedCallback() {\n super.connectedCallback()\n this._overlay.resume()\n document.addEventListener('click', this._onClickOutside)\n this.addEventListener('focusout', this._onFocusOut)\n this._syncTriggerListeners()\n }\n\n override firstUpdated() {\n // trigger slot 内容增删不触发宿主响应式更新:显式请求一轮渲染,\n // 由 updated() 的 ARIA 回写覆盖晚到的 trigger 元素。\n this.shadowRoot\n ?.querySelector<HTMLSlotElement>('slot[name=\"trigger\"]')\n ?.addEventListener('slotchange', () => this.requestUpdate())\n\n if (this.open) {\n // 建立会话的那一帧没有句柄可作 liveness 凭据:关闭路径会 invalidate()(见 updated),\n // 微任务先于 rAF 排空,因此该帧不可能跨过一次关闭执行。\n this._overlay.scheduleFrame(() => {\n this._openOverlay(this._shouldOpenInstantly)\n })\n this._shouldOpenInstantly = true\n }\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback()\n document.removeEventListener('click', this._onClickOutside)\n this.removeEventListener('focusout', this._onFocusOut)\n this.removeEventListener('pointerenter', this._onPointerEnter)\n this.removeEventListener('pointerleave', this._onPointerLeave)\n // 停止帧调度;撤销登记由 _panel.dispose() 完成(句柄归它持有)。\n this._overlay.suspend()\n clearTimeout(this._showTimer)\n clearTimeout(this._hideTimer)\n this._panel.dispose()\n }\n\n protected override updated(changed: Map<string, unknown>) {\n // ARIA 回写不依赖 open 分支,任何渲染后都保持与宿主状态同步。\n this._syncTriggerAria()\n\n if (changed.has('portal') || changed.has('overlayContainer')) {\n // 同帧 open + reconfigure 可能排两个回调;先结束旧事务,让 reconfigure 成为本帧唯一入口。\n this._overlay.invalidate()\n this._overlay.scheduleFrame(() => this._reconfigureOverlay())\n } else if (changed.has('placement') || changed.has('offset'))\n requestAnimationFrame(() => this._panel.updatePosition())\n\n if (changed.has('open')) {\n if (this.open) {\n const isInstant = this._shouldOpenInstantly\n this._shouldOpenInstantly = true\n this._overlay.scheduleFrame(() => {\n this._openOverlay(isInstant)\n })\n if (this._userOpenChange.consume()) this._dispatchChange(true)\n this._focusPanel()\n } else {\n this._overlay.invalidate()\n this._returnFocus()\n void this._closeOverlay()\n if (this._userOpenChange.consume()) this._dispatchChange(false)\n }\n }\n\n if (changed.has('trigger')) {\n this.removeEventListener('pointerenter', this._onPointerEnter)\n this.removeEventListener('pointerleave', this._onPointerLeave)\n clearTimeout(this._showTimer)\n clearTimeout(this._hideTimer)\n this._syncTriggerListeners()\n }\n this._syncOverlayInert()\n }\n\n show() {\n if (this.disabled || this.open) return\n this.open = true\n }\n\n close() {\n if (!this.open) return\n this.open = false\n }\n\n toggle() {\n if (this.open) this.close()\n else this.show()\n }\n\n private _isInsideShadowRoot(e: MouseEvent): boolean {\n for (const node of e.composedPath()) {\n if (node instanceof Node && node.getRootNode() === this.shadowRoot) return true\n }\n return false\n }\n\n private _syncTriggerListeners() {\n if (this.trigger === 'hover') {\n this.addEventListener('pointerenter', this._onPointerEnter)\n this.addEventListener('pointerleave', this._onPointerLeave)\n }\n }\n\n /*\n * `manual` 触发器的 popover 不由用户关闭,但仍是候选:Escape 被它吞掉(同时压掉\n * 原生 cancel),只是不走关闭入口。与旧的「跳过候选」语义不同 —— 旧语义放任 Escape\n * 落到下层浮层,把外层一起关掉。trigger 可在开启期间改写,所以走动态通道同步。\n */\n private _syncOverlayInert() {\n this._panel.getHandle()?.setInert(this.trigger === 'manual')\n }\n\n private _openOverlay(isInstant = false) {\n /*\n * 登记与仲裁归属由 anchored panel 完成(claim 要求 panel 已就位,祖先链才判得对)。\n * 原实现在这里额外以宿主为 owner 再登记一次:anchor 是宿主 shadow 内的\n * `.popover-trigger` 包装 div(不是会被 slot 重定向的 trigger 内容),其祖先链上\n * 首个已开启浮层与从宿主上溯结果一致,因此那一次是冗余的。\n */\n this._panel.open(isInstant)\n this._syncOverlayInert()\n }\n\n private _migratableContentNodes(nodes: Node[]): Node[] {\n // 框架注释锚点(v-if/v-for 占位)必须留在宿主:面板内容是实时渲染契约,\n // 框架后续 patch 以宿主内锚点为插入基准,锚点进面板会让插入落空。\n return nodes.filter(node => !(node instanceof Comment) && !(node instanceof HTMLElement && node.slot === 'trigger'))\n }\n\n private _createPortal(): OverlayPortal {\n const portal = defineOverlayPortal().make({\n container: this.overlayContainer,\n target: this,\n style: `${glass}\\n${overlayMotion}\\n${style}`,\n className: 'popover-panel portal wui-glass wui-floating-panel',\n // 已迁移节点被框架删除后的解除追踪是 portal 内建默认行为,这里无需 onContentChange\n migrateAddedNodes: addedNodes => this._migratableContentNodes(addedNodes)\n })\n this._portal = portal\n portal.panel.id = this._panelId\n portal.panel.setAttribute('role', 'dialog')\n portal.panel.tabIndex = -1\n portal.panel.addEventListener('pointerenter', this._onPanelPointerEnter)\n portal.panel.addEventListener('pointerleave', this._onPanelPointerLeave)\n portal.moveContent(this._migratableContentNodes(Array.from(this.childNodes)))\n return portal\n }\n\n private async _closeOverlay() {\n await this._panel.close(() => this.open)\n }\n\n private _reconfigureOverlay() {\n // portal 变更也会登记 rAF;宿主卸载后不得再通过 reconfigure 重建面板。\n if (!this.isConnected) return\n this._panel.reconfigure(this.open)\n /*\n * reconfigure 重新 claim = 新会话,inert 回到 false。这里的重推是**承重的**,不是\n * 防御性备份:`reconfigure` 不触发 Lit 渲染,`updated()` 那次同步不会跟着来。\n * 实测摘掉本行,「portal 变更后 Escape 仍不关闭」立刻转红(select / autocomplete 的\n * 同类重推则被各自的渲染掩盖,摘掉仍绿)。\n */\n this._syncOverlayInert()\n }\n\n private _dispatchChange(open: boolean) {\n dispatchOpenChangeEvent(this, open)\n }\n\n /*\n * trigger 包装 div 不可聚焦,AT 读不到其 aria 状态:把 aria-expanded /\n * aria-controls 同步回写到 trigger slot 的首个 assigned element(Q8a)。\n * 包装 div 上的同名属性保留(additive,兼容既有查询)。\n */\n private _syncTriggerAria() {\n const trigger = this._queryTrigger()\n if (!trigger) return\n trigger.setAttribute('aria-expanded', String(this.open))\n trigger.setAttribute('aria-controls', this._panelId)\n }\n\n private _focusPanel() {\n this._overlay.scheduleFrame(() => {\n const panel = this._panel.getPanel()\n const autofocus = panel?.querySelector<HTMLElement>('[autofocus]')\n if (autofocus && !autofocus.matches(':disabled, [disabled]')) autofocus.focus()\n })\n }\n\n private _returnFocus() {\n const panel = this._panel.getPanel()\n if (!panel?.matches(':focus-within')) return\n const trigger = this._queryTrigger()\n trigger?.focus()\n }\n\n private _queryTrigger(): HTMLElement | null {\n const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"trigger\"]')\n const el = slot?.assignedElements()[0]\n return el instanceof HTMLElement ? el : null\n }\n\n private _onTriggerClick = (event: MouseEvent) => {\n if (this.disabled) return\n clearTimeout(this._showTimer)\n clearTimeout(this._hideTimer)\n if (this.trigger === 'hover') return\n if (!this.open) this._shouldOpenInstantly = event.detail === 0\n this._userOpenChange.mark()\n this.toggle()\n }\n\n private _onClickOutside = (e: MouseEvent) => {\n if (!this.open) return\n if (this.trigger === 'manual' || this.trigger === 'hover') return\n // 在监听器内部判定:composedPath() 在派发结束后会被清空。\n if (this._panel.getHandle()?.containsEvent(e)) return\n if (this._isInsideShadowRoot(e)) return\n this._userOpenChange.mark()\n this.open = false\n }\n\n private _onFocusOut = () => {\n if (this.trigger === 'manual' || this.trigger === 'hover') return\n\n this._overlay.scheduleFrame(() => {\n if (!this.matches(':focus-within') && !this._panel.getHandle()?.hasFocusWithin()) {\n this._userOpenChange.mark()\n this.open = false\n }\n })\n }\n\n private _onPointerEnter = (e: PointerEvent) => {\n if (e.pointerType === 'touch') return\n if (this.disabled || this.trigger !== 'hover') return\n clearTimeout(this._hideTimer)\n this._showTimer = setTimeout(() => {\n this._shouldOpenInstantly = false\n if (this.open) return\n this._userOpenChange.mark()\n this.show()\n }, 100)\n }\n\n private _onPointerLeave = (e: PointerEvent) => {\n if (e.pointerType === 'touch') return\n if (this.disabled || this.trigger !== 'hover') return\n clearTimeout(this._showTimer)\n this._hideTimer = setTimeout(() => {\n if (!this.open) return\n this._userOpenChange.mark()\n this.close()\n }, 100)\n }\n\n private _onPanelPointerEnter = (e: PointerEvent) => {\n if (e.pointerType === 'touch') return\n if (this.trigger !== 'hover') return\n clearTimeout(this._hideTimer)\n }\n\n private _onPanelPointerLeave = (e: PointerEvent) => {\n if (e.pointerType === 'touch') return\n if (this.trigger !== 'hover') return\n this._hideTimer = setTimeout(() => {\n if (!this.open) return\n this._userOpenChange.mark()\n this.close()\n }, 100)\n }\n\n override render() {\n return html`\n <div class=\"popover-anchor\">\n <div\n class=\"popover-trigger\"\n aria-expanded=${String(this.open)}\n aria-controls=${this._panelId}\n @click=${this._onTriggerClick}\n >\n <slot name=\"trigger\"></slot>\n </div>\n <div\n id=${this._panelId}\n class=\"popover-panel wui-floating-panel wui-glass\"\n hidden\n role=\"dialog\"\n tabindex=\"-1\"\n @pointerenter=${this._onPanelPointerEnter}\n @pointerleave=${this._onPanelPointerLeave}\n >\n <slot></slot>\n </div>\n </div>\n `\n }\n\n declare readonly $events: {\n 'open-change': CustomEvent<{ open: boolean }>\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'web-ui-popover': WebUiPopover\n }\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/popover/index.ts"],"sourcesContent":["import type { Placement } from '@floating-ui/dom'\nimport { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport glass from '@/assets/glass.css?inline'\nimport overlayMotion from '@/assets/overlay-motion.css?inline'\nimport { UserChangeController } from '@/shared/events/user-change'\nimport { normalizeLiteral, normalizeNumber } from '@/shared/normalize'\nimport { dispatchOpenChangeEvent } from '@/shared/open-state'\nimport { defineAnchoredPanel } from '@/shared/overlay/anchored-panel'\nimport { defineOpenOverlay } from '@/shared/overlay/open-overlay'\nimport { FLOATING_PLACEMENTS } from '@/shared/overlay/placement-props'\nimport { defineOverlayPortal, type OverlayContainer, type OverlayPortal } from '@/shared/overlay/portal'\n\nimport style from './style.css?inline'\n\nconst ALLOWED_TRIGGERS = ['click', 'hover', 'manual'] as const\n\nlet popoverIdCounter = 0\n\n@customElement('web-ui-popover')\nexport class WebUiPopover extends LitElement {\n static override styles = [unsafeCSS(glass), unsafeCSS(overlayMotion), unsafeCSS(style)]\n\n @property({ type: Boolean, reflect: true }) open = false\n @property({ type: Boolean, reflect: true }) disabled = false\n\n @property({ type: String, reflect: true })\n get placement(): Placement {\n return this._placement\n }\n set placement(v: string) {\n const old = this._placement\n this._placement = normalizeLiteral(v, FLOATING_PLACEMENTS, 'bottom')\n this.requestUpdate('placement', old)\n }\n private _placement: Placement = 'bottom'\n\n @property({ type: Number })\n get offset(): number {\n return this._offset\n }\n set offset(v: number) {\n const old = this._offset\n this._offset = normalizeNumber(v, 0, 100, 8)\n this.requestUpdate('offset', old)\n }\n private _offset = 8\n\n @property({ type: String, reflect: true })\n get trigger(): 'click' | 'hover' | 'manual' {\n return this._trigger\n }\n set trigger(v: string) {\n const old = this._trigger\n this._trigger = normalizeLiteral(v, ALLOWED_TRIGGERS, 'click')\n this.requestUpdate('trigger', old)\n }\n private _trigger: 'click' | 'hover' | 'manual' = 'click'\n\n @property({ type: Boolean, reflect: true }) portal = false\n @property({ attribute: false }) overlayContainer?: OverlayContainer\n\n private _showTimer?: ReturnType<typeof setTimeout>\n private _hideTimer?: ReturnType<typeof setTimeout>\n private readonly _userOpenChange = new UserChangeController()\n private _shouldOpenInstantly = true\n\n private _panelId = `wui-popover-panel-${++popoverIdCounter}`\n private _portal?: OverlayPortal\n /**\n * 开启态浮层(issue #120 Block 1):本组件不再自行监听 keydown,只声明「我开着」,\n * 由唯一仲裁者决定一次 Escape 关谁。实例作用域的帧事务入口也在这里(合并了原\n * lifecycle)—— 它的 lifetime 长于一次开合(跨 `suspend()`/`resume()`),\n * 但不长于实例本身。\n */\n private readonly _overlay = defineOpenOverlay().make({\n requestClose: () => {\n this._userOpenChange.mark()\n this.open = false\n },\n isConnected: () => this.isConnected\n })\n private readonly _panel = defineAnchoredPanel().make({\n getAnchor: () => this.shadowRoot?.querySelector<HTMLElement>('.popover-trigger') ?? null,\n getLocalPanel: () => this.shadowRoot?.querySelector<HTMLElement>('.popover-panel') ?? null,\n getPositioning: () => ({\n placement: this.placement,\n offset: this.offset,\n strategy: this.portal ? 'fixed' : 'absolute'\n }),\n isPortal: () => this.portal,\n createPortal: () => this._createPortal(),\n openOverlay: this._overlay\n })\n\n get isOpen(): boolean {\n return this.open\n }\n\n override connectedCallback() {\n super.connectedCallback()\n this._overlay.resume()\n document.addEventListener('click', this._onClickOutside)\n this.addEventListener('focusout', this._onFocusOut)\n this._syncTriggerListeners()\n }\n\n override firstUpdated() {\n // trigger slot 内容增删不触发宿主响应式更新:显式请求一轮渲染,\n // 由 updated() 的 ARIA 回写覆盖晚到的 trigger 元素。\n this.shadowRoot\n ?.querySelector<HTMLSlotElement>('slot[name=\"trigger\"]')\n ?.addEventListener('slotchange', () => this.requestUpdate())\n\n if (this.open) {\n // 建立会话的那一帧没有句柄可作 liveness 凭据:关闭路径会 invalidate()(见 updated),\n // 微任务先于 rAF 排空,因此该帧不可能跨过一次关闭执行。\n this._overlay.scheduleFrame(() => {\n this._openOverlay(this._shouldOpenInstantly)\n })\n this._shouldOpenInstantly = true\n }\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback()\n document.removeEventListener('click', this._onClickOutside)\n this.removeEventListener('focusout', this._onFocusOut)\n this.removeEventListener('pointerenter', this._onPointerEnter)\n this.removeEventListener('pointerleave', this._onPointerLeave)\n // 停止帧调度;撤销登记由 _panel.dispose() 完成(句柄归它持有)。\n this._overlay.suspend()\n clearTimeout(this._showTimer)\n clearTimeout(this._hideTimer)\n this._panel.dispose()\n }\n\n protected override updated(changed: Map<string, unknown>) {\n // ARIA 回写不依赖 open 分支,任何渲染后都保持与宿主状态同步。\n this._syncTriggerAria()\n\n if (changed.has('portal') || changed.has('overlayContainer')) {\n // 同帧 open + reconfigure 可能排两个回调;先结束旧事务,让 reconfigure 成为本帧唯一入口。\n this._overlay.invalidate()\n this._overlay.scheduleFrame(() => this._reconfigureOverlay())\n } else if (changed.has('placement') || changed.has('offset'))\n requestAnimationFrame(() => this._panel.updatePosition())\n\n if (changed.has('open')) {\n if (this.open) {\n const isInstant = this._shouldOpenInstantly\n this._shouldOpenInstantly = true\n this._overlay.scheduleFrame(() => {\n this._openOverlay(isInstant)\n })\n if (this._userOpenChange.consume()) this._dispatchChange(true)\n this._focusPanel()\n } else {\n this._overlay.invalidate()\n this._returnFocus()\n void this._closeOverlay()\n if (this._userOpenChange.consume()) this._dispatchChange(false)\n }\n }\n\n if (changed.has('trigger')) {\n this.removeEventListener('pointerenter', this._onPointerEnter)\n this.removeEventListener('pointerleave', this._onPointerLeave)\n clearTimeout(this._showTimer)\n clearTimeout(this._hideTimer)\n this._syncTriggerListeners()\n }\n this._syncOverlayInert()\n }\n\n show() {\n if (this.disabled || this.open) return\n this.open = true\n }\n\n close() {\n if (!this.open) return\n this.open = false\n }\n\n toggle() {\n if (this.open) this.close()\n else this.show()\n }\n\n private _isInsideShadowRoot(e: MouseEvent): boolean {\n for (const node of e.composedPath()) {\n if (node instanceof Node && node.getRootNode() === this.shadowRoot) return true\n }\n return false\n }\n\n private _syncTriggerListeners() {\n if (this.trigger === 'hover') {\n this.addEventListener('pointerenter', this._onPointerEnter)\n this.addEventListener('pointerleave', this._onPointerLeave)\n }\n }\n\n /*\n * `manual` 触发器的 popover 不由用户关闭,但仍是候选:Escape 被它吞掉(同时压掉\n * 原生 cancel),只是不走关闭入口。与旧的「跳过候选」语义不同 —— 旧语义放任 Escape\n * 落到下层浮层,把外层一起关掉。trigger 可在开启期间改写,所以走动态通道同步。\n */\n private _syncOverlayInert() {\n this._panel.getHandle()?.setInert(this.trigger === 'manual')\n }\n\n private _openOverlay(isInstant = false) {\n /*\n * 登记与仲裁归属由 anchored panel 完成(claim 要求 panel 已就位,祖先链才判得对)。\n * 原实现在这里额外以宿主为 owner 再登记一次:anchor 是宿主 shadow 内的\n * `.popover-trigger` 包装 div(不是会被 slot 重定向的 trigger 内容),其祖先链上\n * 首个已开启浮层与从宿主上溯结果一致,因此那一次是冗余的。\n */\n this._panel.open(isInstant)\n this._syncOverlayInert()\n }\n\n private _migratableContentNodes(nodes: Node[]): Node[] {\n // 框架注释锚点(v-if/v-for 占位)必须留在宿主:面板内容是实时渲染契约,\n // 框架后续 patch 以宿主内锚点为插入基准,锚点进面板会让插入落空。\n return nodes.filter(node => !(node instanceof Comment) && !(node instanceof HTMLElement && node.slot === 'trigger'))\n }\n\n private _createPortal(): OverlayPortal {\n const portal = defineOverlayPortal().make({\n container: this.overlayContainer,\n target: this,\n style: `${glass}\\n${overlayMotion}\\n${style}`,\n className: 'popover-panel portal wui-glass wui-floating-panel',\n // 已迁移节点被框架删除后的解除追踪是 portal 内建默认行为,这里无需 onContentChange\n migrateAddedNodes: addedNodes => this._migratableContentNodes(addedNodes)\n })\n this._portal = portal\n portal.panel.id = this._panelId\n portal.panel.setAttribute('role', 'dialog')\n portal.panel.tabIndex = -1\n portal.panel.addEventListener('pointerenter', this._onPanelPointerEnter)\n portal.panel.addEventListener('pointerleave', this._onPanelPointerLeave)\n portal.moveContent(this._migratableContentNodes(Array.from(this.childNodes)))\n return portal\n }\n\n private async _closeOverlay() {\n await this._panel.close(() => this.open)\n }\n\n private _reconfigureOverlay() {\n // portal 变更也会登记 rAF;宿主卸载后不得再通过 reconfigure 重建面板。\n if (!this.isConnected) return\n this._panel.reconfigure(this.open)\n /*\n * reconfigure 重新 claim = 新会话,inert 回到 false。这里的重推是**承重的**,不是\n * 防御性备份:`reconfigure` 不触发 Lit 渲染,`updated()` 那次同步不会跟着来。\n * 实测摘掉本行,「portal 变更后 Escape 仍不关闭」立刻转红(select / autocomplete 的\n * 同类重推则被各自的渲染掩盖,摘掉仍绿)。\n */\n this._syncOverlayInert()\n }\n\n private _dispatchChange(open: boolean) {\n dispatchOpenChangeEvent(this, open)\n }\n\n /*\n * trigger 包装 div 不可聚焦,AT 读不到其 aria 状态:把 aria-expanded /\n * aria-controls 同步回写到 trigger slot 的首个 assigned element(Q8a)。\n * 包装 div 上的同名属性保留(additive,兼容既有查询)。\n */\n private _syncTriggerAria() {\n const trigger = this._queryTrigger()\n if (!trigger) return\n trigger.setAttribute('aria-expanded', String(this.open))\n trigger.setAttribute('aria-controls', this._panelId)\n }\n\n private _focusPanel() {\n this._overlay.scheduleFrame(() => {\n const panel = this._panel.getPanel()\n const autofocus = panel?.querySelector<HTMLElement>('[autofocus]')\n if (autofocus && !autofocus.matches(':disabled, [disabled]')) autofocus.focus()\n })\n }\n\n private _returnFocus() {\n const panel = this._panel.getPanel()\n if (!panel?.matches(':focus-within')) return\n const trigger = this._queryTrigger()\n trigger?.focus()\n }\n\n private _queryTrigger(): HTMLElement | null {\n const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"trigger\"]')\n const el = slot?.assignedElements()[0]\n return el instanceof HTMLElement ? el : null\n }\n\n private _onTriggerClick = (event: MouseEvent) => {\n if (this.disabled) return\n clearTimeout(this._showTimer)\n clearTimeout(this._hideTimer)\n if (this.trigger === 'hover') return\n if (!this.open) this._shouldOpenInstantly = event.detail === 0\n this._userOpenChange.mark()\n this.toggle()\n }\n\n private _onClickOutside = (e: MouseEvent) => {\n if (!this.open) return\n if (this.trigger === 'manual' || this.trigger === 'hover') return\n // 在监听器内部判定:composedPath() 在派发结束后会被清空。\n if (this._panel.getHandle()?.containsEvent(e)) return\n if (this._isInsideShadowRoot(e)) return\n this._userOpenChange.mark()\n this.open = false\n }\n\n private _onFocusOut = () => {\n if (this.trigger === 'manual' || this.trigger === 'hover') return\n\n this._overlay.scheduleFrame(() => {\n if (!this.matches(':focus-within') && !this._panel.getHandle()?.hasFocusWithin()) {\n this._userOpenChange.mark()\n this.open = false\n }\n })\n }\n\n private _onPointerEnter = (e: PointerEvent) => {\n if (e.pointerType === 'touch') return\n if (this.disabled || this.trigger !== 'hover') return\n clearTimeout(this._hideTimer)\n this._showTimer = setTimeout(() => {\n this._shouldOpenInstantly = false\n if (this.open) return\n this._userOpenChange.mark()\n this.show()\n }, 100)\n }\n\n private _onPointerLeave = (e: PointerEvent) => {\n if (e.pointerType === 'touch') return\n if (this.disabled || this.trigger !== 'hover') return\n clearTimeout(this._showTimer)\n this._hideTimer = setTimeout(() => {\n if (!this.open) return\n this._userOpenChange.mark()\n this.close()\n }, 100)\n }\n\n private _onPanelPointerEnter = (e: PointerEvent) => {\n if (e.pointerType === 'touch') return\n if (this.trigger !== 'hover') return\n clearTimeout(this._hideTimer)\n }\n\n private _onPanelPointerLeave = (e: PointerEvent) => {\n if (e.pointerType === 'touch') return\n if (this.trigger !== 'hover') return\n this._hideTimer = setTimeout(() => {\n if (!this.open) return\n this._userOpenChange.mark()\n this.close()\n }, 100)\n }\n\n override render() {\n return html`\n <div class=\"popover-anchor\">\n <div\n class=\"popover-trigger\"\n aria-expanded=${String(this.open)}\n aria-controls=${this._panelId}\n @click=${this._onTriggerClick}\n >\n <slot name=\"trigger\"></slot>\n </div>\n <div\n id=${this._panelId}\n class=\"popover-panel wui-floating-panel wui-glass\"\n hidden\n role=\"dialog\"\n tabindex=\"-1\"\n @pointerenter=${this._onPanelPointerEnter}\n @pointerleave=${this._onPanelPointerLeave}\n >\n <slot></slot>\n </div>\n </div>\n `\n }\n\n declare readonly $events: {\n 'open-change': CustomEvent<{ open: boolean }>\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'web-ui-popover': WebUiPopover\n }\n}\n"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
//#region src/components/popover/style.css?inline
|
|
2
|
-
var e = "*,:before,:after{box-sizing:border-box}:host{display:inline-flex}:host([disabled]){cursor:not-allowed}.popover-trigger{display:inline-flex}.popover-anchor{display:inline-flex;position:relative}.popover-panel{--wui-internal-glass-shadow:var(--wui-shadow-panel,0 3px 9px #00000045);--wui-glass-corner-radius:var(--wui-radius-menu,18px);z-index:var(--wui-layer-inline-overlay,1);box-sizing:border-box;
|
|
2
|
+
var e = "*,:before,:after{box-sizing:border-box}:host{display:inline-flex}:host([disabled]){cursor:not-allowed}.popover-trigger{display:inline-flex}.popover-anchor{display:inline-flex;position:relative}.popover-panel{--wui-internal-glass-shadow:var(--wui-shadow-panel,0 3px 9px #00000045);--wui-glass-corner-radius:var(--wui-radius-menu,18px);--wui-color-glass-ring:transparent;z-index:var(--wui-layer-inline-overlay,1);box-sizing:border-box;width:max-content;max-width:min(90vw,400px);padding:var(--wui-space-2,8px) var(--wui-space-3,12px);border-radius:var(--wui-radius-menu,18px);font-size:var(--wui-font-size,14px);line-height:var(--wui-line-height-normal,1.5);color:var(--wui-color-text,#1b1b1b);background-color:var(--wui-color-surface-menu,#fafafac2);position:absolute;top:-9999px;left:-9999px}.popover-panel:where([hidden]){display:none}.popover-panel:focus-visible{outline:var(--wui-focus-ring-width,3px) solid var(--wui-color-focus-ring,color-mix(in srgb, var(--wui-color-accent,#08f) 40%, transparent));outline-offset:2px}.popover-panel.portal{z-index:var(--wui-layer-menu,100);position:fixed}:host([portal]) .popover-panel{display:none}";
|
|
3
3
|
//#endregion
|
|
4
4
|
export { e as default };
|
|
5
5
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/popover/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n display: inline-flex;\n}\n\n:host([disabled]) {\n cursor: not-allowed;\n}\n\n.popover-trigger {\n display: inline-flex;\n}\n\n.popover-anchor {\n position: relative;\n display: inline-flex;\n}\n\n.popover-panel {\n --wui-internal-glass-shadow: var(--wui-shadow-panel, 0 3px 9px rgb(0 0 0 / 0.27));\n --wui-glass-corner-radius: var(--wui-radius-menu, 18px);\n position: absolute;\n z-index: var(--wui-layer-inline-overlay, 1);\n top: -9999px;\n left: -9999px;\n\n box-sizing: border-box;\n width: max-content;\n max-width: min(90vw, 400px);\n padding: 8px 12px;\n border-radius: var(--wui-radius-menu, 18px);\n\n font-size: var(--wui-font-size, 14px);\n line-height: 1.5;\n color: var(--wui-color-text, #1b1b1b);\n\n /* 玻璃背景:wui-glass 在面板自身,这里覆盖其默认玻璃底为菜单表面色 */\n background-color: var(--wui-color-surface-menu, rgb(
|
|
1
|
+
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/popover/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n display: inline-flex;\n}\n\n:host([disabled]) {\n cursor: not-allowed;\n}\n\n.popover-trigger {\n display: inline-flex;\n}\n\n.popover-anchor {\n position: relative;\n display: inline-flex;\n}\n\n.popover-panel {\n --wui-internal-glass-shadow: var(--wui-shadow-panel, 0 3px 9px rgb(0 0 0 / 0.27));\n --wui-glass-corner-radius: var(--wui-radius-menu, 18px);\n\n /* 面板宽远大于角半径,环底色铺出的整圈铺底会在长边中段读成一条比四角更重的\n 直边描边;转 transparent 后只剩四段角弧,见 menu-portal.css 同处注释。 */\n --wui-color-glass-ring: transparent;\n position: absolute;\n z-index: var(--wui-layer-inline-overlay, 1);\n top: -9999px;\n left: -9999px;\n\n box-sizing: border-box;\n width: max-content;\n max-width: min(90vw, 400px);\n padding: var(--wui-space-2, 8px) var(--wui-space-3, 12px);\n border-radius: var(--wui-radius-menu, 18px);\n\n font-size: var(--wui-font-size, 14px);\n line-height: var(--wui-line-height-normal, 1.5);\n color: var(--wui-color-text, #1b1b1b);\n\n /* 玻璃背景:wui-glass 在面板自身,这里覆盖其默认玻璃底为菜单表面色 */\n background-color: var(--wui-color-surface-menu, rgb(250 250 250 / 0.76));\n\n &:where([hidden]) {\n display: none;\n }\n\n &:focus-visible {\n outline: var(--wui-focus-ring-width, 3px) solid\n var(--wui-color-focus-ring, color-mix(in srgb, var(--wui-color-accent, #08f) 40%, transparent));\n outline-offset: 2px;\n }\n}\n\n.popover-panel.portal {\n position: fixed;\n z-index: var(--wui-layer-menu, 100);\n}\n\n:host([portal]) .popover-panel {\n display: none;\n}\n"],"mappings":""}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
//#region src/components/radio/style.css?inline
|
|
2
|
-
var e = ".wui-radio-circle{border-radius:var(--wui-radius-control,calc(infinity * 1px))}.is-checked .wui-radio-circle{background-color:var(--wui-color-accent,#08f)}.wui-radio-dot{border-radius:var(--wui-radius-control,calc(infinity * 1px));opacity:0;background-color:var(--wui-color-on-control,#fff);width:6px;height:6px;transition:opacity var(--wui-duration-trigger,.16s) ease, transform var(--wui-duration-trigger,.16s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1));transform:scale(0)
|
|
2
|
+
var e = ".wui-radio-circle{border-radius:var(--wui-radius-control,calc(infinity * 1px))}.is-checked .wui-radio-circle{background-color:var(--wui-color-accent,#08f)}.wui-radio-dot{border-radius:var(--wui-radius-control,calc(infinity * 1px));opacity:0;background-color:var(--wui-color-on-control,#fff);width:6px;height:6px;box-shadow:inset 0 -1px 2px #0000001f, inset 0 1px 2px #ffffff80, 0 0 4px color-mix(in srgb, var(--wui-color-accent,#08f) 30%, transparent);transition:opacity var(--wui-duration-trigger,.16s) ease, transform var(--wui-duration-trigger,.16s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1));transform:scale(0)}.is-checked .wui-radio-dot{opacity:1;transform:scale(1)}@media (prefers-reduced-motion:reduce){.wui-radio-dot,.is-checked .wui-radio-dot{transform:none}}";
|
|
3
3
|
//#endregion
|
|
4
4
|
export { e as default };
|
|
5
5
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/radio/style.css?inline"],"sourcesContent":[".wui-radio-circle {\n border-radius: var(--wui-radius-control, calc(infinity * 1px));\n}\n\n.is-checked .wui-radio-circle {\n background-color: var(--wui-color-accent, #08f);\n}\n\n.wui-radio-dot {\n transform: scale(0);\n\n width: 6px;\n height: 6px;\n border-radius: var(--wui-radius-control, calc(infinity * 1px));\n\n opacity: 0;\n background-color: var(--wui-color-on-control, #fff);\n box-shadow:\n inset 0 -1px 2px rgb(0 0 0 / 0.12),\n inset 0 1px 2px rgb(255 255 255 / 0.5),\n 0 0 4px
|
|
1
|
+
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/radio/style.css?inline"],"sourcesContent":[".wui-radio-circle {\n border-radius: var(--wui-radius-control, calc(infinity * 1px));\n}\n\n.is-checked .wui-radio-circle {\n background-color: var(--wui-color-accent, #08f);\n}\n\n.wui-radio-dot {\n transform: scale(0);\n\n width: 6px;\n height: 6px;\n border-radius: var(--wui-radius-control, calc(infinity * 1px));\n\n opacity: 0;\n background-color: var(--wui-color-on-control, #fff);\n box-shadow:\n inset 0 -1px 2px rgb(0 0 0 / 0.12),\n inset 0 1px 2px rgb(255 255 255 / 0.5),\n /*\n * 外发光跟着 accent,而不是 --wui-color-focus-ring:这是选中态的装饰性辉光,\n * 与键盘焦点环是两种东西(alpha 也不同:0.3 vs 0.4/0.62)。默认值下与原值等价。\n */\n 0 0 4px color-mix(in srgb, var(--wui-color-accent, #08f) 30%, transparent);\n\n transition:\n opacity var(--wui-duration-trigger, 160ms) ease,\n transform var(--wui-duration-trigger, 160ms) var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n}\n\n.is-checked .wui-radio-dot {\n transform: scale(1);\n opacity: 1;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .wui-radio-dot,\n .is-checked .wui-radio-dot {\n transform: none;\n }\n}\n"],"mappings":""}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
//#region src/components/radio-group/style.css?inline
|
|
2
|
-
var e = "*,:before,:after{box-sizing:border-box}:host{-webkit-user-select:none;user-select:none;gap:var(--wui-radio-group-gap,8px);flex-direction:column;display:inline-flex}.wui-radio-group{flex-direction:inherit;gap:inherit;display:flex}:host([direction=horizontal]){flex-direction:row}";
|
|
2
|
+
var e = "*,:before,:after{box-sizing:border-box}:host{-webkit-user-select:none;user-select:none;gap:var(--wui-radio-group-gap,var(--wui-space-2,8px));flex-direction:column;display:inline-flex}.wui-radio-group{flex-direction:inherit;gap:inherit;display:flex}:host([direction=horizontal]){flex-direction:row}";
|
|
3
3
|
//#endregion
|
|
4
4
|
export { e as default };
|
|
5
5
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/radio-group/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n user-select: none;\n display: inline-flex;\n flex-direction: column;\n gap: var(--wui-radio-group-gap, 8px);\n}\n\n.wui-radio-group {\n display: flex;\n flex-direction: inherit;\n gap: inherit;\n}\n\n:host([direction='horizontal']) {\n flex-direction: row;\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/radio-group/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n user-select: none;\n display: inline-flex;\n flex-direction: column;\n gap: var(--wui-radio-group-gap, var(--wui-space-2, 8px));\n}\n\n.wui-radio-group {\n display: flex;\n flex-direction: inherit;\n gap: inherit;\n}\n\n:host([direction='horizontal']) {\n flex-direction: row;\n}\n"],"mappings":""}
|
|
@@ -373,15 +373,20 @@ export declare class WebUiSegmented extends WebUiSegmented_base {
|
|
|
373
373
|
required: boolean;
|
|
374
374
|
private _value;
|
|
375
375
|
private _indicatorReady;
|
|
376
|
+
private _settling;
|
|
376
377
|
private _pressed;
|
|
377
378
|
private _isDragging;
|
|
378
379
|
private _dragGestureHandle;
|
|
380
|
+
private _settleFlight;
|
|
381
|
+
private _settleRequest;
|
|
382
|
+
private _settleTimer;
|
|
379
383
|
disconnectedCallback(): void;
|
|
380
384
|
private readonly _groupController;
|
|
381
385
|
get value(): string;
|
|
382
386
|
set value(v: string);
|
|
383
387
|
private get _isDisabled();
|
|
384
388
|
private _updateIndicator;
|
|
389
|
+
private _openSettleFlight;
|
|
385
390
|
private handlePointerDown;
|
|
386
391
|
private handlePointerUp;
|
|
387
392
|
private handlePointerLeave;
|
|
@@ -4,17 +4,23 @@ import { installPointerFocusSuppression as n } from "../../shared/focus/pointer-
|
|
|
4
4
|
import { FormAssociated as r, FormAssociationController as i, defineFormAssociation as a } from "../../shared/form-association/index.js";
|
|
5
5
|
import { GroupController as o, defineGroupCoordinator as s } from "../../shared/group-management/index.js";
|
|
6
6
|
import { normalizeLiteral as c } from "../../shared/normalize/index.js";
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import f from "
|
|
10
|
-
import
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
7
|
+
import { parseDuration as l } from "../../shared/theme/duration.js";
|
|
8
|
+
import { attachDragGesture as u } from "../../shared/gesture/drag-gesture.js";
|
|
9
|
+
import { clamp as d, snapToNearest as f } from "../../shared/gesture/physics.js";
|
|
10
|
+
import p from "./style.js";
|
|
11
|
+
import { LitElement as m, html as h, unsafeCSS as g } from "lit";
|
|
12
|
+
import { customElement as _, property as v, state as y } from "lit/decorators.js";
|
|
13
|
+
import { classMap as b } from "lit/directives/class-map.js";
|
|
13
14
|
//#region src/components/segmented/index.ts
|
|
14
15
|
n();
|
|
15
|
-
var
|
|
16
|
+
var x = ["inset", "raised"];
|
|
17
|
+
function S(e) {
|
|
18
|
+
let t = l(getComputedStyle(e).getPropertyValue("--wui-duration-trigger"));
|
|
19
|
+
return t === null ? 160 : Math.max(0, t);
|
|
20
|
+
}
|
|
21
|
+
var C = class extends r(m) {
|
|
16
22
|
constructor(...e) {
|
|
17
|
-
super(...e), this.name = "", this._variant = "inset", this.disabled = !1, this.required = !1, this._value = "", this._indicatorReady = !1, this._pressed = !1, this._isDragging = !1, this._dragGestureHandle = null, this._groupController = new o(this, s({
|
|
23
|
+
super(...e), this.name = "", this._variant = "inset", this.disabled = !1, this.required = !1, this._value = "", this._indicatorReady = !1, this._settling = !1, this._pressed = !1, this._isDragging = !1, this._dragGestureHandle = null, this._settleFlight = null, this._settleRequest = 0, this._groupController = new o(this, s({
|
|
18
24
|
host: this,
|
|
19
25
|
getItems: () => [...this.querySelectorAll("web-ui-segmented-trigger")],
|
|
20
26
|
getValue: () => this._value,
|
|
@@ -39,7 +45,7 @@ var b = ["inset", "raised"], x = class extends r(p) {
|
|
|
39
45
|
composed: !0
|
|
40
46
|
}));
|
|
41
47
|
}
|
|
42
|
-
}).make(), { afterSync: () => requestAnimationFrame(() => this._updateIndicator()) }), this._formAssociation = a({
|
|
48
|
+
}).make(), { afterSync: () => requestAnimationFrame(() => void this._updateIndicator()) }), this._formAssociation = a({
|
|
43
49
|
host: this,
|
|
44
50
|
initialize: () => {
|
|
45
51
|
let e = this.getAttribute("value");
|
|
@@ -57,17 +63,17 @@ var b = ["inset", "raised"], x = class extends r(p) {
|
|
|
57
63
|
}).make(), this._formAssociationController = new i(this, this._formAssociation);
|
|
58
64
|
}
|
|
59
65
|
static {
|
|
60
|
-
this.styles = [
|
|
66
|
+
this.styles = [g(t), g(p)];
|
|
61
67
|
}
|
|
62
68
|
get variant() {
|
|
63
69
|
return this._variant;
|
|
64
70
|
}
|
|
65
71
|
set variant(e) {
|
|
66
72
|
let t = this._variant;
|
|
67
|
-
this._variant = c(e,
|
|
73
|
+
this._variant = c(e, x, "inset"), this.requestUpdate("variant", t);
|
|
68
74
|
}
|
|
69
75
|
disconnectedCallback() {
|
|
70
|
-
super.disconnectedCallback(), this._dragGestureHandle?.destroy(), this._dragGestureHandle = null;
|
|
76
|
+
super.disconnectedCallback(), this._dragGestureHandle?.destroy(), this._dragGestureHandle = null, clearTimeout(this._settleTimer), this._settleTimer = void 0;
|
|
71
77
|
}
|
|
72
78
|
get value() {
|
|
73
79
|
return this._value;
|
|
@@ -79,14 +85,24 @@ var b = ["inset", "raised"], x = class extends r(p) {
|
|
|
79
85
|
get _isDisabled() {
|
|
80
86
|
return this.disabled || this._formAssociation.isFormDisabled();
|
|
81
87
|
}
|
|
82
|
-
_updateIndicator() {
|
|
88
|
+
async _updateIndicator() {
|
|
83
89
|
let e = this.querySelectorAll("web-ui-segmented-trigger"), t = 0, n = 0;
|
|
84
90
|
e.forEach((e) => {
|
|
85
91
|
if (e.value === this._value) {
|
|
86
92
|
let r = e.getBoundingClientRect(), i = this.getBoundingClientRect();
|
|
87
93
|
t = r.left - i.left, n = r.width;
|
|
88
94
|
}
|
|
89
|
-
}), this.style.setProperty("--indicator-left", `${t}px`), this.style.setProperty("--indicator-width", `${n}px`), this._indicatorReady ||= (this.renderRoot.querySelector(".wui-segmented-indicator")?.offsetWidth, !0);
|
|
95
|
+
}), this._indicatorReady && this._openSettleFlight() && await this.updateComplete, this.style.setProperty("--indicator-left", `${t}px`), this.style.setProperty("--indicator-width", `${n}px`), this._indicatorReady ||= (this.renderRoot.querySelector(".wui-segmented-indicator")?.offsetWidth, !0);
|
|
96
|
+
}
|
|
97
|
+
_openSettleFlight() {
|
|
98
|
+
let e = this._settleTimer !== void 0, t = {};
|
|
99
|
+
this._settleFlight = t;
|
|
100
|
+
let n = ++this._settleRequest;
|
|
101
|
+
clearTimeout(this._settleTimer);
|
|
102
|
+
let r = S(this);
|
|
103
|
+
return r === 0 ? (this._settleTimer = void 0, this._settleFlight = null, this._settling = !1, !1) : (this._settling = e, this._settleTimer = setTimeout(() => {
|
|
104
|
+
this._settleTimer = void 0, this._settleRequest === n && this._settleFlight === t && (this._settleFlight = null, this._settling = !1);
|
|
105
|
+
}, r), e);
|
|
90
106
|
}
|
|
91
107
|
handlePointerDown(e) {
|
|
92
108
|
if (this._isDisabled) return;
|
|
@@ -97,22 +113,22 @@ var b = ["inset", "raised"], x = class extends r(p) {
|
|
|
97
113
|
let i = r.getBoundingClientRect();
|
|
98
114
|
if (!(e.clientX >= i.left && e.clientX <= i.right && e.clientY >= i.top && e.clientY <= i.bottom)) return;
|
|
99
115
|
this._pressed = !0;
|
|
100
|
-
let a = this.getBoundingClientRect(), o = r.getBoundingClientRect(), s = o.left - a.left, c = o.width,
|
|
116
|
+
let a = this.getBoundingClientRect(), o = r.getBoundingClientRect(), s = o.left - a.left, c = o.width, l = t[0].getBoundingClientRect(), p = t[t.length - 1].getBoundingClientRect(), m = l.left - a.left, h = p.right - a.left - c, g = n.map((e) => {
|
|
101
117
|
let t = e.getBoundingClientRect();
|
|
102
118
|
return t.left - a.left + t.width / 2;
|
|
103
119
|
});
|
|
104
|
-
this._dragGestureHandle?.destroy(), this._dragGestureHandle =
|
|
120
|
+
this._dragGestureHandle?.destroy(), this._dragGestureHandle = u(e, {
|
|
105
121
|
axis: "x",
|
|
106
122
|
threshold: 6,
|
|
107
123
|
onMove: (e) => {
|
|
108
124
|
this._isDragging = !0;
|
|
109
|
-
let t =
|
|
125
|
+
let t = d(s + e.deltaX, m, h);
|
|
110
126
|
this.style.setProperty("--indicator-left", `${t}px`), this.style.setProperty("--indicator-width", `${c}px`);
|
|
111
127
|
},
|
|
112
128
|
onEnd: (e) => {
|
|
113
129
|
let t = this._isDragging;
|
|
114
130
|
if (this._isDragging = !1, this._pressed = !1, t) {
|
|
115
|
-
let t =
|
|
131
|
+
let t = d(s + e.deltaX, m, h) + c / 2, i = r;
|
|
116
132
|
if (e.velocityX > 300) {
|
|
117
133
|
let e = n.indexOf(r);
|
|
118
134
|
i = e !== -1 && e < n.length - 1 ? n[e + 1] : n[n.length - 1];
|
|
@@ -120,7 +136,7 @@ var b = ["inset", "raised"], x = class extends r(p) {
|
|
|
120
136
|
let e = n.indexOf(r);
|
|
121
137
|
i = e > 0 ? n[e - 1] : n[0];
|
|
122
138
|
} else {
|
|
123
|
-
let e =
|
|
139
|
+
let e = f(t, g);
|
|
124
140
|
e !== -1 && n[e] && (i = n[e]);
|
|
125
141
|
}
|
|
126
142
|
i.value === this._value ? this._updateIndicator() : (this.value = i.value, this._groupController.sync(), this.dispatchEvent(new Event("input", {
|
|
@@ -148,15 +164,16 @@ var b = ["inset", "raised"], x = class extends r(p) {
|
|
|
148
164
|
this._formAssociation.setDisabled(e), this._groupController.sync();
|
|
149
165
|
}
|
|
150
166
|
render() {
|
|
151
|
-
return
|
|
167
|
+
return h`
|
|
152
168
|
<div
|
|
153
|
-
class=${
|
|
169
|
+
class=${b({
|
|
154
170
|
"wui-glass": !0,
|
|
155
171
|
"wui-segmented": !0,
|
|
156
172
|
"is-disabled": this._isDisabled,
|
|
157
173
|
"is-pressed": this._pressed,
|
|
158
174
|
"is-dragging": this._isDragging,
|
|
159
|
-
"is-indicator-ready": this._indicatorReady
|
|
175
|
+
"is-indicator-ready": this._indicatorReady,
|
|
176
|
+
"is-settling": this._settling
|
|
160
177
|
})}
|
|
161
178
|
role="listbox"
|
|
162
179
|
aria-orientation="horizontal"
|
|
@@ -171,20 +188,20 @@ var b = ["inset", "raised"], x = class extends r(p) {
|
|
|
171
188
|
`;
|
|
172
189
|
}
|
|
173
190
|
};
|
|
174
|
-
e([
|
|
191
|
+
e([v({
|
|
175
192
|
type: String,
|
|
176
193
|
reflect: !0
|
|
177
|
-
})],
|
|
194
|
+
})], C.prototype, "name", void 0), e([v({
|
|
178
195
|
type: String,
|
|
179
196
|
reflect: !0
|
|
180
|
-
})],
|
|
197
|
+
})], C.prototype, "variant", null), e([v({
|
|
181
198
|
type: Boolean,
|
|
182
199
|
reflect: !0
|
|
183
|
-
})],
|
|
200
|
+
})], C.prototype, "disabled", void 0), e([v({
|
|
184
201
|
type: Boolean,
|
|
185
202
|
reflect: !0
|
|
186
|
-
})],
|
|
203
|
+
})], C.prototype, "required", void 0), e([y()], C.prototype, "_value", void 0), e([y()], C.prototype, "_indicatorReady", void 0), e([y()], C.prototype, "_settling", void 0), e([y()], C.prototype, "_pressed", void 0), e([y()], C.prototype, "_isDragging", void 0), C = e([_("web-ui-segmented")], C);
|
|
187
204
|
//#endregion
|
|
188
|
-
export {
|
|
205
|
+
export { C as WebUiSegmented };
|
|
189
206
|
|
|
190
207
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/segmented/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\n\nimport glass from '@/assets/glass.css?inline'\nimport { installPointerFocusSuppression } from '@/shared/focus/pointer-focus'\nimport { FormAssociated, defineFormAssociation, FormAssociationController } from '@/shared/form-association'\nimport { attachDragGesture, type DragGestureHandle } from '@/shared/gesture/drag-gesture'\nimport { clamp, snapToNearest } from '@/shared/gesture/physics'\nimport { defineGroupCoordinator, GroupController } from '@/shared/group-management'\nimport { normalizeLiteral } from '@/shared/normalize'\n\nimport type { WebUiSegmentedTrigger } from '../segmented-trigger'\n\nimport style from './style.css?inline'\n\ninstallPointerFocusSuppression()\n\nconst ALLOWED_VARIANTS = ['inset', 'raised'] as const\n\n@customElement('web-ui-segmented')\nexport class WebUiSegmented extends FormAssociated(LitElement) {\n // 轨道是不透明实体面:底色取 surface(浅色即 page,深色即 surface-raised 档)、无\n // backdrop blur,描边环与投影仍由\n // .wui-glass 提供且全状态同值;指示器恒挂同一配方,静止态由 surface-segmented 实色\n // 盖住玻璃输出,按压与拖拽态才透出玻璃。\n // variant=\"raised\" 切回经典形态:flat 灰轨道(surface-segmented、无环无投影)+\n // 实体白指示器(surface-selected + 柔投影),按压/拖拽态两变体同为透明玻璃;\n // 视觉差异全部由 :host([variant=...]) 规则承载,见 style.css。\n static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n @property({ type: String, reflect: true }) name = ''\n\n @property({ type: String, reflect: true })\n get variant(): 'inset' | 'raised' {\n return this._variant\n }\n set variant(v: string) {\n const old = this._variant\n this._variant = normalizeLiteral(v, ALLOWED_VARIANTS, 'inset')\n this.requestUpdate('variant', old)\n }\n private _variant: 'inset' | 'raised' = 'inset'\n\n @property({ type: Boolean, reflect: true }) disabled = false\n @property({ type: Boolean, reflect: true }) required = false\n\n @state() private _value = ''\n @state() private _indicatorReady = false\n @state() private _pressed = false\n @state() private _isDragging = false\n\n private _dragGestureHandle: DragGestureHandle | null = null\n\n override disconnectedCallback() {\n super.disconnectedCallback()\n this._dragGestureHandle?.destroy()\n this._dragGestureHandle = null\n }\n\n private readonly _groupController = new GroupController(\n this,\n defineGroupCoordinator<WebUiSegmentedTrigger, string>({\n host: this,\n getItems: () => [...this.querySelectorAll<WebUiSegmentedTrigger>('web-ui-segmented-trigger')],\n getValue: () => this._value,\n setValue: value => {\n this.value = value\n },\n getDisabled: () => this._isDisabled,\n isItem: (target): target is WebUiSegmentedTrigger =>\n target instanceof HTMLElement && target.matches('web-ui-segmented-trigger'),\n isItemSelected: (trigger, value) => trigger.value === value,\n getNextValue: (trigger, value) => (trigger.checked ? trigger.value : value),\n valuesEqual: (a, b) => a === b,\n copyValue: value => value,\n setItemSelected: (trigger, selected) => {\n trigger.checked = selected\n },\n dispatchValueChange: () => {\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }))\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n }\n }).make(),\n { afterSync: () => requestAnimationFrame(() => this._updateIndicator()) }\n )\n\n get value(): string {\n return this._value\n }\n\n set value(v: string) {\n const old = this._value\n this._value = v\n this._formAssociation.sync()\n this.requestUpdate('value', old)\n }\n\n private get _isDisabled(): boolean {\n return this.disabled || this._formAssociation.isFormDisabled()\n }\n\n private _updateIndicator() {\n const triggers = this.querySelectorAll<WebUiSegmentedTrigger>('web-ui-segmented-trigger')\n let left = 0\n let width = 0\n\n triggers.forEach(trigger => {\n if (trigger.value === this._value) {\n const triggerRect = trigger.getBoundingClientRect()\n const groupRect = this.getBoundingClientRect()\n left = triggerRect.left - groupRect.left\n width = triggerRect.width\n }\n })\n\n this.style.setProperty('--indicator-left', `${left}px`)\n this.style.setProperty('--indicator-width', `${width}px`)\n\n // 首帧只完成定位:先把当前定位以「未启用 left/width transition」状态提交为 before 值,\n // 再打开移动动画。若同一趟里 set 定位与启用 transition,浏览器会把 0→选项 当作一次过渡。\n if (!this._indicatorReady) {\n const indicator = this.renderRoot.querySelector<HTMLElement>('.wui-segmented-indicator')\n void indicator?.offsetWidth\n this._indicatorReady = true\n }\n }\n\n private handlePointerDown(e: PointerEvent) {\n if (this._isDisabled) return\n const triggers = [...this.querySelectorAll<WebUiSegmentedTrigger>('web-ui-segmented-trigger')]\n const enabledTriggers = triggers.filter(t => !t.disabled)\n if (enabledTriggers.length === 0) return\n\n // 必须按下当前选中的 trigger 才能启动指示器拖拽\n const activeTrigger = triggers.find(t => t.value === this._value)\n if (!activeTrigger || activeTrigger.disabled) return\n\n const activeTriggerRect = activeTrigger.getBoundingClientRect()\n const isPressedOnActive =\n e.clientX >= activeTriggerRect.left &&\n e.clientX <= activeTriggerRect.right &&\n e.clientY >= activeTriggerRect.top &&\n e.clientY <= activeTriggerRect.bottom\n\n if (!isPressedOnActive) return\n\n this._pressed = true\n\n const groupRect = this.getBoundingClientRect()\n const initialTriggerRect = activeTrigger.getBoundingClientRect()\n const initialLeft = initialTriggerRect.left - groupRect.left\n const initialWidth = initialTriggerRect.width\n\n const firstTriggerRect = triggers[0].getBoundingClientRect()\n const lastTriggerRect = triggers[triggers.length - 1].getBoundingClientRect()\n const minLeft = firstTriggerRect.left - groupRect.left\n const maxLeft = lastTriggerRect.right - groupRect.left - initialWidth\n\n const enabledCenters = enabledTriggers.map(t => {\n const r = t.getBoundingClientRect()\n return r.left - groupRect.left + r.width / 2\n })\n\n this._dragGestureHandle?.destroy()\n this._dragGestureHandle = attachDragGesture(e, {\n axis: 'x',\n threshold: 6,\n onMove: info => {\n this._isDragging = true\n const currentLeft = clamp(initialLeft + info.deltaX, minLeft, maxLeft)\n this.style.setProperty('--indicator-left', `${currentLeft}px`)\n this.style.setProperty('--indicator-width', `${initialWidth}px`)\n },\n onEnd: info => {\n const wasDragging = this._isDragging\n this._isDragging = false\n this._pressed = false\n\n if (wasDragging) {\n const currentLeft = clamp(initialLeft + info.deltaX, minLeft, maxLeft)\n const currentCenter = currentLeft + initialWidth / 2\n\n let targetTrigger = activeTrigger\n if (info.velocityX > 300) {\n const currentIdx = enabledTriggers.indexOf(activeTrigger)\n if (currentIdx !== -1 && currentIdx < enabledTriggers.length - 1) {\n targetTrigger = enabledTriggers[currentIdx + 1]\n } else {\n targetTrigger = enabledTriggers[enabledTriggers.length - 1]\n }\n } else if (info.velocityX < -300) {\n const currentIdx = enabledTriggers.indexOf(activeTrigger)\n if (currentIdx > 0) {\n targetTrigger = enabledTriggers[currentIdx - 1]\n } else {\n targetTrigger = enabledTriggers[0]\n }\n } else {\n const nearestIdx = snapToNearest(currentCenter, enabledCenters)\n if (nearestIdx !== -1 && enabledTriggers[nearestIdx]) {\n targetTrigger = enabledTriggers[nearestIdx]\n }\n }\n\n if (targetTrigger.value !== this._value) {\n this.value = targetTrigger.value\n this._groupController.sync()\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }))\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n } else {\n this._updateIndicator()\n }\n }\n this.requestUpdate()\n },\n onCancel: () => {\n this._isDragging = false\n this._pressed = false\n this._updateIndicator()\n this.requestUpdate()\n }\n })\n }\n\n private handlePointerUp() {\n this._pressed = false\n }\n\n private handlePointerLeave() {\n if (!this._dragGestureHandle?.isDragging()) {\n this._pressed = false\n }\n }\n\n private readonly _formAssociation = defineFormAssociation<string>({\n host: this,\n initialize: () => {\n const attrValue = this.getAttribute('value')\n if (attrValue !== null && this._value === '') this._value = attrValue\n },\n getState: () => this._value,\n setState: value => {\n this.value = value\n },\n getFormValue: () => (this.name && this._value ? this._value : null),\n getFormState: () => this._value,\n restoreState: state => {\n if (typeof state === 'string') this.value = state\n }\n }).make()\n\n private readonly _formAssociationController = new FormAssociationController(this, this._formAssociation)\n\n override formDisabledCallback(disabled: boolean) {\n this._formAssociation.setDisabled(disabled)\n this._groupController.sync()\n }\n\n override render() {\n return html`\n <div\n class=${classMap({\n 'wui-glass': true,\n 'wui-segmented': true,\n 'is-disabled': this._isDisabled,\n 'is-pressed': this._pressed,\n 'is-dragging': this._isDragging,\n 'is-indicator-ready': this._indicatorReady\n })}\n role=\"listbox\"\n aria-orientation=\"horizontal\"\n @pointerdown=${this.handlePointerDown}\n @pointerup=${this.handlePointerUp}\n @pointercancel=${this.handlePointerUp}\n @pointerleave=${this.handlePointerLeave}\n >\n <span class=\"wui-glass wui-segmented-indicator\"></span>\n <slot></slot>\n </div>\n `\n }\n\n declare readonly $events: {\n input: Event\n change: Event\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'web-ui-segmented': WebUiSegmented\n }\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/segmented/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\n\nimport glass from '@/assets/glass.css?inline'\nimport { installPointerFocusSuppression } from '@/shared/focus/pointer-focus'\nimport { FormAssociated, defineFormAssociation, FormAssociationController } from '@/shared/form-association'\nimport { attachDragGesture, type DragGestureHandle } from '@/shared/gesture/drag-gesture'\nimport { clamp, snapToNearest } from '@/shared/gesture/physics'\nimport { defineGroupCoordinator, GroupController } from '@/shared/group-management'\nimport { normalizeLiteral } from '@/shared/normalize'\nimport { parseDuration } from '@/shared/theme/duration'\n\nimport type { WebUiSegmentedTrigger } from '../segmented-trigger'\n\nimport style from './style.css?inline'\n\ninstallPointerFocusSuppression()\n\nconst ALLOWED_VARIANTS = ['inset', 'raised'] as const\n\n/*\n * 指示器移动时长取 `--wui-duration-trigger`,与 CSS 里 left / width 那两条 transition 同一个值。\n * 读不到 token 或格式不符时兜底 160(CSS 的 fallback 同值),负值钳到 0。\n *\n * reduced-motion 下不需要额外分支:theme 已把该 token 归零,settle 窗口随之变成 0,\n * 落定门自动退化成「每一步都直接落定」,而那本来就是 0ms 过渡的观感。\n */\nfunction triggerDuration(el: HTMLElement): number {\n const parsed = parseDuration(getComputedStyle(el).getPropertyValue('--wui-duration-trigger'))\n return parsed === null ? 160 : Math.max(0, parsed)\n}\n\n@customElement('web-ui-segmented')\nexport class WebUiSegmented extends FormAssociated(LitElement) {\n // 轨道是不透明实体面:底色取 surface(浅色即 page,深色即 surface-raised 档)、无\n // backdrop blur,描边环与投影仍由\n // .wui-glass 提供且全状态同值;指示器恒挂同一配方,静止态由 surface-segmented 实色\n // 盖住玻璃输出,按压与拖拽态才透出玻璃。\n // variant=\"raised\" 切回经典形态:flat 灰轨道(surface-segmented、无环无投影)+\n // 实体白指示器(surface-selected + 柔投影),按压/拖拽态两变体同为透明玻璃;\n // 视觉差异全部由 :host([variant=...]) 规则承载,见 style.css。\n static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n @property({ type: String, reflect: true }) name = ''\n\n @property({ type: String, reflect: true })\n get variant(): 'inset' | 'raised' {\n return this._variant\n }\n set variant(v: string) {\n const old = this._variant\n this._variant = normalizeLiteral(v, ALLOWED_VARIANTS, 'inset')\n this.requestUpdate('variant', old)\n }\n private _variant: 'inset' | 'raised' = 'inset'\n\n @property({ type: Boolean, reflect: true }) disabled = false\n @property({ type: Boolean, reflect: true }) required = false\n\n @state() private _value = ''\n @state() private _indicatorReady = false\n @state() private _settling = false\n @state() private _pressed = false\n @state() private _isDragging = false\n\n private _dragGestureHandle: DragGestureHandle | null = null\n /*\n * 飞行令牌 + 世代号(与 web-ui-theme 的 View Transition 飞行门同构)。\n *\n * 缺陷形态:指示器的 left / width 带着 160ms 过渡,而快速连点会连着改 value。若每次改值\n * 都照常起一段过渡,第二段过渡要从**第一段的插值中途**重新起步——指示器于是永远慢半拍,\n * 连点结束时还要再等一整轮才停到终值,与「已经选到第几项」对不上。\n *\n * 门的作用:上一段移动还在飞行时到达的新值**直接落定**——不排队、不重启插值。\n * 落定这一趟自己也要占一段飞行窗口,否则第三次连点又会在落定途中起一段新过渡。\n * 世代号用来丢弃过期回调:窗口到期时若已经有更新的飞行在跑(快速连点会连开窗口),\n * 旧定时器只能提前退出,否则它会把新一轮的落定状态一并清掉、门形同虚设。\n */\n private _settleFlight: object | null = null\n private _settleRequest = 0\n private _settleTimer: number | undefined\n\n override disconnectedCallback() {\n super.disconnectedCallback()\n this._dragGestureHandle?.destroy()\n this._dragGestureHandle = null\n clearTimeout(this._settleTimer)\n this._settleTimer = undefined\n }\n\n private readonly _groupController = new GroupController(\n this,\n defineGroupCoordinator<WebUiSegmentedTrigger, string>({\n host: this,\n getItems: () => [...this.querySelectorAll<WebUiSegmentedTrigger>('web-ui-segmented-trigger')],\n getValue: () => this._value,\n setValue: value => {\n this.value = value\n },\n getDisabled: () => this._isDisabled,\n isItem: (target): target is WebUiSegmentedTrigger =>\n target instanceof HTMLElement && target.matches('web-ui-segmented-trigger'),\n isItemSelected: (trigger, value) => trigger.value === value,\n getNextValue: (trigger, value) => (trigger.checked ? trigger.value : value),\n valuesEqual: (a, b) => a === b,\n copyValue: value => value,\n setItemSelected: (trigger, selected) => {\n trigger.checked = selected\n },\n dispatchValueChange: () => {\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }))\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n }\n }).make(),\n { afterSync: () => requestAnimationFrame(() => void this._updateIndicator()) }\n )\n\n get value(): string {\n return this._value\n }\n\n set value(v: string) {\n const old = this._value\n this._value = v\n this._formAssociation.sync()\n this.requestUpdate('value', old)\n }\n\n private get _isDisabled(): boolean {\n return this.disabled || this._formAssociation.isFormDisabled()\n }\n\n private async _updateIndicator() {\n const triggers = this.querySelectorAll<WebUiSegmentedTrigger>('web-ui-segmented-trigger')\n let left = 0\n let width = 0\n\n triggers.forEach(trigger => {\n if (trigger.value === this._value) {\n const triggerRect = trigger.getBoundingClientRect()\n const groupRect = this.getBoundingClientRect()\n left = triggerRect.left - groupRect.left\n width = triggerRect.width\n }\n })\n\n // 上一段移动还在飞行 → 这次直接落定(_settling 关掉 left / width 过渡,见 style.css)。\n // 落定这一趟自己也要占飞行窗口,所以放在写定位**之前**开窗:窗口一开,第三次连点\n // 落到的仍是本趟的终值,而不是一个刚起步的插值。\n //\n // 首帧定位不开窗:那是初始化而不是一次「移动」,没有前一段飞行可言。开了窗反而会让\n // 「挂载后 160ms 内的第一次点击」直接落定——那次点击本该是用户看到的第一段动画。\n const landing = this._indicatorReady ? this._openSettleFlight() : false\n\n /*\n * 落定这一趟必须等 `.is-settling` 真的进了 DOM 再写定位。\n *\n * `_settling` 是 Lit 的 reactive state:`classMap` 要等一次异步更新才落到元素上,而\n * `--indicator-left` 是同步写的内联样式。顺序反了的话就是「先改位置、过渡仍开着、\n * 下一帧才补上关过渡的 class」——浏览器已经按插值起跑,异步补上的 class 只是把一段\n * 插值中途掐掉,落定表现为一次跳变而不是直接落定,且掐在哪一帧取决于调度。\n */\n if (landing) await this.updateComplete\n\n this.style.setProperty('--indicator-left', `${left}px`)\n this.style.setProperty('--indicator-width', `${width}px`)\n\n // 首帧只完成定位:先把当前定位以「未启用 left/width transition」状态提交为 before 值,\n // 再打开移动动画。若同一趟里 set 定位与启用 transition,浏览器会把 0→选项 当作一次过渡。\n if (!this._indicatorReady) {\n const indicator = this.renderRoot.querySelector<HTMLElement>('.wui-segmented-indicator')\n void indicator?.offsetWidth\n this._indicatorReady = true\n }\n }\n\n /*\n * 开一段飞行窗口:窗口内到达的改值一律落定,窗口到期才恢复插值过渡。\n *\n * 返回本次是否**落定**(飞行中到达的新值)。\n *\n * 时长取 `--wui-duration-trigger`(与 CSS 里 left / width 那两条过渡同一个值),所以\n * reduced-motion 下它就是 0ms——窗口立即到期,落定门自动退化成「每步都落定」,\n * 那正是 0ms 过渡本来的观感,不需要额外分支。\n *\n * 窗口每次改值都从零重开一整段时长(清掉旧定时器、世代号前进),而不是接着算剩余时长:\n * 剩余时长会让连续落定的窗口越缩越短,最后一次连点反倒拿到一段完整过渡——正是这个门\n * 要消除的那种观感。\n */\n private _openSettleFlight(): boolean {\n const wasFlying = this._settleTimer !== undefined\n const flight = {}\n this._settleFlight = flight\n const request = ++this._settleRequest\n clearTimeout(this._settleTimer)\n\n const duration = triggerDuration(this)\n if (duration === 0) {\n // 没有飞行就没有门可守:直接清掉落定态,让后续改值照常走 CSS 的过渡判定\n //(此时该过渡本身就是 0ms)。\n this._settleTimer = undefined\n this._settleFlight = null\n this._settling = false\n return false\n }\n\n // 已经在飞行中 → 这一趟是落定,保持落定态;否则是正常起一段过渡,先退出落定态。\n this._settling = wasFlying\n this._settleTimer = setTimeout(() => {\n this._settleTimer = undefined\n // 世代号校验:窗口被后续改值重开过,旧回调不得清掉新一轮的落定态。\n if (this._settleRequest !== request || this._settleFlight !== flight) return\n this._settleFlight = null\n this._settling = false\n }, duration)\n return wasFlying\n }\n\n private handlePointerDown(e: PointerEvent) {\n if (this._isDisabled) return\n const triggers = [...this.querySelectorAll<WebUiSegmentedTrigger>('web-ui-segmented-trigger')]\n const enabledTriggers = triggers.filter(t => !t.disabled)\n if (enabledTriggers.length === 0) return\n\n const activeTrigger = triggers.find(t => t.value === this._value)\n if (!activeTrigger || activeTrigger.disabled) return\n\n const activeTriggerRect = activeTrigger.getBoundingClientRect()\n const isPressedOnActive =\n e.clientX >= activeTriggerRect.left &&\n e.clientX <= activeTriggerRect.right &&\n e.clientY >= activeTriggerRect.top &&\n e.clientY <= activeTriggerRect.bottom\n\n if (!isPressedOnActive) return\n\n this._pressed = true\n\n const groupRect = this.getBoundingClientRect()\n const initialTriggerRect = activeTrigger.getBoundingClientRect()\n const initialLeft = initialTriggerRect.left - groupRect.left\n const initialWidth = initialTriggerRect.width\n\n const firstTriggerRect = triggers[0].getBoundingClientRect()\n const lastTriggerRect = triggers[triggers.length - 1].getBoundingClientRect()\n const minLeft = firstTriggerRect.left - groupRect.left\n const maxLeft = lastTriggerRect.right - groupRect.left - initialWidth\n\n const enabledCenters = enabledTriggers.map(t => {\n const r = t.getBoundingClientRect()\n return r.left - groupRect.left + r.width / 2\n })\n\n this._dragGestureHandle?.destroy()\n this._dragGestureHandle = attachDragGesture(e, {\n axis: 'x',\n threshold: 6,\n onMove: info => {\n this._isDragging = true\n const currentLeft = clamp(initialLeft + info.deltaX, minLeft, maxLeft)\n this.style.setProperty('--indicator-left', `${currentLeft}px`)\n this.style.setProperty('--indicator-width', `${initialWidth}px`)\n },\n onEnd: info => {\n const wasDragging = this._isDragging\n this._isDragging = false\n this._pressed = false\n\n if (wasDragging) {\n const currentLeft = clamp(initialLeft + info.deltaX, minLeft, maxLeft)\n const currentCenter = currentLeft + initialWidth / 2\n\n let targetTrigger = activeTrigger\n if (info.velocityX > 300) {\n const currentIdx = enabledTriggers.indexOf(activeTrigger)\n if (currentIdx !== -1 && currentIdx < enabledTriggers.length - 1) {\n targetTrigger = enabledTriggers[currentIdx + 1]\n } else {\n targetTrigger = enabledTriggers[enabledTriggers.length - 1]\n }\n } else if (info.velocityX < -300) {\n const currentIdx = enabledTriggers.indexOf(activeTrigger)\n if (currentIdx > 0) {\n targetTrigger = enabledTriggers[currentIdx - 1]\n } else {\n targetTrigger = enabledTriggers[0]\n }\n } else {\n const nearestIdx = snapToNearest(currentCenter, enabledCenters)\n if (nearestIdx !== -1 && enabledTriggers[nearestIdx]) {\n targetTrigger = enabledTriggers[nearestIdx]\n }\n }\n\n if (targetTrigger.value !== this._value) {\n this.value = targetTrigger.value\n this._groupController.sync()\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }))\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n } else {\n void this._updateIndicator()\n }\n }\n this.requestUpdate()\n },\n onCancel: () => {\n this._isDragging = false\n this._pressed = false\n void this._updateIndicator()\n this.requestUpdate()\n }\n })\n }\n\n private handlePointerUp() {\n this._pressed = false\n }\n\n private handlePointerLeave() {\n if (!this._dragGestureHandle?.isDragging()) {\n this._pressed = false\n }\n }\n\n private readonly _formAssociation = defineFormAssociation<string>({\n host: this,\n initialize: () => {\n const attrValue = this.getAttribute('value')\n if (attrValue !== null && this._value === '') this._value = attrValue\n },\n getState: () => this._value,\n setState: value => {\n this.value = value\n },\n getFormValue: () => (this.name && this._value ? this._value : null),\n getFormState: () => this._value,\n restoreState: state => {\n if (typeof state === 'string') this.value = state\n }\n }).make()\n\n private readonly _formAssociationController = new FormAssociationController(this, this._formAssociation)\n\n override formDisabledCallback(disabled: boolean) {\n this._formAssociation.setDisabled(disabled)\n this._groupController.sync()\n }\n\n override render() {\n return html`\n <div\n class=${classMap({\n 'wui-glass': true,\n 'wui-segmented': true,\n 'is-disabled': this._isDisabled,\n 'is-pressed': this._pressed,\n 'is-dragging': this._isDragging,\n 'is-indicator-ready': this._indicatorReady,\n 'is-settling': this._settling\n })}\n role=\"listbox\"\n aria-orientation=\"horizontal\"\n @pointerdown=${this.handlePointerDown}\n @pointerup=${this.handlePointerUp}\n @pointercancel=${this.handlePointerUp}\n @pointerleave=${this.handlePointerLeave}\n >\n <span class=\"wui-glass wui-segmented-indicator\"></span>\n <slot></slot>\n </div>\n `\n }\n\n declare readonly $events: {\n input: Event\n change: Event\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'web-ui-segmented': WebUiSegmented\n }\n}\n"],"mappings":";;;;;;;;;;;;;;AAiBA,EAA+B;AAE/B,IAAM,IAAmB,CAAC,SAAS,QAAQ;AAS3C,SAAS,EAAgB,GAAyB;CAChD,IAAM,IAAS,EAAc,iBAAiB,CAAE,CAAC,CAAC,iBAAiB,wBAAwB,CAAC;CAC5F,OAAO,MAAW,OAAO,MAAM,KAAK,IAAI,GAAG,CAAM;AACnD;AAGO,IAAM,IAAN,cAA6B,EAAe,CAAU,CAAC,CAAC;;EAmTf,aA1SI,KAAA,OAAA,IAWX,KAAA,WAAA,SAEgB,KAAA,WAAA,IACA,KAAA,WAAA,IAE7B,KAAA,SAAA,IACS,KAAA,kBAAA,IACN,KAAA,YAAA,IACD,KAAA,WAAA,IACG,KAAA,cAAA,IAEwB,KAAA,qBAAA,MAahB,KAAA,gBAAA,MACd,KAAA,iBAAA,GAWW,KAAA,mBAAA,IAAI,EACtC,MACA,EAAsD;GACpD,MAAM;GACN,gBAAgB,CAAC,GAAG,KAAK,iBAAwC,0BAA0B,CAAC;GAC5F,gBAAgB,KAAK;GACrB,WAAU,MAAS;IACjB,KAAK,QAAQ;GACf;GACA,mBAAmB,KAAK;GACxB,SAAS,MACP,aAAkB,eAAe,EAAO,QAAQ,0BAA0B;GAC5E,iBAAiB,GAAS,MAAU,EAAQ,UAAU;GACtD,eAAe,GAAS,MAAW,EAAQ,UAAU,EAAQ,QAAQ;GACrE,cAAc,GAAG,MAAM,MAAM;GAC7B,YAAW,MAAS;GACpB,kBAAkB,GAAS,MAAa;IACtC,EAAQ,UAAU;GACpB;GACA,2BAA2B;IAEzB,AADA,KAAK,cAAc,IAAI,MAAM,SAAS;KAAE,SAAS;KAAM,UAAU;IAAK,CAAC,CAAC,GACxE,KAAK,cAAc,IAAI,MAAM,UAAU;KAAE,SAAS;KAAM,UAAU;IAAK,CAAC,CAAC;GAC3E;EACF,CAAC,CAAC,CAAC,KAAK,GACR,EAAE,iBAAiB,4BAA4B,KAAK,KAAK,iBAAiB,CAAC,EAAE,CAC/E,GAiNoC,KAAA,mBAAA,EAA8B;GAChE,MAAM;GACN,kBAAkB;IAChB,IAAM,IAAY,KAAK,aAAa,OAAO;IAC3C,AAAI,MAAc,QAAQ,KAAK,WAAW,OAAI,KAAK,SAAS;GAC9D;GACA,gBAAgB,KAAK;GACrB,WAAU,MAAS;IACjB,KAAK,QAAQ;GACf;GACA,oBAAqB,KAAK,QAAQ,KAAK,SAAS,KAAK,SAAS;GAC9D,oBAAoB,KAAK;GACzB,eAAc,MAAS;IACrB,AAAI,OAAO,KAAU,aAAU,KAAK,QAAQ;GAC9C;EACF,CAAC,CAAC,CAAC,KAAK,GAEsC,KAAA,6BAAA,IAAI,EAA0B,MAAM,KAAK,gBAAgB;;;EA3S9E,KAAA,SAAA,CAAC,EAAU,CAAK,GAAG,EAAU,CAAK,CAAC;;CAG5D,IACI,UAA8B;EAChC,OAAO,KAAK;CACd;CACA,IAAI,QAAQ,GAAW;EACrB,IAAM,IAAM,KAAK;EAEjB,AADA,KAAK,WAAW,EAAiB,GAAG,GAAkB,OAAO,GAC7D,KAAK,cAAc,WAAW,CAAG;CACnC;CA6BA,uBAAgC;EAK9B,AAJA,MAAM,qBAAqB,GAC3B,KAAK,oBAAoB,QAAQ,GACjC,KAAK,qBAAqB,MAC1B,aAAa,KAAK,YAAY,GAC9B,KAAK,eAAe,KAAA;CACtB;CA6BA,IAAI,QAAgB;EAClB,OAAO,KAAK;CACd;CAEA,IAAI,MAAM,GAAW;EACnB,IAAM,IAAM,KAAK;EAGjB,AAFA,KAAK,SAAS,GACd,KAAK,iBAAiB,KAAK,GAC3B,KAAK,cAAc,SAAS,CAAG;CACjC;CAEA,IAAY,cAAuB;EACjC,OAAO,KAAK,YAAY,KAAK,iBAAiB,eAAe;CAC/D;CAEA,MAAc,mBAAmB;EAC/B,IAAM,IAAW,KAAK,iBAAwC,0BAA0B,GACpF,IAAO,GACP,IAAQ;EAkCZ,AAhCA,EAAS,SAAQ,MAAW;GAC1B,IAAI,EAAQ,UAAU,KAAK,QAAQ;IACjC,IAAM,IAAc,EAAQ,sBAAsB,GAC5C,IAAY,KAAK,sBAAsB;IAE7C,AADA,IAAO,EAAY,OAAO,EAAU,MACpC,IAAQ,EAAY;GACtB;EACF,CAAC,GAQe,KAAK,mBAAkB,KAAK,kBAAkB,KAUjD,MAAM,KAAK,gBAExB,KAAK,MAAM,YAAY,oBAAoB,GAAG,EAAK,GAAG,GACtD,KAAK,MAAM,YAAY,qBAAqB,GAAG,EAAM,GAAG,GAIxD,AAGE,KAAK,qBADL,KADuB,WAAW,cAA2B,0BACxD,CAAA,EAAW,aACO;CAE3B;CAeA,oBAAqC;EACnC,IAAM,IAAY,KAAK,iBAAiB,KAAA,GAClC,IAAS,CAAC;EAChB,KAAK,gBAAgB;EACrB,IAAM,IAAU,EAAE,KAAK;EACvB,aAAa,KAAK,YAAY;EAE9B,IAAM,IAAW,EAAgB,IAAI;EAmBrC,OAlBI,MAAa,KAGf,KAAK,eAAe,KAAA,GACpB,KAAK,gBAAgB,MACrB,KAAK,YAAY,IACV,OAIT,KAAK,YAAY,GACjB,KAAK,eAAe,iBAAiB;GACnC,KAAK,eAAe,KAAA,GAEhB,KAAK,mBAAmB,KAAW,KAAK,kBAAkB,MAC9D,KAAK,gBAAgB,MACrB,KAAK,YAAY;EACnB,GAAG,CAAQ,GACJ;CACT;CAEA,kBAA0B,GAAiB;EACzC,IAAI,KAAK,aAAa;EACtB,IAAM,IAAW,CAAC,GAAG,KAAK,iBAAwC,0BAA0B,CAAC,GACvF,IAAkB,EAAS,QAAO,MAAK,CAAC,EAAE,QAAQ;EACxD,IAAI,EAAgB,WAAW,GAAG;EAElC,IAAM,IAAgB,EAAS,MAAK,MAAK,EAAE,UAAU,KAAK,MAAM;EAChE,IAAI,CAAC,KAAiB,EAAc,UAAU;EAE9C,IAAM,IAAoB,EAAc,sBAAsB;EAO9D,IAAI,EALF,EAAE,WAAW,EAAkB,QAC/B,EAAE,WAAW,EAAkB,SAC/B,EAAE,WAAW,EAAkB,OAC/B,EAAE,WAAW,EAAkB,SAET;EAExB,KAAK,WAAW;EAEhB,IAAM,IAAY,KAAK,sBAAsB,GACvC,IAAqB,EAAc,sBAAsB,GACzD,IAAc,EAAmB,OAAO,EAAU,MAClD,IAAe,EAAmB,OAElC,IAAmB,EAAS,EAAE,CAAC,sBAAsB,GACrD,IAAkB,EAAS,EAAS,SAAS,EAAE,CAAC,sBAAsB,GACtE,IAAU,EAAiB,OAAO,EAAU,MAC5C,IAAU,EAAgB,QAAQ,EAAU,OAAO,GAEnD,IAAiB,EAAgB,KAAI,MAAK;GAC9C,IAAM,IAAI,EAAE,sBAAsB;GAClC,OAAO,EAAE,OAAO,EAAU,OAAO,EAAE,QAAQ;EAC7C,CAAC;EAGD,AADA,KAAK,oBAAoB,QAAQ,GACjC,KAAK,qBAAqB,EAAkB,GAAG;GAC7C,MAAM;GACN,WAAW;GACX,SAAQ,MAAQ;IACd,KAAK,cAAc;IACnB,IAAM,IAAc,EAAM,IAAc,EAAK,QAAQ,GAAS,CAAO;IAErE,AADA,KAAK,MAAM,YAAY,oBAAoB,GAAG,EAAY,GAAG,GAC7D,KAAK,MAAM,YAAY,qBAAqB,GAAG,EAAa,GAAG;GACjE;GACA,QAAO,MAAQ;IACb,IAAM,IAAc,KAAK;IAIzB,IAHA,KAAK,cAAc,IACnB,KAAK,WAAW,IAEZ,GAAa;KAEf,IAAM,IADc,EAAM,IAAc,EAAK,QAAQ,GAAS,CACxC,IAAc,IAAe,GAE/C,IAAgB;KACpB,IAAI,EAAK,YAAY,KAAK;MACxB,IAAM,IAAa,EAAgB,QAAQ,CAAa;MACxD,AAGE,IAHE,MAAe,MAAM,IAAa,EAAgB,SAAS,IAC7C,EAAgB,IAAa,KAE7B,EAAgB,EAAgB,SAAS;KAE7D,OAAO,IAAI,EAAK,YAAY,MAAM;MAChC,IAAM,IAAa,EAAgB,QAAQ,CAAa;MACxD,AAGE,IAHE,IAAa,IACC,EAAgB,IAAa,KAE7B,EAAgB;KAEpC,OAAO;MACL,IAAM,IAAa,EAAc,GAAe,CAAc;MAC9D,AAAI,MAAe,MAAM,EAAgB,OACvC,IAAgB,EAAgB;KAEpC;KAEA,AAAI,EAAc,UAAU,KAAK,SAM/B,KAAU,iBAAiB,KAL3B,KAAK,QAAQ,EAAc,OAC3B,KAAK,iBAAiB,KAAK,GAC3B,KAAK,cAAc,IAAI,MAAM,SAAS;MAAE,SAAS;MAAM,UAAU;KAAK,CAAC,CAAC,GACxE,KAAK,cAAc,IAAI,MAAM,UAAU;MAAE,SAAS;MAAM,UAAU;KAAK,CAAC,CAAC;IAI7E;IACA,KAAK,cAAc;GACrB;GACA,gBAAgB;IAId,AAHA,KAAK,cAAc,IACnB,KAAK,WAAW,IAChB,KAAU,iBAAiB,GAC3B,KAAK,cAAc;GACrB;EACF,CAAC;CACH;CAEA,kBAA0B;EACxB,KAAK,WAAW;CAClB;CAEA,qBAA6B;EAC3B,AAAK,KAAK,oBAAoB,WAAW,MACvC,KAAK,WAAW;CAEpB;CAqBA,qBAA8B,GAAmB;EAE/C,AADA,KAAK,iBAAiB,YAAY,CAAQ,GAC1C,KAAK,iBAAiB,KAAK;CAC7B;CAEA,SAAkB;EAChB,OAAO,CAAI;;gBAEC,EAAS;GACf,aAAa;GACb,iBAAiB;GACjB,eAAe,KAAK;GACpB,cAAc,KAAK;GACnB,eAAe,KAAK;GACpB,sBAAsB,KAAK;GAC3B,eAAe,KAAK;EACtB,CAAC,EAAE;;;uBAGY,KAAK,kBAAkB;qBACzB,KAAK,gBAAgB;yBACjB,KAAK,gBAAgB;wBACtB,KAAK,mBAAmB;;;;;;CAM9C;AAMF;AA9UG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAExC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,IAAA,GAWxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAEzC,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GACN,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,mBAAA,KAAA,CAAA,GACN,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GACN,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GACN,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,eAAA,KAAA,CAAA,GA9BR,IAAA,EAAA,CAAA,EAAc,kBAAkB,CAAA,GAAA,CAAA"}
|