@ditojs/admin 2.0.3 → 2.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.0.3",
+  "version": "2.0.5",
   "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",
@@ -33,7 +33,7 @@
     "not ie_mob > 0"
   ],
   "dependencies": {
-    "@ditojs/ui": "^2.0.3",
+    "@ditojs/ui": "^2.0.4",
     "@ditojs/utils": "^2.0.1",
     "@kyvg/vue3-notification": "^2.9.0",
     "@lk77/vue3-color": "^3.0.6",
@@ -58,13 +58,15 @@
     "@tiptap/extension-underline": "^2.0.2",
     "@tiptap/pm": "^2.0.2",
     "@tiptap/vue-3": "^2.0.2",
+    "@vueuse/integrations": "^10.0.0-beta.2",
     "codeflask": "^1.4.1",
     "filesize": "^10.0.7",
     "filesize-parser": "^1.5.0",
+    "focus-trap": "^7.4.0",
     "nanoid": "^4.0.2",
+    "sortablejs": "^1.15.0",
     "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"
@@ -80,7 +82,7 @@
     "vite": "^4.2.1"
   },
   "types": "types",
-  "gitHead": "5ca73cc4cf410fbaa95a8e7079cb5c264cc67b7c",
+  "gitHead": "ee7c025d76cf6a59825a407455d3b990e0f016ed",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

package/src/components/DitoDialog.vue

@@ -6,16 +6,17 @@
   :style="{ '--width': `${settings.width}px` }"
   @click="settings.clickToClose && close()"
 )
