bootstrap-vue-wrapper 1.7.12 → 1.8.0

package/README.md

@@ -1,4 +1,4 @@
-# bootstrap-Vue Wrapper
+# Bootstrap-Vue Wrapper
 
 [![NPM version](https://img.shields.io/npm/v/bootstrap-vue-wrapper.svg)](https://www.npmjs.com/package/bootstrap-vue-wrapper)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bootstrap-vue-wrapper",
-  "version": "1.7.12",
+  "version": "1.8.0",
   "description": "Bootstrap 5 components in Vue3 warapper.",
   "author": "Gabor Zemko <gaborzemko@gmail.com>",
   "homepage": "https://github.com/zemkogabor/bootstrap-vue-wrapper",
@@ -12,9 +12,9 @@
   },
   "main": "src/index.js",
   "dependencies": {
-    "bootstrap": "^5.1",
-    "vue": "^3.2",
-    "vue-router": "^4.0"
+    "bootstrap": "^5.1.0",
+    "vue": "^3.2.0",
+    "vue-router": "^4.0.0"
   },
   "devDependencies": {
     "eslint": "^8.8.0",

package/src/components/bs-breadcrumb/BsBreadcrumb.vue

@@ -5,10 +5,10 @@
         v-for="(item, index) in items"
         :key="index"
         class="breadcrumb-item"
-        :class="{ active: isActiveItem(item)}"
+        :class="{ active: !isRouteAvailable(item)}"
       >
         <router-link
-          v-if="!isActiveItem(item)"
+          v-if="isRouteAvailable(item)"
           :to="item.route"
           v-text="item.title"
         />
@@ -32,17 +32,17 @@ export default {
   },
   methods: {
     /**
-     * Is active item
+     * Is route available
      *
      * @param item
      * @returns {boolean}
      */
-    isActiveItem(item) {
-      if (item.route === undefined || item.route === null) {
+    isRouteAvailable(item) {
+      if (!item.route) {
         return false
       }
 
-      return item.route.name === this.$route.name
+      return item.route.name !== this.$route.name
     },
   },
 }

package/src/components/bs-radio/BsRadio.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="form-check" :class="classContainer">
+    <input
+      :id="id"
+      ref="validationTarget"
+      :value="modelValue"
+      v-bind="$attrs"
+      type="radio"
+      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
+      v-if="invalidMessage !== null && !hideValidationMessage"
+      class="invalid-feedback"
+      v-text="invalidMessage"
+    />
+    <div
+      v-if="hint !== null"
+      :id="getHintId()"
+      class="form-text"
+      v-text="hint"
+    />
+  </div>
+</template>
+
+<script>
+import validator from '../../mixins/validator.js'
+
+export default {
+  name: 'BsRadio',
+  mixins: [validator],
+  props: {
+    /**
+     * Radio value
+     */
+    value: {
+      type: [String, Number],
+      default: null,
+    },
+    /**
+     * Value for v-model
+     */
+    modelValue: {
+      type: [String, Number],
+      default: null,
+    },
+    /**
+     * Html id
+     */
+    id: {
+      type: String,
+      required: true,
+    },
+    /**
+     * Label for input
+     */
+    label: {
+      type: String,
+      default: null,
+    },
+    /**
+     * Attribute hint
+     */
+    hint: {
+      type: String,
+      default: null,
+    },
+    /**
+     * Input container div class.
+     */
+    classContainer: {
+      type: String,
+      default: null,
+    },
+    /**
+     * If this is true the validation message does not appear.
+     */
+    hideValidationMessage: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['update:modelValue'],
+  computed: {
+    /**
+     * Radio is checked or not.
+     */
+    isChecked() {
+      return this.modelValue === this.value
+    },
+  },
+  methods: {
+    /**
+     * Hint id is generated
+     */
+    getHintId() {
+      return this.id + 'Hint'
+    },
+    /**
+     * On input event
+     *
+     * @param event
+     */
+    onInput(event) {
+      this.$emit('update:modelValue', this.value)
+    },
+  },
+}
+</script>