koel/resources/assets/js/components/screens/ProfileScreen.vue

124 lines
3.6 KiB
Vue
Raw Normal View History

2022-04-15 14:24:30 +00:00
<template>
<section id="profileWrapper">
2022-04-15 17:00:08 +00:00
<ScreenHeader>Profile &amp; Preferences</ScreenHeader>
2022-04-15 14:24:30 +00:00
<div class="main-scroll-wrap">
2024-04-03 14:48:52 +00:00
<main class="tabs">
<div class="clear" role="tablist">
<button
role="tab"
:aria-selected="currentTab === 'profile'"
aria-controls="profilePaneProfile"
@click.prevent="currentTab = 'profile'"
>
Profile
</button>
<button
role="tab"
:aria-selected="currentTab === 'preferences'"
aria-controls="profilePanePreferences"
@click.prevent="currentTab = 'preferences'"
>
Preferences
</button>
<button
role="tab"
:aria-selected="currentTab === 'themes'"
aria-controls="profilePaneThemes"
@click.prevent="currentTab = 'themes'"
>
Themes
</button>
<button
role="tab"
:aria-selected="currentTab === 'integrations'"
aria-controls="profilePaneIntegrations"
@click.prevent="currentTab = 'integrations'"
>
Integrations
</button>
<button
role="tab"
:aria-selected="currentTab === 'qr'"
aria-controls="profilePaneQr"
@click.prevent="currentTab = 'qr'"
>
<QrCodeIcon :size="16" />
</button>
</div>
<div class="panes">
<div
v-show="currentTab === 'profile'"
id="profilePaneProfile"
role="tabpanel"
aria-labelledby="profilePaneProfile"
tabindex="0"
>
<ProfileForm />
</div>
<div
v-if="currentTab === 'preferences'"
id="profilePanePreferences"
role="tabpanel"
aria-labelledby="profilePanePreferences"
tabindex="0"
>
<PreferencesForm />
</div>
<div
v-if="currentTab === 'themes'"
id="profilePaneThemes"
role="tabpanel"
tabindex="0"
aria-labelledby="profilePaneThemes"
>
<ThemeList />
</div>
<div
v-if="currentTab === 'integrations'"
id="profilePaneIntegrations"
role="tabpanel"
tabindex="0"
aria-labelledby="profilePaneIntegrations"
>
<Integrations />
</div>
<div
v-if="currentTab === 'qr'"
id="profilePaneQr"
role="tabpanel"
aria-labelledby="profilePaneQr"
tabindex="0"
>
<QRLogin />
</div>
</div>
</main>
2022-04-15 14:24:30 +00:00
</div>
</section>
</template>
2022-04-15 17:00:08 +00:00
<script lang="ts" setup>
2024-04-03 14:48:52 +00:00
import { ref, watch } from 'vue'
import { QrCodeIcon } from 'lucide-vue-next'
import { useLocalStorage } from '@/composables'
import ScreenHeader from '@/components/ui/ScreenHeader.vue'
import ProfileForm from '@/components/profile-preferences/ProfileForm.vue'
import PreferencesForm from '@/components/profile-preferences/PreferencesForm.vue'
2022-12-02 16:17:37 +00:00
import ThemeList from '@/components/profile-preferences/ThemeList.vue'
2024-04-03 14:48:52 +00:00
import Integrations from '@/components/profile-preferences/Integrations.vue'
import QRLogin from '@/components/profile-preferences/QRLogin.vue'
const { get, set } = useLocalStorage()
2022-04-15 14:24:30 +00:00
2024-04-03 14:48:52 +00:00
const currentTab = ref(get<'profile' | 'preferences' | 'themes' | 'integrations' | 'qr'>('profileScreenTab', 'profile'))
watch(currentTab, tab => set('profileScreenTab', tab))
</script>