Different forms

Hi,

I was analyzing the code and realised you were using 2 different forms (as far I could see). Form of ElementPlus and VeeValidate. E.g. ElementPlus is used is AddCustomerModal.vue and VeeValidate is used in NewCardModal.vue.

You have documentation about VeeValidate (https://preview.keenthemes.com/metronic8/vue/docs/#/vee-validate) but not about ElementPlus.

Which one is the correct one to follow for further development? Can I remove ElementPlus, if yes which packages should I remove?

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)

Hi,

Yes, we are using two libraries to handle forms in Metronic, Element Plus form items are great if your form contains more advanced form input fields such as TimePicker, DatePicker, DateTimePicker e.t.c, also they provide a huge component base that you can use together with Metronic. VeeValidate handles form validation, it is easier to use them when you are using our Wizard component.

You can find more info about Element Plus usage in their official documentation.
https://element-plus.org/en-US/component/button.html

To remove Element Plus, firstly, you have to search for all usage places in a project and get rid of them, after that you can remove element-plus dependency from your package.json.

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Thanks, I understand. But the styling of both forms is different. In which component did you use ElementPlus form with the correct styling? So I want the styling of AddCustomerModal.vue be the same as NewCardModal.vue

Hi,

The difference is that in AddCustomerModal.vue we are using Element Plus form elements, but NewCardModal.vue plain HTML elements.

You can easily customize plain HTML inputs using our bootstrap styles but in the case of Element Plus, this could be done by adding custom styles. In Metronic for Element Plus, at the moment, we are using a default styling of components. If you decide to use Element Plus components then you shouldn't combine them with plain HTML input elements.

You can find all available components for forms in their official doc: https://element.eleme.io/#/en-US/component/radio

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(