create-nativecore 0.1.1 → 0.2.0

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

@@ -0,0 +1,280 @@
+/**
+ * NcDiv Component - Responsive Container
+ * 
+ * A flexible container component with built-in responsive grid/flex layouts
+ * 
+ * Attributes:
+ *   - layout: 'grid' | 'flex' | 'grid-auto' | 'block' (default: 'grid-auto')
+ *   - cols: '1' | '2' | '3' | '4' (for grid layout)
+ *   - direction: 'row' | 'column' (for flex layout)
+ *   - gap: 'sm' | 'md' | 'lg' | 'xl' (default: 'md')
+ *   - width: 'full' | 'three-quarters' | 'half' | 'quarter' (default: 'full')
+ *   - justify: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' (for flex/grid)
+ *   - align: 'start' | 'center' | 'end' | 'stretch' | 'baseline' (for flex/grid)
+ * 
+ * Usage:
+ *   <nc-div layout="grid-auto">
+ *     Card 1</nc-card>
+ *     Card 2</nc-card>
+ *   </nc-div>
+ *   
+ *   <nc-div layout="grid" cols="3">
+ *     Card 1</nc-card>
+ *     Card 2</nc-card>
+ *     Card 3</nc-card>
+ *   </nc-div>
+ *   
+ *   <nc-div layout="flex" direction="row" gap="lg" justify="center" align="center">
+ *     Flexbox Item 1</nc-card>
+ *     Flexbox Item 2</nc-card>
+ *   </nc-div>
+ */
+
+import { Component, defineComponent } from '@core/component.js';
+
+export class NcDiv extends Component {
+    static useShadowDOM = true;
+    
+    // ═══ Define dropdown options for dev tools ═══
+    static attributeOptions = {
+        layout: ['grid-auto', 'grid', 'flex', 'block'],
+        cols: ['1', '2', '3', '4'],
+        direction: ['row', 'column'],
+        gap: ['sm', 'md', 'lg', 'xl'],
+        width: ['full', 'three-quarters', 'half', 'quarter'],
+        justify: ['start', 'center', 'end', 'between', 'around', 'evenly'],
+        align: ['start', 'center', 'end', 'stretch', 'baseline']
+    };
+    
+    // ═══ Conditional visibility for attributes based on layout ═══
+    static attributeConditions = {
+        cols: (element: HTMLElement) => {
+            const layout = element.getAttribute('layout') || 'grid-auto';
+            return layout === 'grid';
+        },
+        direction: (element: HTMLElement) => {
+            const layout = element.getAttribute('layout') || 'grid-auto';
+            return layout === 'flex';
+        }
+    };
+    
+    // ═══ Attributes become editable in dev tools sidebar ═══
+    static get observedAttributes() {
+        return ['layout', 'cols', 'direction', 'gap', 'width', 'justify', 'align'];
+    }
+    
+    constructor() {
+        super();
+    }
+    
+    template() {
+        return `
+            <style>
+                :host {
+                    display: block;
+                    width: 100%;
+                    box-sizing: border-box;
+                    margin: var(--nc-spacing-lg) 0 !important;
+                }
+                
+                /* Layout: Auto-fit Grid (Recommended) */
+                :host([layout="grid-auto"]) {
+                    display: grid;
+                    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+                }
+                
+                /* Layout: Fixed Grid */
+                :host([layout="grid"]) {
+                    display: grid;
+                }
+                
+                :host([layout="grid"][cols="1"]) {
+                    grid-template-columns: repeat(1, minmax(0, 1fr));
+                }
+                
+                :host([layout="grid"][cols="2"]) {
+                    grid-template-columns: repeat(2, minmax(0, 1fr));
+                }
+                
+                :host([layout="grid"][cols="3"]) {
+                    grid-template-columns: repeat(3, minmax(0, 1fr));
+                }
+                
+                :host([layout="grid"][cols="4"]) {
+                    grid-template-columns: repeat(4, minmax(0, 1fr));
+                }
+                
+                /* Layout: Flexbox */
+                :host([layout="flex"]) {
+                    display: flex;
+                    flex-wrap: wrap;
+                    flex-direction: column; /* Default to column (vertical stack) */
+                }
+                
+                /* Flex Direction */
+                :host([layout="flex"][direction="row"]) {
+                    flex-direction: row;
+                }
+                
+                :host([layout="flex"][direction="column"]) {
+                    flex-direction: column;
+                }
+                
+                /* Row layout: children can grow with 300px basis */
+                :host([layout="flex"][direction="row"]) ::slotted(*) {
+                    flex: 1 1 300px;
+                    min-width: 0;
+                }
+                
+                /* Column layout (default): children size to content */
+                :host([layout="flex"]) ::slotted(*),
+                :host([layout="flex"][direction="column"]) ::slotted(*) {
+                    flex: 0 1 auto;
+                    min-width: 0;
+                }
+                
+                /* Layout: Block */
+                :host([layout="block"]) {
+                    display: block;
+                }
+                
+                /* Gap Sizes */
+                :host([gap="sm"]) {
+                    gap: var(--nc-spacing-sm);
+                }
+                
+                :host([gap="md"]) {
+                    gap: var(--nc-spacing-md);
+                }
+                
+                :host([gap="lg"]) {
+                    gap: var(--nc-spacing-lg);
+                }
+                
+                :host([gap="xl"]) {
+                    gap: var(--nc-spacing-xl);
+                }
+                
+                /* Justify Content - Works for both Flex & Grid */
+                :host([justify="start"]) {
+                    justify-content: flex-start;
+                    justify-items: start;
+                }
+                
+                :host([justify="center"]) {
+                    justify-content: center;
+                    justify-items: center;
+                }
+                
+                :host([justify="end"]) {
+                    justify-content: flex-end;
+                    justify-items: end;
+                }
+                
+                :host([justify="between"]) {
+                    justify-content: space-between;
+                }
+                
+                :host([justify="around"]) {
+                    justify-content: space-around;
+                }
+                
+                :host([justify="evenly"]) {
+                    justify-content: space-evenly;
+                }
+                
+                /* Align Items - Works for both Flex & Grid */
+                :host([align="start"]) {
+                    align-items: flex-start;
+                    align-content: flex-start;
+                }
+                
+                :host([align="center"]) {
+                    align-items: center;
+                    align-content: center;
+                }
+                
+                :host([align="end"]) {
+                    align-items: flex-end;
+                    align-content: flex-end;
+                }
+                
+                :host([align="stretch"]) {
+                    align-items: stretch;
+                    align-content: stretch;
+                }
+                
+                :host([align="baseline"]) {
+                    align-items: baseline;
+                    align-content: baseline;
+                }
+                
+                /* Width Options */
+                :host([width="full"]) {
+                    width: 100%;
+                }
+                
+                :host([width="three-quarters"]) {
+                    width: 75%;
+                    margin-left: auto;
+                    margin-right: auto;
+                }
+                
+                :host([width="half"]) {
+                    width: 50%;
+                    margin-left: auto;
+                    margin-right: auto;
+                }
+                
+                :host([width="quarter"]) {
+                    width: 25%;
+                    margin-left: auto;
+                    margin-right: auto;
+                }
+                
+                /* Responsive: Mobile */
+                @media (max-width: 768px) {
+                    :host([layout="grid"][cols="2"]),
+                    :host([layout="grid"][cols="3"]),
+                    :host([layout="grid"][cols="4"]) {
+                        grid-template-columns: repeat(1, minmax(0, 1fr));
+                    }
+                    
+                    :host([layout="grid-auto"]) {
+                        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+                    }
+                    
+                    /* Full width on mobile for better UX */
+                    :host([width="three-quarters"]),
+                    :host([width="half"]),
+                    :host([width="quarter"]) {
+                        width: 100% !important;
+                    }
+                }
+                
+                /* Responsive: Tablet */
+                @media (min-width: 769px) and (max-width: 1024px) {
+                    :host([layout="grid"][cols="3"]),
+                    :host([layout="grid"][cols="4"]) {
+                        grid-template-columns: repeat(2, minmax(0, 1fr));
+                    }
+                }
+            </style>
+            
+            <slot></slot>
+        `;
+    }
+    
+    onMount() {
+        // Component logic here
+    }
+    
+    // ═══ Makes changes instant in dev tools preview ═══
+    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+        if (oldValue !== newValue && this._mounted) {
+            this.render();
+        }
+    }
+}
+
+defineComponent('nc-div', NcDiv);

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

