@ditojs/admin 2.4.0 → 2.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.4.0",
+  "version": "2.4.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",
@@ -33,8 +33,8 @@
     "not ie_mob > 0"
   ],
   "dependencies": {
-    "@ditojs/ui": "^2.4.0",
-    "@ditojs/utils": "^2.4.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.4.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": "11402f86e31da1b8ebd0a6ea5c984d3abf12d7be",
+  "gitHead": "3041bd1b47272ac99276fbeca8152cbfb1d75b77",
   "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;
@@ -260,12 +261,6 @@ 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/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

@@ -137,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/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

@@ -151,10 +151,9 @@ export default DitoComponent.component('DitoRoot', {
 
       const toggleDropTargetClass = enabled => {
         for (const upload of uploads) {
-          upload.closest('.dito-container').classList.toggle(
-            'dito-container--drop-target',
-            enabled
-          )
+          upload
+            .closest('.dito-container')
+            .classList.toggle('dito-drop-target', enabled)
         }
         if (!enabled) {
           uploads = []
@@ -166,7 +165,7 @@ export default DitoComponent.component('DitoRoot', {
         if (enabled) {
           toggleDropTargetClass(true)
         } else {
-          setTimeout(() => toggleDropTargetClass(false), 250)
+          setTimeout(() => toggleDropTargetClass(false), 150)
         }
       }
 
@@ -486,14 +485,33 @@ function addRoutes(router, routes) {
   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 {
-  transition: opacity 0.25s, backdrop-filter 0.25s;
+  $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/DitoUploadFile.vue

@@ -0,0 +1,198 @@
+<template lang="pug">
+.dito-upload-file
+  .dito-thumbnail(
+    v-if="thumbnail"
+    :class="`dito-thumbnail--${thumbnail}`"
+  )
+    .dito-thumbnail__inner
+      img(
+        v-if="source"
+        :src="source"
+        crossorigin="anonymous"
+      )
+      .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)

package/src/mixins/TypeMixin.js

@@ -3,7 +3,7 @@ import ValidationMixin from './ValidationMixin.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
 import { computeValue } from '../utils/schema.js'
 import { getItem, getParentItem } from '../utils/data.js'
-import { asArray, camelize } from '@ditojs/utils'
+import { camelize } from '@ditojs/utils'
 
 // @vue/component
 export default {
@@ -238,22 +238,30 @@ export default {
     },
 
     // @overridable
-    focusElement() {
-      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?.()
-        }
+    async scrollIntoView() {
+      await this.focusSchema()
+      const { element = this } = this.$refs
+      ;(element.$el || element).scrollIntoView?.({
+        behavior: 'smooth',
+        block: 'center'
       })
     },
 
-    focus() {
+    // @overridable
+    async focusElement() {
+      await this.focusSchema()
+      const { element = this } = this.$refs
+      ;(element.$el || element).focus?.()
+    },
+
+    async focusSchema() {
       // Also focus this component's schema and panel in case it's a tab.
-      this.schemaComponent.focus()
-      this.tabComponent?.focus()
+      await this.schemaComponent.focus()
+      await this.tabComponent?.focus()
+    },
+
+    focus() {
+      this.scrollIntoView()
       this.focusElement()
     },
 

package/src/mixins/ValidationMixin.js

@@ -15,6 +15,12 @@ export default {
     }
   },
 
+  computed: {
+    hasErrors() {
+      return !!this.errors
+    }
+  },
+
   methods: {
     resetValidation() {
       this.isTouched = false
@@ -60,6 +66,8 @@ export default {
 
     markTouched() {
       this.isTouched = true
+      // Clear currently displayed errors when focusing input.
+      this.clearErrors()
     },
 
     markDirty() {
@@ -87,7 +95,7 @@ export default {
         this.addError(message, true)
       }
       if (focus) {
-        this.focus()
+        this.scrollIntoView()
       }
       return true
     },

package/src/mixins/ValidatorMixin.js

@@ -6,11 +6,7 @@ export default {
 
   computed: {
     errors() {
-      return this.schemaComponents.reduce(
-        (result, { errors }) =>
-          errors && result ? result.concat(errors) : errors,
-        null
-      )
+      return this.schemaComponents.flatMap(({ errors }) => errors || [])
     },
 
     isTouched() {

package/src/styles/_info.scss

@@ -1,5 +1,3 @@
-@import 'tippy.js/animations/shift-away-subtle.css';
-
 .dito-info {
   --size: calc(1em * var(--line-height));
 
@@ -19,17 +17,3 @@
     width: var(--size);
   }
 }
-
-.tippy-box[data-theme~='info'] {
-  background-color: $color-active;
-  color: $color-white;
-  filter: drop-shadow(0 2px 4px $color-shadow);
-
-  > .tippy-arrow::before {
-    color: $color-active;
-  }
-
-  .tippy-content {
-    white-space: pre-line;
-  }
-}

package/src/styles/_tippy.scss

@@ -0,0 +1,39 @@
+@use 'sass:color';
+@import 'tippy.js/animations/shift-away-subtle.css';
+
+.tippy-box {
+  &[data-theme] {
+    --color: #{$color-active};
+
+    font-size: unset;
+    line-height: unset;
+    background-color: var(--color);
+    color: $color-white;
+    filter: drop-shadow(0 2px 4px $color-shadow);
+
+    .tippy-content {
+      white-space: pre-line;
+      padding: ($input-padding-ver + 2 * $border-width)
+        ($input-padding-hor + $border-width);
+    }
+
+    > .tippy-arrow::before {
+      color: var(--color);
+    }
+  }
+
+  &[data-theme~='info'] {
+    --color: #{color.adjust($color-active, $lightness: 5%)};
+  }
+
+  &[data-theme~='error'] {
+    --color: #{color.adjust($color-error, $lightness: 5%)};
+
+    cursor: pointer;
+
+    > .tippy-arrow {
+      transform: unset !important;
+      left: 16px !important;
+    }
+  }
+}