@studiometa/ui 1.0.0-rc.2 → 1.0.0-rc.4
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/Hoverable/Hoverable.d.ts +67 -0
- package/Hoverable/Hoverable.js +88 -0
- package/Hoverable/Hoverable.js.map +7 -0
- package/Hoverable/index.d.ts +1 -0
- package/Hoverable/index.js +2 -0
- package/Hoverable/index.js.map +7 -0
- package/Menu/Menu.d.ts +7 -1
- package/Menu/Menu.js +25 -8
- package/Menu/Menu.js.map +2 -2
- package/Menu/MenuBtn.d.ts +0 -13
- package/Menu/MenuBtn.js +0 -13
- package/Menu/MenuBtn.js.map +2 -2
- package/Menu/MenuList.d.ts +2 -2
- package/Menu/MenuList.js +18 -23
- package/Menu/MenuList.js.map +2 -2
- package/index.d.ts +1 -0
- package/index.js +1 -0
- package/index.js.map +2 -2
- package/package.json +1 -1
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import { Base } from '@studiometa/js-toolkit';
|
|
2
|
+
import type { BaseConfig, BaseProps, PointerServiceProps } from '@studiometa/js-toolkit';
|
|
3
|
+
export interface HoverableProps extends BaseProps {
|
|
4
|
+
$refs: {
|
|
5
|
+
/**
|
|
6
|
+
* Target element that will be moved on hover.
|
|
7
|
+
*/
|
|
8
|
+
target: HTMLElement;
|
|
9
|
+
};
|
|
10
|
+
$options: {
|
|
11
|
+
/**
|
|
12
|
+
* A number between in the range `0–1` used to smoothen the transition between each position.
|
|
13
|
+
*/
|
|
14
|
+
sensitivity: number;
|
|
15
|
+
/**
|
|
16
|
+
* Wether to reverse the movement of the target or not.
|
|
17
|
+
*/
|
|
18
|
+
reversed: boolean;
|
|
19
|
+
/**
|
|
20
|
+
* Wether to stop moving the target when the mouse is not over the root element or not.
|
|
21
|
+
*/
|
|
22
|
+
contained: boolean;
|
|
23
|
+
};
|
|
24
|
+
}
|
|
25
|
+
declare const Hoverable_base: import("@studiometa/js-toolkit").BaseDecorator<import("@studiometa/js-toolkit").RelativePointerInterface, Base<BaseProps>>;
|
|
26
|
+
/**
|
|
27
|
+
* Hoverable class.
|
|
28
|
+
* @see https://ui.studiometa.dev/-/components/Hoverable/
|
|
29
|
+
*/
|
|
30
|
+
export declare class Hoverable<T extends BaseProps = BaseProps> extends Hoverable_base<T & HoverableProps> {
|
|
31
|
+
/**
|
|
32
|
+
* Config.
|
|
33
|
+
*/
|
|
34
|
+
static config: BaseConfig;
|
|
35
|
+
props: {
|
|
36
|
+
x: number;
|
|
37
|
+
y: number;
|
|
38
|
+
dampedX: number;
|
|
39
|
+
dampedY: number;
|
|
40
|
+
};
|
|
41
|
+
/**
|
|
42
|
+
* The hoverable element, defaults to `this.$refs.target`.
|
|
43
|
+
*/
|
|
44
|
+
get target(): HTMLElement;
|
|
45
|
+
/**
|
|
46
|
+
* The bouding element, defaults to `this.$el`.
|
|
47
|
+
*/
|
|
48
|
+
get parent(): HTMLElement;
|
|
49
|
+
/**
|
|
50
|
+
* The bounds values in which the target can move.
|
|
51
|
+
*/
|
|
52
|
+
get bounds(): {
|
|
53
|
+
yMin: number;
|
|
54
|
+
yMax: number;
|
|
55
|
+
xMin: number;
|
|
56
|
+
xMax: number;
|
|
57
|
+
};
|
|
58
|
+
/**
|
|
59
|
+
* Update props when the mouse moves.
|
|
60
|
+
*/
|
|
61
|
+
movedrelative({ progress }: PointerServiceProps): void;
|
|
62
|
+
/**
|
|
63
|
+
* Update target position on each frame.
|
|
64
|
+
*/
|
|
65
|
+
ticked(): () => void;
|
|
66
|
+
}
|
|
67
|
+
export {};
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import { Base, withRelativePointer } from "@studiometa/js-toolkit";
|
|
2
|
+
import { map, transform, damp, getOffsetSizes, clamp01 } from "@studiometa/js-toolkit/utils";
|
|
3
|
+
class Hoverable extends withRelativePointer(Base) {
|
|
4
|
+
/**
|
|
5
|
+
* Config.
|
|
6
|
+
*/
|
|
7
|
+
static config = {
|
|
8
|
+
name: "Hoverable",
|
|
9
|
+
refs: ["target"],
|
|
10
|
+
options: {
|
|
11
|
+
sensitivity: {
|
|
12
|
+
type: Number,
|
|
13
|
+
default: 0.1
|
|
14
|
+
},
|
|
15
|
+
reversed: Boolean,
|
|
16
|
+
contained: Boolean
|
|
17
|
+
}
|
|
18
|
+
};
|
|
19
|
+
props = {
|
|
20
|
+
x: 0,
|
|
21
|
+
y: 0,
|
|
22
|
+
dampedX: 0,
|
|
23
|
+
dampedY: 0
|
|
24
|
+
};
|
|
25
|
+
/**
|
|
26
|
+
* The hoverable element, defaults to `this.$refs.target`.
|
|
27
|
+
*/
|
|
28
|
+
get target() {
|
|
29
|
+
return this.$refs.target;
|
|
30
|
+
}
|
|
31
|
+
/**
|
|
32
|
+
* The bouding element, defaults to `this.$el`.
|
|
33
|
+
*/
|
|
34
|
+
get parent() {
|
|
35
|
+
return this.$el;
|
|
36
|
+
}
|
|
37
|
+
/**
|
|
38
|
+
* The bounds values in which the target can move.
|
|
39
|
+
*/
|
|
40
|
+
get bounds() {
|
|
41
|
+
const targetSizes = getOffsetSizes(this.target);
|
|
42
|
+
const parentSizes = getOffsetSizes(this.parent);
|
|
43
|
+
const xMin = targetSizes.x - parentSizes.x;
|
|
44
|
+
const yMin = targetSizes.y - parentSizes.y;
|
|
45
|
+
const xMax = xMin + targetSizes.width - parentSizes.width;
|
|
46
|
+
const yMax = yMin + targetSizes.height - parentSizes.height;
|
|
47
|
+
return {
|
|
48
|
+
yMin: yMin * -1,
|
|
49
|
+
yMax: yMax * -1,
|
|
50
|
+
xMin: xMin * -1,
|
|
51
|
+
xMax: xMax * -1
|
|
52
|
+
};
|
|
53
|
+
}
|
|
54
|
+
/**
|
|
55
|
+
* Update props when the mouse moves.
|
|
56
|
+
*/
|
|
57
|
+
movedrelative({ progress }) {
|
|
58
|
+
const { bounds, props } = this;
|
|
59
|
+
const { reversed, contained } = this.$options;
|
|
60
|
+
const { x, y } = progress;
|
|
61
|
+
if (contained && (y < 0 || x < 0 || y > 1 || x > 1)) {
|
|
62
|
+
return;
|
|
63
|
+
}
|
|
64
|
+
const from = reversed ? 1 : 0;
|
|
65
|
+
const to = reversed ? 0 : 1;
|
|
66
|
+
props.y = map(clamp01(y), from, to, bounds.yMin, bounds.yMax);
|
|
67
|
+
props.x = map(clamp01(x), from, to, bounds.xMin, bounds.xMax);
|
|
68
|
+
}
|
|
69
|
+
/**
|
|
70
|
+
* Update target position on each frame.
|
|
71
|
+
*/
|
|
72
|
+
ticked() {
|
|
73
|
+
const { props, target } = this;
|
|
74
|
+
const { sensitivity } = this.$options;
|
|
75
|
+
props.dampedY = damp(props.y, props.dampedY, sensitivity);
|
|
76
|
+
props.dampedX = damp(props.x, props.dampedX, sensitivity);
|
|
77
|
+
return () => {
|
|
78
|
+
transform(target, {
|
|
79
|
+
y: props.dampedY,
|
|
80
|
+
x: props.dampedX
|
|
81
|
+
});
|
|
82
|
+
};
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
export {
|
|
86
|
+
Hoverable
|
|
87
|
+
};
|
|
88
|
+
//# sourceMappingURL=Hoverable.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../packages/ui/Hoverable/Hoverable.ts"],
|
|
4
|
+
"sourcesContent": ["import { Base, withRelativePointer } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps, PointerServiceProps } from '@studiometa/js-toolkit';\nimport { map, transform, damp, getOffsetSizes, clamp01 } from '@studiometa/js-toolkit/utils';\n\nexport interface HoverableProps extends BaseProps {\n $refs: {\n /**\n * Target element that will be moved on hover.\n */\n target: HTMLElement;\n };\n $options: {\n /**\n * A number between in the range `0\u20131` used to smoothen the transition between each position.\n */\n sensitivity: number;\n /**\n * Wether to reverse the movement of the target or not.\n */\n reversed: boolean;\n /**\n * Wether to stop moving the target when the mouse is not over the root element or not.\n */\n contained: boolean;\n };\n}\n\n/**\n * Hoverable class.\n * @see https://ui.studiometa.dev/-/components/Hoverable/\n */\nexport class Hoverable<T extends BaseProps = BaseProps> extends withRelativePointer(Base)<\n T & HoverableProps\n> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'Hoverable',\n refs: ['target'],\n options: {\n sensitivity: {\n type: Number,\n default: 0.1,\n },\n reversed: Boolean,\n contained: Boolean,\n },\n };\n\n props = {\n x: 0,\n y: 0,\n dampedX: 0,\n dampedY: 0,\n };\n\n /**\n * The hoverable element, defaults to `this.$refs.target`.\n */\n get target(): HTMLElement {\n return this.$refs.target;\n }\n\n /**\n * The bouding element, defaults to `this.$el`.\n */\n get parent(): HTMLElement {\n return this.$el;\n }\n\n /**\n * The bounds values in which the target can move.\n */\n get bounds() {\n const targetSizes = getOffsetSizes(this.target);\n const parentSizes = getOffsetSizes(this.parent);\n const xMin = targetSizes.x - parentSizes.x;\n const yMin = targetSizes.y - parentSizes.y;\n const xMax = xMin + targetSizes.width - parentSizes.width;\n const yMax = yMin + targetSizes.height - parentSizes.height;\n\n return {\n yMin: yMin * -1,\n yMax: yMax * -1,\n xMin: xMin * -1,\n xMax: xMax * -1,\n };\n }\n\n /**\n * Update props when the mouse moves.\n */\n movedrelative({ progress }: PointerServiceProps) {\n const { bounds, props } = this;\n const { reversed, contained } = this.$options;\n const { x, y } = progress;\n\n // Stop updating when pointer is outside of the parent bounds\n if (contained && (y < 0 || x < 0 || y > 1 || x > 1)) {\n return;\n }\n\n const from = reversed ? 1 : 0;\n const to = reversed ? 0 : 1;\n\n props.y = map(clamp01(y), from, to, bounds.yMin, bounds.yMax);\n props.x = map(clamp01(x), from, to, bounds.xMin, bounds.xMax);\n }\n\n /**\n * Update target position on each frame.\n */\n ticked() {\n const { props, target } = this;\n const { sensitivity } = this.$options;\n props.dampedY = damp(props.y, props.dampedY, sensitivity);\n props.dampedX = damp(props.x, props.dampedX, sensitivity);\n\n return () => {\n transform(target, {\n y: props.dampedY,\n x: props.dampedX,\n });\n };\n }\n}\n"],
|
|
5
|
+
"mappings": "AAAA,SAAS,MAAM,2BAA2B;AAE1C,SAAS,KAAK,WAAW,MAAM,gBAAgB,eAAe;AA6BvD,MAAM,kBAAmD,oBAAoB,IAAI,EAEtF;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,MAAM,CAAC,QAAQ;AAAA,IACf,SAAS;AAAA,MACP,aAAa;AAAA,QACX,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EAEA,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,GAAG;AAAA,IACH,SAAS;AAAA,IACT,SAAS;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,SAAsB;AACxB,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,SAAsB;AACxB,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,SAAS;AACX,UAAM,cAAc,eAAe,KAAK,MAAM;AAC9C,UAAM,cAAc,eAAe,KAAK,MAAM;AAC9C,UAAM,OAAO,YAAY,IAAI,YAAY;AACzC,UAAM,OAAO,YAAY,IAAI,YAAY;AACzC,UAAM,OAAO,OAAO,YAAY,QAAQ,YAAY;AACpD,UAAM,OAAO,OAAO,YAAY,SAAS,YAAY;AAErD,WAAO;AAAA,MACL,MAAM,OAAO;AAAA,MACb,MAAM,OAAO;AAAA,MACb,MAAM,OAAO;AAAA,MACb,MAAM,OAAO;AAAA,IACf;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,cAAc,EAAE,SAAS,GAAwB;AAC/C,UAAM,EAAE,QAAQ,MAAM,IAAI;AAC1B,UAAM,EAAE,UAAU,UAAU,IAAI,KAAK;AACrC,UAAM,EAAE,GAAG,EAAE,IAAI;AAGjB,QAAI,cAAc,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,IAAI;AACnD;AAAA,IACF;AAEA,UAAM,OAAO,WAAW,IAAI;AAC5B,UAAM,KAAK,WAAW,IAAI;AAE1B,UAAM,IAAI,IAAI,QAAQ,CAAC,GAAG,MAAM,IAAI,OAAO,MAAM,OAAO,IAAI;AAC5D,UAAM,IAAI,IAAI,QAAQ,CAAC,GAAG,MAAM,IAAI,OAAO,MAAM,OAAO,IAAI;AAAA,EAC9D;AAAA;AAAA;AAAA;AAAA,EAKA,SAAS;AACP,UAAM,EAAE,OAAO,OAAO,IAAI;AAC1B,UAAM,EAAE,YAAY,IAAI,KAAK;AAC7B,UAAM,UAAU,KAAK,MAAM,GAAG,MAAM,SAAS,WAAW;AACxD,UAAM,UAAU,KAAK,MAAM,GAAG,MAAM,SAAS,WAAW;AAExD,WAAO,MAAM;AACX,gBAAU,QAAQ;AAAA,QAChB,GAAG,MAAM;AAAA,QACT,GAAG,MAAM;AAAA,MACX,CAAC;AAAA,IACH;AAAA,EACF;AACF;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Hoverable.js';
|
package/Menu/Menu.d.ts
CHANGED
|
@@ -5,7 +5,7 @@ import { MenuList } from './MenuList.js';
|
|
|
5
5
|
export interface MenuProps extends BaseProps {
|
|
6
6
|
$children: {
|
|
7
7
|
Menu: Menu[];
|
|
8
|
-
|
|
8
|
+
MenuBtn: MenuBtn[];
|
|
9
9
|
MenuList: MenuList[];
|
|
10
10
|
};
|
|
11
11
|
$options: {
|
|
@@ -45,6 +45,12 @@ export declare class Menu<T extends BaseProps = BaseProps> extends Base<T & Menu
|
|
|
45
45
|
* Keyboard management.
|
|
46
46
|
*/
|
|
47
47
|
keyed({ ENTER, ESC, isUp }: KeyServiceProps): void;
|
|
48
|
+
/**
|
|
49
|
+
* Close menu list on click outside.
|
|
50
|
+
*/
|
|
51
|
+
onDocumentClick({ event }: {
|
|
52
|
+
event: MouseEvent;
|
|
53
|
+
}): void;
|
|
48
54
|
/**
|
|
49
55
|
* Toggle menu items on button click.
|
|
50
56
|
*/
|
package/Menu/Menu.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Base,
|
|
1
|
+
import { Base, getClosestParent } from "@studiometa/js-toolkit";
|
|
2
2
|
import { nextTick } from "@studiometa/js-toolkit/utils";
|
|
3
3
|
import { MenuBtn } from "./MenuBtn.js";
|
|
4
4
|
import { MenuList } from "./MenuList.js";
|
|
@@ -25,13 +25,21 @@ class Menu extends Base {
|
|
|
25
25
|
* Get the first `MenuList` instance.
|
|
26
26
|
*/
|
|
27
27
|
get menuList() {
|
|
28
|
-
|
|
28
|
+
for (const menuList of this.$children.MenuList) {
|
|
29
|
+
if (getClosestParent(menuList, this.constructor) === this) {
|
|
30
|
+
return menuList;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
29
33
|
}
|
|
30
34
|
/**
|
|
31
35
|
* Get the first `MenuBtn` instance.
|
|
32
36
|
*/
|
|
33
37
|
get menuBtn() {
|
|
34
|
-
|
|
38
|
+
for (const menuBtn of this.$children.MenuBtn) {
|
|
39
|
+
if (getClosestParent(menuBtn, this.constructor) === this) {
|
|
40
|
+
return menuBtn;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
35
43
|
}
|
|
36
44
|
/**
|
|
37
45
|
* Test which mode to use.
|
|
@@ -75,11 +83,20 @@ class Menu extends Base {
|
|
|
75
83
|
}
|
|
76
84
|
}
|
|
77
85
|
}
|
|
86
|
+
/**
|
|
87
|
+
* Close menu list on click outside.
|
|
88
|
+
*/
|
|
89
|
+
onDocumentClick({ event }) {
|
|
90
|
+
if (this.shouldReactOnClick && !this.$el.contains(event.target)) {
|
|
91
|
+
this.close();
|
|
92
|
+
}
|
|
93
|
+
}
|
|
78
94
|
/**
|
|
79
95
|
* Toggle menu items on button click.
|
|
80
96
|
*/
|
|
81
97
|
onMenuBtnClick({ event, target }) {
|
|
82
|
-
if (
|
|
98
|
+
if (!this.shouldReactOnClick) return;
|
|
99
|
+
if (getClosestParent(target, this.constructor) === this) {
|
|
83
100
|
event.preventDefault();
|
|
84
101
|
this.toggle();
|
|
85
102
|
}
|
|
@@ -122,11 +139,11 @@ class Menu extends Base {
|
|
|
122
139
|
* Close other non-parent menu items on menu items open.
|
|
123
140
|
*/
|
|
124
141
|
onMenuListItemsOpen({ target }) {
|
|
125
|
-
this.$children.MenuList
|
|
126
|
-
if (!
|
|
127
|
-
|
|
142
|
+
for (const menuList of this.$children.MenuList) {
|
|
143
|
+
if (!menuList.$el.contains(target.$el)) {
|
|
144
|
+
menuList.close();
|
|
128
145
|
}
|
|
129
|
-
}
|
|
146
|
+
}
|
|
130
147
|
}
|
|
131
148
|
/**
|
|
132
149
|
* Close the menu.
|
package/Menu/Menu.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../packages/ui/Menu/Menu.ts"],
|
|
4
|
-
"sourcesContent": ["import { Base,
|
|
5
|
-
"mappings": "AAAA,SAAS,MAAM,
|
|
4
|
+
"sourcesContent": ["import { Base, getClosestParent } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps, KeyServiceProps } from '@studiometa/js-toolkit';\nimport { nextTick } from '@studiometa/js-toolkit/utils';\nimport { MenuBtn } from './MenuBtn.js';\nimport { MenuList } from './MenuList.js';\n\nexport interface MenuProps extends BaseProps {\n $children: {\n // eslint-disable-next-line no-use-before-define\n Menu: Menu[];\n MenuBtn: MenuBtn[];\n MenuList: MenuList[];\n };\n $options: {\n mode: 'click' | 'hover';\n };\n}\n\n/**\n * Menu class.\n */\nexport class Menu<T extends BaseProps = BaseProps> extends Base<T & MenuProps> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'Menu',\n components: {\n MenuBtn,\n MenuList,\n Menu,\n },\n options: {\n mode: {\n type: String,\n default: 'click', // or 'hover'\n },\n },\n };\n\n /**\n * Get the first `MenuList` instance.\n */\n get menuList(): MenuList {\n for (const menuList of this.$children.MenuList) {\n if (getClosestParent(menuList, this.constructor) === this) {\n return menuList;\n }\n }\n }\n\n /**\n * Get the first `MenuBtn` instance.\n */\n get menuBtn(): MenuBtn {\n for (const menuBtn of this.$children.MenuBtn) {\n if (getClosestParent(menuBtn, this.constructor) === this) {\n return menuBtn;\n }\n }\n }\n\n /**\n * Test which mode to use.\n */\n get shouldReactOnClick(): boolean {\n return this.$options.mode === 'click';\n }\n\n /**\n * Wether the button or the items are hovered.\n */\n get isHover(): boolean {\n return this.menuBtn.isHover || this.menuList.isHover;\n }\n\n /**\n * Set attributes on mounted, destroy the component if it is missing required\n * child components.\n */\n mounted() {\n if (!this.menuBtn || !this.menuList) {\n return this.$destroy();\n }\n\n this.menuBtn.$el.setAttribute('aria-controls', this.$id);\n this.menuList.$el.setAttribute('id', this.$id);\n this.menuList.close();\n }\n\n /**\n * Keyboard management.\n */\n keyed({ ENTER, ESC, isUp }: KeyServiceProps) {\n if (!isUp) {\n return;\n }\n\n if (ESC) {\n this.close();\n return;\n }\n\n if (!this.shouldReactOnClick) {\n const hasFocusElementWithin = document.activeElement === this.menuBtn.$el;\n\n if (ENTER && hasFocusElementWithin) {\n this.toggle();\n }\n }\n }\n\n /**\n * Close menu list on click outside.\n */\n onDocumentClick({ event }: { event: MouseEvent }) {\n if (this.shouldReactOnClick && !this.$el.contains(event.target as Node)) {\n this.close();\n }\n }\n\n /**\n * Toggle menu items on button click.\n */\n onMenuBtnClick({ event, target }: { event: MouseEvent; target: MenuBtn }) {\n if (!this.shouldReactOnClick) return;\n\n if (getClosestParent(target, this.constructor) === this) {\n event.preventDefault();\n this.toggle();\n }\n }\n\n /**\n * Open menu items on button mouse enter.\n */\n onMenuBtnMouseenter({ target }: { target: MenuBtn }) {\n if (target === this.menuBtn && !this.shouldReactOnClick) {\n this.open();\n }\n }\n\n /**\n * Close menu items on button mouse leave.\n */\n onMenuBtnMouseleave() {\n if (this.shouldReactOnClick) {\n return;\n }\n\n nextTick(() => {\n if (!this.isHover) {\n this.close();\n }\n });\n }\n\n /**\n * Close menu items on button mouse leave.\n */\n onMenuListMouseleave() {\n if (this.shouldReactOnClick) {\n return;\n }\n\n nextTick(() => {\n if (!this.isHover) {\n this.close();\n }\n });\n }\n\n /**\n * Close other non-parent menu items on menu items open.\n */\n onMenuListItemsOpen({ target }: { target: MenuList }) {\n for (const menuList of this.$children.MenuList) {\n if (!menuList.$el.contains(target.$el)) {\n menuList.close();\n }\n }\n }\n\n /**\n * Close the menu.\n */\n close() {\n this.menuList.close();\n }\n\n /**\n * Open the menu.\n */\n open() {\n this.menuList.open();\n }\n\n /**\n * Toggle the menu.\n */\n toggle() {\n this.menuList.toggle();\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/Menu/MenuBtn.d.ts
CHANGED
|
@@ -10,29 +10,16 @@ export declare class MenuBtn<T extends BaseProps = BaseProps> extends Base<T> {
|
|
|
10
10
|
static config: BaseConfig;
|
|
11
11
|
/**
|
|
12
12
|
* Wether the button is hovered or not.
|
|
13
|
-
* @type {boolean}
|
|
14
13
|
*/
|
|
15
14
|
isHover: boolean;
|
|
16
|
-
/**
|
|
17
|
-
* Dispatch the click event.
|
|
18
|
-
* @param {MouseEvent} event
|
|
19
|
-
* @returns {void}
|
|
20
|
-
*/
|
|
21
|
-
onClick({ event }: {
|
|
22
|
-
event: MouseEvent;
|
|
23
|
-
}): void;
|
|
24
15
|
/**
|
|
25
16
|
* Dispatch the mouseenter event.
|
|
26
|
-
* @param {MouseEvent} event
|
|
27
|
-
* @returns {void}
|
|
28
17
|
*/
|
|
29
18
|
onMouseenter({ event }: {
|
|
30
19
|
event: MouseEvent;
|
|
31
20
|
}): void;
|
|
32
21
|
/**
|
|
33
22
|
* Dispatch the mouseleave event.
|
|
34
|
-
* @param {MouseEvent} event
|
|
35
|
-
* @returns {void}
|
|
36
23
|
*/
|
|
37
24
|
onMouseleave({ event }: {
|
|
38
25
|
event: MouseEvent;
|
package/Menu/MenuBtn.js
CHANGED
|
@@ -8,21 +8,10 @@ class MenuBtn extends Base {
|
|
|
8
8
|
};
|
|
9
9
|
/**
|
|
10
10
|
* Wether the button is hovered or not.
|
|
11
|
-
* @type {boolean}
|
|
12
11
|
*/
|
|
13
12
|
isHover = false;
|
|
14
|
-
/**
|
|
15
|
-
* Dispatch the click event.
|
|
16
|
-
* @param {MouseEvent} event
|
|
17
|
-
* @returns {void}
|
|
18
|
-
*/
|
|
19
|
-
onClick({ event }) {
|
|
20
|
-
event.stopPropagation();
|
|
21
|
-
}
|
|
22
13
|
/**
|
|
23
14
|
* Dispatch the mouseenter event.
|
|
24
|
-
* @param {MouseEvent} event
|
|
25
|
-
* @returns {void}
|
|
26
15
|
*/
|
|
27
16
|
onMouseenter({ event }) {
|
|
28
17
|
this.isHover = true;
|
|
@@ -30,8 +19,6 @@ class MenuBtn extends Base {
|
|
|
30
19
|
}
|
|
31
20
|
/**
|
|
32
21
|
* Dispatch the mouseleave event.
|
|
33
|
-
* @param {MouseEvent} event
|
|
34
|
-
* @returns {void}
|
|
35
22
|
*/
|
|
36
23
|
onMouseleave({ event }) {
|
|
37
24
|
this.isHover = false;
|
package/Menu/MenuBtn.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../packages/ui/Menu/MenuBtn.ts"],
|
|
4
|
-
"sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\n\n/**\n * MenuBtn class.\n */\nexport class MenuBtn<T extends BaseProps = BaseProps> extends Base<T> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'MenuBtn',\n };\n\n /**\n * Wether the button is hovered or not.\n
|
|
5
|
-
"mappings": "AAAA,SAAS,YAAY;AAMd,MAAM,gBAAiD,KAAQ;AAAA;AAAA;AAAA;AAAA,EAIpE,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,EACR;AAAA;AAAA;AAAA;AAAA
|
|
4
|
+
"sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\n\n/**\n * MenuBtn class.\n */\nexport class MenuBtn<T extends BaseProps = BaseProps> extends Base<T> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'MenuBtn',\n };\n\n /**\n * Wether the button is hovered or not.\n */\n isHover = false;\n\n /**\n * Dispatch the mouseenter event.\n */\n onMouseenter({ event }: { event: MouseEvent }) {\n this.isHover = true;\n event.stopPropagation();\n }\n\n /**\n * Dispatch the mouseleave event.\n */\n onMouseleave({ event }: { event: MouseEvent }) {\n this.isHover = false;\n event.stopPropagation();\n }\n}\n"],
|
|
5
|
+
"mappings": "AAAA,SAAS,YAAY;AAMd,MAAM,gBAAiD,KAAQ;AAAA;AAAA;AAAA;AAAA,EAIpE,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,EACR;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AAAA;AAAA;AAAA;AAAA,EAKV,aAAa,EAAE,MAAM,GAA0B;AAC7C,SAAK,UAAU;AACf,UAAM,gBAAgB;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA,EAKA,aAAa,EAAE,MAAM,GAA0B;AAC7C,SAAK,UAAU;AACf,UAAM,gBAAgB;AAAA,EACxB;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/Menu/MenuList.d.ts
CHANGED
|
@@ -50,7 +50,7 @@ export declare class MenuList<T extends BaseProps = BaseProps> extends Transitio
|
|
|
50
50
|
*/
|
|
51
51
|
toggle(): void;
|
|
52
52
|
/**
|
|
53
|
-
* Update `tabindex` attribute of
|
|
53
|
+
* Update `tabindex` attribute of children focusable elements.
|
|
54
54
|
* @private
|
|
55
55
|
*/
|
|
56
56
|
__updateTabIndexes(mode?: 'open' | 'close'): void;
|
|
@@ -58,5 +58,5 @@ export declare class MenuList<T extends BaseProps = BaseProps> extends Transitio
|
|
|
58
58
|
* Filter out items which are inside a child `MenuList` instance.
|
|
59
59
|
* @private
|
|
60
60
|
*/
|
|
61
|
-
|
|
61
|
+
__isFocusableElementFromThisMenuList(item: HTMLElement): boolean;
|
|
62
62
|
}
|
package/Menu/MenuList.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { getInstanceFromElement } from "@studiometa/js-toolkit";
|
|
1
2
|
import { Transition } from "../Transition/index.js";
|
|
2
3
|
const FOCUSABLE_ELEMENTS = [
|
|
3
4
|
"a[href]:not([inert])",
|
|
@@ -67,13 +68,6 @@ class MenuList extends Transition {
|
|
|
67
68
|
if (this.isOpen) {
|
|
68
69
|
return;
|
|
69
70
|
}
|
|
70
|
-
const clickOutsideHandler = (event) => {
|
|
71
|
-
if (!this.$el.contains(event.target)) {
|
|
72
|
-
document.removeEventListener("click", clickOutsideHandler);
|
|
73
|
-
this.close();
|
|
74
|
-
}
|
|
75
|
-
};
|
|
76
|
-
document.addEventListener("click", clickOutsideHandler);
|
|
77
71
|
this.__updateTabIndexes("open");
|
|
78
72
|
this.$el.setAttribute("aria-hidden", "false");
|
|
79
73
|
this.isOpen = true;
|
|
@@ -87,9 +81,9 @@ class MenuList extends Transition {
|
|
|
87
81
|
if (!this.isOpen) {
|
|
88
82
|
return;
|
|
89
83
|
}
|
|
90
|
-
this.$children.MenuList
|
|
91
|
-
|
|
92
|
-
}
|
|
84
|
+
for (const menuList of this.$children.MenuList) {
|
|
85
|
+
menuList.close();
|
|
86
|
+
}
|
|
93
87
|
if (document.activeElement instanceof HTMLElement && this.$el.contains(document.activeElement)) {
|
|
94
88
|
document.activeElement.blur();
|
|
95
89
|
}
|
|
@@ -110,31 +104,32 @@ class MenuList extends Transition {
|
|
|
110
104
|
}
|
|
111
105
|
}
|
|
112
106
|
/**
|
|
113
|
-
* Update `tabindex` attribute of
|
|
107
|
+
* Update `tabindex` attribute of children focusable elements.
|
|
114
108
|
* @private
|
|
115
109
|
*/
|
|
116
110
|
__updateTabIndexes(mode = "open") {
|
|
117
|
-
const
|
|
118
|
-
(
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
item.removeAttribute("tabindex");
|
|
111
|
+
for (const item of Array.from(this.$el.querySelectorAll(FOCUSABLE_ELEMENTS))) {
|
|
112
|
+
if (this.__isFocusableElementFromThisMenuList(item)) {
|
|
113
|
+
if (mode === "close") {
|
|
114
|
+
item.setAttribute("tabindex", "-1");
|
|
115
|
+
} else {
|
|
116
|
+
item.removeAttribute("tabindex");
|
|
117
|
+
}
|
|
125
118
|
}
|
|
126
|
-
}
|
|
119
|
+
}
|
|
127
120
|
}
|
|
128
121
|
/**
|
|
129
122
|
* Filter out items which are inside a child `MenuList` instance.
|
|
130
123
|
* @private
|
|
131
124
|
*/
|
|
132
|
-
|
|
125
|
+
__isFocusableElementFromThisMenuList(item) {
|
|
133
126
|
let ancestor = item.parentElement;
|
|
134
|
-
|
|
127
|
+
let maybeInstance = null;
|
|
128
|
+
while (!maybeInstance) {
|
|
129
|
+
maybeInstance = getInstanceFromElement(ancestor, this.constructor);
|
|
135
130
|
ancestor = ancestor.parentElement;
|
|
136
131
|
}
|
|
137
|
-
return
|
|
132
|
+
return maybeInstance === this;
|
|
138
133
|
}
|
|
139
134
|
}
|
|
140
135
|
export {
|
package/Menu/MenuList.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../packages/ui/Menu/MenuList.ts"],
|
|
4
|
-
"sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { Transition } from '../Transition/index.js';\n\nconst FOCUSABLE_ELEMENTS = [\n 'a[href]:not([inert])',\n 'area[href]:not([inert])',\n 'input:not([disabled]):not([inert])',\n 'select:not([disabled]):not([inert])',\n 'textarea:not([disabled]):not([inert])',\n 'button:not([disabled]):not([inert])',\n 'iframe:not([inert])',\n 'audio:not([inert])',\n 'video:not([inert])',\n '[contenteditable]:not([inert])',\n '[tabindex]:not([inert])',\n].join(',');\n\nexport interface MenuListProps extends BaseProps {\n $children: {\n // eslint-disable-next-line no-use-before-define\n MenuList: MenuList[];\n };\n}\n\n/**\n * MenuList class.\n */\nexport class MenuList<T extends BaseProps = BaseProps> extends Transition<T & MenuListProps> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n ...Transition.config,\n name: 'MenuList',\n emits: ['items-open', 'items-close', 'items-mouseleave'],\n components: {\n MenuList,\n },\n };\n\n /**\n * Are the menu items visible?\n */\n isOpen = false;\n\n /**\n * Wether the component is hovered.\n */\n isHover = false;\n\n /**\n * Override `Transition` options.\n */\n // @ts-ignore\n get $options() {\n const options = super.$options;\n\n options.leaveKeep = true;\n options.enterKeep = true;\n\n return options;\n }\n\n /**\n * Update tab indexes on mount.\n */\n mounted() {\n this.__updateTabIndexes('close');\n }\n\n /**\n * Set hover state.\n */\n onMouseenter() {\n this.isHover = true;\n }\n\n /**\n * Unset hover state.\n */\n onMouseleave() {\n this.isHover = false;\n }\n\n /**\n * Display the menu items.\n */\n open() {\n if (this.isOpen) {\n return;\n }\n\n
|
|
5
|
-
"mappings": "AACA,SAAS,kBAAkB;AAE3B,MAAM,qBAAqB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,GAAG;AAYH,MAAM,iBAAkD,WAA8B;AAAA;AAAA;AAAA;AAAA,EAI3F,OAAO,SAAqB;AAAA,IAC1B,GAAG,WAAW;AAAA,IACd,MAAM;AAAA,IACN,OAAO,CAAC,cAAc,eAAe,kBAAkB;AAAA,IACvD,YAAY;AAAA,MACV;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,SAAS;AAAA;AAAA;AAAA;AAAA,EAKT,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAMV,IAAI,WAAW;AACb,UAAM,UAAU,MAAM;AAEtB,YAAQ,YAAY;AACpB,YAAQ,YAAY;AAEpB,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,SAAK,mBAAmB,OAAO;AAAA,EACjC;AAAA;AAAA;AAAA;AAAA,EAKA,eAAe;AACb,SAAK,UAAU;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA,EAKA,eAAe;AACb,SAAK,UAAU;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO;AACL,QAAI,KAAK,QAAQ;AACf;AAAA,IACF;
|
|
4
|
+
"sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { getInstanceFromElement } from '@studiometa/js-toolkit';\nimport { Transition } from '../Transition/index.js';\n\nconst FOCUSABLE_ELEMENTS = [\n 'a[href]:not([inert])',\n 'area[href]:not([inert])',\n 'input:not([disabled]):not([inert])',\n 'select:not([disabled]):not([inert])',\n 'textarea:not([disabled]):not([inert])',\n 'button:not([disabled]):not([inert])',\n 'iframe:not([inert])',\n 'audio:not([inert])',\n 'video:not([inert])',\n '[contenteditable]:not([inert])',\n '[tabindex]:not([inert])',\n].join(',');\n\nexport interface MenuListProps extends BaseProps {\n $children: {\n // eslint-disable-next-line no-use-before-define\n MenuList: MenuList[];\n };\n}\n\n/**\n * MenuList class.\n */\nexport class MenuList<T extends BaseProps = BaseProps> extends Transition<T & MenuListProps> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n ...Transition.config,\n name: 'MenuList',\n emits: ['items-open', 'items-close', 'items-mouseleave'],\n components: {\n MenuList,\n },\n };\n\n /**\n * Are the menu items visible?\n */\n isOpen = false;\n\n /**\n * Wether the component is hovered.\n */\n isHover = false;\n\n /**\n * Override `Transition` options.\n */\n // @ts-ignore\n get $options() {\n const options = super.$options;\n\n options.leaveKeep = true;\n options.enterKeep = true;\n\n return options;\n }\n\n /**\n * Update tab indexes on mount.\n */\n mounted() {\n this.__updateTabIndexes('close');\n }\n\n /**\n * Set hover state.\n */\n onMouseenter() {\n this.isHover = true;\n }\n\n /**\n * Unset hover state.\n */\n onMouseleave() {\n this.isHover = false;\n }\n\n /**\n * Display the menu items.\n */\n open() {\n if (this.isOpen) {\n return;\n }\n\n this.__updateTabIndexes('open');\n this.$el.setAttribute('aria-hidden', 'false');\n this.isOpen = true;\n this.enter();\n this.$emit('items-open');\n }\n\n /**\n * Hide the menu items.\n */\n close() {\n if (!this.isOpen) {\n return;\n }\n\n // Close child menu items.\n for (const menuList of this.$children.MenuList) {\n menuList.close();\n }\n\n if (\n document.activeElement instanceof HTMLElement &&\n this.$el.contains(document.activeElement)\n ) {\n document.activeElement.blur();\n }\n\n this.$el.setAttribute('aria-hidden', 'true');\n this.__updateTabIndexes('close');\n this.isOpen = false;\n this.leave();\n this.$emit('items-close');\n }\n\n /**\n * Toggle the menu items.\n */\n toggle() {\n if (this.isOpen) {\n this.close();\n } else {\n this.open();\n }\n }\n\n /**\n * Update `tabindex` attribute of children focusable elements.\n * @private\n */\n __updateTabIndexes(mode: 'open' | 'close' = 'open') {\n for (const item of Array.from(this.$el.querySelectorAll(FOCUSABLE_ELEMENTS))) {\n if (this.__isFocusableElementFromThisMenuList(item as HTMLElement)) {\n if (mode === 'close') {\n item.setAttribute('tabindex', '-1');\n } else {\n item.removeAttribute('tabindex');\n }\n }\n }\n }\n\n /**\n * Filter out items which are inside a child `MenuList` instance.\n * @private\n */\n __isFocusableElementFromThisMenuList(item: HTMLElement): boolean {\n let ancestor = item.parentElement;\n let maybeInstance =null\n\n // @ts-ignore\n while (!maybeInstance) {\n maybeInstance = getInstanceFromElement(ancestor, this.constructor);\n ancestor = ancestor.parentElement;\n }\n\n return maybeInstance === this;\n }\n}\n"],
|
|
5
|
+
"mappings": "AACA,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAE3B,MAAM,qBAAqB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,GAAG;AAYH,MAAM,iBAAkD,WAA8B;AAAA;AAAA;AAAA;AAAA,EAI3F,OAAO,SAAqB;AAAA,IAC1B,GAAG,WAAW;AAAA,IACd,MAAM;AAAA,IACN,OAAO,CAAC,cAAc,eAAe,kBAAkB;AAAA,IACvD,YAAY;AAAA,MACV;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,SAAS;AAAA;AAAA;AAAA;AAAA,EAKT,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAMV,IAAI,WAAW;AACb,UAAM,UAAU,MAAM;AAEtB,YAAQ,YAAY;AACpB,YAAQ,YAAY;AAEpB,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,SAAK,mBAAmB,OAAO;AAAA,EACjC;AAAA;AAAA;AAAA;AAAA,EAKA,eAAe;AACb,SAAK,UAAU;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA,EAKA,eAAe;AACb,SAAK,UAAU;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO;AACL,QAAI,KAAK,QAAQ;AACf;AAAA,IACF;AAEA,SAAK,mBAAmB,MAAM;AAC9B,SAAK,IAAI,aAAa,eAAe,OAAO;AAC5C,SAAK,SAAS;AACd,SAAK,MAAM;AACX,SAAK,MAAM,YAAY;AAAA,EACzB;AAAA;AAAA;AAAA;AAAA,EAKA,QAAQ;AACN,QAAI,CAAC,KAAK,QAAQ;AAChB;AAAA,IACF;AAGA,eAAW,YAAY,KAAK,UAAU,UAAU;AAC9C,eAAS,MAAM;AAAA,IACjB;AAEA,QACE,SAAS,yBAAyB,eAClC,KAAK,IAAI,SAAS,SAAS,aAAa,GACxC;AACA,eAAS,cAAc,KAAK;AAAA,IAC9B;AAEA,SAAK,IAAI,aAAa,eAAe,MAAM;AAC3C,SAAK,mBAAmB,OAAO;AAC/B,SAAK,SAAS;AACd,SAAK,MAAM;AACX,SAAK,MAAM,aAAa;AAAA,EAC1B;AAAA;AAAA;AAAA;AAAA,EAKA,SAAS;AACP,QAAI,KAAK,QAAQ;AACf,WAAK,MAAM;AAAA,IACb,OAAO;AACL,WAAK,KAAK;AAAA,IACZ;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,mBAAmB,OAAyB,QAAQ;AAClD,eAAW,QAAQ,MAAM,KAAK,KAAK,IAAI,iBAAiB,kBAAkB,CAAC,GAAG;AAC5E,UAAI,KAAK,qCAAqC,IAAmB,GAAG;AAClE,YAAI,SAAS,SAAS;AACpB,eAAK,aAAa,YAAY,IAAI;AAAA,QACpC,OAAO;AACL,eAAK,gBAAgB,UAAU;AAAA,QACjC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,qCAAqC,MAA4B;AAC/D,QAAI,WAAW,KAAK;AACpB,QAAI,gBAAe;AAGnB,WAAO,CAAC,eAAe;AACrB,sBAAgB,uBAAuB,UAAU,KAAK,WAAW;AACjE,iBAAW,SAAS;AAAA,IACtB;AAEA,WAAO,kBAAkB;AAAA,EAC3B;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/index.d.ts
CHANGED
|
@@ -10,6 +10,7 @@ export * from './Draggable/index.js';
|
|
|
10
10
|
export * from './Figure/index.js';
|
|
11
11
|
export * from './FigureVideo/index.js';
|
|
12
12
|
export * from './Frame/index.js';
|
|
13
|
+
export * from './Hoverable/index.js';
|
|
13
14
|
export * from './LargeText/index.js';
|
|
14
15
|
export * from './LazyInclude/index.js';
|
|
15
16
|
export * from './Menu/index.js';
|
package/index.js
CHANGED
|
@@ -10,6 +10,7 @@ export * from "./Draggable/index.js";
|
|
|
10
10
|
export * from "./Figure/index.js";
|
|
11
11
|
export * from "./FigureVideo/index.js";
|
|
12
12
|
export * from "./Frame/index.js";
|
|
13
|
+
export * from "./Hoverable/index.js";
|
|
13
14
|
export * from "./LargeText/index.js";
|
|
14
15
|
export * from "./LazyInclude/index.js";
|
|
15
16
|
export * from "./Menu/index.js";
|
package/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../packages/ui/index.ts"],
|
|
4
|
-
"sourcesContent": ["export * from './Accordion/index.js';\nexport * from './Action/index.js';\nexport * from './AnchorNav/index.js';\nexport * from './AnchorScrollTo/index.js';\nexport * from './CircularMarquee/index.js';\nexport * from './Cursor/index.js';\nexport * from './Data/index.js';\nexport * from './decorators/index.js';\nexport * from './Draggable/index.js';\nexport * from './Figure/index.js';\nexport * from './FigureVideo/index.js';\nexport * from './Frame/index.js';\nexport * from './LargeText/index.js';\nexport * from './LazyInclude/index.js';\nexport * from './Menu/index.js';\nexport * from './Modal/index.js';\nexport * from './Panel/index.js';\nexport * from './Prefetch/index.js';\nexport * from './ScrollAnimation/index.js';\nexport * from './ScrollReveal/index.js';\nexport * from './Sentinel/index.js';\nexport * from './Slider/index.js';\nexport * from './Sticky/index.js';\nexport * from './Tabs/index.js';\nexport * from './Transition/index.js';\n"],
|
|
5
|
-
"mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
|
|
4
|
+
"sourcesContent": ["export * from './Accordion/index.js';\nexport * from './Action/index.js';\nexport * from './AnchorNav/index.js';\nexport * from './AnchorScrollTo/index.js';\nexport * from './CircularMarquee/index.js';\nexport * from './Cursor/index.js';\nexport * from './Data/index.js';\nexport * from './decorators/index.js';\nexport * from './Draggable/index.js';\nexport * from './Figure/index.js';\nexport * from './FigureVideo/index.js';\nexport * from './Frame/index.js';\nexport * from './Hoverable/index.js';\nexport * from './LargeText/index.js';\nexport * from './LazyInclude/index.js';\nexport * from './Menu/index.js';\nexport * from './Modal/index.js';\nexport * from './Panel/index.js';\nexport * from './Prefetch/index.js';\nexport * from './ScrollAnimation/index.js';\nexport * from './ScrollReveal/index.js';\nexport * from './Sentinel/index.js';\nexport * from './Slider/index.js';\nexport * from './Sticky/index.js';\nexport * from './Tabs/index.js';\nexport * from './Transition/index.js';\n"],
|
|
5
|
+
"mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|