svelte-multiselect
Advanced tools
Comparing version 8.1.0 to 8.2.0
@@ -13,7 +13,7 @@ import { SvelteComponentTyped } from "svelte"; | ||
}; | ||
export declare type CircleSpinnerProps = typeof __propDef.props; | ||
export declare type CircleSpinnerEvents = typeof __propDef.events; | ||
export declare type CircleSpinnerSlots = typeof __propDef.slots; | ||
export type CircleSpinnerProps = typeof __propDef.props; | ||
export type CircleSpinnerEvents = typeof __propDef.events; | ||
export type CircleSpinnerSlots = typeof __propDef.slots; | ||
export default class CircleSpinner extends SvelteComponentTyped<CircleSpinnerProps, CircleSpinnerEvents, CircleSpinnerSlots> { | ||
} | ||
export {}; |
export { default } from './MultiSelect.svelte'; | ||
export declare type Option = string | number | ObjectOption; | ||
export declare type ObjectOption = { | ||
export type Option = string | number | ObjectOption; | ||
export type ObjectOption = { | ||
label: string | number; | ||
@@ -13,3 +13,3 @@ value?: unknown; | ||
}; | ||
export declare type DispatchEvents = { | ||
export type DispatchEvents = { | ||
add: { | ||
@@ -36,3 +36,3 @@ option: Option; | ||
}; | ||
export declare type MultiSelectEvents = { | ||
export type MultiSelectEvents = { | ||
[key in keyof DispatchEvents]: CustomEvent<DispatchEvents[key]>; | ||
@@ -39,0 +39,0 @@ } & { |
@@ -20,3 +20,3 @@ import { SvelteComponentTyped } from "svelte"; | ||
focusInputOnSelect?: boolean | "desktop" | undefined; | ||
form_input: HTMLInputElement; | ||
form_input?: HTMLInputElement | null | undefined; | ||
id?: string | null | undefined; | ||
@@ -51,2 +51,3 @@ input?: HTMLInputElement | null | undefined; | ||
selected?: Option[] | undefined; | ||
selectedOptionsDraggable?: boolean | undefined; | ||
sortSelected?: boolean | ((op1: Option, op2: Option) => number) | undefined; | ||
@@ -73,7 +74,7 @@ ulOptionsClass?: string | undefined; | ||
}; | ||
export declare type MultiSelectProps = typeof __propDef.props; | ||
export declare type MultiSelectEvents = typeof __propDef.events; | ||
export declare type MultiSelectSlots = typeof __propDef.slots; | ||
export type MultiSelectProps = typeof __propDef.props; | ||
export type MultiSelectEvents = typeof __propDef.events; | ||
export type MultiSelectSlots = typeof __propDef.slots; | ||
export default class MultiSelect extends SvelteComponentTyped<MultiSelectProps, MultiSelectEvents, MultiSelectSlots> { | ||
} | ||
export {}; |
@@ -5,6 +5,6 @@ { | ||
"author": "Janosh Riebesell <janosh.riebesell@gmail.com>", | ||
"homepage": "https://svelte-multiselect.netlify.app", | ||
"homepage": "https://janosh.github.io/svelte-multiselect", | ||
"repository": "https://github.com/janosh/svelte-multiselect", | ||
"license": "MIT", | ||
"version": "8.1.0", | ||
"version": "8.2.0", | ||
"type": "module", | ||
@@ -16,11 +16,11 @@ "svelte": "index.js", | ||
"@iconify/svelte": "^3.0.0", | ||
"@playwright/test": "^1.27.1", | ||
"@playwright/test": "^1.28.0", | ||
"@sveltejs/adapter-static": "1.0.0-next.48", | ||
"@sveltejs/kit": "1.0.0-next.544", | ||
"@sveltejs/package": "1.0.0-next.5", | ||
"@sveltejs/vite-plugin-svelte": "^1.1.1", | ||
"@typescript-eslint/eslint-plugin": "^5.42.1", | ||
"@typescript-eslint/parser": "^5.42.1", | ||
"@vitest/coverage-c8": "^0.25.1", | ||
"eslint": "^8.27.0", | ||
"@sveltejs/kit": "1.0.0-next.553", | ||
"@sveltejs/package": "1.0.0-next.6", | ||
"@sveltejs/vite-plugin-svelte": "^1.2.0", | ||
"@typescript-eslint/eslint-plugin": "^5.43.0", | ||
"@typescript-eslint/parser": "^5.43.0", | ||
"@vitest/coverage-c8": "^0.25.2", | ||
"eslint": "^8.28.0", | ||
"eslint-plugin-svelte3": "^4.0.0", | ||
@@ -31,4 +31,5 @@ "hastscript": "^7.1.0", | ||
"mdsvex": "^0.10.6", | ||
"mdsvexamples": "^0.3.2", | ||
"prettier": "^2.7.1", | ||
"prettier-plugin-svelte": "^2.8.0", | ||
"prettier-plugin-svelte": "^2.8.1", | ||
"rehype-autolink-headings": "^6.1.1", | ||
@@ -43,5 +44,5 @@ "rehype-slug": "^5.1.0", | ||
"tslib": "^2.4.1", | ||
"typescript": "^4.8.4", | ||
"vite": "^3.2.3", | ||
"vitest": "^0.25.1" | ||
"typescript": "^4.9.3", | ||
"vite": "^3.2.4", | ||
"vitest": "^0.25.2" | ||
}, | ||
@@ -48,0 +49,0 @@ "keywords": [ |
@@ -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) | ||
[![Netlify Status](https://api.netlify.com/api/v1/badges/a45b62c3-ea45-4cfd-9912-77ec4fc8d7e8/deploy-status)](https://app.netlify.com/sites/svelte-multiselect/deploys) | ||
[![Docs](https://github.com/janosh/svelte-multiselect/actions/workflows/docs.yml/badge.svg)](https://github.com/janosh/svelte-multiselect/actions/workflows/docs.yml) | ||
[![NPM version](https://img.shields.io/npm/v/svelte-multiselect?logo=NPM&color=purple)](https://npmjs.com/package/svelte-multiselect) | ||
@@ -20,3 +20,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) | ||
Keyboard-friendly, accessible and highly customizable multi-select component. | ||
<a class="hide-in-docs" href="https://svelte-multiselect.netlify.app">View the docs</a> | ||
<a class="hide-in-docs" href="https://janosh.github.io/svelte-multiselect">View the docs</a> | ||
</strong></p> | ||
@@ -57,3 +57,3 @@ | ||
```svelte | ||
```html | ||
<script> | ||
@@ -67,3 +67,3 @@ import MultiSelect from 'svelte-multiselect' | ||
Favorite Frontend Frameworks? | ||
Favorite Frontend tools? | ||
@@ -176,3 +176,3 @@ <code>selected = {JSON.stringify(selected)}</code> | ||
1. ```ts | ||
form_input: HTMLInputElement | ||
form_input: HTMLInputElement | null = null | ||
``` | ||
@@ -251,3 +251,3 @@ | ||
Applied to the `<input>` element. Sets the key of this field in a submitted form data object. See [form example](https://svelte-multiselect.netlify.app/form). | ||
Applied to the `<input>` element. Sets the key of this field in a submitted form data object. See [form example](https://janosh.github.io/svelte-multiselect/form). | ||
@@ -336,6 +336,12 @@ 1. ```ts | ||
1. ```ts | ||
selectedOptionsDraggable: boolean = true | ||
``` | ||
Whether selected options are draggable so users can change their order. | ||
1. ```ts | ||
sortSelected: boolean | ((op1: Option, op2: Option) => number) = false | ||
``` | ||
Default behavior is to render selected items in the order they were chosen. `sortSelected={true}` uses default JS array sorting. A compare function enables custom logic for sorting selected options. See the [`/sort-selected`](https://svelte-multiselect.netlify.app/sort-selected) example. | ||
Default behavior is to render selected items in the order they were chosen. `sortSelected={true}` uses default JS array sorting. A compare function enables custom logic for sorting selected options. See the [`/sort-selected`](https://janosh.github.io/svelte-multiselect/sort-selected) example. | ||
@@ -360,3 +366,3 @@ 1. ```ts | ||
```svelte | ||
```html | ||
<MultiSelect options={[`Red`, `Green`, `Blue`, `Yellow`, `Purple`]}> | ||
@@ -422,3 +428,3 @@ <span let:idx let:option slot="option"> | ||
```svelte | ||
```html | ||
<MultiSelect | ||
@@ -437,3 +443,3 @@ on:change={(e) => { | ||
```svelte | ||
```html | ||
<MultiSelect | ||
@@ -449,3 +455,3 @@ options={[1, 2, 3]} | ||
```svelte | ||
```html | ||
<script lang="ts"> | ||
@@ -468,3 +474,3 @@ import MultiSelect from 'svelte-multiselect' | ||
```svelte | ||
```html | ||
<div class="multiselect"> | ||
@@ -524,3 +530,3 @@ <ul class="selected"> | ||
- `div.multiselect > ul.options > li.active` | ||
- `background: var(--sms-li-active-bg, var(--sms-active-color, rgba(0, 0, 0, 0.15)))`: Background of active dropdown item. Items become active either by mouseover or by navigating to them with arrow keys. | ||
- `background: var(--sms-li-active-bg, var(--sms-active-color, rgba(0, 0, 0, 0.15)))`: Background of active options. Options in the dropdown list become active either by mouseover or by navigating to them with arrow keys. Selected options become active when `selectedOptionsDraggable=true` and an option is being dragged to a new position. Note the active option in that case is not the dragged option but the option under it whose place it will take on drag end. | ||
- `div.multiselect > ul.options > li.disabled` | ||
@@ -532,3 +538,3 @@ - `background: var(--sms-li-disabled-bg, #f5f5f6)`: Background of disabled options in the dropdown list. | ||
```svelte | ||
```html | ||
<MultiSelect --sms-options-bg="white" /> | ||
@@ -551,3 +557,3 @@ ``` | ||
```svelte | ||
```html | ||
<div class="multiselect {outerDivClass}"> | ||
@@ -619,17 +625,4 @@ <input class={inputClass} /> | ||
## Want to contribute? | ||
## Want to contribute to this project? | ||
To submit a PR, clone the repo, install dependencies and start the dev server to see changes as you make them. | ||
```sh | ||
git clone https://github.com/janosh/svelte-multiselect | ||
cd svelte-multiselect | ||
pnpm install | ||
pnpm dev | ||
``` | ||
To make sure your changes didn't break anything, you can run the full test suite (which also runs in CI) using: | ||
```sh | ||
pnpm test | ||
``` | ||
[Here are some steps](https://github.com/janosh/svelte-multiselect/blob/main/contributing.md) to get you started! |
@@ -20,7 +20,7 @@ import { SvelteComponentTyped } from "svelte"; | ||
}; | ||
export declare type WiggleProps = typeof __propDef.props; | ||
export declare type WiggleEvents = typeof __propDef.events; | ||
export declare type WiggleSlots = typeof __propDef.slots; | ||
export type WiggleProps = typeof __propDef.props; | ||
export type WiggleEvents = typeof __propDef.events; | ||
export type WiggleSlots = typeof __propDef.slots; | ||
export default class Wiggle extends SvelteComponentTyped<WiggleProps, WiggleEvents, WiggleSlots> { | ||
} | ||
export {}; |
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
No website
QualityPackage does not have a website.
Found 1 instance in 1 package
99888
22
292
0
30
613