@studiometa/js-toolkit 2.0.0 → 2.2.0-alpha.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.
Files changed (72) hide show
  1. package/Base/index.cjs +55 -18
  2. package/Base/index.d.ts +23 -1
  3. package/Base/index.js +55 -18
  4. package/Base/managers/AbstractManager.cjs +56 -0
  5. package/Base/managers/AbstractManager.d.ts +44 -0
  6. package/Base/managers/AbstractManager.js +35 -0
  7. package/Base/managers/ChildrenManager.cjs +79 -100
  8. package/Base/managers/ChildrenManager.d.ts +7 -82
  9. package/Base/managers/ChildrenManager.js +76 -100
  10. package/Base/managers/EventsManager.cjs +75 -99
  11. package/Base/managers/EventsManager.d.ts +31 -100
  12. package/Base/managers/EventsManager.js +75 -99
  13. package/Base/managers/OptionsManager.cjs +65 -78
  14. package/Base/managers/OptionsManager.d.ts +37 -79
  15. package/Base/managers/OptionsManager.js +66 -79
  16. package/Base/managers/RefsManager.cjs +44 -68
  17. package/Base/managers/RefsManager.d.ts +10 -64
  18. package/Base/managers/RefsManager.js +41 -69
  19. package/Base/managers/ResponsiveOptionsManager.cjs +62 -0
  20. package/Base/managers/ResponsiveOptionsManager.d.ts +26 -0
  21. package/Base/managers/ResponsiveOptionsManager.js +37 -0
  22. package/Base/managers/ServicesManager.cjs +5 -11
  23. package/Base/managers/ServicesManager.d.ts +2 -11
  24. package/Base/managers/ServicesManager.js +5 -11
  25. package/decorators/index.cjs +2 -0
  26. package/decorators/index.d.ts +1 -0
  27. package/decorators/index.js +6 -4
  28. package/decorators/withFreezedOptions.cjs +12 -3
  29. package/decorators/withFreezedOptions.js +13 -3
  30. package/decorators/withResponsiveOptions.cjs +39 -0
  31. package/decorators/withResponsiveOptions.d.ts +8 -0
  32. package/decorators/withResponsiveOptions.js +14 -0
  33. package/decorators/withScrolledInView.cjs +66 -23
  34. package/decorators/withScrolledInView.d.ts +4 -2
  35. package/decorators/withScrolledInView.js +67 -24
  36. package/package.json +2 -1
  37. package/services/Service.cjs +2 -2
  38. package/services/Service.d.ts +9 -1
  39. package/services/Service.js +2 -2
  40. package/services/raf.cjs +16 -0
  41. package/services/raf.js +16 -0
  42. package/services/scroll.cjs +3 -1
  43. package/services/scroll.js +3 -1
  44. package/utils/css/animate.cjs +207 -0
  45. package/utils/css/animate.d.ts +57 -0
  46. package/utils/css/animate.js +182 -0
  47. package/utils/css/getOffsetSizes.cjs +47 -0
  48. package/utils/css/getOffsetSizes.d.ts +15 -0
  49. package/utils/css/getOffsetSizes.js +25 -0
  50. package/utils/css/index.cjs +6 -0
  51. package/utils/css/index.d.ts +3 -0
  52. package/utils/css/index.js +9 -4
  53. package/utils/css/transform.cjs +91 -0
  54. package/utils/css/transform.d.ts +43 -0
  55. package/utils/css/transform.js +66 -0
  56. package/utils/css/transition.cjs +2 -0
  57. package/utils/css/transition.js +2 -0
  58. package/utils/index.cjs +5 -0
  59. package/utils/index.d.ts +3 -0
  60. package/utils/index.js +5 -0
  61. package/utils/isDefined.cjs +28 -0
  62. package/utils/isDefined.d.ts +7 -0
  63. package/utils/isDefined.js +6 -0
  64. package/utils/isFunction.cjs +28 -0
  65. package/utils/isFunction.d.ts +7 -0
  66. package/utils/isFunction.js +6 -0
  67. package/utils/math/index.cjs +2 -0
  68. package/utils/math/index.d.ts +1 -0
  69. package/utils/math/index.js +2 -0
  70. package/utils/scheduler.cjs +72 -0
  71. package/utils/scheduler.d.ts +19 -0
  72. package/utils/scheduler.js +50 -0
