lightview 1.8.1-b → 2.0.0

package/components/navigation/breadcrumbs.js

@@ -0,0 +1,91 @@
+/**
+ * Lightview Breadcrumbs Component (DaisyUI)
+ * @see https://daisyui.com/components/breadcrumbs/
+ */
+
+import '../daisyui.js';
+
+/**
+ * Breadcrumbs Component
+ * @param {Object} props
+ * @param {Array} props.items - Array of {label, href} objects
+ * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
+ */
+const Breadcrumbs = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    const LVX = window.LightviewX || {};
+
+    if (!tags) return null;
+
+    const { div, ul, li, a, shadowDOM } = tags;
+
+    const {
+        items = [],
+        useShadow,
+        class: className = '',
+        ...rest
+    } = props;
+
+    const breadcrumbItems = items.map((item, index) => {
+        if (index === items.length - 1) {
+            // Last item - no link
+            return li({}, item.label);
+        }
+        return li({}, a({ href: item.href }, item.label));
+    });
+
+    const breadcrumbsEl = div({
+        class: `breadcrumbs text-sm ${className}`.trim(),
+        ...rest
+    },
+        ul({}, ...breadcrumbItems, ...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', style: 'display: inline-block' },
+            shadowDOM({ mode: 'open', adoptedStyleSheets },
+                div({ 'data-theme': themeValue },
+                    breadcrumbsEl
+                )
+            )
+        );
+    }
+
+    return breadcrumbsEl;
+};
+
+/**
+ * Breadcrumbs Item
+ */
+Breadcrumbs.Item = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const { href, class: className = '', ...rest } = props;
+
+    if (href) {
+        return tags.li({ class: className, ...rest },
+            tags.a({ href }, ...children)
+        );
+    }
+
+    return tags.li({ class: className, ...rest }, ...children);
+};
+
+
+const tags = window.Lightview.tags;
+tags.Breadcrumbs = Breadcrumbs;
+tags['Breadcrumbs.Item'] = Breadcrumbs.Item;
+export default Breadcrumbs;

package/components/navigation/dock.js

@@ -0,0 +1,103 @@
+/**
+ * Lightview Dock Component (DaisyUI)
+ * @see https://daisyui.com/components/dock/
+ */
+
+import '../daisyui.js';
+
+/**
+ * Dock Component - bottom navigation bar
+ * @param {Object} props
+ * @param {string} props.size - 'xs' | 'sm' | 'md' | 'lg'
+ * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
+ */
+const Dock = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    const LVX = window.LightviewX || {};
+
+    if (!tags) return null;
+
+    const { div, shadowDOM } = tags;
+
+    const {
+        size,
+        useShadow,
+        class: className = '',
+        ...rest
+    } = props;
+
+    const classes = ['dock'];
+    if (size) classes.push(`dock-${size}`);
+    if (className) classes.push(className);
+
+    const dockEl = 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 },
+                    dockEl
+                )
+            )
+        );
+    }
+
+    return dockEl;
+};
+
+/**
+ * Dock Item
+ */
+Dock.Item = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const {
+        active = false,
+        class: className = '',
+        ...rest
+    } = props;
+
+    const classes = [];
+    if (active) classes.push('dock-active');
+    if (className) classes.push(className);
+
+    return tags.button({
+        class: classes.join(' ') || undefined,
+        ...rest
+    }, ...children);
+};
+
+/**
+ * Dock Label
+ */
+Dock.Label = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const { class: className = '', ...rest } = props;
+
+    return tags.span({
+        class: `dock-label ${className}`.trim(),
+        ...rest
+    }, ...children);
+};
+
+const tags = window.Lightview.tags;
+tags.Dock = Dock;
+tags['Dock.Item'] = Dock.Item;
+tags['Dock.Label'] = Dock.Label;
+
+export default Dock;

package/components/navigation/menu.js

