@stonecrop/atable 0.4.12 → 0.4.13

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

@@ -4,19 +4,67 @@ import { createTableStore } from '../stores/table';
  * Table column definition.
  * @public
  */
-export type TableColumn = {
+export interface TableColumn {
+    /**
+     * The key of the column. This is used to identify the column in the table.
+     */
     name: string;
+    /**
+     * The alignment of the column. Possible values:
+     * - `left` - left aligned
+     * - `center` - center aligned
+     * - `right` - right aligned
+     * - `start` - aligned to the start of the column
+     * - `end` - aligned to the end of the column
+     *
+     * @defaultValue 'center'
+     */
     align?: CanvasTextAlign;
+    /**
+     * Control whether cells for the column is editable.
+     *
+     * @defaultValue false
+     */
     edit?: boolean;
+    /**
+     * The label of the column. This is displayed in the table header.
+     *
+     * @defaultValue If no label is provided, a character will be assigned alphabetically,
+     * starting from 'A' for the first column, 'B' for the second column, and so on.
+     */
     label?: string;
+    /**
+     * The data-type of the column. Possible values:
+     * - `Data` - the column contains text data
+     * - `Select` - the column contains a select input
+     * - `Date` - the column contains a date input
+     * - `component` - the column contains a custom component
+     *
+     * @beta
+     */
     type?: string;
+    /**
+     * The width of the column. This can be a number (in pixels) or a string (in CSS units).
+     *
+     * @defaultValue '40ch'
+     */
     width?: string;
+    /**
+     * Control whether the column should be pinned to the table.
+     *
+     * @defaultValue false
+     */
     pinned?: boolean;
-    colspan?: number;
-    ganttComponent?: string;
-    isGantt?: boolean;
-    originalIndex?: number;
+    /**
+     * The component to use to render the cell for the column. If not provided, the table will
+     * render the default `<td>` element.
+     */
     cellComponent?: string;
+    /**
+     * Additional properties to pass to the table's cell component.
+     *
+     * Only applicable if the `cellComponent` property is set for the column.
+     */
     cellComponentProps?: Record<string, any>;
     /**
      * The component to use for the modal. If a function is provided, it will be called with the cell context.
@@ -33,26 +81,82 @@ export type TableColumn = {
      * - `store` - the table data store
      */
     modalComponent?: string | ((context: CellContext) => string);
+    /**
+     * Additional properties to pass to the modal component.
+     *
+     * Only applicable if the `modalComponent` property is set for the column.
+     */
     modalComponentExtraProps?: Record<string, any>;
+    /**
+     * The format function to use to format the value of the cell. This can either be a normal or stringified
+     * function that takes the value and the cell context and returns a string.
+     */
     format?: string | ((value: any, context: CellContext) => string);
+    /**
+     * The masking function to use to apply an input mask to the cell. This will accept an input value and
+     * return the masked value.
+     */
     mask?: (value: any) => any;
-};
+    /**
+     * Whether the column is a Gantt column.
+     *
+     * Only applicable for Gantt tables.
+     *
+     * @defaultValue false
+     */
+    isGantt?: boolean;
+    /**
+     * The component to use to render the Gantt bar for the column.
+     *
+     * Only applicable for Gantt tables.
+     *
+     * @defaultValue 'AGanttCell'
+     */
+    ganttComponent?: string;
+    /**
+     * The colspan of the Gantt-bar for the column. This is used to determine how many columns
+     * the Gantt-bar should span.
+     *
+     * Only applicable for Gantt tables.
+     *
+     * @defaultValue The number of columns in the table, excluding any pinned columns.
+     */
+    colspan?: number;
+    /**
+     * The starting column index for the Gantt-bar, excluding any pinned columns. This is
+     * evaluated automatically while rendering the table.
+     *
+     * Only applicable for Gantt tables.
+     *
+     * @defaultValue 0
+     */
+    originalIndex?: number;
+}
 /**
  * Table cell context definition.
  * @public
  */
