extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2025-01-27 08:19:45 +01:00
Code Issues Packages Projects Releases Wiki Activity

Split dropdown category tree into its own file, get colors working in tags

Browse Source
This commit is contained in:
nathan 2024-02-15 10:13:01 -07:00
parent 9feac8d3c3
commit ff4988b41e
3 changed files with 38 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,5 @@
import {html, LitElement, nothing} from "lit"; import {LitElement, nothing} from "lit";
import {html, literal, StaticValue} from "lit/static-html.js";
import {Et2Tree, TreeItemData} from "./Et2Tree"; import {Et2Tree, TreeItemData} from "./Et2Tree";
import {Et2WidgetWithSelectMixin} from "../Et2Select/Et2WidgetWithSelectMixin"; import {Et2WidgetWithSelectMixin} from "../Et2Select/Et2WidgetWithSelectMixin";
import {property} from "lit/decorators/property.js"; import {property} from "lit/decorators/property.js";
@ -426,6 +427,17 @@ export class Et2TreeDropdown extends Et2WidgetWithSelectMixin(LitElement)
`; `;
} }
/**
* Tag used for rendering tags when multiple=true
* Used for creating, finding & filtering options.
* @see createTagNode()
* @returns {string}
*/
public get tagTag() : StaticValue
{
return literal`et2-tag`;
}
tagsTemplate() tagsTemplate()
{ {
const value = this.getValueAsArray(); const value = this.getValueAsArray();
@ -443,9 +455,9 @@ export class Et2TreeDropdown extends Et2WidgetWithSelectMixin(LitElement)
const isEditable = false && !readonly; const isEditable = false && !readonly;
const image = option ? this.iconTemplate(option?.option ?? option) : null; const image = option ? this.iconTemplate(option?.option ?? option) : null;
const isValid = true; const isValid = true;
const tagName = this.tagTag;
return html` return html`
<et2-tag <${tagName}
part="tag" part="tag"
exportparts=" exportparts="
base:tag__base, base:tag__base,
@ -469,7 +481,7 @@ export class Et2TreeDropdown extends Et2WidgetWithSelectMixin(LitElement)
> >
${image ?? nothing} ${image ?? nothing}
${(option.label ?? option.text).trim()} ${(option.label ?? option.text).trim()}
</et2-tag> </${tagName}>
`; `;
} }
@ -556,8 +568,4 @@ export class Et2TreeDropdown extends Et2WidgetWithSelectMixin(LitElement)
} }
} }
customElements.define("et2-tree-dropdown", Et2TreeDropdown); customElements.define("et2-tree-dropdown", Et2TreeDropdown);
customElements.define("et2-tree-cat", class extends Et2TreeDropdown
{
});

20
api/js/etemplate/Et2Tree/Et2TreeDropdownCategory.ts Normal file
View File

@ -0,0 +1,20 @@
/**
* Use a custom tag for when multiple=true
*
* @returns {string}
*/
import {literal, StaticValue} from "lit/static-html.js";
import {Et2TreeDropdown} from "./Et2TreeDropdown";
import {Et2CategoryTag} from "../Et2Select/Tag/Et2CategoryTag";
export class Et2TreeDropdownCategory extends Et2TreeDropdown
{
private keep_import : Et2CategoryTag
public get tagTag() : StaticValue
{
return literal`et2-category-tag`;
}
}
customElements.define("et2-tree-cat", Et2TreeDropdownCategory);

1
api/js/etemplate/etemplate2.ts
View File

@ -106,6 +106,7 @@ import "./Et2Textbox/Et2Password";
import './Et2Textbox/Et2Searchbox'; import './Et2Textbox/Et2Searchbox';
import "./Et2Tree/Et2Tree"; import "./Et2Tree/Et2Tree";
import "./Et2Tree/Et2TreeDropdown"; import "./Et2Tree/Et2TreeDropdown";
import "./Et2Tree/Et2TreeDropdownCategory";
import "./Et2Tree/Et2MultiselectTree" import "./Et2Tree/Et2MultiselectTree"