@eturnity/eturnity_reusable_components 1.2.86-EPDM-7509 → 1.2.86-EPDM-7435-1
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
CHANGED
@@ -0,0 +1 @@
|
|
1
|
+
<?xml version="1.0" ?><svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 13H12v5l6-6-6-6v5H4V2H2v11z"/></svg>
|
@@ -7,7 +7,7 @@
|
|
7
7
|
<label-wrapper v-if="label">
|
8
8
|
<input-label :labelFontColor="labelFontColor" :fontSize="fontSize">{{
|
9
9
|
label
|
10
|
-
}}</input-label>
|
10
|
+
}} <optionalLabel v-if="labelOptional">({{ $gettext('Optional') }})</optionalLabel></input-label>
|
11
11
|
<info-text
|
12
12
|
v-if="infoTextMessage"
|
13
13
|
:text="infoTextMessage"
|
@@ -81,7 +81,9 @@ const InputLabel = styled('div', labelAttrs)`
|
|
81
81
|
font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
|
82
82
|
font-weight: 700;
|
83
83
|
`
|
84
|
-
|
84
|
+
const optionalLabel = styled.span`
|
85
|
+
font-weight: 300;
|
86
|
+
`
|
85
87
|
const LabelWrapper = styled.div`
|
86
88
|
display: inline-grid;
|
87
89
|
grid-template-columns: auto auto;
|
@@ -217,7 +219,8 @@ export default {
|
|
217
219
|
Icon,
|
218
220
|
IconWrapper,
|
219
221
|
IconContainer,
|
220
|
-
InputErrorWrapper
|
222
|
+
InputErrorWrapper,
|
223
|
+
optionalLabel
|
221
224
|
},
|
222
225
|
data() {
|
223
226
|
return {
|
@@ -266,6 +269,10 @@ export default {
|
|
266
269
|
label: {
|
267
270
|
required: false
|
268
271
|
},
|
272
|
+
labelOptional: {
|
273
|
+
required: false,
|
274
|
+
default: false
|
275
|
+
},
|
269
276
|
noBorder: {
|
270
277
|
required: false,
|
271
278
|
default: false
|
@@ -14,7 +14,8 @@
|
|
14
14
|
labelFontColor || colorMode == 'dark' ? 'white' : 'eturnityGrey'
|
15
15
|
"
|
16
16
|
:fontSize="fontSize"
|
17
|
-
>{{ label }}</
|
17
|
+
>{{ label }} <optionalLabel v-if="labelOptional"> ({{ $gettext('Optional') }})</optionalLabel>
|
18
|
+
</input-label
|
18
19
|
>
|
19
20
|
<info-text
|
20
21
|
v-if="infoTextMessage"
|
@@ -158,6 +159,10 @@ const InputLabel = styled('div', labelAttrs)`
|
|
158
159
|
font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
|
159
160
|
font-weight: 700;
|
160
161
|
`
|
162
|
+
const optionalLabel = styled.span`
|
163
|
+
font-weight: 300;
|
164
|
+
|
165
|
+
`
|
161
166
|
const inputProps = { selectWidth: String, optionWidth: String }
|
162
167
|
const Container = styled('div', inputProps)`
|
163
168
|
width: ${(props) => (props.selectWidth ? props.selectWidth : '100%')};
|
@@ -193,7 +198,7 @@ const selectButton = styled('div', selectButtonAttrs)`
|
|
193
198
|
box-sizing: border-box;
|
194
199
|
border-radius: 4px;
|
195
200
|
padding: ${(props) =>
|
196
|
-
props.isSearchBarVisible ? '0
|
201
|
+
props.isSearchBarVisible ? '0' : '0px 0px 0 15px'};
|
197
202
|
text-align: left;
|
198
203
|
border-radius: 4px;
|
199
204
|
min-height: 36px;
|
@@ -230,7 +235,6 @@ const selectDropdown = styled('div', selectDropdownAttrs)`
|
|
230
235
|
z-index:${(props) => (props.isActive ? '2' : '1')};
|
231
236
|
position:absolute;
|
232
237
|
top:5px;
|
233
|
-
padding:10px;
|
234
238
|
border:1px solid ${(props) => props.theme.colors.grey4}
|
235
239
|
border-radius:4px;
|
236
240
|
display: flex;
|
@@ -283,6 +287,10 @@ export default {
|
|
283
287
|
label: {
|
284
288
|
required: false
|
285
289
|
},
|
290
|
+
labelOptional: {
|
291
|
+
required: false,
|
292
|
+
default: false
|
293
|
+
},
|
286
294
|
infoTextMessage: {
|
287
295
|
required: false
|
288
296
|
},
|
@@ -360,6 +368,7 @@ export default {
|
|
360
368
|
Container,
|
361
369
|
InputLabel,
|
362
370
|
LabelWrapper,
|
371
|
+
optionalLabel,
|
363
372
|
InfoText,
|
364
373
|
InputWrapper,
|
365
374
|
DropdownWrapper,
|
@@ -12,7 +12,6 @@
|
|
12
12
|
v-else
|
13
13
|
:cellPaddings="cellPaddings"
|
14
14
|
:tableCursor="tableCursor"
|
15
|
-
@mouseover="setHovers($event)"
|
16
15
|
>
|
17
16
|
<slot />
|
18
17
|
</table-container>
|
@@ -88,8 +87,8 @@ const TableContainer = styled('table', containerAttrs)`
|
|
88
87
|
}
|
89
88
|
|
90
89
|
tbody {
|
91
|
-
tr
|
92
|
-
&:hover
|
90
|
+
tr {
|
91
|
+
&:hover {
|
93
92
|
background-color: ${(props) => props.theme.colors.white};
|
94
93
|
cursor: ${(props) => (props.tableCursor ? props.tableCursor : 'auto')};
|
95
94
|
|
@@ -379,30 +378,6 @@ export default {
|
|
379
378
|
tableCursor: {
|
380
379
|
required: false
|
381
380
|
}
|
382
|
-
},
|
383
|
-
methods: {
|
384
|
-
setHovers(event) {
|
385
|
-
let parentTd
|
386
|
-
|
387
|
-
if (event.target.tagName === 'TD') {
|
388
|
-
parentTd = event.target
|
389
|
-
} else {
|
390
|
-
let currentElement = event.target.parentElement
|
391
|
-
while (currentElement.tagName !== 'TR') {
|
392
|
-
if (currentElement.tagName === 'TD') parentTd = currentElement
|
393
|
-
currentElement = currentElement.parentElement
|
394
|
-
}
|
395
|
-
}
|
396
|
-
|
397
|
-
if (parentTd) {
|
398
|
-
const trChildren = Array.from(parentTd.parentElement.children)
|
399
|
-
const trList = Array.from(document.querySelectorAll('tr'))
|
400
|
-
trList.forEach((el) => {
|
401
|
-
const cells = Array.from(el.children)
|
402
|
-
cells[trChildren.indexOf(parentTd)].classList.add('hover')
|
403
|
-
})
|
404
|
-
}
|
405
|
-
}
|
406
381
|
}
|
407
382
|
}
|
408
383
|
</script>
|