@koumoul/vjsf 3.0.0-beta.18 → 3.0.0-beta.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koumoul/vjsf",
-  "version": "3.0.0-beta.18",
+  "version": "3.0.0-beta.19",
   "description": "Generate forms for the vuetify UI library (vuejs) based on annotated JSON schemas.",
   "scripts": {
     "test": "vitest",

package/src/compat/v2.js

@@ -9,7 +9,7 @@ const Ajv = /** @type {typeof ajvModule.default} */ (ajvModule)
 /**
  *
  * @param {string} expression
- * @returns {{type: string, expr: string, pure: boolean}}
+ * @returns {{type: 'js-eval' | undefined, expr: string, pure: boolean}}
  */
 const fiexEvalExpression = (expression) => {
   let expr = expression

package/src/components/fragments/help-message.vue

@@ -4,15 +4,17 @@
       <v-alert
         v-show="show"
         color="info"
+        :density="node.options.density"
       >
         <div v-html="node.layout.help" />
       </v-alert>
     </v-slide-x-reverse-transition>
     <v-btn
       color="info"
-      class="vjsf-help-message-toggle"
+      :class="`vjsf-help-message-toggle vjsf-help-message-toggle-${node.options.density}`"
       :icon="show ? 'mdi-close-circle' : 'mdi-information'"
       density="compact"
+      :size="node.options.density !== 'default' ? 'small' : 'default'"
       :title="show ? '' : node.messages.showHelp"
       @click="show = !show"
     />
@@ -45,5 +47,13 @@ const show = ref(false)
   right: -4px;
   z-index: 1;
 }
+.vjsf-help-message-toggle-comfortable {
+  top: -4px;
+  right: -4px;
+}
+.vjsf-help-message-toggle-compact {
+  top: -4px;
+  right: -4px;
+}
 </style>
 ../../../types.js

package/src/components/node.vue

@@ -56,7 +56,7 @@ if (props.modelValue.layout.comp !== 'none' && !props.statefulLayout.options.nod
     />
 
     <help-message
-      v-if="modelValue.layout.help"
+      v-if="modelValue.layout.help && !modelValue.options.summary"
       :node="modelValue"
       :class="beforeAfterClasses[modelValue.options.density]"
     />

package/src/components/nodes/list.vue

@@ -77,7 +77,7 @@ const duplicateItem = (child, childIndex) => {
   menuOpened.value = -1
 }
 
-const itemBorderColor = computed(() => (child, childIndex) => {
+const itemBorderColor = computed(() => (/** @type {import('@json-layout/core').StateNode} */child, /** @type {number} */childIndex) => {
   if (editedItem.value === childIndex) return theme.current.value.colors.primary
   if (child.validated && (child.error || child.childError)) return theme.current.value.colors.error
   return 'transparent'
@@ -86,7 +86,10 @@ const itemBorderColor = computed(() => (child, childIndex) => {
 </script>
 
 <template>
-  <v-sheet :elevation="1">
+  <v-sheet
+    :elevation="2"
+    rounded
+  >
     <v-list :density="modelValue.options.density">
       <v-list-subheader v-if="modelValue.layout.title">
         {{ modelValue.layout.title }}