Allow for custom components

[blocka]

A simple change to allow for custom components which provides the user with ultimate flexibility.

The component should implement the "v-model" interface.

Example:

{
    type: {
        props: ['value'],
        render (h) {
            return <MyTaggingComponent onChange={value => this.$emit('input', value)}></MyTaggingComponent>;
        }
    },
    id: 'tags',
    label: 'Tags',
    operators: ['Has Tag']
}

[dabernathy89]

Hey, great idea! I'll test this out soon as I can.

[rettigd]

@blocka - thanks so much for this PR - really helped me out. However, I did run into a couple issues:

1) The v-model pattern didn't work for me in all cases (i.e. a non-input custom component) and prop['value'] wasn't being set in the component 2) When loading from initialQuery, and there are multiple different custom component rules, they wouldn't initialize (render) properly since this.$options.components['Custom'] is unique. As subsequent components are rendered, their definition overwrite the first one.

I'm submitting a PR with changes that addresses these issues - hopefully they work for your use case too

[blocka]

With regards to 1., I'm assuming you're dealing with a 3rd party component. In that case you can wrap it in your own component.

[rettigd]

I put a wrapper around a third-party component - just couldn't figure it out why the prop wasn't being set. But I can take another look since I was working through more than one issue at the time - obviously v-model pattern would be preferred

[lukeholder]

Any update on this?

[rettigd]

Sorry, I haven't had a chance to revisit this issue. My initial retest showed the same issue, but my use case has changed. I was using a select2, but now refactoring using vue-multiselect. I should know by the end of the week.

[dabernathy89]

Sorry this took so long to get around to y'all! Custom components are now available. You can see an example on the main docs page:

https://dabernathy89.github.io/vue-query-builder/

Thanks for the help with this feature!

[beargie]

The custom component example seems to have been removed from the above linked demo page. Just an FYI.

[dabernathy89]

@beargie ah yeah, I forgot to include that example when i rebuilt the docs recently. will add soon. Thanks!

[dabernathy89]

@beargie I've added back some documentation for that:

https://dabernathy89.github.io/vue-query-builder/demos.html#custom-component-demo