@ditojs/admin 2.7.4 → 2.8.0

package/src/components/DitoPane.vue

@@ -2,7 +2,6 @@
 <template lang="pug">
 .dito-pane(
   v-if="isPopulated && componentSchemas.length > 0"
-  v-show="visible"
   :class=`{
     'dito-pane--single': isSingleComponent
   }`
@@ -16,7 +15,9 @@
       store
     }, index in componentSchemas`
   )
-    .dito-break(
+    // -Use <span> for .dito-break so we can use `.dito-container:first-of-type`
+    // selector.
+    span.dito-break(
       v-if="schema.break === 'before'"
     )
     DitoContainer(
@@ -35,7 +36,7 @@
       :verticalLabels="isInLabeledRow(index)"
       :accumulatedBasis="accumulatedBasis"
     )
-    .dito-break(
+    span.dito-break(
       v-if="schema.break === 'after'"
     )
 </template>
@@ -61,7 +62,6 @@ export default DitoComponent.component('DitoPane', {
     store: { type: Object, required: true },
     tab: { type: String, default: null },
     single: { type: Boolean, default: false },
-    visible: { type: Boolean, default: true },
     disabled: { type: Boolean, default: false },
     generateLabels: { type: Boolean, default: false },
     accumulatedBasis: { type: Number, default: null }
@@ -102,7 +102,7 @@ export default DitoComponent.component('DitoPane', {
                 : this.dataPath,
             nestedDataPath,
             nested,
-            store: nested ? this.getChildStore(name) : this.store
+            store: this.getChildStore(name)
           }
         }
       )
@@ -149,8 +149,12 @@ export default DitoComponent.component('DitoPane', {
         for (const index of row) {
           const position = this.positions[index]
           if (
-            position?.height > 3 &&
-            position.node.querySelector(':scope > .dito-label')
+            position?.height > 2 && (
+              position.node.matches(':has(> .dito-label)') ||
+              position.node
+                .closest('.dito-container')
+                .matches('.dito-container--label-vertical')
+            )
           ) {
             // TODO: Handle nested schemas, e.g. 'section' or 'object' and
             // detect labels there too.
@@ -221,51 +225,55 @@ export default DitoComponent.component('DitoPane', {
   flex-flow: row wrap;
   align-items: flex-start;
   align-content: flex-start;
-  padding: $content-padding;
   // Remove the padding added by `.dito-container` inside `.dito-pane`:
-  margin: (-$form-spacing) (-$form-spacing-half);
-  max-width: calc(var(--max-content-width) + $form-spacing);
-  // Use `flex: 0%` for all `.dito-pane` except `.dito-pane-main`,
+  margin: -$form-spacing-half;
+  // Use `flex: 0%` for all `.dito-pane` except `.dito-pane__main`,
   // so that the `.dito-buttons-main` can be moved all the way to the bottom.
   flex: 0%;
 
-  &--single {
-    // Clear negative margin from above.
-    margin: 0;
+  &__main {
+    flex: 100%;
   }
 
   .dito-scroll > & {
-    &,
-    .dito-container {
-      min-width: min-content;
-    }
+    // A root-level pane inside a scroll view. Clear negative margin from above.
+    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;
 
-    &:not(#{$self}--single) {
-      // Root-level panes inside scroll views need to move the negative margin
-      // used to remove the padding added by `.dito-container` inside
-      // `.dito-pane` to the padding:
-      padding: ($content-padding - $form-spacing)
-        ($content-padding - $form-spacing-half);
-      margin: 0;
+    &#{$self}--single {
+      padding: $content-padding;
     }
-  }
 
-  &.dito-pane-main {
-    flex: 100%;
+    &:has(> .dito-container--label-vertical:first-of-type) {
+      // Reduce top spacing when the first row has labels.
+      margin-top: -$form-spacing-half;
+    }
   }
 
-  .dito-schema-header + & {
-    // Clear top-margin if the components are preceded by a schema header.
-    margin-top: 0;
+  // Display a ruler between tabbed components and towards the .dito-buttons
+  &__tab + &__main {
+    &::before {
+      // Use a pseudo element to display a ruler with proper margins
+      display: block;
+      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;
+    }
   }
 
-  .dito-container--omit-padding > & {
-    // Clear margins set above again if parent is omitting padding.
-    margin: 0;
-    max-width: unset;
+  &__main + .dito-buttons-main {
+    // Needed forms with sticky main buttons.
+    margin: $content-padding;
+    margin-bottom: 0;
   }
 
   .dito-break {
+    display: block;
     flex: 100%;
     height: 0;
   }

package/src/components/DitoRoot.vue

@@ -37,8 +37,6 @@
     )
       span Login
   .dito-fill
-    .dito-header
-      span
 </template>
 
 <script>
@@ -478,6 +476,7 @@ function addRoutes(router, routes) {
   flex: 0 1 var(--max-page-width);
   background: $content-color-background;
   max-width: var(--max-page-width);
+  overflow: visible; // For .dito-header full-width background.
   // For the `@container` rule in `.dito-container` to work:
   container-type: inline-size;
 

package/src/components/DitoSchema.vue

@@ -1,6 +1,7 @@
 <template lang="pug">
 slot(name="before")
 .dito-schema(
+  :class="{ 'dito-scroll-parent': scrollable, 'dito-schema--open': opened }"
   v-bind="$attrs"
 )
   Teleport(
@@ -14,64 +15,62 @@ slot(name="before")
       :store="store"
       :disabled="disabled"
     )
-  .dito-schema-content(
-    ref="content"
-    :class="{ 'dito-scroll': scrollable }"
+  Teleport(
+    v-if="hasHeader"
+    :to="headerTeleport"
+    :disabled="!headerTeleport"
   )
-    Teleport(
-      v-if="hasLabel || hasTabs || clipboard"
-      to=".dito-header__teleport"
-      :disabled="!headerInMenu"
-    )
-      .dito-schema-header(
-        :class="{ 'dito-schema-header--menu': headerInMenu }"
+    .dito-schema-header
+      DitoLabel(
+        v-if="hasLabel"
+        :label="label"
+        :dataPath="dataPath"
+        :collapsible="collapsible"
+        :collapsed="!opened"
+        @open="onOpen"
+      )
+      Transition(
+        v-if="tabs"
+        name="dito-fade"
       )
-        DitoLabel(
-          v-if="hasLabel"
-          :label="label"
-          :dataPath="dataPath"
-          :collapsible="collapsible"
-          :collapsed="!opened"
-          @expand="onExpand"
-        )
-          //- Pass edit-buttons through to dito-label's own edit-buttons slot:
-          template(
-            v-if="inlined"
-            #edit-buttons
-          )
-            slot(name="edit-buttons")
         DitoTabs(
-          v-if="tabs"
+          v-if="opened"
+          v-model="selectedTab"
           :tabs="tabs"
-          :selectedTab="selectedTab"
-        )
-        DitoClipboard(
-          :clipboard="clipboard"
-          :dataPath="dataPath"
-          :data="data"
         )
-    template(
-      v-if="hasTabs"
-    )
-      DitoPane.dito-pane-tab(
-        v-for="(tabSchema, tab) in tabs"
-        ref="tabs"
-        :key="tab"
-        :visible="selectedTab === tab"
-        :tab="tab"
-        :schema="tabSchema"
+      DitoClipboard(
+        :clipboard="clipboard"
         :dataPath="dataPath"
         :data="data"
-        :meta="meta"
-        :store="store"
-        :single="!inlined && !hasMainPane"
-        :disabled="disabled"
-        :generateLabels="generateLabels"
-        :accumulatedBasis="accumulatedBasis"
       )
-    TransitionHeight(:enabled="inlined")
-      DitoPane.dito-pane-main(
-        v-if="hasMainPane && opened"
+      slot(name="edit-buttons")
+  TransitionHeight(:enabled="inlined")
+    .dito-schema-content(
+      v-if="opened"
+      ref="content"
+      :class="{ 'dito-scroll': scrollable }"
+    )
+      template(
+        v-if="hasTabs"
+      )
+        DitoPane.dito-pane__tab(
+          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__main(
+        v-if="hasMainPane"
         ref="components"
         :schema="schema"
         :dataPath="dataPath"
@@ -83,17 +82,14 @@ slot(name="before")
         :generateLabels="generateLabels"
         :accumulatedBasis="accumulatedBasis"
       )
-    slot(
-      v-if="!inlined && isPopulated"
-      name="buttons"
-    )
-  template(
-    v-if="inlined"
+      slot(
+        v-if="!inlined && isPopulated"
+        name="buttons"
+      )
+  slot(
+    v-if="inlined && !hasHeader"
+    name="edit-buttons"
   )
-    slot(
-      v-if="!hasLabel"
-      name="edit-buttons"
-    )
 slot(name="after")
 </template>
 
@@ -103,6 +99,7 @@ import {
   isArray,
   isFunction,
   isRegExp,
+  equals,
   parseDataPath,
   normalizeDataPath,
   labelize
@@ -148,8 +145,8 @@ export default DitoComponent.component('DitoSchema', {
     collapsible: { type: Boolean, default: false },
     scrollable: { type: Boolean, default: false },
     hasOwnData: { type: Boolean, default: false },
-    headerInMenu: { type: Boolean, default: false },
     generateLabels: { type: Boolean, default: false },
+    labelNode: { type: HTMLElement, default: null },
     accumulatedBasis: { type: Number, default: 1 }
   },
 
@@ -190,25 +187,25 @@ export default DitoComponent.component('DitoSchema', {
       return getNamedSchemas(this.schema.tabs)
     },
 
-    selectedTab() {
-      return this.currentTab || this.defaultTab?.name || null
+    selectedTab: {
+      get() {
+        return this.currentTab || this.defaultTab || null
+      },
+
+      set(selectedTab) {
+        this.currentTab = selectedTab
+      }
     },
 
     defaultTab() {
       let first = null
       if (this.tabs) {
-        for (const tab of Object.values(this.tabs)) {
-          const { defaultTab } = tab
-          if (
-            isFunction(defaultTab)
-              ? defaultTab(this.context)
-              : defaultTab
-          ) {
-            return tab
-          }
-          if (!first) {
-            first = tab
+        const tabs = Object.values(this.tabs).filter(this.shouldRenderSchema)
+        for (const { name, defaultTab } of tabs) {
+          if (isFunction(defaultTab) ? defaultTab(this.context) : defaultTab) {
+            return name
           }
+          first ??= name
         }
       }
       return first
@@ -218,6 +215,16 @@ export default DitoComponent.component('DitoSchema', {
       return this.schema?.clipboard
     },
 
+    hasHeader() {
+      return this.hasLabel || this.hasTabs || !!this.clipboard
+    },
+
+    headerTeleport() {
+      return this.isRootSchema
+        ? '.dito-header__teleport'
+        : this.labelNode
+    },
+
     parentData() {
       const data = getParentItem(this.rootData, this.dataPath, false)
       return data !== this.data ? data : null
@@ -266,6 +273,11 @@ export default DitoComponent.component('DitoSchema', {
       )
     },
 
+    isRootSchema() {
+      // Section schemas can share the root dataPath but they are inlined.
+      return this.dataPath === '' && !this.inlined
+    },
+
     isDirty() {
       return this.someComponent(it => it.isDirty)
     },
@@ -295,7 +307,11 @@ export default DitoComponent.component('DitoSchema', {
     },
 
     hasTabs() {
-      return !this.inlined && !!this.tabs
+      return !!this.tabs
+    },
+
+    hasMainTabs() {
+      return this.hasTabs && this.isRootSchema
     },
 
     hasMainPane() {
@@ -348,27 +364,21 @@ export default DitoComponent.component('DitoSchema', {
         // Remember the current path to know if tab changes should still be
         // handled, but remove the trailing `/create` or `/:id` from it so that
         // tabs informs that stay open after creation still work.
-        if (this.hasTabs) {
+        if (this.hasMainTabs) {
           this.currentTab = hash?.slice(1) || null
-          if (this.hasErrors) {
-            this.repositionErrors()
-          }
         }
       }
     },
 
     'selectedTab'(selectedTab) {
-      if (this.hasTabs) {
-        let tab = null
-        if (selectedTab !== this.currentTab) {
-          // Any tab change needs to be reflected in the router also.
-          tab = selectedTab
-        } else if (!this.shouldRenderSchema(this.tabs[selectedTab])) {
-          tab = this.defaultTab?.name
-        }
-        if (tab) {
-          this.$router.replace({ hash: `#${tab}` })
-        }
+      if (this.hasMainTabs) {
+        const tab = this.shouldRenderSchema(this.tabs[selectedTab])
+          ? selectedTab
+          : this.defaultTab
+        this.$router.replace({ hash: tab ? `#${tab}` : null })
+      }
+      if (this.hasErrors) {
+        this.repositionErrors()
       }
     }
   },
