Merge pull request #30 from Applelo/dev

Version 0.9.1

docs/demo/dropdown.md

@@ -7,7 +7,8 @@
 
   onMounted(() => {
     const dropdown = new Dropdown('#dropdown', {
-      openOn: 'hover'
+      openOn: 'hover',
+      setWidth: true
     })
     const dropdownMenu = new Dropdown('#dropdown-menu')
   })

docs/guide/collapse.md

@@ -96,7 +96,7 @@ You can access data from the component like this:
 import { Collapse } from 'compotes'
 
 const collapse = new Collapse('#my-collapse')
-console.log(collapse.expanded)// [!code focus]
+console.log(collapse.isExpanded)// [!code focus]
 ```
 
 - `options` (options object): Get options used to init the component

docs/guide/dropdown.md

@@ -30,14 +30,14 @@ If you are using a `ul` as a dropdown, it will use, by default, the `menu` mode
 
 ```html
 <!-- Menu dropdown -->
-<div class="c-dropdown">
+<nav class="c-dropdown" aria-label="My superb dropdown menu">
   <a class="c-dropdown-trigger" aria-controls="my-dropdown">Item 1 - Dropdown Menu</a>
   <ul class="c-dropdown-container" id="my-dropdown">
     <li><a href="#">Item 1</a></li>
     <li><a href="#">Item 2</a></li>
     <li><a href="#">Item 3</a></li>
   </ul>
-</div>
+</nav>
 ```
 
 ## Accessibility

docs/guide/marquee.md

@@ -9,7 +9,7 @@ The marquee component allows to create an animated text copying the old [marquee
 ```js
 import { Marquee } from 'compotes'
 
-const marquee = new Drag('.c-marquee')
+const marquee = new Marquee('.c-marquee')
 ```
 
 The structure consists to a list of element. All animation are CSS based.
@@ -38,15 +38,16 @@ You are not limited to text. You can also add any kind of valid HTML like image.
 You can change some options from the component.
 
 ```js
-import { Drag } from 'compotes'
+import { Marquee } from 'compotes'
 
-const drag = new Drag('.c-drag', {
+const marquee = new Marquee('.c-marquee', {
   init: true, // [!code focus:6]
   initEvents: true,
   fill: false,
-  direction: 'left',
+  direction: 'right',
   behavior: 'scroll',
-  duration: 1
+  duration: 1,
+  mutationObserver: true
 })
 ```
 
@@ -56,6 +57,7 @@ const drag = new Drag('.c-drag', {
 - `direction` ('left' | 'right' | 'up' | 'down'): Direction of marquee animation
 - `behavior` ('scroll' | 'alternate'): The behavior the marquee animation
 - `duration` (number or string): The duration of the marquee animation
+- `mutationObserver` (boolean): Use MutationObserver to update component on changes
 
 ## Methods
 
@@ -78,6 +80,20 @@ marquee.init()// [!code focus]
 - `play()`: Play the marquee component
 - `pause()`: Pause the marquee component
 
+## Data
+
+You can access data from the component like this:
+
+```js
+import { Marquee } from 'compotes'
+
+const marquee = new Marquee('#my-marquee')
+console.log(marquee.isPaused)// [!code focus]
+```
+
+- `options` (options object): Get options used to init the component
+- `isPaused` (boolean): If the marquee is paused or not
+
 ## Events
 
 You can listen to emitted events directly on the marquee element like this:
@@ -89,7 +105,7 @@ marqueeEl.addEventListener('c.marquee.init', (e) => { // [!code focus:3]
 ```
 
 - `c.marquee.init`: On component init
-- `c.marquee.play`: On component drag play
-- `c.marquee.pause`: On component drag pause
+- `c.marquee.play`: On component marquee play
+- `c.marquee.pause`: On component marquee pause
 - `c.marquee.loop`: On component marquee loop
 - `c.marquee.destroy`: On component destroy

package.json

@@ -1,9 +1,9 @@
 {
   "name": "@compotes/root",
   "type": "module",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "private": "true",
-  "packageManager": "pnpm@8.15.1",
+  "packageManager": "pnpm@8.15.2",
   "description": "Components library focused on accessibility/customization",
   "author": "Applelo",
   "license": "MIT",
@@ -47,10 +47,10 @@
     "eslint": "^8.56.0",
     "playwright": "^1.41.2",
     "typescript": "^5.3.3",
-    "vite": "^5.0.12",
+    "vite": "^5.1.1",
     "vitepress": "1.0.0-rc.42",
     "vitest": "^1.2.2",
-    "vue": "^3.4.15",
+    "vue": "^3.4.19",
     "vue-tsc": "^1.8.27"
   }
 }

packages/core/package.json

@@ -1,7 +1,7 @@
 {
   "name": "compotes",
   "type": "module",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "packageManager": "pnpm@8.15.1",
   "description": "Components library focused on accessibility/customization",
   "author": "Applelo",
@@ -66,11 +66,11 @@
     "tabbable": "^6.2.0"
   },
   "devDependencies": {
-    "@types/node": "^20.11.16",
+    "@types/node": "^20.11.17",
     "fast-glob": "^3.3.2",
     "lightningcss": "^1.23.0",
     "typescript": "^5.3.3",
-    "vite": "^5.0.12",
+    "vite": "^5.1.1",
     "vite-plugin-dts": "^3.7.2"
   }
 }

