Fix listbox didn't have correct sub-element. Fixes placeholder dialogs in Collabora.

This commit is contained in:
nathan 2024-03-06 16:05:02 -07:00
parent 78810e9653
commit 9ccd9b5240

View File

@ -4,6 +4,8 @@ import shoelace from "../Styles/shoelace";
import {css, html, LitElement, TemplateResult} from "lit"; import {css, html, LitElement, TemplateResult} from "lit";
import {SelectOption} from "./FindSelectOptions"; import {SelectOption} from "./FindSelectOptions";
import {repeat} from "lit/directives/repeat.js"; import {repeat} from "lit/directives/repeat.js";
import {property} from "lit/decorators/property.js";
import {SlMenuItem} from "@shoelace-style/shoelace";
/** /**
* A selectbox that shows more than one row at a time * A selectbox that shows more than one row at a time
@ -56,19 +58,7 @@ export class Et2Listbox extends RowLimitedMixin(Et2WidgetWithSelectMixin(LitElem
]; ];
} }
static get properties() @property({type: Boolean, reflect: true}) multiple = false;
{
return {
...super.properties,
/**
* Toggle between single and multiple selection
*/
multiple: {
type: Boolean,
reflect: true,
}
}
}
private __value : String[] | null; private __value : String[] | null;
@ -90,6 +80,11 @@ export class Et2Listbox extends RowLimitedMixin(Et2WidgetWithSelectMixin(LitElem
}); });
} }
private getAllItems() : SlMenuItem[]
{
return <SlMenuItem[]>Array.from(this.shadowRoot?.querySelectorAll('sl-menu-item')) ?? [];
}
/** /**
* Handle an item was selected * Handle an item was selected
* *
@ -118,15 +113,12 @@ export class Et2Listbox extends RowLimitedMixin(Et2WidgetWithSelectMixin(LitElem
this.dispatchEvent(new Event("change")); this.dispatchEvent(new Event("change"));
} }
@property()
get value() get value()
{ {
let value = []; let value = this.hasUpdated ? this.getAllItems()
if(this.defaultSlot)
{
value = this.getAllItems()
.filter((item) => item.checked) .filter((item) => item.checked)
.map((item) => item.value); .map((item) => item.value) : this.__value ?? []
}
return this.multiple ? value : value.pop(); return this.multiple ? value : value.pop();
} }
@ -154,15 +146,16 @@ export class Et2Listbox extends RowLimitedMixin(Et2WidgetWithSelectMixin(LitElem
// Tag used must match this.optionTag, but you can't use the variable directly. // Tag used must match this.optionTag, but you can't use the variable directly.
// Pass option along so SearchMixin can grab it if needed // Pass option along so SearchMixin can grab it if needed
return html` return html`
<sl-option <sl-menu-item
value="${option.value}" value="${option.value}"
title="${!option.title || this.noLang ? option.title : this.egw().lang(option.title)}" title="${!option.title || this.noLang ? option.title : this.egw().lang(option.title)}"
class="${option.class}" .option=${option} class="${option.class}" .option=${option}
.selected=${checked} type="checkbox"
?checked=${checked}
> >
${icon} ${icon}
${this.noLang ? option.label : this.egw().lang(option.label)} ${this.noLang ? option.label : this.egw().lang(option.label)}
</sl-option>`; </sl-menu-item>`;
} }
render() render()