@studiometa/js-toolkit 2.0.0-alpha.4 → 2.0.0-alpha.8

package/components/Cursor.js

@@ -1,136 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import Base from '../Base/index.js';
-import damp from '../utils/math/damp.js';
-import matrix from '../utils/css/matrix.js';
-export default class Cursor extends Base {
-  constructor() {
-    super(...arguments);
-
-    _defineProperty(this, "x", 0);
-
-    _defineProperty(this, "y", 0);
-
-    _defineProperty(this, "scale", 0);
-
-    _defineProperty(this, "pointerX", 0);
-
-    _defineProperty(this, "pointerY", 0);
-
-    _defineProperty(this, "pointerScale", 0);
-  }
-
-  mounted() {
-    this.x = 0;
-    this.y = 0;
-    this.scale = 0;
-    this.pointerX = 0;
-    this.pointerY = 0;
-    this.pointerScale = 0;
-    this.render({
-      x: this.x,
-      y: this.y,
-      scale: this.scale
-    });
-  }
-
-  moved(_ref) {
-    var {
-      event,
-      x,
-      y,
-      isDown
-    } = _ref;
-
-    if (!this.$services.has('ticked')) {
-      this.$services.enable('ticked');
-    }
-
-    this.pointerX = x;
-    this.pointerY = y;
-    var scale = 1;
-
-    if (!event) {
-      this.pointerScale = scale;
-      return;
-    }
-
-    var shouldGrow = event.target instanceof Element && event.target.matches(this.$options.growSelectors) || false;
-    var shouldReduce = isDown || event.target instanceof Element && event.target.matches(this.$options.shrinkSelectors) || false;
-
-    if (shouldGrow) {
-      scale = this.$options.growTo;
-    }
-
-    if (shouldReduce) {
-      scale = this.$options.shrinkTo;
-    }
-
-    this.pointerScale = scale;
-  }
-
-  ticked() {
-    this.x = damp(this.pointerX, this.x, this.$options.translateDampFactor);
-    this.y = damp(this.pointerY, this.y, this.$options.translateDampFactor);
-    this.scale = damp(this.pointerScale, this.scale, this.pointerScale < this.scale ? this.$options.shrinkDampFactor : this.$options.growDampFactor);
-    this.render({
-      x: this.x,
-      y: this.y,
-      scale: this.scale
-    });
-
-    if (this.x === this.pointerX && this.y === this.pointerY && this.scale === this.pointerScale) {
-      this.$services.disable('ticked');
-    }
-  }
-
-  render(_ref2) {
-    var {
-      x,
-      y,
-      scale
-    } = _ref2;
-    var transform = matrix({
-      translateX: x,
-      translateY: y,
-      scaleX: scale,
-      scaleY: scale
-    });
-    this.$el.style.transform = "translateZ(0) ".concat(transform);
-  }
-
-}
-
-_defineProperty(Cursor, "config", {
-  name: 'Cursor',
-  options: {
-    growSelectors: {
-      type: String,
-      default: 'a, a *, button, button *, [data-cursor-grow], [data-cursor-grow] *'
-    },
-    shrinkSelectors: {
-      type: String,
-      default: '[data-cursor-shrink], [data-cursor-shrink] *'
-    },
-    growTo: {
-      type: Number,
-      default: 2
-    },
-    shrinkTo: {
-      type: Number,
-      default: 0.5
-    },
-    translateDampFactor: {
-      type: Number,
-      default: 0.25
-    },
-    growDampFactor: {
-      type: Number,
-      default: 0.25
-    },
-    shrinkDampFactor: {
-      type: Number,
-      default: 0.25
-    }
-  }
-});
-//# sourceMappingURL=Cursor.js.map

