WIP

resources/js/app.js

@@ -4,6 +4,7 @@ import router from '~/router'
 import App from '~/components/App.vue'
 import Base from './base.js'
 import registerPlugin from './plugins'
+import { registerComponents } from './components'
 
 import '~/plugins'
 import '~/components'
@@ -16,10 +17,15 @@ const app = createApp(App)
   .mixin(Base)
 
 registerPlugin(app)
+registerComponents(app)
 
 configureCompat({
   // default everything to Vue 2 behavior
-  MODE: 2
+  MODE: 2,
+  GLOBAL_MOUNT: false,
+  COMPONENT_V_MODEL: false,
+  INSTANCE_SET: false,
+  INSTANCE_DELETE: false
 })
 
 router.app = app

resources/js/components/Modal.vue

@@ -37,7 +37,7 @@
                 </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 v-if="$slots.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'"
                   >
@@ -45,7 +45,7 @@
                   </div>
                 </div>
                 <div class="mt-3 text-center sm:mt-0 w-full">
-                  <h2 v-if="$scopedSlots.hasOwnProperty('title')"
+                  <h2 v-if="$slots.hasOwnProperty('title')"
                       class="text-2xl font-semibold text-center text-gray-900"
                   >
                     <slot name="title" />
@@ -58,7 +58,7 @@
               </div>
             </div>
 
-            <div v-if="$scopedSlots.hasOwnProperty('footer')" class="px-6 py-4 bg-gray-100 text-right">
+            <div v-if="$slots.hasOwnProperty('footer')" class="px-6 py-4 bg-gray-100 text-right">
               <slot name="footer" />
             </div>
           </div>
@@ -120,17 +120,11 @@ export default {
   },
 
   created () {
-    const closeOnEscape = (e) => {
-      if (e.key === 'Escape' && this.show) {
-        this.close()
-      }
-    }
+    document.addEventListener('keydown', this.closeOnEscape)
+  },
 
-    document.addEventListener('keydown', closeOnEscape)
-
-    this.$once('hook:unmounted', () => {
-      document.removeEventListener('keydown', closeOnEscape)
-    })
+  beforeUnmount () {
+    document.removeEventListener('keydown', this.closeOnEscape)
   },
 
   methods: {
@@ -143,6 +137,11 @@ export default {
       if (this.afterLeave) {
         this.afterLeave()
       }
+    },
+    closeOnEscape (e) {
+      if (e.key === 'Escape' && this.show) {
+        this.close()
+      }
     }
   }
 }

resources/js/components/common/Collapse.vue

@@ -15,34 +15,27 @@
         </svg>
       </div>
     </div>
-    <v-transition>
+    <VTransition>
       <div v-if="showContent" class="w-full">
         <slot />
       </div>
-    </v-transition>
+    </VTransition>
   </div>
 </template>
 
-<script>
+<script setup>
 import VTransition from './transitions/VTransition.vue'
+import { ref, defineProps, defineEmits } from 'vue'
 
