@ditojs/admin 2.2.11 → 2.2.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.2.11",
+  "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": "52aada1f67b13f9b30b745777c64649c6c7b171f",
+  "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/components/DitoContainer.vue

@@ -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() {
@@ -129,6 +131,9 @@ export default DitoComponent.component('DitoContainer', {
         [`${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 }
@@ -212,19 +217,22 @@ export default DitoComponent.component('DitoContainer', {
   }
 
   &--aligned {
-    // To align components with and without labels.
-    justify-content: space-between;
+    // For components with labels, align the label at the top and the component
+    // at the bottom.
+    --justify: space-between;
 
     &:has(> :only-child) {
-      justify-content: flex-end;
+      // But if there is no label, still align the component to the bottom.
+      --justify: flex-end;
     }
 
-    // Don't align if neighbouring components aren't aligned either.
+    // Now only apply alignment if there are neighbouring components no the same
+    // row that also align.
     // Look ahead:
-    #{$self}:not(#{&}) + &,
+    &:not(#{$self}--last-in-row) + #{&}:not(#{$self}--first-in-row),
     // Look behind:
-    &:has(+ #{$self}:not(#{&})) {
-      justify-content: flex-start;
+    &:not(#{$self}--last-in-row):has(+ #{&}:not(#{$self}--first-in-row)) {
+      justify-content: var(--justify);
     }
   }
 

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]
+  }
+}