bootstrap-vue-wrapper 1.3.2 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bootstrap-vue-wrapper",
-  "version": "1.3.2",
+  "version": "1.5.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-input/BsInput.vue

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

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

@@ -5,7 +5,7 @@
     tabindex="-1"
     aria-hidden="true"
   >
-    <div class="modal-dialog">
+    <div class="modal-dialog" :class="classDialog">
       <div class="modal-content">
         <div class="modal-header">
           <div class="h5 modal-title" v-text="title" />
@@ -39,6 +39,10 @@ export default {
       type: String,
       required: true,
     },
+    classDialog: {
+      type: Object,
+      default: () => {},
+    },
   },
   emits: ['hidden'],
   mounted() {
@@ -48,6 +52,12 @@ export default {
     modalElement.addEventListener('hidden.bs.modal', this.onHidden)
   },
   methods: {
+    /**
+     * Trigger modal hide event.
+     */
+    hide() {
+      Modal.getOrCreateInstance(this.$refs.modalRef).hide()
+    },
     /**
      * Hidden event.
      */

package/src/components/bs-select/BsSelect.vue

@@ -0,0 +1,114 @@
+<template>
+  <label
+    v-if="label !== null"
+    :for="id"
+    class="form-label"
+    v-text="label"
+  />
+  <select
+    ref="validationTarget"
+    class="form-select"
+    :value="modelValue"
+    :aria-labelledby="hint !== null ? getHintId() : null"
+    v-bind="$attrs"
+    @input="onInput"
+    @invalid="onInvalid"
+  >
+    <option
+      v-if="placeholder !== null"
+      value=""
+      disabled
+      hidden
+    >
+      {{ placeholder }}
+    </option>
+    <option
+      v-for="(option, index) in options"
+      :key="index"
+      :value="option.value"
+    >
+      {{ option.text }}
+    </option>
+  </select>
+  <div
+    v-if="invalidMessage !== null"
+    class="invalid-feedback"
+    v-text="invalidMessage"
+  />
+  <div
+    v-if="hint !== null"
+    :id="getHintId()"
+    class="form-text"
+    v-text="hint"
+  />
+</template>
+
+<script>
+import validator from '../../mixins/validator.js'
+
+export default {
+  name: 'BsInput',
+  mixins: [validator],
+  props: {
+    /**
+     * Value for v-model
+     */
+    modelValue: {
+      type: String,
+      default: null,
+    },
+    /**
+     * Html id
+     */
+    id: {
+      type: String,
+      required: true,
+    },
+    /**
+     * Label for input
+     */
+    label: {
+      type: String,
+      default: null,
+    },
+    /**
+     * Attribute hint
+     */
+    hint: {
+      type: String,
+      default: null,
+    },
+    /**
+     * Options
+     */
+    options: {
+      type: Array,
+      default: () => [],
+    },
+    /**
+     * Placeholder
+     */
+    placeholder: {
+      type: String,
+      default: null,
+    },
+  },
+  emits: ['update:modelValue'],
+  methods: {
+    /**
+     * Hint id is generated
+     */
+    getHintId() {
+      return this.id + 'Hint'
+    },
+    /**
+     * On input event
+     *
+     * @param event
+     */
+    onInput(event) {
+      this.$emit('update:modelValue', event.target.value)
+    },
+  },
+}
+</script>

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

@@ -8,7 +8,7 @@
               'cursor-pointer': isSortableField(field),
               thClass,
             }"
-            @click="onHeadClick(field.key)"
+            @click="onHeadClick(field)"
           >
             <slot name="tr">
               {{ field.label }}
@@ -176,9 +176,9 @@ export default {
         return
       }
 
-      this.setSortDesc(field)
+      this.setSortDesc(field.key)
 
-      this.$emit('orderChanged', { sortDesc: this.sortDesc, orderBy: field })
+      this.$emit('orderChanged', { sortDesc: this.sortDesc, orderBy: field.key })
     },
   },
 }

package/src/index.js

@@ -7,6 +7,7 @@ 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 BsSelect from './components/bs-select/BsSelect.vue'
 import Validator from './mixins/validator.js'
 
 export {
@@ -19,5 +20,6 @@ export {
   BsTable,
   BsToast,
   BsModal,
+  BsSelect,
   Validator,
 }