aio-table 9.0.0 → 9.1.1

package/index.css

@@ -0,0 +1,226 @@
+:root {
+    --aio-table-color: #0069ff;
+    --aio-table-transition: 0.3s;
+}
+
+.aio-table-rtl {
+    direction: rtl;
+}
+
+.aio-table .aio-table-text {
+    height: 100%;
+}
+
+.aio-table-color input {
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    border: none;
+    outline: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+}
+
+.aio-table-color img {
+    display: none;
+}
+
+.aio-table-color input::-webkit-color-swatch {
+    border: none;
+    padding: 0;
+}
+
+.aio-table {
+    box-sizing: border-box;
+    border-radius: 4px;
+    font-size: 12px;
+    height: fit-content;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    background: #eee;
+    color: #888;
+    padding: 0;
+    border: 1px solid #eee;
+    gap: 0;
+}
+
+.aio-table .aio-table {
+    color: inherit;
+}
+
+.aio-table-unit {
+    width: 100%;
+    flex: 1;
+    overflow: auto;
+    display:flex;
+    flex-direction: column;
+}
+
+.aio-table-header {
+    top: 0;
+    display: flex;
+    position: sticky;
+    position: -webkit-sticky;
+    z-index: 10;
+    background: #f8f8f8;
+    min-width: fit-content;
+}
+
+.aio-table-title {
+    padding: 0 12px;
+    font-weight: bold;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    flex-shrink: 0;
+    overflow: hidden;
+}
+
+.aio-table-title-justify {
+    padding: 0;
+    justify-content: center;
+}
+.aio-table-rows{
+    display:flex;
+    flex-direction: column;
+    gap:1px;
+}
+.aio-table-row {
+    display: flex;
+    min-width: fit-content;
+}
+.aio-table-cell {
+    padding: 6px 12px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    min-height: 24px;
+    gap:6px;
+    background:#fff;
+}
+
+.aio-table-cell-before{
+    display:flex;
+    align-items: center;
+    justify-content: center;
+}
+.aio-table-cell-after{
+    display:flex;
+    align-items: center;
+    justify-content: center;
+}
+.aio-table-cell-value{
+    flex:1;
+    display:flex;
+    flex-direction: column;
+}
+.aio-table-cell-value.has-subtext:after {
+    content: attr(data-subtext);
+    font-size: 85%;
+    opacity: 0.7;
+}
+.aio-table-cell .aio-table-container {
+    width: 100%;
+}
+
+.aio-table-cell .aio-table {
+    width: 100%;
+    background: none;
+    border: none;
+    border-radius: 0;
+    background: none;
+    height: 100%;
+    min-height: 30px;
+}
+
+.aio-table-cell .aio-table input {
+    padding: 0;
+    background: none;
+}
+
+.aio-table-cell-justify.aio-table-cell{
+    padding: 0 !important;
+}
+.aio-table-cell-justify .aio-table-cell-value{
+    padding: 0;
+    align-items: center;
+}
+
+.aio-table-cell-justify > input {
+    text-align: center;
+}
+
+.aio-table-toolbar {
+    left: 0;
+    display: flex;
+    width: 100%;
+    align-items: center;
+    background: #f8f8f8;
+    z-index: 100;
+    box-sizing: border-box;
+    min-height: 36px;
+}
+
+.aio-table-toolbar-content {
+    font-weight: bold;
+    padding: 0 12px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+}
+
+.aio-table-toolbar-button {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 36px;
+    border: none;
+    background: none;
+}
+
+
+
+.aio-table-remove {
+    border: none;
+    width: 36px;
+    background: none;
+    color: inherit;
+    align-items: center;
+    display: flex;
+}
+
+.aio-table-remove-title {
+    border: none;
+    width: 36px;
+    background: none;
+    color: inherit;
+}
+
+.aio-table-border-h {
+    height: 1px;
+    flex-shrink: 0;
+}
+
+.aio-table-border-v {
+    width: 1px;
+    flex-shrink: 0;
+}
+
+.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,139 +1,98 @@
-import { ReactNode } from "react";
-import * as UT from 'aio-utils';
-import "./index.css";
-type I_rows<T> = {
-    rows: T[];
-    searchedRows: T[];
-    sortedRows: T[];
-    pagedRows: T[];
-};
-export type AI_table_param<T> = {
-    row: T;
-    column: I_column<T>;
-    rowIndex: number;
-};
-export type I_column<T> = {
-    title?: any;
-    value?: any;
-    sort?: true | I_sort<T>;
-    search?: boolean;
-    id?: string;
-    _id?: string;
-    width?: any;
-    minWidth?: any;
-    titleAttrs?: {
-        [key: string]: any;
-    } | string;
-    template?: string | ((p: {
-        row: T;
-        column: I_column<T>;
-        rowIndex: number;
-        change: (newRow: T) => void;
-    }) => ReactNode);
-    excel?: string | boolean;
-    justify?: boolean;
-    cellAttrs?: {
-        [key: string]: any;
-    } | ((p: {
-        row: T;
-        rowIndex: number;
-        column: I_column<T>;
-    }) => any) | string;
-};
-export type I_sort<T> = {
-    active?: boolean;
-    dir?: 'dec' | 'inc';
-    title?: ReactNode;
-    type?: 'string' | 'number';
-    sortId?: string;
-    getValue?: (row: T) => any;
-};
-export type I_context<T> = {
-    rootProps: I_AIOTable<T>;
-    columns: I_column<T>[];
-    ROWS: I_rows<T>;
-    add: () => void;
-    remove: (row: T, index: number) => void;
-    search: (searchValue: string) => void;
-    exportToExcel: () => void;
-    sorts: I_sort<T>[];
-    setSorts: (newSorts: I_sort<T>[]) => void;
-    sortRows: (rows: T[], sorts: I_sort<T>[]) => T[];
-    excelColumns: I_column<T>[];
-    getRowAttrs: (row: T, rowIndex: number) => any;
-    getCellAttrs: I_getCellAttrs<T>;
-    getDynamics: any;
-    DragColumns: UT.I_useDrag;
-    getIcon: UT.GetSvg["getIcon"];
-};
-export type I_getCellAttrs<T> = (p: {
-    row: T;
-    rowIndex: number;
-    column: I_column<T>;
-    type: 'title' | 'cell';
-}) => any;
-export type AI_table_paging = {
-    serverSide?: boolean;
-    number: number;
-    size: number;
-    length?: number;
-    sizes?: number[];
-};
-export type I_AIOTable<T> = {
-    addText?: ReactNode | ((value: any) => ReactNode);
-    columnGap?: number;
-    columns?: I_column<T>[];
-    excel?: string | ((value: any[]) => any[]);
-    getValue?: {
-        [key: string]: (p: {
-            row: T;
-            column: I_column<T>;
-            rowIndex: number;
-            change: (newRow: T) => void;
-        }) => any;
-    };
-    headerAttrs?: any;
-    onAdd?: () => Promise<T | undefined>;
-    onChangePaging?: (newPaging: AI_table_paging) => void;
-    onChangeSort?: (sorts: I_sort<T>[]) => Promise<boolean>;
-    onSwap?: true | ((newValue: T[], startRow: T, endRow: T) => void);
-    onSearch?: true | ((searchValue: string) => void);
-    paging?: AI_table_paging;
-    removeText?: string;
-    rowAfter?: (p: {
-        row: T;
-        rowIndex: number;
-    }) => ReactNode;
-    rowAttrs?: (p: {
-        row: T;
-        rowIndex: number;
-    }) => any;
-    rowBefore?: (p: {
-        row: T;
-        rowIndex: number;
-    }) => ReactNode;
-    rowGap?: number;
-    rowsTemplate?: (rows: T[]) => ReactNode;
-    rowTemplate?: (p: {
-        row: T;
-        rowIndex: number;
-        isLast: boolean;
-    }) => ReactNode;
-    toolbar?: ReactNode | (() => ReactNode);
-    toolbarAttrs?: any;
-    tabIndex?: number;
-    value: T[];
-    onChange?: (v: T[]) => void;
-    className?: string;
-    style?: any;
-    attrs?: any;
-    onRemove?: true | ((p: {
-        row: T;
-        action?: Function;
-        rowIndex?: number;
-        parent?: T;
-    }) => Promise<boolean | void>);
-    placeholder?: ReactNode;
-};
-declare const AIOTable: <T>(rootProps: I_AIOTable<T>) => JSX.Element;
-export default AIOTable;
+import { ReactNode } from "react";
+import "./index.css";
+import { I_filter, I_filter_item, I_filter_saved_item, I_paging, I_sort } from "../../aio-component-utils";
+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;
+    isDate: boolean;
+};
+export type I_table_paging = I_paging;
+export type I_table_sort<T> = I_sort<T>;
+export type I_table_filter = I_filter;
+export type I_table_filter_item = I_filter_item;
+export type I_table_filter_saved_item = I_filter_saved_item;
+export type I_table_column<T> = {
+    title?: any;
+    sort?: true | I_table_sort<T>;
+    filterId?: string;
+    search?: boolean;
+    id?: string;
+    _id?: string;
+    width?: any;
+    minWidth?: any;
+    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' | 'month' | 'day' | 'hour' | 'minute';
+};
+export type I_table<T> = {
+    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);
+    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);
+    rowsTemplate?: (rows: T[]) => ReactNode;
+    toolbar?: ReactNode | (() => ReactNode);
+    toolbarAttrs?: any;
+    tabIndex?: number;
+    value: T[];
+    onChange?: (v: T[]) => void;
+    className?: string;
+    style?: any;
+    attrs?: any;
+    placeholder?: ReactNode;
+    filter?: I_table_filter;
+    gap?: [number, number];
+};
+declare const AIOTable: <T>(props: I_table<T>) => JSX.Element;
+export default AIOTable;