@stonecrop/atable 0.4.23 → 0.4.24

package/dist/atable.d.ts

@@ -11,6 +11,7 @@ import ATableModal from './components/ATableModal.vue';
 import { ComputedRef } from 'vue';
 import { CSSProperties } from 'vue';
 import { Ref } from 'vue';
+import type { ShallowRef } from 'vue';
 import { Store } from 'pinia';
 import { useElementBounding } from '@vueuse/core';
 
@@ -53,6 +54,89 @@ export declare interface CellContext {
     };
 }
 
+/**
+ * Connection event for handling connection creation/deletion.
+ * @public
+ */
+export declare type ConnectionEvent = {
+    type: 'create' | 'delete';
+    connection: ConnectionPath;
+};
+
+/**
+ * Connection handle information for gantt bar connections.
+ * @public
+ */
+export declare interface ConnectionHandle {
+    /**
+     * Unique identifier for the connection handle.
+     */
+    id: string;
+    /**
+     * The row index of the gantt bar this handle belongs to.
+     */
+    rowIndex: number;
+    /**
+     * The column index of the gantt bar this handle belongs to.
+     */
+    colIndex: number;
+    /**
+     * The side of the gantt bar where this handle is located.
+     */
+    side: 'left' | 'right';
+    /**
+     * The position of the connection handle.
+     */
+    position: {
+        x: ShallowRef<number>;
+        y: ShallowRef<number>;
+    };
+    /**
+     * Whether the handle is currently visible (on hover).
+     */
+    visible: Ref<boolean>;
+    /**
+     * Reference to the gantt bar this handle belongs to.
+     */
+    barId: string;
+}
+
+/**
+ * Connection path between two gantt bars.
+ * @public
+ */
+export declare interface ConnectionPath {
+    /**
+     * Unique identifier for the connection path.
+     */
+    id: string;
+    /**
+     * The source connection handle.
+     */
+    from: {
+        barId: string;
+        side: 'left' | 'right';
+    };
+    /**
+     * The target connection handle.
+     */
+    to: {
+        barId: string;
+        side: 'left' | 'right';
+    };
+    /**
+     * Optional styling for the connection path.
+     */
+    style?: {
+        color?: string;
+        width?: number;
+    };
+    /**
+     * Optional label for the connection.
+     */
+    label?: string;
+}
+
 /**
  * Create a table store
  * @param initData - Initial data for the table store
@@ -110,12 +194,66 @@ colspan?: number | undefined;
 originalIndex?: number | undefined;
 }[]>;
 config: Ref<    {
-view?: "uncounted" | "list" | "list-expansion" | "tree" | "gantt" | undefined;
+view?: "uncounted" | "list" | "list-expansion" | "tree" | "gantt" | "tree-gantt" | undefined;
 fullWidth?: boolean | undefined;
 }, TableConfig | {
-view?: "uncounted" | "list" | "list-expansion" | "tree" | "gantt" | undefined;
+view?: "uncounted" | "list" | "list-expansion" | "tree" | "gantt" | "tree-gantt" | undefined;
 fullWidth?: boolean | undefined;
 }>;
+connectionHandles: Ref<    {
+id: string;
+rowIndex: number;
+colIndex: number;
+side: "left" | "right";
+position: {
+x: number;
+y: number;
+};
+visible: boolean;
+barId: string;
+}[], ConnectionHandle[] | {
+id: string;
+rowIndex: number;
+colIndex: number;
+side: "left" | "right";
+position: {
+x: number;
+y: number;
+};
+visible: boolean;
+barId: string;
+}[]>;
+connectionPaths: Ref<    {
+id: string;
+from: {
+barId: string;
+side: "left" | "right";
+};
+to: {
+barId: string;
+side: "left" | "right";
+};
+style?: {
+color?: string | undefined;
+width?: number | undefined;
+} | undefined;
+label?: string | undefined;
+}[], ConnectionPath[] | {
+id: string;
+from: {
+barId: string;
+side: "left" | "right";
+};
+to: {
+barId: string;
+side: "left" | "right";
+};
+style?: {
+color?: string | undefined;
+width?: number | undefined;
+} | undefined;
+label?: string | undefined;
+}[]>;
 display: Ref<    {
 expanded?: boolean | undefined;
 childrenOpen?: boolean | undefined;
@@ -135,6 +273,31 @@ indent?: number | undefined;
 parent?: number | undefined;
 rowModified?: boolean | undefined;
 }[]>;
+ganttBars: Ref<    {
+id: string;
+rowIndex: number;
+colIndex: number;
+startIndex: number;
+endIndex: number;
+color: string;
+position: {
+x: number;
+y: number;
+};
+label?: string | undefined;
+}[], GanttBarInfo[] | {
+id: string;
+rowIndex: number;
+colIndex: number;
+startIndex: number;
+endIndex: number;
+color: string;
+position: {
+x: number;
+y: number;
+};
+label?: string | undefined;
+}[]>;
 modal: Ref<    {
 visible?: boolean | undefined;
 cell?: (HTMLTableCellElement | null) | undefined;
@@ -184,23 +347,62 @@ colspan?: number | undefined;
 table: Ref<    {}, {}>;
 updates: Ref<Record<string, string>, Record<string, string>>;
 hasPinnedColumns: ComputedRef<boolean>;
+isGanttView: ComputedRef<boolean>;
+isTreeView: ComputedRef<boolean>;
 numberedRowWidth: ComputedRef<string>;
 zeroColumn: ComputedRef<boolean>;
 closeModal: (event: MouseEvent) => void;
+createConnection: (fromHandleId: string, toHandleId: string, options?: {
+style?: ConnectionPath["style"];
+label?: string;
+}) => ConnectionPath | null;
+deleteConnection: (connectionId: string) => boolean;
 getCellData: <T = any>(colIndex: number, rowIndex: number) => T;
 getCellDisplayValue: (colIndex: number, rowIndex: number) => any;
+getConnectionsForBar: (barId: string) => {
+id: string;
+from: {
+barId: string;
+side: "left" | "right";
+};
+to: {
+barId: string;
+side: "left" | "right";
+};
+style?: {
+color?: string | undefined;
+width?: number | undefined;
+} | undefined;
+label?: string | undefined;
+}[];
 getFormattedValue: (colIndex: number, rowIndex: number, value: any) => any;
+getHandlesForBar: (barId: string) => {
+id: string;
+rowIndex: number;
+colIndex: number;
+side: "left" | "right";
+position: {
+x: number;
+y: number;
+};
+visible: boolean;
+barId: string;
+}[];
 getHeaderCellStyle: (column: TableColumn) => CSSProperties;
-resizeColumn: (colIndex: number, newWidth: number) => void;
 getIndent: (colIndex: number, indentLevel?: number) => string;
-getRowExpandSymbol: (rowIndex: number) => "" | "-" | "+";
+getRowExpandSymbol: (rowIndex: number) => "" | "▼" | "►";
 isRowGantt: (rowIndex: number) => boolean;
 isRowVisible: (rowIndex: number) => boolean | undefined;
+registerConnectionHandle: (handleInfo: ConnectionHandle) => void;
+registerGanttBar: (barInfo: GanttBarInfo) => void;
+resizeColumn: (colIndex: number, newWidth: number) => void;
 setCellData: (colIndex: number, rowIndex: number, value: any) => void;
 setCellText: (colIndex: number, rowIndex: number, value: string) => void;
 toggleRowExpand: (rowIndex: number) => void;
+unregisterConnectionHandle: (handleId: string) => void;
+unregisterGanttBar: (barId: string) => void;
 updateGanttBar: (event: GanttDragEvent) => void;
-}, "columns" | "config" | "display" | "modal" | "rows" | "table" | "updates">, Pick<{
+}, "columns" | "config" | "connectionHandles" | "connectionPaths" | "display" | "ganttBars" | "modal" | "rows" | "table" | "updates">, Pick<{
 columns: Ref<    {
 name: string;
 align?: CanvasTextAlign | undefined;
@@ -241,12 +443,66 @@ colspan?: number | undefined;
 originalIndex?: number | undefined;
 }[]>;
 config: Ref<    {
-view?: "uncounted" | "list" | "list-expansion" | "tree" | "gantt" | undefined;
+view?: "uncounted" | "list" | "list-expansion" | "tree" | "gantt" | "tree-gantt" | undefined;
 fullWidth?: boolean | undefined;
 }, TableConfig | {
-view?: "uncounted" | "list" | "list-expansion" | "tree" | "gantt" | undefined;
+view?: "uncounted" | "list" | "list-expansion" | "tree" | "gantt" | "tree-gantt" | undefined;
 fullWidth?: boolean | undefined;
 }>;
+connectionHandles: Ref<    {
+id: string;
+rowIndex: number;
+colIndex: number;
+side: "left" | "right";
+position: {
+x: number;
+y: number;
+};
+visible: boolean;
+barId: string;
+}[], ConnectionHandle[] | {
+id: string;
+rowIndex: number;
+colIndex: number;
+side: "left" | "right";
+position: {
+x: number;
+y: number;
+};
+visible: boolean;
+barId: string;
+}[]>;
+connectionPaths: Ref<    {
+id: string;
+from: {
+barId: string;
+side: "left" | "right";
+};
+to: {
+barId: string;
+side: "left" | "right";
+};
+style?: {
+color?: string | undefined;
+width?: number | undefined;
+} | undefined;
+label?: string | undefined;
+}[], ConnectionPath[] | {
+id: string;
+from: {
+barId: string;
+side: "left" | "right";
+};
+to: {
+barId: string;
+side: "left" | "right";
+};
+style?: {
+color?: string | undefined;
+width?: number | undefined;
+} | undefined;
+label?: string | undefined;
+}[]>;
 display: Ref<    {
 expanded?: boolean | undefined;
 childrenOpen?: boolean | undefined;
@@ -266,6 +522,31 @@ indent?: number | undefined;
 parent?: number | undefined;
 rowModified?: boolean | undefined;
 }[]>;
+ganttBars: Ref<    {
+id: string;
+rowIndex: number;
+colIndex: number;
+startIndex: number;
+endIndex: number;
+color: string;
+position: {
+x: number;
+y: number;
+};
+label?: string | undefined;
+}[], GanttBarInfo[] | {
+id: string;
+rowIndex: number;
+colIndex: number;
+startIndex: number;
+endIndex: number;
+color: string;
+position: {
+x: number;
+y: number;
+};
+label?: string | undefined;
+}[]>;
 modal: Ref<    {
 visible?: boolean | undefined;
 cell?: (HTMLTableCellElement | null) | undefined;
@@ -315,23 +596,62 @@ colspan?: number | undefined;
 table: Ref<    {}, {}>;
 updates: Ref<Record<string, string>, Record<string, string>>;
 hasPinnedColumns: ComputedRef<boolean>;
+isGanttView: ComputedRef<boolean>;
+isTreeView: ComputedRef<boolean>;
 numberedRowWidth: ComputedRef<string>;
 zeroColumn: ComputedRef<boolean>;
 closeModal: (event: MouseEvent) => void;
+createConnection: (fromHandleId: string, toHandleId: string, options?: {
+style?: ConnectionPath["style"];
+label?: string;
+}) => ConnectionPath | null;
+deleteConnection: (connectionId: string) => boolean;
 getCellData: <T = any>(colIndex: number, rowIndex: number) => T;
 getCellDisplayValue: (colIndex: number, rowIndex: number) => any;
+getConnectionsForBar: (barId: string) => {
+id: string;
+from: {
+barId: string;
+side: "left" | "right";
+};
+to: {
+barId: string;
+side: "left" | "right";
+};
+style?: {
+color?: string | undefined;
+width?: number | undefined;
+} | undefined;
+label?: string | undefined;
+}[];
 getFormattedValue: (colIndex: number, rowIndex: number, value: any) => any;
+getHandlesForBar: (barId: string) => {
+id: string;
+rowIndex: number;
+colIndex: number;
+side: "left" | "right";
+position: {
+x: number;
+y: number;
+};
+visible: boolean;
+barId: string;
+}[];
 getHeaderCellStyle: (column: TableColumn) => CSSProperties;
-resizeColumn: (colIndex: number, newWidth: number) => void;
 getIndent: (colIndex: number, indentLevel?: number) => string;
-getRowExpandSymbol: (rowIndex: number) => "" | "-" | "+";
+getRowExpandSymbol: (rowIndex: number) => "" | "▼" | "►";
 isRowGantt: (rowIndex: number) => boolean;
 isRowVisible: (rowIndex: number) => boolean | undefined;
+registerConnectionHandle: (handleInfo: ConnectionHandle) => void;
+registerGanttBar: (barInfo: GanttBarInfo) => void;
+resizeColumn: (colIndex: number, newWidth: number) => void;
 setCellData: (colIndex: number, rowIndex: number, value: any) => void;
 setCellText: (colIndex: number, rowIndex: number, value: string) => void;
 toggleRowExpand: (rowIndex: number) => void;
+unregisterConnectionHandle: (handleId: string) => void;
+unregisterGanttBar: (barId: string) => void;
 updateGanttBar: (event: GanttDragEvent) => void;
-}, "hasPinnedColumns" | "numberedRowWidth" | "zeroColumn">, Pick<{
+}, "hasPinnedColumns" | "isGanttView" | "isTreeView" | "numberedRowWidth" | "zeroColumn">, Pick<{
 columns: Ref<    {
 name: string;
 align?: CanvasTextAlign | undefined;
@@ -372,12 +692,66 @@ colspan?: number | undefined;
 originalIndex?: number | undefined;
 }[]>;
 config: Ref<    {
-view?: "uncounted" | "list" | "list-expansion" | "tree" | "gantt" | undefined;
+view?: "uncounted" | "list" | "list-expansion" | "tree" | "gantt" | "tree-gantt" | undefined;
 fullWidth?: boolean | undefined;
 }, TableConfig | {
-view?: "uncounted" | "list" | "list-expansion" | "tree" | "gantt" | undefined;
+view?: "uncounted" | "list" | "list-expansion" | "tree" | "gantt" | "tree-gantt" | undefined;
 fullWidth?: boolean | undefined;
 }>;
+connectionHandles: Ref<    {
+id: string;
+rowIndex: number;
+colIndex: number;
+side: "left" | "right";
+position: {
+x: number;
+y: number;
+};
+visible: boolean;
+barId: string;
+}[], ConnectionHandle[] | {
+id: string;
+rowIndex: number;
+colIndex: number;
+side: "left" | "right";
+position: {
+x: number;
+y: number;
+};
+visible: boolean;
+barId: string;
+}[]>;
+connectionPaths: Ref<    {
+id: string;
+from: {
+barId: string;
+side: "left" | "right";
+};
+to: {
+barId: string;
+side: "left" | "right";
+};
+style?: {
+color?: string | undefined;
+width?: number | undefined;
+} | undefined;
+label?: string | undefined;
+}[], ConnectionPath[] | {
+id: string;
+from: {
+barId: string;
+side: "left" | "right";
+};
+to: {
+barId: string;
+side: "left" | "right";
+};
+style?: {
+color?: string | undefined;
+width?: number | undefined;
+} | undefined;
+label?: string | undefined;
+}[]>;
 display: Ref<    {
 expanded?: boolean | undefined;
 childrenOpen?: boolean | undefined;
@@ -397,6 +771,31 @@ indent?: number | undefined;
 parent?: number | undefined;
 rowModified?: boolean | undefined;
 }[]>;
+ganttBars: Ref<    {
+id: string;
+rowIndex: number;
+colIndex: number;
+startIndex: number;
+endIndex: number;
+color: string;
+position: {
+x: number;
+y: number;
+};
+label?: string | undefined;
+}[], GanttBarInfo[] | {
+id: string;
+rowIndex: number;
+colIndex: number;
+startIndex: number;
+endIndex: number;
+color: string;
+position: {
+x: number;
+y: number;
+};
+label?: string | undefined;
+}[]>;
 modal: Ref<    {
 visible?: boolean | undefined;
 cell?: (HTMLTableCellElement | null) | undefined;
@@ -446,23 +845,104 @@ colspan?: number | undefined;
 table: Ref<    {}, {}>;
 updates: Ref<Record<string, string>, Record<string, string>>;
 hasPinnedColumns: ComputedRef<boolean>;
+isGanttView: ComputedRef<boolean>;
+isTreeView: ComputedRef<boolean>;
 numberedRowWidth: ComputedRef<string>;
 zeroColumn: ComputedRef<boolean>;
 closeModal: (event: MouseEvent) => void;
+createConnection: (fromHandleId: string, toHandleId: string, options?: {
+style?: ConnectionPath["style"];
+label?: string;
+}) => ConnectionPath | null;
+deleteConnection: (connectionId: string) => boolean;
 getCellData: <T = any>(colIndex: number, rowIndex: number) => T;
 getCellDisplayValue: (colIndex: number, rowIndex: number) => any;
+getConnectionsForBar: (barId: string) => {
+id: string;
+from: {
+barId: string;
+side: "left" | "right";
+};
+to: {
+barId: string;
+side: "left" | "right";
+};
+style?: {
+color?: string | undefined;
+width?: number | undefined;
+} | undefined;
+label?: string | undefined;
+}[];
 getFormattedValue: (colIndex: number, rowIndex: number, value: any) => any;
+getHandlesForBar: (barId: string) => {
+id: string;
+rowIndex: number;
+colIndex: number;
+side: "left" | "right";
+position: {
+x: number;
+y: number;
+};
+visible: boolean;
+barId: string;
+}[];
 getHeaderCellStyle: (column: TableColumn) => CSSProperties;
-resizeColumn: (colIndex: number, newWidth: number) => void;
 getIndent: (colIndex: number, indentLevel?: number) => string;
-getRowExpandSymbol: (rowIndex: number) => "" | "-" | "+";
+getRowExpandSymbol: (rowIndex: number) => "" | "▼" | "►";
 isRowGantt: (rowIndex: number) => boolean;
 isRowVisible: (rowIndex: number) => boolean | undefined;
+registerConnectionHandle: (handleInfo: ConnectionHandle) => void;
+registerGanttBar: (barInfo: GanttBarInfo) => void;
+resizeColumn: (colIndex: number, newWidth: number) => void;
 setCellData: (colIndex: number, rowIndex: number, value: any) => void;
 setCellText: (colIndex: number, rowIndex: number, value: string) => void;
 toggleRowExpand: (rowIndex: number) => void;
+unregisterConnectionHandle: (handleId: string) => void;
+unregisterGanttBar: (barId: string) => void;
 updateGanttBar: (event: GanttDragEvent) => void;
-}, "closeModal" | "getCellData" | "getCellDisplayValue" | "getFormattedValue" | "getHeaderCellStyle" | "resizeColumn" | "getIndent" | "getRowExpandSymbol" | "isRowGantt" | "isRowVisible" | "setCellData" | "setCellText" | "toggleRowExpand" | "updateGanttBar">>;
+}, "closeModal" | "createConnection" | "deleteConnection" | "getCellData" | "getCellDisplayValue" | "getConnectionsForBar" | "getFormattedValue" | "getHandlesForBar" | "getHeaderCellStyle" | "getIndent" | "getRowExpandSymbol" | "isRowGantt" | "isRowVisible" | "registerConnectionHandle" | "registerGanttBar" | "resizeColumn" | "setCellData" | "setCellText" | "toggleRowExpand" | "unregisterConnectionHandle" | "unregisterGanttBar" | "updateGanttBar">>;
+
+/**
+ * Gantt bar information for VueFlow integration.
+ * @public
+ */
+export declare interface GanttBarInfo {
+    /**
+     * Unique identifier for the gantt bar.
+     */
+    id: string;
+    /**
+     * The row index of the gantt bar.
+     */
+    rowIndex: number;
+    /**
+     * The primary column index of the gantt bar (typically the start index).
+     */
+    colIndex: number;
+    /**
+     * Starting column index of the gantt bar.
+     */
+    startIndex: Ref<number>;
+    /**
+     * Ending column index of the gantt bar.
+     */
+    endIndex: Ref<number>;
+    /**
+     * Color of the gantt bar.
+     */
+    color: Ref<string>;
+    /**
+     * The position of the gantt bar in the ATable component.
+     */
+    position: {
+        x: ShallowRef<number>;
+        y: ShallowRef<number>;
+    };
+    /**
+     * Display label for the gantt bar.
+     */
+    label?: string;
+}
 
 /**
  * Gantt table drag event definition.
@@ -498,26 +978,30 @@ export declare type GanttDragEvent = {
 });
 
 /**
- * This interface defines the options for a row when it is being viewed as a Gantt chart.
+ * Gantt chart options for table rows.
  * @public
  */
 export declare interface GanttOptions {
     /**
-     * The colour to be applied to the row's gantt bar.
+     * The color to be applied to the row's gantt bar.
+     *
+     * @defaultValue '#cccccc'
      */
     color?: string;
     /**
      * The starting column index for the gantt bar.
+     *
+     * @defaultValue 0
      */
     startIndex?: number;
     /**
-     * The ending column index for the gantt bar. If the endIndex and colspan are not provided,
+     * The ending column index for the gantt bar. If endIndex and colspan are not provided,
      * the bar will stretch to the end of the table.
      */
     endIndex?: number;
     /**
-     * The length of the gantt bar. Useful when only the start index is provided. If the
-     * colspan and endIndex are not provided, the bar will stretch to the end of the table.
+     * The length of the gantt bar in columns. Useful when only the start index is provided.
+     * If colspan and endIndex are not provided, the bar will stretch to the end of the table.
      */
     colspan?: number;
 }
