npm package: @lucidaio/vizor
Description: Vue 2 component library and CSS framework with easy customization and extendability
Author: Lucid, LLC
Latest version: 0.0.1-rc.2

<p align="center">
  <img src="https://github.com/LucidAIO/VIZOR/raw/master/docs/assets/logo.png" width=200>
</p>

<h1 align="center">
  VIZOR | Vue.js Component Library
</h1>

<p align="center">
<img src="https://img.shields.io/npm/dw/@lucidaio/vizor?style=for-the-badge">
  <img src="https://img.shields.io/github/issues/LucidAIO/VIZOR?style=for-the-badge">
  <img src="https://img.shields.io/github/stars/LucidAIO/VIZOR?style=for-the-badge">
  <img src="https://img.shields.io/github/license/LucidAIO/VIZOR?style=for-the-badge">
</p>

VIZOR is a component library for Vue 2 and CSS framework with a focus on Desktop GUI applications. It's designed to be easily customizable and extendable out of the box.

VIZOR's [themes](#styles--customization) are largely independant of the components in this library and can be used on their own as a CSS framework like Bulma or Bootstrap. VIZOR doesn't use redundant classes like `.button` or `.input` to restyle default HTML components and instead overwrites the defaults for each component themselves.

You can find a complete list of components [below](#components). Follow [@LucidAIO](https://twitter.com/LucidAIO) on Twitter for important annoucements. We release a lot of our in-house tools as open-source projects.

## Quickstart

### Installing with NPM
```
$ npm install @lucidaio/vizor
```

### Installing with Yarn
```
$ yarn add @lucidaio/vizor
```

### Import the core library and styles
```js
import Vizor from '@lucidaio/vizor';
import '@lucidaio/vizor/themes/vizor-dark.css';

Vue.use(Vizor);
```

### Importing specific components
```js
import { VzToast, VzToastProgrammatic } from '@lucidaio/vizor';
```

### Icons
VIZOR uses [@mdi/font](https://www.npmjs.com/package/@mdi/font) by default. Enabling use of any desired icon library is in the works but for now the Material Design Icon classes are what's used.

## [Components](docs/md/Components.md#Components)

### Regular
- [VzButton](docs/md/Components.md#VzButton)
- [VzInput](docs/md/Components.md#VzInput)
- [VzDropdownInput](docs/md/Components.md#VzDropdownInput)
- [VzTitlebar](docs/md/Components.md#VzTitlebar)
- [VzSidebar](docs/md/Components.md#VzSidebar)

### Programmatic
- VzDialogProgrammatic
- [VzMessageBoxProgrammatic](docs/md/Components.md#VzMessageBoxProgrammatic)
- [VzToastProgrammatic](docs/md/Components.md#VzToastProgrammatic)

## [Layout](docs/md/Layout.md)
- [Columns](docs/md/Layout.md#Columns)
- [Panels](docs/md/Layout.md#Panels)
- [Helper Classes](docs/md/Layout.md#helper-classes)

## Styles & Customization
VIZOR comes with two themes by default: [vizor-dark](src/themes/vizor-dark.css) and [vizor-light](src/themes/vizor-light.css). You can choose between the two when you import the stylesheet (shown above). If you'd like to create your own theme, all you need to do is define an object with the following properties:
```js
let style = {
  background:    "#FFF",
  titleBar:      "#FFF",
  sideBar:       "#FFF",
  panel:         "#FFF",
  border:        "#FFF",
  primary:       "#FFF",
  secondary:     "#FFF",
  link:          "#FFF",
  success:       "#FFF",
  warning:       "#FFF",
  danger:        "#FFF",
  text:          "#FFF",
  textSecondary: "#FFF"
};
```

You can then build a stylesheet with this config object like so:
```js
import { StyleBuilder } from '@lucidaio/vizor';

let style = { ... };

let styleBuilder = new StyleBuilder({
  definitions: style,
  outputPath: './style.css',
  minify: true // optional; will not minify by default
});

styleBuilder.Build();
```

Then simply import the built stylesheet instead of one of the included ones.

## License
[MIT](LICENSE.md)