Improved API for UI components, reducing boilerplate for forwarding attributes and events

[chrisvfritz]

What problem does this feature solve?

There are many cases where attributes passed to a Vue component should not be added to the root element, but rather a sub-element. For example, in this UI component, an incredible amount of props must be used to ensure that attributes are added to the input element, instead of the wrapper div.

Additionally, it's often desirable to expose all event listeners on a form element to the parent, which also requires a lot of boilerplate currently if the element is not the root (in which case, the .native modifier can solve the problem).

What does the proposed API look like?

EDIT: Start here to catch up on the discussion.

Currently by default, the "exposed" element (the one that arbitrary attributes can be added to) is always the root element. A new directive could be used to define a different exposed element. Some ideas for the name of the directive:

• v-expose (probably my personal favorite)
• v-expose-attrs (probably clearer, but lengthier)
• v-main
• v-primary

If v-expose is added to an element, it will accept attributes passed to its component - and these attributes will no longer be passed to the root element.

Other features that may be nice:

• If the directive is defined on multiple elements, attributes will be duplicated across each of them
• In the case where a subset of attributes should be accepted by an element, v-expose could accept a string or array of strings (e.g. v-expose="class" or v-expose="['class', 'type', 'placeholder']"). In this case, these attributes would be added to the element (again, instead of to the root element), but all other attributes would be added to the root element or to the element(s) with a valueless v-expose.

[nickmessing]

Hmm, I don't know about that but for components like that I think you could use JSX or createElement to spread props.

[Austio]

https://github.com/doximity/vue-genome

For us this would be a great. We wrap all inputs in a label for styling and ux purposes. I agree that we could drop down to jsx instead but the templates are so much easier for everyone to follow.

[nickmessing]

@Austio, unfortunately, that's the payback for templates... wait... maybe we could think of a way to spread props into vue templates?

[jkzing]

I like this feature personally. But it seems to break the consistency of the v-bind behavior, like sometimes I still need to bind class property for the root element.

So how about use a pair of directives as getter and setter like:

Inside the component, define a v-expose anchor:

<input v-expose="foo" />

When using it:

<the-component v-define:foo="{propA: '', propB: ''}"></the-component>

<!-- or maybe use v-bind for it directly -->
<the-component :foo="{propA: '', propB: ''}"></the-component>

[nickmessing]

@jkzing, that looks awesome, but again, that looks like a basic spread and with potential problems like how would you define @keyup.enter.prevent="myAction"?

[nickmessing]

you can't just <the-component :foo="{'@keyup.enter.prevent': myAction}"></the-component>, that means you'd have to keep all modifiers like enter and prevent in the runtime (which is a part of vue-template-compiler atm)

[jkzing]

@nickmessing

that looks like a basic spread

The thing we are talking about it is to bring something like spread for template users

<the-component :foo="{'@keyup.enter.prevent': myAction}"></the-component>

@ is a v-on shortland, doesn't means prop (v-bind).

[nickmessing]

@jkzing, in the link from the description there's a lot of v-on bindings too

[jkzing]

@nickmessing Um...As for v-on bindings, it is another topic IMO, like event bubbling. 🤔

[nickmessing]

@jkzing, that was the whole concept of v-expose afaik, to make all properties "go" to a certain element in the component

[jkzing]

@nickmessing , Can't be sure about the original proposal, but I don't think an event listener should be considered as attribute.

[nickmessing]

@jkzing, probably not, but considering the common example of <my-awesome-text-input /> where you can have >9000 different props, you just want them all to get to yout <input /> that's inside your custom component without a ton of code.

[cristijora]

I personally use v-bind="$props" or you can filter those out to exclude the props you don't want to apply. This way you can apply multiple props at once on an input. Indeed v-expose might be useful because for wrapper components such as inputs you have to specify all those html props

So this
https://github.com/almino/semantic-ui-vue2/blob/master/src/elements/Input.vue#L9
cane be reduced to v-bind="$props" or v-bind="filteredProps" where filteredProps might be some computed property

[wojciechczerniak]

@cristijora We're using v-bind="someProps" too. The problem with this solution is that excessive properties will be added as HTML attributes. It would be great if v-bind= could filter out all properties that are not accepted by component. With dynamic <component> we don't know which props to filter out in computed property. Although it's possible to extract options.props and use lodash._pick.