@studiometa/js-toolkit 2.0.0-beta.9 → 2.0.0-rc.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 +285 -0
- package/Base/index.d.ts +11 -2
- package/Base/index.js +114 -197
- package/Base/managers/ChildrenManager.cjs +146 -0
- package/Base/managers/ChildrenManager.d.ts +9 -1
- package/Base/managers/ChildrenManager.js +60 -59
- package/Base/managers/EventsManager.cjs +183 -0
- package/Base/managers/EventsManager.js +72 -112
- package/Base/managers/OptionsManager.cjs +174 -0
- package/Base/managers/OptionsManager.d.ts +9 -5
- package/Base/managers/OptionsManager.js +60 -90
- package/Base/managers/RefsManager.cjs +99 -0
- package/Base/managers/RefsManager.js +28 -38
- package/Base/managers/ServicesManager.cjs +131 -0
- package/Base/managers/ServicesManager.js +39 -67
- package/Base/utils.cjs +41 -0
- package/Base/utils.js +12 -11
- package/decorators/index.cjs +45 -0
- package/decorators/index.d.ts +1 -0
- package/decorators/index.js +20 -8
- package/decorators/withBreakpointManager.cjs +85 -0
- package/decorators/withBreakpointManager.js +18 -39
- package/decorators/withBreakpointObserver.cjs +115 -0
- package/decorators/withBreakpointObserver.js +44 -86
- package/decorators/withDrag.cjs +53 -0
- package/decorators/withDrag.js +24 -26
- package/decorators/withExtraConfig.cjs +43 -0
- package/decorators/withExtraConfig.js +17 -12
- package/decorators/withFreezedOptions.cjs +36 -0
- package/decorators/withFreezedOptions.d.ts +14 -0
- package/decorators/withFreezedOptions.js +14 -0
- package/decorators/withIntersectionObserver.cjs +62 -0
- package/decorators/withIntersectionObserver.js +29 -32
- package/decorators/withMountWhenInView.cjs +69 -0
- package/decorators/withMountWhenInView.js +31 -52
- package/decorators/withScrolledInView.cjs +114 -0
- package/decorators/withScrolledInView.js +35 -39
- package/decorators/withVue2.cjs +60 -0
- package/decorators/withVue2.js +26 -32
- package/helpers/createApp.cjs +52 -0
- package/helpers/createApp.d.ts +2 -2
- package/helpers/createApp.js +12 -12
- package/helpers/importOnInteraction.cjs +52 -0
- package/helpers/importOnInteraction.js +17 -18
- package/helpers/importWhenIdle.cjs +49 -0
- package/helpers/importWhenIdle.js +14 -17
- package/helpers/importWhenVisible.cjs +50 -0
- package/helpers/importWhenVisible.js +16 -18
- package/helpers/index.cjs +35 -0
- package/helpers/index.js +10 -4
- package/helpers/utils.cjs +35 -0
- package/helpers/utils.js +7 -6
- package/index.cjs +33 -0
- package/index.js +7 -4
- package/package.json +14 -4
- package/services/Service.cjs +76 -0
- package/services/Service.js +19 -32
- package/services/drag.cjs +213 -0
- package/services/drag.d.ts +1 -0
- package/services/drag.js +64 -68
- package/services/index.cjs +41 -0
- package/services/index.js +16 -7
- package/services/key.cjs +104 -0
- package/services/key.js +28 -36
- package/services/load.cjs +72 -0
- package/services/load.js +17 -19
- package/services/pointer.cjs +162 -0
- package/services/pointer.js +43 -60
- package/services/raf.cjs +83 -0
- package/services/raf.js +20 -28
- package/services/resize.cjs +108 -0
- package/services/resize.js +33 -42
- package/services/scroll.cjs +131 -0
- package/services/scroll.js +26 -35
- package/utils/collide/boundingRectToCircle.cjs +34 -0
- package/utils/collide/boundingRectToCircle.d.ts +1 -1
- package/utils/collide/boundingRectToCircle.js +7 -10
- package/utils/collide/collideCircleCircle.cjs +34 -0
- package/utils/collide/collideCircleCircle.js +8 -7
- package/utils/collide/collideCircleRect.cjs +46 -0
- package/utils/collide/collideCircleRect.js +10 -12
- package/utils/collide/collidePointCircle.cjs +31 -0
- package/utils/collide/collidePointCircle.js +8 -5
- package/utils/collide/collidePointRect.cjs +28 -0
- package/utils/collide/collidePointRect.js +5 -2
- package/utils/collide/collideRectRect.cjs +28 -0
- package/utils/collide/collideRectRect.js +5 -2
- package/utils/collide/index.cjs +39 -0
- package/utils/collide/index.js +14 -6
- package/utils/css/classes.cjs +47 -0
- package/utils/css/classes.d.ts +10 -9
- package/utils/css/classes.js +18 -14
- package/utils/css/index.cjs +38 -0
- package/utils/css/index.d.ts +2 -2
- package/utils/css/index.js +13 -6
- package/utils/css/matrix.cjs +30 -0
- package/utils/css/matrix.js +7 -5
- package/utils/css/styles.cjs +44 -0
- package/utils/css/styles.d.ts +6 -18
- package/utils/css/styles.js +12 -12
- package/utils/css/transition.cjs +120 -0
- package/utils/css/transition.d.ts +15 -9
- package/utils/css/transition.js +70 -119
- package/utils/debounce.cjs +34 -0
- package/utils/debounce.js +7 -9
- package/utils/focusTrap.cjs +82 -0
- package/utils/focusTrap.js +30 -21
- package/utils/history.cjs +89 -0
- package/utils/history.js +28 -57
- package/utils/index.cjs +54 -0
- package/utils/index.d.ts +4 -1
- package/utils/index.js +32 -11
- package/utils/keyCodes.cjs +35 -0
- package/utils/keyCodes.js +5 -2
- package/utils/math/clamp.cjs +28 -0
- package/utils/math/clamp.js +5 -2
- package/utils/math/clamp01.cjs +32 -0
- package/utils/math/clamp01.js +6 -3
- package/utils/math/damp.cjs +28 -0
- package/utils/math/damp.js +5 -4
- package/utils/math/ease.cjs +88 -0
- package/utils/math/ease.js +50 -25
- package/utils/math/index.cjs +43 -0
- package/utils/math/index.js +17 -8
- package/utils/math/inertiaFinalValue.cjs +37 -0
- package/utils/math/inertiaFinalValue.js +8 -10
- package/utils/math/lerp.cjs +28 -0
- package/utils/math/lerp.js +5 -2
- package/utils/math/map.cjs +28 -0
- package/utils/math/map.js +5 -2
- package/utils/math/round.cjs +28 -0
- package/utils/math/round.js +5 -3
- package/utils/memoize.cjs +43 -0
- package/utils/memoize.js +10 -19
- package/utils/nextFrame.cjs +38 -0
- package/utils/nextFrame.d.ts +4 -3
- package/utils/nextFrame.js +13 -10
- package/utils/nextMicrotask.cjs +28 -0
- package/utils/nextMicrotask.d.ts +8 -0
- package/utils/nextMicrotask.js +6 -0
- package/utils/nextTick.cjs +30 -0
- package/utils/nextTick.d.ts +8 -0
- package/utils/nextTick.js +8 -0
- package/utils/object/autoBind.cjs +49 -0
- package/utils/object/autoBind.js +12 -22
- package/utils/object/getAllProperties.cjs +37 -0
- package/utils/object/getAllProperties.js +10 -13
- package/utils/object/index.cjs +33 -0
- package/utils/object/index.js +8 -3
- package/utils/object/isObject.cjs +28 -0
- package/utils/object/isObject.js +6 -3
- package/utils/scrollTo.cjs +80 -0
- package/utils/scrollTo.js +20 -40
- package/utils/string/index.cjs +47 -0
- package/utils/string/index.js +22 -10
- package/utils/string/withLeadingCharacters.cjs +32 -0
- package/utils/string/withLeadingCharacters.js +7 -4
- package/utils/string/withLeadingSlash.cjs +32 -0
- package/utils/string/withLeadingSlash.js +7 -4
- package/utils/string/withTrailingCharacters.cjs +32 -0
- package/utils/string/withTrailingCharacters.js +7 -4
- package/utils/string/withTrailingSlash.cjs +32 -0
- package/utils/string/withTrailingSlash.js +7 -4
- package/utils/string/withoutLeadingCharacters.cjs +28 -0
- package/utils/string/withoutLeadingCharacters.js +6 -3
- package/utils/string/withoutLeadingCharactersRecursive.cjs +37 -0
- package/utils/string/withoutLeadingCharactersRecursive.js +8 -7
- package/utils/string/withoutLeadingSlash.cjs +32 -0
- package/utils/string/withoutLeadingSlash.js +7 -4
- package/utils/string/withoutTrailingCharacters.cjs +28 -0
- package/utils/string/withoutTrailingCharacters.js +6 -3
- package/utils/string/withoutTrailingCharactersRecursive.cjs +37 -0
- package/utils/string/withoutTrailingCharactersRecursive.js +8 -7
- package/utils/string/withoutTrailingSlash.cjs +32 -0
- package/utils/string/withoutTrailingSlash.js +7 -4
- package/utils/throttle.cjs +36 -0
- package/utils/throttle.js +9 -9
- package/index.modern.js +0 -1
- package/index.umd.js +0 -1
|
@@ -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 __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/styles.js
|
|
23
|
+
var styles_exports = {};
|
|
24
|
+
__export(styles_exports, {
|
|
25
|
+
add: () => add,
|
|
26
|
+
remove: () => remove
|
|
27
|
+
});
|
|
28
|
+
module.exports = __toCommonJS(styles_exports);
|
|
29
|
+
var import_isObject = __toESM(require("../object/isObject.cjs"), 1);
|
|
30
|
+
function setStyles(element, styles, method = "add") {
|
|
31
|
+
if (!element || !styles || !(0, import_isObject.default)(styles)) {
|
|
32
|
+
return;
|
|
33
|
+
}
|
|
34
|
+
Object.entries(styles).forEach(([prop, value]) => {
|
|
35
|
+
element.style[prop] = method === "add" ? value : "";
|
|
36
|
+
});
|
|
37
|
+
}
|
|
38
|
+
function add(element, styles) {
|
|
39
|
+
setStyles(element, styles);
|
|
40
|
+
}
|
|
41
|
+
function remove(element, styles) {
|
|
42
|
+
setStyles(element, styles, "remove");
|
|
43
|
+
}
|
|
44
|
+
if (module.exports.default) module.exports = module.exports.default;
|
package/utils/css/styles.d.ts
CHANGED
|
@@ -1,28 +1,16 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @typedef {Record<string, string | null> & Partial<CSSStyleDeclaration>} CssStyleObject
|
|
3
|
-
*/
|
|
4
|
-
/**
|
|
5
|
-
* Manage a list of style properties on an element.
|
|
6
|
-
*
|
|
7
|
-
* @param {HTMLElement} element The element to update.
|
|
8
|
-
* @param {CssStyleObject} styles An object of styles properties and values.
|
|
9
|
-
* @param {String} method The method to use: add or remove.
|
|
10
|
-
*/
|
|
11
|
-
export default function setStyles(element: HTMLElement, styles: CssStyleObject, method?: string): void;
|
|
12
1
|
/**
|
|
13
2
|
* Add styles to an element.
|
|
14
3
|
*
|
|
15
|
-
* @param {HTMLElement}
|
|
16
|
-
* @param {
|
|
4
|
+
* @param {HTMLElement} element The element to update.
|
|
5
|
+
* @param {Partial<CSSStyleDeclaration>} styles A string of class names.
|
|
17
6
|
* @return {void}
|
|
18
7
|
*/
|
|
19
|
-
export function add(element: HTMLElement, styles:
|
|
8
|
+
export function add(element: HTMLElement, styles: Partial<CSSStyleDeclaration>): void;
|
|
20
9
|
/**
|
|
21
10
|
* Remove class names from an element.
|
|
22
11
|
*
|
|
23
|
-
* @param {HTMLElement}
|
|
24
|
-
* @param {
|
|
12
|
+
* @param {HTMLElement} element The element to update.
|
|
13
|
+
* @param {Partial<CSSStyleDeclaration>} styles A string of class names.
|
|
25
14
|
* @return {void}
|
|
26
15
|
*/
|
|
27
|
-
export function remove(element: HTMLElement, styles:
|
|
28
|
-
export type CssStyleObject = Record<string, string | null> & Partial<CSSStyleDeclaration>;
|
|
16
|
+
export function remove(element: HTMLElement, styles: Partial<CSSStyleDeclaration>): void;
|
package/utils/css/styles.js
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import isObject from
|
|
2
|
-
|
|
3
|
-
var method = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'add';
|
|
4
|
-
|
|
1
|
+
import isObject from "../object/isObject.js";
|
|
2
|
+
function setStyles(element, styles, method = "add") {
|
|
5
3
|
if (!element || !styles || !isObject(styles)) {
|
|
6
4
|
return;
|
|
7
5
|
}
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
var [prop, value] = _ref;
|
|
11
|
-
element.style[prop] = method === 'add' ? value : '';
|
|
6
|
+
Object.entries(styles).forEach(([prop, value]) => {
|
|
7
|
+
element.style[prop] = method === "add" ? value : "";
|
|
12
8
|
});
|
|
13
9
|
}
|
|
14
|
-
|
|
10
|
+
function add(element, styles) {
|
|
15
11
|
setStyles(element, styles);
|
|
16
12
|
}
|
|
17
|
-
|
|
18
|
-
setStyles(element, styles,
|
|
19
|
-
}
|
|
13
|
+
function remove(element, styles) {
|
|
14
|
+
setStyles(element, styles, "remove");
|
|
15
|
+
}
|
|
16
|
+
export {
|
|
17
|
+
add,
|
|
18
|
+
remove
|
|
19
|
+
};
|
|
@@ -0,0 +1,120 @@
|
|
|
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 __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
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));
|
|
21
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
|
+
var __publicField = (obj, key, value) => {
|
|
23
|
+
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
24
|
+
return value;
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
// packages/js-toolkit/utils/css/transition.js
|
|
28
|
+
var transition_exports = {};
|
|
29
|
+
__export(transition_exports, {
|
|
30
|
+
default: () => transition,
|
|
31
|
+
setClassesOrStyles: () => setClassesOrStyles
|
|
32
|
+
});
|
|
33
|
+
module.exports = __toCommonJS(transition_exports);
|
|
34
|
+
var import_nextFrame = __toESM(require("../nextFrame.cjs"), 1);
|
|
35
|
+
var classes = __toESM(require("./classes.cjs"), 1);
|
|
36
|
+
var styles = __toESM(require("./styles.cjs"), 1);
|
|
37
|
+
var cache = /* @__PURE__ */ new WeakMap();
|
|
38
|
+
var Transition = class {
|
|
39
|
+
constructor(element) {
|
|
40
|
+
__publicField(this, "isTransitioning", false);
|
|
41
|
+
__publicField(this, "transitionEndHandler", null);
|
|
42
|
+
cache.set(element, this);
|
|
43
|
+
}
|
|
44
|
+
static getInstance(element) {
|
|
45
|
+
let instance = cache.get(element);
|
|
46
|
+
if (!instance) {
|
|
47
|
+
instance = new this(element);
|
|
48
|
+
}
|
|
49
|
+
return instance;
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
function setClassesOrStyles(element, classesOrStyles, method = "add") {
|
|
53
|
+
if (typeof classesOrStyles === "string" || Array.isArray(classesOrStyles)) {
|
|
54
|
+
classes[method](element, classesOrStyles);
|
|
55
|
+
} else {
|
|
56
|
+
styles[method](element, classesOrStyles);
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
function testTransition(element) {
|
|
60
|
+
if (typeof window === "undefined") {
|
|
61
|
+
return false;
|
|
62
|
+
}
|
|
63
|
+
const { transitionDuration } = window.getComputedStyle(element);
|
|
64
|
+
return !!transitionDuration && transitionDuration !== "0s";
|
|
65
|
+
}
|
|
66
|
+
async function start(element, classesOrStyles) {
|
|
67
|
+
const trs = Transition.getInstance(element);
|
|
68
|
+
trs.isTransitioning = true;
|
|
69
|
+
setClassesOrStyles(element, classesOrStyles.from);
|
|
70
|
+
await (0, import_nextFrame.default)();
|
|
71
|
+
setClassesOrStyles(element, classesOrStyles.active);
|
|
72
|
+
await (0, import_nextFrame.default)();
|
|
73
|
+
}
|
|
74
|
+
async function next(element, classesOrStyles) {
|
|
75
|
+
const hasTransition = testTransition(element);
|
|
76
|
+
return new Promise(async (resolve) => {
|
|
77
|
+
if (hasTransition) {
|
|
78
|
+
const trs = Transition.getInstance(element);
|
|
79
|
+
trs.transitionEndHandler = resolve;
|
|
80
|
+
element.addEventListener("transitionend", trs.transitionEndHandler, false);
|
|
81
|
+
}
|
|
82
|
+
setClassesOrStyles(element, classesOrStyles.from, "remove");
|
|
83
|
+
setClassesOrStyles(element, classesOrStyles.to);
|
|
84
|
+
await (0, import_nextFrame.default)();
|
|
85
|
+
if (!hasTransition) {
|
|
86
|
+
resolve();
|
|
87
|
+
}
|
|
88
|
+
});
|
|
89
|
+
}
|
|
90
|
+
function end(element, classesOrStyles, mode = "remove") {
|
|
91
|
+
const trs = Transition.getInstance(element);
|
|
92
|
+
element.removeEventListener("transitionend", trs.transitionEndHandler, false);
|
|
93
|
+
if (mode === "remove") {
|
|
94
|
+
setClassesOrStyles(element, classesOrStyles.to, "remove");
|
|
95
|
+
}
|
|
96
|
+
setClassesOrStyles(element, classesOrStyles.active, "remove");
|
|
97
|
+
trs.isTransitioning = false;
|
|
98
|
+
trs.transitionEndHandler = null;
|
|
99
|
+
}
|
|
100
|
+
async function transition(element, name, endMode = "remove") {
|
|
101
|
+
const classesOrStyles = typeof name === "string" ? {
|
|
102
|
+
from: `${name}-from`,
|
|
103
|
+
active: `${name}-active`,
|
|
104
|
+
to: `${name}-to`
|
|
105
|
+
} : {
|
|
106
|
+
from: "",
|
|
107
|
+
active: "",
|
|
108
|
+
to: "",
|
|
109
|
+
...name
|
|
110
|
+
};
|
|
111
|
+
const trs = Transition.getInstance(element);
|
|
112
|
+
if (trs.isTransitioning) {
|
|
113
|
+
end(element, classesOrStyles);
|
|
114
|
+
}
|
|
115
|
+
await start(element, classesOrStyles);
|
|
116
|
+
await next(element, classesOrStyles);
|
|
117
|
+
end(element, classesOrStyles, endMode);
|
|
118
|
+
return Promise.resolve();
|
|
119
|
+
}
|
|
120
|
+
if (module.exports.default) module.exports = module.exports.default;
|
|
@@ -1,20 +1,26 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Update either the classes or the styles of an element with the given method.
|
|
3
3
|
*
|
|
4
|
-
* @param {HTMLElement}
|
|
5
|
-
* @param {
|
|
6
|
-
* @param {
|
|
4
|
+
* @param {HTMLElement} element The element to update.
|
|
5
|
+
* @param {ClassesOrStyles} classesOrStyles The classes or styles to apply.
|
|
6
|
+
* @param {'add'|'remove'} method The method to use, one of `add` or `remove`.
|
|
7
7
|
*/
|
|
8
|
-
export function setClassesOrStyles(element: HTMLElement, classesOrStyles:
|
|
8
|
+
export function setClassesOrStyles(element: HTMLElement, classesOrStyles: ClassesOrStyles, method?: 'add' | 'remove'): void;
|
|
9
9
|
/**
|
|
10
10
|
* Manage CSS transition with class.
|
|
11
11
|
*
|
|
12
12
|
* This is heavily inspired by the Vue `<transition>` component
|
|
13
13
|
* and the `@barba/css` package, many thanks to them!
|
|
14
14
|
*
|
|
15
|
-
* @param {HTMLElement}
|
|
16
|
-
* @param {
|
|
17
|
-
* @param {String}
|
|
18
|
-
* @return {Promise}
|
|
15
|
+
* @param {HTMLElement} element The target element.
|
|
16
|
+
* @param {string|TransitionStyles} name The name of the transition or an object with the hooks classesOrStyles.
|
|
17
|
+
* @param {String} endMode Whether to remove or keep the `to` classes/styles
|
|
18
|
+
* @return {Promise<void>} A promise resolving at the end of the transition.
|
|
19
19
|
*/
|
|
20
|
-
export default function transition(element: HTMLElement, name: string |
|
|
20
|
+
export default function transition(element: HTMLElement, name: string | TransitionStyles, endMode?: string): Promise<void>;
|
|
21
|
+
export type ClassesOrStyles = string | string[] | Partial<CSSStyleDeclaration>;
|
|
22
|
+
export type TransitionStyles = {
|
|
23
|
+
from?: ClassesOrStyles;
|
|
24
|
+
active?: ClassesOrStyles;
|
|
25
|
+
to?: ClassesOrStyles;
|
|
26
|
+
};
|
package/utils/css/transition.js
CHANGED
|
@@ -1,145 +1,96 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
import
|
|
9
|
-
import * as
|
|
10
|
-
|
|
11
|
-
var cache = new WeakMap();
|
|
12
|
-
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
3
|
+
var __publicField = (obj, key, value) => {
|
|
4
|
+
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
5
|
+
return value;
|
|
6
|
+
};
|
|
7
|
+
import nextFrame from "../nextFrame.js";
|
|
8
|
+
import * as classes from "./classes.js";
|
|
9
|
+
import * as styles from "./styles.js";
|
|
10
|
+
const cache = /* @__PURE__ */ new WeakMap();
|
|
13
11
|
class Transition {
|
|
14
12
|
constructor(element) {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
_defineProperty(this, "transitionEndHandler", null);
|
|
18
|
-
|
|
13
|
+
__publicField(this, "isTransitioning", false);
|
|
14
|
+
__publicField(this, "transitionEndHandler", null);
|
|
19
15
|
cache.set(element, this);
|
|
20
16
|
}
|
|
21
|
-
|
|
22
17
|
static getInstance(element) {
|
|
23
|
-
|
|
24
|
-
|
|
18
|
+
let instance = cache.get(element);
|
|
25
19
|
if (!instance) {
|
|
26
20
|
instance = new this(element);
|
|
27
21
|
}
|
|
28
|
-
|
|
29
22
|
return instance;
|
|
30
23
|
}
|
|
31
|
-
|
|
32
24
|
}
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
if (typeof classesOrStyles === 'string') {
|
|
38
|
-
classes[method](element, classesOrStyles, method);
|
|
25
|
+
function setClassesOrStyles(element, classesOrStyles, method = "add") {
|
|
26
|
+
if (typeof classesOrStyles === "string" || Array.isArray(classesOrStyles)) {
|
|
27
|
+
classes[method](element, classesOrStyles);
|
|
39
28
|
} else {
|
|
40
|
-
styles[method](element, classesOrStyles
|
|
29
|
+
styles[method](element, classesOrStyles);
|
|
41
30
|
}
|
|
42
31
|
}
|
|
43
|
-
|
|
44
32
|
function testTransition(element) {
|
|
45
|
-
if (typeof window ===
|
|
33
|
+
if (typeof window === "undefined") {
|
|
46
34
|
return false;
|
|
47
35
|
}
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
transitionDuration
|
|
51
|
-
} = window.getComputedStyle(element);
|
|
52
|
-
return !!transitionDuration && transitionDuration !== '0s';
|
|
36
|
+
const { transitionDuration } = window.getComputedStyle(element);
|
|
37
|
+
return !!transitionDuration && transitionDuration !== "0s";
|
|
53
38
|
}
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
39
|
+
async function start(element, classesOrStyles) {
|
|
40
|
+
const trs = Transition.getInstance(element);
|
|
41
|
+
trs.isTransitioning = true;
|
|
42
|
+
setClassesOrStyles(element, classesOrStyles.from);
|
|
43
|
+
await nextFrame();
|
|
44
|
+
setClassesOrStyles(element, classesOrStyles.active);
|
|
45
|
+
await nextFrame();
|
|
57
46
|
}
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
return _next.apply(this, arguments);
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
function _next() {
|
|
76
|
-
_next = _asyncToGenerator(function* (element, classesOrStyles) {
|
|
77
|
-
var hasTransition = testTransition(element);
|
|
78
|
-
return new Promise(function () {
|
|
79
|
-
var _ref = _asyncToGenerator(function* (resolve) {
|
|
80
|
-
if (hasTransition) {
|
|
81
|
-
var trs = Transition.getInstance(element);
|
|
82
|
-
trs.transitionEndHandler = resolve;
|
|
83
|
-
element.addEventListener('transitionend', trs.transitionEndHandler, false);
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
setClassesOrStyles(element, classesOrStyles.from, 'remove');
|
|
87
|
-
setClassesOrStyles(element, classesOrStyles.to);
|
|
88
|
-
yield nextFrame();
|
|
89
|
-
|
|
90
|
-
if (!hasTransition) {
|
|
91
|
-
resolve();
|
|
92
|
-
}
|
|
93
|
-
});
|
|
94
|
-
|
|
95
|
-
return function (_x7) {
|
|
96
|
-
return _ref.apply(this, arguments);
|
|
97
|
-
};
|
|
98
|
-
}());
|
|
47
|
+
async function next(element, classesOrStyles) {
|
|
48
|
+
const hasTransition = testTransition(element);
|
|
49
|
+
return new Promise(async (resolve) => {
|
|
50
|
+
if (hasTransition) {
|
|
51
|
+
const trs = Transition.getInstance(element);
|
|
52
|
+
trs.transitionEndHandler = resolve;
|
|
53
|
+
element.addEventListener("transitionend", trs.transitionEndHandler, false);
|
|
54
|
+
}
|
|
55
|
+
setClassesOrStyles(element, classesOrStyles.from, "remove");
|
|
56
|
+
setClassesOrStyles(element, classesOrStyles.to);
|
|
57
|
+
await nextFrame();
|
|
58
|
+
if (!hasTransition) {
|
|
59
|
+
resolve();
|
|
60
|
+
}
|
|
99
61
|
});
|
|
100
|
-
return _next.apply(this, arguments);
|
|
101
62
|
}
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
if (mode === 'remove') {
|
|
109
|
-
setClassesOrStyles(element, classesOrStyles.to, 'remove');
|
|
63
|
+
function end(element, classesOrStyles, mode = "remove") {
|
|
64
|
+
const trs = Transition.getInstance(element);
|
|
65
|
+
element.removeEventListener("transitionend", trs.transitionEndHandler, false);
|
|
66
|
+
if (mode === "remove") {
|
|
67
|
+
setClassesOrStyles(element, classesOrStyles.to, "remove");
|
|
110
68
|
}
|
|
111
|
-
|
|
112
|
-
setClassesOrStyles(element, classesOrStyles.active, 'remove');
|
|
69
|
+
setClassesOrStyles(element, classesOrStyles.active, "remove");
|
|
113
70
|
trs.isTransitioning = false;
|
|
114
71
|
trs.transitionEndHandler = null;
|
|
115
72
|
}
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
73
|
+
async function transition(element, name, endMode = "remove") {
|
|
74
|
+
const classesOrStyles = typeof name === "string" ? {
|
|
75
|
+
from: `${name}-from`,
|
|
76
|
+
active: `${name}-active`,
|
|
77
|
+
to: `${name}-to`
|
|
78
|
+
} : {
|
|
79
|
+
from: "",
|
|
80
|
+
active: "",
|
|
81
|
+
to: "",
|
|
82
|
+
...name
|
|
83
|
+
};
|
|
84
|
+
const trs = Transition.getInstance(element);
|
|
85
|
+
if (trs.isTransitioning) {
|
|
86
|
+
end(element, classesOrStyles);
|
|
87
|
+
}
|
|
88
|
+
await start(element, classesOrStyles);
|
|
89
|
+
await next(element, classesOrStyles);
|
|
90
|
+
end(element, classesOrStyles, endMode);
|
|
91
|
+
return Promise.resolve();
|
|
119
92
|
}
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
var classesOrStyles = typeof name === 'string' ? {
|
|
125
|
-
from: "".concat(name, "-from"),
|
|
126
|
-
active: "".concat(name, "-active"),
|
|
127
|
-
to: "".concat(name, "-to")
|
|
128
|
-
} : _objectSpread({
|
|
129
|
-
from: '',
|
|
130
|
-
active: '',
|
|
131
|
-
to: ''
|
|
132
|
-
}, name);
|
|
133
|
-
var trs = Transition.getInstance(element);
|
|
134
|
-
|
|
135
|
-
if (trs.isTransitioning) {
|
|
136
|
-
end(element, classesOrStyles);
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
yield start(element, classesOrStyles);
|
|
140
|
-
yield next(element, classesOrStyles);
|
|
141
|
-
end(element, classesOrStyles, endMode);
|
|
142
|
-
return Promise.resolve();
|
|
143
|
-
});
|
|
144
|
-
return _transition.apply(this, arguments);
|
|
145
|
-
}
|
|
93
|
+
export {
|
|
94
|
+
transition as default,
|
|
95
|
+
setClassesOrStyles
|
|
96
|
+
};
|
|
@@ -0,0 +1,34 @@
|
|
|
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/debounce.js
|
|
20
|
+
var debounce_exports = {};
|
|
21
|
+
__export(debounce_exports, {
|
|
22
|
+
default: () => debounce
|
|
23
|
+
});
|
|
24
|
+
module.exports = __toCommonJS(debounce_exports);
|
|
25
|
+
function debounce(fn, delay = 300) {
|
|
26
|
+
let timeout;
|
|
27
|
+
return function debounced(...args) {
|
|
28
|
+
clearTimeout(timeout);
|
|
29
|
+
timeout = setTimeout(() => {
|
|
30
|
+
fn(...args);
|
|
31
|
+
}, delay);
|
|
32
|
+
};
|
|
33
|
+
}
|
|
34
|
+
if (module.exports.default) module.exports = module.exports.default;
|
package/utils/debounce.js
CHANGED
|
@@ -1,14 +1,12 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
return function debounced() {
|
|
5
|
-
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
6
|
-
args[_key] = arguments[_key];
|
|
7
|
-
}
|
|
8
|
-
|
|
1
|
+
function debounce(fn, delay = 300) {
|
|
2
|
+
let timeout;
|
|
3
|
+
return function debounced(...args) {
|
|
9
4
|
clearTimeout(timeout);
|
|
10
5
|
timeout = setTimeout(() => {
|
|
11
6
|
fn(...args);
|
|
12
7
|
}, delay);
|
|
13
8
|
};
|
|
14
|
-
}
|
|
9
|
+
}
|
|
10
|
+
export {
|
|
11
|
+
debounce as default
|
|
12
|
+
};
|
|
@@ -0,0 +1,82 @@
|
|
|
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/focusTrap.js
|
|
23
|
+
var focusTrap_exports = {};
|
|
24
|
+
__export(focusTrap_exports, {
|
|
25
|
+
default: () => useFocusTrap,
|
|
26
|
+
saveActiveElement: () => saveActiveElement,
|
|
27
|
+
trap: () => trap,
|
|
28
|
+
untrap: () => untrap
|
|
29
|
+
});
|
|
30
|
+
module.exports = __toCommonJS(focusTrap_exports);
|
|
31
|
+
var import_keyCodes = __toESM(require("./keyCodes.cjs"), 1);
|
|
32
|
+
var FOCUSABLE_ELEMENTS = [
|
|
33
|
+
'a[href]:not([tabindex^="-"]):not([inert])',
|
|
34
|
+
'area[href]:not([tabindex^="-"]):not([inert])',
|
|
35
|
+
"input:not([disabled]):not([inert])",
|
|
36
|
+
"select:not([disabled]):not([inert])",
|
|
37
|
+
"textarea:not([disabled]):not([inert])",
|
|
38
|
+
"button:not([disabled]):not([inert])",
|
|
39
|
+
'iframe:not([tabindex^="-"]):not([inert])',
|
|
40
|
+
'audio:not([tabindex^="-"]):not([inert])',
|
|
41
|
+
'video:not([tabindex^="-"]):not([inert])',
|
|
42
|
+
'[contenteditable]:not([tabindex^="-"]):not([inert])',
|
|
43
|
+
'[tabindex]:not([tabindex^="-"]):not([inert])'
|
|
44
|
+
];
|
|
45
|
+
var focusedBefore;
|
|
46
|
+
function saveActiveElement() {
|
|
47
|
+
focusedBefore = document.activeElement;
|
|
48
|
+
}
|
|
49
|
+
function trap(element, event) {
|
|
50
|
+
if (event.keyCode !== import_keyCodes.default.TAB) {
|
|
51
|
+
return;
|
|
52
|
+
}
|
|
53
|
+
if (!focusedBefore) {
|
|
54
|
+
focusedBefore = document.activeElement;
|
|
55
|
+
}
|
|
56
|
+
const focusableChildren = Array.from(element.querySelectorAll(FOCUSABLE_ELEMENTS.join(", ")));
|
|
57
|
+
const focusedItemIndex = document.activeElement instanceof HTMLElement ? focusableChildren.indexOf(document.activeElement) : -1;
|
|
58
|
+
if (!focusableChildren.length) {
|
|
59
|
+
return;
|
|
60
|
+
}
|
|
61
|
+
if (focusedItemIndex < 0) {
|
|
62
|
+
focusableChildren[0].focus();
|
|
63
|
+
event.preventDefault();
|
|
64
|
+
}
|
|
65
|
+
if (event.shiftKey && focusedItemIndex === 0) {
|
|
66
|
+
focusableChildren[focusableChildren.length - 1].focus();
|
|
67
|
+
event.preventDefault();
|
|
68
|
+
} else if (!event.shiftKey && focusedItemIndex === focusableChildren.length - 1) {
|
|
69
|
+
focusableChildren[0].focus();
|
|
70
|
+
event.preventDefault();
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
function untrap() {
|
|
74
|
+
if (focusedBefore && typeof focusedBefore.focus === "function") {
|
|
75
|
+
focusedBefore.focus();
|
|
76
|
+
focusedBefore = null;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
function useFocusTrap() {
|
|
80
|
+
return { trap, untrap, saveActiveElement };
|
|
81
|
+
}
|
|
82
|
+
if (module.exports.default) module.exports = module.exports.default;
|