@koumoul/vjsf 3.21.0 → 3.22.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koumoul/vjsf",
-  "version": "3.21.0",
+  "version": "3.22.1",
   "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.0",
+    "@json-layout/core": "~2.1.1",
     "@json-layout/vocabulary": "~2.9.0",
     "@vueuse/core": "^12.5.0",
     "debug": "^4.3.4"

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

@@ -0,0 +1,68 @@
+<script>
+import { VAutocomplete } from 'vuetify/components/VAutocomplete'
+import { VSelect } from 'vuetify/components/VSelect'
+import { defineComponent, h, computed, toRef } from 'vue'
+import { useDefaults } from 'vuetify'
+import useSelectNode from '../../composables/use-select-node.js'
+import useCompDefaults from '../../composables/use-comp-defaults.js'
+import { mergePropsLevels } from '../../composables/use-node.js'
+
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: String,
+      required: true
+    },
+    listNode: {
+      /** @type import('vue').PropType<import('../../types.js').VjsfListNode> */
+      type: Object,
+      required: true
+    },
+    statefulLayout: {
+      /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
+      type: Object,
+      required: true
+    },
+    rules: {
+      /** @type import('vue').PropType<((v: string) => boolean)[]> */
+      type: Array,
+      required: true
+    }
+  },
+  emits: ['update:modelValue'],
+  setup (props, { emit }) {
+    useDefaults({}, 'VjsfListSelectKey')
+    const vSelectProps = useCompDefaults('VjsfSelectItem-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 fieldProps = computed(() => {
+      const fieldProps = mergePropsLevels([vSelectProps.value, selectProps.value])
+      fieldProps.label = props.listNode.messages.addItem
+      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
+      fieldProps['onUpdate:modelValue'] = (/** @type string */value) => {
+        emit('update:modelValue', value)
+      }
+      return fieldProps
+    })
+
+    const fieldSlots = computed(() => {
+      const fieldSlots = { ...selectSlots.value }
+      delete fieldSlots.selection
+      return fieldSlots
+    })
+
+    // @ts-ignore
+    return () => h(getItems.items.value.length > 20 ? VAutocomplete : VSelect, fieldProps.value, fieldSlots.value)
+  }
+})
+
+</script>

package/src/components/nodes/list.vue

@@ -13,6 +13,7 @@ import { VDialog } from 'vuetify/components/VDialog'
 import { VToolbar } from 'vuetify/components/VToolbar'
 import { VForm } from 'vuetify/components/VForm'
 import { VSheet } from 'vuetify/components/VSheet'
+import ListSelectKey from '../fragments/list-select-key.vue'
 import { isSection, getRegexp } from '@json-layout/core/state'
 import { clone } from '@json-layout/core/utils/clone'
 import Node from '../node.vue'
@@ -207,6 +208,10 @@ const itemBorderColor = computed(() => (/** @type {import('@json-layout/core').S
   return 'transparent'
 })
 
+const indexedListRules = computed(() => {
+  return [(/** @type {string} */v) => !props.modelValue.children.some(c => c.key === v), (/** @type {string} */v) => !v || !!props.modelValue.layout.indexed?.some(pattern => v.match(getRegexp(pattern)))]
+})
+
 </script>
 
 <template>
@@ -328,11 +333,11 @@ const itemBorderColor = computed(() => (/** @type {import('@json-layout/core').S
                         v-bind="vEditMenuProps"
                         @update:model-value="value => value || statefulLayout.deactivateItem(modelValue)"
                       >
-                        <template #activator="{props}">
+                        <template #activator="{props: listItemProps}">
                           <v-list-item
                             :density="modelValue.options.density"
                             base-color="primary"
-                            v-bind="props"
+                            v-bind="listItemProps"
                             @click="statefulLayout.activateItem(modelValue, childIndex);"
                           >
                             <template #prepend>
@@ -451,12 +456,21 @@ const itemBorderColor = computed(() => (/** @type {import('@json-layout/core').S
             style="max-width: 250px;"
             @submit.prevent
           >
+            <list-select-key
+              v-if="modelValue.layout.getItems ?? modelValue.layout.items"
+              v-model="newKey"
+              :list-node="modelValue"
+              :stateful-layout="statefulLayout"
+              :rules="indexedListRules"
+              @update:model-value="pushEmptyIndexedItem"
+            />
             <v-text-field
+              v-else
               v-model="newKey"
               variant="outlined"
               :placeholder="modelValue.messages.addItem"
               hide-details
-              :rules="[(/** @type {string} */v) => !modelValue.children.some(c => c.key === v), v => !v || !!modelValue.layout.indexed?.some(pattern => v.match(getRegexp(pattern)))]"
+              :rules="indexedListRules"
               @keypress.enter="pushEmptyIndexedItem"
             >
               <template #append>

