Codey

Appearance

Migration ​

vNext ​

All future migration info will be part of the changelog.

Codey components 6.x.x ​

The new release of the Codey components packages will bring a better alignment of the data-automation-id prop in the components. This brings the change that all the data-automation-id props have been changed to data-automation-id for each component instead of xer-data-automation-id.

The data-automation-id will now be correctly passed down to the child components for each Codey component.

If there is no data-automation-id prop passed on the Codey component, it will use the default value for the Codey component.

These changes might break the existing tests of your project since the change of the prop name will give different behavior on passing down the data-automation-id.

Codey components 5.x.x ​

A new package has to be added to contain all the icons and the icon plugin for Vue.js. For more information please visit the documentation here.

The new Codey Icons package requires some small changes in the XerIcon component. The way of using this component has stayed the same.

The component now will get the wanted component from $xerIcons which is available in the Vue instance because of the xerIconsPlugin.

Codey components 4.x.x ​

The textfields account number, birth date, password and social security number have been moved to the patterns package. These components are composed of business logic, so they are better placed within patterns.

If you are already using these components in your project, the import statement will need to be changed:

javascript
import {
  XerAccountNumber,
  XerBirthDate,
  XerPasswordTextfield,
  XerSocialSecurityNumber,
} from "@xerius/codey-patterns";

Codey components 3.x.x ​

The CDN url is no longer using the built-in Azure CDN URL. The infrastructure setup has also been improved in terms of reliability, we are now using a traffic manger behind the scenes to better handle fail-over's and migrations.

The new URL used to access Codey assets is:

https://cdn.xerius.be

Internally this has been changed in the two packages mentioned in the header. However if your application directly accesses the https://staccwexerius.blob.core.windows.net or https://static-we-codey.azureedge.net URL's, you should change all of these to the new CDN URL.

Codey components 2.x.x ​

This release will only drop the IE11 support, which is why it's a breaking change. However no migration steps are needed for this change.

Codey components 1.x.x ​

In the new version of components, we say goodbye to our icon webcomponent. This has been rebuilt to a Vue component, in order to fix multiple issues related to webcomponents.

Following changes need to happen:

Include Icon as Vue component ​

When importing a VueJs component, you can register it globally in your main.js file. Doing this will make the component available in your whole application.

js
Vue.component(ComponentName.name, ComponentName);

Another option is to register the component locally. This will make sure that the component is only available in the component where you have it registered (even subcomponents will not be able to use it).

js
export default {
  name: "App",
  components: {
    ComponentName,
  },
};

Include vue-async-computed dependency ​

To use the VueJs components it is also necessary to install and register some VueJs plugins.

shell
  npm i vue-async-computed
js
/* main.js */
import Vue from "vue";
import AsyncComputed from "vue-async-computed";

Vue.use(AsyncComputed);

Remove webcomponent setup ​

Since icon has become a Vue component. The setup for enabling the webcomponents can be removed:
First we no longer need the polyfill:

js
import "@webcomponents/webcomponentsjs/webcomponents-bundle";

We also no longer need to register webcomponents, following code can be removed as well:

import { ComponentName, registerWebComponents } from "@xerius/codey-components";

registerWebComponents([ComponentName]);