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

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

(limited to 'src/client/app')

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,
-- 
cgit v1.2.3-freya