microui-wc 0.1.0

package/src/components/mu-datatable.js

@@ -0,0 +1,517 @@
+/**
+ * mu-datatable.js - Smart Data Table Component
+ * 
+ * AI-First data table with built-in sorting, pagination, and filtering.
+ * Designed to minimize boilerplate code when displaying tabular data.
+ * 
+ * @example
+ * <mu-datatable
+ *     columns='[
+ *         {"field": "name", "label": "Name", "sortable": true},
+ *         {"field": "email", "label": "Email"},
+ *         {"field": "role", "label": "Role", "filterable": true}
+ *     ]'
+ *     page-size="10"
+ *     sortable>
+ * </mu-datatable>
+ * 
+ * <script>
+ *     document.querySelector('mu-datatable').setData(usersArray);
+ * </script>
+ */
+
+import { MuElement, define } from '../core/MuElement.js';
+import { escapeHTML } from '../core/utils.js';
+import { debounce } from '../core/render.js';
+
+export class MuDataTable extends MuElement {
+    static get observedAttributes() {
+        return ['columns', 'page-size', 'sortable', 'selectable', 'filterable', 'empty-message'];
+    }
+
+    static baseClass = 'mu-datatable';
+    static cssFile = 'datatable';
+
+    constructor() {
+        super();
+
+        // Internal state
+        this._data = [];
+        this._filteredData = [];
+        this._columns = [];
+        this._currentPage = 1;
+        this._sortField = null;
+        this._sortDirection = 'asc';
+        this._selectedRows = new Set();
+        this._filterValue = '';
+    }
+
+    // === PROPERTIES ===
+
+    get columns() {
+        const attr = this.getAttribute('columns');
+        if (attr) {
+            try {
+                return JSON.parse(attr);
+            } catch (e) {
+                console.warn('[mu-datatable] Invalid columns JSON:', e);
+                return [];
+            }
+        }
+        return this._columns;
+    }
+
+    set columns(value) {
+        this._columns = Array.isArray(value) ? value : [];
+        if (this.isConnected) this.render();
+    }
+
+    get pageSize() {
+        return parseInt(this.getAttribute('page-size')) || 10;
+    }
+
+    set pageSize(value) {
+        this.setAttribute('page-size', value);
+    }
+
+    get sortable() {
+        return this.hasAttribute('sortable');
+    }
+
+    get selectable() {
+        return this.hasAttribute('selectable');
+    }
+
+    get filterable() {
+        return this.hasAttribute('filterable');
+    }
+
+    get emptyMessage() {
+        return this.getAttribute('empty-message') || 'No data available';
+    }
+
+    // === LIFECYCLE ===
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.render();
+    }
+
+    attributeChangedCallback(name, oldVal, newVal) {
+        if (this.isConnected && oldVal !== newVal) {
+            this.render();
+        }
+    }
+
+    // === PUBLIC API ===
+
+    /**
+     * Set table data programmatically
+     * @param {Array<Object>} data - Array of row objects
+     */
+    setData(data) {
+        this._data = Array.isArray(data) ? data : [];
+        this._filteredData = [...this._data];
+        this._currentPage = 1;
+        this._selectedRows.clear();
+        this._applySort();
+        this.render();
+
+        this.emit('mu-data-change', { data: this._data, count: this._data.length }, { bubbles: true });
+    }
+
+    /**
+     * Get current data
+     * @returns {Array<Object>}
+     */
+    getData() {
+        return [...this._data];
+    }
+
+    /**
+     * Get current sort state
+     * @returns {{ field: string|null, direction: 'asc'|'desc' }}
+     */
+    getSortState() {
+        return { field: this._sortField, direction: this._sortDirection };
+    }
+
+    /**
+     * Get selected rows
+     * @returns {Array<Object>}
+     */
+    getSelectedRows() {
+        return this._data.filter((_, idx) => this._selectedRows.has(idx));
+    }
+
+    /**
+     * Get current page info
+     * @returns {{ page: number, pageSize: number, totalPages: number, totalRows: number }}
+     */
+    getPageInfo() {
+        const totalPages = Math.ceil(this._filteredData.length / this.pageSize);
+        return {
+            page: this._currentPage,
+            pageSize: this.pageSize,
+            totalPages,
+            totalRows: this._filteredData.length
+        };
+    }
+
+    /**
+     * Go to specific page
+     * @param {number} page
+     */
+    goToPage(page) {
+        const maxPage = Math.ceil(this._filteredData.length / this.pageSize) || 1;
+        this._currentPage = Math.max(1, Math.min(page, maxPage));
+        this.render();
+
+        this.emit('mu-page-change', this.getPageInfo(), { bubbles: true });
+    }
+
+    /**
+     * Sort by field
+     * @param {string} field
+     * @param {'asc'|'desc'} [direction]
+     */
+    sortBy(field, direction) {
+        if (this._sortField === field && !direction) {
+            this._sortDirection = this._sortDirection === 'asc' ? 'desc' : 'asc';
+        } else {
+            this._sortField = field;
+            this._sortDirection = direction || 'asc';
+        }
+        this._applySort();
+        this.render();
+
+        this.emit('mu-sort-change', this.getSortState(), { bubbles: true });
+    }
+
+    /**
+     * Filter data
+     * @param {string} query
+     */
+    filter(query) {
+        this._filterValue = query.toLowerCase();
+        this._applyFilter();
+        this._currentPage = 1;
+        this.render(false); // Partial render - preserve search input focus
+    }
+
+    // === INTERNAL METHODS ===
+
+    _applySort() {
+        if (!this._sortField) return;
+
+        this._filteredData.sort((a, b) => {
+            const valA = a[this._sortField] ?? '';
+            const valB = b[this._sortField] ?? '';
+
+            // Handle different types
+            if (typeof valA === 'number' && typeof valB === 'number') {
+                return this._sortDirection === 'asc' ? valA - valB : valB - valA;
+            }
+
+            const strA = String(valA).toLowerCase();
+            const strB = String(valB).toLowerCase();
+            const result = strA.localeCompare(strB);
+            return this._sortDirection === 'asc' ? result : -result;
+        });
+    }
+
+    _applyFilter() {
+        if (!this._filterValue) {
+            this._filteredData = [...this._data];
+            return;
+        }
+
+        const filterableColumns = this.columns.filter(c => c.filterable !== false);
+        const fields = filterableColumns.length > 0
+            ? filterableColumns.map(c => c.field)
+            : this.columns.map(c => c.field);
+
+        this._filteredData = this._data.filter(row => {
+            return fields.some(field => {
+                const value = String(row[field] ?? '').toLowerCase();
+                return value.includes(this._filterValue);
+            });
+        });
+    }
+
+    _getPageData() {
+        const start = (this._currentPage - 1) * this.pageSize;
+        const end = start + this.pageSize;
+        return this._filteredData.slice(start, end);
+    }
+
+    _handleHeaderClick(field) {
+        const column = this.columns.find(c => c.field === field);
+        if (column?.sortable !== false && this.sortable) {
+            this.sortBy(field);
+        }
+    }
+
+    _handleRowSelect(index, checked) {
+        const actualIndex = (this._currentPage - 1) * this.pageSize + index;
+        if (checked) {
+            this._selectedRows.add(actualIndex);
+        } else {
+            this._selectedRows.delete(actualIndex);
+        }
+        this.render();
+
+        this.emit('mu-selection-change', { selected: this.getSelectedRows() }, { bubbles: true });
+    }
+
+    _handleSelectAll(checked) {
+        const pageData = this._getPageData();
+        const startIdx = (this._currentPage - 1) * this.pageSize;
+
+        pageData.forEach((_, idx) => {
+            if (checked) {
+                this._selectedRows.add(startIdx + idx);
+            } else {
+                this._selectedRows.delete(startIdx + idx);
+            }
+        });
+
+        this.render();
+
+        this.emit('mu-selection-change', { selected: this.getSelectedRows() }, { bubbles: true });
+    }
+
+    render(fullRender = true) {
+        const columns = this.columns;
+        const pageData = this._getPageData();
+        const { page, totalPages, totalRows } = this.getPageInfo();
+        const startIdx = (this._currentPage - 1) * this.pageSize;
+
+        // Check if all current page items are selected
+        const allSelected = pageData.length > 0 &&
+            pageData.every((_, idx) => this._selectedRows.has(startIdx + idx));
+
+        // Surgical update: only update tbody and info if already rendered
+        const existingTbody = this.querySelector('.mu-datatable-table tbody');
+        const existingInfo = this.querySelector('.mu-datatable-info');
+        const existingPagination = this.querySelector('.mu-datatable-pagination');
+
+        if (!fullRender && existingTbody) {
+            // Update only the parts that changed
+            existingTbody.innerHTML = this._renderTbody(pageData, columns, startIdx, allSelected);
+
+            if (existingInfo) {
+                existingInfo.innerHTML = `${totalRows} row${totalRows !== 1 ? 's' : ''}${this._selectedRows.size > 0 ? ` · ${this._selectedRows.size} selected` : ''}`;
+            }
+
+            if (existingPagination) {
+                existingPagination.innerHTML = this._renderPaginationContent(page, totalPages, totalRows);
+            } else if (totalPages > 1) {
+                // Need to add pagination
+                const wrapper = this.querySelector('.mu-datatable-wrapper');
+                if (wrapper) {
+                    wrapper.insertAdjacentHTML('beforeend', this._renderPagination(page, totalPages, totalRows));
+                }
+            }
+
+            this._attachEventListeners();
+            return;
+        }
+
+        // Full render
+        this.innerHTML = `
+            <div class="mu-datatable-wrapper">
+                ${this.filterable ? `
+                    <div class="mu-datatable-toolbar">
+                        <div class="mu-datatable-search">
+                            <input 
+                                type="search" 
+                                placeholder="Search..." 
+                                value="${escapeHTML(this._filterValue)}"
+                            >
+                        </div>
+                        <div class="mu-datatable-info">
+                            ${totalRows} row${totalRows !== 1 ? 's' : ''}
+                            ${this._selectedRows.size > 0 ? ` · ${this._selectedRows.size} selected` : ''}
+                        </div>
+                    </div>
+                ` : ''}
+
+                <table class="mu-datatable-table">
+                    <thead>
+                        <tr>
+                            ${this.selectable ? `
+                                <th class="mu-datatable-checkbox-cell">
+                                    <input 
+                                        type="checkbox" 
+                                        ${allSelected ? 'checked' : ''}
+                                        data-select-all
+                                    >
+                                </th>
+                            ` : ''}
+                            ${columns.map(col => {
+            const isSortable = col.sortable !== false && this.sortable;
+            const isSorted = this._sortField === col.field;
+            const sortIcon = isSorted
+                ? (this._sortDirection === 'asc' ? '↑' : '↓')
+                : '↕';
+            return `
+                                    <th 
+                                        class="${isSortable ? 'mu-datatable-sortable' : ''} ${isSorted ? 'mu-datatable-sorted' : ''}"
+                                        data-field="${escapeHTML(col.field)}"
+                                    >
+                                        ${escapeHTML(col.label || col.field)}
+                                        ${isSortable ? `<span class="mu-datatable-sort-icon">${sortIcon}</span>` : ''}
+                                    </th>
+                                `;
+        }).join('')}
+                        </tr>
+                    </thead>
+                    <tbody>
+                        ${this._renderTbody(pageData, columns, startIdx, allSelected)}
+                    </tbody>
+                </table>
+
+                ${this._renderPagination(page, totalPages, totalRows)}
+            </div>
+        `;
+
+        this._attachEventListeners();
+    }
+
+    _renderTbody(pageData, columns, startIdx, allSelected) {
+        if (pageData.length === 0) {
+            return `
+                <tr>
+                    <td colspan="${columns.length + (this.selectable ? 1 : 0)}" class="mu-datatable-empty-state">
+                        ${escapeHTML(this.emptyMessage)}
+                    </td>
+                </tr>
+            `;
+        }
+
+        return pageData.map((row, idx) => {
+            const actualIdx = startIdx + idx;
+            const isSelected = this._selectedRows.has(actualIdx);
+
+            return `
+                <tr class="${isSelected ? 'mu-datatable-selected' : ''}" data-row-index="${idx}">
+                    ${this.selectable ? `
+                        <td class="mu-datatable-checkbox-cell">
+                            <input 
+                                type="checkbox" 
+                                ${isSelected ? 'checked' : ''}
+                                data-row-select="${idx}"
+                            >
+                        </td>
+                    ` : ''}
+                    ${columns.map(col => `
+                        <td data-field="${escapeHTML(col.field)}">
+                            ${col.render ? col.render(row[col.field], row) : escapeHTML(row[col.field] ?? '')}
+                        </td>
+                    `).join('')}
+                </tr>
+            `;
+        }).join('');
+    }
+
+    _renderPagination(page, totalPages, totalRows) {
+        if (totalPages <= 1) return '';
+        return `
+            <div class="mu-datatable-pagination">
+                ${this._renderPaginationContent(page, totalPages, totalRows)}
+            </div>
+        `;
+    }
+
+    _renderPaginationContent(page, totalPages, totalRows) {
+        return `
+            <div class="mu-datatable-pagination-info">
+                Showing ${(page - 1) * this.pageSize + 1}–${Math.min(page * this.pageSize, totalRows)} of ${totalRows}
+            </div>
+            <div class="mu-datatable-pagination-controls">
+                <button class="mu-datatable-pagination-btn" data-page="prev" ${page <= 1 ? 'disabled' : ''}>
+                    ←
+                </button>
+                ${this._getPaginationButtons(page, totalPages)}
+                <button class="mu-datatable-pagination-btn" data-page="next" ${page >= totalPages ? 'disabled' : ''}>
+                    →
+                </button>
+            </div>
+        `;
+    }
+
+    _getPaginationButtons(current, total) {
+        const buttons = [];
+        const maxButtons = 5;
+
+        let start = Math.max(1, current - Math.floor(maxButtons / 2));
+        let end = Math.min(total, start + maxButtons - 1);
+
+        if (end - start < maxButtons - 1) {
+            start = Math.max(1, end - maxButtons + 1);
+        }
+
+        for (let i = start; i <= end; i++) {
+            buttons.push(`
+                <button 
+                    class="mu-datatable-pagination-btn ${i === current ? 'mu-datatable-pagination-btn-active' : ''}"
+                    data-page="${i}"
+                >
+                    ${i}
+                </button>
+            `);
+        }
+
+        return buttons.join('');
+    }
+
+    _attachEventListeners() {
+        // Header click for sorting
+        this.querySelectorAll('th.mu-datatable-sortable').forEach(th => {
+            this.listen(th, 'click', () => {
+                this._handleHeaderClick(th.dataset.field);
+            });
+        });
+
+        // Pagination
+        this.querySelectorAll('.mu-datatable-pagination-btn[data-page]').forEach(btn => {
+            this.listen(btn, 'click', () => {
+                const page = btn.dataset.page;
+                if (page === 'prev') {
+                    this.goToPage(this._currentPage - 1);
+                } else if (page === 'next') {
+                    this.goToPage(this._currentPage + 1);
+                } else {
+                    this.goToPage(parseInt(page));
+                }
+            });
+        });
+
+        // Row selection
+        this.querySelectorAll('[data-row-select]').forEach(cb => {
+            this.listen(cb, 'change', (e) => {
+                this._handleRowSelect(parseInt(cb.dataset.rowSelect), e.target.checked);
+            });
+        });
+
+        // Select all
+        const selectAll = this.querySelector('[data-select-all]');
+        if (selectAll) {
+            this.listen(selectAll, 'change', (e) => {
+                this._handleSelectAll(e.target.checked);
+            });
+        }
+
+        // Search/filter
+        const searchInput = this.querySelector('.mu-datatable-search input');
+        if (searchInput) {
+            const debouncedFilter = debounce((value) => this.filter(value), 300);
+            this.listen(searchInput, 'input', (e) => debouncedFilter(e.target.value));
+        }
+    }
+}
+
+if (!customElements.get('mu-datatable')) {
+    customElements.define('mu-datatable', MuDataTable);
+}

