|
|
|
@ -3,6 +3,10 @@ import { Icon } from '@iconify/vue'
|
|
|
|
|
import InfiniteLoading from 'v3-infinite-loading' |
|
|
|
|
import { emojiIcons } from '#imports' |
|
|
|
|
|
|
|
|
|
const props = defineProps<{ |
|
|
|
|
showReset?: boolean |
|
|
|
|
}>() |
|
|
|
|
|
|
|
|
|
const emit = defineEmits(['selectIcon']) |
|
|
|
|
let search = $ref('') |
|
|
|
|
|
|
|
|
@ -23,30 +27,39 @@ const load = () => {
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const selectIcon = (icon: string) => { |
|
|
|
|
const selectIcon = (icon?: string) => { |
|
|
|
|
search = '' |
|
|
|
|
emit('selectIcon', `emojione:${icon}`) |
|
|
|
|
emit('selectIcon', icon && `emojione:${icon}`) |
|
|
|
|
} |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<template> |
|
|
|
|
<div class="p-1 w-[280px] h-[280px] flex flex-col gap-1 justify-start nc-emoji" data-testid="nc-emoji-container"> |
|
|
|
|
<div @click.stop> |
|
|
|
|
<input |
|
|
|
|
v-model="search" |
|
|
|
|
data-testid="nc-emoji-filter" |
|
|
|
|
class="p-1 text-xs border-1 w-full overflow-y-auto" |
|
|
|
|
placeholder="Search" |
|
|
|
|
@input="toIndex = 60" |
|
|
|
|
/> |
|
|
|
|
<div> |
|
|
|
|
<div class="p-1 w-[280px] h-[280px] flex flex-col gap-1 justify-start nc-emoji" data-testid="nc-emoji-container"> |
|
|
|
|
<div @click.stop> |
|
|
|
|
<input |
|
|
|
|
v-model="search" |
|
|
|
|
data-testid="nc-emoji-filter" |
|
|
|
|
class="p-1 text-xs border-1 w-full overflow-y-auto" |
|
|
|
|
placeholder="Search" |
|
|
|
|
@input="toIndex = 60" |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
<div class="flex gap-1 flex-wrap w-full flex-shrink overflow-y-auto scrollbar-thin-dull"> |
|
|
|
|
<div v-for="icon of filteredIcons" :key="icon" @click="selectIcon(icon)"> |
|
|
|
|
<span class="cursor-pointer nc-emoji-item"> |
|
|
|
|
<Icon class="text-xl iconify" :icon="`emojione:${icon}`"></Icon> |
|
|
|
|
</span> |
|
|
|
|
</div> |
|
|
|
|
<InfiniteLoading @infinite="load"><span /></InfiniteLoading> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="flex gap-1 flex-wrap w-full flex-shrink overflow-y-auto scrollbar-thin-dull"> |
|
|
|
|
<div v-for="icon of filteredIcons" :key="icon" @click="selectIcon(icon)"> |
|
|
|
|
<span class="cursor-pointer nc-emoji-item"> |
|
|
|
|
<Icon class="text-xl iconify" :icon="`emojione:${icon}`"></Icon> |
|
|
|
|
</span> |
|
|
|
|
<div v-if="props.showReset" class="m-1"> |
|
|
|
|
<a-divider class="!my-2 w-full" /> |
|
|
|
|
<div class="p-1 mt-1 cursor-pointer text-xs inline-block border-gray-200 border-1 rounded" @click="selectIcon()"> |
|
|
|
|
<PhXCircleLight class="text-sm" /> |
|
|
|
|
Reset Icon |
|
|
|
|
</div> |
|
|
|
|
<InfiniteLoading @infinite="load"><span /></InfiniteLoading> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|