ezfw-core 1.0.9 → 1.0.10

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.
Files changed (2) hide show
  1. package/components/dialog/EzDialog.ts +53 -15
  2. package/package.json +1 -1
package/components/dialog/EzDialog.ts CHANGED
@@ -1,11 +1,49 @@
1
+ import styles from './EzDialog.module.scss';
2
+ import { cx } from '../../utils/cssModules.js';
1
3
  import { EzBaseComponent } from '../EzBaseComponent.js';
2
4
 
5
+ const css = cx(styles);
6
+
7
+ declare const ez: {
8
+ _createElement(config: unknown): Promise<HTMLElement>;
9
+ _createChildElements(items: unknown[], controller: unknown, parent: unknown): Promise<Node[]>;
10
+ define(name: string, component: unknown): void;
11
+ };
12
+
13
+ interface DialogButton {
14
+ text: string;
15
+ variant?: string;
16
+ value?: unknown;
17
+ onClick?: (instance: DialogInstance) => void;
18
+ }
19
+
20
+ interface DialogInstance {
21
+ close: (result?: unknown) => void;
22
+ toggleMaximize: () => void;
23
+ }
24
+
25
+ interface EzDialogConfig {
26
+ props?: {
27
+ title?: string;
28
+ message?: string;
29
+ icon?: string;
30
+ iconVariant?: 'info' | 'success' | 'warning' | 'danger';
31
+ size?: 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'auto';
32
+ closable?: boolean;
33
+ maximizable?: boolean;
34
+ items?: unknown[];
35
+ buttons?: DialogButton[];
36
+ _dialogInstance?: DialogInstance;
37
+ };
38
+ [key: string]: unknown;
39
+ }
40
+
3
41
  export class EzDialog extends EzBaseComponent {
4
42
  static eztype = 'EzDialog';
43
+ declare config: EzDialogConfig;
5
44
 
6
- async render() {
7
- const { css, config } = this;
8
- const props = config.props || config;
45
+ async render(): Promise<HTMLDivElement> {
46
+ const props = this.config.props || this.config;
9
47
 
10
48
  const {
11
49
  title,
@@ -18,31 +56,31 @@ export class EzDialog extends EzBaseComponent {
18
56
  items,
19
57
  buttons,
20
58
  _dialogInstance
21
- } = props;
59
+ } = props as EzDialogConfig['props'] & { [key: string]: unknown };
22
60
 
23
61
  // Create overlay
24
62
  const overlay = document.createElement('div');
25
- overlay.className = css.overlay;
63
+ overlay.className = css('overlay');
26
64
 
27
65
  // Create dialog
28
66
  const dialog = document.createElement('div');
29
- dialog.className = `${css.dialog} ${css[size] || css.md}`;
67
+ dialog.className = css('dialog', size);
30
68
 
31
69
  // Header
32
70
  if (title || icon || closable || maximizable) {
33
71
  const header = document.createElement('div');
34
- header.className = css.header;
72
+ header.className = css('header');
35
73
 
36
74
  if (icon) {
37
75
  const iconEl = document.createElement('div');
38
- iconEl.className = `${css.headerIcon} ${css[iconVariant] || ''}`;
76
+ iconEl.className = css('headerIcon', iconVariant);
39
77
  iconEl.innerHTML = `<i class="${icon}"></i>`;
40
78
  header.appendChild(iconEl);
41
79
  }
42
80
 
43
81
  if (title) {
44
82
  const titleEl = document.createElement('h3');
45
- titleEl.className = css.title;
83
+ titleEl.className = css('title');
46
84
  titleEl.textContent = title;
47
85
  header.appendChild(titleEl);
48
86
  }
@@ -54,7 +92,7 @@ export class EzDialog extends EzBaseComponent {
54
92
 
55
93
  if (maximizable) {
56
94
  const maxBtn = document.createElement('button');
57
- maxBtn.className = css.headerBtn;
95
+ maxBtn.className = css('headerBtn');
58
96
  maxBtn.innerHTML = '<i class="fa-solid fa-expand"></i>';
59
97
  maxBtn.onclick = () => _dialogInstance?.toggleMaximize();
60
98
  header.appendChild(maxBtn);
@@ -62,7 +100,7 @@ export class EzDialog extends EzBaseComponent {
62
100
 
63
101
  if (closable) {
64
102
  const closeBtn = document.createElement('button');
65
- closeBtn.className = css.headerBtn;
103
+ closeBtn.className = css('headerBtn');
66
104
  closeBtn.innerHTML = '<i class="fa-solid fa-xmark"></i>';
67
105
  closeBtn.onclick = () => _dialogInstance?.close();
68
106
  header.appendChild(closeBtn);
@@ -73,11 +111,11 @@ export class EzDialog extends EzBaseComponent {
73
111
 
74
112
  // Body
75
113
  const body = document.createElement('div');
76
- body.className = css.body;
114
+ body.className = css('body');
77
115
 
78
116
  if (message) {
79
117
  const messageEl = document.createElement('p');
80
- messageEl.className = css.message;
118
+ messageEl.className = css('message');
81
119
  messageEl.textContent = message;
82
120
  body.appendChild(messageEl);
83
121
  }
@@ -96,7 +134,7 @@ export class EzDialog extends EzBaseComponent {
96
134
  // Footer with buttons
97
135
  if (buttons && buttons.length > 0) {
98
136
  const footer = document.createElement('div');
99
- footer.className = css.footer;
137
+ footer.className = css('footer');
100
138
 
101
139
  for (const btn of buttons) {
102
140
  const buttonConfig = {
@@ -105,7 +143,7 @@ export class EzDialog extends EzBaseComponent {
105
143
  variant: btn.variant || 'secondary',
106
144
  onClick: () => {
107
145
  if (btn.onClick) {
108
- btn.onClick(_dialogInstance);
146
+ btn.onClick(_dialogInstance!);
109
147
  }
110
148
  if (btn.value !== undefined) {
111
149
  _dialogInstance?.close(btn.value);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ezfw-core",
3
- "version": "1.0.9",
3
+ "version": "1.0.10",
4
4
  "description": "Ez Framework - A declarative component framework for building modern web applications",
5
5
  "type": "module",
6
6
  "main": "./core/ez.ts",