@eturnity/eturnity_reusable_components 1.2.14 → 1.2.15

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 (2) hide show
  1. package/package.json +1 -1
  2. package/src/components/inputs/checkbox/index.vue +44 -45
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eturnity/eturnity_reusable_components",
3
- "version": "1.2.14",
3
+ "version": "1.2.15",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "dev": "vue-cli-service serve",
package/src/components/inputs/checkbox/index.vue CHANGED
@@ -33,7 +33,7 @@
33
33
  // backgroundColor="red"
34
34
  // :isDisabled="true"
35
35
  // />
36
- import styled from "vue-styled-components"
36
+ import styled from 'vue-styled-components'
37
37
 
38
38
  const ComponentWrapper = styled.div`
39
39
  min-height: 18px;
@@ -45,34 +45,33 @@ const containerAttrs = {
45
45
  hasLabel: Boolean,
46
46
  backgroundColor: String,
47
47
  isChecked: Boolean,
48
- isDisabled: Boolean,
48
+ isDisabled: Boolean
49
49
  }
50
- const Container = styled("label", containerAttrs)`
50
+ const Container = styled('label', containerAttrs)`
51
51
  display: grid;
52
- grid-template-columns: ${(props) => (props.hasLabel ? "18px auto" : "18px")};
52
+ grid-template-columns: ${(props) => (props.hasLabel ? '18px auto' : '18px')};
53
53
  grid-gap: 16px;
54
54
  align-content: center;
55
- /* align-items: center; */
56
55
  color: ${(props) => props.theme.colors.black};
57
56
  position: relative;
58
- cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
57
+ cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
59
58
  font-size: 16px;
60
59
  user-select: none;
61
60
 
62
61
  .checkmark {
63
62
  position: absolute;
64
63
  height: ${(props) =>
65
- props.size === "medium"
66
- ? "25px"
67
- : props.size === "small"
68
- ? "16px"
69
- : "25px"};
64
+ props.size === 'medium'
65
+ ? '25px'
66
+ : props.size === 'small'
67
+ ? '16px'
68
+ : '25px'};
70
69
  width: ${(props) =>
71
- props.size === "medium"
72
- ? "25px"
73
- : props.size === "small"
74
- ? "16px"
75
- : "25px"};
70
+ props.size === 'medium'
71
+ ? '25px'
72
+ : props.size === 'small'
73
+ ? '16px'
74
+ : '25px'};
76
75
  background-color: ${(props) =>
77
76
  props.isChecked
78
77
  ? props.backgroundColor
@@ -80,7 +79,7 @@ const Container = styled("label", containerAttrs)`
80
79
  : props.theme.colors.green
81
80
  : props.isDisabled
82
81
  ? props.theme.colors.lightGray
83
- : "#fff"};
82
+ : '#fff'};
84
83
  border-radius: 4px;
85
84
  border: 1px solid
86
85
  ${(props) =>
@@ -91,34 +90,34 @@ const Container = styled("label", containerAttrs)`
91
90
  : props.theme.colors.mediumGray};
92
91
 
93
92
  &:after {
94
- content: "";
93
+ content: '';
95
94
  position: absolute;
96
- display: ${(props) => (props.isChecked ? "block" : "none")};
95
+ display: ${(props) => (props.isChecked ? 'block' : 'none')};
97
96
  }
98
97
  }
99
98
 
100
99
  .checkmark:after {
101
100
  left: ${(props) =>
102
- props.size === "medium" ? "9px" : props.size === "small" ? "5px" : "9px"};
101
+ props.size === 'medium' ? '9px' : props.size === 'small' ? '5px' : '9px'};
103
102
  top: ${(props) =>
104
- props.size === "medium" ? "5px" : props.size === "small" ? "2px" : "5px"};
103
+ props.size === 'medium' ? '5px' : props.size === 'small' ? '2px' : '5px'};
105
104
  width: ${(props) =>
106
- props.size === "medium" ? "5px" : props.size === "small" ? "3px" : "5px"};
105
+ props.size === 'medium' ? '5px' : props.size === 'small' ? '3px' : '5px'};
107
106
  height: ${(props) =>
108
- props.size === "medium"
109
- ? "10px"
110
- : props.size === "small"
111
- ? "6px"
112
- : "10px"};
107
+ props.size === 'medium'
108
+ ? '10px'
109
+ : props.size === 'small'
110
+ ? '6px'
111
+ : '10px'};
113
112
  border: solid
114
113
  ${(props) =>
115
114
  props.checkColor ? props.checkColor : props.theme.colors.white};
116
115
  border-width: ${(props) =>
117
- props.size === "medium"
118
- ? "0 3px 3px 0"
119
- : props.size === "small"
120
- ? "0 2px 2px 0"
121
- : "0 3px 3px 0"};
116
+ props.size === 'medium'
117
+ ? '0 3px 3px 0'
118
+ : props.size === 'small'
119
+ ? '0 2px 2px 0'
120
+ : '0 3px 3px 0'};
122
121
  transform: rotate(45deg);
123
122
  }
124
123
  `
@@ -135,49 +134,49 @@ const InputCheckbox = styled.input`
135
134
  const LabelText = styled.div`
136
135
  font-size: 13px;
137
136
  display: grid;
138
- align-items: center;
137
+ align-items: flex-start;
139
138
  min-height: 18px;
140
139
  `
141
140
 
142
141
  export default {
143
- name: "checkbox",
142
+ name: 'checkbox',
144
143
  components: {
145
144
  ComponentWrapper,
146
145
  Container,
147
146
  InputCheckbox,
148
- LabelText,
147
+ LabelText
149
148
  },
150
149
  props: {
151
150
  label: {
152
151
  required: false,
153
- default: "",
152
+ default: ''
154
153
  },
155
154
  isChecked: {
156
155
  required: true,
157
- default: false,
156
+ default: false
158
157
  },
159
158
  checkColor: {
160
- required: false,
159
+ required: false
161
160
  },
162
161
  size: {
163
162
  required: false,
164
- default: "medium", // small, medium
163
+ default: 'medium' // small, medium
165
164
  },
166
165
  backgroundColor: {
167
- required: false,
166
+ required: false
168
167
  },
169
168
  isDisabled: {
170
169
  required: false,
171
- default: false,
172
- },
170
+ default: false
171
+ }
173
172
  },
174
173
  methods: {
175
174
  onChangeHandler(value) {
176
175
  if (this.isDisabled) {
177
176
  return
178
177
  }
179
- this.$emit("on-event-handler", value)
180
- },
181
- },
178
+ this.$emit('on-event-handler', value)
179
+ }
180
+ }
182
181
  }
183
182
  </script>