lightview/docs/components/timeline.html

A reactive UI library with features of Bau, Juris, and HTMX plus safe LLM UI generation

<!-- SEO-friendly SPA Shim -->
<script src="/lightview-router.js"></script>
<script>
    if (globalThis.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: 'Timeline' }
                                ]
                            });
                            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">Timeline</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;">
                        Timeline displays events in chronological order.
                        Supports horizontal, vertical, and colored connectors.
                    </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;">Horizontal timeline with
                                events</p>

                            <!-- Tabs -->
                            <script>
                                globalThis.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: 100,
                                        autoRun: true
                                    });
                                </script><code contenteditable="true">await import('/components/data-display/timeline.js');
const { tags, $ } = Lightview;
const { Timeline } = tags;

const events = [
    { date: '2020', title: 'Project Started', done: true },
    { date: '2021', title: 'First Release', done: true },
    { date: '2022', title: 'V2 Launch', done: true },
    { date: '2023', title: 'Enterprise', done: false }
];

const timeline = Timeline({},
    ...events.map((e, i) => 
        Timeline.Item({ first: i === 0, last: i === events.length - 1 },
            Timeline.Start({}, e.date),
            Timeline.Middle({ done: e.done }),
            Timeline.End({ box: true }, e.title),
            i < events.length - 1 ? Timeline.Hr({ done: e.done }) : null
        )
    )
);

$('#example').content(timeline);</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: 100
                                    });
                                </script><code contenteditable="true">await import('/components/data-display/timeline.js');
const { $, tags } = Lightview;
const { Timeline } = tags;

const events = [
    { date: '2020', title: 'Project Started', done: true },
    { date: '2021', title: 'First Release', done: true },
    { date: '2022', title: 'V2 Launch', done: true },
    { date: '2023', title: 'Enterprise', done: false }
];

const timeline = {
    tag: Timeline,
    children: events.map((e, i) => ({
        tag: Timeline.Item,
        attributes: { first: i === 0, last: i === events.length - 1 },
        children: [
            { tag: Timeline.Start, children: [e.date] },
            { tag: Timeline.Middle, attributes: { done: e.done } },
            { tag: Timeline.End, attributes: { box: true }, children: [e.title] },
            i < events.length - 1 ? { tag: Timeline.Hr, attributes: { done: e.done } } : null
        ].filter(Boolean)
    }))
};

$('#example').content(timeline);</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: 100
                                    });
                                </script><code contenteditable="true">await import('/components/data-display/timeline.js');
const { $ } = Lightview;

const events = [
    { date: '2020', title: 'Project Started', done: true },
    { date: '2021', title: 'First Release', done: true },
    { date: '2022', title: 'V2 Launch', done: true },
    { date: '2023', title: 'Enterprise', done: false }
];

const timeline = {
    Timeline: {
        children: events.map((e, i) => ({
            'Timeline.Item': {
                first: i === 0, 
                last: i === events.length - 1,
                children: [
                    { 'Timeline.Start': { children: [e.date] } },
                    { 'Timeline.Middle': { done: e.done } },
                    { 'Timeline.End': { box: true, children: [e.title] } },
                    i < events.length - 1 ? { 'Timeline.Hr': { done: e.done } } : null
                ].filter(Boolean)
            }
        }))
    }
};

