nativecorejs 0.1.0

package/dist/components/nc-tag-input.js

@@ -0,0 +1,268 @@
+/**
+ * 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;
+    _tags = [];
+    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();
+    }
+    _bindEvents() {
+        const input = this.$('#input');
+        if (!input)
+            return;
+        const delimiter = this.getAttribute('delimiter') ?? ',';
+        input.addEventListener('keydown', (e) => {
+            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.$('#field')?.addEventListener('click', (e) => {
+            if (e.target.closest('.tag-remove'))
+                return;
+            input.focus();
+        });
+        this.shadowRoot.addEventListener('click', (e) => {
+            const btn = e.target.closest('.tag-remove');
+            if (btn) {
+                const idx = parseInt(btn.dataset.index ?? '-1', 10);
+                if (idx >= 0)
+                    this.removeTag(idx);
+            }
+        });
+    }
+    // ── Public API ─────────────────────────────────────────────────────────────
+    getTags() { return [...this._tags]; }
+    setTags(tags) {
+        this._tags = [...tags];
+        this.render();
+        this._bindEvents();
+        this._emit('change');
+    }
+    addTag(tag) {
+        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) {
+        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.$('#input')?.focus();
+    }
+    clear() { this.setTags([]); }
+    _emit(event) {
+        this.dispatchEvent(new CustomEvent(event, {
+            detail: { tags: [...this._tags] }, bubbles: true, composed: true,
+        }));
+    }
+    _escape(s) {
+        return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+    }
+    attributeChangedCallback(name, oldVal, newVal) {
+        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/dist/components/nc-textarea.d.ts

@@ -0,0 +1,15 @@
+import { Component } from '../core/component.js';
+export declare class NcTextarea extends Component {
+    static useShadowDOM: boolean;
+    static attributeOptions: {
+        variant: string[];
+        size: string[];
+    };
+    static get observedAttributes(): string[];
+    template(): string;
+    onMount(): void;
+    private bindEvents;
+    private autoResize;
+    private updateCounter;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+}

package/dist/components/nc-textarea.js

@@ -0,0 +1,164 @@
+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'];
+    }
+    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, 0.25rem);
+                }
+                textarea {
+                    width: 100%;
+                    box-sizing: border-box;
+                    padding: var(--nc-spacing-sm, 0.5rem) var(--nc-spacing-md, 0.75rem);
+                    background: var(--nc-bg, #ffffff);
+                    border: var(--nc-input-border, 1px solid #d1d5db);
+                    border-radius: var(--nc-input-radius, 0.5rem);
+                    color: var(--nc-text, #111827);
+                    font-size: var(--nc-font-size-base, 1rem);
+                    font-family: var(--nc-font-family);
+                    line-height: var(--nc-line-height-normal, 1.5);
+                    resize: ${autoresize ? 'none' : 'vertical'};
+                    transition: border-color var(--nc-transition-fast, 160ms ease), box-shadow var(--nc-transition-fast, 160ms ease);
+                    outline: none;
+                    min-height: 80px;
+                    opacity: ${disabled ? '0.5' : '1'};
+                    cursor: ${disabled ? 'not-allowed' : 'auto'};
+                }
+                :host([size="sm"]) textarea {
+                    padding: var(--nc-spacing-xs, 0.25rem) var(--nc-spacing-sm, 0.5rem);
+                    font-size: var(--nc-font-size-sm, 0.875rem);
+                }
+                :host([size="lg"]) textarea {
+                    padding: var(--nc-spacing-md, 1rem) var(--nc-spacing-lg, 1.5rem);
+                    font-size: var(--nc-font-size-lg, 1.125rem);
+                }
+                :host([variant="filled"]) textarea {
+                    background: var(--nc-bg-tertiary, #f3f4f6);
+                    border-color: transparent;
+                }
+                :host([variant="filled"]) textarea:hover:not(:disabled) {
+                    background: var(--nc-bg-secondary, #f8fafc);
+                }
+                textarea:hover:not(:disabled) {
+                    border-color: var(--nc-input-focus-border, #10b981);
+                }
+                textarea:focus {
+                    border-color: var(--nc-input-focus-border, #10b981);
+                    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
+                }
+                textarea::placeholder { color: var(--nc-text-muted, #6b7280); }
+                .counter {
+                    align-self: flex-end;
+                    font-size: var(--nc-font-size-xs, 0.75rem);
+                    color: var(--nc-text-muted, #6b7280);
+                    line-height: 1;
+                }
+                .counter.over {
+                    color: var(--nc-danger, #ef4444);
+                    font-weight: var(--nc-font-weight-semibold, 600);
+                }
+            </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();
+    }
+    bindEvents() {
+        const textarea = this.shadowRoot?.querySelector('textarea');
+        if (!textarea)
+            return;
+        if (this.hasAttribute('autoresize')) {
+            this.autoResize(textarea);
+        }
+        textarea.addEventListener('input', () => {
+            if (this.hasAttribute('autoresize'))
+                this.autoResize(textarea);
+            this.updateCounter(textarea.value);
+            this.dispatchEvent(new CustomEvent('input', {
+                bubbles: true,
+                composed: true,
+                detail: { value: textarea.value, name: this.getAttribute('name') || '' }
+            }));
+        });
+        textarea.addEventListener('change', () => {
+            this.setAttribute('value', textarea.value);
+            this.dispatchEvent(new CustomEvent('change', {
+                bubbles: true,
+                composed: true,
+                detail: { value: textarea.value, name: this.getAttribute('name') || '' }
+            }));
+        });
+    }
+    autoResize(textarea) {
+        textarea.style.height = 'auto';
+        textarea.style.height = `${textarea.scrollHeight}px`;
+    }
+    updateCounter(value) {
+        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, oldValue, newValue) {
+        if (oldValue === newValue)
+            return;
+        if (name === 'value' && this._mounted) {
+            const textarea = this.shadowRoot?.querySelector('textarea');
+            if (textarea) {
+                textarea.value = newValue || '';
+                this.updateCounter(textarea.value);
+                if (this.hasAttribute('autoresize'))
+                    this.autoResize(textarea);
+            }
+            return;
+        }
+        if (this._mounted) {
+            this.render();
+            this.bindEvents();
+        }
+    }
+}
+defineComponent('nc-textarea', NcTextarea);

package/dist/components/nc-time-picker.d.ts

@@ -0,0 +1,51 @@
+/**
+ * NcTimePicker Component
+ *
+ * Attributes:
+ *   - name: string
+ *   - value: string - HH:MM or HH:MM:SS (24-hour)
+ *   - format: '12'|'24' (default: '24')
+ *   - show-seconds: boolean - include seconds column (default: false)
+ *   - min: string - minimum time HH:MM
+ *   - max: string - maximum time HH:MM
+ *   - step: number - minute step interval (default: 1)
+ *   - placeholder: string (default: '--:--')
+ *   - disabled: boolean
+ *   - readonly: boolean
+ *   - size: 'sm'|'md'|'lg' (default: 'md')
+ *
+ * Events:
+ *   - change: CustomEvent<{ value: string; name: string }>
+ *
+ * Usage:
+ *   <nc-time-picker name="start" value="09:30"></nc-time-picker>
+ *   <nc-time-picker name="alarm" format="12" show-seconds></nc-time-picker>
+ */
+import { Component } from '../core/component.js';
+export declare class NcTimePicker extends Component {
+    static useShadowDOM: boolean;
+    static get observedAttributes(): string[];
+    private _open;
+    private _h;
+    private _m;
+    private _s;
+    private _ampm;
+    private _initialized;
+    private _outsideClick;
+    constructor();
+    private _initFromAttr;
+    private _is12;
+    private _showSec;
+    private _displayValue;
+    template(): string;
+    onMount(): void;
+    private _bindEvents;
+    private _handleColSelect;
+    private _updateDisplay;
+    private _apply;
+    private _clear;
+    private _setNow;
+    private _scrollToSelected;
+    onUnmount(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+}