77 lines
1.6 KiB
Vue
77 lines
1.6 KiB
Vue
<script setup>
|
|
import { ref, computed } from 'vue';
|
|
import { Link } from '@inertiajs/vue3';
|
|
import { stardust } from '@eidellev/adonis-stardust/client';
|
|
|
|
const props = defineProps({
|
|
label: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
attribute: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
search: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
});
|
|
|
|
const downFill = ref('lightgray');
|
|
const upFill = ref('lightgray');
|
|
|
|
const sortLink = computed(() => {
|
|
let url = new URL(document.location);
|
|
let sortValue = url.searchParams.get('sort');
|
|
|
|
if (sortValue == props.attribute) {
|
|
url.searchParams.set('sort', '-' + props.attribute);
|
|
upFill.value = 'black';
|
|
} else if (sortValue === '-' + props.attribute) {
|
|
url.searchParams.set('sort', props.attribute);
|
|
downFill.value = 'black';
|
|
} else {
|
|
url.searchParams.set('sort', props.attribute);
|
|
}
|
|
|
|
if (props.search == '') {
|
|
url.searchParams.delete('search');
|
|
} else {
|
|
url.searchParams.set('search', props.search);
|
|
}
|
|
|
|
return url.href;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex items-center gap-4">
|
|
<Link :href="sortLink" class="no-underline hover:underline text-cyan-600 dark:text-cyan-400">
|
|
{{ label }}
|
|
</Link>
|
|
<div class="flex flex-col">
|
|
<svg
|
|
class="inline-block"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="15px"
|
|
height="15px"
|
|
viewBox="0 0 15 15"
|
|
fill="none"
|
|
>
|
|
<path d="M7.5 3L15 11H0L7.5 3Z" :fill="upFill" />
|
|
</svg>
|
|
<svg
|
|
class="inline-block"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="15px"
|
|
height="15px"
|
|
viewBox="0 0 15 15"
|
|
fill="none"
|
|
>
|
|
<path d="M7.49988 12L-0.00012207 4L14.9999 4L7.49988 12Z" :fill="downFill" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</template>
|