@ditojs/admin 1.30.0 → 2.0.1

package/src/types/TypeObject.vue

@@ -1,56 +1,56 @@
 <template lang="pug">
-  .dito-object(
-    v-if="isReady"
-    :id="dataPath"
-    :class="schema.class"
-    :style="schema.style"
+.dito-object(
+  v-if="isReady"
+  :id="dataPath"
+  :class="schema.class"
+  :style="schema.style"
+)
+  .dito-object-content(
+    v-if="objectData"
   )
-    .dito-object-content(
-      v-if="objectData"
-    )
-      // Support the same rendering options as TypeList:
-      dito-schema-inlined(
-        v-if="isInlined"
+    //- Support the same rendering options as TypeList:
+    dito-schema-inlined(
+      v-if="isInlined"
         :label="objectLabel"
-        :schema="getItemFormSchema(schema, objectData, context)"
-        :dataPath="dataPath"
-        :data="objectData"
-        :meta="nestedMeta"
-        :store="store"
-        :disabled="disabled || isLoading"
-        :collapsed="collapsed"
-        :collapsible="collapsible"
-      )
-      component(
-        v-else-if="component"
-        :is="component"
-        :dataPath="dataPath"
-        :data="objectData"
-        :nested="false"
-      )
-      span(
-        v-else-if="render"
-        v-html="render(getContext())"
-      )
-      span(
-        v-else
-        v-html="getItemLabel(schema, objectData)"
-      )
-    dito-edit-buttons(
-      :creatable="creatable"
-      :deletable="objectData && deletable"
-      :editable="objectData && editable"
-      :createPath="path"
-      :editPath="path"
-      :buttons="buttonSchemas"
-      :schema="schema"
+      :schema="getItemFormSchema(schema, objectData, context)"
       :dataPath="dataPath"
       :data="objectData"
-      :path="path"
-      :meta="meta"
+      :meta="nestedMeta"
       :store="store"
-      @delete="deleteItem(objectData)"
+      :disabled="disabled || isLoading"
+      :collapsed="collapsed"
+      :collapsible="collapsible"
+    )
+    component(
+      v-else-if="schema.component"
+      :is="schema.component"
+      :dataPath="dataPath"
+      :data="objectData"
+      :nested="false"
+    )
+    span(
+      v-else-if="render"
+      v-html="render(getContext())"
     )
+    span(
+      v-else
+      v-html="getItemLabel(schema, objectData)"
+    )
+  dito-edit-buttons(
+    :creatable="creatable"
+    :deletable="objectData && deletable"
+    :editable="objectData && editable"
+    :createPath="path"
+    :editPath="path"
+    :buttons="buttonSchemas"
+    :schema="schema"
+    :dataPath="dataPath"
+    :data="objectData"
+    :path="path"
+    :meta="meta"
+    :store="store"
+    @delete="deleteItem(objectData)"
+  )
 </template>
 
 <style lang="sass">
@@ -74,6 +74,7 @@
 import TypeComponent from '../TypeComponent.js'
 import DitoContext from '../DitoContext.js'
 import SourceMixin from '../mixins/SourceMixin.js'
+import { resolveSchemaComponent } from '../utils/schema.js'
 
 // @vue/component
 export default TypeComponent.register('object', {
@@ -97,6 +98,21 @@ export default TypeComponent.register('object', {
     getContext() {
       return new DitoContext(this, { data: this.objectData })
     }
+  },
+
+  async processSchema(
+    api, schema, name, routes, level,
+    nested = false, flatten = false,
+    process = null
+  ) {
+    await Promise.all([
+      resolveSchemaComponent(schema),
+      SourceMixin.processSchema(
+        api, schema, name, routes, level,
+        nested, flatten,
+        process
+      )
+    ])
   }
 })
 </script>

package/src/types/TypeProgress.vue

@@ -1,12 +1,11 @@
 <template lang="pug">
-  progress.dito-progress(
-    ref="element"
-    :id="dataPath"
-    :value="progressValue"
-    :max="progressMax"
-    v-bind="attributes"
-    v-on="listeners"
-  )
+progress.dito-progress(
+  ref="element"
+  :id="dataPath"
+  :value="progressValue"
+  :max="progressMax"
+  v-bind="attributes"
+)
 </template>
 
 <script>

package/src/types/TypeRadio.vue

@@ -1,19 +1,20 @@
 <template lang="pug">
-  ul.dito-radio-buttons(
-    :id="dataPath"
-    :class="`dito-layout-${schema.layout || 'vertical'}`"
+ul.dito-radio-buttons(
+  :id="dataPath"
+  :class="`dito-layout-${schema.layout || 'vertical'}`"
+)
+  li(
+    v-for="option in options"
   )
-    li(v-for="option in options")
-      label
-        input.dito-radio-button(
-          ref="element"
-          type="radio"
-          :value="getValueForOption(option)"
-          v-model="selectedValue"
-          v-bind="attributes"
-          v-on="listeners"
-        )
-        | {{ getLabelForOption(option) }}
+    label
+      input.dito-radio-button(
+        ref="element"
+        type="radio"
+        :value="getValueForOption(option)"
+        v-model="selectedValue"
+        v-bind="attributes"
+      )
+      | {{ getLabelForOption(option) }}
 </template>
 
 <style lang="sass">

package/src/types/TypeSection.vue

@@ -1,15 +1,15 @@
 <template lang="pug">
-  .dito-section(
-    :class="{ 'dito-section-labelled' : !!schema.label }"
+.dito-section(
+  :class="{ 'dito-section-labelled' : !!schema.label }"
+)
+  dito-pane.dito-section-pane(
+    :schema="getItemFormSchema(schema, item, context)"
+    :dataPath="dataPath"
+    :data="item"
+    :meta="meta"
+    :store="store"
+    :disabled="disabled"
   )
-    dito-pane.dito-section-pane(
-      :schema="getItemFormSchema(schema, item, context)"
-      :dataPath="dataPath"
-      :data="item"
-      :meta="meta"
-      :store="store"
-      :disabled="disabled"
-    )
 </template>
 
 <style lang="sass">

package/src/types/TypeSelect.vue

@@ -1,44 +1,43 @@
 <template lang="pug">
-  //- Nesting is needed to make an arrow appear over the select item:
-  .dito-select
-    select(
-      ref="element"
-      :id="dataPath"
-      v-model="selectedValue"
-      v-bind="attributes"
-      v-on="listeners"
-      @mousedown="populate = true"
-      @focus="populate = true"
+//- Nesting is needed to make an arrow appear over the select item:
+.dito-select
+  select(
+    ref="element"
+    :id="dataPath"
+    v-model="selectedValue"
+    v-bind="attributes"
+    @mousedown="populate = true"
+    @focus="populate = true"
+  )
+    template(
+      v-if="populate"
     )
       template(
-        v-if="populate"
+        v-for="option in options"
       )
-        template(
-          v-for="option in options"
+        optgroup(
+          v-if="groupBy"
+          :label="option[groupByLabel]"
         )
-          optgroup(
-            v-if="groupBy"
-            :label="option[groupByLabel]"
-          )
-            option(
-              v-for="opt in option[groupByOptions]"
-              :value="getValueForOption(opt)"
-            ) {{ getLabelForOption(opt) }}
           option(
-            v-else
-            :value="getValueForOption(option)"
-          ) {{ getLabelForOption(option) }}
-      template(
-        v-else-if="selectedOption"
-      )
+            v-for="opt in option[groupByOptions]"
+            :value="getValueForOption(opt)"
+          ) {{ getLabelForOption(opt) }}
         option(
-          :value="selectedValue"
-        ) {{ getLabelForOption(selectedOption) }}
-    button.dito-button-clear.dito-button-overlay(
-      v-if="showClearButton"
-      @click="clear"
-      :disabled="disabled"
+          v-else
+          :value="getValueForOption(option)"
+        ) {{ getLabelForOption(option) }}
+    template(
+      v-else-if="selectedOption"
     )
+      option(
+        :value="selectedValue"
+      ) {{ getLabelForOption(selectedOption) }}
+  button.dito-button-clear.dito-button-overlay(
+    v-if="showClearButton"
+    @click="clear"
+    :disabled="disabled"
+  )
 </template>
 
 <style lang="sass">

package/src/types/TypeSlider.vue

@@ -1,26 +1,24 @@
 <template lang="pug">
-  .dito-slider
-    input.dito-range(
-      ref="element"
-      :id="dataPath"
-      type="range"
-      v-model="inputValue"
-      v-bind="attributes"
-      v-on="listeners"
-      :min="min"
-      :max="max"
-      :step="stepValue"
-    )
-    input-field.dito-number(
-      v-if="input"
-      type="number"
-      v-model="inputValue"
-      v-bind="attributes"
-      v-on="listeners"
-      :min="min"
-      :max="max"
-      :step="stepValue"
-    )
+.dito-slider
+  input.dito-range(
+    ref="element"
+    :id="dataPath"
+    type="range"
+    v-model="inputValue"
+    v-bind="attributes"
+    :min="min"
+    :max="max"
+    :step="stepValue"
+  )
+  input-field.dito-number(
+    v-if="input"
+    type="number"
+    v-model="inputValue"
+    v-bind="attributes"
+    :min="min"
+    :max="max"
+    :step="stepValue"
+  )
 </template>
 
 <style lang="sass">

package/src/types/TypeSwitch.vue

@@ -1,13 +1,12 @@
 <template lang="pug">
-  switch-button.dito-switch(
-    ref="element"
-    :id="dataPath"
-    :sync="true"
-    :labels="labels"
-    v-model="value"
-    v-bind="attributes"
-    v-on="listeners"
-  )
+switch-button.dito-switch(
+  ref="element"
+  :id="dataPath"
+  :sync="true"
+  :labels="labels"
+  v-model="value"
+  v-bind="attributes"
+)
 </template>
 
 <style lang="sass">

package/src/types/TypeText.vue

@@ -1,12 +1,11 @@
 <template lang="pug">
-  input-field.dito-text(
-    ref="element"
-    :id="dataPath"
-    :type="inputType"
-    v-model="inputValue"
-    v-bind="attributes"
-    v-on="listeners"
-  )
+input-field.dito-text(
+  ref="element"
+  :id="dataPath"
+  :type="inputType"
+  v-model="inputValue"
+  v-bind="attributes"
+)
 </template>
 
 <script>

package/src/types/TypeTextarea.vue

@@ -1,13 +1,12 @@
 <template lang="pug">
-  textarea.dito-textarea.dito-input(
-    ref="element"
-    :id="dataPath"
-    v-model="value"
-    v-bind="attributes"
-    v-on="listeners"
-    :rows="lines"
-    :class="{ 'dito-resizable': resizable }"
-  )
+textarea.dito-textarea.dito-input(
+  ref="element"
+  :id="dataPath"
+  v-model="value"
+  v-bind="attributes"
+  :rows="lines"
+  :class="{ 'dito-resizable': resizable }"
+)
 </template>
 
 <style lang="sass">

package/src/types/TypeTreeList.vue

@@ -1,23 +1,23 @@
 <template lang="pug">
-  .dito-tree-list
-    dito-scopes(
-      v-if="scopes"
-      :query="query"
-      :scopes="scopes"
+.dito-tree-list
+  dito-scopes(
+    v-if="scopes"
+    :query="query"
+    :scopes="scopes"
+  )
+  .dito-tree-panel
+    dito-tree-item(
+      :schema="treeSchema"
+      :dataPath="treeDataPath"
+      :data="treeData"
+      :draggable="draggable"
+      :open="true"
     )
-    .dito-tree-panel
-      dito-tree-item(
-        :schema="treeSchema"
-        :dataPath="treeDataPath"
-        :data="treeData"
-        :draggable="draggable"
-        :open="true"
-      )
-      .dito-tree-form-container(
-        v-if="hasEditableForms"
-      )
-        // Include a router-view for the optional DitoFormInlined
-        router-view
+    .dito-tree-form-container(
+      v-if="hasEditableForms"
+    )
+      //- Include a router-view for the optional DitoFormInlined
+      router-view
 </template>
 
 <style lang="sass">
@@ -44,7 +44,9 @@
 <script>
 import TypeComponent from '../TypeComponent.js'
 import SourceMixin from '../mixins/SourceMixin.js'
-import { hasFormSchema, getFormSchemas } from '../utils/schema.js'
+import {
+  hasFormSchema, getFormSchemas, resolveSchemaComponents
+} from '../utils/schema.js'
 
 export default TypeComponent.register([
   'tree-list', 'tree-object'
@@ -120,23 +122,27 @@ export default TypeComponent.register([
     nested = true, flatten = false,
     process = null
   ) {
-    return SourceMixin.processSchema(
-      api, schema, name, routes, level,
-      nested, flatten,
-      // Pass process() to add more routes to childRoutes:
-      (childRoutes, level) => {
-        const { children } = schema
-        if (children) {
+    await Promise.all([
+      resolveSchemaComponents(schema.properties),
+      SourceMixin.processSchema(
+        api, schema, name, routes, level,
+        nested, flatten,
+        // Pass process() to add more routes to childRoutes:
+        (childRoutes, level) => {
+          const { children } = schema
+          if (children) {
           // Add `type` to the nested tree list.
-          children.type = 'tree-list'
-          return this.processSchema(
-            api, children, children.name, childRoutes, level,
-            nested, true, // Pass `true` for `flatten` in tree lists.
-            process
-          )
+            children.type = 'tree-list'
+            // Recursively call `processSchema()` for the nested tree list:
+            return this.processSchema(
+              api, children, children.name, childRoutes, level,
+              nested, true, // Pass `true` for `flatten` in tree lists.
+              process
+            )
+          }
         }
-      }
-    )
+      )
+    ])
   },
 
   getFormSchemasForProcessing(schema, context) {

package/src/types/TypeUpload.vue

@@ -1,30 +1,29 @@
 <template lang="pug">
-  .dito-upload
-    table.dito-table.dito-table-separators.dito-table-background
-      //- Styling comes from DitoTableHead
-      thead.dito-table-head
+.dito-upload
+  table.dito-table.dito-table-separators.dito-table-background
+    //- Styling comes from DitoTableHead
+    thead.dito-table-head
+      tr
+        th
+          span Name
+        th
+          span Size
+        th
+          span Status
+        th
+          span
+    vue-sortable(
+      tag="tbody"
+      :list="files"
+      :options="getDragOptions(draggable)"
+      itemKey="key"
+      @start="onStartDrag"
+      @end="onEndDrag"
+    )
+      template(#item="{ element: file, index }")
         tr
-          th
-            span Name
-          th
-            span Size
-          th
-            span Status
-          th
-            span
-      vue-draggable(
-        tag="tbody"
-        v-bind="getDragOptions(draggable)"
-        :list="files"
-        @start="onStartDrag"
-        @end="onEndDrag"
-      )
-        tr(
-          v-for="(file, index) in files"
-          :key="file.key"
-        )
           td(v-html="renderFile(file, index)")
-          td {{ file.size | formatFileSize }}
+          td {{ formatFileSize(file.size) }}
           td
             template(v-if="file.upload")
               template(v-if="file.upload.error")
@@ -48,41 +47,41 @@
                 @click="deleteFile(file, index)"
                 v-bind="getButtonAttributes(verbs.delete)"
               )
-      tfoot
-        tr
-          td(:colspan="4")
-            .dito-upload-footer
-              progress.dito-progress(
+    tfoot
+      tr
+        td(:colspan="4")
+          .dito-upload-footer
+            progress.dito-progress(
+              v-if="isUploadActive"
+              :value="uploadProgress"
+              max="100"
+            )
+            .dito-buttons.dito-buttons-round
+              button.dito-button(
                 v-if="isUploadActive"
-                :value="uploadProgress"
-                max="100"
+                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
+              vue-upload.dito-button.dito-button-add-upload(
+                :input-id="dataPath"
+                :name="dataPath"
+                :disabled="disabled"
+                :post-action="uploadPath"
+                :extensions="extensions"
+                :accept="accept"
+                :multiple="multiple"
+                :size="maxSize"
+                v-model="uploads"
+                @input-filter="inputFilter"
+                @input-file="inputFile"
+                ref="upload"
+                title="Upload Files"
               )
-              .dito-buttons.dito-buttons-round
-                button.dito-button(
-                  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
-                vue-upload.dito-button.dito-button-add-upload(
-                  :input-id="dataPath"
-                  :name="dataPath"
-                  :disabled="disabled"
-                  :post-action="uploadPath"
-                  :extensions="extensions"
-                  :accept="accept"
-                  :multiple="multiple"
-                  :size="maxSize"
-                  v-model="uploads"
-                  @input-filter="inputFilter"
-                  @input-file="inputFile"
-                  ref="upload"
-                  title="Upload Files"
-                )
 </template>
 
 <style lang="sass">
@@ -111,7 +110,7 @@ import TypeComponent from '../TypeComponent.js'
 import DitoContext from '../DitoContext.js'
 import OrderedMixin from '../mixins/OrderedMixin.js'
 import VueUpload from 'vue-upload-component'
-import VueDraggable from 'vuedraggable'
+import { Sortable as VueSortable } from 'sortablejs-vue3'
 import parseFileSize from 'filesize-parser'
 import { getSchemaAccessor } from '../utils/accessor.js'
 import { formatFileSize } from '../utils/units.js'
@@ -120,8 +119,7 @@ import { isArray, asArray, escapeHtml } from '@ditojs/utils'
 
 // @vue/component
 export default TypeComponent.register('upload', {
-  components: { VueUpload, VueDraggable },
-  filters: { formatFileSize },
+  components: { VueUpload, VueSortable },
   mixins: [OrderedMixin],
 
   data() {
@@ -202,6 +200,8 @@ export default TypeComponent.register('upload', {
   },
 
   methods: {
+    formatFileSize,
+
     renderFile(file, index) {
       const { render } = this.schema
       return render
@@ -263,7 +263,7 @@ export default TypeComponent.register('upload', {
         const index = this.getFileIndex(file)
         if (index >= 0) {
           if (newFile) {
-            this.$set(this.value, index, newFile)
+            this.value[index] = newFile
           } else {
             this.value.splice(index, 1)
           }

package/src/utils/accessor.js

@@ -33,7 +33,7 @@ export function getSchemaAccessor(
         set.call(this, value)
       } else {
         this.overrides ||= {}
-        this.$set(this.overrides, name, value)
+        this.overrides[name] = value
       }
     }
   }