Trees

// TODO: add interface
{
 "type": "tree",
 "alias": "My.Tree.Alias",
 "name": "My Tree",
 "meta": {
  "repositoryAlias": "My.Repository.Alias"
 }
},
{
 "type": "treeItem",
   "kind": "entity",
 "alias": "My.TreeItem.Alias",
 "name": "My Tree Item",
   "conditions": {
  "entityType": "my-entity-type",
 },
}

<umb-tree alias="My.Tree.Alias"></umb-tree>

{
 "type": "treeItem",
 "alias": "Umb.TreeItem.Alias",
 "name": "My Tree Item",
 "element": "./my-tree-item.element.js",
 "conditions": {
  "entityType": "my-entity-type",
 },
};

import { css, html, nothing } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
import { UmbMyTreeItemContext, MyTreeItemDataModel } from './my-tree-item.context';

@customElement('my-tree-item')
export class MyTreeItemElement extends UmbElementMixin(LitElement) {
 private _item?: MyTreeItemDataModel;
 @property({ type: Object, attribute: false })
 public get item() {
  return this._item;
 }
 public set item(value: MyTreeItemDataModel | undefined) {
  this._item = value;
  this.#context.setTreeItem(value);
 }

 #context = new UmbMyTreeItemContext(this);

 render() {
  if (!this.item) return nothing;
  return html` <umb-tree-item-base> Some custom markup </umb-tree-item-base>`;
 }
}

export default MyTreeItemElement;

// TODO: auto-generate this from the interface
export interface UmbTreeItemContext<T> {
 host: UmbControllerHostElement;
 unique?: string;
 type?: string;

 treeItem: Observable<T | undefined>;
 hasChildren: Observable<boolean>;
 isLoading: Observable<boolean>;
 isSelectable: Observable<boolean>;
 isSelected: Observable<boolean>;
 isActive: Observable<boolean>;
 hasActions: Observable<boolean>;
 path: Observable<string>;

 setTreeItem(treeItem: T | undefined): void;

 requestChildren(): Promise<{
  data: PagedResponse<T> | undefined;
  error: ProblemDetails | undefined;
  asObservable?: () => Observable<T[]>;
 }>;
 toggleContextMenu(): void;
 select(): void;
 deselect(): void;
 constructPath(pathname: string, entityType: string, unique: string): string;
}

export class UmbMyTreeItemContext extends UmbTreeItemContextBase<MyTreeItemDataModel> {
 constructor(host: UmbControllerHostElement) {
  super(host, (x: MyTreeItemDataModel) => x.unique);
 }

 // overwrite any methods or properties here if needed
}