fix(Nc*Field): do not pass all props to InputField BY filtering $props

[ShGKme]

☑️ Resolves

HTML Validation issue.

Currently NcTextField passes both $attrs and $props to the NcInputField.

<NcInputField v-bind="{ ...$attrs, ...$props }">

While passing $attrs makes sense, passing $props is valid only when both components have exactly the same props. But they don't. NcTextField has its own prop trailingButtonIcon and may have more props in the future.

Proposal: same as NcSelect.

Filter props to proxy only original NcInputField props.

Alternative solution: do not use props for proxying.

See: #4665

🖼️ Screenshots

trailingbuttonicon is not a valid <input> attribute.

🏁 Checklist

• ⛑️ Tests are included or are not applicable
• 📘 Component documentation has been extended, updated or is not applicable

[ChristophWurst]

makes sense

[ShGKme]

makes sense

Thanks! Could you also have a look at this PR with an alternative (more preferred by me to be honest): #4665

[ShGKme]

Although an alternative approach with a classic transparent wrapper approach (with proxying only $attrs) seems more clean (and performant) for me and @susnux, I checked how IDEs handle the component, how Vue 3.3 works now with new implementation of defineProps<WrappedProps & NewProps>, discussed it with some experts and decided that this PR approach is better in terms of DX.

Even with Vue 3.3 + SFC Setup + TS it is still not possible to add typing for attributes for wrapper components.

Waiting for Vue to add something for defining attrs types for component wrappers 😭

[ShGKme]

helperText removed, because it is exactly the same as in NcInputField and already defined

[susnux]

Makes sense, even if I think the other PR is cleaner 😞

[ShGKme]

Makes sense, even if I think the other PR is cleaner 😞

Clean, fast, without any auto-complete in IDE :(