@studiometa/ui 1.0.0-rc.0 → 1.0.0-rc.1

package/Slider/SliderItem.js

@@ -1,35 +1,31 @@
-import { Base, withIntersectionObserver } from "@studiometa/js-toolkit";
+import { Base } from "@studiometa/js-toolkit";
 import { damp, domScheduler, transform } from "@studiometa/js-toolkit/utils";
-class SliderItem extends withIntersectionObserver(Base, {
-  threshold: [0, 1]
-}) {
+class SliderItem extends Base {
   /**
    * Config.
    */
   static config = {
-    name: "SliderItem",
-    emits: ["is-fully-visible", "is-partially-visible", "is-hidden"]
+    name: "SliderItem"
   };
-  /**
-   * Wether the SliderItem is visible or not.
-   * @type {boolean}
-   */
-  isVisible = false;
   /**
    * The SliderItem `x` position.
-   * @type {number}
    */
   x = 0;
   /**
    * The smoothed `x` position.
-   * @type {number}
    */
   dampedX = 0;
   /**
    * Item original position.
    */
   __rect;
+  /**
+   * Wether the slider item size should be evaluated or not.
+   */
   shouldEvaluateRect = false;
+  /**
+   * Size of the slider item.
+   */
   get rect() {
     if (!this.__rect || this.shouldEvaluateRect) {
       this.shouldEvaluateRect = false;
@@ -62,25 +58,11 @@ class SliderItem extends withIntersectionObserver(Base, {
   destroyed() {
     this.moveInstantly(0);
   }
-  /**
-   * Intersected hook.
-   */
-  intersected([{ intersectionRatio, isIntersecting }]) {
-    if (intersectionRatio >= 1) {
-      this.$emit("is-fully-visible");
-    } else if (intersectionRatio > 0) {
-      this.$emit("is-partially-visible");
-    } else {
-      this.$emit("is-hidden");
-    }
-    this.isVisible = isIntersecting;
-  }
   /**
    * Ticked hook.
    * @todo create AbstractSliderItem with `render` method
    * @todo add state to SliderItem
    * @todo add origin to SliderItem
-   * @returns {void}
    */
   ticked() {
     this.dampedX = damp(this.x, this.dampedX, 0.1, 1e-5);
@@ -134,20 +116,6 @@ class SliderItem extends withIntersectionObserver(Base, {
       transform(this.$el, { x: this.dampedX });
     });
   }
-  /**
-   * Check if SliderItem is partially visible for the given target position.
-   */
-  willBeVisible(targetPosition) {
-    return this.rect.x + targetPosition < window.innerWidth * 1.5 && this.rect.x + targetPosition + this.rect.width > window.innerWidth * -0.5;
-  }
-  /**
-   * Check if SliderItem is fully visible for the given target position.
-   * @param   {number} targetPosition
-   * @returns {boolean}
-   */
-  willBeFullyVisible(targetPosition) {
-    return this.rect.x + targetPosition < window.innerWidth && this.rect.x + targetPosition > 0 && this.rect.x + targetPosition + this.rect.width < window.innerWidth && this.rect.x + targetPosition + this.rect.width > 0;
-  }
 }
 export {
   SliderItem

package/Slider/SliderItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/Slider/SliderItem.ts"],
-  "sourcesContent": ["import { Base, withIntersectionObserver } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { damp, domScheduler, transform } from '@studiometa/js-toolkit/utils';\n\n/**\n * Manage a slider item and its state transition.\n */\nexport class SliderItem<T extends BaseProps = BaseProps> extends withIntersectionObserver(Base, {\n  threshold: [0, 1],\n})<T> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'SliderItem',\n    emits: ['is-fully-visible', 'is-partially-visible', 'is-hidden'],\n  };\n\n  /**\n   * Wether the SliderItem is visible or not.\n   * @type {boolean}\n   */\n  isVisible = false;\n\n  /**\n   * The SliderItem `x` position.\n   * @type {number}\n   */\n  x = 0;\n\n  /**\n   * The smoothed `x` position.\n   * @type {number}\n   */\n  dampedX = 0;\n\n  /**\n   * Item original position.\n   */\n  __rect: {\n    x: number;\n    y: number;\n    top: number;\n    right: number;\n    bottom: number;\n    left: number;\n    width: number;\n    height: number;\n  };\n\n  shouldEvaluateRect = false;\n\n  get rect() {\n    if (!this.__rect || this.shouldEvaluateRect) {\n      this.shouldEvaluateRect = false;\n      const x = this.x * -1;\n      const rect = this.$el.getBoundingClientRect().toJSON();\n      this.__rect = {\n        ...rect,\n        left: rect.left + x,\n        right: rect.left + x + rect.width,\n        x: rect.left + x,\n      };\n    }\n\n    return this.__rect;\n  }\n\n  /**\n   * Mounted hook\n   */\n  mounted() {\n    this.setAccessibilityAttributes();\n  }\n\n  /**\n   * Update SliderItem bounding rectangle on resize.\n   */\n  resized() {\n    this.shouldEvaluateRect = true;\n  }\n\n  /**\n   * Reset position to `0` on destroy.\n   */\n  destroyed() {\n    this.moveInstantly(0);\n  }\n\n  /**\n   * Intersected hook.\n   */\n  intersected([{ intersectionRatio, isIntersecting }]: IntersectionObserverEntry[]) {\n    if (intersectionRatio >= 1) {\n      this.$emit('is-fully-visible');\n    } else if (intersectionRatio > 0) {\n      this.$emit('is-partially-visible');\n    } else {\n      this.$emit('is-hidden');\n    }\n\n    this.isVisible = isIntersecting;\n  }\n\n  /**\n   * Ticked hook.\n   * @todo create AbstractSliderItem with `render` method\n   * @todo add state to SliderItem\n   * @todo add origin to SliderItem\n   * @returns {void}\n   */\n  ticked() {\n    this.dampedX = damp(this.x, this.dampedX, 0.1, 0.00001);\n    this.render();\n\n    if (this.dampedX === this.x) {\n      this.$services.disable('ticked');\n    }\n  }\n\n  /**\n   * Set accessibility attributes for the component\n   */\n  setAccessibilityAttributes() {\n    this.$el.setAttribute('role', 'group');\n    this.$el.setAttribute('aria-roledescription', 'slide');\n    this.$el.setAttribute('aria-label', this.$id);\n  }\n\n  /**\n   * Enable the SliderItem.\n   */\n  activate() {\n    this.$el.classList.add('is-active');\n  }\n\n  /**\n   * Disable the SliderItem.\n   */\n  disactivate() {\n    this.$el.classList.remove('is-active');\n  }\n\n  /**\n   * Move the SliderItem to the given target position.\n   */\n  move(targetPosition: number) {\n    this.x = targetPosition;\n\n    if (!this.$services.has('ticked')) {\n      this.$services.enable('ticked');\n    }\n  }\n\n  /**\n   * Move the SliderItem instantly to the given target position.\n   */\n  moveInstantly(targetPosition: number) {\n    this.x = targetPosition;\n    this.dampedX = targetPosition;\n    this.render();\n  }\n\n  /**\n   * Render the component.\n   */\n  render() {\n    domScheduler.write(() => {\n      transform(this.$el, { x: this.dampedX });\n    });\n  }\n\n  /**\n   * Check if SliderItem is partially visible for the given target position.\n   */\n  willBeVisible(targetPosition: number) {\n    return (\n      this.rect.x + targetPosition < window.innerWidth * 1.5 &&\n      this.rect.x + targetPosition + this.rect.width > window.innerWidth * -0.5\n    );\n  }\n\n  /**\n   * Check if SliderItem is fully visible for the given target position.\n   * @param   {number} targetPosition\n   * @returns {boolean}\n   */\n  willBeFullyVisible(targetPosition) {\n    return (\n      this.rect.x + targetPosition < window.innerWidth &&\n      this.rect.x + targetPosition > 0 &&\n      this.rect.x + targetPosition + this.rect.width < window.innerWidth &&\n      this.rect.x + targetPosition + this.rect.width > 0\n    );\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { damp, domScheduler, transform } from '@studiometa/js-toolkit/utils';\n\nexport interface SliderItemProps extends BaseProps {}\n\n/**\n * SliderItem class.\n */\nexport class SliderItem<T extends BaseProps = BaseProps> extends Base<T & SliderItemProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'SliderItem',\n  };\n\n  /**\n   * The SliderItem `x` position.\n   */\n  x = 0;\n\n  /**\n   * The smoothed `x` position.\n   */\n  dampedX = 0;\n\n  /**\n   * Item original position.\n   */\n  __rect: {\n    x: number;\n    y: number;\n    top: number;\n    right: number;\n    bottom: number;\n    left: number;\n    width: number;\n    height: number;\n  };\n\n  /**\n   * Wether the slider item size should be evaluated or not.\n   */\n  shouldEvaluateRect = false;\n\n  /**\n   * Size of the slider item.\n   */\n  get rect() {\n    if (!this.__rect || this.shouldEvaluateRect) {\n      this.shouldEvaluateRect = false;\n      const x = this.x * -1;\n      const rect = this.$el.getBoundingClientRect().toJSON();\n      this.__rect = {\n        ...rect,\n        left: rect.left + x,\n        right: rect.left + x + rect.width,\n        x: rect.left + x,\n      };\n    }\n\n    return this.__rect;\n  }\n\n  /**\n   * Mounted hook\n   */\n  mounted() {\n    this.setAccessibilityAttributes();\n  }\n\n  /**\n   * Update SliderItem bounding rectangle on resize.\n   */\n  resized() {\n    this.shouldEvaluateRect = true;\n  }\n\n  /**\n   * Reset position to `0` on destroy.\n   */\n  destroyed() {\n    this.moveInstantly(0);\n  }\n\n  /**\n   * Ticked hook.\n   * @todo create AbstractSliderItem with `render` method\n   * @todo add state to SliderItem\n   * @todo add origin to SliderItem\n   */\n  ticked() {\n    this.dampedX = damp(this.x, this.dampedX, 0.1, 0.00001);\n    this.render();\n\n    if (this.dampedX === this.x) {\n      this.$services.disable('ticked');\n    }\n  }\n\n  /**\n   * Set accessibility attributes for the component\n   */\n  setAccessibilityAttributes() {\n    this.$el.setAttribute('role', 'group');\n    this.$el.setAttribute('aria-roledescription', 'slide');\n    this.$el.setAttribute('aria-label', this.$id);\n  }\n\n  /**\n   * Enable the SliderItem.\n   */\n  activate() {\n    this.$el.classList.add('is-active');\n  }\n\n  /**\n   * Disable the SliderItem.\n   */\n  disactivate() {\n    this.$el.classList.remove('is-active');\n  }\n\n  /**\n   * Move the SliderItem to the given target position.\n   */\n  move(targetPosition: number) {\n    this.x = targetPosition;\n\n    if (!this.$services.has('ticked')) {\n      this.$services.enable('ticked');\n    }\n  }\n\n  /**\n   * Move the SliderItem instantly to the given target position.\n   */\n  moveInstantly(targetPosition: number) {\n    this.x = targetPosition;\n    this.dampedX = targetPosition;\n    this.render();\n  }\n\n  /**\n   * Render the component.\n   */\n  render() {\n    domScheduler.write(() => {\n      transform(this.$el, { x: this.dampedX });\n    });\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,YAAY;AAErB,SAAS,MAAM,cAAc,iBAAiB;AAOvC,MAAM,mBAAoD,KAA0B;AAAA;AAAA;AAAA;AAAA,EAIzF,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,EACR;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI;AAAA;AAAA;AAAA;AAAA,EAKJ,UAAU;AAAA;AAAA;AAAA;AAAA,EAKV;AAAA;AAAA;AAAA;AAAA,EAcA,qBAAqB;AAAA;AAAA;AAAA;AAAA,EAKrB,IAAI,OAAO;AACT,QAAI,CAAC,KAAK,UAAU,KAAK,oBAAoB;AAC3C,WAAK,qBAAqB;AAC1B,YAAM,IAAI,KAAK,IAAI;AACnB,YAAM,OAAO,KAAK,IAAI,sBAAsB,EAAE,OAAO;AACrD,WAAK,SAAS;AAAA,QACZ,GAAG;AAAA,QACH,MAAM,KAAK,OAAO;AAAA,QAClB,OAAO,KAAK,OAAO,IAAI,KAAK;AAAA,QAC5B,GAAG,KAAK,OAAO;AAAA,MACjB;AAAA,IACF;AAEA,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,SAAK,2BAA2B;AAAA,EAClC;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,SAAK,qBAAqB;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY;AACV,SAAK,cAAc,CAAC;AAAA,EACtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,SAAS;AACP,SAAK,UAAU,KAAK,KAAK,GAAG,KAAK,SAAS,KAAK,IAAO;AACtD,SAAK,OAAO;AAEZ,QAAI,KAAK,YAAY,KAAK,GAAG;AAC3B,WAAK,UAAU,QAAQ,QAAQ;AAAA,IACjC;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,6BAA6B;AAC3B,SAAK,IAAI,aAAa,QAAQ,OAAO;AACrC,SAAK,IAAI,aAAa,wBAAwB,OAAO;AACrD,SAAK,IAAI,aAAa,cAAc,KAAK,GAAG;AAAA,EAC9C;AAAA;AAAA;AAAA;AAAA,EAKA,WAAW;AACT,SAAK,IAAI,UAAU,IAAI,WAAW;AAAA,EACpC;AAAA;AAAA;AAAA;AAAA,EAKA,cAAc;AACZ,SAAK,IAAI,UAAU,OAAO,WAAW;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA,EAKA,KAAK,gBAAwB;AAC3B,SAAK,IAAI;AAET,QAAI,CAAC,KAAK,UAAU,IAAI,QAAQ,GAAG;AACjC,WAAK,UAAU,OAAO,QAAQ;AAAA,IAChC;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,cAAc,gBAAwB;AACpC,SAAK,IAAI;AACT,SAAK,UAAU;AACf,SAAK,OAAO;AAAA,EACd;AAAA;AAAA;AAAA;AAAA,EAKA,SAAS;AACP,iBAAa,MAAM,MAAM;AACvB,gBAAU,KAAK,KAAK,EAAE,GAAG,KAAK,QAAQ,CAAC;AAAA,IACzC,CAAC;AAAA,EACH;AACF;",
   "names": []
 }

package/decorators/withTransition.d.ts

@@ -17,6 +17,10 @@ export interface TransitionInterface extends BaseInterface {
      * Get the transition target.
      */
     get target(): HTMLElement | HTMLElement[];
+    /**
+     * Get the group targets.
+     */
+    get targets(): HTMLElement[];
     /**
      * Trigger the enter transition.
      */

package/decorators/withTransition.js

@@ -1,5 +1,5 @@
 import { getInstances } from "@studiometa/js-toolkit";
-import { transition } from "@studiometa/js-toolkit/utils";
+import { nextFrame, removeClass, transition } from "@studiometa/js-toolkit/utils";
 function withTransition(BaseClass) {
   class Transition extends BaseClass {
     /**
@@ -25,59 +25,54 @@ function withTransition(BaseClass) {
     get target() {
       return this.$el;
     }
+    /**
+     * Get the group targets.
+     */
+    get targets() {
+      const { group } = this.$options;
+      const targets = [this.target];
+      if (group) {
+        for (const instance of getInstances(this.constructor)) {
+          if (instance !== this && instance.$options.group === group) {
+            targets.push(instance.target);
+          }
+        }
+      }
+      return targets.flat();
+    }
     /**
      * Trigger the enter transition.
      */
-    async enter(target, { dispatch = true } = {}) {
+    async enter(target) {
       const { enterFrom, enterActive, enterTo, enterKeep, leaveTo } = this.$options;
-      await Promise.all([
-        transition(
-          target ?? this.target,
-          {
-            // eslint-disable-next-line prefer-template
-            from: (leaveTo + " " + enterFrom).trim(),
-            active: enterActive,
-            to: enterTo
-          },
-          enterKeep ? "keep" : void 0
-        ),
-        dispatch && this.dispatch("enter")
-      ]);
+      removeClass(target ?? this.targets, leaveTo);
+      await nextFrame();
+      await transition(
+        target ?? this.targets,
+        {
+          from: enterFrom,
+          active: enterActive,
+          to: enterTo
+        },
+        enterKeep ? "keep" : void 0
+      );
     }
     /**
      * Trigger the leave transition.
      */
-    async leave(target, { dispatch = true } = {}) {
+    async leave(target) {
       const { leaveFrom, leaveActive, leaveTo, leaveKeep, enterTo } = this.$options;
-      await Promise.all([
-        transition(
-          target ?? this.target,
-          {
-            // eslint-disable-next-line prefer-template
-            from: (enterTo + " " + leaveFrom).trim(),
-            active: leaveActive,
-            to: leaveTo
-          },
-          leaveKeep ? "keep" : void 0
-        ),
-        dispatch && this.dispatch("leave")
-      ]);
-    }
-    /**
-     * Dispatch the callback to related instances.
-     */
-    async dispatch(method) {
-      const { group } = this.$options;
-      if (!group) {
-        return;
-      }
-      const promises = [];
-      for (const instance of getInstances(Transition)) {
-        if (instance !== this && instance.$options.group === group) {
-          promises.push(instance[method](void 0, { dispatch: false }));
-        }
-      }
-      await Promise.all(promises);
+      removeClass(target ?? this.targets, enterTo);
+      await nextFrame();
+      await transition(
+        target ?? this.targets,
+        {
+          from: leaveFrom,
+          active: leaveActive,
+          to: leaveTo
+        },
+        leaveKeep ? "keep" : void 0
+      );
     }
   }
   return Transition;

package/decorators/withTransition.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/decorators/withTransition.ts"],
-  "sourcesContent": ["import { getInstances } from '@studiometa/js-toolkit';\nimport { transition } from '@studiometa/js-toolkit/utils';\nimport type {\n  Base,\n  BaseDecorator,\n  BaseProps,\n  BaseConfig,\n  BaseInterface,\n} from '@studiometa/js-toolkit';\n\nexport interface TransitionProps extends BaseProps {\n  $options: {\n    enterFrom: string;\n    enterActive: string;\n    enterTo: string;\n    enterKeep: boolean;\n    leaveFrom: string;\n    leaveActive: string;\n    leaveTo: string;\n    leaveKeep: boolean;\n    group: string;\n  };\n}\n\nexport interface TransitionInterface extends BaseInterface {\n  /**\n   * Get the transition target.\n   */\n  get target(): HTMLElement | HTMLElement[];\n  /**\n   * Trigger the enter transition.\n   */\n  enter(target?: HTMLElement | HTMLElement[]): Promise<void>;\n  /**\n   * Trigger the leave transition.\n   */\n  leave(target?: HTMLElement | HTMLElement[]): Promise<void>;\n}\n\n/**\n * Extend a class to add transition capabilities.\n */\nexport function withTransition<S extends Base>(\n  BaseClass: typeof Base,\n): BaseDecorator<TransitionInterface, S, TransitionProps> {\n  /**\n   * Class.\n   */\n  class Transition<T extends BaseProps = BaseProps> extends BaseClass<T & TransitionProps> {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      name: 'Transition',\n      options: {\n        enterFrom: String,\n        enterActive: String,\n        enterTo: String,\n        enterKeep: Boolean,\n        leaveFrom: String,\n        leaveActive: String,\n        leaveTo: String,\n        leaveKeep: Boolean,\n        group: String,\n      },\n    };\n\n    /**\n     * Get the transition target.\n     */\n    get target(): HTMLElement | HTMLElement[] {\n      return this.$el;\n    }\n\n    /**\n     * Trigger the enter transition.\n     */\n    async enter(target?: HTMLElement | HTMLElement[], { dispatch = true } = {}): Promise<void> {\n      const { enterFrom, enterActive, enterTo, enterKeep, leaveTo } = this.$options;\n\n      await Promise.all([\n        transition(\n          target ?? this.target,\n          {\n            // eslint-disable-next-line prefer-template\n            from: (leaveTo + ' ' + enterFrom).trim(),\n            active: enterActive as string,\n            to: enterTo as string,\n          },\n          enterKeep ? 'keep' : undefined,\n        ),\n        dispatch && this.dispatch('enter'),\n      ]);\n    }\n\n    /**\n     * Trigger the leave transition.\n     */\n    async leave(target?: HTMLElement | HTMLElement[], { dispatch = true } = {}): Promise<void> {\n      const { leaveFrom, leaveActive, leaveTo, leaveKeep, enterTo } = this.$options;\n\n      await Promise.all([\n        transition(\n          target ?? this.target,\n          {\n            // eslint-disable-next-line prefer-template\n            from: (enterTo + ' ' + leaveFrom).trim(),\n            active: leaveActive as string,\n            to: leaveTo as string,\n          },\n          leaveKeep ? 'keep' : undefined,\n        ),\n        dispatch && this.dispatch('leave'),\n      ]);\n    }\n\n    /**\n     * Dispatch the callback to related instances.\n     */\n    async dispatch(method: 'enter' | 'leave') {\n      const { group } = this.$options;\n\n      if (!group) {\n        return;\n      }\n\n      const promises = [];\n\n      for (const instance of getInstances(Transition)) {\n        if (instance !== this && instance.$options.group === group) {\n          promises.push(instance[method](undefined, { dispatch: false }));\n        }\n      }\n\n      await Promise.all(promises);\n    }\n  }\n\n  // @ts-ignore\n  return Transition;\n}\n"],
-  "mappings": "AAAA,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAyCpB,SAAS,eACd,WACwD;AAAA,EAIxD,MAAM,mBAAoD,UAA+B;AAAA;AAAA;AAAA;AAAA,IAIvF,OAAO,SAAqB;AAAA,MAC1B,MAAM;AAAA,MACN,SAAS;AAAA,QACP,WAAW;AAAA,QACX,aAAa;AAAA,QACb,SAAS;AAAA,QACT,WAAW;AAAA,QACX,WAAW;AAAA,QACX,aAAa;AAAA,QACb,SAAS;AAAA,QACT,WAAW;AAAA,QACX,OAAO;AAAA,MACT;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKA,IAAI,SAAsC;AACxC,aAAO,KAAK;AAAA,IACd;AAAA;AAAA;AAAA;AAAA,IAKA,MAAM,MAAM,QAAsC,EAAE,WAAW,KAAK,IAAI,CAAC,GAAkB;AACzF,YAAM,EAAE,WAAW,aAAa,SAAS,WAAW,QAAQ,IAAI,KAAK;AAErE,YAAM,QAAQ,IAAI;AAAA,QAChB;AAAA,UACE,UAAU,KAAK;AAAA,UACf;AAAA;AAAA,YAEE,OAAO,UAAU,MAAM,WAAW,KAAK;AAAA,YACvC,QAAQ;AAAA,YACR,IAAI;AAAA,UACN;AAAA,UACA,YAAY,SAAS;AAAA,QACvB;AAAA,QACA,YAAY,KAAK,SAAS,OAAO;AAAA,MACnC,CAAC;AAAA,IACH;AAAA;AAAA;AAAA;AAAA,IAKA,MAAM,MAAM,QAAsC,EAAE,WAAW,KAAK,IAAI,CAAC,GAAkB;AACzF,YAAM,EAAE,WAAW,aAAa,SAAS,WAAW,QAAQ,IAAI,KAAK;AAErE,YAAM,QAAQ,IAAI;AAAA,QAChB;AAAA,UACE,UAAU,KAAK;AAAA,UACf;AAAA;AAAA,YAEE,OAAO,UAAU,MAAM,WAAW,KAAK;AAAA,YACvC,QAAQ;AAAA,YACR,IAAI;AAAA,UACN;AAAA,UACA,YAAY,SAAS;AAAA,QACvB;AAAA,QACA,YAAY,KAAK,SAAS,OAAO;AAAA,MACnC,CAAC;AAAA,IACH;AAAA;AAAA;AAAA;AAAA,IAKA,MAAM,SAAS,QAA2B;AACxC,YAAM,EAAE,MAAM,IAAI,KAAK;AAEvB,UAAI,CAAC,OAAO;AACV;AAAA,MACF;AAEA,YAAM,WAAW,CAAC;AAElB,iBAAW,YAAY,aAAa,UAAU,GAAG;AAC/C,YAAI,aAAa,QAAQ,SAAS,SAAS,UAAU,OAAO;AAC1D,mBAAS,KAAK,SAAS,MAAM,EAAE,QAAW,EAAE,UAAU,MAAM,CAAC,CAAC;AAAA,QAChE;AAAA,MACF;AAEA,YAAM,QAAQ,IAAI,QAAQ;AAAA,IAC5B;AAAA,EACF;AAGA,SAAO;AACT;",
+  "sourcesContent": ["import { getInstances } from '@studiometa/js-toolkit';\nimport { nextFrame, removeClass, transition } from '@studiometa/js-toolkit/utils';\nimport type {\n  Base,\n  BaseDecorator,\n  BaseProps,\n  BaseConfig,\n  BaseInterface,\n} from '@studiometa/js-toolkit';\n\nexport interface TransitionProps extends BaseProps {\n  $options: {\n    enterFrom: string;\n    enterActive: string;\n    enterTo: string;\n    enterKeep: boolean;\n    leaveFrom: string;\n    leaveActive: string;\n    leaveTo: string;\n    leaveKeep: boolean;\n    group: string;\n  };\n}\n\nexport interface TransitionInterface extends BaseInterface {\n  /**\n   * Get the transition target.\n   */\n  get target(): HTMLElement | HTMLElement[];\n  /**\n   * Get the group targets.\n   */\n  get targets(): HTMLElement[];\n  /**\n   * Trigger the enter transition.\n   */\n  enter(target?: HTMLElement | HTMLElement[]): Promise<void>;\n  /**\n   * Trigger the leave transition.\n   */\n  leave(target?: HTMLElement | HTMLElement[]): Promise<void>;\n}\n\n/**\n * Extend a class to add transition capabilities.\n */\nexport function withTransition<S extends Base>(\n  BaseClass: typeof Base,\n): BaseDecorator<TransitionInterface, S, TransitionProps> {\n  /**\n   * Class.\n   */\n  class Transition<T extends BaseProps = BaseProps> extends BaseClass<T & TransitionProps> {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      name: 'Transition',\n      options: {\n        enterFrom: String,\n        enterActive: String,\n        enterTo: String,\n        enterKeep: Boolean,\n        leaveFrom: String,\n        leaveActive: String,\n        leaveTo: String,\n        leaveKeep: Boolean,\n        group: String,\n      },\n    };\n\n    /**\n     * Get the transition target.\n     */\n    get target(): HTMLElement | HTMLElement[] {\n      return this.$el;\n    }\n\n    /**\n     * Get the group targets.\n     */\n    get targets(): HTMLElement[] {\n      const { group } = this.$options;\n      const targets = [this.target];\n\n      if (group) {\n        for (const instance of getInstances(this.constructor as typeof Transition)) {\n          if (instance !== this && instance.$options.group === group) {\n            targets.push(instance.target);\n          }\n        }\n      }\n\n      return targets.flat();\n    }\n\n    /**\n     * Trigger the enter transition.\n     */\n    async enter(target?: HTMLElement | HTMLElement[]): Promise<void> {\n      const { enterFrom, enterActive, enterTo, enterKeep, leaveTo } = this.$options;\n\n      removeClass(target ?? this.targets, leaveTo);\n      await nextFrame();\n      await transition(\n        target ?? this.targets,\n        {\n          from: enterFrom,\n          active: enterActive as string,\n          to: enterTo as string,\n        },\n        enterKeep ? 'keep' : undefined,\n      );\n    }\n\n    /**\n     * Trigger the leave transition.\n     */\n    async leave(target?: HTMLElement | HTMLElement[]): Promise<void> {\n      const { leaveFrom, leaveActive, leaveTo, leaveKeep, enterTo } = this.$options;\n\n      removeClass(target ?? this.targets, enterTo);\n      await nextFrame();\n      await transition(\n        target ?? this.targets,\n        {\n          from: leaveFrom,\n          active: leaveActive as string,\n          to: leaveTo as string,\n        },\n        leaveKeep ? 'keep' : undefined,\n      );\n    }\n  }\n\n  // @ts-ignore\n  return Transition;\n}\n"],
+  "mappings": "AAAA,SAAS,oBAAoB;AAC7B,SAAS,WAAW,aAAa,kBAAkB;AA6C5C,SAAS,eACd,WACwD;AAAA,EAIxD,MAAM,mBAAoD,UAA+B;AAAA;AAAA;AAAA;AAAA,IAIvF,OAAO,SAAqB;AAAA,MAC1B,MAAM;AAAA,MACN,SAAS;AAAA,QACP,WAAW;AAAA,QACX,aAAa;AAAA,QACb,SAAS;AAAA,QACT,WAAW;AAAA,QACX,WAAW;AAAA,QACX,aAAa;AAAA,QACb,SAAS;AAAA,QACT,WAAW;AAAA,QACX,OAAO;AAAA,MACT;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKA,IAAI,SAAsC;AACxC,aAAO,KAAK;AAAA,IACd;AAAA;AAAA;AAAA;AAAA,IAKA,IAAI,UAAyB;AAC3B,YAAM,EAAE,MAAM,IAAI,KAAK;AACvB,YAAM,UAAU,CAAC,KAAK,MAAM;AAE5B,UAAI,OAAO;AACT,mBAAW,YAAY,aAAa,KAAK,WAAgC,GAAG;AAC1E,cAAI,aAAa,QAAQ,SAAS,SAAS,UAAU,OAAO;AAC1D,oBAAQ,KAAK,SAAS,MAAM;AAAA,UAC9B;AAAA,QACF;AAAA,MACF;AAEA,aAAO,QAAQ,KAAK;AAAA,IACtB;AAAA;AAAA;AAAA;AAAA,IAKA,MAAM,MAAM,QAAqD;AAC/D,YAAM,EAAE,WAAW,aAAa,SAAS,WAAW,QAAQ,IAAI,KAAK;AAErE,kBAAY,UAAU,KAAK,SAAS,OAAO;AAC3C,YAAM,UAAU;AAChB,YAAM;AAAA,QACJ,UAAU,KAAK;AAAA,QACf;AAAA,UACE,MAAM;AAAA,UACN,QAAQ;AAAA,UACR,IAAI;AAAA,QACN;AAAA,QACA,YAAY,SAAS;AAAA,MACvB;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKA,MAAM,MAAM,QAAqD;AAC/D,YAAM,EAAE,WAAW,aAAa,SAAS,WAAW,QAAQ,IAAI,KAAK;AAErE,kBAAY,UAAU,KAAK,SAAS,OAAO;AAC3C,YAAM,UAAU;AAChB,YAAM;AAAA,QACJ,UAAU,KAAK;AAAA,QACf;AAAA,UACE,MAAM;AAAA,UACN,QAAQ;AAAA,UACR,IAAI;AAAA,QACN;AAAA,QACA,YAAY,SAAS;AAAA,MACvB;AAAA,IACF;AAAA,EACF;AAGA,SAAO;AACT;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/ui",
-  "version": "1.0.0-rc.0",
+  "version": "1.0.0-rc.1",
   "description": "A set of opiniated, unstyled and accessible components",
   "publishConfig": {
     "access": "public"
@@ -29,10 +29,11 @@
   },
   "homepage": "https://github.com/studiometa/ui#readme",
   "dependencies": {
-    "deepmerge": "^4.3.1"
+    "deepmerge": "^4.3.1",
+    "morphdom": "^2.7.5"
   },
   "devDependencies": {
-    "@studiometa/js-toolkit": "^3.0.0"
+    "@studiometa/js-toolkit": "3.0.2"
   },
   "peerDependencies": {
     "@studiometa/js-toolkit": "^3.0.0"