Skip to content

Commit

Permalink
docs: add more options to list of new features
Browse files Browse the repository at this point in the history
  • Loading branch information
ghiscoding committed Aug 19, 2024
1 parent d1b8373 commit cd7ee11
Showing 1 changed file with 11 additions and 4 deletions.
15 changes: 11 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,13 @@ npm install multiple-select-vanilla
New Multiple-Select Options:
- dropped jQuery requirement and replaced necessary code with browser native code.
- rewritten in TypeScript to also add typings support (`d.ts`)
- revamped the UI to give it a more Modern Look by updating the CSS and using SVG icons (CSS/SASS variables are also availables)
- add extra features:
- make the lib CSP compliant (see section below)
- revamped the UI to give it a more Modern Look:
- improve CSS styling and use SVG icons (CSS/SASS variables are also availables)
- new Dark Mode
- replace tabIndex by a more intuitive navigation & highlight by using arrow keys (or mouse hover)
- show 3 different states on multiple selections (none " ", partial "-", all "🗸")
- add extra options:
- `autoAdjustDropHeight` will automatically adjust the drop (up/down) height by available space (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options30))
- `autoAdjustDropPosition` will find best position (top/bottom) by its available space (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options29))
- `autoAdjustDropWidthByTextSize` automatically set the drop width size from the widest list option width
Expand All @@ -59,11 +64,13 @@ New Multiple-Select Options:
- `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))
- `showSearchClear` show a clear button on the search filter input (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options34))
- `diacriticParser` custom parser to normalize diacritic signs when filtering select list (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options35))
- replace tabIndex by a more intuitive navigation & highlight by using arrow keys (or mouse hover)
- `darkMode` option for a new **Dark Mode** Theme (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options38))
- `infiniteScroll` option (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options36))
- `onFilterClear` callback that will be executed when the filter gets cleared (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/events))
- `onClose(reason)` callback that will be executed when the dropdown closes (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/events))

## CSP Compliance
The library is now CSP (Content Security Policy) compliant, however there are some exceptions to be aware of. When using any HTML strings as template (when using `textTemplate`, `labelTemplate`, `renderOptionLabelAsHtml` or `useSelectOptionLabelToHtml`), you will not be fully compliant unless you return [`TrustedHTML`](https://developer.mozilla.org/en-US/docs/Web/API/TrustedHTML). You can achieve safety by using the `sanitizer` method in combo with an external library like [DOMPurify](https://github.com/cure53/DOMPurify) to return `TrustedHTML` as shown below and with that in place you will be CSP compliant.
The library is now CSP (Content Security Policy) compliant, however there are some exceptions to be aware of. When using any HTML strings as template (when using `textTemplate`, `labelTemplate`, `renderOptionLabelAsHtml` or `useSelectOptionLabelToHtml`), you will not be fully compliant unless you return [`TrustedHTML`](https://developer.mozilla.org/en-US/docs/Web/API/TrustedHTML). You can achieve this by using the `sanitizer` method in combo with an external library like [DOMPurify](https://github.com/cure53/DOMPurify) (recommended) to return `TrustedHTML` as shown below and with that in place you will be CSP compliant.

```typescript
import DOMPurify from 'dompurify';
Expand Down

0 comments on commit cd7ee11

Please sign in to comment.