Version 0.9.2

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Loïs Boubault (Applelo)
+Copyright (c) 2023-present Loïs Boubault (Applelo)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

docs/demo/dropdown.md

@@ -8,7 +8,7 @@
   onMounted(() => {
     const dropdown = new Dropdown('#dropdown', {
       openOn: 'hover',
-      setWidth: true
+      equalizeWidth: true
     })
     const dropdownMenu = new Dropdown('#dropdown-menu')
   })
@@ -27,7 +27,7 @@
 <div class="c-dropdown" id="dropdown" style="margin-top: 2rem;">
   <button class="c-dropdown-trigger" aria-controls="dropdown-container">Basic Dropdown</button>
   <div class="c-dropdown-container" id="dropdown-container">
-    Hello World
+    lorem ipseum int
   </div>
 </div>
 

docs/guide/drilldown.md

@@ -101,17 +101,19 @@ You can change some options from the component.
 import { Drilldown } from 'compotes'
 
 const drilldown = new Collapse('#my-drilldown', {
-  init: true, // [!code focus:4]
+  init: true, // [!code focus:5]
   initAccessibilityAttrs: true,
   initEvents: true,
-  dynamicHeight: false
+  dynamicHeight: false,
+  mutationObserver: true,
 })
 ```
 
 - `init` (boolean): Init the component on creation
 - `initAccessibilityAttrs` (boolean): Init accessibility attributes on the component
 - `initEvents` (boolean): Init events on the component
 - `dynamicHeight` (boolean): By default, the height of the drilldown is the tallest menu found. You can set this option to `true` to update the height to the current menu.
+- `mutationObserver` (boolean): Use MutationObserver to update component on changes
 
 ## Methods
 

docs/guide/dropdown.md

@@ -54,17 +54,21 @@ You can change some options from the component.
 import { Dropdown } from 'compotes'
 
 const drag = new Drag('.c-drag', {
-  init: true, // [!code focus:4]
+  init: true, // [!code focus:6]
   initEvents: true,
   enforceType: undefined,
   openOn: 'click',
+  equalizeWidth: undefined,
+  mutationObserver: true,
 })
 ```
 
 - `init` (boolean): Init the component on creation
 - `initEvents` (boolean): Init events on the component
-- `enforceType` ('default' or 'menu'): The type of the drilldown
-- `openOn` ('click' or 'hover'): Open the drilldown on click/hover from the trigger element
+- `enforceType` ('default' or 'menu'): The type of the dropdown
+- `openOn` ('click' or 'hover'): Open the dropdown on click/hover from the trigger element
+- `equalizeWidth` (boolean): Equalize width on the trigger and the container. It will refresh on mutation observer (if enable)
+- `mutationObserver` (boolean): Use MutationObserver to update component on changes
 
 ## Methods
 
@@ -85,9 +89,10 @@ dropdown.init()// [!code focus]
 - `initAccessibilityEvents()`: Init component accessibility events
 - `destroyEvents()`: Destroy the component events
 - `destroy()`: Destroy the component
-- `open()`: Open the drilldown
-- `toggle()`: Toggle the drilldown
-- `close()`: Close the drilldown
+- `open()`: Open the dropdown
+- `toggle()`: Toggle the dropdown
+- `close()`: Close the dropdown
+- `equalizeWidth()`: Equalize the width of the container and the trigger of the dropdown
 
 ## Data
 

docs/guide/marquee.md