@@ -0,0 +1,182 @@
1
+ import { cubicBezier } from "@motionone/easing";
2
+ import { lerp, map, clamp01 } from "../math/index.js";
3
+ import isDefined from "../isDefined.js";
4
+ import transform, { TRANSFORM_PROPS } from "./transform.js";
5
+ import useRaf from "../../services/raf.js";
6
+ import { domScheduler as scheduler } from "../scheduler.js";
7
+ let id = 0;
8
+ const running = /* @__PURE__ */ new WeakMap();
9
+ const raf = useRaf();
10
+ const noop = () => {
11
+ };
12
+ const PROGRESS_PRECISION = 1e-4;
13
+ const CSSUnitConverter = {
14
+ "%": (value, getSizeRef) => value * getSizeRef() / 100,
15
+ vh: (value) => value * window.innerHeight / 100,
16
+ vw: (value) => value * window.innerWidth / 100,
17
+ vmin: (value) => value * Math.min(window.innerWidth, window.innerHeight) / 100,
18
+ vmax: (value) => value * Math.max(window.innerWidth, window.innerHeight) / 100
19
+ };
20
+ function getAnimationStepValue(val, getSizeRef) {
21
+ if (typeof val === "number") {
22
+ return val;
23
+ }
24
+ if (!val[1] || !CSSUnitConverter[val[1]]) {
25
+ return val[0];
26
+ }
27
+ return CSSUnitConverter[val[1]](val[0], getSizeRef);
28
+ }
29
+ function linear(value) {
30
+ return value;
31
+ }
32
+ function normalizeEase(ease) {
33
+ if (!isDefined(ease)) {
34
+ return linear;
35
+ }
36
+ if (Array.isArray(ease)) {
37
+ return cubicBezier(...ease);
38
+ }
39
+ return ease;
40
+ }
41
+ const generateTranslateRenderStrategy = (sizeRef) => (element, fromValue, toValue, progress) => lerp(getAnimationStepValue(fromValue != null ? fromValue : 0, () => element[sizeRef]), getAnimationStepValue(toValue != null ? toValue : 0, () => element[sizeRef]), progress);
42
+ const widthBasedTranslateRenderStrategy = generateTranslateRenderStrategy("offsetWidth");
43
+ const heightBasedTranslateRenderStrategy = generateTranslateRenderStrategy("offsetHeight");
44
+ const generateLerpRenderStrategy = (defaultValue) => (element, fromValue, toValue, progress) => lerp(fromValue != null ? fromValue : defaultValue, toValue != null ? toValue : defaultValue, progress);
45
+ const scaleRenderStrategy = generateLerpRenderStrategy(1);
46
+ const degreesRenderStrategy = generateLerpRenderStrategy(0);
47
+ const transformRenderStrategies = {
48
+ x: widthBasedTranslateRenderStrategy,
49
+ y: heightBasedTranslateRenderStrategy,
50
+ z: widthBasedTranslateRenderStrategy,
51
+ scale: scaleRenderStrategy,
52
+ scaleX: scaleRenderStrategy,
53
+ scaleY: scaleRenderStrategy,
54
+ scaleZ: scaleRenderStrategy,
55
+ skew: degreesRenderStrategy,
56
+ skewX: degreesRenderStrategy,
57
+ skewY: degreesRenderStrategy,
58
+ rotate: degreesRenderStrategy,
59
+ rotateX: degreesRenderStrategy,
60
+ rotateY: degreesRenderStrategy,
61
+ rotateZ: degreesRenderStrategy
62
+ };
63
+ function render(element, from, to, progress) {
64
+ const stepProgress = to.easing(map(progress, from.offset, to.offset, 0, 1));
65
+ scheduler.read(function renderRead() {
66
+ var _a, _b;
67
+ let opacity = false;
68
+ if (isDefined(from.opacity) || isDefined(to.opacity)) {
69
+ opacity = map(stepProgress, 0, 1, (_a = from.opacity) != null ? _a : 1, (_b = to.opacity) != null ? _b : 1);
70
+ } else if (element.style.opacity) {
71
+ opacity = "";
72
+ }
73
+ let transformOrigin = false;
74
+ if (isDefined(to.transformOrigin)) {
75
+ transformOrigin = to.transformOrigin;
76
+ } else if (element.style.transformOrigin) {
77
+ transformOrigin = "";
78
+ }
79
+ const props = Object.fromEntries(TRANSFORM_PROPS.filter((name) => isDefined(from[name]) || isDefined(to[name])).map((name) => {
80
+ return [name, transformRenderStrategies[name](element, from[name], to[name], stepProgress)];
81
+ }));
82
+ scheduler.write(function renderWrite() {
83
+ if (opacity !== false) {
84
+ element.style.opacity = opacity;
85
+ }
86
+ if (transformOrigin !== false) {
87
+ element.style.transformOrigin = transformOrigin;
88
+ }
89
+ transform(element, props);
90
+ });
91
+ });
92
+ }
93
+ function animate(element, keyframes, options = {}) {
94
+ var _a;
95
+ let progressValue = 0;
96
+ let easedProgress = 0;
97
+ if (!running.has(element)) {
98
+ running.set(element, /* @__PURE__ */ new Map());
99
+ }
100
+ const ease = normalizeEase(options.easing);
101
+ let duration = (_a = options.duration) != null ? _a : 1;
102
+ duration *= 1e3;
103
+ let startTime = performance.now();
104
+ let endTime = startTime + duration;
105
+ const key = `animate-${id}`;
106
+ id += 1;
107
+ const { onProgress = noop, onFinish = noop } = options;
108
+ let isRunning = false;
109
+ const keyframesCount = keyframes.length - 1;
110
+ const normalizedKeyframes = keyframes.map((keyframe, index) => {
111
+ var _a2;
112
+ return {
113
+ ...keyframe,
114
+ offset: (_a2 = keyframe.offset) != null ? _a2 : index / keyframesCount,
115
+ easing: normalizeEase(keyframe.easing)
116
+ };
117
+ });
118
+ function pause() {
119
+ isRunning = false;
120
+ raf.remove(key);
121
+ }
122
+ function progress(newProgress) {
123
+ if (typeof newProgress === "undefined") {
124
+ return progressValue;
125
+ }
126
+ progressValue = newProgress;
127
+ if (Math.abs(1 - progressValue) < PROGRESS_PRECISION) {
128
+ progressValue = 1;
129
+ pause();
130
+ scheduler.afterWrite(() => onFinish(progressValue, easedProgress));
131
+ }
132
+ easedProgress = ease(progressValue);
133
+ let toIndex = 0;
134
+ while (normalizedKeyframes[toIndex] && normalizedKeyframes[toIndex].offset <= easedProgress && normalizedKeyframes[toIndex].offset !== 1) {
135
+ toIndex += 1;
136
+ }
137
+ render(element, normalizedKeyframes[toIndex - 1], normalizedKeyframes[toIndex], easedProgress);
138
+ onProgress(progressValue, easedProgress);
139
+ return progressValue;
140
+ }
141
+ function tick(props) {
142
+ if (!isRunning) {
143
+ raf.remove(key);
144
+ return;
145
+ }
146
+ progress(clamp01(map(props.time, startTime, endTime, 0, 1)));
147
+ }
148
+ function start() {
149
+ const runningKeys = running.get(element);
150
+ runningKeys.forEach((runningPause, runningKey) => {
151
+ runningPause();
152
+ runningKeys.delete(runningKey);
153
+ });
154
+ runningKeys.set(key, pause);
155
+ running.set(element, runningKeys);
156
+ startTime = performance.now();
157
+ endTime = startTime + duration;
158
+ progressValue = 0;
159
+ easedProgress = 0;
160
+ isRunning = true;
161
+ raf.add(key, tick);
162
+ }
163
+ function play() {
164
+ if (isRunning) {
165
+ return;
166
+ }
167
+ startTime = performance.now() - lerp(0, duration, progressValue);
168
+ endTime = startTime + duration;
169
+ isRunning = true;
170
+ raf.add(key, tick);
171
+ }
172
+ return {
173
+ start,
174
+ finish: () => progress(1),
175
+ pause,
176
+ play,
177
+ progress
178
+ };
179
+ }
180
+ export {
181
+ animate
182
+ };
@@ -0,0 +1,47 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
3
+ var __getOwnPropNames = Object.getOwnPropertyNames;
4
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
5
+ var __export = (target, all) => {
6
+ for (var name in all)
7
+ __defProp(target, name, { get: all[name], enumerable: true });
8
+ };
9
+ var __copyProps = (to, from, except, desc) => {
10
+ if (from && typeof from === "object" || typeof from === "function") {
11
+ for (let key of __getOwnPropNames(from))
12
+ if (!__hasOwnProp.call(to, key) && key !== except)
13
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
14
+ }
15
+ return to;
16
+ };
17
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
18
+
19
+ // packages/js-toolkit/utils/css/getOffsetSizes.js
20
+ var getOffsetSizes_exports = {};
21
+ __export(getOffsetSizes_exports, {
22
+ default: () => getOffsetSizes
23
+ });
24
+ module.exports = __toCommonJS(getOffsetSizes_exports);
25
+ function getOffsetSizes(element) {
26
+ let parent = element;
27
+ let x = -window.pageXOffset;
28
+ let y = -window.pageYOffset;
29
+ while (parent) {
30
+ x += parent.offsetLeft;
31
+ y += parent.offsetTop;
32
+ parent = parent.offsetParent;
33
+ }
34
+ const width = element.offsetWidth;
35
+ const height = element.offsetWidth;
36
+ return {
37
+ x,
38
+ y,
39
+ width,
40
+ height,
41
+ top: y,
42
+ right: width + x,
43
+ bottom: height + y,
44
+ left: x
45
+ };
46
+ }
47
+ if (module.exports.default) module.exports = module.exports.default;
@@ -0,0 +1,15 @@
1
+ /**
2
+ * Get a `DOMRect` like `Object` for an element, without its transforms.
3
+ * @param {HTMLElement} element
4
+ * @returns {{ x: number, y: number, width: number, height: number, top: number, right: number, bottom: number, left: number }}
5
+ */
6
+ export default function getOffsetSizes(element: HTMLElement): {
7
+ x: number;
8
+ y: number;
9
+ width: number;
10
+ height: number;
11
+ top: number;
12
+ right: number;
13
+ bottom: number;
14
+ left: number;
15
+ };
@@ -0,0 +1,25 @@
1
+ function getOffsetSizes(element) {
2
+ let parent = element;
3
+ let x = -window.pageXOffset;
4
+ let y = -window.pageYOffset;
5
+ while (parent) {
6
+ x += parent.offsetLeft;
7
+ y += parent.offsetTop;
8
+ parent = parent.offsetParent;
9
+ }
10
+ const width = element.offsetWidth;
11
+ const height = element.offsetWidth;
12
+ return {
13
+ x,
14
+ y,
15
+ width,
16
+ height,
17
+ top: y,
18
+ right: width + x,
19
+ bottom: height + y,
20
+ left: x
21
+ };
22
+ }
23
+ export {
24
+ getOffsetSizes as default
25
+ };
@@ -16,6 +16,7 @@ var __copyProps = (to, from, except, desc) => {
16
16
  }
