@akinon/akitable 1.3.12 → 1.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/akitable.d.ts.map +1 -1
- package/dist/cjs/akitable.js +2 -2
- package/dist/cjs/common/theme-overrides.d.ts.map +1 -1
- package/dist/cjs/common/theme-overrides.js +8 -0
- package/dist/cjs/components/EditableCell.d.ts +6 -2
- package/dist/cjs/components/EditableCell.d.ts.map +1 -1
- package/dist/cjs/components/EditableCell.js +2 -11
- package/dist/cjs/components/datatable.css +64 -1
- package/dist/cjs/components/datatable.d.ts.map +1 -1
- package/dist/cjs/components/datatable.js +99 -45
- package/dist/cjs/types.d.ts +75 -1
- package/dist/cjs/types.d.ts.map +1 -1
- package/dist/esm/akitable.d.ts.map +1 -1
- package/dist/esm/akitable.js +2 -2
- package/dist/esm/common/theme-overrides.d.ts.map +1 -1
- package/dist/esm/common/theme-overrides.js +8 -0
- package/dist/esm/components/EditableCell.d.ts +6 -2
- package/dist/esm/components/EditableCell.d.ts.map +1 -1
- package/dist/esm/components/EditableCell.js +2 -11
- package/dist/esm/components/datatable.css +64 -1
- package/dist/esm/components/datatable.d.ts.map +1 -1
- package/dist/esm/components/datatable.js +99 -45
- package/dist/esm/types.d.ts +75 -1
- package/dist/esm/types.d.ts.map +1 -1
- package/package.json +15 -15
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"akitable.d.ts","sourceRoot":"","sources":["../../src/akitable.tsx"],"names":[],"mappings":"AACA,OAAO,gBAAgB,CAAC;AAGxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,KAAK,EAGV,aAAa,EACd,MAAM,SAAS,CAAC;AAEjB;;;;;;;;;;GAUG;AAEH,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,
|
|
1
|
+
{"version":3,"file":"akitable.d.ts","sourceRoot":"","sources":["../../src/akitable.tsx"],"names":[],"mappings":"AACA,OAAO,gBAAgB,CAAC;AAGxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,KAAK,EAGV,aAAa,EACd,MAAM,SAAS,CAAC;AAEjB;;;;;;;;;;GAUG;AAEH,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,sBAkF5C,CAAC"}
|
package/dist/cjs/akitable.js
CHANGED
|
@@ -24,7 +24,7 @@ const header_1 = require("./components/header");
|
|
|
24
24
|
* needs in enterprise applications.
|
|
25
25
|
*/
|
|
26
26
|
const Akitable = (props) => {
|
|
27
|
-
const { actions, columns, data, expandable, footer, header, isLoading, maxColumnContent, pagination, paginationShowTotal, rowKey, emptyState, onPaginationChanged, onRowClick, onRowEdit, onChangeSorter } = props;
|
|
27
|
+
const { actions, actionColumn, columns, data, expandable, footer, header, height, isLoading, maxColumnContent, pagination, paginationShowTotal, rowKey, emptyState, onPaginationChanged, onRowClick, onRowEdit, onChangeSorter } = props;
|
|
28
28
|
// If there is a pagination object, table data should be accessed from type AkitablePaginatedData.
|
|
29
29
|
// If not, table data should be accessed from type AkitableData.
|
|
30
30
|
const handleGetParsedData = () => {
|
|
@@ -45,7 +45,7 @@ const Akitable = (props) => {
|
|
|
45
45
|
react_1.default.createElement(akitable_context_1.AkitableProvider, { actions: actions, isLoading: isLoading, pagination: Object.assign(Object.assign({}, pagination), { total, hasPagination: !!pagination }), paginationShowTotal: paginationShowTotal, onPaginationChanged: onPaginationChanged },
|
|
46
46
|
react_1.default.createElement(antd_1.ConfigProvider, { theme: theme_overrides_1.themeOverrides },
|
|
47
47
|
react_1.default.createElement(header_1.AkitableHeader, Object.assign({}, header)),
|
|
48
|
-
react_1.default.createElement(datatable_1.AkitableDataTable, { columns: columns, data: parsedData, expandable: expandable, rowKey: rowKey, maxColumnContent: maxColumnContent, emptyState: emptyState, onRowClick: onRowClick, onRowEdit: onRowEdit, onChangeSorter: onChangeSorter }),
|
|
48
|
+
react_1.default.createElement(datatable_1.AkitableDataTable, { columns: columns, data: parsedData, expandable: expandable, rowKey: rowKey, maxColumnContent: maxColumnContent, height: height, emptyState: emptyState, onRowClick: onRowClick, onRowEdit: onRowEdit, onChangeSorter: onChangeSorter, actionColumn: actionColumn }),
|
|
49
49
|
react_1.default.createElement(footer_1.AkitableFooter, Object.assign({}, footer)))))));
|
|
50
50
|
};
|
|
51
51
|
exports.Akitable = Akitable;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme-overrides.d.ts","sourceRoot":"","sources":["../../../src/common/theme-overrides.ts"],"names":[],"mappings":"AACA,OAAO,EAAsB,WAAW,EAAE,MAAM,MAAM,CAAC;AAEvD,eAAO,MAAM,cAAc,EAAE,
|
|
1
|
+
{"version":3,"file":"theme-overrides.d.ts","sourceRoot":"","sources":["../../../src/common/theme-overrides.ts"],"names":[],"mappings":"AACA,OAAO,EAAsB,WAAW,EAAE,MAAM,MAAM,CAAC;AAEvD,eAAO,MAAM,cAAc,EAAE,WA6E5B,CAAC"}
|
|
@@ -70,6 +70,14 @@ exports.themeOverrides = {
|
|
|
70
70
|
colorTextDisabled: ui_theme_1.theme.colors.neutral['375'],
|
|
71
71
|
colorTextPlaceholder: ui_theme_1.theme.colors.neutral['375'],
|
|
72
72
|
algorithm: antd_1.theme.defaultAlgorithm
|
|
73
|
+
},
|
|
74
|
+
DatePicker: {
|
|
75
|
+
colorBgContainer: ui_theme_1.theme.colors.neutral['50'],
|
|
76
|
+
colorBorder: ui_theme_1.theme.colors.neutral['350'],
|
|
77
|
+
colorText: ui_theme_1.theme.colors.neutral['950'],
|
|
78
|
+
colorTextDisabled: ui_theme_1.theme.colors.neutral['375'],
|
|
79
|
+
colorTextPlaceholder: ui_theme_1.theme.colors.neutral['375'],
|
|
80
|
+
algorithm: antd_1.theme.defaultAlgorithm
|
|
73
81
|
}
|
|
74
82
|
}
|
|
75
83
|
};
|
|
@@ -1,12 +1,16 @@
|
|
|
1
|
-
import '
|
|
1
|
+
import { type InputProps } from '@akinon/ui-input';
|
|
2
|
+
import type { FormItemProps } from 'antd';
|
|
2
3
|
import React from 'react';
|
|
3
|
-
import type { AkitableData } from '../types';
|
|
4
|
+
import type { AkitableData, CustomEditRenderParams } from '../types';
|
|
4
5
|
interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
|
|
5
6
|
editing: boolean;
|
|
6
7
|
dataIndex: string | string[];
|
|
7
8
|
title: any;
|
|
8
9
|
record: AkitableData;
|
|
9
10
|
index: number;
|
|
11
|
+
customEditRender?: (params: CustomEditRenderParams) => React.ReactNode;
|
|
12
|
+
editFormItemProps?: Omit<FormItemProps, 'name'>;
|
|
13
|
+
editInputProps?: InputProps;
|
|
10
14
|
}
|
|
11
15
|
declare const EditableCell: React.FC<React.PropsWithChildren<EditableCellProps>>;
|
|
12
16
|
export default EditableCell;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditableCell.d.ts","sourceRoot":"","sources":["../../../src/components/EditableCell.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"EditableCell.d.ts","sourceRoot":"","sources":["../../../src/components/EditableCell.tsx"],"names":[],"mappings":"AACA,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,MAAM,CAAC;AAC1C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,YAAY,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAErE,UAAU,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACnE,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAE7B,KAAK,EAAE,GAAG,CAAC;IACX,MAAM,EAAE,YAAY,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAC;IACvE,iBAAiB,CAAC,EAAE,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IAChD,cAAc,CAAC,EAAE,UAAU,CAAC;CAC7B;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAsCtE,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -11,14 +11,11 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
11
11
|
return t;
|
|
12
12
|
};
|
|
13
13
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
|
-
require("./datatable.css");
|
|
15
14
|
const akiform_1 = require("@akinon/akiform");
|
|
16
15
|
const ui_input_1 = require("@akinon/ui-input");
|
|
17
16
|
const react_1 = require("react");
|
|
18
|
-
const i18n_1 = require("../i18n");
|
|
19
17
|
const EditableCell = (_a) => {
|
|
20
|
-
var { editing, dataIndex, title, record, children } = _a, restProps = __rest(_a, ["editing", "dataIndex", "title", "record", "children"]);
|
|
21
|
-
const { t } = i18n_1.i18n;
|
|
18
|
+
var { editing, dataIndex, title, record, children, customEditRender, editFormItemProps, editInputProps } = _a, restProps = __rest(_a, ["editing", "dataIndex", "title", "record", "children", "customEditRender", "editFormItemProps", "editInputProps"]);
|
|
22
19
|
let initialValue = null;
|
|
23
20
|
if (dataIndex && Array.isArray(dataIndex)) {
|
|
24
21
|
initialValue = dataIndex.reduce((acc, key) => acc === null || acc === void 0 ? void 0 : acc[key], record);
|
|
@@ -26,12 +23,6 @@ const EditableCell = (_a) => {
|
|
|
26
23
|
else {
|
|
27
24
|
initialValue = record === null || record === void 0 ? void 0 : record[dataIndex];
|
|
28
25
|
}
|
|
29
|
-
return (react_1.default.createElement("td", Object.assign({}, restProps), editing ? (react_1.default.createElement(akiform_1.Akiform.Item, { name: dataIndex,
|
|
30
|
-
{
|
|
31
|
-
required: true,
|
|
32
|
-
message: t('missingTitle', { title })
|
|
33
|
-
}
|
|
34
|
-
], initialValue: initialValue },
|
|
35
|
-
react_1.default.createElement(ui_input_1.Input, null))) : (children)));
|
|
26
|
+
return (react_1.default.createElement("td", Object.assign({}, restProps), editing ? (react_1.default.createElement(akiform_1.Akiform.Item, Object.assign({ style: { margin: 0 }, initialValue: initialValue }, editFormItemProps, { name: dataIndex }), customEditRender ? (customEditRender({ record, dataIndex, value: initialValue, title })) : (react_1.default.createElement(ui_input_1.Input, Object.assign({ size: "middle" }, editInputProps))))) : (children)));
|
|
36
27
|
};
|
|
37
28
|
exports.default = EditableCell;
|
|
@@ -97,10 +97,73 @@
|
|
|
97
97
|
background-color: var(--color-red-425-10);
|
|
98
98
|
}
|
|
99
99
|
|
|
100
|
-
.akitable-wrapper .akinon-table-
|
|
100
|
+
.akitable-wrapper .akinon-table-body {
|
|
101
101
|
border-bottom: 1px solid var(--color-neutral-350);
|
|
102
|
+
min-height: var(--akitable-body-height);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.akitable-wrapper .akinon-table-content {
|
|
106
|
+
box-shadow: inset 0 -1px 0 var(--color-neutral-350);
|
|
107
|
+
min-height: var(--akitable-body-height);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.akitable-wrapper .akinon-table-content .akinon-table-tbody tr:last-child td,
|
|
111
|
+
.akitable-wrapper:not(.akitable-wrapper--overflowing)
|
|
112
|
+
.akinon-table-body
|
|
113
|
+
.akinon-table-tbody
|
|
114
|
+
tr:last-child
|
|
115
|
+
td {
|
|
116
|
+
border-bottom: 1px solid var(--color-neutral-350);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.akitable-wrapper.akitable-wrapper--overflowing
|
|
120
|
+
.akinon-table-body
|
|
121
|
+
.akinon-table-tbody
|
|
122
|
+
tr:last-child
|
|
123
|
+
td {
|
|
124
|
+
border-bottom: none;
|
|
102
125
|
}
|
|
103
126
|
|
|
104
127
|
.akitable-wrapper .akinon-table-row .akinon-table-edit-button--disable {
|
|
105
128
|
cursor: not-allowed;
|
|
106
129
|
}
|
|
130
|
+
|
|
131
|
+
.akitable-wrapper td .akinon-form-item-control {
|
|
132
|
+
position: relative;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.akitable-wrapper td .akinon-form-item-additional {
|
|
136
|
+
position: absolute;
|
|
137
|
+
top: 100%;
|
|
138
|
+
left: 0;
|
|
139
|
+
right: 0;
|
|
140
|
+
z-index: 10;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.akitable-wrapper td .akinon-form-item-explain {
|
|
144
|
+
padding: 0 !important;
|
|
145
|
+
font-size: 11px;
|
|
146
|
+
line-height: 1.4;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.akitable-wrapper .akinon-picker:not(.akinon-picker-light) {
|
|
150
|
+
background: var(--color-neutral-50);
|
|
151
|
+
border: 1px solid var(--color-neutral-350);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.akitable-wrapper
|
|
155
|
+
.akinon-picker:not(.akinon-picker-light)
|
|
156
|
+
.akinon-picker-input
|
|
157
|
+
input {
|
|
158
|
+
color: var(--color-neutral-950);
|
|
159
|
+
border: none;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.akitable-wrapper .akitable-save-button--has-errors,
|
|
163
|
+
.akitable-wrapper .akitable-save-button--has-errors:disabled {
|
|
164
|
+
background-color: var(--color-neutral-575) !important;
|
|
165
|
+
border-color: var(--color-neutral-575) !important;
|
|
166
|
+
color: var(--color-neutral-50) !important;
|
|
167
|
+
opacity: 1 !important;
|
|
168
|
+
cursor: not-allowed;
|
|
169
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"datatable.d.ts","sourceRoot":"","sources":["../../../src/components/datatable.tsx"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,CAAC;AAQzB,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,
|
|
1
|
+
{"version":3,"file":"datatable.d.ts","sourceRoot":"","sources":["../../../src/components/datatable.tsx"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,CAAC;AAQzB,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAIL,sBAAsB,EAIvB,MAAM,UAAU,CAAC;AAIlB,eAAO,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,sBA0S9D,CAAC"}
|
|
@@ -16,11 +16,24 @@ const EditableCell_1 = require("./EditableCell");
|
|
|
16
16
|
const { t } = i18n_1.i18n;
|
|
17
17
|
const AkitableDataTable = (props) => {
|
|
18
18
|
const { isLoading, selectedRowKeys, setSelectedRowKeys, actions } = (0, akitable_context_1.useAkitableContext)();
|
|
19
|
-
const { columns, data, expandable, rowKey, maxColumnContent = true, onRowClick, onRowEdit, emptyState, onChangeSorter } = props;
|
|
19
|
+
const { columns, data, expandable, rowKey, maxColumnContent = true, height, onRowClick, onRowEdit, emptyState, onChangeSorter, actionColumn } = props;
|
|
20
20
|
const [form] = akiform_1.Akiform.useForm();
|
|
21
21
|
const [localColumns, setLocalColumns] = react_1.default.useState(columns);
|
|
22
22
|
const [editingKey, setEditingKey] = react_1.default.useState(null);
|
|
23
23
|
const [isLoadingSaveButton, setIsLoadingSaveButton] = react_1.default.useState(false);
|
|
24
|
+
const [hasFormErrors, setHasFormErrors] = react_1.default.useState(false);
|
|
25
|
+
react_1.default.useEffect(() => {
|
|
26
|
+
if (!editingKey)
|
|
27
|
+
setHasFormErrors(false);
|
|
28
|
+
}, [editingKey]);
|
|
29
|
+
react_1.default.useEffect(() => {
|
|
30
|
+
if (onRowEdit && !actionColumn) {
|
|
31
|
+
console.warn('[Akitable] onRowEdit is provided without actionColumn. ' +
|
|
32
|
+
'Please migrate to the actionColumn prop to customize the action column.');
|
|
33
|
+
}
|
|
34
|
+
}, []);
|
|
35
|
+
const [isOverflowing, setIsOverflowing] = react_1.default.useState(false);
|
|
36
|
+
const wrapperRef = react_1.default.useRef(null);
|
|
24
37
|
const hasActions = actions && actions.length > 0;
|
|
25
38
|
const getRowKeyData = (record) => record[rowKey];
|
|
26
39
|
const checkIsEditingRow = (recordId) => recordId === editingKey;
|
|
@@ -36,13 +49,56 @@ const AkitableDataTable = (props) => {
|
|
|
36
49
|
selectedRowKeys,
|
|
37
50
|
onChange: onSelectChange
|
|
38
51
|
};
|
|
52
|
+
const buildActionHandlers = (record) => ({
|
|
53
|
+
handleStartEdit: (e) => {
|
|
54
|
+
if (!isLoadingSaveButton) {
|
|
55
|
+
form.resetFields();
|
|
56
|
+
form.setFieldsValue(record);
|
|
57
|
+
setEditingKey(getRowKeyData(record));
|
|
58
|
+
}
|
|
59
|
+
e === null || e === void 0 ? void 0 : e.stopPropagation();
|
|
60
|
+
},
|
|
61
|
+
handleSaveEditingItem: async () => {
|
|
62
|
+
try {
|
|
63
|
+
setIsLoadingSaveButton(true);
|
|
64
|
+
await onRowEdit(record, form.getFieldsValue());
|
|
65
|
+
setEditingKey(null);
|
|
66
|
+
form.resetFields();
|
|
67
|
+
}
|
|
68
|
+
finally {
|
|
69
|
+
setIsLoadingSaveButton(false);
|
|
70
|
+
}
|
|
71
|
+
},
|
|
72
|
+
handleCancelEditingItem: () => setEditingKey(null)
|
|
73
|
+
});
|
|
74
|
+
const buildActionColumn = (col) => (Object.assign(Object.assign({}, col), { key: '__akitable_action__', render: (record) => col.render(Object.assign({ record, isEditing: checkIsEditingRow(getRowKeyData(record)), isEditLoading: isLoadingSaveButton, hasEditFormError: hasFormErrors }, buildActionHandlers(record))) }));
|
|
75
|
+
const handleFormFieldsChange = (_, allFields) => {
|
|
76
|
+
setHasFormErrors(allFields.some(f => { var _a, _b; return ((_b = (_a = f.errors) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0; }));
|
|
77
|
+
};
|
|
78
|
+
// Prefer `actionColumn` prop for custom action rendering. This default column is a fallback.
|
|
79
|
+
const buildDefaultEditColumn = () => ({
|
|
80
|
+
key: '__akitable_edit__',
|
|
81
|
+
title: t('edit'),
|
|
82
|
+
render: (record) => {
|
|
83
|
+
const isRowEditing = checkIsEditingRow(getRowKeyData(record));
|
|
84
|
+
const { handleStartEdit, handleSaveEditingItem, handleCancelEditingItem } = buildActionHandlers(record);
|
|
85
|
+
return isRowEditing ? (react_1.default.createElement("span", null,
|
|
86
|
+
react_1.default.createElement(ui_button_1.Button, { size: "small", onClick: handleSaveEditingItem, loading: isLoadingSaveButton, disabled: hasFormErrors, className: (0, clsx_1.default)({
|
|
87
|
+
'akitable-save-button--has-errors': hasFormErrors
|
|
88
|
+
}) }, t('save')),
|
|
89
|
+
react_1.default.createElement(ui_typography_1.Text, Object.assign({ type: "danger", disabled: isLoadingSaveButton, className: "cursor-pointer ml-2" }, (!isLoadingSaveButton && { onClick: handleCancelEditingItem })), t('cancel')))) : (react_1.default.createElement(ui_button_1.Button, { type: "primary", size: "small", onClick: handleStartEdit, className: (0, clsx_1.default)({
|
|
90
|
+
'akinon-table-edit-button--disable': isLoadingSaveButton
|
|
91
|
+
}) }, t('edit')));
|
|
92
|
+
},
|
|
93
|
+
width: 200
|
|
94
|
+
});
|
|
39
95
|
/**
|
|
40
96
|
* If onRowEdit is provided:
|
|
41
|
-
* 1. Add an
|
|
97
|
+
* 1. Add an action column to the end of columns (custom or default edit column)
|
|
42
98
|
* 2. Look up the existing columns and if editable is set to true, add onCell method to the column
|
|
43
99
|
*/
|
|
44
100
|
react_1.default.useEffect(() => {
|
|
45
|
-
if (!onRowEdit) {
|
|
101
|
+
if (!onRowEdit && !actionColumn) {
|
|
46
102
|
setLocalColumns(columns);
|
|
47
103
|
return;
|
|
48
104
|
}
|
|
@@ -53,55 +109,53 @@ const AkitableDataTable = (props) => {
|
|
|
53
109
|
record,
|
|
54
110
|
dataIndex: column.dataIndex,
|
|
55
111
|
title: column.title,
|
|
56
|
-
editing: checkIsEditingRow(getRowKeyData(record))
|
|
112
|
+
editing: checkIsEditingRow(getRowKeyData(record)),
|
|
113
|
+
customEditRender: column.customEditRender,
|
|
114
|
+
editFormItemProps: column.editFormItemProps,
|
|
115
|
+
editInputProps: column.editInputProps
|
|
57
116
|
}) });
|
|
58
117
|
});
|
|
59
|
-
const
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
finally {
|
|
72
|
-
setIsLoadingSaveButton(false);
|
|
73
|
-
}
|
|
74
|
-
};
|
|
75
|
-
const handleOnClickEditButton = (e) => {
|
|
76
|
-
if (!isLoadingSaveButton) {
|
|
77
|
-
form.resetFields();
|
|
78
|
-
setEditingKey(getRowKeyData(record));
|
|
79
|
-
}
|
|
80
|
-
e.stopPropagation(); // To prevent row click event
|
|
81
|
-
};
|
|
82
|
-
const handleOnClickCancelButton = () => {
|
|
83
|
-
setEditingKey(null);
|
|
84
|
-
};
|
|
85
|
-
return isRowEditing ? (react_1.default.createElement("span", null,
|
|
86
|
-
react_1.default.createElement(ui_button_1.Button, { size: "small", onClick: handleOnClickSaveButton, loading: isLoadingSaveButton }, t('save')),
|
|
87
|
-
react_1.default.createElement(ui_typography_1.Text, Object.assign({ type: "danger", disabled: isLoadingSaveButton, className: "cursor-pointer ml-2" }, (!isLoadingSaveButton && {
|
|
88
|
-
onClick: handleOnClickCancelButton
|
|
89
|
-
})), t('cancel')))) : (react_1.default.createElement(ui_button_1.Button, { type: "primary", size: "small", onClick: handleOnClickEditButton, className: (0, clsx_1.default)({
|
|
90
|
-
'akinon-table-edit-button--disable': isLoadingSaveButton
|
|
91
|
-
}) }, t('edit')));
|
|
92
|
-
},
|
|
93
|
-
width: 200
|
|
94
|
-
};
|
|
95
|
-
setLocalColumns([...modifiedColumns, editColumn]);
|
|
96
|
-
}, [columns, onRowEdit, editingKey, isLoadingSaveButton]);
|
|
118
|
+
const actionCol = actionColumn
|
|
119
|
+
? buildActionColumn(actionColumn)
|
|
120
|
+
: buildDefaultEditColumn();
|
|
121
|
+
setLocalColumns([...modifiedColumns, actionCol]);
|
|
122
|
+
}, [
|
|
123
|
+
columns,
|
|
124
|
+
onRowEdit,
|
|
125
|
+
actionColumn,
|
|
126
|
+
editingKey,
|
|
127
|
+
isLoadingSaveButton,
|
|
128
|
+
hasFormErrors
|
|
129
|
+
]);
|
|
97
130
|
const renderEmptyState = (emptyStateConfig) => {
|
|
98
131
|
var _a;
|
|
99
132
|
if (!emptyStateConfig)
|
|
100
133
|
return undefined;
|
|
101
134
|
return (react_1.default.createElement(antd_1.Empty, { image: emptyStateConfig.icon, description: (_a = emptyStateConfig.description) !== null && _a !== void 0 ? _a : i18n_1.i18n.t('noData') }));
|
|
102
135
|
};
|
|
103
|
-
|
|
104
|
-
|
|
136
|
+
react_1.default.useEffect(() => {
|
|
137
|
+
if (!height || !wrapperRef.current)
|
|
138
|
+
return;
|
|
139
|
+
const tableBody = wrapperRef.current.querySelector('.akinon-table-body');
|
|
140
|
+
if (!tableBody)
|
|
141
|
+
return;
|
|
142
|
+
const checkOverflow = () => {
|
|
143
|
+
setIsOverflowing(tableBody.scrollHeight > tableBody.clientHeight);
|
|
144
|
+
};
|
|
145
|
+
checkOverflow();
|
|
146
|
+
const observer = new ResizeObserver(checkOverflow);
|
|
147
|
+
observer.observe(tableBody);
|
|
148
|
+
return () => observer.disconnect();
|
|
149
|
+
}, [height, data]);
|
|
150
|
+
const bodyHeightStyle = height !== undefined
|
|
151
|
+
? {
|
|
152
|
+
'--akitable-body-height': typeof height === 'number' ? `${height}px` : height
|
|
153
|
+
}
|
|
154
|
+
: undefined;
|
|
155
|
+
return (react_1.default.createElement("div", { ref: wrapperRef, "data-testid": "akitable-datatable-wrapper", className: (0, clsx_1.default)('akitable-wrapper', {
|
|
156
|
+
'akitable-wrapper--overflowing': isOverflowing
|
|
157
|
+
}), style: bodyHeightStyle },
|
|
158
|
+
react_1.default.createElement(akiform_1.Akiform, { form: form, component: false, onFieldsChange: handleFormFieldsChange },
|
|
105
159
|
react_1.default.createElement(ui_table_1.Table, { "data-testid": "akitable-datatable", components: {
|
|
106
160
|
body: {
|
|
107
161
|
cell: EditableCell_1.default
|
|
@@ -110,7 +164,7 @@ const AkitableDataTable = (props) => {
|
|
|
110
164
|
? {
|
|
111
165
|
emptyText: renderEmptyState(emptyState)
|
|
112
166
|
}
|
|
113
|
-
: undefined, scroll: Object.assign(Object.assign({}, (maxColumnContent && { x: 'max-content' })), { scrollToFirstRowOnChange: true }), loading: isLoading, onRow: (record, rowIndex) => {
|
|
167
|
+
: undefined, scroll: Object.assign(Object.assign(Object.assign({}, (maxColumnContent && { x: 'max-content' })), (height !== undefined && { y: height })), { scrollToFirstRowOnChange: true }), loading: isLoading, onRow: (record, rowIndex) => {
|
|
114
168
|
const isEditingRow = checkIsEditingRow(getRowKeyData(record));
|
|
115
169
|
return Object.assign({}, (!isEditingRow && {
|
|
116
170
|
onClick: (event) => {
|
package/dist/cjs/types.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import type { InputProps } from '@akinon/ui-input';
|
|
2
|
+
import { FormItemProps, TableColumnType } from 'antd';
|
|
2
3
|
import React, { ReactNode } from 'react';
|
|
3
4
|
export type AnyObject = Record<PropertyKey, any>;
|
|
4
5
|
export type SortOrder = 'descend' | 'ascend' | null;
|
|
@@ -13,6 +14,36 @@ type RowEditCallback = (modifiedRecord: AkitableData, payload: AkitableData) =>
|
|
|
13
14
|
export type PaginationChangeEvent = (page: number, size: number) => void;
|
|
14
15
|
export type TableOnChangeSorter = SorterResult | SorterResult[];
|
|
15
16
|
export type SorterChangeEvent = (sorter: TableOnChangeSorter) => void;
|
|
17
|
+
export interface AkitableActionColumnRenderParams {
|
|
18
|
+
/** The data record for the current row. */
|
|
19
|
+
record: AkitableData;
|
|
20
|
+
/** Whether the row is currently in edit mode. */
|
|
21
|
+
isEditing: boolean;
|
|
22
|
+
/** Whether the save operation is in progress. */
|
|
23
|
+
isEditLoading: boolean;
|
|
24
|
+
/** Whether the edit form has validation errors. */
|
|
25
|
+
hasEditFormError: boolean;
|
|
26
|
+
/** Initiates edit mode for the row. */
|
|
27
|
+
handleStartEdit: (e?: React.MouseEvent) => void;
|
|
28
|
+
/** Saves the current edit and exits edit mode. */
|
|
29
|
+
handleSaveEditingItem: () => Promise<void>;
|
|
30
|
+
/** Cancels the current edit and exits edit mode without saving. */
|
|
31
|
+
handleCancelEditingItem: () => void;
|
|
32
|
+
}
|
|
33
|
+
export interface AkitableActionColumn {
|
|
34
|
+
/** Column header content. */
|
|
35
|
+
title?: React.ReactNode;
|
|
36
|
+
/** Column width in pixels or CSS string. */
|
|
37
|
+
width?: number | string;
|
|
38
|
+
/** Whether the column is fixed to the left or right of the table. */
|
|
39
|
+
fixed?: 'left' | 'right' | boolean;
|
|
40
|
+
/** Additional CSS class for the column. */
|
|
41
|
+
className?: string;
|
|
42
|
+
/** Text alignment within the column. */
|
|
43
|
+
align?: 'left' | 'right' | 'center';
|
|
44
|
+
/** Render function receiving row edit state and handler functions. */
|
|
45
|
+
render: (params: AkitableActionColumnRenderParams) => React.ReactNode;
|
|
46
|
+
}
|
|
16
47
|
export interface AkitableProps {
|
|
17
48
|
/**
|
|
18
49
|
* Actions available for the table rows.
|
|
@@ -79,6 +110,16 @@ export interface AkitableProps {
|
|
|
79
110
|
* Falls back to the default localized text when not provided.
|
|
80
111
|
*/
|
|
81
112
|
paginationShowTotal?: (total: number, range: [number, number]) => React.ReactNode;
|
|
113
|
+
/**
|
|
114
|
+
* Custom action column config. When provided, replaces the default Edit/Save/Cancel column.
|
|
115
|
+
* Receives row edit state and handler functions via the render callback.
|
|
116
|
+
*/
|
|
117
|
+
actionColumn?: AkitableActionColumn;
|
|
118
|
+
/**
|
|
119
|
+
* Fixed height for the table body. When set, the table body becomes scrollable
|
|
120
|
+
* and the header row stays sticky. Accepts a pixel number or any CSS length string.
|
|
121
|
+
*/
|
|
122
|
+
height?: number | string;
|
|
82
123
|
}
|
|
83
124
|
export interface AkitableHeaderProps {
|
|
84
125
|
/**
|
|
@@ -150,6 +191,16 @@ export interface AkitableDataTableProps {
|
|
|
150
191
|
* Configuration for expandable rows.
|
|
151
192
|
*/
|
|
152
193
|
expandable?: AkitableExpandableConfig;
|
|
194
|
+
/**
|
|
195
|
+
* Custom action column config. When provided, replaces the default Edit/Save/Cancel column.
|
|
196
|
+
* Receives row edit state and handler functions via the render callback.
|
|
197
|
+
*/
|
|
198
|
+
actionColumn?: AkitableActionColumn;
|
|
199
|
+
/**
|
|
200
|
+
* Fixed height for the table body. When set, the table body becomes scrollable
|
|
201
|
+
* and the header row stays sticky. Accepts a pixel number or any CSS length string.
|
|
202
|
+
*/
|
|
203
|
+
height?: number | string;
|
|
153
204
|
}
|
|
154
205
|
export interface AkitableEmptyStateProps {
|
|
155
206
|
/**
|
|
@@ -172,6 +223,16 @@ export interface AkitablePaginationProps {
|
|
|
172
223
|
*/
|
|
173
224
|
size: AkitablePageSizes;
|
|
174
225
|
}
|
|
226
|
+
export interface CustomEditRenderParams {
|
|
227
|
+
/** The data record for the current row. */
|
|
228
|
+
record: AkitableData;
|
|
229
|
+
/** The key path of the column's data in the record. */
|
|
230
|
+
dataIndex: string | string[];
|
|
231
|
+
/** The current value of the cell being edited. */
|
|
232
|
+
value: unknown;
|
|
233
|
+
/** The column title. */
|
|
234
|
+
title: unknown;
|
|
235
|
+
}
|
|
175
236
|
export interface AkitableColumn extends TableColumnType<AkitableData> {
|
|
176
237
|
/**
|
|
177
238
|
* Whether the column is copyable.
|
|
@@ -181,6 +242,19 @@ export interface AkitableColumn extends TableColumnType<AkitableData> {
|
|
|
181
242
|
* Whether the column is editable.
|
|
182
243
|
*/
|
|
183
244
|
editable?: boolean;
|
|
245
|
+
/**
|
|
246
|
+
* Custom render function for the edit cell. Rendered inside Akiform.Item.
|
|
247
|
+
* Receives record, dataIndex, current value, and column title.
|
|
248
|
+
*/
|
|
249
|
+
customEditRender?: (params: CustomEditRenderParams) => React.ReactNode;
|
|
250
|
+
/**
|
|
251
|
+
* Props to pass to Akiform.Item when editing. Overrides defaults (except name).
|
|
252
|
+
*/
|
|
253
|
+
editFormItemProps?: Omit<FormItemProps, 'name'>;
|
|
254
|
+
/**
|
|
255
|
+
* Props to pass to the default Input when editing (only applies when customEditRender is not set).
|
|
256
|
+
*/
|
|
257
|
+
editInputProps?: InputProps;
|
|
184
258
|
}
|
|
185
259
|
export declare const AkitableRowStatus: {
|
|
186
260
|
readonly PENDING: "pending";
|
package/dist/cjs/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"akitable.d.ts","sourceRoot":"","sources":["../../src/akitable.tsx"],"names":[],"mappings":"AACA,OAAO,gBAAgB,CAAC;AAGxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,KAAK,EAGV,aAAa,EACd,MAAM,SAAS,CAAC;AAEjB;;;;;;;;;;GAUG;AAEH,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,
|
|
1
|
+
{"version":3,"file":"akitable.d.ts","sourceRoot":"","sources":["../../src/akitable.tsx"],"names":[],"mappings":"AACA,OAAO,gBAAgB,CAAC;AAGxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,KAAK,EAGV,aAAa,EACd,MAAM,SAAS,CAAC;AAEjB;;;;;;;;;;GAUG;AAEH,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,sBAkF5C,CAAC"}
|
package/dist/esm/akitable.js
CHANGED
|
@@ -21,7 +21,7 @@ import { AkitableHeader } from './components/header';
|
|
|
21
21
|
* needs in enterprise applications.
|
|
22
22
|
*/
|
|
23
23
|
export const Akitable = (props) => {
|
|
24
|
-
const { actions, columns, data, expandable, footer, header, isLoading, maxColumnContent, pagination, paginationShowTotal, rowKey, emptyState, onPaginationChanged, onRowClick, onRowEdit, onChangeSorter } = props;
|
|
24
|
+
const { actions, actionColumn, columns, data, expandable, footer, header, height, isLoading, maxColumnContent, pagination, paginationShowTotal, rowKey, emptyState, onPaginationChanged, onRowClick, onRowEdit, onChangeSorter } = props;
|
|
25
25
|
// If there is a pagination object, table data should be accessed from type AkitablePaginatedData.
|
|
26
26
|
// If not, table data should be accessed from type AkitableData.
|
|
27
27
|
const handleGetParsedData = () => {
|
|
@@ -42,6 +42,6 @@ export const Akitable = (props) => {
|
|
|
42
42
|
React.createElement(AkitableProvider, { actions: actions, isLoading: isLoading, pagination: Object.assign(Object.assign({}, pagination), { total, hasPagination: !!pagination }), paginationShowTotal: paginationShowTotal, onPaginationChanged: onPaginationChanged },
|
|
43
43
|
React.createElement(ConfigProvider, { theme: themeOverrides },
|
|
44
44
|
React.createElement(AkitableHeader, Object.assign({}, header)),
|
|
45
|
-
React.createElement(AkitableDataTable, { columns: columns, data: parsedData, expandable: expandable, rowKey: rowKey, maxColumnContent: maxColumnContent, emptyState: emptyState, onRowClick: onRowClick, onRowEdit: onRowEdit, onChangeSorter: onChangeSorter }),
|
|
45
|
+
React.createElement(AkitableDataTable, { columns: columns, data: parsedData, expandable: expandable, rowKey: rowKey, maxColumnContent: maxColumnContent, height: height, emptyState: emptyState, onRowClick: onRowClick, onRowEdit: onRowEdit, onChangeSorter: onChangeSorter, actionColumn: actionColumn }),
|
|
46
46
|
React.createElement(AkitableFooter, Object.assign({}, footer)))))));
|
|
47
47
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme-overrides.d.ts","sourceRoot":"","sources":["../../../src/common/theme-overrides.ts"],"names":[],"mappings":"AACA,OAAO,EAAsB,WAAW,EAAE,MAAM,MAAM,CAAC;AAEvD,eAAO,MAAM,cAAc,EAAE,
|
|
1
|
+
{"version":3,"file":"theme-overrides.d.ts","sourceRoot":"","sources":["../../../src/common/theme-overrides.ts"],"names":[],"mappings":"AACA,OAAO,EAAsB,WAAW,EAAE,MAAM,MAAM,CAAC;AAEvD,eAAO,MAAM,cAAc,EAAE,WA6E5B,CAAC"}
|
|
@@ -67,6 +67,14 @@ export const themeOverrides = {
|
|
|
67
67
|
colorTextDisabled: theme.colors.neutral['375'],
|
|
68
68
|
colorTextPlaceholder: theme.colors.neutral['375'],
|
|
69
69
|
algorithm: antdTheme.defaultAlgorithm
|
|
70
|
+
},
|
|
71
|
+
DatePicker: {
|
|
72
|
+
colorBgContainer: theme.colors.neutral['50'],
|
|
73
|
+
colorBorder: theme.colors.neutral['350'],
|
|
74
|
+
colorText: theme.colors.neutral['950'],
|
|
75
|
+
colorTextDisabled: theme.colors.neutral['375'],
|
|
76
|
+
colorTextPlaceholder: theme.colors.neutral['375'],
|
|
77
|
+
algorithm: antdTheme.defaultAlgorithm
|
|
70
78
|
}
|
|
71
79
|
}
|
|
72
80
|
};
|
|
@@ -1,12 +1,16 @@
|
|
|
1
|
-
import '
|
|
1
|
+
import { type InputProps } from '@akinon/ui-input';
|
|
2
|
+
import type { FormItemProps } from 'antd';
|
|
2
3
|
import React from 'react';
|
|
3
|
-
import type { AkitableData } from '../types';
|
|
4
|
+
import type { AkitableData, CustomEditRenderParams } from '../types';
|
|
4
5
|
interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
|
|
5
6
|
editing: boolean;
|
|
6
7
|
dataIndex: string | string[];
|
|
7
8
|
title: any;
|
|
8
9
|
record: AkitableData;
|
|
9
10
|
index: number;
|
|
11
|
+
customEditRender?: (params: CustomEditRenderParams) => React.ReactNode;
|
|
12
|
+
editFormItemProps?: Omit<FormItemProps, 'name'>;
|
|
13
|
+
editInputProps?: InputProps;
|
|
10
14
|
}
|
|
11
15
|
declare const EditableCell: React.FC<React.PropsWithChildren<EditableCellProps>>;
|
|
12
16
|
export default EditableCell;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditableCell.d.ts","sourceRoot":"","sources":["../../../src/components/EditableCell.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"EditableCell.d.ts","sourceRoot":"","sources":["../../../src/components/EditableCell.tsx"],"names":[],"mappings":"AACA,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,MAAM,CAAC;AAC1C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,YAAY,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAErE,UAAU,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACnE,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAE7B,KAAK,EAAE,GAAG,CAAC;IACX,MAAM,EAAE,YAAY,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAC;IACvE,iBAAiB,CAAC,EAAE,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IAChD,cAAc,CAAC,EAAE,UAAU,CAAC;CAC7B;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAsCtE,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -9,14 +9,11 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
-
import './datatable.css';
|
|
13
12
|
import { Akiform } from '@akinon/akiform';
|
|
14
13
|
import { Input } from '@akinon/ui-input';
|
|
15
14
|
import React from 'react';
|
|
16
|
-
import { i18n } from '../i18n';
|
|
17
15
|
const EditableCell = (_a) => {
|
|
18
|
-
var { editing, dataIndex, title, record, children } = _a, restProps = __rest(_a, ["editing", "dataIndex", "title", "record", "children"]);
|
|
19
|
-
const { t } = i18n;
|
|
16
|
+
var { editing, dataIndex, title, record, children, customEditRender, editFormItemProps, editInputProps } = _a, restProps = __rest(_a, ["editing", "dataIndex", "title", "record", "children", "customEditRender", "editFormItemProps", "editInputProps"]);
|
|
20
17
|
let initialValue = null;
|
|
21
18
|
if (dataIndex && Array.isArray(dataIndex)) {
|
|
22
19
|
initialValue = dataIndex.reduce((acc, key) => acc === null || acc === void 0 ? void 0 : acc[key], record);
|
|
@@ -24,12 +21,6 @@ const EditableCell = (_a) => {
|
|
|
24
21
|
else {
|
|
25
22
|
initialValue = record === null || record === void 0 ? void 0 : record[dataIndex];
|
|
26
23
|
}
|
|
27
|
-
return (React.createElement("td", Object.assign({}, restProps), editing ? (React.createElement(Akiform.Item, { name: dataIndex,
|
|
28
|
-
{
|
|
29
|
-
required: true,
|
|
30
|
-
message: t('missingTitle', { title })
|
|
31
|
-
}
|
|
32
|
-
], initialValue: initialValue },
|
|
33
|
-
React.createElement(Input, null))) : (children)));
|
|
24
|
+
return (React.createElement("td", Object.assign({}, restProps), editing ? (React.createElement(Akiform.Item, Object.assign({ style: { margin: 0 }, initialValue: initialValue }, editFormItemProps, { name: dataIndex }), customEditRender ? (customEditRender({ record, dataIndex, value: initialValue, title })) : (React.createElement(Input, Object.assign({ size: "middle" }, editInputProps))))) : (children)));
|
|
34
25
|
};
|
|
35
26
|
export default EditableCell;
|
|
@@ -97,10 +97,73 @@
|
|
|
97
97
|
background-color: var(--color-red-425-10);
|
|
98
98
|
}
|
|
99
99
|
|
|
100
|
-
.akitable-wrapper .akinon-table-
|
|
100
|
+
.akitable-wrapper .akinon-table-body {
|
|
101
101
|
border-bottom: 1px solid var(--color-neutral-350);
|
|
102
|
+
min-height: var(--akitable-body-height);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.akitable-wrapper .akinon-table-content {
|
|
106
|
+
box-shadow: inset 0 -1px 0 var(--color-neutral-350);
|
|
107
|
+
min-height: var(--akitable-body-height);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.akitable-wrapper .akinon-table-content .akinon-table-tbody tr:last-child td,
|
|
111
|
+
.akitable-wrapper:not(.akitable-wrapper--overflowing)
|
|
112
|
+
.akinon-table-body
|
|
113
|
+
.akinon-table-tbody
|
|
114
|
+
tr:last-child
|
|
115
|
+
td {
|
|
116
|
+
border-bottom: 1px solid var(--color-neutral-350);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.akitable-wrapper.akitable-wrapper--overflowing
|
|
120
|
+
.akinon-table-body
|
|
121
|
+
.akinon-table-tbody
|
|
122
|
+
tr:last-child
|
|
123
|
+
td {
|
|
124
|
+
border-bottom: none;
|
|
102
125
|
}
|
|
103
126
|
|
|
104
127
|
.akitable-wrapper .akinon-table-row .akinon-table-edit-button--disable {
|
|
105
128
|
cursor: not-allowed;
|
|
106
129
|
}
|
|
130
|
+
|
|
131
|
+
.akitable-wrapper td .akinon-form-item-control {
|
|
132
|
+
position: relative;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.akitable-wrapper td .akinon-form-item-additional {
|
|
136
|
+
position: absolute;
|
|
137
|
+
top: 100%;
|
|
138
|
+
left: 0;
|
|
139
|
+
right: 0;
|
|
140
|
+
z-index: 10;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.akitable-wrapper td .akinon-form-item-explain {
|
|
144
|
+
padding: 0 !important;
|
|
145
|
+
font-size: 11px;
|
|
146
|
+
line-height: 1.4;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.akitable-wrapper .akinon-picker:not(.akinon-picker-light) {
|
|
150
|
+
background: var(--color-neutral-50);
|
|
151
|
+
border: 1px solid var(--color-neutral-350);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.akitable-wrapper
|
|
155
|
+
.akinon-picker:not(.akinon-picker-light)
|
|
156
|
+
.akinon-picker-input
|
|
157
|
+
input {
|
|
158
|
+
color: var(--color-neutral-950);
|
|
159
|
+
border: none;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.akitable-wrapper .akitable-save-button--has-errors,
|
|
163
|
+
.akitable-wrapper .akitable-save-button--has-errors:disabled {
|
|
164
|
+
background-color: var(--color-neutral-575) !important;
|
|
165
|
+
border-color: var(--color-neutral-575) !important;
|
|
166
|
+
color: var(--color-neutral-50) !important;
|
|
167
|
+
opacity: 1 !important;
|
|
168
|
+
cursor: not-allowed;
|
|
169
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"datatable.d.ts","sourceRoot":"","sources":["../../../src/components/datatable.tsx"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,CAAC;AAQzB,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,
|
|
1
|
+
{"version":3,"file":"datatable.d.ts","sourceRoot":"","sources":["../../../src/components/datatable.tsx"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,CAAC;AAQzB,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAIL,sBAAsB,EAIvB,MAAM,UAAU,CAAC;AAIlB,eAAO,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,sBA0S9D,CAAC"}
|
|
@@ -13,11 +13,24 @@ import EditableCell from './EditableCell';
|
|
|
13
13
|
const { t } = i18n;
|
|
14
14
|
export const AkitableDataTable = (props) => {
|
|
15
15
|
const { isLoading, selectedRowKeys, setSelectedRowKeys, actions } = useAkitableContext();
|
|
16
|
-
const { columns, data, expandable, rowKey, maxColumnContent = true, onRowClick, onRowEdit, emptyState, onChangeSorter } = props;
|
|
16
|
+
const { columns, data, expandable, rowKey, maxColumnContent = true, height, onRowClick, onRowEdit, emptyState, onChangeSorter, actionColumn } = props;
|
|
17
17
|
const [form] = Akiform.useForm();
|
|
18
18
|
const [localColumns, setLocalColumns] = React.useState(columns);
|
|
19
19
|
const [editingKey, setEditingKey] = React.useState(null);
|
|
20
20
|
const [isLoadingSaveButton, setIsLoadingSaveButton] = React.useState(false);
|
|
21
|
+
const [hasFormErrors, setHasFormErrors] = React.useState(false);
|
|
22
|
+
React.useEffect(() => {
|
|
23
|
+
if (!editingKey)
|
|
24
|
+
setHasFormErrors(false);
|
|
25
|
+
}, [editingKey]);
|
|
26
|
+
React.useEffect(() => {
|
|
27
|
+
if (onRowEdit && !actionColumn) {
|
|
28
|
+
console.warn('[Akitable] onRowEdit is provided without actionColumn. ' +
|
|
29
|
+
'Please migrate to the actionColumn prop to customize the action column.');
|
|
30
|
+
}
|
|
31
|
+
}, []);
|
|
32
|
+
const [isOverflowing, setIsOverflowing] = React.useState(false);
|
|
33
|
+
const wrapperRef = React.useRef(null);
|
|
21
34
|
const hasActions = actions && actions.length > 0;
|
|
22
35
|
const getRowKeyData = (record) => record[rowKey];
|
|
23
36
|
const checkIsEditingRow = (recordId) => recordId === editingKey;
|
|
@@ -33,13 +46,56 @@ export const AkitableDataTable = (props) => {
|
|
|
33
46
|
selectedRowKeys,
|
|
34
47
|
onChange: onSelectChange
|
|
35
48
|
};
|
|
49
|
+
const buildActionHandlers = (record) => ({
|
|
50
|
+
handleStartEdit: (e) => {
|
|
51
|
+
if (!isLoadingSaveButton) {
|
|
52
|
+
form.resetFields();
|
|
53
|
+
form.setFieldsValue(record);
|
|
54
|
+
setEditingKey(getRowKeyData(record));
|
|
55
|
+
}
|
|
56
|
+
e === null || e === void 0 ? void 0 : e.stopPropagation();
|
|
57
|
+
},
|
|
58
|
+
handleSaveEditingItem: async () => {
|
|
59
|
+
try {
|
|
60
|
+
setIsLoadingSaveButton(true);
|
|
61
|
+
await onRowEdit(record, form.getFieldsValue());
|
|
62
|
+
setEditingKey(null);
|
|
63
|
+
form.resetFields();
|
|
64
|
+
}
|
|
65
|
+
finally {
|
|
66
|
+
setIsLoadingSaveButton(false);
|
|
67
|
+
}
|
|
68
|
+
},
|
|
69
|
+
handleCancelEditingItem: () => setEditingKey(null)
|
|
70
|
+
});
|
|
71
|
+
const buildActionColumn = (col) => (Object.assign(Object.assign({}, col), { key: '__akitable_action__', render: (record) => col.render(Object.assign({ record, isEditing: checkIsEditingRow(getRowKeyData(record)), isEditLoading: isLoadingSaveButton, hasEditFormError: hasFormErrors }, buildActionHandlers(record))) }));
|
|
72
|
+
const handleFormFieldsChange = (_, allFields) => {
|
|
73
|
+
setHasFormErrors(allFields.some(f => { var _a, _b; return ((_b = (_a = f.errors) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0; }));
|
|
74
|
+
};
|
|
75
|
+
// Prefer `actionColumn` prop for custom action rendering. This default column is a fallback.
|
|
76
|
+
const buildDefaultEditColumn = () => ({
|
|
77
|
+
key: '__akitable_edit__',
|
|
78
|
+
title: t('edit'),
|
|
79
|
+
render: (record) => {
|
|
80
|
+
const isRowEditing = checkIsEditingRow(getRowKeyData(record));
|
|
81
|
+
const { handleStartEdit, handleSaveEditingItem, handleCancelEditingItem } = buildActionHandlers(record);
|
|
82
|
+
return isRowEditing ? (React.createElement("span", null,
|
|
83
|
+
React.createElement(Button, { size: "small", onClick: handleSaveEditingItem, loading: isLoadingSaveButton, disabled: hasFormErrors, className: clsx({
|
|
84
|
+
'akitable-save-button--has-errors': hasFormErrors
|
|
85
|
+
}) }, t('save')),
|
|
86
|
+
React.createElement(Text, Object.assign({ type: "danger", disabled: isLoadingSaveButton, className: "cursor-pointer ml-2" }, (!isLoadingSaveButton && { onClick: handleCancelEditingItem })), t('cancel')))) : (React.createElement(Button, { type: "primary", size: "small", onClick: handleStartEdit, className: clsx({
|
|
87
|
+
'akinon-table-edit-button--disable': isLoadingSaveButton
|
|
88
|
+
}) }, t('edit')));
|
|
89
|
+
},
|
|
90
|
+
width: 200
|
|
91
|
+
});
|
|
36
92
|
/**
|
|
37
93
|
* If onRowEdit is provided:
|
|
38
|
-
* 1. Add an
|
|
94
|
+
* 1. Add an action column to the end of columns (custom or default edit column)
|
|
39
95
|
* 2. Look up the existing columns and if editable is set to true, add onCell method to the column
|
|
40
96
|
*/
|
|
41
97
|
React.useEffect(() => {
|
|
42
|
-
if (!onRowEdit) {
|
|
98
|
+
if (!onRowEdit && !actionColumn) {
|
|
43
99
|
setLocalColumns(columns);
|
|
44
100
|
return;
|
|
45
101
|
}
|
|
@@ -50,55 +106,53 @@ export const AkitableDataTable = (props) => {
|
|
|
50
106
|
record,
|
|
51
107
|
dataIndex: column.dataIndex,
|
|
52
108
|
title: column.title,
|
|
53
|
-
editing: checkIsEditingRow(getRowKeyData(record))
|
|
109
|
+
editing: checkIsEditingRow(getRowKeyData(record)),
|
|
110
|
+
customEditRender: column.customEditRender,
|
|
111
|
+
editFormItemProps: column.editFormItemProps,
|
|
112
|
+
editInputProps: column.editInputProps
|
|
54
113
|
}) });
|
|
55
114
|
});
|
|
56
|
-
const
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
finally {
|
|
69
|
-
setIsLoadingSaveButton(false);
|
|
70
|
-
}
|
|
71
|
-
};
|
|
72
|
-
const handleOnClickEditButton = (e) => {
|
|
73
|
-
if (!isLoadingSaveButton) {
|
|
74
|
-
form.resetFields();
|
|
75
|
-
setEditingKey(getRowKeyData(record));
|
|
76
|
-
}
|
|
77
|
-
e.stopPropagation(); // To prevent row click event
|
|
78
|
-
};
|
|
79
|
-
const handleOnClickCancelButton = () => {
|
|
80
|
-
setEditingKey(null);
|
|
81
|
-
};
|
|
82
|
-
return isRowEditing ? (React.createElement("span", null,
|
|
83
|
-
React.createElement(Button, { size: "small", onClick: handleOnClickSaveButton, loading: isLoadingSaveButton }, t('save')),
|
|
84
|
-
React.createElement(Text, Object.assign({ type: "danger", disabled: isLoadingSaveButton, className: "cursor-pointer ml-2" }, (!isLoadingSaveButton && {
|
|
85
|
-
onClick: handleOnClickCancelButton
|
|
86
|
-
})), t('cancel')))) : (React.createElement(Button, { type: "primary", size: "small", onClick: handleOnClickEditButton, className: clsx({
|
|
87
|
-
'akinon-table-edit-button--disable': isLoadingSaveButton
|
|
88
|
-
}) }, t('edit')));
|
|
89
|
-
},
|
|
90
|
-
width: 200
|
|
91
|
-
};
|
|
92
|
-
setLocalColumns([...modifiedColumns, editColumn]);
|
|
93
|
-
}, [columns, onRowEdit, editingKey, isLoadingSaveButton]);
|
|
115
|
+
const actionCol = actionColumn
|
|
116
|
+
? buildActionColumn(actionColumn)
|
|
117
|
+
: buildDefaultEditColumn();
|
|
118
|
+
setLocalColumns([...modifiedColumns, actionCol]);
|
|
119
|
+
}, [
|
|
120
|
+
columns,
|
|
121
|
+
onRowEdit,
|
|
122
|
+
actionColumn,
|
|
123
|
+
editingKey,
|
|
124
|
+
isLoadingSaveButton,
|
|
125
|
+
hasFormErrors
|
|
126
|
+
]);
|
|
94
127
|
const renderEmptyState = (emptyStateConfig) => {
|
|
95
128
|
var _a;
|
|
96
129
|
if (!emptyStateConfig)
|
|
97
130
|
return undefined;
|
|
98
131
|
return (React.createElement(Empty, { image: emptyStateConfig.icon, description: (_a = emptyStateConfig.description) !== null && _a !== void 0 ? _a : i18n.t('noData') }));
|
|
99
132
|
};
|
|
100
|
-
|
|
101
|
-
|
|
133
|
+
React.useEffect(() => {
|
|
134
|
+
if (!height || !wrapperRef.current)
|
|
135
|
+
return;
|
|
136
|
+
const tableBody = wrapperRef.current.querySelector('.akinon-table-body');
|
|
137
|
+
if (!tableBody)
|
|
138
|
+
return;
|
|
139
|
+
const checkOverflow = () => {
|
|
140
|
+
setIsOverflowing(tableBody.scrollHeight > tableBody.clientHeight);
|
|
141
|
+
};
|
|
142
|
+
checkOverflow();
|
|
143
|
+
const observer = new ResizeObserver(checkOverflow);
|
|
144
|
+
observer.observe(tableBody);
|
|
145
|
+
return () => observer.disconnect();
|
|
146
|
+
}, [height, data]);
|
|
147
|
+
const bodyHeightStyle = height !== undefined
|
|
148
|
+
? {
|
|
149
|
+
'--akitable-body-height': typeof height === 'number' ? `${height}px` : height
|
|
150
|
+
}
|
|
151
|
+
: undefined;
|
|
152
|
+
return (React.createElement("div", { ref: wrapperRef, "data-testid": "akitable-datatable-wrapper", className: clsx('akitable-wrapper', {
|
|
153
|
+
'akitable-wrapper--overflowing': isOverflowing
|
|
154
|
+
}), style: bodyHeightStyle },
|
|
155
|
+
React.createElement(Akiform, { form: form, component: false, onFieldsChange: handleFormFieldsChange },
|
|
102
156
|
React.createElement(Table, { "data-testid": "akitable-datatable", components: {
|
|
103
157
|
body: {
|
|
104
158
|
cell: EditableCell
|
|
@@ -107,7 +161,7 @@ export const AkitableDataTable = (props) => {
|
|
|
107
161
|
? {
|
|
108
162
|
emptyText: renderEmptyState(emptyState)
|
|
109
163
|
}
|
|
110
|
-
: undefined, scroll: Object.assign(Object.assign({}, (maxColumnContent && { x: 'max-content' })), { scrollToFirstRowOnChange: true }), loading: isLoading, onRow: (record, rowIndex) => {
|
|
164
|
+
: undefined, scroll: Object.assign(Object.assign(Object.assign({}, (maxColumnContent && { x: 'max-content' })), (height !== undefined && { y: height })), { scrollToFirstRowOnChange: true }), loading: isLoading, onRow: (record, rowIndex) => {
|
|
111
165
|
const isEditingRow = checkIsEditingRow(getRowKeyData(record));
|
|
112
166
|
return Object.assign({}, (!isEditingRow && {
|
|
113
167
|
onClick: (event) => {
|
package/dist/esm/types.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import type { InputProps } from '@akinon/ui-input';
|
|
2
|
+
import { FormItemProps, TableColumnType } from 'antd';
|
|
2
3
|
import React, { ReactNode } from 'react';
|
|
3
4
|
export type AnyObject = Record<PropertyKey, any>;
|
|
4
5
|
export type SortOrder = 'descend' | 'ascend' | null;
|
|
@@ -13,6 +14,36 @@ type RowEditCallback = (modifiedRecord: AkitableData, payload: AkitableData) =>
|
|
|
13
14
|
export type PaginationChangeEvent = (page: number, size: number) => void;
|
|
14
15
|
export type TableOnChangeSorter = SorterResult | SorterResult[];
|
|
15
16
|
export type SorterChangeEvent = (sorter: TableOnChangeSorter) => void;
|
|
17
|
+
export interface AkitableActionColumnRenderParams {
|
|
18
|
+
/** The data record for the current row. */
|
|
19
|
+
record: AkitableData;
|
|
20
|
+
/** Whether the row is currently in edit mode. */
|
|
21
|
+
isEditing: boolean;
|
|
22
|
+
/** Whether the save operation is in progress. */
|
|
23
|
+
isEditLoading: boolean;
|
|
24
|
+
/** Whether the edit form has validation errors. */
|
|
25
|
+
hasEditFormError: boolean;
|
|
26
|
+
/** Initiates edit mode for the row. */
|
|
27
|
+
handleStartEdit: (e?: React.MouseEvent) => void;
|
|
28
|
+
/** Saves the current edit and exits edit mode. */
|
|
29
|
+
handleSaveEditingItem: () => Promise<void>;
|
|
30
|
+
/** Cancels the current edit and exits edit mode without saving. */
|
|
31
|
+
handleCancelEditingItem: () => void;
|
|
32
|
+
}
|
|
33
|
+
export interface AkitableActionColumn {
|
|
34
|
+
/** Column header content. */
|
|
35
|
+
title?: React.ReactNode;
|
|
36
|
+
/** Column width in pixels or CSS string. */
|
|
37
|
+
width?: number | string;
|
|
38
|
+
/** Whether the column is fixed to the left or right of the table. */
|
|
39
|
+
fixed?: 'left' | 'right' | boolean;
|
|
40
|
+
/** Additional CSS class for the column. */
|
|
41
|
+
className?: string;
|
|
42
|
+
/** Text alignment within the column. */
|
|
43
|
+
align?: 'left' | 'right' | 'center';
|
|
44
|
+
/** Render function receiving row edit state and handler functions. */
|
|
45
|
+
render: (params: AkitableActionColumnRenderParams) => React.ReactNode;
|
|
46
|
+
}
|
|
16
47
|
export interface AkitableProps {
|
|
17
48
|
/**
|
|
18
49
|
* Actions available for the table rows.
|
|
@@ -79,6 +110,16 @@ export interface AkitableProps {
|
|
|
79
110
|
* Falls back to the default localized text when not provided.
|
|
80
111
|
*/
|
|
81
112
|
paginationShowTotal?: (total: number, range: [number, number]) => React.ReactNode;
|
|
113
|
+
/**
|
|
114
|
+
* Custom action column config. When provided, replaces the default Edit/Save/Cancel column.
|
|
115
|
+
* Receives row edit state and handler functions via the render callback.
|
|
116
|
+
*/
|
|
117
|
+
actionColumn?: AkitableActionColumn;
|
|
118
|
+
/**
|
|
119
|
+
* Fixed height for the table body. When set, the table body becomes scrollable
|
|
120
|
+
* and the header row stays sticky. Accepts a pixel number or any CSS length string.
|
|
121
|
+
*/
|
|
122
|
+
height?: number | string;
|
|
82
123
|
}
|
|
83
124
|
export interface AkitableHeaderProps {
|
|
84
125
|
/**
|
|
@@ -150,6 +191,16 @@ export interface AkitableDataTableProps {
|
|
|
150
191
|
* Configuration for expandable rows.
|
|
151
192
|
*/
|
|
152
193
|
expandable?: AkitableExpandableConfig;
|
|
194
|
+
/**
|
|
195
|
+
* Custom action column config. When provided, replaces the default Edit/Save/Cancel column.
|
|
196
|
+
* Receives row edit state and handler functions via the render callback.
|
|
197
|
+
*/
|
|
198
|
+
actionColumn?: AkitableActionColumn;
|
|
199
|
+
/**
|
|
200
|
+
* Fixed height for the table body. When set, the table body becomes scrollable
|
|
201
|
+
* and the header row stays sticky. Accepts a pixel number or any CSS length string.
|
|
202
|
+
*/
|
|
203
|
+
height?: number | string;
|
|
153
204
|
}
|
|
154
205
|
export interface AkitableEmptyStateProps {
|
|
155
206
|
/**
|
|
@@ -172,6 +223,16 @@ export interface AkitablePaginationProps {
|
|
|
172
223
|
*/
|
|
173
224
|
size: AkitablePageSizes;
|
|
174
225
|
}
|
|
226
|
+
export interface CustomEditRenderParams {
|
|
227
|
+
/** The data record for the current row. */
|
|
228
|
+
record: AkitableData;
|
|
229
|
+
/** The key path of the column's data in the record. */
|
|
230
|
+
dataIndex: string | string[];
|
|
231
|
+
/** The current value of the cell being edited. */
|
|
232
|
+
value: unknown;
|
|
233
|
+
/** The column title. */
|
|
234
|
+
title: unknown;
|
|
235
|
+
}
|
|
175
236
|
export interface AkitableColumn extends TableColumnType<AkitableData> {
|
|
176
237
|
/**
|
|
177
238
|
* Whether the column is copyable.
|
|
@@ -181,6 +242,19 @@ export interface AkitableColumn extends TableColumnType<AkitableData> {
|
|
|
181
242
|
* Whether the column is editable.
|
|
182
243
|
*/
|
|
183
244
|
editable?: boolean;
|
|
245
|
+
/**
|
|
246
|
+
* Custom render function for the edit cell. Rendered inside Akiform.Item.
|
|
247
|
+
* Receives record, dataIndex, current value, and column title.
|
|
248
|
+
*/
|
|
249
|
+
customEditRender?: (params: CustomEditRenderParams) => React.ReactNode;
|
|
250
|
+
/**
|
|
251
|
+
* Props to pass to Akiform.Item when editing. Overrides defaults (except name).
|
|
252
|
+
*/
|
|
253
|
+
editFormItemProps?: Omit<FormItemProps, 'name'>;
|
|
254
|
+
/**
|
|
255
|
+
* Props to pass to the default Input when editing (only applies when customEditRender is not set).
|
|
256
|
+
*/
|
|
257
|
+
editInputProps?: InputProps;
|
|
184
258
|
}
|
|
185
259
|
export declare const AkitableRowStatus: {
|
|
186
260
|
readonly PENDING: "pending";
|
package/dist/esm/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@akinon/akitable",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/esm/index.js",
|
|
@@ -13,22 +13,22 @@
|
|
|
13
13
|
"clsx": "^2.1.1",
|
|
14
14
|
"react-error-boundary": "^6.0.0",
|
|
15
15
|
"@akinon/akiform": "1.1.9",
|
|
16
|
-
"@akinon/icons": "1.3.1",
|
|
17
16
|
"@akinon/akilocale": "1.2.8",
|
|
18
|
-
"@akinon/
|
|
19
|
-
"@akinon/ui-
|
|
20
|
-
"@akinon/ui-
|
|
21
|
-
"@akinon/ui-
|
|
22
|
-
"@akinon/ui-
|
|
23
|
-
"@akinon/ui-
|
|
24
|
-
"@akinon/ui-
|
|
17
|
+
"@akinon/icons": "1.3.2",
|
|
18
|
+
"@akinon/ui-button": "1.5.3",
|
|
19
|
+
"@akinon/ui-card": "1.2.10",
|
|
20
|
+
"@akinon/ui-input": "1.2.10",
|
|
21
|
+
"@akinon/ui-pagination": "1.4.13",
|
|
22
|
+
"@akinon/ui-progress": "1.2.10",
|
|
23
|
+
"@akinon/ui-result": "1.4.11",
|
|
24
|
+
"@akinon/ui-select": "1.4.13",
|
|
25
25
|
"@akinon/ui-skeleton": "1.1.8",
|
|
26
|
-
"@akinon/ui-space": "1.4.
|
|
27
|
-
"@akinon/ui-spin": "1.4.
|
|
28
|
-
"@akinon/ui-steps": "1.3.
|
|
26
|
+
"@akinon/ui-space": "1.4.10",
|
|
27
|
+
"@akinon/ui-spin": "1.4.10",
|
|
28
|
+
"@akinon/ui-steps": "1.3.3",
|
|
29
29
|
"@akinon/ui-table": "1.1.8",
|
|
30
|
-
"@akinon/ui-
|
|
31
|
-
"@akinon/ui-
|
|
30
|
+
"@akinon/ui-theme": "1.3.1",
|
|
31
|
+
"@akinon/ui-typography": "1.2.7"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
34
|
"clean-package": "2.2.0",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"rimraf": "^5.0.5",
|
|
37
37
|
"typescript": "*",
|
|
38
38
|
"@akinon/typescript-config": "1.1.8",
|
|
39
|
-
"@akinon/utils": "1.2.
|
|
39
|
+
"@akinon/utils": "1.2.11",
|
|
40
40
|
"@akinon/vitest-config": "1.1.8"
|
|
41
41
|
},
|
|
42
42
|
"peerDependencies": {
|