@studiometa/ui 0.2.7 → 0.2.10

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) {
@@ -97,7 +96,6 @@ var _MenuList = class extends import_Transition.default {
     this.$emit("items-close");
   }
   toggle() {
-    console.log(this.$id, "toggle", this.isOpen);
     if (this.isOpen) {
       this.close();
     } else {

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 s 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 n extends s{static config={...s.config,name:"MenuList",emits:["items-open","items-close","items-mouseleave"],components:{MenuList:n}};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(){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{n 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/molecules/Slider/AbstractSliderChild.cjs

@@ -51,7 +51,14 @@ var AbstractSliderChild = class extends import_js_toolkit.Base {
   }
   handleEvent(event) {
     if (event.type === "index") {
-      this.update(event.detail[0]);
+      import_utils.domScheduler.read(() => {
+        const callback = this.update(event.detail[0]);
+        if ((0, import_utils.isFunction)(callback)) {
+          import_utils.domScheduler.write(() => {
+            callback();
+          });
+        }
+      });
     }
   }
   update(index) {

package/molecules/Slider/AbstractSliderChild.d.ts

@@ -45,9 +45,9 @@ export default class AbstractSliderChild extends Base {
      *
      * @this    {AbstractSliderChildInterface}
      * @param   {number} index The new active index.
-     * @returns {void}
+     * @returns {void|(()=>void)}
      */
-    update(this: AbstractSliderChildInterface, index: number): void;
+    update(this: AbstractSliderChildInterface, index: number): void | (() => void);
 }
 export type AbstractSliderChildInterface = AbstractSliderChild & {
     $parent: Slider;

package/molecules/Slider/AbstractSliderChild.js

@@ -1 +1 @@
-import{Base as t}from"@studiometa/js-toolkit";import{nextFrame as i}from"@studiometa/js-toolkit/utils";import r from"./Slider.js";class d extends t{static config={name:"AbstractSliderChild"};$parent;mounted(){if(!(this.$parent instanceof r))throw new Error(`The \`${this.$options.name}\` component must be a direct child of a \`Slider\` component.`);this.$parent.$on("index",this)}resized(){i(()=>{this.update(this.$parent.currentIndex)})}destroyed(){this.$parent.$off("index",this)}handleEvent(e){e.type==="index"&&this.update(e.detail[0])}update(e){throw new Error(`The \`AbstractSliderChild.update(${e})\` method must be implemented.`)}}export{d as default};
+import{Base as r}from"@studiometa/js-toolkit";import{nextFrame as d,domScheduler as i,isFunction as n}from"@studiometa/js-toolkit/utils";import o from"./Slider.js";class a extends r{static config={name:"AbstractSliderChild"};$parent;mounted(){if(!(this.$parent instanceof o))throw new Error(`The \`${this.$options.name}\` component must be a direct child of a \`Slider\` component.`);this.$parent.$on("index",this)}resized(){d(()=>{this.update(this.$parent.currentIndex)})}destroyed(){this.$parent.$off("index",this)}handleEvent(e){e.type==="index"&&i.read(()=>{const t=this.update(e.detail[0]);n(t)&&i.write(()=>{t()})})}update(e){throw new Error(`The \`AbstractSliderChild.update(${e})\` method must be implemented.`)}}export{a as default};

package/molecules/Slider/SliderBtn.d.ts

@@ -17,6 +17,14 @@ export default class SliderBtn extends AbstractSliderChild {
             next: BooleanConstructor;
         };
     };
+    /**
+     * Update attributes.
+     *
+     * @this    {SliderBtnInterface}
+     * @param   {number} index
+     * @returns {void}
+     */
+    update(this: SliderBtnInterface, index: number): void;
     /**
      * Go prev or next on click.
      *

package/molecules/Slider/SliderCount.d.ts

@@ -12,6 +12,14 @@ export default class SliderCount extends AbstractSliderChild {
         name: string;
         refs: string[];
     };
+    /**
+     * Update the current counter indicator.
+     *
+     * @this    {SliderCountInterface}
+     * @param   {number} index The new active index.
+     * @returns {void}
+     */
+    update(this: SliderCountInterface, index: number): void;
 }
 export type SliderCountInterface = SliderCount & {
     $refs: {

package/molecules/Slider/SliderDots.d.ts

@@ -16,6 +16,14 @@ export default class SliderDots extends AbstractSliderChild {
         name: string;
         refs: string[];
     };
+    /**
+     * Update dots classes according to the new index.
+     *
+     * @this    {SliderDotsInterface}
+     * @param   {number} index
+     * @returns {void}
+     */
+    update(this: SliderDotsInterface, index: number): void;
     /**
      * Go to the given index on dot click.
      *

package/molecules/Slider/SliderDrag.cjs

@@ -35,6 +35,10 @@ var SliderDrag = class extends (0, import_js_toolkit.withDrag)(import_js_toolkit
 };
 __publicField(SliderDrag, "config", {
   name: "SliderDrag",
-  emits: ["start", "drag", "drop", "inertia", "stop"]
+  emits: ["start", "drag", "drop", "inertia", "stop"],
+  sensitivity: {
+    type: Number,
+    default: 1
+  }
 });
 if (module.exports.default) module.exports = module.exports.default;

package/molecules/Slider/SliderDrag.d.ts

@@ -2,9 +2,16 @@
  * SliderDrag class.
  */
 export default class SliderDrag extends Base {
+    /**
+     * Config.
+     */
     static config: {
         name: string;
         emits: string[];
+        sensitivity: {
+            type: NumberConstructor;
+            default: number;
+        };
     };
     /**
      * Emit drag events.

package/molecules/Slider/SliderDrag.js

@@ -1 +1 @@
-import{Base as e,withDrag as a}from"@studiometa/js-toolkit";class r extends a(e){static config={name:"SliderDrag",emits:["start","drag","drop","inertia","stop"]};dragged(t){this.$emit(t.mode,t)}}export{r as default};
+import{Base as e,withDrag as i}from"@studiometa/js-toolkit";class a extends i(e){static config={name:"SliderDrag",emits:["start","drag","drop","inertia","stop"],sensitivity:{type:Number,default:1}};dragged(t){this.$emit(t.mode,t)}}export{a as default};

package/molecules/Slider/SliderItem.cjs

@@ -80,9 +80,9 @@ var SliderItem = class extends (0, import_js_toolkit.withIntersectionObserver)(i
     this.render();
   }
   render() {
-    this.$el.style.transform = `${(0, import_utils.matrix)({
-      translateX: this.dampedX
-    })} translateZ(0px)`;
+    import_utils.domScheduler.write(() => {
+      (0, import_utils.transform)(this.$el, { x: this.dampedX });
+    });
   }
   willBeVisible(targetPosition) {
     return this.rect.x + targetPosition < window.innerWidth * 1.5 && this.rect.x + targetPosition + this.rect.width > window.innerWidth * -0.5;

package/molecules/Slider/SliderItem.d.ts

@@ -52,6 +52,9 @@ export default class SliderItem extends Base {
     /**
      * Ticked hook.
      *
+     * @todo create AbstractSliderItem with `render` method
+     * @todo add state to SliderItem
+     * @todo add origin to SliderItem
      * @returns {void}
      */
     ticked(): void;
@@ -82,7 +85,8 @@ export default class SliderItem extends Base {
      */
     moveInstantly(targetPosition: number): void;
     /**
-     * Render the transform.
+     * Render the component.
+     *
      * @returns {void}
      */
     render(): void;

package/molecules/Slider/SliderItem.js

@@ -1 +1 @@
-import{Base as i,withIntersectionObserver as s}from"@studiometa/js-toolkit";import{matrix as d,damp as h}from"@studiometa/js-toolkit/utils";class r extends s(i,{threshold:[0,1]}){static config={name:"SliderItem",emits:["is-fully-visible","is-partially-visible","is-hidden"]};isVisible=!1;x=0;dampedX=0;mounted(){this.updateRectAdjustedWithX()}resized(){this.updateRectAdjustedWithX()}destroyed(){this.moveInstantly(0)}intersected([{intersectionRatio:e,isIntersecting:t}]){e>=1?(this.$emit("is-fully-visible"),this.$el.setAttribute("aria-hidden","false")):e>0?(this.$emit("is-partially-visible"),this.$el.setAttribute("aria-hidden","true")):(this.$emit("is-hidden"),this.$el.setAttribute("aria-hidden","true")),this.isVisible=t}ticked(){this.dampedX=h(this.x,this.dampedX,.2,1e-5),this.render(),this.dampedX===this.x&&this.$services.disable("ticked")}activate(){this.$el.classList.add("is-active")}disactivate(){this.$el.classList.remove("is-active")}move(e){this.x=e,this.$services.has("ticked")||this.$services.enable("ticked")}moveInstantly(e){this.x=e,this.dampedX=e,this.render()}render(){this.$el.style.transform=`${d({translateX:this.dampedX})} translateZ(0px)`}willBeVisible(e){return this.rect.x+e<window.innerWidth*1.5&&this.rect.x+e+this.rect.width>window.innerWidth*-.5}willBeFullyVisible(e){return this.rect.x+e<window.innerWidth&&this.rect.x+e>0&&this.rect.x+e+this.rect.width<window.innerWidth&&this.rect.x+e+this.rect.width>0}updateRectAdjustedWithX(){const e=this.x*-1,t=this.$el.getBoundingClientRect().toJSON();this.rect={...t,left:t.left+e,right:t.left+e+t.width,x:t.left+e}}}export{r as default};
+import{Base as t,withIntersectionObserver as s}from"@studiometa/js-toolkit";import{damp as d,domScheduler as h,transform as r}from"@studiometa/js-toolkit/utils";class l extends s(t,{threshold:[0,1]}){static config={name:"SliderItem",emits:["is-fully-visible","is-partially-visible","is-hidden"]};isVisible=!1;x=0;dampedX=0;mounted(){this.updateRectAdjustedWithX()}resized(){this.updateRectAdjustedWithX()}destroyed(){this.moveInstantly(0)}intersected([{intersectionRatio:e,isIntersecting:i}]){e>=1?(this.$emit("is-fully-visible"),this.$el.setAttribute("aria-hidden","false")):e>0?(this.$emit("is-partially-visible"),this.$el.setAttribute("aria-hidden","true")):(this.$emit("is-hidden"),this.$el.setAttribute("aria-hidden","true")),this.isVisible=i}ticked(){this.dampedX=d(this.x,this.dampedX,.2,1e-5),this.render(),this.dampedX===this.x&&this.$services.disable("ticked")}activate(){this.$el.classList.add("is-active")}disactivate(){this.$el.classList.remove("is-active")}move(e){this.x=e,this.$services.has("ticked")||this.$services.enable("ticked")}moveInstantly(e){this.x=e,this.dampedX=e,this.render()}render(){h.write(()=>{r(this.$el,{x:this.dampedX})})}willBeVisible(e){return this.rect.x+e<window.innerWidth*1.5&&this.rect.x+e+this.rect.width>window.innerWidth*-.5}willBeFullyVisible(e){return this.rect.x+e<window.innerWidth&&this.rect.x+e>0&&this.rect.x+e+this.rect.width<window.innerWidth&&this.rect.x+e+this.rect.width>0}updateRectAdjustedWithX(){const e=this.x*-1,i=this.$el.getBoundingClientRect().toJSON();this.rect={...i,left:i.left+e,right:i.left+e+i.width,x:i.left+e}}}export{l as default};

package/molecules/Slider/SliderProgress.cjs

@@ -34,9 +34,13 @@ var import_utils = require("@studiometa/js-toolkit/utils");
 var import_AbstractSliderChild = __toESM(require("./AbstractSliderChild.cjs"), 1);
 var SliderProgress = class extends import_AbstractSliderChild.default {
   update(index) {
-    const unit = this.$refs.progress.clientWidth / this.$parent.indexMax;
-    this.$refs.progress.style.transform = (0, import_utils.matrix)({
-      translateX: (0, import_utils.map)(index, 0, this.$parent.indexMax, (this.$refs.progress.clientWidth - unit) * -1, 0)
+    import_utils.domScheduler.read(() => {
+      const unit = this.$refs.progress.clientWidth / (this.$parent.indexMax + 1);
+      import_utils.domScheduler.write(() => {
+        this.$refs.progress.style.transform = (0, import_utils.matrix)({
+          translateX: (0, import_utils.map)(index, 0, this.$parent.indexMax, (this.$refs.progress.clientWidth - unit) * -1, 0)
+        });
+      });
     });
   }
 };

package/molecules/Slider/SliderProgress.d.ts

@@ -17,6 +17,14 @@ export default class SliderProgress extends AbstractSliderChild {
         name: string;
         refs: string[];
     };
+    /**
+     * Update the progress indicator.
+     *
+     * @this    {SliderProgressInterface}
+     * @param   {number} index The new active index.
+     * @returns {void}
+     */
+    update(this: SliderProgressInterface, index: number): void;
 }
 export type SliderProgressInterface = SliderProgress & {
     $refs: {

package/molecules/Slider/SliderProgress.js

@@ -1 +1 @@
-import{matrix as t,map as e}from"@studiometa/js-toolkit/utils";import i from"./AbstractSliderChild.js";class a extends i{static config={name:"SliderProgress",refs:["progress"]};update(r){const s=this.$refs.progress.clientWidth/this.$parent.indexMax;this.$refs.progress.style.transform=t({translateX:e(r,0,this.$parent.indexMax,(this.$refs.progress.clientWidth-s)*-1,0)})}}export{a as default};
+import{matrix as t,map as i,domScheduler as r}from"@studiometa/js-toolkit/utils";import a from"./AbstractSliderChild.js";class o extends a{static config={name:"SliderProgress",refs:["progress"]};update(e){r.read(()=>{const s=this.$refs.progress.clientWidth/(this.$parent.indexMax+1);r.write(()=>{this.$refs.progress.style.transform=t({translateX:i(e,0,this.$parent.indexMax,(this.$refs.progress.clientWidth-s)*-1,0)})})})}}export{o as default};

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("form");
-  }
-  get directChildFrameTarget() {
-    return this.getDirectChild("FrameTarget");
+  get directChildrenFrameTarget() {
+    return (0, import_js_toolkit.getDirectChildren)(this, "Frame", "FrameTarget");
   }
   mounted() {
     if (this.$options.history) {
@@ -93,11 +87,11 @@ 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(index, event) {
+    if (!(0, import_js_toolkit.isDirectChild)(this, "Frame", "FrameAnchor", this.$children.FrameAnchor[index])) {
       return;
     }
-    this.$log("onAFrameClick", event, index);
+    this.$log("onAFrameClick", index, event);
     event.preventDefault();
     const anchor = this.$children.FrameAnchor[index];
     if (anchor.href === window.location.href) {
@@ -105,14 +99,16 @@ var _Frame = class extends import_js_toolkit.Base {
     }
     this.goTo(anchor.href);
   }
-  onFrameFormFrameSubmit(event, index) {
-    if (!this.directChildFrameForm.includes(this.$children.FrameForm[index])) {
+  onFrameFormSubmit(index, event) {
+    if (!(0, import_js_toolkit.isDirectChild)(this, "Frame", "FrameForm", this.$children.FrameForm[index])) {
       return;
     }
-    this.$log("onFrameFormFrameSubmit", event);
+    this.$log("onFrameFormFrameSubmit", index, event);
     event.preventDefault();
     const form = this.$children.FrameForm[index];
-    this.goTo(form.action);
+    const url = new URL(form.action);
+    url.search = new URLSearchParams(new FormData(form.$el)).toString();
+    this.goTo(url.toString());
   }
   parseHTML(string = "") {
     return new DOMParser().parseFromString(string, "text/html");
@@ -131,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 });
@@ -148,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) {
@@ -196,7 +192,6 @@ __publicField(Frame, "config", {
     "before-enter",
     "after-enter"
   ],
-  log: true,
   components: {
     FrameAnchor: import_FrameAnchor.default,
     FrameForm: import_FrameForm.default,

package/organisms/Frame/Frame.d.ts

@@ -24,7 +24,6 @@ export default class Frame extends Base {
     static config: {
         name: string;
         emits: string[];
-        log: boolean;
         components: {
             FrameAnchor: typeof FrameAnchor;
             FrameForm: typeof FrameForm;
@@ -48,21 +47,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}
@@ -96,20 +85,20 @@ export default class Frame extends Base {
      * Prevent click on `FrameAnchor`.
      *
      * @this    {FrameInterface}
-     * @param   {MouseEvent} event
      * @param   {number} index
+     * @param   {MouseEvent} event
      * @returns {void}
      */
-    onFrameAnchorFrameClick(this: FrameInterface, event: MouseEvent, index: number): void;
+    onFrameAnchorClick(this: FrameInterface, index: number, event: MouseEvent): void;
     /**
      * Prevent submit on forms.
      *
      * @this    {FrameInterface}
-     * @param   {SubmitEvent} event
      * @param   {number} index
+     * @param   {SubmitEvent} event
      * @returns {void}
      */
-    onFrameFormFrameSubmit(this: FrameInterface, event: SubmitEvent, index: number): void;
+    onFrameFormSubmit(this: FrameInterface, index: number, event: SubmitEvent): void;
     /**
      * Parge an HTML string into a DOM object.
      * @param   {string} string
@@ -147,6 +136,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 m}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 s=new Map;class a extends m{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:a},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("form")}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];this.goTo(r.action)}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 a(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,d)=>o.updateContent(h.directChildFrameTarget[d])),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=s.get(e);if(t)return t.status==="pending"?t.promise:t.content;const r=fetch(e);try{s.set(e,{promise:r,status:"pending",content:void 0});const i=await r.then(n=>n.text());return s.set(e,{promise:r,status:"resolved",content:i}),i}catch(i){return s.set(e,{promise:r,status:"error",content:i}),i}}}export{a 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"],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(r=>this.$children.Frame.every(t=>t.$children[e]?!t.$children[e].includes(r):!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,r){if(!c(this,"Frame","FrameAnchor",this.$children.FrameAnchor[e]))return;this.$log("onAFrameClick",e,r),r.preventDefault();const t=this.$children.FrameAnchor[e];t.href!==window.location.href&&this.goTo(t.href)}onFrameFormSubmit(e,r){if(!c(this,"Frame","FrameForm",this.$children.FrameForm[e]))return;this.$log("onFrameFormFrameSubmit",e,r),r.preventDefault();const t=this.$children.FrameForm[e],i=new URL(t.action);i.search=new URLSearchParams(new FormData(t.$el)).toString(),this.goTo(i.toString())}parseHTML(e=""){return new DOMParser().parseFromString(e,"text/html")}async goTo(e,r=null){this.$log("goTo",e);const t=new URL(e);if(t.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:t.pathname,search:t.searchParams})),r&&(document.scrollingElement.scrollTop=r.top,document.scrollingElement.scrollLeft=r.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 r=a.get(e);if(r)return r.status==="pending"?r.promise:r.content;const t=fetch(e);try{a.set(e,{promise:t,status:"pending",content:void 0});const i=await t.then(n=>n.text());return a.set(e,{promise:t,status:"resolved",content:i}),i}catch(i){return a.set(e,{promise:t,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};