Svelte Dropdown Component

A flexible and customizable dropdown component built using Svelte.

Table of Contents

• Installation
• Usage
• Props
• Events
• Styling
• Examples
• Contributing
• License

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.

License

This project is licensed under the MIT License.

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