@leaflink/leaflink-ui

leaflink-UI

A design framework housing Leaflink's UI. Includes custom Vue components as well as a suite of CSS utilities.

The Leaflink-UI (or LLUI, or LLLLL) framework provides components, directives, theming and storage options that 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 LL 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 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/leaflink-ui/index.js

import Vue from 'vue';
import LLUI, { LLButton, LLCheckbox } from '@leaflink/leaflink-ui';
import i18n, { locale } from 'path/to/i18n';
import theme from 'path/to/themes/dark.json';

Vue.use(LLUI, {
  theme,
  i18n: {
    locale,
    t: (key, value) => i18n.t(key, value)
  },
  components: {
    LLButton,
    LLCheckbox,
  },
});

export default LLUI;

This example will load the core i18n options, a dark theme, and the LLButton and LLCheckbox components.

Then, in your app's setup, simply:

import LLUI from '@/plugins/leaflink-ui';

// ...

Vue.use(LLUI);

Finally, import the /styles/main.scss file into an scss base file to provides styles and style utils.

Developer Notes:

Resources

• index.js: this is the "install" entry point, for use with Vue.use(...).
• components: all components
• composables: similar to mixins or React's "Hooks", but for a Vue component
• constants: LeafLink global constants
• directives: Vue directives
• styles: SCSS, CSS, style utils, etc.
• types: TypeScript type declarations
• utils: includes various helpers for internal and external use

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

LLLLL

"Live Laugh Love LeafLink UI"