How do i update element properties by plugin in builder

[Tim-Wapenaar-Fenetre]

Im passing some settings to the builder component which I want to use as default for elements. I would guess a good place for that would be by a plugin.

In the next example, i want to set the accept property of the fileElement with my list of allowed file type.
But this does not update those properties.

export default function fileDefaultsPlugin() {
	return {
		apply: "FileElement",
		setup(props: any, context: any, component: any) {
			const form$ = component.form$.value;
			if (form$.builder) {
				const formSettings = form$.builder$?.$attrs["builder-settings"] || {};

				return { ...component, accept: formSettings.allowedFileTypes };
			}
			return component;
		},
	};
}

And trying to set the value with props.accept.value = formSettings.allowedFileTypes results in a cannot set a readonly property warning

[adamberecz]

Unfortunately that's not going to work, because modifying properties like this at runtime is possible (and advised) in Vue.

Instead, you can define a preset for the builder, that overrides the default values for file type elements.

Here's a working demo.

// file.preset.js
import { elementTypes } from '@vueform/builder';

export default {
  element: {
    types: {
      file: {
        ...elementTypes.file,
        schema: {
          ...elementTypes.file.schema,
          accept: 'image/*,audio/*',
          // accept: 'application/gzip,application/json',
          // accept: '.aac,.abw',
        },
      },
    },
  },
}

<!-- App.vue -->
<script setup>
import { ref, onMounted } from 'vue';
import filePreset from './file.preset';
</script>

<template>
  <div id="app" class="h-screen">
    <VueformBuilder :config="{ preset: filePreset }" />
  </div>
</template>

<style></style>