@eturnity/eturnity_reusable_components 1.0.21 → 1.0.25

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.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/src/App.vue +9 -0
  3. package/src/components/inputs/checkbox/index.vue +14 -2
  4. package/src/components/inputs/toggle/index.vue +77 -15
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eturnity/eturnity_reusable_components",
3
- "version": "1.0.21",
3
+ "version": "1.0.25",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "dev": "vue-cli-service serve",
package/src/App.vue CHANGED
@@ -19,6 +19,12 @@
19
19
  </tr>
20
20
  </tbody>
21
21
  </main-table>
22
+ <toggle
23
+ @on-toggle-change="isChecked = $event"
24
+ :isChecked="isChecked"
25
+ label="My Label Text"
26
+ size="small"
27
+ />
22
28
  </page-container>
23
29
  </ThemeProvider>
24
30
  </template>
@@ -28,6 +34,7 @@ import { ThemeProvider } from "vue-styled-components"
28
34
  import theme from "./assets/theme"
29
35
  import styled from "vue-styled-components"
30
36
  import MainTable from "@/components/tables/mainTable"
37
+ import Toggle from "@/components/inputs/toggle"
31
38
 
32
39
  const PageContainer = styled.div`
33
40
  padding: 40px;
@@ -39,6 +46,7 @@ export default {
39
46
  ThemeProvider,
40
47
  PageContainer,
41
48
  MainTable,
49
+ Toggle,
42
50
  },
43
51
  data() {
44
52
  return {
@@ -50,6 +58,7 @@ export default {
50
58
  number_max_allowed: 10,
51
59
  unit_short_name: "cm",
52
60
  },
61
+ isChecked: false,
53
62
  }
54
63
  },
55
64
  methods: {
package/src/components/inputs/checkbox/index.vue CHANGED
@@ -5,6 +5,7 @@
5
5
  :size="size"
6
6
  :hasLabel="!!label.length"
7
7
  :backgroundColor="backgroundColor"
8
+ :isChecked="isChecked"
8
9
  >{{ label }}
9
10
  <input-checkbox
10
11
  type="checkbox"
@@ -38,6 +39,7 @@ const containerAttrs = {
38
39
  size: String,
39
40
  hasLabel: Boolean,
40
41
  backgroundColor: String,
42
+ isChecked: Boolean,
41
43
  }
42
44
  const Container = styled("label", containerAttrs)`
43
45
  display: grid;
@@ -68,9 +70,19 @@ const Container = styled("label", containerAttrs)`
68
70
  ? "16px"
69
71
  : "25px"};
70
72
  background-color: ${(props) =>
71
- props.backgroundColor ? props.backgroundColor : props.theme.colors.green};
73
+ !props.isChecked
74
+ ? "#fff"
75
+ : props.backgroundColor
76
+ ? props.backgroundColor
77
+ : props.theme.colors.green};
72
78
  border-radius: 4px;
73
- border: 1px solid ${(props) => props.theme.colors.mediumGray};
79
+ border: 1px solid
80
+ ${(props) =>
81
+ props.isChecked
82
+ ? props.backgroundColor
83
+ ? props.backgroundColor
84
+ : props.theme.colors.green
85
+ : props.theme.colors.mediumGray};
74
86
 
75
87
  &:after {
76
88
  content: "";
package/src/components/inputs/toggle/index.vue CHANGED
@@ -1,17 +1,27 @@
1
1
  <template>
2
2
  <container>
3
3
  <flex-wrapper>
4
+ <label-text v-if="labelAlign === 'left'" :size="size">{{
5
+ label
6
+ }}</label-text>
4
7
  <toggle-wrapper
5
8
  role="checkbox"
6
9
  :checked="isChecked"
10
+ :size="size"
7
11
  tabindex="0"
8
12
  @click="onToggleChange"
9
13
  @keydown.space.prevent="onToggleChange"
10
14
  >
11
- <toggle-background />
12
- <toggle-dot :isChecked="isChecked" :toggleColor="toggleColor" />
15
+ <toggle-background :backgroundColor="backgroundColor" />
16
+ <toggle-dot
17
+ :isChecked="isChecked"
18
+ :toggleColor="toggleColor"
19
+ :size="size"
20
+ />
13
21
  </toggle-wrapper>
14
- <label-text>{{ label }}</label-text>
22
+ <label-text v-if="labelAlign === 'right'" :size="size">{{
23
+ label
24
+ }}</label-text>
15
25
  </flex-wrapper>
16
26
  </container>
17
27
  </template>
@@ -24,6 +34,9 @@
24
34
  // :isChecked="toggleValue" // Boolean
25
35
  // label="My Label Text"
26
36
  // toggleColor="red"
37
+ // size="small" // small, medium
38
+ // backgroundColor="blue"
39
+ // labelAlign="right"
27
40
  // />
28
41
 
29
42
  import styled from "vue-styled-components"
@@ -39,16 +52,33 @@ const FlexWrapper = styled.div`
39
52
  align-items: center;
