@enso-ui/select 3.0.7 → 3.0.8
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/VueSelect.vue +125 -120
- package/src/renderless/CoreSelect.vue +0 -1
package/package.json
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>
|