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):

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:

: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;
  --header-height: 55px;
}

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

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
• 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

{width=200}

Support

This open-source project was developed (and more specifically - cross-browser tested) with the support of: {width=200}