feat(NcModal): expose initialFocus prop for focus-trap options

Signed-off-by: Maksim Sukharev <[email protected]>

Author: Antreesy

src/components/NcDialog/NcDialog.vue

@@ -213,6 +213,7 @@ export default {
 <script setup lang="ts">
 import type { Slot } from 'vue'
 import type { ComponentProps, VueClassType } from '../../utils/VueTypes.ts'
+import type { FocusTargetOrFalse } from 'focus-trap'
 
 import { useElementSize } from '@vueuse/core'
 import { computed, ref, useTemplateRef } from 'vue'
@@ -237,6 +238,12 @@ const props = withDefaults(defineProps<{
 	/** Additional elements to add to the focus trap */
 	additionalTrapElements?: Array<string | HTMLElement>
 
+	/** Set element to return focus to after focus trap deactivation */
+	setReturnFocus?: FocusTargetOrFalse
+
+	/** Specify an element to receive initial focus after focus trap activation */
+	initialFocus?: FocusTargetOrFalse
+
 	/**
 	 * The element where to mount the dialog, if `null` is passed the dialog is mounted in place.
 	 */
@@ -490,6 +497,8 @@ const modalProps = computed(() => ({
 	outTransition: props.outTransition,
 	closeOnClickOutside: props.closeOnClickOutside,
 	additionalTrapElements: props.additionalTrapElements,
+	setReturnFocus: props.setReturnFocus,
+	initialFocus: props.initialFocus,
 }))
 </script>
 

src/components/NcModal/NcModal.vue

@@ -558,6 +558,16 @@ export default {
 			default: undefined,
 			type: [Boolean, HTMLElement, SVGElement, String],
 		},
+
+		/**
+		 * Specify an element to receive initial focus after focus trap activation
+		 *
+		 * @type {import('focus-trap').FocusTargetValueOrFalse}
+		 */
+		initialFocus: {
+			default: undefined,
+			type: [Boolean, HTMLElement, SVGElement, String],
+		},
 	},
 
 	emits: [
@@ -863,6 +873,7 @@ export default {
 				// Focus trap is deactivated on modal close anyway.
 				escapeDeactivates: false,
 				setReturnFocus: this.setReturnFocus,
+				initialFocus: this.initialFocus,
 			}
 
 			// Init focus trap