Github: https://github.com/teamlittlelives/six-ui-components

six-ui-components is a Vue UI library for building user interfaces of LittleLives company. It's using Bulma as main CSS framework.

We want to improve our front-end development speed. It will help you to create attractive, reusable user interface elements allowing you to construct your experience with ease. And surely, it uses LittleLives UI/UX style.

Contributors

Contact (for any urgent issues)

Step 1: Modify package.json

Modify package.json and add six-ui-components

"six-ui-components": "git+ssh://git@github.com/teamlittlelives/six-ui-components.git#v0.0.4"

Noted: we're using v0.0.4. You can check available versions at: https://github.com/teamlittlelives/six-ui-components/releases. And if you want to install from master branch, you can change version number to master.

Step 2: Download package

You can download the package by using command:

npm install

or

yarn

Step 3: Import and use the plugin

Go to src/main.js in your Vue project and import the plugin and the style file:

import Vue from 'vue'
import App from './App'
import router from './router'
import SixUiComponents from 'six-ui-components'

Vue.use(SixUiComponents)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

That's all.

Step 4: Add override scss

  • Create your override.scss
  • Import below code
$primary: red !default; // <-- your overrided variables

@import '~six-ui-components/lib/sass/index.scss';

Note: you can see more available variables at: http://bulma.io/documentation/overview/variables/

  • Import override.scss into your app.

Step 5: Add FontAwesome

If you want to use FontAwesome, don't forget to add its css file to index.html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Example plugin installing

import Vue from 'vue'
import SixUiComponents from 'six-ui-components'

Vue.use(SixUiComponents)

Then you can use components using ll- prefix, for exmple: ll-button, ll-date-picker.

if you want to change prefix you have to pass options to Vue.use

Vue.use(SixUiComponents, {prefix: 'other'}) // by default prefix 'll'

Then you can use components using other- prefix, for exmple: other-button, other-date-picker.

(The contribuing guideline was inspired by Atom Contributing Guideline)

First off, thanks for taking the time to contribute! :)

The following is a set of guidelines for contributing to six-ui-components and its packages, which are hosted in the LittleLives Inc on GitHub. These are mostly guidelines, not rules. Use your best judgment, and feel free to propose changes to this document in a pull request.

Table Of Contents

How Can I Contribute?

How Can I Contribute?

Reporting Bugs

  • Create new github issue
  • Use label bug
  • Use a clear and descriptive title for the issue to identify the problem
  • Describe the exact steps which reproduce the problem in as many details as possible.
  • Describe the behavior you observed after following the steps and point out what exactly is the problem with that behavior.
  • Explain which behavior you expected to see instead and why

Suggesting Enhancements

Before implement your enhancements. You should create a new discussion on Github to discuss about your enhancement:

  • Create new Github issue.
  • Use label enhancement.
  • Describe your idea clearly so everyone can go to take a look.

Code Contribution

  • You can fork the project or create new branch (if you have permission).
  • Code in your branch
  • Write unit testing if need for your files.
  • Check lint.
  • Create Pull Request if you want to merge to master. That's all.
../src/Base/ui/layout/Container.vue

Bulma Container Component

Example

This container is centered on desktop.
../src/Base/ui/layout/Hero.vue

Bulma Hero Wrapper

Prop nameTypeDefaultDescription
typestringnormal

Set type of Hero component, it can be: primary, info, success, warning, danger, light, dark, white, black, link.

Example

Hero title

Hero subtitle

../src/Base/ui/layout/Section.vue

Bulma Section Wrapper

Prop nameTypeDefaultDescription
spacingstringnormal

Set spacing of Section, it can be: normal, medium, large

Example

Section Content
../src/Base/ui/grid/Column.vue

Bulma Column Wrapper

Prop nameTypeDefaultDescription
sizestring
offsetstring

Set offset of column, see at: http://bulma.io/documentation/columns/sizes/

../src/Base/ui/grid/Columns.vue

Bulma Columns Wrapper

Prop nameTypeDefaultDescription
isWrapboolean

Set flex wrap for columns

Example

Column 1
Column 2
../src/Base/ui/grid/Tile.vue

Bulma Tile Wrapper

Prop nameTypeDefaultDescription
levelstring

Level of Tile, it can be: ancestor, parent, child

typestringnormal

Type of Tile, it can be: primary, info, success, warning, danger, light, dark, white, black, link.

sizestring
directionstringhorizontal

Set direction of Tile, it can be horizontal, vertical

Example

nginx Version: 1.02

nginx Built Date: 29 June, 2017

1,000

Total Viewers

1 hours 45 mins 20 seconds

Up time

5%

CPU

4.25 GB

RAM

../src/Base/ui/elements/Box.vue

Bulma Box Wrapper

Example

Box content
../src/Base/ui/elements/Button.vue

Bulma Button Wrapper

Prop nameTypeDefaultDescription
labelstring

Set label of button

iconLeftstring

Set left icon for button

iconRightstring

Set right icon for button

iconSizestringsmall

Set right icon for button

typestringnormal

Set type of button, it can be: primary, info, success, warning, danger, light, dark, white, black, link.

isSubmitbooleanfalse

Use with ll-form component. If isSubmit is true, when clicking, the form will be submitted

sizestringdefault

Set size of button, supports: small, default, medium, large.

loadingbooleanfalse

Set loading state of button

invertedbooleanfalse

Set inverted style for button

outlinedbooleanfalse

Set outlined style for button

plainbooleanfalse

Set plain style for button (no border)

disabledbooleanfalse

Set disabled for button

isRoundboolean

Set rounded corner for button

isCircleboolean

Use for icon button

isBoldboolean

Set bold style for button

Directives

NameDescription
v-on:clickClick handler. Not set this property causes the Button to be disabled.

Example

../src/Base/ui/elements/Content.vue

Bulma Content Wrapper

