create-nativecore 0.1.1 → 0.2.0

package/template/src/components/core/nc-slider.ts

@@ -0,0 +1,285 @@
+/**
+ * NcSlider Component
+ *
+ * NativeCore Framework Core Component
+ *
+ * Attributes:
+ *   - name: string — form field name
+ *   - value: number — current value (default: min)
+ *   - min: number — minimum value (default: 0)
+ *   - max: number — maximum value (default: 100)
+ *   - step: number — step increment (default: 1)
+ *   - disabled: boolean — disabled state
+ *   - show-value: boolean — show current value bubble above thumb
+ *   - size: 'sm' | 'md' | 'lg' (default: 'md')
+ *   - variant: 'primary' | 'success' | 'danger' (default: 'primary')
+ *
+ * Events:
+ *   - change: CustomEvent<{ value: number; name: string }>
+ *   - input: CustomEvent<{ value: number; name: string }>
+ *
+ * Usage:
+ *   <nc-slider name="volume" min="0" max="100" value="50" show-value></nc-slider>
+ *   <nc-slider name="opacity" min="0" max="1" step="0.01" value="0.5"></nc-slider>
+ */
+
+import { Component, defineComponent } from '@core/component.js';
+
+export class NcSlider extends Component {
+    static useShadowDOM = true;
+
+    static attributeOptions = {
+        variant: ['primary', 'success', 'danger'],
+        size: ['sm', 'md', 'lg']
+    };
+
+    static get observedAttributes() {
+        return ['name', 'value', 'min', 'max', 'step', 'disabled', 'show-value', 'size', 'variant'];
+    }
+
+    constructor() {
+        super();
+    }
+
+    private _getNum(attr: string, fallback: number): number {
+        const v = this.getAttribute(attr);
+        return v !== null && v !== '' ? Number(v) : fallback;
+    }
+
+    template() {
+        const min = this._getNum('min', 0);
+        const max = this._getNum('max', 100);
+        const step = this._getNum('step', 1);
+        const value = this._getNum('value', min);
+        const disabled = this.hasAttribute('disabled');
+        const showValue = this.hasAttribute('show-value');
+
+        const pct = max === min ? 0 : ((value - min) / (max - min)) * 100;
+
+        // Set fill % as a host CSS variable so it can be updated without re-render
+        this.style.setProperty('--_fill-pct', `${pct}%`);
+
+        return `
+            <style>
+                :host {
+                    display: block;
+                    font-family: var(--nc-font-family);
+                    width: 100%;
+                }
+
+                .slider-wrap {
+                    position: relative;
+                    display: flex;
+                    align-items: center;
+                    width: 100%;
+                    padding-top: ${showValue ? '1.75rem' : '0'};
+                }
+
+                input[type="range"] {
+                    -webkit-appearance: none;
+                    appearance: none;
+                    width: 100%;
+                    background: transparent;
+                    cursor: ${disabled ? 'not-allowed' : 'pointer'};
+                    outline: none;
+                    margin: 0;
+                    opacity: ${disabled ? '0.5' : '1'};
+                }
+
+                /* Track — WebKit: uses the host CSS variable for live fill */
+                input[type="range"]::-webkit-slider-runnable-track {
+                    height: var(--track-h);
+                    border-radius: var(--nc-radius-full);
+                    background: linear-gradient(
+                        to right,
+                        var(--track-fill) 0%,
+                        var(--track-fill) var(--_fill-pct, ${pct}%),
+                        var(--nc-gray-200) var(--_fill-pct, ${pct}%),
+                        var(--nc-gray-200) 100%
+                    );
+                }
+
+                /* Track — Firefox */
+                input[type="range"]::-moz-range-track {
+                    height: var(--track-h);
+                    border-radius: var(--nc-radius-full);
+                    background: var(--nc-gray-200);
+                }
+
+                input[type="range"]::-moz-range-progress {
+                    height: var(--track-h);
+                    border-radius: var(--nc-radius-full);
+                    background: var(--track-fill);
+                }
+
+                /* Thumb — WebKit */
+                input[type="range"]::-webkit-slider-thumb {
+                    -webkit-appearance: none;
+                    appearance: none;
+                    width: var(--thumb-size);
+                    height: var(--thumb-size);
+                    border-radius: var(--nc-radius-full);
+                    background: var(--nc-white);
+                    border: 2px solid var(--track-fill);
+                    box-shadow: var(--nc-shadow-sm);
+                    margin-top: calc((var(--track-h) - var(--thumb-size)) / 2);
+                    transition: box-shadow var(--nc-transition-fast), transform var(--nc-transition-fast);
+                    cursor: ${disabled ? 'not-allowed' : 'pointer'};
+                }
+
+                input[type="range"]::-webkit-slider-thumb:hover {
+                    box-shadow: 0 0 0 6px color-mix(in srgb, var(--track-fill) 15%, transparent);
+                    transform: scale(1.1);
+                }
+
+                input[type="range"]::-webkit-slider-thumb:active {
+                    transform: scale(1.15);
+                }
+
+                /* Thumb — Firefox */
+                input[type="range"]::-moz-range-thumb {
+                    width: var(--thumb-size);
+                    height: var(--thumb-size);
+                    border-radius: var(--nc-radius-full);
+                    background: var(--nc-white);
+                    border: 2px solid var(--track-fill);
+                    box-shadow: var(--nc-shadow-sm);
+                    cursor: ${disabled ? 'not-allowed' : 'pointer'};
+                }
+
+                input[type="range"]:focus-visible::-webkit-slider-thumb {
+                    box-shadow: 0 0 0 3px var(--nc-bg), 0 0 0 5px var(--track-fill);
+                }
+
+                /* Size tokens */
+                :host([size="sm"]),
+                :host(:not([size])) {
+                    --track-h: 3px;
+                    --thumb-size: 14px;
+                }
+
+                :host([size="md"]) {
+                    --track-h: 4px;
+                    --thumb-size: 18px;
+                }
+
+                :host([size="lg"]) {
+                    --track-h: 6px;
+                    --thumb-size: 22px;
+                }
+
+                :host {
+                    --track-h: 4px;
+                    --thumb-size: 18px;
+                }
+
+                :host,
+                :host([variant="primary"]) { --track-fill: var(--nc-primary); }
+                :host([variant="success"]) { --track-fill: var(--nc-success); }
+                :host([variant="danger"])  { --track-fill: var(--nc-danger); }
+
+                /* Value bubble — position driven by --_fill-pct */
+                .value-bubble {
+                    position: absolute;
+                    top: 0;
+                    left: var(--_fill-pct, ${pct}%);
+                    transform: translateX(-50%);
+                    background: var(--track-fill);
+                    color: var(--nc-white);
+                    font-size: var(--nc-font-size-xs);
+                    font-weight: var(--nc-font-weight-semibold);
+                    padding: 1px 6px;
+                    border-radius: var(--nc-radius-sm);
+                    white-space: nowrap;
+                    pointer-events: none;
+                    line-height: 1.5;
+                }
+
+                .value-bubble::after {
+                    content: '';
+                    position: absolute;
+                    top: 100%;
+                    left: 50%;
+                    transform: translateX(-50%);
+                    border: 4px solid transparent;
+                    border-top-color: var(--track-fill);
+                }
+            </style>
+
+            <div class="slider-wrap">
+                ${showValue ? `<span class="value-bubble">${value}</span>` : ''}
+                <input
+                    type="range"
+                    min="${min}"
+                    max="${max}"
+                    step="${step}"
+                    value="${value}"
+                    ${disabled ? 'disabled' : ''}
+                    name="${this.getAttribute('name') || ''}"
+                    aria-valuemin="${min}"
+                    aria-valuemax="${max}"
+                    aria-valuenow="${value}"
+                />
+            </div>
+        `;
+    }
+
+    onMount() {
+        this._bindEvents();
+    }
+
+    private _updateLive(val: number) {
+        const min = this._getNum('min', 0);
+        const max = this._getNum('max', 100);
+        const pct = max === min ? 0 : ((val - min) / (max - min)) * 100;
+
+        // Update CSS var — drives both the track gradient and bubble position
+        this.style.setProperty('--_fill-pct', `${pct}%`);
+
+        // Update bubble text without touching the shadow DOM structure
+        const bubble = this.shadowRoot!.querySelector<HTMLElement>('.value-bubble');
+        if (bubble) bubble.textContent = String(val);
+    }
+
+    private _bindEvents() {
+        const input = this.shadowRoot!.querySelector<HTMLInputElement>('input[type="range"]');
+        if (!input) return;
+
+        input.addEventListener('input', () => {
+            const val = Number(input.value);
+            this._updateLive(val);
+            this.dispatchEvent(new CustomEvent('input', {
+                bubbles: true,
+                composed: true,
+                detail: { value: val, name: this.getAttribute('name') || '' }
+            }));
+        });
+
+        input.addEventListener('change', () => {
+            const val = Number(input.value);
+            // Safe to commit after drag is done — no longer mid-interaction
+            this._isDragging = false;
+            this.setAttribute('value', String(val));
+            this.dispatchEvent(new CustomEvent('change', {
+                bubbles: true,
+                composed: true,
+                detail: { value: val, name: this.getAttribute('name') || '' }
+            }));
+        });
+
+        input.addEventListener('mousedown', () => { this._isDragging = true; });
+        input.addEventListener('touchstart', () => { this._isDragging = true; });
+    }
+
+    private _isDragging = false;
+
+    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+        if (oldValue === newValue) return;
+        // Never re-render while dragging or on value-only changes (live updates handle those)
+        if (name === 'value' && this._isDragging) return;
+        this.render();
+        this._bindEvents();
+    }
+}
+
+defineComponent('nc-slider', NcSlider);

