@studiometa/ui 0.2.3 → 0.2.4

package/molecules/Panel/Panel.js

@@ -1,117 +1 @@
-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;
-};
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
-import { transition, matrix } from "@studiometa/js-toolkit/utils";
-import Modal from "../Modal/Modal.js";
-const _Panel = class extends Modal {
-  get translateClass() {
-    var _a;
-    return (_a = _Panel.translateClasses[this.$options.position]) != null ? _a : _Panel.translateClasses[_Panel.config.options.position.default];
-  }
-  get containerOffset() {
-    const { offsetTop, offsetLeft, offsetWidth, offsetHeight } = this.$refs.container;
-    const store = {
-      top: {
-        translateY: (offsetTop + offsetHeight) * -1
-      },
-      right: {
-        translateX: window.innerWidth - offsetLeft + offsetWidth * 2
-      },
-      bottom: {
-        translateY: window.innerHeight - offsetTop + offsetHeight * 2
-      },
-      left: {
-        translateX: (offsetLeft + offsetWidth) * -1
-      }
-    };
-    return matrix(store[this.$options.position]);
-  }
-  open() {
-    var __superGet = (key) => super[key];
-    return __async(this, null, function* () {
-      if (this.isOpen) {
-        return Promise.resolve();
-      }
-      this.$refs.modal.classList.remove("pointer-events-none");
-      transition(this.$refs.container, {
-        from: {
-          transform: this.containerOffset
-        },
-        to: {
-          transform: "none"
-        }
-      }, "keep");
-      transition(this.$refs.overlay, {
-        from: "opacity-0"
-      });
-      return __superGet("open").call(this);
-    });
-  }
-  close() {
-    var __superGet = (key) => super[key];
-    return __async(this, null, function* () {
-      if (!this.isOpen || this.isClosing) {
-        return Promise.resolve();
-      }
-      this.isClosing = true;
-      this.$refs.modal.classList.add("pointer-events-none");
-      yield Promise.all([
-        transition(this.$refs.container, {
-          from: {
-            transform: "none"
-          },
-          to: {
-            transform: this.containerOffset
-          }
-        }, "keep"),
-        transition(this.$refs.overlay, {
-          to: "opacity-0"
-        }, "keep")
-      ]);
-      this.isClosing = false;
-      return __superGet("close").call(this);
-    });
-  }
-};
-let Panel = _Panel;
-__publicField(Panel, "config", {
-  name: "Panel",
-  options: {
-    position: {
-      type: String,
-      default: "left"
-    }
-  }
-});
-__publicField(Panel, "translateClasses", {
-  top: "-translate-y-full",
-  right: "translate-x-full",
-  bottom: "translate-y-full",
-  left: "-translate-x-full"
-});
-export {
-  Panel as default
-};
+import{transition as s,matrix as a}from"@studiometa/js-toolkit/utils";import l from"../Modal/Modal.js";class t extends l{static config={name:"Panel",options:{position:{type:String,default:"left"}}};static translateClasses={top:"-translate-y-full",right:"translate-x-full",bottom:"translate-y-full",left:"-translate-x-full"};get translateClass(){return t.translateClasses[this.$options.position]??t.translateClasses[t.config.options.position.default]}get containerOffset(){const{offsetTop:e,offsetLeft:o,offsetWidth:n,offsetHeight:i}=this.$refs.container,r={top:{translateY:(e+i)*-1},right:{translateX:window.innerWidth-o+n*2},bottom:{translateY:window.innerHeight-e+i*2},left:{translateX:(o+n)*-1}};return a(r[this.$options.position])}async open(){return this.isOpen?Promise.resolve():(this.$refs.modal.classList.remove("pointer-events-none"),s(this.$refs.container,{from:{transform:this.containerOffset},to:{transform:"none"}},"keep"),s(this.$refs.overlay,{from:"opacity-0"}),super.open())}async close(){return!this.isOpen||this.isClosing?Promise.resolve():(this.isClosing=!0,this.$refs.modal.classList.add("pointer-events-none"),await Promise.all([s(this.$refs.container,{from:{transform:"none"},to:{transform:this.containerOffset}},"keep"),s(this.$refs.overlay,{to:"opacity-0"},"keep")]),this.isClosing=!1,super.close())}}export{t as default};

