ezfw-core 1.0.0

package/template/doc/data/dropdown/EzDropdownDoc.js

@@ -0,0 +1,178 @@
+ez.define('EzDropdownDoc', {
+    controller: 'EzDocs',
+    template() {
+        const sections = [
+            {
+                title: 'Basic Menu',
+                variants: [
+                    {
+                        label: 'Simple Dropdown',
+                        config: {
+                            eztype: 'EzDropdown',
+                            trigger: { eztype: 'EzButton', text: 'Actions', icon: 'fa-solid fa-chevron-down', iconPosition: 'right' },
+                            items: [
+                                { text: 'Edit', onClick: () => ez.toast.info('Edit clicked') },
+                                { text: 'Duplicate', onClick: () => ez.toast.info('Duplicate clicked') },
+                                { text: 'Delete', onClick: () => ez.toast.info('Delete clicked') }
+                            ]
+                        }
+                    }
+                ]
+            },
+            {
+                title: 'With Icons & Shortcuts',
+                variants: [
+                    {
+                        label: 'Full Featured',
+                        config: {
+                            eztype: 'EzDropdown',
+                            trigger: { eztype: 'EzButton', text: 'File', variant: 'primary' },
+                            items: [
+                                { text: 'New', icon: 'fa-solid fa-plus', shortcut: 'Ctrl+N' },
+                                { text: 'Open', icon: 'fa-solid fa-folder-open', shortcut: 'Ctrl+O' },
+                                { text: 'Save', icon: 'fa-solid fa-save', shortcut: 'Ctrl+S' },
+                                { text: 'Save As', icon: 'fa-solid fa-save', shortcut: 'Ctrl+Shift+S' }
+                            ]
+                        }
+                    }
+                ]
+            },
+            {
+                title: 'With Headers & Dividers',
+                variants: [
+                    {
+                        label: 'Grouped Items',
+                        config: {
+                            eztype: 'EzDropdown',
+                            trigger: { eztype: 'EzButton', text: 'Options', icon: 'fa-solid fa-ellipsis-v' },
+                            items: [
+                                { header: 'Actions' },
+                                { text: 'Edit', icon: 'fa-solid fa-edit' },
+                                { text: 'Copy', icon: 'fa-solid fa-copy' },
+                                { divider: true },
+                                { header: 'More' },
+                                { text: 'Share', icon: 'fa-solid fa-share' },
+                                { text: 'Export', icon: 'fa-solid fa-download' }
+                            ]
+                        }
+                    }
+                ]
+            },
+            {
+                title: 'Position Variants',
+                variants: [
+                    {
+                        label: 'Bottom Start',
+                        config: {
+                            eztype: 'EzDropdown',
+                            position: 'bottom-start',
+                            trigger: { eztype: 'EzButton', text: 'Bottom Start' },
+                            items: [
+                                { text: 'Option 1' },
+                                { text: 'Option 2' },
+                                { text: 'Option 3' }
+                            ]
+                        }
+                    },
+                    {
+                        label: 'Bottom End',
+                        config: {
+                            eztype: 'EzDropdown',
+                            position: 'bottom-end',
+                            trigger: { eztype: 'EzButton', text: 'Bottom End' },
+                            items: [
+                                { text: 'Option 1' },
+                                { text: 'Option 2' },
+                                { text: 'Option 3' }
+                            ]
+                        }
+                    },
+                    {
+                        label: 'Top Start',
+                        config: {
+                            eztype: 'EzDropdown',
+                            position: 'top-start',
+                            trigger: { eztype: 'EzButton', text: 'Top Start' },
+                            items: [
+                                { text: 'Option 1' },
+                                { text: 'Option 2' },
+                                { text: 'Option 3' }
+                            ]
+                        }
+                    }
+                ]
+            },
+            {
+                title: 'Danger Items',
+                variants: [
+                    {
+                        label: 'With Danger',
+                        config: {
+                            eztype: 'EzDropdown',
+                            trigger: { eztype: 'EzButton', text: 'Manage', icon: 'fa-solid fa-cog' },
+                            items: [
+                                { text: 'Settings', icon: 'fa-solid fa-cog' },
+                                { text: 'Permissions', icon: 'fa-solid fa-shield' },
+                                { divider: true },
+                                { text: 'Delete', icon: 'fa-solid fa-trash', danger: true }
+                            ]
+                        }
+                    }
+                ]
+            },
+            {
+                title: 'Disabled Items',
+                variants: [
+                    {
+                        label: 'Some Disabled',
+                        config: {
+                            eztype: 'EzDropdown',
+                            trigger: { eztype: 'EzButton', text: 'Actions' },
+                            items: [
+                                { text: 'Available Action' },
+                                { text: 'Disabled Action', disabled: true },
+                                { text: 'Another Available' },
+                                { text: 'Also Disabled', disabled: true }
+                            ]
+                        }
+                    }
+                ]
+            },
+            {
+                title: 'Icon Only Trigger',
+                variants: [
+                    {
+                        label: 'Icon Button',
+                        config: {
+                            eztype: 'EzDropdown',
+                            trigger: { eztype: 'EzButton', icon: 'fa-solid fa-ellipsis-v', variant: 'ghost' },
+                            items: [
+                                { text: 'View', icon: 'fa-solid fa-eye' },
+                                { text: 'Edit', icon: 'fa-solid fa-edit' },
+                                { text: 'Delete', icon: 'fa-solid fa-trash', danger: true }
+                            ]
+                        }
+                    }
+                ]
+            }
+        ];
+
+        return {
+            eztype: 'EzComponent',
+            cls: 'ez-docs-showcase-container',
+            layout: 'hbox',
+            items: [
+                {
+                    eztype: 'EzComponent',
+                    cls: 'ez-docs-showcase-panel',
+                    flex: 1,
+                    items: sections.map(section => ({
+                        eztype: 'EzDocsShowcaseSection',
+                        props: { section }
+                    }))
+                },
+                { eztype: 'EzDocsCodePanel' }
+            ]
+        };
+    }
+});

