Enhance actionButtons 🚴🏻‍♂️

The actionButtons prop has been overhauled to be much more powerful!

Instead of only being able to use pre-made buttons and set custom buttons, now you can also:

• overwrite how the pre-made buttons look
• add not only custom buttons, but custom fields as well (via the same kind of schema you use for generating the forms!)

See the updated documentation on actionButtons.

v2.0.0 🌞 1/4 the size!

The only breaking changes with version 2.0.0 are related to subLabels!!
If you don't use markdown in subLabels, you can update to 2.0.0 without changing anything.

I didn't expect to have another major version bump so soon!

However, because of the markdown library I used for devs to be able to use markdown in sub-labels, it made the library very big. In fact, I use a different 1kb markdown library (snarkdown) now, and the package size was reduced by 75%!!

Breaking changes (only related to sub-labels):

1. cannot use markdown tables in sub-labels anymore
2. no code highlighting in markdown in sub-labels anymore
3. you're able to use html OR markdown in the sub-labels by default now

A word of caution:

The current markdown library takes markdown, converts it to HTML, then the sub-label uses v-html to bind that html! This means you cannot allow to have users-made sub-labels, because this would pose a security thread! I will look into improving this in the future, but please research the dangers of using v-html for yourselves.

v1.0.0 🌚👽👾

In version 1.0 I was able to greatly simplify easy-forms. There are no wrapper components needed for every field. You can directly use Quasar components or ANY component you create yourself, without requiring any setup!

Here is a list of all breaking changes.

Breaking changes

actionButtons

Action buttons now default to an empty array.

why:
It's better to be explicited about the components that should be rendered. It's easier to understand that there will be buttons shown at the top of an EasyForm if you see that they are actually passed.

It's good that there are buttons pre-made for us, but it's better that these are explicitly added.

how to update code:
Anywhere you have not defined action buttons you can pass the previous default ones if you like: ['archive', 'cancel', 'edit', 'save']

fieldType

EasyForms now uses component instead of fieldType.
The "component" field can be passed any component name (string) which is globally registered, OR you can pass a component options object directly.

It's very powerful because now you can have EasyForms use any Quasar component by eg. component: 'QInput'. You can also define all your own custom components and use those, as long as you register them globally via Vue.component()

why:
EasyForms used to provide a wrapper component for every single component that was usable. This becomes very unwieldly very fast. I refactored the code to be able to provide plain Quasar components.

how to update code:

1. replace fieldType: 'input' with component: 'QInput'
2. repeat for all field types

mode & formMode

EasyForm has a mode which can be 'view', 'edit', 'add' and 'raw'.
EasyField used to receive this prop as formMode but now receives it as just mode.

An individual field could have a different 'mode' by passing readonly: true or rawValue: true.
Now when you want to set the 'mode' of a single field, you should just set the mode the same as EasyForms: mode: 'raw'

Another change is that EasyForms used to have mode="view" by default, but now it defaults to mode="edit"

why:
Unified syntax. A single prop called "mode" can be set globally at the EasyForm or locally at EasyField.
I went for "edit" instead of "view" by default because then fields are editable by default and thus closest to their intended state. I think this will cause less confusion.

how to update code:

1. replace formMode (in evaluated props) with just mode
2. replace rawValue: true with mode: 'raw'
3. replace readonly: true with mode: 'view'
4. add mode: 'view' or mode="view" to EasyForms without mode set

disable

disable used to be ignored in the case readonly is true.
disable now is not modified as such any more.

why:
To avoid magic things happening without a strong reasoning. It will make working with EasyForms more predictable and thus easier to reason about.

how to update code:
If you have fields you set to disable: true but want it to be false when readonly: true you can do:

// change
{
  disable: true,
}
// to
{
  disable: (val, {mode}) => mode !== 'view',
}

evaluatedProps

An EasyField used to execute any prop which was a function to allow for these "Evaluated Props". Now you need to be explicit about which props you want to use as "Evaluated Props".

why:
Because now any component can a "field" (EasyForm doesn't use its own field wrappers). We cannot anticipate which props of these fields can accept functions.

how to update code:

The new prop called "evaluatedProps" defaults to an array with some prop names by default.
If your EasyForms only use Evaluated Props for the following props, you don't need to do anything:

;[
  'component',
  'showCondition',
  'label',
  'subLabel',
  'required',
  'rules',
  'fieldStyle',
  'fieldClasses',
  'componentStyle',
  'componentClasses',
  'disable',
  'events',
  'lang',
]

If you have other props in your schemas that were "Evaluated Props" you will have to manually pass an array with all props that you use as evaluated props: evaluatedProps: ['myProp', 'subLabel'] etc.

This can be defined on the EasyForm level or individually on the EasyField level.

format

The prop called format in which you could pass a function is now renamed to parseValue.
This was renamed for clarity because it's the opposite from parseInput. Now there is parseValue and parseInput. Much better!!

Just search & replace ;)

