goodteditor-ui 1.0.78 → 1.0.79
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
CHANGED
|
@@ -19,16 +19,20 @@
|
|
|
19
19
|
option,
|
|
20
20
|
index,
|
|
21
21
|
cursorIndex,
|
|
22
|
-
setCursorIndex
|
|
23
|
-
}"
|
|
24
|
-
|
|
25
|
-
<li
|
|
26
|
-
:class="{ active: index == cursorIndex }"
|
|
27
|
-
:key="index"
|
|
28
|
-
@click="onOptionClick(option, index)"
|
|
29
|
-
>
|
|
22
|
+
setCursorIndex
|
|
23
|
+
}">
|
|
24
|
+
<li :class="{ active: index == cursorIndex }" :key="index" @click="onOptionClick(option, index)">
|
|
30
25
|
<div class="text-truncate" style="min-height: calc(var(--line-height) * 1rem)">
|
|
31
|
-
|
|
26
|
+
<slot
|
|
27
|
+
name="option-label"
|
|
28
|
+
v-bind="{
|
|
29
|
+
option,
|
|
30
|
+
index,
|
|
31
|
+
cursorIndex,
|
|
32
|
+
setCursorIndex
|
|
33
|
+
}">
|
|
34
|
+
{{ option }}
|
|
35
|
+
</slot>
|
|
32
36
|
</div>
|
|
33
37
|
</li>
|
|
34
38
|
</slot>
|
|
@@ -42,9 +46,11 @@
|
|
|
42
46
|
<style lang="less" scoped>
|
|
43
47
|
.dropdown {
|
|
44
48
|
outline: none;
|
|
49
|
+
|
|
45
50
|
ul {
|
|
46
51
|
scroll-behavior: smooth;
|
|
47
52
|
}
|
|
53
|
+
|
|
48
54
|
&.no-scroll-animation {
|
|
49
55
|
ul {
|
|
50
56
|
scroll-behavior: auto;
|
|
@@ -64,7 +70,7 @@ export default {
|
|
|
64
70
|
type: Array,
|
|
65
71
|
default() {
|
|
66
72
|
return [];
|
|
67
|
-
}
|
|
73
|
+
}
|
|
68
74
|
},
|
|
69
75
|
/**
|
|
70
76
|
* Defines the size of the component
|
|
@@ -75,22 +81,22 @@ export default {
|
|
|
75
81
|
default: '',
|
|
76
82
|
validator: function (value) {
|
|
77
83
|
return ['', 'small', 'large'].indexOf(value) >= 0;
|
|
78
|
-
}
|
|
84
|
+
}
|
|
79
85
|
},
|
|
80
86
|
/**
|
|
81
87
|
* Defines the max-height of the dropdown list (value may be any css unit/expression)
|
|
82
88
|
*/
|
|
83
89
|
maxHeight: {
|
|
84
90
|
type: String,
|
|
85
|
-
default: ''
|
|
91
|
+
default: ''
|
|
86
92
|
},
|
|
87
93
|
/**
|
|
88
94
|
* The current cursor index position (.sync)
|
|
89
95
|
*/
|
|
90
96
|
cursorIndex: {
|
|
91
97
|
type: Number,
|
|
92
|
-
default: -1
|
|
93
|
-
}
|
|
98
|
+
default: -1
|
|
99
|
+
}
|
|
94
100
|
},
|
|
95
101
|
data() {
|
|
96
102
|
return { useScrollAnimation: true };
|
|
@@ -102,7 +108,7 @@ export default {
|
|
|
102
108
|
size && o.push(`dropdown-${this.size}`);
|
|
103
109
|
!useScrollAnimation && o.push('no-scroll-animation');
|
|
104
110
|
return o;
|
|
105
|
-
}
|
|
111
|
+
}
|
|
106
112
|
},
|
|
107
113
|
watch: {
|
|
108
114
|
cursorIndex: {
|
|
@@ -114,8 +120,8 @@ export default {
|
|
|
114
120
|
this.useScrollAnimation = true;
|
|
115
121
|
});
|
|
116
122
|
},
|
|
117
|
-
immediate: true
|
|
118
|
-
}
|
|
123
|
+
immediate: true
|
|
124
|
+
}
|
|
119
125
|
},
|
|
120
126
|
methods: {
|
|
121
127
|
onOptionClick(option, index) {
|
|
@@ -158,7 +164,7 @@ export default {
|
|
|
158
164
|
*/
|
|
159
165
|
this.$emit('select-option', { option, index: this.cursorIndex });
|
|
160
166
|
}
|
|
161
|
-
}
|
|
162
|
-
}
|
|
167
|
+
}
|
|
168
|
+
}
|
|
163
169
|
};
|
|
164
170
|
</script>
|
|
@@ -4,8 +4,7 @@
|
|
|
4
4
|
:class="cssClass"
|
|
5
5
|
@focus="onRootFocus"
|
|
6
6
|
tabindex="0"
|
|
7
|
-
:data-popover="popoverTargetId"
|
|
8
|
-
>
|
|
7
|
+
:data-popover="popoverTargetId">
|
|
9
8
|
<div style="flex: 1 0 0">
|
|
10
9
|
<!--
|
|
11
10
|
@slot Custom input slot
|
|
@@ -21,8 +20,7 @@
|
|
|
21
20
|
type="text"
|
|
22
21
|
:value="value"
|
|
23
22
|
v-bind="inputBinds"
|
|
24
|
-
v-on="inputEvents"
|
|
25
|
-
/>
|
|
23
|
+
v-on="inputEvents" />
|
|
26
24
|
</slot>
|
|
27
25
|
</div>
|
|
28
26
|
<!--
|
|
@@ -39,8 +37,7 @@
|
|
|
39
37
|
@select-option="onDatalistSelectOption"
|
|
40
38
|
v-bind="{ size, maxHeight: dropdownMaxHeight, options: suggestedOptions }"
|
|
41
39
|
:cursorIndex.sync="dataListCursorIndex"
|
|
42
|
-
ref="datalist"
|
|
43
|
-
>
|
|
40
|
+
ref="datalist">
|
|
44
41
|
<template #header>
|
|
45
42
|
<!--
|
|
46
43
|
@slot Dropdown header content
|
|
@@ -71,9 +68,31 @@
|
|
|
71
68
|
valueLocal: delimitedValue,
|
|
72
69
|
cursorIndex,
|
|
73
70
|
selectOption,
|
|
74
|
-
setCursorIndex
|
|
75
|
-
}"
|
|
76
|
-
|
|
71
|
+
setCursorIndex
|
|
72
|
+
}"></slot>
|
|
73
|
+
</template>
|
|
74
|
+
<template #option-label="{ option, index, cursorIndex, setCursorIndex }">
|
|
75
|
+
<!--
|
|
76
|
+
@slot Dropdown option label
|
|
77
|
+
@binding {String} option option label
|
|
78
|
+
@binding {Number} optionIndex option index
|
|
79
|
+
@binding {String} value current value
|
|
80
|
+
@binding {String} valueLocal current delimited value
|
|
81
|
+
@binding {Number} cursorIndex current dropdown selection index
|
|
82
|
+
@binding {Function} selectOption function that select's the option
|
|
83
|
+
@binding {Function} setCursorIndex function that sets the cursor index
|
|
84
|
+
-->
|
|
85
|
+
<slot
|
|
86
|
+
name="option-label"
|
|
87
|
+
v-bind="{
|
|
88
|
+
option: option,
|
|
89
|
+
optionIndex: index,
|
|
90
|
+
value,
|
|
91
|
+
valueLocal: delimitedValue,
|
|
92
|
+
cursorIndex,
|
|
93
|
+
selectOption,
|
|
94
|
+
setCursorIndex
|
|
95
|
+
}"></slot>
|
|
77
96
|
</template>
|
|
78
97
|
<template #footer>
|
|
79
98
|
<slot name="dropdown-footer"></slot>
|
|
@@ -84,11 +103,7 @@
|
|
|
84
103
|
@slot Custom clear btn slot
|
|
85
104
|
@binding {Function} clear function that clears the value
|
|
86
105
|
-->
|
|
87
|
-
<slot
|
|
88
|
-
name="clear-btn"
|
|
89
|
-
v-if="useClearBtn && value.length > 0"
|
|
90
|
-
v-bind="{ clear: clearValue }"
|
|
91
|
-
>
|
|
106
|
+
<slot name="clear-btn" v-if="useClearBtn && value.length > 0" v-bind="{ clear: clearValue }">
|
|
92
107
|
<i class="mdi mdi-close cursor-pointer" @click="clearValue"></i>
|
|
93
108
|
</slot>
|
|
94
109
|
</div>
|
|
@@ -97,6 +112,7 @@
|
|
|
97
112
|
.ui-input-autocomplete {
|
|
98
113
|
display: inline-flex;
|
|
99
114
|
align-items: center;
|
|
115
|
+
|
|
100
116
|
&-input {
|
|
101
117
|
border: none;
|
|
102
118
|
line-height: 1.5;
|
|
@@ -126,63 +142,63 @@ export default {
|
|
|
126
142
|
type: Array,
|
|
127
143
|
default() {
|
|
128
144
|
return [];
|
|
129
|
-
}
|
|
145
|
+
}
|
|
130
146
|
},
|
|
131
147
|
/**
|
|
132
148
|
* Function which filters suggestions function(val, options):Promise<Array>
|
|
133
149
|
*/
|
|
134
150
|
filter: {
|
|
135
151
|
type: Function,
|
|
136
|
-
default: null
|
|
152
|
+
default: null
|
|
137
153
|
},
|
|
138
154
|
/**
|
|
139
155
|
* Filter debounce delay in ms
|
|
140
156
|
*/
|
|
141
157
|
filterDebounce: {
|
|
142
158
|
type: Number,
|
|
143
|
-
default: 0
|
|
159
|
+
default: 0
|
|
144
160
|
},
|
|
145
161
|
/**
|
|
146
162
|
* Value delimiter for multiple autocomplete suggestions
|
|
147
163
|
*/
|
|
148
164
|
delimiter: {
|
|
149
165
|
type: String,
|
|
150
|
-
default: ','
|
|
166
|
+
default: ','
|
|
151
167
|
},
|
|
152
168
|
/**
|
|
153
169
|
* Show suggestions on focus event
|
|
154
170
|
*/
|
|
155
171
|
suggestOnFocus: {
|
|
156
172
|
type: Boolean,
|
|
157
|
-
default: true
|
|
173
|
+
default: true
|
|
158
174
|
},
|
|
159
175
|
/**
|
|
160
176
|
* Min length to show suggestions
|
|
161
177
|
*/
|
|
162
178
|
minLength: {
|
|
163
179
|
type: Number,
|
|
164
|
-
default: 0
|
|
180
|
+
default: 0
|
|
165
181
|
},
|
|
166
182
|
/**
|
|
167
183
|
* Defines the dropdown's max-height
|
|
168
184
|
*/
|
|
169
185
|
dropdownMaxHeight: {
|
|
170
|
-
default: ''
|
|
186
|
+
default: ''
|
|
171
187
|
},
|
|
172
188
|
/**
|
|
173
189
|
* Auto width
|
|
174
190
|
*/
|
|
175
191
|
autoWidth: {
|
|
176
192
|
type: Boolean,
|
|
177
|
-
default: true
|
|
193
|
+
default: true
|
|
178
194
|
},
|
|
179
195
|
/**
|
|
180
196
|
* Clear data btn
|
|
181
197
|
*/
|
|
182
198
|
useClearBtn: {
|
|
183
199
|
type: Boolean,
|
|
184
|
-
default: false
|
|
185
|
-
}
|
|
200
|
+
default: false
|
|
201
|
+
}
|
|
186
202
|
},
|
|
187
203
|
data() {
|
|
188
204
|
return {
|
|
@@ -193,16 +209,16 @@ export default {
|
|
|
193
209
|
filterTID: null,
|
|
194
210
|
inputBinds: {
|
|
195
211
|
placeholder: this.placeholder,
|
|
196
|
-
readonly: this.readonly
|
|
212
|
+
readonly: this.readonly
|
|
197
213
|
},
|
|
198
214
|
inputEvents: {
|
|
199
215
|
change: this.onInputChange,
|
|
200
216
|
input: this.onInputInput,
|
|
201
217
|
keydown: this.onInputKeyDown,
|
|
202
218
|
focus: this.onInputFocus,
|
|
203
|
-
blur: this.onInputBlur
|
|
219
|
+
blur: this.onInputBlur
|
|
204
220
|
},
|
|
205
|
-
delimitedValuePrev: null
|
|
221
|
+
delimitedValuePrev: null
|
|
206
222
|
};
|
|
207
223
|
},
|
|
208
224
|
computed: {
|
|
@@ -220,7 +236,7 @@ export default {
|
|
|
220
236
|
return this.value.split(this.delimiter)[this.delimitedIndex];
|
|
221
237
|
}
|
|
222
238
|
return this.value;
|
|
223
|
-
}
|
|
239
|
+
}
|
|
224
240
|
},
|
|
225
241
|
methods: {
|
|
226
242
|
clearValue() {
|
|
@@ -231,8 +247,8 @@ export default {
|
|
|
231
247
|
this.suggestedOptions = [];
|
|
232
248
|
},
|
|
233
249
|
defaultFilter(val, options) {
|
|
234
|
-
return new Promise(resolve => {
|
|
235
|
-
let arr = options.filter(opt => opt.toLowerCase().indexOf(val.toLowerCase()) === 0);
|
|
250
|
+
return new Promise((resolve) => {
|
|
251
|
+
let arr = options.filter((opt) => opt.toLowerCase().indexOf(val.toLowerCase()) === 0);
|
|
236
252
|
resolve(arr);
|
|
237
253
|
});
|
|
238
254
|
},
|
|
@@ -250,7 +266,7 @@ export default {
|
|
|
250
266
|
this.loading = true;
|
|
251
267
|
let h = this.filter ? this.filter : this.defaultFilter;
|
|
252
268
|
h(val, this.options)
|
|
253
|
-
.then(arr => {
|
|
269
|
+
.then((arr) => {
|
|
254
270
|
this.suggestedOptions = arr;
|
|
255
271
|
this.dataListCursorIndex = -1;
|
|
256
272
|
})
|
|
@@ -368,7 +384,7 @@ export default {
|
|
|
368
384
|
},
|
|
369
385
|
onDatalistSelectOption({ option }) {
|
|
370
386
|
this.selectOption(option);
|
|
371
|
-
}
|
|
372
|
-
}
|
|
387
|
+
}
|
|
388
|
+
}
|
|
373
389
|
};
|
|
374
390
|
</script>
|