@global-exchange/ui-kit-library NPM

UI Kit Library

Global Exchange set of components to share and reuse between Vue apps.

Installation

UI Kit Library is available as an npm package.

npm install @global-exchange/ui-kit-library

Fonts

UI Kit Library was designed with the Montserrat font in mind. So be sure to include it in your project.

Styles

UI Kit Library has been created according to custom styles. To maintain consistency there are files that must be included: transitions, utilities and reset. So be sure to include them in your project. The files are available in the documentation.

Usage

You can use any of the components as demonstrated in the documentation. Here is a quick example to get you started:

Basic import

At App.vue import the component

<script setup lang='ts'>
import { GENButton } from '@global-exchange/ui-kit-library';
<script>
<template>
<div class='App'>
    <h1 class='App-title'>Welcome to UI Kit Library</h1>
    <section class='App-button'>
      <GEN-Button color='primary' size='medium'> Install </GEN-Button>
    </section>
  </div>
</template>

Import as plugin

At main.js import the library

import { createApp } from "vue";
import App from "./App.vue";
import * as UIKitLibrary from "@global-exchange/ui-kit-library";

const app = createApp(App);
app.config.productionTip = false;
app.use({ install: UIKitLibrary.install });
app.mount("#app");

At App.vue use the component

<template>
  <div class="App">
    <h1 class="App-title">Welcome to UI Kit Library</h1>
    <section class="App-button">
      <GEN-Button color="primary" size="medium">
        Install
      </GEN-Button>
    </section>
  </div>
</template>

Available features

Architecture

Context	Code	Application	Description
Generic	GEN		Any application
Touch Screen	TSC		Touch screen applications
	DIS	Dispenser	Dispenser application
Web	WEB		Web applications

Components

Component	Type	Application	Use
Banner	GEN	All	-
Bubble	GEN	All	-
Button	GEN	All	-
CardCurrency	TSC	All TSC	For currencies
Databoard	TSC	All TSC	For canvas & input
Flag	TSC	All TSC	-
InputDispenser	TSC	DIS	-
Keyboard	TSC	All TSC	-
Modal	TSC	All TSC	-
SelectDispenser	TSC	DIS	-
SelectImage	TSC	All TSC	For options with image
Spinner	GEN	All	-
Table	TSC	All TSC	-
TableDispenser	TSC	DIS	-

Utilities

Utility	Description
truncateAmount	Separates the given amount into integer part and decimal part
isDecimal	Indicates if the given value is decimal or not
getDataTestAttr	Transforms the given element into a selector attribute for testing