@ditojs/admin 2.7.3 → 2.7.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.7.3",
+  "version": "2.7.5",
   "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": "13bec1eda290997bdc10d110652180cdc9d3653b",
+  "gitHead": "d88c47b18f85103460099db95afb067c8c244253",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

package/src/components/DitoCreateButton.vue

@@ -5,8 +5,8 @@
   )
     button.dito-button(
       type="button"
-      :class="`dito-button-${verb}`"
-      :title="labelize(verb)"
+      :disabled="disabled"
+      v-bind="getButtonAttributes(verb)"
       @mousedown.stop="onPulldownMouseDown()"
     ) {{ text }}
     ul.dito-pulldown(:class="{ 'dito-open': pulldown.open }")
@@ -14,17 +14,17 @@
         v-for="(form, type) in forms"
       )
         a(
-          v-if="shouldRenderSchema(form)"
-          v-show="shouldShow(form)"
+          v-if="isFormCreatable(form)"
+          v-show="shouldShowSchema(form)"
           :class="getFormClass(form, type)"
           @mousedown.stop="onPulldownMouseDown(type)"
           @mouseup="onPulldownMouseUp(type)"
         ) {{ getLabel(form) }}
   button.dito-button(
-    v-else
+    v-else-if="isFormCreatable(forms.default)"
     :type="isInlined ? 'button' : 'submit'"
-    :class="`dito-button-${verb}`"
-    :title="labelize(verb)"
+    :disabled="disabled"
+    v-bind="getButtonAttributes(verb)"
     @click="createItem(forms.default)"
   ) {{ text }}
 </template>
