ezfw-core 1.0.8 → 1.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/dialog/EzDialog.ts +130 -0
- package/modules.ts +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
import { EzBaseComponent } from '../EzBaseComponent.js';
|
|
2
|
+
|
|
3
|
+
export class EzDialog extends EzBaseComponent {
|
|
4
|
+
static eztype = 'EzDialog';
|
|
5
|
+
|
|
6
|
+
async render() {
|
|
7
|
+
const { css, config } = this;
|
|
8
|
+
const props = config.props || config;
|
|
9
|
+
|
|
10
|
+
const {
|
|
11
|
+
title,
|
|
12
|
+
message,
|
|
13
|
+
icon,
|
|
14
|
+
iconVariant = 'info',
|
|
15
|
+
size = 'md',
|
|
16
|
+
closable = true,
|
|
17
|
+
maximizable = false,
|
|
18
|
+
items,
|
|
19
|
+
buttons,
|
|
20
|
+
_dialogInstance
|
|
21
|
+
} = props;
|
|
22
|
+
|
|
23
|
+
// Create overlay
|
|
24
|
+
const overlay = document.createElement('div');
|
|
25
|
+
overlay.className = css.overlay;
|
|
26
|
+
|
|
27
|
+
// Create dialog
|
|
28
|
+
const dialog = document.createElement('div');
|
|
29
|
+
dialog.className = `${css.dialog} ${css[size] || css.md}`;
|
|
30
|
+
|
|
31
|
+
// Header
|
|
32
|
+
if (title || icon || closable || maximizable) {
|
|
33
|
+
const header = document.createElement('div');
|
|
34
|
+
header.className = css.header;
|
|
35
|
+
|
|
36
|
+
if (icon) {
|
|
37
|
+
const iconEl = document.createElement('div');
|
|
38
|
+
iconEl.className = `${css.headerIcon} ${css[iconVariant] || ''}`;
|
|
39
|
+
iconEl.innerHTML = `<i class="${icon}"></i>`;
|
|
40
|
+
header.appendChild(iconEl);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
if (title) {
|
|
44
|
+
const titleEl = document.createElement('h3');
|
|
45
|
+
titleEl.className = css.title;
|
|
46
|
+
titleEl.textContent = title;
|
|
47
|
+
header.appendChild(titleEl);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
// Spacer
|
|
51
|
+
const spacer = document.createElement('div');
|
|
52
|
+
spacer.style.flex = '1';
|
|
53
|
+
header.appendChild(spacer);
|
|
54
|
+
|
|
55
|
+
if (maximizable) {
|
|
56
|
+
const maxBtn = document.createElement('button');
|
|
57
|
+
maxBtn.className = css.headerBtn;
|
|
58
|
+
maxBtn.innerHTML = '<i class="fa-solid fa-expand"></i>';
|
|
59
|
+
maxBtn.onclick = () => _dialogInstance?.toggleMaximize();
|
|
60
|
+
header.appendChild(maxBtn);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
if (closable) {
|
|
64
|
+
const closeBtn = document.createElement('button');
|
|
65
|
+
closeBtn.className = css.headerBtn;
|
|
66
|
+
closeBtn.innerHTML = '<i class="fa-solid fa-xmark"></i>';
|
|
67
|
+
closeBtn.onclick = () => _dialogInstance?.close();
|
|
68
|
+
header.appendChild(closeBtn);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
dialog.appendChild(header);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
// Body
|
|
75
|
+
const body = document.createElement('div');
|
|
76
|
+
body.className = css.body;
|
|
77
|
+
|
|
78
|
+
if (message) {
|
|
79
|
+
const messageEl = document.createElement('p');
|
|
80
|
+
messageEl.className = css.message;
|
|
81
|
+
messageEl.textContent = message;
|
|
82
|
+
body.appendChild(messageEl);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
if (items && items.length > 0) {
|
|
86
|
+
const children = await ez._createChildElements(items, null, null);
|
|
87
|
+
for (const child of children) {
|
|
88
|
+
if (child instanceof Node) {
|
|
89
|
+
body.appendChild(child);
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
dialog.appendChild(body);
|
|
95
|
+
|
|
96
|
+
// Footer with buttons
|
|
97
|
+
if (buttons && buttons.length > 0) {
|
|
98
|
+
const footer = document.createElement('div');
|
|
99
|
+
footer.className = css.footer;
|
|
100
|
+
|
|
101
|
+
for (const btn of buttons) {
|
|
102
|
+
const buttonConfig = {
|
|
103
|
+
eztype: 'EzButton',
|
|
104
|
+
text: btn.text,
|
|
105
|
+
variant: btn.variant || 'secondary',
|
|
106
|
+
onClick: () => {
|
|
107
|
+
if (btn.onClick) {
|
|
108
|
+
btn.onClick(_dialogInstance);
|
|
109
|
+
}
|
|
110
|
+
if (btn.value !== undefined) {
|
|
111
|
+
_dialogInstance?.close(btn.value);
|
|
112
|
+
} else if (!btn.onClick) {
|
|
113
|
+
_dialogInstance?.close();
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
};
|
|
117
|
+
|
|
118
|
+
const buttonEl = await ez._createElement(buttonConfig);
|
|
119
|
+
footer.appendChild(buttonEl);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
dialog.appendChild(footer);
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
overlay.appendChild(dialog);
|
|
126
|
+
return overlay;
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
ez.define('EzDialog', EzDialog);
|
package/modules.ts
CHANGED
|
@@ -38,6 +38,7 @@ export const frameworkModules: Record<string, () => Promise<unknown>> = {
|
|
|
38
38
|
'./components/panel/EzPanel.ts': () => import('./components/panel/EzPanel.js'),
|
|
39
39
|
'./components/skeleton/EzSkeleton.ts': () => import('./components/skeleton/EzSkeleton.js'),
|
|
40
40
|
'./components/tooltip/EzTooltip.ts': () => import('./components/tooltip/EzTooltip.js'),
|
|
41
|
+
'./components/dialog/EzDialog.ts': () => import('./components/dialog/EzDialog.js'),
|
|
41
42
|
|
|
42
43
|
// Feed
|
|
43
44
|
'./components/feed/EzActivityFeed.ts': () => import('./components/feed/EzActivityFeed.js'),
|