# list-box-svelte

> A flexible and customizable dropdown component built using Svelte.

Latest version **1.1.4** (published 2023-11-29) · ISC license · 0 weekly downloads

## Install

```sh
npm install list-box-svelte
pnpm add list-box-svelte
yarn add list-box-svelte
bun add list-box-svelte
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.4 |
| Published | 2023-11-29 |
| First published | 2023-11-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 24 |
| Unpacked size | 18.4 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Hayk Asoyan |
| Maintainers | asoyan |
| Keywords | svelte, svelte-kit, list-box, dropdown, select |

## Links

- npm: https://www.npmjs.com/package/list-box-svelte
- Repository: https://github.com/Hayk-Asoyan/list-box
- Homepage: https://github.com/Hayk-Asoyan/list-box#readme
- Issues: https://github.com/Hayk-Asoyan/list-box/issues
- npm.io page: https://npm.io/package/list-box-svelte

## Dependencies (24)

- [ms](https://npm.io/package/ms.md) ^2.1.2
- [acorn](https://npm.io/package/acorn.md) ^8.11.2
- [debug](https://npm.io/package/debug.md) ^4.3.4
- [kleur](https://npm.io/package/kleur.md) ^4.1.5
- [dequal](https://npm.io/package/dequal.md) ^2.0.3
- [nanoid](https://npm.io/package/nanoid.md) ^3.3.7
- [rollup](https://npm.io/package/rollup.md) ^4.6.0
- [vitefu](https://npm.io/package/vitefu.md) ^0.2.5
- [esbuild](https://npm.io/package/esbuild.md) ^0.19.8
- [postcss](https://npm.io/package/postcss.md) ^8.4.31
- [code-red](https://npm.io/package/code-red.md) ^1.0.4
- [css-tree](https://npm.io/package/css-tree.md) ^2.3.1
- [mdn-data](https://npm.io/package/mdn-data.md) ^2.0.30
- [deepmerge](https://npm.io/package/deepmerge.md) ^4.3.1
- [aria-query](https://npm.io/package/aria-query.md) ^5.3.0
- [periscopic](https://npm.io/package/periscopic.md) ^3.1.0
- [picocolors](https://npm.io/package/picocolors.md) ^1.0.0
- [svelte-hmr](https://npm.io/package/svelte-hmr.md) ^0.15.3
- [is-reference](https://npm.io/package/is-reference.md) ^3.0.2
- [magic-string](https://npm.io/package/magic-string.md) ^0.30.5
- [estree-walker](https://npm.io/package/estree-walker.md) ^3.0.3
- [source-map-js](https://npm.io/package/source-map-js.md) ^1.0.2
- [axobject-query](https://npm.io/package/axobject-query.md) ^3.2.1
- [locate-character](https://npm.io/package/locate-character.md) ^3.0.0

## Recent versions

- 1.1.4 (latest) — 2023-11-29
- 1.1.3 — 2023-11-29
- 1.1.2 — 2023-11-29
- 1.1.1 — 2023-11-29
- 1.1.0 — 2023-11-29
- 1.0.2 — 2023-11-29
- 1.0.1 — 2023-11-28
- 1.0.0 — 2023-11-28

## README

# Svelte Dropdown Component

A flexible and customizable dropdown component built using Svelte.

## Table of Contents
- [Installation](#installation)
- [Usage](#usage)
- [Props](#props)
- [Events](#events)
- [Styling](#styling)
- [Examples](#examples)
- [Contributing](#contributing)
- [License](#license)

## Installation

Install the package using npm:

```bash
npm install list-box-svelte
```

## Usage

Import the `Dropdown` component into your Svelte file:

```javascript
import Dropdown from 'list-box-svelte';
```

Use it within your Svelte template:

```html
<Dropdown items={items} bind:selected={selected}>
    <span slot="trigger" let:selected>{selected}</span>
    <span slot="item" let:item>{item}</span>
</Dropdown>
```

## Props

- **items**: Array of items to populate the dropdown.
- **toggle**: Boolean to control dropdown visibility.
- **value**: Current value of the dropdown.
- **isSearch**: Boolean to enable/disable search functionality.
- **defaultSelectedIndex**: Index of the default selected item.

## Events

- **select**: Event dispatched when an item is selected.

Usage example:
```html
<script>
    function handleSelect(item) {
        console.log('Selected item:', item);
    }
</script>

<Dropdown items={items} on:select={handleSelect}>
    <!-- ... -->
</Dropdown>
```

## Styling

The dropdown component can be customized using CSS variables or by modifying the component's internal styles.

CSS classes:
- `.dropdown`: Wrapper class for the dropdown.
- `.dropdown ul`: Styling for the dropdown list.
- `.dropdown ul li`: Styling for individual list items.

## Examples

### Basic Example

```html
<Dropdown items={['Option 1', 'Option 2', 'Option 3']} on:select={handleSelect}>
    <span slot="trigger" let:selected>{selected}</span>
    <span slot="item" let:item>{item}</span>
</Dropdown>
```

### Example with Search

```html
<Dropdown items={countries} isSearch on:select={handleSelect}>
    <span slot="trigger" let:selected>{selected ? selected.name : 'Select a country'}</span>
    <span slot="item" let:item>{item.name}</span>
</Dropdown>
```

## Contributing

Contributions are welcome! To contribute to this project, follow these steps:
1. Fork the repository.
2. Create a new branch (`git checkout -b feature`)
3. Make your changes.
4. Commit your changes (`git commit -am 'Add new feature'`)
5. Push to the branch (`git push origin feature`)
6. Create a Pull Request.

## License

This project is licensed under the [MIT License](LICENSE).

---

Feel free to add more sections or elaborate on each section based on your specific component's features and requirements!

---
_Source: https://npm.io/package/list-box-svelte · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._