From 081ef02b72938ec93223073dd8810ef768204caf Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Fri, 31 May 2024 14:28:19 -0400 Subject: [PATCH 01/11] events subclass Event instead of using CustomEvent now --- custom-elements-manifest.js | 20 ++--- docs/_layouts/component.njk | 10 ++- scripts/shared.js | 8 ++ .../animated-image/animated-image.ts | 6 +- src/components/animation/animation.ts | 11 ++- src/components/button/button.ts | 9 +- src/components/carousel/carousel.ts | 9 +- src/components/checkbox/checkbox.ts | 12 ++- src/components/color-picker/color-picker.ts | 57 ++++++------ src/components/copy-button/copy-button.ts | 14 ++- src/components/details/details.test.ts | 4 +- src/components/details/details.ts | 26 ++++-- src/components/dialog/dialog.ts | 19 ++-- src/components/drawer/drawer.ts | 19 ++-- src/components/dropdown/dropdown.ts | 14 +-- src/components/icon-button/icon-button.ts | 6 +- src/components/icon/icon.test.ts | 4 +- src/components/icon/icon.ts | 6 +- .../image-comparer/image-comparer.ts | 3 +- src/components/include/include.test.ts | 4 +- src/components/include/include.ts | 8 +- src/components/input/input.ts | 19 ++-- src/components/menu-item/menu-item.test.ts | 2 +- src/components/menu-item/menu-item.ts | 3 +- src/components/menu/menu.test.ts | 2 +- src/components/menu/menu.ts | 3 +- .../mutation-observer/mutation-observer.ts | 5 +- src/components/option/option.ts | 3 +- src/components/popup/popup.ts | 3 +- src/components/radio-button/radio-button.ts | 6 +- .../radio-group/radio-group.test.ts | 2 +- src/components/radio-group/radio-group.ts | 10 ++- src/components/radio/radio.ts | 6 +- src/components/range/range.ts | 12 ++- src/components/rating/rating.ts | 24 ++--- .../resize-observer/resize-observer.ts | 3 +- src/components/select/select.ts | 41 +++++---- src/components/split-panel/split-panel.ts | 3 +- src/components/switch/switch.test.ts | 26 +++--- src/components/switch/switch.ts | 20 +++-- src/components/tab-group/tab-group.test.ts | 2 +- src/components/tab-group/tab-group.ts | 6 +- src/components/tag/tag.ts | 3 +- src/components/textarea/textarea.ts | 12 ++- src/components/tooltip/tooltip.ts | 12 ++- src/components/tree-item/tree-item.ts | 32 ++++--- src/components/tree/tree.ts | 3 +- src/events/after-collapse.ts | 11 +++ src/events/after-expand.ts | 11 +++ src/events/after-hide.ts | 11 +++ src/events/after-show.ts | 11 +++ src/events/blur.ts | 11 +++ src/events/cancel.ts | 11 +++ src/events/change.ts | 11 +++ src/events/clear.ts | 11 +++ src/events/close.ts | 11 +++ src/events/collapse.ts | 11 +++ src/events/copy.ts | 18 ++++ src/events/error.ts | 11 +++ src/events/events.ts | 68 +++++++------- src/events/expand.ts | 11 +++ src/events/finish.ts | 11 +++ src/events/focus.ts | 11 +++ src/events/hide.ts | 11 +++ src/events/hover.ts | 19 ++++ src/events/include-error.ts | 18 ++++ src/events/input.ts | 11 +++ src/events/invalid.ts | 11 +++ src/events/lazy-change.ts | 11 +++ src/events/lazy-load.ts | 11 +++ src/events/load.ts | 11 +++ src/events/mutation.ts | 18 ++++ src/events/remove.ts | 11 +++ src/events/reposition.ts | 11 +++ src/events/request-close.ts | 18 ++++ src/events/resize.ts | 18 ++++ src/events/select.ts | 20 +++++ src/events/selection-change.ts | 20 +++++ src/events/show.ts | 11 +++ src/events/slide-change.ts | 21 +++++ src/events/start.ts | 11 +++ src/events/tab-hide.ts | 18 ++++ src/events/tab-show.ts | 18 ++++ src/events/wa-after-collapse.ts | 7 -- src/events/wa-after-expand.ts | 7 -- src/events/wa-after-hide.ts | 7 -- src/events/wa-after-show.ts | 7 -- src/events/wa-blur.ts | 7 -- src/events/wa-cancel.ts | 7 -- src/events/wa-change.ts | 7 -- src/events/wa-clear.ts | 7 -- src/events/wa-close.ts | 7 -- src/events/wa-collapse.ts | 7 -- src/events/wa-copy.ts | 7 -- src/events/wa-error.ts | 7 -- src/events/wa-expand.ts | 7 -- src/events/wa-finish.ts | 7 -- src/events/wa-focus.ts | 7 -- src/events/wa-hide.ts | 7 -- src/events/wa-hover.ts | 10 --- src/events/wa-input.ts | 7 -- src/events/wa-invalid.ts | 7 -- src/events/wa-lazy-change.ts | 7 -- src/events/wa-lazy-load.ts | 7 -- src/events/wa-load.ts | 7 -- src/events/wa-mutation.ts | 7 -- src/events/wa-remove.ts | 7 -- src/events/wa-reposition.ts | 7 -- src/events/wa-request-close.ts | 7 -- src/events/wa-resize.ts | 7 -- src/events/wa-select.ts | 9 -- src/events/wa-selection-change.ts | 9 -- src/events/wa-show.ts | 7 -- src/events/wa-slide-change.ts | 9 -- src/events/wa-start.ts | 7 -- src/events/wa-tab-hide.ts | 7 -- src/events/wa-tab-show.ts | 7 -- src/internal/animate.ts | 5 ++ src/internal/webawesome-element.ts | 90 +------------------ 119 files changed, 829 insertions(+), 583 deletions(-) create mode 100644 src/events/after-collapse.ts create mode 100644 src/events/after-expand.ts create mode 100644 src/events/after-hide.ts create mode 100644 src/events/after-show.ts create mode 100644 src/events/blur.ts create mode 100644 src/events/cancel.ts create mode 100644 src/events/change.ts create mode 100644 src/events/clear.ts create mode 100644 src/events/close.ts create mode 100644 src/events/collapse.ts create mode 100644 src/events/copy.ts create mode 100644 src/events/error.ts create mode 100644 src/events/expand.ts create mode 100644 src/events/finish.ts create mode 100644 src/events/focus.ts create mode 100644 src/events/hide.ts create mode 100644 src/events/hover.ts create mode 100644 src/events/include-error.ts create mode 100644 src/events/input.ts create mode 100644 src/events/invalid.ts create mode 100644 src/events/lazy-change.ts create mode 100644 src/events/lazy-load.ts create mode 100644 src/events/load.ts create mode 100644 src/events/mutation.ts create mode 100644 src/events/remove.ts create mode 100644 src/events/reposition.ts create mode 100644 src/events/request-close.ts create mode 100644 src/events/resize.ts create mode 100644 src/events/select.ts create mode 100644 src/events/selection-change.ts create mode 100644 src/events/show.ts create mode 100644 src/events/slide-change.ts create mode 100644 src/events/start.ts create mode 100644 src/events/tab-hide.ts create mode 100644 src/events/tab-show.ts delete mode 100644 src/events/wa-after-collapse.ts delete mode 100644 src/events/wa-after-expand.ts delete mode 100644 src/events/wa-after-hide.ts delete mode 100644 src/events/wa-after-show.ts delete mode 100644 src/events/wa-blur.ts delete mode 100644 src/events/wa-cancel.ts delete mode 100644 src/events/wa-change.ts delete mode 100644 src/events/wa-clear.ts delete mode 100644 src/events/wa-close.ts delete mode 100644 src/events/wa-collapse.ts delete mode 100644 src/events/wa-copy.ts delete mode 100644 src/events/wa-error.ts delete mode 100644 src/events/wa-expand.ts delete mode 100644 src/events/wa-finish.ts delete mode 100644 src/events/wa-focus.ts delete mode 100644 src/events/wa-hide.ts delete mode 100644 src/events/wa-hover.ts delete mode 100644 src/events/wa-input.ts delete mode 100644 src/events/wa-invalid.ts delete mode 100644 src/events/wa-lazy-change.ts delete mode 100644 src/events/wa-lazy-load.ts delete mode 100644 src/events/wa-load.ts delete mode 100644 src/events/wa-mutation.ts delete mode 100644 src/events/wa-remove.ts delete mode 100644 src/events/wa-reposition.ts delete mode 100644 src/events/wa-request-close.ts delete mode 100644 src/events/wa-resize.ts delete mode 100644 src/events/wa-select.ts delete mode 100644 src/events/wa-selection-change.ts delete mode 100644 src/events/wa-show.ts delete mode 100644 src/events/wa-slide-change.ts delete mode 100644 src/events/wa-start.ts delete mode 100644 src/events/wa-tab-hide.ts delete mode 100644 src/events/wa-tab-show.ts diff --git a/custom-elements-manifest.js b/custom-elements-manifest.js index f60557583..03e3f5ab5 100644 --- a/custom-elements-manifest.js +++ b/custom-elements-manifest.js @@ -9,10 +9,6 @@ const packageData = JSON.parse(fs.readFileSync('./package.json', 'utf8')); const { name, description, version, author, homepage, license } = packageData; const outdir = 'dist'; -function noDash(string) { - return string.replace(/^\s?-/, '').trim(); -} - function replace(string, terms) { terms.forEach(({ from, to }) => { string = string?.replace(from, to); @@ -106,6 +102,7 @@ export default { if (classDoc?.events) { classDoc.events.forEach(event => { + if (!event.name) return; event.reactName = `on${pascalCase(event.name)}`; event.eventName = `${pascalCase(event.name)}Event`; }); @@ -174,12 +171,15 @@ export default { url: `https://shoelace.style/components/${tag.replace('wa-', '')}` }; } - }), - - customElementVuejsPlugin({ - outdir: './dist/types/vue', - fileName: 'index.d.ts', - componentTypePath: (_, tag) => `../../components/${tag.replace('wa-', '')}/${tag.replace('wa-', '')}.js` }) + + // + // TODO - figure out why this broke when events were updated + // + // customElementVuejsPlugin({ + // outdir: './dist/types/vue', + // fileName: 'index.d.ts', + // componentTypePath: (_, tag) => `../../components/${tag.replace('wa-', '')}/${tag.replace('wa-', '')}.js` + // }) ] }; diff --git a/docs/_layouts/component.njk b/docs/_layouts/component.njk index 045f4515e..2df14c5d0 100644 --- a/docs/_layouts/component.njk +++ b/docs/_layouts/component.njk @@ -184,10 +184,12 @@ {% for event in component.events %} - - {{ event.name }} - {{ event.description | inlineMarkdown | safe }} - + {% if event.name %} + + {{ event.name }} + {{ event.description | inlineMarkdown | safe }} + + {% endif %} {% endfor %} diff --git a/scripts/shared.js b/scripts/shared.js index dcdba6e58..c1614b925 100644 --- a/scripts/shared.js +++ b/scripts/shared.js @@ -9,6 +9,14 @@ export function getAllComponents(metadata) { const path = module.path; if (component) { + // Calling `new Event()` adds a blank entry into the CEM, so we'll filter them out here + if (component.events) { + component.events = component.events.filter(event => { + return event.name ? true : false; + }); + } + + // component.events = component.events.filter(event => !!event.name); allComponents.push(Object.assign(component, { path })); } } diff --git a/src/components/animated-image/animated-image.ts b/src/components/animated-image/animated-image.ts index d1aab1df4..f6531e876 100644 --- a/src/components/animated-image/animated-image.ts +++ b/src/components/animated-image/animated-image.ts @@ -1,6 +1,8 @@ import '../icon/icon.js'; import { customElement, property, query, state } from 'lit/decorators.js'; import { html } from 'lit'; +import { WaErrorEvent } from '../../events/error.js'; +import { WaLoadEvent } from '../../events/load.js'; import { watch } from '../../internal/watch.js'; import componentStyles from '../../styles/component.styles.js'; import styles from './animated-image.styles.js'; @@ -57,13 +59,13 @@ export default class WaAnimatedImage extends WebAwesomeElement { this.frozenFrame = canvas.toDataURL('image/gif'); if (!this.isLoaded) { - this.emit('wa-load'); + this.dispatchEvent(new WaLoadEvent()); this.isLoaded = true; } } private handleError() { - this.emit('wa-error'); + this.dispatchEvent(new WaErrorEvent()); } @watch('play', { waitUntilFirstUpdate: true }) diff --git a/src/components/animation/animation.ts b/src/components/animation/animation.ts index c6fea2e85..eb63fdb84 100644 --- a/src/components/animation/animation.ts +++ b/src/components/animation/animation.ts @@ -1,6 +1,9 @@ import { animations } from './animations.js'; import { customElement, property, queryAsync } from 'lit/decorators.js'; import { html } from 'lit'; +import { WaCancelEvent } from '../../events/cancel.js'; +import { WaFinishEvent } from '../../events/finish.js'; +import { WaStartEvent } from '../../events/start.js'; import { watch } from '../../internal/watch.js'; import componentStyles from '../../styles/component.styles.js'; import styles from './animation.styles.js'; @@ -102,13 +105,13 @@ export default class WaAnimation extends WebAwesomeElement { private handleAnimationFinish = () => { this.play = false; this.hasStarted = false; - this.emit('wa-finish'); + this.dispatchEvent(new WaFinishEvent()); }; private handleAnimationCancel = () => { this.play = false; this.hasStarted = false; - this.emit('wa-cancel'); + this.dispatchEvent(new WaCancelEvent()); }; private handleSlotChange() { @@ -143,7 +146,7 @@ export default class WaAnimation extends WebAwesomeElement { if (this.play) { this.hasStarted = true; - this.emit('wa-start'); + this.dispatchEvent(new WaStartEvent()); } else { this.animation.pause(); } @@ -185,7 +188,7 @@ export default class WaAnimation extends WebAwesomeElement { if (this.animation) { if (this.play && !this.hasStarted) { this.hasStarted = true; - this.emit('wa-start'); + this.dispatchEvent(new WaStartEvent()); } if (this.play) { diff --git a/src/components/button/button.ts b/src/components/button/button.ts index 85ea6a3c2..53f77b8e4 100644 --- a/src/components/button/button.ts +++ b/src/components/button/button.ts @@ -6,6 +6,9 @@ import { html, literal } from 'lit/static-html.js'; import { ifDefined } from 'lit/directives/if-defined.js'; import { LocalizeController } from '../../utilities/localize.js'; import { MirrorValidator } from '../../internal/validators/mirror-validator.js'; +import { WaBlurEvent } from '../../events/blur.js'; +import { WaFocusEvent } from '../../events/focus.js'; +import { WaInvalidEvent } from '../../events/invalid.js'; import { watch } from '../../internal/watch.js'; import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js'; import componentStyles from '../../styles/component.styles.js'; @@ -148,12 +151,12 @@ export default class WaButton extends WebAwesomeFormAssociatedElement { private handleBlur() { this.hasFocus = false; - this.emit('wa-blur'); + this.dispatchEvent(new WaBlurEvent()); } private handleFocus() { this.hasFocus = true; - this.emit('wa-focus'); + this.dispatchEvent(new WaFocusEvent()); } private handleClick() { @@ -193,7 +196,7 @@ export default class WaButton extends WebAwesomeFormAssociatedElement { } private handleInvalid() { - this.emit('wa-invalid'); + this.dispatchEvent(new WaInvalidEvent()); } private isButton() { diff --git a/src/components/carousel/carousel.ts b/src/components/carousel/carousel.ts index 2671b4c74..64f219464 100644 --- a/src/components/carousel/carousel.ts +++ b/src/components/carousel/carousel.ts @@ -11,6 +11,7 @@ import { map } from 'lit/directives/map.js'; import { prefersReducedMotion } from '../../internal/animate.js'; import { range } from 'lit/directives/range.js'; import { waitForEvent } from '../../internal/event.js'; +import { WaSlideChangeEvent } from '../../events/slide-change.js'; import { watch } from '../../internal/watch.js'; import componentStyles from '../../styles/component.styles.js'; import styles from './carousel.styles.js'; @@ -387,12 +388,12 @@ export default class WaCarousel extends WebAwesomeElement { // Do not emit an event on first render if (this.hasUpdated) { - this.emit('wa-slide-change', { - detail: { + this.dispatchEvent( + new WaSlideChangeEvent({ index: this.activeSlide, slide: slides[this.activeSlide] - } - }); + }) + ); } } diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts index a4422c218..b359ad517 100644 --- a/src/components/checkbox/checkbox.ts +++ b/src/components/checkbox/checkbox.ts @@ -6,6 +6,10 @@ import { html } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; import { live } from 'lit/directives/live.js'; import { RequiredValidator } from '../../internal/validators/required-validator.js'; +import { WaBlurEvent } from '../../events/blur.js'; +import { WaChangeEvent } from '../../events/change.js'; +import { WaFocusEvent } from '../../events/focus.js'; +import { WaInputEvent } from '../../events/input.js'; import { watch } from '../../internal/watch.js'; import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js'; import componentStyles from '../../styles/component.styles.js'; @@ -113,21 +117,21 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement { private handleClick() { this.checked = !this.checked; this.indeterminate = false; - this.emit('wa-change'); + this.dispatchEvent(new WaChangeEvent()); } private handleBlur() { this.hasFocus = false; - this.emit('wa-blur'); + this.dispatchEvent(new WaBlurEvent()); } private handleInput() { - this.emit('wa-input'); + this.dispatchEvent(new WaInputEvent()); } private handleFocus() { this.hasFocus = true; - this.emit('wa-focus'); + this.dispatchEvent(new WaFocusEvent()); } @watch('defaultChecked') diff --git a/src/components/color-picker/color-picker.ts b/src/components/color-picker/color-picker.ts index f54a08902..e3cdf6e57 100644 --- a/src/components/color-picker/color-picker.ts +++ b/src/components/color-picker/color-picker.ts @@ -14,13 +14,16 @@ import { LocalizeController } from '../../utilities/localize.js'; import { RequiredValidator } from '../../internal/validators/required-validator.js'; import { styleMap } from 'lit/directives/style-map.js'; import { TinyColor } from '@ctrl/tinycolor'; +import { WaBlurEvent } from '../../events/blur.js'; +import { WaChangeEvent } from '../../events/change.js'; +import { WaFocusEvent } from '../../events/focus.js'; +import { WaInputEvent } from '../../events/input.js'; +import { WaInvalidEvent } from '../../events/invalid.js'; import { watch } from '../../internal/watch.js'; import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js'; import componentStyles from '../../styles/component.styles.js'; import styles from './color-picker.styles.js'; import type { CSSResultGroup } from 'lit'; -import type { WaChangeEvent } from '../../events/wa-change.js'; -import type { WaInputEvent } from '../../events/wa-input.js'; import type WaDropdown from '../dropdown/dropdown.js'; import type WaInput from '../input/input.js'; @@ -218,12 +221,12 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement { private handleFocusIn = () => { this.hasFocus = true; - this.emit('wa-focus'); + this.dispatchEvent(new WaFocusEvent()); }; private handleFocusOut = () => { this.hasFocus = false; - this.emit('wa-blur'); + this.dispatchEvent(new WaBlurEvent()); }; private handleFormatToggle() { @@ -231,8 +234,8 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement { const nextIndex = (formats.indexOf(this.format) + 1) % formats.length; this.format = formats[nextIndex] as 'hex' | 'rgb' | 'hsl' | 'hsv'; this.setColor(this.value); - this.emit('wa-change'); - this.emit('wa-input'); + this.dispatchEvent(new WaChangeEvent()); + this.dispatchEvent(new WaInputEvent()); } private handleAlphaDrag(event: PointerEvent) { @@ -252,13 +255,13 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement { if (this.value !== currentValue) { currentValue = this.value; - this.emit('wa-input'); + this.dispatchEvent(new WaInputEvent()); } }, onStop: () => { if (this.value !== initialValue) { initialValue = this.value; - this.emit('wa-change'); + this.dispatchEvent(new WaChangeEvent()); } }, initialEvent: event @@ -282,13 +285,13 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement { if (this.value !== currentValue) { currentValue = this.value; - this.emit('wa-input'); + this.dispatchEvent(new WaInputEvent()); } }, onStop: () => { if (this.value !== initialValue) { initialValue = this.value; - this.emit('wa-change'); + this.dispatchEvent(new WaChangeEvent()); } }, initialEvent: event @@ -315,14 +318,14 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement { if (this.value !== currentValue) { currentValue = this.value; - this.emit('wa-input'); + this.dispatchEvent(new WaInputEvent()); } }, onStop: () => { this.isDraggingGridHandle = false; if (this.value !== initialValue) { initialValue = this.value; - this.emit('wa-change'); + this.dispatchEvent(new WaChangeEvent()); } }, initialEvent: event @@ -358,8 +361,8 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement { } if (this.value !== oldValue) { - this.emit('wa-change'); - this.emit('wa-input'); + this.dispatchEvent(new WaChangeEvent()); + this.dispatchEvent(new WaInputEvent()); } } @@ -392,8 +395,8 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement { } if (this.value !== oldValue) { - this.emit('wa-change'); - this.emit('wa-input'); + this.dispatchEvent(new WaChangeEvent()); + this.dispatchEvent(new WaInputEvent()); } } @@ -426,8 +429,8 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement { } if (this.value !== oldValue) { - this.emit('wa-change'); - this.emit('wa-input'); + this.dispatchEvent(new WaChangeEvent()); + this.dispatchEvent(new WaInputEvent()); } } @@ -446,8 +449,8 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement { } if (this.value !== oldValue) { - this.emit('wa-change'); - this.emit('wa-input'); + this.dispatchEvent(new WaChangeEvent()); + this.dispatchEvent(new WaInputEvent()); } } @@ -467,8 +470,8 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement { this.input.value = this.value; if (this.value !== oldValue) { - this.emit('wa-change'); - this.emit('wa-input'); + this.dispatchEvent(new WaChangeEvent()); + this.dispatchEvent(new WaInputEvent()); } setTimeout(() => this.input.select()); @@ -643,8 +646,8 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement { this.setColor(colorSelectionResult.sRGBHex); if (this.value !== oldValue) { - this.emit('wa-change'); - this.emit('wa-input'); + this.dispatchEvent(new WaChangeEvent()); + this.dispatchEvent(new WaInputEvent()); } }) .catch(() => { @@ -659,8 +662,8 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement { this.setColor(color); if (this.value !== oldValue) { - this.emit('wa-change'); - this.emit('wa-input'); + this.dispatchEvent(new WaChangeEvent()); + this.dispatchEvent(new WaInputEvent()); } } } @@ -785,7 +788,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement { if (!this.disabled) { // By standards we have to emit a `wa-invalid` event here synchronously. - this.emit('wa-invalid'); + this.dispatchEvent(new WaInvalidEvent()); } return false; diff --git a/src/components/copy-button/copy-button.ts b/src/components/copy-button/copy-button.ts index 0233e550a..dd1835c22 100644 --- a/src/components/copy-button/copy-button.ts +++ b/src/components/copy-button/copy-button.ts @@ -5,6 +5,8 @@ import { classMap } from 'lit/directives/class-map.js'; import { customElement, property, query, state } from 'lit/decorators.js'; import { html } from 'lit'; import { LocalizeController } from '../../utilities/localize.js'; +import { WaCopyEvent } from '../../events/copy.js'; +import { WaErrorEvent } from '../../events/error.js'; import componentStyles from '../../styles/component.styles.js'; import styles from './copy-button.styles.js'; import WebAwesomeElement from '../../internal/webawesome-element.js'; @@ -132,27 +134,23 @@ export default class WaCopyButton extends WebAwesomeElement { } else { // No target this.showStatus('error'); - this.emit('wa-error'); + this.dispatchEvent(new WaErrorEvent()); } } // No value if (!valueToCopy) { this.showStatus('error'); - this.emit('wa-error'); + this.dispatchEvent(new WaErrorEvent()); } else { try { await navigator.clipboard.writeText(valueToCopy); this.showStatus('success'); - this.emit('wa-copy', { - detail: { - value: valueToCopy - } - }); + this.dispatchEvent(new WaCopyEvent({ value: valueToCopy })); } catch (error) { // Rejected by browser this.showStatus('error'); - this.emit('wa-error'); + this.dispatchEvent(new WaErrorEvent()); } } } diff --git a/src/components/details/details.test.ts b/src/components/details/details.test.ts index b09e5095b..35157cc85 100644 --- a/src/components/details/details.test.ts +++ b/src/components/details/details.test.ts @@ -1,8 +1,8 @@ // cspell:dictionaries lorem-ipsum import { expect, fixture, html, waitUntil } from '@open-wc/testing'; import sinon from 'sinon'; -import type { WaHideEvent } from '../../events/wa-hide.js'; -import type { WaShowEvent } from '../../events/wa-show.js'; +import type { WaHideEvent } from '../../events/hide.js'; +import type { WaShowEvent } from '../../events/show.js'; import type WaDetails from './details.js'; describe('', () => { diff --git a/src/components/details/details.ts b/src/components/details/details.ts index 7fb04c08d..a755193e5 100644 --- a/src/components/details/details.ts +++ b/src/components/details/details.ts @@ -1,9 +1,13 @@ import '../icon/icon.js'; +import { animate, parseDuration, stopAnimations } from '../../internal/animate.js'; import { classMap } from 'lit/directives/class-map.js'; import { customElement, property, query } from 'lit/decorators.js'; import { html } from 'lit'; -import { parseDuration, stopAnimations } from '../../internal/animate.js'; +import { WaAfterHideEvent } from '../../events/after-hide.js'; +import { WaAfterShowEvent } from '../../events/after-show.js'; +import { WaHideEvent } from '../../events/hide.js'; import { waitForEvent } from '../../internal/event.js'; +import { WaShowEvent } from '../../events/show.js'; import { watch } from '../../internal/watch.js'; import componentStyles from '../../styles/component.styles.js'; import styles from './details.styles.js'; @@ -132,7 +136,8 @@ export default class WaDetails extends WebAwesomeElement { if (this.open) { this.details.open = true; // Show - const slShow = this.emit('wa-show', { cancelable: true }); + const slShow = new WaShowEvent(); + this.dispatchEvent(slShow); if (slShow.defaultPrevented) { this.open = false; this.details.open = false; @@ -142,7 +147,8 @@ export default class WaDetails extends WebAwesomeElement { await stopAnimations(this.body); const duration = parseDuration(getComputedStyle(this.body).getPropertyValue('--show-duration')); // We can't animate to 'auto', so use the scroll height for now - await this.body.animate( + await animate( + this.body, [ { height: '0', opacity: '0' }, { height: `${this.body.scrollHeight}px`, opacity: '1' } @@ -151,13 +157,14 @@ export default class WaDetails extends WebAwesomeElement { duration, easing: 'linear' } - ).finished; + ); this.body.style.height = 'auto'; - this.emit('wa-after-show'); + this.dispatchEvent(new WaAfterShowEvent()); } else { // Hide - const slHide = this.emit('wa-hide', { cancelable: true }); + const slHide = new WaHideEvent(); + this.dispatchEvent(slHide); if (slHide.defaultPrevented) { this.details.open = true; this.open = true; @@ -167,17 +174,18 @@ export default class WaDetails extends WebAwesomeElement { await stopAnimations(this.body); const duration = parseDuration(getComputedStyle(this.body).getPropertyValue('--hide-duration')); // We can't animate from 'auto', so use the scroll height for now - await this.body.animate( + await animate( + this.body, [ { height: `${this.body.scrollHeight}px`, opacity: '1' }, { height: '0', opacity: '0' } ], { duration, easing: 'linear' } - ).finished; + ); this.body.style.height = 'auto'; this.details.open = false; - this.emit('wa-after-hide'); + this.dispatchEvent(new WaAfterHideEvent()); } } diff --git a/src/components/dialog/dialog.ts b/src/components/dialog/dialog.ts index 5123976bc..e47a288d6 100644 --- a/src/components/dialog/dialog.ts +++ b/src/components/dialog/dialog.ts @@ -5,6 +5,11 @@ import { customElement, property, query } from 'lit/decorators.js'; import { html } from 'lit'; import { LocalizeController } from '../../utilities/localize.js'; import { lockBodyScrolling, unlockBodyScrolling } from '../../internal/scroll.js'; +import { WaAfterHideEvent } from '../../events/after-hide.js'; +import { WaAfterShowEvent } from '../../events/after-show.js'; +import { WaHideEvent } from '../../events/hide.js'; +import { WaRequestCloseEvent } from '../../events/request-close.js'; +import { WaShowEvent } from '../../events/show.js'; import { watch } from '../../internal/watch.js'; import componentStyles from '../../styles/component.styles.js'; import styles from './dialog.styles.js'; @@ -95,17 +100,15 @@ export default class WaDialog extends WebAwesomeElement { } private async requestClose(source: Element) { - const waRequestClose = this.emit('wa-request-close', { - cancelable: true, - detail: { source } - }); + const waRequestClose = new WaRequestCloseEvent({ source }); + this.dispatchEvent(waRequestClose); if (waRequestClose.defaultPrevented) { this.open = true; animateWithClass(this.dialog, 'pulse'); } else { // Hide - this.emit('wa-hide'); + this.dispatchEvent(new WaHideEvent()); this.removeOpenListeners(); await animateWithClass(this.dialog, 'hide'); @@ -120,7 +123,7 @@ export default class WaDialog extends WebAwesomeElement { setTimeout(() => trigger.focus()); } - this.emit('wa-after-hide'); + this.dispatchEvent(new WaAfterHideEvent()); } } @@ -193,7 +196,7 @@ export default class WaDialog extends WebAwesomeElement { /** Shows the dialog. */ private async show() { // Show - this.emit('wa-show'); + this.dispatchEvent(new WaShowEvent()); this.addOpenListeners(); this.originalTrigger = document.activeElement as HTMLElement; this.open = true; @@ -211,7 +214,7 @@ export default class WaDialog extends WebAwesomeElement { await animateWithClass(this.dialog, 'show'); - this.emit('wa-after-show'); + this.dispatchEvent(new WaAfterShowEvent()); } render() { diff --git a/src/components/drawer/drawer.ts b/src/components/drawer/drawer.ts index ef0dbe4fe..8047ec8a0 100644 --- a/src/components/drawer/drawer.ts +++ b/src/components/drawer/drawer.ts @@ -5,6 +5,11 @@ import { customElement, property, query } from 'lit/decorators.js'; import { html } from 'lit'; import { LocalizeController } from '../../utilities/localize.js'; import { lockBodyScrolling, unlockBodyScrolling } from '../../internal/scroll.js'; +import { WaAfterHideEvent } from '../../events/after-hide.js'; +import { WaAfterShowEvent } from '../../events/after-show.js'; +import { WaHideEvent } from '../../events/hide.js'; +import { WaRequestCloseEvent } from '../../events/request-close.js'; +import { WaShowEvent } from '../../events/show.js'; import { watch } from '../../internal/watch.js'; import componentStyles from '../../styles/component.styles.js'; import styles from './drawer.styles.js'; @@ -103,17 +108,15 @@ export default class WaDrawer extends WebAwesomeElement { } private async requestClose(source: Element) { - const waRequestClose = this.emit('wa-request-close', { - cancelable: true, - detail: { source } - }); + const waRequestClose = new WaRequestCloseEvent({ source }); + this.dispatchEvent(waRequestClose); if (waRequestClose.defaultPrevented) { this.open = true; animateWithClass(this.drawer, 'pulse'); } else { // Hide - this.emit('wa-hide'); + this.dispatchEvent(new WaHideEvent()); this.removeOpenListeners(); await animateWithClass(this.drawer, 'hide'); @@ -128,7 +131,7 @@ export default class WaDrawer extends WebAwesomeElement { setTimeout(() => trigger.focus()); } - this.emit('wa-after-hide'); + this.dispatchEvent(new WaAfterHideEvent()); } } @@ -201,7 +204,7 @@ export default class WaDrawer extends WebAwesomeElement { /** Shows the drawer. */ private async show() { // Show - this.emit('wa-show'); + this.dispatchEvent(new WaShowEvent()); this.addOpenListeners(); this.originalTrigger = document.activeElement as HTMLElement; this.open = true; @@ -219,7 +222,7 @@ export default class WaDrawer extends WebAwesomeElement { await animateWithClass(this.drawer, 'show'); - this.emit('wa-after-show'); + this.dispatchEvent(new WaAfterShowEvent()); } render() { diff --git a/src/components/dropdown/dropdown.ts b/src/components/dropdown/dropdown.ts index 2c3c16527..6c8f34ab0 100644 --- a/src/components/dropdown/dropdown.ts +++ b/src/components/dropdown/dropdown.ts @@ -4,13 +4,17 @@ import { classMap } from 'lit/directives/class-map.js'; import { customElement, property, query } from 'lit/decorators.js'; import { html } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; +import { WaAfterHideEvent } from '../../events/after-hide.js'; +import { WaAfterShowEvent } from '../../events/after-show.js'; +import { WaHideEvent } from '../../events/hide.js'; import { waitForEvent } from '../../internal/event.js'; +import { WaShowEvent } from '../../events/show.js'; import { watch } from '../../internal/watch.js'; import componentStyles from '../../styles/component.styles.js'; import styles from './dropdown.styles.js'; import WebAwesomeElement from '../../internal/webawesome-element.js'; import type { CSSResultGroup } from 'lit'; -import type { WaSelectEvent } from '../../events/wa-select.js'; +import type { WaSelectEvent } from '../../events/select.js'; import type WaButton from '../button/button.js'; import type WaIconButton from '../icon-button/icon-button.js'; import type WaMenu from '../menu/menu.js'; @@ -361,24 +365,24 @@ export default class WaDropdown extends WebAwesomeElement { if (this.open) { // Show - this.emit('wa-show'); + this.dispatchEvent(new WaShowEvent()); this.addOpenListeners(); this.panel.hidden = false; this.popup.active = true; await animateWithClass(this.popup.popup, 'show-with-scale'); - this.emit('wa-after-show'); + this.dispatchEvent(new WaAfterShowEvent()); } else { // Hide - this.emit('wa-hide'); + this.dispatchEvent(new WaHideEvent()); this.removeOpenListeners(); await animateWithClass(this.popup.popup, 'hide-with-scale'); this.panel.hidden = true; this.popup.active = false; - this.emit('wa-after-hide'); + this.dispatchEvent(new WaAfterHideEvent()); } } diff --git a/src/components/icon-button/icon-button.ts b/src/components/icon-button/icon-button.ts index 9d6fc010d..f9c368dd0 100644 --- a/src/components/icon-button/icon-button.ts +++ b/src/components/icon-button/icon-button.ts @@ -3,6 +3,8 @@ import { classMap } from 'lit/directives/class-map.js'; import { customElement, property, query, state } from 'lit/decorators.js'; import { html, literal } from 'lit/static-html.js'; import { ifDefined } from 'lit/directives/if-defined.js'; +import { WaBlurEvent } from '../../events/blur.js'; +import { WaFocusEvent } from '../../events/focus.js'; import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js'; import componentStyles from '../../styles/component.styles.js'; import styles from './icon-button.styles.js'; @@ -73,12 +75,12 @@ export default class WaIconButton extends WebAwesomeFormAssociatedElement { private handleBlur() { this.hasFocus = false; - this.emit('wa-blur'); + this.dispatchEvent(new WaBlurEvent()); } private handleFocus() { this.hasFocus = true; - this.emit('wa-focus'); + this.dispatchEvent(new WaFocusEvent()); } private handleClick(event: MouseEvent) { diff --git a/src/components/icon/icon.test.ts b/src/components/icon/icon.test.ts index 57d1e1c63..9d7f3c21d 100644 --- a/src/components/icon/icon.test.ts +++ b/src/components/icon/icon.test.ts @@ -1,7 +1,7 @@ import { aTimeout, elementUpdated, expect, fixture, html, oneEvent } from '@open-wc/testing'; import { registerIconLibrary } from '../../../dist/webawesome.js'; -import type { WaErrorEvent } from '../../events/wa-error.js'; -import type { WaLoadEvent } from '../../events/wa-load.js'; +import type { WaErrorEvent } from '../../events/error.js'; +import type { WaLoadEvent } from '../../events/load.js'; import type WaIcon from './icon.js'; const testLibraryIcons = { diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts index b7d62539d..8faf5dc08 100644 --- a/src/components/icon/icon.ts +++ b/src/components/icon/icon.ts @@ -2,6 +2,8 @@ import { customElement, property, state } from 'lit/decorators.js'; import { getIconLibrary, type IconLibrary, unwatchIcon, watchIcon } from './library.js'; import { html } from 'lit'; import { isTemplateResult } from 'lit/directive-helpers.js'; +import { WaErrorEvent } from '../../events/error.js'; +import { WaLoadEvent } from '../../events/load.js'; import { watch } from '../../internal/watch.js'; import componentStyles from '../../styles/component.styles.js'; import styles from './icon.styles.js'; @@ -206,12 +208,12 @@ export default class WaIcon extends WebAwesomeElement { case RETRYABLE_ERROR: case CACHEABLE_ERROR: this.svg = null; - this.emit('wa-error'); + this.dispatchEvent(new WaErrorEvent()); break; default: this.svg = svg.cloneNode(true) as SVGElement; library?.mutator?.(this.svg); - this.emit('wa-load'); + this.dispatchEvent(new WaLoadEvent()); } } diff --git a/src/components/image-comparer/image-comparer.ts b/src/components/image-comparer/image-comparer.ts index 941c9781c..9f3467ec3 100644 --- a/src/components/image-comparer/image-comparer.ts +++ b/src/components/image-comparer/image-comparer.ts @@ -5,6 +5,7 @@ import { customElement, property, query } from 'lit/decorators.js'; import { drag } from '../../internal/drag.js'; import { html } from 'lit'; import { styleMap } from 'lit/directives/style-map.js'; +import { WaChangeEvent } from '../../events/change.js'; import { watch } from '../../internal/watch.js'; import componentStyles from '../../styles/component.styles.js'; import styles from './image-comparer.styles.js'; @@ -89,7 +90,7 @@ export default class WaImageComparer extends WebAwesomeElement { @watch('position', { waitUntilFirstUpdate: true }) handlePositionChange() { - this.emit('wa-change'); + this.dispatchEvent(new WaChangeEvent()); } render() { diff --git a/src/components/include/include.test.ts b/src/components/include/include.test.ts index acd165635..33611d6ac 100644 --- a/src/components/include/include.test.ts +++ b/src/components/include/include.test.ts @@ -48,7 +48,7 @@ describe('', () => { expect(loadHandler).to.have.been.calledOnce; }); - it('should emit wa-error when content cannot be loaded', async () => { + it('should emit wa-include-error when content cannot be loaded', async () => { sinon.stub(window, 'fetch').resolves({ ...stubbedFetchResponse, ok: false, @@ -58,7 +58,7 @@ describe('', () => { const el = await fixture(html` `); const loadHandler = sinon.spy(); - el.addEventListener('wa-error', loadHandler); + el.addEventListener('wa-include-error', loadHandler); await waitUntil(() => loadHandler.calledOnce); expect(loadHandler).to.have.been.calledOnce; diff --git a/src/components/include/include.ts b/src/components/include/include.ts index 36ab62140..fe789a3f6 100644 --- a/src/components/include/include.ts +++ b/src/components/include/include.ts @@ -1,6 +1,8 @@ import { customElement, property } from 'lit/decorators.js'; import { html } from 'lit'; import { requestInclude } from './request.js'; +import { WaIncludeErrorEvent } from '../../events/include-error.js'; +import { WaLoadEvent } from '../../events/load.js'; import { watch } from '../../internal/watch.js'; import componentStyles from '../../styles/component.styles.js'; import styles from './include.styles.js'; @@ -55,7 +57,7 @@ export default class WaInclude extends WebAwesomeElement { } if (!file.ok) { - this.emit('wa-error', { detail: { status: file.status } }); + this.dispatchEvent(new WaIncludeErrorEvent({ status: file.status })); return; } @@ -65,9 +67,9 @@ export default class WaInclude extends WebAwesomeElement { [...this.querySelectorAll('script')].forEach(script => this.executeScript(script)); } - this.emit('wa-load'); + this.dispatchEvent(new WaLoadEvent()); } catch { - this.emit('wa-error', { detail: { status: -1 } }); + this.dispatchEvent(new WaIncludeErrorEvent({ status: -1 })); } } diff --git a/src/components/input/input.ts b/src/components/input/input.ts index eba75a2bd..582e1394c 100644 --- a/src/components/input/input.ts +++ b/src/components/input/input.ts @@ -7,6 +7,11 @@ import { ifDefined } from 'lit/directives/if-defined.js'; import { live } from 'lit/directives/live.js'; import { LocalizeController } from '../../utilities/localize.js'; import { MirrorValidator } from '../../internal/validators/mirror-validator.js'; +import { WaBlurEvent } from '../../events/blur.js'; +import { WaChangeEvent } from '../../events/change.js'; +import { WaClearEvent } from '../../events/clear.js'; +import { WaFocusEvent } from '../../events/focus.js'; +import { WaInputEvent } from '../../events/input.js'; import { watch } from '../../internal/watch.js'; import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js'; import componentStyles from '../../styles/component.styles.js'; @@ -240,12 +245,12 @@ export default class WaInput extends WebAwesomeFormAssociatedElement { private handleBlur() { this.hasFocus = false; - this.emit('wa-blur'); + this.dispatchEvent(new WaBlurEvent()); } private handleChange() { this.value = this.input.value; - this.emit('wa-change'); + this.dispatchEvent(new WaChangeEvent()); } private handleClearClick(event: MouseEvent) { @@ -253,9 +258,9 @@ export default class WaInput extends WebAwesomeFormAssociatedElement { if (this.value !== '') { this.value = ''; - this.emit('wa-clear'); - this.emit('wa-input'); - this.emit('wa-change'); + this.dispatchEvent(new WaClearEvent()); + this.dispatchEvent(new WaInputEvent()); + this.dispatchEvent(new WaChangeEvent()); } this.input.focus(); @@ -263,12 +268,12 @@ export default class WaInput extends WebAwesomeFormAssociatedElement { private handleFocus() { this.hasFocus = true; - this.emit('wa-focus'); + this.dispatchEvent(new WaFocusEvent()); } private handleInput() { this.value = this.input.value; - this.emit('wa-input'); + this.dispatchEvent(new WaInputEvent()); } private handleKeyDown(event: KeyboardEvent) { diff --git a/src/components/menu-item/menu-item.test.ts b/src/components/menu-item/menu-item.test.ts index 14afbeebb..8ec838031 100644 --- a/src/components/menu-item/menu-item.test.ts +++ b/src/components/menu-item/menu-item.test.ts @@ -1,7 +1,7 @@ import { expect, fixture, html, waitUntil } from '@open-wc/testing'; import { sendKeys } from '@web/test-runner-commands'; import sinon from 'sinon'; -import type { WaSelectEvent } from '../../events/wa-select.js'; +import type { WaSelectEvent } from '../../events/select.js'; import type WaMenuItem from './menu-item.js'; describe('', () => { diff --git a/src/components/menu-item/menu-item.ts b/src/components/menu-item/menu-item.ts index f125cfa98..aac1c4b21 100644 --- a/src/components/menu-item/menu-item.ts +++ b/src/components/menu-item/menu-item.ts @@ -87,7 +87,8 @@ export default class WaMenuItem extends WebAwesomeElement { // When the label changes, emit a slotchange event so parent controls see it if (textLabel !== this.cachedTextLabel) { this.cachedTextLabel = textLabel; - this.emit('slotchange', { bubbles: true, composed: false, cancelable: false }); + /** @internal - prevent the CEM from recording this event */ + this.dispatchEvent(new Event('slotchange', { bubbles: true, composed: false, cancelable: false })); } } diff --git a/src/components/menu/menu.test.ts b/src/components/menu/menu.test.ts index 538088e3b..d89ec1291 100644 --- a/src/components/menu/menu.test.ts +++ b/src/components/menu/menu.test.ts @@ -3,7 +3,7 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit'; import { sendKeys } from '@web/test-runner-commands'; import sinon from 'sinon'; -import type { WaSelectEvent } from '../../events/wa-select.js'; +import type { WaSelectEvent } from '../../events/select.js'; import type WaMenu from './menu.js'; describe('', () => { diff --git a/src/components/menu/menu.ts b/src/components/menu/menu.ts index 3e15329c4..922e1f9ca 100644 --- a/src/components/menu/menu.ts +++ b/src/components/menu/menu.ts @@ -1,6 +1,7 @@ import '../menu-item/menu-item.js'; import { customElement, query } from 'lit/decorators.js'; import { html } from 'lit'; +import { WaSelectEvent } from '../../events/select.js'; import componentStyles from '../../styles/component.styles.js'; import styles from './menu.styles.js'; import WebAwesomeElement from '../../internal/webawesome-element.js'; @@ -48,7 +49,7 @@ export default class WaMenu extends WebAwesomeElement { item.checked = !item.checked; } - this.emit('wa-select', { detail: { item } }); + this.dispatchEvent(new WaSelectEvent({ item })); } private handleKeyDown(event: KeyboardEvent) { diff --git a/src/components/mutation-observer/mutation-observer.ts b/src/components/mutation-observer/mutation-observer.ts index b78afa0f5..485741acd 100644 --- a/src/components/mutation-observer/mutation-observer.ts +++ b/src/components/mutation-observer/mutation-observer.ts @@ -1,5 +1,6 @@ import { customElement, property } from 'lit/decorators.js'; import { html } from 'lit'; +import { WaMutationEvent } from '../../events/mutation.js'; import { watch } from '../../internal/watch.js'; import componentStyles from '../../styles/component.styles.js'; import styles from './mutation-observer.styles.js'; @@ -59,9 +60,7 @@ export default class WaMutationObserver extends WebAwesomeElement { } private handleMutation = (mutationList: MutationRecord[]) => { - this.emit('wa-mutation', { - detail: { mutationList } - }); + this.dispatchEvent(new WaMutationEvent({ mutationList })); }; private startObserver() { diff --git a/src/components/option/option.ts b/src/components/option/option.ts index 367f0e71a..e59ec6f1f 100644 --- a/src/components/option/option.ts +++ b/src/components/option/option.ts @@ -69,7 +69,8 @@ export default class WaOption extends WebAwesomeElement { // When the label changes, emit a slotchange event so parent controls see it if (textLabel !== this.cachedTextLabel) { this.cachedTextLabel = textLabel; - this.emit('slotchange', { bubbles: true, composed: false, cancelable: false }); + /** @internal - prevent the CEM from recording this event */ + this.dispatchEvent(new Event('slotchange', { bubbles: true, composed: false, cancelable: false })); } } diff --git a/src/components/popup/popup.ts b/src/components/popup/popup.ts index 704028712..ba6adb52e 100644 --- a/src/components/popup/popup.ts +++ b/src/components/popup/popup.ts @@ -3,6 +3,7 @@ import { classMap } from 'lit/directives/class-map.js'; import { customElement, property, query } from 'lit/decorators.js'; import { html } from 'lit'; import { offsetParent } from 'composed-offset-position'; +import { WaRepositionEvent } from '../../events/reposition.js'; import componentStyles from '../../styles/component.styles.js'; import styles from './popup.styles.js'; import WebAwesomeElement from '../../internal/webawesome-element.js'; @@ -470,7 +471,7 @@ export default class WaPopup extends WebAwesomeElement { // Wait until the new position is drawn before updating the hover bridge, otherwise it can get out of sync requestAnimationFrame(() => this.updateHoverBridge()); - this.emit('wa-reposition'); + this.dispatchEvent(new WaRepositionEvent()); } private updateHoverBridge = () => { diff --git a/src/components/radio-button/radio-button.ts b/src/components/radio-button/radio-button.ts index 88c06cc61..d2e0bd11a 100644 --- a/src/components/radio-button/radio-button.ts +++ b/src/components/radio-button/radio-button.ts @@ -3,6 +3,8 @@ import { customElement, property, query, state } from 'lit/decorators.js'; import { HasSlotController } from '../../internal/slot.js'; import { html } from 'lit/static-html.js'; import { ifDefined } from 'lit/directives/if-defined.js'; +import { WaBlurEvent } from '../../events/blur.js'; +import { WaFocusEvent } from '../../events/focus.js'; import { watch } from '../../internal/watch.js'; import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js'; import componentStyles from '../../styles/component.styles.js'; @@ -76,7 +78,7 @@ export default class WaRadioButton extends WebAwesomeFormAssociatedElement { private handleBlur() { this.hasFocus = false; - this.emit('wa-blur'); + this.dispatchEvent(new WaBlurEvent()); } private handleClick(e: MouseEvent) { @@ -91,7 +93,7 @@ export default class WaRadioButton extends WebAwesomeFormAssociatedElement { private handleFocus() { this.hasFocus = true; - this.emit('wa-focus'); + this.dispatchEvent(new WaFocusEvent()); } @watch('disabled', { waitUntilFirstUpdate: true }) diff --git a/src/components/radio-group/radio-group.test.ts b/src/components/radio-group/radio-group.test.ts index ffe28ccd0..1db697f52 100644 --- a/src/components/radio-group/radio-group.test.ts +++ b/src/components/radio-group/radio-group.test.ts @@ -3,7 +3,7 @@ import { clickOnElement } from '../../internal/test.js'; import { runFormControlBaseTests } from '../../internal/test/form-control-base-tests.js'; import { sendKeys } from '@web/test-runner-commands'; import sinon from 'sinon'; -import type { WaChangeEvent } from '../../events/wa-change.js'; +import type { WaChangeEvent } from '../../events/change.js'; import type WaRadio from '../radio/radio.js'; import type WaRadioGroup from './radio-group.js'; diff --git a/src/components/radio-group/radio-group.ts b/src/components/radio-group/radio-group.ts index 6d6461341..9b5d0c7be 100644 --- a/src/components/radio-group/radio-group.ts +++ b/src/components/radio-group/radio-group.ts @@ -6,6 +6,8 @@ import { HasSlotController } from '../../internal/slot.js'; import { html } from 'lit'; import { RequiredValidator } from '../../internal/validators/required-validator.js'; import { uniqueId } from '../../internal/math.js'; +import { WaChangeEvent } from '../../events/change.js'; +import { WaInputEvent } from '../../events/input.js'; import { watch } from '../../internal/watch.js'; import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js'; import componentStyles from '../../styles/component.styles.js'; @@ -123,8 +125,8 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement { } if (this.value !== oldValue) { - this.emit('wa-change'); - this.emit('wa-input'); + this.dispatchEvent(new WaChangeEvent()); + this.dispatchEvent(new WaInputEvent()); } }; @@ -259,8 +261,8 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement { } if (this.value !== oldValue) { - this.emit('wa-change'); - this.emit('wa-input'); + this.dispatchEvent(new WaChangeEvent()); + this.dispatchEvent(new WaInputEvent()); } event.preventDefault(); diff --git a/src/components/radio/radio.ts b/src/components/radio/radio.ts index d79113315..de3b0eabe 100644 --- a/src/components/radio/radio.ts +++ b/src/components/radio/radio.ts @@ -2,6 +2,8 @@ import '../icon/icon.js'; import { classMap } from 'lit/directives/class-map.js'; import { customElement, property, state } from 'lit/decorators.js'; import { html } from 'lit'; +import { WaBlurEvent } from '../../events/blur.js'; +import { WaFocusEvent } from '../../events/focus.js'; import { watch } from '../../internal/watch.js'; import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js'; import componentStyles from '../../styles/component.styles.js'; @@ -76,12 +78,12 @@ export default class WaRadio extends WebAwesomeFormAssociatedElement { private handleBlur = () => { this.hasFocus = false; - this.emit('wa-blur'); + this.dispatchEvent(new WaBlurEvent()); }; private handleFocus = () => { this.hasFocus = true; - this.emit('wa-focus'); + this.dispatchEvent(new WaFocusEvent()); }; private setInitialAttributes() { diff --git a/src/components/range/range.ts b/src/components/range/range.ts index d9fd83615..03fc0a989 100644 --- a/src/components/range/range.ts +++ b/src/components/range/range.ts @@ -6,6 +6,10 @@ import { ifDefined } from 'lit/directives/if-defined.js'; import { live } from 'lit/directives/live.js'; import { LocalizeController } from '../../utilities/localize.js'; import { MirrorValidator } from '../../internal/validators/mirror-validator.js'; +import { WaBlurEvent } from '../../events/blur.js'; +import { WaChangeEvent } from '../../events/change.js'; +import { WaFocusEvent } from '../../events/focus.js'; +import { WaInputEvent } from '../../events/input.js'; import { watch } from '../../internal/watch.js'; import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js'; import componentStyles from '../../styles/component.styles.js'; @@ -128,25 +132,25 @@ export default class WaRange extends WebAwesomeFormAssociatedElement { } private handleChange() { - this.emit('wa-change'); + this.dispatchEvent(new WaChangeEvent()); } private handleInput() { this.value = parseFloat(this.input.value); - this.emit('wa-input'); + this.dispatchEvent(new WaInputEvent()); this.syncRange(); } private handleBlur() { this.hasFocus = false; this.hasTooltip = false; - this.emit('wa-blur'); + this.dispatchEvent(new WaBlurEvent()); } private handleFocus() { this.hasFocus = true; this.hasTooltip = true; - this.emit('wa-focus'); + this.dispatchEvent(new WaFocusEvent()); } @eventOptions({ passive: true }) diff --git a/src/components/rating/rating.ts b/src/components/rating/rating.ts index 9976a9a4d..1ad897c85 100644 --- a/src/components/rating/rating.ts +++ b/src/components/rating/rating.ts @@ -5,6 +5,8 @@ import { customElement, eventOptions, property, query, state } from 'lit/decorat import { html } from 'lit'; import { styleMap } from 'lit/directives/style-map.js'; import { unsafeHTML } from 'lit/directives/unsafe-html.js'; +import { WaChangeEvent } from '../../events/change.js'; +import { WaHoverEvent } from '../../events/hover.js'; import { watch } from '../../internal/watch.js'; import componentStyles from '../../styles/component.styles.js'; import styles from './rating.styles.js'; @@ -93,7 +95,7 @@ export default class WaRating extends WebAwesomeElement { } this.setValue(this.getValueFromMousePosition(event)); - this.emit('wa-change'); + this.dispatchEvent(new WaChangeEvent()); } private setValue(newValue: number) { @@ -137,7 +139,7 @@ export default class WaRating extends WebAwesomeElement { } if (this.value !== oldValue) { - this.emit('wa-change'); + this.dispatchEvent(new WaChangeEvent()); } } @@ -170,7 +172,7 @@ export default class WaRating extends WebAwesomeElement { private handleTouchEnd(event: TouchEvent) { this.isHovering = false; this.setValue(this.hoverValue); - this.emit('wa-change'); + this.dispatchEvent(new WaChangeEvent()); // Prevent click on mobile devices event.preventDefault(); @@ -183,22 +185,22 @@ export default class WaRating extends WebAwesomeElement { @watch('hoverValue') handleHoverValueChange() { - this.emit('wa-hover', { - detail: { + this.dispatchEvent( + new WaHoverEvent({ phase: 'move', value: this.hoverValue - } - }); + }) + ); } @watch('isHovering') handleIsHoveringChange() { - this.emit('wa-hover', { - detail: { + this.dispatchEvent( + new WaHoverEvent({ phase: this.isHovering ? 'start' : 'end', value: this.hoverValue - } - }); + }) + ); } /** Sets focus on the rating. */ diff --git a/src/components/resize-observer/resize-observer.ts b/src/components/resize-observer/resize-observer.ts index c432d97ff..219d45e9c 100644 --- a/src/components/resize-observer/resize-observer.ts +++ b/src/components/resize-observer/resize-observer.ts @@ -1,5 +1,6 @@ import { customElement, property } from 'lit/decorators.js'; import { html } from 'lit'; +import { WaResizeEvent } from '../../events/resize.js'; import { watch } from '../../internal/watch.js'; import componentStyles from '../../styles/component.styles.js'; import styles from './resize-observer.styles.js'; @@ -29,7 +30,7 @@ export default class WaResizeObserver extends WebAwesomeElement { connectedCallback() { super.connectedCallback(); this.resizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => { - this.emit('wa-resize', { detail: { entries } }); + this.dispatchEvent(new WaResizeEvent({ entries })); }); if (!this.disabled) { diff --git a/src/components/select/select.ts b/src/components/select/select.ts index f61459837..8b361cd9d 100644 --- a/src/components/select/select.ts +++ b/src/components/select/select.ts @@ -10,14 +10,23 @@ import { LocalizeController } from '../../utilities/localize.js'; import { RequiredValidator } from '../../internal/validators/required-validator.js'; import { scrollIntoView } from '../../internal/scroll.js'; import { unsafeHTML } from 'lit/directives/unsafe-html.js'; +import { WaAfterHideEvent } from '../../events/after-hide.js'; +import { WaAfterShowEvent } from '../../events/after-show.js'; +import { WaBlurEvent } from '../../events/blur.js'; +import { WaChangeEvent } from '../../events/change.js'; +import { WaClearEvent } from '../../events/clear.js'; +import { WaFocusEvent } from '../../events/focus.js'; +import { WaHideEvent } from '../../events/hide.js'; +import { WaInputEvent } from '../../events/input.js'; import { waitForEvent } from '../../internal/event.js'; +import { WaShowEvent } from '../../events/show.js'; import { watch } from '../../internal/watch.js'; import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js'; import componentStyles from '../../styles/component.styles.js'; import formControlStyles from '../../styles/form-control.styles.js'; import styles from './select.styles.js'; import type { CSSResultGroup, TemplateResult } from 'lit'; -import type { WaRemoveEvent } from '../../events/wa-remove.js'; +import type { WaRemoveEvent } from '../../events/remove.js'; import type WaOption from '../option/option.js'; import type WaPopup from '../popup/popup.js'; @@ -290,12 +299,12 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement { private handleFocus() { this.hasFocus = true; this.displayInput.setSelectionRange(0, 0); - this.emit('wa-focus'); + this.dispatchEvent(new WaFocusEvent()); } private handleBlur() { this.hasFocus = false; - this.emit('wa-blur'); + this.dispatchEvent(new WaBlurEvent()); } private handleDocumentFocusIn = (event: KeyboardEvent) => { @@ -346,8 +355,8 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement { // Emit after updating this.updateComplete.then(() => { - this.emit('wa-input'); - this.emit('wa-change'); + this.dispatchEvent(new WaInputEvent()); + this.dispatchEvent(new WaChangeEvent()); }); if (!this.multiple) { @@ -475,9 +484,9 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement { // Emit after update this.updateComplete.then(() => { - this.emit('wa-clear'); - this.emit('wa-input'); - this.emit('wa-change'); + this.dispatchEvent(new WaClearEvent()); + this.dispatchEvent(new WaInputEvent()); + this.dispatchEvent(new WaChangeEvent()); }); } } @@ -506,8 +515,8 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement { if (this.value !== oldValue) { // Emit after updating this.updateComplete.then(() => { - this.emit('wa-input'); - this.emit('wa-change'); + this.dispatchEvent(new WaInputEvent()); + this.dispatchEvent(new WaChangeEvent()); }); } @@ -543,8 +552,8 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement { // Emit after updating this.updateComplete.then(() => { - this.emit('wa-input'); - this.emit('wa-change'); + this.dispatchEvent(new WaInputEvent()); + this.dispatchEvent(new WaChangeEvent()); }); } } @@ -675,7 +684,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement { this.setCurrentOption(this.selectedOptions[0] || this.getFirstOption()); // Show - this.emit('wa-show'); + this.dispatchEvent(new WaShowEvent()); this.addOpenListeners(); this.listbox.hidden = false; @@ -693,17 +702,17 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement { scrollIntoView(this.currentOption, this.listbox, 'vertical', 'auto'); } - this.emit('wa-after-show'); + this.dispatchEvent(new WaAfterShowEvent()); } else { // Hide - this.emit('wa-hide'); + this.dispatchEvent(new WaHideEvent()); this.removeOpenListeners(); await animateWithClass(this.popup.popup, 'hide'); this.listbox.hidden = true; this.popup.active = false; - this.emit('wa-after-hide'); + this.dispatchEvent(new WaAfterHideEvent()); } } diff --git a/src/components/split-panel/split-panel.ts b/src/components/split-panel/split-panel.ts index 8f28c4efe..896d29d2a 100644 --- a/src/components/split-panel/split-panel.ts +++ b/src/components/split-panel/split-panel.ts @@ -4,6 +4,7 @@ import { drag } from '../../internal/drag.js'; import { html } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; import { LocalizeController } from '../../utilities/localize.js'; +import { WaRepositionEvent } from '../../events/reposition.js'; import { watch } from '../../internal/watch.js'; import componentStyles from '../../styles/component.styles.js'; import styles from './split-panel.styles.js'; @@ -208,7 +209,7 @@ export default class WaSplitPanel extends WebAwesomeElement { handlePositionChange() { this.cachedPositionInPixels = this.percentageToPixels(this.position); this.positionInPixels = this.percentageToPixels(this.position); - this.emit('wa-reposition'); + this.dispatchEvent(new WaRepositionEvent()); } @watch('positionInPixels') diff --git a/src/components/switch/switch.test.ts b/src/components/switch/switch.test.ts index 9a10d3a6e..3536b16c7 100644 --- a/src/components/switch/switch.test.ts +++ b/src/components/switch/switch.test.ts @@ -183,11 +183,11 @@ describe('', async () => { `); const button = form.querySelector('wa-button')!; - const slSwitch = form.querySelector('wa-switch')!; + const waSwitch = form.querySelector('wa-switch')!; const submitHandler = sinon.spy((event: SubmitEvent) => event.preventDefault()); // Submitting the form after setting custom validity should not trigger the handler - slSwitch.setCustomValidity('Invalid selection'); + waSwitch.setCustomValidity('Invalid selection'); form.addEventListener('submit', submitHandler); button.click(); await aTimeout(100); @@ -196,13 +196,13 @@ describe('', async () => { }); it('should be invalid when required and unchecked', async () => { - const slSwitch = await fixture(html` `); - expect(slSwitch.checkValidity()).to.be.false; + const waSwitch = await fixture(html` `); + expect(waSwitch.checkValidity()).to.be.false; }); it('should be valid when required and checked', async () => { - const slSwitch = await fixture(html` `); - expect(slSwitch.checkValidity()).to.be.true; + const waSwitch = await fixture(html` `); + expect(waSwitch.checkValidity()).to.be.true; }); it('should be present in form data when using the form attribute and located outside of a
', async () => { @@ -222,14 +222,14 @@ describe('', async () => { it('should receive validation attributes ("states") even when novalidate is used on the parent form', async () => { const el = await fixture(html` `); - const slSwitch = el.querySelector('wa-switch')!; + const waSwitch = el.querySelector('wa-switch')!; - expect(slSwitch.hasAttribute('data-wa-required')).to.be.true; - expect(slSwitch.hasAttribute('data-wa-optional')).to.be.false; - expect(slSwitch.hasAttribute('data-wa-invalid')).to.be.true; - expect(slSwitch.hasAttribute('data-wa-valid')).to.be.false; - expect(slSwitch.hasAttribute('data-wa-user-invalid')).to.be.false; - expect(slSwitch.hasAttribute('data-wa-user-valid')).to.be.false; + expect(waSwitch.hasAttribute('data-wa-required')).to.be.true; + expect(waSwitch.hasAttribute('data-wa-optional')).to.be.false; + expect(waSwitch.hasAttribute('data-wa-invalid')).to.be.true; + expect(waSwitch.hasAttribute('data-wa-valid')).to.be.false; + expect(waSwitch.hasAttribute('data-wa-user-invalid')).to.be.false; + expect(waSwitch.hasAttribute('data-wa-user-valid')).to.be.false; }); }); diff --git a/src/components/switch/switch.ts b/src/components/switch/switch.ts index 89683dab0..f0c88b114 100644 --- a/src/components/switch/switch.ts +++ b/src/components/switch/switch.ts @@ -5,6 +5,10 @@ import { html } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; import { live } from 'lit/directives/live.js'; import { MirrorValidator } from '../../internal/validators/mirror-validator.js'; +import { WaBlurEvent } from '../../events/blur.js'; +import { WaChangeEvent } from '../../events/change.js'; +import { WaFocusEvent } from '../../events/focus.js'; +import { WaInputEvent } from '../../events/input.js'; import { watch } from '../../internal/watch.js'; import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js'; import componentStyles from '../../styles/component.styles.js'; @@ -101,36 +105,36 @@ export default class WaSwitch extends WebAwesomeFormAssociatedElement { private handleBlur() { this.hasFocus = false; - this.emit('wa-blur'); + this.dispatchEvent(new WaBlurEvent()); } private handleInput() { - this.emit('wa-input'); + this.dispatchEvent(new WaInputEvent()); } private handleClick() { this.checked = !this.checked; - this.emit('wa-change'); + this.dispatchEvent(new WaChangeEvent()); } private handleFocus() { this.hasFocus = true; - this.emit('wa-focus'); + this.dispatchEvent(new WaFocusEvent()); } private handleKeyDown(event: KeyboardEvent) { if (event.key === 'ArrowLeft') { event.preventDefault(); this.checked = false; - this.emit('wa-change'); - this.emit('wa-input'); + this.dispatchEvent(new WaChangeEvent()); + this.dispatchEvent(new WaInputEvent()); } if (event.key === 'ArrowRight') { event.preventDefault(); this.checked = true; - this.emit('wa-change'); - this.emit('wa-input'); + this.dispatchEvent(new WaChangeEvent()); + this.dispatchEvent(new WaInputEvent()); } } diff --git a/src/components/tab-group/tab-group.test.ts b/src/components/tab-group/tab-group.test.ts index 35afcd8af..d3aea7b31 100644 --- a/src/components/tab-group/tab-group.test.ts +++ b/src/components/tab-group/tab-group.test.ts @@ -6,7 +6,7 @@ import { queryByTestId } from '../../internal/test/data-testid-helpers.js'; import { sendKeys } from '@web/test-runner-commands'; import { waitForScrollingToEnd } from '../../internal/test/wait-for-scrolling.js'; import type { HTMLTemplateResult } from 'lit'; -import type { WaTabShowEvent } from '../../events/wa-tab-show.js'; +import type { WaTabShowEvent } from '../../events/tab-show.js'; import type WaTab from '../tab/tab.js'; import type WaTabGroup from './tab-group.js'; import type WaTabPanel from '../tab-panel/tab-panel.js'; diff --git a/src/components/tab-group/tab-group.ts b/src/components/tab-group/tab-group.ts index f0dcd3d2f..7d0b43cbd 100644 --- a/src/components/tab-group/tab-group.ts +++ b/src/components/tab-group/tab-group.ts @@ -6,6 +6,8 @@ import { customElement, property, query, state } from 'lit/decorators.js'; import { html } from 'lit'; import { LocalizeController } from '../../utilities/localize.js'; import { scrollIntoView } from '../../internal/scroll.js'; +import { WaTabHideEvent } from '../../events/tab-hide.js'; +import { WaTabShowEvent } from '../../events/tab-show.js'; import { watch } from '../../internal/watch.js'; import componentStyles from '../../styles/component.styles.js'; import styles from './tab-group.styles.js'; @@ -270,10 +272,10 @@ export default class WaTabGroup extends WebAwesomeElement { // Emit events if (options.emitEvents) { if (previousTab) { - this.emit('wa-tab-hide', { detail: { name: previousTab.panel } }); + this.dispatchEvent(new WaTabHideEvent({ name: previousTab.panel })); } - this.emit('wa-tab-show', { detail: { name: this.activeTab.panel } }); + this.dispatchEvent(new WaTabShowEvent({ name: this.activeTab.panel })); } } } diff --git a/src/components/tag/tag.ts b/src/components/tag/tag.ts index d58badc20..a171cae13 100644 --- a/src/components/tag/tag.ts +++ b/src/components/tag/tag.ts @@ -3,6 +3,7 @@ import { classMap } from 'lit/directives/class-map.js'; import { customElement, property } from 'lit/decorators.js'; import { html } from 'lit'; import { LocalizeController } from '../../utilities/localize.js'; +import { WaRemoveEvent } from '../../events/remove.js'; import componentStyles from '../../styles/component.styles.js'; import styles from './tag.styles.js'; import WebAwesomeElement from '../../internal/webawesome-element.js'; @@ -51,7 +52,7 @@ export default class WaTag extends WebAwesomeElement { @property({ type: Boolean }) removable = false; private handleRemoveClick() { - this.emit('wa-remove'); + this.dispatchEvent(new WaRemoveEvent()); } render() { diff --git a/src/components/textarea/textarea.ts b/src/components/textarea/textarea.ts index 6ddb8908b..72b892bdc 100644 --- a/src/components/textarea/textarea.ts +++ b/src/components/textarea/textarea.ts @@ -5,6 +5,10 @@ import { html } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; import { live } from 'lit/directives/live.js'; import { MirrorValidator } from '../../internal/validators/mirror-validator.js'; +import { WaBlurEvent } from '../../events/blur.js'; +import { WaChangeEvent } from '../../events/change.js'; +import { WaFocusEvent } from '../../events/focus.js'; +import { WaInputEvent } from '../../events/input.js'; import { watch } from '../../internal/watch.js'; import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js'; import componentStyles from '../../styles/component.styles.js'; @@ -165,25 +169,25 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement { private handleBlur() { this.hasFocus = false; - this.emit('wa-blur'); + this.dispatchEvent(new WaBlurEvent()); this.checkValidity(); } private handleChange() { this.value = this.input.value; this.setTextareaHeight(); - this.emit('wa-change'); + this.dispatchEvent(new WaChangeEvent()); this.checkValidity(); } private handleFocus() { this.hasFocus = true; - this.emit('wa-focus'); + this.dispatchEvent(new WaFocusEvent()); } private handleInput() { this.value = this.input.value; - this.emit('wa-input'); + this.dispatchEvent(new WaInputEvent()); } private setTextareaHeight() { diff --git a/src/components/tooltip/tooltip.ts b/src/components/tooltip/tooltip.ts index 259fc076c..d70fefded 100644 --- a/src/components/tooltip/tooltip.ts +++ b/src/components/tooltip/tooltip.ts @@ -2,7 +2,11 @@ import { animateWithClass, stopAnimations } from '../../internal/animate.js'; import { classMap } from 'lit/directives/class-map.js'; import { customElement, property, query } from 'lit/decorators.js'; import { html } from 'lit'; +import { WaAfterHideEvent } from '../../events/after-hide.js'; +import { WaAfterShowEvent } from '../../events/after-show.js'; +import { WaHideEvent } from '../../events/hide.js'; import { waitForEvent } from '../../internal/event.js'; +import { WaShowEvent } from '../../events/show.js'; import { watch } from '../../internal/watch.js'; import componentStyles from '../../styles/component.styles.js'; import styles from './tooltip.styles.js'; @@ -182,7 +186,7 @@ export default class WaTooltip extends WebAwesomeElement { } // Show - this.emit('wa-show'); + this.dispatchEvent(new WaShowEvent()); if ('CloseWatcher' in window) { this.closeWatcher?.destroy(); this.closeWatcher = new CloseWatcher(); @@ -199,10 +203,10 @@ export default class WaTooltip extends WebAwesomeElement { await animateWithClass(this.popup.popup, 'show-with-scale'); this.popup.reposition(); - this.emit('wa-after-show'); + this.dispatchEvent(new WaAfterShowEvent()); } else { // Hide - this.emit('wa-hide'); + this.dispatchEvent(new WaHideEvent()); this.closeWatcher?.destroy(); document.removeEventListener('keydown', this.handleDocumentKeyDown); @@ -211,7 +215,7 @@ export default class WaTooltip extends WebAwesomeElement { this.popup.active = false; this.body.hidden = true; - this.emit('wa-after-hide'); + this.dispatchEvent(new WaAfterHideEvent()); } } diff --git a/src/components/tree-item/tree-item.ts b/src/components/tree-item/tree-item.ts index adc0e64a0..bf229702a 100644 --- a/src/components/tree-item/tree-item.ts +++ b/src/components/tree-item/tree-item.ts @@ -1,12 +1,18 @@ import '../checkbox/checkbox.js'; import '../icon/icon.js'; import '../spinner/spinner.js'; +import { animate, parseDuration, stopAnimations } from '../../internal/animate.js'; import { classMap } from 'lit/directives/class-map.js'; import { customElement, property, query, state } from 'lit/decorators.js'; import { html } from 'lit'; import { live } from 'lit/directives/live.js'; import { LocalizeController } from '../../utilities/localize.js'; -import { parseDuration, stopAnimations } from '../../internal/animate.js'; +import { WaAfterCollapseEvent } from '../../events/after-collapse.js'; +import { WaAfterExpandEvent } from '../../events/after-expand.js'; +import { WaCollapseEvent } from '../../events/collapse.js'; +import { WaExpandEvent } from '../../events/expand.js'; +import { WaLazyChangeEvent } from '../../events/lazy-change.js'; +import { WaLazyLoadEvent } from '../../events/lazy-load.js'; import { watch } from '../../internal/watch.js'; import { when } from 'lit/directives/when.js'; import componentStyles from '../../styles/component.styles.js'; @@ -114,21 +120,23 @@ export default class WaTreeItem extends WebAwesomeElement { } private async animateCollapse() { - this.emit('wa-collapse'); + this.dispatchEvent(new WaCollapseEvent()); await stopAnimations(this.childrenContainer); + // We can't animate from 'auto', so use the scroll height for now const duration = parseDuration(getComputedStyle(this.childrenContainer).getPropertyValue('--hide-duration')); - await this.childrenContainer.animate( + await animate( + this.childrenContainer, [ { height: `${this.childrenContainer.scrollHeight}px`, opacity: '1', overflow: 'hidden' }, { height: '0', opacity: '0', overflow: 'hidden' } ], { duration, easing: 'cubic-bezier(0.4, 0.0, 0.2, 1)' } - ).finished; + ); this.childrenContainer.hidden = true; - this.emit('wa-after-collapse'); + this.dispatchEvent(new WaAfterCollapseEvent()); } // Checks whether the item is nested into an item @@ -149,13 +157,14 @@ export default class WaTreeItem extends WebAwesomeElement { } private async animateExpand() { - this.emit('wa-expand'); + this.dispatchEvent(new WaExpandEvent()); await stopAnimations(this.childrenContainer); this.childrenContainer.hidden = false; // We can't animate to 'auto', so use the scroll height for now const duration = parseDuration(getComputedStyle(this.childrenContainer).getPropertyValue('--show-duration')); - await this.childrenContainer.animate( + await animate( + this.childrenContainer, [ { height: '0', opacity: '0', overflow: 'hidden' }, { height: `${this.childrenContainer.scrollHeight}px`, opacity: '1', overflow: 'hidden' } @@ -164,10 +173,10 @@ export default class WaTreeItem extends WebAwesomeElement { duration, easing: 'cubic-bezier(0.4, 0.0, 0.2, 1)' } - ).finished; + ); this.childrenContainer.style.height = 'auto'; - this.emit('wa-after-expand'); + this.dispatchEvent(new WaAfterExpandEvent()); } @watch('loading', { waitUntilFirstUpdate: true }) @@ -203,8 +212,7 @@ export default class WaTreeItem extends WebAwesomeElement { if (this.expanded) { if (this.lazy) { this.loading = true; - - this.emit('wa-lazy-load'); + this.dispatchEvent(new WaLazyLoadEvent()); } else { this.animateExpand(); } @@ -215,7 +223,7 @@ export default class WaTreeItem extends WebAwesomeElement { @watch('lazy', { waitUntilFirstUpdate: true }) handleLazyChange() { - this.emit('wa-lazy-change'); + this.dispatchEvent(new WaLazyChangeEvent()); } /** Gets all the nested tree items in this node. */ diff --git a/src/components/tree/tree.ts b/src/components/tree/tree.ts index 5f01f95c9..e7b8bc4a7 100644 --- a/src/components/tree/tree.ts +++ b/src/components/tree/tree.ts @@ -1,6 +1,7 @@ import { clamp } from '../../internal/math.js'; import { customElement, property, query } from 'lit/decorators.js'; import { html } from 'lit'; +import { WaSelectionChangeEvent } from '../../events/selection-change.js'; import { watch } from '../../internal/watch.js'; import componentStyles from '../../styles/component.styles.js'; import styles from './tree.styles.js'; @@ -199,7 +200,7 @@ export default class WaTree extends WebAwesomeElement { ) { // Wait for the tree items' DOM to update before emitting Promise.all(nextSelection.map(el => el.updateComplete)).then(() => { - this.emit('wa-selection-change', { detail: { selection: nextSelection } }); + this.dispatchEvent(new WaSelectionChangeEvent({ selection: nextSelection })); }); } } diff --git a/src/events/after-collapse.ts b/src/events/after-collapse.ts new file mode 100644 index 000000000..cbb867b30 --- /dev/null +++ b/src/events/after-collapse.ts @@ -0,0 +1,11 @@ +export class WaAfterCollapseEvent extends Event { + constructor() { + super('wa-after-collapse', { bubbles: true, cancelable: false, composed: true }); + } +} + +declare global { + interface GlobalEventHandlersEventMap { + 'wa-after-collapse': WaAfterCollapseEvent; + } +} diff --git a/src/events/after-expand.ts b/src/events/after-expand.ts new file mode 100644 index 000000000..47e7a2b64 --- /dev/null +++ b/src/events/after-expand.ts @@ -0,0 +1,11 @@ +export class WaAfterExpandEvent extends Event { + constructor() { + super('wa-after-expand', { bubbles: true, cancelable: false, composed: true }); + } +} + +declare global { + interface GlobalEventHandlersEventMap { + 'wa-after-expand': WaAfterExpandEvent; + } +} diff --git a/src/events/after-hide.ts b/src/events/after-hide.ts new file mode 100644 index 000000000..b4133f129 --- /dev/null +++ b/src/events/after-hide.ts @@ -0,0 +1,11 @@ +export class WaAfterHideEvent extends Event { + constructor() { + super('wa-after-hide', { bubbles: true, cancelable: false, composed: true }); + } +} + +declare global { + interface GlobalEventHandlersEventMap { + 'wa-after-hide': WaAfterHideEvent; + } +} diff --git a/src/events/after-show.ts b/src/events/after-show.ts new file mode 100644 index 000000000..d72183de0 --- /dev/null +++ b/src/events/after-show.ts @@ -0,0 +1,11 @@ +export class WaAfterShowEvent extends Event { + constructor() { + super('wa-after-show', { bubbles: true, cancelable: false, composed: true }); + } +} + +declare global { + interface GlobalEventHandlersEventMap { + 'wa-after-show': WaAfterShowEvent; + } +} diff --git a/src/events/blur.ts b/src/events/blur.ts new file mode 100644 index 000000000..799099cf6 --- /dev/null +++ b/src/events/blur.ts @@ -0,0 +1,11 @@ +export class WaBlurEvent extends Event { + constructor() { + super('wa-blur', { bubbles: true, cancelable: false, composed: true }); + } +} + +declare global { + interface GlobalEventHandlersEventMap { + 'wa-blur': WaBlurEvent; + } +} diff --git a/src/events/cancel.ts b/src/events/cancel.ts new file mode 100644 index 000000000..238aba7b0 --- /dev/null +++ b/src/events/cancel.ts @@ -0,0 +1,11 @@ +export class WaCancelEvent extends Event { + constructor() { + super('wa-cancel', { bubbles: true, cancelable: false, composed: true }); + } +} + +declare global { + interface GlobalEventHandlersEventMap { + 'wa-cancel': WaCancelEvent; + } +} diff --git a/src/events/change.ts b/src/events/change.ts new file mode 100644 index 000000000..1abb38a89 --- /dev/null +++ b/src/events/change.ts @@ -0,0 +1,11 @@ +export class WaChangeEvent extends Event { + constructor() { + super('wa-change', { bubbles: true, cancelable: false, composed: true }); + } +} + +declare global { + interface GlobalEventHandlersEventMap { + 'wa-change': WaChangeEvent; + } +} diff --git a/src/events/clear.ts b/src/events/clear.ts new file mode 100644 index 000000000..49c9b8acc --- /dev/null +++ b/src/events/clear.ts @@ -0,0 +1,11 @@ +export class WaClearEvent extends Event { + constructor() { + super('wa-clear', { bubbles: true, cancelable: false, composed: true }); + } +} + +declare global { + interface GlobalEventHandlersEventMap { + 'wa-clear': WaClearEvent; + } +} diff --git a/src/events/close.ts b/src/events/close.ts new file mode 100644 index 000000000..81d06c17d --- /dev/null +++ b/src/events/close.ts @@ -0,0 +1,11 @@ +export class WaCloseEvent extends Event { + constructor() { + super('wa-close', { bubbles: true, cancelable: false, composed: true }); + } +} + +declare global { + interface GlobalEventHandlersEventMap { + 'wa-close': WaCloseEvent; + } +} diff --git a/src/events/collapse.ts b/src/events/collapse.ts new file mode 100644 index 000000000..267cf6af4 --- /dev/null +++ b/src/events/collapse.ts @@ -0,0 +1,11 @@ +export class WaCollapseEvent extends Event { + constructor() { + super('wa-collapse', { bubbles: true, cancelable: false, composed: true }); + } +} + +declare global { + interface GlobalEventHandlersEventMap { + 'wa-collapse': WaCollapseEvent; + } +} diff --git a/src/events/copy.ts b/src/events/copy.ts new file mode 100644 index 000000000..94736f855 --- /dev/null +++ b/src/events/copy.ts @@ -0,0 +1,18 @@ +export class WaCopyEvent extends Event { + readonly detail: WaCopyErrorEventDetail; + constructor(detail: WaCopyErrorEventDetail) { + super('wa-copy', { bubbles: true, cancelable: false, composed: true }); + this.detail = detail; + } +} + +interface WaCopyErrorEventDetail { + /** The value that occurred while copying. */ + value: string; +} + +declare global { + interface GlobalEventHandlersEventMap { + 'wa-copy': WaCopyEvent; + } +} diff --git a/src/events/error.ts b/src/events/error.ts new file mode 100644 index 000000000..fa3b5341e --- /dev/null +++ b/src/events/error.ts @@ -0,0 +1,11 @@ +export class WaErrorEvent extends Event { + constructor() { + super('wa-error', { bubbles: true, cancelable: false, composed: true }); + } +} + +declare global { + interface GlobalEventHandlersEventMap { + 'wa-error': WaErrorEvent; + } +} diff --git a/src/events/events.ts b/src/events/events.ts index 7785dafbd..28b05aa78 100644 --- a/src/events/events.ts +++ b/src/events/events.ts @@ -1,34 +1,34 @@ -export type { WaAfterCollapseEvent } from './wa-after-collapse.js'; -export type { WaAfterExpandEvent } from './wa-after-expand.js'; -export type { WaAfterHideEvent } from './wa-after-hide.js'; -export type { WaAfterShowEvent } from './wa-after-show.js'; -export type { WaBlurEvent } from './wa-blur.js'; -export type { WaCancelEvent } from './wa-cancel.js'; -export type { WaChangeEvent } from './wa-change.js'; -export type { WaClearEvent } from './wa-clear.js'; -export type { WaCloseEvent } from './wa-close.js'; -export type { WaCollapseEvent } from './wa-collapse.js'; -export type { WaCopyEvent } from './wa-copy.js'; -export type { WaErrorEvent } from './wa-error.js'; -export type { WaExpandEvent } from './wa-expand.js'; -export type { WaFinishEvent } from './wa-finish.js'; -export type { WaFocusEvent } from './wa-focus.js'; -export type { WaHideEvent } from './wa-hide.js'; -export type { WaHoverEvent } from './wa-hover.js'; -export type { WaInputEvent } from './wa-input.js'; -export type { WaInvalidEvent } from './wa-invalid.js'; -export type { WaLazyChangeEvent } from './wa-lazy-change.js'; -export type { WaLazyLoadEvent } from './wa-lazy-load.js'; -export type { WaLoadEvent } from './wa-load.js'; -export type { WaMutationEvent } from './wa-mutation.js'; -export type { WaRemoveEvent } from './wa-remove.js'; -export type { WaRepositionEvent } from './wa-reposition.js'; -export type { WaRequestCloseEvent } from './wa-request-close.js'; -export type { WaResizeEvent } from './wa-resize.js'; -export type { WaSelectEvent } from './wa-select.js'; -export type { WaSelectionChangeEvent } from './wa-selection-change.js'; -export type { WaShowEvent } from './wa-show.js'; -export type { WaSlideChangeEvent } from './wa-slide-change.js'; -export type { WaStartEvent } from './wa-start.js'; -export type { WaTabHideEvent } from './wa-tab-hide.js'; -export type { WaTabShowEvent } from './wa-tab-show.js'; +export type { WaAfterCollapseEvent } from './after-collapse.js'; +export type { WaAfterExpandEvent } from './after-expand.js'; +export type { WaAfterHideEvent } from './after-hide.js'; +export type { WaAfterShowEvent } from './after-show.js'; +export type { WaBlurEvent } from './blur.js'; +export type { WaCancelEvent } from './cancel.js'; +export type { WaChangeEvent } from './change.js'; +export type { WaClearEvent } from './clear.js'; +export type { WaCloseEvent } from './close.js'; +export type { WaCollapseEvent } from './collapse.js'; +export type { WaCopyEvent } from './copy.js'; +export type { WaErrorEvent } from './error.js'; +export type { WaExpandEvent } from './expand.js'; +export type { WaFinishEvent } from './finish.js'; +export type { WaFocusEvent } from './focus.js'; +export type { WaHideEvent } from './hide.js'; +export type { WaHoverEvent } from './hover.js'; +export type { WaInputEvent } from './input.js'; +export type { WaInvalidEvent } from './invalid.js'; +export type { WaLazyChangeEvent } from './lazy-change.js'; +export type { WaLazyLoadEvent } from './lazy-load.js'; +export type { WaLoadEvent } from './load.js'; +export type { WaMutationEvent } from './mutation.js'; +export type { WaRemoveEvent } from './remove.js'; +export type { WaRepositionEvent } from './reposition.js'; +export type { WaRequestCloseEvent } from './request-close.js'; +export type { WaResizeEvent } from './resize.js'; +export type { WaSelectEvent } from './select.js'; +export type { WaSelectionChangeEvent } from './selection-change.js'; +export type { WaShowEvent } from './show.js'; +export type { WaSlideChangeEvent } from './slide-change.js'; +export type { WaStartEvent } from './start.js'; +export type { WaTabHideEvent } from './tab-hide.js'; +export type { WaTabShowEvent } from './tab-show.js'; diff --git a/src/events/expand.ts b/src/events/expand.ts new file mode 100644 index 000000000..f544763bc --- /dev/null +++ b/src/events/expand.ts @@ -0,0 +1,11 @@ +export class WaExpandEvent extends Event { + constructor() { + super('wa-expand', { bubbles: true, cancelable: false, composed: true }); + } +} + +declare global { + interface GlobalEventHandlersEventMap { + 'wa-expand': WaExpandEvent; + } +} diff --git a/src/events/finish.ts b/src/events/finish.ts new file mode 100644 index 000000000..6fd51a2e4 --- /dev/null +++ b/src/events/finish.ts @@ -0,0 +1,11 @@ +export class WaFinishEvent extends Event { + constructor() { + super('wa-finish', { bubbles: true, cancelable: false, composed: true }); + } +} + +declare global { + interface GlobalEventHandlersEventMap { + 'wa-finish': WaFinishEvent; + } +} diff --git a/src/events/focus.ts b/src/events/focus.ts new file mode 100644 index 000000000..67cbf74c5 --- /dev/null +++ b/src/events/focus.ts @@ -0,0 +1,11 @@ +export class WaFocusEvent extends Event { + constructor() { + super('wa-focus', { bubbles: true, cancelable: false, composed: true }); + } +} + +declare global { + interface GlobalEventHandlersEventMap { + 'wa-focus': WaFocusEvent; + } +} diff --git a/src/events/hide.ts b/src/events/hide.ts new file mode 100644 index 000000000..61e963177 --- /dev/null +++ b/src/events/hide.ts @@ -0,0 +1,11 @@ +export class WaHideEvent extends Event { + constructor() { + super('wa-hide', { bubbles: true, cancelable: true, composed: true }); + } +} + +declare global { + interface GlobalEventHandlersEventMap { + 'wa-hide': WaHideEvent; + } +} diff --git a/src/events/hover.ts b/src/events/hover.ts new file mode 100644 index 000000000..86577d302 --- /dev/null +++ b/src/events/hover.ts @@ -0,0 +1,19 @@ +interface WaHoverEventDetail { + phase: 'start' | 'move' | 'end'; + value: number; +} + +export class WaHoverEvent extends Event { + readonly detail: WaHoverEventDetail; + + constructor(detail: WaHoverEventDetail) { + super('wa-hover', { bubbles: true, cancelable: false, composed: true }); + this.detail = detail; + } +} + +declare global { + interface GlobalEventHandlersEventMap { + 'wa-hover': WaHoverEvent; + } +} diff --git a/src/events/include-error.ts b/src/events/include-error.ts new file mode 100644 index 000000000..9296ba13f --- /dev/null +++ b/src/events/include-error.ts @@ -0,0 +1,18 @@ +export class WaIncludeErrorEvent extends Event { + readonly detail: WaIncludeErrorDetail; + + constructor(detail: WaIncludeErrorDetail) { + super('wa-include-error', { bubbles: true, cancelable: false, composed: true }); + this.detail = detail; + } +} + +interface WaIncludeErrorDetail { + status: number; +} + +declare global { + interface GlobalEventHandlersEventMap { + 'wa-include-error': WaIncludeErrorEvent; + } +} diff --git a/src/events/input.ts b/src/events/input.ts new file mode 100644 index 000000000..5f72c413e --- /dev/null +++ b/src/events/input.ts @@ -0,0 +1,11 @@ +export class WaInputEvent extends Event { + constructor() { + super('wa-input', { bubbles: true, cancelable: false, composed: true }); + } +} + +declare global { + interface GlobalEventHandlersEventMap { + 'wa-input': WaInputEvent; + } +} diff --git a/src/events/invalid.ts b/src/events/invalid.ts new file mode 100644 index 000000000..2eb17b9a7 --- /dev/null +++ b/src/events/invalid.ts @@ -0,0 +1,11 @@ +export class WaInvalidEvent extends Event { + constructor() { + super('wa-invalid', { bubbles: true, cancelable: false, composed: true }); + } +} + +declare global { + interface GlobalEventHandlersEventMap { + 'wa-invalid': WaInvalidEvent; + } +} diff --git a/src/events/lazy-change.ts b/src/events/lazy-change.ts new file mode 100644 index 000000000..92a2907c7 --- /dev/null +++ b/src/events/lazy-change.ts @@ -0,0 +1,11 @@ +export class WaLazyChangeEvent extends Event { + constructor() { + super('wa-lazy-change', { bubbles: true, cancelable: false, composed: true }); + } +} + +declare global { + interface GlobalEventHandlersEventMap { + 'wa-lazy-change': WaLazyChangeEvent; + } +} diff --git a/src/events/lazy-load.ts b/src/events/lazy-load.ts new file mode 100644 index 000000000..f259d38b9 --- /dev/null +++ b/src/events/lazy-load.ts @@ -0,0 +1,11 @@ +export class WaLazyLoadEvent extends Event { + constructor() { + super('wa-lazy-load', { bubbles: true, cancelable: false, composed: true }); + } +} + +declare global { + interface GlobalEventHandlersEventMap { + 'wa-lazy-load': WaLazyLoadEvent; + } +} diff --git a/src/events/load.ts b/src/events/load.ts new file mode 100644 index 000000000..a061b45a3 --- /dev/null +++ b/src/events/load.ts @@ -0,0 +1,11 @@ +export class WaLoadEvent extends Event { + constructor() { + super('wa-load', { bubbles: true, cancelable: false, composed: true }); + } +} + +declare global { + interface GlobalEventHandlersEventMap { + 'wa-load': WaLoadEvent; + } +} diff --git a/src/events/mutation.ts b/src/events/mutation.ts new file mode 100644 index 000000000..c6bc57b1e --- /dev/null +++ b/src/events/mutation.ts @@ -0,0 +1,18 @@ +export class WaMutationEvent extends Event { + readonly detail: WaMutationEventDetail; + + constructor(detail: WaMutationEventDetail) { + super('wa-mutation', { bubbles: true, cancelable: false, composed: true }); + this.detail = detail; + } +} + +interface WaMutationEventDetail { + mutationList: MutationRecord[]; +} + +declare global { + interface GlobalEventHandlersEventMap { + 'wa-mutation': WaMutationEvent; + } +} diff --git a/src/events/remove.ts b/src/events/remove.ts new file mode 100644 index 000000000..8432185b8 --- /dev/null +++ b/src/events/remove.ts @@ -0,0 +1,11 @@ +export class WaRemoveEvent extends Event { + constructor() { + super('wa-remove', { bubbles: true, cancelable: false, composed: true }); + } +} + +declare global { + interface GlobalEventHandlersEventMap { + 'wa-remove': WaRemoveEvent; + } +} diff --git a/src/events/reposition.ts b/src/events/reposition.ts new file mode 100644 index 000000000..0a49c79c3 --- /dev/null +++ b/src/events/reposition.ts @@ -0,0 +1,11 @@ +export class WaRepositionEvent extends Event { + constructor() { + super('wa-reposition', { bubbles: true, cancelable: false, composed: true }); + } +} + +declare global { + interface GlobalEventHandlersEventMap { + 'wa-reposition': WaRepositionEvent; + } +} diff --git a/src/events/request-close.ts b/src/events/request-close.ts new file mode 100644 index 000000000..031040352 --- /dev/null +++ b/src/events/request-close.ts @@ -0,0 +1,18 @@ +export class WaRequestCloseEvent extends Event { + readonly detail: WaRequestCloseEventDetail; + + constructor(detail: WaRequestCloseEventDetail) { + super('wa-request-close', { bubbles: true, cancelable: false, composed: true }); + this.detail = detail; + } +} + +interface WaRequestCloseEventDetail { + source: Element; +} + +declare global { + interface GlobalEventHandlersEventMap { + 'wa-request-close': WaRequestCloseEvent; + } +} diff --git a/src/events/resize.ts b/src/events/resize.ts new file mode 100644 index 000000000..c2282bd88 --- /dev/null +++ b/src/events/resize.ts @@ -0,0 +1,18 @@ +export class WaResizeEvent extends Event { + readonly detail: WaResizeEventDetail; + + constructor(detail: WaResizeEventDetail) { + super('wa-resize', { bubbles: true, cancelable: false, composed: true }); + this.detail = detail; + } +} + +interface WaResizeEventDetail { + entries: ResizeObserverEntry[]; +} + +declare global { + interface GlobalEventHandlersEventMap { + 'wa-resize': WaResizeEvent; + } +} diff --git a/src/events/select.ts b/src/events/select.ts new file mode 100644 index 000000000..667263445 --- /dev/null +++ b/src/events/select.ts @@ -0,0 +1,20 @@ +import type WaMenuItem from '../components/menu-item/menu-item.js'; + +export class WaSelectEvent extends Event { + readonly detail; + + constructor(detail: WaSelectEventDetail) { + super('wa-select', { bubbles: true, cancelable: false, composed: true }); + this.detail = detail; + } +} + +interface WaSelectEventDetail { + item: WaMenuItem; +} + +declare global { + interface GlobalEventHandlersEventMap { + 'wa-select': WaSelectEvent; + } +} diff --git a/src/events/selection-change.ts b/src/events/selection-change.ts new file mode 100644 index 000000000..d622b6c5f --- /dev/null +++ b/src/events/selection-change.ts @@ -0,0 +1,20 @@ +import type WaTreeItem from '../components/tree-item/tree-item.js'; + +export class WaSelectionChangeEvent extends Event { + readonly detail: WaSelectionChangeEventDetail; + + constructor(detail: WaSelectionChangeEventDetail) { + super('wa-selection-change', { bubbles: true, cancelable: false, composed: true }); + this.detail = detail; + } +} + +interface WaSelectionChangeEventDetail { + selection: WaTreeItem[]; +} + +declare global { + interface GlobalEventHandlersEventMap { + 'wa-selection-change': WaSelectionChangeEvent; + } +} diff --git a/src/events/show.ts b/src/events/show.ts new file mode 100644 index 000000000..695cd6f4a --- /dev/null +++ b/src/events/show.ts @@ -0,0 +1,11 @@ +export class WaShowEvent extends Event { + constructor() { + super('wa-show', { bubbles: true, cancelable: true, composed: true }); + } +} + +declare global { + interface GlobalEventHandlersEventMap { + 'wa-show': WaShowEvent; + } +} diff --git a/src/events/slide-change.ts b/src/events/slide-change.ts new file mode 100644 index 000000000..6960cffc5 --- /dev/null +++ b/src/events/slide-change.ts @@ -0,0 +1,21 @@ +import type WaCarouselItem from '../components/carousel-item/carousel-item.js'; + +export class WaSlideChangeEvent extends Event { + readonly detail: WaSlideChangeEventDetails; + + constructor(detail: WaSlideChangeEventDetails) { + super('wa-slide-change', { bubbles: true, cancelable: false, composed: true }); + this.detail = detail; + } +} + +interface WaSlideChangeEventDetails { + index: number; + slide: WaCarouselItem; +} + +declare global { + interface GlobalEventHandlersEventMap { + 'wa-slide-change': WaSlideChangeEvent; + } +} diff --git a/src/events/start.ts b/src/events/start.ts new file mode 100644 index 000000000..fbfcc4fed --- /dev/null +++ b/src/events/start.ts @@ -0,0 +1,11 @@ +export class WaStartEvent extends Event { + constructor() { + super('wa-start', { bubbles: true, cancelable: false, composed: true }); + } +} + +declare global { + interface GlobalEventHandlersEventMap { + 'wa-start': WaStartEvent; + } +} diff --git a/src/events/tab-hide.ts b/src/events/tab-hide.ts new file mode 100644 index 000000000..5aff7d29c --- /dev/null +++ b/src/events/tab-hide.ts @@ -0,0 +1,18 @@ +export class WaTabHideEvent extends Event { + readonly detail: WaTabHideEventDetail; + + constructor(detail: WaTabHideEventDetail) { + super('wa-tab-hide', { bubbles: true, cancelable: false, composed: true }); + this.detail = detail; + } +} + +interface WaTabHideEventDetail { + name: string; +} + +declare global { + interface GlobalEventHandlersEventMap { + 'wa-tab-hide': WaTabHideEvent; + } +} diff --git a/src/events/tab-show.ts b/src/events/tab-show.ts new file mode 100644 index 000000000..65b23a412 --- /dev/null +++ b/src/events/tab-show.ts @@ -0,0 +1,18 @@ +export class WaTabShowEvent extends Event { + readonly detail: WaTabShowEventDetail; + + constructor(detail: WaTabShowEventDetail) { + super('wa-tab-show', { bubbles: true, cancelable: false, composed: true }); + this.detail = detail; + } +} + +interface WaTabShowEventDetail { + name: string; +} + +declare global { + interface GlobalEventHandlersEventMap { + 'wa-tab-show': WaTabShowEvent; + } +} diff --git a/src/events/wa-after-collapse.ts b/src/events/wa-after-collapse.ts deleted file mode 100644 index 869212558..000000000 --- a/src/events/wa-after-collapse.ts +++ /dev/null @@ -1,7 +0,0 @@ -export type WaAfterCollapseEvent = CustomEvent>; - -declare global { - interface GlobalEventHandlersEventMap { - 'wa-after-collapse': WaAfterCollapseEvent; - } -} diff --git a/src/events/wa-after-expand.ts b/src/events/wa-after-expand.ts deleted file mode 100644 index 9b92bcc73..000000000 --- a/src/events/wa-after-expand.ts +++ /dev/null @@ -1,7 +0,0 @@ -export type WaAfterExpandEvent = CustomEvent>; - -declare global { - interface GlobalEventHandlersEventMap { - 'wa-after-expand': WaAfterExpandEvent; - } -} diff --git a/src/events/wa-after-hide.ts b/src/events/wa-after-hide.ts deleted file mode 100644 index 882100847..000000000 --- a/src/events/wa-after-hide.ts +++ /dev/null @@ -1,7 +0,0 @@ -export type WaAfterHideEvent = CustomEvent>; - -declare global { - interface GlobalEventHandlersEventMap { - 'wa-after-hide': WaAfterHideEvent; - } -} diff --git a/src/events/wa-after-show.ts b/src/events/wa-after-show.ts deleted file mode 100644 index 4c6b2a4d0..000000000 --- a/src/events/wa-after-show.ts +++ /dev/null @@ -1,7 +0,0 @@ -export type WaAfterShowEvent = CustomEvent>; - -declare global { - interface GlobalEventHandlersEventMap { - 'wa-after-show': WaAfterShowEvent; - } -} diff --git a/src/events/wa-blur.ts b/src/events/wa-blur.ts deleted file mode 100644 index 4e5c7c9d5..000000000 --- a/src/events/wa-blur.ts +++ /dev/null @@ -1,7 +0,0 @@ -export type WaBlurEvent = CustomEvent>; - -declare global { - interface GlobalEventHandlersEventMap { - 'wa-blur': WaBlurEvent; - } -} diff --git a/src/events/wa-cancel.ts b/src/events/wa-cancel.ts deleted file mode 100644 index ef58cac16..000000000 --- a/src/events/wa-cancel.ts +++ /dev/null @@ -1,7 +0,0 @@ -export type WaCancelEvent = CustomEvent>; - -declare global { - interface GlobalEventHandlersEventMap { - 'wa-cancel': WaCancelEvent; - } -} diff --git a/src/events/wa-change.ts b/src/events/wa-change.ts deleted file mode 100644 index 32bfea05e..000000000 --- a/src/events/wa-change.ts +++ /dev/null @@ -1,7 +0,0 @@ -export type WaChangeEvent = CustomEvent>; - -declare global { - interface GlobalEventHandlersEventMap { - 'wa-change': WaChangeEvent; - } -} diff --git a/src/events/wa-clear.ts b/src/events/wa-clear.ts deleted file mode 100644 index b1b158a1d..000000000 --- a/src/events/wa-clear.ts +++ /dev/null @@ -1,7 +0,0 @@ -export type WaClearEvent = CustomEvent>; - -declare global { - interface GlobalEventHandlersEventMap { - 'wa-clear': WaClearEvent; - } -} diff --git a/src/events/wa-close.ts b/src/events/wa-close.ts deleted file mode 100644 index 396373a6b..000000000 --- a/src/events/wa-close.ts +++ /dev/null @@ -1,7 +0,0 @@ -export type WaCloseEvent = CustomEvent>; - -declare global { - interface GlobalEventHandlersEventMap { - 'wa-close': WaCloseEvent; - } -} diff --git a/src/events/wa-collapse.ts b/src/events/wa-collapse.ts deleted file mode 100644 index 323b37cc4..000000000 --- a/src/events/wa-collapse.ts +++ /dev/null @@ -1,7 +0,0 @@ -export type WaCollapseEvent = CustomEvent>; - -declare global { - interface GlobalEventHandlersEventMap { - 'wa-collapse': WaCollapseEvent; - } -} diff --git a/src/events/wa-copy.ts b/src/events/wa-copy.ts deleted file mode 100644 index f3e8e9aa4..000000000 --- a/src/events/wa-copy.ts +++ /dev/null @@ -1,7 +0,0 @@ -export type WaCopyEvent = CustomEvent<{ value: string }>; - -declare global { - interface GlobalEventHandlersEventMap { - 'wa-copy': WaCopyEvent; - } -} diff --git a/src/events/wa-error.ts b/src/events/wa-error.ts deleted file mode 100644 index e08d51c05..000000000 --- a/src/events/wa-error.ts +++ /dev/null @@ -1,7 +0,0 @@ -export type WaErrorEvent = CustomEvent<{ status?: number }>; - -declare global { - interface GlobalEventHandlersEventMap { - 'wa-error': WaErrorEvent; - } -} diff --git a/src/events/wa-expand.ts b/src/events/wa-expand.ts deleted file mode 100644 index 64f441fd9..000000000 --- a/src/events/wa-expand.ts +++ /dev/null @@ -1,7 +0,0 @@ -export type WaExpandEvent = CustomEvent>; - -declare global { - interface GlobalEventHandlersEventMap { - 'wa-expand': WaExpandEvent; - } -} diff --git a/src/events/wa-finish.ts b/src/events/wa-finish.ts deleted file mode 100644 index 1c9b3b41f..000000000 --- a/src/events/wa-finish.ts +++ /dev/null @@ -1,7 +0,0 @@ -export type WaFinishEvent = CustomEvent>; - -declare global { - interface GlobalEventHandlersEventMap { - 'wa-finish': WaFinishEvent; - } -} diff --git a/src/events/wa-focus.ts b/src/events/wa-focus.ts deleted file mode 100644 index d8fb97278..000000000 --- a/src/events/wa-focus.ts +++ /dev/null @@ -1,7 +0,0 @@ -export type WaFocusEvent = CustomEvent>; - -declare global { - interface GlobalEventHandlersEventMap { - 'wa-focus': WaFocusEvent; - } -} diff --git a/src/events/wa-hide.ts b/src/events/wa-hide.ts deleted file mode 100644 index 606cfa512..000000000 --- a/src/events/wa-hide.ts +++ /dev/null @@ -1,7 +0,0 @@ -export type WaHideEvent = CustomEvent>; - -declare global { - interface GlobalEventHandlersEventMap { - 'wa-hide': WaHideEvent; - } -} diff --git a/src/events/wa-hover.ts b/src/events/wa-hover.ts deleted file mode 100644 index 848420700..000000000 --- a/src/events/wa-hover.ts +++ /dev/null @@ -1,10 +0,0 @@ -export type WaHoverEvent = CustomEvent<{ - phase: 'start' | 'move' | 'end'; - value: number; -}>; - -declare global { - interface GlobalEventHandlersEventMap { - 'wa-hover': WaHoverEvent; - } -} diff --git a/src/events/wa-input.ts b/src/events/wa-input.ts deleted file mode 100644 index de142c109..000000000 --- a/src/events/wa-input.ts +++ /dev/null @@ -1,7 +0,0 @@ -export type WaInputEvent = CustomEvent>; - -declare global { - interface GlobalEventHandlersEventMap { - 'wa-input': WaInputEvent; - } -} diff --git a/src/events/wa-invalid.ts b/src/events/wa-invalid.ts deleted file mode 100644 index a13989fc0..000000000 --- a/src/events/wa-invalid.ts +++ /dev/null @@ -1,7 +0,0 @@ -export type WaInvalidEvent = CustomEvent>; - -declare global { - interface GlobalEventHandlersEventMap { - 'wa-invalid': WaInvalidEvent; - } -} diff --git a/src/events/wa-lazy-change.ts b/src/events/wa-lazy-change.ts deleted file mode 100644 index a4f589b60..000000000 --- a/src/events/wa-lazy-change.ts +++ /dev/null @@ -1,7 +0,0 @@ -export type WaLazyChangeEvent = CustomEvent>; - -declare global { - interface GlobalEventHandlersEventMap { - 'wa-lazy-change': WaLazyChangeEvent; - } -} diff --git a/src/events/wa-lazy-load.ts b/src/events/wa-lazy-load.ts deleted file mode 100644 index dc4d1fdf4..000000000 --- a/src/events/wa-lazy-load.ts +++ /dev/null @@ -1,7 +0,0 @@ -export type WaLazyLoadEvent = CustomEvent>; - -declare global { - interface GlobalEventHandlersEventMap { - 'wa-lazy-load': WaLazyLoadEvent; - } -} diff --git a/src/events/wa-load.ts b/src/events/wa-load.ts deleted file mode 100644 index a666a89a7..000000000 --- a/src/events/wa-load.ts +++ /dev/null @@ -1,7 +0,0 @@ -export type WaLoadEvent = CustomEvent>; - -declare global { - interface GlobalEventHandlersEventMap { - 'wa-load': WaLoadEvent; - } -} diff --git a/src/events/wa-mutation.ts b/src/events/wa-mutation.ts deleted file mode 100644 index 7e490de32..000000000 --- a/src/events/wa-mutation.ts +++ /dev/null @@ -1,7 +0,0 @@ -export type WaMutationEvent = CustomEvent<{ mutationList: MutationRecord[] }>; - -declare global { - interface GlobalEventHandlersEventMap { - 'wa-mutation': WaMutationEvent; - } -} diff --git a/src/events/wa-remove.ts b/src/events/wa-remove.ts deleted file mode 100644 index 072d339b2..000000000 --- a/src/events/wa-remove.ts +++ /dev/null @@ -1,7 +0,0 @@ -export type WaRemoveEvent = CustomEvent>; - -declare global { - interface GlobalEventHandlersEventMap { - 'wa-remove': WaRemoveEvent; - } -} diff --git a/src/events/wa-reposition.ts b/src/events/wa-reposition.ts deleted file mode 100644 index 375aa85f3..000000000 --- a/src/events/wa-reposition.ts +++ /dev/null @@ -1,7 +0,0 @@ -export type WaRepositionEvent = CustomEvent>; - -declare global { - interface GlobalEventHandlersEventMap { - 'wa-reposition': WaRepositionEvent; - } -} diff --git a/src/events/wa-request-close.ts b/src/events/wa-request-close.ts deleted file mode 100644 index 47a61547b..000000000 --- a/src/events/wa-request-close.ts +++ /dev/null @@ -1,7 +0,0 @@ -export type WaRequestCloseEvent = CustomEvent<{ source: Element }>; - -declare global { - interface GlobalEventHandlersEventMap { - 'wa-request-close': WaRequestCloseEvent; - } -} diff --git a/src/events/wa-resize.ts b/src/events/wa-resize.ts deleted file mode 100644 index 6289febeb..000000000 --- a/src/events/wa-resize.ts +++ /dev/null @@ -1,7 +0,0 @@ -export type WaResizeEvent = CustomEvent<{ entries: ResizeObserverEntry[] }>; - -declare global { - interface GlobalEventHandlersEventMap { - 'wa-resize': WaResizeEvent; - } -} diff --git a/src/events/wa-select.ts b/src/events/wa-select.ts deleted file mode 100644 index 351088f23..000000000 --- a/src/events/wa-select.ts +++ /dev/null @@ -1,9 +0,0 @@ -import type WaMenuItem from '../components/menu-item/menu-item.js'; - -export type WaSelectEvent = CustomEvent<{ item: WaMenuItem }>; - -declare global { - interface GlobalEventHandlersEventMap { - 'wa-select': WaSelectEvent; - } -} diff --git a/src/events/wa-selection-change.ts b/src/events/wa-selection-change.ts deleted file mode 100644 index 67cf8d10a..000000000 --- a/src/events/wa-selection-change.ts +++ /dev/null @@ -1,9 +0,0 @@ -import type WaTreeItem from '../components/tree-item/tree-item.js'; - -export type WaSelectionChangeEvent = CustomEvent<{ selection: WaTreeItem[] }>; - -declare global { - interface GlobalEventHandlersEventMap { - 'wa-selection-change': WaSelectionChangeEvent; - } -} diff --git a/src/events/wa-show.ts b/src/events/wa-show.ts deleted file mode 100644 index cb52e8389..000000000 --- a/src/events/wa-show.ts +++ /dev/null @@ -1,7 +0,0 @@ -export type WaShowEvent = CustomEvent>; - -declare global { - interface GlobalEventHandlersEventMap { - 'wa-show': WaShowEvent; - } -} diff --git a/src/events/wa-slide-change.ts b/src/events/wa-slide-change.ts deleted file mode 100644 index fe2707641..000000000 --- a/src/events/wa-slide-change.ts +++ /dev/null @@ -1,9 +0,0 @@ -import type WaCarouselItem from '../components/carousel-item/carousel-item.js'; - -export type WaSlideChangeEvent = CustomEvent<{ index: number; slide: WaCarouselItem }>; - -declare global { - interface GlobalEventHandlersEventMap { - 'wa-slide-change': WaSlideChangeEvent; - } -} diff --git a/src/events/wa-start.ts b/src/events/wa-start.ts deleted file mode 100644 index 9ae08b316..000000000 --- a/src/events/wa-start.ts +++ /dev/null @@ -1,7 +0,0 @@ -export type WaStartEvent = CustomEvent>; - -declare global { - interface GlobalEventHandlersEventMap { - 'wa-start': WaStartEvent; - } -} diff --git a/src/events/wa-tab-hide.ts b/src/events/wa-tab-hide.ts deleted file mode 100644 index 4e61a1680..000000000 --- a/src/events/wa-tab-hide.ts +++ /dev/null @@ -1,7 +0,0 @@ -export type WaTabHideEvent = CustomEvent<{ name: string }>; - -declare global { - interface GlobalEventHandlersEventMap { - 'wa-tab-hide': WaTabHideEvent; - } -} diff --git a/src/events/wa-tab-show.ts b/src/events/wa-tab-show.ts deleted file mode 100644 index 5c0304437..000000000 --- a/src/events/wa-tab-show.ts +++ /dev/null @@ -1,7 +0,0 @@ -export type WaTabShowEvent = CustomEvent<{ name: string }>; - -declare global { - interface GlobalEventHandlersEventMap { - 'wa-tab-show': WaTabShowEvent; - } -} diff --git a/src/internal/animate.ts b/src/internal/animate.ts index 9192a067b..fd3bd82b3 100644 --- a/src/internal/animate.ts +++ b/src/internal/animate.ts @@ -1,3 +1,8 @@ +/** Same as `el.animate()`, except returns a promise that doesn't throw an error when the animation is canceled. */ +export async function animate(el: Element, keyframes: Keyframe[], options?: KeyframeAnimationOptions) { + return el.animate(keyframes, options).finished.catch(() => {}); +} + /** * Applies a class to the specified element to animate it. The class is removed after the animation finishes and then * the promise resolves. If a timeout is provided, the class will be removed and the animation will diff --git a/src/internal/webawesome-element.ts b/src/internal/webawesome-element.ts index 00f8b99bb..361f39896 100644 --- a/src/internal/webawesome-element.ts +++ b/src/internal/webawesome-element.ts @@ -1,98 +1,12 @@ import { CustomErrorValidator } from './validators/custom-error-validator.js'; import { LitElement, type PropertyValues } from 'lit'; import { property } from 'lit/decorators.js'; - -// Match event type name strings that are registered on GlobalEventHandlersEventMap... -type EventTypeRequiresDetail = T extends keyof GlobalEventHandlersEventMap - ? // ...where the event detail is an object... - GlobalEventHandlersEventMap[T] extends CustomEvent> - ? // ...that is non-empty... - GlobalEventHandlersEventMap[T] extends CustomEvent> - ? never - : // ...and has at least one non-optional property - Partial extends GlobalEventHandlersEventMap[T]['detail'] - ? never - : T - : never - : never; - -// The inverse of the above (match any type that doesn't match EventTypeRequiresDetail) -type EventTypeDoesNotRequireDetail = T extends keyof GlobalEventHandlersEventMap - ? GlobalEventHandlersEventMap[T] extends CustomEvent> - ? GlobalEventHandlersEventMap[T] extends CustomEvent> - ? T - : Partial extends GlobalEventHandlersEventMap[T]['detail'] - ? T - : never - : T - : T; - -// `keyof EventTypesWithRequiredDetail` lists all registered event types that require detail -type EventTypesWithRequiredDetail = { - [EventType in keyof GlobalEventHandlersEventMap as EventTypeRequiresDetail]: true; -}; - -// `keyof EventTypesWithoutRequiredDetail` lists all registered event types that do NOT require detail -type EventTypesWithoutRequiredDetail = { - [EventType in keyof GlobalEventHandlersEventMap as EventTypeDoesNotRequireDetail]: true; -}; - -// Helper to make a specific property of an object non-optional -type WithRequired = T & { [P in K]-?: T[P] }; - -// Given an event name string, get a valid type for the options to initialize the event that is more restrictive than -// just CustomEventInit when appropriate (validate the type of the event detail, and require it to be provided if the -// event requires it) -type SlEventInit = T extends keyof GlobalEventHandlersEventMap - ? GlobalEventHandlersEventMap[T] extends CustomEvent> - ? GlobalEventHandlersEventMap[T] extends CustomEvent> - ? CustomEventInit - : Partial extends GlobalEventHandlersEventMap[T]['detail'] - ? CustomEventInit - : WithRequired, 'detail'> - : CustomEventInit - : CustomEventInit; - -// Given an event name string, get the type of the event -type GetCustomEventType = T extends keyof GlobalEventHandlersEventMap - ? GlobalEventHandlersEventMap[T] extends CustomEvent - ? GlobalEventHandlersEventMap[T] - : CustomEvent - : CustomEvent; - -// `keyof ValidEventTypeMap` is equivalent to `keyof GlobalEventHandlersEventMap` but gives a nicer error message -type ValidEventTypeMap = EventTypesWithRequiredDetail | EventTypesWithoutRequiredDetail; +import { WaInvalidEvent } from '../events/invalid.js'; export default class WebAwesomeElement extends LitElement { // Make localization attributes reactive @property() dir: string; @property() lang: string; - - /** Emits a custom event with more convenient defaults. */ - emit( - name: EventTypeDoesNotRequireDetail, - options?: SlEventInit | undefined - ): GetCustomEventType; - emit( - name: EventTypeRequiresDetail, - options: SlEventInit - ): GetCustomEventType; - emit( - name: T, - options?: SlEventInit | undefined - ): GetCustomEventType { - const event = new CustomEvent(name, { - bubbles: true, - cancelable: false, - composed: true, - detail: {}, - ...options - }); - - this.dispatchEvent(event); - - return event as GetCustomEventType; - } } export interface Validator { @@ -238,7 +152,7 @@ export class WebAwesomeFormAssociatedElement // An "invalid" event counts as interacted, this is usually triggered by a button "submitting" this.hasInteracted = true; - this.emit('wa-invalid'); + this.dispatchEvent(new WaInvalidEvent()); }; protected willUpdate(changedProperties: PropertyValues) { From 0ea9fd3f6f21b98a03e57d8c9479f148f7cbf90f Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Fri, 31 May 2024 14:34:53 -0400 Subject: [PATCH 02/11] update contributing --- docs/docs/resources/contributing.md | 4 ++-- docs/docs/usage.md | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/docs/resources/contributing.md b/docs/docs/resources/contributing.md index dd8f5a043..7d2b747d3 100644 --- a/docs/docs/resources/contributing.md +++ b/docs/docs/resources/contributing.md @@ -314,9 +314,9 @@ When providing fallback content inside of `` elements, avoid adding parts, This creates confusion because the part will be documented, but it won't work when the user slots in their own content. The recommended way to customize this example is for the user to slot in their own content and target its styles with CSS as needed. -### Custom Events +### Emitting Events -Components must only emit custom events, and all custom events must start with `sl-` as a namespace. For compatibility with frameworks that utilize DOM templates, custom events must have lowercase, kebab-style names. For example, use `wa-change` instead of `slChange`. +Components must only emit events that start with `wa-` as a namespace. For compatibility with frameworks that utilize DOM templates, events must have lowercase, kebab-style names. For example, use `wa-change` instead of `waChange`. This convention avoids the problem of browsers lowercasing attributes, causing some frameworks to be unable to listen to them. This problem isn't specific to one framework, but [Vue's documentation](https://vuejs.org/v2/guide/components-custom-events.html#Event-Names) provides a good explanation of the problem. diff --git a/docs/docs/usage.md b/docs/docs/usage.md index cf7f8b8ee..9af0ace27 100644 --- a/docs/docs/usage.md +++ b/docs/docs/usage.md @@ -39,7 +39,7 @@ Refer to a component's documentation for a complete list of its properties. You can listen for standard events such as `click`, `mouseover`, etc. as you normally would. However, it's important to note that many events emitted within a component's shadow root will be [retargeted](https://dom.spec.whatwg.org/#retarget) to the host element. This may result in, for example, multiple `click` handlers executing even if the user clicks just once. Furthermore, `event.target` will point to the host element, making things even more confusing. -As a result, you should almost always listen for custom events instead. For example, instead of listening to `click` to determine when an `` gets toggled, listen to `wa-change`. +As a result, you should almost always listen for Web Awesome events instead. For example, instead of listening to `click` to determine when an `` gets toggled, listen to `wa-change`. ```html Check me @@ -52,7 +52,7 @@ As a result, you should almost always listen for custom events instead. For exam ``` -All custom events are prefixed with `sl-` to prevent collisions with standard events and other libraries. Refer to a component's documentation for a complete list of its custom events. +All Web Awesome events are prefixed with `wa-` to prevent collisions with standard events and other libraries. Refer to a component's documentation for a complete list of its events. ## Methods From 3154652a00fe94fe4531eb6e617e40ea3374aaec Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Fri, 31 May 2024 14:39:36 -0400 Subject: [PATCH 03/11] fix prefix --- src/components/details/details.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/details/details.ts b/src/components/details/details.ts index a755193e5..467fe7d8f 100644 --- a/src/components/details/details.ts +++ b/src/components/details/details.ts @@ -136,9 +136,9 @@ export default class WaDetails extends WebAwesomeElement { if (this.open) { this.details.open = true; // Show - const slShow = new WaShowEvent(); - this.dispatchEvent(slShow); - if (slShow.defaultPrevented) { + const waShow = new WaShowEvent(); + this.dispatchEvent(waShow); + if (waShow.defaultPrevented) { this.open = false; this.details.open = false; return; @@ -163,9 +163,9 @@ export default class WaDetails extends WebAwesomeElement { this.dispatchEvent(new WaAfterShowEvent()); } else { // Hide - const slHide = new WaHideEvent(); - this.dispatchEvent(slHide); - if (slHide.defaultPrevented) { + const waHide = new WaHideEvent(); + this.dispatchEvent(waHide); + if (waHide.defaultPrevented) { this.details.open = true; this.open = true; return; From 5f01216858658dca49fb90e54068c07544364dee Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Fri, 31 May 2024 14:39:42 -0400 Subject: [PATCH 04/11] fix sl prefixes --- docs/docs/customizing.md | 28 +++++++++---------- docs/docs/themes.md | 2 +- .../color-picker/color-picker.test.ts | 2 +- src/components/menu-item/menu-item.styles.ts | 2 +- src/components/popup/popup.styles.ts | 2 +- src/components/select/select.styles.ts | 2 +- src/components/tree/tree.test.ts | 2 +- 7 files changed, 20 insertions(+), 20 deletions(-) diff --git a/docs/docs/customizing.md b/docs/docs/customizing.md index 5b3b61e78..48e6bbdea 100644 --- a/docs/docs/customizing.md +++ b/docs/docs/customizing.md @@ -12,24 +12,24 @@ Web Awesome makes use of several design tokens to provide a consistent appearanc Design tokens offer a high-level way to customize the library with minimal effort. There are no component-specific variables, however, as design tokens are intended to be generic and highly reusable. To customize an individual component, refer to the section entitled [CSS Parts](#css-parts). -Design tokens are accessed through CSS custom properties that are defined in your theme. Because design tokens live at the page level, they're prefixed with `--sl-` to avoid collisions with other libraries. +Design tokens are accessed through CSS custom properties that are defined in your theme. Because design tokens live at the page level, they're prefixed with `--wa-` to avoid collisions with other libraries. To customize a design token, simply override it in your stylesheet using a `:root` block. Here's an example that changes the primary theme to purple based on existing [color primitives](/tokens/color#primitives). ```css :root { /* Changes the primary theme color to purple using primitives */ - --sl-color-primary-50: var(--sl-color-purple-50); - --sl-color-primary-100: var(--sl-color-purple-100); - --sl-color-primary-200: var(--sl-color-purple-200); - --sl-color-primary-300: var(--sl-color-purple-300); - --sl-color-primary-400: var(--sl-color-purple-400); - --sl-color-primary-500: var(--sl-color-purple-500); - --sl-color-primary-600: var(--sl-color-purple-600); - --sl-color-primary-700: var(--sl-color-purple-700); - --sl-color-primary-800: var(--sl-color-purple-800); - --sl-color-primary-900: var(--sl-color-purple-900); - --sl-color-primary-950: var(--sl-color-purple-950); + --wa-color-primary-50: var(--wa-color-purple-50); + --wa-color-primary-100: var(--wa-color-purple-100); + --wa-color-primary-200: var(--wa-color-purple-200); + --wa-color-primary-300: var(--wa-color-purple-300); + --wa-color-primary-400: var(--wa-color-purple-400); + --wa-color-primary-500: var(--wa-color-purple-500); + --wa-color-primary-600: var(--wa-color-purple-600); + --wa-color-primary-700: var(--wa-color-purple-700); + --wa-color-primary-800: var(--wa-color-purple-800); + --wa-color-primary-900: var(--wa-color-purple-900); + --wa-color-primary-950: var(--wa-color-purple-950); } ``` @@ -48,7 +48,7 @@ Here's an example that modifies buttons with the `tomato-button` class.