@greypan/web-ui 9.0.0 → 10.0.0

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

@@ -12,26 +12,27 @@ import { defineOpenOverlay as c } from "../../shared/overlay/open-overlay.js";
 import { getFallbackOverlayRoot as l } from "../../shared/overlay/overlay-root.js";
 import { findNearestTheme as u, findRootTheme as d } from "../../shared/overlay/theme-overlay-scope.js";
 import { defineScrollLockLease as f } from "../../shared/scroll-lock/scroll-lock.js";
-import { defineNativeDialogPresence as p } from "../../shared/overlay/native-dialog-presence.js";
-import { attachDragGesture as m } from "../../shared/gesture/drag-gesture.js";
-import { clamp as h } from "../../shared/gesture/physics.js";
-import { attachPinchGesture as g } from "../../shared/gesture/pinch-gesture.js";
-import _ from "./style.js";
-import { LitElement as v, html as y, nothing as b, unsafeCSS as x } from "lit";
-import { customElement as S, property as C, state as w } from "lit/decorators.js";
-import { classMap as T } from "lit/directives/class-map.js";
-import { styleMap as E } from "lit/directives/style-map.js";
+import p from "../../assets/modal-surface.js";
+import { defineNativeDialogPresence as m } from "../../shared/overlay/native-dialog-presence.js";
+import { attachDragGesture as h } from "../../shared/gesture/drag-gesture.js";
+import { clamp as g } from "../../shared/gesture/physics.js";
+import { attachPinchGesture as _ } from "../../shared/gesture/pinch-gesture.js";
+import v from "./style.js";
+import { LitElement as y, html as b, nothing as x, unsafeCSS as S } from "lit";
+import { customElement as C, property as w, state as T } from "lit/decorators.js";
+import { classMap as E } from "lit/directives/class-map.js";
+import { styleMap as D } from "lit/directives/style-map.js";
 //#region src/components/image-preview/index.ts
