treeselectjs 0.14.1 → 0.14.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +17 -14
  3. package/package.json +82 -79
package/LICENSE CHANGED
@@ -1,6 +1,6 @@
1
1
  MIT License
2
2
 
3
- Copyright (c) 2022 Dzmitry Zhuraukou
3
+ Copyright (c) 2026 Dzmitry Zhuraukou
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy
6
6
  of this software and associated documentation files (the "Software"), to deal
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
- # Treeselect JS component
1
+ # Treeselect JS component
2
2
 
3
- A multi-select js component with nested options.
3
+ A multi-select JS component with nested options.
4
4
 
5
5
  - React wrapper - https://www.npmjs.com/package/react-treeselectjs
6
6
  - Vue wrapper - https://www.npmjs.com/package/vue-treeselectjs
@@ -15,7 +15,7 @@ Build data:
15
15
 
16
16
  **Live Demo:** https://dipson88.github.io/treeselectjs/
17
17
 
18
- ![Example img](https://github.com/dipson88/treeselectjs/blob/main/treeselectjs.png?raw=true)
18
+ ![Example img](https://github.com/dipson88/treeselectjs/blob/main/assets/treeselectjs.png?raw=true)
19
19
 
20
20
  ### Support
21
21
  You can buy me a coffee if you want to support my work. Thank you!
@@ -27,16 +27,16 @@ You can buy me a coffee if you want to support my work. Thank you!
27
27
  npm install --save treeselectjs
28
28
  ```
29
29
  Import treeselectjs (ES)
30
- ```
30
+ ```js
31
31
  import Treeselect from 'treeselectjs'
32
32
 
33
33
  @import 'treeselectjs/dist/treeselectjs.css' // Styles
34
34
  ```
35
35
 
36
36
  Import treeselectjs (UMD)
37
- ```
38
- <script src="https://cdn.jsdelivr.net/npm/treeselectjs@0.14.1/dist/treeselectjs.umd.js"></script>
39
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/treeselectjs@0.14.1/dist/treeselectjs.css" />
37
+ ```html
38
+ <script src="https://cdn.jsdelivr.net/npm/treeselectjs/dist/treeselectjs.umd.js"></script>
39
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/treeselectjs/dist/treeselectjs.css" />
40
40
  ...
41
41
  <script>
42
42
  ...
@@ -46,7 +46,7 @@ Import treeselectjs (UMD)
46
46
  ```
47
47
 
48
48
  Example
49
- ```
49
+ ```js
50
50
  import Treeselect from 'treeselectjs'
51
51
 
52
52
  const options = [
@@ -122,7 +122,7 @@ slot.addEventListener('click', (e) => {
122
122
  #### Core props
123
123
  Name | Type (default) | Description
124
124
  ------------- | ------------- | -------------
125
- **parentHtmlContainer** | HTMLElement (required!) | It should be a HTML element (div), it will be changed to the list container.
125
+ **parentHtmlContainer** | HTMLElement (required!) | It should be an HTML element (e.g. a div); it will be used as the list container.
126
126
  **value** | Array[String \| Number] ([]) | An array of `value` from `options` prop. This value will be selected on load of the treeselect. You can call `updateValue` to update prop or set value `treeselect.value` and call `mount`. The `value` changes if you check/uncheck checkboxes or remove tags from the input.
127
127
  **options** | Array[Object] ([]) | It is an array of objects ```{name: String, value: String \| Number, disabled?: Boolean, htmlAttr?: object, isGroupSelectable?: boolean, children: [] }```, where children are the same array of objects. Do not use duplicated `value` field. But you can use duplicated names. [Read more](#option-description).
128
128
  **disabled** | Boolean (false) | List will be disabled.
@@ -143,8 +143,8 @@ Name | Type (default) | Description
143
143
  **alwaysOpen** | Boolean (false) | List will be always opened. You can use it for comfortable style changing. If you want to use it as an opened list, turn `staticList` to `true`.
144
144
  **showCount** | Boolean (false) | Shows count of children near the group's name.
145
145
  **staticList** | Boolean (false) | Add the list as a static DOM element. List doesn't overlap content. This prop will be ignored if you use `appendToBody`.
146
- **emptyText** | String ('No results found...') | A empty list text.
147
- **listSlotHtmlComponent** | HTMLElement (null) | It should be a HTML element, it will be append to the end of the list.
146
+ **emptyText** | String ('No results found...') | An empty list text.
147
+ **listSlotHtmlComponent** | HTMLElement (null) | It should be an HTML element; it will be appended to the end of the list.
148
148
  **direction** | String (auto) | A force direction for the list. Supported values: `auto`, `top`, `bottom`.
149
149
  **expandSelected** | Boolean (false) | All groups which have checked values will be expanded on the init.
150
150
  **saveScrollPosition** | Boolean (true) | The list saves the last scroll position before close. If you open the list your scroll will be on the previous position. If you set the value to `false` - the scroll will have position 0 and the first item will be focused every time.
@@ -154,7 +154,7 @@ Name | Type (default) | Description
154
154
  Name | Type (default) | Description
155
155
  ------------- | ------------- | -------------
156
156
  **showTags** | Boolean (true) | Selected values look like tags. The false value shows results as '{count} elements selected'. You can change text if you use `tagsCountText` prop. For one selected element, you will see a name of this element.
157
- **tagsCountText** | String ('elements selected') | This text will be shown if you use 'showTags'. This text will be inserted after the count of the selected elements - ```'{count} {tagsCountText}'```.
157
+ **tagsCountText** | String ('elements selected') | Shown when `showTags` is false; inserted after the count: `'{count} {tagsCountText}'`.
158
158
  **tagsSortFn** | `(a: TagsSortItem, b: TagsSortItem) => number` \| `null` (null) | Defines the sorting order for tags in the input field.<br>`TagsSortItem` - `{ value: ValueOptionType, name: string }`.
159
159
  **clearable** | Boolean (true) | Clear icon is available.
160
160
  **searchable** | Boolean (true) | Search is available.
@@ -181,7 +181,7 @@ Name | Type (default) | Description
181
181
  ---
182
182
 
183
183
  ### Option description
184
- Is is description of the one option of the [`options`](#core-props) prop:
184
+ This is the description of one option in the [`options`](#core-props) prop:
185
185
  Name | Type | Description
186
186
  ------------- | ------------- | -------------
187
187
  **value** | String \| Number (required!) | It is a value of the node. **It should be unique!**
@@ -260,8 +260,11 @@ body {
260
260
  2) If you want to update props, set props to the entity of the class and then call **mount()** method.
261
261
  3) Use **updateValue()** method to update only the value.
262
262
  4) If you need to delete List from the DOM when you don't need treeselect anymore - call **destroy()**.
263
- 5) Do not use **duplicated** values for the options. You will see a error with duplicated values. But you can use duplicated names.
263
+ 5) Do not use **duplicated** values for the options. You will see an error with duplicated values. But you can use duplicated names.
264
264
  6) **Value** prop inside the **options** prop should be a **String** or **Number**.
265
265
  7) If you use **isSingleSelect** prop, you should pass only a single **value** without an array.
266
266
  8) If you use **isSingleSelect** prop, you can set **showTags** to false. It helps to show treeselect as a dropdown. Also you can disable selecting of group's nodes with help of **disabledBranchNode**.
267
267
  9) If you use a large list of options and see a problem with performance, try to use **isBoostedRendering** prop.
268
+
269
+ ### License
270
+ MIT
package/package.json CHANGED
@@ -1,79 +1,82 @@
1
- {
2
- "name": "treeselectjs",
3
- "version": "0.14.1",
4
- "description": "Treeselect JS",
5
- "main": "./dist/treeselectjs.umd.js",
6
- "module": "./dist/treeselectjs.mjs",
7
- "types": "./dist/treeselectjs.d.ts",
8
- "exports": {
9
- ".": {
10
- "import": {
11
- "types": "./dist/treeselectjs.d.ts",
12
- "default": "./dist/treeselectjs.mjs"
13
- },
14
- "require": {
15
- "types": "./dist/treeselectjs.d.ts",
16
- "default": "./dist/treeselectjs.umd.js"
17
- }
18
- },
19
- "./dist/treeselectjs.css": {
20
- "import": "./dist/treeselectjs.css",
21
- "require": "./dist/treeselectjs.css"
22
- }
23
- },
24
- "scripts": {
25
- "dev": "vite --port 5173",
26
- "build": "tsc && vite build",
27
- "typecheck": "tsc --project tsconfig.app.json --noEmit && tsc --project tsconfig.jest.json --noEmit && tsc --project tsconfig.cypress.json --noEmit",
28
- "format": "biome format --write",
29
- "lint": "biome lint",
30
- "lint:fix": "biome lint --write",
31
- "check": "biome check --write",
32
- "jest:watch": "jest --watch",
33
- "jest:run": "jest",
34
- "cypress:open": "cypress open",
35
- "cypress:run": "cypress run",
36
- "test": "npm run typecheck && npm run jest:run && npm run cypress:run"
37
- },
38
- "repository": {
39
- "type": "git",
40
- "url": "git+https://github.com/dipson88/treeselectjs.git"
41
- },
42
- "keywords": [
43
- "treeselect",
44
- "select",
45
- "groupselect",
46
- "js",
47
- "ts",
48
- "typescript",
49
- "vanilla"
50
- ],
51
- "author": "Dzmitry Zhuraukou",
52
- "license": "MIT",
53
- "bugs": {
54
- "url": "https://github.com/dipson88/treeselectjs/issues"
55
- },
56
- "homepage": "https://github.com/dipson88/treeselectjs#readme",
57
- "devDependencies": {
58
- "@biomejs/biome": "^2.4.4",
59
- "@testing-library/dom": "^10.4.0",
60
- "@testing-library/jest-dom": "^6.6.3",
61
- "@types/jest": "^29.5.14",
62
- "cypress": "^13.17.0",
63
- "identity-obj-proxy": "^3.0.0",
64
- "jest": "^29.7.0",
65
- "jest-environment-jsdom": "^29.7.0",
66
- "resize-observer-polyfill": "^1.5.1",
67
- "ts-jest": "^29.4.6",
68
- "ts-node": "^10.9.2",
69
- "typescript": "^5.8.2",
70
- "vite": "^7.3.1",
71
- "vite-plugin-dts": "^4.5.4"
72
- },
73
- "overrides": {
74
- "minimatch": ">=10.2.4"
75
- },
76
- "files": [
77
- "dist"
78
- ]
79
- }
1
+ {
2
+ "name": "treeselectjs",
3
+ "version": "0.14.2",
4
+ "description": "Treeselect JS",
5
+ "main": "./dist/treeselectjs.umd.js",
6
+ "module": "./dist/treeselectjs.mjs",
7
+ "types": "./dist/treeselectjs.d.ts",
8
+ "exports": {
9
+ ".": {
10
+ "import": {
11
+ "types": "./dist/treeselectjs.d.ts",
12
+ "default": "./dist/treeselectjs.mjs"
13
+ },
14
+ "require": {
15
+ "types": "./dist/treeselectjs.d.ts",
16
+ "default": "./dist/treeselectjs.umd.js"
17
+ }
18
+ },
19
+ "./dist/treeselectjs.css": {
20
+ "import": "./dist/treeselectjs.css",
21
+ "require": "./dist/treeselectjs.css"
22
+ }
23
+ },
24
+ "repository": {
25
+ "type": "git",
26
+ "url": "git+https://github.com/dipson88/treeselectjs.git",
27
+ "directory": "packages/treeselectjs"
28
+ },
29
+ "keywords": [
30
+ "treeselect",
31
+ "select",
32
+ "groupselect",
33
+ "js",
34
+ "ts",
35
+ "typescript",
36
+ "vanilla"
37
+ ],
38
+ "author": "Dzmitry Zhuraukou",
39
+ "license": "MIT",
40
+ "bugs": {
41
+ "url": "https://github.com/dipson88/treeselectjs/issues"
42
+ },
43
+ "homepage": "https://github.com/dipson88/treeselectjs/tree/main/packages/treeselectjs#readme",
44
+ "devDependencies": {
45
+ "@biomejs/biome": "^2.4.4",
46
+ "@testing-library/dom": "^10.4.0",
47
+ "@testing-library/jest-dom": "^6.6.3",
48
+ "@types/jest": "^29.5.14",
49
+ "@types/node": "^22.10.0",
50
+ "cypress": "^13.17.0",
51
+ "identity-obj-proxy": "^3.0.0",
52
+ "jest": "^29.7.0",
53
+ "jest-environment-jsdom": "^29.7.0",
54
+ "resize-observer-polyfill": "^1.5.1",
55
+ "ts-jest": "^29.4.6",
56
+ "ts-node": "^10.9.2",
57
+ "typescript": "^5.8.2",
58
+ "vite": "^7.3.1",
59
+ "vite-plugin-dts": "^4.5.4"
60
+ },
61
+ "overrides": {
62
+ "minimatch": ">=10.2.4"
63
+ },
64
+ "files": [
65
+ "dist"
66
+ ],
67
+ "scripts": {
68
+ "dev": "vite --port 5173",
69
+ "dev:ci": "vite --port 5173 --host 127.0.0.1",
70
+ "build": "tsc && vite build",
71
+ "typecheck": "tsc --project tsconfig.app.json --noEmit && tsc --project tsconfig.jest.json --noEmit && tsc --project tsconfig.cypress.json --noEmit",
72
+ "format": "biome format --write",
73
+ "lint": "biome lint",
74
+ "lint:fix": "biome lint --write",
75
+ "check": "biome check --write",
76
+ "jest:watch": "jest --watch",
77
+ "jest:run": "jest",
78
+ "cypress:open": "cypress open",
79
+ "cypress:run": "cypress run",
80
+ "test": "npm run typecheck && npm run jest:run && npm run cypress:run"
81
+ }
82
+ }