@danielgindi/selectbox 1.0.51 → 1.0.54

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 (16) hide show
  1. package/README.md +90 -90
  2. package/css/selectbox.css +1 -1
  3. package/css/selectbox.css.map +1 -1
  4. package/dist/lib.cjs.js +644 -506
  5. package/dist/lib.cjs.js.map +1 -1
  6. package/dist/lib.cjs.min.js +2 -2
  7. package/dist/lib.cjs.min.js.map +1 -1
  8. package/dist/lib.es6.js +1 -1
  9. package/dist/lib.es6.min.js +1 -1
  10. package/dist/lib.umd.js +644 -506
  11. package/dist/lib.umd.js.map +1 -1
  12. package/dist/lib.umd.min.js +2 -2
  13. package/dist/lib.umd.min.js.map +1 -1
  14. package/package.json +12 -12
  15. package/vue/DropList.vue +269 -276
  16. package/vue/SelectBox.vue +5 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@danielgindi/selectbox",
3
- "version": "1.0.51",
3
+ "version": "1.0.54",
4
4
  "description": "A collection of dom utilities. So you can work natively with the dom without dom frameworks.",
5
5
  "main": "dist/lib.cjs.min.js",
6
6
  "module": "lib/index.js",
@@ -31,25 +31,25 @@
31
31
  "homepage": "https://github.com/danielgindi/selectbox#readme",
32
32
  "license": "MIT",
33
33
  "devDependencies": {
34
- "@babel/core": "^7.17.5",
34
+ "@babel/core": "^7.17.9",
35
35
  "@babel/preset-env": "^7.16.11",
36
- "@babel/runtime": "^7.17.2",
36
+ "@babel/runtime": "^7.17.9",
37
37
  "@rollup/plugin-babel": "^5.3.1",
38
- "@rollup/plugin-commonjs": "^21.0.2",
39
- "@rollup/plugin-node-resolve": "^13.1.3",
40
- "core-js": "^3.21.1",
41
- "eslint": "^8.10.0",
38
+ "@rollup/plugin-commonjs": "^22.0.0",
39
+ "@rollup/plugin-node-resolve": "^13.2.1",
40
+ "core-js": "^3.22.3",
41
+ "eslint": "^8.14.0",
42
42
  "eslint-formatter-codeframe": "^7.32.1",
43
- "eslint-plugin-vue": "^8.5.0",
44
- "fs-extra": "^10.0.1",
43
+ "eslint-plugin-vue": "^8.7.1",
44
+ "fs-extra": "^10.1.0",
45
45
  "husky": "^7.0.4",
46
46
  "pinst": "^3.0.0",
47
- "rollup": "^2.69.1",
47
+ "rollup": "^2.70.2",
48
48
  "rollup-plugin-terser": "^7.0.2",
49
- "sass": "^1.49.9"
49
+ "sass": "^1.51.0"
50
50
  },
