release/v0.2.9 (#19)

* Select wrong ids on remove element fix.

* Add focus and toggleOpenClose methods.

* Update readme file.

* Update ids and groupedIds props.

* Add tagsCountText prop.

* Update readme.

Co-authored-by: Dmitry Zhuravkov <[email protected]>

README.md

@@ -98,33 +98,36 @@ slot.addEventListener('click', (e) => {
 ### Props
 Name  | Type (default) | Description
 ------------- | ------------- | -------------
-parentHtmlContainer  | HTMLElement (required!) | It should be a HTML element (div), it will be changed to the list container.
-value  | Array[String] ([]) | It is an array with ids.
-options  | Array[Object] ([]) | It is an array of objects { name: String, value: String, children: [] }, where children are the same array of objects. Do not use duplicated values.
-openLevel  | Number (0) | All groups will be opened to this level.
-appendToBody  | Boolean (false) | List will be appended to the body instead of the input container.
-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`.
-showTags  | Boolean (true) | Selected values look like tags. The false value shows results as '{count} elements selected'.
-clearable  | Boolean (true) | Clear icon is available.
-searchable  | Boolean (true) | Search is available.
-placeholder  | String ('Search...') | Placeholder text.
-grouped | Boolean (true) | Show groups in the input and group leafs if all group selected.
-listSlotHtmlComponent | HTMLElement (null) | It should be a HTML element, it will be append to the end of the list.
-disabled | Boolean (false) | List will be disabled.
-emptyText | String ('No results found...') | A empty list text.
-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`.
+**parentHtmlContainer**  | HTMLElement (required!) | It should be a HTML element (div), it will be changed to the list container.
+**value**  | Array[String] ([]) | 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.
+**options**  | Array[Object] ([]) | It is an array of objects ```{ name: String, value: String, children: [] }```, where children are the same array of objects. Do not use duplicated values.
+**openLevel**  | Number (0) | All groups will be opened to this level.
+**appendToBody**  | Boolean (false) | List will be appended to the body instead of the input container.
+**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`.
+**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.
+**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}'```.
+**clearable**  | Boolean (true) | Clear icon is available.
+**searchable**  | Boolean (true) | Search is available.
+**placeholder**  | String ('Search...') | Placeholder text.
+**grouped** | Boolean (true) | Show groups in the input and group leafs if all group selected.
+**listSlotHtmlComponent** | HTMLElement (null) | It should be a HTML element, it will be append to the end of the list.
+**disabled** | Boolean (false) | List will be disabled.
+**emptyText** | String ('No results found...') | A empty list text.
+**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`.
 
 ### Emits
 Name  | Return Type | Description
 ------------- | ------------- | -------------
-input  | Array[String] | Returns selected ids without groups, only leafs.
+**input**  | Array[String] | Returns selected ids without groups, only leafs.
 
 ### Methods
 Name  | Params | Description
 ------------- | ------------- | -------------
-updateValue  | Array[String] | Update selected values.
-mount  | None | Helps to remount and update settings. Change settings that you need (treeselect.appendToBody = true), then call mount().
-destroy  | None | Deletes elements from the DOM. Call mount() to add treeselect to the DOM with previously saved internal data. If you need to recreate treeselect with default params - call **new Treeselect(options)**.
+**updateValue**  | Array[String] | Update selected values.
+**mount**  | None | Helps to remount and update settings. Change settings that you need (treeselect.appendToBody = true), then call mount().
+**destroy**  | None | Deletes elements from the DOM. Call mount() to add treeselect to the DOM with previously saved internal data. If you need to recreate treeselect with default params - call ```new Treeselect(options)```.
+**focus**  | None | Focuses treeselect input without open/close state changes.
+**toggleOpenClose**  | None | Open or close treeselect list and focus treeselect input.
 
 ### Notes
 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**.