adrema/resources/js/components/ui/Th.vue

<template>
    <th @click="$emit('update:model-value')">
        <div class="flex justify-between items-center">
            <span v-text="label"></span>
            <ui-sprite v-if="value.by === column && value.direction === false" src="chevron" class="w-3 h-3 text-primaryfg ml-2">ASC</ui-sprite>
            <ui-sprite v-if="value.by === column && value.direction === true" src="chevron" class="rotate-180 w-3 h-3 text-primaryfg ml-2">DESC</ui-sprite>
        </div>
    </th>
</template>

<script setup>
defineEmits(['update:model-value']);

defineProps({
    column: {
        type: String,
        default: () => '',
    },
    label: {
        type: String,
        default: () => '',
    },
    value: {
        type: Object,
        default: () => {
            return {by: '', direction: false};
        },
    },
    sortable: {
        type: Boolean,
        default: false,
    },
});
</script>