Lief
Lightweight component library for Vue.js.
why
ElementUI is a beautiful component library, and Lief seeks to emulate its form and function. Element has a few issues that make it difficult to work with for certain use-cases. The most important of these are:
- it's heavy on re-renders and side effects
- when issues on mobile devices are reported, the maintainers simply close those issues; it is designed to be a desktop UI library, and is "not compatible with mobile devices"
Element is a fantastic lib, with great support and a mature feature set. Lief just wants to take a slightly different approach to reusable component development, in an attempt to cover some areas that are not currently Element's focus.
how
Lief is pretty young right now, but the intent is to meet the following goals and adhere to the following practices:
goals
- reach reasonable UI parity with each of ElementUI's components
- this does not mean to replicate it strictly; Lief is inspired by Element's aesthetics, but it isn't a "clone"
- reach reasonable component feature parity with Element (even less strictly replicated... feature parity !== API symmetry)
- less "bag of options"-style configuration
- less mixing responsibilities (e.g., passing "16px" as padding through props)
- clear and easy class-based CSS style overrides
- allow custom content to remain easily accessible to parent components through the use of slots
- establish comprehensive documentation that includes:
- clear method signatures
- type declarations (via TypeScript)
- human descriptions
- visual/interactive examples
- code samples
- tutorials
- support IE9+, same as Vue.js
practices
- keep it simple, stupid
- small components
- as little knowledge of parent components as possible
- composition is king; no yanking things out into the root or getting your grubby fingers all over the nice clean DOM
- sane defaults... for everything
- clear, explicit naming
- if you have to override a render, you're doing something wrong
- consistent code style leads to easy development; let the linter and the compiler guide you
- be opinionated, but don't try to do everything; be flexible, but not spineless
- if there's a good idea for a customization feature, expose the surface area in a generic way that allows the user to solve their own problem (e.g., allow passing a filter function as a prop, as opposed to having a static set of filter functions to "choose from")
- avoid mutation whenever humanly possible
- type strongly whenever humanly possible
- all that being said, remember PEP 8; I may not be a Python developer, but I love me some PEP 8
Installation
Install via yarn:
you@lappy:~$ yarn add lief
Alternatively, install via npm:
you@lappy:~$ npm install --save lief
Use
Component documentation is in progress.
For now, you can use two components in the following ways:
LiefInput
<template> <LiefInput v-model="foobar" @keyup.enter="onSubmit" /></template> <script>import Vue from 'vue';import { LiefInput } from 'lief'; export default Vue.extend({ components: { LiefInput, }, data() { return { foobar: '', }, }, methods: { onSubmit() { alert(this.foobar); }, },});</script>LiefLayout
<template> <div id="app"> <button class="toggle-header" @click="showHeader = !showHeader">toggle header</button> <button class="toggle-footer" @click="showFooter = !showFooter">toggle footer</button> <button class="toggle-left" @click="showLeft = !showLeft">toggle left</button> <button class="toggle-right" @click="showRight = !showRight">toggle right</button> <LiefLayout class="layout"> <template v-if="showHeader" slot="header"> <div>LOGO.png</div> <div>look at me</div> <div class="navbar"> <a href="#">log in</a> <a href="#">sign up</a> </div> </template> <div v-if="showLeft" slot="sidebar-left"> left option 1<br> left option 2<br> left option 3<br> left option 4<br> left option 5<br> left option 6<br> </div> <div v-if="showRight" slot="sidebar-right"> right option 1<br> right option 2<br> right option 3<br> right<br> right<br> right<br> right<br> right<br> right<br> right<br> right<br> right<br> </div> main main main main main<br> main main main main main<br> main main main main main<br><br> main main main main main<br><br> main main main main content <template v-if="showFooter" slot="footer"> <div> footer footer footer<br> footer footer footer?????<br> foot </div> <div> bread and butter bread and butter<br> bread butter bread and butter!<br> bread and buttery bread </div> <div> <a href="#">corn and nachos</a><br> <a href="#">cream cheese, bacon</a><br> <a href="#">sour patch kids</a> </div> </template> </LiefLayout> </div></template> <script lang="ts">import Vue from 'vue';import LiefLayout from '@/components/layout'; export default Vue.extend({ components: { LiefLayout, }, data() { return { showLeft: true, showRight: true, showHeader: true, showFooter: true, }; },});</script> <style lang="sass" scoped>.navbar a + a display: inline-block padding-left: 0.5em</style>You can always register the components globally, too, if you'd like.
Contributing
Bug reports and pull requests for this project are welcome at its GitHub page. If you choose to contribute, please be nice so I don't have to run out of bubblegum, etc.
Project setup
you@lappy:~$ git clone https://github.com/kjleitz/lief
you@lappy:~$ cd lief
you@lappy:~/lief$ yarn install
Compiles, serves, and hot-reloads for development
you@lappy:~/lief$ yarn serve
Compiles and minifies for npm
you@lappy:~/lief$ yarn build:lib
Compiles and minifies documentation site
you@lappy:~/lief$ yarn build:doc
¿Por qué no los dos?
you@lappy:~/lief$ yarn build
License
This project is open source, under the terms of the MIT license.