lightview 1.8.2 → 2.0.0

package/components/data-display/badge.js

@@ -0,0 +1,82 @@
+/**
+ * Lightview Badge Component (DaisyUI)
+ * @see https://daisyui.com/components/badge/
+ */
+
+import '../daisyui.js';
+
+/**
+ * Badge Component
+ * @param {Object} props
+ * @param {string} props.color - 'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error' | 'ghost'
+ * @param {string} props.size - 'xs' | 'sm' | 'md' | 'lg'
+ * @param {string} props.variant - 'outline' | 'soft' | 'dash'
+ * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
+ */
+const Badge = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    const LVX = window.LightviewX || {};
+
+    if (!tags) return null;
+
+    const { span, div, shadowDOM } = tags;
+
+    const {
+        color,
+        size,
+        variant,
+        useShadow,
+        theme, // Explicit theme override
+        class: className = '',
+        ...rest
+    } = props;
+
+    const classes = ['badge'];
+
+    if (color) classes.push(`badge-${color}`);
+    if (size) classes.push(`badge-${size}`);
+    if (variant === 'outline') classes.push('badge-outline');
+    else if (variant === 'soft') classes.push('badge-soft');
+    else if (variant === 'dash') classes.push('badge-dash');
+
+    if (className) classes.push(className);
+
+    const badgeEl = span({ 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() : [];
+
+        // Use reactive theme signal if available, otherwise fallback to explicit 'theme' prop or default
+        const themeValue = theme || (LVX.themeSignal ? () => LVX.themeSignal.value : 'light');
+
+        return div({ class: 'content', style: 'display: inline-block' },
+            shadowDOM({ mode: 'open', adoptedStyleSheets },
+                div({ 'data-theme': themeValue },
+                    badgeEl
+                )
+            )
+        );
+    }
+
+    return badgeEl;
+};
+
+window.Lightview.tags.Badge = Badge;
+
+// Register as Custom Element
+if (window.LightviewX?.createCustomElement) {
+    const BadgeElement = window.LightviewX.createCustomElement(Badge);
+    if (!customElements.get('lv-badge')) {
+        customElements.define('lv-badge', BadgeElement);
+    }
+}
+
+export default Badge;

package/components/data-display/card.js

@@ -0,0 +1,151 @@
+/**
+ * Lightview Card Component (DaisyUI)
+ * @see https://daisyui.com/components/card/
+ */
+
+import '../daisyui.js';
+
+/**
+ * Card Component
+ * @param {Object} props
+ * @param {string} props.variant - 'bordered' | 'dash' | 'side' | 'compact'
+ * @param {string} props.imageFull - Image fills width
+ * @param {string} props.bg - Background class (e.g., 'bg-base-100')
+ * @param {string} props.shadow - Shadow class (e.g., 'shadow-sm', 'shadow-xl')
+ * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
+ */
+const Card = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    const LVX = window.LightviewX || {};
+
+    if (!tags) return null;
+
+    const { div, shadowDOM } = tags;
+
+    const {
+        variant,
+        imageFull = false,
+        bg = 'bg-base-100',
+        shadow = 'shadow-sm',
+        useShadow,
+        class: className = '',
+        ...rest
+    } = props;
+
+    const classes = ['card', bg, shadow];
+
+    if (variant === 'bordered') classes.push('card-bordered');
+    else if (variant === 'dash') classes.push('card-dash');
+    else if (variant === 'side') classes.push('card-side');
+    else if (variant === 'compact') classes.push('card-compact');
+
+    if (imageFull) classes.push('image-full');
+    if (className) classes.push(className);
+
+    const cardEl = 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 mixedSheets = LVX.getAdoptedStyleSheets ? LVX.getAdoptedStyleSheets(null, props.styleSheets) : [];
+        const adoptedStyleSheets = mixedSheets.filter(s => s instanceof CSSStyleSheet);
+        const fallbackLinks = mixedSheets.filter(s => typeof s === 'string');
+
+        // Use reactive theme signal if available (matches Button pattern)
+        const themeValue = LVX.themeSignal ? () => LVX.themeSignal.value : 'light';
+
+        return div({ class: 'contents' },
+            shadowDOM({ mode: 'open', adoptedStyleSheets },
+                // Inject fallback links if any
+                ...fallbackLinks.map(url => tags.link({ rel: 'stylesheet', href: url })),
+                div({ 'data-theme': themeValue },
+                    cardEl
+                )
+            )
+        );
+    }
+
+    return cardEl;
+};
+
+/**
+ * Card Body
+ */
+Card.Body = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const { class: className = '', ...rest } = props;
+
+    return tags.div({
+        class: `card-body ${className}`.trim(),
+        ...rest
+    }, ...children);
+};
+
+/**
+ * Card Title
+ */
+Card.Title = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const { class: className = '', ...rest } = props;
+
+    return tags.h2({
+        class: `card-title ${className}`.trim(),
+        ...rest
+    }, ...children);
+};
+
+/**
+ * Card Actions
+ */
+Card.Actions = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const {
+        justify = 'end',
+        class: className = '',
+        ...rest
+    } = props;
+
+    return tags.div({
+        class: `card-actions justify-${justify} ${className}`.trim(),
+        ...rest
+    }, ...children);
+};
+
+/**
+ * Card Figure (for images)
+ */
+Card.Figure = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const { src, alt = '', class: className = '', ...rest } = props;
+
+    if (src) {
+        return tags.figure({ class: className, ...rest },
+            tags.img({ src, alt })
+        );
+    }
+
+    return tags.figure({ class: className, ...rest }, ...children);
+};
+
+const tags = window.Lightview.tags;
+tags.Card = Card;
+tags['Card.Body'] = Card.Body;
+tags['Card.Title'] = Card.Title;
+tags['Card.Actions'] = Card.Actions;
+tags['Card.Figure'] = Card.Figure;
+
+export default Card;

