@koumoul/vjsf 3.22.0 → 3.22.2

package/package.json

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

package/src/components/fragments/list-select-key.vue

@@ -1,4 +1,5 @@
 <script>
+import { VAutocomplete } from 'vuetify/components/VAutocomplete'
 import { VSelect } from 'vuetify/components/VSelect'
 import { defineComponent, h, computed, toRef } from 'vue'
 import { useDefaults } from 'vuetify'
@@ -31,24 +32,31 @@ export default defineComponent({
   emits: ['update:modelValue'],
   setup (props, { emit }) {
     useDefaults({}, 'VjsfListSelectKey')
-    const vSelectProps = useCompDefaults('VjsfSelectItem-VSelect', { variant: 'outlined', class: 'mt-2' })
+    const vSelectProps = useCompDefaults('VjsfIndexedList-VSelect', { variant: 'outlined', class: 'mt-2' })
     const avatarProps = useCompDefaults('VjsfSelectItem-VAvatar', { rounded: false, size: 'small' })
 
     // @ts-ignore
     const { getItems, selectProps, selectSlots } = useSelectNode(toRef(props, 'listNode'), props.statefulLayout, avatarProps.value, 'v-select')
 
+    const fixedSelectProps = computed(() => {
+      const fixedSelectProps = { ...selectProps.value }
+      delete fixedSelectProps.hint
+      fixedSelectProps.label = props.listNode.messages.addItem
+      return fixedSelectProps
+    })
+
     const fieldProps = computed(() => {
-      const fieldProps = mergePropsLevels([vSelectProps.value, selectProps.value])
-      fieldProps.label = props.listNode.messages.addItem
+      const fieldProps = mergePropsLevels([vSelectProps.value, fixedSelectProps.value])
       fieldProps.loading = getItems.loading.value
       fieldProps.items = getItems.items.value
       delete fieldProps.clearable
       delete fieldProps['onBlur']
       fieldProps.rules = props.rules
       fieldProps.active = false
-      fieldProps.modelValue = props.modelValue
+      if (props.modelValue) fieldProps.modelValue = props.modelValue
+      else delete fieldProps.modelValue
       fieldProps['onUpdate:modelValue'] = (/** @type string */value) => {
-        emit('update:modelValue', value)
+        if (value) emit('update:modelValue', value)
       }
       return fieldProps
     })
@@ -60,7 +68,7 @@ export default defineComponent({
     })
 
     // @ts-ignore
-    return () => h(VSelect, fieldProps.value, fieldSlots.value)
+    return () => h(getItems.items.value.length > 20 ? VAutocomplete : VSelect, fieldProps.value, fieldSlots.value)
   }
 })
 

package/src/components/nodes/list.vue

@@ -115,12 +115,18 @@ const itemSubtitles = computed(() => {
   return sortableArray.value.map((child) => props.statefulLayout.evalNodeExpression(props.modelValue, expr, child.data))
 })
 
+const activateOrFocus = (/** @type number | string */childKey) => {
+  if (layout.value.listEditMode === 'inline-single' || layout.value.listEditMode === 'dialog') {
+    props.statefulLayout.activateItem(props.modelValue, childKey)
+  } else {
+    props.statefulLayout.focusNode(props.modelValue.fullKey + '/' + childKey)
+  }
+}
+
 const pushEmptyItem = () => {
   const newData = (props.modelValue.data ?? []).concat([undefined])
   props.statefulLayout.input(props.modelValue, newData)
-  if (layout.value.listEditMode === 'inline-single' || layout.value.listEditMode === 'dialog') {
-    props.statefulLayout.activateItem(props.modelValue, newData.length - 1)
-  }
+  activateOrFocus(newData.length - 1)
 }
 
 const newKey = ref('')
@@ -132,9 +138,7 @@ const pushEmptyIndexedItem = () => {
   if (!newKeyForm.value.isValid) return
   const newData = { ...(props.modelValue.data ?? {}), [newKey.value]: undefined }
   props.statefulLayout.input(props.modelValue, newData)
-  if (layout.value.listEditMode === 'inline-single') {
-    props.statefulLayout.activateItem(props.modelValue, Object.keys(newData).length - 1)
-  }
+  activateOrFocus(newKey.value)
   newKey.value = ''
   newKeyForm.value?.reset()
 }
@@ -169,9 +173,7 @@ const duplicateItem = (child, childIndex) => {
   const newItem = props.modelValue.layout.itemCopy ? props.statefulLayout.evalNodeExpression(props.modelValue, props.modelValue.layout.itemCopy, clone(child.data)) : clone(child.data)
   const newData = [...props.modelValue.data.slice(0, childIndex + 1), newItem, ...props.modelValue.data.slice(childIndex + 1)]
   props.statefulLayout.input(props.modelValue, newData)
-  if (layout.value.listEditMode === 'inline-single') {
-    props.statefulLayout.activateItem(props.modelValue, childIndex + 1)
-  }
+  activateOrFocus(childIndex + 1)
   menuOpened.value = -1
 }
 
@@ -194,9 +196,7 @@ const pasteItem = (child) => {
   const newItem = props.modelValue.layout.itemCopy ? props.statefulLayout.evalNodeExpression(props.modelValue, props.modelValue.layout.itemCopy, clone(copiedItem)) : clone(copiedItem)
   const newData = [...(props.modelValue.data ?? []), newItem]
   props.statefulLayout.input(props.modelValue, newData)
-  if (layout.value.listEditMode === 'inline-single') {
-    props.statefulLayout.activateItem(props.modelValue, newData.length - 1)
-  }
+  activateOrFocus(newData.length - 1)
 }
 
 const itemBorderColor = computed(() => (/** @type {import('@json-layout/core').StateNode} */child, /** @type {number} */childIndex) => {

package/src/components/nodes/textarea.vue

@@ -54,4 +54,8 @@ export default defineComponent({
   overflow: hidden;
   mask-image: linear-gradient(180deg, #000 66%, transparent 90%);
 }
+
+.vjsf-readonly textarea {
+  pointer-events: auto;
+}
 </style>

package/types/components/fragments/list-select-key.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list-select-key.vue.d.ts","sourceRoot":"","sources":["../../../src/components/fragments/list-select-key.vue.js"],"names":[],"mappings":";;;;;;QAgBM,0EAA0E;cAAhE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,YAAY,CAAC;;;;QAKvE,gFAAgF;cAAtE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,kBAAkB,CAAC;;;;QAK7E,+DAA+D;0CAAzB,MAAM,KAAK,OAAO;;;;;;;;;;;QAVxD,0EAA0E;cAAhE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,YAAY,CAAC;;;;QAKvE,gFAAgF;cAAtE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,kBAAkB,CAAC;;;;QAK7E,+DAA+D;0CAAzB,MAAM,KAAK,OAAO"}
+{"version":3,"file":"list-select-key.vue.d.ts","sourceRoot":"","sources":["../../../src/components/fragments/list-select-key.vue.js"],"names":[],"mappings":";;;;;;QAiBM,0EAA0E;cAAhE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,YAAY,CAAC;;;;QAKvE,gFAAgF;cAAtE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,kBAAkB,CAAC;;;;QAK7E,+DAA+D;0CAAzB,MAAM,KAAK,OAAO;;;;;;;;;;;QAVxD,0EAA0E;cAAhE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,YAAY,CAAC;;;;QAKvE,gFAAgF;cAAtE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,gBAAgB,EAAE,kBAAkB,CAAC;;;;QAK7E,+DAA+D;0CAAzB,MAAM,KAAK,OAAO"}