5118201911
- Extracts dropdown sort menu into separate DashboardLinksSort component - Fixes incorrect sort order for newest/oldest links - Adds internationalization support for sort options - Updates QR code download button size for consistency - Adds helpful tooltip about sort limitation for loaded links The sort logic was reversed where newest/oldest were concerned, this fixes that while making the sorting feature more maintainable through component extraction.
48 lines
1.3 KiB
Vue
48 lines
1.3 KiB
Vue
<script setup>
|
|
import { ArrowUpDown } from 'lucide-vue-next'
|
|
|
|
defineProps({
|
|
sortBy: {
|
|
type: String,
|
|
default: 'az',
|
|
},
|
|
})
|
|
|
|
const emit = defineEmits(['update:sortBy'])
|
|
</script>
|
|
|
|
<template>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger as-child>
|
|
<Button variant="outline">
|
|
<TooltipProvider>
|
|
<Tooltip>
|
|
<TooltipTrigger class="flex items-center">
|
|
<ArrowUpDown class="h-4 w-4 sm:mr-2" />
|
|
<span class="hidden sm:inline">
|
|
{{ $t('links.sort.newest') }}
|
|
</span>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p>{{ $t('links.sort.tip') }}</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent>
|
|
<DropdownMenuItem @click="emit('update:sortBy', 'newest')">
|
|
{{ $t('links.sort.newest') }}
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem @click="emit('update:sortBy', 'oldest')">
|
|
{{ $t('links.sort.oldest') }}
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem @click="emit('update:sortBy', 'az')">
|
|
{{ $t('links.sort.az') }}
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem @click="emit('update:sortBy', 'za')">
|
|
{{ $t('links.sort.za') }}
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</template>
|