lightview 1.8.2 → 2.0.0

package/components/layout/drawer.js

@@ -0,0 +1,142 @@
+/**
+ * Lightview Drawer Component (DaisyUI)
+ * @see https://daisyui.com/components/drawer/
+ */
+
+import '../daisyui.js';
+
+/**
+ * Drawer Component
+ * @param {Object} props
+ * @param {string} props.id - Unique ID for the drawer
+ * @param {boolean|function} props.open - Control open state
+ * @param {boolean} props.end - Drawer on right side
+ * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
+ */
+const Drawer = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    const LVX = window.LightviewX || {};
+
+    if (!tags) return null;
+
+    const { div, input, label, shadowDOM } = tags;
+
+    const {
+        id = 'drawer-' + Math.random().toString(36).slice(2),
+        open = false,
+        end = false,
+        useShadow,
+        class: className = '',
+        ...rest
+    } = props;
+
+    const classes = ['drawer'];
+    if (end) classes.push('drawer-end');
+    if (className) classes.push(className);
+
+    const drawerEl = div({ class: classes.join(' '), ...rest },
+        input({
+            id,
+            type: 'checkbox',
+            class: 'drawer-toggle',
+            checked: typeof open === 'function' ? open : 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 },
+                    drawerEl
+                )
+            )
+        );
+    }
+
+    return drawerEl;
+};
+
+/**
+ * Drawer Content - main content area
+ */
+Drawer.Content = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const { class: className = '', ...rest } = props;
+
+    return tags.div({
+        class: `drawer-content ${className}`.trim(),
+        ...rest
+    }, ...children);
+};
+
+/**
+ * Drawer Side - sidebar content
+ */
+Drawer.Side = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const { class: className = '', ...rest } = props;
+
+    return tags.div({
+        class: `drawer-side ${className}`.trim(),
+        ...rest
+    }, ...children);
+};
+
+/**
+ * Drawer Overlay - click to close
+ */
+Drawer.Overlay = (props = {}) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const { for: forId, class: className = '', ...rest } = props;
+
+    return tags.label({
+        for: forId,
+        'aria-label': 'close sidebar',
+        class: `drawer-overlay ${className}`.trim(),
+        ...rest
+    });
+};
+
+/**
+ * Drawer Button - toggle button
+ */
+Drawer.Button = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const { for: forId, class: className = '', ...rest } = props;
+
+    return tags.label({
+        for: forId,
+        class: `btn btn-primary drawer-button ${className}`.trim(),
+        ...rest
+    }, ...children);
+};
+
+const tags = window.Lightview.tags;
+tags.Drawer = Drawer;
+tags['Drawer.Content'] = Drawer.Content;
+tags['Drawer.Side'] = Drawer.Side;
+tags['Drawer.Overlay'] = Drawer.Overlay;
+tags['Drawer.Button'] = Drawer.Button;
+
+export default Drawer;

package/components/layout/footer.js

@@ -0,0 +1,100 @@
+/**
+ * Lightview Footer Component (DaisyUI)
+ * @see https://daisyui.com/components/footer/
+ */
+
+import '../daisyui.js';
+
+/**
+ * Footer Component
+ * @param {Object} props
+ * @param {boolean} props.center - Center content
+ * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
+ */
+const Footer = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    const LVX = window.LightviewX || {};
+
+    if (!tags) return null;
+
+    const { footer, div, shadowDOM } = tags;
+
+    const {
+        center = false,
+        useShadow,
+        class: className = '',
+        ...rest
+    } = props;
+
+    const classes = ['footer', 'bg-neutral', 'text-neutral-content', 'p-10'];
+    if (center) classes.push('footer-center');
+    if (className) classes.push(className);
+
+    const footerEl = footer({ 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 },
+                    footerEl
+                )
+            )
+        );
+    }
+
+    return footerEl;
+};
+
+/**
+ * Footer Title
+ */
+Footer.Title = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const { class: className = '', ...rest } = props;
+
+    return tags.h6({
+        class: `footer-title ${className}`.trim(),
+        ...rest
+    }, ...children);
+};
+
+/**
+ * Footer Nav - Navigation section within footer
+ */
+Footer.Nav = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const { class: className = '', style = '', ...rest } = props;
+
+    // Use border radius variable for consistent padding
+    const defaultStyle = 'padding: var(--rounded-box, 1rem);';
+    const combinedStyle = style ? `${defaultStyle} ${style}` : defaultStyle;
+
+    return tags.nav({
+        class: className || undefined,
+        style: combinedStyle,
+        ...rest
+    }, ...children);
+};
+
+const tags = window.Lightview.tags;
+tags.Footer = Footer;
+tags['Footer.Title'] = Footer.Title;
+tags['Footer.Nav'] = Footer.Nav;
+
+export default Footer;

