-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.vue
70 lines (64 loc) · 1.68 KB
/
app.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<script lang="ts" setup>
import { AppSetup } from './utils/app'
import { ITheme } from './utils/theme'
AppSetup()
const theme = useState<ITheme>('theme.current')
const locale = useState<string>('locale.setting')
const authModalState = useState<boolean>('auth.modal.state', () => false)
const authModalScreen = useState<'login' | 'register' | 'forgotPassword'>(
'auth.modal.screen',
() => 'register'
)
const appModal = useAppModal()
</script>
<template>
<el-config-provider size="large" :z-index="300">
<Html :class="`${theme === 'dark' ? 'dark' : ''}`" :lang="locale">
<Body class="app">
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</Body>
<Teleport to="body">
<ClientOnly>
<PopStack
id="auth.modal.component"
v-model="authModalState"
:animation="'zoom'"
:custom-body-class="'auth-modal'"
@close="authModalState = false"
>
<AuthFeature :screen="authModalScreen" />
</PopStack>
<PopStack
id="app.modal.component"
:model-value="appModal.state"
:animation="appModal.animation"
:close-button="false"
@close="appModal.close()"
>
<AppModal :screen="appModal.name" />
</PopStack>
</ClientOnly>
</Teleport>
</Html>
</el-config-provider>
</template>
<style lang="scss">
.auth-modal {
@apply bg-white dark:bg-gray-900 relative;
width: 100%;
height: 100%;
@screen md {
// max-width: 680px;
}
@screen lg {
height: auto;
border-radius: 30px;
max-width: 720px;
}
@screen xl {
max-width: 960px;
}
}
</style>