@greypan/web-ui 10.2.0 → 10.2.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.
@@ -373,6 +373,15 @@ export declare class WebUiCheckboxGroup extends WebUiCheckboxGroup_base {
373
373
  private _direction;
374
374
  private _value;
375
375
  private readonly _groupController;
376
+ /**
377
+ * 成员被移除后,它的 value 会作为不可见、也取消不掉的幽灵值留在组值里,
378
+ * 并能继续进 FormData。这里以「曾经出现在成员里、现在消失了」为剪枝条件。
379
+ *
380
+ * 不能用「不在现存成员里就剪」:v-if / 异步渲染下组值常常先于成员出现,
381
+ * 那样会把合法的预设值当成幽灵值清掉。
382
+ */
383
+ private _knownMemberValues;
384
+ private _pruneRemovedMembers;
376
385
  get value(): string[];
377
386
  set value(v: string[]);
378
387
  private get _isDisabled();
@@ -33,7 +33,7 @@ var m = ["horizontal", "vertical"], h = class extends t(c) {
33
33
  composed: !0
34
34
  }));
35
35
  }
36
- }).make()), this._formAssociation = r({
36
+ }).make(), { afterSync: () => this._pruneRemovedMembers() }), this._knownMemberValues = /* @__PURE__ */ new Set(), this._formAssociation = r({
37
37
  host: this,
38
38
  initialize: () => {
39
39
  let e = this.getAttribute("value");
@@ -69,6 +69,12 @@ var m = ["horizontal", "vertical"], h = class extends t(c) {
69
69
  let t = this._direction;
70
70
  this._direction = o(e, m, "vertical"), this.requestUpdate("direction", t);
71
71
  }
72
+ _pruneRemovedMembers() {
73
+ let e = [...this.querySelectorAll("web-ui-checkbox")];
74
+ if (e.length === 0) return;
75
+ let t = new Set(e.map((e) => e.value)), n = this._value.filter((e) => t.has(e) || !this._knownMemberValues.has(e));
76
+ this._knownMemberValues = t, n.length !== this._value.length && (this.value = n);
77
+ }
72
78
  get value() {
73
79
  return this._value;
74
80
  }
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../../src/components/checkbox-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 { WebUiCheckbox } from '../checkbox'\n\nimport style from './style.css?inline'\n\nconst ALLOWED_DIRECTIONS = ['horizontal', 'vertical'] as const\n\n@customElement('web-ui-checkbox-group')\nexport class WebUiCheckboxGroup 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: string[] = []\n\n private readonly _groupController = new GroupController(\n this,\n defineGroupCoordinator<WebUiCheckbox, string[]>({\n host: this,\n getItems: () => [...this.querySelectorAll<WebUiCheckbox>('web-ui-checkbox')],\n getValue: () => this._value,\n setValue: value => {\n this.value = value\n },\n getDisabled: () => this._isDisabled,\n isItem: (target): target is WebUiCheckbox => target instanceof HTMLElement && target.matches('web-ui-checkbox'),\n isItemSelected: (checkbox, value) => value.includes(checkbox.value),\n getNextValue: (checkbox, value) =>\n checkbox.checked ? [...new Set([...value, checkbox.value])] : value.filter(item => item !== checkbox.value),\n valuesEqual: (a, b) => a.length === b.length && a.every((value, index) => value === b[index]),\n copyValue: value => [...value],\n setItemSelected: (checkbox, selected) => {\n checkbox.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.split(',').filter(Boolean)\n },\n getState: () => this._value,\n setState: value => {\n this.value = value\n },\n copyState: value => [...value],\n getFormValue: () => {\n if (!this.name || this._value.length === 0) return null\n const formData = new FormData()\n this._value.forEach(value => formData.append(this.name, value))\n return formData\n },\n getFormState: () => JSON.stringify(this._value),\n restoreState: state => {\n if (typeof state !== 'string') return\n try {\n const value = JSON.parse(state)\n if (Array.isArray(value) && value.every(item => typeof item === 'string')) this.value = value\n } catch {\n // 忽略无法解析的历史表单状态。\n }\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.length > 0) {\n internals.setValidity({})\n return\n }\n internals.setValidity({ valueMissing: true }, '请至少选择一项')\n }\n\n override render() {\n return html`<div class=\"wui-checkbox-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-checkbox-group': WebUiCheckboxGroup\n }\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../../src/components/checkbox-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 { WebUiCheckbox } from '../checkbox'\n\nimport style from './style.css?inline'\n\nconst ALLOWED_DIRECTIONS = ['horizontal', 'vertical'] as const\n\n@customElement('web-ui-checkbox-group')\nexport class WebUiCheckboxGroup 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: string[] = []\n\n private readonly _groupController = new GroupController(\n this,\n defineGroupCoordinator<WebUiCheckbox, string[]>({\n host: this,\n getItems: () => [...this.querySelectorAll<WebUiCheckbox>('web-ui-checkbox')],\n getValue: () => this._value,\n setValue: value => {\n this.value = value\n },\n getDisabled: () => this._isDisabled,\n isItem: (target): target is WebUiCheckbox => target instanceof HTMLElement && target.matches('web-ui-checkbox'),\n isItemSelected: (checkbox, value) => value.includes(checkbox.value),\n getNextValue: (checkbox, value) =>\n checkbox.checked ? [...new Set([...value, checkbox.value])] : value.filter(item => item !== checkbox.value),\n valuesEqual: (a, b) => a.length === b.length && a.every((value, index) => value === b[index]),\n copyValue: value => [...value],\n setItemSelected: (checkbox, selected) => {\n checkbox.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 { afterSync: () => this._pruneRemovedMembers() }\n )\n\n /**\n * 成员被移除后,它的 value 会作为不可见、也取消不掉的幽灵值留在组值里,\n * 并能继续进 FormData。这里以「曾经出现在成员里、现在消失了」为剪枝条件。\n *\n * 不能用「不在现存成员里就剪」:v-if / 异步渲染下组值常常先于成员出现,\n * 那样会把合法的预设值当成幽灵值清掉。\n */\n private _knownMemberValues = new Set<string>()\n\n private _pruneRemovedMembers() {\n const items = [...this.querySelectorAll<WebUiCheckbox>('web-ui-checkbox')]\n if (items.length === 0) return\n const alive = new Set(items.map(item => item.value))\n const next = this._value.filter(value => alive.has(value) || !this._knownMemberValues.has(value))\n this._knownMemberValues = alive\n if (next.length !== this._value.length) this.value = next\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.split(',').filter(Boolean)\n },\n getState: () => this._value,\n setState: value => {\n this.value = value\n },\n copyState: value => [...value],\n getFormValue: () => {\n if (!this.name || this._value.length === 0) return null\n const formData = new FormData()\n this._value.forEach(value => formData.append(this.name, value))\n return formData\n },\n getFormState: () => JSON.stringify(this._value),\n restoreState: state => {\n if (typeof state !== 'string') return\n try {\n const value = JSON.parse(state)\n if (Array.isArray(value) && value.every(item => typeof item === 'string')) this.value = value\n } catch {\n // 忽略无法解析的历史表单状态。\n }\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.length > 0) {\n internals.setValidity({})\n return\n }\n internals.setValidity({ valueMissing: true }, '请至少选择一项')\n }\n\n override render() {\n return html`<div class=\"wui-checkbox-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-checkbox-group': WebUiCheckboxGroup\n }\n}\n"],"mappings":"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"}
@@ -81,6 +81,9 @@ var _ = class extends r(l) {
81
81
  this._isDisabled || this.readonly || (this._value = "", this._formAssociation.sync(), this.dispatchEvent(new Event("input", {
82
82
  bubbles: !0,
83
83
  composed: !0
84
+ })), this.dispatchEvent(new Event("change", {
85
+ bubbles: !0,
86
+ composed: !0
84
87
  })));
85
88
  }
86
89
  preventMouseDownBlur(e) {
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../../src/components/input/index.ts"],"sourcesContent":["import '@/components/button'\nimport '@/components/icon'\n\nimport { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport glass from '@/assets/glass.css?inline'\nimport { jamCloseCircleF } from '@/icons'\nimport {\n FormAssociated,\n defineFormAssociation,\n forwardInputValidity,\n FormAssociationController\n} from '@/shared/form-association'\nimport { createFieldId } from '@/shared/form-association/field-id'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-input')\nexport class WebUiInput extends FormAssociated(LitElement) {\n static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n\n @property({ type: String, reflect: true }) type = 'text'\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: Boolean, reflect: true }) clearable = false\n @property({ type: Boolean, reflect: true }) full = false\n @property({ type: Boolean, reflect: true }) borderless = false\n @property({ type: String, attribute: 'aria-label' }) override ariaLabel: string | null = null\n\n @state() private _value = ''\n @state() private _focused = false\n @state() private _hasPrefix = false\n @state() private _hasSuffix = false\n\n private readonly _fieldId = createFieldId('web-ui-input')\n\n @property({ type: String, reflect: true })\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 getState: () => this._value,\n setState: value => {\n this.value = value\n },\n getFormValue: () => this._value,\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 updated(changed: Map<string, unknown>) {\n if (changed.has('_value')) {\n const input = this.shadowRoot?.querySelector('input')\n if (input && input.value !== this._value) {\n input.value = this._value\n }\n }\n this._syncValidity()\n this.toggleAttribute('focused', this._focused)\n }\n\n private _syncValidity() {\n const input = this.shadowRoot?.querySelector('input')\n const internals = this._formAssociation.getInternals()\n if (!internals || !input || typeof internals.setValidity !== 'function') return\n forwardInputValidity(\n internals,\n input,\n ['valueMissing', 'typeMismatch', 'patternMismatch', 'tooLong', 'tooShort'],\n this._isDisabled\n )\n }\n\n private _onSlotChange(e: Event) {\n if (!(e.target instanceof HTMLSlotElement)) return\n const slot = e.target\n const hasContent = slot.assignedElements().length > 0\n if (slot.name === 'prefix') this._hasPrefix = hasContent\n if (slot.name === 'suffix') this._hasSuffix = hasContent\n }\n\n private handleInput(e: Event) {\n if (this._isDisabled || this.readonly) return\n if (!(e.target instanceof HTMLInputElement)) return\n this._value = e.target.value\n this._formAssociation.sync()\n }\n\n // 原生 change 不 composed,被 shadow root 挡住;这里补发 composed 事件,\n // 兑现 $events/README 声明的公共 change 契约。\n private handleNativeChange(e: Event) {\n if (this._isDisabled || this.readonly) return\n if (!(e.target instanceof HTMLInputElement)) return\n this._value = e.target.value\n this._formAssociation.sync()\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n }\n\n private handleFocus() {\n if (!this._isDisabled) this._focused = true\n }\n\n private handleBlur() {\n this._focused = false\n }\n\n private handleClear() {\n if (this._isDisabled || this.readonly) return\n this._value = ''\n this._formAssociation.sync()\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }))\n }\n\n private preventMouseDownBlur(e: Event) {\n e.preventDefault()\n }\n\n private focusInput() {\n if (this._isDisabled) return\n this.shadowRoot?.querySelector('input')?.focus()\n }\n\n // 公共 focus/blur 与 textarea 对齐:宿主自身没有 tab 位(不可聚焦),\n // 不重定向到内部原生控件的话,调用方拿到的是一次空操作\n override focus(options?: FocusOptions) {\n if (this._isDisabled) return\n this.shadowRoot?.querySelector('input')?.focus(options)\n }\n\n override blur() {\n this.shadowRoot?.querySelector('input')?.blur()\n }\n\n /**\n * 公共 API:全选当前值。\n *\n * `disabled` 时与 `focus()` 一致不产生效果;原生控件未渲染时安全 no-op。\n */\n select() {\n if (this._isDisabled) return\n this.shadowRoot?.querySelector('input')?.select()\n }\n\n override render() {\n // readonly 下不可清除:清空按钮会修改值,与只读语义冲突\n const showClear = this.clearable && this._value && !this.readonly\n\n return html`\n <div class=\"wui-glass wui-input-inner\" @click=${this.focusInput}>\n <slot name=\"prefix\" class=${classMap({ empty: !this._hasPrefix })} @slotchange=${this._onSlotChange}></slot>\n <input\n id=${this._fieldId}\n type=${this.type}\n placeholder=${this.placeholder}\n name=${this.name}\n aria-label=${ifDefined(this.ariaLabel)}\n ?disabled=${this._isDisabled}\n ?readonly=${this.readonly}\n ?required=${this.required}\n .value=${this._value}\n @input=${this.handleInput}\n @change=${this.handleNativeChange}\n @focus=${this.handleFocus}\n @blur=${this.handleBlur}\n />\n ${\n showClear\n ? html`<web-ui-button\n icon\n variant=\"ghost\"\n size=\"20\"\n aria-label=\"清除\"\n @pointerdown=${this.preventMouseDownBlur}\n @click=${this.handleClear}\n >\n <web-ui-icon .icon=${jamCloseCircleF} size=\"14\"></web-ui-icon>\n </web-ui-button>`\n : ''\n }\n <slot name=\"suffix\" class=${classMap({ empty: !this._hasSuffix })} @slotchange=${this._onSlotChange}></slot>\n </div>\n `\n }\n\n declare readonly $events: {\n input: Event\n change: Event\n focus: FocusEvent\n blur: FocusEvent\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'web-ui-input': WebUiInput\n }\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../../src/components/input/index.ts"],"sourcesContent":["import '@/components/button'\nimport '@/components/icon'\n\nimport { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport glass from '@/assets/glass.css?inline'\nimport { jamCloseCircleF } from '@/icons'\nimport {\n FormAssociated,\n defineFormAssociation,\n forwardInputValidity,\n FormAssociationController\n} from '@/shared/form-association'\nimport { createFieldId } from '@/shared/form-association/field-id'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-input')\nexport class WebUiInput extends FormAssociated(LitElement) {\n static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n\n @property({ type: String, reflect: true }) type = 'text'\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: Boolean, reflect: true }) clearable = false\n @property({ type: Boolean, reflect: true }) full = false\n @property({ type: Boolean, reflect: true }) borderless = false\n @property({ type: String, attribute: 'aria-label' }) override ariaLabel: string | null = null\n\n @state() private _value = ''\n @state() private _focused = false\n @state() private _hasPrefix = false\n @state() private _hasSuffix = false\n\n private readonly _fieldId = createFieldId('web-ui-input')\n\n @property({ type: String, reflect: true })\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 getState: () => this._value,\n setState: value => {\n this.value = value\n },\n getFormValue: () => this._value,\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 updated(changed: Map<string, unknown>) {\n if (changed.has('_value')) {\n const input = this.shadowRoot?.querySelector('input')\n if (input && input.value !== this._value) {\n input.value = this._value\n }\n }\n this._syncValidity()\n this.toggleAttribute('focused', this._focused)\n }\n\n private _syncValidity() {\n const input = this.shadowRoot?.querySelector('input')\n const internals = this._formAssociation.getInternals()\n if (!internals || !input || typeof internals.setValidity !== 'function') return\n forwardInputValidity(\n internals,\n input,\n ['valueMissing', 'typeMismatch', 'patternMismatch', 'tooLong', 'tooShort'],\n this._isDisabled\n )\n }\n\n private _onSlotChange(e: Event) {\n if (!(e.target instanceof HTMLSlotElement)) return\n const slot = e.target\n const hasContent = slot.assignedElements().length > 0\n if (slot.name === 'prefix') this._hasPrefix = hasContent\n if (slot.name === 'suffix') this._hasSuffix = hasContent\n }\n\n private handleInput(e: Event) {\n if (this._isDisabled || this.readonly) return\n if (!(e.target instanceof HTMLInputElement)) return\n this._value = e.target.value\n this._formAssociation.sync()\n }\n\n // 原生 change 不 composed,被 shadow root 挡住;这里补发 composed 事件,\n // 兑现 $events/README 声明的公共 change 契约。\n private handleNativeChange(e: Event) {\n if (this._isDisabled || this.readonly) return\n if (!(e.target instanceof HTMLInputElement)) return\n this._value = e.target.value\n this._formAssociation.sync()\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n }\n\n private handleFocus() {\n if (!this._isDisabled) this._focused = true\n }\n\n private handleBlur() {\n this._focused = false\n }\n\n private handleClear() {\n if (this._isDisabled || this.readonly) return\n this._value = ''\n this._formAssociation.sync()\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }))\n // 清除是离散的已提交变更(不是连续输入):只派 input 会让 v-model.lazy\n // 等只监听 change 的消费者永远收不到清空,故与 input 一并派发。\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n }\n\n private preventMouseDownBlur(e: Event) {\n e.preventDefault()\n }\n\n private focusInput() {\n if (this._isDisabled) return\n this.shadowRoot?.querySelector('input')?.focus()\n }\n\n // 公共 focus/blur 与 textarea 对齐:宿主自身没有 tab 位(不可聚焦),\n // 不重定向到内部原生控件的话,调用方拿到的是一次空操作\n override focus(options?: FocusOptions) {\n if (this._isDisabled) return\n this.shadowRoot?.querySelector('input')?.focus(options)\n }\n\n override blur() {\n this.shadowRoot?.querySelector('input')?.blur()\n }\n\n /**\n * 公共 API:全选当前值。\n *\n * `disabled` 时与 `focus()` 一致不产生效果;原生控件未渲染时安全 no-op。\n */\n select() {\n if (this._isDisabled) return\n this.shadowRoot?.querySelector('input')?.select()\n }\n\n override render() {\n // readonly 下不可清除:清空按钮会修改值,与只读语义冲突\n const showClear = this.clearable && this._value && !this.readonly\n\n return html`\n <div class=\"wui-glass wui-input-inner\" @click=${this.focusInput}>\n <slot name=\"prefix\" class=${classMap({ empty: !this._hasPrefix })} @slotchange=${this._onSlotChange}></slot>\n <input\n id=${this._fieldId}\n type=${this.type}\n placeholder=${this.placeholder}\n name=${this.name}\n aria-label=${ifDefined(this.ariaLabel)}\n ?disabled=${this._isDisabled}\n ?readonly=${this.readonly}\n ?required=${this.required}\n .value=${this._value}\n @input=${this.handleInput}\n @change=${this.handleNativeChange}\n @focus=${this.handleFocus}\n @blur=${this.handleBlur}\n />\n ${\n showClear\n ? html`<web-ui-button\n icon\n variant=\"ghost\"\n size=\"20\"\n aria-label=\"清除\"\n @pointerdown=${this.preventMouseDownBlur}\n @click=${this.handleClear}\n >\n <web-ui-icon .icon=${jamCloseCircleF} size=\"14\"></web-ui-icon>\n </web-ui-button>`\n : ''\n }\n <slot name=\"suffix\" class=${classMap({ empty: !this._hasSuffix })} @slotchange=${this._onSlotChange}></slot>\n </div>\n `\n }\n\n declare readonly $events: {\n input: Event\n change: Event\n focus: FocusEvent\n blur: FocusEvent\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'web-ui-input': WebUiInput\n }\n}\n"],"mappings":";;;;;;;;;;;;;AAqBO,IAAM,IAAN,cAAyB,EAAe,CAAU,CAAC,CAAC;;EAmDX,aAhDI,KAAA,OAAA,QACO,KAAA,cAAA,IACP,KAAA,OAAA,IACK,KAAA,WAAA,IACA,KAAA,WAAA,IACA,KAAA,WAAA,IACC,KAAA,YAAA,IACL,KAAA,OAAA,IACM,KAAA,aAAA,IACgC,KAAA,YAAA,MAE/D,KAAA,SAAA,IACE,KAAA,WAAA,IACE,KAAA,aAAA,IACA,KAAA,aAAA,IAEF,KAAA,WAAA,EAAc,cAAc,GAkBpB,KAAA,mBAAA,EAA8B;GAChE,MAAM;GACN,gBAAgB,KAAK;GACrB,WAAU,MAAS;IACjB,KAAK,QAAQ;GACf;GACA,oBAAoB,KAAK;GACzB,oBAAoB,KAAK;GACzB,eAAc,MAAS;IACrB,AAAI,OAAO,KAAU,aAAU,KAAK,QAAQ;GAC9C;GACA,oBAAoB,KAAK,cAAc;EACzC,CAAC,CAAC,CAAC,KAAK,GAEsC,KAAA,6BAAA,IAAI,EAA0B,MAAM,KAAK,gBAAgB;;;EAlD9E,KAAA,SAAA,CAAC,EAAU,CAAK,GAAG,EAAU,CAAK,CAAC;;CAoB5D,IACI,QAAgB;EAClB,OAAO,KAAK;CACd;CAEA,IAAI,MAAM,GAAW;EACnB,IAAM,IAAM,KAAK;EAGjB,AAFA,KAAK,SAAS,GACd,KAAK,iBAAiB,KAAK,GAC3B,KAAK,cAAc,SAAS,CAAG;CACjC;CAEA,IAAY,cAAuB;EACjC,OAAO,KAAK,YAAY,KAAK,iBAAiB,eAAe;CAC/D;CAkBA,QAAiB,GAA+B;EAC9C,IAAI,EAAQ,IAAI,QAAQ,GAAG;GACzB,IAAM,IAAQ,KAAK,YAAY,cAAc,OAAO;GACpD,AAAI,KAAS,EAAM,UAAU,KAAK,WAChC,EAAM,QAAQ,KAAK;EAEvB;EAEA,AADA,KAAK,cAAc,GACnB,KAAK,gBAAgB,WAAW,KAAK,QAAQ;CAC/C;CAEA,gBAAwB;EACtB,IAAM,IAAQ,KAAK,YAAY,cAAc,OAAO,GAC9C,IAAY,KAAK,iBAAiB,aAAa;EACjD,AAAC,KAAc,KAAS,OAAO,EAAU,eAAgB,cAC7D,EACE,GACA,GACA;GAAC;GAAgB;GAAgB;GAAmB;GAAW;EAAU,GACzE,KAAK,WACP;CACF;CAEA,cAAsB,GAAU;EAC9B,IAAI,EAAE,EAAE,kBAAkB,kBAAkB;EAC5C,IAAM,IAAO,EAAE,QACT,IAAa,EAAK,iBAAiB,CAAC,CAAC,SAAS;EAEpD,AADI,EAAK,SAAS,aAAU,KAAK,aAAa,IAC1C,EAAK,SAAS,aAAU,KAAK,aAAa;CAChD;CAEA,YAAoB,GAAU;EACxB,KAAK,eAAe,KAAK,YACvB,EAAE,kBAAkB,qBAC1B,KAAK,SAAS,EAAE,OAAO,OACvB,KAAK,iBAAiB,KAAK;CAC7B;CAIA,mBAA2B,GAAU;EAC/B,KAAK,eAAe,KAAK,YACvB,EAAE,kBAAkB,qBAC1B,KAAK,SAAS,EAAE,OAAO,OACvB,KAAK,iBAAiB,KAAK,GAC3B,KAAK,cAAc,IAAI,MAAM,UAAU;GAAE,SAAS;GAAM,UAAU;EAAK,CAAC,CAAC;CAC3E;CAEA,cAAsB;EACpB,AAAK,KAAK,gBAAa,KAAK,WAAW;CACzC;CAEA,aAAqB;EACnB,KAAK,WAAW;CAClB;CAEA,cAAsB;EAChB,KAAK,eAAe,KAAK,aAC7B,KAAK,SAAS,IACd,KAAK,iBAAiB,KAAK,GAC3B,KAAK,cAAc,IAAI,MAAM,SAAS;GAAE,SAAS;GAAM,UAAU;EAAK,CAAC,CAAC,GAGxE,KAAK,cAAc,IAAI,MAAM,UAAU;GAAE,SAAS;GAAM,UAAU;EAAK,CAAC,CAAC;CAC3E;CAEA,qBAA6B,GAAU;EACrC,EAAE,eAAe;CACnB;CAEA,aAAqB;EACf,KAAK,eACT,KAAK,YAAY,cAAc,OAAO,CAAC,EAAE,MAAM;CACjD;CAIA,MAAe,GAAwB;EACjC,KAAK,eACT,KAAK,YAAY,cAAc,OAAO,CAAC,EAAE,MAAM,CAAO;CACxD;CAEA,OAAgB;EACd,KAAK,YAAY,cAAc,OAAO,CAAC,EAAE,KAAK;CAChD;CAOA,SAAS;EACH,KAAK,eACT,KAAK,YAAY,cAAc,OAAO,CAAC,EAAE,OAAO;CAClD;CAEA,SAAkB;EAEhB,IAAM,IAAY,KAAK,aAAa,KAAK,UAAU,CAAC,KAAK;EAEzD,OAAO,CAAI;sDACuC,KAAK,WAAW;oCAClC,EAAS,EAAE,OAAO,CAAC,KAAK,WAAW,CAAC,EAAE,eAAe,KAAK,cAAc;;eAE7F,KAAK,SAAS;iBACZ,KAAK,KAAK;wBACH,KAAK,YAAY;iBACxB,KAAK,KAAK;uBACJ,EAAU,KAAK,SAAS,EAAE;sBAC3B,KAAK,YAAY;sBACjB,KAAK,SAAS;sBACd,KAAK,SAAS;mBACjB,KAAK,OAAO;mBACZ,KAAK,YAAY;oBAChB,KAAK,mBAAmB;mBACzB,KAAK,YAAY;kBAClB,KAAK,WAAW;;UAGxB,IACI,CAAI;;;;;+BAKa,KAAK,qBAAqB;yBAChC,KAAK,YAAY;;qCAEL,EAAgB;kCAEvC,GACL;oCAC2B,EAAS,EAAE,OAAO,CAAC,KAAK,WAAW,CAAC,EAAE,eAAe,KAAK,cAAc;;;CAG1G;AAQF;AAjMG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GACxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,eAAA,KAAA,CAAA,GACxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GACxC,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,GACzC,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,aAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,WAAW;AAAa,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAElD,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GACN,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GACN,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,GACN,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,GAIN,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,IAAA,GAtB1C,IAAA,EAAA,CAAA,EAAc,cAAc,CAAA,GAAA,CAAA"}
@@ -372,7 +372,13 @@ export declare class WebUiInputNumber extends WebUiInputNumber_base {
372
372
  required: boolean;
373
373
  get precision(): number;
374
374
  set precision(v: number);
375
+ /** 原始值:只做 min/max 收敛,不按精度取整(取整发生在 get value)。 */
375
376
  private _value;
377
+ /**
378
+ * 编辑中的原始文本。null 表示非编辑态,显示由 `value` 派生;
379
+ * 非 null 时显示原文,避免把用户正在输入的 "1." / "0.10" 立刻改写。
380
+ */
381
+ private _draft;
376
382
  private _min;
377
383
  private _max;
378
384
  private _step;
@@ -12,14 +12,14 @@ import { customElement as m, property as h, state as g } from "lit/decorators.js
12
12
  //#region src/components/input-number/index.ts
13
13
  var _ = class extends i(d) {
14
14
  constructor(...e) {
15
- 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._precision = 0, this._fieldId = l("web-ui-input-number"), this._formAssociation = o({
15
+ super(...e), this.placeholder = "", this.name = "", this.disabled = !1, this.readonly = !1, this.required = !1, this._value = 0, this._draft = null, this._min = 0, this._max = Infinity, this._step = 1, this._focused = !1, this._precision = 0, this._fieldId = l("web-ui-input-number"), this._formAssociation = o({
16
16
  host: this,
17
- getState: () => this._value,
17
+ getState: () => this.value,
18
18
  setState: (e) => {
19
19
  this.value = e;
20
20
  },
21
- getFormValue: () => String(this._value),
22
- getFormState: () => String(this._value),
21
+ getFormValue: () => String(this.value),
22
+ getFormState: () => String(this.value),
23
23
  restoreState: (e) => {
24
24
  if (typeof e != "string") return;
25
25
  let t = Number(e);
@@ -36,15 +36,13 @@ var _ = class extends i(d) {
36
36
  }
37
37
  set precision(e) {
38
38
  let t = this._precision;
39
- this._precision = e;
40
- let n = this.clamp(this.round(this._value));
41
- n !== this._value && (this._value = n, this._formAssociation.sync()), this.requestUpdate("precision", t);
39
+ this._precision = e, this.requestUpdate("precision", t);
42
40
  }
43
41
  get value() {
44
- return this._value;
42
+ return this.clamp(this.round(this._value));
45
43
  }
46
44
  set value(e) {
47
- let t = this.clamp(this.round(e)), n = this._value;
45
+ let t = this.clamp(e), n = this._value;
48
46
  this._value = t, this._formAssociation.sync(), this.requestUpdate("value", n);
49
47
  }
50
48
  get _isDisabled() {
@@ -72,10 +70,10 @@ var _ = class extends i(d) {
72
70
  return this._step;
73
71
  }
74
72
  get atMin() {
75
- return this._value <= this._min;
73
+ return this.value <= this._min;
76
74
  }
77
75
  get atMax() {
78
- return this._value >= this._max;
76
+ return this.value >= this._max;
79
77
  }
80
78
  updated() {
81
79
  this._syncValidity(), this.toggleAttribute("focused", this._focused);
@@ -97,32 +95,40 @@ var _ = class extends i(d) {
97
95
  return Math.round(e * t) / t;
98
96
  }
99
97
  setValueAndNotify(e) {
100
- this.value = this.clamp(this.round(e)), this.dispatchEvent(new Event("input", {
98
+ this._draft = null, this.value = this.clamp(this.round(e)), this.dispatchEvent(new Event("input", {
101
99
  bubbles: !0,
102
100
  composed: !0
103
101
  }));
104
102
  }
105
103
  handleStep(e) {
106
- this._isDisabled || this.readonly || this.setValueAndNotify(this._value + e * this._effectiveStep);
104
+ this._isDisabled || this.readonly || this.setValueAndNotify(this.value + e * this._effectiveStep);
107
105
  }
108
106
  handleInput(e) {
109
107
  if (this.readonly || !(e.target instanceof HTMLInputElement)) return;
110
108
  let t = e.target.value;
111
- t !== "" && t !== "-" && (this._value = this.clamp(this.round(Number(t))), this._formAssociation.sync(), this._syncValidity());
109
+ this._draft = t;
110
+ let n = t === "" || t === "-" ? NaN : Number(t);
111
+ Number.isFinite(n) && (this._value = this.clamp(n), this._formAssociation.sync()), this._syncValidity();
112
112
  }
113
113
  handleNativeChange(e) {
114
114
  if (this.readonly || !(e.target instanceof HTMLInputElement)) return;
115
115
  let t = e.target.value;
116
- t !== "" && t !== "-" && (this._value = this.clamp(this.round(Number(t))), this._formAssociation.sync(), this._syncValidity(), this.dispatchEvent(new Event("change", {
116
+ this._draft = null;
117
+ let n = t === "" || t === "-" ? NaN : Number(t);
118
+ if (!Number.isFinite(n)) {
119
+ this.requestUpdate(), this._syncValidity();
120
+ return;
121
+ }
122
+ this._value = this.clamp(n), this._formAssociation.sync(), this._syncValidity(), this.dispatchEvent(new Event("change", {
117
123
  bubbles: !0,
118
124
  composed: !0
119
- })));
125
+ }));
120
126
  }
121
127
  handleKeydown(e) {
122
- this._isDisabled || this.readonly || (e.key === "ArrowUp" ? (e.preventDefault(), this.setValueAndNotify(this._value + this._effectiveStep), this.dispatchEvent(new Event("change", {
128
+ this._isDisabled || this.readonly || (e.key === "ArrowUp" ? (e.preventDefault(), this.setValueAndNotify(this.value + this._effectiveStep), this.dispatchEvent(new Event("change", {
123
129
  bubbles: !0,
124
130
  composed: !0
125
- }))) : e.key === "ArrowDown" && (e.preventDefault(), this.setValueAndNotify(this._value - this._effectiveStep), this.dispatchEvent(new Event("change", {
131
+ }))) : e.key === "ArrowDown" && (e.preventDefault(), this.setValueAndNotify(this.value - this._effectiveStep), this.dispatchEvent(new Event("change", {
126
132
  bubbles: !0,
127
133
  composed: !0
128
134
  }))));
@@ -131,7 +137,7 @@ var _ = class extends i(d) {
131
137
  this._isDisabled || (this._focused = !0);
132
138
  }
133
139
  handleBlur() {
134
- this._focused = !1;
140
+ this._focused = !1, this._draft !== null && (this._draft = null, this.requestUpdate());
135
141
  }
136
142
  render() {
137
143
  return f`
@@ -149,7 +155,7 @@ var _ = class extends i(d) {
149
155
  type="number"
150
156
  placeholder=${this.placeholder}
151
157
  name=${this.name}
152
- .value=${String(this._value)}
158
+ .value=${this._draft ?? String(this.value)}
153
159
  ?disabled=${this._isDisabled}
154
160
  ?readonly=${this.readonly}
155
161
  ?required=${this.required}
@@ -189,7 +195,7 @@ e([h({
189
195
  })], _.prototype, "required", void 0), e([h({
190
196
  type: Number,
191
197
  reflect: !0
192
- })], _.prototype, "precision", null), e([g()], _.prototype, "_value", void 0), e([g()], _.prototype, "_min", void 0), e([g()], _.prototype, "_max", void 0), e([g()], _.prototype, "_step", void 0), e([g()], _.prototype, "_focused", void 0), e([h({
198
+ })], _.prototype, "precision", null), e([g()], _.prototype, "_value", void 0), e([g()], _.prototype, "_draft", void 0), e([g()], _.prototype, "_min", void 0), e([g()], _.prototype, "_max", void 0), e([g()], _.prototype, "_step", void 0), e([g()], _.prototype, "_focused", void 0), e([h({
193
199
  type: Number,
194
200
  reflect: !0
195
201
  })], _.prototype, "value", null), e([h({
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../../src/components/input-number/index.ts"],"sourcesContent":["import '@/components/icon'\n\nimport { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport glass from '@/assets/glass.css?inline'\nimport { lucideMinus, lucidePlus } from '@/icons'\nimport {\n FormAssociated,\n defineFormAssociation,\n forwardInputValidity,\n FormAssociationController\n} from '@/shared/form-association'\nimport { createFieldId } from '@/shared/form-association/field-id'\nimport { normalizeNumber } from '@/shared/normalize'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-input-number')\nexport class WebUiInputNumber extends FormAssociated(LitElement) {\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._formAssociation.sync()\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 private _precision = 0\n private readonly _fieldId = createFieldId('web-ui-input-number')\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._formAssociation.sync()\n this.requestUpdate('value', old)\n }\n\n private get _isDisabled(): boolean {\n return this.disabled || this._formAssociation.isFormDisabled()\n }\n\n @property({ type: Number, reflect: true })\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, reflect: true })\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, reflect: true })\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 private readonly _formAssociation = defineFormAssociation<number>({\n host: this,\n getState: () => this._value,\n setState: value => {\n this.value = value\n },\n getFormValue: () => String(this._value),\n getFormState: () => String(this._value),\n restoreState: state => {\n if (typeof state !== 'string') return\n const value = Number(state)\n if (Number.isFinite(value)) this.value = value\n },\n syncValidity: () => this._syncValidity()\n }).make()\n\n private readonly _formAssociationController = new FormAssociationController(this, this._formAssociation)\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 const internals = this._formAssociation.getInternals()\n if (!internals || !input || typeof internals.setValidity !== 'function') return\n forwardInputValidity(\n internals,\n input,\n ['valueMissing', 'rangeUnderflow', 'rangeOverflow', 'stepMismatch'],\n this._isDisabled\n )\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._formAssociation.sync()\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._formAssociation.sync()\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 id=${this._fieldId}\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
+ {"version":3,"file":"index.js","names":[],"sources":["../../../src/components/input-number/index.ts"],"sourcesContent":["import '@/components/icon'\n\nimport { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport glass from '@/assets/glass.css?inline'\nimport { lucideMinus, lucidePlus } from '@/icons'\nimport {\n FormAssociated,\n defineFormAssociation,\n forwardInputValidity,\n FormAssociationController\n} from '@/shared/form-association'\nimport { createFieldId } from '@/shared/form-association/field-id'\nimport { normalizeNumber } from '@/shared/normalize'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-input-number')\nexport class WebUiInputNumber extends FormAssociated(LitElement) {\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 // 精度只影响读取(get value)/提交时的规整,不在赋值时抹掉原始小数:\n // `<web-ui-input-number value=\"1.5\" precision=\"2\">` 先跑 value setter、\n // 后跑 precision setter,若赋值时就按当时的默认精度 0 取整,1.5 会先变 2,\n // 之后再声明 precision=2 也恢复不了。\n set precision(v: number) {\n const old = this._precision\n this._precision = v\n this.requestUpdate('precision', old)\n }\n\n /** 原始值:只做 min/max 收敛,不按精度取整(取整发生在 get value)。 */\n @state() private _value = 0\n\n /**\n * 编辑中的原始文本。null 表示非编辑态,显示由 `value` 派生;\n * 非 null 时显示原文,避免把用户正在输入的 \"1.\" / \"0.10\" 立刻改写。\n */\n @state() private _draft: string | null = null\n @state() private _min = 0\n @state() private _max = Infinity\n @state() private _step = 1\n @state() private _focused = false\n private _precision = 0\n private readonly _fieldId = createFieldId('web-ui-input-number')\n\n @property({ type: Number, reflect: true })\n get value(): number {\n return this.clamp(this.round(this._value))\n }\n\n set value(v: number) {\n const next = this.clamp(v)\n const old = this._value\n this._value = next\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 @property({ type: Number, reflect: true })\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, reflect: true })\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, reflect: true })\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 private readonly _formAssociation = defineFormAssociation<number>({\n host: this,\n getState: () => this.value,\n setState: value => {\n this.value = value\n },\n getFormValue: () => String(this.value),\n getFormState: () => String(this.value),\n restoreState: state => {\n if (typeof state !== 'string') return\n const value = Number(state)\n if (Number.isFinite(value)) this.value = value\n },\n syncValidity: () => this._syncValidity()\n }).make()\n\n private readonly _formAssociationController = new FormAssociationController(this, this._formAssociation)\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 const internals = this._formAssociation.getInternals()\n if (!internals || !input || typeof internals.setValidity !== 'function') return\n forwardInputValidity(\n internals,\n input,\n ['valueMissing', 'rangeUnderflow', 'rangeOverflow', 'stepMismatch'],\n this._isDisabled\n )\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._draft = null\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 // 输入过程只更新草稿与可解析的原始值,显示保持在草稿上:\n // 逐字把 \"1.\" 规整成 \"1\" 会打断输入(与原生 number 输入框的编辑体验一致)。\n private handleInput(e: Event) {\n if (this.readonly) return\n if (!(e.target instanceof HTMLInputElement)) return\n const raw = e.target.value\n this._draft = raw\n const parsed = raw === '' || raw === '-' ? Number.NaN : Number(raw)\n if (Number.isFinite(parsed)) {\n this._value = this.clamp(parsed)\n this._formAssociation.sync()\n }\n this._syncValidity()\n }\n\n // 原生 change 不 composed,被 shadow root 挡住;文本失焦提交时补发 composed 事件,\n // 与 ArrowUp/ArrowDown 的 change 行为对齐。\n // 提交点上做规整:非法/空草稿回填已提交值(value 不变、不派发 change),\n // 合法草稿写入 value 后由 get value 按精度规整。\n private handleNativeChange(e: Event) {\n if (this.readonly) return\n if (!(e.target instanceof HTMLInputElement)) return\n const raw = e.target.value\n this._draft = null\n const parsed = raw === '' || raw === '-' ? Number.NaN : Number(raw)\n if (!Number.isFinite(parsed)) {\n // 回填:草稿清空后显示重新由 value 派生\n this.requestUpdate()\n this._syncValidity()\n return\n }\n this._value = this.clamp(parsed)\n this._formAssociation.sync()\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 // change 的时序在部分平台晚于 blur;草稿仍存在说明还没提交,直接回填,\n // 避免「显示空、value 仍是旧值」的持久脱同步。\n if (this._draft !== null) {\n this._draft = null\n this.requestUpdate()\n }\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 id=${this._fieldId}\n type=\"number\"\n placeholder=${this.placeholder}\n name=${this.name}\n .value=${this._draft ?? 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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"}
@@ -373,6 +373,13 @@ export declare class WebUiRadioGroup extends WebUiRadioGroup_base {
373
373
  private _direction;
374
374
  private _value;
375
375
  private readonly _groupController;
376
+ /**
377
+ * 成员被移除后,组值若仍指向它就成了幽灵值(表单照旧提交一个不存在的选项)。
378
+ * 剪枝条件是「曾经出现在成员里、现在消失了」——不能用「不在现存成员里就剪」,
379
+ * 否则 v-if / 异步渲染时先于成员到达的合法组值会被误清。
380
+ */
381
+ private _knownMemberValues;
382
+ private _pruneRemovedMembers;
376
383
  get value(): string;
377
384
  set value(v: string);
378
385
  private get _isDisabled();
@@ -17,13 +17,24 @@ var m = ["horizontal", "vertical"], h = class extends t(c) {
17
17
  },
18
18
  getDisabled: () => this._isDisabled,
19
19
  isItem: (e) => e instanceof HTMLElement && e.matches("web-ui-radio"),
20
- isItemSelected: (e, t) => e.value === t,
20
+ isItemSelected: (e, t) => {
21
+ if (!t) return !1;
22
+ let n;
23
+ for (let e of this.querySelectorAll("web-ui-radio")) if (e.value === t && (n ||= e, e.checked)) {
24
+ n = e;
25
+ break;
26
+ }
27
+ return e === n;
28
+ },
21
29
  getNextValue: (e, t) => e.checked ? e.value : t,
22
30
  valuesEqual: (e, t) => e === t,
23
31
  copyValue: (e) => e,
24
32
  setItemSelected: (e, t) => {
25
33
  e.checked = t;
26
34
  },
35
+ resyncOnUnchangedValue: (e) => {
36
+ for (let t of this.querySelectorAll("web-ui-radio")) t.checked = t === e;
37
+ },
27
38
  dispatchValueChange: () => {
28
39
  this.dispatchEvent(new Event("input", {
29
40
  bubbles: !0,
@@ -33,7 +44,7 @@ var m = ["horizontal", "vertical"], h = class extends t(c) {
33
44
  composed: !0
34
45
  }));
35
46
  }
36
- }).make()), this._formAssociation = r({
47
+ }).make(), { afterSync: () => this._pruneRemovedMembers() }), this._knownMemberValues = /* @__PURE__ */ new Set(), this._formAssociation = r({
37
48
  host: this,
38
49
  initialize: () => {
39
50
  let e = this.getAttribute("value");
@@ -61,6 +72,13 @@ var m = ["horizontal", "vertical"], h = class extends t(c) {
61
72
  let t = this._direction;
62
73
  this._direction = o(e, m, "vertical"), this.requestUpdate("direction", t);
63
74
  }
75
+ _pruneRemovedMembers() {
76
+ if (!this._value) return;
77
+ let e = [...this.querySelectorAll("web-ui-radio")];
78
+ if (e.length === 0) return;
79
+ let t = new Set(e.map((e) => e.value));
80
+ !t.has(this._value) && this._knownMemberValues.has(this._value) && (this.value = ""), this._knownMemberValues = t;
81
+ }
64
82
  get value() {
65
83
  return this._value;
66
84
  }
@@ -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'\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
+ {"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 // 选中判定按元素身份而非 value 相等:value 重复时按值比较会把多个成员\n // 同时标为选中,破坏单选不变式。重复值取第一个匹配(或已选中的那个,\n // 避免每次 sync 把选中项跳回第一个)。\n isItemSelected: (radio, value) => {\n if (!value) return false\n let selected: WebUiRadio | undefined\n for (const item of this.querySelectorAll<WebUiRadio>('web-ui-radio')) {\n if (item.value !== value) continue\n if (!selected) selected = item\n if (item.checked) {\n selected = item\n break\n }\n }\n return radio === selected\n },\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 // 点击同值成员时 value 不变,仍需把选中态收到被点击的那一项\n resyncOnUnchangedValue: clicked => {\n for (const radio of this.querySelectorAll<WebUiRadio>('web-ui-radio')) {\n radio.checked = radio === clicked\n }\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 { afterSync: () => this._pruneRemovedMembers() }\n )\n\n /**\n * 成员被移除后,组值若仍指向它就成了幽灵值(表单照旧提交一个不存在的选项)。\n * 剪枝条件是「曾经出现在成员里、现在消失了」——不能用「不在现存成员里就剪」,\n * 否则 v-if / 异步渲染时先于成员到达的合法组值会被误清。\n */\n private _knownMemberValues = new Set<string>()\n\n private _pruneRemovedMembers() {\n if (!this._value) return\n const items = [...this.querySelectorAll<WebUiRadio>('web-ui-radio')]\n if (items.length === 0) return\n const alive = new Set(items.map(item => item.value))\n if (!alive.has(this._value) && this._knownMemberValues.has(this._value)) this.value = ''\n this._knownMemberValues = alive\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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"}
@@ -100,8 +100,8 @@ var v = class extends r(u) {
100
100
  }
101
101
  _normalizeValue(e) {
102
102
  if (!Number.isFinite(e)) return this.min;
103
- let t = Math.min(this.min, this.max), n = Math.max(this.min, this.max), r = c(e, t, n), i = Math.round((r - t) / this._safeStep);
104
- return Number((t + i * this._safeStep).toFixed(this._precision));
103
+ let t = Math.min(this.min, this.max), n = Math.max(this.min, this.max), r = c(e, t, n), i = Math.round((r - t) / this._safeStep), a = Number((t + i * this._safeStep).toFixed(this._precision));
104
+ return c(a, t, n);
105
105
  }
106
106
  get _precision() {
107
107
  return Math.max(this._decimalPlaces(this.min), this._decimalPlaces(this.max), this._decimalPlaces(this._safeStep));
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../../src/components/slider/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'\nimport { styleMap } from 'lit/directives/style-map.js'\n\nimport glass from '@/assets/glass.css?inline'\nimport { installPointerFocusSuppression } from '@/shared/focus/pointer-focus'\nimport { FormAssociated, defineFormAssociation, FormAssociationController } from '@/shared/form-association'\nimport { attachDragGesture, type DragGestureHandle } from '@/shared/gesture/drag-gesture'\nimport { clamp } from '@/shared/gesture/physics'\nimport { normalizeNumber } from '@/shared/normalize'\n\nimport style from './style.css?inline'\n\ninstallPointerFocusSuppression()\n\n@customElement('web-ui-slider')\nexport class WebUiSlider extends FormAssociated(LitElement) {\n static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n\n @property({ type: Boolean, reflect: true }) disabled = false\n @property({ type: Boolean, reflect: true }) marks = false\n @property({ type: Boolean, reflect: true }) vertical = false\n @property({ type: String, reflect: true }) name = ''\n @property({ type: Boolean, reflect: true }) required = false\n\n // value 使用访问器模式同步表单关联状态。\n private _value = 0\n @property({ type: Number, reflect: true })\n get value(): number {\n return this._value\n }\n set value(v: number) {\n const normalized = normalizeNumber(v, -Infinity, Infinity, 0)\n const old = this._value\n this._value = normalized\n this._formAssociation.sync()\n this.requestUpdate('value', old)\n }\n\n private _min = 0\n @property({ type: Number, reflect: true })\n get min(): number {\n return this._min\n }\n set min(v: number) {\n this._min = normalizeNumber(v, -Infinity, Infinity, 0)\n }\n\n private _max = 100\n @property({ type: Number, reflect: true })\n get max(): number {\n return this._max\n }\n set max(v: number) {\n this._max = normalizeNumber(v, -Infinity, Infinity, 100)\n }\n\n private _step = 1\n @property({ type: Number, reflect: true })\n get step(): number {\n return this._step\n }\n set step(v: number) {\n this._step = normalizeNumber(v, -Infinity, Infinity, 1)\n }\n\n @state() private _dragging = false\n @state() private _pressed = false\n // 避免未改变数值的点击被误认为一次表单提交\n private _interactionStartValue: number | undefined\n private _dragGestureHandle: DragGestureHandle | null = null\n\n override disconnectedCallback() {\n super.disconnectedCallback()\n this._dragGestureHandle?.destroy()\n this._dragGestureHandle = null\n }\n\n private readonly _formAssociation = defineFormAssociation<number>({\n host: this,\n initialize: () => {\n this._value = this._normalizeValue(this._value)\n },\n getState: () => this._value,\n setState: value => {\n this.value = value\n },\n getFormValue: () => String(this._value),\n getFormState: () => String(this._value),\n restoreState: state => {\n if (typeof state !== 'string') return\n const value = Number(state)\n if (Number.isFinite(value)) this.value = value\n },\n syncValidity: internals => {\n if (typeof internals.setValidity === 'function') internals.setValidity({})\n }\n }).make()\n\n private readonly _formAssociationController = new FormAssociationController(this, this._formAssociation)\n\n private get _isDisabled(): boolean {\n return this.disabled || this._formAssociation.isFormDisabled()\n }\n\n override willUpdate(changed: Map<string, unknown>) {\n if (changed.has('value') || changed.has('min') || changed.has('max') || changed.has('step')) {\n const normalizedValue = this._normalizeValue(this.value)\n if (normalizedValue !== this.value) this.value = normalizedValue\n }\n }\n\n override focus(options?: FocusOptions) {\n this._slider?.focus(options)\n }\n\n override blur() {\n this._slider?.blur()\n }\n\n private get _slider(): HTMLDivElement | null {\n return this.renderRoot.querySelector<HTMLDivElement>('[role=\"slider\"]')\n }\n\n private get _range(): number {\n return Math.max(0, this.max - this.min)\n }\n\n private get _percent(): number {\n return this._range === 0 ? 0 : ((this.value - this.min) / this._range) * 100\n }\n\n private get _markValues(): number[] {\n if (!this.marks || this._range === 0) return []\n const count = Math.min(100, Math.floor(this._range / this._safeStep))\n return Array.from({ length: count + 1 }, (_, index) => this.min + index * this._safeStep)\n }\n\n private get _safeStep(): number {\n return Number.isFinite(this.step) && this.step > 0 ? this.step : 1\n }\n\n private _normalizeValue(value: number): number {\n if (!Number.isFinite(value)) return this.min\n const lower = Math.min(this.min, this.max)\n const upper = Math.max(this.min, this.max)\n const clamped = clamp(value, lower, upper)\n const steps = Math.round((clamped - lower) / this._safeStep)\n return Number((lower + steps * this._safeStep).toFixed(this._precision))\n }\n\n private get _precision(): number {\n return Math.max(this._decimalPlaces(this.min), this._decimalPlaces(this.max), this._decimalPlaces(this._safeStep))\n }\n\n private _decimalPlaces(value: number): number {\n const [, decimal = ''] = String(value).split('.')\n return decimal.length\n }\n\n private _setValue(value: number): boolean {\n if (this._isDisabled) return false\n const nextValue = this._normalizeValue(value)\n if (nextValue === this.value) return false\n this.value = nextValue\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }))\n return true\n }\n\n private _setValueFromPointer(event: PointerEvent): boolean {\n const track = this._slider\n if (!track) return false\n const rect = track.getBoundingClientRect()\n if (this.vertical) {\n if (rect.height <= 0) return false\n // 视觉上的数值从下往上增长,与坐标系相反。\n const ratio = clamp(1 - (event.clientY - rect.top) / rect.height, 0, 1)\n return this._setValue(this.min + ratio * this._range)\n }\n if (rect.width <= 0) return false\n const ratio = clamp((event.clientX - rect.left) / rect.width, 0, 1)\n return this._setValue(this.min + ratio * this._range)\n }\n\n private _handlePointerDown(event: PointerEvent) {\n if (this._isDisabled) return\n this._pressed = true\n this._interactionStartValue = this.value\n this._setValueFromPointer(event)\n\n this._dragGestureHandle?.destroy()\n this._dragGestureHandle = attachDragGesture(event, {\n axis: this.vertical ? 'y' : 'x',\n threshold: 6,\n onMove: (_info, e) => {\n this._dragging = true\n this._setValueFromPointer(e)\n },\n onEnd: (_info, e) => {\n this._setValueFromPointer(e)\n this._pressed = false\n this._dragging = false\n if (this._interactionStartValue !== this.value) {\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n }\n this._interactionStartValue = undefined\n },\n onTap: () => {\n if (this._interactionStartValue !== this.value) {\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n }\n },\n onCancel: () => {\n this._pressed = false\n this._dragging = false\n this._interactionStartValue = undefined\n }\n })\n }\n\n private _handleKeyDown(event: KeyboardEvent) {\n if (this._isDisabled) return\n const pageStep = this._safeStep * 10\n const keyValues: Record<string, number> = {\n ArrowDown: this.value - this._safeStep,\n ArrowLeft: this.value - this._safeStep,\n ArrowUp: this.value + this._safeStep,\n ArrowRight: this.value + this._safeStep,\n PageDown: this.value - pageStep,\n PageUp: this.value + pageStep,\n Home: this.min,\n End: this.max\n }\n const nextValue = keyValues[event.key]\n if (nextValue === undefined) return\n event.preventDefault()\n if (this._setValue(nextValue)) this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n }\n\n override render() {\n const trackClass = classMap({\n 'wui-slider-track': true,\n 'is-dragging': this._dragging,\n 'is-disabled': this._isDisabled\n })\n const thumbClass = classMap({\n 'wui-slider-thumb': true,\n 'wui-glass': true,\n 'is-pressed': this._pressed,\n 'is-dragging': this._dragging\n })\n const trackStyle = styleMap({ '--percent': `${this._percent}%` })\n\n return html`\n <div\n class=${trackClass}\n style=${trackStyle}\n role=\"slider\"\n tabindex=${this._isDisabled ? '-1' : '0'}\n aria-label=\"滑块\"\n aria-orientation=${this.vertical ? 'vertical' : 'horizontal'}\n aria-valuemin=${this.min}\n aria-valuemax=${this.max}\n aria-valuenow=${this.value}\n aria-disabled=${String(this._isDisabled)}\n @keydown=${this._handleKeyDown}\n @pointerdown=${this._handlePointerDown}\n >\n <div class=\"wui-slider-progress\"></div>\n <div class=\"wui-slider-marks\">\n ${this._markValues.map(\n mark =>\n html`<span\n class=\"wui-slider-mark\"\n style=${styleMap({ '--percent': `${((mark - this.min) / this._range) * 100}%` })}\n ></span>`\n )}\n </div>\n <div class=${thumbClass}></div>\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-slider': WebUiSlider\n }\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../../src/components/slider/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'\nimport { styleMap } from 'lit/directives/style-map.js'\n\nimport glass from '@/assets/glass.css?inline'\nimport { installPointerFocusSuppression } from '@/shared/focus/pointer-focus'\nimport { FormAssociated, defineFormAssociation, FormAssociationController } from '@/shared/form-association'\nimport { attachDragGesture, type DragGestureHandle } from '@/shared/gesture/drag-gesture'\nimport { clamp } from '@/shared/gesture/physics'\nimport { normalizeNumber } from '@/shared/normalize'\n\nimport style from './style.css?inline'\n\ninstallPointerFocusSuppression()\n\n@customElement('web-ui-slider')\nexport class WebUiSlider extends FormAssociated(LitElement) {\n static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n\n @property({ type: Boolean, reflect: true }) disabled = false\n @property({ type: Boolean, reflect: true }) marks = false\n @property({ type: Boolean, reflect: true }) vertical = false\n @property({ type: String, reflect: true }) name = ''\n @property({ type: Boolean, reflect: true }) required = false\n\n // value 使用访问器模式同步表单关联状态。\n private _value = 0\n @property({ type: Number, reflect: true })\n get value(): number {\n return this._value\n }\n set value(v: number) {\n const normalized = normalizeNumber(v, -Infinity, Infinity, 0)\n const old = this._value\n this._value = normalized\n this._formAssociation.sync()\n this.requestUpdate('value', old)\n }\n\n private _min = 0\n @property({ type: Number, reflect: true })\n get min(): number {\n return this._min\n }\n set min(v: number) {\n this._min = normalizeNumber(v, -Infinity, Infinity, 0)\n }\n\n private _max = 100\n @property({ type: Number, reflect: true })\n get max(): number {\n return this._max\n }\n set max(v: number) {\n this._max = normalizeNumber(v, -Infinity, Infinity, 100)\n }\n\n private _step = 1\n @property({ type: Number, reflect: true })\n get step(): number {\n return this._step\n }\n set step(v: number) {\n this._step = normalizeNumber(v, -Infinity, Infinity, 1)\n }\n\n @state() private _dragging = false\n @state() private _pressed = false\n // 避免未改变数值的点击被误认为一次表单提交\n private _interactionStartValue: number | undefined\n private _dragGestureHandle: DragGestureHandle | null = null\n\n override disconnectedCallback() {\n super.disconnectedCallback()\n this._dragGestureHandle?.destroy()\n this._dragGestureHandle = null\n }\n\n private readonly _formAssociation = defineFormAssociation<number>({\n host: this,\n initialize: () => {\n this._value = this._normalizeValue(this._value)\n },\n getState: () => this._value,\n setState: value => {\n this.value = value\n },\n getFormValue: () => String(this._value),\n getFormState: () => String(this._value),\n restoreState: state => {\n if (typeof state !== 'string') return\n const value = Number(state)\n if (Number.isFinite(value)) this.value = value\n },\n syncValidity: internals => {\n if (typeof internals.setValidity === 'function') internals.setValidity({})\n }\n }).make()\n\n private readonly _formAssociationController = new FormAssociationController(this, this._formAssociation)\n\n private get _isDisabled(): boolean {\n return this.disabled || this._formAssociation.isFormDisabled()\n }\n\n override willUpdate(changed: Map<string, unknown>) {\n if (changed.has('value') || changed.has('min') || changed.has('max') || changed.has('step')) {\n const normalizedValue = this._normalizeValue(this.value)\n if (normalizedValue !== this.value) this.value = normalizedValue\n }\n }\n\n override focus(options?: FocusOptions) {\n this._slider?.focus(options)\n }\n\n override blur() {\n this._slider?.blur()\n }\n\n private get _slider(): HTMLDivElement | null {\n return this.renderRoot.querySelector<HTMLDivElement>('[role=\"slider\"]')\n }\n\n private get _range(): number {\n return Math.max(0, this.max - this.min)\n }\n\n private get _percent(): number {\n return this._range === 0 ? 0 : ((this.value - this.min) / this._range) * 100\n }\n\n private get _markValues(): number[] {\n if (!this.marks || this._range === 0) return []\n const count = Math.min(100, Math.floor(this._range / this._safeStep))\n return Array.from({ length: count + 1 }, (_, index) => this.min + index * this._safeStep)\n }\n\n private get _safeStep(): number {\n return Number.isFinite(this.step) && this.step > 0 ? this.step : 1\n }\n\n private _normalizeValue(value: number): number {\n if (!Number.isFinite(value)) return this.min\n const lower = Math.min(this.min, this.max)\n const upper = Math.max(this.min, this.max)\n const clamped = clamp(value, lower, upper)\n const steps = Math.round((clamped - lower) / this._safeStep)\n // 对齐到 step 网格后必须再收敛一次:`round` 会把值推到网格外侧\n // (max=100 / step=15 → 7 * 15 = 105),不收敛就会突破 max,\n // 连带 aria-valuenow 与 --percent 溢出轨道。\n const snapped = Number((lower + steps * this._safeStep).toFixed(this._precision))\n return clamp(snapped, lower, upper)\n }\n\n private get _precision(): number {\n return Math.max(this._decimalPlaces(this.min), this._decimalPlaces(this.max), this._decimalPlaces(this._safeStep))\n }\n\n private _decimalPlaces(value: number): number {\n const [, decimal = ''] = String(value).split('.')\n return decimal.length\n }\n\n private _setValue(value: number): boolean {\n if (this._isDisabled) return false\n const nextValue = this._normalizeValue(value)\n if (nextValue === this.value) return false\n this.value = nextValue\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }))\n return true\n }\n\n private _setValueFromPointer(event: PointerEvent): boolean {\n const track = this._slider\n if (!track) return false\n const rect = track.getBoundingClientRect()\n if (this.vertical) {\n if (rect.height <= 0) return false\n // 视觉上的数值从下往上增长,与坐标系相反。\n const ratio = clamp(1 - (event.clientY - rect.top) / rect.height, 0, 1)\n return this._setValue(this.min + ratio * this._range)\n }\n if (rect.width <= 0) return false\n const ratio = clamp((event.clientX - rect.left) / rect.width, 0, 1)\n return this._setValue(this.min + ratio * this._range)\n }\n\n private _handlePointerDown(event: PointerEvent) {\n if (this._isDisabled) return\n this._pressed = true\n this._interactionStartValue = this.value\n this._setValueFromPointer(event)\n\n this._dragGestureHandle?.destroy()\n this._dragGestureHandle = attachDragGesture(event, {\n axis: this.vertical ? 'y' : 'x',\n threshold: 6,\n onMove: (_info, e) => {\n this._dragging = true\n this._setValueFromPointer(e)\n },\n onEnd: (_info, e) => {\n this._setValueFromPointer(e)\n this._pressed = false\n this._dragging = false\n if (this._interactionStartValue !== this.value) {\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n }\n this._interactionStartValue = undefined\n },\n onTap: () => {\n if (this._interactionStartValue !== this.value) {\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n }\n },\n onCancel: () => {\n this._pressed = false\n this._dragging = false\n this._interactionStartValue = undefined\n }\n })\n }\n\n private _handleKeyDown(event: KeyboardEvent) {\n if (this._isDisabled) return\n const pageStep = this._safeStep * 10\n const keyValues: Record<string, number> = {\n ArrowDown: this.value - this._safeStep,\n ArrowLeft: this.value - this._safeStep,\n ArrowUp: this.value + this._safeStep,\n ArrowRight: this.value + this._safeStep,\n PageDown: this.value - pageStep,\n PageUp: this.value + pageStep,\n Home: this.min,\n End: this.max\n }\n const nextValue = keyValues[event.key]\n if (nextValue === undefined) return\n event.preventDefault()\n if (this._setValue(nextValue)) this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n }\n\n override render() {\n const trackClass = classMap({\n 'wui-slider-track': true,\n 'is-dragging': this._dragging,\n 'is-disabled': this._isDisabled\n })\n const thumbClass = classMap({\n 'wui-slider-thumb': true,\n 'wui-glass': true,\n 'is-pressed': this._pressed,\n 'is-dragging': this._dragging\n })\n const trackStyle = styleMap({ '--percent': `${this._percent}%` })\n\n return html`\n <div\n class=${trackClass}\n style=${trackStyle}\n role=\"slider\"\n tabindex=${this._isDisabled ? '-1' : '0'}\n aria-label=\"滑块\"\n aria-orientation=${this.vertical ? 'vertical' : 'horizontal'}\n aria-valuemin=${this.min}\n aria-valuemax=${this.max}\n aria-valuenow=${this.value}\n aria-disabled=${String(this._isDisabled)}\n @keydown=${this._handleKeyDown}\n @pointerdown=${this._handlePointerDown}\n >\n <div class=\"wui-slider-progress\"></div>\n <div class=\"wui-slider-marks\">\n ${this._markValues.map(\n mark =>\n html`<span\n class=\"wui-slider-mark\"\n style=${styleMap({ '--percent': `${((mark - this.min) / this._range) * 100}%` })}\n ></span>`\n )}\n </div>\n <div class=${thumbClass}></div>\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-slider': WebUiSlider\n }\n}\n"],"mappings":"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"}
@@ -388,6 +388,9 @@ export declare class WebUiSwitch extends WebUiSwitch_base {
388
388
  private readonly _formAssociationController;
389
389
  private _syncValidity;
390
390
  private handleClick;
391
+ private handleNativeChange;
392
+ private handleKeydown;
393
+ private _applyChecked;
391
394
  private handlePointerDown;
392
395
  private handlePointerUp;
393
396
  private handlePointerLeave;
@@ -54,19 +54,35 @@ var b = class extends i(f) {
54
54
  e && typeof e.setValidity == "function" && (this._isDisabled || !this.required || this._checked ? e.setValidity({}) : e.setValidity({ valueMissing: !0 }, "请启用此项"));
55
55
  }
56
56
  handleClick(e) {
57
- if (e.preventDefault(), this._dragged) {
58
- this._dragged = !1;
59
- return;
57
+ if (!(e.target instanceof HTMLInputElement)) {
58
+ if (e.preventDefault(), this._dragged) {
59
+ this._dragged = !1;
60
+ return;
61
+ }
62
+ this._isDisabled || this.loading || this._applyChecked(!this._checked);
60
63
  }
61
- if (this._isDisabled || this.loading) return;
62
- let t = this._checked;
63
- this._checked = !t, this._formAssociation.sync(), this.requestUpdate("checked", t), this.dispatchEvent(new Event("input", {
64
+ }
65
+ handleNativeChange(e) {
66
+ if (e.target instanceof HTMLInputElement) {
67
+ if (this._dragged) {
68
+ this._dragged = !1;
69
+ return;
70
+ }
71
+ this._applyChecked(e.target.checked, !1);
72
+ }
73
+ }
74
+ handleKeydown(e) {
75
+ e.key === "Enter" && (e.preventDefault(), !(this._isDisabled || this.loading) && this._applyChecked(!this._checked));
76
+ }
77
+ _applyChecked(e, t = !0) {
78
+ let n = this._checked;
79
+ e !== n && (this._checked = e, this._formAssociation.sync(), this.requestUpdate("checked", n), t && this.dispatchEvent(new Event("input", {
64
80
  bubbles: !0,
65
81
  composed: !0
66
82
  })), this.dispatchEvent(new Event("change", {
67
83
  bubbles: !0,
68
84
  composed: !0
69
- }));
85
+ })));
70
86
  }
71
87
  handlePointerDown(e) {
72
88
  if (this._isDisabled || this.loading) return;
@@ -141,6 +157,8 @@ var b = class extends i(f) {
141
157
  .checked=${this._checked}
142
158
  ?disabled=${this._isDisabled || this.loading}
143
159
  class="sr-only"
160
+ @change=${this.handleNativeChange}
161
+ @keydown=${this.handleKeydown}
144
162
  />
145
163
  <div class=${v(t)}>
146
164
  ${this.loading ? p`<div class="wui-switch-loading">
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../../src/components/switch/index.ts"],"sourcesContent":["import '@/components/icon'\n\nimport { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { styleMap } from 'lit/directives/style-map.js'\n\nimport glass from '@/assets/glass.css?inline'\nimport { lucideLoaderCircle } from '@/icons'\nimport { installPointerFocusSuppression } from '@/shared/focus/pointer-focus'\nimport { FormAssociated, defineFormAssociation, FormAssociationController } from '@/shared/form-association'\nimport { createFieldId } from '@/shared/form-association/field-id'\nimport { attachDragGesture, type DragGestureHandle } from '@/shared/gesture/drag-gesture'\nimport { clamp, normalizeProgress } from '@/shared/gesture/physics'\n\nimport style from './style.css?inline'\n\ninstallPointerFocusSuppression()\n\n@customElement('web-ui-switch')\nexport class WebUiSwitch extends FormAssociated(LitElement) {\n static override styles = [unsafeCSS(glass), unsafeCSS(style)]\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, reflect: true }) name = ''\n @property({ type: String }) value = ''\n @property({ type: Boolean, reflect: true }) disabled = false\n @property({ type: Boolean, reflect: true }) required = false\n @property({ type: Boolean, reflect: true }) loading = false\n @state() private _pressed = false\n @state() private _isDragging = false\n @state() private _dragOffset = 0\n @state() private _dragProgress = 0\n\n private _dragged = false\n private _maxTravel = 20\n private _startOffset = 0\n private _dragGestureHandle: DragGestureHandle | null = null\n private readonly _fieldId = createFieldId('web-ui-switch')\n\n override disconnectedCallback() {\n super.disconnectedCallback()\n this._dragGestureHandle?.destroy()\n this._dragGestureHandle = null\n }\n\n private get _isDisabled(): boolean {\n return this.disabled || this._formAssociation.isFormDisabled()\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._checked ? this.value || 'on' : null),\n getFormState: () => String(this._checked),\n restoreState: state => {\n if (typeof state === 'string') this.checked = state === 'true'\n },\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.required || this._checked) internals.setValidity({})\n else internals.setValidity({ valueMissing: true }, '请启用此项')\n }\n\n // 阻止 label 默认行为,避免原生 checkbox 重复触发点击。\n private handleClick(e: Event) {\n e.preventDefault()\n if (this._dragged) {\n this._dragged = false\n return\n }\n if (this._isDisabled || this.loading) return\n const old = this._checked\n this._checked = !old\n this._formAssociation.sync()\n this.requestUpdate('checked', old)\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }))\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n }\n\n private handlePointerDown(e: PointerEvent) {\n if (this._isDisabled || this.loading) return\n this._pressed = true\n\n const track = this.renderRoot.querySelector<HTMLElement>('.wui-switch-track')\n if (track) {\n const trackWidth = track.getBoundingClientRect().width || 40\n // 拖拽时 thumb 的 pressed 布局盒为 20px(scale(1.5) 视觉放大),因此行程按 20px 布局盒钳制;\n // 释放后的 checked 静止位移为 20px(16px thumb),两者由 transition 衔接。\n this._maxTravel = Math.max(1, trackWidth - 4 - 20)\n } else {\n this._maxTravel = 16\n }\n\n this._startOffset = this._checked ? this._maxTravel : 0\n this._dragOffset = this._startOffset\n this._dragProgress = this._checked ? 1 : 0\n\n this._dragGestureHandle?.destroy()\n this._dragGestureHandle = attachDragGesture(e, {\n axis: 'x',\n threshold: 6,\n onMove: info => {\n this._isDragging = true\n const current = clamp(this._startOffset + info.deltaX, 0, this._maxTravel)\n this._dragOffset = current\n this._dragProgress = normalizeProgress(current, 0, this._maxTravel)\n this.requestUpdate()\n },\n onEnd: info => {\n const wasDragging = this._isDragging\n this._isDragging = false\n this._pressed = false\n\n if (wasDragging) {\n this._dragged = true\n let targetChecked = this._checked\n if (info.velocityX > 300) {\n targetChecked = true\n } else if (info.velocityX < -300) {\n targetChecked = false\n } else {\n targetChecked = this._dragProgress >= 0.5\n }\n\n if (targetChecked !== this._checked) {\n const old = this._checked\n this._checked = targetChecked\n this._formAssociation.sync()\n this.requestUpdate('checked', old)\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }))\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n } else {\n this.requestUpdate()\n }\n }\n },\n onCancel: () => {\n this._isDragging = false\n this._pressed = false\n this.requestUpdate()\n }\n })\n }\n\n private handlePointerUp() {\n this._pressed = false\n }\n\n private handlePointerLeave() {\n if (!this._isDragging) {\n this._pressed = false\n }\n }\n\n override render() {\n const isOpen = this._isDragging ? this._dragProgress >= 0.5 : this._checked\n const trackCls = {\n 'wui-switch-track': true,\n 'is-open': isOpen,\n 'is-dragging': this._isDragging,\n 'is-disabled': this._isDisabled || this.loading\n }\n // wui-glass 条件化:静止态实体白 thumb,按压/拖拽时切换为玻璃(backdrop blur +\n // 无填充 + 描边)并放大,回到最初修复不跟手问题时期的视觉结构。\n const thumbCls = {\n 'wui-switch-thumb': true,\n 'wui-glass': this._pressed || this._isDragging,\n 'is-pressed': this._pressed || this._isDragging\n }\n const trackStyle = this._isDragging ? { '--wui-switch-drag-offset': `${this._dragOffset}px` } : {}\n\n return html`\n <label\n class=${classMap(trackCls)}\n style=${styleMap(trackStyle)}\n role=\"switch\"\n aria-checked=${String(this._checked)}\n @click=${this.handleClick}\n @pointerdown=${this.handlePointerDown}\n @pointerup=${this.handlePointerUp}\n @pointercancel=${this.handlePointerUp}\n @pointerleave=${this.handlePointerLeave}\n >\n <input\n id=${this._fieldId}\n type=\"checkbox\"\n .checked=${this._checked}\n ?disabled=${this._isDisabled || this.loading}\n class=\"sr-only\"\n />\n <div class=${classMap(thumbCls)}>\n ${\n this.loading\n ? html`<div class=\"wui-switch-loading\">\n <web-ui-icon .icon=${lucideLoaderCircle} size=\"14\" color=\"#08f\" spin></web-ui-icon>\n </div>`\n : ''\n }\n </div>\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-switch': WebUiSwitch\n }\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../../src/components/switch/index.ts"],"sourcesContent":["import '@/components/icon'\n\nimport { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { styleMap } from 'lit/directives/style-map.js'\n\nimport glass from '@/assets/glass.css?inline'\nimport { lucideLoaderCircle } from '@/icons'\nimport { installPointerFocusSuppression } from '@/shared/focus/pointer-focus'\nimport { FormAssociated, defineFormAssociation, FormAssociationController } from '@/shared/form-association'\nimport { createFieldId } from '@/shared/form-association/field-id'\nimport { attachDragGesture, type DragGestureHandle } from '@/shared/gesture/drag-gesture'\nimport { clamp, normalizeProgress } from '@/shared/gesture/physics'\n\nimport style from './style.css?inline'\n\ninstallPointerFocusSuppression()\n\n@customElement('web-ui-switch')\nexport class WebUiSwitch extends FormAssociated(LitElement) {\n static override styles = [unsafeCSS(glass), unsafeCSS(style)]\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, reflect: true }) name = ''\n @property({ type: String }) value = ''\n @property({ type: Boolean, reflect: true }) disabled = false\n @property({ type: Boolean, reflect: true }) required = false\n @property({ type: Boolean, reflect: true }) loading = false\n @state() private _pressed = false\n @state() private _isDragging = false\n @state() private _dragOffset = 0\n @state() private _dragProgress = 0\n\n private _dragged = false\n private _maxTravel = 20\n private _startOffset = 0\n private _dragGestureHandle: DragGestureHandle | null = null\n private readonly _fieldId = createFieldId('web-ui-switch')\n\n override disconnectedCallback() {\n super.disconnectedCallback()\n this._dragGestureHandle?.destroy()\n this._dragGestureHandle = null\n }\n\n private get _isDisabled(): boolean {\n return this.disabled || this._formAssociation.isFormDisabled()\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._checked ? this.value || 'on' : null),\n getFormState: () => String(this._checked),\n restoreState: state => {\n if (typeof state === 'string') this.checked = state === 'true'\n },\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.required || this._checked) internals.setValidity({})\n else internals.setValidity({ valueMissing: true }, '请启用此项')\n }\n\n // 阻止 label 默认行为,避免原生 checkbox 重复触发点击。\n // 但内层 input 自己触发的 click(空格/辅助技术的原生激活)必须放行:\n // 它已经完成勾选,再 preventDefault 会把原生激活撤销,造成\n // 「宿主 checked=true、内层 checkbox=false」的分裂。\n private handleClick(e: Event) {\n if (e.target instanceof HTMLInputElement) return\n e.preventDefault()\n if (this._dragged) {\n this._dragged = false\n return\n }\n if (this._isDisabled || this.loading) return\n this._applyChecked(!this._checked)\n }\n\n // 原生激活(空格、辅助技术)已完成勾选,这里只把状态同步过来。\n // 原生 input 事件本身是 composed,已经冒泡到宿主,不能再补一个;\n // 原生 change 不是 composed,过不了 shadow 边界,需要由组件转发。\n private handleNativeChange(e: Event) {\n if (!(e.target instanceof HTMLInputElement)) return\n if (this._dragged) {\n this._dragged = false\n return\n }\n this._applyChecked(e.target.checked, false)\n }\n\n // 原生 checkbox 不响应 Enter,补上 role=\"switch\" 应有的开合语义\n private handleKeydown(e: KeyboardEvent) {\n if (e.key !== 'Enter') return\n e.preventDefault()\n if (this._isDisabled || this.loading) return\n this._applyChecked(!this._checked)\n }\n\n private _applyChecked(next: boolean, emitInput = true) {\n const old = this._checked\n if (next === old) return\n this._checked = next\n this._formAssociation.sync()\n this.requestUpdate('checked', old)\n if (emitInput) this.dispatchEvent(new Event('input', { bubbles: true, composed: true }))\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n }\n\n private handlePointerDown(e: PointerEvent) {\n if (this._isDisabled || this.loading) return\n this._pressed = true\n\n const track = this.renderRoot.querySelector<HTMLElement>('.wui-switch-track')\n if (track) {\n const trackWidth = track.getBoundingClientRect().width || 40\n // 拖拽时 thumb 的 pressed 布局盒为 20px(scale(1.5) 视觉放大),因此行程按 20px 布局盒钳制;\n // 释放后的 checked 静止位移为 20px(16px thumb),两者由 transition 衔接。\n this._maxTravel = Math.max(1, trackWidth - 4 - 20)\n } else {\n this._maxTravel = 16\n }\n\n this._startOffset = this._checked ? this._maxTravel : 0\n this._dragOffset = this._startOffset\n this._dragProgress = this._checked ? 1 : 0\n\n this._dragGestureHandle?.destroy()\n this._dragGestureHandle = attachDragGesture(e, {\n axis: 'x',\n threshold: 6,\n onMove: info => {\n this._isDragging = true\n const current = clamp(this._startOffset + info.deltaX, 0, this._maxTravel)\n this._dragOffset = current\n this._dragProgress = normalizeProgress(current, 0, this._maxTravel)\n this.requestUpdate()\n },\n onEnd: info => {\n const wasDragging = this._isDragging\n this._isDragging = false\n this._pressed = false\n\n if (wasDragging) {\n this._dragged = true\n let targetChecked = this._checked\n if (info.velocityX > 300) {\n targetChecked = true\n } else if (info.velocityX < -300) {\n targetChecked = false\n } else {\n targetChecked = this._dragProgress >= 0.5\n }\n\n if (targetChecked !== this._checked) {\n const old = this._checked\n this._checked = targetChecked\n this._formAssociation.sync()\n this.requestUpdate('checked', old)\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }))\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n } else {\n this.requestUpdate()\n }\n }\n },\n onCancel: () => {\n this._isDragging = false\n this._pressed = false\n this.requestUpdate()\n }\n })\n }\n\n private handlePointerUp() {\n this._pressed = false\n }\n\n private handlePointerLeave() {\n if (!this._isDragging) {\n this._pressed = false\n }\n }\n\n override render() {\n const isOpen = this._isDragging ? this._dragProgress >= 0.5 : this._checked\n const trackCls = {\n 'wui-switch-track': true,\n 'is-open': isOpen,\n 'is-dragging': this._isDragging,\n 'is-disabled': this._isDisabled || this.loading\n }\n // wui-glass 条件化:静止态实体白 thumb,按压/拖拽时切换为玻璃(backdrop blur +\n // 无填充 + 描边)并放大,回到最初修复不跟手问题时期的视觉结构。\n const thumbCls = {\n 'wui-switch-thumb': true,\n 'wui-glass': this._pressed || this._isDragging,\n 'is-pressed': this._pressed || this._isDragging\n }\n const trackStyle = this._isDragging ? { '--wui-switch-drag-offset': `${this._dragOffset}px` } : {}\n\n return html`\n <label\n class=${classMap(trackCls)}\n style=${styleMap(trackStyle)}\n role=\"switch\"\n aria-checked=${String(this._checked)}\n @click=${this.handleClick}\n @pointerdown=${this.handlePointerDown}\n @pointerup=${this.handlePointerUp}\n @pointercancel=${this.handlePointerUp}\n @pointerleave=${this.handlePointerLeave}\n >\n <input\n id=${this._fieldId}\n type=\"checkbox\"\n .checked=${this._checked}\n ?disabled=${this._isDisabled || this.loading}\n class=\"sr-only\"\n @change=${this.handleNativeChange}\n @keydown=${this.handleKeydown}\n />\n <div class=${classMap(thumbCls)}>\n ${\n this.loading\n ? html`<div class=\"wui-switch-loading\">\n <web-ui-icon .icon=${lucideLoaderCircle} size=\"14\" color=\"#08f\" spin></web-ui-icon>\n </div>`\n : ''\n }\n </div>\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-switch': WebUiSwitch\n }\n}\n"],"mappings":"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"}
@@ -100,7 +100,11 @@ function h(t) {
100
100
  handleChange(e) {
101
101
  if (t.getDisabled() || !t.isItem(e.target) || !t.host.contains(e.target)) return;
102
102
  let n = t.getValue(), r = t.getNextValue(e.target, n);
103
- t.valuesEqual(n, r) || (t.setValue(r), t.dispatchValueChange());
103
+ if (t.valuesEqual(n, r)) {
104
+ t.resyncOnUnchangedValue?.(e.target);
105
+ return;
106
+ }
107
+ t.setValue(r), t.dispatchValueChange();
104
108
  }
105
109
  };
106
110
  });
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../../src/shared/group-management/index.ts"],"sourcesContent":["import { definePlugin } from '@greypan/js-kit'\nimport { ContextConsumer, ContextProvider, createContext, type Context } from '@lit/context'\nimport type { ReactiveController, ReactiveControllerHost } from 'lit'\n\n/*\n * 下行通道基于 @lit/context(ADR-0032):root 上的 ContextProvider 以\n * `ReadonlyMap<HTMLElement, Context>` 为载荷向全子树广播,子项侧\n * ContextConsumer 订阅并按自身元素取条目。context-request 事件 composed,\n * 可穿过中间 shadow 边界;custom element 升级顺序保证祖先先于后代升级,\n * provider 总是先于子项请求就绪。成员追踪(querySelectorAll +\n * MutationObserver/slotchange)、点击归因与 setItemSelected 上行写回\n * 不在下行通道内,仍由 GroupController 驱动。\n */\n\nexport interface SelectionGroupContext {\n readonly disabled: boolean\n}\n\nexport interface ButtonGroupContext {\n readonly direction: 'horizontal' | 'vertical'\n readonly isLast: boolean\n}\n\n// 载荷类型仅编译期品牌化;按载荷形状分两个 key,避免异构树串扰。\n// createContext 泛型顺序为 <ValueType, K>。\nconst SELECTION_GROUP_CONTEXT = createContext<ReadonlyMap<HTMLElement, SelectionGroupContext>, symbol>(\n Symbol('web-ui.selection-group-context')\n)\n\nconst BUTTON_GROUP_CONTEXT = createContext<ReadonlyMap<HTMLElement, ButtonGroupContext>, symbol>(\n Symbol('web-ui.button-group-context')\n)\n\n// 两个 key 的运行时形状一致(Map 载荷),泛型插件内部统一按宽松类型驱动。\ntype AnyGroupContext = Context<symbol, ReadonlyMap<HTMLElement, unknown>>\n\nconst SELECTION_GROUP_CONTEXT_LOOSE = SELECTION_GROUP_CONTEXT as unknown as AnyGroupContext\nconst BUTTON_GROUP_CONTEXT_LOOSE = BUTTON_GROUP_CONTEXT as unknown as AnyGroupContext\n\nexport const selectionGroupContextKey: AnyGroupContext = SELECTION_GROUP_CONTEXT_LOOSE\nexport const buttonGroupContextKey: AnyGroupContext = BUTTON_GROUP_CONTEXT_LOOSE\n\ninterface GroupControllerHost extends HTMLElement, ReactiveControllerHost {\n readonly renderRoot: Element | DocumentFragment\n}\n\n/**\n * 创建受管理 group 的子项侧能力:订阅最近 provider 的 context 载荷并提取\n * 自身条目。在 `make()` 时完成注册,组件无需再编写 constructor 样板。\n */\nexport function defineGroupManaged<Context>(\n item: HTMLElement & ReactiveControllerHost,\n options: {\n /** 与所属根组件使用的 context key 一致。 */\n context: AnyGroupContext\n requestUpdate: () => void\n equals?: (a: Context | undefined, b: Context | undefined) => boolean\n }\n) {\n return definePlugin(() => {\n let context: Context | undefined\n const equals = options.equals ?? Object.is\n\n const consumer = new ContextConsumer(item, {\n context: options.context,\n subscribe: true,\n callback: payload => {\n const next = (payload as ReadonlyMap<HTMLElement, Context> | undefined)?.get(item)\n if (equals(context, next)) return\n context = next\n options.requestUpdate()\n }\n })\n\n /*\n * 离开 group(被移出 provider 子树)时 ContextConsumer 只是静默退订,\n * 不会收到「条目已移除」的通知:显式清空上下文,恢复独立控件语义\n * (如 checkbox 恢复自身表单提交)。跨组移动先断连清空、再重连订阅新组。\n */\n item.addController({\n hostDisconnected() {\n if (equals(context, undefined)) return\n context = undefined\n options.requestUpdate()\n }\n })\n\n return {\n getContext(): Context | undefined {\n return context\n },\n // 供测试或特殊场景确认订阅状态。\n isSubscribed(): boolean {\n return consumer.value !== undefined\n }\n }\n })\n}\n\nexport interface GroupPresentationOptions<Item extends HTMLElement, Context> {\n readonly host: HTMLElement\n /** 与子项 defineGroupManaged 使用的 context key 一致。 */\n readonly context: AnyGroupContext\n readonly getItems: () => readonly Item[]\n readonly getContext: (item: Item, index: number, items: readonly Item[]) => Context\n}\n\n/**\n * 为分组子项注册可逆的展示上下文(@lit/context 下行通道)。不持有公开 DOM\n * 属性;sync() 以新 Map 载荷整体广播,成员变化体现为子项条目消失。\n */\nexport function defineGroupPresentation<Item extends HTMLElement, Context>(\n options: GroupPresentationOptions<Item, Context>\n) {\n return definePlugin(() => {\n const provider = new ContextProvider(options.host, {\n context: options.context,\n initialValue: new Map<HTMLElement, unknown>()\n })\n\n return {\n sync(): boolean {\n const nextItems = options.getItems()\n const payload = new Map<HTMLElement, unknown>()\n nextItems.forEach((item, index) => payload.set(item, options.getContext(item, index, nextItems)))\n // 新 Map 实例保证 Object.is 判定为变更,全量通知订阅者。\n // 每次 hostUpdated 都重播(即使成员/方向未变)是有意形态:每次新建\n // context 对象,但子项 defineGroupManaged 的 equals 门控 requestUpdate\n // (标量字段比较),重播不产生多余渲染;代价是比「仅成员变化才通知」\n // 更频繁的广播事件,换取零状态追踪的简单性(与 GroupController 的\n // 全量 sync 对齐)。\n provider.setValue(payload)\n return true\n },\n disconnect() {\n provider.setValue(new Map())\n }\n }\n })\n}\n\nexport interface GroupLifecycle {\n sync(): boolean\n disconnect(): void\n handleChange?(event: Event): void\n}\n\ninterface GroupControllerOptions {\n afterSync?: () => void\n}\n\n/**\n * 把组生命周期插件接入 Lit,协调规则不落在组件生命周期方法里。\n */\nexport class GroupController implements ReactiveController {\n private connected = false\n private observer: MutationObserver | null = null\n private observedSlots = new Set<HTMLSlotElement>()\n constructor(\n private readonly host: GroupControllerHost,\n private readonly lifecycle: GroupLifecycle,\n private readonly options: GroupControllerOptions = {}\n ) {\n host.addController(this)\n }\n\n hostConnected() {\n this.connected = true\n this.host.addEventListener('change', this.handleChange, true)\n this.observeHost()\n this.observeSlots()\n this.sync()\n }\n\n hostUpdated() {\n this.observeSlots()\n this.sync()\n }\n\n hostDisconnected() {\n this.connected = false\n this.host.removeEventListener('change', this.handleChange, true)\n this.disconnectSlots()\n this.disconnectHostObserver()\n this.lifecycle.disconnect()\n }\n\n private readonly handleChange = (event: Event) => {\n this.lifecycle.handleChange?.(event)\n }\n\n private readonly handleSlotChange = () => {\n if (!this.connected) return\n this.sync()\n }\n\n private readonly handleMutations = () => {\n if (!this.connected) return\n this.sync()\n }\n\n sync() {\n if (!this.lifecycle.sync()) return\n this.options.afterSync?.()\n }\n\n private observeHost() {\n this.disconnectHostObserver()\n // 监听 light DOM 的增删,覆盖 Vue v-if / React && 的 comment 锚点替换与深层包裹\n this.observer = new MutationObserver(this.handleMutations)\n this.observer.observe(this.host, { childList: true, subtree: true })\n }\n\n private disconnectHostObserver() {\n if (this.observer) {\n this.observer.disconnect()\n this.observer = null\n }\n }\n\n private observeSlots() {\n const root = this.host.renderRoot as Element\n const slots = root.querySelectorAll<HTMLSlotElement>('slot')\n for (const slot of slots) {\n if (!this.observedSlots.has(slot)) {\n slot.addEventListener('slotchange', this.handleSlotChange)\n this.observedSlots.add(slot)\n }\n }\n // 清理已移除的 slot(热更新等场景)\n for (const slot of this.observedSlots) {\n if (!root.contains(slot)) {\n slot.removeEventListener('slotchange', this.handleSlotChange)\n this.observedSlots.delete(slot)\n }\n }\n }\n\n private disconnectSlots() {\n for (const slot of this.observedSlots) {\n slot.removeEventListener('slotchange', this.handleSlotChange)\n }\n this.observedSlots.clear()\n }\n}\n\nexport interface GroupCoordinatorOptions<Item extends HTMLElement, Value> {\n readonly host: HTMLElement\n readonly getItems: () => readonly Item[]\n readonly getValue: () => Value\n readonly setValue: (value: Value) => void\n readonly getDisabled: () => boolean\n readonly isItem: (target: EventTarget | null) => target is Item\n readonly isItemSelected: (item: Item, value: Value) => boolean\n readonly getNextValue: (item: Item, value: Value) => Value\n readonly valuesEqual: (a: Value, b: Value) => boolean\n readonly copyValue: (value: Value) => Value\n readonly setItemSelected: (item: Item, selected: boolean) => void\n readonly dispatchValueChange: () => void\n}\n\nconst ENABLED_SELECTION_CONTEXT: SelectionGroupContext = { disabled: false }\nconst DISABLED_SELECTION_CONTEXT: SelectionGroupContext = { disabled: true }\n\n/**\n * 在一个内部插件接口后收敛选中态、继承禁用与受管子项成员关系。\n * 禁用态经 @lit/context 下行广播;选中态上行写回保持直写。\n */\nexport function defineGroupCoordinator<Item extends HTMLElement, Value>(options: GroupCoordinatorOptions<Item, Value>) {\n return definePlugin(() => {\n const provider = new ContextProvider(options.host, {\n context: SELECTION_GROUP_CONTEXT_LOOSE,\n initialValue: new Map<HTMLElement, SelectionGroupContext>()\n })\n\n let lastValue: Value | undefined\n let lastDisabled: boolean | undefined\n let lastItems = new Set<Item>()\n let initialized = false\n\n const sync = (): boolean => {\n const nextItems = options.getItems()\n const value = options.getValue()\n const disabled = options.getDisabled()\n // 成员变化也要重放选中写回:新成员需继承当前选中态。\n const membershipChanged = nextItems.length !== lastItems.size || [...nextItems].some(item => !lastItems.has(item))\n const selectionChanged =\n !initialized ||\n !options.valuesEqual(value, lastValue as Value) ||\n disabled !== lastDisabled ||\n membershipChanged\n\n // 上行选中写回:根写入子项(context 是纯下行,不承担该方向)。\n if (selectionChanged) {\n for (const item of nextItems) {\n options.setItemSelected(item, options.isItemSelected(item, value))\n }\n }\n\n // 禁用下行:每次 sync 以新 Map 载荷整体广播(成员增删与禁用变化一并覆盖,\n // 新 Map 实例保证 Object.is 判定为变更)。\n provider.setValue(\n new Map(\n nextItems.map(item => [\n item as HTMLElement,\n disabled ? DISABLED_SELECTION_CONTEXT : ENABLED_SELECTION_CONTEXT\n ])\n )\n )\n\n lastItems = new Set(nextItems)\n lastValue = options.copyValue(value)\n lastDisabled = disabled\n initialized = true\n return selectionChanged\n }\n\n return {\n sync,\n disconnect() {\n provider.setValue(new Map())\n lastItems.clear()\n lastValue = undefined\n lastDisabled = undefined\n initialized = false\n },\n handleChange(event: Event) {\n if (options.getDisabled() || !options.isItem(event.target) || !options.host.contains(event.target)) {\n return\n }\n\n const current = options.getValue()\n const next = options.getNextValue(event.target, current)\n if (options.valuesEqual(current, next)) return\n\n options.setValue(next)\n options.dispatchValueChange()\n }\n }\n })\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../../src/shared/group-management/index.ts"],"sourcesContent":["import { definePlugin } from '@greypan/js-kit'\nimport { ContextConsumer, ContextProvider, createContext, type Context } from '@lit/context'\nimport type { ReactiveController, ReactiveControllerHost } from 'lit'\n\n/*\n * 下行通道基于 @lit/context(ADR-0032):root 上的 ContextProvider 以\n * `ReadonlyMap<HTMLElement, Context>` 为载荷向全子树广播,子项侧\n * ContextConsumer 订阅并按自身元素取条目。context-request 事件 composed,\n * 可穿过中间 shadow 边界;custom element 升级顺序保证祖先先于后代升级,\n * provider 总是先于子项请求就绪。成员追踪(querySelectorAll +\n * MutationObserver/slotchange)、点击归因与 setItemSelected 上行写回\n * 不在下行通道内,仍由 GroupController 驱动。\n */\n\nexport interface SelectionGroupContext {\n readonly disabled: boolean\n}\n\nexport interface ButtonGroupContext {\n readonly direction: 'horizontal' | 'vertical'\n readonly isLast: boolean\n}\n\n// 载荷类型仅编译期品牌化;按载荷形状分两个 key,避免异构树串扰。\n// createContext 泛型顺序为 <ValueType, K>。\nconst SELECTION_GROUP_CONTEXT = createContext<ReadonlyMap<HTMLElement, SelectionGroupContext>, symbol>(\n Symbol('web-ui.selection-group-context')\n)\n\nconst BUTTON_GROUP_CONTEXT = createContext<ReadonlyMap<HTMLElement, ButtonGroupContext>, symbol>(\n Symbol('web-ui.button-group-context')\n)\n\n// 两个 key 的运行时形状一致(Map 载荷),泛型插件内部统一按宽松类型驱动。\ntype AnyGroupContext = Context<symbol, ReadonlyMap<HTMLElement, unknown>>\n\nconst SELECTION_GROUP_CONTEXT_LOOSE = SELECTION_GROUP_CONTEXT as unknown as AnyGroupContext\nconst BUTTON_GROUP_CONTEXT_LOOSE = BUTTON_GROUP_CONTEXT as unknown as AnyGroupContext\n\nexport const selectionGroupContextKey: AnyGroupContext = SELECTION_GROUP_CONTEXT_LOOSE\nexport const buttonGroupContextKey: AnyGroupContext = BUTTON_GROUP_CONTEXT_LOOSE\n\ninterface GroupControllerHost extends HTMLElement, ReactiveControllerHost {\n readonly renderRoot: Element | DocumentFragment\n}\n\n/**\n * 创建受管理 group 的子项侧能力:订阅最近 provider 的 context 载荷并提取\n * 自身条目。在 `make()` 时完成注册,组件无需再编写 constructor 样板。\n */\nexport function defineGroupManaged<Context>(\n item: HTMLElement & ReactiveControllerHost,\n options: {\n /** 与所属根组件使用的 context key 一致。 */\n context: AnyGroupContext\n requestUpdate: () => void\n equals?: (a: Context | undefined, b: Context | undefined) => boolean\n }\n) {\n return definePlugin(() => {\n let context: Context | undefined\n const equals = options.equals ?? Object.is\n\n const consumer = new ContextConsumer(item, {\n context: options.context,\n subscribe: true,\n callback: payload => {\n const next = (payload as ReadonlyMap<HTMLElement, Context> | undefined)?.get(item)\n if (equals(context, next)) return\n context = next\n options.requestUpdate()\n }\n })\n\n /*\n * 离开 group(被移出 provider 子树)时 ContextConsumer 只是静默退订,\n * 不会收到「条目已移除」的通知:显式清空上下文,恢复独立控件语义\n * (如 checkbox 恢复自身表单提交)。跨组移动先断连清空、再重连订阅新组。\n */\n item.addController({\n hostDisconnected() {\n if (equals(context, undefined)) return\n context = undefined\n options.requestUpdate()\n }\n })\n\n return {\n getContext(): Context | undefined {\n return context\n },\n // 供测试或特殊场景确认订阅状态。\n isSubscribed(): boolean {\n return consumer.value !== undefined\n }\n }\n })\n}\n\nexport interface GroupPresentationOptions<Item extends HTMLElement, Context> {\n readonly host: HTMLElement\n /** 与子项 defineGroupManaged 使用的 context key 一致。 */\n readonly context: AnyGroupContext\n readonly getItems: () => readonly Item[]\n readonly getContext: (item: Item, index: number, items: readonly Item[]) => Context\n}\n\n/**\n * 为分组子项注册可逆的展示上下文(@lit/context 下行通道)。不持有公开 DOM\n * 属性;sync() 以新 Map 载荷整体广播,成员变化体现为子项条目消失。\n */\nexport function defineGroupPresentation<Item extends HTMLElement, Context>(\n options: GroupPresentationOptions<Item, Context>\n) {\n return definePlugin(() => {\n const provider = new ContextProvider(options.host, {\n context: options.context,\n initialValue: new Map<HTMLElement, unknown>()\n })\n\n return {\n sync(): boolean {\n const nextItems = options.getItems()\n const payload = new Map<HTMLElement, unknown>()\n nextItems.forEach((item, index) => payload.set(item, options.getContext(item, index, nextItems)))\n // 新 Map 实例保证 Object.is 判定为变更,全量通知订阅者。\n // 每次 hostUpdated 都重播(即使成员/方向未变)是有意形态:每次新建\n // context 对象,但子项 defineGroupManaged 的 equals 门控 requestUpdate\n // (标量字段比较),重播不产生多余渲染;代价是比「仅成员变化才通知」\n // 更频繁的广播事件,换取零状态追踪的简单性(与 GroupController 的\n // 全量 sync 对齐)。\n provider.setValue(payload)\n return true\n },\n disconnect() {\n provider.setValue(new Map())\n }\n }\n })\n}\n\nexport interface GroupLifecycle {\n sync(): boolean\n disconnect(): void\n handleChange?(event: Event): void\n}\n\ninterface GroupControllerOptions {\n afterSync?: () => void\n}\n\n/**\n * 把组生命周期插件接入 Lit,协调规则不落在组件生命周期方法里。\n */\nexport class GroupController implements ReactiveController {\n private connected = false\n private observer: MutationObserver | null = null\n private observedSlots = new Set<HTMLSlotElement>()\n constructor(\n private readonly host: GroupControllerHost,\n private readonly lifecycle: GroupLifecycle,\n private readonly options: GroupControllerOptions = {}\n ) {\n host.addController(this)\n }\n\n hostConnected() {\n this.connected = true\n this.host.addEventListener('change', this.handleChange, true)\n this.observeHost()\n this.observeSlots()\n this.sync()\n }\n\n hostUpdated() {\n this.observeSlots()\n this.sync()\n }\n\n hostDisconnected() {\n this.connected = false\n this.host.removeEventListener('change', this.handleChange, true)\n this.disconnectSlots()\n this.disconnectHostObserver()\n this.lifecycle.disconnect()\n }\n\n private readonly handleChange = (event: Event) => {\n this.lifecycle.handleChange?.(event)\n }\n\n private readonly handleSlotChange = () => {\n if (!this.connected) return\n this.sync()\n }\n\n private readonly handleMutations = () => {\n if (!this.connected) return\n this.sync()\n }\n\n sync() {\n if (!this.lifecycle.sync()) return\n this.options.afterSync?.()\n }\n\n private observeHost() {\n this.disconnectHostObserver()\n // 监听 light DOM 的增删,覆盖 Vue v-if / React && 的 comment 锚点替换与深层包裹\n this.observer = new MutationObserver(this.handleMutations)\n this.observer.observe(this.host, { childList: true, subtree: true })\n }\n\n private disconnectHostObserver() {\n if (this.observer) {\n this.observer.disconnect()\n this.observer = null\n }\n }\n\n private observeSlots() {\n const root = this.host.renderRoot as Element\n const slots = root.querySelectorAll<HTMLSlotElement>('slot')\n for (const slot of slots) {\n if (!this.observedSlots.has(slot)) {\n slot.addEventListener('slotchange', this.handleSlotChange)\n this.observedSlots.add(slot)\n }\n }\n // 清理已移除的 slot(热更新等场景)\n for (const slot of this.observedSlots) {\n if (!root.contains(slot)) {\n slot.removeEventListener('slotchange', this.handleSlotChange)\n this.observedSlots.delete(slot)\n }\n }\n }\n\n private disconnectSlots() {\n for (const slot of this.observedSlots) {\n slot.removeEventListener('slotchange', this.handleSlotChange)\n }\n this.observedSlots.clear()\n }\n}\n\nexport interface GroupCoordinatorOptions<Item extends HTMLElement, Value> {\n readonly host: HTMLElement\n readonly getItems: () => readonly Item[]\n readonly getValue: () => Value\n readonly setValue: (value: Value) => void\n readonly getDisabled: () => boolean\n readonly isItem: (target: EventTarget | null) => target is Item\n readonly isItemSelected: (item: Item, value: Value) => boolean\n readonly getNextValue: (item: Item, value: Value) => Value\n readonly valuesEqual: (a: Value, b: Value) => boolean\n readonly copyValue: (value: Value) => Value\n readonly setItemSelected: (item: Item, selected: boolean) => void\n readonly dispatchValueChange: () => void\n /**\n * 交互已发生但值没有变化时的回调(例如单选组成员 value 重复:点击同值成员\n * 不会改变 value,却必须把选中态收到被点击的那一项)。缺省视为无事可做。\n */\n readonly resyncOnUnchangedValue?: (item: Item) => void\n}\n\nconst ENABLED_SELECTION_CONTEXT: SelectionGroupContext = { disabled: false }\nconst DISABLED_SELECTION_CONTEXT: SelectionGroupContext = { disabled: true }\n\n/**\n * 在一个内部插件接口后收敛选中态、继承禁用与受管子项成员关系。\n * 禁用态经 @lit/context 下行广播;选中态上行写回保持直写。\n */\nexport function defineGroupCoordinator<Item extends HTMLElement, Value>(options: GroupCoordinatorOptions<Item, Value>) {\n return definePlugin(() => {\n const provider = new ContextProvider(options.host, {\n context: SELECTION_GROUP_CONTEXT_LOOSE,\n initialValue: new Map<HTMLElement, SelectionGroupContext>()\n })\n\n let lastValue: Value | undefined\n let lastDisabled: boolean | undefined\n let lastItems = new Set<Item>()\n let initialized = false\n\n const sync = (): boolean => {\n const nextItems = options.getItems()\n const value = options.getValue()\n const disabled = options.getDisabled()\n // 成员变化也要重放选中写回:新成员需继承当前选中态。\n const membershipChanged = nextItems.length !== lastItems.size || [...nextItems].some(item => !lastItems.has(item))\n const selectionChanged =\n !initialized ||\n !options.valuesEqual(value, lastValue as Value) ||\n disabled !== lastDisabled ||\n membershipChanged\n\n // 上行选中写回:根写入子项(context 是纯下行,不承担该方向)。\n if (selectionChanged) {\n for (const item of nextItems) {\n options.setItemSelected(item, options.isItemSelected(item, value))\n }\n }\n\n // 禁用下行:每次 sync 以新 Map 载荷整体广播(成员增删与禁用变化一并覆盖,\n // 新 Map 实例保证 Object.is 判定为变更)。\n provider.setValue(\n new Map(\n nextItems.map(item => [\n item as HTMLElement,\n disabled ? DISABLED_SELECTION_CONTEXT : ENABLED_SELECTION_CONTEXT\n ])\n )\n )\n\n lastItems = new Set(nextItems)\n lastValue = options.copyValue(value)\n lastDisabled = disabled\n initialized = true\n return selectionChanged\n }\n\n return {\n sync,\n disconnect() {\n provider.setValue(new Map())\n lastItems.clear()\n lastValue = undefined\n lastDisabled = undefined\n initialized = false\n },\n handleChange(event: Event) {\n if (options.getDisabled() || !options.isItem(event.target) || !options.host.contains(event.target)) {\n return\n }\n\n const current = options.getValue()\n const next = options.getNextValue(event.target, current)\n if (options.valuesEqual(current, next)) {\n options.resyncOnUnchangedValue?.(event.target)\n return\n }\n\n options.setValue(next)\n options.dispatchValueChange()\n }\n }\n })\n}\n"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@greypan/web-ui",
3
- "version": "10.2.0",
3
+ "version": "10.2.1",
4
4
  "description": "Lit-based web components for React, Vue, and vanilla JS",
5
5
  "license": "MIT",
6
6
  "repository": {