@koumoul/vjsf 3.20.7 → 3.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koumoul/vjsf",
-  "version": "3.20.7",
+  "version": "3.21.0",
   "description": "Generate forms for the vuetify UI library (vuejs) based on annotated JSON schemas.",
   "scripts": {
     "test-tz1": "TZ=Europe/Paris vitest run",
@@ -72,8 +72,8 @@
     "vuetify": "^3.8.12"
   },
   "dependencies": {
-    "@json-layout/core": "~2.0.0",
-    "@json-layout/vocabulary": "~2.8.0",
+    "@json-layout/core": "~2.1.0",
+    "@json-layout/vocabulary": "~2.9.0",
     "@vueuse/core": "^12.5.0",
     "debug": "^4.3.4"
   },

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

@@ -5,6 +5,7 @@
       :class="`vjsf-help-message-tooltip vjsf-help-message-tooltip-${node.options.density}`"
       location="top end"
       offset="4"
+      :z-index="zIndex"
       :close-on-content-click="false"
     >
       <template #activator="{ props }">
@@ -42,8 +43,9 @@ import { VAlert } from 'vuetify/components/VAlert'
 import { VMenu } from 'vuetify/components/VMenu'
 import { VBtn } from 'vuetify/components/VBtn'
 import { ref } from 'vue'
+import useZIndexStack from '../../composables/use-z-index-stack.js'
 
