@ditojs/admin 2.2.7-debug.5 → 2.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.2.7-debug.5",
+  "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": "a7d0c07bd2b065bbd103e9bcd73ecaa91a1f58e8",
+  "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() {
@@ -330,16 +336,6 @@ export default DitoComponent.component('DitoSchema', {
     }
   },
 
-  watch: {
-    schema() {
-      console.log('DitoSchema: schema changed', this.dataPath)
-    },
-
-    data() {
-      console.log('DitoSchema: data changed', this.dataPath)
-    }
-  },
-
   created() {
     this._register(true)
     this.setupSchemaFields()
@@ -711,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,
@@ -740,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 {
@@ -762,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;
@@ -783,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

@@ -15,7 +15,7 @@ import DitoContext from '../DitoContext.js'
 import EmitterMixin from './EmitterMixin.js'
 import { isMatchingType, convertType } from '../utils/type.js'
 import { getResource, getMemberResource } from '../utils/resource.js'
-import { reactive } from 'vue'
+import { computed, reactive } from 'vue'
 
 // @vue/component
 export default {
@@ -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) || ''
     },
 
@@ -433,17 +433,25 @@ export default {
     },
 
     setupComputed() {
-      for (const [key, value] of Object.entries(this.schema.computed || {})) {
-        const accessor = isFunction(value)
-          ? { get: value }
-          : isObject(value) && isFunction(value.get)
-            ? value
+      const getComputedAccessor = ({ get, set }) => {
+        const getter = computed(() => get.call(this))
+        return {
+          get: () => getter.value,
+          set: set ? value => set.call(this, value) : undefined
+        }
+      }
+
+      for (const [key, item] of Object.entries(this.schema.computed || {})) {
+        const accessor = isFunction(item)
+          ? getComputedAccessor({ get: item })
+          : isObject(item) && isFunction(item.get)
+            ? getComputedAccessor(item)
             : null
         if (accessor) {
           Object.defineProperty(this, key, accessor)
         } else {
           console.error(
-            `Invalid computed property definition: ${key}: ${value}`
+            `Invalid computed property definition: ${key}: ${item}`
           )
         }
       }

package/src/mixins/SourceMixin.js

@@ -3,6 +3,7 @@ import ResourceMixin from './ResourceMixin.js'
 import SchemaParentMixin from '../mixins/SchemaParentMixin.js'
 import { getSchemaAccessor, getStoreAccessor } from '../utils/accessor.js'
 import { getMemberResource } from '../utils/resource.js'
+import { replaceRoute } from '../utils/route.js'
 import {
   processRouteSchema,
   processForms,
@@ -25,7 +26,6 @@ import {
   parseDataPath,
   normalizeDataPath
 } from '@ditojs/utils'
-import { replaceRoute } from '../utils/route.js'
 
 // @vue/component
 export default {
@@ -44,7 +44,6 @@ export default {
   data() {
     return {
       wrappedPrimitives: null,
-      ignoreRouteChange: false,
       unwrappingPrimitives: false
     }
   },
@@ -178,9 +177,6 @@ export default {
           ...query
         }
         if (!equals(query, this.$route.query)) {
-          // Tell the `$route` watcher to ignore the changed triggered here:
-          // this.ignoreRouteChange = true
-          // this.$router.replace({ query, hash: this.$route.hash })
           // Change the route query parameters, but don't trigger a route
           // change, as that would cause the list to reload.
           replaceRoute({ query })
@@ -318,10 +314,6 @@ export default {
 
   watch: {
     $route(to, from) {
-      if (this.ignoreRouteChange) {
-        this.ignoreRouteChange = false
-        return
-      }
       if (from.path === to.path && from.hash === to.hash) {
         // Paths and hashes remain the same, so only queries have changed.
         // Update filter and reload data without clearing.

package/src/mixins/TypeMixin.js

@@ -69,6 +69,7 @@ export default {
           : value
         // eslint-disable-next-line vue/no-mutating-props
         this.data[this.name] = this.parsedValue
+        this.changedValue = undefined
       }
     },
 
@@ -277,6 +278,7 @@ export default {
 
     clear() {
       this.value = null
+      this.changedValue = undefined
       this.onChange()
     },
 
@@ -293,7 +295,6 @@ export default {
     },
 
     onInput() {
-      console.log('onInput()', this.name)
       this.markDirty()
       this.emitEvent('input')
     },
@@ -306,14 +307,10 @@ export default {
         // For some odd reason, the native change event now sometimes fires
         // twice on Vue3. Filter out second call.
         // TODO: Investigate why this happens, and if it's a bug in Vue3.
-        if (value === this.changedValue) {
-          console.log('onChange() double', this.name)
-          return
-        }
+        if (value === this.changedValue) return
         this.changedValue = value
       }
 
-      console.log('onChange()', this.name, value)
       this.markDirty()
       this.emitEvent('change', {
         // Prevent endless parse recursion: