Improve usability

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",

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">

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,