50 lines
1.3 KiB
Vue
50 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import { t } from '@/i18n'
|
|
|
|
import { computed } from 'vue'
|
|
import { PAGE_SIZES } from '@/lib/pageQuery'
|
|
|
|
const FOCUS_RING =
|
|
'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary'
|
|
|
|
const props = defineProps<{
|
|
size: number
|
|
disabled: boolean
|
|
touch?: boolean
|
|
}>()
|
|
|
|
const emit = defineEmits<{ 'update:size': [size: number] }>()
|
|
|
|
const sizeItems = computed(() =>
|
|
PAGE_SIZES.map((value) => ({
|
|
label: t('{0} per page', [value]),
|
|
value,
|
|
})),
|
|
)
|
|
|
|
const height = computed(() => (props.touch ? 'h-11' : 'h-8'))
|
|
</script>
|
|
|
|
<template>
|
|
<USelectMenu
|
|
:model-value="size"
|
|
:items="sizeItems"
|
|
value-key="value"
|
|
:search-input="false"
|
|
:disabled="disabled"
|
|
:aria-label="t('Rows per page')"
|
|
:content="{ side: 'top', align: touch ? 'end' : 'start' }"
|
|
color="neutral"
|
|
variant="outline"
|
|
class="w-30"
|
|
:ui="{
|
|
base: `${height} rounded-none border border-accented bg-default pl-3 pr-2 text-sm ring-0 focus-visible:ring-0 disabled:opacity-40 ${FOCUS_RING}`,
|
|
trailingIcon: 'size-3.5 text-muted',
|
|
content: 'w-40 rounded-none',
|
|
itemTrailingIcon: 'hidden',
|
|
item: `${height} rounded-none data-[state=checked]:bg-(--rc-sand) data-[state=checked]:font-semibold data-[state=checked]:text-(--rc-on-sand)`,
|
|
}"
|
|
@update:model-value="emit('update:size', $event as number)"
|
|
/>
|
|
</template>
|