@eturnity/eturnity_reusable_components 1.0.22 → 1.0.26

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 +4 -2
  4. package/src/components/inputs/toggle/index.vue +95 -19
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eturnity/eturnity_reusable_components",
3
- "version": "1.0.22",
3
+ "version": "1.0.26",
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
@@ -70,7 +70,7 @@ const Container = styled("label", containerAttrs)`
70
70
  ? "16px"
71
71
  : "25px"};
72
72
  background-color: ${(props) =>
73
- props.isChecked
73
+ !props.isChecked
74
74
  ? "#fff"
75
75
  : props.backgroundColor
76
76
  ? props.backgroundColor
@@ -78,8 +78,10 @@ const Container = styled("label", containerAttrs)`
78
78
  border-radius: 4px;
79
79
  border: 1px solid
80
80
  ${(props) =>
81
- props.isChecked && props.backgroundColor
81
+ props.isChecked
82
82
  ? props.backgroundColor
83
+ ? props.backgroundColor
84
+ : props.theme.colors.green
83
85
  : props.theme.colors.mediumGray};
84
86
 
85
87
  &:after {
package/src/components/inputs/toggle/index.vue CHANGED
@@ -1,17 +1,30 @@
1
1
  <template>
2
2
  <container>
3
- <flex-wrapper>
3
+ <flex-wrapper :size="size">
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
23
+ v-if="labelAlign === 'right'"
24
+ :size="size"
25
+ :fontColor="fontColor"
26
+ >{{ label }}</label-text
27
+ >
15
28
  </flex-wrapper>
16
29
  </container>
17
30
  </template>
@@ -24,6 +37,10 @@
24
37
  // :isChecked="toggleValue" // Boolean
25
38
  // label="My Label Text"
26
39
  // toggleColor="red"
40
+ // size="small" // small, medium
41
+ // backgroundColor="blue"
42
+ // labelAlign="right"
43
+ // fontColor="black"
27
44
  // />
28
45
 
29
46
  import styled from "vue-styled-components"
@@ -32,23 +49,47 @@ const Container = styled.div`
32
49
  display: inline-block;
33
50
  `
34
51
 
35
- const FlexWrapper = styled.div`
52
+ const flexAttrs = { size: String }
53
+ const FlexWrapper = styled("div", flexAttrs)`
36
54
  display: grid;
37
55
  grid-template-columns: auto 1fr;
38
- grid-gap: 20px;
56
+ grid-gap: ${(props) =>
57
+ props.size === "medium"
58
+ ? "20px"
59
+ : props.size === "small"
60
+ ? "10px"
61
+ : "20px"};
39
62
  align-items: center;
40
63
  `
41
64
 
42
- const LabelText = styled.div`
43
- color: ${(props) => props.theme.colors.darkGray};
65
+ const toggleAttrs = { size: String, fontColor: String }
66
+ const LabelText = styled("div", toggleAttrs)`
67
+ color: ${(props) =>
68
+ props.fontColor ? props.fontColor : props.theme.colors.darkGray};
69
+ font-size: ${(props) =>
70
+ props.size === "medium"
71
+ ? "16px"
72
+ : props.size === "small"
73
+ ? "12px"
74
+ : "16px"};
44
75
  `
45
76
 
46
- const ToggleWrapper = styled.span`
77
+ const ToggleWrapper = styled("span", toggleAttrs)`
47
78
  display: inline-block;
48
79
  position: relative;
49
80
  cursor: pointer;
50
- width: 50px;
51
- height: 24px;
81
+ width: ${(props) =>
82
+ props.size === "medium"
83
+ ? "50px"
84
+ : props.size === "small"
85
+ ? "29px"
86
+ : "50px"};
87
+ height: ${(props) =>
88
+ props.size === "medium"
89
+ ? "24px"
90
+ : props.size === "small"
91
+ ? "16px"
92
+ : "24px"};
52
93
  border-radius: 9px;
53
94
 
54
95
  &:focus {
@@ -61,22 +102,37 @@ const ToggleWrapper = styled.span`
61
102
  }
62
103
  `
63
104
 
64
- const ToggleBackground = styled.span`
105
+ const backroundAttrs = { backgroundColor: String }
106
+ const ToggleBackground = styled("span", backroundAttrs)`
65
107
  display: inline-block;
66
108
  border-radius: 100px;
67
109
  height: 100%;
68
110
  width: 100%;
69
- background-color: ${(props) => props.theme.colors.lightGray};
111
+ background-color: ${(props) =>
112
+ props.backgroundColor
113
+ ? props.backgroundColor
114
+ : props.theme.colors.lightGray};
70
115
  transition: 0.4s ease;
71
116
  `
72
117
 
73
- const toggleProps = { isChecked: Boolean, toggleColor: String }
118
+ const toggleProps = { isChecked: Boolean, toggleColor: String, size: String }
74
119
  const ToggleDot = styled("span", toggleProps)`
75
120
  position: absolute;
76
- height: 14px;
77
- width: 14px;
78
- left: 5px;
79
- bottom: 5px;
121
+ height: ${(props) =>
122
+ props.size === "medium"
123
+ ? "14px"
124
+ : props.size === "small"
125
+ ? "10px"
126
+ : "14px"};
127
+ width: ${(props) =>
128
+ props.size === "medium"
129
+ ? "14px"
130
+ : props.size === "small"
131
+ ? "10px"
132
+ : "14px"};
133
+ left: 5px
134
+ bottom: ${(props) =>
135
+ props.size === "medium" ? "5px" : props.size === "small" ? "3px" : "5px"};
80
136
  background-color: ${(props) =>
81
137
  props.isChecked
82
138
  ? props.toggleColor
@@ -86,7 +142,13 @@ const ToggleDot = styled("span", toggleProps)`
86
142
  border-radius: 100%;
87
143
  transition: transform 0.4s ease;
88
144
  transform: ${(props) =>
89
- props.isChecked ? "translateX(26px)" : "translateX(0)"};
145
+ props.isChecked
146
+ ? props.size === "medium"
147
+ ? "translateX(45px)"
148
+ : props.size === "small"
149
+ ? "translateX(10px)"
150
+ : "translateX(45px)"
151
+ : "translateX(0)"};
90
152
 
91
153
  @media (max-width: ${(props) => props.theme.screen.mobile}) {
92
154
  height: 24px;
@@ -119,6 +181,20 @@ export default {
119
181
  toggleColor: {
120
182
  required: false,
121
183
  },
184
+ backgroundColor: {
185
+ required: false,
186
+ },
187
+ size: {
188
+ required: false,
189
+ default: "medium",
190
+ },
191
+ labelAlign: {
192
+ required: false,
193
+ default: "right",
194
+ },
195
+ fontColor: {
196
+ required: false,
197
+ },
122
198
  },
123
199
  methods: {
124
200
  onToggleChange() {