fix(NcColorPicker): close popover on submit event

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

[skip ci]

src/components/NcColorPicker/NcColorPicker.vue

@@ -143,26 +143,56 @@ export default {
 		<template #trigger="slotProps">
 			<slot v-bind="slotProps" />
 		</template>
-		<div role="dialog"
-			class="color-picker"
-			aria-modal="true"
-			:aria-label="t('Color picker')"
-			:class="{ 'color-picker--advanced-fields': advanced && advancedFields }">
-			<Transition name="slide" mode="out-in">
-				<div v-if="!advanced" class="color-picker__simple">
-					<label v-for="({ color, name }, index) in normalizedPalette"
-						:key="index"
-						:style="{ backgroundColor: color }"
-						class="color-picker__simple-color-circle"
-						:class="{ 'color-picker__simple-color-circle--active' : color === currentColor }">
-						<Check v-if="color === currentColor" :size="20" :fill-color="contrastColor" />
-						<input type="radio"
-							class="hidden-visually"
-							:aria-label="name"
-							:name="`color-picker-${uid}`"
-							:checked="color === currentColor"
-							@click="pickColor(color)">
-					</label>
+		<template #default="slotProps">
+			<div role="dialog"
+				class="color-picker"
+				aria-modal="true"
+				:aria-label="t('Color picker')"
+				:class="{ 'color-picker--advanced-fields': advanced && advancedFields }">
+				<Transition name="slide" mode="out-in">
+					<div v-if="!advanced" class="color-picker__simple">
+						<label v-for="({ color, name }, index) in normalizedPalette"
+							:key="index"
+							:style="{ backgroundColor: color }"
+							class="color-picker__simple-color-circle"
+							:class="{ 'color-picker__simple-color-circle--active' : color === currentColor }">
+							<Check v-if="color === currentColor" :size="20" :fill-color="contrastColor" />
+							<input type="radio"
+								class="hidden-visually"
+								:aria-label="name"
+								:name="`color-picker-${uid}`"
+								:checked="color === currentColor"
+								@click="pickColor(color)">
+						</label>
+					</div>
+					<Chrome v-else
+						v-model="currentColor"
+						class="color-picker__advanced"
+						:disable-alpha="true"
+						:disable-fields="!advancedFields"
+						@input="pickColor" />
+				</Transition>
+				<div v-if="!paletteOnly" class="color-picker__navigation">
+					<NcButton v-if="advanced"
+						type="tertiary"
+						:aria-label="ariaBack"
+						@click="handleBack">
+						<template #icon>
+							<ArrowLeft :size="20" />
+						</template>
+					</NcButton>
+					<NcButton v-else
+						type="tertiary"
+						:aria-label="ariaMore"
+						@click="handleMoreSettings">
+						<template #icon>
+							<DotsHorizontal :size="20" />
+						</template>
+					</NcButton>
+					<NcButton type="primary"
+						@click="handleConfirm(slotProps.hide)">
+						{{ t('Choose') }}
+					</NcButton>
 				</div>
 				<Chrome v-else
 					v-model="currentColor"
@@ -193,7 +223,7 @@ export default {
 					{{ t('Choose') }}
 				</NcButton>
 			</div>
-		</div>
+		</template>
 	</NcPopover>
 </template>
 
@@ -324,13 +354,14 @@ export default defineComponent({
 
 		/**
 		 * Submit a picked colour and close picker
+		 * @param {Function} hideCallback callback to close popover
 		 */
-		handleConfirm() {
+		handleConfirm(hideCallback) {
 			/**
 			 * Emits a hexadecimal string e.g. '#ffffff'
 			 */
 			this.$emit('submit', this.currentColor)
-			this.handleClose()
+			hideCallback()
 
 			this.advanced = false
 		},

src/components/NcPopover/NcPopover.vue

@@ -155,8 +155,8 @@ See: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/
 		</NcPopoverTriggerProvider>
 
 		<!-- This will be the content of the popover -->
-		<template #popper>
-			<slot />
+		<template #popper="slotProps">
+			<slot name="default" v-bind="slotProps" />
 		</template>
 	</Dropdown>
 </template>