svelte-multiselect - npm Package Compare versions

Comparing version 10.2.0 to 10.3.0

dist/MultiSelect.svelte.d.ts

@@ -26,7 +26,12 @@ import { SvelteComponent } from "svelte";
         inputClass?: string | undefined;
+        inputStyle?: string | null | undefined;
         inputmode?: string | null | undefined;
         invalid?: boolean | undefined;
         liActiveOptionClass?: string | undefined;
+        liActiveUserMsgClass?: string | undefined;
         liOptionClass?: string | undefined;
+        liOptionStyle?: string | null | undefined;
         liSelectedClass?: string | undefined;
+        liSelectedStyle?: string | null | undefined;
+        liUserMsgClass?: string | undefined;
         loading?: boolean | undefined;
@@ -56,4 +61,7 @@ matchingOptions?: Option[] | undefined;
         selectedOptionsDraggable?: boolean | undefined;
+        style?: string | null | undefined;
         ulOptionsClass?: string | undefined;
         ulSelectedClass?: string | undefined;
+        ulSelectedStyle?: string | null | undefined;
+        ulOptionsStyle?: string | null | undefined;
         value?: Option | Option[] | null | undefined;
@@ -98,6 +106,6 @@ };
 export type MultiSelectProps<Option extends T> = ReturnType<__sveltets_Render<Option>['props']>;
-export type MultiSelectEvents<Option extends T> = ReturnType<__sveltets_Render<Option>['events']>;
+export type MultiSelectEvents_<Option extends T> = ReturnType<__sveltets_Render<Option>['events']>;
 export type MultiSelectSlots<Option extends T> = ReturnType<__sveltets_Render<Option>['slots']>;
-export default class MultiSelect<Option extends T> extends SvelteComponent<MultiSelectProps<Option>, MultiSelectEvents<Option>, MultiSelectSlots<Option>> {
+export default class MultiSelect<Option extends T> extends SvelteComponent<MultiSelectProps<Option>, MultiSelectEvents_<Option>, MultiSelectSlots<Option>> {
 }
 export {};

dist/utils.d.ts

@@ -6,2 +6,2 @@ import type { Option, OptionStyle } from './types';
     [key: string]: unknown;
-} | string | number, key?: 'selected' | 'option' | null): string | null | undefined;
+} | string | number, key?: 'selected' | 'option' | null): string;

dist/utils.js

@@ -11,16 +11,16 @@ // get the label key from an option object or the option itself if it's a string or number
 };
