@enso-ui/select 3.0.5 → 3.0.9
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/package.json +1 -1
- package/src/bulma/Tag.vue +2 -0
- package/src/bulma/VueSelect.vue +125 -120
- package/src/renderless/CoreSelect.vue +29 -25
package/package.json
CHANGED
package/src/bulma/Tag.vue
CHANGED
package/src/bulma/VueSelect.vue
CHANGED
|
@@ -1,125 +1,126 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
:disabled="dropdownDisabled"
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
2
|
+
<div class="vue-select">
|
|
3
|
+
<core-select v-bind="{...$attrs, class: undefined}"
|
|
4
|
+
ref="select">
|
|
5
|
+
<template #default="{
|
|
6
|
+
allowsSelection, canAddTag, clearControl, clearEvents, dropdownDisabled, disableClear,
|
|
7
|
+
disabled, displayLabel, filterBindings, filterEvents, hasOptions, hasSelection,
|
|
8
|
+
highlight, i18n, isSelected, itemEvents, modeSelector, modeBindings, modeEvents,
|
|
9
|
+
multiple, needsSearch, noResults, reload, loading, options, query, reset,
|
|
10
|
+
selection, selectionBindings, selectionEvents, taggable, taggableBindings,
|
|
11
|
+
taggableEvents, trackBy,
|
|
12
|
+
}">
|
|
13
|
+
<dropdown :disabled="dropdownDisabled"
|
|
14
|
+
:manual="multiple || canAddTag || !allowsSelection"
|
|
15
|
+
@hide="reset()"
|
|
16
|
+
ref="dropdown">
|
|
17
|
+
<template #trigger="{ triggerEvents, open }">
|
|
18
|
+
<button class="button input"
|
|
19
|
+
:class="{ 'has-error': hasError }"
|
|
20
|
+
type="button"
|
|
21
|
+
:disabled="disabled"
|
|
22
|
+
@click="reload"
|
|
23
|
+
v-on="triggerEvents"
|
|
24
|
+
ref="trigger">
|
|
25
|
+
<div class="control-display"
|
|
26
|
+
:class="{ 'with-clear-button': !disableClear }">
|
|
27
|
+
<slot name="selection"
|
|
28
|
+
:selection="selection"
|
|
29
|
+
:selection-bindings="selectionBindings"
|
|
30
|
+
:selection-events="selectionEvents">
|
|
31
|
+
<div class="field is-grouped is-grouped-multiline"
|
|
32
|
+
v-if="hasSelection">
|
|
33
|
+
<div class="control">
|
|
34
|
+
<template v-if="multiple">
|
|
35
|
+
<tag v-bind="selectionBindings(value)"
|
|
36
|
+
v-for="value in selection"
|
|
37
|
+
:key="value[trackBy]"
|
|
38
|
+
v-on="selectionEvents(value)"/>
|
|
39
|
+
</template>
|
|
40
|
+
<template v-else>
|
|
41
|
+
{{ displayLabel(selection) }}
|
|
42
|
+
</template>
|
|
43
|
+
</div>
|
|
43
44
|
</div>
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
</
|
|
45
|
+
<template v-else-if="!hasOptions && !query">
|
|
46
|
+
{{ i18n(labels.noOptions) }}
|
|
47
|
+
</template>
|
|
48
|
+
<template v-else>
|
|
49
|
+
{{ i18n(placeholder) }}
|
|
50
|
+
</template>
|
|
51
|
+
<span class="is-loading"
|
|
52
|
+
v-if="loading"/>
|
|
53
|
+
<a class="delete is-small"
|
|
54
|
+
v-on="clearEvents"
|
|
55
|
+
v-if="clearControl"/>
|
|
56
|
+
</slot>
|
|
57
|
+
</div>
|
|
58
|
+
<dropdown-indicator :open="open" v-if="!disabled"/>
|
|
59
|
+
</button>
|
|
60
|
+
</template>
|
|
61
|
+
<template #controls
|
|
62
|
+
v-if="needsSearch">
|
|
63
|
+
<div class="dropdown-item search">
|
|
64
|
+
<div class="control has-icons-right">
|
|
65
|
+
<input class="input"
|
|
66
|
+
v-bind="filterBindings"
|
|
67
|
+
type="text"
|
|
68
|
+
:placeholder="i18n(labels.search)"
|
|
69
|
+
v-on="filterEvents"
|
|
70
|
+
v-focus>
|
|
71
|
+
<search-mode class="is-right icon is-small search-mode"
|
|
72
|
+
v-bind="modeBindings"
|
|
73
|
+
v-on="modeEvents"
|
|
74
|
+
v-if="modeSelector"/>
|
|
75
|
+
</div>
|
|
57
76
|
</div>
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
<
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
:key="option[trackBy]"
|
|
90
|
-
:selected="false"
|
|
91
|
-
v-on="itemEvents(index)">
|
|
92
|
-
<template #default="{ current }">
|
|
93
|
-
<slot name="option"
|
|
94
|
-
:option="option"
|
|
95
|
-
:highlight="highlight">
|
|
96
|
-
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
97
|
-
<span v-html="highlight(displayLabel(option))"/>
|
|
98
|
-
</slot>
|
|
99
|
-
<span class="label tag"
|
|
100
|
-
:class="isSelected(option) ? 'is-warning' : 'is-success'"
|
|
101
|
-
v-if="current && !disableClear">
|
|
102
|
-
<span v-if="isSelected(option)">
|
|
103
|
-
{{ i18n(labels.deselect) }}
|
|
77
|
+
</template>
|
|
78
|
+
<template #items>
|
|
79
|
+
<dropdown-item v-bind="taggableBindings"
|
|
80
|
+
key="add-tag"
|
|
81
|
+
v-on="taggableEvents"
|
|
82
|
+
v-if="canAddTag">
|
|
83
|
+
{{ query }}
|
|
84
|
+
<span class="label tag is-info">
|
|
85
|
+
{{ i18n(labels.add) }}
|
|
86
|
+
</span>
|
|
87
|
+
</dropdown-item>
|
|
88
|
+
<dropdown-item v-for="(option, index) in options"
|
|
89
|
+
:key="option[trackBy]"
|
|
90
|
+
:selected="false"
|
|
91
|
+
v-on="itemEvents(index)">
|
|
92
|
+
<template #default="{ current }">
|
|
93
|
+
<slot name="option"
|
|
94
|
+
:option="option"
|
|
95
|
+
:highlight="highlight">
|
|
96
|
+
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
97
|
+
<span v-html="highlight(displayLabel(option))"/>
|
|
98
|
+
</slot>
|
|
99
|
+
<span class="label tag"
|
|
100
|
+
:class="isSelected(option) ? 'is-warning' : 'is-success'"
|
|
101
|
+
v-if="current && !disableClear">
|
|
102
|
+
<span v-if="isSelected(option)">
|
|
103
|
+
{{ i18n(labels.deselect) }}
|
|
104
|
+
</span>
|
|
105
|
+
<span v-else>
|
|
106
|
+
{{ i18n(labels.select) }}
|
|
107
|
+
</span>
|
|
104
108
|
</span>
|
|
105
|
-
<span
|
|
106
|
-
|
|
109
|
+
<span class="icon is-small selected has-text-success"
|
|
110
|
+
v-else-if="isSelected(option)">
|
|
111
|
+
<fa icon="check"/>
|
|
107
112
|
</span>
|
|
108
|
-
</
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
</
|
|
114
|
-
</
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
</template>
|
|
120
|
-
</dropdown>
|
|
121
|
-
</template>
|
|
122
|
-
</core-select>
|
|
113
|
+
</template>
|
|
114
|
+
</dropdown-item>
|
|
115
|
+
<dropdown-item key="no-results"
|
|
116
|
+
v-if="!taggable && noResults">
|
|
117
|
+
{{ i18n(labels.noResults) }}
|
|
118
|
+
</dropdown-item>
|
|
119
|
+
</template>
|
|
120
|
+
</dropdown>
|
|
121
|
+
</template>
|
|
122
|
+
</core-select>
|
|
123
|
+
</div>
|
|
123
124
|
</template>
|
|
124
125
|
|
|
125
126
|
<script>
|
|
@@ -198,7 +199,8 @@ export default {
|
|
|
198
199
|
|
|
199
200
|
|
|
200
201
|
<style lang="scss">
|
|
201
|
-
|
|
202
|
+
.vue-select {
|
|
203
|
+
.dropdown {
|
|
202
204
|
width: 100%;
|
|
203
205
|
|
|
204
206
|
.dropdown-trigger {
|
|
@@ -245,9 +247,11 @@ export default {
|
|
|
245
247
|
.delete {
|
|
246
248
|
position: absolute;
|
|
247
249
|
top: 0.55rem;
|
|
250
|
+
|
|
248
251
|
[dir='ltr'] & {
|
|
249
252
|
right: 1.5rem;
|
|
250
253
|
}
|
|
254
|
+
|
|
251
255
|
[dir='rtl'] & {
|
|
252
256
|
left: 1.5rem;
|
|
253
257
|
}
|
|
@@ -262,15 +266,16 @@ export default {
|
|
|
262
266
|
content: "";
|
|
263
267
|
display: block;
|
|
264
268
|
height: 1em;
|
|
265
|
-
position: relative;
|
|
266
269
|
width: 1em;
|
|
267
270
|
position: absolute !important;
|
|
268
271
|
top: .55em;
|
|
269
272
|
z-index: 4;
|
|
273
|
+
|
|
270
274
|
[dir='ltr'] & {
|
|
271
275
|
border-right-color: transparent;
|
|
272
276
|
right: 1.7rem;
|
|
273
277
|
}
|
|
278
|
+
|
|
274
279
|
[dir='rtl'] & {
|
|
275
280
|
border-left-color: transparent;
|
|
276
281
|
left: 1.7rem;
|
|
@@ -337,5 +342,5 @@ export default {
|
|
|
337
342
|
}
|
|
338
343
|
}
|
|
339
344
|
}
|
|
340
|
-
|
|
345
|
+
}
|
|
341
346
|
</style>
|
|
@@ -95,12 +95,17 @@ export default {
|
|
|
95
95
|
type: Boolean,
|
|
96
96
|
default: false,
|
|
97
97
|
},
|
|
98
|
-
|
|
98
|
+
modelValue: {
|
|
99
99
|
type: null,
|
|
100
100
|
required: true,
|
|
101
101
|
},
|
|
102
102
|
},
|
|
103
103
|
|
|
104
|
+
emits: [
|
|
105
|
+
'add-tag', 'clear', 'deselect', 'fetch', 'input', 'select',
|
|
106
|
+
'selection', 'update', 'update:modelValue',
|
|
107
|
+
],
|
|
108
|
+
|
|
104
109
|
data: v => ({
|
|
105
110
|
allowsSelection: true,
|
|
106
111
|
internalValue: null,
|
|
@@ -133,8 +138,8 @@ export default {
|
|
|
133
138
|
},
|
|
134
139
|
hasSelection() {
|
|
135
140
|
return this.multiple
|
|
136
|
-
? this.
|
|
137
|
-
: this.
|
|
141
|
+
? this.modelValue.length > 0
|
|
142
|
+
: this.modelValue !== null;
|
|
138
143
|
},
|
|
139
144
|
modeSelector() {
|
|
140
145
|
return this.searchModes.length > 1;
|
|
@@ -152,10 +157,10 @@ export default {
|
|
|
152
157
|
},
|
|
153
158
|
selection() {
|
|
154
159
|
return this.multiple
|
|
155
|
-
? this.optionList.filter(option => this.
|
|
160
|
+
? this.optionList.filter(option => this.modelValue
|
|
156
161
|
.some(val => this.valueMatchesOption(val, option)))
|
|
157
162
|
: this.optionList
|
|
158
|
-
|
|
163
|
+
.find(option => this.valueMatchesOption(this.modelValue, option)) || null;
|
|
159
164
|
},
|
|
160
165
|
serverSide() {
|
|
161
166
|
return this.source !== null;
|
|
@@ -205,10 +210,10 @@ export default {
|
|
|
205
210
|
this.optionList = this.options;
|
|
206
211
|
this.fetchIfServerSide();
|
|
207
212
|
},
|
|
208
|
-
|
|
213
|
+
modelValue: {
|
|
209
214
|
handler(value) {
|
|
210
215
|
if (JSON.stringify(this.internalValue) !== JSON.stringify(value)) {
|
|
211
|
-
this.$emit('
|
|
216
|
+
this.$emit('update:modelValue', value);
|
|
212
217
|
}
|
|
213
218
|
this.internalValue = null;
|
|
214
219
|
if (this.query) {
|
|
@@ -245,7 +250,7 @@ export default {
|
|
|
245
250
|
this.$emit('clear');
|
|
246
251
|
},
|
|
247
252
|
deselect(deselect) {
|
|
248
|
-
const value = JSON.parse(JSON.stringify(this.
|
|
253
|
+
const value = JSON.parse(JSON.stringify(this.modelValue));
|
|
249
254
|
|
|
250
255
|
const index = value
|
|
251
256
|
.findIndex(val => val === deselect[this.trackBy]);
|
|
@@ -296,7 +301,7 @@ export default {
|
|
|
296
301
|
}
|
|
297
302
|
},
|
|
298
303
|
handleMultipleSelection(option) {
|
|
299
|
-
const index = this.
|
|
304
|
+
const index = this.modelValue
|
|
300
305
|
.findIndex(val => this.valueMatchesOption(val, option));
|
|
301
306
|
|
|
302
307
|
const value = this.updateMultipleSelection(index, option);
|
|
@@ -305,7 +310,7 @@ export default {
|
|
|
305
310
|
handleSingleSelection(option) {
|
|
306
311
|
this.reset();
|
|
307
312
|
|
|
308
|
-
const selection = this.valueMatchesOption(this.
|
|
313
|
+
const selection = this.valueMatchesOption(this.modelValue, option);
|
|
309
314
|
|
|
310
315
|
if (!selection) {
|
|
311
316
|
this.update(this.optionValue(option));
|
|
@@ -330,8 +335,8 @@ export default {
|
|
|
330
335
|
},
|
|
331
336
|
isSelected(option) {
|
|
332
337
|
return this.multiple
|
|
333
|
-
? this.
|
|
334
|
-
: this.valueMatchesOption(this.
|
|
338
|
+
? this.modelValue.some(val => this.valueMatchesOption(val, option))
|
|
339
|
+
: this.valueMatchesOption(this.modelValue, option);
|
|
335
340
|
},
|
|
336
341
|
matchesQuery(option) {
|
|
337
342
|
const label = this.displayLabel(option);
|
|
@@ -374,12 +379,12 @@ export default {
|
|
|
374
379
|
},
|
|
375
380
|
requestValue() {
|
|
376
381
|
if (!this.objects) {
|
|
377
|
-
return this.
|
|
382
|
+
return this.modelValue;
|
|
378
383
|
}
|
|
379
384
|
|
|
380
385
|
return this.multiple
|
|
381
|
-
? this.
|
|
382
|
-
: this.
|
|
386
|
+
? this.modelValue.map(value => value[this.trackBy])
|
|
387
|
+
: this.modelValue[this.trackBy];
|
|
383
388
|
},
|
|
384
389
|
reset() {
|
|
385
390
|
this.query = '';
|
|
@@ -400,7 +405,7 @@ export default {
|
|
|
400
405
|
},
|
|
401
406
|
update(value) {
|
|
402
407
|
this.internalValue = value;
|
|
403
|
-
this.$emit('
|
|
408
|
+
this.$emit('update:modelValue', value);
|
|
404
409
|
this.$emit('update');
|
|
405
410
|
},
|
|
406
411
|
updateSelection() {
|
|
@@ -408,7 +413,7 @@ export default {
|
|
|
408
413
|
? this.valuesWhithinOptions()
|
|
409
414
|
: this.valueWhithinOptions();
|
|
410
415
|
|
|
411
|
-
if (JSON.stringify(value) !== JSON.stringify(this.
|
|
416
|
+
if (JSON.stringify(value) !== JSON.stringify(this.modelValue)) {
|
|
412
417
|
this.update(value);
|
|
413
418
|
}
|
|
414
419
|
},
|
|
@@ -418,17 +423,17 @@ export default {
|
|
|
418
423
|
: `${value}` === `${option[this.trackBy]}`;
|
|
419
424
|
},
|
|
420
425
|
valuesWhithinOptions() {
|
|
421
|
-
return this.
|
|
426
|
+
return this.modelValue.filter(val => this.optionList
|
|
422
427
|
.some(option => this.valueMatchesOption(val, option)));
|
|
423
428
|
},
|
|
424
429
|
valueWhithinOptions() {
|
|
425
430
|
return this.optionList
|
|
426
|
-
.some(option => this.valueMatchesOption(this.
|
|
427
|
-
? this.
|
|
431
|
+
.some(option => this.valueMatchesOption(this.modelValue, option))
|
|
432
|
+
? this.modelValue
|
|
428
433
|
: null;
|
|
429
434
|
},
|
|
430
435
|
updateMultipleSelection(index, option) {
|
|
431
|
-
const value = JSON.parse(JSON.stringify(this.
|
|
436
|
+
const value = JSON.parse(JSON.stringify(this.modelValue));
|
|
432
437
|
|
|
433
438
|
if (index >= 0) {
|
|
434
439
|
value.splice(index, 1);
|
|
@@ -457,7 +462,7 @@ export default {
|
|
|
457
462
|
disabled: this.disabled,
|
|
458
463
|
displayLabel: this.displayLabel,
|
|
459
464
|
dropdownDisabled: this.dropdownDisabled,
|
|
460
|
-
filterBindings: {
|
|
465
|
+
filterBindings: { modelValue: this.query },
|
|
461
466
|
filterEvents: {
|
|
462
467
|
input: e => (this.query = e.target.value),
|
|
463
468
|
click: e => e.stopPropagation(),
|
|
@@ -488,15 +493,14 @@ export default {
|
|
|
488
493
|
modeBindings: {
|
|
489
494
|
modes: this.searchModes,
|
|
490
495
|
query: this.query,
|
|
491
|
-
|
|
496
|
+
'update:modelValue': this.mode,
|
|
492
497
|
},
|
|
493
498
|
modeEvents: {
|
|
494
|
-
|
|
499
|
+
'update:modelValue': event => (this.mode = event),
|
|
495
500
|
change: this.fetch,
|
|
496
501
|
},
|
|
497
502
|
modeSelector: this.modeSelector,
|
|
498
503
|
select: this.select,
|
|
499
|
-
selected: this.selected,
|
|
500
504
|
selection: this.selection,
|
|
501
505
|
selectionBindings: value => ({
|
|
502
506
|
disabled: this.disabled || this.readonly,
|