ezfw-core 1.0.0

package/components/HtmlWrapper.ts

@@ -0,0 +1,305 @@
+import { EzBaseComponent, EzBaseComponentConfig } from "./EzBaseComponent.js";
+
+declare const ez: {
+    _createChildElements(items: unknown[], controller: string | null, parent: unknown, css?: string | null): Promise<Node[]>;
+};
+
+type DOMEventHandler<E extends Event = Event> = (e: E) => void;
+
+export interface HtmlWrapperConfig extends EzBaseComponentConfig {
+    eztype: string;
+
+    // Content
+    text?: string;
+    html?: string;
+
+    // Common HTML attributes
+    id?: string;
+    src?: string;
+    alt?: string;
+    title?: string;
+    href?: string;
+    target?: string;
+    rel?: string;
+
+    // Form element attributes
+    value?: string | number;
+    type?: string;
+    name?: string;
+    placeholder?: string;
+    checked?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    maxLength?: number;
+    minLength?: number;
+    min?: number | string;
+    max?: number | string;
+    step?: number | string;
+    pattern?: string;
+    autocomplete?: string;
+    autofocus?: boolean;
+    multiple?: boolean;
+    accept?: string;
+    rows?: number;
+    cols?: number;
+
+    // Accessibility
+    role?: string;
+    tabIndex?: number;
+    ariaLabel?: string;
+    ariaDescribedBy?: string;
+    ariaHidden?: boolean;
+    ariaExpanded?: boolean;
+    ariaSelected?: boolean;
+    ariaDisabled?: boolean;
+
+    // Other attributes
+    contentEditable?: boolean | 'true' | 'false';
+    draggable?: boolean;
+    spellcheck?: boolean;
+    hidden?: boolean;
+
+    // Layout
+    flex?: number | string;
+    width?: number | string;
+    height?: number | string;
+
+    // Generic attrs for anything not explicitly defined
+    attrs?: Record<string, string | number | boolean | null | undefined>;
+
+    // Mouse events
+    onClick?: DOMEventHandler<MouseEvent>;
+    onDoubleClick?: DOMEventHandler<MouseEvent>;
+    onContextMenu?: DOMEventHandler<MouseEvent>;
+    onMouseDown?: DOMEventHandler<MouseEvent>;
+    onMouseUp?: DOMEventHandler<MouseEvent>;
+    onMouseEnter?: DOMEventHandler<MouseEvent>;
+    onMouseLeave?: DOMEventHandler<MouseEvent>;
+    onMouseMove?: DOMEventHandler<MouseEvent>;
+    onMouseOver?: DOMEventHandler<MouseEvent>;
+    onMouseOut?: DOMEventHandler<MouseEvent>;
+
+    // Keyboard events
+    onKeyDown?: DOMEventHandler<KeyboardEvent>;
+    onKeyUp?: DOMEventHandler<KeyboardEvent>;
+    onKeyPress?: DOMEventHandler<KeyboardEvent>;
+
+    // Focus events
+    onFocus?: DOMEventHandler<FocusEvent>;
+    onBlur?: DOMEventHandler<FocusEvent>;
+
+    // Form events
+    onInput?: DOMEventHandler<Event>;
+    onDOMChange?: DOMEventHandler<Event>;
+    onSubmit?: DOMEventHandler<SubmitEvent>;
+    onReset?: DOMEventHandler<Event>;
+
+    // Scroll/Wheel events
+    onScroll?: DOMEventHandler<Event>;
+    onWheel?: DOMEventHandler<WheelEvent>;
+
+    // Drag events
+    onDragStart?: DOMEventHandler<DragEvent>;
+    onDragEnd?: DOMEventHandler<DragEvent>;
+    onDragOver?: DOMEventHandler<DragEvent>;
+    onDragEnter?: DOMEventHandler<DragEvent>;
+    onDragLeave?: DOMEventHandler<DragEvent>;
+    onDrop?: DOMEventHandler<DragEvent>;
+
+    // Touch events
+    onTouchStart?: DOMEventHandler<TouchEvent>;
+    onTouchMove?: DOMEventHandler<TouchEvent>;
+    onTouchEnd?: DOMEventHandler<TouchEvent>;
+    onTouchCancel?: DOMEventHandler<TouchEvent>;
+
+    // Clipboard events
+    onCopy?: DOMEventHandler<ClipboardEvent>;
+    onCut?: DOMEventHandler<ClipboardEvent>;
+    onPaste?: DOMEventHandler<ClipboardEvent>;
+
+    // Media events
+    onLoad?: DOMEventHandler<Event>;
+    onError?: DOMEventHandler<Event>;
+
+    // Children
+    items?: unknown[];
+}
+
+export class HtmlWrapper extends EzBaseComponent {
+    declare config: HtmlWrapperConfig;
+    protected _domListeners: (() => void)[] = [];
+
+    constructor(cfg: HtmlWrapperConfig) {
+        super(cfg);
+        this.config = cfg;
+    }
+
+    async render(): Promise<HTMLElement> {
+        this._domListeners = [];
+
+        const cfg = this.config;
+        const el = document.createElement(cfg.eztype) as HTMLElement;
+
+        this.applyCls(el);
+        this.applyCommonBindings(el);
+        this.applyStyles(el);
+
+        // Layout
+        if (cfg.flex !== undefined) {
+            el.style.flex = String(cfg.flex);
+        }
+        if (cfg.width !== undefined) {
+            el.style.width = typeof cfg.width === 'number' ? `${cfg.width}px` : cfg.width;
+        }
+        if (cfg.height !== undefined) {
+            el.style.height = typeof cfg.height === 'number' ? `${cfg.height}px` : cfg.height;
+        }
+
+        // Content
+        if (cfg.text) el.textContent = cfg.text;
+        if (cfg.html) el.innerHTML = cfg.html;
+
+        // Standard DOM properties (set as properties, not attributes)
+        const domProps = [
+            "src", "alt", "title", "href", "target", "rel",
+            "value", "type", "name", "placeholder",
+            "id", "pattern", "autocomplete", "accept"
+        ] as const;
+
+        for (const key of domProps) {
+            const value = cfg[key as keyof HtmlWrapperConfig];
+            if (value !== undefined && value !== null) {
+                (el as unknown as Record<string, unknown>)[key] = value;
+            }
+        }
+
+        // Boolean properties
+        const booleanProps = [
+            "checked", "disabled", "readonly", "required",
+            "autofocus", "multiple", "hidden", "draggable", "spellcheck"
+        ] as const;
+
+        for (const key of booleanProps) {
+            const value = cfg[key as keyof HtmlWrapperConfig];
+            if (value !== undefined && value !== null) {
+                (el as unknown as Record<string, boolean>)[key] = !!value;
+            }
+        }
+
+        // Numeric properties
+        const numericProps = [
+            "maxLength", "minLength", "rows", "cols", "tabIndex"
+        ] as const;
+
+        for (const key of numericProps) {
+            const value = cfg[key as keyof HtmlWrapperConfig];
+            if (value !== undefined && value !== null) {
+                const attrName = key === "maxLength" ? "maxlength"
+                    : key === "minLength" ? "minlength"
+                    : key === "tabIndex" ? "tabindex"
+                    : key;
+                el.setAttribute(attrName, String(value));
+            }
+        }
+
+        // Min/max/step (can be number or string)
+        if (cfg.min !== undefined) el.setAttribute("min", String(cfg.min));
+        if (cfg.max !== undefined) el.setAttribute("max", String(cfg.max));
+        if (cfg.step !== undefined) el.setAttribute("step", String(cfg.step));
+
+        // Accessibility attributes
+        if (cfg.role) el.setAttribute("role", cfg.role);
+        if (cfg.ariaLabel) el.setAttribute("aria-label", cfg.ariaLabel);
+        if (cfg.ariaDescribedBy) el.setAttribute("aria-describedby", cfg.ariaDescribedBy);
+        if (cfg.ariaHidden !== undefined) el.setAttribute("aria-hidden", String(cfg.ariaHidden));
+        if (cfg.ariaExpanded !== undefined) el.setAttribute("aria-expanded", String(cfg.ariaExpanded));
+        if (cfg.ariaSelected !== undefined) el.setAttribute("aria-selected", String(cfg.ariaSelected));
+        if (cfg.ariaDisabled !== undefined) el.setAttribute("aria-disabled", String(cfg.ariaDisabled));
+
+        // contentEditable
+        if (cfg.contentEditable !== undefined) {
+            el.contentEditable = String(cfg.contentEditable);
+        }
+
+        // Generic attrs for anything not explicitly defined
+        if (cfg.attrs && typeof cfg.attrs === "object") {
+            Object.entries(cfg.attrs).forEach(([k, v]) => {
+                if (v === false || v === null || v === undefined) return;
+                el.setAttribute(k, String(v));
+            });
+        }
+
+        // Event handlers mapping: config key -> DOM event name
+        const eventMap: Array<[keyof HtmlWrapperConfig, string]> = [
+            // Mouse
+            ["onClick", "click"],
+            ["onDoubleClick", "dblclick"],
+            ["onContextMenu", "contextmenu"],
+            ["onMouseDown", "mousedown"],
+            ["onMouseUp", "mouseup"],
+            ["onMouseEnter", "mouseenter"],
+            ["onMouseLeave", "mouseleave"],
+            ["onMouseMove", "mousemove"],
+            ["onMouseOver", "mouseover"],
+            ["onMouseOut", "mouseout"],
+            // Keyboard
+            ["onKeyDown", "keydown"],
+            ["onKeyUp", "keyup"],
+            ["onKeyPress", "keypress"],
+            // Focus
+            ["onFocus", "focus"],
+            ["onBlur", "blur"],
+            // Form
+            ["onInput", "input"],
+            ["onDOMChange", "change"],
+            ["onSubmit", "submit"],
+            ["onReset", "reset"],
+            // Scroll/Wheel
+            ["onScroll", "scroll"],
+            ["onWheel", "wheel"],
+            // Drag
+            ["onDragStart", "dragstart"],
+            ["onDragEnd", "dragend"],
+            ["onDragOver", "dragover"],
+            ["onDragEnter", "dragenter"],
+            ["onDragLeave", "dragleave"],
+            ["onDrop", "drop"],
+            // Touch
+            ["onTouchStart", "touchstart"],
+            ["onTouchMove", "touchmove"],
+            ["onTouchEnd", "touchend"],
+            ["onTouchCancel", "touchcancel"],
+            // Clipboard
+            ["onCopy", "copy"],
+            ["onCut", "cut"],
+            ["onPaste", "paste"],
+            // Media
+            ["onLoad", "load"],
+            ["onError", "error"],
+        ];
+
+        for (const [configKey, eventName] of eventMap) {
+            const handler = cfg[configKey];
+            if (typeof handler === "function") {
+                el.addEventListener(eventName, handler as EventListener);
+                this._domListeners.push(() =>
+                    el.removeEventListener(eventName, handler as EventListener)
+                );
+            }
+        }
+
+        // Children
+        if (Array.isArray(cfg.items)) {
+            const children = await ez._createChildElements(
+                cfg.items,
+                cfg.controller || null,
+                this,
+                (cfg.css as string) || null
+            );
+            children.forEach(child => el.appendChild(child));
+        }
+
+        return el;
+    }
+}

