alexandru-dodon/revodropdown

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

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:

npm i @revolist/revo-dropdown

Module import

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

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

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

<script type="module">
  const people = [
  {
    eyeColor: 'green',
    name: 'Samantha Molina',
  },
  {
    eyeColor: 'green',
    name: 'Weber Henderson',
  }];
  const dropdowns = document.querySelectorAll('revo-dropdown');
  for (var q = 0; q < dropdowns.length; q++) {
    dropdowns[q].source = people;
  } 
</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>

---