@studiometa/ui 1.6.0 → 1.8.0

package/Tabs/Tabs.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/Tabs/Tabs.ts"],
-  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { transition } from '@studiometa/js-toolkit/utils';\n\ntype TabItem = {\n  btn: HTMLElement;\n  content: HTMLElement;\n  isEnabled: boolean;\n};\n\ntype TabsStates = Partial<\n  Record<'open' | 'active' | 'closed', string | Partial<CSSStyleDeclaration>>\n>;\n// eslint-disable-next-line no-use-before-define\ntype TabsStylesOption = Partial<Record<keyof TabsProps['$refs'], TabsStates>>;\n\nexport interface TabsProps extends BaseProps {\n  $options: {\n    styles: TabsStylesOption;\n  };\n  $refs: {\n    btn: HTMLElement[];\n    content: HTMLElement[];\n  };\n}\n\n/**\n * Tabs class.\n * @link https://ui.studiometa.dev/-/components/Tabs/\n */\nexport class Tabs<T extends BaseProps = BaseProps> extends Base<T & TabsProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Tabs',\n    refs: ['btn[]', 'content[]'],\n    emits: ['enable', 'disable'],\n    options: {\n      styles: {\n        type: Object,\n        default: (): TabsStylesOption => ({\n          content: {\n            closed: {\n              position: 'absolute',\n              opacity: '0',\n              pointerEvents: 'none',\n              visibility: 'hidden',\n            },\n          },\n        }),\n        merge: true,\n      },\n    },\n  };\n\n  items: TabItem[];\n\n  /**\n   * Initialize the component's behaviours.\n   * @returns {void}\n   */\n  mounted() {\n    this.items = this.$refs.btn.map((btn, index) => {\n      const id = `${this.$id}-${index}`;\n      const content = this.$refs.content[index];\n      btn.setAttribute('id', id);\n      content.setAttribute('aria-labelledby', id);\n\n      const item = { btn, content, isEnabled: index > 0 };\n      if (index > 0) {\n        this.disableItem(item);\n      } else {\n        this.enableItem(item);\n      }\n      return item;\n    });\n  }\n\n  /**\n   * Switch tab on button click.\n   */\n  onBtnClick({ index }: { index: number }) {\n    this.items.forEach((item, i) => {\n      if (i !== index) {\n        this.disableItem(item);\n      }\n    });\n\n    this.enableItem(this.items[index]);\n  }\n\n  /**\n   * Enable the given tab and its associated content.\n   */\n  async enableItem(item: TabItem): Promise<this> {\n    if (!item || item.isEnabled) {\n      return Promise.resolve(this);\n    }\n\n    item.isEnabled = true;\n    const { btn, content } = item;\n    const btnStyles = this.$options.styles.btn || {};\n    const contentStyles = this.$options.styles.content || {};\n\n    content.setAttribute('aria-hidden', 'false');\n    this.$emit('enable', item);\n\n    return Promise.all([\n      transition(\n        btn,\n        {\n          from: btnStyles.closed,\n          active: btnStyles.active,\n          to: btnStyles.open,\n        },\n        'keep',\n      ),\n      transition(\n        content,\n        {\n          from: contentStyles.closed,\n          active: contentStyles.active,\n          to: contentStyles.open,\n        },\n        'keep',\n      ),\n    ]).then(() => Promise.resolve(this));\n  }\n\n  /**\n   * Disable the given tab and its associated content.\n   */\n  async disableItem(item: TabItem): Promise<this> {\n    if (!item || !item.isEnabled) {\n      return Promise.resolve(this);\n    }\n\n    item.isEnabled = false;\n    const { btn, content } = item;\n    const btnStyles = this.$options.styles.btn || {};\n    const contentStyles = this.$options.styles.content || {};\n\n    content.setAttribute('aria-hidden', 'true');\n    this.$emit('disable', item);\n\n    return Promise.all([\n      transition(\n        btn,\n        {\n          from: btnStyles.open,\n          active: btnStyles.active,\n          to: btnStyles.closed,\n        },\n        'keep',\n      ),\n      transition(\n        content,\n        {\n          from: contentStyles.open,\n          active: contentStyles.active,\n          to: contentStyles.closed,\n        },\n        'keep',\n      ),\n    ]).then(() => Promise.resolve(this));\n  }\n}\n"],
+  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { transition } from '@studiometa/js-toolkit/utils';\n\ntype TabItem = {\n  btn: HTMLElement;\n  content: HTMLElement;\n  isEnabled: boolean;\n};\n\ntype TabsStates = Partial<\n  Record<'open' | 'active' | 'closed', string | Partial<CSSStyleDeclaration>>\n>;\n// eslint-disable-next-line no-use-before-define\ntype TabsStylesOption = Partial<Record<keyof TabsProps['$refs'], TabsStates>>;\n\nexport interface TabsProps extends BaseProps {\n  $options: {\n    styles: TabsStylesOption;\n  };\n  $refs: {\n    btn: HTMLElement[];\n    content: HTMLElement[];\n  };\n}\n\n/**\n * Tabs class.\n * @link https://ui.studiometa.dev/components/Tabs/\n */\nexport class Tabs<T extends BaseProps = BaseProps> extends Base<T & TabsProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Tabs',\n    refs: ['btn[]', 'content[]'],\n    emits: ['enable', 'disable'],\n    options: {\n      styles: {\n        type: Object,\n        default: (): TabsStylesOption => ({\n          content: {\n            closed: {\n              position: 'absolute',\n              opacity: '0',\n              pointerEvents: 'none',\n              visibility: 'hidden',\n            },\n          },\n        }),\n        merge: true,\n      },\n    },\n  };\n\n  items: TabItem[];\n\n  /**\n   * Initialize the component's behaviours.\n   * @returns {void}\n   */\n  mounted() {\n    this.items = this.$refs.btn.map((btn, index) => {\n      const id = `${this.$id}-${index}`;\n      const content = this.$refs.content[index];\n      btn.setAttribute('id', id);\n      content.setAttribute('aria-labelledby', id);\n\n      const item = { btn, content, isEnabled: index > 0 };\n      if (index > 0) {\n        this.disableItem(item);\n      } else {\n        this.enableItem(item);\n      }\n      return item;\n    });\n  }\n\n  /**\n   * Switch tab on button click.\n   */\n  onBtnClick({ index }: { index: number }) {\n    this.items.forEach((item, i) => {\n      if (i !== index) {\n        this.disableItem(item);\n      }\n    });\n\n    this.enableItem(this.items[index]);\n  }\n\n  /**\n   * Enable the given tab and its associated content.\n   */\n  async enableItem(item: TabItem): Promise<this> {\n    if (!item || item.isEnabled) {\n      return Promise.resolve(this);\n    }\n\n    item.isEnabled = true;\n    const { btn, content } = item;\n    const btnStyles = this.$options.styles.btn || {};\n    const contentStyles = this.$options.styles.content || {};\n\n    content.setAttribute('aria-hidden', 'false');\n    this.$emit('enable', item);\n\n    return Promise.all([\n      transition(\n        btn,\n        {\n          from: btnStyles.closed,\n          active: btnStyles.active,\n          to: btnStyles.open,\n        },\n        'keep',\n      ),\n      transition(\n        content,\n        {\n          from: contentStyles.closed,\n          active: contentStyles.active,\n          to: contentStyles.open,\n        },\n        'keep',\n      ),\n    ]).then(() => Promise.resolve(this));\n  }\n\n  /**\n   * Disable the given tab and its associated content.\n   */\n  async disableItem(item: TabItem): Promise<this> {\n    if (!item || !item.isEnabled) {\n      return Promise.resolve(this);\n    }\n\n    item.isEnabled = false;\n    const { btn, content } = item;\n    const btnStyles = this.$options.styles.btn || {};\n    const contentStyles = this.$options.styles.content || {};\n\n    content.setAttribute('aria-hidden', 'true');\n    this.$emit('disable', item);\n\n    return Promise.all([\n      transition(\n        btn,\n        {\n          from: btnStyles.open,\n          active: btnStyles.active,\n          to: btnStyles.closed,\n        },\n        'keep',\n      ),\n      transition(\n        content,\n        {\n          from: contentStyles.open,\n          active: contentStyles.active,\n          to: contentStyles.closed,\n        },\n        'keep',\n      ),\n    ]).then(() => Promise.resolve(this));\n  }\n}\n"],
   "mappings": "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",
   "names": []
 }

