@eturnity/eturnity_reusable_components 1.1.60 → 1.1.61
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
package/src/App.vue
CHANGED
|
@@ -47,6 +47,12 @@
|
|
|
47
47
|
<br />
|
|
48
48
|
<page-subtitle text="My Subtitle" infoText="My info Text" />
|
|
49
49
|
<spinner size="30px" />
|
|
50
|
+
<checkbox
|
|
51
|
+
label="Do you accept the Terms?"
|
|
52
|
+
:isChecked="true"
|
|
53
|
+
size="small"
|
|
54
|
+
:isDisabled="false"
|
|
55
|
+
/>
|
|
50
56
|
</page-container>
|
|
51
57
|
</ThemeProvider>
|
|
52
58
|
</template>
|
|
@@ -59,6 +65,7 @@ import MainTable from "@/components/tables/mainTable"
|
|
|
59
65
|
import ThreeDots from "@/components/threeDots"
|
|
60
66
|
import Toggle from "@/components/inputs/toggle"
|
|
61
67
|
import InputNumber from "@/components/inputs/inputNumber"
|
|
68
|
+
import Checkbox from "@/components/inputs/checkbox"
|
|
62
69
|
import PageSubtitle from "@/components/pageSubtitle"
|
|
63
70
|
import Spinner from "@/components/spinner"
|
|
64
71
|
// import TableDropdown from "@/components/tableDropdown"
|
|
@@ -78,6 +85,7 @@ export default {
|
|
|
78
85
|
InputNumber,
|
|
79
86
|
PageSubtitle,
|
|
80
87
|
Spinner,
|
|
88
|
+
Checkbox,
|
|
81
89
|
// TableDropdown,
|
|
82
90
|
},
|
|
83
91
|
data() {
|
|
@@ -7,13 +7,16 @@
|
|
|
7
7
|
:backgroundColor="backgroundColor"
|
|
8
8
|
:isChecked="isChecked"
|
|
9
9
|
:isDisabled="isDisabled"
|
|
10
|
-
|
|
10
|
+
>
|
|
11
11
|
<input-checkbox
|
|
12
12
|
type="checkbox"
|
|
13
13
|
:checked="isChecked"
|
|
14
14
|
@change="onChangeHandler(!isChecked)"
|
|
15
15
|
/>
|
|
16
|
-
<
|
|
16
|
+
<div>
|
|
17
|
+
<span class="checkmark"></span>
|
|
18
|
+
</div>
|
|
19
|
+
<label-text v-if="!!label.length">{{ label }}</label-text>
|
|
17
20
|
</container>
|
|
18
21
|
</component-wrapper>
|
|
19
22
|
</template>
|
|
@@ -34,6 +37,7 @@ import styled from "vue-styled-components"
|
|
|
34
37
|
|
|
35
38
|
const ComponentWrapper = styled.div`
|
|
36
39
|
display: inline-block;
|
|
40
|
+
min-height: 18px;
|
|
37
41
|
`
|
|
38
42
|
|
|
39
43
|
const containerAttrs = {
|
|
@@ -46,20 +50,18 @@ const containerAttrs = {
|
|
|
46
50
|
}
|
|
47
51
|
const Container = styled("label", containerAttrs)`
|
|
48
52
|
display: grid;
|
|
49
|
-
|
|
53
|
+
grid-template-columns: ${(props) => (props.hasLabel ? "18px auto" : "18px")};
|
|
54
|
+
grid-gap: 16px;
|
|
50
55
|
align-content: center;
|
|
56
|
+
/* align-items: center; */
|
|
51
57
|
color: ${(props) => props.theme.colors.black};
|
|
52
58
|
position: relative;
|
|
53
|
-
/* padding-left: 42px; */
|
|
54
|
-
margin-bottom: 12px;
|
|
55
59
|
cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
|
|
56
60
|
font-size: 16px;
|
|
57
61
|
user-select: none;
|
|
58
62
|
|
|
59
63
|
.checkmark {
|
|
60
64
|
position: absolute;
|
|
61
|
-
top: 0;
|
|
62
|
-
left: 0;
|
|
63
65
|
height: ${(props) =>
|
|
64
66
|
props.size === "medium"
|
|
65
67
|
? "25px"
|
|
@@ -131,12 +133,20 @@ const InputCheckbox = styled.input`
|
|
|
131
133
|
width: 0;
|
|
132
134
|
`
|
|
133
135
|
|
|
136
|
+
const LabelText = styled.div`
|
|
137
|
+
font-size: 13px;
|
|
138
|
+
display: grid;
|
|
139
|
+
align-items: center;
|
|
140
|
+
min-height: 18px;
|
|
141
|
+
`
|
|
142
|
+
|
|
134
143
|
export default {
|
|
135
144
|
name: "checkbox",
|
|
136
145
|
components: {
|
|
137
146
|
ComponentWrapper,
|
|
138
147
|
Container,
|
|
139
148
|
InputCheckbox,
|
|
149
|
+
LabelText,
|
|
140
150
|
},
|
|
141
151
|
props: {
|
|
142
152
|
label: {
|