ezfw-core 1.0.12 → 1.0.14

package/README.md

@@ -0,0 +1,196 @@
+<p align="center">
+  <img src="https://unpkg.com/ezfw-core/assets/ezfw-logo.png" alt="Ez Framework" width="280">
+</p>
+
+<p align="center">
+  A declarative component framework for building modern web applications with minimal boilerplate.
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/ezfw-core"><img src="https://img.shields.io/npm/v/ezfw-core.svg" alt="npm version"></a>
+  <a href="https://www.npmjs.com/package/ezfw-core"><img src="https://img.shields.io/npm/dm/ezfw-core.svg" alt="npm downloads"></a>
+  <a href="https://github.com/user/ez/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/ezfw-core.svg" alt="license"></a>
+</p>
+
+## Quick Start
+
+```bash
+# Install CLI globally
+npm i -g ezfw
+
+# Create a new project
+ezfw new my-app
+
+# Start development server
+cd my-app
+npm run dev
+```
+
+## Why Ez?
+
+- **Declarative** - Define UI as plain JavaScript objects, no JSX or templates
+- **Reactive** - Built-in state management with signals
+- **Zero Config** - Works out of the box with Vite
+- **CSS Modules** - Scoped styles by default
+- **Type Safe** - Written in TypeScript
+
+## Example
+
+```javascript
+// Define a view
+ez.define('Counter', {
+    controller: 'Counter',
+    items: [
+        { eztype: 'h1', bind: { text: 'count' } },
+        {
+            eztype: 'EzButton',
+            text: 'Increment',
+            onClick: 'increment'
+        }
+    ]
+});
+
+// Define controller with reactive state
+ez.defineController('CounterController', {
+    state: { count: 0 },
+    increment() {
+        this.state.count++;
+    }
+});
+
+// Register route
+ez.route('/', 'Counter');
+```
+
+## Components
+
+| Component | Description |
+|-----------|-------------|
+| `EzButton` | Buttons with variants (primary, secondary, danger, etc.) |
+| `EzInput` | Text input with validation support |
+| `EzSelect` | Dropdown select with search |
+| `EzCheckbox` | Checkbox with label |
+| `EzRadio` | Radio button groups |
+| `EzSwitch` | Toggle switch |
+| `EzTextarea` | Multi-line text input |
+| `EzDatePicker` | Date picker with calendar |
+| `EzTimePicker` | Time picker |
+| `EzGrid` | Data grid with sorting, filtering, pagination |
+| `EzDataView` | Grid/Cards view switcher |
+| `EzForm` | Form with validation |
+| `EzTabPanel` | Tabbed interface |
+| `EzCard` | Content card |
+| `EzPanel` | Collapsible panel |
+| `EzDialog` | Modal dialogs |
+| `EzTooltip` | Tooltips |
+| `EzDropdown` | Dropdown menus |
+| `EzAvatar` | User avatars |
+| `EzBadge` | Status badges |
+| `EzSkeleton` | Loading skeletons |
+| `EzChart` | Charts (Line, Bar, Doughnut) |
+
+## Features
+
+### Routing
+
+```javascript
+ez.route('/users', 'UserList');
+ez.route('/users/:id', 'UserDetail');
+```
+
+### Data Binding
+
+```javascript
+{
+    eztype: 'span',
+    bind: {
+        text: 'user.name',
+        cls: () => ctrl.state.active ? 'active' : ''
+    }
+}
+```
+
+### Forms & Validation
+
+```javascript
+{
+    eztype: 'EzForm',
+    ref: 'myForm',
+    items: [
+        {
+            eztype: 'EzInput',
+            name: 'email',
+            validators: ['required', 'email']
+        }
+    ]
+}
+
+// In controller
+const form = ez._refs.myForm;
+if (form.validate()) {
+    const data = form.getFormData();
+}
+```
+
+### Grid with Remote Data
+
+```javascript
+{
+    eztype: 'EzGrid',
+    remote: {
+        api: 'v1/users',
+        autoLoad: true
+    },
+    columns: [
+        { text: 'Name', index: 'name', flex: 1 },
+        { text: 'Email', index: 'email', flex: 2 }
+    ]
+}
+```
+
+### Dialogs
+
+```javascript
+// Alert
+await ez.dialog.alert('Operation completed');
+
+// Confirm
+const confirmed = await ez.dialog.confirm('Are you sure?');
+
+// Custom dialog
+const result = await ez.dialog.open({
+    title: 'Edit User',
+    items: [
+        { eztype: 'EzForm', /* ... */ }
+    ],
+    buttons: [
+        { text: 'Cancel', variant: 'secondary', value: false },
+        { text: 'Save', variant: 'primary', value: true }
+    ]
+});
+```
+
+## Project Structure
+
+```
+my-app/
+├── index.html
+├── index.js          # App entry point
+├── vite.config.js
+└── app/
+    ├── routes.js     # Route definitions
+    └── views/
+        └── Home/
+            ├── Home.js
+            ├── Home.module.scss
+            └── HomeController.js
+```
+
+## Requirements
+
+- Node.js >= 18
+- Vite >= 5
+
+## License
+
+MIT

package/components/dialog/EzDialog.ts

@@ -132,11 +132,16 @@ export class EzDialog extends EzBaseComponent {
         dialog.appendChild(body);
 
         // Footer with buttons
-        if (buttons && buttons.length > 0) {
+        let buttonList = buttons;
+        if (typeof buttons === 'function') {
+            buttonList = buttons(_dialogInstance);
+        }
+
+        if (Array.isArray(buttonList) && buttonList.length > 0) {
             const footer = document.createElement('div');
             footer.className = css('footer');
 
-            for (const btn of buttons) {
+            for (const btn of buttonList) {
                 const buttonConfig = {
                     eztype: 'EzButton',
                     text: btn.text,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ezfw-core",
-  "version": "1.0.12",
+  "version": "1.0.14",
   "description": "Ez Framework - A declarative component framework for building modern web applications",
   "type": "module",
   "main": "./core/ez.ts",
@@ -17,6 +17,7 @@
     "./*": "./*"
   },
   "files": [
+    "assets",
     "core",
     "components",
     "services",

package/services/dialog.js

@@ -33,6 +33,9 @@ export class EzDialogService {
 
                     setTimeout(() => {
                         dialogInstance._el?.remove();
+                        if (config.onDestroy) {
+                            config.onDestroy();
+                        }
                     }, 200);
                 }