@ditojs/admin 2.2.10 → 2.2.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.2.10",
+  "version": "2.2.12",
   "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": "8c6fffbc52edec642c72859dc280f3bb442b3bf1",
+  "gitHead": "062d8d229de60f7c81677b927c5c66ce9f2d2337",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

package/src/DitoAdmin.js

@@ -13,6 +13,7 @@ import * as components from './components/index.js'
 import * as types from './types/index.js'
 import DitoRoot from './components/DitoRoot.vue'
 import DitoTypeComponent from './DitoTypeComponent.js'
+import ResizeDirective from './directives/resize.js'
 import { getResource } from './utils/resource.js'
 import { deprecate } from './utils/deprecate.js'
 import { formatQuery } from './utils/route.js'
@@ -198,7 +199,7 @@ export default class DitoAdmin {
       componentName: 'VueNotifications'
     })
 
-    // root.component('vue-modal', VueModal)
+    app.directive('resize', ResizeDirective)
 
     app.use(
       createRouter({

package/src/DitoTypeComponent.js

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

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, omitPadding } from '../utils/schema.js'
+import { getTypeComponent, keepAligned, omitPadding } from '../utils/schema.js'
 import { parseFraction } from '../utils/math.js'
 
 // @vue/component
@@ -45,7 +45,9 @@ export default DitoComponent.component('DitoContainer', {
     single: { type: Boolean, default: false },
     nested: { type: Boolean, default: true },
     disabled: { type: Boolean, required: true },
-    generateLabels: { type: Boolean, default: false }
+    generateLabels: { type: Boolean, default: false },
+    firstInRow: { type: Boolean, default: false },
+    lastInRow: { type: Boolean, default: false }
   },
 
   data() {
@@ -68,25 +70,13 @@ export default DitoComponent.component('DitoContainer', {
       return (
         label !== false && (
           !!label ||
-          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
-          )
+          this.generateLabels && this.typeComponent?.generateLabel
         )
       )
     },
 
     label() {
-      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
+      return this.hasLabel ? this.getLabel(this.schema) : null
     },
 
     labelDataPath() {
@@ -94,13 +84,6 @@ 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() {
@@ -146,7 +129,11 @@ export default DitoComponent.component('DitoContainer', {
       return {
         [`${prefix}--single`]: this.single,
         [`${prefix}--has-label`]: this.hasLabel,
+        [`${prefix}--aligned`]: keepAligned(this.schema),
         [`${prefix}--omit-padding`]: omitPadding(this.schema),
+        [`${prefix}--first-in-row`]: this.firstInRow,
+        [`${prefix}--last-in-row`]: this.lastInRow,
+        [`${prefix}--alone-in-row`]: this.firstInRow && this.lastInRow,
         ...(
           isString(containerClass)
             ? { [containerClass]: true }
@@ -205,6 +192,8 @@ export default DitoComponent.component('DitoContainer', {
 @import '../styles/_imports';
 
 .dito-container {
+  $self: &;
+
   display: flex;
   flex-flow: column;
   align-items: flex-start;
@@ -227,6 +216,26 @@ export default DitoComponent.component('DitoContainer', {
     padding: 0;
   }
 
+  &--aligned {
+    // For components with labels, align the label at the top and the component
+    // at the bottom.
+    --justify: space-between;
+
+    &:has(> :only-child) {
+      // But if there is no label, still align the component to the bottom.
+      --justify: flex-end;
+    }
+
+    // Now only apply alignment if there are neighbouring components no the same
+    // row that also align.
+    // Look ahead:
+    &:not(#{$self}--last-in-row) + #{&}:not(#{$self}--first-in-row),
+    // Look behind:
+    &:not(#{$self}--last-in-row):has(+ #{&}:not(#{$self}--first-in-row)) {
+      justify-content: var(--justify);
+    }
+  }
+
   &--omit-padding {
     padding: 0;
 

package/src/components/DitoLabel.vue

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

package/src/components/DitoPane.vue

@@ -14,7 +14,7 @@
       nestedDataPath,
       nested,
       store
-    } in componentSchemas`
+    }, index in componentSchemas`
   )
     .dito-break(
       v-if="schema.break === 'before'"
@@ -22,6 +22,7 @@
     DitoContainer(
       v-if="shouldRender(schema)"
       :key="nestedDataPath"
+      v-resize="event => onResize(index, event)"
       :schema="schema"
       :dataPath="dataPath"
       :data="data"
@@ -31,6 +32,8 @@
       :nested="nested"
       :disabled="disabled"
       :generateLabels="generateLabels"
+      :firstInRow="schema.break === 'before' || isFirstInRow(index)"
+      :lastInRow="schema.break === 'after' || isLastInRow(index)"
     )
     .dito-break(
       v-if="schema.break === 'after'"
@@ -63,6 +66,12 @@ export default DitoComponent.component('DitoPane', {
     generateLabels: { type: Boolean, default: false }
   },
 
+  data() {
+    return {
+      positions: []
+    }
+  },
+
   computed: {
     tabComponent() {
       return this.tab ? this : this.$tabComponent()
@@ -135,9 +144,42 @@ export default DitoComponent.component('DitoPane', {
       if (this.tab) {
         this.$router.push({ hash: `#${this.tab}` })
       }
+    },
+
+    onResize(index, { target }) {
+      const { y, width, height } = target.getBoundingClientRect()
+      this.positions[index] = width > 0 && height > 0 ? y : null
+    },
+
+    isFirstInRow(index) {
+      const { positions } = this
+      return (
+        positions[index] !== null && (
+          index === 0 ||
+          (findNextPosition(positions, index, -1, Infinity) < positions[index])
+        )
+      )
+    },
+
+    isLastInRow(index) {
+      const { positions } = this
+      return (
+        positions[index] !== null && (
+          index === positions.length - 1 ||
+          findNextPosition(positions, index, +1, 0) > positions[index]
+        )
+      )
     }
   }
 })
+
+function findNextPosition(positions, index, step, fallback) {
+  for (let i = index + step; i >= 0 && i < positions.length; i += step) {
+    const position = positions[i]
+    if (position) return position
+  }
+  return fallback
+}
 </script>
 
 <style lang="scss">

package/src/components/DitoPanel.vue

@@ -164,8 +164,8 @@ export default DitoComponent.component('DitoPanel', {
 @import '../styles/_imports';
 
 .dito-panel {
-  & + & {
-    margin-top: $content-padding;
+  &:not(:last-child) {
+    margin-bottom: $content-padding;
   }
 
   &__header {

package/src/directives/resize.js

@@ -0,0 +1,83 @@
+import { asArray } from '@ditojs/utils'
+
+export default {
+  mounted(node, binding) {
+    observeResize(node, binding.value, binding.arg)
+  },
+
+  unmounted(node, binding) {
+    unobserveResize(node, binding.value, binding.arg)
+  }
+}
+
+export function observeResize(node, handler, options) {
+  Observer.getObserver(options).observe(node, handler)
+}
+
+export function unobserveResize(node, handler, options) {
+  Observer.getObserver(options).unobserve(node, handler)
+}
+
+export const isResizeSupported = typeof ResizeObserver !== 'undefined'
+
+const observers = {}
+
+class Observer {
+  constructor(key, options) {
+    this.key = key
+    this.options = options
+    this.observer = isResizeSupported
+      ? new ResizeObserver(entries => this.handle(entries))
+      : null
+    this.handlersByNode = new WeakMap()
+    this.nodeCount = 0
+  }
+
+  observe(node, handler) {
+    let handlers = this.handlersByNode.get(node)
+    if (!handlers) {
+      handlers = new Set()
+      this.handlersByNode.set(node, handlers)
+      this.observer?.observe(node, this.options)
+      this.nodeCount++
+    }
+    handlers.add(handler)
+  }
+
+  unobserve(node, handler) {
+    const handlers = this.handlersByNode.get(node)
+    if (handlers?.delete(handler) && handlers.size === 0) {
+      this.handlersByNode.delete(node)
+      this.observer?.unobserve(node)
+      if (--this.nodeCount === 0) {
+        delete observers[this.key]
+      }
+    }
+  }
+
+  handle(entries) {
+    for (const entry of entries) {
+      const handlers = this.handlersByNode.get(entry.target)
+      if (handlers) {
+        const event = {
+          target: entry.target,
+          contentRect: entry.contentRect,
+          // Use `asArray` since Firefox before v92 returns these as objects:
+          borderBoxSize: asArray(entry.borderBoxSize),
+          contentBoxSize: asArray(entry.contentBoxSize),
+          devicePixelContentBoxSize: asArray(entry.devicePixelContentBoxSize)
+        }
+        for (const handler of handlers) {
+          handler(event)
+        }
+      }
+    }
+  }
+
+  static getObserver({ box = 'content-box' } = {}) {
+    const options = { box }
+    const key = JSON.stringify(options)
+    observers[key] ||= new Observer(key, options)
+    return observers[key]
+  }
+}

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/types/DitoTypeCode.vue

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

package/src/types/DitoTypeComponent.vue

@@ -22,6 +22,7 @@ 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`
+  keepAligned: false,
   ignoreMissingValue: schema => !('default' in schema),
 
   async processSchema(api, schema) {

package/src/types/DitoTypeLabel.vue

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

package/src/types/DitoTypeList.vue

@@ -167,6 +167,7 @@ import { pickBy, equals, hyphenate } from '@ditojs/utils'
 // @vue/component
 export default DitoTypeComponent.register('list', {
   mixins: [SourceMixin, SortableMixin],
+  keepAligned: false,
 
   getSourceType(type) {
     // No need for transformation here. See TypeTreeList for details.

package/src/types/DitoTypeMarkup.vue

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

package/src/types/DitoTypeObject.vue

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

package/src/types/DitoTypePanel.vue

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

package/src/types/DitoTypeSection.vue

@@ -20,6 +20,7 @@ export default DitoTypeComponent.register('section', {
   ignoreMissingValue: schema => !schema.nested && !('default' in schema),
   defaultNested: false,
   generateLabel: false,
+  keepAligned: false,
 
   computed: {
     item() {

package/src/types/DitoTypeTextarea.vue

@@ -19,6 +19,7 @@ export default DitoTypeComponent.register('textarea', {
   mixins: [TextMixin],
   nativeField: true,
   textField: true,
+  keepAligned: false,
 
   computed: {
     lines() {

package/src/types/DitoTypeTreeList.vue

@@ -35,6 +35,8 @@ export default DitoTypeComponent.register(
   {
     mixins: [SourceMixin],
 
+    keepAligned: false,
+
     provide() {
       return { container: this }
     },

package/src/types/DitoTypeUpload.vue

@@ -112,6 +112,8 @@ export default DitoTypeComponent.register('upload', {
   mixins: [SortableMixin],
   components: { VueUpload },
 
+  keepAligned: false,
+
   data() {
     return {
       uploads: []

package/src/utils/options.js

@@ -36,6 +36,7 @@ const ditoOptionKeys = [
   'generateLabel',
   'excludeValue',
   'ignoreMissingValue',
+  'keepAligned',
   'omitPadding',
   'processValue',
   'processSchema',

package/src/utils/schema.js

@@ -474,6 +474,10 @@ export function omitPadding(schema) {
   return !!getTypeOptions(schema)?.omitPadding
 }
 
+export function keepAligned(schema) {
+  return !!getTypeOptions(schema)?.keepAligned
+}
+
 export function getDefaultValue(schema) {
   // Support default values both on schema and on component level.
   // NOTE: At the time of creation, components may not be instantiated, (e.g. if