@timelinekit/vue 1.0.0

package/README.md

@@ -0,0 +1,163 @@
+# @timelinekit/vue
+
+Vue 3 components for [TimelineKit](https://timelinekit.com) — high-performance, canvas-rendered scheduling components.
+
+For a full feature overview, themes, localization, and export options, see the [`@timelinekit/core` README](https://www.npmjs.com/package/@timelinekit/core).
+
+## Installation
+
+```bash
+npm install @timelinekit/vue @timelinekit/core
+```
+
+Requires Vue 3.3 or later.
+
+## Components
+
+| Component | Import | Ref Type | Styles Import |
+|-----------|--------|----------|---------------|
+| Gantt Chart | `GanttChart` | `GanttChartRef` | `@timelinekit/core/styles` |
+| Resource Scheduler | `ResourceScheduler` | `ResourceSchedulerRef` | `@timelinekit/core/styles/rs` |
+| Event Calendar | `EventCalendar` | `EventCalendarRef` | `@timelinekit/core/styles/ec` |
+
+All types from `@timelinekit/core` are re-exported from this package for convenience.
+
+## Quick Start
+
+### Gantt Chart
+
+```vue
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { GanttChart, type GanttChartRef, Task, TaskLink } from '@timelinekit/vue';
+import '@timelinekit/core/styles';
+
+const ganttRef = ref<GanttChartRef>();
+
+onMounted(() => {
+  const gantt = ganttRef.value!;
+  const taskA = gantt.list.addTask(new Task({ id: '1', name: 'Design', startTime: '2027-01-05', endTime: '2027-01-09' }));
+  const taskB = gantt.list.addTask(new Task({ id: '2', name: 'Development', startTime: '2027-01-12', endTime: '2027-01-23' }));
+  gantt.list.addLink(new TaskLink({ id: 'l1', from: taskA, to: taskB, type: 'finishToStart' }));
+  gantt.zoomToFit();
+});
+</script>
+
+<template>
+  <GanttChart ref="ganttRef" style="height: 600px" />
+</template>
+```
+
+### Resource Scheduler
+
+```vue
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { ResourceScheduler, type ResourceSchedulerRef, SchedulerResource, SchedulerEvent } from '@timelinekit/vue';
+import '@timelinekit/core/styles/rs';
+
+const schedulerRef = ref<ResourceSchedulerRef>();
+
+onMounted(() => {
+  const scheduler = schedulerRef.value!;
+  const resource = scheduler.data.addResource(new SchedulerResource({ id: '1', name: 'Room A' }));
+  scheduler.data.addEvent(new SchedulerEvent({
+    id: 'e1',
+    resourceId: resource.id,
+    name: 'Meeting',
+    startTime: '2027-01-05T09:00',
+    endTime: '2027-01-05T10:30',
+  }));
+});
+</script>
+
+<template>
+  <ResourceScheduler ref="schedulerRef" style="height: 600px" />
+</template>
+```
+
+### Event Calendar
+
+```vue
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { EventCalendar, type EventCalendarRef, CalendarItem } from '@timelinekit/vue';
+import '@timelinekit/core/styles/ec';
+
+const calendarRef = ref<EventCalendarRef>();
+
+onMounted(() => {
+  const calendar = calendarRef.value!;
+  calendar.data.addItem(new CalendarItem({
+    id: '1',
+    name: 'Team Standup',
+    startTime: '2027-01-05T09:00',
+    endTime: '2027-01-05T09:30',
+    type: 'Meeting',
+  }));
+});
+</script>
+
+<template>
+  <EventCalendar ref="calendarRef" style="height: 600px" />
+</template>
+```
+
+## API Access
+
+Each component exposes its API through a template ref:
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { GanttChart, type GanttChartRef } from '@timelinekit/vue';
+
+const ganttRef = ref<GanttChartRef>();
+
+function handleReady() {
+  ganttRef.value!.list.addTask(...);
+  ganttRef.value!.zoomIn();
+  ganttRef.value!.undo();
+  ganttRef.value!.exportToImage();
+}
+</script>
+
+<template>
+  <GanttChart ref="ganttRef" @ready="handleReady" />
+</template>
+```
+
+## Styling
+
+Import the required CSS for each component you use:
+
+```typescript
+import '@timelinekit/core/styles';       // Gantt Chart
+import '@timelinekit/core/styles/rs';    // Resource Scheduler
+import '@timelinekit/core/styles/ec';    // Event Calendar
+```
+
+SCSS sources are also available (`@timelinekit/core/styles/scss`, `styles/rs/scss`, `styles/ec/scss`).
+
+## Licensing
+
+TimelineKit is free to use with a watermark. Purchase a license to remove it:
+
+```typescript
+import { setLicense } from '@timelinekit/vue';
+
+setLicense('your-license-key');
+```
+
+See [pricing](https://timelinekit.com/pricing) for details.
+
+## Resources
+
+- [Documentation](https://timelinekit.com/docs)
+- [Live Demos](https://timelinekit.com/gantt-chart/demo)
+- [Examples](https://github.com/timelinekit/examples)
+- [Support](mailto:support@timelinekit.com)
+
+## License
+
+See [LICENSE](./LICENSE) for details.

package/dist/__tests__/eventcalendar.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/eventcalendar.component.d.ts

@@ -0,0 +1,40 @@
+import { EventCalendarEngine, CalendarData, CalendarEntry, EventCalendarEvents, EventCalendarSettings } from '@timelinekit/core';
+import type { ViewMode, EntryRenderFn, EntryTooltipFn, CalendarImageExportOptions, CalendarPdfExportOptions, CalendarIcsExportOptions, CalendarIcsImportOptions, CalendarIcsImportResult, CalendarCsvExportOptions, CalendarExcelExportOptions } from '@timelinekit/core';
+export interface EventCalendarRef {
+    readonly data: CalendarData;
+    readonly events: EventCalendarEvents;
+    readonly settings: EventCalendarSettings;
+    readonly canUndo$: EventCalendarEngine['canUndo$'];
+    readonly canRedo$: EventCalendarEngine['canRedo$'];
+    viewMode: ViewMode;
+    currentDate: Date;
+    selectedEntries: CalendarEntry[];
+    selectedEntry: CalendarEntry | null;
+    canEdit: boolean;
+    sidebarVisible: boolean;
+    entryRendering: EntryRenderFn | null;
+    entryTooltip: EntryTooltipFn | null;
+    today(): void;
+    next(): void;
+    previous(): void;
+    goToDate(date: Date): void;
+    undo(): void;
+    redo(): void;
+    save(): string;
+    load(text: string): void;
+    copyEntries(entries?: CalendarEntry[]): Promise<void>;
+    cutEntries(entries?: CalendarEntry[]): Promise<void>;
+    pasteEntries(): Promise<void>;
+    exportToImage(options?: CalendarImageExportOptions): Promise<Blob>;
+    exportToPdf(options?: CalendarPdfExportOptions): Promise<Blob>;
+    exportToIcs(options?: CalendarIcsExportOptions): Blob;
+    exportToIcsText(options?: CalendarIcsExportOptions): string;
+    importFromIcs(text: string, options?: CalendarIcsImportOptions): CalendarIcsImportResult;
+    exportToCsv(options?: CalendarCsvExportOptions): string;
+    exportToExcel(options?: CalendarExcelExportOptions): Promise<Blob>;
+}
+export declare const EventCalendar: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "ready"[], "ready", import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onReady?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/ganttchart.component.d.ts

@@ -0,0 +1,58 @@
+import { GanttChartEngine, TaskList, ResourceList, WorkingCalendar, GanttSheet, DateRange, GanttChartEvents, GanttChartSettings, Task } from '@timelinekit/core';
+import type { Marker, GanttCsvExportOptions, GanttPdfExportOptions, GanttExcelExportOptions, TaskFilterFn, TasksPastedEventArgs, ColumnState, TimelineKitLocale } from '@timelinekit/core';
+export interface GanttChartRef {
+    readonly list: TaskList;
+    readonly resources: ResourceList;
+    workingCalendar: WorkingCalendar;
+    canEdit: boolean;
+    autoZoomToFit: boolean;
+    showGridLines: boolean;
+    showCriticalPath: boolean;
+    showBaseline: boolean;
+    showTodayLine: boolean;
+    markers: Marker[];
+    filter: TaskFilterFn | null;
+    readonly hasBaseline: boolean;
+    readonly selectedTasks: Task[];
+    projectTimeline: DateRange;
+    locale: TimelineKitLocale;
+    readonly settings: GanttChartSettings;
+    readonly sheet: GanttSheet;
+    readonly events: GanttChartEvents;
+    readonly canUndo$: GanttChartEngine['canUndo$'];
+    readonly canRedo$: GanttChartEngine['canRedo$'];
+    zoomIn(): boolean;
+    zoomOut(): boolean;
+    indent(): void;
+    outdent(): void;
+    moveUp(): void;
+    moveDown(): void;
+    goToProjectStart(): void;
+    scrollToDate(date: Date): void;
+    scrollToTask(task: Task): void;
+    zoomToFit(tasks?: Task[]): void;
+    addMarker(marker: Marker): void;
+    removeMarker(marker: Marker): void;
+    clearMarkers(): void;
+    clearFilter(): void;
+    saveColumns(): ColumnState[];
+    loadColumns(states: ColumnState[]): void;
+    undo(): void;
+    redo(): void;
+    saveBaseline(): void;
+    clearBaseline(): void;
+    save(): string;
+    load(text: string): void;
+    exportToImage(): Promise<Blob>;
+    exportToCsv(options?: GanttCsvExportOptions): string;
+    exportToPdf(options?: GanttPdfExportOptions): Promise<Blob>;
+    exportToExcel(options?: GanttExcelExportOptions): Promise<Blob>;
+    copy(): Promise<void>;
+    cut(): Promise<void>;
+    paste(): Promise<TasksPastedEventArgs | null>;
+}
+export declare const GanttChart: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "ready"[], "ready", import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onReady?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { GanttChart } from './ganttchart.component';
+export type { GanttChartRef } from './ganttchart.component';
+export { ResourceScheduler } from './resourcescheduler.component';
+export type { ResourceSchedulerRef } from './resourcescheduler.component';
+export { EventCalendar } from './eventcalendar.component';
+export type { EventCalendarRef } from './eventcalendar.component';
+export * from '@timelinekit/core';

package/dist/index.js

@@ -0,0 +1 @@
+import{defineComponent as e,ref as t,onMounted as r,onBeforeUnmount as o,h as n}from"vue";import{GanttChartEngine as s,ResourceSchedulerEngine as a,EventCalendarEngine as i}from"@timelinekit/core";export*from"@timelinekit/core";const l=e({name:"GanttChart",emits:["ready"],setup(e,{emit:a,expose:i}){const l=t();let d=null;return r(()=>{d=new s(l.value),a("ready")}),o(()=>{d?.destroy(),d=null}),i({get list(){return d.list},get resources(){return d.resources},get workingCalendar(){return d.calendar$.getValue()},set workingCalendar(e){d.calendar$.next(e)},get canEdit(){return d.canEdit},set canEdit(e){d.canEdit=e},get autoZoomToFit(){return d.autoZoomToFit},set autoZoomToFit(e){d.autoZoomToFit=e},get showGridLines(){return d.showGridLines},set showGridLines(e){d.showGridLines=e},get showCriticalPath(){return d.showCriticalPath},set showCriticalPath(e){d.showCriticalPath=e},get showBaseline(){return d.showBaseline},set showBaseline(e){d.showBaseline=e},get showTodayLine(){return d.showTodayLine},set showTodayLine(e){d.showTodayLine=e},get markers(){return d.markers},set markers(e){d.markers=e},get filter(){return d.filter},set filter(e){d.filter=e},get hasBaseline(){return d.hasBaseline},get selectedTasks(){return d.selectedTasks},get projectTimeline(){return d.projectTimeline},set projectTimeline(e){d.projectTimeline=e},get locale(){return d.settings.locale},set locale(e){d.settings.locale=e},get settings(){return d.settings},get sheet(){return d.sheet},get events(){return d.events},get canUndo$(){return d.canUndo$},get canRedo$(){return d.canRedo$},zoomIn:()=>d.zoomIn(),zoomOut:()=>d.zoomOut(),indent:()=>d.indent(),outdent:()=>d.outdent(),moveUp:()=>d.moveUp(),moveDown:()=>d.moveDown(),goToProjectStart:()=>d.goToProjectStart(),scrollToDate:e=>d.scrollToDate(e),scrollToTask:e=>d.scrollToTask(e),zoomToFit:e=>d.zoomToFit(e),addMarker:e=>d.addMarker(e),removeMarker:e=>d.removeMarker(e),clearMarkers:()=>d.clearMarkers(),clearFilter:()=>d.clearFilter(),saveColumns:()=>d.saveColumns(),loadColumns:e=>d.loadColumns(e),undo:()=>d.undo(),redo:()=>d.redo(),saveBaseline:()=>d.saveBaseline(),clearBaseline:()=>d.clearBaseline(),save:()=>d.save(),load:e=>d.load(e),exportToImage:()=>d.exportToImage(),exportToCsv:e=>d.exportToCsv(e),exportToPdf:e=>d.exportToPdf(e),exportToExcel:e=>d.exportToExcel(e),copy:()=>d.copy(),cut:()=>d.cut(),paste:()=>d.paste()}),()=>n("div",{ref:l,style:{width:"100%",height:"100%"}})}}),d=e({name:"ResourceScheduler",emits:["ready"],setup(e,{emit:s,expose:i}){const l=t();let d=null;return r(()=>{d=new a(l.value),s("ready")}),o(()=>{d?.destroy(),d=null}),i({get data(){return d.data},get workingCalendar(){return d.calendar$.getValue()},set workingCalendar(e){d.calendar$.next(e)},get canEdit(){return d.canEdit},set canEdit(e){d.canEdit=e},get autoZoomToFit(){return d.autoZoomToFit},set autoZoomToFit(e){d.autoZoomToFit=e},get showGridLines(){return d.showGridLines},set showGridLines(e){d.showGridLines=e},get showTodayLine(){return d.showTodayLine},set showTodayLine(e){d.showTodayLine=e},get markers(){return d.markers},set markers(e){d.markers=e},get filter(){return d.filter},set filter(e){d.filter=e},get eventRendering(){return d.eventRendering},set eventRendering(e){d.eventRendering=e},get eventTooltip(){return d.eventTooltip},set eventTooltip(e){d.eventTooltip=e},get projectTimeline(){return d.projectTimeline},set projectTimeline(e){d.projectTimeline=e},get selectedEvents(){return d.selectedEvents},set selectedEvents(e){d.selectedEvents=e},get selectedEvent(){return d.selectedEvent},set selectedEvent(e){d.selectedEvent=e},get selectedResources(){return d.selectedResources},get settings(){return d.settings},get sheet(){return d.sheet},get events(){return d.events},get canUndo$(){return d.canUndo$},get canRedo$(){return d.canRedo$},undo:()=>d.undo(),redo:()=>d.redo(),copy:()=>d.copy(),cut:()=>d.cut(),paste:()=>d.paste(),zoomIn:()=>d.zoomIn(),zoomOut:()=>d.zoomOut(),goToProjectStart:()=>d.goToProjectStart(),scrollToDate:e=>d.scrollToDate(e),scrollToResource:e=>d.scrollToResource(e),scrollToEvent:e=>d.scrollToEvent(e),zoomToFit:e=>d.zoomToFit(e),addMarker:e=>d.addMarker(e),removeMarker:e=>d.removeMarker(e),clearMarkers:()=>d.clearMarkers(),clearFilter:()=>d.clearFilter(),saveColumns:()=>d.saveColumns(),loadColumns:e=>d.loadColumns(e),sortResources:e=>d.sortResources(e),freezeResource:e=>d.freezeResource(e),unfreezeResource:e=>d.unfreezeResource(e),isResourceFrozen:e=>d.isResourceFrozen(e),exportToImage:()=>d.exportToImage(),exportToCsv:e=>d.exportToCsv(e),exportToExcel:e=>d.exportToExcel(e),exportToPdf:e=>d.exportToPdf(e),save:()=>d.save(),load:e=>d.load(e)}),()=>n("div",{ref:l,style:{width:"100%",height:"100%"}})}}),c=e({name:"EventCalendar",emits:["ready"],setup(e,{emit:s,expose:a}){const l=t();let d=null;return r(()=>{d=new i(l.value),s("ready")}),o(()=>{d?.destroy(),d=null}),a({get data(){return d.data},get events(){return d.events},get settings(){return d.settings},get canUndo$(){return d.canUndo$},get canRedo$(){return d.canRedo$},get viewMode(){return d.viewMode},set viewMode(e){d.viewMode=e},get currentDate(){return d.currentDate},set currentDate(e){d.currentDate=e},get selectedEntries(){return d.selectedEntries},set selectedEntries(e){d.selectedEntries=e},get selectedEntry(){return d.selectedEntry},set selectedEntry(e){d.selectedEntry=e},get canEdit(){return d.canEdit},set canEdit(e){d.canEdit=e},get sidebarVisible(){return d.sidebarVisible},set sidebarVisible(e){d.sidebarVisible=e},get entryRendering(){return d.entryRendering},set entryRendering(e){d.entryRendering=e},get entryTooltip(){return d.entryTooltip},set entryTooltip(e){d.entryTooltip=e},today:()=>d.today(),next:()=>d.next(),previous:()=>d.previous(),goToDate:e=>d.goToDate(e),undo:()=>d.undo(),redo:()=>d.redo(),save:()=>d.save(),load:e=>d.load(e),copyEntries:e=>d.copyEntries(e),cutEntries:e=>d.cutEntries(e),pasteEntries:()=>d.pasteEntries(),exportToImage:e=>d.exportToImage(e),exportToPdf:e=>d.exportToPdf(e),exportToIcs:e=>d.exportToIcs(e),exportToIcsText:e=>d.exportToIcsText(e),importFromIcs:(e,t)=>d.importFromIcs(e,t),exportToCsv:e=>d.exportToCsv(e),exportToExcel:e=>d.exportToExcel(e)}),()=>n("div",{ref:l,style:{width:"100%",height:"100%"}})}});export{c as EventCalendar,l as GanttChart,d as ResourceScheduler};

package/dist/resourcescheduler.component.d.ts

@@ -0,0 +1,56 @@
+import { ResourceSchedulerEngine, SchedulerData, SchedulerResource, SchedulerEvent, WorkingCalendar, SchedulerSheet, DateRange, ResourceSchedulerEvents, ResourceSchedulerSettings } from '@timelinekit/core';
+import type { Marker, ColumnState, SchedulerResourceFilterFn, SchedulerEventRenderFn, SchedulerEventTooltipFn, SchedulerCsvExportOptions, SchedulerExcelExportOptions, SchedulerPdfExportOptions, SchedulerEventsPastedEventArgs } from '@timelinekit/core';
+export interface ResourceSchedulerRef {
+    readonly data: SchedulerData;
+    workingCalendar: WorkingCalendar;
+    canEdit: boolean;
+    autoZoomToFit: boolean;
+    showGridLines: boolean;
+    showTodayLine: boolean;
+    markers: Marker[];
+    filter: SchedulerResourceFilterFn | null;
+    eventRendering: SchedulerEventRenderFn | null;
+    eventTooltip: SchedulerEventTooltipFn | null;
+    projectTimeline: DateRange;
+    selectedEvents: SchedulerEvent[];
+    selectedEvent: SchedulerEvent | null;
+    readonly selectedResources: SchedulerResource[];
+    readonly settings: ResourceSchedulerSettings;
+    readonly sheet: SchedulerSheet;
+    readonly events: ResourceSchedulerEvents;
+    readonly canUndo$: ResourceSchedulerEngine['canUndo$'];
+    readonly canRedo$: ResourceSchedulerEngine['canRedo$'];
+    undo(): void;
+    redo(): void;
+    copy(): Promise<void>;
+    cut(): Promise<void>;
+    paste(): Promise<SchedulerEventsPastedEventArgs | null>;
+    zoomIn(): boolean;
+    zoomOut(): boolean;
+    goToProjectStart(): void;
+    scrollToDate(date: Date): void;
+    scrollToResource(resource: SchedulerResource): void;
+    scrollToEvent(event: SchedulerEvent): void;
+    zoomToFit(events?: SchedulerEvent[]): void;
+    addMarker(marker: Marker): void;
+    removeMarker(marker: Marker): void;
+    clearMarkers(): void;
+    clearFilter(): void;
+    saveColumns(): ColumnState[];
+    loadColumns(states: ColumnState[]): void;
+    sortResources(compareFn: (a: SchedulerResource, b: SchedulerResource) => number): void;
+    freezeResource(resource: SchedulerResource): void;
+    unfreezeResource(resource: SchedulerResource): void;
+    isResourceFrozen(resource: SchedulerResource): boolean;
+    exportToImage(): Promise<Blob>;
+    exportToCsv(options?: SchedulerCsvExportOptions): string;
+    exportToExcel(options?: SchedulerExcelExportOptions): Promise<Blob>;
+    exportToPdf(options?: SchedulerPdfExportOptions): Promise<Blob>;
+    save(): string;
+    load(text: string): void;
+}
+export declare const ResourceScheduler: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "ready"[], "ready", import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onReady?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@timelinekit/vue",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "peerDependencies": {
+    "vue": ">=3.3.0",
+    "@timelinekit/core": "workspace:*"
+  },
+  "dependencies": {
+    "@timelinekit/core": "workspace:*"
+  },
+  "devDependencies": {
+    "vue": "^3.5.0",
+    "vitest": "^4.0.8",
+    "jsdom": "^26.1.0"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ]
+}