Skip to content

Blitzar release ⚡️
Compare
Choose a tag to compare
@mesqueeb mesqueeb released this 08 Jan 06:50
· 380 commits to production since this release
v0.0.14
49b84e8

Blitzar release!

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.

Assets 2
Loading