holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Do a better extending Et2WidgetWithSelectMixin and using what it provides

Browse Source
This commit is contained in:
nathan 2022-05-17 10:04:39 -06:00
parent 5528261050
commit 5edd7dc782
1 changed files with 8 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
api/js/etemplate/Et2DropdownButton/Et2DropdownButton.ts
View File

@ -11,7 +11,7 @@
import {Et2Button} from "../Et2Button/Et2Button"; import {Et2Button} from "../Et2Button/Et2Button";
import {SlButtonGroup, SlDropdown} from "@shoelace-style/shoelace"; import {SlButtonGroup, SlDropdown} from "@shoelace-style/shoelace";
import {css, html, repeat, TemplateResult} from "@lion/core"; import {css, html, TemplateResult} from "@lion/core";
import {Et2widgetWithSelectMixin} from "../Et2Select/Et2WidgetWithSelectMixin"; import {Et2widgetWithSelectMixin} from "../Et2Select/Et2WidgetWithSelectMixin";
import {SelectOption} from "../Et2Select/FindSelectOptions"; import {SelectOption} from "../Et2Select/FindSelectOptions";
import {buttonStyles} from "../Et2Button/ButtonStyles"; import {buttonStyles} from "../Et2Button/ButtonStyles";
@ -119,20 +119,17 @@ export class Et2DropdownButton extends Et2widgetWithSelectMixin(Et2Button)
{ {
return html` return html`
<sl-button-group> <sl-button-group>
<sl-button size="medium">${this.label}</sl-button> <sl-button size="medium" id="main">${this.label}</sl-button>
<sl-dropdown placement="bottom-end" hoist> <sl-dropdown placement="bottom-end" hoist>
<sl-button size="medium" slot="trigger" caret></sl-button> <sl-button size="medium" slot="trigger" caret></sl-button>
<sl-menu> <sl-menu>
${repeat(this.select_options, (option : SelectOption) => option.value, option =>
this._itemTemplate(option)
)}
</sl-menu> </sl-menu>
</sl-dropdown> </sl-dropdown>
</sl-button-group> </sl-button-group>
`; `;
} }
protected _itemTemplate(option : SelectOption) : TemplateResult protected _optionTemplate(option : SelectOption) : TemplateResult
{ {
let icon = option.icon ? html` let icon = option.icon ? html`
<et2-image slot="prefix" src=${option.icon} icon></et2-image>` : ''; <et2-image slot="prefix" src=${option.icon} icon></et2-image>` : '';
@ -167,6 +164,11 @@ export class Et2DropdownButton extends Et2widgetWithSelectMixin(Et2Button)
this.requestUpdate("value", oldValue); this.requestUpdate("value", oldValue);
} }
get _optionTargetNode()
{
return this.shadowRoot.querySelector("sl-menu");
}
get buttonNode() get buttonNode()
{ {
return this.shadowRoot.querySelector("#main"); return this.shadowRoot.querySelector("#main");