|
10 | 10 | [](https://bundlephobia.com/result?p=multiple-select-vanilla) |
11 | 11 |
|
12 | 12 | ## Description |
13 | | -Multiple-Select-Vanilla is a fork of the popular [Multiple-Select (jQuery)](https://github.com/wenzhixin/multiple-select) library (thanks to @wenzhixin for this great lib). This fork was based on its latest known version at the time, which was `v1.5.2`, but later updated to [`v1.7.0`](https://github.com/wenzhixin/multiple-select/releases/tag/1.7.0). The main difference from the original lib is that we dropped jQuery in favor of native browser code and this mean zero external dependency. As a bonus, a few extra features were also added to the library as you can see from the list shown below [Changes vs Original lib](#changes-vs-original-lib-multiple-select). |
| 13 | +Multiple-Select-Vanilla is a fork of the popular [Multiple-Select (jQuery)](https://github.com/wenzhixin/multiple-select) library (thanks to @wenzhixin for this great project). This fork was based on its latest known version at the time, which was `v1.5.2`, but later updated to [`v1.7.0`](https://github.com/wenzhixin/multiple-select/releases/tag/1.7.0). The main difference from the original lib is that we dropped jQuery in favor of native browser code and this mean zero external dependency. As a bonus, a few extra features were also added to the library and you can see them listed below [Changes vs Original lib](#changes-vs-original-lib-multiple-select). |
14 | 14 |
|
15 | 15 | This lib allows you to select multiple elements with checkboxes :). |
16 | 16 |
|
@@ -42,29 +42,29 @@ npm install multiple-select-vanilla |
42 | 42 |
|
43 | 43 |
|
44 | 44 | ## Changes vs Original lib (`multiple-select`) |
45 | | -New Multiple-Select Options: |
46 | | -- dropped jQuery requirement and replaced necessary code with browser native code. |
| 45 | +Changes and new options: |
| 46 | +- dropped jQuery requirement and rewrite with browser native code. |
47 | 47 | - rewritten in TypeScript to also add typings support (`d.ts`) |
48 | | -- make the lib CSP compliant (see section below) |
| 48 | +- make the lib CSP compliant (see explanations below) |
49 | 49 | - revamped the UI to give it a more Modern Look: |
50 | 50 | - improve CSS styling and use SVG icons (CSS/SASS variables are also availables) |
51 | 51 | - new Dark Mode |
52 | | - - replace tabIndex by a more intuitive navigation & highlight by using arrow keys (or mouse hover) |
| 52 | + - replace tabIndex with a more intuitive navigation & highlight by using arrow keys (or mouse hover) |
53 | 53 | - show 3 different states on multiple selections (none " ", partial "-", all "🗸") |
54 | | -- add extra options: |
| 54 | +- add new options: |
55 | 55 | - `autoAdjustDropHeight` will automatically adjust the drop (up/down) height by available space (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options30)) |
56 | 56 | - `autoAdjustDropPosition` will find best position (top/bottom) by its available space (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options29)) |
57 | | - - `autoAdjustDropWidthByTextSize` automatically set the drop width size from the widest list option width |
| 57 | + - `autoAdjustDropWidthByTextSize` automatically set the drop width size by reading the widest list option width |
58 | 58 | - `dataTest` will add a `data-test` attribute on the `.ms-parent` and `.ms-drop` divs for easier E2E testing |
59 | | - - `useSelectOptionLabel` will use the `<option label="">` that can be used to display shorter text of selected options. |
| 59 | + - `useSelectOptionLabel` will use the `<option label="">` which can be used to display shorter text of selected options. |
60 | 60 | - example: display "1,3" as label instead of "January,March" (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options31)) |
61 | 61 | - `useSelectOptionLabelToHtml` similar to `useSelectOptionLabel` but also renders HTML. |
62 | 62 | - `renderOptionLabelAsHtml` will render selected options as HTML code (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options27)) |
63 | 63 | - `sanitizer` can be used to sanitize HTML code and prevent XSS cross-site scripting attacks (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options32)). |
64 | | - - `showOkButton` to add an "OK" button at the end of the multiple select option list (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options25)) |
65 | | - - `showSearchClear` show a clear button on the search filter input (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options34)) |
66 | | - - `diacriticParser` custom parser to normalize diacritic signs when filtering select list (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options35)) |
67 | | - - `darkMode` option for a new **Dark Mode** Theme (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options38)) |
| 64 | + - `showOkButton` adds an "OK" button at the end of the multiple select option list (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options25)) |
| 65 | + - `showSearchClear` show a clear filter button on the search filter input (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options34)) |
| 66 | + - `diacriticParser` custom parser to normalize diacritic symbols when filtering select list (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options35)) |
| 67 | + - `darkMode` to enable our new **Dark Mode** Theme (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options38)) |
68 | 68 | - `infiniteScroll` option (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options36)) |
69 | 69 | - `onFilterClear` callback that will be executed when the filter gets cleared (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/events)) |
70 | 70 | - `onClose(reason)` callback that will be executed when the dropdown closes (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/events)) |
|
0 commit comments