@eturnity/eturnity_reusable_components 1.2.54 → 1.2.55
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
|
@@ -15,16 +15,20 @@
|
|
|
15
15
|
/>
|
|
16
16
|
</label-wrapper>
|
|
17
17
|
<input-container
|
|
18
|
-
:placeholder="placeholder"
|
|
19
|
-
:isError="isError"
|
|
20
|
-
:rows="rowHeight"
|
|
21
|
-
:value="value"
|
|
22
18
|
:inputWidth="inputWidth"
|
|
23
|
-
:
|
|
19
|
+
:isError="isError"
|
|
24
20
|
:fontSize="fontSize"
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
21
|
+
:disabled="isDisabled"
|
|
22
|
+
>
|
|
23
|
+
<textarea
|
|
24
|
+
:placeholder="placeholder"
|
|
25
|
+
:rows="rowHeight"
|
|
26
|
+
:value="value"
|
|
27
|
+
:disabled="isDisabled"
|
|
28
|
+
@input="onChangeHandler"
|
|
29
|
+
:resize="resize"
|
|
30
|
+
/>
|
|
31
|
+
</input-container>
|
|
28
32
|
</input-wrapper>
|
|
29
33
|
<error-message v-if="isError && errorText">{{ errorText }}</error-message>
|
|
30
34
|
</container>
|
|
@@ -71,27 +75,30 @@ const inputProps = {
|
|
|
71
75
|
fontSize: String,
|
|
72
76
|
inputWidth: String
|
|
73
77
|
}
|
|
74
|
-
const InputContainer = styled('textarea', inputProps)`
|
|
75
|
-
border: ${(props) =>
|
|
76
|
-
props.isError
|
|
77
|
-
? '1px solid ' + props.theme.colors.red
|
|
78
|
-
: '1px solid ' + props.theme.colors.grey4};
|
|
79
|
-
padding: ${(props) =>
|
|
80
|
-
props.hasUnit ? '11px 40px 11px 10px' : '11px 5px 11px 10px'};
|
|
81
|
-
border-radius: 4px;
|
|
82
|
-
font-size: ${(props) => (props.fontSize ? props.fontSize : '16px')};
|
|
83
|
-
color: ${(props) => props.theme.colors.black};
|
|
84
|
-
width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
|
|
85
|
-
max-width: 100%;
|
|
86
|
-
box-sizing: border-box; // to allow width of 100% with padding
|
|
87
|
-
cursor: ${(props) => (props.disabled ? 'not-allowed' : 'inherit')};
|
|
88
78
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
79
|
+
const InputContainer = styled('div', inputProps)`
|
|
80
|
+
textarea {
|
|
81
|
+
border: ${(props) =>
|
|
82
|
+
props.isError
|
|
83
|
+
? '1px solid ' + props.theme.colors.red
|
|
84
|
+
: '1px solid ' + props.theme.colors.grey4};
|
|
85
|
+
padding: ${(props) =>
|
|
86
|
+
props.hasUnit ? '11px 40px 11px 10px' : '11px 5px 11px 10px'};
|
|
87
|
+
border-radius: 4px;
|
|
88
|
+
font-size: ${(props) => (props.fontSize ? props.fontSize : '16px')};
|
|
89
|
+
color: ${(props) => props.theme.colors.black};
|
|
90
|
+
width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
|
|
91
|
+
max-width: 100%;
|
|
92
|
+
box-sizing: border-box; // to allow width of 100% with padding
|
|
93
|
+
cursor: ${(props) => (props.disabled ? 'not-allowed' : 'inherit')};
|
|
92
94
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
+
&::placeholder {
|
|
96
|
+
color: ${(props) => props.theme.colors.grey2};
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
&:focus {
|
|
100
|
+
outline: none;
|
|
101
|
+
}
|
|
95
102
|
}
|
|
96
103
|
`
|
|
97
104
|
|
|
@@ -181,7 +188,7 @@ export default {
|
|
|
181
188
|
if (this.isDisabled) {
|
|
182
189
|
return
|
|
183
190
|
}
|
|
184
|
-
this.$emit('input-change', $event)
|
|
191
|
+
this.$emit('input-change', $event.target.value)
|
|
185
192
|
}
|
|
186
193
|
}
|
|
187
194
|
}
|