Interactive Component Examples

export default function Component() {
    const self = this;
    self.selected = '';

    const onChange = (el, value) => {
        self.selected = value;
    };

    return render => render`<div class="demo-container">
        <Calendar type="inline" :onchange="${onChange}" />
        <div class="demo-output">Selected: ${self.selected || 'None'}</div>
    </div>`
}

.demo-container {
    padding: 24px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.demo-output {
    margin-top: 16px;
    padding: 8px 16px;
    background: #f3f4f6;
    border-radius: 6px;
    font-family: monospace;
}

export default function Component() {
    const self = this;
    self.range = '';

    const onChange = (el, value) => {
        if (value) {
            self.range = value[0] + ' to ' + value[1];
        }
    };

    return render => render`<div class="demo-container">
        <Calendar type="inline" range="${true}" :onchange="${onChange}" />
        <div class="demo-output">Range: ${self.range || 'Select start and end dates'}</div>
    </div>`
}

.demo-container {
    padding: 24px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.demo-output {
    margin-top: 16px;
    padding: 8px 16px;
    background: #f3f4f6;
    border-radius: 6px;
    font-family: monospace;
}

export default function Component() {
    const self = this;
    const today = new Date().toISOString().split('T')[0];

    self.events = [
        {
            guid: 'evt-1',
            title: 'Team Meeting',
            date: today,
            start: '09:00',
            end: '10:00',
            color: '#3498db'
        },
        {
            guid: 'evt-2',
            title: 'Development',
            date: today,
            start: '10:30',
            end: '12:30',
            color: '#9b59b6'
        },
        {
            guid: 'evt-3',
            title: 'Code Review',
            date: today,
            start: '14:00',
            end: '15:30',
            color: '#27ae60'
        }
    ];

    return render => render`<div class="schedule-container">
        <Schedule type="day" value="${today}" :data="${self.events}" grid="${30}" />
    </div>`
}

.schedule-container {
    padding: 24px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    height: 500px;
}

export default function Component() {
    const self = this;

    self.events = [
        {
            title: 'Project Kickoff',
            subtitle: 'Planning',
            date: '2025-01-15',
            description: 'Initial team meeting and scope definition',
            borderColor: '#3498db'
        },
        {
            title: 'Development Start',
            subtitle: 'Engineering',
            date: '2025-02-01',
            description: 'Begin implementation phase',
            borderColor: '#9b59b6'
        },
        {
            title: 'Beta Release',
            subtitle: 'Testing',
            date: '2025-03-01',
            description: 'Internal testing and feedback',
            borderColor: '#f39c12'
        },
        {
            title: 'Launch',
            subtitle: 'Release',
            date: '2025-04-01',
            description: 'Public release',
            borderColor: '#27ae60'
        }
    ];

    return render => render`<div class="timeline-container">
        <Timeline :data="${self.events}" align="left" />
    </div>`
}

.timeline-container {
    padding: 24px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    min-height: 400px;
}