@studiometa/ui 0.2.3 → 0.2.4
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/atoms/AnchorScrollTo/AnchorScrollTo.cjs +8 -13
- package/atoms/AnchorScrollTo/AnchorScrollTo.js +1 -26
- package/atoms/Cursor/Cursor.cjs +14 -22
- package/atoms/Cursor/Cursor.d.ts +2 -2
- package/atoms/Cursor/Cursor.js +1 -103
- package/atoms/Figure/Figure.cjs +9 -14
- package/atoms/Figure/Figure.d.ts +1 -1
- package/atoms/Figure/Figure.js +1 -27
- package/atoms/LargeText/LargeText.cjs +15 -23
- package/atoms/LargeText/LargeText.d.ts +3 -3
- package/atoms/LargeText/LargeText.js +1 -64
- package/atoms/LazyInclude/LazyInclude.cjs +8 -13
- package/atoms/LazyInclude/LazyInclude.d.ts +4 -4
- package/atoms/LazyInclude/LazyInclude.js +1 -46
- package/atoms/Prefetch/AbstractPrefetch.cjs +8 -13
- package/atoms/Prefetch/AbstractPrefetch.d.ts +1 -1
- package/atoms/Prefetch/AbstractPrefetch.js +1 -58
- package/atoms/Prefetch/PrefetchWhenOver.cjs +12 -34
- package/atoms/Prefetch/PrefetchWhenOver.d.ts +1 -1
- package/atoms/Prefetch/PrefetchWhenOver.js +1 -35
- package/atoms/Prefetch/PrefetchWhenVisible.cjs +12 -34
- package/atoms/Prefetch/PrefetchWhenVisible.d.ts +1 -1
- package/atoms/Prefetch/PrefetchWhenVisible.js +1 -36
- package/atoms/Prefetch/index.cjs +9 -16
- package/atoms/Prefetch/index.js +1 -8
- package/atoms/index.cjs +11 -17
- package/atoms/index.js +1 -13
- package/index.cjs +11 -15
- package/index.js +1 -3
- package/molecules/Accordion/Accordion.cjs +12 -34
- package/molecules/Accordion/Accordion.js +1 -35
- package/molecules/Accordion/AccordionCore.cjs +8 -13
- package/molecules/Accordion/AccordionCore.d.ts +2 -2
- package/molecules/Accordion/AccordionCore.js +1 -34
- package/molecules/Accordion/AccordionItem.cjs +70 -114
- package/molecules/Accordion/AccordionItem.d.ts +7 -6
- package/molecules/Accordion/AccordionItem.js +1 -178
- package/molecules/Menu/Menu.cjs +148 -0
- package/molecules/Menu/Menu.d.ts +140 -0
- package/molecules/Menu/Menu.js +1 -0
- package/molecules/Menu/MenuBtn.cjs +53 -0
- package/molecules/Menu/MenuBtn.d.ts +39 -0
- package/molecules/Menu/MenuBtn.js +1 -0
- package/molecules/Menu/MenuList.cjs +134 -0
- package/molecules/Menu/MenuList.d.ts +101 -0
- package/molecules/Menu/MenuList.js +1 -0
- package/molecules/Menu/index.cjs +33 -0
- package/molecules/Menu/index.d.ts +3 -0
- package/molecules/Menu/index.js +1 -0
- package/molecules/Modal/Modal.cjs +42 -71
- package/molecules/Modal/Modal.d.ts +5 -5
- package/molecules/Modal/Modal.js +1 -150
- package/molecules/Modal/ModalWithTransition.cjs +13 -43
- package/molecules/Modal/ModalWithTransition.js +1 -69
- package/molecules/Panel/Panel.cjs +42 -76
- package/molecules/Panel/Panel.js +1 -117
- package/molecules/Slider/AbstractSliderChild.cjs +10 -20
- package/molecules/Slider/AbstractSliderChild.d.ts +6 -2
- package/molecules/Slider/AbstractSliderChild.js +1 -43
- package/molecules/Slider/Slider.cjs +14 -24
- package/molecules/Slider/Slider.d.ts +6 -6
- package/molecules/Slider/Slider.js +1 -209
- package/molecules/Slider/SliderBtn.cjs +9 -16
- package/molecules/Slider/SliderBtn.d.ts +1 -1
- package/molecules/Slider/SliderBtn.js +1 -34
- package/molecules/Slider/SliderCount.cjs +9 -16
- package/molecules/Slider/SliderCount.js +1 -19
- package/molecules/Slider/SliderDots.cjs +9 -16
- package/molecules/Slider/SliderDots.js +1 -24
- package/molecules/Slider/SliderDrag.cjs +8 -13
- package/molecules/Slider/SliderDrag.js +1 -19
- package/molecules/Slider/SliderItem.cjs +14 -37
- package/molecules/Slider/SliderItem.js +1 -105
- package/molecules/Slider/SliderProgress.cjs +9 -16
- package/molecules/Slider/SliderProgress.js +1 -23
- package/molecules/Slider/index.cjs +9 -16
- package/molecules/Slider/index.js +1 -18
- package/molecules/Sticky/Sticky.cjs +11 -19
- package/molecules/Sticky/Sticky.d.ts +8 -8
- package/molecules/Sticky/Sticky.js +1 -107
- package/molecules/TableOfContent/TableOfContent.cjs +9 -16
- package/molecules/TableOfContent/TableOfContent.d.ts +1 -1
- package/molecules/TableOfContent/TableOfContent.js +1 -42
- package/molecules/TableOfContent/TableOfContentAnchor.cjs +8 -13
- package/molecules/TableOfContent/TableOfContentAnchor.js +1 -39
- package/molecules/TableOfContent/index.cjs +9 -16
- package/molecules/TableOfContent/index.js +1 -6
- package/molecules/Tabs/Tabs.cjs +54 -82
- package/molecules/Tabs/Tabs.d.ts +5 -4
- package/molecules/Tabs/Tabs.js +1 -126
- package/molecules/index.cjs +13 -18
- package/molecules/index.d.ts +1 -0
- package/molecules/index.js +1 -18
- package/organisms/Frame/Frame.cjs +67 -98
- package/organisms/Frame/Frame.d.ts +3 -3
- package/organisms/Frame/Frame.js +1 -171
- package/organisms/Frame/FrameAnchor.cjs +8 -13
- package/organisms/Frame/FrameAnchor.js +1 -22
- package/organisms/Frame/FrameForm.cjs +8 -13
- package/organisms/Frame/FrameForm.js +1 -22
- package/organisms/Frame/FrameTarget.cjs +31 -73
- package/organisms/Frame/FrameTarget.js +1 -109
- package/organisms/Frame/index.cjs +9 -16
- package/organisms/Frame/index.js +1 -10
- package/organisms/index.cjs +9 -13
- package/organisms/index.js +1 -1
- package/package.json +3 -4
- package/primitives/Draggable/Draggable.cjs +15 -28
- package/primitives/Draggable/Draggable.d.ts +0 -5
- package/primitives/Draggable/Draggable.js +1 -38
- package/primitives/Sentinel/Sentinel.cjs +8 -13
- package/primitives/Sentinel/Sentinel.js +1 -15
- package/primitives/Transition/Transition.cjs +12 -17
- package/primitives/Transition/Transition.d.ts +2 -4
- package/primitives/Transition/Transition.js +1 -45
- package/primitives/index.cjs +9 -16
- package/primitives/index.js +1 -8
|
@@ -3,54 +3,30 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
|
3
3
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
4
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
5
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
6
|
-
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
7
6
|
var __export = (target, all) => {
|
|
8
7
|
for (var name in all)
|
|
9
8
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
9
|
};
|
|
11
|
-
var
|
|
12
|
-
if (
|
|
13
|
-
for (let key of __getOwnPropNames(
|
|
14
|
-
if (!__hasOwnProp.call(
|
|
15
|
-
__defProp(
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
15
|
}
|
|
17
|
-
return
|
|
16
|
+
return to;
|
|
18
17
|
};
|
|
19
|
-
var __toCommonJS =
|
|
20
|
-
return (module2, temp) => {
|
|
21
|
-
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
22
|
-
};
|
|
23
|
-
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
24
19
|
var __publicField = (obj, key, value) => {
|
|
25
20
|
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
26
21
|
return value;
|
|
27
22
|
};
|
|
28
|
-
var __async = (__this, __arguments, generator) => {
|
|
29
|
-
return new Promise((resolve, reject) => {
|
|
30
|
-
var fulfilled = (value) => {
|
|
31
|
-
try {
|
|
32
|
-
step(generator.next(value));
|
|
33
|
-
} catch (e) {
|
|
34
|
-
reject(e);
|
|
35
|
-
}
|
|
36
|
-
};
|
|
37
|
-
var rejected = (value) => {
|
|
38
|
-
try {
|
|
39
|
-
step(generator.throw(value));
|
|
40
|
-
} catch (e) {
|
|
41
|
-
reject(e);
|
|
42
|
-
}
|
|
43
|
-
};
|
|
44
|
-
var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
|
|
45
|
-
step((generator = generator.apply(__this, __arguments)).next());
|
|
46
|
-
});
|
|
47
|
-
};
|
|
48
23
|
|
|
49
24
|
// packages/ui/molecules/Modal/Modal.js
|
|
50
25
|
var Modal_exports = {};
|
|
51
26
|
__export(Modal_exports, {
|
|
52
27
|
default: () => Modal
|
|
53
28
|
});
|
|
29
|
+
module.exports = __toCommonJS(Modal_exports);
|
|
54
30
|
var import_js_toolkit = require("@studiometa/js-toolkit");
|
|
55
31
|
var import_utils = require("@studiometa/js-toolkit/utils");
|
|
56
32
|
var { trap, untrap, saveActiveElement } = (0, import_utils.focusTrap)();
|
|
@@ -108,47 +84,43 @@ var Modal = class extends import_js_toolkit.Base {
|
|
|
108
84
|
this.close();
|
|
109
85
|
}
|
|
110
86
|
}
|
|
111
|
-
open() {
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
87
|
+
async open() {
|
|
88
|
+
if (this.isOpen) {
|
|
89
|
+
return Promise.resolve();
|
|
90
|
+
}
|
|
91
|
+
this.$refs.modal.setAttribute("aria-hidden", "false");
|
|
92
|
+
document.documentElement.style.overflow = "hidden";
|
|
93
|
+
this.isOpen = true;
|
|
94
|
+
this.$emit("open");
|
|
95
|
+
const refs = this.$refs;
|
|
96
|
+
return Promise.all(Object.entries(this.$options.styles).map(([refName, { open, active, closed } = { open: "", active: "", closed: "" }]) => (0, import_utils.transition)(refs[refName], {
|
|
97
|
+
from: closed,
|
|
98
|
+
active,
|
|
99
|
+
to: open
|
|
100
|
+
}, "keep"))).then(() => {
|
|
101
|
+
if (this.$options.autofocus && this.$refs.modal.querySelector(this.$options.autofocus)) {
|
|
102
|
+
saveActiveElement();
|
|
103
|
+
const autofocusElement = this.$refs.modal.querySelector(this.$options.autofocus);
|
|
104
|
+
autofocusElement.focus();
|
|
115
105
|
}
|
|
116
|
-
|
|
117
|
-
document.documentElement.style.overflow = "hidden";
|
|
118
|
-
this.isOpen = true;
|
|
119
|
-
this.$emit("open");
|
|
120
|
-
const refs = this.$refs;
|
|
121
|
-
return Promise.all(Object.entries(this.$options.styles).map(([refName, { open, active, closed } = { open: "", active: "", closed: "" }]) => (0, import_utils.transition)(refs[refName], {
|
|
122
|
-
from: closed,
|
|
123
|
-
active,
|
|
124
|
-
to: open
|
|
125
|
-
}, "keep"))).then(() => {
|
|
126
|
-
if (this.$options.autofocus && this.$refs.modal.querySelector(this.$options.autofocus)) {
|
|
127
|
-
saveActiveElement();
|
|
128
|
-
const autofocusElement = this.$refs.modal.querySelector(this.$options.autofocus);
|
|
129
|
-
autofocusElement.focus();
|
|
130
|
-
}
|
|
131
|
-
return Promise.resolve();
|
|
132
|
-
});
|
|
106
|
+
return Promise.resolve();
|
|
133
107
|
});
|
|
134
108
|
}
|
|
135
|
-
close() {
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
}, "keep"))).then(() => Promise.resolve());
|
|
151
|
-
});
|
|
109
|
+
async close() {
|
|
110
|
+
if (!this.isOpen) {
|
|
111
|
+
return Promise.resolve();
|
|
112
|
+
}
|
|
113
|
+
this.$refs.modal.setAttribute("aria-hidden", "true");
|
|
114
|
+
document.documentElement.style.overflow = "";
|
|
115
|
+
this.isOpen = false;
|
|
116
|
+
untrap();
|
|
117
|
+
this.$emit("close");
|
|
118
|
+
const refs = this.$refs;
|
|
119
|
+
return Promise.all(Object.entries(this.$options.styles).map(([refName, { open, active, closed } = { open: "", active: "", closed: "" }]) => (0, import_utils.transition)(refs[refName], {
|
|
120
|
+
from: open,
|
|
121
|
+
active,
|
|
122
|
+
to: closed
|
|
123
|
+
}, "keep"))).then(() => Promise.resolve());
|
|
152
124
|
}
|
|
153
125
|
};
|
|
154
126
|
__publicField(Modal, "config", {
|
|
@@ -172,5 +144,4 @@ __publicField(Modal, "config", {
|
|
|
172
144
|
}
|
|
173
145
|
}
|
|
174
146
|
});
|
|
175
|
-
module.exports = __toCommonJS(Modal_exports);
|
|
176
147
|
if (module.exports.default) module.exports = module.exports.default;
|
|
@@ -79,7 +79,7 @@ export default class Modal extends Base {
|
|
|
79
79
|
*
|
|
80
80
|
* @this {ModalInterface}
|
|
81
81
|
*/
|
|
82
|
-
mounted(): void;
|
|
82
|
+
mounted(this: ModalInterface): void;
|
|
83
83
|
isOpen: boolean;
|
|
84
84
|
__refsBackup: import("@studiometa/js-toolkit/Base/managers/RefsManager").default & ModalRefs;
|
|
85
85
|
__refModalPlaceholder: Comment;
|
|
@@ -90,7 +90,7 @@ export default class Modal extends Base {
|
|
|
90
90
|
* @this {ModalInterface}
|
|
91
91
|
* @return {Modal} The Modal instance.
|
|
92
92
|
*/
|
|
93
|
-
destroyed(): Modal;
|
|
93
|
+
destroyed(this: ModalInterface): Modal;
|
|
94
94
|
/**
|
|
95
95
|
* Close the modal on `ESC` and trap the tabulation.
|
|
96
96
|
*
|
|
@@ -101,7 +101,7 @@ export default class Modal extends Base {
|
|
|
101
101
|
* @param {Boolean} options.isDown Is it a keydown event?
|
|
102
102
|
* @param {Boolean} options.ESC Is it the ESC key?
|
|
103
103
|
*/
|
|
104
|
-
keyed({ event, isUp, isDown, ESC }: {
|
|
104
|
+
keyed(this: ModalInterface, { event, isUp, isDown, ESC }: {
|
|
105
105
|
event: KeyboardEvent;
|
|
106
106
|
isUp: boolean;
|
|
107
107
|
isDown: boolean;
|
|
@@ -113,14 +113,14 @@ export default class Modal extends Base {
|
|
|
113
113
|
* @this {ModalInterface}
|
|
114
114
|
* @return {Promise<void>} The Modal instance.
|
|
115
115
|
*/
|
|
116
|
-
open(): Promise<void>;
|
|
116
|
+
open(this: ModalInterface): Promise<void>;
|
|
117
117
|
/**
|
|
118
118
|
* Close the modal.
|
|
119
119
|
*
|
|
120
120
|
* @this {ModalInterface}
|
|
121
121
|
* @return {Promise<void>} The Modal instance.
|
|
122
122
|
*/
|
|
123
|
-
close(): Promise<void>;
|
|
123
|
+
close(this: ModalInterface): Promise<void>;
|
|
124
124
|
}
|
|
125
125
|
export type ModalRefs = {
|
|
126
126
|
close: HTMLElement;
|
package/molecules/Modal/Modal.js
CHANGED
|
@@ -1,150 +1 @@
|
|
|
1
|
-
|
|
2
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
3
|
-
var __publicField = (obj, key, value) => {
|
|
4
|
-
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
5
|
-
return value;
|
|
6
|
-
};
|
|
7
|
-
var __async = (__this, __arguments, generator) => {
|
|
8
|
-
return new Promise((resolve, reject) => {
|
|
9
|
-
var fulfilled = (value) => {
|
|
10
|
-
try {
|
|
11
|
-
step(generator.next(value));
|
|
12
|
-
} catch (e) {
|
|
13
|
-
reject(e);
|
|
14
|
-
}
|
|
15
|
-
};
|
|
16
|
-
var rejected = (value) => {
|
|
17
|
-
try {
|
|
18
|
-
step(generator.throw(value));
|
|
19
|
-
} catch (e) {
|
|
20
|
-
reject(e);
|
|
21
|
-
}
|
|
22
|
-
};
|
|
23
|
-
var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
|
|
24
|
-
step((generator = generator.apply(__this, __arguments)).next());
|
|
25
|
-
});
|
|
26
|
-
};
|
|
27
|
-
import { Base } from "@studiometa/js-toolkit";
|
|
28
|
-
import { transition, focusTrap } from "@studiometa/js-toolkit/utils";
|
|
29
|
-
const { trap, untrap, saveActiveElement } = focusTrap();
|
|
30
|
-
class Modal extends Base {
|
|
31
|
-
get onOpenClick() {
|
|
32
|
-
return this.open;
|
|
33
|
-
}
|
|
34
|
-
get onCloseClick() {
|
|
35
|
-
return this.close;
|
|
36
|
-
}
|
|
37
|
-
get onOverlayClick() {
|
|
38
|
-
return this.close;
|
|
39
|
-
}
|
|
40
|
-
mounted() {
|
|
41
|
-
this.isOpen = false;
|
|
42
|
-
this.close();
|
|
43
|
-
if (this.$options.move) {
|
|
44
|
-
const target = document.querySelector(this.$options.move) || document.body;
|
|
45
|
-
this.__refsBackup = this.$refs;
|
|
46
|
-
this.__refModalPlaceholder = document.createComment("");
|
|
47
|
-
this.__refModalParentBackup = this.$refs.modal.parentElement || this.$el;
|
|
48
|
-
this.__refModalParentBackup.insertBefore(this.__refModalPlaceholder, this.$refs.modal);
|
|
49
|
-
target.appendChild(this.$refs.modal);
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
get $refs() {
|
|
53
|
-
const $refs = super.$refs;
|
|
54
|
-
if (this.$options.move && this.__refsBackup) {
|
|
55
|
-
Object.entries(this.__refsBackup).forEach(([key, ref]) => {
|
|
56
|
-
if (!$refs[key]) {
|
|
57
|
-
$refs[key] = ref;
|
|
58
|
-
}
|
|
59
|
-
});
|
|
60
|
-
}
|
|
61
|
-
return $refs;
|
|
62
|
-
}
|
|
63
|
-
destroyed() {
|
|
64
|
-
this.close();
|
|
65
|
-
if (this.$options.move && this.__refModalParentBackup) {
|
|
66
|
-
this.__refModalParentBackup.insertBefore(this.$refs.modal, this.__refModalPlaceholder);
|
|
67
|
-
this.__refModalPlaceholder.remove();
|
|
68
|
-
delete this.__refModalPlaceholder;
|
|
69
|
-
delete this.__refModalParentBackup;
|
|
70
|
-
}
|
|
71
|
-
return this;
|
|
72
|
-
}
|
|
73
|
-
keyed({ event, isUp, isDown, ESC }) {
|
|
74
|
-
if (!this.isOpen) {
|
|
75
|
-
return;
|
|
76
|
-
}
|
|
77
|
-
if (isDown) {
|
|
78
|
-
trap(this.$refs.modal, event);
|
|
79
|
-
}
|
|
80
|
-
if (ESC && isUp) {
|
|
81
|
-
this.close();
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
open() {
|
|
85
|
-
return __async(this, null, function* () {
|
|
86
|
-
if (this.isOpen) {
|
|
87
|
-
return Promise.resolve();
|
|
88
|
-
}
|
|
89
|
-
this.$refs.modal.setAttribute("aria-hidden", "false");
|
|
90
|
-
document.documentElement.style.overflow = "hidden";
|
|
91
|
-
this.isOpen = true;
|
|
92
|
-
this.$emit("open");
|
|
93
|
-
const refs = this.$refs;
|
|
94
|
-
return Promise.all(Object.entries(this.$options.styles).map(([refName, { open, active, closed } = { open: "", active: "", closed: "" }]) => transition(refs[refName], {
|
|
95
|
-
from: closed,
|
|
96
|
-
active,
|
|
97
|
-
to: open
|
|
98
|
-
}, "keep"))).then(() => {
|
|
99
|
-
if (this.$options.autofocus && this.$refs.modal.querySelector(this.$options.autofocus)) {
|
|
100
|
-
saveActiveElement();
|
|
101
|
-
const autofocusElement = this.$refs.modal.querySelector(this.$options.autofocus);
|
|
102
|
-
autofocusElement.focus();
|
|
103
|
-
}
|
|
104
|
-
return Promise.resolve();
|
|
105
|
-
});
|
|
106
|
-
});
|
|
107
|
-
}
|
|
108
|
-
close() {
|
|
109
|
-
return __async(this, null, function* () {
|
|
110
|
-
if (!this.isOpen) {
|
|
111
|
-
return Promise.resolve();
|
|
112
|
-
}
|
|
113
|
-
this.$refs.modal.setAttribute("aria-hidden", "true");
|
|
114
|
-
document.documentElement.style.overflow = "";
|
|
115
|
-
this.isOpen = false;
|
|
116
|
-
untrap();
|
|
117
|
-
this.$emit("close");
|
|
118
|
-
const refs = this.$refs;
|
|
119
|
-
return Promise.all(Object.entries(this.$options.styles).map(([refName, { open, active, closed } = { open: "", active: "", closed: "" }]) => transition(refs[refName], {
|
|
120
|
-
from: open,
|
|
121
|
-
active,
|
|
122
|
-
to: closed
|
|
123
|
-
}, "keep"))).then(() => Promise.resolve());
|
|
124
|
-
});
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
__publicField(Modal, "config", {
|
|
128
|
-
name: "Modal",
|
|
129
|
-
refs: ["close", "container", "content", "modal", "open", "overlay"],
|
|
130
|
-
emits: ["open", "close"],
|
|
131
|
-
options: {
|
|
132
|
-
move: String,
|
|
133
|
-
autofocus: { type: String, default: "[autofocus]" },
|
|
134
|
-
styles: {
|
|
135
|
-
type: Object,
|
|
136
|
-
default: () => ({
|
|
137
|
-
modal: {
|
|
138
|
-
closed: {
|
|
139
|
-
opacity: "0",
|
|
140
|
-
pointerEvents: "none",
|
|
141
|
-
visibility: "hidden"
|
|
142
|
-
}
|
|
143
|
-
}
|
|
144
|
-
})
|
|
145
|
-
}
|
|
146
|
-
}
|
|
147
|
-
});
|
|
148
|
-
export {
|
|
149
|
-
Modal as default
|
|
150
|
-
};
|
|
1
|
+
import{Base as n}from"@studiometa/js-toolkit";import{transition as r,focusTrap as l}from"@studiometa/js-toolkit/utils";const{trap:a,untrap:c,saveActiveElement:f}=l();class h extends n{static config={name:"Modal",refs:["close","container","content","modal","open","overlay"],emits:["open","close"],options:{move:String,autofocus:{type:String,default:"[autofocus]"},styles:{type:Object,default:()=>({modal:{closed:{opacity:"0",pointerEvents:"none",visibility:"hidden"}}})}}};get onOpenClick(){return this.open}get onCloseClick(){return this.close}get onOverlayClick(){return this.close}mounted(){if(this.isOpen=!1,this.close(),this.$options.move){const e=document.querySelector(this.$options.move)||document.body;this.__refsBackup=this.$refs,this.__refModalPlaceholder=document.createComment(""),this.__refModalParentBackup=this.$refs.modal.parentElement||this.$el,this.__refModalParentBackup.insertBefore(this.__refModalPlaceholder,this.$refs.modal),e.appendChild(this.$refs.modal)}}get $refs(){const e=super.$refs;return this.$options.move&&this.__refsBackup&&Object.entries(this.__refsBackup).forEach(([t,s])=>{e[t]||(e[t]=s)}),e}destroyed(){return this.close(),this.$options.move&&this.__refModalParentBackup&&(this.__refModalParentBackup.insertBefore(this.$refs.modal,this.__refModalPlaceholder),this.__refModalPlaceholder.remove(),delete this.__refModalPlaceholder,delete this.__refModalParentBackup),this}keyed({event:e,isUp:t,isDown:s,ESC:o}){!this.isOpen||(s&&a(this.$refs.modal,e),o&&t&&this.close())}async open(){if(this.isOpen)return Promise.resolve();this.$refs.modal.setAttribute("aria-hidden","false"),document.documentElement.style.overflow="hidden",this.isOpen=!0,this.$emit("open");const e=this.$refs;return Promise.all(Object.entries(this.$options.styles).map(([t,{open:s,active:o,closed:i}={open:"",active:"",closed:""}])=>r(e[t],{from:i,active:o,to:s},"keep"))).then(()=>(this.$options.autofocus&&this.$refs.modal.querySelector(this.$options.autofocus)&&(f(),this.$refs.modal.querySelector(this.$options.autofocus).focus()),Promise.resolve()))}async close(){if(!this.isOpen)return Promise.resolve();this.$refs.modal.setAttribute("aria-hidden","true"),document.documentElement.style.overflow="",this.isOpen=!1,c(),this.$emit("close");const e=this.$refs;return Promise.all(Object.entries(this.$options.styles).map(([t,{open:s,active:o,closed:i}={open:"",active:"",closed:""}])=>r(e[t],{from:s,active:o,to:i},"keep"))).then(()=>Promise.resolve())}}export{h as default};
|
|
@@ -5,70 +5,41 @@ var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
|
5
5
|
var __getProtoOf = Object.getPrototypeOf;
|
|
6
6
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
7
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
-
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
9
8
|
var __export = (target, all) => {
|
|
10
9
|
for (var name in all)
|
|
11
10
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
12
11
|
};
|
|
13
|
-
var
|
|
14
|
-
if (
|
|
15
|
-
for (let key of __getOwnPropNames(
|
|
16
|
-
if (!__hasOwnProp.call(
|
|
17
|
-
__defProp(
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
18
17
|
}
|
|
19
|
-
return
|
|
18
|
+
return to;
|
|
20
19
|
};
|
|
21
|
-
var __toESM = (
|
|
22
|
-
|
|
23
|
-
};
|
|
24
|
-
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
25
|
-
return (module2, temp) => {
|
|
26
|
-
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
27
|
-
};
|
|
28
|
-
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
|
|
21
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
22
|
var __publicField = (obj, key, value) => {
|
|
30
23
|
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
31
24
|
return value;
|
|
32
25
|
};
|
|
33
|
-
var __async = (__this, __arguments, generator) => {
|
|
34
|
-
return new Promise((resolve, reject) => {
|
|
35
|
-
var fulfilled = (value) => {
|
|
36
|
-
try {
|
|
37
|
-
step(generator.next(value));
|
|
38
|
-
} catch (e) {
|
|
39
|
-
reject(e);
|
|
40
|
-
}
|
|
41
|
-
};
|
|
42
|
-
var rejected = (value) => {
|
|
43
|
-
try {
|
|
44
|
-
step(generator.throw(value));
|
|
45
|
-
} catch (e) {
|
|
46
|
-
reject(e);
|
|
47
|
-
}
|
|
48
|
-
};
|
|
49
|
-
var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
|
|
50
|
-
step((generator = generator.apply(__this, __arguments)).next());
|
|
51
|
-
});
|
|
52
|
-
};
|
|
53
26
|
|
|
54
27
|
// packages/ui/molecules/Modal/ModalWithTransition.js
|
|
55
28
|
var ModalWithTransition_exports = {};
|
|
56
29
|
__export(ModalWithTransition_exports, {
|
|
57
30
|
default: () => ModalWithTransition
|
|
58
31
|
});
|
|
32
|
+
module.exports = __toCommonJS(ModalWithTransition_exports);
|
|
59
33
|
var import_Modal = __toESM(require("./Modal.cjs"), 1);
|
|
60
34
|
var ModalWithTransition = class extends import_Modal.default {
|
|
61
35
|
open() {
|
|
62
36
|
this.$refs.modal.style.visibility = "";
|
|
63
37
|
return super.open();
|
|
64
38
|
}
|
|
65
|
-
close() {
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
this.$refs.modal.style.visibility = "hidden";
|
|
70
|
-
return Promise.resolve();
|
|
71
|
-
});
|
|
39
|
+
async close() {
|
|
40
|
+
await super.close();
|
|
41
|
+
this.$refs.modal.style.visibility = "hidden";
|
|
42
|
+
return Promise.resolve();
|
|
72
43
|
}
|
|
73
44
|
};
|
|
74
45
|
__publicField(ModalWithTransition, "config", {
|
|
@@ -96,5 +67,4 @@ __publicField(ModalWithTransition, "config", {
|
|
|
96
67
|
}
|
|
97
68
|
}
|
|
98
69
|
});
|
|
99
|
-
module.exports = __toCommonJS(ModalWithTransition_exports);
|
|
100
70
|
if (module.exports.default) module.exports = module.exports.default;
|
|
@@ -1,69 +1 @@
|
|
|
1
|
-
|
|
2
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
3
|
-
var __publicField = (obj, key, value) => {
|
|
4
|
-
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
5
|
-
return value;
|
|
6
|
-
};
|
|
7
|
-
var __async = (__this, __arguments, generator) => {
|
|
8
|
-
return new Promise((resolve, reject) => {
|
|
9
|
-
var fulfilled = (value) => {
|
|
10
|
-
try {
|
|
11
|
-
step(generator.next(value));
|
|
12
|
-
} catch (e) {
|
|
13
|
-
reject(e);
|
|
14
|
-
}
|
|
15
|
-
};
|
|
16
|
-
var rejected = (value) => {
|
|
17
|
-
try {
|
|
18
|
-
step(generator.throw(value));
|
|
19
|
-
} catch (e) {
|
|
20
|
-
reject(e);
|
|
21
|
-
}
|
|
22
|
-
};
|
|
23
|
-
var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
|
|
24
|
-
step((generator = generator.apply(__this, __arguments)).next());
|
|
25
|
-
});
|
|
26
|
-
};
|
|
27
|
-
import Modal from "./Modal.js";
|
|
28
|
-
class ModalWithTransition extends Modal {
|
|
29
|
-
open() {
|
|
30
|
-
this.$refs.modal.style.visibility = "";
|
|
31
|
-
return super.open();
|
|
32
|
-
}
|
|
33
|
-
close() {
|
|
34
|
-
var __superGet = (key) => super[key];
|
|
35
|
-
return __async(this, null, function* () {
|
|
36
|
-
yield __superGet("close").call(this);
|
|
37
|
-
this.$refs.modal.style.visibility = "hidden";
|
|
38
|
-
return Promise.resolve();
|
|
39
|
-
});
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
__publicField(ModalWithTransition, "config", {
|
|
43
|
-
name: "ModalWithTransition",
|
|
44
|
-
options: {
|
|
45
|
-
styles: {
|
|
46
|
-
type: Object,
|
|
47
|
-
default: () => ({
|
|
48
|
-
modal: {
|
|
49
|
-
closed: {
|
|
50
|
-
opacity: "0",
|
|
51
|
-
pointerEvents: "none"
|
|
52
|
-
},
|
|
53
|
-
active: "transition duration-500 ease-out-expo"
|
|
54
|
-
},
|
|
55
|
-
overlay: {
|
|
56
|
-
closed: "opacity-0",
|
|
57
|
-
active: "transition duration-500 ease-out-expo"
|
|
58
|
-
},
|
|
59
|
-
container: {
|
|
60
|
-
closed: "transform scale-95 opacity-0",
|
|
61
|
-
active: "transition duration-500 ease-out-expo"
|
|
62
|
-
}
|
|
63
|
-
})
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
});
|
|
67
|
-
export {
|
|
68
|
-
ModalWithTransition as default
|
|
69
|
-
};
|
|
1
|
+
import e from"./Modal.js";class t extends e{static config={name:"ModalWithTransition",options:{styles:{type:Object,default:()=>({modal:{closed:{opacity:"0",pointerEvents:"none"},active:"transition duration-500 ease-out-expo"},overlay:{closed:"opacity-0",active:"transition duration-500 ease-out-expo"},container:{closed:"transform scale-95 opacity-0",active:"transition duration-500 ease-out-expo"}})}}};open(){return this.$refs.modal.style.visibility="",super.open()}async close(){return await super.close(),this.$refs.modal.style.visibility="hidden",Promise.resolve()}}export{t as default};
|
|
@@ -5,63 +5,36 @@ var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
|
5
5
|
var __getProtoOf = Object.getPrototypeOf;
|
|
6
6
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
7
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
-
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
9
8
|
var __export = (target, all) => {
|
|
10
9
|
for (var name in all)
|
|
11
10
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
12
11
|
};
|
|
13
|
-
var
|
|
14
|
-
if (
|
|
15
|
-
for (let key of __getOwnPropNames(
|
|
16
|
-
if (!__hasOwnProp.call(
|
|
17
|
-
__defProp(
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
18
17
|
}
|
|
19
|
-
return
|
|
18
|
+
return to;
|
|
20
19
|
};
|
|
21
|
-
var __toESM = (
|
|
22
|
-
|
|
23
|
-
};
|
|
24
|
-
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
25
|
-
return (module2, temp) => {
|
|
26
|
-
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
27
|
-
};
|
|
28
|
-
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
|
|
21
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
22
|
var __publicField = (obj, key, value) => {
|
|
30
23
|
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
31
24
|
return value;
|
|
32
25
|
};
|
|
33
|
-
var __async = (__this, __arguments, generator) => {
|
|
34
|
-
return new Promise((resolve, reject) => {
|
|
35
|
-
var fulfilled = (value) => {
|
|
36
|
-
try {
|
|
37
|
-
step(generator.next(value));
|
|
38
|
-
} catch (e) {
|
|
39
|
-
reject(e);
|
|
40
|
-
}
|
|
41
|
-
};
|
|
42
|
-
var rejected = (value) => {
|
|
43
|
-
try {
|
|
44
|
-
step(generator.throw(value));
|
|
45
|
-
} catch (e) {
|
|
46
|
-
reject(e);
|
|
47
|
-
}
|
|
48
|
-
};
|
|
49
|
-
var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
|
|
50
|
-
step((generator = generator.apply(__this, __arguments)).next());
|
|
51
|
-
});
|
|
52
|
-
};
|
|
53
26
|
|
|
54
27
|
// packages/ui/molecules/Panel/Panel.js
|
|
55
28
|
var Panel_exports = {};
|
|
56
29
|
__export(Panel_exports, {
|
|
57
30
|
default: () => Panel
|
|
58
31
|
});
|
|
32
|
+
module.exports = __toCommonJS(Panel_exports);
|
|
59
33
|
var import_utils = require("@studiometa/js-toolkit/utils");
|
|
60
34
|
var import_Modal = __toESM(require("../Modal/Modal.cjs"), 1);
|
|
61
35
|
var _Panel = class extends import_Modal.default {
|
|
62
36
|
get translateClass() {
|
|
63
|
-
|
|
64
|
-
return (_a = _Panel.translateClasses[this.$options.position]) != null ? _a : _Panel.translateClasses[_Panel.config.options.position.default];
|
|
37
|
+
return _Panel.translateClasses[this.$options.position] ?? _Panel.translateClasses[_Panel.config.options.position.default];
|
|
65
38
|
}
|
|
66
39
|
get containerOffset() {
|
|
67
40
|
const { offsetTop, offsetLeft, offsetWidth, offsetHeight } = this.$refs.container;
|
|
@@ -81,51 +54,45 @@ var _Panel = class extends import_Modal.default {
|
|
|
81
54
|
};
|
|
82
55
|
return (0, import_utils.matrix)(store[this.$options.position]);
|
|
83
56
|
}
|
|
84
|
-
open() {
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
57
|
+
async open() {
|
|
58
|
+
if (this.isOpen) {
|
|
59
|
+
return Promise.resolve();
|
|
60
|
+
}
|
|
61
|
+
this.$refs.modal.classList.remove("pointer-events-none");
|
|
62
|
+
(0, import_utils.transition)(this.$refs.container, {
|
|
63
|
+
from: {
|
|
64
|
+
transform: this.containerOffset
|
|
65
|
+
},
|
|
66
|
+
to: {
|
|
67
|
+
transform: "none"
|
|
89
68
|
}
|
|
90
|
-
|
|
69
|
+
}, "keep");
|
|
70
|
+
(0, import_utils.transition)(this.$refs.overlay, {
|
|
71
|
+
from: "opacity-0"
|
|
72
|
+
});
|
|
73
|
+
return super.open();
|
|
74
|
+
}
|
|
75
|
+
async close() {
|
|
76
|
+
if (!this.isOpen || this.isClosing) {
|
|
77
|
+
return Promise.resolve();
|
|
78
|
+
}
|
|
79
|
+
this.isClosing = true;
|
|
80
|
+
this.$refs.modal.classList.add("pointer-events-none");
|
|
81
|
+
await Promise.all([
|
|
91
82
|
(0, import_utils.transition)(this.$refs.container, {
|
|
92
83
|
from: {
|
|
93
|
-
transform:
|
|
84
|
+
transform: "none"
|
|
94
85
|
},
|
|
95
86
|
to: {
|
|
96
|
-
transform:
|
|
87
|
+
transform: this.containerOffset
|
|
97
88
|
}
|
|
98
|
-
}, "keep")
|
|
89
|
+
}, "keep"),
|
|
99
90
|
(0, import_utils.transition)(this.$refs.overlay, {
|
|
100
|
-
|
|
101
|
-
})
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
close() {
|
|
106
|
-
var __superGet = (key) => super[key];
|
|
107
|
-
return __async(this, null, function* () {
|
|
108
|
-
if (!this.isOpen || this.isClosing) {
|
|
109
|
-
return Promise.resolve();
|
|
110
|
-
}
|
|
111
|
-
this.isClosing = true;
|
|
112
|
-
this.$refs.modal.classList.add("pointer-events-none");
|
|
113
|
-
yield Promise.all([
|
|
114
|
-
(0, import_utils.transition)(this.$refs.container, {
|
|
115
|
-
from: {
|
|
116
|
-
transform: "none"
|
|
117
|
-
},
|
|
118
|
-
to: {
|
|
119
|
-
transform: this.containerOffset
|
|
120
|
-
}
|
|
121
|
-
}, "keep"),
|
|
122
|
-
(0, import_utils.transition)(this.$refs.overlay, {
|
|
123
|
-
to: "opacity-0"
|
|
124
|
-
}, "keep")
|
|
125
|
-
]);
|
|
126
|
-
this.isClosing = false;
|
|
127
|
-
return __superGet("close").call(this);
|
|
128
|
-
});
|
|
91
|
+
to: "opacity-0"
|
|
92
|
+
}, "keep")
|
|
93
|
+
]);
|
|
94
|
+
this.isClosing = false;
|
|
95
|
+
return super.close();
|
|
129
96
|
}
|
|
130
97
|
};
|
|
131
98
|
var Panel = _Panel;
|
|
@@ -144,5 +111,4 @@ __publicField(Panel, "translateClasses", {
|
|
|
144
111
|
bottom: "translate-y-full",
|
|
145
112
|
left: "-translate-x-full"
|
|
146
113
|
});
|
|
147
|
-
module.exports = __toCommonJS(Panel_exports);
|
|
148
114
|
if (module.exports.default) module.exports = module.exports.default;
|