aio-table 13.0.0 → 14.0.1

package/filter.css

@@ -1,36 +1,25 @@
-.aio-filter-modal-size>.aio-popup {
+.aio-table-filter-modal-size>.aio-popup {
     padding: 12px;
     width: 100vw;
     max-width: 772px;
     max-height: 100vh;
 }
 
-.aio-filter-add-button {
+.aio-table-filter-button {
     display: flex;
     align-items: center;
     gap: 3px;
     border: none;
     background: none;
     height: 24px;
-    font-size: 12px;
-    cursor: pointer;
-}
-
-.aio-filter-icon-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 36px;
-    height: 36px;
-    border-radius: 4px;
-    border: none;
+    font-size: inherit;
     cursor: pointer;
 }
-.aio-filter-remove-button{
+.aio-table-filter-remove-button{
     background:none;
     flex-shrink:0;
 }
-.aio-filter-button {
+.aio-table-filter-button {
     background: none;
     border: none;
     display: flex;
@@ -46,7 +35,7 @@
     position: relative;
 }
 
-.aio-filter-badge {
+.aio-table-filter-badge {
     background: orange;
     color: #fff;
     min-width: 16px;
@@ -61,40 +50,41 @@
     right: -3px;
 }
 
-.aio-filter-modal .aio-popup-header {
+.aio-table-filter-modal .aio-popup-header {
     height: 36px;
 }
 
-.aio-filter-body {
-    padding: 6px;
-    gap: 12px;
+.aio-table-filter-body {
+    gap: 0.8em;
     display: flex;
     flex-direction: column;
+    padding:0.8em;
 }
-.aio-filter-body-rtl{
+.aio-table-filter-body-rtl{
     direction:rtl;
 }
 
-.aio-filter-body .af-current-filters {
+.aio-table-filter-body .aio-table-current-filters {
     display: flex;
     flex-direction: column;
 }
-.aio-filter-body .af-current-filters .aio-input{
+.aio-table-filter-body .aio-table-current-filters .aio-input{
     min-height:36px;
 }
 
-.aio-filter-body .af-filter-collections {
+.aio-table-filter-body .aio-table-saved-filters {
     width: 100%;
     display: flex;
     flex-direction: column;
     gap: 6px;
     height: 100%;
+    padding:0.4em;
 }
 
-.aio-filter-body .af-filter-collections .af-collection {
+.aio-table-filter-body .aio-table-saved-filters .aio-table-saved-filter {
     display: flex;
     flex-direction: column;
-    background: #f8f8f8;
+    background: #eee;
     flex-shrink: 0;
     border: 1px solid #f4f4f4;
     border-radius: 6px;
@@ -102,69 +92,63 @@
     color: #333;
 }
 
-.aio-filter-button:disabled {
+.aio-table-filter-button:disabled {
     opacity: 0.5;
     cursor: not-allowed;
 }
 
-.aio-filter-active-button {
+.aio-table-filter-active-button {
     background: #0069ff;
     color: #fff;
 }
 
-.aio-filter-panel {
+.aio-table-filter-panel {
     position: relative;
-    padding: 6px;
     display: flex;
     flex-direction: column;
     border: 1px solid #ddd;
     border-radius: 6px;
 }
-.aio-filter-panel button{
-    color:inherit;
-}
-
-.af-collections-empty {
+.aio-table-saved-filters-empty {
     font-size: 12px;
     width: 100%;
     display: flex;
     justify-content: center;
 }
 
-.aio-filter-panel-header {
+.aio-table-filter-panel-header {
     display: flex;
     align-items: center;
+    padding:0 0.8em;
+    height:3em;
 }
 
-.aio-filter-panel-label {
+.aio-table-filter-panel-label {
     flex: 1;
-    font-weight: bold;
-    font-size: 12px;
-    margin-bottom:12px;
 }
 
-.aio-filter-row {
+.aio-table-filter-row {
     display: flex;
     align-items: center;
-    gap: 3px;
-    padding:3px;
+    gap: 0.4em;
+    padding:0.4em;
+    margin:0.4em;
+    margin-top:0;
     background:#f2f2f2;
     border-radius:6px;
     position: relative;
-    margin-bottom:6px;
-    overflow-x: hidden;
 }
 
-.aio-filter-row .aio-input {
+.aio-table-filter-row .aio-input {
     flex: 1;
     padding:0 12px;
 }
-.aio-filter-row .aio-input.aio-filter-operator-select{
+.aio-table-filter-row .aio-input.aio-table-filter-operator-select{
     flex:none;
-    width:108px;
+    width:10em;
 }
 
-.aio-filter-toolbar {
+.aio-table-filter-toolbar {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -172,34 +156,60 @@
 }
 
 
-.aio-filter-save-modal {
+.aio-table-filter-save-modal {
     padding: 12px;
     display: flex;
     flex-direction: column;
     gap: 12px;
 }
 
-.aio-filter-save-modal-footer {
+.aio-table-filter-save-modal-footer {
     display: flex;
     gap: 6px;
 }
 
 
-.aio-filter-backdrop {
+.aio-table-filter-backdrop {
     background: rgba(0, 0, 0, 0.7);
 }
 
 
 
 
-.aio-filter-row .aio-input{
+.aio-table-filter-row .aio-input{
     border:none;
 }
 
 /*******************************tags**************************************/
+.aio-table-filter-tags{
+    padding:0.4em;
+    border-radius:4px;
+    display:flex;
+    flex-wrap:wrap;
+    gap:0.4em
+}
+.aio-table-filter-tag{
+    color: #666;
+    width: fit-content;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    white-space: nowrap;
+    max-width: 100%;
+    cursor: pointer;
+    background: #fff;
+    flex-shrink: 0;
+    gap: 0.4em;
+    font-size:0.9em;
+    border-radius:0.2em;
+    padding:0.2em 0.8em;
+}
+.aio-table-filter-panel{
+    background:#fff;
+}
 /*************************************************************************/
 /*******************************saved filter******************************/
-.af-collection {
+.aio-table-saved-filter {
     display: flex;
     flex-direction: column;
     background: #f8f8f8;
@@ -210,15 +220,20 @@
     color: #333;
 }
 
-.af-collection-header {
-    height: 36px;
+.aio-table-saved-filter-header {
+    height: 3em;
     display: flex;
     align-items: center;
-    gap: 6px;
+    gap: 0.4em;
     padding: 0 12px;
 }
-
-.af-collection-remove {
+.aio-table-saved-filters-empty{
+    height:4em;
+    display:flex;
+    align-items: center;
+    justify-content: center;
+}
+.aio-table-filter-remove-button {
     position: absolute;
     background: #fff;
     width: 24px;
@@ -232,14 +247,36 @@
     cursor:pointer;
 }
 
-.af-collection-body {
+.aio-table-saved-filter-body {
     display: flex;
     gap: 6px;
-    padding: 6px;
+    padding: 0.4em;
+    padding-top:0;
 }
 
-.af-collection-name {
+.aio-table-saved-filter-name {
     flex: 1;
     padding-inline-start: 16px;
 }
 /*************************************************************************/
+.aio-table-saved-filter .ai-form-tags{
+    padding:0.4em;
+    border-radius:4px;
+}
+
+
+.aio-table-filter-inline-label{
+    flex:1;
+    padding:0 12px;
+    box-sizing: border-box;
+}
+.aio-table-filter-label{
+    top:0;
+    z-index:10;
+    padding:0 12px;
+    box-sizing: border-box;
+}
+.aio-table-filter-modal .aio-popup{
+    background:#ddd;
+    max-width: 772px !important;
+}

package/index.css

@@ -3,7 +3,6 @@
     --aio-table-color: #0069ff;
     --aio-table-transition: 0.3s;
 }
-
 .aio-table-rtl {
     direction: rtl;
 }
@@ -35,7 +34,6 @@
 .aio-table {
     box-sizing: border-box;
     border-radius: 4px;
-    font-size: 12px;
     height: fit-content;
     display: flex;
     flex-direction: column;
@@ -72,7 +70,8 @@
 .aio-table-title {
     padding: 0 12px;
     font-weight: bold;
-    height: 36px;
+    height: 3em;
+    gap:0.4em;
     display: flex;
     align-items: center;
     box-sizing: border-box;
@@ -92,7 +91,7 @@
 .aio-table-row {
     display: flex;
     min-width: fit-content;
-    height:40px;
+    height:3em;
 }
 .aio-table-cell {
     padding: 6px 12px;
@@ -164,9 +163,9 @@
     background: #f8f8f8;
     z-index: 100;
     box-sizing: border-box;
-    min-height: 36px;
-    gap: 6px;
-    padding: 6px;
+    height:3em;
+    gap: 0.4em;
+    padding: 0.4em;
 }
 
 .aio-table-toolbar-content {
@@ -178,16 +177,17 @@
 }
 
 .aio-table-toolbar-button {
-    height: 36px;
+    width:3em;
+    height: 3em;
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 36px;
     border: 1px solid #ddd;
     background:#fff;
     border-radius:100%;
-    width:36px;
     padding:0 !important;
+    font-size:inherit;
+    flex-shrink:0;
 }
 .aio-table-remove {
     border: none;
@@ -218,32 +218,12 @@
 .aio-table-search {
     flex: 1;
     height: 100%;
-    padding: 6px;
     box-sizing: border-box;
+    border:none;
 }
 
 .aio-table-search .aio-input {
     background: #fff;
     border: none;
-    min-height: 30px;
 }
 
-.aio-filter-inline-label{
-    flex:1;
-    padding:0 12px;
-    box-sizing: border-box;
-}
-.aio-filter-label{
-    top:0;
-    z-index:10;
-    padding:0 12px;
-    font-size:12px;
-    box-sizing: border-box;
-}
-.aio-filter-modal .aio-popup{
-    background:#ddd;
-    max-width: 772px !important;
-}
-.af-current-filters .aio-input{
-    min-width:168px;
-}

package/index.d.ts

@@ -1,90 +1,149 @@
 import { type ReactNode } from "react";
-import { I_AIOInput,I_formInput } from "aio-input";
+import { type I_AIOInput } from "aio-input";
 import "./index.css";
 type I_rowOption<T, R> = (p: I_rowDetail<T>) => R;
-type I_cellOption<T, R> = ((p: I_cellDetail<T>) => R) | string;
 type I_rowDetail<T> = {
     row: T;
     rowIndex: number;
-    isFirst: boolean;
-    isLast: boolean;
-};
-type I_cellDetail<T> = I_rowDetail<T> & {
-    column: I_table_column<T>;
-    change: (newRow: T) => void;
-    date: number[];
 };
 export type I_table_column<T> = {
-    jalali?: boolean;
     title?: any;
     sort?: true | I_table_sort<T>;
     filter?: boolean;
     search?: boolean;
-    id: string;
     width?: any;
     minWidth?: any;
+    id: string;
     excel?: string | boolean;
     justify?: boolean;
-    value?: string;
-    attrs?: I_cellOption<T, {
-        [attrs: string]: any;
-    }>;
-    before?: I_cellOption<T, ReactNode>;
-    after?: I_cellOption<T, ReactNode>;
-    subtext?: I_cellOption<T, ReactNode>;
-    template?: I_cellOption<T, ReactNode>;
-    titleAttrs?: {
-        [attrs: string]: any;
-    };
-    type?: 'text' | 'number' | 'date' | 'select' | 'multiSelect' | 'checkbox';
     filterInput?: I_AIOInput & {
         type: I_table_column<any>["type"];
         label?: string;
     };
     filterOperators?: ('less' | 'lessequal' | 'more' | 'moreequal' | 'equal' | 'notEqual' | 'contain' | 'notContain')[];
     show?: boolean;
-    pattern?: string;
-    data?: any;
     toggle?: boolean;
+    data?: any;
+    type?: 'text' | 'number' | 'date' | 'jalaliDate' | 'select' | 'multiSelect' | 'checkbox';
+    template?: string | ((p: {
+        row: T;
+        column: I_table_column<T>;
+        rowIndex: number;
+        change: (newRow: T) => void;
+        value: any;
+        dateObject?: {
+            year: number;
+            month: number;
+            day: number;
+            hour: number;
+            minute: number;
+            second: number;
+        };
+    }) => ReactNode | undefined);
+    before?: string | ((p: {
+        row: T;
+        column: I_table_column<T>;
+        rowIndex: number;
+        change: (newRow: T) => void;
+        value: any;
+        dateObject?: {
+            year: number;
+            month: number;
+            day: number;
+            hour: number;
+            minute: number;
+            second: number;
+        };
+    }) => ReactNode | undefined);
+    after?: string | ((p: {
+        row: T;
+        column: I_table_column<T>;
+        rowIndex: number;
+        change: (newRow: T) => void;
+        value: any;
+        dateObject?: {
+            year: number;
+            month: number;
+            day: number;
+            hour: number;
+            minute: number;
+            second: number;
+        };
+    }) => ReactNode | undefined);
+    subtext?: string | ((p: {
+        row: T;
+        column: I_table_column<T>;
+        rowIndex: number;
+        change: (newRow: T) => void;
+        value: any;
+        dateObject?: {
+            year: number;
+            month: number;
+            day: number;
+            hour: number;
+            minute: number;
+            second: number;
+        };
+    }) => ReactNode | undefined);
+    value?: string | ((p: {
+        row: T;
+        column: I_table_column<T>;
+        rowIndex: number;
+    }) => string | undefined);
+    pattern?: string;
+    affix?: string;
+    prefix?: string;
+    cellAttrs?: (p: {
+        row: T;
+        column: I_table_column<T>;
+        value: any;
+        rowIndex: number;
+    }) => any;
+    titleAttrs?: (column: I_table_column<T>) => any;
+};
+export type I_table_filter_saved = {
+    name: string;
+    data: any;
+};
+export type I_table_filter = {
+    onChange?: (newFilters: I_table_filter_item[]) => boolean;
+    getSavedItems?: () => Promise<{
+        name: string;
+        data: any;
+    }[]>;
+    setSavedItems?: (savedItems: {
+        name: string;
+        data: any;
+    }[]) => Promise<boolean>;
+    items?: I_table_filter_item[];
+    modalAttrs?: any;
+    cache?: string;
+};
+export type I_table_filter_item = {
+    columnId: string;
+    value: any;
+    operator?: 'less' | 'lessequal' | 'more' | 'moreequal' | 'equal' | 'notEqual' | 'contain' | 'notContain';
+    id: string;
 };
 export type I_table<T> = {
+    inlineSort?: boolean;
     fa?: boolean;
     addText?: ReactNode | ((value: any) => ReactNode);
     columns?: I_table_column<T>[];
     excel?: string | ((value: any[]) => any[]);
-    getValue?: {
-        [key: string]: (p: {
-            row: T;
-            column: I_table_column<T>;
-            rowIndex: number;
-            change: (newRow: T) => void;
-        }) => any;
-    };
     headerAttrs?: any;
-    onAdd?: () => Promise<T | undefined>;
-    onRemove?: (p: {
-        row: T;
-        rowIndex?: number;
-    }) => Promise<boolean>;
     onChangePaging?: (newPaging: I_table_paging) => void;
     onChangeSort?: (sorts: I_table_sort<T>[]) => Promise<boolean>;
-    onSwap?: true | ((newValue: T[], startRow: T, endRow: T) => void);
+    onSwap?: (newValue: T[], startRow: T, endRow: T) => void;
     onSearch?: true | ((searchValue: string) => void);
     paging?: I_table_paging;
     removeText?: string;
-    rowOption?: {
-        before?: I_rowOption<T, ReactNode>;
-        after?: I_rowOption<T, ReactNode>;
-        attrs?: I_rowOption<T, {
-            [attrs: string]: any;
-        }>;
-        template?: I_rowOption<T, ReactNode>;
-    };
-    cellAttrs?: string | ((p: {
-        row: T;
-        column: I_table_column<T>;
-        rowIndex: number;
-    }) => any);
+    rowAttrs?: I_rowOption<T, {
+        [attrs: string]: any;
+    }>;
+    rowBefore?: I_rowOption<T, ReactNode>;
+    rowAfter?: I_rowOption<T, ReactNode>;
+    rowTemplate?: I_rowOption<T, ReactNode>;
     rowsTemplate?: (rows: T[]) => ReactNode;
     toolbar?: ReactNode | (() => ReactNode);
     toolbarAttrs?: any;
@@ -95,14 +154,41 @@ export type I_table<T> = {
     style?: any;
     attrs?: any;
     placeholder?: ReactNode;
-    columnsFilter?: I_table_columns_filter;
-    formFilter?: I_table_form_filter;
+    filter?: I_table_filter;
     gap?: [number, number];
     striped?: [string, string];
+    onChangeColumns?: (v: I_table_column<any>[]) => void;
     columnOption?: {
-        [key in keyof I_table_column<any>]?: (p: I_cellDetail<any>) => any;
+        [key in keyof I_table_column<T>]?: (p: {
+            column: I_table_column<T>;
+            row: T;
+            rowIndex: number;
+        }) => any;
     };
-    onChangeColumns?: (v: I_table_column<any>[]) => void;
+    templates?: {
+        [key: string]: (p: {
+            row: T;
+            column: I_table_column<T>;
+            rowIndex: number;
+            change: (newRow: T) => void;
+            value: any;
+            dateObject?: {
+                year: number;
+                month: number;
+                day: number;
+                hour: number;
+                minute: number;
+                second: number;
+            };
+        }) => ReactNode;
+    };
+    cellAttrs?: (p: {
+        row: T;
+        column: I_table_column<T>;
+        value: any;
+        rowIndex: number;
+    }) => any;
+    titleAttrs?: (column: I_table_column<T>) => any;
 };
 declare const AIOTable: <T>(props: I_table<T>) => import("react/jsx-runtime").JSX.Element;
 export default AIOTable;
@@ -126,6 +212,8 @@ export declare const useSort: <T>(p: {
     getSortedRows: (rows: T[]) => T[];
     changeSort: (sortId: string, changeObject: Partial<I_table_sort<T>>) => void;
     changeSorts: (sorts: I_table_sort<T>[]) => Promise<void>;
+    renderSortArrow: (option: I_table_sort<T> | false, inline?: boolean) => import("react/jsx-runtime").JSX.Element;
+    getSortByColumn: (column: I_table_column<T>) => I_table_sort<T> | false;
 };
 export type I_table_paging = {
     serverSide?: boolean;
@@ -139,44 +227,3 @@ export type I_pagingHook<T> = {
     getPagedRows: (rows: T[]) => T[];
     changePaging: (obj: Partial<I_table_paging>) => void;
 };
-export declare const usePaging: <T>(p: {
-    rows: T[];
-    paging?: I_table_paging;
-    onChange?: (newPaging: I_table_paging) => void;
-}) => I_pagingHook<T>;
-export type I_table_filter_saved = {
-    name: string;
-    data: any;
-};
-export type I_table_columns_filter = {
-    onChange?: (newFilters: I_table_columns_filter_item[]) => boolean;
-    getSavedItems?: () => Promise<{
-        name: string;
-        data: any;
-    }[]>;
-    setSavedItems?: (savedItems: {
-        name: string;
-        data: any;
-    }[]) => Promise<boolean>;
-    items?: I_table_columns_filter_item[];
-    after?: () => ReactNode;
-};
-export type I_table_form_filter = {
-    onChange?: (obj: any) => boolean;
-    getSavedItems?: () => Promise<{
-        name: string;
-        data: any;
-    }[]>;
-    setSavedItems?: (saved: {
-        name: string;
-        data: any;
-    }[]) => Promise<boolean>;
-    items?: I_formInput<any>[];
-    value?: any;
-};
-export type I_table_columns_filter_item = {
-    columnId: string;
-    value: any;
-    operator?: 'less' | 'lessequal' | 'more' | 'moreequal' | 'equal' | 'notEqual' | 'contain' | 'notContain';
-    id: string;
-};