fix empty-value sorting edge cases and simplify sort components

resources/js/Components/Common/Client/ClientTableHeading.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { computed } from 'vue';
 import TableHeading from '@/Components/Common/TableHeading.vue';
 import SortableTableHeaderCell from '@/Components/Common/SortableTableHeaderCell.vue';
 import type { SortColumn, SortDirection } from '@/Components/Common/Client/ClientTable.vue';
@@ -10,20 +9,9 @@ const props = defineProps<{
     descFirstColumns: ReadonlySet<SortColumn>;
 }>();
 
-const emit = defineEmits<{
+defineEmits<{
     sort: [column: SortColumn];
 }>();
-
-// Bound once per cell instead of repeating the three sort props on every column.
-const sortState = computed(() => ({
-    sortColumn: props.sortColumn,
-    sortDirection: props.sortDirection,
-    descFirstColumns: props.descFirstColumns,
-}));
-
-function handleSort(column: SortColumn) {
-    emit('sort', column);
-}
 </script>
 
 <template>
@@ -31,14 +19,17 @@ function handleSort(column: SortColumn) {
         <SortableTableHeaderCell
             class="pr-3 pl-4 sm:pl-6 lg:pl-8 3xl:pl-12"
             column="name"
-            v-bind="sortState"
-            @sort="handleSort">
+            v-bind="props"
+            @sort="$emit('sort', $event)">
             Name
         </SortableTableHeaderCell>
-        <SortableTableHeaderCell column="projects_count" v-bind="sortState" @sort="handleSort">
+        <SortableTableHeaderCell
+            column="projects_count"
+            v-bind="props"
+            @sort="$emit('sort', $event)">
             Projects
         </SortableTableHeaderCell>
-        <SortableTableHeaderCell column="status" v-bind="sortState" @sort="handleSort">
+        <SortableTableHeaderCell column="status" v-bind="props" @sort="$emit('sort', $event)">
             Status
         </SortableTableHeaderCell>
         <div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">