@studiometa/js-toolkit 2.2.1 → 2.3.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/Base/index.cjs +60 -69
- package/Base/index.d.ts +0 -8
- package/Base/index.js +67 -82
- package/Base/managers/AbstractManager.cjs +5 -10
- package/Base/managers/AbstractManager.js +5 -11
- package/Base/managers/ChildrenManager.cjs +2 -11
- package/Base/managers/ChildrenManager.js +2 -12
- package/Base/managers/EventsManager.cjs +61 -67
- package/Base/managers/EventsManager.js +61 -68
- package/Base/managers/OptionsManager.cjs +26 -27
- package/Base/managers/OptionsManager.js +26 -28
- package/Base/managers/RefsManager.cjs +9 -7
- package/Base/managers/RefsManager.js +9 -7
- package/Base/managers/ResponsiveOptionsManager.cjs +4 -1
- package/Base/managers/ResponsiveOptionsManager.js +4 -1
- package/Base/managers/ServicesManager.cjs +10 -16
- package/Base/managers/ServicesManager.js +10 -17
- package/Base/utils.cjs +22 -4
- package/Base/utils.d.ts +25 -8
- package/Base/utils.js +22 -4
- package/decorators/withBreakpointManager.cjs +15 -5
- package/decorators/withBreakpointManager.js +15 -5
- package/decorators/withBreakpointObserver.cjs +19 -18
- package/decorators/withBreakpointObserver.js +19 -19
- package/decorators/withDrag.cjs +6 -11
- package/decorators/withDrag.js +6 -12
- package/decorators/withExtraConfig.cjs +3 -8
- package/decorators/withExtraConfig.js +3 -9
- package/decorators/withFreezedOptions.cjs +1 -9
- package/decorators/withFreezedOptions.js +1 -10
- package/decorators/withIntersectionObserver.cjs +11 -16
- package/decorators/withIntersectionObserver.js +11 -17
- package/decorators/withMountWhenInView.cjs +12 -17
- package/decorators/withMountWhenInView.js +12 -18
- package/decorators/withScrolledInView.cjs +30 -35
- package/decorators/withScrolledInView.js +30 -36
- package/decorators/withVue2.cjs +20 -18
- package/decorators/withVue2.js +20 -19
- package/helpers/getInstanceFromElement.cjs +1 -2
- package/helpers/getInstanceFromElement.js +1 -2
- package/helpers/importOnInteraction.cjs +3 -2
- package/helpers/importOnInteraction.js +3 -2
- package/helpers/importWhenIdle.cjs +2 -3
- package/helpers/importWhenIdle.js +2 -3
- package/helpers/importWhenVisible.cjs +3 -2
- package/helpers/importWhenVisible.js +3 -2
- package/helpers/utils.cjs +3 -2
- package/helpers/utils.js +3 -2
- package/package.json +4 -1
- package/services/drag.cjs +126 -148
- package/services/drag.d.ts +10 -10
- package/services/drag.js +125 -148
- package/services/index.cjs +3 -1
- package/services/index.d.ts +1 -0
- package/services/index.js +3 -1
- package/services/key.cjs +48 -63
- package/services/key.d.ts +0 -8
- package/services/key.js +47 -63
- package/services/load.cjs +24 -40
- package/services/load.d.ts +0 -8
- package/services/load.js +23 -37
- package/services/pointer.cjs +72 -103
- package/services/pointer.d.ts +1 -9
- package/services/pointer.js +71 -100
- package/services/raf.cjs +38 -58
- package/services/raf.d.ts +0 -8
- package/services/raf.js +37 -55
- package/services/resize.cjs +59 -68
- package/services/resize.d.ts +0 -7
- package/services/resize.js +58 -68
- package/services/scroll.cjs +49 -71
- package/services/scroll.js +48 -71
- package/services/service.cjs +68 -0
- package/services/service.d.ts +18 -0
- package/services/service.js +46 -0
- package/utils/css/animate.cjs +33 -102
- package/utils/css/animate.d.ts +4 -13
- package/utils/css/animate.js +31 -100
- package/utils/css/classes.cjs +2 -1
- package/utils/css/classes.js +2 -1
- package/utils/css/matrix.cjs +1 -2
- package/utils/css/matrix.js +1 -2
- package/utils/css/styles.cjs +2 -5
- package/utils/css/styles.js +1 -1
- package/utils/css/transform.cjs +14 -18
- package/utils/css/transform.js +2 -3
- package/utils/css/transition.cjs +7 -10
- package/utils/css/transition.js +7 -11
- package/utils/focusTrap.cjs +2 -1
- package/utils/focusTrap.js +2 -1
- package/utils/{isFunction.cjs → has.cjs} +7 -7
- package/utils/has.d.ts +6 -0
- package/utils/has.js +6 -0
- package/utils/history.cjs +5 -7
- package/utils/history.js +4 -3
- package/utils/index.cjs +6 -5
- package/utils/index.d.ts +4 -2
- package/utils/index.js +6 -5
- package/utils/{object/isObject.cjs → is.cjs} +20 -8
- package/utils/is.d.ts +8 -0
- package/utils/is.js +18 -0
- package/utils/math/inertiaFinalValue.cjs +5 -3
- package/utils/math/inertiaFinalValue.js +2 -3
- package/utils/nextFrame.cjs +5 -3
- package/utils/nextFrame.js +5 -3
- package/utils/nextMicrotask.cjs +2 -1
- package/utils/nextMicrotask.js +2 -1
- package/utils/nextTick.cjs +2 -1
- package/utils/nextTick.js +2 -1
- package/utils/{isDefined.cjs → noop.cjs} +10 -7
- package/utils/noop.d.ts +12 -0
- package/utils/noop.js +9 -0
- package/utils/object/autoBind.cjs +3 -2
- package/utils/object/autoBind.js +3 -2
- package/utils/object/getAllProperties.cjs +2 -1
- package/utils/object/getAllProperties.js +2 -1
- package/utils/object/index.cjs +1 -3
- package/utils/object/index.d.ts +0 -1
- package/utils/object/index.js +1 -3
- package/utils/tween.cjs +113 -0
- package/utils/tween.d.ts +25 -0
- package/utils/tween.js +88 -0
- package/services/Service.cjs +0 -76
- package/services/Service.d.ts +0 -76
- package/services/Service.js +0 -55
- package/utils/isDefined.d.ts +0 -7
- package/utils/isDefined.js +0 -6
- package/utils/isFunction.d.ts +0 -7
- package/utils/isFunction.js +0 -6
- package/utils/object/isObject.d.ts +0 -7
- package/utils/object/isObject.js +0 -6
|
@@ -27,12 +27,13 @@ __export(RefsManager_exports, {
|
|
|
27
27
|
});
|
|
28
28
|
module.exports = __toCommonJS(RefsManager_exports);
|
|
29
29
|
var import_AbstractManager = __toESM(require("./AbstractManager.cjs"), 1);
|
|
30
|
+
var import_utils = require("../../utils/index.cjs");
|
|
30
31
|
function normalizeRefName(name) {
|
|
31
32
|
return name.endsWith("[]") ? name.replace(/\[\]$/, "") : name;
|
|
32
33
|
}
|
|
33
34
|
function __filterRefsBelongingToInstance(that, ref) {
|
|
34
35
|
let ancestor = ref.parentElement;
|
|
35
|
-
while (ancestor && ancestor.dataset.component
|
|
36
|
+
while (ancestor && !(0, import_utils.isDefined)(ancestor.dataset.component)) {
|
|
36
37
|
ancestor = ancestor.parentElement;
|
|
37
38
|
}
|
|
38
39
|
return ancestor === null || ancestor === that.__element;
|
|
@@ -41,11 +42,13 @@ function __register(that, refName) {
|
|
|
41
42
|
const isMultiple = refName.endsWith("[]");
|
|
42
43
|
const propName = normalizeRefName(refName);
|
|
43
44
|
const refs = Array.from(that.__element.querySelectorAll(`[data-ref="${refName}"]`)).filter((ref) => __filterRefsBelongingToInstance(that, ref));
|
|
44
|
-
if (!isMultiple && refs.length > 1) {
|
|
45
|
+
if (import_utils.isDev && !isMultiple && refs.length > 1) {
|
|
45
46
|
console.warn(`[${that.__base.$options.name}]`, `The "${refName}" ref has been found multiple times.`, "Did you forgot to add the `[]` suffix to its name?");
|
|
46
47
|
}
|
|
47
|
-
if (!isMultiple && refs.length <= 1 && refs[0]
|
|
48
|
-
|
|
48
|
+
if (!isMultiple && refs.length <= 1 && !(0, import_utils.isDefined)(refs[0])) {
|
|
49
|
+
if (import_utils.isDev) {
|
|
50
|
+
console.warn(`[${that.__base.$options.name}]`, `The "${refName}" ref is missing.`, `Is there an \`[data-ref="${refName}"]\` element in the component's scope?`);
|
|
51
|
+
}
|
|
49
52
|
return;
|
|
50
53
|
}
|
|
51
54
|
that.__eventsManager.bindRef(refName, refs);
|
|
@@ -57,13 +60,12 @@ function __register(that, refName) {
|
|
|
57
60
|
}
|
|
58
61
|
function __unregister(that, refName) {
|
|
59
62
|
const propName = normalizeRefName(refName);
|
|
60
|
-
const refs =
|
|
63
|
+
const refs = (0, import_utils.isArray)(that[propName]) ? that[propName] : [that[propName]];
|
|
61
64
|
that.__eventsManager.unbindRef(refName, refs);
|
|
62
65
|
}
|
|
63
66
|
var RefsManager = class extends import_AbstractManager.default {
|
|
64
67
|
get __refs() {
|
|
65
|
-
|
|
66
|
-
return (_a = this.__config.refs) != null ? _a : [];
|
|
68
|
+
return this.__config.refs ?? [];
|
|
67
69
|
}
|
|
68
70
|
registerAll() {
|
|
69
71
|
this.__refs.forEach((refName) => __register(this, refName));
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import AbstractManager from "./AbstractManager.js";
|
|
2
|
+
import { isDev, isArray, isDefined } from "../../utils/index.js";
|
|
2
3
|
function normalizeRefName(name) {
|
|
3
4
|
return name.endsWith("[]") ? name.replace(/\[\]$/, "") : name;
|
|
4
5
|
}
|
|
5
6
|
function __filterRefsBelongingToInstance(that, ref) {
|
|
6
7
|
let ancestor = ref.parentElement;
|
|
7
|
-
while (ancestor && ancestor.dataset.component
|
|
8
|
+
while (ancestor && !isDefined(ancestor.dataset.component)) {
|
|
8
9
|
ancestor = ancestor.parentElement;
|
|
9
10
|
}
|
|
10
11
|
return ancestor === null || ancestor === that.__element;
|
|
@@ -13,11 +14,13 @@ function __register(that, refName) {
|
|
|
13
14
|
const isMultiple = refName.endsWith("[]");
|
|
14
15
|
const propName = normalizeRefName(refName);
|
|
15
16
|
const refs = Array.from(that.__element.querySelectorAll(`[data-ref="${refName}"]`)).filter((ref) => __filterRefsBelongingToInstance(that, ref));
|
|
16
|
-
if (!isMultiple && refs.length > 1) {
|
|
17
|
+
if (isDev && !isMultiple && refs.length > 1) {
|
|
17
18
|
console.warn(`[${that.__base.$options.name}]`, `The "${refName}" ref has been found multiple times.`, "Did you forgot to add the `[]` suffix to its name?");
|
|
18
19
|
}
|
|
19
|
-
if (!isMultiple && refs.length <= 1 && refs[0]
|
|
20
|
-
|
|
20
|
+
if (!isMultiple && refs.length <= 1 && !isDefined(refs[0])) {
|
|
21
|
+
if (isDev) {
|
|
22
|
+
console.warn(`[${that.__base.$options.name}]`, `The "${refName}" ref is missing.`, `Is there an \`[data-ref="${refName}"]\` element in the component's scope?`);
|
|
23
|
+
}
|
|
21
24
|
return;
|
|
22
25
|
}
|
|
23
26
|
that.__eventsManager.bindRef(refName, refs);
|
|
@@ -29,13 +32,12 @@ function __register(that, refName) {
|
|
|
29
32
|
}
|
|
30
33
|
function __unregister(that, refName) {
|
|
31
34
|
const propName = normalizeRefName(refName);
|
|
32
|
-
const refs =
|
|
35
|
+
const refs = isArray(that[propName]) ? that[propName] : [that[propName]];
|
|
33
36
|
that.__eventsManager.unbindRef(refName, refs);
|
|
34
37
|
}
|
|
35
38
|
class RefsManager extends AbstractManager {
|
|
36
39
|
get __refs() {
|
|
37
|
-
|
|
38
|
-
return (_a = this.__config.refs) != null ? _a : [];
|
|
40
|
+
return this.__config.refs ?? [];
|
|
39
41
|
}
|
|
40
42
|
registerAll() {
|
|
41
43
|
this.__refs.forEach((refName) => __register(this, refName));
|
|
@@ -27,6 +27,7 @@ __export(ResponsiveOptionsManager_exports, {
|
|
|
27
27
|
module.exports = __toCommonJS(ResponsiveOptionsManager_exports);
|
|
28
28
|
var import_OptionsManager = __toESM(require("./OptionsManager.cjs"), 1);
|
|
29
29
|
var import_services = require("../../services/index.cjs");
|
|
30
|
+
var import_utils = require("../../utils/index.cjs");
|
|
30
31
|
function __getResponsiveName(that, name) {
|
|
31
32
|
const { breakpoint } = (0, import_services.useResize)().props();
|
|
32
33
|
if (!breakpoint) {
|
|
@@ -56,7 +57,9 @@ var ResponsiveOptionsManager = class extends import_OptionsManager.default {
|
|
|
56
57
|
super.set(name, value, config);
|
|
57
58
|
return;
|
|
58
59
|
}
|
|
59
|
-
|
|
60
|
+
if (import_utils.isDev) {
|
|
61
|
+
console.warn(`[${this.__config.name}]`, "Responsive options are read-only.");
|
|
62
|
+
}
|
|
60
63
|
}
|
|
61
64
|
};
|
|
62
65
|
if (module.exports.default) module.exports = module.exports.default;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import OptionsManager, { __getPropertyName } from "./OptionsManager.js";
|
|
2
2
|
import { useResize } from "../../services/index.js";
|
|
3
|
+
import { isDev } from "../../utils/index.js";
|
|
3
4
|
function __getResponsiveName(that, name) {
|
|
4
5
|
const { breakpoint } = useResize().props();
|
|
5
6
|
if (!breakpoint) {
|
|
@@ -29,7 +30,9 @@ class ResponsiveOptionsManager extends OptionsManager {
|
|
|
29
30
|
super.set(name, value, config);
|
|
30
31
|
return;
|
|
31
32
|
}
|
|
32
|
-
|
|
33
|
+
if (isDev) {
|
|
34
|
+
console.warn(`[${this.__config.name}]`, "Responsive options are read-only.");
|
|
35
|
+
}
|
|
33
36
|
}
|
|
34
37
|
}
|
|
35
38
|
export {
|
|
@@ -4,7 +4,6 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
|
4
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
5
|
var __getProtoOf = Object.getPrototypeOf;
|
|
6
6
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
7
|
var __export = (target, all) => {
|
|
9
8
|
for (var name in all)
|
|
10
9
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -19,10 +18,6 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
19
18
|
};
|
|
20
19
|
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
20
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
|
-
var __publicField = (obj, key, value) => {
|
|
23
|
-
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
24
|
-
return value;
|
|
25
|
-
};
|
|
26
21
|
|
|
27
22
|
// packages/js-toolkit/Base/managers/ServicesManager.js
|
|
28
23
|
var ServicesManager_exports = {};
|
|
@@ -37,7 +32,7 @@ var import_scroll = __toESM(require("../../services/scroll.cjs"), 1);
|
|
|
37
32
|
var import_key = __toESM(require("../../services/key.cjs"), 1);
|
|
38
33
|
var import_load = __toESM(require("../../services/load.cjs"), 1);
|
|
39
34
|
var import_AbstractManager = __toESM(require("./AbstractManager.cjs"), 1);
|
|
40
|
-
var import_utils = require("
|
|
35
|
+
var import_utils = require("../../utils/index.cjs");
|
|
41
36
|
var SERVICES_MAP = {
|
|
42
37
|
scrolled: import_scroll.default,
|
|
43
38
|
resized: import_resize.default,
|
|
@@ -48,10 +43,7 @@ var SERVICES_MAP = {
|
|
|
48
43
|
};
|
|
49
44
|
var SERVICE_NAMES = Object.keys(SERVICES_MAP);
|
|
50
45
|
var ServicesManager = class extends import_AbstractManager.default {
|
|
51
|
-
|
|
52
|
-
super(...arguments);
|
|
53
|
-
__publicField(this, "__customServices", {});
|
|
54
|
-
}
|
|
46
|
+
__customServices = {};
|
|
55
47
|
get __services() {
|
|
56
48
|
return {
|
|
57
49
|
...this.__customServices,
|
|
@@ -59,7 +51,7 @@ var ServicesManager = class extends import_AbstractManager.default {
|
|
|
59
51
|
};
|
|
60
52
|
}
|
|
61
53
|
has(service) {
|
|
62
|
-
if (!(((0, import_utils.
|
|
54
|
+
if (!(((0, import_utils.isFunction)(this.__base[service]) || this.__base.__hasEvent(service)) && this.__services[service])) {
|
|
63
55
|
return false;
|
|
64
56
|
}
|
|
65
57
|
const { has } = this.__services[service]();
|
|
@@ -72,9 +64,8 @@ var ServicesManager = class extends import_AbstractManager.default {
|
|
|
72
64
|
if (this.has(service)) {
|
|
73
65
|
return this.disable.bind(this, service);
|
|
74
66
|
}
|
|
75
|
-
if (!((0, import_utils.
|
|
76
|
-
return
|
|
77
|
-
};
|
|
67
|
+
if (!((0, import_utils.isFunction)(this.__base[service]) || this.__base.__hasEvent(service)) || !this.__services[service]) {
|
|
68
|
+
return import_utils.noop;
|
|
78
69
|
}
|
|
79
70
|
const { add } = this.__services[service]();
|
|
80
71
|
const self = this;
|
|
@@ -100,7 +91,7 @@ var ServicesManager = class extends import_AbstractManager.default {
|
|
|
100
91
|
remove(this.__base.$id);
|
|
101
92
|
}
|
|
102
93
|
toggle(service, force) {
|
|
103
|
-
if (
|
|
94
|
+
if ((0, import_utils.isDefined)(force)) {
|
|
104
95
|
if (force && !this.has(service)) {
|
|
105
96
|
this.enable(service);
|
|
106
97
|
}
|
|
@@ -119,7 +110,10 @@ var ServicesManager = class extends import_AbstractManager.default {
|
|
|
119
110
|
}
|
|
120
111
|
unregister(name) {
|
|
121
112
|
if (SERVICE_NAMES.includes(name)) {
|
|
122
|
-
|
|
113
|
+
if (import_utils.isDev) {
|
|
114
|
+
throw new Error(`[ServicesManager] The \`${name}\` core service can not be unregistered.`);
|
|
115
|
+
}
|
|
116
|
+
return;
|
|
123
117
|
}
|
|
124
118
|
this.__base.__removeEmits(name);
|
|
125
119
|
delete this.__customServices[name];
|
|
@@ -1,9 +1,3 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
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
1
|
import usePointer from "../../services/pointer.js";
|
|
8
2
|
import useRaf from "../../services/raf.js";
|
|
9
3
|
import useResize from "../../services/resize.js";
|
|
@@ -11,7 +5,7 @@ import useScroll from "../../services/scroll.js";
|
|
|
11
5
|
import useKey from "../../services/key.js";
|
|
12
6
|
import useLoad from "../../services/load.js";
|
|
13
7
|
import AbstractManager from "./AbstractManager.js";
|
|
14
|
-
import {
|
|
8
|
+
import { noop, isFunction, isDefined, isDev } from "../../utils/index.js";
|
|
15
9
|
const SERVICES_MAP = {
|
|
16
10
|
scrolled: useScroll,
|
|
17
11
|
resized: useResize,
|
|
@@ -22,10 +16,7 @@ const SERVICES_MAP = {
|
|
|
22
16
|
};
|
|
23
17
|
const SERVICE_NAMES = Object.keys(SERVICES_MAP);
|
|
24
18
|
class ServicesManager extends AbstractManager {
|
|
25
|
-
|
|
26
|
-
super(...arguments);
|
|
27
|
-
__publicField(this, "__customServices", {});
|
|
28
|
-
}
|
|
19
|
+
__customServices = {};
|
|
29
20
|
get __services() {
|
|
30
21
|
return {
|
|
31
22
|
...this.__customServices,
|
|
@@ -33,7 +24,7 @@ class ServicesManager extends AbstractManager {
|
|
|
33
24
|
};
|
|
34
25
|
}
|
|
35
26
|
has(service) {
|
|
36
|
-
if (!((
|
|
27
|
+
if (!((isFunction(this.__base[service]) || this.__base.__hasEvent(service)) && this.__services[service])) {
|
|
37
28
|
return false;
|
|
38
29
|
}
|
|
39
30
|
const { has } = this.__services[service]();
|
|
@@ -46,9 +37,8 @@ class ServicesManager extends AbstractManager {
|
|
|
46
37
|
if (this.has(service)) {
|
|
47
38
|
return this.disable.bind(this, service);
|
|
48
39
|
}
|
|
49
|
-
if (!(
|
|
50
|
-
return
|
|
51
|
-
};
|
|
40
|
+
if (!(isFunction(this.__base[service]) || this.__base.__hasEvent(service)) || !this.__services[service]) {
|
|
41
|
+
return noop;
|
|
52
42
|
}
|
|
53
43
|
const { add } = this.__services[service]();
|
|
54
44
|
const self = this;
|
|
@@ -74,7 +64,7 @@ class ServicesManager extends AbstractManager {
|
|
|
74
64
|
remove(this.__base.$id);
|
|
75
65
|
}
|
|
76
66
|
toggle(service, force) {
|
|
77
|
-
if (
|
|
67
|
+
if (isDefined(force)) {
|
|
78
68
|
if (force && !this.has(service)) {
|
|
79
69
|
this.enable(service);
|
|
80
70
|
}
|
|
@@ -93,7 +83,10 @@ class ServicesManager extends AbstractManager {
|
|
|
93
83
|
}
|
|
94
84
|
unregister(name) {
|
|
95
85
|
if (SERVICE_NAMES.includes(name)) {
|
|
96
|
-
|
|
86
|
+
if (isDev) {
|
|
87
|
+
throw new Error(`[ServicesManager] The \`${name}\` core service can not be unregistered.`);
|
|
88
|
+
}
|
|
89
|
+
return;
|
|
97
90
|
}
|
|
98
91
|
this.__base.__removeEmits(name);
|
|
99
92
|
delete this.__customServices[name];
|
package/Base/utils.cjs
CHANGED
|
@@ -19,13 +19,13 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
19
19
|
// packages/js-toolkit/Base/utils.js
|
|
20
20
|
var utils_exports = {};
|
|
21
21
|
__export(utils_exports, {
|
|
22
|
+
eventIsDefinedInConfig: () => eventIsDefinedInConfig,
|
|
23
|
+
eventIsNative: () => eventIsNative,
|
|
22
24
|
getComponentElements: () => getComponentElements,
|
|
23
|
-
|
|
25
|
+
getEventTarget: () => getEventTarget
|
|
24
26
|
});
|
|
25
27
|
module.exports = __toCommonJS(utils_exports);
|
|
26
|
-
|
|
27
|
-
return typeof obj[name] === "function";
|
|
28
|
-
}
|
|
28
|
+
var import_utils = require("../utils/index.cjs");
|
|
29
29
|
function getComponentElements(nameOrSelector, element = document) {
|
|
30
30
|
const selector = `[data-component="${nameOrSelector}"]`;
|
|
31
31
|
let elements = [];
|
|
@@ -38,4 +38,22 @@ function getComponentElements(nameOrSelector, element = document) {
|
|
|
38
38
|
}
|
|
39
39
|
return elements;
|
|
40
40
|
}
|
|
41
|
+
function eventIsDefinedInConfig(event, config) {
|
|
42
|
+
return (0, import_utils.isArray)(config.emits) && config.emits.includes(event);
|
|
43
|
+
}
|
|
44
|
+
function eventIsNative(event, element) {
|
|
45
|
+
return (0, import_utils.isDefined)(element[`on${event}`]);
|
|
46
|
+
}
|
|
47
|
+
function getEventTarget(instance, event, config) {
|
|
48
|
+
if (eventIsDefinedInConfig(event, config)) {
|
|
49
|
+
return instance;
|
|
50
|
+
}
|
|
51
|
+
if (eventIsNative(event, instance.$el)) {
|
|
52
|
+
return instance.$el;
|
|
53
|
+
}
|
|
54
|
+
if (import_utils.isDev) {
|
|
55
|
+
console.warn(`[${config.name}]`, `The "${event}" event is missing from the configuration and is not a native`, `event for the root element of type \`${instance.$el.constructor.name}\`.`);
|
|
56
|
+
}
|
|
57
|
+
return instance;
|
|
58
|
+
}
|
|
41
59
|
if (module.exports.default) module.exports = module.exports.default;
|
package/Base/utils.d.ts
CHANGED
|
@@ -1,14 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @typedef {import('./index.js').default} Base
|
|
3
3
|
*/
|
|
4
|
-
/**
|
|
5
|
-
* Test if an object has a method.
|
|
6
|
-
*
|
|
7
|
-
* @param {Object} obj The object to test
|
|
8
|
-
* @param {string} name The method's name
|
|
9
|
-
* @returns {boolean}
|
|
10
|
-
*/
|
|
11
|
-
export function hasMethod(obj: any, name: string): boolean;
|
|
12
4
|
/**
|
|
13
5
|
* Get a list of elements based on the name of a component.
|
|
14
6
|
*
|
|
@@ -20,4 +12,29 @@ export function hasMethod(obj: any, name: string): boolean;
|
|
|
20
12
|
* A list of elements on which the component should be mounted.
|
|
21
13
|
*/
|
|
22
14
|
export function getComponentElements(nameOrSelector: string, element?: HTMLElement | Document): Array<HTMLElement>;
|
|
15
|
+
/**
|
|
16
|
+
* Test if an event is defined in the given config.
|
|
17
|
+
*
|
|
18
|
+
* @param {string} event
|
|
19
|
+
* @param {import('./index.js').BaseConfig} config
|
|
20
|
+
* @returns {boolean}
|
|
21
|
+
*/
|
|
22
|
+
export function eventIsDefinedInConfig(event: string, config: import('./index.js').BaseConfig): boolean;
|
|
23
|
+
/**
|
|
24
|
+
* Test if an event can be used on the given element.
|
|
25
|
+
*
|
|
26
|
+
* @param {string} event
|
|
27
|
+
* @param {HTMLElement} element
|
|
28
|
+
* @returns {boolean}
|
|
29
|
+
*/
|
|
30
|
+
export function eventIsNative(event: string, element: HTMLElement): boolean;
|
|
31
|
+
/**
|
|
32
|
+
* Get the target of a given event.
|
|
33
|
+
*
|
|
34
|
+
* @param {Base} instance
|
|
35
|
+
* @param {string} event
|
|
36
|
+
* @param {import('./index.js').BaseConfig} config
|
|
37
|
+
* @returns {Base|Base['$el']}
|
|
38
|
+
*/
|
|
39
|
+
export function getEventTarget(instance: Base, event: string, config: import('./index.js').BaseConfig): Base | Base['$el'];
|
|
23
40
|
export type Base = import('./index.js').default;
|
package/Base/utils.js
CHANGED
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
return typeof obj[name] === "function";
|
|
3
|
-
}
|
|
1
|
+
import { isArray, isDefined, isDev } from "../utils/index.js";
|
|
4
2
|
function getComponentElements(nameOrSelector, element = document) {
|
|
5
3
|
const selector = `[data-component="${nameOrSelector}"]`;
|
|
6
4
|
let elements = [];
|
|
@@ -13,7 +11,27 @@ function getComponentElements(nameOrSelector, element = document) {
|
|
|
13
11
|
}
|
|
14
12
|
return elements;
|
|
15
13
|
}
|
|
14
|
+
function eventIsDefinedInConfig(event, config) {
|
|
15
|
+
return isArray(config.emits) && config.emits.includes(event);
|
|
16
|
+
}
|
|
17
|
+
function eventIsNative(event, element) {
|
|
18
|
+
return isDefined(element[`on${event}`]);
|
|
19
|
+
}
|
|
20
|
+
function getEventTarget(instance, event, config) {
|
|
21
|
+
if (eventIsDefinedInConfig(event, config)) {
|
|
22
|
+
return instance;
|
|
23
|
+
}
|
|
24
|
+
if (eventIsNative(event, instance.$el)) {
|
|
25
|
+
return instance.$el;
|
|
26
|
+
}
|
|
27
|
+
if (isDev) {
|
|
28
|
+
console.warn(`[${config.name}]`, `The "${event}" event is missing from the configuration and is not a native`, `event for the root element of type \`${instance.$el.constructor.name}\`.`);
|
|
29
|
+
}
|
|
30
|
+
return instance;
|
|
31
|
+
}
|
|
16
32
|
export {
|
|
33
|
+
eventIsDefinedInConfig,
|
|
34
|
+
eventIsNative,
|
|
17
35
|
getComponentElements,
|
|
18
|
-
|
|
36
|
+
getEventTarget
|
|
19
37
|
};
|
|
@@ -26,6 +26,7 @@ __export(withBreakpointManager_exports, {
|
|
|
26
26
|
});
|
|
27
27
|
module.exports = __toCommonJS(withBreakpointManager_exports);
|
|
28
28
|
var import_resize = __toESM(require("../services/resize.cjs"), 1);
|
|
29
|
+
var import_utils = require("../utils/index.cjs");
|
|
29
30
|
function testBreakpoints(breakpoints) {
|
|
30
31
|
const { breakpoint } = (0, import_resize.default)().props();
|
|
31
32
|
breakpoints.forEach(([breakpointKeys, instance]) => {
|
|
@@ -45,15 +46,24 @@ function mountComponents(instance, breakpoints) {
|
|
|
45
46
|
}
|
|
46
47
|
var instances = /* @__PURE__ */ new WeakMap();
|
|
47
48
|
function withBreakpointManager(BaseClass, breakpoints) {
|
|
48
|
-
if (!
|
|
49
|
-
|
|
49
|
+
if (!(0, import_utils.isArray)(breakpoints)) {
|
|
50
|
+
if (import_utils.isDev) {
|
|
51
|
+
throw new Error("[withBreakpointManager] The `breakpoints` parameter must be an array.");
|
|
52
|
+
}
|
|
53
|
+
return BaseClass;
|
|
50
54
|
}
|
|
51
55
|
if (breakpoints.length < 2) {
|
|
52
|
-
|
|
56
|
+
if (import_utils.isDev) {
|
|
57
|
+
throw new Error("[withBreakpointManager] You must define at least 2 breakpoints.");
|
|
58
|
+
}
|
|
59
|
+
return BaseClass;
|
|
53
60
|
}
|
|
54
61
|
const { add, props } = (0, import_resize.default)();
|
|
55
62
|
if (!props().breakpoint) {
|
|
56
|
-
|
|
63
|
+
if (import_utils.isDev) {
|
|
64
|
+
throw new Error(`The \`BreakpointManager\` class requires breakpoints to be defined.`);
|
|
65
|
+
}
|
|
66
|
+
return BaseClass;
|
|
57
67
|
}
|
|
58
68
|
return class extends BaseClass {
|
|
59
69
|
constructor(element) {
|
|
@@ -72,7 +82,7 @@ function withBreakpointManager(BaseClass, breakpoints) {
|
|
|
72
82
|
return this;
|
|
73
83
|
}
|
|
74
84
|
$destroy() {
|
|
75
|
-
if (
|
|
85
|
+
if ((0, import_utils.isArray)(instances.get(this))) {
|
|
76
86
|
instances.get(this).forEach(([, instance]) => {
|
|
77
87
|
instance.$destroy();
|
|
78
88
|
});
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import useResize from "../services/resize.js";
|
|
2
|
+
import { isDev, isArray } from "../utils/index.js";
|
|
2
3
|
function testBreakpoints(breakpoints) {
|
|
3
4
|
const { breakpoint } = useResize().props();
|
|
4
5
|
breakpoints.forEach(([breakpointKeys, instance]) => {
|
|
@@ -18,15 +19,24 @@ function mountComponents(instance, breakpoints) {
|
|
|
18
19
|
}
|
|
19
20
|
const instances = /* @__PURE__ */ new WeakMap();
|
|
20
21
|
function withBreakpointManager(BaseClass, breakpoints) {
|
|
21
|
-
if (!
|
|
22
|
-
|
|
22
|
+
if (!isArray(breakpoints)) {
|
|
23
|
+
if (isDev) {
|
|
24
|
+
throw new Error("[withBreakpointManager] The `breakpoints` parameter must be an array.");
|
|
25
|
+
}
|
|
26
|
+
return BaseClass;
|
|
23
27
|
}
|
|
24
28
|
if (breakpoints.length < 2) {
|
|
25
|
-
|
|
29
|
+
if (isDev) {
|
|
30
|
+
throw new Error("[withBreakpointManager] You must define at least 2 breakpoints.");
|
|
31
|
+
}
|
|
32
|
+
return BaseClass;
|
|
26
33
|
}
|
|
27
34
|
const { add, props } = useResize();
|
|
28
35
|
if (!props().breakpoint) {
|
|
29
|
-
|
|
36
|
+
if (isDev) {
|
|
37
|
+
throw new Error(`The \`BreakpointManager\` class requires breakpoints to be defined.`);
|
|
38
|
+
}
|
|
39
|
+
return BaseClass;
|
|
30
40
|
}
|
|
31
41
|
return class extends BaseClass {
|
|
32
42
|
constructor(element) {
|
|
@@ -45,7 +55,7 @@ function withBreakpointManager(BaseClass, breakpoints) {
|
|
|
45
55
|
return this;
|
|
46
56
|
}
|
|
47
57
|
$destroy() {
|
|
48
|
-
if (
|
|
58
|
+
if (isArray(instances.get(this))) {
|
|
49
59
|
instances.get(this).forEach(([, instance]) => {
|
|
50
60
|
instance.$destroy();
|
|
51
61
|
});
|
|
@@ -4,7 +4,6 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
|
4
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
5
|
var __getProtoOf = Object.getPrototypeOf;
|
|
6
6
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
7
|
var __export = (target, all) => {
|
|
9
8
|
for (var name in all)
|
|
10
9
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -19,10 +18,6 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
19
18
|
};
|
|
20
19
|
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
20
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
|
-
var __publicField = (obj, key, value) => {
|
|
23
|
-
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
24
|
-
return value;
|
|
25
|
-
};
|
|
26
21
|
|
|
27
22
|
// packages/js-toolkit/decorators/withBreakpointObserver.js
|
|
28
23
|
var withBreakpointObserver_exports = {};
|
|
@@ -31,6 +26,7 @@ __export(withBreakpointObserver_exports, {
|
|
|
31
26
|
});
|
|
32
27
|
module.exports = __toCommonJS(withBreakpointObserver_exports);
|
|
33
28
|
var import_resize = __toESM(require("../services/resize.cjs"), 1);
|
|
29
|
+
var import_utils = require("../utils/index.cjs");
|
|
34
30
|
function testBreakpoints(instance, breakpoint = (0, import_resize.default)().props().breakpoint) {
|
|
35
31
|
const { activeBreakpoints, inactiveBreakpoints } = instance.$options;
|
|
36
32
|
const isInActiveBreakpoint = activeBreakpoints && activeBreakpoints.split(" ").includes(breakpoint);
|
|
@@ -51,7 +47,9 @@ function testConflictingBreakpointConfiguration(instance) {
|
|
|
51
47
|
}
|
|
52
48
|
}
|
|
53
49
|
function addToResize(key, instance) {
|
|
54
|
-
|
|
50
|
+
if (import_utils.isDev) {
|
|
51
|
+
testConflictingBreakpointConfiguration(instance);
|
|
52
|
+
}
|
|
55
53
|
const { add, has } = (0, import_resize.default)();
|
|
56
54
|
if (!has(key)) {
|
|
57
55
|
add(key, function onResize({ breakpoint }) {
|
|
@@ -65,14 +63,25 @@ function addToResize(key, instance) {
|
|
|
65
63
|
}
|
|
66
64
|
}
|
|
67
65
|
function withBreakpointObserver(BaseClass) {
|
|
68
|
-
|
|
69
|
-
|
|
66
|
+
return class extends BaseClass {
|
|
67
|
+
static config = {
|
|
68
|
+
...BaseClass.config,
|
|
69
|
+
name: `${BaseClass.config.name}WithBreakpointObserver`,
|
|
70
|
+
options: {
|
|
71
|
+
...BaseClass.config?.options || {},
|
|
72
|
+
activeBreakpoints: String,
|
|
73
|
+
inactiveBreakpoints: String
|
|
74
|
+
}
|
|
75
|
+
};
|
|
70
76
|
constructor(element) {
|
|
71
77
|
super(element);
|
|
72
78
|
const { remove, props } = (0, import_resize.default)();
|
|
73
79
|
const { name } = this.$options;
|
|
74
80
|
if (!props().breakpoint) {
|
|
75
|
-
|
|
81
|
+
if (import_utils.isDev) {
|
|
82
|
+
throw new Error(`[${name}] The \`BreakpointObserver\` class requires breakpoints to be defined.`);
|
|
83
|
+
}
|
|
84
|
+
return;
|
|
76
85
|
}
|
|
77
86
|
const key = `BreakpointObserver-${this.$id}`;
|
|
78
87
|
const mutationObserver = new MutationObserver(([mutation]) => {
|
|
@@ -101,14 +110,6 @@ function withBreakpointObserver(BaseClass) {
|
|
|
101
110
|
}
|
|
102
111
|
return this;
|
|
103
112
|
}
|
|
104
|
-
}
|
|
105
|
-
...BaseClass.config,
|
|
106
|
-
name: `${BaseClass.config.name}WithBreakpointObserver`,
|
|
107
|
-
options: {
|
|
108
|
-
...((_a = BaseClass.config) == null ? void 0 : _a.options) || {},
|
|
109
|
-
activeBreakpoints: String,
|
|
110
|
-
inactiveBreakpoints: String
|
|
111
|
-
}
|
|
112
|
-
}), _b;
|
|
113
|
+
};
|
|
113
114
|
}
|
|
114
115
|
if (module.exports.default) module.exports = module.exports.default;
|
|
@@ -1,10 +1,5 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
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
1
|
import useResize from "../services/resize.js";
|
|
2
|
+
import { isDev } from "../utils/index.js";
|
|
8
3
|
function testBreakpoints(instance, breakpoint = useResize().props().breakpoint) {
|
|
9
4
|
const { activeBreakpoints, inactiveBreakpoints } = instance.$options;
|
|
10
5
|
const isInActiveBreakpoint = activeBreakpoints && activeBreakpoints.split(" ").includes(breakpoint);
|
|
@@ -25,7 +20,9 @@ function testConflictingBreakpointConfiguration(instance) {
|
|
|
25
20
|
}
|
|
26
21
|
}
|
|
27
22
|
function addToResize(key, instance) {
|
|
28
|
-
|
|
23
|
+
if (isDev) {
|
|
24
|
+
testConflictingBreakpointConfiguration(instance);
|
|
25
|
+
}
|
|
29
26
|
const { add, has } = useResize();
|
|
30
27
|
if (!has(key)) {
|
|
31
28
|
add(key, function onResize({ breakpoint }) {
|
|
@@ -39,14 +36,25 @@ function addToResize(key, instance) {
|
|
|
39
36
|
}
|
|
40
37
|
}
|
|
41
38
|
function withBreakpointObserver(BaseClass) {
|
|
42
|
-
|
|
43
|
-
|
|
39
|
+
return class extends BaseClass {
|
|
40
|
+
static config = {
|
|
41
|
+
...BaseClass.config,
|
|
42
|
+
name: `${BaseClass.config.name}WithBreakpointObserver`,
|
|
43
|
+
options: {
|
|
44
|
+
...BaseClass.config?.options || {},
|
|
45
|
+
activeBreakpoints: String,
|
|
46
|
+
inactiveBreakpoints: String
|
|
47
|
+
}
|
|
48
|
+
};
|
|
44
49
|
constructor(element) {
|
|
45
50
|
super(element);
|
|
46
51
|
const { remove, props } = useResize();
|
|
47
52
|
const { name } = this.$options;
|
|
48
53
|
if (!props().breakpoint) {
|
|
49
|
-
|
|
54
|
+
if (isDev) {
|
|
55
|
+
throw new Error(`[${name}] The \`BreakpointObserver\` class requires breakpoints to be defined.`);
|
|
56
|
+
}
|
|
57
|
+
return;
|
|
50
58
|
}
|
|
51
59
|
const key = `BreakpointObserver-${this.$id}`;
|
|
52
60
|
const mutationObserver = new MutationObserver(([mutation]) => {
|
|
@@ -75,15 +83,7 @@ function withBreakpointObserver(BaseClass) {
|
|
|
75
83
|
}
|
|
76
84
|
return this;
|
|
77
85
|
}
|
|
78
|
-
}
|
|
79
|
-
...BaseClass.config,
|
|
80
|
-
name: `${BaseClass.config.name}WithBreakpointObserver`,
|
|
81
|
-
options: {
|
|
82
|
-
...((_a = BaseClass.config) == null ? void 0 : _a.options) || {},
|
|
83
|
-
activeBreakpoints: String,
|
|
84
|
-
inactiveBreakpoints: String
|
|
85
|
-
}
|
|
86
|
-
}), _b;
|
|
86
|
+
};
|
|
87
87
|
}
|
|
88
88
|
export {
|
|
89
89
|
withBreakpointObserver as default
|