svelte-multiselect
Advanced tools
Comparing version 8.6.0 to 8.6.1
@@ -14,4 +14,4 @@ import { SvelteComponentTyped } from "svelte"; | ||
open?: boolean | undefined; | ||
dialog: HTMLDialogElement; | ||
input: HTMLInputElement; | ||
dialog?: HTMLDialogElement | null | undefined; | ||
input?: HTMLInputElement | null | undefined; | ||
placeholder?: string | undefined; | ||
@@ -18,0 +18,0 @@ }; |
export { default as CircleSpinner } from './CircleSpinner.svelte'; | ||
export { default as CmdPalette } from './CmdPalette.svelte'; | ||
export { default, default as MultiSelect } from './MultiSelect.svelte'; | ||
export { default as MultiSelect, default } from './MultiSelect.svelte'; | ||
export { default as Wiggle } from './Wiggle.svelte'; | ||
@@ -5,0 +5,0 @@ export type Option = string | number | ObjectOption; |
export { default as CircleSpinner } from './CircleSpinner.svelte'; | ||
export { default as CmdPalette } from './CmdPalette.svelte'; | ||
export { default, default as MultiSelect } from './MultiSelect.svelte'; | ||
export { default as MultiSelect, default } from './MultiSelect.svelte'; | ||
export { default as Wiggle } from './Wiggle.svelte'; | ||
// Firefox lacks support for scrollIntoViewIfNeeded, see | ||
// https://github.com/janosh/svelte-multiselect/issues/87 | ||
// this polyfill was copied from | ||
// Firefox lacks support for scrollIntoViewIfNeeded (https://caniuse.com/scrollintoviewifneeded). | ||
// See https://github.com/janosh/svelte-multiselect/issues/87 | ||
// Polyfill copied from | ||
// https://github.com/nuxodin/lazyfill/blob/a8e63/polyfills/Element/prototype/scrollIntoViewIfNeeded.js | ||
// exported for testing | ||
export function scroll_into_view_if_needed_polyfill(centerIfNeeded = true) { | ||
const el = this; | ||
const elem = this; | ||
const observer = new IntersectionObserver(function ([entry]) { | ||
@@ -16,3 +16,3 @@ const ratio = entry.intersectionRatio; | ||
const place = ratio <= 0 && centerIfNeeded ? `center` : `nearest`; | ||
el.scrollIntoView({ | ||
elem.scrollIntoView({ | ||
block: place, | ||
@@ -24,3 +24,3 @@ inline: place, | ||
}); | ||
observer.observe(this); | ||
observer.observe(elem); | ||
return observer; // return for testing | ||
@@ -27,0 +27,0 @@ } |
import { SvelteComponentTyped } from "svelte"; | ||
import type { MultiSelectEvents, Option as GenericOption } from './'; | ||
import type { Option as GenericOption, MultiSelectEvents } from './'; | ||
declare class __sveltets_Render<Option extends GenericOption> { | ||
@@ -4,0 +4,0 @@ props(): { |
@@ -8,3 +8,3 @@ { | ||
"license": "MIT", | ||
"version": "8.6.0", | ||
"version": "8.6.1", | ||
"type": "module", | ||
@@ -27,33 +27,33 @@ "svelte": "./dist/index.js", | ||
"dependencies": { | ||
"svelte": "^3.57.0" | ||
"svelte": "^3.58.0" | ||
}, | ||
"devDependencies": { | ||
"@iconify/svelte": "^3.1.0", | ||
"@playwright/test": "^1.31.2", | ||
"@sveltejs/adapter-static": "^2.0.1", | ||
"@sveltejs/kit": "^1.12.0", | ||
"@iconify/svelte": "^3.1.3", | ||
"@playwright/test": "^1.33.0", | ||
"@sveltejs/adapter-static": "^2.0.2", | ||
"@sveltejs/kit": "^1.15.9", | ||
"@sveltejs/package": "2.0.2", | ||
"@sveltejs/vite-plugin-svelte": "^2.0.3", | ||
"@typescript-eslint/eslint-plugin": "^5.55.0", | ||
"@typescript-eslint/parser": "^5.55.0", | ||
"@vitest/coverage-c8": "^0.29.3", | ||
"eslint": "^8.36.0", | ||
"@sveltejs/vite-plugin-svelte": "^2.1.1", | ||
"@typescript-eslint/eslint-plugin": "^5.59.1", | ||
"@typescript-eslint/parser": "^5.59.1", | ||
"@vitest/coverage-c8": "^0.30.1", | ||
"eslint": "^8.39.0", | ||
"eslint-plugin-svelte3": "^4.0.0", | ||
"hastscript": "^7.2.0", | ||
"highlight.js": "^11.7.0", | ||
"highlight.js": "^11.8.0", | ||
"jsdom": "^21.1.1", | ||
"mdsvex": "^0.10.6", | ||
"mdsvexamples": "^0.3.3", | ||
"prettier": "^2.8.4", | ||
"prettier-plugin-svelte": "^2.9.0", | ||
"prettier": "^2.8.8", | ||
"prettier-plugin-svelte": "^2.10.0", | ||
"rehype-autolink-headings": "^6.1.1", | ||
"rehype-slug": "^5.1.0", | ||
"svelte-check": "^3.1.4", | ||
"svelte-check": "^3.2.0", | ||
"svelte-preprocess": "^5.0.3", | ||
"svelte-toc": "^0.5.4", | ||
"svelte-zoo": "^0.4.3", | ||
"svelte2tsx": "^0.6.10", | ||
"typescript": "5.0.2", | ||
"vite": "^4.2.0", | ||
"vitest": "^0.29.3" | ||
"svelte-toc": "^0.5.5", | ||
"svelte-zoo": "^0.4.5", | ||
"svelte2tsx": "^0.6.11", | ||
"typescript": "5.0.4", | ||
"vite": "^4.3.3", | ||
"vitest": "^0.30.1" | ||
}, | ||
@@ -60,0 +60,0 @@ "keywords": [ |
@@ -192,3 +192,3 @@ <h1 align="center"> | ||
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(search-results)` 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 and [styling options](https://developer.mozilla.org/docs/Web/CSS/::highlight). See `::highlight(sms-search-matches)` below for available CSS variables. | ||
@@ -530,3 +530,3 @@ 1. ```ts | ||
- `div.multiselect:focus-within` | ||
- `border: var(--sms-focus-border, 1pt solid var(--sms-active-color, cornflowerblue))`: Border when component has focus. Defaults to `--sms-active-color` if not set which defaults to `cornflowerblue`. | ||
- `border: var(--sms-focus-border, 1pt solid var(--sms-active-color, cornflowerblue))`: Border when component has focus. Defaults to `--sms-active-color` which in turn defaults to `cornflowerblue`. | ||
- `div.multiselect.disabled` | ||
@@ -564,8 +564,12 @@ - `background: var(--sms-disabled-bg, lightgray)`: Background when in disabled state. | ||
- `color: var(--sms-li-disabled-text, #b8b8b8)`: Text color of disabled option in the dropdown list. | ||
- `::highlight(search-results)`: applies to search results in dropdown list that match the current search query if `highlightMatches=true` | ||
- `color: var(--sms-highlight-color, orange)` | ||
- `background: var(--sms-highlight-bg)` | ||
- `text-decoration: var(--sms-highlight-text-decoration)` | ||
- `text-decoration-color: var(--sms-highlight-text-decoration-color)` | ||
- `::highlight(sms-search-matches)`: applies to search results in dropdown list that match the current search query if `highlightMatches=true`. These styles [cannot be set via CSS variables](https://stackoverflow.com/a/56799215). Instead, use a new rule set. For example: | ||
```css | ||
::highlight(sms-search-matches) { | ||
color: orange; | ||
background: rgba(0, 0, 0, 0.15); | ||
text-decoration: underline; | ||
} | ||
``` | ||
### With CSS frameworks | ||
@@ -572,0 +576,0 @@ |
Sorry, the diff of this file is not supported yet
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
81853
660
Updatedsvelte@^3.58.0