@ditojs/admin 3.2.6 → 3.3.0

package/src/components/DitoContainer.vue

@@ -16,7 +16,7 @@
       :disabled="disabled"
     )
   DitoLabel(
-    v-if="hasLabel"
+    v-if="shouldRenderLabel"
     :class="labelClasses"
     :htmlFor="labelHtmlFor"
     :label="label"
@@ -36,11 +36,14 @@
     :label="label"
     :single="single"
     :nested="nested"
-    :accumulatedBasis="combinedBasis"
+    :errorsElementId="errorsElementId"
     @errors="onErrors"
     @update:component="value => (component = value)"
   )
-  DitoErrors(:errors="errors")
+  DitoErrors(
+    :id="errorsElementId"
+    :errors="errors"
+  )
 </template>
 
 <script>
@@ -59,6 +62,20 @@ import { appendDataPath } from '../utils/data.js'
 // @vue/component
 export default DitoComponent.component('DitoContainer', {
   mixins: [ValueMixin, ContextMixin],
+
+  provide() {
+    return {
+      $accumulatedBasis: () => this.combinedBasis
+    }
+  },
+
+  inject: {
+    // The basis of the closest ancestor container as a fraction of the width
+    // of the closest non-inlined schema, which provides `1`, see `DitoSchema`.
+    // The default is a factory that returns the injected function.
+    $accumulatedBasis: { default: () => () => 1 }
+  },
+
   props: {
     schema: { type: Object, required: true },
     dataPath: { type: String, default: '' },
@@ -70,8 +87,7 @@ export default DitoComponent.component('DitoContainer', {
     disabled: { type: Boolean, required: true },
     compact: { type: Boolean, default: false },
     generateLabels: { type: Boolean, default: false },
-    verticalLabels: { type: Boolean, default: false },
-    accumulatedBasis: { type: Number, default: null }
+    verticalLabels: { type: Boolean, default: false }
   },
 
   data() {
@@ -129,6 +145,19 @@ export default DitoComponent.component('DitoContainer', {
       return this.hasLabel ? this.getLabel(this.schema) : null
     },
 
+    shouldRenderLabel() {
+      // Type components can display the label themselves, e.g. sections in the
+      // header of their schema. They still receive it through `label`.
+      return (
+        this.hasLabel &&
+        !this.typeComponent?.rendersOwnLabel?.(this.context)
+      )
+    },
+
+    errorsElementId() {
+      return `${this.componentPath}-errors`
+    },
+
     labelHtmlFor() {
       // Type components use their component path as DOM id. Unnested types
       // don't display a value of their own to label:
@@ -205,7 +234,8 @@ export default DitoComponent.component('DitoContainer', {
     },
 
     combinedBasis() {
-      const { accumulatedBasis, flexBasis } = this
+      const accumulatedBasis = this.$accumulatedBasis()
+      const { flexBasis } = this
       return isNumber(accumulatedBasis) && isNumber(flexBasis)
         ? accumulatedBasis * flexBasis
         : null
@@ -262,7 +292,7 @@ export default DitoComponent.component('DitoContainer', {
         this.nested ? this.componentPath : this.parentComponent.componentPath,
         this.componentPath,
         this.$refs.component,
-        this.tabComponent
+        this.tabComponent?.panelTab ?? null
       )
     }
   },
@@ -286,6 +316,17 @@ export default DitoComponent.component('DitoContainer', {
 <style lang="scss">
 @import '../styles/_imports';
 
+@mixin narrow-page-layout($content-width) {
+  @container dito-page (width <= #{0.8 * $content-width}) {
+    flex-grow: 1;
+    flex-basis: var(--basis-mobile, var(--basis));
+  }
+
+  @container dito-page (width <= #{0.6 * $content-width}) {
+    flex-basis: calc(2 * var(--basis));
+  }
+}
+
 .dito-container {
   --grow: 0;
   --shrink: 1;
@@ -313,26 +354,23 @@ export default DitoComponent.component('DitoContainer', {
     padding: 0;
   }
 
+  // Let the components grow and wrap in pages and sidebars that are narrower
+  // than the width that their schemas are laid out for:
   .dito-pane > & {
-    .dito-page--width-80 & {
-      flex-grow: 1;
-      flex-basis: var(--basis-mobile, var(--basis));
-      // DEBUG: background: yellow;
+    .dito-page:not(.dito-page--wide) & {
+      @include narrow-page-layout($content-width);
     }
 
-    .dito-page--width-60 & {
-      flex-basis: calc(2 * var(--basis));
-      // DEBUG: background: orange;
+    .dito-page--wide & {
+      @include narrow-page-layout($content-width-wide);
     }
 
-    .dito-sidebar--width-99 & {
+    @container dito-sidebar (width < #{$sidebar-max-width}) {
       flex-grow: 1;
-      // DEBUG: background: yellow;
     }
 
-    .dito-sidebar--width-60 & {
+    @container dito-sidebar (width <= #{0.6 * $sidebar-max-width}) {
       flex-basis: calc(2 * var(--basis));
-      // DEBUG: background: orange;
     }
   }
 

package/src/components/DitoCreateButton.vue

@@ -1,54 +1,40 @@
 <template lang="pug">
 .dito-create-button
-  button.dito-button(
+  DitoButton(
     v-if="creatableForm"
     :type="isInlined ? 'button' : 'submit'"
+    :verb="verb"
+    :subject="formLabel"
+    :text="text"
     :disabled="disabled"
-    v-bind="getButtonAttributes(verb, formLabel, text)"
     @click="createItem(creatableForm)"
-  ) {{ text }}
-  template(
-    v-else-if="creatableForms"
   )
-    button.dito-button(
-      type="button"
-      :disabled="disabled"
-      v-bind=`{
-        ...pulldownTriggerAttributes,
-        ...getButtonAttributes(verb, null, text)
-      }`
-      @mousedown.stop="onPulldownMouseDown()"
-    ) {{ text }}
-    ul.dito-pulldown(
-      role="menu"
-      :class="{ 'dito-pulldown--open': pulldown.open }"
-    )
-      li(
-        v-for="(form, type) in creatableForms"
-        v-show="shouldShowSchema(form)"
-      )
-        a.dito-pulldown__item(
-          role="menuitem"
-          :class=`{
-            'dito-pulldown__item--disabled': shouldDisableSchema(form)
-          }`
-          @mousedown.stop="onPulldownMouseDown(type)"
-          @mouseup="onPulldownMouseUp(type)"
-        ) {{ getLabel(form) }}
+  DitoMenuButton(
+    v-else-if="hasCreatableForms"
+    :items="menuItems"
+    placement="bottom-right"
+    :disabled="disabled"
+    :verb="verb"
+    :text="text"
+    @select="onSelectMenuItem"
+  )
 </template>
 
 <script>
+import { DitoButton, DitoMenuButton } from '@ditojs/ui/src'
 import DitoComponent from '../DitoComponent.js'
 import ContextMixin from '../mixins/ContextMixin.js'
-import PulldownMixin from '../mixins/PulldownMixin.js'
 import { isInlined } from '../utils/schema/structure.js'
-import { getFormSchemas } from '../utils/schema/lookup.js'
+import { getCreatableForms } from '../utils/schema/data.js'
 
 // @vue/component
 export default DitoComponent.component('DitoCreateButton', {
-  mixins: [ContextMixin, PulldownMixin],
+  mixins: [ContextMixin],
+  components: { DitoButton, DitoMenuButton },
 
   props: {
+    // The schema of the list or object source that creates the item, also
+    // when inserting at `insertIndex` from the buttons of an item.
     schema: { type: Object, required: true },
     // The next four props are there for `DitoContext` and the `context()`
     // getter in `DitoMixin`.
@@ -72,29 +58,27 @@ export default DitoComponent.component('DitoCreateButton', {
   },
 
   computed: {
-    forms() {
-      // When inserting per-item, `this.schema` is the item's form, not the
-      // list schema. Fall back to `sourceSchema` (the parent list's schema via
-      // `meta.schema`) so all creatable forms are discoverable in the pulldown.
-      const schema =
-        this.insertIndex != null
-          ? this.sourceSchema || this.schema
-          : this.schema
-      return getFormSchemas(schema, this.context)
+    creatableForms() {
+      return getCreatableForms(this.schema, this.context)
     },
 
-    creatableForms() {
-      const entries = Object.entries(this.forms).filter(
-        ([, form]) => this.isFormCreatable(form)
-      )
-      return entries.length > 0
-        ? Object.fromEntries(entries)
-        : null
+    hasCreatableForms() {
+      return Object.keys(this.creatableForms).length > 0
     },
 
     creatableForm() {
       const forms = this.creatableForms
-      return forms && Object.keys(forms).length === 1 && forms.default || null
+      return (Object.keys(forms).length === 1 && forms.default) || null
+    },
+
+    menuItems() {
+      return Object.entries(this.creatableForms)
+        .filter(([, form]) => this.shouldShowSchema(form))
+        .map(([type, form]) => ({
+          value: type,
+          label: this.getLabel(form),
+          disabled: this.shouldDisableSchema(form)
+        }))
     },
 
     formLabel() {
@@ -111,19 +95,6 @@ export default DitoComponent.component('DitoCreateButton', {
   },
 
   methods: {
-    isFormCreatable(form) {
-      // Forms can be excluded from the list by providing `if: false` or
-      // `creatable: false`.
-      return (
-        this.shouldRenderSchema(form) &&
-        this.getSchemaValue('creatable', {
-          type: Boolean,
-          default: true,
-          schema: form
-        })
-      )
-    },
-
     createItem(form, type = null) {
       if (!this.shouldDisableSchema(form)) {
         if (this.isInlined) {
@@ -144,28 +115,9 @@ export default DitoComponent.component('DitoCreateButton', {
       }
     },
 
-    onPulldownSelect(type) {
-      this.createItem(this.forms[type], type)
-      this.setPulldownOpen(false)
+    onSelectMenuItem({ value: type }) {
+      this.createItem(this.creatableForms[type], type)
     }
   }
 })
 </script>
-
-<style lang="scss">
-.dito-create-button {
-  position: relative;
-
-  .dito-pulldown {
-    right: 0;
-
-    // TODO: BEM: Use a modifier of this block for sticky button groups.
-    .dito-buttons--sticky & {
-      top: unset;
-      right: unset;
-      bottom: 0;
-      left: 0;
-    }
-  }
-}
-</style>

package/src/components/DitoDialog.vue

@@ -2,10 +2,11 @@
 .dito-dialog(
   ref="dialog"
   role="dialog"
-  :aria-label="schema.label || 'Dialog'"
+  :aria-label="settings.label || 'Dialog'"
   aria-modal="true"
   :style="{ '--width': settings.width ? `${settings.width}px` : null }"
-  @mouseup="onMouseUp"
+  @mouseup.self="onMouseUp"
+  @keydown="onKeyDown"
 )
   UseFocusTrap.dito-dialog__focus-trap(:options="focusTrapOptions")
     form.dito-dialog__form.dito-scroll-parent(
@@ -35,14 +36,12 @@
 import { markRaw } from 'vue'
 import { clone } from '@ditojs/utils'
 import DitoComponent from '../DitoComponent.js'
-import DomMixin from '../mixins/DomMixin.js'
 import { getButtonSchemas } from '../utils/schema/lookup.js'
 import { DataModel } from '../utils/DataModel.js'
 import { UseFocusTrap } from '@vueuse/integrations/useFocusTrap/component'
 
 // @vue/component
 export default DitoComponent.component('DitoDialog', {
-  mixins: [DomMixin],
   components: { UseFocusTrap },
   emits: ['remove'],
 
@@ -115,7 +114,10 @@ export default DitoComponent.component('DitoDialog', {
       return {
         immediate: true,
         fallbackFocus: () => this.$refs.dialog,
-        onDeactivate: this.cancel
+        // Escape is handled in `onKeyDown()`, as only dialogs with a cancel
+        // button or without buttons can be cancelled. The trap is also
+        // deactivated on unmount, e.g. after submitting, so it can't cancel.
+        escapeDeactivates: false
       }
     },
 
@@ -140,16 +142,6 @@ export default DitoComponent.component('DitoDialog', {
     )
   },
 
-  mounted() {
-    this.domOn(window, {
-      keyup: event => {
-        if ((this.hasCancel || !this.hasButtons) && event.keyCode === 27) {
-          this.cancel()
-        }
-      }
-    })
-  },
-
   beforeUnmount() {
     // Stop the model before the component's own watchers are stopped, as the
     // model's watchers aren't part of the component, see `DataModel`.
@@ -200,6 +192,19 @@ export default DitoComponent.component('DitoDialog', {
       if (this.settings.clickToClose) {
         this.close()
       }
+    },
+
+    onKeyDown(event) {
+      // Escape keys that the dialog's components handled, e.g. to close their
+      // menus, don't cancel the dialog.
+      if (
+        event.key === 'Escape' &&
+        !event.defaultPrevented &&
+        (this.hasCancel || !this.hasButtons)
+      ) {
+        event.preventDefault()
+        this.cancel()
+      }
     }
   }
 })

package/src/components/DitoDragHandle.vue

@@ -0,0 +1,44 @@
+<template lang="pug">
+//- Firefox doesn't start dragging from a <button>, so the handle is an <a>,
+//- focusable through `tabindex` for the moves by keyboard.
+DitoButton(
+  as="a"
+  role="button"
+  :verb="verbs.drag"
+  :disabled="disabled"
+  :tabindex="disabled ? -1 : 0"
+  aria-keyshortcuts="Alt+ArrowUp Alt+ArrowDown"
+  @keydown.alt.up.prevent="move(-1)"
+  @keydown.alt.down.prevent="move(1)"
+)
+</template>
+
+<script>
+import { DitoButton } from '@ditojs/ui/src'
+import DitoComponent from '../DitoComponent.js'
+
+// The handle that items are dragged by, see `SortableMixin`. With the keyboard,
+// Alt+ArrowUp and Alt+ArrowDown move the item by emitting `move` with the
+// delta of its index, which the owner of the list applies.
+// @vue/component
+export default DitoComponent.component('DitoDragHandle', {
+  components: { DitoButton },
+  emits: ['move'],
+
+  props: {
+    disabled: { type: Boolean, default: false }
+  },
+
+  methods: {
+    async move(delta) {
+      if (!this.disabled) {
+        this.$emit('move', delta)
+        // Moving the item can move the handle's element in the DOM, which
+        // loses its focus.
+        await this.$nextTick()
+        this.$el.focus()
+      }
+    }
+  }
+})
+</script>

package/src/components/DitoDraggable.vue

@@ -1,24 +1,21 @@
 <template lang="pug">
+//- The sortable is always rendered, also when not `draggable`, so that the
+//- children aren't remounted when `draggable` changes, see `watch`.
 UseSortable.dito-draggable(
-  v-if="draggable"
   :class="{ 'dito-draggable--dragging': isDragging }"
   :as="as"
   :modelValue="modelValue"
-  :options="{ ...options, onStart, onEnd }"
+  :options="sortableOptions"
   @update:modelValue="$emit('update:modelValue', $event)"
 )
   slot
-component(
-  v-else
-  :is="as"
-)
-  slot
 </template>
 
 <script>
 import DitoComponent from '../DitoComponent'
 import DomMixin from '../mixins/DomMixin.js'
 import { UseSortable } from '@vueuse/integrations/useSortable/component'
+import Sortable from 'sortablejs'
 
 // @vue/component
 export default DitoComponent.component('DitoDraggable', {
@@ -47,33 +44,63 @@ export default DitoComponent.component('DitoDraggable', {
 
   data() {
     return {
-      mouseEvents: null,
       isDragging: false
     }
   },
 
+  watch: {
+    draggable(draggable) {
+      this.getSortable()?.option('disabled', !draggable)
+    }
+  },
+
+  created() {
+    // `UseSortable` reads its options only once when it's mounted, so they're
+    // built once here. The handlers call the handlers of the current
+    // `options`, and `draggable` toggles the `disabled` option, see `watch`.
+    this.sortableOptions = {
+      ...this.options,
+      disabled: !this.draggable,
+      onStart: this.onStart,
+      onEnd: this.onEnd
+    }
+    // The document handlers that clear `isDragging`, see `onEnd()`:
+    this.dragEndHandlers = null
+  },
+
   methods: {
+    // Returns the `Sortable` instance that `UseSortable` created on the
+    // element.
+    getSortable() {
+      return this.$el instanceof HTMLElement ? Sortable.get(this.$el) : null
+    },
+
     onStart(event) {
       this.options.onStart?.(event)
       this.isDragging = true
-      this.mouseEvents?.remove()
+      this.removeDragEndHandlers()
     },
 
     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 = this.domOn(document, {
-        mousedown: this.onMouse,
-        mousemove: this.onMouse,
-        mouseleave: this.onMouse
+      this.removeDragEndHandlers()
+      this.dragEndHandlers = this.domOn(document, {
+        mousedown: this.onMouseAfterDragEnd,
+        mousemove: this.onMouseAfterDragEnd,
+        mouseleave: this.onMouseAfterDragEnd
       })
     },
 
-    onMouse() {
+    onMouseAfterDragEnd() {
       this.isDragging = false
-      this.mouseEvents?.remove()
-      this.mouseEvents = null
+      this.removeDragEndHandlers()
+    },
+
+    removeDragEndHandlers() {
+      this.dragEndHandlers?.remove()
+      this.dragEndHandlers = null
     }
   }
 })

package/src/components/DitoEditButtons.vue

@@ -1,25 +1,27 @@
 <template lang="pug">
 //- Set `@click.stop` to prevent click events from bubbling to dito-label.
-DitoButtons.dito-edit-buttons.dito-buttons--round(
+DitoButtons.dito-edit-buttons(
+  :class="{ 'dito-buttons--round': round }"
   :buttons="buttons"
   :dataPath="dataPath"
   :data="data"
   :meta="meta"
   :store="store"
   :nested="nested"
+  :disabled="disabled"
   @click.stop
 )
-  //- Firefox doesn't like <button> here, so use <a> instead:
-  a.dito-button(
+  DitoDragHandle(
     v-if="draggable"
-    :class="{ 'dito-button--disabled': isDraggableDisabled }"
-    v-bind="getButtonAttributes(verbs.drag)"
+    :disabled="isDraggableDisabled"
+    @move="delta => $emit('move', delta)"
   )
-  RouterLink.dito-button(
+  DitoButton(
     v-if="editable"
-    :class="{ 'dito-button--disabled': isEditableDisabled }"
-    :to="editPath ? { path: editPath } : {}"
-    v-bind="getButtonAttributes(verbs.edit)"
+    as="RouterLink"
+    :to="editRoute"
+    :verb="verbs.edit"
+    :disabled="isEditableDisabled"
   )
   DitoCreateButton(
     v-if="creatable"
@@ -35,28 +37,36 @@ DitoButtons.dito-edit-buttons.dito-buttons--round(
     :disabled="isCreatableDisabled"
     :insertIndex="insertIndex"
   )
-  button.dito-button(
+  DitoButton(
     v-if="deletable"
-    type="button"
+    :verb="verbs.delete"
     :disabled="isDeletableDisabled"
-    v-bind="getButtonAttributes(verbs.delete)"
     @click="$emit('delete')"
   )
 </template>
 
 <script>
 import DitoComponent from '../DitoComponent.js'
+import DitoDragHandle from './DitoDragHandle.vue'
 import ContextMixin from '../mixins/ContextMixin.js'
+import { DitoButton } from '@ditojs/ui/src'
 import { capitalize } from '@ditojs/utils'
 
 // @vue/component
 export default DitoComponent.component('DitoEditButtons', {
   mixins: [ContextMixin],
-  emits: ['delete'],
+  components: { DitoButton, DitoDragHandle },
+  emits: ['delete', 'move'],
 
   props: {
     buttons: { type: Object, default: null },
+    // The schema of the component that owns the buttons, e.g. the list or
+    // object source, or the select. The `draggable`, `editable`, `creatable`
+    // and `deletable` props are already resolved from it.
     schema: { type: Object, required: true },
+    // The form schema of the item that per-item buttons act on, which can
+    // disable the buttons for its items, see `hasFormOption()`.
+    formSchema: { type: Object, default: null },
     dataPath: { type: String, required: true },
     data: { type: [Object, Array], default: null },
     meta: { type: Object, required: true },
@@ -68,8 +78,13 @@ export default DitoComponent.component('DitoEditButtons', {
     creatable: { type: Boolean, default: false },
     deletable: { type: Boolean, default: false },
     editPath: { type: String, default: null },
+    // The query of the edit route, e.g. to keep the current one in trees.
+    editQuery: { type: Object, default: null },
     createPath: { type: String, default: null },
-    insertIndex: { type: Number, default: null }
+    insertIndex: { type: Number, default: null },
+    // Whether the buttons are round, as in lists and objects, or square and
+    // compact, as in the rows of trees.
+    round: { type: Boolean, default: true }
   },
 
   computed: {
@@ -77,19 +92,24 @@ export default DitoComponent.component('DitoEditButtons', {
       return this.getLabel(this.schema.form)
     },
 
+    editRoute() {
+      const { editPath, editQuery } = this
+      return editPath ? { path: editPath, query: editQuery ?? undefined } : {}
+    },
+
     isDraggableDisabled() {
-      return this.disabled || !this.hasSchemaOption('draggable')
+      return this.disabled || !this.hasFormOption('draggable')
     },
 
     isDeletableDisabled() {
-      return this.disabled || !this.hasSchemaOption('deletable')
+      return this.disabled || !this.hasFormOption('deletable')
     },
 
     isEditableDisabled() {
       return (
         this.disabled ||
         !this.editPath ||
-        !this.hasSchemaOption('editable')
+        !this.hasFormOption('editable')
       )
     },
 
@@ -97,7 +117,7 @@ export default DitoComponent.component('DitoEditButtons', {
       return (
         this.disabled ||
         !this.createPath ||
-        !this.hasSchemaOption('creatable')
+        !this.hasFormOption('creatable')
       )
     },
 
@@ -116,13 +136,17 @@ export default DitoComponent.component('DitoEditButtons', {
   },
 
   methods: {
-    hasSchemaOption(name) {
+    hasFormOption(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
-      })
+      // `formSchema[name]` to `false` or a callback returning `false`.
+      return (
+        !this.formSchema ||
+        this.getSchemaValue(name, {
+          schema: this.formSchema,
+          type: Boolean,
+          default: true
+        })
+      )
     }
   }
 })