js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use native events when possible (#590)

Browse Source 
* fix filename

* <wa-input> input + change (change not working)

* compose that horribly misleading change event

* use native blur/focus events

* update checkbox

* update color picker events

* update color picker events

* update radio group events

* update button events

* remove event options

* update select events

* update image comparer events

* update icon button events

* update slider events

* update rating events

* update radio events

* update switch event

* update textarea events

* update radio button events

* remove unused events

* cleanup

* fix react wrappers

* fix react events for real this time

* update changelog

* add note

* Update src/components/input/input.ts

Co-authored-by: Lea Verou <lea@verou.me>

* delete unused close event

* use same event type

* fix tests

* remove wa- from events in docs and examples

* fix comment

* Update docs/docs/resources/changelog.md

Co-authored-by: Lea Verou <lea@verou.me>

---------

Co-authored-by: Lea Verou <lea@verou.me>
This commit is contained in:
Cory LaViska
2025-01-23 17:52:41 -05:00
committed by GitHub
parent 099edc5186
commit e1bf5471bf
57 changed files with 365 additions and 560 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/_layouts/theme.njk
View File

@@ -49,7 +49,7 @@
</p>
<script>
document.querySelector('#mix_and_match').addEventListener('wa-change', function(event) {
document.querySelector('#mix_and_match').addEventListener('change', function(event) {
let selects = document.querySelectorAll('#mix_and_match wa-select');
let url = new URL(demo.src);

2
docs/assets/scripts/filter.js
View File

@@ -18,7 +18,7 @@ function updateResults(input) {
}
}
document.documentElement.addEventListener('wa-input', e => {
document.documentElement.addEventListener('input', e => {
if (e.target?.matches('#block-filter wa-input')) {
updateResults(e.target);
}

2
docs/assets/scripts/theme-picker.js
View File

@@ -28,7 +28,7 @@ export class ThemeAspect {
});
// Listen for selections
document.addEventListener('wa-change', event => {
document.addEventListener('change', event => {
const picker = event.target.closest(this.picker);
if (picker) {
this.set(picker.value);

6
docs/docs/components/animation.md
View File

@@ -77,9 +77,9 @@ This example demonstrates all of the baked-in animations and easings. Animations
easingName.appendChild(option);
});
animationName.addEventListener('wa-change', () => (animation.name = animationName.value));
easingName.addEventListener('wa-change', () => (animation.easing = easingName.value));
playbackRate.addEventListener('wa-input', () => (animation.playbackRate = playbackRate.value));
animationName.addEventListener('change', () => (animation.name = animationName.value));
easingName.addEventListener('change', () => (animation.easing = easingName.value));
playbackRate.addEventListener('input', () => (animation.playbackRate = playbackRate.value));
</script>
<style>

4
docs/docs/components/carousel.md
View File

@@ -249,7 +249,7 @@ This example is best demonstrated using a mouse. Try clicking and dragging the s
const carousel = container.querySelector('wa-carousel');
const toggle = container.querySelector('wa-switch');
toggle.addEventListener('wa-change', () => {
toggle.addEventListener('change', () => {
carousel.toggleAttribute('mouse-dragging', toggle.checked);
});
</script>
@@ -450,7 +450,7 @@ Use the `--aspect-ratio` custom property to customize the size of the carousel's
const carousel = document.querySelector('wa-carousel.aspect-ratio');
const aspectRatio = document.querySelector('wa-select[name="aspect"]');
aspectRatio.addEventListener('wa-change', () => {
aspectRatio.addEventlistener('change', () => {
carousel.style.setProperty('--aspect-ratio', aspectRatio.value);
});
})();

2
docs/docs/components/cheatsheet/cheatsheet.js
View File

@@ -73,4 +73,4 @@ if (name_search.value) {
filterByName(name_search.value);
}
name_search_group.addEventListener('wa-input', e => filterByName(name_search.value));
name_search_group.addEventListener('input', e => filterByName(name_search.value));

2
docs/docs/components/checkbox.md
View File

@@ -82,7 +82,7 @@ Use the `setCustomValidity()` method to set a custom validation message. This wi
});
// Update validity on change
checkbox.addEventListener('wa-change', () => {
checkbox.addEventlistener('change', () => {
checkbox.setCustomValidity(checkbox.checked ? '' : errorMessage);
});

2
docs/docs/components/format-bytes.md
View File

@@ -16,7 +16,7 @@ icon: format-bytes
const formatter = container.querySelector('wa-format-bytes');
const input = container.querySelector('wa-input');
input.addEventListener('wa-input', () => (formatter.value = input.value || 0));
input.addEventListener('input', () => (formatter.value = input.value || 0));
</script>
```

2
docs/docs/components/format-number.md
View File

@@ -19,7 +19,7 @@ Localization is handled by the browser's [`Intl.NumberFormat` API](https://devel
const formatter = container.querySelector('wa-format-number');
const input = container.querySelector('wa-input');
input.addEventListener('wa-input', () => (formatter.value = input.value || 0));
input.addEventListener('input', () => (formatter.value = input.value || 0));
</script>
```

42
docs/docs/components/popup.md
View File

@@ -54,11 +54,11 @@ Popup is a low-level utility built specifically for positioning elements. Do not
const active = container.querySelector('wa-switch[name="active"]');
const arrow = container.querySelector('wa-switch[name="arrow"]');
select.addEventListener('wa-change', () => (popup.placement = select.value));
distance.addEventListener('wa-input', () => (popup.distance = distance.value));
skidding.addEventListener('wa-input', () => (popup.skidding = skidding.value));
active.addEventListener('wa-change', () => (popup.active = active.checked));
arrow.addEventListener('wa-change', () => (popup.arrow = arrow.checked));
select.addEventListener('change', () => (popup.placement = select.value));
distance.addEventListener('input', () => (popup.distance = distance.value));
skidding.addEventListener('input', () => (popup.skidding = skidding.value));
active.addEventListener('change', () => (popup.active = active.checked));
arrow.addEventListener('change', () => (popup.arrow = arrow.checked));
</script>
<style>
@@ -145,7 +145,7 @@ Popups are inactive and hidden until the `active` attribute is applied. Removing
const popup = container.querySelector('wa-popup');
const active = container.querySelector('wa-switch');
active.addEventListener('wa-change', () => (popup.active = active.checked));
active.addEventListener('change', () => (popup.active = active.checked));
</script>
```
@@ -233,7 +233,7 @@ Since placement is preferred when using `flip`, you can observe the popup's curr
const popup = container.querySelector('wa-popup');
const select = container.querySelector('wa-select');
select.addEventListener('wa-change', () => (popup.placement = select.value));
select.addEventListener('change', () => (popup.placement = select.value));
</script>
```
@@ -277,7 +277,7 @@ Use the `distance` attribute to change the distance between the popup and its an
const popup = container.querySelector('wa-popup');
const distance = container.querySelector('wa-slider');
distance.addEventListener('wa-input', () => (popup.distance = distance.value));
distance.addEventListener('input', () => (popup.distance = distance.value));
</script>
```
@@ -321,7 +321,7 @@ The `skidding` attribute is similar to `distance`, but instead allows you to off
const popup = container.querySelector('wa-popup');
const skidding = container.querySelector('wa-slider');
skidding.addEventListener('wa-input', () => (popup.skidding = skidding.value));
skidding.addEventListener('input', () => (popup.skidding = skidding.value));
</script>
```
@@ -409,9 +409,9 @@ By default, the arrow will be aligned as close to the center of the _anchor_ as
const arrowPlacement = container.querySelector('[name="arrow-placement"]');
const arrow = container.querySelector('[name="arrow"]');
placement.addEventListener('wa-change', () => (popup.placement = placement.value));
arrowPlacement.addEventListener('wa-change', () => (popup.arrowPlacement = arrowPlacement.value));
arrow.addEventListener('wa-change', () => (popup.arrow = arrow.checked));
placement.addEventListener('change', () => (popup.placement = placement.value));
arrowPlacement.addEventListener('change', () => (popup.arrowPlacement = arrowPlacement.value));
arrow.addEventListener('change', () => (popup.arrow = arrow.checked));
</script>
</div>
```
@@ -464,7 +464,7 @@ Use the `sync` attribute to make the popup the same width or height as the ancho
const fixed = container.querySelector('wa-switch');
const sync = container.querySelector('wa-select');
sync.addEventListener('wa-change', () => (popup.sync = sync.value));
sync.addEventListener('change', () => (popup.sync = sync.value));
</script>
```
@@ -523,7 +523,7 @@ Toggle the switch and scroll the container to see the difference.
const popup = container.querySelector('wa-popup');
const fixed = container.querySelector('wa-switch');
fixed.addEventListener('wa-change', () => (popup.strategy = fixed.checked ? 'fixed' : 'absolute'));
fixed.addEventListener('change', () => (popup.strategy = fixed.checked ? 'fixed' : 'absolute'));
</script>
```
@@ -575,7 +575,7 @@ Scroll the container to see how the popup flips to prevent clipping.
const popup = container.querySelector('wa-popup');
const flip = container.querySelector('wa-switch');
flip.addEventListener('wa-change', () => (popup.flip = flip.checked));
flip.addEventListener('change', () => (popup.flip = flip.checked));
</script>
```
@@ -670,7 +670,7 @@ Toggle the switch to see the difference.
const popup = container.querySelector('wa-popup');
const shift = container.querySelector('wa-switch');
shift.addEventListener('wa-change', () => (popup.shift = shift.checked));
shift.addEventListener('change', () => (popup.shift = shift.checked));
</script>
```
@@ -731,7 +731,7 @@ Scroll the container to see the popup resize as its available space changes.
const popup = container.querySelector('wa-popup');
const autoSize = container.querySelector('wa-switch');
autoSize.addEventListener('wa-change', () => (popup.autoSize = autoSize.checked ? 'both' : ''));
autoSize.addEventListener('change', () => (popup.autoSize = autoSize.checked ? 'both' : ''));
</script>
```
@@ -782,9 +782,9 @@ When a gap exists between the anchor and the popup element, this option will add
const hoverBridge = container.querySelector('wa-switch');
const distance = container.querySelector('wa-slider[label="Distance"]');
const skidding = container.querySelector('wa-slider[label="Skidding"]');
distance.addEventListener('wa-input', () => (popup.distance = distance.value));
skidding.addEventListener('wa-input', () => (popup.skidding = skidding.value));
hoverBridge.addEventListener('wa-change', () => (popup.hoverBridge = hoverBridge.checked));
distance.addEventListener('input', () => (popup.distance = distance.value));
skidding.addEventListener('input', () => (popup.skidding = skidding.value));
hoverBridge.addEventListener('change', () => (popup.hoverBridge = hoverBridge.checked));
</script>
```
@@ -837,7 +837,7 @@ This example anchors a popup to the mouse cursor using a virtual element. As suc
};
// Only activate the popup when the switch is checked
enabled.addEventListener('wa-change', () => {
enabled.addEventListener('change', () => {
popup.active = enabled.checked;
});

2
docs/docs/components/qr-code.md
View File

@@ -24,7 +24,7 @@ QR codes are useful for providing small pieces of information to users who can q
customElements.whenDefined('wa-qr-code').then(() => {
input.value = qrCode.value;
input.addEventListener('wa-input', () => (qrCode.value = input.value));
input.addEventListener('input', () => (qrCode.value = input.value));
});
</script>

4
docs/docs/components/radio-group.md
View File

@@ -65,7 +65,7 @@ The size of [Radios](/docs/components/radio) and [Radio Buttons](/docs/component
<script>
const radioGroup = document.querySelector('.radio-group-size');
radioGroup.addEventListener('wa-change', () => {
radioGroup.addEventlistener('change', () => {
radioGroup.size = radioGroup.value;
});
</script>
@@ -127,7 +127,7 @@ Use the `setCustomValidity()` method to set a custom validation message. This wi
});
// Update validity when a selection is made
form.addEventListener('wa-change', () => {
form.addEventlistener('change', () => {
const isValid = radioGroup.value === '3';
radioGroup.setCustomValidity(isValid ? '' : errorMessage);
});

2
docs/docs/components/split-panel.md
View File

@@ -208,7 +208,7 @@ Try resizing the example below with each option and notice how the panels respon
const splitPanel = container.querySelector('wa-split-panel');
const select = container.querySelector('wa-select');
select.addEventListener('wa-change', () => (splitPanel.primary = select.value));
select.addEventlistener('change', () => (splitPanel.primary = select.value));
</script>
```

2
docs/docs/components/tree.md
View File

@@ -88,7 +88,7 @@ The `selection` attribute lets you change the selection behavior of the tree.
const selectionMode = document.querySelector('#selection-mode');
const tree = document.querySelector('.tree-selectable');
selectionMode.addEventListener('wa-change', () => {
selectionMode.addEventlistener('change', () => {
tree.querySelectorAll('wa-tree-item').forEach(item => (item.selected = false));
tree.selection = selectionMode.value;
});

40
docs/docs/experimental/themer.md
View File

@@ -803,7 +803,7 @@ hasOutline: false
const queue = [];
let inputTimeout;
variantInput.addEventListener('wa-change', () => {
variantInput.addEventlistener('change', () => {
iconList.dataset.variant = variantInput.value;
});
@@ -823,7 +823,7 @@ hasOutline: false
});
// Filter as the user types
input.addEventListener('wa-input', () => {
input.addEventListener('input', () => {
clearTimeout(inputTimeout);
inputTimeout = setTimeout(() => {
[...iconList.children].map(item => {
@@ -1084,10 +1084,10 @@ hasOutline: false
el.classList.add(`wa-theme-${theme}-${colorMode}`);
}
colorModeSelect.addEventListener('wa-change', setColorMode);
colorModeSelect.addEventlistener('change', setColorMode);
// Theme Switcher
themeSelect.addEventListener('wa-change', event => {
themeSelect.addEventlistener('change', event => {
const theme = event.target.value
const newStylesheet = Object.assign(document.createElement("link"), {
// This media: "print" allows us to lazy load the stylesheet then hot swap it on load.
@@ -1132,14 +1132,14 @@ hasOutline: false
});
// Color Palette
colorSelect.addEventListener('wa-change', event => {
colorSelect.addEventlistener('change', event => {
const colorPalette = event.target.value;
colorStylesheet.href = `/dist/styles/themes/color/${colorPalette}.css`;
});
// Brand Color
brandColor.addEventListener('wa-change', event => {
brandColor.addEventlistener('change', event => {
const documentStyles = document.documentElement.style
documentStyles.setProperty('--wa-color-primary-95', `var(--wa-color-${event.target.value}-95)`);
documentStyles.setProperty('--wa-color-primary-90', `var(--wa-color-${event.target.value}-90)`);
@@ -1223,7 +1223,7 @@ hasOutline: false
})
// Pre-generated logos
logoSelector.addEventListener('wa-change', event => {
logoSelector.addEventlistener('change', event => {
const value = event.currentTarget.value
const projectLogo = previewContainer.querySelector("#project-logo");
@@ -1279,21 +1279,21 @@ hasOutline: false
})
}
themeSelect.addEventListener('wa-change', setLogoIcons);
themeSelect.addEventlistener('change', setLogoIcons);
// Project Name
container.querySelector('[name="project-name"]').addEventListener('wa-input', event => {
container.querySelector('[name="project-name"]').addEventListener('input', event => {
previewContainer.querySelector("#project-name").innerText = event.target.value || event.target.getAttribute("placeholder")
})
// Heading font weight
resetHeadingFontWeightValue()
fontWeightHeading.addEventListener('wa-input', event => {
fontWeightHeading.addEventListener('input', event => {
document.documentElement.style.setProperty('--wa-font-weight-heading', event.target.value);
});
// Heading text
fontFamilyHeading.addEventListener('wa-change', event => {
fontFamilyHeading.addEventlistener('change', event => {
let fontFamily;
switch (event.target.value) {
case 'assistant':
@@ -1351,7 +1351,7 @@ hasOutline: false
})
// Body text
fontFamilyBody.addEventListener('wa-change', event => {
fontFamilyBody.addEventlistener('change', event => {
let fontFamily;
switch (event.target.value) {
case 'assistant':
@@ -1404,7 +1404,7 @@ hasOutline: false
// Body font weight
resetBodyFontWeightValue()
fontWeightBody.addEventListener('wa-input', event => {
fontWeightBody.addEventListener('input', event => {
document.documentElement.style.setProperty('--wa-font-weight-body', event.target.value);
});
@@ -1580,7 +1580,7 @@ hasOutline: false
}
// Swaps icons to the preferred set for the selected theme
themeSelect.addEventListener('wa-change', event => {
themeSelect.addEventlistener('change', event => {
setPreferredIcons();
showIconStyleOptions();
syncLogoIcon();
@@ -1599,32 +1599,32 @@ hasOutline: false
});
// Changes available Icon Styles and swaps icons based on the selected Icon Family
iconFamily.addEventListener('wa-change', event => {
iconFamily.addEventlistener('change', event => {
useFaIcons();
showIconStyleOptions();
});
// Swaps icons based on the selected Icon Style
iconStyle.addEventListener('wa-change', useFaIcons);
iconStyle.addEventlistener('change', useFaIcons);
// Corners
container.querySelector('[name="corners"]').addEventListener('wa-input', event => {
container.querySelector('[name="corners"]').addEventListener('input', event => {
document.documentElement.style.setProperty('--wa-border-radius-scale', `${event.target.value}`);
});
// Border width
container.querySelector('[name="border-width"]').addEventListener('wa-input', event => {
container.querySelector('[name="border-width"]').addEventListener('input', event => {
document.documentElement.style.setProperty('--wa-border-width-scale', `${event.target.value / 16}`);
});
// Border style
borderStyle.addEventListener('wa-input', event => {
borderStyle.addEventListener('input', event => {
document.documentElement.style.setProperty('--wa-border-style', event.target.value);
});
// Spacing style
spacing.addEventListener('wa-input', event => {
spacing.addEventListener('input', event => {
document.documentElement.style.setProperty('--wa-space-scale', `${event.target.value}`);
});

2
docs/docs/form-controls.md
View File

@@ -146,7 +146,7 @@ To create a custom validation error, pass a non-empty string to the `setCustomVa
alert('All fields are valid!');
});
input.addEventListener('wa-input', () => {
input.addEventListener('input', () => {
if (input.value === 'webawesome') {
input.setCustomValidity('');
} else {

5
docs/docs/resources/changelog.md
View File

@@ -14,6 +14,11 @@ During the alpha period, things might break! We take breaking changes very serio
## Next
- 🚨 BREAKING: updated all components to use native events instead of `wa-` prefixed events. This will allow components to work more like native elements in your code, frameworks, third-party plugins, etc. To update your code, simply remove the prefix from your event listeners for the following events.
- `wa-input` => `input`
- `wa-change` => `change`
- `wa-blur` => `blur` (this event will no longer bubble, use `focusout` for a bubbling version)
- `wa-focus` => `focus` (this event will no longer bubble)
- Added `.wa-callout` utility class
- Fixed a bug in `<wa-tab-group>` that prevented nested tab groups from working properly
- Fixed slot names for `show-password-icon` and `hide-password-icon` in `<wa-input>` to more intuitively represent their functions

17
docs/docs/usage.md
View File

@@ -24,22 +24,9 @@ Some properties are boolean, so they only have true/false values. To activate a
## Events
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.
You can listen for standard events such as `click`, `mouseover`, etc. as you normally would. In addition, some components have their own custom events. For example, you might listen to `wa-after-show` to determine when a dialog has been shown.
As a result, you should almost always listen for Web Awesome events instead. For example, instead of listening to `click` to determine when an `<wa-checkbox>` gets toggled, listen to `wa-change`.
```html
<wa-checkbox>Check me</wa-checkbox>
<script>
const checkbox = document.querySelector('wa-checkbox');
checkbox.addEventListener('wa-change', event => {
console.log(event.target.checked ? 'checked' : 'not checked');
});
</script>
```
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.
Custom 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

10
scripts/make-react.js
View File

@@ -24,14 +24,16 @@ for await (const component of components) {
const componentDir = path.join(reactDir, tagWithoutPrefix);
const componentFile = path.join(componentDir, 'index.ts');
const importPath = component.path.replace(/\.js$/, '.js');
const eventImports = (component.events || [])
// We only want to wrap wa- prefixed events, because the others are native
const eventsToWrap = component.events?.filter(event => event.name.startsWith('wa-')) || [];
const eventImports = eventsToWrap
.map(event => `import type { ${event.eventName} } from '../../events/events.js';`)
.join('\n');
const eventExports = (component.events || [])
const eventExports = eventsToWrap
.map(event => `export type { ${event.eventName} } from '../../events/events.js';`)
.join('\n');
const eventNameImport = (component.events || []).length > 0 ? `import { type EventName } from '@lit/react';` : ``;
const events = (component.events || [])
const eventNameImport = eventsToWrap.length > 0 ? `import { type EventName } from '@lit/react';` : ``;
const events = eventsToWrap
.map(event => `${event.reactName}: '${event.name}' as EventName<${event.eventName}>`)
.join(',\n');

6
src/components/button/button.test.ts
View File

@@ -318,13 +318,13 @@ describe('<wa-button>', () => {
});
describe('when using methods', () => {
it('should emit wa-focus and wa-blur when the button is focused and blurred', async () => {
it('should emit focus and blur when the button is focused and blurred', async () => {
const el = await fixture<WaButton>(html` <wa-button>Button</wa-button> `);
const focusHandler = sinon.spy();
const blurHandler = sinon.spy();
el.addEventListener('wa-focus', focusHandler);
el.addEventListener('wa-blur', blurHandler);
el.addEventListener('focus', focusHandler);
el.addEventListener('blur', blurHandler);
el.focus();
await waitUntil(() => focusHandler.calledOnce);

18
src/components/button/button.ts
View File

@@ -2,12 +2,10 @@ import { customElement, property, query, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { html, literal } from 'lit/static-html.js';
import { WaBlurEvent } from '../../events/blur.js';
import { WaFocusEvent } from '../../events/focus.js';
import { WaInvalidEvent } from '../../events/invalid.js';
import { MirrorValidator } from '../../internal/validators/mirror-validator.js';
import { watch } from '../../internal/watch.js';
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-formassociated-element.js';
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
import nativeStyles from '../../styles/native/button.css';
import appearanceStyles from '../../styles/utilities/appearance.css';
import sizeStyles from '../../styles/utilities/size.css';
@@ -26,8 +24,8 @@ import styles from './button.css';
* @dependency wa-icon
* @dependency wa-spinner
*
* @event wa-blur - Emitted when the button loses focus.
* @event wa-focus - Emitted when the button gains focus.
* @event blur - Emitted when the button loses focus.
* @event focus - Emitted when the button gains focus.
* @event wa-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
*
* @slot - The button's label.
@@ -142,14 +140,6 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
/** Used to override the form owner's `target` attribute. */
@property({ attribute: 'formtarget' }) formTarget: '_self' | '_blank' | '_parent' | '_top' | string;
private handleBlur() {
this.dispatchEvent(new WaBlurEvent());
}
private handleFocus() {
this.dispatchEvent(new WaFocusEvent());
}
private handleClick() {
const form = this.getForm();
@@ -274,8 +264,6 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
role=${ifDefined(isLink ? undefined : 'button')}
aria-disabled=${this.disabled ? 'true' : 'false'}
tabindex=${this.disabled ? '-1' : '0'}
@blur=${this.handleBlur}
@focus=${this.handleFocus}
@invalid=${this.isButton() ? this.handleInvalid : null}
@click=${this.handleClick}
>

18
src/components/checkbox/checkbox.test.ts
View File

@@ -60,13 +60,13 @@ describe('<wa-checkbox>', () => {
expect(el.checkValidity()).to.be.true;
});
it('should emit wa-change and wa-input when clicked', async () => {
it('should emit change and input when clicked', async () => {
const el = await fixture<WaCheckbox>(html` <wa-checkbox></wa-checkbox> `);
const changeHandler = sinon.spy();
const inputHandler = sinon.spy();
el.addEventListener('wa-change', changeHandler);
el.addEventListener('wa-input', inputHandler);
el.addEventListener('change', changeHandler);
el.addEventListener('input', inputHandler);
el.click();
await aTimeout(0);
await el.updateComplete;
@@ -76,13 +76,13 @@ describe('<wa-checkbox>', () => {
expect(el.checked).to.be.true;
});
it('should emit wa-change and wa-input when toggled with spacebar', async () => {
it('should emit change and input when toggled with spacebar', async () => {
const el = await fixture<WaCheckbox>(html` <wa-checkbox></wa-checkbox> `);
const changeHandler = sinon.spy();
const inputHandler = sinon.spy();
el.addEventListener('wa-change', changeHandler);
el.addEventListener('wa-input', inputHandler);
el.addEventListener('change', changeHandler);
el.addEventListener('input', inputHandler);
el.focus();
await el.updateComplete;
await sendKeys({ press: ' ' });
@@ -92,11 +92,11 @@ describe('<wa-checkbox>', () => {
expect(el.checked).to.be.true;
});
it('should not emit wa-change or wa-input when checked programmatically', async () => {
it('should not emit change or input when checked programmatically', async () => {
const el = await fixture<WaCheckbox>(html` <wa-checkbox></wa-checkbox> `);
el.addEventListener('wa-change', () => expect.fail('wa-change should not be emitted'));
el.addEventListener('wa-input', () => expect.fail('wa-input should not be emitted'));
el.addEventListener('change', () => expect.fail('change should not be emitted'));
el.addEventListener('input', () => expect.fail('input should not be emitted'));
el.checked = true;
await el.updateComplete;
await aTimeout(0);

31
src/components/checkbox/checkbox.ts
View File

@@ -4,14 +4,10 @@ import { customElement, property, query } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { live } from 'lit/directives/live.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 { HasSlotController } from '../../internal/slot.js';
import { RequiredValidator } from '../../internal/validators/required-validator.js';
import { watch } from '../../internal/watch.js';
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-formassociated-element.js';
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
import nativeStyles from '../../styles/native/checkbox.css';
import formControlStyles from '../../styles/shadow/form-control.css';
import sizeStyles from '../../styles/utilities/size.css';
@@ -29,10 +25,10 @@ import styles from './checkbox.css';
* @slot - The checkbox's label.
* @slot hint - Text that describes how to use the checkbox. Alternatively, you can use the `hint` attribute.
*
* @event wa-blur - Emitted when the checkbox loses focus.
* @event wa-change - Emitted when the checked state changes.
* @event wa-focus - Emitted when the checkbox gains focus.
* @event wa-input - Emitted when the checkbox receives input.
* @event blur - Emitted when the checkbox loses focus.
* @event change - Emitted when the checked state changes.
* @event focus - Emitted when the checkbox gains focus.
* @event input - Emitted when the checkbox receives input.
* @event wa-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
*
* @csspart base - The component's label .
@@ -137,19 +133,7 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement {
this.hasInteracted = true;
this.checked = !this.checked;
this.indeterminate = false;
this.dispatchEvent(new WaChangeEvent());
}
private handleBlur() {
this.dispatchEvent(new WaBlurEvent());
}
private handleInput() {
this.dispatchEvent(new WaInputEvent());
}
private handleFocus() {
this.dispatchEvent(new WaFocusEvent());
this.dispatchEvent(new Event('change'));
}
@watch('defaultChecked')
@@ -248,9 +232,6 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement {
aria-checked=${this.checked ? 'true' : 'false'}
aria-describedby="hint"
@click=${this.handleClick}
@input=${this.handleInput}
@blur=${this.handleBlur}
@focus=${this.handleFocus}
/>
<wa-icon part="${iconState}-icon icon" library="system" name=${iconName}></wa-icon>

94
src/components/color-picker/color-picker.test.ts
View File

@@ -14,31 +14,31 @@ describe('<wa-color-picker>', () => {
for (const fixture of fixtures) {
describe(`with "${fixture.type}" rendering`, () => {
describe('when the value changes', () => {
it('should not emit wa-change or wa-input when the value is changed programmatically', async () => {
it('should not emit change or input when the value is changed programmatically', async () => {
const el = await fixture<WaColorPicker>(html` <wa-color-picker></wa-color-picker> `);
const color = 'rgb(255, 204, 0)';
el.addEventListener('wa-change', () => expect.fail('wa-change should not be emitted'));
el.addEventListener('wa-input', () => expect.fail('wa-change should not be emitted'));
el.addEventListener('change', () => expect.fail('change should not be emitted'));
el.addEventListener('input', () => expect.fail('change should not be emitted'));
el.value = color;
await el.updateComplete;
});
it('should emit wa-change and wa-input when the color grid selector is moved', async () => {
it('should emit change and input when the color grid selector is moved', async () => {
const el = await fixture<WaColorPicker>(html` <wa-color-picker></wa-color-picker> `);
const trigger = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="trigger"]')!;
const grid = el.shadowRoot!.querySelector<HTMLElement>('[part~="grid"]')!;
const changeHandler = sinon.spy();
const inputHandler = sinon.spy();
el.addEventListener('wa-change', changeHandler);
el.addEventListener('wa-input', inputHandler);
el.addEventListener('change', changeHandler);
el.addEventListener('input', inputHandler);
await clickOnElement(trigger); // open the dropdown
await aTimeout(200); // wait for the dropdown to open
await el.updateComplete;
// Simulate a drag event. "wa-change" should not fire until we stop dragging.
// Simulate a drag event. "change" should not fire until we stop dragging.
await dragElement(grid, 2, 0, {
afterMouseDown: () => {
expect(changeHandler).to.have.not.been.called;
@@ -53,20 +53,20 @@ describe('<wa-color-picker>', () => {
expect(inputHandler).to.have.been.calledTwice;
});
it('should emit wa-change and wa-input when the hue slider is moved', async () => {
it('should emit change and input when the hue slider is moved', async () => {
const el = await fixture<WaColorPicker>(html` <wa-color-picker></wa-color-picker> `);
const trigger = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="trigger"]')!;
const slider = el.shadowRoot!.querySelector<HTMLElement>('[part~="hue-slider"]')!;
const changeHandler = sinon.spy();
const inputHandler = sinon.spy();
el.addEventListener('wa-change', changeHandler);
el.addEventListener('wa-input', inputHandler);
el.addEventListener('change', changeHandler);
el.addEventListener('input', inputHandler);
await clickOnElement(trigger); // open the dropdown
await aTimeout(200); // wait for the dropdown to open
// Simulate a drag event. "wa-change" should not fire until we stop dragging.
// Simulate a drag event. "change" should not fire until we stop dragging.
await dragElement(slider, 20, 0, {
afterMouseDown: () => {
expect(changeHandler).to.have.not.been.called;
@@ -85,20 +85,20 @@ describe('<wa-color-picker>', () => {
expect(inputHandler).to.have.been.calledOnce;
});
it('should emit wa-change and wa-input when the opacity slider is moved', async () => {
it('should emit change and input when the opacity slider is moved', async () => {
const el = await fixture<WaColorPicker>(html` <wa-color-picker opacity></wa-color-picker> `);
const trigger = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="trigger"]')!;
const slider = el.shadowRoot!.querySelector<HTMLElement>('[part~="opacity-slider"]')!;
const changeHandler = sinon.spy();
const inputHandler = sinon.spy();
el.addEventListener('wa-change', changeHandler);
el.addEventListener('wa-input', inputHandler);
el.addEventListener('change', changeHandler);
el.addEventListener('input', inputHandler);
await clickOnElement(trigger); // open the dropdown
await aTimeout(200); // wait for the dropdown to open
// Simulate a drag event. "wa-change" should not fire until we stop dragging.
// Simulate a drag event. "change" should not fire until we stop dragging.
await dragElement(slider, 2, 0, {
afterMouseDown: () => {
expect(changeHandler).to.have.not.been.called;
@@ -115,15 +115,15 @@ describe('<wa-color-picker>', () => {
expect(inputHandler).to.have.been.calledTwice;
});
it('should emit wa-change and wa-input when toggling the format', async () => {
it('should emit change and input when toggling the format', async () => {
const el = await fixture<WaColorPicker>(html` <wa-color-picker value="#fff"></wa-color-picker> `);
const trigger = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="trigger"]')!;
const formatButton = el.shadowRoot!.querySelector<HTMLElement>('[part~="format-button"]')!;
const changeHandler = sinon.spy();
const inputHandler = sinon.spy();
el.addEventListener('wa-change', changeHandler);
el.addEventListener('wa-input', inputHandler);
el.addEventListener('change', changeHandler);
el.addEventListener('input', inputHandler);
await clickOnElement(trigger); // open the dropdown
await aTimeout(200); // wait for the dropdown to open
@@ -160,7 +160,7 @@ describe('<wa-color-picker>', () => {
expect(getComputedStyle(swatches[2]).backgroundColor).to.equal('rgb(0, 0, 255)');
});
it('should emit wa-change and wa-input when clicking on a swatch', async () => {
it('should emit change and input when clicking on a swatch', async () => {
const el = await fixture<WaColorPicker>(html`
<wa-color-picker swatches="red; green; blue;"></wa-color-picker>
`);
@@ -169,8 +169,8 @@ describe('<wa-color-picker>', () => {
const changeHandler = sinon.spy();
const inputHandler = sinon.spy();
el.addEventListener('wa-change', changeHandler);
el.addEventListener('wa-input', inputHandler);
el.addEventListener('change', changeHandler);
el.addEventListener('input', inputHandler);
await clickOnElement(trigger); // open the dropdown
await aTimeout(200); // wait for the dropdown to open
@@ -181,15 +181,15 @@ describe('<wa-color-picker>', () => {
expect(inputHandler).to.have.been.calledOnce;
});
it('should emit wa-change and wa-input when selecting a color with the keyboard', async () => {
it('should emit change and input when selecting a color with the keyboard', async () => {
const el = await fixture<WaColorPicker>(html` <wa-color-picker></wa-color-picker> `);
const trigger = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="trigger"]')!;
const gridHandle = el.shadowRoot!.querySelector<HTMLElement>('[part~="grid-handle"]')!;
const changeHandler = sinon.spy();
const inputHandler = sinon.spy();
el.addEventListener('wa-change', changeHandler);
el.addEventListener('wa-input', inputHandler);
el.addEventListener('change', changeHandler);
el.addEventListener('input', inputHandler);
await clickOnElement(trigger); // open the dropdown
await aTimeout(200); // wait for the dropdown to open
@@ -201,15 +201,15 @@ describe('<wa-color-picker>', () => {
expect(inputHandler).to.have.been.calledOnce;
});
it('should emit wa-change and wa-input when selecting a color with the keyboard', async () => {
it('should emit change and input when selecting a color with the keyboard', async () => {
const el = await fixture<WaColorPicker>(html` <wa-color-picker></wa-color-picker> `);
const trigger = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="trigger"]')!;
const handle = el.shadowRoot!.querySelector<HTMLElement>('[part~="grid-handle"]')!;
const changeHandler = sinon.spy();
const inputHandler = sinon.spy();
el.addEventListener('wa-change', changeHandler);
el.addEventListener('wa-input', inputHandler);
el.addEventListener('change', changeHandler);
el.addEventListener('input', inputHandler);
await clickOnElement(trigger); // open the dropdown
await aTimeout(200); // wait for the dropdown to open
@@ -221,15 +221,15 @@ describe('<wa-color-picker>', () => {
expect(inputHandler).to.have.been.calledOnce;
});
it('should emit wa-change and wa-input when selecting hue with the keyboard', async () => {
it('should emit change and input when selecting hue with the keyboard', async () => {
const el = await fixture<WaColorPicker>(html` <wa-color-picker></wa-color-picker> `);
const trigger = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="trigger"]')!;
const handle = el.shadowRoot!.querySelector<HTMLElement>('[part~="hue-slider"] > span')!;
const changeHandler = sinon.spy();
const inputHandler = sinon.spy();
el.addEventListener('wa-change', changeHandler);
el.addEventListener('wa-input', inputHandler);
el.addEventListener('change', changeHandler);
el.addEventListener('input', inputHandler);
await clickOnElement(trigger); // open the dropdown
await aTimeout(200); // wait for the dropdown to open
@@ -241,15 +241,15 @@ describe('<wa-color-picker>', () => {
expect(inputHandler).to.have.been.calledOnce;
});
it('should emit wa-change and wa-input when selecting opacity with the keyboard', async () => {
it('should emit change and input when selecting opacity with the keyboard', async () => {
const el = await fixture<WaColorPicker>(html` <wa-color-picker opacity></wa-color-picker> `);
const trigger = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="trigger"]')!;
const handle = el.shadowRoot!.querySelector<HTMLElement>('[part~="opacity-slider"] > span')!;
const changeHandler = sinon.spy();
const inputHandler = sinon.spy();
el.addEventListener('wa-change', changeHandler);
el.addEventListener('wa-input', inputHandler);
el.addEventListener('change', changeHandler);
el.addEventListener('input', inputHandler);
await clickOnElement(trigger); // open the dropdown
await aTimeout(200); // wait for the dropdown to open
@@ -261,15 +261,15 @@ describe('<wa-color-picker>', () => {
expect(inputHandler).to.have.been.calledOnce;
});
it('should emit wa-change and wa-input when entering a value in the color input and pressing enter', async () => {
it('should emit change and input when entering a value in the color input and pressing enter', async () => {
const el = await fixture<WaColorPicker>(html` <wa-color-picker opacity></wa-color-picker> `);
const trigger = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="trigger"]')!;
const input = el.shadowRoot!.querySelector<HTMLElement>('[part~="input"]')!;
const changeHandler = sinon.spy();
const inputHandler = sinon.spy();
el.addEventListener('wa-change', changeHandler);
el.addEventListener('wa-input', inputHandler);
el.addEventListener('change', changeHandler);
el.addEventListener('input', inputHandler);
await clickOnElement(trigger); // open the dropdown
await aTimeout(200); // wait for the dropdown to open
@@ -283,15 +283,15 @@ describe('<wa-color-picker>', () => {
expect(inputHandler).to.have.been.calledOnce;
});
it('should emit wa-change and wa-input when entering a value in the color input and blurring the field', async () => {
it('should emit change and input when entering a value in the color input and blurring the field', async () => {
const el = await fixture<WaColorPicker>(html` <wa-color-picker opacity></wa-color-picker> `);
const trigger = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="trigger"]')!;
const input = el.shadowRoot!.querySelector<HTMLElement>('[part~="input"]')!;
const changeHandler = sinon.spy();
const inputHandler = sinon.spy();
el.addEventListener('wa-change', changeHandler);
el.addEventListener('wa-input', inputHandler);
el.addEventListener('change', changeHandler);
el.addEventListener('input', inputHandler);
await clickOnElement(trigger); // open the dropdown
await aTimeout(200); // wait for the dropdown to open
@@ -311,8 +311,8 @@ describe('<wa-color-picker>', () => {
const changeHandler = sinon.spy();
const inputHandler = sinon.spy();
el.addEventListener('wa-change', changeHandler);
el.addEventListener('wa-input', inputHandler);
el.addEventListener('change', changeHandler);
el.addEventListener('input', inputHandler);
el.swatches = ['#fff'];
await el.updateComplete;
@@ -354,14 +354,14 @@ describe('<wa-color-picker>', () => {
it.skip('should display a color with opacity when an initial value with opacity is provided', async () => {
const el = await fixture<WaColorPicker>(html` <wa-color-picker opacity value="#ff000050"></wa-color-picker> `);
const trigger = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="trigger"]')!;
const previewButton = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="preview"]');
const previewButton = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="preview"]')!;
const previewColor = getComputedStyle(previewButton).getPropertyValue('--preview-color');
expect(trigger.style.color).to.equal('rgba(255, 0, 0, 0.314)');
expect(previewColor).to.equal('#ff000050');
});
it.skip('should emit wa-focus when rendered as a dropdown and focused', async () => {
it.skip('should emit focus when rendered as a dropdown and focused', async () => {
const el = await fixture<WaColorPicker>(html`
<div>
<wa-color-picker></wa-color-picker>
@@ -374,8 +374,8 @@ describe('<wa-color-picker>', () => {
const focusHandler = sinon.spy();
const blurHandler = sinon.spy();
colorPicker.addEventListener('wa-focus', focusHandler);
colorPicker.addEventListener('wa-blur', blurHandler);
colorPicker.addEventListener('focus', focusHandler);
colorPicker.addEventListener('blur', blurHandler);
await clickOnElement(trigger);
await colorPicker.updateComplete;
@@ -391,8 +391,8 @@ describe('<wa-color-picker>', () => {
const focusHandler = sinon.spy();
const blurHandler = sinon.spy();
colorPicker.addEventListener('wa-focus', focusHandler);
colorPicker.addEventListener('wa-blur', blurHandler);
colorPicker.addEventListener('focus', focusHandler);
colorPicker.addEventListener('blur', blurHandler);
// Focus
colorPicker.focus();

82
src/components/color-picker/color-picker.ts
View File

@@ -5,17 +5,13 @@ import { customElement, eventOptions, property, query, state } from 'lit/decorat
import { classMap } from 'lit/directives/class-map.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { styleMap } from 'lit/directives/style-map.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 { WaInvalidEvent } from '../../events/invalid.js';
import { drag } from '../../internal/drag.js';
import { clamp } from '../../internal/math.js';
import { HasSlotController } from '../../internal/slot.js';
import { RequiredValidator } from '../../internal/validators/required-validator.js';
import { watch } from '../../internal/watch.js';
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-formassociated-element.js';
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
import formControlStyles from '../../styles/shadow/form-control.css';
import sizeStyles from '../../styles/utilities/size.css';
import visuallyHidden from '../../styles/utilities/visually-hidden.css';
@@ -54,10 +50,10 @@ declare const EyeDropper: EyeDropperConstructor;
* @slot label - The color picker's form label. Alternatively, you can use the `label` attribute.
* @slot hint - The color picker's form hint. Alternatively, you can use the `hint` attribute.
*
* @event wa-blur - Emitted when the color picker loses focus.
* @event wa-change - Emitted when the color picker's value changes.
* @event wa-focus - Emitted when the color picker receives focus.
* @event wa-input - Emitted when the color picker receives input.
* @event blur - Emitted when the color picker loses focus.
* @event change - Emitted when the color picker's value changes.
* @event focus - Emitted when the color picker receives focus.
* @event input - Emitted when the color picker receives input.
* @event wa-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
*
* @csspart base - The component's base wrapper.
@@ -266,12 +262,10 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
private handleFocusIn = () => {
this.hasFocus = true;
this.dispatchEvent(new WaFocusEvent());
};
private handleFocusOut = () => {
this.hasFocus = false;
this.dispatchEvent(new WaBlurEvent());
};
private handleFormatToggle() {
@@ -279,8 +273,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.dispatchEvent(new WaChangeEvent());
this.dispatchEvent(new WaInputEvent());
this.dispatchEvent(new Event('change'));
this.dispatchEvent(new InputEvent('input'));
}
private handleAlphaDrag(event: PointerEvent) {
@@ -300,13 +294,13 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
if (this.value !== currentValue) {
currentValue = this.value;
this.dispatchEvent(new WaInputEvent());
this.dispatchEvent(new InputEvent('input'));
}
},
onStop: () => {
if (this.value !== initialValue) {
initialValue = this.value;
this.dispatchEvent(new WaChangeEvent());
this.dispatchEvent(new Event('change'));
}
},
initialEvent: event,
@@ -330,13 +324,13 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
if (this.value !== currentValue) {
currentValue = this.value;
this.dispatchEvent(new WaInputEvent());
this.dispatchEvent(new InputEvent('input'));
}
},
onStop: () => {
if (this.value !== initialValue) {
initialValue = this.value;
this.dispatchEvent(new WaChangeEvent());
this.dispatchEvent(new Event('change'));
}
},
initialEvent: event,
@@ -363,14 +357,14 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
if (this.value !== currentValue) {
currentValue = this.value;
this.dispatchEvent(new WaInputEvent());
this.dispatchEvent(new InputEvent('input'));
}
},
onStop: () => {
this.isDraggingGridHandle = false;
if (this.value !== initialValue) {
initialValue = this.value;
this.dispatchEvent(new WaChangeEvent());
this.dispatchEvent(new Event('change'));
}
},
initialEvent: event,
@@ -406,8 +400,8 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
}
if (this.value !== oldValue) {
this.dispatchEvent(new WaChangeEvent());
this.dispatchEvent(new WaInputEvent());
this.dispatchEvent(new InputEvent('input'));
this.dispatchEvent(new Event('change'));
}
}
@@ -440,8 +434,8 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
}
if (this.value !== oldValue) {
this.dispatchEvent(new WaChangeEvent());
this.dispatchEvent(new WaInputEvent());
this.dispatchEvent(new InputEvent('input'));
this.dispatchEvent(new Event('change'));
}
}
@@ -474,12 +468,12 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
}
if (this.value !== oldValue) {
this.dispatchEvent(new WaChangeEvent());
this.dispatchEvent(new WaInputEvent());
this.dispatchEvent(new InputEvent('input'));
this.dispatchEvent(new Event('change'));
}
}
private handleInputChange(event: WaChangeEvent) {
private handleInputChange(event: Event) {
const target = event.target as HTMLInputElement;
const oldValue = this.value;
@@ -494,15 +488,15 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
}
if (this.value !== oldValue) {
this.dispatchEvent(new WaChangeEvent());
this.dispatchEvent(new WaInputEvent());
this.dispatchEvent(new InputEvent('input'));
this.dispatchEvent(new Event('change'));
}
}
private handleInputInput(event: WaInputEvent) {
private handleInputInput(event: InputEvent) {
this.updateValidity();
// Prevent the `<wa-input>` element's `wa-input` event from bubbling up
// Prevent the `<wa-input>` element's `input` event from bubbling up
event.stopPropagation();
}
@@ -515,8 +509,8 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
this.input.value = this.value;
if (this.value !== oldValue) {
this.dispatchEvent(new WaChangeEvent());
this.dispatchEvent(new WaInputEvent());
this.dispatchEvent(new InputEvent('input'));
this.dispatchEvent(new Event('change'));
}
setTimeout(() => this.input.select());
@@ -691,8 +685,8 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
this.setColor(colorSelectionResult.sRGBHex);
if (this.value !== oldValue) {
this.dispatchEvent(new WaChangeEvent());
this.dispatchEvent(new WaInputEvent());
this.dispatchEvent(new InputEvent('input'));
this.dispatchEvent(new Event('change'));
}
})
.catch(() => {
@@ -707,8 +701,8 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
this.setColor(color);
if (this.value !== oldValue) {
this.dispatchEvent(new WaChangeEvent());
this.dispatchEvent(new WaInputEvent());
this.dispatchEvent(new InputEvent('input'));
this.dispatchEvent(new Event('change'));
}
}
}
@@ -1008,10 +1002,10 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
?disabled=${this.disabled}
aria-label=${this.localize.term('currentValue')}
@keydown=${this.handleInputKeyDown}
@wa-change=${this.handleInputChange}
@wa-input=${this.handleInputInput}
@wa-blur=${this.stopNestedEventPropagation}
@wa-focus=${this.stopNestedEventPropagation}
@change=${this.handleInputChange}
@input=${this.handleInputInput}
@blur=${this.stopNestedEventPropagation}
@focus=${this.stopNestedEventPropagation}
></wa-input>
<wa-button-group>
@@ -1029,8 +1023,8 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
caret:format-button__caret
"
@click=${this.handleFormatToggle}
@wa-blur=${this.stopNestedEventPropagation}
@wa-focus=${this.stopNestedEventPropagation}
@blur=${this.stopNestedEventPropagation}
@focus=${this.stopNestedEventPropagation}
>
${this.setLetterCase(this.format)}
</wa-button>
@@ -1049,8 +1043,8 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
caret:eye-dropper-button__caret
"
@click=${this.handleEyeDropper}
@wa-blur=${this.stopNestedEventPropagation}
@wa-focus=${this.stopNestedEventPropagation}
@blur=${this.stopNestedEventPropagation}
@focus=${this.stopNestedEventPropagation}
>
<wa-icon
library="system"

6
src/components/icon-button/icon-button.test.ts
View File

@@ -146,13 +146,13 @@ describe('<wa-icon-button>', () => {
});
describe('when using methods', () => {
it('should emit wa-focus and wa-blur when the button is focused and blurred', async () => {
it('should emit focus and blur when the button is focused and blurred', async () => {
const el = await fixture<WaIconButton>(html` <wa-icon-button></wa-icon-button> `);
const focusHandler = sinon.spy();
const blurHandler = sinon.spy();
el.addEventListener('wa-focus', focusHandler);
el.addEventListener('wa-blur', blurHandler);
el.addEventListener('focus', focusHandler);
el.addEventListener('blur', blurHandler);
el.focus();
await waitUntil(() => focusHandler.calledOnce);

18
src/components/icon-button/icon-button.ts
View File

@@ -2,9 +2,7 @@ import { customElement, property, query } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { html, literal } from 'lit/static-html.js';
import { WaBlurEvent } from '../../events/blur.js';
import { WaFocusEvent } from '../../events/focus.js';
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-formassociated-element.js';
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
import '../icon/icon.js';
import styles from './icon-button.css';
@@ -16,8 +14,8 @@ import styles from './icon-button.css';
*
* @dependency wa-icon
*
* @event wa-blur - Emitted when the icon button loses focus.
* @event wa-focus - Emitted when the icon button gains focus.
* @event blur - Emitted when the icon button loses focus.
* @event focus - Emitted when the icon button gains focus.
*
* @cssproperty --background-color-hover - The color of the button's background on hover.
*
@@ -71,14 +69,6 @@ export default class WaIconButton extends WebAwesomeFormAssociatedElement {
/** Disables the button. */
@property({ type: Boolean }) disabled = false;
private handleBlur() {
this.dispatchEvent(new WaBlurEvent());
}
private handleFocus() {
this.dispatchEvent(new WaFocusEvent());
}
private handleClick(event: MouseEvent) {
if (this.disabled) {
event.preventDefault();
@@ -122,8 +112,6 @@ export default class WaIconButton extends WebAwesomeFormAssociatedElement {
aria-disabled=${this.disabled ? 'true' : 'false'}
aria-label="${this.label}"
tabindex=${this.disabled ? '-1' : '0'}
@blur=${this.handleBlur}
@focus=${this.handleFocus}
@click=${this.handleClick}
>
<wa-icon

2
src/components/image-comparer/image-comparer.test.ts
View File

@@ -37,7 +37,7 @@ describe('<wa-image-comparer>', () => {
`);
const handler = sinon.spy();
el.addEventListener('wa-change', handler, { once: true });
el.addEventListener('change', handler, { once: true });
el.position = 40;
await el.updateComplete;

5
src/components/image-comparer/image-comparer.ts
View File

@@ -1,7 +1,6 @@
import { html } from 'lit';
import { customElement, property, query } from 'lit/decorators.js';
import { styleMap } from 'lit/directives/style-map.js';
import { WaChangeEvent } from '../../events/change.js';
import { drag } from '../../internal/drag.js';
import { clamp } from '../../internal/math.js';
import { watch } from '../../internal/watch.js';
@@ -22,7 +21,7 @@ import styles from './image-comparer.css';
* @slot after - The after image, an `<img>` or `<svg>` element.
* @slot handle - The icon used inside the handle.
*
* @event wa-change - Emitted when the position changes.
* @event change - Emitted when the position changes.
*
* @csspart base - The component's base wrapper.
* @csspart before - The container that wraps the before image.
@@ -92,7 +91,7 @@ export default class WaImageComparer extends WebAwesomeElement {
@watch('position', { waitUntilFirstUpdate: true })
handlePositionChange() {
this.dispatchEvent(new WaChangeEvent());
this.dispatchEvent(new Event('change'));
}
render() {

32
src/components/input/input.test.ts
View File

@@ -60,7 +60,7 @@ describe('<wa-input>', () => {
const label = el.shadowRoot!.querySelector('[part~="form-control-label"]')!;
const focusHandler = sinon.spy();
el.addEventListener('wa-focus', focusHandler);
el.addEventListener('focus', focusHandler);
(label as HTMLLabelElement).click();
await waitUntil(() => focusHandler.calledOnce);
@@ -312,13 +312,13 @@ describe('<wa-input>', () => {
});
describe('when the value changes', () => {
it('should emit wa-change and wa-input when the user types in the input', async () => {
it('should emit change and input when the user types in the input', async () => {
const el = await fixture<WaInput>(html` <wa-input></wa-input> `);
const inputHandler = sinon.spy();
const changeHandler = sinon.spy();
el.addEventListener('wa-input', inputHandler);
el.addEventListener('wa-change', changeHandler);
el.addEventListener('input', inputHandler);
el.addEventListener('change', changeHandler);
el.focus();
await sendKeys({ type: 'abc' });
el.blur();
@@ -328,21 +328,21 @@ describe('<wa-input>', () => {
expect(inputHandler).to.have.been.calledThrice;
});
it('should not emit wa-change or wa-input when the value is set programmatically', async () => {
it('should not emit change or input when the value is set programmatically', async () => {
const el = await fixture<WaInput>(html` <wa-input></wa-input> `);
el.addEventListener('wa-change', () => expect.fail('wa-change should not be emitted'));
el.addEventListener('wa-input', () => expect.fail('wa-input should not be emitted'));
el.addEventListener('change', () => expect.fail('change should not be emitted'));
el.addEventListener('input', () => expect.fail('input should not be emitted'));
el.value = 'abc';
await el.updateComplete;
});
it('should not emit wa-change or wa-input when calling setRangeText()', async () => {
it('should not emit change or input when calling setRangeText()', async () => {
const el = await fixture<WaInput>(html` <wa-input value="hi there"></wa-input> `);
el.addEventListener('wa-change', () => expect.fail('wa-change should not be emitted'));
el.addEventListener('wa-input', () => expect.fail('wa-input should not be emitted'));
el.addEventListener('change', () => expect.fail('change should not be emitted'));
el.addEventListener('input', () => expect.fail('input should not be emitted'));
el.focus();
el.setSelectionRange(0, 2);
el.setRangeText('hello');
@@ -399,21 +399,21 @@ describe('<wa-input>', () => {
expect(el.value).to.equal('0');
});
it('should not emit wa-input or wa-change when stepUp() is called programmatically', async () => {
it('should not emit input or change when stepUp() is called programmatically', async () => {
const el = await fixture<WaInput>(html` <wa-input type="number" step="2" value="2"></wa-input> `);
el.addEventListener('wa-change', () => expect.fail('wa-change should not be emitted'));
el.addEventListener('wa-input', () => expect.fail('wa-input should not be emitted'));
el.addEventListener('change', () => expect.fail('change should not be emitted'));
el.addEventListener('input', () => expect.fail('input should not be emitted'));
el.stepUp();
await el.updateComplete;
});
it('should not emit wa-input and wa-change when stepDown() is called programmatically', async () => {
it('should not emit input and change when stepDown() is called programmatically', async () => {
const el = await fixture<WaInput>(html` <wa-input type="number" step="2" value="2"></wa-input> `);
el.addEventListener('wa-change', () => expect.fail('wa-change should not be emitted'));
el.addEventListener('wa-input', () => expect.fail('wa-input should not be emitted'));
el.addEventListener('change', () => expect.fail('change should not be emitted'));
el.addEventListener('input', () => expect.fail('input should not be emitted'));
el.stepDown();
await el.updateComplete;

35
src/components/input/input.ts
View File

@@ -3,15 +3,11 @@ import { customElement, property, query, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { live } from 'lit/directives/live.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 { HasSlotController } from '../../internal/slot.js';
import { MirrorValidator } from '../../internal/validators/mirror-validator.js';
import { watch } from '../../internal/watch.js';
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-formassociated-element.js';
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
import nativeStyles from '../../styles/native/input.css';
import formControlStyles from '../../styles/shadow/form-control.css';
import appearanceStyles from '../../styles/utilities/appearance.css';
@@ -37,11 +33,11 @@ import styles from './input.css';
* @slot hide-password-icon - An icon to use in lieu of the default hide password icon.
* @slot hint - Text that describes how to use the input. Alternatively, you can use the `hint` attribute.
*
* @event wa-blur - Emitted when the control loses focus.
* @event wa-change - Emitted when an alteration to the control's value is committed by the user.
* @event blur - Emitted when the control loses focus.
* @event change - Emitted when an alteration to the control's value is committed by the user.
* @event focus - Emitted when the control gains focus.
* @event input - Emitted when the control receives input.
* @event wa-clear - Emitted when the clear button is activated.
* @event wa-focus - Emitted when the control gains focus.
* @event wa-input - Emitted when the control receives input.
* @event wa-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
*
* @csspart label - The label
@@ -70,7 +66,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
return [...super.validators, MirrorValidator()];
}
assumeInteractionOn = ['wa-blur', 'wa-input'];
assumeInteractionOn = ['blur', 'input'];
private readonly hasSlotController = new HasSlotController(this, 'hint', 'label');
private readonly localize = new LocalizeController(this);
@@ -227,13 +223,9 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
*/
@property({ attribute: 'with-hint', type: Boolean }) withHint = false;
private handleBlur() {
this.dispatchEvent(new WaBlurEvent());
}
private handleChange() {
private handleChange(event: Event) {
this.dispatchComposedEvent(event);
this.value = this.input.value;
this.dispatchEvent(new WaChangeEvent());
}
private handleClearClick(event: MouseEvent) {
@@ -242,20 +234,15 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
if (this.value !== '') {
this.value = '';
this.dispatchEvent(new WaClearEvent());
this.dispatchEvent(new WaInputEvent());
this.dispatchEvent(new WaChangeEvent());
this.dispatchEvent(new InputEvent('input'));
this.dispatchEvent(new Event('change'));
}
this.input.focus();
}
private handleFocus() {
this.dispatchEvent(new WaFocusEvent());
}
private handleInput() {
this.value = this.input.value;
this.dispatchEvent(new WaInputEvent());
}
private handleKeyDown(event: KeyboardEvent) {
@@ -445,8 +432,6 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
@change=${this.handleChange}
@input=${this.handleInput}
@keydown=${this.handleKeyDown}
@focus=${this.handleFocus}
@blur=${this.handleBlur}
/>
${isClearIconVisible

18
src/components/radio-button/radio-button.ts
View File

@@ -2,11 +2,9 @@ import { customElement, property, query } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { html } from 'lit/static-html.js';
import { WaBlurEvent } from '../../events/blur.js';
import { WaFocusEvent } from '../../events/focus.js';
import { HasSlotController } from '../../internal/slot.js';
import { watch } from '../../internal/watch.js';
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-formassociated-element.js';
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
import nativeStyles from '../../styles/native/button.css';
import appearanceStyles from '../../styles/utilities/appearance.css';
import sizeStyles from '../../styles/utilities/size.css';
@@ -24,8 +22,8 @@ import styles from './radio-button.css';
* @slot prefix - A presentational prefix icon or similar element.
* @slot suffix - A presentational suffix icon or similar element.
*
* @event wa-blur - Emitted when the button loses focus.
* @event wa-focus - Emitted when the button gains focus.
* @event blur - Emitted when the button loses focus.
* @event focus - Emitted when the button gains focus.
*
* @cssproperty --background-color - The button's background color.
* @cssproperty --background-color-active - The button's background color when active.
@@ -107,10 +105,6 @@ export default class WaRadioButton extends WebAwesomeFormAssociatedElement {
this.setAttribute('role', 'presentation');
}
private handleBlur() {
this.dispatchEvent(new WaBlurEvent());
}
private handleClick(e: MouseEvent) {
if (this.disabled) {
e.preventDefault();
@@ -121,10 +115,6 @@ export default class WaRadioButton extends WebAwesomeFormAssociatedElement {
this.checked = true;
}
private handleFocus() {
this.dispatchEvent(new WaFocusEvent());
}
@watch('disabled', { waitUntilFirstUpdate: true })
handleDisabledChange() {
this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
@@ -164,8 +154,6 @@ export default class WaRadioButton extends WebAwesomeFormAssociatedElement {
aria-disabled=${this.disabled}
type="button"
value=${ifDefined(this.value)}
@blur=${this.handleBlur}
@focus=${this.handleFocus}
@click=${this.handleClick}
>
<slot name="prefix" part="prefix" class="prefix"></slot>

31
src/components/radio-group/radio-group.test.ts
View File

@@ -2,7 +2,6 @@ import { aTimeout, expect, oneEvent } from '@open-wc/testing';
import { sendKeys } from '@web/test-runner-commands';
import { html } from 'lit';
import sinon from 'sinon';
import type { WaChangeEvent } from '../../events/change.js';
import { clickOnElement } from '../../internal/test.js';
import { fixtures } from '../../internal/test/fixture.js';
import { runFormControlBaseTests } from '../../internal/test/form-control-base-tests.js';
@@ -326,7 +325,7 @@ describe('<wa-radio-group>', () => {
const validFocusHandler = sinon.spy();
Array.from(el.querySelectorAll<WaRadio>('wa-radio')).forEach(radio =>
radio.addEventListener('wa-focus', validFocusHandler),
radio.addEventListener('focus', validFocusHandler),
);
expect(validFocusHandler).to.not.have.been.called;
@@ -350,8 +349,8 @@ describe('<wa-radio-group>', () => {
const disabledRadio = el.querySelector('#radio-0')!;
const validRadio = el.querySelector('#radio-1')!;
disabledRadio.addEventListener('wa-focus', invalidFocusHandler);
validRadio.addEventListener('wa-focus', validFocusHandler);
disabledRadio.addEventListener('focus', invalidFocusHandler);
validRadio.addEventListener('focus', validFocusHandler);
expect(invalidFocusHandler).to.not.have.been.called;
expect(validFocusHandler).to.not.have.been.called;
@@ -378,8 +377,8 @@ describe('<wa-radio-group>', () => {
const disabledRadio = el.querySelector('#radio-0')!;
const validRadio = el.querySelector('#radio-2')!;
disabledRadio.addEventListener('wa-focus', invalidFocusHandler);
validRadio.addEventListener('wa-focus', validFocusHandler);
disabledRadio.addEventListener('focus', invalidFocusHandler);
validRadio.addEventListener('focus', validFocusHandler);
expect(invalidFocusHandler).to.not.have.been.called;
expect(validFocusHandler).to.not.have.been.called;
@@ -394,7 +393,7 @@ describe('<wa-radio-group>', () => {
});
describe('when the value changes', () => {
it('should emit wa-change when toggled with the arrow keys', async () => {
it('should emit change when toggled with the arrow keys', async () => {
const radioGroup = await fixture<WaRadioGroup>(html`
<wa-radio-group>
<wa-radio id="radio-1" value="1"></wa-radio>
@@ -405,8 +404,8 @@ describe('<wa-radio-group>', () => {
const changeHandler = sinon.spy();
const inputHandler = sinon.spy();
radioGroup.addEventListener('wa-change', changeHandler);
radioGroup.addEventListener('wa-input', inputHandler);
radioGroup.addEventListener('change', changeHandler);
radioGroup.addEventListener('input', inputHandler);
firstRadio.focus();
await sendKeys({ press: 'ArrowRight' });
await radioGroup.updateComplete;
@@ -416,7 +415,7 @@ describe('<wa-radio-group>', () => {
expect(radioGroup.value).to.equal('2');
});
it('should emit wa-change and wa-input when clicked', async () => {
it('should emit change and input when clicked', async () => {
const radioGroup = await fixture<WaRadioGroup>(html`
<wa-radio-group>
<wa-radio id="radio-1" value="1"></wa-radio>
@@ -425,12 +424,12 @@ describe('<wa-radio-group>', () => {
`);
const radio = radioGroup.querySelector<WaRadio>('#radio-1')!;
setTimeout(() => radio.click());
const event = (await oneEvent(radioGroup, 'wa-change')) as WaChangeEvent;
const event = await oneEvent(radioGroup, 'change');
expect(event.target).to.equal(radioGroup);
expect(radioGroup.value).to.equal('1');
});
it('should emit wa-change and wa-input when toggled with spacebar', async () => {
it('should emit change and input when toggled with spacebar', async () => {
const radioGroup = await fixture<WaRadioGroup>(html`
<wa-radio-group>
<wa-radio id="radio-1" value="1"></wa-radio>
@@ -440,12 +439,12 @@ describe('<wa-radio-group>', () => {
const radio = radioGroup.querySelector<WaRadio>('#radio-1')!;
radio.focus();
setTimeout(() => sendKeys({ press: ' ' }));
const event = (await oneEvent(radioGroup, 'wa-change')) as WaChangeEvent;
const event = await oneEvent(radioGroup, 'change');
expect(event.target).to.equal(radioGroup);
expect(radioGroup.value).to.equal('1');
});
it('should not emit wa-change or wa-input when the value is changed programmatically', async () => {
it('should not emit change or input when the value is changed programmatically', async () => {
const radioGroup = await fixture<WaRadioGroup>(html`
<wa-radio-group value="1">
<wa-radio id="radio-1" value="1"></wa-radio>
@@ -453,8 +452,8 @@ describe('<wa-radio-group>', () => {
</wa-radio-group>
`);
radioGroup.addEventListener('wa-change', () => expect.fail('wa-change should not be emitted'));
radioGroup.addEventListener('wa-input', () => expect.fail('wa-input should not be emitted'));
radioGroup.addEventListener('change', () => expect.fail('change should not be emitted'));
radioGroup.addEventListener('input', () => expect.fail('input should not be emitted'));
radioGroup.value = '2';
await radioGroup.updateComplete;
});

16
src/components/radio-group/radio-group.ts
View File

@@ -1,13 +1,11 @@
import { html, isServer } from 'lit';
import { customElement, property, query, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { WaChangeEvent } from '../../events/change.js';
import { WaInputEvent } from '../../events/input.js';
import { uniqueId } from '../../internal/math.js';
import { HasSlotController } from '../../internal/slot.js';
import { RequiredValidator } from '../../internal/validators/required-validator.js';
import { watch } from '../../internal/watch.js';
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-formassociated-element.js';
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
import formControlStyles from '../../styles/shadow/form-control.css';
import buttonGroupStyles from '../../styles/utilities/button-group.css';
import sizeStyles from '../../styles/utilities/size.css';
@@ -29,8 +27,8 @@ import styles from './radio-group.css';
* attribute.
* @slot hint - Text that describes how to use the radio group. Alternatively, you can use the `hint` attribute.
*
* @event wa-change - Emitted when the radio group's selected value changes.
* @event wa-input - Emitted when the radio group receives user input.
* @event change - Emitted when the radio group's selected value changes.
* @event input - Emitted when the radio group receives user input.
* @event wa-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
*
* @csspart form-control - The form control that wraps the label, input, and hint.
@@ -159,8 +157,8 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
}
if (this.value !== oldValue) {
this.dispatchEvent(new WaChangeEvent());
this.dispatchEvent(new WaInputEvent());
this.dispatchEvent(new InputEvent('input'));
this.dispatchEvent(new Event('change'));
}
};
@@ -290,8 +288,8 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
}
if (this.value !== oldValue) {
this.dispatchEvent(new WaChangeEvent());
this.dispatchEvent(new WaInputEvent());
this.dispatchEvent(new InputEvent('input'));
this.dispatchEvent(new Event('change'));
}
event.preventDefault();

18
src/components/radio/radio.ts
View File

@@ -1,10 +1,8 @@
import { html, isServer } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { WaBlurEvent } from '../../events/blur.js';
import { WaFocusEvent } from '../../events/focus.js';
import { watch } from '../../internal/watch.js';
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-formassociated-element.js';
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
import nativeStyles from '../../styles/native/radio.css';
import sizeStyles from '../../styles/utilities/size.css';
import '../icon/icon.js';
@@ -20,8 +18,8 @@ import styles from './radio.css';
*
* @slot - The radio's label.
*
* @event wa-blur - Emitted when the control loses focus.
* @event wa-focus - Emitted when the control gains focus.
* @event blur - Emitted when the control loses focus.
* @event focus - Emitted when the control gains focus.
*
* @csspart base - The component's base wrapper.
* @csspart control - The circular container that wraps the radio's checked state.
@@ -69,8 +67,6 @@ export default class WaRadio extends WebAwesomeFormAssociatedElement {
super();
if (!isServer) {
this.addEventListener('click', this.handleClick);
this.addEventListener('blur', this.handleBlur);
this.addEventListener('focus', this.handleFocus);
}
}
@@ -79,14 +75,6 @@ export default class WaRadio extends WebAwesomeFormAssociatedElement {
this.setInitialAttributes();
}
private handleBlur = () => {
this.dispatchEvent(new WaBlurEvent());
};
private handleFocus = () => {
this.dispatchEvent(new WaFocusEvent());
};
private setInitialAttributes() {
this.setAttribute('role', 'radio');
this.tabIndex = 0;

16
src/components/rating/rating.test.ts
View File

@@ -54,12 +54,12 @@ describe('<wa-rating>', () => {
expect(base.getAttribute('aria-valuenow')).to.equal('3');
});
it('should emit wa-change when clicked', async () => {
it('should emit change when clicked', async () => {
const el = await fixture<WaRating>(html` <wa-rating></wa-rating> `);
const lastSymbol = el.shadowRoot!.querySelector<HTMLSpanElement>('.symbol:last-child')!;
const changeHandler = sinon.spy();
el.addEventListener('wa-change', changeHandler);
el.addEventListener('change', changeHandler);
await clickOnElement(lastSymbol);
await el.updateComplete;
@@ -68,11 +68,11 @@ describe('<wa-rating>', () => {
expect(el.value).to.equal(5);
});
it('should emit wa-change when the value is changed with the keyboard', async () => {
it('should emit change when the value is changed with the keyboard', async () => {
const el = await fixture<WaRating>(html` <wa-rating></wa-rating> `);
const changeHandler = sinon.spy();
el.addEventListener('wa-change', changeHandler);
el.addEventListener('change', changeHandler);
el.focus();
await el.updateComplete;
await sendKeys({ press: 'ArrowRight' });
@@ -82,12 +82,12 @@ describe('<wa-rating>', () => {
expect(el.value).to.equal(1);
});
it('should not emit wa-change when disabled', async () => {
it('should not emit change when disabled', async () => {
const el = await fixture<WaRating>(html` <wa-rating value="5" disabled></wa-rating> `);
const lastSymbol = el.shadowRoot!.querySelector<HTMLSpanElement>('.symbol:last-child')!;
const changeHandler = sinon.spy();
el.addEventListener('wa-change', changeHandler);
el.addEventListener('change', changeHandler);
await clickOnElement(lastSymbol);
await el.updateComplete;
@@ -96,9 +96,9 @@ describe('<wa-rating>', () => {
expect(el.value).to.equal(5);
});
it('should not emit wa-change when the value is changed programmatically', async () => {
it('should not emit change when the value is changed programmatically', async () => {
const el = await fixture<WaRating>(html` <wa-rating label="Test" value="1"></wa-rating> `);
el.addEventListener('wa-change', () => expect.fail('wa-change incorrectly emitted'));
el.addEventListener('change', () => expect.fail('change incorrectly emitted'));
el.value = 5;
await el.updateComplete;
});

9
src/components/rating/rating.ts
View File

@@ -3,7 +3,6 @@ import { customElement, eventOptions, property, query, state } from 'lit/decorat
import { classMap } from 'lit/directives/class-map.js';
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 { clamp } from '../../internal/math.js';
import { watch } from '../../internal/watch.js';
@@ -20,7 +19,7 @@ import styles from './rating.css';
*
* @dependency wa-icon
*
* @event wa-change - Emitted when the rating's value changes.
* @event change - Emitted when the rating's value changes.
* @event {{ phase: 'start' | 'move' | 'end', value: number }} wa-hover - Emitted when the user hovers over a value. The
* `phase` property indicates when hovering starts, moves to a new value, or ends. The `value` property tells what the
* rating's value would be if the user were to commit to the hovered value.
@@ -96,7 +95,7 @@ export default class WaRating extends WebAwesomeElement {
}
this.setValue(this.getValueFromMousePosition(event));
this.dispatchEvent(new WaChangeEvent());
this.dispatchEvent(new Event('change'));
}
private setValue(newValue: number) {
@@ -140,7 +139,7 @@ export default class WaRating extends WebAwesomeElement {
}
if (this.value !== oldValue) {
this.dispatchEvent(new WaChangeEvent());
this.dispatchEvent(new Event('change'));
}
}
@@ -173,7 +172,7 @@ export default class WaRating extends WebAwesomeElement {
private handleTouchEnd(event: TouchEvent) {
this.isHovering = false;
this.setValue(this.hoverValue);
this.dispatchEvent(new WaChangeEvent());
this.dispatchEvent(new Event('change'));
// Prevent click on mobile devices
event.preventDefault();

38
src/components/select/select.test.ts
View File

@@ -107,7 +107,7 @@ describe('<wa-select>', () => {
const label = el.shadowRoot!.querySelector('[part~="form-control-label"]')!;
const submitHandler = sinon.spy();
el.addEventListener('wa-focus', submitHandler);
el.addEventListener('focus', submitHandler);
(label as HTMLLabelElement).click();
await waitUntil(() => submitHandler.calledOnce);
@@ -115,7 +115,7 @@ describe('<wa-select>', () => {
});
describe('when the value changes', () => {
it('should emit wa-change when the value is changed with the mouse', async () => {
it('should emit change when the value is changed with the mouse', async () => {
const el = await fixture<WaSelect>(html`
<wa-select value="option-1">
<wa-option value="option-1">Option 1</wa-option>
@@ -132,8 +132,8 @@ describe('<wa-select>', () => {
const changeHandler = sinon.spy();
const inputHandler = sinon.spy();
el.addEventListener('wa-change', changeHandler);
el.addEventListener('wa-input', inputHandler);
el.addEventListener('change', changeHandler);
el.addEventListener('input', inputHandler);
await el.show();
await clickOnElement(secondOption);
@@ -144,7 +144,7 @@ describe('<wa-select>', () => {
expect(el.value).to.equal('option-2');
});
it('should emit wa-change and wa-input when the value is changed with the keyboard', async () => {
it('should emit change and input when the value is changed with the keyboard', async () => {
const el = await fixture<WaSelect>(html`
<wa-select value="option-1">
<wa-option value="option-1">Option 1</wa-option>
@@ -155,8 +155,8 @@ describe('<wa-select>', () => {
const changeHandler = sinon.spy();
const inputHandler = sinon.spy();
el.addEventListener('wa-change', changeHandler);
el.addEventListener('wa-input', inputHandler);
el.addEventListener('change', changeHandler);
el.addEventListener('input', inputHandler);
el.focus();
await el.updateComplete;
@@ -175,7 +175,7 @@ describe('<wa-select>', () => {
expect(el.value).to.equal('option-3');
});
it('should not emit wa-change or wa-input when the value is changed programmatically', async () => {
it('should not emit change or input when the value is changed programmatically', async () => {
const el = await fixture<WaSelect>(html`
<wa-select value="option-1">
<wa-option value="option-1">Option 1</wa-option>
@@ -184,14 +184,14 @@ describe('<wa-select>', () => {
</wa-select>
`);
el.addEventListener('wa-change', () => expect.fail('wa-change should not be emitted'));
el.addEventListener('wa-input', () => expect.fail('wa-input should not be emitted'));
el.addEventListener('change', () => expect.fail('change should not be emitted'));
el.addEventListener('input', () => expect.fail('input should not be emitted'));
el.value = 'option-2';
await el.updateComplete;
});
it('should emit wa-change and wa-input with the correct validation message when the value changes', async () => {
it('should emit change and input with the correct validation message when the value changes', async () => {
const el = await fixture<WaSelect>(html`
<wa-select required>
<wa-option value="option-1">Option 1</wa-option>
@@ -206,8 +206,8 @@ describe('<wa-select>', () => {
}
});
el.addEventListener('wa-change', handler);
el.addEventListener('wa-input', handler);
el.addEventListener('change', handler);
el.addEventListener('input', handler);
await clickOnElement(el);
await aTimeout(500);
@@ -532,7 +532,7 @@ describe('<wa-select>', () => {
expect(displayInput.value).to.equal('updated');
});
it('should emit wa-focus and wa-blur when receiving and losing focus', async () => {
it('should emit focus and blur when receiving and losing focus', async () => {
const el = await fixture<WaSelect>(html`
<wa-select value="option-1">
<wa-option value="option-1">Option 1</wa-option>
@@ -543,8 +543,8 @@ describe('<wa-select>', () => {
const focusHandler = sinon.spy();
const blurHandler = sinon.spy();
el.addEventListener('wa-focus', focusHandler);
el.addEventListener('wa-blur', blurHandler);
el.addEventListener('focus', focusHandler);
el.addEventListener('blur', blurHandler);
el.focus();
await el.updateComplete;
@@ -574,7 +574,7 @@ describe('<wa-select>', () => {
expect(clearHandler).to.have.been.calledOnce;
});
it('should emit wa-change and wa-input when a tag is removed', async () => {
it('should emit change and input when a tag is removed', async () => {
const el = await fixture<WaSelect>(html`
<wa-select value="option-1 option-2 option-3" multiple>
<wa-option value="option-1">Option 1</wa-option>
@@ -587,8 +587,8 @@ describe('<wa-select>', () => {
const tag = el.shadowRoot!.querySelector('[part~="tag"]')!;
const removeButton = tag.shadowRoot!.querySelector('[part~="remove-button"]')!;
el.addEventListener('wa-change', changeHandler);
el.addEventListener('wa-input', inputHandler);
el.addEventListener('change', changeHandler);
el.addEventListener('input', inputHandler);
// The offsets are a funky hack for Firefox.
await clickOnElement(removeButton, 'center', 1, 1);

38
src/components/select/select.ts
View File

@@ -5,12 +5,8 @@ import { classMap } from 'lit/directives/class-map.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 type { WaRemoveEvent } from '../../events/remove.js';
import { WaShowEvent } from '../../events/show.js';
import { animateWithClass } from '../../internal/animate.js';
@@ -19,7 +15,7 @@ import { scrollIntoView } from '../../internal/scroll.js';
import { HasSlotController } from '../../internal/slot.js';
import { RequiredValidator } from '../../internal/validators/required-validator.js';
import { watch } from '../../internal/watch.js';
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-formassociated-element.js';
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
import nativeStyles from '../../styles/native/select.css';
import formControlStyles from '../../styles/shadow/form-control.css';
import appearanceStyles from '../../styles/utilities/appearance.css';
@@ -50,11 +46,11 @@ import styles from './select.css';
* @slot expand-icon - The icon to show when the control is expanded and collapsed. Rotates on open and close.
* @slot hint - Text that describes how to use the input. Alternatively, you can use the `hint` attribute.
*
* @event wa-change - Emitted when the control's value changes.
* @event change - Emitted when the control's value changes.
* @event input - Emitted when the control receives input.
* @event focus - Emitted when the control gains focus.
* @event blur - Emitted when the control loses focus.
* @event wa-clear - Emitted when the control's value is cleared.
* @event wa-input - Emitted when the control receives input.
* @event wa-focus - Emitted when the control gains focus.
* @event wa-blur - Emitted when the control loses focus.
* @event wa-show - Emitted when the select's menu opens.
* @event wa-after-show - Emitted after the select's menu opens and all animations are complete.
* @event wa-hide - Emitted when the select's menu closes.
@@ -101,7 +97,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
return [...super.validators, ...validators];
}
assumeInteractionOn = ['wa-blur', 'wa-input'];
assumeInteractionOn = ['blur', 'input'];
private readonly hasSlotController = new HasSlotController(this, 'hint', 'label');
private readonly localize = new LocalizeController(this);
@@ -312,11 +308,6 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
private handleFocus() {
this.displayInput.setSelectionRange(0, 0);
this.dispatchEvent(new WaFocusEvent());
}
private handleBlur() {
this.dispatchEvent(new WaBlurEvent());
}
private handleDocumentFocusIn = (event: KeyboardEvent) => {
@@ -368,8 +359,8 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
// Emit after updating
this.updateComplete.then(() => {
this.dispatchEvent(new WaInputEvent());
this.dispatchEvent(new WaChangeEvent());
this.dispatchEvent(new InputEvent('input'));
this.dispatchEvent(new Event('change'));
});
if (!this.multiple) {
@@ -498,8 +489,8 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
// Emit after update
this.updateComplete.then(() => {
this.dispatchEvent(new WaClearEvent());
this.dispatchEvent(new WaInputEvent());
this.dispatchEvent(new WaChangeEvent());
this.dispatchEvent(new InputEvent('input'));
this.dispatchEvent(new Event('change'));
});
}
}
@@ -529,8 +520,8 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
if (this.value !== oldValue) {
// Emit after updating
this.updateComplete.then(() => {
this.dispatchEvent(new WaInputEvent());
this.dispatchEvent(new WaChangeEvent());
this.dispatchEvent(new InputEvent('input'));
this.dispatchEvent(new Event('change'));
});
}
@@ -567,8 +558,8 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
// Emit after updating
this.updateComplete.then(() => {
this.dispatchEvent(new WaInputEvent());
this.dispatchEvent(new WaChangeEvent());
this.dispatchEvent(new InputEvent('input'));
this.dispatchEvent(new Event('change'));
});
}
}
@@ -869,7 +860,6 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
role="combobox"
tabindex="0"
@focus=${this.handleFocus}
@blur=${this.handleBlur}
/>
<!-- Tags need to wait for first hydration before populating otherwise it will create a hydration mismatch. -->

24
src/components/slider/slider.test.ts
View File

@@ -50,13 +50,13 @@ describe('<wa-slider>', () => {
});
describe('when the value changes', () => {
it('should emit wa-change and wa-input and decrease the value when pressing right arrow', async () => {
it('should emit change and input and decrease the value when pressing right arrow', async () => {
const el = await fixture<WaSlider>(html` <wa-slider value="50"></wa-slider> `);
const changeHandler = sinon.spy();
const inputHandler = sinon.spy();
el.addEventListener('wa-change', changeHandler);
el.addEventListener('wa-input', inputHandler);
el.addEventListener('change', changeHandler);
el.addEventListener('input', inputHandler);
el.focus();
await sendKeys({ press: 'ArrowRight' });
await el.updateComplete;
@@ -66,30 +66,30 @@ describe('<wa-slider>', () => {
expect(inputHandler).to.have.been.calledOnce;
});
it('should not emit wa-change or wa-input when changing the value programmatically', async () => {
it('should not emit change or input when changing the value programmatically', async () => {
const el = await fixture<WaSlider>(html` <wa-slider value="0"></wa-slider> `);
el.addEventListener('wa-change', () => expect.fail('wa-change should not be emitted'));
el.addEventListener('wa-input', () => expect.fail('wa-input should not be emitted'));
el.addEventListener('change', () => expect.fail('change should not be emitted'));
el.addEventListener('input', () => expect.fail('input should not be emitted'));
el.value = 50;
await el.updateComplete;
});
it('should not emit wa-change or wa-input when stepUp() is called programmatically', async () => {
it('should not emit change or input when stepUp() is called programmatically', async () => {
const el = await fixture<WaSlider>(html` <wa-slider step="2" value="2"></wa-slider> `);
el.addEventListener('wa-change', () => expect.fail('wa-change should not be emitted'));
el.addEventListener('wa-input', () => expect.fail('wa-input should not be emitted'));
el.addEventListener('change', () => expect.fail('change should not be emitted'));
el.addEventListener('input', () => expect.fail('input should not be emitted'));
el.stepUp();
await el.updateComplete;
});
it('should not emit wa-change or wa-input when stepDown() is called programmatically', async () => {
it('should not emit change or input when stepDown() is called programmatically', async () => {
const el = await fixture<WaSlider>(html` <wa-slider step="2" value="2"></wa-slider> `);
el.addEventListener('wa-change', () => expect.fail('wa-change should not be emitted'));
el.addEventListener('wa-input', () => expect.fail('wa-input should not be emitted'));
el.addEventListener('change', () => expect.fail('change should not be emitted'));
el.addEventListener('input', () => expect.fail('input should not be emitted'));
el.stepDown();
await el.updateComplete;
});

21
src/components/slider/slider.ts
View File

@@ -3,14 +3,10 @@ import { customElement, eventOptions, property, query, state } from 'lit/decorat
import { classMap } from 'lit/directives/class-map.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { live } from 'lit/directives/live.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 { HasSlotController } from '../../internal/slot.js';
import { MirrorValidator } from '../../internal/validators/mirror-validator.js';
import { watch } from '../../internal/watch.js';
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-formassociated-element.js';
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
import sliderStyles from '../../styles/native/slider.css';
import formControlStyles from '../../styles/shadow/form-control.css';
import { LocalizeController } from '../../utilities/localize.js';
@@ -25,10 +21,10 @@ import styles from './slider.css';
* @slot label - The slider label. Alternatively, you can use the `label` attribute.
* @slot hint - Text that describes how to use the input. Alternatively, you can use the `hint` attribute.
*
* @event wa-blur - Emitted when the control loses focus.
* @event wa-change - Emitted when an alteration to the control's value is committed by the user.
* @event wa-focus - Emitted when the control gains focus.
* @event wa-input - Emitted when the control receives input.
* @event blur - Emitted when the control loses focus.
* @event change - Emitted when an alteration to the control's value is committed by the user.
* @event focus - Emitted when the control gains focus.
* @event input - Emitted when the control receives input.
* @event wa-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
*
* @csspart form-control - The form control that wraps the label, input, and hint.
@@ -160,24 +156,21 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
this.resizeObserver?.unobserve(this.input);
}
private handleChange() {
this.dispatchEvent(new WaChangeEvent());
private handleChange(event: Event) {
this.dispatchComposedEvent(event);
}
private handleInput() {
this.value = parseFloat(this.input.value);
this.dispatchEvent(new WaInputEvent());
this.syncRange();
}
private handleBlur() {
this.hasTooltip = false;
this.dispatchEvent(new WaBlurEvent());
}
private handleFocus() {
this.hasTooltip = true;
this.dispatchEvent(new WaFocusEvent());
}
@eventOptions({ passive: true })

30
src/components/switch/switch.test.ts
View File

@@ -49,13 +49,13 @@ describe('<wa-switch>', () => {
expect(el.checkValidity()).to.be.true;
});
it('should emit wa-change and wa-input when clicked', async () => {
it('should emit change and input when clicked', async () => {
const el = await fixture<WaSwitch>(html` <wa-switch></wa-switch> `);
const changeHandler = sinon.spy();
const inputHandler = sinon.spy();
el.addEventListener('wa-change', changeHandler);
el.addEventListener('wa-input', inputHandler);
el.addEventListener('change', changeHandler);
el.addEventListener('input', inputHandler);
el.click();
await el.updateComplete;
@@ -64,13 +64,13 @@ describe('<wa-switch>', () => {
expect(el.checked).to.be.true;
});
it('should emit wa-change when toggled with spacebar', async () => {
it('should emit change when toggled with spacebar', async () => {
const el = await fixture<WaSwitch>(html` <wa-switch></wa-switch> `);
const changeHandler = sinon.spy();
const inputHandler = sinon.spy();
el.addEventListener('wa-change', changeHandler);
el.addEventListener('wa-input', inputHandler);
el.addEventListener('change', changeHandler);
el.addEventListener('input', inputHandler);
el.focus();
await sendKeys({ press: ' ' });
@@ -79,13 +79,13 @@ describe('<wa-switch>', () => {
expect(el.checked).to.be.true;
});
it('should emit wa-change and wa-input when toggled with the right arrow', async () => {
it('should emit change and input when toggled with the right arrow', async () => {
const el = await fixture<WaSwitch>(html` <wa-switch></wa-switch> `);
const changeHandler = sinon.spy();
const inputHandler = sinon.spy();
el.addEventListener('wa-change', changeHandler);
el.addEventListener('wa-input', inputHandler);
el.addEventListener('change', changeHandler);
el.addEventListener('input', inputHandler);
el.focus();
await sendKeys({ press: 'ArrowRight' });
await el.updateComplete;
@@ -95,13 +95,13 @@ describe('<wa-switch>', () => {
expect(el.checked).to.be.true;
});
it('should emit wa-change and wa-input when toggled with the left arrow', async () => {
it('should emit change and input when toggled with the left arrow', async () => {
const el = await fixture<WaSwitch>(html` <wa-switch checked></wa-switch> `);
const changeHandler = sinon.spy();
const inputHandler = sinon.spy();
el.addEventListener('wa-change', changeHandler);
el.addEventListener('wa-input', inputHandler);
el.addEventListener('change', changeHandler);
el.addEventListener('input', inputHandler);
el.focus();
await sendKeys({ press: 'ArrowLeft' });
await el.updateComplete;
@@ -111,10 +111,10 @@ describe('<wa-switch>', () => {
expect(el.checked).to.be.false;
});
it('should not emit wa-change or wa-input when checked is set by JavaScript', async () => {
it('should not emit change or input when checked is set by JavaScript', async () => {
const el = await fixture<WaSwitch>(html` <wa-switch></wa-switch> `);
el.addEventListener('wa-change', () => expect.fail('wa-change incorrectly emitted'));
el.addEventListener('wa-input', () => expect.fail('wa-change incorrectly emitted'));
el.addEventListener('change', () => expect.fail('change incorrectly emitted'));
el.addEventListener('input', () => expect.fail('input incorrectly emitted'));
el.checked = true;
await el.updateComplete;
el.checked = false;

39
src/components/switch/switch.ts
View File

@@ -4,14 +4,10 @@ import { customElement, property, query } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { live } from 'lit/directives/live.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 { HasSlotController } from '../../internal/slot.js';
import { MirrorValidator } from '../../internal/validators/mirror-validator.js';
import { watch } from '../../internal/watch.js';
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-formassociated-element.js';
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
import formControlStyles from '../../styles/shadow/form-control.css';
import sizeStyles from '../../styles/utilities/size.css';
import styles from './switch.css';
@@ -25,10 +21,10 @@ import styles from './switch.css';
* @slot - The switch's label.
* @slot hint - Text that describes how to use the switch. Alternatively, you can use the `hint` attribute.
*
* @event wa-blur - Emitted when the control loses focus.
* @event wa-change - Emitted when the control's checked state changes.
* @event wa-input - Emitted when the control receives input.
* @event wa-focus - Emitted when the control gains focus.
* @event blur - Emitted when the control loses focus.
* @event change - Emitted when the control's checked state changes.
* @event input - Emitted when the control receives input.
* @event focus - Emitted when the control gains focus.
* @event wa-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
*
* @csspart base - The component's base wrapper.
@@ -117,37 +113,25 @@ export default class WaSwitch extends WebAwesomeFormAssociatedElement {
this.handleValueOrCheckedChange();
}
private handleBlur() {
this.dispatchEvent(new WaBlurEvent());
}
private handleInput() {
this.dispatchEvent(new WaInputEvent());
}
private handleClick() {
this.hasInteracted = true;
this.checked = !this.checked;
this.dispatchEvent(new WaChangeEvent());
}
private handleFocus() {
this.dispatchEvent(new WaFocusEvent());
this.dispatchEvent(new Event('change'));
}
private handleKeyDown(event: KeyboardEvent) {
if (event.key === 'ArrowLeft') {
event.preventDefault();
this.checked = false;
this.dispatchEvent(new WaChangeEvent());
this.dispatchEvent(new WaInputEvent());
this.dispatchEvent(new Event('change'));
this.dispatchEvent(new InputEvent('input'));
}
if (event.key === 'ArrowRight') {
event.preventDefault();
this.checked = true;
this.dispatchEvent(new WaChangeEvent());
this.dispatchEvent(new WaInputEvent());
this.dispatchEvent(new Event('change'));
this.dispatchEvent(new InputEvent('input'));
}
}
@@ -250,9 +234,6 @@ export default class WaSwitch extends WebAwesomeFormAssociatedElement {
aria-checked=${this.checked ? 'true' : 'false'}
aria-describedby="hint"
@click=${this.handleClick}
@input=${this.handleInput}
@blur=${this.handleBlur}
@focus=${this.handleFocus}
@keydown=${this.handleKeyDown}
/>

20
src/components/textarea/textarea.test.ts
View File

@@ -64,7 +64,7 @@ describe('<wa-textarea>', () => {
const label = el.shadowRoot!.querySelector('[part~="label"]')!;
const submitHandler = sinon.spy();
el.addEventListener('wa-focus', submitHandler);
el.addEventListener('focus', submitHandler);
(label as HTMLLabelElement).click();
await waitUntil(() => submitHandler.calledOnce);
@@ -72,13 +72,13 @@ describe('<wa-textarea>', () => {
});
describe('when the value changes', () => {
it('should emit wa-change and wa-input when the user types in the textarea', async () => {
it('should emit change and input when the user types in the textarea', async () => {
const el = await fixture<WaTextarea>(html` <wa-textarea></wa-textarea> `);
const inputHandler = sinon.spy();
const changeHandler = sinon.spy();
el.addEventListener('wa-input', inputHandler);
el.addEventListener('wa-change', changeHandler);
el.addEventListener('input', inputHandler);
el.addEventListener('change', changeHandler);
el.focus();
await sendKeys({ type: 'abc' });
el.blur();
@@ -88,21 +88,21 @@ describe('<wa-textarea>', () => {
expect(inputHandler).to.have.been.calledThrice;
});
it('should not emit wa-change or wa-input when the value is set programmatically', async () => {
it('should not emit change or input when the value is set programmatically', async () => {
const el = await fixture<WaTextarea>(html` <wa-textarea></wa-textarea> `);
el.addEventListener('wa-change', () => expect.fail('wa-change should not be emitted'));
el.addEventListener('wa-input', () => expect.fail('wa-input should not be emitted'));
el.addEventListener('change', () => expect.fail('change should not be emitted'));
el.addEventListener('input', () => expect.fail('input should not be emitted'));
el.value = 'abc';
await el.updateComplete;
});
it('should not emit wa-change or wa-input when calling setRangeText()', async () => {
it('should not emit change or input when calling setRangeText()', async () => {
const el = await fixture<WaTextarea>(html` <wa-textarea value="hi there"></wa-textarea> `);
el.addEventListener('wa-change', () => expect.fail('wa-change should not be emitted'));
el.addEventListener('wa-input', () => expect.fail('wa-input should not be emitted'));
el.addEventListener('change', () => expect.fail('change should not be emitted'));
el.addEventListener('input', () => expect.fail('input should not be emitted'));
el.focus();
el.setSelectionRange(0, 2);
el.setRangeText('hello');

27
src/components/textarea/textarea.ts
View File

@@ -4,14 +4,10 @@ import { customElement, property, query, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { live } from 'lit/directives/live.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 { HasSlotController } from '../../internal/slot.js';
import { MirrorValidator } from '../../internal/validators/mirror-validator.js';
import { watch } from '../../internal/watch.js';
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-formassociated-element.js';
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
import nativeStyles from '../../styles/native/input.css';
import formControlStyles from '../../styles/shadow/form-control.css';
import appearanceStyles from '../../styles/utilities/appearance.css';
@@ -27,10 +23,10 @@ import styles from './textarea.css';
* @slot label - The textarea's label. Alternatively, you can use the `label` attribute.
* @slot hint - Text that describes how to use the input. Alternatively, you can use the `hint` attribute.
*
* @event wa-blur - Emitted when the control loses focus.
* @event wa-change - Emitted when an alteration to the control's value is committed by the user.
* @event wa-focus - Emitted when the control gains focus.
* @event wa-input - Emitted when the control receives input.
* @event blur - Emitted when the control loses focus.
* @event change - Emitted when an alteration to the control's value is committed by the user.
* @event focus - Emitted when the control gains focus.
* @event input - Emitted when the control receives input.
* @event wa-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
*
* @csspart label - The label
@@ -54,7 +50,7 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
return [...super.validators, MirrorValidator()];
}
assumeInteractionOn = ['wa-blur', 'wa-input'];
assumeInteractionOn = ['blur', 'input'];
private readonly hasSlotController = new HasSlotController(this, 'hint', 'label');
private resizeObserver: ResizeObserver;
@@ -204,26 +200,20 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
}
private handleBlur() {
this.dispatchEvent(new WaBlurEvent());
this.checkValidity();
}
private handleChange() {
private handleChange(event: Event) {
this.valueHasChanged = true;
this.value = this.input.value;
this.setTextareaDimensions();
this.dispatchEvent(new WaChangeEvent());
this.dispatchComposedEvent(event);
this.checkValidity();
}
private handleFocus() {
this.dispatchEvent(new WaFocusEvent());
}
private handleInput() {
this.valueHasChanged = true;
this.value = this.input.value;
this.dispatchEvent(new WaInputEvent());
}
private setTextareaDimensions() {
@@ -382,7 +372,6 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
aria-describedby="hint"
@change=${this.handleChange}
@input=${this.handleInput}
@focus=${this.handleFocus}
@blur=${this.handleBlur}
></textarea>

11
src/events/blur.ts
View File

@@ -1,11 +0,0 @@
export class WaBlurEvent extends Event {
constructor() {
super('wa-blur', { bubbles: true, cancelable: false, composed: true });
}
}
declare global {
interface GlobalEventHandlersEventMap {
'wa-blur': WaBlurEvent;
}
}

11
src/events/change.ts
View File

@@ -1,11 +0,0 @@
export class WaChangeEvent extends Event {
constructor() {
super('wa-change', { bubbles: true, cancelable: false, composed: true });
}
}
declare global {
interface GlobalEventHandlersEventMap {
'wa-change': WaChangeEvent;
}
}

11
src/events/close.ts
View File

@@ -1,11 +0,0 @@
export class WaCloseEvent extends Event {
constructor() {
super('wa-close', { bubbles: true, cancelable: false, composed: true });
}
}
declare global {
interface GlobalEventHandlersEventMap {
'wa-close': WaCloseEvent;
}
}

5
src/events/events.ts
View File

@@ -2,20 +2,15 @@ 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';

11
src/events/focus.ts
View File

@@ -1,11 +0,0 @@
export class WaFocusEvent extends Event {
constructor() {
super('wa-focus', { bubbles: true, cancelable: false, composed: true });
}
}
declare global {
interface GlobalEventHandlersEventMap {
'wa-focus': WaFocusEvent;
}
}

11
src/events/input.ts
View File

@@ -1,11 +0,0 @@
export class WaInputEvent extends Event {
constructor() {
super('wa-input', { bubbles: true, cancelable: false, composed: true });
}
}
declare global {
interface GlobalEventHandlersEventMap {
'wa-input': WaInputEvent;
}
}

2
src/internal/test/form-control-base-tests.ts
View File

@@ -2,7 +2,7 @@ import { aTimeout, expect } from '@open-wc/testing';
import { html, type TemplateResult } from 'lit';
import { html as staticHTML, unsafeStatic } from 'lit/static-html.js';
import { clickOnElement } from '../test.js';
import type { WebAwesomeFormControl } from '../webawesome-formassociated-element.js';
import type { WebAwesomeFormControl } from '../webawesome-form-associated-element.js';
import type { clientFixture, hydratedFixture } from './fixture.js';
import { fixtures } from './fixture.js';

2
src/internal/validators/custom-error-validator.ts
View File

@@ -1,4 +1,4 @@
import type { Validator } from '../webawesome-formassociated-element.js';
import type { Validator } from '../webawesome-form-associated-element.js';
/**
* This validator is for if you have an exact copy of your element in the shadow DOM. Rather than needing

2
src/internal/validators/mirror-validator.ts
View File

@@ -1,4 +1,4 @@
import type { Validator } from '../webawesome-formassociated-element.js';
import type { Validator } from '../webawesome-form-associated-element.js';
/**
* This validator is for if you have an exact copy of your element in the shadow DOM. Rather than needing

2
src/internal/validators/required-validator.ts
View File

@@ -1,4 +1,4 @@
import type { Validator } from '../webawesome-formassociated-element.js';
import type { Validator } from '../webawesome-form-associated-element.js';
export interface RequiredValidatorOptions {
/** This is a cheap way for us to get translation strings for the user without having proper translations. */

11
src/internal/webawesome-element.ts
View File

@@ -159,6 +159,17 @@ export default class WebAwesomeElement extends LitElement {
return this.hasStatesSupport() ? this.internals.states.has(state) : false;
}
/**
* Given a native event, this function ensures it's composed and, if not, dispatches it again as a composed event.
* This is useful for relaying native events such as `change`, which will otherwise not be retargeted. It is safe,
* albeit sloppy, to call this on composed events, as it will no-op.
*/
dispatchComposedEvent(event: Event) {
if (!event.composed) {
this.dispatchEvent(new (event.constructor as typeof Event)(event.type, { ...event, composed: true }));
}
}
static createProperty(name: PropertyKey, options?: PropertyDeclaration): void {
if (options && options.default !== undefined && options.converter === undefined) {
// Wrap the default converter to remove the attribute if the value is the default

4
src/internal/webawesome-formassociated-element.ts → src/internal/webawesome-form-associated-element.ts
View File

@@ -95,7 +95,7 @@ export class WebAwesomeFormAssociatedElement
required: boolean = false;
assumeInteractionOn: string[] = ['wa-input'];
assumeInteractionOn: string[] = ['input'];
// Additional
input?: (HTMLElement & { value: unknown }) | HTMLInputElement | HTMLTextAreaElement;
@@ -154,7 +154,7 @@ export class WebAwesomeFormAssociatedElement
}
if (changedProperties.has('value') || changedProperties.has('disabled')) {
// @ts-expect-error Some components will use an accessors, other use a property, so we dont want to limit them.
// @ts-expect-error Some components will use an accessors, other use a property, so we don't want to limit them.
const value = this.value as unknown;
// Accounts for the snowflake case on `<wa-select>`