@studiometa/ui 0.2.12 → 0.2.14

package/molecules/Modal/Modal.d.ts

@@ -1,171 +1,100 @@
-/**
- * @typedef {Object} ModalRefs
- * @property {HTMLElement} close[]
- * @property {HTMLElement} container
- * @property {HTMLElement} content
- * @property {HTMLElement} modal
- * @property {HTMLElement} open[]
- * @property {HTMLElement} overlay
- */
-/**
- * @typedef {Partial<Record<'open'|'active'|'closed', string|Partial<CSSStyleDeclaration>>>} ModalStates
- * @typedef {Partial<Record<keyof ModalRefs, ModalStates>>} ModalStylesOption
- */
-/**
- * @typedef {Object} ModalOptions
- * @property {String}            move       A selector where to move the modal to.
- * @property {String}            autofocus  A selector for the element to set the focus to when the modal opens.
- * @property {Boolean}           scrollLock Lock or allow scroll in the documentElement.
- * @property {ModalStylesOption} styles     The styles for the different state of the modal.
- */
-/**
- * @typedef {Object} ModalPrivateInterface
- * @property {ModalRefs} $refs
- * @property {ModalOptions} $options
- * @property {Boolean} isOpen
- * @property {Comment} refModalPlaceholder
- * @property {HTMLElement} refModalParentBackup
- * @property {Function} refModalUnbindGetRefFilter
- */
-/**
- * @typedef {Modal & ModalPrivateInterface} ModalInterface
- * @typedef {typeof Modal} ModalConstructor
- */
+import { Base, KeyServiceProps } from '@studiometa/js-toolkit';
+import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';
+declare type ModalStates = Partial<Record<'open' | 'active' | 'closed', string | Partial<CSSStyleDeclaration>>>;
+declare type ModalStylesOption = Partial<Record<keyof ModalProps['$refs'], ModalStates>>;
+export interface ModalProps extends BaseProps {
+    $refs: {
+        close: HTMLElement[];
+        container: HTMLElement;
+        content: HTMLElement;
+        modal: HTMLElement;
+        open: HTMLElement[];
+        overlay: HTMLElement;
+    };
+    $options: {
+        /**
+         * A selector where to move the modal to.
+         */
+        move: string;
+        /**
+         * A selector for the element to set the focus to when the modal opens.
+         */
+        autofocus: string;
+        /**
+         * Lock or allow scroll in the documentElement.
+         */
+        scrollLock: boolean;
+        /**
+         * The styles for the different state of the modal.
+         */
+        styles: ModalStylesOption;
+    };
+}
 /**
  * Modal class.
  */
