@ditojs/admin 2.3.1 → 2.4.0

package/src/styles/_settings.scss

@@ -43,21 +43,31 @@ $content-color-background: $color-lightest;
 $form-spacing: $input-padding-hor;
 $form-spacing-half: calc($form-spacing / 2);
 
-// Menu
-$menu-font-size: 14px;
-$menu-line-height: 1;
-$menu-z-index: 1000;
-$menu-padding-ver: $menu-font-size;
-$menu-padding-hor: $content-padding;
-$menu-padding: $menu-padding-ver $menu-padding-hor;
-$menu-height: $menu-font-size + 2 * $menu-padding-ver;
+// Header
+$header-font-size: 14px;
+$header-line-height: 1;
+$header-z-index: 1000;
+$header-padding-ver: $header-font-size;
+$header-padding-hor: $content-padding;
+$header-padding: $header-padding-ver $header-padding-hor;
+$header-height: $header-font-size + 2 * $header-padding-ver;
 
 // Tabs
 $tab-margin: 6px;
 $tab-padding-hor: 12px;
-$tab-padding-ver: calc(($menu-padding-ver * 2 - $tab-margin) / 2);
+$tab-padding-ver: calc(($header-padding-ver * 2 - $tab-margin) / 2);
 $tab-radius: 4px;
-// $border-radius
+
+// Menu
+$menu-font-size: $header-font-size;
+$menu-line-height: $header-line-height;
+$menu-spacing: 4px;
+$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;

package/src/types/DitoTypeButton.vue

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

package/src/types/DitoTypeCheckbox.vue

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

package/src/types/DitoTypeComputed.vue

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

package/src/types/DitoTypeNumber.vue

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

package/src/types/DitoTypeProgress.vue

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

package/src/types/DitoTypeSwitch.vue

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

package/src/types/DitoTypeText.vue

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

package/src/types/DitoTypeTextarea.vue

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

@@ -73,13 +73,8 @@
                 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(
+              ) Cancel
+              VueUpload.dito-button(
                 ref="upload"
                 v-model="uploads"
                 :inputId="dataPath"
@@ -90,10 +85,13 @@
                 :accept="accept"
                 :multiple="multiple"
                 :size="maxSize"
-                title="Upload Files"
+                :title="multiple ? 'Upload Files' : 'Upload File'"
+                :drop="$el?.closest('.dito-container')"
+                :dropDirectory="true"
                 @input-filter="inputFilter"
                 @input-file="inputFile"
               )
+                .dito-button-upload
 </template>
 
 <script>
@@ -169,7 +167,7 @@ export default DitoTypeComponent.register('upload', {
 
     isUploadReady() {
       return (
-        this.uploads.length &&
+        this.uploads.length > 0 &&
         !(this.upload.active || this.upload.uploaded)
       )
     },
@@ -180,7 +178,7 @@ export default DitoTypeComponent.register('upload', {
 
     uploadProgress() {
       return (
-        this.uploads.reduce((total, file) => total + file.progress, 0) /
+        this.uploads.reduce((total, file) => +file.progress + total, 0) /
         this.uploads.length
       )
     },
@@ -193,6 +191,17 @@ export default DitoTypeComponent.register('upload', {
     }
   },
 
+  watch: {
+    isUploadReady(ready) {
+      if (ready) {
+        // Auto-upload.
+        this.$nextTick(() => {
+          this.upload.active = true
+        })
+      }
+    }
+  },
+
   methods: {
     formatFileSize,
 
@@ -293,6 +302,7 @@ export default DitoTypeComponent.register('upload', {
             this.removeFile(newFile)
           }
         } else if (error) {
+          this.removeFile(newFile)
           const text = (
             {
               abort: 'Upload aborted',
@@ -310,7 +320,6 @@ export default DitoTypeComponent.register('upload', {
             title: 'File Upload Error',
             text
           })
-          this.removeFile(newFile)
         }
       }
     },
@@ -347,7 +356,7 @@ function asFiles(value) {
     }
   }
 
-  .dito-button-add-upload {
+  .dito-button-upload {
     padding: 0;
 
     > * {

package/src/utils/schema.js

@@ -113,6 +113,10 @@ export function isPanel(schema) {
   return isSchema(schema) && schema.type === 'panel'
 }
 
+export function isMenu(schema) {
+  return isSchema(schema) && schema.type === 'menu'
+}
+
 export function getSchemaIdentifier(schema) {
   return JSON.stringify(schema)
 }
@@ -176,6 +180,19 @@ export async function resolveSchemas(
   return schemas
 }
 
+export async function resolveViews(unresolvedViews) {
+  return resolveSchemas(unresolvedViews, async (schema, unwrapModule) => {
+    schema = await resolveSchema(schema, unwrapModule)
+    if (!schema.name && isMenu(schema)) {
+      // Generate a name for sub-menus from their label if it's missing.
+      // NOTE: This is never actually referenced from anywhere, but they need
+      // a name by which they're stored in the parent object.
+      schema.name = camelize(schema.label)
+    }
+    return schema
+  })
+}
+
 export async function resolveSchemaComponent(schema) {
   // Resolves async schema components and adds DitoMixin and TypeMixin to them.
   let { component } = schema
@@ -250,22 +267,31 @@ export async function processSchemaComponent(
 }
 
 export async function processView(component, api, schema, name) {
-  if (!isView(schema)) {
-    throw new Error(`Invalid view schema: '${getSchemaIdentifier(schema)}'`)
-  }
-  processRouteSchema(api, schema, name)
   processSchemaDefaults(api, schema)
-  await processNestedSchemas(api, schema)
-  const children = []
-  await processSchemaComponents(api, schema, children, 0)
-  return {
-    path: `/${schema.path}`,
-    children,
-    component,
-    meta: {
-      api,
-      schema
+  if (isView(schema)) {
+    processRouteSchema(api, schema, name)
+    await processNestedSchemas(api, schema)
+    const children = []
+    await processSchemaComponents(api, schema, children, 0)
+    return {
+      path: `/${schema.path}`,
+      children,
+      component,
+      meta: {
+        api,
+        schema
+      }
     }
+  } else if (isMenu(schema)) {
+    schema.items = await resolveSchemas(schema.items)
+    return Promise.all(
+      Object.entries(schema.items).map(async ([name, item]) =>
+        processView(component, api, item, name)
+      )
+    )
+    //
+  } else {
+    throw new Error(`Invalid view schema: '${getSchemaIdentifier(schema)}'`)
   }
 }
 
@@ -303,8 +329,8 @@ export function processNestedSchemaDefaults(api, schema) {
 
 export function processRouteSchema(api, schema, name) {
   // Used for view and source schemas, see SourceMixin.
-  schema.name = name
-  schema.path ||= api.normalizePath(name)
+  schema.name ??= name
+  schema.path ??= api.normalizePath(name)
 }
 
 export async function processForms(api, schema, level) {