Skip to content

Commit 65ccbac

Browse files
committed
docs: simplify readme docs showing on npm publish
1 parent 25da583 commit 65ccbac

File tree

1 file changed

+2
-132
lines changed

1 file changed

+2
-132
lines changed
Lines changed: 2 additions & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,7 @@
11
# Multiple-Select-Vanilla
22

3-
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
4-
[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
5-
[![NPM downloads](https://img.shields.io/npm/dy/multiple-select-vanilla)](https://npmjs.org/package/multiple-select-vanilla)
6-
[![Playwright](https://img.shields.io/badge/tested%20with-Playwright-45ba4b.svg?logo=playwright)](https://playwright.dev/)
7-
[![npm](https://img.shields.io/npm/v/multiple-select-vanilla.svg?logo=npm&logoColor=fff&label=npm)](https://www.npmjs.com/package/multiple-select-vanilla)
8-
[![Actions Status](https://github.com/ghiscoding/multiple-select-vanilla/actions/workflows/main.yml/badge.svg)](https://github.com/ghiscoding/multiple-select-vanilla/actions)
9-
10-
## Stable Release
11-
We now have a fully working and official release including a [**Live demo**](https://ghiscoding.github.io/multiple-select-vanilla/) for displaying all available options/methods. You can also take a look at the "[Used by](#used-by)" section below to see real world applications taking advantage of this library.
12-
13-
## Description
14-
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.6.0`](https://github.com/wenzhixin/multiple-select/releases/tag/1.6.0). The main difference from the original lib is that we dropped jQuery and we now use native code and this mean zero external dependency. We also added a few extra features which you can see in the list below ([Changes vs Original lib](#changes-vs-original-lib)).
15-
16-
This lib allows you to select multiple elements with checkboxes :).
17-
18-
To get started take a look at the [Live demo](https://ghiscoding.github.io/multiple-select-vanilla/) for all available options and methods that the library offers.
19-
20-
21-
### Fully tested with [![Playwright](https://img.shields.io/badge/tested%20with-Playwright-45ba4b.svg?logo=playwright)](https://playwright.dev/)
22-
23-
The [Live demo](https://ghiscoding.github.io/multiple-select-vanilla/) website is also used by [Playwright](https://playwright.dev/) for E2E testing of the library, all examples are covered with Playwright tests.
3+
## Live Demo
4+
Available [**Live demo**](https://ghiscoding.github.io/multiple-select-vanilla/) for displaying all available options/methods.
245

256
## Installation
267

@@ -35,114 +16,3 @@ npm install multiple-select-vanilla
3516
## LICENSE
3617

3718
[The MIT License](https://github.com/ghiscoding/multiple-select-vanilla/blob/main/LICENSE)
38-
39-
40-
## Changes vs Original lib (`multiple-select`)
41-
New Multiple-Select Options:
42-
- dropped jQuery requirement and replaced necessary code with browser native code.
43-
- written in TypeScript which also brings typings support
44-
- add extra features:
45-
- `autoAdjustDropHeight` will automatically adjust the drop (up/down) height by available space (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options30))
46-
- `autoAdjustDropPosition` will find best position (top/bottom) by its available space (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options29))
47-
- `autoAdjustDropWidthByTextSize` automatically set the drop width size from the widest list option width
48-
- `dataTest` will add a `data-test` attribute on the `.ms-parent` and `.ms-drop` divs for easier E2E testing
49-
- `useSelectOptionLabel` will use the `<option label="">` (from select option value) that can be used to display shorter text of selected options.
50-
- example: will show "1,3" instead of "January,March" (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options31))
51-
- `useSelectOptionLabelToHtml` similar to `useSelectOptionLabel` but also renders HTML.
52-
- `renderOptionLabelAsHtml` will render selected options as HTML code (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options27))
53-
- `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)).
54-
- `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))
55-
- `showSearchClear` show a clear button on the search filter input (see [demo](https://ghiscoding.github.io/multiple-select-vanilla/#/options34))
56-
57-
## CSP Compliance
58-
The library is now CSP (Content Security Policy) compliant since `v0.6.0`, however there are some exceptions to be aware of. When using any html string as template (with `textTemplate`, `labelTemplate`, `renderOptionLabelAsHtml` or `useSelectOptionLabelToHtml`), you will not be fully compliant unless you return `TrustedHTML`. You can achieve this by using the `sanitizer` method in combo with [DOMPurify](https://github.com/cure53/DOMPurify) to return `TrustedHTML` as shown below and with that in place you will again be CSP compliant.
59-
60-
```typescript
61-
import DOMPurify from 'dompurify';
62-
import { multipleSelect, MultipleSelectInstance } from 'multiple-select-vanilla';
63-
64-
const ms1 = multipleSelect('#select1', {
65-
name: 'my-select',
66-
single: false,
67-
useSelectOptionLabelToHtml: true,
68-
sanitizer: (html) => DOMPurify.sanitize(html, { RETURN_TRUSTED_TYPE: true }),
69-
data: [
70-
{
71-
text: '<i class="fa fa-star"></i> January',
72-
value: 1,
73-
},
74-
]
75-
});
76-
```
77-
with this code in place, we can use the following CSP meta tag (which is what we use in the lib demo, ref: [index.html](https://github.com/ghiscoding/multiple-select-vanilla/blob/main/demo/index.html#L7))
78-
```html
79-
<meta http-equiv="Content-Security-Policy" content="default-src 'self';style-src 'self' data:; img-src * 'self' data: https:; require-trusted-types-for 'script'; trusted-types dompurify">
80-
```
81-
**Note** 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`.
82-
83-
### Installation / Structure
84-
There are multiple ways to use the library
85-
1. `dist/browser`: Standalone build which assigns `multipleSelect` on the `window.multipleSelect` object
86-
- browser standalone means that you can simply load it with `<script></script>` and then `multipleSelect('#mySelect')`
87-
- 2 builds are available CJS (`.cjs`) and ESM (`.js`) and for ESM you will need to load it with `<script type="module">`
88-
2. `cjs`: to use as CommonJS with `require('multiple-select-vanilla')`
89-
3. `esm`: to use as ESM with `import from 'multiple-select-vanilla'`
90-
91-
```
92-
dist/
93-
browser/
94-
multiple-select.js # ESM build, use with: window.multipleSelect
95-
multiple-select.cjs # CJS (CommonJS) build, use with: window.multipleSelect
96-
cjs/
97-
multiple-select.cjs # CJS (CommonJS), use with: require()
98-
esm/
99-
multiple-select.js # ESM, use with: import from
100-
locales/
101-
multiple-select-all-locales.cjs # all-in-1 locales as CJS
102-
multiple-select-all-locales.js # all-in-1 locales as ESM
103-
..
104-
multiple-select-fr-FR.cjs # French locale as CJS
105-
multiple-select-fr-FR.js # French locale as ESM
106-
...
107-
styles/ # CSS and SASS Stylings
108-
css/
109-
sass/
110-
types/ # d.ts Type Definitions
111-
```
112-
113-
### Used by
114-
This fork was created mostly to drop jQuery, and is used by a few other libraries that I maintain:
115-
- [Angular-Slickgrid](https://github.com/ghiscoding/Angular-Slickgrid)
116-
- [Aurelia-Slickgrid](https://github.com/ghiscoding/aurelia-slickgrid)
117-
- [Slickgrid-React](https://github.com/ghiscoding/slickgrid-react)
118-
- [Slickgrid-Universal](https://github.com/ghiscoding/slickgrid-universal)
119-
120-
## Contributions
121-
122-
[![PR](https://img.shields.io/badge/PR-Welcome-1abc9c)](https://github.com/ghiscoding/multiple-select-vanilla/pulls)
123-
124-
[Pull Request](https://github.com/ghiscoding/multiple-select-vanilla/pulls) are welcome, feel free to contribute.
125-
126-
### Development / Contributions
127-
128-
If you wish to contribute to the project, please follow these steps:
129-
130-
**Note**: this project uses [pnpm workspaces](https://pnpm.io/workspaces), you can install pnpm by following their [installation](https://pnpm.io/installation) or simply run `npx pnpm` to run any of the pnpm scripts shown below:
131-
132-
1. clone the lib:
133-
- `git clone https://github.com/ghiscoding/multiple-select-vanilla`
134-
2. install with **pnpm** from the root:
135-
- `pnpm install` OR `npx pnpm install`
136-
3. run a full TypeScript build
137-
- `pnpm run build` OR `npx pnpm run build`
138-
4. run in development mode (lib & demo)
139-
- `pnpm run dev` OR `npx pnpm run dev`
140-
141-
#### Pull Request Contribution
142-
143-
Before submitting a PR (pull request), please make sure that you followed these steps for your PR to succeed:
144-
1. make sure that you already ran `pnpm install`
145-
2. run the Prettier code formatting npm script (or use step 3)
146-
- `pnpm run prettier:write`
147-
3. run a full Build (this will also run Prettier format, so you could skip step 2)
148-
- `pnpm run build`

0 commit comments

Comments
 (0)