lightview 1.8.2 → 2.0.0

package/components/daisyui.js

@@ -0,0 +1,288 @@
+/**
+ * Lightview Components - DaisyUI Integration
+ * This module ensures DaisyUI CSS is loaded and provides utilities for components
+ */
+
+const DAISYUI_CDN = 'https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css';
+const TAILWIND_CDN = 'https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4';
+
+let daisyLoaded = false;
+let tailwindLoaded = false;
+
+// ============= ADOPTED STYLESHEETS SUPPORT =============
+// Cached CSSStyleSheet objects for efficient shadow DOM usage
+
+let daisyStyleSheet = null;
+let daisyStyleSheetPromise = null;
+const componentStyleSheets = new Map(); // Cache for component CSS
+const componentStyleSheetPromises = new Map();
+
+/**
+ * Get a CSSStyleSheet for DaisyUI (for use with adoptedStyleSheets)
+ * Fetches and parses CSS once, caches for reuse
+ * @returns {Promise<CSSStyleSheet>}
+ */
+export const getDaisyStyleSheet = async () => {
+    // Return cached sheet if available
+    if (daisyStyleSheet) {
+        return daisyStyleSheet;
+    }
+
+    // Return existing promise if fetch is in progress
+    if (daisyStyleSheetPromise) {
+        return daisyStyleSheetPromise;
+    }
+
+    // Fetch and create the stylesheet
+    daisyStyleSheetPromise = (async () => {
+        try {
+            const response = await fetch(DAISYUI_CDN);
+            if (!response.ok) {
+                throw new Error(`Failed to fetch DaisyUI CSS: ${response.status}`);
+            }
+            const cssText = await response.text();
+
+            const sheet = new CSSStyleSheet();
+            sheet.replaceSync(cssText);
+            daisyStyleSheet = sheet;
+            return sheet;
+        } catch (e) {
+            console.error('Lightview: Failed to create DaisyUI adoptedStyleSheet:', e);
+            daisyStyleSheetPromise = null; // Allow retry
+            throw e;
+        }
+    })();
+
+    return daisyStyleSheetPromise;
+};
+
+/**
+ * Get a CSSStyleSheet for a component's CSS file
+ * @param {string} cssUrl - URL to the component's CSS file
+ * @returns {Promise<CSSStyleSheet>}
+ */
+export const getComponentStyleSheet = async (cssUrl) => {
+    // Return cached sheet if available
+    if (componentStyleSheets.has(cssUrl)) {
+        return componentStyleSheets.get(cssUrl);
+    }
+
+    // Return existing promise if fetch is in progress
+    if (componentStyleSheetPromises.has(cssUrl)) {
+        return componentStyleSheetPromises.get(cssUrl);
+    }
+
+    // Fetch and create the stylesheet
+    const promise = (async () => {
+        try {
+            const response = await fetch(cssUrl);
+            if (!response.ok) {
+                throw new Error(`Failed to fetch component CSS: ${response.status}`);
+            }
+            const cssText = await response.text();
+
+            const sheet = new CSSStyleSheet();
+            sheet.replaceSync(cssText);
+            componentStyleSheets.set(cssUrl, sheet);
+            return sheet;
+        } catch (e) {
+            console.error(`Lightview: Failed to create adoptedStyleSheet for ${cssUrl}:`, e);
+            componentStyleSheetPromises.delete(cssUrl); // Allow retry
+            throw e;
+        }
+    })();
+
+    componentStyleSheetPromises.set(cssUrl, promise);
+    return promise;
+};
+
+/**
+ * Synchronously get cached DaisyUI stylesheet (returns null if not yet loaded)
+ * Use getDaisyStyleSheet() first to ensure it's loaded
+ * @returns {CSSStyleSheet|null}
+ */
+export const getDaisyStyleSheetSync = () => daisyStyleSheet;
+
+/**
+ * Synchronously get cached component stylesheet (returns null if not yet loaded)
+ * @param {string} cssUrl
+ * @returns {CSSStyleSheet|null}
+ */
+export const getComponentStyleSheetSync = (cssUrl) => componentStyleSheets.get(cssUrl) || null;
+
+/**
+ * Pre-load all stylesheets needed for shadow DOM components
+ * Call this early in your app initialization for best performance
+ * @param {string[]} componentCssUrls - Optional array of component CSS URLs to preload
+ * @returns {Promise<void>}
+ */
+export const preloadShadowStyles = async (componentCssUrls = []) => {
+    const promises = [getDaisyStyleSheet()];
+    for (const url of componentCssUrls) {
+        promises.push(getComponentStyleSheet(url));
+    }
+    await Promise.all(promises);
+};
+
+/**
+ * Ensure DaisyUI CSS is loaded from CDN
+ */
+export const ensureDaisyUI = () => {
+    if (daisyLoaded) return Promise.resolve();
+
+    return new Promise((resolve) => {
+        // Check if already loaded
+        if (document.querySelector('link[href*="daisyui"]')) {
+            daisyLoaded = true;
+            resolve();
+            return;
+        }
+
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = DAISYUI_CDN;
+        link.id = 'daisyui-styles';
+        link.onload = () => {
+            daisyLoaded = true;
+            resolve();
+        };
+        link.onerror = () => {
+            console.warn('Failed to load DaisyUI from CDN');
+            resolve();
+        };
+        document.head.appendChild(link);
+    });
+};
+
+/**
+ * Ensure Tailwind CSS Browser is loaded (for utility classes)
+ */
+export const ensureTailwind = () => {
+    if (tailwindLoaded) return Promise.resolve();
+
+    return new Promise((resolve) => {
+        // Check if already loaded
+        if (document.querySelector('script[src*="tailwindcss/browser"]')) {
+            tailwindLoaded = true;
+            resolve();
+            return;
+        }
+
+        const script = document.createElement('script');
+        script.src = TAILWIND_CDN;
+        script.id = 'tailwind-browser';
+        script.onload = () => {
+            tailwindLoaded = true;
+            resolve();
+        };
+        script.onerror = () => {
+            console.warn('Failed to load Tailwind Browser from CDN');
+            resolve();
+        };
+        document.head.appendChild(script);
+    });
+};
+
+/**
+ * Ensure all themes are loaded
+ */
+export const ensureThemes = () => {
+    return new Promise((resolve) => {
+        if (document.querySelector('link[href*="daisyui"][href*="themes"]')) {
+            resolve();
+            return;
+        }
+
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = `${DAISYUI_CDN}/themes.css`;
+        link.id = 'daisyui-themes';
+        link.onload = () => resolve();
+        link.onerror = () => resolve();
+        document.head.appendChild(link);
+    });
+};
+
+/**
+ * Initialize DaisyUI with optional Tailwind utilities
+ * @param {Object} options
+ * @param {boolean} options.tailwind - Whether to load Tailwind Browser (default: true)
+ * @param {boolean} options.themes - Whether to load all themes (default: false)
+ */
+export const init = async (options = {}) => {
+    const { tailwind = true, themes = false } = options;
+
+    const promises = [ensureDaisyUI()];
+    if (tailwind) promises.push(ensureTailwind());
+    if (themes) promises.push(ensureThemes());
+
+    await Promise.all(promises);
+};
+
+/**
+ * Set the current theme
+ * @param {string} theme - Theme name (e.g., 'light', 'dark', 'cupcake', 'cyberpunk')
+ */
+export const setTheme = (theme) => {
+    document.documentElement.setAttribute('data-theme', theme);
+};
+
+/**
+ * Get the current theme
+ * @returns {string}
+ */
+export const getTheme = () => {
+    return document.documentElement.getAttribute('data-theme') || 'light';
+};
+
+/**
+ * Toggle between light and dark themes
+ */
+export const toggleTheme = () => {
+    const current = getTheme();
+    setTheme(current === 'dark' ? 'light' : 'dark');
+};
+
+/**
+ * Available DaisyUI themes
+ */
+export const themes = [
+    'light', 'dark', 'cupcake', 'bumblebee', 'emerald', 'corporate',
+    'synthwave', 'retro', 'cyberpunk', 'valentine', 'halloween', 'garden',
+    'forest', 'aqua', 'lofi', 'pastel', 'fantasy', 'wireframe', 'black',
+    'luxury', 'dracula', 'cmyk', 'autumn', 'business', 'acid', 'lemonade',
+    'night', 'coffee', 'winter', 'dim', 'nord', 'sunset'
+];
+
+/**
+ * Color variants available for components
+ */
+export const colors = ['primary', 'secondary', 'accent', 'neutral', 'info', 'success', 'warning', 'error'];
+
+/**
+ * Size variants available for components
+ */
+export const sizes = ['xs', 'sm', 'md', 'lg'];
+
+// Note: Auto-initialization removed. Use one of:
+// - LightviewX.initComponents() for shadow DOM components (recommended)
+// - daisyui.init() for light DOM usage with global DaisyUI styles
+
+export default {
+    init,
+    ensureDaisyUI,
+    ensureTailwind,
+    ensureThemes,
+    setTheme,
+    getTheme,
+    toggleTheme,
+    themes,
+    colors,
+    sizes,
+    // Shadow DOM / Adopted Stylesheets
+    getDaisyStyleSheet,
+    getComponentStyleSheet,
+    getDaisyStyleSheetSync,
+    getComponentStyleSheetSync,
+    preloadShadowStyles
+};

