Nuxt Migration notifications (#265)

* Nuxt Migration notifications

* @input to @update:model-value

* change field type fixes

* @update:model-value

* Enable form-block-logic-editor

* vue-confetti migration

* PR request changes

* useAlert in setup

client/components/open/forms/components/CopyContent.vue

@@ -56,9 +56,9 @@ export default {
       document.execCommand('copy')
       document.body.removeChild(el)
       if(this.isDraft){
-        this.alertWarning('Copied! But other people won\'t be able to see the form since it\'s currently in draft mode')
+        useAlert().warning('Copied! But other people won\'t be able to see the form since it\'s currently in draft mode')
       } else {
-        this.alertSuccess('Copied!')
+        useAlert().success('Copied!')
       }
 
     }

client/components/open/forms/components/FormEditor.vue

@@ -217,9 +217,9 @@ export default {
   methods: {
     displayFormModificationAlert (responseData) {
       if (responseData.form && responseData.form.cleanings && Object.keys(responseData.form.cleanings).length > 0) {
-        // this.alertWarning(responseData.message)
+        useAlert().warning(responseData.message)
       } else {
-        // this.alertSuccess(responseData.message)
+        useAlert().success(responseData.message)
       }
     },
     openCrisp () {

client/components/open/forms/components/form-components/FormCustomization.vue

@@ -19,7 +19,7 @@
     />
     <div class="-mt-3 mb-3 text-gray-400 dark:text-gray-500">
       <small>
-        Need another theme? <a href="#" @click.prevent="openChat">Send us some suggestions!</a>
+        Need another theme? <a href="#" @click.prevent="crisp.openAndShowChat">Send us some suggestions!</a>
       </small>
     </div>
 
@@ -80,56 +80,25 @@
   </editor-options-panel>
 </template>
 
-<script>
+<script setup>
 import { useWorkingFormStore } from '../../../../../stores/working_form'
 import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
 import ProTag from '~/components/global/ProTag.vue'
 
-export default {
-  components: { EditorOptionsPanel, ProTag },
-  props: {
-  },
-  setup () {
-    const workingFormStore = useWorkingFormStore()
-    return {
-      workingFormStore
-    }
-  },
-  data () {
-    return {
-      isMounted: false
-    }
-  },
+const workingFormStore = useWorkingFormStore()
+const form = storeToRefs(workingFormStore).content
+const isMounted =  ref(false)
+const crisp = useCrisp()
+const confetti = useConfetti()
 
-  computed: {
-    form: {
-      get () {
-        return this.workingFormStore.content
-      },
-      /* We add a setter */
-      set (value) {
-        this.workingFormStore.set(value)
-      }
-    }
-  },
+onMounted(() => {
+  isMounted.value = true
+})
 
-  watch: {},
-
-  mounted () {
-    this.isMounted = true
-  },
-
-  methods: {
-    onChangeConfettiOnSubmission (val) {
-      this.form.confetti_on_submission = val
-      if (this.isMounted && val) {
-        this.playConfetti()
-      }
-    },
-    openChat () {
-      window.$crisp.push(['do', 'chat:show'])
-      window.$crisp.push(['do', 'chat:open'])
-    }
+const onChangeConfettiOnSubmission = (val) => {
+  form.confetti_on_submission = val
+  if (isMounted.value && val) {
+    confetti.play()
   }
 }
 </script>

client/components/open/forms/components/form-logic-components/ColumnCondition.vue

@@ -6,20 +6,20 @@
     </div>
     <SelectInput v-model="content.operator" class="w-full" :options="operators"
                  :name="'operator_'+property.id" placeholder="Comparison operator"
-                 @update:modelValue="operatorChanged()"
+                 @update:model-value="operatorChanged()"
     />
 
     <template v-if="hasInput">
       <component v-bind="inputComponentData" :is="inputComponentData.component" v-model="content.value" class="w-full"
                  :name="'value_'+property.id" placeholder="Filter Value"
-                 @update:modelValue="emitInput()"
+                 @update:model-value="emitInput()"
       />
     </template>
   </div>
 </template>
 
 <script>
-import OpenFilters from '../../../../../../data/open_filters.json'
+import OpenFilters from '../../../../../data/open_filters.json'
 
 export default {
   components: { },

client/components/open/forms/components/form-logic-components/ConditionEditor.vue

@@ -1,5 +1,5 @@
 <template>
-  <query-builder v-model="query" :rules="rules" :config="config" @update:modelValue="onChange">
+  <query-builder v-model="query" :rules="rules" :config="config" @update:model-value="onChange">
     <template #groupOperator="props">
       <div class="query-builder-group-slot__group-selection flex items-center px-5 border-b py-1 mb-1 flex">
         <p class="mr-2 font-semibold">
@@ -13,7 +13,7 @@
           option-key="identifier"
           name="operator-input"
           margin-bottom=""
-          @update:modelValue="props.updateCurrentOperator($event)"
+          @update:model-value="props.updateCurrentOperator($event)"
         />
       </div>
     </template>
@@ -24,7 +24,7 @@
       <component
         :is="ruleCtrl.ruleComponent"
         :model-value="ruleCtrl.ruleData"
-        @update:modelValue="ruleCtrl.updateRuleData"
+        @update:model-value="ruleCtrl.updateRuleData"
       />
     </template>
   </query-builder>

client/components/open/forms/components/form-logic-components/FormBlockLogicEditor.vue

@@ -69,12 +69,11 @@
 <script>
 import ConditionEditor from './ConditionEditor.vue'
 import Modal from '../../../../global/Modal.vue'
-import SelectInput from '../../../../forms/SelectInput.vue'
 import clonedeep from 'clone-deep'
 
 export default {
   name: 'FormBlockLogicEditor',
-  components: { SelectInput, Modal, ConditionEditor },
+  components: { Modal, ConditionEditor },
   props: {
     field: {
       type: Object,

client/components/open/forms/components/templates/FormTemplateModal.vue

@@ -93,7 +93,8 @@ export default {
       user : computed(() => authStore.user),
       templates : computed(() => templatesStore.content),
       industries : computed(() => templatesStore.industries),
-      types : computed(() => templatesStore.types)
+      types : computed(() => templatesStore.types),
+      useAlert: useAlert()
     }
   },
 
@@ -156,7 +157,7 @@ export default {
       this.templateForm.form = this.form
       await this.templateForm.post('/api/templates').then((response) => {
         if (response.data.message) {
-          this.alertSuccess(response.data.message)
+          this.useAlert.success(response.data.message)
         }
         this.templatesStore.save(response.data.data)
         this.$emit('close')
@@ -166,7 +167,7 @@ export default {
       this.templateForm.form = this.form
       await this.templateForm.put('/api/templates/' + this.template.id).then((response) => {
         if (response.data.message) {
-          this.alertSuccess(response.data.message)
+          this.useAlert.success(response.data.message)
         }
         this.templatesStore.save(response.data.data)
         this.$emit('close')
@@ -176,7 +177,7 @@ export default {
       if (!this.template) return
       axios.delete('/api/templates/' + this.template.id).then((response) => {
         if (response.data.message) {
-          this.alertSuccess(response.data.message)
+          this.useAlert.success(response.data.message)
         }
         this.$router.push({ name: 'templates' })
         this.templatesStore.remove(this.template)