package/components/Cursor.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../packages/js-toolkit/components/Cursor.js"],"names":["Base","damp","matrix","Cursor","mounted","x","y","scale","pointerX","pointerY","pointerScale","render","moved","event","isDown","$services","has","enable","shouldGrow","target","Element","matches","$options","growSelectors","shouldReduce","shrinkSelectors","growTo","shrinkTo","ticked","translateDampFactor","shrinkDampFactor","growDampFactor","disable","transform","translateX","translateY","scaleX","scaleY","$el","style","name","options","type","String","default","Number"],"mappings":";AAAA,OAAOA,IAAP,MAAiB,kBAAjB;AACA,OAAOC,IAAP,MAAiB,uBAAjB;AACA,OAAOC,MAAP,MAAmB,wBAAnB;AA8BA,eAAe,MAAMC,MAAN,SAAqBH,IAArB,CAA0B;AAAA;AAAA;;AAAA,+BAyCnC,CAzCmC;;AAAA,+BA8CnC,CA9CmC;;AAAA,mCAmD/B,CAnD+B;;AAAA,sCAwD5B,CAxD4B;;AAAA,sCA6D5B,CA7D4B;;AAAA,0CAkExB,CAlEwB;AAAA;;AAwEvCI,EAAAA,OAAO,GAAG;AACR,SAAKC,CAAL,GAAS,CAAT;AACA,SAAKC,CAAL,GAAS,CAAT;AACA,SAAKC,KAAL,GAAa,CAAb;AACA,SAAKC,QAAL,GAAgB,CAAhB;AACA,SAAKC,QAAL,GAAgB,CAAhB;AACA,SAAKC,YAAL,GAAoB,CAApB;AACA,SAAKC,MAAL,CAAY;AAAEN,MAAAA,CAAC,EAAE,KAAKA,CAAV;AAAaC,MAAAA,CAAC,EAAE,KAAKA,CAArB;AAAwBC,MAAAA,KAAK,EAAE,KAAKA;AAApC,KAAZ;AACD;;AAUDK,EAAAA,KAAK,OAA0B;AAAA,QAAzB;AAAEC,MAAAA,KAAF;AAASR,MAAAA,CAAT;AAAYC,MAAAA,CAAZ;AAAeQ,MAAAA;AAAf,KAAyB;;AAC7B,QAAI,CAAC,KAAKC,SAAL,CAAeC,GAAf,CAAmB,QAAnB,CAAL,EAAmC;AACjC,WAAKD,SAAL,CAAeE,MAAf,CAAsB,QAAtB;AACD;;AAED,SAAKT,QAAL,GAAgBH,CAAhB;AACA,SAAKI,QAAL,GAAgBH,CAAhB;AAEA,QAAIC,KAAK,GAAG,CAAZ;;AAEA,QAAI,CAACM,KAAL,EAAY;AACV,WAAKH,YAAL,GAAoBH,KAApB;AACA;AACD;;AAED,QAAMW,UAAU,GACbL,KAAK,CAACM,MAAN,YAAwBC,OAAxB,IAAmCP,KAAK,CAACM,MAAN,CAAaE,OAAb,CAAqB,KAAKC,QAAL,CAAcC,aAAnC,CAApC,IACA,KAFF;AAGA,QAAMC,YAAY,GAChBV,MAAM,IACLD,KAAK,CAACM,MAAN,YAAwBC,OAAxB,IAAmCP,KAAK,CAACM,MAAN,CAAaE,OAAb,CAAqB,KAAKC,QAAL,CAAcG,eAAnC,CADpC,IAEA,KAHF;;AAKA,QAAIP,UAAJ,EAAgB;AACdX,MAAAA,KAAK,GAAG,KAAKe,QAAL,CAAcI,MAAtB;AACD;;AAED,QAAIF,YAAJ,EAAkB;AAChBjB,MAAAA,KAAK,GAAG,KAAKe,QAAL,CAAcK,QAAtB;AACD;;AAED,SAAKjB,YAAL,GAAoBH,KAApB;AACD;;AASDqB,EAAAA,MAAM,GAAG;AACP,SAAKvB,CAAL,GAASJ,IAAI,CAAC,KAAKO,QAAN,EAAgB,KAAKH,CAArB,EAAwB,KAAKiB,QAAL,CAAcO,mBAAtC,CAAb;AACA,SAAKvB,CAAL,GAASL,IAAI,CAAC,KAAKQ,QAAN,EAAgB,KAAKH,CAArB,EAAwB,KAAKgB,QAAL,CAAcO,mBAAtC,CAAb;AACA,SAAKtB,KAAL,GAAaN,IAAI,CACf,KAAKS,YADU,EAEf,KAAKH,KAFU,EAGf,KAAKG,YAAL,GAAoB,KAAKH,KAAzB,GAAiC,KAAKe,QAAL,CAAcQ,gBAA/C,GAAkE,KAAKR,QAAL,CAAcS,cAHjE,CAAjB;AAMA,SAAKpB,MAAL,CAAY;AAAEN,MAAAA,CAAC,EAAE,KAAKA,CAAV;AAAaC,MAAAA,CAAC,EAAE,KAAKA,CAArB;AAAwBC,MAAAA,KAAK,EAAE,KAAKA;AAApC,KAAZ;;AAEA,QAAI,KAAKF,CAAL,KAAW,KAAKG,QAAhB,IAA4B,KAAKF,CAAL,KAAW,KAAKG,QAA5C,IAAwD,KAAKF,KAAL,KAAe,KAAKG,YAAhF,EAA8F;AAC5F,WAAKK,SAAL,CAAeiB,OAAf,CAAuB,QAAvB;AACD;AACF;;AAWDrB,EAAAA,MAAM,QAAkB;AAAA,QAAjB;AAAEN,MAAAA,CAAF;AAAKC,MAAAA,CAAL;AAAQC,MAAAA;AAAR,KAAiB;AACtB,QAAM0B,SAAS,GAAG/B,MAAM,CAAC;AACvBgC,MAAAA,UAAU,EAAE7B,CADW;AAEvB8B,MAAAA,UAAU,EAAE7B,CAFW;AAGvB8B,MAAAA,MAAM,EAAE7B,KAHe;AAIvB8B,MAAAA,MAAM,EAAE9B;AAJe,KAAD,CAAxB;AAMA,SAAK+B,GAAL,CAASC,KAAT,CAAeN,SAAf,2BAA4CA,SAA5C;AACD;;AApKsC;;gBAApB9B,M,YAIH;AACdqC,EAAAA,IAAI,EAAE,QADQ;AAEdC,EAAAA,OAAO,EAAE;AACPlB,IAAAA,aAAa,EAAE;AACbmB,MAAAA,IAAI,EAAEC,MADO;AAEbC,MAAAA,OAAO,EAAE;AAFI,KADR;AAKPnB,IAAAA,eAAe,EAAE;AACfiB,MAAAA,IAAI,EAAEC,MADS;AAEfC,MAAAA,OAAO,EAAE;AAFM,KALV;AASPlB,IAAAA,MAAM,EAAE;AACNgB,MAAAA,IAAI,EAAEG,MADA;AAEND,MAAAA,OAAO,EAAE;AAFH,KATD;AAaPjB,IAAAA,QAAQ,EAAE;AACRe,MAAAA,IAAI,EAAEG,MADE;AAERD,MAAAA,OAAO,EAAE;AAFD,KAbH;AAiBPf,IAAAA,mBAAmB,EAAE;AACnBa,MAAAA,IAAI,EAAEG,MADa;AAEnBD,MAAAA,OAAO,EAAE;AAFU,KAjBd;AAqBPb,IAAAA,cAAc,EAAE;AACdW,MAAAA,IAAI,EAAEG,MADQ;AAEdD,MAAAA,OAAO,EAAE;AAFK,KArBT;AAyBPd,IAAAA,gBAAgB,EAAE;AAChBY,MAAAA,IAAI,EAAEG,MADU;AAEhBD,MAAAA,OAAO,EAAE;AAFO;AAzBX;AAFK,C","sourcesContent":["import Base from '../Base/index.js';\nimport damp from '../utils/math/damp.js';\nimport matrix from '../utils/css/matrix.js';\n\n/**\n * @typedef {import('../services/pointer').PointerServiceProps} PointerServiceProps\n * @typedef {import('../Base').BaseOptions} BaseOptions\n */\n\n/**\n * @typedef {Object} CursorOptions\n * @property {string} growSelectors\n * @property {string} shrinkSelectors\n * @property {number} growTo\n * @property {number} shrinkTo\n * @property {number} translateDampFactor\n * @property {number} growDampFactor\n * @property {number} shrinkDampFactor\n */\n\n/**\n * @typedef {Object} CursorPrivateInterface\n * @property {BaseOptions & CursorOptions} $options\n */\n\n/**\n * @typedef {Cursor & CursorPrivateInterface} CursorInterface\n */\n\n/**\n * Custom cursor component.\n */\nexport default class Cursor extends Base {\n  /**\n   * Class config.\n   */\n  static config = {\n    name: 'Cursor',\n    options: {\n      growSelectors: {\n        type: String,\n        default: 'a, a *, button, button *, [data-cursor-grow], [data-cursor-grow] *',\n      },\n      shrinkSelectors: {\n        type: String,\n        default: '[data-cursor-shrink], [data-cursor-shrink] *',\n      },\n      growTo: {\n        type: Number,\n        default: 2,\n      },\n      shrinkTo: {\n        type: Number,\n        default: 0.5,\n      },\n      translateDampFactor: {\n        type: Number,\n        default: 0.25,\n      },\n      growDampFactor: {\n        type: Number,\n        default: 0.25,\n      },\n      shrinkDampFactor: {\n        type: Number,\n        default: 0.25,\n      },\n    },\n  };\n\n  /**\n   * @type {Number}\n   */\n  x = 0;\n\n  /**\n   * @type {Number}\n   */\n  y = 0;\n\n  /**\n   * @type {Number}\n   */\n  scale = 0;\n\n  /**\n   * @type {Number}\n   */\n  pointerX = 0;\n\n  /**\n   * @type {Number}\n   */\n  pointerY = 0;\n\n  /**\n   * @type {Number}\n   */\n  pointerScale = 0;\n\n  /**\n   * Mounted hook.\n   * @return {void}\n   */\n  mounted() {\n    this.x = 0;\n    this.y = 0;\n    this.scale = 0;\n    this.pointerX = 0;\n    this.pointerY = 0;\n    this.pointerScale = 0;\n    this.render({ x: this.x, y: this.y, scale: this.scale });\n  }\n\n  /**\n   * Moved hook.\n   *\n   * @this {CursorInterface}\n   *\n   * @param {PointerServiceProps} options\n   * @return {void}\n   */\n  moved({ event, x, y, isDown }) {\n    if (!this.$services.has('ticked')) {\n      this.$services.enable('ticked');\n    }\n\n    this.pointerX = x;\n    this.pointerY = y;\n\n    let scale = 1;\n\n    if (!event) {\n      this.pointerScale = scale;\n      return;\n    }\n\n    const shouldGrow =\n      (event.target instanceof Element && event.target.matches(this.$options.growSelectors)) ||\n      false;\n    const shouldReduce =\n      isDown ||\n      (event.target instanceof Element && event.target.matches(this.$options.shrinkSelectors)) ||\n      false;\n\n    if (shouldGrow) {\n      scale = this.$options.growTo;\n    }\n\n    if (shouldReduce) {\n      scale = this.$options.shrinkTo;\n    }\n\n    this.pointerScale = scale;\n  }\n\n  /**\n   * RequestAnimationFrame hook.\n   *\n   * @this {CursorInterface}\n   *\n   * @return {void}\n   */\n  ticked() {\n    this.x = damp(this.pointerX, this.x, this.$options.translateDampFactor);\n    this.y = damp(this.pointerY, this.y, this.$options.translateDampFactor);\n    this.scale = damp(\n      this.pointerScale,\n      this.scale,\n      this.pointerScale < this.scale ? this.$options.shrinkDampFactor : this.$options.growDampFactor\n    );\n\n    this.render({ x: this.x, y: this.y, scale: this.scale });\n\n    if (this.x === this.pointerX && this.y === this.pointerY && this.scale === this.pointerScale) {\n      this.$services.disable('ticked');\n    }\n  }\n\n  /**\n   * Render the cursor.\n   *\n   * @param  {Object} options\n   * @param  {Number} options.x\n   * @param  {Number} options.y\n   * @param  {Number} options.scale\n   * @return {void}\n   */\n  render({ x, y, scale }) {\n    const transform = matrix({\n      translateX: x,\n      translateY: y,\n      scaleX: scale,\n      scaleY: scale,\n    });\n    this.$el.style.transform = `translateZ(0) ${transform}`;\n  }\n}\n"],"file":"Cursor.js"}

