vanilla-selectbox

Converts regular select elements to a stylable selectbox component

Installation

npm install vanilla-selectbox

or

yarn add vanilla-selectbox

Usage

import vselect from 'vanilla-selectbox';

Development

Clone the repository and install the packages.

To start the dev server in watch mode on port 3000 run

npm run watch

You can now access the dev server on http://localhost:3000 with live reloading and automatic updates.

The docs are available on http://localhost:3000/docs and are also automatically updated

API

Modules

log

Functions

createVselectEl(object, string, array) ⇒

optionTpl(object) ⇒ string

Template for the individual option values

handleSelect(e)

Handle select Should trigger on click, keyboard enter, and keyboard space

highlightOption(optionEl)

Highlights an option Element, and removes highlight from all siblings

selectOption(optionEl)

Updates the selected value from the given option

handleBlur(e)

Closes open options on blur

closeOptions(el)

Sets data-open to 'false' for the given element

toggleOpenState(el)

Toggles open state for given element

log

• log
  • static
    • .createLogger(prefix) ⇒ function
  • inner
    • ~selectColor(prefix) ⇒ array
    • ~hslStr(hslArray) ⇒ string
    • ~backgroundColor(hslArray) ⇒ array
    • ~useColors() ⇒ boolean

log.createLogger(prefix) ⇒ function

Basic logger that preserves line numbers in browsers, supports prefixes and has pretty colors in supported browsers

Kind: static method of log
Returns: function - Colorized log function that prefixes all statements

Param	Type	Description
prefix	string	Prefix for log messages

log~selectColor(prefix) ⇒ array

Select a color.

Kind: inner method of log
Returns: array - [H, S, L] color array

Param	Type	Description
prefix	string	Prefix to create color for

log~hslStr(hslArray) ⇒ string

Convert HSL array to hsl() string usable as a CSS color value

Kind: inner method of log
Returns: string - hsl() string

Param	Type	Description
hslArray	array	[H, S, L] Color array

log~backgroundColor(hslArray) ⇒ array

Create a light background color from a color made by selectColor()

Kind: inner method of log
Returns: array - [H, S, L] Color array

Param	Type	Description
hslArray	array	HSL color to create beckground for

log~useColors() ⇒ boolean

Check if current browser supports console color styling

Kind: inner method of log
Returns: boolean - True if colors are supported

createVselectEl(object, string, array) ⇒

Kind: global function
Returns: HTML Element

Param	Type	Description
object	params	Parameters
string	params.cssClass	Namespace all CSS classnames with this value
array	params.options	Array of option values

optionTpl(object) ⇒ string

Template for the individual option values

Kind: global function
Returns: string - HTML for the option

Param	Type	Description
object	params	export Function parameter object
object.cssClass	string	CSS class name to use for the option
object.selected	boolean	This is the selected option
object.value	string	Option value
object.text	string	Option Text

handleSelect(e)

Handle select Should trigger on click, keyboard enter, and keyboard space

Kind: global function

Param	Type	Description
e	Event	Event that triggered the function

highlightOption(optionEl)

Highlights an option Element, and removes highlight from all siblings

Kind: global function

Param	Type	Description
optionEl	HTMLElement	Option to highlight

selectOption(optionEl)

Updates the selected value from the given option

Kind: global function

Param	Type	Description
optionEl	HTMLElement	Option element to select

handleBlur(e)

Closes open options on blur

Kind: global function

Param	Type	Description
e	Event	Blur event

closeOptions(el)

Sets data-open to 'false' for the given element

Kind: global function

Param	Type	Description
el	HTMLElement	Element to close

toggleOpenState(el)

Toggles open state for given element

Kind: global function

Param	Type	Description
el	HTMLElement	Element to toggle