sbx-crm-menu-ui 1.0.0 → 2.0.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/contentMenuComponent/LanguageDropdown.d.ts +9 -2
- package/dist/components/dropdown/Dropdown.d.ts +3 -1
- package/dist/components/menu/TopNavBarComponent/TopNavBarComponent.d.ts +12 -1
- package/dist/components/menu/sidebar/Sidebar.d.ts +10 -1
- package/dist/components/menu/sidebar/subMenuComponent/SubMenuComponent.d.ts +12 -13
- package/dist/index.css +42 -43
- package/dist/index.d.ts +2 -1
- package/dist/index.js +115 -130
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +116 -133
- package/dist/index.modern.js.map +1 -1
- package/dist/types/Common.d.ts +4 -2
- package/dist/utils/utils.d.ts +28 -0
- package/package.json +7 -20
- package/dist/index.test.d.ts +0 -1
|
@@ -1,2 +1,9 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
export
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface Language {
|
|
3
|
+
code: string;
|
|
4
|
+
label: string;
|
|
5
|
+
flag: string;
|
|
6
|
+
}
|
|
7
|
+
export default function LanguageDropdown(props: {
|
|
8
|
+
languages: Language[];
|
|
9
|
+
}): React.JSX.Element;
|
|
@@ -1,2 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
|
|
2
|
+
import { Language } from '../../contentMenuComponent/LanguageDropdown';
|
|
3
|
+
interface Props {
|
|
4
|
+
languages: Language[];
|
|
5
|
+
onChooseLanguage?: (language: Language) => void;
|
|
6
|
+
user: {
|
|
7
|
+
name: string;
|
|
8
|
+
email: string;
|
|
9
|
+
};
|
|
10
|
+
logoSrc?: string;
|
|
11
|
+
}
|
|
12
|
+
export default function TopNavBarComponent(props: Props): React.JSX.Element;
|
|
13
|
+
export {};
|
|
@@ -1,3 +1,12 @@
|
|
|
1
|
+
import { IconDefinition } from '@fortawesome/free-solid-svg-icons';
|
|
2
|
+
import { Route } from '../../../types/Common';
|
|
1
3
|
import React from 'react';
|
|
2
|
-
|
|
4
|
+
interface RoutesData {
|
|
5
|
+
label: string;
|
|
6
|
+
icon: IconDefinition;
|
|
7
|
+
subRoutes: Route[];
|
|
8
|
+
}
|
|
9
|
+
declare const SidebarComponent: (props: {
|
|
10
|
+
routesData: RoutesData[];
|
|
11
|
+
}) => React.JSX.Element;
|
|
3
12
|
export default SidebarComponent;
|
|
@@ -1,13 +1,12 @@
|
|
|
1
|
-
import { Route } from
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
declare const
|
|
11
|
-
declare const
|
|
12
|
-
|
|
13
|
-
export { subMenuDataHome, subMenuData, subMenuDataComunications, subMenuDataConfig, subMenuDataDataProviders, subMenuDataForm, subMenuDataReports, subMenuDataMarketing, subMenuDataAnalytics, subMenuDataProcess, };
|
|
1
|
+
import { Route } from '../../../../types/Common';
|
|
2
|
+
import { IconDefinition } from '@fortawesome/free-solid-svg-icons';
|
|
3
|
+
interface View {
|
|
4
|
+
path: string;
|
|
5
|
+
name: string;
|
|
6
|
+
root: string;
|
|
7
|
+
permission: string;
|
|
8
|
+
views?: View[];
|
|
9
|
+
}
|
|
10
|
+
export declare const generateSubMenuData: (labels: View[]) => Route[];
|
|
11
|
+
export declare const icons: Record<string, IconDefinition>;
|
|
12
|
+
export {};
|
package/dist/index.css
CHANGED
|
@@ -37,15 +37,17 @@
|
|
|
37
37
|
color: #555;
|
|
38
38
|
position: relative;
|
|
39
39
|
}
|
|
40
|
-
.crm-class-sidebar-list .
|
|
40
|
+
.crm-class-sidebar-list .crm-class-title {
|
|
41
|
+
text-align: left;
|
|
41
42
|
font-weight: bold;
|
|
42
43
|
margin-bottom: 10px;
|
|
43
44
|
display: block;
|
|
44
45
|
color: #3f6ad8;
|
|
46
|
+
font-size: 10.8px;
|
|
45
47
|
}
|
|
46
48
|
.crm-class-sidebar-list .crm-class-sidebar-li {
|
|
47
49
|
padding: 10px 15px;
|
|
48
|
-
font-size:
|
|
50
|
+
font-size: 13px;
|
|
49
51
|
transition: 0.3s;
|
|
50
52
|
cursor: pointer;
|
|
51
53
|
display: flex;
|
|
@@ -59,14 +61,11 @@
|
|
|
59
61
|
-o-border-radius: 4px;
|
|
60
62
|
}
|
|
61
63
|
|
|
62
|
-
.
|
|
63
|
-
padding
|
|
64
|
-
padding-bottom: 0.5rem;
|
|
65
|
-
padding-left: 0.6rem;
|
|
66
|
-
padding-right: 0.4rem;
|
|
64
|
+
.crm-class-content-sub-menu-items {
|
|
65
|
+
padding: 0.5rem 0.4rem 0.5rem 0.6rem;
|
|
67
66
|
cursor: pointer;
|
|
68
67
|
}
|
|
69
|
-
.
|
|
68
|
+
.crm-class-content-sub-menu-items:hover {
|
|
70
69
|
background-color: #e0f3ff;
|
|
71
70
|
border-radius: 4px;
|
|
72
71
|
-webkit-border-radius: 4px;
|
|
@@ -95,7 +94,7 @@
|
|
|
95
94
|
border-radius: 15px;
|
|
96
95
|
}
|
|
97
96
|
|
|
98
|
-
.
|
|
97
|
+
.crm-class-top-nav-bar {
|
|
99
98
|
background-color: white;
|
|
100
99
|
display: flex;
|
|
101
100
|
align-items: center;
|
|
@@ -108,14 +107,14 @@
|
|
|
108
107
|
z-index: 20;
|
|
109
108
|
}
|
|
110
109
|
|
|
111
|
-
.
|
|
110
|
+
.crm-class-flex-container {
|
|
112
111
|
display: flex;
|
|
113
112
|
align-items: center;
|
|
114
113
|
}
|
|
115
114
|
|
|
116
|
-
.
|
|
117
|
-
width:
|
|
118
|
-
height:
|
|
115
|
+
.crm-class-icon-container {
|
|
116
|
+
width: 40px;
|
|
117
|
+
height: 40px;
|
|
119
118
|
border: none;
|
|
120
119
|
padding: 0;
|
|
121
120
|
outline: none;
|
|
@@ -129,7 +128,7 @@
|
|
|
129
128
|
justify-content: center;
|
|
130
129
|
}
|
|
131
130
|
|
|
132
|
-
.
|
|
131
|
+
.crm-class-top-nav-bar-avatar {
|
|
133
132
|
width: 40px;
|
|
134
133
|
height: 40px;
|
|
135
134
|
border: none;
|
|
@@ -146,78 +145,78 @@
|
|
|
146
145
|
color: white;
|
|
147
146
|
}
|
|
148
147
|
|
|
149
|
-
.
|
|
148
|
+
.crm-class-top-nav-bar-options {
|
|
150
149
|
display: flex;
|
|
151
150
|
margin-left: auto;
|
|
152
151
|
}
|
|
153
152
|
|
|
154
|
-
.
|
|
153
|
+
.crm-class-dropdown {
|
|
155
154
|
position: relative;
|
|
156
155
|
display: inline-flex;
|
|
157
156
|
align-items: center;
|
|
158
157
|
}
|
|
159
158
|
|
|
160
|
-
.
|
|
159
|
+
.crm-class-top-nav-bar-info-user {
|
|
161
160
|
display: flex;
|
|
162
161
|
flex-direction: column;
|
|
163
162
|
}
|
|
164
163
|
|
|
165
|
-
.
|
|
164
|
+
.crm-class-dropdown-content {
|
|
166
165
|
display: none;
|
|
167
166
|
position: absolute;
|
|
168
167
|
background-color: #f9f9f9;
|
|
169
168
|
min-width: 160px;
|
|
170
|
-
box-shadow:
|
|
169
|
+
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
|
|
171
170
|
padding: 12px 16px;
|
|
172
171
|
z-index: 1;
|
|
173
172
|
}
|
|
174
173
|
|
|
175
|
-
.
|
|
174
|
+
.crm-class-cursor-pointer {
|
|
176
175
|
cursor: pointer;
|
|
177
176
|
}
|
|
178
177
|
|
|
179
|
-
.
|
|
178
|
+
.crm-class-font-10 {
|
|
180
179
|
font-size: 10px;
|
|
181
180
|
}
|
|
182
181
|
|
|
183
|
-
.
|
|
182
|
+
.crm-class-slate-gray {
|
|
184
183
|
color: #495057;
|
|
185
184
|
}
|
|
186
185
|
|
|
187
|
-
.
|
|
186
|
+
.crm-class-ml-20 {
|
|
188
187
|
margin-left: 20px;
|
|
189
188
|
}
|
|
190
189
|
|
|
191
|
-
.
|
|
190
|
+
.crm-class-mr-10 {
|
|
192
191
|
margin-right: 10px;
|
|
193
192
|
}
|
|
194
193
|
|
|
195
|
-
.
|
|
194
|
+
.crm-class-color-icon {
|
|
196
195
|
color: #495057;
|
|
197
196
|
}
|
|
198
197
|
|
|
199
|
-
.
|
|
198
|
+
.crm-class-ml-auto {
|
|
200
199
|
margin-left: auto;
|
|
201
200
|
}
|
|
202
201
|
|
|
203
|
-
.
|
|
202
|
+
.crm-class-list-none {
|
|
204
203
|
list-style-type: none;
|
|
205
204
|
}
|
|
206
205
|
|
|
207
|
-
.
|
|
206
|
+
.crm-class-font-bold {
|
|
208
207
|
font-weight: 900;
|
|
209
208
|
}
|
|
210
209
|
|
|
211
|
-
.
|
|
210
|
+
.crm-class-mt-70 {
|
|
212
211
|
margin-top: 70px;
|
|
213
212
|
}
|
|
214
213
|
|
|
215
|
-
.
|
|
214
|
+
.crm-class-mr-20 {
|
|
216
215
|
margin-right: 20px;
|
|
217
216
|
}
|
|
218
217
|
|
|
219
218
|
/*/*/
|
|
220
|
-
.
|
|
219
|
+
.crm-class-content-flag {
|
|
221
220
|
width: 55px;
|
|
222
221
|
height: 55px;
|
|
223
222
|
border: none;
|
|
@@ -233,35 +232,35 @@
|
|
|
233
232
|
justify-content: center;
|
|
234
233
|
}
|
|
235
234
|
|
|
236
|
-
.
|
|
235
|
+
.crm-class-flag {
|
|
237
236
|
display: inline-block;
|
|
238
237
|
width: 20px;
|
|
239
238
|
height: 15px;
|
|
240
239
|
background-size: cover;
|
|
241
240
|
}
|
|
242
241
|
|
|
243
|
-
.
|
|
242
|
+
.crm-class-flag.large {
|
|
244
243
|
width: 30px;
|
|
245
244
|
height: 20px;
|
|
246
245
|
}
|
|
247
246
|
|
|
248
|
-
.
|
|
247
|
+
.crm-class-flag.US {
|
|
249
248
|
background-image: url("https://flagcdn.com/w20/us.png");
|
|
250
249
|
}
|
|
251
250
|
|
|
252
|
-
.
|
|
251
|
+
.crm-class-flag.ES {
|
|
253
252
|
background-image: url("https://flagcdn.com/w20/es.png");
|
|
254
253
|
}
|
|
255
254
|
|
|
256
|
-
.
|
|
255
|
+
.crm-class-flag.NL {
|
|
257
256
|
background-image: url("https://flagcdn.com/w20/nl.png");
|
|
258
257
|
}
|
|
259
258
|
|
|
260
|
-
.
|
|
259
|
+
.crm-class-dropdown-flag {
|
|
261
260
|
position: relative;
|
|
262
261
|
}
|
|
263
262
|
|
|
264
|
-
.
|
|
263
|
+
.crm-class-dropdown-toggle {
|
|
265
264
|
background: none;
|
|
266
265
|
border: none;
|
|
267
266
|
cursor: pointer;
|
|
@@ -269,7 +268,7 @@
|
|
|
269
268
|
padding: 10px;
|
|
270
269
|
}
|
|
271
270
|
|
|
272
|
-
.
|
|
271
|
+
.crm-class-dropdown-menu {
|
|
273
272
|
display: none;
|
|
274
273
|
position: absolute;
|
|
275
274
|
background-color: white;
|
|
@@ -279,16 +278,16 @@
|
|
|
279
278
|
min-width: 200px;
|
|
280
279
|
}
|
|
281
280
|
|
|
282
|
-
.
|
|
281
|
+
.crm-class-dropdown-menu .crm-class-dropdown-header {
|
|
283
282
|
font-weight: bold;
|
|
284
283
|
margin-bottom: 8px;
|
|
285
284
|
}
|
|
286
285
|
|
|
287
|
-
.
|
|
286
|
+
.crm-class-dropdown-flag:hover .crm-class-dropdown-menu {
|
|
288
287
|
display: block;
|
|
289
288
|
}
|
|
290
289
|
|
|
291
|
-
.
|
|
290
|
+
.crm-class-dropdown-item {
|
|
292
291
|
background: none;
|
|
293
292
|
border: none;
|
|
294
293
|
cursor: pointer;
|
|
@@ -299,7 +298,7 @@
|
|
|
299
298
|
text-align: left;
|
|
300
299
|
}
|
|
301
300
|
|
|
302
|
-
.
|
|
301
|
+
.crm-class-selected-language {
|
|
303
302
|
display: flex;
|
|
304
303
|
align-items: center;
|
|
305
304
|
justify-items: center;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import TopNavBarComponent from './components/menu/TopNavBarComponent/TopNavBarComponent';
|
|
2
2
|
import SidebarComponent from './components/menu/sidebar/Sidebar';
|
|
3
3
|
import './styles.module.scss';
|
|
4
|
-
|
|
4
|
+
import { generateSubMenuData, icons } from './components/menu/sidebar/subMenuComponent/SubMenuComponent';
|
|
5
|
+
export { TopNavBarComponent, SidebarComponent, generateSubMenuData, icons };
|