nativecorejs 0.1.0

package/dist/components/nc-date-picker.js

@@ -0,0 +1,443 @@
+/**
+ * NcDatePicker Component
+ *
+ * Attributes:
+ *   - name: string
+ *   - value: string - ISO date string YYYY-MM-DD
+ *   - min: string - minimum selectable date (YYYY-MM-DD)
+ *   - max: string - maximum selectable date (YYYY-MM-DD)
+ *   - placeholder: string (default: 'Select date')
+ *   - disabled: boolean
+ *   - readonly: boolean
+ *   - size: 'sm'|'md'|'lg' (default: 'md')
+ *   - variant: 'default'|'filled' (default: 'default')
+ *   - first-day: 0|1 - 0=Sunday, 1=Monday (default: 0)
+ *
+ * Events:
+ *   - change: CustomEvent<{ value: string; date: Date | null; name: string }>
+ *
+ * Usage:
+ *   <nc-date-picker name="dob" value="2024-03-15"></nc-date-picker>
+ *   <nc-date-picker name="from" min="2024-01-01" max="2024-12-31"></nc-date-picker>
+ */
+import { Component, defineComponent } from '../core/component.js';
+const MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+const DAYS_SUN = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+const DAYS_MON = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
+function pad(n) { return String(n).padStart(2, '0'); }
+function toISO(d) { return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`; }
+function parseDate(s) {
+    if (!s)
+        return null;
+    const d = new Date(s + 'T00:00:00');
+    return isNaN(d.getTime()) ? null : d;
+}
+function formatDisplay(d) {
+    if (!d)
+        return '';
+    return `${MONTHS[d.getMonth()].slice(0, 3)} ${d.getDate()}, ${d.getFullYear()}`;
+}
+export class NcDatePicker extends Component {
+    static useShadowDOM = true;
+    static get observedAttributes() {
+        return ['name', 'value', 'min', 'max', 'placeholder', 'disabled', 'readonly', 'size', 'variant', 'first-day'];
+    }
+    _open = false;
+    _selected = null;
+    _viewYear = new Date().getFullYear();
+    _viewMonth = new Date().getMonth();
+    constructor() { super(); }
+    template() {
+        if (!this._mounted) {
+            this._selected = parseDate(this.getAttribute('value'));
+            if (this._selected) {
+                this._viewYear = this._selected.getFullYear();
+                this._viewMonth = this._selected.getMonth();
+            }
+        }
+        const disabled = this.hasAttribute('disabled');
+        const readonly = this.hasAttribute('readonly');
+        const placeholder = this.getAttribute('placeholder') || 'Select date';
+        const displayValue = formatDisplay(this._selected);
+        const firstDay = Number(this.getAttribute('first-day') ?? 0);
+        const dayLabels = firstDay === 1 ? DAYS_MON : DAYS_SUN;
+        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);
+                    overflow: hidden;
+                    cursor: ${disabled || readonly ? 'not-allowed' : 'pointer'};
+                    opacity: ${disabled ? '0.5' : '1'};
+                    transition: border-color var(--nc-transition-fast), box-shadow var(--nc-transition-fast);
+                }
+
+                :host([variant="filled"]) .input-wrap { background: var(--nc-bg-tertiary); border-color: transparent; }
+                .input-wrap:focus-within { border-color: var(--nc-input-focus-border); box-shadow: 0 0 0 3px rgba(16,185,129,.15); }
+
+                .input-text {
+                    flex: 1;
+                    padding: var(--nc-spacing-sm) var(--nc-spacing-md);
+                    font-size: var(--nc-font-size-base);
+                    color: ${displayValue ? 'var(--nc-text)' : 'var(--nc-text-muted)'};
+                    background: none;
+                    border: none;
+                    outline: none;
+                    cursor: inherit;
+                    white-space: nowrap;
+                    min-width: 0;
+                }
+
+                :host([size="sm"]) .input-text { font-size: var(--nc-font-size-sm); padding: var(--nc-spacing-xs) var(--nc-spacing-sm); }
+                :host([size="lg"]) .input-text { font-size: var(--nc-font-size-lg); padding: var(--nc-spacing-md) var(--nc-spacing-lg); }
+
+                .input-icon {
+                    padding: 0 var(--nc-spacing-sm);
+                    color: var(--nc-text-muted);
+                    display: flex;
+                    align-items: center;
+                    flex-shrink: 0;
+                }
+
+                .calendar {
+                    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);
+                    padding: var(--nc-spacing-md);
+                    width: 280px;
+                    display: ${this._open ? 'block' : 'none'};
+                }
+
+                .cal-header {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    margin-bottom: var(--nc-spacing-sm);
+                    gap: 4px;
+                }
+
+                .cal-nav {
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                    padding: 4px 6px;
+                    border-radius: var(--nc-radius-sm, 4px);
+                    color: var(--nc-text-muted);
+                    display: flex;
+                    transition: background var(--nc-transition-fast), color var(--nc-transition-fast);
+                }
+                .cal-nav:hover { background: var(--nc-bg-secondary); color: var(--nc-text); }
+
+                .cal-title {
+                    flex: 1;
+                    text-align: center;
+                    font-weight: var(--nc-font-weight-semibold);
+                    font-size: var(--nc-font-size-sm);
+                    color: var(--nc-text);
+                }
+
+                .cal-grid {
+                    display: grid;
+                    grid-template-columns: repeat(7, 1fr);
+                    gap: 2px;
+                }
+
+                .cal-day-label {
+                    text-align: center;
+                    font-size: 0.65rem;
+                    font-weight: var(--nc-font-weight-semibold);
+                    color: var(--nc-text-muted);
+                    padding: 2px 0;
+                    text-transform: uppercase;
+                }
+
+                .cal-day {
+                    text-align: center;
+                    font-size: var(--nc-font-size-sm);
+                    padding: 5px 2px;
+                    border-radius: var(--nc-radius-sm, 4px);
+                    cursor: pointer;
+                    color: var(--nc-text);
+                    transition: background var(--nc-transition-fast), color var(--nc-transition-fast);
+                    border: none;
+                    background: none;
+                    width: 100%;
+                    font-family: var(--nc-font-family);
+                }
+
+                .cal-day:hover:not(:disabled) { background: var(--nc-bg-secondary); }
+                .cal-day--other-month { color: var(--nc-text-muted); opacity: 0.4; }
+                .cal-day--today { font-weight: var(--nc-font-weight-semibold); border: 1px solid var(--nc-border-dark); }
+                .cal-day--selected { background: var(--nc-primary) !important; color: #fff !important; }
+                .cal-day:disabled { opacity: 0.25; cursor: not-allowed; }
+
+                .cal-footer {
+                    margin-top: var(--nc-spacing-sm);
+                    display: flex;
+                    justify-content: space-between;
+                    gap: var(--nc-spacing-xs);
+                }
+
+                .cal-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);
+                }
+                .cal-btn:hover { background: var(--nc-bg-tertiary); }
+                .cal-btn--primary { background: var(--nc-primary); color: #fff; border-color: var(--nc-primary); }
+                .cal-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="input-text">${displayValue || 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">
+                        <rect x="2" y="3" width="12" height="11" rx="2" stroke="currentColor" stroke-width="1.2"/>
+                        <path d="M5 1v3M11 1v3M2 7h12" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
+                    </svg>
+                </span>
+            </div>
+
+            <div class="calendar" role="dialog" aria-label="Date picker" aria-modal="false">
+                ${this._renderCalendar(dayLabels, firstDay)}
+            </div>
+
+            <input type="hidden" name="${this.getAttribute('name') || ''}" value="${this._selected ? toISO(this._selected) : ''}" />
+        `;
+    }
+    _renderCalendar(dayLabels, firstDay) {
+        const year = this._viewYear;
+        const month = this._viewMonth;
+        const today = new Date();
+        const min = parseDate(this.getAttribute('min'));
+        const max = parseDate(this.getAttribute('max'));
+        // Grid: fill from firstDay
+        const firstOfMonth = new Date(year, month, 1).getDay(); // 0=Sun
+        // offset to align with firstDay
+        const startOffset = (firstOfMonth - firstDay + 7) % 7;
+        const daysInMonth = new Date(year, month + 1, 0).getDate();
+        const daysInPrev = new Date(year, month, 0).getDate();
+        const cells = [];
+        for (let i = startOffset - 1; i >= 0; i--) {
+            cells.push({ date: new Date(year, month - 1, daysInPrev - i), type: 'prev' });
+        }
+        for (let d = 1; d <= daysInMonth; d++) {
+            cells.push({ date: new Date(year, month, d), type: 'curr' });
+        }
+        const remaining = 42 - cells.length;
+        for (let d = 1; d <= remaining; d++) {
+            cells.push({ date: new Date(year, month + 1, d), type: 'next' });
+        }
+        const dayLabelsHtml = dayLabels.map(l => `<span class="cal-day-label">${l}</span>`).join('');
+        const daysHtml = cells.map(({ date, type }) => {
+            const iso = toISO(date);
+            const isToday = iso === toISO(today);
+            const isSelected = this._selected && iso === toISO(this._selected);
+            const isDisabled = (min && date < min) || (max && date > max);
+            const classes = [
+                'cal-day',
+                type !== 'curr' ? 'cal-day--other-month' : '',
+                isToday ? 'cal-day--today' : '',
+                isSelected ? 'cal-day--selected' : '',
+            ].filter(Boolean).join(' ');
+            return `<button class="${classes}" data-date="${iso}" ${isDisabled ? 'disabled' : ''} type="button" tabindex="-1" aria-label="${iso}" aria-pressed="${!!isSelected}">${date.getDate()}</button>`;
+        }).join('');
+        return `
+            <div class="cal-header">
+                <button class="cal-nav" data-nav="prev-year" type="button" aria-label="Previous year">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none" width="10" height="10"><path d="M9 2L5 6l4 4M5 2L1 6l4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+                </button>
+                <button class="cal-nav" data-nav="prev-month" type="button" aria-label="Previous month">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none" width="10" height="10"><path d="M8 2L4 6l4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+                </button>
+                <span class="cal-title">${MONTHS[month]} ${year}</span>
+                <button class="cal-nav" data-nav="next-month" type="button" aria-label="Next month">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none" width="10" height="10"><path d="M4 2l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+                </button>
+                <button class="cal-nav" data-nav="next-year" type="button" aria-label="Next year">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none" width="10" height="10"><path d="M3 2l4 4-4 4M7 2l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+                </button>
+            </div>
+            <div class="cal-grid">
+                ${dayLabelsHtml}
+                ${daysHtml}
+            </div>
+            <div class="cal-footer">
+                <button class="cal-btn" data-action="today" type="button">Today</button>
+                <button class="cal-btn" data-action="clear" type="button">Clear</button>
+            </div>
+        `;
+    }
+    onMount() {
+        this._bindEvents();
+    }
+    _bindEvents() {
+        const wrap = this.$('.input-wrap');
+        const calendar = this.$('.calendar');
+        // Toggle open
+        wrap.addEventListener('click', () => {
+            if (this.hasAttribute('disabled') || this.hasAttribute('readonly'))
+                return;
+            this._open = !this._open;
+            calendar.style.display = this._open ? 'block' : 'none';
+            wrap.setAttribute('aria-expanded', String(this._open));
+        });
+        wrap.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                wrap.click();
+            }
+            if (e.key === 'Escape') {
+                this._open = false;
+                calendar.style.display = 'none';
+            }
+        });
+        // Navigation
+        calendar.addEventListener('click', (e) => {
+            const target = e.target;
+            const btn = target.closest('[data-nav]');
+            const day = target.closest('[data-date]');
+            const action = target.closest('[data-action]');
+            if (btn) {
+                e.stopPropagation();
+                switch (btn.dataset.nav) {
+                    case 'prev-month':
+                        this._viewMonth--;
+                        if (this._viewMonth < 0) {
+                            this._viewMonth = 11;
+                            this._viewYear--;
+                        }
+                        break;
+                    case 'next-month':
+                        this._viewMonth++;
+                        if (this._viewMonth > 11) {
+                            this._viewMonth = 0;
+                            this._viewYear++;
+                        }
+                        break;
+                    case 'prev-year':
+                        this._viewYear--;
+                        break;
+                    case 'next-year':
+                        this._viewYear++;
+                        break;
+                }
+                this._refreshCalendar();
+            }
+            if (day && day.dataset.date) {
+                this._select(parseDate(day.dataset.date));
+            }
+            if (action) {
+                if (action.dataset.action === 'today') {
+                    const today = new Date();
+                    this._viewYear = today.getFullYear();
+                    this._viewMonth = today.getMonth();
+                    this._select(today);
+                }
+                else if (action.dataset.action === 'clear') {
+                    this._select(null);
+                }
+            }
+        });
+        // Close on outside click
+        this._outsideClick = (e) => {
+            if (!this.contains(e.target) && !this.shadowRoot.contains(e.target)) {
+                this._open = false;
+                if (calendar)
+                    calendar.style.display = 'none';
+                if (wrap)
+                    wrap.setAttribute('aria-expanded', 'false');
+            }
+        };
+        document.addEventListener('mousedown', this._outsideClick);
+    }
+    _outsideClick = null;
+    _select(date) {
+        this._selected = date;
+        if (date) {
+            this._viewYear = date.getFullYear();
+            this._viewMonth = date.getMonth();
+        }
+        this._open = false;
+        const wrap = this.$('.input-wrap');
+        const calendar = this.$('.calendar');
+        const inputText = this.$('.input-text');
+        const hidden = this.$('input[type="hidden"]');
+        if (calendar)
+            calendar.style.display = 'none';
+        if (wrap)
+            wrap.setAttribute('aria-expanded', 'false');
+        const isoValue = date ? toISO(date) : '';
+        const displayValue = formatDisplay(date);
+        const placeholder = this.getAttribute('placeholder') || 'Select date';
+        if (inputText) {
+            inputText.textContent = displayValue || placeholder;
+            inputText.style.color = displayValue ? 'var(--nc-text)' : 'var(--nc-text-muted)';
+        }
+        if (hidden)
+            hidden.value = isoValue;
+        this.setAttribute('value', isoValue);
+        this.dispatchEvent(new CustomEvent('change', {
+            bubbles: true, composed: true,
+            detail: { value: isoValue, date, name: this.getAttribute('name') || '' }
+        }));
+    }
+    _refreshCalendar() {
+        const calendar = this.$('.calendar');
+        if (!calendar)
+            return;
+        const firstDay = Number(this.getAttribute('first-day') ?? 0);
+        const dayLabels = firstDay === 1 ? DAYS_MON : DAYS_SUN;
+        calendar.innerHTML = this._renderCalendar(dayLabels, firstDay);
+        // Re-bind the navigation click handler is already on .calendar itself, no re-bind needed
+    }
+    onUnmount() {
+        if (this._outsideClick)
+            document.removeEventListener('mousedown', this._outsideClick);
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue)
+            return;
+        if (name === 'value' && this._mounted) {
+            this._selected = parseDate(newValue);
+            if (this._selected) {
+                this._viewYear = this._selected.getFullYear();
+                this._viewMonth = this._selected.getMonth();
+            }
+            const inputText = this.$('.input-text');
+            const hidden = this.$('input[type="hidden"]');
+            const placeholder = this.getAttribute('placeholder') || 'Select date';
+            const displayValue = formatDisplay(this._selected);
+            if (inputText) {
+                inputText.textContent = displayValue || placeholder;
+                inputText.style.color = displayValue ? 'var(--nc-text)' : 'var(--nc-text-muted)';
+            }
+            if (hidden)
+                hidden.value = newValue;
+            this._refreshCalendar();
+            return;
+        }
+        if (this._mounted) {
+            this.render();
+            this._bindEvents();
+        }
+    }
+}
+defineComponent('nc-date-picker', NcDatePicker);