package/components/data-display/accordion.js

@@ -0,0 +1,128 @@
+/**
+ * Lightview Accordion Component (DaisyUI)
+ * @see https://daisyui.com/components/accordion/
+ */
+
+import '../daisyui.js';
+
+/**
+ * Accordion - show/hide content, one item at a time
+ * @param {Object} props
+ * @param {boolean} props.join - Use join style (connected items)
+ * @param {string} props.icon - 'arrow' | 'plus'
+ * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
+ */
+const Accordion = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    const LVX = window.LightviewX || {};
+
+    if (!tags) return null;
+
+    const { div, shadowDOM } = tags;
+
+    const {
+        join = false,
+        useShadow,
+        class: className = '',
+        ...rest
+    } = props;
+
+    const classes = join ? ['join join-vertical w-full'] : ['space-y-2'];
+    if (className) classes.push(className);
+
+    const accordionEl = div({ class: classes.join(' '), ...rest }, ...children);
+
+    // Check if we should use shadow DOM
+    let usesShadow = false;
+    if (LVX.shouldUseShadow) {
+        usesShadow = LVX.shouldUseShadow(useShadow);
+    } else {
+        usesShadow = useShadow === true;
+    }
+
+    if (usesShadow) {
+        const adoptedStyleSheets = LVX.getAdoptedStyleSheets ? LVX.getAdoptedStyleSheets() : [];
+
+        const themeValue = LVX.themeSignal ? () => LVX.themeSignal.value : 'light';
+
+        return div({ class: 'contents' },
+            shadowDOM({ mode: 'open', adoptedStyleSheets },
+                div({ 'data-theme': themeValue },
+                    accordionEl
+                )
+            )
+        );
+    }
+
+    return accordionEl;
+};
+
+/**
+ * Accordion Item
+ */
+Accordion.Item = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const { div, input } = tags;
+
+    const {
+        name = 'accordion',
+        icon = 'arrow',
+        join = false,
+        checked = false,
+        class: className = '',
+        ...rest
+    } = props;
+
+    const classes = ['collapse'];
+    if (icon === 'arrow') classes.push('collapse-arrow');
+    else if (icon === 'plus') classes.push('collapse-plus');
+    classes.push('bg-base-100');
+    if (join) classes.push('join-item border-base-300 border');
+    else classes.push('border border-base-300 rounded-box');
+    if (className) classes.push(className);
+
+    return div({ class: classes.join(' '), ...rest },
+        input({ type: 'radio', name, checked }),
+        ...children
+    );
+};
+
+/**
+ * Accordion Title
+ */
+Accordion.Title = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const { class: className = '', ...rest } = props;
+
+    return tags.div({
+        class: `collapse-title font-semibold ${className}`.trim(),
+        ...rest
+    }, ...children);
+};
+
+/**
+ * Accordion Content
+ */
+Accordion.Content = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const { class: className = '', ...rest } = props;
+
+    return tags.div({
+        class: `collapse-content text-sm ${className}`.trim(),
+        ...rest
+    }, ...children);
+};
+
+const tags = window.Lightview.tags;
+tags.Accordion = Accordion;
+tags['Accordion.Item'] = Accordion.Item;
+tags['Accordion.Title'] = Accordion.Title;
+tags['Accordion.Content'] = Accordion.Content;
+
+export default Accordion;

