kopia lustrzana https://github.com/shoelace-style/shoelace
fix autoload timing issues
rodzic
9c573fb454
commit
a127b8722e
|
@ -100,7 +100,8 @@ Use the `setCustomValidity()` method to set a custom validation message. This wi
|
||||||
const errorMessage = `Don't forget to check me!`;
|
const errorMessage = `Don't forget to check me!`;
|
||||||
|
|
||||||
// Set initial validity as soon as the element is defined
|
// Set initial validity as soon as the element is defined
|
||||||
customElements.whenDefined('sl-checkbox').then(() => {
|
customElements.whenDefined('sl-checkbox').then(async () => {
|
||||||
|
await checkbox.updateComplete;
|
||||||
checkbox.setCustomValidity(errorMessage);
|
checkbox.setCustomValidity(errorMessage);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -72,7 +72,7 @@ export default class SlQrCode extends ShoelaceElement {
|
||||||
part="base"
|
part="base"
|
||||||
class="qr-code"
|
class="qr-code"
|
||||||
role="img"
|
role="img"
|
||||||
aria-label=${this.label.length > 0 ? this.label : this.value}
|
aria-label=${this.label?.length > 0 ? this.label : this.value}
|
||||||
style=${styleMap({
|
style=${styleMap({
|
||||||
width: `${this.size}px`,
|
width: `${this.size}px`,
|
||||||
height: `${this.size}px`
|
height: `${this.size}px`
|
||||||
|
|
|
@ -197,27 +197,32 @@ export default class SlRadioGroup extends ShoelaceElement implements ShoelaceFor
|
||||||
}
|
}
|
||||||
|
|
||||||
private handleSlotChange() {
|
private handleSlotChange() {
|
||||||
const radios = this.getAllRadios();
|
if (customElements.get('sl-radio') || customElements.get('sl-radio-button')) {
|
||||||
|
const radios = this.getAllRadios();
|
||||||
|
radios.forEach(radio => (radio.checked = radio.value === this.value));
|
||||||
|
|
||||||
radios.forEach(radio => (radio.checked = radio.value === this.value));
|
this.hasButtonGroup = radios.some(radio => radio.tagName.toLowerCase() === 'sl-radio-button');
|
||||||
|
|
||||||
this.hasButtonGroup = radios.some(radio => radio.tagName.toLowerCase() === 'sl-radio-button');
|
if (!radios.some(radio => radio.checked)) {
|
||||||
|
if (this.hasButtonGroup) {
|
||||||
|
const buttonRadio = radios[0].shadowRoot!.querySelector('button')!;
|
||||||
|
buttonRadio.tabIndex = 0;
|
||||||
|
} else {
|
||||||
|
radios[0].tabIndex = 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
if (!radios.some(radio => radio.checked)) {
|
|
||||||
if (this.hasButtonGroup) {
|
if (this.hasButtonGroup) {
|
||||||
const buttonRadio = radios[0].shadowRoot!.querySelector('button')!;
|
const buttonGroup = this.shadowRoot?.querySelector('sl-button-group');
|
||||||
buttonRadio.tabIndex = 0;
|
|
||||||
} else {
|
|
||||||
radios[0].tabIndex = 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.hasButtonGroup) {
|
if (buttonGroup) {
|
||||||
const buttonGroup = this.shadowRoot?.querySelector('sl-button-group');
|
buttonGroup.disableRole = true;
|
||||||
|
}
|
||||||
if (buttonGroup) {
|
|
||||||
buttonGroup.disableRole = true;
|
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
|
// Rerun this handler when <sl-radio> or <sl-radio-button> is registered
|
||||||
|
customElements.whenDefined('sl-radio').then(() => this.handleSlotChange());
|
||||||
|
customElements.whenDefined('sl-radio-button').then(() => this.handleSlotChange());
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -422,18 +422,23 @@ export default class SlSelect extends ShoelaceElement implements ShoelaceFormCon
|
||||||
const values: string[] = [];
|
const values: string[] = [];
|
||||||
|
|
||||||
// Check for duplicate values in menu items
|
// Check for duplicate values in menu items
|
||||||
allOptions.forEach(option => {
|
if (customElements.get('sl-option')) {
|
||||||
if (values.includes(option.value)) {
|
allOptions.forEach(option => {
|
||||||
console.error(
|
if (values.includes(option.value)) {
|
||||||
`An option with a duplicate value of "${option.value}" has been found in <sl-select>. All options must have unique values.`,
|
console.error(
|
||||||
option
|
`An option with a duplicate value of "${option.value}" has been found in <sl-select>. All options must have unique values.`,
|
||||||
);
|
option
|
||||||
}
|
);
|
||||||
values.push(option.value);
|
}
|
||||||
});
|
values.push(option.value);
|
||||||
|
});
|
||||||
|
|
||||||
// Select only the options that match the new value
|
// Select only the options that match the new value
|
||||||
this.setSelectedOptions(allOptions.filter(el => value.includes(el.value)));
|
this.setSelectedOptions(allOptions.filter(el => value.includes(el.value)));
|
||||||
|
} else {
|
||||||
|
// Rerun this handler when <sl-option> is registered
|
||||||
|
customElements.whenDefined('sl-option').then(() => this.handleDefaultSlotChange());
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private handleTagRemove(event: CustomEvent, option: SlOption) {
|
private handleTagRemove(event: CustomEvent, option: SlOption) {
|
||||||
|
|
Ładowanie…
Reference in New Issue