-export default class Modal extends Base {
+export declare class Modal<T extends BaseProps = BaseProps> extends Base<T & ModalProps> {
     /**
-     * Modal options.
+     * Config.
      */
-    static config: {
-        name: string;
-        refs: string[];
-        emits: string[];
-        options: {
-            move: StringConstructor;
-            autofocus: {
-                type: StringConstructor;
-                default: string;
-            };
-            styles: {
-                type: ObjectConstructor;
-                /**
-                 * @return {ModalStylesOption}
-                 */
-                default: () => ModalStylesOption;
-            };
-            /**
-             * @return {ModalScrollLockOption}
-             */
-            scrollLock: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-        };
-    };
+    static config: BaseConfig;
     /**
-     * Open the modal on click on the `open` ref.
-     *
-     * @return {Function} The component's `open` method.
+     * Wether the modal is open or not.
      */
-    get onOpenClick(): Function;
+    isOpen: boolean;
     /**
-     * Close the modal on click on the `close` ref.
-     *
-     * @return {Function} The component's `close` method.
+     * @private
      */
-    get onCloseClick(): Function;
+    __refsBackup: (T & ModalProps)['$refs'];
     /**
-     * Close the modal on click on the `overlay` ref.
-     *
-     * @return {Function} The component's `close` method.
+     * @private
      */
-    get onOverlayClick(): Function;
+    __refModalPlaceholder: Comment;
     /**
-     * Initialize the component's behaviours.
-     *
-     * @this {ModalInterface}
+     * @private
      */
-    mounted(this: ModalInterface): void;
-    isOpen: boolean;
-    __refsBackup: import("@studiometa/js-toolkit/Base/managers/RefsManager").default & ModalRefs;
-    __refModalPlaceholder: Comment;
     __refModalParentBackup: HTMLElement;
     /**
-     * Unbind all events on destroy.
-     *
-     * @this {ModalInterface}
-     * @return {Modal} The Modal instance.
+     * @private
      */
-    destroyed(this: ModalInterface): Modal;
+    __refModalUnbindGetRefFilter: () => void;
     /**
-     * Close the modal on `ESC` and trap the tabulation.
-     *
-     * @this {ModalInterface}
-     * @param  {Object}        options
-     * @param  {KeyboardEvent} options.event  The original keyboard event
-     * @param  {Boolean}       options.isUp   Is it a keyup event?
-     * @param  {Boolean}       options.isDown Is it a keydown event?
-     * @param  {Boolean}       options.ESC    Is it the ESC key?
+     * Open the modal on click on the `open` ref.
      */
-    keyed(this: ModalInterface, { event, isUp, isDown, ESC }: {
-        event: KeyboardEvent;
-        isUp: boolean;
-        isDown: boolean;
-        ESC: boolean;
-    }): void;
+    get onOpenClick(): () => Promise<void>;
     /**
-     * Open the modal.
-     *
-     * @this {ModalInterface}
-     * @return {Promise<void>} The Modal instance.
+     * Close the modal on click on the `close` ref.
      */
-    open(this: ModalInterface): Promise<void>;
+    get onCloseClick(): () => Promise<void>;
     /**
-     * Close the modal.
+     * Close the modal on click on the `overlay` ref.
      *
-     * @this {ModalInterface}
-     * @return {Promise<void>} The Modal instance.
+     * @returns {Function} The component's `close` method.
      */
-    close(this: ModalInterface): Promise<void>;
-}
-export type ModalRefs = {
-    close: HTMLElement;
-    container: HTMLElement;
-    content: HTMLElement;
-    modal: HTMLElement;
-    open: HTMLElement;
-    overlay: HTMLElement;
-};
-export type ModalStates = Partial<Record<'open' | 'active' | 'closed', string | Partial<CSSStyleDeclaration>>>;
-export type ModalStylesOption = Partial<Record<keyof ModalRefs, ModalStates>>;
-export type ModalOptions = {
+    get onOverlayClick(): () => Promise<void>;
     /**
-     * A selector where to move the modal to.
+     * Initialize the component's behaviours.
      */
-    move: string;
+    mounted(): void;
     /**
-     * A selector for the element to set the focus to when the modal opens.
+     * Add the moved refs to `this.$refs` when using the `move` options.
      */
-    autofocus: string;
+    get $refs(): import("@studiometa/js-toolkit/Base/managers/RefsManager").default & (T & ModalProps)["$refs"] & import("@studiometa/js-toolkit/Base").BaseRefs;
     /**
-     * Lock or allow scroll in the documentElement.
+     * Unbind all events on destroy.
      */
-    scrollLock: boolean;
+    destroyed(): this;
     /**
-     * The styles for the different state of the modal.
+     * Close the modal on `ESC` and trap the tabulation.
      */
-    styles: ModalStylesOption;
-};
-export type ModalPrivateInterface = {
-    $refs: ModalRefs;
-    $options: ModalOptions;
-    isOpen: boolean;
-    refModalPlaceholder: Comment;
-    refModalParentBackup: HTMLElement;
-    refModalUnbindGetRefFilter: Function;
-};
-export type ModalInterface = Modal & ModalPrivateInterface;
-export type ModalConstructor = typeof Modal;
-import { Base } from "@studiometa/js-toolkit";
+    keyed({ event, isUp, isDown, ESC }: KeyServiceProps): void;
+    /**
+     * Open the modal.
+     */
+    open(): Promise<void>;
+    /**
+     * Close the modal.
+     */
+    close(): Promise<void>;
+}
+export {};

package/molecules/Modal/Modal.js