package/components/data-display/carousel.js

@@ -0,0 +1,94 @@
+/**
+ * Lightview Carousel Component (DaisyUI)
+ * @see https://daisyui.com/components/carousel/
+ */
+
+import '../daisyui.js';
+
+/**
+ * Carousel Component
+ * @param {Object} props
+ * @param {string} props.snap - 'start' | 'center' | 'end'
+ * @param {boolean} props.vertical - Vertical carousel
+ * @param {boolean} props.full - Full width items
+ * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
+ */
+const Carousel = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    const LVX = window.LightviewX || {};
+
+    if (!tags) return null;
+
+    const { div, shadowDOM } = tags;
+
+    const {
+        snap = 'start',
+        vertical = false,
+        full = false,
+        useShadow,
+        class: className = '',
+        ...rest
+    } = props;
+
+    const classes = ['carousel'];
+
+    if (snap === 'center') classes.push('carousel-center');
+    else if (snap === 'end') classes.push('carousel-end');
+
+    if (vertical) classes.push('carousel-vertical');
+    if (full) classes.push('w-full');
+    if (className) classes.push(className);
+
+    const carouselEl = 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 },
+                    carouselEl
+                )
+            )
+        );
+    }
+
+    return carouselEl;
+};
+
+/**
+ * Carousel Item
+ */
+Carousel.Item = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const { id, src, alt = '', class: className = '', ...rest } = props;
+
+    const classes = ['carousel-item'];
+    if (className) classes.push(className);
+
+    if (src) {
+        return tags.div({ id, class: classes.join(' '), ...rest },
+            tags.img({ src, alt })
+        );
+    }
+
+    return tags.div({ id, class: classes.join(' '), ...rest }, ...children);
+};
+
+const tags = window.Lightview.tags;
+tags.Carousel = Carousel;
+tags['Carousel.Item'] = Carousel.Item;
+
+export default Carousel;

package/components/data-display/chart.js

