Et2TreeDropdown

- Better handling of horizontal space
- Single select closes dropdown immediately
- Selecting tree item actually changes value
This commit is contained in:
nathan 2024-02-13 10:40:00 -07:00
parent c53e122564
commit 51f23a0dcf
2 changed files with 42 additions and 21 deletions

View File

@ -41,8 +41,9 @@ export default css`
flex: 1;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
flex-wrap: nowrap;
align-items: flex-start;
justify-content: space-between;
gap: 0.1rem 0.5rem;
background-color: var(--sl-input-background-color);
@ -53,6 +54,7 @@ export default css`
min-height: var(--sl-input-height-medium);
max-height: calc(var(--height, 5) * var(--sl-input-height-medium));
overflow-y: auto;
overflow-x: hidden;
padding-block: 0;
padding-inline: var(--sl-input-spacing-medium);
padding-top: 0.1rem;
@ -80,18 +82,18 @@ export default css`
/* Trigger */
.tree-dropdown__trigger {
max-width: initial;
min-width: initial;
flex: 0 0 1em;
order: 21;
margin-left: auto;
}
.tree-dropdown__trigger::part(base) {
border: none;
.tree-dropdown__expand-icon {
height: var(--sl-input-height-medium);
flex: 0 0 auto;
display: flex;
align-items: center;
transition: var(--sl-transition-medium) rotate ease;
rotate: 0;
margin-inline-start: var(--sl-spacing-small);
}
.tree-dropdown--open .tree-dropdown__expand-icon {
rotate: -180deg;
}
/* End trigger */
@ -100,6 +102,15 @@ export default css`
order: 1;
}
/* Tags */
.tree-dropdown__tags {
display: flex;
flex-wrap: wrap;
}
/* End tags */
/* Search box */
:host([readonly]) .tree-dropdown__search {
@ -107,7 +118,7 @@ export default css`
}
.tree-dropdown__search {
flex: 1 1 auto;
flex: 1 1 7em;
order: 10;
min-width: 7em;
border: none;

View File

@ -243,6 +243,7 @@ export class Et2TreeDropdown extends Et2WidgetWithSelectMixin(LitElement)
this.hasFocus = true;
// Should not be needed, but not firing the update
this.requestUpdate("hasFocus");
this.show();
// Reset tags to not take focus
this.setCurrentTag(null);
@ -325,8 +326,13 @@ export class Et2TreeDropdown extends Et2WidgetWithSelectMixin(LitElement)
handleTreeChange(event)
{
const oldValue = this.value;
this.value = this._tree.value;
this.value = this._tree.getValue();
this.requestUpdate("value", oldValue);
if(!this.multiple)
{
this.hide();
}
}
handleTriggerClick()
@ -341,6 +347,11 @@ export class Et2TreeDropdown extends Et2WidgetWithSelectMixin(LitElement)
this._popup.active = true;
}
this.open = this._popup.active;
this.requestUpdate("open");
this.updateComplete.then(() =>
{
this._tree.focus();
})
}
/**
@ -477,17 +488,16 @@ export class Et2TreeDropdown extends Et2WidgetWithSelectMixin(LitElement)
<slot part="prefix" name="prefix" class="tree-dropdown__prefix"></slot>
<div part="tags" class="tree-dropdown__tags">
${this.tagsTemplate()}
</div>
${this.inputTemplate()}
</div>
${this.searching ? html`
<sl-spinner class="tree-dropdown"></sl-spinner>` : nothing
}
<slot part="suffix" name="suffix" class="tree-dropdown__suffix"></slot>
<et2-button caret class="tree-dropdown__trigger"
@click=${this.handleTriggerClick}
.noSubmit=${true}
>
</et2-button>
<slot name="expand-icon" part="expand-icon" class="tree-dropdown__expand-icon"
@click=${this.handleTriggerClick}>
<sl-icon library="system" name="chevron-down" aria-hidden="true"></sl-icon>
</slot>
</div>
<et2-tree
class="tree-dropdown__tree"
@ -497,7 +507,7 @@ export class Et2TreeDropdown extends Et2WidgetWithSelectMixin(LitElement)
.value=${this.value}
._selectOptions=${this.select_options}
@change=${this.handleTreeChange}
@sl-selection-change=${this.handleTreeChange}
>
</et2-tree>
</sl-popup>