@koumoul/vjsf 3.7.0 → 3.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koumoul/vjsf",
-  "version": "3.7.0",
+  "version": "3.8.0",
   "description": "Generate forms for the vuetify UI library (vuejs) based on annotated JSON schemas.",
   "scripts": {
     "test": "vitest run",
@@ -71,7 +71,7 @@
     "vuetify": "^3.6.13"
   },
   "dependencies": {
-    "@json-layout/core": "~1.4.0",
+    "@json-layout/core": "~1.4.1",
     "@vueuse/core": "^10.5.0",
     "debug": "^4.3.4"
   },

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

@@ -1,11 +1,14 @@
 <script setup>
-import { computed } from 'vue'
+import Debug from 'debug'
+import { computed, onRenderTriggered } from 'vue'
 import { useTheme, useDefaults } from 'vuetify'
 import { VCol } from 'vuetify/components/VGrid'
 import { VDefaultsProvider } from 'vuetify/components/VDefaultsProvider'
 import NodeSlot from './fragments/node-slot.vue'
 import HelpMessage from './fragments/help-message.vue'
 
+const debugRender = Debug('vjsf:render')
+
 useDefaults({}, 'VjsfNode')
 
 const props = defineProps({
@@ -30,6 +33,13 @@ const beforeAfterClasses = {
 
 const theme = useTheme()
 
+if (debugRender.enabled) {
+  debugRender('setup node', props.modelValue.fullKey, props.modelValue.layout.comp)
+  onRenderTriggered(() => {
+    debugRender('render node', props.modelValue.fullKey, props.modelValue.layout.comp)
+  })
+}
+
 const indent = computed(() => {
   if (props.modelValue.parentFullKey === null) return 0
   if (!props.modelValue.options.indent) return 0
@@ -47,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/components/nodes/textarea.vue

@@ -24,15 +24,15 @@ export default defineComponent({
     const textarea = ref(null)
 
     const { inputProps, localData, compSlots, options } = useNode(
-      toRef(props, 'modelValue'), props.statefulLayout, { layoutPropsMap: ['placeholder'] }
+      toRef(props, 'modelValue'), props.statefulLayout, { layoutPropsMap: ['placeholder', 'rows'] }
     )
 
-    const rows = computed(() => options.value.readOnly && options.value.summary ? 3 : undefined)
+    const defaultRows = computed(() => options.value.readOnly && options.value.summary ? 3 : undefined)
 
     const fullProps = computed(() => {
       const fullProps = { ...inputProps.value }
       fullProps.ref = textarea
-      fullProps.rows = rows.value
+      fullProps.rows = fullProps.rows ?? defaultRows.value
       fullProps.modelValue = localData.value
       return fullProps
     })

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;
 }

package/types/components/fragments/select-item.vue.d.ts

@@ -1,10 +1,10 @@
 declare const _default: import("vue").DefineComponent<any, {
     multiple: boolean;
-    item: import("../../../node_modules/@json-layout/vocabulary/types/normalized-layout/types.js").SelectItem;
+    item: import("../../../../node_modules/@json-layout/vocabulary/types/normalized-layout/types.js").SelectItem;
     itemProps: Record<string, any>;
     $props: {
         readonly multiple?: boolean | undefined;
-        readonly item?: import("../../../node_modules/@json-layout/vocabulary/types/normalized-layout/types.js").SelectItem | undefined;
+        readonly item?: import("../../../../node_modules/@json-layout/vocabulary/types/normalized-layout/types.js").SelectItem | undefined;
         readonly itemProps?: Record<string, any> | undefined;
     };
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<any> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/types/components/fragments/select-selection.vue.d.ts

@@ -1,10 +1,10 @@
 declare const _default: import("vue").DefineComponent<any, {
     multiple: boolean;
-    item: import("../../../node_modules/@json-layout/vocabulary/types/normalized-layout/types.js").SelectItem;
+    item: import("../../../../node_modules/@json-layout/vocabulary/types/normalized-layout/types.js").SelectItem;
     last: boolean;
     $props: {
         readonly multiple?: boolean | undefined;
-        readonly item?: import("../../../node_modules/@json-layout/vocabulary/types/normalized-layout/types.js").SelectItem | undefined;
+        readonly item?: import("../../../../node_modules/@json-layout/vocabulary/types/normalized-layout/types.js").SelectItem | undefined;
         readonly last?: boolean | undefined;
     };
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<any> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/types/composables/use-get-items.d.ts

@@ -4,7 +4,7 @@
  */
 export default function _default(nodeRef: import('vue').Ref<import('../types.js').VjsfNode>, statefulLayout: import('../types.js').VjsfStatefulLayout): {
     hasItems: import("vue").ComputedRef<boolean>;
-    items: import("vue").Ref<import("../../node_modules/@json-layout/vocabulary/types/normalized-layout/types.js").SelectItems, import("../../node_modules/@json-layout/vocabulary/types/normalized-layout/types.js").SelectItems>;
+    items: import("vue").Ref<import("../../../node_modules/@json-layout/vocabulary/types/normalized-layout/types.js").SelectItems, import("../../../node_modules/@json-layout/vocabulary/types/normalized-layout/types.js").SelectItems>;
     loading: import("vue").Ref<boolean, boolean>;
     search: import("vue").Ref<string, string>;
     prepareSelectedItem: (selectedItem: any, itemValue: any) => any;

package/types/composables/use-node.d.ts

@@ -25,7 +25,7 @@ export default function _default(nodeRef: import('vue').Ref<import('../types.js'
     compSlots: import("vue").ComputedRef<Record<string, any>>;
     options: import("vue").ComputedRef<Required<import("../types.js").VjsfOptions>>;
     skeleton: import("vue").ComputedRef<import("../../node_modules/@json-layout/core/types/compile/types.js").SkeletonNode>;
-    layout: import("vue").ComputedRef<import("../../node_modules/@json-layout/vocabulary/types/normalized-layout/types.js").BaseCompObject>;
+    layout: import("vue").ComputedRef<import("../../../node_modules/@json-layout/vocabulary/types/normalized-layout/types.js").BaseCompObject>;
     data: import("vue").ComputedRef<unknown>;
     children: import("vue").ComputedRef<import("../../node_modules/@json-layout/core/types/state/types.js").StateNode[] | undefined>;
 };

package/types/composables/use-select-node.d.ts

@@ -18,7 +18,7 @@ export default function _default(nodeRef: import('vue').Ref<import('../types.js'
     }>;
     getItems: {
         hasItems: import("vue").ComputedRef<boolean>;
-        items: import("vue").Ref<import("../../node_modules/@json-layout/vocabulary/types/normalized-layout/types.js").SelectItems, import("../../node_modules/@json-layout/vocabulary/types/normalized-layout/types.js").SelectItems>;
+        items: import("vue").Ref<import("../../../node_modules/@json-layout/vocabulary/types/normalized-layout/types.js").SelectItems, import("../../../node_modules/@json-layout/vocabulary/types/normalized-layout/types.js").SelectItems>;
         loading: import("vue").Ref<boolean, boolean>;
         search: import("vue").Ref<string, string>;
         prepareSelectedItem: (selectedItem: any, itemValue: any) => any;