lightview 1.8.2 → 2.0.0

package/docs/components/navbar.html

@@ -0,0 +1,321 @@
+<!-- SEO-friendly SPA Shim -->
+<script src="/lightview-router.js"></script>
+<script>
+    if (window.LightviewRouter) {
+        LightviewRouter.base('/index.html');
+    }
+</script>
+
+<!-- Load the page-specific stylesheet -->
+<link rel="stylesheet" href="./index.css">
+
+<!-- Gallery Structure -->
+<div class="gallery-page">
+    <div class="gallery-layout">
+        <!-- Sidebar Overlay -->
+        <div id="sidebar-overlay" class="sidebar-overlay"></div>
+
+        <!-- Sidebar -->
+        <div id="gallery-sidebar" class="gallery-sidebar" style="visibility: hidden" src="./component-nav.html"></div>
+
+        <!-- Main Content -->
+        <div id="gallery-main" class="gallery-main">
+            <!-- Header Container -->
+            <div
+                style="position: sticky; top: 0; z-index: 30; background: var(--gallery-surface); border-bottom: 1px solid var(--gallery-border); backdrop-filter: blur(8px);">
+                <!-- Breadcrumbs Row -->
+                <div style="padding: 0.75rem 1.5rem 0;">
+                    <script>
+                        (() => {
+                            const { Breadcrumbs } = Lightview.tags;
+                            const breadcrumbs = Breadcrumbs({
+                                id: 'page-breadcrumbs',
+                                items: [
+                                    { label: 'Components', href: '/docs/components' },
+                                    { label: 'Navbar' }
+                                ]
+                            });
+                            document.currentScript.replaceWith(breadcrumbs.domEl);
+                        })();
+                    </script>
+                </div>
+                <!-- Title Row -->
+                <div class="gallery-header"
+                    style="border-bottom: none; height: auto; padding-top: 0.5rem; padding-bottom: 0.75rem;">
+                    <button id="toggle-btn" class="toggle-btn" aria-label="Toggle Sidebar">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="toggle-icon"
+                            style="stroke: currentColor; stroke-width: 2;">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M11 19l-7-7 7-7" />
+                        </svg>
+                    </button>
+                    <h1 class="gallery-title">Navbar</h1>
+                </div>
+            </div>
+
+            <!-- Content -->
+            <div class="gallery-content">
+                <div class="section-content" style="max-width: 1000px;">
+                    <p class="text-lg" style="opacity: 0.7; margin-bottom: 1.5rem;">
+                        Navbar is a horizontal navigation bar at the top of the page.
+                        Supports start, center, and end sections.
+                    </p>
+
+                    <!-- Basic Example with Examplify -->
+                    <div class="card bg-base-200" style="margin-bottom: 2rem;">
+                        <div class="card-body">
+                            <h2 class="card-title">Basic Example</h2>
+                            <p class="text-sm" style="opacity: 0.7; margin-bottom: 1rem;">Navbar with brand and menu
+                                items</p>
+
+                            <!-- Tabs -->
+                            <script>
+                                window.switchSyntaxTab = (tabId) => {
+                                    const tabs = ['tagged', 'vdom', 'object'];
+                                    tabs.forEach(t => {
+                                        const tabEl = document.getElementById(`tab-btn-${t}`);
+                                        const contentEl = document.getElementById(`syntax-${t}`);
+                                        if (t === tabId) {
+                                            tabEl.classList.add('syntax-tab-active');
+                                            contentEl.style.display = 'block';
+                                        } else {
+                                            tabEl.classList.remove('syntax-tab-active');
+                                            contentEl.style.display = 'none';
+                                        }
+                                    });
+                                };
+                            </script>
+                            <div role="tablist" class="syntax-tabs" style="margin-bottom: 1rem;">
+                                <button id="tab-btn-tagged" role="tab" class="syntax-tab syntax-tab-active"
+                                    onclick="switchSyntaxTab('tagged')">Tagged</button>
+                                <button id="tab-btn-vdom" role="tab" class="syntax-tab"
+                                    onclick="switchSyntaxTab('vdom')">vDOM</button>
+                                <button id="tab-btn-object" role="tab" class="syntax-tab"
+                                    onclick="switchSyntaxTab('object')">Object
+                                    DOM</button>
+                            </div>
+
+                            <!-- Tagged Syntax -->
+                            <div id="syntax-tagged">
+                                <pre><script>
+                                    examplify(document.currentScript.nextElementSibling, {
+                                        at: document.currentScript.parentElement,
+                                        scripts: ['/lightview.js', '/lightview-x.js'],
+                                        styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
+                                        type: 'module',
+                                        minHeight: 80,
+                                        autoRun: true
+                                    });
+                                </script><code contenteditable="true">await import('/components/layout/navbar.js');
+await import('/components/actions/button.js');
+await import('/components/navigation/menu.js');
+
+const { tags, $ } = Lightview;
+const { Navbar, Button, Menu } = tags;
+
+const navbar = Navbar({ style: 'background-color: oklch(var(--b1)); border-radius: var(--rounded-box, 1rem);' },
+    Navbar.Start({},
+        Button({ ghost: true, style: 'font-size: 1.25rem;' }, '🚀 Lightview')
+    ),
+    Navbar.Center({ style: 'display: flex;' },
+        Menu({ horizontal: true },
+            Menu.Item({}, 'Features'),
+            Menu.Item({}, 'Pricing'),
+            Menu.Item({}, 'About')
+        )
+    ),
+    Navbar.End({},
+        Button({ color: 'primary' }, 'Get Started')
+    )
+);
+
+$('#example').content(navbar);</code></pre>
+                            </div>
+
+                            <!-- vDOM Syntax -->
+                            <div id="syntax-vdom" style="display: none;">
+                                <pre><script>
+                                    examplify(document.currentScript.nextElementSibling, {
+                                        at: document.currentScript.parentElement,
+                                        scripts: ['/lightview.js', '/lightview-x.js'],
+                                        styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
+                                        type: 'module',
+                                        minHeight: 80
+                                    });
+                                </script><code contenteditable="true">await import('/components/layout/navbar.js');
+await import('/components/actions/button.js');
+await import('/components/navigation/menu.js');
+const { $, tags } = Lightview;
+const { Navbar, Button, Menu } = tags;
+
+const navbar = {
+    tag: Navbar,
+    attributes: { style: 'background-color: oklch(var(--b1)); border-radius: var(--rounded-box, 1rem);' },
+    children: [
+        {
+            tag: Navbar.Start,
+            children: [{ tag: Button, attributes: { ghost: true, style: 'font-size: 1.25rem;' }, children: ['🚀 Lightview'] }]
+        },
+        {
+            tag: Navbar.Center,
+            attributes: { style: 'display: flex;' },
+            children: [
+                {
+                    tag: Menu,
+                    attributes: { horizontal: true },
+                    children: [
+                        { tag: Menu.Item, children: ['Features'] },
+                        { tag: Menu.Item, children: ['Pricing'] },
+                        { tag: Menu.Item, children: ['About'] }
+                    ]
+                }
+            ]
+        },
+        {
+            tag: Navbar.End,
+            children: [{ tag: Button, attributes: { color: 'primary' }, children: ['Get Started'] }]
+        }
+    ]
+};
+
+$('#example').content(navbar);</code></pre>
+                            </div>
+
+                            <!-- Object DOM Syntax -->
+                            <div id="syntax-object" style="display: none;">
+                                <pre><script>
+                                    examplify(document.currentScript.nextElementSibling, {
+                                        at: document.currentScript.parentElement,
+                                        scripts: ['/lightview.js', '/lightview-x.js'],
+                                        styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
+                                        type: 'module',
+                                        minHeight: 80
+                                    });
+                                </script><code contenteditable="true">await import('/components/layout/navbar.js');
+await import('/components/actions/button.js');
+await import('/components/navigation/menu.js');
+const { $ } = Lightview;
+
+const navbar = {
+    Navbar: {
+        style: 'background-color: oklch(var(--b1)); border-radius: var(--rounded-box, 1rem);',
+        children: [
+            {
+                'Navbar.Start': {
+                    children: [{ Button: { ghost: true, style: 'font-size: 1.25rem;', children: ['🚀 Lightview'] } }]
+                }
+            },
+            {
+                'Navbar.Center': {
+                    style: 'display: flex;',
+                    children: [
+                        {
+                            Menu: {
+                                horizontal: true,
+                                children: [
+                                    { 'Menu.Item': { children: ['Features'] } },
+                                    { 'Menu.Item': { children: ['Pricing'] } },
+                                    { 'Menu.Item': { children: ['About'] } }
+                                ]
+                            }
+                        }
+                    ]
+                }
+            },
+            {
+                'Navbar.End': {
+                    children: [{ Button: { color: 'primary', children: ['Get Started'] } }]
+                }
+            }
+        ]
+    }
+};
+
+$('#example').content(navbar);</code></pre>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Props Table -->
+                    <h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Sub-components</h2>
+                    <div style="overflow-x: auto; margin-bottom: 2rem;">
+                        <table class="table table-zebra">
+                            <thead>
+                                <tr>
+                                    <th>Component</th>
+                                    <th>Description</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td><code>Navbar.Start</code></td>
+                                    <td>Left section (flex-1)</td>
+                                </tr>
+                                <tr>
+                                    <td><code>Navbar.Center</code></td>
+                                    <td>Center section</td>
+                                </tr>
+                                <tr>
+                                    <td><code>Navbar.End</code></td>
+                                    <td>Right section</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+
+                    <!-- Static Examples -->
+                    <h2 class="text-xl font-bold" style="margin-bottom: 1rem;">With Dropdown</h2>
+                    <div class="navbar"
+                        style="background-color: oklch(var(--b1)); border-radius: var(--rounded-box, 1rem); margin-bottom: 2rem;">
+                        <div style="flex: none;">
+                            <div class="dropdown">
+                                <div tabindex="0" role="button" class="btn btn-ghost btn-circle">
+                                    <svg xmlns="http://www.w3.org/2000/svg" style="height: 1.25rem; width: 1.25rem;"
+                                        fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                            d="M4 6h16M4 12h16M4 18h7" />
+                                    </svg>
+                                </div>
+                                <ul tabindex="0" class="menu menu-sm dropdown-content"
+                                    style="background-color: oklch(var(--b1)); border-radius: var(--rounded-box, 1rem); z-index: 10; margin-top: 0.75rem; width: 13rem; padding: 0.5rem; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);">
+                                    <li><a>Homepage</a></li>
+                                    <li><a>Portfolio</a></li>
+                                    <li><a>About</a></li>
+                                </ul>
+                            </div>
+                        </div>
+                        <div style="flex: 1;">
+                            <a class="btn btn-ghost" style="font-size: 1.25rem;">daisyUI</a>
+                        </div>
+                        <div style="flex: none;">
+                            <button class="btn btn-ghost btn-circle">
+                                <svg xmlns="http://www.w3.org/2000/svg" style="height: 1.25rem; width: 1.25rem;"
+                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+
+                    <h2 class="text-xl font-bold" style="margin-bottom: 1rem;">With Background Color</h2>
+                    <div class="navbar"
+                        style="background-color: oklch(var(--n)); color: oklch(var(--nc)); border-radius: var(--rounded-box, 1rem); margin-bottom: 2rem;">
+                        <div class="navbar-start">
+                            <a class="btn btn-ghost" style="font-size: 1.25rem;">daisyUI</a>
+                        </div>
+                        <div class="navbar-center" style="display: flex;">
+                            <ul class="menu menu-horizontal" style="padding-left: 0.25rem; padding-right: 0.25rem;">
+                                <li><a>Item 1</a></li>
+                                <li><a>Item 2</a></li>
+                                <li><a>Item 3</a></li>
+                            </ul>
+                        </div>
+                        <div class="navbar-end">
+                            <a class="btn">Button</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>

