73 lines
1.9 KiB
Vue
73 lines
1.9 KiB
Vue
<script setup>
|
|
import { h } from 'vue';
|
|
import { ArrowUpDown, ArrowUp, ArrowDown, EyeOff } from 'lucide-vue-next';
|
|
import { Button } from '@/Components/ui/button';
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from '@/Components/ui/dropdown-menu';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
const props = defineProps({
|
|
column: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
title: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
class: {
|
|
type: [String, Object, Array],
|
|
default: null,
|
|
},
|
|
});
|
|
|
|
const getSortIcon = (column) => {
|
|
if (!column.getIsSorted()) return ArrowUpDown;
|
|
return column.getIsSorted() === 'asc' ? ArrowUp : ArrowDown;
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="column.getCanSort()" :class="cn('flex items-center space-x-2', props.class)">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger as-child>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
class="-ml-3 h-8 data-[state=open]:bg-accent"
|
|
>
|
|
<span>{{ title }}</span>
|
|
<component
|
|
:is="getSortIcon(column)"
|
|
class="ml-2 h-4 w-4"
|
|
/>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuItem @click="column.toggleSorting(false)">
|
|
<ArrowUp class="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
|
|
Asc
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem @click="column.toggleSorting(true)">
|
|
<ArrowDown class="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
|
|
Desc
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem @click="column.toggleVisibility(false)">
|
|
<EyeOff class="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
|
|
Hide
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
<div v-else :class="cn('', props.class)">
|
|
{{ title }}
|
|
</div>
|
|
</template>
|
|
|