@studiometa/js-toolkit 2.2.3 → 2.4.1
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 +29 -36
- package/Base/index.d.ts +0 -8
- package/Base/index.js +18 -25
- package/Base/managers/EventsManager.cjs +35 -36
- package/Base/managers/EventsManager.js +35 -36
- package/Base/managers/OptionsManager.cjs +19 -13
- package/Base/managers/OptionsManager.js +19 -13
- package/Base/managers/RefsManager.cjs +8 -5
- package/Base/managers/RefsManager.js +8 -5
- package/Base/managers/ResponsiveOptionsManager.cjs +4 -1
- package/Base/managers/ResponsiveOptionsManager.js +4 -1
- package/Base/managers/ServicesManager.cjs +5 -2
- package/Base/managers/ServicesManager.js +6 -3
- package/Base/utils.cjs +23 -1
- package/Base/utils.d.ts +25 -0
- package/Base/utils.js +23 -1
- package/README.md +3 -3
- package/decorators/withBreakpointManager.cjs +15 -5
- package/decorators/withBreakpointManager.js +15 -5
- package/decorators/withBreakpointObserver.cjs +8 -2
- package/decorators/withBreakpointObserver.js +8 -2
- package/decorators/withVue2.cjs +10 -3
- package/decorators/withVue2.js +10 -3
- package/helpers/getDirectChildren.cjs +46 -0
- package/helpers/getDirectChildren.d.ts +24 -0
- package/helpers/getDirectChildren.js +24 -0
- package/helpers/importOnInteraction.cjs +2 -1
- package/helpers/importOnInteraction.js +2 -1
- package/helpers/importWhenVisible.cjs +2 -1
- package/helpers/importWhenVisible.js +2 -1
- package/helpers/index.cjs +2 -0
- package/helpers/index.d.ts +1 -0
- package/helpers/index.js +1 -0
- package/helpers/utils.cjs +3 -2
- package/helpers/utils.js +3 -2
- package/package.json +4 -1
- package/services/raf.cjs +2 -5
- package/services/raf.js +1 -1
- package/utils/css/animate.cjs +31 -92
- package/utils/css/animate.d.ts +4 -16
- package/utils/css/animate.js +28 -89
- package/utils/css/classes.cjs +2 -1
- package/utils/css/classes.js +2 -1
- package/utils/css/styles.cjs +2 -5
- package/utils/css/styles.js +1 -1
- package/utils/css/transform.cjs +13 -16
- package/utils/css/transform.js +1 -1
- package/utils/css/transition.cjs +5 -3
- package/utils/css/transition.js +5 -3
- 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 +5 -5
- package/utils/index.d.ts +3 -2
- package/utils/index.js +5 -5
- package/utils/{isDefined.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/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 +114 -0
- package/utils/tween.d.ts +25 -0
- package/utils/tween.js +89 -0
- 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.cjs +0 -28
- package/utils/object/isObject.d.ts +0 -7
- package/utils/object/isObject.js +0 -6
|
@@ -33,7 +33,7 @@ __export(OptionsManager_exports, {
|
|
|
33
33
|
module.exports = __toCommonJS(OptionsManager_exports);
|
|
34
34
|
var import_deepmerge = __toESM(require("deepmerge"), 1);
|
|
35
35
|
var import_AbstractManager = __toESM(require("./AbstractManager.cjs"), 1);
|
|
36
|
-
var
|
|
36
|
+
var import_utils = require("../../utils/index.cjs");
|
|
37
37
|
var types = /* @__PURE__ */ new Set([String, Number, Boolean, Array, Object]);
|
|
38
38
|
var __defaultValues = {
|
|
39
39
|
String: "",
|
|
@@ -42,9 +42,6 @@ var __defaultValues = {
|
|
|
42
42
|
Array: () => [],
|
|
43
43
|
Object: () => ({})
|
|
44
44
|
};
|
|
45
|
-
function __hasProperty(that, prop) {
|
|
46
|
-
return typeof that.__element.dataset[prop] !== "undefined";
|
|
47
|
-
}
|
|
48
45
|
var __propertyNameCache = /* @__PURE__ */ new Map();
|
|
49
46
|
function __getPropertyName(name, prefix = "") {
|
|
50
47
|
const key = name + prefix;
|
|
@@ -58,11 +55,17 @@ function __getPropertyName(name, prefix = "") {
|
|
|
58
55
|
function __register(that, name, config) {
|
|
59
56
|
var _a;
|
|
60
57
|
if (!types.has(config.type)) {
|
|
61
|
-
|
|
58
|
+
if (import_utils.isDev) {
|
|
59
|
+
throw new Error(`The "${name}" option has an invalid type. The allowed types are: String, Number, Boolean, Array and Object.`);
|
|
60
|
+
}
|
|
61
|
+
return;
|
|
62
62
|
}
|
|
63
63
|
config.default = (_a = config.default) != null ? _a : __defaultValues[config.type.name];
|
|
64
|
-
if ((config.type === Array || config.type === Object) &&
|
|
65
|
-
|
|
64
|
+
if ((config.type === Array || config.type === Object) && !(0, import_utils.isFunction)(config.default)) {
|
|
65
|
+
if (import_utils.isDev) {
|
|
66
|
+
throw new Error(`The default value for options of type "${config.type.name}" must be returned by a function.`);
|
|
67
|
+
}
|
|
68
|
+
return;
|
|
66
69
|
}
|
|
67
70
|
Object.defineProperty(that, name, {
|
|
68
71
|
get: () => {
|
|
@@ -100,11 +103,11 @@ var OptionsManager = class extends import_AbstractManager.default {
|
|
|
100
103
|
get(name, config) {
|
|
101
104
|
const { type, default: defaultValue } = config;
|
|
102
105
|
const propertyName = __getPropertyName(name);
|
|
103
|
-
const hasProperty =
|
|
106
|
+
const hasProperty = (0, import_utils.isDefined)(this.__element.dataset[propertyName]);
|
|
104
107
|
if (type === Boolean) {
|
|
105
108
|
if (defaultValue) {
|
|
106
109
|
const negatedPropertyName = __getPropertyName(name, "No");
|
|
107
|
-
const hasNegatedProperty =
|
|
110
|
+
const hasNegatedProperty = (0, import_utils.isDefined)(this.__element.dataset[negatedPropertyName]);
|
|
108
111
|
return !hasNegatedProperty;
|
|
109
112
|
}
|
|
110
113
|
return hasProperty || defaultValue;
|
|
@@ -117,8 +120,8 @@ var OptionsManager = class extends import_AbstractManager.default {
|
|
|
117
120
|
config = type === Array ? config : config;
|
|
118
121
|
if (!this.__values[name]) {
|
|
119
122
|
let val = hasProperty ? JSON.parse(value) : config.default();
|
|
120
|
-
if (
|
|
121
|
-
val =
|
|
123
|
+
if ((0, import_utils.isDefined)(config.merge)) {
|
|
124
|
+
val = (0, import_utils.isBoolean)(config.merge) ? (0, import_deepmerge.default)(config.default(), val) : (0, import_deepmerge.default)(config.default(), val, config.merge);
|
|
122
125
|
}
|
|
123
126
|
this.__values[name] = val;
|
|
124
127
|
}
|
|
@@ -130,8 +133,11 @@ var OptionsManager = class extends import_AbstractManager.default {
|
|
|
130
133
|
const { type, default: defaultValue } = config;
|
|
131
134
|
const propertyName = __getPropertyName(name);
|
|
132
135
|
if (value.constructor.name !== type.name) {
|
|
133
|
-
|
|
134
|
-
|
|
136
|
+
if (import_utils.isDev) {
|
|
137
|
+
const val = (0, import_utils.isArray)(value) || (0, import_utils.isObject)(value) ? JSON.stringify(value) : value;
|
|
138
|
+
throw new TypeError(`The "${val}" value for the "${name}" option must be of type "${type.name}"`);
|
|
139
|
+
}
|
|
140
|
+
return;
|
|
135
141
|
}
|
|
136
142
|
switch (type) {
|
|
137
143
|
case Boolean:
|
|
@@ -6,7 +6,7 @@ var __publicField = (obj, key, value) => {
|
|
|
6
6
|
};
|
|
7
7
|
import deepmerge from "deepmerge";
|
|
8
8
|
import AbstractManager from "./AbstractManager.js";
|
|
9
|
-
import isObject from "../../utils/
|
|
9
|
+
import { isDev, isFunction, isDefined, isBoolean, isArray, isObject } from "../../utils/index.js";
|
|
10
10
|
const types = /* @__PURE__ */ new Set([String, Number, Boolean, Array, Object]);
|
|
11
11
|
const __defaultValues = {
|
|
12
12
|
String: "",
|
|
@@ -15,9 +15,6 @@ const __defaultValues = {
|
|
|
15
15
|
Array: () => [],
|
|
16
16
|
Object: () => ({})
|
|
17
17
|
};
|
|
18
|
-
function __hasProperty(that, prop) {
|
|
19
|
-
return typeof that.__element.dataset[prop] !== "undefined";
|
|
20
|
-
}
|
|
21
18
|
const __propertyNameCache = /* @__PURE__ */ new Map();
|
|
22
19
|
function __getPropertyName(name, prefix = "") {
|
|
23
20
|
const key = name + prefix;
|
|
@@ -31,11 +28,17 @@ function __getPropertyName(name, prefix = "") {
|
|
|
31
28
|
function __register(that, name, config) {
|
|
32
29
|
var _a;
|
|
33
30
|
if (!types.has(config.type)) {
|
|
34
|
-
|
|
31
|
+
if (isDev) {
|
|
32
|
+
throw new Error(`The "${name}" option has an invalid type. The allowed types are: String, Number, Boolean, Array and Object.`);
|
|
33
|
+
}
|
|
34
|
+
return;
|
|
35
35
|
}
|
|
36
36
|
config.default = (_a = config.default) != null ? _a : __defaultValues[config.type.name];
|
|
37
|
-
if ((config.type === Array || config.type === Object) &&
|
|
38
|
-
|
|
37
|
+
if ((config.type === Array || config.type === Object) && !isFunction(config.default)) {
|
|
38
|
+
if (isDev) {
|
|
39
|
+
throw new Error(`The default value for options of type "${config.type.name}" must be returned by a function.`);
|
|
40
|
+
}
|
|
41
|
+
return;
|
|
39
42
|
}
|
|
40
43
|
Object.defineProperty(that, name, {
|
|
41
44
|
get: () => {
|
|
@@ -73,11 +76,11 @@ class OptionsManager extends AbstractManager {
|
|
|
73
76
|
get(name, config) {
|
|
74
77
|
const { type, default: defaultValue } = config;
|
|
75
78
|
const propertyName = __getPropertyName(name);
|
|
76
|
-
const hasProperty =
|
|
79
|
+
const hasProperty = isDefined(this.__element.dataset[propertyName]);
|
|
77
80
|
if (type === Boolean) {
|
|
78
81
|
if (defaultValue) {
|
|
79
82
|
const negatedPropertyName = __getPropertyName(name, "No");
|
|
80
|
-
const hasNegatedProperty =
|
|
83
|
+
const hasNegatedProperty = isDefined(this.__element.dataset[negatedPropertyName]);
|
|
81
84
|
return !hasNegatedProperty;
|
|
82
85
|
}
|
|
83
86
|
return hasProperty || defaultValue;
|
|
@@ -90,8 +93,8 @@ class OptionsManager extends AbstractManager {
|
|
|
90
93
|
config = type === Array ? config : config;
|
|
91
94
|
if (!this.__values[name]) {
|
|
92
95
|
let val = hasProperty ? JSON.parse(value) : config.default();
|
|
93
|
-
if (
|
|
94
|
-
val =
|
|
96
|
+
if (isDefined(config.merge)) {
|
|
97
|
+
val = isBoolean(config.merge) ? deepmerge(config.default(), val) : deepmerge(config.default(), val, config.merge);
|
|
95
98
|
}
|
|
96
99
|
this.__values[name] = val;
|
|
97
100
|
}
|
|
@@ -103,8 +106,11 @@ class OptionsManager extends AbstractManager {
|
|
|
103
106
|
const { type, default: defaultValue } = config;
|
|
104
107
|
const propertyName = __getPropertyName(name);
|
|
105
108
|
if (value.constructor.name !== type.name) {
|
|
106
|
-
|
|
107
|
-
|
|
109
|
+
if (isDev) {
|
|
110
|
+
const val = isArray(value) || isObject(value) ? JSON.stringify(value) : value;
|
|
111
|
+
throw new TypeError(`The "${val}" value for the "${name}" option must be of type "${type.name}"`);
|
|
112
|
+
}
|
|
113
|
+
return;
|
|
108
114
|
}
|
|
109
115
|
switch (type) {
|
|
110
116
|
case Boolean:
|
|
@@ -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,7 +60,7 @@ 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 {
|
|
@@ -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,7 +32,7 @@ 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 {
|
|
@@ -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 {
|
|
@@ -99,7 +99,7 @@ var ServicesManager = class extends import_AbstractManager.default {
|
|
|
99
99
|
remove(this.__base.$id);
|
|
100
100
|
}
|
|
101
101
|
toggle(service, force) {
|
|
102
|
-
if (
|
|
102
|
+
if ((0, import_utils.isDefined)(force)) {
|
|
103
103
|
if (force && !this.has(service)) {
|
|
104
104
|
this.enable(service);
|
|
105
105
|
}
|
|
@@ -118,7 +118,10 @@ var ServicesManager = class extends import_AbstractManager.default {
|
|
|
118
118
|
}
|
|
119
119
|
unregister(name) {
|
|
120
120
|
if (SERVICE_NAMES.includes(name)) {
|
|
121
|
-
|
|
121
|
+
if (import_utils.isDev) {
|
|
122
|
+
throw new Error(`[ServicesManager] The \`${name}\` core service can not be unregistered.`);
|
|
123
|
+
}
|
|
124
|
+
return;
|
|
122
125
|
}
|
|
123
126
|
this.__base.__removeEmits(name);
|
|
124
127
|
delete this.__customServices[name];
|
|
@@ -11,7 +11,7 @@ import useScroll from "../../services/scroll.js";
|
|
|
11
11
|
import useKey from "../../services/key.js";
|
|
12
12
|
import useLoad from "../../services/load.js";
|
|
13
13
|
import AbstractManager from "./AbstractManager.js";
|
|
14
|
-
import { noop, isFunction } from "../../utils/index.js";
|
|
14
|
+
import { noop, isFunction, isDefined, isDev } from "../../utils/index.js";
|
|
15
15
|
const SERVICES_MAP = {
|
|
16
16
|
scrolled: useScroll,
|
|
17
17
|
resized: useResize,
|
|
@@ -73,7 +73,7 @@ class ServicesManager extends AbstractManager {
|
|
|
73
73
|
remove(this.__base.$id);
|
|
74
74
|
}
|
|
75
75
|
toggle(service, force) {
|
|
76
|
-
if (
|
|
76
|
+
if (isDefined(force)) {
|
|
77
77
|
if (force && !this.has(service)) {
|
|
78
78
|
this.enable(service);
|
|
79
79
|
}
|
|
@@ -92,7 +92,10 @@ class ServicesManager extends AbstractManager {
|
|
|
92
92
|
}
|
|
93
93
|
unregister(name) {
|
|
94
94
|
if (SERVICE_NAMES.includes(name)) {
|
|
95
|
-
|
|
95
|
+
if (isDev) {
|
|
96
|
+
throw new Error(`[ServicesManager] The \`${name}\` core service can not be unregistered.`);
|
|
97
|
+
}
|
|
98
|
+
return;
|
|
96
99
|
}
|
|
97
100
|
this.__base.__removeEmits(name);
|
|
98
101
|
delete this.__customServices[name];
|
package/Base/utils.cjs
CHANGED
|
@@ -19,9 +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
|
-
|
|
22
|
+
eventIsDefinedInConfig: () => eventIsDefinedInConfig,
|
|
23
|
+
eventIsNative: () => eventIsNative,
|
|
24
|
+
getComponentElements: () => getComponentElements,
|
|
25
|
+
getEventTarget: () => getEventTarget
|
|
23
26
|
});
|
|
24
27
|
module.exports = __toCommonJS(utils_exports);
|
|
28
|
+
var import_utils = require("../utils/index.cjs");
|
|
25
29
|
function getComponentElements(nameOrSelector, element = document) {
|
|
26
30
|
const selector = `[data-component="${nameOrSelector}"]`;
|
|
27
31
|
let elements = [];
|
|
@@ -34,4 +38,22 @@ function getComponentElements(nameOrSelector, element = document) {
|
|
|
34
38
|
}
|
|
35
39
|
return elements;
|
|
36
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
|
+
}
|
|
37
59
|
if (module.exports.default) module.exports = module.exports.default;
|
package/Base/utils.d.ts
CHANGED
|
@@ -12,4 +12,29 @@
|
|
|
12
12
|
* A list of elements on which the component should be mounted.
|
|
13
13
|
*/
|
|
14
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'];
|
|
15
40
|
export type Base = import('./index.js').default;
|
package/Base/utils.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { isArray, isDefined, isDev } from "../utils/index.js";
|
|
1
2
|
function getComponentElements(nameOrSelector, element = document) {
|
|
2
3
|
const selector = `[data-component="${nameOrSelector}"]`;
|
|
3
4
|
let elements = [];
|
|
@@ -10,6 +11,27 @@ function getComponentElements(nameOrSelector, element = document) {
|
|
|
10
11
|
}
|
|
11
12
|
return elements;
|
|
12
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
|
+
}
|
|
13
32
|
export {
|
|
14
|
-
|
|
33
|
+
eventIsDefinedInConfig,
|
|
34
|
+
eventIsNative,
|
|
35
|
+
getComponentElements,
|
|
36
|
+
getEventTarget
|
|
15
37
|
};
|
package/README.md
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
[](https://david-dm.org/studiometa/js-toolkit)
|
|
6
6
|

|
|
7
7
|
|
|
8
|
-
> A
|
|
8
|
+
> A JavaScript data-attributes driven micro-framework shipped with plenty of useful utility functions to boost your project.
|
|
9
9
|
|
|
10
10
|
## Installation
|
|
11
11
|
|
|
@@ -15,9 +15,9 @@ Install the latest version via NPM:
|
|
|
15
15
|
npm install @studiometa/js-toolkit
|
|
16
16
|
```
|
|
17
17
|
|
|
18
|
-
##
|
|
18
|
+
## What is it?
|
|
19
19
|
|
|
20
|
-
This project
|
|
20
|
+
This project is a JavaScript micro-framework (along with its utility functions) whose main objectives are:
|
|
21
21
|
|
|
22
22
|
- Enforcing best-practice and consistency between projects
|
|
23
23
|
- Using elements from the DOM easily
|
|
@@ -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
|
});
|
|
@@ -31,6 +31,7 @@ __export(withBreakpointObserver_exports, {
|
|
|
31
31
|
});
|
|
32
32
|
module.exports = __toCommonJS(withBreakpointObserver_exports);
|
|
33
33
|
var import_resize = __toESM(require("../services/resize.cjs"), 1);
|
|
34
|
+
var import_utils = require("../utils/index.cjs");
|
|
34
35
|
function testBreakpoints(instance, breakpoint = (0, import_resize.default)().props().breakpoint) {
|
|
35
36
|
const { activeBreakpoints, inactiveBreakpoints } = instance.$options;
|
|
36
37
|
const isInActiveBreakpoint = activeBreakpoints && activeBreakpoints.split(" ").includes(breakpoint);
|
|
@@ -51,7 +52,9 @@ function testConflictingBreakpointConfiguration(instance) {
|
|
|
51
52
|
}
|
|
52
53
|
}
|
|
53
54
|
function addToResize(key, instance) {
|
|
54
|
-
|
|
55
|
+
if (import_utils.isDev) {
|
|
56
|
+
testConflictingBreakpointConfiguration(instance);
|
|
57
|
+
}
|
|
55
58
|
const { add, has } = (0, import_resize.default)();
|
|
56
59
|
if (!has(key)) {
|
|
57
60
|
add(key, function onResize({ breakpoint }) {
|
|
@@ -72,7 +75,10 @@ function withBreakpointObserver(BaseClass) {
|
|
|
72
75
|
const { remove, props } = (0, import_resize.default)();
|
|
73
76
|
const { name } = this.$options;
|
|
74
77
|
if (!props().breakpoint) {
|
|
75
|
-
|
|
78
|
+
if (import_utils.isDev) {
|
|
79
|
+
throw new Error(`[${name}] The \`BreakpointObserver\` class requires breakpoints to be defined.`);
|
|
80
|
+
}
|
|
81
|
+
return;
|
|
76
82
|
}
|
|
77
83
|
const key = `BreakpointObserver-${this.$id}`;
|
|
78
84
|
const mutationObserver = new MutationObserver(([mutation]) => {
|
|
@@ -5,6 +5,7 @@ var __publicField = (obj, key, value) => {
|
|
|
5
5
|
return value;
|
|
6
6
|
};
|
|
7
7
|
import useResize from "../services/resize.js";
|
|
8
|
+
import { isDev } from "../utils/index.js";
|
|
8
9
|
function testBreakpoints(instance, breakpoint = useResize().props().breakpoint) {
|
|
9
10
|
const { activeBreakpoints, inactiveBreakpoints } = instance.$options;
|
|
10
11
|
const isInActiveBreakpoint = activeBreakpoints && activeBreakpoints.split(" ").includes(breakpoint);
|
|
@@ -25,7 +26,9 @@ function testConflictingBreakpointConfiguration(instance) {
|
|
|
25
26
|
}
|
|
26
27
|
}
|
|
27
28
|
function addToResize(key, instance) {
|
|
28
|
-
|
|
29
|
+
if (isDev) {
|
|
30
|
+
testConflictingBreakpointConfiguration(instance);
|
|
31
|
+
}
|
|
29
32
|
const { add, has } = useResize();
|
|
30
33
|
if (!has(key)) {
|
|
31
34
|
add(key, function onResize({ breakpoint }) {
|
|
@@ -46,7 +49,10 @@ function withBreakpointObserver(BaseClass) {
|
|
|
46
49
|
const { remove, props } = useResize();
|
|
47
50
|
const { name } = this.$options;
|
|
48
51
|
if (!props().breakpoint) {
|
|
49
|
-
|
|
52
|
+
if (isDev) {
|
|
53
|
+
throw new Error(`[${name}] The \`BreakpointObserver\` class requires breakpoints to be defined.`);
|
|
54
|
+
}
|
|
55
|
+
return;
|
|
50
56
|
}
|
|
51
57
|
const key = `BreakpointObserver-${this.$id}`;
|
|
52
58
|
const mutationObserver = new MutationObserver(([mutation]) => {
|
package/decorators/withVue2.cjs
CHANGED
|
@@ -27,6 +27,7 @@ __export(withVue2_exports, {
|
|
|
27
27
|
default: () => withVue2_default
|
|
28
28
|
});
|
|
29
29
|
module.exports = __toCommonJS(withVue2_exports);
|
|
30
|
+
var import_utils = require("../utils/index.cjs");
|
|
30
31
|
var withVue2_default = (BaseClass, Vue) => {
|
|
31
32
|
var _a, _b, _c;
|
|
32
33
|
return _c = class extends BaseClass {
|
|
@@ -36,10 +37,16 @@ var withVue2_default = (BaseClass, Vue) => {
|
|
|
36
37
|
__publicField(this, "$vue");
|
|
37
38
|
const vueConfig = (_a2 = this.vueConfig) != null ? _a2 : this.constructor.vueConfig;
|
|
38
39
|
if (!vueConfig) {
|
|
39
|
-
|
|
40
|
+
if (import_utils.isDev) {
|
|
41
|
+
throw new Error("[withVue] You must define a `vueConfig` object.");
|
|
42
|
+
}
|
|
43
|
+
return;
|
|
40
44
|
}
|
|
41
|
-
if (
|
|
42
|
-
|
|
45
|
+
if (!(0, import_utils.isFunction)(vueConfig.render)) {
|
|
46
|
+
if (import_utils.isDev) {
|
|
47
|
+
throw new Error("[withVue] You must define a `render` function in vueConfig.");
|
|
48
|
+
}
|
|
49
|
+
return;
|
|
43
50
|
}
|
|
44
51
|
this.$vue = new Vue(vueConfig);
|
|
45
52
|
this.$on("mounted", () => {
|