@@ -644,8 +1128,8 @@ export declare interface TableColumn {
      */
     ganttComponent?: string;
     /**
-     * The colspan of the Gantt-bar for the column. This is used to determine how many columns
-     * the Gantt-bar should span.
+     * The colspan of the Gantt bar for the column. This determines how many columns
+     * the Gantt bar should span across.
      *
      * Only applicable for Gantt tables.
      *
@@ -653,8 +1137,8 @@ export declare interface TableColumn {
      */
     colspan?: number;
     /**
-     * The starting column index for the Gantt-bar, excluding any pinned columns. This is
-     * evaluated automatically while rendering the table.
+     * The original column index for the Gantt bar, excluding any pinned columns.
+     * This is evaluated automatically while rendering the table.
      *
      * Only applicable for Gantt tables.
      *
@@ -674,8 +1158,10 @@ export declare interface TableConfig {
      * - `list` - row numbers are displayed in the table
      * - `list-expansion` - carets are displayed in the number column that expand/collapse the row inline
      * - `tree` - carets are displayed in the number column that expand/collapse grouped rows
+     * - `gantt` - view that allows specific rows to be displayed with Gantt functionality
+     * - `tree-gantt` - similar to `gantt`, but allows for tree functionality as well
      */
-    view?: 'uncounted' | 'list' | 'list-expansion' | 'tree' | 'gantt';
+    view?: 'uncounted' | 'list' | 'list-expansion' | 'tree' | 'gantt' | 'tree-gantt';
     /**
      * Control whether the table should be allowed to use the full width of its container.
      *