update

frontend/app/javascript/dashboard/components/Modal.vue

@@ -1,13 +1,14 @@
 <script setup>
 // [TODO] Use Teleport to move the modal to the end of the body
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed } from 'vue';
 import { useEventListener } from '@vueuse/core';
 import Button from 'dashboard/components-next/button/Button.vue';
 
 const { modalType, closeOnBackdropClick, onClose } = defineProps({
   closeOnBackdropClick: { type: Boolean, default: true },
   showCloseButton: { type: Boolean, default: true },
-  onClose: { type: Function, required: true },
+  // Kept temporarily for backwards compatibility while callers move to @close.
+  onClose: { type: Function, default: null },
   fullWidth: { type: Boolean, default: false },
   modalType: { type: String, default: 'centered' },
   size: { type: String, default: '' },
@@ -35,7 +36,7 @@ const handleMouseDown = () => {
 const close = () => {
   show.value = false;
   emit('close');
-  onClose();
+  onClose?.();
 };
 
 const onMouseUp = () => {
@@ -56,15 +57,6 @@ const onKeydown = e => {
 
 useEventListener(document.body, 'mouseup', onMouseUp);
 useEventListener(document, 'keydown', onKeydown);
-
-onMounted(() => {
-  if (import.meta.env.DEV && onClose && typeof onClose === 'function') {
-    // eslint-disable-next-line no-console
-    console.warn(
-      "[DEPRECATED] The 'onClose' prop is deprecated. Please use the 'close' event instead."
-    );
-  }
-});
 </script>
 
 <template>