lightview 1.8.2 → 2.0.0

package/components/data-display/collapse.js

@@ -0,0 +1,103 @@
+/**
+ * Lightview Collapse Component (DaisyUI)
+ * @see https://daisyui.com/components/collapse/
+ */
+
+import '../daisyui.js';
+
+/**
+ * Collapse Component
+ * @param {Object} props
+ * @param {string} props.icon - 'arrow' | 'plus'
+ * @param {boolean} props.open - Initially open
+ * @param {boolean} props.focus - Open on focus
+ * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
+ */
+const Collapse = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    const LVX = window.LightviewX || {};
+
+    if (!tags) return null;
+
+    const { div, input, shadowDOM } = tags;
+
+    const {
+        icon = 'arrow',
+        open = false,
+        focus = false,
+        useShadow,
+        class: className = '',
+        ...rest
+    } = props;
+
+    const classes = ['collapse', 'bg-base-100', 'border', 'border-base-300', 'rounded-box'];
+    if (icon === 'arrow') classes.push('collapse-arrow');
+    else if (icon === 'plus') classes.push('collapse-plus');
+    if (className) classes.push(className);
+
+    const collapseEl = div({ class: classes.join(' '), ...rest },
+        input({ type: 'checkbox', checked: open }),
+        ...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 },
+                    collapseEl
+                )
+            )
+        );
+    }
+
+    return collapseEl;
+};
+
+/**
+ * Collapse Title
+ */
+Collapse.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);
+};
+
+/**
+ * Collapse Content
+ */
+Collapse.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.Collapse = Collapse;
+tags['Collapse.Title'] = Collapse.Title;
+tags['Collapse.Content'] = Collapse.Content;
+
+export default Collapse;

package/components/data-display/countdown.js

@@ -0,0 +1,69 @@
+/**
+ * Lightview Countdown Component (DaisyUI)
+ * @see https://daisyui.com/components/countdown/
+ */
+
+import '../daisyui.js';
+
+/**
+ * Countdown Component
+ * @param {Object} props
+ * @param {number|function} props.value - Countdown value (0-99)
+ * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
+ */
+const Countdown = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    const LVX = window.LightviewX || {};
+
+    if (!tags) return null;
+
+    const { span, div, shadowDOM } = tags;
+
+    const {
+        value = 0,
+        useShadow,
+        class: className = '',
+        ...rest
+    } = props;
+
+    const getValue = () => typeof value === 'function' ? value() : value;
+
+    const countdownEl = span({
+        class: `countdown ${className}`.trim(),
+        ...rest
+    },
+        span({
+            style: typeof value === 'function'
+                ? () => `--value:${getValue()};`
+                : `--value:${value};`
+        })
+    );
+
+    // 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 },
+                    countdownEl
+                )
+            )
+        );
+    }
+
+    return countdownEl;
+};
+
+window.Lightview.tags.Countdown = Countdown;
+
+export default Countdown;

package/components/data-display/diff.js

@@ -0,0 +1,111 @@
+/**
+ * Lightview Diff Component (DaisyUI)
+ * @see https://daisyui.com/components/diff/
+ */
+
+import '../daisyui.js';
+
+/**
+ * Diff Component - side-by-side comparison
+ * @param {Object} props
+ * @param {string} props.aspectRatio - Aspect ratio class (e.g., 'aspect-16/9')
+ * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
+ */
+const Diff = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    const LVX = window.LightviewX || {};
+
+    if (!tags) return null;
+
+    const { div, shadowDOM } = tags;
+
+    const {
+        aspectRatio = 'aspect-16/9',
+        useShadow,
+        class: className = '',
+        ...rest
+    } = props;
+
+    const diffEl = div({
+        class: `diff ${aspectRatio} ${className}`.trim(),
+        ...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 },
+                    diffEl
+                )
+            )
+        );
+    }
+
+    return diffEl;
+};
+
+/**
+ * Diff Item 1
+ */
+Diff.Item1 = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const { src, alt = '', class: className = '', ...rest } = props;
+
+    if (src) {
+        return tags.div({ class: `diff-item-1 ${className}`.trim(), role: 'img', ...rest },
+            tags.img({ src, alt })
+        );
+    }
+
+    return tags.div({ class: `diff-item-1 ${className}`.trim(), ...rest }, ...children);
+};
+
+/**
+ * Diff Item 2
+ */
+Diff.Item2 = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const { src, alt = '', class: className = '', ...rest } = props;
+
+    if (src) {
+        return tags.div({ class: `diff-item-2 ${className}`.trim(), role: 'img', tabindex: '0', ...rest },
+            tags.img({ src, alt })
+        );
+    }
+
+    return tags.div({ class: `diff-item-2 ${className}`.trim(), tabindex: '0', ...rest }, ...children);
+};
+
+/**
+ * Diff Resizer
+ */
+Diff.Resizer = (props = {}) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    return tags.div({ class: 'diff-resizer', ...props });
+};
+
+const tags = window.Lightview.tags;
+tags.Diff = Diff;
+tags['Diff.Item1'] = Diff.Item1;
+tags['Diff.Item2'] = Diff.Item2;
+tags['Diff.Resizer'] = Diff.Resizer;
+
+export default Diff;