package/molecules/Slider/AbstractSliderChild.cjs

@@ -5,27 +5,20 @@ 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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+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;
@@ -36,14 +29,12 @@ var AbstractSliderChild_exports = {};
 __export(AbstractSliderChild_exports, {
   default: () => AbstractSliderChild
 });
+module.exports = __toCommonJS(AbstractSliderChild_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
 var import_utils = require("@studiometa/js-toolkit/utils");
 var import_Slider = __toESM(require("./Slider.cjs"), 1);
 var AbstractSliderChild = class extends import_js_toolkit.Base {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "$parent");
-  }
+  $parent;
   mounted() {
     if (!(this.$parent instanceof import_Slider.default)) {
       throw new Error(`The \`${this.$options.name}\` component must be a direct child of a \`Slider\` component.`);
@@ -70,5 +61,4 @@ var AbstractSliderChild = class extends import_js_toolkit.Base {
 __publicField(AbstractSliderChild, "config", {
   name: "AbstractSliderChild"
 });
-module.exports = __toCommonJS(AbstractSliderChild_exports);
 if (module.exports.default) module.exports = module.exports.default;

package/molecules/Slider/AbstractSliderChild.d.ts

@@ -11,6 +11,10 @@ export default class AbstractSliderChild extends Base {
     static config: {
         name: string;
     };
+    /**
+     * @type {Slider}
+     */
+    $parent: Slider;
     /**
      * Listen to the `goto` event of the parent on mount.
      * @returns {void}
@@ -22,7 +26,7 @@ export default class AbstractSliderChild extends Base {
      * @this    {AbstractSliderChildInterface}
      * @returns {void}
      */
-    resized(): void;
+    resized(this: AbstractSliderChildInterface): void;
     /**
      * Remove the event listener.
      *
@@ -43,7 +47,7 @@ export default class AbstractSliderChild extends Base {
      * @param   {number} index The new active index.
      * @returns {void}
      */
-    update(index: number): void;
+    update(this: AbstractSliderChildInterface, index: number): void;
 }
 export type AbstractSliderChildInterface = AbstractSliderChild & {
     $parent: Slider;

package/molecules/Slider/AbstractSliderChild.js

@@ -1,43 +1 @@
-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 { nextFrame } from "@studiometa/js-toolkit/utils";
-import Slider from "./Slider.js";
-class AbstractSliderChild extends Base {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "$parent");
-  }
-  mounted() {
-    if (!(this.$parent instanceof Slider)) {
-      throw new Error(`The \`${this.$options.name}\` component must be a direct child of a \`Slider\` component.`);
-    }
-    this.$parent.$on("index", this);
-  }
-  resized() {
-    nextFrame(() => {
-      this.update(this.$parent.currentIndex);
-    });
-  }
-  destroyed() {
-    this.$parent.$off("index", this);
-  }
-  handleEvent(event) {
-    if (event.type === "index") {
-      this.update(event.detail[0]);
-    }
-  }
-  update(index) {
-    throw new Error(`The \`AbstractSliderChild.update(${index})\` method must be implemented.`);
-  }
-}
-__publicField(AbstractSliderChild, "config", {
-  name: "AbstractSliderChild"
-});
-export {
-  AbstractSliderChild as default
-};
+import{Base as t}from"@studiometa/js-toolkit";import{nextFrame as i}from"@studiometa/js-toolkit/utils";import r from"./Slider.js";class d extends t{static config={name:"AbstractSliderChild"};$parent;mounted(){if(!(this.$parent instanceof r))throw new Error(`The \`${this.$options.name}\` component must be a direct child of a \`Slider\` component.`);this.$parent.$on("index",this)}resized(){i(()=>{this.update(this.$parent.currentIndex)})}destroyed(){this.$parent.$off("index",this)}handleEvent(e){e.type==="index"&&this.update(e.detail[0])}update(e){throw new Error(`The \`AbstractSliderChild.update(${e})\` method must be implemented.`)}}export{d as default};

package/molecules/Slider/Slider.cjs

@@ -5,27 +5,20 @@ 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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+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;
@@ -36,18 +29,15 @@ var Slider_exports = {};
 __export(Slider_exports, {
   default: () => Slider
 });
+module.exports = __toCommonJS(Slider_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
 var import_utils = require("@studiometa/js-toolkit/utils");
 var import_SliderDrag = __toESM(require("./SliderDrag.cjs"), 1);
 var import_SliderItem = __toESM(require("./SliderItem.cjs"), 1);
 var Slider = class extends import_js_toolkit.Base {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "__distanceX", 0);
-    __publicField(this, "__initialX", 0);
-    __publicField(this, "__currentIndex", 0);
-    __publicField(this, "states", []);
-  }
+  __distanceX = 0;
+  __initialX = 0;
+  __currentIndex = 0;
   get currentIndex() {
     return this.__currentIndex;
   }
@@ -57,6 +47,7 @@ var Slider = class extends import_js_toolkit.Base {
     this.__currentIndex = value;
     this.currentSliderItem.activate();
   }
+  states = [];
   get currentState() {
     return this.states[this.currentIndex];
   }
@@ -97,7 +88,7 @@ var Slider = class extends import_js_toolkit.Base {
     });
   }
   getStateValueByMode(state, mode) {
-    return state[mode != null ? mode : this.$options.mode];
+    return state[mode ?? this.$options.mode];
   }
   mounted() {
     this.states = this.getStates();
@@ -236,5 +227,4 @@ __publicField(Slider, "config", {
     sensitivity: { type: Number, default: 1 }
   }
 });
