@danielgindi/selectbox 1.0.52 → 1.0.55

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 (15) 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 +271 -275
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@danielgindi/selectbox",
3
- "version": "1.0.52",
3
+ "version": "1.0.55",
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,335 @@
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,
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,
96
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
- };
100
+ if (this.baseClassName) {
101
+ opts.baseClassName = this.baseClassName;
102
+ }
104
103
 
105
- if (this.baseClassName) {
106
- opts.baseClassName = this.baseClassName;
107
- }
104
+ if (this.additionalClassesList) {
105
+ opts.additionalClasses = this.additionalClassesList;
106
+ }
108
107
 
109
- if (this.additionalClassesList) {
110
- opts.additionalClasses = this.additionalClassesList;
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];
111
113
  }
114
+ }
112
115
 
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
- }
116
+ for (let key of ['estimatedItemHeight', 'virtualMinItems']) {
117
+ if (typeof this[key] === 'number') {
118
+ opts[key] = this[key];
119
119
  }
120
+ }
120
121
 
121
- for (let key of ['estimatedItemHeight', 'virtualMinItems']) {
122
- if (typeof this[key] === 'number') {
123
- opts[key] = this[key];
124
- }
122
+ for (let key of ['labelProp', 'valueProp']) {
123
+ if (typeof this[key] === 'string') {
124
+ opts[key] = this[key];
125
125
  }
126
+ }
126
127
 
127
- for (let key of ['labelProp', 'valueProp']) {
128
- if (typeof this[key] === 'string') {
129
- opts[key] = this[key];
130
- }
131
- }
128
+ if (typeof this.keyDownHandler === 'function') {
129
+ opts.keyDownHandler = this.keyDownHandler;
130
+ }
132
131
 
133
- if (typeof this.keyDownHandler === 'function') {
134
- opts.keyDownHandler = this.keyDownHandler;
135
- }
132
+ opts.renderItem = this.renderItem;
133
+ if (!opts.renderItem) {
134
+ opts.renderItem = createSlotBasedRenderFunc(this, 'item');
135
+ }
136
136
 
137
- opts.renderItem = this.renderItem;
138
- if (!opts.renderItem) {
139
- opts.renderItem = createSlotBasedRenderFunc(this, 'item');
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);
140
142
  }
143
+ }
141
144
 
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
- }
148
- }
145
+ return opts;
146
+ },
149
147
 
150
- return opts;
151
- },
148
+ additionalClassesList() {
149
+ return this._concatClassesObject(this.additionalClasses);
150
+ },
151
+ },
152
+
153
+ watch: {
154
+ items(value) {
155
+ if (this._list) {
156
+ this._list.removeAllItems();
152
157
 
153
- additionalClassesList() {
154
- return this._concatClassesObject(this.additionalClasses);
155
- },
158
+ if (Array.isArray(value))
159
+ this._list.addItems(value);
160
+ }
156
161
  },
157
162
 
158
- watch: {
159
- items(value) {
160
- if (this._list) {
161
- this._list.removeAllItems();
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;
162
167
 
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
- }
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);
179
173
  }
180
- },
181
-
182
- additionalClasses() {
183
- if (this._list)
184
- this._list.setAdditionalClasses(this.additionalClassesList);
185
- },
174
+ }
175
+ },
186
176
 
187
- renderItem() {
188
- this._recreateList();
189
- },
177
+ additionalClasses() {
178
+ if (this._list)
179
+ this._list.setAdditionalClasses(this.additionalClassesList);
180
+ },
190
181
 
191
- unrenderItem() {
192
- this._recreateList();
193
- },
182
+ renderItem() {
183
+ this._recreateList();
184
+ },
194
185
 
195
- $scopedSlots() {
196
- this._recreateList();
197
- },
186
+ unrenderItem() {
187
+ this._recreateList();
188
+ },
198
189
 
199
- $slots() {
200
- this._recreateList();
201
- },
190
+ $scopedSlots() {
191
+ this._recreateList();
202
192
  },
203
193
 
204
- mounted() {
205
- this._createList();
194
+ $slots() {
195
+ this._recreateList();
206
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
+ }
207
214
 
208
- updated() {
209
- if (this.$refs.el && this.el !== this.$refs.el) {
210
- this._createList();
215
+ if (event === 'hide') {
216
+ this._clearAutoRelayout();
211
217
  }
212
- },
213
218
 
214
- destroyed() {
215
- this._destroyList();
216
- },
219
+ if (event === 'show') {
220
+ this.relayout();
217
221
 
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));
222
+ if (this.autoFocus) {
223
+ this._list.el.focus();
224
224
  }
225
+ }
225
226
 