package/components/Draggable.d.ts

@@ -1,49 +0,0 @@
-/**
- * @typedef {import('stylefire').Styler} Styler
- * @typedef {import('../services/drag.js').DragServiceProps} DragServiceProps
- */
-/**
- * @typedef {Draggable} DraggableInterface
- */
-/**
- * Draggable class.
- *
- * @link https://jsfiddle.net/soulwire/znj683b9/
- */
-export default class Draggable extends Base {
-    static config: {
-        name: string;
-    };
-    /**
-     * The origin of the element.
-     * @type {{ x: number, y: number }}
-     */
-    elementOrigin: {
-        x: number;
-        y: number;
-    };
-    /**
-     * The element styler for performant style update.
-     * @type {Styler}
-     */
-    styler: Styler;
-    /**
-     * Mounted hook.
-     * @return {void}
-     */
-    mounted(): void;
-    /**
-     * Destroyed hook.
-     * @return {void}
-     */
-    destroyed(): void;
-    /**
-     * Drag service hook.
-     * @param {DragServiceProps} props
-     */
-    dragged(props: DragServiceProps): void;
-}
-export type Styler = import('stylefire').Styler;
-export type DragServiceProps = import('../services/drag.js').DragServiceProps;
-export type DraggableInterface = Draggable;
-import Base from "../Base/index.js";

