From a880726e056df8a31c69549457c370e215594fd0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lo=C3=AFs=20Boubault?= <7613286+Applelo@users.noreply.github.com> Date: Tue, 13 Feb 2024 22:37:27 +0100 Subject: [PATCH 1/7] fix marquee code focus --- docs/guide/marquee.md | 2 +- package.json | 2 +- packages/core/package.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/guide/marquee.md b/docs/guide/marquee.md index 2c2df0c..95a095f 100644 --- a/docs/guide/marquee.md +++ b/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', diff --git a/package.json b/package.json index 5b55c51..0bd088c 100644 --- a/package.json +++ b/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", diff --git a/packages/core/package.json b/packages/core/package.json index 3802f89..fa0a8ea 100644 --- a/packages/core/package.json +++ b/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", From 31f19755c928bc2f15f36fae730fa155d2bdc2ec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lo=C3=AFs=20Boubault?= <7613286+Applelo@users.noreply.github.com> Date: Wed, 14 Feb 2024 20:57:45 +0100 Subject: [PATCH 2/7] add destroy test --- package.json | 2 +- packages/core/package.json | 2 +- packages/core/src/components/drilldown.ts | 10 +- packages/core/src/components/dropdown.ts | 2 +- .../test/__snapshots__/collapse.test.ts.snap | 32 ++++++ .../core/test/__snapshots__/drag.test.ts.snap | 24 ++++ .../test/__snapshots__/drilldown.test.ts.snap | 105 ++++++++++++++++++ .../test/__snapshots__/dropdown.test.ts.snap | 30 +++++ .../test/__snapshots__/marquee.test.ts.snap | 33 ++++++ packages/core/test/collapse.test.ts | 9 ++ packages/core/test/components/collapse.html | 3 + packages/core/test/components/collapse.ts | 4 +- packages/core/test/components/drag.html | 3 + packages/core/test/components/drag.ts | 4 +- packages/core/test/components/drilldown.html | 3 + packages/core/test/components/drilldown.ts | 6 +- packages/core/test/components/dropdown.html | 3 + packages/core/test/components/dropdown.ts | 4 +- packages/core/test/components/marquee.html | 3 + packages/core/test/components/marquee.ts | 3 + packages/core/test/drag.test.ts | 9 ++ packages/core/test/drilldown.test.ts | 9 ++ packages/core/test/dropdown.test.ts | 9 ++ packages/core/test/helper/destroy.ts | 10 ++ packages/core/test/marquee.test.ts | 9 ++ pnpm-lock.yaml | 60 +++++----- 26 files changed, 346 insertions(+), 45 deletions(-) create mode 100644 packages/core/test/__snapshots__/collapse.test.ts.snap create mode 100644 packages/core/test/__snapshots__/drag.test.ts.snap create mode 100644 packages/core/test/__snapshots__/drilldown.test.ts.snap create mode 100644 packages/core/test/__snapshots__/dropdown.test.ts.snap create mode 100644 packages/core/test/__snapshots__/marquee.test.ts.snap create mode 100644 packages/core/test/helper/destroy.ts diff --git a/package.json b/package.json index 0bd088c..1826113 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/packages/core/package.json b/packages/core/package.json index fa0a8ea..9a72333 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -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" } } diff --git a/packages/core/src/components/drilldown.ts b/packages/core/src/components/drilldown.ts index b753df1..6e350b7 100644 --- a/packages/core/src/components/drilldown.ts +++ b/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) => { diff --git a/packages/core/src/components/dropdown.ts b/packages/core/src/components/dropdown.ts index f5c14c8..0797dde 100644 --- a/packages/core/src/components/dropdown.ts +++ b/packages/core/src/components/dropdown.ts @@ -324,7 +324,7 @@ export default class Dropdown extends Parent { 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) { diff --git a/packages/core/test/__snapshots__/collapse.test.ts.snap b/packages/core/test/__snapshots__/collapse.test.ts.snap new file mode 100644 index 0000000..e330c83 --- /dev/null +++ b/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`] = ` +" + + + + Collapse + + + + + + +
+ +
+

