bs-table sordesc operatoon

Author: zemkogabor

.gitignore

@@ -1,2 +1,3 @@
 .idea
 node_modules
+.editorconfig

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bootstrap-vue-wrapper",
-  "version": "1.9.12",
+  "version": "1.10.0",
   "description": "Bootstrap 5 components in Vue3 warapper.",
   "author": "Gabor Zemko <[email protected]>",
   "homepage": "https://github.com/zemkogabor/bootstrap-vue-wrapper",

src/components/bs-table/BsTable.vue

@@ -12,7 +12,7 @@
           >
             <slot name="tr">
               {{ field.label }}
-              <i v-if="isActiveOrderBy(field.key) && isSortDescDefined()" :class="getSortIconClass()" />
+              <i v-if="isActiveOrderBy(field.key) && this.sortDesc !== null" :class="getSortIconClass()" />
             </slot>
           </th>
         </template>
@@ -104,6 +104,13 @@ export default {
       type: String,
       default: null,
     },
+    /**
+     * Sort is descending or ascending
+     */
+    sortDesc: {
+      type: Boolean,
+      default: null,
+    },
     /**
      * th element css lass
      */
@@ -120,14 +127,6 @@ export default {
     },
   },
   emits: ['orderChanged'],
-  data() {
-    return {
-      /**
-       * Sort is desc or not. Default not defined.
-       */
-      sortDesc: null,
-    }
-  },
   methods: {
     /**
      * Is order by active by field?
@@ -147,32 +146,33 @@ export default {
     isSortableField(field) {
       return field.sort === undefined || field.sort
     },
-    /**
-     * Is sort defined?
-     *
-     * @returns {boolean}
-     */
-    isSortDescDefined() {
-      return this.sortDesc !== null
-    },
     /**
      * Sort icon class.
      *
      * @returns {string}
      */
     getSortIconClass() {
+      if (this.sortDesc === null) {
+        throw new Error('Sort desc value is null, cannot calculate the sort icon!')
+      }
+
       return this.sortDesc ? 'bi bi-caret-up-fill' : 'bi bi-caret-down-fill'
     },
     /**
-     * Set sort desc.
+     * Calcuate sort desc value on click
+     * Returns null if there is no sortDesc value.
      */
-    setSortDesc(field) {
-      if (this.isSortDescDefined() && !this.isOrderByChanged(field)) {
-        this.sortDesc = !this.sortDesc
-        return
+    calcSortDesc(field) {
+      if (this.sortDesc === null) {
+        return null
+      }
+
+      if (!this.isOrderByChanged(field)) {
+        // if the given order is already active, the sort will be the opposite
+        return !this.sortDesc
       }
 
-      this.sortDesc = false // default (first click) sort is ASC
+      return false // default (first click) sort is ASC
     },
     /**
      * Is order by changed?
@@ -188,9 +188,7 @@ export default {
         return
       }
 
-      this.setSortDesc(field.key)
-
-      this.$emit('orderChanged', { sortDesc: this.sortDesc, orderBy: field.key })
+      this.$emit('orderChanged', { sortDesc: this.calcSortDesc(field.key), orderBy: field.key })
     },
   },
 }