@eturnity/eturnity_reusable_components 1.1.3 → 1.1.6
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
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<container>
|
|
3
|
-
<input-wrapper>
|
|
3
|
+
<input-wrapper :alignItems="alignItems">
|
|
4
4
|
<label-wrapper v-if="label">
|
|
5
5
|
<input-label>{{ label }}</input-label>
|
|
6
6
|
<info-text
|
|
@@ -85,8 +85,14 @@ const InputContainer = styled("input", inputProps)`
|
|
|
85
85
|
}
|
|
86
86
|
`
|
|
87
87
|
|
|
88
|
-
const
|
|
89
|
-
|
|
88
|
+
const inputAttrs = { alignItems: String }
|
|
89
|
+
const InputWrapper = styled("div", inputAttrs)`
|
|
90
|
+
position: relative;
|
|
91
|
+
display: grid;
|
|
92
|
+
align-items: center;
|
|
93
|
+
gap: 14px;
|
|
94
|
+
grid-template-columns: ${(props) =>
|
|
95
|
+
props.alignItems === "vertical" ? "1fr" : "auto 1fr"};
|
|
90
96
|
`
|
|
91
97
|
|
|
92
98
|
const ErrorMessage = styled.div`
|
|
@@ -108,6 +114,7 @@ export default {
|
|
|
108
114
|
// infoTextAlign="right" // left by default
|
|
109
115
|
// infoTextMessage="My info message"
|
|
110
116
|
// label="Question 5"
|
|
117
|
+
// alignItems="horizontal" // horizontal, vertical
|
|
111
118
|
// />
|
|
112
119
|
name: "input-text",
|
|
113
120
|
components: {
|
|
@@ -124,6 +131,10 @@ export default {
|
|
|
124
131
|
required: false,
|
|
125
132
|
default: "",
|
|
126
133
|
},
|
|
134
|
+
alignItems: {
|
|
135
|
+
required: false,
|
|
136
|
+
default: "horizontal",
|
|
137
|
+
},
|
|
127
138
|
isError: {
|
|
128
139
|
required: false,
|
|
129
140
|
default: false,
|
|
@@ -1,12 +1,23 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<container>
|
|
3
|
-
<input-wrapper>
|
|
3
|
+
<input-wrapper :alignItems="alignItems">
|
|
4
|
+
<label-wrapper>
|
|
5
|
+
<input-label>{{ label }}</input-label>
|
|
6
|
+
<info-text
|
|
7
|
+
v-if="infoTextMessage"
|
|
8
|
+
:text="infoTextMessage"
|
|
9
|
+
borderColor="#ccc"
|
|
10
|
+
size="16"
|
|
11
|
+
:alignText="infoTextAlign"
|
|
12
|
+
/>
|
|
13
|
+
</label-wrapper>
|
|
4
14
|
<input-container
|
|
5
15
|
:placeholder="placeholder"
|
|
6
16
|
:isError="isError"
|
|
7
17
|
:rows="rowHeight"
|
|
8
18
|
:value="value"
|
|
9
19
|
:disabled="isDisabled"
|
|
20
|
+
:fontSize="fontSize"
|
|
10
21
|
@input="onChangeHandler"
|
|
11
22
|
/>
|
|
12
23
|
</input-wrapper>
|
|
@@ -24,8 +35,13 @@
|
|
|
24
35
|
// rowHeight="4" //optional
|
|
25
36
|
// :isError="false"
|
|
26
37
|
// :errorText="$gettext('field_required')"
|
|
38
|
+
// infoTextAlign="right" // left by default
|
|
39
|
+
// infoTextMessage="My info message"
|
|
40
|
+
// label="Question 5"
|
|
41
|
+
// alignItems="horizontal" // horizontal, vertical
|
|
27
42
|
// />
|
|
28
43
|
import styled from "vue-styled-components"
|
|
44
|
+
import InfoText from "../../infoText"
|
|
29
45
|
|
|
30
46
|
const Container = styled.div`
|
|
31
47
|
width: 100%;
|
|
@@ -33,7 +49,15 @@ const Container = styled.div`
|
|
|
33
49
|
margin-bottom: 20px;
|
|
34
50
|
`
|
|
35
51
|
|
|
36
|
-
const
|
|
52
|
+
const LabelWrapper = styled.div`
|
|
53
|
+
display: inline-grid;
|
|
54
|
+
grid-template-columns: auto 1fr;
|
|
55
|
+
grid-gap: 12px;
|
|
56
|
+
align-items: center;
|
|
57
|
+
margin-bottom: 12px;
|
|
58
|
+
`
|
|
59
|
+
|
|
60
|
+
const inputProps = { isError: Boolean, disabled: Boolean, fontSize: String }
|
|
37
61
|
const InputContainer = styled("textarea", inputProps)`
|
|
38
62
|
border: ${(props) =>
|
|
39
63
|
props.isError
|
|
@@ -42,7 +66,7 @@ const InputContainer = styled("textarea", inputProps)`
|
|
|
42
66
|
padding: ${(props) =>
|
|
43
67
|
props.hasUnit ? "11px 40px 11px 10px" : "11px 5px 11px 10px"};
|
|
44
68
|
border-radius: 4px;
|
|
45
|
-
font-size: 16px;
|
|
69
|
+
font-size: ${(props) => (props.fontSize ? props.fontSize : "16px")};
|
|
46
70
|
color: ${(props) => props.theme.colors.black};
|
|
47
71
|
width: 100%;
|
|
48
72
|
max-width: 100%;
|
|
@@ -59,8 +83,14 @@ const InputContainer = styled("textarea", inputProps)`
|
|
|
59
83
|
}
|
|
60
84
|
`
|
|
61
85
|
|
|
62
|
-
const
|
|
63
|
-
|
|
86
|
+
const inputAttrs = { alignItems: String }
|
|
87
|
+
const InputWrapper = styled("div", inputAttrs)`
|
|
88
|
+
position: relative;
|
|
89
|
+
display: grid;
|
|
90
|
+
align-items: center;
|
|
91
|
+
gap: 14px;
|
|
92
|
+
grid-template-columns: ${(props) =>
|
|
93
|
+
props.alignItems === "vertical" ? "1fr" : "auto 1fr"};
|
|
64
94
|
`
|
|
65
95
|
|
|
66
96
|
const ErrorMessage = styled.div`
|
|
@@ -77,6 +107,8 @@ export default {
|
|
|
77
107
|
InputContainer,
|
|
78
108
|
InputWrapper,
|
|
79
109
|
ErrorMessage,
|
|
110
|
+
InfoText,
|
|
111
|
+
LabelWrapper,
|
|
80
112
|
},
|
|
81
113
|
props: {
|
|
82
114
|
placeholder: {
|
|
@@ -102,6 +134,23 @@ export default {
|
|
|
102
134
|
required: false,
|
|
103
135
|
default: false,
|
|
104
136
|
},
|
|
137
|
+
alignItems: {
|
|
138
|
+
required: false,
|
|
139
|
+
default: "horizontal",
|
|
140
|
+
},
|
|
141
|
+
infoTextMessage: {
|
|
142
|
+
required: false,
|
|
143
|
+
},
|
|
144
|
+
infoTextAlign: {
|
|
145
|
+
required: false,
|
|
146
|
+
},
|
|
147
|
+
label: {
|
|
148
|
+
required: false,
|
|
149
|
+
},
|
|
150
|
+
fontSize: {
|
|
151
|
+
required: false,
|
|
152
|
+
default: "16px",
|
|
153
|
+
},
|
|
105
154
|
},
|
|
106
155
|
methods: {
|
|
107
156
|
onChangeHandler($event) {
|