Generalize `WizardEditor` interface to its input components #322

New issue

Open

opened 2026-02-05 13:25:46 +00:00 by jsheunis · 0 comments

jsheunis commented

2026-02-05 13:25:46 +00:00

Owner

The WizardEditor was introduced in datalink/shacl-vue@3c091c324f. Based on config, it will render any number of inputs of various kinds, while it registers a single model value (in the VueJS sense) for each of them. In other words: there will be an x_value for input x, a y_value for input_y, and so forth, irrespective of the complexity hidden behind the input itself. This is a useful feature because we want to be able to refer to these values directly inside the wizard's TTL template.

However, not all inputs will necessarily have this simplistic value mapping. For example, a file uploader is seen as a single input in the context of a wizard, yet the current file uploader (GitAnnexUploader) will generate multiple output values on successful file upload (e.g. file size, annex key, content hash, download url, and more). This should receive a generalizable pattern for mapping outputs to a single value. The easy approach is just to wrap everything in an object. Then we would refer to sub-values inside the TTL template using dot notation and/or square brackets, e.g. {file_upload.annex_key}.

Another important point is that there should be a common API with which these inputs emit their model values upwards, such that the WizardEditor can instantiate and use them uniformly, with v-model. There is already a standard VueJS way of achieving this: by adding modelValue as a component prop and letting the component emit updates to it via emit('update:modelValue', <some-value>).

Finally, it could be useful to have a utility functionality that maps input types to associated components and renders them automatically, instead of the current if-else-if-else-if-else... statement. This functionality would be pretty much identical to the current matching approach used by standard shacl-vue property shape editor.

The `WizardEditor` was introduced in https://hub.psychoinformatics.de/datalink/shacl-vue/commit/3c091c324f8ec363c9f8d5f5e844aa90f5208028. Based on config, it will render any number of inputs of various kinds, while it registers a single model value (in the VueJS sense) for each of them. In other words: there will be an `x_value` for input `x`, a `y_value` for `input_y`, and so forth, irrespective of the complexity hidden behind the input itself. This is a useful feature because we want to be able to refer to these values directly inside the wizard's TTL template. However, not all inputs will necessarily have this simplistic value mapping. For example, a file uploader is seen as a single input in the context of a wizard, yet the current file uploader (`GitAnnexUploader`) will generate multiple output values on successful file upload (e.g. file size, annex key, content hash, download url, and more). This should receive a generalizable pattern for mapping outputs to a single value. The easy approach is just to wrap everything in an object. Then we would refer to sub-values inside the TTL template using dot notation and/or square brackets, e.g. `{file_upload.annex_key}`. Another important point is that there should be a common API with which these inputs emit their model values upwards, such that the `WizardEditor` can instantiate and use them uniformly, with `v-model`. There is already a standard VueJS way of achieving this: by adding `modelValue` as a component prop and letting the component emit updates to it via `emit('update:modelValue', <some-value>)`. Finally, it could be useful to have a utility functionality that maps input `type`s to associated components and renders them automatically, instead of the current `if-else-if-else-if-else...` statement. This functionality would be pretty much identical to the current matching approach used by standard shacl-vue property shape editor.