package/template/doc/data/form/EzFormDoc.js

@@ -0,0 +1,90 @@
+ez.define('EzFormDoc', {
+    template() {
+        return {
+            eztype: 'EzDocsContent',
+            props: {
+                componentName: 'EzForm',
+                docs: {
+                    features: [
+                        'Automatic data binding via formData property',
+                        'Built-in validation with EzValidators',
+                        'Dirty tracking (isDirty, getDirtyData)',
+                        'Form reset to initial values',
+                        'Real-time validation after first submit',
+                        'Auto-layout with layout: [1, 2, 1] array syntax'
+                    ],
+                    usage: {
+                        config: {
+                            eztype: 'EzForm',
+                            style: { maxWidth: '400px' },
+                            items: [
+                                { eztype: 'EzInput', placeholder: 'Email', icon: 'envelope', validate: { required: true, email: true } },
+                                { eztype: 'EzInput', placeholder: 'Password', icon: 'lock', inputType: 'password', validate: { required: true, minLength: 8 } },
+                                {
+                                    eztype: 'EzComponent',
+                                    layout: 'hbox',
+                                    style: { gap: '12px', marginTop: '8px' },
+                                    items: [
+                                        { eztype: 'EzButton', text: 'Cancel', variant: 'ghost', flex: 1 },
+                                        { eztype: 'EzButton', text: 'Submit', variant: 'primary', htmlType: 'submit', flex: 1 }
+                                    ]
+                                }
+                            ]
+                        },
+                        code: `{
+    eztype: 'EzForm',
+    controller: 'MyController',
+    formData: 'form',
+    onSubmit: 'handleSubmit',
+    items: [
+        { eztype: 'EzInput', name: 'email', placeholder: 'Email', validate: { required: true, email: true } },
+        { eztype: 'EzInput', name: 'password', inputType: 'password', validate: { required: true, minLength: 8 } },
+        { eztype: 'EzButton', text: 'Submit', variant: 'primary', htmlType: 'submit' }
+    ]
+}`
+                    },
+                    api: [
+                        { method: 'formData', description: 'Path to form data in controller state' },
+                        { method: 'onSubmit', description: 'Submit handler function or method name' },
+                        { method: 'layout', description: 'Array of numbers defining items per row, e.g. [1, 2, 1]' },
+                        { method: 'validate()', description: 'Validate all fields, returns true if valid' },
+                        { method: 'getFormData()', description: 'Get current form data object' },
+                        { method: 'resetFormData()', description: 'Reset form to initial values' },
+                        { method: 'isDirty()', description: 'Check if form has unsaved changes' },
+                        { method: 'getDirtyData()', description: 'Get only the changed fields' }
+                    ],
+                    sections: [
+                        {
+                            title: 'Auto Layout',
+                            content: {
+                                eztype: 'EzForm',
+                                style: { maxWidth: '500px' },
+                                layout: [1, 2, 2, 1],
+                                items: [
+                                    { eztype: 'EzInput', placeholder: 'Full Name', icon: 'user' },
+                                    { eztype: 'EzInput', placeholder: 'First Name' },
+                                    { eztype: 'EzInput', placeholder: 'Last Name' },
+                                    { eztype: 'EzInput', placeholder: 'Email', icon: 'envelope' },
+                                    { eztype: 'EzInput', placeholder: 'Phone', icon: 'phone' },
+                                    { eztype: 'EzButton', text: 'Submit', variant: 'primary', block: true }
+                                ]
+                            },
+                            code: `{
+    eztype: 'EzForm',
+    layout: [1, 2, 2, 1],  // 1 + 2 + 2 + 1 = 6 items
+    items: [
+        { eztype: 'EzInput', placeholder: 'Full Name' },      // Row 1: 1 item
+        { eztype: 'EzInput', placeholder: 'First Name' },     // Row 2: 2 items
+        { eztype: 'EzInput', placeholder: 'Last Name' },
+        { eztype: 'EzInput', placeholder: 'Email' },          // Row 3: 2 items
+        { eztype: 'EzInput', placeholder: 'Phone' },
+        { eztype: 'EzButton', text: 'Submit', block: true }   // Row 4: 1 item
+    ]
+}`
+                        }
+                    ]
+                }
+            }
+        };
+    }
+});

