@wishbone-media/spark 0.15.3 → 0.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wishbone-media/spark",
-  "version": "0.15.3",
+  "version": "0.16.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -22,6 +22,7 @@
     "@formkit/themes": "^1.6.9",
     "@formkit/vue": "^1.6.9",
     "@fortawesome/fontawesome-svg-core": "^7.1.0",
+    "@fortawesome/pro-duotone-svg-icons": "^7.1.0",
     "@fortawesome/pro-regular-svg-icons": "^7.1.0",
     "@fortawesome/vue-fontawesome": "^3.1.2",
     "@handsontable/vue3": "^16.1.1",

package/src/assets/css/spark-table.css

@@ -26,6 +26,10 @@
 .spark-table-table thead th {
   @apply !border-t-0 !border-x-0;
 
+  &.can-sort .relative {
+    @apply cursor-pointer;
+  }
+
   &.ht__highlight .relative {
     @apply bg-gray-200;
   }
@@ -39,6 +43,33 @@
         tracking-wider focus:outline-hidden drop-shadow-sm filter flex items-center;
 
     @apply !px-5 !py-3;
+
+    .fa-sort-up,
+    .fa-sort-down {
+      @apply hidden;
+    }
+
+    &.asc {
+      .fa-sort-up {
+        @apply inline;
+      }
+
+      .fa-sort,
+      .fa-sort-down {
+        @apply hidden;
+      }
+    }
+
+    &.desc {
+      .fa-sort-down {
+        @apply inline;
+      }
+
+      .fa-sort,
+      .fa-sort-up {
+        @apply hidden;
+      }
+    }
   }
 
   .colHeader {
@@ -64,6 +95,5 @@
 }
 
 .spark-table-head-sorting {
-  /* hidden for now */
-  @apply hidden;
+  @apply absolute right-5 w-5 h-5 border border-gray-200 rounded-md grid place-items-center;
 }

package/src/components/SparkTable.vue

@@ -75,7 +75,7 @@ import {
 } from 'handsontable/plugins'
 import { registerAllCellTypes } from 'handsontable/cellTypes'
 import { watchDebounced } from '@vueuse/core'
-import { customiseHeader } from '@/utils/sparkTable/header.js'
+import { customiseHeader, syncSortClasses } from '@/utils/sparkTable/header.js'
 import { registerSparkRenderers } from '@/utils/sparkTable/renderers'
 import { updateRow } from '@/utils/sparkTable/update-row.js'
 import SparkTablePaginationDetails from './SparkTablePaginationDetails.vue'
@@ -324,6 +324,7 @@ const sparkTable = reactive({
         afterGetColHeader: (col, th) => customiseHeader(col, th, sparkTable),
       }),
       afterChange: (changes, source) => updateRow(changes, source, sparkTable),
+      afterRender: () => syncSortClasses(sparkTable),
     },
     ...props.settings,
   })),

package/src/plugins/fontawesome.js

@@ -42,6 +42,12 @@ import {
   faUndo,
 } from '@fortawesome/pro-regular-svg-icons'
 
+import {
+  faSort as faSortDuotone,
+  faSortDown as faSortDownDuotone,
+  faSortUp as faSortUpDuotone,
+} from '@fortawesome/pro-duotone-svg-icons'
+
 export const Icons = {
   farArrowLeftToLine: faArrowLeftToLine,
   farArrowRightToLine: faArrowRightToLine,
@@ -81,6 +87,9 @@ export const Icons = {
   farSignOut: faSignOut,
   farEye: faEye,
   farUndo: faUndo,
+  fadSort: faSortDuotone,
+  fadSortDown: faSortDownDuotone,
+  fadSortUp: faSortUpDuotone,
 }
 
 export function addIcons(newIcons) {

package/src/utils/sparkTable/header.js

@@ -11,33 +11,36 @@ const customSort = (prop, th, sparkTable) => {
   const iconContainer = document.createElement('span')
   iconContainer.classList.add('spark-table-head-sorting')
   iconContainer.innerHTML =
-    icon({ prefix: 'far', iconName: 'sort' }).html +
-    icon({ prefix: 'far', iconName: 'sort-up' }).html +
-    icon({ prefix: 'far', iconName: 'sort-down' }).html
+    icon({ prefix: 'fad', iconName: 'sort' }).html +
+    icon({ prefix: 'fad', iconName: 'sort-up' }).html +
+    icon({ prefix: 'fad', iconName: 'sort-down' }).html
   heading.appendChild(iconContainer)
 
   heading.addEventListener('click', async () => {
-    const currentSorting = sparkTable.params.sort
+    const currentOrderingBy = sparkTable.params.orderBy
+    const currentSortingBy = sparkTable.params.sortedBy
 
-    if (currentSorting === prop) {
+    if (currentOrderingBy === prop && currentSortingBy === 'asc') {
       heading.classList.remove('asc')
       heading.classList.add('desc')
 
       return sparkTable.methods.applyParams({
-        sort: `-${prop}`,
+        orderBy: prop,
+        sortedBy: 'desc',
       })
     }
 
-    if (currentSorting === `-${prop}`) {
+    if (currentOrderingBy === prop) {
       heading.classList.remove('desc')
 
-      return await sparkTable.methods.removeParam('sort')
+      return await sparkTable.methods.clearParams(['orderBy', 'sortedBy'])
     }
 
     heading.classList.add('asc')
 
     return sparkTable.methods.applyParams({
-      sort: prop,
+      orderBy: prop,
+      sortedBy: 'asc',
     })
   })
 }
@@ -134,4 +137,33 @@ const customiseHeader = (col, th, sparkTable) => {
   }
 }
 
-export { customiseHeader }
+const syncSortClasses = (sparkTable) => {
+  if (!sparkTable.hotInstance || !sparkTable.hotInstance.rootElement) {
+    return
+  }
+
+  const orderBy = sparkTable.params.orderBy
+  const sortedBy = sparkTable.params.sortedBy
+
+  // Get all sortable headers and clear their sort classes
+  const headers = sparkTable.hotInstance.rootElement.querySelectorAll('thead th.can-sort .relative')
+
+  headers.forEach((heading) => {
+    heading.classList.remove('asc', 'desc')
+  })
+
+  // If there's an active sort, find the corresponding heading and add the class
+  if (orderBy && sortedBy) {
+    headers.forEach((heading) => {
+      const th = heading.closest('th')
+      const colIndex = Array.from(th.parentElement.children).indexOf(th)
+      const prop = sparkTable.methods.colToProp(colIndex)
+
+      if (prop === orderBy) {
+        heading.classList.add(sortedBy)
+      }
+    })
+  }
+}
+
+export { customiseHeader, syncSortClasses }