Skip to content

Commit 142a9c8

Browse files
RockerbyRockerby
authored
Merge pull request #45 from umbraco/feature/dialogs
Add modals to v14
2 parents 6cdbcac + 463e816 commit 142a9c8

File tree

9 files changed

+417
-184
lines changed

9 files changed

+417
-184
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
{
2-
"name": "My Package Name",
2+
"name": "Umbraco UI Examples",
33
"version": "0.1.0",
44
"extensions": [
55
{
66
"type": "bundle",
7-
"alias": "My.Package.Bundle",
7+
"alias": "example.ui.bundle",
88
"name": "Example.UI",
99
"js": "/App_Plugins/Example.UI/manifest.js"
1010
}

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

Lines changed: 16 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry';
22

33
export const manifests: Array<ManifestTypes> = [
4-
{
5-
"type": "section",
6-
"name": "Example UI Dashboard",
7-
"alias": "example.ui.section",
8-
"weight": 900,
9-
"meta": {
10-
"label": "Example UI",
11-
"pathname": "example-ui"
12-
}
13-
},
4+
{
5+
"type": "section",
6+
"name": "Example UI Dashboard",
7+
"alias": "example.ui.section",
8+
"weight": 900,
9+
"meta": {
10+
"label": "Example UI",
11+
"pathname": "example-ui"
12+
}
13+
},
1414
{
1515
"type": "dashboard",
1616
"alias": "example.ui.dashboard",
1717
"name": "Example UI Dashboard",
18-
"element": () => import("./scripts/dashboards/welcome-dashboard.ts"),
18+
"element": () => import("./scripts/dashboards/welcome-dashboard.ts"),
1919
"weight": -1,
2020
"meta": {
2121
"label": "Welcome Dashboard",
@@ -29,26 +29,15 @@ export const manifests: Array<ManifestTypes> = [
2929
]
3030
},
3131
{
32-
"type": "dashboard",
33-
"alias": "example.ui.dashboard.dialogs",
34-
"name": "Dialogs",
35-
"element": () => import("./scripts/dashboards/custom-dialogs-dashboard.ts"),
36-
"weight": -1,
37-
"meta": {
38-
"label": "Dialogs",
39-
"pathname": "dialogs"
40-
},
41-
"conditions": [
42-
{
43-
"alias": "Umb.Condition.SectionAlias",
44-
"match": "example.ui.section"
45-
}
46-
]
32+
"type": "bundle",
33+
"alias": "example.ui.modals",
34+
"name": "Example.UI - Modals",
35+
"js": () => import("./scripts/modals/manifest.ts")
4736
},
4837
{
4938
"type": "sectionView",
5039
"alias": "example.ui.dashboard.section.boxlayout",
51-
"element": () => import("./scripts/sections/box-layout-section.ts"),
40+
"element": () => import("./scripts/sections/box-layout-section.ts"),
5241
"name": "Box Layout",
5342
"meta": {
5443
"label": "Box Layout",
@@ -62,69 +51,4 @@ export const manifests: Array<ManifestTypes> = [
6251
}
6352
]
6453
}
65-
// ... insert as many manifests as you like
66-
67-
/*"extensions": [
68-
{
69-
"type": "section",
70-
"alias": "example.ui.section",
71-
"name": "Example UI Dashboard",
72-
"weight": -1,
73-
"meta": {
74-
"label": "Example UI",
75-
"pathname": "my-dashboard"
76-
}
77-
},
78-
{
79-
"type": "dashboard",
80-
"alias": "example.ui.dashboard",
81-
"name": "Example UI Dashboard",
82-
"js": "/App_Plugins/Example.UI/scripts/dashboards/welcome-dashboard.js",
83-
"weight": -1,
84-
"meta": {
85-
"label": "Welcome Dashboard",
86-
"pathname": "welcome-dashboard"
87-
},
88-
"conditions": [
89-
{
90-
"alias": "Umb.Condition.SectionAlias",
91-
"match": "example.ui.section"
92-
}
93-
]
94-
},
95-
{
96-
"type": "dashboard",
97-
"alias": "example.ui.dashboard.dialogs",
98-
"name": "Dialogs",
99-
"js": "/App_Plugins/Example.UI/scripts/dashboards/custom-dialogs-dashboard.js",
100-
"weight": -1,
101-
"meta": {
102-
"label": "Dialogs",
103-
"pathname": "dialogs"
104-
},
105-
"conditions": [
106-
{
107-
"alias": "Umb.Condition.SectionAlias",
108-
"match": "example.ui.section"
109-
}
110-
]
111-
},
112-
{
113-
"type": "sectionView",
114-
"alias": "example.ui.dashboard.section.boxlayout",
115-
"js": "/App_Plugins/Example.UI/scripts/sections/box-layout-section.js",
116-
"name": "Box Layout",
117-
"meta": {
118-
"sections": [ "example.ui.section" ],
119-
"label": "Box Layout",
120-
"icon": "folder",
121-
"pathname": "box-layout"
122-
},
123-
"conditions": [
124-
{
125-
"alias": "Umb.Condition.SectionAlias",
126-
"match": "example.ui.section"
127-
}
128-
]
129-
}*/
13054
]

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

Lines changed: 0 additions & 90 deletions
This file was deleted.

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { UmbModalToken } from "@umbraco-cms/backoffice/modal";
2+
3+
export type MyModalData = {
4+
headline: string;
5+
}
6+
7+
export type MyModalValue = {
8+
myData: string;
9+
}
10+
11+
export const MY_DIALOG_TOKEN = new UmbModalToken<MyModalData, MyModalValue>('example.ui.modals.dialog', {
12+
modal: {
13+
type: 'dialog',
14+
size: 'small'
15+
}
16+
});

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

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { html, LitElement, property, customElement } from "@umbraco-cms/backoffice/external/lit";
2+
import { UmbElementMixin } from "@umbraco-cms/backoffice/element-api";
3+
import type { UmbModalContext } from "@umbraco-cms/backoffice/modal";
4+
import type { MyModalData, MyModalValue } from "./custom-dialog.token.ts";
5+
import { UmbModalExtensionElement } from "@umbraco-cms/backoffice/extension-registry";
6+
7+
@customElement('custom-dialog')
8+
export default class MyDialogElement
9+
extends UmbElementMixin(LitElement)
10+
implements UmbModalExtensionElement<MyModalData, MyModalValue> {
11+
12+
@property({ attribute: false })
13+
modalContext?: UmbModalContext<MyModalData, MyModalValue>;
14+
15+
@property({ attribute: false })
16+
data?: MyModalData;
17+
18+
private _handleCancel() {
19+
this.modalContext?.reject();
20+
}
21+
22+
private _handleSubmit() {
23+
this.modalContext?.updateValue({ myData: "hello world" });
24+
this.modalContext?.submit();
25+
}
26+
27+
render() {
28+
return html`
29+
<uui-dialog>
30+
<uui-dialog-layout>
31+
<span slot="headline">
32+
<uui-icon name="code"></uui-icon> ${this.modalContext?.data.headline ?? "Default headline"}
33+
</span>
34+
<p>This is using a <b>slot</b> for the headline.</p>
35+
<uui-button slot="actions" @click=${this._handleCancel}>Cancel</uui-button>
36+
<uui-button slot="actions" look="primary" color="positive" @click=${this._handleSubmit}>Submit</uui-button>
37+
</uui-dialog-layout>
38+
</uui-dialog>
39+
`;
40+
}
41+
}

0 commit comments

Comments
 (0)