update

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

@@ -54,8 +54,12 @@ const codepenScriptValue = computed(() => {
 
 const onCopy = async e => {
   e.preventDefault();
-  await copyTextToClipboard(scrubbedScript.value);
-  useAlert(t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
+  try {
+    await copyTextToClipboard(scrubbedScript.value);
+    useAlert(t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
+  } catch {
+    useAlert(t('COMPONENTS.CODE.COPY_FAILED'));
+  }
 };
 </script>
 

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>

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

@@ -63,7 +63,7 @@ export default {
 </script>
 
 <template>
-  <woot-modal :show="show" :on-close="() => $emit('closeAccountCreateModal')">
+  <woot-modal :show="show" @close="$emit('closeAccountCreateModal')">
     <div class="flex flex-col h-auto overflow-auto">
       <woot-modal-header
         :header-title="$t('CREATE_ACCOUNT.NEW_ACCOUNT')"

frontend/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue

@@ -36,7 +36,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <woot-modal :show="show" size="medium" :on-close="() => $emit('close')">
+  <woot-modal :show="show" size="medium" @close="$emit('close')">
     <div class="flex flex-col h-auto overflow-auto">
       <woot-modal-header
         :header-title="$t('SIDEBAR_ITEMS.KEYBOARD_SHORTCUTS')"