You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
- dropped jQuery requirement and rewrote with browser native code.
83
83
- rewritten in TypeScript to also provide typings support (`d.ts`)
84
84
- make the lib CSP compliant (see [CSP Compliance](#csp-compliance) section below)
85
-
- add E2E tests, with Playwright, for all existing examples (over 65 of them)
85
+
- add E2E tests, with Playwright, for all existing examples (over 80 of them)
86
86
- revamped the UI in v3.x to give it a more Modern Look:
87
87
- improved CSS styling by using SVG icons (CSS/SASS variables are also availables)
88
88
- new Dark Mode
@@ -94,7 +94,7 @@ Changes and new options:
94
94
-`autoAdjustDropWidthByTextSize` automatically set the drop width size by reading the widest list option width
95
95
-`dataTest` will add a `data-test` attribute on the `.ms-parent` and `.ms-drop` divs for easier E2E testing
96
96
-`useSelectOptionLabel` will use the `<option label="">` which can be used to display shorter text of selected options.
97
-
- example: display "1,3" as label instead of "January,March" (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options31))
97
+
- example: display `"1,3"` as label instead of `"January,March"` (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options31))
98
98
-`useSelectOptionLabelToHtml` similar to `useSelectOptionLabel` but also renders HTML.
99
99
-`renderOptionLabelAsHtml` will render selected options as HTML code (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options27))
100
100
-`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)).
@@ -110,7 +110,7 @@ Changes and new options:
110
110
-`lazyData` provide a function callback that will return a Promise with data collection (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options42))
111
111
112
112
## CSP Compliance
113
-
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.
113
+
The library is now CSP (Content Security Policy) compliant, there are however 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.
with this code in place, we can now use the following CSP meta tag (which is what we use in the demo [index.html](https://github.com/ghiscoding/multiple-select-vanilla/blob/main/packages/demo/index.html#L7))
> **Note** that in our demo we are actually adding `unsafe-inline` simply because we are using Vite (which is not CSP compliant in Dev mode), but the library should work nonetheless without `unsafe-inline`.
135
138
136
139
### Installation / Structure
140
+
137
141
There are multiple ways to install and use the library, you can see below the folder structure of the distribution files
138
142
1.`dist/browser`: Standalone build which assigns `multipleSelect` on the `window.multipleSelect` object
139
143
- browser standalone means that you can simply load it with `<script></script>` and then `multipleSelect('#mySelect')`
@@ -157,6 +161,7 @@ dist/
157
161
```
158
162
159
163
### Used by
164
+
160
165
This fork was created mostly to drop jQuery, and it is used by a few other Open Source projects of mine that I also maintain:
0 commit comments