Madeorsk/rudeshark.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

focus trap emoji picker (also fixes closing w/ esc)

Browse Source
This commit is contained in:
Freeplay 2023-02-12 22:19:40 -05:00
parent aac8246e10
commit b51d24d31a
1 changed files with 67 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/client/src/components/MkEmojiPicker.vue
View File

@ -1,4 +1,5 @@
<template>
<FocusTrap v-bind:active="isActive">
<div class="omfetrab" :class="['s' + size, 'w' + width, 'h' + height, { asDrawer }]" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : undefined }">
<input ref="search" v-model.trim="q" class="search" data-prevent-emoji-insert :class="{ filled: q != null && q != '' }" :placeholder="i18n.ts.search" type="search" @paste.stop="paste" @keyup.enter="done()">
<div ref="emojis" class="emojis">
@ -75,6 +76,7 @@
<button class="_button tab" :class="{ active: tab === 'tags' }" @click="tab = 'tags'"><i class="ph-hash-bold ph-lg ph-fw ph-lg"></i></button>
</div>
</div>
</FocusTrap>
</template>
<script lang="ts" setup>
@ -90,6 +92,7 @@ import { deviceKind } from '@/scripts/device-kind';
import { emojiCategories, instance } from '@/instance';
import { i18n } from '@/i18n';
import { defaultStore } from '@/store';
import { FocusTrap } from 'focus-trap-vue';
const props = withDefaults(defineProps<{
showPinned?: boolean;