107 lines
3.1 KiB
Vue
107 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
const { isHelpSlideoverOpen } = useDashboard()
|
|
const { metaSymbol } = useShortcuts()
|
|
|
|
const shortcuts = ref(false)
|
|
const query = ref('')
|
|
|
|
const links = [{
|
|
label: 'Shortcuts',
|
|
icon: 'i-heroicons-key',
|
|
trailingIcon: 'i-heroicons-arrow-right-20-solid',
|
|
onClick: () => {
|
|
shortcuts.value = true
|
|
}
|
|
}, {
|
|
label: 'Documentation',
|
|
icon: 'i-heroicons-book-open',
|
|
to: 'https://fedeo.de',
|
|
target: '_blank'
|
|
}/*, {
|
|
label: 'GitHub repository',
|
|
icon: 'i-simple-icons-github',
|
|
to: 'https://github.com/nuxt/ui-pro',
|
|
target: '_blank'
|
|
}, {
|
|
label: 'Buy Nuxt UI Pro',
|
|
icon: 'i-heroicons-credit-card',
|
|
to: 'https://ui.nuxt.com/pro/purchase',
|
|
target: '_blank'
|
|
}*/]
|
|
|
|
const categories = computed(() => [{
|
|
title: 'General',
|
|
items: [
|
|
{ shortcuts: [metaSymbol.value, 'K'], name: 'Hauptmenü' },
|
|
{ shortcuts: ['N'], name: 'Benachrichtigungen' },
|
|
{ shortcuts: ['?'], name: 'Help & Support' },
|
|
{ shortcuts: ['/'], name: 'Suche' }
|
|
]
|
|
}, {
|
|
title: 'Navigation',
|
|
items: [
|
|
{ shortcuts: ['G', 'H'], name: 'Gehe zu Dashboard' },
|
|
{ shortcuts: ['G', 'A'], name: 'Gehe zu Aufgaben' },/*
|
|
{ shortcuts: ['G', 'I'], name: 'Go to Inbox' },
|
|
{ shortcuts: ['G', 'U'], name: 'Go to Users' },*/
|
|
{ shortcuts: ['G', 'S'], name: 'Gehe zu Einstellungen' }
|
|
]
|
|
}, /*{
|
|
title: 'Inbox',
|
|
items: [
|
|
{ shortcuts: ['↑'], name: 'Prev notification' },
|
|
{ shortcuts: ['↓'], name: 'Next notification' }
|
|
]
|
|
}*/])
|
|
|
|
const filteredCategories = computed(() => {
|
|
return categories.value.map(category => ({
|
|
title: category.title,
|
|
items: category.items.filter(item => {
|
|
return item.name.search(new RegExp(query.value, 'i')) !== -1
|
|
})
|
|
})).filter(category => !!category.items.length)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<UDashboardSlideover v-model="isHelpSlideoverOpen">
|
|
<template #title>
|
|
<UButton
|
|
v-if="shortcuts"
|
|
color="gray"
|
|
variant="ghost"
|
|
size="sm"
|
|
icon="i-heroicons-arrow-left-20-solid"
|
|
@click="shortcuts = false"
|
|
/>
|
|
|
|
{{ shortcuts ? 'Shortcuts' : 'Hilfe & Support' }}
|
|
</template>
|
|
|
|
<div v-if="shortcuts" class="space-y-6">
|
|
<UInput v-model="query" icon="i-heroicons-magnifying-glass" placeholder="Search..." autofocus color="gray" />
|
|
|
|
<div v-for="(category, index) in filteredCategories" :key="index">
|
|
<p class="mb-3 text-sm text-gray-900 dark:text-white font-semibold">
|
|
{{ category.title }}
|
|
</p>
|
|
|
|
<div class="space-y-2">
|
|
<div v-for="(item, i) in category.items" :key="i" class="flex items-center justify-between">
|
|
<span class="text-sm text-gray-500 dark:text-gray-400">{{ item.name }}</span>
|
|
|
|
<div class="flex items-center justify-end flex-shrink-0 gap-0.5">
|
|
<UKbd v-for="(shortcut, j) in item.shortcuts" :key="j">
|
|
{{ shortcut }}
|
|
</UKbd>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="flex flex-col gap-y-3">
|
|
<UButton v-for="(link, index) in links" :key="index" color="white" v-bind="link" />
|
|
</div>
|
|
</UDashboardSlideover>
|
|
</template> |