-export default {
-  name: 'Collapse',
-  components: { VTransition },
-  props: {
-    defaultValue: { type: Boolean, default: false },
-    value: { type: Boolean, default: null }
-  },
-  data () {
-    return {
-      showContent: this.value ?? this.defaultValue
-    }
-  },
-  methods: {
-    trigger () {
-      this.showContent = !this.showContent
-      this.$emit('input', this.showContent)
-    }
-  }
+const props = defineProps({
+  modelValue: { type: Boolean, default: null }
+})
+
+const showContent = ref(props.modelValue)
+const emit = defineEmits()
+
+const trigger = () => {
+  showContent.value = !showContent.value
+  emit('update:modelValue', showContent.value)
 }
 </script>

resources/js/components/common/index.js

@@ -1,13 +1,12 @@
-import Vue from 'vue'
-
 import Dropdown from './Dropdown.vue'
 import Card from './Card.vue'
 import Button from './Button.vue'
-// Components that are registered globaly.
+export function registerComponents (app) {
   [
     Card,
     Button,
     Dropdown
   ].forEach(Component => {
-  Vue.component(Component.name, Component)
+    app.component(Component.name, Component)
   })
+}

resources/js/components/forms/ImageInput.vue

@@ -132,7 +132,7 @@ export default {
 
   methods: {
     clearUrl () {
-      this.$set(this.form, this.name, null)
+      this.form[this.name] = null
     },
     onUploadDragoverEvent (e) {
       this.uploadDragoverEvent = true

resources/js/components/forms/SignatureInput.vue

@@ -54,7 +54,7 @@ export default {
         this.$refs.signaturePad.clearSignature()
       } else {
         const { isEmpty, data } = this.$refs.signaturePad.saveSignature()
-        this.$set(this.form, this.name, (!isEmpty && data) ? data : null)
+        this.form[this.name] = (!isEmpty && data) ? data : null
       }
     }
   }

resources/js/components/forms/TextInput.vue

@@ -1,19 +1,14 @@
 <template>
-  <div :class="wrapperClass" :style="inputStyle">
-    <slot name="label">
-      <input-label v-if="label"
-                   :label="label"
-                   :theme="theme"
-                   :required="true"
-                   :native-for="id?id:name"
-                   :uppercase-labels="uppercaseLabels"
-      />
-    </slot>
-    <input-help v-if="help && helpPosition=='above_input'" :help="help" :theme="theme">
-      <template #help>
+  <input-wrapper
+    v-bind="$props"
+  >
+    <template #label>
+      <slot name="label" />
+    </template>
+    <template v-if="helpPosition==='above_input'" #help>
       <slot name="help" />
     </template>
-    </input-help>
+
     <input :id="id?id:name" v-model="compVal" :disabled="disabled"
            :type="nativeType"
            :pattern="pattern"
@@ -23,25 +18,34 @@
            :placeholder="placeholder" :min="min" :max="max" :maxlength="maxCharLimit"
            @change="onChange" @keydown.enter.prevent="onEnterPress"
     >
-    <!--    <input-help v-if="(help && helpPosition=='below_input') || showCharLimit" :help="help" :theme="theme">-->
+
+    <!--  TODO: fix this in the case of below input there's something off  -->
+    <!--    <input-help v-if="helpPosition==='below_input' || showCharLimit" :help="help" :theme="theme">-->
+    <!--      <template #help>-->
+    <!--        <slot name="help" />-->
+    <!--      </template>-->
     <!--      <template v-if="showCharLimit" #after-help>-->
     <!--        <small v-if="showCharLimit && maxCharLimit" :class="theme.default.help">-->
     <!--          {{ charCount }}/{{ maxCharLimit }}-->
     <!--        </small>-->
     <!--      </template>-->
     <!--    </input-help>-->
-    <has-error v-if="hasValidation" :form="form" :field="name" />
-  </div>
+
+    <template #error>
+      <slot name="error" />
+    </template>
+  </input-wrapper>
 </template>
 
 <script>
 import { inputProps, useFormInput } from './useFormInput.js'
 import InputLabel from './components/InputLabel.vue'
 import InputHelp from './components/InputHelp.vue'
+import InputWrapper from './components/InputWrapper.vue'
 
 export default {
   name: 'TextInput',
-  components: { InputHelp, InputLabel },
+  components: { InputWrapper, InputHelp, InputLabel },
 
   props: {
     ...inputProps,
@@ -54,11 +58,15 @@ export default {
     pattern: { type: String, default: null }
   },
 
-  setup (props) {
-    const { compVal, inputStyle, hasValidation, hasError } = useFormInput(props)
+  setup (props, context) {
+    const {
+      compVal,
+      inputStyle,
+      hasValidation,
+      hasError
+    } = useFormInput(props, context, props.nativeType === 'file' ? 'file-' : null)
 
     const onChange = (event) => {
-      console.log(props)
       if (props.nativeType !== 'file') return
 
       const file = event.target.files[0]
@@ -77,6 +85,11 @@ export default {
       hasValidation,
       hasError
     }
+  },
+  computed: {
+    charCount () {
+      return (this.compVal) ? this.compVal.length : 0
+    }
   }
 }
 </script>

resources/js/components/forms/ToggleSwitchInput.vue

@@ -1,36 +1,50 @@
 <template>
   <div :class="wrapperClass">
-      <small v-if="help && helpPosition=='above_input'" :class="theme.default.help" class="flex mb-1">
-        <slot name="help"><span class="field-help" v-html="help" /></slot>
-      </small>
+    <input-help v-if="help && helpPosition=='above_input'" :help="help" :theme="theme">
+      <template #help>
+        <slot name="help" />
+      </template>
+    </input-help>
     <div class="flex">
-        <v-switch :id="id?id:name" v-model="compVal" class="inline-block mr-2" :disabled="disabled" :name="name" @input="$emit('input',$event)" />
+      <v-switch :id="id?id:name" v-model="compVal" class="inline-block mr-2" :disabled="disabled" />
       <slot name="label">
         <span>{{ label }} <span v-if="required" class="text-red-500 required-dot">*</span></span>
       </slot>
     </div>
-      <small v-if="help && helpPosition=='below_input'" :class="theme.default.help">
-        <slot name="help"><span class="field-help" v-html="help" /></slot>
-      </small>
+    <input-help v-if="help && helpPosition=='below_input'" :help="help" :theme="theme">
+      <template #help>
+        <slot name="help" />
+      </template>
+    </input-help>
     <has-error v-if="hasValidation" :form="form" :field="name" />
   </div>
 </template>
 
 <script>
-  import inputMixin from '~/mixins/forms/input.js'
-  
+import { inputProps, useFormInput } from './useFormInput.js'
+import InputHelp from './components/InputHelp.vue'
 import VSwitch from './components/VSwitch.vue'
 export default {
   name: 'ToggleSwitchInput',
 
-    components: { VSwitch },
-    mixins: [inputMixin],
-    props: {},
+  components: { InputHelp, VSwitch },
+  props: {
+    ...inputProps
+  },
+
+  setup (props, context) {
+    const { compVal, inputStyle, hasValidation, hasError } = useFormInput(props, context)
+
+    return {
+      compVal,
+      inputStyle,
+      hasValidation,
+      hasError
+    }
+  },
 
   mounted () {
     this.compVal = !!this.compVal
-      this.$emit('input', !!this.compVal)
   }
 }
 </script>
-  

resources/js/components/forms/components/InputHelp.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex mb-1">
+  <div class="flex mb-1 input-help">
     <small :class="theme.default.help" class="grow flex">
       <slot name="help"><span class="field-help" v-html="help" /></slot>
     </small>
@@ -15,7 +15,7 @@ export default {
 
   props: {
     theme: { type: Object, required: true },
-    help: { type: String, required: true }
+    help: { type: String, required: false }
   }
 }
 </script>

resources/js/components/forms/components/InputLabel.vue

@@ -1,9 +1,12 @@
 <template>
   <label :for="nativeFor"
+         class="input-label"
          :class="[theme.default.label,{'uppercase text-xs': uppercaseLabels, 'text-sm': !uppercaseLabels}]"
   >
+    <slot>
       {{ label }}
       <span v-if="required" class="text-red-500 required-dot">*</span>
+    </slot>
   </label>
 </template>
 

resources/js/components/forms/components/InputWrapper.vue

@@ -0,0 +1,47 @@
+<template>
+  <div :class="wrapperClass" :style="inputStyle">
+    <slot name="label">
+      <input-label v-if="label"
+                   :label="label"
+                   :theme="theme"
+                   :required="true"
+                   :native-for="id?id:name"
+                   :uppercase-labels="uppercaseLabels"
+      />
+    </slot>
+    <slot v-if="help && helpPosition==='above_input'" name="help">
+      <input-help :help="help" :theme="theme" />
+    </slot>
+    <slot />
+    <slot v-if="help && helpPosition==='below_input'" name="help">
+      <input-help :help="help" :theme="theme" />
+    </slot>
+    <slot name="error">
+      <has-error v-if="hasValidation" :form="form" :field="name" />
+    </slot>
+  </div>
+</template>
+
+<script>
+import InputLabel from './InputLabel.vue'
+import InputHelp from './InputHelp.vue'
+
+export default {
+  name: 'InputWrapper',
+  components: { InputLabel, InputHelp },
+
+  props: {
+    id: { type: String, required: false },
+    name: { type: String, required: false },
+    theme: { type: Object, required: true },
+    wrapperClass: { type: String, required: false },
+    inputStyle: { type: Object, required: false },
+    help: { type: String, required: false },
+    label: { type: String, required: false },
+    helpPosition: { type: String, default: 'below_input' },
+    uppercaseLabels: { type: Boolean, default: true },
+    hasValidation: { type: Boolean, default: true },
+    form: { type: Object, required: false }
+  }
+}
+</script>

resources/js/components/forms/components/VSwitch.vue

@@ -1,45 +1,23 @@
 <template>
-  <div @click="onClick">
-    <div class="inline-flex items-center h-6 w-12 p-1 bg-gray-300 border rounded-full cursor-pointer focus:outline-none transition-all transform ease-in-out duration-100" :class="{'bg-nt-blue': internalValue}">
-      <div class="inline-block h-4 w-4 rounded-full bg-white shadow transition-all transform ease-in-out duration-150 rounded-2xl scale-100" :class="{'translate-x-5.5': internalValue}" />
+  <div role="button" @click="onClick">
+    <div class="inline-flex items-center h-6 w-12 p-1 bg-gray-300 border rounded-full cursor-pointer focus:outline-none transition-all transform ease-in-out duration-100" :class="{'bg-nt-blue': modelValue}">
+      <div class="inline-block h-4 w-4 rounded-full bg-white shadow transition-all transform ease-in-out duration-150 rounded-2xl scale-100" :class="{'translate-x-5.5': modelValue}" />
     </div>
   </div>
 </template>
 
-<script>
-export default {
-  name: 'VSwitch',
-  components: { },
+<script setup>
+import { defineProps, defineEmits } from 'vue'
 
-  props: {
-    value: { type: Boolean, default: false },
+const { modelValue, disabled } = defineProps({
+  modelValue: { type: Boolean, default: false },
   disabled: { type: Boolean, default: false }
-  },
+})
+const emit = defineEmits(['update:modelValue'])
 
-  data () {
-    return {
-      internalValue: this.value
-    }
-  },
-
-  computed: {},
-
-  watch: {
-    value (val) {
-      this.internalValue = val
-    }
-  },
-
-  mounted () {
-    this.internalValue = this.value
-  },
-
-  methods: {
-    onClick () {
-      if(this.disabled) return
-      this.$emit('input', !this.internalValue)
-      this.internalValue = !this.internalValue
-    }
-  }
+const onClick = () => {
+  if (disabled) return
+  console.log('ok emiting', !modelValue)
+  emit('update:modelValue', !modelValue)
 }
 </script>

resources/js/components/forms/index.js

@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import { defineAsyncComponent } from 'vue'
 
 import HasError from './validation/HasError.vue'
 import AlertError from './validation/AlertError.vue'
@@ -16,7 +16,7 @@ import RatingInput from './RatingInput.vue'
 import FlatSelectInput from './FlatSelectInput.vue'
 import ToggleSwitchInput from './ToggleSwitchInput.vue'
 
-// Components that are registered globaly.
+export function registerComponents (app) {
   [
     HasError,
     AlertError,
@@ -34,11 +34,20 @@ import ToggleSwitchInput from './ToggleSwitchInput.vue'
     FlatSelectInput,
     ToggleSwitchInput
   ].forEach(Component => {
-  Vue.component(Component.name, Component)
+    app.component(Component.name, Component)
   })
 
-// Lazy load some heavy component
-Vue.component('SignatureInput', () => import('./SignatureInput.vue'))
-Vue.component('RichTextAreaInput', () => import('./RichTextAreaInput.vue'))
-Vue.component('DateInput', () => import('./DateInput.vue'))
-Vue.component('PhoneInput', () => import('./PhoneInput.vue'))
+  // Register async components
+  app.component('SignatureInput', defineAsyncComponent(() =>
+    import('./SignatureInput.vue')
+  ))
+  app.component('RichTextAreaInput', defineAsyncComponent(() =>
+    import('./RichTextAreaInput.vue')
+  ))
+  app.component('PhoneInput', defineAsyncComponent(() =>
+    import('./PhoneInput.vue')
+  ))
+  app.component('DateInput', defineAsyncComponent(() =>
+    import('./DateInput.vue')
+  ))
+}

resources/js/components/forms/useFormInput.js

@@ -1,4 +1,4 @@
-import { ref, computed, watch, defineEmits } from 'vue'
+import { ref, computed, watch } from 'vue'
 import { themes } from '~/config/form-themes.js'
 
 export const inputProps = {
@@ -18,7 +18,7 @@ export const inputProps = {
   wrapperClass: { type: String, default: 'relative mb-3' }
 }
 
-export function useFormInput (props) {
+export function useFormInput (props, context, formPrefixKey = null) {
   const content = ref(props.modelValue)
 
   const inputStyle = computed(() => {
@@ -38,13 +38,13 @@ export function useFormInput (props) {
   const compVal = computed({
     get: () => {
       if (props.form) {
-        return props.form[props.name]
+        return props.form[(formPrefixKey || '') + props.name]
       }
       return content.value
     },
     set: (val) => {
       if (props.form) {
-        props.form[props.name] = val
+        props.form[(formPrefixKey || '') + props.name] = val
       } else {
         content.value = val
       }
@@ -53,7 +53,7 @@ export function useFormInput (props) {
         props.form.errors.clear(props.name)
       }
 
-      defineEmits('update:modelValue', compVal.value)
+      context.emit('update:modelValue', compVal.value)
     }
   })
 

resources/js/components/index.js

@@ -1,21 +1,24 @@
-import './common'
-import './forms'
+import { defineAsyncComponent } from 'vue'
+import { registerComponents as registerCommonComponents } from './common'
+import { registerComponents as registerFormComponents } from './forms'
 
-import Vue from 'vue'
 import Child from './Child.vue'
 import Modal from './Modal.vue'
-
 import Loader from './common/Loader.vue'
 
-// Components that are registered globaly.
-[
-  Child,
-  Modal,
-  Loader
-].forEach(Component => {
-  Vue.component(Component.name, Component)
+export function registerComponents (app) {
+  [Child, Modal, Loader].forEach(Component => {
+    app.component(Component.name, Component)
   })
 
-// Lazy load some heavy component
-Vue.component('FormEditor', () => import('./open/forms/components/FormEditor.vue'))
-Vue.component('NotionPage', () => import('./open/NotionPage.vue'))
+  registerCommonComponents(app)
+  registerFormComponents(app)
+
+  // Register async components
+  app.component('FormEditor', defineAsyncComponent(() =>
+    import('./open/forms/components/FormEditor.vue')
+  ))
+  app.component('NotionPage', defineAsyncComponent(() =>
+    import('./open/NotionPage.vue')
+  ))
+}

resources/js/components/open/forms/components/AdvancedFormUrlSettings.vue

@@ -1,5 +1,5 @@
 <template>
-  <collapse class="py-5 w-full" :default-value="false">
+  <collapse class="py-5 w-full" :model-value="false">
     <template #title>
       <div class="flex">
         <h3 class="font-semibold block text-lg">
@@ -12,8 +12,8 @@
     <toggle-switch-input :value="value.hide_title" name="hide_title" class="mt-4"
                          label="Hide Form Title"
                          :disabled="form.hide_title===true"
-        @input="onChangeHideTitle"
                          :help="hideTitleHelp"
+                         @input="onChangeHideTitle"
     />
     <toggle-switch-input :value="value.auto_submit" name="auto_submit" class="mt-4"
                          label="Auto Submit Form"

resources/js/components/open/forms/components/FormFieldsEditor.vue

@@ -205,7 +205,7 @@ export default {
     formFields: {
       deep: true,
       handler () {
-        this.$set(this.form, 'properties', this.formFields)
+        this.form.properties = this.formFields
       }
     },
 
@@ -228,21 +228,21 @@ export default {
 
   methods: {
     onChangeName (field, newName) {
-      this.$set(field, 'name', newName)
+      field.name = newName
     },
     toggleHidden (field) {
-      this.$set(field, 'hidden', !field.hidden)
+      field.hidden = !field.hidden
       if (field.hidden) {
-        this.$set(field, 'required', false)
+        field.required = false
       } else {
-        this.$set(field, 'generates_uuid', false)
-        this.$set(field, 'generates_auto_increment_id', false)
+        field.generates_uuid = false
+        field.generates_auto_increment_id = false
       }
     },
     toggleRequired (field) {
-      this.$set(field, 'required', !field.required)
+      field.required = !field.required
       if (field.required) {
-        this.$set(field, 'hidden', false)
+        field.hidden = false
       }
     },
     getDefaultFields () {
@@ -283,7 +283,7 @@ export default {
           return field
         })
       }
-      this.$set(this.form, 'properties', this.formFields)
+      this.form.properties = this.formFields
     },
     generateUUID () {
       let d = new Date().getTime()// Timestamp
@@ -318,7 +318,7 @@ export default {
     removeBlock (blockIndex) {
       const newFields = clonedeep(this.formFields)
       newFields.splice(blockIndex, 1)
-      this.$set(this, 'formFields', newFields)
+      this.formFields = newFields
       this.closeSidebar()
     },
     closeSidebar () {

resources/js/components/open/forms/components/FormSubmissions.vue

@@ -1,6 +1,7 @@
 <template>
   <div
-    class="my-4 w-full mx-auto">
+    class="my-4 w-full mx-auto"
+  >
     <h3 class="font-semibold mb-4 text-xl">
       Form Submissions
     </h3>
@@ -19,17 +20,21 @@
 
       <div class="px-4">
         <template v-if="properties.length > 0">
-          <h4 class="font-bold mb-2">Form Fields</h4>
+          <h4 class="font-bold mb-2">
+            Form Fields
+          </h4>
           <div v-for="field in properties" :key="field.id" class="p-2 border">
             {{ field.name }}
-            <v-switch v-model="displayColumns[field.id]" @input="onChangeDisplayColumns" class="float-right"/>
+            <v-switch v-model="displayColumns[field.id]" class="float-right" @input="onChangeDisplayColumns" />
           </div>
         </template>
         <template v-if="removed_properties.length > 0">
-          <h4 class="font-bold mb-2 mt-4">Removed Fields</h4>
+          <h4 class="font-bold mb-2 mt-4">
+            Removed Fields
+          </h4>
           <div v-for="field in removed_properties" :key="field.id" class="p-2 border">
             {{ field.name }}
-            <v-switch v-model="displayColumns[field.id]" @input="onChangeDisplayColumns" class="float-right"/>
+            <v-switch v-model="displayColumns[field.id]" class="float-right" @input="onChangeDisplayColumns" />
           </div>
         </template>
       </div>
@@ -42,10 +47,16 @@
           <text-input class="w-64" :form="searchForm" name="search" placeholder="Search..." />
         </div>
         <div class="font-semibold flex gap-4">
-          <p v-if="form && !isLoading && formInitDone" class="float-right text-xs uppercase mb-2"> <a
-            href="javascript:void(0);" class="text-gray-500" @click="showColumnsModal=true">Display columns</a></p>
-          <p v-if="form && !isLoading && tableData.length > 0" class="text-right text-xs uppercase"><a
-            :href="exportUrl" target="_blank">Export as CSV</a></p>
+          <p v-if="form && !isLoading && formInitDone" class="float-right text-xs uppercase mb-2">
+            <a
+              href="javascript:void(0);" class="text-gray-500" @click="showColumnsModal=true"
+            >Display columns</a>
+          </p>
+          <p v-if="form && !isLoading && tableData.length > 0" class="text-right text-xs uppercase">
+            <a
+              :href="exportUrl" target="_blank"
+            >Export as CSV</a>
+          </p>
         </div>
       </div>
 
@@ -62,8 +73,7 @@
           :loading="isLoading"
           @resize="dataChanged()"
           @deleted="onDeleteRecord()"
-        >
-        </open-table>
+        />
       </scroll-shadow>
     </div>
   </div>
@@ -75,7 +85,7 @@ import Fuse from 'fuse.js'
 import Form from 'vform'
 import ScrollShadow from '../../../common/ScrollShadow.vue'
 import OpenTable from '../../tables/OpenTable.vue'
-import clonedeep from "clone-deep";
+import clonedeep from 'clone-deep'
 import VSwitch from '../../../forms/components/VSwitch.vue'
 
 export default {
@@ -98,19 +108,6 @@ export default {
       })
     }
   },
-  mounted() {
-    this.initFormStructure()
-    this.getSubmissionsData()
-  },
-  watch: {
-    form() {
-      if (this.form === null) {
-        return
-      }
-      this.initFormStructure()
-      this.getSubmissionsData()
-    }
-  },
   computed: {
     form: {
       get () {
@@ -129,7 +126,7 @@ export default {
     filteredData () {
       if (!this.tableData) return []
 
-      let filteredData = clonedeep(this.tableData)
+      const filteredData = clonedeep(this.tableData)
 
       if (this.searchForm.search === '' || this.searchForm.search === null) {
         return filteredData
@@ -145,6 +142,19 @@ export default {
       })
     }
   },
+  watch: {
+    form () {
+      if (this.form === null) {
+        return
+      }
+      this.initFormStructure()
+      this.getSubmissionsData()
+    }
+  },
+  mounted () {
+    this.initFormStructure()
+    this.getSubmissionsData()
+  },
   methods: {
     initFormStructure () {
       if (!this.form || this.formInitDone) {
@@ -163,12 +173,12 @@ export default {
         // Add a "created at" column
         const columns = clonedeep(this.form.properties)
         columns.push({
-          "name": "Created at",
-          "id": "created_at",
-          "type": "date",
-          "width": 140,
+          name: 'Created at',
+          id: 'created_at',
+          type: 'date',
+          width: 140
         })
-        this.$set(this.form, 'properties', columns)
+        this.form.properties = columns
       }
       this.formInitDone = true
 
@@ -216,16 +226,15 @@ export default {
     },
     onChangeDisplayColumns () {
       window.localStorage.setItem('display-columns-formid-' + this.form.id, JSON.stringify(this.displayColumns))
-      const final_properties = this.properties.concat(this.removed_properties).filter((field) => {
+      this.form.properties = this.properties.concat(this.removed_properties).filter((field) => {
         return this.displayColumns[field.id] === true
       })
-      this.$set(this.form, 'properties', final_properties)
     },
     onDeleteRecord () {
       this.fullyLoaded = false
       this.tableData = []
       this.getSubmissionsData()
     }
-  },
+  }
 }
 </script>

resources/js/components/open/forms/components/form-components/AddFormBlockSidebar.vue

@@ -1,13 +1,14 @@
 <template>
   <div v-if="showSidebar"
-        class="absolute shadow-lg shadow-blue-800/30 top-0 h-[calc(100vh-45px)] right-0 lg:shadow-none lg:relative bg-white w-full md:w-1/2 lg:w-2/5 border-l overflow-y-scroll md:max-w-[20rem] flex-shrink-0">
-
+       class="absolute shadow-lg shadow-blue-800/30 top-0 h-[calc(100vh-45px)] right-0 lg:shadow-none lg:relative bg-white w-full md:w-1/2 lg:w-2/5 border-l overflow-y-scroll md:max-w-[20rem] flex-shrink-0"
+  >
     <div class="p-4 border-b sticky top-0 z-10 bg-white">
       <div class="flex">
         <button class="text-gray-500 hover:text-gray-900 cursor-pointer" @click.prevent="closeSidebar">
           <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 class="font-semibold inline ml-2 truncate flex-grow truncate">
@@ -18,7 +19,9 @@
 
     <div class="py-2 px-4">
       <div>
-        <p class="text-gray-500 uppercase text-xs font-semibold mb-2">Input Blocks</p>
+        <p class="text-gray-500 uppercase text-xs font-semibold mb-2">
+          Input Blocks
+        </p>
         <div class="grid grid-cols-2 gap-2">
           <div v-for="(block, i) in inputBlocks" :key="block.name"
                class="bg-gray-50 border hover:bg-gray-100 dark:bg-gray-900 rounded-md dark:hover:bg-gray-800 py-2 flex flex-col"
@@ -26,14 +29,19 @@
           >
             <div class="mx-auto">
               <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24"
-                  stroke="currentColor" stroke-width="2" v-html="block.icon"></svg>
+                   stroke="currentColor" stroke-width="2" v-html="block.icon"
+              />
             </div>
-            <p class="w-full text-xs text-gray-500 uppercase text-center font-semibold mt-1">{{ block.title }}</p>
+            <p class="w-full text-xs text-gray-500 uppercase text-center font-semibold mt-1">
+              {{ block.title }}
+            </p>
           </div>
         </div>
       </div>
       <div class="border-t mt-6">
-        <p class="text-gray-500 uppercase text-xs font-semibold mb-2 mt-6">Layout Blocks</p>
+        <p class="text-gray-500 uppercase text-xs font-semibold mb-2 mt-6">
+          Layout Blocks
+        </p>
         <div class="grid grid-cols-2 gap-2">
           <div v-for="(block, i) in layoutBlocks" :key="block.name"
                class="bg-gray-50 border hover:bg-gray-100 dark:bg-gray-900 rounded-md dark:hover:bg-gray-800 py-2 flex flex-col"
@@ -41,9 +49,12 @@
           >
             <div class="mx-auto">
               <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24"
-                  stroke="currentColor" stroke-width="2" v-html="block.icon"></svg>
+                   stroke="currentColor" stroke-width="2" v-html="block.icon"
+              />
             </div>
-            <p class="w-full text-xs text-gray-500 uppercase text-center font-semibold mt-1">{{ block.title }}</p>
+            <p class="w-full text-xs text-gray-500 uppercase text-center font-semibold mt-1">
+              {{ block.title }}
+            </p>
           </div>
         </div>
       </div>
@@ -67,84 +78,84 @@ export default {
         {
           name: 'text',
           title: 'Text Input',
-          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h7"/>',
+          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h7"/>'
         },
         {
           name: 'date',
           title: 'Date Input',
-          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>',
+          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>'
         },
         {
           name: 'url',
           title: 'URL Input',
-          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>',
+          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>'
         },
         {
           name: 'phone_number',
           title: 'Phone Input',
-          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>',
+          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>'
         },
         {
           name: 'email',
           title: 'Email Input',
-          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"/>',
+          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"/>'
         },
         {
           name: 'checkbox',
           title: 'Checkbox Input',
-          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>',
+          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>'
         },
         {
           name: 'select',
           title: 'Select Input',
-          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M8 9l4-4 4 4m0 6l-4 4-4-4"/>',
+          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M8 9l4-4 4 4m0 6l-4 4-4-4"/>'
         },
         {
           name: 'multi_select',
           title: 'Multi-select Input',
-          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M8 9l4-4 4 4m0 6l-4 4-4-4"/>',
+          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M8 9l4-4 4 4m0 6l-4 4-4-4"/>'
         },
         {
           name: 'number',
           title: 'Number Input',
-          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"/>',
+          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"/>'
         },
         {
           name: 'files',
           title: 'File Input',
-          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />',
+          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />'
         },
         {
           name: 'signature',
           title: 'Signature Input',
-          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125" />',
+          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125" />'
         }
       ],
       layoutBlocks: [
         {
           name: 'nf-text',
           title: 'Text Block',
-          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h8m-8 6h16" />',
+          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h8m-8 6h16" />'
         },
         {
           name: 'nf-page-break',
           title: 'Page-break Block',
-          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />',
+          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />'
         },
         {
           name: 'nf-divider',
           title: 'Divider Block',
-          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4" />',
+          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4" />'
         },
         {
           name: 'nf-image',
           title: 'Image Block',
-          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />',
+          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />'
         },
         {
           name: 'nf-code',
           title: 'Code Block',
-          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />',
+          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />'
         }
       ]
     }
@@ -170,22 +181,22 @@ export default {
 
     defaultBlockNames () {
       return {
-        'text': 'Your name',
-        'date': 'Date',
-        'url': 'Link',
-        'phone_number': 'Phone Number',
-        'number': 'Number',
-        'email': 'Email',
-        'checkbox': 'Checkbox',
-        'select': 'Select',
-        'multi_select': 'Multi Select',
-        'files': 'Files',
-        'signature': 'Signature',
+        text: 'Your name',
+        date: 'Date',
+        url: 'Link',
+        phone_number: 'Phone Number',
+        number: 'Number',
+        email: 'Email',
+        checkbox: 'Checkbox',
+        select: 'Select',
+        multi_select: 'Multi Select',
+        files: 'Files',
+        signature: 'Signature',
         'nf-text': 'Text Block',
         'nf-page-break': 'Page Break',
         'nf-divider': 'Divider',
         'nf-image': 'Image',
-        'nf-code': 'Code Block',
+        'nf-code': 'Code Block'
       }
     }
   },
@@ -213,18 +224,18 @@ export default {
       newBlock.id = this.generateUUID()
       newBlock.hidden = false
       if (['select', 'multi_select'].includes(this.blockForm.type)) {
-        newBlock[this.blockForm.type] = {'options': []}
+        newBlock[this.blockForm.type] = { options: [] }
       }
       newBlock.help_position = 'below_input'
       if (this.selectedFieldIndex === null || this.selectedFieldIndex === undefined) {
         const newFields = clonedeep(this.form.properties)
         newFields.push(newBlock)
-        this.$set(this.form, 'properties', newFields)
+        this.form.properties = newFields
         this.$store.commit('open/working_form/openSettingsForField', this.form.properties.length - 1)
       } else {
         const newFields = clonedeep(this.form.properties)
         newFields.splice(this.selectedFieldIndex + 1, 0, newBlock)
-        this.$set(this.form, 'properties', newFields)
+        this.form.properties = newFields
         this.$store.commit('open/working_form/openSettingsForField', this.selectedFieldIndex + 1)
       }
       this.reset()

resources/js/components/open/forms/components/form-components/FormAboutSubmission.vue

@@ -1,13 +1,15 @@
 <template>
-  <collapse class="p-4 w-full border-b" v-model="isCollapseOpen">
+  <collapse v-model="isCollapseOpen" class="p-4 w-full border-b">
     <template #title>
       <h3 class="font-semibold text-lg relative">
         <svg
           class="h-5 w-5 inline mr-2 -mt-0.5 transition-colors" :class="{'text-blue-600':isCollapseOpen, 'text-gray-500':!isCollapseOpen}"
-          viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+          viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"
+        >
           <path
             d="M4.83333 6.08333H9M4.83333 9H11.5M4.83333 14V15.9463C4.83333 16.3903 4.83333 16.6123 4.92436 16.7263C5.00352 16.8255 5.12356 16.8832 5.25045 16.8831C5.39636 16.8829 5.56973 16.7442 5.91646 16.4668L7.90434 14.8765C8.31043 14.5517 8.51347 14.3892 8.73957 14.2737C8.94017 14.1712 9.15369 14.0963 9.37435 14.051C9.62306 14 9.88308 14 10.4031 14H12.5C13.9001 14 14.6002 14 15.135 13.7275C15.6054 13.4878 15.9878 13.1054 16.2275 12.635C16.5 12.1002 16.5 11.4001 16.5 10V5.5C16.5 4.09987 16.5 3.3998 16.2275 2.86502C15.9878 2.39462 15.6054 2.01217 15.135 1.77248C14.6002 1.5 13.9001 1.5 12.5 1.5H5.5C4.09987 1.5 3.3998 1.5 2.86502 1.77248C2.39462 2.01217 2.01217 2.39462 1.77248 2.86502C1.5 3.3998 1.5 4.09987 1.5 5.5V10.6667C1.5 11.4416 1.5 11.8291 1.58519 12.147C1.81635 13.0098 2.49022 13.6836 3.35295 13.9148C3.67087 14 4.05836 14 4.83333 14Z"
-            stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+            stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"
+          />
         </svg>
 
         About Submissions
@@ -73,7 +75,8 @@
           <small>If the submission has the same value(s) as a previous one for the selected
             column(s), we will update it, instead of creating a new one.
             <a href="#"
-               @click.prevent="$crisp.push(['do', 'helpdesk:article:open', ['en', 'how-to-update-a-page-on-form-submission-1t1jwmn']])">More
+               @click.prevent="$crisp.push(['do', 'helpdesk:article:open', ['en', 'how-to-update-a-page-on-form-submission-1t1jwmn']])"
+            >More
               info here.</a>
           </small>
         </div>
@@ -168,7 +171,7 @@ export default {
   data () {
     return {
       submissionOptions: {},
-      isCollapseOpen: true,
+      isCollapseOpen: true
     }
   },
 
@@ -215,14 +218,14 @@ export default {
       deep: true,
       handler: function (val) {
         if (val.submissionMode === 'default') {
-          this.$set(this.form, 'redirect_url', null)
+          this.form.redirect_url = null
         }
 
         if (val.databaseAction === 'create') {
-          this.$set(this.form, 'database_fields_update', null)
+          this.form.database_fields_update = null
+        }
       }
     }
   }
-  },
 }
 </script>

resources/js/components/open/forms/components/form-components/FormCustomization.vue

@@ -1,5 +1,5 @@
 <template>
-  <collapse class="p-4 w-full border-b" v-model="isCollapseOpen">
+  <collapse v-model="isCollapseOpen" class="p-4 w-full border-b">
     <template #title>
       <h3 class="font-semibold text-lg">
         <svg class="h-5 w-5 inline mr-2 -mt-1 transition-colors" :class="{'text-blue-600':isCollapseOpen, 'text-gray-500':!isCollapseOpen}" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -119,7 +119,7 @@ export default {
 
   methods: {
     onChangeConfettiOnSubmission (val) {
-      this.$set(this.form, 'confetti_on_submission', val)
+      this.form.confetti_on_submission = val
       if (this.isMounted && val) {
         this.playConfetti()
       }
@@ -127,7 +127,7 @@ export default {
     openChat () {
       window.$crisp.push(['do', 'chat:show'])
       window.$crisp.push(['do', 'chat:open'])
-    },
+    }
   }
 }
 </script>

resources/js/components/open/forms/components/form-components/components/FormNotificationsSubmissionConfirmation.vue

@@ -32,8 +32,8 @@
                            label="Send submission confirmation" :help="emailSubmissionConfirmationHelp"
       />
       <template v-if="form.send_submission_confirmation">
-        <text-input name="confirmation_reply_to"
-                    v-model="form.notification_settings.confirmation_reply_to" class="mt-4"
+        <text-input v-model="form.notification_settings.confirmation_reply_to"
+                    name="confirmation_reply_to" class="mt-4"
                     label="Confirmation Reply To" help="help"
         >
           <template #help>
@@ -102,7 +102,7 @@ export default {
   watch: {
     emailSubmissionConfirmationField (val) {
       if (val === null) {
-        this.$set(this.form, 'send_submission_confirmation', false)
+        this.form.send_submission_confirmation = false
       }
     }
   },

resources/js/components/open/forms/components/form-logic-components/FormBlockLogicEditor.vue

@@ -95,7 +95,7 @@ export default {
         actions: []
       },
       showCopyFormModal: false,
-      copyFrom: null,
+      copyFrom: null
     }
   },
 
@@ -149,7 +149,7 @@ export default {
   watch: {
     logic: {
       handler () {
-        this.$set(this.field, 'logic', this.logic)
+        this.field.logic = this.logic
       },
       deep: true
     },
@@ -164,34 +164,34 @@ export default {
     },
     'field.required': 'cleanConditions',
     'field.disabled': 'cleanConditions',
-    'field.hidden': 'cleanConditions',
+    'field.hidden': 'cleanConditions'
   },
 
   mounted () {
     if (!this.field.hasOwnProperty('logic')) {
-      this.$set(this.field, 'logic', this.logic)
+      this.field.logic = this.logic
     }
   },
 
   methods: {
     clearAll () {
-      this.$set(this.logic, 'conditions', null)
-      this.$set(this.logic, 'actions', [])
+      this.logic.conditions = null
+      this.logic.actions = []
       this.refreshActions()
     },
     onActionInput () {
       if (this.logic.actions.length >= 2) {
         if (this.logic.actions[1] === 'require-answer' && this.logic.actions[0] === 'hide-block') {
-          this.$set(this.logic, 'actions', ['require-answer'])
+          this.logic.actions = ['require-answer']
         } else if (this.logic.actions[1] === 'hide-block' && this.logic.actions[0] === 'require-answer') {
-          this.$set(this.logic, 'actions', ['hide-block'])
+          this.logic.actions = ['hide-block']
         }
         this.refreshActions()
       }
     },
     cleanConditions () {
-      const availableActions = this.actionOptions.map(function(op){ return op.value });
-      this.$set(this.logic, 'actions', availableActions.filter(value => this.logic.actions.includes(value)))
+      const availableActions = this.actionOptions.map(function (op) { return op.value })
+      this.logic.actions = availableActions.filter(value => this.logic.actions.includes(value))
       this.refreshActions()
     },
     refreshActions () {
@@ -203,7 +203,7 @@ export default {
           return property.id === this.copyFrom
         })
         if (property && property.logic) {
-          this.$set(this, 'logic', clonedeep(property.logic))
+          this.logic = clonedeep(property.logic)
           this.cleanConditions()
         }
       }

resources/js/components/open/forms/fields/FormBlockOptionsModal.vue

@@ -100,14 +100,15 @@
       </div>
       <div v-else-if="field.type == 'nf-code'" class="-mx-4 sm:-mx-6 p-5 border-b border-t">
         <code-input name="content" class="mt-4 h-36" :form="field" label="Content"
-              help="You can add any html code, including iframes" />
+                    help="You can add any html code, including iframes"
+        />
       </div>
       <div v-else class="-mx-4 sm:-mx-6 p-5 border-b border-t">
         <p>No settings found.</p>
       </div>
 
       <!--  Logic Block -->
-      <form-block-logic-editor :form="form" :field="field" v-model="form"/>
+      <form-block-logic-editor v-model="form" :form="form" :field="field" />
 
       <div class="pt-5 flex justify-end">
         <v-button color="white" @click="close">
@@ -123,8 +124,8 @@
 
 <script>
 import ProTag from '../../../common/ProTag.vue'
-const FormBlockLogicEditor = () => import('../components/form-logic-components/FormBlockLogicEditor.vue')
 import CodeInput from '../../../forms/CodeInput.vue'
+const FormBlockLogicEditor = () => import('../components/form-logic-components/FormBlockLogicEditor.vue')
 
 export default {
   name: 'FormBlockOptionsModal',
@@ -146,7 +147,7 @@ export default {
   data () {
     return {
       editorToolbarCustom: [
-        ['bold', 'italic', 'underline', 'link'],
+        ['bold', 'italic', 'underline', 'link']
       ]
     }
   },
@@ -157,7 +158,7 @@ export default {
     'field.width': {
       handler (val) {
         if (val === undefined || val === null) {
-          this.$set(this.field, 'width', 'full')
+          this.field.width = 'full'
         }
       },
       immediate: true
@@ -165,7 +166,7 @@ export default {
     'field.align': {
       handler (val) {
         if (val === undefined || val === null) {
-          this.$set(this.field, 'align', 'left')
+          this.field.align = 'left'
         }
       },
       immediate: true
@@ -189,14 +190,14 @@ export default {
       this.$emit('duplicate-block', this.field)
     },
     onFieldHiddenChange (val) {
-      this.$set(this.field, 'hidden', val)
+      this.field.hidden = val
       if (this.field.hidden) {
-        this.$set(this.field, 'required', false)
+        this.field.required = false
       }
     },
     onFieldHelpPositionChange (val) {
       if (!val) {
-        this.$set(this.field, 'help_position', 'below_input')
+        this.field.help_position = 'below_input'
       }
     }
   }

resources/js/components/open/forms/fields/FormFieldEditSidebar.vue

@@ -1,11 +1,13 @@
 <template>
   <div v-if="showSidebar"
-       class="absolute shadow-lg shadow-blue-800/30 top-0 h-[calc(100vh-45px)] right-0 lg:shadow-none lg:relative bg-white w-full md:w-1/2 lg:w-2/5 border-l overflow-y-scroll md:max-w-[20rem] flex-shrink-0 overflow-x-hidden">
+       class="absolute shadow-lg shadow-blue-800/30 top-0 h-[calc(100vh-45px)] right-0 lg:shadow-none lg:relative bg-white w-full md:w-1/2 lg:w-2/5 border-l overflow-y-scroll md:max-w-[20rem] flex-shrink-0 overflow-x-hidden"
+  >
     <div class="p-4 border-b sticky top-0 z-10 bg-white">
       <button v-if="!field" class="text-gray-500 hover:text-gray-900 cursor-pointer" @click.prevent="closeSidebar">
         <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>
       <template v-else>
@@ -13,7 +15,8 @@
           <button class="text-gray-500 hover:text-gray-900 cursor-pointer" @click.prevent="closeSidebar">
             <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 class="font-semibold inline ml-2 truncate flex-grow truncate">
@@ -22,29 +25,36 @@
         </div>
         <div class="flex mt-2">
           <v-button color="light-gray" class="border-r-0 rounded-r-none text-xs hover:bg-red-50" size="small"
-                    @click="removeBlock">
+                    @click="removeBlock"
+          >
             <svg class="h-4 w-4 text-red-600 inline mr-1 -mt-1" viewBox="0 0 24 24" fill="none"
-                 xmlns="http://www.w3.org/2000/svg">
+                 xmlns="http://www.w3.org/2000/svg"
+            >
               <path
                 d="M3 6H5M5 6H21M5 6V20C5 20.5304 5.21071 21.0391 5.58579 21.4142C5.96086 21.7893 6.46957 22 7 22H17C17.5304 22 18.0391 21.7893 18.4142 21.4142C18.7893 21.0391 19 20.5304 19 20V6H5ZM8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M10 11V17M14 11V17"
-                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+              />
             </svg>
             Remove
           </v-button>
           <v-button size="small" class="text-xs" :class="{
             'rounded-none border-r-0':!isBlockField && typeCanBeChanged,
             'rounded-l-none':isBlockField || !typeCanBeChanged
-          }" color="light-gray" @click="duplicateBlock">
+          }" color="light-gray" @click="duplicateBlock"
+          >
             <svg class="h-4 w-4 text-blue-600 inline mr-1 -mt-1" viewBox="0 0 24 24" fill="none"
-                 xmlns="http://www.w3.org/2000/svg">
+                 xmlns="http://www.w3.org/2000/svg"
+            >
               <path
                 d="M5 15H4C3.46957 15 2.96086 14.7893 2.58579 14.4142C2.21071 14.0391 2 13.5304 2 13V4C2 3.46957 2.21071 2.96086 2.58579 2.58579C2.96086 2.21071 3.46957 2 4 2H13C13.5304 2 14.0391 2.21071 14.4142 2.58579C14.7893 2.96086 15 3.46957 15 4V5M11 9H20C21.1046 9 22 9.89543 22 11V20C22 21.1046 21.1046 22 20 22H11C9.89543 22 9 21.1046 9 20V11C9 9.89543 9.89543 9 11 9Z"
-                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+              />
             </svg>
             Duplicate
           </v-button>
-          <change-field-type btn-classes="rounded-l-none text-xs" v-if="!isBlockField" :field="field"
-                             @changeType="onChangeType"/>
+          <change-field-type v-if="!isBlockField" btn-classes="rounded-l-none text-xs" :field="field"
+                             @changeType="onChangeType"
+          />
         </div>
       </template>
     </div>
@@ -62,7 +72,7 @@
 <script>
 import { mapState } from 'vuex'
 import clonedeep from 'clone-deep'
-import ChangeFieldType from "./components/ChangeFieldType.vue"
+import ChangeFieldType from './components/ChangeFieldType.vue'
 import FieldOptions from './components/FieldOptions.vue'
 import BlockOptions from './components/BlockOptions.vue'
 
@@ -115,15 +125,15 @@ export default {
   methods: {
     onChangeType (newType) {
       if (['select', 'multi_select'].includes(this.field.type)) {
-        this.$set(this.field, newType, this.field[this.field.type]) // Set new options with new type
-        this.$delete(this.field, this.field.type) // remove old type options
+        this.field[newType] = this.field[this.field.type] // Set new options with new type
+        delete this.field[this.field.type] // remove old type options
       }
-      this.$set(this.field, 'type', newType)
+      this.field.type = newType
     },
     removeBlock () {
       const newFields = clonedeep(this.form.properties)
       newFields.splice(this.selectedFieldIndex, 1)
-      this.$set(this.form, 'properties', newFields)
+      this.form.properties = newFields
       this.closeSidebar()
     },
     duplicateBlock () {
@@ -131,7 +141,7 @@ export default {
       const newField = clonedeep(this.form.properties[this.selectedFieldIndex])
       newField.id = this.generateUUID()
       newFields.push(newField)
-      this.$set(this.form, 'properties', newFields)
+      this.form.properties = newFields
       this.closeSidebar()
     },
     closeSidebar () {

resources/js/components/open/forms/fields/FormFieldOptionsModal.vue

@@ -9,10 +9,12 @@
           <div>
             <v-button color="light-gray" size="small" @click="removeBlock">
               <svg class="h-4 w-4 text-red-600 inline mr-1 -mt-1" viewBox="0 0 24 24" fill="none"
-                   xmlns="http://www.w3.org/2000/svg">
+                   xmlns="http://www.w3.org/2000/svg"
+              >
                 <path
                   d="M3 6H5M5 6H21M5 6V20C5 20.5304 5.21071 21.0391 5.58579 21.4142C5.96086 21.7893 6.46957 22 7 22H17C17.5304 22 18.0391 21.7893 18.4142 21.4142C18.7893 21.0391 19 20.5304 19 20V6H5ZM8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M10 11V17M14 11V17"
-                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                />
               </svg>
 
               Remove
@@ -21,10 +23,12 @@
           <div class="ml-1">
             <v-button size="small" color="light-gray" @click="duplicateBlock">
               <svg class="h-4 w-4 text-blue-600 inline mr-1 -mt-1" viewBox="0 0 24 24" fill="none"
-                   xmlns="http://www.w3.org/2000/svg">
+                   xmlns="http://www.w3.org/2000/svg"
+              >
                 <path
                   d="M5 15H4C3.46957 15 2.96086 14.7893 2.58579 14.4142C2.21071 14.0391 2 13.5304 2 13V4C2 3.46957 2.21071 2.96086 2.58579 2.58579C2.96086 2.21071 3.46957 2 4 2H13C13.5304 2 14.0391 2.21071 14.4142 2.58579C14.7893 2.96086 15 3.46957 15 4V5M11 9H20C21.1046 9 22 9.89543 22 11V20C22 21.1046 21.1046 22 20 22H11C9.89543 22 9 21.1046 9 20V11C9 9.89543 9.89543 9 11 9Z"
-                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                />
               </svg>
               Duplicate
             </v-button>
@@ -125,7 +129,7 @@
         </p>
         <v-checkbox v-model="field.multi_lines"
                     :name="field.id+'_multi_lines'"
-                    @input="$set(field,'multi_lines',$event)"
+                    @input="field.multi_lines = $event"
         >
           Multi-lines input
         </v-checkbox>
@@ -194,21 +198,23 @@
           Advanced options for your select/multiselect fields.
         </p>
         <text-area-input v-model="optionsText" :name="field.id+'_options_text'" class="mt-4"
-                         @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-4"
-                    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-5 text-xs">Options won't be in a dropdown anymore, but will all be visible</p>
+        <p class="text-gray-400 mb-5 text-xs">
+          Options won't be in a dropdown anymore, but will all be visible
+        </p>
       </div>
 
       <!-- Customization - Placeholder, Prefill, Relabel, Field Help    -->
@@ -235,7 +241,7 @@
         <!-- Pre-fill depends on type -->
         <v-checkbox v-if="field.type=='checkbox'" v-model="field.prefill" class="mt-4"
                     :name="field.id+'_prefill'"
-                    @input="$set(field,'prefill',$event)"
+                    @input="field.prefill = $event"
         >
           Pre-filled value
         </v-checkbox>
@@ -286,7 +292,7 @@
         <!--   Help  -->
         <rich-text-area-input name="help" class="mt-4"
                               :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"
@@ -311,7 +317,6 @@
                           label="Always show character limit"
           />
         </template>
-
       </div>
 
       <!--  Advanced Options   -->
@@ -359,10 +364,10 @@
 <script>
 
 import timezones from '../../../../../data/timezones.json'
-import ProTag from "../../../common/ProTag.vue"
+import ProTag from '../../../common/ProTag.vue'
+import ChangeFieldType from './components/ChangeFieldType.vue'
 
 const FormBlockLogicEditor = () => import('../components/form-logic-components/FormBlockLogicEditor.vue')
-import ChangeFieldType from "./components/ChangeFieldType.vue"
 
 export default {
   name: 'FormFieldOptionsModal',
@@ -385,7 +390,7 @@ export default {
     return {
       typesWithoutPlaceholder: ['date', 'checkbox', 'files'],
       editorToolbarCustom: [
-        ['bold', 'italic', 'underline', 'link'],
+        ['bold', 'italic', 'underline', 'link']
       ]
     }
   },
@@ -422,15 +427,15 @@ export default {
     optionsText () {
       return this.field[this.field.type].options.map(option => {
         return option.name
-      }).join("\n")
-    },
+      }).join('\n')
+    }
   },
 
   watch: {
     'field.width': {
       handler (val) {
         if (val === undefined || val === null) {
-          this.$set(this.field, 'width', 'full')
+          this.field.width = 'full'
         }
       },
       immediate: true
@@ -439,7 +444,7 @@ export default {
 
   created () {
     if (this.field.width === undefined || this.field.width === null) {
-      this.$set(this.field, 'width', 'full')
+      this.field.width = 'full'
     }
   },
 
@@ -452,10 +457,10 @@ export default {
   methods: {
     onChangeType (newType) {
       if (['select', 'multi_select'].includes(this.field.type)) {
-        this.$set(this.field, newType, this.field[this.field.type]) // Set new options with new type
-        this.$delete(this.field, this.field.type) // remove old type options
+        this.field[newType] = this.field[this.field.type] // Set new options with new type
+        delete this.field[this.field.type] // remove old type options
       }
-      this.$set(this.field, 'type', newType)
+      this.field.type = newType
     },
     close () {
       this.$emit('close')
@@ -469,109 +474,109 @@ export default {
       this.$emit('duplicate-block', this.field)
     },
     onFieldDisabledChange (val) {
-      this.$set(this.field, 'disabled', val)
+      this.field.disabled = val
       if (this.field.disabled) {
-        this.$set(this.field, 'hidden', false)
+        this.field.hidden = false
       }
     },
     onFieldRequiredChange (val) {
-      this.$set(this.field, 'required', val)
+      this.field.required = val
       if (this.field.required) {
-        this.$set(this.field, 'hidden', false)
+        this.field.hidden = false
       }
     },
     onFieldHiddenChange (val) {
-      this.$set(this.field, 'hidden', val)
+      this.field.hidden = val
       if (this.field.hidden) {
-        this.$set(this.field, 'required', false)
-        this.$set(this.field, 'disabled', false)
+        this.field.required = false
+        this.field.disabled = false
       } else {
-        this.$set(this.field, 'generates_uuid', false)
-        this.$set(this.field, 'generates_auto_increment_id', false)
+        this.field.generates_uuid = false
+        this.field.generates_auto_increment_id = false
       }
     },
     onFieldDateRangeChange (val) {
-      this.$set(this.field, 'date_range', val)
+      this.field.date_range = val
       if (this.field.date_range) {
-        this.$set(this.field, 'with_time', false)
-        this.$set(this.field, 'prefill_today', false)
+        this.field.with_time = false
+        this.field.prefill_today = false
       }
     },
     onFieldWithTimeChange (val) {
-      this.$set(this.field, 'with_time', val)
+      this.field.with_time = val
       if (this.field.with_time) {
-        this.$set(this.field, 'date_range', false)
+        this.field.date_range = false
       }
     },
     onFieldGenUIdChange (val) {
-      this.$set(this.field, 'generates_uuid', val)
+      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)
+        this.field.generates_auto_increment_id = false
+        this.field.hidden = true
       }
     },
     onFieldGenAutoIdChange (val) {
-      this.$set(this.field, 'generates_auto_increment_id', val)
+      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)
+        this.field.generates_uuid = false
+        this.field.hidden = true
       }
     },
     initRating () {
       if (this.field.is_rating && !this.field.rating_max_value) {
-        this.$set(this.field, 'rating_max_value', 5)
+        this.field.rating_max_value = 5
       }
     },
     onFieldOptionsChange (val) {
-      const vals = (val) ? val.trim().split("\n") : []
+      const vals = (val) ? val.trim().split('\n') : []
       const tmpOpts = vals.map(name => {
         return {
           name: name,
           id: name
         }
       })
-      this.$set(this.field, this.field.type, {'options': tmpOpts})
+      this.field[this.field.type] = { options: tmpOpts }
     },
     onFieldPrefillTodayChange (val) {
-      this.$set(this.field, 'prefill_today', val)
+      this.field.prefill_today = val
       if (this.field.prefill_today) {
-        this.$set(this.field, 'prefill', 'Pre-filled with current date')
-        this.$set(this.field, 'date_range', false)
-        this.$set(this.field, 'disable_future_dates', false)
-        this.$set(this.field, 'disable_past_dates', false)
+        this.field.prefill = 'Pre-filled with current date'
+        this.field.date_range = false
+        this.field.disable_future_dates = false
+        this.field.disable_past_dates = false
       } else {
-        this.$set(this.field, 'prefill', null)
+        this.field.prefill = null
       }
     },
     onFieldAllowCreationChange (val) {
-      this.$set(this.field, 'allow_creation', val)
+      this.field.allow_creation = val
       if (this.field.allow_creation) {
-        this.$set(this.field, 'without_dropdown', false)
+        this.field.without_dropdown = false
       }
     },
     onFieldWithoutDropdownChange (val) {
-      this.$set(this.field, 'without_dropdown', val)
+      this.field.without_dropdown = val
       if (this.field.without_dropdown) {
-        this.$set(this.field, 'allow_creation', false)
+        this.field.allow_creation = false
       }
     },
     onFieldDisablePastDatesChange (val) {
-      this.$set(this.field, 'disable_past_dates', val)
+      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)
+        this.field.disable_future_dates = false
+        this.field.prefill_today = false
       }
     },
     onFieldDisableFutureDatesChange (val) {
-      this.$set(this.field, 'disable_future_dates', val)
+      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)
+        this.field.disable_past_dates = false
+        this.field.prefill_today = false
       }
     },
     onFieldHelpPositionChange (val) {
       if (!val) {
-        this.$set(this.field, 'help_position', 'below_input')
+        this.field.help_position = 'below_input'
       }
     }
   }

resources/js/components/open/forms/fields/components/BlockOptions.vue

@@ -121,7 +121,7 @@ export default {
     'field.width': {
       handler (val) {
         if (val === undefined || val === null) {
-          this.$set(this.field, 'width', 'full')
+          this.field.width = 'full'
         }
       },
       immediate: true
@@ -129,7 +129,7 @@ export default {
     'field.align': {
       handler (val) {
         if (val === undefined || val === null) {
-          this.$set(this.field, 'align', 'left')
+          this.field.align = 'left'
         }
       },
       immediate: true
@@ -138,7 +138,7 @@ export default {
 
   created () {
     if (this.field?.width === undefined || this.field?.width === null) {
-      this.$set(this.field, 'width', 'full')
+      this.field.width = 'full'
     }
   },
 
@@ -146,14 +146,14 @@ export default {
 
   methods: {
     onFieldHiddenChange (val) {
-      this.$set(this.field, 'hidden', val)
+      this.field.hidden = val
       if (this.field.hidden) {
-        this.$set(this.field, 'required', false)
+        this.field.required = false
       }
     },
     onFieldHelpPositionChange (val) {
       if (!val) {
-        this.$set(this.field, 'help_position', 'below_input')
+        this.field.help_position = 'below_input'
       }
     }
   }

resources/js/components/open/forms/fields/components/FieldOptions.vue

@@ -92,7 +92,7 @@
       </p>
       <v-checkbox v-model="field.multi_lines" class="mb-2"
                   :name="field.id+'_multi_lines'"
-                  @input="$set(field,'multi_lines',$event)"
+                  @input="field.multi_lines = $event"
       >
         Multi-lines input
       </v-checkbox>
@@ -243,7 +243,7 @@
       <!-- Pre-fill depends on type -->
       <v-checkbox v-if="field.type=='checkbox'" v-model="field.prefill" class="mt-3"
                   :name="field.id+'_prefill'"
-                  @input="$set(field,'prefill',$event)"
+                  @input="field.prefill =$event"
       >
         Pre-filled value
       </v-checkbox>
@@ -363,6 +363,7 @@
 import timezones from '../../../../../../data/timezones.json'
 import countryCodes from '../../../../../../data/country_codes.json'
 import CountryFlag from 'vue-country-flag-next'
+
 const FormBlockLogicEditor = () => import('../../components/form-logic-components/FormBlockLogicEditor.vue')
 
 export default {
@@ -428,7 +429,7 @@ export default {
     'field.width': {
       handler (val) {
         if (val === undefined || val === null) {
-          this.$set(this.field, 'width', 'full')
+          this.field.width = 'full'
         }
       },
       immediate: true
@@ -436,7 +437,7 @@ export default {
     'field.align': {
       handler (val) {
         if (val === undefined || val === null) {
-          this.$set(this.field, 'align', 'left')
+          this.field.align = 'left'
         }
       },
       immediate: true
@@ -445,7 +446,7 @@ export default {
 
   created () {
     if (this.field?.width === undefined || this.field?.width === null) {
-      this.$set(this.field, 'width', 'full')
+      this.field.width = 'full'
     }
   },
 
@@ -457,57 +458,57 @@ export default {
 
   methods: {
     onFieldDisabledChange (val) {
-      this.$set(this.field, 'disabled', val)
+      this.field.disabled = val
       if (this.field.disabled) {
-        this.$set(this.field, 'hidden', false)
+        this.field.hidden = false
       }
     },
     onFieldRequiredChange (val) {
-      this.$set(this.field, 'required', val)
+      this.field.required = val
       if (this.field.required) {
-        this.$set(this.field, 'hidden', false)
+        this.field.hidden = false
       }
     },
     onFieldHiddenChange (val) {
-      this.$set(this.field, 'hidden', val)
+      this.field.hidden = val
       if (this.field.hidden) {
-        this.$set(this.field, 'required', false)
-        this.$set(this.field, 'disabled', false)
+        this.field.required = false
+        this.field.disabled = false
       } else {
-        this.$set(this.field, 'generates_uuid', false)
-        this.$set(this.field, 'generates_auto_increment_id', false)
+        this.field.generates_uuid = false
+        this.field.generates_auto_increment_id = false
       }
     },
     onFieldDateRangeChange (val) {
-      this.$set(this.field, 'date_range', val)
+      this.field.date_range = val
       if (this.field.date_range) {
-        this.$set(this.field, 'with_time', false)
-        this.$set(this.field, 'prefill_today', false)
+        this.field.with_time = false
+        this.field.prefill_today = false
       }
     },
     onFieldWithTimeChange (val) {
-      this.$set(this.field, 'with_time', val)
+      this.field.with_time = val
       if (this.field.with_time) {
-        this.$set(this.field, 'date_range', false)
+        this.field.date_range = false
       }
     },
     onFieldGenUIdChange (val) {
-      this.$set(this.field, 'generates_uuid', val)
+      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)
+        this.field.generates_auto_increment_id = false
+        this.field.hidden = true
       }
     },
     onFieldGenAutoIdChange (val) {
-      this.$set(this.field, 'generates_auto_increment_id', val)
+      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)
+        this.field.generates_uuid = false
+        this.field.hidden = true
       }
     },
     initRating () {
       if (this.field.is_rating && !this.field.rating_max_value) {
-        this.$set(this.field, 'rating_max_value', 5)
+        this.field.rating_max_value = 5
       }
     },
     onFieldOptionsChange (val) {
@@ -518,54 +519,54 @@ export default {
           id: name
         }
       })
-      this.$set(this.field, this.field.type, { options: tmpOpts })
+      this.field[this.field.type] = { options: tmpOpts }
     },
     onFieldPrefillTodayChange (val) {
-      this.$set(this.field, 'prefill_today', val)
+      this.field.prefill_today = val
       if (this.field.prefill_today) {
-        this.$set(this.field, 'prefill', 'Pre-filled with current date')
-        this.$set(this.field, 'date_range', false)
-        this.$set(this.field, 'disable_future_dates', false)
-        this.$set(this.field, 'disable_past_dates', false)
+        this.field.prefill = 'Pre-filled with current date'
+        this.field.date_range = false
+        this.field.disable_future_dates = false
+        this.field.disable_past_dates = false
       } else {
-        this.$set(this.field, 'prefill', null)
+        this.field.prefill = null
       }
     },
     onFieldAllowCreationChange (val) {
-      this.$set(this.field, 'allow_creation', val)
+      this.field.allow_creation = val
       if (this.field.allow_creation) {
-        this.$set(this.field, 'without_dropdown', false)
+        this.field.without_dropdown = false
       }
     },
     onFieldWithoutDropdownChange (val) {
-      this.$set(this.field, 'without_dropdown', val)
+      this.field.without_dropdown = val
       if (this.field.without_dropdown) {
-        this.$set(this.field, 'allow_creation', false)
+        this.field.allow_creation = false
       }
     },
     onFieldDisablePastDatesChange (val) {
-      this.$set(this.field, 'disable_past_dates', val)
+      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)
+        this.field.disable_future_dates = false
+        this.field.prefill_today = false
       }
     },
     onFieldDisableFutureDatesChange (val) {
-      this.$set(this.field, 'disable_future_dates', val)
+      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)
+        this.field.disable_past_dates = false
+        this.field.prefill_today = false
       }
     },
     onFieldHelpPositionChange (val) {
       if (!val) {
-        this.$set(this.field, 'help_position', 'below_input')
+        this.field.help_position = 'below_input'
       }
     },
     selectAllCountries () {
-      this.$set(this.field, 'unavailable_countries', this.allCountries.map(item => {
+      this.field.unavailable_countries = this.allCountries.map(item => {
         return item.code
-      }))
+      })
     }
   }
 }

resources/js/components/open/tables/OpenTable.vue

@@ -232,7 +232,7 @@ export default {
       const columns = clonedeep(this.form.properties)
       const index = this.form.properties.findIndex(c => c.id === col.id)
       columns[index].cell_width = width
-      this.$set(this.form, 'properties', columns)
+      this.form.properties = columns
       this.$nextTick(() => {
         this.$emit('resize')
       })

resources/js/components/pages/forms/show/EmbedFormAsPopupModal.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
     <v-button
+      v-track.share_embed_form_popup_click="{form_id:form.id, form_slug:form.slug}"
       class="w-full"
       color="light-gray"
-      v-track.share_embed_form_popup_click="{form_id:form.id, form_slug:form.slug}"
       @click="showEmbedFormAsPopupModal=true"
     >
       <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-4 text-blue-600 inline" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
@@ -59,7 +59,7 @@
           </div>
         </div>
 
-        <collapse class="py-5 w-full border rounded-md px-4" :default-value="false">
+        <collapse class="py-5 w-full border rounded-md px-4" :model-value="false">
           <template #title>
             <div class="flex">
               <h3 class="font-semibold block text-lg">

resources/js/components/pages/pricing/MonthlyYearlySelector.vue

@@ -1,14 +1,19 @@
 <template>
   <div class="border border-gray-300 rounded-xl flex p-1 relative">
     <button class="font-semibold block flex-grow cursor-pointer">
-      <div class="p-2 px-3 rounded-lg transition-colors" :class="{'bg-blue-500 text-white':!value}"
+      <div
+        class="p-2 px-3 rounded-lg transition-colors"
+        :class="{'bg-blue-500 text-white': !modelValue}"
         @click="set(false)"
       >
         Monthly
       </div>
     </button>
     <button class="font-semibold block flex-grow cursor-pointer" @click="set(true)">
-      <div class="p-2 px-4 rounded-lg transition-colors" :class="{'bg-blue-500 text-white':value}">
+      <div
+        class="p-2 px-4 rounded-lg transition-colors"
+        :class="{'bg-blue-500 text-white': modelValue}"
+      >
         Yearly
       </div>
     </button>
@@ -18,24 +23,15 @@
   </div>
 </template>
 
-<script>
-export default {
+<script setup>
+import { defineEmits, defineProps } from 'vue'
 
-  components: {},
-  props: {
-    value: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data: () => ({}),
+defineProps({
+  modelValue: { type: Boolean, required: true }
+})
+const emit = defineEmits()
 
-  computed: {},
-
-  methods: {
-    set (value) {
-      this.$emit('input', value)
-    }
-  }
+const set = (value) => {
+  emit('update:modelValue', value)
 }
 </script>

resources/js/components/pages/pricing/PricingTable.vue

@@ -2,8 +2,8 @@
   <div class="w-full">
     <section class="relative">
       <div v-if="!homePage" class="absolute inset-0 grid" aria-hidden="true">
-        <div class="bg-gray-100"></div>
-        <div class="bg-white"></div>
+        <div class="bg-gray-100" />
+        <div class="bg-white" />
       </div>
 
       <div class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
@@ -20,7 +20,8 @@
                   </g>
                   <path
                     d="M3.33345 12H28.6668M13.3334 4L10.6668 12L16.0001 27.3333L21.3334 12L18.6668 4M16.8195 27.0167L28.7644 12.6829C28.9668 12.4399 29.0681 12.3185 29.1067 12.1829C29.1408 12.0633 29.1408 11.9367 29.1067 11.8171C29.0681 11.6815 28.9668 11.5601 28.7644 11.3171L22.9866 4.3838C22.8691 4.24273 22.8103 4.17219 22.7382 4.12148C22.6744 4.07654 22.6031 4.04318 22.5277 4.02289C22.4426 4 22.3508 4 22.1672 4H9.83305C9.64941 4 9.55758 4 9.4725 4.02289C9.39711 4.04318 9.32586 4.07654 9.26202 4.12148C9.18996 4.17219 9.13118 4.24273 9.01361 4.3838L3.23583 11.3171C3.0334 11.5601 2.93218 11.6815 2.8935 11.8171C2.85939 11.9366 2.85939 12.0633 2.8935 12.1829C2.93218 12.3185 3.0334 12.4399 3.23583 12.6829L15.1807 27.0167C15.4621 27.3544 15.6028 27.5232 15.7713 27.5848C15.919 27.6388 16.0812 27.6388 16.229 27.5848C16.3974 27.5232 16.5381 27.3544 16.8195 27.0167Z"
-                    stroke="currentColor" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
+                    stroke="currentColor" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"
+                  />
                 </svg>
                 Pro Features
               </span>
@@ -37,25 +38,28 @@
               <h4 class="flex-none text-sm font-semibold leading-6 tracking-widest text-gray-400 uppercase">
                 What's included
               </h4>
-              <div class="flex-auto h-px bg-gray-200"></div>
+              <div class="flex-auto h-px bg-gray-200" />
             </div>
 
             <ul role="list"
-                class="grid grid-cols-1 gap-4 mt-4 text-sm font-medium leading-6 text-gray-900 sm:grid-cols-2 sm:gap-x-6 sm:gap-y-2">
+                class="grid grid-cols-1 gap-4 mt-4 text-sm font-medium leading-6 text-gray-900 sm:grid-cols-2 sm:gap-x-6 sm:gap-y-2"
+            >
               <li v-for="(title, i) in pricingInfo" :key="i" class="flex gap-x-3">
                 <svg aria-hidden="true" class="w-5 h-5 shrink-0 stroke-blue-600" viewBox="0 0 24 24" fill="none"
-                     xmlns="http://www.w3.org/2000/svg">
-                  <path d="M20 6L9 17L4 12" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                     xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path d="M20 6L9 17L4 12" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                 </svg>
                 {{ title }}
               </li>
-              <slot name="pricing-table"></slot>
+              <slot name="pricing-table" />
             </ul>
           </div>
 
           <div class="p-2 -mt-2 flex-col lg:mt-0 lg:w-full lg:max-w-md lg:flex-shrink-0">
             <div
-              class="grow h-full py-10 text-center rounded-2xl bg-gray-50 ring-1 ring-inset ring-gray-900/5 lg:flex lg:flex-col lg:justify-center lg:py-12">
+              class="grow h-full py-10 text-center rounded-2xl bg-gray-50 ring-1 ring-inset ring-gray-900/5 lg:flex lg:flex-col lg:justify-center lg:py-12"
+            >
               <div class="max-w-xs px-8 mx-auto space-y-6">
                 <div class="flex items-center justify-center mb-10">
                   <monthly-yearly-selector v-model="isYearly" />
@@ -75,11 +79,12 @@
                   <v-button v-if="!authenticated" class="mr-1" :to="{ name: 'register' }" :arrow="true">
                     Start free trial
                   </v-button>
-                  <v-button v-else-if="authenticated && user.is_subscribed" class="mr-1" @click.prevent="openBilling"
-                            :arrow="true">
+                  <v-button v-else-if="authenticated && user.is_subscribed" class="mr-1" :arrow="true"
+                            @click.prevent="openBilling"
+                  >
                     View Billing
                   </v-button>
-                  <v-button v-else class="mr-1" @click.prevent="openCustomerCheckout('default')" :arrow="true">
+                  <v-button v-else class="mr-1" :arrow="true" @click.prevent="openCustomerCheckout('default')">
                     Start free trial
                   </v-button>
                 </div>
@@ -105,10 +110,12 @@ import axios from 'axios'
 import MonthlyYearlySelector from './MonthlyYearlySelector.vue'
 import CheckoutDetailsModal from './CheckoutDetailsModal.vue'
 
+MonthlyYearlySelector.compatConfig = { MODE: 3 }
+
 export default {
   components: {
     MonthlyYearlySelector,
-    CheckoutDetailsModal,
+    CheckoutDetailsModal
   },
   props: {
     homePage: {

resources/js/components/pages/welcome/TemplatesSlider.vue

@@ -1,9 +1,15 @@
 <template>
   <div class="mx-auto mb-12 max-w-7xl px-6 lg:px-8">
     <div class="mx-auto max-w-2xl text-center">
-      <h2 class="text-lg font-semibold leading-8 tracking-tight text-blue-500 ">Single or multi-page forms</h2>
-      <p class="mt-2 text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">Discover our beautiful templates</p>
-      <p class="mt-3 px-8 text-center text-lg text-gray-400 ">If you need inspiration, checkout our templates.</p>
+      <h2 class="text-lg font-semibold leading-8 tracking-tight text-blue-500 ">
+        Single or multi-page forms
+      </h2>
+      <p class="mt-2 text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">
+        Discover our beautiful templates
+      </p>
+      <p class="mt-3 px-8 text-center text-lg text-gray-400 ">
+        If you need inspiration, checkout our templates.
+      </p>
     </div>
     <div class="my-3 flex justify-center">
       <router-link :to="{name:'templates'}">
@@ -46,11 +52,14 @@ export default {
   },
 
   watch: {
-    templates () {
+    templates: {
+      deep: true,
+      handler () {
         this.$nextTick(() => {
           this.setInfinite()
         })
       }
+    }
   },
 
   mounted () {
@@ -59,7 +68,7 @@ export default {
 
   methods: {
     setInfinite () {
-      let ul = this.$refs['templates-slider']
+      const ul = this.$refs['templates-slider']
       if (ul) {
         ul.insertAdjacentHTML('afterend', ul.outerHTML)
         ul.nextSibling.setAttribute('aria-hidden', 'true')

resources/js/mixins/forms/input.js

@@ -36,7 +36,7 @@ export default {
     compVal: {
       set (val) {
         if (this.form) {
-          this.$set(this.form, this.name, val)
+          this.form[this.name] = val
         } else {
           this.content = val
         }