npm package: @nswdoe/doe-ui-core
Description: Common UI Library created for NSW DoE frontend projects. Built upon Vue.js and Vuetify.
Latest version: 1.4.26

# doe-ui-core

Common UI Library created for NSW DoE frontend projects. Built upon Vue.js and Vuetify.

## How to use

1. It is recommended to download `doe-ui-template` and start new project's development because `doe-ui-template`
   uses `doe-ui-core` and it has everything configured already.

2. If you want to set up a new project yourself, you can:
   Create a new Vue project, recommend to use `vue-cli`

```
yarn global add @vue/cli
# OR
npm install -g @vue/cli

vue create project-name
```

Add Vuetify as it is a dependency for this UI lib

```
vue add vuetify
```

Then install `@nswdoe/doe-ui-core`

```
yarn add @nswdoe/doe-ui-core
# OR
npm install @nswdoe/doe-ui-core
```

## Import components in your project

In your project, simply import the UI Lib components you want to use, for example:

```
import { AppBar, NavigationDrawer, Profile } from '@nswdoe/doe-ui-core';
```

## Change Log
##### #1.4.25 - *12-09-2024*
+ add a new plugin `OAuth2` that only uses session storage

##### #1.4.24 - *29-08-2024*
+ add default background image for `Banner` as per branding requirement

##### #1.4.23 - *08-05-2023*
+ add passive flag to disable clickable step items color for `HStepper`

##### #1.4.22 - *27-04-2023*
+ update color for `DialogGeneric` and `Dialog`

##### #1.4.21 - *24-04-2023*
+ update css for `DialogGeneric`

##### #1.4.20 - *24-04-2023*
+ Add a prop for `Alert`
+ update color for `DialogGeneric` and `Dialog`

##### #1.4.19 - *23-03-2023*
+ Add a customization slot for `DialogGeneric`

##### #1.4.18 - *14-03-2023*
+ Remove unused dev dependencies
+
##### #1.4.17 - *23-02-2023*
+ Update `DatePicker` for a bug in props mutation

##### #1.4.16 - *06-02-2023*
+ Set "Public Sans" as the first font to be loaded

##### #1.4.15 - *20-12-2022*
+ Update `AdsDataTable` for a11y

##### #1.4.14 - *20-12-2022*
+ Update `AdsDataTable` for a11y

##### #1.4.13 - *28-11-2022*
+ Update `OAuth Plugin` for nonce verification

##### #1.4.12 - *21-11-2022*
+ Update `AdsTextArea`, `AdsTextField`,  `AdsSelect` and `TabNavigation`

##### #1.4.11 - *21-11-2022*
+ Update `OAuth Plugin` for token decode

##### #1.4.9 - *16-11-2022*
+ Update `AdsTextArea`, `AdsTextField` and `AppBar`

##### #1.4.8 - *10-11-2022*
+ Update background images for `Banner`
+ Update default height for `AdsButton`
+ Add a background colour prop for `Alert`

##### #1.4.7 - *19-10-2022*
+ Update ChipFilter for a11y

##### #1.4.6 - *13-10-2022*
+ Update ChipFilter for a11y, AppBar for slot width

##### #1.4.5 - *07-09-2022*
+ Update ADS colors

##### #1.4.4 - *24-08-2022*
+ Update scss variable for primary blue

##### #1.4.3 - *17-08-2022*
+ Update scss and ads-colors.js

##### #1.4.2 - *17-08-2022*
+ Add "Public Sans" as the first system fallback font

##### #1.4.1 - *17-08-2022*
+ Update existing ADS colors, add three new colors

##### #1.3.2 - *30-06-2022*
+ Add `TabNavigation` and `Notifications`

##### #1.3.0 - *30-06-2022*
+ Add `ParentIdLogin`

##### #1.2.63 - *02-06-2022*
+ Update `DialogGeneric` for a11y

##### #1.2.62 - *02-06-2022*
+ Update `AdsChart`

##### #1.2.61 - *19-05-2022*
+ Update sort for `AdsDataTable`

##### #1.2.60 - *16-05-2022*
+ Update `AdsFormatContactField`

##### #1.2.59 - *27-04-2022*
+ Update styling for `Notifications`

##### #1.2.58 - *22-04-2022*
+ Update styling for `Alert`

##### #1.2.57 - *13-04-2022*
+ Fix Vuetify breaking issue in `HStepper`
+ Add the new `AdsChart`

##### #1.2.56 - *13-04-2022*
+ Fix naming issue in `ChipFilter` for mobile

##### #1.2.55 - *12-04-2022*
+ Fix naming issue in `ChipFilter` for mobile

