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, MyEssentialsand 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 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