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

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

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 {Et2WidgetWithSelectMixin} from "../Et2Select/Et2WidgetWithSelectMixin";
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()
{
const value = this.getValueAsArray();
@ -443,9 +455,9 @@ export class Et2TreeDropdown extends Et2WidgetWithSelectMixin(LitElement)
const isEditable = false && !readonly;
const image = option ? this.iconTemplate(option?.option ?? option) : null;
const isValid = true;
const tagName = this.tagTag;
return html`
<et2-tag
<${tagName}
part="tag"
exportparts="
base:tag__base,
@ -469,7 +481,7 @@ export class Et2TreeDropdown extends Et2WidgetWithSelectMixin(LitElement)
>
${image ?? nothing}
${(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-cat", class extends Et2TreeDropdown
{
});
customElements.define("et2-tree-dropdown", Et2TreeDropdown);

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);

View File

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