@studiometa/ui 1.0.0-alpha.1 → 1.0.0-alpha.11
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/atoms/Action/Action.d.ts +4 -6
- package/atoms/Action/Action.js +25 -60
- package/atoms/Action/Action.js.map +2 -2
- package/atoms/Action/ActionEvent.d.ts +55 -0
- package/atoms/Action/ActionEvent.js +130 -0
- package/atoms/Action/ActionEvent.js.map +7 -0
- package/atoms/AnchorScrollTo/AnchorScrollTo.d.ts +3 -3
- package/atoms/AnchorScrollTo/AnchorScrollTo.js +1 -3
- package/atoms/AnchorScrollTo/AnchorScrollTo.js.map +2 -2
- package/atoms/Data/DataBind.d.ts +2 -2
- package/atoms/Data/DataBind.js +19 -9
- package/atoms/Data/DataBind.js.map +2 -2
- package/atoms/Data/DataComputed.js +3 -3
- package/atoms/Data/DataComputed.js.map +2 -2
- package/atoms/Data/DataEffect.js +2 -2
- package/atoms/Data/DataEffect.js.map +2 -2
- package/atoms/Data/DataModel.js +1 -1
- package/atoms/Data/DataModel.js.map +2 -2
- package/atoms/Figure/AbstractFigure.d.ts +41 -0
- package/atoms/Figure/AbstractFigure.js +65 -0
- package/atoms/Figure/AbstractFigure.js.map +7 -0
- package/atoms/Figure/AbstractFigureDynamic.d.ts +29 -0
- package/atoms/Figure/AbstractFigureDynamic.js +48 -0
- package/atoms/Figure/AbstractFigureDynamic.js.map +7 -0
- package/atoms/Figure/Figure.d.ts +4 -35
- package/atoms/Figure/Figure.js +5 -68
- package/atoms/Figure/Figure.js.map +2 -2
- package/atoms/Figure/FigureShopify.d.ts +23 -0
- package/atoms/Figure/FigureShopify.js +38 -0
- package/atoms/Figure/FigureShopify.js.map +7 -0
- package/atoms/Figure/FigureTwicpics.d.ts +3 -19
- package/atoms/Figure/FigureTwicpics.js +10 -32
- package/atoms/Figure/FigureTwicpics.js.map +2 -2
- package/atoms/Figure/index.d.ts +1 -0
- package/atoms/Figure/index.js +1 -0
- package/atoms/Figure/index.js.map +2 -2
- package/atoms/Figure/utils.d.ts +8 -0
- package/atoms/Figure/utils.js +15 -0
- package/atoms/Figure/utils.js.map +7 -0
- package/atoms/FigureVideo/FigureVideo.js +1 -1
- package/atoms/FigureVideo/FigureVideo.js.map +1 -1
- package/atoms/FigureVideo/FigureVideoTwicpics.js +1 -1
- package/atoms/FigureVideo/FigureVideoTwicpics.js.map +1 -1
- package/atoms/LazyInclude/LazyInclude.d.ts +3 -1
- package/atoms/LazyInclude/LazyInclude.js +1 -1
- package/atoms/LazyInclude/LazyInclude.js.map +2 -2
- package/atoms/ScrollAnimation/ScrollAnimationChildWithEase.d.ts +1 -1
- package/atoms/ScrollAnimation/ScrollAnimationWithEase.d.ts +1 -1
- package/decorators/withTransition.d.ts +1 -0
- package/decorators/withTransition.js +47 -23
- package/decorators/withTransition.js.map +2 -2
- package/molecules/Accordion/AccordionCore.d.ts +6 -2
- package/molecules/Accordion/AccordionCore.js +2 -2
- package/molecules/Accordion/AccordionCore.js.map +2 -2
- package/molecules/AnchorNav/AnchorNav.d.ts +6 -2
- package/molecules/AnchorNav/AnchorNav.js +4 -4
- package/molecules/AnchorNav/AnchorNav.js.map +2 -2
- package/molecules/AnchorNav/AnchorNavLink.d.ts +1 -1
- package/molecules/Menu/Menu.d.ts +11 -4
- package/molecules/Menu/Menu.js +7 -9
- package/molecules/Menu/Menu.js.map +2 -2
- package/molecules/Menu/MenuBtn.d.ts +9 -3
- package/molecules/Menu/MenuBtn.js +3 -3
- package/molecules/Menu/MenuBtn.js.map +2 -2
- package/molecules/Menu/MenuList.d.ts +1 -1
- package/molecules/Slider/Slider.d.ts +6 -2
- package/molecules/Slider/Slider.js +2 -2
- package/molecules/Slider/Slider.js.map +2 -2
- package/molecules/Slider/SliderDots.d.ts +5 -2
- package/molecules/Slider/SliderDots.js +1 -1
- package/molecules/Slider/SliderDots.js.map +2 -2
- package/molecules/Slider/SliderDrag.d.ts +3 -1
- package/molecules/Slider/SliderDrag.js +1 -1
- package/molecules/Slider/SliderDrag.js.map +2 -2
- package/molecules/Sticky/Sticky.d.ts +3 -1
- package/molecules/Sticky/Sticky.js +1 -1
- package/molecules/Sticky/Sticky.js.map +2 -2
- package/molecules/Tabs/Tabs.d.ts +4 -1
- package/molecules/Tabs/Tabs.js +1 -1
- package/molecules/Tabs/Tabs.js.map +2 -2
- package/molecules/index.d.ts +2 -3
- package/molecules/index.js +2 -3
- package/molecules/index.js.map +2 -2
- package/organisms/Frame/Frame.d.ts +11 -3
- package/organisms/Frame/Frame.js +14 -16
- package/organisms/Frame/Frame.js.map +2 -2
- package/organisms/Frame/FrameTarget.d.ts +1 -1
- package/package.json +2 -2
- package/primitives/Transition/Transition.d.ts +1 -1
- package/atoms/Action/Action.cjs +0 -115
- package/atoms/Action/Action.cjs.map +0 -7
- package/atoms/Action/Target.cjs +0 -35
- package/atoms/Action/Target.cjs.map +0 -7
- package/atoms/Action/index.cjs +0 -22
- package/atoms/Action/index.cjs.map +0 -7
- package/atoms/AnchorScrollTo/AnchorScrollTo.cjs +0 -52
- package/atoms/AnchorScrollTo/AnchorScrollTo.cjs.map +0 -7
- package/atoms/AnchorScrollTo/index.cjs +0 -21
- package/atoms/AnchorScrollTo/index.cjs.map +0 -7
- package/atoms/CircularMarquee/CircularMarquee.cjs +0 -69
- package/atoms/CircularMarquee/CircularMarquee.cjs.map +0 -7
- package/atoms/CircularMarquee/index.cjs +0 -21
- package/atoms/CircularMarquee/index.cjs.map +0 -7
- package/atoms/Cursor/Cursor.cjs +0 -137
- package/atoms/Cursor/Cursor.cjs.map +0 -7
- package/atoms/Cursor/index.cjs +0 -21
- package/atoms/Cursor/index.cjs.map +0 -7
- package/atoms/Data/DataBind.cjs +0 -124
- package/atoms/Data/DataBind.cjs.map +0 -7
- package/atoms/Data/DataComputed.cjs +0 -49
- package/atoms/Data/DataComputed.cjs.map +0 -7
- package/atoms/Data/DataEffect.cjs +0 -47
- package/atoms/Data/DataEffect.cjs.map +0 -7
- package/atoms/Data/DataModel.cjs +0 -48
- package/atoms/Data/DataModel.cjs.map +0 -7
- package/atoms/Data/index.cjs +0 -24
- package/atoms/Data/index.cjs.map +0 -7
- package/atoms/Data/utils.cjs +0 -46
- package/atoms/Data/utils.cjs.map +0 -7
- package/atoms/Figure/Figure.cjs +0 -105
- package/atoms/Figure/Figure.cjs.map +0 -7
- package/atoms/Figure/FigureTwicpics.cjs +0 -123
- package/atoms/Figure/FigureTwicpics.cjs.map +0 -7
- package/atoms/Figure/index.cjs +0 -22
- package/atoms/Figure/index.cjs.map +0 -7
- package/atoms/FigureVideo/FigureVideo.cjs +0 -132
- package/atoms/FigureVideo/FigureVideo.cjs.map +0 -7
- package/atoms/FigureVideo/FigureVideoTwicpics.cjs +0 -153
- package/atoms/FigureVideo/FigureVideoTwicpics.cjs.map +0 -7
- package/atoms/FigureVideo/index.cjs +0 -22
- package/atoms/FigureVideo/index.cjs.map +0 -7
- package/atoms/LargeText/LargeText.cjs +0 -109
- package/atoms/LargeText/LargeText.cjs.map +0 -7
- package/atoms/LargeText/index.cjs +0 -21
- package/atoms/LargeText/index.cjs.map +0 -7
- package/atoms/LazyInclude/LazyInclude.cjs +0 -78
- package/atoms/LazyInclude/LazyInclude.cjs.map +0 -7
- package/atoms/LazyInclude/index.cjs +0 -21
- package/atoms/LazyInclude/index.cjs.map +0 -7
- package/atoms/Prefetch/AbstractPrefetch.cjs +0 -86
- package/atoms/Prefetch/AbstractPrefetch.cjs.map +0 -7
- package/atoms/Prefetch/PrefetchWhenOver.cjs +0 -42
- package/atoms/Prefetch/PrefetchWhenOver.cjs.map +0 -7
- package/atoms/Prefetch/PrefetchWhenVisible.cjs +0 -43
- package/atoms/Prefetch/PrefetchWhenVisible.cjs.map +0 -7
- package/atoms/Prefetch/index.cjs +0 -23
- package/atoms/Prefetch/index.cjs.map +0 -7
- package/atoms/ScrollAnimation/AbstractScrollAnimation.cjs +0 -95
- package/atoms/ScrollAnimation/AbstractScrollAnimation.cjs.map +0 -7
- package/atoms/ScrollAnimation/ScrollAnimation.cjs +0 -44
- package/atoms/ScrollAnimation/ScrollAnimation.cjs.map +0 -7
- package/atoms/ScrollAnimation/ScrollAnimationChild.cjs +0 -84
- package/atoms/ScrollAnimation/ScrollAnimationChild.cjs.map +0 -7
- package/atoms/ScrollAnimation/ScrollAnimationChildWithEase.cjs +0 -37
- package/atoms/ScrollAnimation/ScrollAnimationChildWithEase.cjs.map +0 -7
- package/atoms/ScrollAnimation/ScrollAnimationParent.cjs +0 -50
- package/atoms/ScrollAnimation/ScrollAnimationParent.cjs.map +0 -7
- package/atoms/ScrollAnimation/ScrollAnimationWithEase.cjs +0 -37
- package/atoms/ScrollAnimation/ScrollAnimationWithEase.cjs.map +0 -7
- package/atoms/ScrollAnimation/animationScrollWithEase.cjs +0 -59
- package/atoms/ScrollAnimation/animationScrollWithEase.cjs.map +0 -7
- package/atoms/ScrollAnimation/index.cjs +0 -27
- package/atoms/ScrollAnimation/index.cjs.map +0 -7
- package/atoms/ScrollReveal/ScrollReveal.cjs +0 -81
- package/atoms/ScrollReveal/ScrollReveal.cjs.map +0 -7
- package/atoms/ScrollReveal/index.cjs +0 -21
- package/atoms/ScrollReveal/index.cjs.map +0 -7
- package/atoms/index.cjs +0 -32
- package/atoms/index.cjs.map +0 -7
- package/decorators/index.cjs +0 -22
- package/decorators/index.cjs.map +0 -7
- package/decorators/withDeprecation.cjs +0 -47
- package/decorators/withDeprecation.cjs.map +0 -7
- package/decorators/withTransition.cjs +0 -86
- package/decorators/withTransition.cjs.map +0 -7
- package/index.cjs +0 -25
- package/index.cjs.map +0 -7
- package/molecules/Accordion/Accordion.cjs +0 -36
- package/molecules/Accordion/Accordion.cjs.map +0 -7
- package/molecules/Accordion/AccordionCore.cjs +0 -58
- package/molecules/Accordion/AccordionCore.cjs.map +0 -7
- package/molecules/Accordion/AccordionItem.cjs +0 -206
- package/molecules/Accordion/AccordionItem.cjs.map +0 -7
- package/molecules/Accordion/index.cjs +0 -22
- package/molecules/Accordion/index.cjs.map +0 -7
- package/molecules/AnchorNav/AnchorNav.cjs +0 -63
- package/molecules/AnchorNav/AnchorNav.cjs.map +0 -7
- package/molecules/AnchorNav/AnchorNavLink.cjs +0 -40
- package/molecules/AnchorNav/AnchorNavLink.cjs.map +0 -7
- package/molecules/AnchorNav/AnchorNavTarget.cjs +0 -35
- package/molecules/AnchorNav/AnchorNavTarget.cjs.map +0 -7
- package/molecules/AnchorNav/index.cjs +0 -23
- package/molecules/AnchorNav/index.cjs.map +0 -7
- package/molecules/Menu/Menu.cjs +0 -177
- package/molecules/Menu/Menu.cjs.map +0 -7
- package/molecules/Menu/MenuBtn.cjs +0 -66
- package/molecules/Menu/MenuBtn.cjs.map +0 -7
- package/molecules/Menu/MenuList.cjs +0 -165
- package/molecules/Menu/MenuList.cjs.map +0 -7
- package/molecules/Menu/index.cjs +0 -23
- package/molecules/Menu/index.cjs.map +0 -7
- package/molecules/Modal/Modal.cjs +0 -219
- package/molecules/Modal/Modal.cjs.map +0 -7
- package/molecules/Modal/ModalWithTransition.cjs +0 -69
- package/molecules/Modal/ModalWithTransition.cjs.map +0 -7
- package/molecules/Modal/index.cjs +0 -22
- package/molecules/Modal/index.cjs.map +0 -7
- package/molecules/Panel/Panel.cjs +0 -137
- package/molecules/Panel/Panel.cjs.map +0 -7
- package/molecules/Panel/index.cjs +0 -21
- package/molecules/Panel/index.cjs.map +0 -7
- package/molecules/Slider/AbstractSliderChild.cjs +0 -88
- package/molecules/Slider/AbstractSliderChild.cjs.map +0 -7
- package/molecules/Slider/Slider.cjs +0 -404
- package/molecules/Slider/Slider.cjs.map +0 -7
- package/molecules/Slider/SliderBtn.cjs +0 -71
- package/molecules/Slider/SliderBtn.cjs.map +0 -7
- package/molecules/Slider/SliderCount.cjs +0 -44
- package/molecules/Slider/SliderCount.cjs.map +0 -7
- package/molecules/Slider/SliderDots.cjs +0 -64
- package/molecules/Slider/SliderDots.cjs.map +0 -7
- package/molecules/Slider/SliderDrag.cjs +0 -66
- package/molecules/Slider/SliderDrag.cjs.map +0 -7
- package/molecules/Slider/SliderItem.cjs +0 -177
- package/molecules/Slider/SliderItem.cjs.map +0 -7
- package/molecules/Slider/SliderProgress.cjs +0 -49
- package/molecules/Slider/SliderProgress.cjs.map +0 -7
- package/molecules/Slider/index.cjs +0 -28
- package/molecules/Slider/index.cjs.map +0 -7
- package/molecules/Sticky/Sticky.cjs +0 -177
- package/molecules/Sticky/Sticky.cjs.map +0 -7
- package/molecules/Sticky/index.cjs +0 -21
- package/molecules/Sticky/index.cjs.map +0 -7
- package/molecules/TableOfContent/TableOfContent.cjs +0 -72
- package/molecules/TableOfContent/TableOfContent.cjs.map +0 -7
- package/molecules/TableOfContent/TableOfContentAnchor.cjs +0 -76
- package/molecules/TableOfContent/TableOfContentAnchor.cjs.map +0 -7
- package/molecules/TableOfContent/index.cjs +0 -22
- package/molecules/TableOfContent/index.cjs.map +0 -7
- package/molecules/Tabs/Tabs.cjs +0 -153
- package/molecules/Tabs/Tabs.cjs.map +0 -7
- package/molecules/Tabs/index.cjs +0 -21
- package/molecules/Tabs/index.cjs.map +0 -7
- package/molecules/index.cjs +0 -30
- package/molecules/index.cjs.map +0 -7
- package/organisms/Frame/Frame.cjs +0 -220
- package/organisms/Frame/Frame.cjs.map +0 -7
- package/organisms/Frame/FrameAnchor.cjs +0 -41
- package/organisms/Frame/FrameAnchor.cjs.map +0 -7
- package/organisms/Frame/FrameForm.cjs +0 -41
- package/organisms/Frame/FrameForm.cjs.map +0 -7
- package/organisms/Frame/FrameTarget.cjs +0 -114
- package/organisms/Frame/FrameTarget.cjs.map +0 -7
- package/organisms/Frame/index.cjs +0 -24
- package/organisms/Frame/index.cjs.map +0 -7
- package/organisms/index.cjs +0 -21
- package/organisms/index.cjs.map +0 -7
- package/primitives/Draggable/Draggable.cjs +0 -65
- package/primitives/Draggable/Draggable.cjs.map +0 -7
- package/primitives/Draggable/index.cjs +0 -21
- package/primitives/Draggable/index.cjs.map +0 -7
- package/primitives/Sentinel/Sentinel.cjs +0 -35
- package/primitives/Sentinel/Sentinel.cjs.map +0 -7
- package/primitives/Sentinel/index.cjs +0 -21
- package/primitives/Sentinel/index.cjs.map +0 -7
- package/primitives/Transition/Transition.cjs +0 -36
- package/primitives/Transition/Transition.cjs.map +0 -7
- package/primitives/Transition/index.cjs +0 -21
- package/primitives/Transition/index.cjs.map +0 -7
- package/primitives/index.cjs +0 -23
- package/primitives/index.cjs.map +0 -7
package/molecules/Menu/Menu.cjs
DELETED
|
@@ -1,177 +0,0 @@
|
|
|
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/ui/molecules/Menu/Menu.ts
|
|
20
|
-
var Menu_exports = {};
|
|
21
|
-
__export(Menu_exports, {
|
|
22
|
-
Menu: () => Menu
|
|
23
|
-
});
|
|
24
|
-
module.exports = __toCommonJS(Menu_exports);
|
|
25
|
-
var import_js_toolkit = require("@studiometa/js-toolkit");
|
|
26
|
-
var import_utils = require("@studiometa/js-toolkit/utils");
|
|
27
|
-
var import_MenuBtn = require("./MenuBtn.cjs");
|
|
28
|
-
var import_MenuList = require("./MenuList.cjs");
|
|
29
|
-
var Menu = class _Menu extends import_js_toolkit.Base {
|
|
30
|
-
/**
|
|
31
|
-
* Config.
|
|
32
|
-
*/
|
|
33
|
-
static config = {
|
|
34
|
-
name: "Menu",
|
|
35
|
-
components: {
|
|
36
|
-
MenuBtn: import_MenuBtn.MenuBtn,
|
|
37
|
-
MenuList: import_MenuList.MenuList,
|
|
38
|
-
Menu: _Menu
|
|
39
|
-
},
|
|
40
|
-
options: {
|
|
41
|
-
mode: {
|
|
42
|
-
type: String,
|
|
43
|
-
default: "click"
|
|
44
|
-
// or 'hover'
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
};
|
|
48
|
-
/**
|
|
49
|
-
* Get the first `MenuList` instance.
|
|
50
|
-
*/
|
|
51
|
-
get menuList() {
|
|
52
|
-
return (0, import_js_toolkit.getDirectChildren)(this, "Menu", "MenuList")[0];
|
|
53
|
-
}
|
|
54
|
-
/**
|
|
55
|
-
* Get the first `MenuBtn` instance.
|
|
56
|
-
*/
|
|
57
|
-
get menuBtn() {
|
|
58
|
-
return (0, import_js_toolkit.getDirectChildren)(this, "Menu", "MenuBtn")[0];
|
|
59
|
-
}
|
|
60
|
-
/**
|
|
61
|
-
* Test which mode to use.
|
|
62
|
-
*/
|
|
63
|
-
get shouldReactOnClick() {
|
|
64
|
-
return this.$options.mode === "click";
|
|
65
|
-
}
|
|
66
|
-
/**
|
|
67
|
-
* Wether the button or the items are hovered.
|
|
68
|
-
*/
|
|
69
|
-
get isHover() {
|
|
70
|
-
return this.menuBtn.isHover || this.menuList.isHover;
|
|
71
|
-
}
|
|
72
|
-
/**
|
|
73
|
-
* Set attributes on mounted, destroy the component if it is missing required
|
|
74
|
-
* child components.
|
|
75
|
-
*/
|
|
76
|
-
mounted() {
|
|
77
|
-
if (!this.menuBtn || !this.menuList) {
|
|
78
|
-
this.$destroy();
|
|
79
|
-
return;
|
|
80
|
-
}
|
|
81
|
-
this.menuBtn.$el.setAttribute("aria-controls", this.$id);
|
|
82
|
-
this.menuList.$el.setAttribute("id", this.$id);
|
|
83
|
-
this.menuList.close();
|
|
84
|
-
}
|
|
85
|
-
/**
|
|
86
|
-
* Keyboard management.
|
|
87
|
-
*/
|
|
88
|
-
keyed({ ENTER, ESC, isUp }) {
|
|
89
|
-
if (!isUp) {
|
|
90
|
-
return;
|
|
91
|
-
}
|
|
92
|
-
if (ESC) {
|
|
93
|
-
this.close();
|
|
94
|
-
return;
|
|
95
|
-
}
|
|
96
|
-
if (!this.shouldReactOnClick) {
|
|
97
|
-
const hasFocusElementWithin = document.activeElement === this.menuBtn.$el;
|
|
98
|
-
if (ENTER && hasFocusElementWithin) {
|
|
99
|
-
this.toggle();
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
/**
|
|
104
|
-
* Toggle menu items on button click.
|
|
105
|
-
*/
|
|
106
|
-
onMenuBtnClick(index, event) {
|
|
107
|
-
if ((0, import_js_toolkit.isDirectChild)(this, "Menu", "MenuBtn", this.$children.MenuBtn[index]) && this.shouldReactOnClick) {
|
|
108
|
-
event.preventDefault();
|
|
109
|
-
this.toggle();
|
|
110
|
-
}
|
|
111
|
-
}
|
|
112
|
-
/**
|
|
113
|
-
* Open menu items on button mouse enter.
|
|
114
|
-
*/
|
|
115
|
-
onMenuBtnMouseenter(index) {
|
|
116
|
-
if (this.$children.MenuBtn[index] === this.menuBtn && !this.shouldReactOnClick) {
|
|
117
|
-
this.open();
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
/**
|
|
121
|
-
* Close menu items on button mouse leave.
|
|
122
|
-
*/
|
|
123
|
-
onMenuBtnMouseleave() {
|
|
124
|
-
if (this.shouldReactOnClick) {
|
|
125
|
-
return;
|
|
126
|
-
}
|
|
127
|
-
(0, import_utils.nextTick)(() => {
|
|
128
|
-
if (!this.isHover) {
|
|
129
|
-
this.close();
|
|
130
|
-
}
|
|
131
|
-
});
|
|
132
|
-
}
|
|
133
|
-
/**
|
|
134
|
-
* Close menu items on button mouse leave.
|
|
135
|
-
*/
|
|
136
|
-
onMenuListMouseleave() {
|
|
137
|
-
if (this.shouldReactOnClick) {
|
|
138
|
-
return;
|
|
139
|
-
}
|
|
140
|
-
(0, import_utils.nextTick)(() => {
|
|
141
|
-
if (!this.isHover) {
|
|
142
|
-
this.close();
|
|
143
|
-
}
|
|
144
|
-
});
|
|
145
|
-
}
|
|
146
|
-
/**
|
|
147
|
-
* Close other non-parent menu items on menu items open.
|
|
148
|
-
*/
|
|
149
|
-
onMenuListItemsOpen(index) {
|
|
150
|
-
const targetMenu = this.$children.MenuList[index];
|
|
151
|
-
this.$children.MenuList.forEach((menuItem) => {
|
|
152
|
-
if (!menuItem.$el.contains(targetMenu.$el)) {
|
|
153
|
-
menuItem.close();
|
|
154
|
-
}
|
|
155
|
-
});
|
|
156
|
-
}
|
|
157
|
-
/**
|
|
158
|
-
* Close the menu.
|
|
159
|
-
*/
|
|
160
|
-
close() {
|
|
161
|
-
this.menuList.close();
|
|
162
|
-
}
|
|
163
|
-
/**
|
|
164
|
-
* Open the menu.
|
|
165
|
-
*/
|
|
166
|
-
open() {
|
|
167
|
-
this.menuList.open();
|
|
168
|
-
}
|
|
169
|
-
/**
|
|
170
|
-
* Toggle the menu.
|
|
171
|
-
*/
|
|
172
|
-
toggle() {
|
|
173
|
-
this.menuList.toggle();
|
|
174
|
-
}
|
|
175
|
-
};
|
|
176
|
-
if (module.exports.default) module.exports = module.exports.default;
|
|
177
|
-
//# sourceMappingURL=Menu.cjs.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../packages/ui/molecules/Menu/Menu.ts"],
|
|
4
|
-
"sourcesContent": ["import { Base, isDirectChild, getDirectChildren } 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 MenutBtn: 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 return getDirectChildren<MenuList>(this, 'Menu', 'MenuList')[0];\n }\n\n /**\n * Get the first `MenuBtn` instance.\n */\n get menuBtn(): MenuBtn {\n return getDirectChildren<MenuBtn>(this, 'Menu', 'MenuBtn')[0];\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 this.$destroy();\n return;\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 * Toggle menu items on button click.\n */\n onMenuBtnClick(index: number, event: MouseEvent) {\n if (\n isDirectChild(this, 'Menu', 'MenuBtn', this.$children.MenuBtn[index]) &&\n this.shouldReactOnClick\n ) {\n event.preventDefault();\n this.toggle();\n }\n }\n\n /**\n * Open menu items on button mouse enter.\n */\n onMenuBtnMouseenter(index: number) {\n if (this.$children.MenuBtn[index] === 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(index: number) {\n const targetMenu = this.$children.MenuList[index];\n this.$children.MenuList.forEach((menuItem) => {\n if (!menuItem.$el.contains(targetMenu.$el)) {\n menuItem.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": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAuD;AAEvD,mBAAyB;AACzB,qBAAwB;AACxB,sBAAyB;AAiBlB,IAAM,OAAN,MAAM,cAA8C,uBAAoB;AAAA;AAAA;AAAA;AAAA,EAI7E,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,YAAY;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,SAAS;AAAA;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,WAAqB;AACvB,eAAO,qCAA4B,MAAM,QAAQ,UAAU,EAAE,CAAC;AAAA,EAChE;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,UAAmB;AACrB,eAAO,qCAA2B,MAAM,QAAQ,SAAS,EAAE,CAAC;AAAA,EAC9D;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,qBAA8B;AAChC,WAAO,KAAK,SAAS,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,UAAmB;AACrB,WAAO,KAAK,QAAQ,WAAW,KAAK,SAAS;AAAA,EAC/C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,UAAU;AACR,QAAI,CAAC,KAAK,WAAW,CAAC,KAAK,UAAU;AACnC,WAAK,SAAS;AACd;AAAA,IACF;AAEA,SAAK,QAAQ,IAAI,aAAa,iBAAiB,KAAK,GAAG;AACvD,SAAK,SAAS,IAAI,aAAa,MAAM,KAAK,GAAG;AAC7C,SAAK,SAAS,MAAM;AAAA,EACtB;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,EAAE,OAAO,KAAK,KAAK,GAAoB;AAC3C,QAAI,CAAC,MAAM;AACT;AAAA,IACF;AAEA,QAAI,KAAK;AACP,WAAK,MAAM;AACX;AAAA,IACF;AAEA,QAAI,CAAC,KAAK,oBAAoB;AAC5B,YAAM,wBAAwB,SAAS,kBAAkB,KAAK,QAAQ;AAEtE,UAAI,SAAS,uBAAuB;AAClC,aAAK,OAAO;AAAA,MACd;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,eAAe,OAAe,OAAmB;AAC/C,YACE,iCAAc,MAAM,QAAQ,WAAW,KAAK,UAAU,QAAQ,KAAK,CAAC,KACpE,KAAK,oBACL;AACA,YAAM,eAAe;AACrB,WAAK,OAAO;AAAA,IACd;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,oBAAoB,OAAe;AACjC,QAAI,KAAK,UAAU,QAAQ,KAAK,MAAM,KAAK,WAAW,CAAC,KAAK,oBAAoB;AAC9E,WAAK,KAAK;AAAA,IACZ;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,sBAAsB;AACpB,QAAI,KAAK,oBAAoB;AAC3B;AAAA,IACF;AAEA,+BAAS,MAAM;AACb,UAAI,CAAC,KAAK,SAAS;AACjB,aAAK,MAAM;AAAA,MACb;AAAA,IACF,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKA,uBAAuB;AACrB,QAAI,KAAK,oBAAoB;AAC3B;AAAA,IACF;AAEA,+BAAS,MAAM;AACb,UAAI,CAAC,KAAK,SAAS;AACjB,aAAK,MAAM;AAAA,MACb;AAAA,IACF,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKA,oBAAoB,OAAe;AACjC,UAAM,aAAa,KAAK,UAAU,SAAS,KAAK;AAChD,SAAK,UAAU,SAAS,QAAQ,CAAC,aAAa;AAC5C,UAAI,CAAC,SAAS,IAAI,SAAS,WAAW,GAAG,GAAG;AAC1C,iBAAS,MAAM;AAAA,MACjB;AAAA,IACF,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKA,QAAQ;AACN,SAAK,SAAS,MAAM;AAAA,EACtB;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO;AACL,SAAK,SAAS,KAAK;AAAA,EACrB;AAAA;AAAA;AAAA;AAAA,EAKA,SAAS;AACP,SAAK,SAAS,OAAO;AAAA,EACvB;AACF;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,66 +0,0 @@
|
|
|
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/ui/molecules/Menu/MenuBtn.ts
|
|
20
|
-
var MenuBtn_exports = {};
|
|
21
|
-
__export(MenuBtn_exports, {
|
|
22
|
-
MenuBtn: () => MenuBtn
|
|
23
|
-
});
|
|
24
|
-
module.exports = __toCommonJS(MenuBtn_exports);
|
|
25
|
-
var import_js_toolkit = require("@studiometa/js-toolkit");
|
|
26
|
-
var MenuBtn = class extends import_js_toolkit.Base {
|
|
27
|
-
/**
|
|
28
|
-
* Config.
|
|
29
|
-
*/
|
|
30
|
-
static config = {
|
|
31
|
-
name: "MenuBtn"
|
|
32
|
-
};
|
|
33
|
-
/**
|
|
34
|
-
* Wether the button is hovered or not.
|
|
35
|
-
* @type {boolean}
|
|
36
|
-
*/
|
|
37
|
-
isHover = false;
|
|
38
|
-
/**
|
|
39
|
-
* Dispatch the click event.
|
|
40
|
-
* @param {MouseEvent} event
|
|
41
|
-
* @returns {void}
|
|
42
|
-
*/
|
|
43
|
-
onClick(event) {
|
|
44
|
-
event.stopPropagation();
|
|
45
|
-
}
|
|
46
|
-
/**
|
|
47
|
-
* Dispatch the mouseenter event.
|
|
48
|
-
* @param {MouseEvent} event
|
|
49
|
-
* @returns {void}
|
|
50
|
-
*/
|
|
51
|
-
onMouseenter(event) {
|
|
52
|
-
this.isHover = true;
|
|
53
|
-
event.stopPropagation();
|
|
54
|
-
}
|
|
55
|
-
/**
|
|
56
|
-
* Dispatch the mouseleave event.
|
|
57
|
-
* @param {MouseEvent} event
|
|
58
|
-
* @returns {void}
|
|
59
|
-
*/
|
|
60
|
-
onMouseleave(event) {
|
|
61
|
-
this.isHover = false;
|
|
62
|
-
event.stopPropagation();
|
|
63
|
-
}
|
|
64
|
-
};
|
|
65
|
-
if (module.exports.default) module.exports = module.exports.default;
|
|
66
|
-
//# sourceMappingURL=MenuBtn.cjs.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../packages/ui/molecules/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 * @type {boolean}\n */\n isHover = false;\n\n /**\n * Dispatch the click event.\n * @param {MouseEvent} event\n * @returns {void}\n */\n onClick(event) {\n event.stopPropagation();\n }\n\n /**\n * Dispatch the mouseenter event.\n * @param {MouseEvent} event\n * @returns {void}\n */\n onMouseenter(event) {\n this.isHover = true;\n event.stopPropagation();\n }\n\n /**\n * Dispatch the mouseleave event.\n * @param {MouseEvent} event\n * @returns {void}\n */\n onMouseleave(event) {\n this.isHover = false;\n event.stopPropagation();\n }\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAqB;AAMd,IAAM,UAAN,cAAuD,uBAAQ;AAAA;AAAA;AAAA;AAAA,EAIpE,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,EACR;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOV,QAAQ,OAAO;AACb,UAAM,gBAAgB;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,aAAa,OAAO;AAClB,SAAK,UAAU;AACf,UAAM,gBAAgB;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,aAAa,OAAO;AAClB,SAAK,UAAU;AACf,UAAM,gBAAgB;AAAA,EACxB;AACF;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,165 +0,0 @@
|
|
|
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/ui/molecules/Menu/MenuList.ts
|
|
20
|
-
var MenuList_exports = {};
|
|
21
|
-
__export(MenuList_exports, {
|
|
22
|
-
MenuList: () => MenuList
|
|
23
|
-
});
|
|
24
|
-
module.exports = __toCommonJS(MenuList_exports);
|
|
25
|
-
var import_primitives = require("../../primitives/index.cjs");
|
|
26
|
-
var FOCUSABLE_ELEMENTS = [
|
|
27
|
-
"a[href]:not([inert])",
|
|
28
|
-
"area[href]:not([inert])",
|
|
29
|
-
"input:not([disabled]):not([inert])",
|
|
30
|
-
"select:not([disabled]):not([inert])",
|
|
31
|
-
"textarea:not([disabled]):not([inert])",
|
|
32
|
-
"button:not([disabled]):not([inert])",
|
|
33
|
-
"iframe:not([inert])",
|
|
34
|
-
"audio:not([inert])",
|
|
35
|
-
"video:not([inert])",
|
|
36
|
-
"[contenteditable]:not([inert])",
|
|
37
|
-
"[tabindex]:not([inert])"
|
|
38
|
-
].join(",");
|
|
39
|
-
var MenuList = class _MenuList extends import_primitives.Transition {
|
|
40
|
-
/**
|
|
41
|
-
* Config.
|
|
42
|
-
*/
|
|
43
|
-
static config = {
|
|
44
|
-
...import_primitives.Transition.config,
|
|
45
|
-
name: "MenuList",
|
|
46
|
-
emits: ["items-open", "items-close", "items-mouseleave"],
|
|
47
|
-
components: {
|
|
48
|
-
MenuList: _MenuList
|
|
49
|
-
}
|
|
50
|
-
};
|
|
51
|
-
/**
|
|
52
|
-
* Are the menu items visible?
|
|
53
|
-
*/
|
|
54
|
-
isOpen = false;
|
|
55
|
-
/**
|
|
56
|
-
* Wether the component is hovered.
|
|
57
|
-
*/
|
|
58
|
-
isHover = false;
|
|
59
|
-
/**
|
|
60
|
-
* Override `Transition` options.
|
|
61
|
-
*/
|
|
62
|
-
// @ts-ignore
|
|
63
|
-
get $options() {
|
|
64
|
-
const options = super.$options;
|
|
65
|
-
options.leaveKeep = true;
|
|
66
|
-
options.enterKeep = true;
|
|
67
|
-
return options;
|
|
68
|
-
}
|
|
69
|
-
/**
|
|
70
|
-
* Update tab indexes on mount.
|
|
71
|
-
*/
|
|
72
|
-
mounted() {
|
|
73
|
-
this.__updateTabIndexes("close");
|
|
74
|
-
}
|
|
75
|
-
/**
|
|
76
|
-
* Set hover state.
|
|
77
|
-
*/
|
|
78
|
-
onMouseenter() {
|
|
79
|
-
this.isHover = true;
|
|
80
|
-
}
|
|
81
|
-
/**
|
|
82
|
-
* Unset hover state.
|
|
83
|
-
*/
|
|
84
|
-
onMouseleave() {
|
|
85
|
-
this.isHover = false;
|
|
86
|
-
}
|
|
87
|
-
/**
|
|
88
|
-
* Display the menu items.
|
|
89
|
-
*/
|
|
90
|
-
open() {
|
|
91
|
-
if (this.isOpen) {
|
|
92
|
-
return;
|
|
93
|
-
}
|
|
94
|
-
const clickOutsideHandler = (event) => {
|
|
95
|
-
if (!this.$el.contains(event.target)) {
|
|
96
|
-
document.removeEventListener("click", clickOutsideHandler);
|
|
97
|
-
this.close();
|
|
98
|
-
}
|
|
99
|
-
};
|
|
100
|
-
document.addEventListener("click", clickOutsideHandler);
|
|
101
|
-
this.__updateTabIndexes("open");
|
|
102
|
-
this.$el.setAttribute("aria-hidden", "false");
|
|
103
|
-
this.isOpen = true;
|
|
104
|
-
this.enter();
|
|
105
|
-
this.$emit("items-open");
|
|
106
|
-
}
|
|
107
|
-
/**
|
|
108
|
-
* Hide the menu items.
|
|
109
|
-
*/
|
|
110
|
-
close() {
|
|
111
|
-
if (!this.isOpen) {
|
|
112
|
-
return;
|
|
113
|
-
}
|
|
114
|
-
this.$children.MenuList.forEach((menuItem) => {
|
|
115
|
-
menuItem.close();
|
|
116
|
-
});
|
|
117
|
-
if (document.activeElement instanceof HTMLElement && this.$el.contains(document.activeElement)) {
|
|
118
|
-
document.activeElement.blur();
|
|
119
|
-
}
|
|
120
|
-
this.$el.setAttribute("aria-hidden", "true");
|
|
121
|
-
this.__updateTabIndexes("close");
|
|
122
|
-
this.isOpen = false;
|
|
123
|
-
this.leave();
|
|
124
|
-
this.$emit("items-close");
|
|
125
|
-
}
|
|
126
|
-
/**
|
|
127
|
-
* Toggle the menu items.
|
|
128
|
-
*/
|
|
129
|
-
toggle() {
|
|
130
|
-
if (this.isOpen) {
|
|
131
|
-
this.close();
|
|
132
|
-
} else {
|
|
133
|
-
this.open();
|
|
134
|
-
}
|
|
135
|
-
}
|
|
136
|
-
/**
|
|
137
|
-
* Update `tabindex` attribute of child focusable elements.
|
|
138
|
-
* @private
|
|
139
|
-
*/
|
|
140
|
-
__updateTabIndexes(mode = "open") {
|
|
141
|
-
const focusableItems = Array.from(this.$el.querySelectorAll(FOCUSABLE_ELEMENTS)).filter(
|
|
142
|
-
(item) => this.__filterFocusableItems(item)
|
|
143
|
-
);
|
|
144
|
-
focusableItems.forEach((item) => {
|
|
145
|
-
if (mode === "close") {
|
|
146
|
-
item.setAttribute("tabindex", "-1");
|
|
147
|
-
} else {
|
|
148
|
-
item.removeAttribute("tabindex");
|
|
149
|
-
}
|
|
150
|
-
});
|
|
151
|
-
}
|
|
152
|
-
/**
|
|
153
|
-
* Filter out items which are inside a child `MenuList` instance.
|
|
154
|
-
* @private
|
|
155
|
-
*/
|
|
156
|
-
__filterFocusableItems(item) {
|
|
157
|
-
let ancestor = item.parentElement;
|
|
158
|
-
while (ancestor && (!ancestor.__base__ || !ancestor.__base__.has(this.constructor))) {
|
|
159
|
-
ancestor = ancestor.parentElement;
|
|
160
|
-
}
|
|
161
|
-
return ancestor === null || ancestor === this.$el;
|
|
162
|
-
}
|
|
163
|
-
};
|
|
164
|
-
if (module.exports.default) module.exports = module.exports.default;
|
|
165
|
-
//# sourceMappingURL=MenuList.cjs.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../packages/ui/molecules/Menu/MenuList.ts"],
|
|
4
|
-
"sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { Transition } from '../../primitives/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 // @todo Remove event listener when the close method is called.\n const clickOutsideHandler = (event) => {\n if (!this.$el.contains(event.target)) {\n document.removeEventListener('click', clickOutsideHandler);\n this.close();\n }\n };\n document.addEventListener('click', clickOutsideHandler);\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 this.$children.MenuList.forEach((menuItem) => {\n menuItem.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 child focusable elements.\n * @private\n */\n __updateTabIndexes(mode: 'open' | 'close' = 'open') {\n const focusableItems = Array.from(this.$el.querySelectorAll(FOCUSABLE_ELEMENTS)).filter(\n (item) => this.__filterFocusableItems(item as HTMLElement),\n );\n\n focusableItems.forEach((item) => {\n if (mode === 'close') {\n item.setAttribute('tabindex', '-1');\n } else {\n item.removeAttribute('tabindex');\n }\n });\n }\n\n /**\n * Filter out items which are inside a child `MenuList` instance.\n * @private\n */\n __filterFocusableItems(item: HTMLElement): boolean {\n let ancestor = item.parentElement;\n\n // @ts-ignore\n while (ancestor && (!ancestor.__base__ || !ancestor.__base__.has(this.constructor))) {\n ancestor = ancestor.parentElement;\n }\n\n return ancestor === null || ancestor === this.$el;\n }\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/molecules/Menu/index.cjs
DELETED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
-
var __copyProps = (to, from, except, desc) => {
|
|
6
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
7
|
-
for (let key of __getOwnPropNames(from))
|
|
8
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
9
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
10
|
-
}
|
|
11
|
-
return to;
|
|
12
|
-
};
|
|
13
|
-
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
14
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
15
|
-
|
|
16
|
-
// packages/ui/molecules/Menu/index.ts
|
|
17
|
-
var Menu_exports = {};
|
|
18
|
-
module.exports = __toCommonJS(Menu_exports);
|
|
19
|
-
__reExport(Menu_exports, require("./Menu.cjs"), module.exports);
|
|
20
|
-
__reExport(Menu_exports, require("./MenuBtn.cjs"), module.exports);
|
|
21
|
-
__reExport(Menu_exports, require("./MenuList.cjs"), module.exports);
|
|
22
|
-
if (module.exports.default) module.exports = module.exports.default;
|
|
23
|
-
//# sourceMappingURL=index.cjs.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../packages/ui/molecules/Menu/index.ts"],
|
|
4
|
-
"sourcesContent": ["export * from './Menu.js';\nexport * from './MenuBtn.js';\nexport * from './MenuList.js';\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,yBAAc,uBAAd;AACA,yBAAc,0BADd;AAEA,yBAAc,2BAFd;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|