microui-wc 0.1.0

package/demo/content/virtual-lists.html

@@ -0,0 +1,233 @@
+<div class="page active">
+    <h1 class="page-title">Virtual List</h1>
+    <p class="page-subtitle">
+        <code>&lt;mu-virtual-list&gt;</code> efficiently renders large datasets
+        by only displaying visible items (virtualization).
+    </p>
+
+    <mu-tabs active="0" id="virtuallist-doc-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 id="virtuallist-overview" class="doc-tab-content">
+        <mu-example title="Basic Virtual List (1,000 items)">
+            <div slot="demo">
+                <mu-virtual-list id="demo-virtual-list" item-height="50"
+                    style="height: 300px; width: 100%; border: 1px solid var(--md-sys-color-outline); border-radius: 8px;">
+                </mu-virtual-list>
+            </div>
+            <div slot="code">&lt;mu-virtual-list
+                item-height="50"
+                .items="${largeArray}"
+                .renderItem="${(item) => `&lt;div&gt;${item.name}&lt;/div&gt;`}"&gt;
+                &lt;/mu-virtual-list&gt;</div>
+        </mu-example>
+
+        <div class="component-section">
+            <h2 class="section-title">When to use</h2>
+            <mu-card variant="outlined">
+                <mu-stack gap="md">
+                    <mu-stack direction="row" gap="sm" align="start">
+                        <mu-icon name="check_circle" size="20"
+                            style="color: var(--md-sys-color-primary); margin-top: 2px;"></mu-icon>
+                        <div>
+                            <strong>Large datasets (100+ items)</strong>
+                            <div style="font-size: 13px; color: var(--md-sys-color-on-surface-variant);">Chat logs,
+                                logs, big tables, infinite scroll</div>
+                        </div>
+                    </mu-stack>
+                    <mu-stack direction="row" gap="sm" align="start">
+                        <mu-icon name="check_circle" size="20"
+                            style="color: var(--md-sys-color-primary); margin-top: 2px;"></mu-icon>
+                        <div>
+                            <strong>Performance-critical UI</strong>
+                            <div style="font-size: 13px; color: var(--md-sys-color-on-surface-variant);">When rendering
+                                all items would cause lag</div>
+                        </div>
+                    </mu-stack>
+                </mu-stack>
+            </mu-card>
+        </div>
+
+        <div class="component-section">
+            <h2 class="section-title">When NOT to use</h2>
+            <mu-stack gap="md">
+                <mu-alert severity="warning">Don't use for <strong>small lists (&lt;50 items)</strong> - overhead isn't
+                    worth it</mu-alert>
+                <mu-alert severity="warning">Don't use for <strong>variable-height items</strong> without setting proper
+                    item-height</mu-alert>
+            </mu-stack>
+        </div>
+
+        <mu-example title="Custom Item Rendering">
+            <div slot="demo">
+                <mu-virtual-list id="demo-virtual-list-custom" item-height="72"
+                    style="height: 300px; width: 100%; border: 1px solid var(--md-sys-color-outline); border-radius: 8px;">
+                </mu-virtual-list>
+            </div>
+            <div slot="code">&lt;mu-virtual-list
+                item-height="72"
+                .items="${users}"
+                .renderItem="${(user) => `
+                &lt;mu-stack direction="row" gap="md" align="center" style="padding: 12px 16px;"&gt;
+                &lt;mu-avatar initials="${user.initials}"&gt;&lt;/mu-avatar&gt;
+                &lt;div&gt;
+                &lt;strong&gt;${user.name}&lt;/strong&gt;
+                &lt;div style="font-size: 12px; opacity: 0.7;"&gt;${user.email}&lt;/div&gt;
+                &lt;/div&gt;
+                &lt;/mu-stack&gt;
+                `}"&gt;
+                &lt;/mu-virtual-list&gt;</div>
+        </mu-example>
+    </div>
+
+    <div id="virtuallist-api" class="doc-tab-content" style="display: none;">
+        <div class="component-section">
+            <h2 class="section-title">Attributes</h2>
+            <mu-api-table type="attributes">
+                <mu-api-row name="item-height" type="number" default="50">Height of each item in pixels (required for
+                    calculations)</mu-api-row>
+                <mu-api-row name="buffer" type="number" default="5">Number of extra items to render above/below
+                    viewport</mu-api-row>
+            </mu-api-table>
+        </div>
+
+        <div class="component-section">
+            <h2 class="section-title">Properties</h2>
+            <mu-api-table type="properties">
+                <mu-api-row name="items" type="Array" default="[]">The array of data items to render</mu-api-row>
+                <mu-api-row name="renderItem" type="Function" default="(item) => item">Render function: (item, index) =>
+                    HTML string</mu-api-row>
+            </mu-api-table>
+        </div>
+
+        <div class="component-section">
+            <h2 class="section-title">Methods</h2>
+            <mu-api-table type="methods">
+                <mu-api-row name="scrollToIndex(index)" type="void">Scrolls to bring the item at given index into
+                    view</mu-api-row>
+            </mu-api-table>
+        </div>
+    </div>
+
+    <div id="virtuallist-styling" class="doc-tab-content" style="display: none;">
+        <div class="component-section">
+            <h2 class="section-title">CSS Custom Properties</h2>
+            <mu-api-table type="tokens">
+                <mu-api-row name="--md-sys-color-surface" default="#FFFBFE">Background color of items</mu-api-row>
+                <mu-api-row name="--md-sys-color-outline" default="#79747E">Border color</mu-api-row>
+            </mu-api-table>
+        </div>
+
+        <div class="component-section">
+            <h2 class="section-title">Styling Tips</h2>
+            <p style="color: var(--md-sys-color-on-surface-variant); line-height: 1.6;">
+                The virtual list container needs a fixed height to calculate visible items.
+                Set <code>height</code> or use CSS like <code>flex: 1</code> in a flex container.
+                Items are positioned absolutely, so padding should be applied inside the
+                <code>renderItem</code> template.
+            </p>
+        </div>
+    </div>
+
+    <div id="virtuallist-examples" class="doc-tab-content" style="display: none;">
+        <mu-example title="Performance comparison">
+            <div slot="demo">
+                <mu-stack gap="md">
+                    <mu-card variant="outlined">
+                        <mu-stack direction="row" gap="md" align="center">
+                            <mu-icon name="check_circle" style="color: var(--md-sys-color-primary);"></mu-icon>
+                            <div>
+                                <strong>Virtual List (10,000 items)</strong>
+                                <div style="font-size: 12px; opacity: 0.7;">Only ~20 DOM nodes rendered</div>
+                            </div>
+                        </mu-stack>
+                    </mu-card>
+                    <mu-card variant="outlined">
+                        <mu-stack direction="row" gap="md" align="center">
+                            <mu-icon name="warning" style="color: var(--md-sys-color-error);"></mu-icon>
+                            <div>
+                                <strong>Regular DOM (10,000 items)</strong>
+                                <div style="font-size: 12px; opacity: 0.7;">10,000 DOM nodes = 💥 Performance hit</div>
+                            </div>
+                        </mu-stack>
+                    </mu-card>
+                </mu-stack>
+            </div>
+            <div slot="code">// Virtual list: O(visible) DOM nodes
+                // Regular list: O(n) DOM nodes
+
+                // With 10,000 items and 50px item height:
+                // Virtual: ~20 nodes (viewport height / item height)
+                // Regular: 10,000 nodes</div>
+        </mu-example>
+
+        <mu-example title="Scroll to index">
+            <div slot="demo">
+                <mu-stack gap="md">
+                    <mu-stack direction="row" gap="sm">
+                        <mu-button onclick="document.getElementById('demo-virtual-list').scrollToIndex(0)">Go to
+                            Top</mu-button>
+                        <mu-button onclick="document.getElementById('demo-virtual-list').scrollToIndex(500)">Go to
+                            #500</mu-button>
+                        <mu-button onclick="document.getElementById('demo-virtual-list').scrollToIndex(999)">Go to
+                            Bottom</mu-button>
+                    </mu-stack>
+                </mu-stack>
+            </div>
+            <div slot="code">const list = document.querySelector('mu-virtual-list');
+                list.scrollToIndex(500); // Jump to item 500</div>
+        </mu-example>
+    </div>
+</div>
+
+<script>
+    // Initialize demo virtual lists with sample data
+    // Use customElements.whenDefined to ensure component is fully upgraded
+    customElements.whenDefined('mu-virtual-list').then(() => {
+        // Use setTimeout to ensure render() has completed
+        setTimeout(() => {
+            // Basic list with 1000 items
+            const basicList = document.getElementById('demo-virtual-list');
+            if (basicList) {
+                const items = Array.from({ length: 1000 }, (_, i) => ({
+                    id: i,
+                    name: `Item ${i + 1}`
+                }));
+                basicList.renderItem = (item) => `
+                    <div style="padding: 12px 16px; border-bottom: 1px solid var(--md-sys-color-outline-variant); display: flex; align-items: center; gap: 12px;">
+                        <mu-icon name="fiber_manual_record" style="font-size: 8px; color: var(--md-sys-color-primary);"></mu-icon>
+                        <span>${item.name}</span>
+                    </div>
+                `;
+                basicList.items = items;
+            }
+
+            // Custom list with user cards
+            const customList = document.getElementById('demo-virtual-list-custom');
+            if (customList) {
+                const users = Array.from({ length: 500 }, (_, i) => ({
+                    id: i,
+                    name: `User ${i + 1}`,
+                    email: `user${i + 1}@example.com`,
+                    initials: `U${i + 1}`
+                }));
+                customList.renderItem = (user) => `
+                    <div style="padding: 12px 16px; border-bottom: 1px solid var(--md-sys-color-outline-variant); display: flex; align-items: center; gap: 12px;">
+                        <div style="width: 40px; height: 40px; border-radius: 50%; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 14px;">
+                            ${user.initials.substring(0, 2)}
+                        </div>
+                        <div>
+                            <strong>${user.name}</strong>
+                            <div style="font-size: 12px; color: var(--md-sys-color-on-surface-variant);">${user.email}</div>
+                        </div>
+                    </div>
+                `;
+                customList.items = users;
+            }
+        }, 0);
+    });
+</script>

package/demo/full.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>microUI - Full Bundle Variant</title>
+    <link rel="stylesheet" href="/dist/microui.css">
+    <style>
+        body {
+            font-family: var(--md-sys-typescale-font);
+            background: var(--md-sys-color-background);
+            color: var(--md-sys-color-on-background);
+            margin: 0;
+            padding: 20px;
+        }
+    </style>
+</head>
+
+<body>
+    <mu-container size="md">
+        <mu-stack gap="lg">
+            <mu-card variant="outlined" padding="lg">
+                <mu-stack gap="md">
+                    <h1>Variant 2: Full Bundle</h1>
+                    <p>This page loads the <b>Monolithic Bundle</b> (97KB). Check the Network tab!</p>
+                    <mu-code>
+                        &lt;script type="module" src="/dist/microui.esm.js"&gt;&lt;/script&gt;
+                    </mu-code>
+                    <mu-divider></mu-divider>
+                    <mu-grid cols="2" gap="md">
+                        <mu-button variant="filled">Filled Button</mu-button>
+                        <mu-button variant="outlined">Outlined Button</mu-button>
+                    </mu-grid>
+                    <mu-dropdown placeholder="Select Option">
+                        <mu-option value="1">Option 1</mu-option>
+                        <mu-option value="2">Option 2</mu-option>
+                        <mu-option value="3">Option 3</mu-option>
+                    </mu-dropdown>
+                </mu-stack>
+            </mu-card>
+            <mu-card>
+                <a href="/">Go to SOTA Variant (App Shell)</a>
+            </mu-card>
+        </mu-stack>
+    </mu-container>
+
+    <!-- Load Full Bundle -->
+    <script type="module" src="/dist/microui.esm.js"></script>
+</body>
+
+</html>

package/demo/iife.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>microUI - IIFE Legacy Variant</title>
+    <link rel="stylesheet" href="/dist/microui.css">
+    <style>
+        body {
+            font-family: var(--md-sys-typescale-font);
+            background: var(--md-sys-color-background);
+            color: var(--md-sys-color-on-background);
+            margin: 0;
+            padding: 20px;
+        }
+    </style>
+</head>
+
+<body>
+    <mu-container size="md">
+        <mu-stack gap="lg">
+            <mu-card variant="outlined" padding="lg">
+                <mu-stack gap="md">
+                    <h1>Variant 3: IIFE (Legacy)</h1>
+                    <p>This loads <code>microui.min.js</code> (98KB) as a global script. Useful for non-module
+                        environments.</p>
+                    <mu-code>
+                        &lt;script src="/dist/microui.min.js"&gt;&lt;/script&gt;
+                    </mu-code>
+                    <mu-divider></mu-divider>
+                    <mu-button variant="filled" onclick="alert('Works!')">Click Me</mu-button>
+                    <mu-badge variant="error">Legacy Mode</mu-badge>
+                </mu-stack>
+            </mu-card>
+            <mu-card>
+                <a href="/">Go to SOTA Variant (App Shell)</a>
+            </mu-card>
+        </mu-stack>
+    </mu-container>
+
+    <!-- Load IIFE Bundle -->
+    <script src="/dist/microui.min.js"></script>
+</body>
+
+</html>

package/demo/manifest.json

@@ -0,0 +1,34 @@
+{
+    "name": "microUI",
+    "short_name": "microUI",
+    "description": "AI-First Web Components Library with 40+ Material Design 3 components",
+    "version": "0.1.0",
+    "start_url": "/",
+    "display": "standalone",
+    "background_color": "#141218",
+    "theme_color": "#6750A4",
+    "orientation": "any",
+    "icons": [
+        {
+            "src": "/favicon.png",
+            "sizes": "64x64",
+            "type": "image/png"
+        },
+        {
+            "src": "/assets/logo-icon-64.webp",
+            "sizes": "64x64",
+            "type": "image/webp"
+        },
+        {
+            "src": "/assets/logo-icon-64.jpg",
+            "sizes": "64x64",
+            "type": "image/jpeg"
+        }
+    ],
+    "categories": [
+        "development",
+        "utilities"
+    ],
+    "lang": "en",
+    "dir": "ltr"
+}

package/demo/pages/datatable-demo.html

@@ -0,0 +1,237 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Data Table Demo - microUI</title>
+    <link rel="stylesheet" href="../../dist/microui.css">
+    <style>
+        body {
+            font-family: var(--md-sys-typescale-font);
+            background: var(--md-sys-color-background);
+            color: var(--md-sys-color-on-background);
+            padding: 24px;
+            margin: 0;
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+
+        h1 {
+            margin-bottom: 8px;
+        }
+
+        .subtitle {
+            color: var(--md-sys-color-on-surface-variant);
+            margin-bottom: 32px;
+        }
+
+        .section {
+            margin-bottom: 48px;
+        }
+
+        .section h2 {
+            margin-bottom: 16px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .actions {
+            margin-bottom: 16px;
+            display: flex;
+            gap: 8px;
+            flex-wrap: wrap;
+        }
+
+        code {
+            background: var(--md-sys-color-surface-container);
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-size: 13px;
+        }
+
+        pre {
+            background: var(--md-sys-color-surface-container);
+            padding: 16px;
+            border-radius: 8px;
+            overflow-x: auto;
+            font-size: 13px;
+        }
+
+        .console-output {
+            background: var(--md-sys-color-inverse-surface);
+            color: var(--md-sys-color-inverse-on-surface);
+            padding: 12px 16px;
+            border-radius: 8px;
+            font-family: monospace;
+            font-size: 13px;
+            margin-top: 16px;
+            min-height: 40px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="container">
+        <h1>🗃️ mu-datatable</h1>
+        <p class="subtitle">Smart Data Table with built-in sorting, pagination, and filtering</p>
+
+        <!-- Basic Example -->
+        <section class="section">
+            <h2>📊 Basic Table</h2>
+            <div class="actions">
+                <mu-button id="btn-load" variant="filled">Load 50 Users</mu-button>
+                <mu-button id="btn-load-100" variant="tonal">Load 100 Users</mu-button>
+                <mu-button id="btn-clear" variant="outlined">Clear</mu-button>
+                <mu-button id="btn-state" variant="text">Log State</mu-button>
+            </div>
+
+            <mu-datatable id="users-table" columns='[
+                    {"field": "id", "label": "#", "sortable": true},
+                    {"field": "name", "label": "Name", "sortable": true},
+                    {"field": "email", "label": "Email", "sortable": true},
+                    {"field": "role", "label": "Role", "sortable": true},
+                    {"field": "status", "label": "Status"}
+                ]' page-size="10" sortable filterable selectable
+                empty-message="Click 'Load Users' to populate the table">
+            </mu-datatable>
+
+            <div id="console" class="console-output">Console output will appear here...</div>
+        </section>
+
+        <!-- Usage Example -->
+        <section class="section">
+            <h2>💻 Usage</h2>
+            <pre><code>&lt;mu-datatable 
+    id="my-table"
+    columns='[
+        {"field": "name", "label": "Name", "sortable": true},
+        {"field": "email", "label": "Email"},
+        {"field": "role", "label": "Role"}
+    ]'
+    page-size="10"
+    sortable
+    filterable
+    selectable&gt;
+&lt;/mu-datatable&gt;
+
+&lt;script&gt;
+    const table = document.getElementById('my-table');
+    
+    // Set data programmatically
+    table.setData(usersArray);
+    
+    // Get current state
+    console.log(table.getSortState());    // { field: 'name', direction: 'asc' }
+    console.log(table.getSelectedRows()); // [...selected rows...]
+    console.log(table.getPageInfo());     // { page: 1, totalPages: 5, ... }
+    
+    // Sort programmatically
+    table.sortBy('name', 'desc');
+    
+    // Navigate pages
+    table.goToPage(2);
+    
+    // Filter
+    table.filter('admin');
+&lt;/script&gt;</code></pre>
+        </section>
+
+        <!-- API Reference -->
+        <section class="section">
+            <h2>📚 API</h2>
+            <mu-datatable id="api-table" columns='[
+                    {"field": "method", "label": "Method"},
+                    {"field": "params", "label": "Parameters"},
+                    {"field": "description", "label": "Description"}
+                ]' page-size="20">
+            </mu-datatable>
+        </section>
+    </div>
+
+    <script type="module">
+        // Use the pre-built bundle (resolves signalbus dependency)
+        import '../../dist/microui.esm.js';
+
+        const table = document.getElementById('users-table');
+        const consoleEl = document.getElementById('console');
+
+        function log(msg) {
+            consoleEl.textContent = typeof msg === 'object' ? JSON.stringify(msg, null, 2) : msg;
+        }
+
+        // Generate fake user data
+        function generateUsers(count) {
+            const roles = ['Admin', 'User', 'Moderator', 'Editor', 'Viewer'];
+            const statuses = ['Active', 'Inactive', 'Pending'];
+            const firstNames = ['Alice', 'Bob', 'Charlie', 'Diana', 'Eve', 'Frank', 'Grace', 'Henry', 'Ivy', 'Jack'];
+            const lastNames = ['Smith', 'Johnson', 'Williams', 'Brown', 'Jones', 'Garcia', 'Miller', 'Davis', 'Rodriguez', 'Martinez'];
+
+            return Array.from({ length: count }, (_, i) => ({
+                id: i + 1,
+                name: `${firstNames[Math.floor(Math.random() * firstNames.length)]} ${lastNames[Math.floor(Math.random() * lastNames.length)]}`,
+                email: `user${i + 1}@example.com`,
+                role: roles[Math.floor(Math.random() * roles.length)],
+                status: statuses[Math.floor(Math.random() * statuses.length)]
+            }));
+        }
+
+        // Button handlers
+        document.getElementById('btn-load').addEventListener('click', () => {
+            const users = generateUsers(50);
+            table.setData(users);
+            log(`Loaded ${users.length} users`);
+        });
+
+        document.getElementById('btn-load-100').addEventListener('click', () => {
+            const users = generateUsers(100);
+            table.setData(users);
+            log(`Loaded ${users.length} users`);
+        });
+
+        document.getElementById('btn-clear').addEventListener('click', () => {
+            table.setData([]);
+            log('Table cleared');
+        });
+
+        document.getElementById('btn-state').addEventListener('click', () => {
+            log({
+                sort: table.getSortState(),
+                page: table.getPageInfo(),
+                selected: table.getSelectedRows().length + ' rows selected'
+            });
+        });
+
+        // Event listeners
+        table.addEventListener('mu-sort-change', (e) => {
+            log(`Sort changed: ${e.detail.field} ${e.detail.direction}`);
+        });
+
+        table.addEventListener('mu-page-change', (e) => {
+            log(`Page changed: ${e.detail.page} of ${e.detail.totalPages}`);
+        });
+
+        table.addEventListener('mu-selection-change', (e) => {
+            log(`Selection changed: ${e.detail.selected.length} rows selected`);
+        });
+
+        // API table data
+        const apiTable = document.getElementById('api-table');
+        apiTable.setData([
+            { method: 'setData(array)', params: 'Array<Object>', description: 'Set table data' },
+            { method: 'getData()', params: '-', description: 'Get current data array' },
+            { method: 'getSortState()', params: '-', description: 'Get current sort field and direction' },
+            { method: 'getSelectedRows()', params: '-', description: 'Get selected row objects' },
+            { method: 'getPageInfo()', params: '-', description: 'Get page, pageSize, totalPages, totalRows' },
+            { method: 'sortBy(field, dir)', params: 'string, "asc"|"desc"', description: 'Sort by field programmatically' },
+            { method: 'goToPage(num)', params: 'number', description: 'Navigate to specific page' },
+            { method: 'filter(query)', params: 'string', description: 'Filter data by search query' }
+        ]);
+    </script>
+</body>
+
+</html>