@ditojs/admin 2.2.7 → 2.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.2.7",
+  "version": "2.2.8",
   "type": "module",
   "description": "Dito.js Admin is a schema based admin interface for Dito.js Server, featuring auto-generated views and forms and built with Vue.js",
   "repository": "https://github.com/ditojs/dito/tree/master/packages/admin",
@@ -82,7 +82,7 @@
     "vite": "^4.3.1"
   },
   "types": "types",
-  "gitHead": "9636ab2adc6d813af39097fe8d92ce7a00020f93",
+  "gitHead": "6c520e0985b080c574f93fdee8b7f19d51a84140",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

package/src/DitoTypeComponent.js

@@ -21,7 +21,6 @@ export default {
   generateLabel: true,
   excludeValue: false,
   ignoreMissingValue: null,
-  alignBottom: true,
   omitPadding: false,
 
   component: DitoComponent.component,

package/src/components/DitoButtons.vue

@@ -14,7 +14,6 @@
       :meta="meta"
       :store="getChildStore(buttonSchema.name)"
       :disabled="disabled"
-      :generateLabels="false"
     )
   template(
     v-for="vnode of $slots.default?.()"

package/src/components/DitoContainer.vue

@@ -31,7 +31,7 @@ import { isString, isNumber } from '@ditojs/utils'
 import DitoComponent from '../DitoComponent.js'
 import DitoContext from '../DitoContext.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
-import { getTypeComponent, alignBottom, omitPadding } from '../utils/schema.js'
+import { getTypeComponent, omitPadding } from '../utils/schema.js'
 import { parseFraction } from '../utils/math.js'
 
 // @vue/component
@@ -45,7 +45,7 @@ export default DitoComponent.component('DitoContainer', {
     single: { type: Boolean, default: false },
     nested: { type: Boolean, default: true },
     disabled: { type: Boolean, required: true },
-    generateLabels: { type: Boolean, default: true }
+    generateLabels: { type: Boolean, default: false }
   },
 
   data() {
@@ -68,13 +68,25 @@ export default DitoComponent.component('DitoContainer', {
       return (
         label !== false && (
           !!label ||
-          this.generateLabels && this.typeComponent?.generateLabel
+          this.generateLabels && (
+            this.typeComponent?.generateLabel ||
+            // If the component has no label but isn't full width, render an
+            // empty label for alignment with other components:
+            !this.isFullWidth
+          )
         )
       )
     },
 
     label() {
-      return this.hasLabel ? this.getLabel(this.schema) : null
+      return this.hasLabel
+        ? this.getLabel(
+            this.schema,
+            // Pass an empty string in case we need an empty label, see
+            // `hasLabel()`:
+            this.typeComponent?.generateLabel ? this.schema.name : ''
+          ) || ''
+        : null
     },
 
     labelDataPath() {
@@ -82,6 +94,13 @@ export default DitoComponent.component('DitoContainer', {
       return this.nested ? this.dataPath : null
     },
 
+    isFullWidth() {
+      return (
+        !this.componentBasis.endsWith('%') ||
+        parseFloat(this.componentBasis) === 100
+      )
+    },
+
     componentWidth: getSchemaAccessor('width', {
       type: [String, Number],
       default() {
@@ -127,7 +146,6 @@ export default DitoComponent.component('DitoContainer', {
       return {
         [`${prefix}--single`]: this.single,
         [`${prefix}--has-label`]: this.hasLabel,
-        [`${prefix}--align-bottom`]: alignBottom(this.schema),
         [`${prefix}--omit-padding`]: omitPadding(this.schema),
         ...(
           isString(containerClass)
@@ -166,11 +184,10 @@ export default DitoComponent.component('DitoContainer', {
     componentClass() {
       const basisIsAuto = this.componentBasis === 'auto'
       return {
-        // TODO: BEM
+        // TODO: BEM?
         'dito-single': this.single,
         'dito-disabled': this.componentDisabled,
         'dito-width-fill': !basisIsAuto || this.componentWidth === 'fill',
-        'dito-width-auto': basisIsAuto,
         'dito-has-errors': !!this.errors
       }
     }
@@ -204,8 +221,10 @@ export default DitoComponent.component('DitoContainer', {
     padding: 0;
   }
 
-  &--align-bottom {
-    justify-content: end; // To align components with and without labels.
+  &--single {
+    height: 100%; // So that list buttons can be sticky at the bottom;
+    // Just like on DitoPane, clear settings from above.
+    padding: 0;
   }
 
   &--omit-padding {
@@ -215,10 +234,6 @@ export default DitoComponent.component('DitoContainer', {
       margin: $form-spacing $form-spacing-half 0;
     }
   }
-
-  &--single {
-    height: 100%; // So that list buttons can be sticky at the bottom;
-  }
 }
 
 // NOTE: This is not nested inside `.dito-container` so that other

package/src/components/DitoDialog.vue

@@ -13,9 +13,10 @@
     form.dito-scroll-parent(
       @submit.prevent="submit"
     )
-      DitoSchema.dito-scroll(
+      DitoSchema(
         :schema="schema"
         :data="dialogData"
+        scrollable
       )
         template(#buttons)
           DitoButtons.dito-buttons-large(

package/src/components/DitoForm.vue

@@ -12,7 +12,7 @@
     v-show="!isActive"
   )
   //- Use a <div> for inlined forms, as we shouldn't nest actual <form> tags.
-  component.dito-scroll(
+  component.dito-scroll-parent(
     v-show="isActive"
     :is="isNestedRoute ? 'div' : 'form'"
     @submit.prevent
@@ -24,7 +24,9 @@
       :meta="meta"
       :store="store"
       :disabled="isLoading"
-      :menuHeader="true"
+      scrollable
+      headerInMenu
+      generateLabels
     )
       template(#buttons)
         DitoButtons.dito-buttons-round.dito-buttons-main.dito-buttons-large(

package/src/components/DitoHeader.vue

@@ -19,6 +19,8 @@ nav.dito-header
     DitoSpinner(
       v-if="isLoading"
     )
+  //- Teleport target for `.dito-schema-header`:
+  .dito-menu
   slot
 </template>
 

package/src/components/DitoLabel.vue

@@ -1,6 +1,5 @@
 <template lang="pug">
 component.dito-label(
-  v-if="text || collapsible"
   :is="tag"
   v-bind="attributes"
   :class="{ 'dito-active': isActive }"

package/src/components/DitoPane.vue

@@ -3,6 +3,9 @@
 .dito-pane(
   v-if="isPopulated && componentSchemas.length > 0"
   v-show="visible"
+  :class=`{
+    'dito-pane--single': isSingleComponent
+  }`
 )
   template(
     v-for=`{
@@ -57,7 +60,7 @@ export default DitoComponent.component('DitoPane', {
     single: { type: Boolean, default: false },
     visible: { type: Boolean, default: true },
     disabled: { type: Boolean, default: false },
-    generateLabels: { type: Boolean, default: true }
+    generateLabels: { type: Boolean, default: false }
   },
 
   computed: {
@@ -141,24 +144,34 @@ export default DitoComponent.component('DitoPane', {
 @import '../styles/_imports';
 
 .dito-pane {
+  $max-width: $content-width + 2 * $content-padding;
+
   display: flex;
   position: relative;
   flex-flow: row wrap;
   align-content: flex-start;
   align-items: baseline;
+  padding: $content-padding;
   // Remove the padding added by `.dito-container` inside `.dito-pane`:
   margin: (-$form-spacing) (-$form-spacing-half);
   // Add removed horizontal margin again to max-width:
-  max-width: $content-width + 2 * $form-spacing-half;
+  max-width: $max-width + 2 * $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 settings from above.
+    margin: 0;
+    max-width: $max-width;
+  }
+
   &.dito-pane-main {
     flex: 100%;
+    margin-bottom: 0; // For vertical scroll size.
   }
 
-  .dito-schema-header:not(.dito-schema-menu-header) + & {
+  .dito-schema-header + & {
     // Clear top-margin if the components are preceded by a schema header.
     margin-top: 0;
   }

package/src/components/DitoPanel.vue

@@ -13,6 +13,7 @@ component.dito-panel(
     :store="store"
     :disabled="disabled"
     :hasOwnData="hasOwnData"
+    generateLabels
   )
     template(#before)
       h2.dito-panel__header(:class="{ 'dito-panel__header--sticky': sticky }")
@@ -163,7 +164,9 @@ export default DitoComponent.component('DitoPanel', {
 @import '../styles/_imports';
 
 .dito-panel {
-  padding-bottom: $content-padding;
+  & + & {
+    margin-top: $content-padding;
+  }
 
   &__header {
     display: block;
@@ -180,7 +183,7 @@ export default DitoComponent.component('DitoPanel', {
         $form-spacing;
 
       position: sticky;
-      top: $content-padding;
+      top: 0;
       margin-bottom: $margin;
       z-index: 1;
 
@@ -218,7 +221,9 @@ export default DitoComponent.component('DitoPanel', {
     border-bottom-right-radius: $border-radius;
 
     > .dito-schema-content {
-      padding: $form-spacing-half $form-spacing;
+      > .dito-pane {
+        padding: $form-spacing-half $form-spacing;
+      }
 
       .dito-container {
         padding: $form-spacing-half;
@@ -232,7 +237,7 @@ export default DitoComponent.component('DitoPanel', {
       > .dito-buttons {
         --button-margin: #{$form-spacing};
 
-        padding: $form-spacing-half 0;
+        padding: 0 $form-spacing $form-spacing;
 
         .dito-container {
           padding: 0;

package/src/components/DitoRoot.vue

@@ -369,15 +369,6 @@ function addRoutes(router, routes) {
 .dito-root {
   .dito-page {
     background: $content-color-background;
-    // The root-level views and forms may have a `.dito-schema-header` that
-    // should appear layered over `.dito-menu`, while having `overlay: hidden`
-    // set by `.dito-scroll-parent` to delegate scrolling to `.dito-scroll`.
-    // In order to not have the header clipped, adjust the top here:
-    > .dito-form,
-    > .dito-view {
-      margin-top: -$menu-height;
-      padding-top: $menu-height;
-    }
   }
 }
 </style>

package/src/components/DitoSchema.vue

@@ -3,35 +3,39 @@ slot(name="before")
 .dito-schema(
   v-bind="$attrs"
 )
-  .dito-schema-content
-    .dito-schema-header(
-      v-if="hasLabel || hasTabs || clipboard"
-      :class="{ 'dito-schema-menu-header': menuHeader }"
+  .dito-schema-content(:class="{ 'dito-scroll': scrollable }")
+    Teleport(
+      to=".dito-menu"
+      :disabled="!headerInMenu"
     )
-      DitoLabel(
-        v-if="hasLabel"
-        :label="label"
-        :dataPath="dataPath"
-        :collapsible="collapsible"
-        :collapsed="!opened"
-        @expand="onExpand"
+      .dito-schema-header(
+        v-if="hasLabel || hasTabs || clipboard"
+        :class="{ 'dito-schema-header--menu': headerInMenu }"
       )
-        //- Pass edit-buttons through to dito-label's own edit-buttons slot:
-        template(
-          v-if="inlined"
-          #edit-buttons
+        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"
+          :tabs="tabs"
+          :selectedTab="selectedTab"
+        )
+        DitoClipboard(
+          :clipboard="clipboard"
+          :dataPath="dataPath"
+          :data="data"
         )
-          slot(name="edit-buttons")
-      DitoTabs(
-        v-if="tabs"
-        :tabs="tabs"
-        :selectedTab="selectedTab"
-      )
-      DitoClipboard(
-        :clipboard="clipboard"
-        :dataPath="dataPath"
-        :data="data"
-      )
     template(
       v-if="hasTabs"
     )
@@ -78,6 +82,7 @@ slot(name="before")
     v-else-if="isPopulated"
   )
     DitoPanels(
+      :class="{ 'dito-scroll': scrollable }"
       :panels="panelEntries"
       :data="data"
       :meta="meta"
@@ -135,9 +140,10 @@ export default DitoComponent.component('DitoSchema', {
     disabled: { type: Boolean, default: false },
     collapsed: { type: Boolean, default: false },
     collapsible: { type: Boolean, default: false },
-    generateLabels: { type: Boolean, default: true },
+    scrollable: { type: Boolean, default: false },
     hasOwnData: { type: Boolean, default: false },
-    menuHeader: { type: Boolean, default: false }
+    headerInMenu: { type: Boolean, default: false },
+    generateLabels: { type: Boolean, default: false }
   },
 
   data() {
@@ -701,8 +707,7 @@ export default DitoComponent.component('DitoSchema', {
       grid-row-end: none;
     }
 
-    max-width: $content-width;
-    padding: $content-padding;
+    max-width: $content-width + 2 * $content-padding;
   }
 
   > .dito-buttons,
@@ -730,6 +735,11 @@ export default DitoComponent.component('DitoSchema', {
       margin: $content-padding $form-spacing-half $form-spacing-half;
     }
   }
+
+  .dito-pane-main + .dito-buttons-main {
+    // Needed forms with sticky main buttons.
+    margin-bottom: 0;
+  }
 }
 
 .dito-schema-header {
@@ -752,8 +762,8 @@ export default DitoComponent.component('DitoSchema', {
     }
   }
 
-  &.dito-schema-menu-header {
-    // Bring the tabs up to the menu.
+  &--menu {
+    // Align the tabs on top of to the header menu.
     position: absolute;
     height: $menu-height;
     padding: 0 $menu-padding-hor;
@@ -773,11 +783,5 @@ export default DitoComponent.component('DitoSchema', {
       font-size: $menu-font-size;
     }
   }
-
-  button.dito-label {
-    width: 100%;
-    // Catch all clicks, even when it would be partially covered by schema.
-    z-index: 1;
-  }
 }
 </style>

package/src/components/DitoSchemaInlined.vue

@@ -1,5 +1,6 @@
 <template lang="pug">
 DitoSchema.dito-schema-inlined(
+  :class="{ 'dito-schema-compact': isCompact }"
   :schema="schema"
   :dataPath="dataPath"
   :data="data"
@@ -11,7 +12,6 @@ DitoSchema.dito-schema-inlined(
   :collapsed="collapsed"
   :collapsible="collapsible"
   :generateLabels="!isCompact"
-  :class="{ 'dito-schema-compact': isCompact }"
 )
   //- Render dito-edit-buttons for inlined schemas separately from all
   //- others in `TypeList` as a scope, for better handling of layout.
@@ -71,8 +71,6 @@ export default DitoComponent.component('DitoSchemaInlined', {
 
 .dito-schema-inlined {
   > .dito-schema-content {
-    padding: 0;
-
     > .dito-schema-header {
       // Change spacing so .dito-label covers the full .dito-schema-header.
       margin: -$form-spacing;
@@ -90,11 +88,10 @@ export default DitoComponent.component('DitoSchemaInlined', {
         // .dito-schema-content, due to grid-template-rows: min-content
         min-height: 2em;
       }
+    }
 
-      & + .dito-pane {
-        // Needed for transition-height in DitoSchema:
-        min-height: $form-spacing;
-      }
+    > .dito-pane {
+      padding: 0;
     }
   }
 }

package/src/components/{DitoMenu.vue → DitoSidebar.vue}

@@ -1,5 +1,5 @@
 <template lang="pug">
-nav.dito-menu.dito-scroll-parent
+nav.dito-sidebar.dito-scroll-parent
   h1 {{ appState.title }}
   ul.dito-scroll
     li(
@@ -34,7 +34,7 @@ export default DitoComponent.component('DitoMenu', {
 <style lang="scss">
 @import '../styles/_imports';
 
-.dito-menu {
+.dito-sidebar {
   flex: initial;
   font-size: $menu-font-size;
   white-space: nowrap;

package/src/components/DitoView.vue

@@ -14,14 +14,14 @@ template(
     v-else-if="shouldRender(viewSchema)"
     :data-resource="sourceSchema.path"
   )
-    DitoSchema.dito-scroll(
+    DitoSchema(
       :schema="viewSchema"
       :data="data"
       :meta="meta"
       :store="getChildStore(name)"
       :disabled="isLoading"
-      :generateLabels="false"
-      :menuHeader="true"
+      scrollable
+      headerInMenu
     )
 </template>
 

package/src/components/index.js

@@ -4,7 +4,7 @@
 // convention is in order of encountered hierarchy in the DOM.
 
 export { default as DitoRoot } from './DitoRoot.vue'
-export { default as DitoMenu } from './DitoMenu.vue'
+export { default as DitoSidebar } from './DitoSidebar.vue'
 export { default as DitoHeader } from './DitoHeader.vue'
 export { default as DitoAccount } from './DitoAccount.vue'
 export { default as DitoDialog } from './DitoDialog.vue'

package/src/mixins/DitoMixin.js

@@ -243,7 +243,7 @@ export default {
     getLabel(schema, name) {
       return schema
         ? this.getSchemaValue('label', { type: String, schema }) ||
-          labelize(name || schema.name)
+          labelize(name ?? schema.name)
         : labelize(name) || ''
     },
 

package/src/styles/_button.scss

@@ -130,7 +130,7 @@
     }
   }
 
-  &.dito-buttons-main {
+  &.dito-buttons-main:not(:empty) {
     position: sticky;
     bottom: 0;
     width: 100%;

package/src/types/DitoTypeCode.vue

@@ -14,7 +14,6 @@ import CodeFlask from 'codeflask'
 // @vue/component
 export default DitoTypeComponent.register('code', {
   mixins: [DomMixin],
-  alignBottom: false,
 
   computed: {
     lines() {

package/src/types/DitoTypeComponent.vue

@@ -22,7 +22,6 @@ export default DitoTypeComponent.register('component', {
   // Override the standard `defaultValue: null` to not set any data for custom
   // components, unless they provide a default value.
   defaultValue: () => undefined, // Callback to override `defaultValue: null`
-  alignBottom: false,
   ignoreMissingValue: schema => !('default' in schema),
 
   async processSchema(api, schema) {

package/src/types/DitoTypeLabel.vue

@@ -11,8 +11,7 @@ import DitoTypeComponent from '../DitoTypeComponent.js'
 // @vue/component
 export default DitoTypeComponent.register('label', {
   excludeValue: true,
-  generateLabel: false,
-  alignBottom: false
+  generateLabel: false
 })
 </script>
 

package/src/types/DitoTypeList.vue

@@ -167,7 +167,6 @@ import { pickBy, equals, hyphenate } from '@ditojs/utils'
 // @vue/component
 export default DitoTypeComponent.register('list', {
   mixins: [SourceMixin, SortableMixin],
-  alignBottom: false,
 
   getSourceType(type) {
     // No need for transformation here. See TypeTreeList for details.
@@ -338,6 +337,26 @@ export default DitoTypeComponent.register('list', {
     display: grid;
     grid-template-rows: min-content;
     height: 100%;
+
+    // Make single list header, navigation and buttons sticky to the top and
+    // bottom:
+    .dito-navigation {
+      position: sticky;
+      top: 0;
+      margin-top: -$content-padding;
+      padding-top: $content-padding;
+      background: $content-color-background;
+      z-index: 1;
+
+      + .dito-table {
+        .dito-table-head {
+          position: sticky;
+          top: calc($input-height + $content-padding + $content-padding-half);
+          background: $content-color-background;
+          z-index: 1;
+        }
+      }
+    }
   }
 }
 </style>

package/src/types/DitoTypeMarkup.vue

@@ -83,8 +83,6 @@ export default DitoTypeComponent.register('markup', {
     Icon
   },
 
-  alignBottom: false,
-
   data() {
     return {
       editor: null,

package/src/types/DitoTypeObject.vue

@@ -63,8 +63,6 @@ import { resolveSchemaComponent } from '../utils/schema.js'
 export default DitoTypeComponent.register('object', {
   mixins: [SourceMixin],
 
-  alignBottom: false,
-
   getSourceType(type) {
     // No need for transformation here. See TypeTreeList for details.
     return type

package/src/types/DitoTypePanel.vue

@@ -6,7 +6,6 @@ export default DitoTypeComponent.register('panel', {
   defaultValue: () => undefined, // Callback to override `defaultValue: null`
   excludeValue: true,
   generateLabel: false,
-  alignBottom: false,
   omitPadding: true,
 
   getPanelSchema(api, schema) {

package/src/types/DitoTypeSection.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 .dito-section(:class="{ 'dito-section-labelled': !!schema.label }")
-  DitoPane.dito-section-pane(
+  DitoPane.dito-section__pane(
     :schema="getItemFormSchema(schema, item, context)"
     :dataPath="dataPath"
     :data="item"
@@ -20,7 +20,6 @@ export default DitoTypeComponent.register('section', {
   ignoreMissingValue: schema => !schema.nested && !('default' in schema),
   defaultNested: false,
   generateLabel: false,
-  alignBottom: false,
 
   computed: {
     item() {
@@ -49,5 +48,9 @@ export default DitoTypeComponent.register('section', {
     padding: $form-spacing;
     box-sizing: border-box;
   }
+
+  .dito-section__pane {
+    padding: 0;
+  }
 }
 </style>

package/src/types/DitoTypeTextarea.vue

@@ -17,7 +17,6 @@ import { getSchemaAccessor } from '../utils/accessor.js'
 export default DitoTypeComponent.register('textarea', {
   nativeField: true,
   textField: true,
-  alignBottom: false,
 
   computed: {
     lines() {