Merge pull request #4563 from nextcloud-libraries/chore/2154/emoji-pi…

…cker

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"
@@ -169,11 +167,13 @@ This component allows the user to pick an emoji.
 				<Emoji class="emoji-selected"
 					:data="emojiIndex"
 					:emoji="selectedEmoji"
+					:native="true"
 					:size="32"
 					@click="unselect" />
 				<Emoji class="emoji-delete"
 					:data="emojiIndex"
 					emoji=":x:"
+					:native="true"
 					:size="10"
 					@click="unselect" />
 			</template>
@@ -186,7 +186,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 +393,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 {
@@ -488,12 +489,7 @@ export default {
 }
 
 .search {
-	padding: 0 8px 4px 8px;
-	.input-field__label {
-		// Match styles in emoji-mart-vue-fast
-		padding: 5px 4px;
-		font-weight: 500;
-	}
+	padding: 4px 8px;
 }
 
 </style>

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',
 						],
 					},
 				// 	{