From 757427b4e920f826969e82f4dc7aa5569c4298fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimund=20Schl=C3=BC=C3=9Fler?=
 <raimund.schluessler@mailbox.org>
Date: Sun, 24 Sep 2023 22:21:46 +0200
Subject: [PATCH 1/3] chore(vue3): Migrate NcEmojiPicker
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>
---
 jest.config.js                                 | 1 +
 src/components/NcEmojiPicker/NcEmojiPicker.vue | 9 ++++-----
 src/components/index.js                        | 3 +--
 styleguide.config.js                           | 1 +
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/jest.config.js b/jest.config.js
index 63fa487509..758a168348 100644
--- a/jest.config.js
+++ b/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-*',
diff --git a/src/components/NcEmojiPicker/NcEmojiPicker.vue b/src/components/NcEmojiPicker/NcEmojiPicker.vue
index bcc8034571..52c623f48c 100644
--- a/src/components/NcEmojiPicker/NcEmojiPicker.vue
+++ b/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 {
diff --git a/src/components/index.js b/src/components/index.js
index ec4c44fc73..af4a036107 100644
--- a/src/components/index.js
+++ b/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'
diff --git a/styleguide.config.js b/styleguide.config.js
index c2ca8ef881..9149d0f912 100644
--- a/styleguide.config.js
+++ b/styleguide.config.js
@@ -201,6 +201,7 @@ module.exports = async () => {
 						components: [
 							//'src/components/Nc*Picker*/*.vue',
 							'src/components/NcDateTimePickerNative*/*.vue',
+							'src/components/NcEmojiPicker/*.vue',
 						],
 					},
 				// 	{

From 9f3a48546fae50d9604ff4f7d2d5ea5f78c25a85 Mon Sep 17 00:00:00 2001
From: Jonas <jonas@freesources.org>
Date: Tue, 26 Sep 2023 12:48:32 +0200
Subject: [PATCH 2/3] fix(NcEmojiPicker): Set type to `native` for selected
 emoji

The default is to display the emoji from a remote data source, which we
don't want (and is prohibitted by our CSP anyway).

Signed-off-by: Jonas <jonas@freesources.org>
---
 src/components/NcEmojiPicker/NcEmojiPicker.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/NcEmojiPicker/NcEmojiPicker.vue b/src/components/NcEmojiPicker/NcEmojiPicker.vue
index 52c623f48c..1107361693 100644
--- a/src/components/NcEmojiPicker/NcEmojiPicker.vue
+++ b/src/components/NcEmojiPicker/NcEmojiPicker.vue
@@ -167,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>

From 5c1510dc91e4a91b804ca8953542792a1417824c Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Tue, 26 Sep 2023 15:03:06 +0200
Subject: [PATCH 3/3] fix(NcEmojiPicker): Do not set padding for the search
 input label

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 src/components/NcEmojiPicker/NcEmojiPicker.vue | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/components/NcEmojiPicker/NcEmojiPicker.vue b/src/components/NcEmojiPicker/NcEmojiPicker.vue
index 1107361693..f818ad9ee0 100644
--- a/src/components/NcEmojiPicker/NcEmojiPicker.vue
+++ b/src/components/NcEmojiPicker/NcEmojiPicker.vue
@@ -489,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>