package/template/doc/data/grid/EzGridDoc.js

@@ -0,0 +1,99 @@
+ez.define('EzGridDoc', {
+    controller: 'EzDocs',
+    template() {
+        const ctrl = ez.getControllerSync('EzDocs');
+        const sections = [
+            {
+                title: 'Basic Grid',
+                variants: [
+                    { label: 'Simple', config: {
+                        eztype: 'EzGrid',
+                        height: 250,
+                        columns: [
+                            { index: 'id', text: 'ID', width: 60 },
+                            { index: 'name', text: 'Name', flex: 1 },
+                            { index: 'email', text: 'Email', flex: 1 },
+                            { index: 'status', text: 'Status', width: 100 }
+                        ],
+                        data: [
+                            { id: 1, name: 'John Doe', email: 'john@example.com', status: 'Active' },
+                            { id: 2, name: 'Jane Smith', email: 'jane@example.com', status: 'Pending' },
+                            { id: 3, name: 'Bob Wilson', email: 'bob@example.com', status: 'Active' }
+                        ]
+                    }}
+                ]
+            },
+            {
+                title: 'With Selection',
+                variants: [
+                    { label: 'Multiple', config: {
+                        eztype: 'EzGrid',
+                        height: 250,
+                        selection: { mode: 'multi' },
+                        columns: [
+                            { index: 'id', text: 'ID', width: 60 },
+                            { index: 'name', text: 'Name', flex: 1 },
+                            { index: 'email', text: 'Email', flex: 1 }
+                        ],
+                        data: [
+                            { id: 1, name: 'John Doe', email: 'john@example.com' },
+                            { id: 2, name: 'Jane Smith', email: 'jane@example.com' },
+                            { id: 3, name: 'Bob Wilson', email: 'bob@example.com' }
+                        ]
+                    }}
+                ]
+            },
+            {
+                title: 'Sortable Columns',
+                variants: [
+                    { label: 'Sortable', config: {
+                        eztype: 'EzGrid',
+                        height: 250,
+                        columns: [
+                            { index: 'id', text: 'ID', width: 60, sortable: true },
+                            { index: 'name', text: 'Name', flex: 1, sortable: true },
+                            { index: 'age', text: 'Age', width: 80, sortable: true },
+                            { index: 'city', text: 'City', flex: 1, sortable: true }
+                        ],
+                        data: [
+                            { id: 1, name: 'Alice', age: 28, city: 'New York' },
+                            { id: 2, name: 'Bob', age: 35, city: 'Los Angeles' },
+                            { id: 3, name: 'Charlie', age: 22, city: 'Chicago' },
+                            { id: 4, name: 'Diana', age: 31, city: 'Houston' }
+                        ]
+                    }}
+                ]
+            },
+            {
+                title: 'Grid Variants',
+                variants: [
+                    { label: 'Bordered', config: {
+                        eztype: 'EzGrid',
+                        height: 200,
+                        variant: 'bordered',
+                        columns: [
+                            { index: 'id', text: 'ID', width: 60 },
+                            { index: 'product', text: 'Product', flex: 1 },
+                            { index: 'price', text: 'Price', width: 100 }
+                        ],
+                        data: [
+                            { id: 1, product: 'Laptop', price: '$999' },
+                            { id: 2, product: 'Mouse', price: '$29' },
+                            { id: 3, product: 'Keyboard', price: '$79' }
+                        ]
+                    }}
+                ]
+            }
+        ];
+
+        return {
+            eztype: 'EzComponent',
+            cls: 'ez-docs-showcase-container',
+            layout: 'hbox',
+            items: [
+                { eztype: 'EzComponent', cls: 'ez-docs-showcase-panel', flex: 1, items: sections.map(section => ({ eztype: 'EzDocsShowcaseSection', props: { section } })) },
+                { eztype: 'EzDocsCodePanel' }
+            ]
+        };
+    }
+});

