ezfw-core 1.0.0

package/components/textarea/EzTextarea.ts

@@ -0,0 +1,161 @@
+import styles from './EzTextarea.module.scss';
+import { cx } from '../../utils/cssModules.js';
+import { EzBaseComponent, EzBaseComponentConfig } from '../EzBaseComponent.js';
+
+const cls = cx(styles);
+
+export interface EzTextareaConfig extends EzBaseComponentConfig {
+    size?: 'sm' | 'lg';
+    disabled?: boolean;
+    readonly?: boolean;
+    value?: string;
+    name?: string;
+    formData?: string;
+    placeholder?: string;
+    rows?: number;
+    minRows?: number;
+    maxRows?: number;
+    maxLength?: number;
+    resize?: boolean;
+    autoResize?: boolean;
+    showCount?: boolean;
+}
+
+export class EzTextarea extends EzBaseComponent {
+    declare config: EzTextareaConfig;
+
+    private _wrapper: HTMLDivElement | null = null;
+    private _textarea: HTMLTextAreaElement | null = null;
+    private _error: HTMLDivElement | null = null;
+    private _counter: HTMLDivElement | null = null;
+
+    render(): HTMLDivElement {
+        const cfg = this.config;
+
+        const wrapper = document.createElement('div');
+        wrapper.className = cls(
+            'textareaGroup',
+            cfg.size,
+            cfg.disabled && 'disabled',
+            cfg.resize === false && 'noResize',
+            cfg.rows && 'hasRows'
+        );
+
+        const textarea = document.createElement('textarea');
+        textarea.className = cls('textarea');
+        textarea.placeholder = cfg.placeholder || '';
+        if (cfg.value !== undefined) textarea.value = cfg.value;
+
+        if (cfg.rows) textarea.rows = cfg.rows;
+        const paddingY = cfg.size === 'sm' ? 16 : cfg.size === 'lg' ? 24 : 20;
+        if (cfg.minRows) textarea.style.minHeight = `calc(${cfg.minRows * 1.5}em + ${paddingY}px)`;
+        if (cfg.maxRows) textarea.style.maxHeight = `calc(${cfg.maxRows * 1.5}em + ${paddingY}px)`;
+        if (cfg.maxLength) textarea.maxLength = cfg.maxLength;
+        if (cfg.disabled) textarea.disabled = true;
+        if (cfg.readonly) textarea.readOnly = true;
+
+        if (cfg.name && cfg.formData) {
+            this.config.bind = `${cfg.formData}.${cfg.name}`;
+        }
+
+        if (cfg.name) {
+            textarea.setAttribute('data-ez-field', cfg.name);
+        }
+
+        this.applyCommonBindings(textarea);
+
+        const onChange = this._createOnChangeHandler();
+
+        textarea.addEventListener('input', e => {
+            if (onChange) {
+                onChange((e.target as HTMLTextAreaElement).value);
+            }
+
+            if (cfg.autoResize) {
+                this._autoResize(textarea);
+            }
+
+            if (cfg.showCount && this._counter) {
+                this._updateCounter((e.target as HTMLTextAreaElement).value.length);
+            }
+        });
+
+        wrapper.appendChild(textarea);
+
+        if (cfg.showCount) {
+            const counter = document.createElement('div');
+            counter.className = cls('counter');
+            this._counter = counter;
+            this._updateCounter(0);
+            wrapper.appendChild(counter);
+        }
+
+        const error = document.createElement('div');
+        error.className = cls('fieldError');
+        wrapper.appendChild(error);
+
+        this._wrapper = wrapper;
+        this._textarea = textarea;
+        this._error = error;
+
+        if (cfg.autoResize) {
+            requestAnimationFrame(() => this._autoResize(textarea));
+        }
+
+        return wrapper;
+    }
+
+    private _autoResize(textarea: HTMLTextAreaElement): void {
+        textarea.style.height = 'auto';
+        textarea.style.height = textarea.scrollHeight + 'px';
+    }
+
+    private _updateCounter(length: number): void {
+        const cfg = this.config;
+        if (!this._counter) return;
+
+        if (cfg.maxLength) {
+            this._counter.textContent = `${length} / ${cfg.maxLength}`;
+            this._counter.classList.toggle(cls('counterWarning'), length > cfg.maxLength * 0.9);
+            this._counter.classList.toggle(cls('counterError'), length >= cfg.maxLength);
+        } else {
+            this._counter.textContent = String(length);
+        }
+    }
+
+    getValue(): string {
+        return this._textarea?.value ?? '';
+    }
+
+    setValue(value: string): void {
+        if (this._textarea) {
+            this._textarea.value = value || '';
+            if (this.config.autoResize) {
+                this._autoResize(this._textarea);
+            }
+            if (this.config.showCount && this._counter) {
+                this._updateCounter(this._textarea.value.length);
+            }
+        }
+    }
+
+    focus(): void {
+        this._textarea?.focus();
+    }
+
+    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 = '';
+        }
+    }
+}

package/components/timepicker/EzTimePicker.module.scss

