Managed to load a page
This commit is contained in:
Julien Nahum
parent
6adcc52072
commit
358bf0e4d0
File diff suppressed because it is too large
Load Diff
19
package.json
19
package.json
|
|
@ -5,10 +5,13 @@
|
|||
"build": "vite build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@hcaptcha/vue3-hcaptcha": "^0.3.2",
|
||||
"@hcaptcha/vue3-hcaptcha": "^1.3.0",
|
||||
"@sentry/integrations": "^7.53.1",
|
||||
"@sentry/tracing": "^6.11.0",
|
||||
"@sentry/vue": "^6.11.0",
|
||||
"@vue/compat": "^3.1.0",
|
||||
"@vueuse/components": "^10.5.0",
|
||||
"@vueuse/core": "^10.5.0",
|
||||
"axios": "^0.21.1",
|
||||
"chart.js": "^3.7.1",
|
||||
"clone-deep": "^4.0.1",
|
||||
|
|
@ -23,21 +26,18 @@
|
|||
"query-builder-vue": "^1.2.0",
|
||||
"tinymotion": "^0.2.0",
|
||||
"vform": "^2.1.1",
|
||||
"vue3-vt-notifications": "^1.0.0",
|
||||
"vue": "^3.1.0",
|
||||
"@vue/compat": "^3.1.0",
|
||||
"vue": "^3.2.13",
|
||||
"vue-chartjs": "^4.1.0",
|
||||
"vue3-click-away": "^1.2.4",
|
||||
"vue-codemirror": "^4.0.6",
|
||||
"vue-confetti": "^2.3.0",
|
||||
"vue-country-flag-next": "^2.3.2",
|
||||
"vue-i18n": "^8.25.0",
|
||||
"vue-meta": "^2.4.0",
|
||||
"vue-notion": "^3.0.0-beta.1",
|
||||
"vue-plugin-load-script": "^1.3.2",
|
||||
"vue-router": "^3.5.2",
|
||||
"vue-router": "^4.2.5",
|
||||
"vue-signature-pad": "^2.0.5",
|
||||
"vue2-editor": "^2.10.3",
|
||||
"vue3-vt-notifications": "^1.0.0",
|
||||
"vuedraggable": "^2.24.3",
|
||||
"vuex": "^4.1.0"
|
||||
},
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
"@babel/preset-env": "^7.15.0",
|
||||
"@sentry/vite-plugin": "^2.8.0",
|
||||
"@tailwindcss/aspect-ratio": "^0.4.2",
|
||||
"@vitejs/plugin-vue2": "^2.2.0",
|
||||
"@vitejs/plugin-vue": "^4.4.0",
|
||||
"autoprefixer": "^10.4.13",
|
||||
"cross-env": "^7.0.3",
|
||||
"eslint": "^7.32.0",
|
||||
|
|
@ -66,7 +66,6 @@
|
|||
"sass-loader": "^10.2.0",
|
||||
"tailwindcss": "^3.2.4",
|
||||
"vite": "^4.0.4",
|
||||
"vue-loader": "^15.9.8",
|
||||
"@vue/compiler-sfc": "^3.1.0"
|
||||
"vue-loader": "^15.9.8"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
import Vue from 'vue'
|
||||
import { createApp, configureCompat, ref } from 'vue'
|
||||
import store from '~/store'
|
||||
import router from '~/router'
|
||||
import i18n from '~/plugins/i18n.js'
|
||||
import App from '~/components/App.vue'
|
||||
import LoadScript from 'vue-plugin-load-script'
|
||||
import registerPlugin from './plugins/vue-plugins'
|
||||
import Base from './base.js'
|
||||
|
||||
import '~/plugins'
|
||||
|
|
@ -11,15 +10,19 @@ import '~/components'
|
|||
|
||||
import '../sass/app.scss'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
const app = createApp(App)
|
||||
.use(router)
|
||||
.use(store)
|
||||
.mixin(Base)
|
||||
|
||||
Vue.mixin(Base)
|
||||
Vue.use(LoadScript)
|
||||
registerPlugin(app)
|
||||
|
||||
/* eslint-disable no-new */
|
||||
new Vue({
|
||||
i18n,
|
||||
store,
|
||||
router,
|
||||
...App
|
||||
configureCompat({
|
||||
// default everything to Vue 2 behavior
|
||||
MODE: 2
|
||||
})
|
||||
|
||||
router.app = app
|
||||
app.mount('#app')
|
||||
|
||||
export default app
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div id="app" class="bg-white dark:bg-notion-dark">
|
||||
<loading v-show="!isIframe" ref="loading" />
|
||||
<!-- <loading v-show="!isIframe" ref="loading" />-->
|
||||
|
||||
<!-- <hotjar />-->
|
||||
<amplitude />
|
||||
|
|
@ -8,10 +8,10 @@
|
|||
<!-- <llamafi />-->
|
||||
|
||||
<transition enter-active-class="linear duration-200 overflow-hidden"
|
||||
enter-class="max-h-0"
|
||||
enter-from-class="max-h-0"
|
||||
enter-to-class="max-h-screen"
|
||||
leave-active-class="linear duration-200 overflow-hidden"
|
||||
leave-class="max-h-screen"
|
||||
leave-from-class="max-h-screen"
|
||||
leave-to-class="max-h-0"
|
||||
>
|
||||
<div v-if="announcement && !isIframe" class="bg-nt-blue text-white text-center p-3 relative">
|
||||
|
|
@ -29,11 +29,11 @@
|
|||
</transition>
|
||||
|
||||
<transition name="page" mode="out-in">
|
||||
<component :is="layout" v-if="layout" />
|
||||
<component :is="layoutComponent" v-if="layout" />
|
||||
</transition>
|
||||
<portal-target name="modals" multiple />
|
||||
<div id="modals" />
|
||||
<stop-impersonation />
|
||||
<notifications />
|
||||
<!-- <notifications />-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -43,8 +43,9 @@ import Hotjar from './service/Hotjar.vue'
|
|||
import Amplitude from './service/Amplitude.vue'
|
||||
import Crisp from './service/Crisp.vue'
|
||||
import StopImpersonation from './pages/StopImpersonation.vue'
|
||||
import Notifications from "./common/Notifications.vue"
|
||||
import Notifications from './common/Notifications.vue'
|
||||
import SeoMeta from '../mixins/seo-meta.js'
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
// Load layout components dynamically.
|
||||
const requireContext = import.meta.glob('../layouts/**.vue', { eager: true })
|
||||
|
|
@ -61,6 +62,8 @@ Object.keys(requireContext)
|
|||
export default {
|
||||
el: '#app',
|
||||
|
||||
name: 'OpnForm',
|
||||
|
||||
components: {
|
||||
Notifications,
|
||||
StopImpersonation,
|
||||
|
|
@ -75,8 +78,6 @@ export default {
|
|||
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.',
|
||||
layout: null,
|
||||
defaultLayout: 'default',
|
||||
announcement: false,
|
||||
alert: {
|
||||
type: null,
|
||||
|
|
@ -88,41 +89,38 @@ export default {
|
|||
navbarHidden: false
|
||||
}),
|
||||
|
||||
mounted () {
|
||||
this.$loading = this.$refs.loading
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* Set the application layout.
|
||||
*
|
||||
* @param {String} layout
|
||||
*/
|
||||
setLayout (layout) {
|
||||
if (!layout || !layouts[layout]) {
|
||||
layout = this.defaultLayout
|
||||
}
|
||||
|
||||
this.layout = layouts[layout]
|
||||
},
|
||||
workspaceAdded () {
|
||||
this.$router.push({ name: 'home' })
|
||||
},
|
||||
hideNavbar (hidden = true) {
|
||||
this.navbarHidden = hidden
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
isIframe () {
|
||||
return window.location !== window.parent.location || window.frameElement
|
||||
},
|
||||
isOnboardingPage () {
|
||||
return this.$route.name === 'onboarding'
|
||||
},
|
||||
...mapState({
|
||||
layout: state => state.app.layout
|
||||
}),
|
||||
layoutComponent () {
|
||||
return layouts[this.layout]
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
},
|
||||
|
||||
mounted () {
|
||||
// // Make it globally accessible
|
||||
// const app = getCurrentInstance().appContext
|
||||
// app.config.globalProperties.$loading = this.$refs.loading
|
||||
// console.log(app.config.globalProperties.$loading)
|
||||
},
|
||||
|
||||
methods: {
|
||||
workspaceAdded () {
|
||||
this.$router.push({ name: 'home' })
|
||||
},
|
||||
hideNavbar (hidden = true) {
|
||||
this.navbarHidden = hidden
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<router-view v-slot="{ Component }">
|
||||
<transition name="page" mode="out-in">
|
||||
<slot>
|
||||
<router-view />
|
||||
</slot>
|
||||
<component :is="Component" />
|
||||
</transition>
|
||||
</router-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<portal to="modals" :order="portalOrder">
|
||||
<teleport to="#modals">
|
||||
<transition leave-active-class="duration-200" name="fade" appear>
|
||||
<div v-if="show" class="fixed z-30 top-0 inset-x-0 px-4 pt-6 sm:px-0 sm:flex sm:items-top sm:justify-center">
|
||||
<transition enter-active-class="transition-all delay-75 linear duration-300"
|
||||
enter-class="opacity-0"
|
||||
enter-from-class="opacity-0"
|
||||
enter-to-class="opacity-100"
|
||||
leave-active-class="transition-all linear duration-100"
|
||||
leave-class="opacity-100"
|
||||
leave-from-class="opacity-100"
|
||||
leave-to-class="opacity-0"
|
||||
appear @after-leave="leaveCallback"
|
||||
>
|
||||
|
|
@ -16,10 +16,10 @@
|
|||
</transition>
|
||||
|
||||
<transition enter-active-class="delay-75 linear duration-300"
|
||||
enter-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
enter-from-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
enter-to-class="opacity-100 translate-y-0 sm:scale-100"
|
||||
leave-active-class="linear duration-200" appear
|
||||
leave-class="opacity-100 translate-y-0 sm:scale-100"
|
||||
leave-from-class="opacity-100 translate-y-0 sm:scale-100"
|
||||
leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<div v-if="show"
|
||||
|
|
@ -27,23 +27,27 @@
|
|||
:class="maxWidthClass"
|
||||
>
|
||||
<div class="bg-white relative dark:bg-notion-dark p-4 md:p-6">
|
||||
<div class="absolute top-4 right-4" v-if="closeable">
|
||||
<div v-if="closeable" class="absolute top-4 right-4">
|
||||
<button class="text-gray-500 hover:text-gray-900 cursor-pointer" @click.prevent="close">
|
||||
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round"/>
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="sm:flex sm:flex-col sm:items-start">
|
||||
<div v-if="$scopedSlots.hasOwnProperty('icon')" class="flex w-full justify-center mb-4">
|
||||
<div class="w-14 h-14 rounded-full flex justify-center items-center"
|
||||
:class="'bg-'+iconColor+'-100 text-'+iconColor+'-600'">
|
||||
:class="'bg-'+iconColor+'-100 text-'+iconColor+'-600'"
|
||||
>
|
||||
<slot name="icon" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 text-center sm:mt-0 w-full">
|
||||
<h2 v-if="$scopedSlots.hasOwnProperty('title')" class="text-2xl font-semibold text-center text-gray-900">
|
||||
<h2 v-if="$scopedSlots.hasOwnProperty('title')"
|
||||
class="text-2xl font-semibold text-center text-gray-900"
|
||||
>
|
||||
<slot name="title" />
|
||||
</h2>
|
||||
</div>
|
||||
|
|
@ -61,7 +65,7 @@
|
|||
</transition>
|
||||
</div>
|
||||
</transition>
|
||||
</portal>
|
||||
</teleport>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -20,8 +20,8 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<template v-for="worksp in workspaces">
|
||||
<a :key="worksp.id" href="#"
|
||||
<template v-for="worksp in workspaces" :key="worksp.id">
|
||||
<a href="#"
|
||||
class="px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
|
||||
:class="{'bg-blue-100 dark:bg-blue-900':workspace.id === worksp.id}" @click.prevent="switchWorkspace(worksp)"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<transition enter-active-class="linear duration-500 overflow-hidden"
|
||||
enter-class="max-h-0 opacity-0"
|
||||
enter-from-class="max-h-0 opacity-0"
|
||||
enter-to-class="max-h-screen opacity-100"
|
||||
leave-active-class="linear duration-500 overflow-hidden"
|
||||
leave-class="max-h-screen opacity-100"
|
||||
leave-from-class="max-h-screen opacity-100"
|
||||
leave-to-class="max-h-0 opacity-0"
|
||||
>
|
||||
<div :class="alertClasses" class="border shadow-sm p-2 flex items-center rounded-md">
|
||||
|
|
|
|||
|
|
@ -6,11 +6,7 @@
|
|||
:close="close"
|
||||
/>
|
||||
<transition name="fade">
|
||||
<div
|
||||
v-if="isOpen"
|
||||
v-on-clickaway="close"
|
||||
:class="dropdownClass"
|
||||
>
|
||||
<div v-if="isOpen" v-on-click-outside="close" :class="dropdownClass">
|
||||
<div class="py-1 " role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
|
||||
<slot />
|
||||
</div>
|
||||
|
|
@ -20,34 +16,40 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import {directive as onClickaway} from 'vue-clickaway'
|
||||
import { ref } from 'vue'
|
||||
import { vOnClickOutside } from '@vueuse/components'
|
||||
|
||||
export default {
|
||||
name: 'Dropdown',
|
||||
directives: {
|
||||
onClickaway: onClickaway
|
||||
},
|
||||
|
||||
props: {
|
||||
dropdownClass: {
|
||||
type: String,
|
||||
default: 'origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 z-20'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isOpen: false
|
||||
setup () {
|
||||
const isOpen = ref(false)
|
||||
|
||||
const open = () => {
|
||||
isOpen.value = true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
open() {
|
||||
this.isOpen = true
|
||||
},
|
||||
close() {
|
||||
this.isOpen = false
|
||||
},
|
||||
toggle() {
|
||||
this.isOpen = !this.isOpen
|
||||
|
||||
const close = () => {
|
||||
isOpen.value = false
|
||||
}
|
||||
|
||||
const toggle = () => {
|
||||
isOpen.value = !isOpen.value
|
||||
}
|
||||
|
||||
const dropdownRef = ref(null)
|
||||
|
||||
return {
|
||||
isOpen,
|
||||
open,
|
||||
close,
|
||||
toggle,
|
||||
dropdownRef
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<transition v-if="name=='slideInUp'"
|
||||
enter-active-class="linear duration-300 overflow-hidden"
|
||||
enter-class="max-h-0"
|
||||
enter-from-class="max-h-0"
|
||||
enter-to-class="max-h-screen"
|
||||
leave-active-class="linear duration-300 overflow-hidden"
|
||||
leave-class="max-h-screen"
|
||||
leave-from-class="max-h-screen"
|
||||
leave-to-class="max-h-0"
|
||||
>
|
||||
<slot />
|
||||
|
|
|
|||
|
|
@ -49,22 +49,18 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { directive as onClickaway } from 'vue-clickaway'
|
||||
import inputMixin from '~/mixins/forms/input.js'
|
||||
import countryCodes from '../../../data/country_codes.json'
|
||||
import CountryFlag from 'vue-country-flag'
|
||||
import CountryFlag from 'vue-country-flag-next'
|
||||
import parsePhoneNumber from 'libphonenumber-js'
|
||||
|
||||
export default {
|
||||
phone: 'PhoneInput',
|
||||
components: { CountryFlag },
|
||||
directives: {
|
||||
onClickaway: onClickaway
|
||||
},
|
||||
mixins: [inputMixin],
|
||||
props: {
|
||||
canOnlyCountry: { type: Boolean, default: false },
|
||||
unavailableCountries: { type: Array, default: () => [] },
|
||||
unavailableCountries: { type: Array, default: () => [] }
|
||||
},
|
||||
|
||||
data () {
|
||||
|
|
@ -74,6 +70,14 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
countries () {
|
||||
return countryCodes.filter((item) => {
|
||||
return !this.unavailableCountries.includes(item.code)
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
inputVal: {
|
||||
handler (val) {
|
||||
|
|
@ -94,14 +98,6 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
countries () {
|
||||
return countryCodes.filter((item) => {
|
||||
return !this.unavailableCountries.includes(item.code)
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
if (this.compVal) {
|
||||
if (!this.compVal.startsWith('+')) {
|
||||
|
|
|
|||
|
|
@ -10,9 +10,7 @@
|
|||
<slot name="help"><span class="field-help" v-html="help" /></slot>
|
||||
</small>
|
||||
|
||||
<div v-on-clickaway="closeDropdown"
|
||||
class="relative"
|
||||
>
|
||||
<div class="relative">
|
||||
<span class="inline-block w-full rounded-md">
|
||||
<button type="button" :dusk="dusk" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label"
|
||||
class="cursor-pointer"
|
||||
|
|
@ -39,8 +37,8 @@
|
|||
<path d="M7 7l3-3 3 3m0 6l-3 3-3-3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
</span>
|
||||
</button></span>
|
||||
<!-- Select popover, show/hide based on select state. -->
|
||||
</button>
|
||||
</span>
|
||||
<div v-show="isOpen" :dusk="dusk+'_dropdown' "
|
||||
class="absolute mt-1 rounded-md bg-white dark:bg-notion-dark-light shadow-lg z-10"
|
||||
:class="dropdownClass"
|
||||
|
|
@ -49,8 +47,8 @@
|
|||
class="rounded-md text-base leading-6 shadow-xs overflow-auto focus:outline-none sm:text-sm sm:leading-5 relative"
|
||||
:class="{'max-h-42 py-1': !isSearchable,'max-h-48 pb-1': isSearchable}"
|
||||
>
|
||||
<div v-if="isSearchable" class="px-2 pt-2 sticky top-0 bg-white dark:bg-notion-dark-light z-10">
|
||||
<text-input name="search" :color="color" v-model="searchTerm" :theme="theme"
|
||||
<div v-if="isSearchable" class="px-2 pt-2 sticky top-0 bg-white dark-bg-notion-dark-light z-10">
|
||||
<text-input v-model="searchTerm" name="search" :color="color" :theme="theme"
|
||||
placeholder="Search..."
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -60,7 +58,7 @@
|
|||
<template v-if="filteredOptions.length > 0">
|
||||
<li v-for="item in filteredOptions" :key="item[optionKey]" role="option" :style="optionStyle"
|
||||
:class="{'px-3 pr-9': multiple, 'px-3': !multiple}"
|
||||
class="text-gray-900 cursor-default select-none relative py-2 cursor-pointer group hover:text-white hover:bg-form-color focus:outline-none focus:text-white focus:bg-nt-blue"
|
||||
class="text-gray-900 cursor-default select-none relative py-2 cursor-pointer group hover:text-white hover-bg-form-color focus:outline-none focus-text-white focus-nt-blue"
|
||||
:dusk="dusk+'_option'" @click="select(item)"
|
||||
>
|
||||
<slot name="option" :option="item" :selected="isSelected(item)" />
|
||||
|
|
@ -71,10 +69,10 @@
|
|||
</p>
|
||||
<li v-if="allowCreation && searchTerm" role="option" :style="optionStyle"
|
||||
:class="{'px-3 pr-9': multiple, 'px-3': !multiple}"
|
||||
class="text-gray-900 cursor-default select-none relative py-2 cursor-pointer group hover:text-white hover:bg-form-color focus:outline-none focus:text-white focus:bg-nt-blue"
|
||||
class="text-gray-900 cursor-default select-none relative py-2 cursor-pointer group hover:text-white hover-bg-form-color focus:outline-none focus-text-white focus-nt-blue"
|
||||
@click="createOption(searchTerm)"
|
||||
>
|
||||
Create <b class="px-1 bg-gray-300 rounded group-hover:text-black">{{ searchTerm }}</b>
|
||||
Create <b class="px-1 bg-gray-300 rounded group-hover-text-black">{{ searchTerm }}</b>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -87,7 +85,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { directive as onClickaway } from 'vue-clickaway'
|
||||
import { vOnClickOutside } from '@vueuse/components'
|
||||
import TextInput from '../TextInput.vue'
|
||||
import Fuse from 'fuse.js'
|
||||
import { themes } from '~/config/form-themes.js'
|
||||
|
|
@ -97,7 +95,7 @@ export default {
|
|||
name: 'VSelect',
|
||||
components: { TextInput },
|
||||
directives: {
|
||||
onClickaway: onClickaway
|
||||
onClickaway: vOnClickOutside
|
||||
},
|
||||
props: {
|
||||
data: Array,
|
||||
|
|
@ -114,7 +112,7 @@ export default {
|
|||
remote: { type: Function, default: null },
|
||||
searchKeys: { type: Array, default: () => ['name'] },
|
||||
optionKey: { type: String, default: 'id' },
|
||||
emitKey: { type: String, default: null }, // Key used for emitted value, emit object if null,
|
||||
emitKey: { type: String, default: null },
|
||||
color: { type: String, default: '#3B82F6' },
|
||||
placeholder: { type: String, default: null },
|
||||
uppercaseLabels: { type: Boolean, default: true },
|
||||
|
|
@ -122,7 +120,7 @@ export default {
|
|||
allowCreation: { type: Boolean, default: false },
|
||||
disabled: { type: Boolean, default: false },
|
||||
help: { type: String, default: null },
|
||||
helpPosition: { type: String, default: 'below_input' },
|
||||
helpPosition: { type: String, default: 'below_input' }
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
|
@ -154,7 +152,7 @@ export default {
|
|||
return this.data
|
||||
}
|
||||
|
||||
// Fuze search
|
||||
// Fuse search
|
||||
const fuzeOptions = {
|
||||
keys: this.searchKeys
|
||||
}
|
||||
|
|
@ -168,7 +166,7 @@ export default {
|
|||
}
|
||||
},
|
||||
watch: {
|
||||
'searchTerm': function (val) {
|
||||
searchTerm (val) {
|
||||
if (!this.debouncedRemote) return
|
||||
if ((this.remote && val) || (val === '' && !this.value) || (val === '' && this.isOpen)) {
|
||||
return this.debouncedRemote(val)
|
||||
|
|
@ -207,7 +205,6 @@ export default {
|
|||
if (this.multiple) {
|
||||
const emitValue = Array.isArray(this.value) ? [...this.value] : []
|
||||
|
||||
// Already in value, remove it
|
||||
if (this.isSelected(value)) {
|
||||
this.$emit('input', emitValue.filter((item) => {
|
||||
if (this.emitKey) {
|
||||
|
|
@ -218,7 +215,6 @@ export default {
|
|||
return
|
||||
}
|
||||
|
||||
// Otherwise add value
|
||||
emitValue.push(value)
|
||||
this.$emit('input', emitValue)
|
||||
} else {
|
||||
|
|
@ -231,11 +227,11 @@ export default {
|
|||
},
|
||||
createOption (newOption) {
|
||||
if (newOption) {
|
||||
let newItem = {
|
||||
'name': newOption,
|
||||
'value': newOption,
|
||||
const newItem = {
|
||||
name: newOption,
|
||||
value: newOption
|
||||
}
|
||||
this.$emit("update-options", newItem)
|
||||
this.$emit('update-options', newItem)
|
||||
this.select(newItem)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -54,10 +54,10 @@
|
|||
<transition
|
||||
v-if="!form.is_password_protected && (!isPublicFormPage || (!form.is_closed && !form.max_number_of_submissions_reached && form.visibility!='closed'))"
|
||||
enter-active-class="duration-500 ease-out"
|
||||
enter-class="translate-x-full opacity-0"
|
||||
enter-from-class="translate-x-full opacity-0"
|
||||
enter-to-class="translate-x-0 opacity-100"
|
||||
leave-active-class="duration-500 ease-in"
|
||||
leave-class="translate-x-0 opacity-100"
|
||||
leave-from-class="translate-x-0 opacity-100"
|
||||
leave-to-class="translate-x-full opacity-0"
|
||||
mode="out-in"
|
||||
>
|
||||
|
|
@ -120,6 +120,8 @@ import FormCleanings from '../../pages/forms/show/FormCleanings.vue'
|
|||
export default {
|
||||
components: { VTransition, VButton, OpenFormButton, OpenForm, FormCleanings },
|
||||
|
||||
mixins: [FormPendingSubmissionKey],
|
||||
|
||||
props: {
|
||||
form: { type: Object, required: true },
|
||||
creating: { type: Boolean, default: false }, // If true, fake form submit
|
||||
|
|
@ -127,8 +129,6 @@ export default {
|
|||
submitButtonClass: { type: String, default: '' }
|
||||
},
|
||||
|
||||
mixins: [FormPendingSubmissionKey],
|
||||
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
|
|
@ -198,7 +198,6 @@ export default {
|
|||
submission_data: form.data()
|
||||
}, '*')
|
||||
|
||||
|
||||
try {
|
||||
window.localStorage.removeItem(this.formPendingSubmissionKey)
|
||||
} catch (e) {}
|
||||
|
|
@ -219,7 +218,6 @@ export default {
|
|||
if (this.form.confetti_on_submission) {
|
||||
this.playConfetti()
|
||||
}
|
||||
|
||||
}).catch((error) => {
|
||||
if (error.response.data && error.response.data.message) {
|
||||
this.alertError(error.response.data.message)
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@
|
|||
<template v-for="group, groupIndex in fieldGroups">
|
||||
<div v-if="currentFieldGroupIndex===groupIndex"
|
||||
:key="groupIndex"
|
||||
class="form-group flex flex-wrap w-full">
|
||||
|
||||
class="form-group flex flex-wrap w-full"
|
||||
>
|
||||
<draggable v-model="currentFields"
|
||||
class="flex flex-wrap transition-all"
|
||||
:class="{'-m-6 p-2 bg-gray-50 rounded-md':dragging}"
|
||||
|
|
@ -70,8 +70,8 @@ import clonedeep from 'clone-deep'
|
|||
import FormLogicPropertyResolver from '../../../forms/FormLogicPropertyResolver.js'
|
||||
import OpenFormField from './OpenFormField.vue'
|
||||
import draggable from 'vuedraggable'
|
||||
const VueHcaptcha = () => import('@hcaptcha/vue-hcaptcha')
|
||||
import FormPendingSubmissionKey from '../../../mixins/forms/form-pending-submission-key.js'
|
||||
const VueHcaptcha = () => import('@hcaptcha/vue3-hcaptcha')
|
||||
|
||||
export default {
|
||||
name: 'OpenForm',
|
||||
|
|
@ -98,7 +98,7 @@ export default {
|
|||
type: Array,
|
||||
required: true
|
||||
},
|
||||
adminPreview: { type: Boolean, default: false }, // If used in FormEditorPreview
|
||||
adminPreview: { type: Boolean, default: false } // If used in FormEditorPreview
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
|
@ -231,7 +231,7 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
|
|
@ -327,7 +327,7 @@ export default {
|
|||
String(dateObj.getDate()).padStart(2, '0')
|
||||
if (field.with_time === true) {
|
||||
currentDate += 'T' + String(dateObj.getHours()).padStart(2, '0') + ':' +
|
||||
String(dateObj.getMinutes()).padStart(2, '0');
|
||||
String(dateObj.getMinutes()).padStart(2, '0')
|
||||
}
|
||||
pendingData[field.id] = currentDate
|
||||
}
|
||||
|
|
@ -375,7 +375,6 @@ export default {
|
|||
} else { // Default prefill if any
|
||||
formData[field.id] = field.prefill
|
||||
}
|
||||
|
||||
})
|
||||
this.dataForm = new Form(formData)
|
||||
},
|
||||
|
|
|
|||
|
|
@ -5,10 +5,10 @@
|
|||
>
|
||||
<div class="border rounded-lg bg-white dark:bg-notion-dark w-full block transition-all max-w-5xl">
|
||||
<transition enter-active-class="linear duration-100 overflow-hidden"
|
||||
enter-class="max-h-0"
|
||||
enter-from-class="max-h-0"
|
||||
enter-to-class="max-h-56"
|
||||
leave-active-class="linear duration-100 overflow-hidden"
|
||||
leave-class="max-h-56"
|
||||
leave-from-class="max-h-56"
|
||||
leave-to-class="max-h-0"
|
||||
>
|
||||
<div v-if="(form.logo_picture || form.cover_picture)">
|
||||
|
|
@ -68,7 +68,7 @@ export default {
|
|||
},
|
||||
data () {
|
||||
return {
|
||||
previewFormSubmitted: false,
|
||||
previewFormSubmitted: false
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -161,21 +161,23 @@
|
|||
Advanced options for your select/multiselect fields.
|
||||
</p>
|
||||
<text-area-input v-model="optionsText" :name="field.id+'_options_text'" class="mt-3"
|
||||
@input="onFieldOptionsChange"
|
||||
label="Set selection options"
|
||||
help="Add one option per line"
|
||||
@input="onFieldOptionsChange"
|
||||
/>
|
||||
<v-checkbox v-model="field.allow_creation"
|
||||
name="allow_creation" @input="onFieldAllowCreationChange" help=""
|
||||
name="allow_creation" help="" @input="onFieldAllowCreationChange"
|
||||
>
|
||||
Allow respondent to create new options
|
||||
</v-checkbox>
|
||||
<v-checkbox v-model="field.without_dropdown" class="mt-3"
|
||||
name="without_dropdown" @input="onFieldWithoutDropdownChange" help=""
|
||||
name="without_dropdown" help="" @input="onFieldWithoutDropdownChange"
|
||||
>
|
||||
Always show all select options
|
||||
</v-checkbox>
|
||||
<p class="text-gray-400 mb-3 text-xs">Options won't be in a dropdown anymore, but will all be visible</p>
|
||||
<p class="text-gray-400 mb-3 text-xs">
|
||||
Options won't be in a dropdown anymore, but will all be visible
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Customization - Placeholder, Prefill, Relabel, Field Help -->
|
||||
|
|
@ -297,7 +299,7 @@
|
|||
<!-- Help -->
|
||||
<rich-text-area-input name="help" class="mt-3"
|
||||
:form="field"
|
||||
:editorToolbar="editorToolbarCustom"
|
||||
:editor-toolbar="editorToolbarCustom"
|
||||
label="Field Help"
|
||||
help="Your field help will be shown below/above the field, just like this message."
|
||||
:help-position="field.help_position"
|
||||
|
|
@ -322,7 +324,6 @@
|
|||
label="Always show character limit"
|
||||
/>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Advanced Options -->
|
||||
|
|
@ -354,15 +355,15 @@
|
|||
</div>
|
||||
|
||||
<!-- Logic Block -->
|
||||
<form-block-logic-editor class="py-2 px-4 border-b" v-model="form" :form="form" :field="field"/>
|
||||
<form-block-logic-editor v-model="form" class="py-2 px-4 border-b" :form="form" :field="field" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const FormBlockLogicEditor = () => import('../../components/form-logic-components/FormBlockLogicEditor.vue')
|
||||
import timezones from '../../../../../../data/timezones.json'
|
||||
import countryCodes from '../../../../../../data/country_codes.json'
|
||||
import CountryFlag from 'vue-country-flag'
|
||||
import CountryFlag from 'vue-country-flag-next'
|
||||
const FormBlockLogicEditor = () => import('../../components/form-logic-components/FormBlockLogicEditor.vue')
|
||||
|
||||
export default {
|
||||
name: 'FieldOptions',
|
||||
|
|
@ -381,9 +382,9 @@ export default {
|
|||
return {
|
||||
typesWithoutPlaceholder: ['date', 'checkbox', 'files'],
|
||||
editorToolbarCustom: [
|
||||
['bold', 'italic', 'underline', 'link'],
|
||||
['bold', 'italic', 'underline', 'link']
|
||||
],
|
||||
allCountries: countryCodes,
|
||||
allCountries: countryCodes
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -419,8 +420,8 @@ export default {
|
|||
optionsText () {
|
||||
return this.field[this.field.type].options.map(option => {
|
||||
return option.name
|
||||
}).join("\n")
|
||||
},
|
||||
}).join('\n')
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
|
|
@ -510,14 +511,14 @@ export default {
|
|||
}
|
||||
},
|
||||
onFieldOptionsChange (val) {
|
||||
const vals = (val) ? val.trim().split("\n") : []
|
||||
const vals = (val) ? val.trim().split('\n') : []
|
||||
const tmpOpts = vals.map(name => {
|
||||
return {
|
||||
name: name,
|
||||
id: name
|
||||
}
|
||||
})
|
||||
this.$set(this.field, this.field.type, {'options': tmpOpts})
|
||||
this.$set(this.field, this.field.type, { options: tmpOpts })
|
||||
},
|
||||
onFieldPrefillTodayChange (val) {
|
||||
this.$set(this.field, 'prefill_today', val)
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
import Vue from 'vue'
|
||||
import Notifications from 'vue3-vt-notifications'
|
||||
import Meta from 'vue-meta'
|
||||
|
||||
import PortalVue from 'portal-vue'
|
||||
import Notifications from 'vt-notifications'
|
||||
|
||||
Vue.use(PortalVue)
|
||||
Vue.use(Notifications)
|
||||
function registerPlugin (app) {
|
||||
app.use(Notifications)
|
||||
app.use(Meta)
|
||||
return app
|
||||
}
|
||||
export default registerPlugin
|
||||
|
|
|
|||
|
|
@ -1,13 +1,8 @@
|
|||
import Vue from 'vue'
|
||||
import store from '~/store'
|
||||
import Meta from 'vue-meta'
|
||||
import routes from './routes'
|
||||
import Router from 'vue-router'
|
||||
import {sync} from 'vuex-router-sync'
|
||||
import { createWebHistory, createRouter } from 'vue-router'
|
||||
import * as Sentry from '@sentry/vue'
|
||||
|
||||
Vue.use(Meta)
|
||||
Vue.use(Router)
|
||||
import store from '../store'
|
||||
// import { nextTick } from '@vue/compat'
|
||||
|
||||
// The middleware for every page of the application.
|
||||
const globalMiddleware = ['locale', 'check-auth', 'notion-connection']
|
||||
|
|
@ -18,21 +13,14 @@ const routeMiddleware = resolveMiddleware(
|
|||
requireContext
|
||||
)
|
||||
|
||||
const router = createRouter()
|
||||
|
||||
sync(store, router)
|
||||
const router = createCustomRouter()
|
||||
|
||||
export default router
|
||||
|
||||
/**
|
||||
* Create a new router instance.
|
||||
*
|
||||
* @return {Router}
|
||||
*/
|
||||
function createRouter () {
|
||||
const router = new Router({
|
||||
function createCustomRouter () {
|
||||
const router = createRouter({
|
||||
scrollBehavior,
|
||||
mode: 'history',
|
||||
history: createWebHistory(),
|
||||
routes
|
||||
})
|
||||
|
||||
|
|
@ -82,7 +70,7 @@ async function beforeEach (to, from, next) {
|
|||
|
||||
// Start the loading bar.
|
||||
if (components[components.length - 1].loading !== false) {
|
||||
router.app.$nextTick(() => router.app.$loading.start())
|
||||
// nextTick(() => router.app.$loading.start())
|
||||
}
|
||||
|
||||
// Get the middleware for all the matched components.
|
||||
|
|
@ -90,6 +78,7 @@ async function beforeEach (to, from, next) {
|
|||
|
||||
// Call each middleware.
|
||||
callMiddleware(middleware, to, from, (...args) => {
|
||||
console.log('in', store)
|
||||
// Set the application layout only if "next()" was called with no args.
|
||||
if (args.length === 0) {
|
||||
if (components[0].layout) {
|
||||
|
|
@ -113,9 +102,8 @@ async function beforeEach (to, from, next) {
|
|||
* @param {Function} next
|
||||
*/
|
||||
async function afterEach (to, from, next) {
|
||||
await router.app.$nextTick()
|
||||
|
||||
router.app.$loading.finish()
|
||||
// await nextTick()
|
||||
// router.app.$loading.finish()
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -132,9 +120,9 @@ function callMiddleware (middleware, to, from, next) {
|
|||
const _next = (...args) => {
|
||||
// Stop if "_next" was called with an argument or the stack is empty.
|
||||
if (args.length > 0 || stack.length === 0) {
|
||||
if (args.length > 0) {
|
||||
router.app.$loading.finish()
|
||||
}
|
||||
// if (args.length > 0) {
|
||||
// router.app.$loading.finish()
|
||||
// }
|
||||
|
||||
return next(...args)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -71,5 +71,5 @@ export default [
|
|||
{ path: '/form-templates', name: 'templates', component: page('templates/templates.vue') },
|
||||
{ path: '/form-templates/:slug', name: 'templates.show', component: page('templates/show.vue') },
|
||||
|
||||
{ path: '*', component: page('errors/404.vue') }
|
||||
{ path: '/:pathMatch(.*)*', component: page('errors/404.vue') }
|
||||
]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
export const state = {
|
||||
layout: 'default'
|
||||
}
|
||||
|
||||
export const mutations = {
|
||||
setLayout (state, layout) {
|
||||
state.layout = layout ?? 'default'
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import laravel from 'laravel-vite-plugin'
|
||||
import vue from '@vitejs/plugin-vue2'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import { sentryVitePlugin } from '@sentry/vite-plugin'
|
||||
|
||||
const plugins = [
|
||||
|
|
@ -25,7 +25,7 @@ const plugins = [
|
|||
})
|
||||
]
|
||||
|
||||
if (process.env.SENTRY_AUTH_TOKEN) {
|
||||
if (false && process.env.SENTRY_AUTH_TOKEN) {
|
||||
plugins.push(sentryVitePlugin({
|
||||
org: 'opnform',
|
||||
project: 'opnform',
|
||||
|
|
|
|||
Loading…
Reference in New Issue