-  form.dito-scroll-parent(@submit.prevent="submit")
-    dito-schema.dito-scroll(
-      :schema="schema"
-      :data="dialogData"
-    )
-      template(#buttons)
-        dito-buttons.dito-buttons-large(
-          :buttons="buttonSchemas"
-          :data="dialogData"
-        )
+  use-focus-trap(:options="{ immediate: true }")
+    form.dito-scroll-parent(@submit.prevent="submit")
+      dito-schema.dito-scroll(
+        :schema="schema"
+        :data="dialogData"
+      )
+        template(#buttons)
+          dito-buttons.dito-buttons-large(
+            :buttons="buttonSchemas"
+            :data="dialogData"
+          )
 </template>
 
 <style lang="sass">
@@ -65,9 +66,12 @@ import { clone } from '@ditojs/utils'
 import { addEvents } from '@ditojs/ui/src'
 import DitoComponent from '../DitoComponent.js'
 import { getButtonSchemas } from '../utils/schema.js'
+import { UseFocusTrap } from '@vueuse/integrations/useFocusTrap/component'
 
 // @vue/component
 export default DitoComponent.component('dito-dialog', {
+  components: { UseFocusTrap },
+
   provide() {
     return {
       $dialogComponent: () => this

package/src/components/DitoTreeItem.vue

@@ -60,14 +60,12 @@
         :store="store"
         :disabled="disabled"
       )
-  vue-draggable(
+  use-sortable(
     v-if="childrenSchema"
     v-show="opened"
     :modelValue="updateOrder(childrenSchema, childrenList)"
     @update:modelValue="value => childrenList = value"
-    @start="onStartDrag"
-    @end="onEndDrag($event, childrenSchema)"
-    v-bind="getDragOptions(childrenDraggable, true)"
+    :options="getSortableOptions(childrenDraggable, true)"
   )
     dito-tree-item(
       v-for="(item, index) in childrenItems"
@@ -152,17 +150,15 @@
 </style>
 
 <script>
-import { VueDraggable } from 'vue-draggable-plus'
 import DitoComponent from '../DitoComponent.js'
-import OrderedMixin from '../mixins/OrderedMixin.js'
+import SortableMixin from '../mixins/SortableMixin.js'
 import { appendDataPath } from '../utils/data.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
 import { getNamedSchemas, hasFormSchema } from '../utils/schema.js'
 
 // @vue/component
 export default DitoComponent.component('dito-tree-item', {
-  components: { VueDraggable },
-  mixins: [OrderedMixin],
+  mixins: [SortableMixin],
   inject: ['container'],
 
   props: {

package/src/mixins/DitoMixin.js

@@ -245,19 +245,6 @@ export default {
       }
     },
 
-    getDragOptions(draggable, fallback = false) {
-      return {
-        animation: 150,
-        disabled: !draggable,
-        handle: '.dito-button-drag',
-        dragClass: 'dito-drag-active',
-        chosenClass: 'dito-drag-chosen',
-        ghostClass: 'dito-drag-ghost',
-        fallbackClass: 'dito-drag-fallback',
-        forceFallback: fallback
-      }
-    },
-
     // TODO: Rename *Link() to *Route().
     getQueryLink(query) {
       return {

package/src/mixins/{OrderedMixin.js → SortableMixin.js}

@@ -1,7 +1,9 @@
-import ItemMixin from '../mixins/ItemMixin.js'
+import ItemMixin from './ItemMixin.js'
+import { UseSortable } from '@vueuse/integrations/useSortable/component'
 
 // @vue/component
 export default {
+  components: { UseSortable },
   mixins: [ItemMixin],
 
   data() {
@@ -11,6 +13,21 @@ export default {
   },
 
   methods: {
+    getSortableOptions(draggable, fallback = false) {
+      return {
+        animation: 150,
+        disabled: !draggable,
+        handle: '.dito-button-drag',
+        dragClass: 'dito-sortable-active',
+        chosenClass: 'dito-sortable-chosen',
+        ghostClass: 'dito-sortable-ghost',
+        fallbackClass: 'dito-sortable-fallback',
+        forceFallback: fallback,
+        onStart: this.onStartDrag,
+        onEnd: this.onEndDrag
+      }
+    },
+
     onStartDrag() {
       this.dragging = true
     },

package/src/styles/{_drag.sass → _sortable.sass}

@@ -1,4 +1,4 @@
-.dito-drag-fallback
+.dito-sortable-fallback
   filter: drop-shadow(0 2px 4px $color-shadow)
 
   // Nested <td> need to also switch to `display: block` style during dragging

package/src/styles/style.sass

@@ -5,6 +5,6 @@
 @import '_pulldown'
 @import '_layout'
 @import '_scroll'
-@import '_drag'
+@import '_sortable'
 @import '_table'
 @import '_notifications'

package/src/types/TypeList.vue

@@ -38,13 +38,11 @@
       :columns="columns"
       :hasEditButtons="hasEditButtons"
     )
-    vue-draggable(
+    use-sortable(
       tag="tbody"
       :modelValue="updateOrder(sourceSchema, listData, paginationRange)"
       @update:modelValue="value => listData = value"
-      @start="onStartDrag"
-      @end="onEndDrag"
-      :v-bind="getDragOptions(draggable)"
+      :options="getSortableOptions(draggable)"
     )
       tr(
         v-for="item, index in listData"
@@ -176,11 +174,10 @@
 </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 SortableMixin from '../mixins/SortableMixin.js'
 import {
   getNamedSchemas, getViewEditPath,
   resolveSchemaComponent, resolveSchemaComponents
@@ -191,8 +188,7 @@ import { pickBy, equals, hyphenate } from '@ditojs/utils'
 
 // @vue/component
 export default TypeComponent.register('list', {
-  components: { VueDraggable },
-  mixins: [SourceMixin, OrderedMixin],
+  mixins: [SourceMixin, SortableMixin],
 
   getSourceType(type) {
     // No need for transformation here. See TypeTreeList for details.

package/src/types/TypeUpload.vue

@@ -12,12 +12,10 @@
           span Status
         th
           span
-    vue-draggable(
+    use-sortable(
       tag="tbody"
-      @start="onStartDrag"
-      @end="onEndDrag"
       v-model="files"
-      v-bind="getDragOptions(draggable)"
+      :options="getSortableOptions(draggable)"
     )
       tr(
         v-for="(file, index) in files"
@@ -107,21 +105,20 @@
 </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 SortableMixin from '../mixins/SortableMixin.js'
 import parseFileSize from 'filesize-parser'
 import { getSchemaAccessor } from '../utils/accessor.js'
 import { formatFileSize } from '../utils/units.js'
 import { appendDataPath } from '../utils/data.js'
 import { isArray, asArray, escapeHtml } from '@ditojs/utils'
+import VueUpload from 'vue-upload-component'
 
 // @vue/component
 export default TypeComponent.register('upload', {
-  components: { VueUpload, VueDraggable },
-  mixins: [OrderedMixin],
+  components: { VueUpload },
+  mixins: [SortableMixin],
 
   data() {
     return {