package/components/data-display/alert.js

@@ -0,0 +1,112 @@
+/**
+ * Lightview Alert Component (DaisyUI)
+ * @see https://daisyui.com/components/alert/
+ */
+
+import '../daisyui.js';
+
+/**
+ * Alert Component
+ * @param {Object} props
+ * @param {string} props.color - 'info' | 'success' | 'warning' | 'error'
+ * @param {boolean} props.soft - Use soft/light variant
+ * @param {boolean} props.dash - Use dashed border
+ * @param {boolean} props.outline - Use outline style
+ * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
+ */
+const Alert = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    const LVX = window.LightviewX || {};
+
+    if (!tags) return null;
+
+    const { div, shadowDOM } = tags;
+
+    const {
+        color,
+        soft = false,
+        dash = false,
+        outline = false,
+        icon,
+        useShadow,
+        class: className = '',
+        ...rest
+    } = props;
+
+    const classes = ['alert'];
+    if (color) classes.push(`alert-${color}`);
+    if (soft) classes.push('alert-soft');
+    if (dash) classes.push('alert-dash');
+    if (outline) classes.push('alert-outline');
+    if (className) classes.push(className);
+
+    const iconSvg = icon ? getAlertIcon(icon || color) : null;
+
+    let alertEl;
+    if (iconSvg) {
+        alertEl = div({ role: 'alert', class: classes.join(' '), ...rest },
+            iconSvg,
+            ...children
+        );
+    } else {
+        alertEl = div({ role: 'alert', class: classes.join(' '), ...rest }, ...children);
+    }
+
+    // Check if we should use shadow DOM
+    let usesShadow = false;
+    if (LVX.shouldUseShadow) {
+        usesShadow = LVX.shouldUseShadow(useShadow);
+    } else {
+        usesShadow = useShadow === true;
+    }
+
+    if (usesShadow) {
+        const adoptedStyleSheets = LVX.getAdoptedStyleSheets ? LVX.getAdoptedStyleSheets() : [];
+
+        const themeValue = LVX.themeSignal ? () => LVX.themeSignal.value : 'light';
+
+        return div({ class: 'contents' },
+            shadowDOM({ mode: 'open', adoptedStyleSheets },
+                div({ 'data-theme': themeValue },
+                    alertEl
+                )
+            )
+        );
+    }
+
+    return alertEl;
+};
+
+function getAlertIcon(type) {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const icons = {
+        info: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>',
+        success: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>',
+        warning: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>',
+        error: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>'
+    };
+
+    if (!icons[type]) return null;
+
+    return tags.svg({
+        xmlns: 'http://www.w3.org/2000/svg',
+        class: 'h-6 w-6 shrink-0 stroke-current',
+        fill: 'none',
+        viewBox: '0 0 24 24',
+        innerHTML: icons[type]
+    });
+}
+
+window.Lightview.tags.Alert = Alert;
+
+// Register as Custom Element
+if (window.LightviewX?.createCustomElement) {
+    const AlertElement = window.LightviewX.createCustomElement(Alert);
+    if (!customElements.get('lv-alert')) {
+        customElements.define('lv-alert', AlertElement);
+    }
+}
+
+export default Alert;

