@eturnity/eturnity_reusable_components 6.42.1 → 6.42.2-EPDM-7447.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/package.json
CHANGED
@@ -433,6 +433,10 @@ export default {
|
|
433
433
|
labelFontColor: {
|
434
434
|
required: false,
|
435
435
|
default: 'eturnityGrey'
|
436
|
+
},
|
437
|
+
focus:{
|
438
|
+
required: false,
|
439
|
+
default: false
|
436
440
|
}
|
437
441
|
},
|
438
442
|
computed: {
|
@@ -574,7 +578,7 @@ export default {
|
|
574
578
|
}
|
575
579
|
this.isFocused = true
|
576
580
|
this.$nextTick(() => {
|
577
|
-
this.$refs.inputField1.$el.
|
581
|
+
this.$refs.inputField1.$el.focus()
|
578
582
|
})
|
579
583
|
this.$emit('input-focus')
|
580
584
|
},
|
@@ -660,7 +664,17 @@ export default {
|
|
660
664
|
})
|
661
665
|
}
|
662
666
|
},
|
667
|
+
mounted(){
|
668
|
+
if(this.focus){
|
669
|
+
this.focusInput()
|
670
|
+
}
|
671
|
+
},
|
663
672
|
watch: {
|
673
|
+
focus(value){
|
674
|
+
if(value){
|
675
|
+
this.focusInput()
|
676
|
+
}
|
677
|
+
},
|
664
678
|
clearInput: function (value) {
|
665
679
|
if (value) {
|
666
680
|
// If the value is typed, then we should clear the textInput on Continue
|
@@ -14,9 +14,11 @@
|
|
14
14
|
labelFontColor || colorMode == 'dark' ? 'white' : 'eturnityGrey'
|
15
15
|
"
|
16
16
|
:fontSize="fontSize"
|
17
|
-
>{{ label }}
|
18
|
-
|
19
|
-
|
17
|
+
>{{ label }}
|
18
|
+
<optionalLabel v-if="labelOptional">
|
19
|
+
({{ $gettext('Optional') }})</optionalLabel
|
20
|
+
>
|
21
|
+
</input-label>
|
20
22
|
<info-text
|
21
23
|
v-if="infoTextMessage"
|
22
24
|
:text="infoTextMessage"
|
@@ -30,6 +32,7 @@
|
|
30
32
|
ref="select"
|
31
33
|
@click="toggleDropdown"
|
32
34
|
:selectHeight="selectHeight"
|
35
|
+
:selectMinHeight="selectMinHeight"
|
33
36
|
:bgColor="
|
34
37
|
buttonBgColor || colorMode == 'dark' ? 'transparentBlack1' : 'white'
|
35
38
|
"
|
@@ -162,7 +165,6 @@ const InputLabel = styled('div', labelAttrs)`
|
|
162
165
|
`
|
163
166
|
const optionalLabel = styled.span`
|
164
167
|
font-weight: 300;
|
165
|
-
|
166
168
|
`
|
167
169
|
const inputProps = { selectWidth: String, optionWidth: String }
|
168
170
|
const Container = styled('div', inputProps)`
|
@@ -191,6 +193,7 @@ const selectButtonAttrs = {
|
|
191
193
|
hasError: Boolean,
|
192
194
|
disabled: Boolean,
|
193
195
|
selectHeight: String,
|
196
|
+
selectMinHeight: String,
|
194
197
|
isSearchBarVisible: Boolean,
|
195
198
|
showBorder: Boolean
|
196
199
|
}
|
@@ -198,11 +201,10 @@ const selectButton = styled('div', selectButtonAttrs)`
|
|
198
201
|
position: relative;
|
199
202
|
box-sizing: border-box;
|
200
203
|
border-radius: 4px;
|
201
|
-
padding: ${(props) =>
|
202
|
-
props.isSearchBarVisible ? '0' : '0px 0px 0 15px'};
|
204
|
+
padding: ${(props) => (props.isSearchBarVisible ? '0' : '0px 0px 0 15px')};
|
203
205
|
text-align: left;
|
204
206
|
border-radius: 4px;
|
205
|
-
min-height:
|
207
|
+
min-height: ${(props) => props.selectMinHeight};
|
206
208
|
display: flex;
|
207
209
|
align-items: center;
|
208
210
|
max-height: ${(props) => props.selectHeight};
|
@@ -303,9 +305,14 @@ export default {
|
|
303
305
|
default: null
|
304
306
|
},
|
305
307
|
selectHeight: {
|
308
|
+
type: String,
|
306
309
|
required: false,
|
307
310
|
default: null
|
308
311
|
},
|
312
|
+
selectMinHeight: {
|
313
|
+
required: false,
|
314
|
+
default: '36px'
|
315
|
+
},
|
309
316
|
optionWidth: {
|
310
317
|
required: false,
|
311
318
|
default: null
|