treeselectjs 0.7.0 → 0.8.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.
Files changed (8) hide show
  1. package/README.md +28 -17
  2. package/dist/treeselectjs.css +1 -1
  3. package/dist/treeselectjs.d.ts +29 -20
  4. package/dist/treeselectjs.mjs +974 -0
  5. package/dist/treeselectjs.umd.js +1 -0
  6. package/package.json +20 -46
  7. package/dist/treeselectjs.cjs.js +0 -1
  8. package/dist/treeselectjs.mjs.js +0 -1
package/README.md CHANGED
@@ -6,6 +6,11 @@ A multi-select js component with nested options.
6
6
  - Screen sensitive direction
7
7
  - Typescript support
8
8
 
9
+ Build data:
10
+ - treeselectjs.mjs 48.64 kB │ gzip: 11.03 kB
11
+ - treeselectjs.umd.js 39.57 kB │ gzip: 10.13 kB
12
+ - treeselectjs.css 6.41 kB │ gzip: 1.27 kB
13
+
9
14
  **Live Demo:** https://dipson88.github.io/treeselectjs/
10
15
 
11
16
  ![Example img](https://github.com/dipson88/treeselectjs/blob/main/treeselectjs.png?raw=true)
@@ -16,61 +21,67 @@ npm install --save treeselectjs
16
21
  ```
17
22
  Import treeselectjs (ES)
18
23
  ```
19
- import { Treeselect } from 'treeselectjs'
20
- ```
21
- Import treeselectjs (CommonJS)
22
- ```
23
- const { Treeselect } = require('treeselectjs')
24
+ import Treeselect from 'treeselectjs'
25
+
26
+ @import 'treeselectjs/dist/treeselectjs.css // Styles
24
27
  ```
25
- Import css file with styles
28
+
29
+ Import treeselectjs (UMD)
26
30
  ```
27
- @import 'treeselectjs/dist/treeselectjs.css'
31
+ <script src="https://cdn.jsdelivr.net/npm/treeselectjs@0.8.0/dist/treeselectjs.umd.js"></script>
32
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/treeselectjs@0.8.0/dist/treeselectjs.css" />
33
+ ...
34
+ <script>
35
+ ...
36
+ const treeselect = new Treeselect({ ...props })
37
+ ...
38
+ </script>
28
39
  ```
29
40
 
30
41
  Example
31
42
  ```
32
- import { Treeselect } from 'treeselectjs'
43
+ import Treeselect from 'treeselectjs'
33
44
 
34
45
  const options = [
35
46
  {
36
47
  name: 'England',
37
- value: 'England',
48
+ value: 1,
38
49
  children: [
39
50
  {
40
51
  name: 'London',
41
- value: 'London',
52
+ value: 2,
42
53
  children: [
43
54
  {
44
55
  name: 'Chelsea',
45
- value: 'Chelsea',
56
+ value: 3,
46
57
  children: []
47
58
  },
48
59
  {
49
60
  name: 'West End',
50
- value: 'West End',
61
+ value: 4,
51
62
  children: []
52
63
  }
53
64
  ]
54
65
  },
55
66
  {
56
67
  name: 'Brighton',
57
- value: 'Brighton',
68
+ value: 5,
58
69
  children: []
59
70
  }
60
71
  ]
61
72
  },
62
73
  {
63
74
  name: 'France',
64
- value: 'France',
75
+ value: 6,
65
76
  children: [
66
77
  {
67
78
  name: 'Paris',
68
- value: 'Paris',
79
+ value: 7,
69
80
  children: []
70
81
  },
71
82
  {
72
83
  name: 'Lyon',
73
- value: 'Lyon',
84
+ value: 8,
74
85
  children: []
75
86
  }
76
87
  ]
@@ -84,7 +95,7 @@ slot.innerHTML='<a class="treeselect-demo__slot" href="">Click!</a>'
84
95
  const domElement = document.querySelector('.treeselect-demo')
85
96
  const treeselect = new Treeselect({
86
97
  parentHtmlContainer: domElement,
87
- value: ['West End', 'Paris', 'Lyon'],
98
+ value: [4, 7, 8],
88
99
  options: options,
89
100
  listSlotHtmlComponent: slot
90
101
  })
package/dist/treeselectjs.css CHANGED
@@ -1 +1 @@
1
- .treeselect-input{width:100%;box-sizing:border-box;min-height:37px;cursor:text;background-color:#fff;border:1px solid #d7dde4;border-radius:4px;flex-wrap:wrap;align-items:center;padding:2px 40px 2px 4px;display:flex;position:relative}.treeselect-input--unsearchable{cursor:default}.treeselect-input--unsearchable .treeselect-input__edit{caret-color:#0000;cursor:default}.treeselect-input--unsearchable .treeselect-input__edit:focus{z-index:-1;min-width:0;width:0;position:absolute;left:0}.treeselect-input--value-not-selected .treeselect-input__edit,.treeselect-input--value-not-selected.treeselect-input--unsearchable .treeselect-input__edit:focus{z-index:auto;width:100%;max-width:100%;position:static}.treeselect-input--value-not-selected .treeselect-input__tags{gap:0}.treeselect-input__tags{max-width:100%;width:100%;box-sizing:border-box;flex-wrap:wrap;align-items:center;gap:4px;display:inline-flex}.treeselect-input__tags-element{cursor:pointer;max-width:100%;box-sizing:border-box;background-color:#d7dde4;border-radius:2px;align-items:center;padding:2px 5px;font-size:14px;display:inline-flex}.treeselect-input__tags-element:hover{background-color:#c5c7cb}.treeselect-input__tags-element:hover .treeselect-input__tags-cross svg{stroke:#eb4c42}.treeselect-input__tags-name{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.treeselect-input__tags-cross{margin-left:2px;display:flex}.treeselect-input__tags-cross svg{width:12px;height:12px}.treeselect-input__tags-count{white-space:nowrap;text-overflow:ellipsis;font-size:14px;overflow:hidden}.treeselect-input__edit{text-overflow:ellipsis;width:100%;max-width:calc(100% - 45px);z-index:-1;min-width:0;border:none;flex:1;padding:0;font-size:14px;position:absolute}.treeselect-input__edit:focus{min-width:30px;max-width:100%;z-index:auto;outline:none;position:static}.treeselect-input__operators{max-width:40px;display:flex;position:absolute;right:2px}.treeselect-input__clear{cursor:pointer;display:flex}.treeselect-input__clear svg{stroke:#c5c7cb;width:17px;min-width:17px;height:20px}.treeselect-input__clear:hover svg{stroke:#838790}.treeselect-input__arrow{cursor:pointer;display:flex}.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;max-height:300px;background-color:#fff;border:1px solid #d7dde4;overflow-y:auto}.treeselect-list__group-container{box-sizing:border-box}.treeselect-list__item{box-sizing:border-box;cursor:pointer;height:30px;align-items:center;display:flex}.treeselect-list__item:focus{outline:none}.treeselect-list__item--focused{background-color:azure!important}.treeselect-list__item--hidden{display:none}.treeselect-list__item-icon{cursor:pointer;height:20px;width:20px;min-width:20px;align-items:center;display:flex}.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;pointer-events:none;box-sizing:border-box;background-color:#fff;border:1px solid #d7dde4;border-radius:3px;position:relative}.treeselect-list__item-checkbox-container svg{height:100%;width:100%;position:absolute}.treeselect-list__item-checkbox{width:0;height:0;pointer-events:none;z-index:-1;margin:0;position:absolute}.treeselect-list__item-checkbox-icon{height:100%;width:100%;text-align:left;position:absolute;top:0;left:0}.treeselect-list__item-label{width:100%;text-overflow:ellipsis;word-break:keep-all;white-space:nowrap;pointer-events:none;text-align:left;padding-left:5px;font-size:14px;overflow:hidden}.treeselect-list__item-label-counter{color:#838790;margin-left:3px;font-size:13px}.treeselect-list__empty{height:30px;align-items:center;padding-left:4px;display:flex}.treeselect-list__empty--hidden{display:none}.treeselect-list__empty-icon{align-items:center;display:flex}.treeselect-list__empty-text{text-overflow:ellipsis;word-break:keep-all;white-space:nowrap;padding-left:5px;font-size:14px;overflow:hidden}.treeselect-list__slot{box-sizing:border-box;width:100%;max-width:100%;background-color:#fff;position:sticky;bottom:0}.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:#0000}.treeselect-list.treeselect-list--single-select .treeselect-list__item--single-selected{background-color:#e9f1f1}.treeselect-list__item .treeselect-list__item-checkbox-container svg{stroke:#0000}.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}.treeselect{width:100%;box-sizing:border-box;position:relative}.treeselect--disabled{pointer-events:none}.treeselect-list{box-sizing:border-box;z-index:1000;border-radius:4px;position:absolute;left:0}.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:#0000;border-top-left-radius:0;border-top-right-radius:0}.treeselect-input--opened.treeselect-input--bottom{border-bottom-color:#0000;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{bottom:100%;left:0}.treeselect-list--bottom{top:100%;left:0}
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}.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-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}.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%}
package/dist/treeselectjs.d.ts CHANGED
@@ -1,13 +1,17 @@
1
- type ValueOptionType = string | number;
2
- type OptionType = {
3
- value: ValueOptionType;
4
- name: string;
5
- disabled?: boolean;
6
- htmlAttr?: object;
7
- children: OptionType[];
1
+ declare type DirectionType = 'auto' | 'top' | 'bottom';
2
+
3
+ declare type IconsType = {
4
+ arrowUp: string | HTMLElement;
5
+ arrowDown: string | HTMLElement;
6
+ arrowRight: string | HTMLElement;
7
+ attention: string | HTMLElement;
8
+ clear: string | HTMLElement;
9
+ cross: string | HTMLElement;
10
+ check: string | HTMLElement;
11
+ partialCheck: string | HTMLElement;
8
12
  };
9
- type DirectionType = 'auto' | 'top' | 'bottom';
10
- interface ITreeselect {
13
+
14
+ declare interface ITreeselect {
11
15
  parentHtmlContainer: HTMLElement;
12
16
  value: ValueOptionType[] | ValueOptionType;
13
17
  options: OptionType[];
@@ -48,7 +52,8 @@ interface ITreeselect {
48
52
  focus: () => void;
49
53
  toggleOpenClose: () => void;
50
54
  }
51
- interface ITreeselectParams {
55
+
56
+ declare interface ITreeselectParams {
52
57
  parentHtmlContainer: HTMLElement;
53
58
  value?: ValueOptionType[] | ValueOptionType;
54
59
  options?: OptionType[];
@@ -79,17 +84,16 @@ interface ITreeselectParams {
79
84
  closeCallback?: (value: ValueOptionType[] | ValueOptionType) => void;
80
85
  nameChangeCallback?: (name: string) => void;
81
86
  }
82
- type IconsType = {
83
- arrowUp: string | HTMLElement;
84
- arrowDown: string | HTMLElement;
85
- arrowRight: string | HTMLElement;
86
- attention: string | HTMLElement;
87
- clear: string | HTMLElement;
88
- cross: string | HTMLElement;
89
- check: string | HTMLElement;
90
- partialCheck: string | HTMLElement;
87
+
88
+ declare type OptionType = {
89
+ value: ValueOptionType;
90
+ name: string;
91
+ disabled?: boolean;
92
+ htmlAttr?: object;
93
+ children: OptionType[];
91
94
  };
92
- export class Treeselect implements ITreeselect {
95
+
96
+ declare class Treeselect implements ITreeselect {
93
97
  #private;
94
98
  parentHtmlContainer: HTMLElement;
95
99
  value: ValueOptionType[] | ValueOptionType;
@@ -136,3 +140,8 @@ export class Treeselect implements ITreeselect {
136
140
  blurWindowHandler(): void;
137
141
  updateListPosition(): void;
138
142
  }
143
+ export default Treeselect;
144
+
145
+ declare type ValueOptionType = string | number;
146
+
147
+ export { }