Merge pull request #763 from devhus/main

CSS possibilities correction for BTable sort-icon (Very important for UX)

Author: VividLemon

packages/bootstrap-vue-3/src/components/BTable/BTable.vue

@@ -36,8 +36,12 @@
               :direction="sortDescBoolean ? 'desc' : 'asc'"
             >
               <span
-                v-if="isSortable && field.sortable && field.key === sortBy"
-                class="b-table-sort-icon text-muted small"
+                v-if="isSortable && field.sortable"
+                class="b-table-sort-icon"
+                :class="{
+                  sorted: field.key === sortBy,
+                  [`sorted-${sortDescBoolean ? 'desc' : 'asc'}`]: field.key === sortBy,
+                }"
               />
             </slot>
             <div>

packages/bootstrap-vue-3/src/components/BTable/_table.scss

@@ -175,11 +175,11 @@
   }
 
   &.b-table-sortable {
-    &.b-table-sort-asc .b-table-sort-icon::before {
+    &.b-table-sort-asc .sorted.b-table-sort-icon::before {
       content: "▲";
     }
 
-    &.b-table-sort-desc .b-table-sort-icon::before {
+    &.b-table-sort-desc .sorted.b-table-sort-icon::before {
       content: "▼";
     }
   }

packages/bootstrap-vue-3/src/constants/env.ts

@@ -3,6 +3,7 @@ declare var MozMutationObserver: any
 
 export const HAS_WINDOW_SUPPORT = typeof window !== 'undefined'
 export const HAS_DOCUMENT_SUPPORT = typeof document !== 'undefined'
+export const HAS_ELEMENT_SUPPORT = typeof Element !== 'undefined'
 export const HAS_NAVIGATOR_SUPPORT = typeof navigator !== 'undefined'
 export const HAS_PROMISE_SUPPORT = typeof Promise !== 'undefined'
 

packages/bootstrap-vue-3/src/utils/dom.ts

@@ -1,17 +1,17 @@
 import {Comment, Slot, VNode} from 'vue'
-import {DOCUMENT} from '../constants/env'
+import {DOCUMENT, HAS_ELEMENT_SUPPORT} from '../constants/env'
 import {AnimationFrame} from '../types/safeTypes'
 import {HAS_WINDOW_SUPPORT} from './env'
 import {toString} from './stringUtils'
 
-const ELEMENT_PROTO = Element.prototype
+const ELEMENT_PROTO = HAS_ELEMENT_SUPPORT ? Element.prototype : undefined
 
 // See: https://developer.mozilla.org/en-US/docs/Web/API/Element/matches#Polyfill
 /* istanbul ignore next */
 export const matchesEl =
-  ELEMENT_PROTO.matches ||
-  (ELEMENT_PROTO as any).msMatchesSelector ||
-  ELEMENT_PROTO.webkitMatchesSelector
+  ELEMENT_PROTO?.matches ||
+  (ELEMENT_PROTO as any)?.msMatchesSelector ||
+  ELEMENT_PROTO?.webkitMatchesSelector
 
 /**
  * @param el
@@ -214,8 +214,9 @@ export const matches = (el: Element, selector: string) =>
 
 // See: https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
 /* istanbul ignore next */
+/* eslint-disable @typescript-eslint/no-this-alias */
 export const closestEl =
-  ELEMENT_PROTO.closest ||
+  ELEMENT_PROTO?.closest ||
   function (this: Element, sel: string) {
     let el = this
     if (!el) return null