fix(nc-gui): runtime directive warnings in EmojiPicker.vue

packages/nc-gui/components/general/EmojiPicker.vue

@@ -2,7 +2,6 @@
 import data from 'emoji-mart-vue-fast/data/apple.json'
 import 'emoji-mart-vue-fast/css/emoji-mart.css'
 import { Icon } from '@iconify/vue'
-
 import { EmojiIndex, Picker } from 'emoji-mart-vue-fast/src'
 
 const props = defineProps<{
@@ -21,6 +20,7 @@ const clearable = computed(() => {
 })
 
 const isOpen = ref(false)
+
 const emojiIndex = new EmojiIndex(data, {
   emojisToShowFilter: (emoji: any) => {
     if (Number(emoji.added_in) >= 14) {
@@ -78,60 +78,62 @@ const showClearButton = computed(() => {
 </script>
 
 <template>
-  <a-dropdown v-model:visible="isOpen" :trigger="['click']" :disabled="readonly">
-    <div
-      class="flex flex-row justify-center items-center select-none rounded-md nc-emoji"
-      :class="{
-        'hover:bg-gray-500 hover:bg-opacity-15 cursor-pointer': !readonly,
-        'bg-gray-500 bg-opacity-15': isOpen,
-        'h-6 w-6 text-lg': size === 'small',
-        'h-8 w-8 text-xl': size === 'medium',
-        'h-10 w-10 text-2xl': size === 'large',
-        'h-14 w-16 text-5xl': size === 'xlarge',
-      }"
-      @click="onClick"
-    >
-      <template v-if="!emojiRef">
-        <slot name="default" />
-      </template>
-      <template v-else-if="isUnicodeEmoji">
-        {{ emojiRef }}
-      </template>
-      <template v-else>
-        <Icon :data-testid="`nc-icon-${emojiRef}`" class="text-lg" :icon="emojiRef"></Icon>
-      </template>
-    </div>
-    <template #overlay>
+  <div>
+    <a-dropdown v-model:visible="isOpen" :trigger="['click']" :disabled="readonly">
       <div
-        class="relative"
+        class="flex flex-row justify-center items-center select-none rounded-md nc-emoji"
         :class="{
-          clearable: showClearButton,
+          'hover:bg-gray-500 hover:bg-opacity-15 cursor-pointer': !readonly,
+          'bg-gray-500 bg-opacity-15': isOpen,
+          'h-6 w-6 text-lg': size === 'small',
+          'h-8 w-8 text-xl': size === 'medium',
+          'h-10 w-10 text-2xl': size === 'large',
+          'h-14 w-16 text-5xl': size === 'xlarge',
         }"
+        @click="onClick"
       >
-        <div v-if="!debounceIsOpen" class="h-105 w-90"></div>
-        <Picker
-          v-else
-          :data="emojiIndex"
-          :native="true"
-          :show-preview="false"
-          color="#40444D"
-          :auto-focus="true"
-          @select="selectEmoji"
-          @click.stop="() => {}"
+        <template v-if="!emojiRef">
+          <slot name="default" />
+        </template>
+        <template v-else-if="isUnicodeEmoji">
+          {{ emojiRef }}
+        </template>
+        <template v-else>
+          <Icon :data-testid="`nc-icon-${emojiRef}`" class="text-lg" :icon="emojiRef"></Icon>
+        </template>
+      </div>
+      <template #overlay>
+        <div
+          class="relative"
+          :class="{
+            clearable: showClearButton,
+          }"
         >
-        </Picker>
-        <div v-if="debounceIsOpen && showClearButton" class="absolute top-10 right-1.5">
-          <div
-            role="button"
-            class="flex flex-row items-center bg-white border-1 border-gray-100 py-0.5 px-2.5 rounded hover:bg-gray-100 cursor-pointer"
-            @click="clearEmoji"
+          <div v-if="!debounceIsOpen" class="h-105 w-90"></div>
+          <Picker
+            v-else
+            :data="emojiIndex"
+            :native="true"
+            :show-preview="false"
+            color="#40444D"
+            :auto-focus="true"
+            @select="selectEmoji"
+            @click.stop="() => {}"
           >
-            Remove
+          </Picker>
+          <div v-if="debounceIsOpen && showClearButton" class="absolute top-10 right-1.5">
+            <div
+              role="button"
+              class="flex flex-row items-center bg-white border-1 border-gray-100 py-0.5 px-2.5 rounded hover:bg-gray-100 cursor-pointer"
+              @click="clearEmoji"
+            >
+              Remove
+            </div>
           </div>
         </div>
-      </div>
-    </template>
-  </a-dropdown>
+      </template>
+    </a-dropdown>
+  </div>
 </template>
 
 <style lang="scss">