@ditojs/admin 2.3.2 → 2.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.3.2",
+  "version": "2.4.1",
   "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.1",
+    "@ditojs/utils": "^2.4.1",
     "@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.1",
     "@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": "aa24e36fb6be2ad0113d13a1bda6d8d8b04bd77e",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

package/src/components/DitoContainer.vue

@@ -216,6 +216,7 @@ export default DitoComponent.component('DitoContainer', {
 .dito-container {
   $self: &;
 
+  position: relative;
   display: flex;
   flex-flow: column;
   align-items: flex-start;
@@ -248,7 +249,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:

package/src/components/DitoErrors.vue

@@ -5,17 +5,66 @@
   ul
     li(
       v-for="error of errors"
-    )
-      | {{ error }}
+    ) {{ error }}
 </template>
 
 <script>
+import tippy from 'tippy.js'
 import DitoComponent from '../DitoComponent.js'
+import { markRaw } from 'vue'
 
 // @vue/component
 export default DitoComponent.component('DitoErrors', {
   props: {
     errors: { type: Array, default: null }
+  },
+
+  data() {
+    return {
+      tip: null
+    }
+  },
+
+  watch: {
+    errors() {
+      this.$nextTick(this.updateErrors)
+    }
+  },
+
+  unmounted() {
+    this.tip?.destroy()
+  },
+
+  methods: {
+    updateErrors() {
+      let { tip } = this
+      tip?.hide()
+      if (this.errors) {
+        tip = this.tip ??= markRaw(tippy(this.$el.closest('.dito-container')))
+        tip.setProps({
+          content: this.errors.join('\n'),
+          theme: 'error',
+          trigger: 'manual',
+          appendTo: 'parent',
+          placement: 'bottom-start',
+          animation: 'shift-away-subtle',
+          popperOptions: {
+            modifiers: [
+              {
+                name: 'flip',
+                enabled: false
+              }
+            ]
+          },
+          interactive: true,
+          hideOnClick: false,
+          offset: [3, 3], // 1/2 form-spacing
+          zIndex: 1
+        })
+        tip.popper.addEventListener('mousedown', () => tip.hide())
+        tip.show()
+      }
+    }
   }
 })
 </script>
@@ -25,10 +74,9 @@ export default DitoComponent.component('DitoErrors', {
 
 .dito-errors {
   position: absolute;
-  z-index: 1;
+  opacity: 0;
 
   ul {
-    margin-top: 1px;
     color: $color-error;
   }
 }

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;
@@ -136,7 +137,7 @@ export default DitoComponent.component('DitoHeader', {
   }
 
   .dito-spinner {
-    margin-top: $menu-padding-ver;
+    margin-top: $header-padding-ver;
   }
 
   .dito-dirty {

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/DitoPane.vue

@@ -142,7 +142,7 @@ export default DitoComponent.component('DitoPane', {
 
     focus() {
       if (this.tab) {
-        this.$router.push({ hash: `#${this.tab}` })
+        return this.$router.push({ hash: `#${this.tab}` })
       }
     },
 

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,80 @@ 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-drop-target', enabled)
+        }
+        if (!enabled) {
+          uploads = []
+        }
+      }
+
+      const setDraggingFiles = enabled => {
+        this.isDraggingFiles = enabled
+        if (enabled) {
+          toggleDropTargetClass(true)
+        } else {
+          setTimeout(() => toggleDropTargetClass(false), 150)
+        }
+      }
+
+      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 +472,46 @@ 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-drop-target {
+  --shadow-alpha: 0.25;
+
+  background: $content-color-background;
+  border-radius: $border-radius;
+  z-index: $drag-overlay-z-index + 1;
+  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, var(--shadow-alpha)));
+}
+
+.dito-drag-enter-active,
+.dito-drag-leave-active {
+  $duration: 0.15s;
+
+  transition: opacity $duration, backdrop-filter $duration;
+
+  ~ * .dito-drop-target {
+    transition: filter $duration;
+  }
+}
+
+.dito-drag-enter-from,
+.dito-drag-leave-to {
+  opacity: 0;
+  backdrop-filter: blur(0);
+
+  ~ * .dito-drop-target {
+    --shadow-alpha: 0;
+  }
+}
 </style>

package/src/components/DitoSchema.vue

@@ -3,7 +3,10 @@ slot(name="before")
 .dito-schema(
   v-bind="$attrs"
 )
-  .dito-schema-content(:class="{ 'dito-scroll': scrollable }")
+  .dito-schema-content(
+    ref="content"
+    :class="{ 'dito-scroll': scrollable }"
+  )
     Teleport(
       to=".dito-header__menu"
       :disabled="!headerInMenu"
@@ -280,6 +283,10 @@ export default DitoComponent.component('DitoSchema', {
       return this.everyComponent(it => it.isValidated)
     },
 
+    hasErrors() {
+      return this.someComponent(it => it.hasErrors)
+    },
+
     hasData() {
       return !!this.data
     },
@@ -334,6 +341,9 @@ export default DitoComponent.component('DitoSchema', {
       handler(hash) {
         if (this.hasTabs) {
           this.currentTab = hash?.slice(1) || null
+          if (this.hasErrors) {
+            this.repositionErrors()
+          }
         }
       }
     },
@@ -453,9 +463,18 @@ export default DitoComponent.component('DitoSchema', {
       }
     },
 
+    repositionErrors() {
+      // Force repositioning of error tooltips, as otherwise they
+      // sometimes don't show up in the right place initially when
+      // changing tabs
+      const scrollParent = this.$refs.content.closest('.dito-scroll')
+      scrollParent.scrollTop++
+      scrollParent.scrollTop--
+    },
+
     focus() {
-      this.parentSchemaComponent?.focus()
       this.opened = true
+      return this.parentSchemaComponent?.focus()
     },
 
     validateAll(match, notify = true) {
@@ -485,7 +504,7 @@ export default DitoComponent.component('DitoSchema', {
           if (!component.validate(notify)) {
             // Focus first error field
             if (notify && first) {
-              component.focus()
+              component.scrollIntoView()
             }
             first = false
             isValid = false

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/DitoUploadFile.vue

@@ -0,0 +1,197 @@
+<template lang="pug">
+.dito-upload-file
+  .dito-thumbnail(
+    v-if="thumbnail"
+    :class="`dito-thumbnail--${thumbnail}`"
+  )
+    .dito-thumbnail__inner
+      img(
+        v-if="source"
+        :src="source"
+      )
+      .dito-thumbnail__type(
+        v-else
+      )
+        span {{ type }}
+  span {{ file.name }}
+</template>
+
+<script>
+import DitoComponent from '../DitoComponent.js'
+
+// @vue/component
+export default DitoComponent.component('DitoUploadFile', {
+  props: {
+    file: { type: Object, required: true },
+    thumbnail: { type: String, default: null },
+    thumbnailUrl: { type: String, default: null }
+  },
+
+  data() {
+    return {
+      uploadUrl: null
+    }
+  },
+
+  computed: {
+    type() {
+      return (
+        TYPES[this.file.type] ||
+        this.file.name.split('.').pop().toUpperCase()
+      )
+    },
+
+    source() {
+      return this.uploadUrl || this.thumbnailUrl
+    }
+  },
+
+  watch: {
+    'file.upload.file': {
+      immediate: true,
+      handler(file) {
+        if (file && this.thumbnail) {
+          const reader = new FileReader()
+          reader.onload = () => {
+            this.uploadUrl = reader.result
+          }
+          reader.readAsDataURL(file)
+        } else {
+          this.uploadUrl = null
+        }
+      }
+    }
+  }
+})
+
+const TYPES = {
+  'text/plain': 'TXT',
+  'text/html': 'HTML',
+  'text/css': 'CSS',
+  'text/javascript': 'JS',
+  'image/jpeg': 'JPG',
+  'image/png': 'PNG',
+  'image/gif': 'GIF',
+  'image/svg+xml': 'SVG',
+  'movie/mp4': 'MP4',
+  'audio/mpeg': 'MP3',
+  'application/json': 'JSON',
+  'application/xml': 'XML',
+  'application/pdf': 'PDF',
+  'application/zip': 'ZIP'
+}
+</script>
+
+<style lang="scss">
+@use 'sass:math';
+@import '../styles/_imports';
+
+.dito-upload-file {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.dito-thumbnail {
+  $self: &;
+
+  // Small size by default
+  --max-size: #{1 * $input-height};
+  --corner-size: calc(var(--max-size) / 5);
+  --shadow-size: 1px;
+  --min-size: calc(2 * var(--corner-size));
+  --margin: 0em;
+  --drop-shadow: drop-shadow(
+    0 calc(var(--shadow-size) * 0.75) var(--shadow-size) #{rgba(
+        $color-black,
+        0.4
+      )}
+  );
+
+  position: relative;
+  margin: var(--margin);
+  margin-right: 0.5em;
+  filter: var(--drop-shadow);
+
+  &--small {
+    --max-size: #{1 * $input-height};
+    --margin: 0em;
+    --shadow-size: 1px;
+  }
+
+  &--medium {
+    --max-size: #{2 * $input-height};
+    --margin: 0.25em;
+    --shadow-size: 1.5px;
+  }
+
+  &--large {
+    --max-size: #{4 * $input-height};
+    --margin: 0.5em;
+    --shadow-size: 2.5px;
+  }
+
+  &__inner {
+    background: #ffffff;
+    clip-path: polygon(
+      0 0,
+      calc(100% - var(--corner-size)) 0,
+      100% var(--corner-size),
+      100% 100%,
+      0 100%
+    );
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: var(--corner-size);
+      height: var(--corner-size);
+      background: linear-gradient(45deg, #ffffff, #eeeeee 40%, #dddddd 50%);
+      filter: var(--drop-shadow);
+    }
+  }
+
+  &__type {
+    --font-size: var(--corner-size);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: var(--min-size);
+    min-height: var(--max-size);
+    aspect-ratio: 3 / 4;
+
+    span {
+      --color: #{$color-grey};
+
+      font-size: min(var(--font-size), #{1.25 * $font-size});
+      color: var(--color);
+
+      #{$self}:not(#{$self}--small) & {
+        padding: 0 calc(var(--font-size) / 4);
+        border-radius: calc(var(--font-size) / 4);
+        background: var(--color);
+        color: #ffffff;
+      }
+
+      #{$self}--medium & {
+        --color: #{$color-light};
+      }
+
+      #{$self}--large & {
+        --color: #{$color-lighter};
+      }
+    }
+  }
+
+  img {
+    display: block;
+    min-width: var(--min-size);
+    min-height: var(--min-size);
+    max-width: var(--max-size);
+    max-height: var(--max-size);
+  }
+}
+</style>

package/src/components/index.js

@@ -31,5 +31,6 @@ export { default as DitoPagination } from './DitoPagination.vue'
 export { default as DitoTreeItem } from './DitoTreeItem.vue'
 export { default as DitoTableHead } from './DitoTableHead.vue'
 export { default as DitoTableCell } from './DitoTableCell.vue'
+export { default as DitoUploadFile } from './DitoUploadFile.vue'
 export { default as DitoDraggable } from './DitoDraggable.vue'
 export { default as DitoVNode } from './DitoVNode.vue'

package/src/mixins/DitoMixin.js

@@ -192,19 +192,36 @@ export default {
       return value
     },
 
-    getChildStore(key) {
-      return this.getStore(key) || this.setStore(key, reactive({}))
+    getChildStore(key, index) {
+      // When storing, temporary ids change to permanent ones and thus the key
+      // can change, so we need to store the index as well, to be able to find
+      // the store again after the item was saved.
+      const store = (
+        this.getStore(key) ||
+        index != null && this.getStore(index) ||
+        this.setStore(key, reactive({}))
+      )
+      if (index != null) {
+        this.setStore(index, store)
+      }
+      return store
     },
 
     getSchemaValue(
       keyOrDataPath,
-      { type, schema = this.schema, callback = true, default: def } = {}
+      {
+        type,
+        default: def,
+        schema = this.schema,
+        context = this.context,
+        callback = true
+      } = {}
     ) {
       return getSchemaValue(keyOrDataPath, {
         type,
         schema,
+        context,
         callback,
-        context: this.context,
         default: isFunction(def) ? () => def.call(this) : def
       })
     },
@@ -365,7 +382,9 @@ export default {
       }
       // See: https://stackoverflow.com/a/49917066/1163708
       const a = document.createElement('a')
-      a.href = this.api.getApiUrl(options)
+      a.href = options.url?.startsWith('blob:')
+        ? options.url
+        : this.api.getApiUrl(options)
       a.download = options.filename ?? null
       const { body } = document
       body.appendChild(a)