@greypan/web-ui 2.1.8 → 3.0.1
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 +47 -7
- package/README.md +54 -13
- package/dist/assets/menu-portal.js +1 -1
- package/dist/assets/menu-portal.js.map +1 -1
- package/dist/components/autocomplete/index.d.ts +121 -0
- package/dist/components/autocomplete/index.js +414 -0
- package/dist/components/autocomplete/index.js.map +1 -0
- package/dist/components/autocomplete/style.js +6 -0
- package/dist/components/autocomplete/style.js.map +1 -0
- package/dist/components/avatar/index.d.ts +0 -1
- package/dist/components/avatar/index.js +9 -9
- package/dist/components/avatar/index.js.map +1 -1
- package/dist/components/back-top/index.d.ts +0 -1
- package/dist/components/back-top/index.js.map +1 -1
- package/dist/components/badge/index.d.ts +0 -1
- package/dist/components/badge/index.js +5 -5
- package/dist/components/badge/index.js.map +1 -1
- package/dist/components/button/index.d.ts +0 -1
- package/dist/components/button/index.js +8 -8
- package/dist/components/button/index.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.d.ts +0 -1
- package/dist/components/button-group/index.js.map +1 -1
- package/dist/components/checkbox/index.js +7 -5
- package/dist/components/checkbox/index.js.map +1 -1
- package/dist/components/checkbox-group/index.js +2 -2
- package/dist/components/checkbox-group/index.js.map +1 -1
- package/dist/components/context-menu/index.js +25 -25
- package/dist/components/context-menu/index.js.map +1 -1
- package/dist/components/dialog/index.d.ts +1 -0
- package/dist/components/dialog/index.js +9 -5
- package/dist/components/dialog/index.js.map +1 -1
- package/dist/components/drawer/index.js +7 -7
- package/dist/components/drawer/index.js.map +1 -1
- package/dist/components/dropdown/index.js +31 -30
- package/dist/components/dropdown/index.js.map +1 -1
- package/dist/components/dropdown-divider/index.d.ts +0 -1
- package/dist/components/dropdown-divider/index.js.map +1 -1
- package/dist/components/dropdown-header/index.d.ts +0 -1
- package/dist/components/dropdown-header/index.js.map +1 -1
- package/dist/components/dropdown-item/index.d.ts +0 -1
- package/dist/components/dropdown-item/index.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/empty/index.d.ts +0 -1
- package/dist/components/empty/index.js +6 -6
- package/dist/components/empty/index.js.map +1 -1
- package/dist/components/icon/index.d.ts +0 -1
- package/dist/components/icon/index.js.map +1 -1
- package/dist/components/index.d.ts +5 -0
- package/dist/components/index.js +36 -35
- package/dist/components/input/index.d.ts +2 -0
- package/dist/components/input/index.js +24 -13
- package/dist/components/input/index.js.map +1 -1
- package/dist/components/input/style.js +1 -1
- package/dist/components/input/style.js.map +1 -1
- package/dist/components/input-number/index.d.ts +2 -0
- package/dist/components/input-number/index.js +25 -12
- package/dist/components/input-number/index.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 +0 -1
- package/dist/components/layout/index.js +4 -4
- package/dist/components/layout/index.js.map +1 -1
- package/dist/components/option/index.d.ts +0 -11
- package/dist/components/option/index.js.map +1 -1
- package/dist/components/option/style.js +1 -1
- package/dist/components/option/style.js.map +1 -1
- package/dist/components/popover/index.js +12 -12
- package/dist/components/popover/index.js.map +1 -1
- package/dist/components/radio/index.js +8 -5
- package/dist/components/radio/index.js.map +1 -1
- package/dist/components/radio-group/index.js +2 -2
- package/dist/components/radio-group/index.js.map +1 -1
- package/dist/components/segmented/index.js +2 -2
- package/dist/components/segmented/index.js.map +1 -1
- package/dist/components/segmented-trigger/index.d.ts +1 -0
- package/dist/components/segmented-trigger/index.js +11 -2
- package/dist/components/segmented-trigger/index.js.map +1 -1
- package/dist/components/select/index.d.ts +0 -1
- package/dist/components/select/index.js +19 -30
- 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/spinner/index.d.ts +0 -1
- package/dist/components/spinner/index.js.map +1 -1
- package/dist/components/svg-draw-lines/index.d.ts +0 -1
- package/dist/components/svg-draw-lines/index.js.map +1 -1
- package/dist/components/switch/index.js +6 -6
- package/dist/components/textarea/index.js +18 -15
- 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/index.d.ts +0 -1
- package/dist/components/theme/index.js.map +1 -1
- package/dist/components/toast/toast.js +13 -13
- package/dist/components/tooltip/index.js +13 -13
- package/dist/components/tooltip/index.js.map +1 -1
- package/dist/icons/generated/lucide-external-link.d.ts +6 -0
- package/dist/icons/generated/lucide-external-link.js +10 -0
- package/dist/icons/generated/lucide-external-link.js.map +1 -0
- package/dist/icons/generated/lucide-file-text.d.ts +6 -0
- package/dist/icons/generated/lucide-file-text.js +10 -0
- package/dist/icons/generated/lucide-file-text.js.map +1 -0
- package/dist/icons/generated/lucide-film.d.ts +6 -0
- package/dist/icons/generated/lucide-film.js +10 -0
- package/dist/icons/generated/lucide-film.js.map +1 -0
- package/dist/icons/generated/lucide-folder-open.d.ts +6 -0
- package/dist/icons/generated/lucide-folder-open.js +10 -0
- package/dist/icons/generated/lucide-folder-open.js.map +1 -0
- package/dist/icons/generated/lucide-layout-grid.d.ts +6 -0
- package/dist/icons/generated/lucide-layout-grid.js +10 -0
- package/dist/icons/generated/lucide-layout-grid.js.map +1 -0
- package/dist/icons/generated/lucide-music.d.ts +6 -0
- package/dist/icons/generated/lucide-music.js +10 -0
- package/dist/icons/generated/lucide-music.js.map +1 -0
- package/dist/icons/generated/lucide-package.d.ts +6 -0
- package/dist/icons/generated/lucide-package.js +10 -0
- package/dist/icons/generated/lucide-package.js.map +1 -0
- package/dist/icons/generated/lucide-pencil.d.ts +6 -0
- package/dist/icons/generated/lucide-pencil.js +10 -0
- package/dist/icons/generated/lucide-pencil.js.map +1 -0
- package/dist/icons/generated/lucide-refresh-cw.d.ts +6 -0
- package/dist/icons/generated/lucide-refresh-cw.js +10 -0
- package/dist/icons/generated/lucide-refresh-cw.js.map +1 -0
- package/dist/icons/generated/lucide-tags.d.ts +6 -0
- package/dist/icons/generated/lucide-tags.js +10 -0
- package/dist/icons/generated/lucide-tags.js.map +1 -0
- package/dist/icons/generated/lucide-wrench.d.ts +6 -0
- package/dist/icons/generated/lucide-wrench.js +10 -0
- package/dist/icons/generated/lucide-wrench.js.map +1 -0
- package/dist/icons/index.d.ts +11 -0
- package/dist/icons/index.js +12 -1
- package/dist/shared/menu-portal/menu-portal.js +10 -11
- package/dist/shared/menu-portal/menu-portal.js.map +1 -1
- package/dist/shared/overlay/anchored-panel.js +12 -12
- package/dist/shared/overlay/overlay.js +55 -33
- package/dist/shared/overlay/overlay.js.map +1 -1
- package/dist/shared/overlay/portal.js +25 -13
- package/dist/shared/overlay/portal.js.map +1 -1
- package/dist/shared/scroll-lock/scroll-lock.js +13 -12
- package/dist/shared/scroll-lock/scroll-lock.js.map +1 -1
- package/dist/shared/theme/overlay-root.js +3 -3
- package/dist/types/react.d.ts +15 -41
- package/dist/types/utils.d.ts +38 -4
- package/dist/types/vue.d.ts +17 -49
- package/package.json +6 -6
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
//#region src/components/input/style.css?inline
|
|
2
|
-
var e = "*,:before,:after{box-sizing:border-box}:host{display:inline-block}:host([disabled]){cursor:not-allowed;opacity:.4}.wui-input-inner{box-sizing:border-box;width:var(--wui-input-width,200px);min-width:var(--wui-button-size,40px);height:var(--wui-button-size,40px);transition:border-color var(--wui-duration-focus,.2s), box-shadow var(--wui-duration-focus,.2s);border-radius:2147483647px;align-items:center;gap:8px;padding:0 12px;display:flex;position:relative}:host([full]){display:block}:host([full]) .wui-input-inner{width:100%}:host([borderless]) .wui-input-inner{-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;background:0 0;border:none;padding:0}:host([focused]) .wui-input-inner{--wui-glass-shadow:var(--wui-shadow-glass,0 2px 16px #0000000f), 0 0 0 3px var(--wui-focus-ring,#08f6);border-color:var(--wui-color-border-strong,#006ee680)}:host([borderless][focused]) .wui-input-inner{box-shadow:none;border-color:#0000}input{min-width:0;height:100%;font-size:var(--wui-font-size,14px);color:var(--wui-color-text,#1b1b1b);background:0 0;border:none;outline:none;flex:1}input::placeholder{color:var(--wui-color-text-muted,#6a6a6a)}input:disabled{cursor:not-allowed;opacity:.4}slot{font-size:var(--wui-font-size,14px);color:var(--wui-color-text-muted,#6a6a6a);flex-shrink:0;align-items:center;display:flex}slot.empty{display:none}.wui-input-inner web-ui-button[variant=ghost]{--wui-button-color:var(--wui-color-text-muted,#6a6a6a);margin-left:-8px}";
|
|
2
|
+
var e = "*,:before,:after{box-sizing:border-box}:host{display:inline-block}:host([disabled]){cursor:not-allowed;opacity:.4}.wui-input-inner{box-sizing:border-box;width:var(--wui-input-width,200px);min-width:var(--wui-button-size,40px);height:var(--wui-button-size,40px);transition:border-color var(--wui-duration-focus,.2s), box-shadow var(--wui-duration-focus,.2s);border-radius:2147483647px;align-items:center;gap:8px;padding:0 12px;display:flex;position:relative}:host([full]){display:block}:host([full]) .wui-input-inner{width:100%}:host([borderless]) .wui-input-inner{-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;background:0 0;border:none;padding:0}:host([focused]) .wui-input-inner{--wui-glass-shadow:var(--wui-shadow-glass,0 2px 16px #0000000f), 0 0 0 3px var(--wui-focus-ring,#08f6);border-color:var(--wui-color-border-strong,#006ee680)}:host([borderless][focused]) .wui-input-inner{box-shadow:none;border-color:#0000}input{min-width:0;height:100%;font:inherit;font-size:var(--wui-font-size,14px);color:var(--wui-color-text,#1b1b1b);background:0 0;border:none;outline:none;flex:1;margin:0;padding:0}input::placeholder{color:var(--wui-color-text-muted,#6a6a6a)}input:disabled{cursor:not-allowed;opacity:.4}slot{font-size:var(--wui-font-size,14px);color:var(--wui-color-text-muted,#6a6a6a);flex-shrink:0;align-items:center;display:flex}slot.empty{display:none}.wui-input-inner web-ui-button[variant=ghost]{--wui-button-color:var(--wui-color-text-muted,#6a6a6a);margin-left:-8px}";
|
|
3
3
|
//#endregion
|
|
4
4
|
export { e as default };
|
|
5
5
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/input/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n display: inline-block;\n}\n\n:host([disabled]) {\n cursor: not-allowed;\n opacity: 0.4;\n}\n\n.wui-input-inner {\n position: relative;\n\n display: flex;\n gap: 8px;\n align-items: center;\n\n box-sizing: border-box;\n width: var(--wui-input-width, 200px);\n min-width: var(--wui-button-size, 40px);\n height: var(--wui-button-size, 40px);\n padding: 0 12px;\n border-radius: calc(infinity * 1px);\n\n transition:\n border-color var(--wui-duration-focus, 200ms),\n box-shadow var(--wui-duration-focus, 200ms);\n}\n\n:host([full]) {\n display: block;\n}\n\n:host([full]) .wui-input-inner {\n width: 100%;\n}\n\n/* ===== Borderless ===== */\n\n:host([borderless]) .wui-input-inner {\n padding: 0;\n border: none;\n\n background: transparent;\n backdrop-filter: none;\n box-shadow: none;\n}\n\n:host([focused]) .wui-input-inner {\n --wui-glass-shadow:\n var(--wui-shadow-glass, 0 2px 16px rgb(0 0 0 / 0.06)), 0 0 0 3px var(--wui-focus-ring, rgb(0 136 255 / 0.4));\n border-color: var(--wui-color-border-strong, rgb(0 110 230 / 0.5));\n}\n\n:host([borderless][focused]) .wui-input-inner {\n border-color: transparent;\n box-shadow: none;\n}\n\n/* ===== Input ===== */\n\ninput {\n flex: 1;\n\n min-width: 0;\n height: 100%;\n border: none;\n\n font-size: var(--wui-font-size, 14px);\n color: var(--wui-color-text, #1b1b1b);\n\n background: transparent;\n outline: none;\n\n &::placeholder {\n color: var(--wui-color-text-muted, #6a6a6a);\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.4;\n }\n}\n\n/* ===== Prefix / Suffix ===== */\n\nslot {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n\n font-size: var(--wui-font-size, 14px);\n color: var(--wui-color-text-muted, #6a6a6a);\n}\n\n/* slot 无 slotted 内容时折叠 */\nslot.empty {\n display: none;\n}\n\n/* ===== Clear button ===== */\n\n/* 复用 web-ui-button icon ghost:仅覆盖颜色为 muted,保持原清除图标观感;\n 负 margin-left 抵消容器 8px flex gap,让清除按钮紧贴输入文本 */\n.wui-input-inner web-ui-button[variant='ghost'] {\n --wui-button-color: var(--wui-color-text-muted, #6a6a6a);\n margin-left: -8px;\n}\n\n/* ===== Disabled ===== */\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/input/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n display: inline-block;\n}\n\n:host([disabled]) {\n cursor: not-allowed;\n opacity: 0.4;\n}\n\n.wui-input-inner {\n position: relative;\n\n display: flex;\n gap: 8px;\n align-items: center;\n\n box-sizing: border-box;\n width: var(--wui-input-width, 200px);\n min-width: var(--wui-button-size, 40px);\n height: var(--wui-button-size, 40px);\n padding: 0 12px;\n border-radius: calc(infinity * 1px);\n\n transition:\n border-color var(--wui-duration-focus, 200ms),\n box-shadow var(--wui-duration-focus, 200ms);\n}\n\n:host([full]) {\n display: block;\n}\n\n:host([full]) .wui-input-inner {\n width: 100%;\n}\n\n/* ===== Borderless ===== */\n\n:host([borderless]) .wui-input-inner {\n padding: 0;\n border: none;\n\n background: transparent;\n backdrop-filter: none;\n box-shadow: none;\n}\n\n:host([focused]) .wui-input-inner {\n --wui-glass-shadow:\n var(--wui-shadow-glass, 0 2px 16px rgb(0 0 0 / 0.06)), 0 0 0 3px var(--wui-focus-ring, rgb(0 136 255 / 0.4));\n border-color: var(--wui-color-border-strong, rgb(0 110 230 / 0.5));\n}\n\n:host([borderless][focused]) .wui-input-inner {\n border-color: transparent;\n box-shadow: none;\n}\n\n/* ===== Input ===== */\n\ninput {\n flex: 1;\n\n min-width: 0;\n height: 100%;\n margin: 0;\n padding: 0;\n border: none;\n\n /* 表单控件不继承字体;显式继承以对齐宿主排版,避免 UA 默认字体差异 */\n font: inherit;\n font-size: var(--wui-font-size, 14px);\n color: var(--wui-color-text, #1b1b1b);\n\n background: transparent;\n outline: none;\n\n &::placeholder {\n color: var(--wui-color-text-muted, #6a6a6a);\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.4;\n }\n}\n\n/* ===== Prefix / Suffix ===== */\n\nslot {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n\n font-size: var(--wui-font-size, 14px);\n color: var(--wui-color-text-muted, #6a6a6a);\n}\n\n/* slot 无 slotted 内容时折叠 */\nslot.empty {\n display: none;\n}\n\n/* ===== Clear button ===== */\n\n/* 复用 web-ui-button icon ghost:仅覆盖颜色为 muted,保持原清除图标观感;\n 负 margin-left 抵消容器 8px flex gap,让清除按钮紧贴输入文本 */\n.wui-input-inner web-ui-button[variant='ghost'] {\n --wui-button-color: var(--wui-color-text-muted, #6a6a6a);\n margin-left: -8px;\n}\n\n/* ===== Disabled ===== */\n"],"mappings":""}
|
|
@@ -5,6 +5,7 @@ export declare class WebUiInputNumber extends LitElement {
|
|
|
5
5
|
placeholder: string;
|
|
6
6
|
name: string;
|
|
7
7
|
disabled: boolean;
|
|
8
|
+
readonly: boolean;
|
|
8
9
|
required: boolean;
|
|
9
10
|
get precision(): number;
|
|
10
11
|
set precision(v: number);
|
|
@@ -39,6 +40,7 @@ export declare class WebUiInputNumber extends LitElement {
|
|
|
39
40
|
private setValueAndNotify;
|
|
40
41
|
private handleStep;
|
|
41
42
|
private handleInput;
|
|
43
|
+
private handleNativeChange;
|
|
42
44
|
private handleKeydown;
|
|
43
45
|
private handleFocus;
|
|
44
46
|
private handleBlur;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import e from "../../_virtual/_@oxc-project_runtime@0.140.0/helpers/esm/decorate.js";
|
|
2
2
|
import "../icon/index.js";
|
|
3
|
-
import t from "../../
|
|
4
|
-
import n from "../../icons/generated/lucide-
|
|
5
|
-
import r from "../../
|
|
3
|
+
import t from "../../icons/generated/lucide-plus.js";
|
|
4
|
+
import n from "../../icons/generated/lucide-minus.js";
|
|
5
|
+
import r from "../../assets/glass.js";
|
|
6
6
|
import { normalizeNumber as i } from "../../shared/normalize/index.js";
|
|
7
7
|
import a from "./style.js";
|
|
8
8
|
import { LitElement as o, html as s, unsafeCSS as c } from "lit";
|
|
@@ -10,13 +10,13 @@ import { customElement as l, property as u, state as d } from "lit/decorators.js
|
|
|
10
10
|
//#region src/components/input-number/index.ts
|
|
11
11
|
var f = class extends o {
|
|
12
12
|
constructor(...e) {
|
|
13
|
-
super(...e), this.placeholder = "", this.name = "", this.disabled = !1, this.required = !1, this._value = 0, this._min = 0, this._max = Infinity, this._step = 1, this._focused = !1, this._formDisabled = !1, this._precision = 0;
|
|
13
|
+
super(...e), this.placeholder = "", this.name = "", this.disabled = !1, this.readonly = !1, this.required = !1, this._value = 0, this._min = 0, this._max = Infinity, this._step = 1, this._focused = !1, this._formDisabled = !1, this._precision = 0;
|
|
14
14
|
}
|
|
15
15
|
static {
|
|
16
16
|
this.formAssociated = !0;
|
|
17
17
|
}
|
|
18
18
|
static {
|
|
19
|
-
this.styles = [c(
|
|
19
|
+
this.styles = [c(r), c(a)];
|
|
20
20
|
}
|
|
21
21
|
get precision() {
|
|
22
22
|
return this._precision;
|
|
@@ -104,15 +104,23 @@ var f = class extends o {
|
|
|
104
104
|
}));
|
|
105
105
|
}
|
|
106
106
|
handleStep(e) {
|
|
107
|
-
this._isDisabled || this.setValueAndNotify(this._value + e * this._effectiveStep);
|
|
107
|
+
this._isDisabled || this.readonly || this.setValueAndNotify(this._value + e * this._effectiveStep);
|
|
108
108
|
}
|
|
109
109
|
handleInput(e) {
|
|
110
|
-
if (!(e.target instanceof HTMLInputElement)) return;
|
|
110
|
+
if (this.readonly || !(e.target instanceof HTMLInputElement)) return;
|
|
111
111
|
let t = e.target.value;
|
|
112
112
|
t !== "" && t !== "-" && (this._value = this.clamp(this.round(Number(t))), this._internals?.setFormValue?.(String(this._value)), this._syncValidity());
|
|
113
113
|
}
|
|
114
|
+
handleNativeChange(e) {
|
|
115
|
+
if (this.readonly || !(e.target instanceof HTMLInputElement)) return;
|
|
116
|
+
let t = e.target.value;
|
|
117
|
+
t !== "" && t !== "-" && (this._value = this.clamp(this.round(Number(t))), this._internals?.setFormValue?.(String(this._value)), this._syncValidity(), this.dispatchEvent(new Event("change", {
|
|
118
|
+
bubbles: !0,
|
|
119
|
+
composed: !0
|
|
120
|
+
})));
|
|
121
|
+
}
|
|
114
122
|
handleKeydown(e) {
|
|
115
|
-
this._isDisabled || (e.key === "ArrowUp" ? (e.preventDefault(), this.setValueAndNotify(this._value + this._effectiveStep), this.dispatchEvent(new Event("change", {
|
|
123
|
+
this._isDisabled || this.readonly || (e.key === "ArrowUp" ? (e.preventDefault(), this.setValueAndNotify(this._value + this._effectiveStep), this.dispatchEvent(new Event("change", {
|
|
116
124
|
bubbles: !0,
|
|
117
125
|
composed: !0
|
|
118
126
|
}))) : e.key === "ArrowDown" && (e.preventDefault(), this.setValueAndNotify(this._value - this._effectiveStep), this.dispatchEvent(new Event("change", {
|
|
@@ -132,10 +140,10 @@ var f = class extends o {
|
|
|
132
140
|
<button
|
|
133
141
|
class="num-btn"
|
|
134
142
|
aria-label="Decrease"
|
|
135
|
-
?disabled=${this._isDisabled || this.atMin}
|
|
143
|
+
?disabled=${this._isDisabled || this.readonly || this.atMin}
|
|
136
144
|
@click=${() => this.handleStep(-1)}
|
|
137
145
|
>
|
|
138
|
-
<web-ui-icon .icon=${
|
|
146
|
+
<web-ui-icon .icon=${n}></web-ui-icon>
|
|
139
147
|
</button>
|
|
140
148
|
<input
|
|
141
149
|
type="number"
|
|
@@ -143,8 +151,10 @@ var f = class extends o {
|
|
|
143
151
|
name=${this.name}
|
|
144
152
|
.value=${String(this._value)}
|
|
145
153
|
?disabled=${this._isDisabled}
|
|
154
|
+
?readonly=${this.readonly}
|
|
146
155
|
?required=${this.required}
|
|
147
156
|
@input=${this.handleInput}
|
|
157
|
+
@change=${this.handleNativeChange}
|
|
148
158
|
@keydown=${this.handleKeydown}
|
|
149
159
|
@focus=${this.handleFocus}
|
|
150
160
|
@blur=${this.handleBlur}
|
|
@@ -152,10 +162,10 @@ var f = class extends o {
|
|
|
152
162
|
<button
|
|
153
163
|
class="num-btn"
|
|
154
164
|
aria-label="Increase"
|
|
155
|
-
?disabled=${this._isDisabled || this.atMax}
|
|
165
|
+
?disabled=${this._isDisabled || this.readonly || this.atMax}
|
|
156
166
|
@click=${() => this.handleStep(1)}
|
|
157
167
|
>
|
|
158
|
-
<web-ui-icon .icon=${
|
|
168
|
+
<web-ui-icon .icon=${t}></web-ui-icon>
|
|
159
169
|
</button>
|
|
160
170
|
</div>
|
|
161
171
|
`;
|
|
@@ -173,6 +183,9 @@ e([u({
|
|
|
173
183
|
})], f.prototype, "disabled", void 0), e([u({
|
|
174
184
|
type: Boolean,
|
|
175
185
|
reflect: !0
|
|
186
|
+
})], f.prototype, "readonly", void 0), e([u({
|
|
187
|
+
type: Boolean,
|
|
188
|
+
reflect: !0
|
|
176
189
|
})], f.prototype, "required", void 0), e([u({
|
|
177
190
|
type: Number,
|
|
178
191
|
reflect: !0
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/input-number/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport '@/components/icon'\nimport glass from '@/assets/glass.css?inline'\nimport { lucideMinus, lucidePlus } from '@/icons'\nimport { normalizeNumber } from '@/shared/normalize'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-input-number')\nexport class WebUiInputNumber extends LitElement {\n static formAssociated = true\n static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n\n @property({ type: String, reflect: true }) placeholder = ''\n @property({ type: String, reflect: true }) name = ''\n @property({ type: Boolean, reflect: true }) disabled = false\n @property({ type: Boolean, reflect: true }) required = false\n @property({ type: Number, reflect: true })\n get precision(): number {\n return this._precision\n }\n // 精度变化时重算现有值,避免浮点累积误差\n set precision(v: number) {\n const old = this._precision\n this._precision = v\n const current = this.clamp(this.round(this._value))\n if (current !== this._value) {\n this._value = current\n this._internals?.setFormValue?.(String(current))\n }\n this.requestUpdate('precision', old)\n }\n\n @state() private _value = 0\n @state() private _min = 0\n @state() private _max = Infinity\n @state() private _step = 1\n @state() private _focused = false\n @state() private _formDisabled = false\n private _precision = 0\n\n private _internals?: ElementInternals\n\n @property({ type: Number, reflect: true })\n get value(): number {\n return this._value\n }\n\n set value(v: number) {\n const clamped = this.clamp(this.round(v))\n const old = this._value\n this._value = clamped\n this._internals?.setFormValue?.(String(clamped))\n this.requestUpdate('value', old)\n }\n\n private get _isDisabled(): boolean {\n return this.disabled || this._formDisabled\n }\n\n @property({ type: Number })\n get min(): number {\n return this._min\n }\n\n set min(v: unknown) {\n this._min = normalizeNumber(v, -Infinity, Infinity, 0)\n }\n\n @property({ type: Number })\n get max(): number {\n return this._max\n }\n\n set max(v: unknown) {\n this._max = normalizeNumber(v, -Infinity, Infinity, Infinity)\n }\n\n @property({ type: Number })\n get step(): number {\n return this._step\n }\n\n // 步进值,默认 1;若声明了 precision 则以 precision 退化步进\n set step(v: unknown) {\n this._step = normalizeNumber(v, 0, Infinity, 1)\n }\n\n private get _effectiveStep(): number {\n return this._step\n }\n\n private get atMin(): boolean {\n return this._value <= this._min\n }\n\n private get atMax(): boolean {\n return this._value >= this._max\n }\n\n override connectedCallback() {\n super.connectedCallback()\n if (!this._internals) {\n this._internals = this.attachInternals()\n }\n this._internals.setFormValue?.(String(this._value))\n }\n\n formResetCallback() {\n const attr = this.getAttribute('value')\n this.value = attr !== null ? Number(attr) : 0\n }\n\n formDisabledCallback(disabled: boolean) {\n this._formDisabled = disabled\n }\n\n formStateRestoreCallback(state: string | File | FormData | null) {\n if (typeof state === 'string') this.value = Number(state)\n }\n\n override updated() {\n this._syncValidity()\n this.toggleAttribute('focused', this._focused)\n }\n\n private _syncValidity() {\n const input = this.shadowRoot?.querySelector('input')\n if (!this._internals || !input || typeof this._internals.setValidity !== 'function') return\n if (this._isDisabled || input.validity.valid) {\n this._internals.setValidity({})\n return\n }\n const flags: ValidityStateFlags = {}\n if (input.validity.valueMissing) flags.valueMissing = true\n if (input.validity.rangeUnderflow) flags.rangeUnderflow = true\n if (input.validity.rangeOverflow) flags.rangeOverflow = true\n if (input.validity.stepMismatch) flags.stepMismatch = true\n this._internals.setValidity(flags, input.validationMessage, input)\n }\n\n private clamp(v: number): number {\n return Math.min(this._max, Math.max(this._min, v))\n }\n\n private round(v: number): number {\n const f = 10 ** this.precision\n return Math.round(v * f) / f\n }\n\n private setValueAndNotify(v: number) {\n this.value = this.clamp(this.round(v))\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }))\n }\n\n private handleStep(direction: 1 | -1) {\n if (this._isDisabled) return\n this.setValueAndNotify(this._value + direction * this._effectiveStep)\n }\n\n private handleInput(e: Event) {\n if (!(e.target instanceof HTMLInputElement)) return\n const raw = e.target.value\n if (raw === '' || raw === '-') return\n this._value = this.clamp(this.round(Number(raw)))\n this._internals?.setFormValue?.(String(this._value))\n this._syncValidity()\n }\n\n private handleKeydown(e: KeyboardEvent) {\n if (this._isDisabled) return\n if (e.key === 'ArrowUp') {\n e.preventDefault()\n this.setValueAndNotify(this._value + this._effectiveStep)\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n } else if (e.key === 'ArrowDown') {\n e.preventDefault()\n this.setValueAndNotify(this._value - this._effectiveStep)\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n }\n }\n\n private handleFocus() {\n if (!this._isDisabled) this._focused = true\n }\n\n private handleBlur() {\n this._focused = false\n }\n\n override render() {\n return html`\n <div class=\"wui-glass wui-input-inner\">\n <button\n class=\"num-btn\"\n aria-label=\"Decrease\"\n ?disabled=${this._isDisabled || this.atMin}\n @click=${() => this.handleStep(-1)}\n >\n <web-ui-icon .icon=${lucideMinus}></web-ui-icon>\n </button>\n <input\n type=\"number\"\n placeholder=${this.placeholder}\n name=${this.name}\n .value=${String(this._value)}\n ?disabled=${this._isDisabled}\n ?required=${this.required}\n @input=${this.handleInput}\n @keydown=${this.handleKeydown}\n @focus=${this.handleFocus}\n @blur=${this.handleBlur}\n />\n <button\n class=\"num-btn\"\n aria-label=\"Increase\"\n ?disabled=${this._isDisabled || this.atMax}\n @click=${() => this.handleStep(1)}\n >\n <web-ui-icon .icon=${lucidePlus}></web-ui-icon>\n </button>\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-input-number': WebUiInputNumber\n }\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/input-number/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport '@/components/icon'\nimport glass from '@/assets/glass.css?inline'\nimport { lucideMinus, lucidePlus } from '@/icons'\nimport { normalizeNumber } from '@/shared/normalize'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-input-number')\nexport class WebUiInputNumber extends LitElement {\n static formAssociated = true\n static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n\n @property({ type: String, reflect: true }) placeholder = ''\n @property({ type: String, reflect: true }) name = ''\n @property({ type: Boolean, reflect: true }) disabled = false\n @property({ type: Boolean, reflect: true }) readonly = false\n @property({ type: Boolean, reflect: true }) required = false\n @property({ type: Number, reflect: true })\n get precision(): number {\n return this._precision\n }\n // 精度变化时重算现有值,避免浮点累积误差\n set precision(v: number) {\n const old = this._precision\n this._precision = v\n const current = this.clamp(this.round(this._value))\n if (current !== this._value) {\n this._value = current\n this._internals?.setFormValue?.(String(current))\n }\n this.requestUpdate('precision', old)\n }\n\n @state() private _value = 0\n @state() private _min = 0\n @state() private _max = Infinity\n @state() private _step = 1\n @state() private _focused = false\n @state() private _formDisabled = false\n private _precision = 0\n\n private _internals?: ElementInternals\n\n @property({ type: Number, reflect: true })\n get value(): number {\n return this._value\n }\n\n set value(v: number) {\n const clamped = this.clamp(this.round(v))\n const old = this._value\n this._value = clamped\n this._internals?.setFormValue?.(String(clamped))\n this.requestUpdate('value', old)\n }\n\n private get _isDisabled(): boolean {\n return this.disabled || this._formDisabled\n }\n\n @property({ type: Number })\n get min(): number {\n return this._min\n }\n\n set min(v: unknown) {\n this._min = normalizeNumber(v, -Infinity, Infinity, 0)\n }\n\n @property({ type: Number })\n get max(): number {\n return this._max\n }\n\n set max(v: unknown) {\n this._max = normalizeNumber(v, -Infinity, Infinity, Infinity)\n }\n\n @property({ type: Number })\n get step(): number {\n return this._step\n }\n\n // 步进值,默认 1;若声明了 precision 则以 precision 退化步进\n set step(v: unknown) {\n this._step = normalizeNumber(v, 0, Infinity, 1)\n }\n\n private get _effectiveStep(): number {\n return this._step\n }\n\n private get atMin(): boolean {\n return this._value <= this._min\n }\n\n private get atMax(): boolean {\n return this._value >= this._max\n }\n\n override connectedCallback() {\n super.connectedCallback()\n if (!this._internals) {\n this._internals = this.attachInternals()\n }\n this._internals.setFormValue?.(String(this._value))\n }\n\n formResetCallback() {\n const attr = this.getAttribute('value')\n this.value = attr !== null ? Number(attr) : 0\n }\n\n formDisabledCallback(disabled: boolean) {\n this._formDisabled = disabled\n }\n\n formStateRestoreCallback(state: string | File | FormData | null) {\n if (typeof state === 'string') this.value = Number(state)\n }\n\n override updated() {\n this._syncValidity()\n this.toggleAttribute('focused', this._focused)\n }\n\n private _syncValidity() {\n const input = this.shadowRoot?.querySelector('input')\n if (!this._internals || !input || typeof this._internals.setValidity !== 'function') return\n if (this._isDisabled || input.validity.valid) {\n this._internals.setValidity({})\n return\n }\n const flags: ValidityStateFlags = {}\n if (input.validity.valueMissing) flags.valueMissing = true\n if (input.validity.rangeUnderflow) flags.rangeUnderflow = true\n if (input.validity.rangeOverflow) flags.rangeOverflow = true\n if (input.validity.stepMismatch) flags.stepMismatch = true\n this._internals.setValidity(flags, input.validationMessage, input)\n }\n\n private clamp(v: number): number {\n return Math.min(this._max, Math.max(this._min, v))\n }\n\n private round(v: number): number {\n const f = 10 ** this.precision\n return Math.round(v * f) / f\n }\n\n private setValueAndNotify(v: number) {\n this.value = this.clamp(this.round(v))\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }))\n }\n\n private handleStep(direction: 1 | -1) {\n if (this._isDisabled || this.readonly) return\n this.setValueAndNotify(this._value + direction * this._effectiveStep)\n }\n\n private handleInput(e: Event) {\n if (this.readonly) return\n if (!(e.target instanceof HTMLInputElement)) return\n const raw = e.target.value\n if (raw === '' || raw === '-') return\n this._value = this.clamp(this.round(Number(raw)))\n this._internals?.setFormValue?.(String(this._value))\n this._syncValidity()\n }\n\n // 原生 change 不 composed,被 shadow root 挡住;文本失焦提交时补发 composed 事件,\n // 与 ArrowUp/ArrowDown 的 change 行为对齐。\n private handleNativeChange(e: Event) {\n if (this.readonly) return\n if (!(e.target instanceof HTMLInputElement)) return\n const raw = e.target.value\n if (raw === '' || raw === '-') return\n this._value = this.clamp(this.round(Number(raw)))\n this._internals?.setFormValue?.(String(this._value))\n this._syncValidity()\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n }\n\n private handleKeydown(e: KeyboardEvent) {\n if (this._isDisabled || this.readonly) return\n if (e.key === 'ArrowUp') {\n e.preventDefault()\n this.setValueAndNotify(this._value + this._effectiveStep)\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n } else if (e.key === 'ArrowDown') {\n e.preventDefault()\n this.setValueAndNotify(this._value - this._effectiveStep)\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n }\n }\n\n private handleFocus() {\n if (!this._isDisabled) this._focused = true\n }\n\n private handleBlur() {\n this._focused = false\n }\n\n override render() {\n return html`\n <div class=\"wui-glass wui-input-inner\">\n <button\n class=\"num-btn\"\n aria-label=\"Decrease\"\n ?disabled=${this._isDisabled || this.readonly || this.atMin}\n @click=${() => this.handleStep(-1)}\n >\n <web-ui-icon .icon=${lucideMinus}></web-ui-icon>\n </button>\n <input\n type=\"number\"\n placeholder=${this.placeholder}\n name=${this.name}\n .value=${String(this._value)}\n ?disabled=${this._isDisabled}\n ?readonly=${this.readonly}\n ?required=${this.required}\n @input=${this.handleInput}\n @change=${this.handleNativeChange}\n @keydown=${this.handleKeydown}\n @focus=${this.handleFocus}\n @blur=${this.handleBlur}\n />\n <button\n class=\"num-btn\"\n aria-label=\"Increase\"\n ?disabled=${this._isDisabled || this.readonly || this.atMax}\n @click=${() => this.handleStep(1)}\n >\n <web-ui-icon .icon=${lucidePlus}></web-ui-icon>\n </button>\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-input-number': WebUiInputNumber\n }\n}\n"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
//#region src/components/input-number/style.css?inline
|
|
2
|
-
var e = "*,:before,:after{box-sizing:border-box}:host{display:inline-block}:host([disabled]){cursor:not-allowed;opacity:.4}.wui-input-inner{box-sizing:border-box;width:var(--wui-input-width,200px);min-width:var(--wui-button-size,40px);height:var(--wui-button-size,40px);transition:border-color var(--wui-duration-focus,.2s), box-shadow var(--wui-duration-focus,.2s);border-radius:2147483647px;align-items:center;gap:4px;padding:0 4px;display:flex;position:relative}:host([focused]) .wui-input-inner{--wui-glass-shadow:var(--wui-shadow-glass,0 2px 16px #0000000f), 0 0 0 3px var(--wui-focus-ring,#08f6);border-color:var(--wui-color-border-strong,#006ee680)}input{min-width:48px;height:100%;font-size:var(--wui-font-size,14px);color:var(--wui-color-text,#1b1b1b);text-align:center;background:0 0;border:none;outline:none;flex:1}input::-webkit-inner-spin-button{appearance:none;margin:0}input::-webkit-outer-spin-button{appearance:none;margin:0}input[type=number]{appearance:textfield}input:disabled{cursor:not-allowed;opacity:.4}.num-btn{cursor:pointer;width:32px;height:32px;color:var(--wui-color-text-muted,#6a6a6a);transition:background-color var(--wui-duration-trigger,.16s) ease;background:0 0;border:none;border-radius:2147483647px;flex-shrink:0;justify-content:center;align-items:center;display:flex}.num-btn:disabled{cursor:not-allowed;opacity:.4}.num-btn:focus-visible{outline:3px solid var(--wui-focus-ring,#08f6);outline-offset:2px}@media (hover:hover) and (pointer:fine){.num-btn:hover:not(:disabled){background:color-mix(in srgb, var(--wui-color-text,#1b1b1b) 12%, transparent)}}.num-btn:active:not(:disabled){background:color-mix(in srgb, var(--wui-color-text,#1b1b1b) 18%, transparent)}@media (prefers-reduced-motion:reduce){.num-btn{transition:background-color var(--wui-duration-trigger,.16s) ease}}";
|
|
2
|
+
var e = "*,:before,:after{box-sizing:border-box}:host{display:inline-block}:host([disabled]){cursor:not-allowed;opacity:.4}.wui-input-inner{box-sizing:border-box;width:var(--wui-input-width,200px);min-width:var(--wui-button-size,40px);height:var(--wui-button-size,40px);transition:border-color var(--wui-duration-focus,.2s), box-shadow var(--wui-duration-focus,.2s);border-radius:2147483647px;align-items:center;gap:4px;padding:0 4px;display:flex;position:relative}:host([focused]) .wui-input-inner{--wui-glass-shadow:var(--wui-shadow-glass,0 2px 16px #0000000f), 0 0 0 3px var(--wui-focus-ring,#08f6);border-color:var(--wui-color-border-strong,#006ee680)}input{min-width:48px;height:100%;font:inherit;font-size:var(--wui-font-size,14px);color:var(--wui-color-text,#1b1b1b);text-align:center;background:0 0;border:none;outline:none;flex:1;margin:0;padding:0}input::-webkit-inner-spin-button{appearance:none;margin:0}input::-webkit-outer-spin-button{appearance:none;margin:0}input[type=number]{appearance:textfield}input:disabled{cursor:not-allowed;opacity:.4}.num-btn{cursor:pointer;width:32px;height:32px;color:var(--wui-color-text-muted,#6a6a6a);transition:background-color var(--wui-duration-trigger,.16s) ease;background:0 0;border:none;border-radius:2147483647px;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:flex}.num-btn:disabled{cursor:not-allowed;opacity:.4}.num-btn:focus-visible{outline:3px solid var(--wui-focus-ring,#08f6);outline-offset:2px}@media (hover:hover) and (pointer:fine){.num-btn:hover:not(:disabled){background:color-mix(in srgb, var(--wui-color-text,#1b1b1b) 12%, transparent)}}.num-btn:active:not(:disabled){background:color-mix(in srgb, var(--wui-color-text,#1b1b1b) 18%, transparent)}@media (prefers-reduced-motion:reduce){.num-btn{transition:background-color var(--wui-duration-trigger,.16s) ease}}";
|
|
3
3
|
//#endregion
|
|
4
4
|
export { e as default };
|
|
5
5
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/input-number/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n display: inline-block;\n}\n\n:host([disabled]) {\n cursor: not-allowed;\n opacity: 0.4;\n}\n\n.wui-input-inner {\n position: relative;\n\n display: flex;\n gap: 4px;\n align-items: center;\n\n box-sizing: border-box;\n width: var(--wui-input-width, 200px);\n min-width: var(--wui-button-size, 40px);\n height: var(--wui-button-size, 40px);\n padding: 0 4px;\n border-radius: calc(infinity * 1px);\n\n transition:\n border-color var(--wui-duration-focus, 200ms),\n box-shadow var(--wui-duration-focus, 200ms);\n}\n\n:host([focused]) .wui-input-inner {\n --wui-glass-shadow:\n var(--wui-shadow-glass, 0 2px 16px rgb(0 0 0 / 0.06)), 0 0 0 3px var(--wui-focus-ring, rgb(0 136 255 / 0.4));\n border-color: var(--wui-color-border-strong, rgb(0 110 230 / 0.5));\n}\n\ninput {\n flex: 1;\n\n min-width: 48px;\n height: 100%;\n border: none;\n\n font-size: var(--wui-font-size, 14px);\n color: var(--wui-color-text, #1b1b1b);\n text-align: center;\n\n background: transparent;\n outline: none;\n\n &::-webkit-inner-spin-button,\n &::-webkit-outer-spin-button {\n margin: 0;\n appearance: none;\n }\n\n &[type='number'] {\n appearance: textfield;\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.4;\n }\n}\n\n.num-btn {\n cursor: pointer;\n\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n\n width: 32px;\n height: 32px;\n border: none;\n border-radius: calc(infinity * 1px);\n\n color: var(--wui-color-text-muted, #6a6a6a);\n\n background: transparent;\n\n transition: background-color var(--wui-duration-trigger, 160ms) ease;\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.4;\n }\n\n &:focus-visible {\n outline: 3px solid var(--wui-focus-ring, rgb(0 136 255 / 0.4));\n outline-offset: 2px;\n }\n}\n\n@media (hover: hover) and (pointer: fine) {\n .num-btn:hover:not(:disabled) {\n background: color-mix(in srgb, var(--wui-color-text, #1b1b1b) 12%, transparent);\n }\n}\n\n.num-btn:active:not(:disabled) {\n background: color-mix(in srgb, var(--wui-color-text, #1b1b1b) 18%, transparent);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .num-btn {\n transition: background-color var(--wui-duration-trigger, 160ms) ease;\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/input-number/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n display: inline-block;\n}\n\n:host([disabled]) {\n cursor: not-allowed;\n opacity: 0.4;\n}\n\n.wui-input-inner {\n position: relative;\n\n display: flex;\n gap: 4px;\n align-items: center;\n\n box-sizing: border-box;\n width: var(--wui-input-width, 200px);\n min-width: var(--wui-button-size, 40px);\n height: var(--wui-button-size, 40px);\n padding: 0 4px;\n border-radius: calc(infinity * 1px);\n\n transition:\n border-color var(--wui-duration-focus, 200ms),\n box-shadow var(--wui-duration-focus, 200ms);\n}\n\n:host([focused]) .wui-input-inner {\n --wui-glass-shadow:\n var(--wui-shadow-glass, 0 2px 16px rgb(0 0 0 / 0.06)), 0 0 0 3px var(--wui-focus-ring, rgb(0 136 255 / 0.4));\n border-color: var(--wui-color-border-strong, rgb(0 110 230 / 0.5));\n}\n\ninput {\n flex: 1;\n\n min-width: 48px;\n height: 100%;\n margin: 0;\n padding: 0;\n border: none;\n\n /* 表单控件不继承字体;显式继承以对齐宿主排版,避免 UA 默认字体差异 */\n font: inherit;\n font-size: var(--wui-font-size, 14px);\n color: var(--wui-color-text, #1b1b1b);\n text-align: center;\n\n background: transparent;\n outline: none;\n\n &::-webkit-inner-spin-button,\n &::-webkit-outer-spin-button {\n margin: 0;\n appearance: none;\n }\n\n &[type='number'] {\n appearance: textfield;\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.4;\n }\n}\n\n.num-btn {\n cursor: pointer;\n\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n\n width: 32px;\n height: 32px;\n padding: 0;\n border: none;\n border-radius: calc(infinity * 1px);\n\n color: var(--wui-color-text-muted, #6a6a6a);\n\n background: transparent;\n\n transition: background-color var(--wui-duration-trigger, 160ms) ease;\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.4;\n }\n\n &:focus-visible {\n outline: 3px solid var(--wui-focus-ring, rgb(0 136 255 / 0.4));\n outline-offset: 2px;\n }\n}\n\n@media (hover: hover) and (pointer: fine) {\n .num-btn:hover:not(:disabled) {\n background: color-mix(in srgb, var(--wui-color-text, #1b1b1b) 12%, transparent);\n }\n}\n\n.num-btn:active:not(:disabled) {\n background: color-mix(in srgb, var(--wui-color-text, #1b1b1b) 18%, transparent);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .num-btn {\n transition: background-color var(--wui-duration-trigger, 160ms) ease;\n }\n}\n"],"mappings":""}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import e from "../../_virtual/_@oxc-project_runtime@0.140.0/helpers/esm/decorate.js";
|
|
2
2
|
import "../icon/index.js";
|
|
3
|
-
import t from "../../
|
|
4
|
-
import n from "../../
|
|
3
|
+
import t from "../../icons/generated/radix-icons-panel-left-minimized.js";
|
|
4
|
+
import n from "../../assets/glass.js";
|
|
5
5
|
import "../button/index.js";
|
|
6
6
|
import r from "./style.js";
|
|
7
7
|
import { LitElement as i, html as a, unsafeCSS as o } from "lit";
|
|
@@ -13,7 +13,7 @@ var u = class extends i {
|
|
|
13
13
|
super(...e), this._sidebarOpen = !1;
|
|
14
14
|
}
|
|
15
15
|
static {
|
|
16
|
-
this.styles = [o(
|
|
16
|
+
this.styles = [o(n), o(r)];
|
|
17
17
|
}
|
|
18
18
|
_toggleSidebar() {
|
|
19
19
|
this._sidebarOpen = !this._sidebarOpen;
|
|
@@ -53,7 +53,7 @@ var u = class extends i {
|
|
|
53
53
|
@click="${this._toggleSidebar}"
|
|
54
54
|
aria-label="打开导航菜单"
|
|
55
55
|
>
|
|
56
|
-
<web-ui-icon .icon=${
|
|
56
|
+
<web-ui-icon .icon=${t}></web-ui-icon>
|
|
57
57
|
</web-ui-button>
|
|
58
58
|
`;
|
|
59
59
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/layout/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\n\nimport glass from '@/assets/glass.css?inline'\nimport '@/components/icon'\nimport '@/components/button'\nimport { radixIconsPanelLeftMinimized } from '@/icons'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-layout')\nexport class WebUiLayout extends LitElement {\n static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n\n @state() private _sidebarOpen = false\n\n private _toggleSidebar() {\n this._sidebarOpen = !this._sidebarOpen\n }\n\n private _closeSidebar() {\n this._sidebarOpen = false\n }\n\n private _onSidebarClick(e: MouseEvent) {\n const target = e.target as HTMLElement\n if (target.closest('a, button, [role=\"button\"]')) {\n this._closeSidebar()\n }\n }\n\n override render() {\n return html`\n <div class=\"layout-grid\">\n <header>\n <slot name=\"header\"></slot>\n </header>\n <main>\n <slot></slot>\n </main>\n <aside class=\"${classMap({ open: this._sidebarOpen })}\" @click=\"${this._onSidebarClick}\">\n <div class=\"menu wui-glass\"><slot name=\"sidebar\"></slot></div>\n </aside>\n <footer>\n <slot name=\"tabbar\"></slot>\n </footer>\n </div>\n\n <div class=\"${classMap({ backdrop: true, open: this._sidebarOpen })}\" @click=\"${this._closeSidebar}\"></div>\n\n <web-ui-button\n class=\"mobile-toggle\"\n icon\n variant=\"glass\"\n @click=\"${this._toggleSidebar}\"\n aria-label=\"打开导航菜单\"\n >\n <web-ui-icon .icon=${radixIconsPanelLeftMinimized}></web-ui-icon>\n </web-ui-button>\n `\n }\n
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/layout/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\n\nimport glass from '@/assets/glass.css?inline'\nimport '@/components/icon'\nimport '@/components/button'\nimport { radixIconsPanelLeftMinimized } from '@/icons'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-layout')\nexport class WebUiLayout extends LitElement {\n static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n\n @state() private _sidebarOpen = false\n\n private _toggleSidebar() {\n this._sidebarOpen = !this._sidebarOpen\n }\n\n private _closeSidebar() {\n this._sidebarOpen = false\n }\n\n private _onSidebarClick(e: MouseEvent) {\n const target = e.target as HTMLElement\n if (target.closest('a, button, [role=\"button\"]')) {\n this._closeSidebar()\n }\n }\n\n override render() {\n return html`\n <div class=\"layout-grid\">\n <header>\n <slot name=\"header\"></slot>\n </header>\n <main>\n <slot></slot>\n </main>\n <aside class=\"${classMap({ open: this._sidebarOpen })}\" @click=\"${this._onSidebarClick}\">\n <div class=\"menu wui-glass\"><slot name=\"sidebar\"></slot></div>\n </aside>\n <footer>\n <slot name=\"tabbar\"></slot>\n </footer>\n </div>\n\n <div class=\"${classMap({ backdrop: true, open: this._sidebarOpen })}\" @click=\"${this._closeSidebar}\"></div>\n\n <web-ui-button\n class=\"mobile-toggle\"\n icon\n variant=\"glass\"\n @click=\"${this._toggleSidebar}\"\n aria-label=\"打开导航菜单\"\n >\n <web-ui-icon .icon=${radixIconsPanelLeftMinimized}></web-ui-icon>\n </web-ui-button>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'web-ui-layout': WebUiLayout\n }\n}\n"],"mappings":";;;;;;;;;;AAYO,IAAM,IAAN,cAA0B,EAAW;;EAGV,aAAA,KAAA,eAAA;;;EAFP,KAAA,SAAA,CAAC,EAAU,CAAK,GAAG,EAAU,CAAK,CAAC;;CAI5D,iBAAyB;EACvB,KAAK,eAAe,CAAC,KAAK;CAC5B;CAEA,gBAAwB;EACtB,KAAK,eAAe;CACtB;CAEA,gBAAwB,GAAe;EAErC,AADe,EAAE,OACN,QAAQ,8BAA4B,KAC7C,KAAK,cAAc;CAEvB;CAEA,SAAkB;EAChB,OAAO,CAAI;;;;;;;;wBAQS,EAAS,EAAE,MAAM,KAAK,aAAa,CAAC,EAAE,YAAY,KAAK,gBAAgB;;;;;;;;oBAQ3E,EAAS;GAAE,UAAU;GAAM,MAAM,KAAK;EAAa,CAAC,EAAE,YAAY,KAAK,cAAc;;;;;;kBAMvF,KAAK,eAAe;;;6BAGT,EAA6B;;;CAGxD;AACF;AA/CG,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,gBAAA,KAAA,CAAA,GAJR,IAAA,EAAA,CAAA,EAAc,eAAe,CAAA,GAAA,CAAA"}
|
|
@@ -14,17 +14,6 @@ export declare class WebUiOption extends LitElement {
|
|
|
14
14
|
private _onLabelSlotChange;
|
|
15
15
|
private _getSlottedLabel;
|
|
16
16
|
render(): import('lit').TemplateResult<1>;
|
|
17
|
-
readonly $events: {
|
|
18
|
-
'option-register': CustomEvent<{
|
|
19
|
-
value: string;
|
|
20
|
-
label: string;
|
|
21
|
-
disabled: boolean;
|
|
22
|
-
}>;
|
|
23
|
-
'option-unregister': CustomEvent<{
|
|
24
|
-
value: string;
|
|
25
|
-
}>;
|
|
26
|
-
'option-update': CustomEvent<void>;
|
|
27
|
-
};
|
|
28
17
|
}
|
|
29
18
|
declare global {
|
|
30
19
|
interface HTMLElementTagNameMap {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/option/index.ts"],"sourcesContent":["import { html, LitElement, type PropertyValues, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport '@/components/icon'\nimport { heroiconsCheck16Solid } from '@/icons'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-option')\nexport class WebUiOption extends LitElement {\n static override styles = unsafeCSS(style)\n\n @property({ type: String, reflect: true }) value = ''\n @property({ type: String })\n get label(): string {\n return this._label || this._getSlottedLabel()\n }\n set label(value: string) {\n const old = this.label\n this._label = value\n this.requestUpdate('label', old)\n }\n private _label = ''\n private _slottedLabel = ''\n\n @property({ type: Boolean, reflect: true }) disabled = false\n @property({ type: Boolean, reflect: true }) selected = false\n\n override connectedCallback() {\n super.connectedCallback()\n this.dispatchEvent(\n new CustomEvent('option-register', {\n bubbles: true,\n composed: true,\n detail: { value: this.value, label: this.label, disabled: this.disabled }\n })\n )\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback()\n this.dispatchEvent(\n new CustomEvent('option-unregister', {\n bubbles: true,\n composed: true,\n detail: { value: this.value }\n })\n )\n }\n\n override updated(changed: PropertyValues) {\n if (changed.has('value') || changed.has('label') || changed.has('disabled')) {\n this.dispatchEvent(\n new CustomEvent('option-update', {\n bubbles: true,\n composed: true\n })\n )\n }\n }\n\n private _onLabelSlotChange = () => {\n const label = this._getSlottedLabel()\n if (label === this._slottedLabel) return\n\n const old = this._label || this._slottedLabel\n this._slottedLabel = label\n this.requestUpdate('label', old)\n }\n\n private _getSlottedLabel(): string {\n return [...this.childNodes]\n .filter(node => !(node instanceof HTMLElement && node.slot))\n .map(node => node.textContent)\n .join('')\n .trim()\n }\n\n override render() {\n return html`\n <div class=\"option-label\">\n <web-ui-icon class=\"check\" size=\"16\" .icon=${heroiconsCheck16Solid}></web-ui-icon>\n <slot name=\"prefix\"></slot>\n <span class=\"content-wrap\">${this._label || html`<slot @slotchange=${this._onLabelSlotChange}></slot>`}</span>\n <slot name=\"suffix\"></slot>\n </div>\n `\n }\n
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/option/index.ts"],"sourcesContent":["import { html, LitElement, type PropertyValues, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport '@/components/icon'\nimport { heroiconsCheck16Solid } from '@/icons'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-option')\nexport class WebUiOption extends LitElement {\n static override styles = unsafeCSS(style)\n\n @property({ type: String, reflect: true }) value = ''\n @property({ type: String })\n get label(): string {\n return this._label || this._getSlottedLabel()\n }\n set label(value: string) {\n const old = this.label\n this._label = value\n this.requestUpdate('label', old)\n }\n private _label = ''\n private _slottedLabel = ''\n\n @property({ type: Boolean, reflect: true }) disabled = false\n @property({ type: Boolean, reflect: true }) selected = false\n\n override connectedCallback() {\n super.connectedCallback()\n this.dispatchEvent(\n new CustomEvent('option-register', {\n bubbles: true,\n composed: true,\n detail: { value: this.value, label: this.label, disabled: this.disabled }\n })\n )\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback()\n this.dispatchEvent(\n new CustomEvent('option-unregister', {\n bubbles: true,\n composed: true,\n detail: { value: this.value }\n })\n )\n }\n\n override updated(changed: PropertyValues) {\n if (changed.has('value') || changed.has('label') || changed.has('disabled')) {\n this.dispatchEvent(\n new CustomEvent('option-update', {\n bubbles: true,\n composed: true\n })\n )\n }\n }\n\n private _onLabelSlotChange = () => {\n const label = this._getSlottedLabel()\n if (label === this._slottedLabel) return\n\n const old = this._label || this._slottedLabel\n this._slottedLabel = label\n this.requestUpdate('label', old)\n }\n\n private _getSlottedLabel(): string {\n return [...this.childNodes]\n .filter(node => !(node instanceof HTMLElement && node.slot))\n .map(node => node.textContent)\n .join('')\n .trim()\n }\n\n override render() {\n return html`\n <div class=\"option-label\">\n <web-ui-icon class=\"check\" size=\"16\" .icon=${heroiconsCheck16Solid}></web-ui-icon>\n <slot name=\"prefix\"></slot>\n <span class=\"content-wrap\">${this._label || html`<slot @slotchange=${this._onLabelSlotChange}></slot>`}</span>\n <slot name=\"suffix\"></slot>\n </div>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'web-ui-option': WebUiOption\n }\n}\n"],"mappings":";;;;;;;AASO,IAAM,IAAN,cAA0B,EAAW;;EAoDP,aAjDgB,KAAA,QAAA,IAUlC,KAAA,SAAA,IACO,KAAA,gBAAA,IAE+B,KAAA,WAAA,IACA,KAAA,WAAA,IAmCpB,KAAA,2BAAA;GACjC,IAAM,IAAQ,KAAK,iBAAiB;GACpC,IAAI,MAAU,KAAK,eAAe;GAElC,IAAM,IAAM,KAAK,UAAU,KAAK;GAEhC,AADA,KAAK,gBAAgB,GACrB,KAAK,cAAc,SAAS,CAAG;EACjC;;;EA1DyB,KAAA,SAAA,EAAU,CAAK;;CAGxC,IACI,QAAgB;EAClB,OAAO,KAAK,UAAU,KAAK,iBAAiB;CAC9C;CACA,IAAI,MAAM,GAAe;EACvB,IAAM,IAAM,KAAK;EAEjB,AADA,KAAK,SAAS,GACd,KAAK,cAAc,SAAS,CAAG;CACjC;CAOA,oBAA6B;EAE3B,AADA,MAAM,kBAAkB,GACxB,KAAK,cACH,IAAI,YAAY,mBAAmB;GACjC,SAAS;GACT,UAAU;GACV,QAAQ;IAAE,OAAO,KAAK;IAAO,OAAO,KAAK;IAAO,UAAU,KAAK;GAAS;EAC1E,CAAC,CACH;CACF;CAEA,uBAAgC;EAE9B,AADA,MAAM,qBAAqB,GAC3B,KAAK,cACH,IAAI,YAAY,qBAAqB;GACnC,SAAS;GACT,UAAU;GACV,QAAQ,EAAE,OAAO,KAAK,MAAM;EAC9B,CAAC,CACH;CACF;CAEA,QAAiB,GAAyB;EACxC,CAAI,EAAQ,IAAI,OAAO,KAAK,EAAQ,IAAI,OAAO,KAAK,EAAQ,IAAI,UAAU,MACxE,KAAK,cACH,IAAI,YAAY,iBAAiB;GAC/B,SAAS;GACT,UAAU;EACZ,CAAC,CACH;CAEJ;CAWA,mBAAmC;EACjC,OAAO,CAAC,GAAG,KAAK,UAAU,CAAC,CACxB,QAAO,MAAQ,EAAE,aAAgB,eAAe,EAAK,KAAK,CAAC,CAC3D,KAAI,MAAQ,EAAK,WAAW,CAAC,CAC7B,KAAK,EAAE,CAAC,CACR,KAAK;CACV;CAEA,SAAkB;EAChB,OAAO,CAAI;;qDAEsC,EAAsB;;qCAEtC,KAAK,UAAU,CAAI,qBAAqB,KAAK,mBAAmB,UAAU;;;;CAI7G;AACF;AA5EG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GACxC,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,IAAA,GAYzB,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,GAlB3C,IAAA,EAAA,CAAA,EAAc,eAAe,CAAA,GAAA,CAAA"}
|
|
@@ -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:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;height:32px;font-size:var(--wui-font-size,14px);color:var(--wui-color-text,#1b1b1b);text-overflow:ellipsis;white-space:nowrap;transition:color var(--wui-duration-feedback,.1s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1)), background-color var(--wui-duration-feedback,.1s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1));border-radius:2147483647px;align-items:center;gap:8px;padding:0
|
|
2
|
+
var e = "*,:before,:after{box-sizing:border-box}:host{display:block}:host([disabled]){cursor:not-allowed;opacity:.4}.option-label{cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;height:32px;font-size:var(--wui-font-size,14px);color:var(--wui-color-text,#1b1b1b);text-overflow:ellipsis;white-space:nowrap;transition:color var(--wui-duration-feedback,.1s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1)), background-color var(--wui-duration-feedback,.1s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1));border-radius:2147483647px;align-items:center;gap:8px;padding:0 8px;display:flex;overflow:hidden}.check{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:3px solid var(--wui-focus-ring,#08f6);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){.option-label:hover{color:var(--wui-color-on-accent,#fff);background:var(--wui-color-accent,#08f)}}: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: pointer;\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
|
|
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: pointer;\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: 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 transition:\n color var(--wui-duration-feedback, 100ms) var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1)),\n background-color var(--wui-duration-feedback, 100ms) var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n}\n\n.check {\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: 3px solid var(--wui-focus-ring, rgb(0 136 255 / 0.4));\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 .option-label:hover {\n color: var(--wui-color-on-accent, #fff);\n background: var(--wui-color-accent, #08f);\n }\n}\n\n:host([disabled]) .option-label {\n cursor: not-allowed;\n}\n"],"mappings":""}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import e from "../../_virtual/_@oxc-project_runtime@0.140.0/helpers/esm/decorate.js";
|
|
2
2
|
import t from "../../assets/glass.js";
|
|
3
|
-
import
|
|
4
|
-
import {
|
|
5
|
-
import a from "../../
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
3
|
+
import n from "../../assets/overlay-motion.js";
|
|
4
|
+
import { normalizeLiteral as r, normalizeNumber as i } from "../../shared/normalize/index.js";
|
|
5
|
+
import { defineAnchoredPanel as a } from "../../shared/overlay/anchored-panel.js";
|
|
6
|
+
import { defineOverlayPortal as o } from "../../shared/overlay/portal.js";
|
|
7
|
+
import { UserChangeController as s } from "../../shared/events/user-change.js";
|
|
8
8
|
import c from "./style.js";
|
|
9
9
|
import { LitElement as l, html as u, unsafeCSS as d } from "lit";
|
|
10
10
|
import { customElement as f, property as p } from "lit/decorators.js";
|
|
@@ -28,7 +28,7 @@ var m = [
|
|
|
28
28
|
"manual"
|
|
29
29
|
], g = 0, _ = class extends l {
|
|
30
30
|
constructor(...e) {
|
|
31
|
-
super(...e), this.open = !1, this.disabled = !1, this._placement = "bottom", this._offset = 8, this._trigger = "click", this.portal = !1, this._userOpenChange = new
|
|
31
|
+
super(...e), this.open = !1, this.disabled = !1, this._placement = "bottom", this._offset = 8, this._trigger = "click", this.portal = !1, this._userOpenChange = new s(), this._shouldOpenInstantly = !0, this._panelId = `wui-popover-panel-${++g}`, this._panel = a().make({
|
|
32
32
|
getAnchor: () => this.shadowRoot?.querySelector(".popover-trigger") ?? null,
|
|
33
33
|
getLocalPanel: () => this.shadowRoot?.querySelector(".popover-panel") ?? null,
|
|
34
34
|
getPositioning: () => ({
|
|
@@ -67,7 +67,7 @@ var m = [
|
|
|
67
67
|
static {
|
|
68
68
|
this.styles = [
|
|
69
69
|
d(t),
|
|
70
|
-
d(
|
|
70
|
+
d(n),
|
|
71
71
|
d(c)
|
|
72
72
|
];
|
|
73
73
|
}
|
|
@@ -76,21 +76,21 @@ var m = [
|
|
|
76
76
|
}
|
|
77
77
|
set placement(e) {
|
|
78
78
|
let t = this._placement;
|
|
79
|
-
this._placement =
|
|
79
|
+
this._placement = r(e, m, "bottom"), this.requestUpdate("placement", t);
|
|
80
80
|
}
|
|
81
81
|
get offset() {
|
|
82
82
|
return this._offset;
|
|
83
83
|
}
|
|
84
84
|
set offset(e) {
|
|
85
85
|
let t = this._offset;
|
|
86
|
-
this._offset =
|
|
86
|
+
this._offset = i(e, 0, 100, 8), this.requestUpdate("offset", t);
|
|
87
87
|
}
|
|
88
88
|
get trigger() {
|
|
89
89
|
return this._trigger;
|
|
90
90
|
}
|
|
91
91
|
set trigger(e) {
|
|
92
92
|
let t = this._trigger;
|
|
93
|
-
this._trigger =
|
|
93
|
+
this._trigger = r(e, h, "click"), this.requestUpdate("trigger", t);
|
|
94
94
|
}
|
|
95
95
|
get isOpen() {
|
|
96
96
|
return this.open;
|
|
@@ -131,10 +131,10 @@ var m = [
|
|
|
131
131
|
this._panel.open(e);
|
|
132
132
|
}
|
|
133
133
|
_createPortal() {
|
|
134
|
-
let e =
|
|
134
|
+
let e = o().make({
|
|
135
135
|
container: this.overlayContainer,
|
|
136
136
|
target: this,
|
|
137
|
-
style: `${t}\n${
|
|
137
|
+
style: `${t}\n${n}\n${c}`,
|
|
138
138
|
className: "popover-panel portal wui-glass wui-floating-panel"
|
|
139
139
|
});
|
|
140
140
|
return e.panel.id = this._panelId, e.panel.setAttribute("role", "dialog"), e.panel.tabIndex = -1, e.panel.addEventListener("pointerenter", this._onPanelPointerEnter), e.panel.addEventListener("pointerleave", this._onPanelPointerLeave), e.moveContent(Array.from(this.childNodes).filter((e) => !(e instanceof HTMLElement && e.slot === "trigger"))), e;
|
|
@@ -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 { defineAnchoredPanel } from '@/shared/overlay/anchored-panel'\nimport { createOverlayPortal } from '@/shared/overlay/portal'\nimport type { OverlayContainer, OverlayPortal } from '@/shared/overlay/portal'\n\nimport style from './style.css?inline'\n\nconst ALLOWED_PLACEMENTS = [\n 'top',\n 'top-start',\n 'top-end',\n 'bottom',\n 'bottom-start',\n 'bottom-end',\n 'left',\n 'left-start',\n 'left-end',\n 'right',\n 'right-start',\n 'right-end'\n] as const\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, ALLOWED_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 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 })\n\n // 当前是否打开\n get isOpen(): boolean {\n return this.open\n }\n\n override connectedCallback() {\n super.connectedCallback()\n document.addEventListener('click', this._onClickOutside)\n document.addEventListener('keydown', this._onKeydown)\n this.addEventListener('focusout', this._onFocusOut)\n this._syncTriggerListeners()\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback()\n document.removeEventListener('click', this._onClickOutside)\n document.removeEventListener('keydown', this._onKeydown)\n this.removeEventListener('focusout', this._onFocusOut)\n this.removeEventListener('pointerenter', this._onPointerEnter)\n this.removeEventListener('pointerleave', this._onPointerLeave)\n clearTimeout(this._showTimer)\n clearTimeout(this._hideTimer)\n this._panel.dispose()\n }\n\n override firstUpdated() {\n if (this.open) {\n requestAnimationFrame(() => this._openOverlay(this._shouldOpenInstantly))\n this._shouldOpenInstantly = true\n }\n }\n\n protected override updated(changed: Map<string, unknown>) {\n if (changed.has('portal') || changed.has('overlayContainer'))\n requestAnimationFrame(() => 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 requestAnimationFrame(() => this._openOverlay(isInstant))\n if (this._userOpenChange.consume()) this._dispatchChange(true)\n this._focusPanel()\n } else {\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 }\n\n // 打开 popover\n show() {\n if (this.disabled || this.open) return\n this.open = true\n }\n\n // 关闭 popover\n close() {\n if (!this.open) return\n this.open = false\n }\n\n // 切换 popover\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 private _openOverlay(isInstant = false) {\n this._panel.open(isInstant)\n }\n\n private _createPortal(): OverlayPortal {\n const portal = createOverlayPortal({\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 })\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(\n Array.from(this.childNodes).filter(node => !(node instanceof HTMLElement && node.slot === 'trigger'))\n )\n return portal\n }\n\n private async _closeOverlay() {\n await this._panel.close(() => this.open)\n }\n\n private _reconfigureOverlay() {\n this._panel.reconfigure(this.open)\n }\n\n private _dispatchChange(open: boolean) {\n this.dispatchEvent(\n new CustomEvent('open-change', {\n detail: { open },\n bubbles: true,\n composed: true\n })\n )\n }\n\n private _focusPanel() {\n requestAnimationFrame(() => {\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 if (e.target instanceof Node && this.portal && this._panel.getPanel()?.contains(e.target)) 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 requestAnimationFrame(() => {\n if (this.open && !this.matches(':focus-within') && !this._panel.getPanel()?.matches(':focus-within')) {\n this._userOpenChange.mark()\n this.open = false\n }\n })\n }\n\n private _onKeydown = (e: KeyboardEvent) => {\n if (!this.open) return\n if (this.trigger === 'manual') return\n if (e.key === 'Escape') {\n this._userOpenChange.mark()\n this.open = false\n e.preventDefault()\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-glass wui-floating-panel\"\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 { defineAnchoredPanel } from '@/shared/overlay/anchored-panel'\nimport { defineOverlayPortal } from '@/shared/overlay/portal'\nimport type { OverlayContainer, OverlayPortal } from '@/shared/overlay/portal'\n\nimport style from './style.css?inline'\n\nconst ALLOWED_PLACEMENTS = [\n 'top',\n 'top-start',\n 'top-end',\n 'bottom',\n 'bottom-start',\n 'bottom-end',\n 'left',\n 'left-start',\n 'left-end',\n 'right',\n 'right-start',\n 'right-end'\n] as const\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, ALLOWED_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 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 })\n\n // 当前是否打开\n get isOpen(): boolean {\n return this.open\n }\n\n override connectedCallback() {\n super.connectedCallback()\n document.addEventListener('click', this._onClickOutside)\n document.addEventListener('keydown', this._onKeydown)\n this.addEventListener('focusout', this._onFocusOut)\n this._syncTriggerListeners()\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback()\n document.removeEventListener('click', this._onClickOutside)\n document.removeEventListener('keydown', this._onKeydown)\n this.removeEventListener('focusout', this._onFocusOut)\n this.removeEventListener('pointerenter', this._onPointerEnter)\n this.removeEventListener('pointerleave', this._onPointerLeave)\n clearTimeout(this._showTimer)\n clearTimeout(this._hideTimer)\n this._panel.dispose()\n }\n\n override firstUpdated() {\n if (this.open) {\n requestAnimationFrame(() => this._openOverlay(this._shouldOpenInstantly))\n this._shouldOpenInstantly = true\n }\n }\n\n protected override updated(changed: Map<string, unknown>) {\n if (changed.has('portal') || changed.has('overlayContainer'))\n requestAnimationFrame(() => 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 requestAnimationFrame(() => this._openOverlay(isInstant))\n if (this._userOpenChange.consume()) this._dispatchChange(true)\n this._focusPanel()\n } else {\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 }\n\n // 打开 popover\n show() {\n if (this.disabled || this.open) return\n this.open = true\n }\n\n // 关闭 popover\n close() {\n if (!this.open) return\n this.open = false\n }\n\n // 切换 popover\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 private _openOverlay(isInstant = false) {\n this._panel.open(isInstant)\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 })\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(\n Array.from(this.childNodes).filter(node => !(node instanceof HTMLElement && node.slot === 'trigger'))\n )\n return portal\n }\n\n private async _closeOverlay() {\n await this._panel.close(() => this.open)\n }\n\n private _reconfigureOverlay() {\n this._panel.reconfigure(this.open)\n }\n\n private _dispatchChange(open: boolean) {\n this.dispatchEvent(\n new CustomEvent('open-change', {\n detail: { open },\n bubbles: true,\n composed: true\n })\n )\n }\n\n private _focusPanel() {\n requestAnimationFrame(() => {\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 if (e.target instanceof Node && this.portal && this._panel.getPanel()?.contains(e.target)) 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 requestAnimationFrame(() => {\n if (this.open && !this.matches(':focus-within') && !this._panel.getPanel()?.matches(':focus-within')) {\n this._userOpenChange.mark()\n this.open = false\n }\n })\n }\n\n private _onKeydown = (e: KeyboardEvent) => {\n if (!this.open) return\n if (this.trigger === 'manual') return\n if (e.key === 'Escape') {\n this._userOpenChange.mark()\n this.open = false\n e.preventDefault()\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-glass wui-floating-panel\"\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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"}
|
|
@@ -55,13 +55,16 @@ var l = class extends n {
|
|
|
55
55
|
}
|
|
56
56
|
}
|
|
57
57
|
handleClick() {
|
|
58
|
-
this._isDisabled || this._checked
|
|
58
|
+
if (this._isDisabled || this._checked) return;
|
|
59
|
+
this._checked = !0, this._syncFormValue(), this.requestUpdate("checked", !1);
|
|
60
|
+
let e = this._isManagedByGroup ? {
|
|
61
|
+
bubbles: !1,
|
|
62
|
+
composed: !1
|
|
63
|
+
} : {
|
|
59
64
|
bubbles: !0,
|
|
60
65
|
composed: !0
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
composed: !0
|
|
64
|
-
})));
|
|
66
|
+
};
|
|
67
|
+
this.dispatchEvent(new Event("input", e)), this.dispatchEvent(new Event("change", e));
|
|
65
68
|
}
|
|
66
69
|
handleKeyDown(e) {
|
|
67
70
|
(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.handleClick());
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/radio/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 style from './style.css?inline'\n\n@customElement('web-ui-radio')\nexport class WebUiRadio extends LitElement {\n static override styles = unsafeCSS(style)\n static formAssociated = true\n\n // 内部表单关联实例(connectedCallback 中初始化)\n private _internals?: ElementInternals\n @state() private _formDisabled = false\n @state() private _groupDisabled = false\n\n // 内部 checked 状态,通过 getter/setter 暴露为公共 API\n @state() private _checked = false\n\n get checked(): boolean {\n return this._checked\n }\n\n set checked(v: boolean) {\n const old = this._checked\n this._checked = v\n this._syncFormValue()\n this.requestUpdate('checked', old)\n }\n\n @property({ type: String }) value = ''\n @property({ type: String, reflect: true }) name = ''\n @property({ type: Boolean, reflect: true }) disabled = false\n @property({ type: Boolean, reflect: true }) required = false\n\n private get _isDisabled(): boolean {\n return this.disabled || this._formDisabled || this._groupDisabled\n }\n\n private get _isManagedByGroup(): boolean {\n return this.closest('web-ui-radio-group') !== null\n }\n\n setGroupDisabled(disabled: boolean) {\n this._groupDisabled = disabled\n }\n\n override connectedCallback() {\n super.connectedCallback()\n if (this._internals) return\n this._internals = this.attachInternals()\n if (this.hasAttribute('checked')) {\n this._checked = true\n }\n this._syncFormValue()\n }\n\n formResetCallback() {\n this.checked = this.hasAttribute('checked')\n }\n\n formDisabledCallback(disabled: boolean) {\n this._formDisabled = disabled\n }\n\n override updated() {\n this._syncFormValue()\n this._syncValidity()\n }\n\n private _syncFormValue() {\n this._internals?.setFormValue?.(!this._isManagedByGroup && this._checked ? this.value || 'on' : null)\n }\n\n private _syncValidity() {\n if (!this._internals || typeof this._internals.setValidity !== 'function') return\n if (this._isDisabled || this._isManagedByGroup || !this.required || this._checked) {\n this._internals.setValidity({})\n return\n }\n this._internals.setValidity({ valueMissing: true }, '请选择一项')\n }\n\n // 用户点击选中(已选中时不重复触发)\n private handleClick() {\n if (this._isDisabled || this._checked) return\n this._checked = true\n this._syncFormValue()\n this.requestUpdate('checked', false)\n this.
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/radio/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 style from './style.css?inline'\n\n@customElement('web-ui-radio')\nexport class WebUiRadio extends LitElement {\n static override styles = unsafeCSS(style)\n static formAssociated = true\n\n // 内部表单关联实例(connectedCallback 中初始化)\n private _internals?: ElementInternals\n @state() private _formDisabled = false\n @state() private _groupDisabled = false\n\n // 内部 checked 状态,通过 getter/setter 暴露为公共 API\n @state() private _checked = false\n\n get checked(): boolean {\n return this._checked\n }\n\n set checked(v: boolean) {\n const old = this._checked\n this._checked = v\n this._syncFormValue()\n this.requestUpdate('checked', old)\n }\n\n @property({ type: String }) value = ''\n @property({ type: String, reflect: true }) name = ''\n @property({ type: Boolean, reflect: true }) disabled = false\n @property({ type: Boolean, reflect: true }) required = false\n\n private get _isDisabled(): boolean {\n return this.disabled || this._formDisabled || this._groupDisabled\n }\n\n private get _isManagedByGroup(): boolean {\n return this.closest('web-ui-radio-group') !== null\n }\n\n setGroupDisabled(disabled: boolean) {\n this._groupDisabled = disabled\n }\n\n override connectedCallback() {\n super.connectedCallback()\n if (this._internals) return\n this._internals = this.attachInternals()\n if (this.hasAttribute('checked')) {\n this._checked = true\n }\n this._syncFormValue()\n }\n\n formResetCallback() {\n this.checked = this.hasAttribute('checked')\n }\n\n formDisabledCallback(disabled: boolean) {\n this._formDisabled = disabled\n }\n\n override updated() {\n this._syncFormValue()\n this._syncValidity()\n }\n\n private _syncFormValue() {\n this._internals?.setFormValue?.(!this._isManagedByGroup && this._checked ? this.value || 'on' : null)\n }\n\n private _syncValidity() {\n if (!this._internals || typeof this._internals.setValidity !== 'function') return\n if (this._isDisabled || this._isManagedByGroup || !this.required || this._checked) {\n this._internals.setValidity({})\n return\n }\n this._internals.setValidity({ valueMissing: true }, '请选择一项')\n }\n\n // 用户点击选中(已选中时不重复触发)\n private handleClick() {\n if (this._isDisabled || this._checked) return\n this._checked = true\n this._syncFormValue()\n this.requestUpdate('checked', false)\n // group-managed 时事件不冒泡/不组合,由 group 统一派发一次 host 事件\n const opts: EventInit = this._isManagedByGroup\n ? { bubbles: false, composed: false }\n : { bubbles: true, composed: true }\n this.dispatchEvent(new Event('input', opts))\n this.dispatchEvent(new Event('change', opts))\n }\n\n private handleKeyDown(e: KeyboardEvent) {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault()\n this.handleClick()\n }\n }\n\n override render() {\n const cls = {\n 'wui-radio': true,\n 'is-checked': this._checked,\n 'is-disabled': this._isDisabled\n }\n\n return html`\n <label\n class=${classMap(cls)}\n tabindex=${this._isDisabled ? '-1' : '0'}\n role=\"radio\"\n aria-checked=${String(this._checked)}\n aria-disabled=${String(this._isDisabled)}\n @click=${this.handleClick}\n @keydown=${this.handleKeyDown}\n >\n <span class=\"wui-radio-circle\">\n <span class=\"wui-radio-dot\"></span>\n </span>\n <span class=\"wui-radio-label\"><slot></slot></span>\n </label>\n `\n }\n\n declare readonly $events: {\n input: Event\n change: Event\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'web-ui-radio': WebUiRadio\n }\n}\n"],"mappings":"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"}
|
|
@@ -26,10 +26,10 @@ var c = class extends n {
|
|
|
26
26
|
connectedCallback() {
|
|
27
27
|
super.connectedCallback(), this._internals ||= this.attachInternals();
|
|
28
28
|
let e = this.getAttribute("value");
|
|
29
|
-
e !== null && (this.value = e), this._initialValue = this._value, this.addEventListener("change", this._handleChildChange);
|
|
29
|
+
e !== null && (this.value = e), this._initialValue = this._value, this.addEventListener("change", this._handleChildChange, !0);
|
|
30
30
|
}
|
|
31
31
|
disconnectedCallback() {
|
|
32
|
-
super.disconnectedCallback(), this.removeEventListener("change", this._handleChildChange);
|
|
32
|
+
super.disconnectedCallback(), this.removeEventListener("change", this._handleChildChange, !0);
|
|
33
33
|
}
|
|
34
34
|
updated(e) {
|
|
35
35
|
(e.has("value") || e.has("disabled") || e.has("_formDisabled")) && this._syncValueToChildren(), this._syncFormValue(), this._syncValidity();
|