create-nativecore 0.1.1 → 0.2.0

package/template/src/components/core/nc-time-picker.ts

@@ -0,0 +1,438 @@
+/**
+ * NcTimePicker Component
+ *
+ * Attributes:
+ *   - name: string
+ *   - value: string — HH:MM or HH:MM:SS (24-hour)
+ *   - format: '12'|'24' (default: '24')
+ *   - show-seconds: boolean — include seconds column (default: false)
+ *   - min: string — minimum time HH:MM
+ *   - max: string — maximum time HH:MM
+ *   - step: number — minute step interval (default: 1)
+ *   - placeholder: string (default: '--:--')
+ *   - disabled: boolean
+ *   - readonly: boolean
+ *   - size: 'sm'|'md'|'lg' (default: 'md')
+ *
+ * Events:
+ *   - change: CustomEvent<{ value: string; name: string }>
+ *
+ * Usage:
+ *   <nc-time-picker name="start" value="09:30"></nc-time-picker>
+ *   <nc-time-picker name="alarm" format="12" show-seconds></nc-time-picker>
+ */
+
+import { Component, defineComponent } from '@core/component.js';
+
+function pad2(n: number) { return String(n).padStart(2, '0'); }
+
+function parseTime(v: string | null): { h: number; m: number; s: number } | null {
+    if (!v) return null;
+    const parts = v.split(':').map(Number);
+    if (parts.length < 2 || parts.some(isNaN)) return null;
+    return { h: parts[0] ?? 0, m: parts[1] ?? 0, s: parts[2] ?? 0 };
+}
+
+function formatValue(h: number, m: number, s: number, showSec: boolean): string {
+    return showSec ? `${pad2(h)}:${pad2(m)}:${pad2(s)}` : `${pad2(h)}:${pad2(m)}`;
+}
+
+function to12(h: number): { display: number; ampm: 'AM' | 'PM' } {
+    return { display: h === 0 ? 12 : h > 12 ? h - 12 : h, ampm: h < 12 ? 'AM' : 'PM' };
+}
+
+export class NcTimePicker extends Component {
+    static useShadowDOM = true;
+
+    static get observedAttributes() {
+        return ['name', 'value', 'format', 'show-seconds', 'min', 'max', 'step', 'placeholder', 'disabled', 'readonly', 'size'];
+    }
+
+    private _open = false;
+    private _h = 0;
+    private _m = 0;
+    private _s = 0;
+    private _ampm: 'AM' | 'PM' = 'AM';
+    private _initialized = false;
+    private _outsideClick: ((e: MouseEvent) => void) | null = null;
+
+    constructor() { super(); }
+
+    private _initFromAttr() {
+        const t = parseTime(this.getAttribute('value'));
+        if (t) {
+            this._h = t.h;
+            this._m = t.m;
+            this._s = t.s;
+            const { ampm } = to12(t.h);
+            this._ampm = ampm;
+        }
+        this._initialized = true;
+    }
+
+    private _is12() { return this.getAttribute('format') === '12'; }
+    private _showSec() { return this.hasAttribute('show-seconds'); }
+
+    private _displayValue(): string {
+        if (!this._initialized && !this.getAttribute('value')) return '';
+        if (this._is12()) {
+            const { display } = to12(this._h);
+            return `${pad2(display)}:${pad2(this._m)}${this._showSec() ? `:${pad2(this._s)}` : ''} ${this._ampm}`;
+        }
+        return formatValue(this._h, this._m, this._s, this._showSec());
+    }
+
+    template() {
+        if (!this._initialized) this._initFromAttr();
+
+        const disabled = this.hasAttribute('disabled');
+        const readonly = this.hasAttribute('readonly');
+        const placeholder = this.getAttribute('placeholder') || '--:--';
+        const step = Number(this.getAttribute('step') || 1);
+        const is12 = this._is12();
+        const showSec = this._showSec();
+        const displayVal = this._displayValue();
+
+        // Build minute options honoring step
+        const minuteOptions = Array.from({ length: Math.ceil(60 / step) }, (_, i) => i * step).filter(m => m < 60);
+        const hourRange = is12 ? 12 : 24;
+        const hourOptions = Array.from({ length: hourRange }, (_, i) => is12 ? i + 1 : i);
+
+        return `
+            <style>
+                :host { display: block; position: relative; font-family: var(--nc-font-family); }
+
+                .input-wrap {
+                    display: flex;
+                    align-items: center;
+                    border: var(--nc-input-border);
+                    border-radius: var(--nc-input-radius);
+                    background: var(--nc-bg);
+                    cursor: ${disabled || readonly ? 'not-allowed' : 'pointer'};
+                    opacity: ${disabled ? '0.5' : '1'};
+                    transition: border-color var(--nc-transition-fast), box-shadow var(--nc-transition-fast);
+                    user-select: none;
+                }
+                .input-wrap:focus-within { border-color: var(--nc-input-focus-border); box-shadow: 0 0 0 3px rgba(16,185,129,.15); }
+
+                .display {
+                    flex: 1;
+                    padding: var(--nc-spacing-sm) var(--nc-spacing-md);
+                    font-size: var(--nc-font-size-base);
+                    color: ${displayVal ? 'var(--nc-text)' : 'var(--nc-text-muted)'};
+                    font-variant-numeric: tabular-nums;
+                }
+
+                :host([size="sm"]) .display { font-size: var(--nc-font-size-sm); padding: var(--nc-spacing-xs) var(--nc-spacing-sm); }
+                :host([size="lg"]) .display { font-size: var(--nc-font-size-lg); padding: var(--nc-spacing-md); }
+
+                .input-icon {
+                    padding: 0 var(--nc-spacing-sm);
+                    color: var(--nc-text-muted);
+                    display: flex;
+                    flex-shrink: 0;
+                }
+
+                .panel {
+                    position: absolute;
+                    top: calc(100% + 6px);
+                    left: 0;
+                    z-index: 500;
+                    background: var(--nc-bg);
+                    border: 1px solid var(--nc-border);
+                    border-radius: var(--nc-radius-md, 8px);
+                    box-shadow: var(--nc-shadow-lg);
+                    display: ${this._open ? 'flex' : 'none'};
+                    flex-direction: column;
+                    overflow: hidden;
+                    min-width: 240px;
+                }
+
+                .columns {
+                    display: flex;
+                    gap: 0;
+                    max-height: 220px;
+                }
+
+                .col {
+                    flex: 1;
+                    overflow-y: auto;
+                    scroll-snap-type: y mandatory;
+                    border-right: 1px solid var(--nc-border);
+                    scrollbar-width: thin;
+                }
+                .col:last-child { border-right: none; }
+
+                .col-header {
+                    position: sticky;
+                    top: 0;
+                    background: var(--nc-bg-secondary);
+                    font-size: var(--nc-font-size-xs);
+                    font-weight: var(--nc-font-weight-semibold);
+                    color: var(--nc-text-muted);
+                    text-transform: uppercase;
+                    letter-spacing: 0.05em;
+                    padding: 5px var(--nc-spacing-sm);
+                    text-align: center;
+                    z-index: 1;
+                }
+
+                .col-item {
+                    padding: 7px var(--nc-spacing-sm);
+                    text-align: center;
+                    font-size: var(--nc-font-size-sm);
+                    font-variant-numeric: tabular-nums;
+                    cursor: pointer;
+                    color: var(--nc-text);
+                    scroll-snap-align: start;
+                    transition: background var(--nc-transition-fast);
+                }
+                .col-item:hover { background: var(--nc-bg-secondary); }
+                .col-item.selected { background: var(--nc-primary); color: #fff; font-weight: var(--nc-font-weight-semibold); }
+                .col-item:disabled, .col-item[disabled] { opacity: 0.3; pointer-events: none; }
+
+                .panel-footer {
+                    display: flex;
+                    justify-content: space-between;
+                    gap: var(--nc-spacing-xs);
+                    padding: var(--nc-spacing-sm);
+                    border-top: 1px solid var(--nc-border);
+                }
+
+                .panel-btn {
+                    flex: 1;
+                    padding: 5px;
+                    border-radius: var(--nc-radius-sm, 4px);
+                    font-size: var(--nc-font-size-xs);
+                    font-family: var(--nc-font-family);
+                    cursor: pointer;
+                    border: 1px solid var(--nc-border);
+                    background: var(--nc-bg-secondary);
+                    color: var(--nc-text);
+                    transition: background var(--nc-transition-fast);
+                }
+                .panel-btn:hover { background: var(--nc-bg-tertiary); }
+                .panel-btn--primary { background: var(--nc-primary); color: #fff; border-color: var(--nc-primary); }
+                .panel-btn--primary:hover { opacity: 0.9; }
+            </style>
+
+            <div class="input-wrap" tabindex="${disabled ? '-1' : '0'}" role="button" aria-haspopup="dialog" aria-expanded="${this._open}">
+                <span class="display">${displayVal || placeholder}</span>
+                <span class="input-icon">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" width="14" height="14">
+                        <circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.2"/>
+                        <path d="M8 5v3.5l2 1.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+            </div>
+
+            <div class="panel" role="dialog">
+                <div class="columns">
+                    <!-- Hours -->
+                    <div class="col" data-col="hour">
+                        <div class="col-header">HH</div>
+                        ${hourOptions.map(h => {
+                            const isSelected = is12 ? to12(this._h).display === h : this._h === h;
+                            return `<div class="col-item${isSelected ? ' selected' : ''}" data-col="hour" data-value="${h}">${pad2(h)}</div>`;
+                        }).join('')}
+                    </div>
+                    <!-- Minutes -->
+                    <div class="col" data-col="minute">
+                        <div class="col-header">MM</div>
+                        ${minuteOptions.map(m => {
+                            const isSelected = this._m === m;
+                            return `<div class="col-item${isSelected ? ' selected' : ''}" data-col="minute" data-value="${m}">${pad2(m)}</div>`;
+                        }).join('')}
+                    </div>
+                    ${showSec ? `
+                    <!-- Seconds -->
+                    <div class="col" data-col="second">
+                        <div class="col-header">SS</div>
+                        ${Array.from({ length: 60 }, (_, i) => i).map(s => {
+                            const isSelected = this._s === s;
+                            return `<div class="col-item${isSelected ? ' selected' : ''}" data-col="second" data-value="${s}">${pad2(s)}</div>`;
+                        }).join('')}
+                    </div>` : ''}
+                    ${is12 ? `
+                    <!-- AM/PM -->
+                    <div class="col" data-col="ampm">
+                        <div class="col-header">AM/PM</div>
+                        <div class="col-item${this._ampm === 'AM' ? ' selected' : ''}" data-col="ampm" data-value="AM">AM</div>
+                        <div class="col-item${this._ampm === 'PM' ? ' selected' : ''}" data-col="ampm" data-value="PM">PM</div>
+                    </div>` : ''}
+                </div>
+                <div class="panel-footer">
+                    <button class="panel-btn" data-action="clear" type="button">Clear</button>
+                    <button class="panel-btn" data-action="now" type="button">Now</button>
+                    <button class="panel-btn panel-btn--primary" data-action="apply" type="button">Apply</button>
+                </div>
+            </div>
+
+            <input type="hidden" name="${this.getAttribute('name') || ''}" value="${this._initialized ? formatValue(this._h, this._m, this._s, showSec) : ''}" />
+        `;
+    }
+
+    onMount() {
+        this._bindEvents();
+        this._scrollToSelected();
+    }
+
+    private _bindEvents() {
+        const wrap = this.$<HTMLElement>('.input-wrap')!;
+        const panel = this.$<HTMLElement>('.panel')!;
+
+        wrap.addEventListener('click', () => {
+            if (this.hasAttribute('disabled') || this.hasAttribute('readonly')) return;
+            this._open = !this._open;
+            panel.style.display = this._open ? 'flex' : 'none';
+            wrap.setAttribute('aria-expanded', String(this._open));
+            if (this._open) this._scrollToSelected();
+        });
+
+        wrap.addEventListener('keydown', (e: KeyboardEvent) => {
+            if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); wrap.click(); }
+            if (e.key === 'Escape') { this._open = false; panel.style.display = 'none'; }
+        });
+
+        // Column item clicks
+        panel.addEventListener('click', (e) => {
+            const item = (e.target as HTMLElement).closest<HTMLElement>('[data-col][data-value]');
+            const action = (e.target as HTMLElement).closest<HTMLElement>('[data-action]');
+
+            if (item) {
+                const col = item.dataset.col!;
+                const val = item.dataset.value!;
+                this._handleColSelect(col, val);
+                // Update active highlight in column
+                const colEl = panel.querySelector<HTMLElement>(`[data-col="${col}"].col`);
+                colEl?.querySelectorAll<HTMLElement>('.col-item').forEach(el => {
+                    el.classList.toggle('selected', el.dataset.value === val);
+                });
+            }
+
+            if (action) {
+                switch (action.dataset.action) {
+                    case 'clear': this._clear(); break;
+                    case 'now': this._setNow(); break;
+                    case 'apply': this._apply(); break;
+                }
+            }
+        });
+
+        // Outside click
+        this._outsideClick = (e: MouseEvent) => {
+            if (!this.contains(e.target as Node) && !this.shadowRoot!.contains(e.target as Node)) {
+                this._open = false;
+                if (panel) panel.style.display = 'none';
+                if (wrap) wrap.setAttribute('aria-expanded', 'false');
+            }
+        };
+        document.addEventListener('mousedown', this._outsideClick);
+    }
+
+    private _handleColSelect(col: string, val: string) {
+        switch (col) {
+            case 'hour': {
+                const n = Number(val);
+                if (this._is12()) {
+                    this._h = this._ampm === 'AM'
+                        ? (n === 12 ? 0 : n)
+                        : (n === 12 ? 12 : n + 12);
+                } else {
+                    this._h = n;
+                }
+                break;
+            }
+            case 'minute': this._m = Number(val); break;
+            case 'second': this._s = Number(val); break;
+            case 'ampm': {
+                this._ampm = val as 'AM' | 'PM';
+                if (val === 'AM' && this._h >= 12) this._h -= 12;
+                if (val === 'PM' && this._h < 12)  this._h += 12;
+                break;
+            }
+        }
+        this._updateDisplay();
+    }
+
+    private _updateDisplay() {
+        const wrap = this.$<HTMLElement>('.display');
+        const hidden = this.$<HTMLInputElement>('input[type="hidden"]');
+        const val = this._displayValue();
+        if (wrap) {
+            wrap.textContent = val || (this.getAttribute('placeholder') || '--:--');
+            wrap.style.color = val ? 'var(--nc-text)' : 'var(--nc-text-muted)';
+        }
+        if (hidden) hidden.value = formatValue(this._h, this._m, this._s, this._showSec());
+    }
+
+    private _apply() {
+        this._initialized = true;
+        const value = formatValue(this._h, this._m, this._s, this._showSec());
+        this.setAttribute('value', value);
+        this._open = false;
+        const panel = this.$<HTMLElement>('.panel');
+        const wrap = this.$<HTMLElement>('.input-wrap');
+        if (panel) panel.style.display = 'none';
+        if (wrap) wrap.setAttribute('aria-expanded', 'false');
+        this._updateDisplay();
+        this.dispatchEvent(new CustomEvent('change', {
+            bubbles: true, composed: true,
+            detail: { value, name: this.getAttribute('name') || '' }
+        }));
+    }
+
+    private _clear() {
+        this._h = 0; this._m = 0; this._s = 0; this._ampm = 'AM';
+        this._initialized = false;
+        this.removeAttribute('value');
+        this._open = false;
+        const panel = this.$<HTMLElement>('.panel');
+        if (panel) panel.style.display = 'none';
+        this._updateDisplay();
+        const wrap = this.$<HTMLElement>('.display');
+        if (wrap) wrap.style.color = 'var(--nc-text-muted)';
+        this.dispatchEvent(new CustomEvent('change', {
+            bubbles: true, composed: true,
+            detail: { value: '', name: this.getAttribute('name') || '' }
+        }));
+    }
+
+    private _setNow() {
+        const now = new Date();
+        this._h = now.getHours();
+        this._m = now.getMinutes();
+        this._s = now.getSeconds();
+        this._ampm = this._h < 12 ? 'AM' : 'PM';
+        this._initialized = true;
+        this.render();
+        this._bindEvents();
+        this._scrollToSelected();
+    }
+
+    private _scrollToSelected() {
+        requestAnimationFrame(() => {
+            this.shadowRoot!.querySelectorAll<HTMLElement>('.col').forEach(col => {
+                const selected = col.querySelector<HTMLElement>('.selected');
+                if (selected) selected.scrollIntoView({ block: 'nearest' });
+            });
+        });
+    }
+
+    onUnmount() {
+        if (this._outsideClick) document.removeEventListener('mousedown', this._outsideClick);
+    }
+
+    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+        if (oldValue === newValue) return;
+        if (name === 'value' && this._mounted) {
+            const t = parseTime(newValue);
+            if (t) { this._h = t.h; this._m = t.m; this._s = t.s; this._ampm = to12(t.h).ampm; this._initialized = true; }
+            this._updateDisplay();
+            return;
+        }
+        if (this._mounted) { this.render(); this._bindEvents(); }
+    }
+}
+
+defineComponent('nc-time-picker', NcTimePicker);

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

