create-nativecore 0.1.0 → 0.2.0

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

@@ -0,0 +1,281 @@
+/**
+ * NcSwitch Component
+ *
+ * NativeCore Framework Core Component
+ *
+ * Attributes:
+ *   - label: string — text label shown next to the switch
+ *   - label-position: 'left' | 'right' (default: 'right')
+ *   - name: string — form field name
+ *   - value: string — value submitted with a form (default: 'on')
+ *   - checked: boolean — on state
+ *   - disabled: boolean — disabled state
+ *   - size: 'sm' | 'md' | 'lg' (default: 'md')
+ *   - variant: 'primary' | 'success' | 'danger' (default: 'primary')
+ *
+ * Events:
+ *   - change: CustomEvent<{ checked: boolean; value: string; name: string }>
+ *
+ * Usage:
+ *   <nc-switch label="Enable notifications" name="notifs"></nc-switch>
+ *   <nc-switch label="Active" checked variant="success"></nc-switch>
+ *   <nc-switch label="Danger mode" variant="danger" size="lg"></nc-switch>
+ */
+
+import { Component, defineComponent } from '@core/component.js';
+
+export class NcSwitch extends Component {
+    static useShadowDOM = true;
+
+    static attributeOptions = {
+        variant: ['primary', 'success', 'danger'],
+        size: ['sm', 'md', 'lg'],
+        'label-position': ['left', 'right']
+    };
+
+    static get observedAttributes() {
+        return ['label', 'label-position', 'name', 'value', 'checked', 'disabled', 'size', 'variant'];
+    }
+
+    constructor() {
+        super();
+    }
+
+    template() {
+        const label = this.getAttribute('label') || '';
+        const labelPosition = this.getAttribute('label-position') || 'right';
+        const disabled = this.hasAttribute('disabled');
+
+        const labelEl = label
+            ? `<span class="label">${label}</span>`
+            : `<slot></slot>`;
+
+        const track = `
+            <span class="track">
+                <span class="thumb"></span>
+            </span>
+        `;
+
+        return `
+            <style>
+                :host {
+                    display: inline-flex;
+                    align-items: center;
+                    gap: var(--nc-spacing-sm);
+                    cursor: ${disabled ? 'not-allowed' : 'pointer'};
+                    user-select: none;
+                    font-family: var(--nc-font-family);
+                    opacity: ${disabled ? '0.5' : '1'};
+                }
+
+                .switch-wrapper {
+                    display: inline-flex;
+                    align-items: center;
+                    gap: var(--nc-spacing-sm);
+                }
+
+                input[type="checkbox"] {
+                    position: absolute;
+                    opacity: 0;
+                    width: 0;
+                    height: 0;
+                    pointer-events: none;
+                }
+
+                /* Track */
+                .track {
+                    display: inline-flex;
+                    align-items: center;
+                    flex-shrink: 0;
+                    border-radius: var(--nc-radius-full);
+                    background: var(--nc-gray-300);
+                    transition: background var(--nc-transition-fast);
+                    position: relative;
+                    box-sizing: border-box;
+                    padding: 2px;
+                }
+
+                /* Size: sm */
+                :host([size="sm"]) .track {
+                    width: 32px;
+                    height: 18px;
+                }
+
+                :host([size="sm"]) .thumb {
+                    width: 14px;
+                    height: 14px;
+                }
+
+                /* Size: md (default) */
+                .track {
+                    width: 44px;
+                    height: 24px;
+                }
+
+                .thumb {
+                    width: 20px;
+                    height: 20px;
+                }
+
+                :host([size="md"]) .track {
+                    width: 44px;
+                    height: 24px;
+                }
+
+                :host([size="md"]) .thumb {
+                    width: 20px;
+                    height: 20px;
+                }
+
+                /* Size: lg */
+                :host([size="lg"]) .track {
+                    width: 56px;
+                    height: 30px;
+                }
+
+                :host([size="lg"]) .thumb {
+                    width: 26px;
+                    height: 26px;
+                }
+
+                /* Thumb */
+                .thumb {
+                    border-radius: var(--nc-radius-full);
+                    background: var(--nc-white);
+                    box-shadow: var(--nc-shadow-sm);
+                    transition: transform var(--nc-transition-fast);
+                    transform: translateX(0);
+                    flex-shrink: 0;
+                }
+
+                /* Checked — move thumb right */
+                :host([checked]) .thumb {
+                    transform: translateX(calc(100% - 0px));
+                }
+
+                :host([size="sm"][checked]) .thumb {
+                    transform: translateX(14px);
+                }
+
+                :host([size="md"][checked]) .thumb,
+                :host([checked]:not([size])) .thumb {
+                    transform: translateX(20px);
+                }
+
+                :host([size="lg"][checked]) .thumb {
+                    transform: translateX(26px);
+                }
+
+                /* Checked track colors */
+                :host([checked]) .track {
+                    background: var(--nc-primary);
+                }
+
+                :host([variant="success"][checked]) .track {
+                    background: var(--nc-success);
+                }
+
+                :host([variant="danger"][checked]) .track {
+                    background: var(--nc-danger);
+                }
+
+                /* Hover glow */
+                :host(:not([disabled])) .track:hover {
+                    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
+                }
+
+                :host([variant="success"]:not([disabled])) .track:hover {
+                    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
+                }
+
+                :host([variant="danger"]:not([disabled])) .track:hover {
+                    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
+                }
+
+                /* Focus ring */
+                :host(:focus-visible) .track {
+                    outline: 2px solid var(--nc-primary);
+                    outline-offset: 2px;
+                }
+
+                .label {
+                    font-size: var(--nc-font-size-base);
+                    color: var(--nc-text);
+                    line-height: var(--nc-line-height-normal);
+                }
+
+                :host([size="sm"]) .label {
+                    font-size: var(--nc-font-size-sm);
+                }
+
+                :host([size="lg"]) .label {
+                    font-size: var(--nc-font-size-lg);
+                }
+            </style>
+
+            <input type="hidden"
+                name="${this.getAttribute('name') || ''}"
+                value="${this.hasAttribute('checked') ? (this.getAttribute('value') || 'on') : ''}"
+            />
+            <span class="switch-wrapper">
+                ${labelPosition === 'left' ? labelEl : ''}
+                ${track}
+                ${labelPosition !== 'left' ? labelEl : ''}
+            </span>
+        `;
+    }
+
+    onMount() {
+        if (!this.hasAttribute('tabindex')) {
+            this.setAttribute('tabindex', '0');
+        }
+        this.setAttribute('role', 'switch');
+        this.setAttribute('aria-checked', String(this.hasAttribute('checked')));
+
+        this.addEventListener('click', () => {
+            if (this.hasAttribute('disabled')) return;
+            this._toggle();
+        });
+
+        this.addEventListener('keydown', (e: KeyboardEvent) => {
+            if (e.key === ' ' || e.key === 'Enter') {
+                e.preventDefault();
+                if (!this.hasAttribute('disabled')) this._toggle();
+            }
+        });
+    }
+
+    private _toggle() {
+        if (this.hasAttribute('checked')) {
+            this.removeAttribute('checked');
+        } else {
+            this.setAttribute('checked', '');
+        }
+
+        this.setAttribute('aria-checked', String(this.hasAttribute('checked')));
+
+        this.dispatchEvent(new CustomEvent('change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                checked: this.hasAttribute('checked'),
+                value: this.getAttribute('value') || 'on',
+                name: this.getAttribute('name') || ''
+            }
+        }));
+    }
+
+    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+        if (oldValue === newValue) return;
+
+        if (name === 'checked') {
+            // Let :host([checked]) CSS handle the visual — no re-render needed
+            this.setAttribute('aria-checked', String(this.hasAttribute('checked')));
+            return;
+        }
+
+        this.render();
+    }
+}
+
+defineComponent('nc-switch', NcSwitch);

