From 96f31716f94d0e7691b85ca90e7ea977ca3adb4d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 7 Jun 2019 00:17:49 +0300
Subject: slot-based emoji input/autocomplete component

---
 src/components/user_settings/user_settings.js  | 16 ++++++++++++++++
 src/components/user_settings/user_settings.vue | 24 +++++++++++++-----------
 2 files changed, 29 insertions(+), 11 deletions(-)

(limited to 'src/components/user_settings')

diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index ae36e5e8..ca7c23ec 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -12,6 +12,7 @@ import MuteCard from '../mute_card/mute_card.vue'
 import SelectableList from '../selectable_list/selectable_list.vue'
 import ProgressButton from '../progress_button/progress_button.vue'
 import EmojiInput from '../emoji-input/emoji-input.vue'
+import suggestor from '../emoji-input/suggestor.js'
 import Autosuggest from '../autosuggest/autosuggest.vue'
 import Importer from '../importer/importer.vue'
 import Exporter from '../exporter/exporter.vue'
@@ -81,6 +82,21 @@ const UserSettings = {
     user () {
       return this.$store.state.users.currentUser
     },
+    emojiUserSuggestor () {
+      return suggestor({
+        emoji: [
+          ...this.$store.state.instance.emoji,
+          ...this.$store.state.instance.customEmoji
+        ],
+        users: this.$store.state.users.users
+      })
+    },
+    emojiSuggestor () {
+      suggestor({ emoji: [
+        ...this.$store.state.instance.emoji,
+        ...this.$store.state.instance.customEmoji
+      ]})
+    },
     pleromaBackend () {
       return this.$store.state.instance.pleromaBackend
     },
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index 20b10979..d3d333bd 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -22,18 +22,20 @@
           <div class="setting-item" >
             <h2>{{$t('settings.name_bio')}}</h2>
             <p>{{$t('settings.name')}}</p>
-            <EmojiInput
-              type="text"
-              v-model="newName"
-              id="username"
-              classname="name-changer"
-            />
+            <emoji-input :suggest="emojiSuggestor" v-model="newName">
+              <input
+                v-model="newName"
+                id="username"
+                classname="name-changer"
+              />
+            </emoji-input>
             <p>{{$t('settings.bio')}}</p>
-            <EmojiInput
-              type="textarea"
-              v-model="newBio"
-              classname="bio"
-            />
+            <emoji-input :suggest="emojiUserSuggestor" v-model="newBio">
+              <textarea
+                v-model="newBio"
+                classname="bio"
+                />
+            </emoji-input>
             <p>
               <input type="checkbox" v-model="newLocked" id="account-locked">
               <label for="account-locked">{{$t('settings.lock_account_description')}}</label>
-- 
cgit v1.2.3-70-g09d2