From 8dc49f7119a9a2564fa446e3788f4953fca7fed2 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Mon, 3 Feb 2025 10:07:21 -0500 Subject: [PATCH] fix event listeners (#647) --- docs/docs/components/carousel.md | 2 +- docs/docs/components/checkbox.md | 2 +- docs/docs/components/split-panel.md | 2 +- docs/docs/components/tree.md | 2 +- docs/docs/experimental/themer.md | 24 ++++++++++++------------ docs/docs/resources/changelog.md | 4 ++++ 6 files changed, 20 insertions(+), 16 deletions(-) diff --git a/docs/docs/components/carousel.md b/docs/docs/components/carousel.md index dad2064b6..d909d037c 100644 --- a/docs/docs/components/carousel.md +++ b/docs/docs/components/carousel.md @@ -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('change', () => { + aspectRatio.addEventListener('change', () => { carousel.style.setProperty('--aspect-ratio', aspectRatio.value); }); })(); diff --git a/docs/docs/components/checkbox.md b/docs/docs/components/checkbox.md index 78dee914f..6c0d111f9 100644 --- a/docs/docs/components/checkbox.md +++ b/docs/docs/components/checkbox.md @@ -82,7 +82,7 @@ Use the `setCustomValidity()` method to set a custom validation message. This wi }); // Update validity on change - checkbox.addEventlistener('change', () => { + checkbox.addEventListener('change', () => { checkbox.setCustomValidity(checkbox.checked ? '' : errorMessage); }); diff --git a/docs/docs/components/split-panel.md b/docs/docs/components/split-panel.md index 40194f940..e604a9ac5 100644 --- a/docs/docs/components/split-panel.md +++ b/docs/docs/components/split-panel.md @@ -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('change', () => (splitPanel.primary = select.value)); + select.addEventListener('change', () => (splitPanel.primary = select.value)); ``` diff --git a/docs/docs/components/tree.md b/docs/docs/components/tree.md index 17275b12b..792e0dfd6 100644 --- a/docs/docs/components/tree.md +++ b/docs/docs/components/tree.md @@ -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('change', () => { + selectionMode.addEventListener('change', () => { tree.querySelectorAll('wa-tree-item').forEach(item => (item.selected = false)); tree.selection = selectionMode.value; }); diff --git a/docs/docs/experimental/themer.md b/docs/docs/experimental/themer.md index 6a655b35e..611aacabf 100644 --- a/docs/docs/experimental/themer.md +++ b/docs/docs/experimental/themer.md @@ -803,7 +803,7 @@ hasOutline: false const queue = []; let inputTimeout; - variantInput.addEventlistener('change', () => { + variantInput.addEventListener('change', () => { iconList.dataset.variant = variantInput.value; }); @@ -1084,10 +1084,10 @@ hasOutline: false el.classList.add(`wa-theme-${theme}-${colorMode}`); } - colorModeSelect.addEventlistener('change', setColorMode); + colorModeSelect.addEventListener('change', setColorMode); // Theme Switcher - themeSelect.addEventlistener('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('change', event => { + colorSelect.addEventListener('change', event => { const colorPalette = event.target.value; colorStylesheet.href = `/dist/styles/themes/color/${colorPalette}.css`; }); // Brand Color - brandColor.addEventlistener('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('change', event => { + logoSelector.addEventListener('change', event => { const value = event.currentTarget.value const projectLogo = previewContainer.querySelector("#project-logo"); @@ -1279,7 +1279,7 @@ hasOutline: false }) } - themeSelect.addEventlistener('change', setLogoIcons); + themeSelect.addEventListener('change', setLogoIcons); // Project Name container.querySelector('[name="project-name"]').addEventListener('input', event => { @@ -1293,7 +1293,7 @@ hasOutline: false }); // Heading text - fontFamilyHeading.addEventlistener('change', event => { + fontFamilyHeading.addEventListener('change', event => { let fontFamily; switch (event.target.value) { case 'assistant': @@ -1351,7 +1351,7 @@ hasOutline: false }) // Body text - fontFamilyBody.addEventlistener('change', event => { + fontFamilyBody.addEventListener('change', event => { let fontFamily; switch (event.target.value) { case 'assistant': @@ -1580,7 +1580,7 @@ hasOutline: false } // Swaps icons to the preferred set for the selected theme - themeSelect.addEventlistener('change', event => { + themeSelect.addEventListener('change', event => { setPreferredIcons(); showIconStyleOptions(); syncLogoIcon(); @@ -1599,13 +1599,13 @@ hasOutline: false }); // Changes available Icon Styles and swaps icons based on the selected Icon Family - iconFamily.addEventlistener('change', event => { + iconFamily.addEventListener('change', event => { useFaIcons(); showIconStyleOptions(); }); // Swaps icons based on the selected Icon Style - iconStyle.addEventlistener('change', useFaIcons); + iconStyle.addEventListener('change', useFaIcons); // Corners diff --git a/docs/docs/resources/changelog.md b/docs/docs/resources/changelog.md index 47c0809fa..e02e230c6 100644 --- a/docs/docs/resources/changelog.md +++ b/docs/docs/resources/changelog.md @@ -12,6 +12,10 @@ Components with the Experimental bad During the alpha period, things might break! We take breaking changes very seriously, but sometimes they're necessary to make the final product that much better. We appreciate your patience! ::: +## Next + +- Fixed a number of broken event listeners throughout the docs + ## 3.0.0-alpha.10 - 🚨 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.