@akinon/ai-modal-table 1.0.0

package/dist/cjs/ai-table/components/content.js

@@ -0,0 +1,309 @@
+"use strict";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableContent = void 0;
+const icons_1 = require("@akinon/icons");
+const ui_input_1 = require("@akinon/ui-input");
+const ui_layout_1 = require("@akinon/ui-layout");
+const ui_theme_1 = require("@akinon/ui-theme");
+const cssinjs_1 = require("@ant-design/cssinjs");
+const antd_1 = require("antd");
+const classnames_1 = require("classnames");
+const lodash_es_1 = require("lodash-es");
+const React = require("react");
+const constants_1 = require("../constants");
+const i18n_1 = require("../i18n");
+const mapper_1 = require("./mapper");
+const row_actions_1 = require("./row-actions");
+const { t } = i18n_1.i18n;
+const TableContent = ({ columns, customActionButtons, data, editDataIndexes, expandedRows, onEdit, onToggleExpand, onToggleSelection, rowKey, selectedRows, mapperConfig }) => {
+    const { getPrefixCls, theme } = React.useContext(antd_1.ConfigProvider.ConfigContext);
+    const { token, hashId } = (0, ui_theme_1.useToken)();
+    const baseCls = getPrefixCls('ai-modal-table');
+    const [isEditingPk, setIsEditingPk] = React.useState(constants_1.IS_EDITING_INITIAL_VALUE);
+    const [gradientLinePositions, setGradientLinePositions] = React.useState([]);
+    const [badgePositions, setBadgePositions] = React.useState([]);
+    const [tableHeight, setTableHeight] = React.useState(0);
+    const tableRef = React.useRef(null);
+    const headerRefs = React.useRef(new Map());
+    const rowRefs = React.useRef(new Map());
+    const { dataIndex: mapperDataIndex, onAddItem, onItemChange, onRemoveItem } = mapperConfig || {};
+    const hasMapper = !!mapperDataIndex;
+    const hasEdit = !!onEdit && !!editDataIndexes && editDataIndexes.length > 0;
+    const gradientColumnIndexes = React.useMemo(() => {
+        return columns
+            .map((col, index) => (col.hasGradientLine ? index : -1))
+            .filter(index => index !== -1);
+    }, [columns]);
+    const calculateGradientLinePositions = React.useCallback(() => {
+        const positions = [];
+        gradientColumnIndexes.forEach(colIndex => {
+            const headerCell = headerRefs.current.get(colIndex);
+            if (headerCell) {
+                positions.push(headerCell.offsetLeft);
+            }
+        });
+        return positions;
+    }, [gradientColumnIndexes]);
+    /**
+     * Calculates badge positions for rows with multiple mapper fields.
+     * Badges are displayed on the gradient line to indicate field count.
+     */
+    const calculateGradientBadgePositions = React.useCallback((gradientX) => {
+        const badges = [];
+        if (gradientX === undefined || !hasMapper) {
+            return badges;
+        }
+        data.forEach(row => {
+            const rowId = (0, lodash_es_1.get)(row, rowKey);
+            const rowEl = rowRefs.current.get(rowId);
+            if (rowEl) {
+                const fields = row[mapperDataIndex];
+                const count = Array.isArray(fields) ? fields.length : 0;
+                if (count > 1) {
+                    badges.push({
+                        x: gradientX + 1,
+                        y: rowEl.offsetTop + rowEl.offsetHeight / 2,
+                        count,
+                        rowId
+                    });
+                }
+            }
+        });
+        return badges;
+    }, [hasMapper, mapperDataIndex, data, rowKey]);
+    const calculateAllPositions = React.useCallback(() => {
+        if (tableRef.current) {
+            setTableHeight(tableRef.current.offsetHeight);
+        }
+        const linePositions = calculateGradientLinePositions();
+        setGradientLinePositions(linePositions);
+        if (!hasMapper)
+            return;
+        const badges = calculateGradientBadgePositions(linePositions[0]);
+        setBadgePositions(badges);
+    }, [calculateGradientLinePositions, calculateGradientBadgePositions]);
+    // initial mount and resize changes
+    React.useEffect(() => {
+        calculateAllPositions();
+        window.addEventListener('resize', calculateAllPositions);
+        return () => window.removeEventListener('resize', calculateAllPositions);
+    }, [calculateAllPositions]);
+    React.useEffect(() => {
+        // wait for the DOM to update, then recalculate positions
+        const rafId = requestAnimationFrame(() => {
+            calculateAllPositions();
+        });
+        return () => cancelAnimationFrame(rafId);
+    }, [data, expandedRows, isEditingPk, calculateAllPositions]);
+    const isMapperColumn = (dataIndex) => {
+        return hasMapper && mapperDataIndex === dataIndex;
+    };
+    const checkIsEditing = (rowId) => {
+        return isEditingPk === rowId;
+    };
+    const getRowId = (row) => {
+        return (0, lodash_es_1.get)(row, rowKey);
+    };
+    const isRowSelected = (rowId) => {
+        return selectedRows.includes(rowId);
+    };
+    const isRowExpanded = (rowId) => {
+        return expandedRows.includes(rowId);
+    };
+    const renderMapper = ({ rowId, value, dataIndex }) => {
+        const isExpanded = isRowExpanded(rowId);
+        const displayedValues = isExpanded ? value : value.slice(0, 1);
+        const handleExpand = () => {
+            if (!isExpanded) {
+                onToggleExpand(rowId);
+            }
+        };
+        const handleAddItem = () => {
+            if (!onAddItem)
+                return;
+            handleExpand();
+            onAddItem(rowId, dataIndex);
+        };
+        const handleRemoveItem = (index) => () => {
+            if (!onRemoveItem)
+                return;
+            onRemoveItem({
+                pk: rowId,
+                dataIndex,
+                index
+            });
+        };
+        const handleItemChange = ({ key, value, index }) => {
+            if (!onItemChange)
+                return;
+            // Build the updated array with the changed field value
+            const updatedArray = displayedValues.map((item, i) => i === index
+                ? Object.assign(Object.assign({}, item), { [key]: Object.assign(Object.assign({}, item[key]), { value }) }) : item);
+            onItemChange(rowId, {
+                [dataIndex]: updatedArray
+            });
+        };
+        return (React.createElement(mapper_1.TableMapper, { values: displayedValues, handleAddItem: handleAddItem, handleRemoveItem: handleRemoveItem, handleItemChange: handleItemChange }));
+    };
+    const renderCellValue = ({ column, row, rowId }) => {
+        const dataIndex = (0, lodash_es_1.get)(column, 'dataIndex', '');
+        const value = (0, lodash_es_1.get)(row, dataIndex, '');
+        if (hasEdit &&
+            checkIsEditing(rowId) &&
+            editDataIndexes.includes(dataIndex)) {
+            const handleOnChangeValue = (e) => {
+                const currentValue = e.target.value;
+                onEdit(rowId, {
+                    [dataIndex]: currentValue
+                });
+            };
+            return (React.createElement(ui_input_1.Input, { className: "w-44 h-9", onChange: handleOnChangeValue, value: value }));
+        }
+        if (hasMapper && isMapperColumn(dataIndex)) {
+            return renderMapper({
+                rowId,
+                value,
+                dataIndex
+            });
+        }
+        if (column.render) {
+            return column.render(value, row);
+        }
+        if (typeof value === 'object') {
+            return '';
+        }
+        return value;
+    };
+    const renderExpandButton = (rowId) => {
+        const isExpanded = isRowExpanded(rowId);
+        const handleClick = () => {
+            onToggleExpand(rowId);
+        };
+        return (React.createElement(icons_1.Icon, { size: 10, color: "var(--color-azure-500)", icon: "chevron_down", className: (0, classnames_1.default)('mr-3 cursor-pointer', hashId, {
+                [`${baseCls}__icon--collapsed`]: !isExpanded
+            }), onClick: handleClick }));
+    };
+    const renderTableCells = (row, rowId) => {
+        return columns.map((column, colIndex) => {
+            const isFirstColumn = colIndex === 0;
+            return (React.createElement("td", { className: "text-blue-50 font-normal text-base whitespace-nowrap py-0 px-5", key: `cell-${rowId}-${column.dataIndex || colIndex}` },
+                isFirstColumn && hasMapper && renderExpandButton(rowId),
+                renderCellValue({
+                    column,
+                    row,
+                    rowId
+                })));
+        });
+    };
+    const getRowRef = React.useCallback((rowId) => {
+        return (el) => {
+            if (el) {
+                rowRefs.current.set(rowId, el);
+            }
+        };
+    }, []);
+    const renderTableRow = (row, isLastChild) => {
+        const rowId = getRowId(row);
+        const isSelected = isRowSelected(rowId);
+        return (React.createElement("tr", { ref: getRowRef(rowId), className: (0, classnames_1.default)('border-0 border-b border-solid border-ebonyClay-200 h-12', {
+                'bg-green-952-10': isSelected,
+                'border-b-0': isLastChild
+            }), key: rowId },
+            renderTableCells(row, rowId),
+            React.createElement("td", { className: "text-blue-50 font-normal text-base py-0 px-4 whitespace-nowrap text-center min-w-24" },
+                React.createElement(row_actions_1.ActionButtons, { customActionButtons: customActionButtons, hasEdit: hasEdit, isEditing: checkIsEditing(rowId), isSelected: isSelected, onToggleSelection: onToggleSelection, rowId: rowId, setIsEditingPk: setIsEditingPk }))));
+    };
+    const renderEmptyRow = () => {
+        return (React.createElement("tr", null,
+            React.createElement("td", { className: "font-normal text-center text-gray-500 text-sm py-10 px-4", colSpan: columns.length + 1 }, t('filter.no.match'))));
+    };
+    const renderGradientOverlay = () => {
+        return (React.createElement(React.Fragment, null,
+            gradientLinePositions.map((left, index) => (React.createElement("div", { key: `gradient-line-${index}`, className: `${baseCls}__gradient-line ${hashId} absolute z-10 pointer-events-none rounded-sm top-5`, style: {
+                    left,
+                    height: tableHeight > 0 ? tableHeight - 28 : 'calc(100% - 28px)'
+                } }))),
+            hasMapper &&
+                badgePositions.map(badge => (React.createElement("div", { key: `gradient-badge-${badge.rowId}`, className: `${baseCls}__gradient-badge ${hashId} absolute size-5 text-xs text-neutral-50 font-medium z-20 rounded-full flex items-center justify-center`, style: {
+                        left: badge.x,
+                        top: badge.y,
+                        transform: 'translate(-50%, -50%)'
+                    } }, badge.count)))));
+    };
+    const renderTableRows = () => {
+        if (data.length === 0) {
+            return renderEmptyRow();
+        }
+        return data.map((row, index) => {
+            const isLastChild = index === data.length - 1;
+            return renderTableRow(row, isLastChild);
+        });
+    };
+    const getHeaderRef = React.useCallback((index, hasGradientLine) => {
+        if (!hasGradientLine)
+            return undefined;
+        return (el) => {
+            if (el)
+                headerRefs.current.set(index, el);
+        };
+    }, []);
+    const renderTableHeaders = () => {
+        return (React.createElement("tr", null, columns.map((column, index) => (React.createElement("th", { ref: getHeaderRef(index, column.hasGradientLine), className: "p-5 uppercase font-medium text-xs text-left text-gray-400", key: `header-${column.dataIndex || index}` },
+            React.createElement(ui_layout_1.Flex, { align: "center", gap: 8 },
+                React.createElement("span", null, column.title),
+                column.hasSparkle && (React.createElement(icons_1.Icon, { color: "var(--color-azure-500)", icon: "ai-star", size: 17 }))))))));
+    };
+    const useStyle = (0, cssinjs_1.useStyleRegister)({
+        token: token,
+        path: ['AiModalTableContent'],
+        theme: theme
+    }, () => {
+        const prefixCls = `:where(.${hashId}).${baseCls}`;
+        return {
+            [`${prefixCls}__table-wrapper`]: {
+                maxHeight: '420px',
+                scrollbarGutter: 'stable',
+                '&::-webkit-scrollbar': {
+                    width: '8px',
+                    height: '8px'
+                },
+                '&::-webkit-scrollbar-track': {
+                    background: 'transparent'
+                },
+                '&::-webkit-scrollbar-thumb': {
+                    background: 'var(--color-ebonyClay-50)',
+                    borderRadius: '4px'
+                },
+                '&::-webkit-scrollbar-thumb:hover': {
+                    background: 'var(--color-ebonyClay-300)'
+                },
+                '&::-webkit-scrollbar-corner': {
+                    background: 'transparent'
+                },
+                scrollbarColor: 'var(--color-ebonyClay-200) transparent'
+            },
+            [`${prefixCls}__table-element`]: {
+                borderCollapse: 'collapse'
+            },
+            [`${prefixCls}__icon--collapsed`]: {
+                transform: 'rotate(-90deg)'
+            },
+            [`${prefixCls}__gradient-line`]: {
+                width: '2px',
+                background: 'linear-gradient(180deg, var(--color-red-400) 0%, var(--color-azure-500) 100%)'
+            },
+            [`${prefixCls}__gradient-badge`]: {
+                background: 'linear-gradient(180deg, var(--color-red-400) 0%, var(--color-azure-500) 100%)'
+            }
+        };
+    });
+    return useStyle(React.createElement("div", { className: "bg-ebonyClay-450 rounded-lg overflow-hidden" },
+        React.createElement("div", { className: `${baseCls}__table-wrapper ${hashId} overflow-x-auto overflow-y-auto` },
+            React.createElement("div", { className: "relative" },
+                renderGradientOverlay(),
+                React.createElement("table", { ref: tableRef, className: `${baseCls}__table-element ${hashId} w-full bg-ebonyClay-450` },
+                    React.createElement("thead", null, renderTableHeaders()),
+                    React.createElement("tbody", null, renderTableRows()))))));
+};
+exports.TableContent = TableContent;

