microui-wc 0.1.0

package/src/components/mu-tooltip.js

@@ -0,0 +1,182 @@
+/**
+ * @fileoverview mu-tooltip - MD3 Tooltip Component
+ * Uses portal pattern with Floating UI-style positioning
+ */
+
+import { MuElement, define } from '../core/MuElement.js';
+
+/** Gap between tooltip and trigger element (MD3 spec: 8px) */
+const TOOLTIP_GAP = 8;
+
+export class MuTooltip extends MuElement {
+    static baseClass = 'mu-tooltip';
+    static cssFile = 'tooltip';
+    static observedAttributes = ['content', 'position'];
+
+    #tooltip = null;
+
+    connectedCallback() {
+        super.connectedCallback();
+
+        this.listen(this, 'mouseenter', () => this.show());
+        this.listen(this, 'mouseleave', () => this.hide());
+        this.listen(this, 'focus', () => this.show(), { capture: true });
+        this.listen(this, 'blur', () => this.hide(), { capture: true });
+    }
+
+    render() {
+        const position = this.attr('position', 'top');
+        this.className = `mu-tooltip mu-tooltip--${position}`;
+        this.style.position = 'relative';
+        this.style.display = 'inline-block';
+    }
+
+    update(attr, newValue, oldValue) {
+        if (attr === 'position') {
+            const position = this.attr('position', 'top');
+            this.className = `mu-tooltip mu-tooltip--${position}`;
+        }
+    }
+
+    show() {
+        if (this.#tooltip) return;
+
+        const content = this.attr('content', '');
+        if (!content) return;
+
+        const position = this.attr('position', 'top');
+
+        // Create tooltip element
+        this.#tooltip = document.createElement('div');
+        this.#tooltip.className = `mu-tooltip__content mu-tooltip__content--${position}`;
+        this.#tooltip.textContent = content;
+        this.#tooltip.setAttribute('role', 'tooltip');
+
+        // Initial styles for measurement - CRITICAL: override CSS transforms
+        this.#tooltip.style.cssText = `
+            position: fixed !important;
+            top: 0 !important;
+            left: 0 !important;
+            transform: none !important;
+            visibility: hidden;
+            z-index: var(--mu-z-tooltip, 9999);
+            pointer-events: none;
+            margin: 0 !important;
+        `;
+
+        // Portal: append to body
+        document.body.appendChild(this.#tooltip);
+
+        // Calculate and apply position
+        this.#computePosition(position);
+
+        // Trigger visibility
+        requestAnimationFrame(() => {
+            if (this.#tooltip) {
+                this.#tooltip.style.visibility = 'visible';
+                this.#tooltip.style.opacity = '1';
+            }
+        });
+    }
+
+    /**
+     * SOTA positioning logic inspired by Floating UI
+     * Uses fixed positioning for viewport-relative placement
+     */
+    #computePosition(placement) {
+        const triggerRect = this.getBoundingClientRect();
+        const tooltipRect = this.#tooltip.getBoundingClientRect();
+
+        let { x, y } = this.#getCoordinates(placement, triggerRect, tooltipRect);
+
+        // Viewport boundary detection and auto-flip
+        const finalPlacement = this.#autoFlip(placement, x, y, tooltipRect, triggerRect);
+
+        if (finalPlacement !== placement) {
+            ({ x, y } = this.#getCoordinates(finalPlacement, triggerRect, tooltipRect));
+        }
+
+        // Clamp to viewport edges
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+
+        x = Math.max(4, Math.min(x, viewportWidth - tooltipRect.width - 4));
+        y = Math.max(4, Math.min(y, viewportHeight - tooltipRect.height - 4));
+
+        // Apply final position with !important to override CSS
+        this.#tooltip.style.setProperty('left', `${x}px`, 'important');
+        this.#tooltip.style.setProperty('top', `${y}px`, 'important');
+    }
+
+    /**
+     * Calculate x,y coordinates for a given placement
+     */
+    #getCoordinates(placement, triggerRect, tooltipRect) {
+        let x, y;
+
+        switch (placement) {
+            case 'top':
+                x = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+                y = triggerRect.top - tooltipRect.height - TOOLTIP_GAP;
+                break;
+            case 'bottom':
+                x = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+                y = triggerRect.bottom + TOOLTIP_GAP;
+                break;
+            case 'left':
+                x = triggerRect.left - tooltipRect.width - TOOLTIP_GAP;
+                y = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
+                break;
+            case 'right':
+                x = triggerRect.right + TOOLTIP_GAP;
+                y = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
+                break;
+            default:
+                x = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+                y = triggerRect.top - tooltipRect.height - TOOLTIP_GAP;
+        }
+
+        return { x, y };
+    }
+
+    /**
+     * Auto-flip to opposite side if tooltip overflows viewport
+     */
+    #autoFlip(placement, x, y, tooltipRect, triggerRect) {
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+
+        switch (placement) {
+            case 'top':
+                if (y < 0) return 'bottom';
+                break;
+            case 'bottom':
+                if (y + tooltipRect.height > viewportHeight) return 'top';
+                break;
+            case 'left':
+                if (x < 0) return 'right';
+                break;
+            case 'right':
+                if (x + tooltipRect.width > viewportWidth) return 'left';
+                break;
+        }
+
+        return placement;
+    }
+
+    hide() {
+        if (this.#tooltip) {
+            this.#tooltip.remove();
+            this.#tooltip = null;
+        }
+    }
+
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.hide();
+    }
+}
+
+define('mu-tooltip', MuTooltip);
+
+

package/src/components/mu-virtual-list.js

@@ -0,0 +1,184 @@
+/**
+ * @fileoverview mu-virtual-list - Virtual List Component for Large Datasets
+ * 
+ * Renders only visible items for lists with thousands of elements.
+ * 
+ * Usage:
+ * <mu-virtual-list 
+ *     item-height="50"
+ *     .items="${largeArray}"
+ *     .renderItem="${(item) => `<div>${item.name}</div>`}">
+ * </mu-virtual-list>
+ */
+
+import { MuElement, define } from '../core/MuElement.js';
+import { throttle } from '../core/render.js';
+
+export class MuVirtualList extends MuElement {
+    static baseClass = 'mu-virtual-list';
+    static cssFile = 'virtual-list';
+    static observedAttributes = ['item-height', 'buffer'];
+
+    // Data
+    #items = [];
+    #renderItem = (item) => `<div>${item}</div>`;
+
+    // State
+    #scrollTop = 0;
+    #visibleStart = 0;
+    #visibleEnd = 0;
+
+    // Refs
+    #container = null;
+    #content = null;
+
+    set items(arr) {
+        this.#items = arr || [];
+        this.#updateVisibleRange();
+    }
+
+    get items() {
+        return this.#items;
+    }
+
+    set renderItem(fn) {
+        this.#renderItem = fn;
+        this.#updateVisibleRange();
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        // Note: scroll listener is attached in render() to the internal viewport container
+    }
+
+    render() {
+        const itemHeight = parseInt(this.attr('item-height', '50'));
+
+        this.innerHTML = `
+            <div class="mu-virtual-list__viewport" style="
+                height: 100%;
+                overflow-y: auto;
+                position: relative;
+            ">
+                <div class="mu-virtual-list__content" style="
+                    position: relative;
+                ">
+                    <div class="mu-virtual-list__items"></div>
+                </div>
+            </div>
+        `;
+
+        this.#container = this.querySelector('.mu-virtual-list__viewport');
+        this.#content = this.querySelector('.mu-virtual-list__content');
+
+        // Throttled scroll handler - attached to the viewport container where scroll occurs
+        const handleScroll = throttle(() => {
+            this.#scrollTop = this.#container.scrollTop;
+            this.#updateVisibleRange();
+        }, 16); // ~60fps
+
+        this.listen(this.#container, 'scroll', handleScroll);
+
+        this.style.display = 'block';
+        this.style.height = '400px';
+        this.style.overflow = 'hidden';
+
+        this.#updateVisibleRange();
+    }
+
+    #updateVisibleRange() {
+        if (!this.#container || !this.#items.length) return;
+
+        const itemHeight = parseInt(this.attr('item-height', '50'));
+        const buffer = parseInt(this.attr('buffer', '5'));
+        const viewportHeight = this.#container.clientHeight;
+
+        // Calculate visible range
+        const totalHeight = this.#items.length * itemHeight;
+        this.#content.style.height = `${totalHeight}px`;
+
+        const start = Math.max(0, Math.floor(this.#scrollTop / itemHeight) - buffer);
+        const visibleCount = Math.ceil(viewportHeight / itemHeight) + buffer * 2;
+        const end = Math.min(this.#items.length, start + visibleCount);
+
+        // Only re-render if range changed
+        if (start !== this.#visibleStart || end !== this.#visibleEnd) {
+            this.#visibleStart = start;
+            this.#visibleEnd = end;
+            this.#renderVisibleItems();
+        }
+    }
+
+    async #renderVisibleItems() {
+        const itemHeight = parseInt(this.attr('item-height', '50'));
+        const itemsContainer = this.querySelector('.mu-virtual-list__items');
+
+        if (!itemsContainer) return;
+
+        // Render only visible items
+        const visibleItems = this.#items.slice(this.#visibleStart, this.#visibleEnd);
+
+        // For large batches, use scheduler.yield to prevent INP degradation
+        // (Per 2024 Chrome Core Web Vitals research)
+        const BATCH_SIZE = 50;
+        const useYield = visibleItems.length > BATCH_SIZE && 'scheduler' in window;
+
+        if (useYield) {
+            // Batch render with yields for responsiveness
+            const fragments = [];
+            for (let batch = 0; batch < visibleItems.length; batch += BATCH_SIZE) {
+                const batchItems = visibleItems.slice(batch, batch + BATCH_SIZE);
+
+                fragments.push(...batchItems.map((item, i) => {
+                    const index = this.#visibleStart + batch + i;
+                    const top = index * itemHeight;
+                    return `
+                        <div class="mu-virtual-list__item" style="
+                            position: absolute;
+                            top: ${top}px;
+                            left: 0;
+                            right: 0;
+                            height: ${itemHeight}px;
+                        " data-index="${index}" data-mu-state="visible">
+                            ${this.#renderItem(item, index)}
+                        </div>
+                    `;
+                }));
+
+                // Yield to browser between batches
+                if (batch + BATCH_SIZE < visibleItems.length) {
+                    await scheduler.yield();
+                }
+            }
+            itemsContainer.innerHTML = fragments.join('');
+        } else {
+            // Standard render for small lists
+            itemsContainer.innerHTML = visibleItems.map((item, i) => {
+                const index = this.#visibleStart + i;
+                const top = index * itemHeight;
+
+                return `
+                    <div class="mu-virtual-list__item" style="
+                        position: absolute;
+                        top: ${top}px;
+                        left: 0;
+                        right: 0;
+                        height: ${itemHeight}px;
+                    " data-index="${index}" data-mu-state="visible">
+                        ${this.#renderItem(item, index)}
+                    </div>
+                `;
+            }).join('');
+        }
+    }
+
+    /**
+     * Scroll to specific index
+     */
+    scrollToIndex(index) {
+        const itemHeight = parseInt(this.attr('item-height', '50'));
+        this.#container.scrollTop = index * itemHeight;
+    }
+}
+
+define('mu-virtual-list', MuVirtualList);