@ahriknow/lux 0.0.1

package/src/components/lux-layout/index.js

@@ -0,0 +1,222 @@
+import { html, css, LuxElement, registerComponent } from '../../index.js';
+
+/**
+ * lux-layout — Aside-left layout component.
+ *
+ * Structure:
+ *   aside | header
+ *         | main (flex:1, overflow:auto)
+ *         | footer
+ *
+ * Usage:
+ *   <lux-layout aside-width="240px" aside-min="120px" aside-max="400px">
+ *     <header slot="header">Header</header>
+ *     <aside slot="aside">Sidebar</aside>
+ *     <main slot="main">Content</main>
+ *     <footer slot="footer">Footer</footer>
+ *   </lux-layout>
+ *
+ * Props:
+ *   aside-width   — aside width (number=px, string='20rem')
+ *   aside-min     — min width for aside drag
+ *   aside-max     — max width for aside drag
+ *   aside-scroll  — aside overflow scroll
+ *   no-header     — hide header
+ *   no-footer     — hide footer
+ *   no-aside      — hide aside
+ */
+
+const styles = css`
+    :host {
+        display: block;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+    }
+
+    .root {
+        display: flex;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+    }
+
+    .slot-aside {
+        z-index: 3;
+        flex-shrink: 0;
+        width: var(--aside-w, 240px);
+        min-width: var(--aside-min, 120px);
+        max-width: var(--aside-max, 50vw);
+        overflow: hidden;
+        position: relative;
+        border-right: 1px solid rgb(var(--lux-border, 51 65 85));
+        background: rgb(var(--lux-card, 30 41 59));
+    }
+
+    :host([aside-scroll]) .slot-aside {
+        overflow-y: auto;
+    }
+
+    .slot-right {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        min-width: 0;
+    }
+
+    .slot-header {
+        flex-shrink: 0;
+        z-index: 2;
+    }
+    .slot-footer {
+        flex-shrink: 0;
+        z-index: 2;
+    }
+    .slot-main {
+        flex: 1;
+        overflow: auto;
+        min-height: 0;
+        z-index: 1;
+    }
+
+    :host([no-header]) .slot-header {
+        display: none;
+    }
+    :host([no-footer]) .slot-footer {
+        display: none;
+    }
+    :host([no-aside]) .slot-aside {
+        display: none;
+    }
+
+    .resize-handle {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 6px;
+        height: 100%;
+        cursor: col-resize;
+        z-index: 10;
+        background: transparent;
+        transition: background var(--lux-transition, 150ms ease);
+    }
+    .resize-handle:hover {
+        background: rgb(var(--lux-primary-400, 129 120 247) / 0.3);
+    }
+`;
+
+class LuxLayout extends LuxElement {
+    static styles = styles;
+
+    static properties = {
+        asideWidth: { type: String, attribute: 'aside-width', reflect: true },
+        asideMin: { type: String, attribute: 'aside-min', reflect: true },
+        asideMax: { type: String, attribute: 'aside-max', reflect: true },
+        asideScroll: { type: Boolean, attribute: 'aside-scroll', reflect: true },
+        noHeader: { type: Boolean, attribute: 'no-header', reflect: true },
+        noFooter: { type: Boolean, attribute: 'no-footer', reflect: true },
+        noAside: { type: Boolean, attribute: 'no-aside', reflect: true },
+    };
+
+    constructor() {
+        super();
+        this.asideWidth = '240px';
+        this.asideMin = '120px';
+        this.asideMax = '50vw';
+    }
+
+    firstUpdated() {
+        this._applyAside();
+        this._initDrag();
+    }
+
+    updated() {
+        if (!this._dragging) this._applyAside();
+    }
+
+    _parseWidth(val) {
+        if (val == null) return null;
+        if (typeof val === 'number') return val + 'px';
+        if (/^\d+(\.\d+)?$/.test(val)) return val + 'px';
+        return val;
+    }
+
+    _toPx(val) {
+        const w = this._parseWidth(val);
+        if (!w) return 0;
+        if (w.endsWith('vw')) return (parseFloat(w) / 100) * window.innerWidth;
+        if (w.endsWith('em') || w.endsWith('rem')) return parseFloat(w) * 16;
+        return parseFloat(w) || 0;
+    }
+
+    _applyAside() {
+        const w = this._parseWidth(this.asideWidth) || '240px';
+        const min = this._parseWidth(this.asideMin) || '120px';
+        const max = this._parseWidth(this.asideMax) || '50vw';
+        this.style.setProperty('--aside-w', w);
+        this.style.setProperty('--aside-min', min);
+        this.style.setProperty('--aside-max', max);
+    }
+
+    _initDrag() {
+        const handle = this.renderRoot.querySelector('.resize-handle');
+        if (!handle) return;
+
+        handle.addEventListener('mousedown', (e) => {
+            e.preventDefault();
+            const aside = this.renderRoot.querySelector('.slot-aside');
+            if (!aside) return;
+
+            const min = this._toPx(this.asideMin) || 120;
+            const max = this._toPx(this.asideMax) || 9999;
+            const startW = aside.offsetWidth || 240;
+            const startX = e.clientX;
+
+            this._dragging = true;
+            handle.classList.add('dragging');
+
+            const onMove = (ev) => {
+                const w = Math.min(max, Math.max(min, startW + ev.clientX - startX));
+                aside.style.width = w + 'px';
+            };
+
+            const onUp = () => {
+                this._dragging = false;
+                handle.classList.remove('dragging');
+                document.removeEventListener('mousemove', onMove);
+                document.removeEventListener('mouseup', onUp);
+                this.asideWidth = aside.offsetWidth + 'px';
+                this.style.setProperty('--aside-w', this.asideWidth);
+                this.dispatchEvent(
+                    new CustomEvent('aside-resize', {
+                        detail: { width: this.asideWidth },
+                        bubbles: true,
+                        composed: true,
+                    })
+                );
+            };
+
+            document.addEventListener('mousemove', onMove);
+            document.addEventListener('mouseup', onUp);
+        });
+    }
+
+    render() {
+        return html`
+            <div class="root">
+                <div class="slot-aside">
+                    <slot name="aside"></slot>
+                    <div class="resize-handle"></div>
+                </div>
+                <div class="slot-right">
+                    <div class="slot-header"><slot name="header"></slot></div>
+                    <div class="slot-main"><slot name="main"></slot></div>
+                    <div class="slot-footer"><slot name="footer"></slot></div>
+                </div>
+            </div>
+        `;
+    }
+}
+
+registerComponent('lux-layout', LuxLayout);
+export default LuxLayout;

