Template Ref API

Access imperative methods on the timeline instance through a template ref.

Usage

<script setup lang="ts">
import { ref } from 'vue'
import { TempisTimeline, type TempisTimelineExposed } from '@tempis/vue'

const timelineRef = ref<TempisTimelineExposed | null>(null)

function focusAll() {
  timelineRef.value?.focus({ animate: true, duration: 400 })
}

function exportImage() {
  timelineRef.value?.toImage({ format: 'png', dpr: 2 }).then(blob => {
    const url = URL.createObjectURL(blob)
    window.open(url)
  })
}
</script>

<template>
  <TempisTimeline ref="timelineRef" :items="items" />
  <button @click="focusAll">Focus All</button>
  <button @click="exportImage">Export</button>
</template>

Exposed Methods

Method	Signature	Description
`focus`	`(options?: FocusOptions) => void`	Focus on a specific item, date, or the full range.
`getRange`	`() => { start: Date, end: Date }`	Get the current visible range.
`setItems`	`(items: TempisTimelineItem[]) => void`	Set items and redraw.
`getItems`	`() => TempisTimelineItem[]`	Get current items.
`setCategories`	`(categories: TempisTimelineCategory[]) => void`	Set categories and redraw.
`getCategories`	`() => TempisTimelineCategory[]`	Get current categories.
`setBands`	`(bands: TempisTimelineBand[]) => void`	Set bands and redraw.
`setDependencies`	`(deps: TempisTimelineDependency[]) => void`	Set dependencies and redraw.
`setSelection`	`(ids: (string \| number)[]) => void`	Programmatically select items.
`getSelection`	`() => (string \| number)[]`	Get selected item IDs.
`clearSelection`	`() => void`	Deselect all and redraw.
`toImage`	`(options?: ImageGenerationOptions) => Promise<Blob>`	Export timeline as an image.
`redraw`	`() => void`	Force a redraw.
`getInstance`	`() => CoreTimeline \| null`	Access the underlying core instance.
`getCanvas`	`() => HTMLCanvasElement \| null`	Access the canvas element.