svelecte

v4.1.0

Flexible autocomplete/select component written in Svelte. Massively inspired by Selectize.js. Also usable as custom element (CE) For more information about how to use this package see README

Latest version published 2 days ago

License: MIT

NPM

GitHub

Package Health Score

71 / 100

security
No known security issues
popularity
Small
maintenance
Sustainable
community
Sustainable

Explore Similar Packages

Security

No known security issues

All security vulnerabilities belong to production dependencies of direct and indirect packages.

Security and license risk for significant versions

All Versions

Version				Vulnerabilities	License Risk
4.1.0	\|	04/2024		0 C 0 H 0 M 0 L	0 H 0 M 0 L
4.0.1	\|	03/2024		0 C 0 H 0 M 0 L	0 H 0 M 0 L
3.17.3	\|	02/2024	Popular	0 C 0 H 0 M 0 L	0 H 0 M 0 L
2.3.2	\|	10/2021		0 C 0 H 1 M 0 L	0 H 0 M 0 L
2.2.0	\|	10/2021		0 C 0 H 1 M 0 L	0 H 0 M 0 L

License

MIT

Security Policy

Is your project affected by vulnerabilities?

Scan your projects for vulnerabilities. Fix quickly with automated fixes. Get started with Snyk for free.

Get started free

Popularity

Small

Weekly Downloads (5,035)

GitHub Stars: 417
Forks: 39
Contributors: 20

Direct Usage Popularity

The npm package svelecte receives a total of 5,035 downloads a week. As such, we scored svelecte popularity level to be Small.

Based on project statistics from the GitHub repository for the npm package svelecte, we found that it has been starred 417 times.

Downloads are calculated as moving averages for a period of the last 12 months, excluding weekends and known missing data points.

Community

Sustainable

Readme.md: Yes
Contributing.md: No
Code of Conduct: No
Contributors: 20
Funding: Yes

With more than 10 contributors for the svelecte repository, this is possibly a sign for a growing and inviting community.

We found a way for you to contribute to the project! Looks like svelecte is missing a Code of Conduct.

Embed Package Health Score Badge

Maintenance

Sustainable

Commit Frequency

Open Issues: 3
Open PR: 0
Last Release: 2 days ago
Last Commit: 1 month ago

Further analysis of the maintenance status of svelecte based on released npm versions cadence, the repository activity, and other data points determined that its maintenance is Sustainable.

We found that svelecte demonstrates a positive version release cadence with at least one new version released in the past 3 months.

As a healthy sign for on-going project maintenance, we found that the GitHub repository had at least 1 pull request or issue interacted with by the community.

Keep your project healthy

Check your package.json

Ensure all the packages you're using are healthy and well-maintained

Snyk Vulnerability Scanner

Get health score & security insights directly in your IDE

Package

Node.js Compatibility: not defined

Age: 4 years
Dependencies: 1 Direct
Versions: 137
Install Size: 147 kB
Dist-tags: 2
# of Files: 24
Maintainers: 1
TS Typings: No

svelecte has more than a single and default latest tag published for the npm package. This means, there may be other tags available for this package, such as next to indicate future releases, or stable to indicate stable releases.

Readme

Svelecte

svelecte

Flexible autocomplete/select component written in Svelte. Initially inspired by Selectize.js. Also usable as custom element. Usable in forms, behaves very similar to standard <select> element.

See the latest changes on the Releases page.

📃 Features

searchable
multiselect with limit of max selected items
allow simple array or complex objects as items
custom item renderer (formatter)
allow creating new items (and possibly edit them)
remote data fetch
virtual list support
i18n and basic ARIA support
SSR support
client-validation support (tested with sveltekit-superforms)
lazy dropdown rendering
usable as custom element
customizable styling
dnd intergration with svelte-dnd-action

🔧 Installation

npm install svelecte --save

Minimalistic example

Properties