@@ -0,0 +1,220 @@
+/**
+ * Lightview Chart Component
+ * Powered by charts.css
+ * @see https://chartscss.org/
+ */
+
+import '../daisyui.js';
+
+/**
+ * Chart Component
+ * @param {Object} props
+ * @param {string} props.type - 'bar' | 'column' | 'line' | 'area' | 'pie'
+ * @param {string} props.heading - Table caption / Chart heading
+ * @param {boolean} props.labels - Show labels (.show-labels)
+ * @param {boolean} props.dataOnHover - Show data on hover (.show-data-on-hover)
+ * @param {boolean} props.primaryAxis - Show primary axis (.show-primary-axis)
+ * @param {boolean|string} props.secondaryAxis - Show secondary axes (.show-10-secondary-axes or custom class)
+ * @param {number} props.spacing - Data spacing (1-20) (.data-spacing-X)
+ * @param {boolean} props.reverse - Reverse orientation (.reverse)
+ * @param {boolean} props.multiple - Enable multiple datasets (.multiple)
+ * @param {boolean} props.stacked - Enable stacked mode (.stacked)
+ * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
+ * @param {string} props.class - Additional classes
+ */
+const CHARTS_CSS_URL = 'https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css';
+
+// Auto-load charts.css for Global/Light DOM usage
+if (typeof document !== 'undefined') {
+    if (!document.querySelector(`link[href^="https://cdn.jsdelivr.net/npm/charts.css"]`)) {
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = CHARTS_CSS_URL;
+        document.head.appendChild(link);
+    }
+}
+
+const Chart = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    const LVX = window.LightviewX || {};
+
+    if (!tags) return null;
+
+    const { table, caption, div, shadowDOM } = tags;
+
+    const {
+        type = 'bar',
+        heading,
+        labels = false,
+        dataOnHover = false,
+        primaryAxis = false,
+        secondaryAxis = false,
+        spacing,
+        reverse = false,
+        multiple = false,
+        stacked = false,
+        useShadow,
+        class: className = '',
+        style = '',
+        ...rest
+    } = props;
+
+    const classes = ['charts-css', type];
+    if (labels) classes.push('show-labels');
+    if (dataOnHover) classes.push('show-data-on-hover');
+    if (heading) classes.push('show-heading');
+    if (primaryAxis) classes.push('show-primary-axis');
+
+    if (secondaryAxis === true) classes.push('show-10-secondary-axes');
+    else if (typeof secondaryAxis === 'string') classes.push(secondaryAxis);
+
+    if (spacing) classes.push(`data-spacing-${spacing}`);
+    if (reverse) classes.push('reverse');
+    if (multiple) classes.push('multiple');
+    if (stacked) classes.push('stacked');
+    if (className) classes.push(className);
+
+    const content = [];
+    if (heading) {
+        content.push(caption(heading));
+    }
+    content.push(...children);
+
+    const chartEl = table({ class: classes.join(' '), style, ...rest }, ...content);
+
+    // Check if we should use shadow DOM
+    let usesShadow = false;
+    if (LVX.shouldUseShadow) {
+        usesShadow = LVX.shouldUseShadow(useShadow);
+    } else {
+        usesShadow = useShadow === true;
+    }
+
+    if (usesShadow) {
+        const rawSheets = LVX.getAdoptedStyleSheets ? LVX.getAdoptedStyleSheets(null, [CHARTS_CSS_URL]) : [];
+        // Separate CSSStyleSheet objects from URL string fallbacks
+        const adoptedStyleSheets = rawSheets.filter(s => typeof s !== 'string');
+        const styles = rawSheets.filter(s => typeof s === 'string');
+
+        const themeValue = LVX.themeSignal ? () => LVX.themeSignal.value : 'light';
+
+        return div({ class: 'contents' },
+            shadowDOM({ mode: 'open', adoptedStyleSheets, styles },
+                div({ 'data-theme': themeValue },
+                    chartEl
+                )
+            )
+        );
+    }
+
+    return chartEl;
+};
+
+
+/**
+ * Chart Head (thead)
+ */
+Chart.Head = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+    return tags.thead(props, ...children);
+};
+
+/**
+ * Chart Body (tbody)
+ */
+Chart.Body = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+    return tags.tbody(props, ...children);
+};
+
+/**
+ * Chart Row (tr)
+ */
+Chart.Row = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+    return tags.tr(props, ...children);
+};
+
+/**
+ * Chart Label (th scope="row")
+ */
+Chart.Label = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const { scope = 'row', ...rest } = props;
+    return tags.th({ scope, ...rest }, ...children);
+};
+
+/**
+ * Chart Data (td)
+ * @param {Object} props
+ * @param {number} props.value - Value (0.0 - 1.0) -> --size (for bar/column/line/area charts)
+ * @param {number} props.start - Start value (0.0 - 1.0) -> --start (for range/waterfall and pie)
+ * @param {number} props.end - End value (0.0 - 1.0) -> --end (for pie charts - use instead of value)
+ * @param {string} props.color - CSS color -> --color
+ * @param {string} props.tooltip - Tooltip text
+ */
+Chart.Data = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const {
+        value,
+        size, // alias for value
+        start,
+        end, // for pie charts
+        color,
+        tooltip,
+        class: className = '',
+        style: styleProp = '',
+        ...rest
+    } = props;
+
+    const styles = [];
+    const val = value !== undefined ? value : size;
+
+    // For bar/column/line/area charts: use --size
+    if (val !== undefined) styles.push(`--size: ${val};`);
+    if (start !== undefined) styles.push(`--start: ${start};`);
+
+    // For Pie charts: use --end directly if provided, otherwise calculate from start + value
+    if (end !== undefined) {
+        styles.push(`--end: ${end};`);
+    } else if (start !== undefined && val !== undefined) {
+        // Legacy: Calculate --end for backward compatibility
+        const calculatedEnd = parseFloat(start) + parseFloat(val);
+        styles.push(`--end: ${calculatedEnd};`);
+    }
+
+    if (color) styles.push(`--color: ${color};`);
+    if (styleProp) styles.push(styleProp);
+
+    const classes = [];
+    if (className) classes.push(className);
+
+    const content = [...children];
+    if (tooltip) {
+        content.push(tags.span({ class: 'tooltip' }, tooltip));
+    }
+
+    return tags.td({
+        class: classes.join(' ') || undefined,
+        style: styles.join(' ') || undefined,
+        ...rest
+    }, ...content);
+};
+
+const tags = window.Lightview.tags;
+
+tags.Chart = Chart;
+tags['Chart.Head'] = Chart.Head;
+tags['Chart.Body'] = Chart.Body;
+tags['Chart.Row'] = Chart.Row;
+tags['Chart.Label'] = Chart.Label;
+tags['Chart.Data'] = Chart.Data;
+
+export default Chart;