+ 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. +

+
+
+ + + + +" +`; diff --git a/packages/core/test/__snapshots__/drag.test.ts.snap b/packages/core/test/__snapshots__/drag.test.ts.snap new file mode 100644 index 0000000..f27396e --- /dev/null +++ b/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`] = ` +" + + + + Drag + + + + + +
+

Lorem ipsum dolor sit amet 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.

+

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. Consequuntur impedit animi voluptatum.

+
+ + + +" +`; diff --git a/packages/core/test/__snapshots__/drilldown.test.ts.snap b/packages/core/test/__snapshots__/drilldown.test.ts.snap new file mode 100644 index 0000000..b24a4b7 --- /dev/null +++ b/packages/core/test/__snapshots__/drilldown.test.ts.snap @@ -0,0 +1,105 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`drilldown > destroy 1`] = ` +" + + + + Drilldown + + + + + + + + + + + + + + + +" +`; diff --git a/packages/core/test/__snapshots__/dropdown.test.ts.snap b/packages/core/test/__snapshots__/dropdown.test.ts.snap new file mode 100644 index 0000000..1bbb9b3 --- /dev/null +++ b/packages/core/test/__snapshots__/dropdown.test.ts.snap @@ -0,0 +1,30 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`dropdown > destroy 1`] = ` +" + + + + Dropdown + + + + + + + +
+ + +
+ + + +" +`; diff --git a/packages/core/test/__snapshots__/marquee.test.ts.snap b/packages/core/test/__snapshots__/marquee.test.ts.snap new file mode 100644 index 0000000..31d36e5 --- /dev/null +++ b/packages/core/test/__snapshots__/marquee.test.ts.snap @@ -0,0 +1,33 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`marquee > destroy 1`] = ` +" + + + + Marquee + + + + + + +
+ +
+ + + + + +" +`; diff --git a/packages/core/test/collapse.test.ts b/packages/core/test/collapse.test.ts index fcbd1fa..c064a1f 100644 --- a/packages/core/test/collapse.test.ts +++ b/packages/core/test/collapse.test.ts @@ -1,6 +1,7 @@ import { afterAll, beforeAll, describe, expect, it } from 'vitest' import type { Browser } from 'playwright' import { chromium } from 'playwright' +import { destroyComponent } from './helper/destroy' let browser: Browser @@ -58,4 +59,12 @@ describe('collapse', async () => { events.forEach(e => expect(result).toContain(e)) }) + + it.concurrent('destroy', async () => { + const page = await browser.newPage() + await page.goto('http://localhost:3000/collapse.html') + const { before, after } = await destroyComponent(page) + expect(before).not.toEqual(after) + expect(after).toMatchSnapshot() + }) }) diff --git a/packages/core/test/components/collapse.html b/packages/core/test/components/collapse.html index c6b9008..92e5b34 100644 --- a/packages/core/test/components/collapse.html +++ b/packages/core/test/components/collapse.html @@ -20,6 +20,9 @@

+ diff --git a/packages/core/test/components/collapse.ts b/packages/core/test/components/collapse.ts index c7c17e6..a6e1040 100644 --- a/packages/core/test/components/collapse.ts +++ b/packages/core/test/components/collapse.ts @@ -3,5 +3,7 @@ import { Collapse } from '@src/index' const el = document.querySelector('.c-collapse') if (el) { - const _collapse = new Collapse(el) + const collapse = new Collapse(el) + const destroyBtn = document.querySelector('.js-destroy') + destroyBtn?.addEventListener('click', () => collapse.destroy()) } diff --git a/packages/core/test/components/drag.html b/packages/core/test/components/drag.html index 6cfa775..b5eabf3 100644 --- a/packages/core/test/components/drag.html +++ b/packages/core/test/components/drag.html @@ -11,6 +11,9 @@

Lorem ipsum dolor sit amet 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.

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. Consequuntur impedit animi voluptatum.

