@studiometa/ui 1.0.0-alpha.1 → 1.0.0-alpha.3

package/molecules/Modal/Modal.cjs

@@ -1,219 +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/Modal/Modal.ts
-var Modal_exports = {};
-__export(Modal_exports, {
-  Modal: () => Modal
-});
-module.exports = __toCommonJS(Modal_exports);
-var import_js_toolkit = require("@studiometa/js-toolkit");
-var import_utils = require("@studiometa/js-toolkit/utils");
-var Modal = class extends import_js_toolkit.Base {
-  /**
-   * Config.
-   */
-  static config = {
-    name: "Modal",
-    refs: ["close[]", "container", "content", "modal", "open[]", "overlay"],
-    emits: ["open", "close"],
-    options: {
-      move: String,
-      autofocus: { type: String, default: "[autofocus]" },
-      styles: {
-        type: Object,
-        default: () => ({
-          modal: {
-            closed: {
-              opacity: "0",
-              pointerEvents: "none",
-              visibility: "hidden"
-            }
-          }
-        })
-      },
-      scrollLock: {
-        type: Boolean,
-        default: true
-      }
-    }
-  };
-  /**
-   * Wether the modal is open or not.
-   */
-  isOpen = false;
-  /**
-   * @private
-   */
-  __refsBackup;
-  /**
-   * @private
-   */
-  __refModalPlaceholder;
-  /**
-   * @private
-   */
-  __refModalParentBackup;
-  /**
-   * @private
-   */
-  __refModalUnbindGetRefFilter;
-  /**
-   * Open the modal on click on the `open` ref.
-   */
-  get onOpenClick() {
-    return this.open;
-  }
-  /**
-   * Close the modal on click on the `close` ref.
-   */
-  get onCloseClick() {
-    return this.close;
-  }
-  /**
-   * Close the modal on click on the `overlay` ref.
-   * @returns {Function} The component's `close` method.
-   */
-  get onOverlayClick() {
-    return this.close;
-  }
-  /**
-   * Initialize the component's behaviours.
-   */
-  mounted() {
-    this.isOpen = false;
-    this.close();
-    if (this.$options.move) {
-      const target = document.querySelector(this.$options.move) || document.body;
-      this.__refsBackup = this.$refs;
-      this.__refModalPlaceholder = document.createComment("");
-      this.__refModalParentBackup = this.$refs.modal.parentElement || this.$el;
-      this.__refModalParentBackup.insertBefore(this.__refModalPlaceholder, this.$refs.modal);
-      target.append(this.$refs.modal);
-    }
-  }
-  /**
-   * Add the moved refs to `this.$refs` when using the `move` options.
-   */
-  get $refs() {
-    const $refs = super.$refs;
-    if (this.$options.move && this.__refsBackup) {
-      Object.entries(this.__refsBackup).forEach(([key, ref]) => {
-        if (!$refs[key]) {
-          $refs[key] = ref;
-        }
-      });
-    }
-    return $refs;
-  }
-  /**
-   * Unbind all events on destroy.
-   */
-  destroyed() {
-    this.close();
-    if (this.$options.move && this.__refModalParentBackup) {
-      this.__refModalParentBackup.insertBefore(this.$refs.modal, this.__refModalPlaceholder);
-      this.__refModalPlaceholder.remove();
-      delete this.__refModalPlaceholder;
-      delete this.__refModalParentBackup;
-    }
-    return this;
-  }
-  /**
-   * Close the modal on `ESC` and trap the tabulation.
-   */
-  keyed({ event, isUp, isDown, ESC }) {
-    if (!this.isOpen) {
-      return;
-    }
-    if (isDown) {
-      (0, import_utils.trapFocus)(this.$refs.modal, event);
-    }
-    if (ESC && isUp) {
-      this.close();
-    }
-  }
-  /**
-   * Open the modal.
-   */
-  async open() {
-    if (this.isOpen) {
-      return Promise.resolve();
-    }
-    this.$refs.modal.setAttribute("aria-hidden", "false");
-    if (this.$options.scrollLock) {
-      document.documentElement.style.overflow = "hidden";
-    }
-    this.isOpen = true;
-    this.$emit("open");
-    const refs = this.$refs;
-    return Promise.all(
-      Object.entries(this.$options.styles).map(
-        ([refName, { open, active, closed } = { open: "", active: "", closed: "" }]) => (0, import_utils.transition)(
-          refs[refName],
-          {
-            from: closed,
-            active,
-            to: open
-          },
-          "keep"
-        )
-      )
-    ).then(() => {
-      if (this.$options.autofocus && this.$refs.modal.querySelector(this.$options.autofocus)) {
-        (0, import_utils.saveActiveElement)();
-        const autofocusElement = this.$refs.modal.querySelector(
-          this.$options.autofocus
-        );
-        autofocusElement.focus();
-      }
-      return Promise.resolve();
-    });
-  }
-  /**
-   * Close the modal.
-   */
-  async close() {
-    if (!this.isOpen) {
-      return Promise.resolve();
-    }
-    this.$refs.modal.setAttribute("aria-hidden", "true");
-    if (this.$options.scrollLock) {
-      document.documentElement.style.overflow = "";
-    }
-    this.isOpen = false;
-    (0, import_utils.untrapFocus)();
-    this.$emit("close");
-    const refs = this.$refs;
-    return Promise.all(
-      Object.entries(this.$options.styles).map(
-        ([refName, { open, active, closed } = { open: "", active: "", closed: "" }]) => (0, import_utils.transition)(
-          refs[refName],
-          {
-            from: open,
-            active,
-            to: closed
-          },
-          "keep"
-        )
-      )
-    ).then(() => Promise.resolve());
-  }
-};
-if (module.exports.default) module.exports = module.exports.default;
-//# sourceMappingURL=Modal.cjs.map