@@ -0,0 +1,126 @@
+/**
+ * Lightview Menu Component (DaisyUI)
+ * @see https://daisyui.com/components/menu/
+ */
+
+import '../daisyui.js';
+
+/**
+ * Menu Component
+ * @param {Object} props
+ * @param {boolean} props.horizontal - Horizontal layout
+ * @param {string} props.size - 'xs' | 'sm' | 'md' | 'lg'
+ * @param {string} props.bg - Background class
+ * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
+ */
+const Menu = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    const LVX = window.LightviewX || {};
+
+    if (!tags) return null;
+
+    const { ul, div, shadowDOM } = tags;
+
+    const {
+        horizontal = false,
+        size,
+        bg = 'bg-base-200',
+        useShadow,
+        class: className = '',
+        ...rest
+    } = props;
+
+    const classes = ['menu', bg, 'rounded-box'];
+    if (horizontal) classes.push('menu-horizontal');
+    if (size) classes.push(`menu-${size}`);
+    if (className) classes.push(className);
+
+    const menuEl = 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 },
+                    menuEl
+                )
+            )
+        );
+    }
+
+    return menuEl;
+};
+
+/**
+ * Menu Item
+ */
+Menu.Item = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const {
+        disabled = false,
+        active = false,
+        class: className = '',
+        ...rest
+    } = props;
+
+    const classes = [];
+    if (disabled) classes.push('disabled');
+    if (className) classes.push(className);
+
+    const innerClasses = [];
+    if (active) innerClasses.push('active');
+
+    return tags.li({ class: classes.join(' ') || undefined, ...rest },
+        tags.a({ class: innerClasses.join(' ') || undefined }, ...children)
+    );
+};
+
+/**
+ * Menu Title
+ */
+Menu.Title = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const { class: className = '', ...rest } = props;
+
+    return tags.li({ class: `menu-title ${className}`.trim(), ...rest }, ...children);
+};
+
+/**
+ * Menu Dropdown (submenu)
+ */
+Menu.Dropdown = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const { label, open = false, class: className = '', ...rest } = props;
+
+    const details = tags.details({ open, ...rest },
+        tags.summary({}, label),
+        tags.ul({}, ...children)
+    );
+
+    return tags.li({}, details);
+};
+
+const tags = window.Lightview.tags;
+tags.Menu = Menu;
+tags['Menu.Item'] = Menu.Item;
+tags['Menu.Title'] = Menu.Title;
+tags['Menu.Dropdown'] = Menu.Dropdown;
+
+export default Menu;

package/components/navigation/pagination.js

@@ -0,0 +1,105 @@
+/**
+ * Lightview Pagination Component (DaisyUI)
+ * @see https://daisyui.com/components/pagination/
+ */
+
+import '../daisyui.js';
+
+/**
+ * Pagination Component
+ * @param {Object} props
+ * @param {number} props.currentPage - Current page number
+ * @param {number} props.totalPages - Total number of pages
+ * @param {function} props.onPageChange - Callback when page changes
+ * @param {string} props.size - 'xs' | 'sm' | 'md' | 'lg'
+ * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
+ */
+const Pagination = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    const LVX = window.LightviewX || {};
+
+    if (!tags) return null;
+
+    const { div, button, shadowDOM } = tags;
+
+    const {
+        currentPage = 1,
+        totalPages = 1,
+        onPageChange,
+        size,
+        useShadow,
+        class: className = '',
+        ...rest
+    } = props;
+
+    const classes = ['join'];
+    if (className) classes.push(className);
+
+    const getCurrent = () => typeof currentPage === 'function' ? currentPage() : currentPage;
+
+    const buttons = [];
+
+    // Previous button
+    buttons.push(
+        button({
+            class: `join-item btn ${size ? `btn-${size}` : ''}`.trim(),
+            onclick: () => {
+                const current = getCurrent();
+                if (current > 1 && onPageChange) onPageChange(current - 1);
+            },
+            disabled: () => getCurrent() <= 1
+        }, '«')
+    );
+
+    // Page numbers
+    for (let i = 1; i <= totalPages; i++) {
+        buttons.push(
+            button({
+                class: () => `join-item btn ${size ? `btn-${size}` : ''} ${getCurrent() === i ? 'btn-active' : ''}`.trim(),
+                onclick: () => onPageChange && onPageChange(i)
+            }, String(i))
+        );
+    }
+
+    // Next button
+    buttons.push(
+        button({
+            class: `join-item btn ${size ? `btn-${size}` : ''}`.trim(),
+            onclick: () => {
+                const current = getCurrent();
+                if (current < totalPages && onPageChange) onPageChange(current + 1);
+            },
+            disabled: () => getCurrent() >= totalPages
+        }, '»')
+    );
+
+    const paginationEl = div({ class: classes.join(' '), ...rest }, ...buttons, ...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 },
+                    paginationEl
+                )
+            )
+        );
+    }
+
+    return paginationEl;
+};
+
+window.Lightview.tags.Pagination = Pagination;
+
+export default Pagination;

