@studiometa/ui 0.2.1 → 0.2.4

package/molecules/Modal/Modal.cjs

@@ -3,54 +3,30 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 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 __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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 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());
-  });
-};
 
 // packages/ui/molecules/Modal/Modal.js
 var Modal_exports = {};
 __export(Modal_exports, {
   default: () => Modal
 });
+module.exports = __toCommonJS(Modal_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
 var import_utils = require("@studiometa/js-toolkit/utils");
 var { trap, untrap, saveActiveElement } = (0, import_utils.focusTrap)();
@@ -75,7 +51,6 @@ var Modal = class extends import_js_toolkit.Base {
       this.__refModalParentBackup.insertBefore(this.__refModalPlaceholder, this.$refs.modal);
       target.appendChild(this.$refs.modal);
     }
-    return this;
   }
   get $refs() {
     const $refs = super.$refs;
@@ -109,47 +84,43 @@ var Modal = class extends import_js_toolkit.Base {
       this.close();
     }
   }
-  open() {
-    return __async(this, null, function* () {
-      if (this.isOpen) {
-        return Promise.resolve(this);
+  async open() {
+    if (this.isOpen) {
+      return Promise.resolve();
+    }
+    this.$refs.modal.setAttribute("aria-hidden", "false");
+    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)) {
+        saveActiveElement();
+        const autofocusElement = this.$refs.modal.querySelector(this.$options.autofocus);
+        autofocusElement.focus();
       }
-      this.$refs.modal.setAttribute("aria-hidden", "false");
-      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)) {
-          saveActiveElement();
-          const autofocusElement = this.$refs.modal.querySelector(this.$options.autofocus);
-          autofocusElement.focus();
-        }
-        return Promise.resolve(this);
-      });
+      return Promise.resolve();
     });
   }
-  close() {
-    return __async(this, null, function* () {
-      if (!this.isOpen) {
-        return Promise.resolve(this);
-      }
-      this.$refs.modal.setAttribute("aria-hidden", "true");
-      document.documentElement.style.overflow = "";
-      this.isOpen = false;
-      untrap();
-      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(this));
-    });
+  async close() {
+    if (!this.isOpen) {
+      return Promise.resolve();
+    }
+    this.$refs.modal.setAttribute("aria-hidden", "true");
+    document.documentElement.style.overflow = "";
+    this.isOpen = false;
+    untrap();
+    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());
   }
 };
 __publicField(Modal, "config", {
@@ -173,5 +144,4 @@ __publicField(Modal, "config", {
     }
   }
 });
-module.exports = __toCommonJS(Modal_exports);
 if (module.exports.default) module.exports = module.exports.default;

package/molecules/Modal/Modal.d.ts

@@ -8,8 +8,7 @@
  * @property {HTMLElement} overlay
  */
 /**
- * @typedef {import('@studiometa/js-toolkit/utils/css/styles.js').CssStyleObject} CssStyleObject
- * @typedef {Partial<Record<'open'|'active'|'closed', string|CssStyleObject>>} ModalStates
+ * @typedef {Partial<Record<'open'|'active'|'closed', string|Partial<CSSStyleDeclaration>>>} ModalStates
  * @typedef {Partial<Record<keyof ModalRefs, ModalStates>>} ModalStylesOption
  */
 /**
@@ -29,6 +28,7 @@
  */
 /**
  * @typedef {Modal & ModalPrivateInterface} ModalInterface
+ * @typedef {typeof Modal} ModalConstructor
  */
 /**
  * Modal class.
@@ -79,7 +79,7 @@ export default class Modal extends Base {
      *
      * @this {ModalInterface}
      */
-    mounted(): ModalInterface;
+    mounted(this: ModalInterface): void;
     isOpen: boolean;
     __refsBackup: import("@studiometa/js-toolkit/Base/managers/RefsManager").default & ModalRefs;
     __refModalPlaceholder: Comment;
