Changelog

20.0.0-next.0

Major Changes

8b12cc7: [XerApplicationShell]: renamed sideNavBar prop to navBar. renamed sideNavBar.sideNavBarContent prop to navBar.content.
[XerApplicationShell]: renamed data-automation-ids:
- side-nav-bar-element_icon becomes app-shell-menu-item_icon
- side-nav-bar-element_chevron-icon becomes app-shell-menu-item_chevron-icon

Minor Changes

8b12cc7: [XerApplicationShell]: Added with-bottom-nav-bar example.
[XerCheckbox]: Added binary example.
8b12cc7: [XerApplicationShell]: Added navbar.mode optional prop.
- mode: "side" | undefined: displays the SideNavBar.
- mode: "bottom" displays the BottomNavBar.
BottomNavBar currently only supports up to 5 items, any more are filtered out. A BottomNavBar's content should be top-level menuitems without link or command if they contain subContent. If a BottomBar contains subContent, clicking it will navigate to the link of the first subContent item that contains one.
An example was created in the playground at /application-shell/with-bottom-nav-bar.
[XerApplicationShell]: Added support for safe-area-insets to the Header, Footer, BottomNavBar.
Specifically we currently only adjust for top and bottom, with cascading variables lookup: First we look for css properties, if those are not defined the env() variables that browsers can define are used. If none are found fall back to zero.
The best course of action to make use of this should be to do nothing. But if the correct value is not in the env() variables, you can override them by setting css properties (we recommend setting the properties on the <html> element). Currently used:
- --safe-area-inset-top (overrides env(safe-area-inset-top))
- --safe-area-inset-bottom (overrides env(safe-area-inset-bottom))
It is safe to assume that in the future there might be support for the following:
- --safe-area-inset-left
- --safe-area-inset-right
[XerSideBar]: Support for top and bottom safe-area-insets (see XerApplicationShell)

Patch Changes

8b12cc7: [XerApplicationShell]: fix: increased z-index elements (like mobile header navbar) are displayed below PrimeVue's z-index.
[XerApplicationShell]: fix: aria-controls value on mobile header menu button is incorrect.
[XerApplicationShell]: refactor: Footer layout and separator refactored, made sure separator is never shown as first item regardless of ApplicationShell config used. Added presentation role to separators.
[XerApplicationShell]: a11y: Added aria-controls attribute to XerSideNavBar Elements that expand/collapse a submenu. Added role="menu" attribute to submenus.
8b12cc7: [XerApplicationShell]: Removed unused props: header.mobile.labels.settingsLink and header.mobile.labels.logoutLink. The correct way to define these was previously changed to prop: header.mobile.menuItems.
8b12cc7: [XerApplicationShell]: fix: HeaderMobile not fully on screen when mobile menu is opened while window is scrolled down a by a bit in non-sticky applicationShell.

19.1.0

Minor Changes

8a98440: [XerSitemap]: If provided routes have i18n meta, use XerLocalizedRouterLink to correctly link within vue apps using localized-routing.
[XerSitemap]: Less margin around the sitemap, added responsive mobile adaptions to the list.

Patch Changes

b9c58f6: [XerSitemap]: fix: useI18n should run in setup script, not inside computed(). [XerSitemap]: fix: remove bg and text color styling, so it is more adaptable to various app layouts/styles.
89a71e0: [XerApplicationShell]: fix: Mobile menu doesn't close after clicking on menu item.
b7b8f94: [XerSitemap]: refactor .replace() with regex parameter to more readable .replaceAll.
8a98440: syncpack sortExports rule update.
Updated dependencies [8a98440]
- @xerius/codey-core@8.1.0
- @xerius/codey-tailwind@2.1.2
- @xerius/codey-assets@2.0.1

19.0.0

Major Changes

937ce70: XerApplicationShell: Created new XerMainShell as optional wrapper for the Application Shell main content. This allows for a more flexible use of the application shell by the applications.
The XerMainShell component provides a consistent layout (responsive and optional wave figure) which is set in the foundations of the Codey design system. It is recommended to use this component to ensure a consistent look and feel, but you can opt out by not using it.
To Migrate:
The applications are given more flexibility to customize their layout to their designs. This means that you will have to update your application content styling to match with the design of your application.
The XerMainShell is recommended to be used to set a good foundation for your application layout. It is possible to add and overwrite the default set classes by passing the class attribute on the XerMainShell component.
It is possible to opt-out of the wave figure by setting the showWave prop to false.
- Remove any classes set on the XerApplicationShell component.
- Add the XerMainShell component to wrap your main application content.
- Add any classes you want to set on the XerMainShell component.
- Optional: Set the showWave prop to false if you do not want to show the wave figure.
vue
```
<template>
  <XerApplicationShell v-bind="appShellProps">
    <XerMainShell class="w-fit" :show-wave="false">
      ... // Your main application content goes here
    </XerMainShell>
  </XerApplicationShell>
</template>
```

Patch Changes

fa871ef: XerAccordion: Fix typing of emits of PrimeVue wrapped Accordion components. Fixes type hinting for @tab-open callback function not containing an event argument.
aa93b46: XerApplicationShell: fix: sidebar shadow leak causes small top border
fa871ef: Updated vue dependency from vue@3.5.13 to latest patch version vue@3.5.15.
Updated dependencies [fa871ef]
- @xerius/codey-tailwind@2.1.1

18.1.0

Minor Changes

ba7ebf4: XerApplicationShell: Add support for showing partner icon in ApplicationShell header. To use, set header.logo.partnerIcon and header.logo.partnerAlt props in XerApplicationShell.

Patch Changes

d2bc146: XerApplicationShell: fix tailwind v3 important modifier syntax on descendent selectors
eae75f0: XerApplicationShell: fix important override of ampersand color in partner logo
f180694: XerApplicationShell: fix application shell partner icon is small when tailwind global important setting is turned off

18.0.0

Major Changes

2d3f110: XerApplicationShell: Removed the preset padding around the main content in the ApplicationShell.
To Migrate:
- Add the padding needed for your application to the content that is passed to the main slot of the XerApplicationShell component.

Minor Changes

5856b1a: Update ApplicationShell's Side- and Mobile NavBar.
- Collapsed parent of active MenuItem is now highlighted.
- Highlight of active MenuItems changed from border to an inset shadow so the highlight takes up no space.
- State management code refactored (functionality should be the same).
2149c6e: XerButton: Set the default variant prop value to 'stroke' instead of undefined.
cbc4347: XerInfoCard: Add new prop titleHeadingIs to set the heading level of the title element, h1-h6 for better semantic HTML. By default this is a h2.
e072412: XerButton: add new CTA Outline variant. Usage: set the prop variant to cta-outline.

Patch Changes

2149c6e: XerButton: fix the icon size for the cta-outline button variant to md instead of sm.
cbc4347: XerInfoCard: update semantic html. Wrapping div is now an article.
08aea05: XerHeader: Fix where the avatar icon and button are now only visible on medium devices and up.
Updated dependencies [2c681ac]
- @xerius/codey-tailwind@2.1.0

17.0.0

Major Changes

2f19259: Breaking change to the XerApplicationShell header props to accomodate breaking change in codey-assets.

Migration example:

diff

  const appShellProps = {
    header: {
      logo: {
        logoLink: "https://myfamily.be/",
        logoAlt: "My Family Logo.",
        codeyImageName: "logo",
-       codeyImageFolder: "myfamily",
+       codeyImageTheme: "myfamily",
      },
    },
    footer: {
      legalSettingsLink: {
        label: "The legal info",
        href: "#",
      },
    },
  } satisfies ApplicationShellProps;

dca02aa: Node: Upgraded from node@18.18 to node@22.14.
To Migrate:
- Update the node version in the volta configuration in the package.json file.
- Update the engine version in the package.json file.
- Update the node version in any ci/cd pipes that have a fixed version.
- Remove your node_modules and run a npm install.
- Ensure all dependencies are compatible with the new node version.
- If your package contains @tsconfig/node18 dependency, update it to @tsconfig/node22. Search for string occurence of @tsconfig/node18 in tsconfig files and replace there as well.
256e331: vue: updated peerDependency from vue@3.4.27 to vue@3.5.13.

Minor Changes

e1f8aae: Migrated Display Accordion from custom code to wrapped PrimeVue.
19bc32f: Updated & applied new tsconfig settings for consistant type checking within the codey repo.
20d4208: XerApplicationShell: added new prop codeyMobileImageName for optional mobile logo. When not provided and there is a codeyImageName it will set to that prop. Otherwise the default value is logo.
3f5faac: XerApplicationShell: Set the header, footer and sidenavbar fixed in place and make the main content and sidenavbar scrollable when overflowing the provided space they get in the grid container.
2f19259: refactored accordion emits to dynamically re-emit primeVue's emits. This change should be backwards compatible.
50681fd: XerIcon: add new icons for the My Xerius design.
Icons added:
- xerArrowDown
- xerArrowLeft
- xerArrowRight
- xerArrowUp
- xerBellOutline
- xerContractOutline
- xerHomeOutline
- xerQuestionmarkChatOutline
- xerSendOutline
- xerShieldOutline
ccfa187: Vite and testing dependencies: upgrade to latest version of Vite and Testing dependencies.
- Vite: 6.2.3
- @vitejs/plugin-vue: 5.2.3
- Vitest: 3.0.9
- @vitest/coverage-v8: 3.0.9
- jsdom: 26.0.0
- @playwright/test: 1.51.1

