chore(vue3): Migrate NcEmojiPicker

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>

jest.config.js

@@ -28,6 +28,7 @@ const ignorePatterns = [
  'comma-separated-tokens',
  'decode-named-character-reference',
  'devlop', // ESM dependency of unified
+ 'emoji-mart-vue-fast/src',
  'escape-string-regexp',
  'hast-*',
  'is-*',

src/components/NcEmojiPicker/NcEmojiPicker.vue

@@ -124,10 +124,8 @@ This component allows the user to pick an emoji.
 </docs>
 
 <template>
- <NcPopover :shown.sync="open"
+ <NcPopover v-model:shown="open"
  :container="container"
- v-bind="$attrs"
- v-on="$listeners"
  @after-show="afterShow"
  @after-hide="afterHide">
  <template #trigger>
@@ -149,8 +147,8 @@ This component allows the user to pick an emoji.
  @select="select">
  <template #searchTemplate="slotProps">
  <NcTextField ref="search"
+ v-model:value="search"
  class="search"
- :value.sync="search"
  :label="t('Search')"
  :label-visible="true"
  :placeholder="i18n.search"
@@ -186,7 +184,7 @@ import NcPopover from '../NcPopover/index.js'
 import NcTextField from '../NcTextField/index.js'
 import { t } from '../../l10n.js'
 
-import { Picker, Emoji, EmojiIndex } from 'emoji-mart-vue-fast'
+import { Picker, Emoji, EmojiIndex } from 'emoji-mart-vue-fast/src'
 import data from 'emoji-mart-vue-fast/data/all.json'
 
 // Shared emoji index for all NcEmojiPicker instances
@@ -393,6 +391,7 @@ export default {
  background-color: var(--color-main-background) !important;
  border: 0;
  color: var(--color-main-text) !important;
+ display: flex !important;
 
  // default style reset
  button {

src/components/index.js

@@ -66,8 +66,7 @@ export { default as NcDateTimePickerNative } from './NcDateTimePickerNative/inde
 // Not exported on purpose
 // export { default as NcEllipsisedOption } from './NcEllipsisedOption/index.js'
 
-// Not yet adjusted for vue3
-// export { default as NcEmojiPicker } from './NcEmojiPicker/index.js'
+export { default as NcEmojiPicker } from './NcEmojiPicker/index.js'
 // export { default as NcEmptyContent } from './NcEmptyContent/index.js'
 export { default as NcGuestContent } from './NcGuestContent/index.js'
 // export { default as NcHeaderMenu } from './NcHeaderMenu/index.js'

styleguide.config.js

@@ -201,6 +201,7 @@ module.exports = async () => {
  components: [
  //'src/components/Nc*Picker*/*.vue',
  'src/components/NcDateTimePickerNative*/*.vue',
+ 'src/components/NcEmojiPicker/*.vue',
  ],
  },
  // {