svelte-multiselect
Advanced tools
svelte-multiselect - npm Package Compare versions
Comparing version 5.0.6 to 6.0.0
@@ -35,2 +35,2 @@ export { default } from './MultiSelect.svelte'; | ||
| export declare const get_label: (op: Option) => string | number; | ||
| export declare const get_value: (op: Option) => unknown; | ||
| export declare const get_value: (op: Option) => {}; |
@@ -6,3 +6,3 @@ import { SvelteComponentTyped } from "svelte"; | ||
| searchText?: string | undefined; | ||
| showOptions?: boolean | undefined; | ||
| open?: boolean | undefined; | ||
| maxSelect?: number | null | undefined; | ||
@@ -24,3 +24,6 @@ maxSelectMsg?: ((current: number, max: number) => string) | null | undefined; | ||
| activeOption?: Option | null | undefined; | ||
| activeIndex?: number | null | undefined; | ||
| filterFunc?: ((op: Option, searchText: string) => boolean) | undefined; | ||
| focusInputOnSelect?: boolean | "desktop" | undefined; | ||
| breakpoint?: number | undefined; | ||
| outerDivClass?: string | undefined; | ||
@@ -27,0 +30,0 @@ ulSelectedClass?: string | undefined; |
@@ -8,3 +8,3 @@ { | ||
| "license": "MIT", | ||
| "version": "5.0.6", | ||
| "version": "6.0.0", | ||
| "type": "module", | ||
@@ -15,9 +15,11 @@ "svelte": "index.js", | ||
| "devDependencies": { | ||
| "@playwright/test": "^1.24.1", | ||
| "@sveltejs/adapter-static": "^1.0.0-next.38", | ||
| "@sveltejs/kit": "^1.0.0-next.396", | ||
| "@sveltejs/vite-plugin-svelte": "^1.0.1", | ||
| "@typescript-eslint/eslint-plugin": "^5.31.0", | ||
| "@typescript-eslint/parser": "^5.31.0", | ||
| "eslint": "^8.20.0", | ||
| "@playwright/test": "^1.25.1", | ||
| "@sveltejs/adapter-netlify": "^1.0.0-next.76", | ||
| "@sveltejs/adapter-static": "^1.0.0-next.41", | ||
| "@sveltejs/kit": "^1.0.0-next.465", | ||
| "@sveltejs/package": "^1.0.0-next.3", | ||
| "@sveltejs/vite-plugin-svelte": "^1.0.4", | ||
| "@typescript-eslint/eslint-plugin": "^5.36.1", | ||
| "@typescript-eslint/parser": "^5.36.1", | ||
| "eslint": "^8.23.0", | ||
| "eslint-plugin-svelte3": "^4.0.0", | ||
@@ -31,12 +33,12 @@ "hastscript": "^7.0.2", | ||
| "rehype-slug": "^5.0.1", | ||
| "svelte": "^3.49.0", | ||
| "svelte-check": "^2.8.0", | ||
| "svelte": "^3.50.0", | ||
| "svelte-check": "^2.9.0", | ||
| "svelte-github-corner": "^0.1.0", | ||
| "svelte-preprocess": "^4.10.6", | ||
| "svelte-toc": "^0.2.10", | ||
| "svelte2tsx": "^0.5.13", | ||
| "svelte2tsx": "^0.5.16", | ||
| "tslib": "^2.4.0", | ||
| "typescript": "^4.7.4", | ||
| "vite": "^3.0.4", | ||
| "vitest": "^0.19.1" | ||
| "typescript": "^4.8.2", | ||
| "vite": "^3.1.0-beta.2", | ||
| "vitest": "^0.22.1" | ||
| }, | ||
@@ -43,0 +45,0 @@ "keywords": [ |
@@ -8,3 +8,2 @@ <h1 align="center"> | ||
| [](https://svelte.dev/repl/a5a14b8f15d64cb083b567292480db05) | ||
| [](https://github.com/janosh/svelte-multiselect/actions/workflows/test.yml) | ||
@@ -14,2 +13,4 @@ [](https://app.netlify.com/sites/svelte-multiselect/deploys) | ||
| [](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md) | ||
| [](https://svelte.dev/repl/a5a14b8f15d64cb083b567292480db05) | ||
| [](https://stackblitz.com/github/janosh/svelte-multiselect) | ||
@@ -19,5 +20,5 @@ </h4> | ||
| **Keyboard-friendly, accessible and highly customizable multi-select component.** | ||
| <strong class="hide-in-docs"> | ||
| <a href="https://svelte-multiselect.netlify.app">Docs</a> | ||
| </strong> | ||
| <span class="hide-in-docs"> | ||
| <a href="https://svelte-multiselect.netlify.app">View the docs</a> | ||
| </span> | ||
@@ -41,8 +42,5 @@ <slot name="examples" /> | ||
| - v4.0.1 renamed the `readonly` prop to `disabled` which now prevents all form of user interaction with this component including opening the dropdown list which was still possible before. See [#45](https://github.com/janosh/svelte-multiselect/issues/45) for details. The associated CSS class applied to the outer `div` was likewise renamed `div.multiselect.{readonly=>disabled}`. | ||
| - v5.0.0 Supports both simple and object options. Previously strings and numbers were converted to `{ value, label }` objects internally and returned by `bind:selected`. Now, if you pass in `string[]`, that's exactly what you'll get from `bind:selected`. | ||
| - v6.0.0 The prop `showOptions` which controls whether the list of dropdown options is currently open or closed was renamed to just `open`. | ||
| - v4.0.3 CSS variables starting with `--sms-input-<attr>` were renamed to just `--sms-<attr>`. E.g. `--sms-input-min-height` is now `--sms-min-height`. | ||
| - v5.0.0 Support both simple and object options. Previously strings and numbers were converted to `{ value, label }` objects internally and returned by `bind:selected`. Now, if you pass in `string[]`, that's exactly what you'll get from `bind:selected`. | ||
| ## Installation | ||
@@ -87,2 +85,3 @@ | ||
| | `activeOption` | `null` | Currently active option, i.e. the one the user currently hovers or navigated to with arrow keys. | | ||
| | `activeIndex` | `null` | Zero-based index of currently active option in the array of currently matching options, i.e. if the user typed a search string into the input and only a subset of options match, this index refers to the array position of the matching subset of options | | ||
| | `maxSelect` | `null` | Positive integer to limit the number of options users can pick. `null` means no limit. | | ||
@@ -113,2 +112,4 @@ | `selected` | `[]` | Array of currently selected options. Can be bound to `bind:selected={[1, 2, 3]}` to control component state externally or passed as prop to set pre-selected options that will already be populated when component mounts before any user interaction. | | ||
| | `invalid` | `false` | If `required=true` and user tries to submit but `selected = []` is empty, `invalid` is automatically set to `true` and CSS class `invalid` applied to the top-level `div.multiselect`. `invalid` class is removed again as soon as the user selects an option. `invalid` can also be controlled externally by binding to it `<MultiSelect bind:invalid />` and setting it to `true` based on outside events or custom validation. | | ||
| | `focusInputOnSelect` | `'desktop'` | One of `true`, `false` or `'desktop'`. Whether to set the cursor back to the input element after selecting an element. 'desktop' means only do so if current window width is larger than the current value of `breakpoint` prop (default 800). | | ||
| | `breakpoint` | `800` | Screens wider than `breakpoint` in pixels will be considered `'desktop'`, everything narrower as `'mobile'`. | | ||
@@ -201,12 +202,10 @@ </div> | ||
| <script lang="ts"> | ||
| import MultiSelect, { | ||
| Option, | ||
| Primitive, | ||
| ProtoOption, | ||
| } from 'svelte-multiselect' | ||
| import MultiSelect, { Option, ObjectOption } from 'svelte-multiselect' | ||
| const myOptions: Option[] = [ | ||
| const myOptions: ObjectOption[] = [ | ||
| { label: 'foo', value: 42 }, | ||
| { label: 'bar', value: 69 }, | ||
| ] | ||
| // an Option can be string | number | ObjectOption | ||
| const myNumbers: Option[] = [42, 69] | ||
| </script> | ||
@@ -401,4 +400,4 @@ ``` | ||
| cd svelte-multiselect | ||
| yarn | ||
| yarn dev | ||
| npm install | ||
| npm run dev | ||
| ``` |
Sorry, the diff of this file is not supported yet
New alerts
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
Fixed alerts
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
Improved metrics
- Total package byte prevSize
- increased by3.06%
67993
- Lines of code
- increased by1.12%
272
Worsened metrics
- Dev dependency count
- increased by8%
27
- Number of lines in readme file
- decreased by-0.25%
396