@@ -42,7 +42,8 @@ export default DitoComponent.component('DitoCreateButton', {
     schema: { type: Object, required: true },
     path: { type: String, required: true },
     verb: { type: String, required: true },
-    text: { type: String, default: null }
+    text: { type: String, default: null },
+    disabled: { type: Boolean, required: true }
   },
 
   computed: {
@@ -55,13 +56,23 @@ export default DitoComponent.component('DitoCreateButton', {
     },
 
     showPulldown() {
-      return Object.keys(this.forms).length > 1 || !this.forms.default
+      const forms = Object.values(this.forms)
+      return (
+        (forms.length > 1 || !this.forms.default) &&
+        forms.some(this.isFormCreatable)
+      )
     }
   },
 
   methods: {
+    isFormCreatable(form) {
+      // Forms can be excluded from the list by providing `if: false` or
+      // `creatable: false`.
+      return form.creatable !== false && this.shouldRenderSchema(form)
+    },
+
     createItem(form, type = null) {
-      if (this.shouldRenderSchema(form) && !this.shouldDisable(form)) {
+      if (this.isFormCreatable(form) && !this.shouldDisableSchema(form)) {
         if (this.isInlined) {
           this.sourceComponent.createItem(form, type)
         } else {
@@ -78,7 +89,7 @@ export default DitoComponent.component('DitoCreateButton', {
     getFormClass(form, type) {
       return {
         [`dito-type-${type}`]: true,
-        'dito-disabled': this.shouldDisable(form)
+        'dito-disabled': this.shouldDisableSchema(form)
       }
     },
 

package/src/components/DitoDialog.vue

@@ -7,9 +7,7 @@
   :style="{ '--width': `${settings.width}px` }"
   @mouseup="onMouseUp"
 )
-  UseFocusTrap.dito-dialog__focus-trap(
-    :options="{ immediate: true, fallbackFocus: () => $refs.dialog }"
-  )
+  UseFocusTrap.dito-dialog__focus-trap(:options="focusTrapOptions")
     form.dito-scroll-parent(
       @submit.prevent="submit"
     )
@@ -104,6 +102,14 @@ export default DitoComponent.component('DitoDialog', {
       )
     },
 
+    focusTrapOptions() {
+      return {
+        immediate: true,
+        fallbackFocus: () => this.$refs.dialog,
+        onDeactivate: this.cancel
+      }
+    },
+
     hasButtons() {
       return Object.keys(this.buttonSchemas).length > 0
     },

package/src/components/DitoEditButtons.vue

@@ -11,25 +11,27 @@ 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-bind="getButtonAttributes(verbs.drag)"
   )
   RouterLink.dito-button(
     v-if="hasEditable"
-    :class="{ 'dito-disabled': !editPath }"
+    :class="{ 'dito-disabled': disabled || !editPath }"
     :to="editPath ? { path: editPath } : {}"
     v-bind="getButtonAttributes(verbs.edit)"
   )
   DitoCreateButton(
     v-if="hasCreatable"
-    :class="{ 'dito-disabled': !createPath }"
     :schema="schema"
     :path="createPath"
     :verb="verbs.create"
     :text="createButtonText"
+    :disabled="disabled || !createPath"
   )
   button.dito-button(
     v-if="hasDeletable"
     type="button"
+    :disabled="disabled || !isFormDeletable"
     v-bind="getButtonAttributes(verbs.delete)"
     @click="$emit('delete')"
   )
@@ -44,18 +46,19 @@ export default DitoComponent.component('DitoEditButtons', {
   emits: ['delete'],
 
   props: {
-    draggable: { type: Boolean, default: false },
-    editable: { type: Boolean, default: false },
-    creatable: { type: Boolean, default: false },
-    deletable: { type: Boolean, default: false },
-    editPath: { type: String, default: null },
-    createPath: { type: String, default: null },
     buttons: { type: Object, default: null },
     schema: { type: Object, required: true },
     dataPath: { type: String, required: true },
     data: { type: [Object, Array], default: null },
     meta: { type: Object, required: true },
-    store: { type: Object, required: true }
+    store: { type: Object, required: true },
+    disabled: { type: Boolean, required: true },
+    draggable: { type: Boolean, default: false },
+    editable: { type: Boolean, default: false },
+    creatable: { type: Boolean, default: false },
+    deletable: { type: Boolean, default: false },
+    editPath: { type: String, default: null },
+    createPath: { type: String, default: null }
   },
 
   computed: {
@@ -79,6 +82,10 @@ export default DitoComponent.component('DitoEditButtons', {
       return this.hasOption('deletable')
     },
 
+    isFormDeletable() {
+      return this.schema.deletable !== false
+    },
+
     createButtonText() {
       return (
         // Allow schema to override create button through creatable object:

package/src/components/DitoForm.vue

@@ -17,6 +17,14 @@
     :is="isNestedRoute ? 'div' : 'form'"
     @submit.prevent
   )
+    //- Prevent implicit submission of the form, for example when typing enter
+    //- in an input field.
+    //- https://stackoverflow.com/a/51507806
+    button(
+      v-show="false"
+      type="submit"
+      disabled
+    )
     DitoSchema(
       :schema="schema"
       :dataPath="dataPath"
@@ -37,14 +45,6 @@
           :store="store"
           :disabled="isLoading"
         )
-    //- Prevent implicit submission of the form, for example when typing enter
-    //- in an input field.
-    //- https://stackoverflow.com/a/51507806
-    button(
-      v-show="false"
-      type="submit"
-      disabled
-    )
 </template>
 
 <script>

package/src/components/DitoSchema.vue

@@ -475,12 +475,14 @@ export default DitoComponent.component('DitoSchema', {
     },
 
     repositionErrors() {
-      // Force repositioning of error tooltips, as otherwise they
-      // sometimes don't show up in the right place initially when
-      // changing tabs
-      const scrollParent = this.$refs.content.closest('.dito-scroll')
-      scrollParent.scrollTop++
-      scrollParent.scrollTop--
+      // Fire a fake scroll event to force the repositioning of error tooltips,
+      // as otherwise they sometimes don't show up in the right place initially
+      // when changing tabs.
+      const scrollContainer = this.$refs.content.closest('.dito-scroll')
+      const dispatch = () => scrollContainer.dispatchEvent(new Event('scroll'))
+      dispatch()
+      // This is required to handle `&--label-vertical` based layout changes.
+      setTimeout(dispatch, 0)
     },
 
     focus() {

package/src/components/DitoSchemaInlined.vue

@@ -19,15 +19,16 @@ DitoSchema.dito-schema-inlined(
   template(#edit-buttons)
     DitoEditButtons(
       v-if="deletable || draggable || editable"
-      :deletable="deletable"
-      :draggable="draggable"
-      :editable="editable"
-      :editPath="editPath"
       :schema="schema"
       :dataPath="dataPath"
       :data="data"
       :meta="meta"
       :store="store"
+      :disabled="disabled"
+      :deletable="deletable"
+      :draggable="draggable"
+      :editable="editable"
+      :editPath="editPath"
       @delete="$emit('delete')"
     )
 </template>

package/src/mixins/DitoMixin.js

@@ -288,7 +288,7 @@ export default {
       return shouldRenderSchema(schema, this.context)
     },
 
-    shouldShow(schema = null) {
+    shouldShowSchema(schema = null) {
       return this.getSchemaValue('visible', {
         type: Boolean,
         default: true,
@@ -296,7 +296,7 @@ export default {
       })
     },
 
-    shouldDisable(schema = null) {
+    shouldDisableSchema(schema = null) {
       return this.getSchemaValue('disabled', {
         type: Boolean,
         default: false,

package/src/mixins/TypeMixin.js

@@ -3,7 +3,7 @@ import ValidationMixin from './ValidationMixin.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
 import { computeValue } from '../utils/schema.js'
 import { getItem, getParentItem } from '../utils/data.js'
-import { camelize } from '@ditojs/utils'
+import { asArray, camelize } from '@ditojs/utils'
 
 // @vue/component
 export default {
@@ -251,9 +251,7 @@ export default {
     // @overridable
     async scrollIntoView() {
       await this.focusSchema()
-      let { element = this } = this.$refs
-      element = element.scrollIntoView ? element : element.$el
-      element.scrollIntoView?.({
+      this.getFocusElement()?.scrollIntoView?.({
         behavior: 'smooth',
         block: 'center'
       })
@@ -261,16 +259,17 @@ export default {
 
     // @overridable
     focusElement() {
-      let { element = this } = this.$refs
-      element = element.focus ? element : element.$el
-      element.focus?.()
+      this.getFocusElement()?.focus?.()
     },
 
     // @overridable
     blurElement() {
-      let { element = this } = this.$refs
-      element = element.blur ? element : element.$el
-      element.blur?.()
+      this.getFocusElement()?.blur?.()
+    },
+
+    getFocusElement() {
+      const element = asArray(this.$refs.element)[0] ?? this
+      return element.$el ?? element
     },
 
     async focusSchema() {

package/src/types/DitoTypeList.vue

@@ -107,15 +107,16 @@
           v-if="hasCellEditButtons"
         )
           DitoEditButtons(
-            :deletable="deletable"
-            :draggable="draggable"
-            :editable="editable"
-            :editPath="getEditPath(item, index)"
             :schema="getItemFormSchema(schema, item, context)"
             :dataPath="getDataPath(index)"
             :data="item"
             :meta="nestedMeta"
             :store="getItemStore(schema, item, index)"
+            :disabled="disabled || isLoading"
+            :deletable="deletable"
+            :draggable="draggable"
+            :editable="editable"
+            :editPath="getEditPath(item, index)"
             @delete="deleteItem(item, index)"
           )
     //- Render create buttons inside table when not in a single component view:
@@ -125,26 +126,28 @@
       tr
         td.dito-cell-edit-buttons(:colspan="numColumns")
           DitoEditButtons(
-            :creatable="creatable"
-            :createPath="path"
             :buttons="buttonSchemas"
             :schema="schema"
             :dataPath="dataPath"
             :data="listData"
             :meta="meta"
             :store="store"
+            :disabled="disabled || isLoading"
+            :creatable="creatable"
+            :createPath="path"
           )
   //- Render create buttons outside table when in a single component view:
   DitoEditButtons.dito-buttons-main.dito-buttons-large(
     v-if="hasListButtons && single"
-    :creatable="creatable"
-    :createPath="path"
     :buttons="buttonSchemas"
     :schema="schema"
     :dataPath="dataPath"
     :data="listData"
     :meta="meta"
     :store="store"
+    :disabled="disabled || isLoading"
+    :creatable="creatable"
+    :createPath="path"
   )
 </template>
 

package/src/types/DitoTypeMultiselect.vue

@@ -40,13 +40,14 @@
     )
   DitoEditButtons(
     v-if="editable"
-    :editable="editable"
-    :editPath="editPath"
     :schema="schema"
     :dataPath="dataPath"
     :data="data"
     :meta="meta"
     :store="store"
+    :disabled="disabled"
+    :editable="editable"
+    :editPath="editPath"
   )
 </template>
 

package/src/types/DitoTypeObject.vue

@@ -36,11 +36,6 @@
       v-html="getItemLabel(schema, objectData)"
     )
   DitoEditButtons(
-    :creatable="creatable"
-    :deletable="objectData && deletable"
-    :editable="objectData && editable"
-    :createPath="path"
-    :editPath="path"
     :buttons="buttonSchemas"
     :schema="schema"
     :dataPath="dataPath"
@@ -48,6 +43,12 @@
     :path="path"
     :meta="meta"
     :store="store"
+    :disabled="disabled || isLoading"
+    :creatable="creatable"
+    :deletable="objectData && deletable"
+    :editable="objectData && editable"
+    :createPath="path"
+    :editPath="path"
     @delete="deleteItem(objectData)"
   )
 </template>

package/src/types/DitoTypeSelect.vue

@@ -39,13 +39,14 @@
     )
   DitoEditButtons(
     v-if="editable"
-    :editable="editable"
-    :editPath="editPath"
     :schema="schema"
     :dataPath="dataPath"
     :data="data"
     :meta="meta"
     :store="store"
+    :disabled="disabled"
+    :editable="editable"
+    :editPath="editPath"
   )
 </template>