ezfw-core 1.0.0

package/components/select/EzSelect.module.scss

@@ -0,0 +1,153 @@
+// ==========================================================
+// EzSelect - CSS Module
+// ==========================================================
+
+.select {
+  position: relative;
+  display: inline-flex;
+  min-width: 80px;
+}
+
+// ----------------------------------------------------------
+// Trigger button
+// ----------------------------------------------------------
+.selectTrigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+
+  width: 100%;
+  padding: 6px 10px;
+
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--ez-text-primary, #1e293b);
+  text-align: left;
+
+  background: var(--ez-surface-secondary, #ffffff);
+  border: 1px solid var(--ez-border-primary, #e2e8f0);
+  border-radius: var(--ez-radius-sm, 4px);
+
+  cursor: pointer;
+  outline: none;
+
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+
+  &:hover {
+    border-color: var(--ez-text-tertiary, #94a3b8);
+  }
+
+  &:focus {
+    border-color: var(--ez-primary, #2563eb);
+    box-shadow: 0 0 0 2px var(--ez-primary-light, rgba(37, 99, 235, 0.15));
+  }
+}
+
+.selectTriggerText {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.isPlaceholder {
+  color: var(--ez-text-tertiary, #94a3b8);
+}
+
+.selectArrow {
+  font-size: 10px;
+  color: var(--ez-text-tertiary, #94a3b8);
+  transition: transform 0.2s ease;
+}
+
+// ----------------------------------------------------------
+// Dropdown
+// ----------------------------------------------------------
+.selectDropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  z-index: 1000;
+
+  max-height: 200px;
+  overflow-y: auto;
+
+  background: var(--ez-surface-secondary, #ffffff);
+  border: 1px solid var(--ez-border-primary, #e2e8f0);
+  border-radius: var(--ez-radius-sm, 4px);
+  box-shadow: var(--ez-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.1));
+
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-8px);
+
+  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
+}
+
+// ----------------------------------------------------------
+// Option items
+// ----------------------------------------------------------
+.selectOption {
+  padding: 8px 12px;
+
+  font-size: 13px;
+  color: var(--ez-text-primary, #1e293b);
+
+  cursor: pointer;
+
+  transition: background-color 0.1s ease;
+
+  &:hover {
+    background-color: var(--ez-surface-primary, #f1f5f9);
+  }
+
+  &:first-child {
+    border-radius: var(--ez-radius-sm, 4px) var(--ez-radius-sm, 4px) 0 0;
+  }
+
+  &:last-child {
+    border-radius: 0 0 var(--ez-radius-sm, 4px) var(--ez-radius-sm, 4px);
+  }
+}
+
+.isSelected {
+  background-color: var(--ez-primary-light, rgba(37, 99, 235, 0.1));
+  color: var(--ez-primary, #2563eb);
+  font-weight: 500;
+}
+
+// ----------------------------------------------------------
+// Open state
+// ----------------------------------------------------------
+.isOpen {
+  .selectTrigger {
+    border-color: var(--ez-primary, #2563eb);
+    box-shadow: 0 0 0 2px var(--ez-primary-light, rgba(37, 99, 235, 0.15));
+  }
+
+  .selectArrow {
+    transform: rotate(180deg);
+  }
+
+  .selectDropdown {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+  }
+}
+
+// ----------------------------------------------------------
+// Dropup state (opens upward)
+// ----------------------------------------------------------
+.isDropup {
+  .selectDropdown {
+    transform: translateY(8px);
+  }
+
+  &.isOpen .selectDropdown {
+    transform: translateY(0);
+  }
+}

package/components/select/EzSelect.ts

@@ -0,0 +1,238 @@
+import styles from './EzSelect.module.scss';
+import { cx } from '../../utils/cssModules.js';
+import { EzBaseComponent, EzBaseComponentConfig } from '../EzBaseComponent.js';
+
+const cls = cx(styles);
+
+export interface SelectOption {
+    value: string | number;
+    label: string;
+}
+
+export interface EzSelectConfig extends EzBaseComponentConfig {
+    options?: (SelectOption | string | number)[];
+    value?: string | number | null;
+    placeholder?: string;
+    onSelect?: (value: string | number) => void;
+}
+
+export class EzSelect extends EzBaseComponent {
+    declare config: EzSelectConfig;
+    declare el: HTMLDivElement;
+
+    options: (SelectOption | string | number)[];
+    value: string | number | null;
+    placeholder: string;
+    onSelect: ((value: string | number) => void) | null;
+
+    private _isOpen: boolean = false;
+    private _trigger: HTMLButtonElement | null = null;
+    private _triggerText: HTMLSpanElement | null = null;
+    private _dropdown: HTMLDivElement | null = null;
+    private _outsideClickHandler: ((e: MouseEvent) => void) | null = null;
+
+    constructor(config: EzSelectConfig = {}) {
+        super(config);
+
+        this.options = config.options || [];
+        this.value = config.value ?? null;
+        this.placeholder = config.placeholder || 'Select...';
+        this.onSelect = config.onSelect || null;
+    }
+
+    render(): HTMLDivElement {
+        this.el = document.createElement('div');
+        this.el.className = cls('select');
+
+        if (this.config.cls) {
+            const clsValue = this.config.cls;
+            if (Array.isArray(clsValue)) {
+                clsValue.forEach(c => c && this.el.classList.add(c));
+            } else if (typeof clsValue === 'string') {
+                this.el.classList.add(clsValue);
+            }
+        }
+
+        this._trigger = document.createElement('button');
+        this._trigger.type = 'button';
+        this._trigger.className = cls('selectTrigger');
+
+        this._triggerText = document.createElement('span');
+        this._triggerText.className = cls('selectTriggerText');
+        this._trigger.appendChild(this._triggerText);
+
+        const arrow = document.createElement('span');
+        arrow.className = cls('selectArrow');
+        arrow.innerHTML = '▾';
+        this._trigger.appendChild(arrow);
+
+        this.el.appendChild(this._trigger);
+
+        this._dropdown = document.createElement('div');
+        this._dropdown.className = cls('selectDropdown');
+
+        this._buildOptions();
+        this.el.appendChild(this._dropdown);
+
+        this._updateDisplay();
+        this._bindEvents();
+
+        return this.el;
+    }
+
+    private _buildOptions(): void {
+        if (!this._dropdown) return;
+        this._dropdown.innerHTML = '';
+
+        this.options.forEach(opt => {
+            const item = document.createElement('div');
+            item.className = cls('selectOption');
+
+            const value = typeof opt === 'object' ? opt.value : opt;
+            const label = typeof opt === 'object' ? opt.label : String(opt);
+
+            item.dataset.value = String(value);
+            item.textContent = label;
+
+            if (value === this.value) {
+                item.classList.add(cls('isSelected'));
+            }
+
+            item.addEventListener('click', (e) => {
+                e.stopPropagation();
+                this._selectOption(value);
+            });
+
+            this._dropdown!.appendChild(item);
+        });
+    }
+
+    private _updateDisplay(): void {
+        if (!this._triggerText) return;
+
+        const selectedOpt = this.options.find(opt => {
+            const value = typeof opt === 'object' ? opt.value : opt;
+            return value === this.value;
+        });
+
+        if (selectedOpt) {
+            const label = typeof selectedOpt === 'object' ? selectedOpt.label : String(selectedOpt);
+            this._triggerText.textContent = label;
+            this._triggerText.classList.remove(cls('isPlaceholder'));
+        } else {
+            this._triggerText.textContent = this.placeholder;
+            this._triggerText.classList.add(cls('isPlaceholder'));
+        }
+    }
+
+    private _selectOption(value: string | number): void {
+        this.value = value;
+        this._updateDisplay();
+        this._buildOptions();
+        this._close();
+
+        if (typeof this.onSelect === 'function') {
+            this.onSelect(value);
+        }
+    }
+
+    private _bindEvents(): void {
+        if (!this._trigger) return;
+
+        this._trigger.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this._isOpen ? this._close() : this._open();
+        });
+
+        this._outsideClickHandler = (e: MouseEvent) => {
+            if (!this.el.contains(e.target as Node)) {
+                this._close();
+            }
+        };
+
+        document.addEventListener('click', this._outsideClickHandler);
+
+        this._trigger.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this._isOpen ? this._close() : this._open();
+            } else if (e.key === 'Escape') {
+                this._close();
+            } else if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                this._selectNext();
+            } else if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                this._selectPrev();
+            }
+        });
+    }
+
+    private _open(): void {
+        this._isOpen = true;
+        this.el.classList.add(cls('isOpen'));
+        this._trigger?.setAttribute('aria-expanded', 'true');
+        this._positionDropdown();
+    }
+
+    private _positionDropdown(): void {
+        if (!this._trigger || !this._dropdown) return;
+
+        const rect = this._trigger.getBoundingClientRect();
+        const dropdownHeight = this._dropdown.scrollHeight || 200;
+        const viewportHeight = window.innerHeight;
+        const spaceBelow = viewportHeight - rect.bottom;
+        const spaceAbove = rect.top;
+
+        this._dropdown.style.position = 'fixed';
+        this._dropdown.style.left = `${rect.left}px`;
+        this._dropdown.style.width = `${rect.width}px`;
+
+        if (spaceBelow < dropdownHeight && spaceAbove > spaceBelow) {
+            this._dropdown.style.bottom = `${viewportHeight - rect.top + 4}px`;
+            this._dropdown.style.top = 'auto';
+            this.el.classList.add(cls('isDropup'));
+        } else {
+            this._dropdown.style.top = `${rect.bottom + 4}px`;
+            this._dropdown.style.bottom = 'auto';
+            this.el.classList.remove(cls('isDropup'));
+        }
+    }
+
+    private _close(): void {
+        this._isOpen = false;
+        this.el.classList.remove(cls('isOpen'));
+        this.el.classList.remove(cls('isDropup'));
+        this._trigger?.setAttribute('aria-expanded', 'false');
+    }
+
+    private _selectNext(): void {
+        const values = this.options.map(opt => typeof opt === 'object' ? opt.value : opt);
+        const currentIndex = values.indexOf(this.value as string | number);
+        const nextIndex = currentIndex < values.length - 1 ? currentIndex + 1 : 0;
+        this._selectOption(values[nextIndex]);
+    }
+
+    private _selectPrev(): void {
+        const values = this.options.map(opt => typeof opt === 'object' ? opt.value : opt);
+        const currentIndex = values.indexOf(this.value as string | number);
+        const prevIndex = currentIndex > 0 ? currentIndex - 1 : values.length - 1;
+        this._selectOption(values[prevIndex]);
+    }
+
+    setValue(value: string | number): void {
+        this.value = value;
+        this._updateDisplay();
+        this._buildOptions();
+    }
+
+    getValue(): string | number | null {
+        return this.value;
+    }
+
+    destroy(): void {
+        if (this._outsideClickHandler) {
+            document.removeEventListener('click', this._outsideClickHandler);
+        }
+    }
+}

package/components/skeleton/EzSkeleton.module.scss

@@ -0,0 +1,95 @@
+.skeletonGroup {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.skeleton {
+    display: block;
+    background: linear-gradient(
+        90deg,
+        #cbd5e1 25%,
+        #e2e8f0 50%,
+        #cbd5e1 75%
+    );
+    background-size: 200% 100%;
+}
+
+// Variants
+.text {
+    height: 16px;
+    width: 100%;
+    border-radius: var(--ez-radius-sm, 4px);
+}
+
+.title {
+    height: 24px;
+    width: 60%;
+    border-radius: var(--ez-radius-sm, 4px);
+}
+
+.circle {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+}
+
+.rect {
+    width: 100%;
+    height: 100px;
+    border-radius: var(--ez-radius-md, 6px);
+}
+
+.rounded {
+    border-radius: var(--ez-radius-lg, 8px);
+}
+
+// Pulse animation (shimmer effect)
+.pulse {
+    animation: shimmer 1.5s infinite;
+}
+
+@keyframes shimmer {
+    0% {
+        background-position: 200% 0;
+    }
+    100% {
+        background-position: -200% 0;
+    }
+}
+
+// Wave animation
+.wave {
+    position: relative;
+    overflow: hidden;
+
+    &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: linear-gradient(
+            90deg,
+            transparent,
+            rgba(255, 255, 255, 0.4),
+            transparent
+        );
+        animation: wave 1.5s linear infinite;
+    }
+}
+
+@keyframes wave {
+    0% {
+        transform: translateX(-100%);
+    }
+    100% {
+        transform: translateX(100%);
+    }
+}
+
+// No animation
+.none {
+    animation: none;
+}

package/components/skeleton/EzSkeleton.ts

@@ -0,0 +1,70 @@
+import styles from './EzSkeleton.module.scss';
+import { cx } from '../../utils/cssModules.js';
+import { EzBaseComponent, EzBaseComponentConfig } from '../EzBaseComponent.js';
+
+const cls = cx(styles);
+
+export interface EzSkeletonConfig extends EzBaseComponentConfig {
+    variant?: 'text' | 'circle' | 'rectangular';
+    animation?: 'pulse' | 'wave' | 'none';
+    width?: number | string;
+    height?: number | string;
+    size?: number;
+    count?: number;
+    gap?: number | string;
+    rounded?: boolean;
+}
+
+export class EzSkeleton extends EzBaseComponent {
+    declare config: EzSkeletonConfig;
+
+    render(): HTMLElement {
+        const cfg = this.config;
+
+        if (cfg.count && cfg.count > 1) {
+            const wrapper = document.createElement('div');
+            wrapper.className = cls('skeletonGroup');
+
+            if (cfg.gap) {
+                wrapper.style.gap = typeof cfg.gap === 'number' ? `${cfg.gap}px` : cfg.gap;
+            }
+
+            for (let i = 0; i < cfg.count; i++) {
+                const skeleton = this._createSkeleton(cfg);
+                wrapper.appendChild(skeleton);
+            }
+
+            return wrapper;
+        }
+
+        return this._createSkeleton(cfg);
+    }
+
+    private _createSkeleton(cfg: EzSkeletonConfig): HTMLElement {
+        const skeleton = document.createElement('div');
+        skeleton.className = cls(
+            'skeleton',
+            cfg.variant || 'text',
+            cfg.animation || 'pulse',
+            cfg.rounded && 'rounded'
+        );
+
+        if (cfg.width) {
+            skeleton.style.width = typeof cfg.width === 'number' ? `${cfg.width}px` : cfg.width;
+        }
+
+        if (cfg.height) {
+            skeleton.style.height = typeof cfg.height === 'number' ? `${cfg.height}px` : cfg.height;
+        }
+
+        if (cfg.variant === 'circle') {
+            const size = cfg.size || 40;
+            skeleton.style.width = `${size}px`;
+            skeleton.style.height = `${size}px`;
+        }
+
+        this.applyStyles(skeleton);
+
+        return skeleton;
+    }
+}