package/template/doc/data/input/EzInputDoc.js

@@ -0,0 +1,92 @@
+ez.define('EzInputDoc', {
+    controller: 'EzDocs',
+    template() {
+        const sections = [
+            {
+                title: 'Basic Input',
+                variants: [
+                    { label: 'Default', config: { eztype: 'EzInput', placeholder: 'Enter text...' } },
+                    { label: 'With Value', config: { eztype: 'EzInput', placeholder: 'Name', value: 'John Doe' } }
+                ]
+            },
+            {
+                title: 'Input Types',
+                variants: [
+                    { label: 'Text', config: { eztype: 'EzInput', inputType: 'text', placeholder: 'Text input' } },
+                    { label: 'Password', config: { eztype: 'EzInput', inputType: 'password', placeholder: 'Password' } },
+                    { label: 'Email', config: { eztype: 'EzInput', inputType: 'email', placeholder: 'email@example.com' } },
+                    { label: 'Number', config: { eztype: 'EzInput', inputType: 'number', placeholder: '0' } }
+                ]
+            },
+            {
+                title: 'Sizes',
+                variants: [
+                    { label: 'Small', config: { eztype: 'EzInput', size: 'sm', placeholder: 'Small input...' } },
+                    { label: 'Default', config: { eztype: 'EzInput', placeholder: 'Default input...' } },
+                    { label: 'Large', config: { eztype: 'EzInput', size: 'lg', placeholder: 'Large input...' } }
+                ]
+            },
+            {
+                title: 'Variants',
+                variants: [
+                    { label: 'Default', config: { eztype: 'EzInput', placeholder: 'Default style...' } },
+                    { label: 'Filled', config: { eztype: 'EzInput', variant: 'filled', placeholder: 'Filled style...' } },
+                    { label: 'Underline', config: { eztype: 'EzInput', variant: 'underline', placeholder: 'Underline style...' } }
+                ]
+            },
+            {
+                title: 'With Icons',
+                variants: [
+                    { label: 'User Icon', config: { eztype: 'EzInput', icon: 'user', placeholder: 'Username' } },
+                    { label: 'Search Icon', config: { eztype: 'EzInput', icon: 'search', placeholder: 'Search...' } },
+                    { label: 'Lock Icon', config: { eztype: 'EzInput', icon: 'lock', inputType: 'password', placeholder: 'Password' } },
+                    { label: 'Email Icon', config: { eztype: 'EzInput', icon: 'envelope', placeholder: 'Email' } }
+                ]
+            },
+            {
+                title: 'Block Mode',
+                variants: [
+                    { label: 'Block Input', config: { eztype: 'EzInput', block: true, placeholder: 'Full width input...' } }
+                ]
+            },
+            {
+                title: 'States',
+                variants: [
+                    { label: 'Disabled', config: { eztype: 'EzInput', placeholder: 'Disabled', disabled: true } },
+                    { label: 'Readonly', config: { eztype: 'EzInput', value: 'Read only value', readonly: true } }
+                ]
+            },
+            {
+                title: 'With onChange',
+                variants: [
+                    {
+                        label: 'Interactive',
+                        config: {
+                            eztype: 'EzInput',
+                            placeholder: 'Type and see toast...',
+                            onChange: (value) => {ez.toast.info(`Value: ${value}`)}
+                        }
+                    }
+                ]
+            }
+        ];
+
+        return {
+            eztype: 'EzComponent',
+            cls: 'ez-docs-showcase-container',
+            layout: 'hbox',
+            items: [
+                {
+                    eztype: 'EzComponent',
+                    cls: 'ez-docs-showcase-panel',
+                    flex: 1,
+                    items: sections.map(section => ({
+                        eztype: 'EzDocsShowcaseSection',
+                        props: { section }
+                    }))
+                },
+                { eztype: 'EzDocsCodePanel' }
+            ]
+        };
+    }
+});