-export type CellContext = {
+export interface CellContext {
+    /**
+     * The row object for the current cell.
+     */
     row: TableRow;
+    /**
+     * The column object for the current cell.
+     */
     column: TableColumn;
+    /**
+     * The table object for the current cell.
+     */
     table: {
         [key: string]: any;
     };
-};
+}
 /**
  * Table configuration definition.
  * @public
  */
-export type TableConfig = {
+export interface TableConfig {
     /**
      * The type of view to display the table in. Possible values:
      * - `uncounted` - row numbers are not displayed in the table
@@ -61,61 +165,232 @@ export type TableConfig = {
      * - `tree` - carets are displayed in the number column that expand/collapse grouped rows
      */
     view?: 'uncounted' | 'list' | 'list-expansion' | 'tree' | 'gantt';
+    /**
+     * Control whether the table should be allowed to use the full width of its container.
+     *
+     * @defaultValue false
+     */
     fullWidth?: boolean;
-};
+}
 /**
  * Table display definition.
  * @public
  */
-export type TableDisplay = {
-    childrenOpen?: boolean;
+export interface TableDisplay {
+    /**
+     * Indicates whether a row node is expanded or collapsed.
+     *
+     * Only applicable for list-expansion views.
+     *
+     * @defaultValue false
+     */
     expanded?: boolean;
-    indent?: number;
+    /**
+     * Indicates whether a row node's child nodes are open or closed.
+     *
+     * Only applicable for tree views.
+     *
+     * @defaultValue false
+     */
+    childrenOpen?: boolean;
+    /**
+     * Indicates whether a row node is a parent node. This is evaluated automatically
+     * while rendering the table.
+     *
+     * Only applicable for tree views.
+     */
     isParent?: boolean;
+    /**
+     * Indicates whether a row node is a root node. This is evaluated automatically
+     * while rendering the table.
+     *
+     * Only applicable for tree views.
+     */
     isRoot?: boolean;
+    /**
+     * Indicates whether a row node is visible. This is evaluated automatically
+     * while rendering the table.
+     *
+     * Only applicable for tree views.
+     */
     open?: boolean;
+    /**
+     * The indentation level of the row node.
+     *
+     * Only applicable for tree and gantt views.
+     *
+     * @defaultValue 0
+     */
+    indent?: number;
+    /**
+     * The HTML parent element for the row node. This is evaluated automatically while rendering
+     * the table.
+     *
+     * Only applicable for tree and gantt views.
+     */
     parent?: number;
+    /**
+     * Indicates whether a row node has been modified. This is evaluated automatically when a cell
+     * is edited.
+     *
+     * @defaultValue false
+     */
     rowModified?: boolean;
-};
+}
 /**
  * Table row definition.
  * @public
  */
