opnform/resources/js/components/App.vue

121 lines
3.4 KiB
Vue
Raw Normal View History

2022-09-20 19:59:52 +00:00
<template>
<div id="app" class="bg-white dark:bg-notion-dark">
2023-10-19 13:44:40 +00:00
<loading v-show="!isIframe" ref="loading" />
2022-09-20 19:59:52 +00:00
2023-10-14 15:31:30 +00:00
<!-- <hotjar />-->
2022-09-20 19:59:52 +00:00
<amplitude />
<crisp />
2023-10-14 15:31:30 +00:00
<!-- <llamafi />-->
2022-09-20 19:59:52 +00:00
<transition enter-active-class="linear duration-200 overflow-hidden"
2023-10-14 15:31:30 +00:00
enter-from-class="max-h-0"
2022-09-20 19:59:52 +00:00
enter-to-class="max-h-screen"
leave-active-class="linear duration-200 overflow-hidden"
2023-10-14 15:31:30 +00:00
leave-from-class="max-h-screen"
2022-09-20 19:59:52 +00:00
leave-to-class="max-h-0"
>
<div v-if="announcement && !isIframe" class="bg-nt-blue text-white text-center p-3 relative">
<a class="text-white font-semibold" href="" target="_blank">🚨
OpnForm beta is over 🚨</a>
<div role="button" class="text-white absolute right-0 top-0 p-3 cursor-pointer" @click="announcement=false">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
clip-rule="evenodd"
/>
</svg>
</div>
</div>
</transition>
<transition name="page" mode="out-in">
2023-10-14 15:31:30 +00:00
<component :is="layoutComponent" v-if="layout" />
2022-09-20 19:59:52 +00:00
</transition>
<stop-impersonation />
2023-10-14 15:31:30 +00:00
<!-- <notifications />-->
2022-09-20 19:59:52 +00:00
</div>
</template>
<script>
import { computed } from 'vue'
import { useAppStore } from '../stores/app'
import Loading from './Loading.vue'
import Hotjar from './service/Hotjar.vue'
import Amplitude from './service/Amplitude.vue'
import Crisp from './service/Crisp.vue'
import StopImpersonation from './pages/StopImpersonation.vue'
2023-10-14 15:31:30 +00:00
import Notifications from './common/Notifications.vue'
import SeoMeta from '../mixins/seo-meta.js'
2022-09-20 19:59:52 +00:00
// Load layout components dynamically.
2023-01-26 09:52:48 +00:00
const requireContext = import.meta.glob('../layouts/**.vue', { eager: true })
2022-09-20 19:59:52 +00:00
const layouts = {}
Object.keys(requireContext)
2022-09-20 19:59:52 +00:00
.map(file =>
[file.match(/[^/]*(?=\.[^.]*$)/)[0], requireContext[file]]
2022-09-20 19:59:52 +00:00
)
.forEach(([name, component]) => {
layouts[name] = component.default || component
})
2022-09-20 19:59:52 +00:00
export default {
el: '#app',
2023-10-14 15:31:30 +00:00
name: 'OpnForm',
2022-09-20 19:59:52 +00:00
components: {
Notifications,
2022-09-20 19:59:52 +00:00
StopImpersonation,
Crisp,
Amplitude,
Hotjar,
Loading
},
mixins: [SeoMeta],
setup () {
const appStore = useAppStore()
return {
layout : computed(() => appStore.layout)
}
},
2022-09-20 19:59:52 +00:00
data: () => ({
metaTitle: 'OpnForm',
metaDescription: 'Create beautiful forms for free. Unlimited fields, unlimited submissions. It\'s free and it takes less than 1 minute to create your first form.',
2022-09-20 19:59:52 +00:00
announcement: false,
alert: {
type: null,
autoClose: 0,
message: '',
confirmationProceed: null,
confirmationCancel: null
2023-09-05 14:25:33 +00:00
},
navbarHidden: false
2022-09-20 19:59:52 +00:00
}),
2023-01-26 09:52:48 +00:00
2022-09-20 19:59:52 +00:00
computed: {
isIframe () {
return window.location !== window.parent.location || window.frameElement
},
isOnboardingPage () {
return this.$route.name === 'onboarding'
2023-10-14 15:31:30 +00:00
},
layoutComponent () {
return layouts[this.layout]
2022-09-20 19:59:52 +00:00
}
},
2023-10-14 15:31:30 +00:00
methods: {
workspaceAdded () {
this.$router.push({ name: 'home' })
},
hideNavbar (hidden = true) {
this.navbarHidden = hidden
}
2022-09-20 19:59:52 +00:00
}
}
</script>