Example

This is the content body
../src/Base/ui/elements/Icon.vue

Bulma Font Awesome Icon Wrapper

Prop nameTypeDefaultDescription
namestring

Set name of icon, see name at: http://fontawesome.io/icons/

sizestringsmall

Set size of icon, it can be: small, medium, large

typestringnormal

Set type of icon, it can be: primary, info, success, warning, danger, light, dark, white, black, link.

Example

../src/Base/ui/elements/Image.vue

Bulma Image Wrapper

Prop nameTypeDefaultDescription
srcstring

Set source of image

typestringimage

Set type of image, it can be: image, background.

sizestring

Set size of image, see more at: http://bulma.io/documentation/elements/image/

Basic Example

Background Image

../src/Base/ui/elements/Label.vue

Bulma Label Wrapper

Example

../src/Base/ui/elements/Notification.vue

Bulma Notification Wrapper

Prop nameTypeDefaultDescription
typestring

Set type of notification, it can be: primary, info, success, warning, danger, light, dark, white, black.

deletableboolean

Enable delete button

deleteButtonSizestring

Set size of delete button

Directives

NameDescription
v-on:deleteDelete handler, it only works when setting deletable=true

Example

This is a notification
../src/Base/ui/elements/Progress.vue

Bulma Progress Wrapper

Prop nameTypeDefaultDescription
valuenumber0

Set current value of progress

totalnumber100

Set total value of progress

typestring

Set type of progress, it can be: primary, info, success, warning, danger, light, dark, white, black.

sizestring

Set size of progress, it can be: normal, small, medium, large.

Example

../src/Base/ui/elements/Slider.vue

Slider

Prop nameTypeDefaultDescription
valuenumber100

Set current value of progress

totalnumber100

Set total value of progress

Directives

NameDescription
v-on:changeChange handler

Example

See changed value in console
../src/Base/ui/elements/Switch.vue

Switch

Prop nameTypeDefaultDescription
valuebooleanfalse

Set value of Switch, it can be true/false

sizestringdefault

Set size of button, supports: small, default, medium, large.

typestringprimary

Set type of button, it can be: primary, info, success, warning, danger.

disabledbooleanfalse

Enable/disable Switch

labelstring

Set label for Switch when value = false

labelActivestring

Set label for Switch when value = true

Example

Off
../src/Base/ui/elements/Table.vue

Bulma Table Wrapper

Prop nameTypeDefaultDescription
columnsarrayRequired

Set columns to show in headers

dataarrayRequired

Set data for table

hasFooterboolean

Enable/disable header

Example

You can use row-template as optional. If the table has no row-template, it will render each property in data item as text.

IDNameEmail
U-001 ned.stark@gmail.com
U-002 john.snow@gmail.com
U-003 tyrion.lannister@gmail.com
../src/Base/ui/elements/Tag.vue

Bulma Tag Wrapper

Prop nameTypeDefaultDescription
typestring

Set type, it can be: primary, info, success, warning, danger, light, dark, white, black.

sizestring

Set size, supports: small, normal, medium, large.

deletableboolean

Enable delete button

deleteButtonSizestring

Set size of delete button

dataobject

Set business data for tag

Directives

NameDescription
v-on:deleteDelete handler, it only works when setting deletable=true

Example

This is a tag This is a medium tag This is a large tag
../src/Base/ui/elements/Title.vue

Bulma Title Wrapper

Prop nameTypeDefaultDescription
typestringtitle

Set type, supports: title or subtitle.

sizestring1

Set size, supports: 1, 2, 3, 4, 5, 6.

Example

This is h1 title

This is h2 title

This is h3 title

This is h4 title

This is h5 title
This is h6 title
../src/Base/ui/elements/Video.vue

Video component was written from scratch

Prop nameTypeDefaultDescription
sourcesarray

Set array of sources

autoplayboolean

Set autoplay

volumenumber1

Set initialized volume

isRoundbooleantrue

Set rounded corner of video

Example

00:00 / 00:00
../src/Base/ui/components/Calendar/index.vue

Calendar component was written from Scratch

Prop nameTypeDefaultDescription
monthFormatstringMMM YYYY

monthFormat, default is MMM YYYY

monthobject

Set current month

startFromnumber0

Set the beginning day in week, default is 0: Sunday

dayFormatstringD

Set day in week format

enableDatePickerbooleantrue

Enable Day Picker, default is true

enableTimePickerboolean

Enable Day Picker, default is false

selectedDayobjectFunction

Set selected day

eventsarray

Set event days

disableBeforeobject

Disable date in monthgrid before, it's moment object

disableAfterobject

Disable date in monthgrid after, it's moment object

rangeSelectionboolean

Enable range selection

Directives

NameDescription
v-on:selectlistening event when the selected date has been changed
v-on:selectMonthlistening event when the month has been changed

Basic Calendar Example

Enable Time Picker

Only Time Picker

:
../src/Base/ui/components/Card.vue

Bulma Card Wrapper

Prop nameTypeDefaultDescription
isRoundboolean

Set rounded corner

typestringnormal

Set type of Card, Type of Button, it can be: primary, info, success, warning, danger, light, dark, white, black, link.

Slots

See slot definition in Vue at: Named Slots

NameDescription
card-imageUse this slot to show card image
card-headerWe can add some actions in card header
card-contentShow Card content
card-footerShow Card footer

Example

Card Content

Card Footer

../src/Base/ui/components/Dropdown.vue

Bulma Dropdown wrapper

Prop nameTypeDefaultDescription
activeboolean

Example

../src/Base/ui/components/DropdownItem.vue

Bulma DropdownItem wrapper

Directives

NameDescription
v-on:clickEvent callback when clicking to DropDownItem
../src/Base/ui/components/Dropzone.vue

Dropzone is a component that provides drag’n’drop file uploads.

