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,17 +1,17 @@
|
|||
<template>
|
||||
<div id="app" class="bg-white dark:bg-notion-dark">
|
||||
<loading v-show="!isIframe" ref="loading" />
|
||||
<!-- <loading v-show="!isIframe" ref="loading" />-->
|
||||
|
||||
<!-- <hotjar />-->
|
||||
<!-- <hotjar />-->
|
||||
<amplitude />
|
||||
<crisp />
|
||||
<!-- <llamafi />-->
|
||||
<!-- <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>
|
||||
<transition name="page" mode="out-in">
|
||||
<slot>
|
||||
<router-view />
|
||||
</slot>
|
||||
</transition>
|
||||
<router-view v-slot="{ Component }">
|
||||
<transition name="page" mode="out-in">
|
||||
<component :is="Component" />
|
||||
</transition>
|
||||
</router-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,25 +1,25 @@
|
|||
<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"
|
||||
>
|
||||
<div v-if="show" class="fixed inset-0 transform" @click="close">
|
||||
<div class="absolute inset-0 bg-gray-500 opacity-75"/>
|
||||
<div class="absolute inset-0 bg-gray-500 opacity-75" />
|
||||
</div>
|
||||
</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,41 +27,45 @@
|
|||
: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'">
|
||||
<slot name="icon"/>
|
||||
: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">
|
||||
<slot name="title"/>
|
||||
<h2 v-if="$scopedSlots.hasOwnProperty('title')"
|
||||
class="text-2xl font-semibold text-center text-gray-900"
|
||||
>
|
||||
<slot name="title" />
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-2 w-full">
|
||||
<slot/>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="$scopedSlots.hasOwnProperty('footer')" class="px-6 py-4 bg-gray-100 text-right">
|
||||
<slot name="footer"/>
|
||||
<slot name="footer" />
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</transition>
|
||||
</portal>
|
||||
</teleport>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -91,7 +95,7 @@ export default {
|
|||
},
|
||||
|
||||
computed: {
|
||||
maxWidthClass() {
|
||||
maxWidthClass () {
|
||||
return {
|
||||
sm: 'sm:max-w-sm',
|
||||
md: 'sm:max-w-md',
|
||||
|
|
@ -115,7 +119,7 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
created () {
|
||||
const closeOnEscape = (e) => {
|
||||
if (e.key === 'Escape' && this.show) {
|
||||
this.close()
|
||||
|
|
@ -130,12 +134,12 @@ export default {
|
|||
},
|
||||
|
||||
methods: {
|
||||
close() {
|
||||
close () {
|
||||
if (this.closeable) {
|
||||
this.$emit('close')
|
||||
}
|
||||
},
|
||||
leaveCallback() {
|
||||
leaveCallback () {
|
||||
if (this.afterLeave) {
|
||||
this.afterLeave()
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,14 +1,14 @@
|
|||
<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">
|
||||
<div class="flex-grow">
|
||||
<p class="mb-0 py-2 px-4" :class="textClasses" v-html="message"/>
|
||||
<p class="mb-0 py-2 px-4" :class="textClasses" v-html="message" />
|
||||
</div>
|
||||
|
||||
<div class="justify-end">
|
||||
|
|
|
|||
|
|
@ -6,13 +6,9 @@
|
|||
: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/>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
|
|
@ -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('+')) {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="v-select">
|
||||
<label v-if="label"
|
||||
:class="[theme.SelectInput.label,{'uppercase text-xs':uppercaseLabels, 'text-sm':!uppercaseLabels}]"
|
||||
:class="[theme.SelectInput.label,{'uppercase text-xs': uppercaseLabels, 'text-sm': !uppercaseLabels}]"
|
||||
>
|
||||
{{ label }}
|
||||
<span v-if="required" class="text-red-500 required-dot">*</span>
|
||||
|
|
@ -10,24 +10,22 @@
|
|||
<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"
|
||||
:style="inputStyle" :class="[theme.SelectInput.input,{'py-2':!multiple || loading,'py-1': multiple, '!ring-red-500 !ring-2': hasError, '!cursor-not-allowed !bg-gray-200':disabled}, inputClass]"
|
||||
:style="inputStyle" :class="[theme.SelectInput.input,{'py-2': !multiple || loading,'py-1': multiple, '!ring-red-500 !ring-2': hasError, '!cursor-not-allowed !bg-gray-200': disabled}, inputClass]"
|
||||
@click="openDropdown"
|
||||
>
|
||||
<div :class="{'h-6':!multiple, 'min-h-8':multiple && !loading}">
|
||||
<div :class="{'h-6': !multiple, 'min-h-8': multiple && !loading}">
|
||||
<transition name="fade" mode="out-in">
|
||||
<loader v-if="loading" key="loader" class="h-6 w-6 text-nt-blue mx-auto" />
|
||||
<div v-else-if="value" key="value" class="flex" :class="{'min-h-8':multiple}">
|
||||
<div v-else-if="value" key="value" class="flex" :class="{'min-h-8': multiple}">
|
||||
<slot name="selected" :option="value" />
|
||||
</div>
|
||||
<div v-else key="placeholder">
|
||||
<slot name="placeholder">
|
||||
<div class="text-gray-400 dark:text-gray-500 w-full text-left" :class="{'py-1':multiple && !loading}">
|
||||
<div class="text-gray-400 dark:text-gray-500 w-full text-left" :class="{'py-1': multiple && !loading}">
|
||||
{{ placeholder }}
|
||||
</div>
|
||||
</slot>
|
||||
|
|
@ -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,32 +47,32 @@
|
|||
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>
|
||||
<div v-if="loading" class="w-full py-2 flex justify-center">
|
||||
<loader class="h-6 w-6 text-nt-blue mx-auto" />
|
||||
</div>
|
||||
<template v-if="filteredOptions.length>0">
|
||||
<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="{'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-nt-blue"
|
||||
:dusk="dusk+'_option'" @click="select(item)"
|
||||
>
|
||||
<slot name="option" :option="item" :selected="isSelected(item)" />
|
||||
</li>
|
||||
</template>
|
||||
<p v-else-if="!loading && !(allowCreation && searchTerm)" class="w-full text-gray-500 text-center py-2">
|
||||
{{ (allowCreation ? 'Type something to add an option': 'No option available') }}.
|
||||
{{ (allowCreation ? 'Type something to add an option' : 'No option available') }}.
|
||||
</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="{'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-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,13 +95,13 @@ export default {
|
|||
name: 'VSelect',
|
||||
components: { TextInput },
|
||||
directives: {
|
||||
onClickaway: onClickaway
|
||||
onClickaway: vOnClickOutside
|
||||
},
|
||||
props: {
|
||||
data: Array,
|
||||
value: { default: null },
|
||||
inputClass: {type: String, default: null},
|
||||
dropdownClass: {type: String, default: 'w-full'},
|
||||
inputClass: { type: String, default: null },
|
||||
dropdownClass: { type: String, default: 'w-full' },
|
||||
label: { type: String, default: null },
|
||||
dusk: { type: String, default: null },
|
||||
loading: { type: Boolean, default: false },
|
||||
|
|
@ -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 {
|
||||
|
|
@ -229,13 +225,13 @@ export default {
|
|||
}
|
||||
}
|
||||
},
|
||||
createOption(newOption) {
|
||||
if(newOption){
|
||||
let newItem = {
|
||||
'name': newOption,
|
||||
'value': newOption,
|
||||
createOption (newOption) {
|
||||
if (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"
|
||||
>
|
||||
|
|
@ -67,16 +67,16 @@
|
|||
v-html="form.description"
|
||||
/>
|
||||
<open-form v-if="form"
|
||||
:form="form"
|
||||
:loading="loading"
|
||||
:fields="form.properties"
|
||||
:theme="theme"
|
||||
:admin-preview="adminPreview"
|
||||
@submit="submitForm"
|
||||
:form="form"
|
||||
:loading="loading"
|
||||
:fields="form.properties"
|
||||
:theme="theme"
|
||||
:admin-preview="adminPreview"
|
||||
@submit="submitForm"
|
||||
>
|
||||
<template #submit-btn="{submitForm}">
|
||||
<open-form-button :loading="loading" :theme="theme" :color="form.color" class="mt-2 px-8 mx-1"
|
||||
:class="submitButtonClass" @click.prevent="submitForm"
|
||||
:class="submitButtonClass" @click.prevent="submitForm"
|
||||
>
|
||||
{{ form.submit_button_text }}
|
||||
</open-form-button>
|
||||
|
|
@ -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) {}
|
||||
|
|
@ -216,10 +215,9 @@ export default {
|
|||
this.$emit('submitted', true)
|
||||
|
||||
// If enabled display confetti
|
||||
if(this.form.confetti_on_submission){
|
||||
if (this.form.confetti_on_submission) {
|
||||
this.playConfetti()
|
||||
}
|
||||
|
||||
}).catch((error) => {
|
||||
if (error.response.data && error.response.data.message) {
|
||||
this.alertError(error.response.data.message)
|
||||
|
|
|
|||
|
|
@ -8,9 +8,9 @@
|
|||
<transition name="fade" mode="out-in" appear>
|
||||
<template v-for="group, groupIndex in fieldGroups">
|
||||
<div v-if="currentFieldGroupIndex===groupIndex"
|
||||
:key="groupIndex"
|
||||
class="form-group flex flex-wrap w-full">
|
||||
|
||||
:key="groupIndex"
|
||||
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}"
|
||||
|
|
@ -19,14 +19,14 @@
|
|||
@start="onDragStart" @end="onDragEnd"
|
||||
>
|
||||
<open-form-field v-for="field in group"
|
||||
:key="field.id + formVersionId"
|
||||
:field="field"
|
||||
:show-hidden="showHidden"
|
||||
:form="form"
|
||||
:data-form="dataForm"
|
||||
:data-form-value="dataFormValue"
|
||||
:theme="theme"
|
||||
:admin-preview="adminPreview"
|
||||
:key="field.id + formVersionId"
|
||||
:field="field"
|
||||
:show-hidden="showHidden"
|
||||
:form="form"
|
||||
:data-form="dataForm"
|
||||
:data-form-value="dataFormValue"
|
||||
:theme="theme"
|
||||
:admin-preview="adminPreview"
|
||||
/>
|
||||
</draggable>
|
||||
</div>
|
||||
|
|
@ -36,8 +36,8 @@
|
|||
<!-- Captcha -->
|
||||
<template v-if="form.use_captcha && isLastPage">
|
||||
<div class="mb-3 px-2 mt-2 mx-auto w-max">
|
||||
<vue-hcaptcha ref="hcaptcha" :sitekey="hCaptchaSiteKey" :theme="darkModeEnabled?'dark':'light'"/>
|
||||
<has-error :form="dataForm" field="h-captcha-response"/>
|
||||
<vue-hcaptcha ref="hcaptcha" :sitekey="hCaptchaSiteKey" :theme="darkModeEnabled?'dark':'light'" />
|
||||
<has-error :form="dataForm" field="h-captcha-response" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
{{ previousFieldsPageBreak.previous_btn_text }}
|
||||
</open-form-button>
|
||||
|
||||
<slot v-if="isLastPage" name="submit-btn" :submitForm="submitForm"/>
|
||||
<slot v-if="isLastPage" name="submit-btn" :submitForm="submitForm" />
|
||||
<open-form-button v-else native-type="button" :color="form.color" :theme="theme" class="mt-2 px-8 mx-1"
|
||||
@click="nextPage"
|
||||
>
|
||||
|
|
@ -70,12 +70,12 @@ 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',
|
||||
components: {draggable, OpenFormField, OpenFormButton, VueHcaptcha},
|
||||
components: { draggable, OpenFormField, OpenFormButton, VueHcaptcha },
|
||||
mixins: [FormPendingSubmissionKey],
|
||||
props: {
|
||||
form: {
|
||||
|
|
@ -98,9 +98,9 @@ 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() {
|
||||
data () {
|
||||
return {
|
||||
dataForm: null,
|
||||
currentFieldGroupIndex: 0,
|
||||
|
|
@ -122,7 +122,7 @@ export default {
|
|||
/**
|
||||
* Create field groups (or Page) using page breaks if any
|
||||
*/
|
||||
fieldGroups() {
|
||||
fieldGroups () {
|
||||
if (!this.fields) return []
|
||||
const groups = []
|
||||
let currentGroup = []
|
||||
|
|
@ -161,12 +161,12 @@ export default {
|
|||
/**
|
||||
* Returns the page break block for the current group of fields
|
||||
*/
|
||||
currentFieldsPageBreak() {
|
||||
currentFieldsPageBreak () {
|
||||
const block = this.currentFields[this.currentFields.length - 1]
|
||||
if (block && block.type === 'nf-page-break') return block
|
||||
return null
|
||||
},
|
||||
previousFieldsPageBreak() {
|
||||
previousFieldsPageBreak () {
|
||||
if (this.currentFieldGroupIndex === 0) return null
|
||||
const previousFields = this.fieldGroups[this.currentFieldGroupIndex - 1]
|
||||
const block = previousFields[previousFields.length - 1]
|
||||
|
|
@ -177,13 +177,13 @@ export default {
|
|||
* Returns true if we're on the last page
|
||||
* @returns {boolean}xs
|
||||
*/
|
||||
isLastPage() {
|
||||
isLastPage () {
|
||||
return this.currentFieldGroupIndex === (this.fieldGroups.length - 1)
|
||||
},
|
||||
isPublicFormPage() {
|
||||
isPublicFormPage () {
|
||||
return this.$route.name === 'forms.show_public'
|
||||
},
|
||||
dataFormValue() {
|
||||
dataFormValue () {
|
||||
// For get values instead of Id for select/multi select options
|
||||
const data = this.dataForm.data()
|
||||
const selectionFields = this.fields.filter((field) => {
|
||||
|
|
@ -206,24 +206,24 @@ export default {
|
|||
watch: {
|
||||
form: {
|
||||
deep: true,
|
||||
handler() {
|
||||
handler () {
|
||||
this.initForm()
|
||||
}
|
||||
},
|
||||
fields: {
|
||||
deep: true,
|
||||
handler() {
|
||||
handler () {
|
||||
this.initForm()
|
||||
}
|
||||
},
|
||||
theme: {
|
||||
handler() {
|
||||
handler () {
|
||||
this.formVersionId++
|
||||
}
|
||||
},
|
||||
dataForm: {
|
||||
deep: true,
|
||||
handler() {
|
||||
handler () {
|
||||
if (this.isPublicFormPage && this.form && this.form.auto_save && this.dataFormValue) {
|
||||
try {
|
||||
window.localStorage.setItem(this.formPendingSubmissionKey, JSON.stringify(this.dataFormValue))
|
||||
|
|
@ -231,10 +231,10 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
mounted () {
|
||||
this.initForm()
|
||||
|
||||
if (window.location.href.includes('auto_submit=true')) {
|
||||
|
|
@ -244,7 +244,7 @@ export default {
|
|||
},
|
||||
|
||||
methods: {
|
||||
submitForm() {
|
||||
submitForm () {
|
||||
if (this.currentFieldGroupIndex !== this.fieldGroups.length - 1) {
|
||||
return
|
||||
}
|
||||
|
|
@ -263,7 +263,7 @@ export default {
|
|||
/**
|
||||
* If more than one page, show first page with error
|
||||
*/
|
||||
onSubmissionFailure() {
|
||||
onSubmissionFailure () {
|
||||
this.isAutoSubmit = false
|
||||
if (this.fieldGroups.length > 1) {
|
||||
// Find first mistake and show page
|
||||
|
|
@ -289,7 +289,7 @@ export default {
|
|||
})
|
||||
}
|
||||
},
|
||||
async getSubmissionData() {
|
||||
async getSubmissionData () {
|
||||
if (!this.form || !this.form.editable_submissions || !this.form.submission_id) { return null }
|
||||
await this.$store.dispatch('open/records/loadRecord',
|
||||
axios.get('/api/forms/' + this.form.slug + '/submissions/' + this.form.submission_id).then((response) => {
|
||||
|
|
@ -298,7 +298,7 @@ export default {
|
|||
)
|
||||
return this.$store.getters['open/records/getById'](this.form.submission_id)
|
||||
},
|
||||
async initForm() {
|
||||
async initForm () {
|
||||
if (this.isPublicFormPage && this.form.editable_submissions) {
|
||||
const urlParam = new URLSearchParams(window.location.search)
|
||||
if (urlParam && urlParam.get('submission_id')) {
|
||||
|
|
@ -325,9 +325,9 @@ export default {
|
|||
let currentDate = dateObj.getFullYear() + '-' +
|
||||
String(dateObj.getMonth() + 1).padStart(2, '0') + '-' +
|
||||
String(dateObj.getDate()).padStart(2, '0')
|
||||
if(field.with_time === true){
|
||||
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
|
||||
}
|
||||
|
|
@ -367,7 +367,7 @@ export default {
|
|||
let currentDate = dateObj.getFullYear() + '-' +
|
||||
String(dateObj.getMonth() + 1).padStart(2, '0') + '-' +
|
||||
String(dateObj.getDate()).padStart(2, '0')
|
||||
if(field.with_time === true){
|
||||
if (field.with_time === true) {
|
||||
currentDate += 'T' + String(dateObj.getHours()).padStart(2, '0') + ':' +
|
||||
String(dateObj.getMinutes()).padStart(2, '0')
|
||||
}
|
||||
|
|
@ -375,16 +375,15 @@ export default {
|
|||
} else { // Default prefill if any
|
||||
formData[field.id] = field.prefill
|
||||
}
|
||||
|
||||
})
|
||||
this.dataForm = new Form(formData)
|
||||
},
|
||||
previousPage() {
|
||||
previousPage () {
|
||||
this.currentFieldGroupIndex -= 1
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||||
return false
|
||||
},
|
||||
nextPage() {
|
||||
nextPage () {
|
||||
this.currentFieldGroupIndex += 1
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||||
return false
|
||||
|
|
|
|||
|
|
@ -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)">
|
||||
|
|
@ -30,11 +30,11 @@
|
|||
</div>
|
||||
</transition>
|
||||
<open-complete-form ref="form-preview" class="w-full mx-auto py-5 px-3" :class="{'max-w-lg': form && (form.width === 'centered')}"
|
||||
:creating="creating"
|
||||
:form="form"
|
||||
:admin-preview="true"
|
||||
@restarted="previewFormSubmitted=false"
|
||||
@submitted="previewFormSubmitted=true"
|
||||
:creating="creating"
|
||||
:form="form"
|
||||
:admin-preview="true"
|
||||
@restarted="previewFormSubmitted=false"
|
||||
@submitted="previewFormSubmitted=true"
|
||||
/>
|
||||
</div>
|
||||
<p class="text-center text-xs text-gray-400 dark:text-gray-600 mt-1">
|
||||
|
|
@ -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 -->
|
||||
|
|
@ -218,7 +220,7 @@
|
|||
</template>
|
||||
<template #option="{option, selected}">
|
||||
<div class="flex items-center space-x-2 hover:text-white">
|
||||
<country-flag size="normal" class="!-mt-[9px]" :country="option.code"/>
|
||||
<country-flag size="normal" class="!-mt-[9px]" :country="option.code" />
|
||||
<span class="grow">{{ option.name }}</span>
|
||||
<span>{{ option.dial_code }}</span>
|
||||
</div>
|
||||
|
|
@ -297,16 +299,16 @@
|
|||
<!-- 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"
|
||||
/>
|
||||
<select-input name="help_position" class="mt-3"
|
||||
:options="[
|
||||
{name:'Below input',value:'below_input'},
|
||||
{name:'Above input',value:'above_input'},
|
||||
]"
|
||||
{name:'Below input',value:'below_input'},
|
||||
{name:'Above input',value:'above_input'},
|
||||
]"
|
||||
:form="field" label="Field Help Position"
|
||||
@input="onFieldHelpPositionChange"
|
||||
/>
|
||||
|
|
@ -322,7 +324,6 @@
|
|||
label="Always show character limit"
|
||||
/>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Advanced Options -->
|
||||
|
|
@ -354,19 +355,19 @@
|
|||
</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',
|
||||
components: {FormBlockLogicEditor, CountryFlag},
|
||||
components: { FormBlockLogicEditor, CountryFlag },
|
||||
props: {
|
||||
field: {
|
||||
type: Object,
|
||||
|
|
@ -377,21 +378,21 @@ export default {
|
|||
required: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
data () {
|
||||
return {
|
||||
typesWithoutPlaceholder: ['date', 'checkbox', 'files'],
|
||||
editorToolbarCustom: [
|
||||
['bold', 'italic', 'underline', 'link'],
|
||||
['bold', 'italic', 'underline', 'link']
|
||||
],
|
||||
allCountries: countryCodes,
|
||||
allCountries: countryCodes
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
hasPlaceholder() {
|
||||
hasPlaceholder () {
|
||||
return !this.typesWithoutPlaceholder.includes(this.field.type)
|
||||
},
|
||||
prefillSelectsOptions() {
|
||||
prefillSelectsOptions () {
|
||||
if (!['select', 'multi_select'].includes(this.field.type)) return {}
|
||||
|
||||
return this.field[this.field.type].options.map(option => {
|
||||
|
|
@ -401,7 +402,7 @@ export default {
|
|||
}
|
||||
})
|
||||
},
|
||||
timezonesOptions() {
|
||||
timezonesOptions () {
|
||||
if (this.field.type !== 'date') return []
|
||||
return timezones.map((timezone) => {
|
||||
return {
|
||||
|
|
@ -410,22 +411,22 @@ export default {
|
|||
}
|
||||
})
|
||||
},
|
||||
displayBasedOnAdvanced() {
|
||||
displayBasedOnAdvanced () {
|
||||
if (this.field.generates_uuid || this.field.generates_auto_increment_id) {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
},
|
||||
optionsText() {
|
||||
optionsText () {
|
||||
return this.field[this.field.type].options.map(option => {
|
||||
return option.name
|
||||
}).join("\n")
|
||||
},
|
||||
}).join('\n')
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
'field.width': {
|
||||
handler(val) {
|
||||
handler (val) {
|
||||
if (val === undefined || val === null) {
|
||||
this.$set(this.field, 'width', 'full')
|
||||
}
|
||||
|
|
@ -433,7 +434,7 @@ export default {
|
|||
immediate: true
|
||||
},
|
||||
'field.align': {
|
||||
handler(val) {
|
||||
handler (val) {
|
||||
if (val === undefined || val === null) {
|
||||
this.$set(this.field, 'align', 'left')
|
||||
}
|
||||
|
|
@ -442,32 +443,32 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
created () {
|
||||
if (this.field?.width === undefined || this.field?.width === null) {
|
||||
this.$set(this.field, 'width', 'full')
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
mounted () {
|
||||
if (['text', 'number', 'url', 'email'].includes(this.field?.type) && !this.field?.max_char_limit) {
|
||||
this.field.max_char_limit = 2000
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onFieldDisabledChange(val) {
|
||||
onFieldDisabledChange (val) {
|
||||
this.$set(this.field, 'disabled', val)
|
||||
if (this.field.disabled) {
|
||||
this.$set(this.field, 'hidden', false)
|
||||
}
|
||||
},
|
||||
onFieldRequiredChange(val) {
|
||||
onFieldRequiredChange (val) {
|
||||
this.$set(this.field, 'required', val)
|
||||
if (this.field.required) {
|
||||
this.$set(this.field, 'hidden', false)
|
||||
}
|
||||
},
|
||||
onFieldHiddenChange(val) {
|
||||
onFieldHiddenChange (val) {
|
||||
this.$set(this.field, 'hidden', val)
|
||||
if (this.field.hidden) {
|
||||
this.$set(this.field, 'required', false)
|
||||
|
|
@ -477,49 +478,49 @@ export default {
|
|||
this.$set(this.field, 'generates_auto_increment_id', false)
|
||||
}
|
||||
},
|
||||
onFieldDateRangeChange(val) {
|
||||
onFieldDateRangeChange (val) {
|
||||
this.$set(this.field, 'date_range', val)
|
||||
if (this.field.date_range) {
|
||||
this.$set(this.field, 'with_time', false)
|
||||
this.$set(this.field, 'prefill_today', false)
|
||||
}
|
||||
},
|
||||
onFieldWithTimeChange(val) {
|
||||
onFieldWithTimeChange (val) {
|
||||
this.$set(this.field, 'with_time', val)
|
||||
if (this.field.with_time) {
|
||||
this.$set(this.field, 'date_range', false)
|
||||
}
|
||||
},
|
||||
onFieldGenUIdChange(val) {
|
||||
onFieldGenUIdChange (val) {
|
||||
this.$set(this.field, 'generates_uuid', val)
|
||||
if (this.field.generates_uuid) {
|
||||
this.$set(this.field, 'generates_auto_increment_id', false)
|
||||
this.$set(this.field, 'hidden', true)
|
||||
}
|
||||
},
|
||||
onFieldGenAutoIdChange(val) {
|
||||
onFieldGenAutoIdChange (val) {
|
||||
this.$set(this.field, 'generates_auto_increment_id', val)
|
||||
if (this.field.generates_auto_increment_id) {
|
||||
this.$set(this.field, 'generates_uuid', false)
|
||||
this.$set(this.field, 'hidden', true)
|
||||
}
|
||||
},
|
||||
initRating() {
|
||||
initRating () {
|
||||
if (this.field.is_rating && !this.field.rating_max_value) {
|
||||
this.$set(this.field, 'rating_max_value', 5)
|
||||
}
|
||||
},
|
||||
onFieldOptionsChange(val) {
|
||||
const vals = (val) ? val.trim().split("\n") : []
|
||||
onFieldOptionsChange (val) {
|
||||
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) {
|
||||
onFieldPrefillTodayChange (val) {
|
||||
this.$set(this.field, 'prefill_today', val)
|
||||
if (this.field.prefill_today) {
|
||||
this.$set(this.field, 'prefill', 'Pre-filled with current date')
|
||||
|
|
@ -530,38 +531,38 @@ export default {
|
|||
this.$set(this.field, 'prefill', null)
|
||||
}
|
||||
},
|
||||
onFieldAllowCreationChange(val) {
|
||||
onFieldAllowCreationChange (val) {
|
||||
this.$set(this.field, 'allow_creation', val)
|
||||
if (this.field.allow_creation) {
|
||||
this.$set(this.field, 'without_dropdown', false)
|
||||
}
|
||||
},
|
||||
onFieldWithoutDropdownChange(val) {
|
||||
onFieldWithoutDropdownChange (val) {
|
||||
this.$set(this.field, 'without_dropdown', val)
|
||||
if (this.field.without_dropdown) {
|
||||
this.$set(this.field, 'allow_creation', false)
|
||||
}
|
||||
},
|
||||
onFieldDisablePastDatesChange(val) {
|
||||
onFieldDisablePastDatesChange (val) {
|
||||
this.$set(this.field, 'disable_past_dates', val)
|
||||
if (this.field.disable_past_dates) {
|
||||
this.$set(this.field, 'disable_future_dates', false)
|
||||
this.$set(this.field, 'prefill_today', false)
|
||||
}
|
||||
},
|
||||
onFieldDisableFutureDatesChange(val) {
|
||||
onFieldDisableFutureDatesChange (val) {
|
||||
this.$set(this.field, 'disable_future_dates', val)
|
||||
if (this.field.disable_future_dates) {
|
||||
this.$set(this.field, 'disable_past_dates', false)
|
||||
this.$set(this.field, 'prefill_today', false)
|
||||
}
|
||||
},
|
||||
onFieldHelpPositionChange(val) {
|
||||
onFieldHelpPositionChange (val) {
|
||||
if (!val) {
|
||||
this.$set(this.field, 'help_position', 'below_input')
|
||||
}
|
||||
},
|
||||
selectAllCountries() {
|
||||
selectAllCountries () {
|
||||
this.$set(this.field, 'unavailable_countries', this.allCountries.map(item => {
|
||||
return item.code
|
||||
}))
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
|
|
@ -253,7 +241,7 @@ function resolveMiddleware (requireContext) {
|
|||
.map(file =>
|
||||
[file.match(/[^/]*(?=\.[^.]*$)/)[0], requireContext[file]]
|
||||
).forEach(([name, middleware]) => {
|
||||
middlewares[name] = middleware.default || middleware
|
||||
})
|
||||
middlewares[name] = middleware.default || middleware
|
||||
})
|
||||
return middlewares
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 { 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