From 41eeaf35d9f8087cc9ac4358a6db55e490ab199c Mon Sep 17 00:00:00 2001 From: Henry Jameson <me@hjkos.com> Date: Mon, 10 Jun 2019 18:57:53 +0300 Subject: [PATCH] self-review --- src/components/emoji-input/emoji-input.js | 74 +++++++++++++++++------ 1 file changed, 54 insertions(+), 20 deletions(-) diff --git a/src/components/emoji-input/emoji-input.js b/src/components/emoji-input/emoji-input.js index 9e8605bc..2a32b33b 100644 --- a/src/components/emoji-input/emoji-input.js +++ b/src/components/emoji-input/emoji-input.js @@ -1,31 +1,65 @@ import Completion from '../../services/completion/completion.js' import { take } from 'lodash' +/** + * EmojiInput - augmented inputs for emoji and autocomplete support in inputs + * without having to give up the comfort of <input/> and <textarea/> elements + * + * Intended usage is: + * <emoji-input v-model="something"> + * <input v-model="something"/> + * </emoji-input> + * + * Works only with <input> and <textarea>. Intended to use with only one nested + * input. It will find first input or textarea and work with that, multiple + * nested children not tested. You HAVE TO duplicate v-model for both + * <emoji-input> and <input>/<textarea> otherwise it will not work. + * + * Be prepared for CSS troubles though because it still wraps component in a div + * while TRYING to make it look like nothing happened, but it could break stuff. + */ + const EmojiInput = { - props: [ - 'placeholder', - 'suggest', - 'value', - 'type', - 'classname' - ], + props: { + suggest: { + /** + * suggest: function (input: String) => Suggestion[] + * + * Function that takes input string which takes string (textAtCaret) + * and returns an array of Suggestions + * + * Suggestion is an object containing following properties: + * displayText: string. Main display text, what actual suggestion + * represents (user's screen name/emoji shortcode) + * replacementText: string. Text that should replace the textAtCaret + * detailText: string, optional. Subtitle text, providing additional info + * if present (user's nickname) + * imageUrl: string, optional. Image to display alongside with suggestion, + * currently if no image is provided, replacementText will be used (for + * unicode emojis) + * + * TODO: make it asynchronous when adding proper server-provided user + * suggestions + * + * For commonly used suggestors (emoji, users, both) use suggestor.js + */ + required: true, + type: Function + }, + value: { + /** + * Used for v-model + */ + required: true, + type: String + } + }, data () { return { input: undefined, highlighted: 0, caret: 0, - focused: false, - popupOptions: { - placement: 'bottom-start', - trigger: 'hover', - // See: https://github.com/RobinCK/vue-popper/issues/63 - 'delay-on-mouse-over': 9999999, - 'delay-on-mouse-out': 9999999, - modifiers: { - arrow: { enabled: true }, - offset: { offset: '0, 5px' } - } - } + focused: false } }, computed: { @@ -172,7 +206,7 @@ const EmojiInput = { onInput (e) { this.$emit('input', e.target.value) }, - setCaret ({ target: { selectionStart, value } }) { + setCaret ({ target: { selectionStart } }) { this.caret = selectionStart }, resize () {