# svelte-pick-list

> svelte component for reordering items between different lists

Latest version **0.2.0** (published 2021-05-13) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2021-05-13 |
| First published | 2021-02-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 123.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | alstar01 |
| Keywords | svelte |

## Links

- npm: https://www.npmjs.com/package/svelte-pick-list
- npm.io page: https://npm.io/package/svelte-pick-list

## Recent versions

- 0.2.0 (latest) — 2021-05-13
- 0.1.1 — 2021-05-12
- 0.1.0 — 2021-02-14
- 0.0.1 — 2021-02-14

## README

# svelte-pick-list

Svelte component to reorder items between different lists.

## API

### PickList (Default)

Svelte component comprised of two lists arranged using CSS List Layout with button controls.

#### Props

| Name         | Type                                                           | Required | Default                              | Description                                                                                 |
| ------------ | -------------------------------------------------------------- | -------- | ------------------------------------ | ------------------------------------------------------------------------------------------- |
| data         | Array<Array.<{key: String, label: String, disabled: Boolean}>> | false    | [[], []]                             | Nested arrays of data. Each nested array should include key, label and disabled properties. |
| selectedKeys | Array<Array<String>>                                           | false    | [[], []]                             | Nested array of selected list keys                                                          |
| renderFormat | Function: String                                               | false    | (item) => item.label \|\| item.key   | Function for rendering item label                                                           |
| sortFn       | Function: Array                                                | false    | (a, b) => a.key.localeCompare(b.key) | Function for sorting items in each list                                                     |
| titles       | Array<String>                                                  | false    | ["Available", "Selected"]            | Array of titles/headings to render                                                          |

#### Events

| Name      | Description                                    |
| --------- | ---------------------------------------------- |
| selectAll | Fired when select all is checked.              |
| move      | Fired when items are move to another list.     |
| moveAll   | Fired when all items are move to another list. |

## Installation

```bash
npm install svelte-pick-list
```

## Usage

```html
<script>
  import PickList from "svelte-pick-list";

  let data = [
    [
      { key: "1", label: "Content 1", disabled: false },
      { key: "2", label: "Content 2", disabled: true },
      { key: "3", label: "Content 3", disabled: false },
      { key: "4", label: "Content 4", disabled: false },
    ],
    [
      { key: "5", label: "Content 5", disabled: false },
      { key: "6", label: "Content 6", disabled: true },
    ],
  ];
</script>

<PickList bind:data />
```

## Todo

- [ ] Allow custom components for list items
- [ ] Allow custom components for controls
- [ ] Allow custom styles
- [ ] Allow custom list object data structure
- [ ] Allow custom animation
- [x] Dispatch events
- [ ] Add search functionality
- [ ] Add re-order functionality

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