##### #1.2.54 - *29-03-2022*
+ Refactor `ChipFilter`

##### #1.2.53 - *28-03-2022*
+ Update `Banner` and `MyEssentials`
+ Rename `Chips` file to `Chip` (to be the same as the export name)

##### #1.2.52 - *24-02-2022*
+ Update `Banner` with a new slot

##### #1.2.51 - *17-02-2022*
+ Update `OAuth` plugin
+ Update `AdsFormatContactField`

##### #1.2.50 - *16-02-2022*
+ Update `OAuth` plugin

##### #1.2.49 - *16-02-2022*
+ Add the new `AdsFormatContactField`

##### #1.2.48 - *07-02-2022*
+ Update `ChipFilter` for accessibility

##### #1.2.46 - *01-02-2022*
+ Update and refactor `FullscreenDialog`

##### #1.2.40 - *01-02-2022*
+ Add the new `AdsDrawer`
+ Update eslintrc.js for single quotes

##### #1.2.39 - *17-01-2022*
+ Update `IeBlocker` info text

##### #1.2.38 - *20-12-2021*
+ Update `ChipFilter` for accessibility
+ Add the new `EnvironmentInfo`

##### #1.2.37 - *15-12-2021*

+ Update `AdsSelect` and `AdsExpansionPanel` for better v-model support as per ADS dev guide
+

##### #1.2.36 - *15-12-2021*

+ Update `AdsSelect` and `AdsExpansionPanel` for better v-model support as per ADS dev guide

##### #1.2.35 - *04-12-2021*

+ Update `Menu` and `NavigationDrawer` for mobile
+ Update `AdsDataTable` for accessibility
+ Add `DialogGeneric` that can accept v-model bounded in parent component and all ascendant components

##### #1.2.34 - *03-12-2021*

+ Update `Alert` for accessibility

##### #1.2.33 - *01-12-2021*

+ Update `NavigationDrawer` to support external links
+ Update `BlockUI` for accessibility

##### #1.2.32 - *29-11-2021*

+ Update `FocusTrap` for a minor issue

##### #1.2.31 - *17-11-2021*

+ Update `Notifications` as per the new design
+ Add `ActivityMonitor`, `SessionCountdown`
+ Update custom event names as per ADS developers guide

##### #1.2.30 - *22-10-2021*

+ Update `TabNavigation`, `NavigationDrawer`
+ Update `ads.scss` for input label styling

##### #1.2.29 - *18-10-2021*

+ Update `ADSButton` focus styling
+ Fix some styling issues in `AppBar`
+ Reduce library size by on-demand import `lodash`

##### #1.2.28 - *14-10-2021*

+ Update `TabNavigation` vertical layout styling

##### #1.2.27 - *14-10-2021*

+ Update `ADS_Colors`

##### #1.2.26 - *14-10-2021*

+ Update `Alert` for a11y
+ Update `ADS_Colors` export

##### #1.2.25 - *13-10-2021*

+ Add `ADS_Colors` constants and update all the hard-coded hex color values in the library

##### #1.2.24 - *08-10-2021*

+ Update `AdsButton`, `AdsDataTable`, `ExpansionPanel` and `TabNavigation`

##### #1.2.23 - *08-10-2021*

+ Update a scss variable in `IeBlocker`

##### #1.2.22 - *08-10-2021*

+ Update `Chips`
+ Update `TabNavigation` to support vertical layout
+ Update `NavigationDrawer` to support 'Mini' state
+ Optimize components following ADS best practices
+ Update eslint

##### #1.2.21 - *29-09-2021*

+ Fix `AdsDataTable` sort prop issue

##### #1.2.20 - *22-09-2021*

+ Update `AppBar`, `Profile` and `MyEssentials` for focus state outline
+ Update `AdsDataTable` for dark mode
+ Fix small issues in `AppBar` and `Notifications`

##### #1.2.18 & 1.2.19- *20-09-2021*

+ Fix `Notifications` styling not being 'scoped' within the component

##### #1.2.17 - *20-09-2021*

+ Update `ErrorPage`, `ChipFilter`, `ExpansionPanel` and `NavigationDrawer`

##### #1.2.16 - *09-09-2021*

+ Add `AdsIconButton`
+ Update `DatePicker`

##### #1.2.15 - *03-09-2021*

+ Add `ErrorPage`, `Notifications`, `SkipLink`
+ Update `FullscreenDialog`

##### #1.2.14 - *19-08-2021*

+ Fix `ToggleButtonGroup` directory name

##### #1.2.13 - *19-08-2021*

+ Add `AdsTextArea` and `ToggleButtonGroup`
+ Update `FullscreenDialog` and `ChipFilter`

