Merge branch 'release/0.2.7'

composer.json

@@ -1,6 +1,6 @@
 {
   "name": "studiometa/ui",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "A set of opiniated, unstyled and accessible components.",
   "license": "MIT",
   "require": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/ui-workspace",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "private": true,
   "workspaces": [
     "packages/*"

packages/docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/ui-docs",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "private": true,
   "type": "module",
   "scripts": {

packages/tests/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/ui-tests",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "private": true,
   "type": "module",
   "scripts": {

packages/ui/molecules/Slider/Slider.js

@@ -93,6 +93,16 @@ export default class Slider extends Base {
    */
   states = [];
 
+  /**
+   * Origins for the different modes.
+   * @type {Record<SliderModes, number>}
+   */
+  origins = {
+    left: 0,
+    center: 0,
+    right: 0,
+  };
+
   /**
    * Get the current state.
    * @returns {SliderState}
@@ -163,7 +173,7 @@ export default class Slider extends Base {
     const { wrapper } = this.$refs;
     const originRect = wrapper.getBoundingClientRect();
 
-    const origins = {
+    this.origins = {
       left: originRect.left,
       center: originRect.x + originRect.width / 2,
       right: originRect.x + originRect.width,
@@ -172,14 +182,23 @@ export default class Slider extends Base {
     return this.$children.SliderItem.map((item) => {
       return {
         x: {
-          left: (item.rect.x - origins.left) * -1,
-          center: (item.rect.x + item.rect.width / 2 - origins.center) * -1,
-          right: (item.rect.x + item.rect.width - origins.right) * -1,
+          left: (item.rect.x - this.origins.left) * -1,
+          center: (item.rect.x + item.rect.width / 2 - this.origins.center) * -1,
+          right: (item.rect.x + item.rect.width - this.origins.right) * -1,
         },
       };
     });
   }
 
+  /**
+   * Get an origin by mode.
+   * @param   {SliderOptions['mode']} [mode]
+   * @returns {number}
+   */
+  getOriginByMode(mode) {
+    return this.origins[mode ?? this.$options.mode];
+  }
+
   /**
    * Get a state value according to the given mode.
    *

packages/ui/molecules/Slider/SliderItem.js

@@ -86,9 +86,7 @@ export default class SliderItem extends withIntersectionObserver(Base, { thresho
    */
   ticked() {
     this.dampedX = damp(this.x, this.dampedX, 0.2, 0.00001);
-    this.$el.style.transform = `${matrix({
-      translateX: this.dampedX,
-    })} translateZ(0px)`;
+    this.render();
 
     if (this.dampedX === this.x) {
       this.$services.disable('ticked');
@@ -136,8 +134,16 @@ export default class SliderItem extends withIntersectionObserver(Base, { thresho
   moveInstantly(targetPosition) {
     this.x = targetPosition;
     this.dampedX = targetPosition;
+    this.render();
+  }
+
+  /**
+   * Render the transform.
+   * @returns {void}
+   */
+  render() {
     this.$el.style.transform = `${matrix({
-      translateX: targetPosition,
+      translateX: this.dampedX,
     })} translateZ(0px)`;
   }
 

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/ui",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "A set of opiniated, unstyled and accessible components",
   "publishConfig": {
     "access": "public"