@greypan/web-ui 10.0.0 → 10.1.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.
Files changed (64) hide show
  1. package/README.CN.md +39 -1
  2. package/README.md +43 -1
  3. package/dist/components/autocomplete/index.js +62 -60
  4. package/dist/components/autocomplete/index.js.map +1 -1
  5. package/dist/components/avatar/index.js +5 -5
  6. package/dist/components/avatar/index.js.map +1 -1
  7. package/dist/components/back-top/index.js.map +1 -1
  8. package/dist/components/badge/index.js +5 -5
  9. package/dist/components/button/index.js +5 -5
  10. package/dist/components/button/index.js.map +1 -1
  11. package/dist/components/checkbox/index.js.map +1 -1
  12. package/dist/components/collapse/index.js +1 -1
  13. package/dist/components/collapse/index.js.map +1 -1
  14. package/dist/components/collapse/style.js +1 -1
  15. package/dist/components/collapse/style.js.map +1 -1
  16. package/dist/components/context-menu/index.d.ts +16 -0
  17. package/dist/components/context-menu/index.js +71 -66
  18. package/dist/components/context-menu/index.js.map +1 -1
  19. package/dist/components/dialog/index.js +39 -37
  20. package/dist/components/dialog/index.js.map +1 -1
  21. package/dist/components/drawer/index.js +64 -62
  22. package/dist/components/drawer/index.js.map +1 -1
  23. package/dist/components/dropdown-item/index.js.map +1 -1
  24. package/dist/components/editable-text/index.js +4 -4
  25. package/dist/components/empty/index.js.map +1 -1
  26. package/dist/components/empty/style.js +1 -1
  27. package/dist/components/empty/style.js.map +1 -1
  28. package/dist/components/image-preview/index.js.map +1 -1
  29. package/dist/components/input/index.js +5 -5
  30. package/dist/components/input/index.js.map +1 -1
  31. package/dist/components/input-number/index.js.map +1 -1
  32. package/dist/components/layout/index.js.map +1 -1
  33. package/dist/components/option/index.js.map +1 -1
  34. package/dist/components/segmented/index.js +17 -7
  35. package/dist/components/segmented/index.js.map +1 -1
  36. package/dist/components/select/index.js +45 -43
  37. package/dist/components/select/index.js.map +1 -1
  38. package/dist/components/switch/index.js.map +1 -1
  39. package/dist/components/textarea/index.js +8 -8
  40. package/dist/components/textarea/index.js.map +1 -1
  41. package/dist/components/toast/manager.js +1 -1
  42. package/dist/components/toast/manager.js.map +1 -1
  43. package/dist/components/toast/toast.js.map +1 -1
  44. package/dist/scrollbars/index.js.map +1 -1
  45. package/dist/scrollbars/internal.js +6 -0
  46. package/dist/scrollbars/internal.js.map +1 -0
  47. package/dist/scrollbars/style.css +1 -1
  48. package/dist/shared/menu-portal/menu-portal.js +16 -14
  49. package/dist/shared/menu-portal/menu-portal.js.map +1 -1
  50. package/dist/shared/overlay/overlay-root.js +13 -12
  51. package/dist/shared/overlay/overlay-root.js.map +1 -1
  52. package/dist/shared/overlay/overlay.js +33 -33
  53. package/dist/vite/index.d.ts +28 -0
  54. package/dist/vite/index.js +16 -0
  55. package/dist/vite/index.js.map +1 -0
  56. package/package.json +5 -1
  57. package/dist/node_modules/.pnpm/@floating-ui_core@1.8.0/node_modules/@floating-ui/core/dist/floating-ui.core.js +0 -246
  58. package/dist/node_modules/.pnpm/@floating-ui_core@1.8.0/node_modules/@floating-ui/core/dist/floating-ui.core.js.map +0 -1
  59. package/dist/node_modules/.pnpm/@floating-ui_dom@1.8.0/node_modules/@floating-ui/dom/dist/floating-ui.dom.js +0 -324
  60. package/dist/node_modules/.pnpm/@floating-ui_dom@1.8.0/node_modules/@floating-ui/dom/dist/floating-ui.dom.js.map +0 -1
  61. package/dist/node_modules/.pnpm/@floating-ui_utils@0.2.12/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.js +0 -100
  62. package/dist/node_modules/.pnpm/@floating-ui_utils@0.2.12/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.js.map +0 -1
  63. package/dist/node_modules/.pnpm/@floating-ui_utils@0.2.12/node_modules/@floating-ui/utils/dist/floating-ui.utils.js +0 -102
  64. package/dist/node_modules/.pnpm/@floating-ui_utils@0.2.12/node_modules/@floating-ui/utils/dist/floating-ui.utils.js.map +0 -1
@@ -8,8 +8,8 @@ import { createFieldId as s } from "../../shared/form-association/field-id.js";
8
8
  import c from "./style.js";
9
9
  import { LitElement as l, html as u, nothing as d, unsafeCSS as f } from "lit";
10
10
  import { customElement as p, property as m, state as h } from "lit/decorators.js";
11
- import { ifDefined as g } from "lit/directives/if-defined.js";
12
- import { classMap as _ } from "lit/directives/class-map.js";
11
+ import { classMap as g } from "lit/directives/class-map.js";
12
+ import { ifDefined as _ } from "lit/directives/if-defined.js";
13
13
  import { styleMap as v } from "lit/directives/style-map.js";
14
14
  //#region src/components/textarea/index.ts
