treeselectjs 0.7.0 → 0.8.1
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.
- package/README.md +32 -21
- package/dist/treeselectjs.css +1 -1
- package/dist/treeselectjs.d.ts +29 -20
- package/dist/treeselectjs.mjs +974 -0
- package/dist/treeselectjs.umd.js +1 -0
- package/package.json +20 -46
- package/dist/treeselectjs.cjs.js +0 -1
- package/dist/treeselectjs.mjs.js +0 -1
package/README.md
CHANGED
|
@@ -6,6 +6,11 @@ A multi-select js component with nested options.
|
|
|
6
6
|
- Screen sensitive direction
|
|
7
7
|
- Typescript support
|
|
8
8
|
|
|
9
|
+
Build data:
|
|
10
|
+
- treeselectjs.mjs 48.64 kB │ gzip: 11.03 kB
|
|
11
|
+
- treeselectjs.umd.js 39.57 kB │ gzip: 10.13 kB
|
|
12
|
+
- treeselectjs.css 6.41 kB │ gzip: 1.27 kB
|
|
13
|
+
|
|
9
14
|
**Live Demo:** https://dipson88.github.io/treeselectjs/
|
|
10
15
|
|
|
11
16
|
|
|
@@ -16,61 +21,67 @@ npm install --save treeselectjs
|
|
|
16
21
|
```
|
|
17
22
|
Import treeselectjs (ES)
|
|
18
23
|
```
|
|
19
|
-
import
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
```
|
|
23
|
-
const { Treeselect } = require('treeselectjs')
|
|
24
|
+
import Treeselect from 'treeselectjs'
|
|
25
|
+
|
|
26
|
+
@import 'treeselectjs/dist/treeselectjs.css // Styles
|
|
24
27
|
```
|
|
25
|
-
|
|
28
|
+
|
|
29
|
+
Import treeselectjs (UMD)
|
|
26
30
|
```
|
|
27
|
-
|
|
31
|
+
<script src="https://cdn.jsdelivr.net/npm/treeselectjs@0.8.1/dist/treeselectjs.umd.js"></script>
|
|
32
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/treeselectjs@0.8.1/dist/treeselectjs.css" />
|
|
33
|
+
...
|
|
34
|
+
<script>
|
|
35
|
+
...
|
|
36
|
+
const treeselect = new Treeselect({ ...props })
|
|
37
|
+
...
|
|
38
|
+
</script>
|
|
28
39
|
```
|
|
29
40
|
|
|
30
41
|
Example
|
|
31
42
|
```
|
|
32
|
-
import
|
|
43
|
+
import Treeselect from 'treeselectjs'
|
|
33
44
|
|
|
34
45
|
const options = [
|
|
35
46
|
{
|
|
36
47
|
name: 'England',
|
|
37
|
-
value:
|
|
48
|
+
value: 1,
|
|
38
49
|
children: [
|
|
39
50
|
{
|
|
40
51
|
name: 'London',
|
|
41
|
-
value:
|
|
52
|
+
value: 2,
|
|
42
53
|
children: [
|
|
43
54
|
{
|
|
44
55
|
name: 'Chelsea',
|
|
45
|
-
value:
|
|
56
|
+
value: 3,
|
|
46
57
|
children: []
|
|
47
58
|
},
|
|
48
59
|
{
|
|
49
60
|
name: 'West End',
|
|
50
|
-
value:
|
|
61
|
+
value: 4,
|
|
51
62
|
children: []
|
|
52
63
|
}
|
|
53
64
|
]
|
|
54
65
|
},
|
|
55
66
|
{
|
|
56
67
|
name: 'Brighton',
|
|
57
|
-
value:
|
|
68
|
+
value: 5,
|
|
58
69
|
children: []
|
|
59
70
|
}
|
|
60
71
|
]
|
|
61
72
|
},
|
|
62
73
|
{
|
|
63
74
|
name: 'France',
|
|
64
|
-
value:
|
|
75
|
+
value: 6,
|
|
65
76
|
children: [
|
|
66
77
|
{
|
|
67
78
|
name: 'Paris',
|
|
68
|
-
value:
|
|
79
|
+
value: 7,
|
|
69
80
|
children: []
|
|
70
81
|
},
|
|
71
82
|
{
|
|
72
83
|
name: 'Lyon',
|
|
73
|
-
value:
|
|
84
|
+
value: 8,
|
|
74
85
|
children: []
|
|
75
86
|
}
|
|
76
87
|
]
|
|
@@ -84,7 +95,7 @@ slot.innerHTML='<a class="treeselect-demo__slot" href="">Click!</a>'
|
|
|
84
95
|
const domElement = document.querySelector('.treeselect-demo')
|
|
85
96
|
const treeselect = new Treeselect({
|
|
86
97
|
parentHtmlContainer: domElement,
|
|
87
|
-
value: [
|
|
98
|
+
value: [4, 7, 8],
|
|
88
99
|
options: options,
|
|
89
100
|
listSlotHtmlComponent: slot
|
|
90
101
|
})
|
|
@@ -168,9 +179,9 @@ Name | Type | Description
|
|
|
168
179
|
### Emits
|
|
169
180
|
Name | Return Type | Description
|
|
170
181
|
------------- | ------------- | -------------
|
|
171
|
-
**input** | Array[String \| Number] | Returns selected
|
|
172
|
-
**open** | Array[String \| Number] | Returns selected
|
|
173
|
-
**close** | Array[String \| Number] | Returns selected
|
|
182
|
+
**input** | Array[String \| Number] | Returns selected values, action is triggered on change the list value. Add `eventListener` or use `inputCallback` prop to get value.
|
|
183
|
+
**open** | Array[String \| Number] | Returns selected values, action is triggered on opening the list. Add `eventListener` or use `openCallback` prop to get value.
|
|
184
|
+
**close** | Array[String \| Number] | Returns selected values, action is triggered on closing the list. Add `eventListener` or use `closeCallback` prop to get value.
|
|
174
185
|
**name-change** | String | Returns selected name inside the input, action is triggered on on change the list. Add `eventListener` or use `nameChangeCallback` prop to get name.
|
|
175
186
|
|
|
176
187
|
---
|
|
@@ -193,5 +204,5 @@ Name | Params | Description
|
|
|
193
204
|
4) If you need to delete List from the DOM when you don't need treeselect anymore - call **destroy()**.
|
|
194
205
|
5) Do not use **duplicated** values for the options. You will see a error with duplicated values. But you can use duplicated names.
|
|
195
206
|
6) **Value** prop inside the **options** prop should be a **String** or **Number**.
|
|
196
|
-
7) If you use **isSingleSelect** prop, you should pass only a single **
|
|
207
|
+
7) If you use **isSingleSelect** prop, you should pass only a single **value** without an array.
|
|
197
208
|
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**.
|
package/dist/treeselectjs.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.treeselect-input{width:100%;box-sizing:border-box;
|
|
1
|
+
.treeselect-input{width:100%;box-sizing:border-box;border:1px solid #d7dde4;border-radius:4px;display:flex;align-items:center;flex-wrap:wrap;padding:2px 40px 2px 4px;position:relative;min-height:37px;background-color:#fff;cursor:text}.treeselect-input--unsearchable{cursor:default}.treeselect-input--unsearchable .treeselect-input__edit{caret-color:transparent;cursor:default}.treeselect-input--unsearchable .treeselect-input__edit:focus{position:absolute;z-index:-1;left:0;min-width:0;width:0}.treeselect-input--value-not-selected .treeselect-input__edit,.treeselect-input--value-not-selected.treeselect-input--unsearchable .treeselect-input__edit:focus{z-index:auto;position:static;width:100%;max-width:100%}.treeselect-input--value-not-selected .treeselect-input__tags{gap:0}.treeselect-input__tags{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px;max-width:100%;width:100%;box-sizing:border-box}.treeselect-input__tags-element{display:inline-flex;align-items:center;background-color:#d7dde4;cursor:pointer;padding:2px 5px;border-radius:2px;font-size:14px;max-width:100%;box-sizing:border-box}.treeselect-input__tags-element:hover{background-color:#c5c7cb}.treeselect-input__tags-element:hover .treeselect-input__tags-cross svg{stroke:#eb4c42}.treeselect-input__tags-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.treeselect-input__tags-cross{display:flex;margin-left:2px}.treeselect-input__tags-cross svg{width:12px;height:12px}.treeselect-input__tags-count{font-size:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.treeselect-input__edit{flex:1;border:none;font-size:14px;text-overflow:ellipsis;width:100%;max-width:calc(100% - 45px);padding:0;position:absolute;z-index:-1;min-width:0}.treeselect-input__edit:focus{outline:none;min-width:30px;max-width:100%;z-index:auto;position:static}.treeselect-input__operators{display:flex;max-width:40px;position:absolute;right:2px}.treeselect-input__clear{display:flex;cursor:pointer}.treeselect-input__clear svg{stroke:#c5c7cb;width:17px;min-width:17px;height:20px}.treeselect-input__clear:hover svg{stroke:#838790}.treeselect-input__arrow{display:flex;cursor:pointer}.treeselect-input__arrow svg{stroke:#c5c7cb;width:20px;min-width:20px;height:20px}.treeselect-input__arrow:hover svg{stroke:#838790}.treeselect-list{width:100%;box-sizing:border-box;border:1px solid #d7dde4;overflow-y:auto;background-color:#fff;max-height:300px}.treeselect-list__group-container{box-sizing:border-box}.treeselect-list__item{display:flex;align-items:center;box-sizing:border-box;cursor:pointer;height:30px}.treeselect-list__item:focus{outline:none}.treeselect-list__item--focused{background-color:azure!important}.treeselect-list__item--hidden{display:none}.treeselect-list__item-icon{display:flex;align-items:center;cursor:pointer;height:20px;width:20px;min-width:20px}.treeselect-list__item-icon svg{pointer-events:none;width:100%;height:100%;stroke:#c5c7cb}.treeselect-list__item-icon *{pointer-events:none}.treeselect-list__item-icon:hover svg{stroke:#838790}.treeselect-list__item-checkbox-container{width:20px;height:20px;min-width:20px;border:1px solid #d7dde4;border-radius:3px;position:relative;background-color:#fff;pointer-events:none;box-sizing:border-box}.treeselect-list__item-checkbox-container svg{position:absolute;height:100%;width:100%}.treeselect-list__item-checkbox{margin:0;width:0;height:0;pointer-events:none;position:absolute;z-index:-1}.treeselect-list__item-checkbox-icon{position:absolute;height:100%;width:100%;left:0;top:0;text-align:left}.treeselect-list__item-label{width:100%;overflow:hidden;text-overflow:ellipsis;word-break:keep-all;white-space:nowrap;font-size:14px;padding-left:5px;pointer-events:none;text-align:left}.treeselect-list__item-label-counter{margin-left:3px;color:#838790;font-size:13px}.treeselect-list__empty{display:flex;align-items:center;height:30px;padding-left:4px}.treeselect-list__empty--hidden{display:none}.treeselect-list__empty-icon{display:flex;align-items:center}.treeselect-list__empty-text{font-size:14px;padding-left:5px;overflow:hidden;text-overflow:ellipsis;word-break:keep-all;white-space:nowrap}.treeselect-list__slot{position:sticky;box-sizing:border-box;width:100%;max-width:100%;bottom:0;background-color:#fff}.treeselect-list.treeselect-list--single-select .treeselect-list__item-checkbox-container,.treeselect-list.treeselect-list--disabled-branch-node .treeselect-list__item--group .treeselect-list__item-checkbox-container{display:none}.treeselect-list__item--checked{background-color:#e9f1f1}.treeselect-list.treeselect-list--single-select .treeselect-list__item--checked{background-color:transparent}.treeselect-list.treeselect-list--single-select .treeselect-list__item--single-selected{background-color:#e9f1f1}.treeselect-list__item .treeselect-list__item-checkbox-container svg{stroke:transparent}.treeselect-list__item--checked .treeselect-list__item-checkbox-container svg,.treeselect-list__item--partial-checked .treeselect-list__item-checkbox-container svg{stroke:#fff}.treeselect-list__item--checked .treeselect-list__item-checkbox-container,.treeselect-list__item--partial-checked .treeselect-list__item-checkbox-container{background-color:#52c67e}.treeselect-list__item--disabled .treeselect-list__item-checkbox-container{background-color:#e9f1f1}.treeselect-list__item--disabled .treeselect-list__item-label{color:#c5c7cb}.treeselect{width:100%;position:relative;box-sizing:border-box}.treeselect--disabled{pointer-events:none}.treeselect-list{position:absolute;left:0;border-radius:4px;box-sizing:border-box;z-index:1000}.treeselect .treeselect-list{position:absolute}.treeselect .treeselect-list--static{position:static}.treeselect-input--focused{border-color:#101010}.treeselect-input--opened.treeselect-input--top{border-top-color:transparent;border-top-left-radius:0;border-top-right-radius:0}.treeselect-input--opened.treeselect-input--bottom{border-bottom-color:transparent;border-bottom-left-radius:0;border-bottom-right-radius:0}.treeselect-list--focused{border-color:#101010}.treeselect-list--top,.treeselect-list--top-to-body{border-bottom-color:#d7dde4;border-bottom-left-radius:0;border-bottom-right-radius:0}.treeselect-list--bottom,.treeselect-list--bottom-to-body{border-top-color:#d7dde4;border-top-left-radius:0;border-top-right-radius:0}.treeselect-list--top{left:0;bottom:100%}.treeselect-list--bottom{left:0;top:100%}
|
package/dist/treeselectjs.d.ts
CHANGED
|
@@ -1,13 +1,17 @@
|
|
|
1
|
-
type
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
export declare type DirectionType = 'auto' | 'top' | 'bottom';
|
|
2
|
+
|
|
3
|
+
export declare type IconsType = {
|
|
4
|
+
arrowUp: string | HTMLElement;
|
|
5
|
+
arrowDown: string | HTMLElement;
|
|
6
|
+
arrowRight: string | HTMLElement;
|
|
7
|
+
attention: string | HTMLElement;
|
|
8
|
+
clear: string | HTMLElement;
|
|
9
|
+
cross: string | HTMLElement;
|
|
10
|
+
check: string | HTMLElement;
|
|
11
|
+
partialCheck: string | HTMLElement;
|
|
8
12
|
};
|
|
9
|
-
|
|
10
|
-
interface ITreeselect {
|
|
13
|
+
|
|
14
|
+
declare interface ITreeselect {
|
|
11
15
|
parentHtmlContainer: HTMLElement;
|
|
12
16
|
value: ValueOptionType[] | ValueOptionType;
|
|
13
17
|
options: OptionType[];
|
|
@@ -48,7 +52,8 @@ interface ITreeselect {
|
|
|
48
52
|
focus: () => void;
|
|
49
53
|
toggleOpenClose: () => void;
|
|
50
54
|
}
|
|
51
|
-
|
|
55
|
+
|
|
56
|
+
export declare interface ITreeselectParams {
|
|
52
57
|
parentHtmlContainer: HTMLElement;
|
|
53
58
|
value?: ValueOptionType[] | ValueOptionType;
|
|
54
59
|
options?: OptionType[];
|
|
@@ -79,17 +84,16 @@ interface ITreeselectParams {
|
|
|
79
84
|
closeCallback?: (value: ValueOptionType[] | ValueOptionType) => void;
|
|
80
85
|
nameChangeCallback?: (name: string) => void;
|
|
81
86
|
}
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
check: string | HTMLElement;
|
|
90
|
-
partialCheck: string | HTMLElement;
|
|
87
|
+
|
|
88
|
+
export declare type OptionType = {
|
|
89
|
+
value: ValueOptionType;
|
|
90
|
+
name: string;
|
|
91
|
+
disabled?: boolean;
|
|
92
|
+
htmlAttr?: object;
|
|
93
|
+
children: OptionType[];
|
|
91
94
|
};
|
|
92
|
-
|
|
95
|
+
|
|
96
|
+
declare class Treeselect implements ITreeselect {
|
|
93
97
|
#private;
|
|
94
98
|
parentHtmlContainer: HTMLElement;
|
|
95
99
|
value: ValueOptionType[] | ValueOptionType;
|
|
@@ -136,3 +140,8 @@ export class Treeselect implements ITreeselect {
|
|
|
136
140
|
blurWindowHandler(): void;
|
|
137
141
|
updateListPosition(): void;
|
|
138
142
|
}
|
|
143
|
+
export default Treeselect;
|
|
144
|
+
|
|
145
|
+
export declare type ValueOptionType = string | number;
|
|
146
|
+
|
|
147
|
+
export { }
|