therwi/sunkkoma
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

standartized autocomplete panel suggesions format, fixed some bugs

Browse source
This commit is contained in:
Henry Jameson 2019-06-08 16:23:58 +03:00
parent ca3140fd3e
commit 8872b4802e
7 changed files with 129 additions and 112 deletions
Download patch file Download diff file Expand all files Collapse all files

64
src/components/emoji-input/emoji-input.vue
View file

@ -1,38 +1,25 @@
<template>
<div class="emoji-input">
<slot
:class="classname"
:value="value"
:placeholder="placeholder"
@input="onInput"
@click="setCaret"
@keyup="setCaret"
@keydown="onKeydown"
@keydown.down="cycleForward"
@keydown.up="cycleBackward"
@keydown.shift.tab="cycleBackward"
@keydown.tab="cycleForward"
@keydown.enter="replaceEmoji"
>
</slot>
<div class="autocomplete-panel" v-if="suggestions">
<div class="autocomplete-panel-body">
<div
v-for="(suggestion, index) in suggestions"
:key="index"
@click="replace(suggestion.replacement)"
class="autocomplete-item"
:class="{ highlighted: suggestion.highlighted }"
<div class="emoji-input">
<slot></slot>
<div ref="panel" class="autocomplete-panel" :class="{ hide: suggestions}">
<div class="autocomplete-panel-body">
<div
v-for="(suggestion, index) in suggestions"
:key="index"
@click.stop.prevent="replace(suggestion.replacement)"
class="autocomplete-item"
:class="{ highlighted: suggestion.highlighted }"
>
<span v-if="suggestion.img">
<img :src="suggestion.img" />
</span>
<span v-else>{{suggestion.replacement}}</span>
<span>{{suggestion.shortcode}}</span>
<span v-if="suggestion.img">
<img :src="suggestion.img" />
</span>
<span v-else>{{suggestion.replacement}}</span>
<span>{{suggestion.displayText}}</span>
<span>{{suggestion.detailText}}</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script src="./emoji-input.js"></script>
@ -41,8 +28,21 @@
@import '../../_variables.scss';
.emoji-input {
.form-control {
width: 100%;
display: flex;
flex-direction: column;
&.hide {
display: none
}
.autocomplete-panel {
position: absolute;
z-index: 9;
margin-top: 2px;
}
input, textarea {
flex: 1;
}
}
</style>