svelte-multiselect - npm Package Compare versions

Comparing version 2.0.0 to 3.0.0

actions.js

@@ -17,1 +17,24 @@ export function onClickOutside(node, cb) {
 }
+// import { spring } from 'svelte/motion'
+// export default function boop(node: HTMLElement, params = {}) {
+//   const { setter } = params
+//   const springyRotation = spring(
+//     { x: 0, y: 0, rotation: 0, scale: 1 },
+//     { stiffness: 0.1, damping: 0.15 }
+//   )
+//   node.style.display = `inline-block`
+//   const unsubscribe = springyRotation.subscribe(({ x, y, rotation, scale }) => {
+//     node.style.transform = `translate(${x}px, ${y}px) rotate(${rotation}deg) scale(${scale})`
+//   })
+//   return {
+//     update({ isBooped: x = 0, y = 0, rotation = 0, scale = 1, timing }) {
+//       springyRotation.set(
+//         isBooped
+//           ? { x, y, rotation, scale }
+//           : { x: 0, y: 0, rotation: 0, scale: 1 }
+//       )
+//       if (isBooped) window.setTimeout(() => setter(false), timing)
+//     },
+//     destroy: unsubscribe,
+//   }
+// }

MultiSelect.svelte.d.ts

@@ -19,4 +19,4 @@ import { SvelteComponentTyped } from "svelte";
         outerDivClass?: string | undefined;
-        ulTokensClass?: string | undefined;
-        liTokenClass?: string | undefined;
+        ulSelectedClass?: string | undefined;
+        liSelectedClass?: string | undefined;
         ulOptionsClass?: string | undefined;
@@ -23,0 +23,0 @@ liOptionClass?: string | undefined;

package.json

