@illinois-grad/grad-vue 2.0.2 → 2.1.1

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

@@ -1,6 +1,7 @@
 import { TableColumn, TableRow } from "./table/TableColumn.ts";
 import { VNode } from "vue";
 import { UseFilteringReturn } from "../compose/useFiltering.ts";
+import { CellChangePayload, UseTableChangesReturn } from "../compose/useTableChanges.ts";
 export interface BulkAction {
     /**
      * Action identifier
@@ -35,6 +36,11 @@ declare const __VLS_export: <T extends TableRow, C extends TableColumn<T>>(__VLS
          */
         bulkSelectionEnabled?: boolean;
         bulkActions?: BulkAction[];
+        /**
+         * Optional change tracker for editable tables
+         * Pass a composable from useTableChanges() to track user edits
+         */
+        changeTracker?: UseTableChangesReturn<T>;
     } & {
         sortField?: keyof T;
         sortOrder?: 1 | -1;
@@ -42,6 +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;
         "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;
@@ -58,6 +65,7 @@ declare const __VLS_export: <T extends TableRow, C extends TableColumn<T>>(__VLS
     emit: {
         (e: "row-click", link: string): void;
         (e: "bulk-action", actionId: string, selectedKeys: string[]): void;
+        (e: "cell-change", payload: CellChangePayload<T>): void;
     } & (((event: "update:sortField", value: keyof T | undefined) => void) & ((event: "update:sortOrder", value: 1 | -1 | undefined) => void) & ((event: "update:filter", value: Partial<Record<keyof T, any>>) => void) & ((event: "update:selectedRows", value: string[]) => void));
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;

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

@@ -0,0 +1,41 @@
+interface Props {
+    /**
+     * Title for the popover.
+     */
+    title?: string;
+    /**
+     * Label for year select.
+     */
+    yearLabel?: string;
+    /**
+     * Label for period select.
+     */
+    periodLabel?: string;
+    termYears?: string[];
+    termNames?: string[];
+}
+type __VLS_Props = Props;
+type __VLS_ModelProps = {
+    modelValue?: {
+        year: string;
+        name: string;
+    };
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: {
+        year: string;
+        name: string;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: {
+        year: string;
+        name: string;
+    }) => any) | undefined;
+}>, {
+    title: string;
+    termYears: string[];
+    termNames: string[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/table/GTableBody.vue.d.ts

@@ -1,5 +1,6 @@
 import { type VNode } from "vue";
 import { TableColumn, TableRow } from "./TableColumn.ts";
+import { UseTableChangesReturn } from "../../compose/useTableChanges.ts";
 declare const __VLS_export: <T extends TableRow, C extends TableColumn<T>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<{
         data: T[];
@@ -11,9 +12,16 @@ declare const __VLS_export: <T extends TableRow, C extends TableColumn<T>>(__VLS
         startIndex: number;
         bulkSelectionEnabled?: boolean;
         selectedRows?: string[];
+        tableId: string;
+        changeTracker?: UseTableChangesReturn<T>;
     } & {
-        "onToggle-row"?: ((rowKey: string, shiftKey: boolean) => any) | undefined;
         "onRow-click"?: ((link: string) => any) | undefined;
+        "onCell-change"?: ((payload: {
+            row: T;
+            column: C;
+            value: any;
+        }) => any) | undefined;
+        "onToggle-row"?: ((rowKey: string, shiftKey: boolean) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -23,6 +31,11 @@ declare const __VLS_export: <T extends TableRow, C extends TableColumn<T>>(__VLS
     emit: {
         (e: "row-click", link: string): void;
         (e: "toggle-row", rowKey: string, shiftKey: boolean): void;
+        (e: "cell-change", payload: {
+            row: T;
+            column: C;
+            value: any;
+        }): void;
     };
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;

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

@@ -21,14 +21,55 @@ export interface ToggleColumnFilter {
     label: string;
     description?: string;
 }
+export interface EditableColumnConfig {
+    /**
+     * Type of editable control. Defaults to "input".
+     */
+    type?: "input" | "select";
+    /**
+     * Attributes to apply to the input element (type, pattern, step, min, max, etc.)
+     * Only applies when type is "input" or undefined.
+     */
+    inputAttributes?: Record<string, any>;
+    /**
+     * Options for select dropdown. Required when type is "select".
+     */
+    options?: Array<{
+        label: string;
+        value: any;
+    }>;
+    /**
+     * Text to display before the input (e.g., "$" for currency)
+     */
+    prefix?: string;
+    /**
+     * Text to display after the input (e.g., "kg" for weight)
+     */
+    suffix?: string;
+    /**
+     * Key of the column to use as the identifying label for the input's aria-labelledby.
+     * If not provided, the input will only be labeled by its column header.
+     */
+    labelKey?: string;
+}
 export interface TableColumn<T extends TableRow, K = keyof T> {
     key: K;
     label: string;
     sortable?: boolean;
     filter?: TableColumnFilter;
+    /**
+     * Custom render function for the column data.
+     * Cannot be used with `editable`.
+     */
     display?: (row: T) => string | VNode;
     tdClass?: string | ((row: T) => string);
     trClass?: string | ((row: T) => string);
+    /**
+     * Configuration for editable columns.
+     * When set, the column will render as an input element.
+     * Cannot be used with `display`.
+     */
+    editable?: EditableColumnConfig;
 }
 export interface TableRow extends Record<string, any> {
     key: string;

package/dist/components/term/GTermSelectorControl.vue.d.ts

@@ -0,0 +1,44 @@
+interface Props {
+    /**
+     * List of possible term years. Defaults to ["2026"].
+     */
+    termYears?: string[];
+    /**
+     * List of possible term names. Defaults to ["Spring", "Summer", "Fall"].
+     */
+    termNames?: string[];
+    /**
+     * Label for year select. Defaults to "Select Year".
+     */
+    yearLabel?: string;
+    /**
+     * Label for period select. Defaults to "Term".
+     */
+    periodLabel?: string;
+}
+type __VLS_Props = Props;
+type __VLS_ModelProps = {
+    modelValue?: {
+        year: string;
+        name: string;
+    };
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: {
+        year: string;
+        name: string;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: {
+        year: string;
+        name: string;
+    }) => any) | undefined;
+}>, {
+    termYears: string[];
+    termNames: string[];
+    yearLabel: string;
+    periodLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/compose/useTableChanges.d.ts

@@ -0,0 +1,96 @@
+import { TableColumn, TableRow } from "../components/table/TableColumn.ts";
+/**
+ * Represents a single cell change in the table
+ */
+export interface CellChange<T = any> {
+    rowKey: string;
+    columnKey: string;
+    previousValue: T;
+    newValue: T;
+}
+/**
+ * Payload for the `trackChange` function
+ */
+export interface CellChangePayload<T extends TableRow = TableRow> {
+    row: T;
+    column: TableColumn<T>;
+    value: any;
+    previousValue: any;
+}
+/**
+ * Map of changes organized by row key and column key
+ */
+export type ChangeMap = Map<string, Map<string, CellChange>>;
+/**
+ * Return type for the useTableChanges composable
+ */
+export interface UseTableChangesReturn<T extends Record<string, any>> {
+    /**
+     * Track a change to a cell
+     */
+    trackChange: (payload: CellChangePayload<any>) => void;
+    /**
+     * Get all changes as an array
+     */
+    getChanges: () => CellChange[];
+    /**
+     * Get changes organized by row
+     */
+    getChangesByRow: () => Map<string, Partial<T>>;
+    /**
+     * Check if there are any changes
+     */
+    hasChanges: () => boolean;
+    /**
+     * Check if a specific cell has changes
+     */
+    hasChange: (rowKey: string, columnKey: keyof T) => boolean;
+    /**
+     * Get the changed value for a specific cell, or undefined if no change
+     */
+    getChange: (rowKey: string, columnKey: keyof T) => any | undefined;
+    /**
+     * Clear all tracked changes
+     */
+    clearChanges: () => void;
+    /**
+     * Clear changes for a specific row
+     */
+    clearRowChanges: (rowKey: string) => void;
+    /**
+     * Apply tracked changes to a new dataset (for merging with updated data)
+     */
+    applyChangesToData: (data: T[]) => T[];
+    /**
+     * Get count of changed cells
+     */
+    changeCount: () => number;
+}
+/**
+ * Composable for tracking changes to table data
+ *
+ * This composable helps manage user edits to table data by:
+ * - Tracking which cells have been modified
+ * - Storing both old and new values
+ * - Providing methods to retrieve just the changes (not full data)
+ * - Allowing changes to be applied to updated data for real-time syncing
+ *
+ * @example
+ * ```typescript
+ * const changes = useTableChanges<ProductRow>();
+ *
+ * // Track a change when user edits a cell
+ * function handleCellChange(row, column, newValue) {
+ *   changes.trackChange(row.key, column.key, newValue, row[column.key]);
+ * }
+ *
+ * // Get all changes to submit
+ * const changedData = changes.getChanges();
+ * await api.updateProducts(changedData);
+ *
+ * // Apply user changes to fresh data from server
+ * const freshData = await api.getProducts();
+ * const mergedData = changes.applyChangesToData(freshData);
+ * ```
+ */
+export declare function useTableChanges<T extends Record<string, any> = Record<string, any>>(): UseTableChangesReturn<T>;