Skip to content

[Vue] Make inputs functional components #19087

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed

Conversation

michaeltintiuc
Copy link
Contributor

Pull request checklist

Please check if your PR fulfills the following requirements:

  • Tests for the changes have been added (for bug fixes / features)
  • Docs have been reviewed and added / updated if needed (for bug fixes / features)
  • Build (npm run build) was run locally and any changes were pushed
  • Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Performance improvement, bug fixes, partial documentation update

Please check the type of change your PR introduces:

  • Bugfix
  • Feature
  • Code style update (formatting, renaming)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • Documentation content changes
  • Other (please describe):

What is the current behavior?

Currently the Vue wrappers for Ionic inputs are basic components, thus they have state and instances which impact performance. Also several events were missing thus some of the components didn't function properly.

Issue Number: N/A

What is the new behavior?

  • Refactor wrappers to be functional components
  • Refactor to use a factory function to create components in bulk
  • Add fewer event handlers (v-model + user listeners)
  • IonCancel and IonSelect events were added to enable IonRadio and IonDatetime to function properly

Does this introduce a breaking change?

  • Yes
  • No

Other information

Changes were tested with all of the Ionic input components, their respective events and properties.
v-model was tested separately on each component as well as using the same property to manipulate multiple components, for instance ion-input's value to drive ion-radio value through the same data property.
I've updated the usage docs for IonInput but not for the rest of the components as I wasn't quite sure on your guidelines for these wrappers in cases where v-model or event listeners were not required, let me know and I'll be happy to update the rest.

@ionitron-bot ionitron-bot bot added package: core @ionic/core package package: vue @ionic/vue package labels Aug 13, 2019
@michaeltintiuc michaeltintiuc changed the title Make inputs functional components [Vue] Make inputs functional components Aug 13, 2019
@liamdebeasi
Copy link
Contributor

Thanks for the PR! This is resolved in Ionic Vue for Vue 3.

@liamdebeasi liamdebeasi closed this Oct 8, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: core @ionic/core package package: vue @ionic/vue package
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants