create-nativecore 0.1.0 → 0.2.0

package/template/src/components/core/nc-tag-input.ts

@@ -0,0 +1,279 @@
+/**
+ * NcTagInput Component — text input that creates dismissible tag chips
+ *
+ * Attributes:
+ *   placeholder  — input placeholder text
+ *   value        — comma-separated initial tags (e.g. "react,vue,svelte")
+ *   max          — maximum number of tags allowed
+ *   min-length   — minimum character length for a tag (default: 1)
+ *   max-length   — maximum character length per tag
+ *   delimiter    — character(s) that trigger tag creation in addition to Enter (default: ',')
+ *   disabled     — boolean
+ *   readonly     — boolean — show tags but cannot add/remove
+ *   duplicate    — boolean — allow duplicate tags (default: false)
+ *   variant      — 'default'|'filled' (default: 'default')
+ *   label        — visible label text
+ *   hint         — helper text below input
+ *   error        — error message (shown in red)
+ *
+ * Events:
+ *   change    — CustomEvent<{ tags: string[] }> — tag list changed
+ *   add       — CustomEvent<{ tag: string }>
+ *   remove    — CustomEvent<{ tag: string; index: number }>
+ *   max-reached — CustomEvent — fired when max is exceeded
+ *
+ * Methods:
+ *   el.getTags()          — string[]
+ *   el.setTags(tags)      — replace all tags
+ *   el.addTag(tag)        — programmatic add
+ *   el.removeTag(index)   — programmatic remove
+ *   el.clear()            — remove all tags
+ */
+import { Component, defineComponent } from '@core/component.js';
+
+export class NcTagInput extends Component {
+    static useShadowDOM = true;
+
+    private _tags: string[] = [];
+
+    static get observedAttributes() {
+        return ['value', 'disabled', 'readonly', 'error'];
+    }
+
+    connectedCallback() {
+        super.connectedCallback?.();
+        const raw = this.getAttribute('value') ?? '';
+        if (raw) this._tags = raw.split(',').map(t => t.trim()).filter(Boolean);
+    }
+
+    template() {
+        const placeholder = this.getAttribute('placeholder') ?? 'Add tag...';
+        const label       = this.getAttribute('label') ?? '';
+        const hint        = this.getAttribute('hint') ?? '';
+        const error       = this.getAttribute('error') ?? '';
+        const disabled    = this.hasAttribute('disabled');
+        const readonly    = this.hasAttribute('readonly');
+        const variant     = this.getAttribute('variant') ?? 'default';
+
+        const bg      = variant === 'filled' ? 'var(--nc-bg-secondary)' : 'var(--nc-bg)';
+        const border  = error ? 'var(--nc-danger)' : 'var(--nc-border)';
+
+        const tagsHtml = this._tags.map((tag, i) => `
+            <span class="tag" data-index="${i}">
+                <span class="tag-text">${this._escape(tag)}</span>
+                ${!disabled && !readonly
+                    ? `<button class="tag-remove" type="button" data-index="${i}" aria-label="Remove ${this._escape(tag)}">
+                          <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 12 12" fill="none">
+                              <path d="M2 2l8 8M10 2l-8 8" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
+                          </svg>
+                       </button>`
+                    : ''}
+            </span>
+        `).join('');
+
+        return `
+            <style>
+                :host { display: block; font-family: var(--nc-font-family); }
+                .label {
+                    display: block;
+                    font-size: var(--nc-font-size-sm);
+                    font-weight: var(--nc-font-weight-medium);
+                    color: var(--nc-text);
+                    margin-bottom: 6px;
+                }
+                .field {
+                    display: flex;
+                    flex-wrap: wrap;
+                    align-items: center;
+                    gap: 6px;
+                    padding: 8px 10px;
+                    background: ${bg};
+                    border: 1px solid ${border};
+                    border-radius: var(--nc-radius-md);
+                    min-height: 42px;
+                    cursor: ${disabled ? 'not-allowed' : 'text'};
+                    transition: border-color var(--nc-transition-fast), box-shadow var(--nc-transition-fast);
+                    opacity: ${disabled ? 0.5 : 1};
+                }
+                .field:focus-within {
+                    border-color: var(--nc-primary);
+                    box-shadow: 0 0 0 3px rgba(var(--nc-primary-rgb, 99,102,241),.15);
+                }
+                .tag {
+                    display: inline-flex;
+                    align-items: center;
+                    gap: 4px;
+                    background: var(--nc-primary);
+                    color: var(--nc-white);
+                    border-radius: var(--nc-radius-sm);
+                    padding: 2px 8px;
+                    font-size: var(--nc-font-size-xs);
+                    font-weight: var(--nc-font-weight-medium);
+                    line-height: 1.6;
+                    white-space: nowrap;
+                    max-width: 200px;
+                }
+                .tag-text {
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                }
+                .tag-remove {
+                    background: none;
+                    border: none;
+                    padding: 0;
+                    cursor: pointer;
+                    color: inherit;
+                    opacity: 0.7;
+                    display: flex;
+                    align-items: center;
+                    line-height: 1;
+                    flex-shrink: 0;
+                }
+                .tag-remove:hover { opacity: 1; }
+                input {
+                    flex: 1 1 80px;
+                    min-width: 80px;
+                    border: none;
+                    outline: none;
+                    background: transparent;
+                    font-family: inherit;
+                    font-size: var(--nc-font-size-sm);
+                    color: var(--nc-text);
+                    padding: 0;
+                    caret-color: var(--nc-primary);
+                }
+                input::placeholder { color: var(--nc-text-muted); }
+                input:disabled { cursor: not-allowed; }
+                .hint  { font-size: var(--nc-font-size-xs); color: var(--nc-text-muted); margin-top: 5px; }
+                .error { font-size: var(--nc-font-size-xs); color: var(--nc-danger);      margin-top: 5px; }
+            </style>
+            ${label ? `<label class="label">${label}</label>` : ''}
+            <div class="field" id="field">
+                ${tagsHtml}
+                ${!readonly
+                    ? `<input
+                        type="text"
+                        id="input"
+                        placeholder="${this._tags.length === 0 ? placeholder : ''}"
+                        ${disabled ? 'disabled' : ''}
+                        autocomplete="off"
+                        spellcheck="false"
+                      />`
+                    : ''}
+            </div>
+            ${error ? `<p class="error">${error}</p>` : hint ? `<p class="hint">${hint}</p>` : ''}
+        `;
+    }
+
+    onMount() {
+        this._bindEvents();
+    }
+
+    private _bindEvents() {
+        const input = this.$<HTMLInputElement>('#input');
+        if (!input) return;
+
+        const delimiter = this.getAttribute('delimiter') ?? ',';
+
+        input.addEventListener('keydown', (e: KeyboardEvent) => {
+            if (e.key === 'Enter' || (delimiter && e.key === delimiter)) {
+                e.preventDefault();
+                const val = input.value.trim();
+                if (val) { this.addTag(val); input.value = ''; }
+            } else if (e.key === 'Backspace' && input.value === '' && this._tags.length > 0) {
+                this.removeTag(this._tags.length - 1);
+            }
+        });
+
+        input.addEventListener('input', () => {
+            const val   = input.value;
+            const delim = this.getAttribute('delimiter') ?? ',';
+            if (delim && val.endsWith(delim)) {
+                const tag = val.slice(0, -delim.length).trim();
+                if (tag) { this.addTag(tag); input.value = ''; }
+            }
+        });
+
+        // Clicking the field focuses the input
+        this.$<HTMLElement>('#field')?.addEventListener('click', (e) => {
+            if ((e.target as HTMLElement).closest('.tag-remove')) return;
+            input.focus();
+        });
+
+        this.shadowRoot!.addEventListener('click', (e) => {
+            const btn = (e.target as HTMLElement).closest<HTMLElement>('.tag-remove');
+            if (btn) {
+                const idx = parseInt(btn.dataset.index ?? '-1', 10);
+                if (idx >= 0) this.removeTag(idx);
+            }
+        });
+    }
+
+    // ── Public API ─────────────────────────────────────────────────────────────
+
+    getTags(): string[] { return [...this._tags]; }
+
+    setTags(tags: string[]) {
+        this._tags = [...tags];
+        this.render();
+        this._bindEvents();
+        this._emit('change');
+    }
+
+    addTag(tag: string) {
+        const maxAttr    = this.getAttribute('max');
+        const minLen     = parseInt(this.getAttribute('min-length') ?? '1', 10);
+        const maxLen     = this.getAttribute('max-length');
+        const allowDup   = this.hasAttribute('duplicate');
+
+        tag = tag.trim();
+        if (!tag || tag.length < minLen) return;
+        if (maxLen && tag.length > parseInt(maxLen, 10)) return;
+        if (!allowDup && this._tags.includes(tag)) return;
+        if (maxAttr && this._tags.length >= parseInt(maxAttr, 10)) {
+            this.dispatchEvent(new CustomEvent('max-reached', { bubbles: true, composed: true }));
+            return;
+        }
+
+        this._tags.push(tag);
+        this.render();
+        this._bindEvents();
+        this.dispatchEvent(new CustomEvent('add', { detail: { tag }, bubbles: true, composed: true }));
+        this._emit('change');
+    }
+
+    removeTag(index: number) {
+        const tag = this._tags[index];
+        if (tag === undefined) return;
+        this._tags.splice(index, 1);
+        this.render();
+        this._bindEvents();
+        this.dispatchEvent(new CustomEvent('remove', { detail: { tag, index }, bubbles: true, composed: true }));
+        this._emit('change');
+        this.$<HTMLInputElement>('#input')?.focus();
+    }
+
+    clear() { this.setTags([]); }
+
+    private _emit(event: string) {
+        this.dispatchEvent(new CustomEvent(event, {
+            detail: { tags: [...this._tags] }, bubbles: true, composed: true,
+        }));
+    }
+
+    private _escape(s: string) {
+        return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+    }
+
+    attributeChangedCallback(name: string, oldVal: string, newVal: string) {
+        if (oldVal === newVal || !this._mounted) return;
+        if (name === 'value') {
+            this._tags = (newVal ?? '').split(',').map(t => t.trim()).filter(Boolean);
+        }
+        this.render();
+        this._bindEvents();
+    }
+}
+
+defineComponent('nc-tag-input', NcTagInput);

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

