@studiometa/ui 0.2.13 → 0.2.14

package/molecules/Slider/Slider.d.ts

@@ -1,86 +1,55 @@
-/**
- * @typedef {'left'|'center'|'right'} SliderModes
- * @typedef {{ x: Record<SliderModes, number> }} SliderState
- */
-/**
- * @typedef {Object} SliderChildren
- * @property {SliderItem[]} SliderItem
- * @property {SliderDrag[]} SliderDrag
- */
-/**
- * @typedef {Object} SliderOptions
- * @property {SliderModes} mode
- * @property {boolean} fitBounds
- * @property {number} sensitivity
- */
-/**
- * @typedef {Object} SliderPrivateInterface
- * @property {{ wrapper: HTMLElement }} $refs
- * @property {SliderChildren} $children
- * @property {SliderOptions} $options
- */
-/**
- * @typedef {Slider & SliderPrivateInterface} SliderInterface
- */
+import { Base } from '@studiometa/js-toolkit';
+import type { BaseProps, BaseConfig, DragServiceProps, KeyServiceProps } from '@studiometa/js-toolkit';
+import { SliderDrag } from './SliderDrag.js';
+import { SliderItem } from './SliderItem.js';
+export declare type SliderModes = 'left' | 'center' | 'right';
+declare type SliderState = {
+    x: Record<SliderModes, number>;
+};
+export interface SliderProps extends BaseProps {
+    $refs: {
+        wrapper: HTMLElement;
+    };
+    $children: {
+        SliderItem: SliderItem[];
+        SliderDrag: SliderDrag[];
+    };
+    $options: {
+        mode: SliderModes;
+        fitBounds: boolean;
+        sensitivity: number;
+        dropSensitivity: number;
+    };
+}
 /**
  * Orchestrate the slider items state transition.
  * @todo a11y
  */