+ diff --git a/packages/core/test/components/drag.ts b/packages/core/test/components/drag.ts index cecb4b7..e656a21 100644 --- a/packages/core/test/components/drag.ts +++ b/packages/core/test/components/drag.ts @@ -3,5 +3,7 @@ import { Drag } from '@src/index' const el = document.querySelector('.c-drag') if (el) { - const _drag = new Drag(el) + const drag = new Drag(el) + const destroyBtn = document.querySelector('.js-destroy') + destroyBtn?.addEventListener('click', () => drag.destroy()) } diff --git a/packages/core/test/components/drilldown.html b/packages/core/test/components/drilldown.html index 4e17e41..88a7ae6 100644 --- a/packages/core/test/components/drilldown.html +++ b/packages/core/test/components/drilldown.html @@ -88,6 +88,9 @@ + diff --git a/packages/core/test/components/drilldown.ts b/packages/core/test/components/drilldown.ts index ec146d6..a9c5f0c 100644 --- a/packages/core/test/components/drilldown.ts +++ b/packages/core/test/components/drilldown.ts @@ -5,7 +5,7 @@ const el = document.querySelector('.c-drilldown') const reset = document.querySelector('.js-drilldown-reset') if (el) { const drilldown = new Drilldown(el) - reset?.addEventListener('click', () => { - drilldown.reset() - }) + reset?.addEventListener('click', () => drilldown.reset()) + const destroyBtn = document.querySelector('.js-destroy') + destroyBtn?.addEventListener('click', () => drilldown.destroy()) } diff --git a/packages/core/test/components/dropdown.html b/packages/core/test/components/dropdown.html index f776244..eebbc33 100644 --- a/packages/core/test/components/dropdown.html +++ b/packages/core/test/components/dropdown.html @@ -15,6 +15,9 @@ Hello World + diff --git a/packages/core/test/components/dropdown.ts b/packages/core/test/components/dropdown.ts index ccc3b18..de12bb5 100644 --- a/packages/core/test/components/dropdown.ts +++ b/packages/core/test/components/dropdown.ts @@ -3,5 +3,7 @@ import { Dropdown } from '@src/index' const el = document.querySelector('.c-dropdown') if (el) { - const _dropdown = new Dropdown(el) + const dropdown = new Dropdown(el) + const destroyBtn = document.querySelector('.js-destroy') + destroyBtn?.addEventListener('click', () => dropdown.destroy()) } diff --git a/packages/core/test/components/marquee.html b/packages/core/test/components/marquee.html index 0894204..dd3525c 100644 --- a/packages/core/test/components/marquee.html +++ b/packages/core/test/components/marquee.html @@ -19,6 +19,9 @@ + diff --git a/packages/core/test/components/marquee.ts b/packages/core/test/components/marquee.ts index 879f02a..25bdcf1 100644 --- a/packages/core/test/components/marquee.ts +++ b/packages/core/test/components/marquee.ts @@ -16,4 +16,7 @@ if (el) { pause?.addEventListener('click', () => { marquee.pause() }) + + const destroyBtn = document.querySelector('.js-destroy') + destroyBtn?.addEventListener('click', () => marquee.destroy()) } diff --git a/packages/core/test/drag.test.ts b/packages/core/test/drag.test.ts index 56eddab..b1d98b1 100644 --- a/packages/core/test/drag.test.ts +++ b/packages/core/test/drag.test.ts @@ -1,6 +1,7 @@ import { afterAll, beforeAll, describe, expect, it } from 'vitest' import type { Browser, Page } from 'playwright' import { chromium } from 'playwright' +import { destroyComponent } from './helper/destroy' let browser: Browser @@ -77,4 +78,12 @@ describe.concurrent('drag', async () => { events.forEach(e => expect(result).toContain(e)) }) + + it.concurrent('destroy', async () => { + const page = await browser.newPage() + await page.goto('http://localhost:3000/drag.html') + const { before, after } = await destroyComponent(page) + expect(before).not.toEqual(after) + expect(after).toMatchSnapshot() + }) }) diff --git a/packages/core/test/drilldown.test.ts b/packages/core/test/drilldown.test.ts index 05b49a8..a022a27 100644 --- a/packages/core/test/drilldown.test.ts +++ b/packages/core/test/drilldown.test.ts @@ -1,6 +1,7 @@ import { afterAll, beforeAll, describe, expect, it } from 'vitest' import type { Browser } from 'playwright' import { chromium } from 'playwright' +import { destroyComponent } from './helper/destroy' let browser: Browser @@ -69,4 +70,12 @@ describe('drilldown', async () => { events.forEach(e => expect(result).toContain(e)) }) + + it.concurrent('destroy', async ({ expect }) => { + const page = await browser.newPage() + await page.goto('http://localhost:3000/drilldown.html') + const { before, after } = await destroyComponent(page) + expect(before).not.toEqual(after) + expect(after).toMatchSnapshot() + }) }) diff --git a/packages/core/test/dropdown.test.ts b/packages/core/test/dropdown.test.ts index b95ce3b..c898cad 100644 --- a/packages/core/test/dropdown.test.ts +++ b/packages/core/test/dropdown.test.ts @@ -1,6 +1,7 @@ import { afterAll, beforeAll, describe, expect, it } from 'vitest' import type { Browser } from 'playwright' import { chromium } from 'playwright' +import { destroyComponent } from './helper/destroy' let browser: Browser @@ -49,4 +50,12 @@ describe('dropdown', async () => { events.forEach(e => expect(result).toContain(e)) }) + + it.concurrent('destroy', async () => { + const page = await browser.newPage() + await page.goto('http://localhost:3000/dropdown.html') + const { before, after } = await destroyComponent(page) + expect(before).not.toEqual(after) + expect(after).toMatchSnapshot() + }) }) diff --git a/packages/core/test/helper/destroy.ts b/packages/core/test/helper/destroy.ts new file mode 100644 index 0000000..d296e02 --- /dev/null +++ b/packages/core/test/helper/destroy.ts @@ -0,0 +1,10 @@ +import type { Page } from 'playwright' + +export async function destroyComponent(page: Page) { + const before = await page.content() + const destroyBtn = page.locator('.js-destroy').first() + await destroyBtn.click() + const after = await page.content() + + return { after, before } +} diff --git a/packages/core/test/marquee.test.ts b/packages/core/test/marquee.test.ts index e1651ce..d07649d 100644 --- a/packages/core/test/marquee.test.ts +++ b/packages/core/test/marquee.test.ts @@ -1,6 +1,7 @@ import { afterAll, beforeAll, describe, expect, it } from 'vitest' import type { Browser } from 'playwright' import { chromium } from 'playwright' +import { destroyComponent } from './helper/destroy' let browser: Browser @@ -54,4 +55,12 @@ describe('marquee', async () => { events.forEach(e => expect(result).toContain(e)) }) + + it.concurrent('destroy', async () => { + const page = await browser.newPage() + await page.goto('http://localhost:3000/marquee.html') + const { before, after } = await destroyComponent(page) + expect(before).not.toEqual(after) + expect(after).toMatchSnapshot() + }) }) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 377407b..6b0a83c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -21,8 +21,8 @@ importers: specifier: ^5.3.3 version: 5.3.3 vite: - specifier: ^5.1.1 - version: 5.1.1(@types/node@20.11.17)(lightningcss@1.23.0) + specifier: ^5.1.2 + version: 5.1.2(@types/node@20.11.17)(lightningcss@1.23.0) vitepress: specifier: 1.0.0-rc.42 version: 1.0.0-rc.42(@algolia/client-search@4.22.1)(search-insights@2.13.0)(typescript@5.3.3) @@ -55,11 +55,11 @@ importers: specifier: ^5.3.3 version: 5.3.3 vite: - specifier: ^5.1.1 - version: 5.1.1(@types/node@20.11.17)(lightningcss@1.23.0) + specifier: ^5.1.2 + version: 5.1.2(@types/node@20.11.17)(lightningcss@1.23.0) vite-plugin-dts: specifier: ^3.7.2 - version: 3.7.2(@types/node@20.11.17)(typescript@5.3.3)(vite@5.1.1) + version: 3.7.2(@types/node@20.11.17)(typescript@5.3.3)(vite@5.1.2) packages: @@ -244,7 +244,7 @@ packages: eslint-plugin-antfu: 2.1.2(eslint@8.56.0) eslint-plugin-eslint-comments: 3.2.0(eslint@8.56.0) eslint-plugin-i: 2.29.1(@typescript-eslint/parser@6.21.0)(eslint@8.56.0) - eslint-plugin-jsdoc: 48.0.6(eslint@8.56.0) + eslint-plugin-jsdoc: 48.1.0(eslint@8.56.0) eslint-plugin-jsonc: 2.13.0(eslint@8.56.0) eslint-plugin-markdown: 3.0.1(eslint@8.56.0) eslint-plugin-n: 16.6.2(eslint@8.56.0) @@ -1160,14 +1160,14 @@ packages: resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==} dev: true - /@vitejs/plugin-vue@5.0.4(vite@5.1.1)(vue@3.4.19): + /@vitejs/plugin-vue@5.0.4(vite@5.1.2)(vue@3.4.19): resolution: {integrity: sha512-WS3hevEszI6CEVEx28F8RjTX97k3KsrcY6kvTg7+Whm5y3oYvcqzVeGCU3hxSAn4uY2CLCkeokkGKpoctccilQ==} engines: {node: ^18.0.0 || >=20.0.0} peerDependencies: vite: ^5.0.0 vue: ^3.2.25 dependencies: - vite: 5.1.1(@types/node@20.11.17)(lightningcss@1.23.0) + vite: 5.1.2(@types/node@20.11.17)(lightningcss@1.23.0) vue: 3.4.19(typescript@5.3.3) dev: true @@ -1547,15 +1547,15 @@ packages: fill-range: 7.0.1 dev: true - /browserslist@4.22.3: - resolution: {integrity: sha512-UAp55yfwNv0klWNapjs/ktHoguxuQNGnOzxYmfnXIS+8AsRDZkSDxg7R1AX3GKzn078SBI5dzwzj/Yx0Or0e3A==} + /browserslist@4.23.0: + resolution: {integrity: sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==} engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} hasBin: true dependencies: caniuse-lite: 1.0.30001587 - electron-to-chromium: 1.4.668 + electron-to-chromium: 1.4.669 node-releases: 2.0.14 - update-browserslist-db: 1.0.13(browserslist@4.22.3) + update-browserslist-db: 1.0.13(browserslist@4.23.0) dev: true /builtin-modules@3.3.0: @@ -1698,10 +1698,10 @@ packages: resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==} dev: true - /core-js-compat@3.35.1: - resolution: {integrity: sha512-sftHa5qUJY3rs9Zht1WEnmkvXputCyDBczPnr7QDgL8n3qrF3CMXY4VPSYtOLLiOUJcah2WNXREd48iOl6mQIw==} + /core-js-compat@3.36.0: + resolution: {integrity: sha512-iV9Pd/PsgjNWBXeq8XRtWVSgz2tKAfhfvBs7qxYty+RlRd+OCksaWmOnc4JKrTc1cToXL1N0s3l/vwlxPtdElw==} dependencies: - browserslist: 4.22.3 + browserslist: 4.23.0 dev: true /cross-spawn@7.0.3: @@ -1786,8 +1786,8 @@ packages: esutils: 2.0.3 dev: true - /electron-to-chromium@1.4.668: - resolution: {integrity: sha512-ZOBocMYCehr9W31+GpMclR+KBaDZOoAEabLdhpZ8oU1JFDwIaFY0UDbpXVEUFc0BIP2O2Qn3rkfCjQmMR4T/bQ==} + /electron-to-chromium@1.4.669: + resolution: {integrity: sha512-E2SmpffFPrZhBSgf8ibqanRS2mpuk3FIRDzLDwt7WFpfgJMKDHJs0hmacyP0PS1cWsq0dVkwIIzlscNaterkPg==} dev: true /emoji-regex@8.0.0: @@ -1977,8 +1977,8 @@ packages: - supports-color dev: true - /eslint-plugin-jsdoc@48.0.6(eslint@8.56.0): - resolution: {integrity: sha512-LgwXOX6TWxxFYcbdVe+BJ94Kl/pgjSPYHLzqEdAMXTA1BH9WDx7iJ+9/iDajPF64LtzWX8C1mCfpbMZjJGhAOw==} + /eslint-plugin-jsdoc@48.1.0(eslint@8.56.0): + resolution: {integrity: sha512-g9S8ukmTd1DVcV/xeBYPPXOZ6rc8WJ4yi0+MVxJ1jBOrz5kmxV9gJJQ64ltCqIWFnBChLIhLVx3tbTSarqVyFA==} engines: {node: '>=18'} peerDependencies: eslint: ^7.0.0 || ^8.0.0 || ^9.0.0 @@ -2104,7 +2104,7 @@ packages: '@eslint/eslintrc': 2.1.4 ci-info: 4.0.0 clean-regexp: 1.0.0 - core-js-compat: 3.35.1 + core-js-compat: 3.36.0 eslint: 8.56.0 esquery: 1.5.0 indent-string: 4.0.0 @@ -3721,13 +3721,13 @@ packages: engines: {node: '>= 4.0.0'} dev: true - /update-browserslist-db@1.0.13(browserslist@4.22.3): + /update-browserslist-db@1.0.13(browserslist@4.23.0): resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==} hasBin: true peerDependencies: browserslist: '>= 4.21.0' dependencies: - browserslist: 4.22.3 + browserslist: 4.23.0 escalade: 3.1.2 picocolors: 1.0.0 dev: true @@ -3763,7 +3763,7 @@ packages: debug: 4.3.4 pathe: 1.1.2 picocolors: 1.0.0 - vite: 5.1.1(@types/node@20.11.17)(lightningcss@1.23.0) + vite: 5.1.2(@types/node@20.11.17)(lightningcss@1.23.0) transitivePeerDependencies: - '@types/node' - less @@ -3775,7 +3775,7 @@ packages: - terser dev: true - /vite-plugin-dts@3.7.2(@types/node@20.11.17)(typescript@5.3.3)(vite@5.1.1): + /vite-plugin-dts@3.7.2(@types/node@20.11.17)(typescript@5.3.3)(vite@5.1.2): resolution: {integrity: sha512-kg//1nDA01b8rufJf4TsvYN8LMkdwv0oBYpiQi6nRwpHyue+wTlhrBiqgipdFpMnW1oOYv6ywmzE5B0vg6vSEA==} engines: {node: ^14.18.0 || >=16.0.0} peerDependencies: @@ -3791,7 +3791,7 @@ packages: debug: 4.3.4 kolorist: 1.8.0 typescript: 5.3.3 - vite: 5.1.1(@types/node@20.11.17)(lightningcss@1.23.0) + vite: 5.1.2(@types/node@20.11.17)(lightningcss@1.23.0) vue-tsc: 1.8.27(typescript@5.3.3) transitivePeerDependencies: - '@types/node' @@ -3799,8 +3799,8 @@ packages: - supports-color dev: true - /vite@5.1.1(@types/node@20.11.17)(lightningcss@1.23.0): - resolution: {integrity: sha512-wclpAgY3F1tR7t9LL5CcHC41YPkQIpKUGeIuT8MdNwNZr6OqOTLs7JX5vIHAtzqLWXts0T+GDrh9pN2arneKqg==} + /vite@5.1.2(@types/node@20.11.17)(lightningcss@1.23.0): + resolution: {integrity: sha512-uwiFebQbTWRIGbCaTEBVAfKqgqKNKMJ2uPXsXeLIZxM8MVMjoS3j0cG8NrPxdDIadaWnPSjrkLWffLSC+uiP3Q==} engines: {node: ^18.0.0 || >=20.0.0} hasBin: true peerDependencies: @@ -3853,7 +3853,7 @@ packages: '@shikijs/core': 1.1.2 '@shikijs/transformers': 1.1.2 '@types/markdown-it': 13.0.7 - '@vitejs/plugin-vue': 5.0.4(vite@5.1.1)(vue@3.4.19) + '@vitejs/plugin-vue': 5.0.4(vite@5.1.2)(vue@3.4.19) '@vue/devtools-api': 7.0.14 '@vueuse/core': 10.7.2(vue@3.4.19) '@vueuse/integrations': 10.7.2(focus-trap@7.5.4)(vue@3.4.19) @@ -3861,7 +3861,7 @@ packages: mark.js: 8.11.1 minisearch: 6.3.0 shiki: 1.1.2 - vite: 5.1.1(@types/node@20.11.17)(lightningcss@1.23.0) + vite: 5.1.2(@types/node@20.11.17)(lightningcss@1.23.0) vue: 3.4.19(typescript@5.3.3) transitivePeerDependencies: - '@algolia/client-search' @@ -3934,7 +3934,7 @@ packages: strip-literal: 1.3.0 tinybench: 2.6.0 tinypool: 0.8.2 - vite: 5.1.1(@types/node@20.11.17)(lightningcss@1.23.0) + vite: 5.1.2(@types/node@20.11.17)(lightningcss@1.23.0) vite-node: 1.2.2 why-is-node-running: 2.2.2 transitivePeerDependencies: From 58c93e33be9272cec0550ce62acb02b4df7e4b8c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lo=C3=AFs=20Boubault?= <7613286+Applelo@users.noreply.github.com> Date: Wed, 14 Feb 2024 21:01:43 +0100 Subject: [PATCH 3/7] update licence year --- LICENSE | 2 +- packages/core/LICENSE | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/LICENSE b/LICENSE index 423af13..e9d329b 100644 --- a/LICENSE +++ b/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 diff --git a/packages/core/LICENSE b/packages/core/LICENSE index 423af13..e9d329b 100644 --- a/packages/core/LICENSE +++ b/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 From caa78097fd1d4af12ae72f3a06f1c9b4cf0524e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lo=C3=AFs=20Boubault?= <7613286+Applelo@users.noreply.github.com> Date: Wed, 14 Feb 2024 22:01:05 +0100 Subject: [PATCH 4/7] add equalizeWidth method/option --- docs/demo/dropdown.md | 4 +- packages/core/src/components/dropdown.ts | 55 +++++++++++++----------- packages/core/src/css/dropdown.css | 10 ++++- 3 files changed, 41 insertions(+), 28 deletions(-) diff --git a/docs/demo/dropdown.md b/docs/demo/dropdown.md index 8948305..3b26927 100644 --- a/docs/demo/dropdown.md +++ b/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 @@ diff --git a/packages/core/src/components/dropdown.ts b/packages/core/src/components/dropdown.ts index 0797dde..90826bb 100644 --- a/packages/core/src/components/dropdown.ts +++ b/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,7 +321,6 @@ export default class Dropdown extends Parent { } public destroy() { - // this.resizeObserver?.disconnect() this.mutationObserver?.disconnect() if (this.triggerEl) { if (this.triggerEl.tagName !== 'BUTTON') @@ -338,6 +342,7 @@ export default class Dropdown extends Parent { action.removeAttribute('role') }) } + this.el.classList.remove(this.widthClass) super.destroy() } } diff --git a/packages/core/src/css/dropdown.css b/packages/core/src/css/dropdown.css index 092cbc9..b245c3a 100644 --- a/packages/core/src/css/dropdown.css +++ b/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); } From 4e21db9553c54ea359b41f17a4eac009a4aaa97f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lo=C3=AFs=20Boubault?= <7613286+Applelo@users.noreply.github.com> Date: Wed, 14 Feb 2024 22:06:02 +0100 Subject: [PATCH 5/7] update documentation --- docs/guide/drilldown.md | 6 ++++-- docs/guide/dropdown.md | 17 +++++++++++------ 2 files changed, 15 insertions(+), 8 deletions(-) diff --git a/docs/guide/drilldown.md b/docs/guide/drilldown.md index fd7b35c..d42a444 100644 --- a/docs/guide/drilldown.md +++ b/docs/guide/drilldown.md @@ -101,10 +101,11 @@ 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, }) ``` @@ -112,6 +113,7 @@ const drilldown = new Collapse('#my-drilldown', { - `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 diff --git a/docs/guide/dropdown.md b/docs/guide/dropdown.md index 9e68341..695f938 100644 --- a/docs/guide/dropdown.md +++ b/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 From 0e7271a109a0b632cc107883d58b2d667d43a93e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lo=C3=AFs=20Boubault?= <7613286+Applelo@users.noreply.github.com> Date: Wed, 14 Feb 2024 22:08:50 +0100 Subject: [PATCH 6/7] update snapshot --- packages/core/test/__snapshots__/collapse.test.ts.snap | 4 ++-- packages/core/test/__snapshots__/drag.test.ts.snap | 4 ++-- packages/core/test/__snapshots__/drilldown.test.ts.snap | 4 ++-- packages/core/test/__snapshots__/dropdown.test.ts.snap | 4 ++-- packages/core/test/__snapshots__/marquee.test.ts.snap | 4 ++-- 5 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/core/test/__snapshots__/collapse.test.ts.snap b/packages/core/test/__snapshots__/collapse.test.ts.snap index e330c83..efdec10 100644 --- a/packages/core/test/__snapshots__/collapse.test.ts.snap +++ b/packages/core/test/__snapshots__/collapse.test.ts.snap @@ -6,10 +6,10 @@ exports[`collapse > destroy 1`] = ` Collapse - + - +
diff --git a/packages/core/test/__snapshots__/drag.test.ts.snap b/packages/core/test/__snapshots__/drag.test.ts.snap index f27396e..38b71fe 100644 --- a/packages/core/test/__snapshots__/drag.test.ts.snap +++ b/packages/core/test/__snapshots__/drag.test.ts.snap @@ -6,9 +6,9 @@ exports[`drag > destroy 1`] = ` Drag - + - +
diff --git a/packages/core/test/__snapshots__/drilldown.test.ts.snap b/packages/core/test/__snapshots__/drilldown.test.ts.snap index b24a4b7..40fb012 100644 --- a/packages/core/test/__snapshots__/drilldown.test.ts.snap +++ b/packages/core/test/__snapshots__/drilldown.test.ts.snap @@ -6,12 +6,12 @@ exports[`drilldown > destroy 1`] = ` Drilldown - + - + diff --git a/packages/core/test/__snapshots__/dropdown.test.ts.snap b/packages/core/test/__snapshots__/dropdown.test.ts.snap index 1bbb9b3..36b60bb 100644 --- a/packages/core/test/__snapshots__/dropdown.test.ts.snap +++ b/packages/core/test/__snapshots__/dropdown.test.ts.snap @@ -6,11 +6,11 @@ exports[`dropdown > destroy 1`] = ` Dropdown - + - +
diff --git a/packages/core/test/__snapshots__/marquee.test.ts.snap b/packages/core/test/__snapshots__/marquee.test.ts.snap index 31d36e5..ee887cb 100644 --- a/packages/core/test/__snapshots__/marquee.test.ts.snap +++ b/packages/core/test/__snapshots__/marquee.test.ts.snap @@ -6,10 +6,10 @@ exports[`marquee > destroy 1`] = ` Marquee - + - +
From c4af6bc0716739eae7654a4c9906e48b0e4acc4a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lo=C3=AFs=20Boubault?= <7613286+Applelo@users.noreply.github.com> Date: Wed, 14 Feb 2024 22:18:05 +0100 Subject: [PATCH 7/7] fix drilldown test --- packages/core/test/__snapshots__/drilldown.test.ts.snap | 4 ++-- packages/core/test/drilldown.test.ts | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/core/test/__snapshots__/drilldown.test.ts.snap b/packages/core/test/__snapshots__/drilldown.test.ts.snap index 40fb012..9b05602 100644 --- a/packages/core/test/__snapshots__/drilldown.test.ts.snap +++ b/packages/core/test/__snapshots__/drilldown.test.ts.snap @@ -15,8 +15,8 @@ exports[`drilldown > destroy 1`] = ` -