61 lines
1.7 KiB
Vue
61 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import { storeToRefs } from 'pinia'
|
|
import { useSettingsStore, PAGE_SIZE_OPTIONS } from '~/stores/settings'
|
|
|
|
const { $i18n } = useNuxtApp()
|
|
const t = $i18n.t
|
|
|
|
const settings = useSettingsStore()
|
|
const { pageSize, paginationType } = storeToRefs(settings)
|
|
|
|
const pageSizeItems = PAGE_SIZE_OPTIONS.map(n => ({
|
|
value: n,
|
|
label: `${n} ${t('settings.results')}`
|
|
}))
|
|
|
|
const paginationItems = [
|
|
{
|
|
value: 'infinite_scroll' as const,
|
|
label: t('settings.infinite_scroll'),
|
|
description: t('settings.infinite_scroll_desc')
|
|
},
|
|
{
|
|
value: 'numbered' as const,
|
|
label: t('settings.numbered'),
|
|
description: t('settings.numbered_desc')
|
|
}
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<UDashboardPanel id="settings-panel">
|
|
<UDashboardNavbar :title="t('nav.settings')">
|
|
<template #leading>
|
|
<UDashboardSidebarCollapse />
|
|
</template>
|
|
</UDashboardNavbar>
|
|
|
|
<div class="overflow-y-auto flex-1 p-6 space-y-8 max-w-lg">
|
|
<!-- Resultados por búsqueda -->
|
|
<div>
|
|
<p class="text-sm font-semibold text-highlighted mb-1">
|
|
{{ t('settings.page_size_title') }}
|
|
</p>
|
|
<p class="text-xs text-muted mb-4">{{ t('settings.page_size_desc') }}</p>
|
|
<URadioGroup v-model="pageSize" :items="pageSizeItems" />
|
|
</div>
|
|
|
|
<USeparator />
|
|
|
|
<!-- Tipo de paginación -->
|
|
<div>
|
|
<p class="text-sm font-semibold text-highlighted mb-1">
|
|
{{ t('settings.pagination_title') }}
|
|
</p>
|
|
<p class="text-xs text-muted mb-4">{{ t('settings.pagination_desc') }}</p>
|
|
<URadioGroup v-model="paginationType" :items="paginationItems" />
|
|
</div>
|
|
</div>
|
|
</UDashboardPanel>
|
|
</template>
|