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

prettier

Browse Source
This commit is contained in:
konnorrogers
2025-07-03 17:57:54 -04:00
parent 754def760e
commit dcfc34dc28
3 changed files with 55 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
packages/webawesome/src/components/select/select.test.ts
View File

@@ -200,23 +200,22 @@ describe('<wa-select>', () => {
</wa-select>
`);
const option2 = el.querySelectorAll('wa-option')[1];
const handler = sinon.spy((_event: InputEvent | Event) => {
});
const handler = sinon.spy((_event: InputEvent | Event) => {});
el.addEventListener('change', handler);
el.addEventListener('input', handler);
await clickOnElement(el);
await aTimeout(500);
await el.updateComplete
await aTimeout(100)
await el.updateComplete;
await aTimeout(100);
await clickOnElement(option2);
await el.updateComplete;
await aTimeout(500)
await aTimeout(500);
// debugger
expect(handler).to.be.calledTwice;
expect(el.value).to.equal(option2.value)
expect(el.value).to.equal(option2.value);
});
});
@@ -506,7 +505,7 @@ describe('<wa-select>', () => {
// clickOnElement causes some weird behavior where the `reset` event never fires.
// Maybe one day in the future this can go back to using the `clickOnElement`.
// await clickOnElement(resetButton);
resetButton.click()
resetButton.click();
await select.updateComplete;
expect(resetSpy).to.have.been.calledOnce;
@@ -892,7 +891,7 @@ describe('<wa-select>', () => {
});
// https://github.com/shoelace-style/webawesome/issues/1131
it("Should work properly with empty values on select", async () => {
it('Should work properly with empty values on select', async () => {
const el = await fixture<WaSelect>(html`
<wa-select label="Select one">
<wa-option value="">Blank Option</wa-option>
@@ -901,30 +900,30 @@ describe('<wa-select>', () => {
</wa-select>
`);
await resetMouse()
await resetMouse();
await el.show();
const options = el.querySelectorAll("wa-option")
const options = el.querySelectorAll('wa-option');
// firefox doesnt like clicks -.-
await clickOnElement(options[0]);
await resetMouse()
await el.updateComplete
expect(el.value).to.equal("")
await resetMouse();
await el.updateComplete;
expect(el.value).to.equal('');
await aTimeout(1)
await aTimeout(1);
await clickOnElement(options[1]);
await resetMouse()
await el.updateComplete
await aTimeout(1)
expect(el.value).to.equal("option-2")
await resetMouse();
await el.updateComplete;
await aTimeout(1);
expect(el.value).to.equal('option-2');
await clickOnElement(options[0]);
await resetMouse()
await el.updateComplete
await aTimeout(1)
expect(el.value).to.equal("")
await resetMouse()
})
await resetMouse();
await el.updateComplete;
await aTimeout(1);
expect(el.value).to.equal('');
await resetMouse();
});
});
}
});

46
packages/webawesome/src/components/select/select.ts
View File

@@ -166,20 +166,20 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
let newValue = this.value;
if (newValue !== oldValue) {
this.valueHasChanged = true
this.valueHasChanged = true;
this.requestUpdate('value', oldValue);
}
}
get value() {
let value = this._value ?? this.defaultValue ?? null
let value = this._value ?? this.defaultValue ?? null;
if (value != null) {
value = Array.isArray(value) ? value : [value];
}
if (value == null) {
this.optionValues = new Set(null)
this.optionValues = new Set(null);
} else {
this.optionValues = new Set(
this.getAllOptions()
@@ -189,14 +189,14 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
}
// Drop values not in the DOM
let ret: null | string | string[] = value
let ret: null | string | string[] = value;
if (value != null) {
ret = value.filter(v => this.optionValues!.has(v));
ret = this.multiple ? ret : ret[0];
ret = ret ?? null
ret = ret ?? null;
}
return ret
return ret;
}
/** The select's size. */
@@ -296,16 +296,16 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
// Because this is a form control, it shouldn't be opened initially
this.open = false;
}
private updateDefaultValue () {
private updateDefaultValue() {
const allOptions = this.getAllOptions();
const defaultSelectedOptions = allOptions.filter(el => el.hasAttribute("selected") || el.defaultSelected);
const defaultSelectedOptions = allOptions.filter(el => el.hasAttribute('selected') || el.defaultSelected);
if (defaultSelectedOptions.length > 0) {
const selectedValues = defaultSelectedOptions.map(el => el.value);
this._defaultValue = this.multiple ? selectedValues : selectedValues[0];
} if (this.hasAttribute('value')) {
}
if (this.hasAttribute('value')) {
this._defaultValue = this.getAttribute('value') || null;
}
}
@@ -381,7 +381,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
// If it is open, update the value based on the current selection and close it
if (this.currentOption && !this.currentOption.disabled) {
this.valueHasChanged = true;
this.hasInteracted = true
this.hasInteracted = true;
if (this.multiple) {
this.toggleOptionSelection(this.currentOption);
} else {
@@ -537,7 +537,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
const option = target.closest('wa-option');
if (option && !option.disabled) {
this.hasInteracted = true
this.hasInteracted = true;
this.valueHasChanged = true;
if (this.multiple) {
@@ -549,7 +549,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
// Set focus after updating so the value is announced by screen readers
this.updateComplete.then(() => this.displayInput.focus({ preventScroll: true }));
this.requestUpdate("value")
this.requestUpdate('value');
// Emit after updating
this.updateComplete.then(() => {
@@ -574,21 +574,21 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
this.optionValues = undefined; // dirty the value so it gets recalculated
// Update defaultValue if it hasn't been explicitly set and we have selected options
this.updateDefaultValue()
this.updateDefaultValue();
let value = this.value;
if (value == null || (!this.valueHasChanged && !this.hasInteracted)) {
this.selectionChanged()
return
this.selectionChanged();
return;
}
if (!Array.isArray(value)) {
value = [value]
value = [value];
}
// Select only the options that match the new value
const selectedOptions = allOptions.filter(el => value.includes(el.value))
const selectedOptions = allOptions.filter(el => value.includes(el.value));
this.setSelectedOptions(selectedOptions);
}
@@ -703,12 +703,12 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
// Update selected options cache
this.selectedOptions = options.filter(el => {
if (!this.hasInteracted && !this.valueHasChanged) {
const defaultValue = this.defaultValue
const defaultValues = Array.isArray(defaultValue) ? defaultValue : [defaultValue]
return el.hasAttribute("selected") || el.defaultSelected || el.selected || defaultValues?.includes(el.value)
const defaultValue = this.defaultValue;
const defaultValues = Array.isArray(defaultValue) ? defaultValue : [defaultValue];
return el.hasAttribute('selected') || el.defaultSelected || el.selected || defaultValues?.includes(el.value);
}
return el.selected
return el.selected;
});
let selectedValues = new Set(this.selectedOptions.map(el => el.value));
@@ -795,7 +795,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
const value = Array.isArray(this.value) ? this.value : [this.value];
// Select only the options that match the new value
const selectedOptions = allOptions.filter(el => value.includes(el.value))
const selectedOptions = allOptions.filter(el => value.includes(el.value));
this.setSelectedOptions(selectedOptions);
this.updateValidity();
}

19
packages/webawesome/web-test-runner.config.js
View File

@@ -40,25 +40,24 @@ export default {
middleware: [
// When using relative CSS imports, we need to rewrite the paths so the test runner can find them.
function rewriteCssUrls(context, next) {
if (context.url.endsWith(".css")) {
if (context.url.endsWith('.css')) {
// Okay, this is all fucked up. WTR doesn't seem to like how we use `@import`.
if (context.url.startsWith("/base.css")) {
context.url = "/dist/styles/color/palettes/base.css"
if (context.url.startsWith('/base.css')) {
context.url = '/dist/styles/color/palettes/base.css';
}
if (context.url.startsWith("/variants")) {
context.url = "/dist/styles/color" + context.url
if (context.url.startsWith('/variants')) {
context.url = '/dist/styles/color' + context.url;
}
if (context.url.startsWith("/color/variants.css")) {
context.url = "/dist/styles" + context.url
if (context.url.startsWith('/color/variants.css')) {
context.url = '/dist/styles' + context.url;
}
if (context.url.startsWith("/color/palettes")) {
context.url = "/dist/styles" + context.url
if (context.url.startsWith('/color/palettes')) {
context.url = '/dist/styles' + context.url;
}
// console.log(context)
// console.log({ context, before, after: context.url })
}