treeselectjs 0.14.0 → 0.14.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 +29 -33
- package/dist/treeselectjs.css +1 -1
- package/package.json +2 -3
package/README.md
CHANGED
|
@@ -11,7 +11,7 @@ A multi-select js component with nested options.
|
|
|
11
11
|
Build data:
|
|
12
12
|
- treeselectjs.mjs 46.21 kB │ gzip: 10.82 kB
|
|
13
13
|
- treeselectjs.umd.js 36.09 kB │ gzip: 9.38 kB
|
|
14
|
-
- treeselectjs.css 8.
|
|
14
|
+
- treeselectjs.css 8.48 kB │ gzip: 1.58 kB
|
|
15
15
|
|
|
16
16
|
**Live Demo:** https://dipson88.github.io/treeselectjs/
|
|
17
17
|
|
|
@@ -35,8 +35,8 @@ import Treeselect from 'treeselectjs'
|
|
|
35
35
|
|
|
36
36
|
Import treeselectjs (UMD)
|
|
37
37
|
```
|
|
38
|
-
<script src="https://cdn.jsdelivr.net/npm/treeselectjs@0.14.
|
|
39
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/treeselectjs@0.14.
|
|
38
|
+
<script src="https://cdn.jsdelivr.net/npm/treeselectjs@0.14.1/dist/treeselectjs.umd.js"></script>
|
|
39
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/treeselectjs@0.14.1/dist/treeselectjs.css" />
|
|
40
40
|
...
|
|
41
41
|
<script>
|
|
42
42
|
...
|
|
@@ -214,46 +214,42 @@ Name | Params | Description
|
|
|
214
214
|
**focus** | None | Focuses treeselect input without open/close state changes.
|
|
215
215
|
**toggleOpenClose** | None | Open or close treeselect list and focus treeselect input.
|
|
216
216
|
|
|
217
|
-
---
|
|
218
|
-
|
|
219
217
|
### Customizing colors
|
|
220
218
|
|
|
221
|
-
The component uses CSS custom properties (variables) for colors. Override them on
|
|
219
|
+
The component uses CSS custom properties (variables) for colors. Variables are defined on `:root`. **Override them on `:root`** (or `body`) so they apply to both the input and the dropdown list—especially when using **appendToBody**, since the list is then rendered outside the `.treeselect` container.
|
|
222
220
|
|
|
223
221
|
| Variable | Default | Description |
|
|
224
222
|
|----------|---------|-------------|
|
|
225
|
-
| `--
|
|
226
|
-
| `--
|
|
227
|
-
| `--
|
|
228
|
-
| `--
|
|
229
|
-
| `--
|
|
230
|
-
| `--
|
|
231
|
-
| `--
|
|
232
|
-
| `--
|
|
233
|
-
| `--
|
|
234
|
-
| `--
|
|
235
|
-
| `--
|
|
236
|
-
| `--
|
|
237
|
-
| `--
|
|
238
|
-
| `--
|
|
239
|
-
| `--
|
|
240
|
-
| `--
|
|
223
|
+
| `--treeselectjs-border-color` | `#d7dde4` | Border color of input and list |
|
|
224
|
+
| `--treeselectjs-bg` | `#ffffff` | Background of the input |
|
|
225
|
+
| `--treeselectjs-border-focus` | `#101010` | Border color when focused |
|
|
226
|
+
| `--treeselectjs-tag-bg` | `#d7dde4` | Background of selected tags |
|
|
227
|
+
| `--treeselectjs-tag-bg-hover` | `#c5c7cb` | Tag background on hover |
|
|
228
|
+
| `--treeselectjs-tag-remove-hover` | `#eb4c42` | Remove (×) icon color on hover |
|
|
229
|
+
| `--treeselectjs-icon` | `#c5c7cb` | Arrow and clear icons |
|
|
230
|
+
| `--treeselectjs-icon-hover` | `#838790` | Icons on hover |
|
|
231
|
+
| `--treeselectjs-item-counter` | `#838790` | Group item count text |
|
|
232
|
+
| `--treeselectjs-item-focus-bg` | `#f0ffff` | List item background when focused |
|
|
233
|
+
| `--treeselectjs-item-selected-bg` | `#e9f1f1` | List item background when selected |
|
|
234
|
+
| `--treeselectjs-item-disabled-text` | `#c5cbca` | Disabled item text color |
|
|
235
|
+
| `--treeselectjs-checkbox-bg` | `#ffffff` | Checkbox background |
|
|
236
|
+
| `--treeselectjs-checkbox-border-color` | `#d7dde4` | Checkbox border color |
|
|
237
|
+
| `--treeselectjs-checkbox-checked-bg` | `#52c67e` | Checkbox fill when checked |
|
|
238
|
+
| `--treeselectjs-checkbox-checked-icon` | `#ffffff` | Checkmark color |
|
|
241
239
|
|
|
242
240
|
Example:
|
|
243
241
|
|
|
244
242
|
```css
|
|
245
243
|
body {
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
/* override other variables as needed */
|
|
256
|
-
}
|
|
244
|
+
--treeselectjs-border-color: #444;
|
|
245
|
+
--treeselectjs-bg: #1e1e1e;
|
|
246
|
+
--treeselectjs-border-focus: #6cb6ff;
|
|
247
|
+
--treeselectjs-tag-bg: #333;
|
|
248
|
+
--treeselectjs-tag-bg-hover: #444;
|
|
249
|
+
--treeselectjs-item-focus-bg: #2a2a2a;
|
|
250
|
+
--treeselectjs-item-selected-bg: #2d3a3a;
|
|
251
|
+
--treeselectjs-checkbox-checked-bg: #52c67e;
|
|
252
|
+
/* override other variables as needed */
|
|
257
253
|
}
|
|
258
254
|
```
|
|
259
255
|
|
package/dist/treeselectjs.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.treeselect-input{width:100%;box-sizing:border-box;border:1px solid var(--
|
|
1
|
+
.treeselect-input{width:100%;box-sizing:border-box;border:1px solid var(--treeselectjs-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(--treeselectjs-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(--treeselectjs-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(--treeselectjs-tag-bg-hover)}.treeselect-input__tags-element:hover .treeselect-input__tags-cross svg{stroke:var(--treeselectjs-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(--treeselectjs-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(--treeselectjs-icon);width:17px;min-width:17px;height:20px}.treeselect-input__clear:hover svg{stroke:var(--treeselectjs-icon-hover)}.treeselect-input__arrow{display:flex;cursor:pointer}.treeselect-input__arrow svg{stroke:var(--treeselectjs-icon);width:20px;min-width:20px;height:20px}.treeselect-input__arrow:hover svg{stroke:var(--treeselectjs-icon-hover)}.treeselect-list{width:100%;box-sizing:border-box;border:1px solid var(--treeselectjs-border-color);overflow-y:auto;background-color:var(--treeselectjs-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(--treeselectjs-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(--treeselectjs-icon)}.treeselect-list__item-icon *{pointer-events:none}.treeselect-list__item-icon:hover svg{stroke:var(--treeselectjs-icon-hover)}.treeselect-list__item-checkbox-container{width:20px;height:20px;min-width:20px;border:1px solid var(--treeselectjs-checkbox-border-color);border-radius:3px;position:relative;background-color:var(--treeselectjs-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(--treeselectjs-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(--treeselectjs-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(--treeselectjs-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(--treeselectjs-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(--treeselectjs-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(--treeselectjs-checkbox-checked-bg)}.treeselect-list__item--disabled .treeselect-list__item-checkbox-container{background-color:var(--treeselectjs-item-selected-bg)}.treeselect-list__item--disabled .treeselect-list__item-label{color:var(--treeselectjs-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}:root{--treeselectjs-border-color: #d7dde4;--treeselectjs-bg: #ffffff;--treeselectjs-border-focus: #101010;--treeselectjs-tag-bg: #d7dde4;--treeselectjs-tag-bg-hover: #c5c7cb;--treeselectjs-tag-remove-hover: #eb4c42;--treeselectjs-icon: #c5c7cb;--treeselectjs-icon-hover: #838790;--treeselectjs-item-counter: #838790;--treeselectjs-item-focus-bg: #f0ffff;--treeselectjs-item-selected-bg: #e9f1f1;--treeselectjs-item-disabled-text: #c5cbca;--treeselectjs-checkbox-bg: #ffffff;--treeselectjs-checkbox-border-color: #d7dde4;--treeselectjs-checkbox-checked-bg: #52c67e;--treeselectjs-checkbox-checked-icon: #ffffff}.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:var(--treeselectjs-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(--treeselectjs-border-focus)}.treeselect-list--top,.treeselect-list--top-to-body{border-bottom-color:var(--treeselectjs-border-color);border-bottom-left-radius:0;border-bottom-right-radius:0}.treeselect-list--bottom,.treeselect-list--bottom-to-body{border-top-color:var(--treeselectjs-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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "treeselectjs",
|
|
3
|
-
"version": "0.14.
|
|
3
|
+
"version": "0.14.1",
|
|
4
4
|
"description": "Treeselect JS",
|
|
5
5
|
"main": "./dist/treeselectjs.umd.js",
|
|
6
6
|
"module": "./dist/treeselectjs.mjs",
|
|
@@ -71,8 +71,7 @@
|
|
|
71
71
|
"vite-plugin-dts": "^4.5.4"
|
|
72
72
|
},
|
|
73
73
|
"overrides": {
|
|
74
|
-
"
|
|
75
|
-
"minimatch": ">=10.2.1"
|
|
74
|
+
"minimatch": ">=10.2.4"
|
|
76
75
|
},
|
|
77
76
|
"files": [
|
|
78
77
|
"dist"
|