mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
48 lines
1.5 KiB
48 lines
1.5 KiB
<script lang="ts" setup> |
|
import { Icon } from '@iconify/vue' |
|
import InfiniteLoading from 'v3-infinite-loading' |
|
import { emojiIcons } from '#imports' |
|
|
|
const emit = defineEmits(['selectIcon']) |
|
let search = $ref('') |
|
|
|
let toIndex = $ref(60) |
|
|
|
const filteredIcons = computed(() => { |
|
return emojiIcons.filter((icon) => !search || icon.toLowerCase().includes(search.toLowerCase())).slice(0, toIndex) |
|
}) |
|
|
|
const load = () => { |
|
toIndex += Math.min(filteredIcons.value.length, toIndex + 60) |
|
if (toIndex > filteredIcons.value.length) { |
|
toIndex = filteredIcons.value.length |
|
} |
|
} |
|
|
|
const selectIcon = (icon: string) => { |
|
search = '' |
|
emit('selectIcon', `emojione:${icon}`) |
|
} |
|
</script> |
|
|
|
<template> |
|
<div class="p-1 w-[280px] h-[280px] flex flex-col gap-1 justify-start"> |
|
<div @click.stop> |
|
<input v-model="search" 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> |
|
</template> |
|
|
|
<style scoped> |
|
.nc-emoji-item { |
|
@apply hover:(bg-primary bg-opacity-10) active:(bg-primary !bg-opacity-20) rounded-md w-[38px] h-[38px] block flex items-center justify-center; |
|
} |
|
</style>
|
|
|