package/docs/components/pagination.html

@@ -0,0 +1,279 @@
+<!-- SEO-friendly SPA Shim -->
+<script src="/lightview-router.js"></script>
+<script>
+    if (window.LightviewRouter) {
+        LightviewRouter.base('/index.html');
+    }
+</script>
+
+<!-- Load the page-specific stylesheet -->
+<link rel="stylesheet" href="./index.css">
+
+<!-- Gallery Structure -->
+<div class="gallery-page">
+    <div class="gallery-layout">
+        <!-- Sidebar Overlay -->
+        <div id="sidebar-overlay" class="sidebar-overlay"></div>
+
+        <!-- Sidebar -->
+        <div id="gallery-sidebar" class="gallery-sidebar" style="visibility: hidden" src="./component-nav.html"></div>
+
+        <!-- Main Content -->
+        <div id="gallery-main" class="gallery-main">
+            <!-- Header Container -->
+            <div
+                style="position: sticky; top: 0; z-index: 30; background: var(--gallery-surface); border-bottom: 1px solid var(--gallery-border); backdrop-filter: blur(8px);">
+                <!-- Breadcrumbs Row -->
+                <div style="padding: 0.75rem 1.5rem 0;">
+                    <script>
+                        (() => {
+                            const { Breadcrumbs } = Lightview.tags;
+                            const breadcrumbs = Breadcrumbs({
+                                id: 'page-breadcrumbs',
+                                items: [
+                                    { label: 'Components', href: '/docs/components' },
+                                    { label: 'Pagination' }
+                                ]
+                            });
+                            document.currentScript.replaceWith(breadcrumbs.domEl);
+                        })();
+                    </script>
+                </div>
+                <!-- Title Row -->
+                <div class="gallery-header"
+                    style="border-bottom: none; height: auto; padding-top: 0.5rem; padding-bottom: 0.75rem;">
+                    <button id="toggle-btn" class="toggle-btn" aria-label="Toggle Sidebar">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="toggle-icon"
+                            style="stroke: currentColor; stroke-width: 2;">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M11 19l-7-7 7-7" />
+                        </svg>
+                    </button>
+                    <h1 class="gallery-title">Pagination</h1>
+                </div>
+            </div>
+
+            <!-- Content -->
+            <div class="gallery-content">
+                <div class="section-content" style="max-width: 1000px;">
+                    <p class="text-lg" style="opacity: 0.7; margin-bottom: 1.5rem;">
+                        Pagination is a group of buttons that allow navigation between pages.
+                        Uses the Join component for grouping.
+                    </p>
+
+                    <!-- Basic Example with Examplify -->
+                    <div class="card bg-base-200" style="margin-bottom: 2rem;">
+                        <div class="card-body">
+                            <h2 class="card-title">Basic Example</h2>
+                            <p class="text-sm" style="opacity: 0.7; margin-bottom: 1rem;">Interactive pagination with
+                                page state</p>
+
+                            <!-- Tabs -->
+                            <script>
+                                window.switchSyntaxTab = (tabId) => {
+                                    const tabs = ['tagged', 'vdom', 'object'];
+                                    tabs.forEach(t => {
+                                        const tabEl = document.getElementById(`tab-btn-${t}`);
+                                        const contentEl = document.getElementById(`syntax-${t}`);
+                                        if (t === tabId) {
+                                            tabEl.classList.add('syntax-tab-active');
+                                            contentEl.style.display = 'block';
+                                        } else {
+                                            tabEl.classList.remove('syntax-tab-active');
+                                            contentEl.style.display = 'none';
+                                        }
+                                    });
+                                };
+                            </script>
+                            <div role="tablist" class="syntax-tabs" style="margin-bottom: 1rem;">
+                                <button id="tab-btn-tagged" role="tab" class="syntax-tab syntax-tab-active"
+                                    onclick="switchSyntaxTab('tagged')">Tagged</button>
+                                <button id="tab-btn-vdom" role="tab" class="syntax-tab"
+                                    onclick="switchSyntaxTab('vdom')">vDOM</button>
+                                <button id="tab-btn-object" role="tab" class="syntax-tab"
+                                    onclick="switchSyntaxTab('object')">Object
+                                    DOM</button>
+                            </div>
+
+                            <!-- Tagged Syntax -->
+                            <div id="syntax-tagged">
+                                <pre><script>
+                                    examplify(document.currentScript.nextElementSibling, {
+                                        at: document.currentScript.parentElement,
+                                        scripts: ['/lightview.js', '/lightview-x.js'],
+                                        type: 'module',
+                                        minHeight: 100,
+                                        autoRun: true
+                                    });
+                                </script><code contenteditable="true">const { default: Join } = await import('/components/layout/join.js');
+const { default: Button } = await import('/components/actions/button.js');
+
+const { signal, tags, $ } = Lightview;
+const { div, span } = tags;
+
+const page = signal(1);
+const totalPages = 5;
+
+const demo = div({ style: 'display: flex; flex-direction: column; gap: 1rem; align-items: center' },
+    Join({},
+        Button({ 
+            class: 'join-item',
+            onclick: () => { if(page.value > 1) page.value--; }
+        }, '«'),
+        ...Array.from({ length: totalPages }, (_, i) => 
+            Button({ 
+                class: 'join-item',
+                color: () => page.value === i + 1 ? 'primary' : undefined,
+                onclick: () => { page.value = i + 1; }
+            }, i + 1)
+        ),
+        Button({ 
+            class: 'join-item',
+            onclick: () => { if(page.value < totalPages) page.value++; }
+        }, '»')
+    ),
+    span({ class: 'text-sm opacity-70' }, () => `Page ${page.value} of ${totalPages}`)
+);
+
+$('#example').content(demo);</code></pre>
+                            </div>
+
+                            <!-- vDOM Syntax -->
+                            <div id="syntax-vdom" style="display: none;">
+                                <pre><script>
+                                    examplify(document.currentScript.nextElementSibling, {
+                                        at: document.currentScript.parentElement,
+                                        scripts: ['/lightview.js', '/lightview-x.js'],
+                                        type: 'module',
+                                        minHeight: 100
+                                    });
+                                </script><code contenteditable="true">const { default: Join } = await import('/components/layout/join.js');
+const { default: Button } = await import('/components/actions/button.js');
+const { signal, $ } = Lightview;
+
+const page = signal(1);
+const totalPages = 5;
+
+const demo = {
+    tag: 'div',
+    attributes: { style: 'display: flex; flex-direction: column; gap: 1rem; align-items: center' },
+    children: [
+        {
+            tag: Join,
+            children: [
+                {
+                    tag: Button,
+                    attributes: { class: 'join-item', onclick: () => { if (page.value > 1) page.value--; } },
+                    children: ['«']
+                },
+                ...Array.from({ length: totalPages }, (_, i) => ({
+                    tag: Button,
+                    attributes: {
+                        class: 'join-item',
+                        color: () => page.value === i + 1 ? 'primary' : undefined,
+                        onclick: () => { page.value = i + 1; }
+                    },
+                    children: [i + 1]
+                })),
+                {
+                    tag: Button,
+                    attributes: { class: 'join-item', onclick: () => { if (page.value < totalPages) page.value++; } },
+                    children: ['»']
+                }
+            ]
+        },
+        { tag: 'span', attributes: { class: 'text-sm opacity-70' }, children: [() => `Page ${page.value} of ${totalPages}`] }
+    ]
+};
+
+$('#example').content(demo);</code></pre>
+                            </div>
+
+                            <!-- Object DOM Syntax -->
+                            <div id="syntax-object" style="display: none;">
+                                <pre><script>
+                                    examplify(document.currentScript.nextElementSibling, {
+                                        at: document.currentScript.parentElement,
+                                        scripts: ['/lightview.js', '/lightview-x.js'],
+                                        type: 'module',
+                                        minHeight: 100
+                                    });
+                                </script><code contenteditable="true">const { default: Join } = await import('/components/layout/join.js');
+const { default: Button } = await import('/components/actions/button.js');
+const { signal, tags, $ } = Lightview;
+tags.Join = Join;
+tags.Button = Button;
+
+const page = signal(1);
+const totalPages = 5;
+
+const demo = {
+    div: {
+        style: 'display: flex; flex-direction: column; gap: 1rem; align-items: center',
+        children: [
+            {
+                Join: {
+                    children: [
+                        { Button: { class: 'join-item', onclick: () => { if (page.value > 1) page.value--; }, text: '«' } },
+                        ...Array.from({ length: totalPages }, (_, i) => ({
+                            Button: {
+                                class: 'join-item',
+                                color: () => page.value === i + 1 ? 'primary' : undefined,
+                                onclick: () => { page.value = i + 1; },
+                                text: i + 1
+                            }
+                        })),
+                        { Button: { class: 'join-item', onclick: () => { if (page.value < totalPages) page.value++; }, text: '»' } }
+                    ]
+                }
+            },
+            { span: { class: 'text-sm opacity-70', text: () => `Page ${page.value} of ${totalPages}` } }
+        ]
+    }
+};
+
+$('#example').content(demo);</code></pre>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Props Table -->
+                    <h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Note</h2>
+                    <div class="alert alert-info" style="margin-bottom: 2rem;">
+                        <span>Pagination uses the <a href="/docs/components/join" class="link">Join</a> component to
+                            group buttons
+                            together.</span>
+                    </div>
+
+                    <!-- Sizes -->
+                    <h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Sizes</h2>
+                    <div class="example-stack" style="margin-bottom: 2rem;">
+                        <div class="join">
+                            <button class="join-item btn btn-xs">1</button>
+                            <button class="join-item btn btn-xs btn-active">2</button>
+                            <button class="join-item btn btn-xs">3</button>
+                        </div>
+                        <div class="join">
+                            <button class="join-item btn btn-sm">1</button>
+                            <button class="join-item btn btn-sm btn-active">2</button>
+                            <button class="join-item btn btn-sm">3</button>
+                        </div>
+                        <div class="join">
+                            <button class="join-item btn btn-lg">1</button>
+                            <button class="join-item btn btn-lg btn-active">2</button>
+                            <button class="join-item btn btn-lg">3</button>
+                        </div>
+                    </div>
+
+                    <!-- Radio Style -->
+                    <h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Radio Style</h2>
+                    <div class="join" style="margin-bottom: 2rem;">
+                        <input class="join-item btn btn-square" type="radio" name="options" aria-label="1" checked />
+                        <input class="join-item btn btn-square" type="radio" name="options" aria-label="2" />
+                        <input class="join-item btn btn-square" type="radio" name="options" aria-label="3" />
+                        <input class="join-item btn btn-square" type="radio" name="options" aria-label="4" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>