package/components/data-display/chat.js

@@ -0,0 +1,128 @@
+/**
+ * Lightview Chat Component (DaisyUI)
+ * @see https://daisyui.com/components/chat/
+ */
+
+import '../daisyui.js';
+
+/**
+ * Chat Component - container for chat bubbles
+ * @param {Object} props
+ * @param {string} props.position - 'start' | 'end'
+ * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
+ */
+const Chat = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    const LVX = window.LightviewX || {};
+
+    if (!tags) return null;
+
+    const { div, shadowDOM } = tags;
+
+    const {
+        position = 'start',
+        useShadow,
+        class: className = '',
+        ...rest
+    } = props;
+
+    const classes = ['chat', `chat-${position}`];
+    if (className) classes.push(className);
+
+    const chatEl = 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 },
+                    chatEl
+                )
+            )
+        );
+    }
+
+    return chatEl;
+};
+
+/**
+ * Chat Image
+ */
+Chat.Image = (props = {}) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const { src, alt = 'Avatar', class: className = '', ...rest } = props;
+
+    return tags.div({ class: `chat-image avatar ${className}`.trim(), ...rest },
+        tags.div({ class: 'w-10 rounded-full' },
+            tags.img({ src, alt })
+        )
+    );
+};
+
+/**
+ * Chat Header
+ */
+Chat.Header = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const { class: className = '', ...rest } = props;
+
+    return tags.div({
+        class: `chat-header ${className}`.trim(),
+        ...rest
+    }, ...children);
+};
+
+/**
+ * Chat Bubble
+ */
+Chat.Bubble = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const { color, class: className = '', ...rest } = props;
+
+    const classes = ['chat-bubble'];
+    if (color) classes.push(`chat-bubble-${color}`);
+    if (className) classes.push(className);
+
+    return tags.div({ class: classes.join(' '), ...rest }, ...children);
+};
+
+/**
+ * Chat Footer
+ */
+Chat.Footer = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const { class: className = '', ...rest } = props;
+
+    return tags.div({
+        class: `chat-footer opacity-50 ${className}`.trim(),
+        ...rest
+    }, ...children);
+};
+
+const tags = window.Lightview.tags;
+tags.Chat = Chat;
+tags['Chat.Image'] = Chat.Image;
+tags['Chat.Header'] = Chat.Header;
+tags['Chat.Bubble'] = Chat.Bubble;
+tags['Chat.Footer'] = Chat.Footer;
+
+export default Chat;