Implement option groups

This commit is contained in:
nathan 2022-12-14 14:32:20 -07:00
parent a832c12dbc
commit 3b5f64a4c3

View File

@ -153,7 +153,7 @@ export const Et2widgetWithSelectMixin = <T extends Constructor<LitElement>>(supe
let options = html`${this._emptyLabelTemplate()}${this.select_options let options = html`${this._emptyLabelTemplate()}${this.select_options
// Filter out empty values if we have empty label to avoid duplicates // Filter out empty values if we have empty label to avoid duplicates
.filter(o => this.emptyLabel ? o.value !== '' : o) .filter(o => this.emptyLabel ? o.value !== '' : o)
.map(this._optionTemplate.bind(this))}`; .map(this._groupTemplate.bind(this))}`;
render(options, temp_target); render(options, temp_target);
return Promise.all(([...temp_target.querySelectorAll(":scope > *")].map(item => item.render))) return Promise.all(([...temp_target.querySelectorAll(":scope > *")].map(item => item.render)))
@ -268,6 +268,19 @@ export const Et2widgetWithSelectMixin = <T extends Constructor<LitElement>>(supe
<span>Override _optionTemplate(). ${option.value} => ${option.label}</span>`; <span>Override _optionTemplate(). ${option.value} => ${option.label}</span>`;
} }
_groupTemplate(option) : TemplateResult
{
if(!Array.isArray(option.value))
{
return this._optionTemplate(option);
}
return html`
<sl-menu-label>${option.label}</sl-menu-label>
${option.value.map(this._optionTemplate.bind(this))}
<sl-divider></sl-divider>
`;
}
/** /**
* Load extra stuff from the template node. In particular, we're looking for any <option/> tags added. * Load extra stuff from the template node. In particular, we're looking for any <option/> tags added.
* *