@@ -441,11 +451,8 @@ export default DitoComponent.component('DitoSchema', {
       return this.isPopulated && this.components.every(callback)
     },
 
-    onExpand(expand) {
-      this.emitEvent('expand', {
-        // TODO: Actually expose this on DitoContext?
-        context: { expand }
-      })
+    onOpen(open) {
+      this.emitEvent('open', { context: { open } })
       // Prevent closing the schema with invalid data, since the in-component
       // validation will not be executed once it's closed.
 
@@ -453,8 +460,8 @@ export default DitoComponent.component('DitoSchema', {
       // processing, and use `showValidationErrors()` for the resulting errors,
       // then remove this requirement, since we can validate closed forms and
       // schemas then.
-      if (!this.opened || expand || this.validateAll()) {
-        this.opened = expand
+      if (!this.opened || open || this.validateAll()) {
+        this.opened = open
       }
     },
 
@@ -630,9 +637,12 @@ export default DitoComponent.component('DitoSchema', {
       for (const name in data) {
         if (name in this.data) {
           // eslint-disable-next-line vue/no-mutating-props
-          this.data[name] = data[name]
-          for (const component of this.getComponentsByName(name)) {
-            component.markDirty()
+          if (!equals(this.data[name], data[name])) {
+            // eslint-disable-next-line vue/no-mutating-props
+            this.data[name] = data[name]
+            for (const component of this.getComponentsByName(name)) {
+              component.markDirty()
+            }
           }
         }
       }
@@ -733,10 +743,22 @@ export default DitoComponent.component('DitoSchema', {
 
 .dito-schema {
   box-sizing: border-box;
-  // To display edit buttons next to schema:
-  display: flex;
-  align-items: stretch;
-  min-height: 100%;
+
+  > .dito-schema-header + .dito-schema-content > .dito-pane {
+    margin-top: $form-spacing-half;
+  }
+
+  &:has(> .dito-schema-content + .dito-edit-buttons) {
+    // Display the edit buttons to the right of the schema:
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+
+    > .dito-edit-buttons {
+      flex: 1 0 0%;
+      margin-left: $form-spacing;
+    }
+  }
 
   > .dito-schema-content {
     flex: 0 1 100%;
@@ -751,37 +773,6 @@ export default DitoComponent.component('DitoSchema', {
     > *:only-child {
       grid-row-end: none;
     }
-
-    &.dito-scroll:has(.dito-pane:last-child)::after {
-      // Eat up negative margin of the last child to prevent overscroll.
-      content: '';
-    }
-  }
-
-  > .dito-buttons {
-    flex: 1 1 0%;
-  }
-
-  > .dito-buttons {
-    margin-left: $form-spacing;
-  }
-
-  // Display a ruler between tabbed components and towards the .dito-buttons
-  .dito-pane-tab + .dito-pane-main {
-    &::before {
-      // Use a pseudo element to display a ruler with proper margins
-      display: block;
-      content: '';
-      width: 100%;
-      border-bottom: $border-style;
-      // Add removed $form-spacing again to the ruler
-      margin: $content-padding $form-spacing-half $form-spacing-half;
-    }
-  }
-
-  .dito-pane-main + .dito-buttons-main {
-    // Needed forms with sticky main buttons.
-    margin-bottom: 0;
   }
 }
 
@@ -789,41 +780,22 @@ export default DitoComponent.component('DitoSchema', {
   display: flex;
   justify-content: space-between;
 
-  .dito-tabs,
-  .dito-clipboard {
-    display: flex;
-    align-self: flex-end;
+  .dito-header & {
+    // When teleported into main header.
+    align-items: flex-end;
   }
 
-  .dito-clipboard {
-    &:only-child {
-      margin-left: auto;
-    }
+  .dito-label & {
+    // When teleported into container label.
+    flex: 1;
+  }
 
-    .dito-button {
-      margin: 0 0 $tab-margin $tab-margin;
-    }
+  > .dito-label {
+    margin-bottom: 0;
   }
 
-  &--menu {
-    // Align the tabs on top of to the header menu.
-    position: absolute;
-    height: $header-height;
-    padding: 0 $header-padding-hor;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: $z-index-header;
-    // Turn off pointer events so that DitoTrail keeps receiving events...
-    pointer-events: none;
-    // ...but allow interaction with the tabs and buttons (e.g. clipboard)
-    // layered on top of DitoTrail.
-    .dito-tabs,
-    .dito-buttons {
-      pointer-events: auto;
-      line-height: $header-line-height;
-      font-size: $header-font-size;
-    }
+  > .dito-buttons {
+    margin-left: var(--button-margin, 0);
   }
 }
 </style>

package/src/components/DitoSchemaInlined.vue

@@ -12,6 +12,7 @@ DitoSchema.dito-schema-inlined(
   :collapsed="collapsed"
   :collapsible="collapsible"
   :generateLabels="!isCompact"
+  :labelNode="labelNode"
   :accumulatedBasis="accumulatedBasis"
 )
   //- Render dito-edit-buttons for inlined schemas separately from all
@@ -19,15 +20,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>
@@ -53,6 +55,7 @@ export default DitoComponent.component('DitoSchemaInlined', {
     editable: { type: Boolean, default: false },
     deletable: { type: Boolean, default: false },
     editPath: { type: String, default: null },
+    labelNode: { type: HTMLElement, default: null },
     accumulatedBasis: { type: Number, default: null }
   },
 
@@ -72,25 +75,26 @@ export default DitoComponent.component('DitoSchemaInlined', {
 @import '../styles/_imports';
 
 .dito-schema-inlined {
+  // Use grid layout for two reasons: For `TransitionHeight` to work smoothly,
+  // and to align the header above the content when the header is not teleported
+  // outside of the schema.
+  display: grid;
+  grid-template-rows: min-content;
+  grid-template-columns: 100%;
+
   > .dito-schema-content {
     > .dito-schema-header {
-      // Change spacing so .dito-label covers the full .dito-schema-header.
-      margin: -$form-spacing;
+      justify-content: space-between;
+      position: relative;
 
       .dito-label {
-        // Add removed $form-spacing again.
-        margin: $form-spacing;
         width: 100%;
-        box-sizing: content-box;
+        margin: 0;
         // Prevent collapsing to min-height when alone in
         // .dito-schema-content, due to grid-template-rows: min-content
         min-height: $input-height;
       }
     }
-
-    > .dito-pane {
-      padding: 0;
-    }
   }
 }
 </style>