From 53860c501016c0be3e2f7c0ca8e83131d8b64ca8 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 3 Mar 2019 08:23:06 +0900
Subject: [PATCH] Improve usability

---
 package.json                                  |  1 +
 src/client/app/admin/views/logs.vue           |  2 +-
 .../app/common/views/components/ui/input.vue  | 24 ++++++++++++++++++-
 3 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 5e96a4354..dc946cd45 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 6d8a08177..08bf18112 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 eb49c502d..ae9ce249d 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,