@studiometa/ui 1.0.0-alpha.0 → 1.0.0-alpha.11

package/molecules/Panel/Panel.cjs

@@ -1,137 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-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 to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// packages/ui/molecules/Panel/Panel.ts
-var Panel_exports = {};
-__export(Panel_exports, {
-  Panel: () => Panel
-});
-module.exports = __toCommonJS(Panel_exports);
-var import_utils = require("@studiometa/js-toolkit/utils");
-var import_Modal = require("../Modal/index.cjs");
-var DEFAULT_POSITION = "left";
-var Panel = class _Panel extends import_Modal.Modal {
-  /**
-   * Config.
-   */
-  static config = {
-    name: "Panel",
-    options: {
-      position: {
-        type: String,
-        default: DEFAULT_POSITION
-      }
-    }
-  };
-  static translateClasses = {
-    top: "-translate-y-full",
-    right: "translate-x-full",
-    bottom: "translate-y-full",
-    left: "-translate-x-full"
-  };
-  isClosing = false;
-  /**
-   * Get the translation class.
-   * @returns {string}
-   */
-  get translateClass() {
-    return _Panel.translateClasses[this.$options.position] ?? _Panel.translateClasses[DEFAULT_POSITION];
-  }
-  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 (0, import_utils.matrix)(store[this.$options.position]);
-  }
-  /**
-   * Animate before opening.
-   * @this {PanelInterface}
-   * @returns {Promise<void>}
-   */
-  async open() {
-    if (this.isOpen) {
-      return Promise.resolve();
-    }
-    this.$refs.modal.classList.remove("pointer-events-none");
-    (0, import_utils.transition)(
-      this.$refs.container,
-      {
-        from: {
-          transform: this.containerOffset
-        },
-        to: {
-          transform: "none"
-        }
-      },
-      "keep"
-    );
-    (0, import_utils.transition)(this.$refs.overlay, {
-      from: "opacity-0"
-    });
-    return super.open();
-  }
-  /**
-   * Animate before closing.
-   * @this {PanelInterface}
-   * @returns {Promise<void>}
-   */
-  async close() {
-    if (!this.isOpen || this.isClosing) {
-      return Promise.resolve();
-    }
-    this.isClosing = true;
-    this.$refs.modal.classList.add("pointer-events-none");
-    await Promise.all([
-      (0, import_utils.transition)(
-        this.$refs.container,
-        {
-          from: {
-            transform: "none"
-          },
-          to: {
-            transform: this.containerOffset
-          }
-        },
-        "keep"
-      ),
-      (0, import_utils.transition)(
-        this.$refs.overlay,
-        {
-          to: "opacity-0"
-        },
-        "keep"
-      )
-    ]);
-    this.isClosing = false;
-    return super.close();
-  }
-};
-if (module.exports.default) module.exports = module.exports.default;
-//# sourceMappingURL=Panel.cjs.map

