From 6c01edafe8abf4a6c3843b3ff8da348c6f89a675 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 23 Mar 2023 10:05:04 +0100 Subject: [PATCH] rename to tree-item-base --- .../documents/documents/tree/manifests.ts | 14 ++++- .../tree-item/document-tree-item.element.ts | 51 +++++++++++++++++++ .../tree-item-base.context.ts} | 0 .../tree-item-base.element.ts} | 10 ++-- .../tree-item-base.stories.ts} | 8 +-- .../shared/components/tree/tree.element.ts | 4 +- 6 files changed, 74 insertions(+), 13 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/tree/tree-item/document-tree-item.element.ts rename src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/{tree-item/tree-item.context.ts => tree-item-base/tree-item-base.context.ts} (100%) rename src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/{tree-item/tree-item.element.ts => tree-item-base/tree-item-base.element.ts} (93%) rename src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/{tree-item/tree-item.stories.ts => tree-item-base/tree-item-base.stories.ts} (66%) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/tree/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/tree/manifests.ts index c1e6a79314..ee92e43e8d 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/tree/manifests.ts +++ b/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]; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/tree/tree-item/document-tree-item.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/tree/tree-item/document-tree-item.element.ts new file mode 100644 index 0000000000..d488839fde --- /dev/null +++ b/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` + + +
+ + ${this.item?.name} +
+ + `; + } +} + +export default UmbDocumentTreeItemElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-document-tree-item': UmbDocumentTreeItemElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item/tree-item.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item-base/tree-item-base.context.ts similarity index 100% rename from src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item/tree-item.context.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item-base/tree-item-base.context.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item/tree-item.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item-base/tree-item-base.element.ts similarity index 93% rename from src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item/tree-item.element.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item-base/tree-item-base.element.ts index 0e86141d50..601bb816a4 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item/tree-item.element.ts +++ b/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`` + (item) => html`` ) : ''} `; @@ -146,6 +146,6 @@ export class UmbTreeItem extends UmbLitElement { declare global { interface HTMLElementTagNameMap { - 'umb-tree-item': UmbTreeItem; + 'umb-tree-item-base': UmbTreeItemBaseElement; } } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item/tree-item.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item-base/tree-item-base.stories.ts similarity index 66% rename from src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item/tree-item.stories.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item-base/tree-item-base.stories.ts index 90962da327..1f76f40872 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item/tree-item.stories.ts +++ b/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 = { +const meta: Meta = { title: 'Components/Tree/Tree Item', component: 'umb-tree-item', }; export default meta; -type Story = StoryObj; +type Story = StoryObj; export const Overview: Story = { args: { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree.element.ts index 5514f84ce6..25e34c849d 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree.element.ts +++ b/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`` + (item) => html`` )} `; }