bootstrap-vue-wrapper 1.2.1 → 1.3.0

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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bootstrap-vue-wrapper",
3
- "version": "1.2.1",
3
+ "version": "1.3.0",
4
4
  "description": "bootstrap 5 components in Vue3 warapper.",
5
5
  "author": "Gabor Zemko <gaborzemko@gmail.com>",
6
6
  "homepage": "https://github.com/zemkogabor/bootstrap-vue-wrapper",
@@ -0,0 +1,129 @@
1
+ <template>
2
+ <div class="form-check">
3
+ <input
4
+ :id="id"
5
+ ref="validationTarget"
6
+ :value="modelValue"
7
+ v-bind="$attrs"
8
+ type="checkbox"
9
+ class="form-check-input"
10
+ :checked="isChecked"
11
+ :aria-describedby="hint !== null ? getHintId() : null"
12
+ @input="onInput"
13
+ @invalid="onInvalid"
14
+ >
15
+ <label
16
+ v-if="label !== null"
17
+ :for="id"
18
+ class="form-check-label"
19
+ v-text="label"
20
+ />
21
+ </div>
22
+ <div
23
+ v-if="hint !== null"
24
+ :id="getHintId()"
25
+ class="form-text"
26
+ v-text="hint"
27
+ />
28
+ </template>
29
+
30
+ <script>
31
+ import validator from '../../mixins/validator.js'
32
+
33
+ export default {
34
+ name: 'BsCheckbox',
35
+ mixins: [validator],
36
+ props: {
37
+ /**
38
+ * Value for checkbox if v-model is array.
39
+ */
40
+ value: {
41
+ type: String,
42
+ default: null,
43
+ },
44
+ /**
45
+ * Value for v-model
46
+ */
47
+ modelValue: {
48
+ type: [Array, Boolean],
49
+ default: null,
50
+ },
51
+ /**
52
+ * Html id
53
+ */
54
+ id: {
55
+ type: String,
56
+ required: true,
57
+ },
58
+ /**
59
+ * Label for input
60
+ */
61
+ label: {
62
+ type: String,
63
+ default: null,
64
+ },
65
+ /**
66
+ * Attribute hint
67
+ */
68
+ hint: {
69
+ type: String,
70
+ default: null,
71
+ },
72
+ /**
73
+ * True value
74
+ */
75
+ trueValue: {
76
+ type: Boolean,
77
+ default: true,
78
+ },
79
+ /**
80
+ * False value
81
+ */
82
+ falseValue: {
83
+ type: Boolean,
84
+ default: false,
85
+ },
86
+ },
87
+ emits: ['update:modelValue'],
88
+ computed: {
89
+ /**
90
+ * Checkbox is checked or not.
91
+ */
92
+ isChecked() {
93
+ if (this.modelValue instanceof Array) {
94
+ return this.modelValue.includes(this.value)
95
+ }
96
+
97
+ return this.modelValue === this.trueValue
98
+ },
99
+ },
100
+ methods: {
101
+ /**
102
+ * Hint id is generated
103
+ */
104
+ getHintId() {
105
+ return this.id + 'Hint'
106
+ },
107
+ /**
108
+ * On input event
109
+ *
110
+ * @param event
111
+ */
112
+ onInput(event) {
113
+ const isChecked = event.target.checked
114
+
115
+ if (this.modelValue instanceof Array) {
116
+ const newValue = [...this.modelValue]
117
+ if (isChecked) {
118
+ newValue.push(this.value)
119
+ } else {
120
+ newValue.splice(newValue.indexOf(this.value), 1)
121
+ }
122
+ this.$emit('update:modelValue', newValue)
123
+ } else {
124
+ this.$emit('update:modelValue', isChecked ? this.trueValue : this.falseValue)
125
+ }
126
+ },
127
+ },
128
+ }
129
+ </script>
package/src/index.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import BsBreadcrumb from './components/bs-breadcrumb/BsBreadcrumb.vue'
2
2
  import BsForm from './components/bs-form/BsForm.vue'
3
3
  import BsInput from './components/bs-input/BsInput.vue'
4
+ import BsCheckbox from './components/bs-checkbox/BsCheckbox.vue'
4
5
  import BsTextarea from './components/bs-textarea/BsTextarea.vue'
5
6
  import BsPaginator from './components/bs-paginator/BsPaginator.vue'
6
7
  import BsTable from './components/bs-table/BsTable.vue'
@@ -12,6 +13,7 @@ export {
12
13
  BsBreadcrumb,
13
14
  BsForm,
14
15
  BsInput,
16
+ BsCheckbox,
15
17
  BsTextarea,
16
18
  BsPaginator,
17
19
  BsTable,