70 lines
1.5 KiB
Vue
70 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import type { TmdbSortData } from "@/libs/apis/tmdb/orders";
|
|
|
|
const emit = defineEmits(["click"]);
|
|
|
|
const { sortData } = defineProps<{ sortData: TmdbSortData }>();
|
|
|
|
const onButtonClicked = (event: Event): void => {
|
|
event.preventDefault();
|
|
emit("click");
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<th :aria-sort="sortData.sortOrder" scope="col">
|
|
<button
|
|
class="button-invisible" :data-sort-value="sortData.sortValue" role="button"
|
|
@click="onButtonClicked"
|
|
>
|
|
<slot></slot>
|
|
<span aria-hidden="true" class="sort-indicator"></span>
|
|
</button>
|
|
</th>
|
|
</template>
|
|
|
|
<style lang="css" scoped>
|
|
th {
|
|
position: relative;
|
|
}
|
|
|
|
button {
|
|
display: inline-block;
|
|
align-content: center;
|
|
font-size: var(--s-1);
|
|
font-weight: var(--brkly-font-weight-semibold);
|
|
text-align: left;
|
|
text-transform: uppercase;
|
|
letter-spacing: var(--letter-spacing-small);
|
|
background: inherit;
|
|
|
|
.sort-indicator {
|
|
opacity: 0.5;
|
|
|
|
&::after {
|
|
content: "♢";
|
|
display: inline-block;
|
|
min-inline-size: var(--s-1);
|
|
border-inline-end-style: var(--s3);
|
|
color: currentcolor;
|
|
text-align: center;
|
|
|
|
table th[aria-sort="descending"] & {
|
|
content: "▼";
|
|
color: currentcolor;
|
|
}
|
|
|
|
table th[aria-sort="ascending"] & {
|
|
content: "▲";
|
|
color: currentcolor;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
.sort-indicator {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
</style>
|