package/molecules/Modal/Modal.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../packages/ui/molecules/Modal/Modal.ts"],
-  "sourcesContent": ["import { Base, KeyServiceProps } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport {\n  transition,\n  trapFocus as trap,\n  untrapFocus as untrap,\n  saveActiveElement,\n} from '@studiometa/js-toolkit/utils';\n\ntype ModalStates = Partial<\n  Record<'open' | 'active' | 'closed', string | Partial<CSSStyleDeclaration>>\n>;\n// eslint-disable-next-line no-use-before-define\ntype ModalStylesOption = Partial<Record<keyof ModalProps['$refs'], ModalStates>>;\n\nexport interface ModalProps extends BaseProps {\n  $refs: {\n    close: HTMLElement[];\n    container: HTMLElement;\n    content: HTMLElement;\n    modal: HTMLElement;\n    open: HTMLElement[];\n    overlay: HTMLElement;\n  };\n  $options: {\n    /**\n     * A selector where to move the modal to.\n     */\n    move: string;\n    /**\n     * A selector for the element to set the focus to when the modal opens.\n     */\n    autofocus: string;\n    /**\n     * Lock or allow scroll in the documentElement.\n     */\n    scrollLock: boolean;\n    /**\n     * The styles for the different state of the modal.\n     */\n    styles: ModalStylesOption;\n  };\n}\n\n/**\n * Modal class.\n */\nexport class Modal<T extends BaseProps = BaseProps> extends Base<T & ModalProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Modal',\n    refs: ['close[]', 'container', 'content', 'modal', 'open[]', 'overlay'],\n    emits: ['open', 'close'],\n    options: {\n      move: String,\n      autofocus: { type: String, default: '[autofocus]' },\n      styles: {\n        type: Object,\n        default: (): ModalStylesOption => ({\n          modal: {\n            closed: {\n              opacity: '0',\n              pointerEvents: 'none',\n              visibility: 'hidden',\n            },\n          },\n        }),\n      },\n      scrollLock: {\n        type: Boolean,\n        default: true,\n      },\n    },\n  };\n\n  /**\n   * Wether the modal is open or not.\n   */\n  isOpen = false;\n\n  /**\n   * @private\n   */\n  __refsBackup: (T & ModalProps)['$refs'];\n\n  /**\n   * @private\n   */\n  __refModalPlaceholder: Comment;\n\n  /**\n   * @private\n   */\n  __refModalParentBackup: HTMLElement;\n\n  /**\n   * @private\n   */\n  __refModalUnbindGetRefFilter: () => void;\n\n  /**\n   * Open the modal on click on the `open` ref.\n   */\n  get onOpenClick() {\n    return this.open;\n  }\n\n  /**\n   * Close the modal on click on the `close` ref.\n   */\n  get onCloseClick() {\n    return this.close;\n  }\n\n  /**\n   * Close the modal on click on the `overlay` ref.\n   * @returns {Function} The component's `close` method.\n   */\n  get onOverlayClick() {\n    return this.close;\n  }\n\n  /**\n   * Initialize the component's behaviours.\n   */\n  mounted() {\n    this.isOpen = false;\n    this.close();\n\n    if (this.$options.move) {\n      const target = document.querySelector(this.$options.move) || document.body;\n\n      this.__refsBackup = this.$refs;\n      this.__refModalPlaceholder = document.createComment('');\n      this.__refModalParentBackup = this.$refs.modal.parentElement || this.$el;\n      this.__refModalParentBackup.insertBefore(this.__refModalPlaceholder, this.$refs.modal);\n\n      target.append(this.$refs.modal);\n    }\n  }\n\n  /**\n   * Add the moved refs to `this.$refs` when using the `move` options.\n   */\n  get $refs() {\n    const $refs = super.$refs;\n\n    if (this.$options.move && this.__refsBackup) {\n      Object.entries(this.__refsBackup).forEach(([key, ref]) => {\n        if (!$refs[key]) {\n          // @ts-ignore\n          $refs[key] = ref;\n        }\n      });\n    }\n\n    return $refs;\n  }\n\n  /**\n   * Unbind all events on destroy.\n   */\n  destroyed() {\n    this.close();\n\n    if (this.$options.move && this.__refModalParentBackup) {\n      this.__refModalParentBackup.insertBefore(this.$refs.modal, this.__refModalPlaceholder);\n      this.__refModalPlaceholder.remove();\n      delete this.__refModalPlaceholder;\n      delete this.__refModalParentBackup;\n    }\n\n    return this;\n  }\n\n  /**\n   * Close the modal on `ESC` and trap the tabulation.\n   */\n  keyed({ event, isUp, isDown, ESC }: KeyServiceProps) {\n    if (!this.isOpen) {\n      return;\n    }\n\n    if (isDown) {\n      trap(this.$refs.modal, event);\n    }\n\n    if (ESC && isUp) {\n      this.close();\n    }\n  }\n\n  /**\n   * Open the modal.\n   */\n  async open() {\n    if (this.isOpen) {\n      return Promise.resolve();\n    }\n\n    this.$refs.modal.setAttribute('aria-hidden', 'false');\n\n    if (this.$options.scrollLock) {\n      document.documentElement.style.overflow = 'hidden';\n    }\n\n    this.isOpen = true;\n    this.$emit('open');\n\n    /** @type {ModalRefs} */\n    const refs = this.$refs;\n\n    return Promise.all(\n      Object.entries(this.$options.styles).map(\n        ([refName, { open, active, closed } = { open: '', active: '', closed: '' }]) =>\n          transition(\n            refs[refName],\n            {\n              from: closed,\n              active,\n              to: open,\n            },\n            'keep',\n          ),\n      ),\n    ).then(() => {\n      if (this.$options.autofocus && this.$refs.modal.querySelector(this.$options.autofocus)) {\n        saveActiveElement();\n        const autofocusElement = this.$refs.modal.querySelector(\n          this.$options.autofocus,\n        ) as HTMLElement;\n        autofocusElement.focus();\n      }\n      return Promise.resolve();\n    });\n  }\n\n  /**\n   * Close the modal.\n   */\n  async close() {\n    if (!this.isOpen) {\n      return Promise.resolve();\n    }\n\n    this.$refs.modal.setAttribute('aria-hidden', 'true');\n\n    if (this.$options.scrollLock) {\n      document.documentElement.style.overflow = '';\n    }\n\n    this.isOpen = false;\n    untrap();\n    this.$emit('close');\n\n    const refs = this.$refs;\n\n    return Promise.all(\n      Object.entries(this.$options.styles).map(\n        ([refName, { open, active, closed } = { open: '', active: '', closed: '' }]) =>\n          transition(\n            refs[refName],\n            {\n              from: open,\n              active,\n              to: closed,\n            },\n            'keep',\n          ),\n      ),\n    ).then(() => Promise.resolve());\n  }\n}\n"],
-  "mappings": "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",
-  "names": ["trap", "untrap"]
-}

