@ditojs/admin 2.0.4 → 2.1.0

package/src/types/{TypeUpload.vue → DitoTypeUpload.vue}

@@ -12,26 +12,38 @@
           span Status
         th
           span
-    use-sortable(
-      tag="tbody"
+    UseSortable(
       v-model="files"
+      tag="tbody"
       :options="getSortableOptions(draggable)"
     )
       tr(
         v-for="(file, index) in files"
         :key="file.key"
       )
-        td(v-html="renderFile(file, index)")
+        td(
+          v-html="renderFile(file, index)"
+        )
         td {{ formatFileSize(file.size) }}
         td
-          template(v-if="file.upload")
-            template(v-if="file.upload.error")
+          template(
+            v-if="file.upload"
+          )
+            template(
+              v-if="file.upload.error"
+            )
               | Error: {{ file.upload.error }}
-            template(v-else-if="file.upload.active")
+            template(
+              v-else-if="file.upload.active"
+            )
               | Uploading...
-            template(v-else-if="file.upload.success")
+            template(
+              v-else-if="file.upload.success"
+            )
               | Uploaded
-          template(v-else)
+          template(
+            v-else
+          )
             | Stored
         td.dito-cell-edit-buttons
           .dito-buttons.dito-buttons-round
@@ -43,8 +55,8 @@
             button.dito-button(
               v-if="deletable"
               type="button"
-              @click="deleteFile(file, index)"
               v-bind="getButtonAttributes(verbs.delete)"
+              @click="deleteFile(file, index)"
             )
     tfoot
       tr
@@ -66,46 +78,25 @@
                 type="button"
                 @click.prevent="upload.active = true"
               ) Upload All
