tethys.backend/resources/js/Components/Admin/Sort.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>