@ditojs/admin 2.3.2 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.3.2",
+  "version": "2.4.0",
   "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,8 +33,8 @@
     "not ie_mob > 0"
   ],
   "dependencies": {
-    "@ditojs/ui": "^2.3.2",
-    "@ditojs/utils": "^2.3.0",
+    "@ditojs/ui": "^2.4.0",
+    "@ditojs/utils": "^2.4.0",
     "@kyvg/vue3-notification": "^2.9.0",
     "@lk77/vue3-color": "^3.0.6",
     "@tiptap/core": "^2.0.3",
@@ -74,7 +74,7 @@
     "vue-upload-component": "^3.1.8"
   },
   "devDependencies": {
-    "@ditojs/build": "^2.3.0",
+    "@ditojs/build": "^2.4.0",
     "@vitejs/plugin-vue": "^4.1.0",
     "@vue/compiler-sfc": "^3.2.47",
     "pug": "^3.0.2",
@@ -83,7 +83,7 @@
     "vite": "^4.3.1"
   },
   "types": "types",
-  "gitHead": "e8034d836e783c606746b8a51b20d8969f1472fc",
+  "gitHead": "11402f86e31da1b8ebd0a6ea5c984d3abf12d7be",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

package/src/components/DitoContainer.vue

@@ -248,7 +248,7 @@ export default DitoComponent.component('DitoContainer', {
       --justify: flex-end;
     }
 
-    &:not(#{$self}--only-in-row) {
+    &:not(#{$self}--alone-in-row) {
       // Now only apply alignment if there are neighbouring components no the
       // same row that also align.
       // Look ahead:
@@ -260,6 +260,12 @@ export default DitoComponent.component('DitoContainer', {
     }
   }
 
+  &--drop-target {
+    background: $content-color-background;
+    border-radius: $border-radius;
+    z-index: $drag-overlay-z-index + 1;
+  }
+
   &--omit-padding {
     padding: 0;
 

package/src/components/DitoHeader.vue

@@ -77,6 +77,7 @@ export default DitoComponent.component('DitoHeader', {
 @import '../styles/_imports';
 
 .dito-header {
+  position: relative;
   background: $color-black;
   font-size: $header-font-size;
   line-height: $header-line-height;

package/src/components/DitoMenu.vue

@@ -53,23 +53,28 @@ export default DitoComponent.component('DitoMenu', {
       }
     },
 
-    getItemHref(item) {
+    getItemPath(item) {
       return item?.path
         ? `/${item.path}`
         : item.items
-          ? this.getItemHref(Object.values(item.items)[0])
+          ? this.getItemPath(Object.values(item.items)[0])
           : null
     },
 
+    getItemHref(item) {
+      const path = this.getItemPath(item)
+      return path ? this.$router.resolve(path).href : null
+    },
+
     isActiveItem(item) {
       return (
-        this.$route.path.startsWith(this.getItemHref(item)) ||
+        this.$route.path.startsWith(this.getItemPath(item)) ||
         item.items && Object.values(item.items).some(this.isActiveItem)
       )
     },
 
     onClickItem(item) {
-      const path = this.getItemHref(item)
+      const path = this.getItemPath(item)
       if (path) {
         this.$router.push({ path, force: true })
       }

package/src/components/DitoRoot.vue

@@ -5,6 +5,10 @@
     position="top right"
     classes="dito-notification"
   )
+  Transition(name="dito-drag")
+    .dito-drag-overlay(
+      v-if="isDraggingFiles"
+    )
   TransitionGroup(name="dito-dialog")
     DitoDialog(
       v-for="(dialog, key) in dialogs"
@@ -69,7 +73,8 @@ export default DitoComponent.component('DitoRoot', {
       removeRoutes: null,
       dialogs: {},
       allowLogin: false,
-      loadingCount: 0
+      loadingCount: 0,
+      isDraggingFiles: false
     }
   },
 
@@ -91,6 +96,8 @@ export default DitoComponent.component('DitoRoot', {
   },
 
   async mounted() {
+    this.setupDragAndDrop()
+
     tippyDelegate(this.$el, {
       target: '.dito-info',
       onCreate(instance) {
@@ -103,6 +110,7 @@ export default DitoComponent.component('DitoRoot', {
         })
       }
     })
+
     // Clear the label marked as active on all mouse and keyboard events, except
     // the ones that DitoLabel itself intercepts.
     this.domOn(document, {
@@ -118,6 +126,7 @@ export default DitoComponent.component('DitoRoot', {
         }
       }
     })
+
     try {
       this.allowLogin = false
       if (await this.fetchUser()) {
@@ -132,6 +141,81 @@ export default DitoComponent.component('DitoRoot', {
   },
 
   methods: {
+    setupDragAndDrop() {
+      // This code only happens the visual effects around dragging and dropping
+      // files into a `DitoTypeUpload` component. The actual uploading is
+      // handled by the `DitoTypeUpload` component itself.
+
+      let dragCount = 0
+      let uploads = []
+
+      const toggleDropTargetClass = enabled => {
+        for (const upload of uploads) {
+          upload.closest('.dito-container').classList.toggle(
+            'dito-container--drop-target',
+            enabled
+          )
+        }
+        if (!enabled) {
+          uploads = []
+        }
+      }
+
+      const setDraggingFiles = enabled => {
+        this.isDraggingFiles = enabled
+        if (enabled) {
+          toggleDropTargetClass(true)
+        } else {
+          setTimeout(() => toggleDropTargetClass(false), 250)
+        }
+      }
+
+      this.domOn(document, {
+        dragenter: event => {
+          if (!dragCount && event.dataTransfer) {
+            uploads = document.querySelectorAll('.dito-upload')
+            const hasUploads = uploads.length > 0
+            event.dataTransfer.effectAllowed = hasUploads ? 'copy' : 'none'
+            if (hasUploads) {
+              setDraggingFiles(true)
+            } else {
+              event.preventDefault()
+              event.stopPropagation()
+              return
+            }
+          }
+          dragCount++
+        },
+
+        dragleave: event => {
+          dragCount--
+          if (!dragCount && event.dataTransfer) {
+            setDraggingFiles(false)
+          }
+        },
+
+        dragover: event => {
+          if (event.dataTransfer) {
+            const canDrop = event.target.closest(
+              '.dito-container:has(.dito-upload)'
+            )
+            event.dataTransfer.dropEffect = canDrop ? 'copy' : 'none'
+            if (!canDrop) {
+              event.preventDefault()
+              event.stopPropagation()
+            }
+          }
+        },
+
+        drop: event => {
+          dragCount = 0
+          if (event.dataTransfer) {
+            setDraggingFiles(false)
+          }
+        }
+      })
+    },
+
     notify({ type = 'info', title, text } = {}) {
       title ||= (
         {
@@ -389,4 +473,27 @@ function addRoutes(router, routes) {
     background: $content-color-background;
   }
 }
+
+.dito-drag-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: $drag-overlay-z-index;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.25);
+  pointer-events: none;
+  backdrop-filter: blur(8px);
+}
+
+.dito-drag-enter-active,
+.dito-drag-leave-active {
+  transition: opacity 0.25s, backdrop-filter 0.25s;
+}
+
+.dito-drag-enter-from,
+.dito-drag-leave-to {
+  opacity: 0;
+  backdrop-filter: blur(0);
+}
 </style>

package/src/components/DitoTableHead.vue

@@ -94,6 +94,7 @@ export default DitoComponent.component('DitoTableHead', {
 
       .dito-button {
         // Convention: Nested spans handle padding, see below
+        display: block; // Override default inline-flex positioning.
         padding: 0;
         width: 100%;
         text-align: inherit;

package/src/mixins/TypeMixin.js

@@ -239,17 +239,15 @@ export default {
 
     // @overridable
     focusElement() {
-      const [element] = asArray(this.$refs.element)
-      if (element) {
-        this.$nextTick(() => {
-          element.focus()
-          // If the element is disabled, `focus()` will likely not have the
-          // desired effect. Use `scrollIntoView()` if available:
-          if (this.disabled) {
-            ;(element.$el || element).scrollIntoView?.()
-          }
-        })
-      }
+      const [element = this.$el] = asArray(this.$refs.element)
+      this.$nextTick(() => {
+        element.focus?.()
+        // If the element is disabled, `focus()` will likely not have the
+        // desired effect. Use `scrollIntoView()` if available:
+        if (!element.focus || this.disabled) {
+          ;(element.$el || element).scrollIntoView?.()
+        }
+      })
     },
 
     focus() {

package/src/styles/_button.scss

@@ -149,9 +149,9 @@
     // For now, nothing for these:
     // .dito-button-create:empty::before,
     // .dito-button-add:empty::before
-    // Special .dito-button-add-upload without :empty:
-    .dito-button-add-upload::before {
-      @extend %icon-add;
+
+    .dito-button-upload:empty::before {
+      @extend %icon-upload;
     }
 
     .dito-button-delete:empty::before,

package/src/styles/_settings.scss

@@ -66,6 +66,9 @@ $menu-padding-ver: $header-padding-ver - $menu-spacing;
 $menu-padding-hor: $header-padding-hor - $menu-spacing;
 $menu-padding: $menu-padding-ver $menu-padding-hor;
 
+// Drag & Drop
+$drag-overlay-z-index: 2000;
+
 // Patterns
 $pattern-transparency-size: ($font-size - $border-width) * $input-height-factor;
 $pattern-transparency: repeating-conic-gradient(

package/src/types/DitoTypeButton.vue

@@ -1,7 +1,6 @@
 <template lang="pug">
 button.dito-button(
   :id="dataPath"
-  ref="element"
   :type="type"
   :title="title"
   :class="buttonClass"

package/src/types/DitoTypeCheckbox.vue

@@ -1,7 +1,6 @@
 <template lang="pug">
 input.dito-checkbox(
   :id="dataPath"
-  ref="element"
   v-model="value"
   type="checkbox"
   v-bind="attributes"

package/src/types/DitoTypeComputed.vue

@@ -3,7 +3,6 @@
 //- involve actually rendering it when the component is not visible.
 input.dito-text.dito-input(
   :id="dataPath"
-  ref="element"
   :name="name"
   type="text"
   :value="value"

package/src/types/DitoTypeMarkup.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 .dito-markup(:id="dataPath")
-  .dito-markup-toolbar(:editor="editor")
+  .dito-markup-toolbar
     .dito-buttons.dito-buttons-toolbar(
       v-if="groupedButtons.length > 0"
     )

package/src/types/DitoTypeNumber.vue

@@ -1,7 +1,6 @@
 <template lang="pug">
 InputField.dito-number(
   :id="dataPath"
-  ref="element"
   v-model="inputValue"
   type="number"
   v-bind="attributes"

package/src/types/DitoTypeProgress.vue

@@ -1,7 +1,6 @@
 <template lang="pug">
 progress.dito-progress(
   :id="dataPath"
-  ref="element"
   :value="progressValue"
   :max="progressMax"
   v-bind="attributes"

package/src/types/DitoTypeSwitch.vue

@@ -1,7 +1,6 @@
 <template lang="pug">
 SwitchButton.dito-switch(
   :id="dataPath"
-  ref="element"
   v-model="value"
   :labels="labels"
   v-bind="attributes"

package/src/types/DitoTypeText.vue

@@ -1,7 +1,6 @@
 <template lang="pug">
 InputField.dito-text(
   :id="dataPath"
-  ref="element"
   v-model="inputValue"
   :type="inputType"
   v-bind="attributes"

package/src/types/DitoTypeTextarea.vue

@@ -1,7 +1,6 @@
 <template lang="pug">
 textarea.dito-textarea.dito-input(
   :id="dataPath"
-  ref="element"
   v-model="value"
   v-bind="attributes"
   :rows="lines"

package/src/types/DitoTypeUpload.vue

@@ -73,13 +73,8 @@
                 v-if="isUploadActive"
                 type="button"
                 @click.prevent="upload.active = false"
-              ) Cancel All
-              button.dito-button(
-                v-else-if="isUploadReady"
-                type="button"
-                @click.prevent="upload.active = true"
-              ) Upload All
-              VueUpload.dito-button.dito-button-add-upload(
+              ) Cancel
+              VueUpload.dito-button(
                 ref="upload"
                 v-model="uploads"
                 :inputId="dataPath"
@@ -90,10 +85,13 @@
                 :accept="accept"
                 :multiple="multiple"
                 :size="maxSize"
-                title="Upload Files"
+                :title="multiple ? 'Upload Files' : 'Upload File'"
+                :drop="$el?.closest('.dito-container')"
+                :dropDirectory="true"
                 @input-filter="inputFilter"
                 @input-file="inputFile"
               )
+                .dito-button-upload
 </template>
 
 <script>
@@ -169,7 +167,7 @@ export default DitoTypeComponent.register('upload', {
 
     isUploadReady() {
       return (
-        this.uploads.length &&
+        this.uploads.length > 0 &&
         !(this.upload.active || this.upload.uploaded)
       )
     },
@@ -180,7 +178,7 @@ export default DitoTypeComponent.register('upload', {
 
     uploadProgress() {
       return (
-        this.uploads.reduce((total, file) => total + file.progress, 0) /
+        this.uploads.reduce((total, file) => +file.progress + total, 0) /
         this.uploads.length
       )
     },
@@ -193,6 +191,17 @@ export default DitoTypeComponent.register('upload', {
     }
   },
 
+  watch: {
+    isUploadReady(ready) {
+      if (ready) {
+        // Auto-upload.
+        this.$nextTick(() => {
+          this.upload.active = true
+        })
+      }
+    }
+  },
+
   methods: {
     formatFileSize,
 
@@ -293,6 +302,7 @@ export default DitoTypeComponent.register('upload', {
             this.removeFile(newFile)
           }
         } else if (error) {
+          this.removeFile(newFile)
           const text = (
             {
               abort: 'Upload aborted',
@@ -310,7 +320,6 @@ export default DitoTypeComponent.register('upload', {
             title: 'File Upload Error',
             text
           })
-          this.removeFile(newFile)
         }
       }
     },
@@ -347,7 +356,7 @@ function asFiles(value) {
     }
   }
 
-  .dito-button-add-upload {
+  .dito-button-upload {
     padding: 0;
 
     > * {