svelte-multiselect
Advanced tools
Comparing version 8.2.0 to 8.2.1
@@ -5,4 +5,17 @@ ### Changelog | ||
#### [v8.2.1](https://github.com/janosh/svelte-multiselect/compare/v8.2.0...v8.2.1) | ||
- Fix `allowUserOptions` preventing dropdown list navigation with up/down arrow keys [`#184`](https://github.com/janosh/svelte-multiselect/pull/184) | ||
- Mdsvexamples [`#182`](https://github.com/janosh/svelte-multiselect/pull/182) | ||
- Add changelog & contributing pages to site [`#181`](https://github.com/janosh/svelte-multiselect/pull/181) | ||
- tweak contributing.md and css-classes example [`6f78033`](https://github.com/janosh/svelte-multiselect/commit/6f78033826beb34cd00bf3282c93ac5328905735) | ||
- fix build error [`b896d36`](https://github.com/janosh/svelte-multiselect/commit/b896d3643a0988b0d0bed832ba46bcad0e2c4494) | ||
- fix readme badge for gh-pages.yml status [`906b560`](https://github.com/janosh/svelte-multiselect/commit/906b56024a826ed45263197b1267015d88f0a660) | ||
<!-- auto-changelog-above --> | ||
#### [v8.2.0](https://github.com/janosh/svelte-multiselect/compare/v8.1.0...v8.2.0) | ||
> 30 November 2022 | ||
- Draggable selected options [`#178`](https://github.com/janosh/svelte-multiselect/pull/178) | ||
@@ -15,7 +28,5 @@ - Fix page navigation in GH pages, broken because served from non-apex domain [`#172`](https://github.com/janosh/svelte-multiselect/pull/172) | ||
- fix prop form_input: set default value null to make it optional [`b150fe0`](https://github.com/janosh/svelte-multiselect/commit/b150fe0032ebde82a319b23bd5e6b573e0c31721) | ||
- set aliveStatusCodes: [200, 429] in .github/workflows/link-check-config.json [`b34c7bf`](https://github.com/janosh/svelte-multiselect/commit/b34c7bf99d4afa96dcd3c9c322ab4e94b1ef3a39) | ||
- set `aliveStatusCodes: [200, 429]` in `.github/workflows/link-check-config.json` [`b34c7bf`](https://github.com/janosh/svelte-multiselect/commit/b34c7bf99d4afa96dcd3c9c322ab4e94b1ef3a39) | ||
- add changelog script to `package.json` [`c943617`](https://github.com/janosh/svelte-multiselect/commit/c9436171033e06e8098f4443ed40d48ddee35167) | ||
<!-- auto-changelog-above --> | ||
#### [v8.1.0](https://github.com/janosh/svelte-multiselect/compare/v8.0.4...v8.1.0) | ||
@@ -46,3 +57,3 @@ | ||
- Measure `vitest` coverage with `c8` [`#155`](https://github.com/janosh/svelte-multiselect/pull/155) | ||
- increase --sms-min-height 19->22pt [`5d0e081`](https://github.com/janosh/svelte-multiselect/commit/5d0e0815d0b488ae23b439a3f085dd083138c326) | ||
- increase --sms-min-height 19->`22pt [`5d0e081`](<https://github.com/janosh/svelte-multiselect/commit/5d0e0815d0b488ae23b439a3f085dd083138c326>) | ||
@@ -73,3 +84,3 @@ #### [v8.0.2](https://github.com/janosh/svelte-multiselect/compare/v8.0.1...v8.0.2) | ||
- `yarn` to `pnpm` [`#134`](https://github.com/janosh/svelte-multiselect/pull/134) | ||
- Rename prop `noOptionsMsg`->`noMatchingOptionsMsg` [`#133`](https://github.com/janosh/svelte-multiselect/pull/133) | ||
- Rename prop `noOptionsMsg -> noMatchingOptionsMsg` [`#133`](https://github.com/janosh/svelte-multiselect/pull/133) | ||
- remove props selectedLabels and selectedValues [`ef6598e`](https://github.com/janosh/svelte-multiselect/commit/ef6598e8b0dc1f2f8cb687074463cb73b2f9ebff) | ||
@@ -180,3 +191,3 @@ | ||
- Add new prop `parseLabelsAsHtml` [`#84`](https://github.com/janosh/svelte-multiselect/pull/84) | ||
- try fix flaky test 'multiselect > can select and remove many options' [`2b0c453`](https://github.com/janosh/svelte-multiselect/commit/2b0c453c794c0b3b82e81c5b994c10bc305a98d6) | ||
- try fix flaky test 'multiselect >`can select and remove many options' [`2b0c453`](<https://github.com/janosh/svelte-multiselect/commit/2b0c453c794c0b3b82e81c5b994c10bc305a98d6>) | ||
- bump netlify node to v18, update readme + deps [`586c724`](https://github.com/janosh/svelte-multiselect/commit/586c724d471aece2b5a3726bb5eb145e36073fe3) | ||
@@ -230,3 +241,3 @@ - remove plausible.js analytics [`cd4c9f6`](https://github.com/janosh/svelte-multiselect/commit/cd4c9f6e18e13959dfb4fcebe9acba7a875b83a2) | ||
- fix dropdown closing when clicking between list items (closes #61) [`#61`](https://github.com/janosh/svelte-multiselect/issues/61) | ||
- svelte.config.js add kit.prerender.default: true, mv src/{global,app}.d.ts [`4a84913`](https://github.com/janosh/svelte-multiselect/commit/4a8491380e08bad137ca7bdda9ee4ddd38abe3d6) | ||
- `svelte.config.js` add `kit.prerender.default: true`, `mv src/{global,app}.d.ts` [`4a84913`](https://github.com/janosh/svelte-multiselect/commit/4a8491380e08bad137ca7bdda9ee4ddd38abe3d6) | ||
@@ -270,3 +281,3 @@ #### [v4.0.2](https://github.com/janosh/svelte-multiselect/compare/v4.0.1...v4.0.2) | ||
- by default, only show maxSelectMsg if maxSelect != null and > 1 (closes #37) [`#37`](https://github.com/janosh/svelte-multiselect/issues/37) | ||
- by default, only show maxSelectMsg if maxSelect != null and >`1 (closes #37) [`#37`](<https://github.com/janosh/svelte-multiselect/issues/37>) | ||
- add CSS var --sms-options-shadow defaults to subtle black shadow around dropdown list (0 0 14pt -8pt black) (closes #36) [`#36`](https://github.com/janosh/svelte-multiselect/issues/36) | ||
@@ -303,3 +314,3 @@ - add prop liActiveOptionClass = '' (closes #35) [`#35`](https://github.com/janosh/svelte-multiselect/issues/35) | ||
- apply id prop to <input> instead of outer div (closes #25) [`#25`](https://github.com/janosh/svelte-multiselect/issues/25) | ||
- apply id prop to `<input>` instead of outer div (closes #25) [`#25`](https://github.com/janosh/svelte-multiselect/issues/25) | ||
- add eslint commit hook + update deps [`6ad44b8`](https://github.com/janosh/svelte-multiselect/commit/6ad44b85057aef71eae19293de80f9d42f91f87b) | ||
@@ -314,3 +325,3 @@ - v.3.2.0 [`71ff2d1`](https://github.com/janosh/svelte-multiselect/commit/71ff2d192caccacbe41f83949c14d7d4ca87d590) | ||
- wiggle the maxSelect msg on hitting selection limit (closes #19) [`#19`](https://github.com/janosh/svelte-multiselect/issues/19) | ||
- readme better docs for CSS variables, rename slots {options,selected}Renderer -> render{options,selected} [`c8ab724`](https://github.com/janosh/svelte-multiselect/commit/c8ab7241506cfe6b5930d098150a251e85c52afd) | ||
- readme better docs for CSS variables, rename slots `{options,selected}Renderer -> render{options,selected}` [`c8ab724`](https://github.com/janosh/svelte-multiselect/commit/c8ab7241506cfe6b5930d098150a251e85c52afd) | ||
@@ -356,3 +367,3 @@ #### [v3.1.0](https://github.com/janosh/svelte-multiselect/compare/v3.0.1...v3.1.0) | ||
- set <input> width back to 1pt as it's only needed to tab into, focus and blur <MultiSelect> (closes #12) [`#12`](https://github.com/janosh/svelte-multiselect/issues/12) | ||
- set `<input>` width back to 1pt as it's only needed to tab into, focus and blur `<MultiSelect>` (closes #12) [`#12`](https://github.com/janosh/svelte-multiselect/issues/12) | ||
- update readme [`45c7993`](https://github.com/janosh/svelte-multiselect/commit/45c7993398c986499d4c0729177620cbec719cb7) | ||
@@ -359,0 +370,0 @@ |
@@ -8,3 +8,3 @@ { | ||
"license": "MIT", | ||
"version": "8.2.0", | ||
"version": "8.2.1", | ||
"type": "module", | ||
@@ -11,0 +11,0 @@ "svelte": "index.js", |
@@ -9,3 +9,3 @@ <h1 align="center"> | ||
[![Tests](https://github.com/janosh/svelte-multiselect/actions/workflows/test.yml/badge.svg)](https://github.com/janosh/svelte-multiselect/actions/workflows/test.yml) | ||
[![Docs](https://github.com/janosh/svelte-multiselect/actions/workflows/docs.yml/badge.svg)](https://github.com/janosh/svelte-multiselect/actions/workflows/docs.yml) | ||
[![GitHub Pages](https://github.com/janosh/svelte-multiselect/actions/workflows/gh-pages.yml/badge.svg)](https://github.com/janosh/svelte-multiselect/actions/workflows/gh-pages.yml) | ||
[![NPM version](https://img.shields.io/npm/v/svelte-multiselect?logo=NPM&color=purple)](https://npmjs.com/package/svelte-multiselect) | ||
@@ -25,3 +25,3 @@ [![Needs Svelte version](https://img.shields.io/npm/dependency-version/svelte-multiselect/dev/svelte?color=teal&logo=Svelte&label=Svelte)](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md) | ||
## Features | ||
## 💡 Features | ||
@@ -35,7 +35,7 @@ - **Bindable:** `bind:selected` gives you an array of the currently selected options. Thanks to Svelte's 2-way binding, it can also control the component state externally through assignment `selected = ['foo', 42]`. | ||
- **Single / multiple select:** pass `maxSelect={1, 2, 3, ...}` prop to restrict the number of selectable options | ||
- **Configurable:** see [props](#props) | ||
- **Configurable:** see props | ||
<slot name="nav" /> | ||
## Recent breaking changes | ||
## 📜 Breaking changes | ||
@@ -48,3 +48,3 @@ - **6.1.0** The `dispatch` events `focus` and `blur` were renamed to `open` and `close`, respectively. These actions refer to the dropdown list, i.e. `<MultiSelect on:open={(event) => console.log(event)}>` will trigger when the dropdown list opens. The focus and blur events are now regular DOM (not Svelte `dispatch`) events emitted by the `<input>` node. [PR 120](https://github.com/janosh/svelte-multiselect/pull/120). | ||
## Installation | ||
## 🔨 Installation | ||
@@ -57,5 +57,5 @@ ```sh | ||
## Usage | ||
## 📙 Usage | ||
```html | ||
```svelte | ||
<script> | ||
@@ -69,3 +69,3 @@ import MultiSelect from 'svelte-multiselect' | ||
Favorite Frontend tools? | ||
Favorite Frontend Tools? | ||
@@ -77,3 +77,3 @@ <code>selected = {JSON.stringify(selected)}</code> | ||
## Props | ||
## 🔣 Props | ||
@@ -354,3 +354,3 @@ Full list of props/bindable variables for this component. The `Option` type you see below is defined in [`src/lib/index.ts`](https://github.com/janosh/svelte-multiselect/blob/main/src/lib/index.ts) and can be imported as `import { type Option } from 'svelte-multiselect'`. | ||
## Slots | ||
## 🎰 Slots | ||
@@ -367,3 +367,3 @@ `MultiSelect.svelte` has 3 named slots: | ||
```html | ||
```svelte | ||
<MultiSelect options={[`Red`, `Green`, `Blue`, `Yellow`, `Purple`]}> | ||
@@ -387,3 +387,3 @@ <span let:idx let:option slot="option"> | ||
## Events | ||
## 🎬 Events | ||
@@ -430,3 +430,3 @@ `MultiSelect.svelte` dispatches the following events: | ||
```html | ||
```svelte | ||
<MultiSelect | ||
@@ -445,3 +445,3 @@ on:change={(e) => { | ||
```html | ||
```svelte | ||
<MultiSelect | ||
@@ -453,7 +453,7 @@ options={[1, 2, 3]} | ||
## TypeScript | ||
## 🦺 TypeScript | ||
TypeScript users can import the types used for internal type safety: | ||
```html | ||
```svelte | ||
<script lang="ts"> | ||
@@ -472,7 +472,7 @@ import MultiSelect from 'svelte-multiselect' | ||
## Styling | ||
## ✨ Styling | ||
There are 3 ways to style this component. To understand which options do what, it helps to keep in mind this simplified DOM structure of the component: | ||
```html | ||
```svelte | ||
<div class="multiselect"> | ||
@@ -539,3 +539,3 @@ <ul class="selected"> | ||
```html | ||
```svelte | ||
<MultiSelect --sms-options-bg="white" /> | ||
@@ -558,3 +558,3 @@ ``` | ||
```html | ||
```svelte | ||
<div class="multiselect {outerDivClass}"> | ||
@@ -578,3 +578,3 @@ <input class={inputClass} /> | ||
Odd as it may seem, you get the most fine-grained control over the styling of every part of this component by using the following `:global()` CSS selectors. `ul.selected` is the list of currently selected options rendered inside the component's input whereas `ul.options` is the list of available options that slides out when the component is in its `open` state. See also [simplified DOM structure](#styling). | ||
Odd as it may seem, you get the most fine-grained control over the styling of every part of this component by using the following `:global()` CSS selectors. `ul.selected` is the list of currently selected options rendered inside the component's input whereas `ul.options` is the list of available options that slides out when the component is in its `open` state. See also [simplified DOM structure](#--styling). | ||
@@ -627,4 +627,8 @@ ```css | ||
## Want to contribute to this project? | ||
## 🆕 Changelog | ||
[Here are some steps](https://github.com/janosh/svelte-multiselect/blob/main/contributing.md) to get you started! | ||
[View the changelog](changelog.md). | ||
## 🙏 Contributing | ||
Here are some steps to [get you started](contributing.md) if you'd like to contribute to this project! |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
101131
617