@studiometa/ui 1.0.0-alpha.9 → 1.0.0-beta.0
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/{molecules/Accordion → Accordion}/Accordion.js.map +1 -1
- package/{molecules/Accordion → Accordion}/AccordionCore.js.map +1 -1
- package/{molecules/Accordion → Accordion}/AccordionItem.js.map +1 -1
- package/{molecules/Accordion → Accordion}/index.js.map +1 -1
- package/{atoms/Action → Action}/Action.js.map +1 -1
- package/{atoms/Action → Action}/ActionEvent.js.map +1 -1
- package/{atoms/Action → Action}/Target.js.map +1 -1
- package/{atoms/Action → Action}/index.js.map +1 -1
- package/{molecules/AnchorNav → AnchorNav}/AnchorNav.js.map +1 -1
- package/{molecules/AnchorNav → AnchorNav}/AnchorNavLink.d.ts +2 -2
- package/{molecules/AnchorNav → AnchorNav}/AnchorNavLink.js +2 -2
- package/AnchorNav/AnchorNavLink.js.map +7 -0
- package/{molecules/AnchorNav → AnchorNav}/AnchorNavTarget.js.map +1 -1
- package/{molecules/AnchorNav → AnchorNav}/index.js.map +1 -1
- package/{atoms/AnchorScrollTo → AnchorScrollTo}/AnchorScrollTo.js.map +1 -1
- package/{atoms/AnchorScrollTo → AnchorScrollTo}/index.js.map +1 -1
- package/{atoms/Button → Button}/Button.twig +1 -1
- package/{atoms/Button → Button}/StyledButton.twig +1 -1
- package/{atoms/Button → Button}/StyledButtonRounded.twig +1 -1
- package/{atoms/CircularMarquee → CircularMarquee}/CircularMarquee.js.map +1 -1
- package/{atoms/CircularMarquee → CircularMarquee}/CircularMarquee.twig +1 -1
- package/{atoms/CircularMarquee → CircularMarquee}/index.js.map +1 -1
- package/{atoms/Cursor → Cursor}/Cursor.js.map +1 -1
- package/{atoms/Cursor → Cursor}/index.js.map +1 -1
- package/{atoms/Data → Data}/DataBind.js.map +1 -1
- package/{atoms/Data → Data}/DataComputed.js +0 -1
- package/Data/DataComputed.js.map +7 -0
- package/Data/DataEffect.js.map +7 -0
- package/{atoms/Data → Data}/DataModel.js.map +1 -1
- package/{atoms/Data → Data}/index.js.map +1 -1
- package/{atoms/Data → Data}/utils.js.map +1 -1
- package/{primitives/Draggable → Draggable}/Draggable.js.map +1 -1
- package/{primitives/Draggable → Draggable}/index.js.map +1 -1
- package/{atoms/Figure → Figure}/AbstractFigure.d.ts +1 -1
- package/{atoms/Figure → Figure}/AbstractFigure.js +1 -1
- package/Figure/AbstractFigure.js.map +7 -0
- package/Figure/AbstractFigureDynamic.js.map +7 -0
- package/Figure/Figure.js.map +7 -0
- package/{atoms/Figure → Figure}/FigureShopify.js.map +1 -1
- package/{atoms/Figure → Figure}/FigureTwicpics.js.map +1 -1
- package/{atoms/Figure → Figure}/FigureTwicpics.twig +1 -1
- package/{atoms/Figure → Figure}/index.js.map +1 -1
- package/{atoms/Figure → Figure}/utils.js.map +1 -1
- package/{atoms/FigureVideo → FigureVideo}/FigureVideo.d.ts +1 -1
- package/{atoms/FigureVideo → FigureVideo}/FigureVideo.js +1 -1
- package/FigureVideo/FigureVideo.js.map +7 -0
- package/{atoms/FigureVideo → FigureVideo}/FigureVideoTwicpics.js.map +1 -1
- package/{atoms/FigureVideo → FigureVideo}/FigureVideoTwicpics.twig +1 -1
- package/{atoms/FigureVideo → FigureVideo}/index.js.map +1 -1
- package/{organisms/Frame → Frame}/Frame.js +1 -1
- package/{organisms/Frame → Frame}/Frame.js.map +3 -3
- package/{organisms/Frame → Frame}/FrameAnchor.js.map +1 -1
- package/{organisms/Frame → Frame}/FrameForm.js.map +1 -1
- package/{organisms/Frame → Frame}/FrameTarget.d.ts +2 -2
- package/{organisms/Frame → Frame}/FrameTarget.js +1 -1
- package/Frame/FrameTarget.js.map +7 -0
- package/{organisms/Frame → Frame}/index.js.map +1 -1
- package/{organisms/Hero → Hero}/Hero.twig +2 -2
- package/{atoms/Icon/IconInline.twig → Icon/Icon.twig} +5 -1
- package/{atoms/Icon/IconInlineImg.twig → Icon/IconImg.twig} +5 -1
- package/{molecules/IconList → IconList}/IconList.twig +4 -4
- package/{organisms/ImageGrid → ImageGrid}/ImageGrid.twig +1 -1
- package/{atoms/LargeText → LargeText}/LargeText.js.map +1 -1
- package/{atoms/LargeText → LargeText}/index.js.map +1 -1
- package/{atoms/LazyInclude → LazyInclude}/LazyInclude.js.map +1 -1
- package/{atoms/LazyInclude → LazyInclude}/index.js.map +1 -1
- package/{molecules/MapboxStaticMap → MapboxStaticMap}/MapboxStaticMap.twig +1 -1
- package/{molecules/Menu → Menu}/Menu.js.map +1 -1
- package/{molecules/Menu → Menu}/MenuBtn.js.map +1 -1
- package/{molecules/Menu → Menu}/MenuList.d.ts +2 -2
- package/{molecules/Menu → Menu}/MenuList.js +1 -1
- package/Menu/MenuList.js.map +7 -0
- package/{molecules/Menu → Menu}/index.js.map +1 -1
- package/{molecules/Modal → Modal}/Modal.d.ts +1 -1
- package/{molecules/Modal → Modal}/Modal.js.map +1 -1
- package/{molecules/Modal → Modal}/Modal.twig +2 -2
- package/{molecules/Modal → Modal}/ModalWithTransition.js.map +1 -1
- package/{molecules/Modal → Modal}/StyledModal.twig +3 -3
- package/{molecules/Modal → Modal}/index.js.map +1 -1
- package/{molecules/Panel → Panel}/Panel.js.map +1 -1
- package/{molecules/Panel → Panel}/Panel.twig +1 -1
- package/{molecules/Panel → Panel}/StyledPanel.twig +3 -3
- package/{molecules/Panel → Panel}/index.js.map +1 -1
- package/{atoms/Prefetch → Prefetch}/AbstractPrefetch.js.map +1 -1
- package/{atoms/Prefetch → Prefetch}/PrefetchWhenOver.js.map +1 -1
- package/{atoms/Prefetch → Prefetch}/PrefetchWhenVisible.js.map +1 -1
- package/{atoms/Prefetch → Prefetch}/index.js.map +1 -1
- package/{molecules/Reinsurance → Reinsurance}/Reinsurance.twig +1 -1
- package/{atoms/ScrollAnimation → ScrollAnimation}/AbstractScrollAnimation.js.map +1 -1
- package/{atoms/ScrollAnimation → ScrollAnimation}/ScrollAnimation.js.map +1 -1
- package/{atoms/ScrollAnimation → ScrollAnimation}/ScrollAnimationChild.js.map +1 -1
- package/{atoms/ScrollAnimation → ScrollAnimation}/ScrollAnimationChildWithEase.d.ts +1 -1
- package/{atoms/ScrollAnimation → ScrollAnimation}/ScrollAnimationChildWithEase.js.map +1 -1
- package/{atoms/ScrollAnimation → ScrollAnimation}/ScrollAnimationParent.js.map +1 -1
- package/{atoms/ScrollAnimation → ScrollAnimation}/ScrollAnimationWithEase.d.ts +1 -1
- package/{atoms/ScrollAnimation → ScrollAnimation}/ScrollAnimationWithEase.js.map +1 -1
- package/{atoms/ScrollAnimation → ScrollAnimation}/animationScrollWithEase.js.map +1 -1
- package/{atoms/ScrollAnimation → ScrollAnimation}/index.js.map +1 -1
- package/{atoms/ScrollReveal → ScrollReveal}/ScrollReveal.d.ts +1 -1
- package/{atoms/ScrollReveal → ScrollReveal}/ScrollReveal.js +1 -1
- package/ScrollReveal/ScrollReveal.js.map +7 -0
- package/{atoms/ScrollReveal → ScrollReveal}/index.js.map +1 -1
- package/{primitives/Sentinel → Sentinel}/Sentinel.js.map +1 -1
- package/{primitives/Sentinel → Sentinel}/index.js.map +1 -1
- package/{molecules/Slider → Slider}/AbstractSliderChild.js.map +1 -1
- package/{molecules/Slider → Slider}/Slider.js.map +1 -1
- package/{molecules/Slider → Slider}/SliderBtn.js.map +1 -1
- package/{molecules/Slider → Slider}/SliderCount.js.map +1 -1
- package/{molecules/Slider → Slider}/SliderDots.d.ts +2 -3
- package/{molecules/Slider → Slider}/SliderDots.js +2 -2
- package/Slider/SliderDots.js.map +7 -0
- package/{molecules/Slider → Slider}/SliderDrag.js.map +1 -1
- package/{molecules/Slider → Slider}/SliderItem.js.map +1 -1
- package/{molecules/Slider → Slider}/SliderProgress.js.map +1 -1
- package/{molecules/Slider → Slider}/index.js.map +1 -1
- package/{molecules/Sticky → Sticky}/Sticky.d.ts +1 -1
- package/{molecules/Sticky → Sticky}/Sticky.js +1 -1
- package/Sticky/Sticky.js.map +7 -0
- package/{molecules/Sticky → Sticky}/index.js.map +1 -1
- package/{molecules/TableOfContent → TableOfContent}/TableOfContent.d.ts +1 -1
- package/{molecules/TableOfContent → TableOfContent}/TableOfContent.js +1 -1
- package/TableOfContent/TableOfContent.js.map +7 -0
- package/{molecules/TableOfContent → TableOfContent}/TableOfContentAnchor.d.ts +2 -2
- package/{molecules/TableOfContent → TableOfContent}/TableOfContentAnchor.js +2 -2
- package/TableOfContent/TableOfContentAnchor.js.map +7 -0
- package/{molecules/TableOfContent → TableOfContent}/index.js.map +1 -1
- package/{molecules/Tabs → Tabs}/Tabs.d.ts +1 -2
- package/{molecules/Tabs → Tabs}/Tabs.js +1 -1
- package/Tabs/Tabs.js.map +7 -0
- package/{molecules/Tabs → Tabs}/index.js.map +1 -1
- package/{primitives/Transition → Transition}/Transition.d.ts +1 -1
- package/{primitives/Transition → Transition}/Transition.js +1 -1
- package/Transition/Transition.js.map +7 -0
- package/{primitives/Transition → Transition}/index.js.map +1 -1
- package/index.d.ts +25 -4
- package/index.js +25 -4
- package/index.js.map +2 -2
- package/package.json +2 -2
- package/atoms/Data/DataComputed.js.map +0 -7
- package/atoms/Data/DataEffect.js.map +0 -7
- package/atoms/Figure/AbstractFigure.js.map +0 -7
- package/atoms/Figure/AbstractFigureDynamic.js.map +0 -7
- package/atoms/Figure/Figure.js.map +0 -7
- package/atoms/FigureVideo/FigureVideo.js.map +0 -7
- package/atoms/Icon/Icon.twig +0 -12
- package/atoms/ScrollReveal/ScrollReveal.js.map +0 -7
- package/atoms/index.d.ts +0 -12
- package/atoms/index.js +0 -13
- package/atoms/index.js.map +0 -7
- package/molecules/AnchorNav/AnchorNavLink.js.map +0 -7
- package/molecules/Menu/MenuList.js.map +0 -7
- package/molecules/Slider/SliderDots.js.map +0 -7
- package/molecules/Sticky/Sticky.js.map +0 -7
- package/molecules/TableOfContent/TableOfContent.js.map +0 -7
- package/molecules/TableOfContent/TableOfContentAnchor.js.map +0 -7
- package/molecules/Tabs/Tabs.js.map +0 -7
- package/molecules/index.d.ts +0 -9
- package/molecules/index.js +0 -10
- package/molecules/index.js.map +0 -7
- package/organisms/Frame/FrameTarget.js.map +0 -7
- package/organisms/index.d.ts +0 -1
- package/organisms/index.js +0 -2
- package/organisms/index.js.map +0 -7
- package/primitives/Transition/Transition.js.map +0 -7
- package/primitives/index.d.ts +0 -3
- package/primitives/index.js +0 -4
- package/primitives/index.js.map +0 -7
- /package/{molecules/Accordion → Accordion}/Accordion.d.ts +0 -0
- /package/{molecules/Accordion → Accordion}/Accordion.js +0 -0
- /package/{molecules/Accordion → Accordion}/Accordion.twig +0 -0
- /package/{molecules/Accordion → Accordion}/AccordionCore.d.ts +0 -0
- /package/{molecules/Accordion → Accordion}/AccordionCore.js +0 -0
- /package/{molecules/Accordion → Accordion}/AccordionItem.d.ts +0 -0
- /package/{molecules/Accordion → Accordion}/AccordionItem.js +0 -0
- /package/{molecules/Accordion → Accordion}/index.d.ts +0 -0
- /package/{molecules/Accordion → Accordion}/index.js +0 -0
- /package/{atoms/Action → Action}/Action.d.ts +0 -0
- /package/{atoms/Action → Action}/Action.js +0 -0
- /package/{atoms/Action → Action}/ActionEvent.d.ts +0 -0
- /package/{atoms/Action → Action}/ActionEvent.js +0 -0
- /package/{atoms/Action → Action}/Target.d.ts +0 -0
- /package/{atoms/Action → Action}/Target.js +0 -0
- /package/{atoms/Action → Action}/index.d.ts +0 -0
- /package/{atoms/Action → Action}/index.js +0 -0
- /package/{molecules/AnchorNav → AnchorNav}/AnchorNav.d.ts +0 -0
- /package/{molecules/AnchorNav → AnchorNav}/AnchorNav.js +0 -0
- /package/{molecules/AnchorNav → AnchorNav}/AnchorNavTarget.d.ts +0 -0
- /package/{molecules/AnchorNav → AnchorNav}/AnchorNavTarget.js +0 -0
- /package/{molecules/AnchorNav → AnchorNav}/index.d.ts +0 -0
- /package/{molecules/AnchorNav → AnchorNav}/index.js +0 -0
- /package/{atoms/AnchorScrollTo → AnchorScrollTo}/AnchorScrollTo.d.ts +0 -0
- /package/{atoms/AnchorScrollTo → AnchorScrollTo}/AnchorScrollTo.js +0 -0
- /package/{atoms/AnchorScrollTo → AnchorScrollTo}/index.d.ts +0 -0
- /package/{atoms/AnchorScrollTo → AnchorScrollTo}/index.js +0 -0
- /package/{atoms/CircularMarquee → CircularMarquee}/CircularMarquee.d.ts +0 -0
- /package/{atoms/CircularMarquee → CircularMarquee}/CircularMarquee.js +0 -0
- /package/{atoms/CircularMarquee → CircularMarquee}/index.d.ts +0 -0
- /package/{atoms/CircularMarquee → CircularMarquee}/index.js +0 -0
- /package/{atoms/Cursor → Cursor}/Cursor.d.ts +0 -0
- /package/{atoms/Cursor → Cursor}/Cursor.js +0 -0
- /package/{atoms/Cursor → Cursor}/Cursor.twig +0 -0
- /package/{atoms/Cursor → Cursor}/index.d.ts +0 -0
- /package/{atoms/Cursor → Cursor}/index.js +0 -0
- /package/{atoms/Data → Data}/DataBind.d.ts +0 -0
- /package/{atoms/Data → Data}/DataBind.js +0 -0
- /package/{atoms/Data → Data}/DataComputed.d.ts +0 -0
- /package/{atoms/Data → Data}/DataEffect.d.ts +0 -0
- /package/{atoms/Data → Data}/DataEffect.js +0 -0
- /package/{atoms/Data → Data}/DataModel.d.ts +0 -0
- /package/{atoms/Data → Data}/DataModel.js +0 -0
- /package/{atoms/Data → Data}/index.d.ts +0 -0
- /package/{atoms/Data → Data}/index.js +0 -0
- /package/{atoms/Data → Data}/utils.d.ts +0 -0
- /package/{atoms/Data → Data}/utils.js +0 -0
- /package/{primitives/Draggable → Draggable}/Draggable.d.ts +0 -0
- /package/{primitives/Draggable → Draggable}/Draggable.js +0 -0
- /package/{primitives/Draggable → Draggable}/index.d.ts +0 -0
- /package/{primitives/Draggable → Draggable}/index.js +0 -0
- /package/{atoms/Figure → Figure}/AbstractFigureDynamic.d.ts +0 -0
- /package/{atoms/Figure → Figure}/AbstractFigureDynamic.js +0 -0
- /package/{atoms/Figure → Figure}/Figure.d.ts +0 -0
- /package/{atoms/Figure → Figure}/Figure.js +0 -0
- /package/{atoms/Figure → Figure}/Figure.twig +0 -0
- /package/{atoms/Figure → Figure}/FigureShopify.d.ts +0 -0
- /package/{atoms/Figure → Figure}/FigureShopify.js +0 -0
- /package/{atoms/Figure → Figure}/FigureTwicpics.d.ts +0 -0
- /package/{atoms/Figure → Figure}/FigureTwicpics.js +0 -0
- /package/{atoms/Figure → Figure}/index.d.ts +0 -0
- /package/{atoms/Figure → Figure}/index.js +0 -0
- /package/{atoms/Figure → Figure}/utils.d.ts +0 -0
- /package/{atoms/Figure → Figure}/utils.js +0 -0
- /package/{atoms/FigureVideo → FigureVideo}/FigureVideo.twig +0 -0
- /package/{atoms/FigureVideo → FigureVideo}/FigureVideoTwicpics.d.ts +0 -0
- /package/{atoms/FigureVideo → FigureVideo}/FigureVideoTwicpics.js +0 -0
- /package/{atoms/FigureVideo → FigureVideo}/index.d.ts +0 -0
- /package/{atoms/FigureVideo → FigureVideo}/index.js +0 -0
- /package/{organisms/Frame → Frame}/Frame.d.ts +0 -0
- /package/{organisms/Frame → Frame}/FrameAnchor.d.ts +0 -0
- /package/{organisms/Frame → Frame}/FrameAnchor.js +0 -0
- /package/{organisms/Frame → Frame}/FrameForm.d.ts +0 -0
- /package/{organisms/Frame → Frame}/FrameForm.js +0 -0
- /package/{organisms/Frame → Frame}/index.d.ts +0 -0
- /package/{organisms/Frame → Frame}/index.js +0 -0
- /package/{atoms/LargeText → LargeText}/LargeText.d.ts +0 -0
- /package/{atoms/LargeText → LargeText}/LargeText.js +0 -0
- /package/{atoms/LargeText → LargeText}/LargeText.twig +0 -0
- /package/{atoms/LargeText → LargeText}/index.d.ts +0 -0
- /package/{atoms/LargeText → LargeText}/index.js +0 -0
- /package/{atoms/LazyInclude → LazyInclude}/LazyInclude.d.ts +0 -0
- /package/{atoms/LazyInclude → LazyInclude}/LazyInclude.js +0 -0
- /package/{atoms/LazyInclude → LazyInclude}/index.d.ts +0 -0
- /package/{atoms/LazyInclude → LazyInclude}/index.js +0 -0
- /package/{molecules/Menu → Menu}/Menu.d.ts +0 -0
- /package/{molecules/Menu → Menu}/Menu.js +0 -0
- /package/{molecules/Menu → Menu}/MenuBtn.d.ts +0 -0
- /package/{molecules/Menu → Menu}/MenuBtn.js +0 -0
- /package/{molecules/Menu → Menu}/index.d.ts +0 -0
- /package/{molecules/Menu → Menu}/index.js +0 -0
- /package/{molecules/Modal → Modal}/Modal.js +0 -0
- /package/{molecules/Modal → Modal}/ModalWithTransition.d.ts +0 -0
- /package/{molecules/Modal → Modal}/ModalWithTransition.js +0 -0
- /package/{molecules/Modal → Modal}/index.d.ts +0 -0
- /package/{molecules/Modal → Modal}/index.js +0 -0
- /package/{molecules/Panel → Panel}/Panel.d.ts +0 -0
- /package/{molecules/Panel → Panel}/Panel.js +0 -0
- /package/{molecules/Panel → Panel}/index.d.ts +0 -0
- /package/{molecules/Panel → Panel}/index.js +0 -0
- /package/{atoms/Prefetch → Prefetch}/AbstractPrefetch.d.ts +0 -0
- /package/{atoms/Prefetch → Prefetch}/AbstractPrefetch.js +0 -0
- /package/{atoms/Prefetch → Prefetch}/PrefetchWhenOver.d.ts +0 -0
- /package/{atoms/Prefetch → Prefetch}/PrefetchWhenOver.js +0 -0
- /package/{atoms/Prefetch → Prefetch}/PrefetchWhenVisible.d.ts +0 -0
- /package/{atoms/Prefetch → Prefetch}/PrefetchWhenVisible.js +0 -0
- /package/{atoms/Prefetch → Prefetch}/index.d.ts +0 -0
- /package/{atoms/Prefetch → Prefetch}/index.js +0 -0
- /package/{atoms/ScrollAnimation → ScrollAnimation}/AbstractScrollAnimation.d.ts +0 -0
- /package/{atoms/ScrollAnimation → ScrollAnimation}/AbstractScrollAnimation.js +0 -0
- /package/{atoms/ScrollAnimation → ScrollAnimation}/ScrollAnimation.d.ts +0 -0
- /package/{atoms/ScrollAnimation → ScrollAnimation}/ScrollAnimation.js +0 -0
- /package/{atoms/ScrollAnimation → ScrollAnimation}/ScrollAnimationChild.d.ts +0 -0
- /package/{atoms/ScrollAnimation → ScrollAnimation}/ScrollAnimationChild.js +0 -0
- /package/{atoms/ScrollAnimation → ScrollAnimation}/ScrollAnimationChildWithEase.js +0 -0
- /package/{atoms/ScrollAnimation → ScrollAnimation}/ScrollAnimationParent.d.ts +0 -0
- /package/{atoms/ScrollAnimation → ScrollAnimation}/ScrollAnimationParent.js +0 -0
- /package/{atoms/ScrollAnimation → ScrollAnimation}/ScrollAnimationWithEase.js +0 -0
- /package/{atoms/ScrollAnimation → ScrollAnimation}/animationScrollWithEase.d.ts +0 -0
- /package/{atoms/ScrollAnimation → ScrollAnimation}/animationScrollWithEase.js +0 -0
- /package/{atoms/ScrollAnimation → ScrollAnimation}/index.d.ts +0 -0
- /package/{atoms/ScrollAnimation → ScrollAnimation}/index.js +0 -0
- /package/{atoms/ScrollReveal → ScrollReveal}/index.d.ts +0 -0
- /package/{atoms/ScrollReveal → ScrollReveal}/index.js +0 -0
- /package/{primitives/Sentinel → Sentinel}/Sentinel.d.ts +0 -0
- /package/{primitives/Sentinel → Sentinel}/Sentinel.js +0 -0
- /package/{primitives/Sentinel → Sentinel}/index.d.ts +0 -0
- /package/{primitives/Sentinel → Sentinel}/index.js +0 -0
- /package/{molecules/Slider → Slider}/AbstractSliderChild.d.ts +0 -0
- /package/{molecules/Slider → Slider}/AbstractSliderChild.js +0 -0
- /package/{molecules/Slider → Slider}/Slider.d.ts +0 -0
- /package/{molecules/Slider → Slider}/Slider.js +0 -0
- /package/{molecules/Slider → Slider}/SliderBtn.d.ts +0 -0
- /package/{molecules/Slider → Slider}/SliderBtn.js +0 -0
- /package/{molecules/Slider → Slider}/SliderCount.d.ts +0 -0
- /package/{molecules/Slider → Slider}/SliderCount.js +0 -0
- /package/{molecules/Slider → Slider}/SliderDrag.d.ts +0 -0
- /package/{molecules/Slider → Slider}/SliderDrag.js +0 -0
- /package/{molecules/Slider → Slider}/SliderItem.d.ts +0 -0
- /package/{molecules/Slider → Slider}/SliderItem.js +0 -0
- /package/{molecules/Slider → Slider}/SliderProgress.d.ts +0 -0
- /package/{molecules/Slider → Slider}/SliderProgress.js +0 -0
- /package/{molecules/Slider → Slider}/index.d.ts +0 -0
- /package/{molecules/Slider → Slider}/index.js +0 -0
- /package/{molecules/Sticky → Sticky}/Sticky.twig +0 -0
- /package/{molecules/Sticky → Sticky}/index.d.ts +0 -0
- /package/{molecules/Sticky → Sticky}/index.js +0 -0
- /package/{molecules/TableOfContent → TableOfContent}/index.d.ts +0 -0
- /package/{molecules/TableOfContent → TableOfContent}/index.js +0 -0
- /package/{molecules/Tabs → Tabs}/Tabs.twig +0 -0
- /package/{molecules/Tabs → Tabs}/index.d.ts +0 -0
- /package/{molecules/Tabs → Tabs}/index.js +0 -0
- /package/{primitives/Transition → Transition}/index.d.ts +0 -0
- /package/{primitives/Transition → Transition}/index.js +0 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["
|
|
3
|
+
"sources": ["../../packages/ui/Prefetch/PrefetchWhenVisible.ts"],
|
|
4
4
|
"sourcesContent": ["import { withMountWhenInView } from '@studiometa/js-toolkit';\nimport type { BaseConfig } from '@studiometa/js-toolkit';\nimport { AbstractPrefetch } from './AbstractPrefetch.js';\n\n/**\n * PrefetchWhenVisible class.\n */\nexport class PrefetchWhenVisible extends withMountWhenInView<AbstractPrefetch>(AbstractPrefetch) {\n /**\n * Config.\n */\n static config: BaseConfig = {\n ...AbstractPrefetch.config,\n name: 'PrefetchWhenVisible',\n };\n\n /**\n * Prefetch on mount.\n */\n mounted() {\n this.prefetch(new URL(this.$el.href));\n }\n}\n"],
|
|
5
5
|
"mappings": "AAAA,SAAS,2BAA2B;AAEpC,SAAS,wBAAwB;AAK1B,MAAM,4BAA4B,oBAAsC,gBAAgB,EAAE;AAAA;AAAA;AAAA;AAAA,EAI/F,OAAO,SAAqB;AAAA,IAC1B,GAAG,iBAAiB;AAAA,IACpB,MAAM;AAAA,EACR;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,SAAK,SAAS,IAAI,IAAI,KAAK,IAAI,IAAI,CAAC;AAAA,EACtC;AACF;",
|
|
6
6
|
"names": []
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["
|
|
3
|
+
"sources": ["../../packages/ui/Prefetch/index.ts"],
|
|
4
4
|
"sourcesContent": ["export * from './AbstractPrefetch.js';\nexport * from './PrefetchWhenOver.js';\nexport * from './PrefetchWhenVisible.js';\n"],
|
|
5
5
|
"mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;",
|
|
6
6
|
"names": []
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
<div {{ html_attributes(item_attributes) }}>
|
|
42
42
|
{% block icon %}
|
|
43
43
|
{% if item.icon %}
|
|
44
|
-
{% include '@ui/
|
|
44
|
+
{% include '@ui/Icon/IconImg.twig' with icon_attributes only %}
|
|
45
45
|
{% endif %}
|
|
46
46
|
{% endblock %}
|
|
47
47
|
{% block title %}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["
|
|
3
|
+
"sources": ["../../packages/ui/ScrollAnimation/AbstractScrollAnimation.ts"],
|
|
4
4
|
"sourcesContent": ["import { Base, withFreezedOptions } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig, ScrollInViewProps } from '@studiometa/js-toolkit';\nimport { map, clamp, animate } from '@studiometa/js-toolkit/utils';\nimport type { Keyframe } from '@studiometa/js-toolkit/utils';\n\nexport interface AbstractScrollAnimationProps extends BaseProps {\n $options: {\n playRange: [number, number];\n from: Keyframe;\n to: Keyframe;\n keyframes: Keyframe[];\n easing: [number, number, number, number];\n };\n}\n\n/**\n * AbstractScrollAnimation class.\n */\nexport class AbstractScrollAnimation<\n T extends BaseProps = BaseProps,\n> extends withFreezedOptions<Base>(Base)<T & AbstractScrollAnimationProps> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'AbstractScrollAnimation',\n options: {\n playRange: {\n type: Array,\n default: () => [0, 1],\n },\n from: {\n type: Object,\n default: () => ({}),\n },\n to: {\n type: Object,\n default: () => ({}),\n },\n keyframes: {\n type: Array,\n },\n easing: {\n type: Array,\n default: () => [0, 0, 1, 1],\n },\n },\n };\n\n /**\n * Get the target element for the animation.\n */\n get target() {\n return this.$el as HTMLElement;\n }\n\n /**\n * Lazily get animation.\n */\n get animation(): ReturnType<typeof animate> {\n let { keyframes } = this.$options;\n const { from, to } = this.$options;\n\n if (keyframes.length <= 0 && from && to) {\n keyframes = [from, to];\n }\n\n const animation = animate(this.target, keyframes, { easing: this.$options.easing });\n\n Object.defineProperty(this, 'animation', {\n value: animation,\n configurable: true,\n });\n\n return animation;\n }\n\n scrolledInView(props: ScrollInViewProps) {\n const progress = map(\n clamp(props.dampedProgress.y, this.$options.playRange[0], this.$options.playRange[1]),\n this.$options.playRange[0],\n this.$options.playRange[1],\n 0,\n 1,\n );\n\n this.render(progress);\n }\n\n /**\n * Render the animation for the given progress.\n */\n render(progress: number) {\n this.animation.progress(progress);\n }\n}\n"],
|
|
5
5
|
"mappings": "AAAA,SAAS,MAAM,0BAA0B;AAEzC,SAAS,KAAK,OAAO,eAAe;AAgB7B,MAAM,gCAEH,mBAAyB,IAAI,EAAoC;AAAA;AAAA;AAAA;AAAA,EAIzE,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,SAAS;AAAA,MACP,WAAW;AAAA,QACT,MAAM;AAAA,QACN,SAAS,MAAM,CAAC,GAAG,CAAC;AAAA,MACtB;AAAA,MACA,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,SAAS,OAAO,CAAC;AAAA,MACnB;AAAA,MACA,IAAI;AAAA,QACF,MAAM;AAAA,QACN,SAAS,OAAO,CAAC;AAAA,MACnB;AAAA,MACA,WAAW;AAAA,QACT,MAAM;AAAA,MACR;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,SAAS,MAAM,CAAC,GAAG,GAAG,GAAG,CAAC;AAAA,MAC5B;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,SAAS;AACX,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,YAAwC;AAC1C,QAAI,EAAE,UAAU,IAAI,KAAK;AACzB,UAAM,EAAE,MAAM,GAAG,IAAI,KAAK;AAE1B,QAAI,UAAU,UAAU,KAAK,QAAQ,IAAI;AACvC,kBAAY,CAAC,MAAM,EAAE;AAAA,IACvB;AAEA,UAAM,YAAY,QAAQ,KAAK,QAAQ,WAAW,EAAE,QAAQ,KAAK,SAAS,OAAO,CAAC;AAElF,WAAO,eAAe,MAAM,aAAa;AAAA,MACvC,OAAO;AAAA,MACP,cAAc;AAAA,IAChB,CAAC;AAED,WAAO;AAAA,EACT;AAAA,EAEA,eAAe,OAA0B;AACvC,UAAM,WAAW;AAAA,MACf,MAAM,MAAM,eAAe,GAAG,KAAK,SAAS,UAAU,CAAC,GAAG,KAAK,SAAS,UAAU,CAAC,CAAC;AAAA,MACpF,KAAK,SAAS,UAAU,CAAC;AAAA,MACzB,KAAK,SAAS,UAAU,CAAC;AAAA,MACzB;AAAA,MACA;AAAA,IACF;AAEA,SAAK,OAAO,QAAQ;AAAA,EACtB;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO,UAAkB;AACvB,SAAK,UAAU,SAAS,QAAQ;AAAA,EAClC;AACF;",
|
|
6
6
|
"names": []
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["
|
|
3
|
+
"sources": ["../../packages/ui/ScrollAnimation/ScrollAnimation.ts"],
|
|
4
4
|
"sourcesContent": ["import { withScrolledInView } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { AbstractScrollAnimation } from './AbstractScrollAnimation.js';\n\nexport interface ScrollAnimationProps extends BaseProps {\n $refs: {\n target: HTMLElement;\n };\n}\n\n/**\n * ScrollAnimation class.\n */\nexport class ScrollAnimation<\n T extends BaseProps = BaseProps,\n> extends withScrolledInView<AbstractScrollAnimation>(AbstractScrollAnimation, {})<\n T & ScrollAnimationProps\n> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n ...AbstractScrollAnimation.config,\n name: 'ScrollAnimation',\n refs: ['target'],\n };\n\n /**\n * Use the `target` ref as animation target.\n */\n get target(): HTMLElement {\n return this.$refs.target;\n }\n}\n"],
|
|
5
5
|
"mappings": "AAAA,SAAS,0BAA0B;AAEnC,SAAS,+BAA+B;AAWjC,MAAM,wBAEH,mBAA4C,yBAAyB,CAAC,CAAC,EAE/E;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,GAAG,wBAAwB;AAAA,IAC3B,MAAM;AAAA,IACN,MAAM,CAAC,QAAQ;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,SAAsB;AACxB,WAAO,KAAK,MAAM;AAAA,EACpB;AACF;",
|
|
6
6
|
"names": []
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["
|
|
3
|
+
"sources": ["../../packages/ui/ScrollAnimation/ScrollAnimationChild.ts"],
|
|
4
4
|
"sourcesContent": ["import type {\n BaseConfig,\n BaseProps,\n ScrollInViewProps,\n WithScrolledInViewProps,\n} from '@studiometa/js-toolkit';\nimport { damp, clamp01 } from '@studiometa/js-toolkit/utils';\nimport { AbstractScrollAnimation } from './AbstractScrollAnimation.js';\n\nexport interface ScrollAnimationChildProps extends BaseProps {\n $options: WithScrolledInViewProps['$options'];\n}\n\nfunction updateProps(\n // eslint-disable-next-line no-use-before-define\n that: ScrollAnimationChild,\n props: ScrollInViewProps,\n dampFactor: number,\n dampPrecision: number,\n axis: 'x' | 'y' = 'x',\n) {\n that.dampedCurrent[axis] = damp(\n props.current[axis],\n that.dampedCurrent[axis],\n dampFactor,\n dampPrecision,\n );\n that.dampedProgress[axis] = clamp01(\n (that.dampedCurrent[axis] - props.start[axis]) / (props.end[axis] - props.start[axis]),\n );\n}\n\n/**\n * ScrollAnimationChild class.\n */\nexport class ScrollAnimationChild<T extends BaseProps = BaseProps> extends AbstractScrollAnimation<\n T & ScrollAnimationChildProps\n> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'ScrollAnimationChild',\n ...AbstractScrollAnimation.config,\n options: {\n ...AbstractScrollAnimation.config.options,\n dampFactor: {\n type: Number,\n default: 0.1,\n },\n dampPrecision: {\n type: Number,\n default: 0.001,\n },\n },\n };\n\n /**\n * Local damped current values.\n */\n dampedCurrent: ScrollInViewProps['dampedCurrent'] = {\n x: 0,\n y: 0,\n };\n\n /**\n * Local damped progress.\n */\n dampedProgress: ScrollInViewProps['dampedCurrent'] = {\n x: 0,\n y: 0,\n };\n\n /**\n * Compute local damped progress.\n */\n scrolledInView(props: ScrollInViewProps) {\n const { dampFactor, dampPrecision } = this.$options;\n\n updateProps(this, props, dampFactor, dampPrecision, 'x');\n updateProps(this, props, dampFactor, dampPrecision, 'y');\n\n props.dampedCurrent = this.dampedCurrent;\n props.dampedProgress = this.dampedProgress;\n\n super.scrolledInView(props);\n }\n}\n"],
|
|
5
5
|
"mappings": "AAMA,SAAS,MAAM,eAAe;AAC9B,SAAS,+BAA+B;AAMxC,SAAS,YAEP,MACA,OACA,YACA,eACA,OAAkB,KAClB;AACA,OAAK,cAAc,IAAI,IAAI;AAAA,IACzB,MAAM,QAAQ,IAAI;AAAA,IAClB,KAAK,cAAc,IAAI;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AACA,OAAK,eAAe,IAAI,IAAI;AAAA,KACzB,KAAK,cAAc,IAAI,IAAI,MAAM,MAAM,IAAI,MAAM,MAAM,IAAI,IAAI,IAAI,MAAM,MAAM,IAAI;AAAA,EACtF;AACF;AAKO,MAAM,6BAA8D,wBAEzE;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,GAAG,wBAAwB;AAAA,IAC3B,SAAS;AAAA,MACP,GAAG,wBAAwB,OAAO;AAAA,MAClC,YAAY;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,MACA,eAAe;AAAA,QACb,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,gBAAoD;AAAA,IAClD,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAAA;AAAA;AAAA;AAAA,EAKA,iBAAqD;AAAA,IACnD,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAAA;AAAA;AAAA;AAAA,EAKA,eAAe,OAA0B;AACvC,UAAM,EAAE,YAAY,cAAc,IAAI,KAAK;AAE3C,gBAAY,MAAM,OAAO,YAAY,eAAe,GAAG;AACvD,gBAAY,MAAM,OAAO,YAAY,eAAe,GAAG;AAEvD,UAAM,gBAAgB,KAAK;AAC3B,UAAM,iBAAiB,KAAK;AAE5B,UAAM,eAAe,KAAK;AAAA,EAC5B;AACF;",
|
|
6
6
|
"names": []
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { BaseConfig } from '@studiometa/js-toolkit';
|
|
2
|
-
declare const ScrollAnimationChildWithEase_base: import("@studiometa/js-toolkit").BaseDecorator<import("./animationScrollWithEase.js").AnimationScrollWithEaseInterface, import("
|
|
2
|
+
declare const ScrollAnimationChildWithEase_base: import("@studiometa/js-toolkit").BaseDecorator<import("./animationScrollWithEase.js").AnimationScrollWithEaseInterface, import("./AbstractScrollAnimation.js").AbstractScrollAnimation<import("@studiometa/js-toolkit").BaseProps>, import("./animationScrollWithEase.js").AnimationScrollWithEaseProps>;
|
|
3
3
|
/**
|
|
4
4
|
* ScrollAnimationChild class.
|
|
5
5
|
*/
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["
|
|
3
|
+
"sources": ["../../packages/ui/ScrollAnimation/ScrollAnimationChildWithEase.ts"],
|
|
4
4
|
"sourcesContent": ["import type { BaseConfig } from '@studiometa/js-toolkit';\nimport { ScrollAnimationChild } from './ScrollAnimationChild.js';\nimport { animationScrollWithEase } from './animationScrollWithEase.js';\n\n/**\n * ScrollAnimationChild class.\n */\nexport class ScrollAnimationChildWithEase extends animationScrollWithEase(ScrollAnimationChild) {\n /**\n * Config.\n */\n static config: BaseConfig = {\n ...ScrollAnimationChild.config,\n name: 'ScrollAnimationChildWithEase',\n };\n}\n"],
|
|
5
5
|
"mappings": "AACA,SAAS,4BAA4B;AACrC,SAAS,+BAA+B;AAKjC,MAAM,qCAAqC,wBAAwB,oBAAoB,EAAE;AAAA;AAAA;AAAA;AAAA,EAI9F,OAAO,SAAqB;AAAA,IAC1B,GAAG,qBAAqB;AAAA,IACxB,MAAM;AAAA,EACR;AACF;",
|
|
6
6
|
"names": []
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["
|
|
3
|
+
"sources": ["../../packages/ui/ScrollAnimation/ScrollAnimationParent.ts"],
|
|
4
4
|
"sourcesContent": ["import { Base, ScrollInViewProps, withScrolledInView } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { ScrollAnimationChild } from './ScrollAnimationChild.js';\n\nexport interface ScrollAnimationParentProps extends BaseProps {\n $children: {\n ScrollAnimationChild: ScrollAnimationChild[];\n };\n}\n\n/**\n * ScrollAnimationParent class.\n */\nexport class ScrollAnimationParent<T extends BaseProps = BaseProps> extends withScrolledInView(\n Base,\n {},\n)<T & ScrollAnimationParentProps> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'ScrollAnimationParent',\n components: {\n ScrollAnimationChild,\n },\n };\n\n /**\n * Scrolled in view hook.\n */\n scrolledInView(props: ScrollInViewProps) {\n this.$children.ScrollAnimationChild.forEach((child) => {\n child.scrolledInView(props);\n });\n }\n}\n"],
|
|
5
5
|
"mappings": "AAAA,SAAS,MAAyB,0BAA0B;AAE5D,SAAS,4BAA4B;AAW9B,MAAM,8BAA+D;AAAA,EAC1E;AAAA,EACA,CAAC;AACH,EAAkC;AAAA;AAAA;AAAA;AAAA,EAIhC,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,YAAY;AAAA,MACV;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,eAAe,OAA0B;AACvC,SAAK,UAAU,qBAAqB,QAAQ,CAAC,UAAU;AACrD,YAAM,eAAe,KAAK;AAAA,IAC5B,CAAC;AAAA,EACH;AACF;",
|
|
6
6
|
"names": []
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
declare const ScrollAnimationWithEase_base: import("@studiometa/js-toolkit").BaseDecorator<import("./animationScrollWithEase.js").AnimationScrollWithEaseInterface, import("
|
|
1
|
+
declare const ScrollAnimationWithEase_base: import("@studiometa/js-toolkit").BaseDecorator<import("./animationScrollWithEase.js").AnimationScrollWithEaseInterface, import("./AbstractScrollAnimation.js").AbstractScrollAnimation<import("@studiometa/js-toolkit").BaseProps>, import("./animationScrollWithEase.js").AnimationScrollWithEaseProps>;
|
|
2
2
|
/**
|
|
3
3
|
* ScrollAnimation class.
|
|
4
4
|
*/
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["
|
|
3
|
+
"sources": ["../../packages/ui/ScrollAnimation/ScrollAnimationWithEase.ts"],
|
|
4
4
|
"sourcesContent": ["import { ScrollAnimation } from './ScrollAnimation.js';\nimport { animationScrollWithEase } from './animationScrollWithEase.js';\n\n/**\n * ScrollAnimation class.\n */\nexport class ScrollAnimationWithEase extends animationScrollWithEase(ScrollAnimation) {\n /**\n * Config.\n */\n static config = {\n ...ScrollAnimation.config,\n name: 'ScrollAnimationWithEase',\n };\n}\n"],
|
|
5
5
|
"mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,+BAA+B;AAKjC,MAAM,gCAAgC,wBAAwB,eAAe,EAAE;AAAA;AAAA;AAAA;AAAA,EAIpF,OAAO,SAAS;AAAA,IACd,GAAG,gBAAgB;AAAA,IACnB,MAAM;AAAA,EACR;AACF;",
|
|
6
6
|
"names": []
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["
|
|
3
|
+
"sources": ["../../packages/ui/ScrollAnimation/animationScrollWithEase.ts"],
|
|
4
4
|
"sourcesContent": ["import type { BaseConfig, BaseProps, BaseDecorator, BaseInterface } from '@studiometa/js-toolkit';\nimport { ease } from '@studiometa/js-toolkit/utils';\nimport type { AbstractScrollAnimation } from './AbstractScrollAnimation.js';\n\nconst regex = /ease([A-Z])/;\nconst eases = Object.fromEntries(\n Object.entries(ease)\n .filter(([name]) => name.startsWith('ease'))\n .map(([name, value]) => [name.replace(regex, (match, $1) => $1.toLowerCase()), value]),\n);\n\nexport interface AnimationScrollWithEaseProps extends BaseProps {\n $options: {\n ease: string;\n };\n}\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface AnimationScrollWithEaseInterface extends BaseInterface {}\n\n/**\n * Extend a `ScrollAnimation` component to use easings.\n */\nexport function animationScrollWithEase<S extends AbstractScrollAnimation>(\n ScrollAnimation: typeof AbstractScrollAnimation,\n): BaseDecorator<AnimationScrollWithEaseInterface, S, AnimationScrollWithEaseProps> {\n class AnimationScrollWithEase extends ScrollAnimation<AnimationScrollWithEaseProps> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n ...ScrollAnimation.config,\n name: `${ScrollAnimation.config.name}WithEase`,\n options: {\n ...ScrollAnimation.config.options,\n ease: {\n type: String,\n default: 'outExpo',\n },\n },\n };\n\n /**\n * Eases the progress value.\n */\n render(progress: number) {\n if (typeof eases[this.$options.ease] === 'function') {\n // eslint-disable-next-line no-param-reassign\n progress = eases[this.$options.ease](progress);\n }\n\n super.render(progress);\n }\n }\n\n // @ts-ignore\n return AnimationScrollWithEase;\n}\n"],
|
|
5
5
|
"mappings": "AACA,SAAS,YAAY;AAGrB,MAAM,QAAQ;AACd,MAAM,QAAQ,OAAO;AAAA,EACnB,OAAO,QAAQ,IAAI,EAChB,OAAO,CAAC,CAAC,IAAI,MAAM,KAAK,WAAW,MAAM,CAAC,EAC1C,IAAI,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,KAAK,QAAQ,OAAO,CAAC,OAAO,OAAO,GAAG,YAAY,CAAC,GAAG,KAAK,CAAC;AACzF;AAcO,SAAS,wBACd,iBACkF;AAAA,EAClF,MAAM,gCAAgC,gBAA8C;AAAA;AAAA;AAAA;AAAA,IAIlF,OAAO,SAAqB;AAAA,MAC1B,GAAG,gBAAgB;AAAA,MACnB,MAAM,GAAG,gBAAgB,OAAO,IAAI;AAAA,MACpC,SAAS;AAAA,QACP,GAAG,gBAAgB,OAAO;AAAA,QAC1B,MAAM;AAAA,UACJ,MAAM;AAAA,UACN,SAAS;AAAA,QACX;AAAA,MACF;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKA,OAAO,UAAkB;AACvB,UAAI,OAAO,MAAM,KAAK,SAAS,IAAI,MAAM,YAAY;AAEnD,mBAAW,MAAM,KAAK,SAAS,IAAI,EAAE,QAAQ;AAAA,MAC/C;AAEA,YAAM,OAAO,QAAQ;AAAA,IACvB;AAAA,EACF;AAGA,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["
|
|
3
|
+
"sources": ["../../packages/ui/ScrollAnimation/index.ts"],
|
|
4
4
|
"sourcesContent": ["export * from './AbstractScrollAnimation.js';\nexport * from './animationScrollWithEase.js';\nexport * from './ScrollAnimation.js';\nexport * from './ScrollAnimationWithEase.js';\nexport * from './ScrollAnimationChild.js';\nexport * from './ScrollAnimationChildWithEase.js';\nexport * from './ScrollAnimationParent.js';\n"],
|
|
5
5
|
"mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
|
|
6
6
|
"names": []
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ScrollServiceProps } from '@studiometa/js-toolkit';
|
|
2
2
|
import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';
|
|
3
|
-
import { Transition } from '
|
|
3
|
+
import { Transition } from '../Transition/index.js';
|
|
4
4
|
export interface ScrollRevealProps extends BaseProps {
|
|
5
5
|
$refs: {
|
|
6
6
|
target?: HTMLElement;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../packages/ui/ScrollReveal/ScrollReveal.ts"],
|
|
4
|
+
"sourcesContent": ["import { withMountWhenInView, useScroll, ScrollServiceProps } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { Transition } from '../Transition/index.js';\n\nexport interface ScrollRevealProps extends BaseProps {\n $refs: {\n target?: HTMLElement;\n };\n $options: {\n repeat: boolean;\n };\n}\n\n/**\n * ScrollReveal class.\n */\nexport class ScrollReveal<T extends BaseProps = BaseProps> extends withMountWhenInView<Transition>(\n Transition,\n)<T & ScrollRevealProps> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n ...Transition.config,\n name: 'ScrollReveal',\n refs: ['target'],\n options: {\n ...Transition.config.options,\n enterKeep: {\n type: Boolean,\n default: true,\n },\n repeat: Boolean,\n intersectionObserver: {\n type: Object,\n default: () => ({ threshold: [0, 1] }),\n },\n },\n };\n\n /**\n * Vertical scroll direction.\n */\n static scrollDirectionY: ScrollServiceProps['direction']['y'] = 'NONE';\n\n /**\n * Get the transition target.\n */\n get target(): HTMLElement {\n return this.$refs.target ?? this.$el;\n }\n\n /**\n * Trigger the `enter` transition on mount.\n */\n mounted() {\n if (!this.$options.repeat) {\n this.enter();\n this.$terminate();\n return;\n }\n\n const scroll = useScroll();\n\n if (!scroll.has('ScrollRevealRepeat')) {\n scroll.add('ScrollRevealRepeat', (props) => {\n ScrollReveal.scrollDirectionY = props.direction.y;\n });\n }\n\n if (ScrollReveal.scrollDirectionY !== 'UP') {\n this.enter();\n }\n }\n}\n"],
|
|
5
|
+
"mappings": "AAAA,SAAS,qBAAqB,iBAAqC;AAEnE,SAAS,kBAAkB;AAcpB,MAAM,qBAAsD;AAAA,EACjE;AACF,EAAyB;AAAA;AAAA;AAAA;AAAA,EAIvB,OAAO,SAAqB;AAAA,IAC1B,GAAG,WAAW;AAAA,IACd,MAAM;AAAA,IACN,MAAM,CAAC,QAAQ;AAAA,IACf,SAAS;AAAA,MACP,GAAG,WAAW,OAAO;AAAA,MACrB,WAAW;AAAA,QACT,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,MACR,sBAAsB;AAAA,QACpB,MAAM;AAAA,QACN,SAAS,OAAO,EAAE,WAAW,CAAC,GAAG,CAAC,EAAE;AAAA,MACtC;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO,mBAAyD;AAAA;AAAA;AAAA;AAAA,EAKhE,IAAI,SAAsB;AACxB,WAAO,KAAK,MAAM,UAAU,KAAK;AAAA,EACnC;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,QAAI,CAAC,KAAK,SAAS,QAAQ;AACzB,WAAK,MAAM;AACX,WAAK,WAAW;AAChB;AAAA,IACF;AAEA,UAAM,SAAS,UAAU;AAEzB,QAAI,CAAC,OAAO,IAAI,oBAAoB,GAAG;AACrC,aAAO,IAAI,sBAAsB,CAAC,UAAU;AAC1C,qBAAa,mBAAmB,MAAM,UAAU;AAAA,MAClD,CAAC;AAAA,IACH;AAEA,QAAI,aAAa,qBAAqB,MAAM;AAC1C,WAAK,MAAM;AAAA,IACb;AAAA,EACF;AACF;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["
|
|
3
|
+
"sources": ["../../packages/ui/Sentinel/Sentinel.ts"],
|
|
4
4
|
"sourcesContent": ["import { Base, withIntersectionObserver } from '@studiometa/js-toolkit';\nimport type { BaseConfig } from '@studiometa/js-toolkit';\n\n/**\n * Sentinel class.\n */\nexport class Sentinel extends withIntersectionObserver(Base, { threshold: [0, 1] }) {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'Sentinel',\n };\n}\n"],
|
|
5
5
|
"mappings": "AAAA,SAAS,MAAM,gCAAgC;AAMxC,MAAM,iBAAiB,yBAAyB,MAAM,EAAE,WAAW,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE;AAAA;AAAA;AAAA;AAAA,EAIlF,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,EACR;AACF;",
|
|
6
6
|
"names": []
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["
|
|
3
|
+
"sources": ["../../packages/ui/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
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": []
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["
|
|
3
|
+
"sources": ["../../packages/ui/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({ args: [props] }: { args: [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({ args: [props] }: { args: [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
5
|
"mappings": "AAAA,SAAS,YAAY;AAOrB,SAAS,OAAO,mBAAmB,WAAW,aAAa;AAC3D,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AA2BpB,MAAM,eAAgD,KAAsB;AAAA;AAAA;AAAA;AAAA,EAIjF,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,MAAM,CAAC,WAAW,OAAO;AAAA,IACzB,OAAO,CAAC,QAAQ,OAAO;AAAA,IACvB,YAAY;AAAA,MACV;AAAA,MACA;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,MAAM,EAAE,MAAM,QAAQ,SAAS,OAAO;AAAA,MACtC,WAAW;AAAA,MACX,SAAS;AAAA,MACT,aAAa,EAAE,MAAM,QAAQ,SAAS,EAAE;AAAA,MACxC,iBAAiB,EAAE,MAAM,QAAQ,SAAS,EAAE;AAAA,IAC9C;AAAA,EACF;AAAA,EAEA,cAAc;AAAA,EAEd,aAAa;AAAA;AAAA;AAAA;AAAA,EAKb,iBAAiB;AAAA,EAEjB,eAAe;AAAA;AAAA;AAAA;AAAA,EAKf,IAAI,eAAe;AACjB,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,aAAa,OAAe;AAC9B,SAAK,kBAAkB,YAAY;AACnC,SAAK,MAAM,SAAS,KAAK;AACzB,SAAK,iBAAiB;AACtB,SAAK,kBAAkB,SAAS;AAAA,EAClC;AAAA;AAAA;AAAA;AAAA,EAKA,SAAwB,CAAC;AAAA;AAAA;AAAA;AAAA,EAKzB,UAAuC;AAAA,IACrC,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAW;AAAA;AAAA;AAAA;AAAA,EAKX,IAAI,eAAe;AACjB,WAAO,KAAK,OAAO,KAAK,YAAY;AAAA,EACtC;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,aAAa;AACf,WAAO,KAAK,OAAO,CAAC;AAAA,EACtB;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,YAAY;AACd,WAAO,KAAK,OAAO,GAAG,EAAE;AAAA,EAC1B;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,kBAA0B;AAC5B,WAAO,KAAK,oBAAoB,KAAK,WAAW,GAAG,MAAM;AAAA,EAC3D;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,kBAA0B;AAC5B,WAAO,KAAK,oBAAoB,KAAK,UAAU,GAAG,OAAO;AAAA,EAC3D;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,WAAmB;AACrB,WAAO,KAAK,UAAU,WAAW,SAAS;AAAA,EAC5C;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,oBAAoB;AACtB,WAAO,KAAK,UAAU,WAAW,KAAK,YAAY;AAAA,EACpD;AAAA;AAAA;AAAA;AAAA,EAKA,YAA2B;AACzB,UAAM,EAAE,QAAQ,IAAI,KAAK;AACzB,UAAM,aAAa,QAAQ,sBAAsB;AAEjD,SAAK,UAAU;AAAA,MACb,MAAM,WAAW;AAAA,MACjB,QAAQ,WAAW,IAAI,WAAW,QAAQ;AAAA,MAC1C,OAAO,WAAW,IAAI,WAAW;AAAA,IACnC;AAEA,UAAM,SAAwB,KAAK,UAAU,WAAW,IAAI,CAAC,UAAU;AAAA,MACrE,GAAG;AAAA,QACD,OAAO,KAAK,KAAK,IAAI,KAAK,QAAQ,QAAQ;AAAA,QAC1C,SAAS,KAAK,KAAK,IAAI,KAAK,KAAK,QAAQ,IAAI,KAAK,QAAQ,UAAU;AAAA,QACpE,QAAQ,KAAK,KAAK,IAAI,KAAK,KAAK,QAAQ,KAAK,QAAQ,SAAS;AAAA,MAChE;AAAA,IACF,EAAE;AAEF,QAAI,KAAK,SAAS,SAAS;AACzB,YAAM,EAAE,KAAK,IAAI,KAAK;AAEtB,UAAI,SAAS,QAAQ;AACnB,cAAM,YAAY,KAAK,UAAU,WAAW,GAAG,EAAE;AAEjD,cAAM,WAAW,OAAO,KAAK,CAAC,UAAU;AACtC,gBAAM,oBACJ,UAAU,KAAK,IAAI,KAAK,QAAQ,OAAO,UAAU,KAAK,QAAQ,MAAM,EAAE;AACxE,gBAAM,uBAAuB,WAAW,QAAQ;AAChD,cAAI,uBAAuB,GAAG;AAC5B,kBAAM,EAAE,OAAO,KAAK,IAAI,MAAM,EAAE,OAAO,sBAAsB,CAAC;AAC9D,mBAAO;AAAA,UACT;AAEA,iBAAO;AAAA,QACT,CAAC;AAED,YAAI,UAAU;AACZ,iBAAO,OAAO,IAAI,CAAC,UAAU;AAC3B,kBAAM,EAAE,OAAO,KAAK,IAAI,MAAM,EAAE,MAAM,SAAS,EAAE,IAAI;AACrD,mBAAO;AAAA,UACT,CAAC;AAAA,QACH;AAAA,MACF;AAEA,UAAI,SAAS,SAAS;AACpB,cAAM,gBAAgB,OAAO,UAAU,CAAC,UAAU,MAAM,EAAE,SAAS,CAAC;AACpE,cAAM,WAAW,gBAAgB,IAAI,OAAO,GAAG,EAAE,IAAI,OAAO,gBAAgB,CAAC;AAE7E,eAAO,OAAO,IAAI,CAAC,UAAU;AAC3B,gBAAM,EAAE,QAAQ,gBAAgB,IAAI,SAAS,EAAE,QAAQ,KAAK,IAAI,MAAM,EAAE,OAAO,CAAC;AAChF,iBAAO;AAAA,QACT,CAAC;AAAA,MACH;AAEA,UAAI,SAAS,YAAY,OAAO;AAC9B,gBAAQ;AAAA,UACN,IAAI,KAAK,GAAG;AAAA,UACZ;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAEA,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKA,gBAAgB,MAAoB;AAClC,WAAO,KAAK,QAAQ,QAAQ,KAAK,SAAS,IAAI;AAAA,EAChD;AAAA;AAAA;AAAA;AAAA,EAKA,oBAAoB,OAAyB,MAAoB;AAC/D,WAAO,MAAM,QAAQ,KAAK,SAAS,IAAI;AAAA,EACzC;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,SAAK,SAAS,KAAK,UAAU;AAC7B,SAAK,2BAA2B;AAChC,SAAK,sBAAsB;AAC3B,SAAK,KAAK,KAAK,YAAY;AAAA,EAC7B;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,cAAU,MAAM;AACd,WAAK,SAAS,KAAK,UAAU;AAC7B,gBAAU,MAAM;AACd,aAAK,sBAAsB;AAC3B,aAAK,KAAK,KAAK,YAAY;AAAA,MAC7B,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKA,6BAA6B;AAC3B,SAAK,IAAI,aAAa,QAAQ,OAAO;AACrC,SAAK,IAAI,aAAa,wBAAwB,UAAU;AAAA,EAC1D;AAAA;AAAA;AAAA;AAAA,EAKA,SAAS;AACP,QAAI,KAAK,eAAe,IAAI,KAAK,UAAU;AACzC;AAAA,IACF;AAEA,SAAK,KAAK,KAAK,eAAe,CAAC;AAAA,EACjC;AAAA;AAAA;AAAA;AAAA,EAKA,SAAS;AACP,QAAI,KAAK,eAAe,IAAI,GAAG;AAC7B;AAAA,IACF;AAEA,SAAK,KAAK,KAAK,eAAe,CAAC;AAAA,EACjC;AAAA;AAAA;AAAA;AAAA,EAKA,KAAK,OAAe,EAAE,kBAAkB,KAAK,IAAI,CAAC,GAAG;AACnD,QAAI,QAAQ,KAAK,QAAQ,KAAK,UAAU;AACtC,YAAM,IAAI,MAAM,qBAAqB;AAAA,IACvC;AAEA,UAAM,eAAe,KAAK,oBAAoB,KAAK,aAAa,CAAC;AACjE,UAAM,QAAQ,KAAK,oBAAoB,KAAK,OAAO,KAAK,EAAE,CAAC;AAC3D,UAAM,cAAc,KAAK,gBAAgB,KAAK;AAC9C,UAAM,gCAAgC,KAAK,kBAAkB,KAAK;AAElE,gBAAY,QAAQ,CAAC,SAAS;AAE5B,UAAI,iBAAiB,SAAS,iBAAiB;AAC7C,aAAK,cAAc,YAAY;AAAA,MACjC;AACA,gBAAU,MAAM,KAAK,KAAK,KAAK,CAAC;AAAA,IAClC,CAAC;AACD,kCAA8B,QAAQ,CAAC,SAAS;AAC9C,WAAK,cAAc,KAAK;AAAA,IAC1B,CAAC;AAED,SAAK,eAAe;AACpB,SAAK,MAAM,QAAQ,KAAK;AAAA,EAC1B;AAAA;AAAA;AAAA;AAAA,EAKA,oBAAoB;AAClB,SAAK,aAAa,KAAK,oBAAoB,KAAK,kBAAkB,IAAI;AACtE,SAAK,cAAc,KAAK;AAExB,SAAK,eAAe;AAAA,EACtB;AAAA;AAAA;AAAA;AAAA,EAKA,iBAAiB,EAAE,MAAM,CAAC,KAAK,EAAE,GAAiC;AAChE,QAAI,KAAK,IAAI,MAAM,MAAM,CAAC,IAAI,KAAK,IAAI,MAAM,MAAM,CAAC,GAAG;AACrD;AAAA,IACF;AAEA,SAAK,cAAc,KAAK,aAAa,MAAM,SAAS,IAAI,KAAK,SAAS;AAEtE,SAAK,gBAAgB,KAAK,WAAW,EAAE,QAAQ,CAAC,SAAS;AACvD,WAAK,cAAc,KAAK,WAAW;AAAA,IACrC,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKA,iBAAiB,EAAE,MAAM,CAAC,KAAK,EAAE,GAAiC;AAChE,QAAI,CAAC,KAAK,cAAc;AACtB;AAAA,IACF;AACA,SAAK,eAAe;AAEpB,QAAI,KAAK,IAAI,MAAM,MAAM,CAAC,IAAI,KAAK,IAAI,MAAM,MAAM,CAAC,GAAG;AACrD;AAAA,IACF;AAEA,QAAI,SAAS;AAAA,MACX,kBAAkB,KAAK,aAAa,MAAM,MAAM,IAAI,KAAK,SAAS,eAAe;AAAA,MACjF,KAAK,oBAAoB,KAAK,WAAW,CAAC;AAAA,MAC1C,KAAK,oBAAoB,KAAK,UAAU,CAAC;AAAA,IAC3C;AAEA,UAAM,6CAA6C,KAAK,OAAO;AAAA,MAAI,CAAC,UAClE,KAAK,IAAI,SAAS,KAAK,oBAAoB,MAAM,CAAC,CAAC;AAAA,IACrD;AACA,UAAM,oBAAoB,KAAK,IAAI,GAAG,0CAA0C;AAChF,UAAM,eAAe,2CAA2C,QAAQ,iBAAiB;AAEzF,QAAI,KAAK,SAAS,WAAW;AAC3B,WAAK,KAAK,cAAc,EAAE,iBAAiB,MAAM,CAAC;AAAA,IACpD,OAAO;AACL,UAAI,KAAK,SAAS,SAAS;AACzB,iBAAS,KAAK,IAAI,KAAK,iBAAiB,MAAM;AAC9C,iBAAS,KAAK,IAAI,KAAK,iBAAiB,MAAM;AAAA,MAChD;AACA,WAAK,UAAU,WAAW,QAAQ,CAAC,SAAS;AAC1C,aAAK,KAAK,MAAM;AAAA,MAClB,CAAC;AACD,WAAK,eAAe;AAAA,IACtB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,iBAAiB;AACf,SAAK,WAAW;AAAA,EAClB;AAAA;AAAA;AAAA;AAAA,EAKA,gBAAgB;AACd,SAAK,WAAW;AAAA,EAClB;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,EAAE,MAAM,OAAO,OAAO,GAAoB;AAC9C,QAAI,KAAK,YAAY,QAAQ;AAC3B,UAAI,MAAM;AACR,aAAK,OAAO;AAAA,MACd,WAAW,OAAO;AAChB,aAAK,OAAO;AAAA,MACd;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,wBAAwB;AACtB,UAAM,QAAQ,KAAK,OAAO,KAAK,YAAY;AAC3C,UAAM,qBAAqB,CAAC;AAC5B,UAAM,yBAAyB,CAAC;AAEhC,SAAK,kBAAkB,KAAK,oBAAoB,MAAM,CAAC,CAAC,EAAE,QAAQ,CAAC,MAAM,MAAM;AAC7E,UAAI,IAAI,KAAK,cAAc;AACzB,2BAAmB,KAAK,IAAI;AAC5B;AAAA,MACF;AAEA,UAAI,IAAI,KAAK,cAAc;AACzB,+BAAuB,KAAK,IAAI;AAAA,MAClC;AAAA,IACF,CAAC;AAED,uBAAmB,QAAQ,CAAC,SAAS;AACnC,YAAM,iBAAiB,KAAK,iCAAiC,IAAI;AACjE,UAAI,gBAAgB;AAClB,aAAK,cAAc,KAAK,oBAAoB,eAAe,CAAC,CAAC;AAAA,MAC/D;AAAA,IACF,CAAC;AAED,2BAAuB,QAAQ,CAAC,SAAS;AACvC,YAAM,iBAAiB,KAAK,iCAAiC,MAAM,EAAE,UAAU,KAAK,CAAC;AACrF,UAAI,gBAAgB;AAClB,aAAK,cAAc,KAAK,oBAAoB,eAAe,CAAC,CAAC;AAAA,MAC/D;AAAA,IACF,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKA,iCAAiC,MAAkB,EAAE,WAAW,MAAM,IAAI,CAAC,GAAgB;AACzF,UAAM,gBAAgB,KAAK,OAAO;AAAA,MAAO,CAAC,UACxC,KAAK,cAAc,KAAK,oBAAoB,MAAM,CAAC,CAAC;AAAA,IACtD;AACA,UAAM,oBAAoB,cAAc,CAAC;AACzC,UAAM,mBAAmB,cAAc,GAAG,EAAE;AAC5C,UAAM,yBAAyB,KAAK,OAAO;AAAA,MACzC,CAAC,UACC,KAAK,oBAAoB,MAAM,CAAC,MAAM,KAAK,oBAAoB,kBAAkB,CAAC;AAAA,IACtF;AACA,UAAM,wBAAwB,KAAK,OAAO,UAAU,CAAC,UAAU,MAAM,MAAM,iBAAiB,CAAC;AAE7F,WAAO,WACH,KAAK,OAAO,wBAAwB,CAAC,IACrC,KAAK,OAAO,yBAAyB,CAAC;AAAA,EAC5C;AAAA;AAAA;AAAA;AAAA,EAKA,gBAAgB,QAAgB;AAC9B,WAAO,KAAK,UAAU,WAAW,OAAO,CAAC,SAAS,KAAK,aAAa,KAAK,cAAc,MAAM,CAAC;AAAA,EAChG;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB,QAAgB;AAChC,WAAO,KAAK,UAAU,WAAW;AAAA,MAC/B,CAAC,SAAS,CAAC,KAAK,aAAa,CAAC,KAAK,cAAc,MAAM;AAAA,IACzD;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["
|
|
3
|
+
"sources": ["../../packages/ui/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
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": []
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["
|
|
3
|
+
"sources": ["../../packages/ui/Slider/SliderCount.ts"],
|
|
4
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<\n T & SliderCountProps\n> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'SliderCount',\n refs: ['current'],\n };\n\n /**\n * Update the current counter indicator.\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
5
|
"mappings": "AACA,SAAS,2BAA2B;AAW7B,MAAM,oBAAqD,oBAEhE;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,MAAM,CAAC,SAAS;AAAA,EAClB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,OAAO,OAAe;AACpB,SAAK,MAAM,QAAQ,YAAY,GAAG,QAAQ,CAAC;AAAA,EAC7C;AACF;",
|
|
6
6
|
"names": []
|
|
@@ -5,7 +5,7 @@ export interface SliderDotsProps extends BaseProps {
|
|
|
5
5
|
dots: HTMLButtonElement[];
|
|
6
6
|
};
|
|
7
7
|
}
|
|
8
|
-
declare const SliderDots_base: import("@studiometa/js-toolkit").BaseDecorator<import("
|
|
8
|
+
declare const SliderDots_base: import("@studiometa/js-toolkit").BaseDecorator<import("../decorators/withTransition.js").TransitionInterface, AbstractSliderChild<BaseProps>, import("../decorators/withTransition.js").TransitionProps>;
|
|
9
9
|
/**
|
|
10
10
|
* SliderDots class.
|
|
11
11
|
*/
|
|
@@ -32,8 +32,7 @@ export declare class SliderDots<T extends BaseProps = BaseProps> extends SliderD
|
|
|
32
32
|
/**
|
|
33
33
|
* Go to the given index on dot click.
|
|
34
34
|
*/
|
|
35
|
-
onDotsClick({
|
|
36
|
-
event: MouseEvent;
|
|
35
|
+
onDotsClick({ index }: {
|
|
37
36
|
index: number;
|
|
38
37
|
}): void;
|
|
39
38
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { withTransition } from "
|
|
1
|
+
import { withTransition } from "../decorators/index.js";
|
|
2
2
|
import { AbstractSliderChild } from "./AbstractSliderChild.js";
|
|
3
3
|
class SliderDots extends withTransition(AbstractSliderChild) {
|
|
4
4
|
/**
|
|
@@ -32,7 +32,7 @@ class SliderDots extends withTransition(AbstractSliderChild) {
|
|
|
32
32
|
/**
|
|
33
33
|
* Go to the given index on dot click.
|
|
34
34
|
*/
|
|
35
|
-
onDotsClick({
|
|
35
|
+
onDotsClick({ index }) {
|
|
36
36
|
this.$parent.goTo(index);
|
|
37
37
|
}
|
|
38
38
|
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../packages/ui/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 * @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({ index }: { 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;AAAA;AAAA;AAAA,EAItF,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,MAAM,CAAC,QAAQ;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,SAAS;AACX,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA,EAKA,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOf,OAAO,OAAe;AACpB,SAAK,MAAM,KAAK,MAAM,KAAK,KAAK,YAAY,CAAC;AAC7C,SAAK,MAAM,KAAK,MAAM,KAAK,KAAK,CAAC;AACjC,SAAK,eAAe;AAAA,EACtB;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY,EAAE,MAAM,GAAsB;AACxC,SAAK,QAAQ,KAAK,KAAK;AAAA,EACzB;AACF;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["
|
|
3
|
+
"sources": ["../../packages/ui/Slider/SliderDrag.ts"],
|
|
4
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 }: { 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
5
|
"mappings": "AACA,SAAS,MAAM,gBAAgB;AAWxB,MAAM,mBAAoD,SAAS,IAAI,EAE5E;AAAA;AAAA;AAAA;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;AAAA;AAAA;AAAA;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;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,YAAY,EAAE,MAAM,GAA0B;AAC5C,QAAI,KAAK,qBAAqB;AAC5B,YAAM,eAAe;AAAA,IACvB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,QAAQ,OAAyB;AAC/B,SAAK,MAAM,MAAM,MAAM,KAAK;AAAA,EAC9B;AACF;",
|
|
6
6
|
"names": []
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["
|
|
3
|
+
"sources": ["../../packages/ui/Slider/SliderItem.ts"],
|
|
4
4
|
"sourcesContent": ["import { Base, withIntersectionObserver } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { damp, domScheduler, transform } from '@studiometa/js-toolkit/utils';\n\n/**\n * Manage a slider item and its state transition.\n */\nexport class SliderItem<T extends BaseProps = BaseProps> extends withIntersectionObserver(Base, {\n threshold: [0, 1],\n})<T> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'SliderItem',\n emits: ['is-fully-visible', 'is-partially-visible', 'is-hidden'],\n };\n\n /**\n * Wether the SliderItem is visible or not.\n * @type {boolean}\n */\n isVisible = false;\n\n /**\n * The SliderItem `x` position.\n * @type {number}\n */\n x = 0;\n\n /**\n * The smoothed `x` position.\n * @type {number}\n */\n dampedX = 0;\n\n /**\n * Item original position.\n */\n __rect: {\n x: number;\n y: number;\n top: number;\n right: number;\n bottom: number;\n left: number;\n width: number;\n height: number;\n };\n\n shouldEvaluateRect = false;\n\n get rect() {\n if (!this.__rect || this.shouldEvaluateRect) {\n this.shouldEvaluateRect = false;\n const x = this.x * -1;\n const rect = this.$el.getBoundingClientRect().toJSON();\n this.__rect = {\n ...rect,\n left: rect.left + x,\n right: rect.left + x + rect.width,\n x: rect.left + x,\n };\n }\n\n return this.__rect;\n }\n\n /**\n * Mounted hook\n */\n mounted() {\n this.setAccessibilityAttributes();\n }\n\n /**\n * Update SliderItem bounding rectangle on resize.\n */\n resized() {\n this.shouldEvaluateRect = true;\n }\n\n /**\n * Reset position to `0` on destroy.\n */\n destroyed() {\n this.moveInstantly(0);\n }\n\n /**\n * Intersected hook.\n */\n intersected([{ intersectionRatio, isIntersecting }]: IntersectionObserverEntry[]) {\n if (intersectionRatio >= 1) {\n this.$emit('is-fully-visible');\n } else if (intersectionRatio > 0) {\n this.$emit('is-partially-visible');\n } else {\n this.$emit('is-hidden');\n }\n\n this.isVisible = isIntersecting;\n }\n\n /**\n * Ticked hook.\n * @todo create AbstractSliderItem with `render` method\n * @todo add state to SliderItem\n * @todo add origin to SliderItem\n * @returns {void}\n */\n ticked() {\n this.dampedX = damp(this.x, this.dampedX, 0.1, 0.00001);\n this.render();\n\n if (this.dampedX === this.x) {\n this.$services.disable('ticked');\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', 'slide');\n this.$el.setAttribute('aria-label', this.$id);\n }\n\n /**\n * Enable the SliderItem.\n */\n activate() {\n this.$el.classList.add('is-active');\n }\n\n /**\n * Disable the SliderItem.\n */\n disactivate() {\n this.$el.classList.remove('is-active');\n }\n\n /**\n * Move the SliderItem to the given target position.\n */\n move(targetPosition: number) {\n this.x = targetPosition;\n\n if (!this.$services.has('ticked')) {\n this.$services.enable('ticked');\n }\n }\n\n /**\n * Move the SliderItem instantly to the given target position.\n */\n moveInstantly(targetPosition: number) {\n this.x = targetPosition;\n this.dampedX = targetPosition;\n this.render();\n }\n\n /**\n * Render the component.\n */\n render() {\n domScheduler.write(() => {\n transform(this.$el, { x: this.dampedX });\n });\n }\n\n /**\n * Check if SliderItem is partially visible for the given target position.\n */\n willBeVisible(targetPosition: number) {\n return (\n this.rect.x + targetPosition < window.innerWidth * 1.5 &&\n this.rect.x + targetPosition + this.rect.width > window.innerWidth * -0.5\n );\n }\n\n /**\n * Check if SliderItem is fully visible for the given target position.\n * @param {number} targetPosition\n * @returns {boolean}\n */\n willBeFullyVisible(targetPosition) {\n return (\n this.rect.x + targetPosition < window.innerWidth &&\n this.rect.x + targetPosition > 0 &&\n this.rect.x + targetPosition + this.rect.width < window.innerWidth &&\n this.rect.x + targetPosition + this.rect.width > 0\n );\n }\n}\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": []
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["
|
|
3
|
+
"sources": ["../../packages/ui/Slider/SliderProgress.ts"],
|
|
4
4
|
"sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { transform, map, domScheduler } from '@studiometa/js-toolkit/utils';\nimport { AbstractSliderChild } from './AbstractSliderChild.js';\n\nexport interface SliderProgressProps extends BaseProps {\n $refs: {\n progress: HTMLElement;\n };\n}\n\n/**\n * SliderProgress class.\n */\nexport class SliderProgress<T extends BaseProps = BaseProps> extends AbstractSliderChild<\n T & SliderProgressProps\n> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'SliderProgress',\n refs: ['progress'],\n };\n\n /**\n * Update the progress indicator.\n */\n update(index: number) {\n domScheduler.read(() => {\n const { progress } = this.$refs;\n const x = map(index, 0, this.$parent.indexMax, progress.clientWidth * -1, 0);\n domScheduler.write(() => {\n transform(progress, { x });\n });\n });\n }\n}\n"],
|
|
5
5
|
"mappings": "AACA,SAAS,WAAW,KAAK,oBAAoB;AAC7C,SAAS,2BAA2B;AAW7B,MAAM,uBAAwD,oBAEnE;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,MAAM,CAAC,UAAU;AAAA,EACnB;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO,OAAe;AACpB,iBAAa,KAAK,MAAM;AACtB,YAAM,EAAE,SAAS,IAAI,KAAK;AAC1B,YAAM,IAAI,IAAI,OAAO,GAAG,KAAK,QAAQ,UAAU,SAAS,cAAc,IAAI,CAAC;AAC3E,mBAAa,MAAM,MAAM;AACvB,kBAAU,UAAU,EAAE,EAAE,CAAC;AAAA,MAC3B,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;",
|
|
6
6
|
"names": []
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["
|
|
3
|
+
"sources": ["../../packages/ui/Slider/index.ts"],
|
|
4
4
|
"sourcesContent": ["export * from './AbstractSliderChild.js';\nexport * from './Slider.js';\nexport * from './SliderBtn.js';\nexport * from './SliderCount.js';\nexport * from './SliderDrag.js';\nexport * from './SliderItem.js';\nexport * from './SliderProgress.js';\nexport * from './SliderDots.js';\n"],
|
|
5
5
|
"mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
|
|
6
6
|
"names": []
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Base } from '@studiometa/js-toolkit';
|
|
2
2
|
import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';
|
|
3
|
-
import { Sentinel } from '
|
|
3
|
+
import { Sentinel } from '../Sentinel/index.js';
|
|
4
4
|
/**
|
|
5
5
|
* @typedef {object} StickyRefs
|
|
6
6
|
* @property {HTMLElement} inner
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../packages/ui/Sticky/Sticky.ts"],
|
|
4
|
+
"sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { Sentinel } from '../Sentinel/index.js';\n\n/**\n * @typedef {object} StickyRefs\n * @property {HTMLElement} inner\n * @property {HTMLElement} sentinelRef\n */\n\n/**\n * @typedef {object} StickyPrivateInterface\n * @property {StickyRefs} $refs\n * @property {{ zIndex: number, hideWhenUp: boolean, hideWhenDown: boolean }} $options\n * @property {{ Sentinel: Sentinel[] }} $children\n */\n\nexport interface StickyProps extends BaseProps {\n $refs: {\n inner: HTMLElement;\n sentinelRef: HTMLElement;\n };\n $options: {\n zIndex: number;\n hideWhenUp: boolean;\n hideWhenDown: boolean;\n };\n $children: {\n Sentinel: Sentinel[];\n };\n}\n\n/**\n * Sticky class.\n */\nexport class Sticky<T extends BaseProps = BaseProps> extends Base<T & StickyProps> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'Sticky',\n refs: ['inner', 'sentinelRef'],\n components: {\n Sentinel,\n },\n options: {\n zIndex: {\n type: Number,\n default: 100,\n },\n hideWhenUp: Boolean,\n hideWhenDown: Boolean,\n },\n };\n\n /**\n * Holder for all instances.\n */\n // eslint-disable-next-line no-use-before-define\n static instances: Set<Sticky> = new Set();\n\n /**\n * Is the component sticky?\n */\n isSticky = false;\n\n /**\n * Is the component visible?\n */\n isVisible = true;\n\n /**\n * Set the Y value.\n */\n set y(value: number) {\n this.$refs.inner.style.transform = `translateY(${value}px) translateZ(0px)`;\n }\n\n /**\n * Get instances as array.\n */\n get instances(): Sticky[] {\n return Array.from(Sticky.instances);\n }\n\n /**\n * Mounted hook.\n */\n mounted() {\n Sticky.instances.add(this);\n this.setSentinelSize();\n }\n\n /**\n * Resized hook.\n */\n resized() {\n this.setSentinelSize();\n }\n\n /**\n * Destroyed hook.\n */\n destroyed() {\n Sticky.instances.delete(this);\n }\n\n /**\n * Scrolled hook.\n */\n scrolled(props) {\n if (!this.isSticky || props.y === props.last.y) {\n return;\n }\n\n if (\n (props.direction.y === 'DOWN' && this.$options.hideWhenDown) ||\n (props.direction.y === 'UP' && this.$options.hideWhenUp)\n ) {\n this.hide();\n } else {\n this.show();\n }\n }\n\n /**\n * Listen to the sentinel's `intersected` event to set the `isSticky` value.\n * @param {IntersectionObserverEntry[]} entries\n * @returns {void}\n */\n onSentinelIntersected({ args: [[entry]] }: { args: [IntersectionObserverEntry[]] }) {\n this.isSticky = entry.isIntersecting && entry.boundingClientRect.y < 0;\n this.setPosition();\n }\n\n /**\n * Hide the sticky component when another one is sticky.\n */\n hide() {\n if (!this.isVisible) {\n return;\n }\n\n this.isVisible = false;\n this.$el.classList.add('pointer-events-none');\n\n this.instances.forEach((instance, index) => instance.setPosition(index));\n }\n\n /**\n * Show the sticky component when the other one is not sticky anymore.\n */\n show() {\n if (this.isVisible) {\n return;\n }\n\n this.isVisible = true;\n this.$el.classList.remove('pointer-events-none');\n this.instances.forEach((instance, index) => instance.setPosition(index));\n }\n\n /**\n * Set the sentinel height based on the previous instances.\n */\n setSentinelSize() {\n const { instances } = this;\n const index = instances.indexOf(this);\n const height = instances\n .slice(0, index)\n .filter(\n // Test each instance sticky context against the current element\n (instance) => this.closestRelativeElement(instance.$el).contains(this.$el),\n )\n .reduce((acc, instance) => acc + instance.$el.offsetHeight, 0);\n\n this.$refs.sentinelRef.style.height = `${height + 1}px`;\n this.$el.style.top = `${height}px`;\n this.$el.style.zIndex = String(this.$options.zIndex - index);\n }\n\n /**\n * Set the component's position.\n * @param {number} [index] The instance index in all the pages' instances.\n * @returns {void}\n */\n setPosition(index?: number) {\n if (!this.isSticky) {\n this.y = 0;\n return;\n }\n\n const { instances } = this;\n\n // eslint-disable-next-line no-param-reassign\n index = index ?? instances.indexOf(this);\n\n this.y = instances\n .slice(0, index)\n .filter((instance) => instance.isSticky && !instance.isVisible)\n .reduce<number>(\n (y: number, instance) => y - instance.$refs.inner.offsetHeight,\n this.isVisible ? 0 : this.$refs.inner.offsetHeight * -1,\n ) as number;\n }\n\n /**\n * Find the first parent which has a relative position.\n */\n closestRelativeElement(element: HTMLElement) {\n let parent = element.parentElement;\n\n while (getComputedStyle(parent).position !== 'relative' && parent.parentElement) {\n parent = parent.parentElement;\n }\n\n return parent;\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -14,7 +14,7 @@ export interface TableOfContentProps extends BaseProps {
|
|
|
14
14
|
TableOfContentAnchor: TableOfContentAnchor[];
|
|
15
15
|
};
|
|
16
16
|
}
|
|
17
|
-
declare const TableOfContent_base: import("@studiometa/js-toolkit").BaseDecorator<import("
|
|
17
|
+
declare const TableOfContent_base: import("@studiometa/js-toolkit").BaseDecorator<import("../decorators/withDeprecation.js").DeprecationInterface, Base<BaseProps>, import("../decorators/withDeprecation.js").DeprecationProps>;
|
|
18
18
|
/**
|
|
19
19
|
* TableOfContent class.
|
|
20
20
|
* @deprecated
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Base } from "@studiometa/js-toolkit";
|
|
2
2
|
import { TableOfContentAnchor } from "./TableOfContentAnchor.js";
|
|
3
|
-
import { withDeprecation } from "
|
|
3
|
+
import { withDeprecation } from "../decorators/withDeprecation.js";
|
|
4
4
|
class TableOfContent extends withDeprecation(Base) {
|
|
5
5
|
/**
|
|
6
6
|
* Config.
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../packages/ui/TableOfContent/TableOfContent.ts"],
|
|
4
|
+
"sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { TableOfContentAnchor } from './TableOfContentAnchor.js';\nimport { withDeprecation } from '../decorators/withDeprecation.js';\n\nexport interface TableOfContentProps extends BaseProps {\n $refs: {\n itemTemplate: HTMLTemplateElement;\n list: HTMLUListElement;\n };\n $options: {\n contentSelector: string;\n withTemplate: boolean;\n };\n $children: {\n TableOfContentAnchor: TableOfContentAnchor[];\n };\n}\n\n/**\n * TableOfContent class.\n * @deprecated\n */\nexport class TableOfContent<T extends BaseProps = BaseProps> extends withDeprecation(Base)<\n T & TableOfContentProps\n> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'TableOfContent',\n refs: ['itemTemplate', 'list'],\n components: {\n TableOfContentAnchor,\n },\n options: {\n contentSelector: String,\n withTemplate: Boolean,\n },\n };\n\n /**\n * Generate anchors on mount and update the component to instantiate the\n * `TableOfContentAnchor` components.\n */\n mounted() {\n if (this.$options.withTemplate) {\n this.generateAnchors();\n this.$update();\n }\n }\n\n /**\n * Generate all anchors.\n * @todo Read anchor template from a ref?\n * @todo Better API to easily override the template function, maybe a `render` function?\n */\n generateAnchors() {\n document.querySelectorAll(this.$options.contentSelector).forEach((section) => {\n const tpl = document.createElement('div');\n tpl.innerHTML = this.$refs.itemTemplate.innerHTML;\n const li = tpl.querySelector('li');\n const anchor = li.querySelector('a');\n anchor.href = `#${section.id}`;\n anchor.innerHTML = section.textContent;\n anchor.dataset.component = 'TableOfContentAnchor';\n this.$refs.list.append(li);\n });\n }\n}\n"],
|
|
5
|
+
"mappings": "AAAA,SAAS,YAAY;AAErB,SAAS,4BAA4B;AACrC,SAAS,uBAAuB;AAoBzB,MAAM,uBAAwD,gBAAgB,IAAI,EAEvF;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,MAAM,CAAC,gBAAgB,MAAM;AAAA,IAC7B,YAAY;AAAA,MACV;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,iBAAiB;AAAA,MACjB,cAAc;AAAA,IAChB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,UAAU;AACR,QAAI,KAAK,SAAS,cAAc;AAC9B,WAAK,gBAAgB;AACrB,WAAK,QAAQ;AAAA,IACf;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,kBAAkB;AAChB,aAAS,iBAAiB,KAAK,SAAS,eAAe,EAAE,QAAQ,CAAC,YAAY;AAC5E,YAAM,MAAM,SAAS,cAAc,KAAK;AACxC,UAAI,YAAY,KAAK,MAAM,aAAa;AACxC,YAAM,KAAK,IAAI,cAAc,IAAI;AACjC,YAAM,SAAS,GAAG,cAAc,GAAG;AACnC,aAAO,OAAO,IAAI,QAAQ,EAAE;AAC5B,aAAO,YAAY,QAAQ;AAC3B,aAAO,QAAQ,YAAY;AAC3B,WAAK,MAAM,KAAK,OAAO,EAAE;AAAA,IAC3B,CAAC;AAAA,EACH;AACF;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';
|
|
2
|
-
import { AnchorScrollTo } from '
|
|
2
|
+
import { AnchorScrollTo } from '../AnchorScrollTo/index.js';
|
|
3
3
|
export interface TableOfContentAnchorProps extends BaseProps {
|
|
4
4
|
$options: {
|
|
5
5
|
activeClass: string;
|
|
6
6
|
};
|
|
7
7
|
}
|
|
8
|
-
declare const TableOfContentAnchor_base: import("@studiometa/js-toolkit").BaseDecorator<import("
|
|
8
|
+
declare const TableOfContentAnchor_base: import("@studiometa/js-toolkit").BaseDecorator<import("../decorators/withDeprecation.js").DeprecationInterface, AnchorScrollTo<BaseProps>, import("../decorators/withDeprecation.js").DeprecationProps>;
|
|
9
9
|
/**
|
|
10
10
|
* TableOfContentAnchor class.
|
|
11
11
|
* @deprecated
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { AnchorScrollTo } from "
|
|
2
|
-
import { withDeprecation } from "
|
|
1
|
+
import { AnchorScrollTo } from "../AnchorScrollTo/index.js";
|
|
2
|
+
import { withDeprecation } from "../decorators/withDeprecation.js";
|
|
3
3
|
class TableOfContentAnchor extends withDeprecation(
|
|
4
4
|
AnchorScrollTo
|
|
5
5
|
) {
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../packages/ui/TableOfContent/TableOfContentAnchor.ts"],
|
|
4
|
+
"sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { AnchorScrollTo } from '../AnchorScrollTo/index.js';\nimport { withDeprecation } from '../decorators/withDeprecation.js';\n\nexport interface TableOfContentAnchorProps extends BaseProps {\n $options: {\n activeClass: string;\n };\n}\n\n/**\n * TableOfContentAnchor class.\n * @deprecated\n */\nexport class TableOfContentAnchor<T extends BaseProps = BaseProps> extends withDeprecation<AnchorScrollTo>(\n AnchorScrollTo,\n)<T & TableOfContentAnchorProps> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'TableOfContentAnchor',\n emits: ['should-activate'],\n options: {\n activeClass: {\n type: String,\n default: 'is-active',\n },\n },\n };\n\n /**\n * Observer.\n * @private\n */\n __observer: IntersectionObserver;\n\n /**\n * Get the sentinel.\n */\n get sentinel(): HTMLElement {\n return document.querySelector(this.targetSelector) as HTMLElement;\n }\n\n /**\n * Init observer on mount.\n */\n mounted() {\n if (!this.sentinel) {\n return;\n }\n\n this.__observer = new IntersectionObserver(([entry]) => {\n const shouldActivate =\n entry.isIntersecting &&\n entry.boundingClientRect.y < 100 &&\n entry.boundingClientRect.y > -100;\n this.$el.classList.toggle(this.$options.activeClass, shouldActivate);\n this.$emit('should-activate', shouldActivate);\n });\n\n this.__observer.observe(this.sentinel);\n }\n\n /**\n * Destroy observer on destroy.\n */\n destroyed() {\n this.__observer.disconnect();\n }\n}\n"],
|
|
5
|
+
"mappings": "AACA,SAAS,sBAAsB;AAC/B,SAAS,uBAAuB;AAYzB,MAAM,6BAA8D;AAAA,EACzE;AACF,EAAiC;AAAA;AAAA;AAAA;AAAA,EAI/B,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,OAAO,CAAC,iBAAiB;AAAA,IACzB,SAAS;AAAA,MACP,aAAa;AAAA,QACX,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,WAAwB;AAC1B,WAAO,SAAS,cAAc,KAAK,cAAc;AAAA,EACnD;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,QAAI,CAAC,KAAK,UAAU;AAClB;AAAA,IACF;AAEA,SAAK,aAAa,IAAI,qBAAqB,CAAC,CAAC,KAAK,MAAM;AACtD,YAAM,iBACJ,MAAM,kBACN,MAAM,mBAAmB,IAAI,OAC7B,MAAM,mBAAmB,IAAI;AAC/B,WAAK,IAAI,UAAU,OAAO,KAAK,SAAS,aAAa,cAAc;AACnE,WAAK,MAAM,mBAAmB,cAAc;AAAA,IAC9C,CAAC;AAED,SAAK,WAAW,QAAQ,KAAK,QAAQ;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY;AACV,SAAK,WAAW,WAAW;AAAA,EAC7B;AACF;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["
|
|
3
|
+
"sources": ["../../packages/ui/TableOfContent/index.ts"],
|
|
4
4
|
"sourcesContent": ["export * from './TableOfContent.js';\nexport * from './TableOfContentAnchor.js';\n"],
|
|
5
5
|
"mappings": "AAAA,cAAc;AACd,cAAc;",
|
|
6
6
|
"names": []
|