Property	Type	Default	Description
name	`string`	`'svelecte'`	Create internal `</select>` element. Without `name` defined, no `<select>` is created
inputId	`string`	`null`	Allow targeting input using a html ID. Otherwise it is based on `name` property
required	`bool`	`false`	Make sense only when `name` is defined and you work with it as standard `</select>` element
disabled	`bool`	`false`	Disable component
options	`array`	`[]`	Option list, see Options for more info
optionResolver	`function`	`undefined`	Custom option resolver. Enabling "query mode". Check the example on Options page
value	`string`,`object`	`null`	Bound value property. For `multiple` is always array
valueAsObject	`bool`	`false`	Switch whether Svelecte should expects from and return to `bind:value` objects or primitive value (usually string, number)
parentValue	`string`	`undefined`	Value which this component depends on. When `parentValue` is `null`, component is disabled. There is an example on Remote Datasource page.
valueField	`string`	`null`	Property to be used as value (if not specified, will be resolved automatically)
labelField	`string`	`null`	Property shown in dropdown (if not specified, will be resolved automatically)
groupLabelField	`string`	`label`	Property to be used as optgroup label
groupItemsField	`string`	`options`	Property holding optgroup option list
disabledField	`string`	`$disabled`	Property to check, whether given options should be disabled and unselectable
placeholder	`string`	`Select`	Input placeholder
searchable	`bool`	`true`	Allow search among items by typing
clearable	`bool`	`false`	Display ✖ icon to clear whole selection
renderer	`mixed`	`null`	Dropdown and selection renderer function. More on Rendering page
disableHighlight	`bool`	`false`	Disable highlighting of input value in results. Can be useful with a `renderer` function that includes additional text or does its own highlighting
highlightFirstItem	`bool`	`true`	Automatically highlight the first item in the list when the dropdown opens
selectOnTab	`bool`,`string`	`null`	Based on value provided, it allows selecting currently active item by `Tab` AND (if value is `'select-navigate'`) also focus next input.
resetOnBlur	`bool`	`true`	Control if input value should be cleared on blur
resetOnSelect	`bool`	`true`	Control if input value should be cleared on item selection. Note: applicable only with `multiple`
closeAfterSelect	`bool`	`'auto'`	closes dropdown after selection. Setting this to `true` is useful for multiple select only. For single select dropdown is always closed no matter the value this property has
strictMode	`bool`	`true`	When `true`, passed value is checked whether exists on provided `options` array. If not, `invalidValue` event is dispatched
multiple	`bool`	`false`	allow multiselection. Will be set automatically to `true`, if `name` property ends with `[]`, like `tags[]`
max	`number`	`0`	Maximum allowed items selected, applicable only for multiselect
collapseSelection	`string`	`null`	Whether selection should be collapsed and when, check Rendering for more info.
keepSelectionInList	`bool`	`'auto'`	Whether keep selected items in dropdown. `auto` for `multiple` removes selected items from dropdown
creatable	`bool`	`false`	Allow creating new item(s)
creatablePrefix	`string`	`*`	Prefix marking new item
allowEditing	`bool`	`false`	When pressing `Backspace` switch to edit mode instead of removing newly created item. NOTE intended to be used with `creatable` property
keepCreated	`bool`	`true`	Switch whether to add newly created option to option list or not
delimiter	`string`	`,`	split inserted text when pasting to create multiple items
createFilter	`function`	`null`	Function, that transform input string to custom value. It can serve as a filter, if value is valid or not. If you want to dismiss entered value, function should return `''` (empty string). By default all input string is trimmed and all multiple spaces are removed.
createHandler	`function`	`null`	Custom (may be) async function transforming input string to option object. Default returns object with `valueField` and `labelField` properties, where `labelField`'s value is input string prefixed with `creatablePrefix` property.
fetch	`string`	`null`	Sets fetch URL. Visit [Remote datasource] form more details
fetchProps	`object`	`null`	Set options for new fetch Request
fetchCallback	`function`	`null`	optional fetch callback
fetchResetOnBlur	`bool`	`true`	reset previous search results on empty input, related to `resetOnBlur`
fetchDebounceTime	`number`	`300`	how many miliseconds is request debounced before fetch is executed
minQuery	`number`	`1`	Minimal amount of characters required to perform remote request. Usable with `fetch` property
lazyDropdown	`bool`	`true`	render dropdown after first focus, not by default
virtualList	`bool`	`false`	Whether use virtual list for dropdown items (useful for large datasets)
vlHeight	`number`	`null`	Height of virtual list dropdown (if not specified, computed automatically)
vlItemSize	`number`	`null`	Height of one row (if not specified, computed automatically)
searchProps	`object`	`null`	Customize `sifter.js` settings. See Searching page for more details
class	`string`	`svelecte-control`	default css class
i18n	`object`	`null`	I18n object overriding default settings
dndzone	`function`	noop	Pass `dndzone` from `svelte-dnd-action`, see Examples page
validatorAction	`array`	`null`	Bind validator action for inner `<select>` element. Designed to be used with `svelte-use-form`, see Validation page. For this to work, `name` property MUST be defined
anchor_element	`bool`	`null`	`internal`: when passing also existing select (for custom element)