package/dist/components/nc-div.d.ts

@@ -0,0 +1,53 @@
+/**
+ * NcDiv Component - Responsive Container
+ *
+ * A flexible container component with built-in responsive grid/flex layouts
+ *
+ * Attributes:
+ *   - layout: 'grid' | 'flex' | 'grid-auto' | 'block' (default: 'grid-auto')
+ *   - cols: '1' | '2' | '3' | '4' (for grid layout)
+ *   - direction: 'row' | 'column' (for flex layout)
+ *   - gap: 'sm' | 'md' | 'lg' | 'xl' (default: 'md')
+ *   - width: 'full' | 'three-quarters' | 'half' | 'quarter' (default: 'full')
+ *   - justify: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' (for flex/grid)
+ *   - align: 'start' | 'center' | 'end' | 'stretch' | 'baseline' (for flex/grid)
+ *
+ * Usage:
+ *   <nc-div layout="grid-auto">
+ *     Card 1</nc-card>
+ *     Card 2</nc-card>
+ *   </nc-div>
+ *
+ *   <nc-div layout="grid" cols="3">
+ *     Card 1</nc-card>
+ *     Card 2</nc-card>
+ *     Card 3</nc-card>
+ *   </nc-div>
+ *
+ *   <nc-div layout="flex" direction="row" gap="lg" justify="center" align="center">
+ *     Flexbox Item 1</nc-card>
+ *     Flexbox Item 2</nc-card>
+ *   </nc-div>
+ */
+import { Component } from '../core/component.js';
+export declare class NcDiv extends Component {
+    static useShadowDOM: boolean;
+    static attributeOptions: {
+        layout: string[];
+        cols: string[];
+        direction: string[];
+        gap: string[];
+        width: string[];
+        justify: string[];
+        align: string[];
+    };
+    static attributeConditions: {
+        cols: (element: HTMLElement) => boolean;
+        direction: (element: HTMLElement) => boolean;
+    };
+    static get observedAttributes(): string[];
+    constructor();
+    template(): string;
+    onMount(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+}