@greypan/web-ui 10.2.1 → 11.1.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.
Files changed (210) hide show
  1. package/README.CN.md +132 -68
  2. package/README.md +112 -43
  3. package/dist/assets/menu-portal.js.map +1 -1
  4. package/dist/assets/modal-surface.js.map +1 -1
  5. package/dist/assets/overlay-motion.js +1 -1
  6. package/dist/assets/overlay-motion.js.map +1 -1
  7. package/dist/assets/selection-control.js +1 -1
  8. package/dist/assets/selection-control.js.map +1 -1
  9. package/dist/classes/glass.js +6 -0
  10. package/dist/classes/glass.js.map +1 -0
  11. package/dist/classes/glow.js +6 -0
  12. package/dist/classes/glow.js.map +1 -0
  13. package/dist/classes/style.css +1 -0
  14. package/dist/components/autocomplete/index.d.ts +13 -6
  15. package/dist/components/autocomplete/index.js +34 -14
  16. package/dist/components/autocomplete/index.js.map +1 -1
  17. package/dist/components/autocomplete/style.js +1 -1
  18. package/dist/components/autocomplete/style.js.map +1 -1
  19. package/dist/components/avatar/index.js +2 -2
  20. package/dist/components/avatar/index.js.map +1 -1
  21. package/dist/components/avatar/style.js +1 -1
  22. package/dist/components/avatar/style.js.map +1 -1
  23. package/dist/components/back-top/index.d.ts +4 -0
  24. package/dist/components/back-top/index.js +60 -22
  25. package/dist/components/back-top/index.js.map +1 -1
  26. package/dist/components/back-top/style.js +1 -1
  27. package/dist/components/back-top/style.js.map +1 -1
  28. package/dist/components/badge/index.d.ts +3 -0
  29. package/dist/components/badge/index.js +30 -15
  30. package/dist/components/badge/index.js.map +1 -1
  31. package/dist/components/badge/style.js +1 -1
  32. package/dist/components/badge/style.js.map +1 -1
  33. package/dist/components/button/index.d.ts +4 -0
  34. package/dist/components/button/index.js +32 -19
  35. package/dist/components/button/index.js.map +1 -1
  36. package/dist/components/button/style.js +1 -1
  37. package/dist/components/button/style.js.map +1 -1
  38. package/dist/components/button-group/index.d.ts +3 -0
  39. package/dist/components/button-group/index.js +15 -2
  40. package/dist/components/button-group/index.js.map +1 -1
  41. package/dist/components/button-group/style.js +1 -1
  42. package/dist/components/button-group/style.js.map +1 -1
  43. package/dist/components/checkbox/index.d.ts +1 -1
  44. package/dist/components/checkbox/index.js +7 -7
  45. package/dist/components/checkbox/index.js.map +1 -1
  46. package/dist/components/checkbox/style.js +1 -1
  47. package/dist/components/checkbox/style.js.map +1 -1
  48. package/dist/components/checkbox-group/index.js +1 -1
  49. package/dist/components/checkbox-group/index.js.map +1 -1
  50. package/dist/components/collapse/index.d.ts +8 -6
  51. package/dist/components/collapse/index.js +45 -25
  52. package/dist/components/collapse/index.js.map +1 -1
  53. package/dist/components/collapse/style.js +1 -1
  54. package/dist/components/collapse/style.js.map +1 -1
  55. package/dist/components/context-menu/index.d.ts +60 -60
  56. package/dist/components/context-menu/index.js +2 -2
  57. package/dist/components/context-menu/index.js.map +1 -1
  58. package/dist/components/context-menu/scrim.js.map +1 -1
  59. package/dist/components/context-menu/style.js.map +1 -1
  60. package/dist/components/dialog/index.d.ts +5 -4
  61. package/dist/components/dialog/index.js +6 -3
  62. package/dist/components/dialog/index.js.map +1 -1
  63. package/dist/components/dialog/style.js +1 -1
  64. package/dist/components/dialog/style.js.map +1 -1
  65. package/dist/components/drawer/index.d.ts +8 -8
  66. package/dist/components/drawer/index.js +2 -2
  67. package/dist/components/drawer/index.js.map +1 -1
  68. package/dist/components/drawer/style.js.map +1 -1
  69. package/dist/components/dropdown/index.d.ts +22 -6
  70. package/dist/components/dropdown/index.js +147 -18
  71. package/dist/components/dropdown/index.js.map +1 -1
  72. package/dist/components/dropdown-item/index.js.map +1 -1
  73. package/dist/components/dropdown-item/style.js +1 -1
  74. package/dist/components/dropdown-item/style.js.map +1 -1
  75. package/dist/components/editable-text/index.d.ts +2 -2
  76. package/dist/components/editable-text/index.js +7 -3
  77. package/dist/components/editable-text/index.js.map +1 -1
  78. package/dist/components/editable-text/style.js +1 -1
  79. package/dist/components/editable-text/style.js.map +1 -1
  80. package/dist/components/empty/index.d.ts +3 -3
  81. package/dist/components/empty/index.js.map +1 -1
  82. package/dist/components/image-preview/index.d.ts +5 -5
  83. package/dist/components/image-preview/index.js +9 -9
  84. package/dist/components/image-preview/index.js.map +1 -1
  85. package/dist/components/image-preview/style.js.map +1 -1
  86. package/dist/components/input/index.d.ts +1 -0
  87. package/dist/components/input/index.js +6 -3
  88. package/dist/components/input/index.js.map +1 -1
  89. package/dist/components/input/style.js +1 -1
  90. package/dist/components/input/style.js.map +1 -1
  91. package/dist/components/input-number/index.d.ts +31 -1
  92. package/dist/components/input-number/index.js +281 -22
  93. package/dist/components/input-number/index.js.map +1 -1
  94. package/dist/components/input-number/style.js +1 -1
  95. package/dist/components/input-number/style.js.map +1 -1
  96. package/dist/components/layout/index.d.ts +7 -7
  97. package/dist/components/layout/index.js +47 -42
  98. package/dist/components/layout/index.js.map +1 -1
  99. package/dist/components/layout/style.js +1 -1
  100. package/dist/components/layout/style.js.map +1 -1
  101. package/dist/components/middle-ellipsis/index.d.ts +9 -2
  102. package/dist/components/middle-ellipsis/index.js +68 -10
  103. package/dist/components/middle-ellipsis/index.js.map +1 -1
  104. package/dist/components/middle-ellipsis/truncate.d.ts +1 -1
  105. package/dist/components/middle-ellipsis/truncate.js.map +1 -1
  106. package/dist/components/option/style.js +1 -1
  107. package/dist/components/option/style.js.map +1 -1
  108. package/dist/components/popover/index.d.ts +1 -1
  109. package/dist/components/popover/index.js +1 -1
  110. package/dist/components/popover/index.js.map +1 -1
  111. package/dist/components/popover/style.js +1 -1
  112. package/dist/components/popover/style.js.map +1 -1
  113. package/dist/components/radio/index.d.ts +6 -1
  114. package/dist/components/radio/index.js +34 -24
  115. package/dist/components/radio/index.js.map +1 -1
  116. package/dist/components/radio/interaction.d.ts +4 -0
  117. package/dist/components/radio/interaction.js +17 -0
  118. package/dist/components/radio/interaction.js.map +1 -0
  119. package/dist/components/radio/style.js +1 -1
  120. package/dist/components/radio/style.js.map +1 -1
  121. package/dist/components/radio-group/index.d.ts +23 -1
  122. package/dist/components/radio-group/index.js +220 -29
  123. package/dist/components/radio-group/index.js.map +1 -1
  124. package/dist/components/segmented/index.d.ts +2 -0
  125. package/dist/components/segmented/index.js +74 -18
  126. package/dist/components/segmented/index.js.map +1 -1
  127. package/dist/components/segmented/style.js +1 -1
  128. package/dist/components/segmented/style.js.map +1 -1
  129. package/dist/components/segmented-trigger/index.js +3 -2
  130. package/dist/components/segmented-trigger/index.js.map +1 -1
  131. package/dist/components/segmented-trigger/style.js +1 -1
  132. package/dist/components/segmented-trigger/style.js.map +1 -1
  133. package/dist/components/select/index.d.ts +8 -0
  134. package/dist/components/select/index.js +77 -26
  135. package/dist/components/select/index.js.map +1 -1
  136. package/dist/components/select/style.js +1 -1
  137. package/dist/components/select/style.js.map +1 -1
  138. package/dist/components/slider/index.d.ts +15 -0
  139. package/dist/components/slider/index.js +175 -39
  140. package/dist/components/slider/index.js.map +1 -1
  141. package/dist/components/slider/style.js +1 -1
  142. package/dist/components/slider/style.js.map +1 -1
  143. package/dist/components/spinner/index.d.ts +15 -0
  144. package/dist/components/spinner/index.js +79 -22
  145. package/dist/components/spinner/index.js.map +1 -1
  146. package/dist/components/spinner/style.js +1 -1
  147. package/dist/components/spinner/style.js.map +1 -1
  148. package/dist/components/svg-draw-lines/index.js +48 -12
  149. package/dist/components/svg-draw-lines/index.js.map +1 -1
  150. package/dist/components/switch/index.d.ts +11 -3
  151. package/dist/components/switch/index.js +58 -54
  152. package/dist/components/switch/index.js.map +1 -1
  153. package/dist/components/switch/style.js +1 -1
  154. package/dist/components/switch/style.js.map +1 -1
  155. package/dist/components/textarea/index.js +3 -3
  156. package/dist/components/textarea/index.js.map +1 -1
  157. package/dist/components/textarea/style.js +1 -1
  158. package/dist/components/textarea/style.js.map +1 -1
  159. package/dist/components/theme/index.d.ts +1 -0
  160. package/dist/components/theme/index.js +26 -15
  161. package/dist/components/theme/index.js.map +1 -1
  162. package/dist/components/theme/style.js +1 -1
  163. package/dist/components/theme/style.js.map +1 -1
  164. package/dist/components/toast/style.js +1 -1
  165. package/dist/components/toast/style.js.map +1 -1
  166. package/dist/components/toast/toast.js +2 -2
  167. package/dist/components/toast/toast.js.map +1 -1
  168. package/dist/components/tooltip/index.d.ts +2 -1
  169. package/dist/components/tooltip/index.js +10 -5
  170. package/dist/components/tooltip/index.js.map +1 -1
  171. package/dist/components/tooltip/style.js.map +1 -1
  172. package/dist/scrollbars/index.d.ts +8 -8
  173. package/dist/scrollbars/index.js.map +1 -1
  174. package/dist/scrollbars/internal.js.map +1 -1
  175. package/dist/shared/element-height/index.js.map +1 -1
  176. package/dist/shared/focus/pointer-focus.js +12 -10
  177. package/dist/shared/focus/pointer-focus.js.map +1 -1
  178. package/dist/shared/gesture/drag-gesture.js +4 -4
  179. package/dist/shared/gesture/drag-gesture.js.map +1 -1
  180. package/dist/shared/group-management/index.js +43 -18
  181. package/dist/shared/group-management/index.js.map +1 -1
  182. package/dist/shared/label-emptiness/index.js.map +1 -1
  183. package/dist/shared/menu-behavior/index.js.map +1 -1
  184. package/dist/shared/menu-portal/menu-portal.js +1 -1
  185. package/dist/shared/menu-portal/menu-portal.js.map +1 -1
  186. package/dist/shared/menu-portal/menu-tree.js.map +1 -1
  187. package/dist/shared/option-portal/combobox-shell.js.map +1 -1
  188. package/dist/shared/option-portal/index.js.map +1 -1
  189. package/dist/shared/overlay/anchored-panel.js.map +1 -1
  190. package/dist/shared/overlay/native-dialog-presence.js.map +1 -1
  191. package/dist/shared/overlay/nested-drawer-layers.js.map +1 -1
  192. package/dist/shared/overlay/open-overlay.js.map +1 -1
  193. package/dist/shared/overlay/overlay-root.js +1 -1
  194. package/dist/shared/overlay/overlay-root.js.map +1 -1
  195. package/dist/shared/overlay/overlay.js +7 -1
  196. package/dist/shared/overlay/overlay.js.map +1 -1
  197. package/dist/shared/overlay/portal.js.map +1 -1
  198. package/dist/shared/overlay/presence.js.map +1 -1
  199. package/dist/shared/scroll-lock/scroll-lock.js.map +1 -1
  200. package/dist/shared/theme/root-sync.js.map +1 -1
  201. package/package.json +5 -2
  202. package/dist/assets/glass.js +0 -6
  203. package/dist/assets/glass.js.map +0 -1
  204. package/dist/icons/generated/heroicons-arrow-down-16-solid.d.ts +0 -6
  205. package/dist/icons/generated/heroicons-arrow-up-16-solid.d.ts +0 -6
  206. package/dist/icons/generated/jam-volume.d.ts +0 -8
  207. package/dist/icons/generated/jam-watch-f.d.ts +0 -8
  208. package/dist/icons/generated/ooui-check.d.ts +0 -6
  209. package/dist/icons/generated/radix-icons-check.d.ts +0 -6
  210. package/dist/icons/generated/si-check-alt-fill.d.ts +0 -6
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../../src/components/image-preview/index.ts"],"sourcesContent":["import '@/components/button'\nimport '@/components/icon'\n\nimport { html, LitElement, nothing, type PropertyValues, 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 modalSurface from '@/assets/modal-surface.css?inline'\nimport { lucideChevronLeft, lucideChevronRight, lucideMinus, lucidePlus, oouiClose, radixIconsReset } from '@/icons'\nimport { attachDragGesture, type DragGestureHandle } from '@/shared/gesture/drag-gesture'\nimport { clamp } from '@/shared/gesture/physics'\nimport {\n attachPinchGesture,\n type PinchGestureHandle,\n type PinchMoveInfo,\n type PinchStartInfo\n} from '@/shared/gesture/pinch-gesture'\nimport { defineNativeDialogPresence } from '@/shared/overlay/native-dialog-presence'\nimport { defineOpenOverlay, type OpenOverlayHandle } from '@/shared/overlay/open-overlay'\nimport { getFallbackOverlayRoot } from '@/shared/overlay/overlay-root'\nimport { findNearestTheme, findRootTheme } from '@/shared/overlay/theme-overlay-scope'\nimport { defineScrollLockLease } from '@/shared/scroll-lock/scroll-lock'\n\nimport style from './style.css?inline'\n\nexport interface ImagePreviewItem {\n src: string\n /** 无障碍替代文本;也用于图片加载失败时的回退展示。 */\n alt?: string\n}\n\nexport interface ImagePreviewOptions {\n images: ImagePreviewItem[]\n /** 初始图片索引,越界时钳制到有效区间。默认 0。 */\n index?: number\n /** 首尾循环切换。默认 true。 */\n loop?: boolean\n /** 用于解析最近 web-ui-theme 作用域的触发元素。 */\n target?: Element\n /** 显式挂载容器,优先级高于 target 和主题作用域。 */\n container?: HTMLElement\n /** 展示上一张 / 下一张按钮;仅在图片多于一张时渲染。默认 false。 */\n nav?: boolean\n /** 展示缩放工具条。默认 false。 */\n toolbar?: boolean\n /** 展示关闭按钮。默认 false。 */\n closable?: boolean\n /** 展示「当前 / 总数」指示器。默认 false。 */\n indicator?: boolean\n /**\n * 1x 且图片多于一张时,允许左右滑动切换图片:该手势接管整个拖拽,纵向位移被忽略\n * (不驱平移、不跟手),横向用于切图。放大后拖拽一律平移(纵横都跟)、不再切图。\n * 默认 false。\n */\n swipe?: boolean\n /** 打开期间不锁定页面滚动,语义与 `<web-ui-dialog>` 的 `noScrollLock` 一致。默认 false。 */\n noScrollLock?: boolean\n /** 点击图片以外的空白区域不关闭,语义与 `<web-ui-dialog>` 的 `noBackdropClose` 一致。默认 false。 */\n noBackdropClose?: boolean\n}\n\nexport interface ImagePreviewHandle {\n /** 当前图片索引;关闭后仍保留最后一次的值。 */\n readonly index: number\n /** 当前缩放倍率,区间 [1, 4];切换图片时重置为 1。 */\n readonly scale: number\n readonly images: readonly ImagePreviewItem[]\n /** 退场过渡结束、宿主已从 DOM 移除后兑现。 */\n readonly closed: Promise<void>\n next(): void\n prev(): void\n goTo(index: number): void\n zoomIn(): void\n zoomOut(): void\n resetZoom(): void\n close(): void\n}\n\ntype ResolvedImagePreviewOptions = Required<Omit<ImagePreviewOptions, 'target' | 'container'>>\n\nconst MIN_SCALE = 1\nconst MAX_SCALE = 4\nconst ZOOM_STEP = 0.5\n// 滚轮 deltaY(px) 到缩放的指数系数;每 120px 步进约放大 27%。\nconst WHEEL_ZOOM_SENSITIVITY = 0.002\n// 判定为拖拽(平移或滑动)而非点击的最小位移。\nconst PAN_MOVE_THRESHOLD = 3\n// 滑动切图的距离阈值 = 舞台宽度 × 该比例(取整),速度阈值任一满足即切图。\n// 用户决策:阈值参考舞台宽度百分比而非固定 px(48px 在 320px 舞台 ≈ 15%),\n// 不同舞台宽度下切图手感一致(窄屏更容易、宽屏要求更长距离)。\nconst SWIPE_DISTANCE_RATIO = 0.15\nconst SWIPE_VELOCITY = 320\n// 快速轻扫兜底:真实触摸事件流可能被合并/延迟稀释(CDP 取证:40px/167ms 的轻扫被\n// 100ms 速度窗口低估到 ~115-165px/s),单靠 320px/s 会把快速轻扫误判为回弹。方向明确\n// (位移达到小距离)且速度过半阈值时仍提交;速度取「窗口速度」与「整段位移平均速度」\n// 的较大者——后者对稀释的事件流鲁棒(CDP 复现下整段平均约 240px/s)。慢拖两种速度\n// 都趋近 0,不会误提交。\nconst SWIPE_FLICK_DISTANCE = 16\nconst SWIPE_FLICK_VELOCITY = 160\n// 滑入/回位的兜底时长:正常由 transform 的 transitionend 提前收尾;jsdom、无过渡\n// (prefers-reduced-motion)等场景没有 transitionend,按该时长兜底提交。\nconst SWIPE_SETTLE_MS = 320\n\n/**\n * 图像预览的内部宿主。对外只通过 `imagePreview()` 使用,因此不导出类、\n * 不注册 `HTMLElementTagNameMap`,避免形成声明式标签契约。\n *\n * 内部使用原生 `<dialog>.showModal()`,与 `<web-ui-dialog>` 共享\n * `native-dialog-presence` 与 `scroll-lock` 两个底层插件,而不是复用该组件:\n * 本组件需要自身铺满视口的 dialog(遮罩即 dialog 背景)与自有指针交互,\n * 与 dialog 组件的玻璃卡片 / 插槽契约不同源。\n */\n@customElement('web-ui-image-preview')\nclass WebUiImagePreview extends LitElement {\n static override styles = [unsafeCSS(glass), unsafeCSS(modalSurface), unsafeCSS(style)]\n\n @property({ attribute: false }) images: ImagePreviewItem[] = []\n @property({ attribute: false }) loop = true\n @property({ attribute: false }) nav = false\n @property({ attribute: false }) toolbar = false\n @property({ attribute: false }) closable = false\n @property({ attribute: false }) indicator = false\n @property({ attribute: false }) swipe = false\n @property({ attribute: false }) noScrollLock = false\n @property({ attribute: false }) noBackdropClose = false\n\n @state() private _open = false\n @state() private _index = 0\n @state() private _scale = MIN_SCALE\n @state() private _offsetX = 0\n @state() private _offsetY = 0\n /** 滑动跟手位移,只作用于左右方向;可叠加在平移位移之上。 */\n @state() private _swipeOffset = 0\n /** 滑入/回位过渡中:stage 挂 is-settling,启用轨道 transform 过渡。 */\n @state() private _swipeSettling = false\n @state() private _dragging = false\n\n /** 已加载完成的图片 src 集合;每张图首次 load/error 后淡入,切换回已加载图不再闪烁。 */\n private _loadedSources = new Set<string>()\n\n /** 相邻图方向:1 = 下一张(位于右侧),-1 = 上一张(位于左侧)。非响应式,随 _swipeOffset 一同更新。 */\n private _swipeDir: 1 | -1 | 0 = 0\n /** 当前滑动手势的起始时间戳;松手时与 endInfo.timeStamp 求整段平均速度(对稀释事件流鲁棒)。 */\n private _swipeStartTime = 0\n private _swipeSettleCommit = false\n private _swipeSettleDir: 1 | -1 = 1\n private _swipeSettleTimer: ReturnType<typeof setTimeout> | undefined\n\n private readonly _scrollLock = defineScrollLockLease().make()\n /*\n * 开启态浮层(issue #120 Block 1)。预览的 Escape 原本只走原生 <dialog> 的 cancel 事件,\n * 自己从不参与登记 —— 于是它既不是仲裁候选、又指望原生 cancel 兜底,而仲裁者一旦命中\n * 别的层就会 preventDefault 压掉那个 cancel:与任何已登记的层同时打开时,一次 Escape\n * 关掉的是下面那层,最上层的预览留在屏幕上。登记之后它与其它层同处一棵逻辑树。\n *\n * 没有惰性通道:预览没有 `no-escape-close` 这类策略,Escape 恒可关闭(与 `closable`\n * 只管关闭按钮一样,不表达「能否关闭」)。\n */\n private readonly _overlay = defineOpenOverlay().make({\n requestClose: () => this.close(),\n isConnected: () => this.isConnected\n })\n private _handle: OpenOverlayHandle | null = null\n private readonly _presence = defineNativeDialogPresence().make({\n getDialog: () => this.dialog,\n isConnected: () => this.isConnected,\n isOpen: () => this._open\n })\n\n private _dismissed = false\n private _gesture: DragGestureHandle | undefined\n private _swipeGesture = false\n private _panOriginX = 0\n private _panOriginY = 0\n private _dragged = false\n private _blankPointerDown = false\n private _pinch: PinchGestureHandle | undefined\n /** 双指手势起始倍率,以及起始两指中点所对应的图片局部(1x)坐标。 */\n private _pinchScale = MIN_SCALE\n private _pinchLocalX = 0\n private _pinchLocalY = 0\n\n private get dialog() {\n return this.shadowRoot?.querySelector('dialog') ?? null\n }\n\n private get _stage() {\n return this.shadowRoot?.querySelector<HTMLElement>('.wui-image-preview-stage') ?? null\n }\n\n private get _image() {\n return (\n this.shadowRoot?.querySelector<HTMLImageElement>(\n '.wui-image-preview-slide.is-current .wui-image-preview-image'\n ) ?? null\n )\n }\n\n get index(): number {\n return this._index\n }\n\n get scale(): number {\n return this._scale\n }\n\n configure(options: ResolvedImagePreviewOptions): void {\n this.images = options.images\n this.loop = options.loop\n this.nav = options.nav\n this.toolbar = options.toolbar\n this.closable = options.closable\n this.indicator = options.indicator\n this.swipe = options.swipe\n this.noScrollLock = options.noScrollLock\n this.noBackdropClose = options.noBackdropClose\n this._index = clamp(options.index, 0, Math.max(0, options.images.length - 1))\n }\n\n show(): void {\n if (this._open) return\n this._dismissed = false\n this._open = true\n }\n\n close(): void {\n if (!this._open) return\n this._endGesture()\n this._open = false\n }\n\n goTo(target: number): void {\n const count = this.images.length\n if (count === 0) return\n\n const next = this.loop ? ((target % count) + count) % count : clamp(target, 0, count - 1)\n if (next === this._index) return\n\n this._index = next\n this.resetZoom()\n // 轨道渲染所有图:目标图若已加载直接展示(无淡入闪烁),未加载由图自身 load 淡入。\n }\n\n next(): void {\n this.goTo(this._index + 1)\n }\n\n prev(): void {\n this.goTo(this._index - 1)\n }\n\n zoomIn(): void {\n this._setScale(this._scale + ZOOM_STEP)\n }\n\n zoomOut(): void {\n this._setScale(this._scale - ZOOM_STEP)\n }\n\n resetZoom(): void {\n if (this._scale === MIN_SCALE && this._offsetX === 0 && this._offsetY === 0) return\n this._scale = MIN_SCALE\n this._offsetX = 0\n this._offsetY = 0\n }\n\n override connectedCallback() {\n super.connectedCallback()\n // 重挂载对账:断连时 presence 与滚动锁已被 dispose/release,而 `_open` 未变化时\n // `updated()` 不会补跑任何 sync 分支。首次连接时 shadow 尚未渲染、`this.dialog`\n // 为 null,reconcile 内部直接返回;打开态的首次进入仍由 updated() 的\n // `props.has('_open')` 分支处理。\n this._presence.reconcile()\n this._syncScrollLock()\n this._attachPinch()\n this._reclaimIfOpen()\n }\n\n /*\n * 「重挂载恢复」的调用方一半:模块刻意不观察 DOM 连接状态,所以断连撤销登记之后,\n * 重连时仍有开启态就必须由组件重新声明。首次连接时 shadow 尚未渲染、`this.dialog`\n * 为 null,直接跳过;打开态的首次进入仍由 updated() 的 `props.has('_open')` 分支处理。\n */\n private _reclaimIfOpen() {\n if (!this._open || this._handle) return\n const dialog = this.dialog\n if (!dialog) return\n this._handle = this._overlay.claim(dialog, { ancestryFrom: this })\n }\n\n protected override firstUpdated() {\n this._attachPinch()\n }\n\n /**\n * 双指缩放手势挂载。`firstUpdated` 整个生命周期只跑一次,而断连时会 destroy\n * 并清空 `_pinch`,宿主被移出文档再接回后手势会永久失效——因此首连与重挂\n * 共用本方法,重挂时补挂。\n */\n private _attachPinch() {\n if (this._pinch) return\n const stage = this._stage\n if (!stage) return\n\n this._pinch = attachPinchGesture(stage, {\n onStart: this._handlePinchStart,\n onMove: this._handlePinchMove,\n onEnd: this._handlePinchEnd,\n onCancel: this._handlePinchCancel\n })\n }\n\n protected override updated(props: PropertyValues) {\n super.updated(props)\n if (!this.isConnected) return\n\n if (props.has('_open')) {\n this._presence.sync(this._open)\n if (this._open) {\n // presence.sync 内的 showModal() 把 dialog 提升进 top layer,和 dialog /\n // drawer 走同一条路径。dialog / drawer 上实测到的机制是:双击手势留下的活选区\n // 会被浏览器拿去和提升后的新布局重新解析,落进刚挂载的面板正文。脆弱的是\n // 「手势来源的活选区」,不是 dblclick 的判定窗口(把打开推迟 250ms 仍复现);\n // 选区由浏览器在 showModal() 调用内部生成,脚本没有任何 Selection API 调用,\n // 在 dblclick 上 preventDefault 也拦不住。\n //\n // 但**双击路径在本组件上不复现**:预览层自身是 user-select: none(见\n // style.css),重解析拿不到可落的文本。实测 native showModal() 刚返回时\n // 选区本就是 rangeCount === 0,既没有可见高亮,也没有残留的塌陷 range;\n // 且这与触发目标本身无关——换成一块可选中文本 div 当触发目标,仍是 0。\n //\n // 真正让这一行有意义的是另一条事实:showModal() 不会动打开前就已存在的选区。\n // 所以它清的是「先选中页面文本、再打开预览」这条路径,属防御性清理,同时让\n // 三个组件的打开行为保持一致(dialog / drawer 上这行是真修复,本组件上是\n // 兜底)。这里只清文档选区,不动 user-select。\n window.getSelection()?.removeAllRanges()\n }\n // 原生 dialog 登记为开启态浮层:Escape 仲裁据此判出最内层(issue #120 Block 1)。\n const dialog = this.dialog\n if (dialog) {\n if (this._open) {\n // 同一面板重新 claim = 新的一次开启:旧会话整体作废。\n this._handle?.release()\n this._handle = this._overlay.claim(dialog, { ancestryFrom: this })\n } else {\n this._handle?.release()\n this._handle = null\n }\n }\n // 无原生 dialog 支持或 dialog 未能打开时不会收到 close 事件,这里补齐退场结算。\n if (!this._open && !this.dialog?.open) queueMicrotask(() => this._notifyDismissed())\n }\n if (props.has('_open') || props.has('noScrollLock')) this._syncScrollLock()\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback()\n this._endGesture()\n this._pinch?.destroy()\n this._pinch = undefined\n this._presence.dispose()\n this._scrollLock.release()\n // 断连即撤销登记:层不留在全局注册表里,重连后由 _reclaimIfOpen 显式重新声明。\n this._handle?.release()\n this._handle = null\n }\n\n private _syncScrollLock() {\n this._scrollLock.sync(this._open && !this.noScrollLock)\n }\n\n private _notifyDismissed() {\n if (this._dismissed || this._open) return\n this._dismissed = true\n this.dispatchEvent(new CustomEvent('preview-dismissed'))\n }\n\n /**\n * 以锚点缩放:锚点是相对舞台中心的偏移,它覆盖的图片内容在缩放前后保持不动。\n * 滚轮传光标位置,两指传两指中点,工具栏与键盘传 (0, 0)(即视口中心)。\n */\n private _zoomAt(next: number, anchorX: number, anchorY: number) {\n const scale = clamp(next, MIN_SCALE, MAX_SCALE)\n if (scale === this._scale) return\n\n const ratio = scale / this._scale\n this._applyScale(scale, anchorX - (anchorX - this._offsetX) * ratio, anchorY - (anchorY - this._offsetY) * ratio)\n }\n\n private _applyScale(scale: number, offsetX: number, offsetY: number) {\n this._scale = scale\n if (scale === MIN_SCALE) {\n this._offsetX = 0\n this._offsetY = 0\n return\n }\n this._offsetX = offsetX\n this._offsetY = offsetY\n this._clampOffsets()\n }\n\n private _setScale(next: number) {\n this._zoomAt(next, 0, 0)\n }\n\n /** 舞台中心的视口坐标;所有缩放锚点都以它为原点。 */\n private _stageOrigin(): { x: number; y: number } {\n const stage = this._stage\n if (!stage) return { x: 0, y: 0 }\n const rect = stage.getBoundingClientRect()\n return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 }\n }\n\n /**\n * 平移边界 = 图片与舞台在缩放后「尺寸差」的一半。\n *\n * 图片比舞台大时它是「能露出多少边缘」,比舞台小时它是「能在视口内移动多远」——\n * 两种情形是同一个绝对差,所以 1x 也能拖动,且图片永远拖不出视口。\n * 图片只受 max-width/max-height 收缩(不放大),因此 offsetWidth/offsetHeight\n * 就是绘制尺寸,不受 CSS transform 影响。\n */\n private _offsetBounds(): { x: number; y: number } {\n const stage = this._stage\n const image = this._image\n if (!stage || !image) return { x: 0, y: 0 }\n\n const width = image.offsetWidth\n const height = image.offsetHeight\n if (!width || !height) return { x: 0, y: 0 }\n\n return {\n x: Math.abs(width * this._scale - stage.clientWidth) / 2,\n y: Math.abs(height * this._scale - stage.clientHeight) / 2\n }\n }\n\n /** 当前是否存在位移。1x 也能平移,因此「重置缩放」是否可用不能只看倍率。 */\n private get _isPanned() {\n return this._offsetX !== 0 || this._offsetY !== 0\n }\n\n private _clampOffsets() {\n const bounds = this._offsetBounds()\n this._offsetX = clamp(this._offsetX, -bounds.x, bounds.x)\n this._offsetY = clamp(this._offsetY, -bounds.y, bounds.y)\n }\n\n /**\n * 空白 = dialog 本体或未被图片 / 控件覆盖的舞台区域。\n *\n * 只能在 pointerdown(指针捕获生效前)判定:一旦舞台通过 setPointerCapture\n * 取得捕获,后续 click 的 target 会被重定向到舞台,用它判断会把「点图片」\n * 误判成「点空白」而关闭浮层。\n */\n private _isBlank(target: EventTarget | null): boolean {\n return target === this.dialog || target === this._stage\n }\n\n private _handleImageSettled = (event: Event) => {\n const image = event.currentTarget as HTMLImageElement | null\n if (!image) return\n this._markLoaded(image)\n this.requestUpdate()\n }\n\n /**\n * 登记加载完成的图片,键与 render 侧 `is-loaded` 的查询同源。\n *\n * 不能用 `image.src`:那是 IDL 属性,返回**相对 src 解析后的绝对 URL**,而查询用的是\n * `this.images[i].src`(调用方原始串)。相对 src 下两者永不相等 → `is-loaded` 永不\n * 施加 → 图片停在 `opacity: 0`,尽管 img 早已 `complete`。\n *\n * 所属下标由模板写在 `data-index` 上(与该 img 的 `src` 出自同一处),因此多图 /\n * lazy 渲染下不会错位。\n */\n private _markLoaded(image: HTMLImageElement): void {\n const src = this.images[Number(image.dataset.index)]?.src\n if (src !== undefined) this._loadedSources.add(src)\n }\n\n /*\n * 登记之后 Escape 由仲裁者接管(它在 capture 阶段 preventDefault,UA 因此不再派发原生\n * cancel),但本 handler **不可删**:任何到达 dialog 的 cancel 都要 preventDefault,\n * 把 top layer 保留到视觉退场结束,否则原生关闭会跳过退出动画。jsdom 与重挂载用例\n * 正是直接派发 cancel 来压这条断言。\n */\n private _handleCancel = (event: Event) => {\n // 保留 top layer 直到退出过渡完成,避免原生关闭跳过退出动画。\n event.preventDefault()\n this.close()\n }\n\n private _handleNativeClose = () => {\n this._notifyDismissed()\n }\n\n private _handleTransitionEnd = (event: TransitionEvent) => {\n this._presence.handleTransitionEnd(event)\n }\n\n private _handleKeydown = (event: KeyboardEvent) => {\n if (!this._open || event.defaultPrevented) return\n if (event.altKey || event.ctrlKey || event.metaKey) return\n\n switch (event.key) {\n case 'ArrowLeft':\n event.preventDefault()\n this.prev()\n break\n case 'ArrowRight':\n event.preventDefault()\n this.next()\n break\n case '+':\n case '=':\n event.preventDefault()\n this.zoomIn()\n break\n case '-':\n case '_':\n event.preventDefault()\n this.zoomOut()\n break\n case '0':\n event.preventDefault()\n this.resetZoom()\n break\n default:\n break\n }\n }\n\n private _handleWheel = (event: WheelEvent) => {\n if (!this._open) return\n\n event.preventDefault()\n // deltaMode 1 为按行滚动(Firefox),折算成像素后再套用同一系数。\n const delta = event.deltaMode === 1 ? event.deltaY * 16 : event.deltaY\n const origin = this._stageOrigin()\n this._zoomAt(\n this._scale * Math.exp(-delta * WHEEL_ZOOM_SENSITIVITY),\n event.clientX - origin.x,\n event.clientY - origin.y\n )\n }\n\n private _handleClick = (event: MouseEvent) => {\n if (!this._open) return\n\n const blank = this._blankPointerDown\n this._blankPointerDown = false\n if (!blank) return\n\n // detail 为 0 表示这次 click 不来自指针(键盘激活按钮、程序化 .click()),\n // 此时 pointerdown 起点可能是上一次指针交互的残留,不能据此判定遮罩点击。\n if (event.detail === 0) return\n\n // 拖拽(平移或滑动)结束后的 click 不再当作遮罩点击。\n if (this._dragged) {\n this._dragged = false\n return\n }\n if (this.noBackdropClose) return\n this.close()\n }\n\n private _handleDoubleClick = (event: MouseEvent) => {\n if (!this._open || event.target !== this._image) return\n if (this._scale > MIN_SCALE) this.resetZoom()\n else this._setScale(MAX_SCALE / 2)\n }\n\n /**\n * 双指接管时先中止可能已开始的单指平移/滑动,避免两套手势同时写 offset。\n * 手势起点在图片上的位置被记住,缩放与两指中点位移都以它为基准。\n */\n private _handlePinchStart = (info: PinchStartInfo) => {\n if (!this._open) return\n\n this._endGesture()\n this._dragging = true\n // 双指操作后浏览器不会补发 click,但混合输入的兼容 click 不应被当作遮罩点击。\n this._dragged = true\n\n const origin = this._stageOrigin()\n this._pinchScale = this._scale\n this._pinchLocalX = (info.centerX - origin.x - this._offsetX) / this._scale\n this._pinchLocalY = (info.centerY - origin.y - this._offsetY) / this._scale\n }\n\n private _handlePinchMove = (info: PinchMoveInfo) => {\n if (!this._open) return\n\n const scale = clamp(this._pinchScale * info.ratio, MIN_SCALE, MAX_SCALE)\n const origin = this._stageOrigin()\n this._applyScale(\n scale,\n info.centerX - origin.x - this._pinchLocalX * scale,\n info.centerY - origin.y - this._pinchLocalY * scale\n )\n }\n\n private _handlePinchEnd = () => {\n this._dragging = false\n }\n\n private _handlePinchCancel = () => {\n this._dragging = false\n }\n\n private _endGesture() {\n this._gesture?.destroy()\n this._gesture = undefined\n this._dragging = false\n this._cancelSwipeSettle()\n this._swipeDir = 0\n this._swipeOffset = 0\n }\n\n /** 轮播滑动的相邻图索引;loop 环绕,非 loop 越界返回 -1(表示没有可滑入的图)。 */\n private _adjacentIndex(dir: 1 | -1): number {\n const count = this.images.length\n if (count === 0) return -1\n if (this.loop) return (((this._index + dir) % count) + count) % count\n const target = this._index + dir\n return target >= 0 && target < count ? target : -1\n }\n\n /** 取消未完成的滑入/回位过渡(新手势、pointercancel、关闭等接管时)。 */\n private _cancelSwipeSettle() {\n if (this._swipeSettleTimer !== undefined) {\n clearTimeout(this._swipeSettleTimer)\n this._swipeSettleTimer = undefined\n }\n this._swipeSettling = false\n this._swipeSettleCommit = false\n this._swipeSettleDir = 1\n }\n\n /** 滑入/回位过渡结束:按目标提交索引切换,或复位到单图静止态。 */\n private _finishSwipeSettle() {\n if (this._swipeSettleTimer === undefined) return\n clearTimeout(this._swipeSettleTimer)\n this._swipeSettleTimer = undefined\n const commit = this._swipeSettleCommit\n const dir = this._swipeSettleDir\n this._swipeSettling = false\n this._swipeSettleCommit = false\n this._swipeDir = 0\n this._swipeOffset = 0\n if (commit) this._commitSwipeTo(dir)\n }\n\n /** 把当前索引切换到相邻图;相邻图在滑动期间已在 DOM 中呈现,提交后直接以已加载态展示,避免重复淡入闪烁。 */\n private _commitSwipeTo(dir: 1 | -1) {\n const target = this._adjacentIndex(dir)\n if (target < 0 || target === this._index) return\n this._index = target\n this.resetZoom()\n }\n\n /** 释放后的滑入/回位:把 _swipeOffset 从跟手位移过渡到目标位(越界滑入相邻图,否则回 0)。 */\n private _settleSwipe(deltaX: number, velocityX: number, endTime: number) {\n const dir = this._swipeDir\n const stageW = this._stage?.clientWidth ?? 0\n if (dir === 0 || stageW <= 0) {\n // 无横向位移或无布局(jsdom):直接复位。\n this._swipeOffset = 0\n return\n }\n const distanceThreshold = Math.max(1, Math.round(stageW * SWIPE_DISTANCE_RATIO))\n // 整段位移平均速度:事件流被合并/延迟稀释时,100ms 窗口速度只采到中后段而偏低,\n // 平均速度(整段位移 / 整段时间)对快速轻扫更鲁棒。合成事件时间戳相同/缺失时\n // 跨度不足 2ms,视为 0(与 drag-gesture 的速度守卫一致),慢拖不会误提交。\n const spanMs = endTime - this._swipeStartTime\n const fullSpanVelocity = spanMs >= 2 ? (deltaX / spanMs) * 1000 : 0\n const flickVelocity = Math.max(Math.abs(velocityX), Math.abs(fullSpanVelocity))\n const crossed =\n Math.abs(deltaX) >= distanceThreshold ||\n Math.abs(velocityX) >= SWIPE_VELOCITY ||\n (Math.abs(deltaX) >= SWIPE_FLICK_DISTANCE && flickVelocity >= SWIPE_FLICK_VELOCITY)\n const commit = crossed && this._adjacentIndex(dir) !== -1\n this._swipeSettling = true\n this._swipeSettleCommit = commit\n this._swipeSettleDir = dir\n // 过渡目标:越过阈值 → 轨道再滑一个舞台宽度让相邻图入位(相邻图本就在 ±100% 处,\n // 提交后新当前图回到轨道原点,视觉位置不变、无跳变);否则弹回原位。\n this._swipeOffset = commit ? -dir * stageW : 0\n this._swipeSettleTimer = setTimeout(() => this._finishSwipeSettle(), SWIPE_SETTLE_MS)\n }\n\n private _handleSwipeSettleEnd = (event: TransitionEvent) => {\n if (!this._swipeSettling || event.propertyName !== 'transform') return\n this._finishSwipeSettle()\n }\n\n private _panTo(deltaX: number, deltaY: number) {\n const bounds = this._offsetBounds()\n this._offsetX = clamp(this._panOriginX + deltaX, -bounds.x, bounds.x)\n this._offsetY = clamp(this._panOriginY + deltaY, -bounds.y, bounds.y)\n }\n\n /**\n * 平移与左右滑动共用 `attachDragGesture`:它把指针捕获推迟到确认拖拽之后,\n * 因此不会像立即捕获那样破坏图片自身的 click / dblclick 命中;\n * 拖拽过程中的窗口级监听同时兜住指针移出元素甚至移出视口的情况。\n *\n * 拖拽默认平移且不限方向,与倍率无关:放大后是查看被裁切的边缘,1x 是在视口内\n * 移动图片。唯一的例外是 `swipe` 独占 1x——未放大、开启 swipe 且多于一张图时,\n * 整个拖拽归切图(横向驱动轮播、纵向 delta 完全忽略,不做任何平移)。鼠标按住\n * 拖拽与单指拖拽走的是同一条 Pointer 路径。\n *\n * 监听挂在 dialog 而非舞台上:控件层里的按下不会经过舞台,挂在舞台会漏掉\n * 这些按下而留下过期的「起于空白」标记。\n */\n private _handlePointerDown = (event: PointerEvent) => {\n if (!this._open) return\n\n // 新手势接管:中止可能未完成的滑入/回位过渡并复位轮播状态。\n this._cancelSwipeSettle()\n this._swipeDir = 0\n this._swipeOffset = 0\n\n // 只有主指针左键才可能生成 click;副指针或其它键的按下不产生 click,\n // 若让它们覆盖标记,主指针随后释放时的 click 会拿副指针的命中结果误判遮罩点击。\n const primary = event.button === 0 && event.isPrimary !== false\n if (!primary) return\n\n // 指针捕获会把后续 click 的 target 重定向到捕获元素,因此在按下时(捕获生效前)\n // 记录真实命中元素,作为「是否起于空白区域」的唯一判据。\n this._blankPointerDown = this._isBlank(event.target)\n this._dragged = false\n\n const stage = this._stage\n if (!stage || (event.target !== stage && !stage.contains(event.target as Node))) return\n\n // swipe 独占 1x:只有未放大、开启 swipe 且多于一张图时,横向拖拽才归切图;\n // 其余情形拖拽一律平移,且不限方向(边界见 _offsetBounds)。\n this._swipeGesture = this._scale === MIN_SCALE && this.swipe && this.images.length > 1\n this._swipeStartTime = event.timeStamp\n this._panOriginX = this._offsetX\n this._panOriginY = this._offsetY\n\n this._gesture?.destroy()\n this._gesture = attachDragGesture(event, {\n // 不能用 axis: 'x':那会把以纵向为主的拖拽整体判定为「取消」,1x 下纵向就\n // 无法平移了。这里始终按 both 追踪,让 swipe 只接管横向分量。\n axis: 'both',\n threshold: PAN_MOVE_THRESHOLD,\n onMove: info => {\n if (this._swipeGesture) {\n // 横向跟手位移驱动轨道整体平移(单轨道轮播);方向随拖拽符号更新,\n // 轨道位移随 _swipeOffset 反转时自然换向。纵向 delta 完全忽略:\n // 该手势独占拖拽,不驱平移、不产生纵向跟手(放大态的 pan 不受影响)。\n this._swipeOffset = info.deltaX\n if (info.deltaX !== 0) this._swipeDir = info.deltaX < 0 ? 1 : -1\n } else this._panTo(info.deltaX, info.deltaY)\n },\n onEnd: info => {\n this._dragged = true\n this._dragging = false\n if (this._swipeGesture) this._settleSwipe(info.deltaX, info.velocityX, info.timeStamp)\n },\n onTap: () => {\n this._dragging = false\n },\n onCancel: () => {\n this._dragging = false\n this._cancelSwipeSettle()\n this._swipeDir = 0\n this._swipeOffset = 0\n }\n })\n this._dragging = true\n }\n\n override render() {\n const count = this.images.length\n const zoomed = this._scale > MIN_SCALE\n // 单轨道轮播(相邻图渲染):轨道只放当前图与左右相邻,当前图恒在轨道原点。\n // 相邻图用绝对定位放在 ±100%(= 舞台宽度)处,与当前图同尺寸同基线;loop\n // 环绕时首尾相邻恒在两侧,任何索引拖拽(含首尾环绕)相邻图都真实跟手,不会\n // 出现「越过轨道末端滑空」的空白(全量渲染轨道在 last→first 环绕时相邻图在\n // 远端,拖拽中间态必然空白)。\n // 轨道整体随 _swipeOffset 平移:松手越过阈值再滑一个舞台宽度让相邻图入位,\n // 否则弹回原点。图片自身只负责平移/缩放(swipe 只动轨道、不碰图片 transform,\n // 缩放锚点数学不变)。\n const prevIndex = count > 0 ? this._adjacentIndex(-1) : -1\n const nextIndex = count > 0 ? this._adjacentIndex(1) : -1\n const trackTransform = `translate3d(${this._swipeOffset}px, 0, 0)`\n // 缩放/平移只作用于当前图的 img:相邻 slide 永远 1x(scale(1)),放大态连纵向 pan\n // 也不跟随(pan 只动当前图),避免放大后相邻图被带大/带进视口「穿过来」。\n // 1x 非 swipe 的平移路径仍可纵向拖拽,相邻图共享 offsetY 保持行内对齐;swipe 生效\n // 期间纵向 delta 被忽略(offsetY 恒 0),相邻图同样不产生纵向跟手。\n const imageTransform = `translate3d(${this._offsetX}px, ${this._offsetY}px, 0) scale(${this._scale})`\n const neighborTransform = zoomed\n ? 'translate3d(0, 0, 0) scale(1)'\n : `translate3d(0, ${this._offsetY}px, 0) scale(1)`\n\n return html`\n <dialog\n aria-label=\"图片预览\"\n @cancel=${this._handleCancel}\n @close=${this._handleNativeClose}\n @pointerdown=${this._handlePointerDown}\n @click=${this._handleClick}\n @dblclick=${this._handleDoubleClick}\n @keydown=${this._handleKeydown}\n @wheel=${this._handleWheel}\n @transitionend=${this._handleTransitionEnd}\n >\n <div class=\"wui-image-preview-backdrop\" aria-hidden=\"true\"></div>\n <div class=\"wui-image-preview-content\">\n <div class=\"wui-image-preview-surface\">\n <div\n class=${classMap({\n 'wui-image-preview-stage': true,\n 'is-zoomed': zoomed,\n 'is-dragging': this._dragging,\n 'is-settling': this._swipeSettling\n })}\n >\n <div\n class=\"wui-image-preview-track\"\n style=${styleMap({ transform: trackTransform })}\n @transitionend=${this._handleSwipeSettleEnd}\n >\n ${\n prevIndex >= 0\n ? html`\n <div class=\"wui-image-preview-slide is-prev\" aria-hidden=\"true\">\n <img\n class=${classMap({\n 'wui-image-preview-image': true,\n 'is-loaded': this._loadedSources.has(this.images[prevIndex].src)\n })}\n data-index=${prevIndex}\n src=${this.images[prevIndex].src}\n alt=${this.images[prevIndex].alt ?? ''}\n draggable=\"false\"\n style=${styleMap({ transform: neighborTransform })}\n @load=${this._handleImageSettled}\n @error=${this._handleImageSettled}\n />\n </div>\n `\n : nothing\n }\n ${\n count > 0\n ? html`\n <div class=\"wui-image-preview-slide is-current\">\n <img\n class=${classMap({\n 'wui-image-preview-image': true,\n 'is-loaded': this._loadedSources.has(this.images[this._index].src)\n })}\n data-index=${this._index}\n src=${this.images[this._index].src}\n alt=${this.images[this._index].alt ?? ''}\n draggable=\"false\"\n style=${styleMap({ transform: imageTransform })}\n @load=${this._handleImageSettled}\n @error=${this._handleImageSettled}\n />\n </div>\n `\n : nothing\n }\n ${\n nextIndex >= 0\n ? html`\n <div class=\"wui-image-preview-slide is-next\" aria-hidden=\"true\">\n <img\n class=${classMap({\n 'wui-image-preview-image': true,\n 'is-loaded': this._loadedSources.has(this.images[nextIndex].src)\n })}\n data-index=${nextIndex}\n src=${this.images[nextIndex].src}\n alt=${this.images[nextIndex].alt ?? ''}\n draggable=\"false\"\n style=${styleMap({ transform: neighborTransform })}\n @load=${this._handleImageSettled}\n @error=${this._handleImageSettled}\n />\n </div>\n `\n : nothing\n }\n </div>\n </div>\n </div>\n <div class=\"wui-image-preview-controls\">\n ${\n this.indicator\n ? html`<span class=\"wui-image-preview-counter wui-glass\" aria-live=\"polite\"\n >${this._index + 1} / ${count}</span\n >`\n : nothing\n }\n ${\n this.closable\n ? html`\n <web-ui-button\n class=\"wui-image-preview-close\"\n variant=\"glass\"\n icon\n size=\"36\"\n aria-label=\"关闭\"\n @click=${this.close}\n >\n <web-ui-icon size=\"16\" .icon=${oouiClose}></web-ui-icon>\n </web-ui-button>\n `\n : nothing\n }\n ${\n this.nav && count > 1\n ? html`\n <web-ui-button\n class=\"wui-image-preview-nav wui-image-preview-nav-prev\"\n variant=\"glass\"\n icon\n size=\"44\"\n aria-label=\"上一张\"\n ?disabled=${!this.loop && this._index === 0}\n @click=${this.prev}\n >\n <web-ui-icon size=\"20\" .icon=${lucideChevronLeft}></web-ui-icon>\n </web-ui-button>\n <web-ui-button\n class=\"wui-image-preview-nav wui-image-preview-nav-next\"\n variant=\"glass\"\n icon\n size=\"44\"\n aria-label=\"下一张\"\n ?disabled=${!this.loop && this._index === count - 1}\n @click=${this.next}\n >\n <web-ui-icon size=\"20\" .icon=${lucideChevronRight}></web-ui-icon>\n </web-ui-button>\n `\n : nothing\n }\n ${\n this.toolbar\n ? html`\n <div class=\"wui-image-preview-toolbar wui-glass\">\n <web-ui-button\n variant=\"glass\"\n icon\n size=\"30\"\n aria-label=\"缩小\"\n ?disabled=${this._scale <= MIN_SCALE}\n @click=${this.zoomOut}\n >\n <web-ui-icon size=\"16\" .icon=${lucideMinus}></web-ui-icon>\n </web-ui-button>\n <span class=\"wui-image-preview-scale\">${Math.round(this._scale * 100)}%</span>\n <web-ui-button\n variant=\"glass\"\n icon\n size=\"30\"\n aria-label=\"放大\"\n ?disabled=${this._scale >= MAX_SCALE}\n @click=${this.zoomIn}\n >\n <web-ui-icon size=\"16\" .icon=${lucidePlus}></web-ui-icon>\n </web-ui-button>\n <web-ui-button\n variant=\"glass\"\n icon\n size=\"30\"\n aria-label=\"重置缩放\"\n ?disabled=${this._scale <= MIN_SCALE && !this._isPanned}\n @click=${this.resetZoom}\n >\n <web-ui-icon size=\"16\" .icon=${radixIconsReset}></web-ui-icon>\n </web-ui-button>\n </div>\n `\n : nothing\n }\n </div>\n </div>\n </dialog>\n `\n }\n}\n\n/**\n * 打开一个命令式图片预览。\n *\n * 组件挂载到目标 `web-ui-theme` 的 overlay 容器(无主题作用域时回退到全局\n * fallback root),返回的句柄是唯一的控制入口。所有展示类选项默认关闭,\n * 默认只渲染图片本身。\n */\nexport function imagePreview(options: ImagePreviewOptions): ImagePreviewHandle {\n const images = (options.images ?? []).map(item => ({ src: item.src, alt: item.alt ?? '' }))\n if (images.length === 0) {\n throw new Error('[web-ui-image-preview] imagePreview requires at least one image')\n }\n\n const theme = options.target ? findNearestTheme(options.target) : findRootTheme()\n const container = options.container ?? theme?.getOverlayRoot() ?? getFallbackOverlayRoot()\n\n const element = document.createElement('web-ui-image-preview') as WebUiImagePreview\n element.configure({\n images,\n index: options.index ?? 0,\n loop: options.loop ?? true,\n nav: options.nav ?? false,\n toolbar: options.toolbar ?? false,\n closable: options.closable ?? false,\n indicator: options.indicator ?? false,\n swipe: options.swipe ?? false,\n noScrollLock: options.noScrollLock ?? false,\n noBackdropClose: options.noBackdropClose ?? false\n })\n\n let settle: (() => void) | undefined\n const closed = new Promise<void>(resolve => {\n settle = resolve\n })\n\n element.addEventListener(\n 'preview-dismissed',\n () => {\n element.remove()\n settle?.()\n settle = undefined\n },\n { once: true }\n )\n\n container.appendChild(element)\n element.show()\n\n return {\n get index() {\n return element.index\n },\n get scale() {\n return element.scale\n },\n get images() {\n return element.images\n },\n get closed() {\n return closed\n },\n next: () => element.next(),\n prev: () => element.prev(),\n goTo: (index: number) => element.goTo(index),\n zoomIn: () => element.zoomIn(),\n zoomOut: () => element.zoomOut(),\n resetZoom: () => element.resetZoom(),\n close: () => element.close()\n }\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../../src/components/image-preview/index.ts"],"sourcesContent":["import '@/components/button'\nimport '@/components/icon'\n\nimport { html, LitElement, nothing, type PropertyValues, 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 modalSurface from '@/assets/modal-surface.css?inline'\nimport glass from '@/classes/glass.css?inline'\nimport { lucideChevronLeft, lucideChevronRight, lucideMinus, lucidePlus, oouiClose, radixIconsReset } from '@/icons'\nimport { attachDragGesture, type DragGestureHandle } from '@/shared/gesture/drag-gesture'\nimport { clamp } from '@/shared/gesture/physics'\nimport {\n attachPinchGesture,\n type PinchGestureHandle,\n type PinchMoveInfo,\n type PinchStartInfo\n} from '@/shared/gesture/pinch-gesture'\nimport { defineNativeDialogPresence } from '@/shared/overlay/native-dialog-presence'\nimport { defineOpenOverlay, type OpenOverlayHandle } from '@/shared/overlay/open-overlay'\nimport { getFallbackOverlayRoot } from '@/shared/overlay/overlay-root'\nimport { findNearestTheme, findRootTheme } from '@/shared/overlay/theme-overlay-scope'\nimport { defineScrollLockLease } from '@/shared/scroll-lock/scroll-lock'\n\nimport style from './style.css?inline'\n\nexport interface ImagePreviewItem {\n src: string\n /** 无障碍替代文本;也用于图片加载失败时的回退展示。 */\n alt?: string\n}\n\nexport interface ImagePreviewOptions {\n images: ImagePreviewItem[]\n /** 初始图片索引,越界时钳制到有效区间。默认 0。 */\n index?: number\n /** 首尾循环切换。默认 true。 */\n loop?: boolean\n /** 用于解析最近 web-ui-theme 作用域的触发元素。 */\n target?: Element\n /** 显式挂载容器,优先级高于 target 和主题作用域。 */\n container?: HTMLElement\n /** 展示上一张 / 下一张 button;仅在图片多于一张时渲染。默认 false。 */\n nav?: boolean\n /** 展示缩放工具条。默认 false。 */\n toolbar?: boolean\n /** 展示关闭 button。默认 false。 */\n closable?: boolean\n /** 展示「当前 / 总数」indicator。默认 false。 */\n indicator?: boolean\n /**\n * 1x 且图片多于一张时,允许左右滑动切换图片:该手势接管整个拖拽,纵向位移被忽略\n * (不驱平移、不跟手),横向用于切图。放大后拖拽一律平移(纵横都跟)、不再切图。\n * 默认 false。\n */\n swipe?: boolean\n /** 打开期间不锁定页面滚动,语义与 `<web-ui-dialog>` 的 `noScrollLock` 一致。默认 false。 */\n noScrollLock?: boolean\n /** 点击图片以外的空白区域不关闭,语义与 `<web-ui-dialog>` 的 `noBackdropClose` 一致。默认 false。 */\n noBackdropClose?: boolean\n}\n\nexport interface ImagePreviewHandle {\n /** 当前图片索引;关闭后仍保留最后一次的值。 */\n readonly index: number\n /** 当前缩放倍率,区间 [1, 4];切换图片时重置为 1。 */\n readonly scale: number\n readonly images: readonly ImagePreviewItem[]\n /** 退场过渡结束、宿主已从 DOM 移除后兑现。 */\n readonly closed: Promise<void>\n next(): void\n prev(): void\n goTo(index: number): void\n zoomIn(): void\n zoomOut(): void\n resetZoom(): void\n close(): void\n}\n\ntype ResolvedImagePreviewOptions = Required<Omit<ImagePreviewOptions, 'target' | 'container'>>\n\nconst MIN_SCALE = 1\nconst MAX_SCALE = 4\nconst ZOOM_STEP = 0.5\n// 滚轮 deltaY(px) 到缩放的指数系数;每 120px 步进约放大 27%。\nconst WHEEL_ZOOM_SENSITIVITY = 0.002\n// 判定为拖拽(平移或滑动)而非点击的最小位移。\nconst PAN_MOVE_THRESHOLD = 3\n// 滑动切图的距离阈值 = 舞台宽度 × 该比例(取整),速度阈值任一满足即切图。\n// 用户决策:阈值参考舞台宽度百分比而非固定 px(48px 在 320px 舞台 ≈ 15%),\n// 不同舞台宽度下切图手感一致(窄屏更容易、宽屏要求更长距离)。\nconst SWIPE_DISTANCE_RATIO = 0.15\nconst SWIPE_VELOCITY = 320\n// 快速轻扫兜底:真实触摸事件流可能被合并/延迟稀释(CDP 取证:40px/167ms 的轻扫被\n// 100ms 速度窗口低估到 ~115-165px/s),单靠 320px/s 会把快速轻扫误判为回弹。方向明确\n// (位移达到小距离)且速度过半阈值时仍提交;速度取「窗口速度」与「整段位移平均速度」\n// 的较大者——后者对稀释的事件流鲁棒(CDP 复现下整段平均约 240px/s)。慢拖两种速度\n// 都趋近 0,不会误提交。\nconst SWIPE_FLICK_DISTANCE = 16\nconst SWIPE_FLICK_VELOCITY = 160\n// 滑入/回位的兜底时长:正常由 transform 的 transitionend 提前收尾;jsdom、无过渡\n// (prefers-reduced-motion)等场景没有 transitionend,按该时长兜底提交。\nconst SWIPE_SETTLE_MS = 320\n\n/**\n * 图像预览的内部宿主。对外只通过 `imagePreview()` 使用,因此不导出类、\n * 不注册 `HTMLElementTagNameMap`,避免形成声明式 tag 契约。\n *\n * 内部使用原生 `<dialog>.showModal()`,与 `<web-ui-dialog>` 共享\n * `native-dialog-presence` 与 `scroll-lock` 两个底层插件,而不是复用该组件:\n * 本组件需要自身铺满视口的 dialog(backdrop 即 dialog 背景)与自有指针交互,\n * 与 dialog 组件的玻璃卡片 / 插槽契约不同源。\n */\n@customElement('web-ui-image-preview')\nclass WebUiImagePreview extends LitElement {\n static override styles = [unsafeCSS(glass), unsafeCSS(modalSurface), unsafeCSS(style)]\n\n @property({ attribute: false }) images: ImagePreviewItem[] = []\n @property({ attribute: false }) loop = true\n @property({ attribute: false }) nav = false\n @property({ attribute: false }) toolbar = false\n @property({ attribute: false }) closable = false\n @property({ attribute: false }) indicator = false\n @property({ attribute: false }) swipe = false\n @property({ attribute: false }) noScrollLock = false\n @property({ attribute: false }) noBackdropClose = false\n\n @state() private _open = false\n @state() private _index = 0\n @state() private _scale = MIN_SCALE\n @state() private _offsetX = 0\n @state() private _offsetY = 0\n /** 滑动跟手位移,只作用于左右方向;可叠加在平移位移之上。 */\n @state() private _swipeOffset = 0\n /** 滑入/回位过渡中:stage 挂 is-settling,启用 track transform 过渡。 */\n @state() private _swipeSettling = false\n @state() private _dragging = false\n\n /** 已加载完成的图片 src 集合;每张图首次 load/error 后淡入,切换回已加载图不再闪烁。 */\n private _loadedSources = new Set<string>()\n\n /** 相邻图方向:1 = 下一张(位于右侧),-1 = 上一张(位于左侧)。非响应式,随 _swipeOffset 一同更新。 */\n private _swipeDir: 1 | -1 | 0 = 0\n /** 当前滑动手势的起始时间戳;松手时与 endInfo.timeStamp 求整段平均速度(对稀释事件流鲁棒)。 */\n private _swipeStartTime = 0\n private _swipeSettleCommit = false\n private _swipeSettleDir: 1 | -1 = 1\n private _swipeSettleTimer: ReturnType<typeof setTimeout> | undefined\n\n private readonly _scrollLock = defineScrollLockLease().make()\n /*\n * 开启态 overlay(issue #120 Block 1)。预览的 Escape 原本只走原生 <dialog> 的 cancel 事件,\n * 自己从不参与登记 —— 于是它既不是仲裁候选、又指望原生 cancel 兜底,而仲裁者一旦命中\n * 别的层就会 preventDefault 压掉那个 cancel:与任何已登记的层同时打开时,一次 Escape\n * 关掉的是下面那层,最上层的预览留在屏幕上。登记之后它与其它层同处一棵逻辑树。\n *\n * 没有惰性通道:预览没有 `no-escape-close` 这类策略,Escape 恒可关闭(与 `closable`\n * 只管关闭 button 一样,不表达「能否关闭」)。\n */\n private readonly _overlay = defineOpenOverlay().make({\n requestClose: () => this.close(),\n isConnected: () => this.isConnected\n })\n private _handle: OpenOverlayHandle | null = null\n private readonly _presence = defineNativeDialogPresence().make({\n getDialog: () => this.dialog,\n isConnected: () => this.isConnected,\n isOpen: () => this._open\n })\n\n private _dismissed = false\n private _gesture: DragGestureHandle | undefined\n private _swipeGesture = false\n private _panOriginX = 0\n private _panOriginY = 0\n private _dragged = false\n private _blankPointerDown = false\n private _pinch: PinchGestureHandle | undefined\n /** 双指手势起始倍率,以及起始两指中点所对应的图片局部(1x)坐标。 */\n private _pinchScale = MIN_SCALE\n private _pinchLocalX = 0\n private _pinchLocalY = 0\n\n private get dialog() {\n return this.shadowRoot?.querySelector('dialog') ?? null\n }\n\n private get _stage() {\n return this.shadowRoot?.querySelector<HTMLElement>('.wui-image-preview-stage') ?? null\n }\n\n private get _image() {\n return (\n this.shadowRoot?.querySelector<HTMLImageElement>(\n '.wui-image-preview-slide.is-current .wui-image-preview-image'\n ) ?? null\n )\n }\n\n get index(): number {\n return this._index\n }\n\n get scale(): number {\n return this._scale\n }\n\n configure(options: ResolvedImagePreviewOptions): void {\n this.images = options.images\n this.loop = options.loop\n this.nav = options.nav\n this.toolbar = options.toolbar\n this.closable = options.closable\n this.indicator = options.indicator\n this.swipe = options.swipe\n this.noScrollLock = options.noScrollLock\n this.noBackdropClose = options.noBackdropClose\n this._index = clamp(options.index, 0, Math.max(0, options.images.length - 1))\n }\n\n show(): void {\n if (this._open) return\n this._dismissed = false\n this._open = true\n }\n\n close(): void {\n if (!this._open) return\n this._endGesture()\n this._open = false\n }\n\n goTo(target: number): void {\n const count = this.images.length\n if (count === 0) return\n\n const next = this.loop ? ((target % count) + count) % count : clamp(target, 0, count - 1)\n if (next === this._index) return\n\n this._index = next\n this.resetZoom()\n // track 渲染所有图:目标图若已加载直接展示(无淡入闪烁),未加载由图自身 load 淡入。\n }\n\n next(): void {\n this.goTo(this._index + 1)\n }\n\n prev(): void {\n this.goTo(this._index - 1)\n }\n\n zoomIn(): void {\n this._setScale(this._scale + ZOOM_STEP)\n }\n\n zoomOut(): void {\n this._setScale(this._scale - ZOOM_STEP)\n }\n\n resetZoom(): void {\n if (this._scale === MIN_SCALE && this._offsetX === 0 && this._offsetY === 0) return\n this._scale = MIN_SCALE\n this._offsetX = 0\n this._offsetY = 0\n }\n\n override connectedCallback() {\n super.connectedCallback()\n // 重挂载对账:断连时 presence 与滚动锁已被 dispose/release,而 `_open` 未变化时\n // `updated()` 不会补跑任何 sync 分支。首次连接时 shadow 尚未渲染、`this.dialog`\n // 为 null,reconcile 内部直接返回;打开态的首次进入仍由 updated() 的\n // `props.has('_open')` 分支处理。\n this._presence.reconcile()\n this._syncScrollLock()\n this._attachPinch()\n this._reclaimIfOpen()\n }\n\n /*\n * 「重挂载恢复」的调用方一半:模块刻意不观察 DOM 连接状态,所以断连撤销登记之后,\n * 重连时仍有开启态就必须由组件重新声明。首次连接时 shadow 尚未渲染、`this.dialog`\n * 为 null,直接跳过;打开态的首次进入仍由 updated() 的 `props.has('_open')` 分支处理。\n */\n private _reclaimIfOpen() {\n if (!this._open || this._handle) return\n const dialog = this.dialog\n if (!dialog) return\n this._handle = this._overlay.claim(dialog, { ancestryFrom: this })\n }\n\n protected override firstUpdated() {\n this._attachPinch()\n }\n\n /**\n * 双指缩放手势挂载。`firstUpdated` 整个生命周期只跑一次,而断连时会 destroy\n * 并清空 `_pinch`,宿主被移出文档再接回后手势会永久失效——因此首连与重挂\n * 共用本方法,重挂时补挂。\n */\n private _attachPinch() {\n if (this._pinch) return\n const stage = this._stage\n if (!stage) return\n\n this._pinch = attachPinchGesture(stage, {\n onStart: this._handlePinchStart,\n onMove: this._handlePinchMove,\n onEnd: this._handlePinchEnd,\n onCancel: this._handlePinchCancel\n })\n }\n\n protected override updated(props: PropertyValues) {\n super.updated(props)\n if (!this.isConnected) return\n\n if (props.has('_open')) {\n this._presence.sync(this._open)\n if (this._open) {\n // presence.sync 内的 showModal() 把 dialog 提升进 top layer,和 dialog /\n // drawer 走同一条路径。dialog / drawer 上实测到的机制是:双击手势留下的活选区\n // 会被浏览器拿去和提升后的新布局重新解析,落进刚挂载的 panel 正文。脆弱的是\n // 「手势来源的活选区」,不是 dblclick 的判定窗口(把打开推迟 250ms 仍复现);\n // 选区由浏览器在 showModal() 调用内部生成,脚本没有任何 Selection API 调用,\n // 在 dblclick 上 preventDefault 也拦不住。\n //\n // 但**双击路径在本组件上不复现**:预览层自身是 user-select: none(见\n // style.css),重解析拿不到可落的文本。实测 native showModal() 刚返回时\n // 选区本就是 rangeCount === 0,既没有可见高亮,也没有残留的塌陷 range;\n // 且这与触发目标本身无关——换成一块可选中文本 div 当触发目标,仍是 0。\n //\n // 真正让这一行有意义的是另一条事实:showModal() 不会动打开前就已存在的选区。\n // 所以它清的是「先选中页面文本、再打开预览」这条路径,属防御性清理,同时让\n // 三个组件的打开行为保持一致(dialog / drawer 上这行是真修复,本组件上是\n // 兜底)。这里只清文档选区,不动 user-select。\n window.getSelection()?.removeAllRanges()\n }\n // 原生 dialog 登记为开启态 overlay:Escape 仲裁据此判出最内层(issue #120 Block 1)。\n const dialog = this.dialog\n if (dialog) {\n if (this._open) {\n // 同一 panel 重新 claim = 新的一次开启:旧会话整体作废。\n this._handle?.release()\n this._handle = this._overlay.claim(dialog, { ancestryFrom: this })\n } else {\n this._handle?.release()\n this._handle = null\n }\n }\n // 无原生 dialog 支持或 dialog 未能打开时不会收到 close 事件,这里补齐退场结算。\n if (!this._open && !this.dialog?.open) queueMicrotask(() => this._notifyDismissed())\n }\n if (props.has('_open') || props.has('noScrollLock')) this._syncScrollLock()\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback()\n this._endGesture()\n this._pinch?.destroy()\n this._pinch = undefined\n this._presence.dispose()\n this._scrollLock.release()\n // 断连即撤销登记:层不留在全局注册表里,重连后由 _reclaimIfOpen 显式重新声明。\n this._handle?.release()\n this._handle = null\n }\n\n private _syncScrollLock() {\n this._scrollLock.sync(this._open && !this.noScrollLock)\n }\n\n private _notifyDismissed() {\n if (this._dismissed || this._open) return\n this._dismissed = true\n this.dispatchEvent(new CustomEvent('preview-dismissed'))\n }\n\n /**\n * 以锚点缩放:锚点是相对舞台中心的偏移,它覆盖的图片内容在缩放前后保持不动。\n * 滚轮传光标位置,两指传两指中点,工具栏与键盘传 (0, 0)(即视口中心)。\n */\n private _zoomAt(next: number, anchorX: number, anchorY: number) {\n const scale = clamp(next, MIN_SCALE, MAX_SCALE)\n if (scale === this._scale) return\n\n const ratio = scale / this._scale\n this._applyScale(scale, anchorX - (anchorX - this._offsetX) * ratio, anchorY - (anchorY - this._offsetY) * ratio)\n }\n\n private _applyScale(scale: number, offsetX: number, offsetY: number) {\n this._scale = scale\n if (scale === MIN_SCALE) {\n this._offsetX = 0\n this._offsetY = 0\n return\n }\n this._offsetX = offsetX\n this._offsetY = offsetY\n this._clampOffsets()\n }\n\n private _setScale(next: number) {\n this._zoomAt(next, 0, 0)\n }\n\n /** 舞台中心的视口坐标;所有缩放锚点都以它为原点。 */\n private _stageOrigin(): { x: number; y: number } {\n const stage = this._stage\n if (!stage) return { x: 0, y: 0 }\n const rect = stage.getBoundingClientRect()\n return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 }\n }\n\n /**\n * 平移边界 = 图片与舞台在缩放后「尺寸差」的一半。\n *\n * 图片比舞台大时它是「能露出多少边缘」,比舞台小时它是「能在视口内移动多远」——\n * 两种情形是同一个绝对差,所以 1x 也能拖动,且图片永远拖不出视口。\n * 图片只受 max-width/max-height 收缩(不放大),因此 offsetWidth/offsetHeight\n * 就是绘制尺寸,不受 CSS transform 影响。\n */\n private _offsetBounds(): { x: number; y: number } {\n const stage = this._stage\n const image = this._image\n if (!stage || !image) return { x: 0, y: 0 }\n\n const width = image.offsetWidth\n const height = image.offsetHeight\n if (!width || !height) return { x: 0, y: 0 }\n\n return {\n x: Math.abs(width * this._scale - stage.clientWidth) / 2,\n y: Math.abs(height * this._scale - stage.clientHeight) / 2\n }\n }\n\n /** 当前是否存在位移。1x 也能平移,因此「重置缩放」是否可用不能只看倍率。 */\n private get _isPanned() {\n return this._offsetX !== 0 || this._offsetY !== 0\n }\n\n private _clampOffsets() {\n const bounds = this._offsetBounds()\n this._offsetX = clamp(this._offsetX, -bounds.x, bounds.x)\n this._offsetY = clamp(this._offsetY, -bounds.y, bounds.y)\n }\n\n /**\n * 空白 = dialog 本体或未被图片 / 控件覆盖的舞台区域。\n *\n * 只能在 pointerdown(指针捕获生效前)判定:一旦舞台通过 setPointerCapture\n * 取得捕获,后续 click 的 target 会被重定向到舞台,用它判断会把「点图片」\n * 误判成「点空白」而关闭 overlay。\n */\n private _isBlank(target: EventTarget | null): boolean {\n return target === this.dialog || target === this._stage\n }\n\n private _handleImageSettled = (event: Event) => {\n const image = event.currentTarget as HTMLImageElement | null\n if (!image) return\n this._markLoaded(image)\n this.requestUpdate()\n }\n\n /**\n * 登记加载完成的图片,键与 render 侧 `is-loaded` 的查询同源。\n *\n * 不能用 `image.src`:那是 IDL 属性,返回**相对 src 解析后的绝对 URL**,而查询用的是\n * `this.images[i].src`(调用方原始串)。相对 src 下两者永不相等 → `is-loaded` 永不\n * 施加 → 图片停在 `opacity: 0`,尽管 img 早已 `complete`。\n *\n * 所属下标由模板写在 `data-index` 上(与该 img 的 `src` 出自同一处),因此多图 /\n * lazy 渲染下不会错位。\n */\n private _markLoaded(image: HTMLImageElement): void {\n const src = this.images[Number(image.dataset.index)]?.src\n if (src !== undefined) this._loadedSources.add(src)\n }\n\n /*\n * 登记之后 Escape 由仲裁者接管(它在 capture 阶段 preventDefault,UA 因此不再派发原生\n * cancel),但本 handler **不可删**:任何到达 dialog 的 cancel 都要 preventDefault,\n * 把 top layer 保留到视觉退场结束,否则原生关闭会跳过退出动画。jsdom 与重挂载用例\n * 正是直接派发 cancel 来压这条断言。\n */\n private _handleCancel = (event: Event) => {\n // 保留 top layer 直到退出过渡完成,避免原生关闭跳过退出动画。\n event.preventDefault()\n this.close()\n }\n\n private _handleNativeClose = () => {\n this._notifyDismissed()\n }\n\n private _handleTransitionEnd = (event: TransitionEvent) => {\n this._presence.handleTransitionEnd(event)\n }\n\n private _handleKeydown = (event: KeyboardEvent) => {\n if (!this._open || event.defaultPrevented) return\n if (event.altKey || event.ctrlKey || event.metaKey) return\n\n switch (event.key) {\n case 'ArrowLeft':\n event.preventDefault()\n this.prev()\n break\n case 'ArrowRight':\n event.preventDefault()\n this.next()\n break\n case '+':\n case '=':\n event.preventDefault()\n this.zoomIn()\n break\n case '-':\n case '_':\n event.preventDefault()\n this.zoomOut()\n break\n case '0':\n event.preventDefault()\n this.resetZoom()\n break\n default:\n break\n }\n }\n\n private _handleWheel = (event: WheelEvent) => {\n if (!this._open) return\n\n event.preventDefault()\n // deltaMode 1 为按行滚动(Firefox),折算成像素后再套用同一系数。\n const delta = event.deltaMode === 1 ? event.deltaY * 16 : event.deltaY\n const origin = this._stageOrigin()\n this._zoomAt(\n this._scale * Math.exp(-delta * WHEEL_ZOOM_SENSITIVITY),\n event.clientX - origin.x,\n event.clientY - origin.y\n )\n }\n\n private _handleClick = (event: MouseEvent) => {\n if (!this._open) return\n\n const blank = this._blankPointerDown\n this._blankPointerDown = false\n if (!blank) return\n\n // detail 为 0 表示这次 click 不来自指针(键盘激活 button、程序化 .click()),\n // 此时 pointerdown 起点可能是上一次指针交互的残留,不能据此判定 backdrop 点击。\n if (event.detail === 0) return\n\n // 拖拽(平移或滑动)结束后的 click 不再当作 backdrop 点击。\n if (this._dragged) {\n this._dragged = false\n return\n }\n if (this.noBackdropClose) return\n this.close()\n }\n\n private _handleDoubleClick = (event: MouseEvent) => {\n if (!this._open || event.target !== this._image) return\n if (this._scale > MIN_SCALE) this.resetZoom()\n else this._setScale(MAX_SCALE / 2)\n }\n\n /**\n * 双指接管时先中止可能已开始的单指平移/滑动,避免两套手势同时写 offset。\n * 手势起点在图片上的位置被记住,缩放与两指中点位移都以它为基准。\n */\n private _handlePinchStart = (info: PinchStartInfo) => {\n if (!this._open) return\n\n this._endGesture()\n this._dragging = true\n // 双指操作后浏览器不会补发 click,但混合输入的兼容 click 不应被当作 backdrop 点击。\n this._dragged = true\n\n const origin = this._stageOrigin()\n this._pinchScale = this._scale\n this._pinchLocalX = (info.centerX - origin.x - this._offsetX) / this._scale\n this._pinchLocalY = (info.centerY - origin.y - this._offsetY) / this._scale\n }\n\n private _handlePinchMove = (info: PinchMoveInfo) => {\n if (!this._open) return\n\n const scale = clamp(this._pinchScale * info.ratio, MIN_SCALE, MAX_SCALE)\n const origin = this._stageOrigin()\n this._applyScale(\n scale,\n info.centerX - origin.x - this._pinchLocalX * scale,\n info.centerY - origin.y - this._pinchLocalY * scale\n )\n }\n\n private _handlePinchEnd = () => {\n this._dragging = false\n }\n\n private _handlePinchCancel = () => {\n this._dragging = false\n }\n\n private _endGesture() {\n this._gesture?.destroy()\n this._gesture = undefined\n this._dragging = false\n this._cancelSwipeSettle()\n this._swipeDir = 0\n this._swipeOffset = 0\n }\n\n /** 轮播滑动的相邻图索引;单图没有相邻图,多图 loop 环绕,非 loop 越界返回 -1。 */\n private _adjacentIndex(dir: 1 | -1): number {\n const count = this.images.length\n if (count <= 1) return -1\n if (this.loop) return (((this._index + dir) % count) + count) % count\n const target = this._index + dir\n return target >= 0 && target < count ? target : -1\n }\n\n /** 取消未完成的滑入/回位过渡(新手势、pointercancel、关闭等接管时)。 */\n private _cancelSwipeSettle() {\n if (this._swipeSettleTimer !== undefined) {\n clearTimeout(this._swipeSettleTimer)\n this._swipeSettleTimer = undefined\n }\n this._swipeSettling = false\n this._swipeSettleCommit = false\n this._swipeSettleDir = 1\n }\n\n /** 滑入/回位过渡结束:按目标提交索引切换,或复位到单图静止态。 */\n private _finishSwipeSettle() {\n if (this._swipeSettleTimer === undefined) return\n clearTimeout(this._swipeSettleTimer)\n this._swipeSettleTimer = undefined\n const commit = this._swipeSettleCommit\n const dir = this._swipeSettleDir\n this._swipeSettling = false\n this._swipeSettleCommit = false\n this._swipeDir = 0\n this._swipeOffset = 0\n if (commit) this._commitSwipeTo(dir)\n }\n\n /** 把当前索引切换到相邻图;相邻图在滑动期间已在 DOM 中呈现,提交后直接以已加载态展示,避免重复淡入闪烁。 */\n private _commitSwipeTo(dir: 1 | -1) {\n const target = this._adjacentIndex(dir)\n if (target < 0 || target === this._index) return\n this._index = target\n this.resetZoom()\n }\n\n /** 释放后的滑入/回位:把 _swipeOffset 从跟手位移过渡到目标位(越界滑入相邻图,否则回 0)。 */\n private _settleSwipe(deltaX: number, velocityX: number, endTime: number) {\n const dir = this._swipeDir\n const stageW = this._stage?.clientWidth ?? 0\n if (dir === 0 || stageW <= 0) {\n // 无横向位移或无布局(jsdom):直接复位。\n this._swipeOffset = 0\n return\n }\n const distanceThreshold = Math.max(1, Math.round(stageW * SWIPE_DISTANCE_RATIO))\n // 整段位移平均速度:事件流被合并/延迟稀释时,100ms 窗口速度只采到中后段而偏低,\n // 平均速度(整段位移 / 整段时间)对快速轻扫更鲁棒。合成事件时间戳相同/缺失时\n // 跨度不足 2ms,视为 0(与 drag-gesture 的速度守卫一致),慢拖不会误提交。\n const spanMs = endTime - this._swipeStartTime\n const fullSpanVelocity = spanMs >= 2 ? (deltaX / spanMs) * 1000 : 0\n const flickVelocity = Math.max(Math.abs(velocityX), Math.abs(fullSpanVelocity))\n const crossed =\n Math.abs(deltaX) >= distanceThreshold ||\n Math.abs(velocityX) >= SWIPE_VELOCITY ||\n (Math.abs(deltaX) >= SWIPE_FLICK_DISTANCE && flickVelocity >= SWIPE_FLICK_VELOCITY)\n const commit = crossed && this._adjacentIndex(dir) !== -1\n this._swipeSettling = true\n this._swipeSettleCommit = commit\n this._swipeSettleDir = dir\n // 过渡目标:越过阈值 → track 再滑一个舞台宽度让相邻图入位(相邻图本就在 ±100% 处,\n // 提交后新当前图回到 track 原点,视觉位置不变、无跳变);否则弹回原位。\n this._swipeOffset = commit ? -dir * stageW : 0\n this._swipeSettleTimer = setTimeout(() => this._finishSwipeSettle(), SWIPE_SETTLE_MS)\n }\n\n private _handleSwipeSettleEnd = (event: TransitionEvent) => {\n if (!this._swipeSettling || event.propertyName !== 'transform') return\n this._finishSwipeSettle()\n }\n\n private _panTo(deltaX: number, deltaY: number) {\n const bounds = this._offsetBounds()\n this._offsetX = clamp(this._panOriginX + deltaX, -bounds.x, bounds.x)\n this._offsetY = clamp(this._panOriginY + deltaY, -bounds.y, bounds.y)\n }\n\n /**\n * 平移与左右滑动共用 `attachDragGesture`:它把指针捕获推迟到确认拖拽之后,\n * 因此不会像立即捕获那样破坏图片自身的 click / dblclick 命中;\n * 拖拽过程中的窗口级监听同时兜住指针移出元素甚至移出视口的情况。\n *\n * 拖拽默认平移且不限方向,与倍率无关:放大后是查看被裁切的边缘,1x 是在视口内\n * 移动图片。唯一的例外是 `swipe` 独占 1x——未放大、开启 swipe 且多于一张图时,\n * 整个拖拽归切图(横向驱动轮播、纵向 delta 完全忽略,不做任何平移)。鼠标按住\n * 拖拽与单指拖拽走的是同一条 Pointer 路径。\n *\n * 监听挂在 dialog 而非舞台上:控件层里的按下不会经过舞台,挂在舞台会漏掉\n * 这些按下而留下过期的「起于空白」标记。\n */\n private _handlePointerDown = (event: PointerEvent) => {\n if (!this._open) return\n\n // 新手势接管:中止可能未完成的滑入/回位过渡并复位轮播状态。\n this._cancelSwipeSettle()\n this._swipeDir = 0\n this._swipeOffset = 0\n\n // 只有主指针左键才可能生成 click;副指针或其它键的按下不产生 click,\n // 若让它们覆盖标记,主指针随后释放时的 click 会拿副指针的命中结果误判 backdrop 点击。\n const primary = event.button === 0 && event.isPrimary !== false\n if (!primary) return\n\n // 指针捕获会把后续 click 的 target 重定向到捕获元素,因此在按下时(捕获生效前)\n // 记录真实命中元素,作为「是否起于空白区域」的唯一判据。\n this._blankPointerDown = this._isBlank(event.target)\n this._dragged = false\n\n const stage = this._stage\n if (!stage || (event.target !== stage && !stage.contains(event.target as Node))) return\n\n // swipe 独占 1x:只有未放大、开启 swipe 且多于一张图时,横向拖拽才归切图;\n // 其余情形拖拽一律平移,且不限方向(边界见 _offsetBounds)。\n this._swipeGesture = this._scale === MIN_SCALE && this.swipe && this.images.length > 1\n this._swipeStartTime = event.timeStamp\n this._panOriginX = this._offsetX\n this._panOriginY = this._offsetY\n\n this._gesture?.destroy()\n this._gesture = attachDragGesture(event, {\n // 不能用 axis: 'x':那会把以纵向为主的拖拽整体判定为「取消」,1x 下纵向就\n // 无法平移了。这里始终按 both 追踪,让 swipe 只接管横向分量。\n axis: 'both',\n threshold: PAN_MOVE_THRESHOLD,\n onMove: info => {\n if (this._swipeGesture) {\n // 横向跟手位移驱动 track 整体平移(单 track 轮播);方向随拖拽符号更新,\n // track 位移随 _swipeOffset 反转时自然换向。纵向 delta 完全忽略:\n // 该手势独占拖拽,不驱平移、不产生纵向跟手(放大态的 pan 不受影响)。\n this._swipeOffset = info.deltaX\n if (info.deltaX !== 0) this._swipeDir = info.deltaX < 0 ? 1 : -1\n } else this._panTo(info.deltaX, info.deltaY)\n },\n onEnd: info => {\n this._dragged = true\n this._dragging = false\n if (this._swipeGesture) this._settleSwipe(info.deltaX, info.velocityX, info.timeStamp)\n },\n onTap: () => {\n this._dragging = false\n },\n onCancel: () => {\n this._dragging = false\n this._cancelSwipeSettle()\n this._swipeDir = 0\n this._swipeOffset = 0\n }\n })\n this._dragging = true\n }\n\n override render() {\n const count = this.images.length\n const zoomed = this._scale > MIN_SCALE\n // 单 track 轮播(相邻图渲染):track 只放当前图与左右相邻,当前图恒在 track 原点。\n // 相邻图用绝对定位放在 ±100%(= 舞台宽度)处,与当前图同尺寸同基线;loop\n // 环绕时首尾相邻恒在两侧,任何索引拖拽(含首尾环绕)相邻图都真实跟手,不会\n // 出现「越过 track 末端滑空」的空白(全量渲染 track 在 last→first 环绕时相邻图在\n // 远端,拖拽中间态必然空白)。\n // track 整体随 _swipeOffset 平移:松手越过阈值再滑一个舞台宽度让相邻图入位,\n // 否则弹回原点。图片自身只负责平移/缩放(swipe 只动 track、不碰图片 transform,\n // 缩放锚点数学不变)。\n const prevIndex = count > 0 ? this._adjacentIndex(-1) : -1\n const nextIndex = count > 0 ? this._adjacentIndex(1) : -1\n const trackTransform = `translate3d(${this._swipeOffset}px, 0, 0)`\n // 缩放/平移只作用于当前图的 img:相邻 slide 永远 1x(scale(1)),放大态连纵向 pan\n // 也不跟随(pan 只动当前图),避免放大后相邻图被带大/带进视口「穿过来」。\n // 1x 非 swipe 的平移路径仍可纵向拖拽,相邻图共享 offsetY 保持行内对齐;swipe 生效\n // 期间纵向 delta 被忽略(offsetY 恒 0),相邻图同样不产生纵向跟手。\n const imageTransform = `translate3d(${this._offsetX}px, ${this._offsetY}px, 0) scale(${this._scale})`\n const neighborTransform = zoomed\n ? 'translate3d(0, 0, 0) scale(1)'\n : `translate3d(0, ${this._offsetY}px, 0) scale(1)`\n\n return html`\n <dialog\n aria-label=\"Image preview\"\n @cancel=${this._handleCancel}\n @close=${this._handleNativeClose}\n @pointerdown=${this._handlePointerDown}\n @click=${this._handleClick}\n @dblclick=${this._handleDoubleClick}\n @keydown=${this._handleKeydown}\n @wheel=${this._handleWheel}\n @transitionend=${this._handleTransitionEnd}\n >\n <div class=\"wui-image-preview-backdrop\" aria-hidden=\"true\"></div>\n <div class=\"wui-image-preview-content\">\n <div class=\"wui-image-preview-surface\">\n <div\n class=${classMap({\n 'wui-image-preview-stage': true,\n 'is-zoomed': zoomed,\n 'is-dragging': this._dragging,\n 'is-settling': this._swipeSettling\n })}\n >\n <div\n class=\"wui-image-preview-track\"\n style=${styleMap({ transform: trackTransform })}\n @transitionend=${this._handleSwipeSettleEnd}\n >\n ${\n prevIndex >= 0\n ? html`\n <div class=\"wui-image-preview-slide is-prev\" aria-hidden=\"true\">\n <img\n class=${classMap({\n 'wui-image-preview-image': true,\n 'is-loaded': this._loadedSources.has(this.images[prevIndex].src)\n })}\n data-index=${prevIndex}\n src=${this.images[prevIndex].src}\n alt=${this.images[prevIndex].alt ?? ''}\n draggable=\"false\"\n style=${styleMap({ transform: neighborTransform })}\n @load=${this._handleImageSettled}\n @error=${this._handleImageSettled}\n />\n </div>\n `\n : nothing\n }\n ${\n count > 0\n ? html`\n <div class=\"wui-image-preview-slide is-current\">\n <img\n class=${classMap({\n 'wui-image-preview-image': true,\n 'is-loaded': this._loadedSources.has(this.images[this._index].src)\n })}\n data-index=${this._index}\n src=${this.images[this._index].src}\n alt=${this.images[this._index].alt ?? ''}\n draggable=\"false\"\n style=${styleMap({ transform: imageTransform })}\n @load=${this._handleImageSettled}\n @error=${this._handleImageSettled}\n />\n </div>\n `\n : nothing\n }\n ${\n nextIndex >= 0\n ? html`\n <div class=\"wui-image-preview-slide is-next\" aria-hidden=\"true\">\n <img\n class=${classMap({\n 'wui-image-preview-image': true,\n 'is-loaded': this._loadedSources.has(this.images[nextIndex].src)\n })}\n data-index=${nextIndex}\n src=${this.images[nextIndex].src}\n alt=${this.images[nextIndex].alt ?? ''}\n draggable=\"false\"\n style=${styleMap({ transform: neighborTransform })}\n @load=${this._handleImageSettled}\n @error=${this._handleImageSettled}\n />\n </div>\n `\n : nothing\n }\n </div>\n </div>\n </div>\n <div class=\"wui-image-preview-controls\">\n ${\n this.indicator\n ? html`<span class=\"wui-image-preview-counter wui-glass\" aria-live=\"polite\"\n >${this._index + 1} / ${count}</span\n >`\n : nothing\n }\n ${\n this.closable\n ? html`\n <web-ui-button\n class=\"wui-image-preview-close\"\n variant=\"glass\"\n icon\n size=\"36\"\n aria-label=\"Close\"\n @click=${this.close}\n >\n <web-ui-icon size=\"16\" .icon=${oouiClose}></web-ui-icon>\n </web-ui-button>\n `\n : nothing\n }\n ${\n this.nav && count > 1\n ? html`\n <web-ui-button\n class=\"wui-image-preview-nav wui-image-preview-nav-prev\"\n variant=\"glass\"\n icon\n size=\"44\"\n aria-label=\"Previous image\"\n ?disabled=${!this.loop && this._index === 0}\n @click=${this.prev}\n >\n <web-ui-icon size=\"20\" .icon=${lucideChevronLeft}></web-ui-icon>\n </web-ui-button>\n <web-ui-button\n class=\"wui-image-preview-nav wui-image-preview-nav-next\"\n variant=\"glass\"\n icon\n size=\"44\"\n aria-label=\"Next image\"\n ?disabled=${!this.loop && this._index === count - 1}\n @click=${this.next}\n >\n <web-ui-icon size=\"20\" .icon=${lucideChevronRight}></web-ui-icon>\n </web-ui-button>\n `\n : nothing\n }\n ${\n this.toolbar\n ? html`\n <div class=\"wui-image-preview-toolbar wui-glass\">\n <web-ui-button\n variant=\"glass\"\n icon\n size=\"30\"\n aria-label=\"Zoom out\"\n ?disabled=${this._scale <= MIN_SCALE}\n @click=${this.zoomOut}\n >\n <web-ui-icon size=\"16\" .icon=${lucideMinus}></web-ui-icon>\n </web-ui-button>\n <span class=\"wui-image-preview-scale\">${Math.round(this._scale * 100)}%</span>\n <web-ui-button\n variant=\"glass\"\n icon\n size=\"30\"\n aria-label=\"Zoom in\"\n ?disabled=${this._scale >= MAX_SCALE}\n @click=${this.zoomIn}\n >\n <web-ui-icon size=\"16\" .icon=${lucidePlus}></web-ui-icon>\n </web-ui-button>\n <web-ui-button\n variant=\"glass\"\n icon\n size=\"30\"\n aria-label=\"Reset zoom\"\n ?disabled=${this._scale <= MIN_SCALE && !this._isPanned}\n @click=${this.resetZoom}\n >\n <web-ui-icon size=\"16\" .icon=${radixIconsReset}></web-ui-icon>\n </web-ui-button>\n </div>\n `\n : nothing\n }\n </div>\n </div>\n </dialog>\n `\n }\n}\n\n/**\n * 打开一个命令式 image preview。\n *\n * 组件挂载到目标 `web-ui-theme` 的 overlay 容器(无主题作用域时回退到全局\n * fallback root),返回的 handle 是唯一的控制入口。所有展示类 option 默认关闭,\n * 默认只渲染图片本身。\n */\nexport function imagePreview(options: ImagePreviewOptions): ImagePreviewHandle {\n const images = (options.images ?? []).map(item => ({ src: item.src, alt: item.alt ?? '' }))\n if (images.length === 0) {\n throw new Error('[web-ui-image-preview] imagePreview requires at least one image')\n }\n\n const theme = options.target ? findNearestTheme(options.target) : findRootTheme()\n const container = options.container ?? theme?.getOverlayRoot() ?? getFallbackOverlayRoot()\n\n const element = document.createElement('web-ui-image-preview') as WebUiImagePreview\n element.configure({\n images,\n index: options.index ?? 0,\n loop: options.loop ?? true,\n nav: options.nav ?? false,\n toolbar: options.toolbar ?? false,\n closable: options.closable ?? false,\n indicator: options.indicator ?? false,\n swipe: options.swipe ?? false,\n noScrollLock: options.noScrollLock ?? false,\n noBackdropClose: options.noBackdropClose ?? false\n })\n\n let settle: (() => void) | undefined\n const closed = new Promise<void>(resolve => {\n settle = resolve\n })\n\n element.addEventListener(\n 'preview-dismissed',\n () => {\n element.remove()\n settle?.()\n settle = undefined\n },\n { once: true }\n )\n\n container.appendChild(element)\n element.show()\n\n return {\n get index() {\n return element.index\n },\n get scale() {\n return element.scale\n },\n get images() {\n return element.images\n },\n get closed() {\n return closed\n },\n next: () => element.next(),\n prev: () => element.prev(),\n goTo: (index: number) => element.goTo(index),\n zoomIn: () => element.zoomIn(),\n zoomOut: () => element.zoomOut(),\n resetZoom: () => element.resetZoom(),\n close: () => element.close()\n }\n}\n"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"style.js","names":[],"sources":["../../../src/components/image-preview/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n display: contents;\n}\n\n/*\n * 全视口 dialog:遮罩由独立 .wui-image-preview-backdrop 层提供(而非 ::backdrop /\n * dialog 自身背景)。dialog 自身 opacity 恒 1、无任何 transform——opacity < 1 会让\n * dialog 成为 backdrop root,后代玻璃控件(toolbar/counter/nav)的 backdrop-filter\n * 在过渡期被禁用、blur 在端点生硬跳变;transform 会把遮罩一起缩放。进场缩放\n * (scale 0.9→1)由 .wui-image-preview-surface 图片舞台层承担(见下)。本组件是满视口\n * 表面,起点 >1 会越出视口,只能用 <1 的档位;缩放也不能落在包住控件层的\n * .wui-image-preview-content 上,否则贴边控件会随缩放从视口边缘向内飞行。遮罩、图片\n * 舞台各自用独立层 opacity 过渡;控件层不参与 opacity 过渡,玻璃控件永不在 opacity < 1\n * 的祖先内,blur 全程连续。\n */\ndialog {\n /* 显式 position: fixed(防御性):UA 的 dialog:modal 默认 fixed,但作者样式若覆盖\n position 会把它退回文档流——top layer 里的 modal dialog 变成按文档流定位,出现在\n 页面顶部且跟随页面滚动。image-preview 的 dialog 铺满视口,fixed 是硬前提。 */\n position: fixed;\n\n overflow: hidden;\n\n box-sizing: border-box;\n width: 100%;\n max-width: none;\n height: 100%;\n height: 100dvh;\n max-height: none;\n margin: 0;\n padding: 0;\n border: none;\n\n font-family: inherit;\n color: var(--wui-color-text, #1b1b1b);\n\n opacity: 1;\n background: transparent;\n}\n\n/* 遮罩层:承接原先 dialog 背景的淡入淡出,自身 opacity 过渡不构成 backdrop root。 */\n.wui-image-preview-backdrop {\n pointer-events: none;\n\n position: absolute;\n inset: 0;\n\n opacity: 0;\n background: var(--wui-image-preview-overlay-bg, rgb(0 0 0 / 0.72));\n\n transition: opacity var(--wui-duration-dialog-enter, 320ms) var(--wui-ease-dialog, cubic-bezier(0.2, 0, 0, 1));\n}\n\n/* 内容包裹层:仅作「图片舞台层 + 控件层」的结构容器,自身不做任何过渡。\n scale 不能放在 dialog 上(会带着遮罩一起缩放),也不能放在本层(控件层在其内,\n 带 transform 会让贴边控件从视口边缘向内飞行)。 */\n.wui-image-preview-content {\n position: absolute;\n inset: 0;\n}\n\n/* 图片舞台层:与遮罩同尺寸叠放,承接图片的进场缩放与淡入淡出(0.9→1)。内部无玻璃\n 元素,自身 opacity 过渡不影响 backdrop-filter;transform 不构成 backdrop root,\n 也不会波及兄弟的控件层。 */\n.wui-image-preview-surface {\n position: absolute;\n inset: 0;\n transform: scale(var(--wui-scale-enter, 0.9));\n\n opacity: 0;\n\n transition:\n opacity var(--wui-duration-dialog-enter, 320ms) var(--wui-ease-dialog, cubic-bezier(0.2, 0, 0, 1)),\n transform var(--wui-duration-dialog-enter, 320ms) var(--wui-ease-dialog, cubic-bezier(0.2, 0, 0, 1));\n}\n\n/* 玻璃控件(counter/toolbar)各自做 own opacity 过渡:玻璃元素自身 opacity 淡入\n 不禁用自身 backdrop-filter(backdrop root 只关闭后代 blur),因此控件淡入淡出时\n blur 仍连续;nav/close 是 glass 按钮,blur 在其 shadow 内层原生 button 上,必须\n 经 ::part(button) 落在该玻璃元素自身,若对按钮 host 做 opacity 过渡反而会让\n host 成为 backdrop root、禁掉内层 blur(与祖先 opacity 禁后代 blur 同一机制)。 */\n.wui-image-preview-counter,\n.wui-image-preview-toolbar,\n.wui-image-preview-close::part(button),\n.wui-image-preview-nav::part(button) {\n opacity: 0;\n transition: opacity var(--wui-duration-dialog-enter, 320ms) var(--wui-ease-dialog, cubic-bezier(0.2, 0, 0, 1));\n}\n\n/* 模态表面的焦点环抑制(<dialog> 壳 + 面板滚动区)集中在 assets/modal-surface.css,见组件 index.ts 的 static styles。 */\n\n/* dialog 已铺满视口,原生遮罩不再叠加着色,避免双重变暗。 */\ndialog::backdrop {\n background: transparent;\n}\n\n.wui-image-preview-stage {\n touch-action: none;\n cursor: zoom-in;\n\n position: relative;\n\n overflow: hidden;\n\n width: 100%;\n height: 100%;\n}\n\n.wui-image-preview-stage.is-zoomed {\n cursor: grab;\n}\n\n.wui-image-preview-stage.is-dragging {\n cursor: grabbing;\n}\n\n/* 单轨道轮播(相邻图渲染):轨道撑满舞台,当前图在原点、左右相邻用绝对定位放在\n ±100%(= 舞台宽度)处,与当前图同尺寸同基线;舞台 overflow 裁切,轨道整体随跟手\n 位移平移。相邻图只在当前索引两侧各渲染一张(loop 环绕、非 loop 缺省一侧),任何\n 索引拖拽(含首尾环绕)相邻图都真实跟手,不会越过轨道末端滑空。\n pointer-events: none 让空白的轨道区域穿透命中到舞台(空白点击仍算遮罩),图片自身\n 恢复 auto 接收手势。 */\n.wui-image-preview-track {\n pointer-events: none;\n\n position: absolute;\n inset: 0;\n\n width: 100%;\n height: 100%;\n}\n\n.wui-image-preview-slide {\n pointer-events: none;\n\n position: absolute;\n top: 0;\n left: 0;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: 100%;\n height: 100%;\n}\n\n.wui-image-preview-slide.is-prev {\n left: -100%;\n}\n\n.wui-image-preview-slide.is-next {\n left: 100%;\n}\n\n.wui-image-preview-image {\n pointer-events: auto;\n user-select: none;\n\n display: block;\n\n max-width: 100%;\n max-height: 100%;\n\n opacity: 0;\n object-fit: contain;\n\n /* 拖拽(平移)不参与 transform 过渡(见 .is-dragging),避免跟手位移滞后;\n swipe 只动轨道,图片 transform 在滑动期间不变。 */\n transition:\n opacity var(--wui-duration-trigger, 160ms) var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1)),\n transform var(--wui-duration-trigger, 160ms) var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n\n -webkit-user-drag: none;\n}\n\n.wui-image-preview-image.is-loaded {\n opacity: 1;\n}\n\n.wui-image-preview-stage.is-dragging .wui-image-preview-image {\n transition: opacity var(--wui-duration-trigger, 160ms) var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n}\n\n/* 轮播滑入/回位:跟手结束后把轨道 transform 过渡到目标位(当前图滑出、相邻图入位或\n 弹回)。transitionend 会触发组件内的收尾提交;时长/缓动可用组件级变量覆盖。 */\n.wui-image-preview-stage.is-settling .wui-image-preview-track {\n transition: transform var(--wui-duration-swipe-settle, 220ms) var(--wui-ease-swipe, cubic-bezier(0.32, 0.72, 0, 1));\n}\n\n.wui-image-preview-stage.is-dragging .wui-image-preview-track {\n transition: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .wui-image-preview-image,\n .wui-image-preview-stage.is-dragging .wui-image-preview-image,\n .wui-image-preview-stage.is-settling .wui-image-preview-track {\n transition: opacity var(--wui-duration-feedback, 100ms);\n }\n}\n\n.wui-image-preview-controls {\n pointer-events: none;\n position: absolute;\n inset: 0;\n}\n\n.wui-image-preview-controls > * {\n pointer-events: auto;\n}\n\n.wui-image-preview-counter {\n /* pill 高 ≈ 24px(13px 行盒 + 上下 4px padding),光影取短边一半 */\n --wui-glass-corner-radius: 12px;\n\n position: absolute;\n top: var(--wui-image-preview-edge-gap, 20px);\n left: var(--wui-image-preview-edge-gap, 20px);\n\n padding: var(--wui-space-1, 4px) var(--wui-space-3, 12px);\n border-radius: var(--wui-radius-control, calc(infinity * 1px));\n\n font-size: var(--wui-font-size-readout, 13px);\n font-variant-numeric: tabular-nums;\n color: var(--wui-color-text, #1b1b1b);\n}\n\n.wui-image-preview-close {\n position: absolute;\n top: var(--wui-image-preview-edge-gap, 20px);\n right: var(--wui-image-preview-edge-gap, 20px);\n}\n\n.wui-image-preview-nav {\n position: absolute;\n top: 50%;\n translate: 0 -50%;\n}\n\n.wui-image-preview-nav-prev {\n left: var(--wui-image-preview-edge-gap, 20px);\n}\n\n.wui-image-preview-nav-next {\n right: var(--wui-image-preview-edge-gap, 20px);\n}\n\n.wui-image-preview-toolbar {\n /* 高 = 30px 图标按钮 + 上下 6px padding,光影取短边一半 */\n --wui-glass-corner-radius: 21px;\n\n position: absolute;\n bottom: var(--wui-image-preview-edge-gap, 20px);\n left: 50%;\n translate: -50% 0;\n\n display: flex;\n gap: 6px;\n align-items: center;\n\n padding: 6px;\n border-radius: var(--wui-radius-control, calc(infinity * 1px));\n}\n\n.wui-image-preview-scale {\n min-width: 48px;\n\n font-size: var(--wui-font-size-readout, 13px);\n font-variant-numeric: tabular-nums;\n color: var(--wui-color-text, #1b1b1b);\n text-align: center;\n}\n\ndialog[open].is-visible {\n .wui-image-preview-surface {\n transform: scale(1);\n }\n\n .wui-image-preview-backdrop,\n .wui-image-preview-surface,\n .wui-image-preview-counter,\n .wui-image-preview-toolbar {\n opacity: 1;\n }\n\n .wui-image-preview-close::part(button),\n .wui-image-preview-nav::part(button) {\n opacity: 1;\n }\n}\n\ndialog[open].is-closing {\n pointer-events: none;\n transition-duration: var(--wui-duration-dialog-exit, 260ms);\n\n .wui-image-preview-backdrop,\n .wui-image-preview-surface,\n .wui-image-preview-counter,\n .wui-image-preview-toolbar {\n transition-duration: var(--wui-duration-dialog-exit, 260ms);\n }\n\n .wui-image-preview-close::part(button),\n .wui-image-preview-nav::part(button) {\n transition-duration: var(--wui-duration-dialog-exit, 260ms);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n dialog,\n dialog[open].is-visible {\n transition-duration: var(--wui-duration-feedback, 100ms);\n\n .wui-image-preview-surface {\n transform: none;\n transition-duration: var(--wui-duration-feedback, 100ms);\n }\n\n .wui-image-preview-backdrop,\n .wui-image-preview-surface,\n .wui-image-preview-counter,\n .wui-image-preview-toolbar {\n transition-duration: var(--wui-duration-feedback, 100ms);\n }\n\n .wui-image-preview-close::part(button),\n .wui-image-preview-nav::part(button) {\n transition-duration: var(--wui-duration-feedback, 100ms);\n }\n }\n}\n"],"mappings":""}
1
+ {"version":3,"file":"style.js","names":[],"sources":["../../../src/components/image-preview/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n display: contents;\n}\n\n/*\n * 全视口 dialog:backdrop 由独立 .wui-image-preview-backdrop 层提供(而非 ::backdrop /\n * dialog 自身背景)。dialog 自身 opacity 恒 1、无任何 transform——opacity < 1 会让\n * dialog 成为 backdrop root,后代玻璃控件(toolbar/counter/nav)的 backdrop-filter\n * 在过渡期被禁用、blur 在端点生硬跳变;transform 会把 backdrop 一起缩放。进场缩放\n * (scale 0.9→1)由 .wui-image-preview-surface 图片舞台层承担(见下)。本组件是满视口\n * 表面,起点 >1 会越出视口,只能用 <1 的档位;缩放也不能落在包住控件层的\n * .wui-image-preview-content 上,否则贴边控件会随缩放从视口边缘向内飞行。backdrop、图片\n * 舞台各自用独立层 opacity 过渡;控件层不参与 opacity 过渡,玻璃控件永不在 opacity < 1\n * 的祖先内,blur 全程连续。\n */\ndialog {\n /* 显式 position: fixed(防御性):UA 的 dialog:modal 默认 fixed,但作者样式若覆盖\n position 会把它退回文档流——top layer 里的 modal dialog 变成按文档流定位,出现在\n 页面顶部且跟随页面滚动。image-preview 的 dialog 铺满视口,fixed 是硬前提。 */\n position: fixed;\n\n overflow: hidden;\n\n box-sizing: border-box;\n width: 100%;\n max-width: none;\n height: 100%;\n height: 100dvh;\n max-height: none;\n margin: 0;\n padding: 0;\n border: none;\n\n font-family: inherit;\n color: var(--wui-color-text, #1b1b1b);\n\n opacity: 1;\n background: transparent;\n}\n\n/* backdrop 层:承接原先 dialog 背景的淡入淡出,自身 opacity 过渡不构成 backdrop root。 */\n.wui-image-preview-backdrop {\n pointer-events: none;\n\n position: absolute;\n inset: 0;\n\n opacity: 0;\n background: var(--wui-image-preview-overlay-bg, rgb(0 0 0 / 0.72));\n\n transition: opacity var(--wui-duration-dialog-enter, 320ms) var(--wui-ease-dialog, cubic-bezier(0.2, 0, 0, 1));\n}\n\n/* 内容包裹层:仅作「图片舞台层 + 控件层」的结构容器,自身不做任何过渡。\n scale 不能放在 dialog 上(会带着 backdrop 一起缩放),也不能放在本层(控件层在其内,\n 带 transform 会让贴边控件从视口边缘向内飞行)。 */\n.wui-image-preview-content {\n position: absolute;\n inset: 0;\n}\n\n/* 图片舞台层:与 backdrop 同尺寸叠放,承接图片的进场缩放与淡入淡出(0.9→1)。内部无玻璃\n 元素,自身 opacity 过渡不影响 backdrop-filter;transform 不构成 backdrop root,\n 也不会波及兄弟的控件层。 */\n.wui-image-preview-surface {\n position: absolute;\n inset: 0;\n transform: scale(var(--wui-scale-enter, 0.9));\n\n opacity: 0;\n\n transition:\n opacity var(--wui-duration-dialog-enter, 320ms) var(--wui-ease-dialog, cubic-bezier(0.2, 0, 0, 1)),\n transform var(--wui-duration-dialog-enter, 320ms) var(--wui-ease-dialog, cubic-bezier(0.2, 0, 0, 1));\n}\n\n/* 玻璃控件(counter/toolbar)各自做 own opacity 过渡:玻璃元素自身 opacity 淡入\n 不禁用自身 backdrop-filter(backdrop root 只关闭后代 blur),因此控件淡入淡出时\n blur 仍连续;nav/close 是 glass button,blur 在其 shadow 内层原生 button 上,必须\n 经 ::part(button) 落在该玻璃元素自身,若对 button host 做 opacity 过渡反而会让\n host 成为 backdrop root、禁掉内层 blur(与祖先 opacity 禁后代 blur 同一机制)。 */\n.wui-image-preview-counter,\n.wui-image-preview-toolbar,\n.wui-image-preview-close::part(button),\n.wui-image-preview-nav::part(button) {\n opacity: 0;\n transition: opacity var(--wui-duration-dialog-enter, 320ms) var(--wui-ease-dialog, cubic-bezier(0.2, 0, 0, 1));\n}\n\n/* 模态表面的焦点环抑制(<dialog> 壳 + panel 滚动区)集中在 assets/modal-surface.css,见组件 index.ts 的 static styles。 */\n\n/* dialog 已铺满视口,原生 backdrop 不再叠加着色,避免双重变暗。 */\ndialog::backdrop {\n background: transparent;\n}\n\n.wui-image-preview-stage {\n touch-action: none;\n cursor: zoom-in;\n\n position: relative;\n\n overflow: hidden;\n\n width: 100%;\n height: 100%;\n}\n\n.wui-image-preview-stage.is-zoomed {\n cursor: grab;\n}\n\n.wui-image-preview-stage.is-dragging {\n cursor: grabbing;\n}\n\n/* 单 track 轮播(相邻图渲染):track 撑满舞台,当前图在原点、左右相邻用绝对定位放在\n ±100%(= 舞台宽度)处,与当前图同尺寸同基线;舞台 overflow 裁切,track 整体随跟手\n 位移平移。相邻图只在当前索引两侧各渲染一张(loop 环绕、非 loop 缺省一侧),任何\n 索引拖拽(含首尾环绕)相邻图都真实跟手,不会越过 track 末端滑空。\n pointer-events: none 让空白的 track 区域穿透命中到舞台(空白点击仍算 backdrop),图片自身\n 恢复 auto 接收手势。 */\n.wui-image-preview-track {\n pointer-events: none;\n\n position: absolute;\n inset: 0;\n\n width: 100%;\n height: 100%;\n}\n\n.wui-image-preview-slide {\n pointer-events: none;\n\n position: absolute;\n top: 0;\n left: 0;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: 100%;\n height: 100%;\n}\n\n.wui-image-preview-slide.is-prev {\n left: -100%;\n}\n\n.wui-image-preview-slide.is-next {\n left: 100%;\n}\n\n.wui-image-preview-image {\n pointer-events: auto;\n user-select: none;\n\n display: block;\n\n max-width: 100%;\n max-height: 100%;\n\n opacity: 0;\n object-fit: contain;\n\n /* 拖拽(平移)不参与 transform 过渡(见 .is-dragging),避免跟手位移滞后;\n swipe 只动 track,图片 transform 在滑动期间不变。 */\n transition:\n opacity var(--wui-duration-trigger, 160ms) var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1)),\n transform var(--wui-duration-trigger, 160ms) var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n\n -webkit-user-drag: none;\n}\n\n.wui-image-preview-image.is-loaded {\n opacity: 1;\n}\n\n.wui-image-preview-stage.is-dragging .wui-image-preview-image {\n transition: opacity var(--wui-duration-trigger, 160ms) var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n}\n\n/* 轮播滑入/回位:跟手结束后把 track transform 过渡到目标位(当前图滑出、相邻图入位或\n 弹回)。transitionend 会触发组件内的收尾提交;时长/缓动可用组件级变量覆盖。 */\n.wui-image-preview-stage.is-settling .wui-image-preview-track {\n transition: transform var(--wui-duration-swipe-settle, 220ms) var(--wui-ease-swipe, cubic-bezier(0.32, 0.72, 0, 1));\n}\n\n.wui-image-preview-stage.is-dragging .wui-image-preview-track {\n transition: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .wui-image-preview-image,\n .wui-image-preview-stage.is-dragging .wui-image-preview-image,\n .wui-image-preview-stage.is-settling .wui-image-preview-track {\n transition: opacity var(--wui-duration-feedback, 100ms);\n }\n}\n\n.wui-image-preview-controls {\n pointer-events: none;\n position: absolute;\n inset: 0;\n}\n\n.wui-image-preview-controls > * {\n pointer-events: auto;\n}\n\n.wui-image-preview-counter {\n /* pill 高 ≈ 24px(13px 行盒 + 上下 4px padding),光影取短边一半 */\n --wui-glass-corner-radius: 12px;\n\n position: absolute;\n top: var(--wui-image-preview-edge-gap, 20px);\n left: var(--wui-image-preview-edge-gap, 20px);\n\n padding: var(--wui-space-1, 4px) var(--wui-space-3, 12px);\n border-radius: var(--wui-radius-control, calc(infinity * 1px));\n\n font-size: var(--wui-font-size-readout, 13px);\n font-variant-numeric: tabular-nums;\n color: var(--wui-color-text, #1b1b1b);\n}\n\n.wui-image-preview-close {\n position: absolute;\n top: var(--wui-image-preview-edge-gap, 20px);\n right: var(--wui-image-preview-edge-gap, 20px);\n}\n\n.wui-image-preview-nav {\n position: absolute;\n top: 50%;\n translate: 0 -50%;\n}\n\n.wui-image-preview-nav-prev {\n left: var(--wui-image-preview-edge-gap, 20px);\n}\n\n.wui-image-preview-nav-next {\n right: var(--wui-image-preview-edge-gap, 20px);\n}\n\n.wui-image-preview-toolbar {\n /* 高 = 30px icon button + 上下 6px padding,光影取短边一半 */\n --wui-glass-corner-radius: 21px;\n\n position: absolute;\n bottom: var(--wui-image-preview-edge-gap, 20px);\n left: 50%;\n translate: -50% 0;\n\n display: flex;\n gap: 6px;\n align-items: center;\n\n padding: 6px;\n border-radius: var(--wui-radius-control, calc(infinity * 1px));\n}\n\n.wui-image-preview-scale {\n min-width: 48px;\n\n font-size: var(--wui-font-size-readout, 13px);\n font-variant-numeric: tabular-nums;\n color: var(--wui-color-text, #1b1b1b);\n text-align: center;\n}\n\ndialog[open].is-visible {\n .wui-image-preview-surface {\n transform: scale(1);\n }\n\n .wui-image-preview-backdrop,\n .wui-image-preview-surface,\n .wui-image-preview-counter,\n .wui-image-preview-toolbar {\n opacity: 1;\n }\n\n .wui-image-preview-close::part(button),\n .wui-image-preview-nav::part(button) {\n opacity: 1;\n }\n}\n\ndialog[open].is-closing {\n pointer-events: none;\n transition-duration: var(--wui-duration-dialog-exit, 260ms);\n\n .wui-image-preview-backdrop,\n .wui-image-preview-surface,\n .wui-image-preview-counter,\n .wui-image-preview-toolbar {\n transition-duration: var(--wui-duration-dialog-exit, 260ms);\n }\n\n .wui-image-preview-close::part(button),\n .wui-image-preview-nav::part(button) {\n transition-duration: var(--wui-duration-dialog-exit, 260ms);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n dialog,\n dialog[open].is-visible {\n transition-duration: var(--wui-duration-feedback, 100ms);\n\n .wui-image-preview-surface {\n transform: none;\n transition-duration: var(--wui-duration-feedback, 100ms);\n }\n\n .wui-image-preview-backdrop,\n .wui-image-preview-surface,\n .wui-image-preview-counter,\n .wui-image-preview-toolbar {\n transition-duration: var(--wui-duration-feedback, 100ms);\n }\n\n .wui-image-preview-close::part(button),\n .wui-image-preview-nav::part(button) {\n transition-duration: var(--wui-duration-feedback, 100ms);\n }\n }\n}\n"],"mappings":""}
@@ -385,6 +385,7 @@ export declare class WebUiInput extends WebUiInput_base {
385
385
  private get _isDisabled();
386
386
  private readonly _formAssociation;
387
387
  private readonly _formAssociationController;
388
+ formDisabledCallback(disabled: boolean): void;
388
389
  updated(changed: Map<string, unknown>): void;
389
390
  private _syncValidity;
390
391
  private _onSlotChange;
@@ -1,6 +1,6 @@
1
1
  import e from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
2
2
  import "../icon/index.js";
3
- import t from "../../assets/glass.js";
3
+ import t from "../../classes/glass.js";
4
4
  import n from "../../icons/generated/jam-close-circle-f.js";
5
5
  import { FormAssociated as r, FormAssociationController as i, defineFormAssociation as a, forwardInputValidity as o } from "../../shared/form-association/index.js";
6
6
  import "../button/index.js";
@@ -40,6 +40,9 @@ var _ = class extends r(l) {
40
40
  get _isDisabled() {
41
41
  return this.disabled || this._formAssociation.isFormDisabled();
42
42
  }
43
+ formDisabledCallback(e) {
44
+ super.formDisabledCallback(e), this.toggleAttribute("data-form-disabled", e);
45
+ }
43
46
  updated(e) {
44
47
  if (e.has("_value")) {
45
48
  let e = this.shadowRoot?.querySelector("input");
@@ -102,7 +105,7 @@ var _ = class extends r(l) {
102
105
  this._isDisabled || this.shadowRoot?.querySelector("input")?.select();
103
106
  }
104
107
  render() {
105
- let e = this.clearable && this._value && !this.readonly;
108
+ let e = this.clearable && this._value && !this._isDisabled && !this.readonly;
106
109
  return u`
107
110
  <div class="wui-glass wui-input-inner" @click=${this.focusInput}>
108
111
  <slot name="prefix" class=${h({ empty: !this._hasPrefix })} @slotchange=${this._onSlotChange}></slot>
@@ -125,7 +128,7 @@ var _ = class extends r(l) {
125
128
  icon
126
129
  variant="ghost"
127
130
  size="20"
128
- aria-label="清除"
131
+ aria-label="Clear"
129
132
  @pointerdown=${this.preventMouseDownBlur}
130
133
  @click=${this.handleClear}
131
134
  >
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../../src/components/input/index.ts"],"sourcesContent":["import '@/components/button'\nimport '@/components/icon'\n\nimport { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport glass from '@/assets/glass.css?inline'\nimport { jamCloseCircleF } from '@/icons'\nimport {\n FormAssociated,\n defineFormAssociation,\n forwardInputValidity,\n FormAssociationController\n} from '@/shared/form-association'\nimport { createFieldId } from '@/shared/form-association/field-id'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-input')\nexport class WebUiInput extends FormAssociated(LitElement) {\n static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n\n @property({ type: String, reflect: true }) type = 'text'\n @property({ type: String, reflect: true }) placeholder = ''\n @property({ type: String, reflect: true }) name = ''\n @property({ type: Boolean, reflect: true }) disabled = false\n @property({ type: Boolean, reflect: true }) readonly = false\n @property({ type: Boolean, reflect: true }) required = false\n @property({ type: Boolean, reflect: true }) clearable = false\n @property({ type: Boolean, reflect: true }) full = false\n @property({ type: Boolean, reflect: true }) borderless = false\n @property({ type: String, attribute: 'aria-label' }) override ariaLabel: string | null = null\n\n @state() private _value = ''\n @state() private _focused = false\n @state() private _hasPrefix = false\n @state() private _hasSuffix = false\n\n private readonly _fieldId = createFieldId('web-ui-input')\n\n @property({ type: String, reflect: true })\n get value(): string {\n return this._value\n }\n\n set value(v: string) {\n const old = this._value\n this._value = v\n this._formAssociation.sync()\n this.requestUpdate('value', old)\n }\n\n private get _isDisabled(): boolean {\n return this.disabled || this._formAssociation.isFormDisabled()\n }\n\n private readonly _formAssociation = defineFormAssociation<string>({\n host: this,\n getState: () => this._value,\n setState: value => {\n this.value = value\n },\n getFormValue: () => this._value,\n getFormState: () => this._value,\n restoreState: state => {\n if (typeof state === 'string') this.value = state\n },\n syncValidity: () => this._syncValidity()\n }).make()\n\n private readonly _formAssociationController = new FormAssociationController(this, this._formAssociation)\n\n override updated(changed: Map<string, unknown>) {\n if (changed.has('_value')) {\n const input = this.shadowRoot?.querySelector('input')\n if (input && input.value !== this._value) {\n input.value = this._value\n }\n }\n this._syncValidity()\n this.toggleAttribute('focused', this._focused)\n }\n\n private _syncValidity() {\n const input = this.shadowRoot?.querySelector('input')\n const internals = this._formAssociation.getInternals()\n if (!internals || !input || typeof internals.setValidity !== 'function') return\n forwardInputValidity(\n internals,\n input,\n ['valueMissing', 'typeMismatch', 'patternMismatch', 'tooLong', 'tooShort'],\n this._isDisabled\n )\n }\n\n private _onSlotChange(e: Event) {\n if (!(e.target instanceof HTMLSlotElement)) return\n const slot = e.target\n const hasContent = slot.assignedElements().length > 0\n if (slot.name === 'prefix') this._hasPrefix = hasContent\n if (slot.name === 'suffix') this._hasSuffix = hasContent\n }\n\n private handleInput(e: Event) {\n if (this._isDisabled || this.readonly) return\n if (!(e.target instanceof HTMLInputElement)) return\n this._value = e.target.value\n this._formAssociation.sync()\n }\n\n // 原生 change 不 composed,被 shadow root 挡住;这里补发 composed 事件,\n // 兑现 $events/README 声明的公共 change 契约。\n private handleNativeChange(e: Event) {\n if (this._isDisabled || this.readonly) return\n if (!(e.target instanceof HTMLInputElement)) return\n this._value = e.target.value\n this._formAssociation.sync()\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n }\n\n private handleFocus() {\n if (!this._isDisabled) this._focused = true\n }\n\n private handleBlur() {\n this._focused = false\n }\n\n private handleClear() {\n if (this._isDisabled || this.readonly) return\n this._value = ''\n this._formAssociation.sync()\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }))\n // 清除是离散的已提交变更(不是连续输入):只派 input 会让 v-model.lazy\n // 等只监听 change 的消费者永远收不到清空,故与 input 一并派发。\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n }\n\n private preventMouseDownBlur(e: Event) {\n e.preventDefault()\n }\n\n private focusInput() {\n if (this._isDisabled) return\n this.shadowRoot?.querySelector('input')?.focus()\n }\n\n // 公共 focus/blur 与 textarea 对齐:宿主自身没有 tab 位(不可聚焦),\n // 不重定向到内部原生控件的话,调用方拿到的是一次空操作\n override focus(options?: FocusOptions) {\n if (this._isDisabled) return\n this.shadowRoot?.querySelector('input')?.focus(options)\n }\n\n override blur() {\n this.shadowRoot?.querySelector('input')?.blur()\n }\n\n /**\n * 公共 API:全选当前值。\n *\n * `disabled` 时与 `focus()` 一致不产生效果;原生控件未渲染时安全 no-op。\n */\n select() {\n if (this._isDisabled) return\n this.shadowRoot?.querySelector('input')?.select()\n }\n\n override render() {\n // readonly 下不可清除:清空按钮会修改值,与只读语义冲突\n const showClear = this.clearable && this._value && !this.readonly\n\n return html`\n <div class=\"wui-glass wui-input-inner\" @click=${this.focusInput}>\n <slot name=\"prefix\" class=${classMap({ empty: !this._hasPrefix })} @slotchange=${this._onSlotChange}></slot>\n <input\n id=${this._fieldId}\n type=${this.type}\n placeholder=${this.placeholder}\n name=${this.name}\n aria-label=${ifDefined(this.ariaLabel)}\n ?disabled=${this._isDisabled}\n ?readonly=${this.readonly}\n ?required=${this.required}\n .value=${this._value}\n @input=${this.handleInput}\n @change=${this.handleNativeChange}\n @focus=${this.handleFocus}\n @blur=${this.handleBlur}\n />\n ${\n showClear\n ? html`<web-ui-button\n icon\n variant=\"ghost\"\n size=\"20\"\n aria-label=\"清除\"\n @pointerdown=${this.preventMouseDownBlur}\n @click=${this.handleClear}\n >\n <web-ui-icon .icon=${jamCloseCircleF} size=\"14\"></web-ui-icon>\n </web-ui-button>`\n : ''\n }\n <slot name=\"suffix\" class=${classMap({ empty: !this._hasSuffix })} @slotchange=${this._onSlotChange}></slot>\n </div>\n `\n }\n\n declare readonly $events: {\n input: Event\n change: Event\n focus: FocusEvent\n blur: FocusEvent\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'web-ui-input': WebUiInput\n }\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../../src/components/input/index.ts"],"sourcesContent":["import '@/components/button'\nimport '@/components/icon'\n\nimport { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport glass from '@/classes/glass.css?inline'\nimport { jamCloseCircleF } from '@/icons'\nimport {\n FormAssociated,\n defineFormAssociation,\n forwardInputValidity,\n FormAssociationController\n} from '@/shared/form-association'\nimport { createFieldId } from '@/shared/form-association/field-id'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-input')\nexport class WebUiInput extends FormAssociated(LitElement) {\n static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n\n @property({ type: String, reflect: true }) type = 'text'\n @property({ type: String, reflect: true }) placeholder = ''\n @property({ type: String, reflect: true }) name = ''\n @property({ type: Boolean, reflect: true }) disabled = false\n @property({ type: Boolean, reflect: true }) readonly = false\n @property({ type: Boolean, reflect: true }) required = false\n @property({ type: Boolean, reflect: true }) clearable = false\n @property({ type: Boolean, reflect: true }) full = false\n @property({ type: Boolean, reflect: true }) borderless = false\n @property({ type: String, attribute: 'aria-label' }) override ariaLabel: string | null = null\n\n @state() private _value = ''\n @state() private _focused = false\n @state() private _hasPrefix = false\n @state() private _hasSuffix = false\n\n private readonly _fieldId = createFieldId('web-ui-input')\n\n @property({ type: String, reflect: true })\n get value(): string {\n return this._value\n }\n\n set value(v: string) {\n const old = this._value\n this._value = v\n this._formAssociation.sync()\n this.requestUpdate('value', old)\n }\n\n private get _isDisabled(): boolean {\n return this.disabled || this._formAssociation.isFormDisabled()\n }\n\n private readonly _formAssociation = defineFormAssociation<string>({\n host: this,\n getState: () => this._value,\n setState: value => {\n this.value = value\n },\n getFormValue: () => this._value,\n getFormState: () => this._value,\n restoreState: state => {\n if (typeof state === 'string') this.value = state\n },\n syncValidity: () => this._syncValidity()\n }).make()\n\n private readonly _formAssociationController = new FormAssociationController(this, this._formAssociation)\n\n override formDisabledCallback(disabled: boolean) {\n super.formDisabledCallback(disabled)\n this.toggleAttribute('data-form-disabled', disabled)\n }\n\n override updated(changed: Map<string, unknown>) {\n if (changed.has('_value')) {\n const input = this.shadowRoot?.querySelector('input')\n if (input && input.value !== this._value) {\n input.value = this._value\n }\n }\n this._syncValidity()\n this.toggleAttribute('focused', this._focused)\n }\n\n private _syncValidity() {\n const input = this.shadowRoot?.querySelector('input')\n const internals = this._formAssociation.getInternals()\n if (!internals || !input || typeof internals.setValidity !== 'function') return\n forwardInputValidity(\n internals,\n input,\n ['valueMissing', 'typeMismatch', 'patternMismatch', 'tooLong', 'tooShort'],\n this._isDisabled\n )\n }\n\n private _onSlotChange(e: Event) {\n if (!(e.target instanceof HTMLSlotElement)) return\n const slot = e.target\n const hasContent = slot.assignedElements().length > 0\n if (slot.name === 'prefix') this._hasPrefix = hasContent\n if (slot.name === 'suffix') this._hasSuffix = hasContent\n }\n\n private handleInput(e: Event) {\n if (this._isDisabled || this.readonly) return\n if (!(e.target instanceof HTMLInputElement)) return\n this._value = e.target.value\n this._formAssociation.sync()\n }\n\n // 原生 change 不 composed,被 shadow root 挡住;这里补发 composed 事件,\n // 兑现 $events/README 声明的公共 change 契约。\n private handleNativeChange(e: Event) {\n if (this._isDisabled || this.readonly) return\n if (!(e.target instanceof HTMLInputElement)) return\n this._value = e.target.value\n this._formAssociation.sync()\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n }\n\n private handleFocus() {\n if (!this._isDisabled) this._focused = true\n }\n\n private handleBlur() {\n this._focused = false\n }\n\n private handleClear() {\n if (this._isDisabled || this.readonly) return\n this._value = ''\n this._formAssociation.sync()\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }))\n // 清除是离散的已提交变更(不是连续输入):只派 input 会让 v-model.lazy\n // 等只监听 change 的消费者永远收不到清空,故与 input 一并派发。\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n }\n\n private preventMouseDownBlur(e: Event) {\n e.preventDefault()\n }\n\n private focusInput() {\n if (this._isDisabled) return\n this.shadowRoot?.querySelector('input')?.focus()\n }\n\n // 公共 focus/blur 与 textarea 对齐:宿主自身没有 tab 位(不可聚焦),\n // 不重定向到内部原生控件的话,调用方拿到的是一次空操作\n override focus(options?: FocusOptions) {\n if (this._isDisabled) return\n this.shadowRoot?.querySelector('input')?.focus(options)\n }\n\n override blur() {\n this.shadowRoot?.querySelector('input')?.blur()\n }\n\n /**\n * 公共 API:全选当前值。\n *\n * `disabled` 时与 `focus()` 一致不产生效果;原生控件未渲染时安全 no-op。\n */\n select() {\n if (this._isDisabled) return\n this.shadowRoot?.querySelector('input')?.select()\n }\n\n override render() {\n // disabled / readonly 时隐藏清除 button,避免暴露不可执行的值修改操作\n const showClear = this.clearable && this._value && !this._isDisabled && !this.readonly\n\n return html`\n <div class=\"wui-glass wui-input-inner\" @click=${this.focusInput}>\n <slot name=\"prefix\" class=${classMap({ empty: !this._hasPrefix })} @slotchange=${this._onSlotChange}></slot>\n <input\n id=${this._fieldId}\n type=${this.type}\n placeholder=${this.placeholder}\n name=${this.name}\n aria-label=${ifDefined(this.ariaLabel)}\n ?disabled=${this._isDisabled}\n ?readonly=${this.readonly}\n ?required=${this.required}\n .value=${this._value}\n @input=${this.handleInput}\n @change=${this.handleNativeChange}\n @focus=${this.handleFocus}\n @blur=${this.handleBlur}\n />\n ${\n showClear\n ? html`<web-ui-button\n icon\n variant=\"ghost\"\n size=\"20\"\n aria-label=\"Clear\"\n @pointerdown=${this.preventMouseDownBlur}\n @click=${this.handleClear}\n >\n <web-ui-icon .icon=${jamCloseCircleF} size=\"14\"></web-ui-icon>\n </web-ui-button>`\n : ''\n }\n <slot name=\"suffix\" class=${classMap({ empty: !this._hasSuffix })} @slotchange=${this._onSlotChange}></slot>\n </div>\n `\n }\n\n declare readonly $events: {\n input: Event\n change: Event\n focus: FocusEvent\n blur: FocusEvent\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'web-ui-input': WebUiInput\n }\n}\n"],"mappings":";;;;;;;;;;;;;AAqBO,IAAM,IAAN,cAAyB,EAAe,CAAU,CAAC,CAAC;;EAmDX,aAhDI,KAAA,OAAA,QACO,KAAA,cAAA,IACP,KAAA,OAAA,IACK,KAAA,WAAA,IACA,KAAA,WAAA,IACA,KAAA,WAAA,IACC,KAAA,YAAA,IACL,KAAA,OAAA,IACM,KAAA,aAAA,IACgC,KAAA,YAAA,MAE/D,KAAA,SAAA,IACE,KAAA,WAAA,IACE,KAAA,aAAA,IACA,KAAA,aAAA,IAEF,KAAA,WAAA,EAAc,cAAc,GAkBpB,KAAA,mBAAA,EAA8B;GAChE,MAAM;GACN,gBAAgB,KAAK;GACrB,WAAU,MAAS;IACjB,KAAK,QAAQ;GACf;GACA,oBAAoB,KAAK;GACzB,oBAAoB,KAAK;GACzB,eAAc,MAAS;IACrB,AAAI,OAAO,KAAU,aAAU,KAAK,QAAQ;GAC9C;GACA,oBAAoB,KAAK,cAAc;EACzC,CAAC,CAAC,CAAC,KAAK,GAEsC,KAAA,6BAAA,IAAI,EAA0B,MAAM,KAAK,gBAAgB;;;EAlD9E,KAAA,SAAA,CAAC,EAAU,CAAK,GAAG,EAAU,CAAK,CAAC;;CAoB5D,IACI,QAAgB;EAClB,OAAO,KAAK;CACd;CAEA,IAAI,MAAM,GAAW;EACnB,IAAM,IAAM,KAAK;EAGjB,AAFA,KAAK,SAAS,GACd,KAAK,iBAAiB,KAAK,GAC3B,KAAK,cAAc,SAAS,CAAG;CACjC;CAEA,IAAY,cAAuB;EACjC,OAAO,KAAK,YAAY,KAAK,iBAAiB,eAAe;CAC/D;CAkBA,qBAA8B,GAAmB;EAE/C,AADA,MAAM,qBAAqB,CAAQ,GACnC,KAAK,gBAAgB,sBAAsB,CAAQ;CACrD;CAEA,QAAiB,GAA+B;EAC9C,IAAI,EAAQ,IAAI,QAAQ,GAAG;GACzB,IAAM,IAAQ,KAAK,YAAY,cAAc,OAAO;GACpD,AAAI,KAAS,EAAM,UAAU,KAAK,WAChC,EAAM,QAAQ,KAAK;EAEvB;EAEA,AADA,KAAK,cAAc,GACnB,KAAK,gBAAgB,WAAW,KAAK,QAAQ;CAC/C;CAEA,gBAAwB;EACtB,IAAM,IAAQ,KAAK,YAAY,cAAc,OAAO,GAC9C,IAAY,KAAK,iBAAiB,aAAa;EACjD,AAAC,KAAc,KAAS,OAAO,EAAU,eAAgB,cAC7D,EACE,GACA,GACA;GAAC;GAAgB;GAAgB;GAAmB;GAAW;EAAU,GACzE,KAAK,WACP;CACF;CAEA,cAAsB,GAAU;EAC9B,IAAI,EAAE,EAAE,kBAAkB,kBAAkB;EAC5C,IAAM,IAAO,EAAE,QACT,IAAa,EAAK,iBAAiB,CAAC,CAAC,SAAS;EAEpD,AADI,EAAK,SAAS,aAAU,KAAK,aAAa,IAC1C,EAAK,SAAS,aAAU,KAAK,aAAa;CAChD;CAEA,YAAoB,GAAU;EACxB,KAAK,eAAe,KAAK,YACvB,EAAE,kBAAkB,qBAC1B,KAAK,SAAS,EAAE,OAAO,OACvB,KAAK,iBAAiB,KAAK;CAC7B;CAIA,mBAA2B,GAAU;EAC/B,KAAK,eAAe,KAAK,YACvB,EAAE,kBAAkB,qBAC1B,KAAK,SAAS,EAAE,OAAO,OACvB,KAAK,iBAAiB,KAAK,GAC3B,KAAK,cAAc,IAAI,MAAM,UAAU;GAAE,SAAS;GAAM,UAAU;EAAK,CAAC,CAAC;CAC3E;CAEA,cAAsB;EACpB,AAAK,KAAK,gBAAa,KAAK,WAAW;CACzC;CAEA,aAAqB;EACnB,KAAK,WAAW;CAClB;CAEA,cAAsB;EAChB,KAAK,eAAe,KAAK,aAC7B,KAAK,SAAS,IACd,KAAK,iBAAiB,KAAK,GAC3B,KAAK,cAAc,IAAI,MAAM,SAAS;GAAE,SAAS;GAAM,UAAU;EAAK,CAAC,CAAC,GAGxE,KAAK,cAAc,IAAI,MAAM,UAAU;GAAE,SAAS;GAAM,UAAU;EAAK,CAAC,CAAC;CAC3E;CAEA,qBAA6B,GAAU;EACrC,EAAE,eAAe;CACnB;CAEA,aAAqB;EACf,KAAK,eACT,KAAK,YAAY,cAAc,OAAO,CAAC,EAAE,MAAM;CACjD;CAIA,MAAe,GAAwB;EACjC,KAAK,eACT,KAAK,YAAY,cAAc,OAAO,CAAC,EAAE,MAAM,CAAO;CACxD;CAEA,OAAgB;EACd,KAAK,YAAY,cAAc,OAAO,CAAC,EAAE,KAAK;CAChD;CAOA,SAAS;EACH,KAAK,eACT,KAAK,YAAY,cAAc,OAAO,CAAC,EAAE,OAAO;CAClD;CAEA,SAAkB;EAEhB,IAAM,IAAY,KAAK,aAAa,KAAK,UAAU,CAAC,KAAK,eAAe,CAAC,KAAK;EAE9E,OAAO,CAAI;sDACuC,KAAK,WAAW;oCAClC,EAAS,EAAE,OAAO,CAAC,KAAK,WAAW,CAAC,EAAE,eAAe,KAAK,cAAc;;eAE7F,KAAK,SAAS;iBACZ,KAAK,KAAK;wBACH,KAAK,YAAY;iBACxB,KAAK,KAAK;uBACJ,EAAU,KAAK,SAAS,EAAE;sBAC3B,KAAK,YAAY;sBACjB,KAAK,SAAS;sBACd,KAAK,SAAS;mBACjB,KAAK,OAAO;mBACZ,KAAK,YAAY;oBAChB,KAAK,mBAAmB;mBACzB,KAAK,YAAY;kBAClB,KAAK,WAAW;;UAGxB,IACI,CAAI;;;;;+BAKa,KAAK,qBAAqB;yBAChC,KAAK,YAAY;;qCAEL,EAAgB;kCAEvC,GACL;oCAC2B,EAAS,EAAE,OAAO,CAAC,KAAK,WAAW,CAAC,EAAE,eAAe,KAAK,cAAc;;;CAG1G;AAQF;AAtMG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GACxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,eAAA,KAAA,CAAA,GACxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GACxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,WAAW;AAAa,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAElD,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GACN,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GACN,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,GACN,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,GAIN,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,IAAA,GAtB1C,IAAA,EAAA,CAAA,EAAc,cAAc,CAAA,GAAA,CAAA"}
@@ -1,5 +1,5 @@
1
1
  //#region src/components/input/style.css?inline
2
- var e = "*,:before,:after{box-sizing:border-box}:host{--wui-input-clear-color:var(--wui-color-text-tertiary,color-mix(in srgb, var(--wui-color-text) 35%, transparent));display:inline-block}:host([disabled]){cursor:not-allowed;opacity:.4}.wui-input-inner{--wui-glass-corner-radius:calc(var(--wui-control-size,36px) / 2);gap:var(--wui-space-2,8px);box-sizing:border-box;width:var(--wui-input-width,200px);min-width:var(--wui-control-size,36px);height:var(--wui-control-size,36px);padding:0 var(--wui-space-3,12px);border-radius:var(--wui-radius-control,calc(infinity * 1px));align-items:center;display:flex;position:relative}:host([full]){display:block}:host([full]) .wui-input-inner{width:100%}:host([borderless]) .wui-input-inner{-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;background:0 0;border:none}:host([borderless]) .wui-input-inner:before{content:none}.wui-input-inner:after{pointer-events:none;content:\"\";border-radius:inherit;box-shadow:inset 0 0 0 1px transparent, 0 0 0 var(--wui-focus-ring-width,3px) transparent;transition:box-shadow var(--wui-duration-focus,.2s);position:absolute;inset:0}:host([focused]) .wui-input-inner:after{box-shadow:inset 0 0 0 1px var(--wui-color-accent,#08f), 0 0 0 var(--wui-focus-ring-width,3px) var(--wui-color-focus-ring,color-mix(in srgb, var(--wui-color-accent,#08f) 40%, transparent))}input{min-width:0;height:100%;font:inherit;font-size:var(--wui-font-size,14px);color:var(--wui-color-text,#1b1b1b);background:0 0;border:none;outline:none;flex:1;margin:0;padding:0}input::placeholder{font:inherit;color:var(--wui-color-text-secondary,#6a6a6a)}input:disabled{cursor:not-allowed;opacity:.4}@media (pointer:coarse){input{font-size:max(16px, var(--wui-font-size,14px))}}slot{font-size:var(--wui-font-size,14px);color:var(--wui-color-text-secondary,#6a6a6a);flex-shrink:0;align-items:center;display:flex}slot.empty{display:none}.wui-input-inner web-ui-button[variant=ghost]{--wui-button-color:var(--wui-input-clear-color);margin-left:-8px;margin-right:-4px}";
2
+ var e = "*,:before,:after{box-sizing:border-box}:host{--wui-input-clear-color:var(--wui-color-text-tertiary,color-mix(in srgb, var(--wui-color-text) 35%, transparent));display:inline-block}:host([disabled]),:host([data-form-disabled]){cursor:not-allowed;opacity:.4}.wui-input-inner{--wui-glass-corner-radius:calc(var(--wui-control-size,36px) / 2);gap:var(--wui-space-2,8px);box-sizing:border-box;width:var(--wui-input-width,200px);min-width:var(--wui-control-size,36px);height:var(--wui-control-size,36px);padding:0 var(--wui-space-3,12px);border-radius:var(--wui-radius-control,calc(infinity * 1px));align-items:center;display:flex;position:relative}:host([full]){display:block}:host([full]) .wui-input-inner{width:100%}:host([borderless]) .wui-input-inner{-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;background:0 0;border:none}:host([borderless]) .wui-input-inner:before{content:none}.wui-input-inner:after{pointer-events:none;content:\"\";border-radius:inherit;box-shadow:inset 0 0 0 1px transparent, 0 0 0 var(--wui-focus-ring-width,3px) transparent;transition:box-shadow var(--wui-duration-focus,.2s);position:absolute;inset:0}:host([focused]) .wui-input-inner:after{box-shadow:inset 0 0 0 1px var(--wui-color-accent,#0071e3), 0 0 0 var(--wui-focus-ring-width,3px) var(--wui-color-focus-ring,color-mix(in srgb, var(--wui-color-accent,#0071e3) 40%, transparent))}input{min-width:0;height:100%;font:inherit;font-size:var(--wui-font-size,14px);color:var(--wui-color-text,#1b1b1b);background:0 0;border:none;outline:none;flex:1;margin:0;padding:0}input::placeholder{font:inherit;color:var(--wui-color-text-secondary,#6a6a6a)}input:disabled{cursor:not-allowed}@media (pointer:coarse){input{font-size:max(16px, var(--wui-font-size,14px))}}slot{font-size:var(--wui-font-size,14px);color:var(--wui-color-text-secondary,#6a6a6a);flex-shrink:0;align-items:center;display:flex}slot.empty{display:none}.wui-input-inner web-ui-button[variant=ghost]{--wui-button-color:var(--wui-input-clear-color);margin-left:-8px;margin-right:-4px}";
3
3
  //#endregion
4
4
  export { e as default };
5
5
 
@@ -1 +1 @@
1
- {"version":3,"file":"style.js","names":[],"sources":["../../../src/components/input/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n --wui-input-clear-color: var(--wui-color-text-tertiary, color-mix(in srgb, var(--wui-color-text) 35%, transparent));\n display: inline-block;\n}\n\n:host([disabled]) {\n cursor: not-allowed;\n opacity: 0.4;\n}\n\n.wui-input-inner {\n --wui-glass-corner-radius: calc(var(--wui-control-size, 36px) / 2);\n position: relative;\n\n display: flex;\n gap: var(--wui-space-2, 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 var(--wui-space-3, 12px);\n border-radius: var(--wui-radius-control, calc(infinity * 1px));\n}\n\n:host([full]) {\n display: block;\n}\n\n:host([full]) .wui-input-inner {\n width: 100%;\n}\n\n:host([borderless]) .wui-input-inner {\n border: none;\n background: transparent;\n backdrop-filter: none;\n box-shadow: none;\n}\n\n/* borderless 必须移除 glass 描边环(.wui-glass::before 底环 + 对角光泽),\n 否则无框后仍残留 1px 胶囊描边 */\n:host([borderless]) .wui-input-inner::before {\n content: none;\n}\n\n/* Focus ring 独立成 ::after 层:base/focused 都是显式 box-shadow,保证所有变体都能过渡 */\n.wui-input-inner::after {\n pointer-events: none;\n content: '';\n\n position: absolute;\n inset: 0;\n\n border-radius: inherit;\n\n box-shadow:\n inset 0 0 0 1px transparent,\n 0 0 0 var(--wui-focus-ring-width, 3px) transparent;\n\n transition: box-shadow var(--wui-duration-focus, 200ms);\n}\n\n:host([focused]) .wui-input-inner::after {\n box-shadow:\n inset 0 0 0 1px var(--wui-color-accent, #08f),\n 0 0 0 var(--wui-focus-ring-width, 3px)\n var(--wui-color-focus-ring, color-mix(in srgb, var(--wui-color-accent, #08f) 40%, transparent));\n}\n\ninput {\n flex: 1;\n\n min-width: 0;\n height: 100%;\n margin: 0;\n padding: 0;\n border: none;\n\n /* 表单控件不继承字体;显式继承以对齐宿主排版,避免 UA 默认字体差异 */\n font: inherit;\n font-size: var(--wui-font-size, 14px);\n color: var(--wui-color-text, #1b1b1b);\n\n background: transparent;\n outline: none;\n\n &::placeholder {\n /* 占位文本的排版属于控件,不在这里另写一份:控件字号来自 `--wui-font-size`\n (粗指针下还有 max(16px, …) 的钳制),在这里写死 font-size 会绕过那条钳制。\n 三引擎的 UA 样式表目前都没给 ::placeholder 设字体,所以这行是声明而不是补丁——\n 契约由 shared/theme/__tests__/text-control-placeholder-typography.browser.spec.ts 守着。 */\n font: inherit;\n color: var(--wui-color-text-secondary, #6a6a6a);\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.4;\n }\n}\n\n/* Coarse pointers include iOS Safari, where a sub-16px font triggers focus zoom. */\n@media (pointer: coarse) {\n input {\n font-size: max(16px, var(--wui-font-size, 14px));\n }\n}\n\nslot {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n\n font-size: var(--wui-font-size, 14px);\n color: var(--wui-color-text-secondary, #6a6a6a);\n}\n\nslot.empty {\n display: none;\n}\n\n/* 复用 web-ui-button icon ghost:仅覆盖颜色为 faint,保持弱意图清除图标观感;\n 负 margin-left 抵消容器 flex gap,让清除按钮紧贴输入文本\n 负 margin-right 抵消 button padding,让清除按钮右侧 spacing 视觉上协调 */\n.wui-input-inner web-ui-button[variant='ghost'] {\n --wui-button-color: var(--wui-input-clear-color);\n margin-right: -4px;\n margin-left: -8px;\n}\n"],"mappings":""}
1
+ {"version":3,"file":"style.js","names":[],"sources":["../../../src/components/input/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n --wui-input-clear-color: var(--wui-color-text-tertiary, color-mix(in srgb, var(--wui-color-text) 35%, transparent));\n display: inline-block;\n}\n\n:host([disabled]),\n:host([data-form-disabled]) {\n cursor: not-allowed;\n opacity: 0.4;\n}\n\n.wui-input-inner {\n --wui-glass-corner-radius: calc(var(--wui-control-size, 36px) / 2);\n position: relative;\n\n display: flex;\n gap: var(--wui-space-2, 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 var(--wui-space-3, 12px);\n border-radius: var(--wui-radius-control, calc(infinity * 1px));\n}\n\n:host([full]) {\n display: block;\n}\n\n:host([full]) .wui-input-inner {\n width: 100%;\n}\n\n:host([borderless]) .wui-input-inner {\n border: none;\n background: transparent;\n backdrop-filter: none;\n box-shadow: none;\n}\n\n/* borderless 必须移除 glass 描边环(.wui-glass::before 底环 + 对角光泽),\n 否则无框后仍残留 1px 胶囊描边 */\n:host([borderless]) .wui-input-inner::before {\n content: none;\n}\n\n/* Focus ring 独立成 ::after 层:base/focused 都是显式 box-shadow,保证所有变体都能过渡 */\n.wui-input-inner::after {\n pointer-events: none;\n content: '';\n\n position: absolute;\n inset: 0;\n\n border-radius: inherit;\n\n box-shadow:\n inset 0 0 0 1px transparent,\n 0 0 0 var(--wui-focus-ring-width, 3px) transparent;\n\n transition: box-shadow var(--wui-duration-focus, 200ms);\n}\n\n:host([focused]) .wui-input-inner::after {\n box-shadow:\n inset 0 0 0 1px var(--wui-color-accent, #0071e3),\n 0 0 0 var(--wui-focus-ring-width, 3px)\n var(--wui-color-focus-ring, color-mix(in srgb, var(--wui-color-accent, #0071e3) 40%, transparent));\n}\n\ninput {\n flex: 1;\n\n min-width: 0;\n height: 100%;\n margin: 0;\n padding: 0;\n border: none;\n\n /* 表单控件不继承字体;显式继承以对齐宿主排版,避免 UA 默认字体差异 */\n font: inherit;\n font-size: var(--wui-font-size, 14px);\n color: var(--wui-color-text, #1b1b1b);\n\n background: transparent;\n outline: none;\n\n &::placeholder {\n /* 占位文本的排版属于控件,不在这里另写一份:控件字号来自 `--wui-font-size`\n (粗指针下还有 max(16px, …) 的钳制),在这里写死 font-size 会绕过那条钳制。\n 三引擎的 UA 样式表目前都没给 ::placeholder 设字体,所以这行是声明而不是补丁——\n 契约由 shared/theme/__tests__/text-control-placeholder-typography.browser.spec.ts 守着。 */\n font: inherit;\n color: var(--wui-color-text-secondary, #6a6a6a);\n }\n\n &:disabled {\n cursor: not-allowed;\n }\n}\n\n/* Coarse pointers include iOS Safari, where a sub-16px font triggers focus zoom. */\n@media (pointer: coarse) {\n input {\n font-size: max(16px, var(--wui-font-size, 14px));\n }\n}\n\nslot {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n\n font-size: var(--wui-font-size, 14px);\n color: var(--wui-color-text-secondary, #6a6a6a);\n}\n\nslot.empty {\n display: none;\n}\n\n/* 复用 web-ui-button icon ghost:仅覆盖颜色为 faint,保持弱意图清除 icon 观感;\n 负 margin-left 抵消容器 flex gap,让清除 button 紧贴输入文本\n 负 margin-right 抵消 button padding,让清除 button 右侧 spacing 视觉上协调 */\n.wui-input-inner web-ui-button[variant='ghost'] {\n --wui-button-color: var(--wui-input-clear-color);\n margin-right: -4px;\n margin-left: -8px;\n}\n"],"mappings":""}
@@ -370,8 +370,10 @@ export declare class WebUiInputNumber extends WebUiInputNumber_base {
370
370
  disabled: boolean;
371
371
  readonly: boolean;
372
372
  required: boolean;
373
+ ariaLabel: string | null;
374
+ ariaLabelledby: string | undefined;
373
375
  get precision(): number;
374
- set precision(v: number);
376
+ set precision(v: number | null);
375
377
  /** 原始值:只做 min/max 收敛,不按精度取整(取整发生在 get value)。 */
376
378
  private _value;
377
379
  /**
@@ -384,7 +386,31 @@ export declare class WebUiInputNumber extends WebUiInputNumber_base {
384
386
  private _step;
385
387
  private _focused;
386
388
  private _precision;
389
+ private _precisionWasSet;
387
390
  private readonly _fieldId;
391
+ private _labelledbyObserver;
392
+ private _releaseLabelledbyReferences;
393
+ private _labelledbyAncestorObserver;
394
+ private _observedLabelledbyRoot;
395
+ private _observedLabelledbyReferenceIds;
396
+ private _observedLabelledbyTargets;
397
+ private _observedLabelledbyMutationTargets;
398
+ private _observedLabelledbyValueControls;
399
+ private _observedLabelledbyAncestors;
400
+ private _observedLabelledbyText;
401
+ private _observedLabelledbyWindow;
402
+ private readonly _onLabelledbyViewportChange;
403
+ private readonly _onLabelledbyValueChange;
404
+ private get _supportsLabelledbyElements();
405
+ private _getLabelledbyIds;
406
+ private _getLabelledbyTargets;
407
+ private _getLabelledbyValueControls;
408
+ private _getObservedLabelledbyReferences;
409
+ private _isLabelledbyElementHidden;
410
+ private _getLabelledbyElementText;
411
+ private _getLabelledbyText;
412
+ private _getLabelledbyAncestors;
413
+ private _syncLabelledbyObserver;
388
414
  get value(): number;
389
415
  set value(v: number);
390
416
  private get _isDisabled();
@@ -395,11 +421,15 @@ export declare class WebUiInputNumber extends WebUiInputNumber_base {
395
421
  get step(): number;
396
422
  set step(v: unknown);
397
423
  private get _effectiveStep();
424
+ private get _effectivePrecision();
398
425
  private get atMin();
399
426
  private get atMax();
400
427
  private readonly _formAssociation;
401
428
  private readonly _formAssociationController;
429
+ connectedCallback(): void;
430
+ formDisabledCallback(disabled: boolean): void;
402
431
  updated(): void;
432
+ disconnectedCallback(): void;
403
433
  private _syncValidity;
404
434
  private clamp;
405
435
  private round;