@ditojs/admin 2.7.5 → 2.8.0

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
@@ -54,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 }
   },
 
@@ -73,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>

package/src/components/DitoTabs.vue

@@ -3,11 +3,11 @@
   template(
     v-for="(tabSchema, key) in tabs"
   )
-    RouterLink.dito-link(
+    a.dito-link(
       v-if="shouldRenderSchema(tabSchema)"
       :key="key"
-      :to="{ hash: `#${key}` }"
-      :class="{ 'dito-active': selectedTab === key }"
+      :class="{ 'dito-active': modelValue === key }"
+      @click="$emit('update:modelValue', key)"
     ) {{ getLabel(tabSchema, key) }}
 </template>
 
@@ -16,45 +16,87 @@ import DitoComponent from '../DitoComponent.js'
 
 // @vue/component
 export default DitoComponent.component('DitoTabs', {
+  emits: ['update:modelValue'],
   props: {
     tabs: { type: Object, default: null },
-    selectedTab: { type: String, default: null }
+    modelValue: { type: String, default: null }
   }
 })
 </script>
 
 <style lang="scss">
+@use 'sass:color';
 @import '../styles/_imports';
 
-$tab-color-background: $color-lightest;
-$tab-color-inactive: $color-light;
-$tab-color-active: $color-lightest;
-$tab-color-hover: $color-white;
-
 .dito-tabs {
-  // See: https://codepen.io/tholex/pen/hveBx/
-  margin-left: auto;
+  display: flex;
 
-  a {
-    display: block;
+  .dito-link {
     @include user-select(none);
 
-    background: $tab-color-inactive;
-    padding: $tab-padding-ver $tab-padding-hor;
-    margin-left: $tab-margin;
-    border-top-left-radius: $tab-radius;
-    border-top-right-radius: $tab-radius;
+    display: block;
+    white-space: nowrap;
 
     &:hover {
-      background: $tab-color-hover;
+      background: $color-white;
     }
 
-    &:active {
-      background: $tab-color-active;
+    // When in main header:
+    .dito-header & {
+      background: $color-light;
+      padding: $tab-padding-ver $tab-padding-hor;
+      margin-left: $tab-margin;
+      border-top-left-radius: $tab-radius;
+      border-top-right-radius: $tab-radius;
+
+      &:active {
+        background: $color-lightest;
+      }
+
+      &.dito-active {
+        background: $color-lightest;
+      }
     }
 
-    &.dito-active {
-      background: $tab-color-background;
+    // When inside a inline schema:
+    .dito-schema-inlined &,
+    .dito-label & {
+      background: $color-lighter;
+      border: $border-style;
+      padding: $input-padding;
+      margin-left: -$border-width;
+      white-space: nowrap;
+
+      &:first-child {
+        border-top-left-radius: $tab-radius;
+        border-bottom-left-radius: $tab-radius;
+      }
+
+      &:last-child {
+        border-top-right-radius: $tab-radius;
+        border-bottom-right-radius: $tab-radius;
+      }
+
+      &:active {
+        background: $color-lighter;
+      }
+
+      &.dito-active {
+        background: $color-active;
+        border-color: color.adjust($color-active, $lightness: -10%);
+        color: $color-white;
+        z-index: 1;
+      }
+    }
+  }
+
+  .dito-schema & {
+    // Push clipboard to the right in the flex layout, see:
+    // https://codepen.io/tholex/pen/hveBx/
+    margin-left: auto;
+
+    &:last-child {
+      margin-right: auto;
     }
   }
 }

package/src/components/DitoTreeItem.vue

@@ -16,7 +16,7 @@
     )
       .dito-chevron(
         v-if="numEntries"
-        :class="{ 'dito-opened': opened }"
+        :class="{ 'dito-open': opened }"
       )
       .dito-tree-label(
         v-html="label"

package/src/components/DitoView.vue

@@ -22,7 +22,6 @@ template(
       :store="getChildStore(name)"
       :disabled="isLoading"
       scrollable
-      headerInMenu
     )
 </template>
 

package/src/mixins/DitoMixin.js

@@ -52,6 +52,7 @@ export default {
   data() {
     return {
       appState,
+      isMounted: false,
       overrides: null // See accessor.js
     }
   },
@@ -171,13 +172,13 @@ export default {
     }
   },
 
+  mounted() {
+    this.isMounted = true
+  },
+
   beforeCreate() {
     const uid = nextUid++
-    Object.defineProperty(this, '$uid', {
-      get() {
-        return uid
-      }
-    })
+    Object.defineProperty(this, '$uid', { get: () => uid })
   },
 
   methods: {

package/src/mixins/ItemMixin.js

@@ -134,7 +134,11 @@ export default {
           text = `${formLabel} ${hadLabel ? `'${text}'` : text}`
         }
       }
-      return asObject ? { text, prefix, suffix } : text
+      return asObject
+        ? text || prefix || suffix
+          ? { text, prefix, suffix }
+          : null
+        : text
     }
   }
 }

package/src/mixins/TypeMixin.js

@@ -118,6 +118,11 @@ export default {
       return this.processedData
     },
 
+    labelNode() {
+      const node = this.isMounted ? this.$el.previousElementSibling : null
+      return node?.matches('.dito-label') ? node : null
+    },
+
     visible: getSchemaAccessor('visible', {
       type: Boolean,
       default() {