121 lines
3.6 KiB
Vue
121 lines
3.6 KiB
Vue
<script setup lang="ts">
|
|
import { t } from '@/i18n'
|
|
|
|
import MediaBadge from '@/components/MediaBadge.vue'
|
|
import MediaCheckbox from '@/components/MediaCheckbox.vue'
|
|
import MediaThumb from '@/components/MediaThumb.vue'
|
|
import type { MediaItem } from '@/composables/useMedia'
|
|
import type { SelectAllState } from '@/composables/useMediaSelection'
|
|
import {
|
|
formatDimensions,
|
|
formatMediaDate,
|
|
formatSize,
|
|
formatType,
|
|
pluralArticles,
|
|
} from '@/lib/mediaFormat'
|
|
|
|
const ROW_GRID =
|
|
'grid grid-cols-[36px_minmax(0,1.7fr)_110px_76px_64px_120px_130px_100px] items-center pr-3'
|
|
|
|
defineProps<{
|
|
items: MediaItem[]
|
|
selected: number[]
|
|
allState: SelectAllState
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
open: [id: number, opener: HTMLElement]
|
|
toggle: [id: number]
|
|
'toggle-all': []
|
|
}>()
|
|
|
|
const ALL_STATES = {
|
|
none: 'unchecked',
|
|
partial: 'partial',
|
|
all: 'checked',
|
|
} as const
|
|
|
|
function open(event: Event, id: number) {
|
|
emit('open', id, event.currentTarget as HTMLElement)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="border border-default bg-default">
|
|
<div :class="ROW_GRID" class="h-9 bg-elevated font-medium text-muted">
|
|
<span class="flex justify-center">
|
|
<MediaCheckbox
|
|
size="sm"
|
|
:label="t('Select all')"
|
|
:state="ALL_STATES[allState]"
|
|
@toggle="emit('toggle-all')"
|
|
/>
|
|
</span>
|
|
<span>{{ t('Filename') }}</span>
|
|
<span>{{ t('Dimensions') }}</span>
|
|
<span>{{ t('Size') }}</span>
|
|
<span>{{ t('Type') }}</span>
|
|
<span>{{ t('Used in') }}</span>
|
|
<span>{{ t('Uploaded by') }}</span>
|
|
<span class="flex items-center gap-1 text-highlighted">
|
|
{{ t('Uploaded') }}
|
|
<UIcon name="i-lucide-arrow-down" class="size-3 shrink-0" />
|
|
</span>
|
|
</div>
|
|
<div
|
|
v-for="item in items"
|
|
:key="item.id"
|
|
data-testid="media-row"
|
|
:data-media-id="item.id"
|
|
:data-selected="selected.includes(item.id) || undefined"
|
|
class="relative h-14 border-t border-default"
|
|
:class="[
|
|
ROW_GRID,
|
|
selected.includes(item.id)
|
|
? 'bg-secondary-200 text-primary-900 dark:bg-secondary-300'
|
|
: 'bg-default text-muted hover:bg-elevated',
|
|
]"
|
|
>
|
|
<span class="relative z-10 flex justify-center">
|
|
<MediaCheckbox
|
|
size="sm"
|
|
:label="t('Select {0}', [item.filename])"
|
|
:state="selected.includes(item.id) ? 'checked' : 'unchecked'"
|
|
@toggle="emit('toggle', item.id)"
|
|
/>
|
|
</span>
|
|
<span class="flex min-w-0 items-center gap-3 pr-3">
|
|
<MediaThumb :item="item" size="sm" class="size-10 border border-default" />
|
|
<button
|
|
type="button"
|
|
data-media-card
|
|
:data-media-id="item.id"
|
|
class="truncate font-medium after:absolute after:inset-0 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary"
|
|
:class="selected.includes(item.id) ? 'text-primary-900' : 'text-highlighted'"
|
|
@click="open($event, item.id)"
|
|
>
|
|
{{ item.filename }}
|
|
</button>
|
|
<MediaBadge v-if="item.duplicate" kind="duplicate" :label="t('Duplicate')" />
|
|
</span>
|
|
<span>{{ formatDimensions(item.width, item.height) }}</span>
|
|
<span>{{ formatSize(item.size) }}</span>
|
|
<span>{{ formatType(item.content_type) }}</span>
|
|
<span>
|
|
<button
|
|
v-if="item.used_in > 0"
|
|
type="button"
|
|
data-testid="media-used-in"
|
|
class="relative z-10 text-highlighted underline underline-offset-3 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
|
|
@click="open($event, item.id)"
|
|
>
|
|
{{ pluralArticles(item.used_in) }}
|
|
</button>
|
|
<MediaBadge v-else kind="unused" :label="t('Unused')" />
|
|
</span>
|
|
<span class="truncate pr-2">{{ item.uploaded_by }}</span>
|
|
<span>{{ formatMediaDate(item.created_at) }}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|