extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-12-22 06:30:59 +01:00
Code Issues Packages Projects Releases Wiki Activity

Et2TreeDropdown: Single value tag takes full width

Browse Source
This commit is contained in:
nathan 2024-02-26 16:54:07 -07:00
parent abc25683af
commit 0f139fb257
2 changed files with 49 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
api/js/etemplate/Et2Tree/Et2TreeDropdown.styles.ts
View File

@ -105,6 +105,7 @@ export default css`
display: flex;
flex: 2 1 auto;
flex-wrap: wrap;
align-content: center;
gap: 0.1rem 0.5rem;
min-height: var(--sl-input-height-medium);
max-height: calc(var(--height, 5) * var(--sl-input-height-medium));
@ -143,6 +144,18 @@ export default css`
cursor: default;
}
/* tag takes full width when widget is not multiple and has value and does not have focus */
:host(:not([multiple])) .tree-dropdown--has-value .tree-dropdown__search {
display: none;
}
:host(:not([multiple])) .tree-dropdown--focused .tree-dropdown__search,
:host(:not([multiple])) .tree-dropdown--open .tree-dropdown__search {
display: initial;
flex-grow: 0;
}
.tree-dropdown__suffix {
order: 20;
}

38
api/js/etemplate/Et2Tree/Et2TreeDropdown.ts
View File

@ -85,8 +85,22 @@ export class Et2TreeDropdown extends SearchMixin<Constructor<any> & Et2InputWidg
constructor()
{
super();
this.multiple = false;
this.__value = [];
this.handleDocumentClick = this.handleDocumentClick.bind(this);
}
connectedCallback()
{
super.connectedCallback();
document.addEventListener("click", this.handleDocumentClick);
}
disconnectedCallback()
{
super.disconnectedCallback();
document.removeEventListener("click", this.handleDocumentClick);
}
updated()
@ -304,6 +318,24 @@ export class Et2TreeDropdown extends SearchMixin<Constructor<any> & Et2InputWidg
}
}
protected handleDocumentClick(event)
{
if(event.target == this || event.composedPath().includes(this))
{
return
}
if(this.open)
{
event.preventDefault();
this.hide()
}
else
{
this.blur();
}
}
private handleSearchFocus()
{
this.hasFocus = true;
@ -519,6 +551,7 @@ export class Et2TreeDropdown extends SearchMixin<Constructor<any> & Et2InputWidg
const hasLabelSlot = this.hasSlotController.test('label');
const hasHelpTextSlot = this.hasSlotController.test('help-text');
const hasLabel = this.label ? true : !!hasLabelSlot;
const hasValue = this.value && this.value.length > 0;
const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
const isPlaceholderVisible = this.placeholder && this.value.length === 0 && !this.disabled && !this.readonly;
@ -550,7 +583,8 @@ export class Et2TreeDropdown extends SearchMixin<Constructor<any> & Et2InputWidg
'tree-dropdown--readonly': this.readonly,
'tree-dropdown--focused': this.hasFocus,
'tree-dropdown--placeholder-visible': isPlaceholderVisible,
'tree-dropdown--searching': this.treeOrSearch == "search"
'tree-dropdown--searching': this.treeOrSearch == "search",
'tree-dropdown--has-value': hasValue
})}
flip
shift