vanilla-drawers 1.0.16 → 1.1.16
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/dist/drawers.es.js +128 -126
- package/dist/drawers.umd.js +2 -2
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/dist/drawers.es.js
CHANGED
@@ -2,7 +2,7 @@ var W = (n, t, e) => {
|
|
2
2
|
if (!t.has(n))
|
3
3
|
throw TypeError("Cannot " + e);
|
4
4
|
};
|
5
|
-
var
|
5
|
+
var s = (n, t, e) => (W(n, t, "read from private field"), e ? e.call(n) : t.get(n)), g = (n, t, e) => {
|
6
6
|
if (t.has(n))
|
7
7
|
throw TypeError("Cannot add the same private member more than once");
|
8
8
|
t instanceof WeakSet ? t.add(n) : t.set(n, e);
|
@@ -10,20 +10,20 @@ var r = (n, t, e) => (W(n, t, "read from private field"), e ? e.call(n) : t.get(
|
|
10
10
|
function ne(n) {
|
11
11
|
return n && n.__esModule && Object.prototype.hasOwnProperty.call(n, "default") ? n.default : n;
|
12
12
|
}
|
13
|
-
var
|
13
|
+
var se = { exports: {} };
|
14
14
|
(function(n) {
|
15
15
|
var t = Object.prototype.hasOwnProperty, e = "~";
|
16
16
|
function o() {
|
17
17
|
}
|
18
18
|
Object.create && (o.prototype = /* @__PURE__ */ Object.create(null), new o().__proto__ || (e = !1));
|
19
|
-
function
|
19
|
+
function r(h, i, l) {
|
20
20
|
this.fn = h, this.context = i, this.once = l || !1;
|
21
21
|
}
|
22
|
-
function f(h, i, l, c,
|
22
|
+
function f(h, i, l, c, v) {
|
23
23
|
if (typeof l != "function")
|
24
24
|
throw new TypeError("The listener must be a function");
|
25
|
-
var
|
26
|
-
return h._events[
|
25
|
+
var y = new r(l, c || h, v), m = e ? e + i : i;
|
26
|
+
return h._events[m] ? h._events[m].fn ? h._events[m] = [h._events[m], y] : h._events[m].push(y) : (h._events[m] = y, h._eventsCount++), h;
|
27
27
|
}
|
28
28
|
function d(h, i) {
|
29
29
|
--h._eventsCount === 0 ? h._events = new o() : delete h._events[i];
|
@@ -44,19 +44,19 @@ var re = { exports: {} };
|
|
44
44
|
return [];
|
45
45
|
if (c.fn)
|
46
46
|
return [c.fn];
|
47
|
-
for (var
|
48
|
-
|
49
|
-
return
|
47
|
+
for (var v = 0, y = c.length, m = new Array(y); v < y; v++)
|
48
|
+
m[v] = c[v].fn;
|
49
|
+
return m;
|
50
50
|
}, u.prototype.listenerCount = function(i) {
|
51
51
|
var l = e ? e + i : i, c = this._events[l];
|
52
52
|
return c ? c.fn ? 1 : c.length : 0;
|
53
|
-
}, u.prototype.emit = function(i, l, c,
|
53
|
+
}, u.prototype.emit = function(i, l, c, v, y, m) {
|
54
54
|
var _ = e ? e + i : i;
|
55
55
|
if (!this._events[_])
|
56
56
|
return !1;
|
57
|
-
var a = this._events[_],
|
57
|
+
var a = this._events[_], L = arguments.length, S, w;
|
58
58
|
if (a.fn) {
|
59
|
-
switch (a.once && this.removeListener(i, a.fn, void 0, !0),
|
59
|
+
switch (a.once && this.removeListener(i, a.fn, void 0, !0), L) {
|
60
60
|
case 1:
|
61
61
|
return a.fn.call(a.context), !0;
|
62
62
|
case 2:
|
@@ -64,36 +64,36 @@ var re = { exports: {} };
|
|
64
64
|
case 3:
|
65
65
|
return a.fn.call(a.context, l, c), !0;
|
66
66
|
case 4:
|
67
|
-
return a.fn.call(a.context, l, c,
|
67
|
+
return a.fn.call(a.context, l, c, v), !0;
|
68
68
|
case 5:
|
69
|
-
return a.fn.call(a.context, l, c,
|
69
|
+
return a.fn.call(a.context, l, c, v, y), !0;
|
70
70
|
case 6:
|
71
|
-
return a.fn.call(a.context, l, c,
|
71
|
+
return a.fn.call(a.context, l, c, v, y, m), !0;
|
72
72
|
}
|
73
|
-
for (
|
74
|
-
S[
|
73
|
+
for (w = 1, S = new Array(L - 1); w < L; w++)
|
74
|
+
S[w - 1] = arguments[w];
|
75
75
|
a.fn.apply(a.context, S);
|
76
76
|
} else {
|
77
77
|
var oe = a.length, N;
|
78
|
-
for (
|
79
|
-
switch (a[
|
78
|
+
for (w = 0; w < oe; w++)
|
79
|
+
switch (a[w].once && this.removeListener(i, a[w].fn, void 0, !0), L) {
|
80
80
|
case 1:
|
81
|
-
a[
|
81
|
+
a[w].fn.call(a[w].context);
|
82
82
|
break;
|
83
83
|
case 2:
|
84
|
-
a[
|
84
|
+
a[w].fn.call(a[w].context, l);
|
85
85
|
break;
|
86
86
|
case 3:
|
87
|
-
a[
|
87
|
+
a[w].fn.call(a[w].context, l, c);
|
88
88
|
break;
|
89
89
|
case 4:
|
90
|
-
a[
|
90
|
+
a[w].fn.call(a[w].context, l, c, v);
|
91
91
|
break;
|
92
92
|
default:
|
93
93
|
if (!S)
|
94
|
-
for (N = 1, S = new Array(
|
94
|
+
for (N = 1, S = new Array(L - 1); N < L; N++)
|
95
95
|
S[N - 1] = arguments[N];
|
96
|
-
a[
|
96
|
+
a[w].fn.apply(a[w].context, S);
|
97
97
|
}
|
98
98
|
}
|
99
99
|
return !0;
|
@@ -101,27 +101,27 @@ var re = { exports: {} };
|
|
101
101
|
return f(this, i, l, c, !1);
|
102
102
|
}, u.prototype.once = function(i, l, c) {
|
103
103
|
return f(this, i, l, c, !0);
|
104
|
-
}, u.prototype.removeListener = function(i, l, c,
|
105
|
-
var
|
106
|
-
if (!this._events[
|
104
|
+
}, u.prototype.removeListener = function(i, l, c, v) {
|
105
|
+
var y = e ? e + i : i;
|
106
|
+
if (!this._events[y])
|
107
107
|
return this;
|
108
108
|
if (!l)
|
109
|
-
return d(this,
|
110
|
-
var
|
111
|
-
if (
|
112
|
-
|
109
|
+
return d(this, y), this;
|
110
|
+
var m = this._events[y];
|
111
|
+
if (m.fn)
|
112
|
+
m.fn === l && (!v || m.once) && (!c || m.context === c) && d(this, y);
|
113
113
|
else {
|
114
|
-
for (var _ = 0, a = [],
|
115
|
-
(
|
116
|
-
a.length ? this._events[
|
114
|
+
for (var _ = 0, a = [], L = m.length; _ < L; _++)
|
115
|
+
(m[_].fn !== l || v && !m[_].once || c && m[_].context !== c) && a.push(m[_]);
|
116
|
+
a.length ? this._events[y] = a.length === 1 ? a[0] : a : d(this, y);
|
117
117
|
}
|
118
118
|
return this;
|
119
119
|
}, u.prototype.removeAllListeners = function(i) {
|
120
120
|
var l;
|
121
121
|
return i ? (l = e ? e + i : i, this._events[l] && d(this, l)) : (this._events = new o(), this._eventsCount = 0), this;
|
122
122
|
}, u.prototype.off = u.prototype.removeListener, u.prototype.addListener = u.prototype.on, u.prefixed = e, u.EventEmitter = u, n.exports = u;
|
123
|
-
})(
|
124
|
-
var ie =
|
123
|
+
})(se);
|
124
|
+
var ie = se.exports;
|
125
125
|
const le = /* @__PURE__ */ ne(ie);
|
126
126
|
var ae = function(t) {
|
127
127
|
return ce(t) && !he(t);
|
@@ -143,57 +143,57 @@ function pe(n) {
|
|
143
143
|
function B(n, t) {
|
144
144
|
return t.clone !== !1 && t.isMergeableObject(n) ? U(pe(n), n, t) : n;
|
145
145
|
}
|
146
|
-
function
|
146
|
+
function me(n, t, e) {
|
147
147
|
return n.concat(t).map(function(o) {
|
148
148
|
return B(o, e);
|
149
149
|
});
|
150
150
|
}
|
151
|
-
function
|
151
|
+
function we(n, t) {
|
152
152
|
if (!t.customMerge)
|
153
153
|
return U;
|
154
154
|
var e = t.customMerge(n);
|
155
155
|
return typeof e == "function" ? e : U;
|
156
156
|
}
|
157
|
-
function
|
157
|
+
function ge(n) {
|
158
158
|
return Object.getOwnPropertySymbols ? Object.getOwnPropertySymbols(n).filter(function(t) {
|
159
159
|
return Object.propertyIsEnumerable.call(n, t);
|
160
160
|
}) : [];
|
161
161
|
}
|
162
162
|
function X(n) {
|
163
|
-
return Object.keys(n).concat(
|
163
|
+
return Object.keys(n).concat(ge(n));
|
164
164
|
}
|
165
|
-
function
|
165
|
+
function re(n, t) {
|
166
166
|
try {
|
167
167
|
return t in n;
|
168
168
|
} catch {
|
169
169
|
return !1;
|
170
170
|
}
|
171
171
|
}
|
172
|
-
function
|
173
|
-
return
|
172
|
+
function ye(n, t) {
|
173
|
+
return re(n, t) && !(Object.hasOwnProperty.call(n, t) && Object.propertyIsEnumerable.call(n, t));
|
174
174
|
}
|
175
175
|
function be(n, t, e) {
|
176
176
|
var o = {};
|
177
|
-
return e.isMergeableObject(n) && X(n).forEach(function(
|
178
|
-
o[
|
179
|
-
}), X(t).forEach(function(
|
180
|
-
|
177
|
+
return e.isMergeableObject(n) && X(n).forEach(function(r) {
|
178
|
+
o[r] = B(n[r], e);
|
179
|
+
}), X(t).forEach(function(r) {
|
180
|
+
ye(n, r) || (re(n, r) && e.isMergeableObject(t[r]) ? o[r] = we(r, e)(n[r], t[r], e) : o[r] = B(t[r], e));
|
181
181
|
}), o;
|
182
182
|
}
|
183
183
|
function U(n, t, e) {
|
184
|
-
e = e || {}, e.arrayMerge = e.arrayMerge ||
|
185
|
-
var o = Array.isArray(t),
|
184
|
+
e = e || {}, e.arrayMerge = e.arrayMerge || me, e.isMergeableObject = e.isMergeableObject || ae, e.cloneUnlessOtherwiseSpecified = B;
|
185
|
+
var o = Array.isArray(t), r = Array.isArray(n), f = o === r;
|
186
186
|
return f ? o ? e.arrayMerge(n, t, e) : be(n, t, e) : B(t, e);
|
187
187
|
}
|
188
188
|
U.all = function(t, e) {
|
189
189
|
if (!Array.isArray(t))
|
190
190
|
throw new Error("first argument should be an array");
|
191
|
-
return t.reduce(function(o,
|
192
|
-
return U(o,
|
191
|
+
return t.reduce(function(o, r) {
|
192
|
+
return U(o, r, e);
|
193
193
|
}, {});
|
194
194
|
};
|
195
|
-
var
|
196
|
-
const Ee = /* @__PURE__ */ ne(
|
195
|
+
var ve = U, Oe = ve;
|
196
|
+
const Ee = /* @__PURE__ */ ne(Oe);
|
197
197
|
/*!
|
198
198
|
* is-plain-object <https://github.com/jonschlinkert/is-plain-object>
|
199
199
|
*
|
@@ -239,6 +239,8 @@ const Ce = '[data-elem="drawer.panel"]', F = "data-drawers-group", _e = [
|
|
239
239
|
onOpen: null,
|
240
240
|
onOpenAnimationEnd: null,
|
241
241
|
openClass: "drawer_open",
|
242
|
+
closingClass: "drawer_closing",
|
243
|
+
openingClass: "drawer_opening",
|
242
244
|
openAnimationDuration: 0,
|
243
245
|
closeAnimationDuration: 0,
|
244
246
|
lockPageScroll: !0
|
@@ -248,46 +250,46 @@ function te(n) {
|
|
248
250
|
isMergeableObject: Ae
|
249
251
|
});
|
250
252
|
}
|
251
|
-
var E,
|
253
|
+
var E, O, P, $;
|
252
254
|
class Y {
|
253
255
|
constructor({ target: t, type: e, owner: o }) {
|
254
|
-
|
255
|
-
|
256
|
-
|
257
|
-
|
258
|
-
const
|
259
|
-
if (!
|
256
|
+
g(this, E, void 0);
|
257
|
+
g(this, O, void 0);
|
258
|
+
g(this, P, void 0);
|
259
|
+
g(this, $, !1);
|
260
|
+
const r = Q(t);
|
261
|
+
if (!r)
|
260
262
|
throw new Error("Trigger element cannot be found");
|
261
|
-
b(this, E,
|
263
|
+
b(this, E, r), b(this, O, o), b(this, P, e), this.init();
|
262
264
|
}
|
263
265
|
// Accessors
|
264
266
|
get isActive() {
|
265
|
-
return
|
267
|
+
return s(this, $);
|
266
268
|
}
|
267
269
|
get owner() {
|
268
|
-
return
|
270
|
+
return s(this, O);
|
269
271
|
}
|
270
272
|
// Methods
|
271
273
|
init() {
|
272
|
-
|
274
|
+
s(this, E).addEventListener("click", (t) => this.clickHandler(t)), s(this, O).on("open", () => this.setActive(!0)), s(this, O).on("close", () => this.setActive(!1));
|
273
275
|
}
|
274
276
|
clickHandler(t) {
|
275
|
-
t.__drawerTrigger = this,
|
277
|
+
t.__drawerTrigger = this, s(this, P) === "open" ? s(this, O).isOpen || s(this, O).open(s(this, E)) : s(this, P) === "close" ? s(this, O).isOpen && s(this, O).close(s(this, E)) : s(this, O).isOpen ? s(this, O).close(s(this, E)) : s(this, O).open(s(this, E));
|
276
278
|
}
|
277
279
|
setActive(t) {
|
278
|
-
b(this, $, t), t ?
|
280
|
+
b(this, $, t), t ? s(this, E).classList.add("drawer-trigger_active") : s(this, E).classList.remove("drawer-trigger_active");
|
279
281
|
}
|
280
282
|
}
|
281
|
-
E = new WeakMap(),
|
283
|
+
E = new WeakMap(), O = new WeakMap(), P = new WeakMap(), $ = new WeakMap();
|
282
284
|
var p, K, j, H, T;
|
283
|
-
class
|
285
|
+
class Le extends le {
|
284
286
|
constructor({ target: e, options: o }) {
|
285
287
|
super();
|
286
|
-
|
287
|
-
|
288
|
-
|
289
|
-
|
290
|
-
|
288
|
+
g(this, p, void 0);
|
289
|
+
g(this, K, void 0);
|
290
|
+
g(this, j, void 0);
|
291
|
+
g(this, H, void 0);
|
292
|
+
g(this, T, void 0);
|
291
293
|
this.handleDocumentClick = async (u) => {
|
292
294
|
var l;
|
293
295
|
if (((l = u.__drawerTrigger) == null ? void 0 : l.owner) === this)
|
@@ -296,21 +298,21 @@ class ke extends le {
|
|
296
298
|
if (u.composedPath(), this.dom.panel.contains(h))
|
297
299
|
return;
|
298
300
|
const i = h == null ? void 0 : h.closest("[data-drawer]");
|
299
|
-
i ? i.getAttribute("data-drawer") ===
|
301
|
+
i ? i.getAttribute("data-drawer") === s(this, T) ? this.handleUnderlayClick(u) : this.handleOtherDrawerClick(u) : this.handleOutsideClick(u);
|
300
302
|
}, this.handleKeydown = (u) => {
|
301
|
-
|
303
|
+
s(this, p).closeOnEsc && u.key === "Escape" && this.close();
|
302
304
|
};
|
303
|
-
const
|
305
|
+
const r = te(o ? [ee, o] : [ee]), f = Q(e);
|
304
306
|
if (f === null)
|
305
307
|
throw new Error("Drawer's root cannot be found");
|
306
308
|
b(this, T, f.getAttribute("data-drawer"));
|
307
309
|
const d = f.querySelector(Ce);
|
308
310
|
if (d === null)
|
309
|
-
throw new Error(`Drawer's panel cannot be found. Alias: ${
|
311
|
+
throw new Error(`Drawer's panel cannot be found. Alias: ${s(this, T)}`);
|
310
312
|
this.dom = {
|
311
313
|
root: f,
|
312
314
|
panel: d
|
313
|
-
}, this.setOptions(
|
315
|
+
}, this.setOptions(r), this.dom.panel.setAttribute("tabindex", "-1"), this.dom.root.classList.add("drawer_initialized");
|
314
316
|
}
|
315
317
|
addEventListeners() {
|
316
318
|
this.dom.root.addEventListener("keydown", this.handleKeydown), document.addEventListener("click", this.handleDocumentClick);
|
@@ -320,40 +322,40 @@ class ke extends le {
|
|
320
322
|
}
|
321
323
|
// Accessors
|
322
324
|
get isOpen() {
|
323
|
-
return
|
325
|
+
return s(this, j);
|
324
326
|
}
|
325
327
|
get isModal() {
|
326
|
-
return
|
328
|
+
return s(this, p).modal;
|
327
329
|
}
|
328
330
|
set isModal(e) {
|
329
331
|
this.dom.root.classList[e ? "add" : "remove"]("drawer_modal");
|
330
332
|
}
|
331
333
|
get willLockScroll() {
|
332
|
-
return
|
334
|
+
return s(this, p).lockPageScroll;
|
333
335
|
}
|
334
336
|
set zIndex(e) {
|
335
337
|
this.dom.root.style.setProperty("--z-index", String(e)), b(this, K, e);
|
336
338
|
}
|
337
339
|
get zIndex() {
|
338
|
-
return
|
340
|
+
return s(this, K);
|
339
341
|
}
|
340
342
|
// Methods
|
341
343
|
async open(e) {
|
342
|
-
await V(0), !
|
344
|
+
await V(0), !s(this, j) && (this.emit("beforeOpen", { drawer: this, trigger: e }), b(this, j, !0), this.dom.root.classList.add(s(this, p).openingClass), this.emit("open", { drawer: this, trigger: e }), typeof s(this, p).openAnimationDuration == "number" && await V(s(this, p).openAnimationDuration), this.dom.root.classList.remove(s(this, p).openingClass), this.dom.root.classList.add(s(this, p).openClass), this.emit("openAnimationEnd", { drawer: this, trigger: e }), this.focus(), this.addEventListeners());
|
343
345
|
}
|
344
346
|
async close(e) {
|
345
|
-
|
347
|
+
s(this, p).onCloseConfirm && !s(this, p).onCloseConfirm(this, e) || (this.emit("beforeClose", { drawer: this, trigger: e }), this.removeEventListeners(), b(this, j, !1), this.dom.root.classList.remove(s(this, p).openClass), this.dom.root.classList.add(s(this, p).closingClass), this.emit("close", { drawer: this, trigger: e }), typeof s(this, p).closeAnimationDuration == "number" && await V(s(this, p).closeAnimationDuration), this.dom.root.classList.remove(s(this, p).closingClass), this.emit("closeAnimationEnd", { drawer: this, trigger: e }));
|
346
348
|
}
|
347
349
|
handleOtherDrawerClick(e) {
|
348
350
|
}
|
349
351
|
handleOutsideClick(e) {
|
350
|
-
|
352
|
+
s(this, p).closeOnOutsideClick && (typeof s(this, p).closeOnOutsideClick == "object" && s(this, p).closeOnOutsideClick.hasOwnProperty("checkTarget") ? s(this, p).closeOnOutsideClick.checkTarget(e.target) && this.close() : this.close());
|
351
353
|
}
|
352
354
|
handleUnderlayClick(e) {
|
353
|
-
|
355
|
+
s(this, p).closeOnOutsideClick && this.close();
|
354
356
|
}
|
355
357
|
focus() {
|
356
|
-
|
358
|
+
s(this, p).focusOnChild && this.focusChild() || this.focusSelf();
|
357
359
|
}
|
358
360
|
focusSelf() {
|
359
361
|
this.dom.panel.focus();
|
@@ -364,7 +366,7 @@ class ke extends le {
|
|
364
366
|
}
|
365
367
|
setOptions(e) {
|
366
368
|
var o;
|
367
|
-
e.hasOwnProperty("modal") && ((o =
|
369
|
+
e.hasOwnProperty("modal") && ((o = s(this, p)) == null ? void 0 : o.modal) !== e.modal && (this.isModal = e.modal), b(this, p, s(this, p) ? te([s(this, p), e]) : e);
|
368
370
|
}
|
369
371
|
assignGroup(e) {
|
370
372
|
b(this, H, e);
|
@@ -372,42 +374,42 @@ class ke extends le {
|
|
372
374
|
}
|
373
375
|
p = new WeakMap(), K = new WeakMap(), j = new WeakMap(), H = new WeakMap(), T = new WeakMap();
|
374
376
|
var M;
|
375
|
-
class
|
377
|
+
class ke {
|
376
378
|
constructor() {
|
377
|
-
|
379
|
+
g(this, M, /* @__PURE__ */ new Map());
|
378
380
|
}
|
379
381
|
lock(t, e) {
|
380
|
-
|
381
|
-
const o =
|
382
|
+
s(this, M).has(t) || s(this, M).set(t, /* @__PURE__ */ new Set());
|
383
|
+
const o = s(this, M).get(t);
|
382
384
|
o.size === 0 && t.classList.add("scroll-lock-by-drawer"), o.add(e);
|
383
385
|
}
|
384
386
|
unlock(t, e) {
|
385
|
-
const o =
|
387
|
+
const o = s(this, M).get(t);
|
386
388
|
o == null || o.delete(e), (!o || o.size === 0) && t.classList.remove("scroll-lock-by-drawer");
|
387
389
|
}
|
388
390
|
}
|
389
391
|
M = new WeakMap();
|
390
|
-
var x, A, C, D,
|
392
|
+
var x, A, C, D, k;
|
391
393
|
const q = class q {
|
392
394
|
constructor(t) {
|
393
|
-
|
394
|
-
|
395
|
-
|
396
|
-
|
397
|
-
|
398
|
-
b(this, A, []), b(this, C, []), b(this,
|
399
|
-
|
400
|
-
}, this.onCloseAnimationEnd = ({ drawer:
|
401
|
-
const d =
|
402
|
-
for (delete d[
|
395
|
+
g(this, x, void 0);
|
396
|
+
g(this, A, void 0);
|
397
|
+
g(this, C, void 0);
|
398
|
+
g(this, D, void 0);
|
399
|
+
g(this, k, void 0);
|
400
|
+
b(this, A, []), b(this, C, []), b(this, k, /* @__PURE__ */ new Map()), this.onBeforeOpen = ({ drawer: r, trigger: f }) => {
|
401
|
+
r.isModal ? (s(this, k).set(r, s(this, A).length), s(this, A).push(r), r.zIndex = s(this, C).length + s(this, A).length) : (s(this, k).set(r, s(this, C).length), s(this, C).push(r), r.zIndex = s(this, C).length, s(this, A).length > 0 && s(this, A).forEach((d, u) => d.zIndex = s(this, C).length + u + 1)), r.willLockScroll && this.lockScroll(r);
|
402
|
+
}, this.onCloseAnimationEnd = ({ drawer: r, trigger: f }) => {
|
403
|
+
const d = r.isModal ? s(this, A) : s(this, C);
|
404
|
+
for (delete d[s(this, k).get(r)]; d.length && !d.at(-1); )
|
403
405
|
d.pop();
|
404
|
-
|
406
|
+
s(this, k).delete(r), this.unlockScroll(r);
|
405
407
|
};
|
406
408
|
const e = Q(t);
|
407
409
|
if (e === null)
|
408
410
|
throw new Error("Drawer's group root cannot be found");
|
409
411
|
b(this, x, e);
|
410
|
-
const o =
|
412
|
+
const o = s(this, x).closest("[data-scrollable], html") || s(this, x).matches("[data-scrollable], html") && s(this, x);
|
411
413
|
if (o === null)
|
412
414
|
throw new Error("Scrollable container for group root cannot be found");
|
413
415
|
b(this, D, o);
|
@@ -416,19 +418,19 @@ const q = class q {
|
|
416
418
|
t.on("beforeOpen", this.onBeforeOpen), t.on("closeAnimationEnd", this.onCloseAnimationEnd), t.assignGroup(this);
|
417
419
|
}
|
418
420
|
lockScroll(t) {
|
419
|
-
q.scrollLock.lock(
|
421
|
+
q.scrollLock.lock(s(this, D), t);
|
420
422
|
}
|
421
423
|
unlockScroll(t) {
|
422
|
-
q.scrollLock.unlock(
|
424
|
+
q.scrollLock.unlock(s(this, D), t);
|
423
425
|
}
|
424
426
|
};
|
425
|
-
x = new WeakMap(), A = new WeakMap(), C = new WeakMap(), D = new WeakMap(),
|
427
|
+
x = new WeakMap(), A = new WeakMap(), C = new WeakMap(), D = new WeakMap(), k = new WeakMap(), q.scrollLock = new ke();
|
426
428
|
let G = q;
|
427
429
|
var I, z;
|
428
430
|
const R = class R {
|
429
431
|
constructor() {
|
430
|
-
|
431
|
-
|
432
|
+
g(this, I, /* @__PURE__ */ new Map());
|
433
|
+
g(this, z, /* @__PURE__ */ new Map());
|
432
434
|
if (R.instance)
|
433
435
|
return R.instance;
|
434
436
|
R.instance = this;
|
@@ -436,18 +438,18 @@ const R = class R {
|
|
436
438
|
init(t) {
|
437
439
|
document.querySelectorAll(`[${F}]`).forEach((f) => {
|
438
440
|
const d = f.getAttribute(F);
|
439
|
-
typeof d == "string" &&
|
440
|
-
}),
|
441
|
+
typeof d == "string" && s(this, z).set(d, new G(f));
|
442
|
+
}), s(this, z).set("default", new G(document.documentElement)), document.querySelectorAll("[data-drawer]").forEach((f) => {
|
441
443
|
var l;
|
442
444
|
const d = f.getAttribute("data-drawer");
|
443
445
|
if (typeof d != "string")
|
444
446
|
return;
|
445
|
-
const u = new
|
446
|
-
|
447
|
+
const u = new Le({ target: f, options: t });
|
448
|
+
s(this, I).set(d, u);
|
447
449
|
const h = f.closest(`[${F}]`), i = h ? h.getAttribute(F) : "default";
|
448
450
|
if (typeof i != "string")
|
449
451
|
throw new Error("Group doesn't have alias set correctly");
|
450
|
-
(l =
|
452
|
+
(l = s(this, z).get(i)) == null || l.add(u);
|
451
453
|
}), document.querySelectorAll("[data-drawer-open], [data-drawer-close], [data-drawer-toggle]").forEach((f) => {
|
452
454
|
if (f.hasAttribute("data-drawer-open")) {
|
453
455
|
const d = f.getAttribute("data-drawer-open");
|
@@ -462,22 +464,22 @@ const R = class R {
|
|
462
464
|
});
|
463
465
|
}
|
464
466
|
open(t, { trigger: e, options: o } = {}) {
|
465
|
-
var
|
466
|
-
(
|
467
|
+
var r;
|
468
|
+
(r = this.get(t)) == null || r.open(e);
|
467
469
|
}
|
468
470
|
close(t, { trigger: e, options: o } = {}) {
|
469
|
-
var
|
470
|
-
(
|
471
|
+
var r;
|
472
|
+
(r = this.get(t)) == null || r.close(e);
|
471
473
|
}
|
472
474
|
get(t) {
|
473
|
-
return typeof t == "string" &&
|
475
|
+
return typeof t == "string" && s(this, I).get(t) || null;
|
474
476
|
}
|
475
477
|
on(t, e, o) {
|
476
|
-
var
|
478
|
+
var r;
|
477
479
|
if (t)
|
478
|
-
(
|
480
|
+
(r = this.get(t)) == null || r.on(e, o);
|
479
481
|
else
|
480
|
-
for (const [f, d] of
|
482
|
+
for (const [f, d] of s(this, I))
|
481
483
|
d.on(e, o);
|
482
484
|
}
|
483
485
|
};
|
@@ -485,7 +487,7 @@ I = new WeakMap(), z = new WeakMap();
|
|
485
487
|
let J = R;
|
486
488
|
typeof window < "u" && (window.hasOwnProperty("app") || (window.app = {}), window.app.drawers = new J());
|
487
489
|
export {
|
488
|
-
|
490
|
+
Le as Drawer,
|
489
491
|
G as DrawersGroup,
|
490
492
|
Y as Trigger,
|
491
493
|
J as default
|
package/dist/drawers.umd.js
CHANGED
@@ -1,6 +1,6 @@
|
|
1
|
-
(function(
|
1
|
+
(function(m,y){typeof exports=="object"&&typeof module<"u"?y(exports):typeof define=="function"&&define.amd?define(["exports"],y):(m=typeof globalThis<"u"?globalThis:m||self,y(m.Drawers={}))})(this,function(m){"use strict";var le=(m,y,C)=>{if(!y.has(m))throw TypeError("Cannot "+C)};var n=(m,y,C)=>(le(m,y,"read from private field"),C?C.call(m):y.get(m)),b=(m,y,C)=>{if(y.has(m))throw TypeError("Cannot add the same private member more than once");y instanceof WeakSet?y.add(m):y.set(m,C)},O=(m,y,C,Y)=>(le(m,y,"write to private field"),Y?Y.call(m,C):y.set(m,C),C);var _,E,z,K,f,F,x,X,U,T,P,L,S,N,j,q,R;function y(s){return s&&s.__esModule&&Object.prototype.hasOwnProperty.call(s,"default")?s.default:s}var C={exports:{}};(function(s){var t=Object.prototype.hasOwnProperty,e="~";function i(){}Object.create&&(i.prototype=Object.create(null),new i().__proto__||(e=!1));function r(h,o,l){this.fn=h,this.context=o,this.once=l||!1}function d(h,o,l,c,A){if(typeof l!="function")throw new TypeError("The listener must be a function");var v=new r(l,c||h,A),w=e?e+o:o;return h._events[w]?h._events[w].fn?h._events[w]=[h._events[w],v]:h._events[w].push(v):(h._events[w]=v,h._eventsCount++),h}function p(h,o){--h._eventsCount===0?h._events=new i:delete h._events[o]}function u(){this._events=new i,this._eventsCount=0}u.prototype.eventNames=function(){var o=[],l,c;if(this._eventsCount===0)return o;for(c in l=this._events)t.call(l,c)&&o.push(e?c.slice(1):c);return Object.getOwnPropertySymbols?o.concat(Object.getOwnPropertySymbols(l)):o},u.prototype.listeners=function(o){var l=e?e+o:o,c=this._events[l];if(!c)return[];if(c.fn)return[c.fn];for(var A=0,v=c.length,w=new Array(v);A<v;A++)w[A]=c[A].fn;return w},u.prototype.listenerCount=function(o){var l=e?e+o:o,c=this._events[l];return c?c.fn?1:c.length:0},u.prototype.emit=function(o,l,c,A,v,w){var k=e?e+o:o;if(!this._events[k])return!1;var a=this._events[k],M=arguments.length,D,g;if(a.fn){switch(a.once&&this.removeListener(o,a.fn,void 0,!0),M){case 1:return a.fn.call(a.context),!0;case 2:return a.fn.call(a.context,l),!0;case 3:return a.fn.call(a.context,l,c),!0;case 4:return a.fn.call(a.context,l,c,A),!0;case 5:return a.fn.call(a.context,l,c,A,v),!0;case 6:return a.fn.call(a.context,l,c,A,v,w),!0}for(g=1,D=new Array(M-1);g<M;g++)D[g-1]=arguments[g];a.fn.apply(a.context,D)}else{var ke=a.length,V;for(g=0;g<ke;g++)switch(a[g].once&&this.removeListener(o,a[g].fn,void 0,!0),M){case 1:a[g].fn.call(a[g].context);break;case 2:a[g].fn.call(a[g].context,l);break;case 3:a[g].fn.call(a[g].context,l,c);break;case 4:a[g].fn.call(a[g].context,l,c,A);break;default:if(!D)for(V=1,D=new Array(M-1);V<M;V++)D[V-1]=arguments[V];a[g].fn.apply(a[g].context,D)}}return!0},u.prototype.on=function(o,l,c){return d(this,o,l,c,!1)},u.prototype.once=function(o,l,c){return d(this,o,l,c,!0)},u.prototype.removeListener=function(o,l,c,A){var v=e?e+o:o;if(!this._events[v])return this;if(!l)return p(this,v),this;var w=this._events[v];if(w.fn)w.fn===l&&(!A||w.once)&&(!c||w.context===c)&&p(this,v);else{for(var k=0,a=[],M=w.length;k<M;k++)(w[k].fn!==l||A&&!w[k].once||c&&w[k].context!==c)&&a.push(w[k]);a.length?this._events[v]=a.length===1?a[0]:a:p(this,v)}return this},u.prototype.removeAllListeners=function(o){var l;return o?(l=e?e+o:o,this._events[l]&&p(this,l)):(this._events=new i,this._eventsCount=0),this},u.prototype.off=u.prototype.removeListener,u.prototype.addListener=u.prototype.on,u.prefixed=e,u.EventEmitter=u,s.exports=u})(C);var Y=C.exports;const ae=y(Y);var ce=function(t){return he(t)&&!ue(t)};function he(s){return!!s&&typeof s=="object"}function ue(s){var t=Object.prototype.toString.call(s);return t==="[object RegExp]"||t==="[object Date]"||pe(s)}var fe=typeof Symbol=="function"&&Symbol.for,de=fe?Symbol.for("react.element"):60103;function pe(s){return s.$$typeof===de}function me(s){return Array.isArray(s)?[]:{}}function B(s,t){return t.clone!==!1&&t.isMergeableObject(s)?I(me(s),s,t):s}function we(s,t,e){return s.concat(t).map(function(i){return B(i,e)})}function ge(s,t){if(!t.customMerge)return I;var e=t.customMerge(s);return typeof e=="function"?e:I}function ye(s){return Object.getOwnPropertySymbols?Object.getOwnPropertySymbols(s).filter(function(t){return Object.propertyIsEnumerable.call(s,t)}):[]}function te(s){return Object.keys(s).concat(ye(s))}function ne(s,t){try{return t in s}catch{return!1}}function be(s,t){return ne(s,t)&&!(Object.hasOwnProperty.call(s,t)&&Object.propertyIsEnumerable.call(s,t))}function ve(s,t,e){var i={};return e.isMergeableObject(s)&&te(s).forEach(function(r){i[r]=B(s[r],e)}),te(t).forEach(function(r){be(s,r)||(ne(s,r)&&e.isMergeableObject(t[r])?i[r]=ge(r,e)(s[r],t[r],e):i[r]=B(t[r],e))}),i}function I(s,t,e){e=e||{},e.arrayMerge=e.arrayMerge||we,e.isMergeableObject=e.isMergeableObject||ce,e.cloneUnlessOtherwiseSpecified=B;var i=Array.isArray(t),r=Array.isArray(s),d=i===r;return d?i?e.arrayMerge(s,t,e):ve(s,t,e):B(t,e)}I.all=function(t,e){if(!Array.isArray(t))throw new Error("first argument should be an array");return t.reduce(function(i,r){return I(i,r,e)},{})};var Oe=I,Ee=Oe;const Ae=y(Ee);/*!
|
2
2
|
* is-plain-object <https://github.com/jonschlinkert/is-plain-object>
|
3
3
|
*
|
4
4
|
* Copyright (c) 2014-2017, Jon Schlinkert.
|
5
5
|
* Released under the MIT License.
|
6
|
-
*/function
|
6
|
+
*/function se(s){return Object.prototype.toString.call(s)==="[object Object]"}function Ce(s){var t,e;return se(s)===!1?!1:(t=s.constructor,t===void 0?!0:(e=t.prototype,!(se(e)===!1||e.hasOwnProperty("isPrototypeOf")===!1)))}function Z(s){return s instanceof Element?s:document.querySelector(s)}async function ee(s){return await new Promise(t=>setTimeout(t,s))}const _e='[data-elem="drawer.panel"]',J="data-drawers-group",Le=["a[href]","area[href]",'input:not([disabled]):not([type="hidden"]):not([aria-hidden])',"select:not([disabled]):not([aria-hidden])","textarea:not([disabled]):not([aria-hidden])","button:not([disabled]):not([aria-hidden])","iframe","object","embed","[contenteditable]",'[tabindex]:not([tabindex^="-"])'],re={modal:!0,focusOnChild:!0,closeOnEsc:!0,closeOnOutsideClick:!0,closeOnUnderlayClick:!0,onCloseConfirm:()=>!0,onBeforeClose:null,onClose:null,onCloseAnimationEnd:null,onBeforeOpen:null,onOpen:null,onOpenAnimationEnd:null,openClass:"drawer_open",closingClass:"drawer_closing",openingClass:"drawer_opening",openAnimationDuration:0,closeAnimationDuration:0,lockPageScroll:!0};function ie(s){return Ae.all(s,{isMergeableObject:Ce})}class Q{constructor({target:t,type:e,owner:i}){b(this,_,void 0);b(this,E,void 0);b(this,z,void 0);b(this,K,!1);const r=Z(t);if(!r)throw new Error("Trigger element cannot be found");O(this,_,r),O(this,E,i),O(this,z,e),this.init()}get isActive(){return n(this,K)}get owner(){return n(this,E)}init(){n(this,_).addEventListener("click",t=>this.clickHandler(t)),n(this,E).on("open",()=>this.setActive(!0)),n(this,E).on("close",()=>this.setActive(!1))}clickHandler(t){t.__drawerTrigger=this,n(this,z)==="open"?n(this,E).isOpen||n(this,E).open(n(this,_)):n(this,z)==="close"?n(this,E).isOpen&&n(this,E).close(n(this,_)):n(this,E).isOpen?n(this,E).close(n(this,_)):n(this,E).open(n(this,_))}setActive(t){O(this,K,t),t?n(this,_).classList.add("drawer-trigger_active"):n(this,_).classList.remove("drawer-trigger_active")}}_=new WeakMap,E=new WeakMap,z=new WeakMap,K=new WeakMap;class oe extends ae{constructor({target:e,options:i}){super();b(this,f,void 0);b(this,F,void 0);b(this,x,void 0);b(this,X,void 0);b(this,U,void 0);this.handleDocumentClick=async u=>{var l;if(((l=u.__drawerTrigger)==null?void 0:l.owner)===this)return;const h=u.target;if(u.composedPath(),this.dom.panel.contains(h))return;const o=h==null?void 0:h.closest("[data-drawer]");o?o.getAttribute("data-drawer")===n(this,U)?this.handleUnderlayClick(u):this.handleOtherDrawerClick(u):this.handleOutsideClick(u)},this.handleKeydown=u=>{n(this,f).closeOnEsc&&u.key==="Escape"&&this.close()};const r=ie(i?[re,i]:[re]),d=Z(e);if(d===null)throw new Error("Drawer's root cannot be found");O(this,U,d.getAttribute("data-drawer"));const p=d.querySelector(_e);if(p===null)throw new Error(`Drawer's panel cannot be found. Alias: ${n(this,U)}`);this.dom={root:d,panel:p},this.setOptions(r),this.dom.panel.setAttribute("tabindex","-1"),this.dom.root.classList.add("drawer_initialized")}addEventListeners(){this.dom.root.addEventListener("keydown",this.handleKeydown),document.addEventListener("click",this.handleDocumentClick)}removeEventListeners(){this.dom.root.removeEventListener("keydown",this.handleKeydown),document.removeEventListener("click",this.handleDocumentClick)}get isOpen(){return n(this,x)}get isModal(){return n(this,f).modal}set isModal(e){this.dom.root.classList[e?"add":"remove"]("drawer_modal")}get willLockScroll(){return n(this,f).lockPageScroll}set zIndex(e){this.dom.root.style.setProperty("--z-index",String(e)),O(this,F,e)}get zIndex(){return n(this,F)}async open(e){await ee(0),!n(this,x)&&(this.emit("beforeOpen",{drawer:this,trigger:e}),O(this,x,!0),this.dom.root.classList.add(n(this,f).openingClass),this.emit("open",{drawer:this,trigger:e}),typeof n(this,f).openAnimationDuration=="number"&&await ee(n(this,f).openAnimationDuration),this.dom.root.classList.remove(n(this,f).openingClass),this.dom.root.classList.add(n(this,f).openClass),this.emit("openAnimationEnd",{drawer:this,trigger:e}),this.focus(),this.addEventListeners())}async close(e){n(this,f).onCloseConfirm&&!n(this,f).onCloseConfirm(this,e)||(this.emit("beforeClose",{drawer:this,trigger:e}),this.removeEventListeners(),O(this,x,!1),this.dom.root.classList.remove(n(this,f).openClass),this.dom.root.classList.add(n(this,f).closingClass),this.emit("close",{drawer:this,trigger:e}),typeof n(this,f).closeAnimationDuration=="number"&&await ee(n(this,f).closeAnimationDuration),this.dom.root.classList.remove(n(this,f).closingClass),this.emit("closeAnimationEnd",{drawer:this,trigger:e}))}handleOtherDrawerClick(e){}handleOutsideClick(e){n(this,f).closeOnOutsideClick&&(typeof n(this,f).closeOnOutsideClick=="object"&&n(this,f).closeOnOutsideClick.hasOwnProperty("checkTarget")?n(this,f).closeOnOutsideClick.checkTarget(e.target)&&this.close():this.close())}handleUnderlayClick(e){n(this,f).closeOnOutsideClick&&this.close()}focus(){n(this,f).focusOnChild&&this.focusChild()||this.focusSelf()}focusSelf(){this.dom.panel.focus()}focusChild(){const e=this.dom.panel.querySelector(Le.join(","));return e?(e.focus(),!0):!1}setOptions(e){var i;e.hasOwnProperty("modal")&&((i=n(this,f))==null?void 0:i.modal)!==e.modal&&(this.isModal=e.modal),O(this,f,n(this,f)?ie([n(this,f),e]):e)}assignGroup(e){O(this,X,e)}}f=new WeakMap,F=new WeakMap,x=new WeakMap,X=new WeakMap,U=new WeakMap;class Se{constructor(){b(this,T,new Map)}lock(t,e){n(this,T).has(t)||n(this,T).set(t,new Set);const i=n(this,T).get(t);i.size===0&&t.classList.add("scroll-lock-by-drawer"),i.add(e)}unlock(t,e){const i=n(this,T).get(t);i==null||i.delete(e),(!i||i.size===0)&&t.classList.remove("scroll-lock-by-drawer")}}T=new WeakMap;const G=class G{constructor(t){b(this,P,void 0);b(this,L,void 0);b(this,S,void 0);b(this,N,void 0);b(this,j,void 0);O(this,L,[]),O(this,S,[]),O(this,j,new Map),this.onBeforeOpen=({drawer:r,trigger:d})=>{r.isModal?(n(this,j).set(r,n(this,L).length),n(this,L).push(r),r.zIndex=n(this,S).length+n(this,L).length):(n(this,j).set(r,n(this,S).length),n(this,S).push(r),r.zIndex=n(this,S).length,n(this,L).length>0&&n(this,L).forEach((p,u)=>p.zIndex=n(this,S).length+u+1)),r.willLockScroll&&this.lockScroll(r)},this.onCloseAnimationEnd=({drawer:r,trigger:d})=>{const p=r.isModal?n(this,L):n(this,S);for(delete p[n(this,j).get(r)];p.length&&!p.at(-1);)p.pop();n(this,j).delete(r),this.unlockScroll(r)};const e=Z(t);if(e===null)throw new Error("Drawer's group root cannot be found");O(this,P,e);const i=n(this,P).closest("[data-scrollable], html")||n(this,P).matches("[data-scrollable], html")&&n(this,P);if(i===null)throw new Error("Scrollable container for group root cannot be found");O(this,N,i)}add(t){t.on("beforeOpen",this.onBeforeOpen),t.on("closeAnimationEnd",this.onCloseAnimationEnd),t.assignGroup(this)}lockScroll(t){G.scrollLock.lock(n(this,N),t)}unlockScroll(t){G.scrollLock.unlock(n(this,N),t)}};P=new WeakMap,L=new WeakMap,S=new WeakMap,N=new WeakMap,j=new WeakMap,G.scrollLock=new Se;let $=G;const H=class H{constructor(){b(this,q,new Map);b(this,R,new Map);if(H.instance)return H.instance;H.instance=this}init(t){document.querySelectorAll(`[${J}]`).forEach(d=>{const p=d.getAttribute(J);typeof p=="string"&&n(this,R).set(p,new $(d))}),n(this,R).set("default",new $(document.documentElement)),document.querySelectorAll("[data-drawer]").forEach(d=>{var l;const p=d.getAttribute("data-drawer");if(typeof p!="string")return;const u=new oe({target:d,options:t});n(this,q).set(p,u);const h=d.closest(`[${J}]`),o=h?h.getAttribute(J):"default";if(typeof o!="string")throw new Error("Group doesn't have alias set correctly");(l=n(this,R).get(o))==null||l.add(u)}),document.querySelectorAll("[data-drawer-open], [data-drawer-close], [data-drawer-toggle]").forEach(d=>{if(d.hasAttribute("data-drawer-open")){const p=d.getAttribute("data-drawer-open");new Q({target:d,type:"open",owner:this.get(p)})}else if(d.hasAttribute("data-drawer-close")){const p=d.getAttribute("data-drawer-close");new Q({target:d,type:"close",owner:this.get(p)})}else{const p=d.getAttribute("data-drawer-toggle");new Q({target:d,type:"toggle",owner:this.get(p)})}})}open(t,{trigger:e,options:i}={}){var r;(r=this.get(t))==null||r.open(e)}close(t,{trigger:e,options:i}={}){var r;(r=this.get(t))==null||r.close(e)}get(t){return typeof t=="string"&&n(this,q).get(t)||null}on(t,e,i){var r;if(t)(r=this.get(t))==null||r.on(e,i);else for(const[d,p]of n(this,q))p.on(e,i)}};q=new WeakMap,R=new WeakMap;let W=H;typeof window<"u"&&(window.hasOwnProperty("app")||(window.app={}),window.app.drawers=new W),m.Drawer=oe,m.DrawersGroup=$,m.Trigger=Q,m.default=W,Object.defineProperties(m,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
package/dist/style.css
CHANGED
@@ -1 +1 @@
|
|
1
|
-
html{overflow-x:hidden;scroll-behavior:auto}body{position:fixed;left:0;top:0;width:100%;background-color:#fff;height:100vh;overflow:hidden;margin:0;scroll-behavior:auto}.drawers-group{position:fixed;left:0;top:0;width:100%;height:100%;pointer-events:none}.drawers-group>*{pointer-events:all}.drawer{display:flex;justify-content:center;position:fixed;z-index:var(--z-index);left:0;top:0;width:100%;height:100%;overflow:hidden;pointer-events:none}.drawer_modal{background-color:#4e4e4e57;pointer-events:all}.drawer__panel{display:flex;height:100%;width:100%;max-width:600px;max-height:400px;margin:auto;overflow-x:hidden;pointer-events:all}.drawer__panel{transition:visibility .4s,opacity .4s,transform .4s}.drawer:not(.drawer_open),.drawer:not(.drawer_open) .drawer__panel{visibility:hidden;opacity:0;transform:none}.drawer__body{width:100%}.drawer:nth-child(1) .drawer__body{background-color:#0ff}.drawer:nth-child(2) .drawer__body{background-color:#8a2be2}.drawer:nth-child(3) .drawer__body{background-color:brown}
|
1
|
+
html{overflow-x:hidden;scroll-behavior:auto}body{position:fixed;left:0;top:0;width:100%;background-color:#fff;height:100vh;overflow:hidden;margin:0;scroll-behavior:auto}.drawers-group{position:fixed;left:0;top:0;width:100%;height:100%;pointer-events:none}.drawers-group>*{pointer-events:all}.drawer{display:flex;justify-content:center;position:fixed;z-index:var(--z-index);left:0;top:0;width:100%;height:100%;overflow:hidden;pointer-events:none}.drawer_modal{background-color:#4e4e4e57;pointer-events:all}.drawer__panel{display:flex;height:100%;width:100%;max-width:600px;max-height:400px;margin:auto;overflow-x:hidden;pointer-events:all}.drawer__panel{transition:visibility .4s,opacity .4s,transform .4s}.drawer:not(.drawer_open,.drawer_opening),.drawer:not(.drawer_open,.drawer_opening) .drawer__panel{visibility:hidden;opacity:0;transform:none}.drawer__body{width:100%}.drawer:nth-child(1) .drawer__body{background-color:#0ff}.drawer:nth-child(2) .drawer__body{background-color:#8a2be2}.drawer:nth-child(3) .drawer__body{background-color:brown}
|