# base-ui-components

> base Angewandte Component Library

This is a [Vue 3](https://vuejs.org/) based component library developed by and used for projects of the
[base Angewandte](https://base.uni-ak.ac.at),
a collection of applications for the staff and students at the [University of
Applied Arts Vienna](https://www.dieangewandte.at).

### 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](https://base-angewandte.github.io/base-ui-components/).

The code base is available at [GitHub](https://github.com/base-angewandte/base-ui-components).

[Development Instructions](development.md)

### 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;
  --header-height: 55px;
}
```
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
* **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](https://github.com/base-angewandte/base-ui-components/blob/main/LICENSE)


<!-- logo angewandte -->
<img src="./static/angewandte-logo.svg" alt="Angewandte-logo" title="Angewandte" width="200px">
<br>
<!-- logo base -->
<img src="./static/base.png" alt="base Angewandte-logo" title="base Angewandte">

### Support

This open-source project was developed (and more specifically - cross-browser tested) with the support of:
<img src="./static/browserstack.svg" alt="Browserstack-logo" title="Browserstack" width="200px">