updated with additional learnings

README.md

@@ -54,5 +54,4 @@ npm run watch
 ### Blog Articles
 - https://dev.to/kevinjump/early-adoptors-guide-to-umbraco-v14-package-structure-3i67
 - https:/KevinJump/EarlyAdopters.Umbraco.Templates/tree/main/package-template/MyPackage.1.Client/assets
-- https:/KevinJump/EarlyAdopters.Umbraco.Templates/tree/main/package-template/MyPackage.1.Client/assets
-
+- https:/KevinJump/TimeDashboard

src/Umbraco14Sandbox.Client/assets/package.json

@@ -1,5 +1,5 @@
 {
- "name": "assets",
+ "name": "umbraco14sandbox",
  "private": true,
  "version": "0.0.0",
  "type": "module",

src/Umbraco14Sandbox.Client/assets/src/dashboards/manifest.ts

@@ -15,10 +15,10 @@ const dashboards: Array<ManifestDashboard> = [
  conditions: [
  {
  alias: 'Umb.Condition.SectionAlias',
- match: 'Umb.Section.Content'
+ match: 'punk.section'
  }
  ]
  }
 ]
 
-export const manifests = [...dashboards];
+export const manifests = [...dashboards]; 

src/Umbraco14Sandbox.Client/assets/src/dialogs/custom-modal-element.ts

@@ -0,0 +1,65 @@
+import { customElement, html, state } from "@umbraco-cms/backoffice/external/lit";
+import { UmbModalBaseElement } from "@umbraco-cms/backoffice/modal";
+import { PunkCustomModalData, PunkCustomModalValue } from "./custom-modal-token";
+import { UUIInputEvent } from "@umbraco-cms/backoffice/external/uui";
+
+@customElement('punk-custom-modal')
+export class PunkCustomModalElement extends 
+ UmbModalBaseElement<PunkCustomModalData, PunkCustomModalValue> 
+{
+ constructor() {
+ super();
+ }
+
+ connectedCallback(): void {
+ super.connectedCallback();
+ this.updateValue({content: this.data?.content}); 
+ }
+
+ @state()
+ content: string = '';
+
+ #handleConfirm() {
+ this.value = { content: this.data?.content ?? ''} ;
+ this.modalContext?.submit();
+ }
+
+ #handleCancel() {
+ this.modalContext?.reject();
+ }
+
+ #contentChange(event: UUIInputEvent) {
+ this.updateValue({content: event.target.value.toString()});
+ }
+
+ render() {
+ return html`
+ <umb-body-layout .headline=${this.data?.headline ?? 'Custom dialog'}>
+ <uui-box>
+ <uui-textarea label="content" 
+ rows=10
+ .value=${this.data?.content}
+ @input=${this.#contentChange}>
+ </uui-textarea>
+ </uui-box>
+ <uui-box>
+ <h2>Return Value</h2>
+ <pre>${this.value?.content}</pre>
+ </uui-box>
+
+ <div slot="actions">
+ <uui-button id="cancel" label="Cancel" @click="${this.#handleCancel}">Cancel</uui-button>
+ <uui-button
+ id="submit"
+ color='positive'
+ look="primary"
+ label="Submit"
+ @click=${this.#handleConfirm}></uui-button>
+ </div>
+ </umb-body-layout>
+ `;
+ }
+
+}
+
+export default PunkCustomModalElement;

src/Umbraco14Sandbox.Client/assets/src/dialogs/custom-modal-token.ts

@@ -0,0 +1,20 @@
+import { UmbModalToken } from "@umbraco-cms/backoffice/modal";
+
+export interface PunkCustomModalData {
+ headline: string;
+ content: string;
+}
+
+export interface PunkCustomModalValue {
+ content: string 
+}
+
+export const TIME_CUSTOM_MODAL = new UmbModalToken<PunkCustomModalData, PunkCustomModalValue>(
+ "punk.custom.modal",
+ {
+ modal: {
+ type: 'sidebar',
+ size: 'medium'
+ }
+ }
+);