package/components/avatar/EzAvatar.module.scss

@@ -0,0 +1,200 @@
+// ==========================================================
+// EzAvatar - CSS Module
+// ==========================================================
+
+.avatar {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  width: 40px;
+  height: 40px;
+
+  border-radius: 50%;
+  overflow: hidden;
+
+  background-color: var(--ez-border-primary, #e2e8f0);
+  color: var(--ez-text-secondary, #475569);
+
+  font-weight: 600;
+  font-size: 14px;
+  text-transform: uppercase;
+  user-select: none;
+}
+
+// ----------------------------------------------------------
+// Image
+// ----------------------------------------------------------
+.avatarImg {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+// ----------------------------------------------------------
+// Initials (fallback)
+// ----------------------------------------------------------
+.avatarInitials {
+  line-height: 1;
+}
+
+// ----------------------------------------------------------
+// Status indicator
+// ----------------------------------------------------------
+.avatarStatus {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: 2px solid var(--ez-surface-secondary, #ffffff);
+}
+
+.statusOnline {
+  background-color: var(--ez-success, #22c55e);
+}
+
+.statusOffline {
+  background-color: var(--ez-text-tertiary, #94a3b8);
+}
+
+.statusBusy {
+  background-color: var(--ez-danger, #ef4444);
+}
+
+.statusAway {
+  background-color: var(--ez-warning, #f59e0b);
+}
+
+// ----------------------------------------------------------
+// Sizes
+// ----------------------------------------------------------
+.xs {
+  width: 24px;
+  height: 24px;
+  font-size: 10px;
+
+  .avatarStatus {
+    width: 8px;
+    height: 8px;
+    border-width: 1.5px;
+  }
+}
+
+.sm {
+  width: 32px;
+  height: 32px;
+  font-size: 12px;
+
+  .avatarStatus {
+    width: 10px;
+    height: 10px;
+    border-width: 2px;
+  }
+}
+
+.lg {
+  width: 48px;
+  height: 48px;
+  font-size: 18px;
+
+  .avatarStatus {
+    width: 14px;
+    height: 14px;
+  }
+}
+
+.xl {
+  width: 64px;
+  height: 64px;
+  font-size: 24px;
+
+  .avatarStatus {
+    width: 16px;
+    height: 16px;
+  }
+}
+
+// ----------------------------------------------------------
+// Variants
+// ----------------------------------------------------------
+.square {
+  border-radius: var(--ez-radius-lg, 8px);
+}
+
+.rounded {
+  border-radius: var(--ez-radius-xl, 12px);
+}
+
+// ----------------------------------------------------------
+// Color variants (for initials)
+// ----------------------------------------------------------
+.primary {
+  background-color: var(--ez-primary-light, #dbeafe);
+  color: var(--ez-primary, #2563eb);
+}
+
+.success {
+  background-color: var(--ez-success-light, #dcfce7);
+  color: var(--ez-success, #16a34a);
+}
+
+.warning {
+  background-color: var(--ez-warning-light, #fef3c7);
+  color: var(--ez-warning, #d97706);
+}
+
+.danger {
+  background-color: var(--ez-danger-light, #fee2e2);
+  color: var(--ez-danger, #dc2626);
+}
+
+// ----------------------------------------------------------
+// Clickable
+// ----------------------------------------------------------
+.clickable {
+  cursor: pointer;
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+
+  &:hover {
+    transform: scale(1.05);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  }
+
+  &:active {
+    transform: scale(0.98);
+  }
+}
+
+// ==========================================================
+// Avatar Group
+// ==========================================================
+
+.avatarGroup {
+  display: inline-flex;
+  flex-direction: row-reverse;
+
+  .avatar {
+    border: 2px solid var(--ez-surface-secondary, #ffffff);
+    margin-left: -8px;
+
+    &:last-child {
+      margin-left: 0;
+    }
+  }
+}
+
+.avatarGroupSm {
+  .avatar {
+    margin-left: -6px;
+  }
+}
+
+.avatarGroupLg {
+  .avatar {
+    margin-left: -12px;
+  }
+}

package/components/avatar/EzAvatar.ts

@@ -0,0 +1,130 @@
+import styles from './EzAvatar.module.scss';
+import { cx } from '../../utils/cssModules.js';
+import { EzBaseComponent, EzBaseComponentConfig } from '../EzBaseComponent.js';
+
+const cls = cx(styles);
+
+const STATUS_MAP: Record<string, string> = {
+    'online': 'statusOnline',
+    'offline': 'statusOffline',
+    'busy': 'statusBusy',
+    'away': 'statusAway'
+};
+
+export interface EzAvatarConfig extends EzBaseComponentConfig {
+    size?: number | 'xs' | 'sm' | 'lg' | 'xl';
+    width?: number | string;
+    height?: number | string;
+    variant?: 'square' | 'rounded';
+    color?: 'primary' | 'success' | 'warning' | 'danger';
+    src?: string;
+    alt?: string;
+    name?: string;
+    initials?: string;
+    status?: 'online' | 'offline' | 'busy' | 'away';
+    onClick?: (e: MouseEvent, component: EzAvatar) => void;
+}
+
+export class EzAvatar extends EzBaseComponent {
+    declare config: EzAvatarConfig;
+
+    constructor(config: EzAvatarConfig = {}) {
+        super(config);
+        this.config = config;
+    }
+
+    render(): HTMLDivElement {
+        const el = document.createElement('div');
+
+        el.classList.add(cls('avatar'));
+
+        if (this.config.width || this.config.height) {
+            const width = this.config.width || this.config.height;
+            const height = this.config.height || this.config.width;
+
+            el.style.width = typeof width === 'number' ? `${width}px` : String(width);
+            el.style.height = typeof height === 'number' ? `${height}px` : String(height);
+
+            const sizeNum = typeof width === 'number' ? width : parseInt(String(width), 10);
+            if (sizeNum) {
+                el.style.fontSize = `${Math.round(sizeNum * 0.4)}px`;
+            }
+        }
+        else if (this.config.size) {
+            if (typeof this.config.size === 'number') {
+                el.style.width = `${this.config.size}px`;
+                el.style.height = `${this.config.size}px`;
+                el.style.fontSize = `${Math.round(this.config.size * 0.4)}px`;
+            }
+            else {
+                el.classList.add(cls(this.config.size));
+            }
+        }
+
+        if (this.config.variant) {
+            el.classList.add(cls(this.config.variant));
+        }
+
+        if (this.config.color) {
+            el.classList.add(cls(this.config.color));
+        }
+
+        if (this.config.onClick) {
+            el.classList.add(cls('clickable'));
+            el.addEventListener('click', e => {
+                this.config.onClick!(e, this);
+            });
+        }
+
+        if (this.config.src) {
+            const img = document.createElement('img');
+            img.className = cls('avatarImg');
+            img.src = this.config.src;
+            img.alt = this.config.alt || this.config.name || '';
+
+            img.onerror = () => {
+                img.remove();
+                el.appendChild(this._createInitials());
+            };
+
+            el.appendChild(img);
+        } else {
+            el.appendChild(this._createInitials());
+        }
+
+        if (this.config.status) {
+            const status = document.createElement('span');
+            const statusClass = STATUS_MAP[this.config.status] || 'statusOffline';
+            status.className = cls('avatarStatus', statusClass);
+            el.appendChild(status);
+        }
+
+        this.applyStyles(el);
+
+        return el;
+    }
+
+    private _createInitials(): HTMLSpanElement {
+        const initialsEl = document.createElement('span');
+        initialsEl.className = cls('avatarInitials');
+        initialsEl.textContent = this._getInitials();
+        return initialsEl;
+    }
+
+    private _getInitials(): string {
+        if (this.config.initials) {
+            return this.config.initials.substring(0, 2);
+        }
+
+        const name = this.config.name || '';
+        if (!name) return '?';
+
+        const parts = name.trim().split(/\s+/);
+
+        if (parts.length === 1) {
+            return parts[0].substring(0, 2).toUpperCase();
+        }
+
+        return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+    }
+}