package/template/src/components/core/nc-snackbar.ts

@@ -0,0 +1,230 @@
+/**
+ * NcSnackbar Component
+ *
+ * A singleton toast notification manager. Attach once to the app shell;
+ * dispatch 'nc-toast' events from anywhere to show notifications.
+ *
+ * Attributes:
+ *   - position: 'top-right'|'top-center'|'top-left'|'bottom-right'|'bottom-center'|'bottom-left'
+ *               (default: 'bottom-right')
+ *   - max: number — max visible toasts (default: 5)
+ *
+ * Programmatic API (after import):
+ *   NcSnackbar.show({ message, variant?, duration?, dismissible? })
+ *
+ * Event-based API (no import needed):
+ *   document.dispatchEvent(new CustomEvent('nc-toast', {
+ *     detail: { message: 'Saved!', variant: 'success', duration: 3000 }
+ *   }));
+ *
+ * Toast options:
+ *   - message: string
+ *   - variant: 'default'|'success'|'warning'|'danger'|'info' (default: 'default')
+ *   - duration: number — ms before auto-dismiss (default: 4000, 0 = sticky)
+ *   - dismissible: boolean — show close button (default: true)
+ *   - icon: boolean — show variant icon (default: true)
+ */
+
+import { Component, defineComponent } from '@core/component.js';
+import { dom } from '@utils/dom.js';
+
+interface ToastOptions {
+    message: string;
+    variant?: string;
+    duration?: number;
+    dismissible?: boolean;
+    icon?: boolean;
+}
+
+interface Toast extends Required<ToastOptions> {
+    id: number;
+}
+
+const ICONS: Record<string, string> = {
+    success: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="16" height="16"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>`,
+    danger:  `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="16" height="16"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/></svg>`,
+    warning: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="16" height="16"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>`,
+    info:    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="16" height="16"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/></svg>`,
+    default: '',
+};
+
+let _seq = 0;
+
+export class NcSnackbar extends Component {
+    static useShadowDOM = true;
+
+    private _toasts: Toast[] = [];
+    private _timers = new Map<number, ReturnType<typeof setTimeout>>();
+
+    static get observedAttributes() { return ['position', 'max']; }
+
+    // Static helper so other modules can call NcSnackbar.show({...})
+    static show(opts: ToastOptions) {
+        const el = dom.query<NcSnackbar>('nc-snackbar');
+        el?._add(opts);
+    }
+
+    template() {
+        const position = this.getAttribute('position') || 'bottom-right';
+        const [vPos, hPos] = position.split('-');
+
+        return `
+            <style>
+                :host {
+                    position: fixed;
+                    ${vPos === 'top' ? 'top: var(--nc-spacing-lg, 1.5rem);' : 'bottom: var(--nc-spacing-lg, 1.5rem);'}
+                    ${hPos === 'right' ? 'right: var(--nc-spacing-lg, 1.5rem);' : hPos === 'left' ? 'left: var(--nc-spacing-lg, 1.5rem);' : 'left: 50%; transform: translateX(-50%);'}
+                    z-index: 10000;
+                    display: flex;
+                    flex-direction: ${vPos === 'top' ? 'column' : 'column-reverse'};
+                    gap: var(--nc-spacing-sm);
+                    pointer-events: none;
+                    max-width: min(380px, calc(100vw - 2rem));
+                    width: max-content;
+                }
+
+                .toast {
+                    display: flex;
+                    align-items: flex-start;
+                    gap: var(--nc-spacing-sm);
+                    padding: var(--nc-spacing-sm) var(--nc-spacing-md);
+                    border-radius: var(--nc-radius-md, 8px);
+                    box-shadow: var(--nc-shadow-lg);
+                    font-family: var(--nc-font-family);
+                    font-size: var(--nc-font-size-sm);
+                    pointer-events: all;
+                    animation: nc-toast-in 0.22s ease forwards;
+                    min-width: 240px;
+                    max-width: 380px;
+                    border: 1px solid transparent;
+                }
+
+                .toast.out { animation: nc-toast-out 0.18s ease forwards; }
+
+                @keyframes nc-toast-in {
+                    from { opacity: 0; transform: ${vPos === 'top' ? 'translateY(-8px)' : 'translateY(8px)'}; }
+                    to   { opacity: 1; transform: translateY(0); }
+                }
+                @keyframes nc-toast-out {
+                    to { opacity: 0; transform: scale(0.95); }
+                }
+
+                .toast--default { background: var(--nc-bg); color: var(--nc-text); border-color: var(--nc-border); }
+                .toast--success { background: #f0fdf4; color: #166534; border-color: #86efac; }
+                .toast--danger  { background: #fef2f2; color: #991b1b; border-color: #fca5a5; }
+                .toast--warning { background: #fffbeb; color: #92400e; border-color: #fcd34d; }
+                .toast--info    { background: #eff6ff; color: #1e40af; border-color: #93c5fd; }
+
+                .toast__icon { flex-shrink: 0; margin-top: 1px; }
+                .toast__msg  { flex: 1; line-height: 1.5; }
+
+                .toast__close {
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                    padding: 0;
+                    color: inherit;
+                    opacity: 0.5;
+                    flex-shrink: 0;
+                    line-height: 1;
+                    transition: opacity var(--nc-transition-fast);
+                }
+                .toast__close:hover { opacity: 1; }
+            </style>
+            ${this._toasts.map(t => this._renderToast(t)).join('')}
+        `;
+    }
+
+    private _renderToast(t: Toast): string {
+        const icon = ICONS[t.variant] || '';
+        return `
+            <div class="toast toast--${t.variant}" data-id="${t.id}" role="alert" aria-live="polite">
+                ${icon && t.icon ? `<span class="toast__icon">${icon}</span>` : ''}
+                <span class="toast__msg">${t.message}</span>
+                ${t.dismissible ? `
+                <button class="toast__close" data-dismiss="${t.id}" type="button" aria-label="Dismiss">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none" width="12" height="12">
+                        <path d="M2 2l8 8M10 2l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+                    </svg>
+                </button>` : ''}
+            </div>`;
+    }
+
+    onMount() {
+        this._bindEvents();
+
+        // Global event listener
+        document.addEventListener('nc-toast', (e: Event) => {
+            this._add((e as CustomEvent<ToastOptions>).detail);
+        });
+    }
+
+    private _bindEvents() {
+        this.shadowRoot!.addEventListener('click', (e) => {
+            const btn = (e.target as HTMLElement).closest<HTMLElement>('[data-dismiss]');
+            if (btn) {
+                const id = Number(btn.dataset.dismiss);
+                this._dismiss(id);
+            }
+        });
+    }
+
+    _add(opts: ToastOptions) {
+        const max = Number(this.getAttribute('max') || 5);
+        const toast: Toast = {
+            id: ++_seq,
+            message: opts.message,
+            variant: opts.variant || 'default',
+            duration: opts.duration ?? 4000,
+            dismissible: opts.dismissible ?? true,
+            icon: opts.icon ?? true,
+        };
+
+        this._toasts.push(toast);
+
+        // Cap to max
+        while (this._toasts.length > max) {
+            const removed = this._toasts.shift()!;
+            this._clearTimer(removed.id);
+        }
+
+        this.render();
+        this._bindEvents();
+
+        if (toast.duration > 0) {
+            const timer = setTimeout(() => this._dismiss(toast.id), toast.duration);
+            this._timers.set(toast.id, timer);
+        }
+    }
+
+    private _dismiss(id: number) {
+        this._clearTimer(id);
+        const el = this.shadowRoot!.querySelector<HTMLElement>(`[data-id="${id}"]`);
+        if (el) {
+            el.classList.add('out');
+            el.addEventListener('animationend', () => {
+                this._toasts = this._toasts.filter(t => t.id !== id);
+                this.render();
+                this._bindEvents();
+            }, { once: true });
+        } else {
+            this._toasts = this._toasts.filter(t => t.id !== id);
+        }
+    }
+
+    private _clearTimer(id: number) {
+        const t = this._timers.get(id);
+        if (t) { clearTimeout(t); this._timers.delete(id); }
+    }
+
+    onUnmount() {
+        this._timers.forEach(t => clearTimeout(t));
+        this._timers.clear();
+    }
+
+    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+        if (oldValue !== newValue && this._mounted) this.render();
+    }
+}
+
+defineComponent('nc-snackbar', NcSnackbar);