$('#example').content(timeline);</code></pre>
                            </div>
                        </div>
                    </div>

                    <!-- Reactive Example with Examplify -->
                    <div class="card bg-base-200" style="margin-bottom: 2rem;">
                        <div class="card-body">
                            <h2 class="card-title">Vertical Timeline</h2>
                            <p class="text-sm" style="opacity: 0.7; margin-bottom: 1rem;">Order tracking timeline</p>

                            <!-- Tabs -->
                            <script>
                                globalThis.switchReactiveSyntaxTab = (tabId) => {
                                    const tabs = ['tagged', 'vdom', 'object'];
                                    tabs.forEach(t => {
                                        const tabEl = document.getElementById(`reactive-tab-btn-${t}`);
                                        const contentEl = document.getElementById(`reactive-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="reactive-tab-btn-tagged" role="tab" class="syntax-tab syntax-tab-active"
                                    onclick="switchReactiveSyntaxTab('tagged')">Tagged</button>
                                <button id="reactive-tab-btn-vdom" role="tab" class="syntax-tab"
                                    onclick="switchReactiveSyntaxTab('vdom')">vDOM</button>
                                <button id="reactive-tab-btn-object" role="tab" class="syntax-tab"
                                    onclick="switchReactiveSyntaxTab('object')">Object DOM</button>
                            </div>

                            <!-- Tagged Syntax -->
                            <div id="reactive-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: 280
                                    });
                                </script><code contenteditable="true">await import('/components/data-display/timeline.js');
const { tags, $ } = Lightview;
const { Timeline } = tags;

const steps = [
    { title: 'Order Placed', desc: 'Dec 10, 2023', done: true },
    { title: 'Processing', desc: 'Dec 11, 2023', done: true },
    { title: 'Shipped', desc: 'Dec 12, 2023', done: true },
    { title: 'Delivered', desc: 'Expected Dec 15', done: false }
];

const timeline = Timeline({ vertical: true },
    ...steps.map((s, i) => 
        Timeline.Item({ first: i === 0, last: i === steps.length - 1 },
            Timeline.Start({ box: true }, s.title),
            Timeline.Middle({ done: s.done, color: s.done ? 'primary' : undefined }),
            Timeline.End({}, s.desc),
            i < steps.length - 1 ? Timeline.Hr({ done: steps[i+1].done, color: s.done ? 'primary' : undefined }) : null
        )
    )
);

$('#example').content(timeline);</code></pre>
                            </div>

                            <!-- vDOM Syntax -->
                            <div id="reactive-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: 280
                                    });
                                </script><code contenteditable="true">await import('/components/data-display/timeline.js');
const { $, tags } = Lightview;
const { Timeline } = tags;

const steps = [
    { title: 'Order Placed', desc: 'Dec 10, 2023', done: true },
    { title: 'Processing', desc: 'Dec 11, 2023', done: true },
    { title: 'Shipped', desc: 'Dec 12, 2023', done: true },
    { title: 'Delivered', desc: 'Expected Dec 15', done: false }
];

const timeline = {
    tag: Timeline,
    attributes: { vertical: true },
    children: steps.map((s, i) => ({
        tag: Timeline.Item,
        attributes: { first: i === 0, last: i === steps.length - 1 },
        children: [
            { tag: Timeline.Start, attributes: { box: true }, children: [s.title] },
            { tag: Timeline.Middle, attributes: { done: s.done, color: s.done ? 'primary' : undefined } },
            { tag: Timeline.End, children: [s.desc] },
            i < steps.length - 1 ? { tag: Timeline.Hr, attributes: { done: steps[i+1].done, color: s.done ? 'primary' : undefined } } : null
        ].filter(Boolean)
    }))
};

$('#example').content(timeline);</code></pre>
                            </div>

                            <!-- Object DOM Syntax -->
                            <div id="reactive-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: 280
                                    });
                                </script><code contenteditable="true">await import('/components/data-display/timeline.js');
const { $ } = Lightview;

const steps = [
    { title: 'Order Placed', desc: 'Dec 10, 2023', done: true },
    { title: 'Processing', desc: 'Dec 11, 2023', done: true },
    { title: 'Shipped', desc: 'Dec 12, 2023', done: true },
    { title: 'Delivered', desc: 'Expected Dec 15', done: false }
];

const timeline = {
    Timeline: {
        vertical: true,
        children: steps.map((s, i) => ({
            'Timeline.Item': {
                first: i === 0,
                last: i === steps.length - 1,
                children: [
                    { 'Timeline.Start': { box: true, children: [s.title] } },
                    { 'Timeline.Middle': { done: s.done, color: s.done ? 'primary' : undefined } },
                    { 'Timeline.End': { children: [s.desc] } },
                    i < steps.length - 1 ? { 'Timeline.Hr': { done: steps[i+1].done, color: s.done ? 'primary' : undefined } } : null
                ].filter(Boolean)
            }
        }))
    }
};

$('#example').content(timeline);</code></pre>
                            </div>
                        </div>
                    </div>

                    <!-- Props Tables -->
                    <h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Timeline Props</h2>
                    <div style="overflow-x: auto; margin-bottom: 2rem;">
                        <table class="table table-zebra">
                            <thead>
                                <tr>
                                    <th>Prop</th>
                                    <th>Type</th>
                                    <th>Default</th>
                                    <th>Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><code>vertical</code></td>
                                    <td>boolean</td>
                                    <td>false</td>
                                    <td>Vertical layout</td>
                                </tr>
                                <tr>
                                    <td><code>snap</code></td>
                                    <td>boolean</td>
                                    <td>false</td>
                                    <td>Snap to items</td>
                                </tr>
                                <tr>
                                    <td><code>compact</code></td>
                                    <td>boolean</td>
                                    <td>false</td>
                                    <td>Compact layout</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- Sub-components -->
                    <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>Props</th>
                                    <th>Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><code>Timeline.Item</code></td>
                                    <td>first, last</td>
                                    <td>Individual timeline event</td>
                                </tr>
                                <tr>
                                    <td><code>Timeline.Start</code></td>
                                    <td>box</td>
                                    <td>Left/top content</td>
                                </tr>
                                <tr>
                                    <td><code>Timeline.Middle</code></td>
                                    <td>done, color</td>
                                    <td>Center icon/indicator</td>
                                </tr>
                                <tr>
                                    <td><code>Timeline.End</code></td>
                                    <td>box</td>
                                    <td>Right/bottom content</td>
                                </tr>
                                <tr>
                                    <td><code>Timeline.Hr</code></td>
                                    <td>done, color</td>
                                    <td>Connector line</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- Static Example -->
                    <h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Interactive Demo</h2>
                    <ul class="timeline" style="margin-bottom: 2rem;">
                        <li>
                            <div class="timeline-start">1984</div>
                            <div class="timeline-middle">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                                    class="h-5 w-5 text-primary">
                                    <path fill-rule="evenodd"
                                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
                                        clip-rule="evenodd" />
                                </svg>
                            </div>
                            <div class="timeline-end timeline-box">First Macintosh</div>
                            <hr class="bg-primary" />
                        </li>
                        <li>
                            <hr class="bg-primary" />
                            <div class="timeline-start">1998</div>
                            <div class="timeline-middle">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                                    class="h-5 w-5 text-primary">
                                    <path fill-rule="evenodd"
                                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
                                        clip-rule="evenodd" />
                                </svg>
                            </div>
                            <div class="timeline-end timeline-box">iMac</div>
                            <hr />
                        </li>
                        <li>
                            <hr />
                            <div class="timeline-start">2007</div>
                            <div class="timeline-middle">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                                    class="h-5 w-5">
                                    <path fill-rule="evenodd"
                                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
                                        clip-rule="evenodd" />
                                </svg>
                            </div>
                            <div class="timeline-end timeline-box">iPhone</div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>