I have released the official Vue 3 Blitzar! 🎉

• See new docs:
  https://blitzar.cycraft.co/

--

• double check wether or not the documentation of blitzar covers all use cases & features for the Vue 2 version
• recreate the documentation in Vite + Vue 3 with all the markdown content ready.
• start implementing all the examples of the docs one by one.
  • completely rewrite BlitzForm, BlitzTable, BlitzListForm based on this rewrite
  • keep an ongoing list of breaking changes

--
Breaking Changes For Blitzar + Vue 3

BlitzTable

BlitzTable was completely rewritten and has changed a lot.

• Please check out the new documentation on BlitzTable and adjust accordingly.
• Some features are not yet re-implemented like conditional/dynamic styles & classes but they will be soon

BlitzForm

renamed terminology

• @input to @update:modelValue
  • reason: Vue 3 requirement
• @field-input to @updateField
  • reason: update-field makes sense with Vue 3 terminology (because Vue 3 doesn't rely on @input anymore)
• @input-cell to @updateCell
  • reason: same as above
• fieldInput (the function) to updateField
  • reason: same as above
• evaluatedProps to dynamicProps
  • reason: clarity — Dynamic Props is a bit easier to understand imo.
• mode: 'view' to mode: 'readonly'
  • reason: clarity — closer to HTML5 readonly attribute

upgrade strategy for the above:

• find and replace

Deprecated props

• deprecate rules validation array per field
  • reason: we do not use Quasar under the hood anymore, rules was only used because Quasar's QField uses it for Validation
  • I have thought a long time about the best way of implementing Validation, looking at VeeValidate, Vuelidate, Quasar, Vuetify and others, and have realised we already have a very simple implementation of form validation via Dynamic Props... So to reduce codebase complexity, I have added a new prop called error where you can simple pass a validation function much like the rules prop before. The difference is, it's a single function (to be marked as dynamicProps: ['error']) and you make it a single function that returns null if there's no error, or the error you want to display when there is one.
  • upgrade strategy: Read the new Documentation on Validation here. Please scroll to "validation" at the bottom

// before
{
  rules: [(val) => Number(val) > 18 || 'no minors allowed']
}
// after
{
  dynamicProps: ['error'],
  error: (val) => Number(val) > 18 ? null : 'no minors allowed'
}

• deprecate prop internalErrorsFor array of field-names

  • reason: reduce codebase complexity & delete less common options to reduce size
  • upgrade strategy: just add internalErrors: true to the fields you need this

• deprecate prop validator global validation function

  • reason: reduce codebase complexity & delete less common options to reduce size
  • upgrade strategy: just add error validation to each field in your schema instead

• deprecate mode: 'add'

  • reason: reduce complexity
  • upgrade strategy:
    • check if your forms rely on mode: 'add' by doing a global search for add
    • write custom logic to difference between mode: 'add' and mode: 'edit'