@ditojs/admin 2.8.0 → 2.8.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.8.0",
+  "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": "6f589b645e8841b1875330d9918a7d952af49b31",
+  "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/DitoCreateButton.vue

@@ -40,6 +40,15 @@ export default DitoComponent.component('DitoCreateButton', {
 
   props: {
     schema: { type: Object, required: true },
+    // The next four props are there for `DitoContext` and the `context()`
+    // getter in `DitoMixin`.
+    // TODO: Should they be moved to shared mixin that defines them as required
+    // and also provides the `context()` getter, perhaps `ContextMixin`?
+    // `schema` could be included as well, and `ContextMixin` could be used in
+    // `DitoForm`, `DitoView`, `DitoPanel`, `DitoSchema`, `DitoEditButtons`,
+    // etc? But the problem with the root components is that they don't have
+    // these props. We could add a `contextAttributes()` getter for easy passing
+    // on as `v-bind="contextAttributes"`.
     dataPath: { type: String, required: true },
     data: { type: [Object, Array], default: null },
     meta: { type: Object, required: true },
@@ -72,7 +81,14 @@ export default DitoComponent.component('DitoCreateButton', {
     isFormCreatable(form) {
       // Forms can be excluded from the list by providing `if: false` or
       // `creatable: false`.
-      return form.creatable !== false && this.shouldRenderSchema(form)
+      return (
+        this.shouldRenderSchema(form) &&
+        this.getSchemaValue('creatable', {
+          type: Boolean,
+          default: true,
+          schema: form
+        })
+      )
     },
 
     createItem(form, type = null) {

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

@@ -10,18 +10,18 @@ DitoButtons.dito-edit-buttons.dito-buttons-round(
 )
   //- Firefox doesn't like <button> here, so use <a> instead:
   a.dito-button(
-    v-if="hasDraggable"
-    :class="{ 'dito-disabled': disabled }"
+    v-if="draggable"
+    :class="{ 'dito-disabled': isDraggableDisabled }"
     v-bind="getButtonAttributes(verbs.drag)"
   )
   RouterLink.dito-button(
-    v-if="hasEditable"
-    :class="{ 'dito-disabled': disabled || !editPath }"
+    v-if="editable"
+    :class="{ 'dito-disabled': isEditableDisabled }"
     :to="editPath ? { path: editPath } : {}"
     v-bind="getButtonAttributes(verbs.edit)"
   )
   DitoCreateButton(
-    v-if="hasCreatable"
+    v-if="creatable"
     :schema="schema"
     :dataPath="dataPath"
     :data="data"
@@ -30,12 +30,12 @@ DitoButtons.dito-edit-buttons.dito-buttons-round(
     :path="createPath"
     :verb="verbs.create"
     :text="createButtonText"
-    :disabled="disabled || !createPath"
+    :disabled="isCreatableDisabled"
   )
   button.dito-button(
-    v-if="hasDeletable"
+    v-if="deletable"
     type="button"
-    :disabled="disabled || !isFormDeletable"
+    :disabled="isDeletableDisabled"
     v-bind="getButtonAttributes(verbs.delete)"
     @click="$emit('delete')"
   )
@@ -70,24 +70,28 @@ export default DitoComponent.component('DitoEditButtons', {
       return this.getLabel(this.schema.form)
     },
 
-    hasDraggable() {
-      return this.hasOption('draggable')
+    isDraggableDisabled() {
+      return this.disabled || !this.hasSchemaOption('draggable')
     },
 
-    hasEditable() {
-      return this.hasOption('editable')
+    isDeletableDisabled() {
+      return this.disabled || !this.hasSchemaOption('deletable')
     },
 
-    hasCreatable() {
-      return this.hasOption('creatable')
-    },
-
-    hasDeletable() {
-      return this.hasOption('deletable')
+    isEditableDisabled() {
+      return (
+        this.disabled ||
+        !this.editPath ||
+        !this.hasSchemaOption('editable')
+      )
     },
 
-    isFormDeletable() {
-      return this.schema.deletable !== false
+    isCreatableDisabled() {
+      return (
+        this.disabled ||
+        !this.createPath ||
+        !this.hasSchemaOption('creatable')
+      )
     },
 
     createButtonText() {
@@ -105,11 +109,13 @@ export default DitoComponent.component('DitoEditButtons', {
   },
 
   methods: {
-    hasOption(name) {
-      // The options of the outer component are passed to the buttons component
-      // through properties `this[name]`, but can be disabled on a per-form
-      // basis by setting `schema[name]` to `false`.
-      return !!(this[name] && this.schema[name] !== false)
+    hasSchemaOption(name) {
+      // All options can be disabled on a per-form basis by setting
+      // `schema[name]` to `false` or a callback returning `false`.
+      return this.getSchemaValue(name, {
+        type: Boolean,
+        default: true
+      })
     }
   }
 })

package/src/components/DitoElement.vue

@@ -26,14 +26,14 @@ export default DitoComponent.component('DitoElement', {
 
     classes() {
       return {
-        ...this.$attrs.class,
+        ...asObject(this.$attrs.class),
         ...asObject(this.options.class)
       }
     },
 
     styles() {
       return {
-        ...this.$attrs.style,
+        ...asObject(this.$attrs.style),
         ...asObject(this.options.style)
       }
     }

package/src/components/DitoLabel.vue

@@ -123,8 +123,6 @@ export default DitoComponent.component('DitoLabel', {
   label {
     cursor: inherit;
     font-weight: bold;
-    white-space: nowrap;
-    line-height: $input-height;
   }
 
   label,
@@ -132,6 +130,9 @@ export default DitoComponent.component('DitoLabel', {
   &__suffix {
     @include user-select(none);
     @include ellipsis;
+
+    white-space: nowrap;
+    line-height: $input-height;
   }
 
   &__prefix + label,

package/src/components/DitoPane.vue

@@ -219,6 +219,7 @@ export default DitoComponent.component('DitoPane', {
 
 .dito-pane {
   $self: &;
+  $root-padding: $content-padding - $form-spacing-half;
 
   display: flex;
   position: relative;
@@ -240,7 +241,7 @@ export default DitoComponent.component('DitoPane', {
     margin: 0;
     // Move the negative margin used to remove the padding added by
     // `.dito-container` inside `.dito-pane` to the padding:
-    padding: $content-padding - $form-spacing-half;
+    padding: $root-padding;
 
     &#{$self}--single {
       padding: $content-padding;
@@ -260,9 +261,9 @@ export default DitoComponent.component('DitoPane', {
       content: '';
       width: 100%;
       border-bottom: $border-style;
-      // Add removed $form-spacing-half again to the ruler
-      margin: (-$content-padding + $form-spacing-half) $form-spacing-half
-        $form-spacing-half;
+      // Shift ruler up by $root-padding to exclude removed $form-spacing-half.
+      margin: (-$root-padding) $form-spacing-half $root-padding;
+      padding: $form-spacing-half;
     }
   }
 
@@ -273,6 +274,9 @@ export default DitoComponent.component('DitoPane', {
   }
 
   .dito-break {
+    // `.dito-break` is rendered as <span> so we can use the
+    // `.dito-container:first-of-type` selector to match the first container
+    // even if it has a break before it.
     display: block;
     flex: 100%;
     height: 0;

package/src/components/DitoSchema.vue

@@ -53,22 +53,24 @@ slot(name="before")
       template(
         v-if="hasTabs"
       )
-        DitoPane.dito-pane__tab(
+        template(
           v-for="(tabSchema, tab) in tabs"
-          v-show="selectedTab === tab"
-          ref="tabs"
-          :key="tab"
-          :tab="tab"
-          :schema="tabSchema"
-          :dataPath="dataPath"
-          :data="data"
-          :meta="meta"
-          :store="store"
-          :single="!inlined && !hasMainPane"
-          :disabled="disabled"
-          :generateLabels="generateLabels"
-          :accumulatedBasis="accumulatedBasis"
         )
+          DitoPane.dito-pane__tab(
+            v-if="selectedTab === tab"
+            ref="tabs"
+            :key="tab"
+            :tab="tab"
+            :schema="tabSchema"
+            :dataPath="dataPath"
+            :data="data"
+            :meta="meta"
+            :store="store"
+            :single="!inlined && !hasMainPane"
+            :disabled="disabled"
+            :generateLabels="generateLabels"
+            :accumulatedBasis="accumulatedBasis"
+          )
       DitoPane.dito-pane__main(
         v-if="hasMainPane"
         ref="components"
@@ -212,7 +214,7 @@ export default DitoComponent.component('DitoSchema', {
     },
 
     clipboard() {
-      return this.schema?.clipboard
+      return this.schema?.clipboard ?? null
     },
 
     hasHeader() {
@@ -674,6 +676,7 @@ export default DitoComponent.component('DitoSchema', {
         {
           // Needed for DitoContext handling inside `processData` and
           // `processSchemaData()`:
+          rootData: this.rootData,
           component: this,
           schemaOnly,
           target
@@ -770,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/mixins/TypeMixin.js

@@ -28,7 +28,6 @@ export default {
   data() {
     return {
       parsedValue: undefined,
-      changedValue: undefined,
       focused: false
     }
   },
@@ -48,37 +47,27 @@ export default {
 
     value: {
       get() {
-        let value = computeValue(
+        const value = computeValue(
           this.schema,
           this.data,
           this.name,
           this.dataPath,
           { component: this }
         )
-        const { formatValue } = this.$options
-        if (formatValue) {
-          value = formatValue(this.schema, value, this.dataPath)
-        }
         const { format } = this.schema
-        if (format) {
-          value = format(new DitoContext(this, { value }))
-        }
-        return value
+        return format
+          ? format(new DitoContext(this, { value }))
+          : value
       },
 
       set(value) {
-        const { parseValue } = this.$options
-        if (parseValue) {
-          value = parseValue(this.schema, value, this.dataPath)
-        }
         const { parse } = this.schema
         if (parse) {
           value = parse(new DitoContext(this, { value }))
         }
+        this.parsedValue = value
         // eslint-disable-next-line vue/no-mutating-props
         this.data[this.name] = value
-        this.parsedValue = value
-        this.changedValue = undefined
       }
     },
 
@@ -295,7 +284,6 @@ export default {
 
     clear() {
       this.value = null
-      this.changedValue = undefined
       this.blur()
       this.onChange()
     },
@@ -318,21 +306,12 @@ export default {
     },
 
     onChange() {
-      const value =
-        this.parsedValue !== undefined ? this.parsedValue : this.value
-
-      if (this.$options.nativeField) {
-        // For some odd reason, the native change event now sometimes fires
-        // twice on Vue3. Filter out second call.
-        // TODO: Investigate why this happens, and if it's a bug in Vue3.
-        if (value === this.changedValue) return
-        this.changedValue = value
-      }
-
       this.markDirty()
       this.emitEvent('change', {
-        // Prevent endless parse recursion:
-        context: { value },
+        context: {
+          // Prevent endless parse recursion:
+          value: this.parsedValue !== undefined ? this.parsedValue : this.value
+        },
         // Pass `schemaComponent` as parent, so change events can propagate up.
         parent: this.schemaComponent
       })

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)"
     )