@koumoul/vjsf 3.7.1 → 3.8.0

package/package.json

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

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

@@ -1,30 +1,37 @@
 <template>
   <div :class="`vjsf-help-message vjsf-help-message-${node.options.density}`">
-    <v-slide-x-reverse-transition>
+    <v-menu
+      v-model="show"
+      :class="`vjsf-help-message-tooltip vjsf-help-message-tooltip-${node.options.density}`"
+      location="top end"
+      offset="4"
+      :close-on-content-click="false"
+    >
+      <template #activator="{ props }">
+        <v-btn
+          color="info"
+          :class="`vjsf-help-message-toggle`"
+          :icon="node.options.icons.infoSymbol"
+          density="compact"
+          variant="flat"
+          :size="node.options.density === 'default' ? 28 : 24"
+          :title="show ? '' : node.messages.showHelp"
+          v-bind="props"
+        />
+      </template>
       <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 vjsf-help-message-toggle-${node.options.density}`"
-      :icon="show ? node.options.icons.close : node.options.icons.infoSymbol"
-      :border="0"
-      :elevation="show ? 0 : 2"
-      density="compact"
-      :size="node.options.density === 'default' ? 28 : 24"
-      :title="show ? '' : node.messages.showHelp"
-      @click="show = !show"
-    />
+    </v-menu>
   </div>
 </template>
 
 <script setup>
-import { VSlideXReverseTransition } from 'vuetify/components/transitions'
 import { VAlert } from 'vuetify/components/VAlert'
+import { VMenu } from 'vuetify/components/VMenu'
 import { VBtn } from 'vuetify/components/VBtn'
 import { ref } from 'vue'
 
@@ -41,34 +48,19 @@ const show = ref(false)
 
 <style>
 .vjsf-help-message {
+  height: 0;
   position: relative;
+  width: 100%;
 }
-.vjsf-help-message-compact {
-  margin-top: 2px;
-  margin-bottom: 2px;
-  min-height:24px;
-}
-.vjsf-help-message-comfortable {
-  margin-top: 4px;
-  margin-bottom: 4px;
-  min-height:24px;
-}
-.vjsf-help-message-default {
-  margin-top: 6px;
-  margin-bottom: 6px;
-  min-height:28px;
-}
-.vjsf-help-message-toggle {
+.vjsf-help-message .vjsf-help-message-toggle {
   position: absolute;
   top: 0px;
-  right: 0px;
+  right: -26px;
   z-index: 1;
 }
-.vjsf-help-message .v-alert {
-  padding-right: 22px;
-}
-.vjsf-help-message-default .v-alert {
-  padding-right: 26px;
+
+.vjsf-help-message.vjsf-help-message-default .vjsf-help-message-toggle {
+  right: -30px;
 }
 
 </style>

package/src/components/node.vue

@@ -57,6 +57,7 @@ const nodeClasses = computed(() => {
   if (props.modelValue.options.summary) classes += ' vjsf-summary'
   if (theme.current.value.dark) classes += ' vjsf-dark'
   if (indent.value) classes += ' ml-' + indent.value
+  if (props.modelValue.layout.help && !props.modelValue.options.summary) classes += ' vjsf-has-help'
   return classes
 })
 

package/src/styles/vjsf.css

@@ -16,4 +16,10 @@
 }
 .vjsf-input--readonly.v-input--disabled .v-field__clearable {
   display: none;
+}
+.vjsf-node.vjsf-has-help {
+  padding-right: 28px!important;
+}
+.vjsf-node.vjsf-density-default.vjsf-has-help {
+  padding-right: 32px!important;
 }