120 lines
3.7 KiB
Vue
120 lines
3.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, showParagraphNumbers } = 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')
|
|
}
|
|
]
|
|
|
|
const { unlocked, unlock, lock } = useDevMode()
|
|
const devKeyInput = ref('')
|
|
const devKeyError = ref('')
|
|
|
|
function tryUnlock() {
|
|
devKeyError.value = ''
|
|
if (unlock(devKeyInput.value)) {
|
|
devKeyInput.value = ''
|
|
} else {
|
|
devKeyError.value = t('settings.dev_wrong_key')
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<UDashboardPanel id="settings-panel" grow>
|
|
<UDashboardNavbar :title="t('nav.settings')">
|
|
<template #leading>
|
|
<UDashboardSidebarCollapse />
|
|
</template>
|
|
</UDashboardNavbar>
|
|
|
|
<div class="overflow-y-auto flex-1">
|
|
<div class="p-6 space-y-8">
|
|
<!-- 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>
|
|
|
|
<USeparator />
|
|
|
|
<!-- Números de párrafo -->
|
|
<div class="flex items-center justify-between gap-4">
|
|
<div>
|
|
<p class="text-sm font-semibold text-highlighted mb-1">
|
|
{{ t('settings.paragraph_numbers_title') }}
|
|
</p>
|
|
<p class="text-xs text-muted">{{ t('settings.paragraph_numbers_desc') }}</p>
|
|
</div>
|
|
<USwitch v-model="showParagraphNumbers" />
|
|
</div>
|
|
|
|
<USeparator />
|
|
|
|
<!-- Acceso desarrollador -->
|
|
<div>
|
|
<p class="text-sm font-semibold text-highlighted mb-1">
|
|
{{ t('settings.dev_access_title') }}
|
|
</p>
|
|
<p class="text-xs text-muted mb-4">{{ t('settings.dev_access_desc') }}</p>
|
|
|
|
<div v-if="!unlocked" class="flex gap-2">
|
|
<UInput
|
|
v-model="devKeyInput"
|
|
type="password"
|
|
:placeholder="t('settings.dev_key_placeholder')"
|
|
class="flex-1"
|
|
@keyup.enter="tryUnlock"
|
|
/>
|
|
<UButton @click="tryUnlock">
|
|
{{ t('settings.dev_unlock') }}
|
|
</UButton>
|
|
</div>
|
|
<div v-else class="flex items-center gap-2">
|
|
<UIcon name="i-lucide-lock-open" class="size-5 text-green-500" />
|
|
<span class="text-sm text-green-600 font-medium">{{ t('settings.dev_unlocked') }}</span>
|
|
<UButton color="neutral" variant="outline" size="sm" @click="lock">
|
|
{{ t('settings.dev_lock') }}
|
|
</UButton>
|
|
</div>
|
|
<p v-if="devKeyError" class="text-xs text-red-500 mt-1">{{ devKeyError }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</UDashboardPanel>
|
|
</template>
|