138 lines
3.9 KiB
Vue
138 lines
3.9 KiB
Vue
<script setup lang="ts">
|
|
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 } 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[]
|
|
}>()
|
|
|
|
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'"
|
|
>{{ formatSize(item.size) }} ·
|
|
{{ formatDimensions(item.width, item.height) }}</span
|
|
>
|
|
</span>
|
|
<span class="flex flex-wrap gap-1">
|
|
<MediaCardBadges :item="item" />
|
|
</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="`Select ${item.filename}`"
|
|
:tabbable="false"
|
|
@toggle="emit('toggle', item.id)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|