@studiometa/ui 1.5.1 → 1.7.0

package/Slider/Slider.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/Slider/Slider.ts"],
-  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type {\n  BaseProps,\n  BaseConfig,\n  DragServiceProps,\n  KeyServiceProps,\n} from '@studiometa/js-toolkit';\nimport { clamp, inertiaFinalValue, nextFrame } from '@studiometa/js-toolkit/utils';\nimport { SliderDrag } from './SliderDrag.js';\nimport { SliderItem } from './SliderItem.js';\n\nexport type SliderModes = 'left' | 'center' | 'right';\n\ntype SliderState = { x: Record<SliderModes, number> };\n\nexport interface SliderProps extends BaseProps {\n  $refs: {\n    wrapper: HTMLElement;\n  };\n  $children: {\n    SliderItem: SliderItem[];\n    SliderDrag: SliderDrag[];\n  };\n  $options: {\n    mode: SliderModes;\n    fitBounds: boolean;\n    contain: boolean;\n    sensitivity: number;\n    dropSensitivity: number;\n  };\n}\n\n/**\n * Slider class.\n * @link https://ui.studiometa.dev/-/components/Slider/\n * @todo a11y\n */\nexport class Slider<T extends BaseProps = BaseProps> extends Base<T & SliderProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Slider',\n    refs: ['wrapper'],\n    emits: ['goto', 'index'],\n    components: {\n      SliderItem,\n      SliderDrag,\n    },\n    options: {\n      mode: { type: String, default: 'left' },\n      fitBounds: Boolean,\n      contain: Boolean,\n      sensitivity: { type: Number, default: 1 },\n      dropSensitivity: { type: Number, default: 2 },\n    },\n  };\n\n  /**\n   * Distance on the x axis.\n   * @private\n   */\n  __distanceX = 0;\n\n  /**\n   * Initial x position.\n   * @private\n   */\n  __initialX = 0;\n\n  /**\n   * Index of the current active slide.\n   * @private\n   */\n  __currentIndex = 0;\n\n  /**\n   * Store all the states.\n   */\n  states: SliderState[] = [];\n\n  /**\n   * Origins for the different modes.\n   */\n  origins: Record<SliderModes, number> = {\n    left: 0,\n    center: 0,\n    right: 0,\n  };\n\n  /**\n   * Wether or not the wrapper is focused.\n   */\n  hasFocus = false;\n\n  /**\n   * Get the current index.\n   */\n  get currentIndex() {\n    return this.__currentIndex;\n  }\n\n  /**\n   * Set the current index and emit the `index` event.\n   */\n  set currentIndex(value: number) {\n    this.currentSliderItem.disactivate();\n    this.$emit('index', value);\n    this.__currentIndex = value;\n    this.currentSliderItem.activate();\n  }\n\n  /**\n   * Get the current state.\n   */\n  get currentState() {\n    return this.states[this.currentIndex];\n  }\n\n  /**\n   * Get the first state.\n   */\n  get firstState() {\n    return this.states[0];\n  }\n\n  /**\n   * Get the last state.\n   */\n  get lastState() {\n    return this.states.at(-1);\n  }\n\n  /**\n   * Get the minimal contain state value.\n   */\n  get containMinState(): number {\n    return this.getStateValueByMode(this.firstState.x, 'left');\n  }\n\n  /**\n   * Get the maximal contain state value.\n   */\n  get containMaxState(): number {\n    return this.getStateValueByMode(this.lastState.x, 'right');\n  }\n\n  /**\n   * Get the last index.\n   */\n  get indexMax(): number {\n    return this.$children.SliderItem.length - 1;\n  }\n\n  /**\n   * Get the current SliderItem\n   */\n  get currentSliderItem() {\n    return this.$children.SliderItem[this.currentIndex];\n  }\n\n  /**\n   * Get the states for each SliderItem.\n   */\n  getStates(): SliderState[] {\n    const { wrapper } = this.$refs;\n    const originRect = wrapper.getBoundingClientRect();\n\n    this.origins = {\n      left: originRect.left,\n      center: originRect.x + originRect.width / 2,\n      right: originRect.x + originRect.width,\n    };\n\n    const states: SliderState[] = this.$children.SliderItem.map((item) => ({\n      x: {\n        left: (item.rect.x - this.origins.left) * -1,\n        center: (item.rect.x + item.rect.width / 2 - this.origins.center) * -1,\n        right: (item.rect.x + item.rect.width - this.origins.right) * -1,\n      },\n    }));\n\n    if (this.$options.contain) {\n      const { mode } = this.$options;\n      // Find state where last child has passed the wrapper bound completely\n      if (mode === 'left') {\n        const lastChild = this.$children.SliderItem.at(-1);\n\n        const maxState = states.find((state) => {\n          const lastChildPosition =\n            lastChild.rect.x - this.origins.left + lastChild.rect.width + state.x.left;\n          const diffWithWrapperBound = originRect.width - lastChildPosition;\n          if (diffWithWrapperBound > 0) {\n            state.x.left = Math.min(state.x.left + diffWithWrapperBound, 0);\n            return true;\n          }\n\n          return false;\n        });\n\n        if (maxState) {\n          return states.map((state) => {\n            state.x.left = Math.max(state.x.left, maxState.x.left);\n            return state;\n          });\n        }\n      }\n\n      if (mode === 'right') {\n        const maxStateIndex = states.findIndex((state) => state.x.right <= 0);\n        const maxState = maxStateIndex < 0 ? states.at(-1) : states[maxStateIndex - 1];\n\n        return states.map((state) => {\n          state.x.right = maxStateIndex < 0 ? maxState.x.right : Math.min(state.x.right, 0);\n          return state;\n        });\n      }\n\n      if (mode === 'center') {\n        this.$warn('The `center` mode is not yet compatible with the `contain` mode.');\n      }\n    }\n\n    return states;\n  }\n\n  /**\n   * Get an origin by mode.\n   */\n  getOriginByMode(mode?: SliderModes) {\n    return this.origins[mode ?? this.$options.mode];\n  }\n\n  /**\n   * Get a state value according to the given mode.\n   */\n  getStateValueByMode(state: SliderState['x'], mode?: SliderModes) {\n    return state[mode ?? this.$options.mode];\n  }\n\n  /**\n   * Mounted hook.\n   */\n  mounted() {\n    this.states = this.getStates();\n    this.setAccessibilityAttributes();\n    this.goTo(this.currentIndex);\n  }\n\n  /**\n   * Resized hook.\n   */\n  resized() {\n    nextFrame(() => {\n      this.states = this.getStates();\n      nextFrame(() => {\n        this.goTo(this.currentIndex);\n      });\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', 'carousel');\n  }\n\n  /**\n   * Go to the next slide.\n   */\n  goNext() {\n    if (this.currentIndex + 1 > this.indexMax) {\n      return;\n    }\n\n    this.goTo(this.currentIndex + 1);\n  }\n\n  /**\n   * Go to the previous slide.\n   */\n  goPrev() {\n    if (this.currentIndex - 1 < 0) {\n      return;\n    }\n\n    this.goTo(this.currentIndex - 1);\n  }\n\n  /**\n   * Go to the given index.\n   */\n  goTo(index: number) {\n    if (index < 0 || index > this.indexMax) {\n      throw new Error('Index out of bound.');\n    }\n\n    const state = this.getStateValueByMode(this.states[index].x);\n\n    for (const item of this.$children.SliderItem) {\n      item.move(state);\n    }\n\n    this.currentIndex = index;\n    this.$emit('goto', index);\n  }\n\n  /**\n   * Listen to the Draggable `start` event.\n   */\n  onSliderDragStart() {\n    this.__initialX = this.currentSliderItem ? this.currentSliderItem.x : 0;\n    this.__distanceX = this.__initialX;\n  }\n\n  /**\n   * Listen to the Draggable `drag` event.\n   */\n  onSliderDragDrag({ args: [props] }: { args: [DragServiceProps] }) {\n    this.__distanceX = this.__initialX + props.distance.x * this.$options.sensitivity;\n\n    for (const item of this.$children.SliderItem) {\n      item.moveInstantly(this.__distanceX);\n    }\n  }\n\n  /**\n   * Listen to the Draggable `drop` event and find the new active slide.\n   */\n  onSliderDragDrop({ args: [props] }: { args: [DragServiceProps] }) {\n    let finalX = clamp(\n      inertiaFinalValue(this.__distanceX, props.delta.x * this.$options.dropSensitivity),\n      this.getStateValueByMode(this.firstState.x),\n      this.getStateValueByMode(this.lastState.x),\n    );\n\n    const absoluteDifferencesBetweenDistanceAndState = this.states.map((state) =>\n      Math.abs(finalX - this.getStateValueByMode(state.x)),\n    );\n    const minimumDifference = Math.min(...absoluteDifferencesBetweenDistanceAndState);\n    const closestIndex = absoluteDifferencesBetweenDistanceAndState.indexOf(minimumDifference);\n\n    if (this.$options.fitBounds) {\n      this.goTo(closestIndex);\n    } else {\n      if (this.$options.contain) {\n        finalX = Math.min(this.containMinState, finalX);\n        finalX = Math.max(this.containMaxState, finalX);\n      }\n      for (const item of this.$children.SliderItem) {\n        item.move(finalX);\n      }\n      this.currentIndex = closestIndex;\n    }\n  }\n\n  /**\n   * Enable focus.\n   */\n  onWrapperFocus() {\n    this.hasFocus = true;\n  }\n\n  /**\n   * Disable focus.\n   */\n  onWrapperBlur() {\n    this.hasFocus = false;\n  }\n\n  /**\n   * Go prev or next when focus is on the wrapper and pressing arrow keys.\n   */\n  keyed({ LEFT, RIGHT, isDown }: KeyServiceProps) {\n    if (this.hasFocus && isDown) {\n      if (LEFT) {\n        this.goPrev();\n      } else if (RIGHT) {\n        this.goNext();\n      }\n    }\n  }\n}\n"],
+  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type {\n  BaseProps,\n  BaseConfig,\n  DragServiceProps,\n  KeyServiceProps,\n} from '@studiometa/js-toolkit';\nimport { clamp, inertiaFinalValue, nextFrame } from '@studiometa/js-toolkit/utils';\nimport { SliderDrag } from './SliderDrag.js';\nimport { SliderItem } from './SliderItem.js';\n\nexport type SliderModes = 'left' | 'center' | 'right';\n\ntype SliderState = { x: Record<SliderModes, number> };\n\nexport interface SliderProps extends BaseProps {\n  $refs: {\n    wrapper: HTMLElement;\n  };\n  $children: {\n    SliderItem: SliderItem[];\n    SliderDrag: SliderDrag[];\n  };\n  $options: {\n    mode: SliderModes;\n    fitBounds: boolean;\n    contain: boolean;\n    sensitivity: number;\n    dropSensitivity: number;\n  };\n}\n\n/**\n * Slider class.\n * @link https://ui.studiometa.dev/components/Slider/\n * @todo a11y\n */\nexport class Slider<T extends BaseProps = BaseProps> extends Base<T & SliderProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Slider',\n    refs: ['wrapper'],\n    emits: ['goto', 'index'],\n    components: {\n      SliderItem,\n      SliderDrag,\n    },\n    options: {\n      mode: { type: String, default: 'left' },\n      fitBounds: Boolean,\n      contain: Boolean,\n      sensitivity: { type: Number, default: 1 },\n      dropSensitivity: { type: Number, default: 2 },\n    },\n  };\n\n  /**\n   * Distance on the x axis.\n   * @private\n   */\n  __distanceX = 0;\n\n  /**\n   * Initial x position.\n   * @private\n   */\n  __initialX = 0;\n\n  /**\n   * Index of the current active slide.\n   * @private\n   */\n  __currentIndex = 0;\n\n  /**\n   * Store all the states.\n   */\n  states: SliderState[] = [];\n\n  /**\n   * Origins for the different modes.\n   */\n  origins: Record<SliderModes, number> = {\n    left: 0,\n    center: 0,\n    right: 0,\n  };\n\n  /**\n   * Wether or not the wrapper is focused.\n   */\n  hasFocus = false;\n\n  /**\n   * Get the current index.\n   */\n  get currentIndex() {\n    return this.__currentIndex;\n  }\n\n  /**\n   * Set the current index and emit the `index` event.\n   */\n  set currentIndex(value: number) {\n    this.currentSliderItem.disactivate();\n    this.$emit('index', value);\n    this.__currentIndex = value;\n    this.currentSliderItem.activate();\n  }\n\n  /**\n   * Get the current state.\n   */\n  get currentState() {\n    return this.states[this.currentIndex];\n  }\n\n  /**\n   * Get the first state.\n   */\n  get firstState() {\n    return this.states[0];\n  }\n\n  /**\n   * Get the last state.\n   */\n  get lastState() {\n    return this.states.at(-1);\n  }\n\n  /**\n   * Get the minimal contain state value.\n   */\n  get containMinState(): number {\n    return this.getStateValueByMode(this.firstState.x, 'left');\n  }\n\n  /**\n   * Get the maximal contain state value.\n   */\n  get containMaxState(): number {\n    return this.getStateValueByMode(this.lastState.x, 'right');\n  }\n\n  /**\n   * Get the last index.\n   */\n  get indexMax(): number {\n    return this.$children.SliderItem.length - 1;\n  }\n\n  /**\n   * Get the current SliderItem\n   */\n  get currentSliderItem() {\n    return this.$children.SliderItem[this.currentIndex];\n  }\n\n  /**\n   * Get the states for each SliderItem.\n   */\n  getStates(): SliderState[] {\n    const { wrapper } = this.$refs;\n    const originRect = wrapper.getBoundingClientRect();\n\n    this.origins = {\n      left: originRect.left,\n      center: originRect.x + originRect.width / 2,\n      right: originRect.x + originRect.width,\n    };\n\n    const states: SliderState[] = this.$children.SliderItem.map((item) => ({\n      x: {\n        left: (item.rect.x - this.origins.left) * -1,\n        center: (item.rect.x + item.rect.width / 2 - this.origins.center) * -1,\n        right: (item.rect.x + item.rect.width - this.origins.right) * -1,\n      },\n    }));\n\n    if (this.$options.contain) {\n      const { mode } = this.$options;\n      // Find state where last child has passed the wrapper bound completely\n      if (mode === 'left') {\n        const lastChild = this.$children.SliderItem.at(-1);\n\n        const maxState = states.find((state) => {\n          const lastChildPosition =\n            lastChild.rect.x - this.origins.left + lastChild.rect.width + state.x.left;\n          const diffWithWrapperBound = originRect.width - lastChildPosition;\n          if (diffWithWrapperBound > 0) {\n            state.x.left = Math.min(state.x.left + diffWithWrapperBound, 0);\n            return true;\n          }\n\n          return false;\n        });\n\n        if (maxState) {\n          return states.map((state) => {\n            state.x.left = Math.max(state.x.left, maxState.x.left);\n            return state;\n          });\n        }\n      }\n\n      if (mode === 'right') {\n        const maxStateIndex = states.findIndex((state) => state.x.right <= 0);\n        const maxState = maxStateIndex < 0 ? states.at(-1) : states[maxStateIndex - 1];\n\n        return states.map((state) => {\n          state.x.right = maxStateIndex < 0 ? maxState.x.right : Math.min(state.x.right, 0);\n          return state;\n        });\n      }\n\n      if (mode === 'center') {\n        this.$warn('The `center` mode is not yet compatible with the `contain` mode.');\n      }\n    }\n\n    return states;\n  }\n\n  /**\n   * Get an origin by mode.\n   */\n  getOriginByMode(mode?: SliderModes) {\n    return this.origins[mode ?? this.$options.mode];\n  }\n\n  /**\n   * Get a state value according to the given mode.\n   */\n  getStateValueByMode(state: SliderState['x'], mode?: SliderModes) {\n    return state[mode ?? this.$options.mode];\n  }\n\n  /**\n   * Mounted hook.\n   */\n  mounted() {\n    this.states = this.getStates();\n    this.setAccessibilityAttributes();\n    this.goTo(this.currentIndex);\n  }\n\n  /**\n   * Resized hook.\n   */\n  resized() {\n    nextFrame(() => {\n      this.states = this.getStates();\n      nextFrame(() => {\n        this.goTo(this.currentIndex);\n      });\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', 'carousel');\n  }\n\n  /**\n   * Go to the next slide.\n   */\n  goNext() {\n    if (this.currentIndex + 1 > this.indexMax) {\n      return;\n    }\n\n    this.goTo(this.currentIndex + 1);\n  }\n\n  /**\n   * Go to the previous slide.\n   */\n  goPrev() {\n    if (this.currentIndex - 1 < 0) {\n      return;\n    }\n\n    this.goTo(this.currentIndex - 1);\n  }\n\n  /**\n   * Go to the given index.\n   */\n  goTo(index: number) {\n    if (index < 0 || index > this.indexMax) {\n      throw new Error('Index out of bound.');\n    }\n\n    const state = this.getStateValueByMode(this.states[index].x);\n\n    for (const item of this.$children.SliderItem) {\n      item.move(state);\n    }\n\n    this.currentIndex = index;\n    this.$emit('goto', index);\n  }\n\n  /**\n   * Listen to the Draggable `start` event.\n   */\n  onSliderDragStart() {\n    this.__initialX = this.currentSliderItem ? this.currentSliderItem.x : 0;\n    this.__distanceX = this.__initialX;\n  }\n\n  /**\n   * Listen to the Draggable `drag` event.\n   */\n  onSliderDragDrag({ args: [props] }: { args: [DragServiceProps] }) {\n    this.__distanceX = this.__initialX + props.distance.x * this.$options.sensitivity;\n\n    for (const item of this.$children.SliderItem) {\n      item.moveInstantly(this.__distanceX);\n    }\n  }\n\n  /**\n   * Listen to the Draggable `drop` event and find the new active slide.\n   */\n  onSliderDragDrop({ args: [props] }: { args: [DragServiceProps] }) {\n    let finalX = clamp(\n      inertiaFinalValue(this.__distanceX, props.delta.x * this.$options.dropSensitivity),\n      this.getStateValueByMode(this.firstState.x),\n      this.getStateValueByMode(this.lastState.x),\n    );\n\n    const absoluteDifferencesBetweenDistanceAndState = this.states.map((state) =>\n      Math.abs(finalX - this.getStateValueByMode(state.x)),\n    );\n    const minimumDifference = Math.min(...absoluteDifferencesBetweenDistanceAndState);\n    const closestIndex = absoluteDifferencesBetweenDistanceAndState.indexOf(minimumDifference);\n\n    if (this.$options.fitBounds) {\n      this.goTo(closestIndex);\n    } else {\n      if (this.$options.contain) {\n        finalX = Math.min(this.containMinState, finalX);\n        finalX = Math.max(this.containMaxState, finalX);\n      }\n      for (const item of this.$children.SliderItem) {\n        item.move(finalX);\n      }\n      this.currentIndex = closestIndex;\n    }\n  }\n\n  /**\n   * Enable focus.\n   */\n  onWrapperFocus() {\n    this.hasFocus = true;\n  }\n\n  /**\n   * Disable focus.\n   */\n  onWrapperBlur() {\n    this.hasFocus = false;\n  }\n\n  /**\n   * Go prev or next when focus is on the wrapper and pressing arrow keys.\n   */\n  keyed({ LEFT, RIGHT, isDown }: KeyServiceProps) {\n    if (this.hasFocus && isDown) {\n      if (LEFT) {\n        this.goPrev();\n      } else if (RIGHT) {\n        this.goNext();\n      }\n    }\n  }\n}\n"],
   "mappings": "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",
   "names": []
 }