Patch Changes

f740e78: Eslint: update to latest @xerius/eslint-config using helper function for flat config.
088a667: XerApplicationShell: add a z-index of 1 to the SideNavBar to allow shadows to fall correctly.
b5b6466: Filepond: updated dependency package to v4.32.7
1c5271a: Removed unused package dependency uuid, mitt, punycode, text-mask-core.
ccfa187: Tests: fix unit tests to match latest Vitest dependencies changes.
634c8c1: XerInlineMessage: update styling to be more flexible.
010e593: XerApplicationShell: Add padding for the x axis on the main element instead of only the left side.
9edb082: XerHeader: fix to remove space after header menu item texts due to new line in code.
9329413: XerApplicationShell: Fix menu items not being closed within mobile view.
0d1f2f4: Module tree-shaked css is not imported in js module by default, so we add the imports in our tooling.
8ef6426: XerApplicationShell: Fix not being able to scroll after a menu item closes on the mobile menu.
Updated dependencies [6af5e4f]
- @xerius/codey-tailwind@2.0.0
- @xerius/codey-assets@2.0.0

16.0.0

Major Changes

f36ec5c: vue-router: Add required peerDependency to vue-router@4.5.0
f36ec5c: XerSitemap: change prop currentLanguageCode type from Locale to string, removing the vue-i18n dependency.
To migrate:
Replace any type usage of Locale with string in your codebase. The underlying type of Locale within the i18n library is string.

Minor Changes

9425bab: XerSitemap: Added ignoredGroups optional prop to exclude groups from rendering.
54154fc: XerLanguageSwitch: added that the Locales for PrimeVue change when the language changes. This makes it possible to have the correct i18n translations in the PrimeVue components.
54154fc: Plugin: added the default PrimeVue locale and set it to 'nl'. The new plugin option primeDefaultLcoale allows to set the default PrimeVue locale in the plugin.
af8a12b: XerBreadcrumb: add a new homePath prop to set the path of the home breadcrumb.

Patch Changes

f36ec5c: Fix incorrectly configured dependencies cause build output to contain vue library code.
9425bab: XerSitemap: Routes without a group will be added to an empty group by default instead of crashing the code.
6e36446: XerHeader: fix issue where passing only one value of the header logo prop object would overwrite the other default values.
dcea24c: XerHeader: make codeyImageName & codeyImageFolder optional as it has default values.
3eec4ee: XerSidebar: fixed background colors when wanting the mask backdrop to appear.
1d65cd0: XerHeader: Don't show separator when no other items besides the mobile menu button is in the mobile header.
a7b3870: Plugin: fixed that the options are optional again.
dcea24c: XerHeader: use XerLink component for the header menu items and map the url prop correctly
481d18b: XerChart: chart.js is moved back to a dependency instead of a peerDependency. Builds fail when not having chart.js installed even when not using XerChart.
9ee15b1: XerHeaderMobile: fixed that background could still scroll when menu was open.
de7fb70: XerOnboarding: removed test data that was displaying in the template.
3b320cf: XerApplicationShell: The icons for the menu items are now optional.
Updated dependencies [1031b18]
- @xerius/codey-tailwind@1.1.0

15.0.0

This is a major overhaul of the component library moving to the new Design Style for Xerius 2025. This release includes a lot of breaking changes and new features. The main package changes are:

The xer- prefix is removed from all component props and emits. Components names are still prefixed with Xer.
The @xerius/codey-style has been removed in favor of @xerius/codey-tailwind and @xerius/codey-assets. Check the changelogs for those packages for more information.
The internal styling is fully migrated to TailwindCSS and now supports theming (xerius/myfamily).

Major Changes

795d76c: Components: The xer- prefix is removed from all component props and emits. Components names are still prefixed with Xer.

To migrate:

Remove the xer- prefix from all component props and emits.

example: from:

<script setup lang="ts">
import { XerDivider } from "@xerius/codey-components";
</script>

<template>
  <XerDivider xer-size="large" />
</template>

to:

<script setup lang="ts">
import { XerDivider } from "@xerius/codey-components";
</script>

<template>
  <XerDivider size="large" />
</template>

342d45d: Bump of Node engine to >=18.0.0
342d45d: XerButton: Refactor of the button component to be inline with the new design styling.
We have updated the button component to use TailwindCSS and CSS variables instead of the Codey-style package theming. The original CTA button has been updated to use TailwindCSS classes, but the styling remains the same.
We have added new variants to the button component. This is the full list of variants:
- cta
- full
- stroke
The Stroke variant has the possibility to change the color of the stroke / border using the variantColor prop with one of the following values:
- cta
- brand
- base (previously default)
All variants and variant colors can be found as type in the codey-components package.
We have refactored the xerType prop to variant to be inline with the new variantColor prop.
To migrate:
- Replace all xerType props with variant
- Replace the old button type / variants to the new ones
- If using the stroke variant, add the variantColor prop with the desired color
c671502: Update @xerius/codey-components peer dependencies:
To Migrate:
- Ensure you have installed @xerius/codey-tailwind and @xerius/codey-assets as dependencies in your project.
b1707d3: XerToggleSwitch: Component replaced by XerInputSwitch, adopted from PrimeVue.
852f364: chart.js: Peer Dependency chart.js upgraded from v3 to v4. For migration info check the migration guide here.
342d45d: Option Control: This component is a helper component for option input components like XerCheckbox and XerRadioButton. It contains the label and subcontent to display the full control. It has a default slot where the form component can be placed and used directly as child component. It has the prop container to change the look and feel of the option input.
The Option Control handles the needed props and slots for the other components (label, caption and error).
For example with the XerRadioButton component:
js
```
<script setup lang="ts">
import { ref } from "vue";
import { XerOptionControl, XerRadioButton } from "@xerius/codey-components";

const optionValue = ref("");
</script>

<template>
  <XerOptionControl input-id="ingredient" label="Cheese">
    <XerRadioButton
      v-model="optionValue"
      input-id="ingredient"
      name="pizza"
      value="Cheese"
    />
  </XerOptionControl>
</template>
```
ae15743: XerErrorList: Deprecated in favor of XerFormControl and XerOptionControl.
cdda0a4: States: Examples removed as this is no longer applicable.
To Migrate:
- Check out the design guidelines or designs for the latest representation of states depending on your application.

3efcdc6: XerTabs: is replaced by PrimeVue XerTabView, it's documentation can be found here.

To Migrate:

Replace the XerTabs imports with XerTabView and XerTabPanel imports.
Provide the content through the XerTabPanel component.

Example:

javascript

<script setup lang="ts">
import { XerTabs, type Tab } from "@xerius/codey-components";

const tabs: Tab[] = [
  { name: `summary`, content: `Samenvatting` },
  { name: `history`, content: `Historiek` },
];
</script>

<template>
  <XerTabs :tabs="tabs" active-tab="summary" />
</template>

To:

javascript

<script setup lang="ts">
import { XerTabView, XerTabPanel } from "@xerius/codey-components";
</script>

<template>
  <XerTabView>
    <XerTabPanel header="summary">
      <p class="m-0">
       Samenvatting
      </p>
    </XerTabPanel>
    <TabPanel header="history">
      <p class="m-0">
       Historiek
      </p>
    </TabPanel>
  </XerTabView>
</template>

342d45d: Dropdown: Refactor to PrimeVue Dropdown component. Before you would use the XerTextfield component as a wrapper, this not needed anymore.

It is recommended to use the XerFormControl component for a more complete UI with label, caption and error message.

All the props have been changed to be named without the xer- prefix and extended with those from the Prime Vue Dropdown component. (PrimeVue documentation)[https://v3.primevue.org/dropdown/].

To migrate:

Use the XerFormControl component for a more complete UI.
Replace the XerDropdown component with the XerFormControl component and place the XerDropdown component as a child component in the default slot.
Import the XerDropdown component from the Codey Component package.
Remove the xer- prefix from the props and events. (e.g. xer-options -> options)

For example:

from:

<script setup lang="ts">
import { ref } from "vue";
import { XerDropdown } from "../index";
import { XerTextfield } from "../../textfield";

const selectedValue = ref(undefined);
</script>

<template>
  <XerDropdown v-slot="props" @xer-update-selected-option="selectedValue = $event">
    <XerTextfield
      v-bind="props"
      xer-label="Dropdown"
      :xer-float-options="false"
      :xer-options="[
        { label: `dropdown item`, value: `option value 1` },
        { label: `dropdown item 2`, value: `option value 2` },
      ]"
      @blur="props.setHideOptions"
      @focus="props.setShowOptions"
      @xer-option-click="props.selectOption"
      @xer-icon-click="props.toggleOptions"
    />
  </XerDropdown>

  <div class="xer-mt-5">
    Selected value:
    <pre data-automation-id="selected-value">
      {{ selectedValue }}
    </pre>
  </div>
</template>

to:

<script setup lang="ts">
import { ref } from "vue";
import { XerDropdown, XerFormControl } from "../../index";

const selectedValue = ref(undefined);
const cities = ref([
  { name: "New York", code: "NY" },
  { name: "Rome", code: "RM" },
  { name: "London", code: "LDN" },
  { name: "Istanbul", code: "IST" },
  { name: "Paris", code: "PRS" },
]);
</script>

