@akinon/akitable 1.2.3 → 1.2.5-next.1

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.
Files changed (47) hide show
  1. package/dist/cjs/akitable.css +5 -1
  2. package/dist/cjs/akitable.d.ts.map +1 -1
  3. package/dist/cjs/akitable.js +2 -4
  4. package/dist/cjs/components/EditableCell.d.ts.map +1 -1
  5. package/dist/cjs/components/EditableCell.js +3 -1
  6. package/dist/cjs/components/actions.css +10 -5
  7. package/dist/cjs/components/actions.d.ts.map +1 -1
  8. package/dist/cjs/components/actions.js +13 -10
  9. package/dist/cjs/components/datatable.css +2 -2
  10. package/dist/cjs/components/datatable.d.ts.map +1 -1
  11. package/dist/cjs/components/datatable.js +2 -2
  12. package/dist/cjs/components/header.css +87 -16
  13. package/dist/cjs/components/header.d.ts +1 -1
  14. package/dist/cjs/components/header.d.ts.map +1 -1
  15. package/dist/cjs/components/header.js +58 -14
  16. package/dist/cjs/i18n/translations/en.d.ts +1 -0
  17. package/dist/cjs/i18n/translations/en.d.ts.map +1 -1
  18. package/dist/cjs/i18n/translations/en.js +1 -0
  19. package/dist/cjs/i18n/translations/tr.d.ts +1 -0
  20. package/dist/cjs/i18n/translations/tr.d.ts.map +1 -1
  21. package/dist/cjs/i18n/translations/tr.js +1 -0
  22. package/dist/cjs/types.d.ts +21 -0
  23. package/dist/cjs/types.d.ts.map +1 -1
  24. package/dist/esm/akitable.css +5 -1
  25. package/dist/esm/akitable.d.ts.map +1 -1
  26. package/dist/esm/akitable.js +2 -4
  27. package/dist/esm/components/EditableCell.d.ts.map +1 -1
  28. package/dist/esm/components/EditableCell.js +3 -1
  29. package/dist/esm/components/actions.css +10 -5
  30. package/dist/esm/components/actions.d.ts.map +1 -1
  31. package/dist/esm/components/actions.js +13 -10
  32. package/dist/esm/components/datatable.css +2 -2
  33. package/dist/esm/components/datatable.d.ts.map +1 -1
  34. package/dist/esm/components/datatable.js +2 -2
  35. package/dist/esm/components/header.css +87 -16
  36. package/dist/esm/components/header.d.ts +1 -1
  37. package/dist/esm/components/header.d.ts.map +1 -1
  38. package/dist/esm/components/header.js +58 -14
  39. package/dist/esm/i18n/translations/en.d.ts +1 -0
  40. package/dist/esm/i18n/translations/en.d.ts.map +1 -1
  41. package/dist/esm/i18n/translations/en.js +1 -0
  42. package/dist/esm/i18n/translations/tr.d.ts +1 -0
  43. package/dist/esm/i18n/translations/tr.d.ts.map +1 -1
  44. package/dist/esm/i18n/translations/tr.js +1 -0
  45. package/dist/esm/types.d.ts +21 -0
  46. package/dist/esm/types.d.ts.map +1 -1
  47. package/package.json +21 -21
@@ -1,7 +1,11 @@
1
+ :root {
2
+ --akitable-container-padding: 1.25rem;
3
+ }
4
+
1
5
  .akitable-container {
2
6
  background-color: white;
3
7
  border-radius: 0.5rem;
4
- padding: 1.5rem;
8
+ padding: var(--akitable-container-padding);
5
9
  }
6
10
 
7
11
  /* For some weird reason, antd does not allow overriding
@@ -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;AAa1B,OAAO,KAAK,EAGV,aAAa,EACd,MAAM,SAAS,CAAC;AAEjB;;;;;;;;;;GAUG;AAEH,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,sBAwE5C,CAAC"}
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,sBAwE5C,CAAC"}
@@ -8,7 +8,6 @@ const react_1 = require("react");
8
8
  const react_error_boundary_1 = require("react-error-boundary");
9
9
  const akitable_context_1 = require("./akitable-context");
10
10
  const theme_overrides_1 = require("./common/theme-overrides");
11
- const controls_1 = require("./components/controls");
12
11
  const datatable_1 = require("./components/datatable");
13
12
  const error_1 = require("./components/error");
14
13
  const footer_1 = require("./components/footer");
@@ -25,7 +24,7 @@ const header_1 = require("./components/header");
25
24
  * needs in enterprise applications.
26
25
  */
27
26
  const Akitable = (props) => {
28
- const { actions, columns, data, footer, header, isLoading, pagination, rowKey, onPaginationChanged, onRowClick, onRowEdit, onChangeSorter } = props;
27
+ const { actions, columns, data, footer, header, isLoading, maxColumnContent, pagination, rowKey, onPaginationChanged, onRowClick, onRowEdit, onChangeSorter } = props;
29
28
  // If there is a pagination object, table data should be accessed from type AkitablePaginatedData.
30
29
  // If not, table data should be accessed from type AkitableData.
31
30
  const handleGetParsedData = () => {
@@ -46,8 +45,7 @@ const Akitable = (props) => {
46
45
  react_1.default.createElement(akitable_context_1.AkitableProvider, { actions: actions, isLoading: isLoading, pagination: Object.assign(Object.assign({}, pagination), { total, hasPagination: !!pagination }), onPaginationChanged: onPaginationChanged },
47
46
  react_1.default.createElement(antd_1.ConfigProvider, { theme: theme_overrides_1.themeOverrides },
48
47
  react_1.default.createElement(header_1.AkitableHeader, Object.assign({}, header)),
49
- react_1.default.createElement(controls_1.AkitableControls, null),
50
- react_1.default.createElement(datatable_1.AkitableDataTable, { columns: columns, data: parsedData, rowKey: rowKey, onRowClick: onRowClick, onRowEdit: onRowEdit, onChangeSorter: onChangeSorter }),
48
+ react_1.default.createElement(datatable_1.AkitableDataTable, { columns: columns, data: parsedData, rowKey: rowKey, maxColumnContent: maxColumnContent, onRowClick: onRowClick, onRowEdit: onRowEdit, onChangeSorter: onChangeSorter }),
51
49
  react_1.default.createElement(footer_1.AkitableFooter, Object.assign({}, footer)))))));
52
50
  };
53
51
  exports.Akitable = Akitable;
