List-box-svelte NPM

Svelte Dropdown Component

A flexible and customizable dropdown component built using Svelte.

Installation

Install the package using npm:

npm install list-box-svelte

Usage

Import the Dropdown component into your Svelte file:

import Dropdown from 'list-box-svelte';

Use it within your Svelte template:

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

<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

<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

<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.