lightview 1.8.2 → 2.0.0

package/components/data-display/stats.js

@@ -0,0 +1,159 @@
+/**
+ * Lightview Stat Component (DaisyUI)
+ * @see https://daisyui.com/components/stat/
+ */
+
+import '../daisyui.js';
+
+/**
+ * Stats Container
+ * @param {Object} props
+ * @param {boolean} props.vertical - Vertical layout
+ * @param {boolean} props.shadow - Add shadow
+ * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
+ */
+const Stats = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    const LVX = window.LightviewX || {};
+
+    if (!tags) return null;
+
+    const { div, shadowDOM } = tags;
+
+    const {
+        vertical = false,
+        shadow = false,
+        useShadow,
+        class: className = '',
+        ...rest
+    } = props;
+
+    const classes = ['stats'];
+    if (vertical) classes.push('stats-vertical');
+    if (shadow) classes.push('shadow');
+    if (className) classes.push(className);
+
+    const statsEl = 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 },
+                    statsEl
+                )
+            )
+        );
+    }
+
+    return statsEl;
+};
+
+/**
+ * Stat Item
+ */
+Stats.Stat = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const { class: className = '', ...rest } = props;
+
+    return tags.div({ class: `stat ${className}`.trim(), ...rest }, ...children);
+};
+
+/**
+ * Stat Figure (icon/image container)
+ */
+Stats.Figure = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const { class: className = '', ...rest } = props;
+
+    return tags.div({
+        class: `stat-figure ${className}`.trim(),
+        ...rest
+    }, ...children);
+};
+
+/**
+ * Stat Title
+ */
+Stats.Title = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const { class: className = '', ...rest } = props;
+
+    return tags.div({
+        class: `stat-title ${className}`.trim(),
+        ...rest
+    }, ...children);
+};
+
+/**
+ * Stat Value
+ */
+Stats.Value = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const { class: className = '', ...rest } = props;
+
+    return tags.div({
+        class: `stat-value ${className}`.trim(),
+        ...rest
+    }, ...children);
+};
+
+/**
+ * Stat Desc
+ */
+Stats.Desc = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const { class: className = '', ...rest } = props;
+
+    return tags.div({
+        class: `stat-desc ${className}`.trim(),
+        ...rest
+    }, ...children);
+};
+
+/**
+ * Stat Actions
+ */
+Stats.Actions = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const { class: className = '', ...rest } = props;
+
+    return tags.div({
+        class: `stat-actions ${className}`.trim(),
+        ...rest
+    }, ...children);
+};
+
+const tags = window.Lightview.tags;
+tags.Stats = Stats;
+tags['Stats.Stat'] = Stats.Stat;
+tags['Stats.Figure'] = Stats.Figure;
+tags['Stats.Title'] = Stats.Title;
+tags['Stats.Value'] = Stats.Value;
+tags['Stats.Desc'] = Stats.Desc;
+tags['Stats.Actions'] = Stats.Actions;
+
+export default Stats;

package/components/data-display/table.js

@@ -0,0 +1,146 @@
+/**
+ * Lightview Table Component (DaisyUI)
+ * @see https://daisyui.com/components/table/
+ */
+
+import '../daisyui.js';
+
+/**
+ * Table Component
+ * @param {Object} props
+ * @param {boolean} props.zebra - Zebra striping
+ * @param {boolean} props.pinRows - Pin rows on scroll
+ * @param {boolean} props.pinCols - Pin columns on scroll
+ * @param {string} props.size - 'xs' | 'sm' | 'md' | 'lg'
+ * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
+ */
+const Table = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    const LVX = window.LightviewX || {};
+
+    if (!tags) return null;
+
+    const { table, div, shadowDOM } = tags;
+
+    const {
+        zebra = false,
+        pinRows = false,
+        pinCols = false,
+        size,
+        useShadow,
+        class: className = '',
+        ...rest
+    } = props;
+
+    const classes = ['table'];
+    if (zebra) classes.push('table-zebra');
+    if (pinRows) classes.push('table-pin-rows');
+    if (pinCols) classes.push('table-pin-cols');
+    if (size) classes.push(`table-${size}`);
+    if (className) classes.push(className);
+
+    const tableEl = table({ 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 },
+                    tableEl
+                )
+            )
+        );
+    }
+
+    return tableEl;
+};
+
+/**
+ * Table Head
+ */
+Table.Head = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    return tags.thead(props, ...children);
+};
+
+/**
+ * Table Body
+ */
+Table.Body = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    return tags.tbody(props, ...children);
+};
+
+/**
+ * Table Row
+ */
+Table.Row = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const { hover = false, active = false, class: className = '', ...rest } = props;
+
+    const classes = [];
+    if (hover) classes.push('hover');
+    if (active) classes.push('active');
+    if (className) classes.push(className);
+
+    return tags.tr({ class: classes.join(' ') || undefined, ...rest }, ...children);
+};
+
+/**
+ * Table Header Cell
+ */
+Table.Th = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    return tags.th(props, ...children);
+};
+
+/**
+ * Table Data Cell
+ */
+Table.Td = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    return tags.td(props, ...children);
+};
+
+/**
+ * Table Foot
+ */
+Table.Foot = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    return tags.tfoot(props, ...children);
+};
+
+const tags = window.Lightview.tags;
+
+tags.Table = Table;
+tags['Table.Head'] = Table.Head;
+tags['Table.Body'] = Table.Body;
+tags['Table.Row'] = Table.Row;
+tags['Table.Th'] = Table.Th;
+tags['Table.Td'] = Table.Td;
+tags['Table.Foot'] = Table.Foot;
+
+export default Table;

package/components/data-display/timeline.js

