@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/select/index.ts"],"sourcesContent":["import { html, LitElement, nothing, type PropertyValues, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport '@/components/icon'\nimport '@/components/option'\nimport glass from '@/assets/glass.css?inline'\nimport overlayMotion from '@/assets/overlay-motion.css?inline'\nimport type { WebUiOption } from '@/components/option'\nimport { lucideChevronDown } from '@/icons'\nimport { installPointerFocusSuppression } from '@/shared/focus/pointer-focus'\nimport { FormAssociated, defineFormAssociation, FormAssociationController } from '@/shared/form-association'\nimport { dispatchOpenChangeEvent } from '@/shared/open-state'\nimport {\n createComboboxOpenController,\n createOptionListenerBinding,\n handleComboboxFocusOut,\n nextWrappingIndex\n} from '@/shared/option-portal'\nimport { defineOptionPortal } from '@/shared/option-portal'\nimport { defineAnchoredPanel } from '@/shared/overlay/anchored-panel'\nimport { overlayComposition } from '@/shared/overlay/composition'\nimport { applyOverlayVariables, defineOverlayPortal } from '@/shared/overlay/portal'\nimport type { OverlayContainer, OverlayPortal } from '@/shared/overlay/portal'\nimport { defineScrollLockLease } from '@/shared/scroll-lock/scroll-lock'\n\nimport style from './style.css?inline'\n\ninstallPointerFocusSuppression()\n\n@customElement('web-ui-select')\nexport class WebUiSelect extends FormAssociated(LitElement) {\n static override styles = [unsafeCSS(glass), unsafeCSS(overlayMotion), unsafeCSS(style)]\n\n @property({ type: String, reflect: true }) placeholder = ''\n @property({ type: Boolean, reflect: true }) disabled = false\n @property({ type: Boolean, reflect: true }) required = false\n @property({ type: Boolean, reflect: true }) portal = false\n @property({ type: Boolean, reflect: true, attribute: 'no-scroll-lock' }) noScrollLock = false\n @property({ attribute: false }) overlayContainer?: OverlayContainer\n @property({ type: String, reflect: true }) name = ''\n\n // value 使用内部状态 + 访问器模式,在变更时同步 ElementInternals;\n // @property + reflect 让它与 input/textarea/slider/input-number 的 value 反射语义保持一致。\n @state() private _value = ''\n @property({ type: String, reflect: true })\n get value(): string {\n return this._value\n }\n set value(v: string) {\n const old = this._value\n this._value = v\n this._formAssociation.sync()\n this.toggleAttribute('data-has-value', !!v)\n this.requestUpdate('value', old)\n }\n\n private readonly _formAssociation = defineFormAssociation<string>({\n host: this,\n initialize: () => {\n // 同步 HTML 属性中预设的 value,补全访问器模式不处理 attribute 反射。\n const attrValue = this.getAttribute('value')\n if (attrValue !== null) {\n this._value = attrValue\n this.toggleAttribute('data-has-value', !!attrValue)\n }\n },\n getState: () => this._value,\n setState: value => {\n this.value = value\n },\n getFormValue: () => this._value,\n getFormState: () => this._value,\n restoreState: state => {\n if (typeof state === 'string') this.value = state\n },\n syncValidity: () => this._syncValidity()\n }).make()\n\n private readonly _formAssociationController = new FormAssociationController(this, this._formAssociation)\n\n private get _isDisabled(): boolean {\n return this.disabled || this._formAssociation.isFormDisabled()\n }\n\n @state() private _isOpen = false\n @state() private _activeIndex = -1\n @state() private _selectedLabel = ''\n @state() private _hasTriggerSlot = false\n\n private _options: WebUiOption[] = []\n private _portal?: OverlayPortal\n private _portalContent?: HTMLElement\n private readonly _scrollLock = defineScrollLockLease().make()\n\n private static _nextInstanceId = 0\n\n // option 注册表 / portal 同步 / 微任务调度收敛到 shared 模块(autocomplete 同款)\n private readonly _optionPortal = defineOptionPortal().make({\n element: this,\n // 实例级前缀保证多实例同时展开时 option id 不冲突(aria 引用按 id 定位)\n idPrefix: `web-ui-select-${++WebUiSelect._nextInstanceId}`,\n getPortal: () => this._portal,\n getPortalContent: () => this._portalContent,\n isOpen: () => this.portal && this._isOpen,\n getMigratableNodes: () => [...this.querySelectorAll<WebUiOption>('web-ui-option')],\n hasUpdated: () => this.hasUpdated,\n requestUpdate: () => this.requestUpdate(),\n bindOption: option => this._bindOption(option),\n unbindOption: option => this._unbindOption(option),\n onImmediateSync: () => {\n this._refreshOptions()\n this._syncSelected()\n this._syncActiveOption()\n }\n })\n private readonly _panel = defineAnchoredPanel().make({\n getAnchor: () => this.shadowRoot?.querySelector<HTMLElement>('.select-trigger') ?? null,\n getLocalPanel: () => this.shadowRoot?.querySelector<HTMLElement>('.select-overlay') ?? null,\n getPositioning: () => ({\n placement: 'bottom-start',\n offset: 4,\n // 面板宽度统一为 max(内容, trigger, --wui-overlay-min-width),内容自适应展开\n minAnchorWidth: true,\n strategy: this.portal ? 'fixed' : 'absolute'\n }),\n isPortal: () => this.portal,\n createPortal: () => this._createPortal()\n })\n\n get isOpen(): boolean {\n return this._isOpen\n }\n\n get open(): boolean {\n return this._isOpen\n }\n\n private _onClickOutside = (e: MouseEvent) => {\n const panel = this._panel.getPanel()\n const isInside = e.composedPath().includes(this) || (panel && overlayComposition.containsEvent(panel, e))\n if (this._isOpen && !isInside) {\n this._close()\n }\n }\n\n private _onFocusOut = () => {\n handleComboboxFocusOut(\n this,\n () => this._panel.getPanel(),\n () => this._isOpen,\n () => this._close()\n )\n }\n\n override connectedCallback() {\n super.connectedCallback()\n this._optionPortal.bindHost()\n this.addEventListener('keydown', this._onKeydown)\n this.addEventListener('focusout', this._onFocusOut)\n document.addEventListener('click', this._onClickOutside)\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback()\n this._optionPortal.dispose()\n this.removeEventListener('keydown', this._onKeydown)\n this.removeEventListener('focusout', this._onFocusOut)\n document.removeEventListener('click', this._onClickOutside)\n this._options.forEach(this._unbindOption)\n this._options = []\n this._portal = undefined\n this._portalContent = undefined\n this._close()\n this._panel.dispose()\n this._scrollLock.release()\n }\n\n override firstUpdated() {\n requestAnimationFrame(() => {\n if (this.isConnected) this._optionPortal.scheduleRefresh()\n })\n }\n\n override willUpdate() {\n this._refreshOptions()\n this._syncSelected()\n }\n\n override updated(changed: PropertyValues) {\n if (changed.has('portal') || changed.has('overlayContainer'))\n requestAnimationFrame(() => this._reconfigureOverlay())\n if (changed.has('noScrollLock')) this._syncScrollLock()\n this._syncOpenAttribute()\n this._syncValidity()\n }\n\n private _syncValidity() {\n const internals = this._formAssociation.getInternals()\n if (!internals || typeof internals.setValidity !== 'function') return\n if (this._isDisabled || !this.required || this.value) internals.setValidity({})\n else internals.setValidity({ valueMissing: true }, '请选择一项')\n }\n\n private _syncOpenAttribute() {\n this.toggleAttribute('open', this._isOpen)\n }\n\n private _onTriggerSlotChange = (e: Event) => {\n const slot = e.target as HTMLSlotElement\n const hasContent = slot.assignedElements().length > 0\n if (this._hasTriggerSlot === hasContent) return\n this._hasTriggerSlot = hasContent\n this._reconfigureOverlay()\n }\n\n private _syncSelected() {\n this._options.forEach(o => {\n o.selected = o.value === this.value\n })\n if (!this.value) {\n this._selectedLabel = this.placeholder\n return\n }\n const option = this._options.find(o => o.value === this.value)\n this._selectedLabel = option?.label || this.placeholder\n }\n\n private readonly _optionListeners = createOptionListenerBinding({\n // 惰性解引用:handler 字段声明在后者仍可在调用期取到\n onClick: event => this._handleOptionClick(event),\n onPointerOver: event => this._handleOptionPointerOver(event),\n onPointerDown: event => this._handleOptionPointerDown(event),\n onUpdate: () => this._onOptionUpdate()\n })\n private _bindOption = (option: WebUiOption) => this._optionListeners.bind(option)\n private _unbindOption = (option: WebUiOption) => this._optionListeners.unbind(option)\n\n private _refreshOptions() {\n const activeOption = this._options[this._activeIndex]\n // diff 绑定/解绑与激活索引按 option 身份保持在 shared 内完成,\n // 避免移除中间项后激活静默偏移到相邻项\n const next = this._optionPortal.refresh(this._options, activeOption)\n this._options = next.options\n this._activeIndex = next.activeIndex\n // 非 portal 模式 aria-activedescendant 引用真实 option id,需保证已分配\n this._optionPortal.ensureOptionIds(this._options)\n }\n\n private _handleOptionClick = (e: Event) => {\n if (!(e.currentTarget instanceof HTMLElement)) return\n const option = e.currentTarget as WebUiOption\n if (option.disabled || !this._isLive(option)) return\n this.value = option.value\n this._close()\n this._notifyValueChange()\n }\n\n private _onOptionUpdate = () => {\n this._syncSelected()\n this._syncActiveOption()\n }\n\n private _handleOptionPointerOver = (e: PointerEvent) => {\n if (e.pointerType === 'touch') return\n if (!this._isOpen || this._activeIndex < 0 || !(e.currentTarget instanceof HTMLElement)) return\n\n // 指针接管后只保留 :hover,避免键盘激活项与悬停项同时高亮。\n this._activeIndex = -1\n this._syncActiveOption()\n }\n\n private _handleOptionPointerDown = (e: PointerEvent) => {\n // 保持 trigger 焦点,避免 focusout 在 click 前关闭浮层。\n e.preventDefault()\n }\n\n // slotchange 不冒泡,只能由模板内 slot 自行监听;稳定引用避免 Lit 重挂载\n private _onSlotChange = () => {\n this._optionPortal.scheduleRefresh()\n }\n\n // slotchange/unregister 的刷新依赖 Lit 渲染调度;键盘或 click 事件可能先于其触发,\n // 已从 DOM 移除或被移出 Select/portal 面板的选项不得再被激活或选中。\n private _isLive(option: WebUiOption): boolean {\n const panel = this.portal ? this._panel.getPanel() : null\n return option.isConnected && (this.contains(option) || (!!panel && panel.contains(option)))\n }\n\n private _onKeydown = (e: KeyboardEvent) => {\n if (this._isDisabled) return\n\n switch (e.key) {\n case 'Escape':\n if (this._isOpen) {\n this._close()\n e.preventDefault()\n }\n break\n case 'ArrowDown':\n e.preventDefault()\n if (!this._isOpen) {\n this._open(true)\n } else {\n this._navigateActive(1)\n }\n break\n case 'ArrowUp':\n e.preventDefault()\n if (!this._isOpen) this._open(true)\n else this._navigateActive(-1)\n break\n case 'Enter': {\n if (this._isOpen && this._activeIndex >= 0) {\n const option = this._options[this._activeIndex]\n if (option && this._isLive(option) && !option.disabled) {\n this.value = option.value\n this._notifyValueChange()\n }\n this._close()\n e.preventDefault()\n }\n break\n }\n }\n }\n\n private _navigateActive(delta: number) {\n const enabled = this._options.filter(o => !o.disabled && this._isLive(o))\n if (!enabled.length) return\n\n const selectedOption = this._options.find(\n option => option.value === this.value && !option.disabled && this._isLive(option)\n )\n const currentIdx =\n this._activeIndex >= 0 && this._isLive(this._options[this._activeIndex])\n ? enabled.indexOf(this._options[this._activeIndex])\n : selectedOption\n ? enabled.indexOf(selectedOption)\n : delta > 0\n ? -1\n : 0\n const nextOption = enabled[nextWrappingIndex(enabled.length, currentIdx, delta)]\n this._activeIndex = this._options.indexOf(nextOption)\n\n this._syncActiveOption()\n }\n\n // 开合生命周期不变量(guard / 派发顺序 / scroll-lock 配对 / portal rAF dance)\n // 收敛在 shared combobox-shell;select 只注入差异点\n private readonly _openController = createComboboxOpenController({\n canOpen: () => !this._isDisabled,\n getIsOpen: () => this._isOpen,\n setIsOpen: open => {\n this._isOpen = open\n },\n dispatchOpenChange: () => this._dispatchOpenChange(),\n syncScrollLock: open => this._syncScrollLock(open),\n isPortal: () => this.portal,\n openOverlay: isKeyboardNavigation => this._openOverlay(isKeyboardNavigation),\n closeOverlay: () => void this._closeOverlay(),\n onOpen: isKeyboardNavigation => {\n this._syncSelected()\n if (isKeyboardNavigation) this._setInitialActiveOption()\n else this._syncActiveOption()\n },\n onAfterClose: () => {\n this._activeIndex = -1\n this._options.forEach(o => o.removeAttribute('active'))\n }\n })\n\n private _open(isKeyboardNavigation = false) {\n this._openController.open(isKeyboardNavigation)\n }\n\n private _close() {\n this._openController.close()\n }\n\n private _dispatchOpenChange() {\n dispatchOpenChangeEvent(this, this._isOpen)\n }\n\n private _setInitialActiveOption() {\n const selectedIndex = this._options.findIndex(\n option => option.value === this.value && !option.disabled && this._isLive(option)\n )\n const firstEnabledIndex = this._options.findIndex(option => !option.disabled && this._isLive(option))\n this._activeIndex = selectedIndex >= 0 ? selectedIndex : firstEnabledIndex\n this._syncActiveOption()\n }\n\n private _syncActiveOption() {\n this._options.forEach((option, index) =>\n option.toggleAttribute('active', index === this._activeIndex && this._isLive(option))\n )\n }\n\n private _notifyValueChange() {\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }))\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n }\n\n private _syncScrollLock(isOpen = this._isOpen) {\n this._scrollLock.sync(isOpen && !this.noScrollLock)\n }\n\n private _togglePopup() {\n if (this._isDisabled) return\n if (this._isOpen) this._close()\n else this._open()\n }\n\n private _openOverlay(isKeyboardNavigation = false) {\n this._panel.open(isKeyboardNavigation)\n }\n\n private _createPortal(): OverlayPortal {\n const portal = defineOverlayPortal().make({\n container: this.overlayContainer,\n target: this,\n style: `${glass}\\n${overlayMotion}\\n${style}`,\n className: 'wui-glass select-overlay portal wui-floating-panel',\n onContentChange: () => this._optionPortal.scheduleRefresh()\n })\n this._portal = portal\n applyOverlayVariables(portal.panel, this, [\n '--wui-overlay-min-width',\n '--wui-select-max-width',\n '--wui-select-max-height'\n ])\n portal.panel.setAttribute('role', 'listbox')\n const scroll = document.createElement('div')\n scroll.className = 'select-scroll'\n const content = document.createElement('div')\n content.className = 'select-content'\n this._portalContent = content\n scroll.append(content)\n portal.panel.append(scroll)\n // 自定义 trigger 必须留在宿主内,不能随 options 迁入 portal 面板\n portal.moveContent(\n Array.from(this.children).filter(child => child.slot !== 'trigger'),\n content\n )\n return portal\n }\n\n private _reconfigureOverlay() {\n // reconfigure 会 dispose 并按需重建 portal,旧引用必须同步失效\n this._portal = undefined\n this._portalContent = undefined\n this._panel.reconfigure(this._isOpen)\n }\n\n private async _closeOverlay() {\n const closed = await this._panel.close(() => this._isOpen)\n // portal 已随关闭 dispose,与 autocomplete 对齐同步失效引用\n if (closed) {\n this._portal = undefined\n this._portalContent = undefined\n }\n }\n\n override render() {\n // portal 模式下 options 被 moveContent 移入浮层 shadow root,id 引用无法跨树作用域\n // 解析,因此 activedescendant 仅在非 portal 模式输出;aria-controls 同理指向同根内 listbox\n const listboxId = `${this.localName}-listbox`\n const activeDescendant =\n !this.portal && this._isOpen && this._activeIndex >= 0\n ? (this._options[this._activeIndex]?.id ?? nothing)\n : nothing\n\n return html`\n <div class=\"wui-select-inner\">\n <div\n class=\"wui-glass select-trigger\"\n ?data-custom-trigger=${this._hasTriggerSlot}\n @click=${this._togglePopup}\n tabindex=${this._isDisabled ? '-1' : '0'}\n role=\"combobox\"\n aria-expanded=${this._isOpen}\n aria-haspopup=\"listbox\"\n aria-controls=${this.portal ? nothing : listboxId}\n aria-disabled=${String(this._isDisabled)}\n aria-activedescendant=${activeDescendant}\n >\n <slot name=\"trigger\" @slotchange=${this._onTriggerSlotChange}></slot>\n ${!this._hasTriggerSlot ? html`<span class=\"label\">${this._selectedLabel}</span>` : nothing}\n <web-ui-icon class=\"arrow\" .icon=${lucideChevronDown}></web-ui-icon>\n </div>\n <div class=\"select-overlay wui-floating-panel wui-glass\" hidden role=\"listbox\" id=${listboxId}>\n <div class=\"select-scroll\">\n <div class=\"select-content\">\n <slot @slotchange=${this._onSlotChange}></slot>\n </div>\n </div>\n </div>\n </div>\n `\n }\n\n declare readonly $events: {\n input: Event\n change: Event\n 'open-change': CustomEvent<{ open: boolean }>\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'web-ui-select': WebUiSelect\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA2BA,EAA+B;AAGxB,IAAM,IAAN,cAA0B,EAAe,CAAU,CAAC,CAAC;;;;;EA+TvB,aA5TsB,KAAA,cAAA,IACF,KAAA,WAAA,IACA,KAAA,WAAA,IACF,KAAA,SAAA,IACmC,KAAA,eAAA,IAEtC,KAAA,OAAA,IAIxB,KAAA,SAAA,IAaU,KAAA,mBAAA,EAA8B;GAChE,MAAM;GACN,kBAAkB;IAEhB,IAAM,IAAY,KAAK,aAAa,OAAO;IAC3C,AAAI,MAAc,SAChB,KAAK,SAAS,GACd,KAAK,gBAAgB,kBAAkB,CAAC,CAAC,CAAS;GAEtD;GACA,gBAAgB,KAAK;GACrB,WAAU,MAAS;IACjB,KAAK,QAAQ;GACf;GACA,oBAAoB,KAAK;GACzB,oBAAoB,KAAK;GACzB,eAAc,MAAS;IACrB,AAAI,OAAO,KAAU,aAAU,KAAK,QAAQ;GAC9C;GACA,oBAAoB,KAAK,cAAc;EACzC,CAAC,CAAC,CAAC,KAAK,GAEsC,KAAA,6BAAA,IAAI,EAA0B,MAAM,KAAK,gBAAgB,GAM5E,KAAA,UAAA,IACK,KAAA,eAAA,IACE,KAAA,iBAAA,IACC,KAAA,kBAAA,IAED,KAAA,WAAA,CAAC,GAGJ,KAAA,cAAA,EAAsB,CAAC,CAAC,KAAK,GAK3B,KAAA,gBAAA,EAAmB,CAAC,CAAC,KAAK;GACzD,SAAS;GAET,UAAU,iBAAiB,EAAA,EAAc;GACzC,iBAAiB,KAAK;GACtB,wBAAwB,KAAK;GAC7B,cAAc,KAAK,UAAU,KAAK;GAClC,0BAA0B,CAAC,GAAG,KAAK,iBAA8B,eAAe,CAAC;GACjF,kBAAkB,KAAK;GACvB,qBAAqB,KAAK,cAAc;GACxC,aAAY,MAAU,KAAK,YAAY,CAAM;GAC7C,eAAc,MAAU,KAAK,cAAc,CAAM;GACjD,uBAAuB;IAGrB,AAFA,KAAK,gBAAgB,GACrB,KAAK,cAAc,GACnB,KAAK,kBAAkB;GACzB;EACF,CAAC,GACyB,KAAA,SAAA,EAAoB,CAAC,CAAC,KAAK;GACnD,iBAAiB,KAAK,YAAY,cAA2B,iBAAiB,KAAK;GACnF,qBAAqB,KAAK,YAAY,cAA2B,iBAAiB,KAAK;GACvF,uBAAuB;IACrB,WAAW;IACX,QAAQ;IAER,gBAAgB;IAChB,UAAU,KAAK,SAAS,UAAU;GACpC;GACA,gBAAgB,KAAK;GACrB,oBAAoB,KAAK,cAAc;EACzC,CAAC,GAU0B,KAAA,mBAAA,MAAkB;GAC3C,IAAM,IAAQ,KAAK,OAAO,SAAS,GAC7B,IAAW,EAAE,aAAa,CAAC,CAAC,SAAS,IAAI,KAAM,KAAS,EAAmB,cAAc,GAAO,CAAC;GACvG,AAAI,KAAK,WAAW,CAAC,KACnB,KAAK,OAAO;EAEhB,GAE4B,KAAA,oBAAA;GAC1B,EACE,YACM,KAAK,OAAO,SAAS,SACrB,KAAK,eACL,KAAK,OAAO,CACpB;EACF,GAuDgC,KAAA,wBAAA,MAAa;GAE3C,IAAM,IADO,EAAE,OACS,iBAAiB,CAAC,CAAC,SAAS;GAChD,KAAK,oBAAoB,MAC7B,KAAK,kBAAkB,GACvB,KAAK,oBAAoB;EAC3B,GAcoC,KAAA,mBAAA,EAA4B;GAE9D,UAAS,MAAS,KAAK,mBAAmB,CAAK;GAC/C,gBAAe,MAAS,KAAK,yBAAyB,CAAK;GAC3D,gBAAe,MAAS,KAAK,yBAAyB,CAAK;GAC3D,gBAAgB,KAAK,gBAAgB;EACvC,CAAC,GACsB,KAAA,eAAA,MAAwB,KAAK,iBAAiB,KAAK,CAAM,GACvD,KAAA,iBAAA,MAAwB,KAAK,iBAAiB,OAAO,CAAM,GAatD,KAAA,sBAAA,MAAa;GACzC,IAAI,EAAE,EAAE,yBAAyB,cAAc;GAC/C,IAAM,IAAS,EAAE;GACb,EAAO,YAAY,CAAC,KAAK,QAAQ,CAAM,MAC3C,KAAK,QAAQ,EAAO,OACpB,KAAK,OAAO,GACZ,KAAK,mBAAmB;EAC1B,GAEgC,KAAA,wBAAA;GAE9B,AADA,KAAK,cAAc,GACnB,KAAK,kBAAkB;EACzB,GAEoC,KAAA,4BAAA,MAAoB;GAClD,EAAE,gBAAgB,YAClB,CAAC,KAAK,WAAW,KAAK,eAAe,KAAK,EAAE,EAAE,yBAAyB,iBAG3E,KAAK,eAAe,IACpB,KAAK,kBAAkB;EACzB,GAEoC,KAAA,4BAAA,MAAoB;GAEtD,EAAE,eAAe;EACnB,GAG8B,KAAA,sBAAA;GAC5B,KAAK,cAAc,gBAAgB;EACrC,GASsB,KAAA,cAAA,MAAqB;GACrC,UAAK,aAET,QAAQ,EAAE,KAAV;IACE,KAAK;KACH,AAAI,KAAK,YACP,KAAK,OAAO,GACZ,EAAE,eAAe;KAEnB;IACF,KAAK;KAEH,AADA,EAAE,eAAe,GACZ,KAAK,UAGR,KAAK,gBAAgB,CAAC,IAFtB,KAAK,MAAM,EAAI;KAIjB;IACF,KAAK;KAEH,AADA,EAAE,eAAe,GACZ,KAAK,UACL,KAAK,gBAAgB,EAAE,IADT,KAAK,MAAM,EAAI;KAElC;IACF,KAAK,SACH,IAAI,KAAK,WAAW,KAAK,gBAAgB,GAAG;KAC1C,IAAM,IAAS,KAAK,SAAS,KAAK;KAMlC,AALI,KAAU,KAAK,QAAQ,CAAM,KAAK,CAAC,EAAO,aAC5C,KAAK,QAAQ,EAAO,OACpB,KAAK,mBAAmB,IAE1B,KAAK,OAAO,GACZ,EAAE,eAAe;IACnB;GAGJ;EACF,GAyBmC,KAAA,kBAAA,EAA6B;GAC9D,eAAe,CAAC,KAAK;GACrB,iBAAiB,KAAK;GACtB,YAAW,MAAQ;IACjB,KAAK,UAAU;GACjB;GACA,0BAA0B,KAAK,oBAAoB;GACnD,iBAAgB,MAAQ,KAAK,gBAAgB,CAAI;GACjD,gBAAgB,KAAK;GACrB,cAAa,MAAwB,KAAK,aAAa,CAAoB;GAC3E,oBAAoB,KAAK,KAAK,cAAc;GAC5C,SAAQ,MAAwB;IAE9B,AADA,KAAK,cAAc,GACf,IAAsB,KAAK,wBAAwB,IAClD,KAAK,kBAAkB;GAC9B;GACA,oBAAoB;IAElB,AADA,KAAK,eAAe,IACpB,KAAK,SAAS,SAAQ,MAAK,EAAE,gBAAgB,QAAQ,CAAC;GACxD;EACF,CAAC;;;EAlVwB,KAAA,SAAA;GAAC,EAAU,CAAK;GAAG,EAAU,CAAa;GAAG,EAAU,CAAK;EAAC;;CAatF,IACI,QAAgB;EAClB,OAAO,KAAK;CACd;CACA,IAAI,MAAM,GAAW;EACnB,IAAM,IAAM,KAAK;EAIjB,AAHA,KAAK,SAAS,GACd,KAAK,iBAAiB,KAAK,GAC3B,KAAK,gBAAgB,kBAAkB,CAAC,CAAC,CAAC,GAC1C,KAAK,cAAc,SAAS,CAAG;CACjC;CA0BA,IAAY,cAAuB;EACjC,OAAO,KAAK,YAAY,KAAK,iBAAiB,eAAe;CAC/D;;EAYiC,KAAA,kBAAA;;CAmCjC,IAAI,SAAkB;EACpB,OAAO,KAAK;CACd;CAEA,IAAI,OAAgB;EAClB,OAAO,KAAK;CACd;CAmBA,oBAA6B;EAK3B,AAJA,MAAM,kBAAkB,GACxB,KAAK,cAAc,SAAS,GAC5B,KAAK,iBAAiB,WAAW,KAAK,UAAU,GAChD,KAAK,iBAAiB,YAAY,KAAK,WAAW,GAClD,SAAS,iBAAiB,SAAS,KAAK,eAAe;CACzD;CAEA,uBAAgC;EAY9B,AAXA,MAAM,qBAAqB,GAC3B,KAAK,cAAc,QAAQ,GAC3B,KAAK,oBAAoB,WAAW,KAAK,UAAU,GACnD,KAAK,oBAAoB,YAAY,KAAK,WAAW,GACrD,SAAS,oBAAoB,SAAS,KAAK,eAAe,GAC1D,KAAK,SAAS,QAAQ,KAAK,aAAa,GACxC,KAAK,WAAW,CAAC,GACjB,KAAK,UAAU,KAAA,GACf,KAAK,iBAAiB,KAAA,GACtB,KAAK,OAAO,GACZ,KAAK,OAAO,QAAQ,GACpB,KAAK,YAAY,QAAQ;CAC3B;CAEA,eAAwB;EACtB,4BAA4B;GAC1B,AAAI,KAAK,eAAa,KAAK,cAAc,gBAAgB;EAC3D,CAAC;CACH;CAEA,aAAsB;EAEpB,AADA,KAAK,gBAAgB,GACrB,KAAK,cAAc;CACrB;CAEA,QAAiB,GAAyB;EAKxC,CAJI,EAAQ,IAAI,QAAQ,KAAK,EAAQ,IAAI,kBAAkB,MACzD,4BAA4B,KAAK,oBAAoB,CAAC,GACpD,EAAQ,IAAI,cAAc,KAAG,KAAK,gBAAgB,GACtD,KAAK,mBAAmB,GACxB,KAAK,cAAc;CACrB;CAEA,gBAAwB;EACtB,IAAM,IAAY,KAAK,iBAAiB,aAAa;EACjD,CAAC,KAAa,OAAO,EAAU,eAAgB,eAC/C,KAAK,eAAe,CAAC,KAAK,YAAY,KAAK,QAAO,EAAU,YAAY,CAAC,CAAC,IACzE,EAAU,YAAY,EAAE,cAAc,GAAK,GAAG,OAAO;CAC5D;CAEA,qBAA6B;EAC3B,KAAK,gBAAgB,QAAQ,KAAK,OAAO;CAC3C;CAUA,gBAAwB;EAItB,IAHA,KAAK,SAAS,SAAQ,MAAK;GACzB,EAAE,WAAW,EAAE,UAAU,KAAK;EAChC,CAAC,GACG,CAAC,KAAK,OAAO;GACf,KAAK,iBAAiB,KAAK;GAC3B;EACF;EACA,IAAM,IAAS,KAAK,SAAS,MAAK,MAAK,EAAE,UAAU,KAAK,KAAK;EAC7D,KAAK,iBAAiB,GAAQ,SAAS,KAAK;CAC9C;CAYA,kBAA0B;EACxB,IAAM,IAAe,KAAK,SAAS,KAAK,eAGlC,IAAO,KAAK,cAAc,QAAQ,KAAK,UAAU,CAAY;EAInE,AAHA,KAAK,WAAW,EAAK,SACrB,KAAK,eAAe,EAAK,aAEzB,KAAK,cAAc,gBAAgB,KAAK,QAAQ;CAClD;CAqCA,QAAgB,GAA8B;EAC5C,IAAM,IAAQ,KAAK,SAAS,KAAK,OAAO,SAAS,IAAI;EACrD,OAAO,EAAO,gBAAgB,KAAK,SAAS,CAAM,KAAM,CAAC,CAAC,KAAS,EAAM,SAAS,CAAM;CAC1F;CAwCA,gBAAwB,GAAe;EACrC,IAAM,IAAU,KAAK,SAAS,QAAO,MAAK,CAAC,EAAE,YAAY,KAAK,QAAQ,CAAC,CAAC;EACxE,IAAI,CAAC,EAAQ,QAAQ;EAErB,IAAM,IAAiB,KAAK,SAAS,MACnC,MAAU,EAAO,UAAU,KAAK,SAAS,CAAC,EAAO,YAAY,KAAK,QAAQ,CAAM,CAClF,GACM,IACJ,KAAK,gBAAgB,KAAK,KAAK,QAAQ,KAAK,SAAS,KAAK,aAAa,IACnE,EAAQ,QAAQ,KAAK,SAAS,KAAK,aAAa,IAChD,IACE,EAAQ,QAAQ,CAAc,IAC9B,IAAQ,IACN,KACA,GACJ,IAAa,EAAQ,EAAkB,EAAQ,QAAQ,GAAY,CAAK;EAG9E,AAFA,KAAK,eAAe,KAAK,SAAS,QAAQ,CAAU,GAEpD,KAAK,kBAAkB;CACzB;CA0BA,MAAc,IAAuB,IAAO;EAC1C,KAAK,gBAAgB,KAAK,CAAoB;CAChD;CAEA,SAAiB;EACf,KAAK,gBAAgB,MAAM;CAC7B;CAEA,sBAA8B;EAC5B,EAAwB,MAAM,KAAK,OAAO;CAC5C;CAEA,0BAAkC;EAChC,IAAM,IAAgB,KAAK,SAAS,WAClC,MAAU,EAAO,UAAU,KAAK,SAAS,CAAC,EAAO,YAAY,KAAK,QAAQ,CAAM,CAClF,GACM,IAAoB,KAAK,SAAS,WAAU,MAAU,CAAC,EAAO,YAAY,KAAK,QAAQ,CAAM,CAAC;EAEpG,AADA,KAAK,eAAe,KAAiB,IAAI,IAAgB,GACzD,KAAK,kBAAkB;CACzB;CAEA,oBAA4B;EAC1B,KAAK,SAAS,SAAS,GAAQ,MAC7B,EAAO,gBAAgB,UAAU,MAAU,KAAK,gBAAgB,KAAK,QAAQ,CAAM,CAAC,CACtF;CACF;CAEA,qBAA6B;EAE3B,AADA,KAAK,cAAc,IAAI,MAAM,SAAS;GAAE,SAAS;GAAM,UAAU;EAAK,CAAC,CAAC,GACxE,KAAK,cAAc,IAAI,MAAM,UAAU;GAAE,SAAS;GAAM,UAAU;EAAK,CAAC,CAAC;CAC3E;CAEA,gBAAwB,IAAS,KAAK,SAAS;EAC7C,KAAK,YAAY,KAAK,KAAU,CAAC,KAAK,YAAY;CACpD;CAEA,eAAuB;EACjB,KAAK,gBACL,KAAK,UAAS,KAAK,OAAO,IACzB,KAAK,MAAM;CAClB;CAEA,aAAqB,IAAuB,IAAO;EACjD,KAAK,OAAO,KAAK,CAAoB;CACvC;CAEA,gBAAuC;EACrC,IAAM,IAAS,EAAoB,CAAC,CAAC,KAAK;GACxC,WAAW,KAAK;GAChB,QAAQ;GACR,OAAO,GAAG,EAAM,IAAI,EAAc,IAAI;GACtC,WAAW;GACX,uBAAuB,KAAK,cAAc,gBAAgB;EAC5D,CAAC;EAOD,AANA,KAAK,UAAU,GACf,EAAsB,EAAO,OAAO,MAAM;GACxC;GACA;GACA;EACF,CAAC,GACD,EAAO,MAAM,aAAa,QAAQ,SAAS;EAC3C,IAAM,IAAS,SAAS,cAAc,KAAK;EAC3C,EAAO,YAAY;EACnB,IAAM,IAAU,SAAS,cAAc,KAAK;EAU5C,OATA,EAAQ,YAAY,kBACpB,KAAK,iBAAiB,GACtB,EAAO,OAAO,CAAO,GACrB,EAAO,MAAM,OAAO,CAAM,GAE1B,EAAO,YACL,MAAM,KAAK,KAAK,QAAQ,CAAC,CAAC,QAAO,MAAS,EAAM,SAAS,SAAS,GAClE,CACF,GACO;CACT;CAEA,sBAA8B;EAI5B,AAFA,KAAK,UAAU,KAAA,GACf,KAAK,iBAAiB,KAAA,GACtB,KAAK,OAAO,YAAY,KAAK,OAAO;CACtC;CAEA,MAAc,gBAAgB;EAG5B,AAAI,MAFiB,KAAK,OAAO,YAAY,KAAK,OAAO,MAGvD,KAAK,UAAU,KAAA,GACf,KAAK,iBAAiB,KAAA;CAE1B;CAEA,SAAkB;EAGhB,IAAM,IAAY,GAAG,KAAK,UAAU,WAC9B,IACJ,CAAC,KAAK,UAAU,KAAK,WAAW,KAAK,gBAAgB,IAChD,KAAK,SAAS,KAAK,aAAa,EAAE,MAAM,IACzC;EAEN,OAAO,CAAI;;;;iCAIkB,KAAK,gBAAgB;mBACnC,KAAK,aAAa;qBAChB,KAAK,cAAc,OAAO,IAAI;;0BAEzB,KAAK,QAAQ;;0BAEb,KAAK,SAAS,IAAU,EAAU;0BAClC,OAAO,KAAK,WAAW,EAAE;kCACjB,EAAiB;;6CAEN,KAAK,qBAAqB;YAC1D,KAAK,kBAA4E,IAA1D,CAAI,uBAAuB,KAAK,eAAe,SAAmB;6CACzD,EAAkB;;4FAE6B,EAAU;;;kCAGpE,KAAK,cAAc;;;;;;CAMnD;AAOF;AAzdG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,eAAA,KAAA,CAAA,GACxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;AAAiB,CAAC,CAAA,GAAA,EAAA,WAAA,gBAAA,KAAA,CAAA,GACtE,EAAA,CAAA,EAAS,EAAE,WAAW,GAAM,CAAC,CAAA,GAAA,EAAA,WAAA,oBAAA,KAAA,CAAA,GAC7B,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAIxC,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GACN,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,IAAA,GAwCxC,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,GACN,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,gBAAA,KAAA,CAAA,GACN,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,kBAAA,KAAA,CAAA,GACN,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,mBAAA,KAAA,CAAA,GA1DR,IAAA,IAAA,EAAA,CAAA,EAAc,eAAe,CAAA,GAAA,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/select/index.ts"],"sourcesContent":["import { html, LitElement, nothing, type PropertyValues, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport '@/components/icon'\nimport '@/components/option'\nimport glass from '@/assets/glass.css?inline'\nimport overlayMotion from '@/assets/overlay-motion.css?inline'\nimport type { WebUiOption } from '@/components/option'\nimport { lucideChevronDown } from '@/icons'\nimport { installPointerFocusSuppression } from '@/shared/focus/pointer-focus'\nimport { FormAssociated, defineFormAssociation, FormAssociationController } from '@/shared/form-association'\nimport { dispatchOpenChangeEvent } from '@/shared/open-state'\nimport {\n createComboboxOpenController,\n createOptionListenerBinding,\n handleComboboxFocusOut,\n nextWrappingIndex\n} from '@/shared/option-portal'\nimport { defineOptionPortal } from '@/shared/option-portal'\nimport { defineAnchoredPanel } from '@/shared/overlay/anchored-panel'\nimport { defineOpenOverlay } from '@/shared/overlay/open-overlay'\nimport { applyOverlayVariables, defineOverlayPortal } from '@/shared/overlay/portal'\nimport type { OverlayContainer, OverlayPortal } from '@/shared/overlay/portal'\nimport { defineScrollLockLease } from '@/shared/scroll-lock/scroll-lock'\n\nimport style from './style.css?inline'\n\ninstallPointerFocusSuppression()\n\n@customElement('web-ui-select')\nexport class WebUiSelect extends FormAssociated(LitElement) {\n static override styles = [unsafeCSS(glass), unsafeCSS(overlayMotion), unsafeCSS(style)]\n\n @property({ type: String, reflect: true }) placeholder = ''\n @property({ type: Boolean, reflect: true }) disabled = false\n @property({ type: Boolean, reflect: true }) required = false\n @property({ type: Boolean, reflect: true }) portal = false\n @property({ type: Boolean, reflect: true, attribute: 'no-scroll-lock' }) noScrollLock = false\n @property({ attribute: false }) overlayContainer?: OverlayContainer\n @property({ type: String, reflect: true }) name = ''\n\n // value 使用内部状态 + 访问器模式,在变更时同步 ElementInternals;\n // @property + reflect 让它与 input/textarea/slider/input-number 的 value 反射语义保持一致。\n @state() private _value = ''\n @property({ type: String, reflect: true })\n get value(): string {\n return this._value\n }\n set value(v: string) {\n const old = this._value\n this._value = v\n this._formAssociation.sync()\n this.toggleAttribute('data-has-value', !!v)\n this.requestUpdate('value', old)\n }\n\n private readonly _formAssociation = defineFormAssociation<string>({\n host: this,\n initialize: () => {\n // 同步 HTML 属性中预设的 value,补全访问器模式不处理 attribute 反射。\n const attrValue = this.getAttribute('value')\n if (attrValue !== null) {\n this._value = attrValue\n this.toggleAttribute('data-has-value', !!attrValue)\n }\n },\n getState: () => this._value,\n setState: value => {\n this.value = value\n },\n getFormValue: () => this._value,\n getFormState: () => this._value,\n restoreState: state => {\n if (typeof state === 'string') this.value = state\n },\n syncValidity: () => this._syncValidity()\n }).make()\n\n private readonly _formAssociationController = new FormAssociationController(this, this._formAssociation)\n\n private get _isDisabled(): boolean {\n return this.disabled || this._formAssociation.isFormDisabled()\n }\n\n @state() private _isOpen = false\n @state() private _activeIndex = -1\n @state() private _selectedLabel = ''\n @state() private _hasTriggerSlot = false\n\n private _options: WebUiOption[] = []\n private _portal?: OverlayPortal\n private _portalContent?: HTMLElement\n private readonly _scrollLock = defineScrollLockLease().make()\n\n private static _nextInstanceId = 0\n\n // option 注册表 / portal 同步 / 微任务调度收敛到 shared 模块(autocomplete 同款)\n private readonly _optionPortal = defineOptionPortal().make({\n element: this,\n // 实例级前缀保证多实例同时展开时 option id 不冲突(aria 引用按 id 定位)\n idPrefix: `web-ui-select-${++WebUiSelect._nextInstanceId}`,\n getPortal: () => this._portal,\n getPortalContent: () => this._portalContent,\n isOpen: () => this.portal && this._isOpen,\n getMigratableNodes: () => [...this.querySelectorAll<WebUiOption>('web-ui-option')],\n hasUpdated: () => this.hasUpdated,\n requestUpdate: () => this.requestUpdate(),\n bindOption: option => this._bindOption(option),\n unbindOption: option => this._unbindOption(option),\n onImmediateSync: () => {\n this._refreshOptions()\n this._syncSelected()\n this._syncActiveOption()\n }\n })\n /*\n * 开启态浮层承载「我开着吗」(issue #120 Block 1):本组件不再在 keydown 里自行关闭,\n * 只声明「我开着」。宿主级监听在 portal 模式下收不到面板内的 Escape,正是原实现的\n * 缺陷来源;改由唯一仲裁者在 document 捕获阶段判定最内层。\n *\n * 宿主接口只剩 requestClose:开启状态是声明而非询问,仲裁时不再回头问 isOpen()。\n */\n private readonly _overlay = defineOpenOverlay().make({\n requestClose: () => this._close()\n })\n private readonly _panel = defineAnchoredPanel().make({\n getAnchor: () => this.shadowRoot?.querySelector<HTMLElement>('.select-trigger') ?? null,\n getLocalPanel: () => this.shadowRoot?.querySelector<HTMLElement>('.select-overlay') ?? null,\n getPositioning: () => ({\n placement: 'bottom-start',\n offset: 4,\n // 面板宽度统一为 max(内容, trigger, --wui-overlay-min-width),内容自适应展开\n minAnchorWidth: true,\n strategy: this.portal ? 'fixed' : 'absolute'\n }),\n isPortal: () => this.portal,\n createPortal: () => this._createPortal(),\n openOverlay: this._overlay\n })\n\n get isOpen(): boolean {\n return this._isOpen\n }\n\n get open(): boolean {\n return this._isOpen\n }\n\n private _onClickOutside = (e: MouseEvent) => {\n // 在监听器内部判定:composedPath() 在派发结束后会被清空。\n const isInside = e.composedPath().includes(this) || !!this._panel.getHandle()?.containsEvent(e)\n if (this._isOpen && !isInside) {\n this._close()\n }\n }\n\n private _onFocusOut = () => {\n handleComboboxFocusOut(\n this,\n () => this._panel.getHandle(),\n () => this._isOpen,\n () => this._close()\n )\n }\n\n override connectedCallback() {\n super.connectedCallback()\n this._optionPortal.bindHost()\n this.addEventListener('keydown', this._onKeydown)\n this.addEventListener('focusout', this._onFocusOut)\n document.addEventListener('click', this._onClickOutside)\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback()\n this._optionPortal.dispose()\n this.removeEventListener('keydown', this._onKeydown)\n this.removeEventListener('focusout', this._onFocusOut)\n document.removeEventListener('click', this._onClickOutside)\n this._options.forEach(this._unbindOption)\n this._options = []\n this._portal = undefined\n this._portalContent = undefined\n this._close()\n // 撤销登记由 _panel.dispose() 完成(句柄归它持有),不再需要单独 dispose 仲裁者。\n this._panel.dispose()\n this._scrollLock.release()\n }\n\n override firstUpdated() {\n requestAnimationFrame(() => {\n if (this.isConnected) this._optionPortal.scheduleRefresh()\n })\n }\n\n override willUpdate() {\n this._refreshOptions()\n this._syncSelected()\n }\n\n override updated(changed: PropertyValues) {\n if (changed.has('portal') || changed.has('overlayContainer'))\n requestAnimationFrame(() => this._reconfigureOverlay())\n if (changed.has('noScrollLock')) this._syncScrollLock()\n this._syncOpenAttribute()\n this._syncOverlayInert()\n this._syncValidity()\n }\n\n private _syncValidity() {\n const internals = this._formAssociation.getInternals()\n if (!internals || typeof internals.setValidity !== 'function') return\n if (this._isDisabled || !this.required || this.value) internals.setValidity({})\n else internals.setValidity({ valueMissing: true }, '请选择一项')\n }\n\n private _syncOpenAttribute() {\n this.toggleAttribute('open', this._isOpen)\n }\n\n /*\n * 禁用态不响应 Escape。仲裁者仍在(吞掉按键并压掉原生 cancel),只是不走关闭入口\n * —— 与旧的「跳过候选」语义不同:旧语义放任事件落到下层浮层,把外层一起关掉。\n * 每次渲染后同步即可覆盖 disabled 属性与表单禁用两条来源。\n */\n private _syncOverlayInert() {\n this._panel.getHandle()?.setInert(this._isDisabled)\n }\n\n private _onTriggerSlotChange = (e: Event) => {\n const slot = e.target as HTMLSlotElement\n const hasContent = slot.assignedElements().length > 0\n if (this._hasTriggerSlot === hasContent) return\n this._hasTriggerSlot = hasContent\n this._reconfigureOverlay()\n }\n\n private _syncSelected() {\n this._options.forEach(o => {\n o.selected = o.value === this.value\n })\n if (!this.value) {\n this._selectedLabel = this.placeholder\n return\n }\n const option = this._options.find(o => o.value === this.value)\n this._selectedLabel = option?.label || this.placeholder\n }\n\n private readonly _optionListeners = createOptionListenerBinding({\n // 惰性解引用:handler 字段声明在后者仍可在调用期取到\n onClick: event => this._handleOptionClick(event),\n onPointerOver: event => this._handleOptionPointerOver(event),\n onPointerDown: event => this._handleOptionPointerDown(event),\n onUpdate: () => this._onOptionUpdate()\n })\n private _bindOption = (option: WebUiOption) => this._optionListeners.bind(option)\n private _unbindOption = (option: WebUiOption) => this._optionListeners.unbind(option)\n\n private _refreshOptions() {\n const activeOption = this._options[this._activeIndex]\n // diff 绑定/解绑与激活索引按 option 身份保持在 shared 内完成,\n // 避免移除中间项后激活静默偏移到相邻项\n const next = this._optionPortal.refresh(this._options, activeOption)\n this._options = next.options\n this._activeIndex = next.activeIndex\n // 非 portal 模式 aria-activedescendant 引用真实 option id,需保证已分配\n this._optionPortal.ensureOptionIds(this._options)\n }\n\n private _handleOptionClick = (e: Event) => {\n if (!(e.currentTarget instanceof HTMLElement)) return\n const option = e.currentTarget as WebUiOption\n if (option.disabled || !this._isLive(option)) return\n this.value = option.value\n this._close()\n this._notifyValueChange()\n }\n\n private _onOptionUpdate = () => {\n this._syncSelected()\n this._syncActiveOption()\n }\n\n private _handleOptionPointerOver = (e: PointerEvent) => {\n if (e.pointerType === 'touch') return\n if (!this._isOpen || this._activeIndex < 0 || !(e.currentTarget instanceof HTMLElement)) return\n\n // 指针接管后只保留 :hover,避免键盘激活项与悬停项同时高亮。\n this._activeIndex = -1\n this._syncActiveOption()\n }\n\n private _handleOptionPointerDown = (e: PointerEvent) => {\n // 保持 trigger 焦点,避免 focusout 在 click 前关闭浮层。\n e.preventDefault()\n }\n\n // slotchange 不冒泡,只能由模板内 slot 自行监听;稳定引用避免 Lit 重挂载\n private _onSlotChange = () => {\n this._optionPortal.scheduleRefresh()\n }\n\n // slotchange/unregister 的刷新依赖 Lit 渲染调度;键盘或 click 事件可能先于其触发,\n // 已从 DOM 移除或被移出 Select/portal 面板的选项不得再被激活或选中。\n private _isLive(option: WebUiOption): boolean {\n const panel = this.portal ? this._panel.getPanel() : null\n return option.isConnected && (this.contains(option) || (!!panel && panel.contains(option)))\n }\n\n private _onKeydown = (e: KeyboardEvent) => {\n if (this._isDisabled) return\n\n // Escape 不在本组件处理:由共享仲裁者在 document 捕获阶段归属(issue #120 Block 1)。\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault()\n if (!this._isOpen) {\n this._open(true)\n } else {\n this._navigateActive(1)\n }\n break\n case 'ArrowUp':\n e.preventDefault()\n if (!this._isOpen) this._open(true)\n else this._navigateActive(-1)\n break\n case 'Enter': {\n if (this._isOpen && this._activeIndex >= 0) {\n const option = this._options[this._activeIndex]\n if (option && this._isLive(option) && !option.disabled) {\n this.value = option.value\n this._notifyValueChange()\n }\n this._close()\n e.preventDefault()\n }\n break\n }\n }\n }\n\n private _navigateActive(delta: number) {\n const enabled = this._options.filter(o => !o.disabled && this._isLive(o))\n if (!enabled.length) return\n\n const selectedOption = this._options.find(\n option => option.value === this.value && !option.disabled && this._isLive(option)\n )\n const currentIdx =\n this._activeIndex >= 0 && this._isLive(this._options[this._activeIndex])\n ? enabled.indexOf(this._options[this._activeIndex])\n : selectedOption\n ? enabled.indexOf(selectedOption)\n : delta > 0\n ? -1\n : 0\n const nextOption = enabled[nextWrappingIndex(enabled.length, currentIdx, delta)]\n this._activeIndex = this._options.indexOf(nextOption)\n\n this._syncActiveOption()\n }\n\n // 开合生命周期不变量(guard / 派发顺序 / scroll-lock 配对 / portal rAF dance)\n // 收敛在 shared combobox-shell;select 只注入差异点\n private readonly _openController = createComboboxOpenController({\n canOpen: () => !this._isDisabled,\n getIsOpen: () => this._isOpen,\n setIsOpen: open => {\n this._isOpen = open\n },\n dispatchOpenChange: () => this._dispatchOpenChange(),\n syncScrollLock: open => this._syncScrollLock(open),\n isPortal: () => this.portal,\n openOverlay: isKeyboardNavigation => this._openOverlay(isKeyboardNavigation),\n closeOverlay: () => void this._closeOverlay(),\n onOpen: isKeyboardNavigation => {\n this._syncSelected()\n if (isKeyboardNavigation) this._setInitialActiveOption()\n else this._syncActiveOption()\n },\n onAfterClose: () => {\n this._activeIndex = -1\n this._options.forEach(o => o.removeAttribute('active'))\n }\n })\n\n private _open(isKeyboardNavigation = false) {\n this._openController.open(isKeyboardNavigation)\n }\n\n private _close() {\n this._openController.close()\n }\n\n private _dispatchOpenChange() {\n dispatchOpenChangeEvent(this, this._isOpen)\n }\n\n private _setInitialActiveOption() {\n const selectedIndex = this._options.findIndex(\n option => option.value === this.value && !option.disabled && this._isLive(option)\n )\n const firstEnabledIndex = this._options.findIndex(option => !option.disabled && this._isLive(option))\n this._activeIndex = selectedIndex >= 0 ? selectedIndex : firstEnabledIndex\n this._syncActiveOption()\n }\n\n private _syncActiveOption() {\n this._options.forEach((option, index) =>\n option.toggleAttribute('active', index === this._activeIndex && this._isLive(option))\n )\n }\n\n private _notifyValueChange() {\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }))\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n }\n\n private _syncScrollLock(isOpen = this._isOpen) {\n this._scrollLock.sync(isOpen && !this.noScrollLock)\n }\n\n private _togglePopup() {\n if (this._isDisabled) return\n if (this._isOpen) this._close()\n else this._open()\n }\n\n private _openOverlay(isKeyboardNavigation = false) {\n this._panel.open(isKeyboardNavigation)\n // 新会话的句柄刚建立,惰性状态需按当前 disabled 重新同步。\n this._syncOverlayInert()\n }\n\n private _createPortal(): OverlayPortal {\n const portal = defineOverlayPortal().make({\n container: this.overlayContainer,\n target: this,\n style: `${glass}\\n${overlayMotion}\\n${style}`,\n className: 'wui-glass select-overlay portal wui-floating-panel',\n onContentChange: () => this._optionPortal.scheduleRefresh()\n })\n this._portal = portal\n applyOverlayVariables(portal.panel, this, [\n '--wui-overlay-min-width',\n '--wui-select-max-width',\n '--wui-select-max-height'\n ])\n portal.panel.setAttribute('role', 'listbox')\n const scroll = document.createElement('div')\n scroll.className = 'select-scroll'\n const content = document.createElement('div')\n content.className = 'select-content'\n this._portalContent = content\n scroll.append(content)\n portal.panel.append(scroll)\n // 自定义 trigger 必须留在宿主内,不能随 options 迁入 portal 面板\n portal.moveContent(\n Array.from(this.children).filter(child => child.slot !== 'trigger'),\n content\n )\n return portal\n }\n\n private _reconfigureOverlay() {\n // reconfigure 会 dispose 并按需重建 portal,旧引用必须同步失效\n this._portal = undefined\n this._portalContent = undefined\n this._panel.reconfigure(this._isOpen)\n /*\n * reconfigure 重新 claim = 新会话,inert 回到 false。实测这条重推是**冗余**的(摘掉本行\n * 全部用例仍绿):这条路径后面跟着一轮渲染,而 `updated()` 每次渲染都会调\n * `_syncOverlayInert()`。留在这里是不想依赖「这条路径必然跟着一次渲染」这个隐含前提。\n */\n this._syncOverlayInert()\n }\n\n private async _closeOverlay() {\n const closed = await this._panel.close(() => this._isOpen)\n // portal 已随关闭 dispose,与 autocomplete 对齐同步失效引用\n if (closed) {\n this._portal = undefined\n this._portalContent = undefined\n }\n }\n\n override render() {\n // portal 模式下 options 被 moveContent 移入浮层 shadow root,id 引用无法跨树作用域\n // 解析,因此 activedescendant 仅在非 portal 模式输出;aria-controls 同理指向同根内 listbox\n const listboxId = `${this.localName}-listbox`\n const activeDescendant =\n !this.portal && this._isOpen && this._activeIndex >= 0\n ? (this._options[this._activeIndex]?.id ?? nothing)\n : nothing\n\n return html`\n <div class=\"wui-select-inner\">\n <div\n class=\"wui-glass select-trigger\"\n ?data-custom-trigger=${this._hasTriggerSlot}\n @click=${this._togglePopup}\n tabindex=${this._isDisabled ? '-1' : '0'}\n role=\"combobox\"\n aria-expanded=${this._isOpen}\n aria-haspopup=\"listbox\"\n aria-controls=${this.portal ? nothing : listboxId}\n aria-disabled=${String(this._isDisabled)}\n aria-activedescendant=${activeDescendant}\n >\n <slot name=\"trigger\" @slotchange=${this._onTriggerSlotChange}></slot>\n ${!this._hasTriggerSlot ? html`<span class=\"label\">${this._selectedLabel}</span>` : nothing}\n <web-ui-icon class=\"arrow\" .icon=${lucideChevronDown}></web-ui-icon>\n </div>\n <div class=\"select-overlay wui-floating-panel wui-glass\" hidden role=\"listbox\" id=${listboxId}>\n <div class=\"select-scroll\">\n <div class=\"select-content\">\n <slot @slotchange=${this._onSlotChange}></slot>\n </div>\n </div>\n </div>\n </div>\n `\n }\n\n declare readonly $events: {\n input: Event\n change: Event\n 'open-change': CustomEvent<{ open: boolean }>\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'web-ui-select': WebUiSelect\n }\n}\n"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
//#region src/components/select/style.css?inline
|
|
2
|
-
var e = "*,:before,:after{box-sizing:border-box}:host{--wui-select-bg-hover:var(--wui-color-surface-glass-hover,color-mix(in srgb, var(--wui-color-text,#1b1b1b) 6%, var(--wui-color-surface-glass,#fafafa57)));--wui-select-bg-active:var(--wui-color-surface-glass-active,color-mix(in srgb, var(--wui-color-text,#1b1b1b) 15%, var(--wui-color-surface-glass,#fafafa57)));-webkit-user-select:none;user-select:none;display:inline-block}:host([disabled]){cursor:not-allowed;opacity:.4}.wui-select-inner{flex-direction:column;display:flex;position:relative}.select-trigger{--wui-glass-corner-radius:calc(var(--wui-control-size,36px) / 2);cursor:default;box-sizing:border-box;width:var(--wui-input-width,200px);min-width:var(--wui-control-size,36px);height:var(--wui-control-size,36px);border-radius:var(--wui-radius-control,calc(infinity * 1px));border:none;align-items:center;gap:8px;padding:0 12px;display:flex;overflow:clip}.select-trigger:focus-visible{outline:var(--wui-focus-ring-width,3px) solid var(--wui-color-focus-ring,#08f6);outline-offset:2px}:host([disabled]) .select-trigger{cursor:not-allowed}@media (hover:hover) and (pointer:fine){:host(:not([disabled])) .select-trigger:hover{background-color:var(--wui-select-bg-hover)}}:host(:not([disabled])) .select-trigger:active,:host([open]:not([disabled])) .select-trigger{background-color:var(--wui-select-bg-active)}.select-trigger[data-custom-trigger]{width:auto}.label{font-size:var(--wui-font-size,14px);color:var(--wui-color-text,#1b1b1b);text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}:host(:not([data-has-value])) .label{color:var(--wui-color-text-secondary,#6a6a6a)}::slotted([slot=trigger]){font-size:var(--wui-font-size,14px);color:var(--wui-color-text,#1b1b1b);text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.arrow{color:var(--wui-color-text-secondary,#6a6a6a);flex-shrink:0}:host([open]) .arrow{transform:rotate(180deg)}.select-overlay{--wui-internal-glass-shadow:var(--wui-shadow-panel,0 3px 9px #00000045);--wui-internal-duration-float-enter:var(--wui-duration-float-enter,.
|
|
2
|
+
var e = "*,:before,:after{box-sizing:border-box}:host{--wui-select-bg-hover:var(--wui-color-surface-glass-hover,color-mix(in srgb, var(--wui-color-text,#1b1b1b) 6%, var(--wui-color-surface-glass,#fafafa57)));--wui-select-bg-active:var(--wui-color-surface-glass-active,color-mix(in srgb, var(--wui-color-text,#1b1b1b) 15%, var(--wui-color-surface-glass,#fafafa57)));-webkit-user-select:none;user-select:none;display:inline-block}:host([disabled]){cursor:not-allowed;opacity:.4}.wui-select-inner{flex-direction:column;display:flex;position:relative}.select-trigger{--wui-glass-corner-radius:calc(var(--wui-control-size,36px) / 2);cursor:default;box-sizing:border-box;width:var(--wui-input-width,200px);min-width:var(--wui-control-size,36px);height:var(--wui-control-size,36px);border-radius:var(--wui-radius-control,calc(infinity * 1px));border:none;align-items:center;gap:8px;padding:0 12px;display:flex;overflow:clip}.select-trigger:focus-visible{outline:var(--wui-focus-ring-width,3px) solid var(--wui-color-focus-ring,#08f6);outline-offset:2px}:host([disabled]) .select-trigger{cursor:not-allowed}@media (hover:hover) and (pointer:fine){:host(:not([disabled])) .select-trigger:hover{background-color:var(--wui-select-bg-hover)}}:host(:not([disabled])) .select-trigger:active,:host([open]:not([disabled])) .select-trigger{background-color:var(--wui-select-bg-active)}.select-trigger[data-custom-trigger]{width:auto}.label{font-size:var(--wui-font-size,14px);color:var(--wui-color-text,#1b1b1b);text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}:host(:not([data-has-value])) .label{color:var(--wui-color-text-secondary,#6a6a6a)}::slotted([slot=trigger]){font-size:var(--wui-font-size,14px);color:var(--wui-color-text,#1b1b1b);text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.arrow{color:var(--wui-color-text-secondary,#6a6a6a);flex-shrink:0}:host([open]) .arrow{transform:rotate(180deg)}.select-overlay{--wui-internal-glass-shadow:var(--wui-shadow-panel,0 3px 9px #00000045);--wui-internal-duration-float-enter:var(--wui-duration-float-enter,.24s);--wui-internal-duration-float-exit:var(--wui-duration-float-exit,.16s);--wui-glass-corner-radius:var(--wui-radius-menu,18px);z-index:var(--wui-layer-inline-overlay,1);box-sizing:border-box;min-width:var(--wui-overlay-min-width,200px);max-width:var(--wui-select-max-width,500px);border-radius:var(--wui-radius-menu,18px);background-color:var(--wui-color-surface-menu,#f6f6f6d1);position:absolute;overflow:hidden}.select-overlay.portal{z-index:var(--wui-layer-menu,100);position:fixed}.select-overlay.hidden{display:none}.select-scroll{max-height:var(--wui-select-max-height,200px);overflow-y:auto}.select-content{padding:4px}:host([portal]) .select-overlay{display:none}:host([data-wui-pointer-focus]) .select-trigger:focus-visible{outline-color:#0000}";
|
|
3
3
|
//#endregion
|
|
4
4
|
export { e as default };
|
|
5
5
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/select/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n --wui-select-bg-hover: var(\n --wui-color-surface-glass-hover,\n color-mix(in srgb, var(--wui-color-text, #1b1b1b) 6%, var(--wui-color-surface-glass, rgb(250 250 250 / 0.34)))\n );\n --wui-select-bg-active: var(\n --wui-color-surface-glass-active,\n color-mix(in srgb, var(--wui-color-text, #1b1b1b) 15%, var(--wui-color-surface-glass, rgb(250 250 250 / 0.34)))\n );\n user-select: none;\n display: inline-block;\n}\n\n:host([disabled]) {\n cursor: not-allowed;\n opacity: 0.4;\n}\n\n.wui-select-inner {\n position: relative;\n display: flex;\n flex-direction: column;\n}\n\n.select-trigger {\n --wui-glass-corner-radius: calc(var(--wui-control-size, 36px) / 2);\n\n cursor: default;\n\n overflow: clip;\n display: flex;\n gap: 8px;\n align-items: center;\n\n box-sizing: border-box;\n width: var(--wui-input-width, 200px);\n min-width: var(--wui-control-size, 36px);\n height: var(--wui-control-size, 36px);\n padding: 0 12px;\n border: none;\n border-radius: var(--wui-radius-control, calc(infinity * 1px));\n\n &:focus-visible {\n outline: var(--wui-focus-ring-width, 3px) solid var(--wui-color-focus-ring, rgb(0 136 255 / 0.4));\n outline-offset: 2px;\n }\n}\n\n:host([disabled]) .select-trigger {\n cursor: not-allowed;\n}\n\n@media (hover: hover) and (pointer: fine) {\n :host(:not([disabled])) .select-trigger:hover {\n background-color: var(--wui-select-bg-hover);\n }\n}\n\n:host(:not([disabled])) .select-trigger:active,\n:host([open]:not([disabled])) .select-trigger {\n background-color: var(--wui-select-bg-active);\n}\n\n.select-trigger[data-custom-trigger] {\n width: auto;\n}\n\n.label {\n overflow: hidden;\n flex: 1;\n\n font-size: var(--wui-font-size, 14px);\n color: var(--wui-color-text, #1b1b1b);\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n:host(:not([data-has-value])) .label {\n color: var(--wui-color-text-secondary, #6a6a6a);\n}\n\n::slotted([slot='trigger']) {\n overflow: hidden;\n flex: 1;\n\n font-size: var(--wui-font-size, 14px);\n color: var(--wui-color-text, #1b1b1b);\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.arrow {\n flex-shrink: 0;\n color: var(--wui-color-text-secondary, #6a6a6a);\n}\n\n:host([open]) .arrow {\n transform: rotate(180deg);\n}\n\n/* ===== 浮层(glass 样式参考 dialog) ===== */\n\n.select-overlay {\n --wui-internal-glass-shadow: var(--wui-shadow-panel, 0 3px 9px rgb(0 0 0 / 0.27));\n --wui-internal-duration-float-enter: var(--wui-duration-float-enter,
|
|
1
|
+
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/select/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n --wui-select-bg-hover: var(\n --wui-color-surface-glass-hover,\n color-mix(in srgb, var(--wui-color-text, #1b1b1b) 6%, var(--wui-color-surface-glass, rgb(250 250 250 / 0.34)))\n );\n --wui-select-bg-active: var(\n --wui-color-surface-glass-active,\n color-mix(in srgb, var(--wui-color-text, #1b1b1b) 15%, var(--wui-color-surface-glass, rgb(250 250 250 / 0.34)))\n );\n user-select: none;\n display: inline-block;\n}\n\n:host([disabled]) {\n cursor: not-allowed;\n opacity: 0.4;\n}\n\n.wui-select-inner {\n position: relative;\n display: flex;\n flex-direction: column;\n}\n\n.select-trigger {\n --wui-glass-corner-radius: calc(var(--wui-control-size, 36px) / 2);\n\n cursor: default;\n\n overflow: clip;\n display: flex;\n gap: 8px;\n align-items: center;\n\n box-sizing: border-box;\n width: var(--wui-input-width, 200px);\n min-width: var(--wui-control-size, 36px);\n height: var(--wui-control-size, 36px);\n padding: 0 12px;\n border: none;\n border-radius: var(--wui-radius-control, calc(infinity * 1px));\n\n &:focus-visible {\n outline: var(--wui-focus-ring-width, 3px) solid var(--wui-color-focus-ring, rgb(0 136 255 / 0.4));\n outline-offset: 2px;\n }\n}\n\n:host([disabled]) .select-trigger {\n cursor: not-allowed;\n}\n\n@media (hover: hover) and (pointer: fine) {\n :host(:not([disabled])) .select-trigger:hover {\n background-color: var(--wui-select-bg-hover);\n }\n}\n\n:host(:not([disabled])) .select-trigger:active,\n:host([open]:not([disabled])) .select-trigger {\n background-color: var(--wui-select-bg-active);\n}\n\n.select-trigger[data-custom-trigger] {\n width: auto;\n}\n\n.label {\n overflow: hidden;\n flex: 1;\n\n font-size: var(--wui-font-size, 14px);\n color: var(--wui-color-text, #1b1b1b);\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n:host(:not([data-has-value])) .label {\n color: var(--wui-color-text-secondary, #6a6a6a);\n}\n\n::slotted([slot='trigger']) {\n overflow: hidden;\n flex: 1;\n\n font-size: var(--wui-font-size, 14px);\n color: var(--wui-color-text, #1b1b1b);\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.arrow {\n flex-shrink: 0;\n color: var(--wui-color-text-secondary, #6a6a6a);\n}\n\n:host([open]) .arrow {\n transform: rotate(180deg);\n}\n\n/* ===== 浮层(glass 样式参考 dialog) ===== */\n\n.select-overlay {\n --wui-internal-glass-shadow: var(--wui-shadow-panel, 0 3px 9px rgb(0 0 0 / 0.27));\n --wui-internal-duration-float-enter: var(--wui-duration-float-enter, 240ms);\n --wui-internal-duration-float-exit: var(--wui-duration-float-exit, 160ms);\n --wui-glass-corner-radius: var(--wui-radius-menu, 18px);\n position: absolute;\n z-index: var(--wui-layer-inline-overlay, 1);\n\n overflow: hidden;\n\n box-sizing: border-box;\n min-width: var(--wui-overlay-min-width, 200px);\n max-width: var(--wui-select-max-width, 500px);\n border-radius: var(--wui-radius-menu, 18px);\n\n /* 玻璃背景:wui-glass 在面板自身,这里覆盖其默认玻璃底为菜单表面色 */\n background-color: var(--wui-color-surface-menu, rgb(246 246 246 / 0.82));\n\n &.portal {\n position: fixed;\n z-index: var(--wui-layer-menu, 100);\n }\n\n &.hidden {\n display: none;\n }\n}\n\n.select-scroll {\n overflow-y: auto;\n max-height: var(--wui-select-max-height, 200px);\n}\n\n.select-content {\n padding: 4px;\n}\n\n:host([portal]) .select-overlay {\n display: none;\n}\n\n:host([data-wui-pointer-focus]) .select-trigger:focus-visible {\n outline-color: transparent;\n}\n"],"mappings":""}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import e from "../../_virtual/_@oxc-project_runtime@0.
|
|
1
|
+
import e from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
|
|
2
2
|
import t from "../../assets/glass.js";
|
|
3
3
|
import { FormAssociated as n, FormAssociationController as r, defineFormAssociation as i } from "../../shared/form-association/index.js";
|
|
4
4
|
import { normalizeNumber as a } from "../../shared/normalize/index.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/slider/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { styleMap } from 'lit/directives/style-map.js'\n\nimport glass from '@/assets/glass.css?inline'\nimport { installPointerFocusSuppression } from '@/shared/focus/pointer-focus'\nimport { FormAssociated, defineFormAssociation, FormAssociationController } from '@/shared/form-association'\nimport { attachDragGesture, type DragGestureHandle } from '@/shared/gesture/drag-gesture'\nimport { clamp } from '@/shared/gesture/physics'\nimport { normalizeNumber } from '@/shared/normalize'\n\nimport style from './style.css?inline'\n\ninstallPointerFocusSuppression()\n\n@customElement('web-ui-slider')\nexport class WebUiSlider extends FormAssociated(LitElement) {\n static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n\n @property({ type: Boolean, reflect: true }) disabled = false\n @property({ type: Boolean, reflect: true }) marks = false\n @property({ type: Boolean, reflect: true }) vertical = false\n @property({ type: String, reflect: true }) name = ''\n @property({ type: Boolean, reflect: true }) required = false\n\n // value 使用访问器模式同步表单关联状态。\n private _value = 0\n @property({ type: Number, reflect: true })\n get value(): number {\n return this._value\n }\n set value(v: number) {\n const normalized = normalizeNumber(v, -Infinity, Infinity, 0)\n const old = this._value\n this._value = normalized\n this._formAssociation.sync()\n this.requestUpdate('value', old)\n }\n\n private _min = 0\n @property({ type: Number, reflect: true })\n get min(): number {\n return this._min\n }\n set min(v: number) {\n this._min = normalizeNumber(v, -Infinity, Infinity, 0)\n }\n\n private _max = 100\n @property({ type: Number, reflect: true })\n get max(): number {\n return this._max\n }\n set max(v: number) {\n this._max = normalizeNumber(v, -Infinity, Infinity, 100)\n }\n\n private _step = 1\n @property({ type: Number, reflect: true })\n get step(): number {\n return this._step\n }\n set step(v: number) {\n this._step = normalizeNumber(v, -Infinity, Infinity, 1)\n }\n\n @state() private _dragging = false\n @state() private _pressed = false\n // 避免未改变数值的点击被误认为一次表单提交\n private _interactionStartValue: number | undefined\n private _dragGestureHandle: DragGestureHandle | null = null\n\n override disconnectedCallback() {\n super.disconnectedCallback()\n this._dragGestureHandle?.destroy()\n this._dragGestureHandle = null\n }\n\n private readonly _formAssociation = defineFormAssociation<number>({\n host: this,\n initialize: () => {\n this._value = this._normalizeValue(this._value)\n },\n getState: () => this._value,\n setState: value => {\n this.value = value\n },\n getFormValue: () => String(this._value),\n getFormState: () => String(this._value),\n restoreState: state => {\n if (typeof state !== 'string') return\n const value = Number(state)\n if (Number.isFinite(value)) this.value = value\n },\n syncValidity: internals => {\n if (typeof internals.setValidity === 'function') internals.setValidity({})\n }\n }).make()\n\n private readonly _formAssociationController = new FormAssociationController(this, this._formAssociation)\n\n private get _isDisabled(): boolean {\n return this.disabled || this._formAssociation.isFormDisabled()\n }\n\n override willUpdate(changed: Map<string, unknown>) {\n if (changed.has('value') || changed.has('min') || changed.has('max') || changed.has('step')) {\n const normalizedValue = this._normalizeValue(this.value)\n if (normalizedValue !== this.value) this.value = normalizedValue\n }\n }\n\n // 将焦点移至滑块,供表单或外部控制使用\n override focus(options?: FocusOptions) {\n this._slider?.focus(options)\n }\n\n override blur() {\n this._slider?.blur()\n }\n\n private get _slider(): HTMLDivElement | null {\n return this.renderRoot.querySelector<HTMLDivElement>('[role=\"slider\"]')\n }\n\n private get _range(): number {\n return Math.max(0, this.max - this.min)\n }\n\n private get _percent(): number {\n return this._range === 0 ? 0 : ((this.value - this.min) / this._range) * 100\n }\n\n private get _markValues(): number[] {\n if (!this.marks || this._range === 0) return []\n const count = Math.min(100, Math.floor(this._range / this._safeStep))\n return Array.from({ length: count + 1 }, (_, index) => this.min + index * this._safeStep)\n }\n\n private get _safeStep(): number {\n return Number.isFinite(this.step) && this.step > 0 ? this.step : 1\n }\n\n private _normalizeValue(value: number): number {\n if (!Number.isFinite(value)) return this.min\n const lower = Math.min(this.min, this.max)\n const upper = Math.max(this.min, this.max)\n const clamped = clamp(value, lower, upper)\n const steps = Math.round((clamped - lower) / this._safeStep)\n return Number((lower + steps * this._safeStep).toFixed(this._precision))\n }\n\n private get _precision(): number {\n return Math.max(this._decimalPlaces(this.min), this._decimalPlaces(this.max), this._decimalPlaces(this._safeStep))\n }\n\n private _decimalPlaces(value: number): number {\n const [, decimal = ''] = String(value).split('.')\n return decimal.length\n }\n\n private _setValue(value: number): boolean {\n if (this._isDisabled) return false\n const nextValue = this._normalizeValue(value)\n if (nextValue === this.value) return false\n this.value = nextValue\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }))\n return true\n }\n\n private _setValueFromPointer(event: PointerEvent): boolean {\n const track = this._slider\n if (!track) return false\n const rect = track.getBoundingClientRect()\n if (this.vertical) {\n if (rect.height <= 0) return false\n // 视觉上的数值从下往上增长,与坐标系相反。\n const ratio = clamp(1 - (event.clientY - rect.top) / rect.height, 0, 1)\n return this._setValue(this.min + ratio * this._range)\n }\n if (rect.width <= 0) return false\n const ratio = clamp((event.clientX - rect.left) / rect.width, 0, 1)\n return this._setValue(this.min + ratio * this._range)\n }\n\n private _handlePointerDown(event: PointerEvent) {\n if (this._isDisabled) return\n this._pressed = true\n this._interactionStartValue = this.value\n this._setValueFromPointer(event)\n\n this._dragGestureHandle?.destroy()\n this._dragGestureHandle = attachDragGesture(event, {\n axis: this.vertical ? 'y' : 'x',\n threshold: 6,\n onMove: (_info, e) => {\n this._dragging = true\n this._setValueFromPointer(e)\n },\n onEnd: (_info, e) => {\n this._setValueFromPointer(e)\n this._pressed = false\n this._dragging = false\n if (this._interactionStartValue !== this.value) {\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n }\n this._interactionStartValue = undefined\n },\n onTap: () => {\n if (this._interactionStartValue !== this.value) {\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n }\n },\n onCancel: () => {\n this._pressed = false\n this._dragging = false\n this._interactionStartValue = undefined\n }\n })\n }\n\n private _handleKeyDown(event: KeyboardEvent) {\n if (this._isDisabled) return\n const pageStep = this._safeStep * 10\n const keyValues: Record<string, number> = {\n ArrowDown: this.value - this._safeStep,\n ArrowLeft: this.value - this._safeStep,\n ArrowUp: this.value + this._safeStep,\n ArrowRight: this.value + this._safeStep,\n PageDown: this.value - pageStep,\n PageUp: this.value + pageStep,\n Home: this.min,\n End: this.max\n }\n const nextValue = keyValues[event.key]\n if (nextValue === undefined) return\n event.preventDefault()\n if (this._setValue(nextValue)) this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n }\n\n override render() {\n const trackClass = classMap({\n 'wui-slider-track': true,\n 'is-dragging': this._dragging,\n 'is-disabled': this._isDisabled\n })\n const thumbClass = classMap({\n 'wui-slider-thumb': true,\n 'wui-glass': true,\n 'is-pressed': this._pressed,\n 'is-dragging': this._dragging\n })\n const trackStyle = styleMap({ '--percent': `${this._percent}%` })\n\n return html`\n <div\n class=${trackClass}\n style=${trackStyle}\n role=\"slider\"\n tabindex=${this._isDisabled ? '-1' : '0'}\n aria-label=\"滑块\"\n aria-orientation=${this.vertical ? 'vertical' : 'horizontal'}\n aria-valuemin=${this.min}\n aria-valuemax=${this.max}\n aria-valuenow=${this.value}\n aria-disabled=${String(this._isDisabled)}\n @keydown=${this._handleKeyDown}\n @pointerdown=${this._handlePointerDown}\n >\n <div class=\"wui-slider-progress\"></div>\n <div class=\"wui-slider-marks\">\n ${this._markValues.map(\n mark =>\n html`<span\n class=\"wui-slider-mark\"\n style=${styleMap({ '--percent': `${((mark - this.min) / this._range) * 100}%` })}\n ></span>`\n )}\n </div>\n <div class=${thumbClass}></div>\n </div>\n `\n }\n\n declare readonly $events: {\n input: Event\n change: Event\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'web-ui-slider': WebUiSlider\n }\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/slider/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { styleMap } from 'lit/directives/style-map.js'\n\nimport glass from '@/assets/glass.css?inline'\nimport { installPointerFocusSuppression } from '@/shared/focus/pointer-focus'\nimport { FormAssociated, defineFormAssociation, FormAssociationController } from '@/shared/form-association'\nimport { attachDragGesture, type DragGestureHandle } from '@/shared/gesture/drag-gesture'\nimport { clamp } from '@/shared/gesture/physics'\nimport { normalizeNumber } from '@/shared/normalize'\n\nimport style from './style.css?inline'\n\ninstallPointerFocusSuppression()\n\n@customElement('web-ui-slider')\nexport class WebUiSlider extends FormAssociated(LitElement) {\n static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n\n @property({ type: Boolean, reflect: true }) disabled = false\n @property({ type: Boolean, reflect: true }) marks = false\n @property({ type: Boolean, reflect: true }) vertical = false\n @property({ type: String, reflect: true }) name = ''\n @property({ type: Boolean, reflect: true }) required = false\n\n // value 使用访问器模式同步表单关联状态。\n private _value = 0\n @property({ type: Number, reflect: true })\n get value(): number {\n return this._value\n }\n set value(v: number) {\n const normalized = normalizeNumber(v, -Infinity, Infinity, 0)\n const old = this._value\n this._value = normalized\n this._formAssociation.sync()\n this.requestUpdate('value', old)\n }\n\n private _min = 0\n @property({ type: Number, reflect: true })\n get min(): number {\n return this._min\n }\n set min(v: number) {\n this._min = normalizeNumber(v, -Infinity, Infinity, 0)\n }\n\n private _max = 100\n @property({ type: Number, reflect: true })\n get max(): number {\n return this._max\n }\n set max(v: number) {\n this._max = normalizeNumber(v, -Infinity, Infinity, 100)\n }\n\n private _step = 1\n @property({ type: Number, reflect: true })\n get step(): number {\n return this._step\n }\n set step(v: number) {\n this._step = normalizeNumber(v, -Infinity, Infinity, 1)\n }\n\n @state() private _dragging = false\n @state() private _pressed = false\n // 避免未改变数值的点击被误认为一次表单提交\n private _interactionStartValue: number | undefined\n private _dragGestureHandle: DragGestureHandle | null = null\n\n override disconnectedCallback() {\n super.disconnectedCallback()\n this._dragGestureHandle?.destroy()\n this._dragGestureHandle = null\n }\n\n private readonly _formAssociation = defineFormAssociation<number>({\n host: this,\n initialize: () => {\n this._value = this._normalizeValue(this._value)\n },\n getState: () => this._value,\n setState: value => {\n this.value = value\n },\n getFormValue: () => String(this._value),\n getFormState: () => String(this._value),\n restoreState: state => {\n if (typeof state !== 'string') return\n const value = Number(state)\n if (Number.isFinite(value)) this.value = value\n },\n syncValidity: internals => {\n if (typeof internals.setValidity === 'function') internals.setValidity({})\n }\n }).make()\n\n private readonly _formAssociationController = new FormAssociationController(this, this._formAssociation)\n\n private get _isDisabled(): boolean {\n return this.disabled || this._formAssociation.isFormDisabled()\n }\n\n override willUpdate(changed: Map<string, unknown>) {\n if (changed.has('value') || changed.has('min') || changed.has('max') || changed.has('step')) {\n const normalizedValue = this._normalizeValue(this.value)\n if (normalizedValue !== this.value) this.value = normalizedValue\n }\n }\n\n override focus(options?: FocusOptions) {\n this._slider?.focus(options)\n }\n\n override blur() {\n this._slider?.blur()\n }\n\n private get _slider(): HTMLDivElement | null {\n return this.renderRoot.querySelector<HTMLDivElement>('[role=\"slider\"]')\n }\n\n private get _range(): number {\n return Math.max(0, this.max - this.min)\n }\n\n private get _percent(): number {\n return this._range === 0 ? 0 : ((this.value - this.min) / this._range) * 100\n }\n\n private get _markValues(): number[] {\n if (!this.marks || this._range === 0) return []\n const count = Math.min(100, Math.floor(this._range / this._safeStep))\n return Array.from({ length: count + 1 }, (_, index) => this.min + index * this._safeStep)\n }\n\n private get _safeStep(): number {\n return Number.isFinite(this.step) && this.step > 0 ? this.step : 1\n }\n\n private _normalizeValue(value: number): number {\n if (!Number.isFinite(value)) return this.min\n const lower = Math.min(this.min, this.max)\n const upper = Math.max(this.min, this.max)\n const clamped = clamp(value, lower, upper)\n const steps = Math.round((clamped - lower) / this._safeStep)\n return Number((lower + steps * this._safeStep).toFixed(this._precision))\n }\n\n private get _precision(): number {\n return Math.max(this._decimalPlaces(this.min), this._decimalPlaces(this.max), this._decimalPlaces(this._safeStep))\n }\n\n private _decimalPlaces(value: number): number {\n const [, decimal = ''] = String(value).split('.')\n return decimal.length\n }\n\n private _setValue(value: number): boolean {\n if (this._isDisabled) return false\n const nextValue = this._normalizeValue(value)\n if (nextValue === this.value) return false\n this.value = nextValue\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }))\n return true\n }\n\n private _setValueFromPointer(event: PointerEvent): boolean {\n const track = this._slider\n if (!track) return false\n const rect = track.getBoundingClientRect()\n if (this.vertical) {\n if (rect.height <= 0) return false\n // 视觉上的数值从下往上增长,与坐标系相反。\n const ratio = clamp(1 - (event.clientY - rect.top) / rect.height, 0, 1)\n return this._setValue(this.min + ratio * this._range)\n }\n if (rect.width <= 0) return false\n const ratio = clamp((event.clientX - rect.left) / rect.width, 0, 1)\n return this._setValue(this.min + ratio * this._range)\n }\n\n private _handlePointerDown(event: PointerEvent) {\n if (this._isDisabled) return\n this._pressed = true\n this._interactionStartValue = this.value\n this._setValueFromPointer(event)\n\n this._dragGestureHandle?.destroy()\n this._dragGestureHandle = attachDragGesture(event, {\n axis: this.vertical ? 'y' : 'x',\n threshold: 6,\n onMove: (_info, e) => {\n this._dragging = true\n this._setValueFromPointer(e)\n },\n onEnd: (_info, e) => {\n this._setValueFromPointer(e)\n this._pressed = false\n this._dragging = false\n if (this._interactionStartValue !== this.value) {\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n }\n this._interactionStartValue = undefined\n },\n onTap: () => {\n if (this._interactionStartValue !== this.value) {\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n }\n },\n onCancel: () => {\n this._pressed = false\n this._dragging = false\n this._interactionStartValue = undefined\n }\n })\n }\n\n private _handleKeyDown(event: KeyboardEvent) {\n if (this._isDisabled) return\n const pageStep = this._safeStep * 10\n const keyValues: Record<string, number> = {\n ArrowDown: this.value - this._safeStep,\n ArrowLeft: this.value - this._safeStep,\n ArrowUp: this.value + this._safeStep,\n ArrowRight: this.value + this._safeStep,\n PageDown: this.value - pageStep,\n PageUp: this.value + pageStep,\n Home: this.min,\n End: this.max\n }\n const nextValue = keyValues[event.key]\n if (nextValue === undefined) return\n event.preventDefault()\n if (this._setValue(nextValue)) this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n }\n\n override render() {\n const trackClass = classMap({\n 'wui-slider-track': true,\n 'is-dragging': this._dragging,\n 'is-disabled': this._isDisabled\n })\n const thumbClass = classMap({\n 'wui-slider-thumb': true,\n 'wui-glass': true,\n 'is-pressed': this._pressed,\n 'is-dragging': this._dragging\n })\n const trackStyle = styleMap({ '--percent': `${this._percent}%` })\n\n return html`\n <div\n class=${trackClass}\n style=${trackStyle}\n role=\"slider\"\n tabindex=${this._isDisabled ? '-1' : '0'}\n aria-label=\"滑块\"\n aria-orientation=${this.vertical ? 'vertical' : 'horizontal'}\n aria-valuemin=${this.min}\n aria-valuemax=${this.max}\n aria-valuenow=${this.value}\n aria-disabled=${String(this._isDisabled)}\n @keydown=${this._handleKeyDown}\n @pointerdown=${this._handlePointerDown}\n >\n <div class=\"wui-slider-progress\"></div>\n <div class=\"wui-slider-marks\">\n ${this._markValues.map(\n mark =>\n html`<span\n class=\"wui-slider-mark\"\n style=${styleMap({ '--percent': `${((mark - this.min) / this._range) * 100}%` })}\n ></span>`\n )}\n </div>\n <div class=${thumbClass}></div>\n </div>\n `\n }\n\n declare readonly $events: {\n input: Event\n change: Event\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'web-ui-slider': WebUiSlider\n }\n}\n"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
//#region src/components/slider/style.css?inline
|
|
2
|
-
var e = "*,:before,:after{box-sizing:border-box}:host{touch-action:none;width:var(--wui-slider-width,200px);display:inline-block}:host([vertical]){width:auto;height:var(--wui-slider-vertical-height,200px)}:host([disabled]){cursor:not-allowed}.wui-slider-track{touch-action:none;cursor:default;-webkit-user-select:none;user-select:none;width:100%;height:var(--wui-slider-height,var(--wui-slider-track-size,6px));border-radius:var(--wui-radius-control,calc(infinity * 1px));background-color:var(--wui-color-surface-track,#e5e5ea);position:relative}.wui-slider-track:focus-visible{outline-color:var(--wui-color-focus-ring,#08f6)}.wui-slider-track.is-disabled{cursor:not-allowed;opacity:.38}.wui-slider-track.is-dragging{cursor:grabbing}:host([vertical]) .wui-slider-track{touch-action:none;width:var(--wui-slider-height,var(--wui-slider-track-size,6px));height:100%}.wui-slider-progress{z-index:1;width:var(--percent);border-radius:inherit;background-color:var(--wui-color-accent,#08f);position:absolute;top:0;bottom:0;left:0}:host([vertical]) .wui-slider-progress{width:100%;height:var(--percent);top:auto;bottom:0}.wui-slider-marks{pointer-events:none;z-index:2;top:calc(100% + 2px);right:var(--wui-slider-marks-inset,0);left:var(--wui-slider-marks-inset,0);height:4px;margin-left:2px;margin-right:2px;position:absolute}:host([vertical]) .wui-slider-marks{top:var(--wui-slider-marks-inset,0);right:auto;bottom:var(--wui-slider-marks-inset,0);width:4px;height:auto;margin:2px 0;left:calc(100% + 2px)}.wui-slider-mark{top:0;left:var(--percent);border-radius:var(--wui-radius-control,calc(infinity * 1px));background-color:var(--wui-color-surface-track,#e5e5ea);width:4px;height:4px;position:absolute;transform:translate(-50%)}:host([vertical]) .wui-slider-mark{top:auto;bottom:var(--percent);left:50%;transform:translate(-50%,50%)}.wui-slider-thumb{--wui-glass-corner-radius:var(--wui-slider-thumb-
|
|
2
|
+
var e = "*,:before,:after{box-sizing:border-box}:host{touch-action:none;width:var(--wui-slider-width,200px);display:inline-block}:host([vertical]){width:auto;height:var(--wui-slider-vertical-height,200px)}:host([disabled]){cursor:not-allowed}.wui-slider-track{touch-action:none;cursor:default;-webkit-user-select:none;user-select:none;width:100%;height:var(--wui-slider-height,var(--wui-slider-track-size,6px));border-radius:var(--wui-radius-control,calc(infinity * 1px));background-color:var(--wui-color-surface-track,#e5e5ea);position:relative}.wui-slider-track:focus-visible{outline-color:var(--wui-color-focus-ring,#08f6)}.wui-slider-track.is-disabled{cursor:not-allowed;opacity:.38}.wui-slider-track.is-dragging{cursor:grabbing}:host([vertical]) .wui-slider-track{touch-action:none;width:var(--wui-slider-height,var(--wui-slider-track-size,6px));height:100%}.wui-slider-progress{z-index:1;width:var(--percent);border-radius:inherit;background-color:var(--wui-color-accent,#08f);position:absolute;top:0;bottom:0;left:0}:host([vertical]) .wui-slider-progress{width:100%;height:var(--percent);top:auto;bottom:0}.wui-slider-marks{pointer-events:none;z-index:2;top:calc(100% + 2px);right:var(--wui-slider-marks-inset,0);left:var(--wui-slider-marks-inset,0);height:4px;margin-left:2px;margin-right:2px;position:absolute}:host([vertical]) .wui-slider-marks{top:var(--wui-slider-marks-inset,0);right:auto;bottom:var(--wui-slider-marks-inset,0);width:4px;height:auto;margin:2px 0;left:calc(100% + 2px)}.wui-slider-mark{top:0;left:var(--percent);border-radius:var(--wui-radius-control,calc(infinity * 1px));background-color:var(--wui-color-surface-track,#e5e5ea);width:4px;height:4px;position:absolute;transform:translate(-50%)}:host([vertical]) .wui-slider-mark{top:auto;bottom:var(--percent);left:50%;transform:translate(-50%,50%)}.wui-slider-thumb{--wui-glass-corner-radius:calc(var(--wui-slider-thumb-height,20px) / 2);cursor:inherit;z-index:3;top:50%;left:var(--percent);transform-origin:50%;width:var(--wui-slider-thumb-width,24px);height:var(--wui-slider-thumb-height,20px);border-radius:var(--wui-radius-control,calc(infinity * 1px));transition:transform var(--wui-duration-press,80ms) cubic-bezier(.4, 0, .2, 1), background-color var(--wui-duration-press,80ms) ease, box-shadow var(--wui-duration-press,80ms) ease;position:absolute;transform:translate(-50%,-50%)scale(1)}.wui-slider-thumb:not(.is-dragging){background-color:var(--wui-color-on-control,#fff)}.wui-slider-thumb.is-pressed:not(.is-dragging){box-shadow:inset 0 0 0 .5px color-mix(in srgb, var(--wui-color-glass-highlight,#ffffffe6) 38%, transparent), inset 0 1px .5px color-mix(in srgb, var(--wui-color-glass-highlight,#ffffffe6) 52%, transparent), inset 0 -.5px 1px #00000008, 0 2px 20px #0003;background-color:#0000;transform:translate(-50%,-50%)scale(1.5)}.wui-slider-thumb.is-dragging{cursor:grabbing;box-shadow:inset 0 0 0 .5px color-mix(in srgb, var(--wui-color-glass-highlight,#ffffffe6) 38%, transparent), inset 0 1px .5px color-mix(in srgb, var(--wui-color-glass-highlight,#ffffffe6) 52%, transparent), inset 0 -.5px 1px #00000008, 0 2px 20px #0003;background-color:#0000;transform:translate(-50%,-50%)scale(1.5)}:host([vertical]) .wui-slider-thumb{top:auto;bottom:var(--percent);left:50%;transform:translate(-50%,50%)scale(1)}:host([vertical]) .wui-slider-thumb.is-pressed:not(.is-dragging),:host([vertical]) .wui-slider-thumb.is-dragging{transform:translate(-50%,50%)scale(1.5)}:host([data-wui-pointer-focus]) .wui-slider-track:focus-visible{outline-color:#0000}";
|
|
3
3
|
//#endregion
|
|
4
4
|
export { e as default };
|
|
5
5
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/slider/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n touch-action: none;\n display: inline-block;\n width: var(--wui-slider-width, 200px);\n}\n\n:host([vertical]) {\n width: auto;\n height: var(--wui-slider-vertical-height, 200px);\n}\n\n:host([disabled]) {\n cursor: not-allowed;\n}\n\n.wui-slider-track {\n touch-action: none;\n cursor: default;\n user-select: none;\n\n position: relative;\n\n width: 100%;\n height: var(--wui-slider-height, var(--wui-slider-track-size, 6px));\n border-radius: var(--wui-radius-control, calc(infinity * 1px));\n\n background-color: var(--wui-color-surface-track, #e5e5ea);\n\n &:focus-visible {\n outline-color: var(--wui-color-focus-ring, rgb(0 136 255 / 0.4));\n }\n\n &.is-disabled {\n cursor: not-allowed;\n opacity: 0.38;\n }\n\n &.is-dragging {\n cursor: grabbing;\n }\n}\n\n:host([vertical]) .wui-slider-track {\n touch-action: none;\n width: var(--wui-slider-height, var(--wui-slider-track-size, 6px));\n height: 100%;\n}\n\n.wui-slider-progress {\n position: absolute;\n z-index: 1;\n top: 0;\n bottom: 0;\n left: 0;\n\n width: var(--percent);\n border-radius: inherit;\n\n background-color: var(--wui-color-accent, #08f);\n}\n\n:host([vertical]) .wui-slider-progress {\n top: auto;\n bottom: 0;\n width: 100%;\n height: var(--percent);\n}\n\n.wui-slider-marks {\n pointer-events: none;\n\n position: absolute;\n z-index: 2;\n top: calc(100% + 2px);\n right: var(--wui-slider-marks-inset, 0);\n left: var(--wui-slider-marks-inset, 0);\n\n height: 4px;\n margin-right: 2px;\n margin-left: 2px;\n}\n\n:host([vertical]) .wui-slider-marks {\n top: var(--wui-slider-marks-inset, 0);\n right: auto;\n bottom: var(--wui-slider-marks-inset, 0);\n left: calc(100% + 2px);\n\n width: 4px;\n height: auto;\n margin: 2px 0;\n}\n\n.wui-slider-mark {\n position: absolute;\n top: 0;\n left: var(--percent);\n transform: translateX(-50%);\n\n width: 4px;\n height: 4px;\n border-radius: var(--wui-radius-control, calc(infinity * 1px));\n\n background-color: var(--wui-color-surface-track, #e5e5ea);\n}\n\n:host([vertical]) .wui-slider-mark {\n top: auto;\n bottom: var(--percent);\n left: 50%;\n transform: translate(-50%, 50%);\n}\n\n.wui-slider-thumb {\n --wui-glass-corner-radius: var(--wui-slider-thumb-
|
|
1
|
+
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/slider/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n touch-action: none;\n display: inline-block;\n width: var(--wui-slider-width, 200px);\n}\n\n:host([vertical]) {\n width: auto;\n height: var(--wui-slider-vertical-height, 200px);\n}\n\n:host([disabled]) {\n cursor: not-allowed;\n}\n\n.wui-slider-track {\n touch-action: none;\n cursor: default;\n user-select: none;\n\n position: relative;\n\n width: 100%;\n height: var(--wui-slider-height, var(--wui-slider-track-size, 6px));\n border-radius: var(--wui-radius-control, calc(infinity * 1px));\n\n background-color: var(--wui-color-surface-track, #e5e5ea);\n\n &:focus-visible {\n outline-color: var(--wui-color-focus-ring, rgb(0 136 255 / 0.4));\n }\n\n &.is-disabled {\n cursor: not-allowed;\n opacity: 0.38;\n }\n\n &.is-dragging {\n cursor: grabbing;\n }\n}\n\n:host([vertical]) .wui-slider-track {\n touch-action: none;\n width: var(--wui-slider-height, var(--wui-slider-track-size, 6px));\n height: 100%;\n}\n\n.wui-slider-progress {\n position: absolute;\n z-index: 1;\n top: 0;\n bottom: 0;\n left: 0;\n\n width: var(--percent);\n border-radius: inherit;\n\n background-color: var(--wui-color-accent, #08f);\n}\n\n:host([vertical]) .wui-slider-progress {\n top: auto;\n bottom: 0;\n width: 100%;\n height: var(--percent);\n}\n\n.wui-slider-marks {\n pointer-events: none;\n\n position: absolute;\n z-index: 2;\n top: calc(100% + 2px);\n right: var(--wui-slider-marks-inset, 0);\n left: var(--wui-slider-marks-inset, 0);\n\n height: 4px;\n margin-right: 2px;\n margin-left: 2px;\n}\n\n:host([vertical]) .wui-slider-marks {\n top: var(--wui-slider-marks-inset, 0);\n right: auto;\n bottom: var(--wui-slider-marks-inset, 0);\n left: calc(100% + 2px);\n\n width: 4px;\n height: auto;\n margin: 2px 0;\n}\n\n.wui-slider-mark {\n position: absolute;\n top: 0;\n left: var(--percent);\n transform: translateX(-50%);\n\n width: 4px;\n height: 4px;\n border-radius: var(--wui-radius-control, calc(infinity * 1px));\n\n background-color: var(--wui-color-surface-track, #e5e5ea);\n}\n\n:host([vertical]) .wui-slider-mark {\n top: auto;\n bottom: var(--percent);\n left: 50%;\n transform: translate(-50%, 50%);\n}\n\n.wui-slider-thumb {\n /* thumb 是 pill,描边光影需要有限半径,取短边(height)的一半 */\n --wui-glass-corner-radius: calc(var(--wui-slider-thumb-height, 20px) / 2);\n\n cursor: inherit;\n\n position: absolute;\n z-index: 3;\n top: 50%;\n left: var(--percent);\n transform-origin: center center;\n transform: translate(-50%, -50%) scale(1);\n\n width: var(--wui-slider-thumb-width, 24px);\n height: var(--wui-slider-thumb-height, 20px);\n border-radius: var(--wui-radius-control, calc(infinity * 1px));\n\n transition:\n transform var(--wui-duration-press, 80ms) cubic-bezier(0.4, 0, 0.2, 1),\n background-color var(--wui-duration-press, 80ms) ease,\n box-shadow var(--wui-duration-press, 80ms) ease;\n\n /* 静止态实体白 thumb(wui-glass 恒开仅提供描边/高光,背景被白色覆盖);\n 按压/拖拽时背景转透明让 backdrop blur 透出并放大 1.5x。\n box-shadow 直接写死值(不经自定义属性中转):iOS Safari 对 var 离散切换驱动的\n box-shadow 不触发过渡且可能整体不生效(r2 真机「回退之前」的根因),直接写值\n 后是普通属性变化,transition 正常插值;同时复制 wui-glass 的三条 inset 高光,\n 避免整段覆盖后按压态丢失玻璃描边。 */\n &:not(.is-dragging) {\n background-color: var(--wui-color-on-control, #fff);\n }\n\n &.is-pressed:not(.is-dragging) {\n transform: translate(-50%, -50%) scale(1.5);\n background-color: transparent;\n box-shadow:\n inset 0 0 0 0.5px color-mix(in srgb, var(--wui-color-glass-highlight, rgb(255 255 255 / 0.9)) 38%, transparent),\n inset 0 1px 0.5px color-mix(in srgb, var(--wui-color-glass-highlight, rgb(255 255 255 / 0.9)) 52%, transparent),\n inset 0 -0.5px 1px rgb(0 0 0 / 0.03),\n 0 2px 20px rgb(0 0 0 / 0.2);\n }\n\n &.is-dragging {\n cursor: grabbing;\n transform: translate(-50%, -50%) scale(1.5);\n background-color: transparent;\n box-shadow:\n inset 0 0 0 0.5px color-mix(in srgb, var(--wui-color-glass-highlight, rgb(255 255 255 / 0.9)) 38%, transparent),\n inset 0 1px 0.5px color-mix(in srgb, var(--wui-color-glass-highlight, rgb(255 255 255 / 0.9)) 52%, transparent),\n inset 0 -0.5px 1px rgb(0 0 0 / 0.03),\n 0 2px 20px rgb(0 0 0 / 0.2);\n }\n}\n\n:host([vertical]) .wui-slider-thumb {\n top: auto;\n bottom: var(--percent);\n left: 50%;\n transform: translate(-50%, 50%) scale(1);\n\n &.is-pressed:not(.is-dragging) {\n transform: translate(-50%, 50%) scale(1.5);\n }\n\n &.is-dragging {\n transform: translate(-50%, 50%) scale(1.5);\n }\n}\n\n:host([data-wui-pointer-focus]) .wui-slider-track:focus-visible {\n outline-color: transparent;\n}\n"],"mappings":""}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import e from "../../_virtual/_@oxc-project_runtime@0.
|
|
1
|
+
import e from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
|
|
2
2
|
import t from "./style.js";
|
|
3
3
|
import { LitElement as n, html as r, nothing as i, unsafeCSS as a } from "lit";
|
|
4
4
|
import { customElement as o, property as s } from "lit/decorators.js";
|
|
@@ -34,7 +34,7 @@ var l, u = 8, d = class extends n {
|
|
|
34
34
|
let e = r`
|
|
35
35
|
<div class="wui-spinner">
|
|
36
36
|
${c(Array.from({ length: u }, (e, t) => t), (e) => r`<span
|
|
37
|
-
style="transform:rotate(${e * 45}deg);animation-delay:calc(-${u - e} / ${u} *
|
|
37
|
+
style="transform:rotate(${e * 45}deg);animation-delay:calc(-${u - e} / ${u} * var(--wui-duration-spinner, 800ms))"
|
|
38
38
|
></span>`)}
|
|
39
39
|
</div>
|
|
40
40
|
${this.description ? r`<div class="spinner-description">${this.description}</div>` : i}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/spinner/index.ts"],"sourcesContent":["import { html, LitElement, nothing, type PropertyValues, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { repeat } from 'lit/directives/repeat.js'\n\nimport style from './style.css?inline'\n\nconst LEAF_COUNT = 8\n\n@customElement('web-ui-spinner')\nexport class WebUiSpinner extends LitElement {\n static override styles = unsafeCSS(style)\n\n @property({ type: Number, reflect: true }) size = 24\n @property({ type: String }) description = ''\n\n // 自动创建并挂载全屏实例。\n static show(options?: { size?: number; duration?: number; description?: string }): WebUiSpinner {\n const el = document.createElement('web-ui-spinner')\n el._imperative = true\n if (options?.size) el.size = options.size\n if (options?.description) el.description = options.description\n document.body.appendChild(el)\n if (options?.duration && options.duration > 0) {\n el._timer = window.setTimeout(() => WebUiSpinner.hide(), options.duration)\n }\n return el\n }\n\n // 销毁由 show() 挂载的全屏实例。\n static hide() {\n if (WebUiSpinner._current?._timer) {\n clearTimeout(WebUiSpinner._current._timer)\n WebUiSpinner._current._timer = undefined\n }\n WebUiSpinner._current?.remove()\n WebUiSpinner._current = undefined\n }\n\n /** @internal 当前命令式实例 */\n static _current?: WebUiSpinner\n\n /** @internal */\n _imperative = false\n /** @internal */\n _timer?: ReturnType<typeof setTimeout>\n\n override connectedCallback() {\n super.connectedCallback()\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'status')\n }\n if (!this.hasAttribute('aria-label')) {\n this.setAttribute('aria-label', '加载中')\n }\n if (this._imperative) {\n WebUiSpinner._current?.remove()\n WebUiSpinner._current = this\n this.classList.add('wui-spinner-overlay')\n }\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback()\n if (this._timer) {\n clearTimeout(this._timer)\n this._timer = undefined\n }\n }\n\n protected override updated(props: PropertyValues) {\n super.updated(props)\n if (props.has('size')) {\n this.style.setProperty('--wui-spinner-size', `${this.size}px`)\n }\n }\n\n override render() {\n const spinner = html`\n <div class=\"wui-spinner\">\n ${repeat(\n Array.from({ length: LEAF_COUNT }, (_, i) => i),\n i =>\n html`<span\n style=\"transform:rotate(${i * 45}deg);animation-delay:calc(-${LEAF_COUNT - i} / ${LEAF_COUNT} *
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/spinner/index.ts"],"sourcesContent":["import { html, LitElement, nothing, type PropertyValues, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { repeat } from 'lit/directives/repeat.js'\n\nimport style from './style.css?inline'\n\nconst LEAF_COUNT = 8\n\n@customElement('web-ui-spinner')\nexport class WebUiSpinner extends LitElement {\n static override styles = unsafeCSS(style)\n\n @property({ type: Number, reflect: true }) size = 24\n @property({ type: String }) description = ''\n\n // 自动创建并挂载全屏实例。\n static show(options?: { size?: number; duration?: number; description?: string }): WebUiSpinner {\n const el = document.createElement('web-ui-spinner')\n el._imperative = true\n if (options?.size) el.size = options.size\n if (options?.description) el.description = options.description\n document.body.appendChild(el)\n if (options?.duration && options.duration > 0) {\n el._timer = window.setTimeout(() => WebUiSpinner.hide(), options.duration)\n }\n return el\n }\n\n // 销毁由 show() 挂载的全屏实例。\n static hide() {\n if (WebUiSpinner._current?._timer) {\n clearTimeout(WebUiSpinner._current._timer)\n WebUiSpinner._current._timer = undefined\n }\n WebUiSpinner._current?.remove()\n WebUiSpinner._current = undefined\n }\n\n /** @internal 当前命令式实例 */\n static _current?: WebUiSpinner\n\n /** @internal */\n _imperative = false\n /** @internal */\n _timer?: ReturnType<typeof setTimeout>\n\n override connectedCallback() {\n super.connectedCallback()\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'status')\n }\n if (!this.hasAttribute('aria-label')) {\n this.setAttribute('aria-label', '加载中')\n }\n if (this._imperative) {\n WebUiSpinner._current?.remove()\n WebUiSpinner._current = this\n this.classList.add('wui-spinner-overlay')\n }\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback()\n if (this._timer) {\n clearTimeout(this._timer)\n this._timer = undefined\n }\n }\n\n protected override updated(props: PropertyValues) {\n super.updated(props)\n if (props.has('size')) {\n this.style.setProperty('--wui-spinner-size', `${this.size}px`)\n }\n }\n\n override render() {\n const spinner = html`\n <div class=\"wui-spinner\">\n ${repeat(\n Array.from({ length: LEAF_COUNT }, (_, i) => i),\n i =>\n html`<span\n style=\"transform:rotate(${i * 45}deg);animation-delay:calc(-${LEAF_COUNT - i} / ${LEAF_COUNT} * var(--wui-duration-spinner, 800ms))\"\n ></span>`\n )}\n </div>\n ${this.description ? html`<div class=\"spinner-description\">${this.description}</div>` : nothing}\n <slot name=\"description\"></slot>\n `\n return this._imperative ? html`<div class=\"wui-spinner-overlay\">${spinner}</div>` : spinner\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'web-ui-spinner': WebUiSpinner\n }\n}\n"],"mappings":";;;;;;OAMM,IAAa,GAGN,IAAN,cAA2B,EAAW;;;;;EAiC7B,aA9BoC,KAAA,OAAA,IACR,KAAA,cAAA,IA6B5B,KAAA,cAAA;;;EAhCW,KAAA,SAAA,EAAU,CAAK;;CAMxC,OAAO,KAAK,GAAoF;EAC9F,IAAM,IAAK,SAAS,cAAc,gBAAgB;EAQlD,OAPA,EAAG,cAAc,IACb,GAAS,SAAM,EAAG,OAAO,EAAQ,OACjC,GAAS,gBAAa,EAAG,cAAc,EAAQ,cACnD,SAAS,KAAK,YAAY,CAAE,GACxB,GAAS,YAAY,EAAQ,WAAW,MAC1C,EAAG,SAAS,OAAO,iBAAA,EAA8B,KAAK,GAAG,EAAQ,QAAQ,IAEpE;CACT;CAGA,OAAO,OAAO;EAMZ,AALA,EAAiB,UAAU,WACzB,aAAA,EAA0B,SAAS,MAAM,GACzC,EAAa,SAAS,SAAS,KAAA,IAEjC,EAAa,UAAU,OAAO,GAC9B,EAAa,WAAW,KAAA;CAC1B;CAUA,oBAA6B;EAQ3B,AAPA,MAAM,kBAAkB,GACnB,KAAK,aAAa,MAAM,KAC3B,KAAK,aAAa,QAAQ,QAAQ,GAE/B,KAAK,aAAa,YAAY,KACjC,KAAK,aAAa,cAAc,KAAK,GAEnC,KAAK,gBACP,EAAa,UAAU,OAAO,GAC9B,EAAa,WAAW,MACxB,KAAK,UAAU,IAAI,qBAAqB;CAE5C;CAEA,uBAAgC;EAE9B,AADA,MAAM,qBAAqB,GAC3B,AAEE,KAAK,YADL,aAAa,KAAK,MAAM,GACV,KAAA;CAElB;CAEA,QAA2B,GAAuB;EAEhD,AADA,MAAM,QAAQ,CAAK,GACf,EAAM,IAAI,MAAM,KAClB,KAAK,MAAM,YAAY,sBAAsB,GAAG,KAAK,KAAK,GAAG;CAEjE;CAEA,SAAkB;EAChB,IAAM,IAAU,CAAI;;UAEd,EACA,MAAM,KAAK,EAAE,QAAQ,EAAW,IAAI,GAAG,MAAM,CAAC,IAC9C,MACE,CAAI;wCACwB,IAAI,GAAG,6BAA6B,IAAa,EAAE,KAAK,EAAW;qBAEnG,EAAE;;QAEF,KAAK,cAAc,CAAI,oCAAoC,KAAK,YAAY,UAAU,EAAQ;;;EAGlG,OAAO,KAAK,cAAc,CAAI,oCAAoC,EAAQ,UAAU;CACtF;AACF;AAhFG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GACxC,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,eAAA,KAAA,CAAA,GAL3B,IAAA,IAAA,EAAA,CAAA,EAAc,gBAAgB,CAAA,GAAA,CAAA"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
//#region src/components/spinner/style.css?inline
|
|
2
|
-
var e = "*,:before,:after{box-sizing:border-box}:host{justify-content:center;align-items:center;display:inline-flex}:host(.wui-spinner-overlay){display:contents}.wui-spinner{width:var(--wui-spinner-size,24px);height:var(--wui-spinner-size,24px);color:#666;position:relative}.wui-spinner span{transform-origin:50%;width:10%;height:100%;animation
|
|
2
|
+
var e = "*,:before,:after{box-sizing:border-box}:host{justify-content:center;align-items:center;display:inline-flex}:host(.wui-spinner-overlay){display:contents}.wui-spinner{width:var(--wui-spinner-size,24px);height:var(--wui-spinner-size,24px);color:#666;position:relative}.wui-spinner span{transform-origin:50%;width:10%;height:100%;animation:wui-spinner-leaf-fade var(--wui-duration-spinner,.8s) linear infinite;position:absolute;top:0;left:50%}.wui-spinner span:before{content:\"\";border-radius:var(--wui-radius-control,calc(infinity * 1px));background-color:currentColor;width:100%;height:30%;margin-top:12%;display:block}.wui-spinner-overlay{pointer-events:none;z-index:var(--wui-layer-loading,300);flex-direction:column;justify-content:center;align-items:center;gap:8px;display:flex;position:fixed;inset:0}.wui-spinner-overlay .wui-spinner{pointer-events:auto}.spinner-description{pointer-events:auto;max-width:240px;font-size:var(--wui-font-size,14px);color:var(--wui-color-text-secondary,#6a6a6a);text-align:center;line-height:1.5}@keyframes wui-spinner-leaf-fade{0%{opacity:1}to{opacity:0}}";
|
|
3
3
|
//#endregion
|
|
4
4
|
export { e as default };
|
|
5
5
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/spinner/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n:host(.wui-spinner-overlay) {\n display: contents;\n}\n\n.wui-spinner {\n position: relative;\n width: var(--wui-spinner-size, 24px);\n height: var(--wui-spinner-size, 24px);\n color: #666;\n\n span {\n position: absolute;\n top: 0;\n left: 50%;\n transform-origin: center center;\n\n width: 10%;\n height: 100%;\n\n animation: wui-spinner-leaf-fade
|
|
1
|
+
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/spinner/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n:host(.wui-spinner-overlay) {\n display: contents;\n}\n\n.wui-spinner {\n position: relative;\n width: var(--wui-spinner-size, 24px);\n height: var(--wui-spinner-size, 24px);\n color: #666;\n\n span {\n position: absolute;\n top: 0;\n left: 50%;\n transform-origin: center center;\n\n width: 10%;\n height: 100%;\n\n animation: wui-spinner-leaf-fade var(--wui-duration-spinner, 800ms) linear infinite;\n\n &::before {\n content: '';\n\n display: block;\n\n width: 100%;\n height: 30%;\n margin-top: 12%;\n border-radius: var(--wui-radius-control, calc(infinity * 1px));\n\n background-color: currentcolor;\n }\n }\n}\n\n.wui-spinner-overlay {\n pointer-events: none;\n\n position: fixed;\n z-index: var(--wui-layer-loading, 300);\n inset: 0;\n\n display: flex;\n flex-direction: column;\n gap: 8px;\n align-items: center;\n justify-content: center;\n\n .wui-spinner {\n pointer-events: auto;\n }\n}\n\n.spinner-description {\n pointer-events: auto;\n\n max-width: 240px;\n\n font-size: var(--wui-font-size, 14px);\n line-height: 1.5;\n color: var(--wui-color-text-secondary, #6a6a6a);\n text-align: center;\n}\n\n@keyframes wui-spinner-leaf-fade {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n }\n}\n"],"mappings":""}
|
|
@@ -1,21 +1,32 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
|
+
export interface ReplayOptions {
|
|
3
|
+
/** 沿原路径收回(从完整描边画回空白),默认 false 即揭示方向。 */
|
|
4
|
+
reverse?: boolean;
|
|
5
|
+
}
|
|
2
6
|
export declare class WebUiSvgDrawLines extends LitElement {
|
|
3
7
|
static styles: import('lit').CSSResult;
|
|
4
8
|
get duration(): number;
|
|
5
9
|
set duration(v: number);
|
|
6
10
|
private _duration;
|
|
7
11
|
easing: string;
|
|
12
|
+
/** 关掉「首次内容稳定时自动播放一次」,交给调用方用 replay() 决定何时播。 */
|
|
13
|
+
noAutoplay: boolean;
|
|
8
14
|
private _activeRun;
|
|
9
15
|
private _hasAutoPlayed;
|
|
16
|
+
private readonly _authoredDash;
|
|
17
|
+
/** 收回留在元素上的「空白」,只有内联那两个值都还是我们自己写的那一份时才算数。 */
|
|
18
|
+
private readonly _stickyBlank;
|
|
10
19
|
/**
|
|
11
20
|
* 停止当前播放并重新开始。每次调用重新收集子树中的几何元素。
|
|
12
21
|
* 所有元素同时开始并行的 stroke-dashoffset 动画。
|
|
22
|
+
* options.reverse 为 true 时沿原路径收回。
|
|
13
23
|
* 无目标或当前主题范围启用 reduced motion 时立即 resolve。
|
|
14
24
|
*/
|
|
15
|
-
replay(): Promise<void>;
|
|
25
|
+
replay(options?: ReplayOptions): Promise<void>;
|
|
16
26
|
private cancelAll;
|
|
17
|
-
private _isReducedMotion;
|
|
18
27
|
private finishRun;
|
|
28
|
+
/** 只撤销我们自己写进去的那一份空白;消费者后来动过内联的任一个值就不碰。 */
|
|
29
|
+
private clearStickyBlank;
|
|
19
30
|
/**
|
|
20
31
|
* 深度遍历组件的 light DOM 子节点与开放 Shadow Root,
|
|
21
32
|
* 收集所有 SVGGeometryElement。closed shadow root 跳过。
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import e from "../../_virtual/_@oxc-project_runtime@0.
|
|
1
|
+
import e from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
|
|
2
2
|
import { normalizeNumber as t } from "../../shared/normalize/index.js";
|
|
3
|
-
import {
|
|
3
|
+
import { prefersReducedMotion as n } from "../../shared/theme/reduced-motion.js";
|
|
4
4
|
import r from "./style.js";
|
|
5
5
|
import { LitElement as i, html as a, unsafeCSS as o } from "lit";
|
|
6
6
|
import { customElement as s, property as c } from "lit/decorators.js";
|
|
7
7
|
//#region src/components/svg-draw-lines/index.ts
|
|
8
8
|
var l = "path, rect, circle, line, polyline, polygon, ellipse", u = class extends i {
|
|
9
9
|
constructor(...e) {
|
|
10
|
-
super(...e), this._duration = 1e3, this.easing = "linear", this._hasAutoPlayed = !1;
|
|
10
|
+
super(...e), this._duration = 1e3, this.easing = "linear", this.noAutoplay = !1, this._hasAutoPlayed = !1, this._authoredDash = /* @__PURE__ */ new WeakMap(), this._stickyBlank = /* @__PURE__ */ new WeakMap();
|
|
11
11
|
}
|
|
12
12
|
static {
|
|
13
13
|
this.styles = o(r);
|
|
@@ -19,35 +19,44 @@ var l = "path, rect, circle, line, polyline, polygon, ellipse", u = class extend
|
|
|
19
19
|
let n = this._duration;
|
|
20
20
|
this._duration = t(e, 0, 3e4, 1e3), this.requestUpdate("duration", n);
|
|
21
21
|
}
|
|
22
|
-
async replay() {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
22
|
+
async replay(e = {}) {
|
|
23
|
+
let t = e.reverse === !0;
|
|
24
|
+
this.cancelAll();
|
|
25
|
+
let r = this.collectGeometryElements();
|
|
26
|
+
if (n(this)) {
|
|
27
|
+
for (let e of r) this.clearStickyBlank(e);
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
if (r.length === 0) return;
|
|
31
|
+
let i = {
|
|
32
|
+
reverse: t,
|
|
27
33
|
animations: [],
|
|
28
|
-
|
|
34
|
+
blankByElement: /* @__PURE__ */ new Map(),
|
|
29
35
|
patchedD: /* @__PURE__ */ new Map()
|
|
30
36
|
};
|
|
31
|
-
this._activeRun =
|
|
37
|
+
this._activeRun = i, await Promise.all(r.map((e) => this.animateElement(e, i, t))), this._activeRun === i && this.finishRun(i);
|
|
32
38
|
}
|
|
33
39
|
cancelAll() {
|
|
34
40
|
this._activeRun && this.finishRun(this._activeRun);
|
|
35
41
|
}
|
|
36
|
-
_isReducedMotion() {
|
|
37
|
-
let e = n(this);
|
|
38
|
-
if (e) return e.isReducedMotion();
|
|
39
|
-
try {
|
|
40
|
-
return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
41
|
-
} catch {
|
|
42
|
-
return !1;
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
42
|
finishRun(e) {
|
|
46
43
|
e.animations.forEach((e) => e.cancel());
|
|
47
|
-
for (let [t, n] of e.restoreQueue) t.style.strokeDasharray = n.dasharray ?? "", t.style.strokeDashoffset = n.dashoffset ?? "";
|
|
48
44
|
for (let [t, n] of e.patchedD) t.setAttribute("d", n);
|
|
45
|
+
for (let [t, n] of e.blankByElement) {
|
|
46
|
+
let r = this._authoredDash.get(t);
|
|
47
|
+
e.reverse ? (t.style.strokeDasharray = n, t.style.strokeDashoffset = n, this._stickyBlank.set(t, {
|
|
48
|
+
dasharray: t.style.strokeDasharray,
|
|
49
|
+
dashoffset: t.style.strokeDashoffset
|
|
50
|
+
})) : (t.style.strokeDasharray = r?.dasharray ?? "", t.style.strokeDashoffset = r?.dashoffset ?? "", this._stickyBlank.delete(t));
|
|
51
|
+
}
|
|
49
52
|
this._activeRun === e && (this._activeRun = void 0);
|
|
50
53
|
}
|
|
54
|
+
clearStickyBlank(e) {
|
|
55
|
+
let t = this._stickyBlank.get(e);
|
|
56
|
+
if (t === void 0 || e.style.strokeDasharray !== t.dasharray || e.style.strokeDashoffset !== t.dashoffset) return;
|
|
57
|
+
let n = this._authoredDash.get(e);
|
|
58
|
+
e.style.strokeDasharray = n?.dasharray ?? "", e.style.strokeDashoffset = n?.dashoffset ?? "", this._stickyBlank.delete(e);
|
|
59
|
+
}
|
|
51
60
|
collectGeometryElements() {
|
|
52
61
|
let e = [], t = /* @__PURE__ */ new Set(), n = (r) => {
|
|
53
62
|
if ((r instanceof Element || r instanceof DocumentFragment) && r.querySelectorAll(l).forEach((n) => {
|
|
@@ -60,26 +69,26 @@ var l = "path, rect, circle, line, polyline, polygon, ellipse", u = class extend
|
|
|
60
69
|
for (let e of this.children) n(e);
|
|
61
70
|
return e;
|
|
62
71
|
}
|
|
63
|
-
animateElement(e, t) {
|
|
64
|
-
return new Promise((
|
|
65
|
-
if (
|
|
72
|
+
animateElement(e, t, n) {
|
|
73
|
+
return new Promise((r) => {
|
|
74
|
+
if (this._authoredDash.has(e) || this._authoredDash.set(e, {
|
|
66
75
|
dasharray: e.style.strokeDasharray,
|
|
67
76
|
dashoffset: e.style.strokeDashoffset
|
|
68
77
|
}), e.tagName === "path") {
|
|
69
78
|
let n = e.getAttribute("d");
|
|
70
79
|
n && /[Zz]\s*$/.test(n) && !t.patchedD.has(e) && (t.patchedD.set(e, n), e.setAttribute("d", this.fixPathGap(e, n)));
|
|
71
80
|
}
|
|
72
|
-
let
|
|
73
|
-
e.style.strokeDasharray =
|
|
74
|
-
let
|
|
81
|
+
let i = parseFloat(getComputedStyle(e).strokeWidth) || 0, a = `${e.getTotalLength() + i}`, o = n ? "0" : a, s = n ? a : "0";
|
|
82
|
+
e.style.strokeDasharray = a, e.style.strokeDashoffset = o, t.blankByElement.set(e, a);
|
|
83
|
+
let c = e.animate([{ strokeDashoffset: o }, { strokeDashoffset: s }], {
|
|
75
84
|
duration: this.duration,
|
|
76
85
|
easing: this.easing,
|
|
77
86
|
fill: "forwards"
|
|
78
87
|
});
|
|
79
|
-
t.animations.push(
|
|
80
|
-
|
|
81
|
-
},
|
|
82
|
-
|
|
88
|
+
t.animations.push(c), c.onfinish = () => {
|
|
89
|
+
r();
|
|
90
|
+
}, c.oncancel = () => {
|
|
91
|
+
r();
|
|
83
92
|
};
|
|
84
93
|
});
|
|
85
94
|
}
|
|
@@ -89,7 +98,7 @@ var l = "path, rect, circle, line, polyline, polygon, ellipse", u = class extend
|
|
|
89
98
|
return t.replace(/[Zz]\s*$/, `L${n.x.toFixed(3)} ${n.y.toFixed(3)} L${r.x.toFixed(3)} ${r.y.toFixed(3)}`);
|
|
90
99
|
}
|
|
91
100
|
handleSlotChange() {
|
|
92
|
-
this._hasAutoPlayed || (this._hasAutoPlayed = !0, this.replay());
|
|
101
|
+
this.noAutoplay || this._hasAutoPlayed || (this._hasAutoPlayed = !0, this.replay());
|
|
93
102
|
}
|
|
94
103
|
disconnectedCallback() {
|
|
95
104
|
this.cancelAll(), super.disconnectedCallback();
|
|
@@ -104,7 +113,11 @@ e([c({
|
|
|
104
113
|
})], u.prototype, "duration", null), e([c({
|
|
105
114
|
type: String,
|
|
106
115
|
reflect: !0
|
|
107
|
-
})], u.prototype, "easing", void 0),
|
|
116
|
+
})], u.prototype, "easing", void 0), e([c({
|
|
117
|
+
type: Boolean,
|
|
118
|
+
reflect: !0,
|
|
119
|
+
attribute: "no-autoplay"
|
|
120
|
+
})], u.prototype, "noAutoplay", void 0), u = e([s("web-ui-svg-draw-lines")], u);
|
|
108
121
|
//#endregion
|
|
109
122
|
export { u as WebUiSvgDrawLines };
|
|
110
123
|
|