@ditojs/admin 2.9.6 → 2.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.9.6",
+  "version": "2.10.1",
   "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",
@@ -33,8 +33,8 @@
     "not ie_mob > 0"
   ],
   "dependencies": {
-    "@ditojs/ui": "^2.9.3",
-    "@ditojs/utils": "^2.9.0",
+    "@ditojs/ui": "^2.10.0",
+    "@ditojs/utils": "^2.10.0",
     "@kyvg/vue3-notification": "^2.9.1",
     "@lk77/vue3-color": "^3.0.6",
     "@tiptap/core": "^2.0.3",
@@ -62,28 +62,28 @@
     "codeflask": "^1.4.1",
     "filesize": "^10.0.7",
     "filesize-parser": "^1.5.0",
-    "focus-trap": "^7.4.1",
+    "focus-trap": "^7.4.3",
     "nanoid": "^4.0.2",
     "sortablejs": "^1.15.0",
     "tinycolor2": "^1.6.0",
     "tippy.js": "^6.3.7",
-    "type-fest": "^3.10.0",
-    "vue": "^3.3.2",
+    "type-fest": "^3.11.1",
+    "vue": "^3.3.4",
     "vue-multiselect": "^3.0.0-beta.2",
-    "vue-router": "^4.2.0",
+    "vue-router": "^4.2.2",
     "vue-upload-component": "^3.1.8"
   },
   "devDependencies": {
-    "@ditojs/build": "^2.9.0",
+    "@ditojs/build": "^2.10.0",
     "@vitejs/plugin-vue": "^4.2.3",
-    "@vue/compiler-sfc": "^3.3.2",
+    "@vue/compiler-sfc": "^3.3.4",
     "pug": "^3.0.2",
     "sass": "1.62.1",
-    "typescript": "^5.0.4",
-    "vite": "^4.3.7"
+    "typescript": "^5.1.3",
+    "vite": "^4.3.9"
   },
   "types": "types",
-  "gitHead": "778b9bde6648df4f27596e38905261ef2c919eb1",
+  "gitHead": "add6bbbdd21d0980af235994b96c4641ace5eeda",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

package/src/components/DitoPane.vue

@@ -292,12 +292,17 @@ export default DitoComponent.component('DitoPane', {
     }
   }
 
-  &--padding-nested {
-    padding: $form-spacing;
+  &--padding-inlined {
+    padding: 0;
   }
 
-  &--padding-panel {
+  &--padding-nested {
     padding: $form-spacing;
+
+    &:has(> .dito-container--label-vertical:first-of-type) {
+      // Reduce top spacing when the first row has labels.
+      padding-top: $form-spacing-half;
+    }
   }
 
   .dito-break {

package/src/components/DitoPanel.vue

@@ -12,7 +12,7 @@ component.dito-panel(
     :data="panelData"
     :meta="meta"
     :store="store"
-    padding="panel"
+    padding="nested"
     :disabled="disabled"
     :hasOwnData="hasOwnData"
     generateLabels

package/src/components/DitoSchemaInlined.vue

@@ -7,6 +7,7 @@ DitoSchema.dito-schema-inlined(
   :meta="meta"
   :store="store"
   :label="isCompact ? null : label"
+  :padding="padding ?? 'inlined'"
   :inlined="true"
   :disabled="disabled"
   :collapsed="collapsed"
@@ -48,6 +49,7 @@ export default DitoComponent.component('DitoSchemaInlined', {
     meta: { type: Object, required: true },
     store: { type: Object, required: true },
     label: { type: [String, Object], default: null },
+    padding: { type: String, default: null },
     disabled: { type: Boolean, required: true },
     collapsed: { type: Boolean, default: false },
     collapsible: { type: Boolean, default: false },

package/src/types/DitoTypeSection.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-.dito-section(:class="{ 'dito-section--labelled': !!schema.label }")
+.dito-section(:class="{ 'dito-section--labelled': hasLabel }")
   DitoSchemaInlined.dito-section__schema(
     :label="label"
     :schema="getItemFormSchema(schema, item, context)"
@@ -7,6 +7,7 @@
     :data="item"
     :meta="meta"
     :store="store"
+    :padding="hasLabel ? 'nested' : 'inlined'"
     :disabled="disabled"
     :collapsed="collapsed"
     :collapsible="collapsible"
@@ -31,6 +32,10 @@ export default DitoTypeComponent.register('section', {
       return this.nested ? this.value : this.data
     },
 
+    hasLabel() {
+      return !!this.schema.label
+    },
+
     collapsible: getSchemaAccessor('collapsible', {
       type: Boolean,
       default: null, // so that `??` below can do its thing:
@@ -69,16 +74,6 @@ export default DitoTypeComponent.register('section', {
     &:has(.dito-schema--open) {
       border-color: $border-color;
     }
-
-    // For animation purposes, move the padding to the contained panes.
-    .dito-pane {
-      padding: $form-spacing;
-
-      &:has(> .dito-container--label-vertical:first-of-type) {
-        // Reduce top spacing when the first row has labels.
-        padding-top: $form-spacing-half;
-      }
-    }
   }
 }
 </style>

package/src/utils/schema.js

@@ -133,7 +133,10 @@ export async function resolveSchema(schema, unwrapModule = false) {
     schema = { ...schema }
     // Unwrap default or named schema
     if (!schema.name && (unwrapModule || schema.default)) {
-      const keys = Object.keys(schema)
+      // Filter out internal key added by vite / vue 3 plugin when changing
+      // code in a dynamically imported vue component, see:
+      // https://github.com/vitejs/vite-plugin-vue/blob/abdf5f4f32d02af641e5f60871bde14535569b1e/packages/plugin-vue/src/main.ts#L133
+      const keys = Object.keys(schema).filter(key => key !== '_rerender_only')
       if (keys.length === 1) {
         const name = keys[0]
         schema = schema[name]