package/components/data-display/kbd.js

@@ -0,0 +1,65 @@
+/**
+ * Lightview Kbd Component (DaisyUI)
+ * @see https://daisyui.com/components/kbd/
+ */
+
+import '../daisyui.js';
+
+/**
+ * Kbd Component - keyboard key indicator
+ * @param {Object} props
+ * @param {string} props.size - 'xs' | 'sm' | 'md' | 'lg'
+ * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
+ */
+const Kbd = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    const LVX = window.LightviewX || {};
+
+    if (!tags) return null;
+
+    const { kbd, div, shadowDOM } = tags;
+
+    const { size, useShadow, class: className = '', ...rest } = props;
+
+    const classes = ['kbd'];
+    if (size) classes.push(`kbd-${size}`);
+    if (className) classes.push(className);
+
+    const kbdEl = kbd({ 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 },
+                    kbdEl
+                )
+            )
+        );
+    }
+
+    return kbdEl;
+};
+
+window.Lightview.tags.Kbd = Kbd;
+
+// Register as Custom Element
+if (window.LightviewX?.createCustomElement) {
+    const KbdElement = window.LightviewX.createCustomElement(Kbd);
+    if (!customElements.get('lv-kbd')) {
+        customElements.define('lv-kbd', KbdElement);
+    }
+}
+
+export default Kbd;

package/components/data-display/loading.js

@@ -0,0 +1,75 @@
+/**
+ * Lightview Loading Component (DaisyUI)
+ * @see https://daisyui.com/components/loading/
+ */
+
+import '../daisyui.js';
+
+/**
+ * Loading Component
+ * @param {Object} props
+ * @param {string} props.type - 'spinner' | 'dots' | 'ring' | 'ball' | 'bars' | 'infinity'
+ * @param {string} props.size - 'xs' | 'sm' | 'md' | 'lg'
+ * @param {string} props.color - Color class (e.g., 'text-primary')
+ * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
+ */
+const Loading = (props = {}) => {
+    const { tags } = window.Lightview || {};
+    const LVX = window.LightviewX || {};
+
+    if (!tags) return null;
+
+    const { span, div, shadowDOM } = tags;
+
+    const {
+        type = 'spinner',
+        size,
+        color,
+        useShadow,
+        class: className = '',
+        ...rest
+    } = props;
+
+    const classes = ['loading', `loading-${type}`];
+    if (size) classes.push(`loading-${size}`);
+    if (color) classes.push(color);
+    if (className) classes.push(className);
+
+    const loadingEl = span({ class: classes.join(' '), ...rest });
+
+    // 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 span({ style: 'margin-right: 0.5rem' },
+            shadowDOM({ mode: 'open', adoptedStyleSheets },
+                div({ 'data-theme': themeValue, style: 'display: inline-block' },
+                    loadingEl
+                )
+            )
+        );
+    }
+
+    return loadingEl;
+};
+
+window.Lightview.tags.Loading = Loading;
+
+// Register as Custom Element
+if (window.LightviewX?.createCustomElement) {
+    const LoadingElement = window.LightviewX.createCustomElement(Loading);
+    if (!customElements.get('lv-loading')) {
+        customElements.define('lv-loading', LoadingElement);
+    }
+}
+
+export default Loading;

package/components/data-display/progress.js

