@dhtmlx/trial-vue-gantt 1.1.1 → 9.1.2-beta1

package/README.md

@@ -1,281 +1,145 @@
-# Vue Gantt Demos
+# DHTMLX Vue Gantt
 
-- Online demo: https://dhtmlx.com/vue/demos/gantt/#/base/default
-- Code of demos: https://github.com/web-widgets/vue-gantt-demos
-- Minimal project: https://stackblitz.com/edit/vue-gantt-basic
+[![dhtmlx.com](https://img.shields.io/badge/made%20by-DHTMLX-blue)](https://dhtmlx.com/)
+[![npm: v.9.1.2-beta1](https://img.shields.io/badge/npm-v.9.1.2-beta1-blue.svg)](https://www.npmjs.com/package/@dhtmlx/trial-vue-gantt)
+[![License: Evaluation](https://img.shields.io/badge/license-Evaluation-important.svg)](https://dhtmlx.com/docs/products/license.shtml?eval)
 
-## Supported functionality
 
-#### Common with DHTMLX Gantt
+[DHTMLX Vue Gantt](https://dhtmlx.com/docs/products/dhtmlxGantt-for-Vue/) is a Vue wrapper for the [DHTMLX Gantt](https://dhtmlx.com/docs/products/dhtmlxGantt/) library. 
 
-- adding/editing/deleting tasks and links
-- tasks, projects and milestones
-- configurable scales and grids
-- configurable tooltips
-- time markers
+It provides a declarative way to integrate DHTMLX Gantt scheduling features into Vue apps. Use Vue components in templates, pass reactive props, and handle chart edits through wrapper callbacks.
 
-#### Unique features
+> **Important:** this npm package is a *trial* build intended for evaluation only.
+> For access to commercial licenses and technical support, please request an evaluation on our website:
+> https://dhtmlx.com/docs/products/dhtmlxGantt-for-Vue/download.shtml
 
-- vue widgets can be used for tasks rendering, tooltips and form controls
-- all configuration properties are reactive
-- full vue sources are provided
+<a name="getting-started"></a>
+## Getting started
 
-## Usage
+**Install package**
 
-### Installation
+Professional Evaluation version:
 
-- add library to your vue project
-
-```js
+~~~bash
 npm install @dhtmlx/trial-vue-gantt
-```
-
-This will install trial version, for commercial one, use "@dhx/vue-gantt"
-
-- place Gantt tag into the desired page
-
-```jsx
-import { Gantt, DefaultTheme } from "@dhtmlx/trial-vue-gantt";
-
-export default function GanttBasic() {
-	return (
-		<DefaultTheme>
-			<Gantt />
-		</DefaultTheme>
-	);
-}
-```
+~~~
+
+
+And initialize:
+
+~~~vue
+<!-- src/components/GanttChart.vue -->
+<script setup lang="ts">
+import { ref } from "vue";
+import VueGantt, {
+  type Link,
+  type Task,
+  type VueGanttDataConfig
+} from "@dhtmlx/trial-vue-gantt";
+import "@dhtmlx/trial-vue-gantt/dist/vue-gantt.css";
+
+import { links as initialLinks, tasks as initialTasks } from "../demoData";
+
+const tasks = ref<Task[]>(initialTasks);
+const links = ref<Link[]>(initialLinks);
+
+const data: VueGanttDataConfig = {
+  save: (entity, action, item, id) => {
+    console.log("save", { entity, action, item, id });
+  }
+};
+</script>
+
+<template>
+  <div style="height: 100%; width: 100%;">
+    <VueGantt :tasks="tasks" :links="links" :data="data" />
+  </div>
+</template>
+~~~
+
+~~~vue
+<!-- src/App.vue -->
+<script setup lang="ts">
+import GanttChart from "./components/GanttChart.vue";
+</script>
+
+<template>
+  <div style="height: 100vh; width: 100vw;">
+    <GanttChart />
+  </div>
+</template>
+~~~
+
+`demoData.ts` is an example tasks/links dataset. Replace it with your own project data.
+
+### Requirements
+
+- Vue `3.x` or newer
+
+### Complete guides
+
+
+- https://docs.dhtmlx.com/gantt/integrations/vue/
+
+
+
+<a name="features"></a>
+## Features
+
+- Vue components in templates of grid cells, headers, timelines
+- easy customization with Vue components
+- compatibility with Pinia-based state management
+- TypeScript support
+- 4 types of tasks linking: finish-to-start, start-to-start, finish-to-finish, start-to-finish
+- dragging and dropping multiple tasks horizontally
+- multi-task selection
+- backward planning
+- tasks filtering
+- resources filtering
+- inline editing
+- managing editability/readonly modes of individual tasks
+- undo/redo functionality
+- configurable columns in the grid
+- customizable time scale and task edit form
+- progress percent coloring for tasks
+- 7 different skins
+- online export to PDF, PNG, Excel, iCal, and MS Project
+- 32 locales
+- keyboard navigation
+- resource management
+- critical path calculation
+- auto scheduling
+
+
+<a name="license"></a>
+## License
+
+DHTMLX Gantt for Vue v.9.1.2-beta1 Professional Evaluation
+
+This software is covered by DHTMLX Evaluation License. Contact sales@dhtmlx.com to get a proprietary license. Usage without proper license is prohibited.
 
-You can check the demo of mininal project here - https://stackblitz.com/edit/vue-gantt-basic
+(c) XB Software
 
-Source code of the gantt can be checked in node_modules/@dhtmlx/trial-vue-gantt/src
 
-### Themes
+<a name="links"></a>
+## Useful links
 
-Package contains two predefined themes - Default and Material.
+- [DHTMLX Vue Gantt product page](https://dhtmlx.com/docs/products/dhtmlxGantt-for-Vue/)
+- [DHTMLX JS Gantt product page](https://dhtmlx.com/docs/products/dhtmlxGantt/)
+- [Official documentation](https://docs.dhtmlx.com/gantt/)
+- [Online samples](https://docs.dhtmlx.com/gantt/samples/)
+- [Video tutorials](https://www.youtube.com/watch?v=cCvULTQxPfg&list=PLKS_XdyIGP4MEW6yvvQUZT8vJKHVOq2S0)
+- [Export services](https://dhtmlx.com/docs/products/dhtmlxGantt/export.shtml)
+- [List of available integrations](https://dhtmlx.com/docs/products/integrations/)
+- [Support forum](https://forum.dhtmlx.com/c/gantt)
 
-You can apply theme by wrapping Gantt into DefaultTheme or MaterialTheme tags
+<a name="followus"></a>
+## Follow us
 
-```jsx
-<div>
-	<DefaultTheme>
-		<Gantt />
-	</DefaultTheme>
-	<MaterialTheme>
-		<Gantt />
-	</MaterialTheme>
-</div>
-```
+- Read us on [Medium](https://medium.com/@dhtmlx)
 
-or you can just add theme tag on the page and add skin class to one of Gantt's parent tags
+- Follow us on [LinkedIn](https://www.linkedin.com/company/dhtmlx-ltd-/)
 
-```jsx
-<div>
-	<DefaultTheme />
-	<MaterialTheme />
+- Follow us on [X](https://x.com/dhtmlx)
 
-	<div class="wx-default">
-		<Gantt />
-	</div>
-	<div class="wx-material">
-		<Gantt />
-	</div>
-</div>
-```
-
-### Initialization
-
-You can define scales/columns/tasks/links during Gantt initialization
-
-```vue
-<Gantt :scales="scales" :columns="columns" :tasks="tasks" :links="links" />
-```
-
-where data may look like next
-
-```js
-const scales = [
-	{ unit: "month", step: 1, format: "MMMM yyy" },
-	{ unit: "day", step: 1, format: "d" },
-];
-
-const columns = [
-	{ name: "text", label: "Task name", width: "100%" },
-	{ name: "start", label: "Start time", align: "center" },
-	{ name: "duration", label: "Duration", width: "70px", align: "center" },
-	{ name: "add-task", label: "", width: "50px", align: "center" },
-];
-
-const tasks = [
-	{
-		id: 1,
-		open: true,
-		start_date: "2020-11-06",
-		duration: 8,
-		text: "vue Gantt Widget",
-		progress: 60,
-		type: "project",
-	},
-	{
-		id: 2,
-		parent: 1,
-		start_date: "2020-11-06",
-		duration: 4,
-		text: "Lib-Gantt",
-		progress: 80,
-	},
-];
-
-const links = [{ source: 2, target: 1, type: 0 }];
-```
-
-### Integration with backend
-
-Check
-https://github.com/web-widgets/vue-gantt-demos/blob/master/src/components/GanttBackend.vue
-
-Code defines the action handler through **save** event. This event will be triggered on any update and may be used to save changes to the persistent storage.
-
-In the above example, the RestDataProvider is used
-https://github.com/web-widgets/gantt-data-provider/blob/master/src/providers/rest.ts You are not limited to this solution, though, and can extend the provided class or define a custom handler.
-
-We provide 2 demo backends, with nodejs and go
-
-- https://github.com/web-widgets/gantt-go
-- https://github.com/web-widgets/gantt-node
-
-again, you are not limited to this solution. The above RestDataProvider can work with any REST like service and you can implement a fully custom solution ( sockets, graphql, etc. ) through custom save event.
-
-### Templates
-
-The next elements can be customized through templates
-
-- task text
-- sidebar form
-
-check https://github.com/web-widgets/vue-gantt-demos/blob/master/src/components/GanttText.vue
-
-- tooltip content
-
-check https://github.com/web-widgets/vue-gantt-demos/blob/master/src/components/GanttTooltips.vue
-
-## API
-
-### Properties
-
-```js
-// templates for different elements of gantt
-let templates = {};
-// array of markers
-let markers = [];
-// supported task types
-let taskTypes = ["task", "project", "milestone"];
-// tasks data
-let tasks = [];
-// links data
-let links = [];
-// time scales configuration
-let scales = [
-	{ unit: "month", step: 1, format: "MMMM yyy" },
-	{ unit: "day", step: 1, format: "d" },
-];
-// grid configuration
-let columns = [
-	{ name: "text", label: "Task name", width: "100%" },
-	{ name: "add-task", label: "", width: "50px", align: "center" },
-];
-// time scale start
-let start = null;
-// time scale end
-let end = null;
-// width of scale cell
-let cellWidth = 100;
-// height of chart bar
-let cellHeight = 38;
-// height of scale cell
-let scaleHeight = 30;
-// readonly mode flag
-let readonly = false;
-// show or hide grid
-let grid = true;
-// show or hide tooltips
-let tooltip = null;
-// show or hide borders in the chart area
-let borders = "full";
-```
-
-### Events
-
-```js
-// will be called with DataStore value on Gantt initalization
-let store = null;
-// will be called on any action in the Gantt
-let actions = null;
-// will be called on any data modification in the Gantt
-let save = null;
-```
-
-### Actions
-
-**Data modifications** ( both _action_ and _save_ events )
-
-- add-link
-- update-link
-- delete-link
-- add-task
-- update-task
-- delete-task
-
-**UI State** ( _action_ event )
-
-- data-request
-- hide-details
-- move-task
-- scroll-chart
-- select-task
-- show-details
-- task-toggle
-- update-task-time
-
-#### Example of event usage
-
-```jsx
-function handler({ action, obj, id }){
-    if (action === "select-task")
-        console.log(`Task ${id} was selected`);
-}
-
-<Gantt @action="handler"/>
-```
-
-### Methods
-
-```jsx
-let store;
-
-<Gantt @store="v => store = v" />
-```
-
-and now you can use store's API to get or modify data.
-
-```ts
-interface IStore {
-	getTask(id: number): GanttItemData;
-	updateTask(id: number, obj: any, noSave: boolean): void;
-	updateLink(id: number, obj: any, noSave: boolean): void;
-	action(
-		id: number,
-		action: string,
-		obj: StringHash<any>,
-		noSave?: boolean
-	): number;
-}
-```
-
-action method can be used to trigger any of above actions
-
-```js
-store.action(taskId, "tasks-toggle");
-store.action(linkId, "delete-link");
-store.action(null, "add-link", { source: 1, target 2, type: 0 });
-```
+- Like our page on [Facebook](https://www.facebook.com/dhtmlx/)

package/dist/dhtmlxgantt.vue.es.d.ts

@@ -0,0 +1,289 @@
+import * as vue from 'vue';
+import { VNode, Component, Ref, MaybeRef } from 'vue';
+import { Task, Link, GanttStatic, RouterFunction, CalendarConfig, GanttConfigOptions, GanttPlugins, GanttTemplates } from '@dhx/gantt';
+export * from '@dhx/gantt';
+
+interface VueKnownGanttEvents {
+    onBeforeLightbox?: (taskId: string | number) => boolean | void;
+    onTaskCreated?: (task: Task) => boolean | void;
+    onAfterTaskAdd?: (id: string | number, task: Task) => void;
+    onAfterTaskUpdate?: (id: string | number, task: Task) => void;
+    onAfterTaskDelete?: (id: string | number, task: Task) => void;
+    onAfterLinkAdd?: (id: string | number, link: Link) => void;
+    onAfterLinkUpdate?: (id: string | number, link: Link) => void;
+    onAfterLinkDelete?: (id: string | number, link: Link) => void;
+}
+type VueGanttEvents = VueKnownGanttEvents & Record<string, (...args: any[]) => any>;
+interface VueGanttExpose {
+    instance: GanttStatic | null;
+}
+interface VueGanttRef {
+    instance: GanttStatic | null;
+}
+interface VueGanttEmits {
+    ready: (instance: GanttStatic) => void;
+}
+interface DataCallbackChange {
+    entity: string;
+    action: string;
+    data: any;
+    id: number | string;
+}
+interface BatchChanges {
+    tasks?: DataCallbackChange[];
+    links?: DataCallbackChange[];
+    resources?: DataCallbackChange[];
+    resourceAssignments?: DataCallbackChange[];
+}
+interface DataSet {
+    tasks?: Task[];
+    links?: Link[];
+    resources?: any[];
+    resourceAssignments?: any[];
+    baselines?: any[];
+}
+interface VueGanttDataConfig {
+    load?: string | ((gantt: GanttStatic) => DataSet | Promise<DataSet>);
+    save?: string | RouterFunction;
+    batchSave?: (changes: BatchChanges) => void;
+}
+interface OnBeforeTaskDeleteConfirmArgs {
+    task: Task;
+    callback: () => void;
+    message: string;
+    title: string;
+    ganttInstance: GanttStatic;
+}
+interface OnBeforeLinkDeleteConfirmArgs {
+    link: Link;
+    callback: () => void;
+    message: string;
+    title: string;
+    ganttInstance: GanttStatic;
+}
+interface GanttModals {
+    onBeforeTaskDelete?: (args: OnBeforeTaskDeleteConfirmArgs) => void;
+    onBeforeLinkDelete?: (args: OnBeforeLinkDeleteConfirmArgs) => void;
+}
+interface Marker {
+    id?: string | number;
+    start_date: Date;
+    end_date?: Date;
+    css?: string;
+    text?: string | number | VNode | (() => VNode);
+    title?: string | number;
+}
+interface WrapperCalendar {
+    id: string;
+    hours?: string[];
+    days?: {
+        weekdays?: Partial<Record<0 | 1 | 2 | 3 | 4 | 5 | 6, string[] | boolean>>;
+        dates?: Record<string, string[] | boolean>;
+    };
+    customWeeks?: Record<string, {
+        from: Date;
+        to: Date;
+        hours?: string[];
+        days?: {
+            weekdays?: Partial<Record<0 | 1 | 2 | 3 | 4 | 5 | 6, string[] | boolean>>;
+            dates?: Record<string, string[] | boolean>;
+        };
+    }>;
+}
+type TaskFilter = ((task: Task) => boolean) | null;
+type ResourceFilter = ((resource: any) => boolean) | null;
+interface WrapperInlineEditorMethods {
+    focus?: () => void;
+    save?: () => void;
+    setValue?: (value: any) => void;
+    getValue?: () => any;
+    isChanged?: (value: any) => boolean;
+    isValid?: () => boolean;
+}
+interface InlineEditorComponentProps {
+    initialValue: any;
+    task: Task;
+    save: () => void;
+    cancel: () => void;
+    ganttInstance: GanttStatic;
+}
+interface ActiveInlineEditor {
+    id: string;
+    placeholder: HTMLElement;
+    editorType: string;
+    initialValue: any;
+    task: Task;
+    onMount?: () => void;
+}
+interface CustomLightboxProps {
+    data: any;
+    onSave: (updatedTask: any) => void;
+    onCancel: () => void;
+    onDelete: () => void;
+    ganttInstance: GanttStatic;
+}
+type TemplateWrapper = (node: VNode) => VNode;
+type GroupTasks = any;
+interface VueGanttProps {
+    tasks?: Task[];
+    links?: Link[];
+    resources?: any[] | null;
+    resourceAssignments?: any[] | null;
+    baselines?: any[] | null;
+    markers?: Marker[] | null;
+    calendars?: (WrapperCalendar | CalendarConfig)[] | null;
+    data?: VueGanttDataConfig | null;
+    config?: Partial<GanttConfigOptions>;
+    plugins?: GanttPlugins;
+    templates?: Partial<GanttTemplates>;
+    locale?: string | Record<string, any>;
+    theme?: string;
+    filter?: TaskFilter;
+    resourceFilter?: ResourceFilter;
+    modals?: GanttModals | null;
+    groupTasks?: GroupTasks;
+    inlineEditors?: Record<string, Component>;
+    customLightbox?: Component | null;
+    templateWrapper?: TemplateWrapper | null;
+    events?: VueGanttEvents;
+    [key: string]: any;
+}
+
+declare const VueGantt: vue.DefineComponent<{
+    [x: string]: /*elided*/ any;
+    tasks?: Task[];
+    links?: Link[];
+    resources?: any[] | null;
+    resourceAssignments?: any[] | null;
+    baselines?: any[] | null;
+    markers?: Marker[] | null;
+    calendars?: (WrapperCalendar | CalendarConfig)[] | null;
+    data?: VueGanttDataConfig | null;
+    config?: Partial<GanttConfigOptions>;
+    plugins?: GanttPlugins;
+    templates?: Partial<GanttTemplates>;
+    locale?: string | Record<string, any>;
+    theme?: string;
+    filter?: TaskFilter;
+    resourceFilter?: ResourceFilter;
+    modals?: GanttModals | null;
+    groupTasks?: GroupTasks;
+    inlineEditors?: Record<string, Component>;
+    customLightbox?: Component | null;
+    templateWrapper?: TemplateWrapper | null;
+    events?: VueKnownGanttEvents & Record<string, (...args: any[]) => any>;
+}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    ready: (instance: GanttStatic) => boolean;
+}, string, vue.PublicProps, Readonly<{
+    [x: string]: /*elided*/ any;
+    tasks?: Task[];
+    links?: Link[];
+    resources?: any[] | null;
+    resourceAssignments?: any[] | null;
+    baselines?: any[] | null;
+    markers?: Marker[] | null;
+    calendars?: (WrapperCalendar | CalendarConfig)[] | null;
+    data?: VueGanttDataConfig | null;
+    config?: Partial<GanttConfigOptions>;
+    plugins?: GanttPlugins;
+    templates?: Partial<GanttTemplates>;
+    locale?: string | Record<string, any>;
+    theme?: string;
+    filter?: TaskFilter;
+    resourceFilter?: ResourceFilter;
+    modals?: GanttModals | null;
+    groupTasks?: GroupTasks;
+    inlineEditors?: Record<string, Component>;
+    customLightbox?: Component | null;
+    templateWrapper?: TemplateWrapper | null;
+    events?: VueKnownGanttEvents & Record<string, (...args: any[]) => any>;
+}> & Readonly<{
+    onReady?: (instance: GanttStatic) => any;
+}>, {
+    tasks: Task[];
+    links: Link[];
+    resources: any[];
+    resourceAssignments: any[];
+    baselines: any[];
+    markers: Marker[];
+    calendars: any[];
+    data: VueGanttDataConfig;
+    config: Partial<GanttConfigOptions>;
+    plugins: GanttPlugins;
+    templates: Partial<GanttTemplates>;
+    locale: string | Record<string, any>;
+    theme: string;
+    filter: (task: Task) => boolean;
+    resourceFilter: (resource: any) => boolean;
+    modals: GanttModals;
+    groupTasks: any;
+    inlineEditors: Record<string, Component>;
+    customLightbox: any;
+    templateWrapper: TemplateWrapper;
+    events: VueGanttEvents;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+declare function useWorkTime(ganttRef: Ref<VueGanttRef | null>): vue.ComputedRef<{
+    isWorkTime: ({ date, task, unit }: {
+        date: Date;
+        task?: Task | null;
+        unit?: string;
+    }) => boolean;
+    calculateEndDate: ({ start, duration, unit, task }: {
+        start: Date;
+        duration: number;
+        unit?: string;
+        task?: Task;
+    }) => Date;
+    calculateDuration: ({ start, end, task }: {
+        start: Date;
+        end: Date;
+        task?: Task;
+    }) => number;
+    getClosestWorkTime: ({ date, task, unit, dir }: {
+        date: Date;
+        task?: Task | null;
+        unit: string;
+        dir?: string;
+    }) => Date;
+}>;
+
+declare function useResourceAssignments(ganttRef: Ref<VueGanttRef | null>): vue.ComputedRef<{
+    getResourceAssignments(resourceId: string | number, taskId?: string | number): any;
+    getTaskResources(taskId: string | number): any;
+}>;
+
+declare function useGanttDatastore<T>(ganttRef: Ref<VueGanttRef | null>, storeName: string): vue.ComputedRef<{
+    getItem(id: string | number): T | null;
+    getItems(): T[];
+    hasChild(id: string | number): boolean;
+    getChildren(id: string | number): (string | number)[];
+}>;
+
+interface ExportToExcelConfig {
+    [key: string]: any;
+}
+declare function useGanttActions(ganttRef: Ref<VueGanttRef | null | undefined>): {
+    undo(): void;
+    redo(): void;
+    render(): void;
+    exportToPDF(): void;
+    exportToPNG(): void;
+    exportToExcel(config?: ExportToExcelConfig): void;
+    exportToMSProject(): void;
+};
+
+type EventHandler = (...args: any[]) => any;
+declare function useGanttEvent(ganttRef: Ref<VueGanttRef | null | undefined>, eventName: MaybeRef<string>, handler: MaybeRef<EventHandler | null | undefined>): {
+    detach: () => void;
+};
+
+declare function defineGanttConfig<T extends Partial<GanttConfigOptions>>(config: T): T;
+declare function defineGanttTemplates<T extends Partial<GanttTemplates>>(templates: T): T;
+declare function defineGanttEvents<T extends VueGanttEvents>(events: T): T;
+declare function defineInlineEditors<T extends Record<string, Component>>(inlineEditors: T): T;
+
+export { VueGantt, VueGantt as default, defineGanttConfig, defineGanttEvents, defineGanttTemplates, defineInlineEditors, useGanttActions, useGanttDatastore, useGanttEvent, useResourceAssignments, useWorkTime };
+export type { ActiveInlineEditor, BatchChanges, CustomLightboxProps, DataCallbackChange, DataSet, GanttModals, GroupTasks, InlineEditorComponentProps, Marker, OnBeforeLinkDeleteConfirmArgs, OnBeforeTaskDeleteConfirmArgs, ResourceFilter, TaskFilter, TemplateWrapper, VueGanttDataConfig, VueGanttEmits, VueGanttEvents, VueGanttExpose, VueGanttProps, VueGanttRef, VueKnownGanttEvents, WrapperCalendar, WrapperInlineEditorMethods };