package/components/layout/hero.js

@@ -0,0 +1,109 @@
+/**
+ * Lightview Hero Component (DaisyUI)
+ * @see https://daisyui.com/components/hero/
+ */
+
+import '../daisyui.js';
+
+/**
+ * Hero Component
+ * @param {Object} props
+ * @param {string} props.bgImage - Background image URL
+ * @param {boolean} props.overlay - Add overlay on background
+ * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
+ */
+const Hero = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    const LVX = window.LightviewX || {};
+
+    if (!tags) return null;
+
+    const { div, shadowDOM } = tags;
+
+    const {
+        bgImage,
+        overlay = false,
+        useShadow,
+        class: className = '',
+        style = '',
+        ...rest
+    } = props;
+
+    const classes = ['hero', 'min-h-96'];
+    if (className) classes.push(className);
+
+    let styleStr = style;
+    if (bgImage) {
+        styleStr = `background-image: url("${bgImage}"); ${style}`;
+    }
+
+    const heroContent = [
+        overlay ? div({ class: 'hero-overlay bg-opacity-60' }) : null,
+        ...children
+    ].filter(Boolean);
+
+    const heroEl = div({
+        class: classes.join(' '),
+        style: styleStr || undefined,
+        ...rest
+    }, ...heroContent);
+
+    // 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 },
+                    heroEl
+                )
+            )
+        );
+    }
+
+    return heroEl;
+};
+
+/**
+ * Hero Content
+ */
+Hero.Content = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const { position = 'center', center, class: className = '', ...rest } = props;
+
+    const classes = ['hero-content'];
+    if (position === 'center' || center === true) classes.push('text-center');
+    else if (position === 'start') classes.push('text-start');
+    if (className) classes.push(className);
+
+    return tags.div({ class: classes.join(' '), ...rest }, ...children);
+};
+
+/**
+ * Hero Overlay
+ */
+Hero.Overlay = (props = {}) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const { class: className = '', ...rest } = props;
+    return tags.div({ class: `hero-overlay bg-opacity-60 ${className}`.trim(), ...rest });
+};
+
+const tags = window.Lightview.tags;
+tags.Hero = Hero;
+tags['Hero.Content'] = Hero.Content;
+tags['Hero.Overlay'] = Hero.Overlay;
+
+export default Hero;

package/components/layout/indicator.js