@@ -0,0 +1,81 @@
+/**
+ * NcDivider Component
+ *
+ * Attributes:
+ *   - orientation: 'horizontal'|'vertical' (default: 'horizontal')
+ *   - variant: 'solid'|'dashed'|'dotted' (default: 'solid')
+ *   - label: string — optional centered label text
+ *   - thickness: string — CSS border-width (default: '1px')
+ *   - color: string — CSS color override
+ *   - spacing: string — CSS margin (default: 'var(--nc-spacing-md) 0')
+ *
+ * Usage:
+ *   <nc-divider></nc-divider>
+ *   <nc-divider label="or"></nc-divider>
+ *   <nc-divider orientation="vertical"></nc-divider>
+ *   <nc-divider variant="dashed" label="Settings"></nc-divider>
+ */
+
+import { Component, defineComponent } from '@core/component.js';
+
+export class NcDivider extends Component {
+    static useShadowDOM = true;
+
+    static get observedAttributes() {
+        return ['orientation', 'variant', 'label', 'thickness', 'color', 'spacing'];
+    }
+
+    template() {
+        const orientation = this.getAttribute('orientation') || 'horizontal';
+        const variant = this.getAttribute('variant') || 'solid';
+        const label = this.getAttribute('label') || '';
+        const thickness = this.getAttribute('thickness') || '1px';
+        const color = this.getAttribute('color') || 'var(--nc-border)';
+        const spacing = this.getAttribute('spacing') || (orientation === 'horizontal' ? 'var(--nc-spacing-md) 0' : '0 var(--nc-spacing-md)');
+
+        const isHorizontal = orientation === 'horizontal';
+
+        return `
+            <style>
+                :host {
+                    display: ${isHorizontal ? 'block' : 'inline-flex'};
+                    align-self: ${isHorizontal ? 'auto' : 'stretch'};
+                }
+
+                .divider {
+                    display: flex;
+                    align-items: center;
+                    margin: ${spacing};
+                    ${isHorizontal ? 'width: 100%;' : 'flex-direction: column; height: 100%;'}
+                    font-family: var(--nc-font-family);
+                }
+
+                .line {
+                    ${isHorizontal ? 'flex: 1; height: 0;' : 'flex: 1; width: 0;'}
+                    border: none;
+                    border-${isHorizontal ? 'top' : 'left'}: ${thickness} ${variant} ${color};
+                }
+
+                .label {
+                    padding: ${isHorizontal ? '0 var(--nc-spacing-sm)' : 'var(--nc-spacing-sm) 0'};
+                    font-size: var(--nc-font-size-xs);
+                    color: var(--nc-text-muted);
+                    white-space: nowrap;
+                    font-weight: var(--nc-font-weight-medium);
+                    text-transform: uppercase;
+                    letter-spacing: 0.05em;
+                }
+            </style>
+            <div class="divider" role="separator" aria-orientation="${orientation}">
+                <span class="line"></span>
+                ${label ? `<span class="label">${label}</span><span class="line"></span>` : ''}
+            </div>
+        `;
+    }
+
+    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+        if (oldValue !== newValue && this._mounted) this.render();
+    }
+}
+
+defineComponent('nc-divider', NcDivider);

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

