@illinois-grad/grad-vue 2.3.2 → 2.3.3

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

@@ -48,7 +48,7 @@ declare const __VLS_export: <T extends TableRow, C extends TableColumn<T>>(__VLS
         selectedRows?: string[];
     }) & {
         "onRow-click"?: ((link: string) => any) | undefined;
-        "onCell-change"?: ((payload: CellChangePayload<T>) => any) | undefined;
+        "onCell-change"?: ((payload: CellChangePayload<T, Extract<keyof T, string>>) => any) | undefined;
         "onUpdate:sortField"?: ((value: keyof T | undefined) => any) | undefined;
         "onUpdate:sortOrder"?: ((value: 1 | -1 | undefined) => any) | undefined;
         "onUpdate:filter"?: ((value: Partial<Record<keyof T, any>>) => any) | undefined;

package/dist/components/table/TableColumn.d.ts

@@ -52,7 +52,8 @@ export interface EditableColumnConfig {
      */
     labelKey?: string;
 }
-export interface TableColumn<T extends TableRow, K = keyof T> {
+type ColumnKey<T> = Extract<keyof T, string>;
+export interface TableColumn<T extends TableRow, K extends ColumnKey<T> = ColumnKey<T>> {
     key: K;
     label: string;
     sortable?: boolean;
@@ -74,3 +75,4 @@ export interface TableColumn<T extends TableRow, K = keyof T> {
 export interface TableRow extends Record<string, any> {
     key: string;
 }
+export {};

package/dist/compose/useTableChanges.d.ts

@@ -1,35 +1,46 @@
+import { ComputedRef } from "vue";
 import { TableColumn, TableRow } from "../components/table/TableColumn.ts";
 import { EventHookOn } from "@vueuse/core";
+export type ColumnKey<R extends TableRow> = Extract<keyof R, string>;
 /**
  * Represents a single cell change in the table
  */
-export interface CellChange<T = any, K extends TableRow = TableRow> {
+export interface CellChange<R extends TableRow = TableRow, K extends ColumnKey<R> = ColumnKey<R>> {
     rowKey: string;
-    columnKey: keyof K;
+    columnKey: K;
+    row: R;
     /**
      * Represents the original value before user changes.
      */
-    previousValue: T;
+    previousValue: R[K];
     /**
      * New value from the change. This will be null in events
      * if the new value is the same as the original.
      */
-    newValue: T;
+    newValue: R[K];
+    error?: string;
+}
+export interface CellChangeEvent<R extends TableRow = TableRow, K extends ColumnKey<R> = ColumnKey<R>> {
+    rowKey: string;
+    columnKey: K;
+    row: R;
+    previousValue: R[K];
+    newValue: R[K] | null;
     error?: string;
 }
 /**
  * Payload for the `trackChange` function
  */
-export interface CellChangePayload<T extends TableRow = TableRow> {
+export interface CellChangePayload<T extends TableRow = TableRow, K extends ColumnKey<T> = ColumnKey<T>> {
     row: T;
-    column: TableColumn<T>;
-    value: any;
-    previousValue: any;
+    column: TableColumn<T, K>;
+    value: T[K];
+    previousValue: T[K];
 }
 /**
  * Map of changes organized by row key and column key
  */
-export type ChangeMap = Map<string, Map<string, CellChange>>;
+export type ChangeMap<T extends TableRow> = Map<string, Map<ColumnKey<T>, CellChange<T>>>;
 /**
  * Return type for the useTableChanges composable
  */
@@ -37,27 +48,27 @@ export interface UseTableChangesReturn<T extends TableRow> {
     /**
      * Track a change to a cell
      */
-    trackChange: (payload: CellChangePayload<any>) => void;
+    trackChange: <K extends ColumnKey<T>>(payload: CellChangePayload<T, K>) => void;
     /**
-     * Get all changes as an array
+     * Reactive array of all current changes
      */
-    getChanges: () => CellChange[];
+    changes: ComputedRef<CellChange<T>[]>;
     /**
      * Get changes organized by row
      */
     getChangesByRow: () => Map<string, Partial<T>>;
     /**
-     * Check if there are any changes
+     * Reactive flag indicating whether there are any changes
      */
-    hasChanges: () => boolean;
+    hasChanges: ComputedRef<boolean>;
     /**
      * Check if a specific cell has changes
      */
-    hasChange: (rowKey: string, columnKey: keyof T) => boolean;
+    hasChange: <K extends ColumnKey<T>>(rowKey: string, columnKey: K) => boolean;
     /**
      * Get the changed value for a specific cell, or undefined if no change
      */
-    getChange: (rowKey: string, columnKey: keyof T) => any | undefined;
+    getChange: <K extends ColumnKey<T>>(rowKey: string, columnKey: K) => T[K] | undefined;
     /**
      * Clear all tracked changes
      */
@@ -71,31 +82,35 @@ export interface UseTableChangesReturn<T extends TableRow> {
      */
     applyChangesToData: (data: T[]) => T[];
     /**
-     * Get count of changed cells
+     * Reactive count of changed cells
+     */
+    changeCount: ComputedRef<number>;
+    /**
+     * Reactive flag indicating whether any cell has an error
      */
-    changeCount: () => number;
+    hasErrors: ComputedRef<boolean>;
     /**
      * Set an error message for a specific cell
      */
-    setError: (rowKey: string, columnKey: keyof T, error: string) => void;
+    setError: <K extends ColumnKey<T>>(rowKey: string, columnKey: K, error: string) => void;
     /**
      * Clear the error for a specific cell
      */
-    clearError: (rowKey: string, columnKey: keyof T) => void;
+    clearError: <K extends ColumnKey<T>>(rowKey: string, columnKey: K) => void;
     /**
      * Get the error message for a specific cell, or undefined if no error
      */
-    getError: (rowKey: string, columnKey: keyof T) => string | undefined;
+    getError: <K extends ColumnKey<T>>(rowKey: string, columnKey: K) => string | undefined;
     /**
      * Check if a specific cell has an error
      */
-    hasError: (rowKey: string, columnKey: keyof T) => boolean;
+    hasError: <K extends ColumnKey<T>>(rowKey: string, columnKey: K) => boolean;
     /**
      * Event emitted when a cell changes.
      *
      * `newValue` will be null if the cell's value is the same as the original.
      */
-    onChange: EventHookOn<CellChange<any, T>>;
+    onChange: EventHookOn<CellChangeEvent<T>>;
 }
 /**
  * Composable for tracking changes to table data
@@ -112,11 +127,16 @@ export interface UseTableChangesReturn<T extends TableRow> {
  *
  * // Track a change when user edits a cell
  * function handleCellChange(row, column, newValue) {
- *   changes.trackChange(row.key, column.key, newValue, row[column.key]);
+ *   changes.trackChange({
+ *     row,
+ *     column,
+ *     value: newValue,
+ *     previousValue: row[column.key],
+ *   });
  * }
  *
  * // Get all changes to submit
- * const changedData = changes.getChanges();
+ * const changedData = changes.changes.value;
  * await api.updateProducts(changedData);
  *
  * // Apply user changes to fresh data from server