package/molecules/Panel/Panel.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../packages/ui/molecules/Panel/Panel.ts"],
-  "sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { transition, matrix } from '@studiometa/js-toolkit/utils';\nimport { Modal } from '../Modal/index.js';\n\nexport interface PanelProps extends BaseProps {\n  $options: {\n    position: 'top' | 'right' | 'bottom' | 'left';\n  };\n}\n\nconst DEFAULT_POSITION = 'left';\n\n/**\n * Panel class.\n */\nexport class Panel<T extends BaseProps = BaseProps> extends Modal<T & PanelProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Panel',\n    options: {\n      position: {\n        type: String,\n        default: DEFAULT_POSITION,\n      },\n    },\n  };\n\n  static translateClasses = {\n    top: '-translate-y-full',\n    right: 'translate-x-full',\n    bottom: 'translate-y-full',\n    left: '-translate-x-full',\n  };\n\n  isClosing = false;\n\n  /**\n   * Get the translation class.\n   * @returns {string}\n   */\n  get translateClass() {\n    return (\n      Panel.translateClasses[this.$options.position] ?? Panel.translateClasses[DEFAULT_POSITION]\n    );\n  }\n\n  get containerOffset() {\n    const { offsetTop, offsetLeft, offsetWidth, offsetHeight } = this.$refs.container;\n\n    const store = {\n      top: {\n        translateY: (offsetTop + offsetHeight) * -1,\n      },\n      right: {\n        translateX: window.innerWidth - offsetLeft + offsetWidth * 2,\n      },\n      bottom: {\n        translateY: window.innerHeight - offsetTop + offsetHeight * 2,\n      },\n      left: {\n        translateX: (offsetLeft + offsetWidth) * -1,\n      },\n    };\n\n    return matrix(store[this.$options.position]);\n  }\n\n  /**\n   * Animate before opening.\n   * @this {PanelInterface}\n   * @returns {Promise<void>}\n   */\n  async open() {\n    if (this.isOpen) {\n      return Promise.resolve();\n    }\n\n    this.$refs.modal.classList.remove('pointer-events-none');\n    transition(\n      this.$refs.container,\n      {\n        from: {\n          transform: this.containerOffset,\n        },\n        to: {\n          transform: 'none',\n        },\n      },\n      'keep',\n    );\n    transition(this.$refs.overlay, {\n      from: 'opacity-0',\n    });\n\n    return super.open();\n  }\n\n  /**\n   * Animate before closing.\n   * @this {PanelInterface}\n   * @returns {Promise<void>}\n   */\n  async close() {\n    if (!this.isOpen || this.isClosing) {\n      return Promise.resolve();\n    }\n\n    this.isClosing = true;\n\n    this.$refs.modal.classList.add('pointer-events-none');\n    await Promise.all([\n      transition(\n        this.$refs.container,\n        {\n          from: {\n            transform: 'none',\n          },\n          to: {\n            transform: this.containerOffset,\n          },\n        },\n        'keep',\n      ),\n      transition(\n        this.$refs.overlay,\n        {\n          to: 'opacity-0',\n        },\n        'keep',\n      ),\n    ]);\n\n    this.isClosing = false;\n\n    return super.close();\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAmC;AACnC,mBAAsB;AAQtB,IAAM,mBAAmB;AAKlB,IAAM,QAAN,MAAM,eAA+C,mBAAsB;AAAA;AAAA;AAAA;AAAA,EAIhF,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,SAAS;AAAA,MACP,UAAU;AAAA,QACR,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA,EAEA,OAAO,mBAAmB;AAAA,IACxB,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,EACR;AAAA,EAEA,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,EAMZ,IAAI,iBAAiB;AACnB,WACE,OAAM,iBAAiB,KAAK,SAAS,QAAQ,KAAK,OAAM,iBAAiB,gBAAgB;AAAA,EAE7F;AAAA,EAEA,IAAI,kBAAkB;AACpB,UAAM,EAAE,WAAW,YAAY,aAAa,aAAa,IAAI,KAAK,MAAM;AAExE,UAAM,QAAQ;AAAA,MACZ,KAAK;AAAA,QACH,aAAa,YAAY,gBAAgB;AAAA,MAC3C;AAAA,MACA,OAAO;AAAA,QACL,YAAY,OAAO,aAAa,aAAa,cAAc;AAAA,MAC7D;AAAA,MACA,QAAQ;AAAA,QACN,YAAY,OAAO,cAAc,YAAY,eAAe;AAAA,MAC9D;AAAA,MACA,MAAM;AAAA,QACJ,aAAa,aAAa,eAAe;AAAA,MAC3C;AAAA,IACF;AAEA,eAAO,qBAAO,MAAM,KAAK,SAAS,QAAQ,CAAC;AAAA,EAC7C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,MAAM,OAAO;AACX,QAAI,KAAK,QAAQ;AACf,aAAO,QAAQ,QAAQ;AAAA,IACzB;AAEA,SAAK,MAAM,MAAM,UAAU,OAAO,qBAAqB;AACvD;AAAA,MACE,KAAK,MAAM;AAAA,MACX;AAAA,QACE,MAAM;AAAA,UACJ,WAAW,KAAK;AAAA,QAClB;AAAA,QACA,IAAI;AAAA,UACF,WAAW;AAAA,QACb;AAAA,MACF;AAAA,MACA;AAAA,IACF;AACA,iCAAW,KAAK,MAAM,SAAS;AAAA,MAC7B,MAAM;AAAA,IACR,CAAC;AAED,WAAO,MAAM,KAAK;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,MAAM,QAAQ;AACZ,QAAI,CAAC,KAAK,UAAU,KAAK,WAAW;AAClC,aAAO,QAAQ,QAAQ;AAAA,IACzB;AAEA,SAAK,YAAY;AAEjB,SAAK,MAAM,MAAM,UAAU,IAAI,qBAAqB;AACpD,UAAM,QAAQ,IAAI;AAAA,UAChB;AAAA,QACE,KAAK,MAAM;AAAA,QACX;AAAA,UACE,MAAM;AAAA,YACJ,WAAW;AAAA,UACb;AAAA,UACA,IAAI;AAAA,YACF,WAAW,KAAK;AAAA,UAClB;AAAA,QACF;AAAA,QACA;AAAA,MACF;AAAA,UACA;AAAA,QACE,KAAK,MAAM;AAAA,QACX;AAAA,UACE,IAAI;AAAA,QACN;AAAA,QACA;AAAA,MACF;AAAA,IACF,CAAC;AAED,SAAK,YAAY;AAEjB,WAAO,MAAM,MAAM;AAAA,EACrB;AACF;",
-  "names": []
-}