@@ -0,0 +1,79 @@
+/**
+ * Lightview Progress Component (DaisyUI)
+ * @see https://daisyui.com/components/progress/
+ */
+
+import '../daisyui.js';
+
+/**
+ * Progress Component
+ * @param {Object} props
+ * @param {number|function} props.value - Progress value (0-100)
+ * @param {number} props.max - Maximum value (default: 100)
+ * @param {string} props.color - 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'
+ * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
+ */
+const Progress = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    const LVX = window.LightviewX || {};
+
+    if (!tags) return null;
+
+    const { progress, div, shadowDOM } = tags;
+
+    const {
+        value = 0,
+        max = 100,
+        color,
+        useShadow,
+        class: className = '',
+        ...rest
+    } = props;
+
+    const classes = ['progress'];
+    if (color) classes.push(`progress-${color}`);
+    if (className) classes.push(className);
+
+    const progressEl = progress({
+        class: classes.join(' '),
+        value: typeof value === 'function' ? value : value,
+        max,
+        ...rest
+    });
+
+    // 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 },
+                    progressEl
+                )
+            )
+        );
+    }
+
+    return progressEl;
+};
+
+window.Lightview.tags.Progress = Progress;
+
+// Register as Custom Element
+if (window.LightviewX?.createCustomElement) {
+    const ProgressElement = window.LightviewX.createCustomElement(Progress);
+    if (!customElements.get('lv-progress')) {
+        customElements.define('lv-progress', ProgressElement);
+    }
+}
+
+export default Progress;

package/components/data-display/radial-progress.js

@@ -0,0 +1,88 @@
+/**
+ * Lightview Radial Progress Component (DaisyUI)
+ * @see https://daisyui.com/components/radial-progress/
+ */
+
+import '../daisyui.js';
+
+/**
+ * Radial Progress Component
+ * @param {Object} props
+ * @param {number|function} props.value - Progress value (0-100)
+ * @param {string} props.size - Size in CSS units (e.g., '4rem')
+ * @param {string} props.thickness - Border thickness (e.g., '2px')
+ * @param {string} props.color - Color class (e.g., 'text-primary')
+ * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
+ */
+const RadialProgress = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    const LVX = window.LightviewX || {};
+
+    if (!tags) return null;
+
+    const { div, span, shadowDOM } = tags;
+
+    const {
+        value = 0,
+        size = '4rem',
+        thickness = '4px',
+        color,
+        useShadow,
+        class: className = '',
+        ...rest
+    } = props;
+
+    const classes = ['radial-progress'];
+    if (color) classes.push(color);
+    if (className) classes.push(className);
+
+    const getValue = () => typeof value === 'function' ? value() : value;
+
+    const radialEl = div({
+        class: classes.join(' '),
+        style: typeof value === 'function'
+            ? () => `--value:${getValue()}; --size:${size}; --thickness:${thickness};`
+            : `--value:${value}; --size:${size}; --thickness:${thickness};`,
+        role: 'progressbar',
+        'aria-valuenow': typeof value === 'function' ? value : value,
+        'aria-valuemin': '0',
+        'aria-valuemax': '100',
+        ...rest
+    }, children.length ? children : [() => getValue() + '%']);
+
+    // 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', style: 'display: inline-block' },
+            shadowDOM({ mode: 'open', adoptedStyleSheets },
+                div({ 'data-theme': themeValue },
+                    radialEl
+                )
+            )
+        );
+    }
+
+    return radialEl;
+};
+
+window.Lightview.tags.RadialProgress = RadialProgress;
+
+// Register as Custom Element
+if (window.LightviewX?.createCustomElement) {
+    const RadialProgressElement = window.LightviewX.createCustomElement(RadialProgress);
+    if (!customElements.get('lv-radial-progress')) {
+        customElements.define('lv-radial-progress', RadialProgressElement);
+    }
+}
+
+export default RadialProgress;

package/components/data-display/skeleton.js

@@ -0,0 +1,66 @@
+/**
+ * Lightview Skeleton Component (DaisyUI)
+ * @see https://daisyui.com/components/skeleton/
+ */
+
+import '../daisyui.js';
+
+/**
+ * Skeleton Component - loading placeholder
+ * @param {Object} props
+ * @param {string} props.shape - 'circle' | 'rect'
+ * @param {string} props.width - Width class or value
+ * @param {string} props.height - Height class or value
+ * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
+ */
+const Skeleton = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    const LVX = window.LightviewX || {};
+
+    if (!tags) return null;
+
+    const { div, shadowDOM } = tags;
+
+    const {
+        shape,
+        width = 'w-full',
+        height = 'h-4',
+        useShadow,
+        class: className = '',
+        ...rest
+    } = props;
+
+    const classes = ['skeleton', width, height];
+    if (shape === 'circle') classes.push('rounded-full');
+    if (className) classes.push(className);
+
+    const skeletonEl = 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 },
+                    skeletonEl
+                )
+            )
+        );
+    }
+
+    return skeletonEl;
+};
+
+window.Lightview.tags.Skeleton = Skeleton;
+
+export default Skeleton;