aio-table 12.0.2 → 14.0.0

package/filter.css

@@ -0,0 +1,282 @@
+.aio-table-filter-modal-size>.aio-popup {
+    padding: 12px;
+    width: 100vw;
+    max-width: 772px;
+    max-height: 100vh;
+}
+
+.aio-table-filter-button {
+    display: flex;
+    align-items: center;
+    gap: 3px;
+    border: none;
+    background: none;
+    height: 24px;
+    font-size: inherit;
+    cursor: pointer;
+}
+.aio-table-filter-remove-button{
+    background:none;
+    flex-shrink:0;
+}
+.aio-table-filter-button {
+    background: none;
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    height: 30px;
+    border-radius: 4px;
+    color: #0069ff;
+    gap: 6px;
+    padding: 0 12px;
+    cursor: pointer;
+    position: relative;
+}
+
+.aio-table-filter-badge {
+    background: orange;
+    color: #fff;
+    min-width: 16px;
+    height: 12px;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 10px;
+    position: absolute;
+    top: -6px;
+    right: -3px;
+}
+
+.aio-table-filter-modal .aio-popup-header {
+    height: 36px;
+}
+
+.aio-table-filter-body {
+    gap: 0.8em;
+    display: flex;
+    flex-direction: column;
+    padding:0.8em;
+}
+.aio-table-filter-body-rtl{
+    direction:rtl;
+}
+
+.aio-table-filter-body .aio-table-current-filters {
+    display: flex;
+    flex-direction: column;
+}
+.aio-table-filter-body .aio-table-current-filters .aio-input{
+    min-height:36px;
+}
+
+.aio-table-filter-body .aio-table-saved-filters {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    height: 100%;
+    padding:0.4em;
+}
+
+.aio-table-filter-body .aio-table-saved-filters .aio-table-saved-filter {
+    display: flex;
+    flex-direction: column;
+    background: #eee;
+    flex-shrink: 0;
+    border: 1px solid #f4f4f4;
+    border-radius: 6px;
+    position: relative;
+    color: #333;
+}
+
+.aio-table-filter-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.aio-table-filter-active-button {
+    background: #0069ff;
+    color: #fff;
+}
+
+.aio-table-filter-panel {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    border: 1px solid #ddd;
+    border-radius: 6px;
+}
+.aio-table-saved-filters-empty {
+    font-size: 12px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+
+.aio-table-filter-panel-header {
+    display: flex;
+    align-items: center;
+    padding:0 0.8em;
+    height:3em;
+}
+
+.aio-table-filter-panel-label {
+    flex: 1;
+}
+
+.aio-table-filter-row {
+    display: flex;
+    align-items: center;
+    gap: 0.4em;
+    padding:0.4em;
+    margin:0.4em;
+    margin-top:0;
+    background:#f2f2f2;
+    border-radius:6px;
+    position: relative;
+}
+
+.aio-table-filter-row .aio-input {
+    flex: 1;
+    padding:0 12px;
+}
+.aio-table-filter-row .aio-input.aio-table-filter-operator-select{
+    flex:none;
+    width:10em;
+}
+
+.aio-table-filter-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+}
+
+
+.aio-table-filter-save-modal {
+    padding: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.aio-table-filter-save-modal-footer {
+    display: flex;
+    gap: 6px;
+}
+
+
+.aio-table-filter-backdrop {
+    background: rgba(0, 0, 0, 0.7);
+}
+
+
+
+
+.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******************************/
+.aio-table-saved-filter {
+    display: flex;
+    flex-direction: column;
+    background: #f8f8f8;
+    flex-shrink: 0;
+    border: 1px solid #f4f4f4;
+    border-radius: 6px;
+    position: relative;
+    color: #333;
+}
+
+.aio-table-saved-filter-header {
+    height: 3em;
+    display: flex;
+    align-items: center;
+    gap: 0.4em;
+    padding: 0 12px;
+}
+.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;
+    border: 1px solid #ddd;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 100%;
+    top: -6px;
+    cursor:pointer;
+}
+
+.aio-table-saved-filter-body {
+    display: flex;
+    gap: 6px;
+    padding: 0.4em;
+    padding-top:0;
+}
+
+.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

