maru_design2 2.19.0 → 2.20.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/CHANGELOG.md CHANGED
@@ -1,5 +1,32 @@
1
1
  # Changelog
2
2
 
3
+ ## [2.20.0](https://github.com/42maru-ai/maru-design2/compare/v2.19.1...v2.20.0) (2025-01-06)
4
+
5
+
6
+ ### Features
7
+
8
+ * :sparkles: MultiSelectDropdown - add input type ([0be6256](https://github.com/42maru-ai/maru-design2/commit/0be62561b3fc8d55e6b3481c4fb804fd9c819d07))
9
+ * :sparkles: MultiSelectDropdown - add multi select dropdown ([dee85a2](https://github.com/42maru-ai/maru-design2/commit/dee85a24f6b534062e41d29f378a8f8953a4f9bb))
10
+
11
+
12
+ ### Bug Fixes
13
+
14
+ * :bento: Icon - ADD icons [#402](https://github.com/42maru-ai/maru-design2/issues/402) ([adaee72](https://github.com/42maru-ai/maru-design2/commit/adaee724987bdc36548ea50e9dfd19e5fa6b62fa))
15
+ * :bug: Table - UPDATE maxHeight, width, empty ([2149c9a](https://github.com/42maru-ai/maru-design2/commit/2149c9a9dbc283e4108f048a88a06acf32736a65))
16
+ * :lipstick: Dropdown - update font-weight [#406](https://github.com/42maru-ai/maru-design2/issues/406) ([155dd3a](https://github.com/42maru-ai/maru-design2/commit/155dd3a2e08156954c0f0e1d4c5334718c312d62))
17
+ * :lipstick: Input - update font weight ([dc9a700](https://github.com/42maru-ai/maru-design2/commit/dc9a70051e14672a1fa8026e1dd472a389329c71))
18
+ * :twisted_rightwards_arrows: Icon - merge develop & resolve conflicts ([dcac3a9](https://github.com/42maru-ai/maru-design2/commit/dcac3a9d5472126b4d70a7d7188bdb69d3e9574e))
19
+
20
+ ## [2.19.1](https://github.com/42maru-ai/maru-design2/compare/v2.19.0...v2.19.1) (2024-12-12)
21
+
22
+
23
+ ### Bug Fixes
24
+
25
+ * :bento: Icon - add DotsVertical02 [#395](https://github.com/42maru-ai/maru-design2/issues/395) ([98804e0](https://github.com/42maru-ai/maru-design2/commit/98804e0bff8042f9b6653d72220dcbcc619474f2))
26
+ * :lipstick: Calendar - add letter-spacing ([4051b15](https://github.com/42maru-ai/maru-design2/commit/4051b15781f1fed0a6279dbc9bac620809588e88))
27
+ * :lipstick: Calendar - footer button width ([12b6fcd](https://github.com/42maru-ai/maru-design2/commit/12b6fcdcef5f7c971f5fb269c26eaf9b15f17759))
28
+ * :lipstick: Calendar - footer design [#396](https://github.com/42maru-ai/maru-design2/issues/396) ([d5c4d53](https://github.com/42maru-ai/maru-design2/commit/d5c4d53bdce42fa5c4c7704c38dbc7abdfba237a))
29
+
3
30
  ## [2.19.0](https://github.com/42maru-ai/maru-design2/compare/v2.18.1...v2.19.0) (2024-12-11)
4
31
 
5
32
 
@@ -61,6 +61,7 @@ export declare const ICONS: {
61
61
  readonly Calendar_s1615: "Calendar_s1615";
62
62
  readonly CheckCircleBg_s1612: "CheckCircleBg_s1612";
63
63
  readonly CheckCircleBg_s2410: "CheckCircleBg_s2410";
64
+ readonly CheckCircle_s1210: "CheckCircle_s1210";
64
65
  readonly CheckCircle_s1413: "CheckCircle_s1413";
65
66
  readonly CheckCircle_s1613: "CheckCircle_s1613";
66
67
  readonly Check_s1615: "Check_s1615";
@@ -89,6 +90,7 @@ export declare const ICONS: {
89
90
  readonly ChevronRightCircle_s1812: "ChevronRightCircle_s1812";
90
91
  readonly ChevronRightCircle_s2415: "ChevronRightCircle_s2415";
91
92
  readonly ChevronRightDouble_s1615: "ChevronRightDouble_s1615";
93
+ readonly ChevronRight_s1210: "ChevronRight_s1210";
92
94
  readonly ChevronRight_s1615: "ChevronRight_s1615";
93
95
  readonly ChevronRight_s2020: "ChevronRight_s2020";
94
96
  readonly ChevronRight_s2420: "ChevronRight_s2420";
@@ -143,6 +145,7 @@ export declare const ICONS: {
143
145
  readonly DotsGrid_s2420: "DotsGrid_s2420";
144
146
  readonly DotsGrid_s3220: "DotsGrid_s3220";
145
147
  readonly DotsVertical02_s1612: "DotsVertical02_s1612";
148
+ readonly DotsVertical02_s2010: "DotsVertical02_s2010";
146
149
  readonly DotsVertical_s1815: "DotsVertical_s1815";
147
150
  readonly DotsVertical_s2415: "DotsVertical_s2415";
148
151
  readonly Down_s1610: "Down_s1610";
@@ -199,6 +202,7 @@ export declare const ICONS: {
199
202
  readonly HomeOutline24_s2410: "HomeOutline24_s2410";
200
203
  readonly Home_s2015: "Home_s2015";
201
204
  readonly Home_s2415: "Home_s2415";
205
+ readonly Information_s1410: "Information_s1410";
202
206
  readonly Information_s1610: "Information_s1610";
203
207
  readonly LineChartDown01_s2420: "LineChartDown01_s2420";
204
208
  readonly Loading02_s1415: "Loading02_s1415";
@@ -229,6 +233,7 @@ export declare const ICONS: {
229
233
  readonly PieChart03_s2420: "PieChart03_s2420";
230
234
  readonly PlayCircleLeft_s2420: "PlayCircleLeft_s2420";
231
235
  readonly PlayCircleRight_s2420: "PlayCircleRight_s2420";
236
+ readonly PlusCircle_s1210: "PlusCircle_s1210";
232
237
  readonly PlusCircle_s1413: "PlusCircle_s1413";
233
238
  readonly PlusCircle_s1613: "PlusCircle_s1613";
234
239
  readonly PlusCircle_s1615: "PlusCircle_s1615";
@@ -263,6 +268,7 @@ export declare const ICONS: {
263
268
  readonly Settings02_s2415: "Settings02_s2415";
264
269
  readonly Settings02_s2420: "Settings02_s2420";
265
270
  readonly Share03_s1215: "Share03_s1215";
271
+ readonly Share03_s1413: "Share03_s1413";
266
272
  readonly Share03_s1613: "Share03_s1613";
267
273
  readonly SortDown_s0815: "SortDown_s0815";
268
274
  readonly SortOutline_s1415: "SortOutline_s1415";
@@ -291,9 +297,12 @@ export declare const ICONS: {
291
297
  readonly UserPlus_s1615: "UserPlus_s1615";
292
298
  readonly UserPlus_s1810: "UserPlus_s1810";
293
299
  readonly UserPlus_s1812: "UserPlus_s1812";
300
+ readonly UserSetting_s2015: "UserSetting_s2015";
301
+ readonly User_s1815: "User_s1815";
294
302
  readonly Users01_s1615: "Users01_s1615";
295
303
  readonly Users01_s2420: "Users01_s2420";
296
304
  readonly XCircleBg_s1612: "XCircleBg_s1612";
305
+ readonly XCircle_s1210: "XCircle_s1210";
297
306
  readonly XCircle_s1413: "XCircle_s1413";
298
307
  readonly XCircle_s1613: "XCircle_s1613";
299
308
  readonly XCircle_s2420: "XCircle_s2420";
@@ -0,0 +1,50 @@
1
+ import { TButtonType } from '../../../enums/type';
2
+ import './multi-select-dropdown.scss';
3
+ export interface MultiSelectDropdownProps<T extends Record<string, any>> {
4
+ data: T[];
5
+ /**
6
+ * 선택된 아이디들
7
+ */
8
+ selectedIds: string[];
9
+ onSelect: (ids: string[]) => void;
10
+ /**
11
+ * 아이디로 쓸 키
12
+ */
13
+ idKey: string;
14
+ /**
15
+ * 노출로 쓸 키
16
+ */
17
+ displayKey: string;
18
+ content: string;
19
+ /**
20
+ * 컴포넌트 위치의 기준이 될 엘리먼트 사용자 정의. (@v1 portalAnchor)
21
+ */
22
+ anchorEl?: HTMLElement | null;
23
+ className?: string;
24
+ disabled?: boolean;
25
+ placeholder?: string;
26
+ /**
27
+ * 데이터 타입 (@v1 isSearch)
28
+ * 검색할거면 input
29
+ */
30
+ type?: TButtonType;
31
+ /**
32
+ * type=button일때는 전체 체크박스 옆에 노출되는 문구
33
+ * type=input일때는 인풋박스에 노출되는 placeholder
34
+ */
35
+ typeLabel?: string;
36
+ /**
37
+ * type=input일때 검색 결과 없을때 문구
38
+ */
39
+ noResultMessage?: string;
40
+ /**
41
+ * 토글, 메뉴 가로 크기(px) (@v1 menuPosition.width)
42
+ */
43
+ width?: number;
44
+ /**
45
+ * 메뉴 세로 크기(px) (@v1 menuPosition.height)
46
+ */
47
+ height?: number;
48
+ stopPropagation?: boolean;
49
+ }
50
+ export declare function MultiSelectDropdown<T extends Record<string, any>>({ data, selectedIds, onSelect, idKey, displayKey, content, anchorEl, className, disabled, placeholder, type, typeLabel, noResultMessage, width, height, stopPropagation, }: MultiSelectDropdownProps<T>): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1 @@
1
+ export * from './MultiSelectDropdown';
@@ -0,0 +1,18 @@
1
+ import { TButtonType } from '../../../../enums/type';
2
+ interface Props<T extends Record<string, any>> {
3
+ open: boolean;
4
+ parent: HTMLElement;
5
+ selectedIds: string[];
6
+ idKey: string;
7
+ displayKey: string;
8
+ data: T[];
9
+ type: TButtonType;
10
+ typeLabel?: string;
11
+ noResultMessage?: string;
12
+ width?: number;
13
+ height?: number;
14
+ onSelect: (ids: string[]) => void;
15
+ closeMenu: () => void;
16
+ }
17
+ declare function DropdownMenu<T extends Record<string, any>>({ open, parent, selectedIds, idKey, displayKey, data, type, typeLabel, noResultMessage, width, height, onSelect, closeMenu, }: Props<T>): import("react/jsx-runtime").JSX.Element;
18
+ export default DropdownMenu;
@@ -0,0 +1,6 @@
1
+ interface Props {
2
+ open: boolean;
3
+ focus: boolean;
4
+ }
5
+ declare function Arrow({ open, focus }: Props): import("react/jsx-runtime").JSX.Element;
6
+ export default Arrow;
@@ -0,0 +1,12 @@
1
+ interface Props {
2
+ open: boolean;
3
+ openMenu: () => void;
4
+ selected: boolean;
5
+ content: string;
6
+ width?: number;
7
+ disabled?: boolean;
8
+ placeholder?: string;
9
+ stopPropagation?: boolean;
10
+ }
11
+ declare function DropdownToggleButton({ open, openMenu, selected, content, width, disabled, placeholder, stopPropagation, }: Props): import("react/jsx-runtime").JSX.Element;
12
+ export default DropdownToggleButton;
@@ -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, radioCheckedId, onRadioCheck, filter, kebabMenu, binButton, arrowButton, onRowClick, selectedRow, highlightRows, className, id, maxHeight, noData, loading, emptyBodyHeight, }: TableProps): import("react/jsx-runtime").JSX.Element;
3
+ export declare function Table({ rowIdKey, data, formats, maxHeight, sort, onSort, checkedIds, onCheck, radioCheckedId, onRadioCheck, filter, kebabMenu, binButton, arrowButton, onRowClick, selectedRow, highlightRows, className, id, noData, loading, }: TableProps): import("react/jsx-runtime").JSX.Element;
@@ -38,7 +38,7 @@ interface Props {
38
38
  isLoading: boolean;
39
39
  content?: React.ReactNode;
40
40
  };
41
- emptyBodyHeight?: number;
41
+ emptyBodyHeight: number;
42
42
  }
43
43
  declare function TBody({ rowIdKey, formats, data, checkedIds, onCheck, radioCheckedId, onRadioCheck, hasActionCol, kebabMenu, binButton, arrowButton, onRowClick, selectedRow, highlightRows, noData, loading, emptyBodyHeight, }: Props): import("react/jsx-runtime").JSX.Element;
44
44
  export default TBody;
@@ -9,7 +9,7 @@ interface Props {
9
9
  isLoading: boolean;
10
10
  content?: React.ReactNode;
11
11
  };
12
- emptyBodyHeight?: number;
12
+ emptyBodyHeight: number;
13
13
  }
14
14
  declare function TBodyEmptyContent({ status, noData, loading, emptyBodyHeight, }: Props): import("react/jsx-runtime").JSX.Element;
15
15
  export default TBodyEmptyContent;
@@ -28,6 +28,11 @@ export interface TableProps {
28
28
  * @param columnIdKey
29
29
  */
30
30
  formats: IColumnFormats[];
31
+ /**
32
+ * 테이블의 최대 높이 px (@v2_old tableBodyMaxHeight)
33
+ * 최소 160은 되어야 행 하나가 보입니다.
34
+ */
35
+ maxHeight: number;
31
36
  /**
32
37
  * 소팅할 열과 방향(오름차순, 내림차순)을 설정할뿐 실제로 정렬을 하지는 않습니다. (@v1 currentSort)
33
38
  */
@@ -100,13 +105,6 @@ export interface TableProps {
100
105
  };
101
106
  className?: string;
102
107
  id?: string;
103
- /**
104
- * 테이블의 최대 높이 px (@v2_old tableBodyMaxHeight)
105
- */
106
- maxHeight?: number;
107
- /**
108
- * 테이블의 최소 너비 px
109
- */
110
108
  /**
111
109
  * 데이터가 없을때의 조건과 문구
112
110
  */
@@ -121,8 +119,4 @@ export interface TableProps {
121
119
  isLoading: boolean;
122
120
  content?: React.ReactNode;
123
121
  };
124
- /**
125
- * 데이터가 없거나 로딩일때 테이블 바디(1행) 높이
126
- */
127
- emptyBodyHeight?: number;
128
122
  }
package/dist/index.d.ts CHANGED
@@ -13,6 +13,7 @@ export * from './components/atoms/tooltip';
13
13
  export * from './components/molecules/calendar';
14
14
  export * from './components/molecules/dropdown';
15
15
  export * from './components/molecules/modal';
16
+ export * from './components/molecules/multiSelectDropdown';
16
17
  export * from './components/molecules/pagination';
17
18
  export * from './components/molecules/searchInput';
18
19
  export * from './components/molecules/table';