@greypan/web-ui 6.3.1 → 7.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.CN.md +145 -42
- package/README.md +156 -53
- package/dist/_virtual/{_@oxc-project_runtime@0.146.0 → _@oxc-project_runtime@0.149.0}/helpers/esm/decorate.js +1 -1
- package/dist/assets/glass.js +1 -1
- package/dist/assets/glass.js.map +1 -1
- package/dist/assets/menu-portal.js +1 -1
- package/dist/assets/menu-portal.js.map +1 -1
- package/dist/assets/overlay-motion.js +1 -1
- package/dist/assets/overlay-motion.js.map +1 -1
- package/dist/assets/selection-control.js +6 -0
- package/dist/assets/selection-control.js.map +1 -0
- package/dist/assets/toast-containers.js.map +1 -1
- package/dist/components/autocomplete/index.d.ts +2 -0
- package/dist/components/autocomplete/index.js +22 -23
- package/dist/components/autocomplete/index.js.map +1 -1
- package/dist/components/autocomplete/style.js +1 -1
- package/dist/components/autocomplete/style.js.map +1 -1
- package/dist/components/avatar/index.js +1 -1
- package/dist/components/back-top/index.js +1 -1
- package/dist/components/badge/index.js +1 -1
- package/dist/components/badge/style.js.map +1 -1
- package/dist/components/button/index.js +1 -1
- package/dist/components/button/style.js.map +1 -1
- package/dist/components/button-group/index.js +1 -1
- package/dist/components/checkbox/index.d.ts +9 -2
- package/dist/components/checkbox/index.js +52 -28
- package/dist/components/checkbox/index.js.map +1 -1
- package/dist/components/checkbox/style.js +1 -1
- package/dist/components/checkbox/style.js.map +1 -1
- package/dist/components/checkbox-group/index.d.ts +3 -0
- package/dist/components/checkbox-group/index.js +26 -15
- package/dist/components/checkbox-group/index.js.map +1 -1
- package/dist/components/checkbox-group/style.js +1 -1
- package/dist/components/checkbox-group/style.js.map +1 -1
- package/dist/components/collapse/index.js +3 -3
- package/dist/components/collapse/index.js.map +1 -1
- package/dist/components/context-menu/index.d.ts +10 -0
- package/dist/components/context-menu/index.js +53 -39
- package/dist/components/context-menu/index.js.map +1 -1
- package/dist/components/dialog/index.d.ts +6 -0
- package/dist/components/dialog/index.js +46 -21
- package/dist/components/dialog/index.js.map +1 -1
- package/dist/components/dialog/style.js +1 -1
- package/dist/components/dialog/style.js.map +1 -1
- package/dist/components/drawer/index.d.ts +22 -4
- package/dist/components/drawer/index.js +135 -107
- package/dist/components/drawer/index.js.map +1 -1
- package/dist/components/drawer/style.js +1 -1
- package/dist/components/drawer/style.js.map +1 -1
- package/dist/components/dropdown/index.d.ts +21 -1
- package/dist/components/dropdown/index.js +78 -55
- package/dist/components/dropdown/index.js.map +1 -1
- package/dist/components/dropdown-divider/index.js +1 -1
- package/dist/components/dropdown-header/index.js +1 -1
- package/dist/components/dropdown-item/index.js +1 -1
- package/dist/components/empty/index.js +1 -1
- package/dist/components/icon/index.js +1 -1
- package/dist/components/icon/style.js +1 -1
- package/dist/components/icon/style.js.map +1 -1
- package/dist/components/image-preview/index.js +89 -69
- package/dist/components/image-preview/index.js.map +1 -1
- package/dist/components/image-preview/style.js +1 -1
- package/dist/components/image-preview/style.js.map +1 -1
- package/dist/components/index.js +29 -29
- package/dist/components/input/index.js +4 -4
- package/dist/components/input/index.js.map +1 -1
- package/dist/components/input/style.js.map +1 -1
- package/dist/components/input-number/index.js +2 -2
- package/dist/components/input-number/index.js.map +1 -1
- package/dist/components/layout/index.js +3 -3
- package/dist/components/layout/index.js.map +1 -1
- package/dist/components/layout/style.js +1 -1
- package/dist/components/layout/style.js.map +1 -1
- package/dist/components/option/index.js +1 -1
- package/dist/components/popover/index.d.ts +8 -2
- package/dist/components/popover/index.js +48 -53
- package/dist/components/popover/index.js.map +1 -1
- package/dist/components/radio/index.d.ts +1 -1
- package/dist/components/radio/index.js +16 -15
- package/dist/components/radio/index.js.map +1 -1
- package/dist/components/radio/style.js +1 -1
- package/dist/components/radio/style.js.map +1 -1
- package/dist/components/radio-group/index.d.ts +3 -0
- package/dist/components/radio-group/index.js +26 -15
- package/dist/components/radio-group/index.js.map +1 -1
- package/dist/components/radio-group/style.js +1 -1
- package/dist/components/radio-group/style.js.map +1 -1
- package/dist/components/segmented/index.js +1 -1
- package/dist/components/segmented/style.js +1 -1
- package/dist/components/segmented/style.js.map +1 -1
- package/dist/components/segmented-trigger/index.js +1 -1
- package/dist/components/select/index.d.ts +2 -0
- package/dist/components/select/index.js +23 -22
- package/dist/components/select/index.js.map +1 -1
- package/dist/components/select/style.js +1 -1
- package/dist/components/select/style.js.map +1 -1
- package/dist/components/slider/index.js +1 -1
- package/dist/components/slider/index.js.map +1 -1
- package/dist/components/slider/style.js +1 -1
- package/dist/components/slider/style.js.map +1 -1
- package/dist/components/spinner/index.js +2 -2
- package/dist/components/spinner/index.js.map +1 -1
- package/dist/components/spinner/style.js +1 -1
- package/dist/components/spinner/style.js.map +1 -1
- package/dist/components/svg-draw-lines/index.d.ts +13 -2
- package/dist/components/svg-draw-lines/index.js +45 -32
- package/dist/components/svg-draw-lines/index.js.map +1 -1
- package/dist/components/switch/index.js +2 -2
- package/dist/components/switch/index.js.map +1 -1
- package/dist/components/switch/style.js +1 -1
- package/dist/components/switch/style.js.map +1 -1
- package/dist/components/textarea/index.js +5 -5
- package/dist/components/textarea/index.js.map +1 -1
- package/dist/components/textarea/style.js.map +1 -1
- package/dist/components/theme/index.d.ts +17 -0
- package/dist/components/theme/index.js +181 -21
- package/dist/components/theme/index.js.map +1 -1
- package/dist/components/theme/style.js +1 -1
- package/dist/components/theme/style.js.map +1 -1
- package/dist/components/toast/index.d.ts +1 -1
- package/dist/components/toast/manager.d.ts +1 -3
- package/dist/components/toast/manager.js +92 -49
- package/dist/components/toast/manager.js.map +1 -1
- package/dist/components/toast/style.js +1 -1
- package/dist/components/toast/style.js.map +1 -1
- package/dist/components/toast/toast.d.ts +37 -0
- package/dist/components/toast/toast.js +62 -9
- package/dist/components/toast/toast.js.map +1 -1
- package/dist/components/toast/types.d.ts +0 -4
- package/dist/components/tooltip/index.d.ts +6 -1
- package/dist/components/tooltip/index.js +17 -15
- package/dist/components/tooltip/index.js.map +1 -1
- package/dist/shared/form-association/index.js +1 -1
- package/dist/shared/form-association/index.js.map +1 -1
- package/dist/shared/gesture/drag-gesture.js +66 -64
- package/dist/shared/gesture/drag-gesture.js.map +1 -1
- package/dist/shared/gesture/physics.js +7 -29
- package/dist/shared/gesture/physics.js.map +1 -1
- package/dist/shared/menu-behavior/index.js +3 -4
- package/dist/shared/menu-behavior/index.js.map +1 -1
- package/dist/shared/menu-portal/menu-tree.js +1 -1
- package/dist/shared/menu-portal/menu-tree.js.map +1 -1
- package/dist/shared/option-portal/combobox-shell.js +7 -8
- package/dist/shared/option-portal/combobox-shell.js.map +1 -1
- package/dist/shared/overlay/anchored-panel.js +36 -31
- package/dist/shared/overlay/anchored-panel.js.map +1 -1
- package/dist/shared/overlay/native-dialog-presence.js +18 -2
- package/dist/shared/overlay/native-dialog-presence.js.map +1 -1
- package/dist/shared/overlay/nested-drawer-layers.js +7 -4
- package/dist/shared/overlay/nested-drawer-layers.js.map +1 -1
- package/dist/shared/overlay/open-overlay.js +182 -0
- package/dist/shared/overlay/open-overlay.js.map +1 -0
- package/dist/shared/overlay/overlay.js +1 -1
- package/dist/shared/overlay/overlay.js.map +1 -1
- package/dist/shared/overlay/portal.js +1 -1
- package/dist/shared/overlay/portal.js.map +1 -1
- package/dist/shared/overlay/presence.js +19 -22
- package/dist/shared/overlay/presence.js.map +1 -1
- package/dist/shared/theme/duration.js +9 -0
- package/dist/shared/theme/duration.js.map +1 -0
- package/dist/shared/theme/reduced-motion.js +15 -0
- package/dist/shared/theme/reduced-motion.js.map +1 -0
- package/dist/shared/visible-area/index.js +1 -1
- package/dist/shared/visible-area/index.js.map +1 -1
- package/package.json +3 -3
- package/dist/shared/overlay/composition.js +0 -57
- package/dist/shared/overlay/composition.js.map +0 -1
- package/dist/shared/overlay/lifecycle.js +0 -41
- package/dist/shared/overlay/lifecycle.js.map +0 -1
- package/dist/vite.svg +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/theme/index.ts"],"sourcesContent":["import { html, LitElement, nothing, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { normalizeLiteral } from '@/shared/normalize'\nimport { applyOverlayRootStyles } from '@/shared/overlay/overlay-root'\n\nimport style from './style.css?inline'\n\nexport type ThemeAppearance = 'light' | 'dark' | 'system'\nexport type ThemeMotion = 'full' | 'reduced' | 'system'\n\nconst APPEARANCES = ['light', 'dark', 'system'] as const\nconst MOTIONS = ['full', 'reduced', 'system'] as const\n\n@customElement('web-ui-theme')\nexport class WebUiTheme extends LitElement {\n static override styles = unsafeCSS(style)\n\n @property({ type: String, reflect: true })\n get appearance(): ThemeAppearance | undefined {\n return this._appearance\n }\n set appearance(v: string | undefined) {\n const old = this._appearance\n this._appearance = v !== undefined ? (normalizeLiteral(v, APPEARANCES, 'light') as ThemeAppearance) : undefined\n this.requestUpdate('appearance', old)\n }\n private _appearance?: ThemeAppearance\n\n @property({ type: String, reflect: true })\n get motion(): ThemeMotion {\n return this._motion\n }\n set motion(v: string) {\n const old = this._motion\n this._motion = normalizeLiteral(v, MOTIONS, 'system') as ThemeMotion\n this.requestUpdate('motion', old)\n }\n private _motion: ThemeMotion = 'system'\n\n private _warned = false\n\n override connectedCallback() {\n super.connectedCallback()\n this._warnWhenAppearanceIsMissing()\n }\n\n protected override updated() {\n this._warnWhenAppearanceIsMissing()\n }\n\n // 返回该主题拥有的浮层挂载点;未设置 appearance 时不创建。\n getOverlayRoot(): HTMLElement | undefined {\n if (!this._hasAppearance()) return undefined\n return this.renderRoot.querySelector<HTMLElement>('[data-wui-overlay-container]') ?? undefined\n }\n\n // 当前范围是否应减少动效;`system` 跟随用户的系统偏好。\n isReducedMotion(): boolean {\n if (this.motion === 'reduced') return true\n if (this.motion === 'full') return false\n\n try {\n return window.matchMedia('(prefers-reduced-motion: reduce)').matches\n } catch {\n return false\n }\n }\n\n override render() {\n return html`<slot></slot>${this._hasAppearance() ? html`<div data-wui-overlay-container></div>` : nothing}`\n }\n\n override firstUpdated() {\n if (this.renderRoot instanceof ShadowRoot) {\n applyOverlayRootStyles(this.renderRoot)\n }\n }\n\n private _hasAppearance(): this is this & { appearance: ThemeAppearance } {\n return this.appearance !== undefined && (APPEARANCES as readonly string[]).includes(this.appearance)\n }\n\n private _warnWhenAppearanceIsMissing() {\n if (this._hasAppearance() || this._warned || !import.meta.env.DEV) return\n this._warned = true\n console.warn('[web-ui-theme] appearance is required; this theme scope is inactive until it is set.')\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'web-ui-theme': WebUiTheme\n }\n}\n"],"mappings":";;;;;;;AAWA,IAAM,IAAc;CAAC;CAAS;CAAQ;AAAQ,GACxC,IAAU;CAAC;CAAQ;CAAW;AAAQ,GAG/B,IAAN,cAAyB,EAAW;;EAyBvB,aAFa,KAAA,UAAA,UAEb,KAAA,UAAA;;;EAxBO,KAAA,SAAA,EAAU,CAAK;;CAExC,IACI,aAA0C;EAC5C,OAAO,KAAK;CACd;CACA,IAAI,WAAW,GAAuB;EACpC,IAAM,IAAM,KAAK;EAEjB,AADA,KAAK,cAAc,MAAM,KAAA,IAA6E,KAAA,IAAhE,EAAiB,GAAG,GAAa,OAAO,GAC9E,KAAK,cAAc,cAAc,CAAG;CACtC;CAGA,IACI,SAAsB;EACxB,OAAO,KAAK;CACd;CACA,IAAI,OAAO,GAAW;EACpB,IAAM,IAAM,KAAK;EAEjB,AADA,KAAK,UAAU,EAAiB,GAAG,GAAS,QAAQ,GACpD,KAAK,cAAc,UAAU,CAAG;CAClC;CAKA,oBAA6B;EAE3B,AADA,MAAM,kBAAkB,GACxB,KAAK,6BAA6B;CACpC;CAEA,UAA6B;EAC3B,KAAK,6BAA6B;CACpC;CAGA,iBAA0C;EACnC,SAAK,eAAe,GACzB,OAAO,KAAK,WAAW,cAA2B,8BAA8B,KAAK,KAAA;CACvF;CAGA,kBAA2B;EACzB,IAAI,KAAK,WAAW,WAAW,OAAO;EACtC,IAAI,KAAK,WAAW,QAAQ,OAAO;EAEnC,IAAI;GACF,OAAO,OAAO,WAAW,kCAAkC,CAAC,CAAC;EAC/D,QAAQ;GACN,OAAO;EACT;CACF;CAEA,SAAkB;EAChB,OAAO,CAAI,gBAAgB,KAAK,eAAe,IAAI,CAAI,2CAA2C;CACpG;CAEA,eAAwB;EACtB,AAAI,KAAK,sBAAsB,cAC7B,EAAuB,KAAK,UAAU;CAE1C;CAEA,iBAAyE;EACvE,OAAO,KAAK,eAAe,KAAA,KAAc,EAAkC,SAAS,KAAK,UAAU;CACrG;CAEA,+BAAuC;EACjC,KAAK,eAAe,KAAK,KAAK;CAGpC;AACF;AAtEG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,IAAA,GAWxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,IAAA,GAf1C,IAAA,EAAA,CAAA,EAAc,cAAc,CAAA,GAAA,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/theme/index.ts"],"sourcesContent":["import { html, LitElement, nothing, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { normalizeLiteral } from '@/shared/normalize'\nimport { applyOverlayRootStyles } from '@/shared/overlay/overlay-root'\nimport { parseDuration } from '@/shared/theme/duration'\n\nimport style from './style.css?inline'\n\nexport type ThemeAppearance = 'light' | 'dark' | 'system'\nexport type ThemeMotion = 'full' | 'reduced' | 'system'\n\nconst APPEARANCES = ['light', 'dark', 'system'] as const\nconst MOTIONS = ['full', 'reduced', 'system'] as const\n\ninterface ViewTransitionLike {\n readonly ready: Promise<void>\n readonly finished: Promise<void>\n skipTransition?: () => void\n}\n\n// 根主题没有对应控件;记录最近一次触发主题变更的指针位置,键盘或程序化调用则回退中心。\nconst transitionOrigin = { x: Number.NaN, y: Number.NaN }\nlet transitionSequence = 0\nlet transitionOriginCount = 0\nlet themeTransitionFlightToken: object | null = null\nconst recordTransitionOrigin = (event: Event) => {\n const pointer = event as PointerEvent\n transitionOrigin.x = pointer.clientX\n transitionOrigin.y = pointer.clientY\n}\nconst forgetTransitionOrigin = () => {\n transitionOrigin.x = Number.NaN\n transitionOrigin.y = Number.NaN\n}\n\nfunction addTransitionOriginListeners() {\n if (transitionOriginCount++ > 0) return\n window.addEventListener('pointerdown', recordTransitionOrigin, true)\n window.addEventListener('keydown', forgetTransitionOrigin, true)\n}\n\nfunction removeTransitionOriginListeners() {\n if (--transitionOriginCount > 0) return\n window.removeEventListener('pointerdown', recordTransitionOrigin, true)\n window.removeEventListener('keydown', forgetTransitionOrigin, true)\n}\n\nfunction resolveAppearance(appearance: ThemeAppearance): 'light' | 'dark' {\n if (appearance !== 'system') return appearance\n try {\n return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'\n } catch {\n return 'light'\n }\n}\n\nfunction transitionPoint(x: number, y: number): { x: number; y: number } {\n if (Number.isFinite(x) && Number.isFinite(y)) return { x, y }\n return {\n x: (window.innerWidth || 0) / 2,\n y: (window.innerHeight || 0) / 2\n }\n}\n\n@customElement('web-ui-theme')\nexport class WebUiTheme extends LitElement {\n static override styles = unsafeCSS(style)\n\n @property({ type: String, reflect: true })\n get appearance(): ThemeAppearance | undefined {\n return this._appearance\n }\n set appearance(v: string | undefined) {\n const old = this._appearance\n const next = v !== undefined ? (normalizeLiteral(v, APPEARANCES, 'light') as ThemeAppearance) : undefined\n const request = ++this._appearanceRequest\n if (\n next !== undefined &&\n !this._transitionRequested &&\n themeTransitionFlightToken === null &&\n this._shouldAnimateAppearance(next)\n ) {\n // async helper 可能把函数体排到当前栈后;flight gate 必须在当前 setter 栈内生效。\n this._transitionRequested = true\n const flightToken = { requestId: request }\n themeTransitionFlightToken = flightToken\n void this._startThemeTransition(next, old!, request, flightToken).catch(() => {\n this._cleanupThemeTransition()\n this._transitionRequested = false\n if (themeTransitionFlightToken === flightToken) themeTransitionFlightToken = null\n if (this._appearanceRequest === request) {\n this._appearance = next\n this.requestUpdate('appearance', old)\n }\n })\n return\n }\n this._appearance = next\n this.requestUpdate('appearance', old)\n }\n private _appearance?: ThemeAppearance\n private _appearanceRequest = 0\n\n @property({ type: String, reflect: true })\n get motion(): ThemeMotion {\n return this._motion\n }\n set motion(v: string) {\n const old = this._motion\n this._motion = normalizeLiteral(v, MOTIONS, 'system') as ThemeMotion\n this.requestUpdate('motion', old)\n }\n private _motion: ThemeMotion = 'system'\n\n // HTML attribute 存在即 true;动态关闭由框架写 boolean property,不解析字符串。\n @property({ type: Boolean, reflect: true })\n get transition(): boolean {\n return this._transition\n }\n set transition(v: boolean) {\n const old = this._transition\n this._transition = v\n this.requestUpdate('transition', old)\n\n this._syncTransitionOriginListeners(this.isConnected && this._transition)\n }\n private _transition = false\n private _transitionOriginListening = false\n private _transitionRequested = false\n\n private _warned = false\n\n override connectedCallback() {\n super.connectedCallback()\n this._syncTransitionOriginListeners(this.transition)\n this._warnWhenAppearanceIsMissing()\n }\n\n override disconnectedCallback() {\n this._syncTransitionOriginListeners(false)\n this._activeTransition?.skipTransition?.()\n this._cleanupThemeTransition()\n super.disconnectedCallback()\n }\n\n protected override updated() {\n this._warnWhenAppearanceIsMissing()\n }\n\n // 返回该主题拥有的浮层挂载点;未设置 appearance 时不创建。\n getOverlayRoot(): HTMLElement | undefined {\n if (!this._hasAppearance()) return undefined\n return this.renderRoot.querySelector<HTMLElement>('[data-wui-overlay-container]') ?? undefined\n }\n\n // 当前范围是否应减少动效;`system` 跟随用户的系统偏好。\n isReducedMotion(): boolean {\n if (this.motion === 'reduced') return true\n if (this.motion === 'full') return false\n\n try {\n return window.matchMedia('(prefers-reduced-motion: reduce)').matches\n } catch {\n return false\n }\n }\n\n private _findThemeAncestor(): WebUiTheme | null {\n let node = this.parentNode\n while (node) {\n if (node instanceof WebUiTheme && node !== this && node._hasAppearance()) return node\n if (node instanceof ShadowRoot) {\n node = node.host\n } else {\n node = node.parentElement\n }\n }\n return null\n }\n\n private _transitionOrigin(): { x: number; y: number } {\n if (Number.isFinite(transitionOrigin.x) && Number.isFinite(transitionOrigin.y)) {\n return transitionOrigin\n }\n\n const box = this.getBoundingClientRect()\n if (box.width > 0 && box.height > 0) {\n return { x: box.left + box.width / 2, y: box.top + box.height / 2 }\n }\n return transitionPoint(Number.NaN, Number.NaN)\n }\n\n private _syncTransitionOriginListeners(listening: boolean) {\n if (listening === this._transitionOriginListening) return\n this._transitionOriginListening = listening\n if (listening) addTransitionOriginListeners()\n else removeTransitionOriginListeners()\n }\n\n private _transitionMotion(): { duration: number; easing: string } {\n const style = getComputedStyle(this)\n const duration = parseDuration(style.getPropertyValue('--wui-theme-transition-duration')) ?? 500\n const easing = style.getPropertyValue('--wui-theme-transition-easing').trim() || 'ease-in'\n const safeEasing = globalThis.CSS?.supports('animation-timing-function', easing) ? easing : 'ease-in'\n return { duration: Math.max(0, duration), easing: safeEasing }\n }\n\n private _shouldAnimateAppearance(next: ThemeAppearance): boolean {\n const previous = this._appearance\n if (!previous || previous === next) return false\n if (resolveAppearance(previous) === resolveAppearance(next)) return false\n return (\n this.transition &&\n typeof document.startViewTransition === 'function' &&\n Array.isArray(document.adoptedStyleSheets) &&\n !this.isReducedMotion() &&\n this._transitionMotion().duration > 0\n )\n }\n\n // 嵌套主题只做局部揭示;View Transitions 需要 capture box,因此飞行期间临时生成一个 host box。\n private async _startThemeTransition(\n next: ThemeAppearance,\n previous: ThemeAppearance,\n request: number,\n flightToken: object\n ): Promise<void> {\n const root = this._findThemeAncestor() === null\n const transitionName = root ? undefined : `wui-theme-transition-${++transitionSequence}`\n const styleSheet = new CSSStyleSheet()\n if (transitionName) {\n styleSheet.replaceSync(`\n ::view-transition-old(root), ::view-transition-new(root) { animation: none; }\n ::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; }\n ::view-transition-image-pair(root), ::view-transition-image-pair(${transitionName}) { mix-blend-mode: normal; }\n ::view-transition-group(${transitionName}) { animation: none; }\n ::view-transition-old(${transitionName}), ::view-transition-new(${transitionName}) {\n animation: none;\n mix-blend-mode: normal;\n }\n ::view-transition-old(${transitionName}) { z-index: ${next === 'dark' ? 1 : 2}; }\n ::view-transition-new(${transitionName}) { z-index: ${next === 'dark' ? 2 : 1}; }\n `)\n } else {\n styleSheet.replaceSync(`\n ::view-transition-old(root), ::view-transition-new(root) {\n animation: none;\n mix-blend-mode: normal;\n }\n ::view-transition-image-pair(root) { mix-blend-mode: normal; }\n ::view-transition-old(root) { z-index: ${next === 'dark' ? 1 : 2}; }\n ::view-transition-new(root) { z-index: ${next === 'dark' ? 2 : 1}; }\n `)\n }\n\n const hadDisplay = this.style.getPropertyValue('display')\n const hadTransitionName = transitionName ? this.style.getPropertyValue('view-transition-name') : undefined\n if (transitionName) {\n this.style.setProperty('display', 'block')\n this.style.setProperty('view-transition-name', transitionName)\n }\n document.adoptedStyleSheets = [...document.adoptedStyleSheets, styleSheet]\n\n const restoreCapture = () => {\n document.adoptedStyleSheets = document.adoptedStyleSheets.filter(sheet => sheet !== styleSheet)\n if (!transitionName) return\n if (hadTransitionName) this.style.setProperty('view-transition-name', hadTransitionName)\n else this.style.removeProperty('view-transition-name')\n if (hadDisplay) this.style.setProperty('display', hadDisplay)\n else this.style.removeProperty('display')\n }\n\n const commit = () => {\n if (this._appearanceRequest !== request) return this.updateComplete\n this._appearance = next\n this.requestUpdate('appearance', previous)\n return this.updateComplete\n }\n this._transitionCleanup = restoreCapture\n const transition = document.startViewTransition(commit) as unknown as ViewTransitionLike\n this._activeTransition = transition\n const animations: Animation[] = []\n\n transition.ready\n .then(() => {\n const { duration, easing } = this._transitionMotion()\n if (duration <= 0) return\n const { x, y } = this._transitionOrigin()\n const target = next === 'dark' ? '::view-transition-new(root)' : '::view-transition-old(root)'\n if (!root) {\n const box = this.getBoundingClientRect()\n const relative = { x: x - box.left, y: y - box.top }\n const radius = Math.ceil(\n Math.hypot(Math.max(relative.x, box.width - relative.x), Math.max(relative.y, box.height - relative.y))\n )\n const frames = this._transitionKeyframes(relative.x, relative.y, radius, next)\n const target =\n next === 'dark' ? `::view-transition-new(${transitionName})` : `::view-transition-old(${transitionName})`\n animations.push(\n document.documentElement.animate(frames, {\n duration,\n easing,\n fill: 'both',\n pseudoElement: target\n } as KeyframeAnimationOptions)\n )\n return\n }\n\n const radius = Math.ceil(Math.hypot(Math.max(x, window.innerWidth - x), Math.max(y, window.innerHeight - y)))\n animations.push(\n document.documentElement.animate(this._transitionKeyframes(x, y, radius, next), {\n duration,\n easing,\n fill: 'both',\n pseudoElement: target\n } as KeyframeAnimationOptions)\n )\n })\n .catch(() => undefined)\n\n try {\n await transition.finished\n } catch {\n // API 缺失、capture 冲突或用户 skip 都不是状态错误;appearance 已由 update callback 提交。\n } finally {\n this._activeTransition = undefined\n this._transitionCleanup = undefined\n for (const animation of animations) animation.cancel()\n restoreCapture()\n // disconnected skip 会提前清掉 active;flight token/request 必须无条件释放。\n this._transitionRequested = false\n if (themeTransitionFlightToken === flightToken) themeTransitionFlightToken = null\n }\n }\n\n private _transitionKeyframes(x: number, y: number, radius: number, next: ThemeAppearance): Keyframe[] {\n const from = `circle(0px at ${x}px ${y}px)`\n const to = `circle(${radius}px at ${x}px ${y}px)`\n return next === 'dark' ? [{ clipPath: from }, { clipPath: to }] : [{ clipPath: to }, { clipPath: from }]\n }\n\n private _cleanupThemeTransition(restoreCapture = true) {\n this._activeTransition = undefined\n const cleanup = this._transitionCleanup\n this._transitionCleanup = undefined\n if (restoreCapture) cleanup?.()\n }\n\n private _activeTransition?: ViewTransitionLike\n private _transitionCleanup?: () => void\n\n override render() {\n return html`<slot></slot>${this._hasAppearance() ? html`<div data-wui-overlay-container></div>` : nothing}`\n }\n\n override firstUpdated() {\n if (this.renderRoot instanceof ShadowRoot) {\n applyOverlayRootStyles(this.renderRoot)\n }\n }\n\n private _hasAppearance(): this is this & { appearance: ThemeAppearance } {\n return this.appearance !== undefined && (APPEARANCES as readonly string[]).includes(this.appearance)\n }\n\n private _warnWhenAppearanceIsMissing() {\n if (this._hasAppearance() || this._warned || !import.meta.env.DEV) return\n this._warned = true\n console.warn('[web-ui-theme] appearance is required; this theme scope is inactive until it is set.')\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'web-ui-theme': WebUiTheme\n }\n}\n"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
//#region src/components/theme/style.css?inline
|
|
2
|
-
var e = "*,:before,:after{box-sizing:border-box}:host{--wui-font-size:14px;--wui-input-width:200px;--wui-control-size:36px;--wui-overlay-min-width:200px;--wui-layer-base:0;--wui-layer-inline-overlay:1;--wui-layer-header:10;--wui-layer-auxiliary:20;--wui-layer-banner:30;--wui-layer-tabbar:40;--wui-layer-sidebar:50;--wui-layer-menu:100;--wui-layer-menu-nested:110;--wui-layer-toast:200;--wui-layer-loading:300;--wui-duration-press:80ms;--wui-duration-feedback:.1s;--wui-duration-trigger:.16s;--wui-duration-focus:.2s;--wui-duration-float-enter:.
|
|
2
|
+
var e = "*,:before,:after{box-sizing:border-box}:host{--wui-font-size:14px;--wui-input-width:200px;--wui-control-size:36px;--wui-overlay-min-width:200px;--wui-selection-control-size:18px;--wui-radio-group-gap:8px;--wui-checkbox-group-gap:8px;--wui-layer-base:0;--wui-layer-inline-overlay:1;--wui-layer-header:10;--wui-layer-auxiliary:20;--wui-layer-banner:30;--wui-layer-tabbar:40;--wui-layer-sidebar:50;--wui-layer-menu:100;--wui-layer-menu-nested:110;--wui-layer-toast:200;--wui-layer-loading:300;--wui-duration-press:80ms;--wui-duration-feedback:.1s;--wui-duration-trigger:.16s;--wui-duration-focus:.2s;--wui-duration-float-enter:.24s;--wui-duration-float-exit:.16s;--wui-duration-dialog-enter:.32s;--wui-duration-dialog-exit:.26s;--wui-duration-drawer-enter:.28s;--wui-duration-drawer-exit:.24s;--wui-duration-drawer-nested:.45s;--wui-duration-toast-enter:.28s;--wui-duration-toast-exit:.2s;--wui-duration-collapse-enter:.2s;--wui-duration-collapse-exit:.16s;--wui-duration-layout:.2s;--wui-duration-swipe-settle:.22s;--wui-duration-spin:.6s;--wui-duration-spinner:.8s;--wui-theme-transition-duration:.5s;--wui-theme-transition-easing:ease-in;--wui-ease-enter:cubic-bezier(.23, 1, .32, 1);--wui-ease-dialog:cubic-bezier(.2, 0, 0, 1);--wui-ease-slide:cubic-bezier(.77, 0, .175, 1);--wui-ease-swipe:cubic-bezier(.32, .72, 0, 1);--wui-ease-float:cubic-bezier(.4, .38, .2, 1);--wui-scale-enter:.95;--wui-dialog-scale-enter:1.1;--wui-focus-ring-width:3px;--wui-radius-control:calc(infinity * 1px);--wui-radius-menu:18px;--wui-radius-overlay:28px;display:contents}:host([motion=reduced]){--wui-duration-press:0s;--wui-duration-feedback:0s;--wui-duration-trigger:0s;--wui-duration-focus:0s;--wui-duration-float-enter:0s;--wui-duration-float-exit:0s;--wui-duration-dialog-enter:0s;--wui-duration-dialog-exit:0s;--wui-duration-drawer-enter:0s;--wui-duration-drawer-exit:0s;--wui-duration-drawer-nested:0s;--wui-duration-toast-enter:0s;--wui-duration-toast-exit:0s;--wui-duration-collapse-enter:0s;--wui-duration-collapse-exit:0s;--wui-duration-layout:0s;--wui-duration-swipe-settle:0s;--wui-theme-transition-duration:0s;--wui-duration-spin:1.6s;--wui-duration-spinner:1.6s;--wui-scale-enter:1;--wui-dialog-scale-enter:1}@media (prefers-reduced-motion:reduce){:host([motion=system]){--wui-duration-press:0s;--wui-duration-feedback:0s;--wui-duration-trigger:0s;--wui-duration-focus:0s;--wui-duration-float-enter:0s;--wui-duration-float-exit:0s;--wui-duration-dialog-enter:0s;--wui-duration-dialog-exit:0s;--wui-duration-drawer-enter:0s;--wui-duration-drawer-exit:0s;--wui-duration-drawer-nested:0s;--wui-duration-toast-enter:0s;--wui-duration-toast-exit:0s;--wui-duration-collapse-enter:0s;--wui-duration-collapse-exit:0s;--wui-duration-layout:0s;--wui-duration-swipe-settle:0s;--wui-theme-transition-duration:0s;--wui-duration-spin:1.6s;--wui-duration-spinner:1.6s;--wui-scale-enter:1;--wui-dialog-scale-enter:1}}:host([appearance=light]),:host([appearance=system]){--wui-color-page:#fff;--wui-color-surface:#fff;--wui-color-surface-raised:#f2f2f7;--wui-color-surface-control:#dfdfdf;--wui-color-surface-track:#e5e5ea;--wui-color-surface-menu:#f6f6f6d1;--wui-color-surface-glass:#fafafa57;--wui-color-surface-glass-hover:color-mix(in srgb, var(--wui-color-text) 6%, var(--wui-color-surface-glass));--wui-color-surface-glass-active:color-mix(in srgb, var(--wui-color-text) 15%, var(--wui-color-surface-glass));--wui-color-surface-overlay:#f6f6f6d1;--wui-color-surface-segmented:#e5e5ea;--wui-color-surface-selected:#fff;--wui-color-text:#1b1b1b;--wui-color-text-secondary:#6a6a6a;--wui-color-text-tertiary:color-mix(in srgb, var(--wui-color-text) 35%, transparent);--wui-color-text-disabled:color-mix(in srgb, var(--wui-color-text) 32%, transparent);--wui-color-state-layer-hover:color-mix(in srgb, var(--wui-color-text) 6%, transparent);--wui-color-state-layer-active:color-mix(in srgb, var(--wui-color-text) 15%, transparent);--wui-color-border:#0000001a;--wui-color-glass-border:transparent;--wui-color-glass-highlight:#ffffffe6;--wui-color-glass-corner:#ffffff80;--wui-color-glass-shade:#00000008;--wui-glass-brightness:1.06;--wui-color-accent:#08f;--wui-color-on-accent:#fff;--wui-color-on-control:#fff;--wui-color-success:#16a34a;--wui-color-warning:#d97706;--wui-color-danger:#dc2626;--wui-color-info:#2563eb;--wui-color-backdrop:#0000001f;--wui-shadow-overlay:2px 16px 40px #0006;--wui-shadow-panel:0 3px 9px #00000045;--wui-shadow-glass:0 0 1px #00000005, 0 0 8px #00000008, 0 2px 16px #00000006, 0 8px 32px #00000004;--wui-color-focus-ring:#08f6;--lightningcss-light:initial;--lightningcss-dark: ;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:host([appearance=dark]){--wui-color-page:#242628;--wui-color-surface:#2c2c2e;--wui-color-surface-raised:#2c2c2e;--wui-color-surface-control:#3a3a3c;--wui-color-surface-track:#444446;--wui-color-surface-menu:#1e1e20eb;--wui-color-surface-glass:#2c2c2e6b;--wui-color-surface-glass-hover:color-mix(in srgb, var(--wui-color-text) 6%, var(--wui-color-surface-glass));--wui-color-surface-glass-active:color-mix(in srgb, var(--wui-color-text) 15%, var(--wui-color-surface-glass));--wui-color-surface-overlay:#202222e6;--wui-color-surface-segmented:#3a3a3c;--wui-color-surface-selected:#5c5c5e;--wui-color-text:#e9eaea;--wui-color-text-secondary:#a1a1a6;--wui-color-text-tertiary:color-mix(in srgb, var(--wui-color-text) 42%, transparent);--wui-color-text-disabled:color-mix(in srgb, var(--wui-color-text) 38%, transparent);--wui-color-state-layer-hover:color-mix(in srgb, var(--wui-color-text) 6%, transparent);--wui-color-state-layer-active:color-mix(in srgb, var(--wui-color-text) 15%, transparent);--wui-color-border:#ffffff24;--wui-color-glass-border:#ffffff0d;--wui-color-glass-highlight:#ffffff1a;--wui-color-glass-corner:#fff3;--wui-color-glass-shade:#00000080;--wui-glass-brightness:1.02;--wui-color-accent:#0a84ff;--wui-color-on-accent:#fff;--wui-color-on-control:#f2f2f7;--wui-color-success:#30d158;--wui-color-warning:#ff9f0a;--wui-color-danger:#ff453a;--wui-color-info:#64d2ff;--wui-color-backdrop:#0000007a;--wui-shadow-overlay:0 18px 48px #0000007a;--wui-shadow-panel:0 4px 16px #00000052;--wui-shadow-glass:0 8px 24px #00000014;--wui-color-focus-ring:#0a84ff9e;--lightningcss-light: ;--lightningcss-dark:initial;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}@media (prefers-color-scheme:dark){:host([appearance=system]){--wui-color-page:#242628;--wui-color-surface:#2c2c2e;--wui-color-surface-raised:#2c2c2e;--wui-color-surface-control:#3a3a3c;--wui-color-surface-track:#444446;--wui-color-surface-menu:#1e1e20eb;--wui-color-surface-glass:#2c2c2e6b;--wui-color-surface-glass-hover:color-mix(in srgb, var(--wui-color-text) 6%, var(--wui-color-surface-glass));--wui-color-surface-glass-active:color-mix(in srgb, var(--wui-color-text) 15%, var(--wui-color-surface-glass));--wui-color-surface-overlay:#202222e6;--wui-color-surface-segmented:#3a3a3c;--wui-color-surface-selected:#5c5c5e;--wui-color-text:#e9eaea;--wui-color-text-secondary:#a1a1a6;--wui-color-text-tertiary:color-mix(in srgb, var(--wui-color-text) 42%, transparent);--wui-color-text-disabled:color-mix(in srgb, var(--wui-color-text) 38%, transparent);--wui-color-state-layer-hover:color-mix(in srgb, var(--wui-color-text) 6%, transparent);--wui-color-state-layer-active:color-mix(in srgb, var(--wui-color-text) 15%, transparent);--wui-color-border:#ffffff24;--wui-color-glass-border:#ffffff0d;--wui-color-glass-highlight:#ffffff1a;--wui-color-glass-corner:#fff3;--wui-color-glass-shade:#00000080;--wui-glass-brightness:1.02;--wui-color-accent:#0a84ff;--wui-color-on-accent:#fff;--wui-color-on-control:#f2f2f7;--wui-color-success:#30d158;--wui-color-warning:#ff9f0a;--wui-color-danger:#ff453a;--wui-color-info:#64d2ff;--wui-color-backdrop:#0000007a;--wui-shadow-overlay:0 18px 48px #0000007a;--wui-shadow-panel:0 4px 16px #00000052;--wui-shadow-glass:0 8px 24px #00000014;--wui-color-focus-ring:#0a84ff9e;--lightningcss-light: ;--lightningcss-dark:initial;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}";
|
|
3
3
|
//#endregion
|
|
4
4
|
export { e as default };
|
|
5
5
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/theme/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n --wui-font-size: 14px;\n --wui-input-width: 200px;\n --wui-control-size: 36px;\n --wui-overlay-min-width: 200px;\n\n /* z-index layers - 基础结构 */\n --wui-layer-base: 0;\n --wui-layer-inline-overlay: 1;\n --wui-layer-header: 10;\n --wui-layer-auxiliary: 20;\n --wui-layer-banner: 30;\n --wui-layer-tabbar: 40;\n --wui-layer-sidebar: 50;\n\n /* z-index layers - 浮层 */\n --wui-layer-menu: 100;\n --wui-layer-menu-nested: 110;\n --wui-layer-toast: 200;\n --wui-layer-loading: 300;\n --wui-duration-press: 80ms;\n --wui-duration-feedback: 100ms;\n --wui-duration-trigger: 160ms;\n --wui-duration-focus: 200ms;\n --wui-duration-float-enter: 160ms;\n --wui-duration-float-exit: 120ms;\n --wui-duration-dialog-enter: 320ms;\n --wui-duration-dialog-exit: 260ms;\n --wui-duration-drawer-enter: 280ms;\n --wui-duration-drawer-exit: 240ms;\n --wui-duration-drawer-nested: 450ms;\n --wui-duration-toast-enter: 280ms;\n --wui-duration-toast-exit: 200ms;\n --wui-duration-collapse-enter: 200ms;\n --wui-duration-collapse-exit: 160ms;\n --wui-duration-layout: 200ms;\n --wui-ease-enter: cubic-bezier(0.23, 1, 0.32, 1);\n --wui-ease-dialog: cubic-bezier(0.2, 0, 0, 1);\n --wui-ease-slide: cubic-bezier(0.77, 0, 0.175, 1);\n --wui-scale-enter: 0.97;\n --wui-focus-ring-width: 3px;\n\n /* control=胶囊控件、menu=浮动菜单面板、overlay=大型覆盖层卡片 */\n --wui-radius-control: calc(infinity * 1px);\n --wui-radius-menu: 18px;\n --wui-radius-overlay: 28px;\n\n /* contents:主题宿主不生成盒、不绘制页面背景,嵌入方保留对宿主背景的完全控制\n (组件库不在宿主页面画背景)。自定义属性仍沿 DOM 树正常继承到 slotted 内容。 */\n display: contents;\n}\n\n:host([motion='reduced']) {\n --wui-duration-press: 0ms;\n --wui-duration-feedback: 0ms;\n --wui-duration-trigger: 0ms;\n --wui-duration-focus: 0ms;\n --wui-duration-float-enter: 0ms;\n --wui-duration-float-exit: 0ms;\n --wui-duration-dialog-enter: 0ms;\n --wui-duration-dialog-exit: 0ms;\n --wui-duration-drawer-enter: 0ms;\n --wui-duration-drawer-exit: 0ms;\n --wui-duration-drawer-nested: 0ms;\n --wui-duration-toast-enter: 0ms;\n --wui-duration-toast-exit: 0ms;\n --wui-duration-collapse-enter: 0ms;\n --wui-duration-collapse-exit: 0ms;\n --wui-duration-layout: 0ms;\n --wui-scale-enter: 1;\n}\n\n@media (prefers-reduced-motion: reduce) {\n :host([motion='system']) {\n --wui-duration-press: 0ms;\n --wui-duration-feedback: 0ms;\n --wui-duration-trigger: 0ms;\n --wui-duration-focus: 0ms;\n --wui-duration-float-enter: 0ms;\n --wui-duration-float-exit: 0ms;\n --wui-duration-dialog-enter: 0ms;\n --wui-duration-dialog-exit: 0ms;\n --wui-duration-drawer-enter: 0ms;\n --wui-duration-drawer-exit: 0ms;\n --wui-duration-drawer-nested: 0ms;\n --wui-duration-toast-enter: 0ms;\n --wui-duration-toast-exit: 0ms;\n --wui-duration-collapse-enter: 0ms;\n --wui-duration-collapse-exit: 0ms;\n --wui-duration-layout: 0ms;\n --wui-scale-enter: 1;\n }\n}\n\n:host([appearance='light']),\n:host([appearance='system']) {\n --wui-color-page: #fff;\n --wui-color-surface: #fff;\n --wui-color-surface-raised: #f2f2f7;\n --wui-color-surface-control: #dfdfdf;\n --wui-color-surface-track: #e5e5ea;\n --wui-color-surface-menu: rgb(246 246 246 / 0.82);\n --wui-color-surface-glass: rgb(250 250 250 / 0.34);\n --wui-color-surface-glass-hover: color-mix(in srgb, var(--wui-color-text) 6%, var(--wui-color-surface-glass));\n --wui-color-surface-glass-active: color-mix(in srgb, var(--wui-color-text) 15%, var(--wui-color-surface-glass));\n --wui-color-surface-overlay: rgb(246 246 246 / 0.82);\n --wui-color-surface-segmented: #e5e5ea;\n --wui-color-surface-selected: #fff;\n --wui-color-text: #1b1b1b;\n --wui-color-text-secondary: #6a6a6a;\n --wui-color-text-tertiary: color-mix(in srgb, var(--wui-color-text) 35%, transparent);\n --wui-color-text-disabled: color-mix(in srgb, var(--wui-color-text) 32%, transparent);\n --wui-color-state-layer-hover: color-mix(in srgb, var(--wui-color-text) 6%, transparent);\n --wui-color-state-layer-active: color-mix(in srgb, var(--wui-color-text) 15%, transparent);\n --wui-color-border: rgb(0 0 0 / 0.1);\n --wui-color-glass-border: transparent;\n --wui-color-glass-highlight: rgb(255 255 255 / 0.9);\n --wui-color-glass-corner: rgb(255 255 255 / 0.08);\n --wui-color-glass-shade: rgb(0 0 0 / 0.06);\n --wui-glass-brightness: 1.06;\n --wui-color-accent: #08f;\n --wui-color-on-accent: #fff;\n --wui-color-on-control: #fff;\n --wui-color-success: #16a34a;\n --wui-color-warning: #d97706;\n --wui-color-danger: #dc2626;\n --wui-color-info: #2563eb;\n --wui-color-backdrop: rgb(0 0 0 / 0.12);\n --wui-shadow-overlay: 2px 16px 40px rgb(0 0 0 / 0.4);\n --wui-shadow-panel: 0 3px 9px rgb(0 0 0 / 0.27);\n --wui-shadow-glass:\n 0 0 1px rgb(0 0 0 / 0.05), 0 0 8px rgb(0 0 0 / 0.03), 0 2px 16px rgb(0 0 0 / 0.025), 0 8px 32px rgb(0 0 0 / 0.015);\n --wui-color-focus-ring: rgb(0 136 255 / 0.4);\n color-scheme: light;\n}\n\n:host([appearance='dark']) {\n --wui-color-page: #242628;\n --wui-color-surface: #2c2c2e;\n --wui-color-surface-raised: #2c2c2e;\n --wui-color-surface-control: #3a3a3c;\n --wui-color-surface-track: #444446;\n --wui-color-surface-menu: rgb(30 30 32 / 0.92);\n --wui-color-surface-glass: rgb(44 44 46 / 0.42);\n --wui-color-surface-glass-hover: color-mix(in srgb, var(--wui-color-text) 6%, var(--wui-color-surface-glass));\n --wui-color-surface-glass-active: color-mix(in srgb, var(--wui-color-text) 15%, var(--wui-color-surface-glass));\n --wui-color-surface-overlay: rgb(32 34 34 / 0.9);\n --wui-color-surface-segmented: #3a3a3c;\n --wui-color-surface-selected: #5c5c5e;\n --wui-color-text: #e9eaea;\n --wui-color-text-secondary: #a1a1a6;\n --wui-color-text-tertiary: color-mix(in srgb, var(--wui-color-text) 42%, transparent);\n --wui-color-text-disabled: color-mix(in srgb, var(--wui-color-text) 38%, transparent);\n --wui-color-state-layer-hover: color-mix(in srgb, var(--wui-color-text) 6%, transparent);\n --wui-color-state-layer-active: color-mix(in srgb, var(--wui-color-text) 15%, transparent);\n --wui-color-border: rgb(255 255 255 / 0.14);\n --wui-color-glass-border: rgb(255 255 255 / 0.05);\n --wui-color-glass-highlight: rgb(255 255 255 / 0.1);\n --wui-color-glass-corner: rgb(255 255 255 / 0.2);\n --wui-color-glass-shade: rgb(0 0 0 / 0.5);\n --wui-glass-brightness: 1.02;\n --wui-color-accent: #0a84ff;\n --wui-color-on-accent: #fff;\n --wui-color-on-control: #f2f2f7;\n --wui-color-success: #30d158;\n --wui-color-warning: #ff9f0a;\n --wui-color-danger: #ff453a;\n --wui-color-info: #64d2ff;\n --wui-color-backdrop: rgb(0 0 0 / 0.48);\n --wui-shadow-overlay: 0 18px 48px rgb(0 0 0 / 0.48);\n --wui-shadow-panel: 0 4px 16px rgb(0 0 0 / 0.32);\n --wui-shadow-glass: 0 8px 24px rgb(0 0 0 / 0.08);\n --wui-color-focus-ring: rgb(10 132 255 / 0.62);\n color-scheme: dark;\n}\n\n@media (prefers-color-scheme: dark) {\n :host([appearance='system']) {\n --wui-color-page: #242628;\n --wui-color-surface: #2c2c2e;\n --wui-color-surface-raised: #2c2c2e;\n --wui-color-surface-control: #3a3a3c;\n --wui-color-surface-track: #444446;\n --wui-color-surface-menu: rgb(30 30 32 / 0.92);\n --wui-color-surface-glass: rgb(44 44 46 / 0.42);\n --wui-color-surface-glass-hover: color-mix(in srgb, var(--wui-color-text) 6%, var(--wui-color-surface-glass));\n --wui-color-surface-glass-active: color-mix(in srgb, var(--wui-color-text) 15%, var(--wui-color-surface-glass));\n --wui-color-surface-overlay: rgb(32 34 34 / 0.9);\n --wui-color-surface-segmented: #3a3a3c;\n --wui-color-surface-selected: #5c5c5e;\n --wui-color-text: #e9eaea;\n --wui-color-text-secondary: #a1a1a6;\n --wui-color-text-tertiary: color-mix(in srgb, var(--wui-color-text) 42%, transparent);\n --wui-color-text-disabled: color-mix(in srgb, var(--wui-color-text) 38%, transparent);\n --wui-color-state-layer-hover: color-mix(in srgb, var(--wui-color-text) 6%, transparent);\n --wui-color-state-layer-active: color-mix(in srgb, var(--wui-color-text) 15%, transparent);\n --wui-color-border: rgb(255 255 255 / 0.14);\n --wui-color-glass-border: rgb(255 255 255 / 0.05);\n --wui-color-glass-highlight: rgb(255 255 255 / 0.1);\n --wui-color-glass-corner: rgb(255 255 255 / 0.2);\n --wui-color-glass-shade: rgb(0 0 0 / 0.5);\n --wui-glass-brightness: 1.02;\n --wui-color-accent: #0a84ff;\n --wui-color-on-accent: #fff;\n --wui-color-on-control: #f2f2f7;\n --wui-color-success: #30d158;\n --wui-color-warning: #ff9f0a;\n --wui-color-danger: #ff453a;\n --wui-color-info: #64d2ff;\n --wui-color-backdrop: rgb(0 0 0 / 0.48);\n --wui-shadow-overlay: 0 18px 48px rgb(0 0 0 / 0.48);\n --wui-shadow-panel: 0 4px 16px rgb(0 0 0 / 0.32);\n --wui-shadow-glass: 0 8px 24px rgb(0 0 0 / 0.08);\n --wui-color-focus-ring: rgb(10 132 255 / 0.62);\n color-scheme: dark;\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/theme/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n --wui-font-size: 14px;\n --wui-input-width: 200px;\n --wui-control-size: 36px;\n --wui-overlay-min-width: 200px;\n\n /* radio / checkbox 指示器尺寸。宿主高度由内容撑开,不继承页面行高。 */\n --wui-selection-control-size: 18px;\n\n /* radio-group / checkbox-group 成员间距,两个 group 各自可覆盖。 */\n --wui-radio-group-gap: 8px;\n --wui-checkbox-group-gap: 8px;\n\n /* z-index layers - 基础结构 */\n --wui-layer-base: 0;\n --wui-layer-inline-overlay: 1;\n --wui-layer-header: 10;\n --wui-layer-auxiliary: 20;\n --wui-layer-banner: 30;\n --wui-layer-tabbar: 40;\n --wui-layer-sidebar: 50;\n\n /* z-index layers - 浮层 */\n --wui-layer-menu: 100;\n --wui-layer-menu-nested: 110;\n --wui-layer-toast: 200;\n --wui-layer-loading: 300;\n --wui-duration-press: 80ms;\n --wui-duration-feedback: 100ms;\n --wui-duration-trigger: 160ms;\n --wui-duration-focus: 200ms;\n\n /* 锚定浮动面板(menu/popover/select/dropdown/tooltip/autocomplete)的进场与退场时长,\n 出场快于入场。 */\n --wui-duration-float-enter: 240ms;\n --wui-duration-float-exit: 160ms;\n --wui-duration-dialog-enter: 320ms;\n --wui-duration-dialog-exit: 260ms;\n --wui-duration-drawer-enter: 280ms;\n --wui-duration-drawer-exit: 240ms;\n --wui-duration-drawer-nested: 450ms;\n --wui-duration-toast-enter: 280ms;\n --wui-duration-toast-exit: 200ms;\n --wui-duration-collapse-enter: 200ms;\n --wui-duration-collapse-exit: 160ms;\n --wui-duration-layout: 200ms;\n\n /* image-preview 轮播回位:跟手结束后把轨道过渡到目标位。不属于进出场族,故单独成 token。 */\n --wui-duration-swipe-settle: 220ms;\n\n /* 无限循环的加载指示:icon 旋转与 spinner 叶片追光。周期属于动画自身而非转场,\n 但同样受 motion 契约约束,reduce 下只放慢不停。 */\n --wui-duration-spin: 600ms;\n --wui-duration-spinner: 800ms;\n --wui-theme-transition-duration: 500ms;\n --wui-theme-transition-easing: ease-in;\n\n --wui-ease-enter: cubic-bezier(0.23, 1, 0.32, 1);\n --wui-ease-dialog: cubic-bezier(0.2, 0, 0, 1);\n --wui-ease-slide: cubic-bezier(0.77, 0, 0.175, 1);\n\n /* 轮播回位的缓动:起步快、末段极慢,与 --wui-ease-slide(整卡位移)区分开。 */\n --wui-ease-swipe: cubic-bezier(0.32, 0.72, 0, 1);\n\n /* 锚定浮动面板专属进场缓动,无回弹弹簧拟合曲线。若改用 --wui-ease-enter,\n 开局 30% 的时间就走完 85% 进度,观感是先弹出再落位。 */\n --wui-ease-float: cubic-bezier(0.4, 0.38, 0.2, 1);\n\n /* 进场缩放起点。两族方向相反,各自成 token:浮动面板与 image-preview 由小到大展开\n (0.95 → 1),dialog 由大到小收缩(1.1 → 1,退场反向)。\n 方向由承载层决定。image-preview 是满视口表面,起点 >1 会把贴边的 counter/close/\n toolbar 推出视口并裁掉图片四边,只能留在 <1 的档位。dialog 是有界卡片,起点须低于\n 零越界上限 1/0.9 ≈ 1.111(min(90vw, --wui-dialog-width) 两分支在 400px 视口汇合);\n 1.1 在任意视口都不越界。曾用 1.2,窄视口会短暂越界(约 57ms、卡片不透明度 ≤44.4%,\n 分析见 ADR-0006),260919 下调。 */\n --wui-scale-enter: 0.95;\n --wui-dialog-scale-enter: 1.1;\n --wui-focus-ring-width: 3px;\n\n /* control=胶囊控件、menu=浮动菜单面板、overlay=大型覆盖层卡片 */\n --wui-radius-control: calc(infinity * 1px);\n --wui-radius-menu: 18px;\n --wui-radius-overlay: 28px;\n\n /* contents:主题宿主不生成盒、不绘制页面背景,嵌入方保留对宿主背景的完全控制\n (组件库不在宿主页面画背景)。自定义属性仍沿 DOM 树正常继承到 slotted 内容。 */\n display: contents;\n}\n\n:host([motion='reduced']) {\n --wui-duration-press: 0ms;\n --wui-duration-feedback: 0ms;\n --wui-duration-trigger: 0ms;\n --wui-duration-focus: 0ms;\n --wui-duration-float-enter: 0ms;\n --wui-duration-float-exit: 0ms;\n --wui-duration-dialog-enter: 0ms;\n --wui-duration-dialog-exit: 0ms;\n --wui-duration-drawer-enter: 0ms;\n --wui-duration-drawer-exit: 0ms;\n --wui-duration-drawer-nested: 0ms;\n --wui-duration-toast-enter: 0ms;\n --wui-duration-toast-exit: 0ms;\n --wui-duration-collapse-enter: 0ms;\n --wui-duration-collapse-exit: 0ms;\n --wui-duration-layout: 0ms;\n --wui-duration-swipe-settle: 0ms;\n --wui-theme-transition-duration: 0ms;\n\n /* 加载循环不在 reduce 下归零:它是「正在进行」的唯一信号,停掉会被读成界面卡死,只放慢。 */\n --wui-duration-spin: 1600ms;\n --wui-duration-spinner: 1600ms;\n\n --wui-scale-enter: 1;\n --wui-dialog-scale-enter: 1;\n}\n\n@media (prefers-reduced-motion: reduce) {\n :host([motion='system']) {\n --wui-duration-press: 0ms;\n --wui-duration-feedback: 0ms;\n --wui-duration-trigger: 0ms;\n --wui-duration-focus: 0ms;\n --wui-duration-float-enter: 0ms;\n --wui-duration-float-exit: 0ms;\n --wui-duration-dialog-enter: 0ms;\n --wui-duration-dialog-exit: 0ms;\n --wui-duration-drawer-enter: 0ms;\n --wui-duration-drawer-exit: 0ms;\n --wui-duration-drawer-nested: 0ms;\n --wui-duration-toast-enter: 0ms;\n --wui-duration-toast-exit: 0ms;\n --wui-duration-collapse-enter: 0ms;\n --wui-duration-collapse-exit: 0ms;\n --wui-duration-layout: 0ms;\n --wui-duration-swipe-settle: 0ms;\n --wui-theme-transition-duration: 0ms;\n\n /* 加载循环不在 reduce 下归零:它是「正在进行」的唯一信号,停掉会被读成界面卡死,只放慢。 */\n --wui-duration-spin: 1600ms;\n --wui-duration-spinner: 1600ms;\n\n --wui-scale-enter: 1;\n --wui-dialog-scale-enter: 1;\n }\n}\n\n:host([appearance='light']),\n:host([appearance='system']) {\n --wui-color-page: #fff;\n --wui-color-surface: #fff;\n --wui-color-surface-raised: #f2f2f7;\n --wui-color-surface-control: #dfdfdf;\n --wui-color-surface-track: #e5e5ea;\n --wui-color-surface-menu: rgb(246 246 246 / 0.82);\n --wui-color-surface-glass: rgb(250 250 250 / 0.34);\n --wui-color-surface-glass-hover: color-mix(in srgb, var(--wui-color-text) 6%, var(--wui-color-surface-glass));\n --wui-color-surface-glass-active: color-mix(in srgb, var(--wui-color-text) 15%, var(--wui-color-surface-glass));\n --wui-color-surface-overlay: rgb(246 246 246 / 0.82);\n --wui-color-surface-segmented: #e5e5ea;\n --wui-color-surface-selected: #fff;\n --wui-color-text: #1b1b1b;\n --wui-color-text-secondary: #6a6a6a;\n --wui-color-text-tertiary: color-mix(in srgb, var(--wui-color-text) 35%, transparent);\n --wui-color-text-disabled: color-mix(in srgb, var(--wui-color-text) 32%, transparent);\n --wui-color-state-layer-hover: color-mix(in srgb, var(--wui-color-text) 6%, transparent);\n --wui-color-state-layer-active: color-mix(in srgb, var(--wui-color-text) 15%, transparent);\n --wui-color-border: rgb(0 0 0 / 0.1);\n --wui-color-glass-border: transparent;\n --wui-color-glass-highlight: rgb(255 255 255 / 0.9);\n --wui-color-glass-corner: rgb(255 255 255 / 0.5);\n --wui-color-glass-shade: rgb(0 0 0 / 0.03);\n --wui-glass-brightness: 1.06;\n --wui-color-accent: #08f;\n --wui-color-on-accent: #fff;\n --wui-color-on-control: #fff;\n --wui-color-success: #16a34a;\n --wui-color-warning: #d97706;\n --wui-color-danger: #dc2626;\n --wui-color-info: #2563eb;\n --wui-color-backdrop: rgb(0 0 0 / 0.12);\n --wui-shadow-overlay: 2px 16px 40px rgb(0 0 0 / 0.4);\n --wui-shadow-panel: 0 3px 9px rgb(0 0 0 / 0.27);\n --wui-shadow-glass:\n 0 0 1px rgb(0 0 0 / 0.02), 0 0 8px rgb(0 0 0 / 0.03), 0 2px 16px rgb(0 0 0 / 0.025), 0 8px 32px rgb(0 0 0 / 0.015);\n --wui-color-focus-ring: rgb(0 136 255 / 0.4);\n color-scheme: light;\n}\n\n:host([appearance='dark']) {\n --wui-color-page: #242628;\n --wui-color-surface: #2c2c2e;\n --wui-color-surface-raised: #2c2c2e;\n --wui-color-surface-control: #3a3a3c;\n --wui-color-surface-track: #444446;\n --wui-color-surface-menu: rgb(30 30 32 / 0.92);\n --wui-color-surface-glass: rgb(44 44 46 / 0.42);\n --wui-color-surface-glass-hover: color-mix(in srgb, var(--wui-color-text) 6%, var(--wui-color-surface-glass));\n --wui-color-surface-glass-active: color-mix(in srgb, var(--wui-color-text) 15%, var(--wui-color-surface-glass));\n --wui-color-surface-overlay: rgb(32 34 34 / 0.9);\n --wui-color-surface-segmented: #3a3a3c;\n --wui-color-surface-selected: #5c5c5e;\n --wui-color-text: #e9eaea;\n --wui-color-text-secondary: #a1a1a6;\n --wui-color-text-tertiary: color-mix(in srgb, var(--wui-color-text) 42%, transparent);\n --wui-color-text-disabled: color-mix(in srgb, var(--wui-color-text) 38%, transparent);\n --wui-color-state-layer-hover: color-mix(in srgb, var(--wui-color-text) 6%, transparent);\n --wui-color-state-layer-active: color-mix(in srgb, var(--wui-color-text) 15%, transparent);\n --wui-color-border: rgb(255 255 255 / 0.14);\n --wui-color-glass-border: rgb(255 255 255 / 0.05);\n --wui-color-glass-highlight: rgb(255 255 255 / 0.1);\n --wui-color-glass-corner: rgb(255 255 255 / 0.2);\n --wui-color-glass-shade: rgb(0 0 0 / 0.5);\n --wui-glass-brightness: 1.02;\n --wui-color-accent: #0a84ff;\n --wui-color-on-accent: #fff;\n --wui-color-on-control: #f2f2f7;\n --wui-color-success: #30d158;\n --wui-color-warning: #ff9f0a;\n --wui-color-danger: #ff453a;\n --wui-color-info: #64d2ff;\n --wui-color-backdrop: rgb(0 0 0 / 0.48);\n --wui-shadow-overlay: 0 18px 48px rgb(0 0 0 / 0.48);\n --wui-shadow-panel: 0 4px 16px rgb(0 0 0 / 0.32);\n --wui-shadow-glass: 0 8px 24px rgb(0 0 0 / 0.08);\n --wui-color-focus-ring: rgb(10 132 255 / 0.62);\n color-scheme: dark;\n}\n\n@media (prefers-color-scheme: dark) {\n :host([appearance='system']) {\n --wui-color-page: #242628;\n --wui-color-surface: #2c2c2e;\n --wui-color-surface-raised: #2c2c2e;\n --wui-color-surface-control: #3a3a3c;\n --wui-color-surface-track: #444446;\n --wui-color-surface-menu: rgb(30 30 32 / 0.92);\n --wui-color-surface-glass: rgb(44 44 46 / 0.42);\n --wui-color-surface-glass-hover: color-mix(in srgb, var(--wui-color-text) 6%, var(--wui-color-surface-glass));\n --wui-color-surface-glass-active: color-mix(in srgb, var(--wui-color-text) 15%, var(--wui-color-surface-glass));\n --wui-color-surface-overlay: rgb(32 34 34 / 0.9);\n --wui-color-surface-segmented: #3a3a3c;\n --wui-color-surface-selected: #5c5c5e;\n --wui-color-text: #e9eaea;\n --wui-color-text-secondary: #a1a1a6;\n --wui-color-text-tertiary: color-mix(in srgb, var(--wui-color-text) 42%, transparent);\n --wui-color-text-disabled: color-mix(in srgb, var(--wui-color-text) 38%, transparent);\n --wui-color-state-layer-hover: color-mix(in srgb, var(--wui-color-text) 6%, transparent);\n --wui-color-state-layer-active: color-mix(in srgb, var(--wui-color-text) 15%, transparent);\n --wui-color-border: rgb(255 255 255 / 0.14);\n --wui-color-glass-border: rgb(255 255 255 / 0.05);\n --wui-color-glass-highlight: rgb(255 255 255 / 0.1);\n --wui-color-glass-corner: rgb(255 255 255 / 0.2);\n --wui-color-glass-shade: rgb(0 0 0 / 0.5);\n --wui-glass-brightness: 1.02;\n --wui-color-accent: #0a84ff;\n --wui-color-on-accent: #fff;\n --wui-color-on-control: #f2f2f7;\n --wui-color-success: #30d158;\n --wui-color-warning: #ff9f0a;\n --wui-color-danger: #ff453a;\n --wui-color-info: #64d2ff;\n --wui-color-backdrop: rgb(0 0 0 / 0.48);\n --wui-shadow-overlay: 0 18px 48px rgb(0 0 0 / 0.48);\n --wui-shadow-panel: 0 4px 16px rgb(0 0 0 / 0.32);\n --wui-shadow-glass: 0 8px 24px rgb(0 0 0 / 0.08);\n --wui-color-focus-ring: rgb(10 132 255 / 0.62);\n color-scheme: dark;\n }\n}\n"],"mappings":""}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
export { toast } from './manager';
|
|
2
2
|
export { WebUiToast } from './toast';
|
|
3
|
-
export type { ToastCloseReason, ToastInstanceOptions,
|
|
3
|
+
export type { ToastCloseReason, ToastInstanceOptions, ToastOptions, ToastPosition, ToastType } from './types';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ToastInstanceOptions,
|
|
1
|
+
import { ToastInstanceOptions, ToastOptions } from './types';
|
|
2
2
|
type ToastShortcutOptions = Omit<ToastOptions, 'message' | 'type'> & Pick<ToastInstanceOptions, 'position'>;
|
|
3
3
|
declare function toast(options: ToastInstanceOptions): string;
|
|
4
4
|
declare namespace toast {
|
|
@@ -8,8 +8,6 @@ declare namespace toast {
|
|
|
8
8
|
var error: (message: string, options?: ToastShortcutOptions) => string;
|
|
9
9
|
var close: (id: string) => void;
|
|
10
10
|
var clear: () => void;
|
|
11
|
-
var updateMessage: (id: string, options: ToastMessageUpdateOptions) => void;
|
|
12
|
-
var _visibleCount: () => number;
|
|
13
11
|
var _reset: () => void;
|
|
14
12
|
}
|
|
15
13
|
export { toast };
|
|
@@ -5,87 +5,130 @@ var r = 0, i = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ new Map(), o, s =
|
|
|
5
5
|
function c() {
|
|
6
6
|
return `toast-${++r}`;
|
|
7
7
|
}
|
|
8
|
-
function l(
|
|
8
|
+
function l(r) {
|
|
9
|
+
let i = r.target ? t(r.target) : n();
|
|
10
|
+
return r.container ?? i?.getOverlayRoot() ?? e();
|
|
11
|
+
}
|
|
12
|
+
function u(e, t) {
|
|
9
13
|
let n = Array.from(t.children).find((t) => t instanceof HTMLElement && t.dataset.wuiToastPosition === e);
|
|
10
14
|
if (n) return n;
|
|
11
15
|
let r = document.createElement("div");
|
|
12
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", () => {
|
|
13
|
-
delete r.dataset.hovered,
|
|
17
|
+
delete r.dataset.hovered, f(r);
|
|
14
18
|
}), r;
|
|
15
19
|
}
|
|
16
|
-
function
|
|
20
|
+
function d(e) {
|
|
21
|
+
!e || e.children.length > 0 || (e.remove(), i.delete(e));
|
|
22
|
+
}
|
|
23
|
+
function f(e) {
|
|
17
24
|
e.dataset.hovered !== "true" && requestAnimationFrame(() => {
|
|
18
25
|
e.scrollTop = e.scrollHeight;
|
|
19
26
|
});
|
|
20
27
|
}
|
|
21
|
-
function
|
|
22
|
-
s || (s = !0, Promise.resolve().then(
|
|
28
|
+
function p() {
|
|
29
|
+
s || (s = !0, Promise.resolve().then(m));
|
|
23
30
|
}
|
|
24
|
-
function
|
|
31
|
+
function m() {
|
|
25
32
|
s = !1;
|
|
26
33
|
let e = o;
|
|
27
34
|
if (o = void 0, !e) return;
|
|
28
35
|
let t = /* @__PURE__ */ new Set();
|
|
29
|
-
for (let n of e)
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
let
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
return
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
}), n.appendChild(r), a.set(e, r), requestAnimationFrame(() => r.show());
|
|
48
|
-
}
|
|
49
|
-
function h(e) {
|
|
50
|
-
let t = a.get(e);
|
|
51
|
-
t && (t.remove(), a.delete(e));
|
|
52
|
-
}
|
|
53
|
-
function g(e) {
|
|
54
|
-
a.get(e)?.dismiss("programmatic");
|
|
55
|
-
}
|
|
56
|
-
function _() {
|
|
57
|
-
for (let e of a.values()) e.dismiss("clear");
|
|
36
|
+
for (let n of e) {
|
|
37
|
+
let e = u(n.options.position || "top-right", n.root);
|
|
38
|
+
y(n.id, n.options, e), t.add(e);
|
|
39
|
+
}
|
|
40
|
+
for (let e of t) f(e);
|
|
41
|
+
}
|
|
42
|
+
function h(e, t) {
|
|
43
|
+
return {
|
|
44
|
+
...e,
|
|
45
|
+
message: t.message ?? e.message,
|
|
46
|
+
heading: t.heading ?? e.heading,
|
|
47
|
+
type: t.type ?? e.type,
|
|
48
|
+
duration: t.duration ?? e.duration,
|
|
49
|
+
closable: t.closable ?? e.closable,
|
|
50
|
+
position: t.position ?? e.position,
|
|
51
|
+
container: e.container,
|
|
52
|
+
target: e.target
|
|
53
|
+
};
|
|
58
54
|
}
|
|
59
|
-
function
|
|
55
|
+
function g(e, t) {
|
|
56
|
+
t.message !== void 0 && (e.message = t.message), t.heading !== void 0 && (e.heading = t.heading), t.type !== void 0 && (e.type = t.type), t.closable !== void 0 && (e.noCloseButton = t.closable === !1), t.duration !== void 0 && e.setDuration(t.duration), t.position !== void 0 && t.position !== e.position && _(e, t.position);
|
|
57
|
+
}
|
|
58
|
+
function _(e, t) {
|
|
59
|
+
let n = e.parentElement, r = n?.parentElement;
|
|
60
|
+
if (!r) return;
|
|
61
|
+
let i = u(t, r), a = i;
|
|
62
|
+
typeof a.moveBefore == "function" ? a.moveBefore(e, null) : (e.pauseAutoClose(), i.appendChild(e), e.resumeAutoClose()), e.position = t, d(n), f(i);
|
|
63
|
+
}
|
|
64
|
+
function v(e) {
|
|
65
|
+
let t = e.id || c(), n = a.get(t);
|
|
66
|
+
if (n) {
|
|
67
|
+
if (n.isConnected && !n.dismissing) return g(n, e), t;
|
|
68
|
+
a.delete(t);
|
|
69
|
+
}
|
|
70
|
+
let r = o?.find((e) => e.id === t);
|
|
71
|
+
return r ? (r.options = h(r.options, e), t) : (o ||= [], o.push({
|
|
72
|
+
id: t,
|
|
73
|
+
options: e,
|
|
74
|
+
root: l(e)
|
|
75
|
+
}), p(), t);
|
|
76
|
+
}
|
|
77
|
+
function y(e, t, n) {
|
|
78
|
+
let r = document.createElement("web-ui-toast"), i = t.type || "info";
|
|
79
|
+
r.toastId = e, r.type = i, r.position = t.position || "top-right", r.heading = t.heading || "", r.message = t.message, r.duration = t.duration ?? (i === "error" ? 5e3 : 3e3), r.noCloseButton = t.closable === !1, r.addEventListener("toast-close", () => b(r)), n.appendChild(r), a.set(e, r), requestAnimationFrame(() => {
|
|
80
|
+
r.dismissing || r.show();
|
|
81
|
+
});
|
|
82
|
+
}
|
|
83
|
+
function b(e) {
|
|
84
|
+
a.get(e.toastId) === e && a.delete(e.toastId);
|
|
85
|
+
let t = e.parentElement;
|
|
86
|
+
e.remove(), d(t);
|
|
87
|
+
}
|
|
88
|
+
function x(e) {
|
|
89
|
+
for (let t of i) for (let n of Array.from(t.children)) n.tagName === "WEB-UI-TOAST" && n.toastId === e && n.remove();
|
|
90
|
+
for (let e of Array.from(i)) d(e);
|
|
91
|
+
}
|
|
92
|
+
function S(e) {
|
|
93
|
+
let t = o;
|
|
94
|
+
if (t) {
|
|
95
|
+
let n = t.findIndex((t) => t.id === e);
|
|
96
|
+
if (n >= 0) {
|
|
97
|
+
t.splice(n, 1);
|
|
98
|
+
return;
|
|
99
|
+
}
|
|
100
|
+
}
|
|
60
101
|
let n = a.get(e);
|
|
61
102
|
if (n) {
|
|
62
|
-
n.
|
|
103
|
+
n.dismiss("programmatic");
|
|
63
104
|
return;
|
|
64
105
|
}
|
|
65
|
-
|
|
66
|
-
|
|
106
|
+
x(e);
|
|
107
|
+
}
|
|
108
|
+
function C() {
|
|
109
|
+
o = void 0;
|
|
110
|
+
for (let e of a.values()) e.dismiss("clear");
|
|
67
111
|
}
|
|
68
|
-
function
|
|
69
|
-
return
|
|
112
|
+
function w(e) {
|
|
113
|
+
return v(e);
|
|
70
114
|
}
|
|
71
|
-
|
|
115
|
+
w.success = (e, t) => v({
|
|
72
116
|
...t,
|
|
73
117
|
message: e,
|
|
74
118
|
type: "success"
|
|
75
|
-
}),
|
|
119
|
+
}), w.info = (e, t) => v({
|
|
76
120
|
...t,
|
|
77
121
|
message: e,
|
|
78
122
|
type: "info"
|
|
79
|
-
}),
|
|
123
|
+
}), w.warning = (e, t) => v({
|
|
80
124
|
...t,
|
|
81
125
|
message: e,
|
|
82
126
|
type: "warning"
|
|
83
|
-
}),
|
|
127
|
+
}), w.error = (e, t) => v({
|
|
84
128
|
...t,
|
|
85
129
|
message: e,
|
|
86
|
-
type: "error"
|
|
87
|
-
|
|
88
|
-
}), y.close = g, y.clear = _, y.updateMessage = v, y._visibleCount = () => a.size, y._reset = () => {
|
|
130
|
+
type: "error"
|
|
131
|
+
}), w.close = S, w.clear = C, w._reset = () => {
|
|
89
132
|
o = void 0, s = !1;
|
|
90
133
|
for (let e of a.values()) e.remove();
|
|
91
134
|
a.clear();
|
|
@@ -93,6 +136,6 @@ y.success = (e, t) => p({
|
|
|
93
136
|
i.clear();
|
|
94
137
|
};
|
|
95
138
|
//#endregion
|
|
96
|
-
export {
|
|
139
|
+
export { w as toast };
|
|
97
140
|
|
|
98
141
|
//# sourceMappingURL=manager.js.map
|
|
@@ -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 {\n ToastCloseReason,\n ToastInstanceOptions,\n ToastMessageUpdateOptions,\n ToastOptions,\n ToastPosition\n} 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; container: HTMLElement }> | undefined\nlet isBatchScheduled = false\n\ntype ToastShortcutOptions = Omit<ToastOptions, 'message' | 'type'> & Pick<ToastInstanceOptions, 'position'>\n\nfunction generateId(): string {\n return `toast-${++toastIdCounter}`\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 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 mountToast(item.id, item.options, item.container)\n containersToScroll.add(item.container)\n }\n for (const container of containersToScroll) scrollToBottom(container)\n}\n\nfunction createToast(options: ToastInstanceOptions): string {\n const id = options.id || generateId()\n if (visibleToasts.has(id)) return id\n\n const position = options.position || 'top-right'\n const targetTheme = options.target ? findNearestTheme(options.target) : findRootTheme()\n const root = options.container ?? targetTheme?.getOverlayRoot() ?? getFallbackOverlayRoot()\n const container = ensureContainer(position, root)\n\n if (!pendingBatch) pendingBatch = []\n pendingBatch.push({ id, options, container })\n scheduleBatchFlush()\n return id\n}\n\nfunction mountToast(id: string, options: ToastInstanceOptions, container: HTMLElement) {\n const el = document.createElement('web-ui-toast')\n el.toastId = id\n el.type = options.type || 'info'\n el.position = options.position || 'top-right'\n el.heading = options.heading || ''\n el.message = options.message\n el.duration = options.duration ?? 3000\n el.noCloseButton = options.closable === false\n\n el.addEventListener('toast-close', (e: Event) => {\n const detail = (e as CustomEvent<{ id: string; reason: ToastCloseReason }>).detail\n removeToast(detail.id)\n })\n\n container.appendChild(el)\n visibleToasts.set(id, el)\n requestAnimationFrame(() => el.show())\n}\n\nfunction removeToast(id: string) {\n const el = visibleToasts.get(id)\n if (!el) return\n el.remove()\n visibleToasts.delete(id)\n}\n\nfunction close(id: string) {\n visibleToasts.get(id)?.dismiss('programmatic')\n}\n\nfunction clear() {\n for (const el of visibleToasts.values()) el.dismiss('clear')\n}\n\n/**\n * 更新指定 Toast 的消息与可选标题,不影响其自动关闭倒计时。\n * 尚未完成批量挂载的 Toast 也会更新其初始内容。\n */\nfunction updateMessage(id: string, options: ToastMessageUpdateOptions) {\n const visibleToast = visibleToasts.get(id)\n if (visibleToast) {\n visibleToast.message = options.message\n if (options.heading !== undefined) visibleToast.heading = options.heading\n return\n }\n\n const pendingToast = pendingBatch?.find(item => item.id === id)\n if (!pendingToast) return\n pendingToast.options.message = options.message\n if (options.heading !== undefined) pendingToast.options.heading = options.heading\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' })\ntoast.error = (message: string, options?: ToastShortcutOptions) =>\n createToast({ ...options, message, type: 'error', duration: options?.duration ?? 5000 })\ntoast.close = close\ntoast.clear = clear\ntoast.updateMessage = updateMessage\n\n// 获取当前可见 toast 数量(测试用)\ntoast._visibleCount = () => visibleToasts.size\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}`\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":";;;AAMA,IAAI,IAAiB,GAEf,oBAAkB,IAAI,IAAiB,GACvC,oBAAgB,IAAI,IAAwB,GAE9C,GACA,IAAmB;AAOvB,SAAS,IAAqB;CAC5B,OAAO,SAAS,EAAE;AACpB;AAEA,SAAS,EAAY,GAA4C;CAC/D,IAAM,IAAc,EAAQ,SAAS,EAAiB,EAAQ,MAAM,IAAI,EAAc;CACtF,OAAO,EAAQ,aAAa,GAAa,eAAe,KAAK,EAAuB;AACtF;AAEA,SAAS,EAAgB,GAAyB,GAAgC;CAChF,IAAM,IAAW,MAAM,KAAK,EAAK,QAAQ,CAAC,CAAC,MACxC,MAAgC,aAAiB,eAAe,EAAM,QAAQ,qBAAqB,CACtG;CACA,IAAI,GAAU,OAAO;CAErB,IAAM,IAAY,SAAS,cAAc,KAAK;CAc9C,OAbA,EAAU,YAAY,iCAAiC,KACvD,EAAU,QAAQ,mBAAmB,GACrC,EAAU,aAAa,QAAQ,KAAK,GACpC,EAAU,aAAa,aAAa,QAAQ,GAC5C,EAAU,aAAa,iBAAiB,WAAW,GACnD,EAAK,YAAY,CAAS,GAC1B,EAAgB,IAAI,CAAS,GAE7B,EAAU,iBAAiB,sBAAuB,EAAU,QAAQ,UAAU,MAAO,GACrF,EAAU,iBAAiB,sBAAsB;EAE/C,AADA,OAAO,EAAU,QAAQ,SACzB,EAAe,CAAS;CAC1B,CAAC,GACM;AACT;AAEA,SAAS,EAAe,GAA+B;CACjD,CAAC,KAAa,EAAU,SAAS,SAAS,MAC9C,EAAU,OAAO,GACjB,EAAgB,OAAO,CAAS;AAClC;AAEA,SAAS,EAAe,GAAwB;CAC1C,EAAU,QAAQ,YAAY,UAClC,4BAA4B;EAC1B,EAAU,YAAY,EAAU;CAClC,CAAC;AACH;AAEA,SAAS,IAAqB;CACxB,MACJ,IAAmB,IACnB,QAAa,QAAQ,CAAC,CAAC,KAAK,CAAU;AACxC;AAEA,SAAS,IAAa;CACpB,IAAmB;CACnB,IAAM,IAAQ;CAEd,IADA,IAAe,KAAA,GACX,CAAC,GAAO;CAEZ,IAAM,oBAAqB,IAAI,IAAiB;CAChD,KAAK,IAAM,KAAQ,GAAO;EAExB,IAAM,IAAY,EAAgB,EAAK,QAAQ,YAAY,aAAa,EAAK,IAAI;EAEjF,AADA,EAAW,EAAK,IAAI,EAAK,SAAS,CAAS,GAC3C,EAAmB,IAAI,CAAS;CAClC;CACA,KAAK,IAAM,KAAa,GAAoB,EAAe,CAAS;AACtE;AAMA,SAAS,EAAW,GAA4B,GAAmD;CACjG,OAAO;EACL,GAAG;EACH,SAAS,EAAM,WAAW,EAAK;EAC/B,SAAS,EAAM,WAAW,EAAK;EAC/B,MAAM,EAAM,QAAQ,EAAK;EACzB,UAAU,EAAM,YAAY,EAAK;EACjC,UAAU,EAAM,YAAY,EAAK;EACjC,UAAU,EAAM,YAAY,EAAK;EACjC,WAAW,EAAK;EAChB,QAAQ,EAAK;CACf;AACF;AAEA,SAAS,EAAW,GAAgB,GAA+B;CASjE,AARI,EAAQ,YAAY,KAAA,MAAW,EAAG,UAAU,EAAQ,UACpD,EAAQ,YAAY,KAAA,MAAW,EAAG,UAAU,EAAQ,UACpD,EAAQ,SAAS,KAAA,MAAW,EAAG,OAAO,EAAQ,OAC9C,EAAQ,aAAa,KAAA,MAAW,EAAG,gBAAgB,EAAQ,aAAa,KAIxE,EAAQ,aAAa,KAAA,KAAW,EAAG,YAAY,EAAQ,QAAQ,GAC/D,EAAQ,aAAa,KAAA,KAAa,EAAQ,aAAa,EAAG,YAAU,EAAc,GAAI,EAAQ,QAAQ;AAC5G;AAEA,SAAS,EAAc,GAAgB,GAAyB;CAC9D,IAAM,IAAO,EAAG,eACV,IAAO,GAAM;CACnB,IAAI,CAAC,GAAM;CACX,IAAM,IAAO,EAAgB,GAAU,CAAI,GAErC,IAAU;CAYhB,AAXI,OAAO,EAAQ,cAAe,aAEhC,EAAQ,WAAW,GAAI,IAAI,KAE3B,EAAG,eAAe,GAClB,EAAK,YAAY,CAAE,GACnB,EAAG,gBAAgB,IAGrB,EAAG,WAAW,GACd,EAAe,CAAI,GACnB,EAAe,CAAI;AACrB;AAEA,SAAS,EAAY,GAAuC;CAC1D,IAAM,IAAK,EAAQ,MAAM,EAAW,GAE9B,IAAU,EAAc,IAAI,CAAE;CACpC,IAAI,GAAS;EAQX,IAAI,EAAQ,eAAe,CAAC,EAAQ,YAElC,OADA,EAAW,GAAS,CAAO,GACpB;EAET,EAAc,OAAO,CAAE;CACzB;CAEA,IAAM,IAAU,GAAc,MAAK,MAAQ,EAAK,OAAO,CAAE;CASzD,OARI,KACF,EAAQ,UAAU,EAAW,EAAQ,SAAS,CAAO,GAC9C,MAGT,AAAmB,MAAe,CAAC,GACnC,EAAa,KAAK;EAAE;EAAI;EAAS,MAAM,EAAY,CAAO;CAAE,CAAC,GAC7D,EAAmB,GACZ;AACT;AAEA,SAAS,EAAW,GAAY,GAA+B,GAAwB;CACrF,IAAM,IAAK,SAAS,cAAc,cAAc,GAC1C,IAAO,EAAQ,QAAQ;CAe7B,AAdA,EAAG,UAAU,GACb,EAAG,OAAO,GACV,EAAG,WAAW,EAAQ,YAAY,aAClC,EAAG,UAAU,EAAQ,WAAW,IAChC,EAAG,UAAU,EAAQ,SAGrB,EAAG,WAAW,EAAQ,aAAa,MAAS,UAAU,MAAO,MAC7D,EAAG,gBAAgB,EAAQ,aAAa,IAExC,EAAG,iBAAiB,qBAAqB,EAAmB,CAAE,CAAC,GAE/D,EAAU,YAAY,CAAE,GACxB,EAAc,IAAI,GAAI,CAAE,GACxB,4BAA4B;EAGtB,EAAG,cACP,EAAG,KAAK;CACV,CAAC;AACH;AAOA,SAAS,EAAmB,GAAgB;CAC1C,AAAI,EAAc,IAAI,EAAG,OAAO,MAAM,KAAI,EAAc,OAAO,EAAG,OAAO;CACzE,IAAM,IAAY,EAAG;CAErB,AADA,EAAG,OAAO,GACV,EAAe,CAAS;AAC1B;AAOA,SAAS,EAAY,GAAY;CAC/B,KAAK,IAAM,KAAa,GACtB,KAAK,IAAM,KAAS,MAAM,KAAK,EAAU,QAAQ,GAC3C,EAAM,YAAY,kBACjB,EAA8B,YAAY,KAAI,EAAM,OAAO;CAGpE,KAAK,IAAM,KAAa,MAAM,KAAK,CAAe,GAAG,EAAe,CAAS;AAC/E;AAWA,SAAS,EAAM,GAAY;CACzB,IAAM,IAAS;CACf,IAAI,GAAQ;EACV,IAAM,IAAQ,EAAO,WAAU,MAAQ,EAAK,OAAO,CAAE;EACrD,IAAI,KAAS,GAAG;GACd,EAAO,OAAO,GAAO,CAAC;GACtB;EACF;CACF;CAEA,IAAM,IAAK,EAAc,IAAI,CAAE;CAC/B,IAAI,GAAI;EACN,EAAG,QAAQ,cAAc;EACzB;CACF;CACA,EAAY,CAAE;AAChB;AAMA,SAAS,IAAQ;CACf,IAAe,KAAA;CACf,KAAK,IAAM,KAAM,EAAc,OAAO,GAAG,EAAG,QAAQ,OAAO;AAC7D;AAEA,SAAS,EAAM,GAAuC;CACpD,OAAO,EAAY,CAAO;AAC5B;AAEA,EAAM,WAAW,GAAiB,MAChC,EAAY;CAAE,GAAG;CAAS;CAAS,MAAM;AAAU,CAAC,GACtD,EAAM,QAAQ,GAAiB,MAAmC,EAAY;CAAE,GAAG;CAAS;CAAS,MAAM;AAAO,CAAC,GACnH,EAAM,WAAW,GAAiB,MAChC,EAAY;CAAE,GAAG;CAAS;CAAS,MAAM;AAAU,CAAC,GAGtD,EAAM,SAAS,GAAiB,MAAmC,EAAY;CAAE,GAAG;CAAS;CAAS,MAAM;AAAQ,CAAC,GACrH,EAAM,QAAQ,GACd,EAAM,QAAQ,GAGd,EAAM,eAAe;CAEnB,AADA,IAAe,KAAA,GACf,IAAmB;CACnB,KAAK,IAAM,KAAM,EAAc,OAAO,GAAG,EAAG,OAAO;CACnD,EAAc,MAAM;CACpB,KAAK,IAAM,KAAa,GAAiB,EAAU,OAAO;CAC1D,EAAgB,MAAM;AACxB"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
//#region src/components/toast/style.css?inline
|
|
2
|
-
var e = "*,:before,:after{box-sizing:border-box}:host{display:block}:host([hidden]){display:none}.toast{--wui-internal-glass-shadow:var(--wui-shadow-panel,0 3px 9px #00000045);--wui-glass-corner-radius:var(--wui-radius-menu,18px);transform:translate(var(--toast-slide-x,0), var(--toast-slide-y,-8px)) scale(
|
|
2
|
+
var e = "*,:before,:after{box-sizing:border-box}:host{display:block}:host([hidden]){display:none}.toast{--wui-internal-glass-shadow:var(--wui-shadow-panel,0 3px 9px #00000045);--wui-glass-corner-radius:var(--wui-radius-menu,18px);transform:translate(var(--toast-slide-x,0), var(--toast-slide-y,-8px)) scale(var(--wui-scale-enter,.95));width:min(320px, calc(100dvw - 2 * var(--wui-toast-viewport-gap,16px)));border-radius:var(--wui-radius-menu,18px);min-height:36px;font-size:var(--wui-font-size,14px);color:var(--wui-color-text,#1b1b1b);opacity:0;background-color:var(--wui-color-surface-overlay,#f6f6f6d1);-webkit-backdrop-filter:blur(0) saturate(160%) brightness(var(--wui-glass-brightness,1.06));backdrop-filter:blur(0) saturate(160%) brightness(var(--wui-glass-brightness,1.06));transition:opacity var(--wui-duration-toast-enter,.28s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1)), -webkit-backdrop-filter var(--wui-duration-toast-enter,.28s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1)), backdrop-filter var(--wui-duration-toast-enter,.28s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1)), transform var(--wui-duration-toast-enter,.28s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1));gap:8px;padding:8px;line-height:1.5;display:flex;position:relative}:host([visible]) .toast{opacity:1;-webkit-backdrop-filter:blur(4px) saturate(160%) brightness(var(--wui-glass-brightness,1.06));backdrop-filter:blur(4px) saturate(160%) brightness(var(--wui-glass-brightness,1.06));transform:translate(0)scale(1)}:host(:not([visible])) .toast{transition-duration:var(--wui-duration-toast-exit,.2s)}web-ui-button.toast-close-btn{pointer-events:none;cursor:default;opacity:0;transition:opacity var(--wui-duration-trigger,.16s) ease;position:absolute;top:-8px;right:-8px}web-ui-button.toast-close-btn:focus-within{pointer-events:auto;opacity:1}@media (hover:hover) and (pointer:fine){web-ui-button.toast-close-btn:hover,.toast:hover web-ui-button.toast-close-btn{pointer-events:auto;opacity:1}}.toast web-ui-button[icon]{--wui-button-color:var(--wui-color-text-secondary,#6a6a6a)}.toast-icon{border-radius:var(--wui-radius-control,calc(infinity * 1px));flex-shrink:0;justify-content:center;align-items:center;width:20px;height:20px;margin-bottom:auto;display:flex}.toast.success .toast-icon{color:var(--wui-color-success,#16a34a);background-color:color-mix(in srgb, var(--wui-color-success,#16a34a) 10%, transparent)}.toast.info .toast-icon{color:var(--wui-color-info,#2563eb);background-color:color-mix(in srgb, var(--wui-color-info,#2563eb) 10%, transparent)}.toast.warning .toast-icon{color:var(--wui-color-warning,#d97706);background-color:color-mix(in srgb, var(--wui-color-warning,#d97706) 10%, transparent)}.toast.error .toast-icon{color:var(--wui-color-danger,#dc2626);background-color:color-mix(in srgb, var(--wui-color-danger,#dc2626) 10%, transparent)}.toast-body{flex:1;min-width:0}.toast-heading{font-size:var(--wui-font-size,14px);color:var(--wui-color-text,#1b1b1b);text-overflow:ellipsis;white-space:nowrap;font-weight:600;line-height:1.4;overflow:hidden}.toast-message{-webkit-line-clamp:3;font-size:calc(var(--wui-font-size,14px) - 1px);color:color-mix(in srgb, var(--wui-color-text,#1b1b1b) 55%, transparent);word-break:break-all;-webkit-box-orient:vertical;line-height:1.4;display:-webkit-box;overflow:hidden}.toast-time{color:color-mix(in srgb, var(--wui-color-text,#1b1b1b) 30%, transparent);white-space:nowrap;font-size:12px}@media (prefers-reduced-motion:reduce){.toast,:host([visible]) .toast{transition-duration:var(--wui-duration-feedback,.1s);transform:none}}";
|
|
3
3
|
//#endregion
|
|
4
4
|
export { e as default };
|
|
5
5
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/toast/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n display: block;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n/*
|
|
1
|
+
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/toast/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n display: block;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n/* 单层玻璃:.toast 自身承担背景/阴影/backdrop-filter。blur(0px) ↔ blur(4px) 平滑\n 插值(none↔blur 不可插值才是当年生硬跳变的根因),own opacity 过渡不禁用自身\n blur,因此 toast 直接 opacity + backdrop-filter + transform 同步过渡,无需双层。 */\n.toast {\n --wui-internal-glass-shadow: var(--wui-shadow-panel, 0 3px 9px rgb(0 0 0 / 0.27));\n --wui-glass-corner-radius: var(--wui-radius-menu, 18px);\n position: relative;\n transform: translate(var(--toast-slide-x, 0), var(--toast-slide-y, -8px)) scale(var(--wui-scale-enter, 0.95));\n\n display: flex;\n gap: 8px;\n\n width: min(320px, calc(100dvw - 2 * var(--wui-toast-viewport-gap, 16px)));\n min-height: 36px;\n padding: 8px;\n border-radius: var(--wui-radius-menu, 18px);\n\n font-size: var(--wui-font-size, 14px);\n line-height: 1.5;\n color: var(--wui-color-text, #1b1b1b);\n\n opacity: 0;\n background-color: var(--wui-color-surface-overlay, rgb(246 246 246 / 0.82));\n backdrop-filter: blur(0) saturate(160%) brightness(var(--wui-glass-brightness, 1.06));\n\n /* transition 列表需手写 -webkit-backdrop-filter:lightningcss 不会在 transition\n value 内追加 -webkit 项,iOS 16.4 上 blur 过渡依赖它(属性前缀会自动生成)。 */\n transition:\n opacity var(--wui-duration-toast-enter, 280ms) var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1)),\n -webkit-backdrop-filter var(--wui-duration-toast-enter, 280ms) var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1)),\n backdrop-filter var(--wui-duration-toast-enter, 280ms) var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1)),\n transform var(--wui-duration-toast-enter, 280ms) var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n}\n\n:host([visible]) .toast {\n transform: translate(0, 0) scale(1);\n opacity: 1;\n backdrop-filter: blur(4px) saturate(160%) brightness(var(--wui-glass-brightness, 1.06));\n}\n\n:host(:not([visible])) .toast {\n transition-duration: var(--wui-duration-toast-exit, 200ms);\n}\n\n/* ===== 关闭按钮(放在 hover 规则之前,避免 specificity 降序) ===== */\n\nweb-ui-button.toast-close-btn {\n pointer-events: none;\n cursor: default;\n\n position: absolute;\n top: -8px;\n right: -8px;\n\n opacity: 0;\n\n transition: opacity var(--wui-duration-trigger, 160ms) ease;\n\n /* 内层原生按钮获得键盘焦点时宿主同样可见 */\n &:focus-within {\n pointer-events: auto;\n opacity: 1;\n }\n}\n\n@media (hover: hover) and (pointer: fine) {\n web-ui-button.toast-close-btn:hover,\n .toast:hover web-ui-button.toast-close-btn {\n pointer-events: auto;\n opacity: 1;\n }\n}\n\n/* secondary 变体默认用文本色,恢复原关闭按钮的 muted 观感 */\n.toast web-ui-button[icon] {\n --wui-button-color: var(--wui-color-text-secondary, #6a6a6a);\n}\n\n.toast-icon {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n\n width: 20px;\n height: 20px;\n margin-bottom: auto;\n border-radius: var(--wui-radius-control, calc(infinity * 1px));\n}\n\n.toast.success .toast-icon {\n color: var(--wui-color-success, #16a34a);\n background-color: color-mix(in srgb, var(--wui-color-success, #16a34a) 10%, transparent);\n}\n\n.toast.info .toast-icon {\n color: var(--wui-color-info, #2563eb);\n background-color: color-mix(in srgb, var(--wui-color-info, #2563eb) 10%, transparent);\n}\n\n.toast.warning .toast-icon {\n color: var(--wui-color-warning, #d97706);\n background-color: color-mix(in srgb, var(--wui-color-warning, #d97706) 10%, transparent);\n}\n\n.toast.error .toast-icon {\n color: var(--wui-color-danger, #dc2626);\n background-color: color-mix(in srgb, var(--wui-color-danger, #dc2626) 10%, transparent);\n}\n\n.toast-body {\n flex: 1;\n min-width: 0;\n}\n\n.toast-heading {\n overflow: hidden;\n\n font-size: var(--wui-font-size, 14px);\n font-weight: 600;\n line-height: 1.4;\n color: var(--wui-color-text, #1b1b1b);\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.toast-message {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3;\n\n font-size: calc(var(--wui-font-size, 14px) - 1px);\n line-height: 1.4;\n color: color-mix(in srgb, var(--wui-color-text, #1b1b1b) 55%, transparent);\n word-break: break-all;\n}\n\n.toast-time {\n font-size: 12px;\n color: color-mix(in srgb, var(--wui-color-text, #1b1b1b) 30%, transparent);\n white-space: nowrap;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .toast,\n :host([visible]) .toast {\n transform: none;\n transition-duration: var(--wui-duration-feedback, 100ms);\n }\n}\n"],"mappings":""}
|
|
@@ -11,16 +11,53 @@ export declare class WebUiToast extends LitElement {
|
|
|
11
11
|
noCloseButton: boolean;
|
|
12
12
|
visible: boolean;
|
|
13
13
|
private _closeTimer?;
|
|
14
|
+
private _deadline;
|
|
15
|
+
/**
|
|
16
|
+
* 暂停自动关闭时记下的剩余时间。`undefined` 表示暂停时本来就没有计时器(`duration` 为 0、
|
|
17
|
+
* 或元素尚未 `show()`),与「已到期」(剩余 0)是两件事,不能共用一个 0。
|
|
18
|
+
*/
|
|
19
|
+
private _pausedRemaining?;
|
|
20
|
+
/** 指针停在 toast 上:计时处于悬停暂停态,只有指针离开才能续跑。 */
|
|
21
|
+
private _hoverPaused;
|
|
22
|
+
private _dismissing;
|
|
23
|
+
/**
|
|
24
|
+
* 退场已开始、`toast-close` 尚未派发。这段窗口内元素仍连接在 DOM、也仍被 manager 的映射
|
|
25
|
+
* 持有,但已不再接受属性更新:manager 的 upsert 据此走新建路径,否则「更新」会写进一条
|
|
26
|
+
* 正在消失的元素里 —— 调用方拿到同一个 id,却看不到任何可见通知。
|
|
27
|
+
*/
|
|
28
|
+
get dismissing(): boolean;
|
|
29
|
+
/** 指针仍停在 toast 上,自动关闭计时处于暂停态。 */
|
|
30
|
+
get hoverPaused(): boolean;
|
|
14
31
|
connectedCallback(): void;
|
|
15
32
|
disconnectedCallback(): void;
|
|
33
|
+
/**
|
|
34
|
+
* 定义该回调后,`Element.moveBefore()` 搬迁节点不再触发 disconnected/connected,
|
|
35
|
+
* 自动关闭计时与动画状态得以保留;未定义时旧引擎会走摘出重插,计时被 `_clearTimer()` 清掉。
|
|
36
|
+
*/
|
|
37
|
+
connectedMoveCallback(): void;
|
|
16
38
|
protected updated(changed: PropertyValues): void;
|
|
17
39
|
private _applySlideDirection;
|
|
18
40
|
startAutoClose(): void;
|
|
41
|
+
/**
|
|
42
|
+
* 由 manager 调用:显式 `duration` 更新。悬停暂停期间只记新值、不点火 —— 否则指针还压在
|
|
43
|
+
* toast 上时计时就被重启,「悬停暂停」在这条路径上直接失效。恢复时按新 duration 计满:
|
|
44
|
+
* 调用方显式改了生命周期,续跑按旧时长算出的剩余没有意义。`0` 表示不自动关闭,记成
|
|
45
|
+
* 「没有计时器」,否则恢复时会被当成「已到期」立即退场。
|
|
46
|
+
*/
|
|
47
|
+
setDuration(ms: number): void;
|
|
48
|
+
pauseAutoClose(): void;
|
|
49
|
+
resumeAutoClose(): void;
|
|
19
50
|
show(): void;
|
|
20
51
|
dismiss(reason?: ToastCloseReason): void;
|
|
21
52
|
private _clearTimer;
|
|
22
53
|
private _onPointerEnter;
|
|
23
54
|
private _onPointerLeave;
|
|
55
|
+
private _onDocumentPointerOver;
|
|
56
|
+
private _onDocumentPointerOut;
|
|
57
|
+
private _onDocumentPointerLeave;
|
|
58
|
+
private _resumeFromHover;
|
|
59
|
+
private _attachHoverFallback;
|
|
60
|
+
private _detachHoverFallback;
|
|
24
61
|
private _onCloseClick;
|
|
25
62
|
private _dispatchClose;
|
|
26
63
|
render(): import('lit').TemplateResult<1>;
|