@greypan/web-ui 6.3.1 → 7.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.CN.md +145 -42
- package/README.md +156 -53
- package/dist/_virtual/{_@oxc-project_runtime@0.146.0 → _@oxc-project_runtime@0.149.0}/helpers/esm/decorate.js +1 -1
- package/dist/assets/glass.js +1 -1
- package/dist/assets/glass.js.map +1 -1
- package/dist/assets/menu-portal.js +1 -1
- package/dist/assets/menu-portal.js.map +1 -1
- package/dist/assets/overlay-motion.js +1 -1
- package/dist/assets/overlay-motion.js.map +1 -1
- package/dist/assets/selection-control.js +6 -0
- package/dist/assets/selection-control.js.map +1 -0
- package/dist/assets/toast-containers.js.map +1 -1
- package/dist/components/autocomplete/index.d.ts +2 -0
- package/dist/components/autocomplete/index.js +22 -23
- package/dist/components/autocomplete/index.js.map +1 -1
- package/dist/components/autocomplete/style.js +1 -1
- package/dist/components/autocomplete/style.js.map +1 -1
- package/dist/components/avatar/index.js +1 -1
- package/dist/components/back-top/index.js +1 -1
- package/dist/components/badge/index.js +1 -1
- package/dist/components/badge/style.js.map +1 -1
- package/dist/components/button/index.js +1 -1
- package/dist/components/button/style.js.map +1 -1
- package/dist/components/button-group/index.js +1 -1
- package/dist/components/checkbox/index.d.ts +9 -2
- package/dist/components/checkbox/index.js +52 -28
- package/dist/components/checkbox/index.js.map +1 -1
- package/dist/components/checkbox/style.js +1 -1
- package/dist/components/checkbox/style.js.map +1 -1
- package/dist/components/checkbox-group/index.d.ts +3 -0
- package/dist/components/checkbox-group/index.js +26 -15
- package/dist/components/checkbox-group/index.js.map +1 -1
- package/dist/components/checkbox-group/style.js +1 -1
- package/dist/components/checkbox-group/style.js.map +1 -1
- package/dist/components/collapse/index.js +3 -3
- package/dist/components/collapse/index.js.map +1 -1
- package/dist/components/context-menu/index.d.ts +10 -0
- package/dist/components/context-menu/index.js +53 -39
- package/dist/components/context-menu/index.js.map +1 -1
- package/dist/components/dialog/index.d.ts +6 -0
- package/dist/components/dialog/index.js +46 -21
- package/dist/components/dialog/index.js.map +1 -1
- package/dist/components/dialog/style.js +1 -1
- package/dist/components/dialog/style.js.map +1 -1
- package/dist/components/drawer/index.d.ts +22 -4
- package/dist/components/drawer/index.js +135 -107
- package/dist/components/drawer/index.js.map +1 -1
- package/dist/components/drawer/style.js +1 -1
- package/dist/components/drawer/style.js.map +1 -1
- package/dist/components/dropdown/index.d.ts +21 -1
- package/dist/components/dropdown/index.js +78 -55
- package/dist/components/dropdown/index.js.map +1 -1
- package/dist/components/dropdown-divider/index.js +1 -1
- package/dist/components/dropdown-header/index.js +1 -1
- package/dist/components/dropdown-item/index.js +1 -1
- package/dist/components/empty/index.js +1 -1
- package/dist/components/icon/index.js +1 -1
- package/dist/components/icon/style.js +1 -1
- package/dist/components/icon/style.js.map +1 -1
- package/dist/components/image-preview/index.js +89 -69
- package/dist/components/image-preview/index.js.map +1 -1
- package/dist/components/image-preview/style.js +1 -1
- package/dist/components/image-preview/style.js.map +1 -1
- package/dist/components/index.js +29 -29
- package/dist/components/input/index.js +4 -4
- package/dist/components/input/index.js.map +1 -1
- package/dist/components/input/style.js.map +1 -1
- package/dist/components/input-number/index.js +2 -2
- package/dist/components/input-number/index.js.map +1 -1
- package/dist/components/layout/index.js +3 -3
- package/dist/components/layout/index.js.map +1 -1
- package/dist/components/layout/style.js +1 -1
- package/dist/components/layout/style.js.map +1 -1
- package/dist/components/option/index.js +1 -1
- package/dist/components/popover/index.d.ts +8 -2
- package/dist/components/popover/index.js +48 -53
- package/dist/components/popover/index.js.map +1 -1
- package/dist/components/radio/index.d.ts +1 -1
- package/dist/components/radio/index.js +16 -15
- package/dist/components/radio/index.js.map +1 -1
- package/dist/components/radio/style.js +1 -1
- package/dist/components/radio/style.js.map +1 -1
- package/dist/components/radio-group/index.d.ts +3 -0
- package/dist/components/radio-group/index.js +26 -15
- package/dist/components/radio-group/index.js.map +1 -1
- package/dist/components/radio-group/style.js +1 -1
- package/dist/components/radio-group/style.js.map +1 -1
- package/dist/components/segmented/index.js +1 -1
- package/dist/components/segmented/style.js +1 -1
- package/dist/components/segmented/style.js.map +1 -1
- package/dist/components/segmented-trigger/index.js +1 -1
- package/dist/components/select/index.d.ts +2 -0
- package/dist/components/select/index.js +23 -22
- package/dist/components/select/index.js.map +1 -1
- package/dist/components/select/style.js +1 -1
- package/dist/components/select/style.js.map +1 -1
- package/dist/components/slider/index.js +1 -1
- package/dist/components/slider/index.js.map +1 -1
- package/dist/components/slider/style.js +1 -1
- package/dist/components/slider/style.js.map +1 -1
- package/dist/components/spinner/index.js +2 -2
- package/dist/components/spinner/index.js.map +1 -1
- package/dist/components/spinner/style.js +1 -1
- package/dist/components/spinner/style.js.map +1 -1
- package/dist/components/svg-draw-lines/index.d.ts +13 -2
- package/dist/components/svg-draw-lines/index.js +45 -32
- package/dist/components/svg-draw-lines/index.js.map +1 -1
- package/dist/components/switch/index.js +2 -2
- package/dist/components/switch/index.js.map +1 -1
- package/dist/components/switch/style.js +1 -1
- package/dist/components/switch/style.js.map +1 -1
- package/dist/components/textarea/index.js +5 -5
- package/dist/components/textarea/index.js.map +1 -1
- package/dist/components/textarea/style.js.map +1 -1
- package/dist/components/theme/index.d.ts +17 -0
- package/dist/components/theme/index.js +181 -21
- package/dist/components/theme/index.js.map +1 -1
- package/dist/components/theme/style.js +1 -1
- package/dist/components/theme/style.js.map +1 -1
- package/dist/components/toast/index.d.ts +1 -1
- package/dist/components/toast/manager.d.ts +1 -3
- package/dist/components/toast/manager.js +92 -49
- package/dist/components/toast/manager.js.map +1 -1
- package/dist/components/toast/style.js +1 -1
- package/dist/components/toast/style.js.map +1 -1
- package/dist/components/toast/toast.d.ts +37 -0
- package/dist/components/toast/toast.js +62 -9
- package/dist/components/toast/toast.js.map +1 -1
- package/dist/components/toast/types.d.ts +0 -4
- package/dist/components/tooltip/index.d.ts +6 -1
- package/dist/components/tooltip/index.js +17 -15
- package/dist/components/tooltip/index.js.map +1 -1
- package/dist/shared/form-association/index.js +1 -1
- package/dist/shared/form-association/index.js.map +1 -1
- package/dist/shared/gesture/drag-gesture.js +66 -64
- package/dist/shared/gesture/drag-gesture.js.map +1 -1
- package/dist/shared/gesture/physics.js +7 -29
- package/dist/shared/gesture/physics.js.map +1 -1
- package/dist/shared/menu-behavior/index.js +3 -4
- package/dist/shared/menu-behavior/index.js.map +1 -1
- package/dist/shared/menu-portal/menu-tree.js +1 -1
- package/dist/shared/menu-portal/menu-tree.js.map +1 -1
- package/dist/shared/option-portal/combobox-shell.js +7 -8
- package/dist/shared/option-portal/combobox-shell.js.map +1 -1
- package/dist/shared/overlay/anchored-panel.js +36 -31
- package/dist/shared/overlay/anchored-panel.js.map +1 -1
- package/dist/shared/overlay/native-dialog-presence.js +18 -2
- package/dist/shared/overlay/native-dialog-presence.js.map +1 -1
- package/dist/shared/overlay/nested-drawer-layers.js +7 -4
- package/dist/shared/overlay/nested-drawer-layers.js.map +1 -1
- package/dist/shared/overlay/open-overlay.js +182 -0
- package/dist/shared/overlay/open-overlay.js.map +1 -0
- package/dist/shared/overlay/overlay.js +1 -1
- package/dist/shared/overlay/overlay.js.map +1 -1
- package/dist/shared/overlay/portal.js +1 -1
- package/dist/shared/overlay/portal.js.map +1 -1
- package/dist/shared/overlay/presence.js +19 -22
- package/dist/shared/overlay/presence.js.map +1 -1
- package/dist/shared/theme/duration.js +9 -0
- package/dist/shared/theme/duration.js.map +1 -0
- package/dist/shared/theme/reduced-motion.js +15 -0
- package/dist/shared/theme/reduced-motion.js.map +1 -0
- package/dist/shared/visible-area/index.js +1 -1
- package/dist/shared/visible-area/index.js.map +1 -1
- package/package.json +3 -3
- package/dist/shared/overlay/composition.js +0 -57
- package/dist/shared/overlay/composition.js.map +0 -1
- package/dist/shared/overlay/lifecycle.js +0 -41
- package/dist/shared/overlay/lifecycle.js.map +0 -1
- package/dist/vite.svg +0 -1
|
@@ -364,7 +364,7 @@ declare const WebUiRadio_base: {
|
|
|
364
364
|
formAssociated: boolean;
|
|
365
365
|
} & typeof LitElement;
|
|
366
366
|
export declare class WebUiRadio extends WebUiRadio_base {
|
|
367
|
-
static styles: import('lit').CSSResult;
|
|
367
|
+
static styles: import('lit').CSSResult[];
|
|
368
368
|
private readonly _groupManagement;
|
|
369
369
|
private _checked;
|
|
370
370
|
get checked(): boolean;
|
|
@@ -1,14 +1,15 @@
|
|
|
1
|
-
import e from "../../_virtual/_@oxc-project_runtime@0.
|
|
1
|
+
import e from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
|
|
2
2
|
import { FormAssociated as t, FormAssociationController as n, defineFormAssociation as r } from "../../shared/form-association/index.js";
|
|
3
3
|
import { installPointerFocusSuppression as i } from "../../shared/focus/pointer-focus.js";
|
|
4
4
|
import { defineGroupManaged as a, selectionGroupContextKey as o } from "../../shared/group-management/index.js";
|
|
5
|
-
import s from "
|
|
6
|
-
import
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
5
|
+
import s from "../../assets/selection-control.js";
|
|
6
|
+
import c from "./style.js";
|
|
7
|
+
import { LitElement as l, html as u, unsafeCSS as d } from "lit";
|
|
8
|
+
import { customElement as f, property as p, state as m } from "lit/decorators.js";
|
|
9
|
+
import { classMap as h } from "lit/directives/class-map.js";
|
|
9
10
|
//#region src/components/radio/index.ts
|
|
10
11
|
i();
|
|
11
|
-
var
|
|
12
|
+
var g = class extends t(l) {
|
|
12
13
|
constructor(...e) {
|
|
13
14
|
super(...e), this._groupManagement = a(this, {
|
|
14
15
|
context: o,
|
|
@@ -32,7 +33,7 @@ var h = class extends t(c) {
|
|
|
32
33
|
}).make(), this._formAssociationController = new n(this, this._formAssociation);
|
|
33
34
|
}
|
|
34
35
|
static {
|
|
35
|
-
this.styles =
|
|
36
|
+
this.styles = [d(s), d(c)];
|
|
36
37
|
}
|
|
37
38
|
get checked() {
|
|
38
39
|
return this._checked;
|
|
@@ -49,7 +50,7 @@ var h = class extends t(c) {
|
|
|
49
50
|
}
|
|
50
51
|
_syncValidity() {
|
|
51
52
|
let e = this._formAssociation.getInternals();
|
|
52
|
-
if (
|
|
53
|
+
if (e && typeof e.setValidity == "function") {
|
|
53
54
|
if (this._isDisabled || this._isManagedByGroup || !this.required || this._checked) {
|
|
54
55
|
e.setValidity({});
|
|
55
56
|
return;
|
|
@@ -78,9 +79,9 @@ var h = class extends t(c) {
|
|
|
78
79
|
"is-checked": this._checked,
|
|
79
80
|
"is-disabled": this._isDisabled
|
|
80
81
|
};
|
|
81
|
-
return
|
|
82
|
+
return u`
|
|
82
83
|
<label
|
|
83
|
-
class=${
|
|
84
|
+
class=${h(e)}
|
|
84
85
|
tabindex=${this._isDisabled ? "-1" : "0"}
|
|
85
86
|
role="radio"
|
|
86
87
|
aria-checked=${String(this._checked)}
|
|
@@ -96,17 +97,17 @@ var h = class extends t(c) {
|
|
|
96
97
|
`;
|
|
97
98
|
}
|
|
98
99
|
};
|
|
99
|
-
e([
|
|
100
|
+
e([m()], g.prototype, "_checked", void 0), e([p({ type: String })], g.prototype, "value", void 0), e([p({
|
|
100
101
|
type: String,
|
|
101
102
|
reflect: !0
|
|
102
|
-
})],
|
|
103
|
+
})], g.prototype, "name", void 0), e([p({
|
|
103
104
|
type: Boolean,
|
|
104
105
|
reflect: !0
|
|
105
|
-
})],
|
|
106
|
+
})], g.prototype, "disabled", void 0), e([p({
|
|
106
107
|
type: Boolean,
|
|
107
108
|
reflect: !0
|
|
108
|
-
})],
|
|
109
|
+
})], g.prototype, "required", void 0), g = e([f("web-ui-radio")], g);
|
|
109
110
|
//#endregion
|
|
110
|
-
export {
|
|
111
|
+
export { g as WebUiRadio };
|
|
111
112
|
|
|
112
113
|
//# sourceMappingURL=index.js.map
|
|
@@ -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 { installPointerFocusSuppression } from '@/shared/focus/pointer-focus'\nimport { FormAssociated, defineFormAssociation, FormAssociationController } from '@/shared/form-association'\nimport { defineGroupManaged, selectionGroupContextKey, type SelectionGroupContext } from '@/shared/group-management'\n\nimport style from './style.css?inline'\n\ninstallPointerFocusSuppression()\n\n@customElement('web-ui-radio')\nexport class WebUiRadio extends FormAssociated(LitElement) {\n static override styles = unsafeCSS(style)\n private readonly _groupManagement = defineGroupManaged<SelectionGroupContext>(this, {\n context: selectionGroupContextKey,\n requestUpdate: () => this.requestUpdate()\n }).make()\n\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._formAssociation.sync()\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 (\n this.disabled || this._formAssociation.isFormDisabled() || this._groupManagement.getContext()?.disabled === true\n )\n }\n\n private get _isManagedByGroup(): boolean {\n return this._groupManagement.getContext() !== undefined\n }\n\n private readonly _formAssociation = defineFormAssociation<boolean>({\n host: this,\n initialize: () => {\n if (this.hasAttribute('checked')) this._checked = true\n },\n getState: () => this._checked,\n setState: checked => {\n this.checked = checked\n },\n getFormValue: () => (!this._isManagedByGroup && this._checked ? this.value || 'on' : null),\n getFormState: () => String(this._checked),\n restoreState: state => {\n if (typeof state === 'string') this.checked = state === 'true'\n },\n isStateManaged: () => this._isManagedByGroup,\n syncValidity: () => this._syncValidity()\n }).make()\n\n private readonly _formAssociationController = new FormAssociationController(this, this._formAssociation)\n\n private _syncValidity() {\n const internals = this._formAssociation.getInternals()\n if (!internals || typeof internals.setValidity !== 'function') return\n if (this._isDisabled || this._isManagedByGroup || !this.required || this._checked) {\n internals.setValidity({})\n return\n }\n internals.setValidity({ valueMissing: true }, '请选择一项')\n }\n\n private handleClick() {\n if (this._isDisabled || this._checked) return\n this._checked = true\n this._formAssociation.sync()\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":"
|
|
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 selectionControl from '@/assets/selection-control.css?inline'\nimport { installPointerFocusSuppression } from '@/shared/focus/pointer-focus'\nimport { FormAssociated, defineFormAssociation, FormAssociationController } from '@/shared/form-association'\nimport { defineGroupManaged, selectionGroupContextKey, type SelectionGroupContext } from '@/shared/group-management'\n\nimport style from './style.css?inline'\n\ninstallPointerFocusSuppression()\n\n@customElement('web-ui-radio')\nexport class WebUiRadio extends FormAssociated(LitElement) {\n static override styles = [unsafeCSS(selectionControl), unsafeCSS(style)]\n private readonly _groupManagement = defineGroupManaged<SelectionGroupContext>(this, {\n context: selectionGroupContextKey,\n requestUpdate: () => this.requestUpdate()\n }).make()\n\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._formAssociation.sync()\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 (\n this.disabled || this._formAssociation.isFormDisabled() || this._groupManagement.getContext()?.disabled === true\n )\n }\n\n private get _isManagedByGroup(): boolean {\n return this._groupManagement.getContext() !== undefined\n }\n\n private readonly _formAssociation = defineFormAssociation<boolean>({\n host: this,\n initialize: () => {\n if (this.hasAttribute('checked')) this._checked = true\n },\n getState: () => this._checked,\n setState: checked => {\n this.checked = checked\n },\n getFormValue: () => (!this._isManagedByGroup && this._checked ? this.value || 'on' : null),\n getFormState: () => String(this._checked),\n restoreState: state => {\n if (typeof state === 'string') this.checked = state === 'true'\n },\n isStateManaged: () => this._isManagedByGroup,\n syncValidity: () => this._syncValidity()\n }).make()\n\n private readonly _formAssociationController = new FormAssociationController(this, this._formAssociation)\n\n private _syncValidity() {\n const internals = this._formAssociation.getInternals()\n if (!internals || typeof internals.setValidity !== 'function') return\n if (this._isDisabled || this._isManagedByGroup || !this.required || this._checked) {\n internals.setValidity({})\n return\n }\n internals.setValidity({ valueMissing: true }, '请选择一项')\n }\n\n private handleClick() {\n if (this._isDisabled || this._checked) return\n this._checked = true\n this._formAssociation.sync()\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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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
//#region src/components/radio/style.css?inline
|
|
2
|
-
var e = "
|
|
2
|
+
var e = ".wui-radio-circle{border-radius:var(--wui-radius-control,calc(infinity * 1px))}.is-checked .wui-radio-circle{background-color:var(--wui-color-accent,#08f)}.wui-radio-dot{border-radius:var(--wui-radius-control,calc(infinity * 1px));opacity:0;background-color:var(--wui-color-on-control,#fff);width:6px;height:6px;transition:opacity var(--wui-duration-trigger,.16s) ease, transform var(--wui-duration-trigger,.16s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1));transform:scale(0);box-shadow:inset 0 -1px 2px #0000001f,inset 0 1px 2px #ffffff80,0 0 4px #0088ff4d}.is-checked .wui-radio-dot{opacity:1;transform:scale(1)}@media (prefers-reduced-motion:reduce){.wui-radio-dot,.is-checked .wui-radio-dot{transform:none}}";
|
|
3
3
|
//#endregion
|
|
4
4
|
export { e as default };
|
|
5
5
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/radio/style.css?inline"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/radio/style.css?inline"],"sourcesContent":[".wui-radio-circle {\n border-radius: var(--wui-radius-control, calc(infinity * 1px));\n}\n\n.is-checked .wui-radio-circle {\n background-color: var(--wui-color-accent, #08f);\n}\n\n.wui-radio-dot {\n transform: scale(0);\n\n width: 6px;\n height: 6px;\n border-radius: var(--wui-radius-control, calc(infinity * 1px));\n\n opacity: 0;\n background-color: var(--wui-color-on-control, #fff);\n box-shadow:\n inset 0 -1px 2px rgb(0 0 0 / 0.12),\n inset 0 1px 2px rgb(255 255 255 / 0.5),\n 0 0 4px rgb(0 136 255 / 0.3);\n\n transition:\n opacity var(--wui-duration-trigger, 160ms) ease,\n transform var(--wui-duration-trigger, 160ms) var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n}\n\n.is-checked .wui-radio-dot {\n transform: scale(1);\n opacity: 1;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .wui-radio-dot,\n .is-checked .wui-radio-dot {\n transform: none;\n }\n}\n"],"mappings":""}
|
|
@@ -368,6 +368,9 @@ export declare class WebUiRadioGroup extends WebUiRadioGroup_base {
|
|
|
368
368
|
name: string;
|
|
369
369
|
disabled: boolean;
|
|
370
370
|
required: boolean;
|
|
371
|
+
get direction(): 'horizontal' | 'vertical';
|
|
372
|
+
set direction(v: string);
|
|
373
|
+
private _direction;
|
|
371
374
|
private _value;
|
|
372
375
|
private readonly _groupController;
|
|
373
376
|
get value(): string;
|
|
@@ -1,13 +1,14 @@
|
|
|
1
|
-
import e from "../../_virtual/_@oxc-project_runtime@0.
|
|
1
|
+
import e from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
|
|
2
2
|
import { FormAssociated as t, FormAssociationController as n, defineFormAssociation as r } from "../../shared/form-association/index.js";
|
|
3
|
-
import {
|
|
4
|
-
import o from "
|
|
5
|
-
import
|
|
6
|
-
import {
|
|
3
|
+
import { normalizeLiteral as i } from "../../shared/normalize/index.js";
|
|
4
|
+
import { GroupController as a, defineGroupCoordinator as o } from "../../shared/group-management/index.js";
|
|
5
|
+
import s from "./style.js";
|
|
6
|
+
import { LitElement as c, html as l, unsafeCSS as u } from "lit";
|
|
7
|
+
import { customElement as d, property as f, state as p } from "lit/decorators.js";
|
|
7
8
|
//#region src/components/radio-group/index.ts
|
|
8
|
-
var
|
|
9
|
+
var m = ["horizontal", "vertical"], h = class extends t(c) {
|
|
9
10
|
constructor(...e) {
|
|
10
|
-
super(...e), this.name = "", this.disabled = !1, this.required = !1, this._value = "", this._groupController = new
|
|
11
|
+
super(...e), this.name = "", this.disabled = !1, this.required = !1, this._direction = "vertical", this._value = "", this._groupController = new a(this, o({
|
|
11
12
|
host: this,
|
|
12
13
|
getItems: () => [...this.querySelectorAll("web-ui-radio")],
|
|
13
14
|
getValue: () => this._value,
|
|
@@ -51,7 +52,14 @@ var p = class extends t(s) {
|
|
|
51
52
|
}).make(), this._formAssociationController = new n(this, this._formAssociation);
|
|
52
53
|
}
|
|
53
54
|
static {
|
|
54
|
-
this.styles =
|
|
55
|
+
this.styles = u(s);
|
|
56
|
+
}
|
|
57
|
+
get direction() {
|
|
58
|
+
return this._direction;
|
|
59
|
+
}
|
|
60
|
+
set direction(e) {
|
|
61
|
+
let t = this._direction;
|
|
62
|
+
this._direction = i(e, m, "vertical"), this.requestUpdate("direction", t);
|
|
55
63
|
}
|
|
56
64
|
get value() {
|
|
57
65
|
return this._value;
|
|
@@ -68,7 +76,7 @@ var p = class extends t(s) {
|
|
|
68
76
|
}
|
|
69
77
|
_syncValidity() {
|
|
70
78
|
let e = this._formAssociation.getInternals();
|
|
71
|
-
if (
|
|
79
|
+
if (e && typeof e.setValidity == "function") {
|
|
72
80
|
if (this._isDisabled || !this.required || this._value) {
|
|
73
81
|
e.setValidity({});
|
|
74
82
|
return;
|
|
@@ -77,20 +85,23 @@ var p = class extends t(s) {
|
|
|
77
85
|
}
|
|
78
86
|
}
|
|
79
87
|
render() {
|
|
80
|
-
return
|
|
88
|
+
return l`<div class="wui-radio-group"><slot></slot></div>`;
|
|
81
89
|
}
|
|
82
90
|
};
|
|
83
|
-
e([
|
|
91
|
+
e([f({
|
|
84
92
|
type: String,
|
|
85
93
|
reflect: !0
|
|
86
|
-
})],
|
|
94
|
+
})], h.prototype, "name", void 0), e([f({
|
|
87
95
|
type: Boolean,
|
|
88
96
|
reflect: !0
|
|
89
|
-
})],
|
|
97
|
+
})], h.prototype, "disabled", void 0), e([f({
|
|
90
98
|
type: Boolean,
|
|
91
99
|
reflect: !0
|
|
92
|
-
})],
|
|
100
|
+
})], h.prototype, "required", void 0), e([f({
|
|
101
|
+
type: String,
|
|
102
|
+
reflect: !0
|
|
103
|
+
})], h.prototype, "direction", null), e([p()], h.prototype, "_value", void 0), h = e([d("web-ui-radio-group")], h);
|
|
93
104
|
//#endregion
|
|
94
|
-
export {
|
|
105
|
+
export { h as WebUiRadioGroup };
|
|
95
106
|
|
|
96
107
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/radio-group/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { FormAssociated, defineFormAssociation, FormAssociationController } from '@/shared/form-association'\nimport { defineGroupCoordinator, GroupController } from '@/shared/group-management'\n\nimport type { WebUiRadio } from '../radio'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-radio-group')\nexport class WebUiRadioGroup extends FormAssociated(LitElement) {\n static override styles = unsafeCSS(style)\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 @state() private _value = ''\n\n private readonly _groupController = new GroupController(\n this,\n defineGroupCoordinator<WebUiRadio, string>({\n host: this,\n getItems: () => [...this.querySelectorAll<WebUiRadio>('web-ui-radio')],\n getValue: () => this._value,\n setValue: value => {\n this.value = value\n },\n getDisabled: () => this._isDisabled,\n isItem: (target): target is WebUiRadio => target instanceof HTMLElement && target.matches('web-ui-radio'),\n isItemSelected: (radio, value) => radio.value === value,\n getNextValue: (radio, value) => (radio.checked ? radio.value : value),\n valuesEqual: (a, b) => a === b,\n copyValue: value => value,\n setItemSelected: (radio, selected) => {\n radio.checked = selected\n },\n dispatchValueChange: () => {\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }))\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n }\n }).make()\n )\n\n get value(): string {\n return this._value\n }\n\n set value(v: string) {\n const old = this._value\n this._value = v\n this._formAssociation.sync()\n this.requestUpdate('value', old)\n }\n\n private get _isDisabled(): boolean {\n return this.disabled || this._formAssociation.isFormDisabled()\n }\n\n private readonly _formAssociation = defineFormAssociation<string>({\n host: this,\n initialize: () => {\n const attributeValue = this.getAttribute('value')\n if (attributeValue !== null) this.value = attributeValue\n },\n getState: () => this._value,\n setState: value => {\n this.value = value\n },\n getFormValue: () => (this.name && this._value ? this._value : null),\n getFormState: () => this._value,\n restoreState: state => {\n if (typeof state === 'string') this.value = state\n },\n syncValidity: () => this._syncValidity()\n }).make()\n\n private readonly _formAssociationController = new FormAssociationController(this, this._formAssociation)\n\n override formDisabledCallback(disabled: boolean) {\n this._formAssociation.setDisabled(disabled)\n this._groupController.sync()\n }\n\n private _syncValidity() {\n const internals = this._formAssociation.getInternals()\n if (!internals || typeof internals.setValidity !== 'function') return\n if (this._isDisabled || !this.required || this._value) {\n internals.setValidity({})\n return\n }\n internals.setValidity({ valueMissing: true }, '请选择一项')\n }\n\n override render() {\n return html`<div class=\"wui-radio-group\"><slot></slot></div>`\n }\n\n declare readonly $events: {\n input: Event\n change: Event\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'web-ui-radio-group': WebUiRadioGroup\n }\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/radio-group/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { FormAssociated, defineFormAssociation, FormAssociationController } from '@/shared/form-association'\nimport { defineGroupCoordinator, GroupController } from '@/shared/group-management'\nimport { normalizeLiteral } from '@/shared/normalize'\n\nimport type { WebUiRadio } from '../radio'\n\nimport style from './style.css?inline'\n\nconst ALLOWED_DIRECTIONS = ['horizontal', 'vertical'] as const\n\n@customElement('web-ui-radio-group')\nexport class WebUiRadioGroup extends FormAssociated(LitElement) {\n static override styles = unsafeCSS(style)\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 @property({ type: String, reflect: true })\n get direction(): 'horizontal' | 'vertical' {\n return this._direction\n }\n set direction(v: string) {\n const old = this._direction\n this._direction = normalizeLiteral(v, ALLOWED_DIRECTIONS, 'vertical')\n this.requestUpdate('direction', old)\n }\n private _direction: 'horizontal' | 'vertical' = 'vertical'\n\n @state() private _value = ''\n\n private readonly _groupController = new GroupController(\n this,\n defineGroupCoordinator<WebUiRadio, string>({\n host: this,\n getItems: () => [...this.querySelectorAll<WebUiRadio>('web-ui-radio')],\n getValue: () => this._value,\n setValue: value => {\n this.value = value\n },\n getDisabled: () => this._isDisabled,\n isItem: (target): target is WebUiRadio => target instanceof HTMLElement && target.matches('web-ui-radio'),\n isItemSelected: (radio, value) => radio.value === value,\n getNextValue: (radio, value) => (radio.checked ? radio.value : value),\n valuesEqual: (a, b) => a === b,\n copyValue: value => value,\n setItemSelected: (radio, selected) => {\n radio.checked = selected\n },\n dispatchValueChange: () => {\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }))\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n }\n }).make()\n )\n\n get value(): string {\n return this._value\n }\n\n set value(v: string) {\n const old = this._value\n this._value = v\n this._formAssociation.sync()\n this.requestUpdate('value', old)\n }\n\n private get _isDisabled(): boolean {\n return this.disabled || this._formAssociation.isFormDisabled()\n }\n\n private readonly _formAssociation = defineFormAssociation<string>({\n host: this,\n initialize: () => {\n const attributeValue = this.getAttribute('value')\n if (attributeValue !== null) this.value = attributeValue\n },\n getState: () => this._value,\n setState: value => {\n this.value = value\n },\n getFormValue: () => (this.name && this._value ? this._value : null),\n getFormState: () => this._value,\n restoreState: state => {\n if (typeof state === 'string') this.value = state\n },\n syncValidity: () => this._syncValidity()\n }).make()\n\n private readonly _formAssociationController = new FormAssociationController(this, this._formAssociation)\n\n override formDisabledCallback(disabled: boolean) {\n this._formAssociation.setDisabled(disabled)\n this._groupController.sync()\n }\n\n private _syncValidity() {\n const internals = this._formAssociation.getInternals()\n if (!internals || typeof internals.setValidity !== 'function') return\n if (this._isDisabled || !this.required || this._value) {\n internals.setValidity({})\n return\n }\n internals.setValidity({ valueMissing: true }, '请选择一项')\n }\n\n override render() {\n return html`<div class=\"wui-radio-group\"><slot></slot></div>`\n }\n\n declare readonly $events: {\n input: Event\n change: Event\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'web-ui-radio-group': WebUiRadioGroup\n }\n}\n"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
//#region src/components/radio-group/style.css?inline
|
|
2
|
-
var e = "*,:before,:after{box-sizing:border-box}:host{-webkit-user-select:none;user-select:none;flex-direction:column;
|
|
2
|
+
var e = "*,:before,:after{box-sizing:border-box}:host{-webkit-user-select:none;user-select:none;gap:var(--wui-radio-group-gap,8px);flex-direction:column;display:inline-flex}.wui-radio-group{flex-direction:inherit;gap:inherit;display:flex}:host([direction=horizontal]){flex-direction:row}";
|
|
3
3
|
//#endregion
|
|
4
4
|
export { e as default };
|
|
5
5
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/radio-group/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n user-select: none;\n display: inline-flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.wui-radio-group {\n display: flex;\n flex-direction:
|
|
1
|
+
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/radio-group/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n user-select: none;\n display: inline-flex;\n flex-direction: column;\n gap: var(--wui-radio-group-gap, 8px);\n}\n\n.wui-radio-group {\n display: flex;\n flex-direction: inherit;\n gap: inherit;\n}\n\n:host([direction='horizontal']) {\n flex-direction: row;\n}\n"],"mappings":""}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import e from "../../_virtual/_@oxc-project_runtime@0.
|
|
1
|
+
import e from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
|
|
2
2
|
import { FormAssociated as t, FormAssociationController as n, defineFormAssociation as r } from "../../shared/form-association/index.js";
|
|
3
3
|
import { installPointerFocusSuppression as i } from "../../shared/focus/pointer-focus.js";
|
|
4
4
|
import { GroupController as a, defineGroupCoordinator as o } from "../../shared/group-management/index.js";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
//#region src/components/segmented/style.css?inline
|
|
2
|
-
var e = "*,:before,:after{box-sizing:border-box}:host{touch-action:none;-webkit-user-select:none;user-select:none;display:inline-block}.wui-segmented{touch-action:none;cursor:default;border-radius:var(--wui-radius-control,calc(infinity * 1px));background-color:var(--wui-color-surface-segmented,#e5e5ea);align-items:stretch;padding:4px;display:inline-flex;position:relative}.wui-segmented.is-disabled{cursor:not-allowed;opacity:.4}.wui-segmented.is-disabled .wui-segmented-trigger.is-disabled{opacity:1}.wui-segmented-indicator{z-index:0;top:4px;bottom:4px;left:var(--indicator-left,0);transform-origin:50%;width:var(--indicator-width,0);border-radius:var(--wui-radius-control,calc(infinity * 1px));background-color:var(--wui-color-surface-selected,#fff);transition:transform var(--wui-duration-press,80ms) cubic-bezier(.4, 0, .2, 1), background-color var(--wui-duration-press,80ms) ease, box-shadow var(--wui-duration-press,80ms) ease;display:block;position:absolute;transform:scale(1);box-shadow:0 1px 3px #0000001f,0 1px 2px #00000014}.is-indicator-ready:not(.is-dragging) .wui-segmented-indicator{transition:left var(--wui-duration-trigger,.16s) var(--wui-ease-slide,cubic-bezier(.77, 0, .175, 1)), width var(--wui-duration-trigger,.16s) var(--wui-ease-slide,cubic-bezier(.77, 0, .175, 1)), transform var(--wui-duration-press,80ms) cubic-bezier(.4, 0, .2, 1), background-color var(--wui-duration-press,80ms) ease, box-shadow var(--wui-duration-press,80ms) ease}.wui-segmented.is-pressed .wui-segmented-indicator,.wui-segmented.is-dragging .wui-segmented-indicator{
|
|
2
|
+
var e = "*,:before,:after{box-sizing:border-box}:host{touch-action:none;-webkit-user-select:none;user-select:none;display:inline-block}.wui-segmented{touch-action:none;cursor:default;border-radius:var(--wui-radius-control,calc(infinity * 1px));background-color:var(--wui-color-surface-segmented,#e5e5ea);align-items:stretch;padding:4px;display:inline-flex;position:relative}.wui-segmented.is-disabled{cursor:not-allowed;opacity:.4}.wui-segmented.is-disabled .wui-segmented-trigger.is-disabled{opacity:1}.wui-segmented-indicator{z-index:0;top:4px;bottom:4px;left:var(--indicator-left,0);transform-origin:50%;width:var(--indicator-width,0);border-radius:var(--wui-radius-control,calc(infinity * 1px));background-color:var(--wui-color-surface-selected,#fff);transition:transform var(--wui-duration-press,80ms) cubic-bezier(.4, 0, .2, 1), background-color var(--wui-duration-press,80ms) ease, box-shadow var(--wui-duration-press,80ms) ease;display:block;position:absolute;transform:scale(1);box-shadow:0 1px 3px #0000001f,0 1px 2px #00000014}.is-indicator-ready:not(.is-dragging) .wui-segmented-indicator{transition:left var(--wui-duration-trigger,.16s) var(--wui-ease-slide,cubic-bezier(.77, 0, .175, 1)), width var(--wui-duration-trigger,.16s) var(--wui-ease-slide,cubic-bezier(.77, 0, .175, 1)), transform var(--wui-duration-press,80ms) cubic-bezier(.4, 0, .2, 1), background-color var(--wui-duration-press,80ms) ease, box-shadow var(--wui-duration-press,80ms) ease}.wui-segmented.is-pressed .wui-segmented-indicator,.wui-segmented.is-dragging .wui-segmented-indicator{-webkit-backdrop-filter:blur(4px)saturate(160%);backdrop-filter:blur(4px)saturate(160%);box-shadow:inset 0 0 0 .5px color-mix(in srgb, var(--wui-color-glass-highlight,#ffffffe6) 38%, transparent), inset 0 1px .5px color-mix(in srgb, var(--wui-color-glass-highlight,#ffffffe6) 52%, transparent), inset 0 -.5px 1px #00000008, 0 2px 20px #0003;background-color:#0000;transform:scale(1.5)}.wui-segmented.is-dragging:not(.is-disabled){--wui-internal-segmented-trigger-cursor:grabbing;cursor:grabbing}";
|
|
3
3
|
//#endregion
|
|
4
4
|
export { e as default };
|
|
5
5
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/segmented/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n touch-action: none;\n user-select: none;\n display: inline-block;\n}\n\n.wui-segmented {\n touch-action: none;\n cursor: default;\n\n position: relative;\n\n display: inline-flex;\n align-items: stretch;\n\n padding: 4px;\n border-radius: var(--wui-radius-control, calc(infinity * 1px));\n\n background-color: var(--wui-color-surface-segmented, #e5e5ea);\n\n &.is-disabled {\n cursor: not-allowed;\n opacity: 0.4;\n }\n\n &.is-disabled .wui-segmented-trigger.is-disabled {\n opacity: 1;\n }\n}\n\n.wui-segmented-indicator {\n position: absolute;\n z-index: 0;\n top: 4px;\n bottom: 4px;\n left: var(--indicator-left, 0);\n transform-origin: center center;\n transform: scale(1);\n\n display: block;\n\n width: var(--indicator-width, 0);\n border-radius: var(--wui-radius-control, calc(infinity * 1px));\n\n /*
|
|
1
|
+
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/segmented/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n touch-action: none;\n user-select: none;\n display: inline-block;\n}\n\n.wui-segmented {\n touch-action: none;\n cursor: default;\n\n position: relative;\n\n display: inline-flex;\n align-items: stretch;\n\n padding: 4px;\n border-radius: var(--wui-radius-control, calc(infinity * 1px));\n\n background-color: var(--wui-color-surface-segmented, #e5e5ea);\n\n &.is-disabled {\n cursor: not-allowed;\n opacity: 0.4;\n }\n\n &.is-disabled .wui-segmented-trigger.is-disabled {\n opacity: 1;\n }\n}\n\n.wui-segmented-indicator {\n position: absolute;\n z-index: 0;\n top: 4px;\n bottom: 4px;\n left: var(--indicator-left, 0);\n transform-origin: center center;\n transform: scale(1);\n\n display: block;\n\n width: var(--indicator-width, 0);\n border-radius: var(--wui-radius-control, calc(infinity * 1px));\n\n /* 静止态实体白指示器;按压/拖拽时切换为玻璃(无填充 + backdrop blur +\n 描边)并放大 1.5x,回到最初修复不跟手问题时期的视觉结构。 */\n background-color: var(--wui-color-surface-selected, #fff);\n box-shadow:\n 0 1px 3px rgb(0 0 0 / 0.12),\n 0 1px 2px rgb(0 0 0 / 0.08);\n\n transition:\n transform var(--wui-duration-press, 80ms) cubic-bezier(0.4, 0, 0.2, 1),\n background-color var(--wui-duration-press, 80ms) ease,\n box-shadow var(--wui-duration-press, 80ms) ease;\n\n /* transition 只在首帧定位后且非拖拽状态启用,避免组件进入视口时触发初始化动画或拖拽跟手产生延迟 */\n .is-indicator-ready:not(.is-dragging) & {\n transition:\n left var(--wui-duration-trigger, 160ms) var(--wui-ease-slide, cubic-bezier(0.77, 0, 0.175, 1)),\n width var(--wui-duration-trigger, 160ms) var(--wui-ease-slide, cubic-bezier(0.77, 0, 0.175, 1)),\n transform var(--wui-duration-press, 80ms) cubic-bezier(0.4, 0, 0.2, 1),\n background-color var(--wui-duration-press, 80ms) ease,\n box-shadow var(--wui-duration-press, 80ms) ease;\n }\n}\n\n.wui-segmented.is-pressed .wui-segmented-indicator,\n.wui-segmented.is-dragging .wui-segmented-indicator {\n transform: scale(1.5);\n background-color: transparent;\n backdrop-filter: blur(4px) saturate(160%);\n box-shadow:\n inset 0 0 0 0.5px color-mix(in srgb, var(--wui-color-glass-highlight, rgb(255 255 255 / 0.9)) 38%, transparent),\n inset 0 1px 0.5px color-mix(in srgb, var(--wui-color-glass-highlight, rgb(255 255 255 / 0.9)) 52%, transparent),\n inset 0 -0.5px 1px rgb(0 0 0 / 0.03),\n 0 2px 20px rgb(0 0 0 / 0.2);\n}\n\n.wui-segmented.is-dragging:not(.is-disabled) {\n --wui-internal-segmented-trigger-cursor: grabbing;\n cursor: grabbing;\n}\n"],"mappings":""}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import e from "../../_virtual/_@oxc-project_runtime@0.
|
|
1
|
+
import e from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
|
|
2
2
|
import { installPointerFocusSuppression as t } from "../../shared/focus/pointer-focus.js";
|
|
3
3
|
import { defineGroupManaged as n, selectionGroupContextKey as r } from "../../shared/group-management/index.js";
|
|
4
4
|
import i from "./style.js";
|
|
@@ -389,6 +389,7 @@ export declare class WebUiSelect extends WebUiSelect_base {
|
|
|
389
389
|
private readonly _scrollLock;
|
|
390
390
|
private static _nextInstanceId;
|
|
391
391
|
private readonly _optionPortal;
|
|
392
|
+
private readonly _overlay;
|
|
392
393
|
private readonly _panel;
|
|
393
394
|
get isOpen(): boolean;
|
|
394
395
|
get open(): boolean;
|
|
@@ -401,6 +402,7 @@ export declare class WebUiSelect extends WebUiSelect_base {
|
|
|
401
402
|
updated(changed: PropertyValues): void;
|
|
402
403
|
private _syncValidity;
|
|
403
404
|
private _syncOpenAttribute;
|
|
405
|
+
private _syncOverlayInert;
|
|
404
406
|
private _onTriggerSlotChange;
|
|
405
407
|
private _syncSelected;
|
|
406
408
|
private readonly _optionListeners;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import e from "../../_virtual/_@oxc-project_runtime@0.
|
|
1
|
+
import e from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
|
|
2
2
|
import "../icon/index.js";
|
|
3
3
|
import t from "../../icons/generated/lucide-chevron-down.js";
|
|
4
4
|
import "../option/index.js";
|
|
@@ -6,10 +6,10 @@ import n from "../../assets/glass.js";
|
|
|
6
6
|
import r from "../../assets/overlay-motion.js";
|
|
7
7
|
import { FormAssociated as i, FormAssociationController as a, defineFormAssociation as o } from "../../shared/form-association/index.js";
|
|
8
8
|
import { dispatchOpenChangeEvent as s } from "../../shared/open-state/index.js";
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
9
|
+
import { createComboboxOpenController as c, createOptionListenerBinding as l, handleComboboxFocusOut as u, nextWrappingIndex as d } from "../../shared/option-portal/combobox-shell.js";
|
|
10
|
+
import { defineOptionPortal as f } from "../../shared/option-portal/index.js";
|
|
11
|
+
import { defineAnchoredPanel as p } from "../../shared/overlay/anchored-panel.js";
|
|
12
|
+
import { defineOpenOverlay as m } from "../../shared/overlay/open-overlay.js";
|
|
13
13
|
import { applyOverlayVariables as h, defineOverlayPortal as g } from "../../shared/overlay/portal.js";
|
|
14
14
|
import { defineScrollLockLease as _ } from "../../shared/scroll-lock/scroll-lock.js";
|
|
15
15
|
import { installPointerFocusSuppression as v } from "../../shared/focus/pointer-focus.js";
|
|
@@ -40,7 +40,7 @@ var O = class extends i(b) {
|
|
|
40
40
|
typeof e == "string" && (this.value = e);
|
|
41
41
|
},
|
|
42
42
|
syncValidity: () => this._syncValidity()
|
|
43
|
-
}).make(), this._formAssociationController = new a(this, this._formAssociation), this._isOpen = !1, this._activeIndex = -1, this._selectedLabel = "", this._hasTriggerSlot = !1, this._options = [], this._scrollLock = _().make(), this._optionPortal =
|
|
43
|
+
}).make(), this._formAssociationController = new a(this, this._formAssociation), this._isOpen = !1, this._activeIndex = -1, this._selectedLabel = "", this._hasTriggerSlot = !1, this._options = [], this._scrollLock = _().make(), this._optionPortal = f().make({
|
|
44
44
|
element: this,
|
|
45
45
|
idPrefix: `web-ui-select-${++D._nextInstanceId}`,
|
|
46
46
|
getPortal: () => this._portal,
|
|
@@ -54,7 +54,7 @@ var O = class extends i(b) {
|
|
|
54
54
|
onImmediateSync: () => {
|
|
55
55
|
this._refreshOptions(), this._syncSelected(), this._syncActiveOption();
|
|
56
56
|
}
|
|
57
|
-
}), this.
|
|
57
|
+
}), this._overlay = m().make({ requestClose: () => this._close() }), this._panel = p().make({
|
|
58
58
|
getAnchor: () => this.shadowRoot?.querySelector(".select-trigger") ?? null,
|
|
59
59
|
getLocalPanel: () => this.shadowRoot?.querySelector(".select-overlay") ?? null,
|
|
60
60
|
getPositioning: () => ({
|
|
@@ -64,16 +64,17 @@ var O = class extends i(b) {
|
|
|
64
64
|
strategy: this.portal ? "fixed" : "absolute"
|
|
65
65
|
}),
|
|
66
66
|
isPortal: () => this.portal,
|
|
67
|
-
createPortal: () => this._createPortal()
|
|
67
|
+
createPortal: () => this._createPortal(),
|
|
68
|
+
openOverlay: this._overlay
|
|
68
69
|
}), this._onClickOutside = (e) => {
|
|
69
|
-
let t =
|
|
70
|
-
this._isOpen && !
|
|
70
|
+
let t = e.composedPath().includes(this) || !!this._panel.getHandle()?.containsEvent(e);
|
|
71
|
+
this._isOpen && !t && this._close();
|
|
71
72
|
}, this._onFocusOut = () => {
|
|
72
|
-
|
|
73
|
+
u(this, () => this._panel.getHandle(), () => this._isOpen, () => this._close());
|
|
73
74
|
}, this._onTriggerSlotChange = (e) => {
|
|
74
75
|
let t = e.target.assignedElements().length > 0;
|
|
75
76
|
this._hasTriggerSlot !== t && (this._hasTriggerSlot = t, this._reconfigureOverlay());
|
|
76
|
-
}, this._optionListeners =
|
|
77
|
+
}, this._optionListeners = l({
|
|
77
78
|
onClick: (e) => this._handleOptionClick(e),
|
|
78
79
|
onPointerOver: (e) => this._handleOptionPointerOver(e),
|
|
79
80
|
onPointerDown: (e) => this._handleOptionPointerDown(e),
|
|
@@ -81,7 +82,7 @@ var O = class extends i(b) {
|
|
|
81
82
|
}), this._bindOption = (e) => this._optionListeners.bind(e), this._unbindOption = (e) => this._optionListeners.unbind(e), this._handleOptionClick = (e) => {
|
|
82
83
|
if (!(e.currentTarget instanceof HTMLElement)) return;
|
|
83
84
|
let t = e.currentTarget;
|
|
84
|
-
t.disabled
|
|
85
|
+
!t.disabled && this._isLive(t) && (this.value = t.value, this._close(), this._notifyValueChange());
|
|
85
86
|
}, this._onOptionUpdate = () => {
|
|
86
87
|
this._syncSelected(), this._syncActiveOption();
|
|
87
88
|
}, this._handleOptionPointerOver = (e) => {
|
|
@@ -92,9 +93,6 @@ var O = class extends i(b) {
|
|
|
92
93
|
this._optionPortal.scheduleRefresh();
|
|
93
94
|
}, this._onKeydown = (e) => {
|
|
94
95
|
if (!this._isDisabled) switch (e.key) {
|
|
95
|
-
case "Escape":
|
|
96
|
-
this._isOpen && (this._close(), e.preventDefault());
|
|
97
|
-
break;
|
|
98
96
|
case "ArrowDown":
|
|
99
97
|
e.preventDefault(), this._isOpen ? this._navigateActive(1) : this._open(!0);
|
|
100
98
|
break;
|
|
@@ -106,7 +104,7 @@ var O = class extends i(b) {
|
|
|
106
104
|
t && this._isLive(t) && !t.disabled && (this.value = t.value, this._notifyValueChange()), this._close(), e.preventDefault();
|
|
107
105
|
}
|
|
108
106
|
}
|
|
109
|
-
}, this._openController =
|
|
107
|
+
}, this._openController = c({
|
|
110
108
|
canOpen: () => !this._isDisabled,
|
|
111
109
|
getIsOpen: () => this._isOpen,
|
|
112
110
|
setIsOpen: (e) => {
|
|
@@ -166,15 +164,18 @@ var O = class extends i(b) {
|
|
|
166
164
|
this._refreshOptions(), this._syncSelected();
|
|
167
165
|
}
|
|
168
166
|
updated(e) {
|
|
169
|
-
(e.has("portal") || e.has("overlayContainer")) && requestAnimationFrame(() => this._reconfigureOverlay()), e.has("noScrollLock") && this._syncScrollLock(), this._syncOpenAttribute(), this._syncValidity();
|
|
167
|
+
(e.has("portal") || e.has("overlayContainer")) && requestAnimationFrame(() => this._reconfigureOverlay()), e.has("noScrollLock") && this._syncScrollLock(), this._syncOpenAttribute(), this._syncOverlayInert(), this._syncValidity();
|
|
170
168
|
}
|
|
171
169
|
_syncValidity() {
|
|
172
170
|
let e = this._formAssociation.getInternals();
|
|
173
|
-
|
|
171
|
+
e && typeof e.setValidity == "function" && (this._isDisabled || !this.required || this.value ? e.setValidity({}) : e.setValidity({ valueMissing: !0 }, "请选择一项"));
|
|
174
172
|
}
|
|
175
173
|
_syncOpenAttribute() {
|
|
176
174
|
this.toggleAttribute("open", this._isOpen);
|
|
177
175
|
}
|
|
176
|
+
_syncOverlayInert() {
|
|
177
|
+
this._panel.getHandle()?.setInert(this._isDisabled);
|
|
178
|
+
}
|
|
178
179
|
_syncSelected() {
|
|
179
180
|
if (this._options.forEach((e) => {
|
|
180
181
|
e.selected = e.value === this.value;
|
|
@@ -196,7 +197,7 @@ var O = class extends i(b) {
|
|
|
196
197
|
_navigateActive(e) {
|
|
197
198
|
let t = this._options.filter((e) => !e.disabled && this._isLive(e));
|
|
198
199
|
if (!t.length) return;
|
|
199
|
-
let n = this._options.find((e) => e.value === this.value && !e.disabled && this._isLive(e)), r = this._activeIndex >= 0 && this._isLive(this._options[this._activeIndex]) ? t.indexOf(this._options[this._activeIndex]) : n ? t.indexOf(n) : e > 0 ? -1 : 0, i = t[
|
|
200
|
+
let n = this._options.find((e) => e.value === this.value && !e.disabled && this._isLive(e)), r = this._activeIndex >= 0 && this._isLive(this._options[this._activeIndex]) ? t.indexOf(this._options[this._activeIndex]) : n ? t.indexOf(n) : e > 0 ? -1 : 0, i = t[d(t.length, r, e)];
|
|
200
201
|
this._activeIndex = this._options.indexOf(i), this._syncActiveOption();
|
|
201
202
|
}
|
|
202
203
|
_open(e = !1) {
|
|
@@ -231,7 +232,7 @@ var O = class extends i(b) {
|
|
|
231
232
|
this._isDisabled || (this._isOpen ? this._close() : this._open());
|
|
232
233
|
}
|
|
233
234
|
_openOverlay(e = !1) {
|
|
234
|
-
this._panel.open(e);
|
|
235
|
+
this._panel.open(e), this._syncOverlayInert();
|
|
235
236
|
}
|
|
236
237
|
_createPortal() {
|
|
237
238
|
let e = g().make({
|
|
@@ -252,7 +253,7 @@ var O = class extends i(b) {
|
|
|
252
253
|
return i.className = "select-content", this._portalContent = i, t.append(i), e.panel.append(t), e.moveContent(Array.from(this.children).filter((e) => e.slot !== "trigger"), i), e;
|
|
253
254
|
}
|
|
254
255
|
_reconfigureOverlay() {
|
|
255
|
-
this._portal = void 0, this._portalContent = void 0, this._panel.reconfigure(this._isOpen);
|
|
256
|
+
this._portal = void 0, this._portalContent = void 0, this._panel.reconfigure(this._isOpen), this._syncOverlayInert();
|
|
256
257
|
}
|
|
257
258
|
async _closeOverlay() {
|
|
258
259
|
await this._panel.close(() => this._isOpen) && (this._portal = void 0, this._portalContent = void 0);
|