RenewCMS/web/src/components/MediaGrid.vue

<script setup lang="ts">
import { t } from '@/i18n'

import { ref } from 'vue'
import MediaCardBadges from '@/components/MediaCardBadges.vue'
import MediaCheckbox from '@/components/MediaCheckbox.vue'
import MediaThumb from '@/components/MediaThumb.vue'
import type { MediaItem } from '@/composables/useMedia'
import { accessibleName, formatDimensions, formatSize, totalMeta } from '@/lib/mediaFormat'

const SELECTED_CARD =
	'border-primary bg-secondary-200 text-primary-900 inset-ring-1 inset-ring-primary dark:bg-secondary-300'
const IDLE_CARD = 'border-default bg-default text-default'

const props = defineProps<{
	items: MediaItem[]
	columns: number
	selected: number[]
	totalSize?: boolean
}>()

const emit = defineEmits<{
	open: [id: number, opener: HTMLElement]
	toggle: [id: number]
}>()

const grid = ref<HTMLElement | null>(null)

function cards() {
	return Array.from(grid.value?.querySelectorAll<HTMLElement>('[data-media-card]') ?? [])
}

function targetIndex(key: string, index: number) {
	const steps: Record<string, number> = {
		ArrowLeft: -1,
		ArrowRight: 1,
		ArrowUp: -props.columns,
		ArrowDown: props.columns,
	}
	const step = steps[key]
	if (step === undefined) {
		return null
	}
	const next = index + step
	return next >= 0 && next < props.items.length ? next : index
}

function onKeydown(event: KeyboardEvent, item: MediaItem, index: number) {
	if (event.key === ' ') {
		event.preventDefault()
		if (!event.repeat) {
			emit('toggle', item.id)
		}
		return
	}
	if (event.key === 'Enter') {
		event.preventDefault()
		emit('open', item.id, event.currentTarget as HTMLElement)
		return
	}
	const target = targetIndex(event.key, index)
	if (target === null) {
		return
	}
	event.preventDefault()
	cards()[target]?.focus()
}

function onKeyup(event: KeyboardEvent) {
	if (event.key === ' ') {
		event.preventDefault()
	}
}
</script>

<template>
	<div ref="grid" class="grid grid-cols-2 gap-2.5 md:grid-cols-5 md:gap-4">
		<div v-for="(item, index) in items" :key="item.id" class="group/card relative min-w-0">
			<button
				type="button"
				data-media-card
				:data-media-id="item.id"
				:data-selected="selected.includes(item.id) || undefined"
				:aria-label="accessibleName(item)"
				class="flex w-full min-w-0 flex-col border text-start transition-shadow focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
				:class="
					selected.includes(item.id)
						? SELECTED_CARD
						: [IDLE_CARD, 'hover:border-accented hover:shadow-(--shadow-popover)']
				"
				@click="emit('open', item.id, $event.currentTarget as HTMLElement)"
				@keydown="onKeydown($event, item, index)"
				@keyup="onKeyup"
			>
				<MediaThumb
					:item="item"
					class="aspect-4/3 w-full border-b"
					:class="selected.includes(item.id) ? 'border-primary' : 'border-default'"
				/>
				<span class="flex min-w-0 flex-col gap-1.5 px-3 py-2.5">
					<span class="flex min-w-0 flex-col gap-0.5">
						<span
							class="truncate font-medium"
							:class="
								selected.includes(item.id) ? 'text-primary-900' : 'text-highlighted'
							"
							>{{ item.filename }}</span
						>
						<span
							class="truncate text-xs/5"
							:class="selected.includes(item.id) ? 'text-primary-600' : 'text-muted'"
							>{{
								totalSize
									? totalMeta(item)
									: `${formatSize(item.size)} · ${formatDimensions(item.width, item.height)}`
							}}</span
						>
					</span>
					<span class="flex flex-wrap gap-1">
						<MediaCardBadges :item="item" variants />
					</span>
				</span>
			</button>
			<div
				data-testid="card-checkbox"
				class="absolute top-0 left-0 flex size-11 items-center justify-center md:size-9"
				:class="
					selected.length > 0
						? 'opacity-100'
						: 'max-md:opacity-100 md:opacity-0 md:group-hover/card:opacity-100 md:group-has-[:focus-visible]/card:opacity-100'
				"
				@click.self="emit('toggle', item.id)"
			>
				<MediaCheckbox
					:state="selected.includes(item.id) ? 'checked' : 'unchecked'"
					:label="t('Select {0}', [item.filename])"
					:tabbable="false"
					@toggle="emit('toggle', item.id)"
				/>
			</div>
		</div>
	</div>
</template>