package/template/doc/data/label/EzLabelDoc.js

@@ -0,0 +1,40 @@
+ez.define('EzLabelDoc', {
+    controller: 'EzDocs',
+    template() {
+        const ctrl = ez.getControllerSync('EzDocs');
+        const sections = [
+            {
+                title: 'Basic Labels',
+                variants: [
+                    { label: 'Simple Text', config: { eztype: 'EzLabel', text: 'Hello World' } },
+                    { label: 'With Class', config: { eztype: 'EzLabel', text: 'Styled Label', cls: 'ez-docs-section-title' } }
+                ]
+            },
+            {
+                title: 'HTML Content',
+                variants: [
+                    { label: 'Bold Text', config: { eztype: 'EzLabel', html: '<strong>Bold</strong> text' } },
+                    { label: 'With Link', config: { eztype: 'EzLabel', html: 'Visit <a href="#">our site</a>' } }
+                ]
+            }
+        ];
+
+        return {
+            eztype: 'EzComponent',
+            cls: 'ez-docs-showcase-container',
+            layout: 'hbox',
+            items: [
+                {
+                    eztype: 'EzComponent',
+                    cls: 'ez-docs-showcase-panel',
+                    flex: 1,
+                    items: sections.map(section => ({
+                        eztype: 'EzDocsShowcaseSection',
+                        props: { section }
+                    }))
+                },
+                { eztype: 'EzDocsCodePanel' }
+            ]
+        };
+    }
+});

package/template/doc/data/model/EzModelDoc.js

