treeselectjs 0.13.0-beta.1 → 0.13.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 +7 -6
- package/dist/treeselectjs.css +1 -1
- package/dist/treeselectjs.d.ts +1 -0
- package/dist/treeselectjs.mjs +495 -523
- package/dist/treeselectjs.umd.js +1 -1
- package/package.json +75 -75
package/README.md
CHANGED
|
@@ -9,9 +9,9 @@ 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 51.89 kB │ gzip: 11.67 kB
|
|
13
|
+
- treeselectjs.umd.js 41.92 kB │ gzip: 10.43 kB
|
|
14
|
+
- treeselectjs.css 7.08 kB │ gzip: 1.41 kB
|
|
15
15
|
|
|
16
16
|
**Live Demo:** https://dipson88.github.io/treeselectjs/
|
|
17
17
|
|
|
@@ -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.13.
|
|
34
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/treeselectjs@0.13.
|
|
33
|
+
<script src="https://cdn.jsdelivr.net/npm/treeselectjs@0.13.1/dist/treeselectjs.umd.js"></script>
|
|
34
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/treeselectjs@0.13.1/dist/treeselectjs.css" />
|
|
35
35
|
...
|
|
36
36
|
<script>
|
|
37
37
|
...
|
|
@@ -120,7 +120,7 @@ Name | Type (default) | Description
|
|
|
120
120
|
------------- | ------------- | -------------
|
|
121
121
|
**parentHtmlContainer** | HTMLElement (required!) | It should be a HTML element (div), it will be changed to the list container.
|
|
122
122
|
**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.
|
|
123
|
-
**options** | Array[Object] ([]) | It is an array of objects ```{name: String, value: String \| Number, 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).
|
|
123
|
+
**options** | Array[Object] ([]) | It is an array of objects ```{name: String, value: String \| Number, disabled?: Boolean, htmlAttr?: object, isGroupSelectable?: boolean, 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).
|
|
124
124
|
**disabled** | Boolean (false) | List will be disabled.
|
|
125
125
|
**id** | String ('') | id attribute for the accessibility.
|
|
126
126
|
**ariaLabel** | String ('') | ariaLabel attribute for the accessibility.
|
|
@@ -184,6 +184,7 @@ Name | Type | Description
|
|
|
184
184
|
**name** | String (required!) | It is the name of the node. **Can be duplicated.**
|
|
185
185
|
**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.
|
|
186
186
|
**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.
|
|
187
|
+
**isGroupSelectable** | Boolean (optional - true) | Determines whether groups are selectable. This behavior is similar to the disabledBranchNode prop but applies specifically to groups. It does not affect regular (non-group) items.
|
|
187
188
|
**children** | {name: String, value: String, disabled?: Boolean, htmlAttr?: object, children: [] }[] | Children are the same array of objects.
|
|
188
189
|
|
|
189
190
|
---
|
package/dist/treeselectjs.css
CHANGED
|
@@ -1 +1 @@
|
|
|
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}[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:#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--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:#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}[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{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%}
|
|
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}[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:#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--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:#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,.treeselect-list__item--non-selectable-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}[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{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%}
|