15
15
  var y = class extends r(l) {
@@ -125,16 +125,16 @@ var y = class extends r(l) {
125
125
  let e = this.clearable && this._value && !this.readonly;
126
126
  return u`
127
127
  <div class="wui-glass wui-textarea-inner" @click=${this.focusTextarea}>
128
- <slot name="prefix" class=${_({ empty: !this._hasPrefix })} @slotchange=${this._onSlotChange}></slot>
128
+ <slot name="prefix" class=${g({ empty: !this._hasPrefix })} @slotchange=${this._onSlotChange}></slot>
129
129
  <textarea
130
130
  id=${this._fieldId}
131
131
  placeholder=${this.placeholder}
132
132
  name=${this.name}
133
- aria-label=${g(this.ariaLabel)}
134
- aria-labelledby=${g(this.ariaLabelledby)}
133
+ aria-label=${_(this.ariaLabel)}
134
+ aria-labelledby=${_(this.ariaLabelledby)}
135
135
  .rows=${this.rows}
136
- minlength=${g(this.minlength)}
137
- maxlength=${g(this.maxlength)}
136
+ minlength=${_(this.minlength)}
137
+ maxlength=${_(this.maxlength)}
138
138
  ?disabled=${this._isDisabled}
139
139
  ?readonly=${this.readonly}
140
140
  ?required=${this.required}
@@ -155,7 +155,7 @@ var y = class extends r(l) {
155
155
  >
156
156
  <web-ui-icon .icon=${n} size="14"></web-ui-icon>
157
157
  </web-ui-button>` : ""}
158
- <slot name="suffix" class=${_({ empty: !this._hasSuffix })} @slotchange=${this._onSlotChange}></slot>
158
+ <slot name="suffix" class=${g({ empty: !this._hasSuffix })} @slotchange=${this._onSlotChange}></slot>
159
159
  </div>
160
160
  `;
161
161
  }
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../../src/components/textarea/index.ts"],"sourcesContent":["import { html, LitElement, nothing, 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'\nimport { styleMap } from 'lit/directives/style-map.js'\n\nimport '@/components/icon'\nimport '@/components/button'\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-textarea')\nexport class WebUiTextarea 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: Boolean, reflect: true }) full = false\n @property({ type: Boolean, reflect: true }) clearable = false\n @property({ type: Boolean, reflect: true }) borderless = false\n @property({ type: Number, reflect: true }) rows = 3\n @property({ type: Number, reflect: true }) minlength: number | undefined\n @property({ type: Number, reflect: true }) maxlength: number | undefined\n @property({ type: Boolean, reflect: true }) autosize = false\n // 自动高度上限(px);0 表示不限制,随内容无限增高\n @property({ type: Number, reflect: true, attribute: 'max-height' }) maxHeight = 0\n @property({ type: String, attribute: 'aria-label' }) override ariaLabel: string | null = null\n @property({ type: String, attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined\n\n @state() private _value = ''\n @state() private _focused = false\n @state() private _hasPrefix = false\n @state() private _hasSuffix = false\n\n private _textarea: HTMLTextAreaElement | null = null\n private _resizeObserver: ResizeObserver | null = null\n private readonly _fieldId = createFieldId('web-ui-textarea')\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 disconnectedCallback() {\n super.disconnectedCallback()\n this._teardownAutosize()\n }\n\n override firstUpdated() {\n this._textarea = this.shadowRoot?.querySelector('textarea') ?? null\n }\n\n override updated(changed: Map<string, unknown>) {\n if (changed.has('_value')) {\n const textarea = this._getTextarea()\n if (textarea && textarea.value !== this._value) {\n textarea.value = this._value\n }\n }\n /*\n * 高度只在这里算,autosize 的两条改值路径(用户输入、外部改写)都汇到\n * changed.has('_value'),不必各自调一次。\n *\n * 不能等 ResizeObserver:autosize 把高度写成内联 px,换值时盒子尺寸没变,\n * 不会触发回调,于是旧高度会一直留着(例如同一个 textarea 随抽屉切换资源,\n * 从长备注切到短备注仍占着长备注的高度)。\n *\n * rows 同理:它决定 height:auto 时的自然高度,但 inline px 会盖掉它,\n * 改 rows 不会让盒子尺寸变化,ResizeObserver 同样看不到。\n *\n * 上面的 textarea.value 兜底在正常路径上是 no-op——render() 里的 .value 绑定\n * 已经先一步把新值写进 DOM 了;它留给 binding 未生效的场景。\n */\n if (this.autosize && (changed.has('_value') || changed.has('rows'))) this._autosize()\n if (changed.has('autosize')) {\n if (this.autosize) {\n this._setupAutosize()\n } else {\n this._teardownAutosize(true)\n }\n }\n this._syncValidity()\n this.toggleAttribute('focused', this._focused)\n }\n\n private _getTextarea(): HTMLTextAreaElement | null {\n this._textarea ??= this.shadowRoot?.querySelector('textarea') ?? null\n return this._textarea\n }\n\n private _syncValidity() {\n const internals = this._formAssociation.getInternals()\n const textarea = this._getTextarea()\n if (!internals || !textarea || typeof internals.setValidity !== 'function') return\n\n forwardInputValidity(internals, textarea, ['valueMissing', 'tooShort', 'tooLong'], this._isDisabled)\n }\n\n private _setupAutosize() {\n this._teardownAutosize()\n if (typeof ResizeObserver === 'undefined') {\n this._autosize()\n return\n }\n this._resizeObserver = new ResizeObserver(() => {\n this._autosize()\n })\n if (this._textarea) this._resizeObserver.observe(this._textarea)\n this._autosize()\n }\n\n private _teardownAutosize(resetHeight = false) {\n this._resizeObserver?.disconnect()\n this._resizeObserver = null\n if (resetHeight) this._textarea?.style.removeProperty('height')\n }\n\n private _autosize() {\n if (!this._textarea || !this.autosize) return\n this._textarea.style.height = 'auto'\n // height:auto 时 rows 已驱动自然高,scrollHeight 恒 ≥ rows 行高,无需额外 floor;\n // 上限由 CSS max-height(maxHeight 属性)钳制,这里只负责随内容增高,默认无限\n this._textarea.style.height = `${this._textarea.scrollHeight}px`\n }\n\n private handleInput(e: Event) {\n if (this._isDisabled || this.readonly) return\n if (!(e.target instanceof HTMLTextAreaElement)) return\n this._value = e.target.value\n this._formAssociation.sync()\n this._syncValidity()\n }\n\n private handleFocus() {\n if (!this._isDisabled) this._focused = true\n }\n\n private handleBlur() {\n this._focused = false\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 HTMLTextAreaElement)) return\n this._value = e.target.value\n this._formAssociation.sync()\n this._syncValidity()\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n }\n\n override focus(options?: FocusOptions) {\n if (this._isDisabled) return\n this.shadowRoot?.querySelector('textarea')?.focus(options)\n }\n\n override blur() {\n this.shadowRoot?.querySelector('textarea')?.blur()\n }\n\n /**\n * 公共 API:全选当前值。\n *\n * `disabled` 时与 `focus()` 一致不产生效果;原生控件未渲染时安全 no-op。\n */\n select() {\n if (this._isDisabled) return\n this.shadowRoot?.querySelector('textarea')?.select()\n }\n\n private focusTextarea() {\n if (this._isDisabled) return\n this.shadowRoot?.querySelector('textarea')?.focus()\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 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 override render() {\n // readonly 下不可清除:清空按钮会修改值,与只读语义冲突\n const showClear = this.clearable && this._value && !this.readonly\n\n return html`\n <div class=\"wui-glass wui-textarea-inner\" @click=${this.focusTextarea}>\n <slot name=\"prefix\" class=${classMap({ empty: !this._hasPrefix })} @slotchange=${this._onSlotChange}></slot>\n <textarea\n id=${this._fieldId}\n placeholder=${this.placeholder}\n name=${this.name}\n aria-label=${ifDefined(this.ariaLabel)}\n aria-labelledby=${ifDefined(this.ariaLabelledby)}\n .rows=${this.rows}\n minlength=${ifDefined(this.minlength)}\n maxlength=${ifDefined(this.maxlength)}\n ?disabled=${this._isDisabled}\n ?readonly=${this.readonly}\n ?required=${this.required}\n .value=${this._value}\n style=${this.maxHeight > 0 ? styleMap({ 'max-height': `${this.maxHeight}px` }) : nothing}\n @input=${this.handleInput}\n @change=${this.handleNativeChange}\n @focus=${this.handleFocus}\n @blur=${this.handleBlur}\n ></textarea>\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-textarea': WebUiTextarea\n }\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../../src/components/textarea/index.ts"],"sourcesContent":["import '@/components/button'\nimport '@/components/icon'\n\nimport { html, LitElement, nothing, 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'\nimport { styleMap } from 'lit/directives/style-map.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-textarea')\nexport class WebUiTextarea 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: Boolean, reflect: true }) full = false\n @property({ type: Boolean, reflect: true }) clearable = false\n @property({ type: Boolean, reflect: true }) borderless = false\n @property({ type: Number, reflect: true }) rows = 3\n @property({ type: Number, reflect: true }) minlength: number | undefined\n @property({ type: Number, reflect: true }) maxlength: number | undefined\n @property({ type: Boolean, reflect: true }) autosize = false\n // 自动高度上限(px);0 表示不限制,随内容无限增高\n @property({ type: Number, reflect: true, attribute: 'max-height' }) maxHeight = 0\n @property({ type: String, attribute: 'aria-label' }) override ariaLabel: string | null = null\n @property({ type: String, attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined\n\n @state() private _value = ''\n @state() private _focused = false\n @state() private _hasPrefix = false\n @state() private _hasSuffix = false\n\n private _textarea: HTMLTextAreaElement | null = null\n private _resizeObserver: ResizeObserver | null = null\n private readonly _fieldId = createFieldId('web-ui-textarea')\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 disconnectedCallback() {\n super.disconnectedCallback()\n this._teardownAutosize()\n }\n\n override firstUpdated() {\n this._textarea = this.shadowRoot?.querySelector('textarea') ?? null\n }\n\n override updated(changed: Map<string, unknown>) {\n if (changed.has('_value')) {\n const textarea = this._getTextarea()\n if (textarea && textarea.value !== this._value) {\n textarea.value = this._value\n }\n }\n /*\n * 高度只在这里算,autosize 的两条改值路径(用户输入、外部改写)都汇到\n * changed.has('_value'),不必各自调一次。\n *\n * 不能等 ResizeObserver:autosize 把高度写成内联 px,换值时盒子尺寸没变,\n * 不会触发回调,于是旧高度会一直留着(例如同一个 textarea 随抽屉切换资源,\n * 从长备注切到短备注仍占着长备注的高度)。\n *\n * rows 同理:它决定 height:auto 时的自然高度,但 inline px 会盖掉它,\n * 改 rows 不会让盒子尺寸变化,ResizeObserver 同样看不到。\n *\n * 上面的 textarea.value 兜底在正常路径上是 no-op——render() 里的 .value 绑定\n * 已经先一步把新值写进 DOM 了;它留给 binding 未生效的场景。\n */\n if (this.autosize && (changed.has('_value') || changed.has('rows'))) this._autosize()\n if (changed.has('autosize')) {\n if (this.autosize) {\n this._setupAutosize()\n } else {\n this._teardownAutosize(true)\n }\n }\n this._syncValidity()\n this.toggleAttribute('focused', this._focused)\n }\n\n private _getTextarea(): HTMLTextAreaElement | null {\n this._textarea ??= this.shadowRoot?.querySelector('textarea') ?? null\n return this._textarea\n }\n\n private _syncValidity() {\n const internals = this._formAssociation.getInternals()\n const textarea = this._getTextarea()\n if (!internals || !textarea || typeof internals.setValidity !== 'function') return\n\n forwardInputValidity(internals, textarea, ['valueMissing', 'tooShort', 'tooLong'], this._isDisabled)\n }\n\n private _setupAutosize() {\n this._teardownAutosize()\n if (typeof ResizeObserver === 'undefined') {\n this._autosize()\n return\n }\n this._resizeObserver = new ResizeObserver(() => {\n this._autosize()\n })\n if (this._textarea) this._resizeObserver.observe(this._textarea)\n this._autosize()\n }\n\n private _teardownAutosize(resetHeight = false) {\n this._resizeObserver?.disconnect()\n this._resizeObserver = null\n if (resetHeight) this._textarea?.style.removeProperty('height')\n }\n\n private _autosize() {\n if (!this._textarea || !this.autosize) return\n this._textarea.style.height = 'auto'\n // height:auto 时 rows 已驱动自然高,scrollHeight 恒 ≥ rows 行高,无需额外 floor;\n // 上限由 CSS max-height(maxHeight 属性)钳制,这里只负责随内容增高,默认无限\n this._textarea.style.height = `${this._textarea.scrollHeight}px`\n }\n\n private handleInput(e: Event) {\n if (this._isDisabled || this.readonly) return\n if (!(e.target instanceof HTMLTextAreaElement)) return\n this._value = e.target.value\n this._formAssociation.sync()\n this._syncValidity()\n }\n\n private handleFocus() {\n if (!this._isDisabled) this._focused = true\n }\n\n private handleBlur() {\n this._focused = false\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 HTMLTextAreaElement)) return\n this._value = e.target.value\n this._formAssociation.sync()\n this._syncValidity()\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n }\n\n override focus(options?: FocusOptions) {\n if (this._isDisabled) return\n this.shadowRoot?.querySelector('textarea')?.focus(options)\n }\n\n override blur() {\n this.shadowRoot?.querySelector('textarea')?.blur()\n }\n\n /**\n * 公共 API:全选当前值。\n *\n * `disabled` 时与 `focus()` 一致不产生效果;原生控件未渲染时安全 no-op。\n */\n select() {\n if (this._isDisabled) return\n this.shadowRoot?.querySelector('textarea')?.select()\n }\n\n private focusTextarea() {\n if (this._isDisabled) return\n this.shadowRoot?.querySelector('textarea')?.focus()\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 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 override render() {\n // readonly 下不可清除:清空按钮会修改值,与只读语义冲突\n const showClear = this.clearable && this._value && !this.readonly\n\n return html`\n <div class=\"wui-glass wui-textarea-inner\" @click=${this.focusTextarea}>\n <slot name=\"prefix\" class=${classMap({ empty: !this._hasPrefix })} @slotchange=${this._onSlotChange}></slot>\n <textarea\n id=${this._fieldId}\n placeholder=${this.placeholder}\n name=${this.name}\n aria-label=${ifDefined(this.ariaLabel)}\n aria-labelledby=${ifDefined(this.ariaLabelledby)}\n .rows=${this.rows}\n minlength=${ifDefined(this.minlength)}\n maxlength=${ifDefined(this.maxlength)}\n ?disabled=${this._isDisabled}\n ?readonly=${this.readonly}\n ?required=${this.required}\n .value=${this._value}\n style=${this.maxHeight > 0 ? styleMap({ 'max-height': `${this.maxHeight}px` }) : nothing}\n @input=${this.handleInput}\n @change=${this.handleNativeChange}\n @focus=${this.handleFocus}\n @blur=${this.handleBlur}\n ></textarea>\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-textarea': WebUiTextarea\n }\n}\n"],"mappings":"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"}
@@ -13,7 +13,7 @@ function u(e, t) {
13
13
  let n = Array.from(t.children).find((t) => t instanceof HTMLElement && t.dataset.wuiToastPosition === e);
14
14
  if (n) return n;
15
15
  let r = document.createElement("div");
16
- return r.className = `wui-toast-container wui-toast-${e}`, r.dataset.wuiToastPosition = e, r.setAttribute("role", "log"), r.setAttribute("aria-live", "polite"), r.setAttribute("aria-relevant", "additions"), t.appendChild(r), i.add(r), r.addEventListener("pointerenter", () => r.dataset.hovered = "true"), r.addEventListener("pointerleave", () => {
16
+ return r.className = `wui-toast-container wui-toast-${e} wui-scroll`, r.dataset.wuiToastPosition = e, r.setAttribute("role", "log"), r.setAttribute("aria-live", "polite"), r.setAttribute("aria-relevant", "additions"), t.appendChild(r), i.add(r), r.addEventListener("pointerenter", () => r.dataset.hovered = "true"), r.addEventListener("pointerleave", () => {
17
17
  delete r.dataset.hovered, f(r);
18
18
  }), r;
19
19
  }
@@ -1 +1 @@
1
- {"version":3,"file":"manager.js","names":[],"sources":["../../../src/components/toast/manager.ts"],"sourcesContent":["import { getFallbackOverlayRoot } from '@/shared/overlay/overlay-root'\nimport { findNearestTheme, findRootTheme } from '@/shared/overlay/theme-overlay-scope'\n\nimport type { WebUiToast } from './toast'\nimport type { ToastInstanceOptions, ToastOptions, ToastPosition } from './types'\n\nlet toastIdCounter = 0\n\nconst toastContainers = new Set<HTMLElement>()\nconst visibleToasts = new Map<string, WebUiToast>()\n\nlet pendingBatch: Array<{ id: string; options: ToastInstanceOptions; root: HTMLElement }> | undefined\nlet isBatchScheduled = false\n\ntype ToastShortcutOptions = Omit<ToastOptions, 'message' | 'type'> & Pick<ToastInstanceOptions, 'position'>\n\n// moveBefore 尚未进入 Baseline,DOM lib 未必声明;按能力探测调用,缺失时走降级分支。\ntype MaybeMoveBefore = HTMLElement & { moveBefore?: (node: Node, child: Node | null) => void }\n\nfunction generateId(): string {\n return `toast-${++toastIdCounter}`\n}\n\nfunction resolveRoot(options: ToastInstanceOptions): HTMLElement {\n const targetTheme = options.target ? findNearestTheme(options.target) : findRootTheme()\n return options.container ?? targetTheme?.getOverlayRoot() ?? getFallbackOverlayRoot()\n}\n\nfunction ensureContainer(position: ToastPosition, root: HTMLElement): HTMLElement {\n const existing = Array.from(root.children).find(\n (child): child is HTMLElement => child instanceof HTMLElement && child.dataset.wuiToastPosition === position\n )\n if (existing) return existing\n\n const container = document.createElement('div')\n container.className = `wui-toast-container wui-toast-${position}`\n container.dataset.wuiToastPosition = position\n container.setAttribute('role', 'log')\n container.setAttribute('aria-live', 'polite')\n container.setAttribute('aria-relevant', 'additions')\n root.appendChild(container)\n toastContainers.add(container)\n\n container.addEventListener('pointerenter', () => (container.dataset.hovered = 'true'))\n container.addEventListener('pointerleave', () => {\n delete container.dataset.hovered\n scrollToBottom(container)\n })\n return container\n}\n\nfunction pruneContainer(container: HTMLElement | null) {\n if (!container || container.children.length > 0) return\n container.remove()\n toastContainers.delete(container)\n}\n\nfunction scrollToBottom(container: HTMLElement) {\n if (container.dataset.hovered === 'true') return\n requestAnimationFrame(() => {\n container.scrollTop = container.scrollHeight\n })\n}\n\nfunction scheduleBatchFlush() {\n if (isBatchScheduled) return\n isBatchScheduled = true\n void Promise.resolve().then(flushBatch)\n}\n\nfunction flushBatch() {\n isBatchScheduled = false\n const batch = pendingBatch\n pendingBatch = undefined\n if (!batch) return\n\n const containersToScroll = new Set<HTMLElement>()\n for (const item of batch) {\n // 容器在挂载时才解析:待挂载条目被 patch 改了 position 也能落到正确容器。\n const container = ensureContainer(item.options.position || 'top-right', item.root)\n mountToast(item.id, item.options, container)\n containersToScroll.add(container)\n }\n for (const container of containersToScroll) scrollToBottom(container)\n}\n\n/**\n * 命令式 API 的 upsert 语义:指定同一个 id 的多次调用收敛到同一条 toast。\n * 给出的字段覆盖,未给出的保持原值;`container` 与 `target` 以首次为准,换 overlay root 牵连更广。\n */\nfunction mergePatch(base: ToastInstanceOptions, patch: ToastInstanceOptions): ToastInstanceOptions {\n return {\n ...base,\n message: patch.message ?? base.message,\n heading: patch.heading ?? base.heading,\n type: patch.type ?? base.type,\n duration: patch.duration ?? base.duration,\n closable: patch.closable ?? base.closable,\n position: patch.position ?? base.position,\n container: base.container,\n target: base.target\n }\n}\n\nfunction applyPatch(el: WebUiToast, options: ToastInstanceOptions) {\n if (options.message !== undefined) el.message = options.message\n if (options.heading !== undefined) el.heading = options.heading\n if (options.type !== undefined) el.type = options.type\n if (options.closable !== undefined) el.noCloseButton = options.closable === false\n // duration 只有显式传入才重启计时;message/heading/type 都是 Lit 属性,赋值不碰 _closeTimer。\n // 悬停暂停期间交给元素自己裁决:setDuration() 只记新值不点火,否则鼠标还压在 toast 上\n // 时倒计时就被重启,「悬停暂停」在这条路径上会静默失效。\n if (options.duration !== undefined) el.setDuration(options.duration)\n if (options.position !== undefined && options.position !== el.position) relocateToast(el, options.position)\n}\n\nfunction relocateToast(el: WebUiToast, position: ToastPosition) {\n const prev = el.parentElement\n const root = prev?.parentElement\n if (!root) return\n const next = ensureContainer(position, root)\n\n const movable = next as MaybeMoveBefore\n if (typeof movable.moveBefore === 'function') {\n // 不摘出节点,disconnected/connected 都不触发:计时、焦点与动画状态原样保留。\n movable.moveBefore(el, null)\n } else {\n el.pauseAutoClose()\n next.appendChild(el)\n el.resumeAutoClose()\n }\n\n el.position = position\n pruneContainer(prev)\n scrollToBottom(next)\n}\n\nfunction createToast(options: ToastInstanceOptions): string {\n const id = options.id || generateId()\n\n const mounted = visibleToasts.get(id)\n if (mounted) {\n /*\n * 「已挂载但 show() 还没跑」的窗口(mountToast 之后、rAF 里的 show() 之前)仍复用同一条元素;\n * 正在退场、或被宿主摘出 DOM 的元素则不再接受更新。后者的补丁只会落在一条即将(或已经)\n * 离开文档的元素上:调用方拿到同一个 id,却没有任何可见通知,`relocateToast` 也会因\n * 找不到 root 而静默吞掉 position。因此摘掉映射、改走新建路径。\n * 退场元素仍在 DOM 里,由它自己延迟派发的 `toast-close` 收尾(按元素身份解绑,见 removeToastElement)。\n */\n if (mounted.isConnected && !mounted.dismissing) {\n applyPatch(mounted, options)\n return id\n }\n visibleToasts.delete(id)\n }\n\n const pending = pendingBatch?.find(item => item.id === id)\n if (pending) {\n pending.options = mergePatch(pending.options, options)\n return id\n }\n\n if (!pendingBatch) pendingBatch = []\n pendingBatch.push({ id, options, root: resolveRoot(options) })\n scheduleBatchFlush()\n return id\n}\n\nfunction mountToast(id: string, options: ToastInstanceOptions, container: HTMLElement) {\n const el = document.createElement('web-ui-toast')\n const type = options.type || 'info'\n el.toastId = id\n el.type = type\n el.position = options.position || 'top-right'\n el.heading = options.heading || ''\n el.message = options.message\n // error 的 5000 只在挂载时兜底,不写进 options:写进去 applyPatch 就会把它当成「显式传入\n // duration」而每次 upsert 都重启倒计时,与「duration 只有显式传入才重启」的契约冲突。\n el.duration = options.duration ?? (type === 'error' ? 5000 : 3000)\n el.noCloseButton = options.closable === false\n\n el.addEventListener('toast-close', () => removeToastElement(el))\n\n container.appendChild(el)\n visibleToasts.set(id, el)\n requestAnimationFrame(() => {\n // close()/clear() 可能已经在这段窗口里收走了它(见 dismiss 的无退场动画分支):\n // 不再入场,否则一条孤儿元素会在 duration 之后补派一次同 id 的 toast-close。\n if (el.dismissing) return\n el.show()\n })\n}\n\n/**\n * 按元素身份解绑并移除。退场中的旧元素会在稍后派发 `toast-close`,而此刻同 id 可能已经有\n * 新元素(退场窗口内的 upsert 会新建一条);若按 `detail.id` 删映射,就会把刚建好的那条\n * 一起删掉 —— 与「孤儿元素收不走」是同一类缺陷,只是换了个入口。\n */\nfunction removeToastElement(el: WebUiToast) {\n if (visibleToasts.get(el.toastId) === el) visibleToasts.delete(el.toastId)\n const container = el.parentElement\n el.remove()\n pruneContainer(container)\n}\n\n/**\n * id 不在 Map 里时仍要清掉同 id 的残留节点:早先的按 id 删除路径在这里直接 return,\n * 重复挂载留下的孤儿 toast 因此连自关闭、close() 和 clear() 都收不走,会永久留在\n * role=\"log\" 容器里。强删不派发 `toast-close`,但对不可从管理器触达的元素来说没有消费方状态可言。\n */\nfunction removeStray(id: string) {\n for (const container of toastContainers) {\n for (const child of Array.from(container.children)) {\n if (child.tagName !== 'WEB-UI-TOAST') continue\n if ((child as Partial<WebUiToast>).toastId === id) child.remove()\n }\n }\n for (const container of Array.from(toastContainers)) pruneContainer(container)\n}\n\n/**\n * 关闭一个 id 时,「还没开始显示」的两种状态都要能取消,否则 close() 会静默失效:\n *\n * - 同 tick 仍在 `pendingBatch` 里:还不是 DOM 元素,`removeStray` 扫不到 —— 出队即取消挂载。\n * - 已 `flushBatch`、rAF 里的 `show()` 未跑:元素在映射里但 `visible` 仍是 false,\n * `dismiss()` 现在对这段窗口立即派发(无退场动画可播),由 toast-close 监听摘除。\n *\n * 已在退场的元素不必也不该再动:它自己延迟派发的 toast-close 会收尾,重复 close 不改变结果。\n */\nfunction close(id: string) {\n const queued = pendingBatch\n if (queued) {\n const index = queued.findIndex(item => item.id === id)\n if (index >= 0) {\n queued.splice(index, 1)\n return\n }\n }\n\n const el = visibleToasts.get(id)\n if (el) {\n el.dismiss('programmatic')\n return\n }\n removeStray(id)\n}\n\n/**\n * 队列条目与已挂载元素一起取消。二者都会在同一个微任务内落地,只遍历已挂载元素会让\n * 「clear() 之后仍冒出一条」成为唯一的例外 —— 与 close() 的可用范围对齐。\n */\nfunction clear() {\n pendingBatch = undefined\n for (const el of visibleToasts.values()) el.dismiss('clear')\n}\n\nfunction toast(options: ToastInstanceOptions): string {\n return createToast(options)\n}\n\ntoast.success = (message: string, options?: ToastShortcutOptions) =>\n createToast({ ...options, message, type: 'success' })\ntoast.info = (message: string, options?: ToastShortcutOptions) => createToast({ ...options, message, type: 'info' })\ntoast.warning = (message: string, options?: ToastShortcutOptions) =>\n createToast({ ...options, message, type: 'warning' })\n// 不注入 duration:error 的 5000 默认值在 mountToast 兜底,否则 upsert 每次都判定为\n// 「显式传入 duration」而重启倒计时(success/info/warning 都没有这个不对称)。\ntoast.error = (message: string, options?: ToastShortcutOptions) => createToast({ ...options, message, type: 'error' })\ntoast.close = close\ntoast.clear = clear\n\n// 重置全部状态(测试用)\ntoast._reset = () => {\n pendingBatch = undefined\n isBatchScheduled = false\n for (const el of visibleToasts.values()) el.remove()\n visibleToasts.clear()\n for (const container of toastContainers) container.remove()\n toastContainers.clear()\n}\n\nexport { toast }\n"],"mappings":"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"}
1
+ {"version":3,"file":"manager.js","names":[],"sources":["../../../src/components/toast/manager.ts"],"sourcesContent":["import { getFallbackOverlayRoot } from '@/shared/overlay/overlay-root'\nimport { findNearestTheme, findRootTheme } from '@/shared/overlay/theme-overlay-scope'\n\nimport type { WebUiToast } from './toast'\nimport type { ToastInstanceOptions, ToastOptions, ToastPosition } from './types'\n\nlet toastIdCounter = 0\n\nconst toastContainers = new Set<HTMLElement>()\nconst visibleToasts = new Map<string, WebUiToast>()\n\nlet pendingBatch: Array<{ id: string; options: ToastInstanceOptions; root: HTMLElement }> | undefined\nlet isBatchScheduled = false\n\ntype ToastShortcutOptions = Omit<ToastOptions, 'message' | 'type'> & Pick<ToastInstanceOptions, 'position'>\n\n// moveBefore 尚未进入 Baseline,DOM lib 未必声明;按能力探测调用,缺失时走降级分支。\ntype MaybeMoveBefore = HTMLElement & { moveBefore?: (node: Node, child: Node | null) => void }\n\nfunction generateId(): string {\n return `toast-${++toastIdCounter}`\n}\n\nfunction resolveRoot(options: ToastInstanceOptions): HTMLElement {\n const targetTheme = options.target ? findNearestTheme(options.target) : findRootTheme()\n return options.container ?? targetTheme?.getOverlayRoot() ?? getFallbackOverlayRoot()\n}\n\nfunction ensureContainer(position: ToastPosition, root: HTMLElement): HTMLElement {\n const existing = Array.from(root.children).find(\n (child): child is HTMLElement => child instanceof HTMLElement && child.dataset.wuiToastPosition === position\n )\n if (existing) return existing\n\n const container = document.createElement('div')\n container.className = `wui-toast-container wui-toast-${position} wui-scroll`\n container.dataset.wuiToastPosition = position\n container.setAttribute('role', 'log')\n container.setAttribute('aria-live', 'polite')\n container.setAttribute('aria-relevant', 'additions')\n root.appendChild(container)\n toastContainers.add(container)\n\n container.addEventListener('pointerenter', () => (container.dataset.hovered = 'true'))\n container.addEventListener('pointerleave', () => {\n delete container.dataset.hovered\n scrollToBottom(container)\n })\n return container\n}\n\nfunction pruneContainer(container: HTMLElement | null) {\n if (!container || container.children.length > 0) return\n container.remove()\n toastContainers.delete(container)\n}\n\nfunction scrollToBottom(container: HTMLElement) {\n if (container.dataset.hovered === 'true') return\n requestAnimationFrame(() => {\n container.scrollTop = container.scrollHeight\n })\n}\n\nfunction scheduleBatchFlush() {\n if (isBatchScheduled) return\n isBatchScheduled = true\n void Promise.resolve().then(flushBatch)\n}\n\nfunction flushBatch() {\n isBatchScheduled = false\n const batch = pendingBatch\n pendingBatch = undefined\n if (!batch) return\n\n const containersToScroll = new Set<HTMLElement>()\n for (const item of batch) {\n // 容器在挂载时才解析:待挂载条目被 patch 改了 position 也能落到正确容器。\n const container = ensureContainer(item.options.position || 'top-right', item.root)\n mountToast(item.id, item.options, container)\n containersToScroll.add(container)\n }\n for (const container of containersToScroll) scrollToBottom(container)\n}\n\n/**\n * 命令式 API 的 upsert 语义:指定同一个 id 的多次调用收敛到同一条 toast。\n * 给出的字段覆盖,未给出的保持原值;`container` 与 `target` 以首次为准,换 overlay root 牵连更广。\n */\nfunction mergePatch(base: ToastInstanceOptions, patch: ToastInstanceOptions): ToastInstanceOptions {\n return {\n ...base,\n message: patch.message ?? base.message,\n heading: patch.heading ?? base.heading,\n type: patch.type ?? base.type,\n duration: patch.duration ?? base.duration,\n closable: patch.closable ?? base.closable,\n position: patch.position ?? base.position,\n container: base.container,\n target: base.target\n }\n}\n\nfunction applyPatch(el: WebUiToast, options: ToastInstanceOptions) {\n if (options.message !== undefined) el.message = options.message\n if (options.heading !== undefined) el.heading = options.heading\n if (options.type !== undefined) el.type = options.type\n if (options.closable !== undefined) el.noCloseButton = options.closable === false\n // duration 只有显式传入才重启计时;message/heading/type 都是 Lit 属性,赋值不碰 _closeTimer。\n // 悬停暂停期间交给元素自己裁决:setDuration() 只记新值不点火,否则鼠标还压在 toast 上\n // 时倒计时就被重启,「悬停暂停」在这条路径上会静默失效。\n if (options.duration !== undefined) el.setDuration(options.duration)\n if (options.position !== undefined && options.position !== el.position) relocateToast(el, options.position)\n}\n\nfunction relocateToast(el: WebUiToast, position: ToastPosition) {\n const prev = el.parentElement\n const root = prev?.parentElement\n if (!root) return\n const next = ensureContainer(position, root)\n\n const movable = next as MaybeMoveBefore\n if (typeof movable.moveBefore === 'function') {\n // 不摘出节点,disconnected/connected 都不触发:计时、焦点与动画状态原样保留。\n movable.moveBefore(el, null)\n } else {\n el.pauseAutoClose()\n next.appendChild(el)\n el.resumeAutoClose()\n }\n\n el.position = position\n pruneContainer(prev)\n scrollToBottom(next)\n}\n\nfunction createToast(options: ToastInstanceOptions): string {\n const id = options.id || generateId()\n\n const mounted = visibleToasts.get(id)\n if (mounted) {\n /*\n * 「已挂载但 show() 还没跑」的窗口(mountToast 之后、rAF 里的 show() 之前)仍复用同一条元素;\n * 正在退场、或被宿主摘出 DOM 的元素则不再接受更新。后者的补丁只会落在一条即将(或已经)\n * 离开文档的元素上:调用方拿到同一个 id,却没有任何可见通知,`relocateToast` 也会因\n * 找不到 root 而静默吞掉 position。因此摘掉映射、改走新建路径。\n * 退场元素仍在 DOM 里,由它自己延迟派发的 `toast-close` 收尾(按元素身份解绑,见 removeToastElement)。\n */\n if (mounted.isConnected && !mounted.dismissing) {\n applyPatch(mounted, options)\n return id\n }\n visibleToasts.delete(id)\n }\n\n const pending = pendingBatch?.find(item => item.id === id)\n if (pending) {\n pending.options = mergePatch(pending.options, options)\n return id\n }\n\n if (!pendingBatch) pendingBatch = []\n pendingBatch.push({ id, options, root: resolveRoot(options) })\n scheduleBatchFlush()\n return id\n}\n\nfunction mountToast(id: string, options: ToastInstanceOptions, container: HTMLElement) {\n const el = document.createElement('web-ui-toast')\n const type = options.type || 'info'\n el.toastId = id\n el.type = type\n el.position = options.position || 'top-right'\n el.heading = options.heading || ''\n el.message = options.message\n // error 的 5000 只在挂载时兜底,不写进 options:写进去 applyPatch 就会把它当成「显式传入\n // duration」而每次 upsert 都重启倒计时,与「duration 只有显式传入才重启」的契约冲突。\n el.duration = options.duration ?? (type === 'error' ? 5000 : 3000)\n el.noCloseButton = options.closable === false\n\n el.addEventListener('toast-close', () => removeToastElement(el))\n\n container.appendChild(el)\n visibleToasts.set(id, el)\n requestAnimationFrame(() => {\n // close()/clear() 可能已经在这段窗口里收走了它(见 dismiss 的无退场动画分支):\n // 不再入场,否则一条孤儿元素会在 duration 之后补派一次同 id 的 toast-close。\n if (el.dismissing) return\n el.show()\n })\n}\n\n/**\n * 按元素身份解绑并移除。退场中的旧元素会在稍后派发 `toast-close`,而此刻同 id 可能已经有\n * 新元素(退场窗口内的 upsert 会新建一条);若按 `detail.id` 删映射,就会把刚建好的那条\n * 一起删掉 —— 与「孤儿元素收不走」是同一类缺陷,只是换了个入口。\n */\nfunction removeToastElement(el: WebUiToast) {\n if (visibleToasts.get(el.toastId) === el) visibleToasts.delete(el.toastId)\n const container = el.parentElement\n el.remove()\n pruneContainer(container)\n}\n\n/**\n * id 不在 Map 里时仍要清掉同 id 的残留节点:早先的按 id 删除路径在这里直接 return,\n * 重复挂载留下的孤儿 toast 因此连自关闭、close() 和 clear() 都收不走,会永久留在\n * role=\"log\" 容器里。强删不派发 `toast-close`,但对不可从管理器触达的元素来说没有消费方状态可言。\n */\nfunction removeStray(id: string) {\n for (const container of toastContainers) {\n for (const child of Array.from(container.children)) {\n if (child.tagName !== 'WEB-UI-TOAST') continue\n if ((child as Partial<WebUiToast>).toastId === id) child.remove()\n }\n }\n for (const container of Array.from(toastContainers)) pruneContainer(container)\n}\n\n/**\n * 关闭一个 id 时,「还没开始显示」的两种状态都要能取消,否则 close() 会静默失效:\n *\n * - 同 tick 仍在 `pendingBatch` 里:还不是 DOM 元素,`removeStray` 扫不到 —— 出队即取消挂载。\n * - 已 `flushBatch`、rAF 里的 `show()` 未跑:元素在映射里但 `visible` 仍是 false,\n * `dismiss()` 现在对这段窗口立即派发(无退场动画可播),由 toast-close 监听摘除。\n *\n * 已在退场的元素不必也不该再动:它自己延迟派发的 toast-close 会收尾,重复 close 不改变结果。\n */\nfunction close(id: string) {\n const queued = pendingBatch\n if (queued) {\n const index = queued.findIndex(item => item.id === id)\n if (index >= 0) {\n queued.splice(index, 1)\n return\n }\n }\n\n const el = visibleToasts.get(id)\n if (el) {\n el.dismiss('programmatic')\n return\n }\n removeStray(id)\n}\n\n/**\n * 队列条目与已挂载元素一起取消。二者都会在同一个微任务内落地,只遍历已挂载元素会让\n * 「clear() 之后仍冒出一条」成为唯一的例外 —— 与 close() 的可用范围对齐。\n */\nfunction clear() {\n pendingBatch = undefined\n for (const el of visibleToasts.values()) el.dismiss('clear')\n}\n\nfunction toast(options: ToastInstanceOptions): string {\n return createToast(options)\n}\n\ntoast.success = (message: string, options?: ToastShortcutOptions) =>\n createToast({ ...options, message, type: 'success' })\ntoast.info = (message: string, options?: ToastShortcutOptions) => createToast({ ...options, message, type: 'info' })\ntoast.warning = (message: string, options?: ToastShortcutOptions) =>\n createToast({ ...options, message, type: 'warning' })\n// 不注入 duration:error 的 5000 默认值在 mountToast 兜底,否则 upsert 每次都判定为\n// 「显式传入 duration」而重启倒计时(success/info/warning 都没有这个不对称)。\ntoast.error = (message: string, options?: ToastShortcutOptions) => createToast({ ...options, message, type: 'error' })\ntoast.close = close\ntoast.clear = clear\n\n// 重置全部状态(测试用)\ntoast._reset = () => {\n pendingBatch = undefined\n isBatchScheduled = false\n for (const el of visibleToasts.values()) el.remove()\n visibleToasts.clear()\n for (const container of toastContainers) container.remove()\n toastContainers.clear()\n}\n\nexport { toast }\n"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"toast.js","names":[],"sources":["../../../src/components/toast/toast.ts"],"sourcesContent":["import type { IconifyIcon } from '@iconify/types'\nimport { html, LitElement, nothing, type PropertyValues, unsafeCSS } from 'lit'\n\nimport '@/components/icon'\n// web-ui-button 复用 icon 变体的焦点环与统一样式(secondary 变体,浅灰底贴合 toast 角落)\nimport '@/components/button'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport glass from '@/assets/glass.css?inline'\nimport {\n lucideInfo,\n lucideTriangleAlert,\n lucideCircleAlert,\n heroiconsXMark16Solid,\n heroiconsCheck16Solid\n} from '@/icons'\nimport { getTransitionDuration } from '@/shared/overlay/presence'\n\nimport style from './style.css?inline'\nimport type { ToastCloseReason, ToastPosition, ToastType } from './types'\n\nconst TYPE_ICONS: Record<ToastType, IconifyIcon> = {\n success: heroiconsCheck16Solid,\n info: lucideInfo,\n warning: lucideTriangleAlert,\n error: lucideCircleAlert\n}\n\nfunction _formatTime(): string {\n const now = new Date()\n const h = now.getHours().toString().padStart(2, '0')\n const m = now.getMinutes().toString().padStart(2, '0')\n return `${h}:${m}`\n}\n\n@customElement('web-ui-toast')\nexport class WebUiToast extends LitElement {\n static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n\n @property({ type: String, attribute: false }) toastId = ''\n @property({ type: String, reflect: true }) type: ToastType = 'info'\n @property({ type: String, reflect: true }) position: ToastPosition = 'top-right'\n @property({ type: String }) heading = ''\n @property({ type: String }) message = ''\n @property({ type: Number }) duration = 3000\n @property({ type: Boolean, reflect: true, attribute: 'no-close-button' }) noCloseButton = false\n @property({ type: Boolean, reflect: true }) visible = false\n\n private _closeTimer?: ReturnType<typeof setTimeout>\n private _deadline = 0\n /**\n * 暂停自动关闭时记下的剩余时间。`undefined` 表示暂停时本来就没有计时器(`duration` 为 0、\n * 或元素尚未 `show()`),与「已到期」(剩余 0)是两件事,不能共用一个 0。\n */\n private _pausedRemaining?: number\n /** 指针停在 toast 上:计时处于悬停暂停态,只有指针离开才能续跑。 */\n private _hoverPaused = false\n private _dismissing = false\n\n /**\n * 退场已开始、`toast-close` 尚未派发。这段窗口内元素仍连接在 DOM、也仍被 manager 的映射\n * 持有,但已不再接受属性更新:manager 的 upsert 据此走新建路径,否则「更新」会写进一条\n * 正在消失的元素里 —— 调用方拿到同一个 id,却看不到任何可见通知。\n */\n get dismissing(): boolean {\n return this._dismissing\n }\n\n /** 指针仍停在 toast 上,自动关闭计时处于暂停态。 */\n get hoverPaused(): boolean {\n return this._hoverPaused\n }\n\n override connectedCallback() {\n super.connectedCallback()\n this.addEventListener('pointerenter', this._onPointerEnter)\n this.addEventListener('pointerleave', this._onPointerLeave)\n // 悬停中被搬迁(不支持 moveBefore 的引擎走摘出重插)时暂停态要连兜底一起带回来,\n // 否则新位置上既没有 document 监听、也不会再补发 pointerenter,这条 toast 又变成永久停留。\n if (this._hoverPaused) this._attachHoverFallback()\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback()\n this.removeEventListener('pointerenter', this._onPointerEnter)\n this.removeEventListener('pointerleave', this._onPointerLeave)\n this._detachHoverFallback()\n this._clearTimer()\n }\n\n /**\n * 定义该回调后,`Element.moveBefore()` 搬迁节点不再触发 disconnected/connected,\n * 自动关闭计时与动画状态得以保留;未定义时旧引擎会走摘出重插,计时被 `_clearTimer()` 清掉。\n */\n connectedMoveCallback() {}\n\n protected override updated(changed: PropertyValues) {\n if (changed.has('position')) {\n this._applySlideDirection()\n }\n }\n\n private _applySlideDirection() {\n const SLIDE_OFFSET = 20\n let x = 0\n let y = 0\n\n if (this.position.includes('left')) x = -SLIDE_OFFSET\n else if (this.position.includes('right')) x = SLIDE_OFFSET\n\n if (this.position.startsWith('top')) y = -SLIDE_OFFSET\n else if (this.position.startsWith('bottom')) y = SLIDE_OFFSET\n\n this.style.setProperty('--toast-slide-x', `${x}px`)\n this.style.setProperty('--toast-slide-y', `${y}px`)\n }\n\n startAutoClose() {\n this._clearTimer()\n if (this.duration > 0) {\n this._deadline = Date.now() + this.duration\n this._closeTimer = setTimeout(() => {\n this.dismiss('auto')\n }, this.duration)\n }\n }\n\n /**\n * 由 manager 调用:显式 `duration` 更新。悬停暂停期间只记新值、不点火 —— 否则指针还压在\n * toast 上时计时就被重启,「悬停暂停」在这条路径上直接失效。恢复时按新 duration 计满:\n * 调用方显式改了生命周期,续跑按旧时长算出的剩余没有意义。`0` 表示不自动关闭,记成\n * 「没有计时器」,否则恢复时会被当成「已到期」立即退场。\n */\n setDuration(ms: number) {\n this.duration = ms\n if (this._hoverPaused) {\n this._pausedRemaining = ms > 0 ? ms : undefined\n return\n }\n this.startAutoClose()\n }\n\n // 不支持 moveBefore 的引擎上搬迁节点前调用:记下剩余时间,搬完由 resumeAutoClose() 续跑。\n pauseAutoClose() {\n // 已经在暂停态时保留既有剩余:悬停暂停期间若发生搬迁,降级路径也会走到这里,无条件\n // 重算会把悬停记下的剩余抹成「没有计时器」,指针离开后这条 toast 就再也不会关闭。\n if (this._closeTimer === undefined && this._pausedRemaining !== undefined) return\n // 计时器仍在跑时剩余时间可能算出 0:deadline 已过、回调还排在队列里没执行。这一支与\n // 「本来就没有计时器」必须分开记(undefined vs 0),否则续跑无法区分两者。\n this._pausedRemaining = this._closeTimer === undefined ? undefined : Math.max(0, this._deadline - Date.now())\n this._clearTimer()\n }\n\n // 与 pauseAutoClose() 成对:暂停时没有计时器就保持原状,不重启满时长;\n // 已到期则立即退场 —— 而不是把「已到期」当成「从来没有计时器」放过,那样这条 toast 会永不关闭。\n resumeAutoClose() {\n // 悬停还没结束时只交还剩余时间、不点火:搬迁降级路径也会走到这里,真正的续跑等指针\n // 离开(_resumeFromHover)再开始,否则鼠标还停着就已经在倒计时了。\n if (this._hoverPaused) return\n const remaining = this._pausedRemaining\n this._pausedRemaining = undefined\n if (remaining === undefined) return\n // 装新计时器前先拆掉可能仍在跑的旧计时器:pause/resume 一旦不再严格成对(调用序被重排),\n // 直接覆盖 `_closeTimer` 会留下两个 deadline 同时倒计时,先到的那个把 toast 提前关掉。\n this._clearTimer()\n if (remaining <= 0) {\n this.dismiss('auto')\n return\n }\n this._deadline = Date.now() + remaining\n this._closeTimer = setTimeout(() => {\n this.dismiss('auto')\n }, remaining)\n }\n\n // 由 manager 调用:播放入场动画后自动开始计时\n show() {\n this._dismissing = false\n this.visible = true\n // 挂载时指针已经压在上面(光标停在 toast 将要出现的位置):入场后直接进入暂停,\n // 不能点火 —— 那条计时会在指针还停着的时候把 toast 关掉。\n if (this._hoverPaused) {\n this._pausedRemaining = this.duration > 0 ? this.duration : undefined\n return\n }\n this.startAutoClose()\n }\n\n // 含退场动画,结束由 transitionend 驱动后派发 close。\n dismiss(reason: ToastCloseReason = 'programmatic') {\n if (this._dismissing) return\n this._dismissing = true\n // 退场优先于悬停:暂停态不再有意义,document 兜底监听也要收掉,否则退场中的\n // 元素会继续持有「指针还在上面」的状态。\n this._hoverPaused = false\n this._detachHoverFallback()\n if (!this.visible) {\n // 尚未 show()(manager 挂载之后、rAF 之前)或从未显示过:没有退场动画可播,立即派发,\n // 由 manager 的 toast-close 监听摘除元素。若在这里早退,close()/clear() 落在这段窗口\n // 里就会静默失效 —— 元素照常入场,调用方却以为已经关掉了。\n this._dispatchClose(reason)\n return\n }\n this.visible = false\n this._clearTimer()\n const onEnd = () => {\n this.removeEventListener('transitionend', onEnd)\n this._dispatchClose(reason)\n }\n this.addEventListener('transitionend', onEnd)\n // fallback: transitionend 不触发时(display:none 等)\n const toast = this.shadowRoot?.querySelector<HTMLElement>('.toast')\n setTimeout(onEnd, getTransitionDuration(toast ?? this) + 80)\n }\n\n private _clearTimer() {\n if (this._closeTimer !== undefined) {\n clearTimeout(this._closeTimer)\n this._closeTimer = undefined\n }\n }\n\n private _onPointerEnter = (e: PointerEvent) => {\n if (e.pointerType === 'touch') return\n if (this._hoverPaused) return\n this._hoverPaused = true\n this.pauseAutoClose()\n // pointerleave 是唯一的恢复入口时,漏掉一次(指针拖出窗口、元素在悬停期间被搬迁或\n // 摘出、光标静止时布局把 toast 移走)这条 toast 就永久停在屏幕上。document 级兜底\n // 补上这个缺口:指针落到别的元素上、或离开文档,都判定悬停结束。三个信号互相兜底,\n // 因为单一信号在不同引擎上都有漏派发的场景。\n this._attachHoverFallback()\n }\n\n private _onPointerLeave = (e: PointerEvent) => {\n if (e.pointerType === 'touch') return\n this._resumeFromHover()\n }\n\n // 兜底路径:指针移到别的元素上(冒泡到 document)。路径不含本元素说明指针已经不在\n // toast 上;composedPath() 覆盖 shadow DOM,指针在 toast 内部节点之间移动不算离开。\n private _onDocumentPointerOver = (e: PointerEvent) => {\n if (e.pointerType === 'touch') return\n if (e.composedPath().includes(this)) return\n this._resumeFromHover()\n }\n\n // 兜底路径:指针移出窗口。部分引擎不保证 document 上的 pointerleave,用 relatedTarget\n // 为空的 pointerout 补上 —— 悬停中的 toast 被摘除时同样会派发这种 pointerout。\n private _onDocumentPointerOut = (e: PointerEvent) => {\n if (e.pointerType === 'touch') return\n if (e.relatedTarget !== null) return\n this._resumeFromHover()\n }\n\n // 兜底路径:指针离开整个文档(移出窗口)。文档内的元素间移动不会派发到 document。\n private _onDocumentPointerLeave = (e: PointerEvent) => {\n if (e.pointerType === 'touch') return\n this._resumeFromHover()\n }\n\n private _resumeFromHover() {\n if (!this._hoverPaused) return\n this._hoverPaused = false\n this._detachHoverFallback()\n this.resumeAutoClose()\n }\n\n private _attachHoverFallback() {\n document.addEventListener('pointerover', this._onDocumentPointerOver)\n document.addEventListener('pointerout', this._onDocumentPointerOut)\n document.addEventListener('pointerleave', this._onDocumentPointerLeave)\n }\n\n private _detachHoverFallback() {\n document.removeEventListener('pointerover', this._onDocumentPointerOver)\n document.removeEventListener('pointerout', this._onDocumentPointerOut)\n document.removeEventListener('pointerleave', this._onDocumentPointerLeave)\n }\n\n private _onCloseClick = () => {\n this.dismiss('manual')\n }\n\n private _dispatchClose(reason: ToastCloseReason) {\n this.dispatchEvent(\n new CustomEvent('toast-close', {\n detail: { id: this.toastId, reason },\n bubbles: true,\n composed: true\n })\n )\n }\n\n override render() {\n const icon = TYPE_ICONS[this.type]\n const ariaLive = this.type === 'error' ? 'assertive' : 'polite'\n // role=\"alert\" 会强制隐式 aria-live=\"assertive\",覆盖掉上方 aria-live 设置,\n // 因此仅 error toast 使用 alert(本就应 assertive);其余类型交给容器 role=\"log\" 的 polite 播报。\n const role = this.type === 'error' ? 'alert' : nothing\n\n return html`\n <div class=\"toast wui-glass ${this.type}\" role=${role} aria-live=${ariaLive} aria-atomic=\"true\">\n <span class=\"toast-icon\" aria-hidden=\"true\">\n <web-ui-icon .icon=${icon} size=\"14\"></web-ui-icon>\n </span>\n <div class=\"toast-body\">\n ${this.heading ? html`<div class=\"toast-heading\">${this.heading}</div>` : nothing}\n <div class=\"toast-message\">${this.message}</div>\n </div>\n <span class=\"toast-time\">${_formatTime()}</span>\n ${\n !this.noCloseButton\n ? html`\n <web-ui-button\n class=\"toast-close-btn\"\n icon\n variant=\"secondary\"\n size=\"24\"\n aria-label=\"关闭\"\n @click=${this._onCloseClick}\n >\n <web-ui-icon .icon=${heroiconsXMark16Solid} size=\"16\"></web-ui-icon>\n </web-ui-button>\n `\n : nothing\n }\n </div>\n `\n }\n\n declare readonly $events: {\n 'toast-close': CustomEvent<{ id: string; reason: ToastCloseReason }>\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'web-ui-toast': WebUiToast\n }\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"toast.js","names":[],"sources":["../../../src/components/toast/toast.ts"],"sourcesContent":["// web-ui-button 复用 icon 变体的焦点环与统一样式(secondary 变体,浅灰底贴合 toast 角落)\nimport '@/components/button'\nimport '@/components/icon'\n\nimport type { IconifyIcon } from '@iconify/types'\nimport { html, LitElement, nothing, type PropertyValues, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport glass from '@/assets/glass.css?inline'\nimport {\n lucideInfo,\n lucideTriangleAlert,\n lucideCircleAlert,\n heroiconsXMark16Solid,\n heroiconsCheck16Solid\n} from '@/icons'\nimport { getTransitionDuration } from '@/shared/overlay/presence'\n\nimport style from './style.css?inline'\nimport type { ToastCloseReason, ToastPosition, ToastType } from './types'\n\nconst TYPE_ICONS: Record<ToastType, IconifyIcon> = {\n success: heroiconsCheck16Solid,\n info: lucideInfo,\n warning: lucideTriangleAlert,\n error: lucideCircleAlert\n}\n\nfunction _formatTime(): string {\n const now = new Date()\n const h = now.getHours().toString().padStart(2, '0')\n const m = now.getMinutes().toString().padStart(2, '0')\n return `${h}:${m}`\n}\n\n@customElement('web-ui-toast')\nexport class WebUiToast extends LitElement {\n static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n\n @property({ type: String, attribute: false }) toastId = ''\n @property({ type: String, reflect: true }) type: ToastType = 'info'\n @property({ type: String, reflect: true }) position: ToastPosition = 'top-right'\n @property({ type: String }) heading = ''\n @property({ type: String }) message = ''\n @property({ type: Number }) duration = 3000\n @property({ type: Boolean, reflect: true, attribute: 'no-close-button' }) noCloseButton = false\n @property({ type: Boolean, reflect: true }) visible = false\n\n private _closeTimer?: ReturnType<typeof setTimeout>\n private _deadline = 0\n /**\n * 暂停自动关闭时记下的剩余时间。`undefined` 表示暂停时本来就没有计时器(`duration` 为 0、\n * 或元素尚未 `show()`),与「已到期」(剩余 0)是两件事,不能共用一个 0。\n */\n private _pausedRemaining?: number\n /** 指针停在 toast 上:计时处于悬停暂停态,只有指针离开才能续跑。 */\n private _hoverPaused = false\n private _dismissing = false\n\n /**\n * 退场已开始、`toast-close` 尚未派发。这段窗口内元素仍连接在 DOM、也仍被 manager 的映射\n * 持有,但已不再接受属性更新:manager 的 upsert 据此走新建路径,否则「更新」会写进一条\n * 正在消失的元素里 —— 调用方拿到同一个 id,却看不到任何可见通知。\n */\n get dismissing(): boolean {\n return this._dismissing\n }\n\n /** 指针仍停在 toast 上,自动关闭计时处于暂停态。 */\n get hoverPaused(): boolean {\n return this._hoverPaused\n }\n\n override connectedCallback() {\n super.connectedCallback()\n this.addEventListener('pointerenter', this._onPointerEnter)\n this.addEventListener('pointerleave', this._onPointerLeave)\n // 悬停中被搬迁(不支持 moveBefore 的引擎走摘出重插)时暂停态要连兜底一起带回来,\n // 否则新位置上既没有 document 监听、也不会再补发 pointerenter,这条 toast 又变成永久停留。\n if (this._hoverPaused) this._attachHoverFallback()\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback()\n this.removeEventListener('pointerenter', this._onPointerEnter)\n this.removeEventListener('pointerleave', this._onPointerLeave)\n this._detachHoverFallback()\n this._clearTimer()\n }\n\n /**\n * 定义该回调后,`Element.moveBefore()` 搬迁节点不再触发 disconnected/connected,\n * 自动关闭计时与动画状态得以保留;未定义时旧引擎会走摘出重插,计时被 `_clearTimer()` 清掉。\n */\n connectedMoveCallback() {}\n\n protected override updated(changed: PropertyValues) {\n if (changed.has('position')) {\n this._applySlideDirection()\n }\n }\n\n private _applySlideDirection() {\n const SLIDE_OFFSET = 20\n let x = 0\n let y = 0\n\n if (this.position.includes('left')) x = -SLIDE_OFFSET\n else if (this.position.includes('right')) x = SLIDE_OFFSET\n\n if (this.position.startsWith('top')) y = -SLIDE_OFFSET\n else if (this.position.startsWith('bottom')) y = SLIDE_OFFSET\n\n this.style.setProperty('--toast-slide-x', `${x}px`)\n this.style.setProperty('--toast-slide-y', `${y}px`)\n }\n\n startAutoClose() {\n this._clearTimer()\n if (this.duration > 0) {\n this._deadline = Date.now() + this.duration\n this._closeTimer = setTimeout(() => {\n this.dismiss('auto')\n }, this.duration)\n }\n }\n\n /**\n * 由 manager 调用:显式 `duration` 更新。悬停暂停期间只记新值、不点火 —— 否则指针还压在\n * toast 上时计时就被重启,「悬停暂停」在这条路径上直接失效。恢复时按新 duration 计满:\n * 调用方显式改了生命周期,续跑按旧时长算出的剩余没有意义。`0` 表示不自动关闭,记成\n * 「没有计时器」,否则恢复时会被当成「已到期」立即退场。\n */\n setDuration(ms: number) {\n this.duration = ms\n if (this._hoverPaused) {\n this._pausedRemaining = ms > 0 ? ms : undefined\n return\n }\n this.startAutoClose()\n }\n\n // 不支持 moveBefore 的引擎上搬迁节点前调用:记下剩余时间,搬完由 resumeAutoClose() 续跑。\n pauseAutoClose() {\n // 已经在暂停态时保留既有剩余:悬停暂停期间若发生搬迁,降级路径也会走到这里,无条件\n // 重算会把悬停记下的剩余抹成「没有计时器」,指针离开后这条 toast 就再也不会关闭。\n if (this._closeTimer === undefined && this._pausedRemaining !== undefined) return\n // 计时器仍在跑时剩余时间可能算出 0:deadline 已过、回调还排在队列里没执行。这一支与\n // 「本来就没有计时器」必须分开记(undefined vs 0),否则续跑无法区分两者。\n this._pausedRemaining = this._closeTimer === undefined ? undefined : Math.max(0, this._deadline - Date.now())\n this._clearTimer()\n }\n\n // 与 pauseAutoClose() 成对:暂停时没有计时器就保持原状,不重启满时长;\n // 已到期则立即退场 —— 而不是把「已到期」当成「从来没有计时器」放过,那样这条 toast 会永不关闭。\n resumeAutoClose() {\n // 悬停还没结束时只交还剩余时间、不点火:搬迁降级路径也会走到这里,真正的续跑等指针\n // 离开(_resumeFromHover)再开始,否则鼠标还停着就已经在倒计时了。\n if (this._hoverPaused) return\n const remaining = this._pausedRemaining\n this._pausedRemaining = undefined\n if (remaining === undefined) return\n // 装新计时器前先拆掉可能仍在跑的旧计时器:pause/resume 一旦不再严格成对(调用序被重排),\n // 直接覆盖 `_closeTimer` 会留下两个 deadline 同时倒计时,先到的那个把 toast 提前关掉。\n this._clearTimer()\n if (remaining <= 0) {\n this.dismiss('auto')\n return\n }\n this._deadline = Date.now() + remaining\n this._closeTimer = setTimeout(() => {\n this.dismiss('auto')\n }, remaining)\n }\n\n // 由 manager 调用:播放入场动画后自动开始计时\n show() {\n this._dismissing = false\n this.visible = true\n // 挂载时指针已经压在上面(光标停在 toast 将要出现的位置):入场后直接进入暂停,\n // 不能点火 —— 那条计时会在指针还停着的时候把 toast 关掉。\n if (this._hoverPaused) {\n this._pausedRemaining = this.duration > 0 ? this.duration : undefined\n return\n }\n this.startAutoClose()\n }\n\n // 含退场动画,结束由 transitionend 驱动后派发 close。\n dismiss(reason: ToastCloseReason = 'programmatic') {\n if (this._dismissing) return\n this._dismissing = true\n // 退场优先于悬停:暂停态不再有意义,document 兜底监听也要收掉,否则退场中的\n // 元素会继续持有「指针还在上面」的状态。\n this._hoverPaused = false\n this._detachHoverFallback()\n if (!this.visible) {\n // 尚未 show()(manager 挂载之后、rAF 之前)或从未显示过:没有退场动画可播,立即派发,\n // 由 manager 的 toast-close 监听摘除元素。若在这里早退,close()/clear() 落在这段窗口\n // 里就会静默失效 —— 元素照常入场,调用方却以为已经关掉了。\n this._dispatchClose(reason)\n return\n }\n this.visible = false\n this._clearTimer()\n const onEnd = () => {\n this.removeEventListener('transitionend', onEnd)\n this._dispatchClose(reason)\n }\n this.addEventListener('transitionend', onEnd)\n // fallback: transitionend 不触发时(display:none 等)\n const toast = this.shadowRoot?.querySelector<HTMLElement>('.toast')\n setTimeout(onEnd, getTransitionDuration(toast ?? this) + 80)\n }\n\n private _clearTimer() {\n if (this._closeTimer !== undefined) {\n clearTimeout(this._closeTimer)\n this._closeTimer = undefined\n }\n }\n\n private _onPointerEnter = (e: PointerEvent) => {\n if (e.pointerType === 'touch') return\n if (this._hoverPaused) return\n this._hoverPaused = true\n this.pauseAutoClose()\n // pointerleave 是唯一的恢复入口时,漏掉一次(指针拖出窗口、元素在悬停期间被搬迁或\n // 摘出、光标静止时布局把 toast 移走)这条 toast 就永久停在屏幕上。document 级兜底\n // 补上这个缺口:指针落到别的元素上、或离开文档,都判定悬停结束。三个信号互相兜底,\n // 因为单一信号在不同引擎上都有漏派发的场景。\n this._attachHoverFallback()\n }\n\n private _onPointerLeave = (e: PointerEvent) => {\n if (e.pointerType === 'touch') return\n this._resumeFromHover()\n }\n\n // 兜底路径:指针移到别的元素上(冒泡到 document)。路径不含本元素说明指针已经不在\n // toast 上;composedPath() 覆盖 shadow DOM,指针在 toast 内部节点之间移动不算离开。\n private _onDocumentPointerOver = (e: PointerEvent) => {\n if (e.pointerType === 'touch') return\n if (e.composedPath().includes(this)) return\n this._resumeFromHover()\n }\n\n // 兜底路径:指针移出窗口。部分引擎不保证 document 上的 pointerleave,用 relatedTarget\n // 为空的 pointerout 补上 —— 悬停中的 toast 被摘除时同样会派发这种 pointerout。\n private _onDocumentPointerOut = (e: PointerEvent) => {\n if (e.pointerType === 'touch') return\n if (e.relatedTarget !== null) return\n this._resumeFromHover()\n }\n\n // 兜底路径:指针离开整个文档(移出窗口)。文档内的元素间移动不会派发到 document。\n private _onDocumentPointerLeave = (e: PointerEvent) => {\n if (e.pointerType === 'touch') return\n this._resumeFromHover()\n }\n\n private _resumeFromHover() {\n if (!this._hoverPaused) return\n this._hoverPaused = false\n this._detachHoverFallback()\n this.resumeAutoClose()\n }\n\n private _attachHoverFallback() {\n document.addEventListener('pointerover', this._onDocumentPointerOver)\n document.addEventListener('pointerout', this._onDocumentPointerOut)\n document.addEventListener('pointerleave', this._onDocumentPointerLeave)\n }\n\n private _detachHoverFallback() {\n document.removeEventListener('pointerover', this._onDocumentPointerOver)\n document.removeEventListener('pointerout', this._onDocumentPointerOut)\n document.removeEventListener('pointerleave', this._onDocumentPointerLeave)\n }\n\n private _onCloseClick = () => {\n this.dismiss('manual')\n }\n\n private _dispatchClose(reason: ToastCloseReason) {\n this.dispatchEvent(\n new CustomEvent('toast-close', {\n detail: { id: this.toastId, reason },\n bubbles: true,\n composed: true\n })\n )\n }\n\n override render() {\n const icon = TYPE_ICONS[this.type]\n const ariaLive = this.type === 'error' ? 'assertive' : 'polite'\n // role=\"alert\" 会强制隐式 aria-live=\"assertive\",覆盖掉上方 aria-live 设置,\n // 因此仅 error toast 使用 alert(本就应 assertive);其余类型交给容器 role=\"log\" 的 polite 播报。\n const role = this.type === 'error' ? 'alert' : nothing\n\n return html`\n <div class=\"toast wui-glass ${this.type}\" role=${role} aria-live=${ariaLive} aria-atomic=\"true\">\n <span class=\"toast-icon\" aria-hidden=\"true\">\n <web-ui-icon .icon=${icon} size=\"14\"></web-ui-icon>\n </span>\n <div class=\"toast-body\">\n ${this.heading ? html`<div class=\"toast-heading\">${this.heading}</div>` : nothing}\n <div class=\"toast-message\">${this.message}</div>\n </div>\n <span class=\"toast-time\">${_formatTime()}</span>\n ${\n !this.noCloseButton\n ? html`\n <web-ui-button\n class=\"toast-close-btn\"\n icon\n variant=\"secondary\"\n size=\"24\"\n aria-label=\"关闭\"\n @click=${this._onCloseClick}\n >\n <web-ui-icon .icon=${heroiconsXMark16Solid} size=\"16\"></web-ui-icon>\n </web-ui-button>\n `\n : nothing\n }\n </div>\n `\n }\n\n declare readonly $events: {\n 'toast-close': CustomEvent<{ id: string; reason: ToastCloseReason }>\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'web-ui-toast': WebUiToast\n }\n}\n"],"mappings":";;;;;;;;;;;;;;AAqBA,IAAM,IAA6C;CACjD,SAAS;CACT,MAAM;CACN,SAAS;CACT,OAAO;AACT;AAEA,SAAS,IAAsB;CAC7B,IAAM,oBAAM,IAAI,KAAK;CAGrB,OAAO,GAFG,EAAI,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,SAAS,GAAG,GAEtC,EAAE,GADF,EAAI,WAAW,CAAC,CAAC,SAAS,CAAC,CAAC,SAAS,GAAG,GACnC;AACjB;AAGO,IAAM,IAAN,cAAyB,EAAW;;EAoPX,aAjP0B,KAAA,UAAA,IACK,KAAA,OAAA,QACQ,KAAA,WAAA,aAC/B,KAAA,UAAA,IACA,KAAA,UAAA,IACC,KAAA,WAAA,KACmD,KAAA,gBAAA,IACpC,KAAA,UAAA,IAGlC,KAAA,YAAA,GAOG,KAAA,eAAA,IACD,KAAA,cAAA,IAqKK,KAAA,mBAAA,MAAoB;GACzC,EAAE,gBAAgB,YAClB,KAAK,iBACT,KAAK,eAAe,IACpB,KAAK,eAAe,GAKpB,KAAK,qBAAqB;EAC5B,GAE2B,KAAA,mBAAA,MAAoB;GACzC,EAAE,gBAAgB,WACtB,KAAK,iBAAiB;EACxB,GAIkC,KAAA,0BAAA,MAAoB;GAChD,EAAE,gBAAgB,YAClB,EAAE,aAAa,CAAC,CAAC,SAAS,IAAI,KAClC,KAAK,iBAAiB;EACxB,GAIiC,KAAA,yBAAA,MAAoB;GAC/C,EAAE,gBAAgB,WAClB,EAAE,kBAAkB,QACxB,KAAK,iBAAiB;EACxB,GAGmC,KAAA,2BAAA,MAAoB;GACjD,EAAE,gBAAgB,WACtB,KAAK,iBAAiB;EACxB,GAqB8B,KAAA,sBAAA;GAC5B,KAAK,QAAQ,QAAQ;EACvB;;;EArPyB,KAAA,SAAA,CAAC,EAAU,CAAK,GAAG,EAAU,CAAK,CAAC;;CA2B5D,IAAI,aAAsB;EACxB,OAAO,KAAK;CACd;CAGA,IAAI,cAAuB;EACzB,OAAO,KAAK;CACd;CAEA,oBAA6B;EAM3B,AALA,MAAM,kBAAkB,GACxB,KAAK,iBAAiB,gBAAgB,KAAK,eAAe,GAC1D,KAAK,iBAAiB,gBAAgB,KAAK,eAAe,GAGtD,KAAK,gBAAc,KAAK,qBAAqB;CACnD;CAEA,uBAAgC;EAK9B,AAJA,MAAM,qBAAqB,GAC3B,KAAK,oBAAoB,gBAAgB,KAAK,eAAe,GAC7D,KAAK,oBAAoB,gBAAgB,KAAK,eAAe,GAC7D,KAAK,qBAAqB,GAC1B,KAAK,YAAY;CACnB;CAMA,wBAAwB,CAAC;CAEzB,QAA2B,GAAyB;EAClD,AAAI,EAAQ,IAAI,UAAU,KACxB,KAAK,qBAAqB;CAE9B;CAEA,uBAA+B;EAC7B,IACI,IAAI,GACJ,IAAI;EASR,AAPI,KAAK,SAAS,SAAS,MAAM,IAAG,IAAI,MAC/B,KAAK,SAAS,SAAS,OAAO,MAAG,IAAI,KAE1C,KAAK,SAAS,WAAW,KAAK,IAAG,IAAI,MAChC,KAAK,SAAS,WAAW,QAAQ,MAAG,IAAI,KAEjD,KAAK,MAAM,YAAY,mBAAmB,GAAG,EAAE,GAAG,GAClD,KAAK,MAAM,YAAY,mBAAmB,GAAG,EAAE,GAAG;CACpD;CAEA,iBAAiB;EAEf,AADA,KAAK,YAAY,GACb,KAAK,WAAW,MAClB,KAAK,YAAY,KAAK,IAAI,IAAI,KAAK,UACnC,KAAK,cAAc,iBAAiB;GAClC,KAAK,QAAQ,MAAM;EACrB,GAAG,KAAK,QAAQ;CAEpB;CAQA,YAAY,GAAY;EAEtB,IADA,KAAK,WAAW,GACZ,KAAK,cAAc;GACrB,KAAK,mBAAmB,IAAK,IAAI,IAAK,KAAA;GACtC;EACF;EACA,KAAK,eAAe;CACtB;CAGA,iBAAiB;EAGX,MAAK,gBAAgB,KAAA,KAAa,KAAK,qBAAqB,KAAA,OAGhE,KAAK,mBAAmB,KAAK,gBAAgB,KAAA,IAAY,KAAA,IAAY,KAAK,IAAI,GAAG,KAAK,YAAY,KAAK,IAAI,CAAC,GAC5G,KAAK,YAAY;CACnB;CAIA,kBAAkB;EAGhB,IAAI,KAAK,cAAc;EACvB,IAAM,IAAY,KAAK;EACvB,SAAK,mBAAmB,KAAA,GACpB,MAAc,KAAA,GAIlB;OADA,KAAK,YAAY,GACb,KAAa,GAAG;IAClB,KAAK,QAAQ,MAAM;IACnB;GACF;GAEA,AADA,KAAK,YAAY,KAAK,IAAI,IAAI,GAC9B,KAAK,cAAc,iBAAiB;IAClC,KAAK,QAAQ,MAAM;GACrB,GAAG,CAAS;EAJZ;CAKF;CAGA,OAAO;EAKL,IAJA,KAAK,cAAc,IACnB,KAAK,UAAU,IAGX,KAAK,cAAc;GACrB,KAAK,mBAAmB,KAAK,WAAW,IAAI,KAAK,WAAW,KAAA;GAC5D;EACF;EACA,KAAK,eAAe;CACtB;CAGA,QAAQ,IAA2B,gBAAgB;EACjD,IAAI,KAAK,aAAa;EAMtB,IALA,KAAK,cAAc,IAGnB,KAAK,eAAe,IACpB,KAAK,qBAAqB,GACtB,CAAC,KAAK,SAAS;GAIjB,KAAK,eAAe,CAAM;GAC1B;EACF;EAEA,AADA,KAAK,UAAU,IACf,KAAK,YAAY;EACjB,IAAM,UAAc;GAElB,AADA,KAAK,oBAAoB,iBAAiB,CAAK,GAC/C,KAAK,eAAe,CAAM;EAC5B;EACA,KAAK,iBAAiB,iBAAiB,CAAK;EAE5C,IAAM,IAAQ,KAAK,YAAY,cAA2B,QAAQ;EAClE,WAAW,GAAO,EAAsB,KAAS,IAAI,IAAI,EAAE;CAC7D;CAEA,cAAsB;EACpB,AAAI,KAAK,gBAAgB,KAAA,MACvB,aAAa,KAAK,WAAW,GAC7B,KAAK,cAAc,KAAA;CAEvB;CAyCA,mBAA2B;EACpB,KAAK,iBACV,KAAK,eAAe,IACpB,KAAK,qBAAqB,GAC1B,KAAK,gBAAgB;CACvB;CAEA,uBAA+B;EAG7B,AAFA,SAAS,iBAAiB,eAAe,KAAK,sBAAsB,GACpE,SAAS,iBAAiB,cAAc,KAAK,qBAAqB,GAClE,SAAS,iBAAiB,gBAAgB,KAAK,uBAAuB;CACxE;CAEA,uBAA+B;EAG7B,AAFA,SAAS,oBAAoB,eAAe,KAAK,sBAAsB,GACvE,SAAS,oBAAoB,cAAc,KAAK,qBAAqB,GACrE,SAAS,oBAAoB,gBAAgB,KAAK,uBAAuB;CAC3E;CAMA,eAAuB,GAA0B;EAC/C,KAAK,cACH,IAAI,YAAY,eAAe;GAC7B,QAAQ;IAAE,IAAI,KAAK;IAAS;GAAO;GACnC,SAAS;GACT,UAAU;EACZ,CAAC,CACH;CACF;CAEA,SAAkB;EAChB,IAAM,IAAO,EAAW,KAAK,OACvB,IAAW,KAAK,SAAS,UAAU,cAAc,UAGjD,IAAO,KAAK,SAAS,UAAU,UAAU;EAE/C,OAAO,CAAI;oCACqB,KAAK,KAAK,SAAS,EAAK,aAAa,EAAS;;+BAEnD,EAAK;;;YAGxB,KAAK,UAAU,CAAI,8BAA8B,KAAK,QAAQ,UAAU,EAAQ;uCACrD,KAAK,QAAQ;;mCAEjB,EAAY,EAAE;UAEtC,KAAK,gBAaF,IAZA,CAAI;;;;;;;2BAOS,KAAK,cAAc;;uCAEP,EAAsB;;gBAIpD;;;CAGP;AAKF;AAvSG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,WAAW;AAAM,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,GAC3C,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,YAAA,KAAA,CAAA,GACxC,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,GACzB,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,GACzB,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GACzB,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;AAAkB,CAAC,CAAA,GAAA,EAAA,WAAA,iBAAA,KAAA,CAAA,GACvE,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,GAX3C,IAAA,EAAA,CAAA,EAAc,cAAc,CAAA,GAAA,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../src/scrollbars/index.ts"],"sourcesContent":["import { ClickScrollPlugin, OverlayScrollbars, type PartialOptions } from 'overlayscrollbars'\n\nimport './style.css'\n\n/**\n * `scrollbars.theme` 的取值,同时也是 `@greypan/web-ui/scrollbars.css` 里主题类的名字。\n */\nexport const WEB_UI_SCROLLBARS_THEME = 'os-theme-macos'\n\n/*\n * track 点击滚动由 ClickScrollPlugin 提供;插件未注册时 `clickScroll` 静默失效——\n * 不报错、不打日志,轨道只是没有反应。注册写在模块作用域,只要消费方用了本模块,\n * 插件就一定在位,不会因为漏掉一行 bootstrap 而退化。\n */\nOverlayScrollbars.plugin(ClickScrollPlugin)\n\n/**\n * 全仓统一的滚动条行为:外观对齐 macOS、自动隐藏、滚动时短暂显示、track 点击直达。\n *\n * 内容尺寸或平台变化都不需要改这里,只有三条产品要求本身变了才改。覆盖层要实现的是\n * 同一套手势语言,所以用法是把它整个传给 OverlayScrollbars 初始化,而不是逐项拼接:\n *\n * ```ts\n * import { webUiScrollbarsOptions } from '@greypan/web-ui/scrollbars'\n * import '@greypan/web-ui/scrollbars.css'\n * ```\n *\n * - `autoHide: 'scroll'`:滚动条只在滚动时出现,停下 `autoHideDelay` 之后自动隐去。用户明确选了\n * 这一档而不是 `'move'`——`'move'` 会让指针在滚动区域内移动就唤出,比 macOS 原生积极得多。\n * 代价写清楚:**hover 本身不再唤出滚动条**(隐藏态的元素不可命中,指针根本落不到它上面),\n * 所以 issue 里「hover 的时候短暂显示」那条只以「滚动时短暂显示」的形式满足。\n * - `autoHideDelay: 2000`:这一档同时是「track 点击跳转」的可用窗口——滚动条隐去后它就不可命中。\n * 指针从滚动的位置移到轨道、再点下去,实测预算在 1s 上下,默认的 1300ms 太贴边;2000ms 留出\n * 余量,又不至于让半透明滚动条在静止画面上久留(macOS 原生的淡出也在 2s 这个量级)。\n * - `autoHideSuspend` 保持关闭:打开会让滚动条在首次滚动前一直可见,与「自动隐藏」相反。\n * - `clickScroll` 走函数形态:`true` 只是「按一个视口步进」,跳到的是当前位置的下/上一屏,\n * 与点击处的距离无关。`clickScrollDistance: 0` 才是「以点击处为目标」——库把 0 定义为\n * 「距离等于目标距离」。函数形态是必需的:这个选项只在实现里经过 `isFunction` 分支才会被读到,\n * 直接传对象会被静默忽略。\n * - `clickScrollDuration: 0`:库默认用 200ms 缓动滚到点击处,在渲染虚拟列表的资源列表上会卡顿,\n * 这里改成即时落位。0 是合法时长而不是「非法值被忽略」:`animateNumber` 先用 `Math.max(0, ms)`\n * 得到时长 0,首帧(同步执行、不经 rAF)就判定已到期并落到终点。\n */\nexport const webUiScrollbarsOptions: PartialOptions = {\n scrollbars: {\n theme: WEB_UI_SCROLLBARS_THEME,\n autoHide: 'scroll',\n autoHideDelay: 2000,\n clickScroll: () => ({ clickScrollDistance: 0, clickScrollDuration: 0 })\n }\n}\n"],"mappings":";;;AAOA,IAAa,IAA0B;AAOvC,EAAkB,OAAO,CAAiB;AA6B1C,IAAa,IAAyC,EACpD,YAAY;CACV,OAAO;CACP,UAAU;CACV,eAAe;CACf,oBAAoB;EAAE,qBAAqB;EAAG,qBAAqB;CAAE;AACvE,EACF"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../src/scrollbars/index.ts"],"sourcesContent":["import './style.css'\n\nimport { ClickScrollPlugin, OverlayScrollbars, type PartialOptions } from 'overlayscrollbars'\n\n/**\n * `scrollbars.theme` 的取值,同时也是 `@greypan/web-ui/scrollbars.css` 里主题类的名字。\n */\nexport const WEB_UI_SCROLLBARS_THEME = 'os-theme-macos'\n\n/*\n * track 点击滚动由 ClickScrollPlugin 提供;插件未注册时 `clickScroll` 静默失效——\n * 不报错、不打日志,轨道只是没有反应。注册写在模块作用域,只要消费方用了本模块,\n * 插件就一定在位,不会因为漏掉一行 bootstrap 而退化。\n */\nOverlayScrollbars.plugin(ClickScrollPlugin)\n\n/**\n * 全仓统一的滚动条行为:外观对齐 macOS、自动隐藏、滚动时短暂显示、track 点击直达。\n *\n * 内容尺寸或平台变化都不需要改这里,只有三条产品要求本身变了才改。覆盖层要实现的是\n * 同一套手势语言,所以用法是把它整个传给 OverlayScrollbars 初始化,而不是逐项拼接:\n *\n * ```ts\n * import { webUiScrollbarsOptions } from '@greypan/web-ui/scrollbars'\n * import '@greypan/web-ui/scrollbars.css'\n * ```\n *\n * - `autoHide: 'scroll'`:滚动条只在滚动时出现,停下 `autoHideDelay` 之后自动隐去。用户明确选了\n * 这一档而不是 `'move'`——`'move'` 会让指针在滚动区域内移动就唤出,比 macOS 原生积极得多。\n * 代价写清楚:**hover 本身不再唤出滚动条**(隐藏态的元素不可命中,指针根本落不到它上面),\n * 所以 issue 里「hover 的时候短暂显示」那条只以「滚动时短暂显示」的形式满足。\n * - `autoHideDelay: 2000`:这一档同时是「track 点击跳转」的可用窗口——滚动条隐去后它就不可命中。\n * 指针从滚动的位置移到轨道、再点下去,实测预算在 1s 上下,默认的 1300ms 太贴边;2000ms 留出\n * 余量,又不至于让半透明滚动条在静止画面上久留(macOS 原生的淡出也在 2s 这个量级)。\n * - `autoHideSuspend` 保持关闭:打开会让滚动条在首次滚动前一直可见,与「自动隐藏」相反。\n * - `clickScroll` 走函数形态:`true` 只是「按一个视口步进」,跳到的是当前位置的下/上一屏,\n * 与点击处的距离无关。`clickScrollDistance: 0` 才是「以点击处为目标」——库把 0 定义为\n * 「距离等于目标距离」。函数形态是必需的:这个选项只在实现里经过 `isFunction` 分支才会被读到,\n * 直接传对象会被静默忽略。\n * - `clickScrollDuration: 0`:库默认用 200ms 缓动滚到点击处,在渲染虚拟列表的资源列表上会卡顿,\n * 这里改成即时落位。0 是合法时长而不是「非法值被忽略」:`animateNumber` 先用 `Math.max(0, ms)`\n * 得到时长 0,首帧(同步执行、不经 rAF)就判定已到期并落到终点。\n */\nexport const webUiScrollbarsOptions: PartialOptions = {\n scrollbars: {\n theme: WEB_UI_SCROLLBARS_THEME,\n autoHide: 'scroll',\n autoHideDelay: 2000,\n clickScroll: () => ({ clickScrollDistance: 0, clickScrollDuration: 0 })\n }\n}\n"],"mappings":";;;AAOA,IAAa,IAA0B;AAOvC,EAAkB,OAAO,CAAiB;AA6B1C,IAAa,IAAyC,EACpD,YAAY;CACV,OAAO;CACP,UAAU;CACV,eAAe;CACf,oBAAoB;EAAE,qBAAqB;EAAG,qBAAqB;CAAE;AACvE,EACF"}
@@ -0,0 +1,6 @@
1
+ //#region src/scrollbars/internal.css?inline
2
+ var e = ".wui-scroll{scrollbar-color:var(--wui-scrollbar-handle,#00000063) transparent;scrollbar-width:thin}";
3
+ //#endregion
4
+ export { e as default };
5
+
6
+ //# sourceMappingURL=internal.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"internal.js","names":[],"sources":["../../src/scrollbars/internal.css?inline"],"sourcesContent":["/*\n * 组件内部滚动容器的原生滚动条主题。\n *\n * 为什么不是直接上 OverlayScrollbars:库的结构样式挂在 `.os-scrollbar` 上、主题类\n * `.os-theme-macos` 也靠文档层的选择器命中,两者都进不了组件的 shadow——shadow 里既匹配不到\n * `web-ui-theme[...]` 这类后代选择器,也匹配不到 `html:has()`。库还会把宿主改成 flex 行、把\n * 子节点搬进它生成的 viewport,会破坏组件自身承重的布局。唯一能跨 shadow 边界的是继承的\n * 自定义属性,所以这里只**读**主题里同一组 `--wui-scrollbar-*`(由 `web-ui-theme` 的外观分支\n * 写、`.os-theme-macos` 的回退值兜底),颜色因此与整页的覆盖式滚动条同源。\n *\n * 刻意**不写 `::-webkit-scrollbar`**:一旦给某条滚动条声明了自定义 webkit 伪元素,引擎就会\n * 放弃平台自带的覆盖式滚动条,改用经典滚动条并固定占一条布局宽度。实测(macOS Chromium,一条\n * `width: 7px` 的 `::-webkit-scrollbar`):同尺寸容器的 `offsetWidth - clientWidth` 从 0 变成 7。\n * 那正好违反 issue #225 的第 (1) 条「不占用宽度」。`scrollbar-color` / `scrollbar-width` 不触发\n * 这个切换:覆盖式平台上滚动条保持零宽覆盖,经典平台上才按它们上色、收窄。\n *\n * 覆盖式平台(macOS、无头 Chromium)上这条规则几乎不可见——原生的覆盖滚动条由系统绘制,并不\n * 看这两个属性;它真正的用处在经典滚动条的平台(Windows / Linux)。想拿到与库逐像素一致的\n * 几何、圆角与自动隐藏只有上库这一条路,那需要把库初始化进每个 shadow root,超出 issue #225\n * 「组件不必引入第三方依赖」的范围。\n *\n * `scrollbar-color` 与 `scrollbar-width` 都是**继承属性**,写一次即可作用于容器自身及其后代;\n * 调用方只在组件自己的 shadow 里 adopted 本文件(见各组件 `static styles`),所以样式天然隔离,\n * 不会漏到文档层,满足第 (3) 条。\n */\n.wui-scroll {\n scrollbar-color: var(--wui-scrollbar-handle, rgb(0 0 0 / 0.39)) transparent;\n scrollbar-width: thin;\n}\n"],"mappings":""}
@@ -7,4 +7,4 @@
7
7
  *
8
8
  * Released under the MIT license.
9
9
  */
10
- .os-size-observer,.os-size-observer-listener{direction:inherit;pointer-events:none;visibility:hidden;box-sizing:border-box;overflow:hidden;scroll-behavior:auto!important}.os-size-observer,.os-size-observer-listener,.os-size-observer-listener-item,.os-size-observer-listener-item-final{writing-mode:horizontal-tb;position:absolute;top:0;left:0}.os-size-observer{z-index:-1;contain:strict;padding:inherit;border:inherit;box-sizing:inherit;flex-flow:row;margin:-133px;display:flex;inset:0;transform:scale(.1)}.os-size-observer:before{content:"";box-sizing:inherit;flex:none;width:10px;height:10px;padding:10px}.os-size-observer-appear{animation:1ms forwards os-size-observer-appear-animation}.os-size-observer-listener{box-sizing:border-box;padding:inherit;border:inherit;flex:auto;margin:-133px;position:relative;transform:scale(10)}.os-size-observer-listener.ltr{margin-left:0;margin-right:-266px}.os-size-observer-listener.rtl{margin-left:-266px;margin-right:0}.os-size-observer-listener:empty:before{content:"";width:100%;height:100%}.os-size-observer-listener:empty:before,.os-size-observer-listener>.os-size-observer-listener-item{padding:inherit;border:inherit;box-sizing:content-box;flex:auto;display:block;position:relative}.os-size-observer-listener-scroll{box-sizing:border-box;display:flex}.os-size-observer-listener-item{direction:ltr;flex:none;bottom:0;right:0;overflow:hidden}.os-size-observer-listener-item-final{transition:none}@keyframes os-size-observer-appear-animation{0%{cursor:auto}to{cursor:none}}.os-trinsic-observer{box-sizing:border-box;z-index:-1;contain:strict;border:none;flex:none;max-width:0;height:0;max-height:1px;margin:0;padding:0;position:relative;top:calc(100% + 1px);overflow:hidden}.os-trinsic-observer:not(:empty){height:calc(100% + 1px);top:-1px}.os-trinsic-observer:not(:empty)>.os-size-observer{width:1000%;min-width:1px;height:1000%;min-height:1px}html[data-overlayscrollbars-body]{overflow:hidden}html[data-overlayscrollbars-body],html[data-overlayscrollbars-body]>body{width:100%;height:100%;margin:0}html[data-overlayscrollbars-body]>body{margin:0;overflow:visible}[data-overlayscrollbars]{position:relative}[data-overlayscrollbars~=host],[data-overlayscrollbars-padding]{display:flex;scroll-behavior:auto!important;flex-flow:row!important;align-items:stretch!important}[data-overlayscrollbars-padding],[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]){box-sizing:inherit;z-index:0;border:none;flex:auto;width:100%;min-width:0;height:auto;margin:0;padding:0;position:relative}[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]){--os-vaw:0;--os-vah:0;outline:none}[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]):focus{outline:none}[data-overlayscrollbars-viewport][data-overlayscrollbars-viewport~=arrange]:before{content:"";pointer-events:none;z-index:-1;min-width:1px;min-height:1px;width:var(--os-vaw);height:var(--os-vah);position:absolute}[data-overlayscrollbars~=host],[data-overlayscrollbars-padding]{overflow:hidden!important}[data-overlayscrollbars~=host][data-overlayscrollbars~=noClipping],[data-overlayscrollbars-padding~=noClipping]{overflow:visible!important}[data-overlayscrollbars-viewport]{--os-viewport-overflow-x:hidden;--os-viewport-overflow-y:hidden;overflow-x:var(--os-viewport-overflow-x);overflow-y:var(--os-viewport-overflow-y)}[data-overlayscrollbars-viewport~=overflowXVisible]{--os-viewport-overflow-x:visible}[data-overlayscrollbars-viewport~=overflowXHidden]{--os-viewport-overflow-x:hidden}[data-overlayscrollbars-viewport~=overflowXScroll]{--os-viewport-overflow-x:scroll}[data-overlayscrollbars-viewport~=overflowYVisible]{--os-viewport-overflow-y:visible}[data-overlayscrollbars-viewport~=overflowYHidden]{--os-viewport-overflow-y:hidden}[data-overlayscrollbars-viewport~=overflowYScroll]{--os-viewport-overflow-y:scroll}[data-overlayscrollbars-viewport~=overflowImportant]{overflow-x:var(--os-viewport-overflow-x)!important;overflow-y:var(--os-viewport-overflow-y)!important}[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId){font-size:0!important;line-height:0!important}[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId):before,[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId):after,[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId)>:not(#osFakeId){clip:rect(0, 0, 0, 0)!important;white-space:nowrap!important;border-width:0!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;display:none!important;position:absolute!important;overflow:hidden!important}[data-overlayscrollbars-viewport~=measuring],[data-overlayscrollbars-viewport~=scrolling]{scroll-behavior:auto!important;scroll-snap-type:none!important}[data-overlayscrollbars-viewport~=measuring][data-overlayscrollbars-viewport~=overflowXVisible]{overflow-x:hidden!important}[data-overlayscrollbars-viewport~=measuring][data-overlayscrollbars-viewport~=overflowYVisible]{overflow-y:hidden!important}[data-overlayscrollbars-content]{box-sizing:inherit}[data-overlayscrollbars-contents]:not(#osFakeId):not([data-overlayscrollbars-padding]):not([data-overlayscrollbars-viewport]):not([data-overlayscrollbars-content]){display:contents}[data-overlayscrollbars-grid],[data-overlayscrollbars-grid] [data-overlayscrollbars-padding]{grid-template:1fr/1fr;display:grid}[data-overlayscrollbars-grid]>[data-overlayscrollbars-padding],[data-overlayscrollbars-grid]>[data-overlayscrollbars-viewport],[data-overlayscrollbars-grid]>[data-overlayscrollbars-padding]>[data-overlayscrollbars-viewport]{width:auto!important;height:auto!important}@property --os-scroll-percent{syntax:"<number>";inherits:true;initial-value:0}@property --os-viewport-percent{syntax:"<number>";inherits:true;initial-value:0}.os-scrollbar{--os-viewport-percent:0;--os-scroll-percent:0;--os-scroll-direction:0;--os-scroll-percent-directional:calc(var(--os-scroll-percent) - (var(--os-scroll-percent) + (1 - var(--os-scroll-percent)) * -1) * var(--os-scroll-direction));contain:size layout;contain:size layout style;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .15s,visibility .15s,top .15s,right .15s,bottom .15s,left .15s;position:absolute}body>.os-scrollbar{z-index:99999;position:fixed}.os-scrollbar-transitionless{transition:none!important}.os-scrollbar-track{position:relative;border:none!important;padding:0!important}.os-scrollbar-handle{position:absolute}.os-scrollbar-track,.os-scrollbar-handle{pointer-events:none;width:100%;height:100%}.os-scrollbar.os-scrollbar-track-interactive .os-scrollbar-track,.os-scrollbar.os-scrollbar-handle-interactive .os-scrollbar-handle{pointer-events:auto;touch-action:none}.os-scrollbar-horizontal{bottom:0;left:0}.os-scrollbar-vertical{top:0;right:0}.os-scrollbar-rtl.os-scrollbar-horizontal{right:0}.os-scrollbar-rtl.os-scrollbar-vertical{left:0;right:auto}.os-scrollbar-visible{opacity:1;visibility:visible}.os-scrollbar-auto-hide.os-scrollbar-auto-hide-hidden{opacity:0;visibility:hidden}.os-scrollbar-interaction.os-scrollbar-visible{opacity:1;visibility:visible}.os-scrollbar-unusable,.os-scrollbar-unusable *,.os-scrollbar-wheel,.os-scrollbar-wheel *{pointer-events:none!important}.os-scrollbar-unusable .os-scrollbar-handle{opacity:0!important;transition:none!important}.os-scrollbar-horizontal .os-scrollbar-handle{bottom:0;left:calc(var(--os-scroll-percent-directional) * 100%);transform:translateX(calc(var(--os-scroll-percent-directional) * -100%));width:calc(var(--os-viewport-percent) * 100%)}.os-scrollbar-vertical .os-scrollbar-handle{right:0;top:calc(var(--os-scroll-percent-directional) * 100%);transform:translateY(calc(var(--os-scroll-percent-directional) * -100%));height:calc(var(--os-viewport-percent) * 100%)}@supports (container-type:size){.os-scrollbar-track{container-type:size}.os-scrollbar-horizontal .os-scrollbar-handle{transform:translateX(calc(var(--os-scroll-percent-directional) * 100cqw + var(--os-scroll-percent-directional) * -100%));left:auto}.os-scrollbar-vertical .os-scrollbar-handle{transform:translateY(calc(var(--os-scroll-percent-directional) * 100cqh + var(--os-scroll-percent-directional) * -100%));top:auto}.os-scrollbar-rtl.os-scrollbar-horizontal .os-scrollbar-handle{left:0;right:auto}}.os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle{left:0;right:auto}.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless,.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless.os-scrollbar-rtl{left:0;right:0}.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless,.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless.os-scrollbar-rtl{top:0;bottom:0}@media print{.os-scrollbar{display:none}}.os-scrollbar{--os-size:0;--os-padding-perpendicular:0;--os-padding-axis:0;--os-track-border-radius:0;--os-track-bg:none;--os-track-bg-hover:none;--os-track-bg-active:none;--os-track-border:none;--os-track-border-hover:none;--os-track-border-active:none;--os-handle-border-radius:0;--os-handle-bg:none;--os-handle-bg-hover:none;--os-handle-bg-active:none;--os-handle-border:none;--os-handle-border-hover:none;--os-handle-border-active:none;--os-handle-min-size:33px;--os-handle-max-size:none;--os-handle-perpendicular-size:100%;--os-handle-perpendicular-size-hover:100%;--os-handle-perpendicular-size-active:100%;--os-handle-interactive-area-offset:0}.os-scrollbar-track{border:var(--os-track-border);border-radius:var(--os-track-border-radius);background:var(--os-track-bg);transition:opacity .15s,background-color .15s,border-color .15s}.os-scrollbar-track:hover{border:var(--os-track-border-hover);background:var(--os-track-bg-hover)}.os-scrollbar-track:active{border:var(--os-track-border-active);background:var(--os-track-bg-active)}.os-scrollbar-handle{border:var(--os-handle-border);border-radius:var(--os-handle-border-radius);background:var(--os-handle-bg)}.os-scrollbar-handle:hover{border:var(--os-handle-border-hover);background:var(--os-handle-bg-hover)}.os-scrollbar-handle:active{border:var(--os-handle-border-active);background:var(--os-handle-bg-active)}.os-scrollbar-track:before,.os-scrollbar-handle:before{content:"";display:block;position:absolute;inset:0}.os-scrollbar-horizontal{padding:var(--os-padding-perpendicular) var(--os-padding-axis);right:var(--os-size);height:var(--os-size)}.os-scrollbar-horizontal.os-scrollbar-rtl{left:var(--os-size);right:0}.os-scrollbar-horizontal .os-scrollbar-track:before{top:calc(var(--os-padding-perpendicular) * -1);bottom:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-horizontal .os-scrollbar-handle{min-width:var(--os-handle-min-size);max-width:var(--os-handle-max-size);height:var(--os-handle-perpendicular-size);transition:opacity .15s,background-color .15s,border-color .15s,height .15s}.os-scrollbar-horizontal .os-scrollbar-handle:before{top:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);bottom:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-horizontal:hover .os-scrollbar-handle{height:var(--os-handle-perpendicular-size-hover)}.os-scrollbar-horizontal:active .os-scrollbar-handle{height:var(--os-handle-perpendicular-size-active)}.os-scrollbar-vertical{padding:var(--os-padding-axis) var(--os-padding-perpendicular);bottom:var(--os-size);width:var(--os-size)}.os-scrollbar-vertical .os-scrollbar-track:before{left:calc(var(--os-padding-perpendicular) * -1);right:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical .os-scrollbar-handle{min-height:var(--os-handle-min-size);max-height:var(--os-handle-max-size);width:var(--os-handle-perpendicular-size);transition:opacity .15s,background-color .15s,border-color .15s,width .15s}.os-scrollbar-vertical .os-scrollbar-handle:before{left:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);right:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical.os-scrollbar-rtl .os-scrollbar-handle:before{right:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);left:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical:hover .os-scrollbar-handle{width:var(--os-handle-perpendicular-size-hover)}.os-scrollbar-vertical:active .os-scrollbar-handle{width:var(--os-handle-perpendicular-size-active)}[data-overlayscrollbars-viewport~=measuring]>.os-scrollbar,.os-theme-none.os-scrollbar{display:none!important}.os-theme-dark,.os-theme-light{box-sizing:border-box;--os-size:10px;--os-padding-perpendicular:2px;--os-padding-axis:2px;--os-track-border-radius:10px;--os-handle-interactive-area-offset:4px;--os-handle-border-radius:10px}.os-theme-dark{--os-handle-bg:#00000070;--os-handle-bg-hover:#0000008c;--os-handle-bg-active:#000000a8}.os-theme-light{--os-handle-bg:#ffffff70;--os-handle-bg-hover:#ffffff8c;--os-handle-bg-active:#ffffffa8}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport]),[data-overlayscrollbars-viewport~=scrollbarHidden],html[data-overlayscrollbars-viewport~=scrollbarHidden]>body{scrollbar-width:none!important}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport])::-webkit-scrollbar{appearance:none!important;width:0!important;height:0!important;display:none!important}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport])::-webkit-scrollbar-corner{appearance:none!important;width:0!important;height:0!important;display:none!important}[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar{appearance:none!important;width:0!important;height:0!important;display:none!important}[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar-corner{appearance:none!important;width:0!important;height:0!important;display:none!important}html[data-overlayscrollbars-viewport~=scrollbarHidden]>body::-webkit-scrollbar{appearance:none!important;width:0!important;height:0!important;display:none!important}html[data-overlayscrollbars-viewport~=scrollbarHidden]>body::-webkit-scrollbar-corner{appearance:none!important;width:0!important;height:0!important;display:none!important}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars]):not(html):not(body){overflow:auto}.os-theme-macos{--os-size:13px;--os-padding-perpendicular:3px;--os-padding-axis:2px;--os-track-border-radius:100px;--os-handle-border-radius:100px;--os-handle-interactive-area-offset:4px;--os-track-bg:none;--os-track-bg-hover:none;--os-track-bg-active:none;--os-handle-bg:var(--wui-scrollbar-handle,#00000080);--os-handle-bg-hover:var(--wui-scrollbar-handle-hover,#0000009e);--os-handle-bg-active:var(--wui-scrollbar-handle-active,#000000bd);box-sizing:border-box}web-ui-theme[resolved-appearance=light]{--wui-scrollbar-handle:#00000080;--wui-scrollbar-handle-hover:#0000009e;--wui-scrollbar-handle-active:#000000bd}web-ui-theme[resolved-appearance=dark]{--wui-scrollbar-handle:#ffffff80;--wui-scrollbar-handle-hover:#ffffff9e;--wui-scrollbar-handle-active:#ffffffbd}html:has(web-ui-theme[resolved-appearance=dark]:not(web-ui-theme *)){--wui-scrollbar-handle:#ffffff80;--wui-scrollbar-handle-hover:#ffffff9e;--wui-scrollbar-handle-active:#ffffffbd}
10
+ .os-size-observer,.os-size-observer-listener{direction:inherit;pointer-events:none;visibility:hidden;box-sizing:border-box;overflow:hidden;scroll-behavior:auto!important}.os-size-observer,.os-size-observer-listener,.os-size-observer-listener-item,.os-size-observer-listener-item-final{writing-mode:horizontal-tb;position:absolute;top:0;left:0}.os-size-observer{z-index:-1;contain:strict;padding:inherit;border:inherit;box-sizing:inherit;flex-flow:row;margin:-133px;display:flex;inset:0;transform:scale(.1)}.os-size-observer:before{content:"";box-sizing:inherit;flex:none;width:10px;height:10px;padding:10px}.os-size-observer-appear{animation:1ms forwards os-size-observer-appear-animation}.os-size-observer-listener{box-sizing:border-box;padding:inherit;border:inherit;flex:auto;margin:-133px;position:relative;transform:scale(10)}.os-size-observer-listener.ltr{margin-left:0;margin-right:-266px}.os-size-observer-listener.rtl{margin-left:-266px;margin-right:0}.os-size-observer-listener:empty:before{content:"";width:100%;height:100%}.os-size-observer-listener:empty:before,.os-size-observer-listener>.os-size-observer-listener-item{padding:inherit;border:inherit;box-sizing:content-box;flex:auto;display:block;position:relative}.os-size-observer-listener-scroll{box-sizing:border-box;display:flex}.os-size-observer-listener-item{direction:ltr;flex:none;bottom:0;right:0;overflow:hidden}.os-size-observer-listener-item-final{transition:none}@keyframes os-size-observer-appear-animation{0%{cursor:auto}to{cursor:none}}.os-trinsic-observer{box-sizing:border-box;z-index:-1;contain:strict;border:none;flex:none;max-width:0;height:0;max-height:1px;margin:0;padding:0;position:relative;top:calc(100% + 1px);overflow:hidden}.os-trinsic-observer:not(:empty){height:calc(100% + 1px);top:-1px}.os-trinsic-observer:not(:empty)>.os-size-observer{width:1000%;min-width:1px;height:1000%;min-height:1px}html[data-overlayscrollbars-body]{overflow:hidden}html[data-overlayscrollbars-body],html[data-overlayscrollbars-body]>body{width:100%;height:100%;margin:0}html[data-overlayscrollbars-body]>body{margin:0;overflow:visible}[data-overlayscrollbars]{position:relative}[data-overlayscrollbars~=host],[data-overlayscrollbars-padding]{display:flex;scroll-behavior:auto!important;flex-flow:row!important;align-items:stretch!important}[data-overlayscrollbars-padding],[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]){box-sizing:inherit;z-index:0;border:none;flex:auto;width:100%;min-width:0;height:auto;margin:0;padding:0;position:relative}[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]){--os-vaw:0;--os-vah:0;outline:none}[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]):focus{outline:none}[data-overlayscrollbars-viewport][data-overlayscrollbars-viewport~=arrange]:before{content:"";pointer-events:none;z-index:-1;min-width:1px;min-height:1px;width:var(--os-vaw);height:var(--os-vah);position:absolute}[data-overlayscrollbars~=host],[data-overlayscrollbars-padding]{overflow:hidden!important}[data-overlayscrollbars~=host][data-overlayscrollbars~=noClipping],[data-overlayscrollbars-padding~=noClipping]{overflow:visible!important}[data-overlayscrollbars-viewport]{--os-viewport-overflow-x:hidden;--os-viewport-overflow-y:hidden;overflow-x:var(--os-viewport-overflow-x);overflow-y:var(--os-viewport-overflow-y)}[data-overlayscrollbars-viewport~=overflowXVisible]{--os-viewport-overflow-x:visible}[data-overlayscrollbars-viewport~=overflowXHidden]{--os-viewport-overflow-x:hidden}[data-overlayscrollbars-viewport~=overflowXScroll]{--os-viewport-overflow-x:scroll}[data-overlayscrollbars-viewport~=overflowYVisible]{--os-viewport-overflow-y:visible}[data-overlayscrollbars-viewport~=overflowYHidden]{--os-viewport-overflow-y:hidden}[data-overlayscrollbars-viewport~=overflowYScroll]{--os-viewport-overflow-y:scroll}[data-overlayscrollbars-viewport~=overflowImportant]{overflow-x:var(--os-viewport-overflow-x)!important;overflow-y:var(--os-viewport-overflow-y)!important}[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId){font-size:0!important;line-height:0!important}[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId):before,[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId):after,[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId)>:not(#osFakeId){clip:rect(0, 0, 0, 0)!important;white-space:nowrap!important;border-width:0!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;display:none!important;position:absolute!important;overflow:hidden!important}[data-overlayscrollbars-viewport~=measuring],[data-overlayscrollbars-viewport~=scrolling]{scroll-behavior:auto!important;scroll-snap-type:none!important}[data-overlayscrollbars-viewport~=measuring][data-overlayscrollbars-viewport~=overflowXVisible]{overflow-x:hidden!important}[data-overlayscrollbars-viewport~=measuring][data-overlayscrollbars-viewport~=overflowYVisible]{overflow-y:hidden!important}[data-overlayscrollbars-content]{box-sizing:inherit}[data-overlayscrollbars-contents]:not(#osFakeId):not([data-overlayscrollbars-padding]):not([data-overlayscrollbars-viewport]):not([data-overlayscrollbars-content]){display:contents}[data-overlayscrollbars-grid],[data-overlayscrollbars-grid] [data-overlayscrollbars-padding]{grid-template:1fr/1fr;display:grid}[data-overlayscrollbars-grid]>[data-overlayscrollbars-padding],[data-overlayscrollbars-grid]>[data-overlayscrollbars-viewport],[data-overlayscrollbars-grid]>[data-overlayscrollbars-padding]>[data-overlayscrollbars-viewport]{width:auto!important;height:auto!important}@property --os-scroll-percent{syntax:"<number>";inherits:true;initial-value:0}@property --os-viewport-percent{syntax:"<number>";inherits:true;initial-value:0}.os-scrollbar{--os-viewport-percent:0;--os-scroll-percent:0;--os-scroll-direction:0;--os-scroll-percent-directional:calc(var(--os-scroll-percent) - (var(--os-scroll-percent) + (1 - var(--os-scroll-percent)) * -1) * var(--os-scroll-direction));contain:size layout;contain:size layout style;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .15s,visibility .15s,top .15s,right .15s,bottom .15s,left .15s;position:absolute}body>.os-scrollbar{z-index:99999;position:fixed}.os-scrollbar-transitionless{transition:none!important}.os-scrollbar-track{position:relative;border:none!important;padding:0!important}.os-scrollbar-handle{position:absolute}.os-scrollbar-track,.os-scrollbar-handle{pointer-events:none;width:100%;height:100%}.os-scrollbar.os-scrollbar-track-interactive .os-scrollbar-track,.os-scrollbar.os-scrollbar-handle-interactive .os-scrollbar-handle{pointer-events:auto;touch-action:none}.os-scrollbar-horizontal{bottom:0;left:0}.os-scrollbar-vertical{top:0;right:0}.os-scrollbar-rtl.os-scrollbar-horizontal{right:0}.os-scrollbar-rtl.os-scrollbar-vertical{left:0;right:auto}.os-scrollbar-visible{opacity:1;visibility:visible}.os-scrollbar-auto-hide.os-scrollbar-auto-hide-hidden{opacity:0;visibility:hidden}.os-scrollbar-interaction.os-scrollbar-visible{opacity:1;visibility:visible}.os-scrollbar-unusable,.os-scrollbar-unusable *,.os-scrollbar-wheel,.os-scrollbar-wheel *{pointer-events:none!important}.os-scrollbar-unusable .os-scrollbar-handle{opacity:0!important;transition:none!important}.os-scrollbar-horizontal .os-scrollbar-handle{bottom:0;left:calc(var(--os-scroll-percent-directional) * 100%);transform:translateX(calc(var(--os-scroll-percent-directional) * -100%));width:calc(var(--os-viewport-percent) * 100%)}.os-scrollbar-vertical .os-scrollbar-handle{right:0;top:calc(var(--os-scroll-percent-directional) * 100%);transform:translateY(calc(var(--os-scroll-percent-directional) * -100%));height:calc(var(--os-viewport-percent) * 100%)}@supports (container-type:size){.os-scrollbar-track{container-type:size}.os-scrollbar-horizontal .os-scrollbar-handle{transform:translateX(calc(var(--os-scroll-percent-directional) * 100cqw + var(--os-scroll-percent-directional) * -100%));left:auto}.os-scrollbar-vertical .os-scrollbar-handle{transform:translateY(calc(var(--os-scroll-percent-directional) * 100cqh + var(--os-scroll-percent-directional) * -100%));top:auto}.os-scrollbar-rtl.os-scrollbar-horizontal .os-scrollbar-handle{left:0;right:auto}}.os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle{left:0;right:auto}.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless,.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless.os-scrollbar-rtl{left:0;right:0}.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless,.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless.os-scrollbar-rtl{top:0;bottom:0}@media print{.os-scrollbar{display:none}}.os-scrollbar{--os-size:0;--os-padding-perpendicular:0;--os-padding-axis:0;--os-track-border-radius:0;--os-track-bg:none;--os-track-bg-hover:none;--os-track-bg-active:none;--os-track-border:none;--os-track-border-hover:none;--os-track-border-active:none;--os-handle-border-radius:0;--os-handle-bg:none;--os-handle-bg-hover:none;--os-handle-bg-active:none;--os-handle-border:none;--os-handle-border-hover:none;--os-handle-border-active:none;--os-handle-min-size:33px;--os-handle-max-size:none;--os-handle-perpendicular-size:100%;--os-handle-perpendicular-size-hover:100%;--os-handle-perpendicular-size-active:100%;--os-handle-interactive-area-offset:0}.os-scrollbar-track{border:var(--os-track-border);border-radius:var(--os-track-border-radius);background:var(--os-track-bg);transition:opacity .15s,background-color .15s,border-color .15s}.os-scrollbar-track:hover{border:var(--os-track-border-hover);background:var(--os-track-bg-hover)}.os-scrollbar-track:active{border:var(--os-track-border-active);background:var(--os-track-bg-active)}.os-scrollbar-handle{border:var(--os-handle-border);border-radius:var(--os-handle-border-radius);background:var(--os-handle-bg)}.os-scrollbar-handle:hover{border:var(--os-handle-border-hover);background:var(--os-handle-bg-hover)}.os-scrollbar-handle:active{border:var(--os-handle-border-active);background:var(--os-handle-bg-active)}.os-scrollbar-track:before,.os-scrollbar-handle:before{content:"";display:block;position:absolute;inset:0}.os-scrollbar-horizontal{padding:var(--os-padding-perpendicular) var(--os-padding-axis);right:var(--os-size);height:var(--os-size)}.os-scrollbar-horizontal.os-scrollbar-rtl{left:var(--os-size);right:0}.os-scrollbar-horizontal .os-scrollbar-track:before{top:calc(var(--os-padding-perpendicular) * -1);bottom:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-horizontal .os-scrollbar-handle{min-width:var(--os-handle-min-size);max-width:var(--os-handle-max-size);height:var(--os-handle-perpendicular-size);transition:opacity .15s,background-color .15s,border-color .15s,height .15s}.os-scrollbar-horizontal .os-scrollbar-handle:before{top:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);bottom:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-horizontal:hover .os-scrollbar-handle{height:var(--os-handle-perpendicular-size-hover)}.os-scrollbar-horizontal:active .os-scrollbar-handle{height:var(--os-handle-perpendicular-size-active)}.os-scrollbar-vertical{padding:var(--os-padding-axis) var(--os-padding-perpendicular);bottom:var(--os-size);width:var(--os-size)}.os-scrollbar-vertical .os-scrollbar-track:before{left:calc(var(--os-padding-perpendicular) * -1);right:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical .os-scrollbar-handle{min-height:var(--os-handle-min-size);max-height:var(--os-handle-max-size);width:var(--os-handle-perpendicular-size);transition:opacity .15s,background-color .15s,border-color .15s,width .15s}.os-scrollbar-vertical .os-scrollbar-handle:before{left:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);right:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical.os-scrollbar-rtl .os-scrollbar-handle:before{right:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);left:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical:hover .os-scrollbar-handle{width:var(--os-handle-perpendicular-size-hover)}.os-scrollbar-vertical:active .os-scrollbar-handle{width:var(--os-handle-perpendicular-size-active)}[data-overlayscrollbars-viewport~=measuring]>.os-scrollbar,.os-theme-none.os-scrollbar{display:none!important}.os-theme-dark,.os-theme-light{box-sizing:border-box;--os-size:10px;--os-padding-perpendicular:2px;--os-padding-axis:2px;--os-track-border-radius:10px;--os-handle-interactive-area-offset:4px;--os-handle-border-radius:10px}.os-theme-dark{--os-handle-bg:#00000070;--os-handle-bg-hover:#0000008c;--os-handle-bg-active:#000000a8}.os-theme-light{--os-handle-bg:#ffffff70;--os-handle-bg-hover:#ffffff8c;--os-handle-bg-active:#ffffffa8}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport]),[data-overlayscrollbars-viewport~=scrollbarHidden],html[data-overlayscrollbars-viewport~=scrollbarHidden]>body{scrollbar-width:none!important}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport])::-webkit-scrollbar{appearance:none!important;width:0!important;height:0!important;display:none!important}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport])::-webkit-scrollbar-corner{appearance:none!important;width:0!important;height:0!important;display:none!important}[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar{appearance:none!important;width:0!important;height:0!important;display:none!important}[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar-corner{appearance:none!important;width:0!important;height:0!important;display:none!important}html[data-overlayscrollbars-viewport~=scrollbarHidden]>body::-webkit-scrollbar{appearance:none!important;width:0!important;height:0!important;display:none!important}html[data-overlayscrollbars-viewport~=scrollbarHidden]>body::-webkit-scrollbar-corner{appearance:none!important;width:0!important;height:0!important;display:none!important}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars]):not(html):not(body){overflow:auto}.os-theme-macos{--os-size:13px;--os-padding-perpendicular:3px;--os-padding-axis:2px;--os-track-border-radius:100px;--os-handle-border-radius:100px;--os-handle-interactive-area-offset:4px;--os-track-bg:none;--os-track-bg-hover:none;--os-track-bg-active:none;--os-handle-bg:var(--wui-scrollbar-handle,#00000063);--os-handle-bg-hover:var(--wui-scrollbar-handle-hover,#00000082);--os-handle-bg-active:var(--wui-scrollbar-handle-active,#000000a1);box-sizing:border-box}web-ui-theme[resolved-appearance=light]{--wui-scrollbar-handle:#00000063;--wui-scrollbar-handle-hover:#00000082;--wui-scrollbar-handle-active:#000000a1}web-ui-theme[resolved-appearance=dark]{--wui-scrollbar-handle:#ffffff80;--wui-scrollbar-handle-hover:#ffffff9e;--wui-scrollbar-handle-active:#ffffffbd}html:has(web-ui-theme[resolved-appearance=dark]:not(web-ui-theme *)){--wui-scrollbar-handle:#ffffff80;--wui-scrollbar-handle-hover:#ffffff9e;--wui-scrollbar-handle-active:#ffffffbd}
@@ -1,29 +1,31 @@
1
1
  import e from "../../assets/glass.js";
2
2
  import t from "../../assets/overlay-motion.js";
3
- import n from "../../assets/menu-portal.js";
4
- import { resolveOverlayContainer as r } from "../overlay/portal.js";
3
+ import n from "../../scrollbars/internal.js";
4
+ import r from "../../assets/menu-portal.js";
5
+ import { resolveOverlayContainer as i } from "../overlay/portal.js";
5
6
  //#region src/shared/menu-portal/menu-portal.ts
6
- var i = `${e}
7
- ${n}
8
- ${t}`;
9
- function a(e, t, n) {
10
- let a = document.createElement("div");
11
- a.className = `wui-menu-portal-overlay wui-floating-panel wui-glass ${e}`, a.dataset.wuiPresence = "entering";
7
+ var a = `${e}
8
+ ${r}
9
+ ${t}
10
+ ${n}`;
11
+ function o(e, t, n) {
12
+ let r = document.createElement("div");
13
+ r.className = `wui-menu-portal-overlay wui-floating-panel wui-glass ${e}`, r.dataset.wuiPresence = "entering";
12
14
  let o = document.createElement("div");
13
- o.className = "wui-menu-scroll";
15
+ o.className = "wui-menu-scroll wui-scroll";
14
16
  let s = document.createElement("div");
15
17
  s.className = "wui-menu-content", o.append(s);
16
- let c = n ?? r(void 0, t ?? document.body, { preferRootTheme: t === void 0 });
18
+ let c = n ?? i(void 0, t ?? document.body, { preferRootTheme: t === void 0 });
17
19
  if (c instanceof HTMLDialogElement) {
18
20
  let e = document.createElement("style");
19
- e.textContent = i, a.append(e);
21
+ e.textContent = a, r.append(e);
20
22
  }
21
- return a.append(o), c.appendChild(a), {
22
- panel: a,
23
+ return r.append(o), c.appendChild(r), {
24
+ panel: r,
23
25
  content: s
24
26
  };
25
27
  }
26
28
  //#endregion
27
- export { a as createMenuPortalOverlay };
29
+ export { o as createMenuPortalOverlay };
28
30
 
29
31
  //# sourceMappingURL=menu-portal.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"menu-portal.js","names":[],"sources":["../../../src/shared/menu-portal/menu-portal.ts"],"sourcesContent":["import glass from '@/assets/glass.css?inline'\nimport menuPortalStyle from '@/assets/menu-portal.css?inline'\nimport overlayMotion from '@/assets/overlay-motion.css?inline'\nimport { resolveOverlayContainer } from '@/shared/overlay/portal'\n\nexport interface MenuPortalOverlay {\n readonly panel: HTMLElement\n readonly content: HTMLElement\n}\n\n// 菜单面板所需的共享样式。theme-owned/fallback overlay root 已预注入这些样式;但当 overlay 因\n// target 位于已打开原生 dialog 内而被挂到该 dialog(top layer)时,dialog 的\n// shadow root 并不包含这些样式。故面板自携带一份,保证在任何容器下都能正确渲染。\nconst MENU_PANEL_STYLES = `${glass}\n${menuPortalStyle}\n${overlayMotion}`\n\n/**\n * 菜单浮层面板:面板直接挂到 overlay 容器(与普通 Overlay Portal 共用容器解析),\n * 样式复用容器内已注入的共享菜单样式(glass/menu-portal/overlay-motion),\n * 因此无需自建 shadow。菜单内容由 dropdown/context-menu 自行构建(menu-tree),\n * 这里只提供 panel 与 content 挂载点。\n */\n/**\n * @param scrim 显式容器。模态化的 context-menu 传自己的 scrim `<dialog>`,面板因此\n * 与 scrim 同处 top layer,「点外面」由 scrim 吃掉,面板不会被下层抢走命中。\n *\n 不能靠 `resolveOverlayContainer` 的祖先发现自动找到它:该函数查的是「**target 的祖先**里\n 有没有已打开的 dialog」,而 scrim 是面板的**后代方向**,方向相反,查不到。菜单面板\n * 又不在 host 的 shadow root 里(它在 `web-ui-theme` 的 overlay root 内),这条路径也断。\n *\n * 省略时行为与从前完全一致 —— dropdown 的 `target` 承重调用点(dropdown-in-dialog)\n * 一个字都不用改。\n */\nexport function createMenuPortalOverlay(className: string, target?: Element, scrim?: HTMLElement): MenuPortalOverlay {\n const panel = document.createElement('div')\n // 单层玻璃:wui-glass 留在面板自身,背景/阴影/backdrop-filter 随面板 opacity\n // 与 blur 插值一起过渡(见 overlay-motion.css),无需 blur/surface 双层。\n panel.className = `wui-menu-portal-overlay wui-floating-panel wui-glass ${className}`\n panel.dataset.wuiPresence = 'entering'\n const scroll = document.createElement('div')\n scroll.className = 'wui-menu-scroll'\n const content = document.createElement('div')\n content.className = 'wui-menu-content'\n scroll.append(content)\n\n const container =\n scrim ??\n resolveOverlayContainer(undefined, target ?? document.body, {\n preferRootTheme: target === undefined\n })\n // theme-owned/fallback overlay root 已预注入共享样式;只有 dialog 没有,因此按容器条件注入。\n if (container instanceof HTMLDialogElement) {\n const style = document.createElement('style')\n style.textContent = MENU_PANEL_STYLES\n panel.append(style)\n }\n panel.append(scroll)\n container.appendChild(panel)\n\n return { panel, content }\n}\n"],"mappings":";;;;;AAaA,IAAM,IAAoB,GAAG,EAAM;EACjC,EAAgB;EAChB;AAmBF,SAAgB,EAAwB,GAAmB,GAAkB,GAAwC;CACnH,IAAM,IAAQ,SAAS,cAAc,KAAK;CAI1C,AADA,EAAM,YAAY,wDAAwD,KAC1E,EAAM,QAAQ,cAAc;CAC5B,IAAM,IAAS,SAAS,cAAc,KAAK;CAC3C,EAAO,YAAY;CACnB,IAAM,IAAU,SAAS,cAAc,KAAK;CAE5C,AADA,EAAQ,YAAY,oBACpB,EAAO,OAAO,CAAO;CAErB,IAAM,IACJ,KACA,EAAwB,KAAA,GAAW,KAAU,SAAS,MAAM,EAC1D,iBAAiB,MAAW,KAAA,EAC9B,CAAC;CAEH,IAAI,aAAqB,mBAAmB;EAC1C,IAAM,IAAQ,SAAS,cAAc,OAAO;EAE5C,AADA,EAAM,cAAc,GACpB,EAAM,OAAO,CAAK;CACpB;CAIA,OAHA,EAAM,OAAO,CAAM,GACnB,EAAU,YAAY,CAAK,GAEpB;EAAE;EAAO;CAAQ;AAC1B"}
1
+ {"version":3,"file":"menu-portal.js","names":[],"sources":["../../../src/shared/menu-portal/menu-portal.ts"],"sourcesContent":["import glass from '@/assets/glass.css?inline'\nimport menuPortalStyle from '@/assets/menu-portal.css?inline'\nimport overlayMotion from '@/assets/overlay-motion.css?inline'\nimport internalScrollbars from '@/scrollbars/internal.css?inline'\nimport { resolveOverlayContainer } from '@/shared/overlay/portal'\n\nexport interface MenuPortalOverlay {\n readonly panel: HTMLElement\n readonly content: HTMLElement\n}\n\n// 菜单面板所需的共享样式。theme-owned/fallback overlay root 已预注入这些样式;但当 overlay 因\n// target 位于已打开原生 dialog 内而被挂到该 dialog(top layer)时,dialog 的\n// shadow root 并不包含这些样式。故面板自携带一份,保证在任何容器下都能正确渲染。\nconst MENU_PANEL_STYLES = `${glass}\n${menuPortalStyle}\n${overlayMotion}\n${internalScrollbars}`\n\n/**\n * 菜单浮层面板:面板直接挂到 overlay 容器(与普通 Overlay Portal 共用容器解析),\n * 样式复用容器内已注入的共享菜单样式(glass/menu-portal/overlay-motion),\n * 因此无需自建 shadow。菜单内容由 dropdown/context-menu 自行构建(menu-tree),\n * 这里只提供 panel 与 content 挂载点。\n */\n/**\n * @param scrim 显式容器。模态化的 context-menu 传自己的 scrim `<dialog>`,面板因此\n * 与 scrim 同处 top layer,「点外面」由 scrim 吃掉,面板不会被下层抢走命中。\n *\n 不能靠 `resolveOverlayContainer` 的祖先发现自动找到它:该函数查的是「**target 的祖先**里\n 有没有已打开的 dialog」,而 scrim 是面板的**后代方向**,方向相反,查不到。菜单面板\n * 又不在 host 的 shadow root 里(它在 `web-ui-theme` 的 overlay root 内),这条路径也断。\n *\n * 省略时行为与从前完全一致 —— dropdown 的 `target` 承重调用点(dropdown-in-dialog)\n * 一个字都不用改。\n */\nexport function createMenuPortalOverlay(className: string, target?: Element, scrim?: HTMLElement): MenuPortalOverlay {\n const panel = document.createElement('div')\n // 单层玻璃:wui-glass 留在面板自身,背景/阴影/backdrop-filter 随面板 opacity\n // 与 blur 插值一起过渡(见 overlay-motion.css),无需 blur/surface 双层。\n panel.className = `wui-menu-portal-overlay wui-floating-panel wui-glass ${className}`\n panel.dataset.wuiPresence = 'entering'\n const scroll = document.createElement('div')\n scroll.className = 'wui-menu-scroll wui-scroll'\n const content = document.createElement('div')\n content.className = 'wui-menu-content'\n scroll.append(content)\n\n const container =\n scrim ??\n resolveOverlayContainer(undefined, target ?? document.body, {\n preferRootTheme: target === undefined\n })\n // theme-owned/fallback overlay root 已预注入共享样式;只有 dialog 没有,因此按容器条件注入。\n if (container instanceof HTMLDialogElement) {\n const style = document.createElement('style')\n style.textContent = MENU_PANEL_STYLES\n panel.append(style)\n }\n panel.append(scroll)\n container.appendChild(panel)\n\n return { panel, content }\n}\n"],"mappings":";;;;;;AAcA,IAAM,IAAoB,GAAG,EAAM;EACjC,EAAgB;EAChB,EAAc;EACd;AAmBF,SAAgB,EAAwB,GAAmB,GAAkB,GAAwC;CACnH,IAAM,IAAQ,SAAS,cAAc,KAAK;CAI1C,AADA,EAAM,YAAY,wDAAwD,KAC1E,EAAM,QAAQ,cAAc;CAC5B,IAAM,IAAS,SAAS,cAAc,KAAK;CAC3C,EAAO,YAAY;CACnB,IAAM,IAAU,SAAS,cAAc,KAAK;CAE5C,AADA,EAAQ,YAAY,oBACpB,EAAO,OAAO,CAAO;CAErB,IAAM,IACJ,KACA,EAAwB,KAAA,GAAW,KAAU,SAAS,MAAM,EAC1D,iBAAiB,MAAW,KAAA,EAC9B,CAAC;CAEH,IAAI,aAAqB,mBAAmB;EAC1C,IAAM,IAAQ,SAAS,cAAc,OAAO;EAE5C,AADA,EAAM,cAAc,GACpB,EAAM,OAAO,CAAK;CACpB;CAIA,OAHA,EAAM,OAAO,CAAM,GACnB,EAAU,YAAY,CAAK,GAEpB;EAAE;EAAO;CAAQ;AAC1B"}
@@ -1,28 +1,29 @@
1
1
  import e from "../../assets/glass.js";
2
2
  import t from "../../assets/overlay-motion.js";
3
- import n from "../../assets/menu-portal.js";
4
- import r from "../../assets/toast-containers.js";
3
+ import n from "../../scrollbars/internal.js";
4
+ import r from "../../assets/menu-portal.js";
5
+ import i from "../../assets/toast-containers.js";
5
6
  //#region src/shared/overlay/overlay-root.ts
6
- var i = "data-wui-overlay-root", a = `${e}\n${r}\n${n}\n${t}`;
7
- function o(e) {
7
+ var a = "data-wui-overlay-root", o = `${e}\n${i}\n${r}\n${t}\n${n}`;
8
+ function s(e) {
8
9
  let t = document.createElement("style");
9
- t.textContent = a, e.prepend(t);
10
+ t.textContent = o, e.prepend(t);
10
11
  }
11
- function s() {
12
- let e = document.querySelector(`[${i}]`);
13
- if (e?.shadowRoot) return c(e.shadowRoot);
12
+ function c() {
13
+ let e = document.querySelector(`[${a}]`);
14
+ if (e?.shadowRoot) return l(e.shadowRoot);
14
15
  let t = document.createElement("div");
15
- t.setAttribute(i, "");
16
+ t.setAttribute(a, "");
16
17
  let n = t.attachShadow({ mode: "open" });
17
- return o(n), document.body.appendChild(t), c(n);
18
+ return s(n), document.body.appendChild(t), l(n);
18
19
  }
19
- function c(e) {
20
+ function l(e) {
20
21
  let t = e.querySelector("[data-wui-overlay-container]");
21
22
  if (t) return t;
22
23
  let n = document.createElement("div");
23
24
  return n.setAttribute("data-wui-overlay-container", ""), e.appendChild(n), n;
24
25
  }
25
26
  //#endregion
26
- export { o as applyOverlayRootStyles, s as getFallbackOverlayRoot, c as getOverlayContainer };
27
+ export { s as applyOverlayRootStyles, c as getFallbackOverlayRoot, l as getOverlayContainer };
27
28
 
28
29
  //# sourceMappingURL=overlay-root.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"overlay-root.js","names":[],"sources":["../../../src/shared/overlay/overlay-root.ts"],"sourcesContent":["import glass from '@/assets/glass.css?inline'\nimport menuPortalStyle from '@/assets/menu-portal.css?inline'\nimport overlayMotion from '@/assets/overlay-motion.css?inline'\nimport toastContainerStyle from '@/assets/toast-containers.css?inline'\n\n/**\n * Theme-owned overlay root plumbing: applies shared overlay styles to a theme\n * root and lazily creates the document-level fallback overlay root.\n */\nconst FALLBACK_ROOT_ATTRIBUTE = 'data-wui-overlay-root'\n\nconst overlayStyle = `${glass}\\n${toastContainerStyle}\\n${menuPortalStyle}\\n${overlayMotion}`\n\nexport function applyOverlayRootStyles(root: ShadowRoot) {\n const style = document.createElement('style')\n style.textContent = overlayStyle\n root.prepend(style)\n}\n\nexport function getFallbackOverlayRoot(): HTMLElement {\n const existing = document.querySelector<HTMLElement>(`[${FALLBACK_ROOT_ATTRIBUTE}]`)\n if (existing?.shadowRoot) return getOverlayContainer(existing.shadowRoot)\n\n const host = document.createElement('div')\n host.setAttribute(FALLBACK_ROOT_ATTRIBUTE, '')\n const root = host.attachShadow({ mode: 'open' })\n applyOverlayRootStyles(root)\n document.body.appendChild(host)\n return getOverlayContainer(root)\n}\n\nexport function getOverlayContainer(root: ShadowRoot): HTMLElement {\n const existing = root.querySelector<HTMLElement>('[data-wui-overlay-container]')\n if (existing) return existing\n\n const container = document.createElement('div')\n container.setAttribute('data-wui-overlay-container', '')\n root.appendChild(container)\n return container\n}\n"],"mappings":";;;;;AASA,IAAM,IAA0B,yBAE1B,IAAe,GAAG,EAAM,IAAI,EAAoB,IAAI,EAAgB,IAAI;AAE9E,SAAgB,EAAuB,GAAkB;CACvD,IAAM,IAAQ,SAAS,cAAc,OAAO;CAE5C,AADA,EAAM,cAAc,GACpB,EAAK,QAAQ,CAAK;AACpB;AAEA,SAAgB,IAAsC;CACpD,IAAM,IAAW,SAAS,cAA2B,IAAI,EAAwB,EAAE;CACnF,IAAI,GAAU,YAAY,OAAO,EAAoB,EAAS,UAAU;CAExE,IAAM,IAAO,SAAS,cAAc,KAAK;CACzC,EAAK,aAAa,GAAyB,EAAE;CAC7C,IAAM,IAAO,EAAK,aAAa,EAAE,MAAM,OAAO,CAAC;CAG/C,OAFA,EAAuB,CAAI,GAC3B,SAAS,KAAK,YAAY,CAAI,GACvB,EAAoB,CAAI;AACjC;AAEA,SAAgB,EAAoB,GAA+B;CACjE,IAAM,IAAW,EAAK,cAA2B,8BAA8B;CAC/E,IAAI,GAAU,OAAO;CAErB,IAAM,IAAY,SAAS,cAAc,KAAK;CAG9C,OAFA,EAAU,aAAa,8BAA8B,EAAE,GACvD,EAAK,YAAY,CAAS,GACnB;AACT"}
1
+ {"version":3,"file":"overlay-root.js","names":[],"sources":["../../../src/shared/overlay/overlay-root.ts"],"sourcesContent":["import glass from '@/assets/glass.css?inline'\nimport menuPortalStyle from '@/assets/menu-portal.css?inline'\nimport overlayMotion from '@/assets/overlay-motion.css?inline'\nimport toastContainerStyle from '@/assets/toast-containers.css?inline'\nimport internalScrollbars from '@/scrollbars/internal.css?inline'\n\n/**\n * Theme-owned overlay root plumbing: applies shared overlay styles to a theme\n * root and lazily creates the document-level fallback overlay root.\n */\nconst FALLBACK_ROOT_ATTRIBUTE = 'data-wui-overlay-root'\n\nconst overlayStyle = `${glass}\\n${toastContainerStyle}\\n${menuPortalStyle}\\n${overlayMotion}\\n${internalScrollbars}`\n\nexport function applyOverlayRootStyles(root: ShadowRoot) {\n const style = document.createElement('style')\n style.textContent = overlayStyle\n root.prepend(style)\n}\n\nexport function getFallbackOverlayRoot(): HTMLElement {\n const existing = document.querySelector<HTMLElement>(`[${FALLBACK_ROOT_ATTRIBUTE}]`)\n if (existing?.shadowRoot) return getOverlayContainer(existing.shadowRoot)\n\n const host = document.createElement('div')\n host.setAttribute(FALLBACK_ROOT_ATTRIBUTE, '')\n const root = host.attachShadow({ mode: 'open' })\n applyOverlayRootStyles(root)\n document.body.appendChild(host)\n return getOverlayContainer(root)\n}\n\nexport function getOverlayContainer(root: ShadowRoot): HTMLElement {\n const existing = root.querySelector<HTMLElement>('[data-wui-overlay-container]')\n if (existing) return existing\n\n const container = document.createElement('div')\n container.setAttribute('data-wui-overlay-container', '')\n root.appendChild(container)\n return container\n}\n"],"mappings":";;;;;;AAUA,IAAM,IAA0B,yBAE1B,IAAe,GAAG,EAAM,IAAI,EAAoB,IAAI,EAAgB,IAAI,EAAc,IAAI;AAEhG,SAAgB,EAAuB,GAAkB;CACvD,IAAM,IAAQ,SAAS,cAAc,OAAO;CAE5C,AADA,EAAM,cAAc,GACpB,EAAK,QAAQ,CAAK;AACpB;AAEA,SAAgB,IAAsC;CACpD,IAAM,IAAW,SAAS,cAA2B,IAAI,EAAwB,EAAE;CACnF,IAAI,GAAU,YAAY,OAAO,EAAoB,EAAS,UAAU;CAExE,IAAM,IAAO,SAAS,cAAc,KAAK;CACzC,EAAK,aAAa,GAAyB,EAAE;CAC7C,IAAM,IAAO,EAAK,aAAa,EAAE,MAAM,OAAO,CAAC;CAG/C,OAFA,EAAuB,CAAI,GAC3B,SAAS,KAAK,YAAY,CAAI,GACvB,EAAoB,CAAI;AACjC;AAEA,SAAgB,EAAoB,GAA+B;CACjE,IAAM,IAAW,EAAK,cAA2B,8BAA8B;CAC/E,IAAI,GAAU,OAAO;CAErB,IAAM,IAAY,SAAS,cAAc,KAAK;CAG9C,OAFA,EAAU,aAAa,8BAA8B,EAAE,GACvD,EAAK,YAAY,CAAS,GACnB;AACT"}