treeselectjs 0.8.6 → 0.9.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 +7 -4
- package/dist/treeselectjs.d.ts +8 -1
- package/dist/treeselectjs.mjs +416 -392
- package/dist/treeselectjs.umd.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -9,8 +9,8 @@ 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
|
|
12
|
+
- treeselectjs.mjs 49.80 kB │ gzip: 11.27 kB
|
|
13
|
+
- treeselectjs.umd.js 40.41 kB │ gzip: 10.29 kB
|
|
14
14
|
- treeselectjs.css 6.41 kB │ gzip: 1.27 kB
|
|
15
15
|
|
|
16
16
|
**Live Demo:** https://dipson88.github.io/treeselectjs/
|
|
@@ -30,8 +30,8 @@ import Treeselect from 'treeselectjs'
|
|
|
30
30
|
|
|
31
31
|
Import treeselectjs (UMD)
|
|
32
32
|
```
|
|
33
|
-
<script src="https://cdn.jsdelivr.net/npm/treeselectjs@0.
|
|
34
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/treeselectjs@0.
|
|
33
|
+
<script src="https://cdn.jsdelivr.net/npm/treeselectjs@0.9.0/dist/treeselectjs.umd.js"></script>
|
|
34
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/treeselectjs@0.9.0/dist/treeselectjs.css" />
|
|
35
35
|
...
|
|
36
36
|
<script>
|
|
37
37
|
...
|
|
@@ -125,6 +125,7 @@ Name | Type (default) | Description
|
|
|
125
125
|
**id** | String ('') | id attribute for the accessibility.
|
|
126
126
|
**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.
|
|
127
127
|
**isGroupedValue** | Boolean (false) | Return groups if they selected instead of separate ids. Treeselect returns only leaves ids by default.
|
|
128
|
+
**isIndependentNodes** | Boolean (false) | All nodes in treeselect work as an independent entity. Check/uncheck action ignore children/parent updates workflow. Disabled nodes ignore children/parent workflow as well.
|
|
128
129
|
|
|
129
130
|
#### List settings props
|
|
130
131
|
Name | Type (default) | Description
|
|
@@ -158,6 +159,7 @@ Name | Type (default) | Description
|
|
|
158
159
|
**openCallback** | (value) => void (undefined) | Callback method for `open` if you don't want to use eventListener.
|
|
159
160
|
**closeCallback** | (value) => void (undefined) | Callback method for `close` if you don't want to use eventListener.
|
|
160
161
|
**nameChangeCallback** | (name) => void (undefined) | Callback method for `name-change` if you don't want to use eventListener.
|
|
162
|
+
**searchCallback** | (value) => void (undefined) | Callback method for `search` if you don't want to use eventListener.
|
|
161
163
|
|
|
162
164
|
#### Additional props
|
|
163
165
|
Name | Type (default) | Description
|
|
@@ -185,6 +187,7 @@ Name | Return Type | Description
|
|
|
185
187
|
**open** | Array[String \| Number] | Returns selected values, action is triggered on opening the list. Add `eventListener` or use `openCallback` prop to get value.
|
|
186
188
|
**close** | Array[String \| Number] | Returns selected values, action is triggered on closing the list. Add `eventListener` or use `closeCallback` prop to get value.
|
|
187
189
|
**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.
|
|
190
|
+
**search** | String | Returns entered search value, action is triggered on change search value during the typing. Add `eventListener` or use `searchCallback` prop to get value. You can try create something like autocomplete with help of this event.
|
|
188
191
|
|
|
189
192
|
---
|
|
190
193
|
|
package/dist/treeselectjs.d.ts
CHANGED
|
@@ -36,6 +36,7 @@ declare interface ITreeselect {
|
|
|
36
36
|
direction: DirectionType;
|
|
37
37
|
expandSelected: boolean;
|
|
38
38
|
saveScrollPosition: boolean;
|
|
39
|
+
isIndependentNodes: boolean;
|
|
39
40
|
iconElements: IconsType;
|
|
40
41
|
ungroupedValue: ValueOptionType[];
|
|
41
42
|
groupedValue: ValueOptionType[];
|
|
@@ -46,6 +47,7 @@ declare interface ITreeselect {
|
|
|
46
47
|
openCallback: ((value: ValueType) => void) | undefined;
|
|
47
48
|
closeCallback: ((value: ValueType) => void) | undefined;
|
|
48
49
|
nameChangeCallback: ((name: string) => void) | undefined;
|
|
50
|
+
searchCallback: ((value: string) => void) | undefined;
|
|
49
51
|
mount: () => void;
|
|
50
52
|
updateValue: (newValue: ValueInputType) => void;
|
|
51
53
|
destroy: () => void;
|
|
@@ -78,11 +80,13 @@ export declare interface ITreeselectParams {
|
|
|
78
80
|
direction?: DirectionType;
|
|
79
81
|
expandSelected?: boolean;
|
|
80
82
|
saveScrollPosition?: boolean;
|
|
83
|
+
isIndependentNodes?: boolean;
|
|
81
84
|
iconElements?: Partial<IconsType>;
|
|
82
85
|
inputCallback?: (value: ValueType) => void;
|
|
83
86
|
openCallback?: (value: ValueType) => void;
|
|
84
87
|
closeCallback?: (value: ValueType) => void;
|
|
85
88
|
nameChangeCallback?: (name: string) => void;
|
|
89
|
+
searchCallback?: (value: string) => void;
|
|
86
90
|
}
|
|
87
91
|
|
|
88
92
|
export declare type OptionType = {
|
|
@@ -119,17 +123,20 @@ declare class Treeselect implements ITreeselect {
|
|
|
119
123
|
direction: DirectionType;
|
|
120
124
|
expandSelected: boolean;
|
|
121
125
|
saveScrollPosition: boolean;
|
|
126
|
+
isIndependentNodes: boolean;
|
|
122
127
|
iconElements: IconsType;
|
|
123
128
|
inputCallback: ((value: ValueType) => void) | undefined;
|
|
124
129
|
openCallback: ((value: ValueType) => void) | undefined;
|
|
125
130
|
closeCallback: ((value: ValueType) => void) | undefined;
|
|
126
131
|
nameChangeCallback: ((name: string) => void) | undefined;
|
|
132
|
+
searchCallback: ((value: string) => void) | undefined;
|
|
127
133
|
ungroupedValue: ValueOptionType[];
|
|
128
134
|
groupedValue: ValueOptionType[];
|
|
135
|
+
allValue: ValueOptionType[];
|
|
129
136
|
isListOpened: boolean;
|
|
130
137
|
selectedName: string;
|
|
131
138
|
srcElement: HTMLElement | null;
|
|
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);
|
|
139
|
+
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, isIndependentNodes, iconElements, inputCallback, openCallback, closeCallback, nameChangeCallback, searchCallback }: ITreeselectParams);
|
|
133
140
|
mount(): void;
|
|
134
141
|
updateValue(newValue: ValueInputType): void;
|
|
135
142
|
destroy(): void;
|