maru_design2 2.11.1 → 2.12.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 (7) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/components/atoms/icon/iconmap.d.ts +1 -0
  3. package/dist/components/molecules/table/Table.d.ts +1 -1
  4. package/dist/components/molecules/table/body/TBody.d.ts +9 -2
  5. package/dist/components/molecules/table/types.d.ts +8 -0
  6. package/dist/index.js +29 -7
  7. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # Changelog
2
2
 
3
+ ## [2.12.1](https://github.com/42maru-ai/maru-design2/compare/v2.12.0...v2.12.1) (2024-07-15)
4
+
5
+
6
+ ### Bug Fixes
7
+
8
+ * :bug: Table - kebab show defaulty ([78db92c](https://github.com/42maru-ai/maru-design2/commit/78db92cdd5b8aba5c54833427d5b15fc965e25f2))
9
+
10
+ ## [2.12.0](https://github.com/42maru-ai/maru-design2/compare/v2.11.1...v2.12.0) (2024-07-15)
11
+
12
+
13
+ ### Features
14
+
15
+ * :sparkles: Table - ADD highlightRows [#202](https://github.com/42maru-ai/maru-design2/issues/202) ([f618e67](https://github.com/42maru-ai/maru-design2/commit/f618e67f31e68497e90534352103848d52dec3b5))
16
+ * :sparkles: Table - ADD show option to Kebab [#203](https://github.com/42maru-ai/maru-design2/issues/203) ([be8512b](https://github.com/42maru-ai/maru-design2/commit/be8512b590462650eaa33240c0fe69c3d15c00d3))
17
+
18
+
19
+ ### Bug Fixes
20
+
21
+ * :bento: Icon - ADD edit 14 icon [#201](https://github.com/42maru-ai/maru-design2/issues/201) ([bbd732a](https://github.com/42maru-ai/maru-design2/commit/bbd732a58f03253cf8fe3fe0a445ec056eb9512d))
22
+
3
23
  ## [2.11.1](https://github.com/42maru-ai/maru-design2/compare/v2.11.0...v2.11.1) (2024-07-11)
4
24
 
5
25
 
package/dist/components/atoms/icon/iconmap.d.ts CHANGED
@@ -119,6 +119,7 @@ export declare const ICONS: {
119
119
  readonly Downstream_s14: "Downstream_s14";
120
120
  readonly Downstream_s24: "Downstream_s24";
121
121
  readonly DragSelect_s1613: "DragSelect_s1613";
122
+ readonly Edit03_s1413: "Edit03_s1413";
122
123
  readonly Edit03_s1613: "Edit03_s1613";
123
124
  readonly Expand_s1815: "Expand_s1815";
124
125
  readonly EyeOff_s16: "EyeOff_s16";
package/dist/components/molecules/table/Table.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import { TableProps } from './types';
2
2
  import './table.scss';
3
- export declare function Table({ rowIdKey, data, formats, sort, onSort, checkedIds, onCheck, filter, kebabMenu, binButton, onRowClick, selectedRow, className, id, tableBodyMaxHeight, noData, loading, emptyContentHeight, }: TableProps): import("react/jsx-runtime").JSX.Element;
3
+ export declare function Table({ rowIdKey, data, formats, sort, onSort, checkedIds, onCheck, filter, kebabMenu, binButton, onRowClick, selectedRow, highlightRows, className, id, tableBodyMaxHeight, noData, loading, emptyContentHeight, }: TableProps): import("react/jsx-runtime").JSX.Element;
package/dist/components/molecules/table/body/TBody.d.ts CHANGED
@@ -7,7 +7,10 @@ interface Props {
7
7
  checkedIds?: string[];
8
8
  onCheck?: (ids: string[]) => void;
9
9
  hasActionCol: boolean;
10
- kebabContent?: (rowId: string, onClose: () => void) => React.ReactNode;
10
+ kebabMenu?: {
11
+ show: (rowId?: string) => TShow;
12
+ content: (rowId: string, onClose: () => void) => React.ReactNode;
13
+ };
11
14
  binButton?: {
12
15
  show: (rowId?: string) => TShow;
13
16
  onClick: (rowId: string) => void;
@@ -17,6 +20,10 @@ interface Props {
17
20
  rowId: string;
18
21
  className?: string;
19
22
  };
23
+ highlightRows?: {
24
+ rowIds: string[];
25
+ className?: string;
26
+ };
20
27
  noData?: {
21
28
  isNoData: boolean;
22
29
  message: string;
@@ -27,5 +34,5 @@ interface Props {
27
34
  };
28
35
  emptyContentHeight?: number;
29
36
  }
30
- declare function TBody({ rowIdKey, formats, data, checkedIds, onCheck, hasActionCol, kebabContent, binButton, onRowClick, selectedRow, noData, loading, emptyContentHeight, }: Props): import("react/jsx-runtime").JSX.Element;
37
+ declare function TBody({ rowIdKey, formats, data, checkedIds, onCheck, hasActionCol, kebabMenu, binButton, onRowClick, selectedRow, highlightRows, noData, loading, emptyContentHeight, }: Props): import("react/jsx-runtime").JSX.Element;
31
38
  export default TBody;
package/dist/components/molecules/table/types.d.ts CHANGED
@@ -50,6 +50,7 @@ export interface TableProps {
50
50
  * 최우측 컬럼 바디의 더보기 메뉴. binButton과 같이 쓸 수 없음. { content, width } (@v1 hamberger)
51
51
  */
52
52
  kebabMenu?: {
53
+ show: (rowId?: string) => TShow;
53
54
  content: (rowId: string, onClose: () => void) => React.ReactNode;
54
55
  };
55
56
  /**
@@ -70,6 +71,13 @@ export interface TableProps {
70
71
  rowId: string;
71
72
  className?: string;
72
73
  };
74
+ /**
75
+ * 하이라이팅할 행과 스타일 지정
76
+ */
77
+ highlightRows?: {
78
+ rowIds: string[];
79
+ className?: string;
80
+ };
73
81
  className?: string;
74
82
  id?: string;
75
83
  /**
package/dist/index.js CHANGED
@@ -1728,6 +1728,21 @@ var iconmap = {
1728
1728
  "circles": [],
1729
1729
  "rects": []
1730
1730
  },
1731
+ "Edit03_s1413": {
1732
+ "width": "14",
1733
+ "height": "14",
1734
+ "viewBox": "0 0 14 14",
1735
+ "fill": "none",
1736
+ "paths": [{
1737
+ "d": "M7.24998 12.4874H12.5M2 12.4874H2.97682C3.26217 12.4874 3.40485 12.4874 3.53912 12.4552C3.65816 12.4266 3.77196 12.3795 3.87635 12.3155C3.99408 12.2434 4.09497 12.1425 4.29675 11.9407L11.625 4.61244C12.1083 4.12919 12.1083 3.34569 11.625 2.86244C11.1418 2.37919 10.3583 2.37919 9.87501 2.86244L2.54674 10.1907C2.34496 10.3925 2.24407 10.4934 2.17192 10.6111C2.10795 10.7155 2.06081 10.8293 2.03224 10.9483C2 11.0826 2 11.2253 2 11.5106V12.4874Z",
1738
+ "stroke": "#5C5C5C",
1739
+ "strokeWidth": "1.3",
1740
+ "strokeLinecap": "round",
1741
+ "strokeLinejoin": "round"
1742
+ }],
1743
+ "circles": [],
1744
+ "rects": []
1745
+ },
1731
1746
  "Edit03_s1613": {
1732
1747
  "width": "16",
1733
1748
  "height": "16",
@@ -3606,6 +3621,7 @@ var ICONS = {
3606
3621
  "Downstream_s14": "Downstream_s14",
3607
3622
  "Downstream_s24": "Downstream_s24",
3608
3623
  "DragSelect_s1613": "DragSelect_s1613",
3624
+ "Edit03_s1413": "Edit03_s1413",
3609
3625
  "Edit03_s1613": "Edit03_s1613",
3610
3626
  "Expand_s1815": "Expand_s1815",
3611
3627
  "EyeOff_s16": "EyeOff_s16",
@@ -24036,10 +24052,11 @@ function TBody(_a) {
24036
24052
  checkedIds = _a.checkedIds,
24037
24053
  onCheck = _a.onCheck,
24038
24054
  hasActionCol = _a.hasActionCol,
24039
- kebabContent = _a.kebabContent,
24055
+ kebabMenu = _a.kebabMenu,
24040
24056
  binButton = _a.binButton,
24041
24057
  onRowClick = _a.onRowClick,
24042
24058
  selectedRow = _a.selectedRow,
24059
+ highlightRows = _a.highlightRows,
24043
24060
  noData = _a.noData,
24044
24061
  loading = _a.loading,
24045
24062
  emptyContentHeight = _a.emptyContentHeight;
@@ -24094,8 +24111,9 @@ function TBody(_a) {
24094
24111
  onMouseLeave: handleRowLeave(),
24095
24112
  className: classNames({
24096
24113
  'clickable-row': onRowClick,
24097
- 'selected-row': selectedRow && (selectedRow === null || selectedRow === void 0 ? void 0 : selectedRow.rowId) === row[rowIdKey] || hoveredRowId === row[rowIdKey]
24098
- }, selectedRow && (selectedRow === null || selectedRow === void 0 ? void 0 : selectedRow.className))
24114
+ 'selected-row': selectedRow && (selectedRow === null || selectedRow === void 0 ? void 0 : selectedRow.rowId) === row[rowIdKey] || hoveredRowId === row[rowIdKey],
24115
+ 'highlight-row': highlightRows && (highlightRows === null || highlightRows === void 0 ? void 0 : highlightRows.rowIds.includes(row[rowIdKey]))
24116
+ }, selectedRow && (selectedRow === null || selectedRow === void 0 ? void 0 : selectedRow.className), highlightRows && (highlightRows === null || highlightRows === void 0 ? void 0 : highlightRows.className))
24099
24117
  }, {
24100
24118
  children: [checkedIds != null && jsx(CheckboxTd, {
24101
24119
  rowId: row[rowIdKey],
@@ -24107,9 +24125,11 @@ function TBody(_a) {
24107
24125
  return jsx("td", {
24108
24126
  children: format.customColumn ? format.customColumn(row[format.columnIdKey], row[rowIdKey]) : row[format.columnIdKey]
24109
24127
  }, "cell-".concat(row[format.columnIdKey], "-").concat(cellHashId));
24110
- }), hasActionCol && kebabContent ? jsx(KebabMenuTd, {
24128
+ }), (kebabMenu === null || kebabMenu === void 0 ? void 0 : kebabMenu.show(row[rowIdKey])) === 'always' || (kebabMenu === null || kebabMenu === void 0 ? void 0 : kebabMenu.show(row[rowIdKey])) === 'hover' && hoveredRowId === row[rowIdKey] ?
24129
+ // eslint-disable-next-line react/jsx-indent
24130
+ jsx(KebabMenuTd, {
24111
24131
  rowId: row[rowIdKey],
24112
- kebabContent: kebabContent
24132
+ kebabContent: kebabMenu.content
24113
24133
  }) : (binButton === null || binButton === void 0 ? void 0 : binButton.show(row[rowIdKey])) === 'always' || (binButton === null || binButton === void 0 ? void 0 : binButton.show(row[rowIdKey])) === 'hover' && hoveredRowId === row[rowIdKey] ?
24114
24134
  // eslint-disable-next-line jsx-a11y/control-has-associated-label, react/jsx-indent
24115
24135
  jsx("td", {
@@ -24306,7 +24326,7 @@ function Colgroup(_a) {
24306
24326
  });
24307
24327
  }
24308
24328
 
24309
- var css_248z$1 = "@-webkit-keyframes rotate {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n@keyframes rotate {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n@-webkit-keyframes blink {\n 0% {\n opacity: 0.6;\n }\n 20% {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n }\n 100% {\n opacity: 0.6;\n }\n}\n@keyframes blink {\n 0% {\n opacity: 0.6;\n }\n 20% {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n }\n 100% {\n opacity: 0.6;\n }\n}\n@-webkit-keyframes fadein {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n@keyframes fadein {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n.maru-table-wrapper {\n width: 100%;\n background-color: white;\n box-shadow: 0px 0px 6px 0px #e4e4e4;\n border-radius: 10px;\n}\n.maru-table-wrapper .maru-table-header-wrapper,\n.maru-table-wrapper .maru-table-body-wrapper {\n width: 100%;\n}\n.maru-table-wrapper tr {\n height: 54px;\n}\n.maru-table-wrapper th,\n.maru-table-wrapper td {\n text-align: start;\n vertical-align: middle;\n padding: 16.5px 15px;\n word-break: break-word;\n color: #5c5c5c;\n}\n.maru-table-wrapper th:first-of-type,\n.maru-table-wrapper td:first-of-type {\n padding: 16.5px 25px;\n}\n.maru-table-wrapper .checkbox-td {\n padding: 18px 15px 18px 25px !important;\n}\n.maru-table-wrapper .maru-table-header tr {\n border-bottom: 1px solid #e4e4e4;\n}\n.maru-table-wrapper .maru-table-header tr th {\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 14px;\n letter-spacing: -0.56px;\n font-weight: 700;\n}\n.maru-table-wrapper .maru-table-header .filter-th {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 16.5px;\n}\n.maru-table-wrapper .maru-table-header .filter-th > div {\n width: 100%;\n height: 33px;\n}\n.maru-table-wrapper .maru-table-header .filter-buttons-th {\n display: flex;\n flex-direction: column;\n gap: 26px;\n}\n.maru-table-wrapper .maru-table-header .maru-table-header-sortable {\n padding: unset;\n margin: unset;\n color: #5c5c5c;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 14px;\n letter-spacing: -0.56px;\n font-weight: 700;\n}\n.maru-table-wrapper .maru-table-body-scroll-wrapper {\n overflow-y: auto;\n}\n.maru-table-wrapper .maru-table-body-scroll-wrapper .maru-table-scroll {\n overflow-y: auto;\n}\n.maru-table-wrapper .maru-table-body tr:not(:last-of-type) {\n border-bottom: 1px solid #fafafa;\n}\n.maru-table-wrapper .maru-table-body tr:hover,\n.maru-table-wrapper .maru-table-body .clickable-row:hover,\n.maru-table-wrapper .maru-table-body .selected-row {\n background-color: var(--p-05);\n}\n.maru-table-wrapper .maru-table-body td {\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 14px;\n letter-spacing: -0.56px;\n font-weight: 500;\n}\n.maru-table-wrapper .maru-table-body tr:last-of-type td:first-of-type {\n border-bottom-left-radius: 10px;\n}\n.maru-table-wrapper .maru-table-body tr:last-of-type td:last-of-type {\n border-bottom-right-radius: 10px;\n}\n.maru-table-wrapper .maru-table-body .clickable-row {\n cursor: pointer;\n}\n.maru-table-wrapper .maru-table-body-kebab-wrapper {\n text-align: center;\n}\n.maru-table-wrapper .maru-table-body-kebab {\n margin: unset;\n padding: unset;\n height: auto;\n}\n.maru-table-wrapper .maru-table-body-empty-tr > td {\n width: 100%;\n vertical-align: middle;\n text-align: center;\n}\n.maru-table-wrapper .maru-table-body-empty-tr > td p {\n margin-top: 20px;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 14px;\n letter-spacing: -0.56px;\n font-weight: 500;\n color: #bdbdbd;\n}\n.maru-table-wrapper .maru-table-body-empty-tr:hover {\n background-color: inherit !important;\n}\n.maru-table-wrapper .maru-table-body-empty-tr .loading-wrapper {\n -webkit-animation: blink 1s infinite;\n animation: blink 1s infinite;\n}";
24329
+ var css_248z$1 = "@-webkit-keyframes rotate {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n@keyframes rotate {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n@-webkit-keyframes blink {\n 0% {\n opacity: 0.6;\n }\n 20% {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n }\n 100% {\n opacity: 0.6;\n }\n}\n@keyframes blink {\n 0% {\n opacity: 0.6;\n }\n 20% {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n }\n 100% {\n opacity: 0.6;\n }\n}\n@-webkit-keyframes fadein {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n@keyframes fadein {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n.maru-table-wrapper {\n width: 100%;\n background-color: white;\n box-shadow: 0px 0px 6px 0px #e4e4e4;\n border-radius: 10px;\n}\n.maru-table-wrapper .maru-table-header-wrapper,\n.maru-table-wrapper .maru-table-body-wrapper {\n width: 100%;\n}\n.maru-table-wrapper tr {\n height: 54px;\n}\n.maru-table-wrapper th,\n.maru-table-wrapper td {\n text-align: start;\n vertical-align: middle;\n padding: 16.5px 15px;\n word-break: break-word;\n color: #5c5c5c;\n}\n.maru-table-wrapper th:first-of-type,\n.maru-table-wrapper td:first-of-type {\n padding: 16.5px 25px;\n}\n.maru-table-wrapper .checkbox-td {\n padding: 18px 15px 18px 25px !important;\n}\n.maru-table-wrapper .maru-table-header tr {\n border-bottom: 1px solid #e4e4e4;\n}\n.maru-table-wrapper .maru-table-header tr th {\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 14px;\n letter-spacing: -0.56px;\n font-weight: 700;\n}\n.maru-table-wrapper .maru-table-header .filter-th {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 16.5px;\n}\n.maru-table-wrapper .maru-table-header .filter-th > div {\n width: 100%;\n height: 33px;\n}\n.maru-table-wrapper .maru-table-header .filter-buttons-th {\n display: flex;\n flex-direction: column;\n gap: 26px;\n}\n.maru-table-wrapper .maru-table-header .maru-table-header-sortable {\n padding: unset;\n margin: unset;\n color: #5c5c5c;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 14px;\n letter-spacing: -0.56px;\n font-weight: 700;\n}\n.maru-table-wrapper .maru-table-body-scroll-wrapper {\n overflow-y: auto;\n}\n.maru-table-wrapper .maru-table-body-scroll-wrapper .maru-table-scroll {\n overflow-y: auto;\n}\n.maru-table-wrapper .maru-table-body tr:not(:last-of-type) {\n border-bottom: 1px solid #fafafa;\n}\n.maru-table-wrapper .maru-table-body tr:hover,\n.maru-table-wrapper .maru-table-body .clickable-row:hover,\n.maru-table-wrapper .maru-table-body .selected-row {\n background-color: var(--p-05);\n}\n.maru-table-wrapper .maru-table-body .highlight-row {\n background-color: var(--p-20);\n}\n.maru-table-wrapper .maru-table-body td {\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 14px;\n letter-spacing: -0.56px;\n font-weight: 500;\n}\n.maru-table-wrapper .maru-table-body tr:last-of-type td:first-of-type {\n border-bottom-left-radius: 10px;\n}\n.maru-table-wrapper .maru-table-body tr:last-of-type td:last-of-type {\n border-bottom-right-radius: 10px;\n}\n.maru-table-wrapper .maru-table-body .clickable-row {\n cursor: pointer;\n}\n.maru-table-wrapper .maru-table-body-kebab-wrapper {\n text-align: center;\n}\n.maru-table-wrapper .maru-table-body-kebab {\n margin: unset;\n padding: unset;\n height: auto;\n}\n.maru-table-wrapper .maru-table-body-empty-tr > td {\n width: 100%;\n vertical-align: middle;\n text-align: center;\n}\n.maru-table-wrapper .maru-table-body-empty-tr > td p {\n margin-top: 20px;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 14px;\n letter-spacing: -0.56px;\n font-weight: 500;\n color: #bdbdbd;\n}\n.maru-table-wrapper .maru-table-body-empty-tr:hover {\n background-color: inherit !important;\n}\n.maru-table-wrapper .maru-table-body-empty-tr .loading-wrapper {\n -webkit-animation: blink 1s infinite;\n animation: blink 1s infinite;\n}";
24310
24330
  styleInject(css_248z$1);
24311
24331
 
24312
24332
  // eslint-disable-next-line import/prefer-default-export
@@ -24323,6 +24343,7 @@ function Table(_a) {
24323
24343
  binButton = _a.binButton,
24324
24344
  onRowClick = _a.onRowClick,
24325
24345
  selectedRow = _a.selectedRow,
24346
+ highlightRows = _a.highlightRows,
24326
24347
  className = _a.className,
24327
24348
  id = _a.id,
24328
24349
  tableBodyMaxHeight = _a.tableBodyMaxHeight,
@@ -24469,10 +24490,11 @@ function Table(_a) {
24469
24490
  checkedIds: checkedIds,
24470
24491
  onCheck: onCheck,
24471
24492
  hasActionCol: hasActionCol,
24472
- kebabContent: kebabMenu === null || kebabMenu === void 0 ? void 0 : kebabMenu.content,
24493
+ kebabMenu: kebabMenu,
24473
24494
  binButton: binButton,
24474
24495
  onRowClick: onRowClick,
24475
24496
  selectedRow: selectedRow,
24497
+ highlightRows: highlightRows,
24476
24498
  noData: noData,
24477
24499
  loading: loading,
24478
24500
  emptyContentHeight: emptyContentHeight
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "maru_design2",
3
- "version": "2.11.1",
3
+ "version": "2.12.1",
4
4
  "main": "./dist/index.js",
5
5
  "author": "zena-42maru",
6
6
  "license": "MIT",