@koumoul/vjsf 3.8.0 → 3.9.0

package/package.json

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

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

@@ -3,12 +3,17 @@
 
 import { defineComponent, h, computed } from 'vue'
 import { VIcon } from 'vuetify/components/VIcon'
+import { VAvatar, VImg } from 'vuetify/components'
 
 export default defineComponent({
   props: {
     icon: {
       type: String,
       required: true
+    },
+    avatarProps: {
+      type: Object,
+      required: true
     }
   },
   setup (props) {
@@ -16,7 +21,7 @@ export default defineComponent({
     const isSVG = computed(() => props.icon.startsWith('<?xml') || props.icon.startsWith('<svg'))
     return () => {
       if (isUrl.value) {
-        return h('img', { src: props.icon, style: 'height:100%;width:100%;' })
+        return h(VAvatar, props.avatarProps, () => h(VImg, { src: props.icon }))
       } else if (isSVG.value) {
         return h('div', { innerHTML: props.icon.replace('<svg ', '<svg class="v-icon__svg" '), class: 'v-icon' })
       } else {

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

@@ -18,6 +18,10 @@ defineProps({
     /** @type import('vue').PropType<import('@json-layout/vocabulary').SelectItem> */
     type: Object,
     required: true
+  },
+  avatarProps: {
+    type: Object,
+    required: true
   }
 })
 </script>
@@ -38,6 +42,7 @@ defineProps({
       <v-select-item-icon
         v-if="item.icon"
         :icon="item.icon"
+        :avatar-props="avatarProps"
       />
     </template>
   </v-list-item>

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

@@ -16,6 +16,10 @@ defineProps({
     /** @type import('vue').PropType<import('@json-layout/vocabulary').SelectItem> */
     type: Object,
     required: true
+  },
+  avatarProps: {
+    type: Object,
+    required: true
   }
 })
 
@@ -26,6 +30,7 @@ defineProps({
     <v-select-item-icon
       v-if="item.icon"
       :icon="item.icon"
+      :avatar-props="avatarProps"
     />
     {{ item.title ?? item.key ?? item.value }}
     <span

package/src/components/nodes/autocomplete.vue

@@ -3,6 +3,7 @@ import { VAutocomplete } from 'vuetify/components/VAutocomplete'
 import { useDefaults } from 'vuetify'
 import { defineComponent, computed, h, toRef } from 'vue'
 import useSelectNode from '../../composables/use-select-node.js'
+import useCompDefaults from '../../composables/use-comp-defaults.js'
 
 export default defineComponent({
   props: {
@@ -19,8 +20,9 @@ export default defineComponent({
   },
   setup (props) {
     useDefaults({}, 'VjsfAutocomplete')
+    const avatarProps = useCompDefaults('VjsfSelectItem-VAvatar', { rounded: false, size: 'small' })
 
-    const { getItems, selectProps, selectSlots, localData } = useSelectNode(toRef(props, 'modelValue'), props.statefulLayout)
+    const { getItems, selectProps, selectSlots, localData } = useSelectNode(toRef(props, 'modelValue'), props.statefulLayout, avatarProps.value)
 
     const fieldProps = computed(() => {
       const fieldProps = { ...selectProps.value }

package/src/components/nodes/select.vue

@@ -1,9 +1,9 @@
 <script>
 import { VSelect } from 'vuetify/components/VSelect'
 import { defineComponent, h, computed, toRef } from 'vue'
-import useSelectNode from '../../composables/use-select-node.js'
-
 import { useDefaults } from 'vuetify'
+import useSelectNode from '../../composables/use-select-node.js'
+import useCompDefaults from '../../composables/use-comp-defaults.js'
 
 export default defineComponent({
   props: {
@@ -20,8 +20,9 @@ export default defineComponent({
   },
   setup (props) {
     useDefaults({}, 'VjsfSelect')
+    const avatarProps = useCompDefaults('VjsfSelectItem-VAvatar', { rounded: false, size: 'small' })
 
-    const { getItems, selectProps, selectSlots, localData } = useSelectNode(toRef(props, 'modelValue'), props.statefulLayout)
+    const { getItems, selectProps, selectSlots, localData } = useSelectNode(toRef(props, 'modelValue'), props.statefulLayout, avatarProps.value)
 
     const fieldProps = computed(() => {
       const fieldProps = { ...selectProps.value }

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

@@ -8,8 +8,9 @@ import SelectSelection from '../components/fragments/select-selection.vue'
  * 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
  */
-export default function (nodeRef, statefulLayout) {
+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 })
@@ -55,14 +56,16 @@ export default function (nodeRef, statefulLayout) {
       slots.item = (/** @type {any} */ context) => h(SelectItem, {
         multiple: layout.value.multiple,
         itemProps: context.props,
-        item: context.item.raw
+        item: context.item.raw,
+        avatarProps
       })
     }
     if (!slots.selection) {
       slots.selection = (/** @type {any} */ context) => h(SelectSelection, {
         multiple: layout.value.multiple,
         last: layout.value.multiple && context.index === nodeRef.value.data.length - 1,
-        item: getItems.prepareSelectedItem(context.item.raw, context.item.value)
+        item: getItems.prepareSelectedItem(context.item.raw, context.item.value),
+        avatarProps
       })
     }
     return slots

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

@@ -1,10 +1,12 @@
 declare const _default: import("vue").DefineComponent<any, {
     multiple: boolean;
     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 avatarProps?: Record<string, any> | undefined;
         readonly itemProps?: Record<string, any> | undefined;
     };
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<any> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -1,10 +1,12 @@
 declare const _default: import("vue").DefineComponent<any, {
     multiple: boolean;
     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 avatarProps?: Record<string, any> | undefined;
         readonly last?: boolean | undefined;
     };
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<any> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -2,8 +2,9 @@
  * 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
  */
-export default function _default(nodeRef: import('vue').Ref<import('../types.js').VjsfSelectNode>, statefulLayout: import('../types.js').VjsfStatefulLayout): {
+export default function _default(nodeRef: import('vue').Ref<import('../types.js').VjsfSelectNode>, statefulLayout: import('../types.js').VjsfStatefulLayout, avatarProps: any): {
     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;;;;GAIG;AACH,0CAHW,OAAO,KAAK,EAAE,GAAG,CAAC,OAAO,aAAa,EAAE,cAAc,CAAC,kBACvD,OAAO,aAAa,EAAE,kBAAkB;;;;;;;;;;;;;;;;;;;;EA8DlD"}
+{"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"}