@enso-ui/select 3.0.7 → 3.0.11
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 +144 -133
- package/src/renderless/CoreSelect.vue +3 -2
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="{ keydown }"
|
|
62
|
+
v-if="needsSearch">
|
|
63
|
+
<div class="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, keydown }"
|
|
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,10 @@ export default {
|
|
|
198
199
|
|
|
199
200
|
|
|
200
201
|
<style lang="scss">
|
|
201
|
-
|
|
202
|
+
@import 'bulma/sass/utilities/derived-variables';
|
|
203
|
+
|
|
204
|
+
.vue-select {
|
|
205
|
+
.dropdown {
|
|
202
206
|
width: 100%;
|
|
203
207
|
|
|
204
208
|
.dropdown-trigger {
|
|
@@ -209,6 +213,10 @@ export default {
|
|
|
209
213
|
height: unset;
|
|
210
214
|
min-height: 2.2125em;
|
|
211
215
|
|
|
216
|
+
&.has-error {
|
|
217
|
+
border-color: $danger;
|
|
218
|
+
}
|
|
219
|
+
|
|
212
220
|
.control-display {
|
|
213
221
|
&.with-clear-button {
|
|
214
222
|
max-width: calc(100% - 2.5em);
|
|
@@ -245,9 +253,11 @@ export default {
|
|
|
245
253
|
.delete {
|
|
246
254
|
position: absolute;
|
|
247
255
|
top: 0.55rem;
|
|
256
|
+
|
|
248
257
|
[dir='ltr'] & {
|
|
249
258
|
right: 1.5rem;
|
|
250
259
|
}
|
|
260
|
+
|
|
251
261
|
[dir='rtl'] & {
|
|
252
262
|
left: 1.5rem;
|
|
253
263
|
}
|
|
@@ -262,15 +272,16 @@ export default {
|
|
|
262
272
|
content: "";
|
|
263
273
|
display: block;
|
|
264
274
|
height: 1em;
|
|
265
|
-
position: relative;
|
|
266
275
|
width: 1em;
|
|
267
276
|
position: absolute !important;
|
|
268
277
|
top: .55em;
|
|
269
278
|
z-index: 4;
|
|
279
|
+
|
|
270
280
|
[dir='ltr'] & {
|
|
271
281
|
border-right-color: transparent;
|
|
272
282
|
right: 1.7rem;
|
|
273
283
|
}
|
|
284
|
+
|
|
274
285
|
[dir='rtl'] & {
|
|
275
286
|
border-left-color: transparent;
|
|
276
287
|
left: 1.7rem;
|
|
@@ -286,25 +297,25 @@ export default {
|
|
|
286
297
|
.dropdown-content {
|
|
287
298
|
width: 100%;
|
|
288
299
|
|
|
300
|
+
.search {
|
|
301
|
+
padding: 0 0.375rem 0.6rem;
|
|
302
|
+
|
|
303
|
+
.input {
|
|
304
|
+
height: 2em;
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
.search-mode {
|
|
308
|
+
right: 0.3em;
|
|
309
|
+
pointer-events: all;
|
|
310
|
+
}
|
|
311
|
+
}
|
|
312
|
+
|
|
289
313
|
.dropdown-item {
|
|
290
314
|
text-overflow: ellipsis;
|
|
291
315
|
overflow-x: hidden;
|
|
292
316
|
white-space: nowrap;
|
|
293
317
|
padding: 0.375rem 2rem 0.375rem 0.6rem;
|
|
294
318
|
|
|
295
|
-
&.search {
|
|
296
|
-
padding: 0 0.375rem 0.6rem;
|
|
297
|
-
|
|
298
|
-
.input {
|
|
299
|
-
height: 2em;
|
|
300
|
-
}
|
|
301
|
-
|
|
302
|
-
.search-mode {
|
|
303
|
-
right: 0.3em;
|
|
304
|
-
pointer-events: all;
|
|
305
|
-
}
|
|
306
|
-
}
|
|
307
|
-
|
|
308
319
|
.label.tag {
|
|
309
320
|
position: absolute;
|
|
310
321
|
padding: 0.3rem;
|
|
@@ -337,5 +348,5 @@ export default {
|
|
|
337
348
|
}
|
|
338
349
|
}
|
|
339
350
|
}
|
|
340
|
-
|
|
351
|
+
}
|
|
341
352
|
</style>
|
|
@@ -102,10 +102,12 @@ export default {
|
|
|
102
102
|
},
|
|
103
103
|
|
|
104
104
|
emits: [
|
|
105
|
-
'add-tag', 'clear', 'deselect', 'fetch', 'select',
|
|
105
|
+
'add-tag', 'clear', 'deselect', 'fetch', 'input', 'select',
|
|
106
106
|
'selection', 'update', 'update:modelValue',
|
|
107
107
|
],
|
|
108
108
|
|
|
109
|
+
inheritAttrs: false,
|
|
110
|
+
|
|
109
111
|
data: v => ({
|
|
110
112
|
allowsSelection: true,
|
|
111
113
|
internalValue: null,
|
|
@@ -501,7 +503,6 @@ export default {
|
|
|
501
503
|
},
|
|
502
504
|
modeSelector: this.modeSelector,
|
|
503
505
|
select: this.select,
|
|
504
|
-
selected: this.selected,
|
|
505
506
|
selection: this.selection,
|
|
506
507
|
selectionBindings: value => ({
|
|
507
508
|
disabled: this.disabled || this.readonly,
|