@ditojs/admin 2.26.1 → 2.26.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.26.1",
+  "version": "2.26.2",
   "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",
@@ -83,7 +83,7 @@
     "vite": "^5.2.8"
   },
   "types": "types",
-  "gitHead": "8f2e07e3774d0e03b24ee78cffe60c5edacb93ae",
+  "gitHead": "7fd7a0b9a8727e1a27a8e78e7381f58c95017499",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

package/src/components/DitoForm.vue

@@ -1,82 +1,64 @@
 <template lang="pug">
-DefineTemplate
-  //- Prevent implicit submission of the form, for example when typing enter
-  //- in an input field.
-  //- https://stackoverflow.com/a/51507806
-  button(
-    v-show="false"
-    type="submit"
-    disabled
-  )
-  DitoSchema(
-    :schema="schema"
-    :dataPath="dataPath"
-    :data="data"
-    :meta="meta"
-    :store="store"
-    :padding="isInlinedSource ? 'nested' : 'root'"
-    :disabled="isLoading"
-    :scrollable="!isInlinedSource"
-    generateLabels
-  )
-    template(#buttons)
-      DitoButtons.dito-buttons-round.dito-buttons-large.dito-buttons-main(
-        :class="{ 'dito-buttons-sticky': !isInlinedSource }"
-        :buttons="buttonSchemas"
-        :dataPath="dataPath"
-        :data="data"
-        :meta="meta"
-        :store="store"
-        :disabled="isLoading"
-      )
-
 .dito-form.dito-scroll-parent(
-  :class="{ 'dito-form-inlined': isInlinedSource }"
+  :class="{ 'dito-form-nested': isNestedRoute }"
   :data-resource="sourceSchema.path"
 )
-  template(
-    v-if="isInlinedSource"
+  //- Only render a router-view here if this isn't the last data route and not a
+  //- nested form route, which will appear elsewhere in its own view.
+  RouterView(
+    v-if="!isLastUnnestedRoute && !isNestedRoute"
+    v-show="!isActive"
   )
-    //- Use a <div> for inlined forms, as we shouldn't nest actual <form> tags.
-    //- NOTE: inlined form components are kept alive by using `v-show` instead
-    //- of `v-if` here, so event handling and other things still work with
-    //- inlined editing.
-    div(
-      v-show="isActive"
-    )
-      ReuseTemplate
-  template(
-    v-else
+  //- NOTE: Nested form components are kept alive by using `v-show` instead of
+  //- `v-if` here, so event handling and other things still work with nested
+  //- editing.
+  DitoFormInner(
+    v-show="isActive"
+    :nested="isNestedRoute"
   )
-    //- Only render a router-view here if this isn't the last data route and not
-    //- an inlined form route, which will appear elsewhere in its own view.
-    RouterView(
-      v-if="!isLastUnnestedRoute"
-      v-show="!isActive"
+    //- Prevent implicit submission of the form, for example when typing enter
+    //- in an input field.
+    //- https://stackoverflow.com/a/51507806
+    button(
+      v-show="false"
+      type="submit"
+      disabled
     )
-    form.dito-scroll-parent(
-      v-show="isActive"
-      @submit.prevent
+    DitoSchema(
+      :schema="schema"
+      :dataPath="dataPath"
+      :data="data"
+      :meta="meta"
+      :store="store"
+      :padding="isNestedRoute ? 'nested' : 'root'"
+      :disabled="isLoading"
+      :scrollable="!isNestedRoute"
+      generateLabels
     )
-      ReuseTemplate
+      template(#buttons)
+        DitoButtons.dito-buttons-round.dito-buttons-large.dito-buttons-main(
+          :class="{ 'dito-buttons-sticky': !isNestedRoute }"
+          :buttons="buttonSchemas"
+          :dataPath="dataPath"
+          :data="data"
+          :meta="meta"
+          :store="store"
+          :disabled="isLoading"
+        )
 </template>
 
 <script>
-import { createReusableTemplate } from '@vueuse/core'
 import { clone, capitalize, parseDataPath, assignDeeply } from '@ditojs/utils'
 import DitoComponent from '../DitoComponent.js'
 import RouteMixin from '../mixins/RouteMixin.js'
 import ResourceMixin from '../mixins/ResourceMixin.js'
 import { getResource, getMemberResource } from '../utils/resource.js'
-import { getButtonSchemas, isInlined, isObjectSource } from '../utils/schema.js'
+import { getButtonSchemas, isObjectSource } from '../utils/schema.js'
 import { resolvePath } from '../utils/path.js'
 
-const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
-
 // @vue/component
 export default DitoComponent.component('DitoForm', {
   mixins: [RouteMixin, ResourceMixin],
-  components: { DefineTemplate, ReuseTemplate },
 
   data() {
     return {
@@ -143,10 +125,6 @@ export default DitoComponent.component('DitoForm', {
       )
     },
 
-    isInlinedSource() {
-      return isInlined(this.sourceSchema)
-    },
-
     isActive() {
       return this.isLastRoute || this.isLastUnnestedRoute
     },

package/src/components/DitoFormInner.vue

@@ -0,0 +1,26 @@
+<template lang="pug">
+//- Use a <div> for nested forms, as we shouldn't nest actual <form> tags.
+div(
+  v-if="nested"
+)
+  slot
+form.dito-scroll-parent(
+  v-else
+  @submit.prevent
+)
+  slot
+</template>
+
+<script>
+import DitoComponent from '../DitoComponent.js'
+
+// @vue/component
+export default DitoComponent.component('DitoFormInner', {
+  props: {
+    nested: {
+      type: Boolean,
+      default: false
+    }
+  }
+})
+</script>

package/src/components/{DitoFormInlined.vue → DitoFormNested.vue}

@@ -3,14 +3,14 @@ import DitoComponent from '../DitoComponent.js'
 import DitoForm from './DitoForm.vue'
 
 // @vue/component
-export default DitoComponent.component('DitoFormInlined', {
+export default DitoComponent.component('DitoFormNested', {
   extends: DitoForm
 })
 </script>
 
 <style lang="scss">
-.dito-form-inlined {
-  // No scrolling in inlined forms, and prevent open .multiselect from
+.dito-form-nested {
+  // No scrolling inside nested forms, and prevent open .multiselect from
   // being cropped.
   overflow: visible;
 }

package/src/components/index.js

@@ -27,7 +27,8 @@ export { default as DitoCreateButton } from './DitoCreateButton.vue'
 export { default as DitoClipboard } from './DitoClipboard.vue'
 export { default as DitoView } from './DitoView.vue'
 export { default as DitoForm } from './DitoForm.vue'
-export { default as DitoFormInlined } from './DitoFormInlined.vue'
+export { default as DitoFormInner } from './DitoFormInner.vue'
+export { default as DitoFormNested } from './DitoFormNested.vue'
 export { default as DitoErrors } from './DitoErrors.vue'
 export { default as DitoScopes } from './DitoScopes.vue'
 export { default as DitoPagination } from './DitoPagination.vue'

package/src/mixins/RouteMixin.js

@@ -60,6 +60,10 @@ export default {
       return false
     },
 
+    isNestedRoute() {
+      return this.meta.nested
+    },
+
     isView() {
       return false
     },

package/src/mixins/SourceMixin.js

@@ -617,7 +617,7 @@ export default {
           isListSource(schema) ? param : null
         ),
         component: DitoComponent.component(
-          nested ? 'DitoFormInlined' : 'DitoForm'
+          nested ? 'DitoFormNested' : 'DitoForm'
         ),
         meta: formMeta
       }

package/src/styles/_table.scss

@@ -219,6 +219,6 @@ table.dito-table {
 }
 
 table.dito-table table.dito-table,
-.dito-form-inlined table.dito-table {
+.dito-form-nested table.dito-table {
   margin: 0;
 }