51
51
  "dependencies": {
52
- "@danielgindi/dom-utils": "^1.0.7",
52
+ "@danielgindi/dom-utils": "^1.0.8",
53
53
  "@danielgindi/virtual-list-helper": "^1.0.3",
54
54
  "fast-deep-equal": "^3.1.3",
55
55
  "keycode-js": "^3.1.0",
package/vue/DropList.vue CHANGED
@@ -1,339 +1,332 @@
1
1
  <template>
2
- <ul
3
- ref="el"
4
- style="display: none"
5
- @blur="$emit('blur')"
6
- />
2
+ <span v-show="false" />
7
3
  </template>
8
4
 
9
5
  <script>
10
- import DropList from '../lib/DropList';
11
- import DomEventsSink from '@danielgindi/dom-utils/lib/DomEventsSink';
12
- import { createSlotBasedRenderFunc, createSlotBasedUnrenderFunc } from './utils/slots.js';
13
-
14
- export default {
15
- props: {
16
- baseClassName: {
17
- type: String,
18
- },
19
- additionalClasses: {
20
- type: [Object, Array, String],
21
- },
22
- autoFocus: {
23
- type: Boolean,
24
- default: true,
25
- },
26
- capturesFocus: {
27
- type: Boolean,
28
- default: true,
29
- },
30
- multi: {
31
- type: Boolean,
32
- default: false,
33
- },
34
- keyDownHandler: {
35
- type: Function,
36
- },
37
- autoCheckGroupChildren: {
38
- type: Boolean,
39
- default: true,
40
- },
41
- useExactTargetWidth: {
42
- type: Boolean,
43
- default: false,
44
- },
45
- constrainToWindow: {
46
- type: Boolean,
47
- default: true,
48
- },
49
- autoFlipDirection: {
50
- type: Boolean,
51
- default: true,
52
- },
53
- estimatedItemHeight: {
54
- type: Number,
55
- default: 20,
56
- },
57
- estimateWidth: {
58
- type: Boolean,
59
- default: false,
60
- },
61
- virtualMinItems: {
62
- type: Number,
63
- default: 10,
64
- },
65
- labelProp: {
66
- type: String,
67
- default: 'label',
68
- },
69
- valueProp: {
70
- type: String,
71
- default: 'value',
72
- },
73
- items: {
74
- type: Array,
75
- default: () => [],
76
- },
77
- value: {
78
- type: [Number, String, Object, Array],
79
- },
80
- renderItem: {
81
- type: Function,
82
- },
83
- unrenderItem: {
84
- type: Function,
85
- },
86
- positionOptions: {
87
- type: Object,
88
- },
89
- },
90
-
91
- data() {
92
- return {
93
- sink: new DomEventsSink(),
94
- el: undefined,
95
- };
6
+ import DropList from '../lib/DropList';
7
+ import DomEventsSink from '@danielgindi/dom-utils/lib/DomEventsSink';
8
+ import { createSlotBasedRenderFunc, createSlotBasedUnrenderFunc } from './utils/slots.js';
9
+
10
+ export default {
11
+ props: {
12
+ baseClassName: {
13
+ type: String,
96
14
  },
15
+ additionalClasses: {
16
+ type: [Object, Array, String],
17
+ },
18
+ autoFocus: {
19
+ type: Boolean,
20
+ default: true,
21
+ },
22
+ capturesFocus: {
23
+ type: Boolean,
24
+ default: true,
25
+ },
26
+ multi: {
27
+ type: Boolean,
28
+ default: false,
29
+ },
30
+ keyDownHandler: {
31
+ type: Function,
32
+ },
33
+ autoCheckGroupChildren: {
34
+ type: Boolean,
35
+ default: true,
36
+ },
37
+ useExactTargetWidth: {
38
+ type: Boolean,
39
+ default: false,
40
+ },
41
+ constrainToWindow: {
42
+ type: Boolean,
43
+ default: true,
44
+ },
45
+ autoFlipDirection: {
46
+ type: Boolean,
47
+ default: true,
48
+ },
49
+ estimatedItemHeight: {
50
+ type: Number,
51
+ default: 20,
52
+ },
53
+ estimateWidth: {
54
+ type: Boolean,
55
+ default: false,
56
+ },
57
+ virtualMinItems: {
58
+ type: Number,
59
+ default: 10,
60
+ },
61
+ labelProp: {
62
+ type: String,
63
+ default: 'label',
64
+ },
65
+ valueProp: {
66
+ type: String,
67
+ default: 'value',
68
+ },
69
+ items: {
70
+ type: Array,
71
+ default: () => [],
72
+ },
73
+ value: {
74
+ type: [Number, String, Object, Array],
75
+ },
76
+ renderItem: {
77
+ type: Function,
78
+ },
79
+ unrenderItem: {
80
+ type: Function,
81
+ },
82
+ positionOptions: {
83
+ type: Object,
84
+ },
85
+ },
86
+
87
+ data() {
88
+ return {
89
+ sink: new DomEventsSink(),
90
+ el: undefined,
91
+ };
92
+ },
93
+
94
+ computed: {
95
+ computedOptions() {
96
+ let opts = {
97
+ on: this._handleListEvents.bind(this),
98
+ };
97
99
 
98
- computed: {
99
- computedOptions() {
100
- let opts = {
101
- el: this.$refs.el,
102
- on: this._handleListEvents.bind(this),
103
- };
104
-
105
- if (this.baseClassName) {
106
- opts.baseClassName = this.baseClassName;
107
- }
100
+ if (this.baseClassName) {
101
+ opts.baseClassName = this.baseClassName;
102
+ }
108
103
 
109
- if (this.additionalClassesList) {
110
- opts.additionalClasses = this.additionalClassesList;
111
- }
104
+ if (this.additionalClassesList) {
105
+ opts.additionalClasses = this.additionalClassesList;
106
+ }
112
107
 
113
- for (let key of ['capturesFocus', 'multi',
114
- 'autoCheckGroupChildren', 'useExactTargetWidth', 'constrainToWindow',
115
- 'autoFlipDirection', 'estimateWidth']) {
116
- if (typeof this[key] === 'boolean') {
117
- opts[key] = this[key];
118
- }
108
+ for (let key of ['capturesFocus', 'multi',
109
+ 'autoCheckGroupChildren', 'useExactTargetWidth', 'constrainToWindow',
110
+ 'autoFlipDirection', 'estimateWidth']) {
111
+ if (typeof this[key] === 'boolean') {
112
+ opts[key] = this[key];
119
113
  }
114
+ }
120
115
 
121
- for (let key of ['estimatedItemHeight', 'virtualMinItems']) {
122
- if (typeof this[key] === 'number') {
123
- opts[key] = this[key];
124
- }
116
+ for (let key of ['estimatedItemHeight', 'virtualMinItems']) {
117
+ if (typeof this[key] === 'number') {
118
+ opts[key] = this[key];
125
119
  }
120
+ }
126
121
 
127
- for (let key of ['labelProp', 'valueProp']) {
128
- if (typeof this[key] === 'string') {
129
- opts[key] = this[key];
130
- }
122
+ for (let key of ['labelProp', 'valueProp']) {
123
+ if (typeof this[key] === 'string') {
124
+ opts[key] = this[key];
131
125
  }
126
+ }
132
127
 
133
- if (typeof this.keyDownHandler === 'function') {
134
- opts.keyDownHandler = this.keyDownHandler;
135
- }
128
+ if (typeof this.keyDownHandler === 'function') {
129
+ opts.keyDownHandler = this.keyDownHandler;
130
+ }
136
131
 
137
- opts.renderItem = this.renderItem;
138
- if (!opts.renderItem) {
139
- opts.renderItem = createSlotBasedRenderFunc(this, 'item');
140
- }
132
+ opts.renderItem = this.renderItem;
133
+ if (!opts.renderItem) {
134
+ opts.renderItem = createSlotBasedRenderFunc(this, 'item');
135
+ }
141
136
 
142
- opts.unrenderItem = this.unrenderItem;
143
- if (!opts.unrenderItem) {
144
- let fn = createSlotBasedUnrenderFunc(this, 'item');
145
- if (fn) {
146
- opts.unrenderItem = (item, el) => fn(el);
147
- }
137
+ opts.unrenderItem = this.unrenderItem;
138
+ if (!opts.unrenderItem) {
139
+ let fn = createSlotBasedUnrenderFunc(this, 'item');
140
+ if (fn) {
141
+ opts.unrenderItem = (item, el) => fn(el);
148
142
  }
143
+ }
149
144
 
150
- return opts;
151
- },
152
-
153
- additionalClassesList() {
154
- return this._concatClassesObject(this.additionalClasses);
155
- },
145
+ return opts;
156
146
  },
157
147
 
158
- watch: {
159
- items(value) {
160
- if (this._list) {
161
- this._list.removeAllItems();
148
+ additionalClassesList() {
149
+ return this._concatClassesObject(this.additionalClasses);
150
+ },
151
+ },
162
152
 
163
- if (Array.isArray(value))
164
- this._list.addItems(value);
165
- }
166
- },
167
-
168
- value(value, old) {
169
- if (Array.isArray(value) && Array.isArray(old) &&
170
- value.length === old && value.every((v, i) => old[i] === v))
171
- return;
172
-
173
- if (this._list) {
174
- if (this.multi) {
175
- this._list.setCheckedValues(Array.isArray(value) ? value : value == null ? [] : [value]);
176
- } else {
177
- this._list.setSingleSelectedItemByValue(value === null ? undefined : value);
178
- }
179
- }
180
- },
153
+ watch: {
154
+ items(value) {
155
+ if (this._list) {
156
+ this._list.removeAllItems();
181
157
 
182
- additionalClasses() {
183
- if (this._list)
184
- this._list.setAdditionalClasses(this.additionalClassesList);
185
- },
158
+ if (Array.isArray(value))
159
+ this._list.addItems(value);
160
+ }
161
+ },
186
162
 
187
- renderItem() {
188
- this._recreateList();
189
- },
163
+ value(value, old) {
164
+ if (Array.isArray(value) && Array.isArray(old) &&
165
+ value.length === old && value.every((v, i) => old[i] === v))
166
+ return;
190
167
 
191
- unrenderItem() {
192
- this._recreateList();
193
- },
168
+ if (this._list) {
169
+ if (this.multi) {
170
+ this._list.setCheckedValues(Array.isArray(value) ? value : value == null ? [] : [value]);
171
+ } else {
172
+ this._list.setSingleSelectedItemByValue(value === null ? undefined : value);
173
+ }
174
+ }
175
+ },
194
176
 
195
- $scopedSlots() {
196
- this._recreateList();
197
- },
177
+ additionalClasses() {
178
+ if (this._list)
179
+ this._list.setAdditionalClasses(this.additionalClassesList);
180
+ },
198
181
 
199
- $slots() {
200
- this._recreateList();
201
- },
182
+ renderItem() {
183
+ this._recreateList();
202
184
  },
203
185
 
204
- mounted() {
205
- this._createList();
186
+ unrenderItem() {
187
+ this._recreateList();
206
188
  },
207
189
 
208
- updated() {
209
- if (this.$refs.el && this.el !== this.$refs.el) {
210
- this._createList();
211
- }
190
+ $scopedSlots() {
191
+ this._recreateList();
212
192
  },
213
193
 
214
- destroyed() {
215
- this._destroyList();
194
+ $slots() {
195
+ this._recreateList();
216
196
  },
197
+ },
198
+
199
+ mounted() {
200
+ this._createList();
201
+ },
202
+
203
+ destroyed() {
204
+ this._destroyList();
205
+ },
206
+
207
+ methods: {
208
+ _handleListEvents(event, data) {
209
+ if (event === 'select' ||
210
+ event === 'check' && !event.isCheckingGroup ||
211
+ event === 'groupcheck') {
212
+ this.$emit('input', event === 'select' ? data.value : this._list.getCheckedValues(false));
213
+ }
217
214
 
218
- methods: {
219
- _handleListEvents(event, data) {
220
- if (event === 'select' ||
221
- event === 'check' && !event.isCheckingGroup ||
222
- event === 'groupcheck') {
223
- this.$emit('input', event === 'select' ? data.value : this._list.getCheckedValues(false));
224
- }
215
+ if (event === 'hide') {
216
+ this._clearAutoRelayout();
217
+ }
225
218
 
226
- if (event === 'hide') {
227
- this._clearAutoRelayout();
219
+ if (event === 'show') {
220
+ this.relayout();
221
+
222
+ if (this.autoFocus) {
223
+ this._list.el.focus();
228
224
  }
225
+ }
229
226
 
230
- if (event === 'show') {
231
- this.relayout();
227
+ switch (event) {
228
+ case 'itemfocus':
229
+ case 'itemblur':
230
+ case 'select':
231
+ case 'show:before':
232
+ case 'show':
233
+ case 'hide:before':
234
+ case 'hide':
235
+ case 'check':
236
+ case 'groupcheck':
237
+ this.$emit(event, ...(data === undefined ? [] : [data]));
238
+ break;
239
+ }
240
+ },
232
241
 
233
- if (this.autoFocus) {
234
- this.el.focus();
235
- }
236
- }
242
+ _createList() {
243
+ this._destroyList();
237
244
 
238
- switch (event) {
239
- case 'itemfocus':
240
- case 'itemblur':
241
- case 'select':
242
- case 'show:before':
243
- case 'show':
244
- case 'hide:before':
245
- case 'hide':
246
- case 'check':
247
- case 'groupcheck':
248
- this.$emit(event, ...(data === undefined ? [] : [data]));
249
- break;
250
- }
251
- },
245
+ if (!this.$root)
246
+ return;
252
247
 
253
- _createList() {
254
- this._destroyList();
248
+ let list = new DropList(this.computedOptions);
255
249
 
256
- this.el = this.$refs.el;
257
- if (!this.el)
258
- return;
250
+ this.sink.remove(null, 'blur');
251
+ this.sink.add(list.el, 'blur', event => this.$emit('blur', event));
259
252
 
260
- let list = new DropList(this.computedOptions);
253
+ if (Array.isArray(this.items))
254
+ list.addItems(this.items);
261
255
 
262
- if (Array.isArray(this.items))
263
- list.addItems(this.items);
256
+ if (this.multi) {
257
+ list.setCheckedValues(Array.isArray(this.value) ? this.value : this.value == null ? [] : [this.value]);
258
+ } else {
259
+ list.setSingleSelectedItemByValue(this.value === null ? undefined : this.value);
260
+ }
264
261
 
265
- if (this.multi) {
266
- list.setCheckedValues(Array.isArray(this.value) ? this.value : this.value == null ? [] : [this.value]);
267
- } else {
268
- list.setSingleSelectedItemByValue(this.value === null ? undefined : this.value);
269
- }
262
+ this._list = list;
270
263
 
271
- this._list = list;
264
+ list.show(this.positionOptions);
272
265
 
273
- list.show(this.positionOptions);
266
+ this._setupAutoRelayout();
267
+ },
274
268
 
275
- this._setupAutoRelayout();
276
- },
269
+ _destroyList() {
270
+ this._clearAutoRelayout();
277
271
 
278
- _destroyList() {
279
- this._clearAutoRelayout();
272
+ if (this._list) {
273
+ this._list.destroy();
274
+ delete this._list;
275
+ }
280
276
 
281
- if (this._list) {
282
- this._list.destroy();
283
- delete this._list;
284
- }
285
- },
277
+ this.sink.remove(null, 'blur');
278
+ },
286
279
 
287
- _recreateList() {
288
- this._destroyList();
289
- this._createList();
290
- },
280
+ _recreateList() {
281
+ this._destroyList();
282
+ this._createList();
283
+ },
291
284
 
292
- _concatClassesObject(classes) {
293
- if (Array.isArray(classes)) {
294
- return classes.join(' ');
295
- }
296
- else if (classes && typeof classes === 'object') {
297
- let arr = [];
298
- for (let [key, value] of Object.entries(classes)) {
299
- if (value)
300
- arr.push(key);
301
- }
302
- return arr.join(' ');
285
+ _concatClassesObject(classes) {
286
+ if (Array.isArray(classes)) {
287
+ return classes.join(' ');
288
+ }
289
+ else if (classes && typeof classes === 'object') {
290
+ let arr = [];
291
+ for (let [key, value] of Object.entries(classes)) {
292
+ if (value)
293
+ arr.push(key);
303
294
  }
295
+ return arr.join(' ');
296
+ }
304
297
 
305
- return classes || '';
306
- },
298
+ return classes || '';
299
+ },
307
300
 
308
- _clearAutoRelayout() {
309
- this.sink.remove(null, '.trackposition');
310
- },
301
+ _clearAutoRelayout() {
302
+ this.sink.remove(null, '.trackposition');
303
+ },
311
304
 
312
- _setupAutoRelayout() {
313
- this._clearAutoRelayout();
305
+ _setupAutoRelayout() {
306
+ this._clearAutoRelayout();
314
307
 
315
- if (!this.el)
316
- return;
308
+ if (!this._list)
309
+ return;
317
310
 
318
- this.sink.add(window, 'resize.trackposition', () => this.relayout());
311
+ this.sink.add(window, 'resize.trackposition', () => this.relayout());
319
312
 
320
- let parent = this.el.parentNode;
321
- while (parent) {
322
- if (parent.scrollHeight > parent.offsetHeight ||
323
- parent.scrollWidth > parent.offsetWidth) {
324
- if (parent === document.documentElement) {
325
- parent = window;
326
- }
327
- this.sink.add(parent, 'scroll.trackposition', () => this.relayout());
313
+ let parent = this._list.el.parentNode;
314
+ while (parent) {
315
+ if (parent.scrollHeight > parent.offsetHeight ||
316
+ parent.scrollWidth > parent.offsetWidth) {
317
+ if (parent === document.documentElement) {
318
+ parent = window;
328
319
  }
329
- parent = parent.parentNode;
320
+ this.sink.add(parent, 'scroll.trackposition', () => this.relayout());
330
321
  }
331
- },
322
+ parent = parent.parentNode;
323
+ }
324
+ },
332
325
 
333
- relayout() {
334
- if (this._list)
335
- this._list.relayout(this.positionOptions);
336
- },
326
+ relayout() {
327
+ if (this._list)
328
+ this._list.relayout(this.positionOptions);
337
329
  },
338
- };
330
+ },
331
+ };
339
332
  </script>
package/vue/SelectBox.vue CHANGED
@@ -541,6 +541,11 @@
541
541
  this._box.setListOptions(this.computedListOptions);
542
542
  },
543
543
 
544
+ filterFn() {
545
+ if (this._box)
546
+ this._box.setFilterFn(this.filterFn);
547
+ },
548
+
544
549
  $scopedSlots() {
545
550
  if (this._box)
546
551
  this._box.setListOptions(this.computedListOptions);