@ditojs/admin 2.8.0 → 2.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.8.0",
+  "version": "2.8.1",
   "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": "26db3d0a7ebbed92b052bd7cffa078e9cdae7497",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

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/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')
+    isCreatableDisabled() {
+      return (
+        this.disabled ||
+        !this.createPath ||
+        !this.hasSchemaOption('creatable')
+      )
     },
 
-    isFormDeletable() {
-      return this.schema.deletable !== false
+    isEditableDisabled() {
+      return (
+        this.disabled ||
+        !this.editPath ||
+        !this.hasSchemaOption('editable')
+      )
     },
 
     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"

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/types/DitoTypeMultiselect.vue

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

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