@@ -0,0 +1,53 @@
+ez.define('EzModelDoc', {
+    template() {
+        return {
+            eztype: 'EzDocsContent',
+            props: {
+                componentName: 'EzModel',
+                docs: {
+                    features: [
+                        'Type coercion (int, float, string, bool, date, array, object, any)',
+                        'Default values (static or function)',
+                        'Computed fields',
+                        'Primary key definition',
+                        'Validation with nullable constraints'
+                    ],
+                    usage: `ez.defineModel('UserModel', {
+    fields: [
+        { name: 'id', type: 'int', primaryKey: true },
+        { name: 'name', type: 'string' },
+        { name: 'age', type: 'int', default: 0 },
+        { name: 'email', type: 'string' },
+        { name: 'created_at', type: 'date' },
+        {
+            name: 'displayName',
+            type: 'string',
+            compute: (record) => \`\${record.name} (\${record.age})\`
+        }
+    ]
+});
+
+// Use in EzGrid
+{
+    eztype: 'EzGrid',
+    model: 'UserModel',
+    columns: [...],
+    data: [
+        { id: '1', name: 'John', age: '25' }
+        // Automatically processed to:
+        // { id: 1, name: 'John', age: 25, displayName: 'John (25)' }
+    ]
+}`,
+                    api: [
+                        { method: 'ez.defineModel(name, definition)', description: 'Define a new model' },
+                        { method: 'ez.getModel(name)', description: 'Get model by name (returns null if not found)' },
+                        { method: 'ez.getModelSync(name)', description: 'Get model synchronously (throws if not found)' },
+                        { method: 'model.process(record)', description: 'Process a single record through the model' },
+                        { method: 'model.processAll(records)', description: 'Process an array of records' },
+                        { method: 'model.validate(record)', description: 'Validate a record against the schema' }
+                    ]
+                }
+            }
+        };
+    }
+});

package/template/doc/data/outlet/EzOutletDoc.js

@@ -0,0 +1,63 @@
+ez.define('EzOutletDoc', {
+    template() {
+        return {
+            eztype: 'EzDocsContent',
+            props: {
+                componentName: 'EzOutlet',
+                docs: {
+                    features: [
+                        'Dynamic view loading and unloading',
+                        'Route parameter passing to views',
+                        'Smart view reuse (avoids unnecessary re-renders)',
+                        'Route chain propagation for nested outlets',
+                        'View lifecycle management (create/destroy)',
+                        'Template and controller-based view support',
+                        'Stretch mode for full height layouts'
+                    ],
+                    usage: `// Basic outlet
+{
+    eztype: 'EzOutlet',
+    name: 'main'
+}
+
+// Stretched outlet (fills available space)
+{
+    eztype: 'EzOutlet',
+    name: 'content',
+    stretch: true
+}
+
+// Register outlet as ref for programmatic access
+{
+    eztype: 'EzOutlet',
+    name: 'detail',
+    ref: 'detailOutlet'
+}
+
+// Open view programmatically
+const outlet = ez._refs.detailOutlet;
+await outlet.open('UserDetail', { userId: 123 });
+
+// Close current view
+outlet.close();
+
+// Check current state
+outlet.getCurrentView();   // 'UserDetail'
+outlet.getCurrentParams(); // { userId: 123 }
+outlet.isOpen();           // true`,
+                    api: [
+                        { method: 'name', description: 'Outlet identifier (for debugging)' },
+                        { method: 'stretch', description: 'Fill available vertical space (flex: 1)' },
+                        { method: 'ref', description: 'Register as ez._refs[name] for access' },
+                        { method: 'open(view, params, chain)', description: 'Open a view with parameters' },
+                        { method: 'close()', description: 'Close current view' },
+                        { method: 'getCurrentView()', description: 'Get name of current view' },
+                        { method: 'getCurrentParams()', description: 'Get current route parameters' },
+                        { method: 'isOpen()', description: 'Check if a view is open' },
+                        { method: 'getInstance()', description: 'Get current view component instance' }
+                    ]
+                }
+            }
+        };
+    }
+});