@eturnity/eturnity_reusable_components 7.48.1-EPDM-12680.0.1 → 7.48.1-EPDM-12680.2
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/package.json +1 -1
- package/src/components/buttons/mainButton/index.vue +8 -0
- package/src/components/inputs/inputNumber/index.vue +15 -3
- package/src/components/inputs/radioButton/index.vue +26 -6
- package/src/components/markerItem/index.vue +8 -1
- package/src/components/stringDesign/DropdownMenu/index.vue +4 -120
package/package.json
CHANGED
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
:custom-color="customColor"
|
|
6
6
|
:data-id="dataId"
|
|
7
7
|
:font-color="fontColor"
|
|
8
|
+
:height="height"
|
|
8
9
|
:is-disabled="isDisabled"
|
|
9
10
|
:min-width="minWidth"
|
|
10
11
|
:no-wrap="noWrap"
|
|
@@ -43,6 +44,7 @@
|
|
|
43
44
|
customColor: String,
|
|
44
45
|
fontColor: String,
|
|
45
46
|
noWrap: Boolean,
|
|
47
|
+
height: String,
|
|
46
48
|
}
|
|
47
49
|
const ButtonContainer = styled('div', ButtonAttrs)`
|
|
48
50
|
padding: 7px 15px;
|
|
@@ -67,6 +69,7 @@
|
|
|
67
69
|
user-select: none;
|
|
68
70
|
${(props) => (props.minWidth ? `min-width: ${props.minWidth};` : '')};
|
|
69
71
|
${(props) => (props.noWrap ? `white-space: nowrap;` : '')};
|
|
72
|
+
height: ${(props) => props.height};
|
|
70
73
|
|
|
71
74
|
&:hover {
|
|
72
75
|
opacity: ${(props) => (props.isDisabled ? '1' : '0.8')};
|
|
@@ -136,6 +139,11 @@
|
|
|
136
139
|
default: null,
|
|
137
140
|
type: String,
|
|
138
141
|
},
|
|
142
|
+
height: {
|
|
143
|
+
required: false,
|
|
144
|
+
default: 'auto',
|
|
145
|
+
type: String,
|
|
146
|
+
},
|
|
139
147
|
id: {
|
|
140
148
|
required: false,
|
|
141
149
|
default: null,
|
|
@@ -13,7 +13,11 @@
|
|
|
13
13
|
</LabelSlotWrapper>
|
|
14
14
|
|
|
15
15
|
<LabelWrapper v-if="labelText">
|
|
16
|
-
<LabelText
|
|
16
|
+
<LabelText
|
|
17
|
+
:data-id="labelDataId"
|
|
18
|
+
:label-font-color="labelFontColor"
|
|
19
|
+
:label-font-weight="labelFontWeight"
|
|
20
|
+
>
|
|
17
21
|
{{ labelText }}
|
|
18
22
|
</LabelText>
|
|
19
23
|
|
|
@@ -187,6 +191,7 @@
|
|
|
187
191
|
isInteractive: Boolean,
|
|
188
192
|
alignItems: String,
|
|
189
193
|
labelFontColor: String,
|
|
194
|
+
labelFontWeight: String,
|
|
190
195
|
borderColor: String,
|
|
191
196
|
showLinearUnitName: Boolean,
|
|
192
197
|
colorMode: String,
|
|
@@ -241,7 +246,9 @@
|
|
|
241
246
|
? props.fontColor + ' !important'
|
|
242
247
|
: props.theme.colors.black};
|
|
243
248
|
background-color: ${(props) =>
|
|
244
|
-
props.
|
|
249
|
+
props.isDisabled
|
|
250
|
+
? props.theme.colors.disabled + ' !important'
|
|
251
|
+
: props.backgroundColor
|
|
245
252
|
? props.backgroundColor + ' !important'
|
|
246
253
|
: props.theme.colors.white};
|
|
247
254
|
width: ${(props) =>
|
|
@@ -391,7 +398,7 @@
|
|
|
391
398
|
props.theme.colors[props.labelFontColor]
|
|
392
399
|
? props.theme.colors[props.labelFontColor]
|
|
393
400
|
: props.labelFontColor};
|
|
394
|
-
font-weight:
|
|
401
|
+
font-weight: ${(props) => props.labelFontWeight};
|
|
395
402
|
`
|
|
396
403
|
|
|
397
404
|
const IconAttrs = { size: String, marginRight: Number }
|
|
@@ -604,6 +611,11 @@
|
|
|
604
611
|
required: false,
|
|
605
612
|
default: 'eturnityGrey',
|
|
606
613
|
},
|
|
614
|
+
labelFontWeight: {
|
|
615
|
+
type: String,
|
|
616
|
+
required: false,
|
|
617
|
+
default: '700',
|
|
618
|
+
},
|
|
607
619
|
focus: {
|
|
608
620
|
type: Boolean,
|
|
609
621
|
required: false,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<ComponentWrapper :layout="layout">
|
|
2
|
+
<ComponentWrapper :color-mode="colorMode" :layout="layout">
|
|
3
3
|
<RadioWrapper
|
|
4
4
|
v-for="(item, index) in options"
|
|
5
5
|
:key="item.value"
|
|
@@ -7,7 +7,9 @@
|
|
|
7
7
|
>
|
|
8
8
|
<LabelContainer
|
|
9
9
|
:checkmark-color="checkmarkColor"
|
|
10
|
+
:color-mode="colorMode"
|
|
10
11
|
:has-label="!!item.label"
|
|
12
|
+
:has-slots="!!$slots[`input-${item.value}`]"
|
|
11
13
|
:is-checked="selectedOption === item.value"
|
|
12
14
|
:is-disabled="item.disabled"
|
|
13
15
|
:size="size"
|
|
@@ -25,6 +27,7 @@
|
|
|
25
27
|
<span class="checkmark"></span>
|
|
26
28
|
<LabelText
|
|
27
29
|
v-if="item.label"
|
|
30
|
+
:color-mode="colorMode"
|
|
28
31
|
:data-test-id="'radioLabel_' + item.value"
|
|
29
32
|
:is-disabled="item.disabled"
|
|
30
33
|
>
|
|
@@ -96,12 +99,14 @@
|
|
|
96
99
|
|
|
97
100
|
const wrapperProps = {
|
|
98
101
|
layout: String,
|
|
102
|
+
colorMode: String,
|
|
99
103
|
}
|
|
100
104
|
const ComponentWrapper = styled('div', wrapperProps)`
|
|
101
105
|
display: flex;
|
|
102
106
|
flex-direction: ${(props) =>
|
|
103
107
|
props.layout === 'vertical' ? 'column' : 'row'};
|
|
104
|
-
grid-gap:
|
|
108
|
+
grid-gap: ${(props) =>
|
|
109
|
+
props.colorMode === 'transparent' ? '16px 5px' : '10px 5px'};
|
|
105
110
|
flex-wrap: wrap;
|
|
106
111
|
`
|
|
107
112
|
|
|
@@ -124,14 +129,20 @@
|
|
|
124
129
|
isChecked: Boolean,
|
|
125
130
|
checkmarkColor: String,
|
|
126
131
|
hasLabel: Boolean,
|
|
132
|
+
colorMode: String,
|
|
133
|
+
hasSlots: Boolean,
|
|
127
134
|
}
|
|
128
135
|
const LabelContainer = styled('label', containerProps)`
|
|
129
136
|
display: grid;
|
|
130
137
|
grid-template-columns: auto 1fr auto;
|
|
131
|
-
grid-gap: ${(props) => (props.hasLabel ? '15px' : 0)};
|
|
138
|
+
grid-gap: ${(props) => (props.hasLabel || props.hasSlots ? '15px' : 0)};
|
|
132
139
|
align-items: center;
|
|
133
140
|
color: ${(props) =>
|
|
134
|
-
props.isDisabled
|
|
141
|
+
props.isDisabled
|
|
142
|
+
? props.theme.colors.grey2
|
|
143
|
+
: props.colorMode === 'transparent'
|
|
144
|
+
? props.theme.colors.white
|
|
145
|
+
: props.theme.colors.black};
|
|
135
146
|
position: relative;
|
|
136
147
|
cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
|
|
137
148
|
font-size: ${(props) =>
|
|
@@ -188,10 +199,14 @@
|
|
|
188
199
|
}
|
|
189
200
|
`
|
|
190
201
|
|
|
191
|
-
const textAttrs = { isDisabled: Boolean }
|
|
202
|
+
const textAttrs = { isDisabled: Boolean, colorMode: String }
|
|
192
203
|
const LabelText = styled('div', textAttrs)`
|
|
193
204
|
color: ${(props) =>
|
|
194
|
-
props.isDisabled
|
|
205
|
+
props.isDisabled
|
|
206
|
+
? props.theme.colors.grey2
|
|
207
|
+
: props.colorMode === 'transparent'
|
|
208
|
+
? props.theme.colors.white
|
|
209
|
+
: props.theme.colors.black};
|
|
195
210
|
`
|
|
196
211
|
|
|
197
212
|
const RadioImage = styled.img`
|
|
@@ -281,6 +296,11 @@
|
|
|
281
296
|
required: false,
|
|
282
297
|
type: String,
|
|
283
298
|
},
|
|
299
|
+
colorMode: {
|
|
300
|
+
default: '',
|
|
301
|
+
required: false,
|
|
302
|
+
type: String,
|
|
303
|
+
},
|
|
284
304
|
},
|
|
285
305
|
emits: ['on-radio-change'],
|
|
286
306
|
data() {
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
:name="iconName"
|
|
13
13
|
size="10px"
|
|
14
14
|
/>
|
|
15
|
-
<span>{{ label }}</span>
|
|
15
|
+
<span :title="label">{{ label }}</span>
|
|
16
16
|
</MarkerContainer>
|
|
17
17
|
</PageContainer>
|
|
18
18
|
</template>
|
|
@@ -60,6 +60,13 @@
|
|
|
60
60
|
border-radius: 4px;
|
|
61
61
|
white-space: nowrap;
|
|
62
62
|
cursor: ${(props) => (props.isEditionAllowed ? 'pointer' : props.cursor)};
|
|
63
|
+
overflow: hidden;
|
|
64
|
+
text-overflow: ellipsis;
|
|
65
|
+
|
|
66
|
+
span {
|
|
67
|
+
overflow: hidden;
|
|
68
|
+
text-overflow: ellipsis;
|
|
69
|
+
}
|
|
63
70
|
`
|
|
64
71
|
|
|
65
72
|
export default {
|
|
@@ -322,122 +322,6 @@
|
|
|
322
322
|
return {
|
|
323
323
|
expandedInverters: [],
|
|
324
324
|
expandedMppts: [],
|
|
325
|
-
// mockData: [
|
|
326
|
-
// {
|
|
327
|
-
// id: 1,
|
|
328
|
-
// brand: 'PVI-10.0-TL-OUTD',
|
|
329
|
-
// model: 'ABB',
|
|
330
|
-
// num_modules: 20,
|
|
331
|
-
// power: 110,
|
|
332
|
-
// template: true,
|
|
333
|
-
// technology: 'PV',
|
|
334
|
-
// power_kWp: 24,
|
|
335
|
-
// mppt_list: [
|
|
336
|
-
// {
|
|
337
|
-
// id: 1,
|
|
338
|
-
// name: 'MPPT 1',
|
|
339
|
-
// num_modules: 2,
|
|
340
|
-
// num_strings: 2,
|
|
341
|
-
// num_strings_available: 3,
|
|
342
|
-
// strings: [
|
|
343
|
-
// {
|
|
344
|
-
// id: 1,
|
|
345
|
-
// name: 'String A',
|
|
346
|
-
// num_modules: 2,
|
|
347
|
-
// color: 'red',
|
|
348
|
-
// },
|
|
349
|
-
// {
|
|
350
|
-
// id: 2,
|
|
351
|
-
// name: 'String B',
|
|
352
|
-
// num_modules: 4,
|
|
353
|
-
// color: 'green',
|
|
354
|
-
// },
|
|
355
|
-
// {
|
|
356
|
-
// id: 3,
|
|
357
|
-
// name: 'String C',
|
|
358
|
-
// num_modules: 5,
|
|
359
|
-
// color: 'blue',
|
|
360
|
-
// },
|
|
361
|
-
// ],
|
|
362
|
-
// },
|
|
363
|
-
// {
|
|
364
|
-
// id: 2,
|
|
365
|
-
// name: 'String B',
|
|
366
|
-
// num_modules: 3,
|
|
367
|
-
// num_strings: 3,
|
|
368
|
-
// num_strings_available: 3,
|
|
369
|
-
// strings: [
|
|
370
|
-
// {
|
|
371
|
-
// id: 4,
|
|
372
|
-
// name: 'String D',
|
|
373
|
-
// num_modules: 3,
|
|
374
|
-
// color: 'purple',
|
|
375
|
-
// },
|
|
376
|
-
// {
|
|
377
|
-
// id: 5,
|
|
378
|
-
// name: 'String E',
|
|
379
|
-
// num_modules: 6,
|
|
380
|
-
// color: 'orange',
|
|
381
|
-
// },
|
|
382
|
-
// {
|
|
383
|
-
// id: 6,
|
|
384
|
-
// name: 'String F',
|
|
385
|
-
// num_modules: 8,
|
|
386
|
-
// color: 'yellow',
|
|
387
|
-
// },
|
|
388
|
-
// ],
|
|
389
|
-
// },
|
|
390
|
-
// ],
|
|
391
|
-
// },
|
|
392
|
-
// {
|
|
393
|
-
// id: 2,
|
|
394
|
-
// brand: 'SUN2000-15KTL-M0',
|
|
395
|
-
// model: 'Huawei',
|
|
396
|
-
// num_modules: 30,
|
|
397
|
-
// power: 95,
|
|
398
|
-
// template: false,
|
|
399
|
-
// technology: 'PV',
|
|
400
|
-
// power_kWp: 32,
|
|
401
|
-
// mppt_list: [
|
|
402
|
-
// {
|
|
403
|
-
// id: 3,
|
|
404
|
-
// name: 'MPPT A',
|
|
405
|
-
// num_modules: 4,
|
|
406
|
-
// num_strings: 1,
|
|
407
|
-
// num_strings_available: 2,
|
|
408
|
-
// strings: [
|
|
409
|
-
// {
|
|
410
|
-
// id: 7,
|
|
411
|
-
// name: 'String G',
|
|
412
|
-
// num_modules: 4,
|
|
413
|
-
// color: 'pink',
|
|
414
|
-
// },
|
|
415
|
-
// ],
|
|
416
|
-
// },
|
|
417
|
-
// {
|
|
418
|
-
// id: 4,
|
|
419
|
-
// name: 'MPPT B',
|
|
420
|
-
// num_modules: 6,
|
|
421
|
-
// num_strings: 2,
|
|
422
|
-
// num_strings_available: 2,
|
|
423
|
-
// strings: [
|
|
424
|
-
// {
|
|
425
|
-
// id: 8,
|
|
426
|
-
// name: 'String H',
|
|
427
|
-
// num_modules: 3,
|
|
428
|
-
// color: 'cyan',
|
|
429
|
-
// },
|
|
430
|
-
// {
|
|
431
|
-
// id: 9,
|
|
432
|
-
// name: 'String I',
|
|
433
|
-
// num_modules: 3,
|
|
434
|
-
// color: 'brown',
|
|
435
|
-
// },
|
|
436
|
-
// ],
|
|
437
|
-
// },
|
|
438
|
-
// ],
|
|
439
|
-
// },
|
|
440
|
-
// ],
|
|
441
325
|
}
|
|
442
326
|
},
|
|
443
327
|
computed: {
|
|
@@ -503,9 +387,9 @@
|
|
|
503
387
|
switch (value) {
|
|
504
388
|
case 'pv':
|
|
505
389
|
return this.$gettext('PV')
|
|
506
|
-
case '
|
|
390
|
+
case 'pv_storage':
|
|
507
391
|
return this.$gettext('hybrid')
|
|
508
|
-
case '
|
|
392
|
+
case 'storage':
|
|
509
393
|
return this.$gettext('battery')
|
|
510
394
|
case 'optimizer':
|
|
511
395
|
return this.$gettext('inverter_type_optimizer')
|
|
@@ -518,9 +402,9 @@
|
|
|
518
402
|
switch (value) {
|
|
519
403
|
case 'pv':
|
|
520
404
|
return 'pv'
|
|
521
|
-
case '
|
|
405
|
+
case 'pv_storage':
|
|
522
406
|
return 'hybrid'
|
|
523
|
-
case '
|
|
407
|
+
case 'storage':
|
|
524
408
|
return 'battery'
|
|
525
409
|
case 'optimizer':
|
|
526
410
|
return 'optimizer'
|