package/components/navigation/steps.js

@@ -0,0 +1,89 @@
+/**
+ * Lightview Steps Component (DaisyUI)
+ * @see https://daisyui.com/components/steps/
+ */
+
+import '../daisyui.js';
+
+/**
+ * Steps Component
+ * @param {Object} props
+ * @param {boolean} props.vertical - Vertical layout
+ * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
+ */
+const Steps = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    const LVX = window.LightviewX || {};
+
+    if (!tags) return null;
+
+    const { ul, div, shadowDOM } = tags;
+
+    const {
+        vertical = false,
+        useShadow,
+        class: className = '',
+        ...rest
+    } = props;
+
+    const classes = ['steps'];
+    if (vertical) classes.push('steps-vertical');
+    if (className) classes.push(className);
+
+    const stepsEl = 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 },
+                    stepsEl
+                )
+            )
+        );
+    }
+
+    return stepsEl;
+};
+
+/**
+ * Steps Item
+ */
+Steps.Item = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    if (!tags) return null;
+
+    const {
+        color,
+        content,
+        class: className = '',
+        ...rest
+    } = props;
+
+    const classes = ['step'];
+    if (color) classes.push(`step-${color}`);
+    if (className) classes.push(className);
+
+    return tags.li({
+        class: classes.join(' '),
+        'data-content': content,
+        ...rest
+    }, ...children);
+};
+
+const tags = window.Lightview.tags;
+tags.Steps = Steps;
+tags['Steps.Item'] = Steps.Item;
+
+export default Steps;

package/components/navigation/tabs.css

