Add modals to v14

src/Our.Umbraco.UiExamples.v14/public/umbraco-package.json

@@ -1,10 +1,10 @@
 {
-    "name": "My Package Name",
+    "name": "Umbraco UI Examples",
     "version": "0.1.0",
     "extensions": [
         {
             "type": "bundle",
-            "alias": "My.Package.Bundle",
+            "alias": "example.ui.bundle",
             "name": "Example.UI",
             "js": "/App_Plugins/Example.UI/manifest.js"
         }

src/Our.Umbraco.UiExamples.v14/src/manifest.ts

@@ -1,21 +1,21 @@
 import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry';
 
 export const manifests: Array<ManifestTypes> = [
-	{
-		"type": "section",
-		"name": "Example UI Dashboard",
-		"alias": "example.ui.section",
-		"weight": 900,
-		"meta": {
-			"label": "Example UI",
-			"pathname": "example-ui"
-		}
-	},
+  {
+    "type": "section",
+    "name": "Example UI Dashboard",
+    "alias": "example.ui.section",
+    "weight": 900,
+    "meta": {
+      "label": "Example UI",
+      "pathname": "example-ui"
+    }
+  },
   {
     "type": "dashboard",
     "alias": "example.ui.dashboard",
     "name": "Example UI Dashboard",
-		"element": () => import("./scripts/dashboards/welcome-dashboard.ts"),
+    "element": () => import("./scripts/dashboards/welcome-dashboard.ts"),
     "weight": -1,
     "meta": {
       "label": "Welcome Dashboard",
@@ -29,26 +29,15 @@ export const manifests: Array<ManifestTypes> = [
     ]
   },
   {
-    "type": "dashboard",
-    "alias": "example.ui.dashboard.dialogs",
-    "name": "Dialogs",
-		"element": () => import("./scripts/dashboards/custom-dialogs-dashboard.ts"),
-    "weight": -1,
-    "meta": {
-      "label": "Dialogs",
-      "pathname": "dialogs"
-    },
-    "conditions": [
-      {
-        "alias": "Umb.Condition.SectionAlias",
-        "match": "example.ui.section"
-      }
-    ]
+    "type": "bundle",
+    "alias": "example.ui.modals",
+    "name": "Example.UI - Modals",
+    "js": () => import("./scripts/modals/manifest.ts")
   },
   {
     "type": "sectionView",
     "alias": "example.ui.dashboard.section.boxlayout",
-		"element": () => import("./scripts/sections/box-layout-section.ts"),
+    "element": () => import("./scripts/sections/box-layout-section.ts"),
     "name": "Box Layout",
     "meta": {
       "label": "Box Layout",
@@ -62,69 +51,4 @@ export const manifests: Array<ManifestTypes> = [
       }
     ]
   }
-	// ... insert as many manifests as you like
-
-    /*"extensions": [
-    {
-      "type": "section",
-      "alias": "example.ui.section",
-      "name": "Example UI Dashboard",
-      "weight": -1,
-      "meta": {
-        "label": "Example UI",
-        "pathname": "my-dashboard"
-      }
-    },
-    {
-      "type": "dashboard",
-      "alias": "example.ui.dashboard",
-      "name": "Example UI Dashboard",
-      "js": "/App_Plugins/Example.UI/scripts/dashboards/welcome-dashboard.js",
-      "weight": -1,
-      "meta": {
-        "label": "Welcome Dashboard",
-        "pathname": "welcome-dashboard"
-      },
-      "conditions": [
-        {
-          "alias": "Umb.Condition.SectionAlias",
-          "match": "example.ui.section"
-        }
-      ]
-    },
-    {
-      "type": "dashboard",
-      "alias": "example.ui.dashboard.dialogs",
-      "name": "Dialogs",
-      "js": "/App_Plugins/Example.UI/scripts/dashboards/custom-dialogs-dashboard.js",
-      "weight": -1,
-      "meta": {
-        "label": "Dialogs",
-        "pathname": "dialogs"
-      },
-      "conditions": [
-        {
-          "alias": "Umb.Condition.SectionAlias",
-          "match": "example.ui.section"
-        }
-      ]
-    },
-    {
-      "type": "sectionView",
-      "alias": "example.ui.dashboard.section.boxlayout",
-      "js": "/App_Plugins/Example.UI/scripts/sections/box-layout-section.js",
-      "name": "Box Layout",
-      "meta": {
-        "sections": [ "example.ui.section" ],
-        "label": "Box Layout",
-        "icon": "folder",
-        "pathname": "box-layout"
-      },
-      "conditions": [
-        {
-          "alias": "Umb.Condition.SectionAlias",
-          "match": "example.ui.section"
-        }
-      ]
-    }*/
 ]

src/Our.Umbraco.UiExamples.v14/src/scripts/modals/custom-dialog.token.ts

@@ -0,0 +1,16 @@
+import { UmbModalToken } from "@umbraco-cms/backoffice/modal";
+
+export type MyModalData = {
+    headline: string;
+}
+
+export type MyModalValue = {
+    myData: string;
+}
+
+export const MY_DIALOG_TOKEN = new UmbModalToken<MyModalData, MyModalValue>('example.ui.modals.dialog', {
+    modal: {
+        type: 'dialog',
+        size: 'small'
+    }
+});

src/Our.Umbraco.UiExamples.v14/src/scripts/modals/custom-dialog.ts

@@ -0,0 +1,41 @@
+import { html, LitElement, property, customElement } from "@umbraco-cms/backoffice/external/lit";
+import { UmbElementMixin } from "@umbraco-cms/backoffice/element-api";
+import type { UmbModalContext } from "@umbraco-cms/backoffice/modal";
+import type { MyModalData, MyModalValue } from "./custom-dialog.token.ts";
+import { UmbModalExtensionElement } from "@umbraco-cms/backoffice/extension-registry";
+
+@customElement('custom-dialog')
+export default class MyDialogElement
+    extends UmbElementMixin(LitElement)
+    implements UmbModalExtensionElement<MyModalData, MyModalValue> {
+
+    @property({ attribute: false })
+    modalContext?: UmbModalContext<MyModalData, MyModalValue>;
+
+    @property({ attribute: false })
+    data?: MyModalData;
+
+    private _handleCancel() {
+        this.modalContext?.reject();
+    }
+
+    private _handleSubmit() {
+        this.modalContext?.updateValue({ myData: "hello world" });
+        this.modalContext?.submit();
+    }
+
+    render() {
+        return html`
+            <uui-dialog>
+                <uui-dialog-layout>
+                    <span slot="headline">
+                    <uui-icon name="code"></uui-icon> ${this.modalContext?.data.headline ?? "Default headline"}
+                    </span>
+                    <p>This is using a <b>slot</b> for the headline.</p>
+                    <uui-button slot="actions"  @click=${this._handleCancel}>Cancel</uui-button>
+                    <uui-button slot="actions" look="primary" color="positive" @click=${this._handleSubmit}>Submit</uui-button>
+                </uui-dialog-layout>
+            </uui-dialog>
+        `;
+    }
+}