npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

fancy-select

v2.0.2

Published

a unidirectional combobox component based on the aria spec

Downloads

11

Readme

fancy-select build status

A unidirectional combobox component based on the aria spec. See a live demo here.

Sauce Test Status

Simple Example

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)

Usage

var component = FancySelect(config = {})

component.state

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 tree
  • state.value the current value of this combobox
  • state.filtered the option tree after it has been passed through the current filter function.
  • state.query the current query string
  • state.active the path of the active option in the listbox
  • state.isOpen whether the dropdown is currently open
  • state.placeholder the current placeholder text
  • state.separator the key code for the current separator

FancySelect.render

The render function to be passed to a main-loop or placed into another template.

config

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)

config.options = []

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 option
  • option.options An array of option objects. The children of this option.

config.value = []

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.

config.filter = function (option, query, value) { ... }

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:

  • always show any option whose value starts with __
  • omit any option whose value is identical to an option already in the value
  • omit any option whose value and label do not match the query string (case insensiteve).

config.actions = {}

A hash of option values to the functions that should be called when that value is selected. Will be passed to option-select-action.

templates = {}

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)

config.placeholder = ''

The string to use as the placeholder text in the textbox.

config.separator = 188 (comma)

The key code of a key to consider a separator. Pressing the separator key will trigger the same action as pressing enter.

styles

Include the default stylesheet with require('fancy-select/style')