ezfw-core 1.0.0

package/template/doc/data/panel/EzPanelDoc.js

@@ -0,0 +1,214 @@
+ez.define('EzPanelDoc', {
+    controller: 'EzDocs',
+    template() {
+        const sections = [
+            {
+                title: 'Basic',
+                variants: [
+                    {
+                        label: 'With Title',
+                        config: {
+                            eztype: 'EzPanel',
+                            title: 'Panel Title',
+                            items: [
+                                { eztype: 'EzLabel', text: 'Panel content goes here.' }
+                            ]
+                        }
+                    },
+                    {
+                        label: 'With Icon',
+                        config: {
+                            eztype: 'EzPanel',
+                            icon: 'fa-solid fa-gear',
+                            title: 'Settings',
+                            items: [
+                                { eztype: 'EzLabel', text: 'Configure your preferences.' }
+                            ]
+                        }
+                    }
+                ]
+            },
+            {
+                title: 'With Badge',
+                variants: [
+                    {
+                        label: 'Counter Badge',
+                        config: {
+                            eztype: 'EzPanel',
+                            icon: 'fa-solid fa-bell',
+                            title: 'Notifications',
+                            badge: '5',
+                            items: [
+                                { eztype: 'EzLabel', text: 'You have 5 new notifications.' }
+                            ]
+                        }
+                    },
+                    {
+                        label: 'Status Badge',
+                        config: {
+                            eztype: 'EzPanel',
+                            icon: 'fa-solid fa-server',
+                            title: 'Server Status',
+                            badge: 'Online',
+                            items: [
+                                { eztype: 'EzLabel', text: 'All systems operational.' }
+                            ]
+                        }
+                    }
+                ]
+            },
+            {
+                title: 'With Tools',
+                variants: [
+                    {
+                        label: 'Action Buttons',
+                        config: {
+                            eztype: 'EzPanel',
+                            title: 'User Profile',
+                            tools: [
+                                { eztype: 'EzButton', icon: 'fa-solid fa-edit', variant: 'ghost', size: 'sm' },
+                                { eztype: 'EzButton', icon: 'fa-solid fa-trash', variant: 'ghost', size: 'sm' }
+                            ],
+                            items: [
+                                { eztype: 'EzLabel', text: 'Profile information and settings.' }
+                            ]
+                        }
+                    },
+                    {
+                        label: 'Dropdown Tool',
+                        config: {
+                            eztype: 'EzPanel',
+                            icon: 'fa-solid fa-chart-bar',
+                            title: 'Analytics',
+                            tools: [
+                                {
+                                    eztype: 'EzDropdown',
+                                    trigger: { eztype: 'EzButton', icon: 'fa-solid fa-ellipsis-v', variant: 'ghost', size: 'sm' },
+                                    items: [
+                                        { text: 'Export', icon: 'fa-solid fa-download' },
+                                        { text: 'Refresh', icon: 'fa-solid fa-refresh' }
+                                    ]
+                                }
+                            ],
+                            items: [
+                                { eztype: 'EzLabel', text: 'Dashboard analytics data.' }
+                            ]
+                        }
+                    }
+                ]
+            },
+            {
+                title: 'Variants',
+                variants: [
+                    {
+                        label: 'Default',
+                        config: {
+                            eztype: 'EzPanel',
+                            title: 'Default',
+                            items: [{ eztype: 'EzLabel', text: 'Standard panel style.' }]
+                        }
+                    },
+                    {
+                        label: 'Elevated',
+                        config: {
+                            eztype: 'EzPanel',
+                            title: 'Elevated',
+                            variant: 'elevated',
+                            items: [{ eztype: 'EzLabel', text: 'With shadow, no border.' }]
+                        }
+                    },
+                    {
+                        label: 'Flat',
+                        config: {
+                            eztype: 'EzPanel',
+                            title: 'Flat',
+                            variant: 'flat',
+                            items: [{ eztype: 'EzLabel', text: 'Subtle background.' }]
+                        }
+                    }
+                ]
+            },
+            {
+                title: 'Collapsible',
+                variants: [
+                    {
+                        label: 'Expanded',
+                        config: {
+                            eztype: 'EzPanel',
+                            icon: 'fa-solid fa-filter',
+                            title: 'Filters',
+                            collapsible: true,
+                            items: [
+                                { eztype: 'EzInput', placeholder: 'Search...' },
+                                { eztype: 'EzSelect', placeholder: 'Category', options: ['All', 'Active', 'Archived'] }
+                            ]
+                        }
+                    },
+                    {
+                        label: 'Collapsed',
+                        config: {
+                            eztype: 'EzPanel',
+                            icon: 'fa-solid fa-info-circle',
+                            title: 'Details',
+                            collapsible: true,
+                            collapsed: true,
+                            items: [
+                                { eztype: 'EzLabel', text: 'This content is hidden by default.' }
+                            ]
+                        }
+                    }
+                ]
+            },
+            {
+                title: 'No Padding',
+                variants: [
+                    {
+                        label: 'List Content',
+                        config: {
+                            eztype: 'EzPanel',
+                            icon: 'fa-solid fa-list',
+                            title: 'Recent Items',
+                            badge: '3',
+                            noPadding: true,
+                            items: [
+                                {
+                                    eztype: 'EzComponent',
+                                    style: { borderBottom: '1px solid #e2e8f0', padding: '12px 16px', cursor: 'pointer' },
+                                    items: [{ eztype: 'EzLabel', text: 'Item One' }]
+                                },
+                                {
+                                    eztype: 'EzComponent',
+                                    style: { borderBottom: '1px solid #e2e8f0', padding: '12px 16px', cursor: 'pointer' },
+                                    items: [{ eztype: 'EzLabel', text: 'Item Two' }]
+                                },
+                                {
+                                    eztype: 'EzComponent',
+                                    style: { padding: '12px 16px', cursor: 'pointer' },
+                                    items: [{ eztype: 'EzLabel', text: 'Item Three' }]
+                                }
+                            ]
+                        }
+                    }
+                ]
+            }
+        ];
+
+        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/radio/EzRadioDoc.js

@@ -0,0 +1,174 @@
+ez.define('EzRadioDoc', {
+    controller: 'EzDocs',
+    template() {
+        const sections = [
+            {
+                title: 'Vertical Layout (Default)',
+                variants: [
+                    {
+                        label: 'Basic',
+                        config: {
+                            eztype: 'EzRadio',
+                            name: 'demo1',
+                            options: [
+                                { value: 'option1', label: 'Option 1' },
+                                { value: 'option2', label: 'Option 2' },
+                                { value: 'option3', label: 'Option 3' }
+                            ]
+                        }
+                    },
+                    {
+                        label: 'With Selection',
+                        config: {
+                            eztype: 'EzRadio',
+                            name: 'demo2',
+                            value: 'medium',
+                            options: [
+                                { value: 'small', label: 'Small' },
+                                { value: 'medium', label: 'Medium' },
+                                { value: 'large', label: 'Large' }
+                            ]
+                        }
+                    }
+                ]
+            },
+            {
+                title: 'Horizontal Layout',
+                variants: [
+                    {
+                        label: 'Inline Options',
+                        config: {
+                            eztype: 'EzRadio',
+                            name: 'demo3',
+                            layout: 'horizontal',
+                            options: [
+                                { value: 'yes', label: 'Yes' },
+                                { value: 'no', label: 'No' },
+                                { value: 'maybe', label: 'Maybe' }
+                            ]
+                        }
+                    }
+                ]
+            },
+            {
+                title: 'Sizes',
+                variants: [
+                    {
+                        label: 'Small',
+                        config: {
+                            eztype: 'EzRadio',
+                            name: 'demo4',
+                            size: 'sm',
+                            layout: 'horizontal',
+                            options: [
+                                { value: 'a', label: 'A' },
+                                { value: 'b', label: 'B' },
+                                { value: 'c', label: 'C' }
+                            ]
+                        }
+                    },
+                    {
+                        label: 'Default',
+                        config: {
+                            eztype: 'EzRadio',
+                            name: 'demo5',
+                            layout: 'horizontal',
+                            options: [
+                                { value: 'a', label: 'A' },
+                                { value: 'b', label: 'B' },
+                                { value: 'c', label: 'C' }
+                            ]
+                        }
+                    },
+                    {
+                        label: 'Large',
+                        config: {
+                            eztype: 'EzRadio',
+                            name: 'demo6',
+                            size: 'lg',
+                            layout: 'horizontal',
+                            options: [
+                                { value: 'a', label: 'A' },
+                                { value: 'b', label: 'B' },
+                                { value: 'c', label: 'C' }
+                            ]
+                        }
+                    }
+                ]
+            },
+            {
+                title: 'With Disabled Options',
+                variants: [
+                    {
+                        label: 'Some Disabled',
+                        config: {
+                            eztype: 'EzRadio',
+                            name: 'demo7',
+                            options: [
+                                { value: 'free', label: 'Free Plan' },
+                                { value: 'basic', label: 'Basic Plan', disabled: true },
+                                { value: 'pro', label: 'Pro Plan' },
+                                { value: 'enterprise', label: 'Enterprise', disabled: true }
+                            ]
+                        }
+                    }
+                ]
+            },
+            {
+                title: 'All Disabled',
+                variants: [
+                    {
+                        label: 'Disabled Group',
+                        config: {
+                            eztype: 'EzRadio',
+                            name: 'demo8',
+                            disabled: true,
+                            value: 'selected',
+                            options: [
+                                { value: 'selected', label: 'Selected' },
+                                { value: 'other', label: 'Other' }
+                            ]
+                        }
+                    }
+                ]
+            },
+            {
+                title: 'With onChange',
+                variants: [
+                    {
+                        label: 'Interactive',
+                        config: {
+                            eztype: 'EzRadio',
+                            name: 'demo9',
+                            layout: 'horizontal',
+                            options: [
+                                { value: 'red', label: 'Red' },
+                                { value: 'green', label: 'Green' },
+                                { value: 'blue', label: 'Blue' }
+                            ],
+                            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/router/EzRouterDoc.js

@@ -0,0 +1,75 @@
+ez.define('EzRouterDoc', {
+    template() {
+        return {
+            eztype: 'EzDocsContent',
+            props: {
+                componentName: 'EzRouter',
+                docs: {
+                    features: [
+                        'Route matching with dynamic parameters (:id)',
+                        'Nested routes with child views',
+                        'Route guards for protected routes',
+                        'Global and per-route middleware',
+                        'History API integration (pushState)',
+                        'Popstate handling (back/forward buttons)',
+                        'Route prefetching on link hover',
+                        'Layout management with smart reuse',
+                        'Error handling hooks'
+                    ],
+                    usage: `// Define routes
+ez.routes([
+    {
+        path: '/',
+        view: 'Home'
+    },
+    {
+        path: '/login',
+        view: 'Login'
+    },
+    {
+        path: '/admin',
+        view: 'AdminLayout',
+        protected: ['AuthController:isAuthenticated'],
+        children: [
+            { path: '/dashboard', view: 'Dashboard' },
+            { path: '/users', view: 'UserList' },
+            { path: '/users/:id', view: 'UserDetail' }
+        ]
+    }
+]);
+
+// Navigate programmatically
+ez.go('/admin/users/123');
+
+// Route guards
+{
+    path: '/billing',
+    view: 'Billing',
+    protected: [
+        'AuthController:isAuthenticated',
+        'BillingController:hasPaymentMethod'
+    ]
+}
+
+// Global middleware
+ez.router.beforeEach(async (context, next) => {
+    if (context.meta.requiresAuth && !isLoggedIn()) {
+        ez.go('/login');
+        return;
+    }
+    await next();
+});`,
+                    api: [
+                        { method: 'ez.routes(definitions)', description: 'Register route definitions' },
+                        { method: 'ez.go(path)', description: 'Navigate to a path using History API' },
+                        { method: 'router.beforeEach(fn)', description: 'Register global before middleware' },
+                        { method: 'router.afterEach(fn)', description: 'Register global after middleware' },
+                        { method: 'router.onError(fn)', description: 'Register navigation error handler' },
+                        { method: 'router.prefetch(path)', description: 'Prefetch a route\'s view module' },
+                        { method: 'router.enableLinkPrefetch()', description: 'Auto-prefetch on link hover' }
+                    ]
+                }
+            }
+        };
+    }
+});

package/template/doc/data/select/EzSelectDoc.js

@@ -0,0 +1,37 @@
+ez.define('EzSelectDoc', {
+    controller: 'EzDocs',
+    template() {
+        const ctrl = ez.getControllerSync('EzDocs');
+        const sections = [
+            {
+                title: 'Basic Select',
+                variants: [
+                    { label: 'Simple Options', config: { eztype: 'EzSelect', placeholder: 'Select a fruit...', options: ['Apple', 'Banana', 'Orange', 'Mango'] } },
+                    { label: 'With Value', config: { eztype: 'EzSelect', value: 'banana', options: [{ value: 'apple', label: 'Apple' }, { value: 'banana', label: 'Banana' }, { value: 'orange', label: 'Orange' }] } }
+                ]
+            },
+            {
+                title: 'Object Options',
+                variants: [
+                    { label: 'Countries', config: { eztype: 'EzSelect', placeholder: 'Select country...', options: [{ value: 'us', label: 'United States' }, { value: 'uk', label: 'United Kingdom' }, { value: 'de', label: 'Germany' }] } },
+                    { label: 'Status', config: { eztype: 'EzSelect', placeholder: 'Select status...', options: [{ value: 'active', label: 'Active' }, { value: 'pending', label: 'Pending' }, { value: 'inactive', label: 'Inactive' }] } }
+                ]
+            }
+        ];
+
+        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/skeleton/EzSkeletonDoc.js

@@ -0,0 +1,149 @@
+ez.define('EzSkeletonDoc', {
+    controller: 'EzDocs',
+    template() {
+        const sections = [
+            {
+                title: 'Variants',
+                variants: [
+                    { label: 'Text (Default)', config: { eztype: 'EzSkeleton', variant: 'text', width: 200 } },
+                    { label: 'Rectangle', config: { eztype: 'EzSkeleton', variant: 'rect', width: 200, height: 100 } },
+                    { label: 'Circle', config: { eztype: 'EzSkeleton', variant: 'circle', size: 50 } }
+                ]
+            },
+            {
+                title: 'Circle Sizes',
+                variants: [
+                    { label: 'Small (32px)', config: { eztype: 'EzSkeleton', variant: 'circle', size: 32 } },
+                    { label: 'Medium (48px)', config: { eztype: 'EzSkeleton', variant: 'circle', size: 48 } },
+                    { label: 'Large (64px)', config: { eztype: 'EzSkeleton', variant: 'circle', size: 64 } },
+                    { label: 'XL (80px)', config: { eztype: 'EzSkeleton', variant: 'circle', size: 80 } }
+                ]
+            },
+            {
+                title: 'Animations',
+                variants: [
+                    { label: 'Pulse (Default)', config: { eztype: 'EzSkeleton', variant: 'rect', width: 200, height: 60, animation: 'pulse' } },
+                    { label: 'Shimmer', config: { eztype: 'EzSkeleton', variant: 'rect', width: 200, height: 60, animation: 'shimmer' } }
+                ]
+            },
+            {
+                title: 'Rounded',
+                variants: [
+                    { label: 'Rounded Rect', config: { eztype: 'EzSkeleton', variant: 'rect', width: 200, height: 60, rounded: true } },
+                    { label: 'Rounded Text', config: { eztype: 'EzSkeleton', variant: 'text', width: 150, rounded: true } }
+                ]
+            },
+            {
+                title: 'Multiple (count)',
+                variants: [
+                    {
+                        label: 'Text Lines',
+                        config: { eztype: 'EzSkeleton', variant: 'text', count: 3, gap: 8, width: 250 }
+                    },
+                    {
+                        label: 'Avatars Row',
+                        config: {
+                            eztype: 'EzComponent',
+                            layout: 'hbox',
+                            style: { gap: '8px' },
+                            items: [
+                                { eztype: 'EzSkeleton', variant: 'circle', size: 40 },
+                                { eztype: 'EzSkeleton', variant: 'circle', size: 40 },
+                                { eztype: 'EzSkeleton', variant: 'circle', size: 40 }
+                            ]
+                        }
+                    }
+                ]
+            },
+            {
+                title: 'Custom Dimensions',
+                variants: [
+                    { label: 'Wide', config: { eztype: 'EzSkeleton', variant: 'rect', width: '100%', height: 20 } },
+                    { label: 'Tall', config: { eztype: 'EzSkeleton', variant: 'rect', width: 100, height: 150 } },
+                    { label: 'Square', config: { eztype: 'EzSkeleton', variant: 'rect', width: 80, height: 80 } }
+                ]
+            },
+            {
+                title: 'Card Skeleton Example',
+                variants: [
+                    {
+                        label: 'User Card',
+                        config: {
+                            eztype: 'EzComponent',
+                            layout: 'hbox',
+                            style: { gap: '16px', padding: '16px', background: '#f8fafc', borderRadius: '8px' },
+                            items: [
+                                { eztype: 'EzSkeleton', variant: 'circle', size: 60 },
+                                {
+                                    eztype: 'EzComponent',
+                                    layout: 'vbox',
+                                    style: { gap: '8px', flex: '1' },
+                                    items: [
+                                        { eztype: 'EzSkeleton', variant: 'text', width: 150, height: 20 },
+                                        { eztype: 'EzSkeleton', variant: 'text', width: 200, height: 14 },
+                                        { eztype: 'EzSkeleton', variant: 'text', width: 100, height: 14 }
+                                    ]
+                                }
+                            ]
+                        }
+                    }
+                ]
+            },
+            {
+                title: 'Table Row Skeleton',
+                variants: [
+                    {
+                        label: 'Table Rows',
+                        config: {
+                            eztype: 'EzComponent',
+                            layout: 'vbox',
+                            style: { gap: '12px', width: '100%' },
+                            items: [
+                                {
+                                    eztype: 'EzComponent',
+                                    layout: 'hbox',
+                                    style: { gap: '16px' },
+                                    items: [
+                                        { eztype: 'EzSkeleton', variant: 'circle', size: 32 },
+                                        { eztype: 'EzSkeleton', variant: 'text', width: 120 },
+                                        { eztype: 'EzSkeleton', variant: 'text', width: 180 },
+                                        { eztype: 'EzSkeleton', variant: 'text', width: 80 }
+                                    ]
+                                },
+                                {
+                                    eztype: 'EzComponent',
+                                    layout: 'hbox',
+                                    style: { gap: '16px' },
+                                    items: [
+                                        { eztype: 'EzSkeleton', variant: 'circle', size: 32 },
+                                        { eztype: 'EzSkeleton', variant: 'text', width: 120 },
+                                        { eztype: 'EzSkeleton', variant: 'text', width: 180 },
+                                        { eztype: 'EzSkeleton', variant: 'text', width: 80 }
+                                    ]
+                                }
+                            ]
+                        }
+                    }
+                ]
+            }
+        ];
+
+        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' }
+            ]
+        };
+    }
+});