@ditojs/admin 2.8.1 → 2.8.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.8.1",
+  "version": "2.8.2",
   "type": "module",
   "description": "Dito.js Admin is a schema based admin interface for Dito.js Server, featuring auto-generated views and forms and built with Vue.js",
   "repository": "https://github.com/ditojs/dito/tree/master/packages/admin",
@@ -83,7 +83,7 @@
     "vite": "^4.3.5"
   },
   "types": "types",
-  "gitHead": "26db3d0a7ebbed92b052bd7cffa078e9cdae7497",
+  "gitHead": "d9a0905b7c93d509a3710b36c749cc6e651401d3",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

package/src/components/DitoClipboard.vue

@@ -73,6 +73,10 @@ export default DitoComponent.component('DitoClipboard', {
     }
   },
 
+  watch: {
+    'appState.clipboardData': 'checkClipboard'
+  },
+
   mounted() {
     // Check clipboard content whenever something gets copied or the window gets
     // (re)activated, as those are the moments when the clipboard can change:

package/src/components/DitoDraggable.vue

@@ -1,9 +1,10 @@
 <template lang="pug">
-UseSortable(
+UseSortable.dito-draggable(
   v-if="draggable"
+  :class="{ 'dito-draggable--dragging': isDragging }"
   :tag="tag"
   :modelValue="modelValue"
-  :options="options"
+  :options="{ ...options, onStart, onEnd }"
   @update:modelValue="$emit('update:modelValue', $event)"
 )
   slot
@@ -15,6 +16,7 @@ component(
 </template>
 
 <script>
+import { addEvents } from '@ditojs/ui'
 import DitoComponent from '../DitoComponent'
 import { UseSortable } from '@vueuse/integrations/useSortable/component'
 
@@ -40,6 +42,73 @@ export default DitoComponent.component('DitoDraggable', {
       type: Boolean,
       default: true
     }
+  },
+
+  data() {
+    return {
+      mouseEvents: null,
+      isDragging: false
+    }
+  },
+
+  methods: {
+    onStart(event) {
+      this.isDragging = true
+      this.options.onStart?.(event)
+      this.mouseEvents?.remove()
+    },
+
+    onEnd(event) {
+      this.options.onEnd?.(event)
+      // Keep `isDragging` true until the next mouse interaction so that
+      // confused hover states are cleared before removing the hover catcher.
+      this.mouseEvents = addEvents(this.$el, {
+        mousedown: this.onMouse,
+        mousemove: this.onMouse,
+        mouseleave: this.onMouse
+      })
+    },
+
+    onMouse() {
+      this.isDragging = false
+      this.mouseEvents.remove()
+      this.mouseEvents = null
+    }
   }
 })
 </script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-draggable {
+  // Overlay a hover catcher while we're dragging to prevent hover states from
+  // getting stuck / confused.
+  &:has(&__chosen),
+  &--dragging {
+    > * {
+      position: relative;
+
+      > :first-child::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+      }
+    }
+  }
+
+  &__fallback {
+    filter: drop-shadow(0 2px 4px $color-shadow);
+
+    // Nested <td> need to also switch to `display: flex` style during dragging.
+    &,
+    td {
+      display: flex;
+
+      > * {
+        flex: 1;
+      }
+    }
+  }
+}
+</style>

package/src/components/DitoEditButtons.vue

