svelte-multiselect
Advanced tools
svelte-multiselect - npm Package Compare versions
Comparing version 3.2.3 to 3.3.0
@@ -8,4 +8,6 @@ import { SvelteComponentTyped } from "svelte"; | ||
| selectedValues?: Primitive[] | undefined; | ||
| searchText?: string | undefined; | ||
| showOptions?: boolean | undefined; | ||
| maxSelect?: number | null | undefined; | ||
| maxSelectMsg?: ((current: number, max: number) => string) | undefined; | ||
| maxSelectMsg?: ((current: number, max: number) => string) | null | undefined; | ||
| readonly?: boolean | undefined; | ||
@@ -25,2 +27,3 @@ options: ProtoOption[]; | ||
| liOptionClass?: string | undefined; | ||
| liActiveOptionClass?: string | undefined; | ||
| removeBtnTitle?: string | undefined; | ||
@@ -27,0 +30,0 @@ removeAllTitle?: string | undefined; |
@@ -8,3 +8,3 @@ { | ||
| "license": "MIT", | ||
| "version": "3.2.3", | ||
| "version": "3.3.0", | ||
| "type": "module", | ||
@@ -15,3 +15,3 @@ "svelte": "index.js", | ||
| "@sveltejs/adapter-static": "^1.0.0-next.28", | ||
| "@sveltejs/kit": "^1.0.0-next.269", | ||
| "@sveltejs/kit": "^1.0.0-next.278", | ||
| "@typescript-eslint/eslint-plugin": "^5.12.0", | ||
@@ -28,10 +28,10 @@ "@typescript-eslint/parser": "^5.12.0", | ||
| "svelte": "^3.46.4", | ||
| "svelte-check": "^2.4.3", | ||
| "svelte-check": "^2.4.5", | ||
| "svelte-github-corner": "^0.1.0", | ||
| "svelte-preprocess": "^4.10.3", | ||
| "svelte-toc": "^0.2.5", | ||
| "svelte2tsx": "^0.5.3", | ||
| "svelte-toc": "^0.2.6", | ||
| "svelte2tsx": "^0.5.5", | ||
| "tslib": "^2.3.1", | ||
| "typescript": "^4.5.5", | ||
| "vite": "^2.8.2" | ||
| "vite": "^2.8.4" | ||
| }, | ||
@@ -38,0 +38,0 @@ "keywords": [ |
@@ -91,15 +91,18 @@ <h1 align="center"> | ||
| <!-- prettier-ignore --> | ||
| | name | default | description | | ||
| | :--------------- | :------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | `options` | required prop | Array of strings/numbers or `Option` objects that will be listed in the dropdown. See `src/lib/index.ts` for admissible fields. The `label` is the only mandatory one. It must also be unique. | | ||
| | `activeOption` | `null` | Currently active option, i.e. the one the user currently hovers or navigated to with arrow keys. | | ||
| | `maxSelect` | `null` | Positive integer to limit the number of options users can pick. `null` means no limit. | | ||
| | `selected` | `[]` | Array of currently/pre-selected options when binding/passing as props respectively. | | ||
| | `selectedLabels` | `[]` | Labels of currently selected options. | | ||
| | `selectedValues` | `[]` | Values of currently selected options. | | ||
| | `readonly` | `false` | Disable the component. It will still be rendered but users won't be able to interact with it. | | ||
| | `placeholder` | `undefined` | String shown in the text input when no option is selected. | | ||
| | `input` | `undefined` | Handle to the `<input>` DOM node. | | ||
| | `id` | `undefined` | Applied to the `<input>` element for associating HTML form `<label>`s with this component for accessibility. Also, clicking a `<label>` with same `for` attribute as `id` will focus this component. | | ||
| | `name` | `id` | Applied to the `<input>` element. If not provided, will be set to the value of `id`. Sets the key of this field in a submitted form data object. Not useful at the moment since the value is stored in Svelte state, not on the `<input>`. | | ||
| | name | default | description | | ||
| | :--------------- | :---------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | `options` | required prop | Array of strings/numbers or `Option` objects that will be listed in the dropdown. See `src/lib/index.ts` for admissible fields. The `label` is the only mandatory one. It must also be unique. | | ||
| | `showOptions` | `false` | Bindable boolean that controls whether the options dropdown is visible. | | ||
| | `searchText` | `` | Text the user-entered to filter down on the list of options. Binds both ways, i.e. can also be used to set the input text. | | ||
| | `activeOption` | `null` | Currently active option, i.e. the one the user currently hovers or navigated to with arrow keys. | | ||
| | `maxSelect` | `null` | Positive integer to limit the number of options users can pick. `null` means no limit. | | ||
| | `selected` | `[]` | Array of currently/pre-selected options when binding/passing as props respectively. | | ||
| | `selectedLabels` | `[]` | Labels of currently selected options. | | ||
| | `selectedValues` | `[]` | Values of currently selected options. | | ||
| | `noOptionsMsg` | `'No matching options'` | What message to show if no options match the user-entered search string. | | ||
| | `readonly` | `false` | Disable the component. It will still be rendered but users won't be able to interact with it. | | ||
| | `placeholder` | `undefined` | String shown in the text input when no option is selected. | | ||
| | `input` | `undefined` | Handle to the `<input>` DOM node. | | ||
| | `id` | `undefined` | Applied to the `<input>` element for associating HTML form `<label>`s with this component for accessibility. Also, clicking a `<label>` with same `for` attribute as `id` will focus this component. | | ||
| | `name` | `id` | Applied to the `<input>` element. If not provided, will be set to the value of `id`. Sets the key of this field in a submitted form data object. Not useful at the moment since the value is stored in Svelte state, not on the `<input>`. | | ||
@@ -119,3 +122,3 @@ </div> | ||
| 2. `maxSelectMsg = (current: number, max: number) => string`: Inform the user how many of the maximum allowed options they have currently selected. Return empty string to disable, i.e. `() => ''`. Is automatically disabled when `maxSelect === null`. Defaults to: | ||
| 2. `maxSelectMsg = (current: number, max: number) => string`: Inform users how many of the maximum allowed options they have already selected. Set `maxSelectMsg={null}` to not show a message. Defaults to `null` when `maxSelect={1}` or `maxSelect={null}`. Else if `maxSelect > 1`, defaults to: | ||
@@ -236,2 +239,3 @@ ```ts | ||
| - `overscroll-behavior: var(--sms-options-overscroll, none)`: Whether scroll events bubble to parent elements when reaching the top/bottom of the options dropdown. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior). | ||
| - `box-shadow: var(--sms-options-shadow, 0 0 14pt -8pt black);`: Box shadow of dropdown list. | ||
| - `div.multiselect > ul.options > li.selected` | ||
@@ -264,2 +268,3 @@ - `border-left: var(--sms-li-selected-border-left, 3pt solid var(--sms-selected-color, green))` | ||
| - `liOptionClass` | ||
| - `liActiveOptionClass` | ||
@@ -276,3 +281,5 @@ This simplified version of the DOM structure of this component shows where these classes are inserted: | ||
| <li class={liOptionClass}>Option 1</li> | ||
| <li class={liOptionClass}>Option 2</li> | ||
| <li class="{liOptionClass} {liActiveOptionClass}"> | ||
| Option 2 (currently active) | ||
| </li> | ||
| </ul> | ||
@@ -279,0 +286,0 @@ </div> |
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.95%
43037
- Lines of code
- increased by1.78%
172
- Number of lines in readme file
- increased by2.08%
344
No dependency changes