226
- if (event === 'hide') {
227
- this._clearAutoRelayout();
228
- }
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
+ },
229
241
 
230
- if (event === 'show') {
231
- this.relayout();
242
+ _createList() {
243
+ this._destroyList();
232
244
 
233
- if (this.autoFocus) {
234
- this.el.focus();
235
- }
236
- }
245
+ if (!this.$root)
246
+ return;
237
247
 
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
- },
248
+ let list = new DropList(this.computedOptions);
249
+ this.el = list.el;
252
250
 
253
- _createList() {
254
- this._destroyList();
251
+ this.sink.remove(null, 'blur');
252
+ this.sink.add(list.el, 'blur', event => this.$emit('blur', event));
255
253
 
256
- this.el = this.$refs.el;
257
- if (!this.el)
258
- return;
254
+ if (Array.isArray(this.items))
255
+ list.addItems(this.items);
259
256
 
260
- let list = new DropList(this.computedOptions);
257
+ if (this.multi) {
258
+ list.setCheckedValues(Array.isArray(this.value) ? this.value : this.value == null ? [] : [this.value]);
259
+ } else {
260
+ list.setSingleSelectedItemByValue(this.value === null ? undefined : this.value);
261
+ }
261
262
 
262
- if (Array.isArray(this.items))
263
- list.addItems(this.items);
263
+ this._list = list;
264
264
 
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
- }
265
+ list.show(this.positionOptions);
270
266
 
271
- this._list = list;
267
+ this._setupAutoRelayout();
268
+ },
272
269
 
273
- list.show(this.positionOptions);
270
+ _destroyList() {
271
+ this._clearAutoRelayout();
274
272
 
275
- this._setupAutoRelayout();
276
- },
273
+ if (this._list) {
274
+ this._list.destroy();
275
+ delete this._list;
276
+ }
277
277
 
278
- _destroyList() {
279
- this._clearAutoRelayout();
278
+ this.el = undefined;
280
279
 
281
- if (this._list) {
282
- this._list.destroy();
283
- delete this._list;
284
- }
285
- },
280
+ this.sink.remove(null, 'blur');
281
+ },
286
282
 
287
- _recreateList() {
288
- this._destroyList();
289
- this._createList();
290
- },
283
+ _recreateList() {
284
+ this._destroyList();
285
+ this._createList();
286
+ },
291
287
 
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(' ');
288
+ _concatClassesObject(classes) {
289
+ if (Array.isArray(classes)) {
290
+ return classes.join(' ');
291
+ }
292
+ else if (classes && typeof classes === 'object') {
293
+ let arr = [];
294
+ for (let [key, value] of Object.entries(classes)) {
295
+ if (value)
296
+ arr.push(key);
303
297
  }
298
+ return arr.join(' ');
299
+ }
304
300
 
305
- return classes || '';
306
- },
301
+ return classes || '';
302
+ },
307
303
 
308
- _clearAutoRelayout() {
309
- this.sink.remove(null, '.trackposition');
310
- },
304
+ _clearAutoRelayout() {
305
+ this.sink.remove(null, '.trackposition');
306
+ },
311
307
 
312
- _setupAutoRelayout() {
313
- this._clearAutoRelayout();
308
+ _setupAutoRelayout() {
309
+ this._clearAutoRelayout();
314
310
 
315
- if (!this.el)
316
- return;
311
+ if (!this._list)
312
+ return;
317
313
 
318
- this.sink.add(window, 'resize.trackposition', () => this.relayout());
314
+ this.sink.add(window, 'resize.trackposition', () => this.relayout());
319
315
 
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());
316
+ let parent = this._list.el.parentNode;
317
+ while (parent) {
318
+ if (parent.scrollHeight > parent.offsetHeight ||
319
+ parent.scrollWidth > parent.offsetWidth) {
320
+ if (parent === document.documentElement) {
321
+ parent = window;
328
322
  }
329
- parent = parent.parentNode;
323
+ this.sink.add(parent, 'scroll.trackposition', () => this.relayout());
330
324
  }
331
- },
325
+ parent = parent.parentNode;
326
+ }
327
+ },
332
328
 
333
- relayout() {
334
- if (this._list)
335
- this._list.relayout(this.positionOptions);
336
- },
329
+ relayout() {
330
+ if (this._list)
331
+ this._list.relayout(this.positionOptions);
337
332
  },
338
- };
333
+ },
334
+ };
339
335
  </script>