@@ -0,0 +1,282 @@
+.timepicker {
+    position: relative;
+    display: inline-flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.isOpen {
+    .trigger {
+        border-color: var(--ez-primary, #2563eb);
+        box-shadow: 0 0 0 2px var(--ez-primary-light, rgba(37, 99, 235, 0.15));
+    }
+}
+
+.trigger {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    background: var(--ez-input-bg, #ffffff);
+    border: 1px solid var(--ez-input-border, #e2e8f0);
+    border-radius: var(--ez-radius-md, 6px);
+
+    padding: 0 12px;
+    height: 36px;
+    cursor: pointer;
+
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+
+    &:hover {
+        border-color: var(--ez-text-tertiary, #94a3b8);
+    }
+}
+
+.input {
+    flex: 1;
+    min-width: 0;
+    height: 100%;
+    padding: 0;
+
+    font-family: inherit;
+    font-size: 13px;
+    color: var(--ez-input-text, #1e293b);
+
+    background: transparent;
+    border: none;
+    outline: none;
+    cursor: pointer;
+
+    &::placeholder {
+        color: var(--ez-input-placeholder, #94a3b8);
+    }
+}
+
+.icon {
+    color: var(--ez-text-tertiary, #94a3b8);
+    font-size: 14px;
+    flex-shrink: 0;
+}
+
+.dropdown {
+    position: fixed;
+    z-index: 1000;
+
+    background: var(--ez-surface-secondary, #ffffff);
+    border: 1px solid var(--ez-border, #e2e8f0);
+    border-radius: var(--ez-radius-md, 8px);
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+
+    padding: 12px;
+
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.15s ease, visibility 0.15s ease;
+}
+
+.pickerContainer {
+    display: flex;
+    align-items: stretch;
+    gap: 4px;
+}
+
+.column {
+    display: flex;
+    flex-direction: column;
+    min-width: 50px;
+}
+
+.columnList {
+    height: 180px;
+    overflow-y: auto;
+    scroll-behavior: smooth;
+
+    border: 1px solid var(--ez-border, #e2e8f0);
+    border-radius: var(--ez-radius-sm, 4px);
+    background: var(--ez-surface-primary, #f8fafc);
+
+    &::-webkit-scrollbar {
+        width: 4px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: var(--ez-border, #e2e8f0);
+        border-radius: 2px;
+    }
+}
+
+.columnItem {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    height: 36px;
+    padding: 0 8px;
+
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--ez-text-primary, #1e293b);
+
+    cursor: pointer;
+    transition: all 0.15s ease;
+
+    &:hover:not(.disabled):not(.selected) {
+        background: var(--ez-surface-secondary, #ffffff);
+    }
+
+    &.selected {
+        background: var(--ez-primary, #2563eb);
+        color: #ffffff;
+    }
+
+    &.disabled {
+        color: var(--ez-text-disabled, #cbd5e1);
+        cursor: not-allowed;
+    }
+}
+
+.separator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--ez-text-tertiary, #94a3b8);
+    padding: 0 4px;
+}
+
+.periodColumn {
+    min-width: 45px;
+    margin-left: 8px;
+
+    .columnList {
+        height: auto;
+    }
+
+    .periodItem {
+        height: 40px;
+        font-size: 13px;
+    }
+}
+
+.footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    margin-top: 12px;
+    padding-top: 12px;
+    border-top: 1px solid var(--ez-border, #e2e8f0);
+}
+
+.nowBtn,
+.clearBtn,
+.okBtn {
+    padding: 6px 12px;
+
+    font-size: 12px;
+    font-weight: 500;
+
+    background: transparent;
+    border: 1px solid var(--ez-border, #e2e8f0);
+    border-radius: var(--ez-radius-sm, 4px);
+
+    color: var(--ez-text-secondary, #64748b);
+    cursor: pointer;
+    transition: all 0.15s ease;
+
+    &:hover {
+        background: var(--ez-surface-primary, #f1f5f9);
+        border-color: var(--ez-text-tertiary, #94a3b8);
+    }
+}
+
+.okBtn {
+    background: var(--ez-primary, #2563eb);
+    border-color: var(--ez-primary, #2563eb);
+    color: #ffffff;
+
+    &:hover {
+        background: var(--ez-primary-dark, #1d4ed8);
+        border-color: var(--ez-primary-dark, #1d4ed8);
+    }
+}
+
+// Disabled state
+.disabled {
+    .trigger {
+        background: var(--ez-surface-primary, #f8fafc);
+        cursor: not-allowed;
+
+        &:hover {
+            border-color: var(--ez-input-border, #e2e8f0);
+        }
+    }
+
+    .input {
+        color: var(--ez-text-tertiary, #94a3b8);
+        cursor: not-allowed;
+    }
+
+    .icon {
+        opacity: 0.5;
+    }
+}
+
+// Error state
+.hasError {
+    .trigger {
+        border-color: var(--ez-danger, #dc2626);
+
+        &:focus-within {
+            border-color: var(--ez-danger, #dc2626);
+            box-shadow: 0 0 0 2px var(--ez-danger-light, rgba(220, 38, 38, 0.15));
+        }
+    }
+}
+
+.fieldError {
+    display: none;
+    font-size: 12px;
+    color: var(--ez-danger, #dc2626);
+    padding-left: 2px;
+}
+
+.fieldErrorVisible {
+    display: block;
+}
+
+// Sizes
+.sm {
+    .trigger {
+        height: 30px;
+        padding: 0 10px;
+    }
+
+    .input {
+        font-size: 12px;
+    }
+
+    .icon {
+        font-size: 12px;
+    }
+}
+
+.lg {
+    .trigger {
+        height: 44px;
+        padding: 0 14px;
+    }
+
+    .input {
+        font-size: 14px;
+    }
+
+    .icon {
+        font-size: 16px;
+    }
+}