@@ -1 +1,163 @@
-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"}}})},scrollLock:{type:Boolean,default:!0}}};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"),this.$options.scrollLock&&(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"),this.$options.scrollLock&&(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};
+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 { transition, isArray, focusTrap } from "@studiometa/js-toolkit/utils";
+function delegateTransition(elementOrElements, name, endMode) {
+  return isArray(elementOrElements) || elementOrElements instanceof NodeList ? Promise.all(
+    Array.from(elementOrElements).map((el) => transition(el, name, endMode))
+  ) : transition(elementOrElements, name, endMode);
+}
+const { trap, untrap, saveActiveElement } = focusTrap();
+class Modal extends Base {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "isOpen", false);
+    __publicField(this, "__refsBackup");
+    __publicField(this, "__refModalPlaceholder");
+    __publicField(this, "__refModalParentBackup");
+    __publicField(this, "__refModalUnbindGetRefFilter");
+  }
+  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.append(this.$refs.modal);
+    }
+  }
+  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();
+    }
+  }
+  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: "" }]) => delegateTransition(
+          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();
+    });
+  }
+  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;
+    untrap();
+    this.$emit("close");
+    const refs = this.$refs;
+    return Promise.all(
+      Object.entries(this.$options.styles).map(
+        ([refName, { open, active, closed } = { open: "", active: "", closed: "" }]) => delegateTransition(
+          refs[refName],
+          {
+            from: open,
+            active,
+            to: closed
+          },
+          "keep"
+        )
+      )
+    ).then(() => Promise.resolve());
+  }
+}
+__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"
+          }
+        }
+      })
+    },
+    scrollLock: {
+      type: Boolean,
+      default: true
+    }
+  }
+});
+export {
+  Modal
+};

package/molecules/Modal/ModalWithTransition.cjs

@@ -1,8 +1,6 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __export = (target, all) => {
@@ -17,21 +15,20 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 
-// packages/ui/molecules/Modal/ModalWithTransition.js
+// packages/ui/molecules/Modal/ModalWithTransition.ts
 var ModalWithTransition_exports = {};
 __export(ModalWithTransition_exports, {
-  default: () => ModalWithTransition
+  ModalWithTransition: () => ModalWithTransition
 });
 module.exports = __toCommonJS(ModalWithTransition_exports);
-var import_Modal = __toESM(require("./Modal.cjs"), 1);
-var ModalWithTransition = class extends import_Modal.default {
+var import_Modal = require("./Modal.cjs");
+var ModalWithTransition = class extends import_Modal.Modal {
   open() {
     this.$refs.modal.style.visibility = "";
     return super.open();

package/molecules/Modal/ModalWithTransition.d.ts

@@ -1,29 +1,13 @@
-/**
- * @typedef {import('./Modal.js').ModalInterface} ModalInterface
- * @typedef {import('./Modal.js').ModalStylesOption} ModalStylesOption
- * @typedef {ModalInterface & ModalWithTransition} ModalWithTransitionInterface
- */
+import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';
+import { Modal } from './Modal.js';
 /**
  * ModalWithTransition class.
  */
-export default class ModalWithTransition extends Modal {
+export declare class ModalWithTransition<T extends BaseProps = BaseProps> extends Modal<T> {
     /**
      * Modal options.
      */
-    static config: {
-        name: string;
-        options: {
-            styles: {
-                type: ObjectConstructor;
-                /**
-                 * @return {ModalStylesOption}
-                 */
-                default: () => ModalStylesOption;
-            };
-        };
-    };
+    static config: BaseConfig;
+    open(): Promise<void>;
+    close(): Promise<void>;
 }
-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

@@ -1 +1,46 @@
-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};
+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 { Modal } from "./Modal.js";
+class ModalWithTransition extends Modal {
+  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"
+        }
+      })
+    }
+  }
+});
+export {
+  ModalWithTransition
+};

package/molecules/Modal/index.cjs

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

package/molecules/Modal/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Modal.js';
+export * from './ModalWithTransition.js';

package/molecules/Modal/index.js

@@ -0,0 +1,2 @@
+export * from "./Modal.js";
+export * from "./ModalWithTransition.js";