##### #1.2.12 - *16-08-2021*

+ Update `ChipFilter`, `FocusTrap` and `DatePicker`
+ Update a11y support for `NavigationDrawer`, `MyEssentials`, `AppBar`, `AdsButton`

##### #1.2.11 - *04-08-2021*

+ Fix open/close status not announced by `NavBar`
+ Fix focus state styling for `ExpansionPanel`
+ Update to `AdsDataTable` mobile view styling

##### #1.2.10 - *15-07-2021*

+ Enable multiple filters on legacy `DataTable` component
+ Improve `DatePicker` text input parser for "DD MMM YYYY" date format
+ Update `AdsSelect` drop down focus styling
+ Fix bugs in `ChipFilter`
+ Update mobile styling for `AdsDataTable`
+ Add event listeners for `Alert`, `Profile`, and `Search` components

##### #1.2.9 - *25-06-2021*

+ Updates for `FullscreenDialog`, `MyEssentials`and `OAuth` components

##### #1.2.8 - *09-06-2021*

+ Add new `FullscreenDialog` component
+ Updates for `ThemeSwitch`, `Alert`, `MyEssentials` `OAuth` components

##### #1.2.7 - *27-05-2021*

+ Add afterLogin callback for `OAuth` plugin
+ Fix `Alert` style to match brand guidelines
+ Add new `ChipFilter` component
+ Increase outline button border width to 2px
+ Pass through `exact` prop to match exact routes on `NavigationDrawer`
+ Style fixes on `AdsSelect`

##### #1.2.6 - *14 Apr 2021*

+ Update spacing on `AdsDataTable` header and columns

##### #1.2.5 - *12 Apr 2021*

+ Update spacing on `AdsDataTable` footer

##### #1.2.4 - *08 Apr 2021*

+ Add animation to `Stepper`
+ Add accessibility support `TabNavigation`

##### #1.2.3 - *30 Mar 2021*

+ Emit search field update in `AdsDataTable`

##### #1.2.2 - *29 Mar 2021*

+ Fix data validation issue in `DatePicker` component

##### #1.2.1 - *29 Mar 2021*

+ Add transition for `AdsButton` component
+ Fix a bug in `Alert` component
+ Fix a bug in `DatePicker` component
+ Update a prop for `AdsDataTable` component

##### #1.2.0 - *19 Mar 2021*

+ Add new `AdsDataTable` component
+ Update `DataSwitcher` to rely on `$attrs` and `$listeners`

##### #1.1.36 - *18 Mar 2021*

+ Add new `TabNavigation` component
+ Update `AdsFileInput` as per design
+ Update `AdsButton` to support loader slot and remove fixed height defaults

##### #1.1.35 - *10 Mar 2021*

+ Add outline focus state for `AdsButton` for accessibility
+ Add focus state for `ExpansionPanel` for accessibility
+ Add new internal link button to `DataTable`

##### #1.1.34 - *04 Mar 2021*

+ Remove `FocusTrap` from `Dialog` component since it's fixed in Vuetify
+ Fix duplicate change event on `AdsSelect`
+ Pass through `$attrs` and `$listeners` to `DataTable` component

##### #1.1.33 - *26 Feb 2021*

+ Fix padding between logo and text in `AppBar`
+ Update `ADSButton` to make `ariaLabel` non-required

##### #1.1.32 - *19 Feb 2021*

+ Add accessibility support `Banner`
+ Refactor `ADSButton` and add accessibility support

##### #1.1.31 - *10 Feb 2021*

+ Fix reactivity issue with `DataSwitcher`

##### #1.1.30 - *05 Feb 2021*

+ Rename `CircleIcon` to `FeatureIcon`
+ Scope styles on `OrderedList` component
+ Don't display default 'None' job title in `profile` menu

##### #1.1.29 - *28 Jan 2021*

+ Removed default click event on `Chip` component for accessibility

##### #1.1.28 - *27 Jan 2021*

+ Add `FocusTrap` component

##### #1.1.27 - *21 Jan 2021*

+ Add `clientSecret` option to `OAuth` plugin for code grant flow

##### #1.1.26 - *20 Jan 2021*

+ Fix scss variable reference error from `OrderedList` component

##### #1.1.25 - *19 Jan 2021*

+ Add `OrderedList` component

##### #1.1.24 - *15 Jan 2021*

+ Add `CircleIcon` component

##### #1.1.23 - *04 Dec 2020*

+ Add demo mode for `IEBlocker`
+ Accessibility improvements for `AppBar`

##### #1.1.22 - *02 Dec 2020*

+ Fix `Chip` color issue