<template>
  <XerFormControl label="Select a City">
    <XerDropdown
      v-model="selectedValue"
      :options="cities"
      option-label="name"
      placeholder="Select a City"
    />
  </XerFormControl>

  <h3 class="xer-font-bold">Your value is:</h3>
  <p>{{ selectedValue }}</p>
</template>

342d45d: XerAccordion: Renamed to XerDisplayAccordion

833c523: XerModal: Refactor to PrimeVue Dialog component. More information about the component can be found in the (PrimeVue documentation)[https://v3.primevue.org/dialog/].

To migrate:

change the open prop to use v-model:visible
remove the title and add the value into the default slot
remove the @close event since it is now linked with the v-model directive
add the modal prop to enable the modal backdrop
add the dismissable-mask prop to enable the modal to be closed by clicking on the backdrop
add the draggable prop with a false value to disable drag behavior.
add the position prop with the right value if you need it to the Slide Out variant.

For example:

from:

<script setup lang="ts">
import { ref } from "vue";
import { XerButton, XerModal } from "@xerius/codey-components";

const open = ref(false);
</script>

<template>
  <XerButton @click="open = true"> Open Modal</XerButton>

  <XerModal title="modal title" :open="open" @close="open = false">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut necessitatibus in quidem, aliquid id
    est autem
  </XerModal>
</template>

to:

<script setup lang="ts">
import { ref } from "vue";
import { XerButton, XerModal } from "@xerius/codey-components";

const open = ref(false);
</script>

<template>
  <XerButton @click="open = true"> Open Modal</XerButton>

  <XerModal v-model:visible="open" modal dismissable-mask :draggable="false">
    <h2 class="typo-secondary-title">Bedankt! We hebben je aanvraag goed ontvangen.</h2>
    <p>
      Wij bellen je vandaag of morgen op om met jou af te spreken hoe we je het beste kunnen helpen.
      In je mailbox vind je alvast een bevestiging van je verzoek.
    </p>
  </XerModal>
</template>

342d45d: Password: Refactor to PrimeVue Password Textfield component. Before you would use the XerTextfield component as wrapper, this is not needed anymore. Since the component now uses Prime Vue under the hood, the need for zxcvbn-ts for the password strength meter is removed.
It is recommended to use the XerFormControl component for a more complete UI with label, caption and error message.
All the props are extended from the Prime Vue Password component. (PrimeVue documentation)[https://v3.primevue.org/password/].
To migrate:
- Remove any zxcvbn-ts package dependencies from the project.
- Use the XerFormControl component for a more complete UI.
- Replace the XerPassword component with the XerFormControl component and place the XerPassword component as a child component in the default slot.
- Add the needed props and events to the XerFormControl if needed.
- If you don't use the XerFormControl component, keep the XerPassword component as is.
js
```
<script setup lang="ts">
import { ref } from "vue";
import { XerFormControl, XerPassword } from "../../index";

const passwordValue = ref(undefined);
</script>

<template>
  <XerFormControl label="Password" caption="This is the caption">
    <XerPassword v-model="passwordValue" />
  </XerFormControl>
</template>
```

be40c8c: Textarea: Refactor to PrimeVue input text component from XerTextarea.

It is intended to use the XerFormControl component for a more complete UI with label, caption and error message.

Migration:

Textarea: The XerTextarea component is now using the Prime Vue Textarea component under the hood. It inherits the props and events from the Prime Vue Textarea component. (PrimeVue documentation)[https://v3.primevue.org/textarea/]. All other custom props and events are moved to the XerFormControl component.

To migrate:

Use the XerFormControl component for a more complete UI.
Move and map the props and events from the XerTextarea component to the XerFormControl component.

From:

<script setup lang="ts">
  import { ref } from "vue";
import { XerTextarea } from "@xerius/codey-components";

const textValue = ref(undefined);
</script>

<template>
  <XerTextarea v-model="textValue" label="my label" caption="I'm the caption of this textarea" />
</template>

To:

<script setup lang="ts">
import { ref } from "vue";
import { XerFormControl, XerTextarea } from "../../index";

const textValue = ref(undefined);
</script>

<template>
  <XerFormControl id="textarea" label="My Label" caption="I'm the caption of this textarea">
    <XerTextarea id="textarea" v-model="textValue" />
  </XerFormControl>
</template>

** Migration with Character counter** To support the character counter, you will need to add a few steps:

Use the XerFormControl component and use the XerTextarea component as child component.
Remove the xer-counter prop from the XerTextarea component.
Add the has-counter prop to the XerFormControl component.
Set the input-value prop of the XerFormControl to the value of the reactive variable you use for the v-model of the XerTextarea component.
Create a template reference to the XerFormControl component to listen to the exposed counterExceeded variable.
Use this counterExceeded to toggle the invalid prop state of the XerTextarea component.
If needed, Add the counter-limit prop to the XerFormControl component to set the max limit of characters for the character counter.
And remove the xer-counter-limit prop from the XerTextarea component.

From:

<script setup lang="ts">
import { XerTextarea } from "@xerius/codey-components";
</script>

<template>
  <XerTextarea label="my label" :counter="true" :counter-limit="50" :show-counter-exceeded="true" />
</template>

To:

<script setup lang="ts">
import { ref } from "vue";
import { XerFormControl, XerTextarea } from "@xerius/codey-components";

const textValue = ref(undefined);
const formControlRef = ref();
</script>

<template>
  <XerFormControl
    id="with-character-counter"
    ref="formControlRef"
    :input-value="textValue"
    has-counter
    :counter-limit="50"
    label="Character count"
    caption="This is a caption"
  >
    <XerTextarea v-model="textValue" :invalid="formControlRef?.counterExceeded" />
  </XerFormControl>

  <h3 class="typo-tertiary-title">Your value is:</h3>
  <p>{{ textValue }}</p>
</template>

ae15743: XerOptionInput & XerOptionInputList: Deprecated in favor of XerCheckbox, XerRadioButton & XerOptionControl.
852f364: XerChart: Updated in label helpers and color set to match new design.
To Migrate:
- Chart colors
  - Can now be imported using import { chartColors } from "@xerius/codey-tailwind/theme/xerius/chart-colors.ts";.
  - The previous names (primary, secondary1, ...) can be replaced with the new names (primary, secondary, ...).
3269079: XerIcon: Migrated to tailwind styling and as a result removed animation & color props in favor of classes.
To Migrate:
- Animations can be provide through classes e.g. animate-spin.
- Semantic color tokens are now available for the icon and can be set by adding a text-icon-<color> class e.g. text-icon-brand.
- A size are now limited to a set of values, sm, md, lg, xl.
  Size Prop Value Class Equivalent
  sm size-5
  md size-7
  lg size-8
  xl size-10
342d45d: Calendar: Refactor to PrimeVue Calendar component. Before you would use the XerTextfield component as a wrapper, this not needed anymore.
It is recommended to use the XerFormControl component for a more complete UI with label, caption and error message.
All the props have been changed to be named without the xer- prefix and extended with those from the Prime Vue Calendar component. (PrimeVue documentation)[https://v3.primevue.org/calendar/].
To migrate:
- Use the XerFormControl component for a more complete UI.
- Replace the XerCalendar component with the XerFormControl component and place the XerCalendar component as a child component in the default slot.
- If you don't use the XerFormControl component, keep the XerCalendar component as is.
- Remove the xer- prefix from the props and events.
- Add the needed props and events to the XerFormControl if needed.
For example:
from:
js
```
<script setup lang="ts">
import { ref } from "vue";
import { XerCalendar } from "@xerius/codey-components";
const selectedDate = ref();
</script>

<template>
  <XerCalendar v-model="selectedDate" xer-label="Select Prime date" />
</template>
```
to:
js
```
<script setup lang="ts">
import { ref } from "vue";
import { XerCalendar, XerFormControl } from "@xerius/codey-components";

const selectedDate = ref();
</script>

<template>
  <XerFormControl label="Select Prime date">
    <XerCalendar v-model="selectedDate" />
  </XerFormControl>
</template>
```ate>
```
93e65f1: XerBreadcrumb migrated from Codey Style Theme to Tailwind.
342d45d: Input Mask: Refactor to the Prime Input Mask component. Before you would use the XerTextfield component as a wrapper. Now adding masks to your input has it's own component XerInputMask.
It is recommended to use the XerFormControl component for a more complete UI with label, caption and error message.
It now belongs to it's own component with slots and props that are extended with those from the Prime Vue Input Mask component. (PrimeVue documentation)[https://v3.primevue.org/inputmask/]. The two existing masks are rijksregisternummerMask and belgischeIbanMask and can be imported from the @xerius/codey-components package. And passed through the mask prop of the XerInputMask component.
Note: The input masks rijksregisternummerMask and belgischeIbanMask are changed into the type of string. Which makes it possible to use them as placeholder too.
To migrate:
- Remove the XerTextfield component as a wrapper.
- Use the XerFormControl component for a more complete UI.
- Replace the XerInputMask component with the XerFormControl component and place the XerInputMask component as a child component in the default slot.
- If you don't use the XerFormControl component, keep the XerInputMask component as is.
- Remove the xer- prefix from the props and events.
- Add the needed props and events to the XerFormControl if needed.
To migrate the masks rijksregisternummerMask and belgischeIbanMask you need to change the type of the mask to string instead of object. And pass them as a string to the mask prop of the XerInputMask component.
from:
js
```
<script setup lang="ts">
import { XerTextfield } from "@xerius/codey-components";
</script>

<template>
  <XerTextfield
    xer-label="Belgische Iban"
    xer-mask="belgischeIban"
    xer-placeholder="BE03 7985 5565 1284"
  />
</template>
```
to:
js
```
<script setup lang="ts">
import { ref } from "vue";
import { XerFormControl, XerInputMask, rijksregisternummerMask } from "../../index";

const textValue = ref(undefined);
</script>

<template>
  <XerFormControl
    label="Rijksregisternummer"
    caption="Het rijksregisternummer staat achteraan op de identiteitskaart en bestaat uit 11 cijfers, waarvan de eerste 6 de geboortedatum aanduiden in omgekeerde volgorde."
  >
    <XerInputMask
      v-model="textValue"
      :mask="rijksregisternummerMask"
      placeholder="98.01.01-346-44"
      class="xer-w-full"
    />
  </XerFormControl>
</template>
```

Size Prop Value	Class Equivalent
sm	size-5
md	size-7
lg	size-8
xl	size-10

342d45d: IconField: Refactor to PrimeVue Icon Field component. Before you would use the XerTextfield component and pass the icon, now it has it own component based on PrimeVue.

It is recommended to use the XerFormControl component for a more complete UI with label, caption and error message.

All the props have been changed to be named without the xer- prefix and extended with those from the Prime Vue Calendar component. (PrimeVue documentation)[https://v3.primevue.org/iconfield/].

To migrate:

Use the XerFormControl component for a more complete UI.
Replace the XerTextfield component with the XerFormControl component and place the XerIconField component and XerInputIcon as a child component in the default slot.
Put the wanted icon with the XerIcon component as child in the XerInputIcon component.
Remove the xer- prefix from the props and events.
Add the needed props and events to the XerFormControl if needed.

For example:

from:

<script setup lang="ts">
import { XerTextfield } from "../index";
import { xerMagnifyingGlass } from "../../icon";
</script>
<template>
  <XerTextfield
    xer-label="my label"
    xer-error-message="this is a validation message"
    :icon="xerMagnifyingGlass"
  />
</template>

to:

<script setup lang="ts">
import { ref } from "vue";

import {
  XerIcon,
  XerIconField,
  XerInputIcon,
  XerInputText,
  XerFormControl,
  xerFilter,
} from "@xerius/codey-components";

const textValue = ref("");
</script>

<template>
  <XerFormControl label="Icon field" caption="This is a caption">
    <XerIconField icon-position="left">
      <XerInputIcon>
        <XerIcon :icon="xerFilter" />
      </XerInputIcon>
      <XerInputText v-model="textValue" placeholder="Search" class="xer-w-full" />
    </XerIconField>
  </XerFormControl>
</template>

342d45d: Input Number: Refactor to PrimeVue input Number component. Before you would use the XerTextfield for this, now you should use the XerInputNumber component.
It is recommended to use the XerFormControl component for a more complete UI with label, caption and error message.
It inherits the props and events from the Prime Vue InputNumber component. (PrimeVue documentation)[https://v3.primevue.org/inputnumber/].
Refactor the XerTextField component to XerInputNumber component. For example:
js
```
<script setup lang="ts">
import { ref } from "vue";
import { XerFormControl, XerInputNumber } from "../../index";

const inputValue = ref(0);
</script>

<template>
  <XerFormControl label="Select Prime date">
    <XerInputNumber
      id="default"
      v-model="inputValue"
      label="My Prime Label"
      caption="This is a caption"
      data-automation-id="xer-input-number"
    />
  </XerFormControl>
</template>
```
342d45d: XerApplicationShell replaces the existing html shell, footer and XerHeader component.
To Migrate:
- Replace html shell with XerApplicationShell
- Add header config to the XerApplicationShell props to match current header functionalities
- Add footer config to the XerApplicationShell props to match current footer functionalities
See docs for more information of the configuration options and features.
342d45d: FormControl: This component is a helper component for form components like XerTextfield, XerCalendar etc. It contains the label, caption and error components to display the full control. It has a default slot where the form component can be placed and used directly as child component.
The FormControl expect the needed props and slots for the other components (label, caption and error).
For example with the XerCalendar component:
js
```
<script setup lang="ts">
import { ref } from "vue";
import { XerFormControl } from "../../form-control";
import { XerCalendar } from "../index";

const selectedDate = ref();
</script>

<template>
  <XerFormControl label="Select Prime date">
    <XerCalendar v-model="selectedDate" />
  </XerFormControl>
</template>
```
6bcf317: XerTable: has been removed in favor of the XerDataTable adopted from PrimeVue.
To migrate:
- Replace the XerTable implementation with XerDataTable.
- Have a look in the docs for the new implementation and the available features.

342d45d: Add prime Sidebar in favor of Side Sheet

Sidebar: Add of the Prime Sidebar in favor of the Xerius XerSideSheet. The XerSidebar will be used instead of the XerSideSheet. The naming follows the Prime Vue component that is used: (PrimeVue Sidebar)[https://v3.primevue.org/sidebar].

To migrate:

Replace XerSideSheet with XerSidebar
Map :xer-open="visible" @xer-close="visible = false" to v-model:visible="visible"
Choose the right position by using the position prop.

For example:

from:

<script setup lang="ts">
import { ref } from "vue";
import { XerButton, XerSideSheet } from "../../index";

const visible = ref(false);
</script>

<template>
  <XerButton @click="visible = true"> Open Side Sheet </XerButton>

  <XerSideSheet :xer-open="visible" @xer-close="visible = false">
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure magnam quidem voluptates
      consequatur eveniet quam sint rerum libero unde quibusdam quod, vero in vel amet? Fugiat
      facere aspernatur labore explicabo.
    </p>
  </XerSideSheet>
</template>

to:

<script setup lang="ts">
import { ref } from "vue";
import { XerButton, XerSidebar } from "../../index";

const visible = ref(false);
</script>

<template>
  <XerButton
    :aria-controls="visible ? 'sbar' : null"
    :aria-expanded="visible"
    @click="visible = true"
  >
    Open Sidebar
  </XerButton>

  <XerSidebar v-model:visible="visible" header="Sidebar" position="right">
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure magnam quidem voluptates
      consequatur eveniet quam sint rerum libero unde quibusdam quod, vero in vel amet? Fugiat
      facere aspernatur labore explicabo.
    </p>
  </XerSidebar>
</template>

342d45d: Radio Button: Refactor to the Prime Radio Button component and it's own component. Before you would use the XerOptionInput component with xer-type="radio". Now you can use it's own XerRadioButton component.
It now belongs to it's own component with slots and props that are extended with those from the Prime Vue Radio Button component. (PrimeVue documentation)[https://v3.primevue.org/radiobutton/]. A prop and styling as been added for the container look, by setting the container prop to true.
To migrate:
- Replace XerOptionInput with XerRadiobutton
- Remove the xer-type prop
- Remove the xer- prefix from the props and events.
- Use the input-id prop to set id for the Radio Button input if used.
For example:
from:
js
```
<script setup lang="ts">
import { XerOptionInput } from "../index";
</script>

<template>
  <XerOptionInput xer-label="default radiobutton" xer-type="radio" />
</template>
```
to:
js
```
<script setup lang="ts">
import { XerRadioButton } from "@xerius/codey-components";
import { ref } from "vue";

const value = ref("");
</script>

<template>
  <XerRadioButton
    v-model="value"
    name="pizza"
    value="Cheese"
    label="This is a label."
  />
</template>
```

342d45d: AutoComplete: Refactor to PrimeVue Auto Complete component. Before you would use the XerTextfield component as a wrapper, this not needed anymore.

It is recommended to use the XerFormControl component for a more complete UI with label, caption and error message.

All the props have been changed to be named without the xer- prefix and extended with those from the Prime Vue Auto Complete component. (PrimeVue documentation)[https://v3.primevue.org/autocomplete/].

To migrate:

Import the XerAutoComplete component from the Codey Component pacakge.
Use the XerFormControl component for a more complete UI.
Replace the XerAutoComplete component with the XerFormControl component and place the XerAutoComplete component as a child component in the default slot.
Remove the xer- prefix from the props and events.
Move the value of the options prop to the suggestions prop
Use the emit event complete to do the search for suggestions.
Use the prop from PrimeVue delay instead of xerDelay, if used.

For example:

from:

<script setup lang="ts">
import { computed, ref } from "vue";
import { XerAutocomplete } from "../index";
import { XerTextfield } from "../../textfield";

const options = [
  { label: `dropdown item`, value: `option value 1` },
  { label: `dropdown item 2`, value: `option value 2` },
  { label: `dropdown stuff`, value: `option value 3` },
  { label: `dropdown appel`, value: `option value 4` },
  { label: `dropdown peer`, value: `option value 5` },
];
const selectedValue = ref(undefined);
const searchTerm = ref("");

const filteredOptions = computed(() => {
  return options.filter((option) => {
    return option.label.toLowerCase().includes(searchTerm.value.toLowerCase());
  });
});
</script>

<template>
  <XerAutocomplete
    v-slot="slotProps"
    :xer-options="filteredOptions"
    :xer-debounce="500"
    @xer-update-selected-option="selectedValue = $event"
    @xer-update-input-value="searchTerm = $event"
  >
    <XerTextfield
      v-bind="slotProps"
      xer-label="Autocomplete"
      @update:model-value="slotProps.debounceInput"
      @xer-option-click="slotProps.selectOption"
    />
  </XerAutocomplete>

  <div style="margin-top: 2rem">
    Selected value:
    <pre>
      {{ selectedValue }}
    </pre>
  </div>
</template>

to:

<script setup lang="ts">
import { ref } from "vue";
import { XerAutoComplete, type AutoCompleteOption } from "../index";
import { XerFormControl } from "../../form-control";

const value = ref("");
const filteredOptions = ref<AutoCompleteOption[]>([]);

const options = ref<AutoCompleteOption[]>([
  { label: `dropdown item`, value: `option value 1` },
  { label: `dropdown item 2`, value: `option value 2` },
  { label: `dropdown stuff`, value: `option value 3` },
  { label: `dropdown appel`, value: `option value 4` },
  { label: `dropdown peer`, value: `option value 5` },
]);

const search = (event: any) => {
  if (!event.query.trim().length) {
    filteredOptions.value = options.value;
  } else {
    filteredOptions.value = options.value.filter((option) => {
      return option.label.toLowerCase().includes(event.query.toLowerCase());
    });
  }
};
</script>

<template>
  <XerFormControl label="Auto complete" caption="This is the caption">
    <XerAutoComplete
      v-model="value"
      option-label="label"
      :suggestions="filteredOptions"
      @complete="search"
    />
  </XerFormControl>

  <h3 class="xer-font-bold">Your Value is:</h3>
  <p>{{ value }}</p>
</template>

342d45d: MultiSelect: Refactor to PrimeVue Multi Select component. Before you would use the XerTextfield component as a wrapper, this not needed anymore.

It is optional to use the XerFormControl component for a more complete UI with label, caption and error message.

All the props are extended with those from the XerTextField component and those from the Prime Vue Multi Select component. (PrimeVue documentation)[https://v3.primevue.org/multiselect/].

To migrate:

Remove the XerTextfield component as a wrapper.
Use the XerFormControl component for a more complete UI.
Replace the XerMultiSelect component with the XerFormControl component and place the XerMultiSelect component as a child component in the default slot.
Only use the XerMultiSelect component.
Remove the use of hasError reactive value if needed.
For example:

from:

<script setup lang="ts">
import { ref } from "vue";
import { XerTextfield } from "./../../textfield";
import { XerMultiSelect } from "./../index";

const selectedValues = ref([]);
const cities = ref([
  { name: "New York", code: "NY" },
  { name: "Rome", code: "RM" },
  { name: "London", code: "LDN" },
  { name: "Istanbul", code: "IST" },
  { name: "Paris", code: "PRS" },
  { name: "Bruxelles", code: "BXL" },
]);

const hasError = ref(false);
</script>

<template>
  <XerTextfield xer-label="City" :xer-error="hasError" xer-error-message="no value selected">
    <template #customInput>
      <XerMultiSelect
        v-model="selectedValues"
        :options="cities"
        option-label="name"
        placeholder="Select Cities"
        :class="{ 'p-invalid': hasError }"
        append-to="self"
      />
    </template>
  </XerTextfield>
</template>

to:

<script setup lang="ts">
import { ref } from "vue";
import { XerFormControl, XerMultiSelect } from "@xerius/codey-components";

const selectedValues = ref([]);
const cities = ref([
  { name: "New York", code: "NY" },
  { name: "Rome", code: "RM" },
  { name: "London", code: "LDN" },
  { name: "Istanbul", code: "IST" },
  { name: "Paris", code: "PRS" },
  { name: "Bruxelles", code: "BXL" },
]);
</script>

<template>
  <XerFormControl label="Select a City">
    <XerMultiSelect
      v-model="selectedValues"
      :options="cities"
      option-label="name"
      placeholder="Select Cities"
    />
  </XerFormControl>
</template>

342d45d: Checkbox: Refactor to the Prime Checkbox component and it's own component. Before you would use the XerOptionInput component with xer-type="checkbox". Now you can use it's own XerCheckbox component.
It now belongs to it's own component with slots and props that are extended with those from the Prime Vue Checkbox component. (PrimeVue documentation)[https://v3.primevue.org/checkbox/]. A prop and styling as been added for the container look, by setting the container prop to true.
To migrate:
- Replace XerOptionInput with XerCheckbox
- Remove the xer-type prop
- Remove the xer- prefix from the props and events.
- Use the input-id prop to set id for the Checkbox input if used.
For example:
from:
js
```
<script setup lang="ts">
import { XerOptionInput } from "../index";
</script>

<template>
  <XerOptionInput xer-label="default checkbox" xer-type="checkbox" />
</template>
```
to:
js
```
<script setup lang="ts">
import { XerCheckbox } from "@xerius/codey-components";
import { ref } from "vue";

const defaultValue = ref("");
</script>

<template>
  <XerCheckbox
    v-model="defaultValue"
    input-id="default"
    name="pizza"
    value="Cheese"
    label="This is a label."
  />
</template>
```
342d45d: InputText: Refactor to PrimeVue input text component from XerTextField. Moved the TextField components to PrimeVue input component. This also changed the base component of other components like:
- Input Text
- Input Number
- Input Mask
- Input Icon
- Password
It is recommended to use the XerFormControl component for a more complete UI with label, caption and error message.
Migration:
InputText: It's renamed from XerTextField to XerInputText for inlinement with Prime Vue. Before you would use the XerInputText component for many input components. They now have their own components. The XerInputText component is now using the Prime Vue InputText component under the hood. It inherits the props and events from the Prime Vue InputText component. (PrimeVue documentation)[https://v3.primevue.org/inputtext/].
Props and emit events are not pre-fixed with Xer anymore.
To migrate:
- Rename the XerTextField component to XerInputText.
- Use the XerFormControl component for a more complete UI.
- Replace the XerInputText component with the XerFormControl component and place the XerInputText component as a child component in the default slot.
From:
js
```
<script setup lang="ts">
import { ref } from "vue";
import { XerTextfield } from "@xerius/codey-components";

const textValue = ref(undefined);
</script>

<template>
  <XerTextfield v-model="textValue" xer-label="my label" />
</template>
```
To:
js
```
<script setup lang="ts">
import { ref } from "vue";
import { XerFormControl } from "../index";
import { XerInputText } from "../../input-text";

const textValue = ref(undefined);
</script>

<template>
  <XerFormControl label="My Label" caption="This is a caption">
    <XerInputText v-model="textValue" />
  </XerFormControl>
</template>
```
** Migration with Character counter** To support the character counter, you will need to add a few steps:
- Use the XerFormControl component and use the XerInputText component as child component.
- Remove the xer-counter prop from the XerTextfield component.
- Add the has-counter prop to the XerFormControl component.
- Set the input-value prop of the XerFormControl to the value of the reactive variable you use for the v-model of the XerInputText component.
- Create a template reference to the XerFormControl component to listen to the exposed counterExceeded variable.
- Use this counterExceeded to toggle the invalid prop state of the XerInputText component.
- If needed, Add the counter-limit prop to the XerFormControl component to set the max limit of characters for the character counter.
- And remove the xer-counter-limit prop from the XerTextfield component.
From:
js
```
<script setup lang="ts">
import { XerTextfield } from "../index";
</script>

<template>
  <XerTextfield xer-label="character count" :xer-counter="true" :xer-counter-limit="200" />
</template>
```
To:
js
```
<script setup lang="ts">
import { ref } from "vue";
import { XerFormControl } from "../../form-control";
import { XerInputText } from "../index";

const textValue = ref(undefined);

const formControlRef = ref();
</script>

<template>
  <XerFormControl
    ref="formControlRef"
    :input-value="textValue"
    has-counter
    :counter-limit="10"
    label="Character count"
    caption="This is a caption"
  >
    <XerInputText v-model="textValue" :invalid="formControlRef?.counterExceeded" />
  </XerFormControl>
</template>
```
342d45d: XerTable: Pagination component changed to the Prime Paginator component
To Migrate:
- The page index is now 0-based.

342d45d: XerPagination: Replaced by Paginator from PrimeVue.

To Migrate:

Replace the XerPagination component with XerPaginator component.
Replace xer-total with total-records.
Replace xer-page-total with rows.

For example: from:

<script setup lang="ts">
  import { XerPagination } from "@xerius/codey-components";
</script>

<template>
  <XerPagination :xer-total="20" :xer-page-total="5" />
</template>

to:

<script setup lang="ts">
  import { XerPaginator } from "@xerius/codey-components";
</script>

<template>
  <XerPaginator :total-records="20" :rows="5" />
</template>

ec4a8fb: XerButtonGroup: Refactor to PrimeVue Button Group component.

It now has all the functionality from the PrimeVue component and the props can be found in the (PrimeVue documentation)[https://v3.primevue.org/button/#api.buttongroup].

!Note: The XerButtonGroup component does not support the props and emit events anymore. This functionality should come from another component based on the SelectButton component from PrimeVue Please notify the Codey team if you need this feature.

To migrate:

Remove the used Props from the XerButtonGroup component, like buttons and active-button.
Add the XerButton's you need as children of the XerButtonGroup component.

For example:

from:

<script setup lang="ts">
import { XerButtonGroup } from "@xerius/codey-components";
</script>

<template>
  <XerButtonGroup
    :buttons="[
      { name: `test-1`, content: `Test 1` },
      { name: `test-2`, content: `Test 2` },
      { name: `test-3`, content: `Test 3` },
    ]"
    active-button="test-2"
  >
  </XerButtonGroup>
</template>

to:

<script setup lang="ts">
import { XerButtonGroup, XerButton, xerChevronLeft, xerChevronRight } from "@xerius/codey-components";
</script>

<template>
  <XerButtonGroup>
    <XerButton variant="cta" :icon="xerChevronRight" aria-label="example-chevron-right">
      button
    </XerButton>
    <XerButton variant="cta">button</XerButton>
    <XerButton variant="cta" :icon="xerChevronLeft" aria-label="example-chevron-left">
      button
    </XerButton>
  </XerButtonGroup>
</template>

Minor Changes

3841986: XerLink: add isExternalLink prop. If set to true, link will be handled as an external link.
f1f3319: XerIconField: update to match design and XerFormControl component.
f1f3319: XerFormControl: add disabled prop to display correct visuals and aria attribute.
342d45d: XerTableHeaderFilter: Open filter panel when clicking the header instead of icon & changed icon to filter for more clearity.
95f234f: XerNavBar and XerNavBarItem: Migrate styling to TailwindCss.
342d45d: XerAccordion: Converted SCSS styling to Tailwind
7779b4b: XerHeaderMobile: add the optional sitemapLink prop for displaying the link to the sitemap in the footer.
d6c9308: XerLink: Migrate styling to TailwindCss.
836a61c: XerMultiLineEllipsis: Added multi line ellipsis support.
7779b4b: XerSitemap: add sitemap component under application shell
2a2920e: XerOptionControl: Add option to provide a tooltip.
342d45d: XerIcon: Add notificationBadge support.
c46cc0f: XerBreadcrumb: Changed XerBreadcrumbLink components to use routerLink by default, removing the need for the type prop from the XerBreadcrumb and XerBreadcrumbLink components.
342d45d: XerDataAccordion: new component added ✨.
342d45d: XerTextAccordion: new component added ✨.
dd05f4d: XerTooltip: Add the directive Tooltip from the PrimeVue package under the @xerius/codey-components CodeyComponents plugin.
342d45d: XerBadge: Newly added ✨
3959df0: XerStepIndicator: Styling migrated to TailwindCSS
342d45d: XerTag: Newly added ✨
398c8a7: XerButton: use of semantic tokens and corresponding css variables for the border radius of the button components. This makes it possible to have the radius set depending on the css theme that is used.
77f0f64: XerDivider migrated from Codey Style Theme to Tailwind.
49afd90: Onboarding: Transitioned to Tailwindcss and using the updated XerModal component.
7779b4b: XerFooter: add the optional sitemapLink prop for displaying the link to the sitemap in the footer.
342d45d: XerInfoCard: Added new component to visualize information
2f9f5db: XerApplicationShell: Sync route path with the sideNavBar to open and mark the correct menu item as active.
342d45d: XerLanguageSwitch: Newly added ✨
f1f3319: XerTextInput: update to match design and XerFormControl component.
7779b4b: XerSitemap: add the new XerSitemap component. It requires the routes from your Vue Router and the currentLocale as props.
db6d9de: XerEllipsis: Transitioned to Tailwindcss.

Patch Changes

4792471: XerMessage: Update style to match design.
d28ef2b: XerNumberInput: Fix incorrect invalid focus state.
0bbe78d: XerButton: update styling for buttons and default variant to be inline with the designs.
bd13e52: XerCalendar: Update style to match desings
6bc0d24: XerRadioButton: update styling to match design
e388e60: XerOnboarding: Update styling to match designs.
836a61c: XerEllipsis: Update styling to match design.
3b5d5b8: Accordions: Update styles to match designs.
3d61e19: XerButton: update styling to match design
3abe4e9: XerMenu: update styling to match design updates.
758583f: XerInputSwitch: Update styling to match designs.
6cc604b: XerDivider: Update styling to match design update.
31c9d7a: XerCheckbox: Add missing export of the component.
c46cc0f: XerBreadcrumb: refactor to use the script setup composition API.
3ddad73: Accordions: Update styling to match design update.
1c6ba2f: XerRadioButton: update styling to be inline with the designs.
3abe4e9: XerLanguageSwitch: Update styling to match design updates.
acc28dc: Align Form Component styles and add extra examples
c6c93bd: XerMultiSelect: update styling to match design.
532f272: XerModal: update style to match designs.
f990c93: Typography Lists: update ordered and unordered list styles to match the designs
3111060: XerMenu: Update style to match designs.
342d45d: Upgrade dependencies
091719c: XerToast: Update style to match design
b972d86: XerButton: Update style to match design
d97e37f: XerFormControl: fix type error when using component with Option API where the interfaces for the props and slots were private. Using the exported types, FormControlBaseProps and FormControlBaseSlots now.
af70f98: XerInputNumber: update style to match designs
da070d1: XerRadioButton: update styling to match design
f791bce: XerPassword: update styling to match design
3a97092: XerTooltip: update text type to match designs.
309454c: XerFormControl: update styling to match design system XerInputText: update styling to match design system XerInputMask: update styling to match design system
9ac5dba: XerSidebar: update styling to match design.
6d88049: XerCalendar: Update styling to match design updates.
86cbcbf: XerPaginator: Update styles to match design.
3abe4e9: XerIcon: update styling for notification badge feature.
5cd2763: XerRadioButton: Fix missing export in root index file of the Codey Components package.
552dbc5: XerDropdown: Minor style tweaks
4792471: XerInlineMessage: Update style to match design.
552dbc5: XerAutocomplete: Update styles to match Designs.
a48468e: XerCheckbox: update style to be inline with the designs.
3111060: XerApplicatoinShell: Update styles to match designs.
0b691ec: XerSlider: Update styles to match designs & add examples.
3216744: Fix: load scoped styles by default in the plugin.
eec583b: Components: updated visual tests and screenshots
ed68e29: XerDataAccordion & XerTextAccordion: Fix failure of dynamic rendering.
99b50f9: XerDropdown: Update styles to match design.
c46cc0f: XerBreadcrumb: update styling to match design.
bcf67dc: XerCheckbox: update styling to match design
2f9f5db: XerApplicationShell: Update Style to inner components to match designs. Swapped to CSS Grid for layout structure.
1875596: XerTag: Update style to match designs.
e5fbeb2: XerFileUpload: Update style overrides to match designs
3111060: XerLanguageSwitch: Update styling to match designs
1875596: XerBadge: Update style to match designs.
Updated dependencies [3ddad73]
- @xerius/codey-tailwind@1.0.0
- @xerius/codey-assets@1.0.0

14.1.1

Patch Changes

Updated dependencies [2f6d2acf7]
- @xerius/codey-style@13.5.0

14.1.0

Minor Changes

43e9ce6d1: XerHeader: Allow custom logo specification.

Patch Changes

Updated dependencies [43e9ce6d1]
- @xerius/codey-style@13.4.0

14.0.6

Patch Changes

Updated dependencies [1c6888af2]
- @xerius/codey-style@13.3.0

14.0.5

Patch Changes

Updated dependencies [dfbf9a639]
- @xerius/codey-style@13.2.0

14.0.4

Patch Changes

d12f427: Fix: revert changes on attrs passed to input elements in Textfield and OptionInput.

14.0.3

Patch Changes

a56b21e8d: Fix XerTextfield and XerOptionInput from setting style and class on input instead of root by filtering the attributes set on the input from style and class attrs.
9dfd9e665: XerHeader: Update link prop type to allow null to support not having a link.
a56b21e8d: Set PrimeVue version to 3.26.0 to prevent Codey overrides not working as expected.
3a132246f: Add example for the option input list with container component
Updated dependencies [3a132246f]
- @xerius/codey-style@13.1.2

14.0.2

Patch Changes

16b19e70d: XerSideSheet: Add automation-id for the content.
5734c572e: XerOptionInput: Add sub-content automation-id.
db5af9f21: XerButton: data-automation-id prop was not correctly passed to XerLink when the button is used as link.
ac950ac2a: XerButton & XerLink: disabled should only be set when true as disabled="false" also causes disabled state.
5fd248dc6: XerTabs: Add top level automation id

14.0.1

Patch Changes

4eacf4fe7: XerOnboarding: Allow for reactive changes within the config.
Updated dependencies [e6406cc9f]
- @xerius/codey-style@13.1.1

14.0.0

Major Changes

8ad9fc847: onboarding: add required xerApplicationInfo prop for naming the storage key

Migration:

Add the xerApplicationInfo prop to the onboarding component.

example:

jsx

<XerOnboarding
    :xer-slides="slides"
    xer-start-label="Welcome"
    xer-in-progress-label="Next"
    xer-end-label="Finish"
    :xer-config="config"
    :xer-application-info="{name: "docs", env: "prod"}"
/>

Minor Changes

9eb923d7a: XerAutocomplete: Add scrollable options example

Patch Changes

afa377e5f: XerIcon: Revert contentEditable because of chrome < 117 hangs.
70e5b4ffa: XerTextfield: Shift focus to input when the icon other then cross is clicked. (UX solution to replace 'contentEditable' on XerIcon)
Updated dependencies [9eb923d7a]
- @xerius/codey-style@13.1.0

13.0.1

Patch Changes

d8241f6ee: XerTextField: Fix options not showing after clearing input using cross icon

13.0.0

Major Changes

441ee7fd2: The required codey theme is now loaded by the install plugin to ensure the correct loading order of the required css files.
Migration:
Remove the following import from main.ts:
ts
```
import "@xerius/codey-style/build/codey.min.css";
```

Minor Changes

d7870318e: XerTextField & XerAutocomplete: Add clear icon to clear user input
e82b70d3a: XerTextField: emit icon-blur event and update docs with all emitted events.
441ee7fd2: Add Prime Multi select component
c47bf8dac: XerMultiSelect: Add example usages with XerTextField

Patch Changes

d7870318e: XerTextField: blur event of the icon now closes the option list. XerIcon: allow focus and blur events to be triggered XerAutocomplete:
- Extend default example with working client side filtering.
a897a6f7a: Update exports to support TS 5 ModuleResolution: bundler
a897a6f7a: Add ignoreDeprecations to tsconfig.json to silence warnings of deprecated features used by Vue base tsconfig.
8ca90ed85: XerHeader: Add default bottom margin
e82b70d3a: XerTextfield: Fix not being able to select option after opening by clicking the icon.
Updated dependencies [61cde93da]
- @xerius/codey-style@13.0.0

12.0.0

Major Changes

60ae4676d: XerOptionInput 2 way binding changed as custom model definition is not possible in vue3.
Migration:
As v-model no longer binds to checked & @input due to vue3 breaking change about v-model bindings this binding has changed from:
vue
```
<XerOptionInput v-model="checkedValue" />
```
to:
vue
```
<XerOptionInput v-model:checked="checkedValue" />
```
69142c9ae: Replaced XerAlert and XerAlertStack with PrimeVue Toast component, witch is exported as XerToast. The documentation for the Toast component can be found here.
16430664c: XerNavigationBarItem now requires xerDisabledIcon as separate prop to show when disabled.
067cf8a86: Removed vue-async-computed dependency
16430664c: XerHeader xer-partner-logo prop is renamed to xer-partner-icon to better match technical needs.
181d6c870: XerBirthDate is removed in favor of XerTextfield with type date.
387ff4aca: Step Indicator: XerType prop has been removed in favor of XerLarge prop
Migration:
As there are no other variations other then large we want to make this more explicit and chose to remove xer-type as prop. This makes that:
vue
```
<XerStepIndicator :xer-total="6" :xer-current="4" xer-type="large" />
```
becomes:
vue
```
<XerStepIndicator :xer-total="6" :xer-current="4" xer-large />
```
16430664c: Global Icon usage support based on it's name has been dropped in favor of icon imports.
The following components are affected by this change and require you to import the icons you want to use:
- XerTextfield
- Application Shell (HTML only)
- XerButton
- Footer (HTML only)
- XerHeader
- XerModal
- XerNavigationBarItem
- States (HTML only)
The installation of the Codey Components package als requires changes regarding the icons.
6f9aff58f: XerModal no longer supports v-model binding. Manual assignment of xer-open and @xer-close is required.
3ba13da1f: The datepicker is replaced with XerCalendar that now uses the PrimeVue calendar component internally.

971edcc70: XerSocialSecurityNumber component has been removed in favor of XerTextfield

Migration:

<xer-social-security-number
  xer-placeholder="98.01.01-346-40"
  xer-caption="Het rijksregisternummer staat achteraan op de identiteitskaart en bestaat uit 11 cijfers, waarvan de eerste 6 de geboortedatum aanduiden in omgekeerde volgorde."
  xer-label="Rijksregisternummer"
/>

becomes:

<XerTextfield
  xer-placeholder="98.01.01-346-40"
  xer-type="tel"
  xer-caption="Het rijksregisternummer staat achteraan op de identiteitskaart en bestaat uit 11 cijfers, waarvan de eerste 6 de geboortedatum aanduiden in omgekeerde volgorde."
  xer-label="Rijksregisternummer"
  xer-mask="rijksregisternummer"
/>

c4d3a7af8: Renamed the components XerNavbar and XerNavbarItem to XerNavigationBar and XerNavigationBarItem to provide more clarity.
Migration:
This will impact the imports and usage of the components.
js
```
import { XerNavbar, XerNavbarItem } from "@xerius/codey-components";
```
becomes:
js
```
import { XerNavigationBar, XerNavigationBarItem } from "@xerius/codey-components";
```
0689cbb76: Deprecated the Application Shell component in favour of using the HTML only setup for the application shell.
067cf8a86: Restructure components to support tree shaking
172c358b6: XerPopover had been replaced by XerOverlayPanel. This is a PrimeVue component, the docs can be found here.
b18bda22a: XerDoughnutChart is replaced by XerChart from PrimeVue.
This uses a newer version of chartjs under the hood, check out our example for implementation details.
b23ebad8e: XerAccountNumber is removed in favor of XerTextfield in combination with masks.
92198bdea: v-model prop & event changes
Internal event has been changed to comply with the vue3 v-model change. If you use these events you will need to adjust then according to the migration guide
62698320d: XerSideSheet v-model support dropped in favor of specific prop binding.
migration:
js
```
<XerSideSheet v-model="open">
```
becomes
js
```
<XerSideSheet v-model:xer-open="open">
```
067cf8a86: Update to Vue 3

Minor Changes

1e4bc0a74: XerIcon: Add option api usage example
9e27ae5c0: add dexxter and dexxter-color icon
29a66b756: XerOnboarding allows providing a xerStorageKeySuffix to distinguish environments on the same domain
067cf8a86: XerIcon and Icons are now part of the component package.
The icons and the Icon component are now part of codey-components. The option to globally register icons and use them based on their name has been removed in favor of importing them where needed. This allows them to be tree shaken and reduce the end bundle size.
Every component that allows you to set an icon now requires you to import the icon and pass it to the component as shown in the example below:
vue
```
<script>
import { XerButton, xerChevronRight } from "@xerius/codey-components";
</script>

<template>
  <XerButton :xer-icon="xerChevronRight">button</XerButton>
</template>
```
The affected components are:
- XerTextfield
- Application Shell (HTML only)
- XerButton
- Footer (HTML only)
- XerHeader
- XerModal
- XerNavigationBarItem
- States (HTML only)
c4d3a7af8: Fix styling issue when disabled attribute was false in XerNavigationBarItem
Information:
Due to a breaking change in Vue 3 regarding "Attribute Coercion Behavior", the disabled prop set to false will still render in the HTML. Following the Vue3 Migration Guide, we changed the props default value from false to null. This ensures it is not rendered when not provided.
13b872595: Update to new zxcvbn-ts password checking lib for XerPasswordTextfield
067cf8a86: Codey-patterns are now part of the component package.
02e170b5e: Allow passing icon objects directly to XerIcon using xer-icon prop.

Patch Changes

081cfd454: Include missing plugin.ts file in build process
23b85962f: Fix output package.json types path
Updated dependencies [69142c9ae]
- @xerius/codey-style@12.0.0
- @xerius/codey-composables@2.0.0

11.2.1

Patch Changes

f6b2df7a: Conditionally set scroll container class to avoid breaking default Cypress scroll capabilities

11.2.0

Minor Changes

982c93f0: Add header slot for side sheet
982c93f0: Add style prop max width for side sheet
982c93f0: Add style prop variant for side sheet

Patch Changes

Updated dependencies [982c93f0]
- @xerius/codey-style@11.4.0

11.1.1

Patch Changes

d511ff96: Add xer-application-content CSS class to side-sheet
5a24d89a: Fix side sheet behavior
Updated dependencies [31a937ab]
- @xerius/codey-style@11.3.0

11.1.0

Minor Changes

8af3b0a9: convert textfield input value toUnicode when punycode is present

Patch Changes

cfd5d031: Fix side sheet scroll
Updated dependencies [cfd5d031]
- @xerius/codey-style@11.2.0

11.0.1

Patch Changes

Updated dependencies [d059fd06]
- @xerius/codey-style@11.1.0

11.0.0

Major Changes

63cdece0: Reset version to new baseline

Minor Changes

672bc17e: Allow datepicker label to be set

Patch Changes

68b160c3: Fix table component filter and sort behavior
2267a5b3: Fix option-input databinding of checked & value props
bf2e4992: Force patch update after changeset config change: updateInternalDependents: always
7da2a841: update dist output files
9037a957: Fix chevron beheviour in dropdown with custom slot
3499b69f: Fix header partner logo uitlijning
2dc1e8e0: Change publish config
56842095: Fix datepicker not closing correctly after focus loss
096f0504: Move @xerius/codey-style back to dependencies as it is used to fetch the version for cdn uri
Updated dependencies [baa5c1d1]
- @xerius/codey-utils@11.0.0
- @xerius/codey-style@11.0.0

Previous versions

6.0.0

Bugfix: align all data-automation-id prop names

5.7.0

Feature: add accordion component

5.6.3

Bugfix: side-sheet behavior was incorrect when going back in browser history

5.6.0

Feature: file upload enhancement (add and remove functions and v-model support)

5.5.1

Feature: adds toggle switch

5.3.1

feature: adds new breacrumb component

5.3.0

Feature: adds application shell component

5.2.0

Feature: textarea now grows with content

5.1.0

Feature: button group improvements

5.0.6

Bugfix: hello bank now renders correctly in header

5.0.5

Chore: updates chart colors

5.0.0

Feature: update icon component to work with new icon package
Feature: adds xerDataAutomationId to all components

4.3.6

Bugfix: Label is now also red when counter exceeds limit

4.3.0

Feature: adds datepicker

4.2.0

Feature: adds doughnut chart

4.1.0

Feature: adds filter option to table
Bugfix: popper warning fix in popover

4.0.0

Refactor: removes business logic textfields
Feature: support for custom template options in textfield/dropdown

3.0.4

Feature: adds horizontal prop and class to Tabs component

3.0.0

Chore: now using cdn.xerius.be as CDN URL

2.10.14

Chore: adds minimum node version check (v12+)

2.10.6

Bugfix: adds reactivity to pagination

2.10.0

Feature: adds popover

2.9.0

Feature: adds side sheet

2.8.0

Feature: header small is now the default for mobile

2.7.3

Bugfix: adds missing header classes

2.7.2

Bugfix: fix for peer dependency to codey style

2.7.0

Feature: adds navigation links option to header

2.6.0

Feature: adds partner variant to header

2.5.0

Feature: support for adding classes to the table cell and table header

2.4.4

Feature: add option for dropdown options to be scrollable and fixed height (300px)

2.4.2

Bugfix: zero is now allowed in the social security textfield

2.4.0

Feature: adds copy paste functionality to the account number textfield

2.3.0

Feature: adds possibility to use a icon instead of a pictogram (modal)

2.2.0

Feature: adds new table component

2.1.2

Bugfix: fixes table and tailwind styling conflict

2.1.0

Feature: adds large variant to step indicator
Feature: adds non closable variant to modal

2.0.0

Feature: adds table component
IE11 support dropped

1.22.0

Feature: adds pagination component

1.20.0

Feature: adds social security number component

1.19.0

Feature: adds birthdate component
Feature: adds xer-placeholder property to textfield

1.18.0

Feature: adds account number textfield

1.17.0

Feature: adds button group component

1.16.0

Feature: adds tab component

1.15.0

Feature: adds slider component

1.14.0

Feature: adds translations and language property to file upload

1.13.0

Feature: adds allowed extensions property to file upload

1.12.0

Feature: animation in alert is now configurable through a property

1.11.0

Feature: adds autocomplete component
Feature: improvements dropdown component

1.10.0

Feature: adds xerReadonly property to textfield
Feature: adds dropdown component

1.9.0

Feature: adds xer-meter-update event to PasswordTextfield

1.8.2

Bugfix: fixes PasswordTextfield caption problem

1.8.0

Feature: adds PasswordTextfield component

1.7.0

Feature: adds alert stack and alert component

1.6.0

Feature: adds variant no-styling to button

1.5.0

Feature: Icons are now fetched from the CDN

1.4.2

Bugfix: peer dependency updated to codey-style 3.x

1.4.0

Feature: the Vue textarea component's counter can now be put in error state when the counter exceeds the limit.

1.3.0

Feature: allow use of custom axios library/configuration
Bugfix: the Vue icon component will no longer throw errors on the server or client when using SSR

1.2.1

Bugfix: allow HTML in the option input label whilst keeping the correct layout

1.2.0

Feature: added reference on the Vue button component

1.1.0

Feature: enable the use of SSR when using this package

1.0.7

Bugfix: links that include a protocol (e.g. mailto) will no longer use the Vue routerlink

1.0.6

Bugfix: events on Vue icon component should now be triggered

1.0.0 [Breaking]

Feature: Vue icon component
Feature: icon webcomponent has been removed
Feature: Vue modal component will now make use of the new modal pictogram modifier class
Testing: improved button tests
Testing: added tests to the Vue textfield component
Testing: added tests to the Vue icon component

0.25.0

Feature: updates filepond to latest version

0.24.8

Bugfix: fix icon console error "Cannot read property 'id' of null"

0.24.5

Bugfix: href is no longer a required property in the link component

0.24.2

Bugfix: icon component now points to correct CDN url

0.24.0

Feature: components will now register the icon component themselves when needed.
Feature: Vue link component
Testing: added tests to the Vue button component

0.23.1

Feature: new styling version

0.23.0

Feature: option to automatically show/hide the Vue textfield component options on focus/blur

0.22.2

Bugfix: no more errors after cancelling an icon fetch

0.22.1

Bugfix: remove icon fetch cancellation logging

0.22.0

Feature: add events to file upload component

0.21.1

Bugfix: remove race condition when fetching icons

0.21.0

Feature: styling change for the file upload

0.20.1

Bugfix: fix failing component tests

0.20.0

Feature: allow multiple error messages at Vue input components

0.19.3

Bugfix: manual value update in the Vue textfield component should now always work

0.19.2

Bugfix: moves codey style and vue to peer dependencies

0.19.1

Bugfix: fixes component tests

0.19.0

Feature: Vue file upload component

0.18.2

Bugfix: also check if the header logo link is null when deciding to use Vue router.

0.18.1

Bugfix: header logo link now also makes use of Vue router when necessary

0.18.0

Feature: Vue router (when available) will now be used for navigation when given a relative link to the button or navigation bar item Vue components
Feature: loading state for the Vue textfield component
Feature: data automation id's have been added to each textfield dropdown option
Bugfix: the Vue textfield component will now update its internal state on each input event

0.17.0

Feature: Vue textarea component
Feature: debounce option on textfield component

0.16.1

Bugfix: option input (radio) can now work with only the checked property

0.16.0

Feature: data automation id's have been added

0.15.1

Bugfix: don't show checkbox as checked when value is undefined

0.15.0

Feature: allow state per step in step indicator
Feature: add option to put the textfield dropdown in the DOM instead of having it 'float' over the other elements
Bugfix: texfield value should be changed by the user, and not the component, after selecting a textfield option

0.14.0

Feature: add Vue ellipsis component
Bugfix: accept a function in the custom mask textfield property

0.13.1

Bugfix: v-model support for option input

0.13.0

Feature: possibility to add sub content/questions to the option input

0.12.0

Feature: add text mask option to textfield component
Bugfix: allow empty option input list

0.11.0

Feature: add Vue option input and option input list components
Bugfix: change input default id to use uuid (v4) instead of timestamp to generate a unique id.
Bugfix: remove textfield error message from DOM when not needed.

0.10.0

Feature: add refs in components where needed

0.9.0

Feature: add xer-html prop to replace v-html on certain components

0.8.1

Bugfix: change navigation bar container from div element to nav element

0.8.0

Add Vue textfield component

0.7.0

Add Vue header component

0.6.0

Make colored icons possible
Add Navigation bar component

0.5.0

Add Vue divider component

0.4.0

Add Vue modal component
Fix button native attributes flow down

0.3.0

Add Vue step indicator component

0.2.0

Add Vue button component
Fix icon size in IE
Change build process to create a Vue library

0.0.27

Rename to @xerius/codey-components

Changelog ​

20.0.0-next.0 ​

Major Changes ​

Minor Changes ​

Patch Changes ​

19.1.0 ​

Minor Changes ​

Patch Changes ​

19.0.0 ​

Major Changes ​

Patch Changes ​

18.1.0 ​

Minor Changes ​

Patch Changes ​

18.0.0 ​

Major Changes ​

Minor Changes ​

Patch Changes ​

17.0.0 ​

Major Changes ​

Minor Changes ​

Patch Changes ​

16.0.0 ​

Major Changes ​

Minor Changes ​

Patch Changes ​

15.0.0 ​

Major Changes ​

Minor Changes ​

Patch Changes ​

14.1.1 ​

Patch Changes ​

14.1.0 ​

Minor Changes ​

Patch Changes ​

14.0.6 ​

Patch Changes ​

14.0.5 ​

Patch Changes ​

14.0.4 ​

Patch Changes ​

14.0.3 ​

Patch Changes ​

14.0.2 ​

Patch Changes ​

14.0.1 ​

Patch Changes ​

14.0.0 ​

Major Changes ​

Minor Changes ​

Patch Changes ​

13.0.1 ​

Patch Changes ​

13.0.0 ​

Major Changes ​

Minor Changes ​

Patch Changes ​

12.0.0 ​

Major Changes ​

Minor Changes ​

Patch Changes ​

11.2.1 ​

Patch Changes ​

11.2.0 ​

Minor Changes ​

Patch Changes ​

11.1.1 ​

Patch Changes ​

11.1.0 ​

Minor Changes ​

Patch Changes ​

11.0.1 ​

Patch Changes ​

11.0.0 ​

Major Changes ​

Minor Changes ​

Patch Changes ​

Previous versions ​

6.0.0 ​

5.7.0 ​

Changelog

20.0.0-next.0

Major Changes

Minor Changes

Patch Changes

19.1.0

Minor Changes

Patch Changes

19.0.0

Major Changes

Patch Changes

18.1.0

Minor Changes

Patch Changes

18.0.0

Major Changes

Minor Changes

Patch Changes

17.0.0

Major Changes

Minor Changes

Patch Changes

16.0.0

Major Changes

Minor Changes

Patch Changes

15.0.0

Major Changes

Minor Changes

Patch Changes

14.1.1

Patch Changes

14.1.0

Minor Changes

Patch Changes

14.0.6

Patch Changes

14.0.5

Patch Changes

14.0.4

Patch Changes

14.0.3

Patch Changes

14.0.2

Patch Changes

14.0.1

Patch Changes

14.0.0

Major Changes

Minor Changes

Patch Changes

13.0.1

Patch Changes

13.0.0

Major Changes

Minor Changes

Patch Changes

12.0.0

Major Changes

Minor Changes

Patch Changes

11.2.1

Patch Changes

11.2.0

Minor Changes

Patch Changes

11.1.1

Patch Changes

11.1.0

Minor Changes

Patch Changes

11.0.1

Patch Changes

11.0.0

Major Changes

Minor Changes

Patch Changes

Previous versions

6.0.0

5.7.0