Improve usability

This commit is contained in:
syuilo 2019-03-03 08:23:06 +09:00
parent 3c77ae7b62
commit 826865869a
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
3 changed files with 25 additions and 2 deletions

View file

@ -227,6 +227,7 @@
"url-loader": "1.1.2", "url-loader": "1.1.2",
"uuid": "3.3.2", "uuid": "3.3.2",
"v-animate-css": "0.0.3", "v-animate-css": "0.0.3",
"v-debounce": "0.1.2",
"video-thumbnail-generator": "1.1.3", "video-thumbnail-generator": "1.1.3",
"vue": "2.6.8", "vue": "2.6.8",
"vue-color": "2.7.0", "vue-color": "2.7.0",

View file

@ -4,7 +4,7 @@
<template #title><fa :icon="faStream"/> {{ $t('logs') }}</template> <template #title><fa :icon="faStream"/> {{ $t('logs') }}</template>
<section class="fit-top"> <section class="fit-top">
<ui-horizon-group inputs> <ui-horizon-group inputs>
<ui-input v-model="domain"> <ui-input v-model="domain" debounce>
<span>{{ $t('domain') }}</span> <span>{{ $t('domain') }}</span>
</ui-input> </ui-input>
<ui-select v-model="level"> <ui-select v-model="level">

View file

@ -9,7 +9,22 @@
<span class="title" ref="title"><slot name="title"></slot></span> <span class="title" ref="title"><slot name="title"></slot></span>
<div class="prefix" ref="prefix"><slot name="prefix"></slot></div> <div class="prefix" ref="prefix"><slot name="prefix"></slot></div>
<template v-if="type != 'file'"> <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" :type="type"
v-model="v" v-model="v"
:disabled="disabled" :disabled="disabled"
@ -51,9 +66,13 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import debounce from 'v-debounce';
const getPasswordStrength = require('syuilo-password-strength'); const getPasswordStrength = require('syuilo-password-strength');
export default Vue.extend({ export default Vue.extend({
directives: {
debounce
},
inject: { inject: {
horizonGrouped: { horizonGrouped: {
default: false default: false
@ -98,6 +117,9 @@ export default Vue.extend({
spellcheck: { spellcheck: {
required: false required: false
}, },
debounce: {
required: false
},
withPasswordMeter: { withPasswordMeter: {
type: Boolean, type: Boolean,
required: false, required: false,