112 lines
2.5 KiB
Vue
112 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import { t } from '@/i18n'
|
|
|
|
import { computed } from 'vue'
|
|
|
|
const QUERY_MAX_LENGTH = 40
|
|
|
|
const props = defineProps<{
|
|
variant: 'first-run' | 'no-results' | 'no-duplicates' | 'no-variants'
|
|
query?: string
|
|
filterLabel?: string
|
|
offline?: boolean
|
|
limited?: boolean
|
|
}>()
|
|
|
|
const emit = defineEmits<{ action: [] }>()
|
|
|
|
const truncatedQuery = computed(() => (props.query ?? '').slice(0, QUERY_MAX_LENGTH))
|
|
|
|
const current = computed(() => {
|
|
if (props.variant === 'first-run') {
|
|
return {
|
|
icon: 'i-lucide-images',
|
|
get title() {
|
|
return t('No images yet')
|
|
},
|
|
get description() {
|
|
return t('Upload your first image. You can use it in any article.')
|
|
},
|
|
action: t('Upload an image'),
|
|
}
|
|
}
|
|
if (props.variant === 'no-duplicates') {
|
|
return {
|
|
icon: 'i-lucide-copy',
|
|
get title() {
|
|
return t('No duplicates')
|
|
},
|
|
get description() {
|
|
return t('Every image in your library is different.')
|
|
},
|
|
action: t('Back to all images'),
|
|
}
|
|
}
|
|
if (props.variant === 'no-variants') {
|
|
return {
|
|
icon: 'i-lucide-layers',
|
|
get title() {
|
|
return t('No images with variants')
|
|
},
|
|
get description() {
|
|
return t(
|
|
'Variants are generated when an image is requested with ?v=<name>, or from its Variants tab.',
|
|
)
|
|
},
|
|
action: t('Show all images'),
|
|
}
|
|
}
|
|
return {
|
|
icon: 'i-lucide-search',
|
|
get title() {
|
|
return truncatedQuery.value
|
|
? t('No images match \u0022{0}\u0022', [truncatedQuery.value])
|
|
: t('No images match this filter')
|
|
},
|
|
get description() {
|
|
return t('Nothing matches in {0}. Check the spelling, or clear the filters.', [
|
|
props.filterLabel ?? t('All'),
|
|
])
|
|
},
|
|
action: t('Clear filters'),
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<UEmpty
|
|
variant="naked"
|
|
:icon="current.icon"
|
|
:title="current.title"
|
|
:description="current.description"
|
|
:ui="{
|
|
root: 'gap-3 border border-default bg-default px-6 py-14',
|
|
header: 'gap-3',
|
|
avatar: 'mb-0 size-11 rounded-none bg-elevated text-toned',
|
|
title: 'text-[0.9375rem] font-semibold',
|
|
description: 'max-w-80 text-muted text-pretty',
|
|
}"
|
|
>
|
|
<template #actions>
|
|
<UButton
|
|
v-if="variant === 'first-run'"
|
|
icon="i-lucide-upload"
|
|
:disabled="offline || limited"
|
|
class="h-11 px-4 md:h-8"
|
|
@click="emit('action')"
|
|
>
|
|
{{ current.action }}
|
|
</UButton>
|
|
<UButton
|
|
v-else
|
|
color="neutral"
|
|
variant="outline"
|
|
class="h-11 border border-accented bg-default px-4 text-highlighted ring-0 md:h-8"
|
|
@click="emit('action')"
|
|
>
|
|
{{ current.action }}
|
|
</UButton>
|
|
</template>
|
|
</UEmpty>
|
|
</template>
|