{"id":15099433,"url":"https://github.com/revolist/revodropdown","last_synced_at":"2025-04-13T05:28:21.895Z","repository":{"id":44936638,"uuid":"304033239","full_name":"revolist/revodropdown","owner":"revolist","description":"Minimalistic dropdown and auto-complete component with filtering and keyboard support","archived":false,"fork":false,"pushed_at":"2024-11-11T21:37:55.000Z","size":358,"stargazers_count":24,"open_issues_count":1,"forks_count":7,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-24T09:46:51.149Z","etag":null,"topics":["angular","autocomplete","dropdown","dropdownlist","dropdownpopup","filterable","js","react","stenciljs","vue","webcomponent"],"latest_commit_sha":null,"homepage":"https://revolist.github.io/revodropdown/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/revolist.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-10-14T14:01:33.000Z","updated_at":"2024-11-11T21:37:29.000Z","dependencies_parsed_at":"2024-12-26T06:07:27.413Z","dependency_job_id":"b4edf6d2-9f95-4389-8fac-9912b8b6493a","html_url":"https://github.com/revolist/revodropdown","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/revolist%2Frevodropdown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/revolist%2Frevodropdown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/revolist%2Frevodropdown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/revolist%2Frevodropdown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/revolist","download_url":"https://codeload.github.com/revolist/revodropdown/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248668313,"owners_count":21142639,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","autocomplete","dropdown","dropdownlist","dropdownpopup","filterable","js","react","stenciljs","vue","webcomponent"],"created_at":"2024-09-25T17:20:40.139Z","updated_at":"2025-04-13T05:28:21.871Z","avatar_url":"https://github.com/revolist.png","language":"JavaScript","readme":"# `revo-dropdown`\n\nMinimalistic dropdown webcomponent.\nAfter long search we couldn't find any cross platform and had to build our own inspired by the latest trends.\n\n| \u003cp align=\"left\"\u003eAutocomplete\u003c/p\u003e                                                 | \u003cp align=\"left\"\u003eRegular select\u003c/p\u003e                                     |\n| -------------------------------------------------------------------------------- | ---------------------------------------------------------------------- |\n| \u003cimg src=\"./assets/Autocomplete.png\" alt=\"Autocomplete dropdown\" width=\"100%\" /\u003e | \u003cimg src=\"./assets/Regular.png\" alt=\"Regular dropdown\" width=\"100%\" /\u003e |\n\n## Getting Started\n\nTo start building a new web component using Stencil, clone this repo to a new directory:\n\n```bash\nnpm i @revolist/revo-dropdown\n```\n\n\n### Module import\n```js\n\nimport * as loader from '@revolist/revo-dropdown/loader';\nif (loader.defineCustomElements) {\n  loader.defineCustomElements();\n}\n```\n\n\n### Script tag\n\n- Put a script tag similar to this `\u003cscript src='https://cdn.jsdelivr.net/npm/@revolist/revo-dropdown@latest/dist/revo-dropdown/revo-dropdown.js'\u003e\u003c/script\u003e` in the head of your index.html\n\n### Usage\n\nThen you can use the element anywhere in your template, JSX, html etc\n\n\n```html\n\u003crevo-dropdown data-label=\"name\" autocomplete=\"true\" placeholder=\"Philosophers\" max-height=\"300\"\u003e\u003c/revo-dropdown\u003e\n```\n\n```js\n\u003cscript type=\"module\"\u003e\n  const people = [\n  {\n    eyeColor: 'green',\n    name: 'Samantha Molina',\n  },\n  {\n    eyeColor: 'green',\n    name: 'Weber Henderson',\n  }];\n  const dropdowns = document.querySelectorAll('revo-dropdown');\n  for (var q = 0; q \u003c dropdowns.length; q++) {\n    dropdowns[q].source = people;\n  } \n\u003c/script\u003e\n```\n\nNeed help? Check out docs [here](https://stenciljs.com/docs/my-first-component).\n\n\n# API\n\n\u003c!-- Auto Generated Below --\u003e\n\n## Properties\n\n| Property        | Attribute        | Description                              | Type                    | Default     |\n| --------------- | ---------------- | ---------------------------------------- | ----------------------- | ----------- |\n| `appendTo`      | `append-to`      | Where to append element                  | `\"body\" \\| \"current\"`   | `'body'`    |\n| `autoClose`     | `auto-close`     | Should dropdown autoclose on changeValue | `boolean`               | `true`      |\n| `autoFocus`     | `auto-focus`     |                                          | `boolean`               | `false`     |\n| `autocomplete`  | `autocomplete`   |                                          | `boolean`               | `false`     |\n| `currentFilter` | `current-filter` | Filter value                             | `any`                   | `undefined` |\n| `dataId`        | `data-id`        | Define object mapping for id/value       | `string`                | `undefined` |\n| `dataLabel`     | `data-label`     | Define object mapping for labels         | `string`                | `undefined` |\n| `filter`        | `filter`         | Filter criteria                          | `\"contains\" \\| \"start\"` | `undefined` |\n| `hasFilter`     | `has-filter`     |                                          | `boolean`               | `true`      |\n| `maxHeight`     | `max-height`     |                                          | `number`                | `undefined` |\n| `placeholder`   | `placeholder`    | Placeholder text                         | `string`                | `'Select'`  |\n| `source`        | --               | Define object mapping for id/value       | `any[]`                 | `[]`        |\n| `value`         | `value`          | Selected value                           | `any`                   | `undefined` |\n\n\n## Events\n\n| Event     | Description                            | Type                                                     |\n| --------- | -------------------------------------- | -------------------------------------------------------- |\n| `changed` | When value changed                     | `CustomEvent\u003c{ val: any; originalEvent?: MouseEvent; }\u003e` |\n| `close`   | Before element close, can be prevented | `CustomEvent\u003cany\u003e`                                       |\n| `open`    | Before element open, can be prevented  | `CustomEvent\u003cany\u003e`                                       |\n\n\n## Methods\n\n### `doChange(val: any, originalEvent?: MouseEvent) =\u003e Promise\u003cvoid\u003e`\n\nChange value\n\n#### Returns\n\nType: `Promise\u003cvoid\u003e`\n\n\n\n### `doClose(isDisconnected?: boolean) =\u003e Promise\u003cvoid\u003e`\n\nClose dropdown\n\n#### Returns\n\nType: `Promise\u003cvoid\u003e`\n\n\n\n### `doOpen() =\u003e Promise\u003cvoid\u003e`\n\nOpen dropdown\n\n#### Returns\n\nType: `Promise\u003cvoid\u003e`\n\n---\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frevolist%2Frevodropdown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frevolist%2Frevodropdown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frevolist%2Frevodropdown/lists"}