Timeline

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);

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);

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);

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);

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);

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);