@ditojs/admin 2.4.0 → 2.4.2

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

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

package/src/types/DitoTypeCheckbox.vue

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

package/src/types/DitoTypeComputed.vue

@@ -3,6 +3,7 @@
 //- 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/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

@@ -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/DitoTypeNumber.vue

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

package/src/types/DitoTypeProgress.vue

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

package/src/types/DitoTypeSwitch.vue

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

package/src/types/DitoTypeText.vue

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

package/src/types/DitoTypeTextarea.vue

@@ -1,6 +1,7 @@
 <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

@@ -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"
+            )
+              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
             )
-    tfoot
+              | 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
@@ -74,24 +127,11 @@
                 type="button"
                 @click.prevent="upload.active = false"
               ) Cancel
-              VueUpload.dito-button(
-                ref="upload"
-                v-model="uploads"
-                :inputId="dataPath"
-                :name="dataPath"
-                :disabled="disabled"
-                :postAction="uploadPath"
-                :extensions="extensions"
-                :accept="accept"
-                :multiple="multiple"
-                :size="maxSize"
-                :title="multiple ? 'Upload Files' : 'Upload File'"
-                :drop="$el?.closest('.dito-container')"
-                :dropDirectory="true"
-                @input-filter="inputFilter"
-                @input-file="inputFile"
+              button.dito-button.dito-button-upload(
+                v-if="multiple || !hasFiles"
+                :title="uploadTitle"
+                @click="onClickUpload"
               )
-                .dito-button-upload
 </template>
 
 <script>
@@ -102,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
@@ -123,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,
@@ -165,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 > 0 &&
+        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) => +file.progress + total, 0) /
+        this.uploads.reduce((total, file) => total + +file.progress, 0) /
         this.uploads.length
       )
     },
@@ -205,19 +280,45 @@ export default DitoTypeComponent.register('upload', {
   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) {
@@ -283,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 })
@@ -324,11 +425,31 @@ export default DitoTypeComponent.register('upload', {
       }
     },
 
-    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)
+      )
     }
   },
 
@@ -351,18 +472,16 @@ function asFiles(value) {
 
 .dito-upload {
   .dito-table {
-    tr {
+    tr,
+    .dito-cell-edit-buttons {
       vertical-align: middle;
     }
   }
 
-  .dito-button-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
 }