17
17
  return to;
18
18
  };
19
+ var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
19
20
  var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
20
21
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
21
22
 
@@ -24,15 +25,20 @@ var css_exports = {};
24
25
  __export(css_exports, {
25
26
  addClass: () => import_classes.add,
26
27
  addStyle: () => import_styles.add,
28
+ getOffsetSizes: () => import_getOffsetSizes.default,
27
29
  matrix: () => import_matrix.default,
28
30
  removeClass: () => import_classes.remove,
29
31
  removeStyle: () => import_styles.remove,
30
32
  toggleClass: () => import_classes.toggle,
33
+ transform: () => import_transform.default,
31
34
  transition: () => import_transition.default
32
35
  });
33
36
  module.exports = __toCommonJS(css_exports);
37
+ __reExport(css_exports, require("./animate.cjs"), module.exports);
34
38
  var import_classes = require("./classes.cjs");
35
39
  var import_styles = require("./styles.cjs");
40
+ var import_getOffsetSizes = __toESM(require("./getOffsetSizes.cjs"), 1);
36
41
  var import_matrix = __toESM(require("./matrix.cjs"), 1);
42
+ var import_transform = __toESM(require("./transform.cjs"), 1);
37
43
  var import_transition = __toESM(require("./transition.cjs"), 1);
