@stonecrop/aform 0.6.0 → 0.6.1

package/dist/aform.d.ts

@@ -264,6 +264,11 @@ type?: string | undefined;
 width?: string | undefined;
 pinned?: boolean | undefined;
 resizable?: boolean | undefined;
+sortable?: boolean | undefined;
+filterable?: boolean | undefined;
+filterType?: "text" | "select" | "number" | "date" | "dateRange" | "checkbox" | "component" | undefined;
+filterOptions?: any[] | undefined;
+filterComponent?: string | undefined;
 cellComponent?: string | undefined;
 cellComponentProps?: Record<string, any> | undefined;
 modalComponent?: string | ((context: CellContext) => string) | undefined;
@@ -283,6 +288,11 @@ type?: string | undefined;
 width?: string | undefined;
 pinned?: boolean | undefined;
 resizable?: boolean | undefined;
+sortable?: boolean | undefined;
+filterable?: boolean | undefined;
+filterType?: "text" | "select" | "number" | "date" | "dateRange" | "checkbox" | "component" | undefined;
+filterOptions?: any[] | undefined;
+filterComponent?: string | undefined;
 cellComponent?: string | undefined;
 cellComponentProps?: Record<string, any> | undefined;
 modalComponent?: string | ((context: CellContext) => string) | undefined;
@@ -382,6 +392,7 @@ width?: number | undefined;
 label?: string | undefined;
 }[]>;
 display: WritableComputedRef<TableDisplay[], TableDisplay[]>;
+filterState: Ref<FilterStateRecord, FilterStateRecord>;
 ganttBars: Ref<    {
 id: string;
 rowIndex: number;
@@ -453,14 +464,36 @@ endIndex?: number | undefined;
 colspan?: number | undefined;
 } | undefined;
 }[]>;
+sortState: Ref<    {
+column: number | null;
+direction: "asc" | "desc" | null;
+}, {
+column: number | null;
+direction: "asc" | "desc" | null;
+} | {
+column: number | null;
+direction: "asc" | "desc" | null;
+}>;
 table: ComputedRef<    {}>;
 updates: Ref<Record<string, string>, Record<string, string>>;
+filteredRows: ComputedRef<    {
+originalIndex: number;
+indent?: number | undefined;
+parent?: number | undefined;
+gantt?: {
+color?: string | undefined;
+startIndex?: number | undefined;
+endIndex?: number | undefined;
+colspan?: number | undefined;
+} | undefined;
+}[]>;
 hasPinnedColumns: ComputedRef<boolean>;
 isGanttView: ComputedRef<boolean>;
 isTreeView: ComputedRef<boolean>;
 isDependencyGraphEnabled: ComputedRef<boolean>;
 numberedRowWidth: ComputedRef<string>;
 zeroColumn: ComputedRef<boolean>;
