42 lines
1.0 KiB
Vue
42 lines
1.0 KiB
Vue
<script setup lang="ts">
|
|
import { t } from '@/i18n'
|
|
|
|
import { computed } from 'vue'
|
|
import type { SelectAllState } from '@/composables/useMediaSelection'
|
|
|
|
const props = defineProps<{
|
|
state: SelectAllState
|
|
count: number
|
|
}>()
|
|
|
|
const emit = defineEmits<{ toggle: [] }>()
|
|
|
|
const modelValue = computed(() => {
|
|
if (props.state === 'partial') {
|
|
return 'indeterminate' as const
|
|
}
|
|
return props.state === 'all'
|
|
})
|
|
const imageCount = computed(() => t(props.count === 1 ? '{0} image' : '{0} images', [props.count]))
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex items-center gap-2.5 text-muted">
|
|
<UCheckbox
|
|
:model-value="modelValue"
|
|
:label="t('Select all')"
|
|
color="primary"
|
|
class="-ml-2.75 md:ml-0"
|
|
:ui="{
|
|
root: 'items-center',
|
|
container: 'size-11 shrink-0 items-center justify-center md:size-4.5',
|
|
base: 'size-5.5 bg-default md:size-4.5',
|
|
wrapper: 'ms-2.5',
|
|
label: 'font-medium text-highlighted',
|
|
}"
|
|
@update:model-value="emit('toggle')"
|
|
/>
|
|
<span data-testid="image-count">{{ imageCount }}</span>
|
|
</div>
|
|
</template>
|