https://github.com/revolist/revodropdown

Minimalistic dropdown and auto-complete component with filtering and keyboard support
https://github.com/revolist/revodropdown

angular autocomplete dropdown dropdownlist dropdownpopup filterable js react stenciljs vue webcomponent

Last synced: about 13 hours ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/revolist/revodropdown
• Owner: revolist
• License: mit
• Created: 2020-10-14T14:01:33.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2024-10-16T19:14:32.000Z (30 days ago)
• Last Synced: 2024-10-18T18:10:49.404Z (28 days ago)
• Topics: angular, autocomplete, dropdown, dropdownlist, dropdownpopup, filterable, js, react, stenciljs, vue, webcomponent
• Language: JavaScript
• Homepage: https://revolist.github.io/revodropdown/
• Size: 338 KB
• Stars: 24
• Watchers: 3
• Forks: 7
• Open Issues: 2
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# `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:

```bash

npm i @revolist/revo-dropdown

```

### Module import

```js

import * as loader from '@revolist/revo-dropdown/loader';

if (loader.defineCustomElements) {

  loader.defineCustomElements();

}

```

### Script tag

- Put a script tag similar to this `` in the head of your index.html

### Usage

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

```html

```

```js

  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;

  } 

```

Need help? Check out docs [here](https://stenciljs.com/docs/my-first-component).

# 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`                                       |

| `open`    | Before element open, can be prevented  | `CustomEvent`                                       |

## Methods

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

Change value

#### Returns

Type: `Promise`

### `doClose(isDisconnected?: boolean) => Promise`

Close dropdown

#### Returns

Type: `Promise`

### `doOpen() => Promise`

Open dropdown

#### Returns

Type: `Promise`

---