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

35 lines
908 B
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>