package/Transition/Transition.d.ts

@@ -1,11 +1,33 @@
 import { Base, BaseProps } from '@studiometa/js-toolkit';
 import type { BaseConfig } from '@studiometa/js-toolkit';
+export type TransitionConstructor<T extends Transition = Transition> = {
+    new (...args: any[]): T;
+    prototype: Transition;
+    EVENTS: {
+        TRANSITION_TOGGLE: 'transition-toggle';
+        TRANSITION_ENTER: 'transition-enter';
+        TRANSITION_ENTER_START: 'transition-enter-start';
+        TRANSITION_ENTER_END: 'transition-enter-end';
+        TRANSITION_LEAVE: 'transition-leave';
+        TRANSITION_LEAVE_START: 'transition-leave-start';
+        TRANSITION_LEAVE_END: 'transition-leave-end';
+    };
+    STATES: {
+        ENTERING: 'entering';
+        LEAVING: 'leaving';
+    };
+} & Pick<typeof Transition, keyof typeof Transition>;
 declare const Transition_base: import("@studiometa/js-toolkit").BaseDecorator<import("#private/index.js").TransitionInterface, Base<BaseProps>, import("#private/index.js").TransitionProps>;
 /**
  * Transition class.
- * @link https://ui.studiometa.dev/-/components/Transition/
+ * @link https://ui.studiometa.dev/components/Transition/
  */
 export declare class Transition<T extends BaseProps = BaseProps> extends Transition_base<T> {
+    /**
+     * Declare the `this.constructor` type
+     * @link https://github.com/microsoft/TypeScript/issues/3841#issuecomment-2381594311
+     */
+    ['constructor']: TransitionConstructor;
     /**
      * Config.
      */

package/Transition/Transition.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/Transition/Transition.ts"],
-  "sourcesContent": ["import { Base, BaseProps } from '@studiometa/js-toolkit';\nimport type { BaseConfig } from '@studiometa/js-toolkit';\nimport { withTransition } from '../decorators/index.js';\n\n/**\n * Transition class.\n * @link https://ui.studiometa.dev/-/components/Transition/\n */\nexport class Transition<T extends BaseProps = BaseProps> extends withTransition<Base>(Base)<T> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Transition',\n  };\n}\n"],
-  "mappings": "AAAA,SAAS,YAAuB;AAEhC,SAAS,sBAAsB;AAMxB,MAAM,mBAAoD,eAAqB,IAAI,EAAK;AAAA;AAAA;AAAA;AAAA,EAI7F,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,EACR;AACF;",
+  "sourcesContent": ["import { Base, BaseProps } from '@studiometa/js-toolkit';\nimport type { BaseConfig } from '@studiometa/js-toolkit';\nimport { withTransition } from '../decorators/index.js';\n\nexport type TransitionConstructor<T extends Transition = Transition> = {\n  new (...args: any[]): T;\n  prototype: Transition;\n  EVENTS: {\n    TRANSITION_TOGGLE: 'transition-toggle';\n    TRANSITION_ENTER: 'transition-enter';\n    TRANSITION_ENTER_START: 'transition-enter-start';\n    TRANSITION_ENTER_END: 'transition-enter-end';\n    TRANSITION_LEAVE: 'transition-leave';\n    TRANSITION_LEAVE_START: 'transition-leave-start';\n    TRANSITION_LEAVE_END: 'transition-leave-end';\n  };\n\n  STATES: {\n    ENTERING: 'entering';\n    LEAVING: 'leaving';\n  };\n} & Pick<typeof Transition, keyof typeof Transition>;\n\n/**\n * Transition class.\n * @link https://ui.studiometa.dev/components/Transition/\n */\nexport class Transition<T extends BaseProps = BaseProps> extends withTransition<Base>(Base)<T> {\n  /**\n   * Declare the `this.constructor` type\n   * @link https://github.com/microsoft/TypeScript/issues/3841#issuecomment-2381594311\n   */\n  declare ['constructor']: TransitionConstructor;\n\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Transition',\n  };\n}\n"],
+  "mappings": "AAAA,SAAS,YAAuB;AAEhC,SAAS,sBAAsB;AAyBxB,MAAM,mBAAoD,eAAqB,IAAI,EAAK;AAAA;AAAA;AAAA;AAAA,EAU7F,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,EACR;AACF;",
   "names": []
 }