+// this function is used extract CSS strings from a {selected, option} style object to be used in the style attribute of the option
+// if the style is a string, it will be returned as is
 export function get_style(option, key = null) {
-    if (!option?.style)
-        return null;
+    let css_str = ``;
     if (![`selected`, `option`, null].includes(key)) {
         console.error(`MultiSelect: Invalid key=${key} for get_style`);
-        return;
     }
     if (typeof option == `object` && option.style) {
         if (typeof option.style == `string`) {
-            return option.style;
+            css_str = option.style;
         }
         if (typeof option.style == `object`) {
             if (key && key in option.style)
-                return option.style[key];
+                return option.style[key] ?? ``;
             else {
@@ -31,2 +31,6 @@ console.error(`Invalid style object for option=${JSON.stringify(option)}`);
     }
+    // ensure css_str ends with a semicolon
+    if (css_str.trim() && !css_str.trim().endsWith(`;`))
+        css_str += `;`;
+    return css_str;
 }

package.json

@@ -8,3 +8,3 @@ {
   "license": "MIT",
-  "version": "10.2.0",
+  "version": "10.3.0",
   "type": "module",
@@ -27,33 +27,34 @@ "svelte": "./dist/index.js",
   "dependencies": {
-    "svelte": "^4.2.0"
+    "svelte": "4.2.12"
   },
   "devDependencies": {
-    "@iconify/svelte": "^3.1.4",
-    "@playwright/test": "^1.37.1",
-    "@sveltejs/adapter-static": "^2.0.3",
-    "@sveltejs/kit": "^1.24.1",
-    "@sveltejs/package": "2.2.2",
-    "@sveltejs/vite-plugin-svelte": "2.4.5",
-    "@typescript-eslint/eslint-plugin": "^6.7.0",
-    "@typescript-eslint/parser": "^6.7.0",
-    "@vitest/coverage-v8": "^0.34.4",
-    "eslint": "^8.49.0",
-    "eslint-plugin-svelte": "^2.33.1",
-    "hastscript": "^8.0.0",
-    "highlight.js": "^11.8.0",
-    "jsdom": "^22.1.0",
+    "@iconify/svelte": "^3.1.6",
+    "@playwright/test": "^1.43.0",
+    "@sveltejs/adapter-static": "^3.0.1",
+    "@sveltejs/kit": "^2.5.5",
+    "@sveltejs/package": "2.3.1",
+    "@sveltejs/vite-plugin-svelte": "3.0.2",
+    "@vitest/coverage-v8": "^1.4.0",
+    "eslint": "^9.0.0",
+    "eslint-plugin-svelte": "^2.36.0",
+    "globals": "^15.0.0",
+    "hastscript": "^9.0.0",
+    "highlight.js": "^11.9.0",
+    "jsdom": "^24.0.0",
     "mdsvex": "^0.11.0",
     "mdsvexamples": "^0.4.1",
-    "prettier": "^3.0.3",
-    "prettier-plugin-svelte": "^3.0.3",
-    "rehype-autolink-headings": "^7.0.0",
+    "prettier": "^3.2.5",
+    "prettier-plugin-svelte": "^3.2.2",
+    "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
-    "svelte-check": "^3.5.1",
-    "svelte-preprocess": "^5.0.4",
-    "svelte-toc": "^0.5.6",
-    "svelte-zoo": "^0.4.9",
-    "svelte2tsx": "^0.6.21",
-    "typescript": "5.2.2",
-    "vite": "^4.4.9",
-    "vitest": "^0.34.4"
+    "svelte-check": "^3.6.9",
+    "svelte-multiselect": "^10.2.0",
+    "svelte-preprocess": "^5.1.3",
+    "svelte-toc": "^0.5.8",
+    "svelte-zoo": "^0.4.10",
+    "svelte2tsx": "^0.7.6",
+    "typescript": "5.4.4",
+    "typescript-eslint": "^7.5.0",
+    "vite": "^5.1.5",
+    "vitest": "^1.4.0"
   },
@@ -60,0 +61,0 @@ "keywords": [

readme.md

@@ -233,2 +233,8 @@ <h1 align="center">
 1. ```ts
+   inputStyle: string | null = null
+   ```
+
+   One-off CSS rules applied to the `<input>` element.
+
+1. ```ts
    invalid: boolean = false
@@ -240,2 +246,14 @@ ```
 1. ```ts
+   liOptionStyle: string | null = null
+   ```
+
+   One-off CSS rules applied to the `<li>` elements that wrap the dropdown options.
+
+1. ```ts
+   liSelectedStyle: string | null = null
+   ```
+
+   One-off CSS rules applied to the `<li>` elements that wrap the selected options.
+
+1. ```ts
    loading: boolean = false
@@ -309,3 +327,3 @@ ```
 
-   **The only required prop** (no default). Array of strings/numbers or `Option` objects to be listed in the dropdown. The only required key on objects is `label` which must also be unique. An object's `value` defaults to `label` if `undefined`. You can add arbitrary additional keys to your option objects. A few keys like `preselected` and `title` have special meaning though. See type `ObjectOption` in [`src/lib/index.ts`](https://github.com/janosh/svelte-multiselect/blob/main/src/lib/index.ts) for all special keys and their purpose.
+   **The only required prop** (no default). Array of strings/numbers or `Option` objects to be listed in the dropdown. The only required key on objects is `label` which must also be unique. An object's `value` defaults to `label` if `undefined`. You can add arbitrary additional keys to your option objects. A few keys like `preselected` and `title` have special meaning though. See type `ObjectOption` in [`/src/lib/types.ts`](https://github.com/janosh/svelte-multiselect/blob/main/src/lib/types.ts) for all special keys and their purpose.
 
@@ -388,2 +406,20 @@ 1. ```ts
 1. ```ts
+   style: string | null = null
+   ```
+
+   One-off CSS rules applied to the outer `<div class="multiselect">` that wraps the whole component for passing one-off CSS.
+
+1. ```ts
+   ulSelectedStyle: string | null = null
+   ```
+
+   One-off CSS rules applied to the `<ul class="selected">` that wraps the list of selected options.
+
+1. ```ts
+   ulOptionsStyle: string | null = null
+   ```
+
+   One-off CSS rules applied to the `<ul class="options">` that wraps the list of selected options.
+
+1. ```ts
    value: Option | Option[] | null = null
@@ -434,3 +470,3 @@ ```
 
-   Triggers when a new option is selected.
+   Triggers when a new option is selected. The newly selected option is provided as `event.detail.option`.
 
@@ -441,3 +477,3 @@ 1. ```ts
 
-   Triggers when one selected option provided as `event.detail.option` is removed.
+   Triggers when a single selected option is removed. The removed option is provided as `event.detail.option`.
 
@@ -454,3 +490,3 @@ 1. ```ts
 
-   Triggers when an option is either added or removed, or all options are removed at once. `type` is one of `'add' | 'remove' | 'removeAll'` and payload will be `option: Option` or `options: Option[]`, respectively.
+   Triggers when an option is either added (selected) or removed from selected, or all selected options are removed at once. `type` is one of `'add' | 'remove' | 'removeAll'` and payload will be `option: Option` or `options: Option[]`, respectively.
 
@@ -615,2 +651,4 @@ 1. ```ts
 - `liActiveOptionClass`: the currently active dropdown list item (i.e. hovered or navigated to with arrow keys)
+- `liUserMsgClass`: user message (last child of dropdown list when no options match user input)
+- `liActiveUserMsgClass`: user message when active (i.e. hovered or navigated to with arrow keys)
 - `maxSelectMsgClass`: small span towards the right end of the input field displaying to the user how many of the allowed number of options they've already selected
@@ -633,2 +671,6 @@
     </li>
+    ...
+    <li class="{liUserMsgClass} {liActiveUserMsgClass}">
+      Create this option...
+    </li>
   </ul>
@@ -635,0 +677,0 @@ </div>

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

92136

increased by2.94%

Lines of code

416

increased by2.97%

Number of lines in readme file

728

increased by6.12%

Worsened metrics

Dev dependency count

29

increased by3.57%

Dependency changes

• + Addedsvelte@4.2.12(transitive)

• - Removedsvelte@4.2.19(transitive)

• Updatedsvelte@4.2.12