Prop nameTypeDefaultDescription
acceptstring

The accept attribute specifies the types of files that the dropzone accepts For syntax see input accept attribute

Directives

NameDescription
v-on:changelistening event when files has been dropped on dropzone. Array od File is sended as parameter
v-on:dragoverlistening event when files is being dragged over dropzone
v-on:dragoutlistening event when files leave dropzone or files is dropped on dropzone

Slots

See slot definition in Vue at: Named Slots

NameDescription
default slotThis is the dropzone content

Example

drop files here
../src/Base/ui/components/Expander.vue

Expander component

Prop nameTypeDefaultDescription
collapseHeightnumber0

Set collapse height

Method nameParametersDescription
toogle()

Toggle the expander

Returns void
expand()

Expand the content

Returns void
collapse()

Collapse the content

Returns void

Directives

NameDescription
v-on:changeEvent callback for changing state of expander

Example

Click to toggle expander

Do you remember living in a world where “Google it” wasn’t the answer to everything? It might be a challenge for Kids These Days® to imagine what life used to be when we were their age — what we played with, how we entertained ourselves, and how much simpler (and bigger) our electronic gadgets were! In this Explain to Kids, we’re doing the ultimate #ThrowbackThursday to the pre-Internet age. We’re talking pagers we’re talking film cameras we’re talking cassette tapes — anything you can remember from the good ol’ days! (This throwback is for us to educate our millennial interns as much as it is for you to reminisce your childhood with your kids!) Entertaining Ourselves Television Remember what it was like to see Mickey Mouse on TV before he was given his signature red pants, yellow shoes and iconic voice? We personally don’t. We doubt most of you recall colourless TV either (not counting our senior citizen readers)! It wasn’t until 1954 that colour broadcasting officially began! Not only that — TVs back then were different in so many ways! They were bulky, they had antennas (that had to be placed just right so that the image won’t be grainy), and there were fixed TV schedules! That last one was a bit of a pain. TV shows would come on at a certain time each day — and if we missed it, the Internet wasn’t there to catch us up! I think all of us can relate to running home after school to catch our favourite TV shows!

../src/Base/ui/components/Media.vue

Bulma Media wrapper

Slots

See slot definition in Vue at: Named Slots

NameDescription
media-leftLeft content
media-contentMiddle Content
media-rightRight Content

Example

John Smith @johnsmith 31m
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

../src/Base/ui/components/Media.vue

Bulma Media wrapper

Slots

See slot definition in Vue at: Named Slots

NameDescription
media-leftLeft content
media-contentMiddle Content
media-rightRight Content

Example

John Smith @johnsmith 31m
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

../src/Base/ui/components/Menu.vue

Bulma Menu wrapper

Kind of Child Components