-defineProps({
+const props = defineProps({
   node: {
     /** @type import('vue').PropType<import('../../types.js').VjsfNode> */
     type: Object,
@@ -51,6 +53,8 @@ defineProps({
   }
 })
 
+const zIndex = useZIndexStack(props.node.fullKey)
+
 const show = ref(false)
 </script>
 

package/src/components/fragments/select-item-header.vue

@@ -0,0 +1,28 @@
+<script setup>
+
+import { VListSubheader } from 'vuetify/components/VList'
+import VSelectItemIcon from './select-item-icon.vue'
+
+defineProps({
+  item: {
+    /** @type import('vue').PropType<import('@json-layout/vocabulary').SelectItemHeader> */
+    type: Object,
+    required: true
+  },
+  avatarProps: {
+    type: Object,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <v-list-subheader>
+    <v-select-item-icon
+      v-if="typeof item.icon === 'string'"
+      :icon="item.icon"
+      :avatar-props="avatarProps"
+    />
+    {{ item.title }}
+  </v-list-subheader>
+</template>

package/src/components/fragments/selection-group.vue

@@ -56,7 +56,7 @@ export default defineComponent({
               } else {
                 modelValue = localData.value === item.value
               }
-              checkboxes.push(h(props.type === 'switch' ? VSwitch : VCheckbox, {
+              checkboxes.push(h(/** @type {import('vue').Component} */(props.type === 'switch' ? VSwitch : VCheckbox), {
                 label: item.title,
                 hideDetails: true,
                 key: item.key,

package/src/components/fragments/text-field-menu.vue

@@ -55,14 +55,14 @@ const fieldProps = computed(() => {
   return fieldProps
 })
 
-const zIndex = useZIndexStack(() => props.modelValue.fullKey)
+const zIndex = useZIndexStack(props.modelValue.fullKey)
 
 const menuProps = computed(() => {
   return {
     ...compProps.value,
     minWidth: props.minWidth,
     maxWidth: props.maxWidth,
-    zIndex: zIndex.value,
+    zIndex,
     closeOnContentClick: false,
     disabled: true
   }

package/src/components/nodes/combobox.vue

@@ -25,7 +25,7 @@ export default defineComponent({
     const nodeRef = toRef(props, 'modelValue')
     const getItems = useGetItems(nodeRef, props.statefulLayout)
     const { inputProps, compSlots, localData, layout, options } = useNode(nodeRef, props.statefulLayout)
-    const zIndex = useZIndexStack(() => props.modelValue.fullKey)
+    const zIndex = useZIndexStack(props.modelValue.fullKey)
 
     const fieldProps = computed(() => {
       const fieldProps = { ...inputProps.value }
@@ -33,7 +33,7 @@ export default defineComponent({
       if (options.value.readOnly) {
         fieldProps.menuProps = { modelValue: false }
       } else {
-        fieldProps.menuProps = { zIndex: zIndex.value }
+        fieldProps.menuProps = { zIndex }
       }
       if (getItems.hasItems.value) {
         fieldProps.items = getItems.items.value

package/src/components/nodes/list.vue

@@ -70,7 +70,7 @@ const prepareDrag = (/** @type {number} */index) => {
   menuOpened.value = -1
 }
 
-const zIndex = useZIndexStack(() => props.modelValue.fullKey)
+const zIndex = useZIndexStack(props.modelValue.fullKey)
 
 /* manage hovered and edited items */
 // const editedItem = computed(() => activatedItems.value[fullKey.value])
@@ -495,6 +495,7 @@ const itemBorderColor = computed(() => (/** @type {import('@json-layout/core').S
         v-if="layout.listEditMode === 'dialog'"
         :model-value="editedItem !== undefined"
         v-bind="vEditDialogProps"
+        :z-index="zIndex"
       >
         <v-sheet v-bind="vEditDialogVSheetProps">
           <v-toolbar

package/src/components/nodes/number-combobox.vue

@@ -25,7 +25,7 @@ export default defineComponent({
     const nodeRef = toRef(props, 'modelValue')
     const getItems = useGetItems(nodeRef, props.statefulLayout)
     const { inputProps, compSlots, localData, layout, options } = useNode(nodeRef, props.statefulLayout, { bindData: false, layoutPropsMap: ['step', 'min', 'max'] })
-    const zIndex = useZIndexStack(() => props.modelValue.fullKey)
+    const zIndex = useZIndexStack(props.modelValue.fullKey)
 
     const fieldProps = computed(() => {
       const fieldProps = { ...inputProps.value }
@@ -34,7 +34,7 @@ export default defineComponent({
       if (options.value.readOnly) {
         fieldProps.menuProps = { modelValue: false }
       } else {
-        fieldProps.menuProps = { zIndex: zIndex.value }
+        fieldProps.menuProps = { zIndex }
       }
       if (getItems.hasItems.value) {
         fieldProps.items = getItems.items.value

package/src/components/nodes/one-of-select.vue

@@ -27,7 +27,7 @@ const props = defineProps({
 const { inputProps, localData, skeleton, children } = useNode(
   toRef(props, 'modelValue'), props.statefulLayout, { bindData: false }
 )
-const zIndex = useZIndexStack(() => props.modelValue.fullKey)
+const zIndex = useZIndexStack(props.modelValue.fullKey)
 
 /** @type import('vue').Ref<string | undefined> */
 const activeChildTree = ref(undefined)
@@ -50,7 +50,7 @@ const fieldProps = computed(() => {
   const fieldProps = { ...inputProps.value }
   fieldProps['onUpdate:modelValue'] = onChange
   if (!props.modelValue.options.readOnly) {
-    fieldProps.menuProps = { zIndex: zIndex.value }
+    fieldProps.menuProps = { zIndex }
   }
   const items = []
   for (const childTreePointer of skeleton.value.childrenTrees || []) {

package/src/components/nodes/select.vue

@@ -1,6 +1,6 @@
 <script>
 import { VSelect } from 'vuetify/components/VSelect'
-import { defineComponent, h, computed, toRef } from 'vue'
+import { defineComponent, h, computed, toRef, watch } from 'vue'
 import { useDefaults } from 'vuetify'
 import useSelectNode from '../../composables/use-select-node.js'
 import useCompDefaults from '../../composables/use-comp-defaults.js'
@@ -32,6 +32,8 @@ export default defineComponent({
       return fieldProps
     })
 
+    watch(() => fieldProps.value.items, () => console.log(fieldProps.value.items))
+
     // @ts-ignore
     return () => h(VSelect, fieldProps.value, selectSlots.value)
   }

package/src/composables/use-get-items.js

@@ -18,8 +18,11 @@ export default function (nodeRef, statefulLayout) {
 
   const fetchItems = async () => {
     loading.value = true
-    items.value = await statefulLayout.getItems(nodeRef.value, search.value)
-    loading.value = false
+    try {
+      items.value = await statefulLayout.getItems(nodeRef.value, search.value)
+    } finally {
+      loading.value = false
+    }
   }
 
   watch(() => nodeRef.value.itemsCacheKey, (newValue, oldValue) => {

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

@@ -2,6 +2,7 @@ import { computed, h } from 'vue'
 import useField from './use-node.js'
 import useGetItems from './use-get-items.js'
 import SelectItem from '../components/fragments/select-item.vue'
+import SelectItemHeader from '../components/fragments/select-item-header.vue'
 import SelectSelection from '../components/fragments/select-selection.vue'
 import useZIndexStack from './use-z-index-stack.js'
 
@@ -17,7 +18,7 @@ export default function (nodeRef, statefulLayout, avatarProps, cssPrefix) {
 
   const { inputProps, options, skeleton, localData, compSlots } = useField(nodeRef, statefulLayout, { layoutPropsMap: ['multiple', 'placeholder'], bindData: false })
   const getItems = useGetItems(nodeRef, statefulLayout)
-  const zIndex = useZIndexStack(() => nodeRef.value.fullKey)
+  const zIndex = useZIndexStack(nodeRef.value.fullKey)
 
   const selectProps = computed(() => {
     const props = { ...inputProps.value }
@@ -25,7 +26,7 @@ export default function (nodeRef, statefulLayout, avatarProps, cssPrefix) {
     if (options.value.readOnly) {
       props.menuProps = { modelValue: false }
     } else {
-      props.menuProps = { zIndex: zIndex.value }
+      props.menuProps = { zIndex }
     }
     props.clearable = props.clearable ?? !skeleton.value.required
     props.valueComparator = (/** @type {any} */a, /** @type {any} */b) => {
@@ -55,12 +56,21 @@ export default function (nodeRef, statefulLayout, avatarProps, cssPrefix) {
   const selectSlots = computed(() => {
     const slots = { ...compSlots.value }
     if (!slots.item) {
-      slots.item = (/** @type {any} */ context) => h(SelectItem, {
-        multiple: layout.value.multiple,
-        itemProps: context.props,
-        item: context.item.raw,
-        avatarProps
-      })
+      slots.item = (/** @type {any} */ context) => {
+        if (context.item.raw.header) {
+          return h(SelectItemHeader, {
+            item: context.item.raw,
+            avatarProps
+          })
+        } else {
+          return h(SelectItem, {
+            multiple: layout.value.multiple,
+            itemProps: context.props,
+            item: context.item.raw,
+            avatarProps
+          })
+        }
+      }
     }
     if (!slots.selection) {
       slots.selection = (/** @type {any} */ context) => h(SelectSelection, {

package/src/composables/use-z-index-stack.js

@@ -1,21 +1,18 @@
 // vuetify zIndex stacking is buggy (for example https://github.com/vuetifyjs/vuetify/issues/16251)
 // we try to work around this in this composable
 
-import { provide, inject, computed } from 'vue'
+import { provide, inject } from 'vue'
 
 const symbol = Symbol.for('vjsf:z-index-stack')
 
 /**
- * @param {() => string} keyGetter
+ * @param {string} fullKey
  */
-export default (keyGetter) => {
-  return computed(() => {
-    const fullKey = keyGetter()
-    const currentZIndex = inject(symbol, { zIndex: 3000, fullKey })
-    const newZIndex = currentZIndex.zIndex + 10
-    if (fullKey.length > currentZIndex.fullKey.length) {
-      provide(symbol, { zIndex: newZIndex, fullKey })
-    }
-    return newZIndex
-  })
+export default (fullKey) => {
+  const currentZIndex = inject(symbol, { zIndex: 3000, fullKey, initial: true })
+  const newZIndex = currentZIndex.zIndex + 10
+  if (currentZIndex.initial || fullKey.length > currentZIndex.fullKey.length) {
+    provide(symbol, { zIndex: newZIndex, fullKey })
+  }
+  return newZIndex
 }

package/src/styles/vjsf.css

@@ -21,8 +21,8 @@
   display: none;
 }
 .vjsf-node.vjsf-has-help {
-  padding-right: 28px!important;
+  padding-right: 30px!important;
 }
 .vjsf-node.vjsf-density-default.vjsf-has-help {
-  padding-right: 32px!important;
+  padding-right: 42px!important;
 }

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

@@ -0,0 +1,14 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    multiple: boolean;
+    itemProps: Record<string, any>;
+    item: import("../../../../node_modules/@json-layout/vocabulary/types/normalized-layout/types.js").SelectItem;
+    avatarProps: Record<string, any>;
+    $props: {
+        readonly multiple?: boolean | undefined;
+        readonly itemProps?: Record<string, any> | undefined;
+        readonly item?: import("../../../../node_modules/@json-layout/vocabulary/types/normalized-layout/types.js").SelectItem | undefined;
+        readonly avatarProps?: Record<string, any> | undefined;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;
+//# sourceMappingURL=select-item%20copy.vue.d.ts.map

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

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

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

@@ -0,0 +1,10 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    item: import("../../../../node_modules/@json-layout/vocabulary/types/normalized-layout/types.js").SelectItemHeader;
+    avatarProps: Record<string, any>;
+    $props: {
+        readonly item?: import("../../../../node_modules/@json-layout/vocabulary/types/normalized-layout/types.js").SelectItemHeader | undefined;
+        readonly avatarProps?: Record<string, any> | undefined;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;
+//# sourceMappingURL=select-item-header.vue.d.ts.map

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"use-get-items.d.ts","sourceRoot":"","sources":["../../src/composables/use-get-items.js"],"names":[],"mappings":"AAEA;;;GAGG;AACH,0CAHW,OAAO,KAAK,EAAE,GAAG,CAAC,OAAO,aAAa,EAAE,QAAQ,CAAC,kBACjD,OAAO,aAAa,EAAE,kBAAkB;;;;;wCA8BtC,GAAG,aACH,GAAG;EAiBf"}
+{"version":3,"file":"use-get-items.d.ts","sourceRoot":"","sources":["../../src/composables/use-get-items.js"],"names":[],"mappings":"AAEA;;;GAGG;AACH,0CAHW,OAAO,KAAK,EAAE,GAAG,CAAC,OAAO,aAAa,EAAE,QAAQ,CAAC,kBACjD,OAAO,aAAa,EAAE,kBAAkB;;;;;wCAiCtC,GAAG,aACH,GAAG;EAiBf"}

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

@@ -1 +1 @@
-{"version":3,"file":"use-select-node.d.ts","sourceRoot":"","sources":["../../src/composables/use-select-node.js"],"names":[],"mappings":"AAOA;;;;;;GAMG;AACH,0CALW,OAAO,KAAK,EAAE,GAAG,CAAC,OAAO,aAAa,EAAE,cAAc,CAAC,kBACvD,OAAO,aAAa,EAAE,kBAAkB,eACxC,GAAG,aACH,gBAAgB,GAAG,UAAU;;;;;;;;;;;;;;;;;;;;EAiEvC"}
+{"version":3,"file":"use-select-node.d.ts","sourceRoot":"","sources":["../../src/composables/use-select-node.js"],"names":[],"mappings":"AAQA;;;;;;GAMG;AACH,0CALW,OAAO,KAAK,EAAE,GAAG,CAAC,OAAO,aAAa,EAAE,cAAc,CAAC,kBACvD,OAAO,aAAa,EAAE,kBAAkB,eACxC,GAAG,aACH,gBAAgB,GAAG,UAAU;;;;;;;;;;;;;;;;;;;;EA0EvC"}

package/types/composables/use-z-index-stack.d.ts

@@ -1,3 +1,3 @@
-declare function _default(keyGetter: () => string): import("vue").ComputedRef<number>;
+declare function _default(fullKey: string): number;
 export default _default;
 //# sourceMappingURL=use-z-index-stack.d.ts.map

package/types/composables/use-z-index-stack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-z-index-stack.d.ts","sourceRoot":"","sources":["../../src/composables/use-z-index-stack.js"],"names":[],"mappings":"AAUe,qCAFJ,MAAM,MAAM,qCAYtB"}
+{"version":3,"file":"use-z-index-stack.d.ts","sourceRoot":"","sources":["../../src/composables/use-z-index-stack.js"],"names":[],"mappings":"AAUe,mCAFJ,MAAM,UAShB"}