@eturnity/eturnity_reusable_components 1.0.35 → 1.0.36

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 (3) hide show
  1. package/package.json +1 -1
  2. package/src/App.vue +8 -0
  3. package/src/components/inputs/checkbox/index.vue +13 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eturnity/eturnity_reusable_components",
3
- "version": "1.0.35",
3
+ "version": "1.0.36",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "dev": "vue-cli-service serve",
package/src/App.vue CHANGED
@@ -23,6 +23,12 @@
23
23
  </tr>
24
24
  </tbody>
25
25
  </main-table>
26
+ <checkbox
27
+ :isChecked="false"
28
+ @on-event-handler="onInputChange($event)"
29
+ size="small"
30
+ :isDisabled="false"
31
+ />
26
32
  </page-container>
27
33
  </ThemeProvider>
28
34
  </template>
@@ -33,6 +39,7 @@ import theme from "./assets/theme"
33
39
  import styled from "vue-styled-components"
34
40
  import MainTable from "@/components/tables/mainTable"
35
41
  import ThreeDots from "@/components/threeDots"
42
+ import Checkbox from "@/components/inputs/checkbox"
36
43
 
37
44
  const PageContainer = styled.div`
38
45
  padding: 40px;
@@ -45,6 +52,7 @@ export default {
45
52
  PageContainer,
46
53
  MainTable,
47
54
  ThreeDots,
55
+ Checkbox,
48
56
  },
49
57
  data() {
50
58
  return {
package/src/components/inputs/checkbox/index.vue CHANGED
@@ -6,6 +6,7 @@
6
6
  :hasLabel="!!label.length"
7
7
  :backgroundColor="backgroundColor"
8
8
  :isChecked="isChecked"
9
+ :isDisabled="isDisabled"
9
10
  >{{ label }}
10
11
  <input-checkbox
11
12
  type="checkbox"
@@ -40,6 +41,7 @@ const containerAttrs = {
40
41
  hasLabel: Boolean,
41
42
  backgroundColor: String,
42
43
  isChecked: Boolean,
44
+ isDisabled: Boolean,
43
45
  }
44
46
  const Container = styled("label", containerAttrs)`
45
47
  display: grid;
@@ -49,7 +51,7 @@ const Container = styled("label", containerAttrs)`
49
51
  position: relative;
50
52
  padding-left: 42px;
51
53
  margin-bottom: 12px;
52
- cursor: pointer;
54
+ cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
53
55
  font-size: 16px;
54
56
  user-select: none;
55
57
 
@@ -70,7 +72,9 @@ const Container = styled("label", containerAttrs)`
70
72
  ? "16px"
71
73
  : "25px"};
72
74
  background-color: ${(props) =>
73
- !props.isChecked
75
+ props.isDisabled
76
+ ? props.theme.colors.lightGray
77
+ : !props.isChecked
74
78
  ? "#fff"
75
79
  : props.backgroundColor
76
80
  ? props.backgroundColor
@@ -152,9 +156,16 @@ export default {
152
156
  backgroundColor: {
153
157
  required: false,
154
158
  },
159
+ isDisabled: {
160
+ required: false,
161
+ default: false,
162
+ },
155
163
  },
156
164
  methods: {
157
165
  onChangeHandler(value) {
166
+ if (this.isDisabled) {
167
+ return
168
+ }
158
169
  this.$emit("on-event-handler", value)
159
170
  },
160
171
  },