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: [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 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,