@koumoul/vjsf 3.20.2 → 3.20.3

package/package.json

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

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

@@ -20,13 +20,17 @@ defineProps({
   avatarProps: {
     type: Object,
     required: true
+  },
+  cssPrefix: {
+    type: String,
+    required: true
   }
 })
 
 </script>
 
 <template>
-  <span class="v-select__selection-text">
+  <span :class="cssPrefix + '__selection-text'">
     <v-select-item-icon
       v-if="typeof item.icon === 'string'"
       :icon="item.icon"
@@ -35,7 +39,7 @@ defineProps({
     {{ item.title ?? item.key ?? item.value }}
     <span
       v-if="multiple && !last"
-      class="v-select__selection-comma"
+      :class="cssPrefix + '__selection-comma'"
     >,</span>
   </span>
 </template>

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

@@ -3,6 +3,7 @@ import { VMenu } from 'vuetify/components/VMenu'
 import { VTextField } from 'vuetify/components/VTextField'
 import { computed, ref, toRef } from 'vue'
 import useField from '../../composables/use-node.js'
+import useZIndexStack from '../../composables/use-z-index-stack.js'
 
 const props = defineProps({
   modelValue: {
@@ -54,12 +55,14 @@ const fieldProps = computed(() => {
   return fieldProps
 })
 
+const zIndex = useZIndexStack(() => props.modelValue.fullKey)
+
 const menuProps = computed(() => {
   return {
     ...compProps.value,
     minWidth: props.minWidth,
     maxWidth: props.maxWidth,
-    zIndex: 3000, // vuetify zIndex stacking is buggy (for example https://github.com/vuetifyjs/vuetify/issues/16251)
+    zIndex: zIndex.value,
     closeOnContentClick: false,
     disabled: true
   }

package/src/components/nodes/autocomplete.vue

@@ -22,7 +22,7 @@ export default defineComponent({
     useDefaults({}, 'VjsfAutocomplete')
     const avatarProps = useCompDefaults('VjsfSelectItem-VAvatar', { rounded: false, size: 'small' })
 
-    const { getItems, selectProps, selectSlots, localData } = useSelectNode(toRef(props, 'modelValue'), props.statefulLayout, avatarProps.value)
+    const { getItems, selectProps, selectSlots, localData } = useSelectNode(toRef(props, 'modelValue'), props.statefulLayout, avatarProps.value, 'v-autocomplete')
 
     const fieldProps = computed(() => {
       const fieldProps = { ...selectProps.value }

package/src/components/nodes/combobox.vue

@@ -3,6 +3,7 @@ import { defineComponent, h, computed, toRef } from 'vue'
 import { VCombobox } from 'vuetify/components/VCombobox'
 import useNode from '../../composables/use-node.js'
 import useGetItems from '../../composables/use-get-items.js'
+import useZIndexStack from '../../composables/use-z-index-stack.js'
 import { useDefaults } from 'vuetify'
 
 export default defineComponent({
@@ -24,6 +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 fieldProps = computed(() => {
       const fieldProps = { ...inputProps.value }
@@ -31,8 +33,7 @@ export default defineComponent({
       if (options.value.readOnly) {
         fieldProps.menuProps = { modelValue: false }
       } else {
-        // vuetify zIndex stacking is buggy (for example https://github.com/vuetifyjs/vuetify/issues/16251)
-        fieldProps.menuProps = { zIndex: 3000 }
+        fieldProps.menuProps = { zIndex: zIndex.value }
       }
       if (getItems.hasItems.value) {
         fieldProps.items = getItems.items.value

package/src/components/nodes/list.vue

@@ -20,6 +20,7 @@ import { moveDataItem } from '../../utils/arrays.js'
 import useDnd from '../../composables/use-dnd.js'
 import useCompDefaults from '../../composables/use-comp-defaults.js'
 import useClipboard from '../../composables/use-clipboard.js'
+import useZIndexStack from '../../composables/use-z-index-stack.js'
 
 useDefaults({}, 'VjsfList')
 const vCardProps = useCompDefaults('VjsfList-VCard', { border: true, flat: true, tile: true })
@@ -68,6 +69,8 @@ const prepareDrag = (/** @type {number} */index) => {
   menuOpened.value = -1
 }
 
+const zIndex = useZIndexStack(() => props.modelValue.fullKey)
+
 /* manage hovered and edited items */
 // const editedItem = computed(() => activatedItems.value[fullKey.value])
 const editedItem = computed(() => {
@@ -296,7 +299,7 @@ const itemBorderColor = computed(() => (/** @type {import('@json-layout/core').S
               >
                 <v-menu
                   location="bottom end"
-                  z-index="3000"
+                  :z-index="zIndex"
                   :density="modelValue.options.density"
                   :close-on-content-click="false"
                   :model-value="menuOpened === childIndex"
@@ -317,7 +320,7 @@ const itemBorderColor = computed(() => (/** @type {import('@json-layout/core').S
                       <v-menu
                         v-if="layout.listEditMode === 'menu'"
                         location="start"
-                        z-index="3000"
+                        :z-index="zIndex"
                         :density="modelValue.options.density"
                         :model-value="editedItem !== undefined"
                         :close-on-content-click="false"

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

@@ -3,6 +3,7 @@ import { defineComponent, h, computed, toRef } from 'vue'
 import { VCombobox } from 'vuetify/components/VCombobox'
 import useNode from '../../composables/use-node.js'
 import useGetItems from '../../composables/use-get-items.js'
+import useZIndexStack from '../../composables/use-z-index-stack.js'
 import { useDefaults } from 'vuetify'
 
 export default defineComponent({
@@ -24,6 +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 fieldProps = computed(() => {
       const fieldProps = { ...inputProps.value }
@@ -32,8 +34,7 @@ export default defineComponent({
       if (options.value.readOnly) {
         fieldProps.menuProps = { modelValue: false }
       } else {
-        // vuetify zIndex stacking is buggy (for example https://github.com/vuetifyjs/vuetify/issues/16251)
-        fieldProps.menuProps = { zIndex: 3000 }
+        fieldProps.menuProps = { zIndex: zIndex.value }
       }
       if (getItems.hasItems.value) {
         fieldProps.items = getItems.items.value

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

@@ -5,6 +5,7 @@ import { ref, watch, computed, toRef } from 'vue'
 import { isSection } from '@json-layout/core/state'
 import { isCompObject } from '@json-layout/vocabulary'
 import useNode from '../../composables/use-node.js'
+import useZIndexStack from '../../composables/use-z-index-stack.js'
 import Node from '../node.vue'
 import { useDefaults } from 'vuetify'
 
@@ -26,6 +27,7 @@ const props = defineProps({
 const { inputProps, localData, skeleton, children } = useNode(
   toRef(props, 'modelValue'), props.statefulLayout, { bindData: false }
 )
+const zIndex = useZIndexStack(() => props.modelValue.fullKey)
 
 /** @type import('vue').Ref<string | undefined> */
 const activeChildTree = ref(undefined)
@@ -48,8 +50,7 @@ const fieldProps = computed(() => {
   const fieldProps = { ...inputProps.value }
   fieldProps['onUpdate:modelValue'] = onChange
   if (!props.modelValue.options.readOnly) {
-    // vuetify zIndex stacking is buggy (for example https://github.com/vuetifyjs/vuetify/issues/16251)
-    fieldProps.menuProps = { zIndex: 3000 }
+    fieldProps.menuProps = { zIndex: zIndex.value }
   }
   const items = []
   for (const childTreePointer of skeleton.value.childrenTrees || []) {

package/src/components/nodes/select.vue

@@ -22,7 +22,7 @@ export default defineComponent({
     useDefaults({}, 'VjsfSelect')
     const avatarProps = useCompDefaults('VjsfSelectItem-VAvatar', { rounded: false, size: 'small' })
 
-    const { getItems, selectProps, selectSlots, localData } = useSelectNode(toRef(props, 'modelValue'), props.statefulLayout, avatarProps.value)
+    const { getItems, selectProps, selectSlots, localData } = useSelectNode(toRef(props, 'modelValue'), props.statefulLayout, avatarProps.value, 'v-select')
 
     const fieldProps = computed(() => {
       const fieldProps = { ...selectProps.value }

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

@@ -3,18 +3,21 @@ import useField from './use-node.js'
 import useGetItems from './use-get-items.js'
 import SelectItem from '../components/fragments/select-item.vue'
 import SelectSelection from '../components/fragments/select-selection.vue'
+import useZIndexStack from './use-z-index-stack.js'
 
 /**
  * specialized use of useFieldProps shared between select and autocomplete components
  * @param {import('vue').Ref<import('../types.js').VjsfSelectNode>} nodeRef
  * @param {import('../types.js').VjsfStatefulLayout} statefulLayout
  * @param {any} avatarProps
+ * @param {'v-autocomplete' | 'v-select'} cssPrefix
  */
-export default function (nodeRef, statefulLayout, avatarProps) {
+export default function (nodeRef, statefulLayout, avatarProps, cssPrefix) {
   const layout = computed(() => nodeRef.value.layout)
 
   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 selectProps = computed(() => {
     const props = { ...inputProps.value }
@@ -22,8 +25,7 @@ export default function (nodeRef, statefulLayout, avatarProps) {
     if (options.value.readOnly) {
       props.menuProps = { modelValue: false }
     } else {
-      // vuetify zIndex stacking is buggy (for example https://github.com/vuetifyjs/vuetify/issues/16251)
-      props.menuProps = { zIndex: 3000 }
+      props.menuProps = { zIndex: zIndex.value }
     }
     props.clearable = props.clearable ?? !skeleton.value.required
     props.valueComparator = (/** @type {any} */a, /** @type {any} */b) => {
@@ -65,7 +67,8 @@ export default function (nodeRef, statefulLayout, avatarProps) {
         multiple: layout.value.multiple,
         last: layout.value.multiple && context.index === nodeRef.value.data.length - 1,
         item: getItems.prepareSelectedItem(context.item.raw, context.item.value),
-        avatarProps
+        avatarProps,
+        cssPrefix
       })
     }
     return slots

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

@@ -0,0 +1,21 @@
+// 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'
+
+const symbol = Symbol.for('vjsf:z-index-stack')
+
+/**
+ * @param {() => string} keyGetter
+ */
+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
+  })
+}

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

@@ -3,11 +3,13 @@ declare const _default: import("vue").DefineComponent<{}, {
     item: import("../../../../node_modules/@json-layout/vocabulary/types/normalized-layout/types.js").SelectItem;
     avatarProps: Record<string, any>;
     last: boolean;
+    cssPrefix: string;
     $props: {
         readonly multiple?: boolean | 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;
+        readonly cssPrefix?: string | 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/text-field-menu.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-field-menu.vue.d.ts","sourceRoot":"","sources":["../../../src/components/fragments/text-field-menu.vue.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;6BA6KsC,GAAG;;;QACX,GAAG"}
+{"version":3,"file":"text-field-menu.vue.d.ts","sourceRoot":"","sources":["../../../src/components/fragments/text-field-menu.vue.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;6BAgLsC,GAAG;;;QACX,GAAG"}

package/types/components/nodes/combobox.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/nodes/combobox.vue.js"],"names":[],"mappings":";;QAWM,8EAA8E;cAApE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,gBAAgB,CAAC;;;;QAK3E,gFAAgF;cAAtE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,kBAAkB,CAAC;;;;;;;QAL7E,8EAA8E;cAApE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,gBAAgB,CAAC;;;;QAK3E,gFAAgF;cAAtE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,kBAAkB,CAAC"}
+{"version":3,"file":"combobox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/nodes/combobox.vue.js"],"names":[],"mappings":";;QAYM,8EAA8E;cAApE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,gBAAgB,CAAC;;;;QAK3E,gFAAgF;cAAtE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,kBAAkB,CAAC;;;;;;;QAL7E,8EAA8E;cAApE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,gBAAgB,CAAC;;;;QAK3E,gFAAgF;cAAtE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,kBAAkB,CAAC"}

package/types/components/nodes/number-combobox.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"number-combobox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/nodes/number-combobox.vue.js"],"names":[],"mappings":";;QAWM,8EAA8E;cAApE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,gBAAgB,CAAC;;;;QAK3E,gFAAgF;cAAtE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,kBAAkB,CAAC;;;;;;;QAL7E,8EAA8E;cAApE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,gBAAgB,CAAC;;;;QAK3E,gFAAgF;cAAtE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,kBAAkB,CAAC"}
+{"version":3,"file":"number-combobox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/nodes/number-combobox.vue.js"],"names":[],"mappings":";;QAYM,8EAA8E;cAApE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,gBAAgB,CAAC;;;;QAK3E,gFAAgF;cAAtE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,kBAAkB,CAAC;;;;;;;QAL7E,8EAA8E;cAApE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,gBAAgB,CAAC;;;;QAK3E,gFAAgF;cAAtE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,kBAAkB,CAAC"}

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

@@ -3,8 +3,9 @@
  * @param {import('vue').Ref<import('../types.js').VjsfSelectNode>} nodeRef
  * @param {import('../types.js').VjsfStatefulLayout} statefulLayout
  * @param {any} avatarProps
+ * @param {'v-autocomplete' | 'v-select'} cssPrefix
  */
-export default function _default(nodeRef: import('vue').Ref<import('../types.js').VjsfSelectNode>, statefulLayout: import('../types.js').VjsfStatefulLayout, avatarProps: any): {
+export default function _default(nodeRef: import('vue').Ref<import('../types.js').VjsfSelectNode>, statefulLayout: import('../types.js').VjsfStatefulLayout, avatarProps: any, cssPrefix: 'v-autocomplete' | 'v-select'): {
     localData: import("vue").Ref<any, any>;
     inputProps: import("vue").ComputedRef<Record<string, any> & {
         class: string[];

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":"AAMA;;;;;GAKG;AACH,0CAJW,OAAO,KAAK,EAAE,GAAG,CAAC,OAAO,aAAa,EAAE,cAAc,CAAC,kBACvD,OAAO,aAAa,EAAE,kBAAkB,eACxC,GAAG;;;;;;;;;;;;;;;;;;;;EAgEb"}
+{"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"}

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

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

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

@@ -0,0 +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"}