@@ -0,0 +1,230 @@
+/**
+ * NcDrawer Component
+ *
+ * Attributes:
+ *   - open: boolean — visible state
+ *   - placement: 'left'|'right'|'top'|'bottom' (default: 'right')
+ *   - size: string — CSS width/height of the panel (default: '320px')
+ *   - overlay: boolean — show backdrop overlay (default: true)
+ *   - close-on-overlay: boolean — click overlay to close (default: true)
+ *   - no-close-btn: boolean — hide the built-in close button
+ *
+ * Slots:
+ *   - header — drawer header area
+ *   - (default) — drawer body content
+ *   - footer — drawer footer area
+ *
+ * Events:
+ *   - open:  CustomEvent — after drawer opens
+ *   - close: CustomEvent — after drawer closes
+ *
+ * Usage:
+ *   <nc-drawer id="nav-drawer" placement="left">
+ *     <span slot="header">Navigation</span>
+ *     <p>Links go here</p>
+ *   </nc-drawer>
+ *
+ *   document.getElementById('nav-drawer').setAttribute('open', '');
+ */
+
+import { Component, defineComponent } from '@core/component.js';
+
+export class NcDrawer extends Component {
+    static useShadowDOM = true;
+
+    static get observedAttributes() {
+        return ['open', 'placement', 'size', 'overlay', 'close-on-overlay', 'no-close-btn'];
+    }
+
+    template() {
+        const open = this.hasAttribute('open');
+        const placement = this.getAttribute('placement') || 'right';
+        const size = this.getAttribute('size') || '320px';
+        const showOverlay = !this.hasAttribute('overlay') || this.getAttribute('overlay') !== 'false';
+        const noCloseBtn = this.hasAttribute('no-close-btn');
+
+        const isHorizontal = placement === 'left' || placement === 'right';
+        const panelSize = isHorizontal
+            ? `width: ${size}; height: 100%;`
+            : `height: ${size}; width: 100%;`;
+
+        const translateClosed = {
+            left: 'translateX(-100%)',
+            right: 'translateX(100%)',
+            top: 'translateY(-100%)',
+            bottom: 'translateY(100%)',
+        }[placement];
+
+        return `
+            <style>
+                :host { display: contents; }
+
+                .overlay {
+                    position: fixed;
+                    inset: 0;
+                    background: rgba(0,0,0,.45);
+                    z-index: 900;
+                    opacity: ${open ? '1' : '0'};
+                    pointer-events: ${open && showOverlay ? 'auto' : 'none'};
+                    transition: opacity var(--nc-transition-base);
+                    display: ${showOverlay ? 'block' : 'none'};
+                }
+
+                .panel {
+                    position: fixed;
+                    ${placement}: 0;
+                    ${placement === 'left' || placement === 'right' ? 'top: 0;' : 'left: 0;'}
+                    ${panelSize}
+                    background: var(--nc-bg);
+                    box-shadow: var(--nc-shadow-xl, 0 20px 60px rgba(0,0,0,.3));
+                    z-index: 901;
+                    display: flex;
+                    flex-direction: column;
+                    transform: ${open ? 'none' : translateClosed};
+                    transition: transform var(--nc-transition-base);
+                    overflow: hidden;
+                }
+
+                .panel__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);
+                    font-family: var(--nc-font-family);
+                    font-weight: var(--nc-font-weight-semibold);
+                    font-size: var(--nc-font-size-lg);
+                    color: var(--nc-text);
+                    flex-shrink: 0;
+                }
+
+                .panel__body {
+                    flex: 1;
+                    overflow-y: auto;
+                    padding: var(--nc-spacing-lg);
+                }
+
+                .panel__footer {
+                    padding: var(--nc-spacing-md) var(--nc-spacing-lg);
+                    border-top: 1px solid var(--nc-border);
+                    flex-shrink: 0;
+                }
+
+                .panel__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);
+                }
+                .close-btn:hover { color: var(--nc-text); background: var(--nc-bg-secondary); }
+            </style>
+
+            ${showOverlay ? `<div class="overlay" aria-hidden="true"></div>` : ''}
+
+            <div
+                class="panel"
+                role="dialog"
+                aria-modal="true"
+                aria-hidden="${!open}"
+                tabindex="-1"
+            >
+                <div class="panel__header">
+                    <slot name="header"></slot>
+                    ${!noCloseBtn ? `
+                    <button class="close-btn" type="button" aria-label="Close drawer">
+                        <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="panel__body">
+                    <slot></slot>
+                </div>
+                <div class="panel__footer">
+                    <slot name="footer"></slot>
+                </div>
+            </div>
+        `;
+    }
+
+    onMount() {
+        this._bindEvents();
+    }
+
+    private _bindEvents() {
+        const closeBtn = this.$<HTMLButtonElement>('.close-btn');
+        if (closeBtn) {
+            closeBtn.addEventListener('click', () => this._close());
+        }
+
+        const overlay = this.$<HTMLElement>('.overlay');
+        if (overlay) {
+            overlay.addEventListener('click', () => {
+                if (!this.hasAttribute('close-on-overlay') || this.getAttribute('close-on-overlay') !== 'false') {
+                    this._close();
+                }
+            });
+        }
+
+        // Close on Escape
+        this._onKeydown = (e: KeyboardEvent) => {
+            if (e.key === 'Escape' && this.hasAttribute('open')) this._close();
+        };
+        document.addEventListener('keydown', this._onKeydown);
+    }
+
+    private _onKeydown: ((e: KeyboardEvent) => void) | null = null;
+
+    private _close() {
+        this.removeAttribute('open');
+        this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }));
+    }
+
+    onUnmount() {
+        if (this._onKeydown) document.removeEventListener('keydown', this._onKeydown);
+    }
+
+    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+        if (oldValue === newValue) return;
+        if (name === 'open' && this._mounted) {
+            const open = this.hasAttribute('open');
+            const panel = this.$<HTMLElement>('.panel');
+            const overlay = this.$<HTMLElement>('.overlay');
+            const placement = this.getAttribute('placement') || 'right';
+
+            const translateClosed = {
+                left: 'translateX(-100%)',
+                right: 'translateX(100%)',
+                top: 'translateY(-100%)',
+                bottom: 'translateY(100%)',
+            }[placement as 'left' | 'right' | 'top' | 'bottom'];
+
+            if (panel) {
+                panel.style.transform = open ? 'none' : (translateClosed ?? 'translateX(100%)');
+                panel.setAttribute('aria-hidden', String(!open));
+                if (open) panel.focus();
+            }
+            if (overlay) {
+                overlay.style.opacity = open ? '1' : '0';
+                overlay.style.pointerEvents = open ? 'auto' : 'none';
+            }
+
+            // Lock body scroll while open
+            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-drawer', NcDrawer);