rename to tree-item-base

src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/tree/manifests.ts

@@ -1,5 +1,5 @@
 import { UmbDocumentRepository } from '../repository/document.repository';
-import type { ManifestTree } from '@umbraco-cms/backoffice/extensions-registry';
+import type { ManifestTree, ManifestTreeItem } from '@umbraco-cms/backoffice/extensions-registry';
 
 const treeAlias = 'Umb.Tree.Documents';
 
@@ -12,4 +12,14 @@ const tree: ManifestTree = {
 	},
 };
 
-export const manifests = [tree];
+const treeItem: ManifestTreeItem = {
+	type: 'treeItem',
+	alias: 'Umb.TreeItem.Document',
+	name: 'Document Tree Item',
+	loader: () => import('./tree-item/document-tree-item.element'),
+	conditions: {
+		entityType: 'document',
+	},
+};
+
+export const manifests = [tree, treeItem];

src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/tree/tree-item/document-tree-item.element.ts

@@ -0,0 +1,51 @@
+import { css, html, nothing } from 'lit';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { customElement, property } from 'lit/decorators.js';
+import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import { DocumentTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
+
+@customElement('umb-document-tree-item')
+export class UmbDocumentTreeItemElement extends UmbLitElement {
+	static styles = [
+		UUITextStyles,
+		css`
+			#label {
+				display: flex;
+				align-items: center;
+			}
+
+			#status-symbol {
+				width: 6px;
+				height: 6px;
+				background-color: blue;
+				display: block;
+				border-radius: 3px;
+				margin-right: 10px;
+			}
+		`,
+	];
+
+	@property({ type: Object, attribute: false })
+	public item?: DocumentTreeItemResponseModel;
+
+	render() {
+		if (!this.item) return nothing;
+		return html`
+			<umb-tree-item-base .item=${this.item}>
+				<!-- TODO: implement correct status symbol -->
+				<div id="label" slot="label">
+					<span id="status-symbol"></span>
+					<span>${this.item?.name}</span>
+				</div>
+			</umb-tree-item-base>
+		`;
+	}
+}
+
+export default UmbDocumentTreeItemElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-document-tree-item': UmbDocumentTreeItemElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item-base/tree-item-base.element.ts

@@ -3,12 +3,12 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { repeat } from 'lit/directives/repeat.js';
-import { UmbTreeItemContextBase, UMB_TREE_ITEM_CONTEXT_TOKEN } from './tree-item.context';
+import { UmbTreeItemContextBase, UMB_TREE_ITEM_CONTEXT_TOKEN } from './tree-item-base.context';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
 
-@customElement('umb-tree-item')
-export class UmbTreeItem extends UmbLitElement {
+@customElement('umb-tree-item-base')
+export class UmbTreeItemBaseElement extends UmbLitElement {
 	static styles = [UUITextStyles, css``];
 
 	private _item?: EntityTreeItemResponseModel;
@@ -137,7 +137,7 @@ export class UmbTreeItem extends UmbLitElement {
 				? repeat(
 						this._childItems,
 						(item) => item.key,
-						(item) => html`<umb-tree-item .item=${item}></umb-tree-item>`
+						(item) => html`<umb-tree-item-base .item=${item}></umb-tree-item-base>`
 				  )
 				: ''}
 		`;
@@ -146,6 +146,6 @@ export class UmbTreeItem extends UmbLitElement {
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-tree-item': UmbTreeItem;
+		'umb-tree-item-base': UmbTreeItemBaseElement;
 	}
 }

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item-base/tree-item-base.stories.ts

@@ -1,14 +1,14 @@
 import { Meta, StoryObj } from '@storybook/web-components';
-import './tree-item.element';
-import type { UmbTreeItem } from './tree-item.element';
+import './tree-item-base.element';
+import type { UmbTreeItemBaseElement } from './tree-item-base.element';
 
-const meta: Meta<UmbTreeItem> = {
+const meta: Meta<UmbTreeItemBaseElement> = {
 	title: 'Components/Tree/Tree Item',
 	component: 'umb-tree-item',
 };
 
 export default meta;
-type Story = StoryObj<UmbTreeItem>;
+type Story = StoryObj<UmbTreeItemBaseElement>;
 
 export const Overview: Story = {
 	args: {

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree.element.ts

@@ -8,7 +8,7 @@ import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extensions-api';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
 
-import './tree-item/tree-item.element';
+import './tree-item-base/tree-item-base.element';
 import './context-menu/tree-context-menu-page.service';
 import './context-menu/tree-context-menu.service';
 
@@ -118,7 +118,7 @@ export class UmbTreeElement extends UmbLitElement {
 				this._items,
 				// TODO: add getUnique to a repository interface
 				(item, index) => index,
-				(item) => html`<umb-tree-item .item=${item}></umb-tree-item>`
+				(item) => html`<umb-tree-item-base .item=${item}></umb-tree-item-base>`
 			)}
 		`;
 	}