-module.exports = __toCommonJS(Slider_exports);
 if (module.exports.default) module.exports = module.exports.default;

package/molecules/Slider/Slider.d.ts

@@ -120,7 +120,7 @@ export default class Slider extends Base {
      * @todo save value for every available modes to avoid recalculation when switching
      * @this {SliderInterface}
      */
-    getStates(): {
+    getStates(this: SliderInterface): {
         x: {
             left: number;
             center: number;
@@ -135,7 +135,7 @@ export default class Slider extends Base {
      * @param   {SliderOptions['mode']} [mode]
      * @returns {number}
      */
-    getStateValueByMode(state: SliderState['x'], mode?: SliderOptions['mode']): number;
+    getStateValueByMode(this: SliderInterface, state: SliderState['x'], mode?: SliderOptions['mode']): number;
     /**
      * Mounted hook.
      *
@@ -166,7 +166,7 @@ export default class Slider extends Base {
      * @param {number} index
      * @returns {void}
      */
-    goTo(index: number): void;
+    goTo(this: SliderInterface, index: number): void;
     /**
      * Listen to the Draggable `start` event.
      *
@@ -187,7 +187,7 @@ export default class Slider extends Base {
      * @param   {import('@studiometa/js-toolkit/services/drag').DragServiceProps} props
      * @returns {void}
      */
-    onSliderDragDrop(props: import('@studiometa/js-toolkit/services/drag').DragServiceProps): void;
+    onSliderDragDrop(this: SliderInterface, props: import('@studiometa/js-toolkit/services/drag').DragServiceProps): void;
     /**
      * Prepare invisible items.
      * @returns {void}
@@ -209,7 +209,7 @@ export default class Slider extends Base {
      * @param   {number} target
      * @returns {SliderItem[]}
      */
-    getVisibleItems(target: number): SliderItem[];
+    getVisibleItems(this: SliderInterface, target: number): SliderItem[];
     /**
      * Get the invisible slides for the given position.
      *
@@ -217,7 +217,7 @@ export default class Slider extends Base {
      * @param   {number} target
      * @returns {SliderItem[]}
      */
-    getInvisibleItems(target: number): SliderItem[];
+    getInvisibleItems(this: SliderInterface, target: number): SliderItem[];
 }
 export type SliderModes = 'left' | 'center' | 'right';
 export type SliderState = {

package/molecules/Slider/Slider.js

@@ -1,209 +1 @@
-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 } 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", []);
-  }
-  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[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 } = this.$refs;
-    const originRect = wrapper.getBoundingClientRect();
-    const origins = {
-      left: originRect.left,
-      center: originRect.x + originRect.width / 2,
-      right: originRect.x + originRect.width
-    };
-    return this.$children.SliderItem.map((item) => {
-      return {
-        x: {
-          left: (item.rect.x - origins.left) * -1,
-          center: (item.rect.x + item.rect.width / 2 - origins.center) * -1,
-          right: (item.rect.x + item.rect.width - origins.right) * -1
-        }
-      };
-    });
-  }
-  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) {
-    if (index < 0 || index > this.indexMax) {
-      throw new Error("Index out of bound.");
-    }
-    let state = this.getStateValueByMode(this.states[index].x);
-    if (this.$options.contain) {
-      if (this.$children.SliderItem[this.indexMax].willBeFullyVisible(state)) {
-        state = this.getStateValueByMode(this.lastState.x, "right");
-      } else if (this.$children.SliderItem[0].willBeFullyVisible(state)) {
-        state = this.getStateValueByMode(this.firstState.x, "left");
-      }
-    }
-    const itemsToMove = this.getVisibleItems(state);
-    if (index < this.currentIndex) {
-      itemsToMove.reverse();
-    }
-    itemsToMove.forEach((item) => {
-      nextFrame(() => item.move(state));
-    });
-    this.currentIndex = index;
-    this.$emit("goto", index);
-  }
-  onSliderDragStart() {
-    this.__initialX = this.currentSliderItem ? this.currentSliderItem.x : 0;
-  }
-  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.sensitivity), 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.findIndex((number) => number === minimumDifference);
-    if (this.$options.fitBounds) {
-      this.goTo(closestIndex);
-    } 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;
-    }
-  }
-  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[visibleStates.length - 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"],
-  emits: ["goto", "index"],
-  components: {
-    SliderItem,
-    SliderDrag
-  },
-  options: {
-    mode: { type: String, default: "left" },
-    fitBounds: Boolean,
-    contain: Boolean,
-    sensitivity: { type: Number, default: 1 }
-  }
-});
-export {
-  Slider as default
-};
+import{Base as o}from"@studiometa/js-toolkit";import{clamp as d,inertiaFinalValue as c,nextFrame as h}from"@studiometa/js-toolkit/utils";import u from"./SliderDrag.js";import x from"./SliderItem.js";class I extends o{static config={name:"Slider",refs:["wrapper"],emits:["goto","index"],components:{SliderItem:x,SliderDrag:u},options:{mode:{type:String,default:"left"},fitBounds:Boolean,contain:Boolean,sensitivity:{type:Number,default:1}}};__distanceX=0;__initialX=0;__currentIndex=0;get currentIndex(){return this.__currentIndex}set currentIndex(e){this.currentSliderItem.disactivate(),this.$emit("index",e),this.__currentIndex=e,this.currentSliderItem.activate()}states=[];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:e}=this.$refs,t=e.getBoundingClientRect(),s={left:t.left,center:t.x+t.width/2,right:t.x+t.width};return this.$children.SliderItem.map(i=>({x:{left:(i.rect.x-s.left)*-1,center:(i.rect.x+i.rect.width/2-s.center)*-1,right:(i.rect.x+i.rect.width-s.right)*-1}}))}getStateValueByMode(e,t){return e[t??this.$options.mode]}mounted(){this.states=this.getStates(),this.prepareInvisibleItems(),this.goTo(this.currentIndex)}resized(){h(()=>{this.states=this.getStates(),h(()=>{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(e){if(e<0||e>this.indexMax)throw new Error("Index out of bound.");let t=this.getStateValueByMode(this.states[e].x);this.$options.contain&&(this.$children.SliderItem[this.indexMax].willBeFullyVisible(t)?t=this.getStateValueByMode(this.lastState.x,"right"):this.$children.SliderItem[0].willBeFullyVisible(t)&&(t=this.getStateValueByMode(this.firstState.x,"left")));const s=this.getVisibleItems(t);e<this.currentIndex&&s.reverse(),s.forEach(i=>{h(()=>i.move(t))}),this.currentIndex=e,this.$emit("goto",e)}onSliderDragStart(){this.__initialX=this.currentSliderItem?this.currentSliderItem.x:0}onSliderDragDrag(e){Math.abs(e.delta.y)>Math.abs(e.delta.x)||(this.__distanceX=this.__initialX+e.distance.x*this.$options.sensitivity,this.getVisibleItems(this.__distanceX).forEach(t=>{t.moveInstantly(this.__distanceX)}))}onSliderDragDrop(e){if(Math.abs(e.delta.y)>Math.abs(e.delta.x))return;let t=d(c(this.__distanceX,e.delta.x*this.$options.sensitivity),0,this.getStateValueByMode(this.lastState.x));const s=this.states.map(n=>Math.abs(t-this.getStateValueByMode(n.x))),i=Math.min(...s),r=s.findIndex(n=>n===i);this.$options.fitBounds?this.goTo(r):(this.$options.contain&&(t=Math.min(this.containMinState,t),t=Math.max(this.containMaxState,t)),this.$children.SliderItem.forEach(n=>{n.move(t)}),this.currentIndex=r)}prepareInvisibleItems(){const e=this.states[this.currentIndex],t=[],s=[];this.getInvisibleItems(this.getStateValueByMode(e.x)).forEach((i,r)=>{if(r>this.currentIndex){t.push(i);return}r<this.currentIndex&&s.push(i)}),t.forEach(i=>{const r=this.getStateWhereItemWillBeInvisible(i);r&&i.moveInstantly(this.getStateValueByMode(r.x))}),s.forEach(i=>{const r=this.getStateWhereItemWillBeInvisible(i,{reversed:!0});r&&i.moveInstantly(this.getStateValueByMode(r.x))})}getStateWhereItemWillBeInvisible(e,{reversed:t=!1}={}){const s=this.states.filter(a=>e.willBeVisible(this.getStateValueByMode(a.x))),i=s[0],r=s[s.length-1],n=this.states.findIndex(a=>this.getStateValueByMode(a.x)===this.getStateValueByMode(i.x)),l=this.states.findIndex(a=>a.x===r.x);return t?this.states[l+1]:this.states[n-1]}getVisibleItems(e){return this.$children.SliderItem.filter(t=>t.isVisible||t.willBeVisible(e))}getInvisibleItems(e){return this.$children.SliderItem.filter(t=>!t.isVisible&&!t.willBeVisible(e))}}export{I as default};

package/molecules/Slider/SliderBtn.cjs

@@ -5,27 +5,20 @@ 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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+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;
@@ -36,6 +29,7 @@ var SliderBtn_exports = {};
 __export(SliderBtn_exports, {
   default: () => SliderBtn
 });
+module.exports = __toCommonJS(SliderBtn_exports);
 var import_AbstractSliderChild = __toESM(require("./AbstractSliderChild.cjs"), 1);
 var SliderBtn = class extends import_AbstractSliderChild.default {
   update(index) {
@@ -61,5 +55,4 @@ __publicField(SliderBtn, "config", {
     next: Boolean
   }
 });
-module.exports = __toCommonJS(SliderBtn_exports);
 if (module.exports.default) module.exports = module.exports.default;

package/molecules/Slider/SliderBtn.d.ts

@@ -23,7 +23,7 @@ export default class SliderBtn extends AbstractSliderChild {
      * @this    {SliderBtnInterface}
      * @returns {void}
      */
-    onClick(): void;
+    onClick(this: SliderBtnInterface): void;
 }
 export type SliderBtnInterface = SliderBtn & {
     $parent: import('./Slider.js').default;