38
44
  if (module.exports.default) module.exports = module.exports.default;
@@ -1,4 +1,7 @@
1
+ export * from "./animate.js";
2
+ export { default as getOffsetSizes } from "./getOffsetSizes.js";
1
3
  export { default as matrix } from "./matrix.js";
4
+ export { default as transform } from "./transform.js";
2
5
  export { default as transition } from "./transition.js";
3
6
  export { add as addClass, remove as removeClass, toggle as toggleClass } from "./classes.js";
4
7
  export { add as addStyle, remove as removeStyle } from "./styles.js";
@@ -1,13 +1,18 @@
1
+ export * from "./animate.js";
1
2
  import { add, remove, toggle } from "./classes.js";
2
3
  import { add as add2, remove as remove2 } from "./styles.js";
3
- import { default as default2 } from "./matrix.js";
4
- import { default as default3 } from "./transition.js";
4
+ import { default as default2 } from "./getOffsetSizes.js";
5
+ import { default as default3 } from "./matrix.js";
6
+ import { default as default4 } from "./transform.js";
7
+ import { default as default5 } from "./transition.js";
5
8
  export {
6
9
  add as addClass,
7
10
  add2 as addStyle,
8
- default2 as matrix,
11
+ default2 as getOffsetSizes,
12
+ default3 as matrix,
9
13
  remove as removeClass,
10
14
  remove2 as removeStyle,
11
15
  toggle as toggleClass,
12
- default3 as transition
16
+ default4 as transform,
17
+ default5 as transition
13
18
  };