package/dist/cjs/ai-table/components/filters.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { TableBaseProps } from '../../types';
+interface TableFiltersProps {
+    filters: TableBaseProps['filters'];
+    filterValues: Record<string, string>;
+    onFilterChange: (key: string, value: string) => void;
+}
+export declare const TableFilters: ({ filters, filterValues, onFilterChange }: TableFiltersProps) => React.JSX.Element | null;
+export {};
+//# sourceMappingURL=filters.d.ts.map

package/dist/cjs/ai-table/components/filters.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filters.d.ts","sourceRoot":"","sources":["../../../../src/ai-table/components/filters.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGlD,UAAU,iBAAiB;IACzB,OAAO,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IACnC,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACrC,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtD;AAED,eAAO,MAAM,YAAY,GAAI,2CAI1B,iBAAiB,6BA4FnB,CAAC"}

package/dist/cjs/ai-table/components/filters.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableFilters = void 0;
+const icons_1 = require("@akinon/icons");
+const ui_input_1 = require("@akinon/ui-input");
+const ui_layout_1 = require("@akinon/ui-layout");
+const lodash_es_1 = require("lodash-es");
+const React = require("react");
+const constants_1 = require("../constants");
+const TableFilters = ({ filters, filterValues, onFilterChange }) => {
+    const [localValues, setLocalValues] = React.useState({});
+    const debouncedOnFilterChange = React.useRef(null);
+    React.useEffect(() => {
+        debouncedOnFilterChange.current = (0, lodash_es_1.debounce)((key, value) => {
+            onFilterChange(key, value);
+        }, constants_1.DEBOUNCE_DELAY);
+        return () => {
+            if (debouncedOnFilterChange.current) {
+                debouncedOnFilterChange.current.cancel();
+            }
+        };
+    }, [onFilterChange]);
+    React.useEffect(() => {
+        setLocalValues(filterValues);
+    }, [filterValues]);
+    const handleInputChange = (key, value) => {
+        setLocalValues(prev => (Object.assign(Object.assign({}, prev), { [key]: value })));
+        if (debouncedOnFilterChange.current) {
+            debouncedOnFilterChange.current(key, value);
+        }
+    };
+    const renderInputFilter = (filter, index) => {
+        const { key, placeholder } = filter;
+        const handleOnChange = (e) => {
+            handleInputChange(key, e.target.value);
+        };
+        return (React.createElement(ui_layout_1.Flex, { align: "center", rootClassName: "relative", key: `filter-${key}-${index}` },
+            React.createElement(ui_input_1.Input, { className: "h-9 w-44", name: key, onChange: handleOnChange, placeholder: placeholder, value: localValues[key] || '' }),
+            React.createElement(icons_1.Icon, { className: "absolute cursor-pointer right-2 top-2", icon: "search", color: "var(--color-gray-500)", size: 16 })));
+    };
+    const renderFilter = (filter, index) => {
+        const { type } = filter;
+        switch (type) {
+            case constants_1.FILTER_TYPES.INPUT:
+                return renderInputFilter(filter, index);
+            default:
+                return null;
+        }
+    };
+    if (!filters || filters.length === 0) {
+        return null;
+    }
+    return (React.createElement(ui_layout_1.Flex, { flex: 1, gap: 12, wrap: true }, filters.map((filter, index) => renderFilter(filter, index))));
+};
+exports.TableFilters = TableFilters;