package/components/Draggable.js

@@ -1,43 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import styler from 'stylefire';
-import Base from '../Base/index.js';
-import withDrag from '../decorators/withDrag.js';
-export default class Draggable extends withDrag(Base) {
-  constructor() {
-    super(...arguments);
-
-    _defineProperty(this, "elementOrigin", {
-      x: 0,
-      y: 0
-    });
-
-    _defineProperty(this, "styler", void 0);
-  }
-
-  mounted() {
-    this.styler = styler(this.$el);
-  }
-
-  destroyed() {
-    this.styler = undefined;
-  }
-
-  dragged(props) {
-    if (props.mode === 'start') {
-      this.elementOrigin.x = this.styler.get('x');
-      this.elementOrigin.y = this.styler.get('y');
-      return;
-    }
-
-    this.styler.set({
-      x: this.elementOrigin.x + props.x - props.origin.x,
-      y: this.elementOrigin.y + props.y - props.origin.y
-    });
-  }
-
-}
-
-_defineProperty(Draggable, "config", {
-  name: 'DraggableElement'
-});
-//# sourceMappingURL=Draggable.js.map

package/components/Draggable.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../packages/js-toolkit/components/Draggable.js"],"names":["styler","Base","withDrag","Draggable","x","y","mounted","$el","destroyed","undefined","dragged","props","mode","elementOrigin","get","set","origin","name"],"mappings":";AAAA,OAAOA,MAAP,MAAmB,WAAnB;AACA,OAAOC,IAAP,MAAiB,kBAAjB;AACA,OAAOC,QAAP,MAAqB,2BAArB;AAgBA,eAAe,MAAMC,SAAN,SAAwBD,QAAQ,CAACD,IAAD,CAAhC,CAAuC;AAAA;AAAA;;AAAA,2CASpC;AACdG,MAAAA,CAAC,EAAE,CADW;AAEdC,MAAAA,CAAC,EAAE;AAFW,KAToC;;AAAA;AAAA;;AAwBpDC,EAAAA,OAAO,GAAG;AACR,SAAKN,MAAL,GAAcA,MAAM,CAAC,KAAKO,GAAN,CAApB;AACD;;AAMDC,EAAAA,SAAS,GAAG;AACV,SAAKR,MAAL,GAAcS,SAAd;AACD;;AAMDC,EAAAA,OAAO,CAACC,KAAD,EAAQ;AACb,QAAIA,KAAK,CAACC,IAAN,KAAe,OAAnB,EAA4B;AAC1B,WAAKC,aAAL,CAAmBT,CAAnB,GAAuB,KAAKJ,MAAL,CAAYc,GAAZ,CAAgB,GAAhB,CAAvB;AACA,WAAKD,aAAL,CAAmBR,CAAnB,GAAuB,KAAKL,MAAL,CAAYc,GAAZ,CAAgB,GAAhB,CAAvB;AACA;AACD;;AAED,SAAKd,MAAL,CAAYe,GAAZ,CAAgB;AACdX,MAAAA,CAAC,EAAE,KAAKS,aAAL,CAAmBT,CAAnB,GAAuBO,KAAK,CAACP,CAA7B,GAAiCO,KAAK,CAACK,MAAN,CAAaZ,CADnC;AAEdC,MAAAA,CAAC,EAAE,KAAKQ,aAAL,CAAmBR,CAAnB,GAAuBM,KAAK,CAACN,CAA7B,GAAiCM,KAAK,CAACK,MAAN,CAAaX;AAFnC,KAAhB;AAID;;AAnDmD;;gBAAjCF,S,YACH;AACdc,EAAAA,IAAI,EAAE;AADQ,C","sourcesContent":["import styler from 'stylefire';\nimport Base from '../Base/index.js';\nimport withDrag from '../decorators/withDrag.js';\n\n/**\n * @typedef {import('stylefire').Styler} Styler\n * @typedef {import('../services/drag.js').DragServiceProps} DragServiceProps\n */\n\n/**\n * @typedef {Draggable} DraggableInterface\n */\n\n/**\n * Draggable class.\n *\n * @link https://jsfiddle.net/soulwire/znj683b9/\n */\nexport default class Draggable extends withDrag(Base) {\n  static config = {\n    name: 'DraggableElement',\n  };\n\n  /**\n   * The origin of the element.\n   * @type {{ x: number, y: number }}\n   */\n  elementOrigin = {\n    x: 0,\n    y: 0,\n  };\n\n  /**\n   * The element styler for performant style update.\n   * @type {Styler}\n   */\n  styler;\n\n  /**\n   * Mounted hook.\n   * @return {void}\n   */\n  mounted() {\n    this.styler = styler(this.$el);\n  }\n\n  /**\n   * Destroyed hook.\n   * @return {void}\n   */\n  destroyed() {\n    this.styler = undefined;\n  }\n\n  /**\n   * Drag service hook.\n   * @param {DragServiceProps} props\n   */\n  dragged(props) {\n    if (props.mode === 'start') {\n      this.elementOrigin.x = this.styler.get('x');\n      this.elementOrigin.y = this.styler.get('y');\n      return;\n    }\n\n    this.styler.set({\n      x: this.elementOrigin.x + props.x - props.origin.x,\n      y: this.elementOrigin.y + props.y - props.origin.y,\n    });\n  }\n}\n"],"file":"Draggable.js"}

