58 lines
1.6 KiB
Vue
58 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import { t, formatNumber } from '@/i18n'
|
|
|
|
import { computed } from 'vue'
|
|
import { useElementBounding, useMediaQuery } from '@vueuse/core'
|
|
|
|
const DESKTOP_QUERY = '(min-width: 48rem)'
|
|
const CONTENT_SELECTOR = '#dashboard-content'
|
|
|
|
defineProps<{
|
|
count: number
|
|
offline: boolean
|
|
obscured: boolean
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
delete: []
|
|
clear: []
|
|
}>()
|
|
|
|
const isDesktop = useMediaQuery(DESKTOP_QUERY)
|
|
const content = useElementBounding(() => document.querySelector<HTMLElement>(CONTENT_SELECTOR))
|
|
const centre = computed(() => `${content.left.value + content.width.value / 2}px`)
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
role="region"
|
|
:aria-label="t('Selection')"
|
|
data-testid="media-bulk-bar"
|
|
class="fixed bottom-4 z-(--z-banner) flex items-center gap-2 bg-inverted py-2 pr-2 pl-4 text-inverted shadow-(--shadow-popover) max-md:inset-x-4 md:bottom-6 md:left-(--bulk-centre) md:w-100 md:-translate-x-1/2"
|
|
:class="{ invisible: obscured }"
|
|
:inert="obscured || undefined"
|
|
:style="isDesktop ? { '--bulk-centre': centre } : undefined"
|
|
>
|
|
<span class="flex-1 font-medium">{{ formatNumber(count) }} {{ t('selected') }}</span>
|
|
<UButton
|
|
color="error"
|
|
icon="i-lucide-trash-2"
|
|
:disabled="offline"
|
|
data-testid="bulk-delete"
|
|
class="h-11 px-3 md:h-8"
|
|
@click="emit('delete')"
|
|
>
|
|
{{ t('Delete') }}
|
|
</UButton>
|
|
<UButton
|
|
color="neutral"
|
|
variant="outline"
|
|
data-testid="bulk-clear"
|
|
class="h-11 border border-(--ui-text-inverted) bg-transparent px-3 text-inverted ring-0 hover:bg-transparent md:h-8"
|
|
@click="emit('clear')"
|
|
>
|
|
{{ t('Clear') }}
|
|
</UButton>
|
|
</div>
|
|
</template>
|