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 frameworkinstall
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 andVue.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:
Appendix
Component Listing
LLLLL
"Live Laugh Love LeafLink UI"