create-nativecore 0.1.1 → 0.2.1

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

@@ -0,0 +1,271 @@
+/**
+ * NcAutocomplete Component
+ *
+ * Attributes:
+ *   - name: string
+ *   - value: string — current input value
+ *   - placeholder: string
+ *   - options: JSON string array OR comma-separated — static suggestions
+ *   - min-chars: number — chars before showing suggestions (default: 1)
+ *   - max-results: number — max visible items (default: 8)
+ *   - disabled: boolean
+ *   - size: 'sm'|'md'|'lg' (default: 'md')
+ *   - variant: 'default'|'filled' (default: 'default')
+ *
+ * Dynamic options — dispatch 'nc-autocomplete-options' on the element:
+ *   el.dispatchEvent(new CustomEvent('nc-autocomplete-options', { detail: ['a','b'] }))
+ *
+ * Events:
+ *   - input:  CustomEvent<{ value: string; name: string }>
+ *   - select: CustomEvent<{ value: string; name: string }>
+ *   - change: CustomEvent<{ value: string; name: string }>
+ */
+
+import { Component, defineComponent } from '@core/component.js';
+
+export class NcAutocomplete extends Component {
+    static useShadowDOM = true;
+
+    static get observedAttributes() {
+        return ['name', 'value', 'placeholder', 'options', 'min-chars', 'max-results', 'disabled', 'size', 'variant'];
+    }
+
+    private _inputValue = '';
+    private _dynamicOptions: string[] = [];
+    private _activeIndex = -1;
+    private _open = false;
+
+    constructor() { super(); }
+
+    private _getOptions(): string[] {
+        if (this._dynamicOptions.length) return this._dynamicOptions;
+        const raw = this.getAttribute('options') || '';
+        if (!raw) return [];
+        try { return JSON.parse(raw); } catch { return raw.split(',').map(s => s.trim()).filter(Boolean); }
+    }
+
+    private _filtered(): string[] {
+        const query = this._inputValue.trim().toLowerCase();
+        const minChars = Number(this.getAttribute('min-chars') ?? 1);
+        const max = Number(this.getAttribute('max-results') ?? 8);
+        if (query.length < minChars) return [];
+        return this._getOptions()
+            .filter(o => o.toLowerCase().includes(query))
+            .slice(0, max);
+    }
+
+    template() {
+        if (!this._mounted) {
+            this._inputValue = this.getAttribute('value') || '';
+        }
+        const disabled = this.hasAttribute('disabled');
+        const placeholder = this.getAttribute('placeholder') || '';
+        const name = this.getAttribute('name') || '';
+        const results = this._open ? this._filtered() : [];
+
+        return `
+            <style>
+                :host { display: block; position: relative; width: 100%; font-family: var(--nc-font-family); }
+
+                .input-wrap {
+                    position: relative;
+                    display: flex;
+                    align-items: center;
+                }
+
+                input {
+                    width: 100%;
+                    box-sizing: border-box;
+                    padding: var(--nc-spacing-sm) var(--nc-spacing-md);
+                    background: var(--nc-bg);
+                    border: var(--nc-input-border);
+                    border-radius: var(--nc-input-radius);
+                    color: var(--nc-text);
+                    font-size: var(--nc-font-size-base);
+                    font-family: var(--nc-font-family);
+                    outline: none;
+                    transition: border-color var(--nc-transition-fast), box-shadow var(--nc-transition-fast);
+                    opacity: ${disabled ? '0.5' : '1'};
+                    cursor: ${disabled ? 'not-allowed' : 'auto'};
+                }
+
+                :host([size="sm"]) input { font-size: var(--nc-font-size-sm); padding: var(--nc-spacing-xs) var(--nc-spacing-sm); }
+                :host([size="lg"]) input { font-size: var(--nc-font-size-lg); padding: var(--nc-spacing-md) var(--nc-spacing-lg); }
+                :host([variant="filled"]) input { background: var(--nc-bg-tertiary); border-color: transparent; }
+
+                input:focus { border-color: var(--nc-input-focus-border); box-shadow: 0 0 0 3px rgba(16,185,129,.15); }
+                input::placeholder { color: var(--nc-text-muted); }
+
+                .dropdown {
+                    position: absolute;
+                    top: calc(100% + 4px);
+                    left: 0; right: 0;
+                    background: var(--nc-bg);
+                    border: 1px solid var(--nc-border);
+                    border-radius: var(--nc-radius-md, 8px);
+                    box-shadow: var(--nc-shadow-lg);
+                    overflow: hidden;
+                    z-index: 500;
+                    display: ${results.length ? 'block' : 'none'};
+                }
+
+                .option {
+                    padding: var(--nc-spacing-sm) var(--nc-spacing-md);
+                    cursor: pointer;
+                    font-size: var(--nc-font-size-sm);
+                    color: var(--nc-text);
+                    transition: background var(--nc-transition-fast);
+                }
+
+                .option:hover,
+                .option.active { background: var(--nc-bg-secondary); }
+
+                .option mark {
+                    background: none;
+                    color: var(--nc-primary);
+                    font-weight: var(--nc-font-weight-semibold);
+                }
+            </style>
+            <div class="input-wrap">
+                <input
+                    type="text"
+                    name="${name}"
+                    value="${this._inputValue}"
+                    placeholder="${placeholder}"
+                    ${disabled ? 'disabled' : ''}
+                    autocomplete="off"
+                    role="combobox"
+                    aria-expanded="${results.length > 0}"
+                    aria-autocomplete="list"
+                    aria-haspopup="listbox"
+                />
+            </div>
+            <div class="dropdown" role="listbox">
+                ${results.map((opt, i) => {
+                    const hl = opt.replace(new RegExp(`(${this._inputValue.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi'), '<mark>$1</mark>');
+                    return `<div class="option${i === this._activeIndex ? ' active' : ''}" role="option" data-value="${opt}" aria-selected="${i === this._activeIndex}">${hl}</div>`;
+                }).join('')}
+            </div>
+        `;
+    }
+
+    onMount() {
+        this._bindEvents();
+
+        // Dynamic options API
+        this.addEventListener('nc-autocomplete-options', (e: Event) => {
+            this._dynamicOptions = (e as CustomEvent<string[]>).detail || [];
+            if (this._open) { this.render(); this._bindEvents(); }
+        });
+    }
+
+    private _bindEvents() {
+        const input = this.$<HTMLInputElement>('input')!;
+        const dropdown = this.$<HTMLElement>('.dropdown')!;
+
+        input.addEventListener('input', () => {
+            this._inputValue = input.value;
+            this._activeIndex = -1;
+            this._open = true;
+            this._refreshDropdown();
+            this.dispatchEvent(new CustomEvent('input', {
+                bubbles: true, composed: true,
+                detail: { value: input.value, name: this.getAttribute('name') || '' }
+            }));
+        });
+
+        input.addEventListener('focus', () => {
+            this._open = true;
+            this._refreshDropdown();
+        });
+
+        input.addEventListener('blur', () => {
+            // Delay so click on option fires first
+            setTimeout(() => {
+                this._open = false;
+                this._refreshDropdown();
+            }, 150);
+        });
+
+        input.addEventListener('keydown', (e: KeyboardEvent) => {
+            const results = this._filtered();
+            if (!results.length) return;
+            if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                this._activeIndex = Math.min(this._activeIndex + 1, results.length - 1);
+                this._refreshActive();
+            } else if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                this._activeIndex = Math.max(this._activeIndex - 1, -1);
+                this._refreshActive();
+            } else if (e.key === 'Enter' && this._activeIndex >= 0) {
+                e.preventDefault();
+                this._selectOption(results[this._activeIndex]);
+            } else if (e.key === 'Escape') {
+                this._open = false;
+                this._refreshDropdown();
+            }
+        });
+
+        dropdown.addEventListener('mousedown', (e) => {
+            const opt = (e.target as HTMLElement).closest<HTMLElement>('[data-value]');
+            if (opt) {
+                e.preventDefault();
+                this._selectOption(opt.dataset.value!);
+            }
+        });
+    }
+
+    private _selectOption(value: string) {
+        this._inputValue = value;
+        this._open = false;
+        this._activeIndex = -1;
+        this.setAttribute('value', value);
+        const input = this.$<HTMLInputElement>('input');
+        if (input) input.value = value;
+        this._refreshDropdown();
+        this.dispatchEvent(new CustomEvent('select', {
+            bubbles: true, composed: true,
+            detail: { value, name: this.getAttribute('name') || '' }
+        }));
+        this.dispatchEvent(new CustomEvent('change', {
+            bubbles: true, composed: true,
+            detail: { value, name: this.getAttribute('name') || '' }
+        }));
+    }
+
+    private _refreshDropdown() {
+        const dropdown = this.$<HTMLElement>('.dropdown');
+        if (!dropdown) return;
+        const results = this._open ? this._filtered() : [];
+        if (!results.length) { dropdown.style.display = 'none'; return; }
+        dropdown.style.display = 'block';
+        dropdown.innerHTML = results.map((opt, i) => {
+            const escaped = this._inputValue.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+            const hl = escaped ? opt.replace(new RegExp(`(${escaped})`, 'gi'), '<mark>$1</mark>') : opt;
+            return `<div class="option${i === this._activeIndex ? ' active' : ''}" role="option" data-value="${opt}" aria-selected="${i === this._activeIndex}">${hl}</div>`;
+        }).join('');
+        const input = this.$<HTMLInputElement>('input');
+        if (input) input.setAttribute('aria-expanded', String(results.length > 0));
+    }
+
+    private _refreshActive() {
+        this.$$<HTMLElement>('.option').forEach((opt, i) => {
+            opt.classList.toggle('active', i === this._activeIndex);
+            opt.setAttribute('aria-selected', String(i === this._activeIndex));
+        });
+    }
+
+    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+        if (oldValue === newValue) return;
+        if (name === 'value' && this._mounted) {
+            this._inputValue = newValue || '';
+            const input = this.$<HTMLInputElement>('input');
+            if (input) input.value = this._inputValue;
+            return;
+        }
+        if (this._mounted) { this.render(); this._bindEvents(); }
+    }
+}
+
+defineComponent('nc-autocomplete', NcAutocomplete);

package/template/src/components/core/nc-avatar-group.ts

@@ -0,0 +1,113 @@
+/**
+ * NcAvatarGroup Component — stacked overlapping avatars with overflow count
+ *
+ * Slots the first `max` nc-avatar elements, then shows "+N" for the rest.
+ *
+ * Attributes:
+ *   max      — max visible avatars (default: 4)
+ *   size     — 'xs'|'sm'|'md'(default)|'lg'|'xl' — passed to overflow bubble
+ *   overlap  — overlap amount in px (default: 10)
+ *   total    — total count override (used when only some avatars are slotted)
+ *              If not set, derived from slotted nc-avatars count.
+ *
+ * Usage:
+ *   <nc-avatar-group max="3">
+ *     <nc-avatar alt="Alice" variant="primary"></nc-avatar>
+ *     <nc-avatar alt="Bob"   variant="success"></nc-avatar>
+ *     <nc-avatar alt="Carol" variant="warning"></nc-avatar>
+ *     <nc-avatar alt="Dave"  variant="danger"></nc-avatar>
+ *     <nc-avatar alt="Eve"   variant="secondary"></nc-avatar>
+ *   </nc-avatar-group>
+ */
+import { Component, defineComponent } from '@core/component.js';
+
+export class NcAvatarGroup extends Component {
+    static useShadowDOM = true;
+
+    template() {
+        const overlap = parseInt(this.getAttribute('overlap') ?? '10', 10);
+        const size    = this.getAttribute('size') ?? 'md';
+
+        const sizePx: Record<string, number> = {
+            xs: 24, sm: 32, md: 40, lg: 48, xl: 56,
+        };
+        const sz  = sizePx[size] ?? 40;
+        const fs  = Math.round(sz * 0.32);
+        const bw  = Math.max(2, Math.round(sz * 0.06));
+
+        return `
+            <style>
+                :host { display: inline-block; }
+                .group {
+                    display: flex;
+                    flex-direction: row;
+                    align-items: center;
+                }
+                /* Offset each child leftwards to create the overlap stack */
+                ::slotted(*) {
+                    margin-left: -${overlap}px;
+                    box-shadow: 0 0 0 ${bw}px var(--nc-bg, #fff);
+                    border-radius: 50%;
+                    flex-shrink: 0;
+                    position: relative;
+                    transition: transform var(--nc-transition-fast), z-index 0s;
+                    z-index: 0;
+                }
+                ::slotted(*:first-child) { margin-left: 0; }
+                ::slotted(*:hover)       { transform: translateY(-3px); z-index: 10; }
+                .overflow {
+                    margin-left: -${overlap}px;
+                    width: ${sz}px;
+                    height: ${sz}px;
+                    border-radius: 50%;
+                    background: var(--nc-bg-tertiary, #e5e7eb);
+                    color: var(--nc-text-secondary);
+                    font-family: var(--nc-font-family);
+                    font-size: ${fs}px;
+                    font-weight: var(--nc-font-weight-semibold);
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    box-shadow: 0 0 0 ${bw}px var(--nc-bg, #fff);
+                    flex-shrink: 0;
+                    user-select: none;
+                }
+            </style>
+            <div class="group" role="group" aria-label="Avatar group">
+                <slot></slot>
+                <div class="overflow" id="overflow" style="display:none" aria-hidden="true"></div>
+            </div>
+        `;
+    }
+
+    onMount() {
+        this._update();
+    }
+
+    private _update() {
+        const slot = this.shadowRoot!.querySelector<HTMLSlotElement>('slot');
+        const overflow = this.shadowRoot!.querySelector<HTMLElement>('#overflow');
+        if (!slot || !overflow) return;
+
+        const max   = parseInt(this.getAttribute('max') ?? '4', 10);
+        const total = parseInt(this.getAttribute('total') ?? '0', 10);
+
+        const items = slot.assignedElements({ flatten: true }) as HTMLElement[];
+        const count = total > 0 ? total : items.length;
+
+        // Hide items beyond max
+        items.forEach((el, idx) => {
+            (el as HTMLElement).style.display = idx < max ? '' : 'none';
+        });
+
+        const extra = count - Math.min(max, items.length);
+        if (extra > 0) {
+            overflow.textContent = `+${extra}`;
+            overflow.style.display = 'flex';
+        } else {
+            overflow.style.display = 'none';
+        }
+    }
+}
+
+defineComponent('nc-avatar-group', NcAvatarGroup);

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

@@ -0,0 +1,148 @@
+/**
+ * NcAvatar Component
+ *
+ * Attributes:
+ *   - src: string — image URL
+ *   - alt: string — alt text / fallback initials (e.g. "John Doe" → "JD")
+ *   - size: 'xs'|'sm'|'md'|'lg'|'xl'|'2xl' — or any CSS size string (default: 'md')
+ *   - shape: 'circle'|'square'|'rounded' (default: 'circle')
+ *   - variant: 'primary'|'secondary'|'success'|'warning'|'danger'|'neutral' — fallback bg color (default: 'neutral')
+ *   - status: 'online'|'offline'|'away'|'busy' — status dot
+ *   - status-position: 'top-right'|'bottom-right'|'bottom-left'|'top-left' (default: 'bottom-right')
+ *
+ * Usage:
+ *   <nc-avatar src="/user.jpg" alt="Jane Doe" size="md"></nc-avatar>
+ *   <nc-avatar alt="David Toledo" variant="primary" status="online"></nc-avatar>
+ */
+
+import { Component, defineComponent } from '@core/component.js';
+
+const SIZE_MAP: Record<string, string> = {
+    xs: '24px', sm: '32px', md: '40px', lg: '48px', xl: '64px', '2xl': '80px',
+};
+
+const STATUS_COLORS: Record<string, string> = {
+    online: '#22c55e', offline: '#94a3b8', away: '#f59e0b', busy: '#ef4444',
+};
+
+function initials(name: string): string {
+    return name.trim().split(/\s+/).map(w => w[0] ?? '').join('').toUpperCase().slice(0, 2);
+}
+
+export class NcAvatar extends Component {
+    static useShadowDOM = true;
+
+    static get observedAttributes() {
+        return ['src', 'alt', 'size', 'shape', 'variant', 'status', 'status-position'];
+    }
+
+    private _imgError = false;
+
+    template() {
+        const src = this.getAttribute('src') || '';
+        const alt = this.getAttribute('alt') || '';
+        const sizeAttr = this.getAttribute('size') || 'md';
+        const shape = this.getAttribute('shape') || 'circle';
+        const variant = this.getAttribute('variant') || 'neutral';
+        const status = this.getAttribute('status') || '';
+        const statusPos = this.getAttribute('status-position') || 'bottom-right';
+
+        const sizeVal = SIZE_MAP[sizeAttr] ?? sizeAttr;
+        const fontSize = `calc(${sizeVal} * 0.38)`;
+        const statusSize = `calc(${sizeVal} * 0.26)`;
+
+        const borderRadius = shape === 'circle' ? '50%' : shape === 'rounded' ? '25%' : '8px';
+
+        const letters = initials(alt);
+        const showImg = src && !this._imgError;
+
+        const [svPos, shPos] = statusPos.split('-');
+        const statusDotStyle = [
+            svPos === 'top' ? 'top: 0;' : 'bottom: 0;',
+            shPos === 'right' ? 'right: 0;' : 'left: 0;',
+        ].join(' ');
+
+        const variantBg: Record<string, string> = {
+            primary:   'var(--nc-primary)',
+            secondary: 'var(--nc-secondary, #6366f1)',
+            success:   'var(--nc-success, #10b981)',
+            warning:   'var(--nc-warning, #f59e0b)',
+            danger:    'var(--nc-danger,  #ef4444)',
+            neutral:   'var(--nc-bg-tertiary)',
+        };
+
+        return `
+            <style>
+                :host { display: inline-flex; position: relative; flex-shrink: 0; }
+
+                .avatar {
+                    width: ${sizeVal};
+                    height: ${sizeVal};
+                    border-radius: ${borderRadius};
+                    overflow: hidden;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    background: ${variantBg[variant] ?? variantBg.neutral};
+                    color: ${variant === 'neutral' ? 'var(--nc-text)' : '#fff'};
+                    font-family: var(--nc-font-family);
+                    font-size: ${fontSize};
+                    font-weight: var(--nc-font-weight-semibold);
+                    user-select: none;
+                    flex-shrink: 0;
+                }
+
+                img {
+                    width: 100%;
+                    height: 100%;
+                    object-fit: cover;
+                    display: ${showImg ? 'block' : 'none'};
+                }
+
+                .initials {
+                    display: ${showImg ? 'none' : 'flex'};
+                    align-items: center;
+                    justify-content: center;
+                    width: 100%;
+                    height: 100%;
+                    line-height: 1;
+                }
+
+                .status-dot {
+                    position: absolute;
+                    ${statusDotStyle}
+                    width: ${statusSize};
+                    height: ${statusSize};
+                    border-radius: 50%;
+                    background: ${STATUS_COLORS[status] ?? STATUS_COLORS.offline};
+                    border: 2px solid var(--nc-bg);
+                    display: ${status ? 'block' : 'none'};
+                }
+            </style>
+            <div class="avatar" title="${alt}" aria-label="${alt}" role="img">
+                ${showImg ? `<img src="${src}" alt="${alt}" />` : ''}
+                <span class="initials">${letters || '?'}</span>
+            </div>
+            ${status ? `<span class="status-dot" aria-label="${status}"></span>` : ''}
+        `;
+    }
+
+    onMount() {
+        const img = this.$<HTMLImageElement>('img');
+        if (img) {
+            img.addEventListener('error', () => {
+                this._imgError = true;
+                this.render();
+            });
+        }
+    }
+
+    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+        if (oldValue !== newValue) {
+            if (name === 'src') this._imgError = false;
+            if (this._mounted) { this.render(); this.onMount(); }
+        }
+    }
+}
+
+defineComponent('nc-avatar', NcAvatar);

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

@@ -0,0 +1,86 @@
+/**
+ * NcBadge Component
+ *
+ * Attributes:
+ *   - count: number — value to display (hidden when 0 unless show-zero)
+ *   - max: number — cap value (default: 99); shows "max+" when exceeded
+ *   - show-zero: boolean — show badge even when count is 0
+ *   - dot: boolean — render as a small dot with no count
+ *   - variant: 'primary'|'secondary'|'danger'|'warning'|'success'|'info'|'neutral' (default: 'danger')
+ *   - position: 'top-right'|'top-left'|'bottom-right'|'bottom-left' (default: 'top-right')
+ *
+ * Usage:
+ *   <nc-badge count="5"><nc-button>Inbox</nc-button></nc-badge>
+ *   <nc-badge dot variant="success"><nc-button>Status</nc-button></nc-badge>
+ */
+
+import { Component, defineComponent } from '@core/component.js';
+
+export class NcBadge extends Component {
+    static useShadowDOM = true;
+
+    static get observedAttributes() {
+        return ['count', 'max', 'show-zero', 'dot', 'variant', 'position'];
+    }
+
+    template() {
+        const count = Number(this.getAttribute('count') || 0);
+        const max = Number(this.getAttribute('max') || 99);
+        const showZero = this.hasAttribute('show-zero');
+        const dot = this.hasAttribute('dot');
+        const variant = this.getAttribute('variant') || 'danger';
+        const position = this.getAttribute('position') || 'top-right';
+
+        const visible = dot || showZero || count > 0;
+        const label = dot ? '' : count > max ? `${max}+` : String(count);
+
+        const [vPos, hPos] = position.split('-');
+
+        return `
+            <style>
+                :host { display: inline-flex; position: relative; vertical-align: middle; }
+
+                .badge {
+                    position: absolute;
+                    ${vPos === 'top' ? 'top: -6px;' : 'bottom: -6px;'}
+                    ${hPos === 'right' ? 'right: -6px;' : 'left: -6px;'}
+                    z-index: 1;
+                    display: ${visible ? 'inline-flex' : 'none'};
+                    align-items: center;
+                    justify-content: center;
+                    font-family: var(--nc-font-family);
+                    font-size: 0.65rem;
+                    font-weight: var(--nc-font-weight-bold);
+                    line-height: 1;
+                    min-width: ${dot ? '8px' : '18px'};
+                    height: ${dot ? '8px' : '18px'};
+                    padding: ${dot ? '0' : '0 5px'};
+                    border-radius: 999px;
+                    border: 2px solid var(--nc-bg);
+                    white-space: nowrap;
+                    pointer-events: none;
+                    transition: transform var(--nc-transition-fast);
+                    transform: scale(${visible ? '1' : '0'});
+                }
+
+                .badge--primary   { background: var(--nc-primary); color: #fff; }
+                .badge--secondary { background: var(--nc-secondary, #6366f1); color: #fff; }
+                .badge--danger    { background: var(--nc-danger,  #ef4444); color: #fff; }
+                .badge--warning   { background: var(--nc-warning, #f59e0b); color: #fff; }
+                .badge--success   { background: var(--nc-success, #10b981); color: #fff; }
+                .badge--info      { background: var(--nc-info,    #3b82f6); color: #fff; }
+                .badge--neutral   { background: var(--nc-text-muted); color: #fff; }
+
+                ::slotted(*) { display: inline-flex; }
+            </style>
+            <slot></slot>
+            <span class="badge badge--${variant}" aria-label="${dot ? 'indicator' : `${label} notifications`}">${label}</span>
+        `;
+    }
+
+    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+        if (oldValue !== newValue && this._mounted) this.render();
+    }
+}
+
+defineComponent('nc-badge', NcBadge);