@@ -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 __export = (target, all) => {
8
+ for (var name in all)
9
+ __defProp(target, name, { get: all[name], enumerable: true });
10
+ };
11
+ var __copyProps = (to, from, except, desc) => {
12
+ if (from && typeof from === "object" || typeof from === "function") {
13
+ for (let key of __getOwnPropNames(from))
14
+ if (!__hasOwnProp.call(to, key) && key !== except)
15
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
16
+ }
17
+ return to;
18
+ };
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));
20
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
21
+
22
+ // packages/js-toolkit/utils/css/transform.js
23
+ var transform_exports = {};
24
+ __export(transform_exports, {
25
+ TRANSFORM_PROPS: () => TRANSFORM_PROPS,
26
+ default: () => transform
27
+ });
28
+ module.exports = __toCommonJS(transform_exports);
29
+ var import_isDefined = __toESM(require("../isDefined.cjs"), 1);
30
+ var TRANSFORM_PROPS = [
31
+ "x",
32
+ "y",
33
+ "z",
34
+ "rotate",
35
+ "rotateX",
36
+ "rotateY",
37
+ "rotateZ",
38
+ "scale",
39
+ "scaleX",
40
+ "scaleY",
41
+ "scaleZ",
42
+ "skew",
43
+ "skewX",
44
+ "skewY"
45
+ ];
46
+ function transform(element, props) {
47
+ var _a, _b, _c;
48
+ let value = "";
49
+ if ((0, import_isDefined.default)(props.x) || (0, import_isDefined.default)(props.y) || (0, import_isDefined.default)(props.z)) {
50
+ value += `translate3d(${(_a = props.x) != null ? _a : 0}px, ${(_b = props.y) != null ? _b : 0}px, ${(_c = props.z) != null ? _c : 0}px) `;
51
+ }
52
+ if ((0, import_isDefined.default)(props.rotate)) {
53
+ value += `rotate(${props.rotate}deg) `;
54
+ } else {
55
+ if ((0, import_isDefined.default)(props.rotateX)) {
56
+ value += `rotateX(${props.rotateX}deg) `;
57
+ }
58
+ if ((0, import_isDefined.default)(props.rotateY)) {
59
+ value += `rotateY(${props.rotateY}deg) `;
60
+ }
61
+ if ((0, import_isDefined.default)(props.rotateZ)) {
62
+ value += `rotateZ(${props.rotateZ}deg) `;
63
+ }
64
+ }
65
+ if ((0, import_isDefined.default)(props.scale)) {
66
+ value += `scale(${props.scale}) `;
67
+ } else {
68
+ if ((0, import_isDefined.default)(props.scaleX)) {
69
+ value += `scaleX(${props.scaleX}) `;
70
+ }
71
+ if ((0, import_isDefined.default)(props.scaleY)) {
72
+ value += `scaleY(${props.scaleY}) `;
73
+ }
74
+ if ((0, import_isDefined.default)(props.scaleZ)) {
75
+ value += `scaleZ(${props.scaleZ}) `;
76
+ }
77
+ }
78
+ if ((0, import_isDefined.default)(props.skew)) {
79
+ value += `skew(${props.skew}deg) `;
80
+ } else {
81
+ if ((0, import_isDefined.default)(props.skewX)) {
82
+ value += `skewX(${props.skewX}deg) `;
83
+ }
84
+ if ((0, import_isDefined.default)(props.skewY)) {
85
+ value += `skewY(${props.skewY}deg) `;
86
+ }
87
+ }
88
+ element.style.transform = value;
89
+ return value;
90
+ }
91
+ if (module.exports.default) module.exports = module.exports.default;
@@ -0,0 +1,43 @@
1
+ /**
2
+ * Generate a CSS transform.
3
+ *
4
+ * @param {HTMLElement} element
5
+ * @param {TransformProps} props
6
+ * @returns {string}
7
+ */
8
+ export default function transform(element: HTMLElement, props: TransformProps): string;
9
+ /**
10
+ * @typedef {Partial<{
11
+ * x: number;
12
+ * y: number;
13
+ * z: number;
14
+ * rotate: number;
15
+ * rotateX: number;
16
+ * rotateY: number;
17
+ * rotateZ: number;
18
+ * scale: number;
19
+ * scaleX: number;
20
+ * scaleY: number;
21
+ * scaleZ: number;
22
+ * skew: number;
23
+ * skewX: number;
24
+ * skewY: number;
25
+ * }>} TransformProps
26
+ */
27
+ export const TRANSFORM_PROPS: string[];
28
+ export type TransformProps = Partial<{
29
+ x: number;
30
+ y: number;
31
+ z: number;
32
+ rotate: number;
33
+ rotateX: number;
34
+ rotateY: number;
35
+ rotateZ: number;
36
+ scale: number;
37
+ scaleX: number;
38
+ scaleY: number;
39
+ scaleZ: number;
40
+ skew: number;
41
+ skewX: number;
42
+ skewY: number;
43
+ }>;
@@ -0,0 +1,66 @@
1
+ import isDefined from "../isDefined.js";
2
+ const TRANSFORM_PROPS = [
3
+ "x",
4
+ "y",
5
+ "z",
6
+ "rotate",
7
+ "rotateX",
8
+ "rotateY",
9
+ "rotateZ",
10
+ "scale",
11
+ "scaleX",
12
+ "scaleY",
13
+ "scaleZ",
14
+ "skew",
15
+ "skewX",
16
+ "skewY"
17
+ ];
18
+ function transform(element, props) {
19
+ var _a, _b, _c;
20
+ let value = "";
21
+ if (isDefined(props.x) || isDefined(props.y) || isDefined(props.z)) {
22
+ value += `translate3d(${(_a = props.x) != null ? _a : 0}px, ${(_b = props.y) != null ? _b : 0}px, ${(_c = props.z) != null ? _c : 0}px) `;
23
+ }
24
+ if (isDefined(props.rotate)) {
25
+ value += `rotate(${props.rotate}deg) `;
26
+ } else {
27
+ if (isDefined(props.rotateX)) {
28
+ value += `rotateX(${props.rotateX}deg) `;
29
+ }
30
+ if (isDefined(props.rotateY)) {
31
+ value += `rotateY(${props.rotateY}deg) `;
32
+ }
33
+ if (isDefined(props.rotateZ)) {
34
+ value += `rotateZ(${props.rotateZ}deg) `;
35
+ }
36
+ }
37
+ if (isDefined(props.scale)) {
38
+ value += `scale(${props.scale}) `;
39
+ } else {
40
+ if (isDefined(props.scaleX)) {
41
+ value += `scaleX(${props.scaleX}) `;
42
+ }
43
+ if (isDefined(props.scaleY)) {
44
+ value += `scaleY(${props.scaleY}) `;
45
+ }
46
+ if (isDefined(props.scaleZ)) {
47
+ value += `scaleZ(${props.scaleZ}) `;
48
+ }
49
+ }
50
+ if (isDefined(props.skew)) {
51
+ value += `skew(${props.skew}deg) `;
52
+ } else {
53
+ if (isDefined(props.skewX)) {
54
+ value += `skewX(${props.skewX}deg) `;
55
+ }
56
+ if (isDefined(props.skewY)) {
57
+ value += `skewY(${props.skewY}deg) `;
58
+ }
59
+ }
60
+ element.style.transform = value;
61
+ return value;
62
+ }
63
+ export {
64
+ TRANSFORM_PROPS,
65
+ transform as default
66
+ };
@@ -68,8 +68,10 @@ async function start(element, classesOrStyles) {
68
68
  trs.isTransitioning = true;
69
69
  setClassesOrStyles(element, classesOrStyles.from);
70
70
  await (0, import_nextFrame.default)();
71
+ await (0, import_nextFrame.default)();
71
72
  setClassesOrStyles(element, classesOrStyles.active);
72
73
  await (0, import_nextFrame.default)();
74
+ await (0, import_nextFrame.default)();
73
75
  }