package/molecules/Modal/ModalWithTransition.cjs

@@ -1,69 +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/Modal/ModalWithTransition.ts
-var ModalWithTransition_exports = {};
-__export(ModalWithTransition_exports, {
-  ModalWithTransition: () => ModalWithTransition
-});
-module.exports = __toCommonJS(ModalWithTransition_exports);
-var import_Modal = require("./Modal.cjs");
-var ModalWithTransition = class extends import_Modal.Modal {
-  /**
-   * Modal options.
-   */
-  static config = {
-    name: "ModalWithTransition",
-    options: {
-      styles: {
-        type: Object,
-        /**
-         * @returns {ModalStylesOption}
-         */
-        default: () => ({
-          modal: {
-            closed: {
-              opacity: "0",
-              pointerEvents: "none"
-            },
-            active: "transition duration-500 ease-out-expo"
-          },
-          overlay: {
-            closed: "opacity-0",
-            active: "transition duration-500 ease-out-expo"
-          },
-          container: {
-            closed: "transform scale-95 opacity-0",
-            active: "transition duration-500 ease-out-expo"
-          }
-        })
-      }
-    }
-  };
-  open() {
-    this.$refs.modal.style.visibility = "";
-    return super.open();
-  }
-  async close() {
-    await super.close();
-    this.$refs.modal.style.visibility = "hidden";
-    return Promise.resolve();
-  }
-};
-if (module.exports.default) module.exports = module.exports.default;
-//# sourceMappingURL=ModalWithTransition.cjs.map

