@ditojs/admin 2.0.1 → 2.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "type": "module",
   "description": "Dito.js Admin is a schema based admin interface for Dito.js Server, featuring auto-generated views and forms and built with Vue.js",
   "repository": "https://github.com/ditojs/dito/tree/master/packages/admin",
@@ -62,10 +62,9 @@
     "filesize": "^10.0.7",
     "filesize-parser": "^1.5.0",
     "nanoid": "^4.0.2",
-    "sortablejs": "^1.15.0",
-    "sortablejs-vue3": "^1.2.9",
     "tinycolor2": "^1.6.0",
     "vue": "^3.2.47",
+    "vue-draggable-plus": "^0.1.1",
     "vue-multiselect": "^3.0.0-beta.1",
     "vue-router": "^4.1.6",
     "vue-upload-component": "^3.1.8"
@@ -81,7 +80,7 @@
     "vite": "^4.2.1"
   },
   "types": "types",
-  "gitHead": "80c209774fe4ee5243eb25d77ac9a97bfb694d8c",
+  "gitHead": "3e7213fbe25c5697f4f11dada830037934e396c8",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

package/src/components/DitoTreeItem.vue

@@ -60,29 +60,30 @@
         :store="store"
         :disabled="disabled"
       )
-  vue-sortable(
+  vue-draggable(
     v-if="childrenSchema"
     v-show="opened"
-    :list="childrenItems"
-    :options="getDragOptions(childrenDraggable, true)"
-    :itemKey="item => getItemUid(childrenSchema, item.data)"
+    :modelValue="updateOrder(childrenSchema, childrenList)"
+    @update:modelValue="value => childrenList = value"
     @start="onStartDrag"
     @end="onEndDrag($event, childrenSchema)"
+    v-bind="getDragOptions(childrenDraggable, true)"
   )
-    template(#item="{ element: item, index }")
-      dito-tree-item(
-        :schema="childrenSchema"
-        :dataPath="getItemDataPath(childrenSchema, index)"
-        :data="item.data"
-        :path="item.path"
-        :open="item.open"
-        :active="item.active"
-        :draggable="childrenDraggable"
-        :label="getItemLabel(childrenSchema, item.data, { index })"
-        :level="level + 1"
-      )
-      //- TODO: Convert dito-tree-item to use dito-label internally, and then
-      //- pass `asObject: true` in the `getItemLabel()` call above.
+    dito-tree-item(
+      v-for="(item, index) in childrenItems"
+      :key="getItemUid(childrenSchema, item.data)"
+      :schema="childrenSchema"
+      :dataPath="getItemDataPath(childrenSchema, index)"
+      :data="item.data"
+      :path="item.path"
+      :open="item.open"
+      :active="item.active"
+      :draggable="childrenDraggable"
+      :label="getItemLabel(childrenSchema, item.data, { index })"
+      :level="level + 1"
+    )
+    //- TODO: Convert dito-tree-item to use dito-label internally, and then
+    //- pass `asObject: true` in the `getItemLabel()` call above.
 </template>
 
 <style lang="sass">
@@ -151,7 +152,7 @@
 </style>
 
 <script>
-import { Sortable as VueSortable } from 'sortablejs-vue3'
+import { VueDraggable } from 'vue-draggable-plus'
 import DitoComponent from '../DitoComponent.js'
 import OrderedMixin from '../mixins/OrderedMixin.js'
 import { appendDataPath } from '../utils/data.js'
@@ -160,7 +161,7 @@ import { getNamedSchemas, hasFormSchema } from '../utils/schema.js'
 
 // @vue/component
 export default DitoComponent.component('dito-tree-item', {
-  components: { VueSortable },
+  components: { VueDraggable },
   mixins: [OrderedMixin],
   inject: ['container'],
 

package/src/types/TypeList.vue

@@ -38,86 +38,87 @@
       :columns="columns"
       :hasEditButtons="hasEditButtons"
     )
-    vue-sortable(
+    vue-draggable(
       tag="tbody"
-      :list="updateOrder(sourceSchema, listData, paginationRange)"
-      :options="getDragOptions(draggable)"
-      :itemKey="item => getItemUid(schema, item)"
+      :modelValue="updateOrder(sourceSchema, listData, paginationRange)"
+      @update:modelValue="value => listData = value"
       @start="onStartDrag"
       @end="onEndDrag"
+      :v-bind="getDragOptions(draggable)"
     )
-      template(#item="{ element: item, index }")
-        tr(
-          :id="getDataPath(index)"
-        )
-          template(v-if="columns")
-            template(
-              v-for="column in columns"
-            )
-              dito-table-cell(
-                v-if="shouldRender(column)"
-                :key="column.name"
-                :class="getCellClass(column)"
-                :cell="column"
-                :schema="schema"
-                :dataPath="getDataPath(index)"
-                :data="item"
-                :meta="nestedMeta"
-                :store="store"
-                :nested="false"
-                :disabled="disabled || isLoading"
-              )
+      tr(
+        v-for="item, index in listData"
+        :key="getItemUid(schema, item)"
+        :id="getDataPath(index)"
+      )
+        template(v-if="columns")
           template(
-            v-else
-          )
-            td
-              dito-schema-inlined(
-                v-if="isInlined"
-                :label="getItemLabel(schema, item, { index, asObject: true })"
-                :schema="getItemFormSchema(schema, item, context)"
-                :dataPath="getDataPath(index)"
-                :data="item"
-                :meta="nestedMeta"
-                :store="getChildStore(index)"
-                :disabled="disabled || isLoading"
-                :collapsed="collapsed"
-                :collapsible="collapsible"
-                :deletable="deletable"
-                :draggable="draggable"
-                :editable="editable"
-                :editPath="getEditPath(item, index)"
-                @delete="deleteItem(item, index)"
-              )
-              component(
-                v-else-if="schema.component"
-                :is="schema.component"
-                :dataPath="getDataPath(index)"
-                :data="item"
-                :nested="false"
-              )
-              span(
-                v-else-if="render"
-                v-html="render(getContext(item, index))"
-              )
-              span(
-                v-else
-                v-html="getItemLabel(schema, item, { index })"
-              )
-          td.dito-cell-edit-buttons(
-            v-if="hasCellEditButtons"
+            v-for="column in columns"
           )
-            dito-edit-buttons(
-              :deletable="deletable"
-              :draggable="draggable"
-              :editable="editable"
-              :editPath="getEditPath(item, index)"
+            dito-table-cell(
+              v-if="shouldRender(column)"
+              :key="column.name"
+              :class="getCellClass(column)"
+              :cell="column"
+              :schema="schema"
+              :dataPath="getDataPath(index)"
+              :data="item"
+              :meta="nestedMeta"
+              :store="store"
+              :nested="false"
+              :disabled="disabled || isLoading"
+            )
+        template(
+          v-else
+        )
+          td
+            dito-schema-inlined(
+              v-if="isInlined"
+              :label="getItemLabel(schema, item, { index, asObject: true })"
               :schema="getItemFormSchema(schema, item, context)"
               :dataPath="getDataPath(index)"
               :data="item"
               :meta="nestedMeta"
               :store="getChildStore(index)"
+              :disabled="disabled || isLoading"
+              :collapsed="collapsed"
+              :collapsible="collapsible"
+              :deletable="deletable"
+              :draggable="draggable"
+              :editable="editable"
+              :editPath="getEditPath(item, index)"
               @delete="deleteItem(item, index)"
             )
+            component(
+              v-else-if="schema.component"
+              :is="schema.component"
+              :dataPath="getDataPath(index)"
+              :data="item"
+              :nested="false"
+            )
+            span(
+              v-else-if="render"
+              v-html="render(getContext(item, index))"
+            )
+            span(
+              v-else
+              v-html="getItemLabel(schema, item, { index })"
+            )
+        td.dito-cell-edit-buttons(
+          v-if="hasCellEditButtons"
+        )
+          dito-edit-buttons(
+            :deletable="deletable"
+            :draggable="draggable"
+            :editable="editable"
+            :editPath="getEditPath(item, index)"
+            :schema="getItemFormSchema(schema, item, context)"
+            :dataPath="getDataPath(index)"
+            :data="item"
+            :meta="nestedMeta"
+            :store="getChildStore(index)"
+            @delete="deleteItem(item, index)"
+          )
     //- Render create buttons inside table when not in a single component view:
     tfoot(
       v-if="hasListButtons && !single"
@@ -175,11 +176,11 @@
 </style>
 
 <script>
+import { VueDraggable } from 'vue-draggable-plus'
 import TypeComponent from '../TypeComponent.js'
 import DitoContext from '../DitoContext.js'
 import SourceMixin from '../mixins/SourceMixin.js'
 import OrderedMixin from '../mixins/OrderedMixin.js'
-import { Sortable as VueSortable } from 'sortablejs-vue3'
 import {
   getNamedSchemas, getViewEditPath,
   resolveSchemaComponent, resolveSchemaComponents
@@ -190,7 +191,7 @@ import { pickBy, equals, hyphenate } from '@ditojs/utils'
 
 // @vue/component
 export default TypeComponent.register('list', {
-  components: { VueSortable },
+  components: { VueDraggable },
   mixins: [SourceMixin, OrderedMixin],
 
   getSourceType(type) {

package/src/types/TypeUpload.vue

@@ -12,41 +12,42 @@
           span Status
         th
           span
-    vue-sortable(
+    vue-draggable(
       tag="tbody"
-      :list="files"
-      :options="getDragOptions(draggable)"
-      itemKey="key"
       @start="onStartDrag"
       @end="onEndDrag"
+      v-model="files"
+      v-bind="getDragOptions(draggable)"
     )
-      template(#item="{ element: file, index }")
-        tr
-          td(v-html="renderFile(file, index)")
-          td {{ formatFileSize(file.size) }}
-          td
-            template(v-if="file.upload")
-              template(v-if="file.upload.error")
-                | Error: {{ file.upload.error }}
-              template(v-else-if="file.upload.active")
-                | Uploading...
-              template(v-else-if="file.upload.success")
-                | Uploaded
-            template(v-else)
-              | Stored
-          td.dito-cell-edit-buttons
-            .dito-buttons.dito-buttons-round
-              //- Firefox doesn't like <button> here, so use <a> instead:
-              a.dito-button(
-                v-if="draggable"
-                v-bind="getButtonAttributes(verbs.drag)"
-              )
-              button.dito-button(
-                v-if="deletable"
-                type="button"
-                @click="deleteFile(file, index)"
-                v-bind="getButtonAttributes(verbs.delete)"
-              )
+      tr(
+        v-for="(file, index) in files"
+        :key="file.key"
+      )
+        td(v-html="renderFile(file, index)")
+        td {{ formatFileSize(file.size) }}
+        td
+          template(v-if="file.upload")
+            template(v-if="file.upload.error")
+              | Error: {{ file.upload.error }}
+            template(v-else-if="file.upload.active")
+              | Uploading...
+            template(v-else-if="file.upload.success")
+              | Uploaded
+          template(v-else)
+            | Stored
+        td.dito-cell-edit-buttons
+          .dito-buttons.dito-buttons-round
+            //- Firefox doesn't like <button> here, so use <a> instead:
+            a.dito-button(
+              v-if="draggable"
+              v-bind="getButtonAttributes(verbs.drag)"
+            )
+            button.dito-button(
+              v-if="deletable"
+              type="button"
+              @click="deleteFile(file, index)"
+              v-bind="getButtonAttributes(verbs.delete)"
+            )
     tfoot
       tr
         td(:colspan="4")
@@ -106,11 +107,11 @@
 </style>
 
 <script>
+import VueUpload from 'vue-upload-component'
+import { VueDraggable } from 'vue-draggable-plus'
 import TypeComponent from '../TypeComponent.js'
 import DitoContext from '../DitoContext.js'
 import OrderedMixin from '../mixins/OrderedMixin.js'
-import VueUpload from 'vue-upload-component'
-import { Sortable as VueSortable } from 'sortablejs-vue3'
 import parseFileSize from 'filesize-parser'
 import { getSchemaAccessor } from '../utils/accessor.js'
 import { formatFileSize } from '../utils/units.js'
@@ -119,7 +120,7 @@ import { isArray, asArray, escapeHtml } from '@ditojs/utils'
 
 // @vue/component
 export default TypeComponent.register('upload', {
-  components: { VueUpload, VueSortable },
+  components: { VueUpload, VueDraggable },
   mixins: [OrderedMixin],
 
   data() {