diff options
| author | Xiaofeng An <futureweb2020@yandex.com> | 2019-02-08 11:01:12 -0500 |
|---|---|---|
| committer | Xiaofeng An <futureweb2020@yandex.com> | 2019-02-08 11:13:35 -0500 |
| commit | 128dcc637edb5550168423941171f5b567365b7c (patch) | |
| tree | 7bf85835d5c5429e720641db5bb032ca0895bffe /src | |
| parent | 2d91c9d949e5a696585de566f2a5498bdd3c9ffa (diff) | |
make name field auto-complete
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/autocomplete_input/autocomplete_input.vue | 19 | ||||
| -rw-r--r-- | src/components/user_settings/user_settings.vue | 4 |
2 files changed, 21 insertions, 2 deletions
diff --git a/src/components/autocomplete_input/autocomplete_input.vue b/src/components/autocomplete_input/autocomplete_input.vue index 1c049891..d3bda597 100644 --- a/src/components/autocomplete_input/autocomplete_input.vue +++ b/src/components/autocomplete_input/autocomplete_input.vue @@ -1,6 +1,7 @@ <template> <div> <textarea + v-if="multiline" ref="textarea" :value="text" @input="text = $event.target.value, $emit('input', $event.target.value), autoResize && resize($event)" @@ -17,6 +18,24 @@ @keydown.meta.enter="keydownMetaEnter && keydownMetaEnter()" @keyup.ctrl.enter="keyupCtrlEnter && keyupCtrlEnter()"> </textarea> + <input + v-else + ref="textarea" + :value="text" + :id="id" + @input="text = $event.target.value, $emit('input', $event.target.value), autoResize && resize($event)" + @click="setCaret" + @keyup="setCaret" :placeholder="placeholder" rows="1" :class="classObj" + @keydown.down="cycleForward" + @keydown.up="cycleBackward" + @keydown.shift.tab="cycleBackward" + @keydown.tab="cycleForward" + @keydown.enter="replaceCandidate" + @drop="drop && drop()" + @dragover.prevent="dragoverPrevent && dragoverPrevent()" + @paste="paste && paste()" + @keydown.meta.enter="keydownMetaEnter && keydownMetaEnter()" + @keyup.ctrl.enter="keyupCtrlEnter && keyupCtrlEnter()"/> <div style="position:relative;" v-if="candidates"> <div class="autocomplete-panel"> <div v-for="candidate in candidates" @click="replace(candidate.utf || (candidate.screen_name + ' '))"> diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue index c5ee672f..7f81af1b 100644 --- a/src/components/user_settings/user_settings.vue +++ b/src/components/user_settings/user_settings.vue @@ -9,9 +9,9 @@ <div class="setting-item" > <h2>{{$t('settings.name_bio')}}</h2> <p>{{$t('settings.name')}}</p> - <input class='name-changer' id='username' v-model="newName"></input> + <auto-complete-input :classObj="{ 'name-changer': true }" :id="'username'" v-model="newName"/> <p>{{$t('settings.bio')}}</p> - <auto-complete-input :classObj="{ bio: true }" v-model="newBio"/> + <auto-complete-input :classObj="{ bio: true }" v-model="newBio" :multiline="true"/> <p> <input type="checkbox" v-model="newLocked" id="account-locked"> <label for="account-locked">{{$t('settings.lock_account_description')}}</label> |