@@ -90,7 +90,7 @@ export default class Modal extends Base {
      * @this {ModalInterface}
      * @return {Modal} The Modal instance.
      */
-    destroyed(): Modal;
+    destroyed(this: ModalInterface): Modal;
     /**
      * Close the modal on `ESC` and trap the tabulation.
      *
@@ -101,7 +101,7 @@ export default class Modal extends Base {
      * @param  {Boolean}       options.isDown Is it a keydown event?
      * @param  {Boolean}       options.ESC    Is it the ESC key?
      */
-    keyed({ event, isUp, isDown, ESC }: {
+    keyed(this: ModalInterface, { event, isUp, isDown, ESC }: {
         event: KeyboardEvent;
         isUp: boolean;
         isDown: boolean;
@@ -111,16 +111,16 @@ export default class Modal extends Base {
      * Open the modal.
      *
      * @this {ModalInterface}
-     * @return {Promise<ModalInterface>} The Modal instance.
+     * @return {Promise<void>} The Modal instance.
      */
-    open(): Promise<ModalInterface>;
+    open(this: ModalInterface): Promise<void>;
     /**
      * Close the modal.
      *
      * @this {ModalInterface}
-     * @return {Promise<ModalInterface>} The Modal instance.
+     * @return {Promise<void>} The Modal instance.
      */
-    close(): Promise<ModalInterface>;
+    close(this: ModalInterface): Promise<void>;
 }
 export type ModalRefs = {
     close: HTMLElement;
@@ -130,8 +130,7 @@ export type ModalRefs = {
     open: HTMLElement;
     overlay: HTMLElement;
 };
-export type CssStyleObject = import('@studiometa/js-toolkit/utils/css/styles.js').CssStyleObject;
-export type ModalStates = Partial<Record<'open' | 'active' | 'closed', string | CssStyleObject>>;
+export type ModalStates = Partial<Record<'open' | 'active' | 'closed', string | Partial<CSSStyleDeclaration>>>;
 export type ModalStylesOption = Partial<Record<keyof ModalRefs, ModalStates>>;
 export type ModalOptions = {
     /**
@@ -156,4 +155,5 @@ export type ModalPrivateInterface = {
     refModalUnbindGetRefFilter: Function;
 };
 export type ModalInterface = Modal & ModalPrivateInterface;
+export type ModalConstructor = typeof Modal;
 import { Base } from "@studiometa/js-toolkit";

package/molecules/Modal/Modal.js

@@ -1,151 +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 { Base } from "@studiometa/js-toolkit";
-import { transition, focusTrap } from "@studiometa/js-toolkit/utils";
-const { trap, untrap, saveActiveElement } = focusTrap();
-class Modal extends Base {
-  get onOpenClick() {
-    return this.open;
-  }
-  get onCloseClick() {
-    return this.close;
-  }
-  get onOverlayClick() {
-    return this.close;
-  }
-  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.appendChild(this.$refs.modal);
-    }
-    return this;
-  }
-  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;
-  }
-  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;
-  }
-  keyed({ event, isUp, isDown, ESC }) {
-    if (!this.isOpen) {
-      return;
-    }
-    if (isDown) {
-      trap(this.$refs.modal, event);
-    }
-    if (ESC && isUp) {
-      this.close();
-    }
-  }
-  open() {
-    return __async(this, null, function* () {
-      if (this.isOpen) {
-        return Promise.resolve(this);
-      }
-      this.$refs.modal.setAttribute("aria-hidden", "false");
-      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: "" }]) => transition(refs[refName], {
-        from: closed,
-        active,
-        to: open
-      }, "keep"))).then(() => {
-        if (this.$options.autofocus && this.$refs.modal.querySelector(this.$options.autofocus)) {
-          saveActiveElement();
-          const autofocusElement = this.$refs.modal.querySelector(this.$options.autofocus);
-          autofocusElement.focus();
-        }
-        return Promise.resolve(this);
-      });
-    });
-  }
-  close() {
-    return __async(this, null, function* () {
-      if (!this.isOpen) {
-        return Promise.resolve(this);
-      }
-      this.$refs.modal.setAttribute("aria-hidden", "true");
-      document.documentElement.style.overflow = "";
-      this.isOpen = false;
-      untrap();
-      this.$emit("close");
-      const refs = this.$refs;
-      return Promise.all(Object.entries(this.$options.styles).map(([refName, { open, active, closed } = { open: "", active: "", closed: "" }]) => transition(refs[refName], {
-        from: open,
-        active,
-        to: closed
-      }, "keep"))).then(() => Promise.resolve(this));
-    });
-  }
-}
-__publicField(Modal, "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"
-          }
-        }
-      })
-    }
-  }
-});
-export {
-  Modal as default
-};
+import{Base as n}from"@studiometa/js-toolkit";import{transition as r,focusTrap as l}from"@studiometa/js-toolkit/utils";const{trap:a,untrap:c,saveActiveElement:f}=l();class h extends n{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"}}})}}};get onOpenClick(){return this.open}get onCloseClick(){return this.close}get onOverlayClick(){return this.close}mounted(){if(this.isOpen=!1,this.close(),this.$options.move){const e=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),e.appendChild(this.$refs.modal)}}get $refs(){const e=super.$refs;return this.$options.move&&this.__refsBackup&&Object.entries(this.__refsBackup).forEach(([t,s])=>{e[t]||(e[t]=s)}),e}destroyed(){return this.close(),this.$options.move&&this.__refModalParentBackup&&(this.__refModalParentBackup.insertBefore(this.$refs.modal,this.__refModalPlaceholder),this.__refModalPlaceholder.remove(),delete this.__refModalPlaceholder,delete this.__refModalParentBackup),this}keyed({event:e,isUp:t,isDown:s,ESC:o}){!this.isOpen||(s&&a(this.$refs.modal,e),o&&t&&this.close())}async open(){if(this.isOpen)return Promise.resolve();this.$refs.modal.setAttribute("aria-hidden","false"),document.documentElement.style.overflow="hidden",this.isOpen=!0,this.$emit("open");const e=this.$refs;return Promise.all(Object.entries(this.$options.styles).map(([t,{open:s,active:o,closed:i}={open:"",active:"",closed:""}])=>r(e[t],{from:i,active:o,to:s},"keep"))).then(()=>(this.$options.autofocus&&this.$refs.modal.querySelector(this.$options.autofocus)&&(f(),this.$refs.modal.querySelector(this.$options.autofocus).focus()),Promise.resolve()))}async close(){if(!this.isOpen)return Promise.resolve();this.$refs.modal.setAttribute("aria-hidden","true"),document.documentElement.style.overflow="",this.isOpen=!1,c(),this.$emit("close");const e=this.$refs;return Promise.all(Object.entries(this.$options.styles).map(([t,{open:s,active:o,closed:i}={open:"",active:"",closed:""}])=>r(e[t],{from:s,active:o,to:i},"keep"))).then(()=>Promise.resolve())}}export{h as default};

package/molecules/Modal/ModalWithTransition.cjs

@@ -0,0 +1,70 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __export = (target, all) => {
+  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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+// packages/ui/molecules/Modal/ModalWithTransition.js
+var ModalWithTransition_exports = {};
+__export(ModalWithTransition_exports, {
+  default: () => ModalWithTransition
+});
+module.exports = __toCommonJS(ModalWithTransition_exports);
+var import_Modal = __toESM(require("./Modal.cjs"), 1);
+var ModalWithTransition = class extends import_Modal.default {
+  open() {
+    this.$refs.modal.style.visibility = "";
+    return super.open();
+  }
+  async close() {
+    await super.close();
+    this.$refs.modal.style.visibility = "hidden";
+    return Promise.resolve();
+  }
+};
+__publicField(ModalWithTransition, "config", {
+  name: "ModalWithTransition",
+  options: {
+    styles: {
+      type: Object,
+      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"
+        }
+      })
+    }
+  }
+});
+if (module.exports.default) module.exports = module.exports.default;

package/molecules/Modal/ModalWithTransition.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @typedef {import('./Modal.js').ModalInterface} ModalInterface
+ * @typedef {import('./Modal.js').ModalStylesOption} ModalStylesOption
+ * @typedef {ModalInterface & ModalWithTransition} ModalWithTransitionInterface
+ */
+/**
+ * ModalWithTransition class.
+ */
+export default class ModalWithTransition extends Modal {
+    /**
+     * Modal options.
+     */
+    static config: {
+        name: string;
+        options: {
+            styles: {
+                type: ObjectConstructor;
+                /**
+                 * @return {ModalStylesOption}
+                 */
+                default: () => ModalStylesOption;
+            };
+        };
+    };
+}
+export type ModalInterface = import('./Modal.js').ModalInterface;
+export type ModalStylesOption = import('./Modal.js').ModalStylesOption;
+export type ModalWithTransitionInterface = ModalInterface & ModalWithTransition;
+import Modal from "./Modal.js";

package/molecules/Modal/ModalWithTransition.js

@@ -0,0 +1 @@
+import e from"./Modal.js";class t extends e{static config={name:"ModalWithTransition",options:{styles:{type:Object,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(){return this.$refs.modal.style.visibility="",super.open()}async close(){return await super.close(),this.$refs.modal.style.visibility="hidden",Promise.resolve()}}export{t as default};

package/molecules/Panel/Panel.cjs

@@ -0,0 +1,114 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __export = (target, all) => {
+  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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+// packages/ui/molecules/Panel/Panel.js
+var Panel_exports = {};
+__export(Panel_exports, {
+  default: () => Panel
+});
+module.exports = __toCommonJS(Panel_exports);
+var import_utils = require("@studiometa/js-toolkit/utils");
+var import_Modal = __toESM(require("../Modal/Modal.cjs"), 1);
+var _Panel = class extends import_Modal.default {
+  get translateClass() {
+    return _Panel.translateClasses[this.$options.position] ?? _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 (0, import_utils.matrix)(store[this.$options.position]);
+  }
+  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();
+  }
+  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();
+  }
+};
+var 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"
+});
+if (module.exports.default) module.exports = module.exports.default;

package/molecules/Panel/Panel.d.ts

@@ -0,0 +1,42 @@
+/**
+ * @typedef {import('../Modal/Modal.js').ModalInterface} ModalInterface
+ * @typedef {Panel & ModalInterface} PanelInterface
+ * @typedef {typeof Modal} ModalConstructor
+ */
+/**
+ * Panel class.
+ */
+export default class Panel extends Modal {
+    /**
+     * Config.
+     */
+    static config: {
+        name: string;
+        options: {
+            position: {
+                type: StringConstructor;
+                default: string;
+            };
+        };
+    };
+    static translateClasses: {
+        top: string;
+        right: string;
+        bottom: string;
+        left: string;
+    };
+    /**
+     * Get the translation class.
+     * @returns {string}
+     */
+    get translateClass(): string;
+    /**
+     * @this {PanelInterface}
+     */
+    get containerOffset(): string;
+    isClosing: boolean;
+}
+export type ModalInterface = import('../Modal/Modal.js').ModalInterface;
+export type PanelInterface = Panel & ModalInterface;
+export type ModalConstructor = typeof Modal;
+import Modal from "../Modal/Modal.js";

package/molecules/Panel/Panel.js

@@ -0,0 +1 @@
+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};