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.
@dotburo/select-input
Advanced tools
Readme
Single-purpose select box/dropdown with an input field—without dependencies (ie11+).
›_ demo
npm i -D @dotburo/select-input
import SelectInput from 'select-input';
// Minimal parameters
let selectInput = new SelectInput('.select-input', {
items: ['A', 'B', 'C', 'D']
});
// Listen to events, add a callback and show the list
selectInput.on('selected', e => console.log(e.detail))
.on('created', e => selectInput.getCurrent())
.onDelete(item => window.confirm('Sure?'))
.toggle(true);
items: [] # Array of strings/numbers or of {value: String|Number} objects
current: null # Item to select on instantiation
parent: null # Parent element, to
maxHeight: 0 # Maximum height of the dropdown, `0` means no constraint
allowAdd: true # Whether to allow adding new elements to the list
proposal: 'Add {X} to the list?' # Message to add an item to the list, {X} will be replaced
notFound: '{X} not present in the list' # Message if nothing was found (only used if `allowAdd` is `false`)
sort: true # Whether to sort the list
order: 'desc' # Sort order
allowRemove: true # Whether to allow removal of items in the list
removalIcon: '×' # HTML for deletion button in each item li-element
placeHolder: 'Type to search' # Input field place holder
onDelete: null # Callable, fired before deleting an item; return `false` to prevent deletion
onCreate: null # Callable, fired before creatng an item; return `false` to prevent creation
Event handlers can be bound with instance.on()
or instance.getElement().addEventListener()
. In browsers which
support CustomEvent
the detail
property of the event object contains the created, selected or removed item.
For older browsers instance.getCurrent()
will need to be used.
Listen to events, pass in and event name (String
), a subscriber (Function
) and optionally and event target (Element
).
If the latter is omitted, events are delegated to instance.getElement()
.
Pass a function to be called before deleting an item. If the function returns false, the item will not be removed.
Pass a function to be called before creating an item. If the function returns false, the item will not be created.
Show or hide the list
Return SelectInput's outermost element
Get all the items in the list as an array of objects
Return the currently selected item of the list
Set or clear the current value (only existing values can be set)
Find an item in the list by its value
Unbind all events and clean up the DOM
FAQs
Lightweight & dynamic select dropdown with an input field, without dependencies
The npm package @dotburo/select-input receives a total of 25 weekly downloads. As such, @dotburo/select-input popularity was classified as not popular.
We found that @dotburo/select-input 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).