@@ -0,0 +1,177 @@
+.lv-tabs {
+    display: flex;
+    flex-direction: column;
+    font-family: var(--lv-font-family);
+}
+
+/* Tab List */
+.lv-tabs__list {
+    display: flex;
+    gap: 0;
+    border-bottom: 1px solid var(--lv-color-border);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    overflow-x: auto;
+    scrollbar-width: thin;
+}
+
+.lv-tabs__list::-webkit-scrollbar {
+    height: 4px;
+}
+
+.lv-tabs__list::-webkit-scrollbar-thumb {
+    background-color: var(--lv-color-border);
+    border-radius: var(--lv-radius-full);
+}
+
+/* Variants */
+.lv-tabs[data-variant="underline"] .lv-tabs__list {
+    gap: var(--lv-spacing-md);
+}
+
+.lv-tabs[data-variant="pills"] .lv-tabs__list {
+    gap: var(--lv-spacing-xs);
+    border-bottom: none;
+    padding: var(--lv-spacing-xs);
+    background-color: var(--lv-color-neutral-light);
+    border-radius: var(--lv-radius-lg);
+}
+
+.lv-tabs[data-variant="enclosed"] .lv-tabs__list {
+    gap: 0;
+}
+
+/* Tab Button */
+.lv-tabs__tab {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--lv-spacing-xs);
+    padding: var(--lv-spacing-sm) var(--lv-spacing-md);
+    background: none;
+    border: none;
+    font-family: inherit;
+    font-size: var(--lv-font-size-md);
+    font-weight: var(--lv-font-weight-medium);
+    color: var(--lv-color-text-secondary);
+    cursor: pointer;
+    white-space: nowrap;
+    transition: all var(--lv-transition-fast);
+}
+
+.lv-tabs__tab:hover {
+    color: var(--lv-color-text);
+}
+
+.lv-tabs__tab:focus-visible {
+    outline: 2px solid var(--lv-color-primary);
+    outline-offset: -2px;
+    border-radius: var(--lv-radius-sm);
+}
+
+.lv-tabs__tab:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.lv-tabs__tab[aria-selected="true"] {
+    color: var(--lv-color-primary);
+}
+
+/* Underline variant styling */
+.lv-tabs[data-variant="underline"] .lv-tabs__tab {
+    padding-bottom: calc(var(--lv-spacing-sm) + 2px);
+    margin-bottom: -1px;
+}
+
+.lv-tabs[data-variant="underline"] .lv-tabs__tab[aria-selected="true"]::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background-color: var(--lv-color-primary);
+    border-radius: var(--lv-radius-full) var(--lv-radius-full) 0 0;
+}
+
+/* Pills variant styling */
+.lv-tabs[data-variant="pills"] .lv-tabs__tab {
+    border-radius: var(--lv-radius-md);
+}
+
+.lv-tabs[data-variant="pills"] .lv-tabs__tab[aria-selected="true"] {
+    background-color: var(--lv-color-surface);
+    color: var(--lv-color-text);
+    box-shadow: var(--lv-shadow-sm);
+}
+
+/* Enclosed variant styling */
+.lv-tabs[data-variant="enclosed"] .lv-tabs__tab {
+    border: 1px solid transparent;
+    border-bottom: none;
+    border-radius: var(--lv-radius-md) var(--lv-radius-md) 0 0;
+    margin-bottom: -1px;
+}
+
+.lv-tabs[data-variant="enclosed"] .lv-tabs__tab[aria-selected="true"] {
+    background-color: var(--lv-color-surface);
+    border-color: var(--lv-color-border);
+    color: var(--lv-color-text);
+}
+
+/* Tab Panel */
+.lv-tabs__panel {
+    padding: var(--lv-spacing-md) 0;
+}
+
+.lv-tabs__panel[hidden] {
+    display: none;
+}
+
+/* Sizes */
+.lv-tabs[data-size="sm"] .lv-tabs__tab {
+    padding: var(--lv-spacing-xs) var(--lv-spacing-sm);
+    font-size: var(--lv-font-size-sm);
+}
+
+.lv-tabs[data-size="lg"] .lv-tabs__tab {
+    padding: var(--lv-spacing-md) var(--lv-spacing-lg);
+    font-size: var(--lv-font-size-lg);
+}
+
+/* Full width tabs */
+.lv-tabs[data-width="full"] .lv-tabs__list {
+    width: 100%;
+}
+
+.lv-tabs[data-width="full"] .lv-tabs__tab {
+    flex: 1;
+}
+
+/* Icon in tab */
+.lv-tabs__tab .lv-icon {
+    flex-shrink: 0;
+}
+
+/* Badge/count in tab */
+.lv-tabs__badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.25rem;
+    height: 1.25rem;
+    padding: 0 0.375rem;
+    font-size: var(--lv-font-size-xs);
+    font-weight: var(--lv-font-weight-semibold);
+    background-color: var(--lv-color-neutral-light);
+    color: var(--lv-color-text-secondary);
+    border-radius: var(--lv-radius-full);
+}
+
+.lv-tabs__tab[aria-selected="true"] .lv-tabs__badge {
+    background-color: var(--lv-color-primary-light);
+    color: var(--lv-color-primary);
+}