[6.x] Contextual sort icon (#13321)

Author: JayGeorge

resources/js/components/ui/Listing/HeaderCell.vue

@@ -10,8 +10,12 @@ const props = defineProps({
     },
 });
 
-const { sortColumn, setSortColumn } = injectListingContext();
+const { sortColumn, sortDirection, setSortColumn } = injectListingContext();
 const isCurrentSortColumn = computed(() => props.column.field === sortColumn.value);
+const sortIcon = computed(() => {
+    if (!isCurrentSortColumn.value) return null;
+    return sortDirection.value === 'asc' ? 'sort-asc' : 'sort-desc';
+});
 </script>
 
 <template>
@@ -20,7 +24,7 @@ const isCurrentSortColumn = computed(() => props.column.field === sortColumn.val
         <Button
             v-else
             :text="__(column.label)"
-            :icon-append="isCurrentSortColumn ? 'up-down' : null"
+            :icon-append="sortIcon"
             size="sm"
             variant="ghost"
             class="-mt-2 -mb-1 -ms-3 text-sm! font-medium! text-gray-900! dark:text-gray-400!"

resources/js/components/ui/Listing/Listing.vue

@@ -596,6 +596,7 @@ provideListingContext({
     isColumnVisible,
     hiddenColumns,
     sortColumn,
+    sortDirection,
     setSortColumn,
     selections,
     maxSelections: toRef(() => props.maxSelections),