Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

svelte-multiselect

Package Overview
Dependencies
Maintainers
1
Versions
76
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

svelte-multiselect - npm Package Compare versions

Comparing version 8.6.2 to 9.0.0

7

dist/CmdPalette.svelte.d.ts

@@ -9,3 +9,4 @@ import { SvelteComponentTyped } from "svelte";

}[];
trigger?: string | undefined;
triggers?: string[] | undefined;
close_keys?: string[] | undefined;
fade_duration?: number | undefined;

@@ -23,5 +24,3 @@ style?: string | undefined;

slots: {
option: {
slot: string;
};
default: {};
};

@@ -28,0 +27,0 @@ };

@@ -68,2 +68,6 @@ import { SvelteComponentTyped } from "svelte";

};
default: {
option: Option;
idx: any;
};
'remove-icon': {};

@@ -70,0 +74,0 @@ spinner: {};

@@ -8,3 +8,3 @@ {

"license": "MIT",
"version": "8.6.2",
"version": "9.0.0",
"type": "module",

@@ -23,19 +23,19 @@ "svelte": "./dist/index.js",

"test:e2e": "playwright test tests/*.test.ts",
"changelog": "npx auto-changelog --package --output changelog.md --unreleased-only --hide-credit --commit-limit false",
"changelog": "npx auto-changelog --package --output changelog.md --hide-empty-releases --hide-credit --commit-limit false",
"update-coverage": "vitest tests/unit --run --coverage && npx istanbul-badges-readme"
},
"dependencies": {
"svelte": "^3.59.1"
"svelte": "^4.0.0-next.0"
},
"devDependencies": {
"@iconify/svelte": "^3.1.3",
"@playwright/test": "^1.33.0",
"@playwright/test": "^1.34.3",
"@sveltejs/adapter-static": "^2.0.2",
"@sveltejs/kit": "^1.16.3",
"@sveltejs/kit": "^1.19.0",
"@sveltejs/package": "2.0.2",
"@sveltejs/vite-plugin-svelte": "^2.2.0",
"@typescript-eslint/eslint-plugin": "^5.59.5",
"@typescript-eslint/parser": "^5.59.5",
"@vitest/coverage-c8": "^0.31.0",
"eslint": "^8.40.0",
"@sveltejs/vite-plugin-svelte": "1.0.0-next.29",
"@typescript-eslint/eslint-plugin": "^5.59.7",
"@typescript-eslint/parser": "^5.59.7",
"@vitest/coverage-c8": "^0.31.1",
"eslint": "^8.41.0",
"eslint-plugin-svelte3": "^4.0.0",

@@ -51,10 +51,10 @@ "hastscript": "^7.2.0",

"rehype-slug": "^5.1.0",
"svelte-check": "^3.3.2",
"svelte-check": "^3.4.2",
"svelte-preprocess": "^5.0.3",
"svelte-toc": "^0.5.5",
"svelte-zoo": "^0.4.5",
"svelte2tsx": "^0.6.14",
"svelte-zoo": "^0.4.6",
"svelte2tsx": "^0.6.15",
"typescript": "5.0.4",
"vite": "^4.3.6",
"vitest": "^0.31.0"
"vite": "^4.3.9",
"vitest": "^0.31.1"
},

@@ -61,0 +61,0 @@ "keywords": [

@@ -39,13 +39,25 @@ <h1 align="center">

| Statements | Branches | Lines |
| ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------- |
| ![Statements](https://img.shields.io/badge/statements-92.95%25-brightgreen.svg?style=flat) | ![Branches](https://img.shields.io/badge/branches-100%25-brightgreen.svg?style=flat) | ![Lines](https://img.shields.io/badge/lines-92.95%25-brightgreen.svg?style=flat) |
| Statements | Branches | Lines |
| ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | -------------------------------------------------------------------------------- |
| ![Statements](https://img.shields.io/badge/statements-97.94%25-brightgreen.svg?style=flat) | ![Branches](https://img.shields.io/badge/branches-79.39%25-red.svg?style=flat) | ![Lines](https://img.shields.io/badge/lines-97.94%25-brightgreen.svg?style=flat) |
## 📜 &thinsp; Breaking changes
- **8.0.0**&nbsp;
- **8.0.0** (2022-10-22)&nbsp;
- Props `selectedLabels` and `selectedValues` were removed. If you were using them, they were equivalent to assigning `bind:selected` to a local variable and then running `selectedLabels = selected.map(option => option.label)` and `selectedValues = selected.map(option => option.value)` if your options were objects with `label` and `value` keys. If they were simple strings/numbers, there was no point in using `selected{Labels,Values}` anyway. [PR 138](https://github.com/janosh/svelte-multiselect/pull/138)
- Prop `noOptionsMsg` was renamed to `noMatchingOptionsMsg`. [PR 133](https://github.com/janosh/svelte-multiselect/pull/133).
- **v8.3.0**&nbsp; `addOptionMsg` was renamed to `createOptionMsg` (no major since version since it's rarely used) [sha](https://github.com/janosh/svelte-multiselect/commits).
- **v8.3.0** (2023-01-25)&nbsp; `addOptionMsg` was renamed to `createOptionMsg` (no major since version since it's rarely used) [sha](https://github.com/janosh/svelte-multiselect/commits).
- **v9.0.0** (2023-06-01)&nbsp; Svelte bumped from v3 to v4. Also, not breaking but noteworthy: MultiSelect received a default slot that functions as both `"option"` and `"selected"`. If you previously had two identical slots for `"option"` and `"selected"`, you can now remove the `name` from one of them and drop the other:
```diff
<MultiSelect
{options}
+ let:option
>
- <SlotComponent let:option {option} slot="selected" />
- <SlotComponent let:option {option} slot="option" />
+ <SlotComponent {option} />
</MultiSelect>
```
## 🔨 &thinsp; Installation

@@ -193,3 +205,3 @@

Whether to highlight text in the dropdown options that matches the current user-entered search query. Uses the [CSS Custom Highlight API](https://developer.mozilla.org/docs/Web/API/CSS_Custom_Highlight_API) with limited browser support and [styling options](https://developer.mozilla.org/docs/Web/CSS/::highlight). See `::highlight(sms-search-matches)` below for available CSS variables.
Whether to highlight text in the dropdown options that matches the current user-entered search query. Uses the [CSS Custom Highlight API](https://developer.mozilla.org/docs/Web/API/CSS_Custom_Highlight_API) with [limited browser support](https://caniuse.com/mdn-api_css_highlights) (70% as of May 2023) and [styling options](https://developer.mozilla.org/docs/Web/CSS/::highlight). See `::highlight(sms-search-matches)` below for available CSS variables.

@@ -380,4 +392,5 @@ 1. ```ts

```svelte
<MultiSelect options={[`Red`, `Green`, `Blue`, `Yellow`, `Purple`]}>
<span let:idx let:option slot="option">
<MultiSelect options={[`Red`, `Green`, `Blue`, `Yellow`, `Purple`]} let:idx let:option>
<!-- default slot overrides rendering of both dropdown-listed and selected options -->
<span>
{idx + 1}

@@ -388,8 +401,2 @@ {option.label}

<span let:idx let:option slot="selected">
{idx + 1}
{option.label}
<span style:background={option.label} style=" width: 1em; height: 1em;" />
</span>
<CustomSpinner slot="spinner">

@@ -396,0 +403,0 @@ <strong slot="remove-icon">X</strong>

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc