village-hall
/
opnform
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Managed to load a page

This commit is contained in:
Julien Nahum 2023-10-14 17:31:30 +02:00
parent 6adcc52072
commit 358bf0e4d0
21 changed files with 3571 additions and 12963 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15923
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

19
package.json
View File

@ -5,10 +5,13 @@
"build": "vite build" "build": "vite build"
}, },
"dependencies": { "dependencies": {
"@hcaptcha/vue3-hcaptcha": "^0.3.2", "@hcaptcha/vue3-hcaptcha": "^1.3.0",
"@sentry/integrations": "^7.53.1", "@sentry/integrations": "^7.53.1",
"@sentry/tracing": "^6.11.0", "@sentry/tracing": "^6.11.0",
"@sentry/vue": "^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", "axios": "^0.21.1",
"chart.js": "^3.7.1", "chart.js": "^3.7.1",
"clone-deep": "^4.0.1", "clone-deep": "^4.0.1",
@ -23,21 +26,18 @@
"query-builder-vue": "^1.2.0", "query-builder-vue": "^1.2.0",
"tinymotion": "^0.2.0", "tinymotion": "^0.2.0",
"vform": "^2.1.1", "vform": "^2.1.1",
"vue3-vt-notifications": "^1.0.0", "vue": "^3.2.13",
"vue": "^3.1.0",
"@vue/compat": "^3.1.0",
"vue-chartjs": "^4.1.0", "vue-chartjs": "^4.1.0",
"vue3-click-away": "^1.2.4",
"vue-codemirror": "^4.0.6", "vue-codemirror": "^4.0.6",
"vue-confetti": "^2.3.0", "vue-confetti": "^2.3.0",
"vue-country-flag-next": "^2.3.2", "vue-country-flag-next": "^2.3.2",
"vue-i18n": "^8.25.0", "vue-i18n": "^8.25.0",
"vue-meta": "^2.4.0", "vue-meta": "^2.4.0",
"vue-notion": "^3.0.0-beta.1", "vue-notion": "^3.0.0-beta.1",
"vue-plugin-load-script": "^1.3.2", "vue-router": "^4.2.5",
"vue-router": "^3.5.2",
"vue-signature-pad": "^2.0.5", "vue-signature-pad": "^2.0.5",
"vue2-editor": "^2.10.3", "vue2-editor": "^2.10.3",
"vue3-vt-notifications": "^1.0.0",
"vuedraggable": "^2.24.3", "vuedraggable": "^2.24.3",
"vuex": "^4.1.0" "vuex": "^4.1.0"
}, },
@ -48,7 +48,7 @@
"@babel/preset-env": "^7.15.0", "@babel/preset-env": "^7.15.0",
"@sentry/vite-plugin": "^2.8.0", "@sentry/vite-plugin": "^2.8.0",
"@tailwindcss/aspect-ratio": "^0.4.2", "@tailwindcss/aspect-ratio": "^0.4.2",
"@vitejs/plugin-vue2": "^2.2.0", "@vitejs/plugin-vue": "^4.4.0",
"autoprefixer": "^10.4.13", "autoprefixer": "^10.4.13",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"eslint": "^7.32.0", "eslint": "^7.32.0",
@ -66,7 +66,6 @@
"sass-loader": "^10.2.0", "sass-loader": "^10.2.0",
"tailwindcss": "^3.2.4", "tailwindcss": "^3.2.4",
"vite": "^4.0.4", "vite": "^4.0.4",
"vue-loader": "^15.9.8", "vue-loader": "^15.9.8"
"@vue/compiler-sfc": "^3.1.0"
} }
} }

27
resources/js/app.js vendored
View File

@ -1,9 +1,8 @@
import Vue from 'vue' import { createApp, configureCompat, ref } from 'vue'
import store from '~/store' import store from '~/store'
import router from '~/router' import router from '~/router'
import i18n from '~/plugins/i18n.js'
import App from '~/components/App.vue' 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 Base from './base.js'
import '~/plugins' import '~/plugins'
@ -11,15 +10,19 @@ import '~/components'
import '../sass/app.scss' import '../sass/app.scss'
Vue.config.productionTip = false const app = createApp(App)
.use(router)
.use(store)
.mixin(Base)
Vue.mixin(Base) registerPlugin(app)
Vue.use(LoadScript)
/* eslint-disable no-new */ configureCompat({
new Vue({ // default everything to Vue 2 behavior
i18n, MODE: 2
store,
router,
...App
}) })
router.app = app
app.mount('#app')
export default app

70
resources/js/components/App.vue
View File

@ -1,17 +1,17 @@
<template> <template>
<div id="app" class="bg-white dark:bg-notion-dark"> <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 /> <amplitude />
<crisp /> <crisp />
<!-- <llamafi />--> <!-- <llamafi />-->
<transition enter-active-class="linear duration-200 overflow-hidden" <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" enter-to-class="max-h-screen"
leave-active-class="linear duration-200 overflow-hidden" 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" leave-to-class="max-h-0"
> >
<div v-if="announcement && !isIframe" class="bg-nt-blue text-white text-center p-3 relative"> <div v-if="announcement && !isIframe" class="bg-nt-blue text-white text-center p-3 relative">
@ -29,11 +29,11 @@
</transition> </transition>
<transition name="page" mode="out-in"> <transition name="page" mode="out-in">
<component :is="layout" v-if="layout" /> <component :is="layoutComponent" v-if="layout" />
</transition> </transition>
<portal-target name="modals" multiple /> <div id="modals" />
<stop-impersonation /> <stop-impersonation />
<notifications /> <!-- <notifications />-->
</div> </div>
</template> </template>
@ -43,8 +43,9 @@ import Hotjar from './service/Hotjar.vue'
import Amplitude from './service/Amplitude.vue' import Amplitude from './service/Amplitude.vue'
import Crisp from './service/Crisp.vue' import Crisp from './service/Crisp.vue'
import StopImpersonation from './pages/StopImpersonation.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 SeoMeta from '../mixins/seo-meta.js'
import { mapState } from 'vuex'
// Load layout components dynamically. // Load layout components dynamically.
const requireContext = import.meta.glob('../layouts/**.vue', { eager: true }) const requireContext = import.meta.glob('../layouts/**.vue', { eager: true })
@ -61,6 +62,8 @@ Object.keys(requireContext)
export default { export default {
el: '#app', el: '#app',
name: 'OpnForm',
components: { components: {
Notifications, Notifications,
StopImpersonation, StopImpersonation,
@ -75,8 +78,6 @@ export default {
data: () => ({ data: () => ({
metaTitle: 'OpnForm', 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.', 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, announcement: false,
alert: { alert: {
type: null, type: null,
@ -88,41 +89,38 @@ export default {
navbarHidden: false 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: { computed: {
isIframe () { isIframe () {
return window.location !== window.parent.location || window.frameElement return window.location !== window.parent.location || window.frameElement
}, },
isOnboardingPage () { isOnboardingPage () {
return this.$route.name === 'onboarding' return this.$route.name === 'onboarding'
},
...mapState({
layout: state => state.app.layout
}),
layoutComponent () {
return layouts[this.layout]
} }
}, },
watch: { 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> </script>

10
resources/js/components/Child.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<transition name="page" mode="out-in"> <router-view v-slot="{ Component }">
<slot> <transition name="page" mode="out-in">
<router-view /> <component :is="Component" />
</slot> </transition>
</transition> </router-view>
</template> </template>
<script> <script>

42
resources/js/components/Modal.vue
View File

@ -1,25 +1,25 @@
<template> <template>
<portal to="modals" :order="portalOrder"> <teleport to="#modals">
<transition leave-active-class="duration-200" name="fade" appear> <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"> <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" <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" enter-to-class="opacity-100"
leave-active-class="transition-all linear duration-100" leave-active-class="transition-all linear duration-100"
leave-class="opacity-100" leave-from-class="opacity-100"
leave-to-class="opacity-0" leave-to-class="opacity-0"
appear @after-leave="leaveCallback" appear @after-leave="leaveCallback"
> >
<div v-if="show" class="fixed inset-0 transform" @click="close"> <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> </div>
</transition> </transition>
<transition enter-active-class="delay-75 linear duration-300" <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" enter-to-class="opacity-100 translate-y-0 sm:scale-100"
leave-active-class="linear duration-200" appear 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" leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<div v-if="show" <div v-if="show"
@ -27,41 +27,45 @@
:class="maxWidthClass" :class="maxWidthClass"
> >
<div class="bg-white relative dark:bg-notion-dark p-4 md:p-6"> <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"> <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"> <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" <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"/> stroke-linejoin="round"
/>
</svg> </svg>
</button> </button>
</div> </div>
<div class="sm:flex sm:flex-col sm:items-start"> <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 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" <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"/> >
<slot name="icon" />
</div> </div>
</div> </div>
<div class="mt-3 text-center sm:mt-0 w-full"> <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')"
<slot name="title"/> class="text-2xl font-semibold text-center text-gray-900"
>
<slot name="title" />
</h2> </h2>
</div> </div>
</div> </div>
<div class="mt-2 w-full"> <div class="mt-2 w-full">
<slot/> <slot />
</div> </div>
</div> </div>
<div v-if="$scopedSlots.hasOwnProperty('footer')" class="px-6 py-4 bg-gray-100 text-right"> <div v-if="$scopedSlots.hasOwnProperty('footer')" class="px-6 py-4 bg-gray-100 text-right">
<slot name="footer"/> <slot name="footer" />
</div> </div>
</div> </div>
</transition> </transition>
</div> </div>
</transition> </transition>
</portal> </teleport>
</template> </template>
<script> <script>
@ -91,7 +95,7 @@ export default {
}, },
computed: { computed: {
maxWidthClass() { maxWidthClass () {
return { return {
sm: 'sm:max-w-sm', sm: 'sm:max-w-sm',
md: 'sm:max-w-md', md: 'sm:max-w-md',
@ -115,7 +119,7 @@ export default {
} }
}, },
created() { created () {
const closeOnEscape = (e) => { const closeOnEscape = (e) => {
if (e.key === 'Escape' && this.show) { if (e.key === 'Escape' && this.show) {
this.close() this.close()
@ -130,12 +134,12 @@ export default {
}, },
methods: { methods: {
close() { close () {
if (this.closeable) { if (this.closeable) {
this.$emit('close') this.$emit('close')
} }
}, },
leaveCallback() { leaveCallback () {
if (this.afterLeave) { if (this.afterLeave) {
this.afterLeave() this.afterLeave()
} }

4
resources/js/components/WorkspaceDropdown.vue
View File

@ -20,8 +20,8 @@
</div> </div>
</template> </template>
<template v-for="worksp in workspaces"> <template v-for="worksp in workspaces" :key="worksp.id">
<a :key="worksp.id" href="#" <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="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)" :class="{'bg-blue-100 dark:bg-blue-900':workspace.id === worksp.id}" @click.prevent="switchWorkspace(worksp)"
> >

6
resources/js/components/common/Alert.vue
View File

@ -1,14 +1,14 @@
<template> <template>
<transition enter-active-class="linear duration-500 overflow-hidden" <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" enter-to-class="max-h-screen opacity-100"
leave-active-class="linear duration-500 overflow-hidden" 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" leave-to-class="max-h-0 opacity-0"
> >
<div :class="alertClasses" class="border shadow-sm p-2 flex items-center rounded-md"> <div :class="alertClasses" class="border shadow-sm p-2 flex items-center rounded-md">
<div class="flex-grow"> <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>
<div class="justify-end"> <div class="justify-end">

50
resources/js/components/common/Dropdown.vue
View File

@ -6,13 +6,9 @@
:close="close" :close="close"
/> />
<transition name="fade"> <transition name="fade">
<div <div v-if="isOpen" v-on-click-outside="close" :class="dropdownClass">
v-if="isOpen"
v-on-clickaway="close"
:class="dropdownClass"
>
<div class="py-1 " role="menu" aria-orientation="vertical" aria-labelledby="options-menu"> <div class="py-1 " role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
<slot/> <slot />
</div> </div>
</div> </div>
</transition> </transition>
@ -20,34 +16,40 @@
</template> </template>
<script> <script>
import {directive as onClickaway} from 'vue-clickaway' import { ref } from 'vue'
import { vOnClickOutside } from '@vueuse/components'
export default { export default {
name: 'Dropdown', name: 'Dropdown',
directives: {
onClickaway: onClickaway
},
props: { props: {
dropdownClass: { dropdownClass: {
type: String, 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' 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() { setup () {
return { const isOpen = ref(false)
isOpen: false
const open = () => {
isOpen.value = true
} }
},
methods: { const close = () => {
open() { isOpen.value = false
this.isOpen = true }
},
close() { const toggle = () => {
this.isOpen = false isOpen.value = !isOpen.value
}, }
toggle() {
this.isOpen = !this.isOpen const dropdownRef = ref(null)
return {
isOpen,
open,
close,
toggle,
dropdownRef
} }
} }
} }

4
resources/js/components/common/transitions/VTransition.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<transition v-if="name=='slideInUp'" <transition v-if="name=='slideInUp'"
enter-active-class="linear duration-300 overflow-hidden" 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" enter-to-class="max-h-screen"
leave-active-class="linear duration-300 overflow-hidden" 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" leave-to-class="max-h-0"
> >
<slot /> <slot />

24
resources/js/components/forms/PhoneInput.vue
View File

@ -49,22 +49,18 @@
</template> </template>
<script> <script>
import { directive as onClickaway } from 'vue-clickaway'
import inputMixin from '~/mixins/forms/input.js' import inputMixin from '~/mixins/forms/input.js'
import countryCodes from '../../../data/country_codes.json' 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' import parsePhoneNumber from 'libphonenumber-js'
export default { export default {
phone: 'PhoneInput', phone: 'PhoneInput',
components: { CountryFlag }, components: { CountryFlag },
directives: {
onClickaway: onClickaway
},
mixins: [inputMixin], mixins: [inputMixin],
props: { props: {
canOnlyCountry: { type: Boolean, default: false }, canOnlyCountry: { type: Boolean, default: false },
unavailableCountries: { type: Array, default: () => [] }, unavailableCountries: { type: Array, default: () => [] }
}, },
data () { data () {
@ -74,6 +70,14 @@ export default {
} }
}, },
computed: {
countries () {
return countryCodes.filter((item) => {
return !this.unavailableCountries.includes(item.code)
})
}
},
watch: { watch: {
inputVal: { inputVal: {
handler (val) { handler (val) {
@ -94,14 +98,6 @@ export default {
} }
}, },
computed: {
countries () {
return countryCodes.filter((item) => {
return !this.unavailableCountries.includes(item.code)
})
}
},
mounted () { mounted () {
if (this.compVal) { if (this.compVal) {
if (!this.compVal.startsWith('+')) { if (!this.compVal.startsWith('+')) {

66
resources/js/components/forms/components/VSelect.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="v-select"> <div class="v-select">
<label v-if="label" <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 }} {{ label }}
<span v-if="required" class="text-red-500 required-dot">*</span> <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> <slot name="help"><span class="field-help" v-html="help" /></slot>
</small> </small>
<div v-on-clickaway="closeDropdown" <div class="relative">
class="relative"
>
<span class="inline-block w-full rounded-md"> <span class="inline-block w-full rounded-md">
<button type="button" :dusk="dusk" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label" <button type="button" :dusk="dusk" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label"
class="cursor-pointer" 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" @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"> <transition name="fade" mode="out-in">
<loader v-if="loading" key="loader" class="h-6 w-6 text-nt-blue mx-auto" /> <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" /> <slot name="selected" :option="value" />
</div> </div>
<div v-else key="placeholder"> <div v-else key="placeholder">
<slot name="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 }} {{ placeholder }}
</div> </div>
</slot> </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" /> <path d="M7 7l3-3 3 3m0 6l-3 3-3-3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg> </svg>
</span> </span>
</button></span> </button>
<!-- Select popover, show/hide based on select state. --> </span>
<div v-show="isOpen" :dusk="dusk+'_dropdown' " <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="absolute mt-1 rounded-md bg-white dark:bg-notion-dark-light shadow-lg z-10"
:class="dropdownClass" :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="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}" :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"> <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" <text-input v-model="searchTerm" name="search" :color="color" :theme="theme"
placeholder="Search..." placeholder="Search..."
/> />
</div> </div>
<div v-if="loading" class="w-full py-2 flex justify-center"> <div v-if="loading" class="w-full py-2 flex justify-center">
<loader class="h-6 w-6 text-nt-blue mx-auto" /> <loader class="h-6 w-6 text-nt-blue mx-auto" />
</div> </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" <li v-for="item in filteredOptions" :key="item[optionKey]" role="option" :style="optionStyle"
:class="{'px-3 pr-9':multiple, 'px-3':!multiple}" :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)" :dusk="dusk+'_option'" @click="select(item)"
> >
<slot name="option" :option="item" :selected="isSelected(item)" /> <slot name="option" :option="item" :selected="isSelected(item)" />
</li> </li>
</template> </template>
<p v-else-if="!loading && !(allowCreation && searchTerm)" class="w-full text-gray-500 text-center py-2"> <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> </p>
<li v-if="allowCreation && searchTerm" role="option" :style="optionStyle" <li v-if="allowCreation && searchTerm" role="option" :style="optionStyle"
:class="{'px-3 pr-9':multiple, 'px-3':!multiple}" :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)" @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> </li>
</ul> </ul>
</div> </div>
@ -87,7 +85,7 @@
</template> </template>
<script> <script>
import { directive as onClickaway } from 'vue-clickaway' import { vOnClickOutside } from '@vueuse/components'
import TextInput from '../TextInput.vue' import TextInput from '../TextInput.vue'
import Fuse from 'fuse.js' import Fuse from 'fuse.js'
import { themes } from '~/config/form-themes.js' import { themes } from '~/config/form-themes.js'
@ -97,13 +95,13 @@ export default {
name: 'VSelect', name: 'VSelect',
components: { TextInput }, components: { TextInput },
directives: { directives: {
onClickaway: onClickaway onClickaway: vOnClickOutside
}, },
props: { props: {
data: Array, data: Array,
value: { default: null }, value: { default: null },
inputClass: {type: String, default: null}, inputClass: { type: String, default: null },
dropdownClass: {type: String, default: 'w-full'}, dropdownClass: { type: String, default: 'w-full' },
label: { type: String, default: null }, label: { type: String, default: null },
dusk: { type: String, default: null }, dusk: { type: String, default: null },
loading: { type: Boolean, default: false }, loading: { type: Boolean, default: false },
@ -114,7 +112,7 @@ export default {
remote: { type: Function, default: null }, remote: { type: Function, default: null },
searchKeys: { type: Array, default: () => ['name'] }, searchKeys: { type: Array, default: () => ['name'] },
optionKey: { type: String, default: 'id' }, 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' }, color: { type: String, default: '#3B82F6' },
placeholder: { type: String, default: null }, placeholder: { type: String, default: null },
uppercaseLabels: { type: Boolean, default: true }, uppercaseLabels: { type: Boolean, default: true },
@ -122,7 +120,7 @@ export default {
allowCreation: { type: Boolean, default: false }, allowCreation: { type: Boolean, default: false },
disabled: { type: Boolean, default: false }, disabled: { type: Boolean, default: false },
help: { type: String, default: null }, help: { type: String, default: null },
helpPosition: { type: String, default: 'below_input' }, helpPosition: { type: String, default: 'below_input' }
}, },
data () { data () {
return { return {
@ -154,7 +152,7 @@ export default {
return this.data return this.data
} }
// Fuze search // Fuse search
const fuzeOptions = { const fuzeOptions = {
keys: this.searchKeys keys: this.searchKeys
} }
@ -168,7 +166,7 @@ export default {
} }
}, },
watch: { watch: {
'searchTerm': function (val) { searchTerm (val) {
if (!this.debouncedRemote) return if (!this.debouncedRemote) return
if ((this.remote && val) || (val === '' && !this.value) || (val === '' && this.isOpen)) { if ((this.remote && val) || (val === '' && !this.value) || (val === '' && this.isOpen)) {
return this.debouncedRemote(val) return this.debouncedRemote(val)
@ -207,7 +205,6 @@ export default {
if (this.multiple) { if (this.multiple) {
const emitValue = Array.isArray(this.value) ? [...this.value] : [] const emitValue = Array.isArray(this.value) ? [...this.value] : []
// Already in value, remove it
if (this.isSelected(value)) { if (this.isSelected(value)) {
this.$emit('input', emitValue.filter((item) => { this.$emit('input', emitValue.filter((item) => {
if (this.emitKey) { if (this.emitKey) {
@ -218,7 +215,6 @@ export default {
return return
} }
// Otherwise add value
emitValue.push(value) emitValue.push(value)
this.$emit('input', emitValue) this.$emit('input', emitValue)
} else { } else {
@ -229,13 +225,13 @@ export default {
} }
} }
}, },
createOption(newOption) { createOption (newOption) {
if(newOption){ if (newOption) {
let newItem = { const newItem = {
'name': newOption, name: newOption,
'value': newOption, value: newOption
} }
this.$emit("update-options", newItem) this.$emit('update-options', newItem)
this.select(newItem) this.select(newItem)
} }
} }

26
resources/js/components/open/forms/OpenCompleteForm.vue
View File

@ -54,10 +54,10 @@
<transition <transition
v-if="!form.is_password_protected && (!isPublicFormPage || (!form.is_closed && !form.max_number_of_submissions_reached && form.visibility!='closed'))" 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-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" enter-to-class="translate-x-0 opacity-100"
leave-active-class="duration-500 ease-in" 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" leave-to-class="translate-x-full opacity-0"
mode="out-in" mode="out-in"
> >
@ -67,16 +67,16 @@
v-html="form.description" v-html="form.description"
/> />
<open-form v-if="form" <open-form v-if="form"
:form="form" :form="form"
:loading="loading" :loading="loading"
:fields="form.properties" :fields="form.properties"
:theme="theme" :theme="theme"
:admin-preview="adminPreview" :admin-preview="adminPreview"
@submit="submitForm" @submit="submitForm"
> >
<template #submit-btn="{submitForm}"> <template #submit-btn="{submitForm}">
<open-form-button :loading="loading" :theme="theme" :color="form.color" class="mt-2 px-8 mx-1" <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 }} {{ form.submit_button_text }}
</open-form-button> </open-form-button>
@ -120,6 +120,8 @@ import FormCleanings from '../../pages/forms/show/FormCleanings.vue'
export default { export default {
components: { VTransition, VButton, OpenFormButton, OpenForm, FormCleanings }, components: { VTransition, VButton, OpenFormButton, OpenForm, FormCleanings },
mixins: [FormPendingSubmissionKey],
props: { props: {
form: { type: Object, required: true }, form: { type: Object, required: true },
creating: { type: Boolean, default: false }, // If true, fake form submit creating: { type: Boolean, default: false }, // If true, fake form submit
@ -127,8 +129,6 @@ export default {
submitButtonClass: { type: String, default: '' } submitButtonClass: { type: String, default: '' }
}, },
mixins: [FormPendingSubmissionKey],
data () { data () {
return { return {
loading: false, loading: false,
@ -198,7 +198,6 @@ export default {
submission_data: form.data() submission_data: form.data()
}, '*') }, '*')
try { try {
window.localStorage.removeItem(this.formPendingSubmissionKey) window.localStorage.removeItem(this.formPendingSubmissionKey)
} catch (e) {} } catch (e) {}
@ -216,10 +215,9 @@ export default {
this.$emit('submitted', true) this.$emit('submitted', true)
// If enabled display confetti // If enabled display confetti
if(this.form.confetti_on_submission){ if (this.form.confetti_on_submission) {
this.playConfetti() this.playConfetti()
} }
}).catch((error) => { }).catch((error) => {
if (error.response.data && error.response.data.message) { if (error.response.data && error.response.data.message) {
this.alertError(error.response.data.message) this.alertError(error.response.data.message)

79
resources/js/components/open/forms/OpenForm.vue
View File

@ -8,9 +8,9 @@
<transition name="fade" mode="out-in" appear> <transition name="fade" mode="out-in" appear>
<template v-for="group, groupIndex in fieldGroups"> <template v-for="group, groupIndex in fieldGroups">
<div v-if="currentFieldGroupIndex===groupIndex" <div v-if="currentFieldGroupIndex===groupIndex"
:key="groupIndex" :key="groupIndex"
class="form-group flex flex-wrap w-full"> class="form-group flex flex-wrap w-full"
>
<draggable v-model="currentFields" <draggable v-model="currentFields"
class="flex flex-wrap transition-all" class="flex flex-wrap transition-all"
:class="{'-m-6 p-2 bg-gray-50 rounded-md':dragging}" :class="{'-m-6 p-2 bg-gray-50 rounded-md':dragging}"
@ -19,14 +19,14 @@
@start="onDragStart" @end="onDragEnd" @start="onDragStart" @end="onDragEnd"
> >
<open-form-field v-for="field in group" <open-form-field v-for="field in group"
:key="field.id + formVersionId" :key="field.id + formVersionId"
:field="field" :field="field"
:show-hidden="showHidden" :show-hidden="showHidden"
:form="form" :form="form"
:data-form="dataForm" :data-form="dataForm"
:data-form-value="dataFormValue" :data-form-value="dataFormValue"
:theme="theme" :theme="theme"
:admin-preview="adminPreview" :admin-preview="adminPreview"
/> />
</draggable> </draggable>
</div> </div>
@ -36,8 +36,8 @@
<!-- Captcha --> <!-- Captcha -->
<template v-if="form.use_captcha && isLastPage"> <template v-if="form.use_captcha && isLastPage">
<div class="mb-3 px-2 mt-2 mx-auto w-max"> <div class="mb-3 px-2 mt-2 mx-auto w-max">
<vue-hcaptcha ref="hcaptcha" :sitekey="hCaptchaSiteKey" :theme="darkModeEnabled?'dark':'light'"/> <vue-hcaptcha ref="hcaptcha" :sitekey="hCaptchaSiteKey" :theme="darkModeEnabled?'dark':'light'" />
<has-error :form="dataForm" field="h-captcha-response"/> <has-error :form="dataForm" field="h-captcha-response" />
</div> </div>
</template> </template>
@ -49,7 +49,7 @@
{{ previousFieldsPageBreak.previous_btn_text }} {{ previousFieldsPageBreak.previous_btn_text }}
</open-form-button> </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" <open-form-button v-else native-type="button" :color="form.color" :theme="theme" class="mt-2 px-8 mx-1"
@click="nextPage" @click="nextPage"
> >
@ -70,12 +70,12 @@ import clonedeep from 'clone-deep'
import FormLogicPropertyResolver from '../../../forms/FormLogicPropertyResolver.js' import FormLogicPropertyResolver from '../../../forms/FormLogicPropertyResolver.js'
import OpenFormField from './OpenFormField.vue' import OpenFormField from './OpenFormField.vue'
import draggable from 'vuedraggable' import draggable from 'vuedraggable'
const VueHcaptcha = () => import('@hcaptcha/vue-hcaptcha')
import FormPendingSubmissionKey from '../../../mixins/forms/form-pending-submission-key.js' import FormPendingSubmissionKey from '../../../mixins/forms/form-pending-submission-key.js'
const VueHcaptcha = () => import('@hcaptcha/vue3-hcaptcha')
export default { export default {
name: 'OpenForm', name: 'OpenForm',
components: {draggable, OpenFormField, OpenFormButton, VueHcaptcha}, components: { draggable, OpenFormField, OpenFormButton, VueHcaptcha },
mixins: [FormPendingSubmissionKey], mixins: [FormPendingSubmissionKey],
props: { props: {
form: { form: {
@ -98,9 +98,9 @@ export default {
type: Array, type: Array,
required: true required: true
}, },
adminPreview: { type: Boolean, default: false }, // If used in FormEditorPreview adminPreview: { type: Boolean, default: false } // If used in FormEditorPreview
}, },
data() { data () {
return { return {
dataForm: null, dataForm: null,
currentFieldGroupIndex: 0, currentFieldGroupIndex: 0,
@ -122,7 +122,7 @@ export default {
/** /**
* Create field groups (or Page) using page breaks if any * Create field groups (or Page) using page breaks if any
*/ */
fieldGroups() { fieldGroups () {
if (!this.fields) return [] if (!this.fields) return []
const groups = [] const groups = []
let currentGroup = [] let currentGroup = []
@ -161,12 +161,12 @@ export default {
/** /**
* Returns the page break block for the current group of fields * Returns the page break block for the current group of fields
*/ */
currentFieldsPageBreak() { currentFieldsPageBreak () {
const block = this.currentFields[this.currentFields.length - 1] const block = this.currentFields[this.currentFields.length - 1]
if (block && block.type === 'nf-page-break') return block if (block && block.type === 'nf-page-break') return block
return null return null
}, },
previousFieldsPageBreak() { previousFieldsPageBreak () {
if (this.currentFieldGroupIndex === 0) return null if (this.currentFieldGroupIndex === 0) return null
const previousFields = this.fieldGroups[this.currentFieldGroupIndex - 1] const previousFields = this.fieldGroups[this.currentFieldGroupIndex - 1]
const block = previousFields[previousFields.length - 1] const block = previousFields[previousFields.length - 1]
@ -177,13 +177,13 @@ export default {
* Returns true if we're on the last page * Returns true if we're on the last page
* @returns {boolean}xs * @returns {boolean}xs
*/ */
isLastPage() { isLastPage () {
return this.currentFieldGroupIndex === (this.fieldGroups.length - 1) return this.currentFieldGroupIndex === (this.fieldGroups.length - 1)
}, },
isPublicFormPage() { isPublicFormPage () {
return this.$route.name === 'forms.show_public' return this.$route.name === 'forms.show_public'
}, },
dataFormValue() { dataFormValue () {
// For get values instead of Id for select/multi select options // For get values instead of Id for select/multi select options
const data = this.dataForm.data() const data = this.dataForm.data()
const selectionFields = this.fields.filter((field) => { const selectionFields = this.fields.filter((field) => {
@ -206,24 +206,24 @@ export default {
watch: { watch: {
form: { form: {
deep: true, deep: true,
handler() { handler () {
this.initForm() this.initForm()
} }
}, },
fields: { fields: {
deep: true, deep: true,
handler() { handler () {
this.initForm() this.initForm()
} }
}, },
theme: { theme: {
handler() { handler () {
this.formVersionId++ this.formVersionId++
} }
}, },
dataForm: { dataForm: {
deep: true, deep: true,
handler() { handler () {
if (this.isPublicFormPage && this.form && this.form.auto_save && this.dataFormValue) { if (this.isPublicFormPage && this.form && this.form.auto_save && this.dataFormValue) {
try { try {
window.localStorage.setItem(this.formPendingSubmissionKey, JSON.stringify(this.dataFormValue)) window.localStorage.setItem(this.formPendingSubmissionKey, JSON.stringify(this.dataFormValue))
@ -231,10 +231,10 @@ export default {
} }
} }
} }
}, }
}, },
mounted() { mounted () {
this.initForm() this.initForm()
if (window.location.href.includes('auto_submit=true')) { if (window.location.href.includes('auto_submit=true')) {
@ -244,7 +244,7 @@ export default {
}, },
methods: { methods: {
submitForm() { submitForm () {
if (this.currentFieldGroupIndex !== this.fieldGroups.length - 1) { if (this.currentFieldGroupIndex !== this.fieldGroups.length - 1) {
return return
} }
@ -263,7 +263,7 @@ export default {
/** /**
* If more than one page, show first page with error * If more than one page, show first page with error
*/ */
onSubmissionFailure() { onSubmissionFailure () {
this.isAutoSubmit = false this.isAutoSubmit = false
if (this.fieldGroups.length > 1) { if (this.fieldGroups.length > 1) {
// Find first mistake and show page // 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 } if (!this.form || !this.form.editable_submissions || !this.form.submission_id) { return null }
await this.$store.dispatch('open/records/loadRecord', await this.$store.dispatch('open/records/loadRecord',
axios.get('/api/forms/' + this.form.slug + '/submissions/' + this.form.submission_id).then((response) => { 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) return this.$store.getters['open/records/getById'](this.form.submission_id)
}, },
async initForm() { async initForm () {
if (this.isPublicFormPage && this.form.editable_submissions) { if (this.isPublicFormPage && this.form.editable_submissions) {
const urlParam = new URLSearchParams(window.location.search) const urlParam = new URLSearchParams(window.location.search)
if (urlParam && urlParam.get('submission_id')) { if (urlParam && urlParam.get('submission_id')) {
@ -325,9 +325,9 @@ export default {
let currentDate = dateObj.getFullYear() + '-' + let currentDate = dateObj.getFullYear() + '-' +
String(dateObj.getMonth() + 1).padStart(2, '0') + '-' + String(dateObj.getMonth() + 1).padStart(2, '0') + '-' +
String(dateObj.getDate()).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') + ':' + currentDate += 'T' + String(dateObj.getHours()).padStart(2, '0') + ':' +
String(dateObj.getMinutes()).padStart(2, '0'); String(dateObj.getMinutes()).padStart(2, '0')
} }
pendingData[field.id] = currentDate pendingData[field.id] = currentDate
} }
@ -367,7 +367,7 @@ export default {
let currentDate = dateObj.getFullYear() + '-' + let currentDate = dateObj.getFullYear() + '-' +
String(dateObj.getMonth() + 1).padStart(2, '0') + '-' + String(dateObj.getMonth() + 1).padStart(2, '0') + '-' +
String(dateObj.getDate()).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') + ':' + currentDate += 'T' + String(dateObj.getHours()).padStart(2, '0') + ':' +
String(dateObj.getMinutes()).padStart(2, '0') String(dateObj.getMinutes()).padStart(2, '0')
} }
@ -375,16 +375,15 @@ export default {
} else { // Default prefill if any } else { // Default prefill if any
formData[field.id] = field.prefill formData[field.id] = field.prefill
} }
}) })
this.dataForm = new Form(formData) this.dataForm = new Form(formData)
}, },
previousPage() { previousPage () {
this.currentFieldGroupIndex -= 1 this.currentFieldGroupIndex -= 1
window.scrollTo({ top: 0, behavior: 'smooth' }) window.scrollTo({ top: 0, behavior: 'smooth' })
return false return false
}, },
nextPage() { nextPage () {
this.currentFieldGroupIndex += 1 this.currentFieldGroupIndex += 1
window.scrollTo({ top: 0, behavior: 'smooth' }) window.scrollTo({ top: 0, behavior: 'smooth' })
return false return false

16
resources/js/components/open/forms/components/form-components/FormEditorPreview.vue
View File

@ -5,10 +5,10 @@
> >
<div class="border rounded-lg bg-white dark:bg-notion-dark w-full block transition-all max-w-5xl"> <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" <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" enter-to-class="max-h-56"
leave-active-class="linear duration-100 overflow-hidden" 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" leave-to-class="max-h-0"
> >
<div v-if="(form.logo_picture || form.cover_picture)"> <div v-if="(form.logo_picture || form.cover_picture)">
@ -30,11 +30,11 @@
</div> </div>
</transition> </transition>
<open-complete-form ref="form-preview" class="w-full mx-auto py-5 px-3" :class="{'max-w-lg': form && (form.width === 'centered')}" <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" :creating="creating"
:form="form" :form="form"
:admin-preview="true" :admin-preview="true"
@restarted="previewFormSubmitted=false" @restarted="previewFormSubmitted=false"
@submitted="previewFormSubmitted=true" @submitted="previewFormSubmitted=true"
/> />
</div> </div>
<p class="text-center text-xs text-gray-400 dark:text-gray-600 mt-1"> <p class="text-center text-xs text-gray-400 dark:text-gray-600 mt-1">
@ -68,7 +68,7 @@ export default {
}, },
data () { data () {
return { return {
previewFormSubmitted: false, previewFormSubmitted: false
} }
}, },

93
resources/js/components/open/forms/fields/components/FieldOptions.vue
View File

@ -161,21 +161,23 @@
Advanced options for your select/multiselect fields. Advanced options for your select/multiselect fields.
</p> </p>
<text-area-input v-model="optionsText" :name="field.id+'_options_text'" class="mt-3" <text-area-input v-model="optionsText" :name="field.id+'_options_text'" class="mt-3"
@input="onFieldOptionsChange"
label="Set selection options" label="Set selection options"
help="Add one option per line" help="Add one option per line"
@input="onFieldOptionsChange"
/> />
<v-checkbox v-model="field.allow_creation" <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 Allow respondent to create new options
</v-checkbox> </v-checkbox>
<v-checkbox v-model="field.without_dropdown" class="mt-3" <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 Always show all select options
</v-checkbox> </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> </div>
<!-- Customization - Placeholder, Prefill, Relabel, Field Help --> <!-- Customization - Placeholder, Prefill, Relabel, Field Help -->
@ -218,7 +220,7 @@
</template> </template>
<template #option="{option, selected}"> <template #option="{option, selected}">
<div class="flex items-center space-x-2 hover:text-white"> <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 class="grow">{{ option.name }}</span>
<span>{{ option.dial_code }}</span> <span>{{ option.dial_code }}</span>
</div> </div>
@ -297,16 +299,16 @@
<!-- Help --> <!-- Help -->
<rich-text-area-input name="help" class="mt-3" <rich-text-area-input name="help" class="mt-3"
:form="field" :form="field"
:editorToolbar="editorToolbarCustom" :editor-toolbar="editorToolbarCustom"
label="Field Help" label="Field Help"
help="Your field help will be shown below/above the field, just like this message." help="Your field help will be shown below/above the field, just like this message."
:help-position="field.help_position" :help-position="field.help_position"
/> />
<select-input name="help_position" class="mt-3" <select-input name="help_position" class="mt-3"
:options="[ :options="[
{name:'Below input',value:'below_input'}, {name:'Below input',value:'below_input'},
{name:'Above input',value:'above_input'}, {name:'Above input',value:'above_input'},
]" ]"
:form="field" label="Field Help Position" :form="field" label="Field Help Position"
@input="onFieldHelpPositionChange" @input="onFieldHelpPositionChange"
/> />
@ -322,7 +324,6 @@
label="Always show character limit" label="Always show character limit"
/> />
</template> </template>
</div> </div>
<!-- Advanced Options --> <!-- Advanced Options -->
@ -354,19 +355,19 @@
</div> </div>
<!-- Logic Block --> <!-- 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> </div>
</template> </template>
<script> <script>
const FormBlockLogicEditor = () => import('../../components/form-logic-components/FormBlockLogicEditor.vue')
import timezones from '../../../../../../data/timezones.json' import timezones from '../../../../../../data/timezones.json'
import countryCodes from '../../../../../../data/country_codes.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 { export default {
name: 'FieldOptions', name: 'FieldOptions',
components: {FormBlockLogicEditor, CountryFlag}, components: { FormBlockLogicEditor, CountryFlag },
props: { props: {
field: { field: {
type: Object, type: Object,
@ -377,21 +378,21 @@ export default {
required: false required: false
} }
}, },
data() { data () {
return { return {
typesWithoutPlaceholder: ['date', 'checkbox', 'files'], typesWithoutPlaceholder: ['date', 'checkbox', 'files'],
editorToolbarCustom: [ editorToolbarCustom: [
['bold', 'italic', 'underline', 'link'], ['bold', 'italic', 'underline', 'link']
], ],
allCountries: countryCodes, allCountries: countryCodes
} }
}, },
computed: { computed: {
hasPlaceholder() { hasPlaceholder () {
return !this.typesWithoutPlaceholder.includes(this.field.type) return !this.typesWithoutPlaceholder.includes(this.field.type)
}, },
prefillSelectsOptions() { prefillSelectsOptions () {
if (!['select', 'multi_select'].includes(this.field.type)) return {} if (!['select', 'multi_select'].includes(this.field.type)) return {}
return this.field[this.field.type].options.map(option => { return this.field[this.field.type].options.map(option => {
@ -401,7 +402,7 @@ export default {
} }
}) })
}, },
timezonesOptions() { timezonesOptions () {
if (this.field.type !== 'date') return [] if (this.field.type !== 'date') return []
return timezones.map((timezone) => { return timezones.map((timezone) => {
return { return {
@ -410,22 +411,22 @@ export default {
} }
}) })
}, },
displayBasedOnAdvanced() { displayBasedOnAdvanced () {
if (this.field.generates_uuid || this.field.generates_auto_increment_id) { if (this.field.generates_uuid || this.field.generates_auto_increment_id) {
return false return false
} }
return true return true
}, },
optionsText() { optionsText () {
return this.field[this.field.type].options.map(option => { return this.field[this.field.type].options.map(option => {
return option.name return option.name
}).join("\n") }).join('\n')
}, }
}, },
watch: { watch: {
'field.width': { 'field.width': {
handler(val) { handler (val) {
if (val === undefined || val === null) { if (val === undefined || val === null) {
this.$set(this.field, 'width', 'full') this.$set(this.field, 'width', 'full')
} }
@ -433,7 +434,7 @@ export default {
immediate: true immediate: true
}, },
'field.align': { 'field.align': {
handler(val) { handler (val) {
if (val === undefined || val === null) { if (val === undefined || val === null) {
this.$set(this.field, 'align', 'left') this.$set(this.field, 'align', 'left')
} }
@ -442,32 +443,32 @@ export default {
} }
}, },
created() { created () {
if (this.field?.width === undefined || this.field?.width === null) { if (this.field?.width === undefined || this.field?.width === null) {
this.$set(this.field, 'width', 'full') this.$set(this.field, 'width', 'full')
} }
}, },
mounted() { mounted () {
if (['text', 'number', 'url', 'email'].includes(this.field?.type) && !this.field?.max_char_limit) { if (['text', 'number', 'url', 'email'].includes(this.field?.type) && !this.field?.max_char_limit) {
this.field.max_char_limit = 2000 this.field.max_char_limit = 2000
} }
}, },
methods: { methods: {
onFieldDisabledChange(val) { onFieldDisabledChange (val) {
this.$set(this.field, 'disabled', val) this.$set(this.field, 'disabled', val)
if (this.field.disabled) { if (this.field.disabled) {
this.$set(this.field, 'hidden', false) this.$set(this.field, 'hidden', false)
} }
}, },
onFieldRequiredChange(val) { onFieldRequiredChange (val) {
this.$set(this.field, 'required', val) this.$set(this.field, 'required', val)
if (this.field.required) { if (this.field.required) {
this.$set(this.field, 'hidden', false) this.$set(this.field, 'hidden', false)
} }
}, },
onFieldHiddenChange(val) { onFieldHiddenChange (val) {
this.$set(this.field, 'hidden', val) this.$set(this.field, 'hidden', val)
if (this.field.hidden) { if (this.field.hidden) {
this.$set(this.field, 'required', false) this.$set(this.field, 'required', false)
@ -477,49 +478,49 @@ export default {
this.$set(this.field, 'generates_auto_increment_id', false) this.$set(this.field, 'generates_auto_increment_id', false)
} }
}, },
onFieldDateRangeChange(val) { onFieldDateRangeChange (val) {
this.$set(this.field, 'date_range', val) this.$set(this.field, 'date_range', val)
if (this.field.date_range) { if (this.field.date_range) {
this.$set(this.field, 'with_time', false) this.$set(this.field, 'with_time', false)
this.$set(this.field, 'prefill_today', false) this.$set(this.field, 'prefill_today', false)
} }
}, },
onFieldWithTimeChange(val) { onFieldWithTimeChange (val) {
this.$set(this.field, 'with_time', val) this.$set(this.field, 'with_time', val)
if (this.field.with_time) { if (this.field.with_time) {
this.$set(this.field, 'date_range', false) this.$set(this.field, 'date_range', false)
} }
}, },
onFieldGenUIdChange(val) { onFieldGenUIdChange (val) {
this.$set(this.field, 'generates_uuid', val) this.$set(this.field, 'generates_uuid', val)
if (this.field.generates_uuid) { if (this.field.generates_uuid) {
this.$set(this.field, 'generates_auto_increment_id', false) this.$set(this.field, 'generates_auto_increment_id', false)
this.$set(this.field, 'hidden', true) this.$set(this.field, 'hidden', true)
} }
}, },
onFieldGenAutoIdChange(val) { onFieldGenAutoIdChange (val) {
this.$set(this.field, 'generates_auto_increment_id', val) this.$set(this.field, 'generates_auto_increment_id', val)
if (this.field.generates_auto_increment_id) { if (this.field.generates_auto_increment_id) {
this.$set(this.field, 'generates_uuid', false) this.$set(this.field, 'generates_uuid', false)
this.$set(this.field, 'hidden', true) this.$set(this.field, 'hidden', true)
} }
}, },
initRating() { initRating () {
if (this.field.is_rating && !this.field.rating_max_value) { if (this.field.is_rating && !this.field.rating_max_value) {
this.$set(this.field, 'rating_max_value', 5) this.$set(this.field, 'rating_max_value', 5)
} }
}, },
onFieldOptionsChange(val) { onFieldOptionsChange (val) {
const vals = (val) ? val.trim().split("\n") : [] const vals = (val) ? val.trim().split('\n') : []
const tmpOpts = vals.map(name => { const tmpOpts = vals.map(name => {
return { return {
name: name, name: name,
id: 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) this.$set(this.field, 'prefill_today', val)
if (this.field.prefill_today) { if (this.field.prefill_today) {
this.$set(this.field, 'prefill', 'Pre-filled with current date') this.$set(this.field, 'prefill', 'Pre-filled with current date')
@ -530,38 +531,38 @@ export default {
this.$set(this.field, 'prefill', null) this.$set(this.field, 'prefill', null)
} }
}, },
onFieldAllowCreationChange(val) { onFieldAllowCreationChange (val) {
this.$set(this.field, 'allow_creation', val) this.$set(this.field, 'allow_creation', val)
if (this.field.allow_creation) { if (this.field.allow_creation) {
this.$set(this.field, 'without_dropdown', false) this.$set(this.field, 'without_dropdown', false)
} }
}, },
onFieldWithoutDropdownChange(val) { onFieldWithoutDropdownChange (val) {
this.$set(this.field, 'without_dropdown', val) this.$set(this.field, 'without_dropdown', val)
if (this.field.without_dropdown) { if (this.field.without_dropdown) {
this.$set(this.field, 'allow_creation', false) this.$set(this.field, 'allow_creation', false)
} }
}, },
onFieldDisablePastDatesChange(val) { onFieldDisablePastDatesChange (val) {
this.$set(this.field, 'disable_past_dates', val) this.$set(this.field, 'disable_past_dates', val)
if (this.field.disable_past_dates) { if (this.field.disable_past_dates) {
this.$set(this.field, 'disable_future_dates', false) this.$set(this.field, 'disable_future_dates', false)
this.$set(this.field, 'prefill_today', false) this.$set(this.field, 'prefill_today', false)
} }
}, },
onFieldDisableFutureDatesChange(val) { onFieldDisableFutureDatesChange (val) {
this.$set(this.field, 'disable_future_dates', val) this.$set(this.field, 'disable_future_dates', val)
if (this.field.disable_future_dates) { if (this.field.disable_future_dates) {
this.$set(this.field, 'disable_past_dates', false) this.$set(this.field, 'disable_past_dates', false)
this.$set(this.field, 'prefill_today', false) this.$set(this.field, 'prefill_today', false)
} }
}, },
onFieldHelpPositionChange(val) { onFieldHelpPositionChange (val) {
if (!val) { if (!val) {
this.$set(this.field, 'help_position', 'below_input') this.$set(this.field, 'help_position', 'below_input')
} }
}, },
selectAllCountries() { selectAllCountries () {
this.$set(this.field, 'unavailable_countries', this.allCountries.map(item => { this.$set(this.field, 'unavailable_countries', this.allCountries.map(item => {
return item.code return item.code
})) }))

14
resources/js/plugins/vue-plugins.js vendored
View File

@ -1,7 +1,9 @@
import Vue from 'vue' import Notifications from 'vue3-vt-notifications'
import Meta from 'vue-meta'
import PortalVue from 'portal-vue' function registerPlugin (app) {
import Notifications from 'vt-notifications' app.use(Notifications)
app.use(Meta)
Vue.use(PortalVue) return app
Vue.use(Notifications) }
export default registerPlugin

44
resources/js/router/index.js vendored
View File

@ -1,13 +1,8 @@
import Vue from 'vue'
import store from '~/store'
import Meta from 'vue-meta'
import routes from './routes' import routes from './routes'
import Router from 'vue-router' import { createWebHistory, createRouter } from 'vue-router'
import {sync} from 'vuex-router-sync'
import * as Sentry from '@sentry/vue' import * as Sentry from '@sentry/vue'
import store from '../store'
Vue.use(Meta) // import { nextTick } from '@vue/compat'
Vue.use(Router)
// The middleware for every page of the application. // The middleware for every page of the application.
const globalMiddleware = ['locale', 'check-auth', 'notion-connection'] const globalMiddleware = ['locale', 'check-auth', 'notion-connection']
@ -18,21 +13,14 @@ const routeMiddleware = resolveMiddleware(
requireContext requireContext
) )
const router = createRouter() const router = createCustomRouter()
sync(store, router)
export default router export default router
/** function createCustomRouter () {
* Create a new router instance. const router = createRouter({
*
* @return {Router}
*/
function createRouter () {
const router = new Router({
scrollBehavior, scrollBehavior,
mode: 'history', history: createWebHistory(),
routes routes
}) })
@ -82,7 +70,7 @@ async function beforeEach (to, from, next) {
// Start the loading bar. // Start the loading bar.
if (components[components.length - 1].loading !== false) { 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. // Get the middleware for all the matched components.
@ -90,6 +78,7 @@ async function beforeEach (to, from, next) {
// Call each middleware. // Call each middleware.
callMiddleware(middleware, to, from, (...args) => { callMiddleware(middleware, to, from, (...args) => {
console.log('in', store)
// Set the application layout only if "next()" was called with no args. // Set the application layout only if "next()" was called with no args.
if (args.length === 0) { if (args.length === 0) {
if (components[0].layout) { if (components[0].layout) {
@ -113,9 +102,8 @@ async function beforeEach (to, from, next) {
* @param {Function} next * @param {Function} next
*/ */
async function afterEach (to, from, next) { async function afterEach (to, from, next) {
await router.app.$nextTick() // await nextTick()
// router.app.$loading.finish()
router.app.$loading.finish()
} }
/** /**
@ -132,9 +120,9 @@ function callMiddleware (middleware, to, from, next) {
const _next = (...args) => { const _next = (...args) => {
// Stop if "_next" was called with an argument or the stack is empty. // Stop if "_next" was called with an argument or the stack is empty.
if (args.length > 0 || stack.length === 0) { if (args.length > 0 || stack.length === 0) {
if (args.length > 0) { // if (args.length > 0) {
router.app.$loading.finish() // router.app.$loading.finish()
} // }
return next(...args) return next(...args)
} }
@ -253,7 +241,7 @@ function resolveMiddleware (requireContext) {
.map(file => .map(file =>
[file.match(/[^/]*(?=\.[^.]*$)/)[0], requireContext[file]] [file.match(/[^/]*(?=\.[^.]*$)/)[0], requireContext[file]]
).forEach(([name, middleware]) => { ).forEach(([name, middleware]) => {
middlewares[name] = middleware.default || middleware middlewares[name] = middleware.default || middleware
}) })
return middlewares return middlewares
} }

2
resources/js/router/routes.js vendored
View File

@ -71,5 +71,5 @@ export default [
{ path: '/form-templates', name: 'templates', component: page('templates/templates.vue') }, { path: '/form-templates', name: 'templates', component: page('templates/templates.vue') },
{ path: '/form-templates/:slug', name: 'templates.show', component: page('templates/show.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') }
] ]

9
resources/js/store/modules/app.js vendored Normal file
View File

@ -0,0 +1,9 @@
export const state = {
layout: 'default'
}
export const mutations = {
setLayout (state, layout) {
state.layout = layout ?? 'default'
}
}

6
vite.config.js vendored
View File

@ -1,6 +1,6 @@
import {defineConfig} from 'vite' import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin' import laravel from 'laravel-vite-plugin'
import vue from '@vitejs/plugin-vue2' import vue from '@vitejs/plugin-vue'
import { sentryVitePlugin } from '@sentry/vite-plugin' import { sentryVitePlugin } from '@sentry/vite-plugin'
const plugins = [ const plugins = [
@ -25,7 +25,7 @@ const plugins = [
}) })
] ]
if (process.env.SENTRY_AUTH_TOKEN) { if (false && process.env.SENTRY_AUTH_TOKEN) {
plugins.push(sentryVitePlugin({ plugins.push(sentryVitePlugin({
org: 'opnform', org: 'opnform',
project: 'opnform', project: 'opnform',