base UI components v5.0.0

base-ui-components ​

base Angewandte Component Library

This is a Vue 3 based component library developed by and used for projects of the base Angewandte, a collection of applications for the staff and students at the University of Applied Arts Vienna.

Installation and Usage ​

Install via:

npm i base-ui-components

and import and use the desired component(s) in your vue file(s):

vue
Component.vue

<script setup>
  import { BaseButton } from 'base-ui-components';
</script>

<template>
  <BaseButton
    text="Click me!" />
</template>

All available components, their usage and demos can be found in our styleguide.

The code base is available at GitHub.

Development Instructions

Customization ​

App color and certain other styles can be customized via css variables. In order to do so you can add the following variables to your main css/scss file:

css
:root {
  --app-color: #FF9800;
  --app-color-secondary: #b085f5;
  --font-color: rgb(0, 0, 0);
  --font-color-second: rgb(107, 107, 107);
  --button-header-color: rgb(240, 240, 240);
  --keyboard-active-color: rgb(217, 217, 217);
  --input-field-color: rgb(200, 200, 200);
  --background-color: #f0f0f0;
  --box-color: #ffffff;

  --uploadbar-color: #999999;
  --switch-checked-color: #4d4d4d;
  --switch-svg-checked-color: #ffffff;
  --graytext-color: rgba(16, 16, 16, 0.3);

  --warning-color: #ff4444;
  --pagination-bullet-color: #444444;

  --base-tooltip-box-threshold-top: 0;
}

Then in your main.js file import your styles before the base-ui-components file. E.g.:

js
import './styles/app.scss';

import 'base-ui-components/base-ui-components.css';

Composables ​

Additionally, base-ui-components export the following composables for re-use:

  • useAnnouncer: adding a hidden element with aria-live attribute set to assertive
  • useDebounce: set a timeout before function execution and reset timeout if function is called again
  • useElementFadeOut: add a fade out via pseudo-elements when child overflows element container
  • useElementObserver: composable to use for Resize-, Mutation- or IntersectionObserver
  • useEventListener: add and remove event listeners
  • useExtractAttrs: split attributes set on root component in attributes that should remain on root (e.g. class) and attributes that should be forwarded to a child
  • useHasSlotContent: check if a slot has child elements or text set
  • useHorizontalDragScroll: enable horizontal dragging of elements via mouse on desktop
  • useI18n: get or set localized labels with vue-i18n
  • useId: create a persistent element id
  • useListNavigation: navigate a list
  • useNotifications: composable to trigger the BaseNotification component
  • usePopUpLock: set a body scroll lock on pop up opening
  • useTabKeyHandler: enable key events to remain within one element (e.g. pop up)
  • useWindowResize: listen to and carry out events on window resize

License ​

See LICENSE

alt text

alt text

Support ​

This open-source project was developed (and more specifically - cross-browser tested) with the support of: Browserstack-logo