innerClasses, innerStyle

Both innerClasses and innerStyle are renamed to componentClasses & componentStyle to make it clear that these are applied directly to the component. Just search & replace ;)

CSS

The class .easy-field__field was renamed to .easy-field__component. Just search & replace ;)

externalLabels

The prop called externalLabels was true by default and meant that labels were shown in the EasyField and not the component.

Now when passing internalLabels: true it will show the labels as part of the component.

So instead of externalLabels: false you need to pass internalLabels: true instead.

Also check out the new prop: internalErrors

Changes to fields (check all!!)

I removed most fields, because they were just wrapper components without much additive value. Also, the focus of the library is now only on the form generation, not providing a bunch of fields.

You should update your code to use Quasar components directly instead. See below:

Fields I deleted:

title / EfTitle:

// Before:
{ fieldType: 'title', label: 'my title' }
// v1.0:
{
  // don't specify any component
  label: 'my title',
  span: true,
  fieldClasses: 'easy-field--title',
}

You can make title fields prettier via CSS. Eg.

.easy-field--title .easy-field__label
  font-weight: 600

Others:

// Before:
{ fieldType: 'btnToggle' }
{ fieldType: 'img' }
{ fieldType: 'input' }
{ fieldType: 'markdown' }
{ fieldType: 'range' }
{ fieldType: 'select' }
{ fieldType: 'slider' }
{ fieldType: 'toggle' }

// v1.0:
{ component: 'QBtnToggle', spread: true }
{ component: 'QImg' }
{ component: 'QInput' }
{ component: 'QMarkdown', noContainer: true, /* this is a bug fix */, noLineNumbers: true }
{ component: 'QRange' }
{ component: 'QSelect' }
{ component: 'QSlider' }
{ component: 'QToggle', default: false }

Some fields might have small differences in behaviour from my previous wrapper components. However, you can check the source code of my wrapper components here and copy the wrapper components to your project if you want.

No equivalents:

// Before:
{ fieldType: 'inputDate' }
{ fieldType: 'link' }
{ fieldType: 'pdf' }
{ fieldType: 'uploaderFirebase' }
{ fieldType: 'video' }

// v1.0
// these don't exist anymore.

You can copy my old source code.

It's better to have these components defined locally anyway, then it's much more flexible when you need new functionality.

Fields I kept as is:

// Before:
{ fieldType: 'btn' }
{ fieldType: 'div' }
{ fieldType: 'form' }
// v1.0:
{ component: 'EfBtn' } // because this is used in the action-buttons
{ component: 'EfDiv' }
{ component: 'EfMiniForm' }

I updated the name to EfMiniForm to make it easier to understand that this is a mini form, not a full fledged EasyForm.

formDataNested

formDataNested was renamed to just formData. Just search & replace ;)

v1.0.0-beta.2 🏄🏼‍♂️

Wrapping up the changes; will release v1.0 soon.

-- breaking changes deleted and re-post in the 1.0.0 release changelog --

v1.0.0-beta.1 🎉🎉🎉

I plan to release v1.0.0 within a day or two.

-- breaking changes deleted and re-post in the 1.0.0 release changelog --

v0.11.0 ⛵️

Check my plans for version 1.

Breaking

• removed preset rules 'telJA' and 'email'.
  You need to add them yourself.

Features

• new hasMarkdown prop for markdown in subLabel! 👙

Fixes

• nested data is emitted as flat data instead of nested data 💊
• render spaces with suffix / prefix in raw mode 🚴🏻‍♀️
• bug fix action buttons 💜
• don't use label field when no label is present 🐘
• remove big prop 🤖 (previously deprecated)
• Allow overwriting of more props per EasyField 🐘
• Fix margins in between label, sublabel, field 🥩
• Bug fixes 'select' 🥩
• fixes q-markdown 💫
• fix EfDiv prop type 💝

v0.10.0 💎

Quasar ui Easy Forms is finally ready to go to the world.

Be sure to check the demo page!
Feel free to open issues!! ♥

Below some changes since 0.9.0:

New

• feat(div) new fieldType: div (EfDiv) field 🚘
• feat(markdown) new fieldType: markdown (EfMarkdown) field 🧑‍🎤
• feat(EasyForm) new prop mode: raw 🚛
• feat(EasyField) new prop rawValue 🚚
• feat(img, video, markdown, pdf) "src" to pass content 🤿

Fixes

• fix(div) value for single selections as object 🏸
• fix(docs) correctly parse value in source tab 🥅

Improvements

• improve demo pages 🚃
• update dependencies 🚠
• improve export mechanism 🚦
• improve demo for some EasyFields 🖍
• rework the way demo pages are rendered 💕
• improve code organisation
• improve Advanced demo 🦍