@@ -8,3 +8,3 @@ {
   "license": "MIT",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "type": "module",
@@ -18,4 +18,6 @@ "svelte": "MultiSelect.svelte",
     "@sveltejs/kit": "^1.0.0-next.202",
+    "@testing-library/svelte": "^3.0.3",
     "@typescript-eslint/eslint-plugin": "^5.7.0",
     "@typescript-eslint/parser": "^5.7.0",
+    "ava": "^3.15.0",
     "eslint": "^8.5.0",
@@ -22,0 +24,0 @@ "eslint-plugin-svelte3": "^3.2.1",

readme.md

@@ -36,2 +36,14 @@ <div class="maybe-hide">
 
+> ## Recent breaking changes
+>
+> - v2.0.0 added the ability to pass options as objects. As a result, `bind:selected` no longer returns simple strings but objects as well, even if you still pass in `options` as strings.
+> - v3.0.0 changed the `event.detail` payload for `'add'`, `'remove'` and `'change'` events from `token` to `option`, e.g.
+>
+>   ```js
+>   on:add={(e) => console.log(e.detail.token.label)} // v2.0.0
+>   on:add={(e) => console.log(e.detail.option.label)} // v3.0.0
+>   ```
+>
+>   It also added a separate event type `removeAll` for when the user removes all currently selected options at once which previously fired a normal `remove`. The props `ulTokensClass` and `liTokenClass` were renamed to `ulSelectedClass` and `liSelectedClass`. Similarly, the CSS variable `--sms-token-bg` changed to `--sms-selected-bg`.
+
 ## Installation
@@ -101,8 +113,9 @@
 
-| name     | details                         | description                                                                                                                                    |
-| -------- | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
-| `add`    | `token: string`                 | Triggers when a new token is selected.                                                                                                         |
-| `remove` | `token: string`                 | Triggers when one or all selected tokens are removed. `event.detail.token` will be a single or multiple tokens, respectively.                  |
-| `change` | `token: string`, `type: string` | Triggers when a token is either added or removed, or all tokens are removed at once. `event.detail.type` will be either `'add'` or `'remove'`. |
-| `blur`   | none                            | Triggers when the input field looses focus.                                                                                                    |
+| name        | detail                                                                              | description                                                                                                                         |
+| ----------- | ----------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
+| `add`       | `{ option: Option }`                                                                | Triggers when a new option is selected.                                                                                             |
+| `remove`    | `{ option: Option }`                                                                | Triggers when one selected option provided as `event.detail.option` is removed.                                                     |
+| `removeAll` | `options: Option[]`                                                                 | Triggers when all selected options are removed. The payload `event.detail.options` gives the options that were previously selected. |
+| `change`    | `{ option?: Option, options?: Option[] }`, `type: 'add' \| 'remove' \| 'removeAll'` | Triggers when a option is either added or removed, or all options are removed at once.                                              |
+| `blur`      | none                                                                                | Triggers when the input field looses focus.                                                                                         |
 
@@ -112,5 +125,5 @@ ### Examples
 <!-- prettier-ignore -->
-- `on:add={(event) => console.log(event.detail.token.label)}`
-- `on:remove={(event) => console.log(event.detail.token.label)}`.
-- ``on:change={(event) => console.log(`${event.detail.type}: '${event.detail.token.label}'`)}``
+- `on:add={(event) => console.log(event.detail.option.label)}`
+- `on:remove={(event) => console.log(event.detail.option.label)}`.
+- ``on:change={(event) => console.log(`${event.detail.type}: '${event.detail.option.label}'`)}``
 - `on:blur={yourFunctionHere}`
@@ -120,3 +133,3 @@
 <MultiSelect
-  on:change={(e) => alert(`You ${e.detail.type}ed '${e.detail.token.label}'`)}
+  on:change={(e) => alert(`You ${e.detail.type}ed '${e.detail.option.label}'`)}
 />
@@ -138,4 +151,4 @@ ```
 - `background: var(--sms-readonly-bg, lightgray)`: Background when in readonly state.
-- `background: var(--sms-token-bg, var(--sms-active-color, cornflowerblue))`: Background of selected tokens.
-- `color: var(--sms-remove-x-hover+focus-color, lightgray)`: Hover color of cross icon to remove selected tokens.
+- `background: var(--sms-selected-bg, var(--sms-active-color, cornflowerblue))`: Background of selected options.
+- `color: var(--sms-remove-x-hover+focus-color, lightgray)`: Hover color of cross icon to remove selected options.
 - `color: var(--sms-remove-x-hover-focus-color, lightskyblue)`: Color of the cross-icon buttons for removing all or individual selected options when in `:focus` or `:hover` state.
@@ -160,4 +173,4 @@ - `background: var(--sms-options-bg, white)`: Background of options list.
 - `outerDivClass`
-- `ulTokensClass`
-- `liTokenClass`
+- `ulSelectedClass`
+- `liSelectedClass`
 - `ulOptionsClass`
@@ -170,5 +183,5 @@ - `liOptionClass`
 <div class={outerDivClass}>
-  <ul class={ulTokensClass}>
-    <li class={liTokenClass}>First selected tag</li>
-    <li class={liTokenClass}>Second selected tag</li>
+  <ul class={ulSelectedClass}>
+    <li class={liSelectedClass}>First selected tag</li>
+    <li class={liSelectedClass}>Second selected tag</li>
   </ul>
@@ -184,3 +197,3 @@ <ul class={ulOptionsClass}>
 
-You can alternatively style every part of this component with more fine-grained control by using the following `:global()` CSS selectors. `ul.tokens` is the list of currently selected options rendered inside the component's input whereas `ul.options` is the list of available options that slides out when the component has focus.
+You can alternatively style every part of this component with more fine-grained control by using the following `:global()` CSS selectors. `ul.selected` is the list of currently selected options rendered inside the component's input whereas `ul.options` is the list of available options that slides out when the component has focus.
 
@@ -191,6 +204,6 @@ ```css
 }
-:global(.multiselect ul.tokens > li) {
+:global(.multiselect ul.selected > li) {
   /* selected options */
 }
-:global(.multiselect ul.tokens > li button),
+:global(.multiselect ul.selected > li button),
 :global(.multiselect button.remove-all) {
@@ -197,0 +210,0 @@ /* buttons to remove a single or all selected options at once */

New alerts

License Policy Violation

License

This 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

License

This 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

36482

increased by8.89%

Lines of code

157

increased by17.16%

Number of lines in readme file

241

increased by5.7%

Worsened metrics

Dev dependency count

22

increased by10%

No dependency changes