package/components/Modal.d.ts

@@ -1,158 +0,0 @@
-/**
- * @typedef {Object} ModalRefs
- * @property {HTMLElement} close
- * @property {HTMLElement} container
- * @property {HTMLElement} content
- * @property {HTMLElement} modal
- * @property {HTMLElement} open
- * @property {HTMLElement} overlay
- */
-/**
- * @typedef {import('../utils/css/styles.js').CssStyleObject} CssStyleObject
- * @typedef {Partial<Record<'open'|'active'|'closed', string|CssStyleObject>>} 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 {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
- */
-/**
- * Modal class.
- */
-export default class Modal extends Base {
-    /**
-     * Modal options.
-     */
-    static config: {
-        name: string;
-        refs: string[];
-        options: {
-            move: StringConstructor;
-            autofocus: {
-                type: StringConstructor;
-                default: string;
-            };
-            styles: {
-                type: ObjectConstructor;
-                /**
-                 * @return {ModalStylesOption}
-                 */
-                default: () => ModalStylesOption;
-            };
-        };
-    };
-    /**
-     * Open the modal on click on the `open` ref.
-     *
-     * @return {Function} The component's `open` method.
-     */
-    get onOpenClick(): Function;
-    /**
-     * Close the modal on click on the `close` ref.
-     *
-     * @return {Function} The component's `close` method.
-     */
-    get onCloseClick(): Function;
-    /**
-     * Close the modal on click on the `overlay` ref.
-     *
-     * @return {Function} The component's `close` method.
-     */
-    get onOverlayClick(): Function;
-    /**
-     * Initialize the component's behaviours.
-     *
-     * @this {ModalInterface}
-     */
-    mounted(): ModalInterface;
-    isOpen: boolean;
-    refModalPlaceholder: Comment;
-    refModalParentBackup: any;
-    refModalUnbindGetRefFilter: any;
-    /**
-     * Unbind all events on destroy.
-     *
-     * @this {ModalInterface}
-     * @return {Modal} The Modal instance.
-     */
-    destroyed(): Modal;
-    /**
-     * 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?
-     */
-    keyed({ event, isUp, isDown, ESC }: {
-        event: KeyboardEvent;
-        isUp: boolean;
-        isDown: boolean;
-        ESC: boolean;
-    }): void;
-    /**
-     * Open the modal.
-     *
-     * @this {ModalInterface}
-     * @return {Promise<ModalInterface>} The Modal instance.
-     */
-    open(): Promise<ModalInterface>;
-    /**
-     * Close the modal.
-     *
-     * @this {ModalInterface}
-     * @return {Promise<ModalInterface>} The Modal instance.
-     */
-    close(): Promise<ModalInterface>;
-}
-export type ModalRefs = {
-    close: HTMLElement;
-    container: HTMLElement;
-    content: HTMLElement;
-    modal: HTMLElement;
-    open: HTMLElement;
-    overlay: HTMLElement;
-};
-export type CssStyleObject = import('../utils/css/styles.js').CssStyleObject;
-export type ModalStates = Partial<Record<'open' | 'active' | 'closed', string | CssStyleObject>>;
-export type ModalStylesOption = Partial<Record<keyof ModalRefs, ModalStates>>;
-export type ModalOptions = {
-    /**
-     * 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;
-    /**
-     * The styles for the different state of the modal.
-     */
-    styles: ModalStylesOption;
-};
-export type ModalPrivateInterface = {
-    $refs: ModalRefs;
-    $options: ModalOptions;
-    isOpen: boolean;
-    refModalPlaceholder: Comment;
-    refModalParentBackup: HTMLElement;
-    refModalUnbindGetRefFilter: Function;
-};
-export type ModalInterface = Modal & ModalPrivateInterface;
-import Base from "../Base/index.js";