package/dist/cjs/ai-table/components/footer.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+interface TableFooterProps {
+    isSubmitting: boolean;
+    selectedCount: number;
+    submitAllLabel: string;
+    submitSelectedLabel: string;
+    onSubmitAll?: () => void;
+    onSubmitSelected?: () => void;
+}
+export declare const TableFooter: ({ isSubmitting, selectedCount, submitAllLabel, submitSelectedLabel, onSubmitAll, onSubmitSelected }: TableFooterProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=footer.d.ts.map

package/dist/cjs/ai-table/components/footer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../../../../src/ai-table/components/footer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,UAAU,gBAAgB;IACxB,YAAY,EAAE,OAAO,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B;AAED,eAAO,MAAM,WAAW,GAAI,qGAOzB,gBAAgB,sBAmClB,CAAC"}

package/dist/cjs/ai-table/components/footer.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableFooter = void 0;
+const ui_button_1 = require("@akinon/ui-button");
+const ui_layout_1 = require("@akinon/ui-layout");
+const React = require("react");
+const TableFooter = ({ isSubmitting, selectedCount, submitAllLabel, submitSelectedLabel, onSubmitAll, onSubmitSelected }) => {
+    const handleSubmitAll = () => {
+        if (onSubmitAll) {
+            onSubmitAll();
+        }
+    };
+    const handleSubmitSelected = () => {
+        if (onSubmitSelected) {
+            onSubmitSelected();
+        }
+    };
+    return (React.createElement(ui_layout_1.Flex, { justify: "end", gap: 10 },
+        React.createElement(ui_button_1.Button, { className: "uppercase font-semibold", disabled: isSubmitting, loading: isSubmitting, onClick: handleSubmitAll }, submitAllLabel),
+        React.createElement(ui_button_1.Button, { className: "uppercase font-semibold", disabled: selectedCount === 0 || isSubmitting, loading: isSubmitting, onClick: handleSubmitSelected, type: "primary" },
+            submitSelectedLabel,
+            selectedCount > 0 && ` (${selectedCount})`)));
+};
+exports.TableFooter = TableFooter;

package/dist/cjs/ai-table/components/mapper.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { HandleMapperItemChange, MapperRow } from '../../types';
+interface TableMapperProps {
+    values: MapperRow[];
+    handleAddItem: () => void;
+    handleRemoveItem: (index: number) => () => void;
+    handleItemChange: HandleMapperItemChange;
+}
+export declare const TableMapper: ({ values, handleAddItem, handleRemoveItem, handleItemChange }: TableMapperProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=mapper.d.ts.map

package/dist/cjs/ai-table/components/mapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mapper.d.ts","sourceRoot":"","sources":["../../../../src/ai-table/components/mapper.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,sBAAsB,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGrE,UAAU,gBAAgB;IACxB,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,IAAI,CAAC;IAChD,gBAAgB,EAAE,sBAAsB,CAAC;CAC1C;AAED,eAAO,MAAM,WAAW,GAAI,+DAKzB,gBAAgB,sBAgClB,CAAC"}

package/dist/cjs/ai-table/components/mapper.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableMapper = void 0;
+const icons_1 = require("@akinon/icons");
+const ui_layout_1 = require("@akinon/ui-layout");
+const React = require("react");
+const render_mapper_fields_1 = require("../utils/render-mapper-fields");
+const TableMapper = ({ values, handleAddItem, handleRemoveItem, handleItemChange }) => {
+    return (React.createElement(ui_layout_1.Flex, { gap: 5, vertical: true, rootClassName: "py-1" }, values.map((row, index) => {
+        return (React.createElement(ui_layout_1.Flex, { gap: 12, align: "center", key: index },
+            (0, render_mapper_fields_1.renderMapperRow)({
+                row,
+                index,
+                handleItemChange
+            }),
+            React.createElement(ui_layout_1.Flex, { gap: 10 },
+                React.createElement(icons_1.Icon, { icon: "plus", size: 20, color: "var(--color-green-500)", className: "cursor-pointer", onClick: handleAddItem }),
+                React.createElement(icons_1.Icon, { icon: "minus", size: 20, color: "var(--color-red-425)", className: "cursor-pointer", onClick: handleRemoveItem(index) }))));
+    })));
+};
+exports.TableMapper = TableMapper;

package/dist/cjs/ai-table/components/pagination.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+interface TablePaginationProps {
+    currentPage: number;
+    pageSize: number;
+    total: number;
+    onPageChange: (page: number) => void;
+    onPageSizeChange: (size: number) => void;
+}
+export declare const TablePagination: ({ currentPage, onPageChange, onPageSizeChange, pageSize, total }: TablePaginationProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=pagination.d.ts.map

package/dist/cjs/ai-table/components/pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../../src/ai-table/components/pagination.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,UAAU,oBAAoB;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,gBAAgB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C;AAED,eAAO,MAAM,eAAe,GAAI,kEAM7B,oBAAoB,sBA+HtB,CAAC"}

package/dist/cjs/ai-table/components/pagination.js

@@ -0,0 +1,106 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TablePagination = void 0;
+const ui_layout_1 = require("@akinon/ui-layout");
+const ui_pagination_1 = require("@akinon/ui-pagination");
+const ui_select_1 = require("@akinon/ui-select");
+const ui_theme_1 = require("@akinon/ui-theme");
+const cssinjs_1 = require("@ant-design/cssinjs");
+const antd_1 = require("antd");
+const React = require("react");
+const constants_1 = require("../constants");
+const i18n_1 = require("../i18n");
+const { t } = i18n_1.i18n;
+const TablePagination = ({ currentPage, onPageChange, onPageSizeChange, pageSize, total }) => {
+    const { getPrefixCls, theme } = React.useContext(antd_1.ConfigProvider.ConfigContext);
+    const { token, hashId } = (0, ui_theme_1.useToken)();
+    const baseCls = getPrefixCls('ai-modal-table');
+    const handlePageChange = (page) => {
+        onPageChange(page);
+    };
+    const handlePageSizeChange = (value) => {
+        onPageSizeChange(value);
+        onPageChange(constants_1.DEFAULT_CURRENT_PAGE);
+    };
+    const useStyle = (0, cssinjs_1.useStyleRegister)({
+        token: token,
+        path: ['AiModalTablePagination'],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        theme: theme
+    }, () => {
+        const prefixCls = `:where(.${hashId}).${baseCls}`;
+        return {
+            [`${prefixCls}__pagination-element`]: {
+                '&.akinon-pagination': {
+                    '.akinon-pagination-prev, .akinon-pagination-next': {
+                        height: 'unset !important',
+                        lineHeight: 'unset !important',
+                        margin: '0 !important',
+                        display: 'inline-block !important',
+                        verticalAlign: 'middle',
+                        '&.akinon-pagination-disabled': {
+                            button: {
+                                cursor: 'not-allowed'
+                            }
+                        },
+                        '.akinon-btn': {
+                            backgroundColor: 'var(--color-ebonyClay-475) !important',
+                            borderColor: 'var(--color-ebonyClay-550) !important',
+                            borderLeft: 'none',
+                            borderRight: 'none',
+                            height: '40px !important',
+                            '.akinon-btn-icon': {
+                                color: 'var(--color-gray-500) !important'
+                            },
+                            '&:hover': {
+                                backgroundColor: 'var(--color-ebonyClay-475) !important',
+                                borderColor: 'var(--color-ebonyClay-550) !important',
+                                '.anticon': {
+                                    color: 'var(--color-gray-500) !important'
+                                }
+                            }
+                        }
+                    },
+                    '.akinon-pagination-prev': {
+                        borderRadius: '5px 0 0 5px !important'
+                    },
+                    '.akinon-pagination-next': {
+                        borderRadius: '0 5px 5px 0 !important'
+                    },
+                    '.akinon-pagination-simple-pager': {
+                        margin: '0 !important',
+                        backgroundColor: 'var(--color-ebonyClay-475) !important',
+                        border: '1px solid var(--color-ebonyClay-550) !important',
+                        borderLeft: 'none !important',
+                        borderRight: 'none !important',
+                        borderRadius: 0,
+                        color: 'var(--color-gray-500) !important',
+                        padding: '0 8px',
+                        height: '40px',
+                        display: 'inline-flex !important',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        verticalAlign: 'middle',
+                        input: {
+                            color: 'var(--color-gray-500) !important',
+                            backgroundColor: 'transparent !important',
+                            border: 'none !important',
+                            textAlign: 'center',
+                            boxShadow: 'none !important'
+                        },
+                        '.akinon-pagination-slash': {
+                            color: 'var(--color-gray-500) !important',
+                            margin: '0 4px'
+                        }
+                    }
+                }
+            }
+        };
+    });
+    return useStyle(React.createElement(ui_layout_1.Flex, { align: "center", rootClassName: "ml-auto", gap: 8 },
+        React.createElement(ui_layout_1.Flex, { align: "center", gap: 12, rootClassName: "mr-5" },
+            React.createElement("span", { className: "text-sm text-gray-500" }, t('show.value')),
+            React.createElement(ui_select_1.Select, { onChange: handlePageSizeChange, options: constants_1.PAGE_SIZE_OPTIONS, value: pageSize })),
+        React.createElement(ui_pagination_1.Pagination, { className: `${baseCls}__pagination-element ${hashId}`, current: currentPage, onChange: handlePageChange, pageSize: pageSize, showSizeChanger: false, theme: "dark", total: total })));
+};
+exports.TablePagination = TablePagination;

package/dist/cjs/ai-table/components/row-actions.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { TableBaseProps } from '../../types';
+interface ActionButtonsProps {
+    hasEdit: boolean;
+    isEditing: boolean;
+    isSelected: boolean;
+    rowId: number | string;
+    setIsEditingPk: React.Dispatch<React.SetStateAction<null | number | string>>;
+    onToggleSelection: (rowId: number | string) => void;
+    customActionButtons?: TableBaseProps['customActionButtons'];
+}
+export declare const ActionButtons: ({ customActionButtons, hasEdit, isEditing, isSelected, onToggleSelection, rowId, setIsEditingPk }: ActionButtonsProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=row-actions.d.ts.map

package/dist/cjs/ai-table/components/row-actions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"row-actions.d.ts","sourceRoot":"","sources":["../../../../src/ai-table/components/row-actions.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGlD,UAAU,kBAAkB;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,cAAc,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC;IAC7E,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IACpD,mBAAmB,CAAC,EAAE,cAAc,CAAC,qBAAqB,CAAC,CAAC;CAC7D;AAED,eAAO,MAAM,aAAa,GAAI,mGAQ3B,kBAAkB,sBAuEpB,CAAC"}

package/dist/cjs/ai-table/components/row-actions.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionButtons = void 0;
+const ui_button_1 = require("@akinon/ui-button");
+const ui_layout_1 = require("@akinon/ui-layout");
+const ui_theme_1 = require("@akinon/ui-theme");
+const cssinjs_1 = require("@ant-design/cssinjs");
+const antd_1 = require("antd");
+const classnames_1 = require("classnames");
+const React = require("react");
+const constants_1 = require("../constants");
+const ActionButtons = ({ customActionButtons, hasEdit, isEditing, isSelected, onToggleSelection, rowId, setIsEditingPk }) => {
+    const { getPrefixCls, theme } = React.useContext(antd_1.ConfigProvider.ConfigContext);
+    const { token, hashId } = (0, ui_theme_1.useToken)();
+    const baseCls = getPrefixCls('ai-modal-table');
+    const handleToggle = (e) => {
+        e.stopPropagation();
+        onToggleSelection(rowId);
+    };
+    const handleOnClickEdit = () => {
+        setIsEditingPk(isEditing ? constants_1.IS_EDITING_INITIAL_VALUE : rowId);
+    };
+    const renderCustomActionButtons = () => {
+        if (!customActionButtons)
+            return null;
+        return customActionButtons(rowId);
+    };
+    const useStyle = (0, cssinjs_1.useStyleRegister)({
+        token: token,
+        path: ['AiModalTableActionButtons'],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        theme: theme
+    }, () => {
+        const prefixCls = `:where(.${hashId}).${baseCls}`;
+        return {
+            [`${prefixCls}__action-button`]: {
+                width: '1.75rem !important',
+                transition: 'all 0.2s',
+                '&:hover': {
+                    opacity: 0.8
+                }
+            }
+        };
+    });
+    return useStyle(React.createElement(ui_layout_1.Flex, { gap: 10 },
+        renderCustomActionButtons(),
+        hasEdit && (React.createElement(ui_button_1.Button, { className: `${baseCls}__action-button ${hashId} border border-ebonyClay-200 bg-ebonyClay-400 h-7`, icon: "edit", iconSize: 16, onClick: handleOnClickEdit, type: "icon" })),
+        React.createElement(ui_button_1.Button, { className: (0, classnames_1.default)(`${baseCls}__action-button ${hashId} border border-ebonyClay-200 bg-ebonyClay-400 h-7`, {
+                'bg-green-600 border-green-600': isSelected
+            }), icon: "katalogkontrol", iconSize: 16, onClick: handleToggle, type: "icon" })));
+};
+exports.ActionButtons = ActionButtons;