vue-apexgantt 1.0.0

package/LICENSE

@@ -0,0 +1,4 @@
+[LICENSE TEXT TO BE ADDED]
+
+This is a placeholder for your custom license.
+Replace this content with your actual license text.

package/README.md

@@ -0,0 +1,401 @@
+# Vue ApexGantt
+
+Vue 3 wrapper for [ApexGantt](https://github.com/apexcharts/apexgantt) - A JavaScript library to create interactive Gantt charts.
+
+## Installation
+
+```bash
+npm install vue-apexgantt apexgantt
+# or
+yarn add vue-apexgantt apexgantt
+# or
+pnpm add vue-apexgantt apexgantt
+```
+
+## License Setup
+
+If you have a commercial license, set it once at app initialization before rendering any charts:
+
+```ts
+import { setApexGanttLicense } from 'vue-apexgantt';
+
+// call this at the top of your app
+setApexGanttLicense('your-license-key-here');
+```
+
+**Example with Vue app entry point:**
+
+```ts
+// main.ts
+import { createApp } from 'vue';
+import { setApexGanttLicense } from 'vue-apexgantt';
+import App from './App.vue';
+
+// set license before rendering
+setApexGanttLicense('your-license-key-here');
+
+createApp(App).mount('#app');
+```
+
+## Quick Start
+
+```vue
+<template>
+  <ApexGanttChart
+    :tasks="tasks"
+    view-mode="week"
+    height="500px"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ApexGanttChart } from 'vue-apexgantt';
+import type { TaskInput } from 'vue-apexgantt';
+
+const tasks = ref<TaskInput[]>([
+  {
+    id: 'task-1',
+    name: 'Project Planning',
+    startTime: '01-01-2024',
+    endTime: '01-08-2024',
+    progress: 75,
+  },
+  {
+    id: 'task-2',
+    name: 'Development',
+    startTime: '01-09-2024',
+    endTime: '01-20-2024',
+    progress: 40,
+    dependency: 'task-1',
+  },
+]);
+</script>
+```
+
+## API Reference
+
+### Component Props
+
+| Prop        | Type                       | Default   | Description                                          |
+| ----------- | -------------------------- | --------- | ---------------------------------------------------- |
+| `tasks`     | `TaskInput[]`              | Required  | Array of tasks to display                            |
+| `options`   | `Partial<GanttUserOptions>`| `{}`      | ApexGantt configuration options                      |
+| `width`     | `string \| number`         | `'100%'`  | Chart width                                          |
+| `height`    | `string \| number`         | `'500px'` | Chart height                                         |
+| `viewMode`  | `ViewMode`                 | `'month'` | View mode: 'day', 'week', 'month', 'quarter', 'year' |
+| `theme`     | `'light' \| 'dark'`        | `'light'` | Color theme                                          |
+| `className` | `string`                   | `''`      | CSS class name                                       |
+| `style`     | `CSSProperties`            | `{}`      | Inline styles                                        |
+
+### Component Events
+
+| Event                 | Payload Type                      | Description                        |
+| --------------------- | --------------------------------- | ---------------------------------- |
+| `taskUpdate`          | `TaskUpdateEventDetail`           | Fired when a task is being updated |
+| `taskUpdateSuccess`   | `TaskUpdateSuccessEventDetail`    | Fired after successful task update |
+| `taskValidationError` | `TaskValidationErrorEventDetail`  | Fired when validation fails        |
+| `taskUpdateError`     | `TaskUpdateErrorEventDetail`      | Fired when update fails            |
+| `taskDragged`         | `TaskDraggedEventDetail`          | Fired when a task is dragged       |
+| `taskResized`         | `TaskResizedEventDetail`          | Fired when a task is resized       |
+
+### Event Handling Example
+
+```vue
+<template>
+  <ApexGanttChart
+    :tasks="tasks"
+    @task-dragged="handleTaskDragged"
+    @task-resized="handleTaskResized"
+    @task-update-success="handleTaskUpdateSuccess"
+  />
+</template>
+
+<script setup lang="ts">
+import type { 
+  TaskDraggedEventDetail,
+  TaskResizedEventDetail,
+  TaskUpdateSuccessEventDetail 
+} from 'vue-apexgantt';
+
+const handleTaskDragged = (detail: TaskDraggedEventDetail) => {
+  console.log('Task dragged:', detail);
+  // save to backend, etc.
+};
+
+const handleTaskResized = (detail: TaskResizedEventDetail) => {
+  console.log('Task resized:', detail);
+};
+
+const handleTaskUpdateSuccess = (detail: TaskUpdateSuccessEventDetail) => {
+  console.log('Task updated:', detail);
+};
+</script>
+```
+
+### Template Ref Methods
+
+Access chart methods using template ref:
+
+```vue
+<template>
+  <ApexGanttChart
+    ref="ganttRef"
+    :tasks="tasks"
+  />
+  
+  <button @click="handleZoomIn">Zoom In</button>
+  <button @click="handleZoomOut">Zoom Out</button>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ApexGanttChart } from 'vue-apexgantt';
+
+const ganttRef = ref<InstanceType<typeof ApexGanttChart> | null>(null);
+
+const handleZoomIn = () => {
+  ganttRef.value?.zoomIn();
+};
+
+const handleZoomOut = () => {
+  ganttRef.value?.zoomOut();
+};
+
+// available methods:
+// ganttRef.value?.update(options)
+// ganttRef.value?.updateTask(taskId, data)
+// ganttRef.value?.zoomIn()
+// ganttRef.value?.zoomOut()
+// ganttRef.value?.destroy()
+// ganttRef.value?.getInstance() // get raw ApexGantt instance
+</script>
+```
+
+## Composables
+
+### useGanttData
+
+Parse external data into ApexGantt format:
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ApexGanttChart, useGanttData } from 'vue-apexgantt';
+import type { ParsingConfig } from 'vue-apexgantt';
+
+// raw API data
+const apiData = ref([
+  {
+    task_id: 'T1',
+    task_name: 'Design Phase',
+    start_date: '01-01-2024',
+    end_date: '01-15-2024',
+    completion: 0.75,
+  },
+  // ...more tasks
+]);
+
+// parsing configuration
+const parsingConfig: ParsingConfig = {
+  id: 'task_id',
+  name: 'task_name',
+  startTime: 'start_date',
+  endTime: 'end_date',
+  progress: {
+    key: 'completion',
+    transform: (value) => value * 100, // convert to percentage
+  },
+};
+
+// parse data
+const tasks = useGanttData({
+  data: apiData,
+  parsing: parsingConfig,
+});
+</script>
+
+<template>
+  <ApexGanttChart :tasks="tasks" />
+</template>
+```
+
+### Nested Objects & Transforms
+
+Use dot notation for nested properties:
+
+```ts
+const nestedData = ref([
+  {
+    project: {
+      task: { id: 'T1', title: 'Design' },
+      dates: { start: '01-01-2024', end: '01-15-2024' },
+      status: { completion: 0.75 },
+    },
+  },
+]);
+
+const tasks = useGanttData({
+  data: nestedData,
+  parsing: {
+    id: 'project.task.id',
+    name: 'project.task.title',
+    startTime: 'project.dates.start',
+    endTime: 'project.dates.end',
+    progress: {
+      key: 'project.status.completion',
+      transform: (value) => value * 100,
+    },
+  },
+});
+```
+
+## Advanced Usage
+
+### Custom Options
+
+```vue
+<template>
+  <ApexGanttChart
+    :tasks="tasks"
+    :options="ganttOptions"
+    view-mode="week"
+    theme="dark"
+  />
+</template>
+
+<script setup lang="ts">
+import type { GanttUserOptions } from 'vue-apexgantt';
+
+const ganttOptions: Partial<GanttUserOptions> = {
+  enableTaskDrag: true,
+  enableTaskResize: true,
+  enableTaskEdit: true,
+  barBackgroundColor: '#537CFA',
+  rowBackgroundColors: ['#FFFFFF', '#F8F9FA'],
+  // ...more options
+};
+</script>
+```
+
+### Dynamic View Mode
+
+```vue
+<template>
+  <div>
+    <select v-model="viewMode">
+      <option value="day">Day</option>
+      <option value="week">Week</option>
+      <option value="month">Month</option>
+      <option value="quarter">Quarter</option>
+      <option value="year">Year</option>
+    </select>
+    
+    <ApexGanttChart
+      :tasks="tasks"
+      :view-mode="viewMode"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { ViewMode } from 'vue-apexgantt';
+
+const viewMode = ref<ViewMode>('month');
+</script>
+```
+
+### Theme Switching
+
+```vue
+<template>
+  <div>
+    <button @click="toggleTheme">
+      {{ theme === 'light' ? '🌙 Dark' : '☀️ Light' }}
+    </button>
+    
+    <ApexGanttChart
+      :tasks="tasks"
+      :theme="theme"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { ThemeMode } from 'vue-apexgantt';
+
+const theme = ref<ThemeMode>('light');
+
+const toggleTheme = () => {
+  theme.value = theme.value === 'light' ? 'dark' : 'light';
+};
+</script>
+```
+
+## TypeScript Support
+
+The package includes full TypeScript definitions. Import types as needed:
+
+```ts
+import type {
+  TaskInput,
+  TaskType,
+  ViewMode,
+  ThemeMode,
+  GanttUserOptions,
+  ParsingConfig,
+  TaskUpdateEventDetail,
+  TaskDraggedEventDetail,
+  TaskResizedEventDetail,
+  // ...more types
+} from 'vue-apexgantt';
+```
+
+## Development
+
+### Setup
+
+```bash
+# install dependencies
+npm install
+
+# run demo app
+npm run dev
+
+# build library
+npm run build
+
+# type check
+npm run type-check
+```
+
+### Testing Examples Locally
+
+The demo app is included in the repository:
+
+```bash
+npm install
+npm run dev
+```
+
+The demo app will be available at `http://localhost:5173` and includes:
+
+- **Basic Example**: Simple Gantt with zoom controls
+- **Advanced Example**: View mode switching, theme toggle, interaction controls
+- **Events Example**: Interactive testing of drag, resize, and update events
+- **Data Parsing Example**: Using `useGanttData` with nested data structures
+
+## Browser Support
+
+- Modern browsers (Chrome, Firefox, Safari, Edge)
+- Requires ES2020+ support
+
+## License
+
+See LICENSE file for details.
+
+## Credits
+
+This is a Vue 3 wrapper for [ApexGantt](https://github.com/apexcharts/apexgantt).

package/dist/components/ApexGanttChart.vue.d.ts

@@ -0,0 +1,87 @@
+import { CSSProperties } from 'vue';
+import { default as ApexGantt, GanttUserOptions, TaskInput, ViewMode, ThemeMode, TaskUpdateEventDetail, TaskUpdateSuccessEventDetail, TaskValidationErrorEventDetail, TaskUpdateErrorEventDetail, TaskDraggedEventDetail, TaskResizedEventDetail } from 'apexgantt';
+
+export interface ApexGanttChartProps {
+    tasks: TaskInput[];
+    options?: Partial<GanttUserOptions>;
+    width?: string | number;
+    height?: string | number;
+    viewMode?: ViewMode;
+    theme?: ThemeMode;
+    className?: string;
+    style?: CSSProperties;
+}
+export interface ApexGanttChartEmits {
+    (e: "taskUpdate", detail: TaskUpdateEventDetail): void;
+    (e: "taskUpdateSuccess", detail: TaskUpdateSuccessEventDetail): void;
+    (e: "taskValidationError", detail: TaskValidationErrorEventDetail): void;
+    (e: "taskUpdateError", detail: TaskUpdateErrorEventDetail): void;
+    (e: "taskDragged", detail: TaskDraggedEventDetail): void;
+    (e: "taskResized", detail: TaskResizedEventDetail): void;
+}
+export interface ApexGanttChartExpose {
+    update: (options: Partial<GanttUserOptions>) => void;
+    updateTask: (taskId: string, taskData: Partial<TaskInput>) => void;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    destroy: () => void;
+    getInstance: () => ApexGantt | null;
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ApexGanttChartProps>, {
+    width: string;
+    height: string;
+    viewMode: ViewMode;
+    theme: ThemeMode;
+    className: string;
+}>>, {
+    update: (options: Partial<GanttUserOptions>) => void;
+    updateTask: (taskId: string, taskData: Partial<TaskInput>) => void;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    destroy: () => void;
+    getInstance: () => ApexGantt | null;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    taskUpdate: (detail: TaskUpdateEventDetail) => void;
+    taskUpdateSuccess: (detail: TaskUpdateSuccessEventDetail) => void;
+    taskValidationError: (detail: TaskValidationErrorEventDetail) => void;
+    taskUpdateError: (detail: TaskUpdateErrorEventDetail) => void;
+    taskDragged: (detail: TaskDraggedEventDetail) => void;
+    taskResized: (detail: TaskResizedEventDetail) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ApexGanttChartProps>, {
+    width: string;
+    height: string;
+    viewMode: ViewMode;
+    theme: ThemeMode;
+    className: string;
+}>>> & Readonly<{
+    onTaskUpdate?: ((detail: TaskUpdateEventDetail) => any) | undefined;
+    onTaskUpdateSuccess?: ((detail: TaskUpdateSuccessEventDetail) => any) | undefined;
+    onTaskValidationError?: ((detail: TaskValidationErrorEventDetail) => any) | undefined;
+    onTaskUpdateError?: ((detail: TaskUpdateErrorEventDetail) => any) | undefined;
+    onTaskDragged?: ((detail: TaskDraggedEventDetail) => any) | undefined;
+    onTaskResized?: ((detail: TaskResizedEventDetail) => any) | undefined;
+}>, {
+    width: string | number;
+    height: string | number;
+    viewMode: ViewMode;
+    theme: ThemeMode;
+    className: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/composables/useGanttData.d.ts

@@ -0,0 +1,23 @@
+import { Ref } from 'vue';
+import { ParsingConfig } from 'apexgantt';
+
+/**
+ * composable for parsing external data into ApexGantt format
+ *
+ * @example
+ * ```ts
+ * const tasks = useGanttData({
+ *   data: apiData,
+ *   parsing: {
+ *     id: 'task_id',
+ *     name: 'task_name',
+ *     startTime: 'start_date',
+ *     endTime: 'end_date',
+ *   }
+ * });
+ * ```
+ */
+export declare function useGanttData(options: {
+    data: Ref<any[]> | any[];
+    parsing: ParsingConfig;
+}): import('vue').ComputedRef<import('apexgantt').TaskInput[]>;

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { default as ApexGanttChart } from './components/ApexGanttChart.vue';
+export type { ApexGanttChartProps, ApexGanttChartEmits, ApexGanttChartExpose, } from './components/ApexGanttChart.vue';
+export { useGanttData } from './composables/useGanttData';
+export { setApexGanttLicense } from './utils/license';
+export type { Annotation, GanttUserOptions, TaskInput, TaskType, ThemeMode, GanttTheme, ParsingConfig, ParsingValue, TaskUpdateEventDetail, TaskValidationErrorEventDetail, TaskUpdateSuccessEventDetail, TaskUpdateErrorEventDetail, TaskDraggedEventDetail, TaskResizedEventDetail, } from 'apexgantt';
+export { ViewMode, ColumnKey, GanttEvents, LightTheme, DarkTheme, getTheme, DataParser, } from 'apexgantt';

package/dist/utils/license.d.ts

@@ -0,0 +1,12 @@
+/**
+ * set the ApexGantt license key
+ * call this once at app initialization before rendering any charts
+ *
+ * @example
+ * ```ts
+ * import { setApexGanttLicense } from 'vue-apexgantt';
+ *
+ * setApexGanttLicense('your-license-key-here');
+ * ```
+ */
+export declare function setApexGanttLicense(key: string): void;

package/dist/vue-apexgantt.es.js

@@ -0,0 +1,137 @@
+import { defineComponent as S, ref as E, computed as c, watch as u, onMounted as _, onBeforeUnmount as x, createElementBlock as D, openBlock as L, normalizeStyle as R, normalizeClass as U } from "vue";
+import h, { GanttEvents as o, DataParser as C } from "apexgantt";
+import { ColumnKey as V, DarkTheme as B, DataParser as N, GanttEvents as $, LightTheme as Z, ViewMode as j, getTheme as q } from "apexgantt";
+const K = /* @__PURE__ */ S({
+  __name: "ApexGanttChart",
+  props: {
+    tasks: {},
+    options: {},
+    width: { default: "100%" },
+    height: { default: "500px" },
+    viewMode: { default: "month" },
+    theme: { default: "light" },
+    className: { default: "" },
+    style: {}
+  },
+  emits: ["taskUpdate", "taskUpdateSuccess", "taskValidationError", "taskUpdateError", "taskDragged", "taskResized"],
+  setup(s, { expose: p, emit: i }) {
+    const t = s, r = i, d = E(null), n = E(null), g = c(
+      () => ({
+        width: typeof t.width == "number" ? `${t.width}px` : t.width,
+        height: typeof t.height == "number" ? `${t.height}px` : t.height,
+        ...t.style
+      })
+    ), v = c(
+      () => ({
+        series: t.tasks,
+        viewMode: t.viewMode,
+        theme: t.theme,
+        width: t.width,
+        height: t.height,
+        ...t.options
+      })
+    ), k = () => {
+      if (!d.value) return;
+      const e = d.value;
+      e.addEventListener(o.TASK_UPDATE, (a) => {
+        r("taskUpdate", a.detail);
+      }), e.addEventListener(o.TASK_UPDATE_SUCCESS, (a) => {
+        r("taskUpdateSuccess", a.detail);
+      }), e.addEventListener(o.TASK_VALIDATION_ERROR, (a) => {
+        r("taskValidationError", a.detail);
+      }), e.addEventListener(o.TASK_UPDATE_ERROR, (a) => {
+        r("taskUpdateError", a.detail);
+      }), e.addEventListener(o.TASK_DRAGGED, (a) => {
+        r("taskDragged", a.detail);
+      }), e.addEventListener(o.TASK_RESIZED, (a) => {
+        r("taskResized", a.detail);
+      });
+    }, A = () => {
+      d.value && (n.value && n.value.destroy(), n.value = new h(d.value, v.value), n.value.render(), k());
+    }, l = (e) => {
+      var a;
+      (a = n.value) == null || a.update({
+        ...v.value,
+        ...e
+      });
+    }, y = (e, a) => {
+      var f;
+      (f = n.value) == null || f.updateTask(e, a);
+    }, w = () => {
+      var e;
+      (e = n.value) == null || e.zoomIn();
+    }, T = () => {
+      var e;
+      (e = n.value) == null || e.zoomOut();
+    }, m = () => {
+      var e;
+      (e = n.value) == null || e.destroy(), n.value = null;
+    };
+    return p({
+      update: l,
+      updateTask: y,
+      zoomIn: w,
+      zoomOut: T,
+      destroy: m,
+      getInstance: () => n.value
+    }), u(
+      () => t.tasks,
+      () => {
+        l({ series: t.tasks });
+      },
+      { deep: !0 }
+    ), u(
+      () => t.viewMode,
+      (e) => {
+        l({ viewMode: e });
+      }
+    ), u(
+      () => t.theme,
+      (e) => {
+        l({ theme: e });
+      }
+    ), u(
+      () => t.options,
+      (e) => {
+        l(e || {});
+      },
+      { deep: !0 }
+    ), _(() => {
+      A();
+    }), x(() => {
+      m();
+    }), (e, a) => (L(), D("div", {
+      ref_key: "chartContainer",
+      ref: d,
+      class: U(s.className),
+      style: R(g.value)
+    }, null, 6));
+  }
+});
+function M(s) {
+  return c(() => {
+    const i = Array.isArray(s.data) ? s.data : s.data.value;
+    if (!i || i.length === 0)
+      return [];
+    try {
+      return C.parse(i, s.parsing);
+    } catch (t) {
+      return console.error("Error parsing gantt data:", t), [];
+    }
+  });
+}
+function O(s) {
+  typeof h.setLicense == "function" ? h.setLicense(s) : console.warn("ApexGantt.setLicense is not available. Please ensure you are using a compatible version of apexgantt.");
+}
+export {
+  K as ApexGanttChart,
+  V as ColumnKey,
+  B as DarkTheme,
+  N as DataParser,
+  $ as GanttEvents,
+  Z as LightTheme,
+  j as ViewMode,
+  q as getTheme,
+  O as setApexGanttLicense,
+  M as useGanttData
+};

package/dist/vue-apexgantt.umd.js

@@ -0,0 +1 @@
+(function(n,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("apexgantt")):typeof define=="function"&&define.amd?define(["exports","vue","apexgantt"],t):(n=typeof globalThis<"u"?globalThis:n||self,t(n.VueApexGantt={},n.Vue,n.ApexGantt))})(this,function(n,t,r){"use strict";const p=t.defineComponent({__name:"ApexGanttChart",props:{tasks:{},options:{},width:{default:"100%"},height:{default:"500px"},viewMode:{default:"month"},theme:{default:"light"},className:{default:""},style:{}},emits:["taskUpdate","taskUpdateSuccess","taskValidationError","taskUpdateError","taskDragged","taskResized"],setup(o,{expose:h,emit:u}){const a=o,d=u,l=t.ref(null),i=t.ref(null),y=t.computed(()=>({width:typeof a.width=="number"?`${a.width}px`:a.width,height:typeof a.height=="number"?`${a.height}px`:a.height,...a.style})),f=t.computed(()=>({series:a.tasks,viewMode:a.viewMode,theme:a.theme,width:a.width,height:a.height,...a.options})),k=()=>{if(!l.value)return;const e=l.value;e.addEventListener(r.GanttEvents.TASK_UPDATE,s=>{d("taskUpdate",s.detail)}),e.addEventListener(r.GanttEvents.TASK_UPDATE_SUCCESS,s=>{d("taskUpdateSuccess",s.detail)}),e.addEventListener(r.GanttEvents.TASK_VALIDATION_ERROR,s=>{d("taskValidationError",s.detail)}),e.addEventListener(r.GanttEvents.TASK_UPDATE_ERROR,s=>{d("taskUpdateError",s.detail)}),e.addEventListener(r.GanttEvents.TASK_DRAGGED,s=>{d("taskDragged",s.detail)}),e.addEventListener(r.GanttEvents.TASK_RESIZED,s=>{d("taskResized",s.detail)})},T=()=>{l.value&&(i.value&&i.value.destroy(),i.value=new r(l.value,f.value),i.value.render(),k())},c=e=>{var s;(s=i.value)==null||s.update({...f.value,...e})},w=(e,s)=>{var g;(g=i.value)==null||g.updateTask(e,s)},b=()=>{var e;(e=i.value)==null||e.zoomIn()},D=()=>{var e;(e=i.value)==null||e.zoomOut()},m=()=>{var e;(e=i.value)==null||e.destroy(),i.value=null};return h({update:c,updateTask:w,zoomIn:b,zoomOut:D,destroy:m,getInstance:()=>i.value}),t.watch(()=>a.tasks,()=>{c({series:a.tasks})},{deep:!0}),t.watch(()=>a.viewMode,e=>{c({viewMode:e})}),t.watch(()=>a.theme,e=>{c({theme:e})}),t.watch(()=>a.options,e=>{c(e||{})},{deep:!0}),t.onMounted(()=>{T()}),t.onBeforeUnmount(()=>{m()}),(e,s)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"chartContainer",ref:l,class:t.normalizeClass(o.className),style:t.normalizeStyle(y.value)},null,6))}});function v(o){return t.computed(()=>{const u=Array.isArray(o.data)?o.data:o.data.value;if(!u||u.length===0)return[];try{return r.DataParser.parse(u,o.parsing)}catch(a){return console.error("Error parsing gantt data:",a),[]}})}function E(o){typeof r.setLicense=="function"?r.setLicense(o):console.warn("ApexGantt.setLicense is not available. Please ensure you are using a compatible version of apexgantt.")}Object.defineProperty(n,"ColumnKey",{enumerable:!0,get:()=>r.ColumnKey}),Object.defineProperty(n,"DarkTheme",{enumerable:!0,get:()=>r.DarkTheme}),Object.defineProperty(n,"DataParser",{enumerable:!0,get:()=>r.DataParser}),Object.defineProperty(n,"GanttEvents",{enumerable:!0,get:()=>r.GanttEvents}),Object.defineProperty(n,"LightTheme",{enumerable:!0,get:()=>r.LightTheme}),Object.defineProperty(n,"ViewMode",{enumerable:!0,get:()=>r.ViewMode}),Object.defineProperty(n,"getTheme",{enumerable:!0,get:()=>r.getTheme}),n.ApexGanttChart=p,n.setApexGanttLicense=E,n.useGanttData=v,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "vue-apexgantt",
+  "version": "1.0.0",
+  "description": "Vue 3 wrapper for ApexGantt - Interactive Gantt chart library",
+  "type": "module",
+  "main": "./dist/vue-apexgantt.umd.js",
+  "module": "./dist/vue-apexgantt.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/vue-apexgantt.es.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/vue-apexgantt.umd.js"
+      }
+    }
+  },
+  "files": [
+    "dist",
+    "LICENSE"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "type-check": "vue-tsc --noEmit"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "dependencies": {
+    "apexgantt": "^3.4.1"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "typescript": "^5.3.0",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^3.7.0",
+    "vue": "^3.4.0",
+    "vue-tsc": "^2.0.0"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "gantt",
+    "gantt-chart",
+    "apexgantt",
+    "timeline",
+    "project-management"
+  ],
+  "author": "",
+  "repository": {
+    "type": "git",
+    "url": ""
+  }
+}