fixed emoji picker

vue/src/components/Modals/EmojiInput.vue

@@ -3,69 +3,52 @@
         <b-form-group
             v-bind:label="label"
             class="mb-3">
-          <twemoji-textarea
-            :ref="'_edit_' + id"
-            :initialContent="value"
-            :emojiData="emojiDataAll"
-            :emojiGroups="emojiGroups"
-            triggerType="click"
-            :recentEmojisFeat="true"
-            recentEmojisStorage="local"
-            @contentChanged="setIcon"
-           />
+
+            <input class="form-control" v-model="new_value">
+
+            <Picker :data="emojiIndex" :ref="'_edit_' + id"
+                    @select="setIcon"/>
+
         </b-form-group>
     </div>
 </template>
 
 <script>
-import {TwemojiTextarea} from '@kevinfaguiar/vue-twemoji-picker';
-// TODO add localization
-import EmojiAllData from '@kevinfaguiar/vue-twemoji-picker/emoji-data/en/emoji-all-groups.json';
-import EmojiGroups from '@kevinfaguiar/vue-twemoji-picker/emoji-data/emoji-groups.json';
 
+import data from "emoji-mart-vue-fast/data/all.json";
+import "emoji-mart-vue-fast/css/emoji-mart.css";
+import {Picker, EmojiIndex} from "emoji-mart-vue-fast";
+let emojiIndex = new EmojiIndex(data);
 
 export default {
-  name: 'EmojiInput',
-  components: {TwemojiTextarea},
-  props: {
-    field: {type: String, default: 'You Forgot To Set Field Name'},
-    label: {type: String, default: ''},
-    value: {type: String, default: ''},
-  },
-  data() {
-    return {
-      new_value: undefined,
-      id: null
+    name: 'EmojiInput',
+    components: {Picker},
+    props: {
+        field: {type: String, default: 'You Forgot To Set Field Name'},
+        label: {type: String, default: ''},
+        value: {type: String, default: ''},
+    },
+    data() {
+        return {
+            new_value: undefined,
+            id: null,
+            emojiIndex: emojiIndex,
+            emojisOutput: ""
+        }
+    },
+    watch: {
+        'new_value': function () {
+            this.$root.$emit('change', this.field, this.new_value ?? null)
+        },
+    },
+    mounted() {
+        this.id = this._uid
+    },
+    methods: {
+        setIcon: function (icon) {
+            console.log(icon)
+            this.new_value = icon.native
+        },
     }
-  },
-  computed: {
-    // modelName() {
-    //   return this?.model?.name  ?? this.$t('Search')
-    // },
-    emojiDataAll() {
-      return EmojiAllData;
-    },
-    emojiGroups() {
-      return EmojiGroups;
-    }
-  },
-  watch: {
-    'new_value': function () {
-      this.$root.$emit('change', this.field, this.new_value ?? null)
-    },
-  },
-  mounted() {
-    this.id = this._uid
-  },
-  methods: {
-    prepareEmoji: function() {
-      this.$refs['_edit_' + this.id].addText(this.this_item.icon || '');
-      this.$refs['_edit_' + this.id].blur()
-      document.getElementById('btn-emoji-default').disabled = true;
-    },
-    setIcon: function(icon) {
-      this.new_value = icon
-    },
-  }
 }
 </script>