@studiometa/ui 0.2.7 → 0.2.8

package/atoms/LargeText/LargeText.cjs

@@ -59,9 +59,9 @@ var LargeText = class extends (0, import_js_toolkit.withMountWhenInView)(import_
       this.translateX = 0;
       this.transform.translateX -= this.width;
     }
-    (0, import_utils.nextFrame)(() => {
-      this.$refs.target.style.transform = (0, import_utils.matrix)(this.transform) + " translateZ(0px)";
-    });
+    return () => {
+      (0, import_utils.transform)(this.$refs.target, this.transform);
+    };
   }
 };
 __publicField(LargeText, "config", {

package/atoms/LargeText/LargeText.d.ts

@@ -77,9 +77,8 @@ export default class LargeText extends Base {
      * Update values on raf.
      *
      * @this    {LargeTextInterface}
-     * @returns {void}
      */
-    ticked(this: LargeTextInterface): void;
+    ticked(this: LargeTextInterface): () => void;
 }
 export type LargeTextInterface = LargeText & {
     $refs: {

package/atoms/LargeText/LargeText.js

@@ -1 +1 @@
-import{Base as i,withMountWhenInView as e}from"@studiometa/js-toolkit";import{damp as t,matrix as a,clamp as r,nextFrame as n}from"@studiometa/js-toolkit/utils";class h 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(){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(r(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),n(()=>{this.$refs.target.style.transform=a(this.transform)+" translateZ(0px)"})}}export{h as default};
+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};

package/atoms/ScrollAnimation/AbstractScrollAnimation.cjs

@@ -29,71 +29,25 @@ __export(AbstractScrollAnimation_exports, {
 module.exports = __toCommonJS(AbstractScrollAnimation_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
 var import_utils = require("@studiometa/js-toolkit/utils");
-function getDefaults() {
-  return {
-    x: 0,
-    y: 0,
-    z: 0,
-    scale: 1,
-    scaleX: 1,
-    scaleY: 1,
-    rotate: 0,
-    skewX: 0,
-    skewY: 0,
-    opacity: 1
-  };
-}
 var AbstractScrollAnimation = class extends (0, import_js_toolkit.withFreezedOptions)(import_js_toolkit.Base) {
   get target() {
     return this.$el;
   }
-  get has() {
-    const has = {
-      x: false,
-      y: false,
-      z: false,
-      scale: false,
-      scaleX: false,
-      scaleY: false,
-      rotate: false,
-      skewX: false,
-      skewY: false,
-      opacity: false,
-      transform: false
-    };
-    Object.keys(this.$options.from).forEach((key) => {
-      has[key] = this.$options.from[key] !== this.$options.to[key];
-    });
-    has.transform = Object.keys(has).filter((key) => key !== "opacity" && key !== "transform").some((key) => has[key]);
-    Object.defineProperty(this, "has", { value: has });
-    return has;
+  animation;
+  mounted() {
+    let { keyframes } = this.$options;
+    const { from, to } = this.$options;
+    if (keyframes.length <= 0 && from && to) {
+      keyframes = [from, to];
+    }
+    this.animation = (0, import_utils.animate)(this.target, keyframes, { easing: this.$options.easing });
   }
   scrolledInView(props) {
-    if (!this.has.opacity && !this.has.transform) {
-      return;
-    }
     const progress = (0, import_utils.map)((0, import_utils.clamp)(props.dampedProgress.y, this.$options.playRange[0], this.$options.playRange[1]), this.$options.playRange[0], this.$options.playRange[1], 0, 1);
     this.render(progress);
   }
   render(progress) {
-    if (this.has.opacity) {
-      this.target.style.opacity = String((0, import_utils.map)(progress, 0, 1, this.$options.from.opacity, this.$options.to.opacity));
-    }
-    if (this.has.transform) {
-      let transform = (0, import_utils.matrix)({
-        translateX: this.has.x ? (0, import_utils.lerp)(this.$options.from.x, this.$options.to.x, progress) : void 0,
-        translateY: this.has.y ? (0, import_utils.lerp)(this.$options.from.y, this.$options.to.y, progress) : void 0,
-        scaleX: this.has.scale ? (0, import_utils.lerp)(this.$options.from.scale, this.$options.to.scale, progress) : this.has.scaleX ? (0, import_utils.lerp)(this.$options.from.scaleX, this.$options.to.scaleX, progress) : void 0,
-        scaleY: this.has.scale ? (0, import_utils.lerp)(this.$options.from.scale, this.$options.to.scale, progress) : this.has.scaleY ? (0, import_utils.lerp)(this.$options.from.scaleY, this.$options.to.scaleY, progress) : void 0,
-        skewX: this.has.skewX ? (0, import_utils.lerp)(this.$options.from.skewX, this.$options.to.skewX, progress) : void 0,
-        skewY: this.has.skewY ? (0, import_utils.lerp)(this.$options.from.skewY, this.$options.to.skewY, progress) : void 0
-      });
-      if (this.has.rotate) {
-        transform += ` rotate(${(0, import_utils.lerp)(this.$options.from.rotate, this.$options.to.rotate, progress)}deg)`;
-      }
-      transform += `translateZ(${this.has.z ? (0, import_utils.lerp)(this.$options.from.z, this.$options.to.z, progress) : 0})`;
-      this.target.style.transform = transform;
-    }
+    this.animation.progress(progress);
   }
 };
 __publicField(AbstractScrollAnimation, "config", {
@@ -113,13 +67,18 @@ __publicField(AbstractScrollAnimation, "config", {
     },
     from: {
       type: Object,
-      default: getDefaults,
-      merge: true
+      default: () => ({})
     },
     to: {
       type: Object,
-      default: getDefaults,
-      merge: true
+      default: () => ({})
+    },
+    keyframes: {
+      type: Array
+    },
+    easing: {
+      type: Array,
+      default: () => [0, 0, 1, 1]
     }
   }
 });

package/atoms/ScrollAnimation/AbstractScrollAnimation.d.ts

@@ -1,11 +1,16 @@
+/**
+ * @typedef {typeof AbstractScrollAnimation} AbstractScrollAnimationConstructor
+ * @typedef {import('@studiometa/js-toolkit/utils/css/animate.js').Keyframe} Keyframe
+ */
 /**
  * @typedef {AbstractScrollAnimation & {
  *   $options: {
  *     playRange: string,
  *     dampFactor: number,
  *     dampPrecision: number,
- *     from: AnimationOptions,
- *     to: AnimationOptions,
+ *     from: Keyframe,
+ *     to: Keyframe,
+ *     keyframes: Keyframe[],
  *   },
  * }} ScrollAnimationChildInterface
  */
@@ -43,13 +48,18 @@ export default class AbstractScrollAnimation extends Base {
             };
             from: {
                 type: ObjectConstructor;
-                default: typeof getDefaults;
-                merge: boolean;
+                default: () => {};
             };
             to: {
                 type: ObjectConstructor;
-                default: typeof getDefaults;
-                merge: boolean;
+                default: () => {};
+            };
+            keyframes: {
+                type: ArrayConstructor;
+            };
+            easing: {
+                type: ArrayConstructor;
+                default: () => number[];
             };
         };
     };
@@ -60,21 +70,14 @@ export default class AbstractScrollAnimation extends Base {
      */
     get target(): HTMLElement;
     /**
-     * Flags for style detection.
+     * @type {ReturnType<animate>}
      */
-    get has(): {
-        x: boolean;
-        y: boolean;
-        z: boolean;
-        scale: boolean;
-        scaleX: boolean;
-        scaleY: boolean;
-        rotate: boolean;
-        skewX: boolean;
-        skewY: boolean;
-        opacity: boolean;
-        transform: boolean;
-    };
+    animation: ReturnType<typeof animate>;
+    /**
+     * @this {ScrollAnimationChildInterface}
+     * @returns {void}
+     */
+    mounted(this: ScrollAnimationChildInterface): void;
     /**
      * @todo do not add unnecessary styles
      */
@@ -88,46 +91,16 @@ export default class AbstractScrollAnimation extends Base {
     render(progress: number): void;
 }
 export type AbstractScrollAnimationConstructor = typeof AbstractScrollAnimation;
-export type AnimationOptions = {
-    x?: number;
-    y?: number;
-    z?: number;
-    scale?: number;
-    scaleX?: number;
-    scaleY?: number;
-    rotate?: number;
-    skewX?: number;
-    skewY?: number;
-    opacity?: number;
-};
+export type Keyframe = import('@studiometa/js-toolkit/utils/css/animate.js').Keyframe;
 export type ScrollAnimationChildInterface = AbstractScrollAnimation & {
     $options: {
         playRange: string;
         dampFactor: number;
         dampPrecision: number;
-        from: AnimationOptions;
-        to: AnimationOptions;
+        from: Keyframe;
+        to: Keyframe;
+        keyframes: Keyframe[];
     };
 };
 import { Base } from "@studiometa/js-toolkit";
-/**
- * @typedef {typeof AbstractScrollAnimation} AbstractScrollAnimationConstructor
- * @typedef {{
- *   x?: number;
- *   y?: number;
- *   z?: number;
- *   scale?: number;
- *   scaleX?: number;
- *   scaleY?: number;
- *   rotate?: number;
- *   skewX?: number;
- *   skewY?: number;
- *   opacity?: number;
- * }} AnimationOptions
- */
-/**
- * Get animation configuration defaults.
- * @returns {AnimationOptions}
- */
-declare function getDefaults(): AnimationOptions;
-export {};
+import { animate } from "@studiometa/js-toolkit/utils/css/animate.js";

package/atoms/ScrollAnimation/AbstractScrollAnimation.js

@@ -1 +1 @@
-import{Base as a,withFreezedOptions as n}from"@studiometa/js-toolkit";import{matrix as h,lerp as e,map as o,clamp as r}from"@studiometa/js-toolkit/utils";function i(){return{x:0,y:0,z:0,scale:1,scaleX:1,scaleY:1,rotate:0,skewX:0,skewY:0,opacity:1}}class l extends n(a){static config={name:"AbstractScrollAnimation",options:{playRange:{type:Array,default:()=>[0,1]},dampFactor:{type:Number,default:.5},dampPrecision:{type:Number,default:.001},from:{type:Object,default:i,merge:!0},to:{type:Object,default:i,merge:!0}}};get target(){return this.$el}get has(){const t={x:!1,y:!1,z:!1,scale:!1,scaleX:!1,scaleY:!1,rotate:!1,skewX:!1,skewY:!1,opacity:!1,transform:!1};return Object.keys(this.$options.from).forEach(s=>{t[s]=this.$options.from[s]!==this.$options.to[s]}),t.transform=Object.keys(t).filter(s=>s!=="opacity"&&s!=="transform").some(s=>t[s]),Object.defineProperty(this,"has",{value:t}),t}scrolledInView(t){if(!this.has.opacity&&!this.has.transform)return;const s=o(r(t.dampedProgress.y,this.$options.playRange[0],this.$options.playRange[1]),this.$options.playRange[0],this.$options.playRange[1],0,1);this.render(s)}render(t){if(this.has.opacity&&(this.target.style.opacity=String(o(t,0,1,this.$options.from.opacity,this.$options.to.opacity))),this.has.transform){let s=h({translateX:this.has.x?e(this.$options.from.x,this.$options.to.x,t):void 0,translateY:this.has.y?e(this.$options.from.y,this.$options.to.y,t):void 0,scaleX:this.has.scale?e(this.$options.from.scale,this.$options.to.scale,t):this.has.scaleX?e(this.$options.from.scaleX,this.$options.to.scaleX,t):void 0,scaleY:this.has.scale?e(this.$options.from.scale,this.$options.to.scale,t):this.has.scaleY?e(this.$options.from.scaleY,this.$options.to.scaleY,t):void 0,skewX:this.has.skewX?e(this.$options.from.skewX,this.$options.to.skewX,t):void 0,skewY:this.has.skewY?e(this.$options.from.skewY,this.$options.to.skewY,t):void 0});this.has.rotate&&(s+=` rotate(${e(this.$options.from.rotate,this.$options.to.rotate,t)}deg)`),s+=`translateZ(${this.has.z?e(this.$options.from.z,this.$options.to.z,t):0})`,this.target.style.transform=s}}}export{l as default};
+import{Base as i,withFreezedOptions as o}from"@studiometa/js-toolkit";import{map as s,clamp as n,animate as r}from"@studiometa/js-toolkit/utils";class p extends o(i){static config={name:"AbstractScrollAnimation",options:{playRange:{type:Array,default:()=>[0,1]},dampFactor:{type:Number,default:.5},dampPrecision:{type:Number,default:.001},from:{type:Object,default:()=>({})},to:{type:Object,default:()=>({})},keyframes:{type:Array},easing:{type:Array,default:()=>[0,0,1,1]}}};get target(){return this.$el}animation;mounted(){let{keyframes:t}=this.$options;const{from:e,to:a}=this.$options;t.length<=0&&e&&a&&(t=[e,a]),this.animation=r(this.target,t,{easing:this.$options.easing})}scrolledInView(t){const e=s(n(t.dampedProgress.y,this.$options.playRange[0],this.$options.playRange[1]),this.$options.playRange[0],this.$options.playRange[1],0,1);this.render(e)}render(t){this.animation.progress(t)}}export{p as default};

package/atoms/ScrollAnimation/ScrollAnimation.d.ts

@@ -26,13 +26,18 @@ export default class ScrollAnimation extends AbstractScrollAnimation {
             };
             from: {
                 type: ObjectConstructor;
-                default: () => import("./AbstractScrollAnimation.js").AnimationOptions;
-                merge: boolean;
+                default: () => {};
             };
             to: {
                 type: ObjectConstructor;
-                default: () => import("./AbstractScrollAnimation.js").AnimationOptions;
-                merge: boolean;
+                default: () => {};
+            };
+            keyframes: {
+                type: ArrayConstructor;
+            };
+            easing: {
+                type: ArrayConstructor;
+                default: () => number[];
             };
         };
     };

package/atoms/ScrollAnimation/animationScrollWithEase.cjs

@@ -23,29 +23,8 @@ __export(animationScrollWithEase_exports, {
 });
 module.exports = __toCommonJS(animationScrollWithEase_exports);
 var import_utils = require("@studiometa/js-toolkit/utils");
-var eases = {
-  outQuad: import_utils.easeOutQuad,
-  inQuad: import_utils.easeInQuad,
-  inOutQuad: import_utils.easeInOutQuad,
-  outCubic: import_utils.easeOutCubic,
-  inCubic: import_utils.easeInCubic,
-  inOutCubic: import_utils.easeInOutCubic,
-  outQuart: import_utils.easeOutQuart,
-  inQuart: import_utils.easeInQuart,
-  inOutQuart: import_utils.easeInOutQuart,
-  outQuint: import_utils.easeOutQuint,
-  inQuint: import_utils.easeInQuint,
-  inOutQuint: import_utils.easeInOutQuint,
-  outSine: import_utils.easeOutSine,
-  inSine: import_utils.easeInSine,
-  inOutSine: import_utils.easeInOutSine,
-  outCirc: import_utils.easeOutCirc,
-  inCirc: import_utils.easeInCirc,
-  inOutCirc: import_utils.easeInOutCirc,
-  outExpo: import_utils.easeOutExpo,
-  inExpo: import_utils.easeInExpo,
-  inOutExpo: import_utils.easeInOutExpo
-};
+var regex = /ease([A-Z])/;
+var eases = Object.fromEntries(Object.entries(import_utils.ease).filter(([name]) => name.startsWith("ease")).map(([name, value]) => [name.replace(regex, (match, $1) => $1.toLowerCase()), value]));
 function animationScrollWithEase(ScrollAnimation) {
   return class extends ScrollAnimation {
     static config = {
@@ -60,7 +39,7 @@ function animationScrollWithEase(ScrollAnimation) {
       }
     };
     render(progress) {
-      if (eases[this.$options.ease]) {
+      if (typeof eases[this.$options.ease] === "function") {
         progress = eases[this.$options.ease](progress);
       }
       super.render(progress);

package/atoms/ScrollAnimation/animationScrollWithEase.js

@@ -1 +1 @@
-import{easeOutQuad as n,easeInQuad as i,easeInOutQuad as a,easeOutCubic as s,easeInCubic as o,easeInOutCubic as O,easeOutQuart as c,easeInQuart as Q,easeInOutQuart as r,easeOutQuint as I,easeInQuint as p,easeInOutQuint as C,easeOutSine as d,easeInSine as f,easeInOutSine as x,easeOutCirc as E,easeInCirc as b,easeInOutCirc as S,easeOutExpo as h,easeInExpo as g,easeInOutExpo as $}from"@studiometa/js-toolkit/utils";const u={outQuad:n,inQuad:i,inOutQuad:a,outCubic:s,inCubic:o,inOutCubic:O,outQuart:c,inQuart:Q,inOutQuart:r,outQuint:I,inQuint:p,inOutQuint:C,outSine:d,inSine:f,inOutSine:x,outCirc:E,inCirc:b,inOutCirc:S,outExpo:h,inExpo:g,inOutExpo:$};function m(e){return class extends e{static config={...e.config,name:`${e.config.name}WithEase`,options:{...e.config.options,ease:{type:String,default:"outExpo"}}};render(t){u[this.$options.ease]&&(t=u[this.$options.ease](t)),super.render(t)}}}export{m as default};
+import{ease as n}from"@studiometa/js-toolkit/utils";const o=/ease([A-Z])/,s=Object.fromEntries(Object.entries(n).filter(([e])=>e.startsWith("ease")).map(([e,t])=>[e.replace(o,(f,a)=>a.toLowerCase()),t]));function i(e){return class extends e{static config={...e.config,name:`${e.config.name}WithEase`,options:{...e.config.options,ease:{type:String,default:"outExpo"}}};render(t){typeof s[this.$options.ease]=="function"&&(t=s[this.$options.ease](t)),super.render(t)}}}export{i as default};

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

@@ -59,7 +59,7 @@ var _Frame = class extends import_js_toolkit.Base {
     return this.getDirectChild("FrameAnchor");
   }
   get directChildFrameForm() {
-    return this.getDirectChild("form");
+    return this.getDirectChild("FrameForm");
   }
   get directChildFrameTarget() {
     return this.getDirectChild("FrameTarget");
@@ -112,7 +112,9 @@ var _Frame = class extends import_js_toolkit.Base {
     this.$log("onFrameFormFrameSubmit", 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");

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 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};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/ui",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "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.0.0",
+    "@studiometa/js-toolkit": "^2.2.2",
     "deepmerge": "^4.2.2"
   }
 }