Security News
The Push to Ban Ransom Payments Is Gaining Momentum
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
fancy-select
Advanced tools
Readme
A unidirectional combobox component based on the aria spec. See a live demo here.
var mercury = require('mercury')
var FancySelect = require('fancy-select')
require('fancy-select/style') // include default stylesheet
var component = FancySelect({
options: [{
value: 'c',
label: 'Consistency'
}, {
value: 'a',
label: 'Availability'
}, {
value: 'p',
label: 'Partition Tolerance'
}],
placeholder: 'Choose Two'
})
mercury.app(document.body, component.state, FancySelect.render)
An instance of observ-struct
. Holds the state for this component. All parts of the state are subclasses of observ
.
state.options
the full option treestate.value
the current value of this comboboxstate.filtered
the option tree after it has been passed through the current filter function.state.query
the current query stringstate.active
the path of the active option in the listboxstate.isOpen
whether the dropdown is currently openstate.placeholder
the current placeholder textstate.separator
the key code for the current separatorThe render function to be passed to a main-loop
or placed into another template.
All the config options can be changed on the fly with the set
function with a matching name:
component.setOptions(options)
component.setValue(value)
component.setFilter(filter)
component.setActions(actions)
component.setQuery(query)
To create a custom render function, call FancySelect.customRender(templates)
var render = FancySelect.customRender(templates)
An array of option
objects to use as the data source for this combobox. Will be passed to option-tree-navigate
.
The properties in an option
object used by fancy-select
are:
option.value
Any option with a value will be selectable. Options without a value
will be rendered as option groups.option.label
By default, will be used as the label for an optionoption.options
An array of option
objects. The children of this option.An array of option
objects to use as the initial value. Will be passed to option-tree-navigate
. Child options will not be shown when an option with children is selected.
The function to use when filtering which options are available to select. Gets passed to option-tree-filter
. The default filter function includes these rules:
value
starts with __
value
is identical to an option already in the value
value
and label
do not match the query
string (case insensiteve).A hash of option values to the functions that should be called when that value
is selected. Will be passed to option-select-action
.
A hash of template names to render functions. The tree of default templates is nested in this order with these names:
combobox
textbox
input
listbox
group
option
optionlabel
A render function is passed the state
, a template
function, for inserting other templates, and then any other arguments it was called with.
var h = require('virtual-hyperscript')
var templates = {
option: function (state, template, option, path) {
return h('div.option', [
// insert another named template like this.
// any arguments after the template name are
// passed to its render function
template('optionlabel', option, path)
])
}
}
var render = FancySelect.customRender(templates)
The string to use as the placeholder text in the textbox.
The key code of a key to consider a separator. Pressing the separator key will trigger the same action as pressing enter.
Include the default stylesheet with require('fancy-select/style')
FAQs
a unidirectional combobox component based on the aria spec
We found that fancy-select demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
Application Security
New SEC disclosure rules aim to enforce timely cyber incident reporting, but fear of job loss and inadequate resources lead to significant underreporting.
Security News
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).