package/Sticky/Sticky.d.ts

@@ -16,7 +16,7 @@ export interface StickyProps extends BaseProps {
 }
 /**
  * Sticky class.
- * @link https://ui.studiometa.dev/-/components/Sticky/
+ * @link https://ui.studiometa.dev/components/Sticky/
  */
 export declare class Sticky<T extends BaseProps = BaseProps> extends Base<T & StickyProps> {
     /**

package/Sticky/Sticky.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/Sticky/Sticky.ts"],
-  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { Sentinel } from '../Sentinel/index.js';\n\nexport interface StickyProps extends BaseProps {\n  $refs: {\n    inner: HTMLElement;\n  };\n  $options: {\n    zIndex: number;\n    hideWhenUp: boolean;\n    hideWhenDown: boolean;\n  };\n  $children: {\n    Sentinel: Sentinel[];\n  };\n}\n\n/**\n * Sticky class.\n * @link https://ui.studiometa.dev/-/components/Sticky/\n */\nexport class Sticky<T extends BaseProps = BaseProps> extends Base<T & StickyProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Sticky',\n    refs: ['inner'],\n    components: {\n      Sentinel,\n    },\n    options: {\n      zIndex: {\n        type: Number,\n        default: 100,\n      },\n      hideWhenUp: Boolean,\n      hideWhenDown: Boolean,\n    },\n  };\n\n  /**\n   * Holder for all instances.\n   */\n  // eslint-disable-next-line no-use-before-define\n  static instances: Set<Sticky> = new Set();\n\n  /**\n   * Is the component sticky?\n   */\n  isSticky = false;\n\n  /**\n   * Is the component visible?\n   */\n  isVisible = true;\n\n  /**\n   * Set the Y value.\n   */\n  set y(value: number) {\n    this.$refs.inner.style.transform = `translateY(${value}px) translateZ(0px)`;\n  }\n\n  /**\n   * Get instances as array.\n   */\n  get instances(): Sticky[] {\n    return Array.from(Sticky.instances);\n  }\n\n  /**\n   * Get the sentinel instance.\n   */\n  get sentinel(): Sentinel {\n    return this.$children.Sentinel[0];\n  }\n\n  /**\n   * Mounted hook.\n   */\n  mounted() {\n    Sticky.instances.add(this);\n    this.setSentinelSize();\n  }\n\n  /**\n   * Resized hook.\n   */\n  resized() {\n    this.setSentinelSize();\n  }\n\n  /**\n   * Destroyed hook.\n   */\n  destroyed() {\n    Sticky.instances.delete(this);\n  }\n\n  /**\n   * Scrolled hook.\n   */\n  scrolled(props) {\n    if (!this.isSticky || props.y === props.last.y) {\n      return;\n    }\n\n    if (\n      (props.direction.y === 'DOWN' && this.$options.hideWhenDown) ||\n      (props.direction.y === 'UP' && this.$options.hideWhenUp)\n    ) {\n      this.hide();\n    } else {\n      this.show();\n    }\n  }\n\n  /**\n   * Listen to the sentinel's `intersected` event to set the `isSticky` value.\n   * @param   {IntersectionObserverEntry[]} entries\n   * @returns {void}\n   */\n  onSentinelIntersected({ args: [[entry]] }: { args: [IntersectionObserverEntry[]] }) {\n    this.isSticky = entry.isIntersecting && entry.boundingClientRect.y < 0;\n    this.setPosition();\n  }\n\n  /**\n   * Hide the sticky component when another one is sticky.\n   */\n  hide() {\n    if (!this.isVisible) {\n      return;\n    }\n\n    this.isVisible = false;\n    this.$el.classList.add('pointer-events-none');\n\n    this.instances.forEach((instance, index) => instance.setPosition(index));\n  }\n\n  /**\n   * Show the sticky component when the other one is not sticky anymore.\n   */\n  show() {\n    if (this.isVisible) {\n      return;\n    }\n\n    this.isVisible = true;\n    this.$el.classList.remove('pointer-events-none');\n    this.instances.forEach((instance, index) => instance.setPosition(index));\n  }\n\n  /**\n   * Set the sentinel height based on the previous instances.\n   */\n  setSentinelSize() {\n    const { instances } = this;\n    const index = instances.indexOf(this);\n    const height = instances\n      .slice(0, index)\n      .filter(\n        // Test each instance sticky context against the current element\n        (instance) => this.closestRelativeElement(instance.$el).contains(this.$el),\n      )\n      .reduce((acc, instance) => acc + instance.$el.offsetHeight, 0);\n\n    this.sentinel.$el.style.height = `${height + 1}px`;\n    this.$el.style.top = `${height}px`;\n    this.$el.style.zIndex = String(this.$options.zIndex - index);\n  }\n\n  /**\n   * Set the component's position.\n   * @param   {number} [index] The instance index in all the pages' instances.\n   * @returns {void}\n   */\n  setPosition(index?: number) {\n    if (!this.isSticky) {\n      this.y = 0;\n      return;\n    }\n\n    const { instances } = this;\n\n    // eslint-disable-next-line no-param-reassign\n    index = index ?? instances.indexOf(this);\n\n    this.y = instances\n      .slice(0, index)\n      .filter((instance) => instance.isSticky && !instance.isVisible)\n      .reduce<number>(\n        (y: number, instance) => y - instance.$refs.inner.offsetHeight,\n        this.isVisible ? 0 : this.$refs.inner.offsetHeight * -1,\n      ) as number;\n  }\n\n  /**\n   * Find the first parent which has a relative position.\n   */\n  closestRelativeElement(element: HTMLElement) {\n    let parent = element.parentElement;\n\n    while (getComputedStyle(parent).position !== 'relative' && parent.parentElement) {\n      parent = parent.parentElement;\n    }\n\n    return parent;\n  }\n}\n"],
+  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { Sentinel } from '../Sentinel/index.js';\n\nexport interface StickyProps extends BaseProps {\n  $refs: {\n    inner: HTMLElement;\n  };\n  $options: {\n    zIndex: number;\n    hideWhenUp: boolean;\n    hideWhenDown: boolean;\n  };\n  $children: {\n    Sentinel: Sentinel[];\n  };\n}\n\n/**\n * Sticky class.\n * @link https://ui.studiometa.dev/components/Sticky/\n */\nexport class Sticky<T extends BaseProps = BaseProps> extends Base<T & StickyProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Sticky',\n    refs: ['inner'],\n    components: {\n      Sentinel,\n    },\n    options: {\n      zIndex: {\n        type: Number,\n        default: 100,\n      },\n      hideWhenUp: Boolean,\n      hideWhenDown: Boolean,\n    },\n  };\n\n  /**\n   * Holder for all instances.\n   */\n  // eslint-disable-next-line no-use-before-define\n  static instances: Set<Sticky> = new Set();\n\n  /**\n   * Is the component sticky?\n   */\n  isSticky = false;\n\n  /**\n   * Is the component visible?\n   */\n  isVisible = true;\n\n  /**\n   * Set the Y value.\n   */\n  set y(value: number) {\n    this.$refs.inner.style.transform = `translateY(${value}px) translateZ(0px)`;\n  }\n\n  /**\n   * Get instances as array.\n   */\n  get instances(): Sticky[] {\n    return Array.from(Sticky.instances);\n  }\n\n  /**\n   * Get the sentinel instance.\n   */\n  get sentinel(): Sentinel {\n    return this.$children.Sentinel[0];\n  }\n\n  /**\n   * Mounted hook.\n   */\n  mounted() {\n    Sticky.instances.add(this);\n    this.setSentinelSize();\n  }\n\n  /**\n   * Resized hook.\n   */\n  resized() {\n    this.setSentinelSize();\n  }\n\n  /**\n   * Destroyed hook.\n   */\n  destroyed() {\n    Sticky.instances.delete(this);\n  }\n\n  /**\n   * Scrolled hook.\n   */\n  scrolled(props) {\n    if (!this.isSticky || props.y === props.last.y) {\n      return;\n    }\n\n    if (\n      (props.direction.y === 'DOWN' && this.$options.hideWhenDown) ||\n      (props.direction.y === 'UP' && this.$options.hideWhenUp)\n    ) {\n      this.hide();\n    } else {\n      this.show();\n    }\n  }\n\n  /**\n   * Listen to the sentinel's `intersected` event to set the `isSticky` value.\n   * @param   {IntersectionObserverEntry[]} entries\n   * @returns {void}\n   */\n  onSentinelIntersected({ args: [[entry]] }: { args: [IntersectionObserverEntry[]] }) {\n    this.isSticky = entry.isIntersecting && entry.boundingClientRect.y < 0;\n    this.setPosition();\n  }\n\n  /**\n   * Hide the sticky component when another one is sticky.\n   */\n  hide() {\n    if (!this.isVisible) {\n      return;\n    }\n\n    this.isVisible = false;\n    this.$el.classList.add('pointer-events-none');\n\n    this.instances.forEach((instance, index) => instance.setPosition(index));\n  }\n\n  /**\n   * Show the sticky component when the other one is not sticky anymore.\n   */\n  show() {\n    if (this.isVisible) {\n      return;\n    }\n\n    this.isVisible = true;\n    this.$el.classList.remove('pointer-events-none');\n    this.instances.forEach((instance, index) => instance.setPosition(index));\n  }\n\n  /**\n   * Set the sentinel height based on the previous instances.\n   */\n  setSentinelSize() {\n    const { instances } = this;\n    const index = instances.indexOf(this);\n    const height = instances\n      .slice(0, index)\n      .filter(\n        // Test each instance sticky context against the current element\n        (instance) => this.closestRelativeElement(instance.$el).contains(this.$el),\n      )\n      .reduce((acc, instance) => acc + instance.$el.offsetHeight, 0);\n\n    this.sentinel.$el.style.height = `${height + 1}px`;\n    this.$el.style.top = `${height}px`;\n    this.$el.style.zIndex = String(this.$options.zIndex - index);\n  }\n\n  /**\n   * Set the component's position.\n   * @param   {number} [index] The instance index in all the pages' instances.\n   * @returns {void}\n   */\n  setPosition(index?: number) {\n    if (!this.isSticky) {\n      this.y = 0;\n      return;\n    }\n\n    const { instances } = this;\n\n    // eslint-disable-next-line no-param-reassign\n    index = index ?? instances.indexOf(this);\n\n    this.y = instances\n      .slice(0, index)\n      .filter((instance) => instance.isSticky && !instance.isVisible)\n      .reduce<number>(\n        (y: number, instance) => y - instance.$refs.inner.offsetHeight,\n        this.isVisible ? 0 : this.$refs.inner.offsetHeight * -1,\n      ) as number;\n  }\n\n  /**\n   * Find the first parent which has a relative position.\n   */\n  closestRelativeElement(element: HTMLElement) {\n    let parent = element.parentElement;\n\n    while (getComputedStyle(parent).position !== 'relative' && parent.parentElement) {\n      parent = parent.parentElement;\n    }\n\n    return parent;\n  }\n}\n"],
   "mappings": "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",
   "names": []
 }

package/Tabs/Tabs.d.ts

@@ -18,7 +18,7 @@ export interface TabsProps extends BaseProps {
 }
 /**
  * Tabs class.
- * @link https://ui.studiometa.dev/-/components/Tabs/
+ * @link https://ui.studiometa.dev/components/Tabs/
  */
 export declare class Tabs<T extends BaseProps = BaseProps> extends Base<T & TabsProps> {
     /**

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": "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",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/ui",
-  "version": "1.5.1",
+  "version": "1.7.0",
   "description": "A set of opiniated, unstyled and accessible components",
   "publishConfig": {
     "access": "public"
@@ -33,7 +33,7 @@
     "morphdom": "^2.7.5"
   },
   "devDependencies": {
-    "@studiometa/js-toolkit": "3.4.0"
+    "@studiometa/js-toolkit": "3.4.1"
   },
   "peerDependencies": {
     "@studiometa/js-toolkit": "^3.4.0"