-export type TableRow = {
+export interface TableRow {
+    /**
+     * Additional arbitrary properties that can be passed to the row object.
+     */
     [key: string]: any;
+    /**
+     * The indentation level of the row node.
+     *
+     * Only applicable for tree and gantt views.
+     *
+     * @defaultValue 0
+     */
     indent?: number;
+    /**
+     * The HTML parent element for the row node. This is evaluated automatically while rendering
+     * the table.
+     *
+     * Only applicable for tree and gantt views.
+     */
     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.
+     * The options to use when rendering the row as a Gantt table.
      */
-    gantt_color?: string;
+    gantt?: GanttOptions;
+}
+/**
+ * This interface defines the options for a row when it is being viewed as a Gantt chart.
+ * @public
+ */
+export interface GanttOptions {
+    /**
+     * The colour to be applied to the row's gantt bar.
+     */
+    color?: string;
+    /**
+     * The starting column index for the gantt bar.
+     */
+    startIndex?: number;
+    /**
+     * The ending column index for the gantt bar. If the 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.
+     */
+    colspan?: number;
+}
+/**
+ * Gantt table drag event definition.
+ * @public
+ */
+export type GanttDragEvent = {
+    rowIndex: number;
+    colIndex: number;
+    type: 'bar';
+    start: number;
+    end: number;
+} | {
+    rowIndex: number;
+    colIndex: number;
+    type: 'resize';
+    edge: 'start' | 'end';
+    value: number;
 };
 /**
  * Table modal definition.
  * @public
  */
-export type TableModal = {
-    bottom?: ReturnType<typeof useElementBounding>['bottom'];
+export interface TableModal {
+    /**
+     * Indicates whether the table modal is currently visible.
+     *
+     * @defaultValue false
+     */
+    visible?: boolean;
+    /**
+     * The HTML cell element that the modal is currently being displayed for. The field is unset
+     * when the modal is not being displayed.
+     */
     cell?: HTMLTableCellElement | null;
-    colIndex?: number;
-    event?: string;
-    height?: ReturnType<typeof useElementBounding>['height'];
-    left?: ReturnType<typeof useElementBounding>['left'];
+    /**
+     * The HTML parent element that the modal is currently being displayed for. The field is unset
+     * when the modal is not being displayed.
+     */
     parent?: HTMLElement;
+    /**
+     * The index of the column that the modal is currently being displayed for. The field is
+     * unset when the modal is not being displayed.
+     */
+    colIndex?: number;
+    /**
+     * The index of the row that the modal is currently being displayed for. The field is
+     * unset when the modal is not being displayed.
+     */
     rowIndex?: number;
-    visible?: boolean;
-    width?: ReturnType<typeof useElementBounding>['width'];
+    /**
+     * The component to use to render the modal. If not provided, the table will
+     * try to use the column's `modalComponent` property, if set. If that is not set,
+     * the table will not display a modal.
+     *
+     * @see {@link TableColumn.modalComponent}
+     */
     component?: string;
+    /**
+     * Additional properties to pass to the table's modal component.
+     */
     componentProps?: Record<string, any>;
-};
+    /**
+     * Reactive bottom value for the modal's bounding box. The field is unset when the modal
+     * is not being displayed.
+     */
+    bottom?: ReturnType<typeof useElementBounding>['bottom'];
+    /**
+     * Reactive height value for the modal's bounding box. The field is unset when the modal
+     * is not being displayed.
+     */
+    height?: ReturnType<typeof useElementBounding>['height'];
+    /**
+     * Reactive left value for the modal's bounding box. The field is unset when the modal
+     * is not being displayed.
+     */
+    left?: ReturnType<typeof useElementBounding>['left'];
+    /**
+     * Reactive width value for the modal's bounding box. The field is unset when the modal
+     * is not being displayed.
+     */
+    width?: ReturnType<typeof useElementBounding>['width'];
+}
 /**
  * Table modal component props definition.
  * @public
  */
-export type TableModalProps = {
+export interface TableModalProps {
+    /**
+     * Additional arbitrary properties that can be passed to the modal component.
+     */
     [key: string]: any;
+    /**
+     * The index of the column that the modal is currently being displayed for.
+     */
     colIndex: number;
+    /**
+     * The index of the row that the modal is currently being displayed for.
+     */
     rowIndex: number;
+    /**
+     * The store for managing the current table's state.
+     */
     store: ReturnType<typeof createTableStore>;
-};
+}
 //# sourceMappingURL=index.d.ts.map

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

@@ -92,7 +92,6 @@ export const createTableStore = (initData) => {
         });
         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) => {
@@ -165,6 +164,24 @@ export const createTableStore = (initData) => {
                 return 'inherit';
             }
         };
+        const updateGanttBar = (event) => {
+            // update the local gantt bar cache
+            const ganttBar = rows.value[event.rowIndex]?.gantt;
+            if (ganttBar) {
+                if (event.type === 'resize') {
+                    if (event.edge === 'start') {
+                        ganttBar.startIndex = event.value;
+                    }
+                    else if (event.edge === 'end') {
+                        ganttBar.endIndex = event.value;
+                    }
+                }
+                else if (event.type === 'bar') {
+                    ganttBar.startIndex = event.start;
+                    ganttBar.endIndex = event.end;
+                }
+            }
+        };
         return {
             // state
             columns,
@@ -191,6 +208,7 @@ export const createTableStore = (initData) => {
             setCellData,
             setCellText,
             toggleRowExpand,
+            updateGanttBar,
         };
     });
     return createStore();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stonecrop/atable",
