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