@wishbone-media/spark 0.15.2 → 0.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wishbone-media/spark",
-  "version": "0.15.2",
+  "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/components/plugins/SparkTableDatePicker.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="spark-table-date-picker">
     <FormKit
+      :key="componentKey"
       v-model="selectedDate"
       type="datepicker"
       picker-only
@@ -89,6 +90,7 @@ const props = defineProps({
 const selectedDate = ref(null)
 const label = props.config.label || null
 const param = props.config.param || `filter[${props.config.key}]`
+const componentKey = ref(`${param}-0`)
 
 // Initialize from existing params
 selectedDate.value = props.sparkTable.params[param] || null
@@ -105,12 +107,18 @@ watch(selectedDate, (newValue) => {
   }
 })
 
-// Watch for external param changes
+// Watch for external param changes (e.g., when reset button clears params)
 watch(
   () => props.sparkTable.params[param],
   (newValue) => {
-    if (!newValue && selectedDate.value) {
+    if ((newValue === undefined || newValue === null || newValue === '') && selectedDate.value) {
       selectedDate.value = null
+      // Force re-render of FormKit datepicker component to clear its internal state
+      // Increment the numeric suffix to create a new unique key
+      const currentCount = parseInt(componentKey.value.split('-').pop()) || 0
+      componentKey.value = `${param}-${currentCount + 1}`
+    } else if (newValue && newValue !== selectedDate.value) {
+      selectedDate.value = newValue
     }
   },
 )

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 }