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 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. Follow @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

import Vizor from '@lucidaio/vizor';
import '@lucidaio/vizor/themes/vizor-dark.css';

Vue.use(Vizor);

Importing specific components

import { VzToast, VzToastProgrammatic } from '@lucidaio/vizor';

Icons

VIZOR uses @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

Regular

• VzButton
• VzInput
• VzDropdownInput
• VzTitlebar
• VzSidebar

Programmatic

• VzDialogProgrammatic
• VzMessageBoxProgrammatic
• VzToastProgrammatic

Layout

• Columns
• Panels
• Helper Classes

Styles & Customization

VIZOR comes with two themes by default: vizor-dark and vizor-light. 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:

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:

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