@greypan/web-ui 6.0.0 → 6.2.0

package/dist/components/dropdown-item/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/dropdown-item/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  display: block;\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n  opacity: 0.4;\n}\n\n.item-inner {\n  user-select: none;\n\n  display: flex;\n  gap: 8px;\n  align-items: center;\n\n  height: 32px;\n  padding: 0 8px;\n  border-radius: calc(infinity * 1px);\n\n  font-size: var(--wui-font-size, 14px);\n  color: inherit;\n  white-space: nowrap;\n\n  outline: none;\n}\n\n.item-inner:focus-visible {\n  color: var(--wui-color-on-accent, #fff);\n  background: var(--wui-color-accent, #08f);\n}\n\n:host([active]) .item-inner {\n  color: inherit;\n  background: var(--wui-color-border, rgb(0 0 0 / 0.1));\n}\n\n@media (hover: hover) and (pointer: fine) {\n  :host(:hover) .item-inner {\n    color: var(--wui-color-on-accent, #fff);\n    background: var(--wui-color-accent, #08f);\n  }\n}\n\n.item-label {\n  overflow: hidden;\n  flex: 1;\n\n  min-width: 0;\n\n  color: inherit;\n  text-overflow: ellipsis;\n}\n\n.item-suffix {\n  flex: none;\n  opacity: 0.4;\n}\n"],"mappings":""}
+{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/dropdown-item/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  display: block;\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n  opacity: 0.4;\n}\n\n.item-inner {\n  user-select: none;\n\n  display: flex;\n  gap: 8px;\n  align-items: center;\n\n  height: 32px;\n  padding: 0 8px;\n  border-radius: var(--wui-radius-control, calc(infinity * 1px));\n\n  font-size: var(--wui-font-size, 14px);\n  color: inherit;\n  white-space: nowrap;\n\n  outline: none;\n}\n\n.item-inner:focus-visible {\n  color: var(--wui-color-on-accent, #fff);\n  background: var(--wui-color-accent, #08f);\n}\n\n:host([active]) .item-inner {\n  color: inherit;\n  background: var(--wui-color-border, rgb(0 0 0 / 0.1));\n}\n\n@media (hover: hover) and (pointer: fine) {\n  :host(:hover) .item-inner {\n    color: var(--wui-color-on-accent, #fff);\n    background: var(--wui-color-accent, #08f);\n  }\n}\n\n.item-label {\n  overflow: hidden;\n  flex: 1;\n\n  min-width: 0;\n\n  color: inherit;\n  text-overflow: ellipsis;\n}\n\n.item-suffix {\n  flex: none;\n  opacity: 0.4;\n}\n"],"mappings":""}

package/dist/components/empty/style.js

@@ -1,5 +1,5 @@
 //#region src/components/empty/style.css?inline
-var e = "*,:before,:after{box-sizing:border-box}:host{display:block}.empty{width:100%;min-block-size:var(--wui-empty-min-height,240px);padding:var(--wui-empty-padding,32px 24px);text-align:center;flex-direction:column;align-items:center;display:flex}.empty-icon{width:var(--wui-empty-icon-size,56px);height:var(--wui-empty-icon-size,56px);color:var(--wui-color-text-secondary,#6a6a6a);background-color:var(--wui-color-surface-track,#e5e5ea);box-shadow:none;border-radius:16px;flex:none;justify-content:center;align-items:center;display:flex}.empty-title,.empty-description,.empty-action{max-inline-size:var(--wui-empty-content-width,480px)}.empty-title{margin-top:var(--wui-empty-title-margin-top,16px);font-size:var(--wui-empty-title-font-size,16px);color:var(--wui-color-text,#1b1b1b);overflow-wrap:anywhere;font-weight:600;line-height:1.5}.empty-description{font-size:var(--wui-empty-description-font-size,14px);color:var(--wui-color-text-secondary,#6a6a6a);overflow-wrap:anywhere;margin-top:6px;line-height:1.6}.empty-action{margin-top:var(--wui-empty-action-margin-top,20px)}.is-hidden{display:none}:host([size=small]){--wui-empty-min-height:160px;--wui-empty-padding:20px 16px;--wui-empty-icon-size:40px;--wui-empty-title-margin-top:12px;--wui-empty-title-font-size:14px;--wui-empty-description-font-size:13px;--wui-empty-action-margin-top:16px}:host([size=large]){--wui-empty-min-height:320px;--wui-empty-padding:48px 32px;--wui-empty-icon-size:72px;--wui-empty-title-margin-top:20px;--wui-empty-title-font-size:18px;--wui-empty-action-margin-top:24px}";
+var e = "*,:before,:after{box-sizing:border-box}:host{display:block}.empty{width:100%;min-block-size:var(--wui-empty-min-height,240px);padding:var(--wui-empty-padding,32px 24px);text-align:center;flex-direction:column;align-items:center;display:flex}.empty-icon{width:var(--wui-empty-icon-size,56px);height:var(--wui-empty-icon-size,56px);border-radius:var(--wui-internal-empty-icon-radius,16px);color:var(--wui-color-text-secondary,#6a6a6a);background-color:var(--wui-color-surface-track,#e5e5ea);box-shadow:none;flex:none;justify-content:center;align-items:center;display:flex}.empty-title,.empty-description,.empty-action{max-inline-size:var(--wui-empty-content-width,480px)}.empty-title{margin-top:var(--wui-empty-title-margin-top,16px);font-size:var(--wui-empty-title-font-size,16px);color:var(--wui-color-text,#1b1b1b);overflow-wrap:anywhere;font-weight:600;line-height:1.5}.empty-description{font-size:var(--wui-empty-description-font-size,14px);color:var(--wui-color-text-secondary,#6a6a6a);overflow-wrap:anywhere;margin-top:6px;line-height:1.6}.empty-action{margin-top:var(--wui-empty-action-margin-top,20px)}.is-hidden{display:none}:host([size=small]){--wui-empty-min-height:160px;--wui-empty-padding:20px 16px;--wui-empty-icon-size:40px;--wui-empty-title-margin-top:12px;--wui-empty-title-font-size:14px;--wui-empty-description-font-size:13px;--wui-empty-action-margin-top:16px}:host([size=large]){--wui-empty-min-height:320px;--wui-empty-padding:48px 32px;--wui-empty-icon-size:72px;--wui-empty-title-margin-top:20px;--wui-empty-title-font-size:18px;--wui-empty-action-margin-top:24px}";
 //#endregion
 export { e as default };
 

package/dist/components/empty/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/empty/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  display: block;\n}\n\n.empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  width: 100%;\n  min-block-size: var(--wui-empty-min-height, 240px);\n  padding: var(--wui-empty-padding, 32px 24px);\n\n  text-align: center;\n}\n\n.empty-icon {\n  display: flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n\n  width: var(--wui-empty-icon-size, 56px);\n  height: var(--wui-empty-icon-size, 56px);\n  border-radius: 16px;\n\n  color: var(--wui-color-text-secondary, #6a6a6a);\n\n  background-color: var(--wui-color-surface-track, #e5e5ea);\n  box-shadow: none;\n}\n\n.empty-title,\n.empty-description,\n.empty-action {\n  max-inline-size: var(--wui-empty-content-width, 480px);\n}\n\n.empty-title {\n  margin-top: var(--wui-empty-title-margin-top, 16px);\n\n  font-size: var(--wui-empty-title-font-size, 16px);\n  font-weight: 600;\n  line-height: 1.5;\n  color: var(--wui-color-text, #1b1b1b);\n  overflow-wrap: anywhere;\n}\n\n.empty-description {\n  margin-top: 6px;\n\n  font-size: var(--wui-empty-description-font-size, 14px);\n  line-height: 1.6;\n  color: var(--wui-color-text-secondary, #6a6a6a);\n  overflow-wrap: anywhere;\n}\n\n.empty-action {\n  margin-top: var(--wui-empty-action-margin-top, 20px);\n}\n\n.is-hidden {\n  display: none;\n}\n\n:host([size='small']) {\n  --wui-empty-min-height: 160px;\n  --wui-empty-padding: 20px 16px;\n  --wui-empty-icon-size: 40px;\n  --wui-empty-title-margin-top: 12px;\n  --wui-empty-title-font-size: 14px;\n  --wui-empty-description-font-size: 13px;\n  --wui-empty-action-margin-top: 16px;\n}\n\n:host([size='large']) {\n  --wui-empty-min-height: 320px;\n  --wui-empty-padding: 48px 32px;\n  --wui-empty-icon-size: 72px;\n  --wui-empty-title-margin-top: 20px;\n  --wui-empty-title-font-size: 18px;\n  --wui-empty-action-margin-top: 24px;\n}\n"],"mappings":""}
+{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/empty/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  display: block;\n}\n\n.empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  width: 100%;\n  min-block-size: var(--wui-empty-min-height, 240px);\n  padding: var(--wui-empty-padding, 32px 24px);\n\n  text-align: center;\n}\n\n.empty-icon {\n  display: flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n\n  width: var(--wui-empty-icon-size, 56px);\n  height: var(--wui-empty-icon-size, 56px);\n  border-radius: var(--wui-internal-empty-icon-radius, 16px);\n\n  color: var(--wui-color-text-secondary, #6a6a6a);\n\n  background-color: var(--wui-color-surface-track, #e5e5ea);\n  box-shadow: none;\n}\n\n.empty-title,\n.empty-description,\n.empty-action {\n  max-inline-size: var(--wui-empty-content-width, 480px);\n}\n\n.empty-title {\n  margin-top: var(--wui-empty-title-margin-top, 16px);\n\n  font-size: var(--wui-empty-title-font-size, 16px);\n  font-weight: 600;\n  line-height: 1.5;\n  color: var(--wui-color-text, #1b1b1b);\n  overflow-wrap: anywhere;\n}\n\n.empty-description {\n  margin-top: 6px;\n\n  font-size: var(--wui-empty-description-font-size, 14px);\n  line-height: 1.6;\n  color: var(--wui-color-text-secondary, #6a6a6a);\n  overflow-wrap: anywhere;\n}\n\n.empty-action {\n  margin-top: var(--wui-empty-action-margin-top, 20px);\n}\n\n.is-hidden {\n  display: none;\n}\n\n:host([size='small']) {\n  --wui-empty-min-height: 160px;\n  --wui-empty-padding: 20px 16px;\n  --wui-empty-icon-size: 40px;\n  --wui-empty-title-margin-top: 12px;\n  --wui-empty-title-font-size: 14px;\n  --wui-empty-description-font-size: 13px;\n  --wui-empty-action-margin-top: 16px;\n}\n\n:host([size='large']) {\n  --wui-empty-min-height: 320px;\n  --wui-empty-padding: 48px 32px;\n  --wui-empty-icon-size: 72px;\n  --wui-empty-title-margin-top: 20px;\n  --wui-empty-title-font-size: 18px;\n  --wui-empty-action-margin-top: 24px;\n}\n"],"mappings":""}

package/dist/components/image-preview/index.d.ts

@@ -0,0 +1,58 @@
+export interface ImagePreviewItem {
+    src: string;
+    /** 无障碍替代文本；也用于图片加载失败时的回退展示。 */
+    alt?: string;
+}
+export interface ImagePreviewOptions {
+    images: ImagePreviewItem[];
+    /** 初始图片索引，越界时钳制到有效区间。默认 0。 */
+    index?: number;
+    /** 首尾循环切换。默认 true。 */
+    loop?: boolean;
+    /** 用于解析最近 web-ui-theme 作用域的触发元素。 */
+    target?: Element;
+    /** 显式挂载容器，优先级高于 target 和主题作用域。 */
+    container?: HTMLElement;
+    /** 展示上一张 / 下一张按钮；仅在图片多于一张时渲染。默认 false。 */
+    nav?: boolean;
+    /** 展示缩放工具条。默认 false。 */
+    toolbar?: boolean;
+    /** 展示关闭按钮。默认 false。 */
+    closable?: boolean;
+    /** 展示「当前 / 总数」指示器。默认 false。 */
+    indicator?: boolean;
+    /**
+     * 1x 且图片多于一张时，允许左右滑动切换图片：该手势接管整个拖拽，纵向位移被忽略
+     * （不驱平移、不跟手），横向用于切图。放大后拖拽一律平移（纵横都跟）、不再切图。
+     * 默认 false。
+     */
+    swipe?: boolean;
+    /** 打开期间不锁定页面滚动，语义与 `<web-ui-dialog>` 的 `noScrollLock` 一致。默认 false。 */
+    noScrollLock?: boolean;
+    /** 点击图片以外的空白区域不关闭，语义与 `<web-ui-dialog>` 的 `noBackdropClose` 一致。默认 false。 */
+    noBackdropClose?: boolean;
+}
+export interface ImagePreviewHandle {
+    /** 当前图片索引；关闭后仍保留最后一次的值。 */
+    readonly index: number;
+    /** 当前缩放倍率，区间 [1, 4]；切换图片时重置为 1。 */
+    readonly scale: number;
+    readonly images: readonly ImagePreviewItem[];
+    /** 退场过渡结束、宿主已从 DOM 移除后兑现。 */
+    readonly closed: Promise<void>;
+    next(): void;
+    prev(): void;
+    goTo(index: number): void;
+    zoomIn(): void;
+    zoomOut(): void;
+    resetZoom(): void;
+    close(): void;
+}
+/**
+ * 打开一个命令式图片预览。
+ *
+ * 组件挂载到目标 `web-ui-theme` 的 overlay 容器（无主题作用域时回退到全局
+ * fallback root），返回的句柄是唯一的控制入口。所有展示类选项默认关闭，
+ * 默认只渲染图片本身。
+ */
+export declare function imagePreview(options: ImagePreviewOptions): ImagePreviewHandle;

package/dist/components/image-preview/index.js

@@ -0,0 +1,481 @@
+import e from "../../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorate.js";
+import "../icon/index.js";
+import t from "../../icons/generated/lucide-chevron-left.js";
+import n from "../../icons/generated/lucide-chevron-right.js";
+import r from "../../icons/generated/lucide-plus.js";
+import i from "../../icons/generated/lucide-minus.js";
+import a from "../../icons/generated/ooui-close.js";
+import o from "../../icons/generated/radix-icons-reset.js";
+import s from "../../assets/glass.js";
+import { getFallbackOverlayRoot as c } from "../../shared/overlay/overlay-root.js";
+import { findNearestTheme as l, findRootTheme as u } from "../../shared/overlay/theme-overlay-scope.js";
+import { defineScrollLockLease as d } from "../../shared/scroll-lock/scroll-lock.js";
+import "../button/index.js";
+import { defineNativeDialogPresence as f } from "../../shared/overlay/native-dialog-presence.js";
+import { attachDragGesture as p } from "../../shared/gesture/drag-gesture.js";
+import { clamp as m } from "../../shared/gesture/physics.js";
+import { attachPinchGesture as h } from "../../shared/gesture/pinch-gesture.js";
+import g from "./style.js";
+import { LitElement as _, html as v, nothing as y, unsafeCSS as b } from "lit";
+import { customElement as x, property as S, state as C } from "lit/decorators.js";
+import { classMap as w } from "lit/directives/class-map.js";
+import { styleMap as T } from "lit/directives/style-map.js";
+//#region src/components/image-preview/index.ts
+var E = 1, D = 4, O = .5, k = .002, A = 3, j = .15, M = 320, N = 16, P = 160, F = 320, I = class extends _ {
+	constructor(...e) {
+		super(...e), this.images = [], this.loop = !0, this.nav = !1, this.toolbar = !1, this.closable = !1, this.indicator = !1, this.swipe = !1, this.noScrollLock = !1, this.noBackdropClose = !1, this._open = !1, this._index = 0, this._scale = E, this._offsetX = 0, this._offsetY = 0, this._swipeOffset = 0, this._swipeSettling = !1, this._dragging = !1, this._loadedSources = /* @__PURE__ */ new Set(), this._swipeDir = 0, this._swipeStartTime = 0, this._swipeSettleCommit = !1, this._swipeSettleDir = 1, this._scrollLock = d().make(), this._presence = f().make({
+			getDialog: () => this.dialog,
+			isConnected: () => this.isConnected,
+			isOpen: () => this._open
+		}), this._dismissed = !1, this._swipeGesture = !1, this._panOriginX = 0, this._panOriginY = 0, this._dragged = !1, this._blankPointerDown = !1, this._pinchScale = E, this._pinchLocalX = 0, this._pinchLocalY = 0, this._handleImageSettled = (e) => {
+			let t = e.currentTarget;
+			t && (this._loadedSources.add(t.src), this.requestUpdate());
+		}, this._handleCancel = (e) => {
+			e.preventDefault(), this.close();
+		}, this._handleNativeClose = () => {
+			this._notifyDismissed();
+		}, this._handleTransitionEnd = (e) => {
+			this._presence.handleTransitionEnd(e);
+		}, this._handleKeydown = (e) => {
+			if (!(!this._open || e.defaultPrevented) && !(e.altKey || e.ctrlKey || e.metaKey)) switch (e.key) {
+				case "ArrowLeft":
+					e.preventDefault(), this.prev();
+					break;
+				case "ArrowRight":
+					e.preventDefault(), this.next();
+					break;
+				case "+":
+				case "=":
+					e.preventDefault(), this.zoomIn();
+					break;
+				case "-":
+				case "_":
+					e.preventDefault(), this.zoomOut();
+					break;
+				case "0": e.preventDefault(), this.resetZoom();
+			}
+		}, this._handleWheel = (e) => {
+			if (!this._open) return;
+			e.preventDefault();
+			let t = e.deltaMode === 1 ? e.deltaY * 16 : e.deltaY, n = this._stageOrigin();
+			this._zoomAt(this._scale * Math.exp(-t * k), e.clientX - n.x, e.clientY - n.y);
+		}, this._handleClick = (e) => {
+			if (!this._open) return;
+			let t = this._blankPointerDown;
+			if (this._blankPointerDown = !1, t && e.detail !== 0) {
+				if (this._dragged) {
+					this._dragged = !1;
+					return;
+				}
+				this.noBackdropClose || this.close();
+			}
+		}, this._handleDoubleClick = (e) => {
+			!this._open || e.target !== this._image || (this._scale > E ? this.resetZoom() : this._setScale(D / 2));
+		}, this._handlePinchStart = (e) => {
+			if (!this._open) return;
+			this._endGesture(), this._dragging = !0, this._dragged = !0;
+			let t = this._stageOrigin();
+			this._pinchScale = this._scale, this._pinchLocalX = (e.centerX - t.x - this._offsetX) / this._scale, this._pinchLocalY = (e.centerY - t.y - this._offsetY) / this._scale;
+		}, this._handlePinchMove = (e) => {
+			if (!this._open) return;
+			let t = m(this._pinchScale * e.ratio, E, D), n = this._stageOrigin();
+			this._applyScale(t, e.centerX - n.x - this._pinchLocalX * t, e.centerY - n.y - this._pinchLocalY * t);
+		}, this._handlePinchEnd = () => {
+			this._dragging = !1;
+		}, this._handlePinchCancel = () => {
+			this._dragging = !1;
+		}, this._handleSwipeSettleEnd = (e) => {
+			!this._swipeSettling || e.propertyName !== "transform" || this._finishSwipeSettle();
+		}, this._handlePointerDown = (e) => {
+			if (!this._open || (this._cancelSwipeSettle(), this._swipeDir = 0, this._swipeOffset = 0, e.button !== 0 || e.isPrimary === !1)) return;
+			this._blankPointerDown = this._isBlank(e.target), this._dragged = !1;
+			let t = this._stage;
+			!t || e.target !== t && !t.contains(e.target) || (this._swipeGesture = this._scale === E && this.swipe && this.images.length > 1, this._swipeStartTime = e.timeStamp, this._panOriginX = this._offsetX, this._panOriginY = this._offsetY, this._gesture?.destroy(), this._gesture = p(e, {
+				axis: "both",
+				threshold: A,
+				onMove: (e) => {
+					this._swipeGesture ? (this._swipeOffset = e.deltaX, e.deltaX !== 0 && (this._swipeDir = e.deltaX < 0 ? 1 : -1)) : this._panTo(e.deltaX, e.deltaY);
+				},
+				onEnd: (e) => {
+					this._dragged = !0, this._dragging = !1, this._swipeGesture && this._settleSwipe(e.deltaX, e.velocityX, e.timeStamp);
+				},
+				onTap: () => {
+					this._dragging = !1;
+				},
+				onCancel: () => {
+					this._dragging = !1, this._cancelSwipeSettle(), this._swipeDir = 0, this._swipeOffset = 0;
+				}
+			}), this._dragging = !0);
+		};
+	}
+	static {
+		this.styles = [b(s), b(g)];
+	}
+	get dialog() {
+		return this.shadowRoot?.querySelector("dialog") ?? null;
+	}
+	get _stage() {
+		return this.shadowRoot?.querySelector(".wui-image-preview-stage") ?? null;
+	}
+	get _image() {
+		return this.shadowRoot?.querySelector(".wui-image-preview-slide.is-current .wui-image-preview-image") ?? null;
+	}
+	get index() {
+		return this._index;
+	}
+	get scale() {
+		return this._scale;
+	}
+	configure(e) {
+		this.images = e.images, this.loop = e.loop, this.nav = e.nav, this.toolbar = e.toolbar, this.closable = e.closable, this.indicator = e.indicator, this.swipe = e.swipe, this.noScrollLock = e.noScrollLock, this.noBackdropClose = e.noBackdropClose, this._index = m(e.index, 0, Math.max(0, e.images.length - 1));
+	}
+	show() {
+		this._open ||= (this._dismissed = !1, !0);
+	}
+	close() {
+		this._open &&= (this._endGesture(), !1);
+	}
+	goTo(e) {
+		let t = this.images.length;
+		if (t === 0) return;
+		let n = this.loop ? (e % t + t) % t : m(e, 0, t - 1);
+		n !== this._index && (this._index = n, this.resetZoom());
+	}
+	next() {
+		this.goTo(this._index + 1);
+	}
+	prev() {
+		this.goTo(this._index - 1);
+	}
+	zoomIn() {
+		this._setScale(this._scale + O);
+	}
+	zoomOut() {
+		this._setScale(this._scale - O);
+	}
+	resetZoom() {
+		(this._scale !== E || this._offsetX !== 0 || this._offsetY !== 0) && (this._scale = E, this._offsetX = 0, this._offsetY = 0);
+	}
+	firstUpdated() {
+		let e = this._stage;
+		e && (this._pinch = h(e, {
+			onStart: this._handlePinchStart,
+			onMove: this._handlePinchMove,
+			onEnd: this._handlePinchEnd,
+			onCancel: this._handlePinchCancel
+		}));
+	}
+	updated(e) {
+		super.updated(e), this.isConnected && (e.has("_open") && (this._presence.sync(this._open), !this._open && !this.dialog?.open && queueMicrotask(() => this._notifyDismissed())), (e.has("_open") || e.has("noScrollLock")) && this._syncScrollLock());
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this._endGesture(), this._pinch?.destroy(), this._pinch = void 0, this._presence.dispose(), this._scrollLock.release();
+	}
+	_syncScrollLock() {
+		this._scrollLock.sync(this._open && !this.noScrollLock);
+	}
+	_notifyDismissed() {
+		this._dismissed || this._open || (this._dismissed = !0, this.dispatchEvent(new CustomEvent("preview-dismissed")));
+	}
+	_zoomAt(e, t, n) {
+		let r = m(e, E, D);
+		if (r === this._scale) return;
+		let i = r / this._scale;
+		this._applyScale(r, t - (t - this._offsetX) * i, n - (n - this._offsetY) * i);
+	}
+	_applyScale(e, t, n) {
+		if (this._scale = e, e === E) {
+			this._offsetX = 0, this._offsetY = 0;
+			return;
+		}
+		this._offsetX = t, this._offsetY = n, this._clampOffsets();
+	}
+	_setScale(e) {
+		this._zoomAt(e, 0, 0);
+	}
+	_stageOrigin() {
+		let e = this._stage;
+		if (!e) return {
+			x: 0,
+			y: 0
+		};
+		let t = e.getBoundingClientRect();
+		return {
+			x: t.left + t.width / 2,
+			y: t.top + t.height / 2
+		};
+	}
+	_offsetBounds() {
+		let e = this._stage, t = this._image;
+		if (!e || !t) return {
+			x: 0,
+			y: 0
+		};
+		let n = t.offsetWidth, r = t.offsetHeight;
+		return !n || !r ? {
+			x: 0,
+			y: 0
+		} : {
+			x: Math.abs(n * this._scale - e.clientWidth) / 2,
+			y: Math.abs(r * this._scale - e.clientHeight) / 2
+		};
+	}
+	get _isPanned() {
+		return this._offsetX !== 0 || this._offsetY !== 0;
+	}
+	_clampOffsets() {
+		let e = this._offsetBounds();
+		this._offsetX = m(this._offsetX, -e.x, e.x), this._offsetY = m(this._offsetY, -e.y, e.y);
+	}
+	_isBlank(e) {
+		return e === this.dialog || e === this._stage;
+	}
+	_endGesture() {
+		this._gesture?.destroy(), this._gesture = void 0, this._dragging = !1, this._cancelSwipeSettle(), this._swipeDir = 0, this._swipeOffset = 0;
+	}
+	_adjacentIndex(e) {
+		let t = this.images.length;
+		if (t === 0) return -1;
+		if (this.loop) return ((this._index + e) % t + t) % t;
+		let n = this._index + e;
+		return n >= 0 && n < t ? n : -1;
+	}
+	_cancelSwipeSettle() {
+		this._swipeSettleTimer !== void 0 && (clearTimeout(this._swipeSettleTimer), this._swipeSettleTimer = void 0), this._swipeSettling = !1, this._swipeSettleCommit = !1, this._swipeSettleDir = 1;
+	}
+	_finishSwipeSettle() {
+		if (this._swipeSettleTimer === void 0) return;
+		clearTimeout(this._swipeSettleTimer), this._swipeSettleTimer = void 0;
+		let e = this._swipeSettleCommit, t = this._swipeSettleDir;
+		this._swipeSettling = !1, this._swipeSettleCommit = !1, this._swipeDir = 0, this._swipeOffset = 0, e && this._commitSwipeTo(t);
+	}
+	_commitSwipeTo(e) {
+		let t = this._adjacentIndex(e);
+		t < 0 || t === this._index || (this._index = t, this.resetZoom());
+	}
+	_settleSwipe(e, t, n) {
+		let r = this._swipeDir, i = this._stage?.clientWidth ?? 0;
+		if (r === 0 || i <= 0) {
+			this._swipeOffset = 0;
+			return;
+		}
+		let a = Math.max(1, Math.round(i * j)), o = n - this._swipeStartTime, s = o >= 2 ? e / o * 1e3 : 0, c = (Math.abs(e) >= a || Math.abs(t) >= M || Math.abs(e) >= N && Math.max(Math.abs(t), Math.abs(s)) >= P) && this._adjacentIndex(r) !== -1;
+		this._swipeSettling = !0, this._swipeSettleCommit = c, this._swipeSettleDir = r, this._swipeOffset = c ? -r * i : 0, this._swipeSettleTimer = setTimeout(() => this._finishSwipeSettle(), F);
+	}
+	_panTo(e, t) {
+		let n = this._offsetBounds();
+		this._offsetX = m(this._panOriginX + e, -n.x, n.x), this._offsetY = m(this._panOriginY + t, -n.y, n.y);
+	}
+	render() {
+		let e = this.images.length, s = this._scale > E, c = e > 0 ? this._adjacentIndex(-1) : -1, l = e > 0 ? this._adjacentIndex(1) : -1, u = `translate3d(${this._swipeOffset}px, 0, 0)`, d = `translate3d(${this._offsetX}px, ${this._offsetY}px, 0) scale(${this._scale})`, f = s ? "translate3d(0, 0, 0) scale(1)" : `translate3d(0, ${this._offsetY}px, 0) scale(1)`;
+		return v`
+      <dialog
+        aria-label="图片预览"
+        @cancel=${this._handleCancel}
+        @close=${this._handleNativeClose}
+        @pointerdown=${this._handlePointerDown}
+        @click=${this._handleClick}
+        @dblclick=${this._handleDoubleClick}
+        @keydown=${this._handleKeydown}
+        @wheel=${this._handleWheel}
+        @transitionend=${this._handleTransitionEnd}
+      >
+        <div class="wui-image-preview-backdrop" aria-hidden="true"></div>
+        <div class="wui-image-preview-content">
+          <div class="wui-image-preview-surface">
+            <div
+              class=${w({
+			"wui-image-preview-stage": !0,
+			"is-zoomed": s,
+			"is-dragging": this._dragging,
+			"is-settling": this._swipeSettling
+		})}
+            >
+              <div
+                class="wui-image-preview-track"
+                style=${T({ transform: u })}
+                @transitionend=${this._handleSwipeSettleEnd}
+              >
+                ${c >= 0 ? v`
+                        <div class="wui-image-preview-slide is-prev" aria-hidden="true">
+                          <img
+                            class=${w({
+			"wui-image-preview-image": !0,
+			"is-loaded": this._loadedSources.has(this.images[c].src)
+		})}
+                            src=${this.images[c].src}
+                            alt=${this.images[c].alt ?? ""}
+                            draggable="false"
+                            style=${T({ transform: f })}
+                            @load=${this._handleImageSettled}
+                            @error=${this._handleImageSettled}
+                          />
+                        </div>
+                      ` : y}
+                ${e > 0 ? v`
+                        <div class="wui-image-preview-slide is-current">
+                          <img
+                            class=${w({
+			"wui-image-preview-image": !0,
+			"is-loaded": this._loadedSources.has(this.images[this._index].src)
+		})}
+                            src=${this.images[this._index].src}
+                            alt=${this.images[this._index].alt ?? ""}
+                            draggable="false"
+                            style=${T({ transform: d })}
+                            @load=${this._handleImageSettled}
+                            @error=${this._handleImageSettled}
+                          />
+                        </div>
+                      ` : y}
+                ${l >= 0 ? v`
+                        <div class="wui-image-preview-slide is-next" aria-hidden="true">
+                          <img
+                            class=${w({
+			"wui-image-preview-image": !0,
+			"is-loaded": this._loadedSources.has(this.images[l].src)
+		})}
+                            src=${this.images[l].src}
+                            alt=${this.images[l].alt ?? ""}
+                            draggable="false"
+                            style=${T({ transform: f })}
+                            @load=${this._handleImageSettled}
+                            @error=${this._handleImageSettled}
+                          />
+                        </div>
+                      ` : y}
+              </div>
+            </div>
+          </div>
+          <div class="wui-image-preview-controls">
+            ${this.indicator ? v`<span class="wui-image-preview-counter wui-glass" aria-live="polite"
+                    >${this._index + 1} / ${e}</span
+                  >` : y}
+            ${this.closable ? v`
+                    <web-ui-button
+                      class="wui-image-preview-close"
+                      variant="glass"
+                      icon
+                      size="36"
+                      aria-label="关闭"
+                      @click=${this.close}
+                    >
+                      <web-ui-icon size="16" .icon=${a}></web-ui-icon>
+                    </web-ui-button>
+                  ` : y}
+            ${this.nav && e > 1 ? v`
+                    <web-ui-button
+                      class="wui-image-preview-nav wui-image-preview-nav-prev"
+                      variant="glass"
+                      icon
+                      size="44"
+                      aria-label="上一张"
+                      ?disabled=${!this.loop && this._index === 0}
+                      @click=${this.prev}
+                    >
+                      <web-ui-icon size="20" .icon=${t}></web-ui-icon>
+                    </web-ui-button>
+                    <web-ui-button
+                      class="wui-image-preview-nav wui-image-preview-nav-next"
+                      variant="glass"
+                      icon
+                      size="44"
+                      aria-label="下一张"
+                      ?disabled=${!this.loop && this._index === e - 1}
+                      @click=${this.next}
+                    >
+                      <web-ui-icon size="20" .icon=${n}></web-ui-icon>
+                    </web-ui-button>
+                  ` : y}
+            ${this.toolbar ? v`
+                    <div class="wui-image-preview-toolbar wui-glass">
+                      <web-ui-button
+                        variant="glass"
+                        icon
+                        size="30"
+                        aria-label="缩小"
+                        ?disabled=${this._scale <= E}
+                        @click=${this.zoomOut}
+                      >
+                        <web-ui-icon size="16" .icon=${i}></web-ui-icon>
+                      </web-ui-button>
+                      <span class="wui-image-preview-scale">${Math.round(this._scale * 100)}%</span>
+                      <web-ui-button
+                        variant="glass"
+                        icon
+                        size="30"
+                        aria-label="放大"
+                        ?disabled=${this._scale >= D}
+                        @click=${this.zoomIn}
+                      >
+                        <web-ui-icon size="16" .icon=${r}></web-ui-icon>
+                      </web-ui-button>
+                      <web-ui-button
+                        variant="glass"
+                        icon
+                        size="30"
+                        aria-label="重置缩放"
+                        ?disabled=${this._scale <= E && !this._isPanned}
+                        @click=${this.resetZoom}
+                      >
+                        <web-ui-icon size="16" .icon=${o}></web-ui-icon>
+                      </web-ui-button>
+                    </div>
+                  ` : y}
+          </div>
+        </div>
+      </dialog>
+    `;
+	}
+};
+e([S({ attribute: !1 })], I.prototype, "images", void 0), e([S({ attribute: !1 })], I.prototype, "loop", void 0), e([S({ attribute: !1 })], I.prototype, "nav", void 0), e([S({ attribute: !1 })], I.prototype, "toolbar", void 0), e([S({ attribute: !1 })], I.prototype, "closable", void 0), e([S({ attribute: !1 })], I.prototype, "indicator", void 0), e([S({ attribute: !1 })], I.prototype, "swipe", void 0), e([S({ attribute: !1 })], I.prototype, "noScrollLock", void 0), e([S({ attribute: !1 })], I.prototype, "noBackdropClose", void 0), e([C()], I.prototype, "_open", void 0), e([C()], I.prototype, "_index", void 0), e([C()], I.prototype, "_scale", void 0), e([C()], I.prototype, "_offsetX", void 0), e([C()], I.prototype, "_offsetY", void 0), e([C()], I.prototype, "_swipeOffset", void 0), e([C()], I.prototype, "_swipeSettling", void 0), e([C()], I.prototype, "_dragging", void 0), I = e([x("web-ui-image-preview")], I);
+function L(e) {
+	let t = (e.images ?? []).map((e) => ({
+		src: e.src,
+		alt: e.alt ?? ""
+	}));
+	if (t.length === 0) throw Error("[web-ui-image-preview] imagePreview requires at least one image");
+	let n = e.target ? l(e.target) : u(), r = e.container ?? n?.getOverlayRoot() ?? c(), i = document.createElement("web-ui-image-preview");
+	i.configure({
+		images: t,
+		index: e.index ?? 0,
+		loop: e.loop ?? !0,
+		nav: e.nav ?? !1,
+		toolbar: e.toolbar ?? !1,
+		closable: e.closable ?? !1,
+		indicator: e.indicator ?? !1,
+		swipe: e.swipe ?? !1,
+		noScrollLock: e.noScrollLock ?? !1,
+		noBackdropClose: e.noBackdropClose ?? !1
+	});
+	let a, o = new Promise((e) => {
+		a = e;
+	});
+	return i.addEventListener("preview-dismissed", () => {
+		i.remove(), a?.(), a = void 0;
+	}, { once: !0 }), r.appendChild(i), i.show(), {
+		get index() {
+			return i.index;
+		},
+		get scale() {
+			return i.scale;
+		},
+		get images() {
+			return i.images;
+		},
+		get closed() {
+			return o;
+		},
+		next: () => i.next(),
+		prev: () => i.prev(),
+		goTo: (e) => i.goTo(e),
+		zoomIn: () => i.zoomIn(),
+		zoomOut: () => i.zoomOut(),
+		resetZoom: () => i.resetZoom(),
+		close: () => i.close()
+	};
+}
+//#endregion
+export { L as imagePreview };
+
+//# sourceMappingURL=index.js.map