@eturnity/eturnity_reusable_components 1.2.86 → 6.28.0-EPDM-6226
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
@@ -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"
|
@@ -45,6 +46,7 @@
|
|
45
46
|
v-if="isSearchBarVisible"
|
46
47
|
ref="searchInput"
|
47
48
|
tabindex="0"
|
49
|
+
inputHeight="34px"
|
48
50
|
:noBorder="true"
|
49
51
|
:fontSize="fontSize"
|
50
52
|
backgroundColor="transparent"
|
@@ -158,6 +160,10 @@ const InputLabel = styled('div', labelAttrs)`
|
|
158
160
|
font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
|
159
161
|
font-weight: 700;
|
160
162
|
`
|
163
|
+
const optionalLabel = styled.span`
|
164
|
+
font-weight: 300;
|
165
|
+
|
166
|
+
`
|
161
167
|
const inputProps = { selectWidth: String, optionWidth: String }
|
162
168
|
const Container = styled('div', inputProps)`
|
163
169
|
width: ${(props) => (props.selectWidth ? props.selectWidth : '100%')};
|
@@ -193,7 +199,7 @@ const selectButton = styled('div', selectButtonAttrs)`
|
|
193
199
|
box-sizing: border-box;
|
194
200
|
border-radius: 4px;
|
195
201
|
padding: ${(props) =>
|
196
|
-
props.isSearchBarVisible ? '0
|
202
|
+
props.isSearchBarVisible ? '0' : '0px 0px 0 15px'};
|
197
203
|
text-align: left;
|
198
204
|
border-radius: 4px;
|
199
205
|
min-height: 36px;
|
@@ -230,7 +236,6 @@ const selectDropdown = styled('div', selectDropdownAttrs)`
|
|
230
236
|
z-index:${(props) => (props.isActive ? '2' : '1')};
|
231
237
|
position:absolute;
|
232
238
|
top:5px;
|
233
|
-
padding:10px;
|
234
239
|
border:1px solid ${(props) => props.theme.colors.grey4}
|
235
240
|
border-radius:4px;
|
236
241
|
display: flex;
|
@@ -283,6 +288,10 @@ export default {
|
|
283
288
|
label: {
|
284
289
|
required: false
|
285
290
|
},
|
291
|
+
labelOptional: {
|
292
|
+
required: false,
|
293
|
+
default: false
|
294
|
+
},
|
286
295
|
infoTextMessage: {
|
287
296
|
required: false
|
288
297
|
},
|
@@ -360,6 +369,7 @@ export default {
|
|
360
369
|
Container,
|
361
370
|
InputLabel,
|
362
371
|
LabelWrapper,
|
372
|
+
optionalLabel,
|
363
373
|
InfoText,
|
364
374
|
InputWrapper,
|
365
375
|
DropdownWrapper,
|
@@ -1,10 +1,5 @@
|
|
1
1
|
<template>
|
2
|
-
<dropdown-row
|
3
|
-
:colspan="colSpan"
|
4
|
-
:isOpen="isOpen"
|
5
|
-
@click="toggleOpen"
|
6
|
-
:disabled="disabled"
|
7
|
-
>
|
2
|
+
<dropdown-row :colspan="colSpan" :isOpen="isOpen" :disabled="disabled">
|
8
3
|
<component-container :colSpan="colSpan - 1" class="table-dropdown">
|
9
4
|
<component-item
|
10
5
|
v-for="(item, index) in tableItems"
|