From d0b9c42d7cfcfcdd9a8092529e5451a72ad96c9b Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Fri, 24 May 2024 15:38:20 -0400 Subject: [PATCH] prettier --- src/components/checkbox/checkbox.ts | 9 ++- src/components/color-picker/color-picker.ts | 4 +- src/components/input/input.ts | 22 ++++--- src/components/radio/radio.ts | 2 +- src/components/switch/switch.ts | 5 +- src/internal/test/form-control-base-tests.ts | 64 ++++++++++---------- src/internal/uuid.ts | 5 +- src/internal/webawesome-element.ts | 11 ++-- 8 files changed, 60 insertions(+), 62 deletions(-) diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts index ecff871d5..7188232c3 100644 --- a/src/components/checkbox/checkbox.ts +++ b/src/components/checkbox/checkbox.ts @@ -59,7 +59,7 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement { // Use a checkbox so we get "free" translation strings. validationElement: Object.assign(document.createElement('input'), { type: 'checkbox', - required: true, + required: true }) }) ]; @@ -91,12 +91,11 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement { */ @property({ type: Boolean, reflect: true }) indeterminate = false; - /** Draws the checkbox in a checked state. */ - @property({ type: Boolean, attribute: false }) checked = this.hasAttribute("checked"); + @property({ type: Boolean, attribute: false }) checked = this.hasAttribute('checked'); /** The default value of the form control. Primarily used for resetting the form control. */ - @property({ type: Boolean, reflect: true, attribute: "checked" }) defaultChecked = this.hasAttribute("checked"); + @property({ type: Boolean, reflect: true, attribute: 'checked' }) defaultChecked = this.hasAttribute('checked'); /** * By default, form controls are associated with the nearest containing `
` element. This attribute allows you @@ -140,7 +139,7 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement { } handleValueOrCheckedChange() { - this.toggleCustomState("checked", this.checked) + this.toggleCustomState('checked', this.checked); this.value = this.checked ? this.value || 'on' : null; // These @watch() commands seem to override the base element checks for changes, so we need to setValue for the form and and updateValidity() diff --git a/src/components/color-picker/color-picker.ts b/src/components/color-picker/color-picker.ts index 50ca8d87e..728e65cf0 100644 --- a/src/components/color-picker/color-picker.ts +++ b/src/components/color-picker/color-picker.ts @@ -137,10 +137,10 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement { * in a specific format, use the `getFormattedValue()` method. The value is submitted as a name/value pair with form * data. */ - @property({ attribute: false }) value = this.getAttribute("value") || '' + @property({ attribute: false }) value = this.getAttribute('value') || ''; /** The default value of the form control. Primarily used for resetting the form control. */ - @property({ attribute: 'value', reflect: true }) defaultValue = this.getAttribute("value") || '' + @property({ attribute: 'value', reflect: true }) defaultValue = this.getAttribute('value') || ''; /** * The color picker's label. This will not be displayed, but it will be announced by assistive devices. If you need to diff --git a/src/components/input/input.ts b/src/components/input/input.ts index b9be4d25f..a7405a201 100644 --- a/src/components/input/input.ts +++ b/src/components/input/input.ts @@ -284,24 +284,28 @@ export default class WaInput extends WebAwesomeFormAssociatedElement { // See https://github.com/shoelace-style/shoelace/pull/988 // if (!event.defaultPrevented && !event.isComposing) { - const form = this.getForm() + const form = this.getForm(); - if (!form) { return } + if (!form) { + return; + } - const button = [...form.elements].find((el: HTMLButtonElement) => el.type === "submit" && !el.disabled) as undefined | HTMLButtonElement | WaButton + const button = [...form.elements].find((el: HTMLButtonElement) => el.type === 'submit' && !el.disabled) as + | undefined + | HTMLButtonElement + | WaButton; if (!button) { - form.requestSubmit(null) - return + form.requestSubmit(null); + return; } - if (button.tagName.toLowerCase() === "button") { - form.requestSubmit(button) + if (button.tagName.toLowerCase() === 'button') { + form.requestSubmit(button); } else { // requestSubmit() wont work with `` - button.click() + button.click(); } - } }); } diff --git a/src/components/radio/radio.ts b/src/components/radio/radio.ts index 1849a8160..d79113315 100644 --- a/src/components/radio/radio.ts +++ b/src/components/radio/radio.ts @@ -64,7 +64,7 @@ export default class WaRadio extends WebAwesomeFormAssociatedElement { constructor() { super(); - this.addEventListener("click", this.handleClick) + this.addEventListener('click', this.handleClick); this.addEventListener('blur', this.handleBlur); this.addEventListener('focus', this.handleFocus); } diff --git a/src/components/switch/switch.ts b/src/components/switch/switch.ts index d8e65e953..89683dab0 100644 --- a/src/components/switch/switch.ts +++ b/src/components/switch/switch.ts @@ -75,10 +75,10 @@ export default class WaSwitch extends WebAwesomeFormAssociatedElement { @property({ type: Boolean }) disabled = false; /** Draws the switch in a checked state. */ - @property({ type: Boolean, attribute: false }) checked = this.hasAttribute("checked"); + @property({ type: Boolean, attribute: false }) checked = this.hasAttribute('checked'); /** The default value of the form control. Primarily used for resetting the form control. */ - @property({ type: Boolean, attribute: "checked", reflect: true }) defaultChecked = this.hasAttribute("checked"); + @property({ type: Boolean, attribute: 'checked', reflect: true }) defaultChecked = this.hasAttribute('checked'); /** * By default, form controls are associated with the nearest containing `` element. This attribute allows you @@ -151,7 +151,6 @@ export default class WaSwitch extends WebAwesomeFormAssociatedElement { } } - @watch('disabled', { waitUntilFirstUpdate: true }) handleDisabledChange() { // Disabled form controls are always valid diff --git a/src/internal/test/form-control-base-tests.ts b/src/internal/test/form-control-base-tests.ts index b0760179e..50425c208 100644 --- a/src/internal/test/form-control-base-tests.ts +++ b/src/internal/test/form-control-base-tests.ts @@ -1,5 +1,5 @@ import { expect, fixture } from '@open-wc/testing'; -import { html } from 'lit' +import { html } from 'lit'; import type { WebAwesomeFormControl } from '../webawesome-element.js'; type CreateControlFn = () => Promise; @@ -169,26 +169,26 @@ async function runAllValidityTests( expect(control.validationMessage).to.equal('MyError'); }); - it("Should properly move into and out of `:disabled` when using a
", async () => { + it('Should properly move into and out of `:disabled` when using a
', async () => { const control = await createControl(); - const fieldset = await fixture(html`
`) - expect(control.disabled).to.equal(false) - fieldset.append(control) - fieldset.disabled = true - await control.updateComplete - expect(control.disabled).to.equal(true) + const fieldset = await fixture(html`
`); + expect(control.disabled).to.equal(false); + fieldset.append(control); + fieldset.disabled = true; + await control.updateComplete; + expect(control.disabled).to.equal(true); // expect(control.hasAttribute("disabled")).to.equal(false) - expect(control.matches(":disabled")).to.equal(true) - expect(control.hasAttribute("data-wa-disabled")).to.equal(true) + expect(control.matches(':disabled')).to.equal(true); + expect(control.hasAttribute('data-wa-disabled')).to.equal(true); - fieldset.disabled = false + fieldset.disabled = false; - await control.updateComplete - expect(control.disabled).to.equal(false) - expect(control.hasAttribute("disabled")).to.equal(false) - expect(control.matches(":disabled")).to.equal(false) - expect(control.hasAttribute("data-wa-disabled")).to.equal(false) - }) + await control.updateComplete; + expect(control.disabled).to.equal(false); + expect(control.hasAttribute('disabled')).to.equal(false); + expect(control.matches(':disabled')).to.equal(false); + expect(control.hasAttribute('data-wa-disabled')).to.equal(false); + }); // it("This is the one edge case with ':disabled'. If you disable a fieldset, and then disable the element directly, it will not reflect the disabled attribute.", async () => { // const control = await createControl(); @@ -210,24 +210,24 @@ async function runAllValidityTests( // expect(control.matches(":disabled")).to.equal(true) // }) - it("Should reflect the disabled attribute if its attribute is directly added", async () => { + it('Should reflect the disabled attribute if its attribute is directly added', async () => { const control = await createControl(); - expect(control.disabled).to.equal(false) - control.disabled = true - await control.updateComplete - expect(control.disabled).to.equal(true) - expect(control.hasAttribute("disabled")).to.equal(true) - expect(control.matches(":disabled")).to.equal(true) - expect(control.hasAttribute("data-wa-disabled")).to.equal(true) + expect(control.disabled).to.equal(false); + control.disabled = true; + await control.updateComplete; + expect(control.disabled).to.equal(true); + expect(control.hasAttribute('disabled')).to.equal(true); + expect(control.matches(':disabled')).to.equal(true); + expect(control.hasAttribute('data-wa-disabled')).to.equal(true); - control.disabled = false - await control.updateComplete + control.disabled = false; + await control.updateComplete; - expect(control.disabled).to.equal(false) - expect(control.hasAttribute("disabled")).to.equal(false) - expect(control.matches(":disabled")).to.equal(false) - expect(control.hasAttribute("data-wa-disabled")).to.equal(false) - }) + expect(control.disabled).to.equal(false); + expect(control.hasAttribute('disabled')).to.equal(false); + expect(control.matches(':disabled')).to.equal(false); + expect(control.hasAttribute('data-wa-disabled')).to.equal(false); + }); } // Run special tests depending on component type diff --git a/src/internal/uuid.ts b/src/internal/uuid.ts index a959147f9..5587b4e37 100644 --- a/src/internal/uuid.ts +++ b/src/internal/uuid.ts @@ -4,9 +4,6 @@ export function uuidv4(): string { const crypto = window.crypto || window.msCrypto; // @ts-expect-error return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c: any) => - ( - c ^ - (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4))) - ).toString(16), + (c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16) ); } diff --git a/src/internal/webawesome-element.ts b/src/internal/webawesome-element.ts index effab4723..d2e97b843 100644 --- a/src/internal/webawesome-element.ts +++ b/src/internal/webawesome-element.ts @@ -198,7 +198,6 @@ export class WebAwesomeFormAssociatedElement @property({ state: true }) valueHasChanged: boolean = false; @property({ state: true }) hasInteracted: boolean = false; - // This works around a limitation in Safari. It is a hacky way for us to preserve customErrors generated by the user. @property({ attribute: 'custom-error', reflect: true }) customError: string | null = null; @@ -282,11 +281,11 @@ export class WebAwesomeFormAssociatedElement } } - if (changedProperties.has("disabled")) { - this.toggleCustomState("disabled", this.disabled) + if (changedProperties.has('disabled')) { + this.toggleCustomState('disabled', this.disabled); - if (this.hasAttribute("disabled") || !this.matches(":disabled")) { - this.toggleAttribute("disabled", this.disabled) + if (this.hasAttribute('disabled') || !this.matches(':disabled')) { + this.toggleAttribute('disabled', this.disabled); } } @@ -399,7 +398,7 @@ export class WebAwesomeFormAssociatedElement } formDisabledCallback(isDisabled: boolean) { - this.disabled = isDisabled + this.disabled = isDisabled; this.updateValidity(); }