package/src/components/lux-menu/index.js

@@ -0,0 +1,283 @@
+/**
+ * lux-menu — Data-driven navigation menu.
+ *
+ * Props:
+ *   items          — array of menu items
+ *   collapse-width — auto-collapse when host width < this value (px)
+ *   collapsed      — force collapsed state (boolean)
+ *   active-key     — currently active item key
+ *
+ * Events:
+ *   select — fired when item clicked, detail: { key, item }
+ */
+
+import { html, css, LuxElement, registerComponent, classMap } from '../../index.js';
+import '../lux-icon/index.js';
+
+const styles = css`
+    :host {
+        display: block;
+        width: 100%;
+    }
+
+    .menu {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+    }
+
+    .item {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 6px 12px;
+        border-radius: 6px;
+        cursor: pointer;
+        color: rgb(var(--lux-text-secondary));
+        font-size: 14px;
+        white-space: nowrap;
+        user-select: none;
+        min-height: 36px;
+        transition: all 150ms ease;
+        text-decoration: none;
+    }
+    .item:hover {
+        background: rgb(var(--lux-hover));
+        color: rgb(var(--lux-text));
+    }
+    .item.active {
+        background: rgb(var(--lux-primary-400) / 10%);
+        color: rgb(var(--lux-primary-400));
+        font-weight: 500;
+    }
+    .item.disabled {
+        opacity: 0.4;
+        pointer-events: none;
+    }
+
+    .item-icon {
+        flex-shrink: 0;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 22px;
+        height: 22px;
+    }
+    .item-label {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    .item-arrow {
+        flex-shrink: 0;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 24px;
+        transition: transform 150ms ease;
+        font-size: 22px;
+    }
+    .item-arrow.open {
+        transform: rotate(90deg);
+    }
+
+    .divider {
+        height: 1px;
+        background: rgb(var(--lux-border));
+        margin: 4px 12px;
+    }
+    .children {
+        padding-left: 16px;
+    }
+
+    :host([collapsed]) .menu {
+        width: 48px;
+        align-items: center;
+    }
+    :host([collapsed]) .item {
+        justify-content: center;
+        padding: 8px;
+        width: 36px;
+        height: 36px;
+        min-height: auto;
+        position: relative;
+    }
+    :host([collapsed]) .item-label,
+    :host([collapsed]) .item-arrow {
+        display: none;
+    }
+    :host([collapsed]) .children {
+        display: none;
+    }
+    :host([collapsed]) .divider {
+        width: 24px;
+        margin: 4px auto;
+    }
+
+    :host([collapsed]) .item::after {
+        content: attr(data-label);
+        display: none;
+        position: absolute;
+        left: 100%;
+        top: 50%;
+        transform: translateY(-50%);
+        margin-left: 8px;
+        padding: 4px 8px;
+        background: rgb(var(--lux-card));
+        border: 1px solid rgb(var(--lux-border));
+        border-radius: 6px;
+        box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
+        font-size: 12px;
+        color: rgb(var(--lux-text));
+        white-space: nowrap;
+        z-index: 1001;
+        pointer-events: none;
+    }
+    :host([collapsed]) .item:hover::after {
+        display: block;
+    }
+
+    :host([collapsed]) .popup-wrap {
+        position: relative;
+        display: inline-flex;
+    }
+    :host([collapsed]) .children-popup {
+        display: none;
+        position: absolute;
+        left: 100%;
+        top: 0;
+        min-width: 180px;
+        background: rgb(var(--lux-card));
+        border: 1px solid rgb(var(--lux-border));
+        border-radius: 6px;
+        box-shadow: 0 4px 12px rgb(0 0 0 / 20%);
+        padding: 4px;
+        z-index: 1000;
+    }
+    :host([collapsed]) .popup-wrap:hover > .children-popup {
+        display: block;
+    }
+    :host([collapsed]) .children-popup .item {
+        width: auto;
+        min-height: auto;
+        justify-content: flex-start;
+        padding: 6px 12px;
+    }
+    :host([collapsed]) .children-popup .item-label {
+        display: block;
+    }
+    :host([collapsed]) .children-popup .children {
+        display: block;
+        padding-left: 12px;
+    }
+    :host([collapsed]) .children-popup .divider {
+        margin: 4px 8px;
+    }
+`;
+
+class LuxMenu extends LuxElement {
+    static styles = styles;
+
+    static properties = {
+        items: { type: Array, attribute: false },
+        collapseWidth: { type: Number, attribute: 'collapse-width', reflect: true },
+        collapsed: { type: Boolean, reflect: true },
+        activeKey: { type: String, attribute: 'active-key', reflect: true },
+    };
+
+    constructor() {
+        super();
+        this._expandedKeys = new Set();
+        this._resizeObserver = null;
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+
+        // Sync items from multiple sources:
+        // 1. .items property binding (may have been set before upgrade via cloneNode)
+        // 2. data-items attribute (JSON string)
+        // 3. LuxElement property system (after _initializeProperties)
+        this._syncItems();
+
+        this._resizeObserver = new ResizeObserver(() => {
+            const cw = parseInt(this.getAttribute('collapse-width'));
+            if (cw) this.collapsed = this.offsetWidth < cw;
+        });
+        this._resizeObserver.observe(this);
+    }
+
+    disconnectedCallback() {
+        this._resizeObserver?.disconnect();
+    }
+
+    _syncItems() {
+        // Priority: this.items (property binding) > data-items attribute > empty
+        const items = this.items;
+        if (Array.isArray(items) && items.length > 0) {
+            this.requestUpdate();
+            return;
+        }
+        // Fallback: read data-items attribute
+        const dataAttr = this.getAttribute('data-items');
+        if (dataAttr) {
+            try {
+                this.items = JSON.parse(dataAttr);
+            } catch {}
+        }
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === 'data-items' && newValue !== oldValue) {
+            try {
+                this.items = JSON.parse(newValue);
+            } catch {}
+        }
+    }
+
+    _toggleExpand(key) {
+        if (this._expandedKeys.has(key)) this._expandedKeys.delete(key);
+        else this._expandedKeys.add(key);
+        this.requestUpdate();
+    }
+
+    _onItemClick(item) {
+        if (item.disabled) return;
+        if (item.children && item.children.length) this._toggleExpand(item.key);
+        this.activeKey = item.key;
+        this.setAttribute('active-key', item.key);
+        this.requestUpdate();
+        this.emit('select', { key: item.key, item });
+    }
+
+    _renderItems(items) {
+        if (!items || !items.length) return '';
+        const activeKey = this.activeKey || this.getAttribute('active-key') || '';
+        return items.map((item) => {
+            if (item.divider) return html`<div class="divider"></div>`;
+            const has = item.children && item.children.length > 0;
+            const isAct = item.key === activeKey;
+            const isExp = this._expandedKeys.has(item.key);
+            return html`
+                <div
+                    class=${classMap({ item: true, active: isAct, disabled: item.disabled })}
+                    data-label="${item.label || ''}"
+                    @click=${() => this._onItemClick(item)}
+                >
+                    ${item.icon ? html`<span class="item-icon"><lux-icon .name=${item.icon} size="20px"></lux-icon></span>` : ''}
+                    <span class="item-label">${item.label || ''}</span>
+                    ${has ? html`<span class=${classMap({ 'item-arrow': true, open: isExp })}>›</span>` : ''}
+                </div>
+                ${has && isExp ? html`<div class="children">${this._renderItems(item.children)}</div>` : ''}
+            `;
+        });
+    }
+
+    render() {
+        return html`<div class="menu">${this._renderItems(this.items || [])}</div>`;
+    }
+}
+
+registerComponent('lux-menu', LuxMenu);
+export default LuxMenu;