-var D = 1, O = 4, k = .5, A = .002, j = 3, M = .15, N = 320, P = 16, F = 160, I = 320, L = class extends v {
+var O = 1, k = 4, A = .5, j = .002, M = 3, N = .15, P = 320, F = 16, I = 160, L = 320, R = class extends y {
 	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 = D, 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 = f().make(), this._overlay = c().make({
+		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 = O, 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 = f().make(), this._overlay = c().make({
 			requestClose: () => this.close(),
 			isConnected: () => this.isConnected
-		}), this._handle = null, this._presence = p().make({
+		}), this._handle = null, this._presence = m().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 = D, this._pinchLocalX = 0, this._pinchLocalY = 0, this._handleImageSettled = (e) => {
+		}), this._dismissed = !1, this._swipeGesture = !1, this._panOriginX = 0, this._panOriginY = 0, this._dragged = !1, this._blankPointerDown = !1, this._pinchScale = O, this._pinchLocalX = 0, this._pinchLocalY = 0, this._handleImageSettled = (e) => {
 			let t = e.currentTarget;
 			t && (this._markLoaded(t), this.requestUpdate());
 		}, this._handleCancel = (e) => {
@@ -62,7 +63,7 @@ var D = 1, O = 4, k = .5, A = .002, j = 3, M = .15, N = 320, P = 16, F = 160, I
 			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 * A), e.clientX - n.x, e.clientY - n.y);
+			this._zoomAt(this._scale * Math.exp(-t * j), e.clientX - n.x, e.clientY - n.y);
 		}, this._handleClick = (e) => {
 			if (!this._open) return;
 			let t = this._blankPointerDown;
@@ -74,7 +75,7 @@ var D = 1, O = 4, k = .5, A = .002, j = 3, M = .15, N = 320, P = 16, F = 160, I
 				this.noBackdropClose || this.close();
 			}
 		}, this._handleDoubleClick = (e) => {
-			this._open && e.target === this._image && (this._scale > D ? this.resetZoom() : this._setScale(O / 2));
+			this._open && e.target === this._image && (this._scale > O ? this.resetZoom() : this._setScale(k / 2));
 		}, this._handlePinchStart = (e) => {
 			if (!this._open) return;
 			this._endGesture(), this._dragging = !0, this._dragged = !0;
@@ -82,7 +83,7 @@ var D = 1, O = 4, k = .5, A = .002, j = 3, M = .15, N = 320, P = 16, F = 160, I
 			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 = h(this._pinchScale * e.ratio, D, O), n = this._stageOrigin();
+			let t = g(this._pinchScale * e.ratio, O, k), 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;
@@ -94,9 +95,9 @@ var D = 1, O = 4, k = .5, A = .002, j = 3, M = .15, N = 320, P = 16, F = 160, I
 			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 === D && this.swipe && this.images.length > 1, this._swipeStartTime = e.timeStamp, this._panOriginX = this._offsetX, this._panOriginY = this._offsetY, this._gesture?.destroy(), this._gesture = m(e, {
+			t && (e.target === t || t.contains(e.target)) && (this._swipeGesture = this._scale === O && this.swipe && this.images.length > 1, this._swipeStartTime = e.timeStamp, this._panOriginX = this._offsetX, this._panOriginY = this._offsetY, this._gesture?.destroy(), this._gesture = h(e, {
 				axis: "both",
-				threshold: j,
+				threshold: M,
 				onMove: (e) => {
 					this._swipeGesture ? (this._swipeOffset = e.deltaX, e.deltaX !== 0 && (this._swipeDir = e.deltaX < 0 ? 1 : -1)) : this._panTo(e.deltaX, e.deltaY);
 				},
@@ -113,7 +114,11 @@ var D = 1, O = 4, k = .5, A = .002, j = 3, M = .15, N = 320, P = 16, F = 160, I
 		};
 	}
 	static {
-		this.styles = [x(t), x(_)];
+		this.styles = [
+			S(t),
+			S(p),
+			S(v)
+		];
 	}
 	get dialog() {
 		return this.shadowRoot?.querySelector("dialog") ?? null;
@@ -131,7 +136,7 @@ var D = 1, O = 4, k = .5, A = .002, j = 3, M = .15, N = 320, P = 16, F = 160, I
 		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 = h(e.index, 0, Math.max(0, e.images.length - 1));
+		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 = g(e.index, 0, Math.max(0, e.images.length - 1));
 	}
 	show() {
 		this._open ||= (this._dismissed = !1, !0);
@@ -142,7 +147,7 @@ var D = 1, O = 4, k = .5, A = .002, j = 3, M = .15, N = 320, P = 16, F = 160, I
 	goTo(e) {
 		let t = this.images.length;
 		if (t === 0) return;
-		let n = this.loop ? (e % t + t) % t : h(e, 0, t - 1);
+		let n = this.loop ? (e % t + t) % t : g(e, 0, t - 1);
 		n !== this._index && (this._index = n, this.resetZoom());
 	}
 	next() {
@@ -152,13 +157,13 @@ var D = 1, O = 4, k = .5, A = .002, j = 3, M = .15, N = 320, P = 16, F = 160, I
 		this.goTo(this._index - 1);
 	}
 	zoomIn() {
-		this._setScale(this._scale + k);
+		this._setScale(this._scale + A);
 	}
 	zoomOut() {
-		this._setScale(this._scale - k);
+		this._setScale(this._scale - A);
 	}
 	resetZoom() {
-		(this._scale !== D || this._offsetX !== 0 || this._offsetY !== 0) && (this._scale = D, this._offsetX = 0, this._offsetY = 0);
+		(this._scale !== O || this._offsetX !== 0 || this._offsetY !== 0) && (this._scale = O, this._offsetX = 0, this._offsetY = 0);
 	}
 	connectedCallback() {
 		super.connectedCallback(), this._presence.reconcile(), this._syncScrollLock(), this._attachPinch(), this._reclaimIfOpen();
@@ -174,7 +179,7 @@ var D = 1, O = 4, k = .5, A = .002, j = 3, M = .15, N = 320, P = 16, F = 160, I
 	_attachPinch() {
 		if (this._pinch) return;
 		let e = this._stage;
-		e && (this._pinch = g(e, {
+		e && (this._pinch = _(e, {
 			onStart: this._handlePinchStart,
 			onMove: this._handlePinchMove,
 			onEnd: this._handlePinchEnd,
@@ -201,13 +206,13 @@ var D = 1, O = 4, k = .5, A = .002, j = 3, M = .15, N = 320, P = 16, F = 160, I
 		this._dismissed || this._open || (this._dismissed = !0, this.dispatchEvent(new CustomEvent("preview-dismissed")));
 	}
 	_zoomAt(e, t, n) {
-		let r = h(e, D, O);
+		let r = g(e, O, k);
 		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 === D) {
+		if (this._scale = e, e === O) {
 			this._offsetX = 0, this._offsetY = 0;
 			return;
 		}
@@ -248,7 +253,7 @@ var D = 1, O = 4, k = .5, A = .002, j = 3, M = .15, N = 320, P = 16, F = 160, I
 	}
 	_clampOffsets() {
 		let e = this._offsetBounds();
-		this._offsetX = h(this._offsetX, -e.x, e.x), this._offsetY = h(this._offsetY, -e.y, e.y);
+		this._offsetX = g(this._offsetX, -e.x, e.x), this._offsetY = g(this._offsetY, -e.y, e.y);
 	}
 	_isBlank(e) {
 		return e === this.dialog || e === this._stage;
@@ -286,16 +291,16 @@ var D = 1, O = 4, k = .5, A = .002, j = 3, M = .15, N = 320, P = 16, F = 160, I
 			this._swipeOffset = 0;
 			return;
 		}
-		let a = Math.max(1, Math.round(i * M)), o = n - this._swipeStartTime, s = o >= 2 ? e / o * 1e3 : 0, c = (Math.abs(e) >= a || Math.abs(t) >= N || Math.abs(e) >= P && Math.max(Math.abs(t), Math.abs(s)) >= F) && this._adjacentIndex(r) !== -1;
-		this._swipeSettling = !0, this._swipeSettleCommit = c, this._swipeSettleDir = r, this._swipeOffset = c ? -r * i : 0, this._swipeSettleTimer = setTimeout(() => this._finishSwipeSettle(), I);
+		let a = Math.max(1, Math.round(i * N)), o = n - this._swipeStartTime, s = o >= 2 ? e / o * 1e3 : 0, c = (Math.abs(e) >= a || Math.abs(t) >= P || Math.abs(e) >= F && Math.max(Math.abs(t), Math.abs(s)) >= I) && this._adjacentIndex(r) !== -1;
+		this._swipeSettling = !0, this._swipeSettleCommit = c, this._swipeSettleDir = r, this._swipeOffset = c ? -r * i : 0, this._swipeSettleTimer = setTimeout(() => this._finishSwipeSettle(), L);
 	}
 	_panTo(e, t) {
 		let n = this._offsetBounds();
-		this._offsetX = h(this._panOriginX + e, -n.x, n.x), this._offsetY = h(this._panOriginY + t, -n.y, n.y);
+		this._offsetX = g(this._panOriginX + e, -n.x, n.x), this._offsetY = g(this._panOriginY + t, -n.y, n.y);
 	}
 	render() {
-		let e = this.images.length, t = this._scale > D, 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 = t ? "translate3d(0, 0, 0) scale(1)" : `translate3d(0, ${this._offsetY}px, 0) scale(1)`;
-		return y`
+		let e = this.images.length, t = this._scale > O, 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 = t ? "translate3d(0, 0, 0) scale(1)" : `translate3d(0, ${this._offsetY}px, 0) scale(1)`;
+		return b`
       <dialog
         aria-label="图片预览"
         @cancel=${this._handleCancel}
@@ -311,7 +316,7 @@ var D = 1, O = 4, k = .5, A = .002, j = 3, M = .15, N = 320, P = 16, F = 160, I
         <div class="wui-image-preview-content">
           <div class="wui-image-preview-surface">
             <div
-              class=${T({
+              class=${E({
 			"wui-image-preview-stage": !0,
 			"is-zoomed": t,
 			"is-dragging": this._dragging,
@@ -320,13 +325,13 @@ var D = 1, O = 4, k = .5, A = .002, j = 3, M = .15, N = 320, P = 16, F = 160, I
             >
               <div
                 class="wui-image-preview-track"
-                style=${E({ transform: u })}
+                style=${D({ transform: u })}
                 @transitionend=${this._handleSwipeSettleEnd}
               >
-                ${c >= 0 ? y`
+                ${c >= 0 ? b`
                         <div class="wui-image-preview-slide is-prev" aria-hidden="true">
                           <img
-                            class=${T({
+                            class=${E({
 			"wui-image-preview-image": !0,
 			"is-loaded": this._loadedSources.has(this.images[c].src)
 		})}
@@ -334,16 +339,16 @@ var D = 1, O = 4, k = .5, A = .002, j = 3, M = .15, N = 320, P = 16, F = 160, I
                             src=${this.images[c].src}
                             alt=${this.images[c].alt ?? ""}
                             draggable="false"
-                            style=${E({ transform: f })}
+                            style=${D({ transform: f })}
                             @load=${this._handleImageSettled}
                             @error=${this._handleImageSettled}
                           />
                         </div>
-                      ` : b}
-                ${e > 0 ? y`
+                      ` : x}
+                ${e > 0 ? b`
                         <div class="wui-image-preview-slide is-current">
                           <img
-                            class=${T({
+                            class=${E({
 			"wui-image-preview-image": !0,
 			"is-loaded": this._loadedSources.has(this.images[this._index].src)
 		})}
@@ -351,16 +356,16 @@ var D = 1, O = 4, k = .5, A = .002, j = 3, M = .15, N = 320, P = 16, F = 160, I
                             src=${this.images[this._index].src}
                             alt=${this.images[this._index].alt ?? ""}
                             draggable="false"
-                            style=${E({ transform: d })}
+                            style=${D({ transform: d })}
                             @load=${this._handleImageSettled}
                             @error=${this._handleImageSettled}
                           />
                         </div>
-                      ` : b}
-                ${l >= 0 ? y`
+                      ` : x}
+                ${l >= 0 ? b`
                         <div class="wui-image-preview-slide is-next" aria-hidden="true">
                           <img
-                            class=${T({
+                            class=${E({
 			"wui-image-preview-image": !0,
 			"is-loaded": this._loadedSources.has(this.images[l].src)
 		})}
@@ -368,20 +373,20 @@ var D = 1, O = 4, k = .5, A = .002, j = 3, M = .15, N = 320, P = 16, F = 160, I
                             src=${this.images[l].src}
                             alt=${this.images[l].alt ?? ""}
                             draggable="false"
-                            style=${E({ transform: f })}
+                            style=${D({ transform: f })}
                             @load=${this._handleImageSettled}
                             @error=${this._handleImageSettled}
                           />
                         </div>
-                      ` : b}
+                      ` : x}
               </div>
             </div>
           </div>
           <div class="wui-image-preview-controls">
-            ${this.indicator ? y`<span class="wui-image-preview-counter wui-glass" aria-live="polite"
+            ${this.indicator ? b`<span class="wui-image-preview-counter wui-glass" aria-live="polite"
                     >${this._index + 1} / ${e}</span
-                  >` : b}
-            ${this.closable ? y`
+                  >` : x}
+            ${this.closable ? b`
                     <web-ui-button
                       class="wui-image-preview-close"
                       variant="glass"
@@ -392,8 +397,8 @@ var D = 1, O = 4, k = .5, A = .002, j = 3, M = .15, N = 320, P = 16, F = 160, I
                     >
                       <web-ui-icon size="16" .icon=${o}></web-ui-icon>
                     </web-ui-button>
-                  ` : b}
-            ${this.nav && e > 1 ? y`
+                  ` : x}
+            ${this.nav && e > 1 ? b`
                     <web-ui-button
                       class="wui-image-preview-nav wui-image-preview-nav-prev"
                       variant="glass"
@@ -416,15 +421,15 @@ var D = 1, O = 4, k = .5, A = .002, j = 3, M = .15, N = 320, P = 16, F = 160, I
                     >
                       <web-ui-icon size="20" .icon=${r}></web-ui-icon>
                     </web-ui-button>
-                  ` : b}
-            ${this.toolbar ? y`
+                  ` : x}
+            ${this.toolbar ? b`
                     <div class="wui-image-preview-toolbar wui-glass">
                       <web-ui-button
                         variant="glass"
                         icon
                         size="30"
                         aria-label="缩小"
-                        ?disabled=${this._scale <= D}
+                        ?disabled=${this._scale <= O}
                         @click=${this.zoomOut}
                       >
                         <web-ui-icon size="16" .icon=${a}></web-ui-icon>
@@ -435,7 +440,7 @@ var D = 1, O = 4, k = .5, A = .002, j = 3, M = .15, N = 320, P = 16, F = 160, I
                         icon
                         size="30"
                         aria-label="放大"
-                        ?disabled=${this._scale >= O}
+                        ?disabled=${this._scale >= k}
                         @click=${this.zoomIn}
                       >
                         <web-ui-icon size="16" .icon=${i}></web-ui-icon>
@@ -445,21 +450,21 @@ var D = 1, O = 4, k = .5, A = .002, j = 3, M = .15, N = 320, P = 16, F = 160, I
                         icon
                         size="30"
                         aria-label="重置缩放"
-                        ?disabled=${this._scale <= D && !this._isPanned}
+                        ?disabled=${this._scale <= O && !this._isPanned}
                         @click=${this.resetZoom}
                       >
                         <web-ui-icon size="16" .icon=${s}></web-ui-icon>
                       </web-ui-button>
                     </div>
-                  ` : b}
+                  ` : x}
           </div>
         </div>
       </dialog>
     `;
 	}
 };
-e([C({ attribute: !1 })], L.prototype, "images", void 0), e([C({ attribute: !1 })], L.prototype, "loop", void 0), e([C({ attribute: !1 })], L.prototype, "nav", void 0), e([C({ attribute: !1 })], L.prototype, "toolbar", void 0), e([C({ attribute: !1 })], L.prototype, "closable", void 0), e([C({ attribute: !1 })], L.prototype, "indicator", void 0), e([C({ attribute: !1 })], L.prototype, "swipe", void 0), e([C({ attribute: !1 })], L.prototype, "noScrollLock", void 0), e([C({ attribute: !1 })], L.prototype, "noBackdropClose", void 0), e([w()], L.prototype, "_open", void 0), e([w()], L.prototype, "_index", void 0), e([w()], L.prototype, "_scale", void 0), e([w()], L.prototype, "_offsetX", void 0), e([w()], L.prototype, "_offsetY", void 0), e([w()], L.prototype, "_swipeOffset", void 0), e([w()], L.prototype, "_swipeSettling", void 0), e([w()], L.prototype, "_dragging", void 0), L = e([S("web-ui-image-preview")], L);
-function R(e) {
+e([w({ attribute: !1 })], R.prototype, "images", void 0), e([w({ attribute: !1 })], R.prototype, "loop", void 0), e([w({ attribute: !1 })], R.prototype, "nav", void 0), e([w({ attribute: !1 })], R.prototype, "toolbar", void 0), e([w({ attribute: !1 })], R.prototype, "closable", void 0), e([w({ attribute: !1 })], R.prototype, "indicator", void 0), e([w({ attribute: !1 })], R.prototype, "swipe", void 0), e([w({ attribute: !1 })], R.prototype, "noScrollLock", void 0), e([w({ attribute: !1 })], R.prototype, "noBackdropClose", void 0), e([T()], R.prototype, "_open", void 0), e([T()], R.prototype, "_index", void 0), e([T()], R.prototype, "_scale", void 0), e([T()], R.prototype, "_offsetX", void 0), e([T()], R.prototype, "_offsetY", void 0), e([T()], R.prototype, "_swipeOffset", void 0), e([T()], R.prototype, "_swipeSettling", void 0), e([T()], R.prototype, "_dragging", void 0), R = e([C("web-ui-image-preview")], R);
+function z(e) {
 	let t = (e.images ?? []).map((e) => ({
 		src: e.src,
 		alt: e.alt ?? ""
@@ -506,6 +511,6 @@ function R(e) {
 	};
 }
 //#endregion
-export { R as imagePreview };
+export { z as imagePreview };
 
 //# sourceMappingURL=index.js.map