-  "version": "0.4.12",
+  "version": "0.4.13",
   "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.12",
-    "@stonecrop/utilities": "0.4.12"
+    "@stonecrop/themes": "0.4.13",
+    "@stonecrop/utilities": "0.4.13"
   },
   "devDependencies": {
     "@microsoft/api-documenter": "^7.26.10",

package/src/components/AGanttCell.vue

@@ -26,16 +26,26 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, useTemplateRef } from 'vue'
 import { useDraggable, useElementBounding } from '@vueuse/core'
+import { ref, computed, onMounted, useTemplateRef } from 'vue'
+
+import { createTableStore } from '../stores/table'
 
 const {
+	store,
+	columnsCount,
+	rowIndex,
+	colIndex,
 	start,
 	end,
 	colspan = 1,
 	label,
 	color,
 } = defineProps<{
+	store: ReturnType<typeof createTableStore>
+	columnsCount: number
+	rowIndex: number
+	colIndex: number
 	start?: number
 	end?: number
 	colspan?: number
@@ -53,12 +63,6 @@ onMounted(() => {
 	}
 })
 
-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')
@@ -67,7 +71,7 @@ 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 currentEnd = ref(end || currentStart.value + colspan)
 const dragStartData = ref({ startX: 0, startPos: 0 })
 
 const pixelsPerColumn = computed(() => (colspan > 0 ? totalBarWidth.value / colspan : 0))
@@ -108,8 +112,7 @@ const { isDragging: isLeftDragging } = useDraggable(leftHandleRef, {
 			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 })
+			store.updateGanttBar({ rowIndex, colIndex, type: 'resize', edge: 'start', value: newStart })
 		}
 	},
 })
@@ -127,7 +130,10 @@ const { isDragging: isRightDragging } = useDraggable(rightHandleRef, {
 		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))
+			const newEnd = Math.max(
+				currentStart.value + 1,
+				Math.min(columnsCount, dragStartData.value.startPos + deltaColumns)
+			)
 			barRef.value.style.width = `${((newEnd - currentStart.value) / colspan) * 100}%`
 		}
 	},
@@ -135,11 +141,13 @@ const { isDragging: isRightDragging } = useDraggable(rightHandleRef, {
 		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))
+			const newEnd = Math.max(
+				currentStart.value + 1,
+				Math.min(columnsCount, dragStartData.value.startPos + deltaColumns)
+			)
 			currentEnd.value = newEnd
 
-			emit('update:end', newEnd)
-			emit('drag', { type: 'resize', edge: 'end', value: newEnd })
+			store.updateGanttBar({ rowIndex, colIndex, type: 'resize', edge: 'end', value: newEnd })
 		}
 	},
 })
@@ -159,7 +167,7 @@ const { isDragging: isBarDragging } = useDraggable(barRef, {
 			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))
+			const newStart = Math.max(0, Math.min(dragStartData.value.startPos + deltaColumns, columnsCount - barWidth))
 			barRef.value.style.left = `${(newStart / colspan) * 100}%`
 		}
 	},
@@ -174,17 +182,15 @@ const { isDragging: isBarDragging } = useDraggable(barRef, {
 			if (newStart < 0) {
 				newStart = 0
 				newEnd = barWidth
-			} else if (newEnd > colspan) {
-				newEnd = colspan
+			} else if (newEnd > columnsCount) {
+				newEnd = columnsCount
 				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 })
+			store.updateGanttBar({ rowIndex, colIndex, type: 'bar', start: newStart, end: newEnd })
 		}
 	},
 })