@@ -0,0 +1,186 @@
+/**
+ * NcTimeline Component — vertical event timeline
+ *
+ * Attributes:
+ *   align  — 'left'(default)|'right'|'alternate' — which side the content appears
+ *   size   — 'sm'|'md'(default)|'lg' — dot and line scale
+ *   dense  — boolean — reduce spacing
+ *
+ * Slots: nc-timeline-item elements
+ *
+ * ---
+ *
+ * NcTimelineItem Component — single timeline event
+ *
+ * Attributes:
+ *   color    — dot color preset: 'primary'(default)|'success'|'warning'|'danger'|'neutral'
+ *              OR any valid CSS color string
+ *   icon     — small icon inside the dot (same icon names as nc-nav-item)
+ *   title    — event heading
+ *   time     — timestamp / relative time string (shown muted)
+ *   status   — 'completed'|'active'|'pending'|'error' (sets color automatically)
+ *   no-line  — boolean — hide the connector line (usually set on last item)
+ *
+ * Slots:
+ *   icon     — custom dot content
+ *   title    — override title
+ *   time     — time content
+ *   (default)— event body / description
+ *
+ * Usage:
+ *   <nc-timeline>
+ *     <nc-timeline-item title="Order placed" time="2h ago" status="completed">
+ *       Your order #4521 was received.
+ *     </nc-timeline-item>
+ *     <nc-timeline-item title="Processing" status="active">
+ *       We're preparing your items.
+ *     </nc-timeline-item>
+ *     <nc-timeline-item title="Delivery" status="pending" no-line>
+ *       Estimated 2-3 business days.
+ *     </nc-timeline-item>
+ *   </nc-timeline>
+ */
+import { Component, defineComponent } from '@core/component.js';
+
+const STATUS_COLORS: Record<string, string> = {
+    completed: 'var(--nc-success)',
+    active:    'var(--nc-primary)',
+    pending:   'var(--nc-text-muted)',
+    error:     'var(--nc-danger)',
+};
+
+const SMALL_ICONS: Record<string, string> = {
+    check:   `<polyline points="20 6 9 17 4 12"/>`,
+    x:       `<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>`,
+    star:    `<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>`,
+    info:    `<circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/>`,
+    alert:   `<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/>`,
+};
+const iconSvg = (p: string, sz = 10) =>
+    `<svg xmlns="http://www.w3.org/2000/svg" width="${sz}" height="${sz}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">${p}</svg>`;
+
+// ── NcTimelineItem ────────────────────────────────────────────────────────────
+
+export class NcTimelineItem extends Component {
+    static useShadowDOM = true;
+
+    static get observedAttributes() { return ['color', 'status', 'active', 'no-line']; }
+
+    template() {
+        const title   = this.getAttribute('title') ?? '';
+        const time    = this.getAttribute('time') ?? '';
+        const status  = this.getAttribute('status') ?? '';
+        const iconKey = this.getAttribute('icon') ?? '';
+        const noLine  = this.hasAttribute('no-line');
+        const color   = this.getAttribute('color')
+            ?? STATUS_COLORS[status]
+            ?? 'var(--nc-primary)';
+
+        const dotContent = SMALL_ICONS[iconKey]
+            ? iconSvg(SMALL_ICONS[iconKey], 10)
+            : (status === 'completed' ? iconSvg(SMALL_ICONS.check, 10) : '');
+
+        const isActive = status === 'active';
+        const dotSz   = isActive ? 14 : 12;
+
+        return `
+            <style>
+                :host { display: flex; font-family: var(--nc-font-family); }
+                .col-dot {
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    flex-shrink: 0;
+                    width: 28px;
+                    margin-right: var(--nc-spacing-md);
+                }
+                .dot {
+                    width: ${dotSz}px;
+                    height: ${dotSz}px;
+                    border-radius: 50%;
+                    background: ${color};
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    flex-shrink: 0;
+                    color: #fff;
+                    ${isActive ? `box-shadow: 0 0 0 4px rgba(0,0,0,.1), 0 0 0 3px ${color}33;` : ''}
+                    margin-top: 4px;
+                }
+                .line {
+                    flex: 1;
+                    width: 2px;
+                    background: var(--nc-border);
+                    margin-top: 4px;
+                    min-height: 24px;
+                    display: ${noLine ? 'none' : 'block'};
+                }
+                .content {
+                    flex: 1;
+                    padding-bottom: ${noLine ? '0' : 'var(--nc-spacing-lg)'};
+                    min-width: 0;
+                }
+                .header {
+                    display: flex;
+                    align-items: baseline;
+                    justify-content: space-between;
+                    gap: var(--nc-spacing-sm);
+                    margin-bottom: 4px;
+                }
+                .title {
+                    font-size: var(--nc-font-size-sm);
+                    font-weight: var(--nc-font-weight-semibold);
+                    color: var(--nc-text);
+                    margin: 0;
+                }
+                .time {
+                    font-size: var(--nc-font-size-xs);
+                    color: var(--nc-text-muted);
+                    white-space: nowrap;
+                    flex-shrink: 0;
+                }
+                .body {
+                    font-size: var(--nc-font-size-sm);
+                    color: var(--nc-text-secondary);
+                    line-height: var(--nc-line-height-relaxed, 1.65);
+                }
+            </style>
+            <div class="col-dot">
+                <div class="dot">
+                    <slot name="icon">${dotContent}</slot>
+                </div>
+                <div class="line"></div>
+            </div>
+            <div class="content">
+                <div class="header">
+                    <p class="title"><slot name="title">${title}</slot></p>
+                    ${time ? `<span class="time"><slot name="time">${time}</slot></span>` : '<slot name="time"></slot>'}
+                </div>
+                <div class="body"><slot></slot></div>
+            </div>
+        `;
+    }
+
+    attributeChangedCallback(n: string, o: string, v: string) {
+        if (o !== v && this._mounted) this.render();
+    }
+}
+
+defineComponent('nc-timeline-item', NcTimelineItem);
+
+// ── NcTimeline ────────────────────────────────────────────────────────────────
+
+export class NcTimeline extends Component {
+    static useShadowDOM = true;
+
+    template() {
+        return `
+            <style>
+                :host { display: block; padding: var(--nc-spacing-sm) 0; }
+            </style>
+            <slot></slot>
+        `;
+    }
+}
+
+defineComponent('nc-timeline', NcTimeline);