eviso-ui-library v2.0.0

eVISO UI Library

A collection of ready to use UI elements offering out of the box functionality and styling in accordance with eVISO's enterprise design standards.

Contents

• Tech
• Components
• Use
  • Install
  • Configure
• Contribute
  • Install
  • Develop

Tech

The eVISO UI Library was developed with:

• Vue.js 2
• BootStrap Vue
• FontAwesome Icons v6.4.0
• Vue I18n v8.x
• Moment.js

Note: If your project is not using any of the above, we don't guarantee a successful integration of the library.

Components

This section lists all the components currently supported by the eVISO UI Library:

• Table

Use

This section explains how to setup the eVISO UI Library on your project.

Install

Use the package manager npm to install eviso-ui-library.

npm install eviso-ui-library

If you prefer, you can also use yarn to install it.

yarn install eviso-ui-library

Configure

If you've a Nuxt project create a Nuxt Plugin as follows:

// plugins/eviso-ui-library.js
import Vue from 'vue'
import evisoUiLibrary from 'eviso-ui-library'

Vue.use (evisoUiLibrary)

And add the plugin to the nuxt.config.js file:

// nuxt.config.js
plugins: [
    '~/plugins/eviso-ui-library.js',
  ],

Next, you need to make sure that you use the library styling. On your entry css file add the following lines of code:

// assets/app.scss
// ...

// This will import the theme definition of the UI Library
@import 'eviso-ui-library/dist/e_uilib_theme.scss';

// The import of Bootstrap an BootstrapVue SCSS files should be between the Library theme and styles files
@import '~bootstrap/scss/bootstrap.scss';
@import '~bootstrap-vue/src/index.scss';

// This will import the elements styling of the UI Library
@import 'eviso-ui-library/dist/e_uilib_styles.scss';

If you would like to override the library styling you can do it right after the lines of code added above.

// To override colors
.bg-ordinal-danger-dark {
  background-color: #EB5757;
}

// To override styles
.e-cell-ordinal {
  color: white ;
}

Now you're all set to use the components everywhere in your project! 🎉

Thank you for using our library :star:

Contribute

This section explains how to contribute to the development of eVISO UI Library.

Install

Use git to clone this repository into your computer.

git clone https://gitlab.com/wsenergia/eviso-ui-library.git

Use the package manager npm to install all dependencies.

npm install

Develop

When you're ready to start contributing, create a feature branch based on staging and start developing.

Run the code to render a default page defined in App.vue and start developing new components.

npm run serve

If you would like to merge a new feature into staging please request our approval before merging.

Test

Make sure to test the package locally before publishing. To do so execute the following commands on the package folder:

npm run build
npm link

On the project's folder in which you would like to test the package you'll need to link to the package.

npm link eviso-ui-library

If you run the project locally you should be able to test the package.

Publish

To publish the package, the first thing you need to do is to update its version on package.json file. To do so follow the Semantic Versioning convention.

Afterwards, build your package successfully and confirm that a folder named dist was generated in the root of your package's folder tree shown as follows.

npm run build

- dist
  -- e_uilib_styles.*
  -- e_uilib_theme.*
  -- eviso-ui-library.*

Finally, publish your package to NPM.

npm publish

Thank you for collaborating :star: