treeselectjs 0.6.0 → 0.8.0
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 +79 -29
- package/dist/treeselectjs.css +1 -1
- package/dist/treeselectjs.d.ts +39 -20
- package/dist/treeselectjs.mjs +974 -0
- package/dist/treeselectjs.umd.js +1 -0
- package/package.json +21 -47
- 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.0/dist/treeselectjs.umd.js"></script>
|
|
32
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/treeselectjs@0.8.0/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
|
})
|
|
@@ -98,16 +109,38 @@ slot.addEventListener('click', (e) => {
|
|
|
98
109
|
alert('Slot click!')
|
|
99
110
|
})
|
|
100
111
|
```
|
|
112
|
+
---
|
|
101
113
|
|
|
102
114
|
### Props
|
|
115
|
+
|
|
116
|
+
#### Core props
|
|
103
117
|
Name | Type (default) | Description
|
|
104
118
|
------------- | ------------- | -------------
|
|
105
119
|
**parentHtmlContainer** | HTMLElement (required!) | It should be a HTML element (div), it will be changed to the list container.
|
|
106
120
|
**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.
|
|
107
|
-
**options** | Array[Object] ([]) | It is an array of objects ```{
|
|
121
|
+
**options** | Array[Object] ([]) | It is an array of objects ```{name: String, value: String, disabled?: Boolean, htmlAttr?: object, 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).
|
|
122
|
+
**disabled** | Boolean (false) | List will be disabled.
|
|
123
|
+
**id** | String ('') | id attribute for the accessibility.
|
|
124
|
+
**isSingleSelect** | Boolean (false) | Converts multi-select to the single value select. Checkboxes will be removed. You should pass only one id instead of array of values. Also you can set **showTags** to false. It helps to show treeselect as a dropdown.
|
|
125
|
+
**isGroupedValue** | Boolean (false) | Return groups if they selected instead of separate ids. Treeselect returns only leaves ids by default.
|
|
126
|
+
|
|
127
|
+
#### List settings props
|
|
128
|
+
Name | Type (default) | Description
|
|
129
|
+
------------- | ------------- | -------------
|
|
130
|
+
**disabledBranchNode** | Boolean (false) | It is impossible to select groups. You can select only leaves.
|
|
108
131
|
**openLevel** | Number (0) | All groups will be opened to this level.
|
|
109
132
|
**appendToBody** | Boolean (false) | List will be appended to the body instead of the input container.
|
|
110
133
|
**alwaysOpen** | Boolean (false) | List will be always opened. You can use it for comfortable style changing. If you what to use it as an opened list, turn `staticList` to `true`.
|
|
134
|
+
**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`.
|
|
135
|
+
**emptyText** | String ('No results found...') | A empty list text.
|
|
136
|
+
**listSlotHtmlComponent** | HTMLElement (null) | It should be a HTML element, it will be append to the end of the list.
|
|
137
|
+
**direction** | String (auto) | A force direction for the list. Supported values: `auto`, `top`, `bottom`.
|
|
138
|
+
**expandSelected** | Boolean (false) | All groups which have checked values will be expanded on the init.
|
|
139
|
+
**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.
|
|
140
|
+
|
|
141
|
+
#### Input settings props
|
|
142
|
+
Name | Type (default) | Description
|
|
143
|
+
------------- | ------------- | -------------
|
|
111
144
|
**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.
|
|
112
145
|
**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}'```.
|
|
113
146
|
**showCount** | Boolean (false) | Shows count of children near the group's name.
|
|
@@ -115,21 +148,34 @@ Name | Type (default) | Description
|
|
|
115
148
|
**searchable** | Boolean (true) | Search is available.
|
|
116
149
|
**placeholder** | String ('Search...') | Placeholder text.
|
|
117
150
|
**grouped** | Boolean (true) | Show groups in the input and group leafs if all group selected.
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
**id** | String ('') | id attribute for the accessibility.
|
|
123
|
-
**isSingleSelect** | Boolean (false) | Converts multi-select to the single value select. Checkboxes will be removed. You should pass only one id instead of array of values. Also you can set **showTags** to false. It helps to show treeselect as a dropdown.
|
|
124
|
-
**isGroupedValue** | Boolean (false) | Return groups if they selected instead of separate ids. Treeselect returns only leaves ids by default.
|
|
125
|
-
**disabledBranchNode** | Boolean (false) | It is impossible to select groups. You can select only leaves.
|
|
126
|
-
**direction** | String (auto) | A force direction for the list. Supported values: `auto`, `top`, `bottom`.
|
|
127
|
-
**iconElements** | Object({ arrowUp, ... }) | Object contains all svg icons. You can use HTMLElement or a String to reset values from the default Object. Object: ```iconElements: { arrowUp, arrowDown, arrowRight, attention, clear, cross, check, partialCheck }```. After reset of icon you have to update styles if it is necessary, use `alwaysOpen` prop for more comfortable work with styles changes.
|
|
151
|
+
|
|
152
|
+
#### Callback props
|
|
153
|
+
Name | Type (default) | Description
|
|
154
|
+
------------- | ------------- | -------------
|
|
128
155
|
**inputCallback** | (value) => void (undefined) | Callback method for `input` if you don't want to to eventListener.
|
|
129
156
|
**openCallback** | (value) => void (undefined) | Callback method for `open` if you don't want to use eventListener.
|
|
130
157
|
**closeCallback** | (value) => void (undefined) | Callback method for `close` if you don't want to use eventListener.
|
|
131
158
|
**nameChangeCallback** | (name) => void (undefined) | Callback method for `name-change` if you don't want to use eventListener.
|
|
132
159
|
|
|
160
|
+
#### Additional props
|
|
161
|
+
Name | Type (default) | Description
|
|
162
|
+
------------- | ------------- | -------------
|
|
163
|
+
**iconElements** | Object({ arrowUp, ... }) | Object contains all svg icons. You can use HTMLElement or a String to reset values from the default Object. Object: ```iconElements: { arrowUp, arrowDown, arrowRight, attention, clear, cross, check, partialCheck }```. After reset of icon you have to update styles if it is necessary, use `alwaysOpen` prop for more comfortable work with styles changes.
|
|
164
|
+
|
|
165
|
+
---
|
|
166
|
+
|
|
167
|
+
### Option description
|
|
168
|
+
Is is description of the one option of the [`options`](#core-props) prop:
|
|
169
|
+
Name | Type | Description
|
|
170
|
+
------------- | ------------- | -------------
|
|
171
|
+
**value** | String \| Number (required!) | It is a value of the node. **It should be unique!**
|
|
172
|
+
**name** | String (required!) | It is the name of the node. **Can be duplicated.**
|
|
173
|
+
**disabled** | Boolean (optional) | The node will be disabled. It is an optional field, you can skip it if no need to work with disabled values.
|
|
174
|
+
**htmlAttr** | Object (optional) | The object of the HTML attributes, the value of the object should be a String type. These attributes will be merged into the node HTML tag.
|
|
175
|
+
**children** | {name: String, value: String, disabled?: Boolean, htmlAttr?: object, children: [] }[] | Children are the same array of objects.
|
|
176
|
+
|
|
177
|
+
---
|
|
178
|
+
|
|
133
179
|
### Emits
|
|
134
180
|
Name | Return Type | Description
|
|
135
181
|
------------- | ------------- | -------------
|
|
@@ -138,6 +184,8 @@ Name | Return Type | Description
|
|
|
138
184
|
**close** | Array[String \| Number] | Returns selected ids, action is triggered on closing the list. Add `eventListener` or use `closeCallback` prop to get value.
|
|
139
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.
|
|
140
186
|
|
|
187
|
+
---
|
|
188
|
+
|
|
141
189
|
### Methods
|
|
142
190
|
Name | Params | Description
|
|
143
191
|
------------- | ------------- | -------------
|
|
@@ -147,6 +195,8 @@ Name | Params | Description
|
|
|
147
195
|
**focus** | None | Focuses treeselect input without open/close state changes.
|
|
148
196
|
**toggleOpenClose** | None | Open or close treeselect list and focus treeselect input.
|
|
149
197
|
|
|
198
|
+
---
|
|
199
|
+
|
|
150
200
|
### Notes
|
|
151
201
|
1) If you want to change the padding of the element you can use CSS selector. I've added **'group'** and **'level'** attributes, but you have to use **!important**.
|
|
152
202
|
2) If you want to update props, set props to the entity of the class and then call **mount()** method.
|
|
@@ -155,4 +205,4 @@ Name | Params | Description
|
|
|
155
205
|
5) Do not use **duplicated** values for the options. You will see a error with duplicated values. But you can use duplicated names.
|
|
156
206
|
6) **Value** prop inside the **options** prop should be a **String** or **Number**.
|
|
157
207
|
7) If you use **isSingleSelect** prop, you should pass only a single **id** as a value.
|
|
158
|
-
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**.
|
|
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,11 +1,17 @@
|
|
|
1
|
-
type
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
declare type DirectionType = 'auto' | 'top' | 'bottom';
|
|
2
|
+
|
|
3
|
+
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;
|
|
6
12
|
};
|
|
7
|
-
|
|
8
|
-
interface ITreeselect {
|
|
13
|
+
|
|
14
|
+
declare interface ITreeselect {
|
|
9
15
|
parentHtmlContainer: HTMLElement;
|
|
10
16
|
value: ValueOptionType[] | ValueOptionType;
|
|
11
17
|
options: OptionType[];
|
|
@@ -28,7 +34,10 @@ interface ITreeselect {
|
|
|
28
34
|
showCount: boolean;
|
|
29
35
|
disabledBranchNode: boolean;
|
|
30
36
|
direction: DirectionType;
|
|
37
|
+
expandSelected: boolean;
|
|
38
|
+
saveScrollPosition: boolean;
|
|
31
39
|
iconElements: IconsType;
|
|
40
|
+
ungroupedValue: ValueOptionType[];
|
|
32
41
|
groupedValue: ValueOptionType[];
|
|
33
42
|
isListOpened: boolean;
|
|
34
43
|
selectedName: string;
|
|
@@ -43,7 +52,8 @@ interface ITreeselect {
|
|
|
43
52
|
focus: () => void;
|
|
44
53
|
toggleOpenClose: () => void;
|
|
45
54
|
}
|
|
46
|
-
|
|
55
|
+
|
|
56
|
+
declare interface ITreeselectParams {
|
|
47
57
|
parentHtmlContainer: HTMLElement;
|
|
48
58
|
value?: ValueOptionType[] | ValueOptionType;
|
|
49
59
|
options?: OptionType[];
|
|
@@ -66,26 +76,27 @@ interface ITreeselectParams {
|
|
|
66
76
|
showCount?: boolean;
|
|
67
77
|
disabledBranchNode?: boolean;
|
|
68
78
|
direction?: DirectionType;
|
|
79
|
+
expandSelected?: boolean;
|
|
80
|
+
saveScrollPosition?: boolean;
|
|
69
81
|
iconElements?: Partial<IconsType>;
|
|
70
82
|
inputCallback?: (value: ValueOptionType[] | ValueOptionType) => void;
|
|
71
83
|
openCallback?: (value: ValueOptionType[] | ValueOptionType) => void;
|
|
72
84
|
closeCallback?: (value: ValueOptionType[] | ValueOptionType) => void;
|
|
73
85
|
nameChangeCallback?: (name: string) => void;
|
|
74
86
|
}
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
check: string | HTMLElement;
|
|
83
|
-
partialCheck: string | HTMLElement;
|
|
87
|
+
|
|
88
|
+
declare type OptionType = {
|
|
89
|
+
value: ValueOptionType;
|
|
90
|
+
name: string;
|
|
91
|
+
disabled?: boolean;
|
|
92
|
+
htmlAttr?: object;
|
|
93
|
+
children: OptionType[];
|
|
84
94
|
};
|
|
85
|
-
|
|
95
|
+
|
|
96
|
+
declare class Treeselect implements ITreeselect {
|
|
86
97
|
#private;
|
|
87
98
|
parentHtmlContainer: HTMLElement;
|
|
88
|
-
value: ValueOptionType[];
|
|
99
|
+
value: ValueOptionType[] | ValueOptionType;
|
|
89
100
|
options: OptionType[];
|
|
90
101
|
openLevel: number;
|
|
91
102
|
appendToBody: boolean;
|
|
@@ -106,16 +117,19 @@ export class Treeselect implements ITreeselect {
|
|
|
106
117
|
showCount: boolean;
|
|
107
118
|
disabledBranchNode: boolean;
|
|
108
119
|
direction: DirectionType;
|
|
120
|
+
expandSelected: boolean;
|
|
121
|
+
saveScrollPosition: boolean;
|
|
109
122
|
iconElements: IconsType;
|
|
110
123
|
inputCallback: ((value: ValueOptionType[] | ValueOptionType) => void) | undefined;
|
|
111
124
|
openCallback: ((value: ValueOptionType[] | ValueOptionType) => void) | undefined;
|
|
112
125
|
closeCallback: ((value: ValueOptionType[] | ValueOptionType) => void) | undefined;
|
|
113
126
|
nameChangeCallback: ((name: string) => void) | undefined;
|
|
127
|
+
ungroupedValue: ValueOptionType[];
|
|
114
128
|
groupedValue: ValueOptionType[];
|
|
115
129
|
isListOpened: boolean;
|
|
116
130
|
selectedName: string;
|
|
117
131
|
srcElement: HTMLElement | null;
|
|
118
|
-
constructor({ parentHtmlContainer, value, options, openLevel, appendToBody, alwaysOpen, showTags, tagsCountText, clearable, searchable, placeholder, grouped, isGroupedValue, listSlotHtmlComponent, disabled, emptyText, staticList, id, isSingleSelect, showCount, disabledBranchNode, direction, iconElements, inputCallback, openCallback, closeCallback, nameChangeCallback }: ITreeselectParams);
|
|
132
|
+
constructor({ parentHtmlContainer, value, options, openLevel, appendToBody, alwaysOpen, showTags, tagsCountText, clearable, searchable, placeholder, grouped, isGroupedValue, listSlotHtmlComponent, disabled, emptyText, staticList, id, isSingleSelect, showCount, disabledBranchNode, direction, expandSelected, saveScrollPosition, iconElements, inputCallback, openCallback, closeCallback, nameChangeCallback }: ITreeselectParams);
|
|
119
133
|
mount(): void;
|
|
120
134
|
updateValue(newValue: ValueOptionType[] | ValueOptionType): void;
|
|
121
135
|
destroy(): void;
|
|
@@ -126,3 +140,8 @@ export class Treeselect implements ITreeselect {
|
|
|
126
140
|
blurWindowHandler(): void;
|
|
127
141
|
updateListPosition(): void;
|
|
128
142
|
}
|
|
143
|
+
export default Treeselect;
|
|
144
|
+
|
|
145
|
+
declare type ValueOptionType = string | number;
|
|
146
|
+
|
|
147
|
+
export { }
|