@studiometa/ui 0.2.8 → 0.2.11

package/molecules/Slider/Slider.d.ts

@@ -25,7 +25,6 @@
 /**
  * Orchestrate the slider items state transition.
  * @todo a11y
- * @todo better state management with `mode` option
  */
 export default class Slider extends Base {
     /**
@@ -50,6 +49,10 @@ export default class Slider extends Base {
                 type: NumberConstructor;
                 default: number;
             };
+            dropSensitivity: {
+                type: NumberConstructor;
+                default: number;
+            };
         };
     };
     __distanceX: number;
@@ -80,6 +83,11 @@ export default class Slider extends Base {
      * @type {Record<SliderModes, number>}
      */
     origins: Record<SliderModes, number>;
+    /**
+     * Wether or not the wrapper is focused.
+     * @type {boolean}
+     */
+    hasFocus: boolean;
     /**
      * Get the current state.
      * @returns {SliderState}
@@ -122,7 +130,6 @@ export default class Slider extends Base {
     /**
      * Get the states for each SliderItem.
      *
-     * @todo save value for every available modes to avoid recalculation when switching
      * @this {SliderInterface}
      */
     getStates(this: SliderInterface): {
@@ -199,6 +206,22 @@ export default class Slider extends Base {
      * @returns {void}
      */
     onSliderDragDrop(this: SliderInterface, props: import('@studiometa/js-toolkit/services/drag').DragServiceProps): void;
+    /**
+     * Enable focus.
+     * @returns {void}
+     */
+    onWrapperFocus(): void;
+    /**
+     * Disable focus.
+     * @returns {void}
+     */
+    onWrapperBlur(): void;
+    /**
+     * Go prev or next when focus is on the wrapper and pressing arrow keys.
+     * @param   {import('@studiometa/js-toolkit/services/key').KeyServiceProps} props
+     * @returns {void}
+     */
+    keyed({ LEFT, RIGHT, isDown }: import('@studiometa/js-toolkit/services/key').KeyServiceProps): void;
     /**
      * Prepare invisible items.
      * @returns {void}

package/molecules/Slider/Slider.js

@@ -1 +1 @@
-import{Base as o}from"@studiometa/js-toolkit";import{clamp as d,inertiaFinalValue as c,nextFrame as h}from"@studiometa/js-toolkit/utils";import u from"./SliderDrag.js";import g from"./SliderItem.js";class x extends o{static config={name:"Slider",refs:["wrapper"],emits:["goto","index"],components:{SliderItem:g,SliderDrag:u},options:{mode:{type:String,default:"left"},fitBounds:Boolean,contain:Boolean,sensitivity:{type:Number,default:1}}};__distanceX=0;__initialX=0;__currentIndex=0;get currentIndex(){return this.__currentIndex}set currentIndex(e){this.currentSliderItem.disactivate(),this.$emit("index",e),this.__currentIndex=e,this.currentSliderItem.activate()}states=[];origins={left:0,center:0,right:0};get currentState(){return this.states[this.currentIndex]}get firstState(){return this.states[0]}get lastState(){return this.states[this.states.length-1]}get containMinState(){return this.getStateValueByMode(this.firstState.x,"left")}get containMaxState(){return this.getStateValueByMode(this.lastState.x,"right")}get indexMax(){return this.$children.SliderItem.length-1}get currentSliderItem(){return this.$children.SliderItem[this.currentIndex]}getStates(){const{wrapper:e}=this.$refs,t=e.getBoundingClientRect();return this.origins={left:t.left,center:t.x+t.width/2,right:t.x+t.width},this.$children.SliderItem.map(i=>({x:{left:(i.rect.x-this.origins.left)*-1,center:(i.rect.x+i.rect.width/2-this.origins.center)*-1,right:(i.rect.x+i.rect.width-this.origins.right)*-1}}))}getOriginByMode(e){return this.origins[e??this.$options.mode]}getStateValueByMode(e,t){return e[t??this.$options.mode]}mounted(){this.states=this.getStates(),this.prepareInvisibleItems(),this.goTo(this.currentIndex)}resized(){h(()=>{this.states=this.getStates(),h(()=>{this.prepareInvisibleItems(),this.goTo(this.currentIndex)})})}goNext(){this.currentIndex+1>this.indexMax||this.goTo(this.currentIndex+1)}goPrev(){this.currentIndex-1<0||this.goTo(this.currentIndex-1)}goTo(e){if(e<0||e>this.indexMax)throw new Error("Index out of bound.");let t=this.getStateValueByMode(this.states[e].x);this.$options.contain&&(this.$children.SliderItem[this.indexMax].willBeFullyVisible(t)?t=this.getStateValueByMode(this.lastState.x,"right"):this.$children.SliderItem[0].willBeFullyVisible(t)&&(t=this.getStateValueByMode(this.firstState.x,"left")));const i=this.getVisibleItems(t);e<this.currentIndex&&i.reverse(),i.forEach(s=>{h(()=>s.move(t))}),this.currentIndex=e,this.$emit("goto",e)}onSliderDragStart(){this.__initialX=this.currentSliderItem?this.currentSliderItem.x:0}onSliderDragDrag(e){Math.abs(e.delta.y)>Math.abs(e.delta.x)||(this.__distanceX=this.__initialX+e.distance.x*this.$options.sensitivity,this.getVisibleItems(this.__distanceX).forEach(t=>{t.moveInstantly(this.__distanceX)}))}onSliderDragDrop(e){if(Math.abs(e.delta.y)>Math.abs(e.delta.x))return;let t=d(c(this.__distanceX,e.delta.x*this.$options.sensitivity),0,this.getStateValueByMode(this.lastState.x));const i=this.states.map(n=>Math.abs(t-this.getStateValueByMode(n.x))),s=Math.min(...i),r=i.findIndex(n=>n===s);this.$options.fitBounds?this.goTo(r):(this.$options.contain&&(t=Math.min(this.containMinState,t),t=Math.max(this.containMaxState,t)),this.$children.SliderItem.forEach(n=>{n.move(t)}),this.currentIndex=r)}prepareInvisibleItems(){const e=this.states[this.currentIndex],t=[],i=[];this.getInvisibleItems(this.getStateValueByMode(e.x)).forEach((s,r)=>{if(r>this.currentIndex){t.push(s);return}r<this.currentIndex&&i.push(s)}),t.forEach(s=>{const r=this.getStateWhereItemWillBeInvisible(s);r&&s.moveInstantly(this.getStateValueByMode(r.x))}),i.forEach(s=>{const r=this.getStateWhereItemWillBeInvisible(s,{reversed:!0});r&&s.moveInstantly(this.getStateValueByMode(r.x))})}getStateWhereItemWillBeInvisible(e,{reversed:t=!1}={}){const i=this.states.filter(a=>e.willBeVisible(this.getStateValueByMode(a.x))),s=i[0],r=i[i.length-1],n=this.states.findIndex(a=>this.getStateValueByMode(a.x)===this.getStateValueByMode(s.x)),l=this.states.findIndex(a=>a.x===r.x);return t?this.states[l+1]:this.states[n-1]}getVisibleItems(e){return this.$children.SliderItem.filter(t=>t.isVisible||t.willBeVisible(e))}getInvisibleItems(e){return this.$children.SliderItem.filter(t=>!t.isVisible&&!t.willBeVisible(e))}}export{x as default};
+import{Base as d}from"@studiometa/js-toolkit";import{clamp as c,inertiaFinalValue as u,nextFrame as h,isDev as f}from"@studiometa/js-toolkit/utils";import x from"./SliderDrag.js";import g from"./SliderItem.js";class I extends d{static config={name:"Slider",refs:["wrapper","debug"],emits:["goto","index"],components:{SliderItem:g,SliderDrag:x},options:{mode:{type:String,default:"left"},fitBounds:Boolean,contain:Boolean,sensitivity:{type:Number,default:1},dropSensitivity:{type:Number,default:2}}};__distanceX=0;__initialX=0;__currentIndex=0;get currentIndex(){return this.__currentIndex}set currentIndex(e){this.currentSliderItem.disactivate(),this.$emit("index",e),this.__currentIndex=e,this.currentSliderItem.activate()}states=[];origins={left:0,center:0,right:0};hasFocus=!1;get currentState(){return this.states[this.currentIndex]}get firstState(){return this.states[0]}get lastState(){return this.states[this.states.length-1]}get containMinState(){return this.getStateValueByMode(this.firstState.x,"left")}get containMaxState(){return this.getStateValueByMode(this.lastState.x,"right")}get indexMax(){return this.$children.SliderItem.length-1}get currentSliderItem(){return this.$children.SliderItem[this.currentIndex]}getStates(){const{wrapper:e}=this.$refs,t=e.getBoundingClientRect();this.origins={left:t.left,center:t.x+t.width/2,right:t.x+t.width};const i=this.$children.SliderItem.map(s=>({x:{left:(s.rect.x-this.origins.left)*-1,center:(s.rect.x+s.rect.width/2-this.origins.center)*-1,right:(s.rect.x+s.rect.width-this.origins.right)*-1}}));if(this.$options.contain){const{mode:s}=this.$options;if(s==="left"){const n=this.$children.SliderItem.at(-1),r=i.find(a=>{const o=n.rect.x-this.origins.left+n.rect.width+a.x.left,l=t.width-o;return l>0?(a.x.left=Math.min(a.x.left+l,0),!0):!1});if(r)return i.map(a=>(a.x.left=Math.max(a.x.left,r.x.left),a))}if(s==="right"){const n=i.findIndex(a=>a.x.right<=0),r=n<0?i.at(-1):i[n-1];return i.map(a=>(a.x.right=n<0?r.x.right:Math.min(a.x.right,0),a))}s==="center"&&f&&console.warn(`[${this.$id}]`,"The `center` mode is not yet compatible with the `contain` mode.")}return i}getOriginByMode(e){return this.origins[e??this.$options.mode]}getStateValueByMode(e,t){return e[t??this.$options.mode]}mounted(){this.states=this.getStates(),this.prepareInvisibleItems(),this.goTo(this.currentIndex)}resized(){h(()=>{this.states=this.getStates(),h(()=>{this.prepareInvisibleItems(),this.goTo(this.currentIndex)})})}goNext(){this.currentIndex+1>this.indexMax||this.goTo(this.currentIndex+1)}goPrev(){this.currentIndex-1<0||this.goTo(this.currentIndex-1)}goTo(e){if(e<0||e>this.indexMax)throw new Error("Index out of bound.");const t=this.getStateValueByMode(this.currentState.x),i=this.getStateValueByMode(this.states[e].x),s=this.getVisibleItems(i),n=this.getInvisibleItems(i);s.forEach(r=>{t!==i&&r.moveInstantly(t),h(()=>r.move(i))}),n.forEach(r=>{r.moveInstantly(i)}),this.currentIndex=e,this.$emit("goto",e)}onSliderDragStart(){this.__initialX=this.currentSliderItem?this.currentSliderItem.x:0}onSliderDragDrag(e){Math.abs(e.delta.y)>Math.abs(e.delta.x)||(this.__distanceX=this.__initialX+e.distance.x*this.$options.sensitivity,this.getVisibleItems(this.__distanceX).forEach(t=>{t.moveInstantly(this.__distanceX)}))}onSliderDragDrop(e){if(Math.abs(e.delta.y)>Math.abs(e.delta.x))return;let t=c(u(this.__distanceX,e.delta.x*this.$options.dropSensitivity),0,this.getStateValueByMode(this.lastState.x));const i=this.states.map(r=>Math.abs(t-this.getStateValueByMode(r.x))),s=Math.min(...i),n=i.findIndex(r=>r===s);this.$options.fitBounds?this.goTo(n):(this.$options.contain&&(t=Math.min(this.containMinState,t),t=Math.max(this.containMaxState,t)),this.$children.SliderItem.forEach(r=>{r.move(t)}),this.currentIndex=n)}onWrapperFocus(){this.hasFocus=!0}onWrapperBlur(){this.hasFocus=!1}keyed({LEFT:e,RIGHT:t,isDown:i}){this.hasFocus&&i&&(e?this.goPrev():t&&this.goNext())}prepareInvisibleItems(){const e=this.states[this.currentIndex],t=[],i=[];this.getInvisibleItems(this.getStateValueByMode(e.x)).forEach((s,n)=>{if(n>this.currentIndex){t.push(s);return}n<this.currentIndex&&i.push(s)}),t.forEach(s=>{const n=this.getStateWhereItemWillBeInvisible(s);n&&s.moveInstantly(this.getStateValueByMode(n.x))}),i.forEach(s=>{const n=this.getStateWhereItemWillBeInvisible(s,{reversed:!0});n&&s.moveInstantly(this.getStateValueByMode(n.x))})}getStateWhereItemWillBeInvisible(e,{reversed:t=!1}={}){const i=this.states.filter(o=>e.willBeVisible(this.getStateValueByMode(o.x))),s=i[0],n=i[i.length-1],r=this.states.findIndex(o=>this.getStateValueByMode(o.x)===this.getStateValueByMode(s.x)),a=this.states.findIndex(o=>o.x===n.x);return t?this.states[a+1]:this.states[r-1]}getVisibleItems(e){return this.$children.SliderItem.filter(t=>t.isVisible||t.willBeVisible(e))}getInvisibleItems(e){return this.$children.SliderItem.filter(t=>!t.isVisible&&!t.willBeVisible(e))}}export{I as default};

package/molecules/Slider/SliderDots.cjs

@@ -30,12 +30,17 @@ __export(SliderDots_exports, {
   default: () => SliderDots
 });
 module.exports = __toCommonJS(SliderDots_exports);
+var import_decorators = require("../../decorators/index.cjs");
 var import_AbstractSliderChild = __toESM(require("./AbstractSliderChild.cjs"), 1);
-var SliderDots = class extends import_AbstractSliderChild.default {
+var SliderDots = class extends (0, import_decorators.withTransition)(import_AbstractSliderChild.default) {
+  get target() {
+    return this.$refs.dots;
+  }
+  currentIndex = 0;
   update(index) {
-    this.$refs.dots.forEach((dot, i) => {
-      dot.classList.toggle("is-active", index === i);
-    });
+    this.leave(this.$refs.dots[this.currentIndex]);
+    this.enter(this.$refs.dots[index]);
+    this.currentIndex = index;
   }
   onDotsClick(event, index) {
     this.$parent.goTo(index);

package/molecules/Slider/SliderDots.d.ts

@@ -1,3 +1,8 @@
+declare const SliderDots_base: typeof AbstractSliderChild & (new (...a: any[]) => {
+    readonly target: HTMLElement | HTMLElement[];
+    enter(target?: HTMLElement | HTMLElement[]): Promise<void | void[]>;
+    leave(target?: HTMLElement | HTMLElement[]): Promise<void | void[]>;
+});
 /**
  * @typedef {SliderDots & {
  *   $refs: {
@@ -8,7 +13,7 @@
 /**
  * SliderDots class.
  */
-export default class SliderDots extends AbstractSliderChild {
+export default class SliderDots extends SliderDots_base {
     /**
      * Config.
      */
@@ -16,6 +21,17 @@ export default class SliderDots extends AbstractSliderChild {
         name: string;
         refs: string[];
     };
+    /**
+     * Get target.
+     * @this {SliderDotsInterface}
+     * @returns {HTMLButtonElement[]}
+     */
+    get target(): HTMLButtonElement[];
+    /**
+     * The current active index.
+     * @type {number}
+     */
+    currentIndex: number;
     /**
      * Update dots classes according to the new index.
      *
@@ -39,3 +55,4 @@ export type SliderDotsInterface = SliderDots & {
     };
 };
 import AbstractSliderChild from "./AbstractSliderChild.js";
+export {};

package/molecules/Slider/SliderDots.js

@@ -1 +1 @@
-import o from"./AbstractSliderChild.js";class i extends o{static config={name:"SliderDots",refs:["dots[]"]};update(s){this.$refs.dots.forEach((t,e)=>{t.classList.toggle("is-active",s===e)})}onDotsClick(s,t){this.$parent.goTo(t)}}export{i as default};
+import{withTransition as r}from"../../decorators/index.js";import s from"./AbstractSliderChild.js";class i extends r(s){static config={name:"SliderDots",refs:["dots[]"]};get target(){return this.$refs.dots}currentIndex=0;update(t){this.leave(this.$refs.dots[this.currentIndex]),this.enter(this.$refs.dots[t]),this.currentIndex=t}onDotsClick(t,e){this.$parent.goTo(e)}}export{i as default};

package/molecules/Slider/SliderDrag.cjs

@@ -29,6 +29,15 @@ __export(SliderDrag_exports, {
 module.exports = __toCommonJS(SliderDrag_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
 var SliderDrag = class extends (0, import_js_toolkit.withDrag)(import_js_toolkit.Base) {
+  get shouldPreventScroll() {
+    const { distance } = this.$services.get("dragged");
+    return Math.abs(distance.x) > this.$options.scrollLockThreshold && Math.abs(distance.x) > Math.abs(distance.y);
+  }
+  onTouchmove(event) {
+    if (this.shouldPreventScroll) {
+      event.preventDefault();
+    }
+  }
   dragged(props) {
     this.$emit(props.mode, props);
   }
@@ -36,9 +45,11 @@ var SliderDrag = class extends (0, import_js_toolkit.withDrag)(import_js_toolkit
 __publicField(SliderDrag, "config", {
   name: "SliderDrag",
   emits: ["start", "drag", "drop", "inertia", "stop"],
-  sensitivity: {
-    type: Number,
-    default: 1
+  options: {
+    scrollLockThreshold: {
+      type: Number,
+      default: 10
+    }
   }
 });
 if (module.exports.default) module.exports = module.exports.default;

package/molecules/Slider/SliderDrag.d.ts

@@ -1,3 +1,10 @@
+/**
+ * @typedef {SliderDrag & {
+ *   $options: {
+ *     scrollLockThreshold: number;
+ *   }
+ * }} SliderDragInterface
+ */
 /**
  * SliderDrag class.
  */
@@ -8,11 +15,27 @@ export default class SliderDrag extends Base {
     static config: {
         name: string;
         emits: string[];
-        sensitivity: {
-            type: NumberConstructor;
-            default: number;
+        options: {
+            scrollLockThreshold: {
+                type: NumberConstructor;
+                default: number;
+            };
         };
     };
+    /**
+     * Test if the scroll should be blocked. Used with the touchmove event to prevent
+     * scrolling vertically when trying to drag the slider.
+     *
+     * @this {SliderDragInterface}
+     * @returns {boolean}
+     */
+    get shouldPreventScroll(): boolean;
+    /**
+     * Touchmove handler.
+     * @param   {TouchEvent} event
+     * @returns {void}
+     */
+    onTouchmove(event: TouchEvent): void;
     /**
      * Emit drag events.
      * @param   {import('@studiometa/js-toolkit/services/drag').DragServiceProps} props
@@ -20,4 +43,9 @@ export default class SliderDrag extends Base {
      */
     dragged(props: import('@studiometa/js-toolkit/services/drag').DragServiceProps): void;
 }
+export type SliderDragInterface = SliderDrag & {
+    $options: {
+        scrollLockThreshold: number;
+    };
+};
 import { Base } from "@studiometa/js-toolkit";

package/molecules/Slider/SliderDrag.js

@@ -1 +1 @@
-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};
+import{Base as t,withDrag as r}from"@studiometa/js-toolkit";class s extends r(t){static config={name:"SliderDrag",emits:["start","drag","drop","inertia","stop"],options:{scrollLockThreshold:{type:Number,default:10}}};get shouldPreventScroll(){const{distance:e}=this.$services.get("dragged");return Math.abs(e.x)>this.$options.scrollLockThreshold&&Math.abs(e.x)>Math.abs(e.y)}onTouchmove(e){this.shouldPreventScroll&&e.preventDefault()}dragged(e){this.$emit(e.mode,e)}}export{s as default};

package/molecules/Slider/SliderItem.cjs

@@ -56,7 +56,7 @@ var SliderItem = class extends (0, import_js_toolkit.withIntersectionObserver)(i
     this.isVisible = isIntersecting;
   }
   ticked() {
-    this.dampedX = (0, import_utils.damp)(this.x, this.dampedX, 0.2, 1e-5);
+    this.dampedX = (0, import_utils.damp)(this.x, this.dampedX, 0.1, 1e-5);
     this.render();
     if (this.dampedX === this.x) {
       this.$services.disable("ticked");

package/molecules/Slider/SliderItem.js

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

@@ -35,11 +35,10 @@ var import_AbstractSliderChild = __toESM(require("./AbstractSliderChild.cjs"), 1
 var SliderProgress = class extends import_AbstractSliderChild.default {
   update(index) {
     import_utils.domScheduler.read(() => {
-      const unit = this.$refs.progress.clientWidth / (this.$parent.indexMax + 1);
+      const { progress } = this.$refs;
+      const x = (0, import_utils.map)(index, 0, this.$parent.indexMax, progress.clientWidth * -1, 0);
       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)
-        });
+        (0, import_utils.transform)(progress, { x });
       });
     });
   }

package/molecules/Slider/SliderProgress.js

@@ -1 +1 @@
-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};
+import{transform as i,map as o,domScheduler as e}from"@studiometa/js-toolkit/utils";import d from"./AbstractSliderChild.js";class a extends d{static config={name:"SliderProgress",refs:["progress"]};update(s){e.read(()=>{const{progress:r}=this.$refs,t=o(s,0,this.$parent.indexMax,r.clientWidth*-1,0);e.write(()=>{i(r,{x:t})})})}}export{a 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("FrameForm");
-  }
-  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,11 +99,11 @@ 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];
     const url = new URL(form.action);
@@ -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) {
@@ -198,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 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"],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};

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/organisms/Frame/FrameTarget.d.ts

@@ -1,7 +1,12 @@
+declare const FrameTarget_base: typeof import("@studiometa/js-toolkit").Base & (new (...a: any[]) => {
+    readonly target: HTMLElement | HTMLElement[];
+    enter(target?: HTMLElement | HTMLElement[]): Promise<void | void[]>;
+    leave(target?: HTMLElement | HTMLElement[]): Promise<void | void[]>;
+});
 /**
  * FrameTarget class.
  */
-export default class FrameTarget extends Transition {
+export default class FrameTarget extends FrameTarget_base {
     /**
      * Config.
      */
@@ -14,15 +19,11 @@ export default class FrameTarget extends Transition {
                 default: string;
             };
             id: StringConstructor;
-            enterFrom: StringConstructor;
-            enterActive: StringConstructor;
-            enterTo: StringConstructor;
-            enterKeep: BooleanConstructor;
-            leaveFrom: StringConstructor;
-            leaveActive: StringConstructor;
-            leaveTo: StringConstructor;
-            leaveKeep: BooleanConstructor;
         };
+        debug?: boolean;
+        refs?: string[];
+        emits?: string[];
+        components?: import("@studiometa/js-toolkit/Base/index.js").BaseConfigComponents;
     };
     /**
      * Insert modes.
@@ -36,6 +37,11 @@ export default class FrameTarget extends Transition {
      * @returns {string}
      */
     get id(): string;
+    /**
+     * Enter transition.
+     * @returns {Promise<void>}
+     */
+    enter(): Promise<void>;
     /**
      * Update the content from the new target.
      *
@@ -44,4 +50,4 @@ export default class FrameTarget extends Transition {
      */
     updateContent(newTarget: FrameTarget): void;
 }
-import { Transition } from "../../primitives/index.js";
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/ui",
-  "version": "0.2.8",
+  "version": "0.2.11",
   "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"
   }
 }