@ditojs/admin 2.2.12 → 2.2.13

package/package.json

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

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

@@ -226,13 +226,15 @@ export default DitoComponent.component('DitoContainer', {
       --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);
+    &: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

@@ -20,7 +20,7 @@
       v-if="schema.break === 'before'"
     )
     DitoContainer(
-      v-if="shouldRender(schema)"
+      v-if="shouldRenderSchema(schema)"
       :key="nestedDataPath"
       v-resize="event => onResize(index, event)"
       :schema="schema"

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

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/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"

package/src/utils/schema.js

@@ -4,6 +4,7 @@ import TypeMixin from '../mixins/TypeMixin.js'
 import { getUid } from './uid.js'
 import { SchemaGraph } from './SchemaGraph.js'
 import { appendDataPath, isTemporaryId } from './data.js'
+import { isMatchingType, convertType } from './type.js'
 import {
   isObject,
   isString,
@@ -11,10 +12,12 @@ import {
   isFunction,
   isPromise,
   isModule,
+  asArray,
   clone,
   merge,
   camelize,
-  mapConcurrently
+  mapConcurrently,
+  getValueAtDataPath
 } from '@ditojs/utils'
 import { markRaw } from 'vue'
 
@@ -42,7 +45,7 @@ export function iterateSchemaComponents(schemas, callback) {
       if (res !== undefined) {
         return res
       }
-    } else {
+    } else if (isSchema(schema)) {
       for (const [name, component] of Object.entries(schema.components || {})) {
         const res = callback(component, name, 1)
         if (res !== undefined) {
@@ -59,33 +62,37 @@ export function iterateNestedSchemaComponents(schema, callback) {
     : undefined
 }
 
-export function findSchemaComponent(schema, callback) {
+export function findNestedSchemaComponent(schema, callback) {
   return (
     iterateNestedSchemaComponents(
       schema,
       component => (callback(component) ? component : undefined)
-    ) || null
+    ) ?? null
   )
 }
 
-export function someSchemaComponent(schema, callback) {
+export function someNestedSchemaComponent(schema, callback) {
   return (
     iterateNestedSchemaComponents(
       schema,
       component => (callback(component) ? true : undefined)
-    ) === true
+    ) ?? false
   )
 }
 
-export function everySchemaComponent(schema, callback) {
+export function everyNestedSchemaComponent(schema, callback) {
   return (
     iterateNestedSchemaComponents(
       schema,
       component => (callback(component) ? undefined : false)
-    ) !== false
+    ) ?? true
   )
 }
 
+export function hasNestedSchemaComponents(schema) {
+  return someNestedSchemaComponent(schema, () => true) ?? false
+}
+
 export function isSchema(schema) {
   return isObject(schema) && isString(schema.type)
 }
@@ -107,7 +114,7 @@ export function isPanel(schema) {
 }
 
 export function getSchemaIdentifier(schema) {
-  return schema.name || schema.label || schema.type
+  return JSON.stringify(schema)
 }
 
 export async function resolveSchema(schema, unwrapModule = false) {
@@ -309,11 +316,12 @@ export async function processForms(api, schema, level) {
     )
   } else if (form) {
     form = schema.form = await processForm(api, form)
-  } else if (components) {
+  } else if (isObject(components)) {
     // NOTE: Processing forms in computed components is not supported, since it
     // only can be computed in conjunction with actual data.
-    if (isObject(components)) {
-      form = { components }
+    form = {
+      type: 'form',
+      components
     }
   }
 
@@ -398,7 +406,7 @@ export function getViewFormSchema(schema, context) {
   return viewSchema
     ? // NOTE: Views can have tabs, in which case the view component is nested
       // in one of the tabs, go find it.
-      findSchemaComponent(viewSchema, hasFormSchema) || null
+      findNestedSchemaComponent(viewSchema, hasFormSchema) || null
     : null
 }
 
@@ -478,6 +486,63 @@ export function keepAligned(schema) {
   return !!getTypeOptions(schema)?.keepAligned
 }
 
+export function getSchemaValue(
+  keyOrDataPath,
+  { type, schema, callback = true, default: def, context } = {}
+) {
+  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(context)
+    }
+    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(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
+}
+
+export function shouldRenderSchema(schema, context) {
+  return (
+    getSchemaValue('if', {
+      type: Boolean,
+      schema,
+      context,
+      default: true
+    }) && (
+      !hasNestedSchemaComponents(schema) ||
+      someNestedSchemaComponent(schema, component =>
+        shouldRenderSchema(component, context)
+      )
+    )
+  )
+}
+
 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
@@ -542,8 +607,8 @@ export function computeValue(schema, data, name, dataPath, {
       })
     )
     if (value !== undefined) {
-      // Access `data[name]` directly instead of `this.value = …` to update the
-      // value without calling parse():
+      // Access `data[name]` directly to update the value without calling
+      // parse():
       data[name] = value
     }
   }