ezfw-core 1.0.0

package/template/doc/data/checkbox/EzCheckboxDoc.js

@@ -0,0 +1,67 @@
+ez.define('EzCheckboxDoc', {
+    controller: 'EzDocs',
+    template() {
+        const sections = [
+            {
+                title: 'Basic',
+                variants: [
+                    { label: 'Unchecked', config: { eztype: 'EzCheckbox' } },
+                    { label: 'Checked', config: { eztype: 'EzCheckbox', value: true } }
+                ]
+            },
+            {
+                title: 'With Label',
+                variants: [
+                    { label: 'Label Right', config: { eztype: 'EzCheckbox', label: 'Accept terms and conditions' } },
+                    { label: 'Checked with Label', config: { eztype: 'EzCheckbox', label: 'Remember me', value: true } }
+                ]
+            },
+            {
+                title: 'Sizes',
+                variants: [
+                    { label: 'Small', config: { eztype: 'EzCheckbox', label: 'Small checkbox', size: 'sm' } },
+                    { label: 'Default', config: { eztype: 'EzCheckbox', label: 'Default checkbox' } },
+                    { label: 'Large', config: { eztype: 'EzCheckbox', label: 'Large checkbox', size: 'lg' } }
+                ]
+            },
+            {
+                title: 'States',
+                variants: [
+                    { label: 'Disabled Unchecked', config: { eztype: 'EzCheckbox', label: 'Disabled', disabled: true } },
+                    { label: 'Disabled Checked', config: { eztype: 'EzCheckbox', label: 'Disabled checked', value: true, disabled: true } }
+                ]
+            },
+            {
+                title: 'With onChange',
+                variants: [
+                    {
+                        label: 'Interactive',
+                        config: {
+                            eztype: 'EzCheckbox',
+                            label: 'Toggle me',
+                            onChange: (checked) => ez.toast.info(`Checkbox is now ${checked ? 'checked' : 'unchecked'}`)
+                        }
+                    }
+                ]
+            }
+        ];
+
+        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/component/EzComponentDoc.js

@@ -0,0 +1,34 @@
+ez.define('EzComponentDoc', {
+    controller: 'EzDocs',
+    template() {
+        const ctrl = ez.getControllerSync('EzDocs');
+        const sections = [
+            {
+                title: 'Layouts',
+                variants: [
+                    { label: 'Horizontal (hbox)', config: { eztype: 'EzComponent', layout: 'hbox', style: { gap: '8px', padding: '8px', background: '#f1f5f9', borderRadius: '4px' }, items: [{ eztype: 'EzButton', text: 'Left' }, { eztype: 'EzButton', text: 'Center' }, { eztype: 'EzButton', text: 'Right' }] } },
+                    { label: 'Vertical (vbox)', config: { eztype: 'EzComponent', layout: 'vbox', style: { gap: '8px', padding: '8px', background: '#f1f5f9', borderRadius: '4px' }, items: [{ eztype: 'EzButton', text: 'Top' }, { eztype: 'EzButton', text: 'Bottom' }] } }
+                ]
+            },
+            {
+                title: 'With Flex',
+                variants: [
+                    { label: 'Flex Items', config: { eztype: 'EzComponent', layout: 'hbox', style: { gap: '8px', padding: '8px', background: '#f1f5f9', borderRadius: '4px' }, items: [
+                        { eztype: 'EzComponent', flex: 1, style: { background: '#dbeafe', padding: '12px', borderRadius: '4px' }, items: [{ eztype: 'EzLabel', text: 'flex: 1' }] },
+                        { eztype: 'EzComponent', flex: 2, style: { background: '#bfdbfe', padding: '12px', borderRadius: '4px' }, items: [{ eztype: 'EzLabel', text: 'flex: 2' }] }
+                    ]}}
+                ]
+            }
+        ];
+
+        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/cssmodules/CSSModulesDoc.js

@@ -0,0 +1,70 @@
+ez.define('CSSModulesDoc', {
+    template() {
+        return {
+            eztype: 'EzDocsContent',
+            props: {
+                componentName: 'CSSModules',
+                docs: {
+                    features: [
+                        'Automatic class name scoping with unique hashes',
+                        'No global namespace pollution',
+                        'Vite native support (.module.scss files)',
+                        'cx() utility for class name resolution',
+                        'Support for conditional and multiple classes',
+                        'Seamless integration with global classes (FontAwesome, theme variables)'
+                    ],
+                    usage: `// 1. Create a CSS Module file
+// EzComponent.module.scss
+.root {
+    background: var(--ez-surface-primary);
+    padding: 16px;
+}
+
+.title {
+    font-size: 18px;
+    font-weight: 600;
+}
+
+.active {
+    border-color: var(--ez-primary);
+}
+
+// 2. Import and use in component
+import styles from './EzComponent.module.scss';
+import { cx } from '../../utils/cssModules.js';
+
+const cls = cx(styles);
+
+export class EzComponent extends EzBaseComponent {
+    render() {
+        const el = document.createElement('div');
+
+        // Single class
+        el.classList.add(cls('root'));
+
+        // Multiple classes
+        el.className = cls('root', 'title');
+
+        // Conditional class
+        if (this.config.active) {
+            el.classList.add(cls('active'));
+        }
+
+        // Mix with global classes (FontAwesome)
+        icon.className = cls('iconWrapper', 'fa-solid fa-check');
+
+        return el;
+    }
+}`,
+                    api: [
+                        { method: 'cx(styles)', description: 'Create a class resolver bound to a CSS Module styles object' },
+                        { method: 'cls(name)', description: 'Resolve a single class name from the module' },
+                        { method: 'cls(name1, name2, ...)', description: 'Resolve multiple class names, returns space-separated string' },
+                        { method: 'cls(name, condition && other)', description: 'Conditional classes - falsy values are ignored' },
+                        { method: 'cls(scoped, "global-class")', description: 'Mix scoped and global classes - unmatched names pass through' }
+                    ]
+                }
+            }
+        };
+    }
+});

package/template/doc/data/datepicker/EzDatePickerDoc.js

@@ -0,0 +1,126 @@
+ez.define('EzDatePickerDoc', {
+    controller: 'EzDocs',
+    template() {
+        const sections = [
+            {
+                title: 'Basic',
+                variants: [
+                    { label: 'Default', config: { eztype: 'EzDatePicker', placeholder: 'Select date...' } },
+                    { label: 'With Value', config: { eztype: 'EzDatePicker', value: '2025-01-15' } }
+                ]
+            },
+            {
+                title: 'Date Range',
+                variants: [
+                    { label: 'Range Picker', config: { eztype: 'EzDatePicker', range: true, placeholder: 'Select date range...' } },
+                    {
+                        label: 'With Range Value',
+                        config: {
+                            eztype: 'EzDatePicker',
+                            range: true,
+                            startDate: '2025-01-01',
+                            endDate: '2025-01-31'
+                        }
+                    }
+                ]
+            },
+            {
+                title: 'With Constraints',
+                variants: [
+                    {
+                        label: 'Min Date',
+                        config: {
+                            eztype: 'EzDatePicker',
+                            min: '2025-01-01',
+                            placeholder: 'Only 2025 onwards...'
+                        }
+                    },
+                    {
+                        label: 'Max Date',
+                        config: {
+                            eztype: 'EzDatePicker',
+                            max: '2025-12-31',
+                            placeholder: 'Only until end of 2025...'
+                        }
+                    },
+                    {
+                        label: 'Min & Max',
+                        config: {
+                            eztype: 'EzDatePicker',
+                            min: '2025-01-01',
+                            max: '2025-03-31',
+                            placeholder: 'Q1 2025 only...'
+                        }
+                    }
+                ]
+            },
+            {
+                title: 'Custom Format',
+                variants: [
+                    {
+                        label: 'DD/MM/YYYY Display',
+                        config: {
+                            eztype: 'EzDatePicker',
+                            displayFormat: 'DD/MM/YYYY',
+                            value: '2025-12-25'
+                        }
+                    },
+                    {
+                        label: 'Long Format',
+                        config: {
+                            eztype: 'EzDatePicker',
+                            displayFormat: 'dddd, MMMM D, YYYY',
+                            value: '2025-12-25'
+                        }
+                    }
+                ]
+            },
+            {
+                title: 'Sizes',
+                variants: [
+                    { label: 'Small', config: { eztype: 'EzDatePicker', size: 'sm', placeholder: 'Small...' } },
+                    { label: 'Default', config: { eztype: 'EzDatePicker', placeholder: 'Default...' } },
+                    { label: 'Large', config: { eztype: 'EzDatePicker', size: 'lg', placeholder: 'Large...' } }
+                ]
+            },
+            {
+                title: 'States',
+                variants: [
+                    { label: 'Disabled', config: { eztype: 'EzDatePicker', disabled: true, placeholder: 'Disabled...' } },
+                    { label: 'Disabled with Value', config: { eztype: 'EzDatePicker', disabled: true, value: '2025-06-15' } }
+                ]
+            },
+            {
+                title: 'With onChange',
+                variants: [
+                    {
+                        label: 'Interactive',
+                        config: {
+                            eztype: 'EzDatePicker',
+                            placeholder: 'Select and see toast...',
+                            onChange: (value) => ez.toast.info(`Selected: ${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/dialog/EzDialogDoc.js

@@ -0,0 +1,217 @@
+ez.define('EzDialogDoc', {
+    controller: 'EzDocs',
+    template() {
+        const sections = [
+            {
+                title: 'Sizes',
+                variants: [
+                    {
+                        label: 'Small',
+                        config: {
+                            eztype: 'EzButton',
+                            text: 'Open Small Dialog',
+                            onClick: () => ez.dialog.open({
+                                title: 'Small Dialog',
+                                size: 'sm',
+                                message: 'This is a small dialog for simple confirmations.',
+                                buttons: [{ text: 'OK', variant: 'primary' }]
+                            })
+                        }
+                    },
+                    {
+                        label: 'Medium',
+                        config: {
+                            eztype: 'EzButton',
+                            text: 'Open Medium Dialog',
+                            onClick: () => ez.dialog.open({
+                                title: 'Medium Dialog',
+                                size: 'md',
+                                message: 'This is a medium-sized dialog, the default size.',
+                                buttons: [{ text: 'Cancel' }, { text: 'OK', variant: 'primary' }]
+                            })
+                        }
+                    },
+                    {
+                        label: 'Large',
+                        config: {
+                            eztype: 'EzButton',
+                            text: 'Open Large Dialog',
+                            onClick: () => ez.dialog.open({
+                                title: 'Large Dialog',
+                                size: 'lg',
+                                message: 'This is a large dialog for complex content.',
+                                buttons: [{ text: 'Close' }]
+                            })
+                        }
+                    }
+                ]
+            },
+            {
+                title: 'With Icons',
+                variants: [
+                    {
+                        label: 'Success Icon',
+                        config: {
+                            eztype: 'EzButton',
+                            text: 'Success Dialog',
+                            variant: 'success',
+                            onClick: () => ez.dialog.open({
+                                title: 'Success!',
+                                icon: 'fa-solid fa-check-circle',
+                                iconVariant: 'success',
+                                message: 'Operation completed successfully.',
+                                buttons: [{ text: 'OK', variant: 'success' }]
+                            })
+                        }
+                    },
+                    {
+                        label: 'Warning Icon',
+                        config: {
+                            eztype: 'EzButton',
+                            text: 'Warning Dialog',
+                            variant: 'warning',
+                            onClick: () => ez.dialog.open({
+                                title: 'Warning',
+                                icon: 'fa-solid fa-exclamation-triangle',
+                                iconVariant: 'warning',
+                                message: 'Are you sure you want to proceed?',
+                                buttons: [{ text: 'Cancel' }, { text: 'Proceed', variant: 'warning' }]
+                            })
+                        }
+                    },
+                    {
+                        label: 'Danger Icon',
+                        config: {
+                            eztype: 'EzButton',
+                            text: 'Danger Dialog',
+                            variant: 'danger',
+                            onClick: () => ez.dialog.open({
+                                title: 'Delete Item',
+                                icon: 'fa-solid fa-trash',
+                                iconVariant: 'danger',
+                                message: 'This action cannot be undone. Are you sure?',
+                                buttons: [{ text: 'Cancel' }, { text: 'Delete', variant: 'danger' }]
+                            })
+                        }
+                    },
+                    {
+                        label: 'Info Icon',
+                        config: {
+                            eztype: 'EzButton',
+                            text: 'Info Dialog',
+                            variant: 'primary',
+                            onClick: () => ez.dialog.open({
+                                title: 'Information',
+                                icon: 'fa-solid fa-info-circle',
+                                iconVariant: 'primary',
+                                message: 'Here is some important information for you.',
+                                buttons: [{ text: 'Got it', variant: 'primary' }]
+                            })
+                        }
+                    }
+                ]
+            },
+            {
+                title: 'With Form Content',
+                variants: [
+                    {
+                        label: 'Form Dialog',
+                        config: {
+                            eztype: 'EzButton',
+                            text: 'Open Form Dialog',
+                            variant: 'primary',
+                            onClick: () => ez.dialog.open({
+                                title: 'Create New User',
+                                size: 'md',
+                                items: [
+                                    { eztype: 'EzInput', placeholder: 'First Name', icon: 'user' },
+                                    { eztype: 'EzInput', placeholder: 'Last Name', icon: 'user' },
+                                    { eztype: 'EzInput', placeholder: 'Email', icon: 'envelope', inputType: 'email' }
+                                ],
+                                buttons: [{ text: 'Cancel' }, { text: 'Create', variant: 'primary' }]
+                            })
+                        }
+                    }
+                ]
+            },
+            {
+                title: 'Maximizable',
+                variants: [
+                    {
+                        label: 'Maximizable Dialog',
+                        config: {
+                            eztype: 'EzButton',
+                            text: 'Open Maximizable',
+                            onClick: () => ez.dialog.open({
+                                title: 'Maximizable Dialog',
+                                maximizable: true,
+                                message: 'Click the expand button in the header to maximize this dialog.',
+                                buttons: [{ text: 'Close' }]
+                            })
+                        }
+                    }
+                ]
+            },
+            {
+                title: 'Non-closable',
+                variants: [
+                    {
+                        label: 'No X Button',
+                        config: {
+                            eztype: 'EzButton',
+                            text: 'Open Non-closable',
+                            onClick: () => ez.dialog.open({
+                                title: 'Confirmation Required',
+                                closable: false,
+                                message: 'You must choose an option to continue.',
+                                buttons: [{ text: 'Decline', variant: 'danger' }, { text: 'Accept', variant: 'primary' }]
+                            })
+                        }
+                    }
+                ]
+            },
+            {
+                title: 'Async Loading',
+                variants: [
+                    {
+                        label: 'With onLoad',
+                        config: {
+                            eztype: 'EzButton',
+                            text: 'Open Async Dialog',
+                            variant: 'primary',
+                            onClick: () => ez.dialog.open({
+                                title: 'Loading Data...',
+                                onLoad: async () => {
+                                    await new Promise(resolve => setTimeout(resolve, 1500));
+                                },
+                                items: [
+                                    { eztype: 'p', text: 'Data loaded successfully!' },
+                                    { eztype: 'EzInput', placeholder: 'Loaded field', value: 'Pre-filled value' }
+                                ],
+                                buttons: [{ text: 'Close' }]
+                            })
+                        }
+                    }
+                ]
+            }
+        ];
+
+        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' }
+            ]
+        };
+    }
+});