diff --git a/package.json b/package.json index 5e96a43548..dc946cd45b 100644 --- a/package.json +++ b/package.json @@ -227,6 +227,7 @@ "url-loader": "1.1.2", "uuid": "3.3.2", "v-animate-css": "0.0.3", + "v-debounce": "0.1.2", "video-thumbnail-generator": "1.1.3", "vue": "2.6.8", "vue-color": "2.7.0", diff --git a/src/client/app/admin/views/logs.vue b/src/client/app/admin/views/logs.vue index 6d8a081774..08bf181129 100644 --- a/src/client/app/admin/views/logs.vue +++ b/src/client/app/admin/views/logs.vue @@ -4,7 +4,7 @@ <template #title><fa :icon="faStream"/> {{ $t('logs') }}</template> <section class="fit-top"> <ui-horizon-group inputs> - <ui-input v-model="domain"> + <ui-input v-model="domain" debounce> <span>{{ $t('domain') }}</span> </ui-input> <ui-select v-model="level"> diff --git a/src/client/app/common/views/components/ui/input.vue b/src/client/app/common/views/components/ui/input.vue index eb49c502d5..ae9ce249de 100644 --- a/src/client/app/common/views/components/ui/input.vue +++ b/src/client/app/common/views/components/ui/input.vue @@ -9,7 +9,22 @@ <span class="title" ref="title"><slot name="title"></slot></span> <div class="prefix" ref="prefix"><slot name="prefix"></slot></div> <template v-if="type != 'file'"> - <input ref="input" + <input v-if="debounce" ref="input" + v-debounce="500" + :type="type" + v-model.lazy="v" + :disabled="disabled" + :required="required" + :readonly="readonly" + :placeholder="placeholder" + :pattern="pattern" + :autocomplete="autocomplete" + :spellcheck="spellcheck" + @focus="focused = true" + @blur="focused = false" + @keydown="$emit('keydown', $event)" + > + <input v-else ref="input" :type="type" v-model="v" :disabled="disabled" @@ -51,9 +66,13 @@ <script lang="ts"> import Vue from 'vue'; +import debounce from 'v-debounce'; const getPasswordStrength = require('syuilo-password-strength'); export default Vue.extend({ + directives: { + debounce + }, inject: { horizonGrouped: { default: false @@ -98,6 +117,9 @@ export default Vue.extend({ spellcheck: { required: false }, + debounce: { + required: false + }, withPasswordMeter: { type: Boolean, required: false,