@@ -0,0 +1,216 @@
+/**
+ * NcTextarea Component
+ *
+ * NativeCore Framework Core Component
+ *
+ * Attributes:
+ *   - name: string — form field name
+ *   - value: string — current value
+ *   - placeholder: string — placeholder text
+ *   - rows: number — visible row count (default: 4)
+ *   - disabled: boolean — disabled state
+ *   - readonly: boolean — read-only state
+ *   - maxlength: number — character limit (shows counter when set)
+ *   - autoresize: boolean — grow to fit content automatically
+ *   - size: 'sm' | 'md' | 'lg' (default: 'md')
+ *   - variant: 'default' | 'filled' (default: 'default')
+ *
+ * Events:
+ *   - input: CustomEvent<{ value: string; name: string }>
+ *   - change: CustomEvent<{ value: string; name: string }>
+ *
+ * Usage:
+ *   <nc-textarea name="bio" placeholder="Tell us about yourself" rows="4"></nc-textarea>
+ *   <nc-textarea name="notes" maxlength="200" autoresize></nc-textarea>
+ */
+
+import { Component, defineComponent } from '@core/component.js';
+
+export class NcTextarea extends Component {
+    static useShadowDOM = true;
+
+    static attributeOptions = {
+        variant: ['default', 'filled'],
+        size: ['sm', 'md', 'lg']
+    };
+
+    static get observedAttributes() {
+        return ['name', 'value', 'placeholder', 'rows', 'disabled', 'readonly', 'maxlength', 'autoresize', 'size', 'variant'];
+    }
+
+    constructor() {
+        super();
+    }
+
+    template() {
+        const value = this.getAttribute('value') || '';
+        const placeholder = this.getAttribute('placeholder') || '';
+        const rows = this.getAttribute('rows') || '4';
+        const disabled = this.hasAttribute('disabled');
+        const readonly = this.hasAttribute('readonly');
+        const maxlength = this.getAttribute('maxlength');
+        const autoresize = this.hasAttribute('autoresize');
+        const charCount = value.length;
+
+        return `
+            <style>
+                :host {
+                    display: block;
+                    font-family: var(--nc-font-family);
+                    width: 100%;
+                }
+
+                .wrap {
+                    position: relative;
+                    display: flex;
+                    flex-direction: column;
+                    gap: var(--nc-spacing-xs);
+                }
+
+                textarea {
+                    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);
+                    line-height: var(--nc-line-height-normal);
+                    resize: ${autoresize ? 'none' : 'vertical'};
+                    transition: border-color var(--nc-transition-fast), box-shadow var(--nc-transition-fast);
+                    outline: none;
+                    min-height: 80px;
+                    opacity: ${disabled ? '0.5' : '1'};
+                    cursor: ${disabled ? 'not-allowed' : 'auto'};
+                }
+
+                :host([size="sm"]) textarea {
+                    padding: var(--nc-spacing-xs) var(--nc-spacing-sm);
+                    font-size: var(--nc-font-size-sm);
+                }
+
+                :host([size="lg"]) textarea {
+                    padding: var(--nc-spacing-md) var(--nc-spacing-lg);
+                    font-size: var(--nc-font-size-lg);
+                }
+
+                :host([variant="filled"]) textarea {
+                    background: var(--nc-bg-tertiary);
+                    border-color: transparent;
+                }
+
+                :host([variant="filled"]) textarea:hover:not(:disabled) {
+                    background: var(--nc-bg-secondary);
+                }
+
+                textarea:hover:not(:disabled) {
+                    border-color: var(--nc-input-focus-border);
+                }
+
+                textarea:focus {
+                    border-color: var(--nc-input-focus-border);
+                    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
+                }
+
+                textarea::placeholder {
+                    color: var(--nc-text-muted);
+                }
+
+                .counter {
+                    align-self: flex-end;
+                    font-size: var(--nc-font-size-xs);
+                    color: var(--nc-text-muted);
+                    line-height: 1;
+                }
+
+                .counter.over {
+                    color: var(--nc-danger);
+                    font-weight: var(--nc-font-weight-semibold);
+                }
+            </style>
+
+            <div class="wrap">
+                <textarea
+                    rows="${rows}"
+                    ${maxlength ? `maxlength="${maxlength}"` : ''}
+                    ${disabled ? 'disabled' : ''}
+                    ${readonly ? 'readonly' : ''}
+                    placeholder="${placeholder}"
+                    name="${this.getAttribute('name') || ''}"
+                    aria-multiline="true"
+                >${value}</textarea>
+                ${maxlength ? `
+                <span class="counter${charCount > Number(maxlength) ? ' over' : ''}">${charCount} / ${maxlength}</span>` : ''}
+            </div>
+        `;
+    }
+
+    onMount() {
+        this._bindEvents();
+    }
+
+    private _bindEvents() {
+        const ta = this.shadowRoot!.querySelector<HTMLTextAreaElement>('textarea');
+        if (!ta) return;
+
+        if (this.hasAttribute('autoresize')) {
+            this._autoResize(ta);
+        }
+
+        ta.addEventListener('input', () => {
+            if (this.hasAttribute('autoresize')) this._autoResize(ta);
+            this._updateCounter(ta.value);
+
+            this.dispatchEvent(new CustomEvent('input', {
+                bubbles: true, composed: true,
+                detail: { value: ta.value, name: this.getAttribute('name') || '' }
+            }));
+        });
+
+        ta.addEventListener('change', () => {
+            this.setAttribute('value', ta.value);
+            this.dispatchEvent(new CustomEvent('change', {
+                bubbles: true, composed: true,
+                detail: { value: ta.value, name: this.getAttribute('name') || '' }
+            }));
+        });
+    }
+
+    private _autoResize(ta: HTMLTextAreaElement) {
+        ta.style.height = 'auto';
+        ta.style.height = `${ta.scrollHeight}px`;
+    }
+
+    private _updateCounter(value: string) {
+        const maxlength = this.getAttribute('maxlength');
+        if (!maxlength) return;
+        const counter = this.shadowRoot!.querySelector('.counter');
+        if (!counter) return;
+        const count = value.length;
+        const max = Number(maxlength);
+        counter.textContent = `${count} / ${maxlength}`;
+        counter.classList.toggle('over', count > max);
+    }
+
+    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+        if (oldValue === newValue) return;
+        // Don't rebuild DOM for live value changes — the textarea manages its own value
+        if (name === 'value' && this._mounted) {
+            const ta = this.shadowRoot!.querySelector<HTMLTextAreaElement>('textarea');
+            if (ta) {
+                ta.value = newValue || '';
+                this._updateCounter(ta.value);
+                if (this.hasAttribute('autoresize')) this._autoResize(ta);
+            }
+            return;
+        }
+        if (this._mounted) {
+            this.render();
+            this._bindEvents();
+        }
+    }
+}
+
+defineComponent('nc-textarea', NcTextarea);