Fix selected image counter
This commit is contained in:
parent
81d07b2493
commit
c062c40b31
3 changed files with 8 additions and 3 deletions
|
|
@ -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"
|
||||||
|
|
|
||||||
|
|
@ -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"
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue