Dispatch Input based in property datatype

[micgro42]

(To be merged into master after #142)

Todo:

• agree on the basic approach
• tests

Bug: T270257

[jakobw]

Looks good! I tried it out locally and it works nicely! 🏆

I left a suggestion in there for the value input dispatching code. I don't think this necessarily has to happen in this PR but I'm curious to hear thoughts.

[jakobw]

If value input components share the same interface (which they probably should) this whole template (or the whole component?) could turn into something like this:

Suggested change

	<ItemValueLookup
	v-if="datatype === 'wikibase-item'"
	:value="value"
	@input="$emit('input', $event)"
	:error="error"
	:disabled="disabled"
	/>
	<TextInput
	v-else
	:value="value"
	:label="$i18n('query-builder-input-value-label')"
	@input="$emit('input', $event)"
	:error="error && { message: $i18n(error.message), type: error.type }"
	:placeholder="$i18n('query-builder-input-value-placeholder')"
	:disabled="disabled"
	/>
	<component
	:is="{
	string: 'TextInput',
	'external-id': 'TextInput',
	'wikibase-item': 'ItemValueLookup'
	}[datatype]"
	:value="value"
	:label="$i18n('query-builder-input-value-label')"
	@input="$emit('input', $event)"
	:error="error && { message: $i18n(error.message), type: error.type }"
	:placeholder="$i18n('query-builder-input-value-placeholder')"
	:disabled="disabled"
	/>

... but ideally without doing the dispatching in the template.

If that works out, all this component does is forwarding props. At that point it seems cleaner to put the dispatching code into a regular function, and move the differences we see in the templates (error handling, messages, ...) down into the value input components. Then this can become a functional component or be removed entirely if nothing is left.

[micgro42]

I really like the looks of this, thanks! I had looked at <component is="" previously and it didn't seem exactly right, but your approach is very convincing.

Then the first step for this would be to wrap the TextInput into its own component to align the interfaces, right?. That was on my Todo-list anyway, I will look into it.

[jakobw]

Then the first step for this would be to wrap the TextInput into its own component to align the interfaces, right?

Yes, that sounds good!

[jakobw]

I think this looks super good! ValueInput.vue could use a test though, and it should be very nicely testable now.

[jakobw]

Woo! 🔥