updated vuedraggable

frontend/js/components/BrowserField.vue

@@ -37,7 +37,7 @@
 </template>
 
 <script>
-  import draggable from 'vuedraggable'
+  import { VueDraggableNext } from 'vue-draggable-next'
   import { mapGetters,mapState } from 'vuex'
 
   import draggableMixin from '@/mixins/draggable'
@@ -49,7 +49,7 @@
     name: 'A17BrowserField',
     components: {
       'a17-browseritem': Browseritem,
-      draggable
+      draggable: VueDraggableNext
     },
     mixins: [draggableMixin],
     props: {

frontend/js/components/Repeater.vue

@@ -71,7 +71,7 @@
 </template>
 
 <script>
-  import draggable from 'vuedraggable'
+  import { VueDraggableNext } from 'vue-draggable-next'
   import { mapState } from 'vuex'
 
   import BlockEditorItem from '@/components/blocks/BlockEditorItem.vue'
@@ -85,7 +85,7 @@
     components: {
       A17StandaloneBrowser,
       'a17-blockeditor-item': BlockEditorItem,
-      draggable
+      draggable: VueDraggableNext
     },
     mixins: [draggableMixin],
     props: {

frontend/js/components/Slideshow.vue

@@ -36,7 +36,7 @@
 </template>
 
 <script>
-  import draggable from 'vuedraggable'
+  import { VueDraggableNext } from 'vue-draggable-next'
   import { mapState } from 'vuex'
 
   import draggableMixin from '@/mixins/draggable'
@@ -47,7 +47,7 @@
   export default {
     name: 'A17Slideshow',
     components: {
-      draggable
+      draggable: VueDraggableNext
     },
     mixins: [draggableMixin, mediaLibrayMixin, mediaFieldMixin],
     props: {

frontend/js/components/blocks/Blocks.vue

@@ -140,7 +140,7 @@
 </template>
 
 <script>
-  import draggable from 'vuedraggable'
+  import { VueDraggableNext } from 'vue-draggable-next'
   import { mapGetters,mapState } from 'vuex'
 
   import BlockEditorItem from '@/components/blocks/BlockEditorItem.vue'
@@ -154,7 +154,7 @@
       'a17-blockeditor-item': BlockEditorItem,
       'a17-blockeditor-model': BlockEditorModel,
       'a17-blocks-list': BlocksList,
-      draggable
+      draggable: VueDraggableNext
     },
     mixins: [DraggableMixin, EditorMixin],
     props: {

frontend/js/components/buckets/Bucket.vue

@@ -79,7 +79,7 @@
 </template>
 
 <script>
-  import draggable from 'vuedraggable'
+  import { VueDraggableNext } from 'vue-draggable-next'
   import { mapGetters,mapState } from 'vuex'
 
   import Fieldset from '@/components/Fieldset.vue'
@@ -132,7 +132,7 @@
       'a17-paginate': Paginate,
       'a17-filter': Filter,
       'a17-vselect': VSelect,
-      draggable
+      draggable: VueDraggableNext
     },
     data: function () {
       return {

frontend/js/components/editor/EditorPreview.vue

@@ -47,7 +47,7 @@
 <script>
   import debounce from 'lodash/debounce'
   import tinyColor from 'tinycolor2'
-  import draggable from 'vuedraggable'
+  import { VueDraggableNext } from 'vue-draggable-next'
 
   import A17BlockEditorModel from '@/components/blocks/BlockEditorModel'
   import A17EditorBlockPreview from '@/components/editor/EditorPreviewBlockItem'
@@ -72,7 +72,7 @@
     },
     mixins: [DraggableMixin, BlockEditorMixin],
     components: {
-      draggable,
+      draggable: VueDraggableNext,
       'a17-editor-block-preview': A17EditorBlockPreview,
       'a17-blockeditor-model': A17BlockEditorModel,
       'a17-spinner': A17Spinner

frontend/js/components/editor/EditorSidebarBlockList.vue

@@ -30,7 +30,7 @@
 </template>
 
 <script>
-  import draggable from 'vuedraggable'
+  import { VueDraggableNext } from 'vue-draggable-next'
 
   import { DraggableMixin } from '@/mixins'
 
@@ -48,7 +48,7 @@
     },
     mixins: [DraggableMixin],
     components: {
-      draggable
+      draggable: VueDraggableNext
     },
     computed: {
       editorSidebarClasses () {

frontend/js/components/files/FileField.vue

@@ -20,7 +20,7 @@
   </a17-inputframe>
 </template>
 <script>
-  import draggable from 'vuedraggable'
+  import { VueDraggableNext } from 'vue-draggable-next'
   import { mapGetters,mapState } from 'vuex'
 
   import draggableMixin from '@/mixins/draggable'
@@ -35,7 +35,7 @@
     name: 'A17FileField',
     components: {
       'a17-fileitem': fileItem,
-      draggable
+      draggable: VueDraggableNext
     },
     mixins: [draggableMixin, mediaLibraryMixin, localeMixin, inputframeMixin],
     props: {

frontend/js/components/table/Datatable.vue

@@ -73,7 +73,7 @@
 
 <script>
   import debounce from 'lodash/debounce'
-  import draggable from 'vuedraggable'
+  import { VueDraggableNext } from 'vue-draggable-next'
   import { mapState } from 'vuex'
 
   import a17Spinner from '@/components/Spinner.vue'
@@ -94,7 +94,7 @@
       'a17-tablerow': a17Tablerow,
       'a17-paginate': a17Paginate,
       'a17-spinner': a17Spinner,
-      draggable
+      draggable: VueDraggableNext
     },
     mixins: [DatatableMixin, DraggableMixin],
     data: function () {

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

@@ -24,8 +24,7 @@
 </template>
 
 <script>
-  import draggable from 'vuedraggable'
-
+  import { VueDraggableNext } from 'vue-draggable-next'
   import { DatatableMixin, DraggableMixin, NestedDraggableMixin } from '@/mixins/index'
   import { DATATABLE } from '@/store/mutations'
 
@@ -35,7 +34,7 @@
     name: 'a17-nested-list',
     components: {
       'a17-nested-item': NestedItem,
-      draggable
+      draggable: VueDraggableNext
     },
     mixins: [DatatableMixin, DraggableMixin, NestedDraggableMixin],
     props: {

package.json

@@ -43,10 +43,10 @@
     "tinycolor2": "1.6.0",
     "truncate-utf8-bytes": "1.0.2",
     "vue": "^3.4.21",
+    "vue-draggable-next": "^2.2.1",
     "vue-select": "^4.0.0-beta.6",
     "vue-timeago3": "^2.3.2",
     "vue3trend": "^1.0.0",
-    "vuedraggable": "2.24.3",
     "vuex": "^4.0.0"
   },
   "devDependencies": {

vue.config.js

@@ -139,21 +139,12 @@ const config = {
     plugins
   },
   chainWebpack: (config) => {
-    config.resolve.alias.set('vue', '@vue/compat')
-
-    config.module
-      .rule('vue')
-      .use('vue-loader')
-      .tap((options) => {
-        return {
-          ...options,
-          compilerOptions: {
-            compatConfig: {
-              MODE: 3
-            }
-          }
-        }
+    config.plugin('define').tap((definitions) => {
+      Object.assign(definitions[0], {
+        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'true'
       })
+      return definitions
+    })
   }
 }