@ditojs/admin 2.9.5 → 2.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.9.5",
+  "version": "2.10.0",
   "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": "e3e70442d05a10fd6a82c4ed58f9580b3643d4ab",
+  "gitHead": "ef290c4c55a5e65a88fdd124634ca3edae4e735f",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

package/src/components/DitoElement.vue

@@ -1,10 +1,17 @@
 <template lang="pug">
 component(
-  v-if="content"
-  :is="options.tag || tag"
+  v-if="options?.text != null"
+  :is="tagName"
   :class="classes"
   :style="styles"
 ) {{ options.text }}
+component(
+  v-else-if="options?.html != null"
+  :is="tagName"
+  :class="classes"
+  :style="styles"
+  v-html="options.html"
+)
 </template>
 
 <script>
@@ -21,7 +28,15 @@ export default DitoComponent.component('DitoElement', {
   computed: {
     options() {
       const { content } = this
-      return isObject(content) ? content : { text: content }
+      return content != null
+        ? isObject(content)
+          ? content
+          : { text: content }
+        : null
+    },
+
+    tagName() {
+      return this.options.tag || this.tag
     },
 
     classes() {

package/src/components/DitoPane.vue

@@ -296,10 +296,6 @@ export default DitoComponent.component('DitoPane', {
     padding: $form-spacing;
   }
 
-  &--padding-panel {
-    padding: $form-spacing;
-  }
-
   .dito-break {
     // `.dito-break` is rendered as <span> so we can use the
     // `.dito-container:first-of-type` selector to match the first container

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="inlined"
   :inlined="true"
   :disabled="disabled"
   :collapsed="collapsed"

package/src/types/DitoTypeSection.vue

@@ -71,7 +71,7 @@ export default DitoTypeComponent.register('section', {
     }
 
     // For animation purposes, move the padding to the contained panes.
-    .dito-pane {
+    > .dito-schema > .dito-schema-content > .dito-pane {
       padding: $form-spacing;
 
       &:has(> .dito-container--label-vertical:first-of-type) {

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]