package/src/components/mu-divider.js

@@ -0,0 +1,40 @@
+/**
+ * @fileoverview mu-divider - Divider Line Component
+ * 
+ * Usage:
+ * <mu-divider></mu-divider>
+ * <mu-divider vertical></mu-divider>
+ */
+
+import { MuElement, define } from '../core/MuElement.js';
+
+export class MuDivider extends MuElement {
+    static baseClass = 'mu-divider';
+    static cssFile = 'divider';
+    static observedAttributes = ['vertical', 'inset'];
+
+    render() {
+        const vertical = this.has('vertical');
+        const inset = this.has('inset');
+
+        this.style.display = 'block';
+        this.style.background = 'var(--md-sys-color-outline-variant)';
+        this.style.flexShrink = '0';
+
+        if (vertical) {
+            this.style.width = '1px';
+            this.style.minHeight = '24px';
+            this.style.margin = inset ? '0 8px' : '0';
+        } else {
+            this.style.height = '1px';
+            this.style.width = '100%';
+            this.style.margin = inset ? '0 16px' : '0';
+        }
+    }
+
+    update(attr, newValue, oldValue) {
+        this.render();
+    }
+}
+
+define('mu-divider', MuDivider);

package/src/components/mu-doc-page.js

@@ -0,0 +1,100 @@
+/**
+ * @fileoverview mu-doc-page - Self-Contained Documentation Page Component
+ * 
+ * This component encapsulates the entire 4-tab documentation structure,
+ * making it trivial to add new component documentation pages.
+ * 
+ * Usage:
+ * <mu-doc-page 
+ *   title="Button"
+ *   selector="mu-button"
+ *   description="Interactive button component">
+ *   
+ *   <div slot="overview">... overview content ...</div>
+ *   <div slot="api">... api tables ...</div>
+ *   <div slot="styling">... css tokens ...</div>
+ *   <div slot="examples">... example cards ...</div>
+ * </mu-doc-page>
+ * 
+ * Benefits:
+ * - No JavaScript needed per page - tabs work automatically
+ * - Consistent structure across all pages
+ * - Single source of truth for documentation layout
+ */
+
+import { MuElement, define } from '../core/MuElement.js';
+
+export class MuDocPage extends MuElement {
+    static baseClass = 'mu-doc-page';
+    static observedAttributes = ['title', 'selector', 'description'];
+
+    #activeTab = 0;
+
+    connectedCallback() {
+        super.connectedCallback();
+        // Use requestAnimationFrame to ensure child elements are parsed
+        requestAnimationFrame(() => this.#setupTabs());
+    }
+
+    render() {
+        const title = this.attr('title', 'Component');
+        const selector = this.attr('selector', '');
+        const description = this.attr('description', '');
+
+        // Get slot content before replacing innerHTML
+        const overviewSlot = this.querySelector('[slot="overview"]');
+        const apiSlot = this.querySelector('[slot="api"]');
+        const stylingSlot = this.querySelector('[slot="styling"]');
+        const examplesSlot = this.querySelector('[slot="examples"]');
+
+        const overviewContent = overviewSlot ? overviewSlot.innerHTML : '';
+        const apiContent = apiSlot ? apiSlot.innerHTML : '';
+        const stylingContent = stylingSlot ? stylingSlot.innerHTML : '';
+        const examplesContent = examplesSlot ? examplesSlot.innerHTML : '';
+
+        this.innerHTML = `
+            <h1 class="page-title">${title}</h1>
+            <p class="page-subtitle">
+                ${selector ? `<code>&lt;${selector}&gt;</code> ` : ''}${description}
+            </p>
+
+            <mu-tabs active="0" class="mu-doc-page__tabs" style="margin-bottom: 24px;">
+                <mu-tab>OVERVIEW</mu-tab>
+                <mu-tab>API</mu-tab>
+                <mu-tab>STYLING</mu-tab>
+                <mu-tab>EXAMPLES</mu-tab>
+            </mu-tabs>
+
+            <div class="mu-doc-page__content mu-doc-page__overview">
+                ${overviewContent}
+            </div>
+            <div class="mu-doc-page__content mu-doc-page__api" style="display: none;">
+                ${apiContent}
+            </div>
+            <div class="mu-doc-page__content mu-doc-page__styling" style="display: none;">
+                ${stylingContent}
+            </div>
+            <div class="mu-doc-page__content mu-doc-page__examples" style="display: none;">
+                ${examplesContent}
+            </div>
+        `;
+
+        this.style.display = 'block';
+    }
+
+    #setupTabs() {
+        const tabs = this.querySelector('.mu-doc-page__tabs');
+        const contents = this.querySelectorAll('.mu-doc-page__content');
+
+        if (tabs) {
+            this.listen(tabs, 'mu-tab-change', (e) => {
+                this.#activeTab = e.detail.index;
+                contents.forEach((content, i) => {
+                    content.style.display = i === this.#activeTab ? 'block' : 'none';
+                });
+            });
+        }
+    }
+}
+
+define('mu-doc-page', MuDocPage);