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 +27 -0
- package/dist/components/atoms/icon/iconmap.d.ts +9 -0
- package/dist/components/molecules/multiSelectDropdown/MultiSelectDropdown.d.ts +50 -0
- package/dist/components/molecules/multiSelectDropdown/index.d.ts +1 -0
- package/dist/components/molecules/multiSelectDropdown/menu/index.d.ts +18 -0
- package/dist/components/molecules/multiSelectDropdown/toggle/Arrow.d.ts +6 -0
- package/dist/components/molecules/multiSelectDropdown/toggle/index.d.ts +12 -0
- package/dist/components/molecules/table/Table.d.ts +1 -1
- package/dist/components/molecules/table/body/TBody.d.ts +1 -1
- package/dist/components/molecules/table/body/TBodyEmptyContent.d.ts +1 -1
- package/dist/components/molecules/table/types.d.ts +5 -11
- package/dist/index.d.ts +1 -0
- package/dist/index.js +576 -92
- package/package.json +1 -1
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,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,
|
|
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
|
|
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
|
|
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';
|