@studiometa/ui 0.2.14 → 0.2.15
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/AnchorScrollTo/AnchorScrollTo.cjs +1 -0
- package/atoms/AnchorScrollTo/AnchorScrollTo.cjs.map +7 -0
- package/atoms/AnchorScrollTo/AnchorScrollTo.js +4 -9
- package/atoms/AnchorScrollTo/AnchorScrollTo.js.map +7 -0
- package/atoms/AnchorScrollTo/index.cjs +1 -0
- package/atoms/AnchorScrollTo/index.cjs.map +7 -0
- package/atoms/AnchorScrollTo/index.js +1 -0
- package/atoms/AnchorScrollTo/index.js.map +7 -0
- package/atoms/Cursor/Cursor.cjs +7 -9
- package/atoms/Cursor/Cursor.cjs.map +7 -0
- package/atoms/Cursor/Cursor.js +44 -52
- package/atoms/Cursor/Cursor.js.map +7 -0
- package/atoms/Cursor/index.cjs +1 -0
- package/atoms/Cursor/index.cjs.map +7 -0
- package/atoms/Cursor/index.js +1 -0
- package/atoms/Cursor/index.js.map +7 -0
- package/atoms/Figure/Figure.cjs +1 -0
- package/atoms/Figure/Figure.cjs.map +7 -0
- package/atoms/Figure/Figure.js +10 -15
- package/atoms/Figure/Figure.js.map +7 -0
- package/atoms/Figure/FigureTwicPics.cjs +1 -0
- package/atoms/Figure/FigureTwicPics.cjs.map +7 -0
- package/atoms/Figure/FigureTwicPics.js +17 -22
- package/atoms/Figure/FigureTwicPics.js.map +7 -0
- package/atoms/Figure/index.cjs +1 -0
- package/atoms/Figure/index.cjs.map +7 -0
- package/atoms/Figure/index.js +1 -0
- package/atoms/Figure/index.js.map +7 -0
- package/atoms/LargeText/LargeText.cjs +8 -10
- package/atoms/LargeText/LargeText.cjs.map +7 -0
- package/atoms/LargeText/LargeText.js +23 -31
- package/atoms/LargeText/LargeText.js.map +7 -0
- package/atoms/LargeText/index.cjs +1 -0
- package/atoms/LargeText/index.cjs.map +7 -0
- package/atoms/LargeText/index.js +1 -0
- package/atoms/LargeText/index.js.map +7 -0
- package/atoms/LazyInclude/LazyInclude.cjs +1 -0
- package/atoms/LazyInclude/LazyInclude.cjs.map +7 -0
- package/atoms/LazyInclude/LazyInclude.js +10 -15
- package/atoms/LazyInclude/LazyInclude.js.map +7 -0
- package/atoms/LazyInclude/index.cjs +1 -0
- package/atoms/LazyInclude/index.cjs.map +7 -0
- package/atoms/LazyInclude/index.js +1 -0
- package/atoms/LazyInclude/index.js.map +7 -0
- package/atoms/Prefetch/AbstractPrefetch.cjs +1 -0
- package/atoms/Prefetch/AbstractPrefetch.cjs.map +7 -0
- package/atoms/Prefetch/AbstractPrefetch.js +15 -21
- package/atoms/Prefetch/AbstractPrefetch.js.map +7 -0
- package/atoms/Prefetch/PrefetchWhenOver.cjs +1 -0
- package/atoms/Prefetch/PrefetchWhenOver.cjs.map +7 -0
- package/atoms/Prefetch/PrefetchWhenOver.js +5 -10
- package/atoms/Prefetch/PrefetchWhenOver.js.map +7 -0
- package/atoms/Prefetch/PrefetchWhenVisible.cjs +1 -0
- package/atoms/Prefetch/PrefetchWhenVisible.cjs.map +7 -0
- package/atoms/Prefetch/PrefetchWhenVisible.js +5 -10
- package/atoms/Prefetch/PrefetchWhenVisible.js.map +7 -0
- package/atoms/Prefetch/index.cjs +1 -0
- package/atoms/Prefetch/index.cjs.map +7 -0
- package/atoms/Prefetch/index.js +1 -0
- package/atoms/Prefetch/index.js.map +7 -0
- package/atoms/ScrollAnimation/AbstractScrollAnimation.cjs +1 -0
- package/atoms/ScrollAnimation/AbstractScrollAnimation.cjs.map +7 -0
- package/atoms/ScrollAnimation/AbstractScrollAnimation.js +25 -30
- package/atoms/ScrollAnimation/AbstractScrollAnimation.js.map +7 -0
- package/atoms/ScrollAnimation/ScrollAnimation.cjs +1 -0
- package/atoms/ScrollAnimation/ScrollAnimation.cjs.map +7 -0
- package/atoms/ScrollAnimation/ScrollAnimation.js +6 -11
- package/atoms/ScrollAnimation/ScrollAnimation.js.map +7 -0
- package/atoms/ScrollAnimation/ScrollAnimationChild.cjs +9 -11
- package/atoms/ScrollAnimation/ScrollAnimationChild.cjs.map +7 -0
- package/atoms/ScrollAnimation/ScrollAnimationChild.js +24 -32
- package/atoms/ScrollAnimation/ScrollAnimationChild.js.map +7 -0
- package/atoms/ScrollAnimation/ScrollAnimationChildWithEase.cjs +1 -0
- package/atoms/ScrollAnimation/ScrollAnimationChildWithEase.cjs.map +7 -0
- package/atoms/ScrollAnimation/ScrollAnimationChildWithEase.js +5 -10
- package/atoms/ScrollAnimation/ScrollAnimationChildWithEase.js.map +7 -0
- package/atoms/ScrollAnimation/ScrollAnimationParent.cjs +1 -0
- package/atoms/ScrollAnimation/ScrollAnimationParent.cjs.map +7 -0
- package/atoms/ScrollAnimation/ScrollAnimationParent.js +7 -12
- package/atoms/ScrollAnimation/ScrollAnimationParent.js.map +7 -0
- package/atoms/ScrollAnimation/ScrollAnimationWithEase.cjs +1 -0
- package/atoms/ScrollAnimation/ScrollAnimationWithEase.cjs.map +7 -0
- package/atoms/ScrollAnimation/ScrollAnimationWithEase.js +5 -10
- package/atoms/ScrollAnimation/ScrollAnimationWithEase.js.map +7 -0
- package/atoms/ScrollAnimation/animationScrollWithEase.cjs +12 -16
- package/atoms/ScrollAnimation/animationScrollWithEase.cjs.map +7 -0
- package/atoms/ScrollAnimation/animationScrollWithEase.js +12 -17
- package/atoms/ScrollAnimation/animationScrollWithEase.js.map +7 -0
- package/atoms/ScrollAnimation/index.cjs +1 -0
- package/atoms/ScrollAnimation/index.cjs.map +7 -0
- package/atoms/ScrollAnimation/index.js +1 -0
- package/atoms/ScrollAnimation/index.js.map +7 -0
- package/atoms/ScrollReveal/ScrollReveal.cjs +2 -2
- package/atoms/ScrollReveal/ScrollReveal.cjs.map +7 -0
- package/atoms/ScrollReveal/ScrollReveal.js +24 -31
- package/atoms/ScrollReveal/ScrollReveal.js.map +7 -0
- package/atoms/ScrollReveal/index.cjs +1 -0
- package/atoms/ScrollReveal/index.cjs.map +7 -0
- package/atoms/ScrollReveal/index.js +1 -0
- package/atoms/ScrollReveal/index.js.map +7 -0
- package/atoms/index.cjs +1 -0
- package/atoms/index.cjs.map +7 -0
- package/atoms/index.js +1 -0
- package/atoms/index.js.map +7 -0
- package/decorators/index.cjs +1 -0
- package/decorators/index.cjs.map +7 -0
- package/decorators/index.js +1 -0
- package/decorators/index.js.map +7 -0
- package/decorators/withTransition.cjs +18 -27
- package/decorators/withTransition.cjs.map +7 -0
- package/decorators/withTransition.js +19 -29
- package/decorators/withTransition.js.map +7 -0
- package/index.cjs +1 -0
- package/index.cjs.map +7 -0
- package/index.js +1 -0
- package/index.js.map +7 -0
- package/molecules/Accordion/Accordion.cjs +1 -0
- package/molecules/Accordion/Accordion.cjs.map +7 -0
- package/molecules/Accordion/Accordion.js +7 -12
- package/molecules/Accordion/Accordion.js.map +7 -0
- package/molecules/Accordion/AccordionCore.cjs +1 -0
- package/molecules/Accordion/AccordionCore.cjs.map +7 -0
- package/molecules/Accordion/AccordionCore.js +12 -17
- package/molecules/Accordion/AccordionCore.js.map +7 -0
- package/molecules/Accordion/AccordionItem.cjs +2 -2
- package/molecules/Accordion/AccordionItem.cjs.map +7 -0
- package/molecules/Accordion/AccordionItem.js +23 -30
- package/molecules/Accordion/AccordionItem.js.map +7 -0
- package/molecules/Accordion/index.cjs +1 -0
- package/molecules/Accordion/index.cjs.map +7 -0
- package/molecules/Accordion/index.js +1 -0
- package/molecules/Accordion/index.js.map +7 -0
- package/molecules/Menu/Menu.cjs +1 -0
- package/molecules/Menu/Menu.cjs.map +7 -0
- package/molecules/Menu/Menu.js +17 -23
- package/molecules/Menu/Menu.js.map +7 -0
- package/molecules/Menu/MenuBtn.cjs +2 -4
- package/molecules/Menu/MenuBtn.cjs.map +7 -0
- package/molecules/Menu/MenuBtn.js +5 -13
- package/molecules/Menu/MenuBtn.js.map +7 -0
- package/molecules/Menu/MenuList.cjs +3 -5
- package/molecules/Menu/MenuList.cjs.map +7 -0
- package/molecules/Menu/MenuList.d.ts +1 -1
- package/molecules/Menu/MenuList.js +13 -22
- package/molecules/Menu/MenuList.js.map +7 -0
- package/molecules/Menu/index.cjs +1 -0
- package/molecules/Menu/index.cjs.map +7 -0
- package/molecules/Menu/index.js +1 -0
- package/molecules/Menu/index.js.map +7 -0
- package/molecules/Modal/Modal.cjs +8 -15
- package/molecules/Modal/Modal.cjs.map +7 -0
- package/molecules/Modal/Modal.d.ts +1 -1
- package/molecules/Modal/Modal.js +34 -47
- package/molecules/Modal/Modal.js.map +7 -0
- package/molecules/Modal/ModalWithTransition.cjs +1 -0
- package/molecules/Modal/ModalWithTransition.cjs.map +7 -0
- package/molecules/Modal/ModalWithTransition.js +26 -31
- package/molecules/Modal/ModalWithTransition.js.map +7 -0
- package/molecules/Modal/index.cjs +1 -0
- package/molecules/Modal/index.cjs.map +7 -0
- package/molecules/Modal/index.js +1 -0
- package/molecules/Modal/index.js.map +7 -0
- package/molecules/Panel/Panel.cjs +3 -6
- package/molecules/Panel/Panel.cjs.map +7 -0
- package/molecules/Panel/Panel.js +20 -30
- package/molecules/Panel/Panel.js.map +7 -0
- package/molecules/Panel/index.cjs +1 -0
- package/molecules/Panel/index.cjs.map +7 -0
- package/molecules/Panel/index.js +1 -0
- package/molecules/Panel/index.js.map +7 -0
- package/molecules/Slider/AbstractSliderChild.cjs +1 -0
- package/molecules/Slider/AbstractSliderChild.cjs.map +7 -0
- package/molecules/Slider/AbstractSliderChild.js +4 -9
- package/molecules/Slider/AbstractSliderChild.js.map +7 -0
- package/molecules/Slider/Slider.cjs +13 -15
- package/molecules/Slider/Slider.cjs.map +7 -0
- package/molecules/Slider/Slider.js +29 -37
- package/molecules/Slider/Slider.js.map +7 -0
- package/molecules/Slider/SliderBtn.cjs +1 -0
- package/molecules/Slider/SliderBtn.cjs.map +7 -0
- package/molecules/Slider/SliderBtn.js +8 -13
- package/molecules/Slider/SliderBtn.js.map +7 -0
- package/molecules/Slider/SliderCount.cjs +1 -0
- package/molecules/Slider/SliderCount.cjs.map +7 -0
- package/molecules/Slider/SliderCount.js +5 -10
- package/molecules/Slider/SliderCount.js.map +7 -0
- package/molecules/Slider/SliderDots.cjs +2 -4
- package/molecules/Slider/SliderDots.cjs.map +7 -0
- package/molecules/Slider/SliderDots.js +6 -14
- package/molecules/Slider/SliderDots.js.map +7 -0
- package/molecules/Slider/SliderDrag.cjs +1 -0
- package/molecules/Slider/SliderDrag.cjs.map +7 -0
- package/molecules/Slider/SliderDrag.js +11 -16
- package/molecules/Slider/SliderDrag.js.map +7 -0
- package/molecules/Slider/SliderItem.cjs +5 -7
- package/molecules/Slider/SliderItem.cjs.map +7 -0
- package/molecules/Slider/SliderItem.js +9 -17
- package/molecules/Slider/SliderItem.js.map +7 -0
- package/molecules/Slider/SliderProgress.cjs +1 -0
- package/molecules/Slider/SliderProgress.cjs.map +7 -0
- package/molecules/Slider/SliderProgress.js +5 -10
- package/molecules/Slider/SliderProgress.js.map +7 -0
- package/molecules/Slider/index.cjs +1 -0
- package/molecules/Slider/index.cjs.map +7 -0
- package/molecules/Slider/index.js +1 -0
- package/molecules/Slider/index.js.map +7 -0
- package/molecules/Sticky/Sticky.cjs +4 -6
- package/molecules/Sticky/Sticky.cjs.map +7 -0
- package/molecules/Sticky/Sticky.js +25 -34
- package/molecules/Sticky/Sticky.js.map +7 -0
- package/molecules/Sticky/index.cjs +1 -0
- package/molecules/Sticky/index.cjs.map +7 -0
- package/molecules/Sticky/index.js +1 -0
- package/molecules/Sticky/index.js.map +7 -0
- package/molecules/TableOfContent/TableOfContent.cjs +1 -0
- package/molecules/TableOfContent/TableOfContent.cjs.map +7 -0
- package/molecules/TableOfContent/TableOfContent.js +12 -17
- package/molecules/TableOfContent/TableOfContent.js.map +7 -0
- package/molecules/TableOfContent/TableOfContentAnchor.cjs +2 -4
- package/molecules/TableOfContent/TableOfContentAnchor.cjs.map +7 -0
- package/molecules/TableOfContent/TableOfContentAnchor.js +12 -20
- package/molecules/TableOfContent/TableOfContentAnchor.js.map +7 -0
- package/molecules/TableOfContent/index.cjs +1 -0
- package/molecules/TableOfContent/index.cjs.map +7 -0
- package/molecules/TableOfContent/index.js +1 -0
- package/molecules/TableOfContent/index.js.map +7 -0
- package/molecules/Tabs/Tabs.cjs +2 -4
- package/molecules/Tabs/Tabs.cjs.map +7 -0
- package/molecules/Tabs/Tabs.js +23 -31
- package/molecules/Tabs/Tabs.js.map +7 -0
- package/molecules/Tabs/index.cjs +1 -0
- package/molecules/Tabs/index.cjs.map +7 -0
- package/molecules/Tabs/index.js +1 -0
- package/molecules/Tabs/index.js.map +7 -0
- package/molecules/index.cjs +1 -0
- package/molecules/index.cjs.map +7 -0
- package/molecules/index.js +1 -0
- package/molecules/index.js.map +7 -0
- package/organisms/Frame/Frame.cjs +1 -0
- package/organisms/Frame/Frame.cjs.map +7 -0
- package/organisms/Frame/Frame.js +26 -32
- package/organisms/Frame/Frame.js.map +7 -0
- package/organisms/Frame/FrameAnchor.cjs +1 -0
- package/organisms/Frame/FrameAnchor.cjs.map +7 -0
- package/organisms/Frame/FrameAnchor.js +4 -9
- package/organisms/Frame/FrameAnchor.js.map +7 -0
- package/organisms/Frame/FrameForm.cjs +1 -0
- package/organisms/Frame/FrameForm.cjs.map +7 -0
- package/organisms/Frame/FrameForm.js +4 -9
- package/organisms/Frame/FrameForm.js.map +7 -0
- package/organisms/Frame/FrameTarget.cjs +3 -5
- package/organisms/Frame/FrameTarget.cjs.map +7 -0
- package/organisms/Frame/FrameTarget.d.ts +1 -1
- package/organisms/Frame/FrameTarget.js +24 -33
- package/organisms/Frame/FrameTarget.js.map +7 -0
- package/organisms/Frame/index.cjs +1 -0
- package/organisms/Frame/index.cjs.map +7 -0
- package/organisms/Frame/index.js +1 -0
- package/organisms/Frame/index.js.map +7 -0
- package/organisms/index.cjs +1 -0
- package/organisms/index.cjs.map +7 -0
- package/organisms/index.js +1 -0
- package/organisms/index.js.map +7 -0
- package/package.json +2 -2
- package/primitives/Draggable/Draggable.cjs +5 -7
- package/primitives/Draggable/Draggable.cjs.map +7 -0
- package/primitives/Draggable/Draggable.js +8 -16
- package/primitives/Draggable/Draggable.js.map +7 -0
- package/primitives/Draggable/index.cjs +1 -0
- package/primitives/Draggable/index.cjs.map +7 -0
- package/primitives/Draggable/index.js +1 -0
- package/primitives/Draggable/index.js.map +7 -0
- package/primitives/Sentinel/Sentinel.cjs +1 -0
- package/primitives/Sentinel/Sentinel.cjs.map +7 -0
- package/primitives/Sentinel/Sentinel.js +4 -9
- package/primitives/Sentinel/Sentinel.js.map +7 -0
- package/primitives/Sentinel/index.cjs +1 -0
- package/primitives/Sentinel/index.cjs.map +7 -0
- package/primitives/Sentinel/index.js +1 -0
- package/primitives/Sentinel/index.js.map +7 -0
- package/primitives/Transition/Transition.cjs +1 -0
- package/primitives/Transition/Transition.cjs.map +7 -0
- package/primitives/Transition/Transition.js +4 -9
- package/primitives/Transition/Transition.js.map +7 -0
- package/primitives/Transition/index.cjs +1 -0
- package/primitives/Transition/index.cjs.map +7 -0
- package/primitives/Transition/index.js +1 -0
- package/primitives/Transition/index.js.map +7 -0
- package/primitives/index.cjs +1 -0
- package/primitives/index.cjs.map +7 -0
- package/primitives/index.js +1 -0
- package/primitives/index.js.map +7 -0
package/molecules/Panel/index.js
CHANGED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../packages/ui/molecules/Slider/AbstractSliderChild.ts"],
|
|
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> extends Base<T & AbstractSliderChildProps> implements BaseInterface {\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 *\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;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAqB;AAErB,mBAAoD;AACpD,oBAAuB;AAShB,IAAM,sBAAN,cAAmE,uBAA4D;AAAA,EAWpI,UAAU;AACR,QAAI,EAAE,KAAK,mBAAmB,uBAAS;AACrC,YAAM,IAAI;AAAA,QACR,SAAS,KAAK,SAAS;AAAA,MACzB;AAAA,IACF;AAEA,SAAK,QAAQ,IAAI,SAAS,IAAI;AAAA,EAChC;AAAA,EAKA,UAAU;AACR,gCAAU,MAAM;AACd,WAAK,OAAO,KAAK,QAAQ,YAAY;AAAA,IACvC,CAAC;AAAA,EACH;AAAA,EAKA,YAAY;AACV,SAAK,QAAQ,KAAK,SAAS,IAAI;AAAA,EACjC;AAAA,EAQA,YAAY,OAAO;AACjB,QAAI,MAAM,SAAS,SAAS;AAC1B,gCAAa,KAAK,MAAM;AACtB,cAAM,WAAW,KAAK,OAAO,MAAM,OAAO,EAAE;AAC5C,gBAAI,yBAAW,QAAQ,GAAG;AACxB,oCAAa,MAAM,MAAM;AAEvB,qBAAS;AAAA,UACX,CAAC;AAAA,QACH;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAQA,OAAO,OAAuB;AAC5B,UAAM,IAAI,MAAM,oCAAoC,sCAAsC;AAAA,EAC5F;AACF;AA9DE,cAJW,qBAIJ,UAAoB;AAAA,EACzB,MAAM;AACR;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,13 +1,10 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
3
|
-
var __publicField = (obj, key, value) => {
|
|
4
|
-
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
5
|
-
return value;
|
|
6
|
-
};
|
|
7
1
|
import { Base } from "@studiometa/js-toolkit";
|
|
8
2
|
import { nextFrame, domScheduler, isFunction } from "@studiometa/js-toolkit/utils";
|
|
9
3
|
import { Slider } from "./Slider.js";
|
|
10
4
|
class AbstractSliderChild extends Base {
|
|
5
|
+
static config = {
|
|
6
|
+
name: "AbstractSliderChild"
|
|
7
|
+
};
|
|
11
8
|
mounted() {
|
|
12
9
|
if (!(this.$parent instanceof Slider)) {
|
|
13
10
|
throw new Error(
|
|
@@ -40,9 +37,7 @@ class AbstractSliderChild extends Base {
|
|
|
40
37
|
throw new Error(`The \`AbstractSliderChild.update(${index})\` method must be implemented.`);
|
|
41
38
|
}
|
|
42
39
|
}
|
|
43
|
-
__publicField(AbstractSliderChild, "config", {
|
|
44
|
-
name: "AbstractSliderChild"
|
|
45
|
-
});
|
|
46
40
|
export {
|
|
47
41
|
AbstractSliderChild
|
|
48
42
|
};
|
|
43
|
+
//# sourceMappingURL=AbstractSliderChild.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../packages/ui/molecules/Slider/AbstractSliderChild.ts"],
|
|
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> extends Base<T & AbstractSliderChildProps> implements BaseInterface {\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 *\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,4BAA6D,KAA4D;AAAA,EAIpI,OAAO,SAAoB;AAAA,IACzB,MAAM;AAAA,EACR;AAAA,EAKA,UAAU;AACR,QAAI,EAAE,KAAK,mBAAmB,SAAS;AACrC,YAAM,IAAI;AAAA,QACR,SAAS,KAAK,SAAS;AAAA,MACzB;AAAA,IACF;AAEA,SAAK,QAAQ,IAAI,SAAS,IAAI;AAAA,EAChC;AAAA,EAKA,UAAU;AACR,cAAU,MAAM;AACd,WAAK,OAAO,KAAK,QAAQ,YAAY;AAAA,IACvC,CAAC;AAAA,EACH;AAAA,EAKA,YAAY;AACV,SAAK,QAAQ,KAAK,SAAS,IAAI;AAAA,EACjC;AAAA,EAQA,YAAY,OAAO;AACjB,QAAI,MAAM,SAAS,SAAS;AAC1B,mBAAa,KAAK,MAAM;AACtB,cAAM,WAAW,KAAK,OAAO,MAAM,OAAO,EAAE;AAC5C,YAAI,WAAW,QAAQ,GAAG;AACxB,uBAAa,MAAM,MAAM;AAEvB,qBAAS;AAAA,UACX,CAAC;AAAA,QACH;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAQA,OAAO,OAAuB;AAC5B,UAAM,IAAI,MAAM,oCAAoC,sCAAsC;AAAA,EAC5F;AACF;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -32,19 +32,9 @@ var import_utils = require("@studiometa/js-toolkit/utils");
|
|
|
32
32
|
var import_SliderDrag = require("./SliderDrag.cjs");
|
|
33
33
|
var import_SliderItem = require("./SliderItem.cjs");
|
|
34
34
|
var Slider = class extends import_js_toolkit.Base {
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
__publicField(this, "__initialX", 0);
|
|
39
|
-
__publicField(this, "__currentIndex", 0);
|
|
40
|
-
__publicField(this, "states", []);
|
|
41
|
-
__publicField(this, "origins", {
|
|
42
|
-
left: 0,
|
|
43
|
-
center: 0,
|
|
44
|
-
right: 0
|
|
45
|
-
});
|
|
46
|
-
__publicField(this, "hasFocus", false);
|
|
47
|
-
}
|
|
35
|
+
__distanceX = 0;
|
|
36
|
+
__initialX = 0;
|
|
37
|
+
__currentIndex = 0;
|
|
48
38
|
get currentIndex() {
|
|
49
39
|
return this.__currentIndex;
|
|
50
40
|
}
|
|
@@ -54,6 +44,13 @@ var Slider = class extends import_js_toolkit.Base {
|
|
|
54
44
|
this.__currentIndex = value;
|
|
55
45
|
this.currentSliderItem.activate();
|
|
56
46
|
}
|
|
47
|
+
states = [];
|
|
48
|
+
origins = {
|
|
49
|
+
left: 0,
|
|
50
|
+
center: 0,
|
|
51
|
+
right: 0
|
|
52
|
+
};
|
|
53
|
+
hasFocus = false;
|
|
57
54
|
get currentState() {
|
|
58
55
|
return this.states[this.currentIndex];
|
|
59
56
|
}
|
|
@@ -128,10 +125,10 @@ var Slider = class extends import_js_toolkit.Base {
|
|
|
128
125
|
return states;
|
|
129
126
|
}
|
|
130
127
|
getOriginByMode(mode) {
|
|
131
|
-
return this.origins[mode
|
|
128
|
+
return this.origins[mode ?? this.$options.mode];
|
|
132
129
|
}
|
|
133
130
|
getStateValueByMode(state, mode) {
|
|
134
|
-
return state[mode
|
|
131
|
+
return state[mode ?? this.$options.mode];
|
|
135
132
|
}
|
|
136
133
|
mounted() {
|
|
137
134
|
this.states = this.getStates();
|
|
@@ -298,3 +295,4 @@ __publicField(Slider, "config", {
|
|
|
298
295
|
}
|
|
299
296
|
});
|
|
300
297
|
if (module.exports.default) module.exports = module.exports.default;
|
|
298
|
+
//# sourceMappingURL=Slider.cjs.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../packages/ui/molecules/Slider/Slider.ts"],
|
|
4
|
+
"sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig, DragServiceProps, KeyServiceProps } 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 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 /**\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.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 * 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\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 (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 0,\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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",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
3
|
-
var __publicField = (obj, key, value) => {
|
|
4
|
-
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
5
|
-
return value;
|
|
6
|
-
};
|
|
7
1
|
import { Base } from "@studiometa/js-toolkit";
|
|
8
2
|
import { clamp, inertiaFinalValue, nextFrame, isDev } from "@studiometa/js-toolkit/utils";
|
|
9
3
|
import { SliderDrag } from "./SliderDrag.js";
|
|
10
4
|
import { SliderItem } from "./SliderItem.js";
|
|
11
5
|
class Slider extends Base {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
6
|
+
static config = {
|
|
7
|
+
name: "Slider",
|
|
8
|
+
refs: ["wrapper", "debug"],
|
|
9
|
+
emits: ["goto", "index"],
|
|
10
|
+
components: {
|
|
11
|
+
SliderItem,
|
|
12
|
+
SliderDrag
|
|
13
|
+
},
|
|
14
|
+
options: {
|
|
15
|
+
mode: { type: String, default: "left" },
|
|
16
|
+
fitBounds: Boolean,
|
|
17
|
+
contain: Boolean,
|
|
18
|
+
sensitivity: { type: Number, default: 1 },
|
|
19
|
+
dropSensitivity: { type: Number, default: 2 }
|
|
20
|
+
}
|
|
21
|
+
};
|
|
22
|
+
__distanceX = 0;
|
|
23
|
+
__initialX = 0;
|
|
24
|
+
__currentIndex = 0;
|
|
25
25
|
get currentIndex() {
|
|
26
26
|
return this.__currentIndex;
|
|
27
27
|
}
|
|
@@ -31,6 +31,13 @@ class Slider extends Base {
|
|
|
31
31
|
this.__currentIndex = value;
|
|
32
32
|
this.currentSliderItem.activate();
|
|
33
33
|
}
|
|
34
|
+
states = [];
|
|
35
|
+
origins = {
|
|
36
|
+
left: 0,
|
|
37
|
+
center: 0,
|
|
38
|
+
right: 0
|
|
39
|
+
};
|
|
40
|
+
hasFocus = false;
|
|
34
41
|
get currentState() {
|
|
35
42
|
return this.states[this.currentIndex];
|
|
36
43
|
}
|
|
@@ -105,10 +112,10 @@ class Slider extends Base {
|
|
|
105
112
|
return states;
|
|
106
113
|
}
|
|
107
114
|
getOriginByMode(mode) {
|
|
108
|
-
return this.origins[mode
|
|
115
|
+
return this.origins[mode ?? this.$options.mode];
|
|
109
116
|
}
|
|
110
117
|
getStateValueByMode(state, mode) {
|
|
111
|
-
return state[mode
|
|
118
|
+
return state[mode ?? this.$options.mode];
|
|
112
119
|
}
|
|
113
120
|
mounted() {
|
|
114
121
|
this.states = this.getStates();
|
|
@@ -258,22 +265,7 @@ class Slider extends Base {
|
|
|
258
265
|
);
|
|
259
266
|
}
|
|
260
267
|
}
|
|
261
|
-
__publicField(Slider, "config", {
|
|
262
|
-
name: "Slider",
|
|
263
|
-
refs: ["wrapper", "debug"],
|
|
264
|
-
emits: ["goto", "index"],
|
|
265
|
-
components: {
|
|
266
|
-
SliderItem,
|
|
267
|
-
SliderDrag
|
|
268
|
-
},
|
|
269
|
-
options: {
|
|
270
|
-
mode: { type: String, default: "left" },
|
|
271
|
-
fitBounds: Boolean,
|
|
272
|
-
contain: Boolean,
|
|
273
|
-
sensitivity: { type: Number, default: 1 },
|
|
274
|
-
dropSensitivity: { type: Number, default: 2 }
|
|
275
|
-
}
|
|
276
|
-
});
|
|
277
268
|
export {
|
|
278
269
|
Slider
|
|
279
270
|
};
|
|
271
|
+
//# sourceMappingURL=Slider.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../packages/ui/molecules/Slider/Slider.ts"],
|
|
4
|
+
"sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig, DragServiceProps, KeyServiceProps } 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 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 /**\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.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 * 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\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 (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 0,\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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",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../packages/ui/molecules/Slider/SliderBtn.ts"],
|
|
4
|
+
"sourcesContent": ["import 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 };\n}\n\n/**\n * SliderBtn class.\n */\nexport class SliderBtn<T extends BaseProps = BaseProps> extends AbstractSliderChild<T & SliderBtnProps> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'SliderBtn',\n options: {\n prev: Boolean,\n next: Boolean,\n },\n };\n\n /**\n * Update attributes.\n * @param {number} index\n * @returns {void}\n */\n update(index: number) {\n if (\n (index === 0 && this.$options.prev) ||\n (index === this.$parent.indexMax && 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;AAAA;AAAA;AAAA;AAAA;AACA,iCAAoC;AAY7B,IAAM,YAAN,cAAyD,+CAAwC;AAAA,EAiBtG,OAAO,OAAe;AACpB,QACG,UAAU,KAAK,KAAK,SAAS,QAC7B,UAAU,KAAK,QAAQ,YAAY,KAAK,SAAS,MAClD;AACA,WAAK,IAAI,aAAa,YAAY,EAAE;AAAA,IACtC,OAAO;AACL,WAAK,IAAI,gBAAgB,UAAU;AAAA,IACrC;AAAA,EACF;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;AArCE,cAJW,WAIJ,UAAqB;AAAA,EAC1B,MAAM;AAAA,EACN,SAAS;AAAA,IACP,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AACF;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
3
|
-
var __publicField = (obj, key, value) => {
|
|
4
|
-
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
5
|
-
return value;
|
|
6
|
-
};
|
|
7
1
|
import { AbstractSliderChild } from "./AbstractSliderChild.js";
|
|
8
2
|
class SliderBtn extends AbstractSliderChild {
|
|
3
|
+
static config = {
|
|
4
|
+
name: "SliderBtn",
|
|
5
|
+
options: {
|
|
6
|
+
prev: Boolean,
|
|
7
|
+
next: Boolean
|
|
8
|
+
}
|
|
9
|
+
};
|
|
9
10
|
update(index) {
|
|
10
11
|
if (index === 0 && this.$options.prev || index === this.$parent.indexMax && this.$options.next) {
|
|
11
12
|
this.$el.setAttribute("disabled", "");
|
|
@@ -22,13 +23,7 @@ class SliderBtn extends AbstractSliderChild {
|
|
|
22
23
|
}
|
|
23
24
|
}
|
|
24
25
|
}
|
|
25
|
-
__publicField(SliderBtn, "config", {
|
|
26
|
-
name: "SliderBtn",
|
|
27
|
-
options: {
|
|
28
|
-
prev: Boolean,
|
|
29
|
-
next: Boolean
|
|
30
|
-
}
|
|
31
|
-
});
|
|
32
26
|
export {
|
|
33
27
|
SliderBtn
|
|
34
28
|
};
|
|
29
|
+
//# sourceMappingURL=SliderBtn.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../packages/ui/molecules/Slider/SliderBtn.ts"],
|
|
4
|
+
"sourcesContent": ["import 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 };\n}\n\n/**\n * SliderBtn class.\n */\nexport class SliderBtn<T extends BaseProps = BaseProps> extends AbstractSliderChild<T & SliderBtnProps> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'SliderBtn',\n options: {\n prev: Boolean,\n next: Boolean,\n },\n };\n\n /**\n * Update attributes.\n * @param {number} index\n * @returns {void}\n */\n update(index: number) {\n if (\n (index === 0 && this.$options.prev) ||\n (index === this.$parent.indexMax && 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": "AACA,SAAS,2BAA2B;AAY7B,MAAM,kBAAmD,oBAAwC;AAAA,EAItG,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,SAAS;AAAA,MACP,MAAM;AAAA,MACN,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EAOA,OAAO,OAAe;AACpB,QACG,UAAU,KAAK,KAAK,SAAS,QAC7B,UAAU,KAAK,QAAQ,YAAY,KAAK,SAAS,MAClD;AACA,WAAK,IAAI,aAAa,YAAY,EAAE;AAAA,IACtC,OAAO;AACL,WAAK,IAAI,gBAAgB,UAAU;AAAA,IACrC;AAAA,EACF;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
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../packages/ui/molecules/Slider/SliderCount.ts"],
|
|
4
|
+
"sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { AbstractSliderChild } from './AbstractSliderChild.js';\n\nexport interface SliderCountProps extends BaseProps {\n $refs: {\n current: HTMLElement;\n }\n}\n\n/**\n * SliderCount class.\n */\nexport class SliderCount<T extends BaseProps = BaseProps> extends AbstractSliderChild<T & SliderCountProps> {\n /**\n * Config.\n */\n static config:BaseConfig = {\n name: 'SliderCount',\n refs: ['current'],\n };\n\n /**\n * Update the current counter indicator.\n *\n * @param {number} index The new active index.\n * @returns {void}\n */\n update(index:number) {\n this.$refs.current.innerHTML = `${index + 1}`;\n }\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,iCAAoC;AAW7B,IAAM,cAAN,cAA2D,+CAA0C;AAAA,EAe1G,OAAO,OAAc;AACnB,SAAK,MAAM,QAAQ,YAAY,GAAG,QAAQ;AAAA,EAC5C;AACF;AAdE,cAJW,aAIJ,UAAoB;AAAA,EACzB,MAAM;AAAA,EACN,MAAM,CAAC,SAAS;AAClB;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,19 +1,14 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
3
|
-
var __publicField = (obj, key, value) => {
|
|
4
|
-
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
5
|
-
return value;
|
|
6
|
-
};
|
|
7
1
|
import { AbstractSliderChild } from "./AbstractSliderChild.js";
|
|
8
2
|
class SliderCount extends AbstractSliderChild {
|
|
3
|
+
static config = {
|
|
4
|
+
name: "SliderCount",
|
|
5
|
+
refs: ["current"]
|
|
6
|
+
};
|
|
9
7
|
update(index) {
|
|
10
8
|
this.$refs.current.innerHTML = `${index + 1}`;
|
|
11
9
|
}
|
|
12
10
|
}
|
|
13
|
-
__publicField(SliderCount, "config", {
|
|
14
|
-
name: "SliderCount",
|
|
15
|
-
refs: ["current"]
|
|
16
|
-
});
|
|
17
11
|
export {
|
|
18
12
|
SliderCount
|
|
19
13
|
};
|
|
14
|
+
//# sourceMappingURL=SliderCount.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../packages/ui/molecules/Slider/SliderCount.ts"],
|
|
4
|
+
"sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { AbstractSliderChild } from './AbstractSliderChild.js';\n\nexport interface SliderCountProps extends BaseProps {\n $refs: {\n current: HTMLElement;\n }\n}\n\n/**\n * SliderCount class.\n */\nexport class SliderCount<T extends BaseProps = BaseProps> extends AbstractSliderChild<T & SliderCountProps> {\n /**\n * Config.\n */\n static config:BaseConfig = {\n name: 'SliderCount',\n refs: ['current'],\n };\n\n /**\n * Update the current counter indicator.\n *\n * @param {number} index The new active index.\n * @returns {void}\n */\n update(index:number) {\n this.$refs.current.innerHTML = `${index + 1}`;\n }\n}\n"],
|
|
5
|
+
"mappings": "AACA,SAAS,2BAA2B;AAW7B,MAAM,oBAAqD,oBAA0C;AAAA,EAI1G,OAAO,SAAoB;AAAA,IACzB,MAAM;AAAA,IACN,MAAM,CAAC,SAAS;AAAA,EAClB;AAAA,EAQA,OAAO,OAAc;AACnB,SAAK,MAAM,QAAQ,YAAY,GAAG,QAAQ;AAAA,EAC5C;AACF;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -30,13 +30,10 @@ module.exports = __toCommonJS(SliderDots_exports);
|
|
|
30
30
|
var import_decorators = require("../../decorators/index.cjs");
|
|
31
31
|
var import_AbstractSliderChild = require("./AbstractSliderChild.cjs");
|
|
32
32
|
var SliderDots = class extends (0, import_decorators.withTransition)(import_AbstractSliderChild.AbstractSliderChild) {
|
|
33
|
-
constructor() {
|
|
34
|
-
super(...arguments);
|
|
35
|
-
__publicField(this, "currentIndex", 0);
|
|
36
|
-
}
|
|
37
33
|
get target() {
|
|
38
34
|
return this.$refs.dots;
|
|
39
35
|
}
|
|
36
|
+
currentIndex = 0;
|
|
40
37
|
update(index) {
|
|
41
38
|
this.leave(this.$refs.dots[this.currentIndex]);
|
|
42
39
|
this.enter(this.$refs.dots[index]);
|
|
@@ -51,3 +48,4 @@ __publicField(SliderDots, "config", {
|
|
|
51
48
|
refs: ["dots[]"]
|
|
52
49
|
});
|
|
53
50
|
if (module.exports.default) module.exports = module.exports.default;
|
|
51
|
+
//# sourceMappingURL=SliderDots.cjs.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../packages/ui/molecules/Slider/SliderDots.ts"],
|
|
4
|
+
"sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { withTransition } from '../../decorators/index.js';\nimport { AbstractSliderChild } from './AbstractSliderChild.js';\n\nexport interface SliderDotsProps extends BaseProps {\n $refs: {\n dots: HTMLButtonElement[];\n };\n}\n\n/**\n * SliderDots class.\n */\nexport class SliderDots<\n T extends BaseProps = BaseProps,\n> extends withTransition<AbstractSliderChild>(AbstractSliderChild)<T & SliderDotsProps> {\n /**\n * Config.\n */\n static config:BaseConfig = {\n name: 'SliderDots',\n refs: ['dots[]'],\n };\n\n /**\n * Get target.\n * @returns {HTMLButtonElement[]}\n */\n get target() {\n return this.$refs.dots;\n }\n\n /**\n * The current active index.\n */\n currentIndex = 0;\n\n /**\n * Update dots classes according to the new index.\n *\n * @param {number} index\n * @returns {void}\n */\n update(index:number) {\n this.leave(this.$refs.dots[this.currentIndex]);\n this.enter(this.$refs.dots[index]);\n this.currentIndex = index;\n }\n\n /**\n * Go to the given index on dot click.\n */\n onDotsClick(event:MouseEvent, index:number) {\n this.$parent.goTo(index);\n }\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,wBAA+B;AAC/B,iCAAoC;AAW7B,IAAM,aAAN,kBAEG,kCAAoC,8CAAmB,EAAuB;AAAA,EAatF,IAAI,SAAS;AACX,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA,EAKA,eAAe;AAAA,EAQf,OAAO,OAAc;AACnB,SAAK,MAAM,KAAK,MAAM,KAAK,KAAK,aAAa;AAC7C,SAAK,MAAM,KAAK,MAAM,KAAK,MAAM;AACjC,SAAK,eAAe;AAAA,EACtB;AAAA,EAKA,YAAY,OAAkB,OAAc;AAC1C,SAAK,QAAQ,KAAK,KAAK;AAAA,EACzB;AACF;AApCE,cANW,YAMJ,UAAoB;AAAA,EACzB,MAAM;AAAA,EACN,MAAM,CAAC,QAAQ;AACjB;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,19 +1,14 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
3
|
-
var __publicField = (obj, key, value) => {
|
|
4
|
-
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
5
|
-
return value;
|
|
6
|
-
};
|
|
7
1
|
import { withTransition } from "../../decorators/index.js";
|
|
8
2
|
import { AbstractSliderChild } from "./AbstractSliderChild.js";
|
|
9
3
|
class SliderDots extends withTransition(AbstractSliderChild) {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
}
|
|
4
|
+
static config = {
|
|
5
|
+
name: "SliderDots",
|
|
6
|
+
refs: ["dots[]"]
|
|
7
|
+
};
|
|
14
8
|
get target() {
|
|
15
9
|
return this.$refs.dots;
|
|
16
10
|
}
|
|
11
|
+
currentIndex = 0;
|
|
17
12
|
update(index) {
|
|
18
13
|
this.leave(this.$refs.dots[this.currentIndex]);
|
|
19
14
|
this.enter(this.$refs.dots[index]);
|
|
@@ -23,10 +18,7 @@ class SliderDots extends withTransition(AbstractSliderChild) {
|
|
|
23
18
|
this.$parent.goTo(index);
|
|
24
19
|
}
|
|
25
20
|
}
|
|
26
|
-
__publicField(SliderDots, "config", {
|
|
27
|
-
name: "SliderDots",
|
|
28
|
-
refs: ["dots[]"]
|
|
29
|
-
});
|
|
30
21
|
export {
|
|
31
22
|
SliderDots
|
|
32
23
|
};
|
|
24
|
+
//# sourceMappingURL=SliderDots.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../packages/ui/molecules/Slider/SliderDots.ts"],
|
|
4
|
+
"sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { withTransition } from '../../decorators/index.js';\nimport { AbstractSliderChild } from './AbstractSliderChild.js';\n\nexport interface SliderDotsProps extends BaseProps {\n $refs: {\n dots: HTMLButtonElement[];\n };\n}\n\n/**\n * SliderDots class.\n */\nexport class SliderDots<\n T extends BaseProps = BaseProps,\n> extends withTransition<AbstractSliderChild>(AbstractSliderChild)<T & SliderDotsProps> {\n /**\n * Config.\n */\n static config:BaseConfig = {\n name: 'SliderDots',\n refs: ['dots[]'],\n };\n\n /**\n * Get target.\n * @returns {HTMLButtonElement[]}\n */\n get target() {\n return this.$refs.dots;\n }\n\n /**\n * The current active index.\n */\n currentIndex = 0;\n\n /**\n * Update dots classes according to the new index.\n *\n * @param {number} index\n * @returns {void}\n */\n update(index:number) {\n this.leave(this.$refs.dots[this.currentIndex]);\n this.enter(this.$refs.dots[index]);\n this.currentIndex = index;\n }\n\n /**\n * Go to the given index on dot click.\n */\n onDotsClick(event:MouseEvent, index:number) {\n this.$parent.goTo(index);\n }\n}\n"],
|
|
5
|
+
"mappings": "AACA,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AAW7B,MAAM,mBAEH,eAAoC,mBAAmB,EAAuB;AAAA,EAItF,OAAO,SAAoB;AAAA,IACzB,MAAM;AAAA,IACN,MAAM,CAAC,QAAQ;AAAA,EACjB;AAAA,EAMA,IAAI,SAAS;AACX,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA,EAKA,eAAe;AAAA,EAQf,OAAO,OAAc;AACnB,SAAK,MAAM,KAAK,MAAM,KAAK,KAAK,aAAa;AAC7C,SAAK,MAAM,KAAK,MAAM,KAAK,MAAM;AACjC,SAAK,eAAe;AAAA,EACtB;AAAA,EAKA,YAAY,OAAkB,OAAc;AAC1C,SAAK,QAAQ,KAAK,KAAK;AAAA,EACzB;AACF;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../packages/ui/molecules/Slider/SliderDrag.ts"],
|
|
4
|
+
"sourcesContent": ["import type { BaseProps, BaseConfig, DragServiceProps } from '@studiometa/js-toolkit';\nimport { Base, withDrag } from '@studiometa/js-toolkit';\n\nexport interface SliderDragProps extends BaseProps {\n $options: {\n scrollLockThreshold: number;\n };\n}\n\n/**\n * SliderDrag class.\n */\nexport class SliderDrag<T extends BaseProps = BaseProps> extends withDrag(Base)<\n T & SliderDragProps\n> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'SliderDrag',\n emits: ['start', 'drag', 'drop', 'inertia', 'stop'],\n options: {\n scrollLockThreshold: {\n type: Number,\n default: 10,\n },\n },\n };\n\n /**\n * Test if the scroll should be blocked. Used with the touchmove event to prevent\n * scrolling vertically when trying to drag the slider.\n */\n get shouldPreventScroll() {\n const { distance } = this.$services.get('dragged') as DragServiceProps;\n return (\n Math.abs(distance.x) > this.$options.scrollLockThreshold &&\n Math.abs(distance.x) > Math.abs(distance.y)\n );\n }\n\n /**\n * Touchmove handler.\n * @param {TouchEvent} event\n * @returns {void}\n */\n onTouchmove(event:TouchEvent) {\n if (this.shouldPreventScroll) {\n event.preventDefault();\n }\n }\n\n /**\n * Emit drag events.\n */\n dragged(props:DragServiceProps) {\n this.$emit(props.mode, props);\n }\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,wBAA+B;AAWxB,IAAM,aAAN,kBAA0D,4BAAS,sBAAI,EAE5E;AAAA,EAmBA,IAAI,sBAAsB;AACxB,UAAM,EAAE,SAAS,IAAI,KAAK,UAAU,IAAI,SAAS;AACjD,WACE,KAAK,IAAI,SAAS,CAAC,IAAI,KAAK,SAAS,uBACrC,KAAK,IAAI,SAAS,CAAC,IAAI,KAAK,IAAI,SAAS,CAAC;AAAA,EAE9C;AAAA,EAOA,YAAY,OAAkB;AAC5B,QAAI,KAAK,qBAAqB;AAC5B,YAAM,eAAe;AAAA,IACvB;AAAA,EACF;AAAA,EAKA,QAAQ,OAAwB;AAC9B,SAAK,MAAM,MAAM,MAAM,KAAK;AAAA,EAC9B;AACF;AAxCE,cANW,YAMJ,UAAqB;AAAA,EAC1B,MAAM;AAAA,EACN,OAAO,CAAC,SAAS,QAAQ,QAAQ,WAAW,MAAM;AAAA,EAClD,SAAS;AAAA,IACP,qBAAqB;AAAA,MACnB,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AACF;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,11 +1,15 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
3
|
-
var __publicField = (obj, key, value) => {
|
|
4
|
-
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
5
|
-
return value;
|
|
6
|
-
};
|
|
7
1
|
import { Base, withDrag } from "@studiometa/js-toolkit";
|
|
8
2
|
class SliderDrag extends withDrag(Base) {
|
|
3
|
+
static config = {
|
|
4
|
+
name: "SliderDrag",
|
|
5
|
+
emits: ["start", "drag", "drop", "inertia", "stop"],
|
|
6
|
+
options: {
|
|
7
|
+
scrollLockThreshold: {
|
|
8
|
+
type: Number,
|
|
9
|
+
default: 10
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
};
|
|
9
13
|
get shouldPreventScroll() {
|
|
10
14
|
const { distance } = this.$services.get("dragged");
|
|
11
15
|
return Math.abs(distance.x) > this.$options.scrollLockThreshold && Math.abs(distance.x) > Math.abs(distance.y);
|
|
@@ -19,16 +23,7 @@ class SliderDrag extends withDrag(Base) {
|
|
|
19
23
|
this.$emit(props.mode, props);
|
|
20
24
|
}
|
|
21
25
|
}
|
|
22
|
-
__publicField(SliderDrag, "config", {
|
|
23
|
-
name: "SliderDrag",
|
|
24
|
-
emits: ["start", "drag", "drop", "inertia", "stop"],
|
|
25
|
-
options: {
|
|
26
|
-
scrollLockThreshold: {
|
|
27
|
-
type: Number,
|
|
28
|
-
default: 10
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
});
|
|
32
26
|
export {
|
|
33
27
|
SliderDrag
|
|
34
28
|
};
|
|
29
|
+
//# sourceMappingURL=SliderDrag.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../packages/ui/molecules/Slider/SliderDrag.ts"],
|
|
4
|
+
"sourcesContent": ["import type { BaseProps, BaseConfig, DragServiceProps } from '@studiometa/js-toolkit';\nimport { Base, withDrag } from '@studiometa/js-toolkit';\n\nexport interface SliderDragProps extends BaseProps {\n $options: {\n scrollLockThreshold: number;\n };\n}\n\n/**\n * SliderDrag class.\n */\nexport class SliderDrag<T extends BaseProps = BaseProps> extends withDrag(Base)<\n T & SliderDragProps\n> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'SliderDrag',\n emits: ['start', 'drag', 'drop', 'inertia', 'stop'],\n options: {\n scrollLockThreshold: {\n type: Number,\n default: 10,\n },\n },\n };\n\n /**\n * Test if the scroll should be blocked. Used with the touchmove event to prevent\n * scrolling vertically when trying to drag the slider.\n */\n get shouldPreventScroll() {\n const { distance } = this.$services.get('dragged') as DragServiceProps;\n return (\n Math.abs(distance.x) > this.$options.scrollLockThreshold &&\n Math.abs(distance.x) > Math.abs(distance.y)\n );\n }\n\n /**\n * Touchmove handler.\n * @param {TouchEvent} event\n * @returns {void}\n */\n onTouchmove(event:TouchEvent) {\n if (this.shouldPreventScroll) {\n event.preventDefault();\n }\n }\n\n /**\n * Emit drag events.\n */\n dragged(props:DragServiceProps) {\n this.$emit(props.mode, props);\n }\n}\n"],
|
|
5
|
+
"mappings": "AACA,SAAS,MAAM,gBAAgB;AAWxB,MAAM,mBAAoD,SAAS,IAAI,EAE5E;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,OAAO,CAAC,SAAS,QAAQ,QAAQ,WAAW,MAAM;AAAA,IAClD,SAAS;AAAA,MACP,qBAAqB;AAAA,QACnB,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA,EAMA,IAAI,sBAAsB;AACxB,UAAM,EAAE,SAAS,IAAI,KAAK,UAAU,IAAI,SAAS;AACjD,WACE,KAAK,IAAI,SAAS,CAAC,IAAI,KAAK,SAAS,uBACrC,KAAK,IAAI,SAAS,CAAC,IAAI,KAAK,IAAI,SAAS,CAAC;AAAA,EAE9C;AAAA,EAOA,YAAY,OAAkB;AAC5B,QAAI,KAAK,qBAAqB;AAC5B,YAAM,eAAe;AAAA,IACvB;AAAA,EACF;AAAA,EAKA,QAAQ,OAAwB;AAC9B,SAAK,MAAM,MAAM,MAAM,KAAK;AAAA,EAC9B;AACF;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -32,13 +32,10 @@ var import_utils = require("@studiometa/js-toolkit/utils");
|
|
|
32
32
|
var SliderItem = class extends (0, import_js_toolkit.withIntersectionObserver)(import_js_toolkit.Base, {
|
|
33
33
|
threshold: [0, 1]
|
|
34
34
|
}) {
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
__publicField(this, "dampedX", 0);
|
|
40
|
-
__publicField(this, "rect");
|
|
41
|
-
}
|
|
35
|
+
isVisible = false;
|
|
36
|
+
x = 0;
|
|
37
|
+
dampedX = 0;
|
|
38
|
+
rect;
|
|
42
39
|
mounted() {
|
|
43
40
|
this.updateRectAdjustedWithX();
|
|
44
41
|
}
|
|
@@ -112,3 +109,4 @@ __publicField(SliderItem, "config", {
|
|
|
112
109
|
emits: ["is-fully-visible", "is-partially-visible", "is-hidden"]
|
|
113
110
|
});
|
|
114
111
|
if (module.exports.default) module.exports = module.exports.default;
|
|
112
|
+
//# sourceMappingURL=SliderItem.cjs.map
|