AIS Components

AisHeader ​

The AisHeader consists of the AisBrandBar on the top row, the optional AisNavBar on the second row, and the optional AisBanner above it all.

AisNavBar ​

The AisNavBar accepts one or two separate AisNav navigation components. The main nav aligns to the left and the secondary nav aligns to the right. The AisNavBar will appear if at least one of the AisNav components is provided. The navs can be provided via slots or props.

Using Props ​

The AisHeader exposes a nav-items prop for the main nav and a secondary-nav-items for the secondary nav. The props accept an Array of items defining the contents of the nav. Please see AisNav for more detail.

Using Slots ​

The AisHeader exposes the main nav through its default slot and the secondary nav through its secondaryNav slot. Please see AisNav for more detail.

The AisBanner is intended to be used for a couple different purposes. The first of which is identifying which environment your app is running in (dev, test, etc.). The second is for notifying customers of some important message, like upcoming maintenance. The banner section is exposed through banner slot and through a banner prop. This prop accepts an Object in the following format:

js
export const banner = {
    env: 'test',
    variant: 'danger',
    context: {
        db: 'MAUITST',
        redis: 'instance123'
    },
    message: 'Data refreshed: 02/25/2024 04:00AM',
    padding: 'py-0.5 px-2',
}

Using Prop ​

TEST Environment

Using Slot ​

Maintenance Scheduled for 05/25/2022 from 12:00am-2:00am

Complete Example ​

TEST Environment
db: MAUITST ~ redis: instance123
Data refreshed: 02/25/2024 04:00AM

UIP to OIDC Transition ​

When originally built, AisHeader baked-in support for UIP authentication. The UIP details were hard-coded in AisUserMenu. Now, as we transition to OIDC authentication, AisHeader, AisBrandBar, and AisUserMenu all emit a @login event. This event gives consumers the flexibility to customize their authentication flow.

For applications still using UIP, there is a new utility method that extracts the calculation of the UIP redirect url. This can be used to mimic the previous behavior. This utility will be retired with UIP.

vue
<template>
  <AisHeader @login="handleLogin" ...>...</AisHeader>
</template>

<script setup>
  import { AisHeader, uipLoginUrl } from '@ais-public/ais-components'
    
  const handleLogin = async () => {
    // Example using Nuxt's navigateTo()
    await navigateTo(uipLoginUrl(), {external: true})
  }  
</script>

Component Reference ​

Props ​

Property
Type(s)
Required
Default
Description
Deprecated
auth
Boolean
false
Boolean prop to indicate that authentication is used in the application.
false
banner
Object
() => {}
A pass-through object to configure the banner. See Banner section for more detail
false
fixed
Boolean
false
Whether to fix the header to the top of the page.
false
href
String
''
The url for the application home page
false
originalUser
Object, String
''
This is used when impersonating to keep track of the actual user.
false
searchable
Boolean
false
Whether the Search bar should be displayed in the header
false
site
String
''
The application site name
false
to
String
''
The nuxt/vue path to the application home page
false
user
Object, String
''
For the User Menu. Accepts either a String (Hawk ID) or a user object, which must include the key "hawkId"
false
userMenuItems
Array
[]
Menu items to display in the user menu (AisUserMenu)
false

Slots ​

Name
Scoped
Description
banner
No
Scoped slot for custom rendering the banner
default
No
Scoped slot for custom rendering the navbar
secondaryNav
No
Scoped slot for custom rendering the secondary navbar (on the right)

Events ​

Event
Arguments
Description
login
  • event
    object
    -
    Native event object
Emitted when the user clicks login
logout
  • event
    object
    -
    Native event object
Emitted when the user clicks logout
stopImpersonating
  • event
    object
    -
    Native event object
Emitted when Stop Impersonating is clicked in the user menu