74
76
  async function next(element, classesOrStyles) {
75
77
  const hasTransition = testTransition(element);
@@ -41,8 +41,10 @@ async function start(element, classesOrStyles) {
41
41
  trs.isTransitioning = true;
42
42
  setClassesOrStyles(element, classesOrStyles.from);
43
43
  await nextFrame();
44
+ await nextFrame();
44
45
  setClassesOrStyles(element, classesOrStyles.active);
45
46
  await nextFrame();
47
+ await nextFrame();
46
48
  }
47
49
  async function next(element, classesOrStyles) {
48
50
  const hasTransition = testTransition(element);
package/utils/index.cjs CHANGED
@@ -27,6 +27,8 @@ __export(utils_exports, {
27
27
  focusTrap: () => import_focusTrap.default,
28
28
  historyPush: () => import_history.push,
29
29
  historyReplace: () => import_history.replace,
30
+ isDefined: () => import_isDefined.default,
31
+ isFunction: () => import_isFunction.default,
30
32
  keyCodes: () => import_keyCodes.default,
31
33
  memoize: () => import_memoize.default,
32
34
  nextFrame: () => import_nextFrame.default,
@@ -46,9 +48,12 @@ var import_nextTick = __toESM(require("./nextTick.cjs"), 1);
46
48
  var import_nextMicrotask = __toESM(require("./nextMicrotask.cjs"), 1);
47
49
  var import_throttle = __toESM(require("./throttle.cjs"), 1);
48
50
  var import_scrollTo = __toESM(require("./scrollTo.cjs"), 1);
51
+ var import_isDefined = __toESM(require("./isDefined.cjs"), 1);
52
+ var import_isFunction = __toESM(require("./isFunction.cjs"), 1);
49
53
  __reExport(utils_exports, require("./css/index.cjs"), module.exports);
50
54
  var import_history = require("./history.cjs");
51
55
  __reExport(utils_exports, require("./collide/index.cjs"), module.exports);
52
56
  __reExport(utils_exports, require("./math/index.cjs"), module.exports);
53
57
  __reExport(utils_exports, require("./string/index.cjs"), module.exports);
58
+ __reExport(utils_exports, require("./scheduler.cjs"), module.exports);
54
59
  if (module.exports.default) module.exports = module.exports.default;
package/utils/index.d.ts CHANGED
@@ -7,8 +7,11 @@ export { default as nextTick } from "./nextTick.js";
7
7
  export { default as nextMicrotask } from "./nextMicrotask.js";
8
8
  export { default as throttle } from "./throttle.js";
9
9
  export { default as scrollTo } from "./scrollTo.js";
10
+ export { default as isDefined } from "./isDefined.js";
11
+ export { default as isFunction } from "./isFunction.js";
10
12
  export * from "./css/index.js";
11
13
  export * from "./collide/index.js";
12
14
  export * from "./math/index.js";
13
15
  export * from "./string/index.js";
16
+ export * from "./scheduler.js";
14
17
  export { objectToURLSearchParams, push as historyPush, replace as historyReplace } from "./history.js";
package/utils/index.js CHANGED
@@ -7,6 +7,8 @@ import { default as default7 } from "./nextTick.js";
7
7
  import { default as default8 } from "./nextMicrotask.js";
8
8
  import { default as default9 } from "./throttle.js";
9
9
  import { default as default10 } from "./scrollTo.js";
10
+ import { default as default11 } from "./isDefined.js";
11
+ import { default as default12 } from "./isFunction.js";
10
12
  export * from "./css/index.js";
11
13
  import {
12
14
  objectToURLSearchParams,
@@ -16,11 +18,14 @@ import {
16
18
  export * from "./collide/index.js";
17
19
  export * from "./math/index.js";
18
20
  export * from "./string/index.js";
21
+ export * from "./scheduler.js";
19
22
  export {
20
23
  default2 as debounce,
21
24
  default3 as focusTrap,
22
25
  push as historyPush,
23
26
  replace as historyReplace,
27
+ default11 as isDefined,
28
+ default12 as isFunction,
24
29
  default4 as keyCodes,
25
30
  default5 as memoize,
26
31
  default6 as nextFrame,
@@ -0,0 +1,28 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
3
+ var __getOwnPropNames = Object.getOwnPropertyNames;
4
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
5
+ var __export = (target, all) => {
6
+ for (var name in all)
7
+ __defProp(target, name, { get: all[name], enumerable: true });
8
+ };
9
+ var __copyProps = (to, from, except, desc) => {
10
+ if (from && typeof from === "object" || typeof from === "function") {
11
+ for (let key of __getOwnPropNames(from))
12
+ if (!__hasOwnProp.call(to, key) && key !== except)
13
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
14
+ }
15
+ return to;
16
+ };
17
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
18
+
19
+ // packages/js-toolkit/utils/isDefined.js
20
+ var isDefined_exports = {};
21
+ __export(isDefined_exports, {
22
+ default: () => isDefined
23
+ });
24
+ module.exports = __toCommonJS(isDefined_exports);
25
+ function isDefined(value) {
26
+ return typeof value !== "undefined";
27
+ }
28
+ if (module.exports.default) module.exports = module.exports.default;
@@ -0,0 +1,7 @@
1
+ /**
2
+ * Test if a value is defined or not.
3
+ *
4
+ * @param {any} value
5
+ * @returns {boolean}
6
+ */
7
+ export default function isDefined(value: any): boolean;
@@ -0,0 +1,6 @@
1
+ function isDefined(value) {
2
+ return typeof value !== "undefined";
3
+ }
4
+ export {
5
+ isDefined as default
6
+ };