Browse Source

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

pull/6954/head
աɨռɢӄաօռɢ 1 year ago
parent
commit
5f837e4b33
  1. 96
      packages/nc-gui/components/general/EmojiPicker.vue

96
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">

Loading…
Cancel
Save