##### #1.1.21 - *26 Nov 2020*

+ Update `MyEssentials` according to new design

##### #1.1.20 - *24 Nov 2020*

+ Fix `AppBar` title overflow styling issue

##### #1.1.19 - *20 Nov 2020*

+ Add ThemeSwitch component

##### #1.1.18 - *19 Nov 2020*

+ Improve date picker error message accessibility
+ Add unit testing

##### #1.1.17 - *18 Nov 2020*

+ Fix a bug for AppBar

##### #1.1.16 - *17 Nov 2020*

+ Update AppBar
+ Add Search component

##### #1.1.15 - *16 Nov 2020*

+ Rename Inputs components
+ Add ShowMore component

##### #1.1.14 - *26 Oct 2020*

+ Fix bug

##### #1.1.13 - *26 Oct 2020*

+ Add `Search` field component
+ Add `Search` field to `AppBar`
+ Added `FileInput` component
+ Pass through events from `AdsSelect`
+ Dark mode updates

##### #1.1.12 - *14 Oct 2020*

+ Fix initial loading issue in `DatePicker`

##### #1.1.11 - *12 Oct 2020*

+ Add header slots to `AdsExpansionPanel`

##### #1.1.10 - *12 Oct 2020*

+ Add `HStepper` (Horizontal Stepper) component
+ `Stepper` Accessibility updates
+ Fix null initital value on `DatePickerRange`

##### #1.1.9 - *09 Oct 2020*

+ Add v-model support and custom class props for `AdsExpansionPanel`
+ Fix clearing values via v-model in `DatePicker`
+ Emit `date-picker-activated` event on `DatePicker` and `DatePickerRange`

##### #1.1.8 - *30 Sep 2020*

+ Add dark theme support for some components

##### #1.1.6 - *28 Sep 2020*

+ Add `TextField` component
+ Update `AppBar` component
+ Fix dayjs module import issue with `DatePicker`

##### #1.1.5 - *27 Sep 2020*

+ Fix initialisation issue with `DatePicker`

##### #1.1.4 - *27 Sep 2020*

+ Add `DatePicker` and `DatePickerRange` components

##### #1.1.3 | 1.0.44 - *15 Sep 2020*

+ Add `DataTable` expandableCols props for expandable sections

##### #1.1.2 - *18 Aug 2020*

+ Fix background colour of `DataSwitcher` for light theme
+ Fix text wrapping issue on `AdsExpansionPanel`
+ Fix background colour accessibility issue for in-page `Alert` component

##### #1.1.1 - *14 Aug 2020*

+ Merge patch `1.0.43`

##### #1.1.0 - *13 Aug 2020*

+ Refactor `DataSwitcher`, passing attributes, events, and slots to underlying `v-autocomplete`
+ Add `AdsExpansionPanel` component

#### Minor version bump

##### #1.0.43 - *14 Aug 2020*

+ Add missing accessibility css to `Profile` component
+ Expose `OAuth` profile and loaded properties via getters
+ Encode/Decode url params as necessary in `OAuth` plugin.

##### #1.0.42 - *06 Aug 2020*

+ Fix variables.scss dependency on `Stepper` component

##### #1.0.41 - *30 Jul 2020*

+ Fix accessibility (screen reader) issues on `Stepper` component
+ Minor update to styling of `Stepper` component

##### #1.0.40 - *28 Jul 2020*

+ Fix initial data load issue on `AdsSelect`
+ Emit change event from `AdsSelect`
+ Add `enableHomeLink` option (default true) to `AppBar` to optionally disable links in app bar

##### #1.0.39 - *24 Jul 2020*

+ Accessibility improvements

##### #1.0.38 - *22 Jul 2020*

+ Add weather icon dependencies for `Weather` component.

##### #1.0.36 - *22 Jul 2020*

+ Add `forceProdMode` to `OAuth` plugin to get auth from OAuth server even in development mode
+ Update ads colour palette
+ Add IE11 compatible `AdsSelect` component based on Vuetify `v-select`.
+ Update `NavigationDrawer` to allow showing user profile on mobile.
+ Add `Weather` component to index.
+ Fix linting issues.

##### #1.0.35 - *15 Jul 2020*

+ Fix issue when `client_id` not passed back from OAuth service
+ Infer login redirect router path from `params.redirect_uri`

##### #1.0.34 - *15 Jul 2020*

+ Make `logoutUri` optional for `OAuth` plugin
+ Add `tokenUri` option for `OAuth` plugin for use in PKCE mode

##### #1.0.32 - *13 Jul 2020*

+ Add the ADS style files into the new `styles` folder

##### #1.0.26 - *07 Jul 2020*

