maru_design2 2.2.0 → 2.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/atoms/chip/Chip.d.ts +4 -3
- package/dist/components/atoms/icon/iconmap.d.ts +14 -31
- package/dist/components/atoms/input/Input.d.ts +4 -4
- package/dist/components/atoms/popover/Popover.d.ts +1 -5
- package/dist/components/molecules/table/Table.d.ts +1 -1
- package/dist/components/molecules/table/body/TBody.d.ts +8 -1
- package/dist/components/molecules/table/types.d.ts +19 -0
- package/dist/hooks/useCreatePortal.d.ts +2 -2
- package/dist/index.js +159 -433
- package/package.json +1 -1
|
@@ -1,12 +1,13 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import { TColor } from '../../../enums/color';
|
|
2
3
|
import { TChipSize } from '../../../enums/size';
|
|
3
4
|
import { TChipVariant } from '../../../enums/variant';
|
|
4
5
|
import './chip.scss';
|
|
5
6
|
export interface ChipProps {
|
|
6
7
|
/**
|
|
7
|
-
* 컴포넌트에 들어갈 내용. number인 경우 천의 자리마다 컴마(,) 표시됨. [string | number].
|
|
8
|
+
* 컴포넌트에 들어갈 내용. number인 경우 천의 자리마다 컴마(,) 표시됨. [React.ReactNode | string | number].
|
|
8
9
|
*/
|
|
9
|
-
|
|
10
|
+
children: React.ReactNode | string | number;
|
|
10
11
|
className?: string;
|
|
11
12
|
/**
|
|
12
13
|
* ['primary', 'secondary', 'positive', 'warning', 'danger']. (@v1 variant)
|
|
@@ -21,4 +22,4 @@ export interface ChipProps {
|
|
|
21
22
|
*/
|
|
22
23
|
variant?: TChipVariant;
|
|
23
24
|
}
|
|
24
|
-
export declare function Chip({
|
|
25
|
+
export declare function Chip({ children, className, color, size, variant, }: ChipProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -23,13 +23,12 @@ export declare const iconmap: {
|
|
|
23
23
|
};
|
|
24
24
|
};
|
|
25
25
|
export declare const ICONS: {
|
|
26
|
-
readonly
|
|
27
|
-
readonly
|
|
28
|
-
readonly
|
|
26
|
+
readonly KThin: "KThin";
|
|
27
|
+
readonly TThin: "TThin";
|
|
28
|
+
readonly VThin: "VThin";
|
|
29
29
|
readonly AddLineThin: "AddLineThin";
|
|
30
30
|
readonly AlertCircleThin: "AlertCircleThin";
|
|
31
31
|
readonly AlertTriangleThin: "AlertTriangleThin";
|
|
32
|
-
readonly AlertTriangle: "AlertTriangle";
|
|
33
32
|
readonly ArrowRightThin: "ArrowRightThin";
|
|
34
33
|
readonly ArrowRight: "ArrowRight";
|
|
35
34
|
readonly Atom01Thin: "Atom01Thin";
|
|
@@ -39,13 +38,9 @@ export declare const ICONS: {
|
|
|
39
38
|
readonly BookOpen02: "BookOpen02";
|
|
40
39
|
readonly CalendarDate: "CalendarDate";
|
|
41
40
|
readonly CalendarThin: "CalendarThin";
|
|
42
|
-
readonly Calendar: "Calendar";
|
|
43
41
|
readonly CheckboxIndeterminateThin: "CheckboxIndeterminateThin";
|
|
44
|
-
readonly CheckboxIndeterminate: "CheckboxIndeterminate";
|
|
45
42
|
readonly CheckboxOffThin: "CheckboxOffThin";
|
|
46
|
-
readonly CheckboxOff: "CheckboxOff";
|
|
47
43
|
readonly CheckboxOnThin: "CheckboxOnThin";
|
|
48
|
-
readonly CheckboxOn: "CheckboxOn";
|
|
49
44
|
readonly ChevronDownThin: "ChevronDownThin";
|
|
50
45
|
readonly ChevronDown: "ChevronDown";
|
|
51
46
|
readonly ChevronLeftDoubleThin: "ChevronLeftDoubleThin";
|
|
@@ -54,7 +49,6 @@ export declare const ICONS: {
|
|
|
54
49
|
readonly ChevronRightDoubleThin: "ChevronRightDoubleThin";
|
|
55
50
|
readonly ChevronRightThin: "ChevronRightThin";
|
|
56
51
|
readonly ChevronRight: "ChevronRight";
|
|
57
|
-
readonly ChevronSelectorVerticalThin: "ChevronSelectorVerticalThin";
|
|
58
52
|
readonly ChevronSelectorVertical: "ChevronSelectorVertical";
|
|
59
53
|
readonly ChevronUpThin: "ChevronUpThin";
|
|
60
54
|
readonly ChevronUp: "ChevronUp";
|
|
@@ -66,14 +60,13 @@ export declare const ICONS: {
|
|
|
66
60
|
readonly Clipboard: "Clipboard";
|
|
67
61
|
readonly CodeSnippet02: "CodeSnippet02";
|
|
68
62
|
readonly Copy03Thin: "Copy03Thin";
|
|
69
|
-
readonly Copy03: "Copy03";
|
|
70
63
|
readonly CornerDownRightThin: "CornerDownRightThin";
|
|
71
64
|
readonly CornerDownRight: "CornerDownRight";
|
|
72
|
-
readonly
|
|
73
|
-
readonly
|
|
65
|
+
readonly CornerUpLeftThin: "CornerUpLeftThin";
|
|
66
|
+
readonly CornerUpRightThin: "CornerUpRightThin";
|
|
74
67
|
readonly CurrencyDollar: "CurrencyDollar";
|
|
75
|
-
readonly
|
|
76
|
-
readonly
|
|
68
|
+
readonly Cursor04Thin: "Cursor04Thin";
|
|
69
|
+
readonly CursorBoxThin: "CursorBoxThin";
|
|
77
70
|
readonly Database01Thin: "Database01Thin";
|
|
78
71
|
readonly Database01: "Database01";
|
|
79
72
|
readonly Database02Thin: "Database02Thin";
|
|
@@ -87,14 +80,11 @@ export declare const ICONS: {
|
|
|
87
80
|
readonly DotsGridThin: "DotsGridThin";
|
|
88
81
|
readonly DotsGrid: "DotsGrid";
|
|
89
82
|
readonly DotsVerticalThin: "DotsVerticalThin";
|
|
90
|
-
readonly DotsVertical: "DotsVertical";
|
|
91
83
|
readonly DownThin: "DownThin";
|
|
92
84
|
readonly Download01Thin: "Download01Thin";
|
|
93
|
-
readonly Download01: "Download01";
|
|
94
85
|
readonly Downstream: "Downstream";
|
|
95
86
|
readonly Edit03Thin: "Edit03Thin";
|
|
96
|
-
readonly
|
|
97
|
-
readonly Expand: "Expand";
|
|
87
|
+
readonly ExpandThin: "ExpandThin";
|
|
98
88
|
readonly FiEyeOffThin: "FiEyeOffThin";
|
|
99
89
|
readonly FiEyeThin: "FiEyeThin";
|
|
100
90
|
readonly File02Thin: "File02Thin";
|
|
@@ -113,17 +103,16 @@ export declare const ICONS: {
|
|
|
113
103
|
readonly FileX02Thin: "FileX02Thin";
|
|
114
104
|
readonly FileX02: "FileX02";
|
|
115
105
|
readonly FilterLinesThin: "FilterLinesThin";
|
|
116
|
-
readonly FilterLines: "FilterLines";
|
|
117
106
|
readonly FolderUploadThin: "FolderUploadThin";
|
|
118
107
|
readonly FolderUpload: "FolderUpload";
|
|
119
108
|
readonly Globe01Thin: "Globe01Thin";
|
|
120
109
|
readonly GraduationHat01Thin: "GraduationHat01Thin";
|
|
121
110
|
readonly GraduationHat01: "GraduationHat01";
|
|
122
111
|
readonly InformationThin: "InformationThin";
|
|
123
|
-
readonly Information: "Information";
|
|
124
112
|
readonly LineChartDown01: "LineChartDown01";
|
|
125
113
|
readonly Loading02Thin: "Loading02Thin";
|
|
126
114
|
readonly Loading02: "Loading02";
|
|
115
|
+
readonly Lock01Thin: "Lock01Thin";
|
|
127
116
|
readonly LogOut01Thin: "LogOut01Thin";
|
|
128
117
|
readonly MessageCheckSquare: "MessageCheckSquare";
|
|
129
118
|
readonly MessageCheckThin: "MessageCheckThin";
|
|
@@ -131,11 +120,10 @@ export declare const ICONS: {
|
|
|
131
120
|
readonly MessageNotificationThin: "MessageNotificationThin";
|
|
132
121
|
readonly MessageTextSquare02: "MessageTextSquare02";
|
|
133
122
|
readonly MessageTextThin: "MessageTextThin";
|
|
123
|
+
readonly MessageThin: "MessageThin";
|
|
134
124
|
readonly MessageXSquare: "MessageXSquare";
|
|
135
125
|
readonly MessageXThin: "MessageXThin";
|
|
136
|
-
readonly Message: "Message";
|
|
137
126
|
readonly MoveThin: "MoveThin";
|
|
138
|
-
readonly Move: "Move";
|
|
139
127
|
readonly Network03: "Network03";
|
|
140
128
|
readonly Network04: "Network04";
|
|
141
129
|
readonly PauseThin: "PauseThin";
|
|
@@ -152,38 +140,33 @@ export declare const ICONS: {
|
|
|
152
140
|
readonly RefreshCcw02: "RefreshCcw02";
|
|
153
141
|
readonly RefreshCw01Thin: "RefreshCw01Thin";
|
|
154
142
|
readonly RefreshCw02Thin: "RefreshCw02Thin";
|
|
155
|
-
readonly
|
|
143
|
+
readonly ReverseLeftThin: "ReverseLeftThin";
|
|
156
144
|
readonly SearchMdThin: "SearchMdThin";
|
|
157
145
|
readonly SearchMd: "SearchMd";
|
|
158
146
|
readonly Settings02Thin: "Settings02Thin";
|
|
159
147
|
readonly Share03Thin: "Share03Thin";
|
|
160
|
-
readonly Share03: "Share03";
|
|
161
148
|
readonly SortOutlineThin: "SortOutlineThin";
|
|
162
|
-
readonly SortOutline: "SortOutline";
|
|
163
149
|
readonly StateThin: "StateThin";
|
|
164
150
|
readonly StopCircleThin: "StopCircleThin";
|
|
165
151
|
readonly StopCircle: "StopCircle";
|
|
166
152
|
readonly SubtractLineThin: "SubtractLineThin";
|
|
167
153
|
readonly SuccessThin: "SuccessThin";
|
|
168
154
|
readonly SwitchHorizontal02Thin: "SwitchHorizontal02Thin";
|
|
169
|
-
readonly
|
|
155
|
+
readonly TransformThin: "TransformThin";
|
|
170
156
|
readonly Trash01Thin: "Trash01Thin";
|
|
171
157
|
readonly Trash01: "Trash01";
|
|
172
158
|
readonly Type01: "Type01";
|
|
173
159
|
readonly UpThin: "UpThin";
|
|
174
160
|
readonly Upload01Thin: "Upload01Thin";
|
|
175
|
-
readonly Upload01: "Upload01";
|
|
176
161
|
readonly UserCircleThin: "UserCircleThin";
|
|
177
162
|
readonly UserPlusThin: "UserPlusThin";
|
|
178
163
|
readonly Users01Thin: "Users01Thin";
|
|
179
164
|
readonly Users01: "Users01";
|
|
180
165
|
readonly XCircleThin: "XCircleThin";
|
|
181
166
|
readonly XCircle: "XCircle";
|
|
182
|
-
readonly XLargeThin: "XLargeThin";
|
|
183
167
|
readonly XLarge: "XLarge";
|
|
184
168
|
readonly XSmallThin: "XSmallThin";
|
|
185
|
-
readonly
|
|
186
|
-
readonly
|
|
187
|
-
readonly ZoomOut: "ZoomOut";
|
|
169
|
+
readonly ZoomInThin: "ZoomInThin";
|
|
170
|
+
readonly ZoomOutThin: "ZoomOutThin";
|
|
188
171
|
};
|
|
189
172
|
export type TIcons = (typeof ICONS)[keyof typeof ICONS];
|
|
@@ -2,10 +2,6 @@ import React from 'react';
|
|
|
2
2
|
import { TInputType } from '../../../enums/type';
|
|
3
3
|
import './input.scss';
|
|
4
4
|
export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
|
|
5
|
-
/**
|
|
6
|
-
* 초기화 함수 (@v1 hasClearBtn, onClear)
|
|
7
|
-
*/
|
|
8
|
-
onClear: () => void;
|
|
9
5
|
/**
|
|
10
6
|
* 에러났을때 메시지. (@v1 isValid, validMessage)
|
|
11
7
|
*/
|
|
@@ -15,6 +11,10 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
|
|
|
15
11
|
* 데이터 타입. ['text', 'password', 'number']
|
|
16
12
|
*/
|
|
17
13
|
type?: TInputType;
|
|
14
|
+
/**
|
|
15
|
+
* 초기화 함수 (@v1 hasClearBtn, onClear)
|
|
16
|
+
*/
|
|
17
|
+
onClear?: () => void;
|
|
18
18
|
/**
|
|
19
19
|
* input을 감싸고 있는 div의 ref, input은 일반 ref 사용
|
|
20
20
|
*/
|
|
@@ -8,10 +8,6 @@ export interface PopoverProps {
|
|
|
8
8
|
anchorEl: HTMLElement | null;
|
|
9
9
|
children: React.ReactNode;
|
|
10
10
|
open: boolean;
|
|
11
|
-
/**
|
|
12
|
-
* 배경 클릭 시 컴포넌트 닫히는지 여부
|
|
13
|
-
*/
|
|
14
|
-
backdrop?: boolean;
|
|
15
11
|
className?: string;
|
|
16
12
|
direction?: TDirection;
|
|
17
13
|
onClose: () => void;
|
|
@@ -20,4 +16,4 @@ export interface PopoverProps {
|
|
|
20
16
|
*/
|
|
21
17
|
portal?: boolean;
|
|
22
18
|
}
|
|
23
|
-
export declare function Popover({ anchorEl, children, open,
|
|
19
|
+
export declare function Popover({ anchorEl, children, open, className, direction, onClose, portal, }: PopoverProps): import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -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, kebabMenu, className, id, tableMaxHeight, noData, loading, }: TableProps): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
export declare function Table({ rowIdKey, data, formats, sort, onSort, checkedIds, onCheck, kebabMenu, onRowClick, selectedRow, onRowMouseOver, onRowMouseLeave, className, id, tableMaxHeight, noData, loading, }: TableProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -16,6 +16,13 @@ interface Props {
|
|
|
16
16
|
isLoading: boolean;
|
|
17
17
|
content?: React.ReactNode;
|
|
18
18
|
};
|
|
19
|
+
onRowClick?: (rowId: string) => void;
|
|
20
|
+
selectedRow?: {
|
|
21
|
+
rowId: string;
|
|
22
|
+
className?: string;
|
|
23
|
+
};
|
|
24
|
+
onRowMouseOver?: (rowId: string) => void;
|
|
25
|
+
onRowMouseLeave?: (rowId: string) => void;
|
|
19
26
|
}
|
|
20
|
-
declare function TBody({ rowIdKey, formats, data, checkedIds, onCheck, hasKebabMenu, kebabContent, noData, loading, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
27
|
+
declare function TBody({ rowIdKey, formats, data, checkedIds, onCheck, hasKebabMenu, kebabContent, onRowClick, selectedRow, onRowMouseOver, onRowMouseLeave, noData, loading, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
21
28
|
export default TBody;
|
|
@@ -50,8 +50,27 @@ export interface TableProps {
|
|
|
50
50
|
content: (rowId: string, onClose: () => void) => React.ReactNode;
|
|
51
51
|
width?: string;
|
|
52
52
|
};
|
|
53
|
+
/**
|
|
54
|
+
* 테이블 행 click 이벤트
|
|
55
|
+
*/
|
|
56
|
+
onRowClick?: (rowId: string) => void;
|
|
57
|
+
/**
|
|
58
|
+
* 테이블 행 mouse over 이벤트
|
|
59
|
+
*/
|
|
60
|
+
onRowMouseOver?: (rowId: string) => void;
|
|
61
|
+
/**
|
|
62
|
+
* 테이블 행 mouse leave 이벤트
|
|
63
|
+
*/
|
|
64
|
+
onRowMouseLeave?: (rowId: string) => void;
|
|
53
65
|
className?: string;
|
|
54
66
|
id?: string;
|
|
67
|
+
/**
|
|
68
|
+
* 선택된 행 스타일 지정 (@v1 focusedRowInfo)
|
|
69
|
+
*/
|
|
70
|
+
selectedRow?: {
|
|
71
|
+
rowId: string;
|
|
72
|
+
className?: string;
|
|
73
|
+
};
|
|
55
74
|
/**
|
|
56
75
|
* 최대 높이
|
|
57
76
|
*/
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
interface CreatePortalProps {
|
|
3
|
-
parent
|
|
3
|
+
parent?: HTMLElement;
|
|
4
4
|
children: React.ReactNode;
|
|
5
5
|
}
|
|
6
|
-
declare
|
|
6
|
+
declare function CreatePortal({ parent, children }: CreatePortalProps): React.ReactPortal | null;
|
|
7
7
|
export { CreatePortal };
|