@@ -0,0 +1,146 @@
+/**
+ * Lightview Timeline Component (DaisyUI)
+ * @see https://daisyui.com/components/timeline/
+ */
+
+import '../daisyui.js';
+
+/**
+ * Timeline Component
+ * @param {Object} props
+ * @param {boolean} props.snap - Snap to items
+ * @param {boolean} props.vertical - Vertical layout
+ * @param {boolean} props.compact - Compact mode
+ * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
+ */
+const Timeline = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    const LVX = window.LightviewX || {};
+
+    if (!tags) return null;
+
+    const { ul, div, shadowDOM } = tags;
+
+    const {
+        snap = false,
+        vertical = true,
+        compact = false,
+        useShadow,
+        class: className = '',
+        ...rest
+    } = props;
+
+    const classes = ['timeline'];
+    if (snap) classes.push('timeline-snap-icon');
+    if (vertical) classes.push('timeline-vertical');
+    if (compact) classes.push('timeline-compact');
+    if (className) classes.push(className);
+
+    const timelineEl = ul({ 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 },
+                    timelineEl
+                )
+            )
+        );
+    }
+
+    return timelineEl;
+};
+
+/**
+ * Timeline Item
+ */
+Timeline.Item = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    return tags.li(props, ...children);
+};
+
+/**
+ * Timeline Start
+ */
+Timeline.Start = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const { class: className = '', ...rest } = props;
+
+    return tags.div({
+        class: `timeline-start ${className}`.trim(),
+        ...rest
+    }, ...children);
+};
+
+/**
+ * Timeline Middle (icon)
+ */
+Timeline.Middle = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const { class: className = '', ...rest } = props;
+
+    return tags.div({
+        class: `timeline-middle ${className}`.trim(),
+        ...rest
+    }, ...children);
+};
+
+/**
+ * Timeline End
+ */
+Timeline.End = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const { class: className = '', box = false, ...rest } = props;
+
+    const classes = ['timeline-end'];
+    if (box) classes.push('timeline-box');
+    if (className) classes.push(className);
+
+    return tags.div({ class: classes.join(' '), ...rest }, ...children);
+};
+
+/**
+ * Timeline HR (connector line)
+ */
+Timeline.Hr = (props = {}) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const { color, class: className = '', ...rest } = props;
+
+    const classes = [];
+    if (color) classes.push(`bg-${color}`);
+    if (className) classes.push(className);
+
+    return tags.hr({ class: classes.join(' ') || undefined, ...rest });
+};
+
+const tags = window.Lightview.tags;
+tags.Timeline = Timeline;
+tags['Timeline.Item'] = Timeline.Item;
+tags['Timeline.Start'] = Timeline.Start;
+tags['Timeline.Middle'] = Timeline.Middle;
+tags['Timeline.End'] = Timeline.End;
+tags['Timeline.Hr'] = Timeline.Hr;
+
+export default Timeline;

package/components/data-display/toast.js

@@ -0,0 +1,72 @@
+/**
+ * Lightview Toast Component (DaisyUI)
+ * @see https://daisyui.com/components/toast/
+ */
+
+import '../daisyui.js';
+
+/**
+ * Toast Component - positioned container for alerts
+ * @param {Object} props
+ * @param {string} props.position - 'start' | 'center' | 'end'
+ * @param {string} props.vertical - 'top' | 'middle' | 'bottom'
+ * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
+ */
+const Toast = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    const LVX = window.LightviewX || {};
+
+    if (!tags) return null;
+
+    const { div, shadowDOM } = tags;
+
+    const {
+        position = 'end',
+        vertical = 'bottom',
+        useShadow,
+        class: className = '',
+        ...rest
+    } = props;
+
+    const classes = ['toast'];
+
+    if (position === 'start') classes.push('toast-start');
+    else if (position === 'center') classes.push('toast-center');
+    else if (position === 'end') classes.push('toast-end');
+
+    if (vertical === 'top') classes.push('toast-top');
+    else if (vertical === 'middle') classes.push('toast-middle');
+    else if (vertical === 'bottom') classes.push('toast-bottom');
+
+    if (className) classes.push(className);
+
+    const toastEl = 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 },
+                    toastEl
+                )
+            )
+        );
+    }
+
+    return toastEl;
+};
+
+window.Lightview.tags.Toast = Toast;
+
+export default Toast;

package/components/data-display/tooltip.js

@@ -0,0 +1,74 @@
+/**
+ * Lightview Tooltip Component (DaisyUI)
+ * @see https://daisyui.com/components/tooltip/
+ */
+
+import '../daisyui.js';
+
+/**
+ * Tooltip Component
+ * @param {Object} props
+ * @param {string} props.tip - Tooltip text
+ * @param {string} props.position - 'top' | 'bottom' | 'left' | 'right'
+ * @param {string} props.color - 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'
+ * @param {boolean} props.open - Force open state
+ * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
+ */
+const Tooltip = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    const LVX = window.LightviewX || {};
+
+    if (!tags) return null;
+
+    const { div, shadowDOM } = tags;
+
+    const {
+        tip,
+        position,
+        color,
+        open = false,
+        useShadow,
+        class: className = '',
+        ...rest
+    } = props;
+
+    const classes = ['tooltip'];
+    if (position) classes.push(`tooltip-${position}`);
+    if (color) classes.push(`tooltip-${color}`);
+    if (open) classes.push('tooltip-open');
+    if (className) classes.push(className);
+
+    const tooltipEl = div({
+        class: classes.join(' '),
+        'data-tip': tip,
+        ...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 },
+                    tooltipEl
+                )
+            )
+        );
+    }
+
+    return tooltipEl;
+};
+
+window.Lightview.tags.Tooltip = Tooltip;
+
+export default Tooltip;