package/template/src/components/core/nc-tab-item.ts

@@ -0,0 +1,138 @@
+/**
+ * NativeCore Tab Item Component (nc-tab-item)
+ *
+ * A single content panel inside an nc-tabs container.
+ * Visibility is driven entirely by the `active` attribute set by the parent
+ * nc-tabs — no JS show/hide logic required here.
+ *
+ * Attributes:
+ *   label    — Text shown in the tab bar button (read by nc-tabs)
+ *   active   — Boolean. Present = panel visible. Managed by nc-tabs.
+ *   disabled — Boolean. Prevents the tab from being selected.
+ *
+ * Slots:
+ *   default  — Any content for this panel.
+ *
+ * Usage:
+ *   <nc-tabs>
+ *     <nc-tab-item label="Overview">...</nc-tab-item>
+ *     <nc-tab-item label="Settings">...</nc-tab-item>
+ *     <nc-tab-item label="Logs" disabled>...</nc-tab-item>
+ *   </nc-tabs>
+ *
+ * Events emitted:
+ *   (none — nc-tabs owns all interaction events)
+ */
+
+import { Component, defineComponent } from '@core/component.js';
+import { html } from '@utils/templates.js';
+
+export class NcTabItem extends Component {
+    static useShadowDOM = true;
+
+    static get observedAttributes() {
+        return ['label', 'active', 'disabled'];
+    }
+
+    template(): string {
+        return html`
+            <style>
+                :host {
+                    display: none;
+                }
+
+                :host([active]) {
+                    display: block;
+                }
+
+                /* ── Animation variants driven by data-nc-transition set by nc-tabs ── */
+                :host([active]) .panel {
+                    animation: nc-tab-fade 250ms ease both;
+                }
+
+                :host([data-nc-transition="fade"][active]) .panel {
+                    animation: nc-tab-fade 250ms ease both;
+                }
+
+                :host([data-nc-transition="slide-up"][active]) .panel {
+                    animation: nc-tab-slide-up 300ms ease both;
+                }
+
+                :host([data-nc-transition="slide-right"][active]) .panel {
+                    animation: nc-tab-slide-right 300ms ease both;
+                }
+
+                :host([data-nc-transition="slide-left"][active]) .panel {
+                    animation: nc-tab-slide-left 300ms ease both;
+                }
+
+                :host([data-nc-transition="slide-down"][active]) .panel {
+                    animation: nc-tab-slide-down 300ms ease both;
+                }
+
+                :host([data-nc-transition="none"][active]) .panel {
+                    animation: none;
+                }
+
+                /* ── Keyframes ───────────────────────────────────────────────── */
+                @keyframes nc-tab-fade {
+                    from { opacity: 0; }
+                    to   { opacity: 1; }
+                }
+
+                @keyframes nc-tab-slide-up {
+                    from { opacity: 0; transform: translateY(20px); }
+                    to   { opacity: 1; transform: translateY(0); }
+                }
+
+                @keyframes nc-tab-slide-right {
+                    from { opacity: 0; transform: translateX(-24px); }
+                    to   { opacity: 1; transform: translateX(0); }
+                }
+
+                @keyframes nc-tab-slide-left {
+                    from { opacity: 0; transform: translateX(24px); }
+                    to   { opacity: 1; transform: translateX(0); }
+                }
+
+                @keyframes nc-tab-slide-down {
+                    from { opacity: 0; transform: translateY(-20px); }
+                    to   { opacity: 1; transform: translateY(0); }
+                }
+
+                .panel {
+                    box-sizing: border-box;
+                    padding: var(--nc-spacing-lg);
+                    background: var(--nc-bg-secondary);
+                    border-radius: var(--nc-radius-lg);
+                }
+
+                @media (max-width: 640px) {
+                    .panel {
+                        padding: var(--nc-spacing-sm);
+                        border-radius: var(--nc-radius-md);
+                    }
+                }
+            </style>
+            <div class="panel"><slot></slot></div>
+        `;
+    }
+
+    /**
+     * Override to suppress re-renders — :host([active]) CSS handles show/hide,
+     * and label/disabled changes are handled by nc-tabs rebuilding its bar.
+     * A full re-render would needlessly flash slot content on every tab click.
+     */
+    attributeChangedCallback(
+        _name: string,
+        _oldValue: string | null,
+        _newValue: string | null
+    ): void {
+        // intentionally empty — CSS selectors handle all visual state
+    }
+
+    onMount(): void {}
+    onUnmount(): void {}
+}
+
+defineComponent('nc-tab-item', NcTabItem);

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