@@ -0,0 +1,90 @@
+/**
+ * Lightview Indicator Component (DaisyUI)
+ * @see https://daisyui.com/components/indicator/
+ */
+
+import '../daisyui.js';
+
+/**
+ * Indicator Component - positions a badge/element on corner of another element
+ * @param {Object} props
+ * @param {string} props.position - Combination of 'top'|'middle'|'bottom' and 'start'|'center'|'end'
+ * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
+ */
+const Indicator = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    const LVX = window.LightviewX || {};
+
+    if (!tags) return null;
+
+    const { div, shadowDOM } = tags;
+
+    const { useShadow, class: className = '', ...rest } = props;
+
+    const indicatorEl = div({
+        class: `indicator ${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 },
+                    indicatorEl
+                )
+            )
+        );
+    }
+
+    return indicatorEl;
+};
+
+/**
+ * Indicator Item - the positioned element
+ */
+Indicator.Item = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const {
+        position,
+        class: className = '',
+        ...rest
+    } = props;
+
+    const classes = ['indicator-item'];
+
+    // Position classes
+    if (position) {
+        const [v, h] = position.split('-');
+        if (v === 'top') classes.push('indicator-top');
+        else if (v === 'middle') classes.push('indicator-middle');
+        else if (v === 'bottom') classes.push('indicator-bottom');
+
+        if (h === 'start') classes.push('indicator-start');
+        else if (h === 'center') classes.push('indicator-center');
+        else if (h === 'end') classes.push('indicator-end');
+    }
+
+    if (className) classes.push(className);
+
+    return tags.span({ class: classes.join(' '), ...rest }, ...children);
+};
+
+const tags = window.Lightview.tags;
+tags.Indicator = Indicator;
+tags['Indicator.Item'] = Indicator.Item;
+
+export default Indicator;

package/components/layout/join.js

@@ -0,0 +1,78 @@
+/**
+ * Lightview Join Component (DaisyUI)
+ * @see https://daisyui.com/components/join/
+ */
+
+import '../daisyui.js';
+
+/**
+ * Join Component - groups items with shared borders
+ * @param {Object} props
+ * @param {boolean} props.vertical - Vertical layout
+ * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
+ */
+const Join = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    const LVX = window.LightviewX || {};
+
+    if (!tags) return null;
+
+    const { div, shadowDOM } = tags;
+
+    const {
+        vertical = false,
+        useShadow,
+        class: className = '',
+        ...rest
+    } = props;
+
+    const classes = ['join'];
+    if (vertical) classes.push('join-vertical');
+    if (className) classes.push(className);
+
+    const joinEl = 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 },
+                    joinEl
+                )
+            )
+        );
+    }
+
+    return joinEl;
+};
+
+/**
+ * Join Item - each joined element should have this class
+ */
+Join.Item = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const { as = 'button', class: className = '', ...rest } = props;
+    const el = tags[as] || tags.div;
+
+    return el({
+        class: `join-item ${className}`.trim(),
+        ...rest
+    }, ...children);
+};
+
+window.Lightview.tags.Join = Join;
+
+export default Join;

package/components/layout/navbar.js

@@ -0,0 +1,110 @@
+/**
+ * Lightview Navbar Component (DaisyUI)
+ * @see https://daisyui.com/components/navbar/
+ */
+
+import '../daisyui.js';
+
+/**
+ * Navbar Component
+ * @param {Object} props
+ * @param {string} props.bg - Background class (e.g., 'bg-base-100')
+ * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
+ */
+const Navbar = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    const LVX = window.LightviewX || {};
+
+    if (!tags) return null;
+
+    const { div, shadowDOM } = tags;
+
+    const {
+        bg = 'bg-base-100',
+        useShadow,
+        class: className = '',
+        ...rest
+    } = props;
+
+    const classes = ['navbar', bg];
+    if (className) classes.push(className);
+
+    const navbarEl = 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 },
+                    navbarEl
+                )
+            )
+        );
+    }
+
+    return navbarEl;
+};
+
+/**
+ * Navbar Start
+ */
+Navbar.Start = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const { class: className = '', ...rest } = props;
+
+    return tags.div({
+        class: `navbar-start ${className}`.trim(),
+        ...rest
+    }, ...children);
+};
+
+/**
+ * Navbar Center
+ */
+Navbar.Center = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const { class: className = '', ...rest } = props;
+
+    return tags.div({
+        class: `navbar-center ${className}`.trim(),
+        ...rest
+    }, ...children);
+};
+
+/**
+ * Navbar End
+ */
+Navbar.End = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const { class: className = '', ...rest } = props;
+
+    return tags.div({
+        class: `navbar-end ${className}`.trim(),
+        ...rest
+    }, ...children);
+};
+
+const tags = window.Lightview.tags;
+tags.Navbar = Navbar;
+tags['Navbar.Start'] = Navbar.Start;
+tags['Navbar.Center'] = Navbar.Center;
+tags['Navbar.End'] = Navbar.End;
+
+export default Navbar;