+clearFilter: (colIndex: number) => void;
 closeModal: (event: MouseEvent) => void;
 createConnection: (fromHandleId: string, toHandleId: string, options?: {
 style?: ConnectionPath["style"];
@@ -508,12 +541,14 @@ 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;
+setFilter: (colIndex: number, filter: FilterState) => void;
+sortByColumn: (colIndex: number) => void;
 toggleRowExpand: (rowIndex: number) => void;
 unregisterConnectionHandle: (handleId: string) => void;
 unregisterGanttBar: (barId: string) => void;
 updateGanttBar: (event: GanttDragEvent) => void;
 updateRows: (newRows: TableRow[]) => void;
-}, "columns" | "config" | "connectionHandles" | "connectionPaths" | "ganttBars" | "modal" | "rows" | "updates">, Pick<{
+}, "columns" | "config" | "connectionHandles" | "connectionPaths" | "filterState" | "ganttBars" | "modal" | "rows" | "sortState" | "updates">, Pick<{
 columns: Ref<    {
 name: string;
 align?: CanvasTextAlign | undefined;
@@ -523,6 +558,11 @@ type?: string | undefined;
 width?: string | undefined;
 pinned?: boolean | undefined;
 resizable?: boolean | undefined;
+sortable?: boolean | undefined;
+filterable?: boolean | undefined;
+filterType?: "text" | "select" | "number" | "date" | "dateRange" | "checkbox" | "component" | undefined;
+filterOptions?: any[] | undefined;
+filterComponent?: string | undefined;
 cellComponent?: string | undefined;
 cellComponentProps?: Record<string, any> | undefined;
 modalComponent?: string | ((context: CellContext) => string) | undefined;
@@ -542,6 +582,11 @@ type?: string | undefined;
 width?: string | undefined;
 pinned?: boolean | undefined;
 resizable?: boolean | undefined;
+sortable?: boolean | undefined;
+filterable?: boolean | undefined;
+filterType?: "text" | "select" | "number" | "date" | "dateRange" | "checkbox" | "component" | undefined;
+filterOptions?: any[] | undefined;
+filterComponent?: string | undefined;
 cellComponent?: string | undefined;
 cellComponentProps?: Record<string, any> | undefined;
 modalComponent?: string | ((context: CellContext) => string) | undefined;
@@ -641,6 +686,7 @@ width?: number | undefined;
 label?: string | undefined;
 }[]>;
 display: WritableComputedRef<TableDisplay[], TableDisplay[]>;
+filterState: Ref<FilterStateRecord, FilterStateRecord>;
 ganttBars: Ref<    {
 id: string;
 rowIndex: number;
@@ -712,14 +758,36 @@ endIndex?: number | undefined;
 colspan?: number | undefined;
 } | undefined;
 }[]>;
+sortState: Ref<    {
+column: number | null;
+direction: "asc" | "desc" | null;
+}, {
+column: number | null;
+direction: "asc" | "desc" | null;
+} | {
+column: number | null;
+direction: "asc" | "desc" | null;
+}>;
 table: ComputedRef<    {}>;
 updates: Ref<Record<string, string>, Record<string, string>>;
+filteredRows: ComputedRef<    {
+originalIndex: number;
+indent?: number | undefined;
+parent?: number | undefined;
+gantt?: {
+color?: string | undefined;
+startIndex?: number | undefined;
+endIndex?: number | undefined;
+colspan?: number | undefined;
+} | undefined;
+}[]>;
 hasPinnedColumns: ComputedRef<boolean>;
 isGanttView: ComputedRef<boolean>;
 isTreeView: ComputedRef<boolean>;
 isDependencyGraphEnabled: ComputedRef<boolean>;
 numberedRowWidth: ComputedRef<string>;
 zeroColumn: ComputedRef<boolean>;
+clearFilter: (colIndex: number) => void;
 closeModal: (event: MouseEvent) => void;
 createConnection: (fromHandleId: string, toHandleId: string, options?: {
 style?: ConnectionPath["style"];
@@ -767,12 +835,14 @@ 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;
+setFilter: (colIndex: number, filter: FilterState) => void;
+sortByColumn: (colIndex: number) => void;
 toggleRowExpand: (rowIndex: number) => void;
 unregisterConnectionHandle: (handleId: string) => void;
 unregisterGanttBar: (barId: string) => void;
 updateGanttBar: (event: GanttDragEvent) => void;
 updateRows: (newRows: TableRow[]) => void;
-}, "display" | "table" | "hasPinnedColumns" | "isGanttView" | "isTreeView" | "isDependencyGraphEnabled" | "numberedRowWidth" | "zeroColumn">, Pick<{
+}, "display" | "table" | "filteredRows" | "hasPinnedColumns" | "isGanttView" | "isTreeView" | "isDependencyGraphEnabled" | "numberedRowWidth" | "zeroColumn">, Pick<{
 columns: Ref<    {
 name: string;
 align?: CanvasTextAlign | undefined;
@@ -782,6 +852,11 @@ type?: string | undefined;
 width?: string | undefined;
 pinned?: boolean | undefined;
 resizable?: boolean | undefined;
+sortable?: boolean | undefined;
+filterable?: boolean | undefined;
+filterType?: "text" | "select" | "number" | "date" | "dateRange" | "checkbox" | "component" | undefined;
+filterOptions?: any[] | undefined;
+filterComponent?: string | undefined;
 cellComponent?: string | undefined;
 cellComponentProps?: Record<string, any> | undefined;
 modalComponent?: string | ((context: CellContext) => string) | undefined;
@@ -801,6 +876,11 @@ type?: string | undefined;
 width?: string | undefined;
 pinned?: boolean | undefined;
 resizable?: boolean | undefined;
+sortable?: boolean | undefined;
+filterable?: boolean | undefined;
+filterType?: "text" | "select" | "number" | "date" | "dateRange" | "checkbox" | "component" | undefined;
+filterOptions?: any[] | undefined;
+filterComponent?: string | undefined;
 cellComponent?: string | undefined;
 cellComponentProps?: Record<string, any> | undefined;
 modalComponent?: string | ((context: CellContext) => string) | undefined;
@@ -900,6 +980,7 @@ width?: number | undefined;
 label?: string | undefined;
 }[]>;
 display: WritableComputedRef<TableDisplay[], TableDisplay[]>;
+filterState: Ref<FilterStateRecord, FilterStateRecord>;
 ganttBars: Ref<    {
 id: string;
 rowIndex: number;
@@ -971,14 +1052,36 @@ endIndex?: number | undefined;
 colspan?: number | undefined;
 } | undefined;
 }[]>;
+sortState: Ref<    {
+column: number | null;
+direction: "asc" | "desc" | null;
+}, {
+column: number | null;
+direction: "asc" | "desc" | null;
+} | {
+column: number | null;
+direction: "asc" | "desc" | null;
+}>;
 table: ComputedRef<    {}>;
 updates: Ref<Record<string, string>, Record<string, string>>;
+filteredRows: ComputedRef<    {
+originalIndex: number;
+indent?: number | undefined;
+parent?: number | undefined;
+gantt?: {
+color?: string | undefined;
+startIndex?: number | undefined;
+endIndex?: number | undefined;
+colspan?: number | undefined;
+} | undefined;
+}[]>;
 hasPinnedColumns: ComputedRef<boolean>;
 isGanttView: ComputedRef<boolean>;
 isTreeView: ComputedRef<boolean>;
 isDependencyGraphEnabled: ComputedRef<boolean>;
 numberedRowWidth: ComputedRef<string>;
 zeroColumn: ComputedRef<boolean>;
+clearFilter: (colIndex: number) => void;
 closeModal: (event: MouseEvent) => void;
 createConnection: (fromHandleId: string, toHandleId: string, options?: {
 style?: ConnectionPath["style"];
@@ -1026,12 +1129,14 @@ 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;
+setFilter: (colIndex: number, filter: FilterState) => void;
+sortByColumn: (colIndex: number) => void;
 toggleRowExpand: (rowIndex: number) => void;
 unregisterConnectionHandle: (handleId: string) => void;
 unregisterGanttBar: (barId: string) => void;
 updateGanttBar: (event: GanttDragEvent) => void;
 updateRows: (newRows: TableRow[]) => void;
-}, "closeModal" | "createConnection" | "deleteConnection" | "getCellData" | "getCellDisplayValue" | "getConnectionsForBar" | "getFormattedValue" | "getHandlesForBar" | "getHeaderCellStyle" | "getIndent" | "getRowExpandSymbol" | "isRowGantt" | "isRowVisible" | "registerConnectionHandle" | "registerGanttBar" | "resizeColumn" | "setCellData" | "setCellText" | "toggleRowExpand" | "unregisterConnectionHandle" | "unregisterGanttBar" | "updateGanttBar" | "updateRows">>;
+}, "clearFilter" | "closeModal" | "createConnection" | "deleteConnection" | "getCellData" | "getCellDisplayValue" | "getConnectionsForBar" | "getFormattedValue" | "getHandlesForBar" | "getHeaderCellStyle" | "getIndent" | "getRowExpandSymbol" | "isRowGantt" | "isRowVisible" | "registerConnectionHandle" | "registerGanttBar" | "resizeColumn" | "setCellData" | "setCellText" | "setFilter" | "sortByColumn" | "toggleRowExpand" | "unregisterConnectionHandle" | "unregisterGanttBar" | "updateGanttBar" | "updateRows">>;
 
 /**
  * Schema structure for defining fieldsets inside AForm
@@ -1055,6 +1160,25 @@ export declare type FieldsetSchema = BaseSchema & {
     collapsible?: boolean;
 };
 
+/**
+ * Represents the state of a single filter
+ * @public
+ */
+declare interface FilterState {
+    /** The main filter value */
+    value: any;
+    /** Start value for date range filters */
+    startValue?: any;
+    /** End value for date range filters */
+    endValue?: any;
+}
+
+/**
+ * Record mapping column indices to their filter states
+ * @public
+ */
+declare type FilterStateRecord = Record<number, FilterState>;
+
 /**
  * Schema structure for defining forms inside AForm
  * @public
@@ -1306,6 +1430,32 @@ export declare interface TableColumn {
      * @defaultValue false
      */
     resizable?: boolean;
+    /**
+     * Control whether the column should be sortable.
+     *
+     * @defaultValue true
+     */
+    sortable?: boolean;
+    /**
+     * Control whether the column should be filterable and define filter configuration.
+     *
+     * @defaultValue true
+     */
+    filterable?: boolean;
+    /**
+     * The type of filter for the column.
+     *
+     * @defaultValue 'text'
+     */
+    filterType?: 'text' | 'select' | 'number' | 'date' | 'dateRange' | 'checkbox' | 'component';
+    /**
+     * Options for select-type filters.
+     */
+    filterOptions?: any[];
+    /**
+     * Custom component for filtering.
+     */
+    filterComponent?: string;
     /**
      * The component to use to render the cell for the column. If not provided, the table will
      * render the default `<td>` element.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stonecrop/aform",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "license": "MIT",
   "type": "module",
   "author": {
@@ -38,8 +38,8 @@
     "@vueuse/core": "^14.0.0",
     "@vueuse/components": "^14.0.0",
     "vue": "^3.5.22",
-    "@stonecrop/utilities": "0.6.0",
-    "@stonecrop/themes": "0.6.0"
+    "@stonecrop/themes": "0.6.1",
+    "@stonecrop/utilities": "0.6.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.38.0",
@@ -60,11 +60,11 @@
     "vite": "^7.1.1",
     "vitest": "^4.0.5",
     "vue-router": "^4.6.3",
-    "@stonecrop/atable": "0.6.0",
+    "@stonecrop/atable": "0.6.1",
     "stonecrop-rig": "0.2.22"
   },
   "peerDependencies": {
-    "@stonecrop/atable": "0.6.0"
+    "@stonecrop/atable": "0.6.1"
   },
   "publishConfig": {
     "access": "public"