@ditojs/admin 3.2.7 → 3.3.0

package/src/components/DitoOptionList.vue

@@ -0,0 +1,81 @@
+<template lang="pug">
+//- The list of the options of an options component that shows all of them at
+//- once, e.g. radio buttons and checkboxes. Grouped options, see
+//- `schema.groupBy`, are listed in a fieldset per group. The `option` slot
+//- renders each option, and receives `isFirstOption` so that the component can
+//- reference the input to focus, see `TypeMixin.getFocusElement()`.
+ul.dito-option-list(:class="layoutClass")
+  template(
+    v-if="isGrouped"
+  )
+    li.dito-option-list__group(
+      v-for="group in options"
+      :key="group.label"
+    )
+      fieldset.dito-option-list__fieldset
+        legend.dito-option-list__legend {{ group.label }}
+        ul.dito-option-list__options(:class="layoutClass")
+          li.dito-option-list__option(
+            v-for="option in group.options"
+          )
+            slot(
+              name="option"
+              :option="option"
+              :isFirstOption="option === firstOption"
+            )
+  template(
+    v-else
+  )
+    li.dito-option-list__option(
+      v-for="option in options"
+    )
+      slot(
+        name="option"
+        :option="option"
+        :isFirstOption="option === firstOption"
+      )
+</template>
+
+<script>
+import DitoComponent from '../DitoComponent.js'
+
+// @vue/component
+export default DitoComponent.component('DitoOptionList', {
+  props: {
+    // The options, or with `isGrouped` their groups, each with `label` and
+    // `options`, see `OptionsMixin.groupOptions()`.
+    options: { type: Array, required: true },
+    isGrouped: { type: Boolean, default: false },
+    layout: { type: String, default: null }
+  },
+
+  computed: {
+    layoutClass() {
+      return `dito-layout--${this.layout || 'vertical'}`
+    },
+
+    firstOption() {
+      const [firstEntry] = this.options
+      return this.isGrouped ? firstEntry?.options[0] : firstEntry
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-option-list {
+  &__fieldset {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    min-width: 0;
+  }
+
+  &__legend {
+    padding: 0;
+    font-weight: bold;
+  }
+}
+</style>

package/src/components/DitoOptionsEditButtons.vue

@@ -0,0 +1,57 @@
+<template lang="pug">
+//- The edit button of an option of an editable options component, which
+//- navigates to the form of the option in the view of `schema.view`. It's never
+//- disabled, even if the component is disabled. The props come from the
+//- options component, which renders it only when it's editable.
+DitoEditButtons.dito-options-edit-buttons(
+  :schema="schema"
+  :dataPath="dataPath"
+  :data="data"
+  :meta="meta"
+  :store="store"
+  :disabled="false"
+  editable
+  :editPath="editPath"
+)
+</template>
+
+<script>
+import DitoComponent from '../DitoComponent.js'
+import DitoEditButtons from './DitoEditButtons.vue'
+import { getViewEditPath } from '../utils/schema/lookup.js'
+
+// @vue/component
+export default DitoComponent.component('DitoOptionsEditButtons', {
+  components: { DitoEditButtons },
+
+  props: {
+    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 },
+    // The context of the options component, to resolve `schema.view`. Not
+    // named `context`, which is the component's own context, see DitoMixin.
+    parentContext: { type: Object, required: true },
+    // The value of the option to edit, e.g. its id.
+    optionValue: { type: null, default: null }
+  },
+
+  computed: {
+    editPath() {
+      const { schema, optionValue, parentContext } = this
+      return optionValue != null
+        ? getViewEditPath(schema, optionValue, parentContext)
+        : null
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-options-edit-buttons {
+  margin-left: $form-spacing-half;
+}
+</style>

package/src/components/DitoPagination.vue

@@ -27,14 +27,7 @@ export default DitoComponent.component('DitoPagination', {
       },
 
       set(page) {
-        if (this.page !== page) {
-          this.$router.push(
-            this.getQueryLink({
-              ...this.query,
-              page: page - 1
-            })
-          )
-        }
+        this.sourceComponent.listQuery.update({ page: page - 1 })
       }
     }
   }

package/src/components/DitoPane.vue

@@ -23,7 +23,7 @@
       v-if="['before', 'both'].includes(schema.break)"
     )
     DitoContainer(
-      v-if="shouldRenderComponent(schema, nested, dataPath)"
+      v-if="shouldRenderComponentByIndex[index]"
       ref="containers"
       :key="nestedDataPath"
       :data-index="index"
@@ -38,7 +38,6 @@
       :compact="compact"
       :generateLabels="generateLabels"
       :verticalLabels="isInLabeledRow(index)"
-      :accumulatedBasis="accumulatedBasis"
     )
     span.dito-pane__break(
       v-if="['after', 'both'].includes(schema.break)"
@@ -50,7 +49,8 @@ import DitoComponent from '../DitoComponent.js'
 import DitoContext from '../DitoContext.js'
 import ContextMixin from '../mixins/ContextMixin.js'
 import { appendDataPath } from '../utils/data.js'
-import { isNested } from '../utils/schema/structure.js'
+import { trackRegistration } from '../utils/registration.js'
+import { hasLabel, isNested } from '../utils/schema/structure.js'
 import { shouldRenderSchema } from '../utils/schema/data.js'
 
 // @vue/component
@@ -74,8 +74,7 @@ export default DitoComponent.component('DitoPane', {
     padding: { type: String, default: null },
     disabled: { type: Boolean, default: false },
     compact: { type: Boolean, default: false },
-    generateLabels: { type: Boolean, default: false },
-    accumulatedBasis: { type: Number, default: null }
+    generateLabels: { type: Boolean, default: false }
   },
 
   data() {
@@ -102,6 +101,19 @@ export default DitoComponent.component('DitoPane', {
       return this.tab ? this : this.$tabComponent()
     },
 
+    // Describes the tab of tab panes with data for the entries of the panels
+    // of their components, see `getAllPanelEntries()`. Panes in tabs that
+    // aren't tab panes themselves are reached through `tabComponent`.
+    panelTab() {
+      const { tab, schemaComponent } = this
+      return tab
+        ? {
+            tabName: tab,
+            isTabSelected: () => schemaComponent.isTabSelected(tab)
+          }
+        : null
+    },
+
     componentPath() {
       // Tabs add their name, as they don't appear in data paths.
       const { componentPath } = this.parentComponent
@@ -145,7 +157,10 @@ export default DitoComponent.component('DitoPane', {
             dataPath,
             nestedDataPath,
             nested,
-            store: this.getChildStore(name)
+            store: this.getChildStore(name),
+            // The same as `DitoContainer.hasLabel`, also for type components
+            // that render their own label, e.g. sections.
+            hasLabel: hasLabel(schema, this.generateLabels)
           }
         }
       )
@@ -155,8 +170,22 @@ export default DitoComponent.component('DitoPane', {
       return this.single && this.componentSchemas.length === 1
     },
 
+    shouldRenderComponentByIndex() {
+      return this.componentSchemas.map(({ schema, nested, dataPath }) =>
+        this.shouldRenderComponent(schema, nested, dataPath)
+      )
+    },
+
+    renderedPositions() {
+      // Ignore the positions of containers that aren't rendered anymore, as
+      // their removal doesn't necessarily resize the pane, see `onResizePane()`
+      return this.positions.map((position, index) =>
+        this.shouldRenderComponentByIndex[index] ? position : null
+      )
+    },
+
     verticalLabelsByIndices() {
-      const { positions } = this
+      const positions = this.renderedPositions
 
       const isLastInRow = index => (
         positions[index] && (
@@ -190,17 +219,14 @@ export default DitoComponent.component('DitoPane', {
       for (const row of rows) {
         let hasLabelsInRow = false
         for (const index of row) {
-          const position = this.positions[index]
+          // Labels in compact schemas are displayed next to their components,
+          // so only count labels of containers that are higher than one line.
+          // TODO: Handle nested schemas, e.g. 'section' or 'object' and
+          // detect labels there too.
           if (
-            position?.height > 2 && (
-              position.node.matches(':has(> .dito-label)') ||
-              position.node
-                .closest('.dito-container')
-                .matches('.dito-container--label-vertical')
-            )
+            positions[index]?.height > 2 &&
+            this.componentSchemas[index].hasLabel
           ) {
-            // TODO: Handle nested schemas, e.g. 'section' or 'object' and
-            // detect labels there too.
             hasLabelsInRow = true
             break
           }
@@ -217,21 +243,17 @@ export default DitoComponent.component('DitoPane', {
   watch: {
     'componentSchemas.length'(length) {
       this.positions.length = length
-    },
-
-    'componentPath'(componentPath, oldComponentPath) {
-      // Component paths change when list items move, see `_registerEntry()`.
-      this._register(false, oldComponentPath)
-      this._register(true, componentPath)
     }
   },
 
   created() {
-    this._register(true)
+    this._unregister = trackRegistration(this, (add, componentPath) =>
+      this.schemaComponent._registerPane(this, add, componentPath)
+    )
   },
 
   unmounted() {
-    this._register(false)
+    this._unregister()
   },
 
   methods: {
@@ -251,10 +273,6 @@ export default DitoComponent.component('DitoPane', {
       )
     },
 
-    _register(add, componentPath = this.componentPath) {
-      this.schemaComponent._registerPane(this, add, componentPath)
-    },
-
     focus() {
       if (this.tab) {
         return this.$router.push({ hash: `#${this.tab}` })
@@ -278,8 +296,7 @@ export default DitoComponent.component('DitoPane', {
               ? null
               : {
                   top: bounds.y,
-                  height: height / fontSize,
-                  node
+                  height: height / fontSize
                 }
         }
       })
@@ -335,8 +352,10 @@ export default DitoComponent.component('DitoPane', {
       margin-top: -$form-spacing-half;
     }
 
-    // Display a ruler between tabbed components and towards the .dito-buttons
-    &__tab + &__main {
+    // Display a ruler between the tabbed components and the main components.
+    // `dito-pane__tab` and `dito-pane__main` are set on the panes themselves,
+    // see `DitoSchema`:
+    &#{$self}__tab + #{$self}__main {
       &::before {
         // Use a pseudo element to display a ruler with proper margins
         display: block;
@@ -348,13 +367,6 @@ export default DitoComponent.component('DitoPane', {
         padding: $form-spacing-half;
       }
     }
-
-    // TODO: BEM: Style an element class of this block, e.g. `&__buttons`.
-    &__main + .dito-buttons--main {
-      // Needed forms with sticky main buttons.
-      margin: $content-padding;
-      margin-bottom: 0;
-    }
   }
 
   &--padding-inlined {

package/src/components/DitoPanel.vue

@@ -2,7 +2,7 @@
 //- Only show panels in tabs when the tabs are also visible.
 component.dito-panel(
   v-if="shouldRenderSchema(panelSchema)"
-  v-show="visible && (!panelTabComponent || panelTabComponent.visible)"
+  v-show="visible && (!isTabSelected || isTabSelected())"
   :is="panelTag"
   role="region"
   :aria-label="getLabel(schema)"
@@ -51,6 +51,7 @@ import ContextMixin from '../mixins/ContextMixin.js'
 import ValidatorMixin from '../mixins/ValidatorMixin.js'
 import { getButtonSchemas } from '../utils/schema/lookup.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
+import { trackRegistration } from '../utils/registration.js'
 
 // @vue/component
 export default DitoComponent.component('DitoPanel', {
@@ -58,8 +59,7 @@ export default DitoComponent.component('DitoPanel', {
 
   provide() {
     return {
-      $panelComponent: () => this,
-      $tabComponent: () => this.panelTabComponent
+      $panelComponent: () => this
     }
   },
 
@@ -70,7 +70,9 @@ export default DitoComponent.component('DitoPanel', {
     meta: { type: Object, required: true },
     store: { type: Object, required: true },
     disabled: { type: Boolean, required: true },
-    panelTabComponent: { type: Object, default: null },
+    // Tells if the tab of the panel's component is selected, for panels of
+    // components in tabs, see `getAllPanelEntries()`:
+    isTabSelected: { type: Function, default: null },
     // The component path of the panel's entry, see `getAllPanelEntries()`:
     panelComponentPath: { type: String, required: true }
   },
@@ -108,10 +110,6 @@ export default DitoComponent.component('DitoPanel', {
       return this.panelComponentPath
     },
 
-    tabComponent() {
-      return this.panelTabComponent
-    },
-
     buttonSchemas() {
       return getButtonSchemas(this.schema.buttons)
     },
@@ -166,16 +164,12 @@ export default DitoComponent.component('DitoPanel', {
     })
   },
 
-  watch: {
-    componentPath(componentPath, oldComponentPath) {
-      // Component paths change when list items move, see `_registerEntry()`.
-      this._register(false, oldComponentPath)
-      this._register(true, componentPath)
-    }
-  },
-
   created() {
-    this._register(true)
+    // Register the panels so that other components can find them by their
+    // data-path, e.g. in TypeList.onFilterErrors()
+    this._unregister = trackRegistration(this, (add, componentPath) =>
+      this.schemaComponent._registerPanel(this, add, componentPath)
+    )
     // NOTE: This is not the same as `schema.data` handling in DitoSchema,
     // where the data is added to the actual component.
     const { data } = this.schema
@@ -187,15 +181,7 @@ export default DitoComponent.component('DitoPanel', {
   },
 
   unmounted() {
-    this._register(false)
-  },
-
-  methods: {
-    _register(add, componentPath = this.componentPath) {
-      // Register the panels so that other components can find them by their
-      // data-path, e.g. in TypeList.onFilterErrors()
-      this.schemaComponent._registerPanel(this, add, componentPath)
-    }
+    this._unregister()
   }
 })
 </script>

package/src/components/DitoPanels.vue

@@ -3,11 +3,17 @@
   v-if="panels.length > 0"
 )
   template(
-    v-for="{ schema, dataPath, componentPath, tabComponent } in panels"
+    v-for=`{
+      schema,
+      dataPath,
+      componentPath,
+      tabName,
+      isTabSelected
+    } in panels`
   )
     DitoPanel(
       v-if="shouldRenderSchema(schema)"
-      :key="getPanelKey(dataPath, tabComponent)"
+      :key="getPanelKey(dataPath, tabName)"
       :schema="schema"
       :dataPath="dataPath"
       :panelComponentPath="componentPath"
@@ -15,7 +21,7 @@
       :meta="meta"
       :store="getChildStore(schema.name)"
       :disabled="schema.disabled ?? disabled"
-      :panelTabComponent="tabComponent"
+      :isTabSelected="isTabSelected"
     )
 </template>
 
@@ -43,10 +49,10 @@ export default DitoComponent.component('DitoPanels', {
   },
 
   methods: {
-    getPanelKey(dataPath, tabComponent) {
+    getPanelKey(dataPath, tabName) {
       // Allow separate tabs to use panels of the same name, by
       // prefixing their key with the tab name.
-      return tabComponent ? `${tabComponent.tab}_${dataPath}` : dataPath
+      return tabName ? `${tabName}_${dataPath}` : dataPath
     }
   }
 })

package/src/components/DitoResizeHandle.vue

@@ -0,0 +1,47 @@
+<template lang="pug">
+//- The handle that resizes the height of an element, by dragging it with the
+//- pointer or with the arrow keys while it is focused, see `dragResize.js`.
+.dito-resize(
+  tabindex="0"
+  role="separator"
+  aria-orientation="horizontal"
+  aria-label="Resize"
+  @pointerdown.stop.prevent="onPointerDown"
+  @keydown="onKeyDown"
+)
+</template>
+
+<script>
+import DitoComponent from '../DitoComponent.js'
+import { startDragResize, resizeByArrowKey } from '../utils/dragResize.js'
+
+// Emits `resize` with each new height of the element in pixels, which the
+// owner of the element applies.
+// @vue/component
+export default DitoComponent.component('DitoResizeHandle', {
+  emits: ['resize'],
+
+  props: {
+    // Returns the element to resize, which is measured at the start of each
+    // resize.
+    getElement: { type: Function, required: true }
+  },
+
+  methods: {
+    onPointerDown(event) {
+      startDragResize(event, this.getResizeOptions())
+    },
+
+    onKeyDown(event) {
+      resizeByArrowKey(event, this.getResizeOptions())
+    },
+
+    getResizeOptions() {
+      return {
+        element: this.getElement(),
+        onResize: height => this.$emit('resize', height)
+      }
+    }
+  }
+})
+</script>