packages/core/src/components/_parent.ts

@@ -26,7 +26,7 @@ export interface ParentOptions {
 
 export interface ParentEvent {
   id: string
-  event: string
+  event: keyof HTMLElementEventMap
   function: any
   el: Element | Window
 }
@@ -135,6 +135,7 @@ export default abstract class Parent {
    */
   public destroy() {
     this.emitEvent('destroy')
+    this.el.classList.remove(`c-${this.name}--a11y`)
     this.destroyEvents()
   }
 

packages/core/src/components/collapse.ts

@@ -21,6 +21,8 @@ export default class Collapse extends Parent {
   private expanded = false
   private collapsing = false
   private timeout: number | undefined = undefined
+  private showClass = 'c-collapse--show'
+  private collapsingClass = 'c-collapse--collapsing'
 
   constructor(el: HTMLElement | string, options: CollapseOptions = {}) {
     super(el, options)
@@ -30,7 +32,7 @@ export default class Collapse extends Parent {
 
   public init() {
     this.name = 'collapse'
-    this.expanded = this.el.classList.contains('c-collapse--show')
+    this.expanded = this.el.classList.contains(this.showClass)
     this.update()
     super.init()
   }
@@ -84,15 +86,15 @@ export default class Collapse extends Parent {
     this.expanded = true
     if (this.hasTransition) {
       this.collapsing = true
-      this.el.classList.add('c-collapse--collapsing')
+      this.el.classList.add(this.collapsingClass)
       const height = this.el.scrollHeight
       this.el.style.height = `${height}px`
       this.onCollapse()
     }
     else {
       this.emitEvent('shown')
     }
-    this.el.classList.add('c-collapse--show')
+    this.el.classList.add(this.showClass)
     this.update()
   }
 
@@ -107,14 +109,14 @@ export default class Collapse extends Parent {
       // eslint-disable-next-line no-unused-expressions
       this.el.offsetHeight // reflow
       this.collapsing = true
-      this.el.classList.add('c-collapse--collapsing')
+      this.el.classList.add(this.collapsingClass)
       this.el.style.height = '0px'
       this.onCollapse()
     }
     else {
       this.emitEvent('hidden')
     }
-    this.el.classList.remove('c-collapse--show')
+    this.el.classList.remove(this.showClass)
 
     this.update()
   }
@@ -124,7 +126,7 @@ export default class Collapse extends Parent {
     this.emitEvent(this.expanded ? 'show' : 'hide')
 
     this.timeout = window.setTimeout(() => {
-      this.el.classList.remove('c-collapse--collapsing')
+      this.el.classList.remove(this.collapsingClass)
       this.collapsing = false
       this.el.style.height = ''
 
@@ -149,4 +151,12 @@ export default class Collapse extends Parent {
   private get hasTransition() {
     return getTransitionDuration(this.el) !== 0
   }
+
+  public destroy(): void {
+    this.el.classList.remove(this.collapsingClass)
+    this.triggers.forEach((trigger) => {
+      trigger.removeAttribute('aria-expanded')
+    })
+    super.destroy()
+  }
 }

packages/core/src/components/drag.ts

@@ -46,7 +46,7 @@ export default class Drag extends Parent {
   public initEvents() {
     this.destroyEvents()
 
-    const mouseEvents = ['mouseleave', 'mouseup']
+    const mouseEvents: (keyof HTMLElementEventMap)[] = ['mouseleave', 'mouseup']
     mouseEvents.forEach((event) => {
       this.registerEvent({
         id: 'handleDragEnd',
@@ -139,6 +139,8 @@ export default class Drag extends Parent {
 
   public destroy() {
     this.resizeObserver?.disconnect()
+    this.el.classList.remove(this.draggingClass)
+    this.el.classList.remove(this.draggableClass)
     super.destroy()
   }
 }

packages/core/src/components/drilldown.ts

@@ -42,6 +42,9 @@ export default class Drilldown extends Parent {
   private resizeObserver?: ResizeObserver
   private mutationObserver?: MutationObserver
 
+  private delayCssVar = '--c-drilldown-delay'
+  private hiddenData = 'data-c-hidden'
+
   constructor(el: HTMLElement | string, options: DrilldownOptions = {}) {
     super(el, options)
     if (this.isInitializable)
@@ -207,7 +210,7 @@ export default class Drilldown extends Parent {
 
     this.wrapper.style.transform = `translateX(-${this.level * 100}%)`
     const delay = getTransitionDuration(this.wrapper)
-    this.wrapper.style.setProperty('--c-drilldown-delay', `${delay}ms`)
+    this.wrapper.style.setProperty(this.delayCssVar, `${delay}ms`)
     this.disableFocusElements()
 
     if (reloadItems) {
@@ -285,7 +288,7 @@ export default class Drilldown extends Parent {
   private disableFocusElements() {
     const elsBeenDisable = this.el.querySelectorAll('[data-c-hidden]')
     elsBeenDisable.forEach((el) => {
-      el.removeAttribute('data-c-hidden')
+      el.removeAttribute(this.hiddenData)
       el.removeAttribute('tabindex')
     })
 
@@ -298,7 +301,7 @@ export default class Drilldown extends Parent {
       if (menu === this.currentEl)
         return
 
-      item.setAttribute('data-c-hidden', 'true')
+      item.setAttribute(this.hiddenData, 'true')
       item.setAttribute('tabindex', '-1')
     })
   }
@@ -369,6 +372,40 @@ export default class Drilldown extends Parent {
   public destroy() {
     this.mutationObserver?.disconnect()
     this.resizeObserver?.disconnect()
+    this.wrapper?.removeAttribute('role')
+    this.wrapper?.removeAttribute('aria-multiselectable')
+    this.wrapper?.removeAttribute('aria-orientation')
+    this.wrapper?.querySelectorAll('.c-drilldown-menu').forEach((menu) => {
+      menu.removeAttribute('role')
+    })
+
+    const items = this.el.querySelectorAll('.c-drilldown-menu > li')
+    items.forEach((item) => {
+      item.removeAttribute('role')
+    })
+
+    const backs = this.el.querySelectorAll('.c-drilldown-back')
+    const nexts = this.el.querySelectorAll('.c-drilldown-next')
+    backs.forEach((back) => {
+      back.removeAttribute('role')
+    })
+    nexts.forEach((next) => {
+      next.removeAttribute('role')
+      next.removeAttribute('aria-expanded')
+      if (!next.getAttribute('aria-controls')) {
+        const menu = next.parentElement?.querySelector('.c-drilldown-menu')
+        next.removeAttribute('aria-controls')
+        if (menu && menu.id.startsWith('c-'))
+          menu.removeAttribute('id')
+      }
+    })
+    const elsBeenDisable = this.el.querySelectorAll('[data-c-hidden]')
+    elsBeenDisable.forEach((el) => {
+      el.removeAttribute(this.hiddenData)
+      el.removeAttribute('tabindex')
+    })
+
+    this.wrapper?.style.removeProperty(this.delayCssVar)
     super.destroy()
   }
 }