@koumoul/vjsf 3.10.3 → 3.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koumoul/vjsf",
-  "version": "3.10.3",
+  "version": "3.11.0",
   "description": "Generate forms for the vuetify UI library (vuejs) based on annotated JSON schemas.",
   "scripts": {
     "test": "vitest run",
@@ -71,8 +71,8 @@
     "vuetify": "^3.6.13"
   },
   "dependencies": {
-    "@json-layout/core": "~1.5.1",
-    "@json-layout/vocabulary": "~1.5.1",
+    "@json-layout/core": "~1.6.0",
+    "@json-layout/vocabulary": "~2.0.0",
     "@vueuse/core": "^12.5.0",
     "debug": "^4.3.4"
   },

package/src/compat/v2.js

@@ -17,11 +17,13 @@ const expressionKeyMappings = {
  * @param {string} expression
  * @returns {string}
  */
-const prefixExpression = (expression) => {
-  // looks like a simple expression missing the data. prefix
+const fixSimpleExpression = (expression) => {
+  // looks like a simple expression is missing the data. prefix
   if (expression.match(/^[a-z.]*$/i) && !['data', 'context', 'rootData', 'parent'].some(key => expression.startsWith(key + '.'))) {
-    return 'rootData.' + expression
+    expression = 'rootData.' + expression
   }
+  // replace a array item referenced with dot notation to bracket notation
+  expression = expression.replace(/(.*)\.(\d+)(.*)/, '$1[$2]$3')
   return expression
 }
 
@@ -44,11 +46,11 @@ const fixExpression = (expression, type = 'js-eval') => {
     expr = expr.replace(new RegExp(`${key}\\.`, 'g'), value + '.')
   }
   if (type === 'js-eval') {
-    expr = prefixExpression(expr)
+    expr = fixSimpleExpression(expr)
   }
   if (type === 'js-tpl') {
     for (const expressionMatch of expr.matchAll(/\{(.*?)\}/g)) {
-      if (expressionMatch[1] !== 'q') expr = expr.replace(expressionMatch[0], '${' + prefixExpression(expressionMatch[1]) + '}')
+      if (expressionMatch[1] !== 'q') expr = expr.replace(expressionMatch[0], '${' + fixSimpleExpression(expressionMatch[1]) + '}')
     }
   }
 

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

@@ -9,21 +9,29 @@
     >
       <template #activator="{ props }">
         <v-btn
-          color="info"
+          :color="node.layout.warning ? 'warning' : 'info'"
           :class="`vjsf-help-message-toggle`"
-          :icon="node.options.icons.infoSymbol"
+          :icon="node.layout.warning ? node.options.icons.alert : node.options.icons.infoSymbol"
           density="compact"
-          variant="flat"
+          :variant="node.layout.warning ? 'text' : 'flat'"
           :size="node.options.density === 'default' ? 28 : 24"
           :title="show ? '' : node.messages.showHelp"
           v-bind="props"
         />
       </template>
       <v-alert
-        color="info"
+        :color="node.layout.warning ? 'warning' : 'info'"
         :density="node.options.density"
       >
-        <div v-html="node.layout.help" />
+        <p
+          v-if="node.layout.warning"
+          class="mb-2"
+          v-html="node.layout.warning"
+        />
+        <div
+          v-if="node.layout.help"
+          v-html="node.layout.help"
+        />
       </v-alert>
     </v-menu>
   </div>

package/src/components/node.vue

@@ -51,13 +51,17 @@ const indent = computed(() => {
   return 6
 })
 
+const showHelp = computed(() => {
+  return (props.modelValue.layout.help || props.modelValue.layout.warning) && !props.modelValue.options.summary
+})
+
 const nodeClasses = computed(() => {
   let classes = `vjsf-node vjsf-node-${props.modelValue.layout.comp} vjsf-density-${props.modelValue.options.density}`
   if (props.modelValue.options.readOnly) classes += ' vjsf-readonly'
   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'
+  if (showHelp.value) classes += ' vjsf-has-help'
   return classes
 })
 
@@ -84,7 +88,7 @@ if (props.modelValue.layout.comp !== 'none' && !props.modelValue.slots?.componen
       />
 
       <help-message
-        v-if="modelValue.layout.help && !modelValue.options.summary"
+        v-if="showHelp"
         :node="modelValue"
       />
       <node-slot

package/src/composables/use-select-node.js

@@ -13,7 +13,7 @@ import SelectSelection from '../components/fragments/select-selection.vue'
 export default function (nodeRef, statefulLayout, avatarProps) {
   const layout = computed(() => nodeRef.value.layout)
 
-  const { inputProps, options, skeleton, localData, compSlots } = useField(nodeRef, statefulLayout, { layoutPropsMap: ['multiple'], bindData: false })
+  const { inputProps, options, skeleton, localData, compSlots } = useField(nodeRef, statefulLayout, { layoutPropsMap: ['multiple', 'placeholder'], bindData: false })
   const getItems = useGetItems(nodeRef, statefulLayout)
 
   const selectProps = computed(() => {

package/types/compat/v2.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"v2.d.ts","sourceRoot":"","sources":["../../src/compat/v2.js"],"names":[],"mappings":"AAyMA;;;;;;GAMG;AACH,kCALW,MAAM,2CAEN,MAAM,0BAoBhB;sBAjOqB,KAAK"}
+{"version":3,"file":"v2.d.ts","sourceRoot":"","sources":["../../src/compat/v2.js"],"names":[],"mappings":"AA2MA;;;;;;GAMG;AACH,kCALW,MAAM,2CAEN,MAAM,0BAoBhB;sBAnOqB,KAAK"}

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

@@ -1,7 +1,7 @@
 declare const _default: import("vue").DefineComponent<{}, {
-    modelValue: import("../../../node_modules/@json-layout/core/types/state/types.js").StateNode;
+    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;
+        modelValue?: import("../../../../node_modules/@json-layout/core/types/state/types.js").StateNode | undefined;
     };
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

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

@@ -1,11 +1,11 @@
 declare const _default: import("vue").DefineComponent<{}, {
     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;
     avatarProps: Record<string, any>;
     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 avatarProps?: Record<string, any> | undefined;
         readonly itemProps?: Record<string, any> | undefined;
     };

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

@@ -1,11 +1,11 @@
 declare const _default: import("vue").DefineComponent<{}, {
     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;
     avatarProps: Record<string, any>;
     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 avatarProps?: Record<string, any> | undefined;
         readonly last?: boolean | undefined;
     };

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

@@ -1,8 +1,8 @@
 declare const _default: import("vue").DefineComponent<{}, {
-    modelValue: import("../../node_modules/@json-layout/core/types/state/types.js").StateTree;
+    modelValue: import("../../../node_modules/@json-layout/core/types/state/types.js").StateTree;
     statefulLayout: import("../types.js").VjsfStatefulLayout;
     $props: {
-        readonly modelValue?: import("../../node_modules/@json-layout/core/types/state/types.js").StateTree | undefined;
+        readonly modelValue?: import("../../../node_modules/@json-layout/core/types/state/types.js").StateTree | undefined;
         readonly statefulLayout?: import("../types.js").VjsfStatefulLayout | undefined;
     };
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -3,12 +3,12 @@ declare const _default: import("vue").DefineComponent<{}, {
     options: import("../types.js").PartialVjsfOptions | null;
     modelValue: any;
     schema: Record<string, any>;
-    precompiledLayout: import("../../node_modules/@json-layout/core/types/compile/types.js").CompiledLayout;
+    precompiledLayout: import("../../../node_modules/@json-layout/core/types/compile/types.js").CompiledLayout;
     $props: {
         readonly options?: import("../types.js").PartialVjsfOptions | null | undefined;
         readonly modelValue?: any;
         readonly schema?: Record<string, any> | undefined;
-        readonly precompiledLayout?: import("../../node_modules/@json-layout/core/types/compile/types.js").CompiledLayout | 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<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

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

@@ -24,9 +24,9 @@ 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>;
+    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>;
     data: import("vue").ComputedRef<unknown>;
-    children: import("vue").ComputedRef<import("../../node_modules/@json-layout/core/types/state/types.js").StateNode[] | undefined>;
+    children: import("vue").ComputedRef<import("../../../node_modules/@json-layout/core/types/state/types.js").StateNode[] | undefined>;
 };
 //# sourceMappingURL=use-node.d.ts.map

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

@@ -19,7 +19,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;

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

@@ -8,9 +8,9 @@ export const emits: {
     */
     'update:state': (state: import('../types.js').VjsfStatefulLayout) => boolean;
 };
-export function useVjsf(schema: import('vue').Ref<Object>, modelValue: import('vue').Ref<any>, options: import('vue').Ref<import("../types.js").PartialVjsfOptions | null>, nodeComponents: Record<string, import('vue').Component>, emit: any, compile?: typeof import("@json-layout/core").compile | undefined, precompiledLayout?: import("vue").Ref<import("../../node_modules/@json-layout/core/types/compile/types.js").CompiledLayout, import("../../node_modules/@json-layout/core/types/compile/types.js").CompiledLayout> | undefined): {
+export function useVjsf(schema: import('vue').Ref<Object>, modelValue: import('vue').Ref<any>, options: import('vue').Ref<import("../types.js").PartialVjsfOptions | null>, nodeComponents: Record<string, import('vue').Component>, emit: any, compile?: typeof import("@json-layout/core").compile | undefined, precompiledLayout?: import("vue").Ref<import("../../../node_modules/@json-layout/core/types/compile/types.js").CompiledLayout, import("../../../node_modules/@json-layout/core/types/compile/types.js").CompiledLayout> | undefined): {
     el: import("vue").Ref<null, null>;
     statefulLayout: import("vue").ShallowRef<import("../types.js").VjsfStatefulLayout | null, import("../types.js").VjsfStatefulLayout | null>;
-    stateTree: import("vue").ShallowRef<import("../../node_modules/@json-layout/core/types/state/types.js").StateTree | null, import("../../node_modules/@json-layout/core/types/state/types.js").StateTree | null>;
+    stateTree: import("vue").ShallowRef<import("../../../node_modules/@json-layout/core/types/state/types.js").StateTree | null, import("../../../node_modules/@json-layout/core/types/state/types.js").StateTree | null>;
 };
 //# sourceMappingURL=use-vjsf.d.ts.map