Releases: CyCraft/blitzar
Filters
Vue 3 Release ⚡️
Blitzar has finally landed for Vue 3!
Check the brand new docs at:
Breaking Changes
-
npm i blitzar
will now default to the Vue 3 version. -
for now check this thread for breaking changes: #55
will try to improve the information on the breaking changes and post them here and in that thread soon, so click the Subscribe button in that thread for updates!
Blitzar release ⚡️
Blitzar release!
- see blog post here: https://lucaban.medium.com/better-faster-vue-forms-with-blitzar-a0d71258a3bb
- see documentation here: https://blitzar.cycraft.co
Blitzar has organically grown from my old library quasar-easy-forms.
Upgrade guide from Easy Forms
・・・New features・・・
slot prop!
You can now use the slot
prop in your schema. This makes BlitzForm super powerful and easy to use with native HTML5 elements that just accept stuff in their default slot.
Example:
<BlitzForm :schema="[{ component: 'button', type: 'button', slot: 'click me!' }]" />
Etc.
There are many many other small fixes, improvements and new features! It's best to read through the new documentation!
・・・Breaking changes・・・
renamed EasyForm EasyTable → BlitzForm BlitzTable
find and replace all of these instances:
- EasyForm → BlitzForm (and EasyField → BlitzField)
- EasyTable → BlitzTable
- EfMiniForm → BlitzListForm
find and replace all usage of css classes
- easy-form → blitz-form (and easy-field → blitz-field)
- easy-table → blitz-table
- ef-mini-form → blitz-list-form
renamed default → defaultValue
reason: for clarity and to prevent clashing with reserved keywords.
find and replace default:
with defaultValue:
in all your schemas
deprecated EfBtn
reason: EfBtn was just a wrapper around QBtn but had the extra prop called "btnLabel" to make sure you could differentiate between the actual label on the button and the label of the field inside the form.
However, I found a solution for getting around the duplicate QBtn label
field that clashes with our fields!
For this reason I deprecated the fact that the form uses the EfBtn for the actionButtons
and now default to HTML5 buttons instead.
To keep your forms as is just add this to your forms:
const ACTION_BUTTON_DEFAULTS = {
edit: { component: 'QBtn', slot: 'Edit' },
save: { component: 'QBtn', slot: 'Save' },
cancel: { component: 'QBtn', slot: 'Cancel' },
archive: { component: 'QBtn', slot: 'Archive' },
delete: { component: 'QBtn', slot: 'Delete' },
}
this is only for the forms where you are actually using the action buttons though! ↓
<BlitzForm :actionButtonDefaults="ACTION_BUTTON_DEFAULTS" :actionButtons="['edit', 'save', 'cancel', 'archive', 'delete']" />
However, in the future you might want to use your own original button components, since one of the focuses of BlitzForm is BYOC (Bring Your Own Components), this is a better solution:
<BlitzForm :actionButtonDefaults="{ edit: { component: 'MyButton', buttonLabel: 'Edit' } }" :actionButtons="['edit']" />
deprecated EfDiv
reason: EfDiv was never really meant for direct use outside my Library and I want to keep my Library as minimal as possible and EfDiv always felt kinda awkward.
It was changed to be a single function that my other components use internally. Feel free to reach out in an issue if you need more info.
deprecated valueType: 'date'
and dateFormat
reason: it's not good to have an entire "date library" as dependency of this package. It's better to have the user provide the logic themselves with whatever library they are already using.
// before
{
valueType: 'date',
dateFormat: 'YYYY/MM/DD',
}
// now:
// you need to provide your own `formatDate` implementation in `parseValue`
// eg.
{
parseValue: val => formatDate(val, 'YYYY/MM/DD'),
}
small update on internalErrors
EasyForm/BlitzForm has the ability to display errors for any field, or you can pass internalErrors: true
if you are handling errors in your schema's component itself instead.
Before, fields with certain component names it would automatically enable internalErrors: true
:
- QInput, QSelect, QField, EfInput, EfSelect, EfInputDate, q-input, q-select, q-field
Now you can pass an array with component names for those you want to have internalErrors. eg.:
<BlitzForm :internalErrorsFor="[ 'MyInput', 'QInput', 'QSelect' ]" />
In case you only ever used Quasar "input" or "select" components, you don't need to set this, because it will default to: ['QInput', 'QSelect', 'QField', 'q-input', 'q-select', 'q-field']
deprecated preset actionButtons for BlitzTable
Before, in BlitzTable there were 3 preset buttons you could show on the top-right of a table like so:
<BlitzTable :actionButtons="['grid', 'add', 'duplicate']">
Now 'add'
and 'duplicate'
are deprecated and 'grid'
is the only one that remains. The grid button also uses a different icon now.
Reason: It's now more easy than ever to add custom buttons with custom behaviour to the top right of the BlitzTable. actionButtons
now doesn't force the schema passed to it to be buttons at all. You can pass a schema just like BlitzForms to actionButtons
, so you can more easily bring your own components and integrate your requested behaviour via events: { click: () => {} }
in the schema.
- See BlitzTable - Adding a new record on how to integrate an "add" button
- See BlitzTable - Selection on how to integrate a button that shows up when rows are selected