40
53
  `
41
54
 
42
- const LabelText = styled.div`
55
+ const toggleAttrs = { size: String }
56
+ const LabelText = styled("div", toggleAttrs)`
43
57
  color: ${(props) => props.theme.colors.darkGray};
58
+ font-size: ${(props) =>
59
+ props.size === "medium"
60
+ ? "16px"
61
+ : props.size === "small"
62
+ ? "12px"
63
+ : "16px"};
44
64
  `
45
65
 
46
- const ToggleWrapper = styled.span`
66
+ const ToggleWrapper = styled("span", toggleAttrs)`
47
67
  display: inline-block;
48
68
  position: relative;
49
69
  cursor: pointer;
50
- width: 50px;
51
- height: 24px;
70
+ width: ${(props) =>
71
+ props.size === "medium"
72
+ ? "50px"
73
+ : props.size === "small"
74
+ ? "29px"
75
+ : "50px"};
76
+ height: ${(props) =>
77
+ props.size === "medium"
78
+ ? "24px"
79
+ : props.size === "small"
80
+ ? "16px"
81
+ : "24px"};
52
82
  border-radius: 9px;
53
83
 
54
84
  &:focus {
@@ -61,22 +91,37 @@ const ToggleWrapper = styled.span`
61
91
  }
62
92
  `
63
93
 
64
- const ToggleBackground = styled.span`
94
+ const backroundAttrs = { backgroundColor: String }
95
+ const ToggleBackground = styled("span", backroundAttrs)`
65
96
  display: inline-block;
66
97
  border-radius: 100px;
67
98
  height: 100%;
68
99
  width: 100%;
69
- background-color: ${(props) => props.theme.colors.lightGray};
100
+ background-color: ${(props) =>
101
+ props.backgroundColor
102
+ ? props.backgroundColor
103
+ : props.theme.colors.lightGray};
70
104
  transition: 0.4s ease;
71
105
  `
72
106
 
73
- const toggleProps = { isChecked: Boolean, toggleColor: String }
107
+ const toggleProps = { isChecked: Boolean, toggleColor: String, size: String }
74
108
  const ToggleDot = styled("span", toggleProps)`
75
109
  position: absolute;
76
- height: 14px;
77
- width: 14px;
78
- left: 5px;
79
- bottom: 5px;
110
+ height: ${(props) =>
111
+ props.size === "medium"
112
+ ? "14px"
113
+ : props.size === "small"
114
+ ? "10px"
115
+ : "14px"};
116
+ width: ${(props) =>
117
+ props.size === "medium"
118
+ ? "14px"
119
+ : props.size === "small"
120
+ ? "10px"
121
+ : "14px"};
122
+ left: 5px
123
+ bottom: ${(props) =>
124
+ props.size === "medium" ? "5px" : props.size === "small" ? "3px" : "5px"};
80
125
  background-color: ${(props) =>
81
126
  props.isChecked
82
127
  ? props.toggleColor
@@ -86,7 +131,13 @@ const ToggleDot = styled("span", toggleProps)`
86
131
  border-radius: 100%;
87
132
  transition: transform 0.4s ease;
88
133
  transform: ${(props) =>
89
- props.isChecked ? "translateX(26px)" : "translateX(0)"};
134
+ props.isChecked
135
+ ? props.size === "medium"
136
+ ? "translateX(45px)"
137
+ : props.size === "small"
138
+ ? "translateX(10px)"
139
+ : "translateX(45px)"
140
+ : "translateX(0)"};
90
141
 
91
142
  @media (max-width: ${(props) => props.theme.screen.mobile}) {
92
143
  height: 24px;
@@ -119,6 +170,17 @@ export default {
119
170
  toggleColor: {
120
171
  required: false,
121
172
  },
173
+ backgroundColor: {
174
+ required: false,
175
+ },
176
+ size: {
177
+ required: false,
178
+ default: "medium",
179
+ },
180
+ labelAlign: {
181
+ required: false,
182
+ default: "right",
183
+ },
122
184
  },
123
185
  methods: {
124
186
  onToggleChange() {