@greypan/web-ui 6.4.0 → 7.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.CN.md +134 -40
- package/README.md +145 -51
- package/dist/assets/glass.js +1 -1
- package/dist/assets/glass.js.map +1 -1
- package/dist/assets/selection-control.js +6 -0
- package/dist/assets/selection-control.js.map +1 -0
- package/dist/assets/toast-containers.js.map +1 -1
- package/dist/components/autocomplete/index.d.ts +2 -0
- package/dist/components/autocomplete/index.js +19 -20
- package/dist/components/autocomplete/index.js.map +1 -1
- package/dist/components/autocomplete/style.js.map +1 -1
- package/dist/components/badge/style.js.map +1 -1
- package/dist/components/button/style.js.map +1 -1
- package/dist/components/checkbox/index.d.ts +9 -2
- package/dist/components/checkbox/index.js +50 -26
- package/dist/components/checkbox/index.js.map +1 -1
- package/dist/components/checkbox/style.js +1 -1
- package/dist/components/checkbox/style.js.map +1 -1
- package/dist/components/checkbox-group/index.d.ts +3 -0
- package/dist/components/checkbox-group/index.js +24 -13
- package/dist/components/checkbox-group/index.js.map +1 -1
- package/dist/components/checkbox-group/style.js +1 -1
- package/dist/components/checkbox-group/style.js.map +1 -1
- package/dist/components/collapse/index.js.map +1 -1
- package/dist/components/context-menu/index.d.ts +10 -0
- package/dist/components/context-menu/index.js +48 -34
- package/dist/components/context-menu/index.js.map +1 -1
- package/dist/components/dialog/index.d.ts +6 -0
- package/dist/components/dialog/index.js +45 -20
- package/dist/components/dialog/index.js.map +1 -1
- package/dist/components/dialog/style.js +1 -1
- package/dist/components/dialog/style.js.map +1 -1
- package/dist/components/drawer/index.d.ts +22 -4
- package/dist/components/drawer/index.js +134 -106
- package/dist/components/drawer/index.js.map +1 -1
- package/dist/components/drawer/style.js +1 -1
- package/dist/components/drawer/style.js.map +1 -1
- package/dist/components/dropdown/index.d.ts +21 -1
- package/dist/components/dropdown/index.js +74 -51
- package/dist/components/dropdown/index.js.map +1 -1
- package/dist/components/image-preview/index.js +86 -66
- package/dist/components/image-preview/index.js.map +1 -1
- package/dist/components/image-preview/style.js +1 -1
- package/dist/components/image-preview/style.js.map +1 -1
- package/dist/components/index.js +29 -29
- package/dist/components/input/index.js +2 -2
- package/dist/components/input/index.js.map +1 -1
- package/dist/components/input/style.js.map +1 -1
- package/dist/components/layout/index.js +2 -2
- package/dist/components/layout/index.js.map +1 -1
- package/dist/components/layout/style.js +1 -1
- package/dist/components/layout/style.js.map +1 -1
- package/dist/components/popover/index.d.ts +8 -2
- package/dist/components/popover/index.js +47 -52
- package/dist/components/popover/index.js.map +1 -1
- package/dist/components/radio/index.d.ts +1 -1
- package/dist/components/radio/index.js +14 -13
- package/dist/components/radio/index.js.map +1 -1
- package/dist/components/radio/style.js +1 -1
- package/dist/components/radio/style.js.map +1 -1
- package/dist/components/radio-group/index.d.ts +3 -0
- package/dist/components/radio-group/index.js +24 -13
- package/dist/components/radio-group/index.js.map +1 -1
- package/dist/components/radio-group/style.js +1 -1
- package/dist/components/radio-group/style.js.map +1 -1
- package/dist/components/segmented/style.js +1 -1
- package/dist/components/segmented/style.js.map +1 -1
- package/dist/components/select/index.d.ts +2 -0
- package/dist/components/select/index.js +20 -19
- package/dist/components/select/index.js.map +1 -1
- package/dist/components/slider/index.js.map +1 -1
- package/dist/components/slider/style.js +1 -1
- package/dist/components/slider/style.js.map +1 -1
- package/dist/components/svg-draw-lines/index.d.ts +13 -2
- package/dist/components/svg-draw-lines/index.js +44 -31
- package/dist/components/svg-draw-lines/index.js.map +1 -1
- package/dist/components/switch/index.js.map +1 -1
- package/dist/components/switch/style.js.map +1 -1
- package/dist/components/textarea/index.js +2 -2
- package/dist/components/textarea/index.js.map +1 -1
- package/dist/components/textarea/style.js.map +1 -1
- package/dist/components/theme/index.d.ts +17 -0
- package/dist/components/theme/index.js +180 -20
- package/dist/components/theme/index.js.map +1 -1
- package/dist/components/theme/style.js +1 -1
- package/dist/components/theme/style.js.map +1 -1
- package/dist/components/toast/index.d.ts +1 -1
- package/dist/components/toast/manager.d.ts +1 -3
- package/dist/components/toast/manager.js +92 -49
- package/dist/components/toast/manager.js.map +1 -1
- package/dist/components/toast/style.js.map +1 -1
- package/dist/components/toast/toast.d.ts +37 -0
- package/dist/components/toast/toast.js +61 -8
- package/dist/components/toast/toast.js.map +1 -1
- package/dist/components/toast/types.d.ts +0 -4
- package/dist/components/tooltip/index.d.ts +6 -1
- package/dist/components/tooltip/index.js +11 -12
- package/dist/components/tooltip/index.js.map +1 -1
- package/dist/shared/gesture/drag-gesture.js +66 -64
- package/dist/shared/gesture/drag-gesture.js.map +1 -1
- package/dist/shared/gesture/physics.js +7 -29
- package/dist/shared/gesture/physics.js.map +1 -1
- package/dist/shared/menu-behavior/index.js +3 -4
- package/dist/shared/menu-behavior/index.js.map +1 -1
- package/dist/shared/option-portal/combobox-shell.js +7 -8
- package/dist/shared/option-portal/combobox-shell.js.map +1 -1
- package/dist/shared/overlay/anchored-panel.js +36 -31
- package/dist/shared/overlay/anchored-panel.js.map +1 -1
- package/dist/shared/overlay/native-dialog-presence.js +16 -0
- package/dist/shared/overlay/native-dialog-presence.js.map +1 -1
- package/dist/shared/overlay/nested-drawer-layers.js +7 -4
- package/dist/shared/overlay/nested-drawer-layers.js.map +1 -1
- package/dist/shared/overlay/open-overlay.js +182 -0
- package/dist/shared/overlay/open-overlay.js.map +1 -0
- package/dist/shared/overlay/presence.js +19 -22
- package/dist/shared/overlay/presence.js.map +1 -1
- package/dist/shared/theme/duration.js +9 -0
- package/dist/shared/theme/duration.js.map +1 -0
- package/dist/shared/theme/reduced-motion.js +15 -0
- package/dist/shared/theme/reduced-motion.js.map +1 -0
- package/package.json +1 -1
- package/dist/shared/overlay/composition.js +0 -57
- package/dist/shared/overlay/composition.js.map +0 -1
- package/dist/shared/overlay/lifecycle.js +0 -41
- package/dist/shared/overlay/lifecycle.js.map +0 -1
- package/dist/vite.svg +0 -1
|
@@ -4,24 +4,25 @@ import t from "../../icons/generated/ooui-close.js";
|
|
|
4
4
|
import n from "../../assets/glass.js";
|
|
5
5
|
import { normalizeLiteral as r } from "../../shared/normalize/index.js";
|
|
6
6
|
import { dispatchOpenChangeEvent as i } from "../../shared/open-state/index.js";
|
|
7
|
-
import {
|
|
7
|
+
import { defineOpenOverlay as a } from "../../shared/overlay/open-overlay.js";
|
|
8
8
|
import { defineScrollLockLease as o } from "../../shared/scroll-lock/scroll-lock.js";
|
|
9
9
|
import "../button/index.js";
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
import
|
|
16
|
-
import
|
|
17
|
-
import {
|
|
10
|
+
import { prefersReducedMotion as s } from "../../shared/theme/reduced-motion.js";
|
|
11
|
+
import { UserChangeController as c } from "../../shared/events/user-change.js";
|
|
12
|
+
import { defineNativeDialogPresence as l } from "../../shared/overlay/native-dialog-presence.js";
|
|
13
|
+
import { attachDragGesture as u } from "../../shared/gesture/drag-gesture.js";
|
|
14
|
+
import { dampOverscroll as d } from "../../shared/gesture/physics.js";
|
|
15
|
+
import { defineNestedDrawerLayers as f } from "../../shared/overlay/nested-drawer-layers.js";
|
|
16
|
+
import p from "./style.js";
|
|
17
|
+
import { LitElement as m, html as h, nothing as g, unsafeCSS as _ } from "lit";
|
|
18
|
+
import { customElement as v, property as y } from "lit/decorators.js";
|
|
18
19
|
//#region src/components/drawer/index.ts
|
|
19
|
-
var
|
|
20
|
+
var b = [
|
|
20
21
|
"right",
|
|
21
22
|
"left",
|
|
22
23
|
"top",
|
|
23
24
|
"bottom"
|
|
24
|
-
],
|
|
25
|
+
], x = .5, S = 10, C = 500, w = 50, T = 10, E = 120, D = 10, O = 180, k = 420, A = "cubic-bezier(0.32, 0.72, 0, 1)", j = "cubic-bezier(0.22, 1.3, 0.36, 1)", M = 1, N = 80;
|
|
25
26
|
if (typeof CSS < "u" && "registerProperty" in CSS) {
|
|
26
27
|
try {
|
|
27
28
|
CSS.registerProperty({
|
|
@@ -39,24 +40,32 @@ if (typeof CSS < "u" && "registerProperty" in CSS) {
|
|
|
39
40
|
initialValue: "8px"
|
|
40
41
|
});
|
|
41
42
|
} catch {}
|
|
43
|
+
try {
|
|
44
|
+
CSS.registerProperty({
|
|
45
|
+
name: "--wui-internal-settle-duration",
|
|
46
|
+
syntax: "<time>",
|
|
47
|
+
inherits: !0,
|
|
48
|
+
initialValue: "280ms"
|
|
49
|
+
});
|
|
50
|
+
} catch {}
|
|
42
51
|
}
|
|
43
|
-
var
|
|
52
|
+
var P = class extends m {
|
|
44
53
|
constructor(...e) {
|
|
45
|
-
super(...e), this.open = !1, this.noScrollLock = !1, this.noBackdropClose = !1, this.controlled = !1, this._placement = "right", this.heading = "", this.closable = !1, this.headless = !1, this.dialogLabel = "", this.draggable = !1, this._hasHeaderSlot = !1, this._hasFooterSlot = !1, this._userOpenChange = new
|
|
54
|
+
super(...e), this.open = !1, this.noScrollLock = !1, this.noBackdropClose = !1, this.controlled = !1, this._placement = "right", this.heading = "", this.closable = !1, this.headless = !1, this.dialogLabel = "", this.draggable = !1, this._hasHeaderSlot = !1, this._hasFooterSlot = !1, this._userOpenChange = new c(), this._scrollLock = o().make(), this._presence = l().make({
|
|
46
55
|
getDialog: () => this.dialog,
|
|
47
56
|
isConnected: () => this.isConnected,
|
|
48
57
|
isOpen: () => this.open
|
|
49
|
-
}), this._nestedLayers =
|
|
58
|
+
}), this._nestedLayers = f().make({
|
|
50
59
|
getDialog: () => this.dialog,
|
|
51
60
|
getPlacement: () => this._placement
|
|
52
|
-
}), this._dragGesture = null, this._dragInitialOffset = 0, this._dragOffset = 0, this.
|
|
61
|
+
}), this._overlay = a().make({ requestClose: () => this._closeFromUser() }), this._handle = null, this._dragGesture = null, this._dragInitialOffset = 0, this._dragOffset = 0, this._cancelBaseline = 0, this._lastAxisPos = 0, this._swipeIntentDisp = -1, this._swipeCancelled = !1, this._settleFinish = null, this._dragAwaitWriteback = !1, this._handleDragWritebackTimeout = () => {
|
|
53
62
|
if (this._dragRequestTimer = void 0, !this._dragAwaitWriteback || !this.open || this._isDragging()) {
|
|
54
63
|
this._dragAwaitWriteback = !1;
|
|
55
64
|
return;
|
|
56
65
|
}
|
|
57
66
|
this._dragAwaitWriteback = !1;
|
|
58
67
|
let e = this.dialog;
|
|
59
|
-
e && (e.classList.add("is-visible"), this.
|
|
68
|
+
e && (e.classList.add("is-visible"), this._settleRebound(e, 0, this._dragCloseDistance(e)));
|
|
60
69
|
}, this._closeFromUser = () => {
|
|
61
70
|
if (this.open && !this._dragAwaitWriteback) {
|
|
62
71
|
if (this.controlled) {
|
|
@@ -65,17 +74,17 @@ var E = class extends h {
|
|
|
65
74
|
}
|
|
66
75
|
this._userOpenChange.mark(), this.close();
|
|
67
76
|
}
|
|
68
|
-
};
|
|
77
|
+
}, this._backdropPress = null;
|
|
69
78
|
}
|
|
70
79
|
static {
|
|
71
|
-
this.styles = [
|
|
80
|
+
this.styles = [_(n), _(p)];
|
|
72
81
|
}
|
|
73
82
|
get placement() {
|
|
74
83
|
return this._placement;
|
|
75
84
|
}
|
|
76
85
|
set placement(e) {
|
|
77
86
|
let t = this._placement;
|
|
78
|
-
this._placement = r(e,
|
|
87
|
+
this._placement = r(e, b, "right"), this.requestUpdate("placement", t);
|
|
79
88
|
}
|
|
80
89
|
get dialog() {
|
|
81
90
|
return this.shadowRoot?.querySelector("dialog") ?? null;
|
|
@@ -95,6 +104,9 @@ var E = class extends h {
|
|
|
95
104
|
let e = this.dialog;
|
|
96
105
|
return e ? this._dragAxis === "x" ? e.offsetWidth : e.offsetHeight : 0;
|
|
97
106
|
}
|
|
107
|
+
_dragCloseThreshold(e) {
|
|
108
|
+
return Math.max(e * x, S);
|
|
109
|
+
}
|
|
98
110
|
_readDrawerInset(e) {
|
|
99
111
|
let t = getComputedStyle(e).getPropertyValue("--wui-internal-drawer-inset"), n = Number.parseFloat(t);
|
|
100
112
|
return Number.isFinite(n) ? n : 0;
|
|
@@ -102,18 +114,12 @@ var E = class extends h {
|
|
|
102
114
|
_dragCloseDistance(e) {
|
|
103
115
|
return this._measureDragSize() + this._readDrawerInset(e);
|
|
104
116
|
}
|
|
105
|
-
_isReducedMotion() {
|
|
106
|
-
let e = a(this);
|
|
107
|
-
if (e) return e.isReducedMotion();
|
|
108
|
-
try {
|
|
109
|
-
return typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
110
|
-
} catch {
|
|
111
|
-
return !1;
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
117
|
_isDragging() {
|
|
115
118
|
return this._dragGesture?.isDragging() ?? !1;
|
|
116
119
|
}
|
|
120
|
+
_syncDragInert() {
|
|
121
|
+
this._handle?.setInert(this._isDragging());
|
|
122
|
+
}
|
|
117
123
|
_cancelDragAwait() {
|
|
118
124
|
this._dragRequestTimer !== void 0 && (clearTimeout(this._dragRequestTimer), this._dragRequestTimer = void 0), this._dragAwaitWriteback = !1;
|
|
119
125
|
}
|
|
@@ -122,27 +128,39 @@ var E = class extends h {
|
|
|
122
128
|
let t = this.dialog;
|
|
123
129
|
if (!t || !t.classList.contains("is-visible")) return;
|
|
124
130
|
let n = getComputedStyle(t).transform, r = n && n !== "none" && typeof DOMMatrixReadOnly == "function" ? new DOMMatrixReadOnly(n)[this._dragAxis === "x" ? "m41" : "m42"] : 0;
|
|
125
|
-
this.
|
|
131
|
+
this._abortSettle(), this._cancelDragAwait(), this._dragInitialOffset = r * this._dragCloseSign, this._dragOffset = this._dragInitialOffset;
|
|
132
|
+
let i = this._dragAxis === "x" ? e.clientX : e.clientY;
|
|
133
|
+
this._cancelBaseline = i, this._lastAxisPos = i, this._swipeIntentDisp = -1, this._swipeCancelled = !1, t.classList.add("is-dragging"), this._applyDragOffset(t, this._dragOffset), this._dragGesture = u(e, {
|
|
126
134
|
axis: this._dragAxis,
|
|
135
|
+
calibrateOnFirstMove: !0,
|
|
127
136
|
onMove: (e) => {
|
|
128
|
-
let n = this._dragAxis === "x" ? e.deltaX : e.deltaY
|
|
129
|
-
this._dragOffset = d(
|
|
130
|
-
let
|
|
131
|
-
t.classList.toggle("is-drag-close", i >
|
|
137
|
+
let n = (this._dragAxis === "x" ? e.deltaX : e.deltaY) * this._dragCloseSign;
|
|
138
|
+
this._dragOffset = this._dragInitialOffset + d(n), this._trackSwipeCancel(this._dragAxis === "x" ? e.clientX : e.clientY, n);
|
|
139
|
+
let r = this._measureDragSize(), i = this._dragOffset - this._dragInitialOffset;
|
|
140
|
+
t.classList.toggle("is-drag-close", i > this._dragCloseThreshold(r)), this._applyDragOffset(t, this._dragOffset);
|
|
132
141
|
},
|
|
133
142
|
onEnd: (e) => {
|
|
134
|
-
this._dragGesture = null, t.classList.remove("is-dragging", "is-drag-close");
|
|
135
|
-
let n = this._measureDragSize(), r = (this._dragAxis === "x" ? e.velocityX : e.velocityY) * this._dragCloseSign;
|
|
136
|
-
|
|
143
|
+
this._dragGesture = null, this._syncDragInert(), t.classList.remove("is-dragging", "is-drag-close");
|
|
144
|
+
let n = this._measureDragSize(), r = (this._dragAxis === "x" ? e.velocityX : e.velocityY) * this._dragCloseSign, i = this._dragOffset - this._dragInitialOffset, a = e.duration > 0 ? i / Math.max(e.duration, w) * 1e3 : 0, o = i > 0 && a >= C && !this._swipeCancelled;
|
|
145
|
+
i > this._dragCloseThreshold(n) || o ? this._settleToClose(t, r) : this._settleRebound(t, r, this._dragOffset);
|
|
137
146
|
},
|
|
138
147
|
onCancel: () => {
|
|
139
|
-
this._dragGesture = null, t.classList.remove("is-dragging", "is-drag-close"), this.
|
|
148
|
+
this._dragGesture = null, this._syncDragInert(), t.classList.remove("is-dragging", "is-drag-close"), this._settleRebound(t, 0, this._dragOffset);
|
|
140
149
|
}
|
|
141
|
-
});
|
|
150
|
+
}), this._syncDragInert();
|
|
151
|
+
}
|
|
152
|
+
_trackSwipeCancel(e, t) {
|
|
153
|
+
let n = e - this._lastAxisPos;
|
|
154
|
+
if (this._lastAxisPos = e, (n < 0 && e > this._cancelBaseline || n > 0 && e < this._cancelBaseline) && (this._cancelBaseline = e), this._swipeIntentDisp < 0) {
|
|
155
|
+
t > 0 && (this._swipeIntentDisp = t);
|
|
156
|
+
return;
|
|
157
|
+
}
|
|
158
|
+
let r = (e - this._cancelBaseline) * this._dragCloseSign;
|
|
159
|
+
r > this._dragCloseThreshold(this._measureDragSize()) ? this._swipeCancelled = !1 : this._swipeIntentDisp - r >= T && (this._swipeCancelled = !0);
|
|
142
160
|
}
|
|
143
161
|
_cancelActiveDrag() {
|
|
144
162
|
if (!this._isDragging()) return;
|
|
145
|
-
this._dragGesture?.destroy(), this._dragGesture = null;
|
|
163
|
+
this._dragGesture?.destroy(), this._dragGesture = null, this._syncDragInert();
|
|
146
164
|
let e = this.dialog;
|
|
147
165
|
e && (e.classList.remove("is-dragging", "is-drag-close"), this._clearDragStyles(e));
|
|
148
166
|
}
|
|
@@ -155,68 +173,63 @@ var E = class extends h {
|
|
|
155
173
|
_clearDragStyles(e) {
|
|
156
174
|
e.style.removeProperty("transform"), e.style.removeProperty("--wui-internal-drag-backdrop-opacity");
|
|
157
175
|
}
|
|
158
|
-
|
|
176
|
+
_settleToClose(e, t) {
|
|
159
177
|
let n = this._dragOffset;
|
|
160
178
|
this._dragOffset = 0;
|
|
161
|
-
let r = this.
|
|
162
|
-
|
|
163
|
-
let t = i;
|
|
164
|
-
e.style.transform = this._dragAxis === "x" ? `translateX(${t * r}px)` : `translateY(${t * r}px)`, e.style.setProperty("--wui-internal-drag-backdrop-opacity", "0");
|
|
165
|
-
} else e.classList.remove("is-visible"), this._clearDragStyles(e);
|
|
166
|
-
this._closeFromDrag();
|
|
179
|
+
let r = this._dragCloseDistance(e), i = () => {
|
|
180
|
+
this.controlled ? this._applyDragOffset(e, r) : (e.classList.remove("is-visible"), this._clearDragStyles(e)), this._closeFromDrag();
|
|
167
181
|
};
|
|
168
|
-
if (this
|
|
169
|
-
|
|
182
|
+
if (s(this) || Math.abs(r - n) < 1) {
|
|
183
|
+
e.classList.remove("is-dragging"), i();
|
|
170
184
|
return;
|
|
171
185
|
}
|
|
172
|
-
|
|
173
|
-
transform: this._dragAxis === "x" ? `translateX(${e * r}px)` : `translateY(${e * r}px)`,
|
|
174
|
-
"--wui-internal-drag-backdrop-opacity": String(Math.max(0, 1 - e / a))
|
|
175
|
-
})), l = (s.length - 1) * T, d = e.animate(c, {
|
|
176
|
-
duration: l,
|
|
177
|
-
easing: "linear",
|
|
178
|
-
fill: "both"
|
|
179
|
-
});
|
|
180
|
-
d.onfinish = () => {
|
|
181
|
-
o(), d.cancel();
|
|
182
|
-
};
|
|
186
|
+
this._startSettle(e, r, 0, this._settleDuration(Math.abs(r - n), t), A, i);
|
|
183
187
|
}
|
|
184
|
-
|
|
188
|
+
_settleRebound(e, t, n) {
|
|
185
189
|
this._dragOffset = 0;
|
|
186
190
|
let r = () => {
|
|
187
|
-
|
|
188
|
-
}, i = (t) => {
|
|
189
|
-
this._dragAnimation = null, e.isConnected && (t ? this._clearDragStyles(e) : r(), e.offsetWidth, e.classList.remove("is-dragging"));
|
|
191
|
+
this._clearDragStyles(e);
|
|
190
192
|
};
|
|
191
|
-
if (this
|
|
192
|
-
e.classList.
|
|
193
|
+
if (s(this) || Math.abs(n) < 1) {
|
|
194
|
+
e.classList.remove("is-dragging"), r();
|
|
193
195
|
return;
|
|
194
196
|
}
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
});
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
197
|
+
this._startSettle(e, 0, 1, this._settleDuration(Math.abs(n), t), j, r);
|
|
198
|
+
}
|
|
199
|
+
_settleDuration(e, t) {
|
|
200
|
+
let n = e / Math.max(Math.abs(t), M) * 1e3;
|
|
201
|
+
return Math.min(k, Math.max(O, n));
|
|
202
|
+
}
|
|
203
|
+
_startSettle(e, t, n, r, i, a) {
|
|
204
|
+
this._abortSettle();
|
|
205
|
+
let o = this._dragCloseSign;
|
|
206
|
+
e.style.setProperty("--wui-internal-settle-duration", `${r}ms`), e.style.setProperty("--wui-internal-settle-easing", i), e.style.transform = this._dragAxis === "x" ? `translateX(${t * o}px)` : `translateY(${t * o}px)`, e.style.setProperty("--wui-internal-drag-backdrop-opacity", String(n)), e.classList.add("is-settling"), e.classList.remove("is-dragging"), this._settleFinish = a, this._settleTimer = setTimeout(() => this._finishSettle(), r + N);
|
|
207
|
+
}
|
|
208
|
+
_finishSettle() {
|
|
209
|
+
let e = this._settleFinish;
|
|
210
|
+
e && (this._abortSettle(), e());
|
|
211
|
+
}
|
|
212
|
+
_abortSettle() {
|
|
213
|
+
this._settleFinish = null, this._settleTimer !== void 0 && (clearTimeout(this._settleTimer), this._settleTimer = void 0);
|
|
214
|
+
let e = this.dialog;
|
|
215
|
+
e && (e.classList.remove("is-settling"), e.style.removeProperty("--wui-internal-settle-duration"), e.style.removeProperty("--wui-internal-settle-easing"));
|
|
208
216
|
}
|
|
209
217
|
_closeFromDrag() {
|
|
210
|
-
this._closeFromUser(), this.controlled && (this._dragAwaitWriteback = !0, this._dragRequestTimer = setTimeout(this._handleDragWritebackTimeout,
|
|
218
|
+
this._closeFromUser(), this.controlled && (this._dragAwaitWriteback = !0, this._dragRequestTimer = setTimeout(this._handleDragWritebackTimeout, E));
|
|
211
219
|
}
|
|
212
220
|
connectedCallback() {
|
|
213
|
-
super.connectedCallback(), this._hasHeaderSlot = Array.from(this.children).some((e) => e.getAttribute?.("slot") === "header"), this._hasFooterSlot = Array.from(this.children).some((e) => e.getAttribute?.("slot") === "footer");
|
|
221
|
+
super.connectedCallback(), this._hasHeaderSlot = Array.from(this.children).some((e) => e.getAttribute?.("slot") === "header"), this._hasFooterSlot = Array.from(this.children).some((e) => e.getAttribute?.("slot") === "footer"), this._presence.reconcile(), this.open && this._nestedLayers.register(), this._syncScrollLock(), this._reclaimIfOpen();
|
|
214
222
|
}
|
|
215
223
|
firstUpdated() {
|
|
216
224
|
this._checkSlotContent("footer");
|
|
217
225
|
}
|
|
218
226
|
disconnectedCallback() {
|
|
219
|
-
super.disconnectedCallback(), this._nestedLayers.dispose(), this._dragGesture?.destroy(), this._dragGesture = null, this._presence.dispose(), this._scrollLock.release(), this.
|
|
227
|
+
super.disconnectedCallback(), this._nestedLayers.dispose(), this._dragGesture?.destroy(), this._dragGesture = null, this._presence.dispose(), this._scrollLock.release(), this._handle?.release(), this._handle = null, this._abortSettle(), this._cancelDragAwait();
|
|
228
|
+
}
|
|
229
|
+
_reclaimIfOpen() {
|
|
230
|
+
if (!this.open || this._handle) return;
|
|
231
|
+
let e = this.dialog;
|
|
232
|
+
e && (this._handle = this._overlay.claim(e, { ancestryFrom: this }), this._syncDragInert());
|
|
220
233
|
}
|
|
221
234
|
_checkSlotContent(e) {
|
|
222
235
|
let t = this.shadowRoot?.querySelector(`slot[name="${e}"]`);
|
|
@@ -238,22 +251,27 @@ var E = class extends h {
|
|
|
238
251
|
if (this._isDragging() && !this.open && this._cancelActiveDrag(), this._userOpenChange.consume() && this.emitOpenChange(), this._dragAwaitWriteback) {
|
|
239
252
|
this._cancelDragAwait();
|
|
240
253
|
let e = this.dialog;
|
|
241
|
-
e && !this.open ? (e.classList.remove("is-visible"), this._clearDragStyles(e)) : e && this.open && this.
|
|
254
|
+
e && !this.open ? (e.classList.remove("is-visible"), this._clearDragStyles(e)) : e && this.open && this._settleRebound(e, 0, this._dragCloseDistance(e));
|
|
242
255
|
}
|
|
243
|
-
if (!this.open &&
|
|
256
|
+
if (!this.open && !this._isDragging()) {
|
|
257
|
+
this._abortSettle();
|
|
244
258
|
let e = this.dialog;
|
|
245
259
|
e && this._clearDragStyles(e);
|
|
246
260
|
}
|
|
247
|
-
this._presence.sync(this.open), this.open
|
|
261
|
+
if (this._presence.sync(this.open), this.open) {
|
|
262
|
+
this._nestedLayers.register();
|
|
263
|
+
let e = this.dialog;
|
|
264
|
+
e && (this._handle?.release(), this._handle = this._overlay.claim(e, { ancestryFrom: this }), this._syncDragInert());
|
|
265
|
+
} else this._nestedLayers.unregister(), this._handle?.release(), this._handle = null;
|
|
248
266
|
}
|
|
249
267
|
(e.has("open") || e.has("noScrollLock")) && this._syncScrollLock();
|
|
250
268
|
}
|
|
251
269
|
}
|
|
252
270
|
handleTransitionEnd(e) {
|
|
253
|
-
this._presence.handleTransitionEnd(e);
|
|
271
|
+
e.target === e.currentTarget && (this._presence.handleTransitionEnd(e), e.propertyName === "transform" && this._finishSettle());
|
|
254
272
|
}
|
|
255
273
|
handleKeydown(e) {
|
|
256
|
-
if (e.key !== "Escape") return;
|
|
274
|
+
if (e.key !== "Escape" || e.defaultPrevented) return;
|
|
257
275
|
let t = e.composedPath(), n = t.indexOf(e.currentTarget);
|
|
258
276
|
if (!(n > 0 && t.slice(0, n).some((e) => e instanceof HTMLDialogElement))) {
|
|
259
277
|
if (this._isDragging()) {
|
|
@@ -289,8 +307,17 @@ var E = class extends h {
|
|
|
289
307
|
this._userOpenChange.mark(), this.open = !1;
|
|
290
308
|
}
|
|
291
309
|
}
|
|
310
|
+
handleDialogPointerDown(e) {
|
|
311
|
+
this._backdropPress = {
|
|
312
|
+
onMask: e.target === e.currentTarget,
|
|
313
|
+
x: e.clientX,
|
|
314
|
+
y: e.clientY
|
|
315
|
+
};
|
|
316
|
+
}
|
|
292
317
|
handleBackdropClick(e) {
|
|
293
|
-
e.target
|
|
318
|
+
if (e.target !== e.currentTarget || this.noBackdropClose || this._isDragging() || e.detail === 0) return;
|
|
319
|
+
let t = this._backdropPress;
|
|
320
|
+
this._backdropPress = null, t && t.onMask && (Math.hypot(e.clientX - t.x, e.clientY - t.y) > D || this._closeFromUser());
|
|
294
321
|
}
|
|
295
322
|
emitOpenChange(e = this.open) {
|
|
296
323
|
i(this, e);
|
|
@@ -299,26 +326,27 @@ var E = class extends h {
|
|
|
299
326
|
this._scrollLock.sync(e && !this.noScrollLock);
|
|
300
327
|
}
|
|
301
328
|
render() {
|
|
302
|
-
let e = this._hasHeaderSlot || !!this.heading, n = this.dialogLabel.trim(), r = !n && !this.headless && e ? "wui-drawer-heading" :
|
|
329
|
+
let e = this._hasHeaderSlot || !!this.heading, n = this.dialogLabel.trim(), r = !n && !this.headless && e ? "wui-drawer-heading" : g, i = this.draggable ? h`
|
|
303
330
|
<div class="wui-drawer-drag-zone" @pointerdown=${this._handleDragPointerDown}>
|
|
304
331
|
<div class="wui-drawer-drag-bar"></div>
|
|
305
332
|
</div>
|
|
306
|
-
` :
|
|
307
|
-
return
|
|
333
|
+
` : g;
|
|
334
|
+
return h`
|
|
308
335
|
<dialog
|
|
309
|
-
aria-label=${n ||
|
|
336
|
+
aria-label=${n || g}
|
|
310
337
|
aria-labelledby=${r}
|
|
311
338
|
@cancel=${this.handleCancel}
|
|
312
339
|
@close=${this.handleNativeClose}
|
|
313
340
|
@click=${this.handleBackdropClick}
|
|
341
|
+
@pointerdown=${this.handleDialogPointerDown}
|
|
314
342
|
@keydown=${this.handleKeydown}
|
|
315
343
|
@transitionend=${this.handleTransitionEnd}
|
|
316
344
|
>
|
|
317
|
-
${this.headless ?
|
|
345
|
+
${this.headless ? h`<slot></slot>${i}` : h`
|
|
318
346
|
<div class="wui-drawer-body wui-glass">
|
|
319
347
|
<div class="wui-drawer-header" id="wui-drawer-heading" ?hidden=${!e}>
|
|
320
348
|
<slot name="header" @slotchange=${this.handleHeaderSlotChange}>
|
|
321
|
-
${this.heading ?
|
|
349
|
+
${this.heading ? h`<span class="wui-drawer-heading">${this.heading}</span>` : g}
|
|
322
350
|
</slot>
|
|
323
351
|
</div>
|
|
324
352
|
<div class="wui-drawer-content">
|
|
@@ -328,7 +356,7 @@ var E = class extends h {
|
|
|
328
356
|
<slot name="footer" @slotchange=${this.handleFooterSlotChange}></slot>
|
|
329
357
|
</div>
|
|
330
358
|
</div>
|
|
331
|
-
${this.closable ?
|
|
359
|
+
${this.closable ? h`
|
|
332
360
|
<web-ui-button
|
|
333
361
|
class="wui-drawer-close"
|
|
334
362
|
@click=${this._closeFromUser}
|
|
@@ -339,44 +367,44 @@ var E = class extends h {
|
|
|
339
367
|
>
|
|
340
368
|
<web-ui-icon size="14" .icon=${t}></web-ui-icon>
|
|
341
369
|
</web-ui-button>
|
|
342
|
-
` :
|
|
370
|
+
` : g}
|
|
343
371
|
${i}
|
|
344
372
|
`}
|
|
345
373
|
</dialog>
|
|
346
374
|
`;
|
|
347
375
|
}
|
|
348
376
|
};
|
|
349
|
-
e([
|
|
377
|
+
e([y({
|
|
350
378
|
type: Boolean,
|
|
351
379
|
reflect: !0
|
|
352
|
-
})],
|
|
380
|
+
})], P.prototype, "open", void 0), e([y({
|
|
353
381
|
type: Boolean,
|
|
354
382
|
reflect: !0,
|
|
355
383
|
attribute: "no-scroll-lock"
|
|
356
|
-
})],
|
|
384
|
+
})], P.prototype, "noScrollLock", void 0), e([y({
|
|
357
385
|
type: Boolean,
|
|
358
386
|
reflect: !0,
|
|
359
387
|
attribute: "no-backdrop-close"
|
|
360
|
-
})],
|
|
388
|
+
})], P.prototype, "noBackdropClose", void 0), e([y({
|
|
361
389
|
type: Boolean,
|
|
362
390
|
reflect: !0
|
|
363
|
-
})],
|
|
391
|
+
})], P.prototype, "controlled", void 0), e([y({
|
|
364
392
|
type: String,
|
|
365
393
|
reflect: !0
|
|
366
|
-
})],
|
|
394
|
+
})], P.prototype, "placement", null), e([y({ type: String })], P.prototype, "heading", void 0), e([y({
|
|
367
395
|
type: Boolean,
|
|
368
396
|
reflect: !0
|
|
369
|
-
})],
|
|
397
|
+
})], P.prototype, "closable", void 0), e([y({
|
|
370
398
|
type: Boolean,
|
|
371
399
|
reflect: !0
|
|
372
|
-
})],
|
|
400
|
+
})], P.prototype, "headless", void 0), e([y({
|
|
373
401
|
type: String,
|
|
374
402
|
attribute: "dialog-label"
|
|
375
|
-
})],
|
|
403
|
+
})], P.prototype, "dialogLabel", void 0), e([y({
|
|
376
404
|
type: Boolean,
|
|
377
405
|
reflect: !0
|
|
378
|
-
})],
|
|
406
|
+
})], P.prototype, "draggable", void 0), P = e([v("web-ui-drawer")], P);
|
|
379
407
|
//#endregion
|
|
380
|
-
export {
|
|
408
|
+
export { P as WebUiDrawer };
|
|
381
409
|
|
|
382
410
|
//# sourceMappingURL=index.js.map
|