src/Umbraco14Sandbox.Client/assets/src/dialogs/manifest.ts

@@ -0,0 +1,12 @@
+import { ManifestModal } from "@umbraco-cms/backoffice/extension-registry";
+
+const modals: Array<ManifestModal> = [
+ {
+ type: 'modal',
+ alias: 'punk.custom.modal',
+ name: 'punk custom modal',
+ js: () => import('./custom-modal-element.ts')
+ }
+];
+
+export const manifests = [...modals];

src/Umbraco14Sandbox.Client/assets/src/index.ts

@@ -2,11 +2,19 @@ import { UmbEntryPointOnInit } from '@umbraco-cms/backoffice/extension-api';
 import { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry';
 
 import { manifests as dashboardManifests } from './dashboards/manifest';
-import { manifests as propertyEditors } from './propertyEditors/manifest';
+import { manifests as propertyEditorsManifests } from './propertyEditors/manifest';
+import { manifests as sectionManifests } from './sections/manifest';
+import { manifests as sidebarManifests } from './sidebars/manifest';
+import { manifests as workspacesManifests } from './workspaces/manifest';
+import { manifests as dialogManifests } from './dialogs/manifest';
 
 const manifests: Array<ManifestTypes> = [
  ...dashboardManifests,
- ...propertyEditors
+ ...propertyEditorsManifests,
+ ...sectionManifests,
+ ...sidebarManifests,
+ ...workspacesManifests,
+ ...dialogManifests
 ];
 
 export const onInit: UmbEntryPointOnInit = (_host, extensionRegistry) => {

src/Umbraco14Sandbox.Client/assets/src/sections/manifest.ts

@@ -0,0 +1,14 @@
+import { ManifestSection } from "@umbraco-cms/backoffice/extension-registry";
+
+const sectionManifest : ManifestSection = {
+ type: 'section',
+ alias: 'punk.section',
+ name: 'Punk section',
+ weight: 10,
+ meta: {
+ label: 'Punk',
+ pathname: 'Punk'
+ }
+}
+
+export const manifests = [sectionManifest];

src/Umbraco14Sandbox.Client/assets/src/sidebars/manifest.ts

@@ -0,0 +1,99 @@
+import { ManifestElement } from "@umbraco-cms/backoffice/extension-api";
+import { ManifestMenu, ManifestMenuItem, ManifestSectionSidebarApp, MetaMenuItem, UmbMenuItemElement } from "@umbraco-cms/backoffice/extension-registry";
+
+const sidebarAppManifest: ManifestSectionSidebarApp = {
+ type: 'sectionSidebarApp',
+ kind: 'menuWithEntityActions',
+ alias: 'punk.sidebar.app',
+ name: 'punk app',
+ meta: {
+ label: "Punk",
+ menu: "punk.nested.menu"
+
+ },
+ conditions: [
+ {
+ alias: "Umb.Condition.SectionAlias",
+ match: "punk.section"
+ }
+ ]
+};
+
+const menuManifest: ManifestMenu = {
+ type: 'menu',
+ alias: 'punk.menu',
+ name: 'punk sidebar menu',
+ meta: {
+ label: 'punk'
+ }
+}
+
+const menuItemManifest: ManifestMenuItem = {
+ type: 'menuItem',
+ alias: 'punk.menu.item',
+ name: 'punk menu item',
+ meta: {
+ label: 'Punk items',
+ icon: 'icon-alarm-clock',
+ entityType: 'punk-workspace',
+ menus: [
+ 'punk.menu'
+ ]
+ },
+ element: () => import('./nested-menu.element.ts')
+}
+
+/**** nested menu items ****/
+
+export interface ManifestTimeMenuItem extends ManifestElement<UmbMenuItemElement> {
+ type: 'punk-menu-item';
+ meta: MetaMenuItem;
+}
+
+
+const nestedMenuManifest: ManifestMenu = {
+ type: 'menu',
+ alias: 'punk.nested.menu',
+ name: 'Nested menu',
+ element: () => import('./nested-menu.element.ts'),
+ meta: {
+ label: 'Punk items',
+ icon: 'icon-alarm-clock',
+ entityType: 'punk-workspace',
+ }
+}
+
+const nestedMenuItems: ManifestTimeMenuItem[] = [
+ {
+ type: 'punk-menu-item',
+ alias: 'punk.nested.menu.child-one',
+ name: 'child item',
+ weight: 200,
+ meta: {
+ menus: [nestedMenuManifest.alias],
+ icon: 'icon-alarm-clock',
+ label: 'child item 1',
+ entityType: 'punk-workspace',
+ }
+ },
+ {
+ type: 'punk-menu-item',
+ alias: 'punk.nested.menu.child-two',
+ name: 'child item two',
+ weight: 200,
+ meta: {
+ menus: [nestedMenuManifest.alias],
+ icon: 'icon-alarm-clock',
+ label: 'child item 2',
+ entityType: 'punk-workspace',
+ }
+ }
+];
+
+export const manifests = [
+ sidebarAppManifest,
+ menuManifest,
+ menuItemManifest,
+ nestedMenuManifest,
+ ...nestedMenuItems,
+];

src/Umbraco14Sandbox.Client/assets/src/sidebars/nested-menu.element.ts

@@ -0,0 +1,30 @@
+import { UmbElementMixin } from "@umbraco-cms/backoffice/element-api";
+import { ManifestMenuItem, UmbMenuItemElement } from "@umbraco-cms/backoffice/extension-registry";
+import { LitElement, customElement, html, ifDefined, property } from "@umbraco-cms/backoffice/external/lit";
+import { ManifestTimeMenuItem } from "./manifest";
+
+@customElement('punk-nested-menu-item')
+export class NestedMenuItemElement extends UmbElementMixin(LitElement) 
+implements UmbMenuItemElement {
+
+ @property({type: Object, attribute: false})
+ manifest!: ManifestMenuItem
+
+ render() {
+ return html`
+ <umb-menu-item-layout
+ label=${this.manifest.meta.label || this.manifest.name}
+ icon-name=${ifDefined(this.manifest.meta.icon)}
+ entity-type=${ifDefined(this.manifest.meta.entityType)}
+ has-Children=${true}>${this.renderChildren()}</umb-menu-item-layout>`;
+ }
+
+ renderChildren() {
+ return html` <umb-extension-slot
+ type="punk-menu-item"
+ .filter=${(items: ManifestTimeMenuItem) => items.meta.menus.includes(this.manifest!.alias)}
+ default-element="umb-menu-item-default"></umb-extension-slot>`;
+ }
+}
+
+export default NestedMenuItemElement;

src/Umbraco14Sandbox.Client/assets/src/workspaces/context.ts

@@ -0,0 +1,29 @@
+import { UmbControllerBase } from "@umbraco-cms/backoffice/class-api";
+import { UmbContextToken } from "@umbraco-cms/backoffice/context-api";
+import { UmbControllerHostElement } from "@umbraco-cms/backoffice/controller-api";
+import { UMB_WORKSPACE_CONTEXT, type UmbWorkspaceContextInterface } from '@umbraco-cms/backoffice/workspace';
+
+
+export class PunkWorkspaceContext extends UmbControllerBase implements UmbWorkspaceContextInterface {
+ public readonly workspaceAlias: string = 'punk.workspace';
+
+ constructor(host:UmbControllerHostElement) {
+ super(host);
+ this.provideContext(UMB_WORKSPACE_CONTEXT, this);
+ this.provideContext(TIME_WORKSPACE_CONTEXT, this);
+ }
+
+ getEntityType(): string {
+ return 'punk-workspace';
+ }
+
+ getUnique(): string | undefined {
+ return undefined;
+ }
+}
+
+export default PunkWorkspaceContext;
+
+export const TIME_WORKSPACE_CONTEXT = new UmbContextToken<PunkWorkspaceContext>(
+ PunkWorkspaceContext.name,
+);