package/src/components/nodes/select.vue

@@ -1,6 +1,6 @@
 <script>
 import { VSelect } from 'vuetify/components/VSelect'
-import { defineComponent, h, computed, toRef, watch } from 'vue'
+import { defineComponent, h, computed, toRef } from 'vue'
 import { useDefaults } from 'vuetify'
 import useSelectNode from '../../composables/use-select-node.js'
 import useCompDefaults from '../../composables/use-comp-defaults.js'
@@ -32,8 +32,6 @@ 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/utils/arrays.js

@@ -41,6 +41,5 @@ export function moveObjectItem (data, fromIndex, toIndex) {
   for (const key of newKeys) {
     newData[key] = data[key]
   }
-  console.log(newData)
   return newData
 }

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

@@ -0,0 +1,47 @@
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        required: true;
+    };
+    listNode: {
+        /** @type import('vue').PropType<import('../../types.js').VjsfListNode> */
+        type: import('vue').PropType<import('../../types.js').VjsfListNode>;
+        required: true;
+    };
+    statefulLayout: {
+        /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
+        type: import('vue').PropType<import('../../types.js').VjsfStatefulLayout>;
+        required: true;
+    };
+    rules: {
+        /** @type import('vue').PropType<((v: string) => boolean)[]> */
+        type: import("vue").PropType<((v: string) => boolean)[]>;
+        required: true;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        required: true;
+    };
+    listNode: {
+        /** @type import('vue').PropType<import('../../types.js').VjsfListNode> */
+        type: import('vue').PropType<import('../../types.js').VjsfListNode>;
+        required: true;
+    };
+    statefulLayout: {
+        /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
+        type: import('vue').PropType<import('../../types.js').VjsfStatefulLayout>;
+        required: true;
+    };
+    rules: {
+        /** @type import('vue').PropType<((v: string) => boolean)[]> */
+        type: import("vue").PropType<((v: string) => boolean)[]>;
+        required: true;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;
+//# sourceMappingURL=list-select-key.vue.d.ts.map

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

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

package/types/utils/arrays.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"arrays.d.ts","sourceRoot":"","sources":["../../src/utils/arrays.js"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,mCALW,GAAG,EAAE,GAAG,OAAO,MAAM,EAAE,GAAG,CAAC,aAC3B,MAAM,WACN,MAAM,GACL,GAAG,EAAE,GAAG,OAAO,MAAM,EAAE,GAAG,CAAC,CAMtC;AAED;;;;;GAKG;AACH,oCALW,GAAG,EAAE,aACL,MAAM,WACN,MAAM,GACL,GAAG,EAAE,CAWhB;AAED;;;;;GAKG;AACH,qCALW,OAAO,MAAM,EAAE,GAAG,CAAC,aACnB,MAAM,WACN,MAAM,GACL,OAAO,MAAM,EAAE,GAAG,CAAC,CAY9B"}
+{"version":3,"file":"arrays.d.ts","sourceRoot":"","sources":["../../src/utils/arrays.js"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,mCALW,GAAG,EAAE,GAAG,OAAO,MAAM,EAAE,GAAG,CAAC,aAC3B,MAAM,WACN,MAAM,GACL,GAAG,EAAE,GAAG,OAAO,MAAM,EAAE,GAAG,CAAC,CAMtC;AAED;;;;;GAKG;AACH,oCALW,GAAG,EAAE,aACL,MAAM,WACN,MAAM,GACL,GAAG,EAAE,CAWhB;AAED;;;;;GAKG;AACH,qCALW,OAAO,MAAM,EAAE,GAAG,CAAC,aACnB,MAAM,WACN,MAAM,GACL,OAAO,MAAM,EAAE,GAAG,CAAC,CAW9B"}