@studiometa/js-toolkit 2.0.0-beta.1 → 2.0.0-beta.13
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 +294 -0
- package/Base/index.d.ts +27 -1
- package/Base/index.js +149 -179
- package/Base/managers/ChildrenManager.cjs +124 -0
- package/Base/managers/ChildrenManager.js +29 -55
- package/Base/managers/EventsManager.cjs +184 -0
- package/Base/managers/EventsManager.d.ts +3 -1
- package/Base/managers/EventsManager.js +85 -127
- package/Base/managers/OptionsManager.cjs +175 -0
- package/Base/managers/OptionsManager.d.ts +2 -0
- package/Base/managers/OptionsManager.js +46 -88
- package/Base/managers/RefsManager.cjs +98 -0
- package/Base/managers/RefsManager.d.ts +2 -0
- package/Base/managers/RefsManager.js +24 -35
- package/Base/managers/ServicesManager.cjs +132 -0
- package/Base/managers/ServicesManager.d.ts +29 -4
- package/Base/managers/ServicesManager.js +33 -63
- package/Base/utils.cjs +45 -0
- package/Base/utils.js +12 -11
- package/README.md +13 -70
- package/decorators/index.cjs +49 -0
- package/decorators/index.d.ts +8 -9
- package/decorators/index.js +18 -9
- package/decorators/withBreakpointManager.cjs +91 -0
- package/decorators/withBreakpointManager.js +18 -39
- package/decorators/withBreakpointObserver.cjs +116 -0
- package/decorators/withBreakpointObserver.js +40 -88
- package/decorators/withDrag.cjs +54 -0
- package/decorators/withDrag.js +16 -18
- package/decorators/withExtraConfig.cjs +44 -0
- package/decorators/withExtraConfig.js +11 -12
- package/decorators/withIntersectionObserver.cjs +61 -0
- package/decorators/withIntersectionObserver.js +23 -31
- package/decorators/withMountWhenInView.cjs +68 -0
- package/decorators/withMountWhenInView.js +31 -55
- package/decorators/withScrolledInView.cjs +112 -0
- package/decorators/withScrolledInView.d.ts +4 -1
- package/decorators/withScrolledInView.js +77 -73
- package/decorators/withVue2.cjs +60 -0
- package/decorators/withVue2.js +21 -32
- package/helpers/createApp.cjs +56 -0
- package/helpers/createApp.js +12 -12
- package/helpers/importOnInteraction.cjs +56 -0
- package/helpers/importOnInteraction.js +17 -18
- package/helpers/importWhenIdle.cjs +52 -0
- package/helpers/importWhenIdle.js +13 -17
- package/helpers/importWhenVisible.cjs +54 -0
- package/helpers/importWhenVisible.js +16 -18
- package/helpers/index.cjs +41 -0
- package/helpers/index.d.ts +4 -5
- package/helpers/index.js +10 -5
- package/helpers/utils.cjs +39 -0
- package/helpers/utils.js +7 -6
- package/index.cjs +38 -0
- package/index.d.ts +4 -21
- package/index.js +7 -5
- package/package.json +14 -3
- package/services/Service.cjs +75 -0
- package/services/Service.d.ts +22 -17
- package/services/Service.js +14 -28
- package/services/drag.cjs +194 -0
- package/services/drag.d.ts +4 -18
- package/services/drag.js +103 -156
- package/services/index.cjs +47 -0
- package/services/index.d.ts +13 -10
- package/services/index.js +16 -8
- package/services/key.cjs +101 -0
- package/services/key.d.ts +4 -13
- package/services/key.js +58 -77
- package/services/load.cjs +70 -0
- package/services/load.d.ts +3 -13
- package/services/load.js +31 -36
- package/services/pointer.cjs +159 -0
- package/services/pointer.d.ts +4 -13
- package/services/pointer.js +91 -121
- package/services/raf.cjs +81 -0
- package/services/raf.d.ts +3 -13
- package/services/raf.js +32 -52
- package/services/resize.cjs +106 -0
- package/services/resize.d.ts +3 -13
- package/services/resize.js +52 -52
- package/services/scroll.cjs +129 -0
- package/services/scroll.d.ts +3 -13
- package/services/scroll.js +75 -89
- package/utils/collide/boundingRectToCircle.cjs +38 -0
- package/utils/collide/boundingRectToCircle.d.ts +1 -1
- package/utils/collide/boundingRectToCircle.js +7 -10
- package/utils/collide/collideCircleCircle.cjs +38 -0
- package/utils/collide/collideCircleCircle.js +8 -7
- package/utils/collide/collideCircleRect.cjs +50 -0
- package/utils/collide/collideCircleRect.js +10 -12
- package/utils/collide/collidePointCircle.cjs +35 -0
- package/utils/collide/collidePointCircle.js +8 -5
- package/utils/collide/collidePointRect.cjs +32 -0
- package/utils/collide/collidePointRect.js +5 -2
- package/utils/collide/collideRectRect.cjs +32 -0
- package/utils/collide/collideRectRect.js +5 -2
- package/utils/collide/index.cjs +45 -0
- package/utils/collide/index.d.ts +6 -7
- package/utils/collide/index.js +14 -7
- package/utils/css/classes.cjs +48 -0
- package/utils/css/classes.js +13 -12
- package/utils/css/index.cjs +41 -0
- package/utils/css/index.d.ts +4 -5
- package/utils/css/index.js +10 -5
- package/utils/css/matrix.cjs +33 -0
- package/utils/css/matrix.js +6 -5
- package/utils/css/styles.cjs +51 -0
- package/utils/css/styles.js +13 -12
- package/utils/css/transition.cjs +121 -0
- package/utils/css/transition.js +62 -117
- package/utils/debounce.cjs +38 -0
- package/utils/debounce.js +7 -9
- package/utils/focusTrap.cjs +88 -0
- package/utils/focusTrap.js +30 -21
- package/utils/history.cjs +95 -0
- package/utils/history.js +28 -57
- package/utils/index.cjs +57 -0
- package/utils/index.d.ts +12 -35
- package/utils/index.js +30 -17
- package/utils/keyCodes.cjs +39 -0
- package/utils/keyCodes.js +5 -2
- package/utils/math/clamp.cjs +32 -0
- package/utils/math/clamp.js +5 -2
- package/utils/math/clamp01.cjs +38 -0
- package/utils/math/clamp01.js +6 -3
- package/utils/math/damp.cjs +32 -0
- package/utils/math/damp.js +5 -4
- package/utils/math/ease.cjs +92 -0
- package/utils/math/ease.d.ts +78 -0
- package/utils/math/ease.js +66 -0
- package/utils/math/index.cjs +48 -0
- package/utils/math/index.d.ts +8 -8
- package/utils/math/index.js +17 -8
- package/utils/math/inertiaFinalValue.cjs +41 -0
- package/utils/math/inertiaFinalValue.js +8 -10
- package/utils/math/lerp.cjs +32 -0
- package/utils/math/lerp.js +5 -2
- package/utils/math/map.cjs +32 -0
- package/utils/math/map.js +5 -2
- package/utils/math/round.cjs +32 -0
- package/utils/math/round.js +5 -3
- package/utils/memoize.cjs +47 -0
- package/utils/memoize.js +10 -19
- package/utils/nextFrame.cjs +44 -0
- package/utils/nextFrame.js +14 -9
- package/utils/object/autoBind.cjs +55 -0
- package/utils/object/autoBind.js +12 -22
- package/utils/object/getAllProperties.cjs +41 -0
- package/utils/object/getAllProperties.js +11 -14
- package/utils/object/index.cjs +39 -0
- package/utils/object/index.d.ts +3 -4
- package/utils/object/index.js +8 -4
- package/utils/object/isObject.cjs +32 -0
- package/utils/object/isObject.js +6 -3
- package/utils/scrollTo.cjs +86 -0
- package/utils/scrollTo.js +20 -40
- package/utils/string/index.cjs +53 -0
- package/utils/string/index.d.ts +10 -11
- package/utils/string/index.js +22 -11
- package/utils/string/withLeadingCharacters.cjs +38 -0
- package/utils/string/withLeadingCharacters.js +7 -4
- package/utils/string/withLeadingSlash.cjs +38 -0
- package/utils/string/withLeadingSlash.js +7 -4
- package/utils/string/withTrailingCharacters.cjs +38 -0
- package/utils/string/withTrailingCharacters.js +7 -4
- package/utils/string/withTrailingSlash.cjs +38 -0
- package/utils/string/withTrailingSlash.js +7 -4
- package/utils/string/withoutLeadingCharacters.cjs +32 -0
- package/utils/string/withoutLeadingCharacters.js +6 -3
- package/utils/string/withoutLeadingCharactersRecursive.cjs +43 -0
- package/utils/string/withoutLeadingCharactersRecursive.js +8 -7
- package/utils/string/withoutLeadingSlash.cjs +38 -0
- package/utils/string/withoutLeadingSlash.js +7 -4
- package/utils/string/withoutTrailingCharacters.cjs +32 -0
- package/utils/string/withoutTrailingCharacters.js +6 -3
- package/utils/string/withoutTrailingCharactersRecursive.cjs +43 -0
- package/utils/string/withoutTrailingCharactersRecursive.js +8 -7
- package/utils/string/withoutTrailingSlash.cjs +38 -0
- package/utils/string/withoutTrailingSlash.js +7 -4
- package/utils/throttle.cjs +40 -0
- package/utils/throttle.js +9 -9
- package/index.modern.js +0 -1
- package/index.umd.js +0 -1
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __reExport = (target, module2, copyDefault, desc) => {
|
|
13
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(module2))
|
|
15
|
+
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return target;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (module2, isNodeMode) => {
|
|
21
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
+
};
|
|
23
|
+
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
+
return (module2, temp) => {
|
|
25
|
+
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
+
};
|
|
27
|
+
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
+
|
|
29
|
+
// packages/js-toolkit/decorators/withBreakpointManager.js
|
|
30
|
+
var withBreakpointManager_exports = {};
|
|
31
|
+
__export(withBreakpointManager_exports, {
|
|
32
|
+
default: () => withBreakpointManager
|
|
33
|
+
});
|
|
34
|
+
var import_resize = __toESM(require("../services/resize.cjs"), 1);
|
|
35
|
+
function testBreakpoints(breakpoints) {
|
|
36
|
+
const { breakpoint } = (0, import_resize.default)().props();
|
|
37
|
+
breakpoints.forEach(([breakpointKeys, instance]) => {
|
|
38
|
+
if (breakpointKeys.includes(breakpoint) && !instance.$isMounted) {
|
|
39
|
+
setTimeout(() => instance.$mount(), 0);
|
|
40
|
+
} else if (!breakpointKeys.includes(breakpoint) && instance.$isMounted) {
|
|
41
|
+
instance.$destroy();
|
|
42
|
+
}
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
function mountComponents(instance, breakpoints) {
|
|
46
|
+
return breakpoints.map(([bk, ComponentClass]) => {
|
|
47
|
+
const child = new ComponentClass(instance.$el);
|
|
48
|
+
Object.defineProperty(child, "$parent", { get: () => instance.$parent });
|
|
49
|
+
return [bk, child];
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
var instances = /* @__PURE__ */ new WeakMap();
|
|
53
|
+
function withBreakpointManager(BaseClass, breakpoints) {
|
|
54
|
+
if (!Array.isArray(breakpoints)) {
|
|
55
|
+
throw new Error("[withBreakpointManager] The `breakpoints` parameter must be an array.");
|
|
56
|
+
}
|
|
57
|
+
if (breakpoints.length < 2) {
|
|
58
|
+
throw new Error("[withBreakpointManager] You must define at least 2 breakpoints.");
|
|
59
|
+
}
|
|
60
|
+
const { add, props } = (0, import_resize.default)();
|
|
61
|
+
if (!props().breakpoint) {
|
|
62
|
+
throw new Error(`The \`BreakpointManager\` class requires breakpoints to be defined.`);
|
|
63
|
+
}
|
|
64
|
+
return class extends BaseClass {
|
|
65
|
+
constructor(element) {
|
|
66
|
+
super(element);
|
|
67
|
+
if (!instances.has(this)) {
|
|
68
|
+
instances.set(this, mountComponents(this, breakpoints));
|
|
69
|
+
}
|
|
70
|
+
add(`BreakpointManager-${this.$id}`, () => {
|
|
71
|
+
testBreakpoints(instances.get(this));
|
|
72
|
+
});
|
|
73
|
+
this.instances = instances.get(this);
|
|
74
|
+
return this;
|
|
75
|
+
}
|
|
76
|
+
$mount() {
|
|
77
|
+
super.$mount();
|
|
78
|
+
testBreakpoints(instances.get(this));
|
|
79
|
+
return this;
|
|
80
|
+
}
|
|
81
|
+
$destroy() {
|
|
82
|
+
if (Array.isArray(instances.get(this))) {
|
|
83
|
+
instances.get(this).forEach(([, instance]) => {
|
|
84
|
+
instance.$destroy();
|
|
85
|
+
});
|
|
86
|
+
}
|
|
87
|
+
return super.$destroy();
|
|
88
|
+
}
|
|
89
|
+
};
|
|
90
|
+
}
|
|
91
|
+
module.exports = __toCommonJS(withBreakpointManager_exports);
|
|
@@ -1,12 +1,7 @@
|
|
|
1
|
-
import useResize from
|
|
2
|
-
|
|
1
|
+
import useResize from "../services/resize.js";
|
|
3
2
|
function testBreakpoints(breakpoints) {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
} = useResize().props();
|
|
7
|
-
breakpoints.forEach(_ref => {
|
|
8
|
-
var [breakpointKeys, instance] = _ref;
|
|
9
|
-
|
|
3
|
+
const { breakpoint } = useResize().props();
|
|
4
|
+
breakpoints.forEach(([breakpointKeys, instance]) => {
|
|
10
5
|
if (breakpointKeys.includes(breakpoint) && !instance.$isMounted) {
|
|
11
6
|
setTimeout(() => instance.$mount(), 0);
|
|
12
7
|
} else if (!breakpointKeys.includes(breakpoint) && instance.$isMounted) {
|
|
@@ -14,68 +9,52 @@ function testBreakpoints(breakpoints) {
|
|
|
14
9
|
}
|
|
15
10
|
});
|
|
16
11
|
}
|
|
17
|
-
|
|
18
12
|
function mountComponents(instance, breakpoints) {
|
|
19
|
-
return breakpoints.map(
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
Object.defineProperty(child, '$parent', {
|
|
23
|
-
get: () => instance.$parent
|
|
24
|
-
});
|
|
13
|
+
return breakpoints.map(([bk, ComponentClass]) => {
|
|
14
|
+
const child = new ComponentClass(instance.$el);
|
|
15
|
+
Object.defineProperty(child, "$parent", { get: () => instance.$parent });
|
|
25
16
|
return [bk, child];
|
|
26
17
|
});
|
|
27
18
|
}
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
export default function withBreakpointManager(BaseClass, breakpoints) {
|
|
19
|
+
const instances = /* @__PURE__ */ new WeakMap();
|
|
20
|
+
function withBreakpointManager(BaseClass, breakpoints) {
|
|
31
21
|
if (!Array.isArray(breakpoints)) {
|
|
32
|
-
throw new Error(
|
|
22
|
+
throw new Error("[withBreakpointManager] The `breakpoints` parameter must be an array.");
|
|
33
23
|
}
|
|
34
|
-
|
|
35
24
|
if (breakpoints.length < 2) {
|
|
36
|
-
throw new Error(
|
|
25
|
+
throw new Error("[withBreakpointManager] You must define at least 2 breakpoints.");
|
|
37
26
|
}
|
|
38
|
-
|
|
39
|
-
var {
|
|
40
|
-
add,
|
|
41
|
-
props
|
|
42
|
-
} = useResize();
|
|
43
|
-
|
|
27
|
+
const { add, props } = useResize();
|
|
44
28
|
if (!props().breakpoint) {
|
|
45
|
-
throw new Error(
|
|
29
|
+
throw new Error(`The \`BreakpointManager\` class requires breakpoints to be defined.`);
|
|
46
30
|
}
|
|
47
|
-
|
|
48
31
|
return class extends BaseClass {
|
|
49
32
|
constructor(element) {
|
|
50
33
|
super(element);
|
|
51
|
-
|
|
52
34
|
if (!instances.has(this)) {
|
|
53
35
|
instances.set(this, mountComponents(this, breakpoints));
|
|
54
36
|
}
|
|
55
|
-
|
|
56
|
-
add("BreakpointManager-".concat(this.$id), () => {
|
|
37
|
+
add(`BreakpointManager-${this.$id}`, () => {
|
|
57
38
|
testBreakpoints(instances.get(this));
|
|
58
39
|
});
|
|
59
40
|
this.instances = instances.get(this);
|
|
60
41
|
return this;
|
|
61
42
|
}
|
|
62
|
-
|
|
63
43
|
$mount() {
|
|
64
44
|
super.$mount();
|
|
65
45
|
testBreakpoints(instances.get(this));
|
|
66
46
|
return this;
|
|
67
47
|
}
|
|
68
|
-
|
|
69
48
|
$destroy() {
|
|
70
49
|
if (Array.isArray(instances.get(this))) {
|
|
71
|
-
instances.get(this).forEach(
|
|
72
|
-
var [, instance] = _ref3;
|
|
50
|
+
instances.get(this).forEach(([, instance]) => {
|
|
73
51
|
instance.$destroy();
|
|
74
52
|
});
|
|
75
53
|
}
|
|
76
|
-
|
|
77
54
|
return super.$destroy();
|
|
78
55
|
}
|
|
79
|
-
|
|
80
56
|
};
|
|
81
|
-
}
|
|
57
|
+
}
|
|
58
|
+
export {
|
|
59
|
+
withBreakpointManager as default
|
|
60
|
+
};
|
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __reExport = (target, module2, copyDefault, desc) => {
|
|
13
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(module2))
|
|
15
|
+
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return target;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (module2, isNodeMode) => {
|
|
21
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
+
};
|
|
23
|
+
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
+
return (module2, temp) => {
|
|
25
|
+
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
+
};
|
|
27
|
+
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
+
|
|
29
|
+
// packages/js-toolkit/decorators/withBreakpointObserver.js
|
|
30
|
+
var withBreakpointObserver_exports = {};
|
|
31
|
+
__export(withBreakpointObserver_exports, {
|
|
32
|
+
default: () => withBreakpointObserver
|
|
33
|
+
});
|
|
34
|
+
var import_resize = __toESM(require("../services/resize.cjs"), 1);
|
|
35
|
+
function testBreakpoints(instance, breakpoint = (0, import_resize.default)().props().breakpoint) {
|
|
36
|
+
const { activeBreakpoints, inactiveBreakpoints } = instance.$options;
|
|
37
|
+
const isInActiveBreakpoint = activeBreakpoints && activeBreakpoints.split(" ").includes(breakpoint);
|
|
38
|
+
const isInInactiveBreakpoint = inactiveBreakpoints && inactiveBreakpoints.split(" ").includes(breakpoint);
|
|
39
|
+
if (activeBreakpoints && isInActiveBreakpoint || inactiveBreakpoints && !isInInactiveBreakpoint) {
|
|
40
|
+
return "$mount";
|
|
41
|
+
}
|
|
42
|
+
return "$destroy";
|
|
43
|
+
}
|
|
44
|
+
function hasBreakpointConfiguration(instance) {
|
|
45
|
+
const { activeBreakpoints, inactiveBreakpoints } = instance.$options;
|
|
46
|
+
return Boolean(activeBreakpoints || inactiveBreakpoints);
|
|
47
|
+
}
|
|
48
|
+
function testConflictingBreakpointConfiguration(instance) {
|
|
49
|
+
const { activeBreakpoints, inactiveBreakpoints, name } = instance.$options;
|
|
50
|
+
if (activeBreakpoints && inactiveBreakpoints) {
|
|
51
|
+
throw new Error(`[${name}] Incorrect configuration: the \`activeBreakpoints\` and \`inactiveBreakpoints\` are not compatible.`);
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
function addToResize(key, instance) {
|
|
55
|
+
testConflictingBreakpointConfiguration(instance);
|
|
56
|
+
const { add, has } = (0, import_resize.default)();
|
|
57
|
+
if (!has(key)) {
|
|
58
|
+
add(key, function onResize({ breakpoint }) {
|
|
59
|
+
const action = testBreakpoints(instance, breakpoint);
|
|
60
|
+
if (action === "$destroy" && instance.$isMounted) {
|
|
61
|
+
instance[action]();
|
|
62
|
+
} else if (action === "$mount" && !instance.$isMounted) {
|
|
63
|
+
setTimeout(() => instance[action](), 0);
|
|
64
|
+
}
|
|
65
|
+
});
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
function withBreakpointObserver(BaseClass) {
|
|
69
|
+
return class extends BaseClass {
|
|
70
|
+
static config = {
|
|
71
|
+
...BaseClass.config || {},
|
|
72
|
+
name: `${BaseClass?.config?.name ?? ""}WithBreakpointObserver`,
|
|
73
|
+
options: {
|
|
74
|
+
...BaseClass?.config?.options || {},
|
|
75
|
+
activeBreakpoints: String,
|
|
76
|
+
inactiveBreakpoints: String
|
|
77
|
+
}
|
|
78
|
+
};
|
|
79
|
+
constructor(element) {
|
|
80
|
+
super(element);
|
|
81
|
+
const { remove, props } = (0, import_resize.default)();
|
|
82
|
+
const { name } = this.$options;
|
|
83
|
+
if (!props().breakpoint) {
|
|
84
|
+
throw new Error(`[${name}] The \`BreakpointObserver\` class requires breakpoints to be defined.`);
|
|
85
|
+
}
|
|
86
|
+
const key = `BreakpointObserver-${this.$id}`;
|
|
87
|
+
const mutationObserver = new MutationObserver(([mutation]) => {
|
|
88
|
+
if (mutation.type === "attributes" && (mutation.attributeName === "data-options" || mutation.attributeName.startsWith("data-option-"))) {
|
|
89
|
+
if (!hasBreakpointConfiguration(this)) {
|
|
90
|
+
this.$mount();
|
|
91
|
+
remove(key);
|
|
92
|
+
return;
|
|
93
|
+
}
|
|
94
|
+
addToResize(key, this);
|
|
95
|
+
}
|
|
96
|
+
});
|
|
97
|
+
mutationObserver.observe(this.$el, { attributes: true });
|
|
98
|
+
if (!hasBreakpointConfiguration(this)) {
|
|
99
|
+
return this;
|
|
100
|
+
}
|
|
101
|
+
addToResize(key, this);
|
|
102
|
+
return this;
|
|
103
|
+
}
|
|
104
|
+
$mount() {
|
|
105
|
+
if (!hasBreakpointConfiguration(this)) {
|
|
106
|
+
return super.$mount();
|
|
107
|
+
}
|
|
108
|
+
const action = testBreakpoints(this);
|
|
109
|
+
if (action === "$mount") {
|
|
110
|
+
return super.$mount();
|
|
111
|
+
}
|
|
112
|
+
return this;
|
|
113
|
+
}
|
|
114
|
+
};
|
|
115
|
+
}
|
|
116
|
+
module.exports = __toCommonJS(withBreakpointObserver_exports);
|
|
@@ -1,133 +1,85 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
import useResize from '../services/resize.js';
|
|
8
|
-
|
|
9
|
-
function testBreakpoints(instance) {
|
|
10
|
-
var breakpoint = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : useResize().props().breakpoint;
|
|
11
|
-
var {
|
|
12
|
-
activeBreakpoints,
|
|
13
|
-
inactiveBreakpoints
|
|
14
|
-
} = instance.$options;
|
|
15
|
-
var isInActiveBreakpoint = activeBreakpoints && activeBreakpoints.split(' ').includes(breakpoint);
|
|
16
|
-
var isInInactiveBreakpoint = inactiveBreakpoints && inactiveBreakpoints.split(' ').includes(breakpoint);
|
|
17
|
-
|
|
1
|
+
import useResize from "../services/resize.js";
|
|
2
|
+
function testBreakpoints(instance, breakpoint = useResize().props().breakpoint) {
|
|
3
|
+
const { activeBreakpoints, inactiveBreakpoints } = instance.$options;
|
|
4
|
+
const isInActiveBreakpoint = activeBreakpoints && activeBreakpoints.split(" ").includes(breakpoint);
|
|
5
|
+
const isInInactiveBreakpoint = inactiveBreakpoints && inactiveBreakpoints.split(" ").includes(breakpoint);
|
|
18
6
|
if (activeBreakpoints && isInActiveBreakpoint || inactiveBreakpoints && !isInInactiveBreakpoint) {
|
|
19
|
-
return
|
|
7
|
+
return "$mount";
|
|
20
8
|
}
|
|
21
|
-
|
|
22
|
-
return '$destroy';
|
|
9
|
+
return "$destroy";
|
|
23
10
|
}
|
|
24
|
-
|
|
25
11
|
function hasBreakpointConfiguration(instance) {
|
|
26
|
-
|
|
27
|
-
activeBreakpoints,
|
|
28
|
-
inactiveBreakpoints
|
|
29
|
-
} = instance.$options;
|
|
12
|
+
const { activeBreakpoints, inactiveBreakpoints } = instance.$options;
|
|
30
13
|
return Boolean(activeBreakpoints || inactiveBreakpoints);
|
|
31
14
|
}
|
|
32
|
-
|
|
33
15
|
function testConflictingBreakpointConfiguration(instance) {
|
|
34
|
-
|
|
35
|
-
activeBreakpoints,
|
|
36
|
-
inactiveBreakpoints,
|
|
37
|
-
name
|
|
38
|
-
} = instance.$options;
|
|
39
|
-
|
|
16
|
+
const { activeBreakpoints, inactiveBreakpoints, name } = instance.$options;
|
|
40
17
|
if (activeBreakpoints && inactiveBreakpoints) {
|
|
41
|
-
throw new Error(
|
|
18
|
+
throw new Error(`[${name}] Incorrect configuration: the \`activeBreakpoints\` and \`inactiveBreakpoints\` are not compatible.`);
|
|
42
19
|
}
|
|
43
20
|
}
|
|
44
|
-
|
|
45
21
|
function addToResize(key, instance) {
|
|
46
22
|
testConflictingBreakpointConfiguration(instance);
|
|
47
|
-
|
|
48
|
-
add,
|
|
49
|
-
has
|
|
50
|
-
} = useResize();
|
|
51
|
-
|
|
23
|
+
const { add, has } = useResize();
|
|
52
24
|
if (!has(key)) {
|
|
53
|
-
add(key, function onResize(
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
} = _ref;
|
|
57
|
-
var action = testBreakpoints(instance, breakpoint);
|
|
58
|
-
|
|
59
|
-
if (action === '$destroy' && instance.$isMounted) {
|
|
25
|
+
add(key, function onResize({ breakpoint }) {
|
|
26
|
+
const action = testBreakpoints(instance, breakpoint);
|
|
27
|
+
if (action === "$destroy" && instance.$isMounted) {
|
|
60
28
|
instance[action]();
|
|
61
|
-
} else if (action ===
|
|
29
|
+
} else if (action === "$mount" && !instance.$isMounted) {
|
|
62
30
|
setTimeout(() => instance[action](), 0);
|
|
63
31
|
}
|
|
64
32
|
});
|
|
65
33
|
}
|
|
66
34
|
}
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
35
|
+
function withBreakpointObserver(BaseClass) {
|
|
36
|
+
return class extends BaseClass {
|
|
37
|
+
static config = {
|
|
38
|
+
...BaseClass.config || {},
|
|
39
|
+
name: `${BaseClass?.config?.name ?? ""}WithBreakpointObserver`,
|
|
40
|
+
options: {
|
|
41
|
+
...BaseClass?.config?.options || {},
|
|
42
|
+
activeBreakpoints: String,
|
|
43
|
+
inactiveBreakpoints: String
|
|
44
|
+
}
|
|
45
|
+
};
|
|
72
46
|
constructor(element) {
|
|
73
47
|
super(element);
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
props
|
|
77
|
-
} = useResize();
|
|
78
|
-
var {
|
|
79
|
-
name
|
|
80
|
-
} = this.$options;
|
|
81
|
-
|
|
48
|
+
const { remove, props } = useResize();
|
|
49
|
+
const { name } = this.$options;
|
|
82
50
|
if (!props().breakpoint) {
|
|
83
|
-
throw new Error(
|
|
51
|
+
throw new Error(`[${name}] The \`BreakpointObserver\` class requires breakpoints to be defined.`);
|
|
84
52
|
}
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
var [mutation] = _ref2;
|
|
89
|
-
|
|
90
|
-
if (mutation.type === 'attributes' && (mutation.attributeName === 'data-options' || mutation.attributeName.startsWith('data-option-'))) {
|
|
53
|
+
const key = `BreakpointObserver-${this.$id}`;
|
|
54
|
+
const mutationObserver = new MutationObserver(([mutation]) => {
|
|
55
|
+
if (mutation.type === "attributes" && (mutation.attributeName === "data-options" || mutation.attributeName.startsWith("data-option-"))) {
|
|
91
56
|
if (!hasBreakpointConfiguration(this)) {
|
|
92
57
|
this.$mount();
|
|
93
58
|
remove(key);
|
|
94
59
|
return;
|
|
95
60
|
}
|
|
96
|
-
|
|
97
61
|
addToResize(key, this);
|
|
98
62
|
}
|
|
99
63
|
});
|
|
100
|
-
mutationObserver.observe(this.$el, {
|
|
101
|
-
attributes: true
|
|
102
|
-
});
|
|
103
|
-
|
|
64
|
+
mutationObserver.observe(this.$el, { attributes: true });
|
|
104
65
|
if (!hasBreakpointConfiguration(this)) {
|
|
105
66
|
return this;
|
|
106
67
|
}
|
|
107
|
-
|
|
108
68
|
addToResize(key, this);
|
|
109
69
|
return this;
|
|
110
70
|
}
|
|
111
|
-
|
|
112
71
|
$mount() {
|
|
113
72
|
if (!hasBreakpointConfiguration(this)) {
|
|
114
73
|
return super.$mount();
|
|
115
74
|
}
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
if (action === '$mount') {
|
|
75
|
+
const action = testBreakpoints(this);
|
|
76
|
+
if (action === "$mount") {
|
|
120
77
|
return super.$mount();
|
|
121
78
|
}
|
|
122
|
-
|
|
123
79
|
return this;
|
|
124
80
|
}
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
inactiveBreakpoints: String
|
|
131
|
-
})
|
|
132
|
-
})), _temp;
|
|
133
|
-
}
|
|
81
|
+
};
|
|
82
|
+
}
|
|
83
|
+
export {
|
|
84
|
+
withBreakpointObserver as default
|
|
85
|
+
};
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __reExport = (target, module2, copyDefault, desc) => {
|
|
13
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(module2))
|
|
15
|
+
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return target;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (module2, isNodeMode) => {
|
|
21
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
+
};
|
|
23
|
+
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
+
return (module2, temp) => {
|
|
25
|
+
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
+
};
|
|
27
|
+
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
+
|
|
29
|
+
// packages/js-toolkit/decorators/withDrag.js
|
|
30
|
+
var withDrag_exports = {};
|
|
31
|
+
__export(withDrag_exports, {
|
|
32
|
+
default: () => withDrag
|
|
33
|
+
});
|
|
34
|
+
var import_drag = __toESM(require("../services/drag.cjs"), 1);
|
|
35
|
+
function withDrag(BaseClass, { target = (instance) => instance.$el, ...options } = {}) {
|
|
36
|
+
return class extends BaseClass {
|
|
37
|
+
static config = {
|
|
38
|
+
name: `${BaseClass.config.name}WithDrag`,
|
|
39
|
+
emits: ["dragged"]
|
|
40
|
+
};
|
|
41
|
+
constructor(el) {
|
|
42
|
+
super(el);
|
|
43
|
+
this.$on("mounted", () => {
|
|
44
|
+
this.$services.register("dragged", import_drag.default.bind(void 0, target.call(this, this), options));
|
|
45
|
+
this.$services.enable("dragged");
|
|
46
|
+
});
|
|
47
|
+
this.$on("destroyed", () => {
|
|
48
|
+
this.$services.disable("dragged");
|
|
49
|
+
this.$services.unregister("dragged");
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
};
|
|
53
|
+
}
|
|
54
|
+
module.exports = __toCommonJS(withDrag_exports);
|
package/decorators/withDrag.js
CHANGED
|
@@ -1,25 +1,23 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
import useDrag from '../services/drag.js';
|
|
4
|
-
export default function withDrag(BaseClass) {
|
|
5
|
-
var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
|
|
6
|
-
{
|
|
7
|
-
target = instance => instance.$el
|
|
8
|
-
} = _ref,
|
|
9
|
-
options = _objectWithoutProperties(_ref, _excluded);
|
|
10
|
-
|
|
1
|
+
import useDrag from "../services/drag.js";
|
|
2
|
+
function withDrag(BaseClass, { target = (instance) => instance.$el, ...options } = {}) {
|
|
11
3
|
return class extends BaseClass {
|
|
4
|
+
static config = {
|
|
5
|
+
name: `${BaseClass.config.name}WithDrag`,
|
|
6
|
+
emits: ["dragged"]
|
|
7
|
+
};
|
|
12
8
|
constructor(el) {
|
|
13
9
|
super(el);
|
|
14
|
-
this.$on(
|
|
15
|
-
this.$services.register(
|
|
16
|
-
this.$services.enable(
|
|
10
|
+
this.$on("mounted", () => {
|
|
11
|
+
this.$services.register("dragged", useDrag.bind(void 0, target.call(this, this), options));
|
|
12
|
+
this.$services.enable("dragged");
|
|
17
13
|
});
|
|
18
|
-
this.$on(
|
|
19
|
-
this.$services.disable(
|
|
20
|
-
this.$services.unregister(
|
|
14
|
+
this.$on("destroyed", () => {
|
|
15
|
+
this.$services.disable("dragged");
|
|
16
|
+
this.$services.unregister("dragged");
|
|
21
17
|
});
|
|
22
18
|
}
|
|
23
|
-
|
|
24
19
|
};
|
|
25
|
-
}
|
|
20
|
+
}
|
|
21
|
+
export {
|
|
22
|
+
withDrag as default
|
|
23
|
+
};
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __reExport = (target, module2, copyDefault, desc) => {
|
|
13
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(module2))
|
|
15
|
+
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return target;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (module2, isNodeMode) => {
|
|
21
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
+
};
|
|
23
|
+
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
+
return (module2, temp) => {
|
|
25
|
+
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
+
};
|
|
27
|
+
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
+
|
|
29
|
+
// packages/js-toolkit/decorators/withExtraConfig.js
|
|
30
|
+
var withExtraConfig_exports = {};
|
|
31
|
+
__export(withExtraConfig_exports, {
|
|
32
|
+
default: () => withExtraConfig
|
|
33
|
+
});
|
|
34
|
+
var import_deepmerge = __toESM(require("deepmerge"), 1);
|
|
35
|
+
function withExtraConfig(BaseClass, config, options = {}) {
|
|
36
|
+
const newConfig = (0, import_deepmerge.default)(BaseClass.config, config, options);
|
|
37
|
+
if (newConfig.name === BaseClass.config.name) {
|
|
38
|
+
newConfig.name = `${BaseClass.config.name}WithExtraConfig`;
|
|
39
|
+
}
|
|
40
|
+
return class extends BaseClass {
|
|
41
|
+
static config = newConfig;
|
|
42
|
+
};
|
|
43
|
+
}
|
|
44
|
+
module.exports = __toCommonJS(withExtraConfig_exports);
|
|
@@ -1,14 +1,13 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
var _class, _temp;
|
|
5
|
-
|
|
6
|
-
var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
|
7
|
-
var newConfig = merge(BaseClass.config, config, options);
|
|
8
|
-
|
|
1
|
+
import merge from "deepmerge";
|
|
2
|
+
function withExtraConfig(BaseClass, config, options = {}) {
|
|
3
|
+
const newConfig = merge(BaseClass.config, config, options);
|
|
9
4
|
if (newConfig.name === BaseClass.config.name) {
|
|
10
|
-
newConfig.name =
|
|
5
|
+
newConfig.name = `${BaseClass.config.name}WithExtraConfig`;
|
|
11
6
|
}
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
}
|
|
7
|
+
return class extends BaseClass {
|
|
8
|
+
static config = newConfig;
|
|
9
|
+
};
|
|
10
|
+
}
|
|
11
|
+
export {
|
|
12
|
+
withExtraConfig as default
|
|
13
|
+
};
|