74 lines
1.9 KiB
Vue
74 lines
1.9 KiB
Vue
<script lang="ts" setup>
|
|
import { computed, ref } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
import ProfileAccount from '@/components/ProfileAccount.vue'
|
|
import ProfileNotifications from '@/components/ProfileNotifications.vue'
|
|
import ProfilePreferences from '@/components/ProfilePreferences.vue'
|
|
import ProfileSecurity from '@/components/ProfileSecurity.vue'
|
|
import { useL10n } from '@KTXC'
|
|
|
|
const route = useRoute()
|
|
const { t } = useL10n('user_profile')
|
|
|
|
const activeTab = ref(route.params.tab || 'account')
|
|
|
|
// tabs
|
|
const tabs = computed(() => [
|
|
{ title: t('tabs.account', 'Account'), icon: 'mdi-account-outline', tab: 'account' },
|
|
{ title: t('tabs.security', 'Security'), icon: 'mdi-lock-outline', tab: 'security' },
|
|
{ title: t('tabs.preferences', 'Preferences'), icon: 'mdi-tune', tab: 'preferences' },
|
|
{ title: t('tabs.notifications', 'Notifications'), icon: 'mdi-bell-outline', tab: 'notifications' },
|
|
])
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="pa-4"
|
|
>
|
|
<VTabs
|
|
v-model="activeTab"
|
|
show-arrows
|
|
class="v-tabs-pill"
|
|
>
|
|
<VTab
|
|
v-for="item in tabs"
|
|
:key="item.icon"
|
|
:value="item.tab"
|
|
>
|
|
<VIcon
|
|
size="20"
|
|
start
|
|
:icon="item.icon"
|
|
/>
|
|
{{ item.title }}
|
|
</VTab>
|
|
</VTabs>
|
|
|
|
<VWindow
|
|
v-model="activeTab"
|
|
class="mt-5 disable-tab-transition"
|
|
:touch="false"
|
|
>
|
|
<!-- Account -->
|
|
<VWindowItem value="account">
|
|
<ProfileAccount />
|
|
</VWindowItem>
|
|
|
|
<!-- Security -->
|
|
<VWindowItem value="security">
|
|
<ProfileSecurity />
|
|
</VWindowItem>
|
|
|
|
<!-- Notification -->
|
|
<VWindowItem value="notifications">
|
|
<ProfileNotifications />
|
|
</VWindowItem>
|
|
|
|
<!-- Preferences -->
|
|
<VWindowItem value="preferences">
|
|
<ProfilePreferences />
|
|
</VWindowItem>
|
|
</VWindow>
|
|
</div>
|
|
</template>
|