DPA-ID Partner Components vue library

Vue wrapper for the DPA ID partnmer components.

Install

To add the package to your project run

npm install @dpa-it/dpa-id-partner-components-vue

Usage

You can import the component like any other vue component.

<template>
  <DpaIdAppswitcher></DpaIdAppswitcher>
  <DpaIdUsericon></DpaIdUsericon>
</template>

<script setup>
import { DpaIdAppswitcher, DpaIdUsericon } from '@dpa-it/dpa-id-partner-components-vue';

</script>

Properties

Appswitcher

| Property | Attribute | Description | Type | Default |
|----------------------|------------------------|---------------------------------------------------------------|----------|---------------------|
| arrowDistanceRight | arrow-distance-right | Distance of the arrow from the right border | string | '1rem' |
| backgroundColor | background-color | Color of the background | string | '#fff' |
| fontColor | font-color | Color of the font | string | 'rgb(33, 33, 33)' |
| iconColor | icon-color | Color of the icon | string | 'rgb(33, 33, 33)' |
| outerSize | outer-size | Inner size of the icon | number | 24 |
| overlayRight | overlay-right | Distance of the overlay from the right border of the wrapper | string | '0' |
| overlayTop | overlay-top | Distance of the overlay from the bottom border of the wrapper | string | '30px' |

UserIcon

Properties

| Property | Attribute | Description | Type | Default | |----------------------|------------------------|------------------------------------------------------------------------------------------------|--------------------------------|----------------------| | arrowDistanceRight | arrow-distance-right | Distance of the arrow from the right border | string | '1rem' | | clientId | client-id | Auth0 client ID, needed for logout | string | '' | | firstname | firstname | User firstname | string | '' | | imgUrl | img-url | Profile picture of the user to be displayed | string | '' | | initials | initials | User initials | string | '' | | lastname | lastname | User lastname | string | '' | | logoutLabel | logout-label | Button label to logout | string | 'Abmelden' | | manageIdLabel | manage-id-label | Button label that links to the DPA ID management dashboard | string | 'dpa ID verwalten' | | overlayRight | overlay-right | Distance of the overlay from the right border of the wrapper | string | '0px' | | overlayTop | overlay-top | Distance of the overlay from the bottom border of the wrapper | string | '30px' | | service | service | Service name (reflected to Useradmin myprofile URL as a parameter, if specified and not empty) | string | '' | | size | size | Icon size | number | 24 | | stageAuth0 | stage-auth-0 | Stage of auth0 to refer to | "dev" \| "prod" \| "staging" | 'prod' | | stageUseradmin | stage-useradmin | Stage of user-administration to refer to | "dev" \| "prod" \| "staging" | 'prod' |

Events

| Event | Description | Type | |----------|---------------------------------------------|---------------------| | logout | Event fired when clicking the logout button | CustomEvent<void> |

Methods

redirectToAuth0() => Promise<void>

redirects to the correct logout url of auth0

Returns

Type: Promise<void>