ezfw-core 1.0.0

package/template/doc/data/switch/EzSwitchDoc.js

@@ -0,0 +1,82 @@
+ez.define('EzSwitchDoc', {
+    controller: 'EzDocs',
+    template() {
+        const sections = [
+            {
+                title: 'Basic',
+                variants: [
+                    { label: 'Off', config: { eztype: 'EzSwitch' } },
+                    { label: 'On', config: { eztype: 'EzSwitch', value: true } }
+                ]
+            },
+            {
+                title: 'With Label',
+                variants: [
+                    { label: 'Label Right', config: { eztype: 'EzSwitch', label: 'Enable notifications' } },
+                    { label: 'Label Right (On)', config: { eztype: 'EzSwitch', label: 'Dark mode', value: true } }
+                ]
+            },
+            {
+                title: 'Label Position',
+                variants: [
+                    { label: 'Label Left', config: { eztype: 'EzSwitch', label: 'Airplane mode', labelPosition: 'left' } },
+                    { label: 'Label Right (Default)', config: { eztype: 'EzSwitch', label: 'Airplane mode' } }
+                ]
+            },
+            {
+                title: 'Sizes',
+                variants: [
+                    { label: 'Small', config: { eztype: 'EzSwitch', label: 'Small switch', size: 'sm' } },
+                    { label: 'Default', config: { eztype: 'EzSwitch', label: 'Default switch' } },
+                    { label: 'Large', config: { eztype: 'EzSwitch', label: 'Large switch', size: 'lg' } }
+                ]
+            },
+            {
+                title: 'States',
+                variants: [
+                    { label: 'Disabled Off', config: { eztype: 'EzSwitch', label: 'Disabled', disabled: true } },
+                    { label: 'Disabled On', config: { eztype: 'EzSwitch', label: 'Disabled', value: true, disabled: true } }
+                ]
+            },
+            {
+                title: 'With onChange',
+                variants: [
+                    {
+                        label: 'Interactive',
+                        config: {
+                            eztype: 'EzSwitch',
+                            label: 'Toggle me',
+                            onChange: (value) => ez.toast.info(`Switch is now ${value ? 'ON' : 'OFF'}`)
+                        }
+                    }
+                ]
+            },
+            {
+                title: 'Common Use Cases',
+                variants: [
+                    { label: 'Wi-Fi', config: { eztype: 'EzSwitch', label: 'Wi-Fi', labelPosition: 'left', value: true } },
+                    { label: 'Bluetooth', config: { eztype: 'EzSwitch', label: 'Bluetooth', labelPosition: 'left' } },
+                    { label: 'Location', config: { eztype: 'EzSwitch', label: 'Location Services', labelPosition: 'left', value: 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/tabpanel/EzTabPanelDoc.js

@@ -0,0 +1,44 @@
+ez.define('EzTabPanelDoc', {
+    controller: 'EzDocs',
+    template() {
+        const ctrl = ez.getControllerSync('EzDocs');
+        const sections = [
+            {
+                title: 'Basic Tabs',
+                variants: [
+                    { label: 'Simple', config: { eztype: 'EzTabPanel', style: { minHeight: '120px' }, tabs: [
+                        { id: 'tab1', title: 'First', items: [{ eztype: 'EzLabel', text: 'First tab content', style: { padding: '16px' } }] },
+                        { id: 'tab2', title: 'Second', items: [{ eztype: 'EzLabel', text: 'Second tab content', style: { padding: '16px' } }] }
+                    ]}}
+                ]
+            },
+            {
+                title: 'With Icons',
+                variants: [
+                    { label: 'Icon Tabs', config: { eztype: 'EzTabPanel', style: { minHeight: '120px' }, tabs: [
+                        { id: 'preview', title: 'Preview', icon: 'fa-solid fa-eye', items: [{ eztype: 'EzLabel', text: 'Preview', style: { padding: '16px' } }] },
+                        { id: 'code', title: 'Code', icon: 'fa-solid fa-code', items: [{ eztype: 'EzLabel', text: 'Code', style: { padding: '16px' } }] }
+                    ]}}
+                ]
+            },
+            {
+                title: 'Variants',
+                variants: [
+                    { label: 'Boxed', config: { eztype: 'EzTabPanel', variant: 'boxed', style: { minHeight: '100px' }, tabs: [{ id: 't1', title: 'Tab 1', items: [{ eztype: 'EzLabel', text: 'Boxed', style: { padding: '16px' } }] }] } },
+                    { label: 'Pills', config: { eztype: 'EzTabPanel', variant: 'pills', style: { minHeight: '100px' }, tabs: [{ id: 't1', title: 'Tab 1', items: [{ eztype: 'EzLabel', text: 'Pills', style: { padding: '16px' } }] }] } },
+                    { label: 'Minimal', config: { eztype: 'EzTabPanel', variant: 'minimal', style: { minHeight: '100px' }, tabs: [{ id: 't1', title: 'Tab 1', items: [{ eztype: 'EzLabel', text: 'Minimal', style: { padding: '16px' } }] }] } }
+                ]
+            }
+        ];
+
+        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/textarea/EzTextareaDoc.js

@@ -0,0 +1,131 @@
+ez.define('EzTextareaDoc', {
+    controller: 'EzDocs',
+    template() {
+        const sections = [
+            {
+                title: 'Basic',
+                variants: [
+                    { label: 'Default', config: { eztype: 'EzTextarea', placeholder: 'Enter your message...' } },
+                    { label: 'With Value', config: { eztype: 'EzTextarea', value: 'This is some pre-filled text content.' } }
+                ]
+            },
+            {
+                title: 'With Rows',
+                variants: [
+                    { label: '2 Rows', config: { eztype: 'EzTextarea', rows: 2, placeholder: '2 rows...' } },
+                    { label: '4 Rows', config: { eztype: 'EzTextarea', rows: 4, placeholder: '4 rows...' } },
+                    { label: '6 Rows', config: { eztype: 'EzTextarea', rows: 6, placeholder: '6 rows...' } }
+                ]
+            },
+            {
+                title: 'Auto Resize',
+                variants: [
+                    {
+                        label: 'Auto Grow',
+                        config: {
+                            eztype: 'EzTextarea',
+                            autoResize: true,
+                            placeholder: 'Start typing and watch it grow...',
+                            minRows: 2
+                        }
+                    },
+                    {
+                        label: 'With Max Rows',
+                        config: {
+                            eztype: 'EzTextarea',
+                            autoResize: true,
+                            minRows: 2,
+                            maxRows: 6,
+                            placeholder: 'Grows up to 6 rows...'
+                        }
+                    }
+                ]
+            },
+            {
+                title: 'Character Counter',
+                variants: [
+                    {
+                        label: 'Show Count',
+                        config: {
+                            eztype: 'EzTextarea',
+                            showCount: true,
+                            placeholder: 'Type to see character count...'
+                        }
+                    },
+                    {
+                        label: 'With Max Length',
+                        config: {
+                            eztype: 'EzTextarea',
+                            showCount: true,
+                            maxLength: 100,
+                            placeholder: 'Limited to 100 characters...'
+                        }
+                    },
+                    {
+                        label: 'Max 280 (Twitter-like)',
+                        config: {
+                            eztype: 'EzTextarea',
+                            showCount: true,
+                            maxLength: 280,
+                            placeholder: "What's happening?"
+                        }
+                    }
+                ]
+            },
+            {
+                title: 'Sizes',
+                variants: [
+                    { label: 'Small', config: { eztype: 'EzTextarea', size: 'sm', placeholder: 'Small textarea', rows: 2 } },
+                    { label: 'Default', config: { eztype: 'EzTextarea', placeholder: 'Default textarea', rows: 2 } },
+                    { label: 'Large', config: { eztype: 'EzTextarea', size: 'lg', placeholder: 'Large textarea', rows: 2 } }
+                ]
+            },
+            {
+                title: 'Resize Control',
+                variants: [
+                    { label: 'Resizable (Default)', config: { eztype: 'EzTextarea', placeholder: 'Drag corner to resize...', rows: 3 } },
+                    { label: 'No Resize', config: { eztype: 'EzTextarea', resize: false, placeholder: 'Cannot be resized...', rows: 3 } }
+                ]
+            },
+            {
+                title: 'States',
+                variants: [
+                    { label: 'Disabled', config: { eztype: 'EzTextarea', disabled: true, placeholder: 'Disabled textarea' } },
+                    { label: 'Disabled with Value', config: { eztype: 'EzTextarea', disabled: true, value: 'This content is disabled.' } },
+                    { label: 'Readonly', config: { eztype: 'EzTextarea', readonly: true, value: 'This content is read-only and cannot be modified.' } }
+                ]
+            },
+            {
+                title: 'With onChange',
+                variants: [
+                    {
+                        label: 'Interactive',
+                        config: {
+                            eztype: 'EzTextarea',
+                            placeholder: 'Type and see character count in toast...',
+                            onChange: (value) => ez.toast.info(`${value.length} characters typed`)
+                        }
+                    }
+                ]
+            }
+        ];
+
+        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/timepicker/EzTimePickerDoc.js

@@ -0,0 +1,107 @@
+ez.define('EzTimePickerDoc', {
+    controller: 'EzDocs',
+    template() {
+        const sections = [
+            {
+                title: 'Basic',
+                variants: [
+                    { label: 'Default', config: { eztype: 'EzTimePicker', placeholder: 'Select time...' } },
+                    { label: 'With Value', config: { eztype: 'EzTimePicker', value: '14:30' } }
+                ]
+            },
+            {
+                title: '12-Hour Format (AM/PM)',
+                variants: [
+                    { label: '12-Hour', config: { eztype: 'EzTimePicker', use12Hour: true, placeholder: 'Select time...' } },
+                    { label: '12-Hour with Value', config: { eztype: 'EzTimePicker', use12Hour: true, value: '14:30' } },
+                    { label: 'Morning Time', config: { eztype: 'EzTimePicker', use12Hour: true, value: '09:15' } }
+                ]
+            },
+            {
+                title: 'With Seconds',
+                variants: [
+                    { label: '24-Hour + Seconds', config: { eztype: 'EzTimePicker', showSeconds: true, placeholder: 'HH:mm:ss' } },
+                    { label: '12-Hour + Seconds', config: { eztype: 'EzTimePicker', showSeconds: true, use12Hour: true, placeholder: 'hh:mm:ss AM/PM' } },
+                    { label: 'With Value', config: { eztype: 'EzTimePicker', showSeconds: true, value: '14:30:45' } }
+                ]
+            },
+            {
+                title: 'Minute Step',
+                variants: [
+                    { label: '1 Minute (Default)', config: { eztype: 'EzTimePicker', minuteStep: 1, placeholder: 'Every minute...' } },
+                    { label: '5 Minutes', config: { eztype: 'EzTimePicker', minuteStep: 5, placeholder: 'Every 5 minutes...' } },
+                    { label: '15 Minutes', config: { eztype: 'EzTimePicker', minuteStep: 15, placeholder: 'Every 15 minutes...' } },
+                    { label: '30 Minutes', config: { eztype: 'EzTimePicker', minuteStep: 30, placeholder: 'Every 30 minutes...' } }
+                ]
+            },
+            {
+                title: 'Sizes',
+                variants: [
+                    { label: 'Small', config: { eztype: 'EzTimePicker', size: 'sm', placeholder: 'Small...' } },
+                    { label: 'Default', config: { eztype: 'EzTimePicker', placeholder: 'Default...' } },
+                    { label: 'Large', config: { eztype: 'EzTimePicker', size: 'lg', placeholder: 'Large...' } }
+                ]
+            },
+            {
+                title: 'States',
+                variants: [
+                    { label: 'Disabled', config: { eztype: 'EzTimePicker', disabled: true, placeholder: 'Disabled...' } },
+                    { label: 'Disabled with Value', config: { eztype: 'EzTimePicker', disabled: true, value: '09:00' } }
+                ]
+            },
+            {
+                title: 'With onChange',
+                variants: [
+                    {
+                        label: 'Interactive',
+                        config: {
+                            eztype: 'EzTimePicker',
+                            placeholder: 'Select and see toast...',
+                            onChange: (value) => ez.toast.info(`Selected: ${value}`)
+                        }
+                    }
+                ]
+            },
+            {
+                title: 'Common Configurations',
+                variants: [
+                    {
+                        label: 'Business Hours',
+                        config: {
+                            eztype: 'EzTimePicker',
+                            minuteStep: 30,
+                            placeholder: 'Select meeting time...'
+                        }
+                    },
+                    {
+                        label: 'Appointment Slot',
+                        config: {
+                            eztype: 'EzTimePicker',
+                            use12Hour: true,
+                            minuteStep: 15,
+                            placeholder: 'Schedule appointment...'
+                        }
+                    }
+                ]
+            }
+        ];
+
+        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/tooltip/EzTooltipDoc.js

@@ -0,0 +1,193 @@
+ez.define('EzTooltipDoc', {
+    controller: 'EzDocs',
+    template() {
+        const sections = [
+            {
+                title: 'Positions',
+                variants: [
+                    {
+                        label: 'Top',
+                        config: {
+                            eztype: 'EzTooltip',
+                            text: 'Tooltip on top',
+                            position: 'top',
+                            items: [{ eztype: 'EzButton', text: 'Hover me (Top)' }]
+                        }
+                    },
+                    {
+                        label: 'Bottom',
+                        config: {
+                            eztype: 'EzTooltip',
+                            text: 'Tooltip on bottom',
+                            position: 'bottom',
+                            items: [{ eztype: 'EzButton', text: 'Hover me (Bottom)' }]
+                        }
+                    },
+                    {
+                        label: 'Left',
+                        config: {
+                            eztype: 'EzTooltip',
+                            text: 'Tooltip on left',
+                            position: 'left',
+                            items: [{ eztype: 'EzButton', text: 'Hover me (Left)' }]
+                        }
+                    },
+                    {
+                        label: 'Right',
+                        config: {
+                            eztype: 'EzTooltip',
+                            text: 'Tooltip on right',
+                            position: 'right',
+                            items: [{ eztype: 'EzButton', text: 'Hover me (Right)' }]
+                        }
+                    }
+                ]
+            },
+            {
+                title: 'Variants',
+                variants: [
+                    {
+                        label: 'Dark (Default)',
+                        config: {
+                            eztype: 'EzTooltip',
+                            text: 'Dark tooltip',
+                            variant: 'dark',
+                            items: [{ eztype: 'EzButton', text: 'Dark Tooltip' }]
+                        }
+                    },
+                    {
+                        label: 'Light',
+                        config: {
+                            eztype: 'EzTooltip',
+                            text: 'Light tooltip',
+                            variant: 'light',
+                            items: [{ eztype: 'EzButton', text: 'Light Tooltip' }]
+                        }
+                    }
+                ]
+            },
+            {
+                title: 'Custom Delay',
+                variants: [
+                    {
+                        label: 'No Delay',
+                        config: {
+                            eztype: 'EzTooltip',
+                            text: 'Instant tooltip',
+                            delay: 0,
+                            items: [{ eztype: 'EzButton', text: 'Instant (0ms)' }]
+                        }
+                    },
+                    {
+                        label: 'Short Delay',
+                        config: {
+                            eztype: 'EzTooltip',
+                            text: 'Quick tooltip',
+                            delay: 200,
+                            items: [{ eztype: 'EzButton', text: 'Quick (200ms)' }]
+                        }
+                    },
+                    {
+                        label: 'Long Delay',
+                        config: {
+                            eztype: 'EzTooltip',
+                            text: 'Slow tooltip',
+                            delay: 500,
+                            items: [{ eztype: 'EzButton', text: 'Slow (500ms)' }]
+                        }
+                    }
+                ]
+            },
+            {
+                title: 'On Different Elements',
+                variants: [
+                    {
+                        label: 'On Button',
+                        config: {
+                            eztype: 'EzTooltip',
+                            text: 'Click to submit',
+                            items: [{ eztype: 'EzButton', text: 'Submit', variant: 'primary' }]
+                        }
+                    },
+                    {
+                        label: 'On Icon',
+                        config: {
+                            eztype: 'EzTooltip',
+                            text: 'More information',
+                            items: [{ eztype: 'i', cls: 'fa-solid fa-circle-info', style: { fontSize: '20px', color: '#3b82f6', cursor: 'pointer' } }]
+                        }
+                    },
+                    {
+                        label: 'On Badge',
+                        config: {
+                            eztype: 'EzTooltip',
+                            text: '5 new notifications',
+                            items: [{ eztype: 'EzBadge', text: '5', variant: 'danger', pill: true }]
+                        }
+                    }
+                ]
+            },
+            {
+                title: 'Long Content',
+                variants: [
+                    {
+                        label: 'Long Text',
+                        config: {
+                            eztype: 'EzTooltip',
+                            text: 'This is a tooltip with much longer content that wraps to multiple lines',
+                            items: [{ eztype: 'EzButton', text: 'Long Tooltip' }]
+                        }
+                    }
+                ]
+            },
+            {
+                title: 'Icon Buttons with Tooltips',
+                variants: [
+                    {
+                        label: 'Action Icons',
+                        config: {
+                            eztype: 'EzComponent',
+                            layout: 'hbox',
+                            style: { gap: '8px' },
+                            items: [
+                                {
+                                    eztype: 'EzTooltip',
+                                    text: 'Edit',
+                                    items: [{ eztype: 'EzButton', icon: 'fa-solid fa-edit', variant: 'ghost' }]
+                                },
+                                {
+                                    eztype: 'EzTooltip',
+                                    text: 'Delete',
+                                    items: [{ eztype: 'EzButton', icon: 'fa-solid fa-trash', variant: 'ghost' }]
+                                },
+                                {
+                                    eztype: 'EzTooltip',
+                                    text: 'Share',
+                                    items: [{ eztype: 'EzButton', icon: 'fa-solid fa-share', variant: 'ghost' }]
+                                }
+                            ]
+                        }
+                    }
+                ]
+            }
+        ];
+
+        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/validators/EzValidatorsDoc.js

@@ -0,0 +1,37 @@
+ez.define('EzValidatorsDoc', {
+    template() {
+        return {
+            eztype: 'EzDocsContent',
+            props: {
+                componentName: 'EzValidators',
+                docs: {
+                    features: [
+                        'Required field validation',
+                        'String length validation (minLength, maxLength)',
+                        'Email, URL, phone format validation',
+                        'Regex pattern matching',
+                        'Cross-field matching (password confirmation)',
+                        'Custom validation functions'
+                    ],
+                    usage: `{
+    eztype: 'EzForm',
+    formData: 'form',
+    items: [
+        { name: 'email', validate: { required: true, email: true } },
+        { name: 'password', inputType: 'password', validate: { required: true, minLength: 8 } },
+        { name: 'confirmPassword', validate: { required: true, match: 'password' } }
+    ]
+}`,
+                    api: [
+                        { method: 'required', description: 'Field must have a value' },
+                        { method: 'minLength: n', description: 'Minimum n characters' },
+                        { method: 'maxLength: n', description: 'Maximum n characters' },
+                        { method: 'email', description: 'Valid email format' },
+                        { method: 'pattern: regex', description: 'Match regex pattern' },
+                        { method: 'match: fieldName', description: 'Match another field' }
+                    ]
+                }
+            }
+        };
+    }
+});

package/template/doc/sidebar/EzDocsSidebar.js

@@ -0,0 +1,32 @@
+ez.define('EzDocsSidebar', {
+    eztype: 'EzComponent',
+    controller: 'EzDocs',
+    cls: 'ez-docs-sidebar',
+    items: [
+        {
+            eztype: 'EzComponent',
+            cls: 'ez-docs-header',
+            onClick: () => ez.go('/admin/docs'),
+            items: [
+                {
+                    eztype: 'i',
+                    cls: ['fa-solid', 'fa-book', 'ez-docs-header-icon']
+                },
+                {
+                    eztype: 'EzLabel',
+                    cls: 'ez-docs-header-title',
+                    text: 'Ez Docs'
+                }
+            ]
+        },
+        {
+            eztype: 'ul',
+            cls: 'ez-docs-categories',
+            bind: { data: 'EzDocs:categories' },
+            itemRender: (category) => ({
+                eztype: 'EzDocsCategory',
+                props: category
+            })
+        }
+    ]
+});

package/template/doc/sidebar/category/EzDocsCategory.js

@@ -0,0 +1,33 @@
+ez.define('EzDocsCategory', {
+    template(props) {
+        return {
+            eztype: 'EzComponent',
+            cls: 'ez-docs-category',
+            items: [
+                {
+                    eztype: 'EzComponent',
+                    cls: 'ez-docs-category-header',
+                    items: [
+                        {
+                            eztype: 'i',
+                            cls: ['fa-solid', props.icon, 'ez-docs-category-icon']
+                        },
+                        {
+                            eztype: 'EzLabel',
+                            cls: 'ez-docs-category-name',
+                            text: props.name
+                        }
+                    ]
+                },
+                {
+                    eztype: 'ul',
+                    cls: 'ez-docs-component-list',
+                    items: props.components.map(comp => ({
+                        eztype: 'EzDocsComponentItem',
+                        props: comp
+                    }))
+                }
+            ]
+        };
+    }
+});