V3 Migration guide

[Windvis]

Appuniversum v2 to v3 migration guide

Components

<AuButton>

This tertiary skin value was replaced by the link skin:

- <AuButton @skin="tertiary" />
+ <AuButton @skin="link" />

<AuControlCheckbox>

This component is removed. Use the <AuCheckboxGroup> component instead (or <AuCheckbox> in specific scenarios).

<AuControlRadio>

This component is removed. Use the <AuRadioGroup> component instead (or <AuRadio> in specific scenarios).

<AuDatePicker>

The labels are now in the Dutch language. If your project needs to support other languages it can still provide custom labels through the @localization argument.

You can now also remove the buildConfig['@appuniversum/ember-appuniversum'].dutchDatePickerLocalization entry from your ember-cli-build.js file.

<AuDropdown>

Rename the @dropdownLabel argument to @title.

<AuInput>

2-way-binding

The 2-way-binding functionality was removed. Replace @value with the regular value attribute and add an event handler to update the value.

- <AuInput @value={{this.value}} />
+ <AuInput value={{this.value}} {{on "input" this.updateValue}} />

[!NOTE]
An easy way to migrate, without having to add custom handlers for each input, is to add an event-value helper.

Show the code

```js // app/helpers/event-value.js export default function eventValue(handler) { return function (event) { return handler(event.target.value); }; } ``` Which can then be used like this: ```hbs ```

@type argument

Replace @type with the type attribute.

Input masking

The input masking functionality was moved from the component into the dedicated {{au-inputmask}} modifier. Remove the @mask and @maskOptions arguments and apply the modifier to the <AuInput> component.

Code example

```diff - + ``` ```diff // backing .js file - handleChange(value) { - this.value = value; - } + handleChange(event) { + this.value = event.target.inputmask.unmaskedvalue(); + } ```

<AuLoader>

Rename the @size argument to @padding.

<AuModal>

The magic wormhole element feature is removed. Add the <AuModalContainer /> where it makes sense (top of the application.hbs is a good default) and remove the buildConfig['@appuniversum/ember-appuniversum'].disableWormholeElement entry from your ember-cli-build.js file.

<AuTextarea>

2-way-binding

The 2-way-binding functionality (@value) was removed. Replace @value with the regular value attribute and add an event handler to update the value.

<AuToggleSwitch>

2-way-binding

The 2-way-binding functionality was removed. Add an @onChange action that flips the @checked value instead.

@label argument

The @label argument was removed. Pass the label as the block value instead.

- <AuToggleSwitch @label="Some toggle" />
+ <AuToggleSwitch>Some toggle</AuToggleSwitch>

Other

Styles

The style import paths have changed. Import them from the new location. You might need to configure the includePaths for your Sass compiler so it can find the files.

Dependencies

Ember support

We dropped support for all Ember versions that are no longer officially supported. The new minimum Ember version is now Ember 4.12 LTS

Node support

Node 18 is now required.

Addons

We updated all dependencies / peerDependencies to their latest versions. It's possible that you might need to update some dependencies or reroll the lock file to make ember-cli-dependency-lint happy.