@koumoul/vjsf 3.0.0-beta.31 → 3.0.0-beta.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koumoul/vjsf",
-  "version": "3.0.0-beta.31",
+  "version": "3.0.0-beta.32",
   "description": "Generate forms for the vuetify UI library (vuejs) based on annotated JSON schemas.",
   "scripts": {
     "test": "vitest",
@@ -76,7 +76,7 @@
     "vuetify": "^3.6.8"
   },
   "dependencies": {
-    "@json-layout/core": "0.26.0",
+    "@json-layout/core": "0.27.0",
     "@vueuse/core": "^10.5.0",
     "debug": "^4.3.4",
     "ejs": "^3.1.9"

package/src/components/fragments/child-subtitle.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { computed } from 'vue'
+import { isSection } from '@json-layout/core'
+
+const { modelValue } = defineProps({
+  modelValue: {
+    /** @type import('vue').PropType<import('@json-layout/core').StateNode> */
+    type: Object,
+    required: true
+  }
+})
+
+const pClass = computed(() => {
+  if (modelValue.options.density === 'default') return 'mt-1 mb-5'
+  if (modelValue.options.density === 'comfortable') return 'mb-4'
+  return 'mb-3'
+})
+</script>
+<template>
+  <p
+    v-if="isSection(modelValue) && modelValue.layout.subtitle"
+    :class="`text-subtitle ${pClass}`"
+    v-html="modelValue.layout.subtitle"
+  />
+</template>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="vjsf-help-message">
+  <div :class="`vjsf-help-message vjsf-help-message-${node.options.density}`">
     <v-slide-x-reverse-transition>
       <v-alert
         v-show="show"
@@ -11,9 +11,11 @@
     <v-btn
       color="info"
       :class="`vjsf-help-message-toggle vjsf-help-message-toggle-${node.options.density}`"
-      :icon="show ? 'mdi-close-circle' : 'mdi-information'"
+      :icon="show ? 'mdi-close' : 'mdi-information-symbol'"
+      :border="0"
+      :elevation="show ? 0 : 2"
       density="compact"
-      :size="node.options.density !== 'default' ? 'small' : 'default'"
+      :size="node.options.density === 'default' ? 28 : 24"
       :title="show ? '' : node.messages.showHelp"
       @click="show = !show"
     />
@@ -38,21 +40,33 @@ const show = ref(false)
 <style>
 .vjsf-help-message {
   position: relative;
-  min-height: 10px;
+}
+.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 {
   position: absolute;
-  top: -10px;
-  right: -4px;
+  top: 0px;
+  right: 0px;
   z-index: 1;
 }
-.vjsf-help-message-toggle-comfortable {
-  top: -4px;
-  right: -4px;
+.vjsf-help-message .v-alert {
+  padding-right: 22px;
 }
-.vjsf-help-message-toggle-compact {
-  top: -4px;
-  right: -4px;
+.vjsf-help-message-default .v-alert {
+  padding-right: 26px;
 }
+
 </style>
-../../../types.js

package/src/components/fragments/section-header.vue

@@ -40,9 +40,8 @@ const titleClass = computed(() => {
     <p
       v-if="node.layout.subtitle"
       :class="`text-subtitle mt-${titleDepthBase - node.options.titleDepth}`"
-    >
-      {{ node.layout.subtitle }}
-    </p>
+      v-html="node.layout.subtitle"
+    />
     <v-alert
       v-if="node.error && node.validated"
       type="error"

package/src/components/node.vue

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

package/src/components/nodes/stepper.vue

@@ -4,6 +4,7 @@ import { VStepper, VStepperHeader, VStepperItem, VStepperWindow, VStepperWindowI
 import { isSection } from '@json-layout/core'
 import Node from '../node.vue'
 import SectionHeader from '../fragments/section-header.vue'
+import ChildSubtitle from '../fragments/child-subtitle.vue'
 import { useDefaults } from 'vuetify'
 
 useDefaults({}, 'VjsfStepper')
@@ -62,6 +63,7 @@ const goNext = () => {
           fluid
           class="pa-0"
         >
+          <child-subtitle :model-value="child" />
           <v-row>
             <node
               v-for="grandChild of isSection(child) ? child.children : [child]"

package/src/components/nodes/tabs.vue

@@ -5,6 +5,7 @@ import { ref } from 'vue'
 import { isSection } from '@json-layout/core'
 import Node from '../node.vue'
 import SectionHeader from '../fragments/section-header.vue'
+import ChildSubtitle from '../fragments/child-subtitle.vue'
 import useCompDefaults from '../../composables/use-comp-defaults.js'
 
 useDefaults({}, 'VjsfTabs')
@@ -55,6 +56,7 @@ const tab = ref(0)
         :value="i"
       >
         <v-container fluid>
+          <child-subtitle :model-value="child" />
           <v-row>
             <node
               v-for="grandChild of isSection(child) ? child.children : [child]"

package/src/components/nodes/vertical-tabs.vue

@@ -4,6 +4,7 @@ import { VTabs, VTab, VContainer, VSheet, VWindow, VWindowItem, VRow, VIcon } fr
 import { ref } from 'vue'
 import Node from '../node.vue'
 import SectionHeader from '../fragments/section-header.vue'
+import ChildSubtitle from '../fragments/child-subtitle.vue'
 import { useDefaults } from 'vuetify'
 import useCompDefaults from '../../composables/use-comp-defaults.js'
 
@@ -59,6 +60,7 @@ const tab = ref(0)
           :value="i"
         >
           <v-container fluid>
+            <child-subtitle :model-value="child" />
             <v-row>
               <node
                 v-for="grandChild of isSection(child) ? child.children : [child]"

package/types/components/fragments/child-subtitle.vue.d.ts

@@ -0,0 +1,8 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    modelValue: import("../../../../node_modules/@json-layout/core/types/state/types.js").StateNode;
+    $props: {
+        modelValue?: import("../../../../node_modules/@json-layout/core/types/state/types.js").StateNode | undefined;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;
+//# sourceMappingURL=child-subtitle.vue.d.ts.map

package/types/components/fragments/child-subtitle.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"child-subtitle.vue.d.ts","sourceRoot":"","sources":["../../../src/components/fragments/child-subtitle.vue.js"],"names":[],"mappings":""}

package/types/components/vjsf.vue.d.ts

@@ -1,13 +1,13 @@
 declare const _default: import("vue").DefineComponent<{}, {
     $emit: ((event: "update:modelValue", data: any) => void) & ((event: "update:state", state: import("../types.js").VjsfStatefulLayout) => void);
-    options: Partial<Omit<import("../types.js").VjsfOptions, "width" | "vjsfSlots" | "onData" | "onUpdate" | "onAutofocus">> | null;
-    modelValue: any;
     schema: Record<string, any>;
+    modelValue: any;
+    options: Partial<Omit<import("../types.js").VjsfOptions, "onData" | "onUpdate" | "onAutofocus" | "width" | "vjsfSlots">> | null;
     precompiledLayout: import("../../../node_modules/@json-layout/core/types/compile/types.js").CompiledLayout;
     $props: {
-        readonly options?: Partial<Omit<import("../types.js").VjsfOptions, "width" | "vjsfSlots" | "onData" | "onUpdate" | "onAutofocus">> | null | undefined;
-        readonly modelValue?: any;
         readonly schema?: Record<string, any> | undefined;
+        readonly modelValue?: any;
+        readonly options?: Partial<Omit<import("../types.js").VjsfOptions, "onData" | "onUpdate" | "onAutofocus" | "width" | "vjsfSlots">> | null | undefined;
         readonly precompiledLayout?: import("../../../node_modules/@json-layout/core/types/compile/types.js").CompiledLayout | undefined;
     };
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;