package/components/data-display/avatar.js

@@ -0,0 +1,170 @@
+/**
+ * Lightview Avatar Component (DaisyUI)
+ * @see https://daisyui.com/components/avatar/
+ */
+
+import '../daisyui.js';
+
+/**
+ * Avatar Component
+ * @param {Object} props
+ * @param {string} props.src - Image source URL
+ * @param {string} props.alt - Alt text for image
+ * @param {string} props.placeholder - Text to show when no image
+ * @param {string} props.size - Size in pixels or class
+ * @param {string} props.shape - 'circle' | 'rounded' | 'squircle' | 'hexagon' | 'triangle'
+ * @param {boolean} props.ring - Add ring border
+ * @param {string} props.ringColor - Ring color class
+ * @param {boolean} props.online - Show online indicator
+ * @param {boolean} props.offline - Show offline indicator
+ * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
+ */
+const Avatar = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    const LVX = window.LightviewX || {};
+
+    if (!tags) return null;
+
+    const { div, img, shadowDOM } = tags;
+
+    const {
+        src,
+        alt = 'Avatar',
+        placeholder,
+        size = 'w-12',
+        shape = 'circle',
+        ring = false,
+        ringColor = 'ring-primary',
+        online = false,
+        offline = false,
+        useShadow,
+        class: className = '',
+        ...rest
+    } = props;
+
+    const wrapperClasses = ['avatar'];
+    if (online) wrapperClasses.push('online');
+    if (offline) wrapperClasses.push('offline');
+    if (placeholder && !src) wrapperClasses.push('placeholder');
+    if (className) wrapperClasses.push(className);
+
+    const innerClasses = [];
+    const innerStyle = {};
+
+    // Check if size is a Tailwind class (w-*) or a direct measurement
+    if (size) {
+        if (/^w-(\d+)$/.test(size)) {
+            // Workaround: Map w- classes to explicit styles as Tailwind classes might be missing
+            const num = parseInt(size.split('-')[1]);
+            const remValue = num * 0.25;
+            innerStyle.width = `${remValue}rem`;
+            innerStyle.height = `${remValue}rem`;
+            innerClasses.push(size);
+        } else if (/^w-/.test(size)) {
+            innerClasses.push(size);
+        } else {
+            // Treat as direct measurement (e.g., 64px, 4rem)
+            innerStyle.width = size;
+            innerStyle.height = size;
+        }
+    } else {
+        innerClasses.push('w-12');
+        innerStyle.width = '3rem';
+        innerStyle.height = '3rem';
+    }
+
+    if (ring) {
+        innerClasses.push('ring', ringColor, 'ring-offset-base-100', 'ring-offset-2');
+    }
+
+    // Shape classes
+    if (shape === 'circle') innerClasses.push('rounded-full');
+    else if (shape === 'rounded') innerClasses.push('rounded');
+    else if (shape === 'squircle') innerClasses.push('mask mask-squircle');
+    else if (shape === 'hexagon') innerClasses.push('mask mask-hexagon');
+    else if (shape === 'triangle') innerClasses.push('mask mask-triangle');
+
+    let avatarEl;
+    if (src) {
+        avatarEl = div({ class: wrapperClasses.join(' '), ...rest },
+            div({ class: innerClasses.join(' '), style: innerStyle },
+                img({ src, alt, style: 'width: 100%; height: 100%; object-fit: cover;' })
+            )
+        );
+    } else {
+        // Placeholder avatar
+        // Use flexbox to center the placeholder text
+        innerClasses.push('bg-neutral text-neutral-content flex items-center justify-center');
+
+        // Support custom background/text colors via CSS variables if provided in style
+        innerStyle.backgroundColor = 'var(--lv-avatar-bg)';
+        innerStyle.color = 'var(--lv-avatar-text)';
+        innerStyle.display = 'flex';
+        innerStyle.alignItems = 'center';
+        innerStyle.justifyContent = 'center';
+
+        avatarEl = div({ class: wrapperClasses.join(' '), ...rest },
+            div({
+                class: innerClasses.join(' '),
+                style: innerStyle
+            },
+                tags.span({}, placeholder || children[0] || '?')
+            )
+        );
+    }
+
+    // Check if we should use shadow DOM
+    let usesShadow = false;
+    if (LVX.shouldUseShadow) {
+        usesShadow = LVX.shouldUseShadow(useShadow);
+    } else {
+        usesShadow = useShadow === true;
+    }
+
+    if (usesShadow) {
+        const adoptedStyleSheets = LVX.getAdoptedStyleSheets ? LVX.getAdoptedStyleSheets() : [];
+
+        const themeValue = LVX.themeSignal ? () => LVX.themeSignal.value : 'light';
+
+        return div({ class: 'contents' },
+            shadowDOM({ mode: 'open', adoptedStyleSheets },
+                div({ 'data-theme': themeValue },
+                    avatarEl
+                )
+            )
+        );
+    }
+
+    return avatarEl;
+};
+
+/**
+ * Avatar Group
+ */
+Avatar.Group = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const { class: className = '', ...rest } = props;
+
+    return tags.div({
+        class: `avatar-group -space-x-6 rtl:space-x-reverse ${className}`.trim(),
+        ...rest
+    }, ...children);
+};
+
+const tags = window.Lightview.tags;
+tags.Avatar = Avatar;
+tags['Avatar.Group'] = Avatar.Group;
+
+// Register as Custom Elements
+if (window.LightviewX?.createCustomElement) {
+    if (!customElements.get('lv-avatar')) {
+        customElements.define('lv-avatar', window.LightviewX.createCustomElement(Avatar));
+    }
+    if (!customElements.get('lv-avatar-group')) {
+        customElements.define('lv-avatar-group', window.LightviewX.createCustomElement(Avatar.Group));
+    }
+}
+
+export default Avatar;