microui-wc 0.1.0 → 0.1.2

package/demo/content/virtual-lists.html

@@ -1,233 +0,0 @@
-<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

@@ -1,52 +0,0 @@
-<!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

@@ -1,46 +0,0 @@
-<!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

@@ -1,34 +0,0 @@
-{
-    "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

@@ -1,237 +0,0 @@
-<!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>