@studiometa/ui 0.2.8 → 0.2.9

package/atoms/Cursor/Cursor.cjs

@@ -51,7 +51,7 @@ var Cursor = class extends import_js_toolkit.Base {
     }
     this.pointerX = x;
     this.pointerY = y;
-    let scale = 1;
+    let { scale } = this.$options;
     if (!event) {
       this.pointerScale = scale;
       return;
@@ -96,6 +96,10 @@ __publicField(Cursor, "config", {
       type: String,
       default: "[data-cursor-shrink], [data-cursor-shrink] *"
     },
+    scale: {
+      type: Number,
+      default: 1
+    },
     growTo: {
       type: Number,
       default: 2

package/atoms/Cursor/Cursor.d.ts

@@ -6,6 +6,7 @@
  * @typedef {Object} CursorOptions
  * @property {string} growSelectors
  * @property {string} shrinkSelectors
+ * @property {number} scale
  * @property {number} growTo
  * @property {number} shrinkTo
  * @property {number} translateDampFactor
@@ -37,6 +38,10 @@ export default class Cursor extends Base {
                 type: StringConstructor;
                 default: string;
             };
+            scale: {
+                type: NumberConstructor;
+                default: number;
+            };
             growTo: {
                 type: NumberConstructor;
                 default: number;
@@ -125,6 +130,7 @@ export type BaseOptions = import('@studiometa/js-toolkit/Base').BaseOptions;
 export type CursorOptions = {
     growSelectors: string;
     shrinkSelectors: string;
+    scale: number;
     growTo: number;
     shrinkTo: number;
     translateDampFactor: number;

package/atoms/Cursor/Cursor.js

@@ -1 +1 @@
-import{Base as n}from"@studiometa/js-toolkit";import{damp as a,matrix as c}from"@studiometa/js-toolkit/utils";class l extends n{static 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:.5},translateDampFactor:{type:Number,default:.25},growDampFactor:{type:Number,default:.25},shrinkDampFactor:{type:Number,default:.25}}};x=0;y=0;scale=0;pointerX=0;pointerY=0;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({event:t,x:i,y:s,isDown:r}){this.$services.has("ticked")||this.$services.enable("ticked"),this.pointerX=i,this.pointerY=s;let e=1;if(!t){this.pointerScale=e;return}const o=t.target instanceof Element&&t.target.matches(this.$options.growSelectors)||!1,h=r||t.target instanceof Element&&t.target.matches(this.$options.shrinkSelectors)||!1;o&&(e=this.$options.growTo),h&&(e=this.$options.shrinkTo),this.pointerScale=e}ticked(){this.x=a(this.pointerX,this.x,this.$options.translateDampFactor),this.y=a(this.pointerY,this.y,this.$options.translateDampFactor),this.scale=a(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}),this.x===this.pointerX&&this.y===this.pointerY&&this.scale===this.pointerScale&&this.$services.disable("ticked")}render({x:t,y:i,scale:s}){const r=c({translateX:t,translateY:i,scaleX:s,scaleY:s});this.$el.style.transform=`translateZ(0) ${r}`}}export{l as default};
+import{Base as n}from"@studiometa/js-toolkit";import{damp as a,matrix as c}from"@studiometa/js-toolkit/utils";class l extends n{static 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] *"},scale:{type:Number,default:1},growTo:{type:Number,default:2},shrinkTo:{type:Number,default:.5},translateDampFactor:{type:Number,default:.25},growDampFactor:{type:Number,default:.25},shrinkDampFactor:{type:Number,default:.25}}};x=0;y=0;scale=0;pointerX=0;pointerY=0;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({event:t,x:i,y:s,isDown:r}){this.$services.has("ticked")||this.$services.enable("ticked"),this.pointerX=i,this.pointerY=s;let{scale:e}=this.$options;if(!t){this.pointerScale=e;return}const o=t.target instanceof Element&&t.target.matches(this.$options.growSelectors)||!1,h=r||t.target instanceof Element&&t.target.matches(this.$options.shrinkSelectors)||!1;o&&(e=this.$options.growTo),h&&(e=this.$options.shrinkTo),this.pointerScale=e}ticked(){this.x=a(this.pointerX,this.x,this.$options.translateDampFactor),this.y=a(this.pointerY,this.y,this.$options.translateDampFactor),this.scale=a(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}),this.x===this.pointerX&&this.y===this.pointerY&&this.scale===this.pointerScale&&this.$services.disable("ticked")}render({x:t,y:i,scale:s}){const r=c({translateX:t,translateY:i,scaleX:s,scaleY:s});this.$el.style.transform=`translateZ(0) ${r}`}}export{l as default};

package/atoms/LargeText/LargeText.cjs

@@ -30,11 +30,11 @@ module.exports = __toCommonJS(LargeText_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
 var import_utils = require("@studiometa/js-toolkit/utils");
 var LargeText = class extends (0, import_js_toolkit.withMountWhenInView)(import_js_toolkit.Base, { rootMargin: "50%" }) {
-  translateX = 0;
+  x = 0;
   deltaY = 0;
   transform = {
     skewX: 0,
-    translateX: 0
+    x: 0
   };
   width = 0;
   mounted() {
@@ -47,17 +47,17 @@ var LargeText = class extends (0, import_js_toolkit.withMountWhenInView)(import_
     this.deltaY = props.delta.y;
   }
   ticked() {
-    this.translateX -= (Math.abs(this.deltaY) + 1) * this.$options.sensitivity;
-    this.transform.translateX = (0, import_utils.damp)(this.translateX, this.transform.translateX, 0.25);
+    this.x -= (Math.abs(this.deltaY) + 1) * this.$options.sensitivity;
+    this.transform.x = (0, import_utils.damp)(this.x, this.transform.x, 0.25);
     if (this.$options.skew) {
-      this.transform.skewX = (0, import_utils.damp)((0, import_utils.clamp)(this.deltaY / 20 * -1, -0.5, 0.5) * this.$options.skewSensitivity, this.transform.skewX, 0.25);
+      this.transform.skewX = (0, import_utils.damp)((0, import_utils.clamp)(this.deltaY * -1, -50, 50) * this.$options.skewSensitivity, this.transform.skewX, 0.25);
     }
-    if (this.translateX <= this.width * -1) {
-      this.translateX = 0;
-      this.transform.translateX += this.width;
-    } else if (this.$options.sensitivity < 0 && this.translateX >= this.width) {
-      this.translateX = 0;
-      this.transform.translateX -= this.width;
+    if (this.x <= this.width * -1) {
+      this.x = 0;
+      this.transform.x += this.width;
+    } else if (this.$options.sensitivity < 0 && this.x >= this.width) {
+      this.x = 0;
+      this.transform.x -= this.width;
     }
     return () => {
       (0, import_utils.transform)(this.$refs.target, this.transform);

package/atoms/LargeText/LargeText.d.ts

@@ -34,7 +34,7 @@ export default class LargeText extends Base {
      * Translate X.
      * @type {number}
      */
-    translateX: number;
+    x: number;
     /**
      * Scroll delta Y.
      * @type {number}
@@ -45,7 +45,7 @@ export default class LargeText extends Base {
      */
     transform: {
         skewX: number;
-        translateX: number;
+        x: number;
     };
     /**
      * Target width.

package/atoms/LargeText/LargeText.js

@@ -1 +1 @@
-import{Base as i,withMountWhenInView as e}from"@studiometa/js-toolkit";import{damp as t,clamp as a,transform as r}from"@studiometa/js-toolkit/utils";class n extends e(i,{rootMargin:"50%"}){static config={name:"LargeText",refs:["target"],options:{skew:Boolean,sensitivity:{type:Number,default:1},skewSensitivity:{type:Number,default:1}}};translateX=0;deltaY=0;transform={skewX:0,translateX:0};width=0;mounted(){this.width=this.$refs.target.clientWidth}resized(){this.width=this.$refs.target.clientWidth}scrolled(s){this.deltaY=s.delta.y}ticked(){return this.translateX-=(Math.abs(this.deltaY)+1)*this.$options.sensitivity,this.transform.translateX=t(this.translateX,this.transform.translateX,.25),this.$options.skew&&(this.transform.skewX=t(a(this.deltaY/20*-1,-.5,.5)*this.$options.skewSensitivity,this.transform.skewX,.25)),this.translateX<=this.width*-1?(this.translateX=0,this.transform.translateX+=this.width):this.$options.sensitivity<0&&this.translateX>=this.width&&(this.translateX=0,this.transform.translateX-=this.width),()=>{r(this.$refs.target,this.transform)}}}export{n as default};
+import{Base as s,withMountWhenInView as e}from"@studiometa/js-toolkit";import{damp as t,clamp as h,transform as r}from"@studiometa/js-toolkit/utils";class a extends e(s,{rootMargin:"50%"}){static config={name:"LargeText",refs:["target"],options:{skew:Boolean,sensitivity:{type:Number,default:1},skewSensitivity:{type:Number,default:1}}};x=0;deltaY=0;transform={skewX:0,x:0};width=0;mounted(){this.width=this.$refs.target.clientWidth}resized(){this.width=this.$refs.target.clientWidth}scrolled(i){this.deltaY=i.delta.y}ticked(){return this.x-=(Math.abs(this.deltaY)+1)*this.$options.sensitivity,this.transform.x=t(this.x,this.transform.x,.25),this.$options.skew&&(this.transform.skewX=t(h(this.deltaY*-1,-50,50)*this.$options.skewSensitivity,this.transform.skewX,.25)),this.x<=this.width*-1?(this.x=0,this.transform.x+=this.width):this.$options.sensitivity<0&&this.x>=this.width&&(this.x=0,this.transform.x-=this.width),()=>{r(this.$refs.target,this.transform)}}}export{a as default};

package/atoms/LargeText/LargeText.twig

@@ -18,7 +18,7 @@
   merge_html_attributes(
     attr ?? null,
     { data_component: 'LargeText' },
-    { class: 'overflow-x-hidden pointer-events-none' }
+    { class: 'overflow-x-hidden pointer-events-none', style: { contain: 'content' } }
   )
 %}
 

package/molecules/Menu/Menu.cjs

@@ -35,20 +35,11 @@ var import_utils = require("@studiometa/js-toolkit/utils");
 var import_MenuBtn = __toESM(require("./MenuBtn.cjs"), 1);
 var import_MenuList = __toESM(require("./MenuList.cjs"), 1);
 var _Menu = class extends import_js_toolkit.Base {
-  getDirectChildren(name) {
-    if (!this.$children[name]) {
-      return [];
-    }
-    if (!this.$children.Menu) {
-      return this.$children[name];
-    }
-    return this.$children[name].filter((child) => this.$children.Menu.every((menu) => menu.$children[name] ? !menu.$children[name].includes(child) : true));
-  }
   get menuList() {
-    return this.getDirectChildren("MenuList")[0];
+    return (0, import_js_toolkit.getDirectChildren)(this, "Menu", "MenuList")[0];
   }
   get menuBtn() {
-    return this.getDirectChildren("MenuBtn")[0];
+    return (0, import_js_toolkit.getDirectChildren)(this, "Menu", "MenuBtn")[0];
   }
   get shouldReactOnClick() {
     return this.$options.mode === "click";
@@ -80,18 +71,18 @@ var _Menu = class extends import_js_toolkit.Base {
       }
     }
   }
-  onMenuBtnBtnClick(event, index) {
-    if (this.$children.MenuBtn[index] === this.menuBtn && this.shouldReactOnClick) {
+  onMenuBtnClick(index, event) {
+    if ((0, import_js_toolkit.isDirectChild)(this, "Menu", "MenuBtn", this.$children.MenuBtn[index]) && this.shouldReactOnClick) {
       event.preventDefault();
       this.toggle();
     }
   }
-  onMenuBtnBtnMouseenter(event, index) {
+  onMenuBtnMouseenter(index) {
     if (this.$children.MenuBtn[index] === this.menuBtn && !this.shouldReactOnClick) {
       this.open();
     }
   }
-  onMenuBtnBtnMouseleave() {
+  onMenuBtnMouseleave() {
     if (this.shouldReactOnClick) {
       return;
     }
@@ -101,7 +92,7 @@ var _Menu = class extends import_js_toolkit.Base {
       }
     });
   }
-  onMenuListItemsMouseleave() {
+  onMenuListMouseleave() {
     if (this.shouldReactOnClick) {
       return;
     }

package/molecules/Menu/Menu.d.ts

@@ -4,6 +4,9 @@
  *     Menu: Menu[],
  *     MenuBtn: MenuBtn[],
  *     MenuList: MenuList[],
+ *   },
+ *   $options: {
+ *     mode: 'click'|'hover'
  *   }
  * }} MenuInterface
  */
@@ -29,14 +32,6 @@ export default class Menu extends Base {
             };
         };
     };
-    /**
-     * Get direct children.
-     *
-     * @this    {MenuInterface}
-     * @param   {string} name
-     * @returns {any[]}
-     */
-    getDirectChildren(this: MenuInterface, name: string): any[];
     /**
      * Get the first `MenuList` instance.
      *
@@ -79,31 +74,33 @@ export default class Menu extends Base {
      * Toggle menu items on button click;
      *
      * @this    {MenuInterface}
+     * @param   {number} index
      * @param   {MouseEvent} event
      * @returns {void}
      */
-    onMenuBtnBtnClick(this: MenuInterface, event: MouseEvent, index: any): void;
+    onMenuBtnClick(this: MenuInterface, index: number, event: MouseEvent): void;
     /**
      * Open menu items on button mouse enter.
      *
      * @this    {MenuInterface}
+     * @param   {number} index
      * @returns {void}
      */
-    onMenuBtnBtnMouseenter(this: MenuInterface, event: any, index: any): void;
+    onMenuBtnMouseenter(this: MenuInterface, index: number): void;
     /**
      * Close menu items on button mouse leave.
      *
      * @this    {MenuInterface}
      * @returns {void}
      */
-    onMenuBtnBtnMouseleave(this: MenuInterface): void;
+    onMenuBtnMouseleave(this: MenuInterface): void;
     /**
      * Close menu items on button mouse leave.
      *
      * @this    {MenuInterface}
      * @returns {void}
      */
-    onMenuListItemsMouseleave(this: MenuInterface): void;
+    onMenuListMouseleave(this: MenuInterface): void;
     /**
      * Close other non-parent menu items on menu items open.
      *
@@ -134,6 +131,9 @@ export type MenuInterface = Menu & {
         MenuBtn: MenuBtn[];
         MenuList: MenuList[];
     };
+    $options: {
+        mode: 'click' | 'hover';
+    };
 };
 import { Base } from "@studiometa/js-toolkit";
 import MenuList from "./MenuList.js";

package/molecules/Menu/Menu.js

@@ -1 +1 @@
-import{Base as h}from"@studiometa/js-toolkit";import{nextTick as s}from"@studiometa/js-toolkit/utils";import u from"./MenuBtn.js";import o from"./MenuList.js";class n extends h{static config={name:"Menu",debug:!0,components:{MenuBtn:u,MenuList:o,Menu:n},options:{mode:{type:String,default:"click"}}};getDirectChildren(t){return this.$children[t]?this.$children.Menu?this.$children[t].filter(e=>this.$children.Menu.every(i=>i.$children[t]?!i.$children[t].includes(e):!0)):this.$children[t]:[]}get menuList(){return this.getDirectChildren("MenuList")[0]}get menuBtn(){return this.getDirectChildren("MenuBtn")[0]}get shouldReactOnClick(){return this.$options.mode==="click"}get isHover(){return this.menuBtn.isHover||this.menuList.isHover}mounted(){if(!this.menuBtn||!this.menuList){this.$destroy();return}this.menuBtn.$el.setAttribute("aria-controls",this.$id),this.menuList.$el.setAttribute("id",this.$id),this.menuList.close()}keyed({ENTER:t,ESC:e,isUp:i}){if(!!i){if(e){this.close();return}if(!this.shouldReactOnClick){const r=document.activeElement===this.menuBtn.$el;t&&r&&this.toggle()}}}onMenuBtnBtnClick(t,e){this.$children.MenuBtn[e]===this.menuBtn&&this.shouldReactOnClick&&(t.preventDefault(),this.toggle())}onMenuBtnBtnMouseenter(t,e){this.$children.MenuBtn[e]===this.menuBtn&&!this.shouldReactOnClick&&this.open()}onMenuBtnBtnMouseleave(){this.shouldReactOnClick||s(()=>{this.isHover||this.close()})}onMenuListItemsMouseleave(){this.shouldReactOnClick||s(()=>{this.isHover||this.close()})}onMenuListItemsOpen(t){const e=this.$children.MenuList[t];this.$children.MenuList.forEach(i=>{i.$el.contains(e.$el)||i.close()})}close(){this.menuList.close()}open(){this.menuList.open()}toggle(){this.menuList.toggle()}}export{n as default};
+import{Base as h,isDirectChild as r,getDirectChildren as s}from"@studiometa/js-toolkit";import{nextTick as o}from"@studiometa/js-toolkit/utils";import l from"./MenuBtn.js";import c from"./MenuList.js";class n extends h{static config={name:"Menu",debug:!0,components:{MenuBtn:l,MenuList:c,Menu:n},options:{mode:{type:String,default:"click"}}};get menuList(){return s(this,"Menu","MenuList")[0]}get menuBtn(){return s(this,"Menu","MenuBtn")[0]}get shouldReactOnClick(){return this.$options.mode==="click"}get isHover(){return this.menuBtn.isHover||this.menuList.isHover}mounted(){if(!this.menuBtn||!this.menuList){this.$destroy();return}this.menuBtn.$el.setAttribute("aria-controls",this.$id),this.menuList.$el.setAttribute("id",this.$id),this.menuList.close()}keyed({ENTER:t,ESC:e,isUp:i}){if(!!i){if(e){this.close();return}if(!this.shouldReactOnClick){const u=document.activeElement===this.menuBtn.$el;t&&u&&this.toggle()}}}onMenuBtnClick(t,e){r(this,"Menu","MenuBtn",this.$children.MenuBtn[t])&&this.shouldReactOnClick&&(e.preventDefault(),this.toggle())}onMenuBtnMouseenter(t){this.$children.MenuBtn[t]===this.menuBtn&&!this.shouldReactOnClick&&this.open()}onMenuBtnMouseleave(){this.shouldReactOnClick||o(()=>{this.isHover||this.close()})}onMenuListMouseleave(){this.shouldReactOnClick||o(()=>{this.isHover||this.close()})}onMenuListItemsOpen(t){const e=this.$children.MenuList[t];this.$children.MenuList.forEach(i=>{i.$el.contains(e.$el)||i.close()})}close(){this.menuList.close()}open(){this.menuList.open()}toggle(){this.menuList.toggle()}}export{n as default};

package/molecules/Menu/MenuBtn.cjs

@@ -32,22 +32,18 @@ var MenuBtn = class extends import_js_toolkit.Base {
   isHover = false;
   onClick(event) {
     event.stopPropagation();
-    this.$emit("btn-click", event);
   }
   onMouseenter(event) {
     this.isHover = true;
     event.stopPropagation();
-    this.$emit("btn-mouseenter", event);
   }
   onMouseleave(event) {
     this.isHover = false;
     event.stopPropagation();
-    this.$emit("btn-mouseleave", event);
   }
 };
 __publicField(MenuBtn, "config", {
   name: "MenuBtn",
-  debug: true,
-  emits: ["btn-click", "btn-mouseenter", "btn-mouseleave"]
+  debug: true
 });
 if (module.exports.default) module.exports = module.exports.default;

package/molecules/Menu/MenuBtn.d.ts

@@ -8,7 +8,6 @@ export default class MenuBtn extends Base {
     static config: {
         name: string;
         debug: boolean;
-        emits: string[];
     };
     /**
      * Wether the button is hovered or not.

package/molecules/Menu/MenuBtn.js

@@ -1 +1 @@
-import{Base as t}from"@studiometa/js-toolkit";class o extends t{static config={name:"MenuBtn",debug:!0,emits:["btn-click","btn-mouseenter","btn-mouseleave"]};isHover=!1;onClick(e){e.stopPropagation(),this.$emit("btn-click",e)}onMouseenter(e){this.isHover=!0,e.stopPropagation(),this.$emit("btn-mouseenter",e)}onMouseleave(e){this.isHover=!1,e.stopPropagation(),this.$emit("btn-mouseleave",e)}}export{o as default};
+import{Base as o}from"@studiometa/js-toolkit";class t extends o{static config={name:"MenuBtn",debug:!0};isHover=!1;onClick(e){e.stopPropagation()}onMouseenter(e){this.isHover=!0,e.stopPropagation()}onMouseleave(e){this.isHover=!1,e.stopPropagation()}}export{t as default};

package/molecules/Menu/MenuList.cjs

@@ -59,9 +59,8 @@ var _MenuList = class extends import_Transition.default {
   onMouseenter() {
     this.isHover = true;
   }
-  onMouseleave(event) {
+  onMouseleave() {
     this.isHover = false;
-    this.$emit("items-mouseleave", event);
   }
   open() {
     if (this.isOpen) {

package/molecules/Menu/MenuList.d.ts

@@ -54,10 +54,9 @@ export default class MenuList extends Transition {
     /**
      * Unset hover state.
      *
-     * @param   {MouseEvent} event
      * @returns {void}
      */
-    onMouseleave(event: MouseEvent): void;
+    onMouseleave(): void;
     /**
      * Display the menu items.
      *

package/molecules/Menu/MenuList.js

@@ -1 +1 @@
-import n from"../../primitives/Transition/Transition.js";const o=["a[href]:not([inert])","area[href]:not([inert])","input:not([disabled]):not([inert])","select:not([disabled]):not([inert])","textarea:not([disabled]):not([inert])","button:not([disabled]):not([inert])","iframe:not([inert])","audio:not([inert])","video:not([inert])","[contenteditable]:not([inert])","[tabindex]:not([inert])"].join(",");class s extends n{static config={...n.config,name:"MenuList",emits:["items-open","items-close","items-mouseleave"],components:{MenuList:s}};isOpen=!1;isHover=!1;get $options(){const e=super.$options;return e.leaveKeep=!0,e.enterKeep=!0,e}mounted(){this.__updateTabIndexes("close")}onMouseenter(){this.isHover=!0}onMouseleave(e){this.isHover=!1,this.$emit("items-mouseleave",e)}open(){if(this.isOpen)return;const e=t=>{this.$el.contains(t.target)||(document.removeEventListener("click",e),this.close())};document.addEventListener("click",e),this.__updateTabIndexes("open"),this.$el.setAttribute("aria-hidden","false"),this.isOpen=!0,this.enter(),this.$emit("items-open")}close(){!this.isOpen||(this.$children.MenuList.forEach(e=>{e.close()}),document.activeElement instanceof HTMLElement&&this.$el.contains(document.activeElement)&&document.activeElement.blur(),this.$el.setAttribute("aria-hidden","true"),this.__updateTabIndexes("close"),this.isOpen=!1,this.leave(),this.$emit("items-close"))}toggle(){console.log(this.$id,"toggle",this.isOpen),this.isOpen?this.close():this.open()}__updateTabIndexes(e="open"){Array.from(this.$el.querySelectorAll(o)).filter(i=>this.__filterFocusableItems(i)).forEach(i=>{e==="close"?i.setAttribute("tabindex","-1"):i.removeAttribute("tabindex")})}__filterFocusableItems(e){let t=e.parentElement;for(;t&&(!t.__base__||!t.__base__.has(this.constructor));)t=t.parentElement;return t===null||t===this.$el}}export{s as default};
+import n from"../../primitives/Transition/Transition.js";const o=["a[href]:not([inert])","area[href]:not([inert])","input:not([disabled]):not([inert])","select:not([disabled]):not([inert])","textarea:not([disabled]):not([inert])","button:not([disabled]):not([inert])","iframe:not([inert])","audio:not([inert])","video:not([inert])","[contenteditable]:not([inert])","[tabindex]:not([inert])"].join(",");class s extends n{static config={...n.config,name:"MenuList",emits:["items-open","items-close","items-mouseleave"],components:{MenuList:s}};isOpen=!1;isHover=!1;get $options(){const e=super.$options;return e.leaveKeep=!0,e.enterKeep=!0,e}mounted(){this.__updateTabIndexes("close")}onMouseenter(){this.isHover=!0}onMouseleave(){this.isHover=!1}open(){if(this.isOpen)return;const e=t=>{this.$el.contains(t.target)||(document.removeEventListener("click",e),this.close())};document.addEventListener("click",e),this.__updateTabIndexes("open"),this.$el.setAttribute("aria-hidden","false"),this.isOpen=!0,this.enter(),this.$emit("items-open")}close(){!this.isOpen||(this.$children.MenuList.forEach(e=>{e.close()}),document.activeElement instanceof HTMLElement&&this.$el.contains(document.activeElement)&&document.activeElement.blur(),this.$el.setAttribute("aria-hidden","true"),this.__updateTabIndexes("close"),this.isOpen=!1,this.leave(),this.$emit("items-close"))}toggle(){console.log(this.$id,"toggle",this.isOpen),this.isOpen?this.close():this.open()}__updateTabIndexes(e="open"){Array.from(this.$el.querySelectorAll(o)).filter(i=>this.__filterFocusableItems(i)).forEach(i=>{e==="close"?i.setAttribute("tabindex","-1"):i.removeAttribute("tabindex")})}__filterFocusableItems(e){let t=e.parentElement;for(;t&&(!t.__base__||!t.__base__.has(this.constructor));)t=t.parentElement;return t===null||t===this.$el}}export{s as default};

package/molecules/Modal/Modal.cjs

@@ -89,7 +89,9 @@ var Modal = class extends import_js_toolkit.Base {
       return Promise.resolve();
     }
     this.$refs.modal.setAttribute("aria-hidden", "false");
-    document.documentElement.style.overflow = "hidden";
+    if (this.$options.scrollLock) {
+      document.documentElement.style.overflow = "hidden";
+    }
     this.isOpen = true;
     this.$emit("open");
     const refs = this.$refs;
@@ -111,7 +113,9 @@ var Modal = class extends import_js_toolkit.Base {
       return Promise.resolve();
     }
     this.$refs.modal.setAttribute("aria-hidden", "true");
-    document.documentElement.style.overflow = "";
+    if (this.$options.scrollLock) {
+      document.documentElement.style.overflow = "";
+    }
     this.isOpen = false;
     untrap();
     this.$emit("close");
@@ -125,7 +129,7 @@ var Modal = class extends import_js_toolkit.Base {
 };
 __publicField(Modal, "config", {
   name: "Modal",
-  refs: ["close", "container", "content", "modal", "open", "overlay"],
+  refs: ["close[]", "container", "content", "modal", "open[]", "overlay"],
   emits: ["open", "close"],
   options: {
     move: String,
@@ -141,6 +145,10 @@ __publicField(Modal, "config", {
           }
         }
       })
+    },
+    scrollLock: {
+      type: Boolean,
+      default: true
     }
   }
 });

package/molecules/Modal/Modal.d.ts

@@ -1,10 +1,10 @@
 /**
  * @typedef {Object} ModalRefs
- * @property {HTMLElement} close
+ * @property {HTMLElement} close[]
  * @property {HTMLElement} container
  * @property {HTMLElement} content
  * @property {HTMLElement} modal
- * @property {HTMLElement} open
+ * @property {HTMLElement} open[]
  * @property {HTMLElement} overlay
  */
 /**
@@ -13,9 +13,10 @@
  */
 /**
  * @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.
+ * @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
@@ -54,6 +55,13 @@ export default class Modal extends Base {
                  */
                 default: () => ModalStylesOption;
             };
+            /**
+             * @return {ModalScrollLockOption}
+             */
+            scrollLock: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
         };
     };
     /**
@@ -141,6 +149,10 @@ export type ModalOptions = {
      * 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.
      */

package/molecules/Modal/Modal.js

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

package/molecules/Modal/Modal.twig

@@ -83,7 +83,10 @@
 
 <div {{ html_attributes(attributes) }}>
   {% block open %}
-    {% include '@ui/atoms/Button/Button.twig' with { label: 'Open', attr: { data_ref: 'open' } } %}
+    {% include '@ui/atoms/Button/Button.twig' with {
+      label: 'Open',
+      attr: { data_ref: 'open[]' }
+    } %}
   {% endblock %}
   <div {{ html_attributes(modal_attributes) }}>
     <div {{ html_attributes(overlay_attributes) }}></div>
@@ -93,7 +96,7 @@
           <div class="absolute top-0 right-0 m-2">
             {% include '@ui/atoms/Button/Button.twig' with {
               label: 'Close',
-              attr: { data_ref: 'close' }
+              attr: { data_ref: 'close[]' }
             } %}
           </div>
         {% endblock %}

package/molecules/Modal/StyledModal.twig

@@ -26,14 +26,17 @@
 {% extends '@ui/molecules/Modal/Modal.twig' %}
 
 {% block open %}
-  {% include '@ui/atoms/Button/StyledButton.twig' with { label: 'Open', attr: { data_ref: 'open' } } %}
+  {% include '@ui/atoms/Button/StyledButton.twig' with {
+    label: 'Open',
+    attr: { data_ref: 'open[]' }
+  } %}
 {% endblock %}
 
 {% block close %}
   <div class="absolute top-0 right-0 m-2">
     {% include '@ui/atoms/Button/StyledButton.twig' with {
       label: 'Close',
-      attr: { data_ref: 'close' }
+      attr: { data_ref: 'close[]' }
     } %}
   </div>
 {% endblock %}

package/molecules/Panel/StyledPanel.twig

@@ -12,17 +12,22 @@
 
 {% extends '@ui/molecules/Panel/Panel.twig' %}
 
-{% set container_attr = merge_html_attributes(container_attr ?? null, required={ class: 'bg-white' }) %}
+{% set container_attr =
+  merge_html_attributes(container_attr ?? null, required = { class: 'bg-white' })
+%}
 
 {% block open %}
-  {% include '@ui/atoms/Button/StyledButton.twig' with { label: 'Open', attr: { data_ref: 'open' } } %}
+  {% include '@ui/atoms/Button/StyledButton.twig' with {
+    label: 'Open',
+    attr: { data_ref: 'open[]' }
+  } %}
 {% endblock %}
 
 {% block close %}
   <div class="absolute top-0 right-0 m-2">
     {% include '@ui/atoms/Button/StyledButton.twig' with {
       label: 'Close',
-      attr: { data_ref: 'close' }
+      attr: { data_ref: 'close[]' }
     } %}
   </div>
 {% endblock %}

package/organisms/Frame/Frame.cjs

@@ -55,14 +55,8 @@ var _Frame = class extends import_js_toolkit.Base {
     }
     return this.$children[name].filter((child) => this.$children.Frame.every((frame) => frame.$children[name] ? !frame.$children[name].includes(child) : true));
   }
-  get directChildFrameAnchor() {
-    return this.getDirectChild("FrameAnchor");
-  }
-  get directChildFrameForm() {
-    return this.getDirectChild("FrameForm");
-  }
-  get directChildFrameTarget() {
-    return this.getDirectChild("FrameTarget");
+  get directChildrenFrameTarget() {
+    return (0, import_js_toolkit.getDirectChildren)(this, "Frame", "FrameTarget");
   }
   mounted() {
     if (this.$options.history) {
@@ -93,8 +87,8 @@ var _Frame = class extends import_js_toolkit.Base {
   onWindowPopstate(event) {
     this.goTo(window.location.href, event.state);
   }
-  onFrameAnchorFrameClick(event, index) {
-    if (!this.directChildFrameAnchor.includes(this.$children.FrameAnchor[index])) {
+  onFrameAnchorClick(event, index) {
+    if (!(0, import_js_toolkit.isDirectChild)(this, "Frame", "FrameAnchor", this.$children.FrameAnchor[index])) {
       return;
     }
     this.$log("onAFrameClick", event, index);
@@ -105,8 +99,8 @@ var _Frame = class extends import_js_toolkit.Base {
     }
     this.goTo(anchor.href);
   }
-  onFrameFormFrameSubmit(event, index) {
-    if (!this.directChildFrameForm.includes(this.$children.FrameForm[index])) {
+  onFrameFormSubmit(event, index) {
+    if (!(0, import_js_toolkit.isDirectChild)(this, "Frame", "FrameForm", this.$children.FrameForm[index])) {
       return;
     }
     this.$log("onFrameFormFrameSubmit", event);
@@ -133,10 +127,10 @@ var _Frame = class extends import_js_toolkit.Base {
     newFrame.$children.registerAll();
     this.$emit("after-fetch", url, content);
     this.$emit("before-leave");
-    await Promise.all(this.directChildFrameTarget.map((target) => target.leave()));
+    await Promise.all(this.directChildrenFrameTarget.map((target) => target.leave()));
     this.$emit("after-leave");
     this.$emit("before-content");
-    this.directChildFrameTarget.map((target, index) => target.updateContent(newFrame.directChildFrameTarget[index]));
+    this.directChildrenFrameTarget.map((target, index) => target.updateContent(newFrame.directChildrenFrameTarget[index]));
     if (this.$options.history) {
       document.title = doc.title;
       (0, import_utils.historyPush)({ path: parsedUrl.pathname, search: parsedUrl.searchParams });
@@ -150,7 +144,7 @@ var _Frame = class extends import_js_toolkit.Base {
     await (0, import_utils.nextFrame)();
     this.$emit("after-content");
     this.$emit("before-enter");
-    await Promise.all(this.directChildFrameTarget.map((target) => target.enter()));
+    await Promise.all(this.directChildrenFrameTarget.map((target) => target.enter()));
     this.$emit("after-enter");
   }
   async fetch(url) {

package/organisms/Frame/Frame.d.ts

@@ -48,21 +48,11 @@ export default class Frame extends Base {
      * @returns {any[]}
      */
     getDirectChild(this: FrameInterface, name: string): any[];
-    /**
-     * Get direct `FrameAnchor` children.
-     * @returns {FrameAnchor[]}
-     */
-    get directChildFrameAnchor(): FrameAnchor[];
-    /**
-     * Get direct `FrameForm` children.
-     * @returns {FrameForm[]}
-     */
-    get directChildFrameForm(): FrameForm[];
     /**
      * Get direct `FrameTarget` children.
      * @returns {FrameTarget[]}
      */
-    get directChildFrameTarget(): FrameTarget[];
+    get directChildrenFrameTarget(): FrameTarget[];
     /**
      * Mounted hook.
      * @returns {void}
@@ -100,7 +90,7 @@ export default class Frame extends Base {
      * @param   {number} index
      * @returns {void}
      */
-    onFrameAnchorFrameClick(this: FrameInterface, event: MouseEvent, index: number): void;
+    onFrameAnchorClick(this: FrameInterface, event: MouseEvent, index: number): void;
     /**
      * Prevent submit on forms.
      *
@@ -109,7 +99,7 @@ export default class Frame extends Base {
      * @param   {number} index
      * @returns {void}
      */
-    onFrameFormFrameSubmit(this: FrameInterface, event: SubmitEvent, index: number): void;
+    onFrameFormSubmit(this: FrameInterface, event: SubmitEvent, index: number): void;
     /**
      * Parge an HTML string into a DOM object.
      * @param   {string} string
@@ -147,6 +137,6 @@ export type FrameInterface = Frame & {
     };
 };
 import { Base } from "@studiometa/js-toolkit";
+import FrameTarget from "./FrameTarget.js";
 import FrameAnchor from "./FrameAnchor.js";
 import FrameForm from "./FrameForm.js";
-import FrameTarget from "./FrameTarget.js";

package/organisms/Frame/Frame.js

@@ -1 +1 @@
-import{Base as d}from"@studiometa/js-toolkit";import{nextFrame as c,historyPush as f}from"@studiometa/js-toolkit/utils";import p from"./FrameAnchor.js";import g from"./FrameForm.js";import F from"./FrameTarget.js";function u(){return{left:window.pageXOffset,top:window.pageYOffset}}const a=new Map;class s extends d{static config={name:"Frame",emits:["before-fetch","after-fetch","before-leave","after-leave","before-content","after-content","before-enter","after-enter"],log:!0,components:{FrameAnchor:p,FrameForm:g,FrameTarget:F,Frame:s},options:{history:Boolean}};get id(){return this.$el.id}getDirectChild(e){return this.$children[e]?this.$children.Frame?this.$children[e].filter(t=>this.$children.Frame.every(r=>r.$children[e]?!r.$children[e].includes(t):!0)):this.$children[e]:[]}get directChildFrameAnchor(){return this.getDirectChild("FrameAnchor")}get directChildFrameForm(){return this.getDirectChild("FrameForm")}get directChildFrameTarget(){return this.getDirectChild("FrameTarget")}mounted(){this.$options.history&&window.addEventListener("popstate",this)}destroyed(){window.removeEventListener("popstate",this)}handleEvent(e){e.type==="popstate"&&this.onWindowPopstate(e),e.type==="beforeunload"&&this.onWindowUnload()}onWindowUnload(){const{history:e}=window;!e.state||e.replaceState({...e.state,scroll:u()},"")}onWindowPopstate(e){this.goTo(window.location.href,e.state)}onFrameAnchorFrameClick(e,t){if(!this.directChildFrameAnchor.includes(this.$children.FrameAnchor[t]))return;this.$log("onAFrameClick",e,t),e.preventDefault();const r=this.$children.FrameAnchor[t];r.href!==window.location.href&&this.goTo(r.href)}onFrameFormFrameSubmit(e,t){if(!this.directChildFrameForm.includes(this.$children.FrameForm[t]))return;this.$log("onFrameFormFrameSubmit",e),e.preventDefault();const r=this.$children.FrameForm[t],i=new URL(r.action);i.search=new URLSearchParams(new FormData(r.$el)).toString(),this.goTo(i.toString())}parseHTML(e=""){return new DOMParser().parseFromString(e,"text/html")}async goTo(e,t=null){this.$log("goTo",e);const r=new URL(e);if(r.origin!==window.location.origin)throw new Error("Cross origin request are not allowed.");this.$emit("before-fetch",e);const i=await this.fetch(e),n=this.parseHTML(i),l=n.querySelector(`#${this.id}`),h=new s(l);h.$children.registerAll(),this.$emit("after-fetch",e,i),this.$emit("before-leave"),await Promise.all(this.directChildFrameTarget.map(o=>o.leave())),this.$emit("after-leave"),this.$emit("before-content"),this.directChildFrameTarget.map((o,m)=>o.updateContent(h.directChildFrameTarget[m])),this.$options.history&&(document.title=n.title,f({path:r.pathname,search:r.searchParams})),t&&(document.scrollingElement.scrollTop=t.top,document.scrollingElement.scrollLeft=t.left),await c(),this.$root.$update(),await c(),this.$emit("after-content"),this.$emit("before-enter"),await Promise.all(this.directChildFrameTarget.map(o=>o.enter())),this.$emit("after-enter")}async fetch(e){const t=a.get(e);if(t)return t.status==="pending"?t.promise:t.content;const r=fetch(e);try{a.set(e,{promise:r,status:"pending",content:void 0});const i=await r.then(n=>n.text());return a.set(e,{promise:r,status:"resolved",content:i}),i}catch(i){return a.set(e,{promise:r,status:"error",content:i}),i}}}export{s as default};
+import{Base as f,isDirectChild as c,getDirectChildren as p}from"@studiometa/js-toolkit";import{nextFrame as m,historyPush as w}from"@studiometa/js-toolkit/utils";import g from"./FrameAnchor.js";import F from"./FrameForm.js";import u from"./FrameTarget.js";function $(){return{left:window.pageXOffset,top:window.pageYOffset}}const a=new Map;class s extends f{static config={name:"Frame",emits:["before-fetch","after-fetch","before-leave","after-leave","before-content","after-content","before-enter","after-enter"],log:!0,components:{FrameAnchor:g,FrameForm:F,FrameTarget:u,Frame:s},options:{history:Boolean}};get id(){return this.$el.id}getDirectChild(e){return this.$children[e]?this.$children.Frame?this.$children[e].filter(t=>this.$children.Frame.every(r=>r.$children[e]?!r.$children[e].includes(t):!0)):this.$children[e]:[]}get directChildrenFrameTarget(){return p(this,"Frame","FrameTarget")}mounted(){this.$options.history&&window.addEventListener("popstate",this)}destroyed(){window.removeEventListener("popstate",this)}handleEvent(e){e.type==="popstate"&&this.onWindowPopstate(e),e.type==="beforeunload"&&this.onWindowUnload()}onWindowUnload(){const{history:e}=window;!e.state||e.replaceState({...e.state,scroll:$()},"")}onWindowPopstate(e){this.goTo(window.location.href,e.state)}onFrameAnchorClick(e,t){if(!c(this,"Frame","FrameAnchor",this.$children.FrameAnchor[t]))return;this.$log("onAFrameClick",e,t),e.preventDefault();const r=this.$children.FrameAnchor[t];r.href!==window.location.href&&this.goTo(r.href)}onFrameFormSubmit(e,t){if(!c(this,"Frame","FrameForm",this.$children.FrameForm[t]))return;this.$log("onFrameFormFrameSubmit",e),e.preventDefault();const r=this.$children.FrameForm[t],i=new URL(r.action);i.search=new URLSearchParams(new FormData(r.$el)).toString(),this.goTo(i.toString())}parseHTML(e=""){return new DOMParser().parseFromString(e,"text/html")}async goTo(e,t=null){this.$log("goTo",e);const r=new URL(e);if(r.origin!==window.location.origin)throw new Error("Cross origin request are not allowed.");this.$emit("before-fetch",e);const i=await this.fetch(e),n=this.parseHTML(i),l=n.querySelector(`#${this.id}`),h=new s(l);h.$children.registerAll(),this.$emit("after-fetch",e,i),this.$emit("before-leave"),await Promise.all(this.directChildrenFrameTarget.map(o=>o.leave())),this.$emit("after-leave"),this.$emit("before-content"),this.directChildrenFrameTarget.map((o,d)=>o.updateContent(h.directChildrenFrameTarget[d])),this.$options.history&&(document.title=n.title,w({path:r.pathname,search:r.searchParams})),t&&(document.scrollingElement.scrollTop=t.top,document.scrollingElement.scrollLeft=t.left),await m(),this.$root.$update(),await m(),this.$emit("after-content"),this.$emit("before-enter"),await Promise.all(this.directChildrenFrameTarget.map(o=>o.enter())),this.$emit("after-enter")}async fetch(e){const t=a.get(e);if(t)return t.status==="pending"?t.promise:t.content;const r=fetch(e);try{a.set(e,{promise:r,status:"pending",content:void 0});const i=await r.then(n=>n.text());return a.set(e,{promise:r,status:"resolved",content:i}),i}catch(i){return a.set(e,{promise:r,status:"error",content:i}),i}}}export{s as default};

package/organisms/Frame/FrameAnchor.cjs

@@ -32,12 +32,8 @@ var FrameAnchor = class extends import_js_toolkit.Base {
   get href() {
     return this.$el.href;
   }
-  onClick(event) {
-    this.$emit("frame-click", event);
-  }
 };
 __publicField(FrameAnchor, "config", {
-  name: "FrameAnchor",
-  emits: ["frame-click"]
+  name: "FrameAnchor"
 });
 if (module.exports.default) module.exports = module.exports.default;

package/organisms/Frame/FrameAnchor.d.ts

@@ -12,7 +12,6 @@ export default class FrameAnchor extends Base {
      */
     static config: {
         name: string;
-        emits: string[];
     };
     /**
      * Get the URL.
@@ -21,13 +20,6 @@ export default class FrameAnchor extends Base {
      * @returns {string}
      */
     get href(): string;
-    /**
-     * Dispatch the link click event.
-     *
-     * @param   {MouseEvent} event
-     * @returns {void}
-     */
-    onClick(event: MouseEvent): void;
 }
 export type FrameAnchorInterface = FrameAnchor & {
     $el: HTMLAnchorElement;

package/organisms/Frame/FrameAnchor.js

@@ -1 +1 @@
-import{Base as r}from"@studiometa/js-toolkit";class t extends r{static config={name:"FrameAnchor",emits:["frame-click"]};get href(){return this.$el.href}onClick(e){this.$emit("frame-click",e)}}export{t as default};
+import{Base as e}from"@studiometa/js-toolkit";class r extends e{static config={name:"FrameAnchor"};get href(){return this.$el.href}}export{r as default};

package/organisms/Frame/FrameForm.cjs

@@ -32,12 +32,8 @@ var FrameForm = class extends import_js_toolkit.Base {
   get action() {
     return this.$el.action;
   }
-  onSubmit(event) {
-    this.$emit("frame-submit", event);
-  }
 };
 __publicField(FrameForm, "config", {
-  name: "FrameForm",
-  emits: ["frame-submit"]
+  name: "FrameForm"
 });
 if (module.exports.default) module.exports = module.exports.default;

package/organisms/Frame/FrameForm.d.ts

@@ -9,7 +9,6 @@
 export default class FrameForm extends Base {
     static config: {
         name: string;
-        emits: string[];
     };
     /**
      * Get the form action.
@@ -18,13 +17,6 @@ export default class FrameForm extends Base {
      * @returns {string}
      */
     get action(): string;
-    /**
-     * Dispatch the form `submit` event.
-     *
-     * @param   {SubmitEvent} event
-     * @returns {void}
-     */
-    onSubmit(event: SubmitEvent): void;
 }
 export type FrameFormInterface = FrameForm & {
     $el: HTMLFormElement;

package/organisms/Frame/FrameForm.js

@@ -1 +1 @@
-import{Base as e}from"@studiometa/js-toolkit";class m extends e{static config={name:"FrameForm",emits:["frame-submit"]};get action(){return this.$el.action}onSubmit(t){this.$emit("frame-submit",t)}}export{m as default};
+import{Base as e}from"@studiometa/js-toolkit";class t extends e{static config={name:"FrameForm"};get action(){return this.$el.action}}export{t as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/ui",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "description": "A set of opiniated, unstyled and accessible components",
   "publishConfig": {
     "access": "public"
@@ -29,7 +29,7 @@
   },
   "homepage": "https://github.com/studiometa/ui#readme",
   "dependencies": {
-    "@studiometa/js-toolkit": "^2.2.2",
+    "@studiometa/js-toolkit": "^2.4.1",
     "deepmerge": "^4.2.2"
   }
 }