@stonecrop/atable 0.4.10 → 0.4.12

package/dist/index.js

@@ -1,5 +1,6 @@
 import ACell from './components/ACell.vue';
 import AExpansionRow from './components/AExpansionRow.vue';
+import AGanttCell from './components/AGanttCell.vue';
 import ARow from './components/ARow.vue';
 import ATable from './components/ATable.vue';
 import ATableHeader from './components/ATableHeader.vue';
@@ -15,6 +16,7 @@ export { createTableStore } from './stores/table';
 function install(app /* options */) {
     app.component('ACell', ACell);
     app.component('AExpansionRow', AExpansionRow);
+    app.component('AGanttCell', AGanttCell);
     app.component('ARow', ARow);
     app.component('ATable', ATable);
     app.component('ATableHeader', ATableHeader);
@@ -22,4 +24,4 @@ function install(app /* options */) {
     app.component('ATableLoadingBar', ATableLoadingBar);
     app.component('ATableModal', ATableModal);
 }
-export { install, ACell, AExpansionRow, ARow, ATable, ATableHeader, ATableLoading, ATableLoadingBar, ATableModal };
+export { ACell, AExpansionRow, AGanttCell, ARow, ATable, ATableHeader, ATableLoading, ATableLoadingBar, ATableModal, install, };

package/dist/src/index.d.ts

@@ -1,6 +1,7 @@
 import { App } from 'vue';
 import ACell from './components/ACell.vue';
 import AExpansionRow from './components/AExpansionRow.vue';
+import AGanttCell from './components/AGanttCell.vue';
 import ARow from './components/ARow.vue';
 import ATable from './components/ATable.vue';
 import ATableHeader from './components/ATableHeader.vue';
@@ -15,5 +16,5 @@ export type { CellContext, TableColumn, TableConfig, TableDisplay, TableModal, T
  * @public
  */
 declare function install(app: App): void;
-export { install, ACell, AExpansionRow, ARow, ATable, ATableHeader, ATableLoading, ATableLoadingBar, ATableModal };
+export { ACell, AExpansionRow, AGanttCell, ARow, ATable, ATableHeader, ATableLoading, ATableLoadingBar, ATableModal, install, };
 //# sourceMappingURL=index.d.ts.map

package/dist/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,OAAO,KAAK,MAAM,wBAAwB,CAAA;AAC1C,OAAO,aAAa,MAAM,gCAAgC,CAAA;AAC1D,OAAO,IAAI,MAAM,uBAAuB,CAAA;AACxC,OAAO,MAAM,MAAM,yBAAyB,CAAA;AAC5C,OAAO,YAAY,MAAM,+BAA+B,CAAA;AACxD,OAAO,aAAa,MAAM,gCAAgC,CAAA;AAC1D,OAAO,gBAAgB,MAAM,mCAAmC,CAAA;AAChE,OAAO,WAAW,MAAM,8BAA8B,CAAA;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AACjD,YAAY,EACX,WAAW,EACX,WAAW,EACX,WAAW,EACX,YAAY,EACZ,UAAU,EACV,eAAe,EACf,QAAQ,GACR,MAAM,SAAS,CAAA;AAEhB;;;;GAIG;AACH,iBAAS,OAAO,CAAC,GAAG,EAAE,GAAG,QASxB;AAED,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,OAAO,KAAK,MAAM,wBAAwB,CAAA;AAC1C,OAAO,aAAa,MAAM,gCAAgC,CAAA;AAC1D,OAAO,UAAU,MAAM,6BAA6B,CAAA;AACpD,OAAO,IAAI,MAAM,uBAAuB,CAAA;AACxC,OAAO,MAAM,MAAM,yBAAyB,CAAA;AAC5C,OAAO,YAAY,MAAM,+BAA+B,CAAA;AACxD,OAAO,aAAa,MAAM,gCAAgC,CAAA;AAC1D,OAAO,gBAAgB,MAAM,mCAAmC,CAAA;AAChE,OAAO,WAAW,MAAM,8BAA8B,CAAA;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AACjD,YAAY,EACX,WAAW,EACX,WAAW,EACX,WAAW,EACX,YAAY,EACZ,UAAU,EACV,eAAe,EACf,QAAQ,GACR,MAAM,SAAS,CAAA;AAEhB;;;;GAIG;AACH,iBAAS,OAAO,CAAC,GAAG,EAAE,GAAG,QAUxB;AAED,OAAO,EACN,KAAK,EACL,aAAa,EACb,UAAU,EACV,IAAI,EACJ,MAAM,EACN,YAAY,EACZ,aAAa,EACb,gBAAgB,EAChB,WAAW,EACX,OAAO,GACP,CAAA"}

package/dist/src/stores/table.d.ts

@@ -25,6 +25,10 @@ export declare const createTableStore: (initData: {
         type?: string | undefined;
         width?: string | undefined;
         pinned?: boolean | undefined;
+        colspan?: number | undefined;
+        ganttComponent?: string | undefined;
+        isGantt?: boolean | undefined;
+        originalIndex?: number | undefined;
         cellComponent?: string | undefined;
         cellComponentProps?: Record<string, any> | undefined;
         modalComponent?: (string | ((context: CellContext) => string)) | undefined;
@@ -39,6 +43,10 @@ export declare const createTableStore: (initData: {
         type?: string | undefined;
         width?: string | undefined;
         pinned?: boolean | undefined;
+        colspan?: number | undefined;
+        ganttComponent?: string | undefined;
+        isGantt?: boolean | undefined;
+        originalIndex?: number | undefined;
         cellComponent?: string | undefined;
         cellComponentProps?: Record<string, any> | undefined;
         modalComponent?: (string | ((context: CellContext) => string)) | undefined;
@@ -47,10 +55,10 @@ export declare const createTableStore: (initData: {
         mask?: ((value: any) => any) | undefined;
     }[]>;
     config: import("vue").Ref<{
-        view?: ("uncounted" | "list" | "list-expansion" | "tree") | undefined;
+        view?: ("uncounted" | "list" | "list-expansion" | "tree" | "gantt") | undefined;
         fullWidth?: boolean | undefined;
     }, TableConfig | {
-        view?: ("uncounted" | "list" | "list-expansion" | "tree") | undefined;
+        view?: ("uncounted" | "list" | "list-expansion" | "tree" | "gantt") | undefined;
         fullWidth?: boolean | undefined;
     }>;
     display: import("vue").Ref<{
@@ -103,10 +111,12 @@ export declare const createTableStore: (initData: {
         [x: string]: any;
         indent?: number | undefined;
         parent?: number | undefined;
+        gantt_color?: string | undefined;
     }[], TableRow[] | {
         [x: string]: any;
         indent?: number | undefined;
         parent?: number | undefined;
+        gantt_color?: string | undefined;
     }[]>;
     table: import("vue").Ref<{}, {}>;
     updates: import("vue").Ref<Record<string, string>, Record<string, string>>;
@@ -120,6 +130,7 @@ export declare const createTableStore: (initData: {
     getHeaderCellStyle: (column: TableColumn) => CSSProperties;
     getIndent: (colIndex: number, indentLevel?: number) => string;
     getRowExpandSymbol: (rowIndex: number) => "" | "-" | "+";
+    isRowGantt: (rowIndex: number) => boolean;
     isRowVisible: (rowIndex: number) => boolean | undefined;
     setCellData: (colIndex: number, rowIndex: number, value: any) => void;
     setCellText: (colIndex: number, rowIndex: number, value: string) => void;
@@ -133,6 +144,10 @@ export declare const createTableStore: (initData: {
         type?: string | undefined;
         width?: string | undefined;
         pinned?: boolean | undefined;
+        colspan?: number | undefined;
+        ganttComponent?: string | undefined;
+        isGantt?: boolean | undefined;
+        originalIndex?: number | undefined;
         cellComponent?: string | undefined;
         cellComponentProps?: Record<string, any> | undefined;
         modalComponent?: (string | ((context: CellContext) => string)) | undefined;
@@ -147,6 +162,10 @@ export declare const createTableStore: (initData: {
         type?: string | undefined;
         width?: string | undefined;
         pinned?: boolean | undefined;
+        colspan?: number | undefined;
+        ganttComponent?: string | undefined;
+        isGantt?: boolean | undefined;
+        originalIndex?: number | undefined;
         cellComponent?: string | undefined;
         cellComponentProps?: Record<string, any> | undefined;
         modalComponent?: (string | ((context: CellContext) => string)) | undefined;
@@ -155,10 +174,10 @@ export declare const createTableStore: (initData: {
         mask?: ((value: any) => any) | undefined;
     }[]>;
     config: import("vue").Ref<{
-        view?: ("uncounted" | "list" | "list-expansion" | "tree") | undefined;
+        view?: ("uncounted" | "list" | "list-expansion" | "tree" | "gantt") | undefined;
         fullWidth?: boolean | undefined;
     }, TableConfig | {
-        view?: ("uncounted" | "list" | "list-expansion" | "tree") | undefined;
+        view?: ("uncounted" | "list" | "list-expansion" | "tree" | "gantt") | undefined;
         fullWidth?: boolean | undefined;
     }>;
     display: import("vue").Ref<{
@@ -211,10 +230,12 @@ export declare const createTableStore: (initData: {
         [x: string]: any;
         indent?: number | undefined;
         parent?: number | undefined;
+        gantt_color?: string | undefined;
     }[], TableRow[] | {
         [x: string]: any;
         indent?: number | undefined;
         parent?: number | undefined;
+        gantt_color?: string | undefined;
     }[]>;
     table: import("vue").Ref<{}, {}>;
     updates: import("vue").Ref<Record<string, string>, Record<string, string>>;
@@ -228,6 +249,7 @@ export declare const createTableStore: (initData: {
     getHeaderCellStyle: (column: TableColumn) => CSSProperties;
     getIndent: (colIndex: number, indentLevel?: number) => string;
     getRowExpandSymbol: (rowIndex: number) => "" | "-" | "+";
+    isRowGantt: (rowIndex: number) => boolean;
     isRowVisible: (rowIndex: number) => boolean | undefined;
     setCellData: (colIndex: number, rowIndex: number, value: any) => void;
     setCellText: (colIndex: number, rowIndex: number, value: string) => void;
@@ -241,6 +263,10 @@ export declare const createTableStore: (initData: {
         type?: string | undefined;
         width?: string | undefined;
         pinned?: boolean | undefined;
+        colspan?: number | undefined;
+        ganttComponent?: string | undefined;
+        isGantt?: boolean | undefined;
+        originalIndex?: number | undefined;
         cellComponent?: string | undefined;
         cellComponentProps?: Record<string, any> | undefined;
         modalComponent?: (string | ((context: CellContext) => string)) | undefined;
@@ -255,6 +281,10 @@ export declare const createTableStore: (initData: {
         type?: string | undefined;
         width?: string | undefined;
         pinned?: boolean | undefined;
+        colspan?: number | undefined;
+        ganttComponent?: string | undefined;
+        isGantt?: boolean | undefined;
+        originalIndex?: number | undefined;
         cellComponent?: string | undefined;
         cellComponentProps?: Record<string, any> | undefined;
         modalComponent?: (string | ((context: CellContext) => string)) | undefined;
@@ -263,10 +293,10 @@ export declare const createTableStore: (initData: {
         mask?: ((value: any) => any) | undefined;
     }[]>;
     config: import("vue").Ref<{
-        view?: ("uncounted" | "list" | "list-expansion" | "tree") | undefined;
+        view?: ("uncounted" | "list" | "list-expansion" | "tree" | "gantt") | undefined;
         fullWidth?: boolean | undefined;
     }, TableConfig | {
-        view?: ("uncounted" | "list" | "list-expansion" | "tree") | undefined;
+        view?: ("uncounted" | "list" | "list-expansion" | "tree" | "gantt") | undefined;
         fullWidth?: boolean | undefined;
     }>;
     display: import("vue").Ref<{
@@ -319,10 +349,12 @@ export declare const createTableStore: (initData: {
         [x: string]: any;
         indent?: number | undefined;
         parent?: number | undefined;
+        gantt_color?: string | undefined;
     }[], TableRow[] | {
         [x: string]: any;
         indent?: number | undefined;
         parent?: number | undefined;
+        gantt_color?: string | undefined;
     }[]>;
     table: import("vue").Ref<{}, {}>;
     updates: import("vue").Ref<Record<string, string>, Record<string, string>>;
@@ -336,9 +368,10 @@ export declare const createTableStore: (initData: {
     getHeaderCellStyle: (column: TableColumn) => CSSProperties;
     getIndent: (colIndex: number, indentLevel?: number) => string;
     getRowExpandSymbol: (rowIndex: number) => "" | "-" | "+";
+    isRowGantt: (rowIndex: number) => boolean;
     isRowVisible: (rowIndex: number) => boolean | undefined;
     setCellData: (colIndex: number, rowIndex: number, value: any) => void;
     setCellText: (colIndex: number, rowIndex: number, value: string) => void;
     toggleRowExpand: (rowIndex: number) => void;
-}, "closeModal" | "getCellData" | "getCellDisplayValue" | "getFormattedValue" | "getHeaderCellStyle" | "getIndent" | "getRowExpandSymbol" | "isRowVisible" | "setCellData" | "setCellText" | "toggleRowExpand">>;
+}, "closeModal" | "getCellData" | "getCellDisplayValue" | "getFormattedValue" | "getHeaderCellStyle" | "getIndent" | "getRowExpandSymbol" | "isRowGantt" | "isRowVisible" | "setCellData" | "setCellText" | "toggleRowExpand">>;
 //# sourceMappingURL=table.d.ts.map

package/dist/src/stores/table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/stores/table.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,aAAa,EAAiB,MAAM,KAAK,CAAA;AAEvD,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AAGzG;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,aAAc;IAC1C,OAAO,EAAE,WAAW,EAAE,CAAA;IACtB,IAAI,EAAE,QAAQ,EAAE,CAAA;IAChB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,KAAK,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAA;IAC9B,OAAO,CAAC,EAAE,YAAY,EAAE,CAAA;IACxB,KAAK,CAAC,EAAE,UAAU,CAAA;CAClB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA+J4B,UAAU;kBAtFhB,CAAC,kBAAkB,MAAM,YAAY,MAAM,KAAG,CAAC;oCA4D7B,MAAM,YAAY,MAAM;kCAK1B,MAAM,YAAY,MAAM,SAAS,GAAG;iCA3CrC,WAAW,KAAG,aAAa;0BA0ElC,MAAM,gBAAgB,MAAM;mCAhEnB,MAAM;6BAJZ,MAAM;4BA3BP,MAAM,YAAY,MAAM,SAAS,GAAG;4BAYpC,MAAM,YAAY,MAAM,SAAS,MAAM;gCA+BnC,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA0Cd,UAAU;kBAtFhB,CAAC,kBAAkB,MAAM,YAAY,MAAM,KAAG,CAAC;oCA4D7B,MAAM,YAAY,MAAM;kCAK1B,MAAM,YAAY,MAAM,SAAS,GAAG;iCA3CrC,WAAW,KAAG,aAAa;0BA0ElC,MAAM,gBAAgB,MAAM;mCAhEnB,MAAM;6BAJZ,MAAM;4BA3BP,MAAM,YAAY,MAAM,SAAS,GAAG;4BAYpC,MAAM,YAAY,MAAM,SAAS,MAAM;gCA+BnC,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA0Cd,UAAU;kBAtFhB,CAAC,kBAAkB,MAAM,YAAY,MAAM,KAAG,CAAC;oCA4D7B,MAAM,YAAY,MAAM;kCAK1B,MAAM,YAAY,MAAM,SAAS,GAAG;iCA3CrC,WAAW,KAAG,aAAa;0BA0ElC,MAAM,gBAAgB,MAAM;mCAhEnB,MAAM;6BAJZ,MAAM;4BA3BP,MAAM,YAAY,MAAM,SAAS,GAAG;4BAYpC,MAAM,YAAY,MAAM,SAAS,MAAM;gCA+BnC,MAAM;gNA2F1C,CAAA"}
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/stores/table.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,aAAa,EAAiB,MAAM,KAAK,CAAA;AAEvD,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AAGzG;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,aAAc;IAC1C,OAAO,EAAE,WAAW,EAAE,CAAA;IACtB,IAAI,EAAE,QAAQ,EAAE,CAAA;IAChB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,KAAK,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAA;IAC9B,OAAO,CAAC,EAAE,YAAY,EAAE,CAAA;IACxB,KAAK,CAAC,EAAE,UAAU,CAAA;CAClB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAqK4B,UAAU;kBA5FhB,CAAC,kBAAkB,MAAM,YAAY,MAAM,KAAG,CAAC;oCAkE7B,MAAM,YAAY,MAAM;kCAK1B,MAAM,YAAY,MAAM,SAAS,GAAG;iCAjDrC,WAAW,KAAG,aAAa;0BAgFlC,MAAM,gBAAgB,MAAM;mCAhEnB,MAAM;2BAVd,MAAM;6BAMJ,MAAM;4BAjCP,MAAM,YAAY,MAAM,SAAS,GAAG;4BAYpC,MAAM,YAAY,MAAM,SAAS,MAAM;gCAqCnC,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA0Cd,UAAU;kBA5FhB,CAAC,kBAAkB,MAAM,YAAY,MAAM,KAAG,CAAC;oCAkE7B,MAAM,YAAY,MAAM;kCAK1B,MAAM,YAAY,MAAM,SAAS,GAAG;iCAjDrC,WAAW,KAAG,aAAa;0BAgFlC,MAAM,gBAAgB,MAAM;mCAhEnB,MAAM;2BAVd,MAAM;6BAMJ,MAAM;4BAjCP,MAAM,YAAY,MAAM,SAAS,GAAG;4BAYpC,MAAM,YAAY,MAAM,SAAS,MAAM;gCAqCnC,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA0Cd,UAAU;kBA5FhB,CAAC,kBAAkB,MAAM,YAAY,MAAM,KAAG,CAAC;oCAkE7B,MAAM,YAAY,MAAM;kCAK1B,MAAM,YAAY,MAAM,SAAS,GAAG;iCAjDrC,WAAW,KAAG,aAAa;0BAgFlC,MAAM,gBAAgB,MAAM;mCAhEnB,MAAM;2BAVd,MAAM;6BAMJ,MAAM;4BAjCP,MAAM,YAAY,MAAM,SAAS,GAAG;4BAYpC,MAAM,YAAY,MAAM,SAAS,MAAM;gCAqCnC,MAAM;+NA4F1C,CAAA"}

package/dist/src/types/index.d.ts

@@ -12,6 +12,10 @@ export type TableColumn = {
     type?: string;
     width?: string;
     pinned?: boolean;
+    colspan?: number;
+    ganttComponent?: string;
+    isGantt?: boolean;
+    originalIndex?: number;
     cellComponent?: string;
     cellComponentProps?: Record<string, any>;
     /**
@@ -56,7 +60,7 @@ export type TableConfig = {
      * - `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
      */
-    view?: 'uncounted' | 'list' | 'list-expansion' | 'tree';
+    view?: 'uncounted' | 'list' | 'list-expansion' | 'tree' | 'gantt';
     fullWidth?: boolean;
 };
 /**
@@ -81,6 +85,10 @@ export type TableRow = {
     [key: string]: any;
     indent?: number;
     parent?: number;
+    /**
+     * When a table is being viewed as a Gantt chart, this colour would be applied to the row's gantt bar, if one exists.
+     */
+    gantt_color?: string;
 };
 /**
  * Table modal definition.

package/dist/src/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"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"}

package/dist/stores/table.js

@@ -90,6 +90,11 @@ export const createTableStore = (initData) => {
             textAlign: column.align || 'center',
             width: config.value.fullWidth ? 'auto' : undefined,
         });
+        const isRowGantt = (rowIndex) => {
+            const row = rows.value[rowIndex];
+            console.log(config.value.view, row.indent);
+            return config.value.view === 'gantt' && row.indent === 0;
+        };
         const isRowVisible = (rowIndex) => {
             return config.value.view !== 'tree' || display.value[rowIndex].isRoot || display.value[rowIndex].open;
         };
@@ -181,6 +186,7 @@ export const createTableStore = (initData) => {
             getHeaderCellStyle,
             getIndent,
             getRowExpandSymbol,
+            isRowGantt,
             isRowVisible,
             setCellData,
             setCellText,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stonecrop/atable",
-  "version": "0.4.10",
+  "version": "0.4.12",
   "license": "MIT",
   "type": "module",
   "author": {
@@ -38,8 +38,8 @@
     "@vueuse/core": "^12.7.0",
     "pinia": "^3.0.1",
     "vue": "^3.5.13",
-    "@stonecrop/themes": "0.4.10",
-    "@stonecrop/utilities": "0.4.10"
+    "@stonecrop/themes": "0.4.12",
+    "@stonecrop/utilities": "0.4.12"
   },
   "devDependencies": {
     "@microsoft/api-documenter": "^7.26.10",

package/src/components/ACell.vue

@@ -175,6 +175,10 @@ const updateCellData = (payload: Event) => {
 		store.setCellData(colIndex, rowIndex, target.textContent)
 	}
 }
+
+defineExpose({
+	currentData,
+})
 </script>
 
 <style>

package/src/components/AExpansionRow.vue

@@ -72,28 +72,30 @@ if (addNavigation) {
 	align-items: center;
 	justify-content: center;
 }
+
 .expandable-row {
 	border-top: 1px solid var(--sc-row-border-color);
 	height: var(--sc-atable-row-height);
-	display: flex;
 }
+
 .expandable-row > td:first-child {
 	border-left: 4px solid var(--sc-row-border-color);
 }
 
 .expanded-row {
-	display: flex;
 	border-left: 2px solid var(--sc-row-border-color);
 }
 
 .expandable-row:last-child {
 	border-bottom: 1px solid var(--sc-row-border-color);
 }
+
 .expanded-row-content {
 	border-top: 1px solid var(--sc-row-border-color);
 	padding: 1.5rem;
 }
 </style>
+
 <style scoped>
 .expandable-row.changed-row-gradient:has(td.cell-modified) {
 	--cell-color-start: color-mix(in srgb, var(--sc-cell-changed-color), #fff 20%);

package/src/components/AGanttCell.vue

@@ -0,0 +1,311 @@
+<template>
+	<td class="aganttcell" :colspan="colspan">
+		<div ref="container" class="gantt-handler">
+			<!-- Draggable gantt bar -->
+			<div
+				ref="bar"
+				class="gantt-bar"
+				:class="{ 'is-dragging': isBarDragging || isLeftDragging || isRightDragging }"
+				:style="barStyle">
+				<!-- Left resizer handle -->
+				<div ref="leftHandle" class="gantt-handle left-handle" :class="{ 'is-dragging': isLeftDragging }">
+					<div class="handle-grip"></div>
+					<div class="vertical-indicator left-indicator"></div>
+				</div>
+
+				<label v-if="label" class="gantt-label">{{ label }}</label>
+
+				<!-- Right resizer handle -->
+				<div ref="rightHandle" class="gantt-handle right-handle" :class="{ 'is-dragging': isRightDragging }">
+					<div class="handle-grip"></div>
+					<div class="vertical-indicator right-indicator"></div>
+				</div>
+			</div>
+		</div>
+	</td>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, useTemplateRef } from 'vue'
+import { useDraggable, useElementBounding } from '@vueuse/core'
+
+const {
+	start,
+	end,
+	colspan = 1,
+	label,
+	color,
+} = defineProps<{
+	start?: number
+	end?: number
+	colspan?: number
+	label?: string
+	color?: string
+}>()
+
+const baseColor = ref()
+
+onMounted(() => {
+	if (!color || color == '' || color.length < 6) {
+		baseColor.value = '#cccccc'
+	} else {
+		baseColor.value = color
+	}
+})
+
+const emit = defineEmits<{
+	'update:start': [value: number]
+	'update:end': [value: number]
+	drag: [{ type: 'bar'; start: number; end: number } | { type: 'resize'; edge: 'start' | 'end'; value: number }]
+}>()
+
+const containerRef = useTemplateRef('container')
+const barRef = useTemplateRef('bar')
+const leftHandleRef = useTemplateRef('leftHandle')
+const rightHandleRef = useTemplateRef('rightHandle')
+
+const { width: totalBarWidth } = useElementBounding(containerRef)
+const { left: barLeft, right: barRight } = useElementBounding(barRef)
+const currentStart = ref(start || 0)
+const currentEnd = ref(end || colspan)
+const dragStartData = ref({ startX: 0, startPos: 0 })
+
+const pixelsPerColumn = computed(() => (colspan > 0 ? totalBarWidth.value / colspan : 0))
+
+const barStyle = computed(() => {
+	const startPercent = (currentStart.value / colspan) * 100
+	const endPercent = (currentEnd.value / colspan) * 100
+
+	return {
+		left: `${startPercent}%`,
+		width: `${endPercent - startPercent}%`,
+		backgroundColor: baseColor.value,
+	}
+})
+
+const { isDragging: isLeftDragging } = useDraggable(leftHandleRef, {
+	axis: 'x',
+	onStart: () => {
+		if (barRef.value) barRef.value.style.transition = 'none'
+		dragStartData.value = {
+			startX: barLeft.value,
+			startPos: currentStart.value,
+		}
+	},
+	onMove: ({ x }) => {
+		if (isLeftDragging.value && barRef.value) {
+			const deltaX = x - dragStartData.value.startX
+			const deltaColumns = deltaX / pixelsPerColumn.value
+			const newStart = Math.max(0, Math.min(currentEnd.value - 1, dragStartData.value.startPos + deltaColumns))
+			barRef.value.style.left = `${(newStart / colspan) * 100}%`
+			barRef.value.style.width = `${((currentEnd.value - newStart) / colspan) * 100}%`
+		}
+	},
+	onEnd: ({ x }) => {
+		if (barRef.value) {
+			const deltaX = x - dragStartData.value.startX
+			const deltaColumns = Math.round(deltaX / pixelsPerColumn.value)
+			const newStart = Math.max(0, Math.min(currentEnd.value - 1, dragStartData.value.startPos + deltaColumns))
+			currentStart.value = newStart
+
+			emit('update:start', newStart)
+			emit('drag', { type: 'resize', edge: 'start', value: newStart })
+		}
+	},
+})
+
+const { isDragging: isRightDragging } = useDraggable(rightHandleRef, {
+	axis: 'x',
+	onStart: () => {
+		if (barRef.value) barRef.value.style.transition = 'none'
+		dragStartData.value = {
+			startX: barRight.value,
+			startPos: currentEnd.value,
+		}
+	},
+	onMove: ({ x }) => {
+		if (isRightDragging.value && barRef.value) {
+			const deltaX = x - dragStartData.value.startX
+			const deltaColumns = deltaX / pixelsPerColumn.value
+			const newEnd = Math.max(currentStart.value + 1, Math.min(colspan, dragStartData.value.startPos + deltaColumns))
+			barRef.value.style.width = `${((newEnd - currentStart.value) / colspan) * 100}%`
+		}
+	},
+	onEnd: ({ x }) => {
+		if (barRef.value) {
+			const deltaX = x - dragStartData.value.startX
+			const deltaColumns = Math.round(deltaX / pixelsPerColumn.value)
+			const newEnd = Math.max(currentStart.value + 1, Math.min(colspan, dragStartData.value.startPos + deltaColumns))
+			currentEnd.value = newEnd
+
+			emit('update:end', newEnd)
+			emit('drag', { type: 'resize', edge: 'end', value: newEnd })
+		}
+	},
+})
+
+const { isDragging: isBarDragging } = useDraggable(barRef, {
+	exact: true, // to avoid triggering when the left and right handles are being used
+	axis: 'x',
+	onStart: () => {
+		if (barRef.value) barRef.value.style.transition = 'none'
+		dragStartData.value = {
+			startX: barLeft.value,
+			startPos: currentStart.value,
+		}
+	},
+	onMove: ({ x }) => {
+		if (isBarDragging.value && barRef.value) {
+			const deltaX = x - dragStartData.value.startX
+			const deltaColumns = deltaX / pixelsPerColumn.value
+			const barWidth = currentEnd.value - currentStart.value
+			const newStart = Math.max(0, Math.min(dragStartData.value.startPos + deltaColumns, colspan - barWidth))
+			barRef.value.style.left = `${(newStart / colspan) * 100}%`
+		}
+	},
+	onEnd: ({ x }) => {
+		if (barRef.value) {
+			const deltaX = x - dragStartData.value.startX
+			const deltaColumns = Math.round(deltaX / pixelsPerColumn.value)
+			const barWidth = currentEnd.value - currentStart.value
+
+			let newStart = dragStartData.value.startPos + deltaColumns
+			let newEnd = newStart + barWidth
+			if (newStart < 0) {
+				newStart = 0
+				newEnd = barWidth
+			} else if (newEnd > colspan) {
+				newEnd = colspan
+				newStart = newEnd - barWidth
+			}
+
+			currentStart.value = newStart
+			currentEnd.value = newEnd
+
+			emit('update:start', newStart)
+			emit('update:end', newEnd)
+			emit('drag', { type: 'bar', start: newStart, end: newEnd })
+		}
+	},
+})
+</script>
+
+<style scoped>
+.aganttcell {
+	background-color: #f9f9f9;
+	width: 100%;
+	padding: 0;
+	height: 100%;
+}
+
+.gantt-handler {
+	position: relative;
+	height: 100%;
+	background-color: #f0f0f0;
+	border-radius: 4px;
+	overflow: visible; /* Changed from hidden to allow indicators to extend out */
+}
+
+.gantt-bar {
+	position: absolute;
+	height: 100%;
+	border-radius: 4px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	cursor: grab;
+	box-sizing: border-box;
+	border: 1px solid rgba(0, 0, 0, 0.5);
+	transition: left 0.1s ease-out, width 0.1s ease-out;
+}
+
+.gantt-bar:active {
+	cursor: grabbing;
+}
+
+.gantt-bar.is-dragging {
+	z-index: 10;
+}
+
+.gantt-label {
+	flex: 1;
+	text-align: center;
+	font-size: 12px;
+	color: #aaaaaa;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	padding: 0 8px;
+	user-select: none;
+}
+
+.gantt-handle {
+	position: relative;
+	width: 12px;
+	height: 100%;
+	cursor: ew-resize;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 0;
+	background: rgba(0, 0, 0, 0.25);
+}
+
+.left-handle {
+	border-right: 1px solid rgba(0, 0, 0, 0.5);
+}
+.right-handle {
+	border-left: 1px solid rgba(0, 0, 0, 0.5);
+}
+
+.handle-grip {
+	width: 4px;
+	height: 12px;
+	border-radius: 2px;
+	background: rgba(0, 0, 0, 0.8);
+}
+
+.gantt-handle:hover {
+	background-color: rgba(255, 255, 255, 0.5);
+}
+
+/* Vertical indicators for handles */
+.vertical-indicator {
+	position: absolute;
+	width: 2px;
+	opacity: 0;
+	pointer-events: none;
+	transition: opacity 0.2s ease;
+	top: -100vh; /* Extend up */
+	height: 100vh; /* Full height, but will be clipped by tbody */
+	z-index: 5;
+	background-color: v-bind(baseColor);
+}
+
+.left-indicator {
+	left: 50%;
+	transform: translateX(-50%);
+}
+
+.right-indicator {
+	right: 50%;
+	transform: translateX(50%);
+}
+
+.gantt-handle.is-dragging .vertical-indicator {
+	opacity: 0.7;
+}
+
+.gantt-handler::after {
+	content: '';
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-size: calc(100% / v-bind(colspan)) 100%;
+	background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
+	pointer-events: none;
+	z-index: 1;
+}
+</style>

package/src/components/ARow.vue

@@ -70,11 +70,10 @@ if (addNavigation) {
 @import url('@stonecrop/themes/default.css');
 
 .atable-row {
-	display: flex;
 	background-color: white;
 }
 
-.table-row > td:first-child {
+.atable-row > td:first-child {
 	border-left: 4px solid var(--sc-row-border-color);
 }