There are 3 kinds of child components:

  • MenuList: show a menu list, it will contains multiple of MenuItem
  • MenuItem: a menu item, can be clicked
  • MenuLabel: present a menu label (MenuLabel can't be clicked)

Noted: MenuItem can contains MenuList as child component.

Example

../src/Base/ui/components/MenuItem.vue

Bulma Menu Item

Prop nameTypeDefaultDescription
activatedbooleanfalse

Set activated state of menu item

labelstring

Text label of menu item

../src/Base/ui/components/MenuList.vue

Bulma Menu List

../src/Base/ui/components/MenuLabel.vue

Bulma Menu Label

../src/Base/ui/components/Message.vue

Bulma Message wrapper

Prop nameTypeDefaultDescription
headerstring

Header message

typestring

Type of message, it can be: primary, info, success, warning, danger, light, dark, white, black.

deletableboolean

Enable delete button

deleteButtonSizestring

Set size of delete button

sizestring

Set size of message

Directives

NameDescription
v-on:deletelistening event when the delete button has been clicked

Example

Login

This is a message
../src/Base/ui/components/Modal.vue

Bulma Modal wrapper

Prop nameTypeDefaultDescription
isActivebooleanfalse

Set actived state

modalClassstring

Set modal class

Method nameParametersDescription
open()

Open the modal

Returns void
close()

Close the modal

Returns void

Slots

See slot definition in Vue at: Named Slots

NameDescription
default slotThis is the modal content

Example

../src/Base/ui/components/Navbar.vue

Bulma Navbar wrapper

Slots

See slot definition in Vue at: Named Slots

NameDescription
nav-brandUse this slot to show your logo
nav-startShow components on the left of navbar
nav-endShow components on the right of navbar

Example

../src/Base/ui/components/NavbarItem.vue

Bulma Navbar Item wrapper

../src/Base/ui/components/Popover.vue

Popover component was inspired from https://github.com/euvl/vue-js-popover

Prop nameTypeDefaultDescription
rootElementstringspan

Set root tag

widthnumber180

Set width of popover container

fullWidthboolean

Set full width of popover container if position is bottom/top

positionstringtop

Set position to show the popover. Supports: top, bottom, left, right

popoverStyleobjectFunction

Customize style for popover popup

popoverClassstring

Customize class for popover popup. popoverClass must be global class

isTooltipboolean

Enable tooltip mode.

isManualboolean

Enable manual mode, we will use isVisible to control the popover manually.

isVisibleboolean

Set popover visibility in manual mode

Slots

See slot definition in Vue at: Named Slots

NameDescription
contentCustom content of popover
controllerCustom component of controller

Example

../src/Base/ui/components/Tabs.vue

Bulma Tabs Wrapper

Prop nameTypeDefaultDescription
directionstringhorizontal

Direction of tab, it can be: horizontal, vertical

verticalHeaderSizestring3

Size of column that contains tab header, same as Column size. Only use for direction=vertical.

headerSizestring

Set header size, it can be: normal, small, medium, large

headerAlignmentstring

Set header alignment, it can be: left, centered, right

headerStylestring

Header style, it can be: default, boxed, toggle

headerFullWidthbooleanfalse

Enable full width of header

headerClassstring

Set class of header

hasBorderbooleantrue

Enable/Disable border of header

activeIndexnumber0

Set active index

Children

The child component must define slot property that is the label of tab. And you can specific the icon name or headerClass for the tab to show the icon before label (but headerClass must be global class).

Directives

NameDescription
v-on:changeEvent callback for changing index of tabs

Horizontal Tabs

Music Content

Vertical Tabs

Music Content
../src/Base/ui/form/AgeInput.vue

AgeInput was written from scratch

Prop nameTypeDefaultDescription
placeholderstringAge

Placeholder will show in beginning

minnumber1

Set min of month

maxnumber216

Set max of months (it should be larger than min)

stepMonthnumber1

Set increment/decrement step months

increaseByYearFromnumber12

If the month is equal increateByYearFrom (12 months), it will add 1 year each step

valuenumber

Intialized value of AgeInput

namestring

Set name, it need to use with ll-form

errorstring

If error is not null, the component will show the error message in above of all options

iconSizestringsmall

Set icon size, default is small

textSizestring16px

Set text size

Slots

See slot definition in Vue at: Named Slots

NameDescription
icon-leftSet custom element for minus button
icon-rightSet custom element for add button

Directives

NameDescription
v-on:inputlistening event when value of NumberInput has been changed

Example

Age

../src/Base/ui/form/Autocomplete.vue

Bulma Container Component

Prop nameTypeDefaultDescription
inputPropsobjectFunction

ll-text-input props

popoverPropsobjectFunction

ll-popover props

getSuggestionsfunc

handle logic of get suggesstions based on search text

getDisplayTextfunc

From clicked suggestion, we need to describe how to get display text

delaynumber500

Searching Delay in milliseconds after hold typing

Directives

NameDescription
v-on:inputhappens when user selects variant from dropdown
v-on:update:userinputhappens when user is typing in input field

Example

../src/Base/ui/form/Checkbox.vue

Bulma Checkbox Wrapper

Prop nameTypeDefaultDescription
checkedbooleanfalse

Set checked state

typestringnormal

Set type of radio button, it can be: primary, info, success, warning, danger, light, dark..

sizestringdefault

Set size of radio button, supports: small, default, medium, large.

namestring

Set name of component, use with ll-form

valuestring

Set value

labelstring

Set label of checkbox

Directives

NameDescription
v-on:changelistening event when the value of checkbox was changed

Example

Check Me - false
../src/Base/ui/form/CheckboxGroup.vue

CheckboxGroup

Prop nameTypeDefaultDescription
optionsarray

Array of options, it's required to render option data. See structure in example.

directionstringvertical

Direction of checkbox group, it can be: horizontal, vertical

typestring

Set type of radio button, it can be: primary, info, success, warning, danger, light, dark.

sizestring

Set size of radio button, supports: small, normal, medium, large.

sameWidthboolean

Enable same width for column when direction is horizontal

fixedWidthstring

Set fixed Width for column when direction is horizontal

valuestring

Intialized value of CheckboxGroup

namestring

Set name of component, use with ll-form

errorstring

If error is not null, the component will show the error message in above of all options

Directives

NameDescription
v-on:inputlistening event when value of checkboxgroup has been changed

Example

  • Facebook - false
  • Twitter - false
../src/Base/ui/form/Control.vue

Bulma Control Wrapper

../src/Base/ui/form/DatePicker.vue

DatePicker was written from scratch

Prop nameTypeDefaultDescription
placeholderstring

Set placeholder

namestring

Set name, it need to use with ll-form

errorstring

If error is not null, the component will show the error message in above of all options

hasBorderbooleantrue

Enable/disable border of ll-text-input

optionsobjectFunction

it's ll-calendar properties

dateFormatstringDD MMM, YYYY

Date format of date string in ll-text-input

valueobjectFunction

Value of datepicker

Directives

NameDescription
v-on:inputlistening event when the value (moment Object) has been changed

DatePicker Example

DateTimePicker Example

TimePicker Example

../src/Base/ui/form/Field.vue

Bulma Field Wrapper. ll-field passes down to component all given properies except its own.

Prop nameTypeDefaultDescription
componentundefinedRequired

Template of Vue component that will be rendered. For example ll-text-input

valueundefined

Value of form input. Pass to component

labelstring

Label of component

labelClassstring

Label additional class

controlClassstring

Control additional class

errorstring

Error text

placeholderstring

Set placeholder

floatingLabelboolean

Designate field with floating label

showBottomLinebooleantrue

Show bottom line (only in floating label mode)

isGroupedboolean

Add is-grouped class to field

isGroupedCenteredboolean

Add is-grouped-centered class to field

isGroupedRightboolean

Add is-grouped-right class to field

hasAddonsboolean

Add has-addons class to field

slotsobjectFunction

Define slots for template component

slotTemplatesobject

Define slots for template component

Example

There is an error in this field

Example with floating label

There is an error in this field  

../src/Base/ui/form/File.vue

Bulma File Wrapper

Prop nameTypeDefaultDescription
placeholderstringChoose a file...

Set placeholder

namestring

Set name, it need to use with ll-form

errorstring

If error is not null, the component will show the error message in above of all options

multipleboolean

Enable select multiple files

acceptstringimage/*

Set accept files

typestringnormal

Set type of File, it can be: primary, info, success, warning, danger, light, dark, white, black.

sizestringnormal

Set size of File, supports: small, normal, medium, large.

Directives

NameDescription
v-on:inputlistening event when the value of file was changed

Example

See file object in console
../src/Base/ui/form/Form.vue

Form generator component

Prop nameTypeDefaultDescription
schemaarrayFunction

Form schema, please see example

fieldErrorsobject

Set field errors of form

valuesobjectFunction

Set default values of form

Directives

NameDescription
v-on:valueChangehappens when the form values was changed
v-on:submithappens when sumitting the form

Schema Item Properties

NameTypeDefault ValueDescription
typeStringnullit's required should be field or button.
nameStringnullit's required because we will return the data based on name.
templateObjectnullTemplate of Vue component that will be rendered. The component must be valid with vee-validate (please read the rule at: Vee-validate custom component)
labelStringnullLabel of component
ruleStringnullValidation rule of component. See more rules at: Available Rules
propsObjectnullProperties of custom component. If the component has property isSubmit: true, so when we click on this component, the form will be submit.
htmlStringnullYou can render custom html for component.

Available components for Form

ll-checkbox-group
ll-date-picker
ll-radio-button-group
ll-select
ll-text-input
ll-text-area
ll-file

Example

 

 

 

 

 

 

 

16

  • Hello Facebook - false

  • Hello Twitter - false

 

  • Yes - false

  • No - false

../src/Base/ui/form/Form2.vue

ll-form2 provides values and validation errors (and methods to manipulate them) for using in its descendants ll-field2 and ll-form2-submit

Vue provide / inject feature is used for ll-form2 working.

Prop nameTypeDefaultDescription
valuesobjectFunction

Values for providing. These values will be mutated.

fieldErrorsobject

Set additional field errors of form.

Directives

NameDescription
v-on:submithappens when submitting the form

Try to change values in fields and see changing values in the bottom of example

 

 

Submit

Values

Complete example

 

 

 

 

 

 

 

16

  • Hello Facebook - false

  • Hello Twitter - false

 

  • Yes - false

  • No - false

../src/Base/ui/form/Field2.vue

ll-field2 wraps the component, gets value by name from ll-form2 values and passes it to the component. Also ll-field2 handles wrapped component change events and update corresponding value. This component should be descendant of ll-form2.

Prop nameTypeDefaultDescription
componentundefinedRequired

Template of Vue component that will be rendered. For example ll-text-input

namestringRequired

Property name in ll-form2 values

rulestring

Validation rule of value. See more rules at: Available Rules

labelstring

Label of component

labelClassstring

Label additional class

controlClassstring

Control additional class

placeholderstring

Set placeholder

floatingLabelboolean

Designate field with floating label

showBottomLinebooleantrue

Show bottom line (only in floating label mode)

isGroupedboolean

Add is-grouped class to field

isGroupedCenteredboolean

Add is-grouped-centered class to field

isGroupedRightboolean

Add is-grouped-right class to field

hasAddonsboolean

Add has-addons class to field

notEmptyboolean

Designate field in non empty appearance even if value is empty (only in floating label mode)

../src/Base/ui/form/Form2Submit.vue

ll-form2-submit wraps any component and handles its click events for submitting ll-form2. This component should be descendant of ll-form2

Prop nameTypeDefaultDescription
componentundefinedRequired

Template of Vue component that will be rendered. For example ll-button

../src/Base/ui/form/NumberInput.vue

NumberInput was written from scratch

Prop nameTypeDefaultDescription
minnumber0

Set min

maxnumber1

Set max (it should be larger than min)

stepnumber1

Set increment/decrement step

valuenumber

Intialized value of NumberInput

suffixstring

Set suffix text

namestring

Set name, it need to use with ll-form

errorstring

If error is not null, the component will show the error message in above of all options

iconSizestringsmall

Set icon size, default is small

textSizestring16px

Set text size

Directives

NameDescription
v-on:inputlistening event when value of NumberInput has been changed

Example

0

../src/Base/ui/form/RadioButton.vue

Bulma Radio Button Wrapper

Prop nameTypeDefaultDescription
checkedbooleanfalse

Set checked state

typestringnormal

Set type of radio button, it can be: primary, info, success, warning, danger, light, dark..

sizestringdefault

Set size of radio button, supports: small, default, medium, large.

namestring

Set name of component, use with ll-form

valuestring

Set value

labelstring

Set label of checkbox

Directives

NameDescription
v-on:changelistening event when the value of checkbox was changed

Example

../src/Base/ui/form/RadioButtonGroup.vue

RadioButtonGroup

Prop nameTypeDefaultDescription
optionsarray

Array of options, it's required to render option data. See structure in example.

directionstringvertical

Direction of checkbox group, it can be: horizontal, vertical

typestring

Set type of radio button, it can be: primary, info, success, warning, danger, light, dark.

sizestring

Set size of radio button, supports: small, normal, medium, large.

sameWidthboolean

Enable same width for column when direction is horizontal

fixedWidthstring

Set fixed Width for column when direction is horizontal

valuestring

Intialized value of CheckboxGroup

namestring

Set name of component, use with ll-form

errorstring

If error is not null, the component will show the error message in above of all options

Directives

NameDescription
v-on:inputlistening event when value of RadioButtonGroup has been changed

Example

  • Facebook - false
  • Twitter - false
../src/Base/ui/form/Select.vue

Bulma Select Wrapper

Prop nameTypeDefaultDescription
optionsarray

Array of select options, it's required to render option data.

valuestring

Intialized value of CheckboxGroup

errorstring

If error is not null, the component will show the error message in above of all options

namestring

Name of Select, it's required when using with ll-form

Directives

NameDescription
v-on:inputlistening event when value of Select has been changed

Example

../src/Base/ui/form/TextArea.vue

Bulma TextArea Wrapper

Prop nameTypeDefaultDescription
valuestring

Intialized value of TextArea

Directives

NameDescription
v-on:inputlistening event when value of TextArea has been changed

Example

../src/Base/ui/form/TextInput.vue

Bulma TextInput Wrapper

Prop nameTypeDefaultDescription
hasBorderbooleantrue

Enable/disable border of TextInput

Directives

NameDescription
v-on:inputlistening event when value of TextInput has been changed

Example

Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements.

Change the alignment of elements with the vertical-alignment utilities. Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements.

Choose from .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, and .align-text-top as needed.

With inline elements:

baseline top middle bottom text-top text-bottom

With table cells:

baseline top middle bottom text-top text-bottom

Use border utilities to remove an element’s borders. Choose from all borders or one at a time.

Add classes to an element to easily round its corners.

Change the value of the display property with responsive display utility classes. six-ui-components purposely supports only a subset of all possible values for display. Classes can be combined for various effects as you need.

List of classes

  • d-none
  • d-inline
  • d-inline-block
  • d-block
  • d-table
  • d-table-cell
  • d-table-row
  • d-flex
  • d-inline-flex

Apply display utilities to create a flexbox container and transform direct children elements into flex items. Flex containers and items are able to be modified further with additional flex properties.

List of classes

Direction
  • .flex-row
  • .flex-column
  • .flex-row-reverse
  • .flex-column-reverse
Wrap
  • .flex-wrap
  • .flex-nowrap
  • .flex-wrap-reverse
Justify content
  • .justify-content-start
  • .justify-content-end
  • .justify-content-center
  • .justify-content-between
  • .justify-content-around
Align items
  • .align-items-start
  • .align-items-end
  • .align-items-center
  • .align-items-baseline
  • .align-items-stretch
Align content
  • .align-content-start
  • .align-content-end
  • .align-content-center
  • .align-content-between
  • .align-content-around
  • .align-content-stretch
Align self
  • .align-self-auto
  • .align-self-start
  • .align-self-end
  • .align-self-center
  • .align-self-baseline
  • .align-self-stretch

List of classes

  • .position-static
  • .position-relative
  • .position-absolute
  • .position-fixed
  • .position-sticky

Width and height utilities include support for 25%, 50%, 75%, and 100%.

List of classes

  • .w-25
  • .w-50
  • .w-75
  • .w-100
  • .h-25
  • .h-50
  • .h-75
  • .h-100

Assign responsive-friendly margin or padding values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. Classes are built from a default Sass map ranging from .25rem to 3rem.

The classes are named using the format {property}{sides}-{size}

Where property is one of:

  • m - for classes that set margin
  • p - for classes that set padding

Where sides is one of:

  • t - for classes that set margin-top or padding-top
  • b - for classes that set margin-bottom or padding-bottom
  • l - for classes that set margin-left or padding-left
  • r - for classes that set margin-right or padding-right
  • x - for classes that set both *-left and *-right
  • y - for classes that set both *-top and *-bottom
  • blank - for classes that set a margin or padding on all 4 sides of the element

Where size is one of:

  • 0 - for classes that eliminate the margin or padding by setting it to 0
  • 1 - (by default) for classes that set the margin or padding to $spacer * .25
  • 2 - (by default) for classes that set the margin or padding to $spacer * .5
  • 3 - (by default) for classes that set the margin or padding to $spacer
  • 4 - (by default) for classes that set the margin or padding to $spacer * 1.5
  • 5 - (by default) for classes that set the margin or padding to $spacer * 3
  • auto - for classes that set the margin to auto

Note: $spacer by default is 1rem,

../src/Base/ui/rich/GoogleMaps.vue

Google Map Component

Prop nameTypeDefaultDescription
centerobject

Set center of maps. The object format is {lat: -25.363, lng: 131.044}

zoomnumber4

Set zoom level of maps.

markersarray

Configuration

You need import Google API Javascript into your html:

<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places"></script>

And read this docs to enable Google Maps Javascript API: https://developers.google.com/maps/documentation/javascript/

Example

../src/Base/ui/rich/GooglePlacesAutocomplete.vue

Google Places Autocomplete Component

Prop nameTypeDefaultDescription
inputPropsobjectFunction

Override ll-text-input properties

popoverPropsobjectFunction

Override ll-popover properties

typestringnormal

Set type of google places autocomplete, it can be: primary, info, success, warning, danger, light, dark..

getDisplayTextfuncFunction

From clicked suggestion, we need to describe how to get display the address text. Currently we use description

Configuration

You need import Google API Javascript into your html:

<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places"></script>

And read this docs to enable Google Maps Javascript API: https://developers.google.com/maps/documentation/javascript/

Example

../src/Base/ui/rich/Editor/index.vue

Editor Component

Prop nameTypeDefaultDescription
themestringsnow
handlersobjectFunction
toolbarMediabooleantrue

Public Methods

NameDescription
getText()get text content
getHTML()get html content
getMarkdown()get markdown content
clearContentclear content
insertSmartText(key: string, text: string, data: string)insert a smart text

Example


../src/Base/ui/rich/MarkdownViewer.vue

Markdown Viewer Component

Prop nameTypeDefaultDescription
contentstring

markdown content

outputTypestring
textLimitnumber0

Limit text

Example

Heading ======= Sub-heading Paragraphs are separated by a blank line. Two spaces at the end of a line produces a line break. Text attributes italic, bold, monospace. Horizontal rule: --- Bullet list: * apples * oranges * pears Numbered list: 1. wash 2. rinse 3. repeat A link. > Markdown uses email-style > characters for blockquoting. Inline HTML is supported.

This is the markdown cheatsheet of LittleLives editor that extends from Markdown Cheatshet. The docs was inspired by Markdown-Here-Cheatsheet


This is intended as a quick reference and showcase. For more complete info, see John Gruber's original spec and the Github-flavored Markdown info page.

Note that there is also a Cheatsheet specific to Markdown Here if that's what you're looking for. You can also check out more Markdown tools.

Table of Contents

Headers
Emphasis
Lists
Links
Images Tables
Blockquotes
Inline HTML
Horizontal Rule
Line Breaks
YouTube Videos

LittleLives Extends:
Video
Audio
Image Gallery
Smart Text

Headers

# H1
## H2
### H3
#### H4
##### H5
###### H6

Alternatively, for H1 and H2, an underline-ish style:

Alt-H1
======

Alt-H2
------

H1

H2

H3

H4

H5
H6

Alternatively, for H1 and H2, an underline-ish style:

Alt-H1

Alt-H2

Emphasis

Emphasis, aka italics, with *asterisks* or _underscores_.

Strong emphasis, aka bold, with **asterisks** or __underscores__.

Combined emphasis with **asterisks and _underscores_**.

Strikethrough uses two tildes. ~~Scratch this.~~

Emphasis, aka italics, with asterisks or underscores.

Strong emphasis, aka bold, with asterisks or underscores.

Combined emphasis with asterisks and underscores.

Strikethrough uses two tildes. Scratch this.

Lists

(In this example, leading and trailing spaces are shown with with dots: ⋅)

1. First ordered list item
2. Another item
⋅⋅* Unordered sub-list. 
1. Actual numbers don't matter, just that it's a number
⋅⋅1. Ordered sub-list
4. And another item.

⋅⋅⋅You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown).

⋅⋅⋅To have a line break without a paragraph, you will need to use two trailing spaces.⋅⋅
⋅⋅⋅Note that this line is separate, but within the same paragraph.⋅⋅
⋅⋅⋅(This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)

* Unordered list can use asterisks
- Or minuses
+ Or pluses
  1. First ordered list item
  2. Another item

  3. Unordered sub-list.

  4. Actual numbers don't matter, just that it's a number
  5. Ordered sub-list
  6. And another item.

    You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown).

    To have a line break without a paragraph, you will need to use two trailing spaces.
    Note that this line is separate, but within the same paragraph.
    (This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)

  7. Unordered list can use asterisks

  • Or minuses
  • Or pluses

Links

There are two ways to create links.

[I'm an inline-style link](https://www.google.com)

[I'm an inline-style link with title](https://www.google.com "Google's Homepage")

[I'm a reference-style link][Arbitrary case-insensitive reference text]

[I'm a relative reference to a repository file](../blob/master/LICENSE)

[You can use numbers for reference-style link definitions][1]

Or leave it empty and use the [link text itself].

URLs and URLs in angle brackets will automatically get turned into links. 
http://www.example.com or <http://www.example.com> and sometimes 
example.com (but not on Github, for example).

Some text to show that the reference links can follow later.

[arbitrary case-insensitive reference text]: https://www.mozilla.org
[1]: http://slashdot.org
[link text itself]: http://www.reddit.com

I'm an inline-style link

I'm an inline-style link with title

I'm a reference-style link

I'm a relative reference to a repository file

You can use numbers for reference-style link definitions

Or leave it empty and use the [link text itself].

URLs and URLs in angle brackets will automatically get turned into links. http://www.example.com or http://www.example.com and sometimes example.com (but not on Github, for example).

Some text to show that the reference links can follow later.

Images

Here's our logo (hover to see the title text):

Inline-style: 
![alt text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 1")

Reference-style: 
![alt text][logo]

[logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 2"

Here's our logo (hover to see the title text):

Inline-style: alt text

Reference-style: alt text

Tables

Tables aren't part of the core Markdown spec, but they are part of GFM and Markdown Here supports them. They are an easy way of adding tables to your email -- a task that would otherwise require copy-pasting from another application.

Colons can be used to align columns.

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

There must be at least 3 dashes separating each header cell.
The outer pipes (|) are optional, and you don't need to make the 
raw Markdown line up prettily. You can also use inline Markdown.

Markdown | Less | Pretty
--- | --- | ---
*Still* | `renders` | **nicely**
1 | 2 | 3

Colons can be used to align columns.

TablesAreCool
col 3 isright-aligned$1600
col 2 iscentered$12
zebra stripesare neat$1

There must be at least 3 dashes separating each header cell. The outer pipes (|) are optional, and you don't need to make the raw Markdown line up prettily. You can also use inline Markdown.

MarkdownLessPretty
Stillrendersnicely
123

Blockquotes

> Blockquotes are very handy in email to emulate reply text.
> This line is part of the same quote.

Quote break.

> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote. 

Blockquotes are very handy in email to emulate reply text. This line is part of the same quote.

Quote break.

This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can put Markdown into a blockquote.

Inline HTML

You can also use raw HTML in your Markdown, and it'll mostly work pretty well.

<dl>
  <dt>Definition list</dt>
  <dd>Is something people use sometimes.</dd>

  <dt>Markdown in HTML</dt>
  <dd>Does *not* work **very** well. Use HTML <em>tags</em>.</dd>
</dl>
Definition list
Is something people use sometimes.
Markdown in HTML
Does not work very well. Use HTML tags.

Horizontal Rule

Three or more...

---

Hyphens

***

Asterisks

___

Underscores

Three or more...


Hyphens


Asterisks


Underscores

Line Breaks

My basic recommendation for learning how line breaks work is to experiment and discover -- hit &lt;Enter> once (i.e., insert one newline), then hit it twice (i.e., insert two newlines), see what happens. You'll soon learn to get what you want. "Markdown Toggle" is your friend.

Here are some things to try out:

Here's a line for us to start with.

This line is separated from the one above by two newlines, so it will be a *separate paragraph*.

This line is also a separate paragraph, but...
This line is only separated by a single newline, so it's a separate line in the *same paragraph*.

Here's a line for us to start with.

This line is separated from the one above by two newlines, so it will be a separate paragraph.

This line is also begins a separate paragraph, but...
This line is only separated by a single newline, so it's a separate line in the same paragraph.

(Technical note: Markdown Here uses GFM line breaks, so there's no need to use MD's two-space line breaks.)

YouTube Videos

They can't be added directly but you can add an image with a link to the video like this:

<a href="http://www.youtube.com/watch?feature=player_embedded&v=YOUTUBE_VIDEO_ID_HERE
" target="_blank"><img src="http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg" 
alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" /></a>

Or, in pure Markdown, but losing the image sizing and border:

[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE)

Referencing a bug by #bugID in your git commit links it to the slip. For example #1.


License: CC-BY

Video

(video)[video_source]

The video_source is an online audio link. It can be local assets (for mobile) but you should custom video player to load local assets.

Audio

(audio)[audio_source]

The audio_source is an online audio link. It can be local assets (for mobile) but you should custom audio player to load local assets.

Image Gallery

The Image Gallery will render same layout as the layout in this video: https://youtu.be/rMrBU-irypA

(gallery)[image_link,image_link,image_link]

image_link is an online image link, e.g: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png. It can be local assets (for mobile) but you should custom viewer to load local assets.

Smart Text

(smart-text "It's is a {{parent_name}}, father of {{child_name}}")[parent_name "Ned Stark", child_name "John Snow"]

It will help to render custom string with variables.

LittleLives Design 1.0 is the first version of Little Lives Design System. It will include some components with specific style for LittleLives.

../src/LD/components/Logo.vue

LittleLives Logo

Prop nameTypeDefaultDescription
colorstringblue
typestringfull
sizestringsmall

Example

../src/LD/components/PeopleGender.vue

LittleLives PeopleGender

Prop nameTypeDefaultDescription
valuestring
checkedboolean
labelstring
sizestringmedium

Example

../src/LD/components/PeopleStanding.vue

LittleLives People Standing

Prop nameTypeDefaultDescription
typestringRequired

Type of people, it can be: daddy, mom, aunt, uncle, grandma, grandpa, owner, principal, educator..

selectedboolean

Example

../src/LD/components/ReadMore.vue

LittleLives ReadMore - Inherit from ll-expander component so you can use ll-expander properties

Prop nameTypeDefaultDescription
readMoreTextstringRead More
collapseTextstringCollapse

Example

Alexia Manon Senior is 27 and healthy — the type of person who might be most tempted to forgo health insurance if Republicans enact a tax bill that repeals the Affordable Care Act’s requirement that most Americans have coverage or pay a penalty. But Ms. Manon Senior, a graduate student in Miami, said she would hold tight to her coverage, at least as long as she keeps getting nearly $5,000 a year in government subsidies to pay for most of it. “The reason why I’m currently in the A.C.A. is not because I want to avoid the tax penalty,” she said. “It’s because of the ‘What if?’ If something happens and I leave the hospital with a $10,000 bill, it’s a lot of money that I don’t have.” People like Ms. Manon Senior complicate the argument of Senate Republicans who are counting on repeal of the so-called individual mandate to free up hundreds of billions of dollars to pay for an array of tax cuts to corporations and individuals. They are assuming that without a mandate, many people would no longer buy insurance, so the government would spend billions of dollars less on the subsidies the health law provides to help those under a certain income level pay their premiums. The nonpartisan Congressional Budget Office has estimated that doing away with the mandate would result in nearly 13 million more people without insurance and federal savings of $338 billion by 2027. But polling data, analysis from a private forecasting agency and interviews with people who buy coverage through the Affordable Care Act marketplaces suggest the savings could be far less, largely because many people who qualify for the subsidies will still want to take advantage of them.
Read More
../src/LD/components/Select.vue

LittleLives Select

Prop nameTypeDefaultDescription
errorstring
valuestring
optionsarray
placeholderstringSelect
popoverPropsobjectFunction

Override ll-popover properties

Directives

NameDescription
v-on:inputlistening event when value of Select has been changed

Example

This plugin is extended from vue-notification

How to Use

In App.vue, add this line:

<notifications group="foo" />

In any of your files:

this.$notify({
  group: 'foo',
  title: 'Important message',
  text: 'Hello user! This is a notification!',
  type: 'danger'
});

Props

All props are optional.

NameTypeDefaultDescription
groupStringnullName of the notification holder, if specified
widthNumber/String300Width of notification holder, can be %, px string or number.
Valid values: '100%', '200px', 200
classesString/Array'vue-notification'List of classes that will be applied to notification element
positionString/Array'top right'Part of the screen where notifications will pop out
animation-typeString'css'Type of animation, currently supported types are css and velocity. velocity is not supported in server rendering
animation-nameStringnullAnimation name required for css animation
animationObject$*Animation configuration for Velocity animation
durationNumber3000Time (ms) animation stays visible (if negative - notification will stay forever or until clicked)
speedNumber300Speed of animation showing/hiding
reverseBooleanfalseShow notifications in reverse order
typeStringinfoSupports: primary, info, success, warning, danger, light, dark, white, black.

API

  this.$notify({
    // (optional)
    // Name of the notification holder
    group: 'foo',

    // (optional)
    // Class that will be assigned to the notification
    type: 'warning',

    // (optional)
    // Title (will be wrapped in div.notification-title)
    title: 'This is title',

    // Content (will be wrapped in div.notification-content)
    text: 'This is <b> content </b>',

    // (optional)
    // Overrides default/provided duration
    duration: 10000,

    // (optional)
    // Overrides default/provided animation speed
    speed: 1000
  })

Title and Text can be HTML strings.

Also you can use simplified version:

this.$notify('text')

Groups

If you are planning to use notification component for 2 or more completely different types of notifications (for example, authentication error messages in top center and generic app notifications in bottom-right corner) - you can specify group property which is essentially a name of notification holder.

Example:

<notifications group="auth"/>
<notifications group="app"/>
this.$notify({ group: 'auth', text: 'Wrong password, please try again later' })

Position

Position property requires a string with 2 keywords for vertical and horizontal postion.

Format: "<vertical> <horizontal>".

  • Horizontal options: left, center, right
  • Vertical options: top, bottom

Default is "top right".