svelte-multiselect - npm Package Compare versions

Comparing version 8.1.0 to 8.2.0

CircleSpinner.svelte.d.ts

@@ -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 {};

index.d.ts

 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 @@ } & {

MultiSelect.svelte.d.ts

@@ -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 {};

package.json

@@ -5,6 +5,6 @@ {
   "author": "Janosh Riebesell <[e-mail]>",
-  "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": [

readme.md

@@ -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!

Wiggle.svelte.d.ts

@@ -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 {};

Fixed alerts

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

99888

increased by45.45%

Number of package files

22

increased by4.76%

Lines of code

292

increased by0.34%

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

30

increased by3.45%

Number of lines in readme file

613

decreased by-1.13%

No dependency changes