+ Add `PKCE` Authorisation Code capability to `OAuth` plugin

##### #1.0.25 - *01 Jul 2020*

+ OAuth plugin updates
  + Plugin will now re-authenticate with sso on every app refresh
  + Fix issue with redirecting to subroutes with params after sso auth
  + Popup auth is now optional with `enablePopupAuth` option. Default false - auth will redirect current page to sso login
  + Added `loaded` property, accessible via `$OAuth.loaded` which is set to true after the access_token is set.
  + New plugin options:
    + `secureApp` - makes all routes protected by default - default false
    + `devIdTokenOverride` - use a custom id-token for dev testing e.g. with different roles
    + `enablePopupAuth` - will attempt to show a separate pop-up for sso login to preserve current app state - default false

##### #1.0.24 - *29 Jun 2020*

+ Add `Weather` component

##### #1.0.23 - *18 Jun 2020*

+ Fixed action button styling in `DataTable`

##### #1.0.22 - *16 Jun 2020*

+ Fixed reference error to `DataTableFieldTypes` in `DataTable`

##### #1.0.21 - *16 Jun 2020*

+ Fixed spelling error on `DataTable`, `FILED_TYPE_*` -> `FIELD_TYPE_*` and renamed reference from `FiledCustomTypes`
  to `DataTableFieldTypes`.
+ Add additional slot to `AppBar` for app icon's container, `appIconContainer`.

##### #1.0.20 - *03 Jun 2020*

+ Remove Safari from suggested browsers in `IeBlocker`
+ Fix `Chips` linting errors

##### #1.0.19 - *03 Jun 2020*

+ Add `Chips` component
+ Add `publicApp` prop to `IeBlocker` which adds browser suggestions for Safari and MS Edge in addition to Chrome

##### #1.0.18 - *02 Jun 2020*

+ Add `homeLink` property to `AppBar` component

##### #1.0.17 - *29 May 2020*

+ Fix `DataTable` referencing error

##### #1.0.16 - *27 May 2020*

+ Add `IeBlocker` component
+ Add background options to `Banner` component
+ Fix margins in `NavigationDrawer` sub-menus

##### #1.0.15 - *21 May 2020*

+ Add `AdsButton` component
+ Pass through binding of attributes from `NavigationDrawer` to underlying `v-navigation-drawer`

##### #1.0.14 - *19 May 2020*

+ Apply vue's [`strongly-recommended`](https://vuejs.github.io/eslint-plugin-vue/rules/#priority-b-strongly-recommended-improving-readability)
  linting rules
+ Added new `Alert` component
+ Restyling for `NavigationDrawer`
+ Added notification counter feature to `NavigationDrawer`
+ Fix center alignment on `InitialsIcon`

##### #1.0.13 - *07 May 2020*

+ Fix timeout detection issue with OAuth plugin
+ Remove console log from AppIcon component

##### #1.0.12 - *24 Apr 2020*

+ Add `Stepper` navigation component

##### #1.0.11 - *17 Apr 2020*

+ Add `OAuth` plugin

##### #1.0.10 - *16 Apr 2020*

##### Breaking Changes

+ `AppBar` `schoolPicker` slot renamed to `dataSwitcher`

##### Other changes

+ Add `preMenu` and `postMenu` slots on `NavigationDrawer`
+ Remove requirement for `clickHander` function in `NavigationDrawer` item
+ Update `Banner` styling to match ADS
+ Add `AppBar` with `backButton` and `extension` slots to support mobile designs
+ `Profile` menu web accessibility and IE11 fixes
+ `Profile` menu "Update Secret Question" renamed to "Update Secret Questions"
+ Add new `BlockUI` component for blocking UI when loading
+ Fix `MyEssentials` asynchronous loading issue

##### #1.0.9 - *03 Mar 2020*

+ Data table search bug fix

##### #1.0.8 - *21 Feb 2020*

+ Updated DataSwitcher component to meet new ADS standard

##### #1.0.7 - *20 Feb 2020*

+ Added DataTable component, its document is within the component folder

##### #1.0.6 - *11 Feb 2020*

+ Renamed SchoolPicker to DataSwitcher

##### #1.0.5 - *11 Feb 2020*

+ Added Banner component

##### #1.0.3 & #1.0.4 - *28 Jan 2020*

+ Updated NavigationDrawer to support sub-items.
+ Upgraded Vuetify version to 2.2.4 in peerDependencies

##### #1.0.1 & #1.0.2 - *09 Dec 2019*

+ Updated AppBar and AppIcon, Added Dialog & InfoCard

##### #1.0.0 - *02 Dec 2019*

+ Released version 1.0.0