bootstrap-vue-wrapper 1.0.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bootstrap-vue-wrapper",
-  "version": "1.0.0",
+  "version": "1.3.0",
   "description": "bootstrap 5 components in Vue3 warapper.",
   "author": "Gabor Zemko <gaborzemko@gmail.com>",
   "homepage": "https://github.com/zemkogabor/bootstrap-vue-wrapper",

package/src/components/bs-checkbox/BsCheckbox.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="form-check">
+    <input
+      :id="id"
+      ref="validationTarget"
+      :value="modelValue"
+      v-bind="$attrs"
+      type="checkbox"
+      class="form-check-input"
+      :checked="isChecked"
+      :aria-describedby="hint !== null ? getHintId() : null"
+      @input="onInput"
+      @invalid="onInvalid"
+    >
+    <label
+      v-if="label !== null"
+      :for="id"
+      class="form-check-label"
+      v-text="label"
+    />
+  </div>
+  <div
+    v-if="hint !== null"
+    :id="getHintId()"
+    class="form-text"
+    v-text="hint"
+  />
+</template>
+
+<script>
+import validator from '../../mixins/validator.js'
+
+export default {
+  name: 'BsCheckbox',
+  mixins: [validator],
+  props: {
+    /**
+     * Value for checkbox if v-model is array.
+     */
+    value: {
+      type: String,
+      default: null,
+    },
+    /**
+     * Value for v-model
+     */
+    modelValue: {
+      type: [Array, Boolean],
+      default: null,
+    },
+    /**
+     * Html id
+     */
+    id: {
+      type: String,
+      required: true,
+    },
+    /**
+     * Label for input
+     */
+    label: {
+      type: String,
+      default: null,
+    },
+    /**
+     * Attribute hint
+     */
+    hint: {
+      type: String,
+      default: null,
+    },
+    /**
+     * True value
+     */
+    trueValue: {
+      type: Boolean,
+      default: true,
+    },
+    /**
+     * False value
+     */
+    falseValue: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['update:modelValue'],
+  computed: {
+    /**
+     * Checkbox is checked or not.
+     */
+    isChecked() {
+      if (this.modelValue instanceof Array) {
+        return this.modelValue.includes(this.value)
+      }
+
+      return this.modelValue === this.trueValue
+    },
+  },
+  methods: {
+    /**
+     * Hint id is generated
+     */
+    getHintId() {
+      return this.id + 'Hint'
+    },
+    /**
+     * On input event
+     *
+     * @param event
+     */
+    onInput(event) {
+      const isChecked = event.target.checked
+
+      if (this.modelValue instanceof Array) {
+        const newValue = [...this.modelValue]
+        if (isChecked) {
+          newValue.push(this.value)
+        } else {
+          newValue.splice(newValue.indexOf(this.value), 1)
+        }
+        this.$emit('update:modelValue', newValue)
+      } else {
+        this.$emit('update:modelValue', isChecked ? this.trueValue : this.falseValue)
+      }
+    },
+  },
+}
+</script>

package/src/components/bs-input/BsInput.vue

@@ -9,7 +9,6 @@
     ref="validationTarget"
     :value="modelValue"
     v-bind="$attrs"
-    class="form-control"
     :aria-describedby="hint !== null ? getHintId() : null"
     @input="onInput"
     @invalid="onInvalid"

package/src/components/bs-modal/BsModal.vue

@@ -0,0 +1,59 @@
+<template>
+  <div
+    ref="modalRef"
+    class="modal fade"
+    tabindex="-1"
+    aria-hidden="true"
+  >
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <div class="h5 modal-title" v-text="title" />
+          <button
+            type="button"
+            class="btn-close"
+            data-bs-dismiss="modal"
+          />
+        </div>
+        <div class="modal-body">
+          <slot name="body" />
+        </div>
+        <div class="modal-footer">
+          <slot name="footer" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Modal } from 'bootstrap'
+
+export default {
+  name: 'BsModal',
+  props: {
+    /**
+     * Modal title
+     */
+    title: {
+      type: String,
+      required: true,
+    },
+  },
+  emits: ['hidden'],
+  mounted() {
+    const modalElement = this.$refs.modalRef
+    Modal.getOrCreateInstance(modalElement).show()
+
+    modalElement.addEventListener('hidden.bs.modal', this.onHidden)
+  },
+  methods: {
+    /**
+     * Hidden event.
+     */
+    onHidden() {
+      this.$emit('hidden')
+    },
+  },
+}
+</script>

package/src/components/bs-table/BsTable.vue

@@ -38,6 +38,7 @@
             <slot
               v-if="field.key in item"
               name="td"
+              :key="key"
               :field="field.key"
               :item="item[field.key]"
             >

package/src/index.js

@@ -1,19 +1,23 @@
 import BsBreadcrumb from './components/bs-breadcrumb/BsBreadcrumb.vue'
 import BsForm from './components/bs-form/BsForm.vue'
 import BsInput from './components/bs-input/BsInput.vue'
+import BsCheckbox from './components/bs-checkbox/BsCheckbox.vue'
 import BsTextarea from './components/bs-textarea/BsTextarea.vue'
 import BsPaginator from './components/bs-paginator/BsPaginator.vue'
 import BsTable from './components/bs-table/BsTable.vue'
 import BsToast from './components/bs-toast/BsToast.vue'
+import BsModal from './components/bs-modal/BsModal.vue'
 import Validator from './mixins/validator.js'
 
 export {
   BsBreadcrumb,
   BsForm,
   BsInput,
+  BsCheckbox,
   BsTextarea,
   BsPaginator,
   BsTable,
   BsToast,
+  BsModal,
   Validator,
 }