Fix selected image counter

This commit is contained in:
Timothée Goguely 2024-10-16 18:05:29 +02:00
parent 81d07b2493
commit c062c40b31
3 changed files with 8 additions and 3 deletions

View file

@ -1,6 +1,6 @@
<template> <template>
<div <div
class="auto-grid | counter" class="auto-grid"
role="grid" role="grid"
multiselectable="true" multiselectable="true"
style="--min: 15rem; --gap: 0.5rem" style="--min: 15rem; --gap: 0.5rem"

View file

@ -1,5 +1,5 @@
<template> <template>
<div class="auto-grid | counter" role="grid" multiselectable="true" style="--min: 15rem; --gap: 0.5rem"> <div class="auto-grid" role="grid" multiselectable="true" style="--min: 15rem; --gap: 0.5rem">
<FileUpload <FileUpload
mode="basic" mode="basic"
name="images[]" name="images[]"
@ -46,6 +46,11 @@
class="image" class="image"
role="gridcell" role="gridcell"
:aria-selected="isSelected(image)" :aria-selected="isSelected(image)"
:data-count="
tab.selectedImages.includes(image)
? tab.selectedImages.indexOf(image) + 1
: undefined
"
> >
<img <img
:src="image.url" :src="image.url"

View file

@ -235,7 +235,7 @@ function setStepStatus(stepName) {
outline: 2px solid var(--color-focus-ring); outline: 2px solid var(--color-focus-ring);
} }
.image[aria-selected="true"]::after { .image[aria-selected="true"]::after {
content: counter(selected-items); content: attr(data-count);
position: absolute; position: absolute;
top: var(--space-12); top: var(--space-12);
right: var(--space-12); right: var(--space-12);