Vue 3 better animation (#257)

* vue-3-better-animation

* Working on migration to vueuse/motion

* Form sidebar animations

* Clean code

* Added animations for modal

* Finished implementing better animations

---------

Co-authored-by: Forms Dev <chirag+new@notionforms.io>

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

@@ -1,7 +1,5 @@
 <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"
-  >
+  <div>
     <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">
@@ -78,15 +76,14 @@ import FieldOptions from './components/FieldOptions.vue'
 import BlockOptions from './components/BlockOptions.vue'
 
 export default {
-  name: 'FormFieldEditSidebar',
+  name: 'FormFieldEdit',
   components: { ChangeFieldType, FieldOptions, BlockOptions },
   props: {},
   setup () {
     const workingFormStore = useWorkingFormStore()
     return {
       workingFormStore,
-      selectedFieldIndex : computed(() => workingFormStore.selectedFieldIndex),
-      showEditFieldSidebar : computed(() => workingFormStore.showEditFieldSidebar)
+      selectedFieldIndex : computed(() => workingFormStore.selectedFieldIndex)
     }
   },
   data () {
@@ -108,9 +105,6 @@ export default {
     field () {
       return (this.form && this.selectedFieldIndex !== null) ? this.form.properties[this.selectedFieldIndex] : null
     },
-    showSidebar () {
-      return (this.form && this.selectedFieldIndex !== null) ? (this.form.properties[this.selectedFieldIndex] && this.showEditFieldSidebar) : false
-    },
     isBlockField () {
       return this.field && this.field.type.startsWith('nf')
     },

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

@@ -86,17 +86,16 @@
     </div>
 
     <!--  Logic Block -->
-    <form-block-logic-editor class="py-2 px-4 border-b" :form="form" :field="field" />
+    <!--    <form-block-logic-editor class="py-2 px-4 border-b" :form="form" :field="field" />-->
   </div>
 </template>
 
 <script>
 import CodeInput from '../../../../forms/CodeInput.vue'
-const FormBlockLogicEditor = () => import('../../components/form-logic-components/FormBlockLogicEditor.vue')
 
 export default {
   name: 'BlockOptions',
-  components: { FormBlockLogicEditor, CodeInput },
+  components: { CodeInput },
   props: {
     field: {
       type: Object,

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

@@ -1,7 +1,7 @@
 <template>
-  <dropdown dusk="nav-dropdown" v-if="changeTypeOptions.length > 0">
+  <dropdown v-if="changeTypeOptions.length > 0" dusk="nav-dropdown">
     <template #trigger="{toggle}">
-      <v-button class="relative" :class="btnClasses" size="small" color="light-gray" @click="toggle">
+      <v-button class="relative" :class="btnClasses" size="small" color="light-gray" @click.stop="toggle">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="h-4 w-4 text-blue-600 inline mr-1 -mt-1">
           <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" />
         </svg>
@@ -9,7 +9,7 @@
       </v-button>
     </template>
 
-    <a href="#" v-for="(op, index) in changeTypeOptions" :key="index"
+    <a v-for="(op, index) in changeTypeOptions" :key="index" href="#"
        class="block px-4 py-2 text-md text-gray-700 dark:text-white hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
        @click.prevent="changeType(op.value)"
     >
@@ -23,7 +23,7 @@ import Dropdown from '../../../../common/Dropdown.vue'
 
 export default {
   name: 'ChangeFieldType',
-  components: {Dropdown},
+  components: { Dropdown },
   props: {
     field: {
       type: Object,
@@ -34,25 +34,25 @@ export default {
       required: true
     }
   },
-  data() {
+  data () {
     return {}
   },
 
   computed: {
-    changeTypeOptions() {
-      var newTypes = []
+    changeTypeOptions () {
+      let newTypes = []
       if (['text', 'email', 'phone', 'number'].includes(this.field.type)) {
         newTypes = [
-          {'name': 'Text Input', 'value': 'text'},
-          {'name': 'Email Input', 'value': 'email'},
-          {'name': 'Phone Input', 'value': 'phone'},
-          {'name': 'Number Input', 'value': 'number'}
+          { name: 'Text Input', value: 'text' },
+          { name: 'Email Input', value: 'email' },
+          { name: 'Phone Input', value: 'phone' },
+          { name: 'Number Input', value: 'number' }
         ]
       }
       if (['select', 'multi_select'].includes(this.field.type)) {
         newTypes = [
-          {'name': 'Select Input', 'value': 'select'},
-          {'name': 'Multi-Select Input', 'value': 'multi_select'}
+          { name: 'Select Input', value: 'select' },
+          { name: 'Multi-Select Input', value: 'multi_select' }
         ]
       }
       return newTypes.filter((item) => {
@@ -68,11 +68,11 @@ export default {
 
   watch: {},
 
-  mounted() {
+  mounted () {
   },
 
   methods: {
-    changeType(newType) {
+    changeType (newType) {
       if (newType) {
         this.$emit('changeType', newType)
       }

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

@@ -293,7 +293,7 @@
       <file-input v-else-if="field.type==='files'" name="prefill" class="mt-4"
                   :form="field"
                   label="Pre-filled file"
-                  :multiple="field.multiple===true" :moveToFormAssets="true"
+                  :multiple="field.multiple===true" :move-to-form-assets="true"
       />
       <text-input v-else-if="!['files', 'signature'].includes(field.type)" name="prefill" class="mt-3"
                   :form="field"
@@ -382,7 +382,7 @@
     </div>
 
     <!--  Logic Block -->
-    <form-block-logic-editor class="py-2 px-4 border-b" :form="form" :field="field" />
+    <!--    <form-block-logic-editor class="py-2 px-4 border-b" :form="form" :field="field" />-->
   </div>
 </template>
 
@@ -391,11 +391,9 @@ 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 {
   name: 'FieldOptions',
-  components: { FormBlockLogicEditor, CountryFlag },
+  components: { CountryFlag },
   props: {
     field: {
       type: Object,
@@ -533,7 +531,7 @@ export default {
         this.field.hidden = true
       }
     },
-    initRating() {
+    initRating () {
       if (this.field.is_rating) {
         this.$set(this.field, 'is_scale', false)
         if (!this.field.rating_max_value) {