@@ -1 +1 @@
1
- {"version":3,"file":"EditableCell.d.ts","sourceRoot":"","sources":["../../../src/components/EditableCell.tsx"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,CAAC;AAIzB,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,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;CACf;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAoCtE,CAAC;AAEF,eAAe,YAAY,CAAC"}
1
+ {"version":3,"file":"EditableCell.d.ts","sourceRoot":"","sources":["../../../src/components/EditableCell.tsx"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,CAAC;AAIzB,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,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;CACf;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAqCtE,CAAC;AAEF,eAAe,YAAY,CAAC"}
@@ -15,8 +15,10 @@ require("./datatable.css");
15
15
  const akiform_1 = require("@akinon/akiform");
16
16
  const ui_input_1 = require("@akinon/ui-input");
17
17
  const react_1 = require("react");
18
+ const i18n_1 = require("../i18n");
18
19
  const EditableCell = (_a) => {
19
20
  var { editing, dataIndex, title, record, children } = _a, restProps = __rest(_a, ["editing", "dataIndex", "title", "record", "children"]);
21
+ const { t } = i18n_1.i18n;
20
22
  let initialValue = null;
21
23
  if (dataIndex && Array.isArray(dataIndex)) {
22
24
  initialValue = dataIndex.reduce((acc, key) => acc === null || acc === void 0 ? void 0 : acc[key], record);
@@ -27,7 +29,7 @@ const EditableCell = (_a) => {
27
29
  return (react_1.default.createElement("td", Object.assign({}, restProps), editing ? (react_1.default.createElement(akiform_1.Akiform.Item, { name: dataIndex, style: { margin: 0 }, rules: [
28
30
  {
29
31
  required: true,
30
- message: `Missing ${title}!`
32
+ message: t('missingTitle', { title })
31
33
  }
32
34
  ], initialValue: initialValue },
33
35
  react_1.default.createElement(ui_input_1.Input, null))) : (children)));
@@ -1,16 +1,21 @@
1
1
  .akitable-actions {
2
2
  display: flex;
3
- gap: 0.5rem;
3
+ gap: 1rem;
4
4
  align-items: center;
5
5
  }
6
6
 
7
- .akitable-actions .akinon-select {
8
- min-width: 200px;
9
- height: 38px;
7
+ .akitable-actions .akinon-select-selector {
8
+ padding: 0.625rem 1rem !important;
9
+ border-radius: 0.313rem !important;
10
+ }
11
+
12
+ .akitable-actions .akinon-select .akinon-select-selection-placeholder {
13
+ font-weight: 600;
14
+ letter-spacing: 0.1px;
10
15
  }
11
16
 
12
17
  .akitable-actions .akinon-btn {
13
- height: 36px;
18
+ padding: 0.625rem 2.5rem;
14
19
  }
15
20
 
16
21
  .akitable-actions .akitable-actions-info {
@@ -1 +1 @@
1
- {"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../../../src/components/actions.tsx"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAC;AAIvB,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,eAAe,yBA0D3B,CAAC"}
1
+ {"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../../../src/components/actions.tsx"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAC;AAIvB,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,eAAe,yBA2D3B,CAAC"}
@@ -9,26 +9,29 @@ const akitable_context_1 = require("../akitable-context");
9
9
  const i18n_1 = require("../i18n");
10
10
  const AkitableActions = () => {
11
11
  const { t } = i18n_1.i18n;
12
- const [selectedAction, setSelectedAction] = react_1.default.useState(undefined);
12
+ const [selectedActionIndex, setSelectedActionIndex] = react_1.default.useState();
13
13
  const { actions, isLoading, selectedRowKeys, pagination } = (0, akitable_context_1.useAkitableContext)();
14
14
  const options = actions === null || actions === void 0 ? void 0 : actions.map((action, index) => ({
15
- value: index + 1,
15
+ value: index,
16
16
  label: action.label
17
17
  }));
18
18
  const hasSelections = selectedRowKeys && selectedRowKeys.length > 0;
19
- const handleActionChange = (value) => {
20
- setSelectedAction(value);
19
+ const handleChangeAction = (value) => {
20
+ const newSelectedActionIndex = typeof value === 'number' ? value : undefined;
21
+ setSelectedActionIndex(newSelectedActionIndex);
21
22
  };
22
23
  const handleActionTrigger = () => {
23
- if (!selectedAction || !hasSelections)
24
+ if (!hasSelections || selectedActionIndex === undefined)
24
25
  return;
25
- const action = actions === null || actions === void 0 ? void 0 : actions.find((_, index) => index === selectedAction - 1);
26
- action === null || action === void 0 ? void 0 : action.onSelect(selectedRowKeys);
26
+ const action = actions === null || actions === void 0 ? void 0 : actions[selectedActionIndex];
27
+ if (!action)
28
+ return;
29
+ action.onSelect(selectedRowKeys !== null && selectedRowKeys !== void 0 ? selectedRowKeys : []);
27
30
  };
28
31
  return (react_1.default.createElement("div", { "data-testid": "akitable-actions", className: "akitable-actions" },
29
- react_1.default.createElement(ui_select_1.Select, { placeholder: t('selectAction'), value: selectedAction, options: options, onChange: value => handleActionChange(value), disabled: isLoading || (pagination === null || pagination === void 0 ? void 0 : pagination.total) === 0, allowClear: true, "data-testid": "akitable-actions-select" }),
30
- selectedAction && (react_1.default.createElement(react_1.default.Fragment, null,
31
- react_1.default.createElement(ui_button_1.Button, { type: "primary", icon: "katalogkontrol", disabled: isLoading || !hasSelections, onClick: handleActionTrigger }, t('apply')),
32
+ react_1.default.createElement(ui_select_1.Select, { placeholder: t('selectAction'), value: selectedActionIndex, options: options, onChange: handleChangeAction, disabled: isLoading || (pagination === null || pagination === void 0 ? void 0 : pagination.total) === 0, allowClear: true, "data-testid": "akitable-actions-select" }),
33
+ selectedActionIndex !== undefined && (react_1.default.createElement(react_1.default.Fragment, null,
34
+ react_1.default.createElement(ui_button_1.Button, { type: "primary", disabled: isLoading || !hasSelections, onClick: handleActionTrigger }, t('apply')),
32
35
  hasSelections && (react_1.default.createElement("span", { className: "akitable-actions-info" }, t('selectedCount', { count: selectedRowKeys === null || selectedRowKeys === void 0 ? void 0 : selectedRowKeys.length })))))));
33
36
  };
34
37
  exports.AkitableActions = AkitableActions;
@@ -1,6 +1,6 @@
1
1
  .akitable-wrapper {
2
- margin-left: -1.5rem;
3
- margin-right: -1.5rem;
2
+ margin-left: calc(var(--akitable-container-padding) * -1);
3
+ margin-right: calc(var(--akitable-container-padding) * -1);
4
4
  margin-bottom: 1rem;
5
5
  }
6
6
 
@@ -1 +1 @@
1
- {"version":3,"file":"datatable.d.ts","sourceRoot":"","sources":["../../../src/components/datatable.tsx"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,CAAC;AAOzB,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAGL,sBAAsB,EAGvB,MAAM,UAAU,CAAC;AAIlB,eAAO,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,sBA8K9D,CAAC"}
1
+ {"version":3,"file":"datatable.d.ts","sourceRoot":"","sources":["../../../src/components/datatable.tsx"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,CAAC;AAOzB,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAGL,sBAAsB,EAGvB,MAAM,UAAU,CAAC;AAIlB,eAAO,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,sBAwL9D,CAAC"}
@@ -15,7 +15,7 @@ const EditableCell_1 = require("./EditableCell");
15
15
  const { t } = i18n_1.i18n;
16
16
  const AkitableDataTable = (props) => {
17
17
  const { isLoading, selectedRowKeys, setSelectedRowKeys, actions } = (0, akitable_context_1.useAkitableContext)();
18
- const { columns, data, rowKey, onRowClick, onRowEdit, onChangeSorter } = props;
18
+ const { columns, data, rowKey, maxColumnContent = true, onRowClick, onRowEdit, onChangeSorter } = props;
19
19
  const [form] = akiform_1.Akiform.useForm();
20
20
  const [localColumns, setLocalColumns] = react_1.default.useState(columns);
21
21
  const [editingKey, setEditingKey] = react_1.default.useState(null);
@@ -99,7 +99,7 @@ const AkitableDataTable = (props) => {
99
99
  body: {
100
100
  cell: EditableCell_1.default
101
101
  }
102
- }, columns: localColumns, dataSource: data, rowKey: (record) => getRowKeyData(record), bordered: true, rowHoverable: true, pagination: false, scroll: { x: 'max-content', scrollToFirstRowOnChange: true }, loading: isLoading, onRow: (record, rowIndex) => {
102
+ }, columns: localColumns, dataSource: data, rowKey: (record) => getRowKeyData(record), bordered: true, rowHoverable: true, pagination: false, scroll: Object.assign(Object.assign({}, (maxColumnContent && { x: 'max-content' })), { scrollToFirstRowOnChange: true }), loading: isLoading, onRow: (record, rowIndex) => {
103
103
  const isEditingRow = checkIsEditingRow(getRowKeyData(record));
104
104
  return Object.assign({}, (!isEditingRow && {
105
105
  onClick: (event) => {
@@ -1,26 +1,31 @@
1
1
  .akitable-header {
2
2
  display: flex;
3
- margin-bottom: 1.5rem;
3
+ flex-wrap: wrap;
4
+ gap: 1rem;
5
+ margin-bottom: 1rem;
4
6
  /* Setting min-height to prevent cumulative layout shifts. */
5
7
  min-height: 40px;
6
- flex-wrap: wrap;
8
+ }
9
+
10
+ .akitable-header--with-actions {
11
+ align-items: flex-start;
7
12
  }
8
13
 
9
14
  .akitable-header-title-container {
10
15
  display: flex;
11
- align-items: center;
12
- gap: 0.1rem;
13
16
  color: var(--color-gray-900);
14
17
  }
15
18
 
16
19
  .akitable-header-title {
17
- font-size: 1.25rem;
18
- font-weight: bold;
20
+ font-size: 1.125rem;
21
+ font-weight: 600;
19
22
  margin: 0;
20
23
  padding: 0;
21
- line-height: 1;
24
+ line-height: normal;
22
25
  display: flex;
23
26
  align-items: center;
27
+ gap: 0.1rem;
28
+ color: var(--color-blue-955);
24
29
  }
25
30
 
26
31
  .akitable-header-title-count-skeleton {
@@ -30,11 +35,13 @@
30
35
  }
31
36
 
32
37
  .akitable-header-title-count {
33
- font-size: 1.25rem;
34
- font-weight: bold;
38
+ font-size: 1.125rem;
39
+ font-weight: 600;
35
40
  margin: 0;
36
41
  padding: 0;
37
- line-height: 1;
42
+ line-height: normal;
43
+ color: var(--color-blue-955);
44
+ margin-left: 0.25rem;
38
45
  }
39
46
 
40
47
  .akitable-header-title-description-skeleton {
@@ -43,17 +50,81 @@
43
50
  }
44
51
 
45
52
  .akitable-header-description {
46
- color: var(--color-gray-400);
53
+ color: var(--color-gray-500);
47
54
  display: block;
48
- margin-top: 0.5rem;
55
+ font-size: 0.875rem;
56
+ font-weight: 500;
57
+ }
58
+
59
+ .akitable-header-actions {
60
+ display: flex;
61
+ flex-direction: column;
62
+ margin-top: 0.563rem;
63
+ }
64
+
65
+ .akitable-header-side {
66
+ margin-left: auto;
67
+ display: flex;
68
+ flex-wrap: wrap;
69
+ justify-content: flex-end;
70
+ gap: 0.75rem;
71
+ }
72
+
73
+ .akitable-header-side--single-row {
74
+ align-items: center;
75
+ }
76
+
77
+ .akitable-header-side--single-row .akitable-header-downloads {
78
+ margin: 0 3.625rem;
79
+ }
80
+
81
+ .akitable-header-side--with-actions {
82
+ flex-direction: column;
83
+ align-items: flex-end;
84
+ align-self: end;
85
+ justify-content: space-between;
86
+ }
87
+
88
+ .akitable-header-side-top {
89
+ display: flex;
90
+ align-items: center;
91
+ justify-content: flex-end;
92
+ gap: 0.75rem;
93
+ }
94
+
95
+ .akitable-header-side-bottom {
96
+ display: flex;
97
+ justify-content: flex-end;
49
98
  }
50
99
 
51
100
  .akitable-header-extra-content {
52
- margin-bottom: 1rem;
53
101
  color: var(--color-gray-300);
54
102
  }
55
103
 
56
- .akitable-header-extra {
57
- margin-left: auto;
58
- text-align: right;
104
+ .akitable-header-downloads {
105
+ display: flex;
106
+ gap: 0.75rem;
107
+ align-items: center;
108
+ }
109
+
110
+ .akitable-header-downloads-placeholder {
111
+ display: block;
112
+ height: 0;
113
+ flex: 0 0 auto;
114
+ }
115
+
116
+ .akitable-header-downloads .akinon-btn {
117
+ font-size: 0.762rem;
118
+ font-weight: bold;
119
+ letter-spacing: 0.038rem;
120
+ display: flex;
121
+ flex-direction: column;
122
+ width: 2.5rem;
123
+ height: 2.5rem;
124
+ padding: 0;
125
+ gap: 0;
126
+ }
127
+
128
+ .akitable-header-downloads .akinon-btn-icon {
129
+ font-size: 0.762rem;
59
130
  }
@@ -1,5 +1,5 @@
1
1
  import './header.css';
2
2
  import React from 'react';
3
3
  import type { AkitableHeaderProps } from '../types';
4
- export declare const AkitableHeader: (props: AkitableHeaderProps) => React.JSX.Element | null;
4
+ export declare const AkitableHeader: (props?: AkitableHeaderProps) => React.JSX.Element | null;
5
5
  //# sourceMappingURL=header.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../src/components/header.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAItB,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAGpD,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,6BA4ExD,CAAC"}
1
+ {"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../src/components/header.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAKtB,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAMpD,eAAO,MAAM,cAAc,GAAI,QAAO,mBAAwB,6BAyK7D,CAAC"}
@@ -4,21 +4,30 @@ exports.AkitableHeader = void 0;
4
4
  require("./header.css");
5
5
  const ui_skeleton_1 = require("@akinon/ui-skeleton");
6
6
  const ui_spin_1 = require("@akinon/ui-spin");
7
+ const clsx_1 = require("clsx");
7
8
  const react_1 = require("react");
8
9
  const akitable_context_1 = require("../akitable-context");
9
10
  const i18n_1 = require("../i18n");
11
+ const actions_1 = require("./actions");
10
12
  const pagination_1 = require("./pagination");
11
- const AkitableHeader = (props) => {
13
+ const DEFAULT_DOWNLOAD_SLOT_WIDTH = 120;
14
+ const AkitableHeader = (props = {}) => {
12
15
  const { isLoading, pagination, actions } = (0, akitable_context_1.useAkitableContext)();
13
- const { title, extra } = props;
14
- const hasActions = actions && (actions === null || actions === void 0 ? void 0 : actions.length) > 0;
15
- if (!title && !extra)
16
+ const { title, extra, downloadActions, downloadActionsSlotWidth = DEFAULT_DOWNLOAD_SLOT_WIDTH, reserveDownloadActionsSpace = true } = props;
17
+ const hasActions = Boolean(actions && actions.length > 0);
18
+ const hasPagination = Boolean(pagination === null || pagination === void 0 ? void 0 : pagination.hasPagination);
19
+ const shouldRenderHeader = Boolean(title) ||
20
+ Boolean(extra) ||
21
+ Boolean(downloadActions) ||
22
+ hasActions ||
23
+ hasPagination;
24
+ if (!shouldRenderHeader)
16
25
  return null;
17
26
  const renderTitle = () => {
18
27
  return (react_1.default.createElement("div", { className: "akitable-header-title-container" },
19
28
  react_1.default.createElement("h2", { className: "akitable-header-title" }, title),
20
29
  isLoading ? (react_1.default.createElement("span", { "data-testid": "akitable-title-loading-skeleton" },
21
- react_1.default.createElement(ui_skeleton_1.Skeleton.Button, { active: true, size: "small", className: "ml-1" }))) : (react_1.default.createElement("span", { className: "akitable-header-title-count" }, `(${pagination === null || pagination === void 0 ? void 0 : pagination.total})`))));
30
+ react_1.default.createElement(ui_skeleton_1.Skeleton.Button, { active: true, size: "small", className: "akitable-header-title-count-skeleton" }))) : (react_1.default.createElement("span", { className: "akitable-header-title-count" }, `(${pagination === null || pagination === void 0 ? void 0 : pagination.total})`))));
22
31
  };
23
32
  const renderTitleDescription = () => {
24
33
  const descriptionContent = !(pagination === null || pagination === void 0 ? void 0 : pagination.total)
@@ -26,14 +35,49 @@ const AkitableHeader = (props) => {
26
35
  : i18n_1.i18n.t('resultsFound', { count: pagination === null || pagination === void 0 ? void 0 : pagination.total });
27
36
  return (react_1.default.createElement("span", { "data-testid": "akitable-header-description", className: "akitable-header-description" }, descriptionContent));
28
37
  };
29
- return (react_1.default.createElement("div", { "data-testid": "akitable-header", className: "akitable-header" },
30
- !!title && (react_1.default.createElement("div", { "data-testid": "akitable-header-title-container" },
31
- renderTitle(),
32
- isLoading ? (react_1.default.createElement("span", { "data-testid": "akitable-title-description-loading-skeleton" },
33
- react_1.default.createElement(ui_skeleton_1.Skeleton.Input, { active: true, size: "small", className: "mt-2" }))) : (renderTitleDescription()))),
34
- react_1.default.createElement("div", { className: "akitable-header-extra" },
35
- extra && (react_1.default.createElement("div", { "data-testid": "akitable-header-extra-content", className: "akitable-header-extra-content" }, isLoading ? (react_1.default.createElement(ui_spin_1.Spin, { "data-testid": "akitable-header-extra-loading-skeleton" })) : (extra))),
36
- !hasActions && (pagination === null || pagination === void 0 ? void 0 : pagination.hasPagination) && (react_1.default.createElement("div", { "data-testid": "akitable-header-pagination" },
37
- react_1.default.createElement(pagination_1.AkitablePagination, null))))));
38
+ const renderExtraContent = () => {
39
+ if (!extra)
40
+ return null;
41
+ return (react_1.default.createElement("div", { "data-testid": "akitable-header-extra-content", className: "akitable-header-extra-content" }, isLoading ? (react_1.default.createElement(ui_spin_1.Spin, { "data-testid": "akitable-header-extra-loading-skeleton" })) : (extra)));
42
+ };
43
+ const renderDownloadActions = () => {
44
+ if (downloadActions) {
45
+ return react_1.default.createElement("div", { className: "akitable-header-downloads" }, downloadActions);
46
+ }
47
+ if (hasActions || !reserveDownloadActionsSpace || !hasPagination) {
48
+ return null;
49
+ }
50
+ return (react_1.default.createElement("div", { className: "akitable-header-downloads-placeholder", style: { width: downloadActionsSlotWidth } }));
51
+ };
52
+ const renderPagination = () => {
53
+ if (!hasPagination)
54
+ return null;
55
+ return (react_1.default.createElement("div", { "data-testid": "akitable-header-pagination" },
56
+ react_1.default.createElement(pagination_1.AkitablePagination, null)));
57
+ };
58
+ const extraContent = renderExtraContent();
59
+ const downloadContent = renderDownloadActions();
60
+ const paginationContent = renderPagination();
61
+ return (react_1.default.createElement("div", { "data-testid": "akitable-header", className: (0, clsx_1.default)('akitable-header', {
62
+ 'akitable-header--with-actions': hasActions
63
+ }) },
64
+ react_1.default.createElement("div", { className: "akitable-header-main" },
65
+ !!title && (react_1.default.createElement("div", { "data-testid": "akitable-header-title-container" },
66
+ renderTitle(),
67
+ isLoading ? (react_1.default.createElement("span", { "data-testid": "akitable-title-description-loading-skeleton" },
68
+ react_1.default.createElement(ui_skeleton_1.Skeleton.Input, { active: true, size: "small", className: "akitable-header-title-description-skeleton" }))) : (renderTitleDescription()))),
69
+ hasActions && (react_1.default.createElement("div", { className: "akitable-header-actions" },
70
+ react_1.default.createElement(actions_1.AkitableActions, null)))),
71
+ (extraContent || downloadContent || paginationContent) && (react_1.default.createElement("div", { className: (0, clsx_1.default)('akitable-header-side', {
72
+ 'akitable-header-side--single-row': !hasActions,
73
+ 'akitable-header-side--with-actions': hasActions
74
+ }) }, hasActions ? (react_1.default.createElement(react_1.default.Fragment, null,
75
+ (extraContent || downloadContent) && (react_1.default.createElement("div", { className: "akitable-header-side-top" },
76
+ extraContent,
77
+ downloadContent)),
78
+ paginationContent && (react_1.default.createElement("div", { className: "akitable-header-side-bottom" }, paginationContent)))) : (react_1.default.createElement(react_1.default.Fragment, null,
79
+ extraContent,
80
+ downloadContent,
81
+ paginationContent))))));
38
82
  };
39
83
  exports.AkitableHeader = AkitableHeader;
@@ -11,6 +11,7 @@ declare const translations: {
11
11
  readonly edit: "Edit";
12
12
  readonly save: "Save";
13
13
  readonly cancel: "Cancel";
14
+ readonly missingTitle: "Missing {{title}}!";
14
15
  readonly paginationShowTotal: "{{from}}-{{to}} of {{total}} items";
15
16
  };
16
17
  export default translations;
@@ -1 +1 @@
1
- {"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../../src/i18n/translations/en.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;CAeR,CAAC;AAEX,eAAe,YAAY,CAAC"}
1
+ {"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../../src/i18n/translations/en.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;CAgBR,CAAC;AAEX,eAAe,YAAY,CAAC"}
@@ -13,6 +13,7 @@ const translations = {
13
13
  edit: 'Edit',
14
14
  save: 'Save',
15
15
  cancel: 'Cancel',
16
+ missingTitle: 'Missing {{title}}!',
16
17
  paginationShowTotal: '{{from}}-{{to}} of {{total}} items'
17
18
  };
18
19
  exports.default = translations;
@@ -11,6 +11,7 @@ declare const translations: {
11
11
  readonly edit: "Düzenle";
12
12
  readonly save: "Kaydet";
13
13
  readonly cancel: "İptal";
14
+ readonly missingTitle: "{{title}} eksik!";
14
15
  readonly paginationShowTotal: "{{from}}-{{to}} / {{total}} kayıt";
15
16
  };
16
17
  export default translations;
@@ -1 +1 @@
1
- {"version":3,"file":"tr.d.ts","sourceRoot":"","sources":["../../../../src/i18n/translations/tr.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;CAeR,CAAC;AAEX,eAAe,YAAY,CAAC"}
1
+ {"version":3,"file":"tr.d.ts","sourceRoot":"","sources":["../../../../src/i18n/translations/tr.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;CAgBR,CAAC;AAEX,eAAe,YAAY,CAAC"}
@@ -13,6 +13,7 @@ const translations = {
13
13
  edit: 'Düzenle',
14
14
  save: 'Kaydet',
15
15
  cancel: 'İptal',
16
+ missingTitle: '{{title}} eksik!',
16
17
  paginationShowTotal: '{{from}}-{{to}} / {{total}} kayıt'
17
18
  };
18
19
  exports.default = translations;
@@ -38,6 +38,10 @@ export interface AkitableProps {
38
38
  * Loading state for the table.
39
39
  */
40
40
  isLoading?: boolean;
41
+ /**
42
+ * Whether to set max-content for horizontal scroll. Defaults to true.
43
+ */
44
+ maxColumnContent?: boolean;
41
45
  /**
42
46
  * Pagination configuration for the table.
43
47
  */
@@ -72,6 +76,19 @@ export interface AkitableHeaderProps {
72
76
  * Additional content for the table header.
73
77
  */
74
78
  extra?: ReactNode;
79
+ /**
80
+ * Download related actions placed next to the pagination.
81
+ */
82
+ downloadActions?: ReactNode;
83
+ /**
84
+ * Reserved width for download actions when they are hidden in single row layouts.
85
+ */
86
+ downloadActionsSlotWidth?: number;
87
+ /**
88
+ * Whether the download actions slot should keep its width even when empty.
89
+ * This only applies when there is no bulk action (Akitable actions) being displayed.
90
+ */
91
+ reserveDownloadActionsSpace?: boolean;
75
92
  }
76
93
  export interface AkitableFooterProps {
77
94
  /**
@@ -92,6 +109,10 @@ export interface AkitableDataTableProps {
92
109
  * Unique key for each table row.
93
110
  */
94
111
  rowKey: string;
112
+ /**
113
+ * Whether to set max-content for horizontal scroll. Defaults to true.
114
+ */
115
+ maxColumnContent?: boolean;
95
116
  /**
96
117
  * Callback for row click events.
97
118
  */
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"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"}
@@ -1,7 +1,11 @@
1
+ :root {
2
+ --akitable-container-padding: 1.25rem;
3
+ }
4
+
1
5
  .akitable-container {
2
6
  background-color: white;
3
7
  border-radius: 0.5rem;
4
- padding: 1.5rem;
8
+ padding: var(--akitable-container-padding);
5
9
  }
6
10
 
7
11
  /* For some weird reason, antd does not allow overriding
@@ -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;AAa1B,OAAO,KAAK,EAGV,aAAa,EACd,MAAM,SAAS,CAAC;AAEjB;;;;;;;;;;GAUG;AAEH,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,sBAwE5C,CAAC"}
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,sBAwE5C,CAAC"}
@@ -5,7 +5,6 @@ import React from 'react';
5
5
  import { ErrorBoundary } from 'react-error-boundary';
6
6
  import { AkitableProvider } from './akitable-context';
7
7
  import { themeOverrides } from './common/theme-overrides';
8
- import { AkitableControls } from './components/controls';
9
8
  import { AkitableDataTable } from './components/datatable';
10
9
  import { fallbackRender } from './components/error';
11
10
  import { AkitableFooter } from './components/footer';
@@ -22,7 +21,7 @@ import { AkitableHeader } from './components/header';
22
21
  * needs in enterprise applications.
23
22
  */
24
23
  export const Akitable = (props) => {
25
- const { actions, columns, data, footer, header, isLoading, pagination, rowKey, onPaginationChanged, onRowClick, onRowEdit, onChangeSorter } = props;
24
+ const { actions, columns, data, footer, header, isLoading, maxColumnContent, pagination, rowKey, onPaginationChanged, onRowClick, onRowEdit, onChangeSorter } = props;
26
25
  // If there is a pagination object, table data should be accessed from type AkitablePaginatedData.
27
26
  // If not, table data should be accessed from type AkitableData.
28
27
  const handleGetParsedData = () => {
@@ -43,7 +42,6 @@ export const Akitable = (props) => {
43
42
  React.createElement(AkitableProvider, { actions: actions, isLoading: isLoading, pagination: Object.assign(Object.assign({}, pagination), { total, hasPagination: !!pagination }), onPaginationChanged: onPaginationChanged },
44
43
  React.createElement(ConfigProvider, { theme: themeOverrides },
45
44
  React.createElement(AkitableHeader, Object.assign({}, header)),
46
- React.createElement(AkitableControls, null),
47
- React.createElement(AkitableDataTable, { columns: columns, data: parsedData, rowKey: rowKey, onRowClick: onRowClick, onRowEdit: onRowEdit, onChangeSorter: onChangeSorter }),
45
+ React.createElement(AkitableDataTable, { columns: columns, data: parsedData, rowKey: rowKey, maxColumnContent: maxColumnContent, onRowClick: onRowClick, onRowEdit: onRowEdit, onChangeSorter: onChangeSorter }),
48
46
  React.createElement(AkitableFooter, Object.assign({}, footer)))))));
49
47
  };
@@ -1 +1 @@
1
- {"version":3,"file":"EditableCell.d.ts","sourceRoot":"","sources":["../../../src/components/EditableCell.tsx"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,CAAC;AAIzB,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,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;CACf;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAoCtE,CAAC;AAEF,eAAe,YAAY,CAAC"}
1
+ {"version":3,"file":"EditableCell.d.ts","sourceRoot":"","sources":["../../../src/components/EditableCell.tsx"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,CAAC;AAIzB,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,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;CACf;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAqCtE,CAAC;AAEF,eAAe,YAAY,CAAC"}
@@ -13,8 +13,10 @@ import './datatable.css';
13
13
  import { Akiform } from '@akinon/akiform';
14
14
  import { Input } from '@akinon/ui-input';
15
15
  import React from 'react';
16
+ import { i18n } from '../i18n';
16
17
  const EditableCell = (_a) => {
17
18
  var { editing, dataIndex, title, record, children } = _a, restProps = __rest(_a, ["editing", "dataIndex", "title", "record", "children"]);
19
+ const { t } = i18n;
18
20
  let initialValue = null;
19
21
  if (dataIndex && Array.isArray(dataIndex)) {
20
22
  initialValue = dataIndex.reduce((acc, key) => acc === null || acc === void 0 ? void 0 : acc[key], record);
@@ -25,7 +27,7 @@ const EditableCell = (_a) => {
25
27
  return (React.createElement("td", Object.assign({}, restProps), editing ? (React.createElement(Akiform.Item, { name: dataIndex, style: { margin: 0 }, rules: [
26
28
  {
27
29
  required: true,
28
- message: `Missing ${title}!`
30
+ message: t('missingTitle', { title })
29
31
  }
30
32
  ], initialValue: initialValue },
31
33
  React.createElement(Input, null))) : (children)));
@@ -1,16 +1,21 @@
1
1
  .akitable-actions {
2
2
  display: flex;
3
- gap: 0.5rem;
3
+ gap: 1rem;
4
4
  align-items: center;
5
5
  }
6
6
 
7
- .akitable-actions .akinon-select {
8
- min-width: 200px;
9
- height: 38px;
7
+ .akitable-actions .akinon-select-selector {
8
+ padding: 0.625rem 1rem !important;
9
+ border-radius: 0.313rem !important;
10
+ }
11
+
12
+ .akitable-actions .akinon-select .akinon-select-selection-placeholder {
13
+ font-weight: 600;
14
+ letter-spacing: 0.1px;
10
15
  }
11
16
 
12
17
  .akitable-actions .akinon-btn {
13
- height: 36px;
18
+ padding: 0.625rem 2.5rem;
14
19
  }
15
20
 
16
21
  .akitable-actions .akitable-actions-info {
@@ -1 +1 @@
1
- {"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../../../src/components/actions.tsx"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAC;AAIvB,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,eAAe,yBA0D3B,CAAC"}
1
+ {"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../../../src/components/actions.tsx"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAC;AAIvB,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,eAAe,yBA2D3B,CAAC"}
@@ -6,25 +6,28 @@ import { useAkitableContext } from '../akitable-context';
6
6
  import { i18n } from '../i18n';
7
7
  export const AkitableActions = () => {
8
8
  const { t } = i18n;
9
- const [selectedAction, setSelectedAction] = React.useState(undefined);
9
+ const [selectedActionIndex, setSelectedActionIndex] = React.useState();
10
10
  const { actions, isLoading, selectedRowKeys, pagination } = useAkitableContext();
11
11
  const options = actions === null || actions === void 0 ? void 0 : actions.map((action, index) => ({
12
- value: index + 1,
12
+ value: index,
13
13
  label: action.label
14
14
  }));
15
15
  const hasSelections = selectedRowKeys && selectedRowKeys.length > 0;
16
- const handleActionChange = (value) => {
17
- setSelectedAction(value);
16
+ const handleChangeAction = (value) => {
17
+ const newSelectedActionIndex = typeof value === 'number' ? value : undefined;
18
+ setSelectedActionIndex(newSelectedActionIndex);
18
19
  };
19
20
  const handleActionTrigger = () => {
20
- if (!selectedAction || !hasSelections)
21
+ if (!hasSelections || selectedActionIndex === undefined)
21
22
  return;
22
- const action = actions === null || actions === void 0 ? void 0 : actions.find((_, index) => index === selectedAction - 1);
23
- action === null || action === void 0 ? void 0 : action.onSelect(selectedRowKeys);
23
+ const action = actions === null || actions === void 0 ? void 0 : actions[selectedActionIndex];
24
+ if (!action)
25
+ return;
26
+ action.onSelect(selectedRowKeys !== null && selectedRowKeys !== void 0 ? selectedRowKeys : []);
24
27
  };
25
28
  return (React.createElement("div", { "data-testid": "akitable-actions", className: "akitable-actions" },
26
- React.createElement(Select, { placeholder: t('selectAction'), value: selectedAction, options: options, onChange: value => handleActionChange(value), disabled: isLoading || (pagination === null || pagination === void 0 ? void 0 : pagination.total) === 0, allowClear: true, "data-testid": "akitable-actions-select" }),
27
- selectedAction && (React.createElement(React.Fragment, null,
28
- React.createElement(Button, { type: "primary", icon: "katalogkontrol", disabled: isLoading || !hasSelections, onClick: handleActionTrigger }, t('apply')),
29
+ React.createElement(Select, { placeholder: t('selectAction'), value: selectedActionIndex, options: options, onChange: handleChangeAction, disabled: isLoading || (pagination === null || pagination === void 0 ? void 0 : pagination.total) === 0, allowClear: true, "data-testid": "akitable-actions-select" }),
30
+ selectedActionIndex !== undefined && (React.createElement(React.Fragment, null,
31
+ React.createElement(Button, { type: "primary", disabled: isLoading || !hasSelections, onClick: handleActionTrigger }, t('apply')),
29
32
  hasSelections && (React.createElement("span", { className: "akitable-actions-info" }, t('selectedCount', { count: selectedRowKeys === null || selectedRowKeys === void 0 ? void 0 : selectedRowKeys.length })))))));
30
33
  };
@@ -1,6 +1,6 @@
1
1
  .akitable-wrapper {
2
- margin-left: -1.5rem;
3
- margin-right: -1.5rem;
2
+ margin-left: calc(var(--akitable-container-padding) * -1);
3
+ margin-right: calc(var(--akitable-container-padding) * -1);
4
4
  margin-bottom: 1rem;
5
5
  }
6
6
 
@@ -1 +1 @@
1
- {"version":3,"file":"datatable.d.ts","sourceRoot":"","sources":["../../../src/components/datatable.tsx"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,CAAC;AAOzB,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAGL,sBAAsB,EAGvB,MAAM,UAAU,CAAC;AAIlB,eAAO,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,sBA8K9D,CAAC"}
1
+ {"version":3,"file":"datatable.d.ts","sourceRoot":"","sources":["../../../src/components/datatable.tsx"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,CAAC;AAOzB,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAGL,sBAAsB,EAGvB,MAAM,UAAU,CAAC;AAIlB,eAAO,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,sBAwL9D,CAAC"}
@@ -12,7 +12,7 @@ import EditableCell from './EditableCell';
12
12
  const { t } = i18n;
13
13
  export const AkitableDataTable = (props) => {
14
14
  const { isLoading, selectedRowKeys, setSelectedRowKeys, actions } = useAkitableContext();
15
- const { columns, data, rowKey, onRowClick, onRowEdit, onChangeSorter } = props;
15
+ const { columns, data, rowKey, maxColumnContent = true, onRowClick, onRowEdit, onChangeSorter } = props;
16
16
  const [form] = Akiform.useForm();
17
17
  const [localColumns, setLocalColumns] = React.useState(columns);
18
18
  const [editingKey, setEditingKey] = React.useState(null);
@@ -96,7 +96,7 @@ export const AkitableDataTable = (props) => {
96
96
  body: {
97
97
  cell: EditableCell
98
98
  }
99
- }, columns: localColumns, dataSource: data, rowKey: (record) => getRowKeyData(record), bordered: true, rowHoverable: true, pagination: false, scroll: { x: 'max-content', scrollToFirstRowOnChange: true }, loading: isLoading, onRow: (record, rowIndex) => {
99
+ }, columns: localColumns, dataSource: data, rowKey: (record) => getRowKeyData(record), bordered: true, rowHoverable: true, pagination: false, scroll: Object.assign(Object.assign({}, (maxColumnContent && { x: 'max-content' })), { scrollToFirstRowOnChange: true }), loading: isLoading, onRow: (record, rowIndex) => {
100
100
  const isEditingRow = checkIsEditingRow(getRowKeyData(record));
101
101
  return Object.assign({}, (!isEditingRow && {
102
102
  onClick: (event) => {
@@ -1,26 +1,31 @@
1
1
  .akitable-header {
2
2
  display: flex;
3
- margin-bottom: 1.5rem;
3
+ flex-wrap: wrap;
4
+ gap: 1rem;
5
+ margin-bottom: 1rem;
4
6
  /* Setting min-height to prevent cumulative layout shifts. */
5
7
  min-height: 40px;
6
- flex-wrap: wrap;
8
+ }
9
+
10
+ .akitable-header--with-actions {
11
+ align-items: flex-start;
7
12
  }
8
13
 
9
14
  .akitable-header-title-container {
10
15
  display: flex;
11
- align-items: center;
12
- gap: 0.1rem;
13
16
  color: var(--color-gray-900);
14
17
  }
15
18
 
16
19
  .akitable-header-title {
17
- font-size: 1.25rem;
18
- font-weight: bold;
20
+ font-size: 1.125rem;
21
+ font-weight: 600;
19
22
  margin: 0;
20
23
  padding: 0;
21
- line-height: 1;
24
+ line-height: normal;
22
25
  display: flex;
23
26
  align-items: center;
27
+ gap: 0.1rem;
28
+ color: var(--color-blue-955);
24
29
  }
25
30
 
26
31
  .akitable-header-title-count-skeleton {
@@ -30,11 +35,13 @@
30
35
  }
31
36
 
32
37
  .akitable-header-title-count {
33
- font-size: 1.25rem;
34
- font-weight: bold;
38
+ font-size: 1.125rem;
39
+ font-weight: 600;
35
40
  margin: 0;
36
41
  padding: 0;
37
- line-height: 1;
42
+ line-height: normal;
43
+ color: var(--color-blue-955);
44
+ margin-left: 0.25rem;
38
45
  }
39
46
 
40
47
  .akitable-header-title-description-skeleton {
@@ -43,17 +50,81 @@
43
50
  }
44
51
 
45
52
  .akitable-header-description {
46
- color: var(--color-gray-400);
53
+ color: var(--color-gray-500);
47
54
  display: block;
48
- margin-top: 0.5rem;
55
+ font-size: 0.875rem;
56
+ font-weight: 500;
57
+ }
58
+
59
+ .akitable-header-actions {
60
+ display: flex;
61
+ flex-direction: column;
62
+ margin-top: 0.563rem;
63
+ }
64
+
65
+ .akitable-header-side {
66
+ margin-left: auto;
67
+ display: flex;
68
+ flex-wrap: wrap;
69
+ justify-content: flex-end;
70
+ gap: 0.75rem;
71
+ }
72
+
73
+ .akitable-header-side--single-row {
74
+ align-items: center;
75
+ }
76
+
77
+ .akitable-header-side--single-row .akitable-header-downloads {
78
+ margin: 0 3.625rem;
79
+ }
80
+
81
+ .akitable-header-side--with-actions {
82
+ flex-direction: column;
83
+ align-items: flex-end;
84
+ align-self: end;
85
+ justify-content: space-between;
86
+ }
87
+
88
+ .akitable-header-side-top {
89
+ display: flex;
90
+ align-items: center;
91
+ justify-content: flex-end;
92
+ gap: 0.75rem;
93
+ }
94
+
95
+ .akitable-header-side-bottom {
96
+ display: flex;
97
+ justify-content: flex-end;
49
98
  }
50
99
 
51
100
  .akitable-header-extra-content {
52
- margin-bottom: 1rem;
53
101
  color: var(--color-gray-300);
54
102
  }
55
103
 
56
- .akitable-header-extra {
57
- margin-left: auto;
58
- text-align: right;
104
+ .akitable-header-downloads {
105
+ display: flex;
106
+ gap: 0.75rem;
107
+ align-items: center;
108
+ }
109
+
110
+ .akitable-header-downloads-placeholder {
111
+ display: block;
112
+ height: 0;
113
+ flex: 0 0 auto;
114
+ }
115
+
116
+ .akitable-header-downloads .akinon-btn {
117
+ font-size: 0.762rem;
118
+ font-weight: bold;
119
+ letter-spacing: 0.038rem;
120
+ display: flex;
121
+ flex-direction: column;
122
+ width: 2.5rem;
123
+ height: 2.5rem;
124
+ padding: 0;
125
+ gap: 0;
126
+ }
127
+
128
+ .akitable-header-downloads .akinon-btn-icon {
129
+ font-size: 0.762rem;
59
130
  }
@@ -1,5 +1,5 @@
1
1
  import './header.css';
2
2
  import React from 'react';
3
3
  import type { AkitableHeaderProps } from '../types';
4
- export declare const AkitableHeader: (props: AkitableHeaderProps) => React.JSX.Element | null;
4
+ export declare const AkitableHeader: (props?: AkitableHeaderProps) => React.JSX.Element | null;
5
5
  //# sourceMappingURL=header.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../src/components/header.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAItB,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAGpD,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,6BA4ExD,CAAC"}
1
+ {"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../src/components/header.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAKtB,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAMpD,eAAO,MAAM,cAAc,GAAI,QAAO,mBAAwB,6BAyK7D,CAAC"}
@@ -1,21 +1,30 @@
1
1
  import './header.css';
2
2
  import { Skeleton } from '@akinon/ui-skeleton';
3
3
  import { Spin } from '@akinon/ui-spin';
4
+ import clsx from 'clsx';
4
5
  import React from 'react';
5
6
  import { useAkitableContext } from '../akitable-context';
6
7
  import { i18n } from '../i18n';
8
+ import { AkitableActions } from './actions';
7
9
  import { AkitablePagination } from './pagination';
8
- export const AkitableHeader = (props) => {
10
+ const DEFAULT_DOWNLOAD_SLOT_WIDTH = 120;
11
+ export const AkitableHeader = (props = {}) => {
9
12
  const { isLoading, pagination, actions } = useAkitableContext();
10
- const { title, extra } = props;
11
- const hasActions = actions && (actions === null || actions === void 0 ? void 0 : actions.length) > 0;
12
- if (!title && !extra)
13
+ const { title, extra, downloadActions, downloadActionsSlotWidth = DEFAULT_DOWNLOAD_SLOT_WIDTH, reserveDownloadActionsSpace = true } = props;
14
+ const hasActions = Boolean(actions && actions.length > 0);
15
+ const hasPagination = Boolean(pagination === null || pagination === void 0 ? void 0 : pagination.hasPagination);
16
+ const shouldRenderHeader = Boolean(title) ||
17
+ Boolean(extra) ||
18
+ Boolean(downloadActions) ||
19
+ hasActions ||
20
+ hasPagination;
21
+ if (!shouldRenderHeader)
13
22
  return null;
14
23
  const renderTitle = () => {
15
24
  return (React.createElement("div", { className: "akitable-header-title-container" },
16
25
  React.createElement("h2", { className: "akitable-header-title" }, title),
17
26
  isLoading ? (React.createElement("span", { "data-testid": "akitable-title-loading-skeleton" },
18
- React.createElement(Skeleton.Button, { active: true, size: "small", className: "ml-1" }))) : (React.createElement("span", { className: "akitable-header-title-count" }, `(${pagination === null || pagination === void 0 ? void 0 : pagination.total})`))));
27
+ React.createElement(Skeleton.Button, { active: true, size: "small", className: "akitable-header-title-count-skeleton" }))) : (React.createElement("span", { className: "akitable-header-title-count" }, `(${pagination === null || pagination === void 0 ? void 0 : pagination.total})`))));
19
28
  };
20
29
  const renderTitleDescription = () => {
21
30
  const descriptionContent = !(pagination === null || pagination === void 0 ? void 0 : pagination.total)
@@ -23,13 +32,48 @@ export const AkitableHeader = (props) => {
23
32
  : i18n.t('resultsFound', { count: pagination === null || pagination === void 0 ? void 0 : pagination.total });
24
33
  return (React.createElement("span", { "data-testid": "akitable-header-description", className: "akitable-header-description" }, descriptionContent));
25
34
  };
26
- return (React.createElement("div", { "data-testid": "akitable-header", className: "akitable-header" },
27
- !!title && (React.createElement("div", { "data-testid": "akitable-header-title-container" },
28
- renderTitle(),
29
- isLoading ? (React.createElement("span", { "data-testid": "akitable-title-description-loading-skeleton" },
30
- React.createElement(Skeleton.Input, { active: true, size: "small", className: "mt-2" }))) : (renderTitleDescription()))),
31
- React.createElement("div", { className: "akitable-header-extra" },
32
- extra && (React.createElement("div", { "data-testid": "akitable-header-extra-content", className: "akitable-header-extra-content" }, isLoading ? (React.createElement(Spin, { "data-testid": "akitable-header-extra-loading-skeleton" })) : (extra))),
33
- !hasActions && (pagination === null || pagination === void 0 ? void 0 : pagination.hasPagination) && (React.createElement("div", { "data-testid": "akitable-header-pagination" },
34
- React.createElement(AkitablePagination, null))))));
35
+ const renderExtraContent = () => {
36
+ if (!extra)
37
+ return null;
38
+ return (React.createElement("div", { "data-testid": "akitable-header-extra-content", className: "akitable-header-extra-content" }, isLoading ? (React.createElement(Spin, { "data-testid": "akitable-header-extra-loading-skeleton" })) : (extra)));
39
+ };
40
+ const renderDownloadActions = () => {
41
+ if (downloadActions) {
42
+ return React.createElement("div", { className: "akitable-header-downloads" }, downloadActions);
43
+ }
44
+ if (hasActions || !reserveDownloadActionsSpace || !hasPagination) {
45
+ return null;
46
+ }
47
+ return (React.createElement("div", { className: "akitable-header-downloads-placeholder", style: { width: downloadActionsSlotWidth } }));
48
+ };
49
+ const renderPagination = () => {
50
+ if (!hasPagination)
51
+ return null;
52
+ return (React.createElement("div", { "data-testid": "akitable-header-pagination" },
53
+ React.createElement(AkitablePagination, null)));
54
+ };
55
+ const extraContent = renderExtraContent();
56
+ const downloadContent = renderDownloadActions();
57
+ const paginationContent = renderPagination();
58
+ return (React.createElement("div", { "data-testid": "akitable-header", className: clsx('akitable-header', {
59
+ 'akitable-header--with-actions': hasActions
60
+ }) },
61
+ React.createElement("div", { className: "akitable-header-main" },
62
+ !!title && (React.createElement("div", { "data-testid": "akitable-header-title-container" },
63
+ renderTitle(),
64
+ isLoading ? (React.createElement("span", { "data-testid": "akitable-title-description-loading-skeleton" },
65
+ React.createElement(Skeleton.Input, { active: true, size: "small", className: "akitable-header-title-description-skeleton" }))) : (renderTitleDescription()))),
66
+ hasActions && (React.createElement("div", { className: "akitable-header-actions" },
67
+ React.createElement(AkitableActions, null)))),
68
+ (extraContent || downloadContent || paginationContent) && (React.createElement("div", { className: clsx('akitable-header-side', {
69
+ 'akitable-header-side--single-row': !hasActions,
70
+ 'akitable-header-side--with-actions': hasActions
71
+ }) }, hasActions ? (React.createElement(React.Fragment, null,
72
+ (extraContent || downloadContent) && (React.createElement("div", { className: "akitable-header-side-top" },
73
+ extraContent,
74
+ downloadContent)),
75
+ paginationContent && (React.createElement("div", { className: "akitable-header-side-bottom" }, paginationContent)))) : (React.createElement(React.Fragment, null,
76
+ extraContent,
77
+ downloadContent,
78
+ paginationContent))))));
35
79
  };
@@ -11,6 +11,7 @@ declare const translations: {
11
11
  readonly edit: "Edit";
12
12
  readonly save: "Save";
13
13
  readonly cancel: "Cancel";
14
+ readonly missingTitle: "Missing {{title}}!";
14
15
  readonly paginationShowTotal: "{{from}}-{{to}} of {{total}} items";
15
16
  };
16
17
  export default translations;
@@ -1 +1 @@
1
- {"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../../src/i18n/translations/en.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;CAeR,CAAC;AAEX,eAAe,YAAY,CAAC"}
1
+ {"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../../src/i18n/translations/en.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;CAgBR,CAAC;AAEX,eAAe,YAAY,CAAC"}
@@ -11,6 +11,7 @@ const translations = {
11
11
  edit: 'Edit',
12
12
  save: 'Save',
13
13
  cancel: 'Cancel',
14
+ missingTitle: 'Missing {{title}}!',
14
15
  paginationShowTotal: '{{from}}-{{to}} of {{total}} items'
15
16
  };
16
17
  export default translations;
@@ -11,6 +11,7 @@ declare const translations: {
11
11
  readonly edit: "Düzenle";
12
12
  readonly save: "Kaydet";
13
13
  readonly cancel: "İptal";
14
+ readonly missingTitle: "{{title}} eksik!";
14
15
  readonly paginationShowTotal: "{{from}}-{{to}} / {{total}} kayıt";
15
16
  };
16
17
  export default translations;
@@ -1 +1 @@
1
- {"version":3,"file":"tr.d.ts","sourceRoot":"","sources":["../../../../src/i18n/translations/tr.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;CAeR,CAAC;AAEX,eAAe,YAAY,CAAC"}
1
+ {"version":3,"file":"tr.d.ts","sourceRoot":"","sources":["../../../../src/i18n/translations/tr.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;CAgBR,CAAC;AAEX,eAAe,YAAY,CAAC"}
@@ -11,6 +11,7 @@ const translations = {
11
11
  edit: 'Düzenle',
12
12
  save: 'Kaydet',
13
13
  cancel: 'İptal',
14
+ missingTitle: '{{title}} eksik!',
14
15
  paginationShowTotal: '{{from}}-{{to}} / {{total}} kayıt'
15
16
  };
16
17
  export default translations;
@@ -38,6 +38,10 @@ export interface AkitableProps {
38
38
  * Loading state for the table.
39
39
  */
40
40
  isLoading?: boolean;
41
+ /**
42
+ * Whether to set max-content for horizontal scroll. Defaults to true.
43
+ */
44
+ maxColumnContent?: boolean;
41
45
  /**
42
46
  * Pagination configuration for the table.
43
47
  */
@@ -72,6 +76,19 @@ export interface AkitableHeaderProps {
72
76
  * Additional content for the table header.
73
77
  */
74
78
  extra?: ReactNode;
79
+ /**
80
+ * Download related actions placed next to the pagination.
81
+ */
82
+ downloadActions?: ReactNode;
83
+ /**
84
+ * Reserved width for download actions when they are hidden in single row layouts.
85
+ */
86
+ downloadActionsSlotWidth?: number;
87
+ /**
88
+ * Whether the download actions slot should keep its width even when empty.
89
+ * This only applies when there is no bulk action (Akitable actions) being displayed.
90
+ */
91
+ reserveDownloadActionsSpace?: boolean;
75
92
  }
76
93
  export interface AkitableFooterProps {
77
94
  /**
@@ -92,6 +109,10 @@ export interface AkitableDataTableProps {
92
109
  * Unique key for each table row.
93
110
  */
94
111
  rowKey: string;
112
+ /**
113
+ * Whether to set max-content for horizontal scroll. Defaults to true.
114
+ */
115
+ maxColumnContent?: boolean;
95
116
  /**
96
117
  * Callback for row click events.
97
118
  */
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"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"}
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.2.3",
3
+ "version": "1.2.5-next.1",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "main": "dist/esm/index.js",
@@ -12,32 +12,32 @@
12
12
  "antd": "^5.27.0",
13
13
  "clsx": "^2.1.1",
14
14
  "react-error-boundary": "^6.0.0",
15
- "@akinon/akiform": "1.1.1",
16
- "@akinon/icons": "1.1.0",
17
- "@akinon/ui-card": "1.1.1",
18
- "@akinon/ui-input": "1.1.1",
19
- "@akinon/ui-pagination": "1.3.2",
20
- "@akinon/ui-select": "1.3.2",
21
- "@akinon/ui-button": "1.3.1",
22
- "@akinon/akilocale": "1.2.0",
23
- "@akinon/ui-result": "1.3.0",
24
- "@akinon/ui-spin": "1.3.1",
25
- "@akinon/ui-progress": "1.1.1",
26
- "@akinon/ui-space": "1.3.1",
27
- "@akinon/ui-typography": "1.1.0",
28
- "@akinon/ui-table": "1.1.0",
29
- "@akinon/ui-theme": "1.1.1",
30
- "@akinon/ui-skeleton": "1.1.0",
31
- "@akinon/ui-steps": "1.1.1"
15
+ "@akinon/akiform": "1.1.2",
16
+ "@akinon/icons": "1.1.2-next.1",
17
+ "@akinon/ui-button": "1.4.0-next.1",
18
+ "@akinon/ui-select": "1.3.4-next.1",
19
+ "@akinon/ui-pagination": "1.3.4-next.1",
20
+ "@akinon/ui-progress": "1.1.3-next.1",
21
+ "@akinon/ui-space": "1.3.3-next.1",
22
+ "@akinon/ui-theme": "1.1.3-next.1",
23
+ "@akinon/ui-result": "1.3.2-next.1",
24
+ "@akinon/ui-skeleton": "1.1.1",
25
+ "@akinon/ui-typography": "1.1.2-next.0",
26
+ "@akinon/ui-spin": "1.3.3-next.1",
27
+ "@akinon/ui-card": "1.1.3-next.1",
28
+ "@akinon/akilocale": "1.2.1",
29
+ "@akinon/ui-steps": "1.1.3-next.1",
30
+ "@akinon/ui-input": "1.1.3-next.1",
31
+ "@akinon/ui-table": "1.1.1"
32
32
  },
33
33
  "devDependencies": {
34
34
  "clean-package": "2.2.0",
35
35
  "copyfiles": "^2.4.1",
36
36
  "rimraf": "^5.0.5",
37
37
  "typescript": "*",
38
- "@akinon/typescript-config": "1.1.0",
39
- "@akinon/vitest-config": "1.1.0",
40
- "@akinon/utils": "1.1.2"
38
+ "@akinon/typescript-config": "1.1.1",
39
+ "@akinon/utils": "1.1.4-next.1",
40
+ "@akinon/vitest-config": "1.1.1"
41
41
  },
42
42
  "peerDependencies": {
43
43
  "react": "^18 || ^19",