@ditojs/admin 2.2.11 → 2.2.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.2.11",
+  "version": "2.2.13",
   "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": "cb2613f69dcb1837db22d95c736ea2d414326f5c",
   "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/DitoButtons.vue

@@ -6,7 +6,7 @@
     v-for="(buttonSchema, buttonDataPath) in buttonSchemas"
   )
     DitoContainer(
-      v-if="shouldRender(buttonSchema)"
+      v-if="shouldRenderSchema(buttonSchema)"
       :key="buttonDataPath"
       :schema="buttonSchema"
       :dataPath="buttonDataPath"

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,24 @@ 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.
-    // Look ahead:
-    #{$self}:not(#{&}) + &,
-    // Look behind:
-    &:has(+ #{$self}:not(#{&})) {
-      justify-content: flex-start;
+    &:not(#{$self}--only-in-row) {
+      // 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);
+      }
     }
   }
 

package/src/components/DitoCreateButton.vue

@@ -14,7 +14,7 @@
         v-for="(form, type) in forms"
       )
         a(
-          v-if="shouldRender(form)"
+          v-if="shouldRenderSchema(form)"
           v-show="shouldShow(form)"
           :class="getFormClass(form, type)"
           @mousedown.stop="onPulldownMouseDown(type)"
@@ -61,7 +61,7 @@ export default DitoComponent.component('DitoCreateButton', {
 
   methods: {
     createItem(form, type = null) {
-      if (this.shouldRender(form) && !this.shouldDisable(form)) {
+      if (this.shouldRenderSchema(form) && !this.shouldDisable(form)) {
         if (this.isInlined) {
           this.sourceComponent.createItem(form, type)
         } else {

package/src/components/DitoDialog.vue

@@ -79,6 +79,7 @@ export default DitoComponent.component('DitoDialog', {
 
     schema() {
       return {
+        type: 'dialog',
         components: this.components
       }
     },

package/src/components/DitoForm.vue

@@ -283,6 +283,16 @@ export default DitoComponent.component('DitoForm', {
   },
 
   watch: {
+    $route(to, from) {
+      // Reload form data when navigating to a different entity in same form.
+      if (this.providesData) {
+        const { param } = this.meta
+        if (param && to.params[param] !== from.params[param]) {
+          this.loadData(true)
+        }
+      }
+    },
+
     sourceData: 'clearClonedData',
     // Needed for the 'create' redirect in `inheritedData()` to work:
     create: 'setupData'

package/src/components/DitoPane.vue

@@ -14,14 +14,15 @@
       nestedDataPath,
       nested,
       store
-    } in componentSchemas`
+    }, index in componentSchemas`
   )
     .dito-break(
       v-if="schema.break === 'before'"
     )
     DitoContainer(
-      v-if="shouldRender(schema)"
+      v-if="shouldRenderSchema(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

@@ -1,6 +1,7 @@
 <template lang="pug">
 //- Only show panels in tabs when the tabs are also visible.
 component.dito-panel(
+  v-if="shouldRenderSchema(panelSchema)"
   v-show="visible && (!panelTabComponent || panelTabComponent.visible)"
   :is="panelTag"
   @submit.prevent
@@ -164,8 +165,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/components/DitoPanels.vue

@@ -6,7 +6,7 @@
     v-for="{ schema, dataPath, tabComponent } in panels"
   )
     DitoPanel(
-      v-if="shouldRender(schema)"
+      v-if="shouldRenderSchema(schema)"
       :key="getPanelKey(dataPath, tabComponent)"
       :schema="schema"
       :dataPath="dataPath"

package/src/components/DitoRoot.vue

@@ -172,7 +172,12 @@ export default DitoComponent.component('DitoRoot', {
         async (resolve, reject) => {
           // Process components to resolve async schemas.
           const routes = []
-          await processSchemaComponents(this.api, { components }, routes, 0)
+          await processSchemaComponents(
+            this.api,
+            { type: 'dialog', components },
+            routes,
+            0
+          )
           if (routes.length > 0) {
             throw new Error(
               'Dialogs do not support components that produce routes'

package/src/components/DitoSchema.vue

@@ -155,6 +155,7 @@ export default DitoComponent.component('DitoSchema', {
           ? data(this.context)
           : data
       ),
+      currentTab: null,
       componentsRegistry: {},
       panesRegistry: {},
       panelsRegistry: {}
@@ -187,17 +188,7 @@ export default DitoComponent.component('DitoSchema', {
     },
 
     selectedTab() {
-      const currentTab = this.$route.hash?.slice(1) || null
-      const tab =
-        currentTab && this.shouldRender(this.tabs[currentTab])
-          ? currentTab
-          : this.defaultTab?.name || null
-      if (tab !== currentTab) {
-        // TODO: Move this watcher!
-        // Any tab change needs to be reflected in the router also.
-        this.$router.replace({ hash: `#${tab}` })
-      }
-      return tab
+      return this.currentTab || this.defaultTab?.name || null
     },
 
     defaultTab() {
@@ -336,6 +327,32 @@ export default DitoComponent.component('DitoSchema', {
     }
   },
 
+  watch: {
+    '$route.hash': {
+      immediate: true,
+      handler(hash) {
+        if (this.hasTabs) {
+          this.currentTab = hash?.slice(1) || null
+        }
+      }
+    },
+
+    '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}` })
+        }
+      }
+    }
+  },
+
   created() {
     this._register(true)
     this.setupSchemaFields()

package/src/components/DitoSidebar.vue

@@ -6,7 +6,7 @@ nav.dito-sidebar.dito-scroll-parent
       v-for="view in views"
     )
       RouterLink(
-        v-if="shouldRender(view)"
+        v-if="shouldRenderSchema(view)"
         v-slot="{ isActive, href, route }"
         custom
         :to="`/${view.path}`"

package/src/components/DitoTableHead.vue

@@ -5,7 +5,7 @@ thead.dito-table-head
       v-for="column in columns"
     )
       th(
-        v-if="shouldRender(column)"
+        v-if="shouldRenderSchema(column)"
         :class="getColumnClass(column)"
       )
         RouterLink(

package/src/components/DitoTabs.vue

@@ -4,7 +4,7 @@
     v-for="(tabSchema, key) in tabs"
   )
     RouterLink.dito-link(
-      v-if="shouldRender(tabSchema)"
+      v-if="shouldRenderSchema(tabSchema)"
       :key="key"
       :to="{ hash: `#${key}` }"
       :class="{ 'dito-active': selectedTab === key }"

package/src/components/DitoView.vue

@@ -11,7 +11,7 @@ template(
     :key="name"
   )
   .dito-view.dito-scroll-parent(
-    v-else-if="shouldRender(viewSchema)"
+    v-else-if="shouldRenderSchema(viewSchema)"
     :data-resource="sourceSchema.path"
   )
     DitoSchema(
@@ -28,7 +28,10 @@ template(
 <script>
 import DitoComponent from '../DitoComponent.js'
 import RouteMixin from '../mixins/RouteMixin.js'
-import { someSchemaComponent, isSingleComponentView } from '../utils/schema.js'
+import {
+  isSingleComponentView,
+  someNestedSchemaComponent
+} from '../utils/schema.js'
 import { hasResource } from '../utils/resource.js'
 
 // @vue/component
@@ -93,7 +96,7 @@ export default DitoComponent.component('DitoView', {
     },
 
     providesData() {
-      return someSchemaComponent(this.viewSchema, hasResource)
+      return someNestedSchemaComponent(this.viewSchema, hasResource)
     }
   },
 

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

@@ -1,11 +1,8 @@
 import {
   isObject,
-  isArray,
   isString,
   isFunction,
-  asArray,
   equals,
-  getValueAtDataPath,
   labelize,
   hyphenate,
   format
@@ -13,7 +10,7 @@ import {
 import appState from '../appState.js'
 import DitoContext from '../DitoContext.js'
 import EmitterMixin from './EmitterMixin.js'
-import { isMatchingType, convertType } from '../utils/type.js'
+import { getSchemaValue, shouldRenderSchema } from '../utils/schema.js'
 import { getResource, getMemberResource } from '../utils/resource.js'
 import { computed, reactive } from 'vue'
 
@@ -201,43 +198,15 @@ export default {
 
     getSchemaValue(
       keyOrDataPath,
-      { type, default: def, schema = this.schema, callback = true } = {}
+      { type, schema = this.schema, callback = true, default: def } = {}
     ) {
-      const types = type && asArray(type)
-      // For performance reasons, data-paths in `keyOrDataPath` can only be
-      // provided in in array format here:
-      let value = schema
-        ? isArray(keyOrDataPath)
-          ? getValueAtDataPath(schema, keyOrDataPath, () => undefined)
-          : schema[keyOrDataPath]
-        : undefined
-
-      if (value === undefined && def !== undefined) {
-        if (callback && isFunction(def) && !isMatchingType(types, def)) {
-          // Support `default()` functions for any type except `Function`:
-          def = def.call(this)
-        }
-        return def
-      }
-
-      if (isMatchingType(types, value)) {
-        return value
-      }
-      // Any schema value handled through `getSchemaValue()` can provide
-      // a function that's resolved when the value is evaluated:
-      if (callback && isFunction(value)) {
-        value = value(this.context)
-      }
-      // Now finally see if we can convert to the expect types.
-      if (types && value != null && !isMatchingType(types, value)) {
-        for (const type of types) {
-          const converted = convertType(type, value)
-          if (converted !== value) {
-            return converted
-          }
-        }
-      }
-      return value
+      return getSchemaValue(keyOrDataPath, {
+        type,
+        schema,
+        callback,
+        context: this.context,
+        default: isFunction(def) ? () => def.call(this) : def
+      })
     },
 
     getLabel(schema, name) {
@@ -263,12 +232,8 @@ export default {
       }
     },
 
-    shouldRender(schema = null) {
-      return this.getSchemaValue('if', {
-        type: Boolean,
-        default: true,
-        schema
-      })
+    shouldRenderSchema(schema = null) {
+      return shouldRenderSchema(schema, this.context)
     },
 
     shouldShow(schema = null) {

package/src/mixins/SourceMixin.js

@@ -314,7 +314,7 @@ export default {
 
   watch: {
     $route(to, from) {
-      if (from.path === to.path && from.hash === to.hash) {
+      if (this.providesData && 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.
         this.query = to.query

package/src/types/DitoTypeList.vue

@@ -57,7 +57,7 @@
             v-for="column in columns"
           )
             DitoTableCell(
-              v-if="shouldRender(column)"
+              v-if="shouldRenderSchema(column)"
               :key="column.name"
               :class="getCellClass(column)"
               :cell="column"