package/components/Modal.js

@@ -1,186 +0,0 @@
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import Base from '../Base/index.js';
-import transition from '../utils/css/transition.js';
-import { trap, untrap, saveActiveElement } from '../utils/focusTrap.js';
-export default 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) {
-      var target = document.querySelector(this.$options.move) || document.body;
-      var refsBackup = this.$refs;
-      this.refModalPlaceholder = document.createComment('');
-      this.refModalParentBackup = this.$refs.modal.parentElement || this.$el;
-      this.refModalParentBackup.insertBefore(this.refModalPlaceholder, this.$refs.modal);
-      this.refModalUnbindGetRefFilter = this.$on('get:refs', refs => {
-        Object.entries(refsBackup).forEach(_ref => {
-          var [key, ref] = _ref;
-
-          if (!refs[key]) {
-            refs[key] = ref;
-          }
-        });
-      });
-      target.appendChild(this.$refs.modal);
-    }
-
-    return this;
-  }
-
-  destroyed() {
-    this.close();
-
-    if (this.$options.move && this.refModalParentBackup) {
-      this.refModalParentBackup.insertBefore(this.$refs.modal, this.refModalPlaceholder);
-      this.refModalUnbindGetRefFilter();
-      this.refModalPlaceholder.remove();
-      delete this.refModalPlaceholder;
-      delete this.refModalParentBackup;
-      delete this.refModalUnbindGetRefFilter;
-    }
-
-    return this;
-  }
-
-  keyed(_ref2) {
-    var {
-      event,
-      isUp,
-      isDown,
-      ESC
-    } = _ref2;
-
-    if (!this.isOpen) {
-      return;
-    }
-
-    if (isDown) {
-      trap(this.$refs.modal, event);
-    }
-
-    if (ESC && isUp) {
-      this.close();
-    }
-  }
-
-  open() {
-    var _this = this;
-
-    return _asyncToGenerator(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');
-
-      var refs = _this.$refs;
-      return Promise.all(Object.entries(_this.$options.styles).map(_ref3 => {
-        var [refName, {
-          open,
-          active,
-          closed
-        } = {
-          open: '',
-          active: '',
-          closed: ''
-        }] = _ref3;
-        return transition(refs[refName], {
-          from: closed,
-          active,
-          to: open
-        }, 'keep');
-      })).then(() => {
-        if (_this.$options.autofocus && _this.$refs.modal.querySelector(_this.$options.autofocus)) {
-          saveActiveElement();
-
-          var autofocusElement = _this.$refs.modal.querySelector(_this.$options.autofocus);
-
-          autofocusElement.focus();
-        }
-
-        return Promise.resolve(_this);
-      });
-    })();
-  }
-
-  close() {
-    var _this2 = this;
-
-    return _asyncToGenerator(function* () {
-      if (!_this2.isOpen) {
-        return Promise.resolve(_this2);
-      }
-
-      _this2.$refs.modal.setAttribute('aria-hidden', 'true');
-
-      document.documentElement.style.overflow = '';
-      _this2.isOpen = false;
-      untrap();
-
-      _this2.$emit('close');
-
-      var refs = _this2.$refs;
-      return Promise.all(Object.entries(_this2.$options.styles).map(_ref4 => {
-        var [refName, {
-          open,
-          active,
-          closed
-        } = {
-          open: '',
-          active: '',
-          closed: ''
-        }] = _ref4;
-        return transition(refs[refName], {
-          from: open,
-          active,
-          to: closed
-        }, 'keep');
-      })).then(() => Promise.resolve(_this2));
-    })();
-  }
-
-}
-
-_defineProperty(Modal, "config", {
-  name: 'Modal',
-  refs: ['close', 'container', 'content', 'modal', 'open', 'overlay'],
-  options: {
-    move: String,
-    autofocus: {
-      type: String,
-      default: '[autofocus]'
-    },
-    styles: {
-      type: Object,
-      default: () => ({
-        modal: {
-          closed: {
-            opacity: '0',
-            pointerEvents: 'none',
-            visibility: 'hidden'
-          }
-        }
-      })
-    }
-  }
-});
-//# sourceMappingURL=Modal.js.map

