@studiometa/ui 0.2.46 → 0.2.48
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.cjs +12 -17
- package/atoms/Action/Action.cjs.map +1 -1
- package/atoms/Action/Action.js.map +1 -1
- package/atoms/AnchorScrollTo/AnchorScrollTo.cjs +3 -8
- package/atoms/AnchorScrollTo/AnchorScrollTo.cjs.map +1 -1
- package/atoms/AnchorScrollTo/AnchorScrollTo.js.map +1 -1
- package/atoms/CircularMarquee/CircularMarquee.cjs +12 -17
- package/atoms/CircularMarquee/CircularMarquee.cjs.map +1 -1
- package/atoms/Cursor/Cursor.cjs +37 -42
- package/atoms/Cursor/Cursor.cjs.map +1 -1
- package/atoms/Cursor/Cursor.js.map +1 -1
- package/atoms/Figure/Figure.cjs +13 -18
- package/atoms/Figure/Figure.cjs.map +1 -1
- package/atoms/Figure/FigureTwicpics.cjs +26 -31
- package/atoms/Figure/FigureTwicpics.cjs.map +1 -1
- package/atoms/Figure/FigureTwicpics.js.map +1 -1
- package/atoms/FigureVideo/FigureVideo.cjs +132 -0
- package/atoms/FigureVideo/FigureVideo.cjs.map +7 -0
- package/atoms/FigureVideo/FigureVideo.d.ts +51 -0
- package/atoms/FigureVideo/FigureVideo.js +110 -0
- package/atoms/FigureVideo/FigureVideo.js.map +7 -0
- package/atoms/FigureVideo/FigureVideo.twig +152 -0
- package/atoms/FigureVideo/FigureVideoTwicpics.cjs +153 -0
- package/atoms/FigureVideo/FigureVideoTwicpics.cjs.map +7 -0
- package/atoms/FigureVideo/FigureVideoTwicpics.d.ts +57 -0
- package/atoms/FigureVideo/FigureVideoTwicpics.js +135 -0
- package/atoms/FigureVideo/FigureVideoTwicpics.js.map +7 -0
- package/atoms/FigureVideo/FigureVideoTwicpics.twig +98 -0
- package/atoms/FigureVideo/index.cjs +22 -0
- package/atoms/FigureVideo/index.cjs.map +7 -0
- package/atoms/FigureVideo/index.d.ts +2 -0
- package/atoms/FigureVideo/index.js +3 -0
- package/atoms/FigureVideo/index.js.map +7 -0
- package/atoms/LargeText/LargeText.cjs +18 -23
- package/atoms/LargeText/LargeText.cjs.map +1 -1
- package/atoms/LazyInclude/LazyInclude.cjs +12 -17
- package/atoms/LazyInclude/LazyInclude.cjs.map +1 -1
- package/atoms/Prefetch/AbstractPrefetch.cjs +17 -23
- package/atoms/Prefetch/AbstractPrefetch.cjs.map +1 -1
- package/atoms/Prefetch/PrefetchWhenOver.cjs +7 -12
- package/atoms/Prefetch/PrefetchWhenOver.cjs.map +1 -1
- package/atoms/Prefetch/PrefetchWhenVisible.cjs +7 -12
- package/atoms/Prefetch/PrefetchWhenVisible.cjs.map +1 -1
- package/atoms/ScrollAnimation/AbstractScrollAnimation.cjs +27 -32
- package/atoms/ScrollAnimation/AbstractScrollAnimation.cjs.map +1 -1
- package/atoms/ScrollAnimation/AbstractScrollAnimation.d.ts +1 -1
- package/atoms/ScrollAnimation/ScrollAnimation.cjs +8 -13
- package/atoms/ScrollAnimation/ScrollAnimation.cjs.map +1 -1
- package/atoms/ScrollAnimation/ScrollAnimationChild.cjs +18 -23
- package/atoms/ScrollAnimation/ScrollAnimationChild.cjs.map +1 -1
- package/atoms/ScrollAnimation/ScrollAnimationChildWithEase.cjs +7 -12
- package/atoms/ScrollAnimation/ScrollAnimationChildWithEase.cjs.map +1 -1
- package/atoms/ScrollAnimation/ScrollAnimationChildWithEase.d.ts +1 -1
- package/atoms/ScrollAnimation/ScrollAnimationParent.cjs +9 -14
- package/atoms/ScrollAnimation/ScrollAnimationParent.cjs.map +1 -1
- package/atoms/ScrollAnimation/ScrollAnimationWithEase.cjs +7 -12
- package/atoms/ScrollAnimation/ScrollAnimationWithEase.cjs.map +1 -1
- package/atoms/ScrollAnimation/ScrollAnimationWithEase.d.ts +1 -1
- package/atoms/ScrollAnimation/animationScrollWithEase.cjs.map +1 -1
- package/atoms/ScrollAnimation/animationScrollWithEase.js.map +1 -1
- package/atoms/ScrollReveal/ScrollReveal.cjs +25 -31
- package/atoms/ScrollReveal/ScrollReveal.cjs.map +1 -1
- package/atoms/index.cjs +1 -0
- package/atoms/index.cjs.map +2 -2
- package/atoms/index.d.ts +1 -0
- package/atoms/index.js +1 -0
- package/atoms/index.js.map +2 -2
- package/decorators/index.cjs +1 -0
- package/decorators/index.cjs.map +2 -2
- package/decorators/index.d.ts +1 -0
- package/decorators/index.js +1 -0
- package/decorators/index.js.map +2 -2
- package/decorators/withDeprecation.cjs +47 -0
- package/decorators/withDeprecation.cjs.map +7 -0
- package/decorators/withDeprecation.d.ts +9 -0
- package/decorators/withDeprecation.js +25 -0
- package/decorators/withDeprecation.js.map +7 -0
- package/decorators/withTransition.cjs.map +1 -1
- package/decorators/withTransition.js.map +1 -1
- package/molecules/Accordion/Accordion.cjs +6 -11
- package/molecules/Accordion/Accordion.cjs.map +1 -1
- package/molecules/Accordion/AccordionCore.cjs +14 -19
- package/molecules/Accordion/AccordionCore.cjs.map +1 -1
- package/molecules/Accordion/AccordionItem.cjs +23 -29
- package/molecules/Accordion/AccordionItem.cjs.map +1 -1
- package/molecules/Accordion/AccordionItem.js.map +1 -1
- package/molecules/AnchorNav/AnchorNav.cjs +63 -0
- package/molecules/AnchorNav/AnchorNav.cjs.map +7 -0
- package/molecules/AnchorNav/AnchorNav.d.ts +24 -0
- package/molecules/AnchorNav/AnchorNav.js +41 -0
- package/molecules/AnchorNav/AnchorNav.js.map +7 -0
- package/molecules/AnchorNav/AnchorNavLink.cjs +40 -0
- package/molecules/AnchorNav/AnchorNavLink.cjs.map +7 -0
- package/molecules/AnchorNav/AnchorNavLink.d.ts +19 -0
- package/molecules/AnchorNav/AnchorNavLink.js +18 -0
- package/molecules/AnchorNav/AnchorNavLink.js.map +7 -0
- package/molecules/AnchorNav/AnchorNavTarget.cjs +35 -0
- package/molecules/AnchorNav/AnchorNavTarget.cjs.map +7 -0
- package/molecules/AnchorNav/AnchorNavTarget.d.ts +13 -0
- package/molecules/AnchorNav/AnchorNavTarget.js +13 -0
- package/molecules/AnchorNav/AnchorNavTarget.js.map +7 -0
- package/molecules/AnchorNav/index.cjs +23 -0
- package/molecules/AnchorNav/index.cjs.map +7 -0
- package/molecules/AnchorNav/index.d.ts +3 -0
- package/molecules/AnchorNav/index.js +4 -0
- package/molecules/AnchorNav/index.js.map +7 -0
- package/molecules/Menu/Menu.cjs +19 -25
- package/molecules/Menu/Menu.cjs.map +1 -1
- package/molecules/Menu/MenuBtn.cjs +6 -11
- package/molecules/Menu/MenuBtn.cjs.map +1 -1
- package/molecules/Menu/MenuList.cjs +12 -18
- package/molecules/Menu/MenuList.cjs.map +1 -1
- package/molecules/Menu/MenuList.d.ts +1 -1
- package/molecules/Modal/Modal.cjs +28 -33
- package/molecules/Modal/Modal.cjs.map +1 -1
- package/molecules/Modal/ModalWithTransition.cjs +31 -36
- package/molecules/Modal/ModalWithTransition.cjs.map +1 -1
- package/molecules/Panel/Panel.cjs +19 -25
- package/molecules/Panel/Panel.cjs.map +1 -1
- package/molecules/Slider/AbstractSliderChild.cjs +6 -11
- package/molecules/Slider/AbstractSliderChild.cjs.map +1 -1
- package/molecules/Slider/AbstractSliderChild.js.map +1 -1
- package/molecules/Slider/Slider.cjs +19 -24
- package/molecules/Slider/Slider.cjs.map +1 -1
- package/molecules/Slider/Slider.js.map +1 -1
- package/molecules/Slider/SliderBtn.cjs +11 -16
- package/molecules/Slider/SliderBtn.cjs.map +1 -1
- package/molecules/Slider/SliderBtn.js.map +1 -1
- package/molecules/Slider/SliderCount.cjs +7 -12
- package/molecules/Slider/SliderCount.cjs.map +1 -1
- package/molecules/Slider/SliderCount.js.map +1 -1
- package/molecules/Slider/SliderDots.cjs +7 -12
- package/molecules/Slider/SliderDots.cjs.map +1 -1
- package/molecules/Slider/SliderDots.d.ts +1 -1
- package/molecules/Slider/SliderDrag.cjs +13 -18
- package/molecules/Slider/SliderDrag.cjs.map +1 -1
- package/molecules/Slider/SliderDrag.d.ts +1 -1
- package/molecules/Slider/SliderItem.cjs +7 -12
- package/molecules/Slider/SliderItem.cjs.map +1 -1
- package/molecules/Slider/SliderProgress.cjs +7 -12
- package/molecules/Slider/SliderProgress.cjs.map +1 -1
- package/molecules/Sticky/Sticky.cjs +24 -30
- package/molecules/Sticky/Sticky.cjs.map +1 -1
- package/molecules/Sticky/Sticky.js.map +1 -1
- package/molecules/TableOfContent/TableOfContent.cjs +16 -20
- package/molecules/TableOfContent/TableOfContent.cjs.map +2 -2
- package/molecules/TableOfContent/TableOfContent.d.ts +4 -1
- package/molecules/TableOfContent/TableOfContent.js +2 -1
- package/molecules/TableOfContent/TableOfContent.js.map +2 -2
- package/molecules/TableOfContent/TableOfContentAnchor.cjs +18 -20
- package/molecules/TableOfContent/TableOfContentAnchor.cjs.map +2 -2
- package/molecules/TableOfContent/TableOfContentAnchor.d.ts +4 -1
- package/molecules/TableOfContent/TableOfContentAnchor.js +5 -2
- package/molecules/TableOfContent/TableOfContentAnchor.js.map +2 -2
- package/molecules/Tabs/Tabs.cjs +24 -29
- package/molecules/Tabs/Tabs.cjs.map +1 -1
- package/molecules/Tabs/Tabs.js.map +1 -1
- package/molecules/index.cjs +1 -0
- package/molecules/index.cjs.map +2 -2
- package/molecules/index.d.ts +1 -0
- package/molecules/index.js +1 -0
- package/molecules/index.js.map +2 -2
- package/organisms/Frame/Frame.cjs +46 -39
- package/organisms/Frame/Frame.cjs.map +3 -3
- package/organisms/Frame/Frame.d.ts +2 -2
- package/organisms/Frame/Frame.js +20 -7
- package/organisms/Frame/Frame.js.map +3 -3
- package/organisms/Frame/FrameAnchor.cjs +6 -11
- package/organisms/Frame/FrameAnchor.cjs.map +1 -1
- package/organisms/Frame/FrameForm.cjs +6 -11
- package/organisms/Frame/FrameForm.cjs.map +1 -1
- package/organisms/Frame/FrameTarget.cjs +25 -31
- package/organisms/Frame/FrameTarget.cjs.map +1 -1
- package/organisms/Frame/FrameTarget.d.ts +1 -1
- package/package.json +3 -3
- package/primitives/Draggable/Draggable.cjs +6 -11
- package/primitives/Draggable/Draggable.cjs.map +1 -1
- package/primitives/Draggable/Draggable.d.ts +1 -1
- package/primitives/Sentinel/Sentinel.cjs +6 -11
- package/primitives/Sentinel/Sentinel.cjs.map +1 -1
- package/primitives/Transition/Transition.cjs +6 -11
- package/primitives/Transition/Transition.cjs.map +1 -1
- package/primitives/Transition/Transition.d.ts +1 -1
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../packages/ui/molecules/Modal/Modal.ts"],
|
|
4
4
|
"sourcesContent": ["import { Base, KeyServiceProps } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { transition, focusTrap } from '@studiometa/js-toolkit/utils';\n\nconst { trap, untrap, saveActiveElement } = focusTrap();\n\ntype ModalStates = Partial<\n Record<'open' | 'active' | 'closed', string | Partial<CSSStyleDeclaration>>\n>;\n// eslint-disable-next-line no-use-before-define\ntype ModalStylesOption = Partial<Record<keyof ModalProps['$refs'], ModalStates>>;\n\nexport interface ModalProps extends BaseProps {\n $refs: {\n close: HTMLElement[];\n container: HTMLElement;\n content: HTMLElement;\n modal: HTMLElement;\n open: HTMLElement[];\n overlay: HTMLElement;\n };\n $options: {\n /**\n * A selector where to move the modal to.\n */\n move: string;\n /**\n * A selector for the element to set the focus to when the modal opens.\n */\n autofocus: string;\n /**\n * Lock or allow scroll in the documentElement.\n */\n scrollLock: boolean;\n /**\n * The styles for the different state of the modal.\n */\n styles: ModalStylesOption;\n };\n}\n\n/**\n * Modal class.\n */\nexport class Modal<T extends BaseProps = BaseProps> extends Base<T & ModalProps> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'Modal',\n refs: ['close[]', 'container', 'content', 'modal', 'open[]', 'overlay'],\n emits: ['open', 'close'],\n options: {\n move: String,\n autofocus: { type: String, default: '[autofocus]' },\n styles: {\n type: Object,\n default: (): ModalStylesOption => ({\n modal: {\n closed: {\n opacity: '0',\n pointerEvents: 'none',\n visibility: 'hidden',\n },\n },\n }),\n },\n scrollLock: {\n type: Boolean,\n default: true,\n },\n },\n };\n\n /**\n * Wether the modal is open or not.\n */\n isOpen = false;\n\n /**\n * @private\n */\n __refsBackup: (T & ModalProps)['$refs'];\n\n /**\n * @private\n */\n __refModalPlaceholder: Comment;\n\n /**\n * @private\n */\n __refModalParentBackup: HTMLElement;\n\n /**\n * @private\n */\n __refModalUnbindGetRefFilter: () => void;\n\n /**\n * Open the modal on click on the `open` ref.\n */\n get onOpenClick() {\n return this.open;\n }\n\n /**\n * Close the modal on click on the `close` ref.\n */\n get onCloseClick() {\n return this.close;\n }\n\n /**\n * Close the modal on click on the `overlay` ref.\n * @returns {Function} The component's `close` method.\n */\n get onOverlayClick() {\n return this.close;\n }\n\n /**\n * Initialize the component's behaviours.\n */\n mounted() {\n this.isOpen = false;\n this.close();\n\n if (this.$options.move) {\n const target = document.querySelector(this.$options.move) || document.body;\n\n this.__refsBackup = this.$refs;\n this.__refModalPlaceholder = document.createComment('');\n this.__refModalParentBackup = this.$refs.modal.parentElement || this.$el;\n this.__refModalParentBackup.insertBefore(this.__refModalPlaceholder, this.$refs.modal);\n\n target.append(this.$refs.modal);\n }\n }\n\n /**\n * Add the moved refs to `this.$refs` when using the `move` options.\n */\n get $refs() {\n const $refs = super.$refs;\n\n if (this.$options.move && this.__refsBackup) {\n Object.entries(this.__refsBackup).forEach(([key, ref]) => {\n if (!$refs[key]) {\n // @ts-ignore\n $refs[key] = ref;\n }\n });\n }\n\n return $refs;\n }\n\n /**\n * Unbind all events on destroy.\n */\n destroyed() {\n this.close();\n\n if (this.$options.move && this.__refModalParentBackup) {\n this.__refModalParentBackup.insertBefore(this.$refs.modal, this.__refModalPlaceholder);\n this.__refModalPlaceholder.remove();\n delete this.__refModalPlaceholder;\n delete this.__refModalParentBackup;\n }\n\n return this;\n }\n\n /**\n * Close the modal on `ESC` and trap the tabulation.\n */\n keyed({ event, isUp, isDown, ESC }: KeyServiceProps) {\n if (!this.isOpen) {\n return;\n }\n\n if (isDown) {\n trap(this.$refs.modal, event);\n }\n\n if (ESC && isUp) {\n this.close();\n }\n }\n\n /**\n * Open the modal.\n */\n async open() {\n if (this.isOpen) {\n return Promise.resolve();\n }\n\n this.$refs.modal.setAttribute('aria-hidden', 'false');\n\n if (this.$options.scrollLock) {\n document.documentElement.style.overflow = 'hidden';\n }\n\n this.isOpen = true;\n this.$emit('open');\n\n /** @type {ModalRefs} */\n const refs = this.$refs;\n\n return Promise.all(\n Object.entries(this.$options.styles).map(\n ([refName, { open, active, closed } = { open: '', active: '', closed: '' }]) =>\n transition(\n refs[refName],\n {\n from: closed,\n active,\n to: open,\n },\n 'keep',\n ),\n ),\n ).then(() => {\n if (this.$options.autofocus && this.$refs.modal.querySelector(this.$options.autofocus)) {\n saveActiveElement();\n const autofocusElement = this.$refs.modal.querySelector(\n this.$options.autofocus,\n ) as HTMLElement;\n autofocusElement.focus();\n }\n return Promise.resolve();\n });\n }\n\n /**\n * Close the modal.\n */\n async close() {\n if (!this.isOpen) {\n return Promise.resolve();\n }\n\n this.$refs.modal.setAttribute('aria-hidden', 'true');\n\n if (this.$options.scrollLock) {\n document.documentElement.style.overflow = '';\n }\n\n this.isOpen = false;\n untrap();\n this.$emit('close');\n\n const refs = this.$refs;\n\n return Promise.all(\n Object.entries(this.$options.styles).map(\n ([refName, { open, active, closed } = { open: '', active: '', closed: '' }]) =>\n transition(\n refs[refName],\n {\n from: open,\n active,\n to: closed,\n },\n 'keep',\n ),\n ),\n ).then(() => Promise.resolve());\n }\n}\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,7 +2,6 @@ var __defProp = Object.defineProperty;
|
|
|
2
2
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
3
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
4
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
6
5
|
var __export = (target, all) => {
|
|
7
6
|
for (var name in all)
|
|
8
7
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -16,10 +15,6 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
16
15
|
return to;
|
|
17
16
|
};
|
|
18
17
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
-
var __publicField = (obj, key, value) => {
|
|
20
|
-
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
21
|
-
return value;
|
|
22
|
-
};
|
|
23
18
|
|
|
24
19
|
// packages/ui/molecules/Modal/ModalWithTransition.ts
|
|
25
20
|
var ModalWithTransition_exports = {};
|
|
@@ -29,6 +24,37 @@ __export(ModalWithTransition_exports, {
|
|
|
29
24
|
module.exports = __toCommonJS(ModalWithTransition_exports);
|
|
30
25
|
var import_Modal = require("./Modal.cjs");
|
|
31
26
|
var ModalWithTransition = class extends import_Modal.Modal {
|
|
27
|
+
/**
|
|
28
|
+
* Modal options.
|
|
29
|
+
*/
|
|
30
|
+
static config = {
|
|
31
|
+
name: "ModalWithTransition",
|
|
32
|
+
options: {
|
|
33
|
+
styles: {
|
|
34
|
+
type: Object,
|
|
35
|
+
/**
|
|
36
|
+
* @returns {ModalStylesOption}
|
|
37
|
+
*/
|
|
38
|
+
default: () => ({
|
|
39
|
+
modal: {
|
|
40
|
+
closed: {
|
|
41
|
+
opacity: "0",
|
|
42
|
+
pointerEvents: "none"
|
|
43
|
+
},
|
|
44
|
+
active: "transition duration-500 ease-out-expo"
|
|
45
|
+
},
|
|
46
|
+
overlay: {
|
|
47
|
+
closed: "opacity-0",
|
|
48
|
+
active: "transition duration-500 ease-out-expo"
|
|
49
|
+
},
|
|
50
|
+
container: {
|
|
51
|
+
closed: "transform scale-95 opacity-0",
|
|
52
|
+
active: "transition duration-500 ease-out-expo"
|
|
53
|
+
}
|
|
54
|
+
})
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
};
|
|
32
58
|
open() {
|
|
33
59
|
this.$refs.modal.style.visibility = "";
|
|
34
60
|
return super.open();
|
|
@@ -39,36 +65,5 @@ var ModalWithTransition = class extends import_Modal.Modal {
|
|
|
39
65
|
return Promise.resolve();
|
|
40
66
|
}
|
|
41
67
|
};
|
|
42
|
-
/**
|
|
43
|
-
* Modal options.
|
|
44
|
-
*/
|
|
45
|
-
__publicField(ModalWithTransition, "config", {
|
|
46
|
-
name: "ModalWithTransition",
|
|
47
|
-
options: {
|
|
48
|
-
styles: {
|
|
49
|
-
type: Object,
|
|
50
|
-
/**
|
|
51
|
-
* @returns {ModalStylesOption}
|
|
52
|
-
*/
|
|
53
|
-
default: () => ({
|
|
54
|
-
modal: {
|
|
55
|
-
closed: {
|
|
56
|
-
opacity: "0",
|
|
57
|
-
pointerEvents: "none"
|
|
58
|
-
},
|
|
59
|
-
active: "transition duration-500 ease-out-expo"
|
|
60
|
-
},
|
|
61
|
-
overlay: {
|
|
62
|
-
closed: "opacity-0",
|
|
63
|
-
active: "transition duration-500 ease-out-expo"
|
|
64
|
-
},
|
|
65
|
-
container: {
|
|
66
|
-
closed: "transform scale-95 opacity-0",
|
|
67
|
-
active: "transition duration-500 ease-out-expo"
|
|
68
|
-
}
|
|
69
|
-
})
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
});
|
|
73
68
|
if (module.exports.default) module.exports = module.exports.default;
|
|
74
69
|
//# sourceMappingURL=ModalWithTransition.cjs.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../packages/ui/molecules/Modal/ModalWithTransition.ts"],
|
|
4
4
|
"sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { Modal } from './Modal.js';\n\n/**\n * ModalWithTransition class.\n */\nexport class ModalWithTransition<T extends BaseProps = BaseProps> extends Modal<T> {\n /**\n * Modal options.\n */\n static config: BaseConfig = {\n name: 'ModalWithTransition',\n options: {\n styles: {\n type: Object,\n /**\n * @returns {ModalStylesOption}\n */\n default: () => ({\n modal: {\n closed: {\n opacity: '0',\n pointerEvents: 'none',\n },\n active: 'transition duration-500 ease-out-expo',\n },\n overlay: {\n closed: 'opacity-0',\n active: 'transition duration-500 ease-out-expo',\n },\n container: {\n closed: 'transform scale-95 opacity-0',\n active: 'transition duration-500 ease-out-expo',\n },\n }),\n },\n },\n };\n\n open() {\n this.$refs.modal.style.visibility = '';\n return super.open();\n }\n\n async close() {\n await super.close();\n this.$refs.modal.style.visibility = 'hidden';\n return Promise.resolve();\n }\n}\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAsB;AAKf,IAAM,sBAAN,cAAmE,mBAAS;AAAA;AAAA;AAAA;AAAA,EAIjF,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,SAAS;AAAA,MACP,QAAQ;AAAA,QACN,MAAM;AAAA;AAAA;AAAA;AAAA,QAIN,SAAS,OAAO;AAAA,UACd,OAAO;AAAA,YACL,QAAQ;AAAA,cACN,SAAS;AAAA,cACT,eAAe;AAAA,YACjB;AAAA,YACA,QAAQ;AAAA,UACV;AAAA,UACA,SAAS;AAAA,YACP,QAAQ;AAAA,YACR,QAAQ;AAAA,UACV;AAAA,UACA,WAAW;AAAA,YACT,QAAQ;AAAA,YACR,QAAQ;AAAA,UACV;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EAEA,OAAO;AACL,SAAK,MAAM,MAAM,MAAM,aAAa;AACpC,WAAO,MAAM,KAAK;AAAA,EACpB;AAAA,EAEA,MAAM,QAAQ;AACZ,UAAM,MAAM,MAAM;AAClB,SAAK,MAAM,MAAM,MAAM,aAAa;AACpC,WAAO,QAAQ,QAAQ;AAAA,EACzB;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,7 +2,6 @@ var __defProp = Object.defineProperty;
|
|
|
2
2
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
3
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
4
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
6
5
|
var __export = (target, all) => {
|
|
7
6
|
for (var name in all)
|
|
8
7
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -16,10 +15,6 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
16
15
|
return to;
|
|
17
16
|
};
|
|
18
17
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
-
var __publicField = (obj, key, value) => {
|
|
20
|
-
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
21
|
-
return value;
|
|
22
|
-
};
|
|
23
18
|
|
|
24
19
|
// packages/ui/molecules/Panel/Panel.ts
|
|
25
20
|
var Panel_exports = {};
|
|
@@ -30,7 +25,25 @@ module.exports = __toCommonJS(Panel_exports);
|
|
|
30
25
|
var import_utils = require("@studiometa/js-toolkit/utils");
|
|
31
26
|
var import_Modal = require("../Modal/index.cjs");
|
|
32
27
|
var DEFAULT_POSITION = "left";
|
|
33
|
-
var
|
|
28
|
+
var Panel = class _Panel extends import_Modal.Modal {
|
|
29
|
+
/**
|
|
30
|
+
* Config.
|
|
31
|
+
*/
|
|
32
|
+
static config = {
|
|
33
|
+
name: "Panel",
|
|
34
|
+
options: {
|
|
35
|
+
position: {
|
|
36
|
+
type: String,
|
|
37
|
+
default: DEFAULT_POSITION
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
};
|
|
41
|
+
static translateClasses = {
|
|
42
|
+
top: "-translate-y-full",
|
|
43
|
+
right: "translate-x-full",
|
|
44
|
+
bottom: "translate-y-full",
|
|
45
|
+
left: "-translate-x-full"
|
|
46
|
+
};
|
|
34
47
|
isClosing = false;
|
|
35
48
|
/**
|
|
36
49
|
* Get the translation class.
|
|
@@ -120,24 +133,5 @@ var _Panel = class extends import_Modal.Modal {
|
|
|
120
133
|
return super.close();
|
|
121
134
|
}
|
|
122
135
|
};
|
|
123
|
-
var Panel = _Panel;
|
|
124
|
-
/**
|
|
125
|
-
* Config.
|
|
126
|
-
*/
|
|
127
|
-
__publicField(Panel, "config", {
|
|
128
|
-
name: "Panel",
|
|
129
|
-
options: {
|
|
130
|
-
position: {
|
|
131
|
-
type: String,
|
|
132
|
-
default: DEFAULT_POSITION
|
|
133
|
-
}
|
|
134
|
-
}
|
|
135
|
-
});
|
|
136
|
-
__publicField(Panel, "translateClasses", {
|
|
137
|
-
top: "-translate-y-full",
|
|
138
|
-
right: "translate-x-full",
|
|
139
|
-
bottom: "translate-y-full",
|
|
140
|
-
left: "-translate-x-full"
|
|
141
|
-
});
|
|
142
136
|
if (module.exports.default) module.exports = module.exports.default;
|
|
143
137
|
//# sourceMappingURL=Panel.cjs.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../packages/ui/molecules/Panel/Panel.ts"],
|
|
4
4
|
"sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { transition, matrix } from '@studiometa/js-toolkit/utils';\nimport { Modal } from '../Modal/index.js';\n\nexport interface PanelProps extends BaseProps {\n $options: {\n position: 'top' | 'right' | 'bottom' | 'left';\n };\n}\n\nconst DEFAULT_POSITION = 'left';\n\n/**\n * Panel class.\n */\nexport class Panel<T extends BaseProps = BaseProps> extends Modal<T & PanelProps> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'Panel',\n options: {\n position: {\n type: String,\n default: DEFAULT_POSITION,\n },\n },\n };\n\n static translateClasses = {\n top: '-translate-y-full',\n right: 'translate-x-full',\n bottom: 'translate-y-full',\n left: '-translate-x-full',\n };\n\n isClosing = false;\n\n /**\n * Get the translation class.\n * @returns {string}\n */\n get translateClass() {\n return (\n Panel.translateClasses[this.$options.position] ?? Panel.translateClasses[DEFAULT_POSITION]\n );\n }\n\n get containerOffset() {\n const { offsetTop, offsetLeft, offsetWidth, offsetHeight } = this.$refs.container;\n\n const store = {\n top: {\n translateY: (offsetTop + offsetHeight) * -1,\n },\n right: {\n translateX: window.innerWidth - offsetLeft + offsetWidth * 2,\n },\n bottom: {\n translateY: window.innerHeight - offsetTop + offsetHeight * 2,\n },\n left: {\n translateX: (offsetLeft + offsetWidth) * -1,\n },\n };\n\n return matrix(store[this.$options.position]);\n }\n\n /**\n * Animate before opening.\n * @this {PanelInterface}\n * @returns {Promise<void>}\n */\n async open() {\n if (this.isOpen) {\n return Promise.resolve();\n }\n\n this.$refs.modal.classList.remove('pointer-events-none');\n transition(\n this.$refs.container,\n {\n from: {\n transform: this.containerOffset,\n },\n to: {\n transform: 'none',\n },\n },\n 'keep',\n );\n transition(this.$refs.overlay, {\n from: 'opacity-0',\n });\n\n return super.open();\n }\n\n /**\n * Animate before closing.\n * @this {PanelInterface}\n * @returns {Promise<void>}\n */\n async close() {\n if (!this.isOpen || this.isClosing) {\n return Promise.resolve();\n }\n\n this.isClosing = true;\n\n this.$refs.modal.classList.add('pointer-events-none');\n await Promise.all([\n transition(\n this.$refs.container,\n {\n from: {\n transform: 'none',\n },\n to: {\n transform: this.containerOffset,\n },\n },\n 'keep',\n ),\n transition(\n this.$refs.overlay,\n {\n to: 'opacity-0',\n },\n 'keep',\n ),\n ]);\n\n this.isClosing = false;\n\n return super.close();\n }\n}\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAmC;AACnC,mBAAsB;AAQtB,IAAM,mBAAmB;AAKlB,IAAM,QAAN,MAAM,eAA+C,mBAAsB;AAAA;AAAA;AAAA;AAAA,EAIhF,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,SAAS;AAAA,MACP,UAAU;AAAA,QACR,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA,EAEA,OAAO,mBAAmB;AAAA,IACxB,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,EACR;AAAA,EAEA,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,EAMZ,IAAI,iBAAiB;AACnB,WACE,OAAM,iBAAiB,KAAK,SAAS,QAAQ,KAAK,OAAM,iBAAiB,gBAAgB;AAAA,EAE7F;AAAA,EAEA,IAAI,kBAAkB;AACpB,UAAM,EAAE,WAAW,YAAY,aAAa,aAAa,IAAI,KAAK,MAAM;AAExE,UAAM,QAAQ;AAAA,MACZ,KAAK;AAAA,QACH,aAAa,YAAY,gBAAgB;AAAA,MAC3C;AAAA,MACA,OAAO;AAAA,QACL,YAAY,OAAO,aAAa,aAAa,cAAc;AAAA,MAC7D;AAAA,MACA,QAAQ;AAAA,QACN,YAAY,OAAO,cAAc,YAAY,eAAe;AAAA,MAC9D;AAAA,MACA,MAAM;AAAA,QACJ,aAAa,aAAa,eAAe;AAAA,MAC3C;AAAA,IACF;AAEA,eAAO,qBAAO,MAAM,KAAK,SAAS,QAAQ,CAAC;AAAA,EAC7C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,MAAM,OAAO;AACX,QAAI,KAAK,QAAQ;AACf,aAAO,QAAQ,QAAQ;AAAA,IACzB;AAEA,SAAK,MAAM,MAAM,UAAU,OAAO,qBAAqB;AACvD;AAAA,MACE,KAAK,MAAM;AAAA,MACX;AAAA,QACE,MAAM;AAAA,UACJ,WAAW,KAAK;AAAA,QAClB;AAAA,QACA,IAAI;AAAA,UACF,WAAW;AAAA,QACb;AAAA,MACF;AAAA,MACA;AAAA,IACF;AACA,iCAAW,KAAK,MAAM,SAAS;AAAA,MAC7B,MAAM;AAAA,IACR,CAAC;AAED,WAAO,MAAM,KAAK;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,MAAM,QAAQ;AACZ,QAAI,CAAC,KAAK,UAAU,KAAK,WAAW;AAClC,aAAO,QAAQ,QAAQ;AAAA,IACzB;AAEA,SAAK,YAAY;AAEjB,SAAK,MAAM,MAAM,UAAU,IAAI,qBAAqB;AACpD,UAAM,QAAQ,IAAI;AAAA,UAChB;AAAA,QACE,KAAK,MAAM;AAAA,QACX;AAAA,UACE,MAAM;AAAA,YACJ,WAAW;AAAA,UACb;AAAA,UACA,IAAI;AAAA,YACF,WAAW,KAAK;AAAA,UAClB;AAAA,QACF;AAAA,QACA;AAAA,MACF;AAAA,UACA;AAAA,QACE,KAAK,MAAM;AAAA,QACX;AAAA,UACE,IAAI;AAAA,QACN;AAAA,QACA;AAAA,MACF;AAAA,IACF,CAAC;AAED,SAAK,YAAY;AAEjB,WAAO,MAAM,MAAM;AAAA,EACrB;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,7 +2,6 @@ var __defProp = Object.defineProperty;
|
|
|
2
2
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
3
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
4
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
6
5
|
var __export = (target, all) => {
|
|
7
6
|
for (var name in all)
|
|
8
7
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -16,10 +15,6 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
16
15
|
return to;
|
|
17
16
|
};
|
|
18
17
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
-
var __publicField = (obj, key, value) => {
|
|
20
|
-
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
21
|
-
return value;
|
|
22
|
-
};
|
|
23
18
|
|
|
24
19
|
// packages/ui/molecules/Slider/AbstractSliderChild.ts
|
|
25
20
|
var AbstractSliderChild_exports = {};
|
|
@@ -31,6 +26,12 @@ var import_js_toolkit = require("@studiometa/js-toolkit");
|
|
|
31
26
|
var import_utils = require("@studiometa/js-toolkit/utils");
|
|
32
27
|
var import_Slider = require("./Slider.cjs");
|
|
33
28
|
var AbstractSliderChild = class extends import_js_toolkit.Base {
|
|
29
|
+
/**
|
|
30
|
+
* Config.
|
|
31
|
+
*/
|
|
32
|
+
static config = {
|
|
33
|
+
name: "AbstractSliderChild"
|
|
34
|
+
};
|
|
34
35
|
/**
|
|
35
36
|
* Listen to the `goto` event of the parent on mount.
|
|
36
37
|
*/
|
|
@@ -83,11 +84,5 @@ var AbstractSliderChild = class extends import_js_toolkit.Base {
|
|
|
83
84
|
throw new Error(`The \`AbstractSliderChild.update(${index})\` method must be implemented.`);
|
|
84
85
|
}
|
|
85
86
|
};
|
|
86
|
-
/**
|
|
87
|
-
* Config.
|
|
88
|
-
*/
|
|
89
|
-
__publicField(AbstractSliderChild, "config", {
|
|
90
|
-
name: "AbstractSliderChild"
|
|
91
|
-
});
|
|
92
87
|
if (module.exports.default) module.exports = module.exports.default;
|
|
93
88
|
//# sourceMappingURL=AbstractSliderChild.cjs.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../packages/ui/molecules/Slider/AbstractSliderChild.ts"],
|
|
4
4
|
"sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig, BaseInterface } from '@studiometa/js-toolkit';\nimport { nextFrame, domScheduler, isFunction } from '@studiometa/js-toolkit/utils';\nimport { Slider } from './Slider.js';\n\nexport interface AbstractSliderChildProps extends BaseProps {\n $parent: Slider;\n}\n\n/**\n * AbstractSliderChild class.\n */\nexport class AbstractSliderChild<T extends BaseProps = BaseProps>\n extends Base<T & AbstractSliderChildProps>\n implements BaseInterface\n{\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'AbstractSliderChild',\n };\n\n /**\n * Listen to the `goto` event of the parent on mount.\n */\n mounted() {\n if (!(this.$parent instanceof Slider)) {\n throw new Error(\n `The \\`${this.$options.name}\\` component must be a direct child of a \\`Slider\\` component.`,\n );\n }\n\n this.$parent.$on('index', this);\n }\n\n /**\n * Trigger update on resize.\n */\n resized() {\n nextFrame(() => {\n this.update(this.$parent.currentIndex);\n });\n }\n\n /**\n * Remove the event listener.\n */\n destroyed() {\n this.$parent.$off('index', this);\n }\n\n /**\n * Dispatch event.\n * @param {CustomEvent} event\n * @returns {void}\n */\n handleEvent(event) {\n if (event.type === 'index') {\n domScheduler.read(() => {\n const callback = this.update(event.detail[0]);\n if (isFunction(callback)) {\n domScheduler.write(() => {\n // @ts-ignore\n callback();\n });\n }\n });\n }\n }\n\n // eslint-disable-next-line jsdoc/require-returns-check\n /**\n * Update the child component with the given index.\n * @param {number} index The new active index.\n * @returns {void|(()=>void)}\n */\n update(index): void | (() => void) {\n throw new Error(`The \\`AbstractSliderChild.update(${index})\\` method must be implemented.`);\n }\n}\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAqB;AAErB,mBAAoD;AACpD,oBAAuB;AAShB,IAAM,sBAAN,cACG,uBAEV;AAAA;AAAA;AAAA;AAAA,EAIE,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,EACR;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,QAAI,EAAE,KAAK,mBAAmB,uBAAS;AACrC,YAAM,IAAI;AAAA,QACR,SAAS,KAAK,SAAS,IAAI;AAAA,MAC7B;AAAA,IACF;AAEA,SAAK,QAAQ,IAAI,SAAS,IAAI;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,gCAAU,MAAM;AACd,WAAK,OAAO,KAAK,QAAQ,YAAY;AAAA,IACvC,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY;AACV,SAAK,QAAQ,KAAK,SAAS,IAAI;AAAA,EACjC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,YAAY,OAAO;AACjB,QAAI,MAAM,SAAS,SAAS;AAC1B,gCAAa,KAAK,MAAM;AACtB,cAAM,WAAW,KAAK,OAAO,MAAM,OAAO,CAAC,CAAC;AAC5C,gBAAI,yBAAW,QAAQ,GAAG;AACxB,oCAAa,MAAM,MAAM;AAEvB,qBAAS;AAAA,UACX,CAAC;AAAA,QACH;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,OAAO,OAA4B;AACjC,UAAM,IAAI,MAAM,oCAAoC,KAAK,iCAAiC;AAAA,EAC5F;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../packages/ui/molecules/Slider/AbstractSliderChild.ts"],
|
|
4
4
|
"sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig, BaseInterface } from '@studiometa/js-toolkit';\nimport { nextFrame, domScheduler, isFunction } from '@studiometa/js-toolkit/utils';\nimport { Slider } from './Slider.js';\n\nexport interface AbstractSliderChildProps extends BaseProps {\n $parent: Slider;\n}\n\n/**\n * AbstractSliderChild class.\n */\nexport class AbstractSliderChild<T extends BaseProps = BaseProps>\n extends Base<T & AbstractSliderChildProps>\n implements BaseInterface\n{\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'AbstractSliderChild',\n };\n\n /**\n * Listen to the `goto` event of the parent on mount.\n */\n mounted() {\n if (!(this.$parent instanceof Slider)) {\n throw new Error(\n `The \\`${this.$options.name}\\` component must be a direct child of a \\`Slider\\` component.`,\n );\n }\n\n this.$parent.$on('index', this);\n }\n\n /**\n * Trigger update on resize.\n */\n resized() {\n nextFrame(() => {\n this.update(this.$parent.currentIndex);\n });\n }\n\n /**\n * Remove the event listener.\n */\n destroyed() {\n this.$parent.$off('index', this);\n }\n\n /**\n * Dispatch event.\n * @param {CustomEvent} event\n * @returns {void}\n */\n handleEvent(event) {\n if (event.type === 'index') {\n domScheduler.read(() => {\n const callback = this.update(event.detail[0]);\n if (isFunction(callback)) {\n domScheduler.write(() => {\n // @ts-ignore\n callback();\n });\n }\n });\n }\n }\n\n // eslint-disable-next-line jsdoc/require-returns-check\n /**\n * Update the child component with the given index.\n * @param {number} index The new active index.\n * @returns {void|(()=>void)}\n */\n update(index): void | (() => void) {\n throw new Error(`The \\`AbstractSliderChild.update(${index})\\` method must be implemented.`);\n }\n}\n"],
|
|
5
|
-
"mappings": "AAAA,SAAS,YAAY;AAErB,SAAS,WAAW,cAAc,kBAAkB;AACpD,SAAS,cAAc;AAShB,MAAM,4BACH,KAEV;AAAA;AAAA;AAAA;AAAA,EAIE,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,EACR;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,QAAI,EAAE,KAAK,mBAAmB,SAAS;AACrC,YAAM,IAAI;AAAA,QACR,SAAS,KAAK,SAAS;AAAA,
|
|
5
|
+
"mappings": "AAAA,SAAS,YAAY;AAErB,SAAS,WAAW,cAAc,kBAAkB;AACpD,SAAS,cAAc;AAShB,MAAM,4BACH,KAEV;AAAA;AAAA;AAAA;AAAA,EAIE,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,EACR;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,QAAI,EAAE,KAAK,mBAAmB,SAAS;AACrC,YAAM,IAAI;AAAA,QACR,SAAS,KAAK,SAAS,IAAI;AAAA,MAC7B;AAAA,IACF;AAEA,SAAK,QAAQ,IAAI,SAAS,IAAI;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,cAAU,MAAM;AACd,WAAK,OAAO,KAAK,QAAQ,YAAY;AAAA,IACvC,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY;AACV,SAAK,QAAQ,KAAK,SAAS,IAAI;AAAA,EACjC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,YAAY,OAAO;AACjB,QAAI,MAAM,SAAS,SAAS;AAC1B,mBAAa,KAAK,MAAM;AACtB,cAAM,WAAW,KAAK,OAAO,MAAM,OAAO,CAAC,CAAC;AAC5C,YAAI,WAAW,QAAQ,GAAG;AACxB,uBAAa,MAAM,MAAM;AAEvB,qBAAS;AAAA,UACX,CAAC;AAAA,QACH;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,OAAO,OAA4B;AACjC,UAAM,IAAI,MAAM,oCAAoC,KAAK,iCAAiC;AAAA,EAC5F;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,7 +2,6 @@ var __defProp = Object.defineProperty;
|
|
|
2
2
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
3
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
4
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
6
5
|
var __export = (target, all) => {
|
|
7
6
|
for (var name in all)
|
|
8
7
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -16,10 +15,6 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
16
15
|
return to;
|
|
17
16
|
};
|
|
18
17
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
-
var __publicField = (obj, key, value) => {
|
|
20
|
-
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
21
|
-
return value;
|
|
22
|
-
};
|
|
23
18
|
|
|
24
19
|
// packages/ui/molecules/Slider/Slider.ts
|
|
25
20
|
var Slider_exports = {};
|
|
@@ -32,6 +27,25 @@ var import_utils = require("@studiometa/js-toolkit/utils");
|
|
|
32
27
|
var import_SliderDrag = require("./SliderDrag.cjs");
|
|
33
28
|
var import_SliderItem = require("./SliderItem.cjs");
|
|
34
29
|
var Slider = class extends import_js_toolkit.Base {
|
|
30
|
+
/**
|
|
31
|
+
* Config.
|
|
32
|
+
*/
|
|
33
|
+
static config = {
|
|
34
|
+
name: "Slider",
|
|
35
|
+
refs: ["wrapper", "debug"],
|
|
36
|
+
emits: ["goto", "index"],
|
|
37
|
+
components: {
|
|
38
|
+
SliderItem: import_SliderItem.SliderItem,
|
|
39
|
+
SliderDrag: import_SliderDrag.SliderDrag
|
|
40
|
+
},
|
|
41
|
+
options: {
|
|
42
|
+
mode: { type: String, default: "left" },
|
|
43
|
+
fitBounds: Boolean,
|
|
44
|
+
contain: Boolean,
|
|
45
|
+
sensitivity: { type: Number, default: 1 },
|
|
46
|
+
dropSensitivity: { type: Number, default: 2 }
|
|
47
|
+
}
|
|
48
|
+
};
|
|
35
49
|
__distanceX = 0;
|
|
36
50
|
__initialX = 0;
|
|
37
51
|
/**
|
|
@@ -386,24 +400,5 @@ var Slider = class extends import_js_toolkit.Base {
|
|
|
386
400
|
);
|
|
387
401
|
}
|
|
388
402
|
};
|
|
389
|
-
/**
|
|
390
|
-
* Config.
|
|
391
|
-
*/
|
|
392
|
-
__publicField(Slider, "config", {
|
|
393
|
-
name: "Slider",
|
|
394
|
-
refs: ["wrapper", "debug"],
|
|
395
|
-
emits: ["goto", "index"],
|
|
396
|
-
components: {
|
|
397
|
-
SliderItem: import_SliderItem.SliderItem,
|
|
398
|
-
SliderDrag: import_SliderDrag.SliderDrag
|
|
399
|
-
},
|
|
400
|
-
options: {
|
|
401
|
-
mode: { type: String, default: "left" },
|
|
402
|
-
fitBounds: Boolean,
|
|
403
|
-
contain: Boolean,
|
|
404
|
-
sensitivity: { type: Number, default: 1 },
|
|
405
|
-
dropSensitivity: { type: Number, default: 2 }
|
|
406
|
-
}
|
|
407
|
-
});
|
|
408
403
|
if (module.exports.default) module.exports = module.exports.default;
|
|
409
404
|
//# sourceMappingURL=Slider.cjs.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../packages/ui/molecules/Slider/Slider.ts"],
|
|
4
4
|
"sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type {\n BaseProps,\n BaseConfig,\n DragServiceProps,\n KeyServiceProps,\n} from '@studiometa/js-toolkit';\nimport { clamp, inertiaFinalValue, nextFrame, isDev } from '@studiometa/js-toolkit/utils';\nimport { SliderDrag } from './SliderDrag.js';\nimport { SliderItem } from './SliderItem.js';\n\nexport type SliderModes = 'left' | 'center' | 'right';\n\ntype SliderState = { x: Record<SliderModes, number> };\n\nexport interface SliderProps extends BaseProps {\n $refs: {\n wrapper: HTMLElement;\n };\n $children: {\n SliderItem: SliderItem[];\n SliderDrag: SliderDrag[];\n };\n $options: {\n mode: SliderModes;\n fitBounds: boolean;\n contain: boolean;\n sensitivity: number;\n dropSensitivity: number;\n };\n}\n\n/**\n * Orchestrate the slider items state transition.\n * @todo a11y\n */\nexport class Slider<T extends BaseProps = BaseProps> extends Base<T & SliderProps> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'Slider',\n refs: ['wrapper', 'debug'],\n emits: ['goto', 'index'],\n components: {\n SliderItem,\n SliderDrag,\n },\n options: {\n mode: { type: String, default: 'left' },\n fitBounds: Boolean,\n contain: Boolean,\n sensitivity: { type: Number, default: 1 },\n dropSensitivity: { type: Number, default: 2 },\n },\n };\n\n __distanceX = 0;\n\n __initialX = 0;\n\n /**\n * Index of the current active slide.\n */\n __currentIndex = 0;\n\n __isDragging = false;\n\n /**\n * Get the current index.\n */\n get currentIndex() {\n return this.__currentIndex;\n }\n\n /**\n * Set the current index and emit the `index` event.\n */\n set currentIndex(value: number) {\n this.currentSliderItem.disactivate();\n this.$emit('index', value);\n this.__currentIndex = value;\n this.currentSliderItem.activate();\n }\n\n /**\n * Store all the states.\n */\n states: SliderState[] = [];\n\n /**\n * Origins for the different modes.\n */\n origins: Record<SliderModes, number> = {\n left: 0,\n center: 0,\n right: 0,\n };\n\n /**\n * Wether or not the wrapper is focused.\n * @type {boolean}\n */\n hasFocus = false;\n\n /**\n * Get the current state.\n */\n get currentState() {\n return this.states[this.currentIndex];\n }\n\n /**\n * Get the first state.\n */\n get firstState() {\n return this.states[0];\n }\n\n /**\n * Get the last state.\n */\n get lastState() {\n return this.states.at(-1);\n }\n\n /**\n * Get the minimal contain state value.\n */\n get containMinState(): number {\n return this.getStateValueByMode(this.firstState.x, 'left');\n }\n\n /**\n * Get the maximal contain state value.\n */\n get containMaxState(): number {\n return this.getStateValueByMode(this.lastState.x, 'right');\n }\n\n /**\n * Get the last index.\n */\n get indexMax(): number {\n return this.$children.SliderItem.length - 1;\n }\n\n /**\n * Get the current SliderItem\n */\n get currentSliderItem() {\n return this.$children.SliderItem[this.currentIndex];\n }\n\n /**\n * Get the states for each SliderItem.\n */\n getStates(): SliderState[] {\n const { wrapper } = this.$refs;\n const originRect = wrapper.getBoundingClientRect();\n\n this.origins = {\n left: originRect.left,\n center: originRect.x + originRect.width / 2,\n right: originRect.x + originRect.width,\n };\n\n const states: SliderState[] = this.$children.SliderItem.map((item) => ({\n x: {\n left: (item.rect.x - this.origins.left) * -1,\n center: (item.rect.x + item.rect.width / 2 - this.origins.center) * -1,\n right: (item.rect.x + item.rect.width - this.origins.right) * -1,\n },\n }));\n\n if (this.$options.contain) {\n const { mode } = this.$options;\n // Find state where last child has passed the wrapper bound completely\n if (mode === 'left') {\n const lastChild = this.$children.SliderItem.at(-1);\n\n const maxState = states.find((state) => {\n const lastChildPosition =\n lastChild.rect.x - this.origins.left + lastChild.rect.width + state.x.left;\n const diffWithWrapperBound = originRect.width - lastChildPosition;\n if (diffWithWrapperBound > 0) {\n state.x.left = Math.min(state.x.left + diffWithWrapperBound, 0);\n return true;\n }\n\n return false;\n });\n\n if (maxState) {\n return states.map((state) => {\n state.x.left = Math.max(state.x.left, maxState.x.left);\n return state;\n });\n }\n }\n\n if (mode === 'right') {\n const maxStateIndex = states.findIndex((state) => state.x.right <= 0);\n const maxState = maxStateIndex < 0 ? states.at(-1) : states[maxStateIndex - 1];\n\n return states.map((state) => {\n state.x.right = maxStateIndex < 0 ? maxState.x.right : Math.min(state.x.right, 0);\n return state;\n });\n }\n\n if (mode === 'center' && isDev) {\n console.warn(\n `[${this.$id}]`,\n 'The `center` mode is not yet compatible with the `contain` mode.',\n );\n }\n }\n\n return states;\n }\n\n /**\n * Get an origin by mode.\n */\n getOriginByMode(mode?: SliderModes) {\n return this.origins[mode ?? this.$options.mode];\n }\n\n /**\n * Get a state value according to the given mode.\n */\n getStateValueByMode(state: SliderState['x'], mode?: SliderModes) {\n return state[mode ?? this.$options.mode];\n }\n\n /**\n * Mounted hook.\n */\n mounted() {\n this.states = this.getStates();\n this.setAccessibilityAttributes();\n this.prepareInvisibleItems();\n this.goTo(this.currentIndex);\n }\n\n /**\n * Resized hook.\n */\n resized() {\n nextFrame(() => {\n this.states = this.getStates();\n nextFrame(() => {\n this.prepareInvisibleItems();\n this.goTo(this.currentIndex);\n });\n });\n }\n\n /**\n * Set accessibility attributes for the component\n */\n setAccessibilityAttributes() {\n this.$el.setAttribute('role', 'group');\n this.$el.setAttribute('aria-roledescription', 'carousel');\n }\n\n /**\n * Go to the next slide.\n */\n goNext() {\n if (this.currentIndex + 1 > this.indexMax) {\n return;\n }\n\n this.goTo(this.currentIndex + 1);\n }\n\n /**\n * Go to the previous slide.\n */\n goPrev() {\n if (this.currentIndex - 1 < 0) {\n return;\n }\n\n this.goTo(this.currentIndex - 1);\n }\n\n /**\n * Go to the given index.\n */\n goTo(index: number, { withInstantMove = true } = {}) {\n if (index < 0 || index > this.indexMax) {\n throw new Error('Index out of bound.');\n }\n\n const currentState = this.getStateValueByMode(this.currentState.x);\n const state = this.getStateValueByMode(this.states[index].x);\n const itemsToMove = this.getVisibleItems(state);\n const invisibleItemsToMoveInstantly = this.getInvisibleItems(state);\n\n itemsToMove.forEach((item) => {\n // Better perfs when going fast through the slides\n if (currentState !== state && withInstantMove) {\n item.moveInstantly(currentState);\n }\n nextFrame(() => item.move(state));\n });\n invisibleItemsToMoveInstantly.forEach((item) => {\n item.moveInstantly(state);\n });\n\n this.currentIndex = index;\n this.$emit('goto', index);\n }\n\n /**\n * Listen to the Draggable `start` event.\n */\n onSliderDragStart() {\n this.__initialX = this.currentSliderItem ? this.currentSliderItem.x : 0;\n this.__distanceX = this.__initialX;\n\n this.__isDragging = true;\n }\n\n /**\n * Listen to the Draggable `drag` event.\n */\n onSliderDragDrag(props: DragServiceProps) {\n if (Math.abs(props.delta.y) > Math.abs(props.delta.x)) {\n return;\n }\n\n this.__distanceX = this.__initialX + props.distance.x * this.$options.sensitivity;\n\n this.getVisibleItems(this.__distanceX).forEach((item) => {\n item.moveInstantly(this.__distanceX);\n });\n }\n\n /**\n * Listen to the Draggable `drop` event and find the new active slide.\n */\n onSliderDragDrop(props: DragServiceProps) {\n if (!this.__isDragging) {\n return;\n }\n this.__isDragging = false;\n\n if (Math.abs(props.delta.y) > Math.abs(props.delta.x)) {\n return;\n }\n\n let finalX = clamp(\n inertiaFinalValue(this.__distanceX, props.delta.x * this.$options.dropSensitivity),\n this.getStateValueByMode(this.firstState.x),\n this.getStateValueByMode(this.lastState.x),\n );\n\n const absoluteDifferencesBetweenDistanceAndState = this.states.map((state) =>\n Math.abs(finalX - this.getStateValueByMode(state.x)),\n );\n const minimumDifference = Math.min(...absoluteDifferencesBetweenDistanceAndState);\n const closestIndex = absoluteDifferencesBetweenDistanceAndState.indexOf(minimumDifference);\n\n if (this.$options.fitBounds) {\n this.goTo(closestIndex, { withInstantMove: false });\n } else {\n if (this.$options.contain) {\n finalX = Math.min(this.containMinState, finalX);\n finalX = Math.max(this.containMaxState, finalX);\n }\n this.$children.SliderItem.forEach((item) => {\n item.move(finalX);\n });\n this.currentIndex = closestIndex;\n }\n }\n\n /**\n * Enable focus.\n */\n onWrapperFocus() {\n this.hasFocus = true;\n }\n\n /**\n * Disable focus.\n */\n onWrapperBlur() {\n this.hasFocus = false;\n }\n\n /**\n * Go prev or next when focus is on the wrapper and pressing arrow keys.\n */\n keyed({ LEFT, RIGHT, isDown }: KeyServiceProps) {\n if (this.hasFocus && isDown) {\n if (LEFT) {\n this.goPrev();\n } else if (RIGHT) {\n this.goNext();\n }\n }\n }\n\n /**\n * Prepare invisible items.\n */\n prepareInvisibleItems() {\n const state = this.states[this.currentIndex];\n const nextItemsToPrepare = [];\n const previousItemsToPrepare = [];\n\n this.getInvisibleItems(this.getStateValueByMode(state.x)).forEach((item, i) => {\n if (i > this.currentIndex) {\n nextItemsToPrepare.push(item);\n return;\n }\n\n if (i < this.currentIndex) {\n previousItemsToPrepare.push(item);\n }\n });\n\n nextItemsToPrepare.forEach((item) => {\n const invisibleState = this.getStateWhereItemWillBeInvisible(item);\n if (invisibleState) {\n item.moveInstantly(this.getStateValueByMode(invisibleState.x));\n }\n });\n\n previousItemsToPrepare.forEach((item) => {\n const invisibleState = this.getStateWhereItemWillBeInvisible(item, { reversed: true });\n if (invisibleState) {\n item.moveInstantly(this.getStateValueByMode(invisibleState.x));\n }\n });\n }\n\n /**\n * Get the state where the given item will be visible.\n */\n getStateWhereItemWillBeInvisible(item: SliderItem, { reversed = false } = {}): SliderState {\n const visibleStates = this.states.filter((state) =>\n item.willBeVisible(this.getStateValueByMode(state.x)),\n );\n const firstVisibleState = visibleStates[0];\n const lastVisibleState = visibleStates.at(-1);\n const firstVisibleStateIndex = this.states.findIndex(\n (state) =>\n this.getStateValueByMode(state.x) === this.getStateValueByMode(firstVisibleState.x),\n );\n const lastVisibleStateIndex = this.states.findIndex((state) => state.x === lastVisibleState.x);\n\n return reversed\n ? this.states[lastVisibleStateIndex + 1]\n : this.states[firstVisibleStateIndex - 1];\n }\n\n /**\n * Get the visible slides for the given position.\n */\n getVisibleItems(target: number) {\n return this.$children.SliderItem.filter((item) => item.isVisible || item.willBeVisible(target));\n }\n\n /**\n * Get the invisible slides for the given position.\n */\n getInvisibleItems(target: number) {\n return this.$children.SliderItem.filter(\n (item) => !item.isVisible && !item.willBeVisible(target),\n );\n }\n}\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../packages/ui/molecules/Slider/Slider.ts"],
|
|
4
4
|
"sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type {\n BaseProps,\n BaseConfig,\n DragServiceProps,\n KeyServiceProps,\n} from '@studiometa/js-toolkit';\nimport { clamp, inertiaFinalValue, nextFrame, isDev } from '@studiometa/js-toolkit/utils';\nimport { SliderDrag } from './SliderDrag.js';\nimport { SliderItem } from './SliderItem.js';\n\nexport type SliderModes = 'left' | 'center' | 'right';\n\ntype SliderState = { x: Record<SliderModes, number> };\n\nexport interface SliderProps extends BaseProps {\n $refs: {\n wrapper: HTMLElement;\n };\n $children: {\n SliderItem: SliderItem[];\n SliderDrag: SliderDrag[];\n };\n $options: {\n mode: SliderModes;\n fitBounds: boolean;\n contain: boolean;\n sensitivity: number;\n dropSensitivity: number;\n };\n}\n\n/**\n * Orchestrate the slider items state transition.\n * @todo a11y\n */\nexport class Slider<T extends BaseProps = BaseProps> extends Base<T & SliderProps> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'Slider',\n refs: ['wrapper', 'debug'],\n emits: ['goto', 'index'],\n components: {\n SliderItem,\n SliderDrag,\n },\n options: {\n mode: { type: String, default: 'left' },\n fitBounds: Boolean,\n contain: Boolean,\n sensitivity: { type: Number, default: 1 },\n dropSensitivity: { type: Number, default: 2 },\n },\n };\n\n __distanceX = 0;\n\n __initialX = 0;\n\n /**\n * Index of the current active slide.\n */\n __currentIndex = 0;\n\n __isDragging = false;\n\n /**\n * Get the current index.\n */\n get currentIndex() {\n return this.__currentIndex;\n }\n\n /**\n * Set the current index and emit the `index` event.\n */\n set currentIndex(value: number) {\n this.currentSliderItem.disactivate();\n this.$emit('index', value);\n this.__currentIndex = value;\n this.currentSliderItem.activate();\n }\n\n /**\n * Store all the states.\n */\n states: SliderState[] = [];\n\n /**\n * Origins for the different modes.\n */\n origins: Record<SliderModes, number> = {\n left: 0,\n center: 0,\n right: 0,\n };\n\n /**\n * Wether or not the wrapper is focused.\n * @type {boolean}\n */\n hasFocus = false;\n\n /**\n * Get the current state.\n */\n get currentState() {\n return this.states[this.currentIndex];\n }\n\n /**\n * Get the first state.\n */\n get firstState() {\n return this.states[0];\n }\n\n /**\n * Get the last state.\n */\n get lastState() {\n return this.states.at(-1);\n }\n\n /**\n * Get the minimal contain state value.\n */\n get containMinState(): number {\n return this.getStateValueByMode(this.firstState.x, 'left');\n }\n\n /**\n * Get the maximal contain state value.\n */\n get containMaxState(): number {\n return this.getStateValueByMode(this.lastState.x, 'right');\n }\n\n /**\n * Get the last index.\n */\n get indexMax(): number {\n return this.$children.SliderItem.length - 1;\n }\n\n /**\n * Get the current SliderItem\n */\n get currentSliderItem() {\n return this.$children.SliderItem[this.currentIndex];\n }\n\n /**\n * Get the states for each SliderItem.\n */\n getStates(): SliderState[] {\n const { wrapper } = this.$refs;\n const originRect = wrapper.getBoundingClientRect();\n\n this.origins = {\n left: originRect.left,\n center: originRect.x + originRect.width / 2,\n right: originRect.x + originRect.width,\n };\n\n const states: SliderState[] = this.$children.SliderItem.map((item) => ({\n x: {\n left: (item.rect.x - this.origins.left) * -1,\n center: (item.rect.x + item.rect.width / 2 - this.origins.center) * -1,\n right: (item.rect.x + item.rect.width - this.origins.right) * -1,\n },\n }));\n\n if (this.$options.contain) {\n const { mode } = this.$options;\n // Find state where last child has passed the wrapper bound completely\n if (mode === 'left') {\n const lastChild = this.$children.SliderItem.at(-1);\n\n const maxState = states.find((state) => {\n const lastChildPosition =\n lastChild.rect.x - this.origins.left + lastChild.rect.width + state.x.left;\n const diffWithWrapperBound = originRect.width - lastChildPosition;\n if (diffWithWrapperBound > 0) {\n state.x.left = Math.min(state.x.left + diffWithWrapperBound, 0);\n return true;\n }\n\n return false;\n });\n\n if (maxState) {\n return states.map((state) => {\n state.x.left = Math.max(state.x.left, maxState.x.left);\n return state;\n });\n }\n }\n\n if (mode === 'right') {\n const maxStateIndex = states.findIndex((state) => state.x.right <= 0);\n const maxState = maxStateIndex < 0 ? states.at(-1) : states[maxStateIndex - 1];\n\n return states.map((state) => {\n state.x.right = maxStateIndex < 0 ? maxState.x.right : Math.min(state.x.right, 0);\n return state;\n });\n }\n\n if (mode === 'center' && isDev) {\n console.warn(\n `[${this.$id}]`,\n 'The `center` mode is not yet compatible with the `contain` mode.',\n );\n }\n }\n\n return states;\n }\n\n /**\n * Get an origin by mode.\n */\n getOriginByMode(mode?: SliderModes) {\n return this.origins[mode ?? this.$options.mode];\n }\n\n /**\n * Get a state value according to the given mode.\n */\n getStateValueByMode(state: SliderState['x'], mode?: SliderModes) {\n return state[mode ?? this.$options.mode];\n }\n\n /**\n * Mounted hook.\n */\n mounted() {\n this.states = this.getStates();\n this.setAccessibilityAttributes();\n this.prepareInvisibleItems();\n this.goTo(this.currentIndex);\n }\n\n /**\n * Resized hook.\n */\n resized() {\n nextFrame(() => {\n this.states = this.getStates();\n nextFrame(() => {\n this.prepareInvisibleItems();\n this.goTo(this.currentIndex);\n });\n });\n }\n\n /**\n * Set accessibility attributes for the component\n */\n setAccessibilityAttributes() {\n this.$el.setAttribute('role', 'group');\n this.$el.setAttribute('aria-roledescription', 'carousel');\n }\n\n /**\n * Go to the next slide.\n */\n goNext() {\n if (this.currentIndex + 1 > this.indexMax) {\n return;\n }\n\n this.goTo(this.currentIndex + 1);\n }\n\n /**\n * Go to the previous slide.\n */\n goPrev() {\n if (this.currentIndex - 1 < 0) {\n return;\n }\n\n this.goTo(this.currentIndex - 1);\n }\n\n /**\n * Go to the given index.\n */\n goTo(index: number, { withInstantMove = true } = {}) {\n if (index < 0 || index > this.indexMax) {\n throw new Error('Index out of bound.');\n }\n\n const currentState = this.getStateValueByMode(this.currentState.x);\n const state = this.getStateValueByMode(this.states[index].x);\n const itemsToMove = this.getVisibleItems(state);\n const invisibleItemsToMoveInstantly = this.getInvisibleItems(state);\n\n itemsToMove.forEach((item) => {\n // Better perfs when going fast through the slides\n if (currentState !== state && withInstantMove) {\n item.moveInstantly(currentState);\n }\n nextFrame(() => item.move(state));\n });\n invisibleItemsToMoveInstantly.forEach((item) => {\n item.moveInstantly(state);\n });\n\n this.currentIndex = index;\n this.$emit('goto', index);\n }\n\n /**\n * Listen to the Draggable `start` event.\n */\n onSliderDragStart() {\n this.__initialX = this.currentSliderItem ? this.currentSliderItem.x : 0;\n this.__distanceX = this.__initialX;\n\n this.__isDragging = true;\n }\n\n /**\n * Listen to the Draggable `drag` event.\n */\n onSliderDragDrag(props: DragServiceProps) {\n if (Math.abs(props.delta.y) > Math.abs(props.delta.x)) {\n return;\n }\n\n this.__distanceX = this.__initialX + props.distance.x * this.$options.sensitivity;\n\n this.getVisibleItems(this.__distanceX).forEach((item) => {\n item.moveInstantly(this.__distanceX);\n });\n }\n\n /**\n * Listen to the Draggable `drop` event and find the new active slide.\n */\n onSliderDragDrop(props: DragServiceProps) {\n if (!this.__isDragging) {\n return;\n }\n this.__isDragging = false;\n\n if (Math.abs(props.delta.y) > Math.abs(props.delta.x)) {\n return;\n }\n\n let finalX = clamp(\n inertiaFinalValue(this.__distanceX, props.delta.x * this.$options.dropSensitivity),\n this.getStateValueByMode(this.firstState.x),\n this.getStateValueByMode(this.lastState.x),\n );\n\n const absoluteDifferencesBetweenDistanceAndState = this.states.map((state) =>\n Math.abs(finalX - this.getStateValueByMode(state.x)),\n );\n const minimumDifference = Math.min(...absoluteDifferencesBetweenDistanceAndState);\n const closestIndex = absoluteDifferencesBetweenDistanceAndState.indexOf(minimumDifference);\n\n if (this.$options.fitBounds) {\n this.goTo(closestIndex, { withInstantMove: false });\n } else {\n if (this.$options.contain) {\n finalX = Math.min(this.containMinState, finalX);\n finalX = Math.max(this.containMaxState, finalX);\n }\n this.$children.SliderItem.forEach((item) => {\n item.move(finalX);\n });\n this.currentIndex = closestIndex;\n }\n }\n\n /**\n * Enable focus.\n */\n onWrapperFocus() {\n this.hasFocus = true;\n }\n\n /**\n * Disable focus.\n */\n onWrapperBlur() {\n this.hasFocus = false;\n }\n\n /**\n * Go prev or next when focus is on the wrapper and pressing arrow keys.\n */\n keyed({ LEFT, RIGHT, isDown }: KeyServiceProps) {\n if (this.hasFocus && isDown) {\n if (LEFT) {\n this.goPrev();\n } else if (RIGHT) {\n this.goNext();\n }\n }\n }\n\n /**\n * Prepare invisible items.\n */\n prepareInvisibleItems() {\n const state = this.states[this.currentIndex];\n const nextItemsToPrepare = [];\n const previousItemsToPrepare = [];\n\n this.getInvisibleItems(this.getStateValueByMode(state.x)).forEach((item, i) => {\n if (i > this.currentIndex) {\n nextItemsToPrepare.push(item);\n return;\n }\n\n if (i < this.currentIndex) {\n previousItemsToPrepare.push(item);\n }\n });\n\n nextItemsToPrepare.forEach((item) => {\n const invisibleState = this.getStateWhereItemWillBeInvisible(item);\n if (invisibleState) {\n item.moveInstantly(this.getStateValueByMode(invisibleState.x));\n }\n });\n\n previousItemsToPrepare.forEach((item) => {\n const invisibleState = this.getStateWhereItemWillBeInvisible(item, { reversed: true });\n if (invisibleState) {\n item.moveInstantly(this.getStateValueByMode(invisibleState.x));\n }\n });\n }\n\n /**\n * Get the state where the given item will be visible.\n */\n getStateWhereItemWillBeInvisible(item: SliderItem, { reversed = false } = {}): SliderState {\n const visibleStates = this.states.filter((state) =>\n item.willBeVisible(this.getStateValueByMode(state.x)),\n );\n const firstVisibleState = visibleStates[0];\n const lastVisibleState = visibleStates.at(-1);\n const firstVisibleStateIndex = this.states.findIndex(\n (state) =>\n this.getStateValueByMode(state.x) === this.getStateValueByMode(firstVisibleState.x),\n );\n const lastVisibleStateIndex = this.states.findIndex((state) => state.x === lastVisibleState.x);\n\n return reversed\n ? this.states[lastVisibleStateIndex + 1]\n : this.states[firstVisibleStateIndex - 1];\n }\n\n /**\n * Get the visible slides for the given position.\n */\n getVisibleItems(target: number) {\n return this.$children.SliderItem.filter((item) => item.isVisible || item.willBeVisible(target));\n }\n\n /**\n * Get the invisible slides for the given position.\n */\n getInvisibleItems(target: number) {\n return this.$children.SliderItem.filter(\n (item) => !item.isVisible && !item.willBeVisible(target),\n );\n }\n}\n"],
|
|
5
|
-
"mappings": "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
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,7 +2,6 @@ var __defProp = Object.defineProperty;
|
|
|
2
2
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
3
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
4
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
6
5
|
var __export = (target, all) => {
|
|
7
6
|
for (var name in all)
|
|
8
7
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -16,10 +15,6 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
16
15
|
return to;
|
|
17
16
|
};
|
|
18
17
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
-
var __publicField = (obj, key, value) => {
|
|
20
|
-
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
21
|
-
return value;
|
|
22
|
-
};
|
|
23
18
|
|
|
24
19
|
// packages/ui/molecules/Slider/SliderBtn.ts
|
|
25
20
|
var SliderBtn_exports = {};
|
|
@@ -30,6 +25,17 @@ module.exports = __toCommonJS(SliderBtn_exports);
|
|
|
30
25
|
var import_utils = require("@studiometa/js-toolkit/utils");
|
|
31
26
|
var import_AbstractSliderChild = require("./AbstractSliderChild.cjs");
|
|
32
27
|
var SliderBtn = class extends import_AbstractSliderChild.AbstractSliderChild {
|
|
28
|
+
/**
|
|
29
|
+
* Config.
|
|
30
|
+
*/
|
|
31
|
+
static config = {
|
|
32
|
+
name: "SliderBtn",
|
|
33
|
+
options: {
|
|
34
|
+
prev: Boolean,
|
|
35
|
+
next: Boolean,
|
|
36
|
+
contain: Boolean
|
|
37
|
+
}
|
|
38
|
+
};
|
|
33
39
|
/**
|
|
34
40
|
* Update attributes.
|
|
35
41
|
* @param {number} index
|
|
@@ -61,16 +67,5 @@ var SliderBtn = class extends import_AbstractSliderChild.AbstractSliderChild {
|
|
|
61
67
|
}
|
|
62
68
|
}
|
|
63
69
|
};
|
|
64
|
-
/**
|
|
65
|
-
* Config.
|
|
66
|
-
*/
|
|
67
|
-
__publicField(SliderBtn, "config", {
|
|
68
|
-
name: "SliderBtn",
|
|
69
|
-
options: {
|
|
70
|
-
prev: Boolean,
|
|
71
|
-
next: Boolean,
|
|
72
|
-
contain: Boolean
|
|
73
|
-
}
|
|
74
|
-
});
|
|
75
70
|
if (module.exports.default) module.exports = module.exports.default;
|
|
76
71
|
//# sourceMappingURL=SliderBtn.cjs.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../packages/ui/molecules/Slider/SliderBtn.ts"],
|
|
4
4
|
"sourcesContent": ["import { isDev } from '@studiometa/js-toolkit/utils';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { AbstractSliderChild } from './AbstractSliderChild.js';\n\nexport interface SliderBtnProps extends BaseProps {\n $options: {\n prev: boolean;\n next: boolean;\n contain: boolean;\n };\n}\n\n/**\n * SliderBtn class.\n */\nexport class SliderBtn<T extends BaseProps = BaseProps> extends AbstractSliderChild<\n T & SliderBtnProps\n> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'SliderBtn',\n options: {\n prev: Boolean,\n next: Boolean,\n contain: Boolean,\n },\n };\n\n /**\n * Update attributes.\n * @param {number} index\n * @returns {void}\n */\n update(index: number) {\n if (isDev && this.$options.contain && !this.$parent.$options.contain) {\n console.warn(\n `[${this.$id}] The contain option will only works if the parent Slider also has the contain option.`,\n );\n }\n\n const isContainMaxState =\n this.$options.contain &&\n this.$parent.$options.contain &&\n this.$parent.containMaxState ===\n this.$parent.getStates()[index].x[this.$parent.$options.mode];\n\n if (\n (index === 0 && this.$options.prev) ||\n ((index === this.$parent.indexMax || isContainMaxState) && this.$options.next)\n ) {\n this.$el.setAttribute('disabled', '');\n } else {\n this.$el.removeAttribute('disabled');\n }\n }\n\n /**\n * Go prev or next on click.\n * @returns {void}\n */\n onClick() {\n const { prev, next } = this.$options;\n\n if (prev) {\n this.$parent.goPrev();\n } else if (next) {\n this.$parent.goNext();\n }\n }\n}\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAsB;AAEtB,iCAAoC;AAa7B,IAAM,YAAN,cAAyD,+CAE9D;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,SAAS;AAAA,MACP,MAAM;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,OAAO,OAAe;AACpB,QAAI,sBAAS,KAAK,SAAS,WAAW,CAAC,KAAK,QAAQ,SAAS,SAAS;AACpE,cAAQ;AAAA,QACN,IAAI,KAAK,GAAG;AAAA,MACd;AAAA,IACF;AAEA,UAAM,oBACJ,KAAK,SAAS,WACd,KAAK,QAAQ,SAAS,WACtB,KAAK,QAAQ,oBACX,KAAK,QAAQ,UAAU,EAAE,KAAK,EAAE,EAAE,KAAK,QAAQ,SAAS,IAAI;AAEhE,QACG,UAAU,KAAK,KAAK,SAAS,SAC5B,UAAU,KAAK,QAAQ,YAAY,sBAAsB,KAAK,SAAS,MACzE;AACA,WAAK,IAAI,aAAa,YAAY,EAAE;AAAA,IACtC,OAAO;AACL,WAAK,IAAI,gBAAgB,UAAU;AAAA,IACrC;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,UAAU;AACR,UAAM,EAAE,MAAM,KAAK,IAAI,KAAK;AAE5B,QAAI,MAAM;AACR,WAAK,QAAQ,OAAO;AAAA,IACtB,WAAW,MAAM;AACf,WAAK,QAAQ,OAAO;AAAA,IACtB;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../packages/ui/molecules/Slider/SliderBtn.ts"],
|
|
4
4
|
"sourcesContent": ["import { isDev } from '@studiometa/js-toolkit/utils';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { AbstractSliderChild } from './AbstractSliderChild.js';\n\nexport interface SliderBtnProps extends BaseProps {\n $options: {\n prev: boolean;\n next: boolean;\n contain: boolean;\n };\n}\n\n/**\n * SliderBtn class.\n */\nexport class SliderBtn<T extends BaseProps = BaseProps> extends AbstractSliderChild<\n T & SliderBtnProps\n> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'SliderBtn',\n options: {\n prev: Boolean,\n next: Boolean,\n contain: Boolean,\n },\n };\n\n /**\n * Update attributes.\n * @param {number} index\n * @returns {void}\n */\n update(index: number) {\n if (isDev && this.$options.contain && !this.$parent.$options.contain) {\n console.warn(\n `[${this.$id}] The contain option will only works if the parent Slider also has the contain option.`,\n );\n }\n\n const isContainMaxState =\n this.$options.contain &&\n this.$parent.$options.contain &&\n this.$parent.containMaxState ===\n this.$parent.getStates()[index].x[this.$parent.$options.mode];\n\n if (\n (index === 0 && this.$options.prev) ||\n ((index === this.$parent.indexMax || isContainMaxState) && this.$options.next)\n ) {\n this.$el.setAttribute('disabled', '');\n } else {\n this.$el.removeAttribute('disabled');\n }\n }\n\n /**\n * Go prev or next on click.\n * @returns {void}\n */\n onClick() {\n const { prev, next } = this.$options;\n\n if (prev) {\n this.$parent.goPrev();\n } else if (next) {\n this.$parent.goNext();\n }\n }\n}\n"],
|
|
5
|
-
"mappings": "AAAA,SAAS,aAAa;AAEtB,SAAS,2BAA2B;AAa7B,MAAM,kBAAmD,oBAE9D;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,SAAS;AAAA,MACP,MAAM;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,OAAO,OAAe;AACpB,QAAI,SAAS,KAAK,SAAS,WAAW,CAAC,KAAK,QAAQ,SAAS,SAAS;AACpE,cAAQ;AAAA,QACN,IAAI,KAAK;AAAA,
|
|
5
|
+
"mappings": "AAAA,SAAS,aAAa;AAEtB,SAAS,2BAA2B;AAa7B,MAAM,kBAAmD,oBAE9D;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,SAAS;AAAA,MACP,MAAM;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,OAAO,OAAe;AACpB,QAAI,SAAS,KAAK,SAAS,WAAW,CAAC,KAAK,QAAQ,SAAS,SAAS;AACpE,cAAQ;AAAA,QACN,IAAI,KAAK,GAAG;AAAA,MACd;AAAA,IACF;AAEA,UAAM,oBACJ,KAAK,SAAS,WACd,KAAK,QAAQ,SAAS,WACtB,KAAK,QAAQ,oBACX,KAAK,QAAQ,UAAU,EAAE,KAAK,EAAE,EAAE,KAAK,QAAQ,SAAS,IAAI;AAEhE,QACG,UAAU,KAAK,KAAK,SAAS,SAC5B,UAAU,KAAK,QAAQ,YAAY,sBAAsB,KAAK,SAAS,MACzE;AACA,WAAK,IAAI,aAAa,YAAY,EAAE;AAAA,IACtC,OAAO;AACL,WAAK,IAAI,gBAAgB,UAAU;AAAA,IACrC;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,UAAU;AACR,UAAM,EAAE,MAAM,KAAK,IAAI,KAAK;AAE5B,QAAI,MAAM;AACR,WAAK,QAAQ,OAAO;AAAA,IACtB,WAAW,MAAM;AACf,WAAK,QAAQ,OAAO;AAAA,IACtB;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|