@danielgindi/selectbox 1.0.147 → 2.0.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 (20) hide show
  1. package/css/droplist.css +1 -1
  2. package/css/droplist.css.map +1 -1
  3. package/dist/lib.cjs.js +853 -338
  4. package/dist/lib.cjs.js.map +1 -1
  5. package/dist/lib.cjs.min.js +2 -2
  6. package/dist/lib.cjs.min.js.map +1 -1
  7. package/dist/lib.es6.js +853 -338
  8. package/dist/lib.es6.js.map +1 -1
  9. package/dist/lib.es6.min.js +2 -2
  10. package/dist/lib.es6.min.js.map +1 -1
  11. package/dist/lib.umd.js +853 -338
  12. package/dist/lib.umd.js.map +1 -1
  13. package/dist/lib.umd.min.js +2 -2
  14. package/dist/lib.umd.min.js.map +1 -1
  15. package/lib/DropList.js +726 -104
  16. package/lib/SelectBox.js +80 -187
  17. package/package.json +19 -20
  18. package/scss/droplist.scss +141 -110
  19. package/vue/DropList.vue +93 -8
  20. package/vue/SelectBox.vue +13 -13
package/scss/droplist.scss CHANGED
@@ -1,19 +1,26 @@
1
-
2
- ul.droplist {
1
+ .droplist_wrapper {
3
2
  box-sizing: border-box;
4
3
  z-index: 10000;
5
4
  float: left;
6
5
  margin: 0;
7
6
  padding: 0;
8
- list-style: none;
9
7
  border: 1px solid #b1b1b1;
10
- overflow-y: auto;
11
- overflow-x: hidden;
12
- max-height: 300px;
13
- max-width: 100%;
14
8
  outline: 0;
15
9
  border-radius: 5px;
16
10
  background: #fff;
11
+ max-height: 300px;
12
+ max-width: 100%;
13
+
14
+ .droplist_header {
15
+ position: relative;
16
+ padding: 0.5em;
17
+ box-sizing: inherit;
18
+
19
+ input[type=search] {
20
+ box-sizing: inherit;
21
+ width: 100%;
22
+ }
23
+ }
17
24
 
18
25
  &.droplist__is_above {
19
26
  border-bottom-left-radius: 0;
@@ -27,131 +34,155 @@ ul.droplist {
27
34
  margin: -1px 0 0 0;
28
35
  }
29
36
 
30
- li {
31
- box-sizing: border-box;
32
- position: relative;
37
+ ul {
38
+ list-style: none;
33
39
  margin: 0;
34
- padding: 3px 11px 4px 11px;
35
- height: 23px;
36
- font-size: 13px;
37
- line-height: 17px;
38
- color: #3e3f48;
39
- white-space: nowrap;
40
- cursor: pointer;
41
-
42
- /** avoid jumpy scroll issues in RTL mode (Chrome),
43
- by force-clipping the item's width, so parent's scroll properties do not change */
44
- width: 100%;
45
- overflow: hidden;
46
-
47
- &.droplist__item_focus {
48
- /* background-color: #4c8fbd; */
49
- background-color: #3e3f48;
50
- color: #fff;
40
+ padding: 0;
41
+ border: 0;
42
+ overflow-y: auto;
43
+ overflow-x: hidden;
44
+ max-height: 100%;
45
+ max-width: 100%;
46
+ background: none;
47
+
48
+ li {
49
+ box-sizing: border-box;
50
+ position: relative;
51
+ margin: 0;
52
+ padding: 3px 11px 4px 11px;
53
+ height: 23px;
54
+ font-size: 13px;
55
+ line-height: 17px;
56
+ color: #3e3f48;
57
+ white-space: nowrap;
58
+ cursor: pointer;
59
+
60
+ /** avoid jumpy scroll issues in RTL mode (Chrome),
61
+ by force-clipping the item's width, so parent's scroll properties do not change */
62
+ width: 100%;
63
+ overflow: hidden;
64
+
65
+ &.droplist__item_focus {
66
+ /* background-color: #4c8fbd; */
67
+ background-color: #3e3f48;
68
+ color: #fff;
69
+ }
51
70
  }
52
- }
53
71
 
54
- li {
55
- .checkbox {
56
- position: absolute;
57
- left: 6px;
58
- top: 3px;
59
- display: block;
60
- width: 16px;
61
- height: 16px;
72
+ li {
73
+ .checkbox {
74
+ position: absolute;
75
+ left: 6px;
76
+ top: 3px;
77
+ display: block;
78
+ width: 16px;
79
+ height: 16px;
80
+
81
+ /* unchecked style */
82
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 448'%3E%3Crect x='14' y='14' width='420' height='420' rx='84' style='stroke-width: 28px; stroke: %236ca1c6; fill: %23dae7f1;'%3E%3C/rect%3E%3C/svg%3E");
83
+ background-size: 100% 100%;
84
+ }
62
85
 
63
- /* unchecked style */
64
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 448'%3E%3Crect x='14' y='14' width='420' height='420' rx='84' style='stroke-width: 28px; stroke: %236ca1c6; fill: %23dae7f1;'%3E%3C/rect%3E%3C/svg%3E");
65
- background-size: 100% 100%;
66
- }
67
- &:hover .checkbox {
68
- /* unchecked hover style */
69
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 448'%3E%3Crect x='14' y='14' width='420' height='420' rx='84' style='stroke-width: 28px; stroke: %236ca1c6; fill: %23fff;'%3E%3C/rect%3E%3C/svg%3E");
70
- }
71
- &:active .checkbox,
72
- &:hover:active .checkbox {
73
- /* unchecked active style */
74
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 448'%3E%3Crect x='14' y='14' width='420' height='420' rx='84' style='stroke-width: 28px; stroke: %23396d93; fill: %23b5cfe3;'%3E%3C/rect%3E%3C/svg%3E");
75
- }
76
- }
86
+ &:hover .checkbox {
87
+ /* unchecked hover style */
88
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 448'%3E%3Crect x='14' y='14' width='420' height='420' rx='84' style='stroke-width: 28px; stroke: %236ca1c6; fill: %23fff;'%3E%3C/rect%3E%3C/svg%3E");
89
+ }
77
90
 
78
- li.droplist__item_multi.droplist__item_checked {
79
- .checkbox {
80
- /* checked style */
81
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 448'%3E%3Crect x='14' y='14' width='420' height='420' rx='84' style='stroke-width: 28px; stroke: %236ca1c6; fill: %23dae7f1;'%3E%3C/rect%3E%3Cpath fill='%236ca1c6' d='m364.136 158.276-172.589 171.204c-4.705 4.667-12.303 4.637-16.97-.068l-90.781-91.516c-4.667-4.705-4.637-12.303.069-16.971l22.719-22.536c4.705-4.667 12.303-4.637 16.97.069l59.792 60.277 141.352-140.216c4.705-4.667 12.303-4.637 16.97.068l22.536 22.718c4.667 4.706 4.637 12.304-.068 16.971z'/%3E%3C/svg%3E%0A");
91
+ &:active .checkbox,
92
+ &:hover:active .checkbox {
93
+ /* unchecked active style */
94
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 448'%3E%3Crect x='14' y='14' width='420' height='420' rx='84' style='stroke-width: 28px; stroke: %23396d93; fill: %23b5cfe3;'%3E%3C/rect%3E%3C/svg%3E");
95
+ }
82
96
  }
83
- &:hover .checkbox {
84
- /* checked hover style */
85
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 448'%3E%3Crect x='14' y='14' width='420' height='420' rx='84' style='stroke-width: 28px; stroke: %236ca1c6; fill: %23fff;'%3E%3C/rect%3E%3Cpath fill='%236ca1c6' d='m364.136 158.276-172.589 171.204c-4.705 4.667-12.303 4.637-16.97-.068l-90.781-91.516c-4.667-4.705-4.637-12.303.069-16.971l22.719-22.536c4.705-4.667 12.303-4.637 16.97.069l59.792 60.277 141.352-140.216c4.705-4.667 12.303-4.637 16.97.068l22.536 22.718c4.667 4.706 4.637 12.304-.068 16.971z'/%3E%3C/svg%3E%0A");
97
+
98
+ li.droplist__item_multi.droplist__item_checked {
99
+ .checkbox {
100
+ /* checked style */
101
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 448'%3E%3Crect x='14' y='14' width='420' height='420' rx='84' style='stroke-width: 28px; stroke: %236ca1c6; fill: %23dae7f1;'%3E%3C/rect%3E%3Cpath fill='%236ca1c6' d='m364.136 158.276-172.589 171.204c-4.705 4.667-12.303 4.637-16.97-.068l-90.781-91.516c-4.667-4.705-4.637-12.303.069-16.971l22.719-22.536c4.705-4.667 12.303-4.637 16.97.069l59.792 60.277 141.352-140.216c4.705-4.667 12.303-4.637 16.97.068l22.536 22.718c4.667 4.706 4.637 12.304-.068 16.971z'/%3E%3C/svg%3E%0A");
102
+ }
103
+
104
+ &:hover .checkbox {
105
+ /* checked hover style */
106
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 448'%3E%3Crect x='14' y='14' width='420' height='420' rx='84' style='stroke-width: 28px; stroke: %236ca1c6; fill: %23fff;'%3E%3C/rect%3E%3Cpath fill='%236ca1c6' d='m364.136 158.276-172.589 171.204c-4.705 4.667-12.303 4.637-16.97-.068l-90.781-91.516c-4.667-4.705-4.637-12.303.069-16.971l22.719-22.536c4.705-4.667 12.303-4.637 16.97.069l59.792 60.277 141.352-140.216c4.705-4.667 12.303-4.637 16.97.068l22.536 22.718c4.667 4.706 4.637 12.304-.068 16.971z'/%3E%3C/svg%3E%0A");
107
+ }
108
+
109
+ &:active .checkbox,
110
+ &:hover:active .checkbox {
111
+ /* checked active style */
112
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 448'%3E%3Crect x='14' y='14' width='420' height='420' rx='84' style='stroke-width: 28px; stroke: %23396d93; fill: %23b5cfe3;'%3E%3C/rect%3E%3Cpath fill='%23396d93' d='m364.136 158.276-172.589 171.204c-4.705 4.667-12.303 4.637-16.97-.068l-90.781-91.516c-4.667-4.705-4.637-12.303.069-16.971l22.719-22.536c4.705-4.667 12.303-4.637 16.97.069l59.792 60.277 141.352-140.216c4.705-4.667 12.303-4.637 16.97.068l22.536 22.718c4.667 4.706 4.637 12.304-.068 16.971z'/%3E%3C/svg%3E%0A");
113
+ }
86
114
  }
87
- &:active .checkbox,
88
- &:hover:active .checkbox {
89
- /* checked active style */
90
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 448'%3E%3Crect x='14' y='14' width='420' height='420' rx='84' style='stroke-width: 28px; stroke: %23396d93; fill: %23b5cfe3;'%3E%3C/rect%3E%3Cpath fill='%23396d93' d='m364.136 158.276-172.589 171.204c-4.705 4.667-12.303 4.637-16.97-.068l-90.781-91.516c-4.667-4.705-4.637-12.303.069-16.971l22.719-22.536c4.705-4.667 12.303-4.637 16.97.069l59.792 60.277 141.352-140.216c4.705-4.667 12.303-4.637 16.97.068l22.536 22.718c4.667 4.706 4.637 12.304-.068 16.971z'/%3E%3C/svg%3E%0A");
115
+
116
+ li.droplist__item_single.droplist__item_checked {
117
+ opacity: 0.5;
91
118
  }
92
- }
93
119
 
94
- li.droplist__item_single.droplist__item_checked {
95
- opacity: 0.5;
96
- }
120
+ li.droplist__item_multi:not(.droplist__item_multi_nocheck) {
121
+ padding: 1px 6px 2px 2px;
97
122
 
98
- li.droplist__item_multi:not(.droplist__item_multi_nocheck) {
99
- padding: 1px 6px 2px 2px;
123
+ .droplist__item_label {
124
+ display: block;
125
+ margin: 1px 0 0 24px;
126
+ }
127
+ }
100
128
 
101
- .droplist__item_label {
102
- display: block;
103
- margin: 1px 0 0 24px;
129
+ li.droplist__item_group {
130
+ font-weight: bold;
104
131
  }
105
- }
106
132
 
107
- li.droplist__item_group {
108
- font-weight: bold;
109
- }
133
+ li.droplist__item_child.droplist__item_multi:not(.droplist__item_multi_nocheck) {
134
+ padding-left: 15px;
135
+ }
110
136
 
111
- li.droplist__item_child.droplist__item_multi:not(.droplist__item_multi_nocheck) {
112
- padding-left: 15px;
113
- }
137
+ li.droplist__item_child.droplist__item_single,
138
+ li.droplist__item_child.droplist__item_multi_nocheck {
139
+ padding-left: 24px;
140
+ }
114
141
 
115
- li.droplist__item_child.droplist__item_single,
116
- li.droplist__item_child.droplist__item_multi_nocheck {
117
- padding-left: 24px;
118
- }
142
+ li.droplist__item_nointeraction {
143
+ cursor: default;
144
+ }
119
145
 
120
- .droplist__no_results_content {
121
- text-align: center;
122
- }
146
+ .droplist__no_results_content {
147
+ text-align: center;
148
+ }
123
149
 
124
- .remove {
125
- display: none;
126
- position: absolute;
127
- top: 0;
128
- right: 2px;
129
- width: 34px;
130
- height: 20px;
131
- padding: 0;
132
- border: 0;
133
- background: none;
134
- line-height: 20px;
135
- vertical-align: middle;
136
- text-align: center;
137
- direction: ltr;
138
- font-size: 15px;
139
- cursor: pointer;
140
-
141
- &:before {
142
- display: inline-block;
143
- content: 'x';
144
- color: #fff;
150
+ li .remove {
151
+ display: none;
152
+ position: absolute;
153
+ top: 0;
154
+ right: 2px;
155
+ width: 34px;
156
+ height: 20px;
157
+ padding: 0;
158
+ border: 0;
159
+ background: none;
160
+ line-height: 20px;
161
+ vertical-align: middle;
162
+ text-align: center;
163
+ direction: ltr;
164
+ font-size: 15px;
165
+ cursor: pointer;
166
+
167
+ &:before {
168
+ display: inline-block;
169
+ content: 'x';
170
+ color: #fff;
171
+ }
145
172
  }
146
- }
147
173
 
148
- .droplist__item_focus .remove {
149
- display: block;
174
+ .droplist__item_focus .remove {
175
+ display: block;
176
+ }
150
177
  }
151
178
 
152
- &.droplist__rtl, [dir=rtl] &:not(.droplist__ltr) {
179
+ &.droplist__rtl,
180
+ [dir=rtl] &:not(.droplist__ltr) {
153
181
  direction: rtl;
182
+ }
154
183
 
184
+ &.droplist__rtl ul,
185
+ [dir=rtl] &:not(.droplist__ltr) ul {
155
186
  li {
156
187
  .checkbox {
157
188
  left: auto;
@@ -178,7 +209,7 @@ ul.droplist {
178
209
  padding-right: 24px;
179
210
  }
180
211
 
181
- .remove {
212
+ li .remove {
182
213
  right: auto;
183
214
  left: 2px;
184
215
  }
package/vue/DropList.vue CHANGED
@@ -53,6 +53,38 @@ export default {
53
53
  type: Boolean,
54
54
  default: false,
55
55
  },
56
+ searchable: {
57
+ type: Boolean,
58
+ default: false,
59
+ },
60
+ noResultsText: {
61
+ type: String,
62
+ default: 'No matching results',
63
+ },
64
+ filterThrottleWindow: {
65
+ type: Number,
66
+ default: 300,
67
+ },
68
+ filterOnEmptyTerm: {
69
+ type: Boolean,
70
+ default: false,
71
+ },
72
+ filterGroups: {
73
+ type: Boolean,
74
+ default: false,
75
+ },
76
+ filterEmptyGroups: {
77
+ type: Boolean,
78
+ default: false,
79
+ },
80
+ filterFn: {
81
+ type: Function,
82
+ default: undefined,
83
+ },
84
+ // eslint-disable-next-line vue/require-prop-types
85
+ filterDependencies: {
86
+ default: undefined,
87
+ },
56
88
  keyDownHandler: {
57
89
  type: Function,
58
90
  },
@@ -154,6 +186,7 @@ export default {
154
186
  computedOptions() {
155
187
  let opts = {
156
188
  on: this._handleListEvents.bind(this),
189
+ positionOptionsProvider: () => this.positionOptions,
157
190
  };
158
191
 
159
192
  if (this.baseClassName) {
@@ -170,7 +203,9 @@ export default {
170
203
 
171
204
  for (let key of ['autoItemBlur', 'capturesFocus', 'multi',
172
205
  'autoCheckGroupChildren', 'useExactTargetWidth', 'constrainToWindow',
173
- 'autoFlipDirection', 'estimateWidth']) {
206
+ 'autoFlipDirection', 'estimateWidth',
207
+ 'searchable', 'filterOnEmptyTerm',
208
+ 'filterGroups', 'filterEmptyGroups']) {
174
209
  if (typeof this[key] === 'boolean') {
175
210
  opts[key] = this[key];
176
211
  }
@@ -192,10 +227,7 @@ export default {
192
227
  opts.keyDownHandler = this.keyDownHandler;
193
228
  }
194
229
 
195
- opts.renderItem = this.renderItem;
196
- if (!opts.renderItem) {
197
- opts.renderItem = createSlotBasedRenderFunc(this, 'item');
198
- }
230
+ opts.renderItem = this.renderItem ?? createSlotBasedRenderFunc(this, 'item');
199
231
 
200
232
  opts.unrenderItem = this.unrenderItem;
201
233
  if (!opts.unrenderItem) {
@@ -205,6 +237,17 @@ export default {
205
237
  }
206
238
  }
207
239
 
240
+ opts.renderNoResultsItem = this.computedRenderNoResultsItem ?? createSlotBasedRenderFunc(this, 'no-results-item');
241
+
242
+ opts.unrenderNoResultsItem = this.computedUnrenderNoResultsItem;
243
+
244
+ if (!opts.unrenderNoResultsItem) {
245
+ let fn = createSlotBasedUnrenderFunc(this, 'no-results-item');
246
+ if (fn) {
247
+ opts.unrenderNoResultsItem = (item, el) => fn(el);
248
+ }
249
+ }
250
+
208
251
  return opts;
209
252
  },
210
253
 
@@ -223,7 +266,7 @@ export default {
223
266
  const instance = this.nonReactive.instance;
224
267
  instance.setItems(Array.isArray(value) ? value : []);
225
268
  if (this.autoRelayoutOnItemsChange && instance.isVisible())
226
- instance.relayout(this.positionOptions);
269
+ instance.relayout();
227
270
  }
228
271
  },
229
272
 
@@ -251,6 +294,36 @@ export default {
251
294
  this.nonReactive.instance.setDirection(value);
252
295
  },
253
296
 
297
+ noResultsText(value) {
298
+ if (this.nonReactive.instance)
299
+ this.nonReactive.instance.setNoResultsText(value);
300
+ },
301
+
302
+ filterThrottleWindow(value) {
303
+ if (this.nonReactive.instance)
304
+ this.nonReactive.instance.setFilterThrottleWindow(value || 0);
305
+ },
306
+
307
+ filterOnEmptyTerm(value) {
308
+ if (this.nonReactive.instance)
309
+ this.nonReactive.instance.setFilterOnEmptyTerm(value);
310
+ },
311
+
312
+ filterGroups(value) {
313
+ if (this.nonReactive.instance)
314
+ this.nonReactive.instance.setFilterGroups(value);
315
+ },
316
+
317
+ filterEmptyGroups(value) {
318
+ if (this.nonReactive.instance)
319
+ this.nonReactive.instance.setFilterEmptyGroups(value);
320
+ },
321
+
322
+ filterFn() {
323
+ if (this.nonReactive.instance)
324
+ this.nonReactive.instance.setFilterFn(this.filterFn);
325
+ },
326
+
254
327
  renderItem() {
255
328
  this._recreateList();
256
329
  },
@@ -259,6 +332,18 @@ export default {
259
332
  this._recreateList();
260
333
  },
261
334
 
335
+ renderNoResultsItem() {
336
+ this._recreateList();
337
+ },
338
+
339
+ unrenderNoResultsItem() {
340
+ this._recreateList();
341
+ },
342
+
343
+ searchable() {
344
+ this._recreateList();
345
+ },
346
+
262
347
  positionOptions: {
263
348
  deep: true,
264
349
  handler() {
@@ -352,7 +437,7 @@ export default {
352
437
  list.setSingleSelectedItemByValue(modelValue === null ? undefined : modelValue);
353
438
  }
354
439
 
355
- list.show(this.positionOptions);
440
+ list.show();
356
441
 
357
442
  this._setupAutoRelayout();
358
443
  },
@@ -418,7 +503,7 @@ export default {
418
503
 
419
504
  relayout() {
420
505
  if (this.nonReactive.instance)
421
- this.nonReactive.instance.relayout(this.positionOptions);
506
+ this.nonReactive.instance.relayout();
422
507
  },
423
508
 
424
509
  elContains(other, considerSublists = true) {
package/vue/SelectBox.vue CHANGED
@@ -119,6 +119,14 @@
119
119
  type: Boolean,
120
120
  default: false,
121
121
  },
122
+ filterFn: {
123
+ type: Function,
124
+ default: undefined,
125
+ },
126
+ // eslint-disable-next-line vue/require-prop-types
127
+ filterDependencies: {
128
+ default: undefined,
129
+ },
122
130
  labelProp: {
123
131
  type: String,
124
132
  default: 'label',
@@ -187,14 +195,6 @@
187
195
  type: Function,
188
196
  default: undefined,
189
197
  },
190
- filterFn: {
191
- type: Function,
192
- default: undefined,
193
- },
194
- // eslint-disable-next-line vue/require-prop-types
195
- filterDependencies: {
196
- default: undefined,
197
- },
198
198
  virtualMinItems: {
199
199
  type: Number,
200
200
  default: 10,
@@ -533,6 +533,11 @@
533
533
  this.nonReactive.instance.setFilterOnEmptyTerm(value || false);
534
534
  },
535
535
 
536
+ filterFn() {
537
+ if (this.nonReactive.instance)
538
+ this.nonReactive.instance.setFilterFn(this.filterFn);
539
+ },
540
+
536
541
  labelProp(value) {
537
542
  if (this.nonReactive.instance)
538
543
  this.nonReactive.instance.setLabelProp(value);
@@ -626,11 +631,6 @@
626
631
  this.nonReactive.instance.setListOptions(this.computedListOptions);
627
632
  },
628
633
 
629
- filterFn() {
630
- if (this.nonReactive.instance)
631
- this.nonReactive.instance.setFilterFn(this.filterFn);
632
- },
633
-
634
634
  ...(isVue3 ? {} : {
635
635
  $scopedSlots() { // Vue 2
636
636
  if (this.nonReactive.instance)