treeselectjs 0.13.3 → 0.14.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 +55 -13
- package/dist/treeselectjs.css +1 -1
- package/dist/treeselectjs.d.ts +79 -2
- package/dist/treeselectjs.mjs +872 -828
- package/dist/treeselectjs.umd.js +1 -1
- package/package.json +15 -10
package/README.md
CHANGED
|
@@ -9,14 +9,19 @@ A multi-select js component with nested options.
|
|
|
9
9
|
- Typescript support
|
|
10
10
|
|
|
11
11
|
Build data:
|
|
12
|
-
- treeselectjs.mjs
|
|
13
|
-
- treeselectjs.umd.js
|
|
14
|
-
- treeselectjs.css
|
|
12
|
+
- treeselectjs.mjs 46.21 kB │ gzip: 10.82 kB
|
|
13
|
+
- treeselectjs.umd.js 36.09 kB │ gzip: 9.38 kB
|
|
14
|
+
- treeselectjs.css 8.24 kB │ gzip: 1.54 kB
|
|
15
15
|
|
|
16
16
|
**Live Demo:** https://dipson88.github.io/treeselectjs/
|
|
17
17
|
|
|
18
18
|
|
|
19
19
|
|
|
20
|
+
### Support
|
|
21
|
+
You can buy me a coffee if you want to support my work. Thank you!
|
|
22
|
+
|
|
23
|
+
<a href="https://www.buymeacoffee.com/dipson88" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
|
|
24
|
+
|
|
20
25
|
### Getting Started
|
|
21
26
|
```bash
|
|
22
27
|
npm install --save treeselectjs
|
|
@@ -30,8 +35,8 @@ import Treeselect from 'treeselectjs'
|
|
|
30
35
|
|
|
31
36
|
Import treeselectjs (UMD)
|
|
32
37
|
```
|
|
33
|
-
<script src="https://cdn.jsdelivr.net/npm/treeselectjs@0.
|
|
34
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/treeselectjs@0.
|
|
38
|
+
<script src="https://cdn.jsdelivr.net/npm/treeselectjs@0.14.0/dist/treeselectjs.umd.js"></script>
|
|
39
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/treeselectjs@0.14.0/dist/treeselectjs.css" />
|
|
35
40
|
...
|
|
36
41
|
<script>
|
|
37
42
|
...
|
|
@@ -111,7 +116,6 @@ slot.addEventListener('click', (e) => {
|
|
|
111
116
|
alert('Slot click!')
|
|
112
117
|
})
|
|
113
118
|
```
|
|
114
|
-
---
|
|
115
119
|
|
|
116
120
|
### Props
|
|
117
121
|
|
|
@@ -136,7 +140,7 @@ Name | Type (default) | Description
|
|
|
136
140
|
**disabledBranchNode** | Boolean (false) | It is impossible to select groups. You can select only leaves.
|
|
137
141
|
**openLevel** | Number (0) | All groups will be opened to this level.
|
|
138
142
|
**appendToBody** | Boolean (false) | List will be appended to the body instead of the input container.
|
|
139
|
-
**alwaysOpen** | Boolean (false) | List will be always opened. You can use it for comfortable style changing. If you
|
|
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`.
|
|
140
144
|
**showCount** | Boolean (false) | Shows count of children near the group's name.
|
|
141
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`.
|
|
142
146
|
**emptyText** | String ('No results found...') | A empty list text.
|
|
@@ -162,7 +166,7 @@ Check [Emits](#Emits) section for more info.
|
|
|
162
166
|
|
|
163
167
|
Name | Type (default) | Description
|
|
164
168
|
------------- | ------------- | -------------
|
|
165
|
-
**inputCallback** | (value) => void (undefined) | Callback method for `input` if you don't want to
|
|
169
|
+
**inputCallback** | (value) => void (undefined) | Callback method for `input` if you don't want to use eventListener.
|
|
166
170
|
**openCallback** | (value) => void (undefined) | Callback method for `open` if you don't want to use eventListener.
|
|
167
171
|
**closeCallback** | (value) => void (undefined) | Callback method for `close` if you don't want to use eventListener.
|
|
168
172
|
**nameChangeCallback** | (name) => void (undefined) | Callback method for `name-change` if you don't want to use eventListener.
|
|
@@ -212,6 +216,49 @@ Name | Params | Description
|
|
|
212
216
|
|
|
213
217
|
---
|
|
214
218
|
|
|
219
|
+
### Customizing colors
|
|
220
|
+
|
|
221
|
+
The component uses CSS custom properties (variables) for colors. Override them on the `.treeselect` container to match your theme:
|
|
222
|
+
|
|
223
|
+
| Variable | Default | Description |
|
|
224
|
+
|----------|---------|-------------|
|
|
225
|
+
| `--treeselect-border-color` | `#d7dde4` | Border color of input and list |
|
|
226
|
+
| `--treeselect-bg` | `#ffffff` | Background of the input |
|
|
227
|
+
| `--treeselect-border-focus` | `#101010` | Border color when focused |
|
|
228
|
+
| `--treeselect-tag-bg` | `#d7dde4` | Background of selected tags |
|
|
229
|
+
| `--treeselect-tag-bg-hover` | `#c5c7cb` | Tag background on hover |
|
|
230
|
+
| `--treeselect-tag-remove-hover` | `#eb4c42` | Remove (×) icon color on hover |
|
|
231
|
+
| `--treeselect-icon` | `#c5c7cb` | Arrow and clear icons |
|
|
232
|
+
| `--treeselect-icon-hover` | `#838790` | Icons on hover |
|
|
233
|
+
| `--treeselect-item-counter` | `#838790` | Group item count text |
|
|
234
|
+
| `--treeselect-item-focus-bg` | `#f0ffff` | List item background when focused |
|
|
235
|
+
| `--treeselect-item-selected-bg` | `#e9f1f1` | List item background when selected |
|
|
236
|
+
| `--treeselect-item-disabled-text` | `#c5cbca` | Disabled item text color |
|
|
237
|
+
| `--treeselect-checkbox-bg` | `#ffffff` | Checkbox background |
|
|
238
|
+
| `--treeselect-checkbox-border-color` | `#d7dde4` | Checkbox border color |
|
|
239
|
+
| `--treeselect-checkbox-checked-bg` | `#52c67e` | Checkbox fill when checked |
|
|
240
|
+
| `--treeselect-checkbox-checked-icon` | `#ffffff` | Checkmark color |
|
|
241
|
+
|
|
242
|
+
Example:
|
|
243
|
+
|
|
244
|
+
```css
|
|
245
|
+
body {
|
|
246
|
+
.treeselect {
|
|
247
|
+
--treeselect-border-color: #444;
|
|
248
|
+
--treeselect-bg: #1e1e1e;
|
|
249
|
+
--treeselect-border-focus: #6cb6ff;
|
|
250
|
+
--treeselect-tag-bg: #333;
|
|
251
|
+
--treeselect-tag-bg-hover: #444;
|
|
252
|
+
--treeselect-item-focus-bg: #2a2a2a;
|
|
253
|
+
--treeselect-item-selected-bg: #2d3a3a;
|
|
254
|
+
--treeselect-checkbox-checked-bg: #52c67e;
|
|
255
|
+
/* override other variables as needed */
|
|
256
|
+
}
|
|
257
|
+
}
|
|
258
|
+
```
|
|
259
|
+
|
|
260
|
+
---
|
|
261
|
+
|
|
215
262
|
### Notes
|
|
216
263
|
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**.
|
|
217
264
|
2) If you want to update props, set props to the entity of the class and then call **mount()** method.
|
|
@@ -222,8 +269,3 @@ Name | Params | Description
|
|
|
222
269
|
7) If you use **isSingleSelect** prop, you should pass only a single **value** without an array.
|
|
223
270
|
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**.
|
|
224
271
|
9) If you use a large list of options and see a problem with performance, try to use **isBoostedRendering** prop.
|
|
225
|
-
|
|
226
|
-
### Support
|
|
227
|
-
You can buy me a coffee if you want to support my work. Thank you!
|
|
228
|
-
|
|
229
|
-
<a href="https://www.buymeacoffee.com/dipson88" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
|
package/dist/treeselectjs.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.treeselect-input{width:100%;box-sizing:border-box;border:1px solid
|
|
1
|
+
.treeselect-input{width:100%;box-sizing:border-box;border:1px solid var(--treeselect-border-color);border-radius:4px;display:flex;align-items:center;flex-wrap:wrap;padding:2px 40px 2px 4px;position:relative;min-height:37px;background-color:var(--treeselect-bg);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}[dir=rtl] .treeselect-input{padding-right:4px;padding-left:40px}[dir=rtl] .treeselect-input__operators{right:unset;left:2px}.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:var(--treeselect-tag-bg);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:var(--treeselect-tag-bg-hover)}.treeselect-input__tags-element:hover .treeselect-input__tags-cross svg{stroke:var(--treeselect-tag-remove-hover)}.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{background-color:var(--treeselect-bg);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:var(--treeselect-icon);width:17px;min-width:17px;height:20px}.treeselect-input__clear:hover svg{stroke:var(--treeselect-icon-hover)}.treeselect-input__arrow{display:flex;cursor:pointer}.treeselect-input__arrow svg{stroke:var(--treeselect-icon);width:20px;min-width:20px;height:20px}.treeselect-input__arrow:hover svg{stroke:var(--treeselect-icon-hover)}.treeselect-list{width:100%;box-sizing:border-box;border:1px solid var(--treeselect-border-color);overflow-y:auto;background-color:var(--treeselect-bg);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,.treeselect-list__item--focused.treeselect-list__item--checked{background-color:var(--treeselect-item-focus-bg)}.treeselect-list__item--hidden{display:none}.treeselect-list__item--scroll-not-visible{visibility:hidden}.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:var(--treeselect-icon)}.treeselect-list__item-icon *{pointer-events:none}.treeselect-list__item-icon:hover svg{stroke:var(--treeselect-icon-hover)}.treeselect-list__item-checkbox-container{width:20px;height:20px;min-width:20px;border:1px solid var(--treeselect-checkbox-border-color);border-radius:3px;position:relative;background-color:var(--treeselect-checkbox-bg);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:var(--treeselect-item-counter);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:var(--treeselect-bg)}.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,.treeselect-list__item--non-selectable-group .treeselect-list__item-checkbox-container{display:none}.treeselect-list__item--checked{background-color:var(--treeselect-item-selected-bg)}.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:var(--treeselect-item-selected-bg)}.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:var(--treeselect-checkbox-checked-icon)}.treeselect-list__item--checked .treeselect-list__item-checkbox-container,.treeselect-list__item--partial-checked .treeselect-list__item-checkbox-container{background-color:var(--treeselect-checkbox-checked-bg)}.treeselect-list__item--disabled .treeselect-list__item-checkbox-container{background-color:var(--treeselect-item-selected-bg)}.treeselect-list__item--disabled .treeselect-list__item-label{color:var(--treeselect-item-disabled-text)}[dir=rtl] .treeselect-list__item-checkbox-icon{text-align:right}[dir=rtl] .treeselect-list__item-label{text-align:right;padding-right:5px;padding-left:unset}[dir=rtl] .treeselect-list__item--closed .treeselect-list__item-icon{transform:rotate(180deg)}[dir=rtl] .treeselect-list__empty{padding-right:4px;padding-left:unset}[dir=rtl] .treeselect-list__empty-text{padding-right:5px;padding-left:unset}.treeselect{--treeselect-border-color: #d7dde4;--treeselect-bg: #ffffff;--treeselect-border-focus: #101010;--treeselect-tag-bg: #d7dde4;--treeselect-tag-bg-hover: #c5c7cb;--treeselect-tag-remove-hover: #eb4c42;--treeselect-icon: #c5c7cb;--treeselect-icon-hover: #838790;--treeselect-item-counter: #838790;--treeselect-item-focus-bg: #f0ffff;--treeselect-item-selected-bg: #e9f1f1;--treeselect-item-disabled-text: #c5cbca;--treeselect-checkbox-bg: #ffffff;--treeselect-checkbox-border-color: #d7dde4;--treeselect-checkbox-checked-bg: #52c67e;--treeselect-checkbox-checked-icon: #ffffff;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:var(--treeselect-border-focus)}.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:var(--treeselect-border-focus)}.treeselect-list--top,.treeselect-list--top-to-body{border-bottom-color:var(--treeselect-border-color);border-bottom-left-radius:0;border-bottom-right-radius:0}.treeselect-list--bottom,.treeselect-list--bottom-to-body{border-top-color:var(--treeselect-border-color);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,5 +1,10 @@
|
|
|
1
|
+
/** Position of the dropdown list relative to the input: auto, top, or bottom. */
|
|
1
2
|
export declare type DirectionType = 'auto' | 'top' | 'bottom';
|
|
2
3
|
|
|
4
|
+
/**
|
|
5
|
+
* Icon set for arrows, checkboxes, clear, etc.
|
|
6
|
+
* Each value is an SVG string or an HTMLElement.
|
|
7
|
+
*/
|
|
3
8
|
export declare type IconsType = {
|
|
4
9
|
arrowUp: string | HTMLElement;
|
|
5
10
|
arrowDown: string | HTMLElement;
|
|
@@ -59,65 +64,123 @@ declare interface ITreeselect {
|
|
|
59
64
|
toggleOpenClose: () => void;
|
|
60
65
|
}
|
|
61
66
|
|
|
67
|
+
/**
|
|
68
|
+
* Options passed to the Treeselect constructor.
|
|
69
|
+
* All properties except `parentHtmlContainer` are optional.
|
|
70
|
+
*/
|
|
62
71
|
export declare interface ITreeselectParams {
|
|
72
|
+
/** HTML element (e.g. div) that will be replaced by the treeselect container (required). */
|
|
63
73
|
parentHtmlContainer: HTMLElement;
|
|
74
|
+
/** Array of `value` from options to select on load. Use updateValue or set treeselect.value and call mount to update. Changes when checkboxes/tags change. */
|
|
64
75
|
value?: ValueInputType;
|
|
76
|
+
/** Array of option objects { name, value, disabled?, htmlAttr?, isGroupSelectable?, children }. No duplicated values; names may duplicate. See Option description. */
|
|
65
77
|
options?: OptionType[];
|
|
78
|
+
/** All groups will be opened to this level (0 = all collapsed). */
|
|
66
79
|
openLevel?: number;
|
|
80
|
+
/** List will be appended to the body instead of the input container. */
|
|
67
81
|
appendToBody?: boolean;
|
|
82
|
+
/** List is always opened. Use for styling; for a fixed open list set staticList to true. */
|
|
68
83
|
alwaysOpen?: boolean;
|
|
84
|
+
/** Selected values appear as tags. If false, shows '{count} elements selected' (use tagsCountText). Single selection shows the element name. */
|
|
69
85
|
showTags?: boolean;
|
|
86
|
+
/** Text shown after count when showTags is false: '{count} {tagsCountText}'. */
|
|
70
87
|
tagsCountText?: string;
|
|
88
|
+
/** Defines sort order for tags in the input. TagsSortItem: { value, name }. Use null for default order. */
|
|
71
89
|
tagsSortFn?: TagsSortFnType;
|
|
90
|
+
/** Clear icon is available when value is set. */
|
|
72
91
|
clearable?: boolean;
|
|
92
|
+
/** Search/filter input is available. */
|
|
73
93
|
searchable?: boolean;
|
|
94
|
+
/** Placeholder text for the search input. */
|
|
74
95
|
placeholder?: string;
|
|
96
|
+
/** Show groups in the input and group leaves when the whole group is selected. */
|
|
75
97
|
grouped?: boolean;
|
|
98
|
+
/** Return selected groups instead of leaf ids only. By default only leaf ids are returned. */
|
|
76
99
|
isGroupedValue?: boolean;
|
|
100
|
+
/** HTML element appended to the end of the list (e.g. custom footer/slot). */
|
|
77
101
|
listSlotHtmlComponent?: HTMLElement | null;
|
|
102
|
+
/** List/control is disabled. */
|
|
78
103
|
disabled?: boolean;
|
|
104
|
+
/** Text shown when the list is empty (e.g. no results). */
|
|
79
105
|
emptyText?: string;
|
|
106
|
+
/** List is a static DOM element (no overlay). Ignored if appendToBody is true. */
|
|
80
107
|
staticList?: boolean;
|
|
108
|
+
/** id attribute for the main input (accessibility). */
|
|
81
109
|
id?: string;
|
|
110
|
+
/** aria-label attribute for the search input (accessibility). */
|
|
82
111
|
ariaLabel?: string;
|
|
112
|
+
/** Single-value select: one option only, no checkboxes. Pass one id; showTags: false shows treeselect as dropdown. */
|
|
83
113
|
isSingleSelect?: boolean;
|
|
114
|
+
/** Show count of children next to the group name. */
|
|
84
115
|
showCount?: boolean;
|
|
116
|
+
/** Groups cannot be selected; only leaves can be selected. */
|
|
85
117
|
disabledBranchNode?: boolean;
|
|
118
|
+
/** Force list direction. Supported: 'auto', 'top', 'bottom'. */
|
|
86
119
|
direction?: DirectionType;
|
|
120
|
+
/** Groups that contain checked values are expanded on init/open. */
|
|
87
121
|
expandSelected?: boolean;
|
|
122
|
+
/** Restore list scroll position when reopened. If false, scroll resets to 0 and first item is focused. */
|
|
88
123
|
saveScrollPosition?: boolean;
|
|
124
|
+
/** Nodes are independent: check/uncheck does not update children/parent. Disabled nodes also ignore parent/child workflow. */
|
|
89
125
|
isIndependentNodes?: boolean;
|
|
126
|
+
/** RTL mode. */
|
|
90
127
|
rtl?: boolean;
|
|
128
|
+
/** Class name(s) for the list container. Useful for styling when using appendToBody. */
|
|
91
129
|
listClassName?: string;
|
|
130
|
+
/** Experimental: improves list performance for large trees (visibility + IntersectionObserver). */
|
|
92
131
|
isBoostedRendering?: boolean;
|
|
132
|
+
/** Object of SVG icons (arrowUp, arrowDown, arrowRight, attention, clear, cross, check, partialCheck). Use HTMLElement or string. Update styles after reset; use alwaysOpen for easier styling. */
|
|
93
133
|
iconElements?: Partial<IconsType>;
|
|
134
|
+
/** Callback for input (selected value) instead of eventListener. */
|
|
94
135
|
inputCallback?: (value: ValueType) => void;
|
|
136
|
+
/** Callback for open instead of eventListener. */
|
|
95
137
|
openCallback?: (value: ValueType) => void;
|
|
138
|
+
/** Callback for close instead of eventListener. */
|
|
96
139
|
closeCallback?: (value: ValueType) => void;
|
|
140
|
+
/** Callback for name-change (selected name in input) instead of eventListener. */
|
|
97
141
|
nameChangeCallback?: (name: string) => void;
|
|
142
|
+
/** Callback for search (typed value) instead of eventListener. */
|
|
98
143
|
searchCallback?: (value: string) => void;
|
|
144
|
+
/** Callback for open-close-group (groupId, isClosed) instead of eventListener. */
|
|
99
145
|
openCloseGroupCallback?: (groupId: ValueOptionType, isClosed: boolean) => void;
|
|
100
146
|
}
|
|
101
147
|
|
|
148
|
+
/**
|
|
149
|
+
* Tree option node. Used in `options` and can be nested via `children`.
|
|
150
|
+
*/
|
|
102
151
|
export declare type OptionType = {
|
|
152
|
+
/** Unique option id (string or number). */
|
|
103
153
|
value: ValueOptionType;
|
|
154
|
+
/** Display name. */
|
|
104
155
|
name: string;
|
|
156
|
+
/** If true, option is disabled and not selectable. */
|
|
105
157
|
disabled?: boolean;
|
|
158
|
+
/** If true (group only), the group row can be selected. */
|
|
106
159
|
isGroupSelectable?: boolean;
|
|
107
|
-
|
|
160
|
+
/** Optional HTML attributes applied to the option row (string values only). */
|
|
161
|
+
htmlAttr?: Record<string, string>;
|
|
162
|
+
/** Child options (nested tree). */
|
|
108
163
|
children: OptionType[];
|
|
109
164
|
};
|
|
110
165
|
|
|
166
|
+
/** Custom sort for tags. Return negative/zero/positive like Array.sort. Use null for default order. */
|
|
111
167
|
export declare type TagsSortFnType = ((itemA: TagsSortItem, itemB: TagsSortItem) => number) | null;
|
|
112
168
|
|
|
169
|
+
/** Item passed to tags sort function. */
|
|
113
170
|
export declare type TagsSortItem = {
|
|
114
171
|
value: ValueOptionType;
|
|
115
172
|
name: string;
|
|
116
173
|
};
|
|
117
174
|
|
|
175
|
+
/**
|
|
176
|
+
* Tree-select component: hierarchical options, single/multi select, tags, search.
|
|
177
|
+
* Create with `new Treeselect(params)` then call `mount()` to render.
|
|
178
|
+
* @see ITreeselectParams for constructor options
|
|
179
|
+
*/
|
|
118
180
|
declare class Treeselect implements ITreeselect {
|
|
119
181
|
#private;
|
|
120
182
|
parentHtmlContainer: HTMLElement;
|
|
183
|
+
/** Current value: single id (single select), array of ids (multi), or null. */
|
|
121
184
|
value: ValueType;
|
|
122
185
|
options: OptionType[];
|
|
123
186
|
openLevel: number;
|
|
@@ -157,14 +220,25 @@ declare class Treeselect implements ITreeselect {
|
|
|
157
220
|
ungroupedValue: ValueOptionType[];
|
|
158
221
|
groupedValue: ValueOptionType[];
|
|
159
222
|
allValue: ValueOptionType[];
|
|
223
|
+
/** True when the dropdown list is open. */
|
|
160
224
|
isListOpened: boolean;
|
|
225
|
+
/** Selected option label (single select). */
|
|
161
226
|
selectedName: string;
|
|
227
|
+
/** Root DOM element of the treeselect (null after destroy). */
|
|
162
228
|
srcElement: HTMLElement | null;
|
|
163
|
-
|
|
229
|
+
/**
|
|
230
|
+
* @param params - Configuration and callbacks; only parentHtmlContainer is required
|
|
231
|
+
*/
|
|
232
|
+
constructor({ parentHtmlContainer, value, options, openLevel, appendToBody, alwaysOpen, showTags, tagsCountText, tagsSortFn, clearable, searchable, placeholder, grouped, isGroupedValue, listSlotHtmlComponent, disabled, emptyText, staticList, id, ariaLabel, isSingleSelect, showCount, disabledBranchNode, direction, expandSelected, saveScrollPosition, isIndependentNodes, rtl, listClassName, isBoostedRendering, iconElements, inputCallback, openCallback, closeCallback, nameChangeCallback, searchCallback, openCloseGroupCallback, }: ITreeselectParams);
|
|
233
|
+
/** Renders the treeselect into parentHtmlContainer. Call after constructor or to re-mount. */
|
|
164
234
|
mount(): void;
|
|
235
|
+
/** Sets the current value (single id, array of ids, or null). Updates UI and callbacks. */
|
|
165
236
|
updateValue(newValue: ValueInputType): void;
|
|
237
|
+
/** Removes the component from DOM and clears listeners. Call before removing the container. */
|
|
166
238
|
destroy(): void;
|
|
239
|
+
/** Moves focus to the treeselect input. */
|
|
167
240
|
focus(): void;
|
|
241
|
+
/** Opens the list if closed, closes if open. */
|
|
168
242
|
toggleOpenClose(): void;
|
|
169
243
|
scrollWindowHandler(): void;
|
|
170
244
|
focusWindowHandler(e: Event): void;
|
|
@@ -173,10 +247,13 @@ declare class Treeselect implements ITreeselect {
|
|
|
173
247
|
}
|
|
174
248
|
export default Treeselect;
|
|
175
249
|
|
|
250
|
+
/** Initial value accepted by constructor (can be undefined). */
|
|
176
251
|
export declare type ValueInputType = ValueOptionType[] | ValueOptionType | null | undefined;
|
|
177
252
|
|
|
253
|
+
/** Id/value of a single option (string or number). */
|
|
178
254
|
declare type ValueOptionType = string | number;
|
|
179
255
|
|
|
256
|
+
/** Current value: array of ids (multi), single id (single), or null. */
|
|
180
257
|
export declare type ValueType = ValueOptionType[] | ValueOptionType | null;
|
|
181
258
|
|
|
182
259
|
export { }
|