Add in custom dialogs (WIP)

Author: Rockerby

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

@@ -61,6 +61,12 @@ export const manifests: Array<ManifestTypes> = [
         "match": "example.ui.section"
       }
     ]
+  },
+  {
+    "type": "modal",
+    "alias": "My.Modal",
+    "name": "My Modal",
+    "element":  () => import("./scripts/dialogs/custom-modal.ts"),
   }
 	// ... insert as many manifests as you like
 

src/Our.Umbraco.UiExamples.v14/src/scripts/dashboards/custom-dialogs-dashboard.ts

@@ -1,5 +1,8 @@
 import { LitElement, css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
+import { MY_MODAL_TOKEN } from '../dialogs/custom-modal.token';
+import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
+import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
 
 /**
  * An example element.
@@ -8,29 +11,48 @@ import { customElement, property } from 'lit/decorators.js'
  * @csspart button - The button
  */
 @customElement('uie-custom-dialogs-dashboard')
-export default class UieCustomDialogsDashboard extends LitElement {
-  /**
-   * Copy for the read the docs hint.
-   */
-  @property()
-    docsHint = 'Click on the Vite and Lit logos to learn more'
+export default class UieCustomDialogsDashboard extends UmbElementMixin(LitElement) {
+  #modalManagerContext?: typeof UMB_MODAL_MANAGER_CONTEXT.TYPE;
 
+  constructor() {
+    super();
+    this.consumeContext(UMB_MODAL_MANAGER_CONTEXT, (instance) => {
+      this.#modalManagerContext = instance;
+      // modalManagerContext is now ready to be used.
+    });
+  }
 
-  /**
-   * The number of times the button has been clicked.
-   */
-  @property({ type: Number })
-  count = 0
+  render() {
+    return html`
+        <uui-box>
+            <div slot="header" class="header-bar">
+                <div>
+                    <h5 class="title">Overlay Dialogs<br/><span class="sub-header">Overlays give you a 'modal' dialog across the whole screen</span></h5>
+                </div>
+            </div>
+            <div slot="header-actions">
+                <uui-button href="https://uui.umbraco.com/"  target="_blank" look="primary" color="positive">
+                    <uui-badge slot="extra" label="A11Y label">!</uui-badge>
+                    <uui-icon name="info"></uui-icon>
+                    View the Storybook library</uui-button>
+            </div>
+            <slot>
+                <p>The overlay service has a confirm option built, in with this you can quickly create a confirm dialog, to present your users with a simple option.</p>
+                <uui-button-group>
+                  <uui-button look="primary" color="default" @click=${this._openModal}>Confirm</uui-button>
+                  <uui-button look="primary" color="positive">Confirm Remove</uui-button>
+                  <uui-button look="primary" color="danger">Confirm Delete</uui-button>
+                </uui-button-group>
+            </slot>
+        </uui-box>`
+  }
 
-    render() {
-      return html`
-        <uui-modal-container>
-          <uui-modal-dialog>
-            <h1>My Modal</h1>
-            <p>My modal content</p>
-          </uui-modal-dialog>
-        </uui-modal-container>
-        `
+  private _openModal() {
+    this.#modalManagerContext?.open(this, MY_MODAL_TOKEN, {
+      data: {
+        headline: "My modal headline",
+      },
+    });
   }
 
   static styles = css`
@@ -85,6 +107,6 @@ export default class UieCustomDialogsDashboard extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-      'uie-custom-dialogs-dashboard': UieCustomDialogsDashboard
+    'uie-custom-dialogs-dashboard': UieCustomDialogsDashboard
   }
 }

src/Our.Umbraco.UiExamples.v14/src/scripts/dialogs/custom-modal.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_MODAL_TOKEN = new UmbModalToken<MyModalData, MyModalValue>('My.Modal', {
+    modal: {
+        type: 'sidebar',
+        size: 'small'
+    }
+});

src/Our.Umbraco.UiExamples.v14/src/scripts/dialogs/custom-modal.ts

@@ -0,0 +1,36 @@
+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-modal.token.ts";
+import { UmbModalExtensionElement } from "@umbraco-cms/backoffice/extension-registry";
+
+@customElement('my-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?.submit();
+    }
+
+    private _handleSubmit() {
+        this.modalContext?.updateValue({ myData: "hello world" });
+        this.modalContext?.submit();
+    }
+
+    render() {
+        return html`
+            <div>
+                <h1>${this.modalContext?.data.headline ?? "Default headline"}</h1>
+                <button @click=${this._handleCancel}>Cancel</button>
+                <button @click=${this._handleSubmit}>Submit</button>
+            </div>
+        `;
+    }
+}