ezfw-core 1.0.0

package/template/doc/EzDocsController.js

@@ -0,0 +1,164 @@
+ez.defineController('EzDocsController', {
+    state: {
+        selectedComponent: null,
+        currentPath: null,
+        selectedVariant: null,
+
+        categories: [
+            {
+                name: 'Layout',
+                icon: 'fa-layer-group',
+                components: [
+                    { name: 'EzComponent', description: 'Base layout component with flex support' },
+                    { name: 'EzPanel', description: 'Panel with header, title, tools and content' },
+                    { name: 'EzForm', description: 'Form container with validation' },
+                    { name: 'EzOutlet', description: 'Dynamic view container for routing' },
+                    { name: 'EzTabPanel', description: 'Tabbed content panel with variants' }
+                ]
+            },
+            {
+                name: 'Navigation',
+                icon: 'fa-compass',
+                components: [
+                    { name: 'EzRouter', description: 'Client-side router with guards and middleware' }
+                ]
+            },
+            {
+                name: 'Inputs',
+                icon: 'fa-keyboard',
+                components: [
+                    { name: 'EzInput', description: 'Text input with icons and variants' },
+                    { name: 'EzTextarea', description: 'Multi-line text input with auto-resize' },
+                    { name: 'EzSelect', description: 'Dropdown select component' },
+                    { name: 'EzCheckbox', description: 'Checkbox input with label' },
+                    { name: 'EzRadio', description: 'Radio button group' },
+                    { name: 'EzSwitch', description: 'Toggle switch component' },
+                    { name: 'EzDatePicker', description: 'Date picker with range support' },
+                    { name: 'EzTimePicker', description: 'Time picker with 12/24 hour format' }
+                ]
+            },
+            {
+                name: 'Data',
+                icon: 'fa-table',
+                components: [
+                    { name: 'EzGrid', description: 'Data grid with sorting, filtering, and pagination' },
+                    { name: 'EzModel', description: 'Data schema with type coercion and computed fields' }
+                ]
+            },
+            {
+                name: 'Display',
+                icon: 'fa-eye',
+                components: [
+                    { name: 'EzLabel', description: 'Text label with binding support' },
+                    { name: 'EzButton', description: 'Button with variants and sizes' },
+                    { name: 'EzButtonGroup', description: 'Group buttons together with connected styling' },
+                    { name: 'EzBadge', description: 'Badge for status, labels, and notifications' },
+                    { name: 'EzAvatar', description: 'User avatar component' },
+                    { name: 'EzCard', description: 'Card container with header and actions' },
+                    { name: 'EzActivityFeed', description: 'Activity feed with icons and timestamps' },
+                    { name: 'EzSkeleton', description: 'Loading placeholder for content' }
+                ]
+            },
+            {
+                name: 'Feedback',
+                icon: 'fa-comment-dots',
+                components: [
+                    { name: 'EzDialog', description: 'Modal dialog with sizes and async loading' },
+                    { name: 'EzDropdown', description: 'Dropdown menu with icons and shortcuts' },
+                    { name: 'EzTooltip', description: 'Tooltip with positions and variants' }
+                ]
+            },
+            {
+                name: 'Charts',
+                icon: 'fa-chart-bar',
+                components: [
+                    { name: 'EzChart', description: 'Base chart component with Chart.js' },
+                    { name: 'EzLineChart', description: 'Line chart with simplified API' },
+                    { name: 'EzBarChart', description: 'Bar chart with simplified API' },
+                    { name: 'EzDoughnutChart', description: 'Doughnut chart with simplified API' }
+                ]
+            },
+            {
+                name: 'Validation',
+                icon: 'fa-check-circle',
+                components: [
+                    { name: 'EzValidators', description: 'Built-in form validators' }
+                ]
+            },
+            {
+                name: 'Utilities',
+                icon: 'fa-tools',
+                components: [
+                    { name: 'CSSModules', description: 'Style isolation with scoped class names' }
+                ]
+            }
+        ]
+    },
+
+    async onRouteChange({ fullPath, chain }) {
+        this.state.currentPath = fullPath;
+
+        const outlet = ez._refs.docsOutlet;
+        if (!outlet) return;
+
+        const next = chain?.[0];
+
+        if (!next) {
+            this.state.selectedComponent = null;
+            await outlet.open('EzDocsWelcome', {}, []);
+            return;
+        }
+
+        this.state.selectedComponent = next.params?.component || null;
+
+        const remainingChain = chain.slice(1);
+        await outlet.open(next.view, next.params, remainingChain);
+    },
+
+    getComponentInfo(name) {
+        for (const cat of this.state.categories) {
+            const comp = cat.components.find(c => c.name === name);
+            if (comp) {
+                return { ...comp, category: cat.name };
+            }
+        }
+        return null;
+    },
+
+    goToComponent(componentName) {
+        ez.go(`/admin/docs/${componentName}`);
+    },
+
+    goToHome() {
+        ez.go('/admin/docs');
+    },
+
+    selectVariant(variant) {
+        this.state.selectedVariant = variant;
+    },
+
+    formatCode(config) {
+        const replacer = (key, value) => {
+            if (typeof value === 'function') {
+                return `__FN__${value.toString()}__FN__`;
+            }
+            return value;
+        };
+
+        let result = JSON.stringify(config, replacer, 4)
+            .replace(/"([^"]+)":/g, '$1:')
+            .replace(/"/g, "'");
+
+        // Process functions - clean up to single line
+        result = result.replace(/'__FN__(.*?)__FN__'/gs, (match, fnStr) => {
+            return fnStr
+                .replace(/\\r\\n|\\r|\\n/g, ' ')
+                .replace(/\\'/g, "'")
+                .replace(/\\"/g, '"')
+                .replace(/\s+/g, ' ')
+                .trim();
+        });
+
+        return result;
+    }
+});

package/template/doc/data/activityfeed/EzActivityFeedDoc.js

@@ -0,0 +1,42 @@
+ez.define('EzActivityFeedDoc', {
+    controller: 'EzDocs',
+    template() {
+        const ctrl = ez.getControllerSync('EzDocs');
+        const sections = [
+            {
+                title: 'Basic Feed',
+                variants: [
+                    { label: 'Activity List', config: {
+                        eztype: 'EzActivityFeed',
+                        maxHeight: 200,
+                        items: [
+                            { icon: 'fa-solid fa-user-plus', variant: 'success', description: 'New user registered', timestamp: '2 min ago' },
+                            { icon: 'fa-solid fa-shopping-cart', variant: 'primary', description: 'Order completed', timestamp: '15 min ago' },
+                            { icon: 'fa-solid fa-star', variant: 'warning', description: 'Review submitted', timestamp: '1 hour ago' }
+                        ]
+                    }}
+                ]
+            },
+            {
+                title: 'Icon Variants',
+                variants: [
+                    { label: 'Primary', config: { eztype: 'EzActivityFeed', items: [{ icon: 'fa-solid fa-bell', variant: 'primary', description: 'Primary notification', timestamp: 'Now' }] } },
+                    { label: 'Success', config: { eztype: 'EzActivityFeed', items: [{ icon: 'fa-solid fa-check', variant: 'success', description: 'Success message', timestamp: 'Now' }] } },
+                    { label: 'Warning', config: { eztype: 'EzActivityFeed', items: [{ icon: 'fa-solid fa-exclamation', variant: 'warning', description: 'Warning alert', timestamp: 'Now' }] } },
+                    { label: 'Danger', config: { eztype: 'EzActivityFeed', items: [{ icon: 'fa-solid fa-times', variant: 'danger', description: 'Error occurred', timestamp: 'Now' }] } },
+                    { label: 'Info', config: { eztype: 'EzActivityFeed', items: [{ icon: 'fa-solid fa-info', variant: 'info', description: 'Information', timestamp: 'Now' }] } }
+                ]
+            }
+        ];
+
+        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/avatar/EzAvatarDoc.js

@@ -0,0 +1,71 @@
+ez.define('EzAvatarDoc', {
+    controller: 'EzDocs',
+    template() {
+        const ctrl = ez.getControllerSync('EzDocs');
+        const sections = [
+            {
+                title: 'With Initials',
+                variants: [
+                    { label: 'From Name', config: { eztype: 'EzAvatar', name: 'John Doe' } },
+                    { label: 'Single Name', config: { eztype: 'EzAvatar', name: 'Alice' } },
+                    { label: 'Custom Initials', config: { eztype: 'EzAvatar', initials: 'AB' } }
+                ]
+            },
+            {
+                title: 'Sizes',
+                variants: [
+                    { label: 'Extra Small', config: { eztype: 'EzAvatar', name: 'XS', size: 'xs' } },
+                    { label: 'Small', config: { eztype: 'EzAvatar', name: 'SM', size: 'sm' } },
+                    { label: 'Default', config: { eztype: 'EzAvatar', name: 'MD' } },
+                    { label: 'Large', config: { eztype: 'EzAvatar', name: 'LG', size: 'lg' } },
+                    { label: 'Extra Large', config: { eztype: 'EzAvatar', name: 'XL', size: 'xl' } }
+                ]
+            },
+            {
+                title: 'Colors',
+                variants: [
+                    { label: 'Default', config: { eztype: 'EzAvatar', name: 'John Doe' } },
+                    { label: 'Primary', config: { eztype: 'EzAvatar', name: 'John Doe', color: 'primary' } },
+                    { label: 'Success', config: { eztype: 'EzAvatar', name: 'John Doe', color: 'success' } },
+                    { label: 'Warning', config: { eztype: 'EzAvatar', name: 'John Doe', color: 'warning' } },
+                    { label: 'Danger', config: { eztype: 'EzAvatar', name: 'John Doe', color: 'danger' } }
+                ]
+            },
+            {
+                title: 'Variants',
+                variants: [
+                    { label: 'Circle', config: { eztype: 'EzAvatar', name: 'John Doe' } },
+                    { label: 'Rounded', config: { eztype: 'EzAvatar', name: 'John Doe', variant: 'rounded' } },
+                    { label: 'Square', config: { eztype: 'EzAvatar', name: 'John Doe', variant: 'square' } }
+                ]
+            },
+            {
+                title: 'Status Indicators',
+                variants: [
+                    { label: 'Online', config: { eztype: 'EzAvatar', name: 'John Doe', status: 'online' } },
+                    { label: 'Offline', config: { eztype: 'EzAvatar', name: 'John Doe', status: 'offline' } },
+                    { label: 'Busy', config: { eztype: 'EzAvatar', name: 'John Doe', status: 'busy' } },
+                    { label: 'Away', config: { eztype: 'EzAvatar', name: 'John Doe', status: 'away' } }
+                ]
+            }
+        ];
+
+        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/badge/EzBadgeDoc.js

@@ -0,0 +1,92 @@
+ez.define('EzBadgeDoc', {
+    controller: 'EzDocs',
+    template() {
+        const sections = [
+            {
+                title: 'Variants',
+                variants: [
+                    { label: 'Default', config: { eztype: 'EzBadge', text: 'Default' } },
+                    { label: 'Primary', config: { eztype: 'EzBadge', text: 'Primary', variant: 'primary' } },
+                    { label: 'Success', config: { eztype: 'EzBadge', text: 'Success', variant: 'success' } },
+                    { label: 'Warning', config: { eztype: 'EzBadge', text: 'Warning', variant: 'warning' } },
+                    { label: 'Danger', config: { eztype: 'EzBadge', text: 'Danger', variant: 'danger' } }
+                ]
+            },
+            {
+                title: 'Outline Variants',
+                variants: [
+                    { label: 'Outline Default', config: { eztype: 'EzBadge', text: 'Default', outline: true } },
+                    { label: 'Outline Primary', config: { eztype: 'EzBadge', text: 'Primary', variant: 'primary', outline: true } },
+                    { label: 'Outline Success', config: { eztype: 'EzBadge', text: 'Success', variant: 'success', outline: true } },
+                    { label: 'Outline Warning', config: { eztype: 'EzBadge', text: 'Warning', variant: 'warning', outline: true } },
+                    { label: 'Outline Danger', config: { eztype: 'EzBadge', text: 'Danger', variant: 'danger', outline: true } }
+                ]
+            },
+            {
+                title: 'Sizes',
+                variants: [
+                    { label: 'Small', config: { eztype: 'EzBadge', text: 'Small', size: 'sm' } },
+                    { label: 'Default', config: { eztype: 'EzBadge', text: 'Default' } },
+                    { label: 'Large', config: { eztype: 'EzBadge', text: 'Large', size: 'lg' } }
+                ]
+            },
+            {
+                title: 'Pill Style',
+                variants: [
+                    { label: 'Pill Default', config: { eztype: 'EzBadge', text: 'Pill', pill: true } },
+                    { label: 'Pill Primary', config: { eztype: 'EzBadge', text: '99+', variant: 'primary', pill: true } },
+                    { label: 'Pill Danger', config: { eztype: 'EzBadge', text: 'New', variant: 'danger', pill: true } }
+                ]
+            },
+            {
+                title: 'Dot Indicator',
+                variants: [
+                    { label: 'Dot Default', config: { eztype: 'EzBadge', dot: true } },
+                    { label: 'Dot Primary', config: { eztype: 'EzBadge', dot: true, variant: 'primary' } },
+                    { label: 'Dot Success', config: { eztype: 'EzBadge', dot: true, variant: 'success' } },
+                    { label: 'Dot Danger', config: { eztype: 'EzBadge', dot: true, variant: 'danger' } }
+                ]
+            },
+            {
+                title: 'With Icons',
+                variants: [
+                    { label: 'Check Icon', config: { eztype: 'EzBadge', text: 'Verified', icon: 'fa-solid fa-check', variant: 'success' } },
+                    { label: 'Star Icon', config: { eztype: 'EzBadge', text: 'Featured', icon: 'fa-solid fa-star', variant: 'warning' } },
+                    { label: 'Info Icon', config: { eztype: 'EzBadge', text: 'Info', icon: 'fa-solid fa-info-circle', variant: 'primary' } }
+                ]
+            },
+            {
+                title: 'Closable',
+                variants: [
+                    { label: 'Closable Default', config: { eztype: 'EzBadge', text: 'Closable', closable: true } },
+                    { label: 'Closable Primary', config: { eztype: 'EzBadge', text: 'Tag', variant: 'primary', closable: true } },
+                    { label: 'Closable Pill', config: { eztype: 'EzBadge', text: 'Remove me', variant: 'danger', pill: true, closable: true } }
+                ]
+            },
+            {
+                title: 'Clickable',
+                variants: [
+                    { label: 'Clickable', config: { eztype: 'EzBadge', text: 'Click me', variant: 'primary', onClick: () => ez.toast.info('Badge clicked!') } }
+                ]
+            }
+        ];
+
+        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/button/EzButtonDoc.js

@@ -0,0 +1,77 @@
+ez.define('EzButtonDoc', {
+    controller: 'EzDocs',
+    template() {
+        const ctrl = ez.getControllerSync('EzDocs');
+        const sections = [
+            {
+                title: 'Variants',
+                variants: [
+                    { label: 'Default', config: { eztype: 'EzButton', text: 'Default' } },
+                    { label: 'Primary', config: { eztype: 'EzButton', text: 'Primary', variant: 'primary' } },
+                    { label: 'Danger', config: { eztype: 'EzButton', text: 'Danger', variant: 'danger' } },
+                    { label: 'Success', config: { eztype: 'EzButton', text: 'Success', variant: 'success' } },
+                    { label: 'Warning', config: { eztype: 'EzButton', text: 'Warning', variant: 'warning' } },
+                    { label: 'Ghost', config: { eztype: 'EzButton', text: 'Ghost', variant: 'ghost' } },
+                    { label: 'Text', config: { eztype: 'EzButton', text: 'Text', variant: 'text' } }
+                ]
+            },
+            {
+                title: 'Outline Variants',
+                variants: [
+                    { label: 'Outline', config: { eztype: 'EzButton', text: 'Outline', variant: 'outline' } },
+                    { label: 'Outline Primary', config: { eztype: 'EzButton', text: 'Primary', variant: 'outline-primary' } },
+                    { label: 'Outline Danger', config: { eztype: 'EzButton', text: 'Danger', variant: 'outline-danger' } },
+                    { label: 'Outline Success', config: { eztype: 'EzButton', text: 'Success', variant: 'outline-success' } },
+                    { label: 'Outline Warning', config: { eztype: 'EzButton', text: 'Warning', variant: 'outline-warning' } }
+                ]
+            },
+            {
+                title: 'Sizes',
+                variants: [
+                    { label: 'Small', config: { eztype: 'EzButton', text: 'Small', size: 'sm' } },
+                    { label: 'Medium', config: { eztype: 'EzButton', text: 'Medium' } },
+                    { label: 'Large', config: { eztype: 'EzButton', text: 'Large', size: 'lg' } }
+                ]
+            },
+            {
+                title: 'With Icons',
+                variants: [
+                    { label: 'Icon Left', config: { eztype: 'EzButton', text: 'Save', icon: 'fa-solid fa-save', variant: 'primary' } },
+                    { label: 'Icon Right', config: { eztype: 'EzButton', text: 'Next', icon: 'fa-solid fa-arrow-right', iconPosition: 'right', variant: 'primary' } },
+                    { label: 'Icon Only', config: { eztype: 'EzButton', icon: 'fa-solid fa-home', variant: 'primary' } }
+                ]
+            },
+            {
+                title: 'States',
+                variants: [
+                    { label: 'Loading', config: { eztype: 'EzButton', text: 'Loading', loading: true, variant: 'primary' } },
+                    { label: 'Disabled', config: { eztype: 'EzButton', text: 'Disabled', disabled: true } }
+                ]
+            },
+            {
+                title: 'Block Mode',
+                variants: [
+                    { label: 'Block Button', config: { eztype: 'EzButton', text: 'Full Width Button', variant: 'primary', block: 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/buttongroup/EzButtonGroupDoc.js

@@ -0,0 +1,102 @@
+ez.define('EzButtonGroupDoc', {
+    controller: 'EzDocs',
+    template() {
+        const sections = [
+            {
+                title: 'Horizontal Group',
+                variants: [
+                    {
+                        label: 'Default',
+                        config: {
+                            eztype: 'EzButtonGroup',
+                            items: [
+                                { eztype: 'EzButton', text: 'Left' },
+                                { eztype: 'EzButton', text: 'Center' },
+                                { eztype: 'EzButton', text: 'Right' }
+                            ]
+                        }
+                    },
+                    {
+                        label: 'Primary',
+                        config: {
+                            eztype: 'EzButtonGroup',
+                            items: [
+                                { eztype: 'EzButton', text: 'One', variant: 'primary' },
+                                { eztype: 'EzButton', text: 'Two', variant: 'primary' },
+                                { eztype: 'EzButton', text: 'Three', variant: 'primary' }
+                            ]
+                        }
+                    }
+                ]
+            },
+            {
+                title: 'Vertical Group',
+                variants: [
+                    {
+                        label: 'Vertical',
+                        config: {
+                            eztype: 'EzButtonGroup',
+                            vertical: true,
+                            items: [
+                                { eztype: 'EzButton', text: 'Top' },
+                                { eztype: 'EzButton', text: 'Middle' },
+                                { eztype: 'EzButton', text: 'Bottom' }
+                            ]
+                        }
+                    }
+                ]
+            },
+            {
+                title: 'With Icons',
+                variants: [
+                    {
+                        label: 'Icon Buttons',
+                        config: {
+                            eztype: 'EzButtonGroup',
+                            items: [
+                                { eztype: 'EzButton', icon: 'fa-solid fa-align-left' },
+                                { eztype: 'EzButton', icon: 'fa-solid fa-align-center' },
+                                { eztype: 'EzButton', icon: 'fa-solid fa-align-right' },
+                                { eztype: 'EzButton', icon: 'fa-solid fa-align-justify' }
+                            ]
+                        }
+                    }
+                ]
+            },
+            {
+                title: 'Outline Variants',
+                variants: [
+                    {
+                        label: 'Outline',
+                        config: {
+                            eztype: 'EzButtonGroup',
+                            items: [
+                                { eztype: 'EzButton', text: 'Day', variant: 'outline' },
+                                { eztype: 'EzButton', text: 'Week', variant: 'outline' },
+                                { eztype: 'EzButton', text: 'Month', variant: 'outline' }
+                            ]
+                        }
+                    }
+                ]
+            }
+        ];
+
+        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/card/EzCardDoc.js

@@ -0,0 +1,39 @@
+ez.define('EzCardDoc', {
+    controller: 'EzDocs',
+    template() {
+        const ctrl = ez.getControllerSync('EzDocs');
+        const sections = [
+            {
+                title: 'Basic Cards',
+                variants: [
+                    { label: 'Simple Card', config: { eztype: 'EzCard', title: 'Card Title', items: [{ eztype: 'EzLabel', text: 'This is the card content.' }] } },
+                    { label: 'With Subtitle', config: { eztype: 'EzCard', title: 'Card Title', subtitle: 'Optional subtitle text', items: [{ eztype: 'EzLabel', text: 'Card content goes here.' }] } }
+                ]
+            },
+            {
+                title: 'With Actions',
+                variants: [
+                    { label: 'Header Actions', config: { eztype: 'EzCard', title: 'Settings', headerActions: [{ eztype: 'EzButton', icon: 'fa-solid fa-edit', variant: 'ghost', size: 'sm' }], items: [{ eztype: 'EzLabel', text: 'Card with action buttons.' }] } }
+                ]
+            },
+            {
+                title: 'Variants',
+                variants: [
+                    { label: 'Default', config: { eztype: 'EzCard', title: 'Default', items: [{ eztype: 'EzLabel', text: 'Default card' }] } },
+                    { label: 'Elevated', config: { eztype: 'EzCard', title: 'Elevated', variant: 'elevated', items: [{ eztype: 'EzLabel', text: 'With shadow' }] } },
+                    { label: 'Flat', config: { eztype: 'EzCard', title: 'Flat', variant: 'flat', items: [{ eztype: 'EzLabel', text: 'Flat background' }] } }
+                ]
+            }
+        ];
+
+        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/chart/EzChartDoc.js

@@ -0,0 +1,60 @@
+ez.define('EzChartDoc', {
+    controller: 'EzDocs',
+    template() {
+        const ctrl = ez.getControllerSync('EzDocs');
+        const sections = [
+            {
+                title: 'Line Chart',
+                variants: [
+                    { label: 'EzLineChart', config: {
+                        eztype: 'EzLineChart',
+                        height: 200,
+                        labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
+                        datasets: [{
+                            label: 'Users',
+                            data: [120, 190, 150, 220, 280],
+                            borderColor: '#005871',
+                            backgroundColor: 'rgba(0, 88, 113, 0.1)'
+                        }]
+                    }}
+                ]
+            },
+            {
+                title: 'Bar Chart',
+                variants: [
+                    { label: 'EzBarChart', config: {
+                        eztype: 'EzBarChart',
+                        height: 200,
+                        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
+                        datasets: [{
+                            label: 'Revenue',
+                            data: [65, 72, 81, 78, 95],
+                            backgroundColor: '#005871'
+                        }]
+                    }}
+                ]
+            },
+            {
+                title: 'Doughnut Chart',
+                variants: [
+                    { label: 'EzDoughnutChart', config: {
+                        eztype: 'EzDoughnutChart',
+                        height: 200,
+                        labels: ['Premium', 'Standard', 'Free'],
+                        values: [35, 45, 20]
+                    }}
+                ]
+            }
+        ];
+
+        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' }
+            ]
+        };
+    }
+});