moved keyword Vue to generic components

vue/src/components/Modals/EmojiInput.vue

@@ -0,0 +1,71 @@
+<template>
+    <div>
+        <b-form-group 
+            v-bind:label="label"
+            class="mb-3">
+          <twemoji-textarea 
+            :ref="'_edit_' + id"
+            :initialContent="value"
+            :emojiData="emojiDataAll" 
+            :emojiGroups="emojiGroups"
+            triggerType="hover"
+            recentEmojisFeat="true"
+            recentEmojisStorage="local"
+            @contentChanged="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';
+
+
+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
+    }
+  },
+  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>

vue/src/components/Modals/GenericModalForm.vue

@@ -12,7 +12,6 @@
             :model="listModel(f.list)"
             :sticky_options="f.sticky_options || undefined"
             @change="storeValue"/> <!-- TODO add ability to create new items associated with lookup -->
-          <!-- TODO: add emoji field -->
           <!-- TODO: add multi-selection input list -->
           <checkbox-input v-if="f.type=='checkbox'"
             :label="f.label"
@@ -23,6 +22,11 @@
             :value="f.value"
             :field="f.field"
             :placeholder="f.placeholder"/>
+          <emoji-input v-if="f.type=='emoji'"
+            :label="f.label"
+            :value="f.value"
+            :field="f.field"
+            @change="storeValue"/>
         </div>
         
         <template  v-slot:modal-footer>
@@ -43,10 +47,11 @@ import {Models} from "@/utils/models";
 import CheckboxInput from "@/components/Modals/CheckboxInput";
 import LookupInput from "@/components/Modals/LookupInput";
 import TextInput from "@/components/Modals/TextInput";
+import EmojiInput from "@/components/Modals/EmojiInput";
 
 export default {
   name: 'GenericModalForm',
-  components: {CheckboxInput, LookupInput, TextInput},
+  components: {CheckboxInput, LookupInput, TextInput, EmojiInput},
   props: {
     model: {required: true, type: Object, default: function() {}},
     action: {required: true, type: Object, default: function() {}},

vue/src/components/Modals/LookupInput.vue

@@ -47,10 +47,5 @@ export default {
       this.$root.$emit('change', this.field, this.new_value?.id ?? null)
     },
   },
-  methods: {
-      Button: function(e) {
-        this.$bvModal.show('modal')
-      }
-  }
 }
 </script>