@ditojs/admin 3.2.7 → 3.3.1

package/src/types/DitoTypeSection.vue

@@ -12,7 +12,6 @@
     :disabled="disabled"
     :collapsed="collapsed"
     :collapsible="collapsible"
-    :labelNode="labelNode"
   )
 </template>
 
@@ -23,7 +22,7 @@ import SchemaParentMixin from '../mixins/SchemaParentMixin.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
 import { setupSchemaComponents } from '../utils/schema/setup.js'
 import { getItemFormSchema } from '../utils/schema/lookup.js'
-import { hasComponentNamed } from '../utils/schema/structure.js'
+import { hasComponentNamed, isCompact } from '../utils/schema/structure.js'
 
 // @vue/component
 export default DitoTypeComponent.register('section', {
@@ -39,6 +38,17 @@ export default DitoTypeComponent.register('section', {
   treatNullAsMissing: ({ schema }) => !!schema.nested,
   defaultNested: false,
   generateLabel: false,
+  // The header of the section's form displays the label, except in compact
+  // forms, which don't have labels in their header, see `DitoSchemaInlined`.
+  // The form can depend on the item, see `item`.
+  rendersOwnLabel: context =>
+    !isCompact(
+      getItemFormSchema(
+        context.schema,
+        context.nested ? context.value : context.item,
+        context
+      )
+    ),
 
   computed: {
     item() {
@@ -94,14 +104,18 @@ export default DitoTypeComponent.register('section', {
 @import '../styles/_imports';
 
 .dito-section {
-  &--labelled {
-    border: $border-width solid transparent;
-    border-radius: $border-radius;
-    transition: border-color 0.2s $ease-out-quart;
-    margin-top: $form-spacing-half;
+  &--labelled > &__schema {
+    // Display the header with the label above the bordered content.
+    > .dito-schema-content {
+      border: $border-style;
+      border-radius: $border-radius;
+      margin-top: $form-spacing-half;
+    }
 
-    &:has(.dito-schema--open) {
-      border-color: $border-color;
+    > .dito-schema-header + .dito-schema-content > .dito-pane {
+      // Inside the border, the content's margin replaces the spacing below the
+      // header, see `DitoSchema`.
+      margin-top: -$form-spacing-half;
     }
   }
 }

package/src/types/DitoTypeSelect.vue

@@ -2,13 +2,10 @@
 //- Nesting is needed to make an arrow appear over the select item:
 .dito-select
   .dito-select__inner
-    DitoAffixes(
-      :items="schema.prefix"
+    DitoInputAffixes(
       position="prefix"
-      mode="input"
+      v-bind="inputAffixesProps.prefix"
       absolute
-      :disabled="disabled"
-      :parentContext="context"
     )
     select(
       :id="componentPath"
@@ -21,6 +18,13 @@
       template(
         v-if="populate"
       )
+        //- Plain values whose option disappeared are kept and shown as
+        //- unavailable, rather than cleared without the user noticing:
+        option(
+          v-if="shouldShowUnavailableValue"
+          :value="selectedValue"
+          disabled
+        ) {{ getLabelForOption(selectedValue) }} (unavailable)
         template(
           v-for="option in options"
         )
@@ -40,40 +44,35 @@
         v-else-if="selectedOption"
       )
         option(:value="selectedValue") {{ getLabelForOption(selectedOption) }}
-    DitoAffixes(
-      :items="schema.suffix"
+    DitoInputAffixes(
       position="suffix"
-      mode="input"
+      v-bind="inputAffixesProps.suffix"
       absolute
-      :clearable="showClearButton"
-      :disabled="disabled"
-      :inlineInfo="inlineInfo"
-      :parentContext="context"
       @clear="clear"
     )
-  //- Edit button is never disabled, even if the field is disabled.
-  DitoEditButtons(
+  DitoOptionsEditButtons(
     v-if="editable"
     :schema="schema"
     :dataPath="dataPath"
     :data="data"
     :meta="meta"
     :store="store"
-    :disabled="false"
-    :editable="editable"
-    :editPath="editPath"
+    :parentContext="context"
+    :optionValue="selectedValue"
   )
 </template>
 
 <script>
 import DitoTypeComponent from '../DitoTypeComponent.js'
 import OptionsMixin from '../mixins/OptionsMixin.js'
-import DitoAffixes from '../components/DitoAffixes.vue'
+import DitoInputAffixes from '../components/DitoInputAffixes.vue'
+import { getInputAffixesProps } from '../utils/affixes.js'
+import DitoOptionsEditButtons from '../components/DitoOptionsEditButtons.vue'
 
 // @vue/component
 export default DitoTypeComponent.register('select', {
   mixins: [OptionsMixin],
-  components: { DitoAffixes },
+  components: { DitoInputAffixes, DitoOptionsEditButtons },
 
   nativeField: true,
 
@@ -83,6 +82,27 @@ export default DitoTypeComponent.register('select', {
       // TODO: Set to `false` Once lineto e2e tests address their issues.
       populate: true
     }
+  },
+
+  computed: {
+    inputAffixesProps() {
+      return getInputAffixesProps(this)
+    },
+
+    // Whether the value is set but none of the loaded options has it. Values
+    // of option objects are replaced with `null` when their option disappears,
+    // see `OptionsMixin`, but plain values match any value, so they stay.
+    // Object values without `optionValue` are left to the select, which
+    // matches them to their options by deep equality.
+    shouldShowUnavailableValue() {
+      const { selectedValue } = this
+      return (
+        selectedValue != null &&
+        typeof selectedValue !== 'object' &&
+        this.hasOptions &&
+        !this.findOptionForValue(selectedValue)
+      )
+    }
   }
 })
 </script>
@@ -119,10 +139,6 @@ export default DitoTypeComponent.register('select', {
     }
   }
 
-  .dito-edit-buttons {
-    margin-left: $form-spacing-half;
-  }
-
   // Handle width fill separately due to required nesting of select:
   &.dito-component--fill {
     select {

package/src/types/DitoTypeSlider.vue

@@ -10,11 +10,15 @@
     :max="max"
     :step="stepValue"
   )
+  //- The range input holds the name and the label of the field, the number
+  //- input gets a label of its own and no name, to not submit it twice:
   DitoInput.dito-number(
     v-if="input"
     v-model="inputValue"
     type="number"
     v-bind="attributes"
+    :name="null"
+    :aria-label="numberInputLabel"
     :min="min"
     :max="max"
     :step="stepValue"
@@ -38,7 +42,11 @@ export default DitoTypeComponent.register('slider', {
     input: getSchemaAccessor('input', {
       type: Boolean,
       default: true
-    })
+    }),
+
+    numberInputLabel() {
+      return `${this.label || this.labelize(this.name)} Value`
+    }
   }
 })
 </script>

package/src/types/DitoTypeSwitch.vue

@@ -33,7 +33,7 @@ export default DitoTypeComponent.register('switch', {
 @import '../styles/_imports';
 
 .dito-switch {
-  .dito-switch-label {
+  &__label {
     font-size: $font-size-small;
   }
 }

package/src/types/DitoTypeText.vue

@@ -7,22 +7,14 @@ DitoInput.dito-text(
   v-bind="attributes"
 )
   template(#prefix)
-    DitoAffixes(
-      :items="schema.prefix"
+    DitoInputAffixes(
       position="prefix"
-      mode="input"
-      :disabled="disabled"
-      :parentContext="context"
+      v-bind="inputAffixesProps.prefix"
     )
   template(#suffix)
-    DitoAffixes(
-      :items="schema.suffix"
+    DitoInputAffixes(
       position="suffix"
-      mode="input"
-      :clearable="showClearButton"
-      :disabled="disabled"
-      :inlineInfo="inlineInfo"
-      :parentContext="context"
+      v-bind="inputAffixesProps.suffix"
       @clear="clear"
     )
 </template>
@@ -30,7 +22,8 @@ DitoInput.dito-text(
 <script>
 import DitoTypeComponent from '../DitoTypeComponent.js'
 import TextMixin from '../mixins/TextMixin'
-import DitoAffixes from '../components/DitoAffixes.vue'
+import DitoInputAffixes from '../components/DitoInputAffixes.vue'
+import { getInputAffixesProps } from '../utils/affixes.js'
 import { DitoInput } from '@ditojs/ui/src'
 
 const maskedPassword = '****************'
@@ -49,7 +42,7 @@ export default DitoTypeComponent.register(
   // @vue/component
   {
     mixins: [TextMixin],
-    components: { DitoInput, DitoAffixes },
+    components: { DitoInput, DitoInputAffixes },
     nativeField: true,
     textField: true,
     ignoreMissingValue: ({ schema }) => schema.type === 'password',
@@ -67,6 +60,10 @@ export default DitoTypeComponent.register(
     },
 
     computed: {
+      inputAffixesProps() {
+        return getInputAffixesProps(this)
+      },
+
       inputType() {
         return (
           {

package/src/types/DitoTypeTreeList.vue

@@ -14,7 +14,7 @@
       :data="treeData"
       :draggable="draggable"
       :open="true"
-      @update:data="data => (value = data)"
+      @change-children="changeChildren"
     )
     .dito-tree-form-container(
       v-if="editPath && hasEditableForms"
@@ -28,7 +28,9 @@ import DitoTypeComponent from '../DitoTypeComponent.js'
 import SourceMixin from '../mixins/SourceMixin.js'
 import { resolveSchemaComponents } from '../utils/schema/setup.js'
 import { hasFormSchema, getFormSchemas } from '../utils/schema/lookup.js'
+import { updateOrder } from '../utils/schema/data.js'
 import { getParentDataPath } from '../utils/data.js'
+import { isPathWithin } from '../utils/route.js'
 
 export default DitoTypeComponent.register(
   ['tree-list', 'tree-object'],
@@ -36,24 +38,20 @@ export default DitoTypeComponent.register(
   {
     mixins: [SourceMixin],
 
-    provide() {
-      return { container: this }
-    },
-
     getSourceType(type) {
       return type === 'tree-object' ? 'object' : 'list'
     },
 
     computed: {
       path() {
-        // Accessed from DitoTreeItem through `container.path`:
+        // Accessed from DitoTreeItem through `sourceComponent.path`:
         return this.formComponent?.path
       },
 
       editPath() {
-        // Accessed from DitoTreeItem through `container.editPath`:
+        // Accessed from DitoTreeItem through `sourceComponent.editPath`:
         const path = this.$route.path.slice(this.path?.length)
-        return path.startsWith(`/${this.schema.path}`) ? path : ''
+        return isPathWithin(path, `/${this.schema.path}`) ? path : ''
       },
 
       treeData() {
@@ -100,6 +98,46 @@ export default DitoTypeComponent.register(
       }
     },
 
+    methods: {
+      // Replaces the children of the tree item that holds them in `data`, as
+      // the only writer of the tree, see `DitoTreeItem.changeChildren()`.
+      changeChildren({ data, childrenSchema, path, children }) {
+        const previousChildren = data[childrenSchema.name]
+        updateOrder(childrenSchema, children)
+        if (data === this.treeData && this.isListSource) {
+          // The root item of tree lists holds the list in a wrapper object,
+          // see `treeData`.
+          this.value = children
+        } else {
+          data[childrenSchema.name] = children
+        }
+        this.followEditedChild({
+          childrenPath: childrenSchema.path && `${path}/${childrenSchema.path}`,
+          previousChildren,
+          children
+        })
+        this.onChange()
+      },
+
+      // Keeps the form of an edited child or of one of its descendants open
+      // at the child's new index, or closes it if the child was removed.
+      followEditedChild({ childrenPath, previousChildren, children }) {
+        const prefix = `${childrenPath}/`
+        const { editPath } = this
+        if (childrenPath && editPath.startsWith(prefix)) {
+          const [index, ...rest] = editPath.slice(prefix.length).split('/')
+          const newIndex = children.indexOf(previousChildren?.[index])
+          if (newIndex !== +index) {
+            const path =
+              newIndex >= 0
+                ? [`${this.path}${prefix}${newIndex}`, ...rest].join('/')
+                : this.path
+            this.$router.push({ path, query: this.$route.query })
+          }
+        }
+      }
+    },
+
     async processSchema(
       api,
       schema,