package/molecules/Modal/ModalWithTransition.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../packages/ui/molecules/Modal/ModalWithTransition.ts"],
-  "sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { Modal } from './Modal.js';\n\n/**\n * ModalWithTransition class.\n */\nexport class ModalWithTransition<T extends BaseProps = BaseProps> extends Modal<T> {\n  /**\n   * Modal options.\n   */\n  static config: BaseConfig = {\n    name: 'ModalWithTransition',\n    options: {\n      styles: {\n        type: Object,\n        /**\n         * @returns {ModalStylesOption}\n         */\n        default: () => ({\n          modal: {\n            closed: {\n              opacity: '0',\n              pointerEvents: 'none',\n            },\n            active: 'transition duration-500 ease-out-expo',\n          },\n          overlay: {\n            closed: 'opacity-0',\n            active: 'transition duration-500 ease-out-expo',\n          },\n          container: {\n            closed: 'transform scale-95 opacity-0',\n            active: 'transition duration-500 ease-out-expo',\n          },\n        }),\n      },\n    },\n  };\n\n  open() {\n    this.$refs.modal.style.visibility = '';\n    return super.open();\n  }\n\n  async close() {\n    await super.close();\n    this.$refs.modal.style.visibility = 'hidden';\n    return Promise.resolve();\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAsB;AAKf,IAAM,sBAAN,cAAmE,mBAAS;AAAA;AAAA;AAAA;AAAA,EAIjF,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,SAAS;AAAA,MACP,QAAQ;AAAA,QACN,MAAM;AAAA;AAAA;AAAA;AAAA,QAIN,SAAS,OAAO;AAAA,UACd,OAAO;AAAA,YACL,QAAQ;AAAA,cACN,SAAS;AAAA,cACT,eAAe;AAAA,YACjB;AAAA,YACA,QAAQ;AAAA,UACV;AAAA,UACA,SAAS;AAAA,YACP,QAAQ;AAAA,YACR,QAAQ;AAAA,UACV;AAAA,UACA,WAAW;AAAA,YACT,QAAQ;AAAA,YACR,QAAQ;AAAA,UACV;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EAEA,OAAO;AACL,SAAK,MAAM,MAAM,MAAM,aAAa;AACpC,WAAO,MAAM,KAAK;AAAA,EACpB;AAAA,EAEA,MAAM,QAAQ;AACZ,UAAM,MAAM,MAAM;AAClB,SAAK,MAAM,MAAM,MAAM,aAAa;AACpC,WAAO,QAAQ,QAAQ;AAAA,EACzB;AACF;",
-  "names": []
-}

package/molecules/Modal/index.cjs

@@ -1,22 +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/Modal/index.ts
-var Modal_exports = {};
-module.exports = __toCommonJS(Modal_exports);
-__reExport(Modal_exports, require("./Modal.cjs"), module.exports);
-__reExport(Modal_exports, require("./ModalWithTransition.cjs"), module.exports);
-if (module.exports.default) module.exports = module.exports.default;
-//# sourceMappingURL=index.cjs.map

package/molecules/Modal/index.cjs.map

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

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": []
-}