package/decorators/withTransition.d.ts

@@ -21,6 +21,11 @@ export interface TransitionInterface extends BaseInterface {
      * Get the group targets.
      */
     get targets(): HTMLElement[];
+    /**
+     * Current state.
+     * @internal
+     */
+    state: null | 'entering' | 'leaving';
     /**
      * Trigger the enter transition.
      */
@@ -29,8 +34,14 @@ export interface TransitionInterface extends BaseInterface {
      * Trigger the leave transition.
      */
     leave(target?: HTMLElement | HTMLElement[]): Promise<void>;
+    /**
+     * Toggle the leave or enter transition.
+     * Defaults to the enter transition if no transition has been triggered yet.
+     */
+    toggle(target?: HTMLElement | HTMLElement[]): Promise<void>;
 }
 /**
  * Extend a class to add transition capabilities.
+ * @link https://ui.studiometa.dev/components/Transition/
  */
 export declare function withTransition<S extends Base>(BaseClass: typeof Base): BaseDecorator<TransitionInterface, S, TransitionProps>;

package/decorators/withTransition.js

@@ -2,11 +2,24 @@ import { getInstances } from "@studiometa/js-toolkit";
 import { nextFrame, removeClass, transition } from "@studiometa/js-toolkit/utils";
 function withTransition(BaseClass) {
   class Transition extends BaseClass {
+    /**
+     * Events.
+     */
+    static EVENTS = {
+      TRANSITION_TOGGLE: "transition-toggle",
+      TRANSITION_ENTER: "transition-enter",
+      TRANSITION_ENTER_START: "transition-enter-start",
+      TRANSITION_ENTER_END: "transition-enter-end",
+      TRANSITION_LEAVE: "transition-leave",
+      TRANSITION_LEAVE_START: "transition-leave-start",
+      TRANSITION_LEAVE_END: "transition-leave-end"
+    };
     /**
      * Config.
      */
     static config = {
       name: "Transition",
+      emits: Object.values(this.EVENTS),
       options: {
         enterFrom: String,
         enterActive: String,
@@ -19,6 +32,17 @@ function withTransition(BaseClass) {
         group: String
       }
     };
+    /**
+     * States.
+     */
+    static STATES = {
+      ENTERING: "entering",
+      LEAVING: "leaving"
+    };
+    /**
+     * Current state.
+     */
+    state = null;
     /**
      * Get the transition target.
      */
@@ -44,7 +68,11 @@ function withTransition(BaseClass) {
      * Trigger the enter transition.
      */
     async enter(target) {
+      const { STATES, EVENTS } = this.constructor;
       const { enterFrom, enterActive, enterTo, enterKeep, leaveTo } = this.$options;
+      this.state = STATES.ENTERING;
+      this.$emit(EVENTS.TRANSITION_ENTER);
+      this.$emit(EVENTS.TRANSITION_ENTER_START);
       removeClass(target ?? this.targets, leaveTo);
       await nextFrame();
       await transition(
@@ -56,12 +84,17 @@ function withTransition(BaseClass) {
         },
         enterKeep ? "keep" : void 0
       );
+      this.$emit(EVENTS.TRANSITION_ENTER_END);
     }
     /**
      * Trigger the leave transition.
      */
     async leave(target) {
+      const { STATES, EVENTS } = this.constructor;
       const { leaveFrom, leaveActive, leaveTo, leaveKeep, enterTo } = this.$options;
+      this.state = STATES.LEAVING;
+      this.$emit(EVENTS.TRANSITION_LEAVE);
+      this.$emit(EVENTS.TRANSITION_LEAVE_START);
       removeClass(target ?? this.targets, enterTo);
       await nextFrame();
       await transition(
@@ -73,6 +106,22 @@ function withTransition(BaseClass) {
         },
         leaveKeep ? "keep" : void 0
       );
+      this.$emit(EVENTS.TRANSITION_LEAVE_END);
+    }
+    /**
+     * Toggle the leave or enter transition.
+     * Defaults to the enter transition if no transition has been triggered yet.
+     */
+    async toggle(target) {
+      const { STATES, EVENTS } = this.constructor;
+      this.$emit(EVENTS.TRANSITION_TOGGLE);
+      switch (this.state) {
+        case STATES.ENTERING:
+          return this.leave(target);
+        case STATES.LEAVING:
+        default:
+          return this.enter(target);
+      }
     }
   }
   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 { 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;",
+  "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   * Current state.\n   * @internal\n   */\n  state: null | 'entering' | 'leaving';\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   * Toggle the leave or enter transition.\n   * Defaults to the enter transition if no transition has been triggered yet.\n   */\n  toggle(target?: HTMLElement | HTMLElement[]): Promise<void>;\n}\n\n/**\n * Extend a class to add transition capabilities.\n * @link https://ui.studiometa.dev/components/Transition/\n */\nexport function withTransition<S extends Base>(\n  BaseClass: typeof Base,\n): BaseDecorator<TransitionInterface, S, TransitionProps> {\n  type TransitionConstructor<T extends Transition = Transition> = {\n    new (...args: any[]): T;\n    prototype: Transition;\n  } & Pick<typeof Transition, keyof typeof Transition>;\n\n  /**\n   * Class.\n   */\n  class Transition<T extends BaseProps = BaseProps> extends BaseClass<T & TransitionProps> {\n    /**\n     * Declare the `this.constructor` type\n     * @link https://github.com/microsoft/TypeScript/issues/3841#issuecomment-2381594311\n     */\n    declare ['constructor']: TransitionConstructor;\n\n    /**\n     * Events.\n     */\n    static EVENTS = {\n      TRANSITION_TOGGLE: 'transition-toggle',\n      TRANSITION_ENTER: 'transition-enter',\n      TRANSITION_ENTER_START: 'transition-enter-start',\n      TRANSITION_ENTER_END: 'transition-enter-end',\n      TRANSITION_LEAVE: 'transition-leave',\n      TRANSITION_LEAVE_START: 'transition-leave-start',\n      TRANSITION_LEAVE_END: 'transition-leave-end',\n    } as const;\n\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      name: 'Transition',\n      emits: Object.values(this.EVENTS),\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     * States.\n     */\n    static STATES = {\n      ENTERING: 'entering',\n      LEAVING: 'leaving',\n    } as const;\n\n    /**\n     * Current state.\n     */\n    state: 'entering' | 'leaving' = null;\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 { STATES, EVENTS } = this.constructor;\n      const { enterFrom, enterActive, enterTo, enterKeep, leaveTo } = this.$options;\n      this.state = STATES.ENTERING;\n      this.$emit(EVENTS.TRANSITION_ENTER);\n      this.$emit(EVENTS.TRANSITION_ENTER_START);\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      this.$emit(EVENTS.TRANSITION_ENTER_END);\n    }\n\n    /**\n     * Trigger the leave transition.\n     */\n    async leave(target?: HTMLElement | HTMLElement[]): Promise<void> {\n      const { STATES, EVENTS } = this.constructor;\n      const { leaveFrom, leaveActive, leaveTo, leaveKeep, enterTo } = this.$options;\n      this.state = STATES.LEAVING;\n      this.$emit(EVENTS.TRANSITION_LEAVE);\n      this.$emit(EVENTS.TRANSITION_LEAVE_START);\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      this.$emit(EVENTS.TRANSITION_LEAVE_END);\n    }\n\n    /**\n     * Toggle the leave or enter transition.\n     * Defaults to the enter transition if no transition has been triggered yet.\n     */\n    async toggle(target?: HTMLElement | HTMLElement[]): Promise<void> {\n      const { STATES, EVENTS } = this.constructor;\n\n      this.$emit(EVENTS.TRANSITION_TOGGLE);\n\n      switch (this.state) {\n        case STATES.ENTERING:\n          return this.leave(target);\n        case STATES.LEAVING:\n        default:\n          return this.enter(target);\n      }\n    }\n  }\n\n  // @ts-ignore\n  return Transition;\n}\n"],
+  "mappings": "AAAA,SAAS,oBAAoB;AAC7B,SAAS,WAAW,aAAa,kBAAkB;AAwD5C,SAAS,eACd,WACwD;AAAA,EASxD,MAAM,mBAAoD,UAA+B;AAAA;AAAA;AAAA;AAAA,IAUvF,OAAO,SAAS;AAAA,MACd,mBAAmB;AAAA,MACnB,kBAAkB;AAAA,MAClB,wBAAwB;AAAA,MACxB,sBAAsB;AAAA,MACtB,kBAAkB;AAAA,MAClB,wBAAwB;AAAA,MACxB,sBAAsB;AAAA,IACxB;AAAA;AAAA;AAAA;AAAA,IAKA,OAAO,SAAqB;AAAA,MAC1B,MAAM;AAAA,MACN,OAAO,OAAO,OAAO,KAAK,MAAM;AAAA,MAChC,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,OAAO,SAAS;AAAA,MACd,UAAU;AAAA,MACV,SAAS;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKA,QAAgC;AAAA;AAAA;AAAA;AAAA,IAKhC,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,QAAQ,OAAO,IAAI,KAAK;AAChC,YAAM,EAAE,WAAW,aAAa,SAAS,WAAW,QAAQ,IAAI,KAAK;AACrE,WAAK,QAAQ,OAAO;AACpB,WAAK,MAAM,OAAO,gBAAgB;AAClC,WAAK,MAAM,OAAO,sBAAsB;AACxC,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;AACA,WAAK,MAAM,OAAO,oBAAoB;AAAA,IACxC;AAAA;AAAA;AAAA;AAAA,IAKA,MAAM,MAAM,QAAqD;AAC/D,YAAM,EAAE,QAAQ,OAAO,IAAI,KAAK;AAChC,YAAM,EAAE,WAAW,aAAa,SAAS,WAAW,QAAQ,IAAI,KAAK;AACrE,WAAK,QAAQ,OAAO;AACpB,WAAK,MAAM,OAAO,gBAAgB;AAClC,WAAK,MAAM,OAAO,sBAAsB;AACxC,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;AACA,WAAK,MAAM,OAAO,oBAAoB;AAAA,IACxC;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAM,OAAO,QAAqD;AAChE,YAAM,EAAE,QAAQ,OAAO,IAAI,KAAK;AAEhC,WAAK,MAAM,OAAO,iBAAiB;AAEnC,cAAQ,KAAK,OAAO;AAAA,QAClB,KAAK,OAAO;AACV,iBAAO,KAAK,MAAM,MAAM;AAAA,QAC1B,KAAK,OAAO;AAAA,QACZ;AACE,iBAAO,KAAK,MAAM,MAAM;AAAA,MAC5B;AAAA,IACF;AAAA,EACF;AAGA,SAAO;AACT;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/ui",
-  "version": "1.6.0",
+  "version": "1.8.0",
   "description": "A set of opiniated, unstyled and accessible components",
   "publishConfig": {
     "access": "public"
@@ -30,10 +30,10 @@
   "homepage": "https://github.com/studiometa/ui#readme",
   "dependencies": {
     "deepmerge": "^4.3.1",
-    "morphdom": "^2.7.5"
+    "morphdom": "^2.7.8"
   },
   "devDependencies": {
-    "@studiometa/js-toolkit": "3.4.1"
+    "@studiometa/js-toolkit": "3.4.3"
   },
   "peerDependencies": {
     "@studiometa/js-toolkit": "^3.4.0"