@ditojs/admin 2.3.1 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.3.1",
+  "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.1",
-    "@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": "1b5f5121a2e8e6d3741f0bb2b81d38c2343810d6",
+  "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/DitoDialog.vue

@@ -179,6 +179,7 @@ export default DitoComponent.component('DitoDialog', {
   background: rgba(0, 0, 0, 0.2);
 
   &__focus-trap {
+    display: flex;
     max-height: 100%;
   }
 

package/src/components/DitoHeader.vue

@@ -20,7 +20,7 @@ nav.dito-header
       v-if="isLoading"
     )
   //- Teleport target for `.dito-schema-header`:
-  .dito-menu
+  .dito-header__menu
   slot
 </template>
 
@@ -77,15 +77,16 @@ export default DitoComponent.component('DitoHeader', {
 @import '../styles/_imports';
 
 .dito-header {
+  position: relative;
   background: $color-black;
-  font-size: $menu-font-size;
-  line-height: $menu-line-height;
-  z-index: $menu-z-index;
+  font-size: $header-font-size;
+  line-height: $header-line-height;
+  z-index: $header-z-index;
   @include user-select(none);
 
   span {
     display: inline-block;
-    padding: $menu-padding;
+    padding: $header-padding;
     color: $color-white;
   }
 

package/src/components/DitoMenu.vue

@@ -0,0 +1,177 @@
+<template lang="pug">
+ul.dito-menu(
+  v-resize="onResize"
+  :style="{ '--width': width ? `${width}px` : null }"
+)
+  li(
+    v-for="item in items"
+  )
+    template(
+      v-if="shouldRenderSchema(item)"
+    )
+      a.dito-link(
+        :href="getItemHref(item)"
+        :class="getItemClass(item, 'dito-sub-menu-link')"
+        @click.prevent.stop="onClickItem(item)"
+      ) {{ getLabel(item) }}
+      DitoMenu(
+        v-if="item.items"
+        :class="getItemClass(item, 'dito-sub-menu')"
+        :items="item.items"
+      )
+</template>
+
+<script>
+import DitoComponent from '../DitoComponent.js'
+
+// @vue/component
+export default DitoComponent.component('DitoMenu', {
+  props: {
+    items: {
+      type: [Object, Array],
+      default: () => []
+    }
+  },
+
+  data() {
+    return {
+      width: 0
+    }
+  },
+
+  methods: {
+    onResize({ contentRect: { width } }) {
+      if (width) {
+        this.width = width
+      }
+    },
+
+    getItemClass(item, subMenuClass) {
+      return {
+        [subMenuClass]: !!item.items,
+        'dito-active': this.isActiveItem(item)
+      }
+    },
+
+    getItemPath(item) {
+      return item?.path
+        ? `/${item.path}`
+        : item.items
+          ? 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.getItemPath(item)) ||
+        item.items && Object.values(item.items).some(this.isActiveItem)
+      )
+    },
+
+    onClickItem(item) {
+      const path = this.getItemPath(item)
+      if (path) {
+        this.$router.push({ path, force: true })
+      }
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+@use 'sass:color';
+@import '../styles/_imports';
+
+.dito-menu {
+  $item-height: $menu-font-size + 2 * $menu-padding-ver;
+
+  border-right: $border-style;
+  padding: 0 $menu-spacing;
+
+  li {
+    &:has(.dito-sub-menu:not(.dito-active)) {
+      // Pop-out sub-menus on hover:
+      &:hover {
+        .dito-sub-menu-link {
+          background: $color-lightest;
+        }
+
+        .dito-sub-menu {
+          display: block;
+          position: absolute;
+          width: var(--width);
+          z-index: $header-z-index;
+          transform: translateX(calc(var(--width) + 2 * $menu-spacing))
+            translateY(-$item-height);
+
+          li:first-child {
+            .dito-link {
+              margin-top: 0;
+            }
+          }
+
+          &::before {
+            // Fill the gap to not loose the hover when moving over it.
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -2 * $menu-spacing;
+            width: 2 * $menu-spacing;
+            height: $item-height;
+            opacity: 0;
+          }
+        }
+
+        // .dito-sub-menu-link,
+        .dito-sub-menu {
+          box-shadow: $shadow-window;
+        }
+      }
+    }
+  }
+
+  .dito-link {
+    display: block;
+    padding: $menu-padding;
+    line-height: $menu-line-height;
+    border-radius: $border-radius;
+    margin-top: $menu-spacing;
+
+    &:focus:not(:active, .dito-active) {
+      box-shadow: $shadow-focus;
+    }
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.5);
+    }
+
+    &.dito-active {
+      color: $color-white;
+      background: $color-active;
+    }
+  }
+
+  .dito-sub-menu-link {
+    &.dito-active {
+      background: color.adjust($color-active, $alpha: -0.3);
+    }
+  }
+
+  .dito-sub-menu {
+    display: none;
+    border-right: 0;
+    padding: 0;
+    border-radius: $border-radius;
+    background: $color-lightest;
+
+    &.dito-active {
+      display: block;
+    }
+  }
+}
+</style>

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"
@@ -16,7 +20,7 @@
       :settings="dialog.settings"
       @remove="removeDialog(key)"
     )
-  DitoMenu
+  DitoSidebar
   main.dito-page.dito-scroll-parent
     DitoHeader(
       :spinner="options.spinner"
@@ -43,7 +47,7 @@ import DitoDialog from './DitoDialog.vue'
 import DomMixin from '../mixins/DomMixin.js'
 import {
   processView,
-  resolveSchemas,
+  resolveViews,
   processSchemaComponents
 } from '../utils/schema.js'
 
@@ -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 ||= (
         {
@@ -328,7 +412,7 @@ export default DitoComponent.component('DitoRoot', {
 
     async resolveViews() {
       try {
-        this.resolvedViews = await resolveSchemas(this.unresolvedViews)
+        this.resolvedViews = await resolveViews(this.unresolvedViews)
       } catch (error) {
         if (!error.request) {
           console.error(error)
@@ -350,7 +434,7 @@ export default DitoComponent.component('DitoRoot', {
           path: '/',
           components: {}
         },
-        ...routes
+        ...routes.flat()
       ])
       this.$router.replace(fullPath)
     }
@@ -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/DitoSchema.vue

@@ -5,7 +5,7 @@ slot(name="before")
 )
   .dito-schema-content(:class="{ 'dito-scroll': scrollable }")
     Teleport(
-      to=".dito-menu"
+      to=".dito-header__menu"
       :disabled="!headerInMenu"
     )
       .dito-schema-header(
@@ -118,6 +118,7 @@ import { getStoreAccessor } from '../utils/accessor.js'
 export default DitoComponent.component('DitoSchema', {
   mixins: [ItemMixin],
   components: { TransitionHeight },
+  inheritAttrs: false,
 
   provide() {
     return {
@@ -787,13 +788,13 @@ export default DitoComponent.component('DitoSchema', {
   &--menu {
     // Align the tabs on top of to the header menu.
     position: absolute;
-    height: $menu-height;
-    padding: 0 $menu-padding-hor;
+    height: $header-height;
+    padding: 0 $header-padding-hor;
     max-width: $content-width;
     top: 0;
     left: 0;
     right: 0;
-    z-index: $menu-z-index;
+    z-index: $header-z-index;
     // Turn off pointer events so that DitoTrail keeps receiving events...
     pointer-events: none;
     // ...but allow interaction with the tabs and buttons (e.g. clipboard)
@@ -801,8 +802,8 @@ export default DitoComponent.component('DitoSchema', {
     .dito-tabs,
     .dito-buttons {
       pointer-events: auto;
-      line-height: $menu-line-height;
-      font-size: $menu-font-size;
+      line-height: $header-line-height;
+      font-size: $header-font-size;
     }
   }
 }

package/src/components/DitoSidebar.vue

@@ -1,78 +1,40 @@
 <template lang="pug">
 nav.dito-sidebar.dito-scroll-parent
-  h1 {{ appState.title }}
-  ul.dito-scroll
-    li(
-      v-for="view in views"
-    )
-      RouterLink(
-        v-if="shouldRenderSchema(view)"
-        v-slot="{ isActive, href, route }"
-        custom
-        :to="`/${view.path}`"
-      )
-        a.dito-link(
-          :href="href"
-          :class="{ 'dito-active': isActive }"
-          @click.prevent="onClickLink(route)"
-        ) {{ getLabel(view) }}
+  h1
+    RouterLink.dito-link(to="/") {{ appState.title }}
+  DitoMenu.dito-scroll(:items="views")
 </template>
 
 <script>
 import DitoComponent from '../DitoComponent.js'
 
 // @vue/component
-export default DitoComponent.component('DitoMenu', {
-  methods: {
-    onClickLink(route) {
-      this.$router.push({ ...route, force: true })
-    }
-  }
-})
+export default DitoComponent.component('DitoSidebar', {})
 </script>
 
 <style lang="scss">
 @import '../styles/_imports';
 
 .dito-sidebar {
+  @include user-select(none);
+
   flex: initial;
   font-size: $menu-font-size;
   white-space: nowrap;
-  @include user-select(none);
-
-  ul {
-    background: $color-lighter;
-    border-right: $border-style;
-  }
+  background: $color-lighter;
 
-  a,
   h1 {
     display: block;
-  }
-
-  h1 {
-    padding: $menu-padding;
-    line-height: $menu-line-height;
+    line-height: $header-line-height;
     font-weight: bold;
     background: $color-darker;
     border-right: $border-width solid $color-darkest;
     color: $color-white;
-  }
-
-  .dito-link {
-    padding: $menu-padding;
-    line-height: $menu-line-height;
 
-    &.dito-active {
-      color: $color-white;
-      background: $color-active;
+    .dito-link {
+      display: block;
+      padding: $header-padding;
     }
   }
 }
-
-.dito-link {
-  &:focus:not(:active, .dito-active) {
-    box-shadow: $shadow-focus;
-  }
-}
 </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/components/index.js

@@ -4,6 +4,7 @@
 // convention is in order of encountered hierarchy in the DOM.
 
 export { default as DitoRoot } from './DitoRoot.vue'
+export { default as DitoMenu } from './DitoMenu.vue'
 export { default as DitoSidebar } from './DitoSidebar.vue'
 export { default as DitoHeader } from './DitoHeader.vue'
 export { default as DitoAccount } from './DitoAccount.vue'

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

@@ -115,7 +115,7 @@
   &.dito-buttons-large {
     --button-margin: 3px;
 
-    font-size: $menu-font-size;
+    font-size: $header-font-size;
     flex-flow: row wrap;
     justify-content: center;
     padding-bottom: $content-padding;
@@ -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/_scroll.scss

@@ -9,7 +9,6 @@
   // To make vertical scrolling in .dito-scroll work:
   flex: 1;
   display: flex;
-  position: relative;
   flex-flow: column;
   overflow: hidden;
 }