goodteditor-ui 1.0.80 → 1.0.81
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
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
@focus="onRootFocus"
|
|
6
6
|
tabindex="0"
|
|
7
7
|
:data-popover="popoverTargetId">
|
|
8
|
-
<div style="
|
|
9
|
-
<!--
|
|
8
|
+
<div class="ui-input-autocomplete-input-wrapper text-truncate" :style="{ '--use-clear-btn': useClearBtn ? '1rem' : '0' }">
|
|
9
|
+
<!--
|
|
10
10
|
@slot Custom input slot
|
|
11
11
|
@binding {String} id input id attribute value
|
|
12
12
|
@binding {String} value input value
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
v-on="inputEvents" />
|
|
24
24
|
</slot>
|
|
25
25
|
</div>
|
|
26
|
-
<!--
|
|
26
|
+
<!--
|
|
27
27
|
@slot Loading custom content
|
|
28
28
|
-->
|
|
29
29
|
<slot name="loading" v-if="loading">
|
|
@@ -39,23 +39,23 @@
|
|
|
39
39
|
:cursorIndex.sync="dataListCursorIndex"
|
|
40
40
|
ref="datalist">
|
|
41
41
|
<template #header>
|
|
42
|
-
<!--
|
|
42
|
+
<!--
|
|
43
43
|
@slot Dropdown header content
|
|
44
44
|
-->
|
|
45
45
|
<slot name="dropdown-header"></slot>
|
|
46
|
-
<!--
|
|
46
|
+
<!--
|
|
47
47
|
@slot No results content
|
|
48
48
|
-->
|
|
49
49
|
<slot name="noresults" v-if="!loading && !suggestedOptions.length"></slot>
|
|
50
50
|
</template>
|
|
51
51
|
<template #option="{ option, index, cursorIndex, setCursorIndex }">
|
|
52
|
-
<!--
|
|
52
|
+
<!--
|
|
53
53
|
@slot Dropdown option
|
|
54
54
|
@binding {String} option option label
|
|
55
55
|
@binding {Number} optionIndex option index
|
|
56
56
|
@binding {String} value current value
|
|
57
57
|
@binding {String} valueLocal current delimited value
|
|
58
|
-
@binding {Number} cursorIndex current dropdown selection index
|
|
58
|
+
@binding {Number} cursorIndex current dropdown selection index
|
|
59
59
|
@binding {Function} selectOption function that select's the option
|
|
60
60
|
@binding {Function} setCursorIndex function that sets the cursor index
|
|
61
61
|
-->
|
|
@@ -99,12 +99,12 @@
|
|
|
99
99
|
</template>
|
|
100
100
|
</ui-datalist>
|
|
101
101
|
</ui-popover>
|
|
102
|
-
<!--
|
|
102
|
+
<!--
|
|
103
103
|
@slot Custom clear btn slot
|
|
104
104
|
@binding {Function} clear function that clears the value
|
|
105
105
|
-->
|
|
106
106
|
<slot name="clear-btn" v-if="useClearBtn && value.length > 0" v-bind="{ clear: clearValue }">
|
|
107
|
-
<i class="mdi mdi-close cursor-pointer" @click="clearValue"></i>
|
|
107
|
+
<i class="mdi mdi-close cursor-pointer mar-left-2" @click="clearValue"></i>
|
|
108
108
|
</slot>
|
|
109
109
|
</div>
|
|
110
110
|
</template>
|
|
@@ -112,6 +112,7 @@
|
|
|
112
112
|
.ui-input-autocomplete {
|
|
113
113
|
display: inline-flex;
|
|
114
114
|
align-items: center;
|
|
115
|
+
--use-clear-btn: 0;
|
|
115
116
|
|
|
116
117
|
&-input {
|
|
117
118
|
border: none;
|
|
@@ -122,6 +123,11 @@
|
|
|
122
123
|
background: transparent;
|
|
123
124
|
outline: none;
|
|
124
125
|
}
|
|
126
|
+
|
|
127
|
+
&-input-wrapper {
|
|
128
|
+
flex: 1 0 0;
|
|
129
|
+
max-width: calc(100% - var(--use-clear-btn));
|
|
130
|
+
}
|
|
125
131
|
}
|
|
126
132
|
</style>
|
|
127
133
|
<script>
|
|
@@ -249,10 +255,14 @@ export default {
|
|
|
249
255
|
methods: {
|
|
250
256
|
clearValue() {
|
|
251
257
|
this.$emit('input', '');
|
|
258
|
+
this.$emit('change', '');
|
|
252
259
|
this.caretIndex = 0;
|
|
253
260
|
this.delimitedValuePrev = null;
|
|
254
261
|
this.filterTID = null;
|
|
255
|
-
this.suggestedOptions =
|
|
262
|
+
this.suggestedOptions = this.options;
|
|
263
|
+
if (this.suggestedOptions.length > 0) {
|
|
264
|
+
this.popoverShow = true;
|
|
265
|
+
}
|
|
256
266
|
},
|
|
257
267
|
defaultFilter(val, options) {
|
|
258
268
|
return new Promise((resolve) => {
|
|
@@ -320,12 +330,14 @@ export default {
|
|
|
320
330
|
input && input.focus();
|
|
321
331
|
},
|
|
322
332
|
onInputBlur(e) {
|
|
323
|
-
this.
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
333
|
+
if (this.popoverShow === false || this.value === '') {
|
|
334
|
+
this.rootHasFocus = false;
|
|
335
|
+
/**
|
|
336
|
+
* Blur event reemit
|
|
337
|
+
* @property {Event} event
|
|
338
|
+
*/
|
|
339
|
+
this.$emit('blur', e);
|
|
340
|
+
}
|
|
329
341
|
},
|
|
330
342
|
onInputFocus(e) {
|
|
331
343
|
this.rootHasFocus = true;
|