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

prettier

Browse Source
This commit is contained in:
Cory LaViska
2024-05-24 15:38:20 -04:00
parent a1d614600d
commit d0b9c42d7c
8 changed files with 60 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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 `<form>` 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()

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

@@ -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

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

@@ -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 `<wa-button>`
button.click()
button.click();
}
}
});
}

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

@@ -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);
}

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

@@ -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 `<form>` 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

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

@@ -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<WebAwesomeFormControl>;
@@ -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 <fieldset>", async () => {
it('Should properly move into and out of `:disabled` when using a <fieldset>', async () => {
const control = await createControl();
const fieldset = await fixture<HTMLFieldSetElement>(html`<fieldset></fieldset>`)
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<HTMLFieldSetElement>(html`<fieldset></fieldset>`);
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

5
src/internal/uuid.ts
View File

@@ -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)
);
}

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

@@ -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();
}