zigzag-ui

A custom Vue component library.

The zigzag-ui framework best operates as a plugin, where components, directives, theming and storage options may be dynamically configured per environment.

Getting Started

There are several ways to configure the framework to suit your specific needs. Configurable items include:

• components: core components maybe be bundled à la carte, or in their entirety (see list).
• directives: configure which directives are bundled.
• i18n: translation options, language and locale.
• theme: configure theme-specific options. (coming soon)
• storage: setup methods to persist user-settings. There are several LocalStorage helpers which may be overridden.

The generated entry file will load all esm components by default. However, you may configure the framework with a few options:

const options = {
  components: ... // provide components "à la carte"
  directives: ... // provide directives "à la carte"
  i18n: {         // i18n options
    locale: ...
    t: ...
  }
  theme: ...      // theming options
  storage: ...    // override localstorage persistence options
}

A sample configuration might look something like:

// plugins/zigzag-ui/index.js

import '@apatheticwes/zigzag-ui/dist/zigzag.min.css'; // optional. You may prefer to bundle this elsewhere
import Vue from 'vue';
import ZigZagUI, { Button, Checkbox } from '@apatheticwes/zigzag-ui';
import i18n, { locale } from 'path/to/i18n';
import theme from 'path/to/themes/dark.json';

Vue.use(ZigZagUI, {
  theme,
  i18n: {
    locale,
    t: i18n.t
  },
  components: {
    Button,
    Checkbox,
  },
});

export default zigzagUI;

This example will load the core CSS stylesheet, i18n options, a dark theme, and the Button and Checkbox components.

Then, in your app's setup, simply:

import zigzagUI from '@/plugins/zigzag-ui';

// ...

Vue.use(zigzagUI);

---

Developer Notes:

Core files & Entry Points

• framework.js: is the framework install function (and any other framework-specific things). It registers components, themes, etc. with your Vue app.
• index.js is used as the main entry point to the framework. It also exports each component individually, for an à la carte build. You may pull in the default export directly and Vue.use it (to quickly get up and running w/ all components and features); or, you may wish configure it with particular options, components, or features.

Testing

Testing the framework uses @vue-test-utils under the hood. We use Jest (via @vue/cli-plugin-unit-jest) to run our unit-tests.

• test command npm test

Contribution:

Contribution guidelines

Appendix

Component Listing

Visit our docs for a listing