@@ -41,7 +41,7 @@ You can change some options from the component.
 import { Marquee } from 'compotes'
 
 const marquee = new Marquee('.c-marquee', {
-  init: true, // [!code focus:6]
+  init: true, // [!code focus:7]
   initEvents: true,
   fill: false,
   direction: 'right',

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@compotes/root",
   "type": "module",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "private": "true",
   "packageManager": "pnpm@8.15.2",
   "description": "Components library focused on accessibility/customization",
@@ -47,7 +47,7 @@
     "eslint": "^8.56.0",
     "playwright": "^1.41.2",
     "typescript": "^5.3.3",
-    "vite": "^5.1.1",
+    "vite": "^5.1.2",
     "vitepress": "1.0.0-rc.42",
     "vitest": "^1.2.2",
     "vue": "^3.4.19",

packages/core/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Loïs Boubault (Applelo)
+Copyright (c) 2023-present Loïs Boubault (Applelo)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

packages/core/package.json

@@ -1,7 +1,7 @@
 {
   "name": "compotes",
   "type": "module",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "packageManager": "pnpm@8.15.1",
   "description": "Components library focused on accessibility/customization",
   "author": "Applelo",
@@ -70,7 +70,7 @@
     "fast-glob": "^3.3.2",
     "lightningcss": "^1.23.0",
     "typescript": "^5.3.3",
-    "vite": "^5.1.1",
+    "vite": "^5.1.2",
     "vite-plugin-dts": "^3.7.2"
   }
 }

packages/core/src/components/drilldown.ts

@@ -392,12 +392,10 @@ export default class Drilldown extends Parent {
     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')
-      }
+      next.removeAttribute('aria-controls')
+      const menu = next.parentElement?.querySelector('.c-drilldown-menu')
+      if (menu && menu.id.startsWith('c-id-'))
+        menu.removeAttribute('id')
     })
     const elsBeenDisable = this.el.querySelectorAll('[data-c-hidden]')
     elsBeenDisable.forEach((el) => {

packages/core/src/components/dropdown.ts

@@ -23,11 +23,12 @@ export interface DropdownOptions extends ParentOptions {
    * @default undefined
    */
   enforceType?: 'default' | 'menu'
-  // /**
-  //  * Use ResizeObserver to get and set the width on the trigger and the container
-  //  * @default false
-  //  */
-  // setWidth?: boolean
+  /**
+   * Equalize width on the trigger and the container. It will refresh on mutation observer (if enable).
+   * You can use `dropdown.equalizeWidth()` to equalize width manually.
+   * @default false
+   */
+  equalizeWidth?: boolean
   /**
    * Use MutationObserver to update component on changes
    * @default true
@@ -42,8 +43,8 @@ export default class Dropdown extends Parent {
   private opened: boolean = false
 
   private mutationObserver?: MutationObserver
-  // private resizeObserver?: ResizeObserver
-  // private widthCssVar = '--c-dropdown-width'
+  private widthClass = 'c-dropdown--setwidth'
+  private widthCssVar = '--c-dropdown-width'
 
   constructor(el: HTMLElement | string, options: DropdownOptions = {}) {
     super(el, options)
@@ -75,18 +76,15 @@ export default class Dropdown extends Parent {
       : new MutationObserver(() => {
         this.update()
       })
-    // this.resizeObserver = this.opts.setWidth === true
-    //   ? new ResizeObserver(() => {
-    //     this.setWidth()
-    //   })
-    //   : undefined
     this.mutationObserver?.observe(this.el, {
       childList: true,
+      characterData: this.opts.equalizeWidth === true,
       subtree: true,
     })
-    // this.resizeObserver?.observe(this.el)
+
     this.opened = this.triggerEl.getAttribute('aria-expanded') === 'true'
 
+    this.update()
     super.init()
   }
 
@@ -250,6 +248,8 @@ export default class Dropdown extends Parent {
   public update() {
     if (this.accessibilityStatus.attrs === true)
       this.initAccessibilityAttrs()
+    if (this.opts.equalizeWidth === true)
+      this.equalizeWidth()
   }
 
   /**
@@ -275,17 +275,22 @@ export default class Dropdown extends Parent {
       : 'default'
   }
 
-  // private setWidth() {
-  //   this.el.classList.remove('c-dropdown--setwidth')
-  //   this.el.style.removeProperty(this.widthCssVar)
-  //   if (!this.triggerEl || !this.menuEl)
-  //     return
-  //   const triggerWidth = this.triggerEl.clientWidth
-  //   const containerWidth = this.menuEl.clientWidth
-  //   const maxWidth = Math.max(triggerWidth, containerWidth)
-  //   this.el.style.setProperty(this.widthCssVar, `${Math.ceil(maxWidth)}px`)
-  //   this.el.classList.add('c-dropdown--setwidth')
-  // }
+  /**
+   * Get and set the same width on the trigger and the container
+   */
+  public equalizeWidth() {
+    setTimeout(() => {
+      if (!this.triggerEl || !this.menuEl)
+        return
+      this.el.classList.remove(this.widthClass)
+      this.el.style.removeProperty(this.widthCssVar)
+      const triggerWidth = this.triggerEl.clientWidth
+      const containerWidth = this.menuEl.clientWidth
+      const maxWidth = Math.max(triggerWidth, containerWidth)
+      this.el.style.setProperty(this.widthCssVar, `${Math.ceil(maxWidth)}px`)
+      this.el.classList.add(this.widthClass)
+    }, 1)
+  }
 
   /**
    * Close the dropdown
@@ -316,15 +321,14 @@ export default class Dropdown extends Parent {
   }
 
   public destroy() {
-    // this.resizeObserver?.disconnect()
     this.mutationObserver?.disconnect()
     if (this.triggerEl) {
       if (this.triggerEl.tagName !== 'BUTTON')
         this.triggerEl.removeAttribute('role')
       this.triggerEl.removeAttribute('aria-controls')
     }
 
-    if (this.menuEl && this.menuEl.id.startsWith('c-'))
+    if (this.menuEl && this.menuEl.id.startsWith('c-id-'))
       this.menuEl.removeAttribute('id')
 
     if (this.type === 'menu' && this.menuEl) {
@@ -338,6 +342,7 @@ export default class Dropdown extends Parent {
         action.removeAttribute('role')
       })
     }
+    this.el.classList.remove(this.widthClass)
     super.destroy()
   }
 }

packages/core/src/css/dropdown.css

@@ -7,10 +7,18 @@
 
 .c-dropdown-container {
   position: absolute;
-  display: none;
+  visibility: hidden;
+  height: 0;
 }
 
 .c-dropdown-trigger[aria-expanded="true"] + .c-dropdown-container {
   display: block;
+  visibility: visible;
+  height: auto;
+}
+
+.c-dropdown--setwidth .c-dropdown-container,
+.c-dropdown--setwidth .c-dropdown-trigger {
+  width: var(--c-dropdown-width);
 }
 

packages/core/test/__snapshots__/collapse.test.ts.snap

@@ -0,0 +1,32 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`collapse > destroy 1`] = `
+"<!DOCTYPE html><html lang="en"><head>
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🍯</text></svg>">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Collapse</title>
+    <script type="module" crossorigin="" src="/assets/collapse-SWlymWei.js"></script>
+    <link rel="modulepreload" crossorigin="" href="/assets/_parent-CjRBGSFb.js">
+    <link rel="modulepreload" crossorigin="" href="/assets/animation-CH8HhKvA.js">
+    <link rel="stylesheet" crossorigin="" href="/assets/marquee-ybAlwBfl.css">
+  </head>
+  <body>
+    <div>
+      <button class="c-collapse-trigger" aria-controls="accordion-1">
+        Accordion 2
+      </button>
+      <div class="c-collapse" id="accordion-1" style="transition: height .2s;">
+        <p>
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia facere possimus impedit facilis culpa illo earum deserunt consequuntur minus. Ad et qui labore reprehenderit magnam exercitationem placeat magni nesciunt suscipit.
+        </p>
+      </div>
+    </div>
+    <button class="js-destroy">
+      Destroy
+    </button>
+
+
+
+</body></html>"
+`;

packages/core/test/__snapshots__/drag.test.ts.snap

@@ -0,0 +1,24 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`drag > destroy 1`] = `
+"<!DOCTYPE html><html lang="en"><head>
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🍯</text></svg>">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Drag</title>
+    <script type="module" crossorigin="" src="/assets/drag-v3RSYZlk.js"></script>
+    <link rel="modulepreload" crossorigin="" href="/assets/_parent-CjRBGSFb.js">
+    <link rel="stylesheet" crossorigin="" href="/assets/marquee-ybAlwBfl.css">
+  </head>
+  <body>
+    <div class="c-drag" style="width: 200px; height: 200px;">
+      <p>Lorem ipsum <a href="#">dolor sit amet</a> consectetur adipisicing elit. Consequatur, id? Dolorum cum est ipsum praesentium mollitia quod saepe nemo doloribus, aliquid dolore laudantium consequuntur alias facere veritatis magni, adipisci fugit.</p>
+      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Pariatur, est dolore. Vel ducimus incidunt labore, ipsum necessitatibus omnis qui! Consectetur molestiae ipsam repellendus illum hic veritatis. <a href="#">Consequuntur impedit</a> animi voluptatum.</p>
+    </div>
+    <button class="js-destroy">
+      Destroy
+    </button>
+
+
+</body></html>"
+`;