package/components/Modal.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../packages/js-toolkit/components/Modal.js"],"names":["Base","transition","trap","untrap","saveActiveElement","Modal","onOpenClick","open","onCloseClick","close","onOverlayClick","mounted","isOpen","$options","move","target","document","querySelector","body","refsBackup","$refs","refModalPlaceholder","createComment","refModalParentBackup","modal","parentElement","$el","insertBefore","refModalUnbindGetRefFilter","$on","refs","Object","entries","forEach","key","ref","appendChild","destroyed","remove","keyed","event","isUp","isDown","ESC","Promise","resolve","setAttribute","documentElement","style","overflow","$emit","all","styles","map","refName","active","closed","from","to","then","autofocus","autofocusElement","focus","name","options","String","type","default","opacity","pointerEvents","visibility"],"mappings":"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","sourcesContent":["import Base from '../Base/index.js';\nimport transition from '../utils/css/transition.js';\nimport { trap, untrap, saveActiveElement } from '../utils/focusTrap.js';\n\n/**\n * @typedef {Object} ModalRefs\n * @property {HTMLElement} close\n * @property {HTMLElement} container\n * @property {HTMLElement} content\n * @property {HTMLElement} modal\n * @property {HTMLElement} open\n * @property {HTMLElement} overlay\n */\n\n/**\n * @typedef {import('../utils/css/styles.js').CssStyleObject} CssStyleObject\n * @typedef {Partial<Record<'open'|'active'|'closed', string|CssStyleObject>>} ModalStates\n * @typedef {Partial<Record<keyof ModalRefs, ModalStates>>} ModalStylesOption\n */\n\n/**\n * @typedef {Object} ModalOptions\n * @property {String}            move      A selector where to move the modal to.\n * @property {String}            autofocus A selector for the element to set the focus to when the modal opens.\n * @property {ModalStylesOption} styles    The styles for the different state of the modal.\n */\n\n/**\n * @typedef {Object} ModalPrivateInterface\n * @property {ModalRefs} $refs\n * @property {ModalOptions} $options\n * @property {Boolean} isOpen\n * @property {Comment} refModalPlaceholder\n * @property {HTMLElement} refModalParentBackup\n * @property {Function} refModalUnbindGetRefFilter\n */\n\n/**\n * @typedef {Modal & ModalPrivateInterface} ModalInterface\n */\n\n/**\n * Modal class.\n */\nexport default class Modal extends Base {\n  /**\n   * Modal options.\n   */\n  static config = {\n    name: 'Modal',\n    refs: ['close', 'container', 'content', 'modal', 'open', 'overlay'],\n    options: {\n      move: String,\n      autofocus: { type: String, default: '[autofocus]' },\n      styles: {\n        type: Object,\n        /**\n         * @return {ModalStylesOption}\n         */\n        default: () => ({\n          modal: {\n            closed: {\n              opacity: '0',\n              pointerEvents: 'none',\n              visibility: 'hidden',\n            },\n          },\n        }),\n      },\n    },\n  };\n\n  /**\n   * Open the modal on click on the `open` ref.\n   *\n   * @return {Function} The component's `open` method.\n   */\n  get onOpenClick() {\n    return this.open;\n  }\n\n  /**\n   * Close the modal on click on the `close` ref.\n   *\n   * @return {Function} The component's `close` method.\n   */\n  get onCloseClick() {\n    return this.close;\n  }\n\n  /**\n   * Close the modal on click on the `overlay` ref.\n   *\n   * @return {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   * @this {ModalInterface}\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      const refsBackup = this.$refs;\n\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      this.refModalUnbindGetRefFilter = this.$on(\n        'get:refs',\n        /**\n         * @param {ModalRefs} refs\n         */\n        // @ts-ignore\n        (refs) => {\n          Object.entries(refsBackup).forEach(([key, ref]) => {\n            if (!refs[key]) {\n              refs[key] = ref;\n            }\n          });\n        }\n      );\n      target.appendChild(this.$refs.modal);\n    }\n\n    return this;\n  }\n\n  /**\n   * Unbind all events on destroy.\n   *\n   * @this {ModalInterface}\n   * @return {Modal} The Modal instance.\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.refModalUnbindGetRefFilter();\n      this.refModalPlaceholder.remove();\n      delete this.refModalPlaceholder;\n      delete this.refModalParentBackup;\n      delete this.refModalUnbindGetRefFilter;\n    }\n\n    return this;\n  }\n\n  /**\n   * Close the modal on `ESC` and trap the tabulation.\n   *\n   * @this {ModalInterface}\n   * @param  {Object}        options\n   * @param  {KeyboardEvent} options.event  The original keyboard event\n   * @param  {Boolean}       options.isUp   Is it a keyup event?\n   * @param  {Boolean}       options.isDown Is it a keydown event?\n   * @param  {Boolean}       options.ESC    Is it the ESC key?\n   */\n  keyed({ event, isUp, isDown, ESC }) {\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   * @this {ModalInterface}\n   * @return {Promise<ModalInterface>} The Modal instance.\n   */\n  async open() {\n    if (this.isOpen) {\n      return Promise.resolve(this);\n    }\n\n    this.$refs.modal.setAttribute('aria-hidden', 'false');\n    document.documentElement.style.overflow = 'hidden';\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        /** @type {HTMLElement} */\n        const autofocusElement = this.$refs.modal.querySelector(this.$options.autofocus);\n        autofocusElement.focus();\n      }\n      return Promise.resolve(this);\n    });\n  }\n\n  /**\n   * Close the modal.\n   *\n   * @this {ModalInterface}\n   * @return {Promise<ModalInterface>} The Modal instance.\n   */\n  async close() {\n    if (!this.isOpen) {\n      return Promise.resolve(this);\n    }\n\n    this.$refs.modal.setAttribute('aria-hidden', 'true');\n    document.documentElement.style.overflow = '';\n\n    this.isOpen = false;\n    untrap();\n    this.$emit('close');\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: open,\n              active,\n              to: closed,\n            },\n            'keep'\n          )\n      )\n    ).then(() => Promise.resolve(this));\n  }\n}\n"],"file":"Modal.js"}