npmpackage.info

Gathering detailed insights and metrics for @revolist/revo-dropdown

Other packages similar to @revolist/revo-dropdown

@revolist/revogrid-column-select

3.1.9

Select column type for RevoGrid system based on revo-dropdown

@sy1ar9/revogrid-column-select

2.0.42

Select column type for RevoGrid system based on revo-dropdown

Gathering detailed insights and metrics for @revolist/revo-dropdown

@revolist/revo-dropdown - 3.0.3 | npmpackage.info

@revolist/revo-dropdown

Minimalistic dropdown and auto-complete component with filtering and keyboard support

3.0.3

MIT

JavaScript

207.00 B

96,364 3.6

Installations

npm install @revolist/revo-dropdown

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS, ESM

Node Version

22.10.0

NPM Version

10.9.0 Score

72.9

Supply Chain

100

Quality

79.2

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

0

Total

3

Closed

1

Merged

2

Issues

Open

1

Total

2

Closed

1

Releases

v3.0.3

Updated on Nov 11, 2024

v2.0.0

Updated on Jan 15, 2021

v1.1.4

Updated on Jan 15, 2021

v1.1.3

Updated on Jan 15, 2021

v1.1.2

Updated on Jan 14, 2021

v1.1.1

Updated on Jan 14, 2021

View All 14 releases

Languages

JavaScript

TypeScript

SCSS

HTML

JavaScript (78.42%)

TypeScript (15.11%)

SCSS (3.95%)

HTML (2.52%)

Developer

revolist

Download Statistics

Total Downloads

96,364

Last Day

Last Week

1,060

Last Month

5,055

Last Year

54,865

GitHub Statistics

MIT License

24 Stars

70 Commits

7 Forks

3 Watchers

2 Branches

4 Contributors

Updated on Nov 11, 2024

Bundle Size

282.00 B

Minified

207.00 B

Minified + Gzipped

Bundlephobia

Maintainers

View All 4 Contributors

Package Meta Information

Latest Version

3.0.3

Package Id

@revolist/revo-dropdown@3.0.3

Unpacked Size

2.26 MB

Size

495.84 kB

File Count

NPM Version

10.9.0

Node Version

22.10.0

Published on

Nov 11, 2024

Total Downloads

Cumulative downloads

Total Downloads

96,364

Last Day

-68.8%

Compared to previous day

Last Week

-14.2%

1,060

Compared to previous week

Last Month

-10.7%

5,055

Compared to previous month

Last Year

213.3%

54,865

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dev Dependencies

@stencil/core @stencil/sass typescript @types/node gh-pages

`revo-dropdown`

Minimalistic dropdown webcomponent. After long search we couldn't find any cross platform and had to build our own inspired by the latest trends.

Autocomplete	Regular select

Getting Started

To start building a new web component using Stencil, clone this repo to a new directory:

1npm i @revolist/revo-dropdown

Module import

1
2import * as loader from '@revolist/revo-dropdown/loader';
3if (loader.defineCustomElements) {
4  loader.defineCustomElements();
5}

Script tag

Put a script tag similar to this <script src='https://cdn.jsdelivr.net/npm/@revolist/revo-dropdown@latest/dist/revo-dropdown/revo-dropdown.js'></script> in the head of your index.html

Usage

Then you can use the element anywhere in your template, JSX, html etc

1<revo-dropdown data-label="name" autocomplete="true" placeholder="Philosophers" max-height="300"></revo-dropdown>

1<script type="module">
2  const people = [
3  {
4    eyeColor: 'green',
5    name: 'Samantha Molina',
6  },
7  {
8    eyeColor: 'green',
9    name: 'Weber Henderson',
10  }];
11  const dropdowns = document.querySelectorAll('revo-dropdown');
12  for (var q = 0; q < dropdowns.length; q++) {
13    dropdowns[q].source = people;
14  } 
15</script>

Need help? Check out docs here.

API

Properties

Property	Attribute	Description	Type	Default
`appendTo`	`append-to`	Where to append element	`"body" \| "current"`	`'body'`
`autoClose`	`auto-close`	Should dropdown autoclose on changeValue	`boolean`	`true`
`autoFocus`	`auto-focus`		`boolean`	`false`
`autocomplete`	`autocomplete`		`boolean`	`false`
`currentFilter`	`current-filter`	Filter value	`any`	`undefined`
`dataId`	`data-id`	Define object mapping for id/value	`string`	`undefined`
`dataLabel`	`data-label`	Define object mapping for labels	`string`	`undefined`
`filter`	`filter`	Filter criteria	`"contains" \| "start"`	`undefined`
`hasFilter`	`has-filter`		`boolean`	`true`
`maxHeight`	`max-height`		`number`	`undefined`
`placeholder`	`placeholder`	Placeholder text	`string`	`'Select'`
`source`	--	Define object mapping for id/value	`any[]`	`[]`
`value`	`value`	Selected value	`any`	`undefined`

Events

Event	Description	Type
`changed`	When value changed	`CustomEvent<{ val: any; originalEvent?: MouseEvent; }>`
`close`	Before element close, can be prevented	`CustomEvent<any>`
`open`	Before element open, can be prevented	`CustomEvent<any>`

Methods

`doChange(val: any, originalEvent?: MouseEvent) => Promise<void>`

Change value

Returns

Type: Promise<void>

`doClose(isDisconnected?: boolean) => Promise<void>`

Close dropdown

Returns

Type: Promise<void>

`doOpen() => Promise<void>`

Open dropdown

Returns

Type: Promise<void>

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

10

Packaging

Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.

7

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Maintained

Determines if the project is "actively maintained".

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

Score

3.6

/10

Last Scanned on 2025-06-23

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More