create-nativecore 0.1.1 → 0.2.0

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

@@ -0,0 +1,376 @@
+/**
+ * NativeCore Menu Component (nc-menu)
+ *
+ * A vertical command menu. Place nc-menu-item elements inside as direct children.
+ * Supports grouped items (via nc-menu-divider or label attribute), a searchable
+ * filter box, and several visual variants.
+ *
+ * Attributes:
+ *   variant     — 'default' | 'compact' | 'inset' | 'bordered'  (default: 'default')
+ *   searchable  — Boolean. Adds a filter input at the top that hides non-matching items.
+ *   label       — Optional header label shown above the items.
+ *   width       — CSS width value, e.g. '220px'. Defaults to 'fit-content'.
+ *   auto-active — Boolean. Automatically moves the `active` attribute to whichever
+ *                  item was last selected or navigated to. For nc-a items, also
+ *                  matches the current path on mount.
+ *
+ * Slots:
+ *   default    — nc-menu-item (and nc-menu-divider) elements.
+ *
+ * Events emitted:
+ *   nc-menu-select — { item: HTMLElement, label: string } — fires when any
+ *                    nc-menu-item inside emits nc-select.
+ *
+ * Keyboard:
+ *   ArrowDown / ArrowUp — move focus between items.
+ *   Home / End          — jump to first / last item.
+ *   Escape              — blur the menu.
+ *
+ * Usage:
+ *   <nc-menu label="Actions">
+ *     <nc-menu-item icon="/icons/edit.svg">Edit</nc-menu-item>
+ *     <nc-menu-item icon="/icons/copy.svg">Duplicate</nc-menu-item>
+ *     <nc-menu-item danger icon="/icons/trash.svg">Delete</nc-menu-item>
+ *   </nc-menu>
+ *
+ *   <nc-menu searchable variant="bordered" width="260px">
+ *     <nc-menu-item>Dashboard</nc-menu-item>
+ *     <nc-menu-item active>Components</nc-menu-item>
+ *     <nc-menu-item>Settings</nc-menu-item>
+ *   </nc-menu>
+ *
+ *   <!-- Navigation sidebar: nc-a items, active managed automatically -->
+ *   <nc-menu auto-active variant="inset" width="220px">
+ *     <nc-a href="/dashboard" variant="ghost">Dashboard</nc-a>
+ *     <nc-a href="/components" variant="ghost">Components</nc-a>
+ *     <nc-a href="/settings" variant="ghost">Settings</nc-a>
+ *   </nc-menu>
+ */
+
+import { Component, defineComponent } from '@core/component.js';
+import { html } from '@utils/templates.js';
+
+export class NcMenu extends Component {
+    static useShadowDOM = true;
+
+    static attributeOptions = {
+        variant: ['default', 'compact', 'inset', 'bordered'],
+    };
+
+    static get observedAttributes() {
+        return ['variant', 'searchable', 'label', 'width', 'auto-active'];
+    }
+
+    private _onSlotChange: (() => void) | null = null;
+    private _onSelect: ((e: Event) => void) | null = null;
+    private _onNavigate: ((e: Event) => void) | null = null;
+    private _onKeydown: ((e: Event) => void) | null = null;
+    private _onSearchInput: ((e: Event) => void) | null = null;
+
+    template(): string {
+        const label      = this.getAttribute('label') || '';
+        const searchable = this.hasAttribute('searchable');
+        const width      = this.getAttribute('width') || 'fit-content';
+
+        const labelHTML = label
+            ? `<div class="menu__label">${label}</div>`
+            : '';
+
+        const searchHTML = searchable
+            ? `<div class="menu__search-wrap">
+                   <svg class="menu__search-icon" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                       <circle cx="8.5" cy="8.5" r="5.5" stroke="currentColor" stroke-width="1.5"/>
+                       <path d="M15 15l-3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+                   </svg>
+                   <input class="menu__search" type="text" placeholder="Search..." autocomplete="off" spellcheck="false" />
+               </div>`
+            : '';
+
+        return html`
+            <style>
+                :host {
+                    display: inline-block;
+                    width: ${width};
+                    font-family: var(--nc-font-family);
+                    box-sizing: border-box;
+                }
+
+                .menu {
+                    background: var(--nc-bg);
+                    border-radius: var(--nc-radius-lg);
+                    padding: var(--nc-spacing-xs);
+                    min-width: 180px;
+                    box-sizing: border-box;
+                    width: 100%;
+                }
+
+                /* ── Variants ──────────────────────────────────────────────── */
+                :host([variant="default"]) .menu,
+                :host(:not([variant])) .menu {
+                    background: var(--nc-bg);
+                    padding: var(--nc-spacing-xs);
+                }
+
+                :host([variant="compact"]) .menu {
+                    padding: 2px;
+                }
+
+                :host([variant="compact"]) ::slotted(nc-menu-item) {
+                    --nc-menu-item-py: var(--nc-spacing-xs);
+                }
+
+                :host([variant="inset"]) .menu {
+                    background: var(--nc-bg-secondary);
+                    padding: var(--nc-spacing-sm);
+                    border-radius: var(--nc-radius-xl);
+                }
+
+                :host([variant="bordered"]) .menu {
+                    background: var(--nc-bg);
+                    border: 1px solid var(--nc-border);
+                    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+                    padding: var(--nc-spacing-xs);
+                }
+
+                /* ── Label ─────────────────────────────────────────────────── */
+                .menu__label {
+                    font-size: var(--nc-font-size-xs, 0.7rem);
+                    font-weight: 700;
+                    text-transform: uppercase;
+                    letter-spacing: 0.08em;
+                    color: var(--nc-text-secondary);
+                    padding: var(--nc-spacing-xs) var(--nc-spacing-md) var(--nc-spacing-xs);
+                    margin-bottom: 2px;
+                }
+
+                /* ── Search ────────────────────────────────────────────────── */
+                .menu__search-wrap {
+                    position: relative;
+                    margin-bottom: var(--nc-spacing-xs);
+                }
+
+                .menu__search-icon {
+                    position: absolute;
+                    left: 10px;
+                    top: 50%;
+                    transform: translateY(-50%);
+                    width: 14px;
+                    height: 14px;
+                    color: var(--nc-text-secondary);
+                    pointer-events: none;
+                }
+
+                .menu__search {
+                    width: 100%;
+                    box-sizing: border-box;
+                    padding: var(--nc-spacing-xs) var(--nc-spacing-sm) var(--nc-spacing-xs) 30px;
+                    font-family: var(--nc-font-family);
+                    font-size: var(--nc-font-size-sm);
+                    background: var(--nc-bg-secondary);
+                    border: 1px solid var(--nc-border);
+                    border-radius: var(--nc-radius-md);
+                    color: var(--nc-text);
+                    outline: none;
+                    transition: border-color var(--nc-transition-fast);
+                }
+
+                .menu__search:focus {
+                    border-color: var(--nc-primary);
+                }
+
+                .menu__search::placeholder {
+                    color: var(--nc-text-secondary);
+                    opacity: 0.6;
+                }
+
+                /* ── Empty state ───────────────────────────────────────────── */
+                .menu__empty {
+                    display: none;
+                    font-size: var(--nc-font-size-sm);
+                    color: var(--nc-text-secondary);
+                    padding: var(--nc-spacing-md);
+                    text-align: center;
+                    opacity: 0.6;
+                }
+
+                .menu__empty.visible {
+                    display: block;
+                }
+            </style>
+            <div class="menu" role="menu">
+                ${labelHTML}
+                ${searchHTML}
+                <slot></slot>
+                <div class="menu__empty">No results</div>
+            </div>
+        `;
+    }
+
+    onMount(): void {
+        // Delegate nc-select events from nc-menu-item children
+        this._onSelect = (e: Event) => {
+            const item = e.target as HTMLElement;
+            if (item.tagName.toLowerCase() !== 'nc-menu-item') return;
+            const label = item.textContent?.trim() ?? '';
+            this.emitEvent('nc-menu-select', { item, label });
+            // Always track active for nc-menu-item — no opt-in required
+            this._setActive(item);
+        };
+        this.addEventListener('nc-select', this._onSelect);
+
+        // Delegate nc-navigate events from nc-a children
+        this._onNavigate = (e: Event) => {
+            const item = e.target as HTMLElement;
+            if (item.tagName.toLowerCase() !== 'nc-a') return;
+            if (this.hasAttribute('auto-active')) this._setActive(item);
+        };
+        this.addEventListener('nc-navigate', this._onNavigate);
+
+        // Arrow key navigation (supports both nc-menu-item and nc-a)
+        this._onKeydown = (e: Event) => {
+            const ke = e as KeyboardEvent;
+            if (!['ArrowDown', 'ArrowUp', 'Home', 'End', 'Escape'].includes(ke.key)) return;
+            ke.preventDefault();
+
+            const items = this._getEnabledItems();
+            if (!items.length) return;
+
+            const focused = document.activeElement;
+            const idx = items.findIndex(el => el === focused || el.shadowRoot?.contains(focused));
+
+            if (ke.key === 'Escape') { (focused as HTMLElement)?.blur?.(); return; }
+            if (ke.key === 'Home')   { this._focusItem(items[0]); return; }
+            if (ke.key === 'End')    { this._focusItem(items[items.length - 1]); return; }
+
+            const next = ke.key === 'ArrowDown'
+                ? items[Math.min(idx + 1, items.length - 1)]
+                : items[Math.max(idx - 1, 0)];
+            this._focusItem(next);
+        };
+        this.addEventListener('keydown', this._onKeydown);
+
+        // Auto-active: match current path for nc-a items on mount
+        if (this.hasAttribute('auto-active')) {
+            Promise.resolve().then(() => this._syncActiveFromPath());
+        }
+
+        // Search filtering
+        if (this.hasAttribute('searchable')) {
+            this._attachSearch();
+        }
+
+        // Re-sync search + path when slot contents change
+        const slot = this.$<HTMLSlotElement>('slot');
+        if (slot) {
+            this._onSlotChange = () => {
+                if (this.hasAttribute('searchable')) this._filterItems('');
+                if (this.hasAttribute('auto-active')) this._syncActiveFromPath();
+            };
+            slot.addEventListener('slotchange', this._onSlotChange);
+        }
+    }
+
+    onUnmount(): void {
+        if (this._onSelect)    this.removeEventListener('nc-select', this._onSelect);
+        if (this._onNavigate)  this.removeEventListener('nc-navigate', this._onNavigate);
+        if (this._onKeydown)   this.removeEventListener('keydown', this._onKeydown);
+        const slot = this.$<HTMLSlotElement>('slot');
+        if (slot && this._onSlotChange) slot.removeEventListener('slotchange', this._onSlotChange);
+        this._onSelect     = null;
+        this._onNavigate   = null;
+        this._onKeydown    = null;
+        this._onSlotChange = null;
+        this._onSearchInput = null;
+    }
+
+    attributeChangedCallback(
+        _name: string,
+        oldValue: string | null,
+        newValue: string | null
+    ): void {
+        if (this._mounted && oldValue !== newValue) this.render();
+    }
+
+    // ─── Private ────────────────────────────────────────────────────────────────
+
+    private _getEnabledItems(): HTMLElement[] {
+        return Array.from(
+            this.querySelectorAll<HTMLElement>(
+                'nc-menu-item:not([disabled]), nc-a:not([disabled])'
+            )
+        );
+    }
+
+    private _focusItem(item: HTMLElement): void {
+        const tag = item.tagName.toLowerCase();
+        const selector = tag === 'nc-a' ? 'a' : '[role="menuitem"]';
+        item.shadowRoot?.querySelector<HTMLElement>(selector)?.focus();
+    }
+
+    /** Moves `active` to `target`, removes it from all siblings. */
+    private _setActive(target: HTMLElement): void {
+        const all = Array.from(
+            this.querySelectorAll<HTMLElement>('nc-menu-item, nc-a')
+        );
+        all.forEach(el => {
+            if (el === target) {
+                el.setAttribute('active', '');
+            } else {
+                el.removeAttribute('active');
+            }
+        });
+    }
+
+    /**
+     * For nc-a items with auto-active: set active on the item whose href
+     * matches the current pathname. Handles exact and prefix matches.
+     */
+    private _syncActiveFromPath(): void {
+        const path = window.location.pathname;
+        const links = Array.from(this.querySelectorAll<HTMLElement>('nc-a[href]'));
+        if (!links.length) return;
+
+        // Prefer exact match, fall back to longest prefix
+        let best: HTMLElement | null = null;
+        let bestLen = 0;
+
+        links.forEach(link => {
+            const href = link.getAttribute('href') ?? '';
+            if (href === path) { best = link; bestLen = Infinity; return; }
+            if (bestLen < Infinity && path.startsWith(href) && href.length > bestLen) {
+                best = link;
+                bestLen = href.length;
+            }
+        });
+
+        if (best) this._setActive(best);
+    }
+
+    private _attachSearch(): void {
+        const input = this.$<HTMLInputElement>('.menu__search');
+        if (!input) return;
+
+        this._onSearchInput = () => this._filterItems(input.value);
+        input.addEventListener('input', this._onSearchInput);
+    }
+
+    private _filterItems(query: string): void {
+        const q = query.toLowerCase().trim();
+        const items = Array.from(
+            this.querySelectorAll<HTMLElement>('nc-menu-item, nc-a')
+        );
+        let visible = 0;
+
+        items.forEach(item => {
+            const text = (item.textContent ?? '').toLowerCase();
+            const show = !q || text.includes(q);
+            item.style.display = show ? '' : 'none';
+            if (show) visible++;
+        });
+
+        const empty = this.$<HTMLElement>('.menu__empty');
+        if (empty) empty.classList.toggle('visible', visible === 0);
+    }
+}
+
+defineComponent('nc-menu', NcMenu);

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