-              vue-upload.dito-button.dito-button-add-upload(
-                :input-id="dataPath"
+              VueUpload.dito-button.dito-button-add-upload(
+                ref="upload"
+                v-model="uploads"
+                :inputId="dataPath"
                 :name="dataPath"
                 :disabled="disabled"
-                :post-action="uploadPath"
+                :postAction="uploadPath"
                 :extensions="extensions"
                 :accept="accept"
                 :multiple="multiple"
                 :size="maxSize"
-                v-model="uploads"
+                title="Upload Files"
                 @input-filter="inputFilter"
                 @input-file="inputFile"
-                ref="upload"
-                title="Upload Files"
               )
 </template>
 
-<style lang="sass">
-  @import '../styles/_imports'
-
-  .dito-upload
-    .dito-table
-      tr
-        vertical-align: middle
-    .dito-button-add-upload
-      padding: 0
-      > *
-        position: absolute
-        cursor: pointer
-    .dito-upload-footer
-      display: flex
-      justify-content: flex-end
-      align-items: center
-      .dito-progress
-        flex: auto
-        margin-right: $form-spacing
-</style>
-
 <script>
-import TypeComponent from '../TypeComponent.js'
+import DitoTypeComponent from '../DitoTypeComponent.js'
 import DitoContext from '../DitoContext.js'
 import SortableMixin from '../mixins/SortableMixin.js'
 import parseFileSize from 'filesize-parser'
@@ -116,9 +107,9 @@ import { isArray, asArray, escapeHtml } from '@ditojs/utils'
 import VueUpload from 'vue-upload-component'
 
 // @vue/component
-export default TypeComponent.register('upload', {
-  components: { VueUpload },
+export default DitoTypeComponent.register('upload', {
   mixins: [SortableMixin],
+  components: { VueUpload },
 
   data() {
     return {
@@ -174,8 +165,10 @@ export default TypeComponent.register('upload', {
     }),
 
     isUploadReady() {
-      return this.uploads.length &&
+      return (
+        this.uploads.length &&
         !(this.upload.active || this.upload.uploaded)
+      )
     },
 
     isUploadActive() {
@@ -204,22 +197,25 @@ export default TypeComponent.register('upload', {
       const { render } = this.schema
       return render
         ? render.call(
-          this,
-          new DitoContext(this, {
-            value: file,
-            data: this.files,
-            index,
-            dataPath: appendDataPath(this.dataPath, index)
-          })
-        )
+            this,
+            new DitoContext(this, {
+              value: file,
+              data: this.files,
+              index,
+              dataPath: appendDataPath(this.dataPath, index)
+            })
+          )
         : escapeHtml(file.name)
     },
 
     deleteFile(file, index) {
       const { name } = file
 
-      if (file && window.confirm(
-        `Do you really want to ${this.verbs.remove} ${name}?`)
+      if (
+        file &&
+        window.confirm(
+          `Do you really want to ${this.verbs.remove} ${name}?`
+        )
       ) {
         if (this.multiple) {
           this.value.splice(index, 1)
@@ -294,16 +290,18 @@ export default TypeComponent.register('upload', {
             this.removeFile(newFile)
           }
         } else if (error) {
-          const text = {
-            abort: 'Upload aborted',
-            denied: 'Upload denied',
-            extension: `Unsupported file-type: ${newFile.name}`,
-            network: 'Network error encountered during upload',
-            server: 'Server error occurred during upload',
-            size: `File is too large: ${formatFileSize(newFile.size)}`,
-            timeout: 'Timeout occurred during upload'
-
-          }[error] || `Unknown File Upload Error: '${error}'`
+          const text = (
+            {
+              abort: 'Upload aborted',
+              denied: 'Upload denied',
+              extension: `Unsupported file-type: ${newFile.name}`,
+              network: 'Network error encountered during upload',
+              server: 'Server error occurred during upload',
+              size: `File is too large: ${formatFileSize(newFile.size)}`,
+              timeout: 'Timeout occurred during upload'
+            }[error] ||
+            `Unknown File Upload Error: '${error}'`
+          )
           this.notify({
             type: 'error',
             title: 'File Upload Error',
@@ -314,7 +312,7 @@ export default TypeComponent.register('upload', {
       }
     },
 
-    inputFilter(newFile/*, oldFile, prevent */) {
+    inputFilter(newFile /*, oldFile, prevent */) {
       const xhr = newFile?.xhr
       if (this.api.cors?.credentials && xhr && !xhr.withCredentials) {
         xhr.withCredentials = true
@@ -325,9 +323,7 @@ export default TypeComponent.register('upload', {
   processValue(schema, value) {
     // Filter out all newly added files that weren't actually uploaded.
     const files = asFiles(value)
-      .map(
-        ({ upload, ...file }) => !upload || upload.success ? file : null
-      )
+      .map(({ upload, ...file }) => (!upload || upload.success ? file : null))
       .filter(file => file)
     return schema.multiple ? files : files[0] || null
   }
@@ -336,5 +332,36 @@ export default TypeComponent.register('upload', {
 function asFiles(value) {
   return value ? asArray(value) : []
 }
-
 </script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-upload {
+  .dito-table {
+    tr {
+      vertical-align: middle;
+    }
+  }
+
+  .dito-button-add-upload {
+    padding: 0;
+
+    > * {
+      position: absolute;
+      cursor: pointer;
+    }
+  }
+
+  .dito-upload-footer {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+
+    .dito-progress {
+      flex: auto;
+      margin-right: $form-spacing;
+    }
+  }
+}
+</style>

package/src/types/index.js

@@ -1,29 +1,29 @@
 // NOTE: index.js exports nothing, but type components will be registered in
-// DitoComponent and can be retrieved through TypeComponent.get(type) and
+// DitoComponent and can be retrieved through DitoTypeComponent.get(type) and
 // rendered through their component-names (e.g. dito-type-list).
 
-export { default as TypeButton } from './TypeButton.vue'
-export { default as TypeCheckbox } from './TypeCheckbox.vue'
-export { default as TypeCheckboxes } from './TypeCheckboxes.vue'
-export { default as TypeCode } from './TypeCode.vue'
-export { default as TypeColor } from './TypeColor.vue'
-export { default as TypeComponent } from './TypeComponent.vue'
-export { default as TypeComputed } from './TypeComputed.vue'
-export { default as TypeDate } from './TypeDate.vue'
-export { default as TypeList } from './TypeList.vue'
-export { default as TypeLabel } from './TypeLabel.vue'
-export { default as TypeMarkup } from './TypeMarkup.vue'
-export { default as TypeMultiselect } from './TypeMultiselect.vue'
-export { default as TypeNumber } from './TypeNumber.vue'
-export { default as TypeObject } from './TypeObject.vue'
-export { default as TypePanel } from './TypePanel.vue'
-export { default as TypeProgress } from './TypeProgress.vue'
-export { default as TypeRadio } from './TypeRadio.vue'
-export { default as TypeSection } from './TypeSection.vue'
-export { default as TypeSelect } from './TypeSelect.vue'
-export { default as TypeSlider } from './TypeSlider.vue'
-export { default as TypeSwitch } from './TypeSwitch.vue'
-export { default as TypeText } from './TypeText.vue'
-export { default as TypeTextarea } from './TypeTextarea.vue'
-export { default as TypeTreeList } from './TypeTreeList.vue'
-export { default as TypeUpload } from './TypeUpload.vue'
+export { default as DitoTypeButton } from './DitoTypeButton.vue'
+export { default as DitoTypeCheckbox } from './DitoTypeCheckbox.vue'
+export { default as DitoTypeCheckboxes } from './DitoTypeCheckboxes.vue'
+export { default as DitoTypeCode } from './DitoTypeCode.vue'
+export { default as DitoTypeColor } from './DitoTypeColor.vue'
+export { default as DitoDitoTypeComponent } from './DitoTypeComponent.vue'
+export { default as DitoTypeComputed } from './DitoTypeComputed.vue'
+export { default as DitoTypeDate } from './DitoTypeDate.vue'
+export { default as DitoTypeList } from './DitoTypeList.vue'
+export { default as DitoTypeLabel } from './DitoTypeLabel.vue'
+export { default as DitoTypeMarkup } from './DitoTypeMarkup.vue'
+export { default as DitoTypeMultiselect } from './DitoTypeMultiselect.vue'
+export { default as DitoTypeNumber } from './DitoTypeNumber.vue'
+export { default as DitoTypeObject } from './DitoTypeObject.vue'
+export { default as DitoTypePanel } from './DitoTypePanel.vue'
+export { default as DitoTypeProgress } from './DitoTypeProgress.vue'
+export { default as DitoTypeRadio } from './DitoTypeRadio.vue'
+export { default as DitoTypeSection } from './DitoTypeSection.vue'
+export { default as DitoTypeSelect } from './DitoTypeSelect.vue'
+export { default as DitoTypeSlider } from './DitoTypeSlider.vue'
+export { default as DitoTypeSwitch } from './DitoTypeSwitch.vue'
+export { default as DitoTypeText } from './DitoTypeText.vue'
+export { default as DitoTypeTextarea } from './DitoTypeTextarea.vue'
+export { default as DitoTypeTreeList } from './DitoTypeTreeList.vue'
+export { default as DitoTypeUpload } from './DitoTypeUpload.vue'

package/src/utils/SchemaGraph.js

@@ -1,6 +1,9 @@
 import { isTemporaryId } from './data.js'
 import {
-  isInteger, asArray, parseDataPath, getValueAtDataPath
+  isInteger,
+  asArray,
+  parseDataPath,
+  getValueAtDataPath
 } from '@ditojs/utils'
 import { nanoid } from 'nanoid'
 
@@ -29,7 +32,7 @@ export class SchemaGraph {
     let subGraph = this.graph
     for (const part of dataPath) {
       const key = isInteger(+part) ? '*' : part
-      subGraph = (subGraph[key] ??= {})
+      subGraph = subGraph[key] ??= {}
     }
     subGraph.$settings = {
       ...defaults, // See `addSource(dataPath)`
@@ -95,9 +98,11 @@ export class SchemaGraph {
       if (source || relation && internal) {
         const values = getValueAtDataPath(data, dataPath, () => null)
         const removeId = clipboard && source && !related
-        const referenceId = clipboard && (
-          relation && internal ||
-          source && related
+        const referenceId = (
+          clipboard && (
+            relation && internal ||
+            source && related
+          )
         )
         for (const value of asArray(values).flat()) {
           const idKey = (
@@ -109,20 +114,23 @@ export class SchemaGraph {
           if (id != null) {
             if (removeId) {
               delete value[idKey]
-            } if (referenceId || isTemporaryId(id)) {
+            }
+            if (referenceId || isTemporaryId(id)) {
               if (isTemporaryId(id)) {
                 id = id.slice(1)
               }
               const refKey = clipboard
-                // Clipboard just needs temporary ids under the actual `idKey`.
-                ? idKey
-                // Server wants Objection-style '#id' / '#ref' pairs.
-                : source ? '#id' : '#ref'
+                ? // Clipboard just needs temporary ids under the actual `idKey`
+                  idKey
+                : // Server wants Objection-style '#id' / '#ref' pairs.
+                  source
+                  ? '#id'
+                  : '#ref'
               const revValue = clipboard
                 ? `@${id}`
-                // Keep the ids unique in reference groups, since they reference
-                // across the full graph.
-                : reference
+                : // Keep the ids unique in reference groups, since they
+                  // reference across the full graph.
+                  reference
                   ? `${reference}-${id}`
                   : id // A temporary id without a related, just preserve it.
               value[refKey] = revValue

package/src/utils/accessor.js

@@ -1,5 +1,8 @@
 import {
-  isFunction, isString, parseDataPath, normalizeDataPath
+  isFunction,
+  isString,
+  parseDataPath,
+  normalizeDataPath
 } from '@ditojs/utils'
 
 export function getSchemaAccessor(
@@ -17,14 +20,19 @@ export function getSchemaAccessor(
     get() {
       // Only determine schema value if we have no getter, or the getter
       // wants to receive the value and process it further:
-      const value = !get || get.length > 0
-        // NOTE: Because `schema` objects are retrieved from `meta` object, they
-        // don't seem to be reactive. To allow changed in `schema` values,
-        // `set()` stores changed values in the separate `overrides` object.
-        ? this.overrides && name in this.overrides
-          ? this.overrides[name]
-          : this.getSchemaValue(keyOrDataPath, { type, default: def, callback })
-        : undefined
+      const value =
+        !get || get.length > 0
+          ? // NOTE: Because `schema` objects are retrieved from `meta`, they
+            // don't seem to be reactive. To allow changed in `schema` values,
+            // `set()` stores changed values in the separate `overrides` object.
+            this.overrides && name in this.overrides
+            ? this.overrides[name]
+            : this.getSchemaValue(keyOrDataPath, {
+                type,
+                default: def,
+                callback
+              })
+          : undefined
       return get ? get.call(this, value) : value
     },
 

package/src/utils/data.js

@@ -1,5 +1,8 @@
 import {
-  isInteger, parseDataPath, getValueAtDataPath, normalizeDataPath
+  isInteger,
+  parseDataPath,
+  getValueAtDataPath,
+  normalizeDataPath
 } from '@ditojs/utils'
 
 export function appendDataPath(dataPath, token) {

package/src/utils/filter.js

@@ -1,7 +1,7 @@
 import { isArray, asArray, labelize } from '@ditojs/utils'
 
 export const filterComponents = {
-  text(filter) {
+  'text'(filter) {
     const options = [
       {
         label: 'contains',
@@ -23,15 +23,14 @@ export const filterComponents = {
     return {
       operator: filter.operators
         ? {
-          type: 'select',
-          options:
-            isArray(filter.operators)
+            type: 'select',
+            options: isArray(filter.operators)
               ? options.filter(
-                option => filter.operators.includes(option.value)
-              )
+                  option => filter.operators.includes(option.value)
+                )
               : options,
-          width: '40%'
-        }
+            width: '40%'
+          }
         : null,
       text: {
         type: 'text',
@@ -186,8 +185,7 @@ function parseFiltersData(schema, query) {
       const [, name, json] = filter.match(/^(\w+):(.*)$/)
       try {
         filters[name] = asArray(JSON.parse(`[${json}]`))
-      } catch (error) {
-      }
+      } catch (error) {}
     }
   }
   const filtersData = {}

package/src/utils/options.js

@@ -6,9 +6,9 @@ export function resolveMergedOptions(options) {
   const { mixins } = options
   return mixins || options.extends
     ? mergeOptions(
-      { ...options },
-      options
-    )
+        { ...options },
+        options
+      )
     : options
 }
 

package/src/utils/resource.js

@@ -6,9 +6,11 @@ export function hasResource(schema) {
 
 export function getResource(resource, defaults = {}) {
   const { parent, ...defs } = defaults
-  resource = isObject(resource) ? { ...defs, ...resource }
-    : isString(resource) ? { ...defs, path: resource }
-    : null
+  resource = isObject(resource)
+    ? { ...defs, ...resource }
+    : isString(resource)
+      ? { ...defs, path: resource }
+      : null
   // Only set parent if path doesn't start with '/', so relative URLs are
   // dealt with correctly.
   if (
@@ -28,12 +30,12 @@ export function getResource(resource, defaults = {}) {
 export function getMemberResource(id, resource) {
   return id != null && resource?.type === 'collection'
     ? {
-      type: 'member',
-      ...pickBy(
-        resource,
-        (value, key) => ['method', 'path', 'parent'].includes(key)
-      ),
-      id: `${id}`
-    }
+        type: 'member',
+        ...pickBy(
+          resource,
+          (value, key) => ['method', 'path', 'parent'].includes(key)
+        ),
+        id: `${id}`
+      }
     : null
 }