-export default class Slider extends Base {
+export declare class Slider<T extends BaseProps = BaseProps> extends Base<T & SliderProps> {
     /**
      * Config.
      */
-    static config: {
-        name: string;
-        refs: string[];
-        emits: string[];
-        components: {
-            SliderItem: typeof SliderItem;
-            SliderDrag: typeof SliderDrag;
-        };
-        options: {
-            mode: {
-                type: StringConstructor;
-                default: string;
-            };
-            fitBounds: BooleanConstructor;
-            contain: BooleanConstructor;
-            sensitivity: {
-                type: NumberConstructor;
-                default: number;
-            };
-            dropSensitivity: {
-                type: NumberConstructor;
-                default: number;
-            };
-        };
-    };
+    static config: BaseConfig;
     __distanceX: number;
     __initialX: number;
     /**
      * Index of the current active slide.
-     * @type {number}
      */
     __currentIndex: number;
-    /**
-     * Set the current index and emit the `index` event.
-     * @param   {number} value
-     * @returns {void}
-     */
-    set currentIndex(arg: number);
     /**
      * Get the current index.
-     * @returns {number}
      */
     get currentIndex(): number;
+    /**
+     * Set the current index and emit the `index` event.
+     */
+    set currentIndex(value: number);
     /**
      * Store all the states.
-     * @type {SliderState[]}
      */
     states: SliderState[];
     /**
      * Origins for the different modes.
-     * @type {Record<SliderModes, number>}
      */
     origins: Record<SliderModes, number>;
     /**
@@ -90,193 +59,107 @@ export default class Slider extends Base {
     hasFocus: boolean;
     /**
      * Get the current state.
-     * @returns {SliderState}
      */
     get currentState(): SliderState;
     /**
      * Get the first state.
-     * @returns {SliderState}
      */
     get firstState(): SliderState;
     /**
      * Get the last state.
-     * @returns {SliderState}
      */
     get lastState(): SliderState;
     /**
      * Get the minimal contain state value.
-     * @returns {number} [description]
      */
     get containMinState(): number;
     /**
      * Get the maximal contain state value.
-     * @returns {number} [description]
      */
     get containMaxState(): number;
     /**
      * Get the last index.
-     *
-     * @this    {SliderInterface}
-     * @returns {number}
      */
     get indexMax(): number;
     /**
      * Get the current SliderItem
-     *
-     * @this    {SliderInterface}
-     * @returns {SliderItem}
      */
-    get currentSliderItem(): SliderItem;
+    get currentSliderItem(): SliderItem<BaseProps>;
     /**
      * Get the states for each SliderItem.
-     *
-     * @this {SliderInterface}
      */
-    getStates(this: SliderInterface): {
-        x: {
-            left: number;
-            center: number;
-            right: number;
-        };
-    }[];
+    getStates(): SliderState[];
     /**
      * Get an origin by mode.
-     * @param   {SliderOptions['mode']} [mode]
-     * @returns {number}
      */
-    getOriginByMode(mode?: SliderOptions['mode']): number;
+    getOriginByMode(mode?: SliderModes): number;
     /**
      * Get a state value according to the given mode.
-     *
-     * @this    {SliderInterface}
-     * @param   {SliderState['x']} state
-     * @param   {SliderOptions['mode']} [mode]
-     * @returns {number}
      */
-    getStateValueByMode(this: SliderInterface, state: SliderState['x'], mode?: SliderOptions['mode']): number;
+    getStateValueByMode(state: SliderState['x'], mode?: SliderModes): number;
     /**
      * Mounted hook.
-     *
-     * @returns {void}
      */
     mounted(): void;
     /**
      * Resized hook.
-     * @returns {void}
      */
     resized(): void;
     /**
      * Go to the next slide.
-     *
-     * @returns {void}
      */
     goNext(): void;
     /**
      * Go to the previous slide.
-     *
-     * @returns {void}
      */
     goPrev(): void;
     /**
      * Go to the given index.
-     *
-     * @this  {SliderInterface}
-     * @param {number} index
-     * @param {{ withInstantMove?: boolean }} [options]
-     * @returns {void}
      */
-    goTo(this: SliderInterface, index: number, { withInstantMove }?: {
+    goTo(index: number, { withInstantMove }?: {
         withInstantMove?: boolean;
     }): void;
     /**
      * Listen to the Draggable `start` event.
-     *
-     * @returns {void}
      */
     onSliderDragStart(): void;
     /**
      * Listen to the Draggable `drag` event.
-     *
-     * @param   {import('@studiometa/js-toolkit/services/drag').DragServiceProps} props
-     * @returns {void}
      */
-    onSliderDragDrag(props: import('@studiometa/js-toolkit/services/drag').DragServiceProps): void;
+    onSliderDragDrag(props: DragServiceProps): void;
     /**
      * Listen to the Draggable `drop` event and find the new active slide.
-     *
-     * @this    {SliderInterface}
-     * @param   {import('@studiometa/js-toolkit/services/drag').DragServiceProps} props
-     * @returns {void}
      */
-    onSliderDragDrop(this: SliderInterface, props: import('@studiometa/js-toolkit/services/drag').DragServiceProps): void;
+    onSliderDragDrop(props: DragServiceProps): void;
     /**
      * Enable focus.
-     * @returns {void}
      */
     onWrapperFocus(): void;
     /**
      * Disable focus.
-     * @returns {void}
      */
     onWrapperBlur(): void;
     /**
      * Go prev or next when focus is on the wrapper and pressing arrow keys.
-     * @param   {import('@studiometa/js-toolkit/services/key').KeyServiceProps} props
-     * @returns {void}
      */
-    keyed({ LEFT, RIGHT, isDown }: import('@studiometa/js-toolkit/services/key').KeyServiceProps): void;
+    keyed({ LEFT, RIGHT, isDown }: KeyServiceProps): void;
     /**
      * Prepare invisible items.
-     * @returns {void}
      */
     prepareInvisibleItems(): void;
     /**
      * Get the state where the given item will be visible.
-     *
-     * @param   {SliderItem} item
-     * @returns {SliderState}
      */
     getStateWhereItemWillBeInvisible(item: SliderItem, { reversed }?: {
         reversed?: boolean;
     }): SliderState;
     /**
      * Get the visible slides for the given position.
-     *
-     * @this    {SliderInterface}
-     * @param   {number} target
-     * @returns {SliderItem[]}
      */
-    getVisibleItems(this: SliderInterface, target: number): SliderItem[];
+    getVisibleItems(target: number): SliderItem<BaseProps>[];
     /**
      * Get the invisible slides for the given position.
-     *
-     * @this    {SliderInterface}
-     * @param   {number} target
-     * @returns {SliderItem[]}
      */
-    getInvisibleItems(this: SliderInterface, target: number): SliderItem[];
+    getInvisibleItems(target: number): SliderItem<BaseProps>[];
 }
-export type SliderModes = 'left' | 'center' | 'right';
-export type SliderState = {
-    x: Record<SliderModes, number>;
-};
-export type SliderChildren = {
-    SliderItem: SliderItem[];
-    SliderDrag: SliderDrag[];
-};
-export type SliderOptions = {
-    mode: SliderModes;
-    fitBounds: boolean;
-    sensitivity: number;
-};
-export type SliderPrivateInterface = {
-    $refs: {
-        wrapper: HTMLElement;
-    };
-    $children: SliderChildren;
-    $options: SliderOptions;
-};
-export type SliderInterface = Slider & SliderPrivateInterface;
-import { Base } from "@studiometa/js-toolkit";
-import SliderItem from "./SliderItem.js";
-import SliderDrag from "./SliderDrag.js";
+export {};

package/molecules/Slider/Slider.js

@@ -1 +1,279 @@
-import{Base as d}from"@studiometa/js-toolkit";import{clamp as c,inertiaFinalValue as u,nextFrame as o,isDev as f}from"@studiometa/js-toolkit/utils";import x from"./SliderDrag.js";import g from"./SliderItem.js";class I extends d{static config={name:"Slider",refs:["wrapper","debug"],emits:["goto","index"],components:{SliderItem:g,SliderDrag:x},options:{mode:{type:String,default:"left"},fitBounds:Boolean,contain:Boolean,sensitivity:{type:Number,default:1},dropSensitivity:{type:Number,default:2}}};__distanceX=0;__initialX=0;__currentIndex=0;get currentIndex(){return this.__currentIndex}set currentIndex(t){this.currentSliderItem.disactivate(),this.$emit("index",t),this.__currentIndex=t,this.currentSliderItem.activate()}states=[];origins={left:0,center:0,right:0};hasFocus=!1;get currentState(){return this.states[this.currentIndex]}get firstState(){return this.states[0]}get lastState(){return this.states[this.states.length-1]}get containMinState(){return this.getStateValueByMode(this.firstState.x,"left")}get containMaxState(){return this.getStateValueByMode(this.lastState.x,"right")}get indexMax(){return this.$children.SliderItem.length-1}get currentSliderItem(){return this.$children.SliderItem[this.currentIndex]}getStates(){const{wrapper:t}=this.$refs,e=t.getBoundingClientRect();this.origins={left:e.left,center:e.x+e.width/2,right:e.x+e.width};const s=this.$children.SliderItem.map(i=>({x:{left:(i.rect.x-this.origins.left)*-1,center:(i.rect.x+i.rect.width/2-this.origins.center)*-1,right:(i.rect.x+i.rect.width-this.origins.right)*-1}}));if(this.$options.contain){const{mode:i}=this.$options;if(i==="left"){const n=this.$children.SliderItem.at(-1),a=s.find(r=>{const h=n.rect.x-this.origins.left+n.rect.width+r.x.left,l=e.width-h;return l>0?(r.x.left=Math.min(r.x.left+l,0),!0):!1});if(a)return s.map(r=>(r.x.left=Math.max(r.x.left,a.x.left),r))}if(i==="right"){const n=s.findIndex(r=>r.x.right<=0),a=n<0?s.at(-1):s[n-1];return s.map(r=>(r.x.right=n<0?a.x.right:Math.min(r.x.right,0),r))}i==="center"&&f&&console.warn(`[${this.$id}]`,"The `center` mode is not yet compatible with the `contain` mode.")}return s}getOriginByMode(t){return this.origins[t??this.$options.mode]}getStateValueByMode(t,e){return t[e??this.$options.mode]}mounted(){this.states=this.getStates(),this.prepareInvisibleItems(),this.goTo(this.currentIndex)}resized(){o(()=>{this.states=this.getStates(),o(()=>{this.prepareInvisibleItems(),this.goTo(this.currentIndex)})})}goNext(){this.currentIndex+1>this.indexMax||this.goTo(this.currentIndex+1)}goPrev(){this.currentIndex-1<0||this.goTo(this.currentIndex-1)}goTo(t,{withInstantMove:e=!0}={}){if(t<0||t>this.indexMax)throw new Error("Index out of bound.");const s=this.getStateValueByMode(this.currentState.x),i=this.getStateValueByMode(this.states[t].x),n=this.getVisibleItems(i),a=this.getInvisibleItems(i);n.forEach(r=>{s!==i&&e&&r.moveInstantly(s),o(()=>r.move(i))}),a.forEach(r=>{r.moveInstantly(i)}),this.currentIndex=t,this.$emit("goto",t)}onSliderDragStart(){this.__initialX=this.currentSliderItem?this.currentSliderItem.x:0,this.__distanceX=this.__initialX}onSliderDragDrag(t){Math.abs(t.delta.y)>Math.abs(t.delta.x)||(this.__distanceX=this.__initialX+t.distance.x*this.$options.sensitivity,this.getVisibleItems(this.__distanceX).forEach(e=>{e.moveInstantly(this.__distanceX)}))}onSliderDragDrop(t){if(Math.abs(t.delta.y)>Math.abs(t.delta.x))return;let e=c(u(this.__distanceX,t.delta.x*this.$options.dropSensitivity),0,this.getStateValueByMode(this.lastState.x));const s=this.states.map(a=>Math.abs(e-this.getStateValueByMode(a.x))),i=Math.min(...s),n=s.findIndex(a=>a===i);this.$options.fitBounds?this.goTo(n,{withInstantMove:!1}):(this.$options.contain&&(e=Math.min(this.containMinState,e),e=Math.max(this.containMaxState,e)),this.$children.SliderItem.forEach(a=>{a.move(e)}),this.currentIndex=n)}onWrapperFocus(){this.hasFocus=!0}onWrapperBlur(){this.hasFocus=!1}keyed({LEFT:t,RIGHT:e,isDown:s}){this.hasFocus&&s&&(t?this.goPrev():e&&this.goNext())}prepareInvisibleItems(){const t=this.states[this.currentIndex],e=[],s=[];this.getInvisibleItems(this.getStateValueByMode(t.x)).forEach((i,n)=>{if(n>this.currentIndex){e.push(i);return}n<this.currentIndex&&s.push(i)}),e.forEach(i=>{const n=this.getStateWhereItemWillBeInvisible(i);n&&i.moveInstantly(this.getStateValueByMode(n.x))}),s.forEach(i=>{const n=this.getStateWhereItemWillBeInvisible(i,{reversed:!0});n&&i.moveInstantly(this.getStateValueByMode(n.x))})}getStateWhereItemWillBeInvisible(t,{reversed:e=!1}={}){const s=this.states.filter(h=>t.willBeVisible(this.getStateValueByMode(h.x))),i=s[0],n=s[s.length-1],a=this.states.findIndex(h=>this.getStateValueByMode(h.x)===this.getStateValueByMode(i.x)),r=this.states.findIndex(h=>h.x===n.x);return e?this.states[r+1]:this.states[a-1]}getVisibleItems(t){return this.$children.SliderItem.filter(e=>e.isVisible||e.willBeVisible(t))}getInvisibleItems(t){return this.$children.SliderItem.filter(e=>!e.isVisible&&!e.willBeVisible(t))}}export{I as default};
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { Base } from "@studiometa/js-toolkit";
+import { clamp, inertiaFinalValue, nextFrame, isDev } from "@studiometa/js-toolkit/utils";
+import { SliderDrag } from "./SliderDrag.js";
+import { SliderItem } from "./SliderItem.js";
+class Slider extends Base {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "__distanceX", 0);
+    __publicField(this, "__initialX", 0);
+    __publicField(this, "__currentIndex", 0);
+    __publicField(this, "states", []);
+    __publicField(this, "origins", {
+      left: 0,
+      center: 0,
+      right: 0
+    });
+    __publicField(this, "hasFocus", false);
+  }
+  get currentIndex() {
+    return this.__currentIndex;
+  }
+  set currentIndex(value) {
+    this.currentSliderItem.disactivate();
+    this.$emit("index", value);
+    this.__currentIndex = value;
+    this.currentSliderItem.activate();
+  }
+  get currentState() {
+    return this.states[this.currentIndex];
+  }
+  get firstState() {
+    return this.states[0];
+  }
+  get lastState() {
+    return this.states.at(-1);
+  }
+  get containMinState() {
+    return this.getStateValueByMode(this.firstState.x, "left");
+  }
+  get containMaxState() {
+    return this.getStateValueByMode(this.lastState.x, "right");
+  }
+  get indexMax() {
+    return this.$children.SliderItem.length - 1;
+  }
+  get currentSliderItem() {
+    return this.$children.SliderItem[this.currentIndex];
+  }
+  getStates() {
+    const { wrapper } = this.$refs;
+    const originRect = wrapper.getBoundingClientRect();
+    this.origins = {
+      left: originRect.left,
+      center: originRect.x + originRect.width / 2,
+      right: originRect.x + originRect.width
+    };
+    const states = this.$children.SliderItem.map((item) => ({
+      x: {
+        left: (item.rect.x - this.origins.left) * -1,
+        center: (item.rect.x + item.rect.width / 2 - this.origins.center) * -1,
+        right: (item.rect.x + item.rect.width - this.origins.right) * -1
+      }
+    }));
+    if (this.$options.contain) {
+      const { mode } = this.$options;
+      if (mode === "left") {
+        const lastChild = this.$children.SliderItem.at(-1);
+        const maxState = states.find((state) => {
+          const lastChildPosition = lastChild.rect.x - this.origins.left + lastChild.rect.width + state.x.left;
+          const diffWithWrapperBound = originRect.width - lastChildPosition;
+          if (diffWithWrapperBound > 0) {
+            state.x.left = Math.min(state.x.left + diffWithWrapperBound, 0);
+            return true;
+          }
+          return false;
+        });
+        if (maxState) {
+          return states.map((state) => {
+            state.x.left = Math.max(state.x.left, maxState.x.left);
+            return state;
+          });
+        }
+      }
+      if (mode === "right") {
+        const maxStateIndex = states.findIndex((state) => state.x.right <= 0);
+        const maxState = maxStateIndex < 0 ? states.at(-1) : states[maxStateIndex - 1];
+        return states.map((state) => {
+          state.x.right = maxStateIndex < 0 ? maxState.x.right : Math.min(state.x.right, 0);
+          return state;
+        });
+      }
+      if (mode === "center" && isDev) {
+        console.warn(
+          `[${this.$id}]`,
+          "The `center` mode is not yet compatible with the `contain` mode."
+        );
+      }
+    }
+    return states;
+  }
+  getOriginByMode(mode) {
+    return this.origins[mode != null ? mode : this.$options.mode];
+  }
+  getStateValueByMode(state, mode) {
+    return state[mode != null ? mode : this.$options.mode];
+  }
+  mounted() {
+    this.states = this.getStates();
+    this.prepareInvisibleItems();
+    this.goTo(this.currentIndex);
+  }
+  resized() {
+    nextFrame(() => {
+      this.states = this.getStates();
+      nextFrame(() => {
+        this.prepareInvisibleItems();
+        this.goTo(this.currentIndex);
+      });
+    });
+  }
+  goNext() {
+    if (this.currentIndex + 1 > this.indexMax) {
+      return;
+    }
+    this.goTo(this.currentIndex + 1);
+  }
+  goPrev() {
+    if (this.currentIndex - 1 < 0) {
+      return;
+    }
+    this.goTo(this.currentIndex - 1);
+  }
+  goTo(index, { withInstantMove = true } = {}) {
+    if (index < 0 || index > this.indexMax) {
+      throw new Error("Index out of bound.");
+    }
+    const currentState = this.getStateValueByMode(this.currentState.x);
+    const state = this.getStateValueByMode(this.states[index].x);
+    const itemsToMove = this.getVisibleItems(state);
+    const invisibleItemsToMoveInstantly = this.getInvisibleItems(state);
+    itemsToMove.forEach((item) => {
+      if (currentState !== state && withInstantMove) {
+        item.moveInstantly(currentState);
+      }
+      nextFrame(() => item.move(state));
+    });
+    invisibleItemsToMoveInstantly.forEach((item) => {
+      item.moveInstantly(state);
+    });
+    this.currentIndex = index;
+    this.$emit("goto", index);
+  }
+  onSliderDragStart() {
+    this.__initialX = this.currentSliderItem ? this.currentSliderItem.x : 0;
+    this.__distanceX = this.__initialX;
+  }
+  onSliderDragDrag(props) {
+    if (Math.abs(props.delta.y) > Math.abs(props.delta.x)) {
+      return;
+    }
+    this.__distanceX = this.__initialX + props.distance.x * this.$options.sensitivity;
+    this.getVisibleItems(this.__distanceX).forEach((item) => {
+      item.moveInstantly(this.__distanceX);
+    });
+  }
+  onSliderDragDrop(props) {
+    if (Math.abs(props.delta.y) > Math.abs(props.delta.x)) {
+      return;
+    }
+    let finalX = clamp(
+      inertiaFinalValue(this.__distanceX, props.delta.x * this.$options.dropSensitivity),
+      0,
+      this.getStateValueByMode(this.lastState.x)
+    );
+    const absoluteDifferencesBetweenDistanceAndState = this.states.map(
+      (state) => Math.abs(finalX - this.getStateValueByMode(state.x))
+    );
+    const minimumDifference = Math.min(...absoluteDifferencesBetweenDistanceAndState);
+    const closestIndex = absoluteDifferencesBetweenDistanceAndState.indexOf(minimumDifference);
+    if (this.$options.fitBounds) {
+      this.goTo(closestIndex, { withInstantMove: false });
+    } else {
+      if (this.$options.contain) {
+        finalX = Math.min(this.containMinState, finalX);
+        finalX = Math.max(this.containMaxState, finalX);
+      }
+      this.$children.SliderItem.forEach((item) => {
+        item.move(finalX);
+      });
+      this.currentIndex = closestIndex;
+    }
+  }
+  onWrapperFocus() {
+    this.hasFocus = true;
+  }
+  onWrapperBlur() {
+    this.hasFocus = false;
+  }
+  keyed({ LEFT, RIGHT, isDown }) {
+    if (this.hasFocus && isDown) {
+      if (LEFT) {
+        this.goPrev();
+      } else if (RIGHT) {
+        this.goNext();
+      }
+    }
+  }
+  prepareInvisibleItems() {
+    const state = this.states[this.currentIndex];
+    const nextItemsToPrepare = [];
+    const previousItemsToPrepare = [];
+    this.getInvisibleItems(this.getStateValueByMode(state.x)).forEach((item, i) => {
+      if (i > this.currentIndex) {
+        nextItemsToPrepare.push(item);
+        return;
+      }
+      if (i < this.currentIndex) {
+        previousItemsToPrepare.push(item);
+      }
+    });
+    nextItemsToPrepare.forEach((item) => {
+      const invisibleState = this.getStateWhereItemWillBeInvisible(item);
+      if (invisibleState) {
+        item.moveInstantly(this.getStateValueByMode(invisibleState.x));
+      }
+    });
+    previousItemsToPrepare.forEach((item) => {
+      const invisibleState = this.getStateWhereItemWillBeInvisible(item, { reversed: true });
+      if (invisibleState) {
+        item.moveInstantly(this.getStateValueByMode(invisibleState.x));
+      }
+    });
+  }
+  getStateWhereItemWillBeInvisible(item, { reversed = false } = {}) {
+    const visibleStates = this.states.filter(
+      (state) => item.willBeVisible(this.getStateValueByMode(state.x))
+    );
+    const firstVisibleState = visibleStates[0];
+    const lastVisibleState = visibleStates.at(-1);
+    const firstVisibleStateIndex = this.states.findIndex(
+      (state) => this.getStateValueByMode(state.x) === this.getStateValueByMode(firstVisibleState.x)
+    );
+    const lastVisibleStateIndex = this.states.findIndex((state) => state.x === lastVisibleState.x);
+    return reversed ? this.states[lastVisibleStateIndex + 1] : this.states[firstVisibleStateIndex - 1];
+  }
+  getVisibleItems(target) {
+    return this.$children.SliderItem.filter((item) => item.isVisible || item.willBeVisible(target));
+  }
+  getInvisibleItems(target) {
+    return this.$children.SliderItem.filter(
+      (item) => !item.isVisible && !item.willBeVisible(target)
+    );
+  }
+}
+__publicField(Slider, "config", {
+  name: "Slider",
+  refs: ["wrapper", "debug"],
+  emits: ["goto", "index"],
+  components: {
+    SliderItem,
+    SliderDrag
+  },
+  options: {
+    mode: { type: String, default: "left" },
+    fitBounds: Boolean,
+    contain: Boolean,
+    sensitivity: { type: Number, default: 1 },
+    dropSensitivity: { type: Number, default: 2 }
+  }
+});
+export {
+  Slider
+};

package/molecules/Slider/SliderBtn.cjs

@@ -1,8 +1,6 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __export = (target, all) => {
@@ -17,21 +15,20 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 
-// packages/ui/molecules/Slider/SliderBtn.js
+// packages/ui/molecules/Slider/SliderBtn.ts
 var SliderBtn_exports = {};
 __export(SliderBtn_exports, {
-  default: () => SliderBtn
+  SliderBtn: () => SliderBtn
 });
 module.exports = __toCommonJS(SliderBtn_exports);
-var import_AbstractSliderChild = __toESM(require("./AbstractSliderChild.cjs"), 1);
-var SliderBtn = class extends import_AbstractSliderChild.default {
+var import_AbstractSliderChild = require("./AbstractSliderChild.cjs");
+var SliderBtn = class extends import_AbstractSliderChild.AbstractSliderChild {
   update(index) {
     if (index === 0 && this.$options.prev || index === this.$parent.indexMax && this.$options.next) {
       this.$el.setAttribute("disabled", "");

package/molecules/Slider/SliderBtn.d.ts

@@ -1,39 +1,28 @@
-/**
- * @typedef {SliderBtn & {
- *   $parent: import('./Slider.js').default
- * }} SliderBtnInterface
- */
+import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';
+import { AbstractSliderChild } from './AbstractSliderChild.js';
+export interface SliderBtnProps extends BaseProps {
+    $options: {
+        prev: boolean;
+        next: boolean;
+    };
+}
 /**
  * SliderBtn class.
  */
-export default class SliderBtn extends AbstractSliderChild {
+export declare class SliderBtn<T extends BaseProps = BaseProps> extends AbstractSliderChild<T & SliderBtnProps> {
     /**
      * Config.
      */
-    static config: {
-        name: string;
-        options: {
-            prev: BooleanConstructor;
-            next: BooleanConstructor;
-        };
-    };
+    static config: BaseConfig;
     /**
      * Update attributes.
-     *
-     * @this    {SliderBtnInterface}
      * @param   {number} index
      * @returns {void}
      */
-    update(this: SliderBtnInterface, index: number): void;
+    update(index: number): void;
     /**
      * Go prev or next on click.
-     *
-     * @this    {SliderBtnInterface}
      * @returns {void}
      */
-    onClick(this: SliderBtnInterface): void;
+    onClick(): void;
 }
-export type SliderBtnInterface = SliderBtn & {
-    $parent: import('./Slider.js').default;
-};
-import AbstractSliderChild from "./AbstractSliderChild.js";