mirror of https://github.com/halo-dev/halo
50 lines
1.1 KiB
Vue
50 lines
1.1 KiB
Vue
<script lang="ts" setup>
|
|
import {
|
|
GetThumbnailByUriSizeEnum,
|
|
type Attachment,
|
|
} from "@halo-dev/api-client";
|
|
import { computed, toRefs } from "vue";
|
|
import AttachmentSingleThumbnailItem from "./AttachmentSingleThumbnailItem.vue";
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
attachment?: Attachment;
|
|
}>(),
|
|
{
|
|
attachment: undefined,
|
|
}
|
|
);
|
|
|
|
const { attachment } = toRefs(props);
|
|
|
|
const sizeOrder: Record<GetThumbnailByUriSizeEnum, number> = {
|
|
XL: 4,
|
|
L: 3,
|
|
M: 2,
|
|
S: 1,
|
|
};
|
|
|
|
const thumbnails = computed(() => {
|
|
return Object.entries(attachment.value?.status?.thumbnails || {})
|
|
.sort(
|
|
([sizeA], [sizeB]) =>
|
|
(sizeOrder[sizeB as GetThumbnailByUriSizeEnum] || 0) -
|
|
(sizeOrder[sizeA as GetThumbnailByUriSizeEnum] || 0)
|
|
)
|
|
.map(([size, permalink]) => ({
|
|
size: size as GetThumbnailByUriSizeEnum,
|
|
permalink,
|
|
}));
|
|
});
|
|
</script>
|
|
<template>
|
|
<ul class="flex flex-col space-y-2">
|
|
<AttachmentSingleThumbnailItem
|
|
v-for="thumbnail in thumbnails"
|
|
:key="thumbnail.size"
|
|
:size="thumbnail.size"
|
|
:permalink="thumbnail.permalink"
|
|
/>
|
|
</ul>
|
|
</template>
|