45 lines
1.0 KiB
Vue
45 lines
1.0 KiB
Vue
<script setup lang="ts">
|
|
import { t } from '@/i18n'
|
|
|
|
import { computed } from 'vue'
|
|
import { ACTIVITY_CATEGORIES, categoryLabel, type ActivityCategory } from '@/lib/activity'
|
|
|
|
defineProps<{
|
|
category: ActivityCategory | ''
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
select: [category: ActivityCategory]
|
|
}>()
|
|
|
|
const items = computed(() =>
|
|
ACTIVITY_CATEGORIES.map((category) => ({
|
|
label: categoryLabel(category),
|
|
value: category,
|
|
})),
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<USelectMenu
|
|
:model-value="category || undefined"
|
|
:items="items"
|
|
value-key="value"
|
|
icon="i-lucide-layout-list"
|
|
:placeholder="t('All categories')"
|
|
:search-input="false"
|
|
:aria-label="t('Category')"
|
|
color="neutral"
|
|
variant="outline"
|
|
class="w-full md:w-44"
|
|
:ui="{
|
|
base: 'h-11 rounded-none border border-accented bg-default ps-8 pe-8 text-sm ring-0 md:h-8',
|
|
leadingIcon: 'size-3.5 text-muted',
|
|
trailingIcon: 'size-3.5 text-muted',
|
|
placeholder: 'text-muted',
|
|
content: 'min-w-48',
|
|
}"
|
|
@update:model-value="emit('select', $event as ActivityCategory)"
|
|
/>
|
|
</template>
|