@timelinekit/vue 1.0.8 → 1.0.9

package/README.md

@@ -28,23 +28,30 @@ All types from `@timelinekit/core` are re-exported from this package for conveni
 
 ```vue
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
-import { GanttChart, type GanttChartRef, Task, TaskLink } from '@timelinekit/vue';
+import { ref } from 'vue';
+import { GanttChart, type GanttChartRef } 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();
-});
+const data = {
+  tasks: [
+    { id: '1', name: 'Design', startTime: '2027-01-05', endTime: '2027-01-09', type: 'task', progress: 100 },
+    { id: '2', name: 'Development', startTime: '2027-01-12', endTime: '2027-01-23', type: 'task' },
+  ],
+  links: [
+    { id: 'l1', from: '1', to: '2', type: 'finishToStart' },
+  ],
+};
+
+function handleReady() {
+  ganttRef.value!.load(JSON.stringify(data));
+  ganttRef.value!.zoomToFit();
+}
 </script>
 
 <template>
-  <GanttChart ref="ganttRef" style="height: 600px" />
+  <GanttChart ref="ganttRef" @ready="handleReady" style="height: 600px" />
 </template>
 ```
 
@@ -60,14 +67,8 @@ 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',
-  }));
+  scheduler.data.addResource(new SchedulerResource('1', 'Room A'));
+  scheduler.data.addEvent(new SchedulerEvent('e1', '1', 'Meeting', new Date('2027-01-05T09:00'), new Date('2027-01-05T10:30')));
 });
 </script>
 
@@ -81,19 +82,17 @@ onMounted(() => {
 ```vue
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
-import { EventCalendar, type EventCalendarRef, CalendarItem } from '@timelinekit/vue';
+import { EventCalendar, type EventCalendarRef } from '@timelinekit/vue';
 import '@timelinekit/core/styles';
 
 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',
+  calendar.load(JSON.stringify({
+    items: [
+      { id: '1', name: 'Team Standup', startTime: '2027-01-05T09:00', endTime: '2027-01-05T09:30', type: 'Meeting' },
+    ],
   }));
 });
 </script>
@@ -115,7 +114,7 @@ import { GanttChart, type GanttChartRef } from '@timelinekit/vue';
 const ganttRef = ref<GanttChartRef>();
 
 function handleReady() {
-  ganttRef.value!.list.addTask(...);
+  ganttRef.value!.load(JSON.stringify(data));
   ganttRef.value!.zoomIn();
   ganttRef.value!.undo();
   ganttRef.value!.exportToImage();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@timelinekit/vue",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -12,10 +12,10 @@
   },
   "peerDependencies": {
     "vue": ">=3.3.0",
-    "@timelinekit/core": "1.0.8"
+    "@timelinekit/core": "1.0.9"
   },
   "dependencies": {
-    "@timelinekit/core": "1.0.8"
+    "@timelinekit/core": "1.0.9"
   },
   "devDependencies": {
     "vue": "^3.5.0",