@@ -78,19 +78,19 @@ export default DitoComponent.component('DitoEditButtons', {
       return this.disabled || !this.hasSchemaOption('deletable')
     },
 
-    isCreatableDisabled() {
+    isEditableDisabled() {
       return (
         this.disabled ||
-        !this.createPath ||
-        !this.hasSchemaOption('creatable')
+        !this.editPath ||
+        !this.hasSchemaOption('editable')
       )
     },
 
-    isEditableDisabled() {
+    isCreatableDisabled() {
       return (
         this.disabled ||
-        !this.editPath ||
-        !this.hasSchemaOption('editable')
+        !this.createPath ||
+        !this.hasSchemaOption('creatable')
       )
     },
 

package/src/components/DitoSchema.vue

@@ -214,7 +214,7 @@ export default DitoComponent.component('DitoSchema', {
     },
 
     clipboard() {
-      return this.schema?.clipboard
+      return this.schema?.clipboard ?? null
     },
 
     hasHeader() {
@@ -676,6 +676,7 @@ export default DitoComponent.component('DitoSchema', {
         {
           // Needed for DitoContext handling inside `processData` and
           // `processSchemaData()`:
+          rootData: this.rootData,
           component: this,
           schemaOnly,
           target
@@ -772,7 +773,7 @@ export default DitoComponent.component('DitoSchema', {
     grid-template-rows: min-content;
     grid-template-columns: 100%;
 
-    > *:only-child {
+    > :only-child {
       grid-row-end: none;
     }
   }

package/src/components/DitoSchemaInlined.vue

@@ -82,17 +82,10 @@ export default DitoComponent.component('DitoSchemaInlined', {
   grid-template-rows: min-content;
   grid-template-columns: 100%;
 
-  > .dito-schema-content {
+  &:not(:hover, .dito-schema--open) {
     > .dito-schema-header {
-      justify-content: space-between;
-      position: relative;
-
-      .dito-label {
-        width: 100%;
-        margin: 0;
-        // Prevent collapsing to min-height when alone in
-        // .dito-schema-content, due to grid-template-rows: min-content
-        min-height: $input-height;
+      > .dito-clipboard {
+        display: none;
       }
     }
   }

package/src/components/DitoTreeItem.vue

@@ -2,7 +2,7 @@
 .dito-tree-item(
   :id="dataPath"
   :class=`{
-    'dito-dragging': dragging,
+    'dito-dragging': isDragging,
     'dito-active': active
   }`
   :style="level > 0 && { '--level': level }"
@@ -76,7 +76,7 @@
     v-if="childrenSchema"
     v-show="opened"
     :modelValue="updateOrder(childrenSchema, childrenList)"
-    :options="getSortableOptions(true)"
+    :options="getDraggableOptions(true)"
     :draggable="childrenDraggable"
     @update:modelValue="value => (childrenList = value)"
   )

package/src/mixins/SortableMixin.js

@@ -2,19 +2,20 @@
 export default {
   data() {
     return {
-      dragging: false
+      isDragging: false
     }
   },
 
   methods: {
-    getSortableOptions(forceFallback = false) {
+    getDraggableOptions(forceFallback = false) {
+      const prefix = 'dito-draggable'
       return {
         animation: 150,
         handle: '.dito-button-drag',
-        dragClass: 'dito-sortable-active',
-        chosenClass: 'dito-sortable-chosen',
-        ghostClass: 'dito-sortable-ghost',
-        fallbackClass: 'dito-sortable-fallback',
+        dragClass: `${prefix}__drag`,
+        chosenClass: `${prefix}__chosen`,
+        ghostClass: `${prefix}__ghost`,
+        fallbackClass: `${prefix}__fallback`,
         forceFallback,
         onStart: this.onStartDrag,
         onEnd: this.onEndDrag
@@ -22,11 +23,11 @@ export default {
     },
 
     onStartDrag() {
-      this.dragging = true
+      this.isDragging = true
     },
 
     onEndDrag({ oldIndex, newIndex }) {
-      this.dragging = false
+      this.isDragging = false
       if (oldIndex !== newIndex) {
         this.onChange()
       }

package/src/styles/_layout.scss

@@ -13,7 +13,7 @@
 }
 
 .dito-layout-horizontal {
-  > *:not(:first-child) {
+  > :not(:first-child) {
     padding-left: $form-spacing;
   }
 }

package/src/styles/style.scss

@@ -4,7 +4,6 @@
 @import '_pulldown';
 @import '_layout';
 @import '_scroll';
-@import '_sortable';
 @import '_table';
 @import '_info';
 @import '_tippy';

package/src/types/DitoTypeList.vue

@@ -39,7 +39,7 @@
     DitoDraggable(
       tag="tbody"
       :modelValue="updateOrder(sourceSchema, listData, paginationRange)"
-      :options="getSortableOptions()"
+      :options="getDraggableOptions()"
       :draggable="draggable"
       @update:modelValue="value => (listData = value)"
     )

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"
@@ -241,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;
   }
@@ -258,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;
@@ -373,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;
@@ -391,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;
         }
@@ -402,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;
         }
       }
@@ -490,6 +485,16 @@ $tag-line-height: 1em;
         }
       }
     }
+
+    &--loading {
+      #{$self}__tags {
+        border-radius: $border-radius;
+      }
+
+      #{$self}__content-wrapper {
+        display: none;
+      }
+    }
   }
 }
 </style>

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;
-    }
-  }
-}