Available slots

For more info refer to Rendering page.

Emitted events:

Event	arguments	description
fetch	options	newly fetched remote options
fetchError	error	dispatche on fetch error of any kind
change	selection	selected objects. If `anchor` property is defined, `change` event is called also on it
createoption	option	newly created option object
createFail	object	thrown if `createHandler` fails
focus	`</select><input>`	focus event
blur	`<input>`	blur event
invalidValue	invalidValue	triggered when passed `value` is out of provided `options` items. Internal (and bound, if any) `value` is set to `null` or `[]` if multiple
enterKey	underlying `keyDown` event	triggered when natively it would cause form submit (dropdown is closed). This gives you ability to prevent it by calling `event.detail.preventDefault()`

Public API:

Name	type	arguments	description
focus	`function`	-	focus input
refetchWith	`function`	new value

There are global config and addRenderer function available. Refer to Global config and Rendering page respectively.

I18n, a11y, CSS variables

Visit documentation for more details.

Thanks to

selectize.js - main inspiration
sifter - search engine
svelte-tiny-virtual-list virtual list functionality
and svelte of course 😊

And if you want to thank me, you can through my sponsor page.

License

MIT License

svelecte dependencies

svelte-tiny-virtual-list

FAQs

What is svelecte?

Flexible autocomplete/select component written in Svelte. Massively inspired by Selectize.js. Also usable as custom ele... Visit Snyk Advisor to see a full health score report for svelecte, including popularity, security, maintenance & community analysis.

Is svelecte popular?

The npm package svelecte receives a total of 5,035 weekly downloads. As such, svelecte popularity was classified as small. Visit the popularity section on Snyk Advisor to see the full health analysis.

Is svelecte well maintained?

We found indications that svelecte maintenance is sustainable demonstrating some project activity. We saw a total of 20 open source contributors collaborating on the project. See the full package health analysis to learn more about the package maintenance status.

Is svelecte safe to use?

The npm package svelecte was scanned for known vulnerabilities and missing license, and no issues were found. Thus the package was deemed as safe to use. See the full health analysis review.

Last updated on 26 April-2024, at 12:20 (UTC).

Build a secure application checklist

Select a recommended open source package

Minimize your risk by selecting secure & well maintained open source packages

DONE

Scan your app for vulnerabilities

Scan your application to find vulnerabilities in your: source code, open source dependencies, containers and configuration files

SCAN NOW

Fix identified vulnerabilities

Easily fix your code by leveraging automatically generated PRs

AUTO FIX

Monitor for new issues

New vulnerabilities are discovered every day. Get notified if your application is affected

MONITOR APP

Package Health Score

Explore Similar Packages

Security and license risk for significant versions

Is your project affected by vulnerabilities?

Weekly Downloads (5,035)

Direct Usage Popularity

Embed Package Health Score Badge

Commit Frequency

Keep your project healthy

Check your package.json

Snyk Vulnerability Scanner

Readme

Svelecte

📃 Features

🔧 Installation

Minimalistic example

Properties

Available slots

Emitted events:

Public API:

I18n, a11y, CSS variables

Thanks to

License

svelecte dependencies

svelecte development dependencies

FAQs

What is svelecte?

Is svelecte popular?

Is svelecte well maintained?

Is svelecte safe to use?

Build a secure application checklist

Select a recommended open source package

Scan your app for vulnerabilities

Source Code

Open Source

Container

Config

Fix identified vulnerabilities

Monitor for new issues