@@ -0,0 +1,238 @@
+/**
+ * NcModal Component
+ *
+ * Attributes:
+ *   - open: boolean — visible state
+ *   - size: 'sm'|'md'|'lg'|'xl'|'full' (default: 'md')
+ *   - no-close-btn: boolean — hide header × button
+ *   - close-on-overlay: boolean — click backdrop to close (default: true)
+ *   - no-overlay: boolean — skip backdrop rendering
+ *   - sticky-header: boolean — header doesn't scroll with body
+ *   - sticky-footer: boolean — footer stays at bottom
+ *
+ * Slots:
+ *   - header — modal title / header area
+ *   - (default) — modal body
+ *   - footer — action buttons area
+ *
+ * Events:
+ *   - open:  CustomEvent — after modal opens
+ *   - close: CustomEvent — after modal closes
+ *
+ * Static API:
+ *   NcModal.open(id)  — open a modal by id
+ *   NcModal.close(id) — close a modal by id
+ *
+ * Usage:
+ *   <nc-modal id="confirm-modal">
+ *     <span slot="header">Confirm Delete</span>
+ *     <p>Are you sure?</p>
+ *     <div slot="footer">
+ *       <nc-button variant="ghost" id="cancel-btn">Cancel</nc-button>
+ *       <nc-button variant="danger" id="confirm-btn">Delete</nc-button>
+ *     </div>
+ *   </nc-modal>
+ *
+ *   NcModal.open('confirm-modal');
+ */
+
+import { Component, defineComponent } from '@core/component.js';
+import { dom } from '@utils/dom.js';
+
+export class NcModal extends Component {
+    static useShadowDOM = true;
+
+    static get observedAttributes() {
+        return ['open', 'size', 'no-close-btn', 'close-on-overlay', 'no-overlay', 'sticky-header', 'sticky-footer'];
+    }
+
+    static open(id: string)  { dom.query<NcModal>(`#${id}`)?.setAttribute('open', ''); }
+    static close(id: string) { dom.query<NcModal>(`#${id}`)?.removeAttribute('open'); }
+
+    private _onKeydown: ((e: KeyboardEvent) => void) | null = null;
+
+    template() {
+        const open = this.hasAttribute('open');
+        const size = this.getAttribute('size') || 'md';
+        const noOverlay = this.hasAttribute('no-overlay');
+        const noCloseBtn = this.hasAttribute('no-close-btn');
+
+        const widths: Record<string, string> = {
+            sm: '420px', md: '560px', lg: '720px', xl: '960px', full: '100vw'
+        };
+        const maxWidth = widths[size] ?? widths.md;
+
+        return `
+            <style>
+                :host {
+                    display: block;
+                    position: fixed;
+                    inset: 0;
+                    z-index: 1000;
+                    pointer-events: none;
+                }
+
+                .overlay {
+                    position: absolute;
+                    inset: 0;
+                    background: rgba(0,0,0,.5);
+                    z-index: 1000;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    padding: var(--nc-spacing-lg);
+                    opacity: ${open ? '1' : '0'};
+                    pointer-events: ${open ? 'auto' : 'none'};
+                    transition: opacity var(--nc-transition-base);
+                    ${noOverlay ? 'background: transparent;' : ''}
+                }
+
+                .dialog {
+                    background: var(--nc-bg);
+                    border-radius: var(--nc-radius-lg, 12px);
+                    box-shadow: var(--nc-shadow-xl, 0 25px 60px rgba(0,0,0,.35));
+                    width: 100%;
+                    max-width: ${maxWidth};
+                    max-height: calc(100vh - 2 * var(--nc-spacing-lg));
+                    display: flex;
+                    flex-direction: column;
+                    transform: ${open ? 'translateY(0) scale(1)' : 'translateY(12px) scale(0.97)'};
+                    transition: transform var(--nc-transition-base);
+                    overflow: hidden;
+                    ${size === 'full' ? 'height: calc(100vh - 2 * var(--nc-spacing-lg));' : ''}
+                }
+
+                .dialog__header {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    padding: var(--nc-spacing-md) var(--nc-spacing-lg);
+                    border-bottom: 1px solid var(--nc-border);
+                    flex-shrink: 0;
+                    font-family: var(--nc-font-family);
+                    font-weight: var(--nc-font-weight-semibold);
+                    font-size: var(--nc-font-size-lg);
+                    color: var(--nc-text);
+                }
+
+                .dialog__body {
+                    flex: 1;
+                    overflow-y: auto;
+                    padding: var(--nc-spacing-lg);
+                    font-family: var(--nc-font-family);
+                    font-size: var(--nc-font-size-base);
+                    color: var(--nc-text);
+                    line-height: var(--nc-line-height-relaxed, 1.7);
+                }
+
+                .dialog__footer {
+                    padding: var(--nc-spacing-md) var(--nc-spacing-lg);
+                    border-top: 1px solid var(--nc-border);
+                    flex-shrink: 0;
+                    display: flex;
+                    justify-content: flex-end;
+                    gap: var(--nc-spacing-sm);
+                }
+                .dialog__footer:empty { display: none; }
+
+                .close-btn {
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                    padding: 4px;
+                    color: var(--nc-text-muted);
+                    border-radius: var(--nc-radius-sm, 4px);
+                    display: flex;
+                    transition: color var(--nc-transition-fast), background var(--nc-transition-fast);
+                    flex-shrink: 0;
+                }
+                .close-btn:hover { color: var(--nc-text); background: var(--nc-bg-secondary); }
+            </style>
+
+            <div
+                class="overlay"
+                role="dialog"
+                aria-modal="true"
+                aria-hidden="${!open}"
+                tabindex="-1"
+            >
+                <div class="dialog">
+                    <div class="dialog__header">
+                        <slot name="header"></slot>
+                        ${!noCloseBtn ? `
+                        <button class="close-btn" type="button" aria-label="Close modal">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" width="18" height="18">
+                                <path d="M3 3l10 10M13 3L3 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+                            </svg>
+                        </button>` : ''}
+                    </div>
+                    <div class="dialog__body">
+                        <slot></slot>
+                    </div>
+                    <div class="dialog__footer">
+                        <slot name="footer"></slot>
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+
+    onMount() {
+        this._bindEvents();
+    }
+
+    private _bindEvents() {
+        const overlay = this.$<HTMLElement>('.overlay')!;
+        const dialog = this.$<HTMLElement>('.dialog')!;
+        const closeBtn = this.$<HTMLButtonElement>('.close-btn');
+
+        if (closeBtn) closeBtn.addEventListener('click', () => this._close());
+
+        overlay.addEventListener('click', (e) => {
+            if (this.getAttribute('close-on-overlay') === 'false') return;
+            if (!dialog.contains(e.target as Node)) this._close();
+        });
+
+        this._onKeydown = (e: KeyboardEvent) => {
+            if (e.key === 'Escape' && this.hasAttribute('open')) this._close();
+        };
+        document.addEventListener('keydown', this._onKeydown);
+    }
+
+    private _close() {
+        this.removeAttribute('open');
+    }
+
+    onUnmount() {
+        if (this._onKeydown) document.removeEventListener('keydown', this._onKeydown);
+        document.body.style.overflow = '';
+    }
+
+    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+        if (oldValue === newValue) return;
+        if (name === 'open' && this._mounted) {
+            const open = this.hasAttribute('open');
+            const overlay = this.$<HTMLElement>('.overlay');
+            const dialog = this.$<HTMLElement>('.dialog');
+            if (overlay) {
+                overlay.style.opacity = open ? '1' : '0';
+                overlay.style.pointerEvents = open ? 'auto' : 'none';
+                overlay.setAttribute('aria-hidden', String(!open));
+            }
+            if (dialog) {
+                dialog.style.transform = open
+                    ? 'translateY(0) scale(1)'
+                    : 'translateY(12px) scale(0.97)';
+                if (open) (dialog as HTMLElement).focus();
+            }
+            document.body.style.overflow = open ? 'hidden' : '';
+            this.dispatchEvent(new CustomEvent(open ? 'open' : 'close', {
+                bubbles: true, composed: true
+            }));
+            return;
+        }
+        if (this._mounted) { this.render(); this._bindEvents(); }
+    }
+}
+
+defineComponent('nc-modal', NcModal);