package/molecules/Panel/index.cjs

@@ -1,21 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-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 to;
-};
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// packages/ui/molecules/Panel/index.ts
-var Panel_exports = {};
-module.exports = __toCommonJS(Panel_exports);
-__reExport(Panel_exports, require("./Panel.cjs"), module.exports);
-if (module.exports.default) module.exports = module.exports.default;
-//# sourceMappingURL=index.cjs.map

package/molecules/Panel/index.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../packages/ui/molecules/Panel/index.ts"],
-  "sourcesContent": ["export * from './Panel.js';\n"],
-  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,0BAAc,wBAAd;",
-  "names": []
-}

package/molecules/Slider/AbstractSliderChild.cjs

@@ -1,88 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-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 to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// packages/ui/molecules/Slider/AbstractSliderChild.ts
-var AbstractSliderChild_exports = {};
-__export(AbstractSliderChild_exports, {
-  AbstractSliderChild: () => 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 = require("./Slider.cjs");
-var AbstractSliderChild = class extends import_js_toolkit.Base {
-  /**
-   * Config.
-   */
-  static config = {
-    name: "AbstractSliderChild"
-  };
-  /**
-   * Listen to the `goto` event of the parent on mount.
-   */
-  mounted() {
-    if (!(this.$parent instanceof import_Slider.Slider)) {
-      throw new Error(
-        `The \`${this.$options.name}\` component must be a direct child of a \`Slider\` component.`
-      );
-    }
-    this.$parent.$on("index", this);
-  }
-  /**
-   * Trigger update on resize.
-   */
-  resized() {
-    (0, import_utils.nextFrame)(() => {
-      this.update(this.$parent.currentIndex);
-    });
-  }
-  /**
-   * Remove the event listener.
-   */
-  destroyed() {
-    this.$parent.$off("index", this);
-  }
-  /**
-   * Dispatch event.
-   * @param   {CustomEvent} event
-   * @returns {void}
-   */
-  handleEvent(event) {
-    if (event.type === "index") {
-      import_utils.domScheduler.read(() => {
-        const callback = this.update(event.detail[0]);
-        if ((0, import_utils.isFunction)(callback)) {
-          import_utils.domScheduler.write(() => {
-            callback();
-          });
-        }
-      });
-    }
-  }
-  // eslint-disable-next-line jsdoc/require-returns-check
-  /**
-   * Update the child component with the given index.
-   * @param   {number} index The new active index.
-   * @returns {void|(()=>void)}
-   */
-  update(index) {
-    throw new Error(`The \`AbstractSliderChild.update(${index})\` method must be implemented.`);
-  }
-};
-if (module.exports.default) module.exports = module.exports.default;
-//# sourceMappingURL=AbstractSliderChild.cjs.map

package/molecules/Slider/AbstractSliderChild.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../packages/ui/molecules/Slider/AbstractSliderChild.ts"],
-  "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"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAqB;AAErB,mBAAoD;AACpD,oBAAuB;AAShB,IAAM,sBAAN,cACG,uBAEV;AAAA;AAAA;AAAA;AAAA,EAIE,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,EACR;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,QAAI,EAAE,KAAK,mBAAmB,uBAAS;AACrC,YAAM,IAAI;AAAA,QACR,SAAS,KAAK,SAAS,IAAI;AAAA,MAC7B;AAAA,IACF;AAEA,SAAK,QAAQ,IAAI,SAAS,IAAI;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,gCAAU,MAAM;AACd,WAAK,OAAO,KAAK,QAAQ,YAAY;AAAA,IACvC,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY;AACV,SAAK,QAAQ,KAAK,SAAS,IAAI;AAAA,EACjC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,YAAY,OAAO;AACjB,QAAI,MAAM,SAAS,SAAS;AAC1B,gCAAa,KAAK,MAAM;AACtB,cAAM,WAAW,KAAK,OAAO,MAAM,OAAO,CAAC,CAAC;AAC5C,gBAAI,yBAAW,QAAQ,GAAG;AACxB,oCAAa,MAAM,MAAM;AAEvB,qBAAS;AAAA,UACX,CAAC;AAAA,QACH;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,OAAO,OAA4B;AACjC,UAAM,IAAI,MAAM,oCAAoC,KAAK,iCAAiC;AAAA,EAC5F;AACF;",
-  "names": []
-}

package/molecules/Slider/Slider.cjs

@@ -1,404 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-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 to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// packages/ui/molecules/Slider/Slider.ts
-var Slider_exports = {};
-__export(Slider_exports, {
-  Slider: () => 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 = require("./SliderDrag.cjs");
-var import_SliderItem = require("./SliderItem.cjs");
-var Slider = class extends import_js_toolkit.Base {
-  /**
-   * Config.
-   */
-  static config = {
-    name: "Slider",
-    refs: ["wrapper", "debug"],
-    emits: ["goto", "index"],
-    components: {
-      SliderItem: import_SliderItem.SliderItem,
-      SliderDrag: import_SliderDrag.SliderDrag
-    },
-    options: {
-      mode: { type: String, default: "left" },
-      fitBounds: Boolean,
-      contain: Boolean,
-      sensitivity: { type: Number, default: 1 },
-      dropSensitivity: { type: Number, default: 2 }
-    }
-  };
-  __distanceX = 0;
-  __initialX = 0;
-  /**
-   * Index of the current active slide.
-   */
-  __currentIndex = 0;
-  __isDragging = false;
-  /**
-   * Get the current index.
-   */
-  get currentIndex() {
-    return this.__currentIndex;
-  }
-  /**
-   * Set the current index and emit the `index` event.
-   */
-  set currentIndex(value) {
-    this.currentSliderItem.disactivate();
-    this.$emit("index", value);
-    this.__currentIndex = value;
-    this.currentSliderItem.activate();
-  }
-  /**
-   * Store all the states.
-   */
-  states = [];
-  /**
-   * Origins for the different modes.
-   */
-  origins = {
-    left: 0,
-    center: 0,
-    right: 0
-  };
-  /**
-   * Wether or not the wrapper is focused.
-   * @type {boolean}
-   */
-  hasFocus = false;
-  /**
-   * Get the current state.
-   */
-  get currentState() {
-    return this.states[this.currentIndex];
-  }
-  /**
-   * Get the first state.
-   */
-  get firstState() {
-    return this.states[0];
-  }
-  /**
-   * Get the last state.
-   */
-  get lastState() {
-    return this.states.at(-1);
-  }
-  /**
-   * Get the minimal contain state value.
-   */
-  get containMinState() {
-    return this.getStateValueByMode(this.firstState.x, "left");
-  }
-  /**
-   * Get the maximal contain state value.
-   */
-  get containMaxState() {
-    return this.getStateValueByMode(this.lastState.x, "right");
-  }
-  /**
-   * Get the last index.
-   */
-  get indexMax() {
-    return this.$children.SliderItem.length - 1;
-  }
-  /**
-   * Get the current SliderItem
-   */
-  get currentSliderItem() {
-    return this.$children.SliderItem[this.currentIndex];
-  }
-  /**
-   * Get the states for each SliderItem.
-   */
-  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" && import_utils.isDev) {
-        console.warn(
-          `[${this.$id}]`,
-          "The `center` mode is not yet compatible with the `contain` mode."
-        );
-      }
-    }
-    return states;
-  }
-  /**
-   * Get an origin by mode.
-   */
-  getOriginByMode(mode) {
-    return this.origins[mode ?? this.$options.mode];
-  }
-  /**
-   * Get a state value according to the given mode.
-   */
-  getStateValueByMode(state, mode) {
-    return state[mode ?? this.$options.mode];
-  }
-  /**
-   * Mounted hook.
-   */
-  mounted() {
-    this.states = this.getStates();
-    this.setAccessibilityAttributes();
-    this.prepareInvisibleItems();
-    this.goTo(this.currentIndex);
-  }
-  /**
-   * Resized hook.
-   */
-  resized() {
-    (0, import_utils.nextFrame)(() => {
-      this.states = this.getStates();
-      (0, import_utils.nextFrame)(() => {
-        this.prepareInvisibleItems();
-        this.goTo(this.currentIndex);
-      });
-    });
-  }
-  /**
-   * Set accessibility attributes for the component
-   */
-  setAccessibilityAttributes() {
-    this.$el.setAttribute("role", "group");
-    this.$el.setAttribute("aria-roledescription", "carousel");
-  }
-  /**
-   * Go to the next slide.
-   */
-  goNext() {
-    if (this.currentIndex + 1 > this.indexMax) {
-      return;
-    }
-    this.goTo(this.currentIndex + 1);
-  }
-  /**
-   * Go to the previous slide.
-   */
-  goPrev() {
-    if (this.currentIndex - 1 < 0) {
-      return;
-    }
-    this.goTo(this.currentIndex - 1);
-  }
-  /**
-   * Go to the given index.
-   */
-  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);
-      }
-      (0, import_utils.nextFrame)(() => item.move(state));
-    });
-    invisibleItemsToMoveInstantly.forEach((item) => {
-      item.moveInstantly(state);
-    });
-    this.currentIndex = index;
-    this.$emit("goto", index);
-  }
-  /**
-   * Listen to the Draggable `start` event.
-   */
-  onSliderDragStart() {
-    this.__initialX = this.currentSliderItem ? this.currentSliderItem.x : 0;
-    this.__distanceX = this.__initialX;
-    this.__isDragging = true;
-  }
-  /**
-   * Listen to the Draggable `drag` event.
-   */
-  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);
-    });
-  }
-  /**
-   * Listen to the Draggable `drop` event and find the new active slide.
-   */
-  onSliderDragDrop(props) {
-    if (!this.__isDragging) {
-      return;
-    }
-    this.__isDragging = false;
-    if (Math.abs(props.delta.y) > Math.abs(props.delta.x)) {
-      return;
-    }
-    let finalX = (0, import_utils.clamp)(
-      (0, import_utils.inertiaFinalValue)(this.__distanceX, props.delta.x * this.$options.dropSensitivity),
-      this.getStateValueByMode(this.firstState.x),
-      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;
-    }
-  }
-  /**
-   * Enable focus.
-   */
-  onWrapperFocus() {
-    this.hasFocus = true;
-  }
-  /**
-   * Disable focus.
-   */
-  onWrapperBlur() {
-    this.hasFocus = false;
-  }
-  /**
-   * Go prev or next when focus is on the wrapper and pressing arrow keys.
-   */
-  keyed({ LEFT, RIGHT, isDown }) {
-    if (this.hasFocus && isDown) {
-      if (LEFT) {
-        this.goPrev();
-      } else if (RIGHT) {
-        this.goNext();
-      }
-    }
-  }
-  /**
-   * Prepare invisible items.
-   */
-  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));
-      }
-    });
-  }
-  /**
-   * Get the state where the given item will be visible.
-   */
-  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];
-  }
-  /**
-   * Get the visible slides for the given position.
-   */
-  getVisibleItems(target) {
-    return this.$children.SliderItem.filter((item) => item.isVisible || item.willBeVisible(target));
-  }
-  /**
-   * Get the invisible slides for the given position.
-   */
-  getInvisibleItems(target) {
-    return this.$children.SliderItem.filter(
-      (item) => !item.isVisible && !item.willBeVisible(target)
-    );
-  }
-};
-if (module.exports.default) module.exports = module.exports.default;
-//# sourceMappingURL=Slider.cjs.map