@@ -0,0 +1,279 @@
+/**
+ * NcTable Component — lightweight sortable data table
+ *
+ * Renders a table from JSON data with optional sorting, striping, compact mode,
+ * sticky header, and simple empty state. Zero dependencies.
+ *
+ * Attributes:
+ *   columns   — JSON array of column defs:
+ *               [{ key, label?, sortable?, align?, width?, format? }]
+ *               format: 'text'(default)|'number'|'currency'|'date'|'badge'
+ *   rows      — JSON array of row objects
+ *   sortable  — boolean — enable sorting on all columns unless column.sortable=false
+ *   striped   — boolean — alternating row backgrounds
+ *   compact   — boolean — reduced cell padding
+ *   sticky-header — boolean — sticky thead
+ *   empty     — empty state text (default: 'No data available')
+ *   max-height — CSS value to constrain height and enable scrolling
+ *
+ * Events:
+ *   sort  — CustomEvent<{ key: string; direction: 'asc'|'desc' }>
+ *   row-click — CustomEvent<{ row: Record<string, unknown>; index: number }>
+ *
+ * Usage:
+ *   <nc-table
+ *      sortable
+ *      striped
+ *      columns='[{"key":"name","label":"Name"},{"key":"role","label":"Role"}]'
+ *      rows='[{"name":"Alice","role":"Admin"},{"name":"Bob","role":"Editor"}]'>
+ *   </nc-table>
+ */
+import { Component, defineComponent } from '@core/component.js';
+
+type TableAlign = 'left' | 'center' | 'right';
+interface TableColumn {
+    key: string;
+    label?: string;
+    sortable?: boolean;
+    align?: TableAlign;
+    width?: string;
+    format?: 'text' | 'number' | 'currency' | 'date' | 'badge';
+}
+
+type TableRow = Record<string, unknown>;
+
+function esc(s: unknown): string {
+    return String(s ?? '')
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+}
+
+export class NcTable extends Component {
+    static useShadowDOM = true;
+
+    static get observedAttributes() {
+        return ['columns', 'rows', 'sortable', 'striped', 'compact', 'sticky-header', 'empty', 'max-height'];
+    }
+
+    private _sortKey = '';
+    private _sortDir: 'asc' | 'desc' = 'asc';
+
+    private _parseColumns(): TableColumn[] {
+        try {
+            const raw = this.getAttribute('columns') ?? '[]';
+            const cols = JSON.parse(raw) as TableColumn[];
+            return Array.isArray(cols) ? cols : [];
+        } catch {
+            return [];
+        }
+    }
+
+    private _parseRows(): TableRow[] {
+        try {
+            const raw = this.getAttribute('rows') ?? '[]';
+            const rows = JSON.parse(raw) as TableRow[];
+            return Array.isArray(rows) ? rows : [];
+        } catch {
+            return [];
+        }
+    }
+
+    private _sortedRows(rows: TableRow[], columns: TableColumn[]): TableRow[] {
+        if (!this._sortKey) return rows;
+        const col = columns.find(c => c.key === this._sortKey);
+        if (!col) return rows;
+        const dir = this._sortDir === 'asc' ? 1 : -1;
+        return [...rows].sort((a, b) => {
+            const va = a[this._sortKey];
+            const vb = b[this._sortKey];
+            if (va == null && vb == null) return 0;
+            if (va == null) return -1 * dir;
+            if (vb == null) return 1 * dir;
+            if (typeof va === 'number' && typeof vb === 'number') return (va - vb) * dir;
+            const sa = String(va).toLowerCase();
+            const sb = String(vb).toLowerCase();
+            return sa.localeCompare(sb) * dir;
+        });
+    }
+
+    private _fmt(value: unknown, col: TableColumn): string {
+        if (value == null) return '';
+        switch (col.format) {
+            case 'number':
+                return typeof value === 'number' ? String(value) : esc(value);
+            case 'currency':
+                return typeof value === 'number'
+                    ? new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(value)
+                    : esc(value);
+            case 'date': {
+                const d = new Date(String(value));
+                return isNaN(d.getTime()) ? esc(value) : d.toLocaleDateString();
+            }
+            case 'badge':
+                return `<span class="badge">${esc(value)}</span>`;
+            default:
+                return esc(value);
+        }
+    }
+
+    template() {
+        const columns      = this._parseColumns();
+        const rows         = this._sortedRows(this._parseRows(), columns);
+        const striped      = this.hasAttribute('striped');
+        const compact      = this.hasAttribute('compact');
+        const stickyHeader = this.hasAttribute('sticky-header');
+        const emptyText    = this.getAttribute('empty') ?? 'No data available';
+        const maxHeight    = this.getAttribute('max-height') ?? '';
+        const sortableAll  = this.hasAttribute('sortable');
+
+        const tableRows = rows.length === 0
+            ? `<tr><td class="empty" colspan="${Math.max(columns.length, 1)}">${esc(emptyText)}</td></tr>`
+            : rows.map((row, rowIndex) => `
+                <tr data-row-index="${rowIndex}">
+                    ${columns.map(col => {
+                        const align = col.align ?? 'left';
+                        return `<td style="text-align:${align}">${this._fmt(row[col.key], col)}</td>`;
+                    }).join('')}
+                </tr>
+            `).join('');
+
+        const headers = columns.map(col => {
+            const align    = col.align ?? 'left';
+            const sortable = sortableAll && col.sortable !== false;
+            const active   = this._sortKey === col.key;
+            const arrow    = active ? (this._sortDir === 'asc' ? '▲' : '▼') : '';
+            return `
+                <th style="text-align:${align};${col.width ? `width:${col.width};` : ''}">
+                    <button class="head-btn ${sortable ? 'is-sortable' : ''} ${active ? 'is-active' : ''}" type="button" ${sortable ? `data-sort-key="${col.key}"` : 'disabled'}>
+                        <span>${esc(col.label ?? col.key)}</span>
+                        <span class="sort-indicator">${arrow}</span>
+                    </button>
+                </th>
+            `;
+        }).join('');
+
+        return `
+            <style>
+                :host { display: block; font-family: var(--nc-font-family); }
+                .wrap {
+                    border: 1px solid var(--nc-border);
+                    border-radius: var(--nc-radius-lg);
+                    overflow: auto;
+                    background: var(--nc-bg);
+                    ${maxHeight ? `max-height:${maxHeight};` : ''}
+                }
+                table {
+                    width: 100%;
+                    border-collapse: collapse;
+                    min-width: 480px;
+                }
+                thead th {
+                    position: ${stickyHeader ? 'sticky' : 'static'};
+                    top: 0;
+                    z-index: 1;
+                    background: var(--nc-bg-secondary);
+                    border-bottom: 1px solid var(--nc-border);
+                    padding: 0;
+                    font-size: var(--nc-font-size-xs);
+                    text-transform: uppercase;
+                    letter-spacing: .04em;
+                    color: var(--nc-text-muted);
+                }
+                .head-btn {
+                    width: 100%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    gap: 8px;
+                    padding: ${compact ? '10px 12px' : '14px 16px'};
+                    background: none;
+                    border: none;
+                    cursor: default;
+                    font: inherit;
+                    color: inherit;
+                    text-align: inherit;
+                }
+                .head-btn.is-sortable { cursor: pointer; }
+                .head-btn.is-sortable:hover { background: rgba(0,0,0,.03); }
+                .head-btn.is-active { color: var(--nc-text); }
+                tbody tr {
+                    transition: background var(--nc-transition-fast);
+                    cursor: pointer;
+                }
+                tbody tr:hover { background: rgba(0,0,0,.02); }
+                ${striped ? 'tbody tr:nth-child(even) { background: var(--nc-bg-secondary); }' : ''}
+                td {
+                    padding: ${compact ? '10px 12px' : '14px 16px'};
+                    border-bottom: 1px solid var(--nc-border);
+                    font-size: var(--nc-font-size-sm);
+                    color: var(--nc-text-secondary);
+                    vertical-align: top;
+                }
+                tbody tr:last-child td { border-bottom: none; }
+                .empty {
+                    text-align: center;
+                    color: var(--nc-text-muted);
+                    padding: 28px 16px;
+                    cursor: default;
+                }
+                .badge {
+                    display: inline-flex;
+                    align-items: center;
+                    padding: 2px 8px;
+                    border-radius: 99px;
+                    background: rgba(var(--nc-primary-rgb, 99,102,241), .12);
+                    color: var(--nc-primary);
+                    font-size: var(--nc-font-size-xs);
+                    font-weight: var(--nc-font-weight-medium);
+                }
+                .sort-indicator {
+                    min-width: 1em;
+                    font-size: 10px;
+                    text-align: center;
+                    color: var(--nc-text-muted);
+                }
+            </style>
+            <div class="wrap">
+                <table role="table">
+                    <thead><tr>${headers}</tr></thead>
+                    <tbody>${tableRows}</tbody>
+                </table>
+            </div>
+        `;
+    }
+
+    onMount() {
+        this.shadowRoot!.addEventListener('click', (e) => {
+            const sortBtn = (e.target as HTMLElement).closest<HTMLElement>('[data-sort-key]');
+            if (sortBtn) {
+                const key = sortBtn.dataset.sortKey ?? '';
+                if (this._sortKey === key) this._sortDir = this._sortDir === 'asc' ? 'desc' : 'asc';
+                else { this._sortKey = key; this._sortDir = 'asc'; }
+                this.render();
+                this.dispatchEvent(new CustomEvent('sort', {
+                    detail: { key: this._sortKey, direction: this._sortDir }, bubbles: true, composed: true,
+                }));
+                return;
+            }
+
+            const row = (e.target as HTMLElement).closest<HTMLTableRowElement>('tbody tr[data-row-index]');
+            if (row) {
+                const index = parseInt(row.dataset.rowIndex ?? '-1', 10);
+                const rows  = this._sortedRows(this._parseRows(), this._parseColumns());
+                if (index >= 0 && rows[index]) {
+                    this.dispatchEvent(new CustomEvent('row-click', {
+                        detail: { row: rows[index], index }, bubbles: true, composed: true,
+                    }));
+                }
+            }
+        });
+    }
+
+    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+        if (oldValue !== newValue && this._mounted) this.render();
+    }
+}
+
+defineComponent('nc-table', NcTable);