ezfw-core 1.0.7 → 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 +104 -7
- 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
|
@@ -1,10 +1,107 @@
|
|
|
1
1
|
// Lazy loaders for all framework modules
|
|
2
|
-
//
|
|
2
|
+
// Using explicit dynamic imports (works with npm packages)
|
|
3
3
|
|
|
4
|
-
export const frameworkModules
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
export const frameworkModules: Record<string, () => Promise<unknown>> = {
|
|
5
|
+
// Core components
|
|
6
|
+
'./components/EzComponent.ts': () => import('./components/EzComponent.js'),
|
|
7
|
+
'./components/EzInput.ts': () => import('./components/EzInput.js'),
|
|
8
|
+
'./components/EzLabel.ts': () => import('./components/EzLabel.js'),
|
|
9
|
+
'./components/EzOutlet.ts': () => import('./components/EzOutlet.js'),
|
|
10
|
+
'./components/EzBaseComponent.ts': () => import('./components/EzBaseComponent.js'),
|
|
11
|
+
'./components/HtmlWrapper.ts': () => import('./components/HtmlWrapper.js'),
|
|
7
12
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
13
|
+
// Button
|
|
14
|
+
'./components/button/EzButton.ts': () => import('./components/button/EzButton.js'),
|
|
15
|
+
'./components/button/EzButtonGroup.ts': () => import('./components/button/EzButtonGroup.js'),
|
|
16
|
+
|
|
17
|
+
// Card
|
|
18
|
+
'./components/card/EzCard.ts': () => import('./components/card/EzCard.js'),
|
|
19
|
+
|
|
20
|
+
// Avatar & Badge
|
|
21
|
+
'./components/avatar/EzAvatar.ts': () => import('./components/avatar/EzAvatar.js'),
|
|
22
|
+
'./components/badge/EzBadge.ts': () => import('./components/badge/EzBadge.js'),
|
|
23
|
+
|
|
24
|
+
// Form elements
|
|
25
|
+
'./components/checkbox/EzCheckbox.ts': () => import('./components/checkbox/EzCheckbox.js'),
|
|
26
|
+
'./components/radio/EzRadio.ts': () => import('./components/radio/EzRadio.js'),
|
|
27
|
+
'./components/select/EzSelect.ts': () => import('./components/select/EzSelect.js'),
|
|
28
|
+
'./components/switch/EzSwitch.ts': () => import('./components/switch/EzSwitch.js'),
|
|
29
|
+
'./components/textarea/EzTextarea.ts': () => import('./components/textarea/EzTextarea.js'),
|
|
30
|
+
'./components/dropdown/EzDropdown.ts': () => import('./components/dropdown/EzDropdown.js'),
|
|
31
|
+
'./components/datepicker/EzDatePicker.ts': () => import('./components/datepicker/EzDatePicker.js'),
|
|
32
|
+
'./components/timepicker/EzTimePicker.ts': () => import('./components/timepicker/EzTimePicker.js'),
|
|
33
|
+
'./components/form/EzForm.ts': () => import('./components/form/EzForm.js'),
|
|
34
|
+
'./components/form/EzValidators.ts': () => import('./components/form/EzValidators.js'),
|
|
35
|
+
|
|
36
|
+
// Layout
|
|
37
|
+
'./components/tabs/EzTabPanel.ts': () => import('./components/tabs/EzTabPanel.js'),
|
|
38
|
+
'./components/panel/EzPanel.ts': () => import('./components/panel/EzPanel.js'),
|
|
39
|
+
'./components/skeleton/EzSkeleton.ts': () => import('./components/skeleton/EzSkeleton.js'),
|
|
40
|
+
'./components/tooltip/EzTooltip.ts': () => import('./components/tooltip/EzTooltip.js'),
|
|
41
|
+
'./components/dialog/EzDialog.ts': () => import('./components/dialog/EzDialog.js'),
|
|
42
|
+
|
|
43
|
+
// Feed
|
|
44
|
+
'./components/feed/EzActivityFeed.ts': () => import('./components/feed/EzActivityFeed.js'),
|
|
45
|
+
|
|
46
|
+
// Grid
|
|
47
|
+
'./components/grid/EzGrid.ts': () => import('./components/grid/EzGrid.js'),
|
|
48
|
+
'./components/grid/EzGridContainer.ts': () => import('./components/grid/EzGridContainer.js'),
|
|
49
|
+
'./components/grid/body/EzGridBody.ts': () => import('./components/grid/body/EzGridBody.js'),
|
|
50
|
+
'./components/grid/body/EzGridCell.ts': () => import('./components/grid/body/EzGridCell.js'),
|
|
51
|
+
'./components/grid/body/EzGridRow.ts': () => import('./components/grid/body/EzGridRow.js'),
|
|
52
|
+
'./components/grid/header/EzGridHeader.ts': () => import('./components/grid/header/EzGridHeader.js'),
|
|
53
|
+
'./components/grid/footer/EzGridFooter.ts': () => import('./components/grid/footer/EzGridFooter.js'),
|
|
54
|
+
'./components/grid/filter/EzGridFilters.ts': () => import('./components/grid/filter/EzGridFilters.js'),
|
|
55
|
+
'./components/grid/title/EzGridTitle.ts': () => import('./components/grid/title/EzGridTitle.js'),
|
|
56
|
+
'./components/grid/title/EzGridTitleBar.ts': () => import('./components/grid/title/EzGridTitleBar.js'),
|
|
57
|
+
'./components/grid/title/EzGridActionBar.ts': () => import('./components/grid/title/EzGridActionBar.js'),
|
|
58
|
+
'./components/grid/state/EzGridController.ts': () => import('./components/grid/state/EzGridController.js'),
|
|
59
|
+
'./components/grid/state/EzGridColumns.ts': () => import('./components/grid/state/EzGridColumns.js'),
|
|
60
|
+
'./components/grid/state/EzGridLifecycle.ts': () => import('./components/grid/state/EzGridLifecycle.js'),
|
|
61
|
+
'./components/grid/state/EzGridNormalizers.ts': () => import('./components/grid/state/EzGridNormalizers.js'),
|
|
62
|
+
'./components/grid/state/EzGridParts.ts': () => import('./components/grid/state/EzGridParts.js'),
|
|
63
|
+
'./components/grid/state/EzGridPersistence.ts': () => import('./components/grid/state/EzGridPersistence.js'),
|
|
64
|
+
'./components/grid/state/EzGridRemote.ts': () => import('./components/grid/state/EzGridRemote.js'),
|
|
65
|
+
'./components/grid/state/EzGridSelection.ts': () => import('./components/grid/state/EzGridSelection.js'),
|
|
66
|
+
'./components/grid/state/EzGridSort.ts': () => import('./components/grid/state/EzGridSort.js'),
|
|
67
|
+
'./components/grid/query/EzGridQuery.ts': () => import('./components/grid/query/EzGridQuery.js'),
|
|
68
|
+
|
|
69
|
+
// DataView
|
|
70
|
+
'./components/dataview/EzDataView.ts': () => import('./components/dataview/EzDataView.js'),
|
|
71
|
+
'./components/dataview/modes/EzDataViewCards.ts': () => import('./components/dataview/modes/EzDataViewCards.js'),
|
|
72
|
+
'./components/dataview/modes/EzDataViewGrid.ts': () => import('./components/dataview/modes/EzDataViewGrid.js'),
|
|
73
|
+
|
|
74
|
+
// Charts
|
|
75
|
+
'./components/chart/EzChart.ts': () => import('./components/chart/EzChart.js'),
|
|
76
|
+
'./components/chart/EzBarChart.ts': () => import('./components/chart/EzBarChart.js'),
|
|
77
|
+
'./components/chart/EzLineChart.ts': () => import('./components/chart/EzLineChart.js'),
|
|
78
|
+
'./components/chart/EzDoughnutChart.ts': () => import('./components/chart/EzDoughnutChart.js'),
|
|
79
|
+
|
|
80
|
+
// Store
|
|
81
|
+
'./components/store/EzStore.ts': () => import('./components/store/EzStore.js'),
|
|
82
|
+
};
|
|
83
|
+
|
|
84
|
+
export const frameworkStyles: Record<string, () => Promise<unknown>> = {
|
|
85
|
+
'./components/EzInput.module.scss': () => import('./components/EzInput.module.scss'),
|
|
86
|
+
'./components/button/EzButton.module.scss': () => import('./components/button/EzButton.module.scss'),
|
|
87
|
+
'./components/card/EzCard.module.scss': () => import('./components/card/EzCard.module.scss'),
|
|
88
|
+
'./components/avatar/EzAvatar.module.scss': () => import('./components/avatar/EzAvatar.module.scss'),
|
|
89
|
+
'./components/badge/EzBadge.module.scss': () => import('./components/badge/EzBadge.module.scss'),
|
|
90
|
+
'./components/checkbox/EzCheckbox.module.scss': () => import('./components/checkbox/EzCheckbox.module.scss'),
|
|
91
|
+
'./components/radio/EzRadio.module.scss': () => import('./components/radio/EzRadio.module.scss'),
|
|
92
|
+
'./components/select/EzSelect.module.scss': () => import('./components/select/EzSelect.module.scss'),
|
|
93
|
+
'./components/switch/EzSwitch.module.scss': () => import('./components/switch/EzSwitch.module.scss'),
|
|
94
|
+
'./components/textarea/EzTextarea.module.scss': () => import('./components/textarea/EzTextarea.module.scss'),
|
|
95
|
+
'./components/dropdown/EzDropdown.module.scss': () => import('./components/dropdown/EzDropdown.module.scss'),
|
|
96
|
+
'./components/datepicker/EzDatePicker.module.scss': () => import('./components/datepicker/EzDatePicker.module.scss'),
|
|
97
|
+
'./components/timepicker/EzTimePicker.module.scss': () => import('./components/timepicker/EzTimePicker.module.scss'),
|
|
98
|
+
'./components/tabs/EzTabPanel.module.scss': () => import('./components/tabs/EzTabPanel.module.scss'),
|
|
99
|
+
'./components/panel/EzPanel.module.scss': () => import('./components/panel/EzPanel.module.scss'),
|
|
100
|
+
'./components/skeleton/EzSkeleton.module.scss': () => import('./components/skeleton/EzSkeleton.module.scss'),
|
|
101
|
+
'./components/tooltip/EzTooltip.module.scss': () => import('./components/tooltip/EzTooltip.module.scss'),
|
|
102
|
+
'./components/feed/EzActivityFeed.module.scss': () => import('./components/feed/EzActivityFeed.module.scss'),
|
|
103
|
+
'./components/dataview/EzDataView.module.scss': () => import('./components/dataview/EzDataView.module.scss'),
|
|
104
|
+
'./components/toast/EzToast.module.scss': () => import('./components/toast/EzToast.module.scss'),
|
|
105
|
+
'./components/dialog/EzDialog.module.scss': () => import('./components/dialog/EzDialog.module.scss'),
|
|
106
|
+
'./components/chart/EzChart.module.scss': () => import('./components/chart/EzChart.module.scss'),
|
|
107
|
+
};
|