ezfw-core 1.0.0

package/components/panel/EzPanel.module.scss

@@ -0,0 +1,133 @@
+.panel {
+    display: flex;
+    flex-direction: column;
+    background: var(--ez-surface-secondary, #ffffff);
+    border: 1px solid var(--ez-border, #e2e8f0);
+    border-radius: var(--ez-radius-lg, 12px);
+    overflow: hidden;
+}
+
+.header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 14px 20px;
+    background: var(--ez-surface-primary, #f8fafc);
+    border-bottom: 1px solid var(--ez-border, #e2e8f0);
+}
+
+.icon {
+    font-size: 18px;
+    color: var(--ez-primary, #005871);
+    width: 24px;
+    text-align: center;
+    flex-shrink: 0;
+}
+
+.title {
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--ez-text-primary, #1e293b);
+}
+
+.badge {
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--ez-text-tertiary, #94a3b8);
+    background: var(--ez-surface-secondary, #ffffff);
+    padding: 2px 8px;
+    border-radius: 10px;
+    border: 1px solid var(--ez-border, #e2e8f0);
+}
+
+.spacer {
+    flex: 1;
+}
+
+.tools {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    background: transparent;
+    border: none;
+    border-radius: var(--ez-radius-sm, 4px);
+    color: var(--ez-text-tertiary, #94a3b8);
+    cursor: pointer;
+    transition: all 0.15s ease;
+
+    &:hover {
+        background: var(--ez-surface-tertiary, #e2e8f0);
+        color: var(--ez-text-primary, #1e293b);
+    }
+
+    i {
+        transition: transform 0.2s ease;
+    }
+}
+
+.body {
+    padding: 16px 20px;
+}
+
+.noPadding .body {
+    padding: 0;
+}
+
+// Variants
+.elevated {
+    border: none;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+.flat {
+    border: none;
+    background: var(--ez-surface-primary, #f8fafc);
+
+    .header {
+        background: transparent;
+        border-bottom-color: var(--ez-border-light, #f1f5f9);
+    }
+}
+
+.outlined {
+    background: transparent;
+
+    .header {
+        background: transparent;
+    }
+}
+
+// Collapsible state
+.collapsible {
+    .toggle i {
+        transform: rotate(0deg);
+    }
+}
+
+.collapsed {
+    .toggle i {
+        transform: rotate(-90deg);
+    }
+
+    .body {
+        display: none;
+    }
+}
+
+// Hover effect
+.panel {
+    transition: box-shadow 0.2s ease;
+
+    &:hover {
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
+    }
+}

package/components/panel/EzPanel.ts

@@ -0,0 +1,147 @@
+import styles from './EzPanel.module.scss';
+import { cx } from '../../utils/cssModules.js';
+import { EzBaseComponent, EzBaseComponentConfig } from '../EzBaseComponent.js';
+
+declare const ez: {
+    _createChildElements(items: unknown[], controller: string | null, state: unknown, css?: string | null): Promise<Node[]>;
+};
+
+const cls = cx(styles);
+
+interface ToolConfig {
+    [key: string]: unknown;
+}
+
+export interface EzPanelConfig extends EzBaseComponentConfig {
+    title?: string;
+    icon?: string;
+    badge?: string | number;
+    variant?: string;
+    noPadding?: boolean;
+    collapsible?: boolean;
+    collapsed?: boolean;
+    tools?: ToolConfig[];
+    items?: unknown[];
+}
+
+export class EzPanel extends EzBaseComponent {
+    declare config: EzPanelConfig;
+
+    private _panel: HTMLElement | null = null;
+    private _body: HTMLElement | null = null;
+
+    async render(): Promise<HTMLElement> {
+        const cfg = this.config;
+
+        const panel = document.createElement('div');
+        panel.className = cls(
+            'panel',
+            cfg.variant,
+            cfg.noPadding && 'noPadding',
+            cfg.collapsible && 'collapsible',
+            cfg.collapsed && 'collapsed'
+        );
+
+        if (cfg.title || cfg.icon || cfg.tools || cfg.badge !== undefined) {
+            const header = document.createElement('div');
+            header.className = cls('header');
+
+            if (cfg.icon) {
+                const icon = document.createElement('i');
+                icon.className = cls('icon', cfg.icon);
+                header.appendChild(icon);
+            }
+
+            if (cfg.title) {
+                const title = document.createElement('span');
+                title.className = cls('title');
+                title.textContent = cfg.title;
+                header.appendChild(title);
+            }
+
+            if (cfg.badge !== undefined) {
+                const badge = document.createElement('span');
+                badge.className = cls('badge');
+                badge.textContent = String(cfg.badge);
+                header.appendChild(badge);
+            }
+
+            const spacer = document.createElement('span');
+            spacer.className = cls('spacer');
+            header.appendChild(spacer);
+
+            if (cfg.tools && cfg.tools.length > 0) {
+                const tools = document.createElement('div');
+                tools.className = cls('tools');
+
+                const toolEls = await ez._createChildElements(
+                    cfg.tools,
+                    cfg.controller || null,
+                    null,
+                    (cfg.css as string) || null
+                );
+                for (const toolEl of toolEls) {
+                    if (toolEl instanceof Node) {
+                        tools.appendChild(toolEl);
+                    }
+                }
+                header.appendChild(tools);
+            }
+
+            if (cfg.collapsible) {
+                const toggle = document.createElement('button');
+                toggle.type = 'button';
+                toggle.className = cls('toggle');
+                toggle.innerHTML = '<i class="fa-solid fa-chevron-down"></i>';
+                toggle.addEventListener('click', () => this.toggleCollapse());
+                header.appendChild(toggle);
+            }
+
+            panel.appendChild(header);
+        }
+
+        const body = document.createElement('div');
+        body.className = cls('body');
+
+        if (cfg.items && cfg.items.length > 0) {
+            const children = await ez._createChildElements(
+                cfg.items,
+                cfg.controller || null,
+                null,
+                (cfg.css as string) || null
+            );
+            for (const child of children) {
+                if (child instanceof Node) {
+                    body.appendChild(child);
+                }
+            }
+        }
+
+        panel.appendChild(body);
+
+        this._panel = panel;
+        this._body = body;
+
+        this.applyStyles(panel);
+
+        return panel;
+    }
+
+    toggleCollapse(): void {
+        if (this._panel) {
+            this._panel.classList.toggle(cls('collapsed'));
+        }
+    }
+
+    expand(): void {
+        if (this._panel) {
+            this._panel.classList.remove(cls('collapsed'));
+        }
+    }
+
+    collapse(): void {
+        if (this._panel) {
+            this._panel.classList.add(cls('collapsed'));
+        }
+    }
+}

package/components/radio/EzRadio.module.scss

@@ -0,0 +1,190 @@
+.radioGroup {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.horizontal {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 16px;
+}
+
+.radio {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    user-select: none;
+}
+
+.input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+    pointer-events: none;
+}
+
+.circle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+
+    width: 18px;
+    height: 18px;
+
+    background: var(--ez-input-bg, #ffffff);
+    border: 2px solid var(--ez-border, #cbd5e1);
+    border-radius: 50%;
+
+    transition: all 0.15s ease;
+}
+
+.dot {
+    width: 8px;
+    height: 8px;
+
+    background: #ffffff;
+    border-radius: 50%;
+
+    opacity: 0;
+    transform: scale(0);
+    transition: all 0.15s ease;
+}
+
+// Checked state
+.input:checked + .circle {
+    background: var(--ez-primary, #2563eb);
+    border-color: var(--ez-primary, #2563eb);
+
+    .dot {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+// Focus state
+.input:focus-visible + .circle {
+    box-shadow: 0 0 0 2px var(--ez-primary-light, rgba(37, 99, 235, 0.3));
+}
+
+// Hover state
+.radio:hover:not(.disabled) .circle {
+    border-color: var(--ez-primary, #2563eb);
+}
+
+.label {
+    font-size: 14px;
+    color: var(--ez-text-primary, #1e293b);
+}
+
+// Disabled state (on individual radio)
+.radio.disabled {
+    cursor: not-allowed;
+    pointer-events: none;
+    opacity: 0.5;
+
+    .circle {
+        background: var(--ez-surface-primary, #f1f5f9);
+    }
+
+    .input:checked + .circle {
+        background: var(--ez-primary, #2563eb);
+        opacity: 0.6;
+    }
+
+    .label {
+        color: var(--ez-text-tertiary, #94a3b8);
+    }
+}
+
+// Disabled state (on group)
+.radioGroup.disabled {
+    .radio {
+        cursor: not-allowed;
+        pointer-events: none;
+        opacity: 0.5;
+    }
+
+    .circle {
+        background: var(--ez-surface-primary, #f1f5f9);
+    }
+
+    .input:checked + .circle {
+        background: var(--ez-primary, #2563eb);
+        opacity: 0.6;
+    }
+
+    .label {
+        color: var(--ez-text-tertiary, #94a3b8);
+    }
+}
+
+// Sizes
+.sm {
+    gap: 6px;
+
+    .radio {
+        gap: 6px;
+    }
+
+    .circle {
+        width: 14px;
+        height: 14px;
+    }
+
+    .dot {
+        width: 6px;
+        height: 6px;
+    }
+
+    .label {
+        font-size: 13px;
+    }
+}
+
+.lg {
+    gap: 10px;
+
+    .radio {
+        gap: 10px;
+    }
+
+    .circle {
+        width: 22px;
+        height: 22px;
+    }
+
+    .dot {
+        width: 10px;
+        height: 10px;
+    }
+
+    .label {
+        font-size: 15px;
+    }
+}
+
+// Error state
+.hasError {
+    .circle {
+        border-color: var(--ez-danger, #dc2626);
+    }
+
+    .input:checked + .circle {
+        background: var(--ez-danger, #dc2626);
+        border-color: var(--ez-danger, #dc2626);
+    }
+}
+
+.fieldError {
+    display: none;
+    font-size: 12px;
+    color: var(--ez-danger, #dc2626);
+}
+
+.fieldErrorVisible {
+    display: block;
+}

package/components/radio/EzRadio.ts

@@ -0,0 +1,149 @@
+import styles from './EzRadio.module.scss';
+import { cx } from '../../utils/cssModules.js';
+import { EzBaseComponent, EzBaseComponentConfig } from '../EzBaseComponent.js';
+
+const cls = cx(styles);
+
+export interface RadioOption {
+    value: string | number;
+    label: string;
+    disabled?: boolean;
+}
+
+export interface EzRadioConfig extends EzBaseComponentConfig {
+    size?: 'sm' | 'lg';
+    disabled?: boolean;
+    value?: string | number;
+    name?: string;
+    formData?: string;
+    options?: (RadioOption | string | number)[];
+    layout?: 'vertical' | 'horizontal';
+}
+
+export class EzRadio extends EzBaseComponent {
+    declare config: EzRadioConfig;
+
+    private _wrapper: HTMLDivElement | null = null;
+    private _inputs: HTMLInputElement[] = [];
+    private _error: HTMLDivElement | null = null;
+
+    render(): HTMLDivElement {
+        const cfg = this.config;
+        const options = cfg.options || [];
+
+        const wrapper = document.createElement('div');
+        wrapper.className = cls(
+            'radioGroup',
+            cfg.size,
+            cfg.disabled && 'disabled',
+            cfg.layout === 'horizontal' && 'horizontal'
+        );
+
+        if (cfg.name && cfg.formData) {
+            this.config.bind = `${cfg.formData}.${cfg.name}`;
+        }
+
+        const onChange = this._createOnChangeHandler();
+        const groupName = cfg.name || `radio-${Date.now()}`;
+
+        this._inputs = [];
+
+        options.forEach((option) => {
+            const optValue = typeof option === 'object' ? option.value : option;
+            const optLabel = typeof option === 'object' ? option.label : String(option);
+            const optDisabled = typeof option === 'object' ? option.disabled : false;
+
+            const label = document.createElement('label');
+            label.className = cls(
+                'radio',
+                (cfg.disabled || optDisabled) && 'disabled'
+            );
+
+            const input = document.createElement('input');
+            input.type = 'radio';
+            input.className = cls('input');
+            input.name = groupName;
+            input.value = String(optValue);
+            input.checked = cfg.value === optValue;
+
+            if (cfg.disabled || optDisabled) input.disabled = true;
+
+            const circle = document.createElement('span');
+            circle.className = cls('circle');
+
+            const dot = document.createElement('span');
+            dot.className = cls('dot');
+            circle.appendChild(dot);
+
+            input.addEventListener('change', e => {
+                if ((e.target as HTMLInputElement).checked && onChange) {
+                    onChange(optValue);
+                }
+            });
+
+            label.appendChild(input);
+            label.appendChild(circle);
+
+            const text = document.createElement('span');
+            text.className = cls('label');
+            text.textContent = optLabel;
+            label.appendChild(text);
+
+            wrapper.appendChild(label);
+            this._inputs.push(input);
+        });
+
+        if (this.config.bind) {
+            const binding = this._resolveBinding();
+            if (binding) {
+                let value: unknown = binding.controller.state;
+                for (const key of binding.path) {
+                    value = (value as Record<string, unknown>)?.[key];
+                }
+                if (value !== undefined) {
+                    this._inputs.forEach(input => {
+                        input.checked = input.value === String(value);
+                    });
+                }
+            }
+        }
+
+        const error = document.createElement('div');
+        error.className = cls('fieldError');
+        wrapper.appendChild(error);
+
+        this._wrapper = wrapper;
+        this._error = error;
+
+        return wrapper;
+    }
+
+    getValue(): string | null {
+        const checked = this._inputs?.find(i => i.checked);
+        return checked?.value ?? null;
+    }
+
+    setValue(value: string | number): void {
+        if (this._inputs) {
+            this._inputs.forEach(input => {
+                input.checked = input.value === String(value);
+            });
+        }
+    }
+
+    showError(message: string): void {
+        if (this._wrapper && this._error) {
+            this._wrapper.classList.add(cls('hasError'));
+            this._error.classList.add(cls('fieldErrorVisible'));
+            this._error.textContent = message;
+        }
+    }
+
+    clearError(): void {
+        if (this._wrapper && this._error) {
+            this._wrapper.classList.remove(cls('hasError'));
+            this._error.classList.remove(cls('fieldErrorVisible'));
+            this._error.textContent = '';
+        }
+    }
+}