@ditojs/admin 2.8.0 → 2.8.2

package/src/types/DitoTypeMultiselect.vue

@@ -1,15 +1,14 @@
 <template lang="pug">
-.dito-multiselect(
-  :class=`{
-    'dito-multiselect-single': !multiple,
-    'dito-multiselect-multiple': multiple
-  }`
-)
+.dito-multiselect
   .dito-multiselect__inner
     VueMultiselect(
       ref="element"
       v-model="selectedOptions"
-      :class="{ 'multiselect--show-highlight': showHighlight }"
+      :class=`{
+        'multiselect--multiple': multiple,
+        'multiselect--loading': isLoading,
+        'multiselect--highlight': showHighlight
+      }`
       :showLabels="false"
       :placeholder="placeholder"
       tagPlaceholder="Press enter to add new tag"
@@ -38,6 +37,7 @@
       :disabled="disabled"
       @click="clear"
     )
+  //- Edit button is never disabled, even if the field is disabled.
   DitoEditButtons(
     v-if="editable"
     :schema="schema"
@@ -45,7 +45,7 @@
     :data="data"
     :meta="meta"
     :store="store"
-    :disabled="disabled"
+    :disabled="false"
     :editable="editable"
     :editPath="editPath"
   )
@@ -240,16 +240,6 @@ $tag-line-height: 1em;
     position: relative;
   }
 
-  // TODO: BEM
-  &.dito-multiselect-single {
-    --input-width: 100%;
-  }
-
-  // TODO: BEM
-  &.dito-multiselect-multiple {
-    --input-width: auto;
-  }
-
   .dito-edit-buttons {
     margin-left: $form-spacing-half;
   }
@@ -257,10 +247,16 @@ $tag-line-height: 1em;
   .multiselect {
     $self: last-selector(&);
 
+    --input-width: 100%;
+
     font-size: inherit;
     min-height: inherit;
     color: $color-black;
 
+    &--multiple {
+      --input-width: auto;
+    }
+
     &__tags {
       display: flex;
       font-size: inherit;
@@ -372,11 +368,11 @@ $tag-line-height: 1em;
       }
 
       // Only show the highlight once the pulldown has received mouse or
-      // keyboard interaction, in which case `&--show-highlight` will be set,
+      // keyboard interaction, in which case `&--highlight` will be set,
       // which is controlled by `pointerDirty` in vue-multiselect.
       // Until then, clear the highlight style, but only if it isn't also
       // disabled or selected, in which case we want to keep the style.
-      @at-root #{$self}:not(#{$self}--show-highlight)
+      @at-root #{$self}:not(#{$self}--highlight)
           #{$option}:not(#{$option}--disabled):not(#{$option}--selected) {
         color: $color-text;
         background: transparent;
@@ -390,7 +386,7 @@ $tag-line-height: 1em;
           color: $color-white;
         }
 
-        @at-root #{$self}#{$self}--show-highlight #{last-selector(&)} {
+        @at-root #{$self}#{$self}--highlight #{last-selector(&)} {
           color: $color-text-inverted;
           background: $color-active;
         }
@@ -401,7 +397,7 @@ $tag-line-height: 1em;
         color: $color-text;
         background: $color-highlight;
 
-        @at-root #{$self}#{$self}--show-highlight &#{$option}--highlight {
+        @at-root #{$self}#{$self}--highlight &#{$option}--highlight {
           color: $color-text-inverted;
         }
       }
@@ -489,6 +485,16 @@ $tag-line-height: 1em;
         }
       }
     }
+
+    &--loading {
+      #{$self}__tags {
+        border-radius: $border-radius;
+      }
+
+      #{$self}__content-wrapper {
+        display: none;
+      }
+    }
   }
 }
 </style>

package/src/types/DitoTypeSelect.vue

@@ -37,6 +37,7 @@
       :disabled="disabled"
       @click="clear"
     )
+  //- Edit button is never disabled, even if the field is disabled.
   DitoEditButtons(
     v-if="editable"
     :schema="schema"
@@ -44,7 +45,7 @@
     :data="data"
     :meta="meta"
     :store="store"
-    :disabled="disabled"
+    :disabled="false"
     :editable="editable"
     :editPath="editPath"
   )

package/src/types/DitoTypeUpload.vue

@@ -35,7 +35,7 @@
     DitoDraggable(
       v-model="files"
       tag="tbody"
-      :options="getSortableOptions()"
+      :options="getDraggableOptions()"
       :draggable="draggable"
     )
       template(

package/src/utils/schema.js

@@ -485,11 +485,11 @@ export function getFormSchemas(schema, context, modifyForm) {
 
   let { form, forms } = schema
   if (!form && !forms) {
-    const { components, tabs, compact, clipboard } = schema
+    const { name, compact, clipboard, tabs, components } = schema
     if (components || tabs) {
-      // Convert inlined components to forms, also supporting `tabs`, `compact`
-      // and `clipboard` settings.
-      form = { components, tabs, compact, clipboard }
+      // Convert inlined forms to stand-alone forms, supporting `name`,
+      // `compact`, `clipboard`, `tabs` and `components` settings.
+      form = { type: 'form', name, compact, clipboard, tabs, components }
     } else {
       // No `forms`, `form` or `components`, return and empty `forms` object.
       return {}
@@ -702,10 +702,11 @@ function cloneItem(sourceSchema, item, options) {
 
 export function processData(schema, sourceSchema, data, dataPath, {
   component,
+  rootData,
   schemaOnly, // whether to only include data covered by the schema, or all data
   target
 } = {}) {
-  const options = { component, schemaOnly, target, rootData: data }
+  const options = { component, rootData, schemaOnly, target }
   const processedData = cloneItem(sourceSchema, data, options)
   const graph = new SchemaGraph()
 
@@ -837,15 +838,15 @@ export function processSchemaData(
           const componentDataPath = getDataPath(dataPath, name)
 
           const processItem = (item, index = null) => {
-            const dataPath =
+            const itemDataPath =
               index !== null
                 ? getDataPath(componentDataPath, index)
                 : componentDataPath
             const context = new DitoContext(options.component, {
               schema: componentSchema,
-              data,
+              data: item,
               value: item,
-              dataPath,
+              dataPath: itemDataPath,
               index,
               rootData: options.rootData
             })
@@ -862,7 +863,7 @@ export function processSchemaData(
               return processSchemaData(
                 form,
                 item,
-                dataPath,
+                itemDataPath,
                 processedItem,
                 processBefore,
                 processAfter,
@@ -882,6 +883,7 @@ export function processSchemaData(
             componentDataPath,
             processedData
           )
+
           let value = processedData ? processedData[name] : data[name]
           if (value != null && hasFormSchema(componentSchema)) {
             // Recursively process data on nested form items.
@@ -897,6 +899,7 @@ export function processSchemaData(
               processedData[name] = value
             }
           }
+
           processAfter?.(
             componentSchema,
             data,

package/src/styles/_sortable.scss

@@ -1,13 +0,0 @@
-.dito-sortable-fallback {
-  filter: drop-shadow(0 2px 4px $color-shadow);
-
-  // Nested <td> need to also switch to `display: block` style during dragging
-  &,
-  td {
-    display: flex;
-
-    > * {
-      flex: 1;
-    }
-  }
-}