@ditojs/admin 2.3.2 → 2.4.1

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,24 +238,30 @@ 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?.()
-          }
-        })
-      }
+    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/_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/_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/_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/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;
+    }
+  }
+}

package/src/styles/style.scss

@@ -6,5 +6,6 @@
 @import '_scroll';
 @import '_sortable';
 @import '_table';
-@import '_notifications';
 @import '_info';
+@import '_tippy';
+@import '_notifications';

package/src/types/DitoTypeList.vue

@@ -80,7 +80,7 @@
               :dataPath="getDataPath(index)"
               :data="item"
               :meta="nestedMeta"
-              :store="getChildStore(index)"
+              :store="getChildStore(getItemUid(schema, item), index)"
               :disabled="disabled || isLoading"
               :collapsed="collapsed"
               :collapsible="collapsible"
@@ -117,7 +117,7 @@
             :dataPath="getDataPath(index)"
             :data="item"
             :meta="nestedMeta"
-            :store="getChildStore(index)"
+            :store="getChildStore(getItemUid(schema, item), index)"
             @delete="deleteItem(item, index)"
           )
     //- Render create buttons inside table when not in a single component view:

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"
     )
@@ -379,6 +379,7 @@ export default DitoTypeComponent.register('markup', {
 
     getButtons(settingsName, descriptions) {
       const list = []
+      const { commands } = this.editor
 
       const addButton = ({ name, icon, attributes, ignoreActive, onClick }) => {
         list.push({
@@ -389,8 +390,11 @@ export default DitoTypeComponent.register('markup', {
             (ignoreActive == null || !ignoreActive())
           ),
           onClick: () => {
-            const key = `toggle${camelize(name, true)}`
-            if (this.editor.commands[key]) {
+            const key =
+              name in commands
+                ? name
+                : `toggle${camelize(name, true)}`
+            if (key in commands) {
               const command = attributes =>
                 this.editor.chain()[key](attributes).focus().run()
               onClick
@@ -439,7 +443,6 @@ export default DitoTypeComponent.register('markup', {
     },
 
     focusElement() {
-      this.$el.scrollIntoView?.()
       this.editor.focus()
     }
   }

package/src/types/DitoTypeUpload.vue

@@ -1,11 +1,31 @@
 <template lang="pug">
 .dito-upload
+  //- In order to handle upload buttons in multiple possible places, depending
+  //- on whether they handle single or multiple uploads, render the upload
+  //- component invisibly at the root, and delegate the click events to it from
+  //- the buttons rendered further below. Luckily this works surprisingly well.
+  VueUpload.dito-upload-input(
+    ref="upload"
+    v-model="uploads"
+    :inputId="dataPath"
+    :name="dataPath"
+    :disabled="disabled"
+    :postAction="uploadPath"
+    :extensions="extensions"
+    :accept="accept"
+    :multiple="multiple"
+    :size="maxSize"
+    :drop="$el?.closest('.dito-container')"
+    :dropDirectory="true"
+    @input-filter="onInputFilter"
+    @input-file="onInputFile"
+  )
   table.dito-table.dito-table-separators.dito-table-background
-    //- Styling comes from DitoTableHead
+    //- Styling comes from `DitoTableHead`
     thead.dito-table-head
       tr
         th
-          span Name
+          span File
         th
           span Size
         th
@@ -18,48 +38,81 @@
       :options="getSortableOptions(false)"
       :draggable="draggable"
     )
-      tr(
-        v-for="(file, index) in files"
-        :key="file.key"
+      template(
+        v-if="multiple || !isUploadActive"
       )
-        td(
-          v-html="renderFile(file, index)"
+        tr(
+          v-for="(file, index) in files"
+          :key="file.key"
         )
-        td {{ formatFileSize(file.size) }}
-        td
-          template(
-            v-if="file.upload"
+          td(
+            v-if="render"
+            v-html="renderFile(file, index)"
           )
-            template(
-              v-if="file.upload.error"
-            )
-              | Error: {{ file.upload.error }}
-            template(
-              v-else-if="file.upload.active"
-            )
-              | Uploading...
-            template(
-              v-else-if="file.upload.success"
+          td(
+            v-else-if="downloadUrls[index]"
+          )
+            a(
+              :download="file.name"
+              :href="downloadUrls[index]"
+              target="_blank"
+              @click.prevent="onClickDownload(file, index)"
             )
-              | Uploaded
-          template(
+              DitoUploadFile(
+                :file="file"
+                :thumbnail="thumbnails"
+                :thumbnailUrl="thumbnailUrls[index]"
+              )
+          td(
             v-else
           )
-            | Stored
-        td.dito-cell-edit-buttons
-          .dito-buttons.dito-buttons-round
-            //- Firefox doesn't like <button> here, so use <a> instead:
-            a.dito-button(
-              v-if="draggable"
-              v-bind="getButtonAttributes(verbs.drag)"
+            DitoUploadFile(
+              :file="file"
+              :thumbnail="thumbnails"
+              :thumbnailUrl="thumbnailUrls[index]"
             )
-            button.dito-button(
-              v-if="deletable"
-              type="button"
-              v-bind="getButtonAttributes(verbs.delete)"
-              @click="deleteFile(file, index)"
+          td {{ formatFileSize(file.size) }}
+          td
+            template(
+              v-if="file.upload"
             )
-    tfoot
+              template(
+                v-if="file.upload.error"
+              )
+                | Error: {{ file.upload.error }}
+              template(
+                v-else-if="file.upload.active"
+              )
+                | Uploading...
+              template(
+                v-else-if="file.upload.success"
+              )
+                | Uploaded
+            template(
+              v-else
+            )
+              | Stored
+          td.dito-cell-edit-buttons
+            .dito-buttons.dito-buttons-round
+              button.dito-button.dito-button-upload(
+                v-if="!multiple"
+                :title="uploadTitle"
+                @click="onClickUpload"
+              )
+              //- Firefox doesn't like <button> here, so use <a> instead:
+              a.dito-button(
+                v-if="draggable"
+                v-bind="getButtonAttributes(verbs.drag)"
+              )
+              button.dito-button(
+                v-if="deletable"
+                type="button"
+                v-bind="getButtonAttributes(verbs.delete)"
+                @click="deleteFile(file, index)"
+              )
+    tfoot(
+      v-if="multiple || isUploadActive || !hasFiles"
+    )
       tr
         td(:colspan="4")
           .dito-upload-footer
@@ -73,26 +126,11 @@
                 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(
-                ref="upload"
-                v-model="uploads"
-                :inputId="dataPath"
-                :name="dataPath"
-                :disabled="disabled"
-                :postAction="uploadPath"
-                :extensions="extensions"
-                :accept="accept"
-                :multiple="multiple"
-                :size="maxSize"
-                title="Upload Files"
-                @input-filter="inputFilter"
-                @input-file="inputFile"
+              ) Cancel
+              button.dito-button.dito-button-upload(
+                v-if="multiple || !hasFiles"
+                :title="uploadTitle"
+                @click="onClickUpload"
               )
 </template>
 
@@ -104,7 +142,7 @@ 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 { isArray, asArray } from '@ditojs/utils'
 import VueUpload from 'vue-upload-component'
 
 // @vue/component
@@ -125,10 +163,22 @@ export default DitoTypeComponent.register('upload', {
       return this.$refs.upload
     },
 
+    uploadTitle() {
+      return this.multiple ? 'Upload Files' : 'Upload File'
+    },
+
     files() {
       return asFiles(this.value)
     },
 
+    downloadUrls() {
+      return this.files.map((file, index) => this.getDownloadUrl(file, index))
+    },
+
+    thumbnailUrls() {
+      return this.files.map((file, index) => this.getThumbnailUrl(file, index))
+    },
+
     multiple: getSchemaAccessor('multiple', {
       type: Boolean,
       default: false,
@@ -167,20 +217,43 @@ export default DitoTypeComponent.register('upload', {
       default: false
     }),
 
+    render: getSchemaAccessor('render', {
+      type: Function,
+      default: null
+    }),
+
+    thumbnails: getSchemaAccessor('thumbnails', {
+      type: [Boolean, String],
+      default(thumbnails) {
+        return thumbnails ?? !!this.schema.thumbnailUrl
+      },
+      get(thumbnails) {
+        return thumbnails === true ? 'medium' : thumbnails || null
+      }
+    }),
+
+    hasFiles() {
+      return this.files.length > 0
+    },
+
+    hasUploads() {
+      return this.uploads.length > 0
+    },
+
     isUploadReady() {
       return (
-        this.uploads.length &&
+        this.hasUploads &&
         !(this.upload.active || this.upload.uploaded)
       )
     },
 
     isUploadActive() {
-      return this.uploads.length && this.upload.active
+      return this.hasUploads && this.upload.active
     },
 
     uploadProgress() {
       return (
-        this.uploads.reduce((total, file) => total + file.progress, 0) /
+        this.uploads.reduce((total, file) => total + +file.progress, 0) /
         this.uploads.length
       )
     },
@@ -193,22 +266,59 @@ export default DitoTypeComponent.register('upload', {
     }
   },
 
+  watch: {
+    isUploadReady(ready) {
+      if (ready) {
+        // Auto-upload.
+        this.$nextTick(() => {
+          this.upload.active = true
+        })
+      }
+    }
+  },
+
   methods: {
     formatFileSize,
 
+    getFileContext(file, index) {
+      return this.multiple
+        ? new DitoContext(this, {
+            value: file,
+            data: this.files,
+            index,
+            dataPath: appendDataPath(this.dataPath, index)
+          })
+        : this.context
+    },
+
     renderFile(file, index) {
-      const { render } = this.schema
-      return render
-        ? render.call(
-            this,
-            new DitoContext(this, {
-              value: file,
-              data: this.files,
-              index,
-              dataPath: appendDataPath(this.dataPath, index)
+      return this.render(this.getFileContext(file, index))
+    },
+
+    getDownloadUrl(file, index) {
+      return file.url
+        ? file.url
+        : !file.upload || file.upload.success
+          ? this.getSchemaValue('downloadUrl', {
+              type: 'String',
+              default: null,
+              context: this.getFileContext(file, index)
             })
+          : null
+    },
+
+    getThumbnailUrl(file, index) {
+      return !file.upload || file.upload.success
+        ? this.getSchemaValue('thumbnailUrl', {
+            type: 'String',
+            default: null,
+            context: this.getFileContext(file, index)
+          }) || (
+            file.type.startsWith('image/')
+              ? file.url
+              : null
           )
-        : escapeHtml(file.name)
+        : null
     },
 
     deleteFile(file, index) {
@@ -274,7 +384,7 @@ export default DitoTypeComponent.register('upload', {
       this.replaceFile(file, null)
     },
 
-    inputFile(newFile, oldFile) {
+    onInputFile(newFile, oldFile) {
       if (newFile && !oldFile) {
         const { id, name, size } = newFile
         this.addFile({ id, name, size, upload: newFile })
@@ -293,6 +403,7 @@ export default DitoTypeComponent.register('upload', {
             this.removeFile(newFile)
           }
         } else if (error) {
+          this.removeFile(newFile)
           const text = (
             {
               abort: 'Upload aborted',
@@ -310,16 +421,35 @@ export default DitoTypeComponent.register('upload', {
             title: 'File Upload Error',
             text
           })
-          this.removeFile(newFile)
         }
       }
     },
 
-    inputFilter(newFile /*, oldFile, prevent */) {
+    onInputFilter(newFile /*, oldFile, prevent */) {
       const xhr = newFile?.xhr
       if (this.api.cors?.credentials && xhr && !xhr.withCredentials) {
         xhr.withCredentials = true
       }
+    },
+
+    async onClickDownload(file, index) {
+      try {
+        const response = await fetch(this.downloadUrls[index])
+        const blob = await response.blob()
+        this.download({
+          filename: file.name,
+          url: URL.createObjectURL(blob)
+        })
+      } catch (error) {
+        console.error(error)
+      }
+    },
+
+    onClickUpload(event) {
+      // Delegate the click event to the hidden file input.
+      this.upload.$el.querySelector('input').dispatchEvent(
+        new event.constructor(event.type, event)
+      )
     }
   },
 
@@ -342,18 +472,16 @@ function asFiles(value) {
 
 .dito-upload {
   .dito-table {
-    tr {
+    tr,
+    .dito-cell-edit-buttons {
       vertical-align: middle;
     }
   }
 
-  .dito-button-add-upload {
-    padding: 0;
-
-    > * {
-      position: absolute;
-      cursor: pointer;
-    }
+  .dito-upload-input {
+    // See `onClickUpload()` method for details.
+    position: absolute;
+    pointer-events: none;
   }
 
   .dito-upload-footer {

package/src/utils/schema.js

@@ -1042,5 +1042,5 @@ export function getItemUid(sourceSchema, item) {
   // either way, pass through `getUid()` so that the ids are associated with the
   // item through a weak map, as the ids can be filtered out in `processData()`
   // while the components that use the uids as key are still visible.
-  return getUid(item, getItemId(sourceSchema, item))
+  return getUid(item, item => getItemId(sourceSchema, item))
 }

package/src/utils/uid.js

@@ -1,12 +1,15 @@
+import { toRaw } from 'vue'
+
 const uidMap = new WeakMap()
 
 // Generated and remembers unique ids per passed object using a weak map.
 let uid = 0
-export function getUid(object, itemId) {
-  let id = uidMap.get(object)
+export function getUid(item, getItemId = null) {
+  const raw = toRaw(item)
+  let id = uidMap.get(raw)
   if (!id) {
-    id = itemId || `@${++uid}`
-    uidMap.set(object, id)
+    id = getItemId?.(item) || `@${++uid}`
+    uidMap.set(raw, id)
   }
   return id
 }