Fix: draggable deprecations

Author: Tofandel

frontend/js/components/Repeater.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="content">
-    <draggable class="content__content" v-model="blocks" :options="dragOptions">
+    <draggable class="content__content" v-model="blocks" v-bind="dragOptions">
       <transition-group name="draggable_list" tag='div'>
         <div class="content__item" v-for="(block, index) in blocks" :key="block.id">
           <a17-blockeditor-item

frontend/js/components/Slideshow.vue

@@ -4,7 +4,7 @@
       <a17-button :disabled="disabled" type="button" variant="ghost" @click="openMediaLibrary(remainingSlides)">{{ addLabel }}</a17-button>
       <span class="slideshow__note f--small"><slot></slot></span>
     </div>
-    <draggable class="slideshow__content" v-model="slides" :options="dragOptions" v-if="slides.length">
+    <draggable class="slideshow__content" v-model="slides" v-bind="dragOptions" v-if="slides.length">
       <transition-group name="draggable_list" tag='div'>
         <div class="slide" v-for="(slide, index) in slides" :key="`${slide.id}_${index}`">
             <div class="slide__handle" v-if="!disabled">

frontend/js/components/blocks/Blocks.vue

@@ -5,8 +5,8 @@
                  :value="savedBlocks"
                  group="blocks"
                  :move="handleOnMove"
-                 @end="e => handleOnEnd(moveBlock, moveBlockToEditor)"
-                 :options="dragOptions">
+                 @end="handleOnEnd(moveBlock, moveBlockToEditor)"
+                 v-bind="dragOptions">
         <transition-group name="draggable_list"
                           tag='div'>
           <div class="blocks__item"

frontend/js/components/buckets/Bucket.vue

@@ -45,7 +45,7 @@
                           class="buckets__number">{{ (index + 1) }}</span> {{ bucket.name }}</span> <span
               class="buckets__size-infos">{{ bucket.children.length }} / {{ bucket.max }}</span>
             </h3>
-            <draggable v-if="bucket.children.length > 0" class="buckets__list buckets__draggable" :options="dragOptions"
+            <draggable v-if="bucket.children.length > 0" class="buckets__list buckets__draggable" v-bind="dragOptions"
                        @change="sortBucket($event, index)" :value="bucket.children" :tag="'table'">
               <transition-group name="fade_scale_list" tag='tbody'>
                 <a17-bucket-item v-for="(child, index) in bucket.children" :key="`${child.id}_${index}`" :item="child"

frontend/js/components/editor/EditorPreview.vue

@@ -11,7 +11,8 @@
       <draggable class="editorPreview__content"
                  ref="previewContent"
                  :value="blocks"
-                 :options="{ group: 'editorBlocks', handle: handle }"
+                 group="editorBlocks"
+                 :handle="handle"
                  @add="onAdd(add, edit, $event)"
                  @update="onUpdate">
         <template v-for="savedBlock in blocks">

frontend/js/components/table/Datatable.vue

@@ -37,7 +37,7 @@
           <a17-tablehead :columns="visibleColumns" ref="thead"/>
           </thead>
           <template v-if="draggable">
-            <draggable class="datatable__drag" :tag="'tbody'" v-model="rows" :options="dragOptions">
+            <draggable class="datatable__drag" :tag="'tbody'" v-model="rows" v-bind="dragOptions">
               <template v-for="(row, index) in rows">
                 <a17-tablerow :row="row" :index="index" :columns="visibleColumns" :key="row.id"/>
               </template>

frontend/js/components/table/nested/NestedList.vue

@@ -2,7 +2,7 @@
   <draggable class="nested__dropArea"
              :class="nestedDropAreaClasses"
              v-model="rows"
-             :options="draggableOptions"
+             v-bind="draggableOptions"
              :tag="'ul'"
              :component-data="draggableGetComponentData">
     <li class="nested-datatable__item"