@@ -1,8 +1,8 @@
+@import './filter.css';
 :root {
     --aio-table-color: #0069ff;
     --aio-table-transition: 0.3s;
 }
-
 .aio-table-rtl {
     direction: rtl;
 }
@@ -34,7 +34,6 @@
 .aio-table {
     box-sizing: border-box;
     border-radius: 4px;
-    font-size: 12px;
     height: fit-content;
     display: flex;
     flex-direction: column;
@@ -71,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;
@@ -91,7 +91,7 @@
 .aio-table-row {
     display: flex;
     min-width: fit-content;
-    height:40px;
+    height:3em;
 }
 .aio-table-cell {
     padding: 6px 12px;
@@ -177,15 +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;
@@ -216,13 +218,11 @@
 .aio-table-search {
     flex: 1;
     height: 100%;
-    padding: 6px;
     box-sizing: border-box;
 }
 
 .aio-table-search .aio-input {
     background: #fff;
     border: none;
-    min-height: 30px;
 }
 

package/index.d.ts

@@ -1,72 +1,129 @@
 import { type ReactNode } from "react";
-import * as UT from 'aio-utils';
+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_paging = UT.I_paging;
-export type I_table_sort<T> = UT.I_sort<T>;
-export type I_table_filter = UT.I_filter;
-export type I_table_filter_item = UT.I_filter_item;
-export type I_table_filter_saved_item = UT.I_filter_collection;
 export type I_table_column<T> = {
     title?: any;
     sort?: true | I_table_sort<T>;
-    jalali?: boolean;
-    filter?: {
-        operators?: UT.I_filter_operator[];
-        options?: {
-            text: string;
-            value: any;
-        }[];
-        type?: I_table_column<any>["type"];
-    };
+    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;
+    filterInput?: I_AIOInput & {
+        type: I_table_column<any>["type"];
+        label?: string;
     };
-    type?: 'text' | 'number' | 'date';
+    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;
+};
+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: {
@@ -87,11 +144,6 @@ export type I_table<T> = {
         }>;
         template?: I_rowOption<T, ReactNode>;
     };
-    cellAttrs?: string | ((p: {
-        row: T;
-        column: I_table_column<T>;
-        rowIndex: number;
-    }) => any);
     rowsTemplate?: (rows: T[]) => ReactNode;
     toolbar?: ReactNode | (() => ReactNode);
     toolbarAttrs?: any;
@@ -105,10 +157,74 @@ export type I_table<T> = {
     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;
+export type I_table_sort<T> = {
+    active?: boolean;
+    dir?: 'dec' | 'inc';
+    title?: ReactNode;
+    sortId: string;
+    getValue?: (row: T) => any;
+};
+export declare const useSort: <T>(p: {
+    fa?: boolean;
+    sorts: I_table_sort<T>[];
+    rows: any[];
+    onChangeRows?: (rows: any) => void;
+    onChangeSort?: (sorts: I_table_sort<T>[]) => Promise<boolean | undefined>;
+}) => {
+    sorts: I_table_sort<T>[];
+    setSorts: import("react").Dispatch<import("react").SetStateAction<I_table_sort<T>[]>>;
+    renderSortButton: (attrs?: any, limitTo?: string) => import("react/jsx-runtime").JSX.Element;
+    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;
+    number: number;
+    size: number;
+    length?: number;
+    sizes?: number[];
+};
+export type I_pagingHook<T> = {
+    render: () => ReactNode;
+    getPagedRows: (rows: T[]) => T[];
+    changePaging: (obj: Partial<I_table_paging>) => void;
+};
+export declare function sortRows<T>(rows: T[], sorts: I_table_sort<T>[]): T[];