feat: remove usage of .sync and define explicitly emits (#10209)

References

- https://v3-migration.vuejs.org/breaking-changes/v-model
-
https://v3-migration.vuejs.org/breaking-changes/v-on-native-modifier-removed.html

app/javascript/dashboard/components/widgets/modal/ConfirmDeleteModal.vue

@@ -1,4 +1,5 @@
 <script>
+import { defineModel } from 'vue';
 import { required } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
 import Modal from '../../Modal.vue';
@@ -8,37 +9,17 @@ export default {
     Modal,
   },
   props: {
-    show: {
-      type: Boolean,
-      default: false,
-    },
-    title: {
-      type: String,
-      default: '',
-    },
-    message: {
-      type: String,
-      default: '',
-    },
-    confirmText: {
-      type: String,
-      default: '',
-    },
-    rejectText: {
-      type: String,
-      default: '',
-    },
-    confirmValue: {
-      type: String,
-      default: '',
-    },
-    confirmPlaceHolderText: {
-      type: String,
-      default: '',
-    },
+    title: { type: String, default: '' },
+    message: { type: String, default: '' },
+    confirmText: { type: String, default: '' },
+    rejectText: { type: String, default: '' },
+    confirmValue: { type: String, default: '' },
+    confirmPlaceHolderText: { type: String, default: '' },
   },
+  emits: ['onClose', 'onConfirm'],
   setup() {
-    return { v$: useVuelidate() };
+    const show = defineModel('show', { type: Boolean, default: false });
+    return { v$: useVuelidate(), show };
   },
   data() {
     return {
@@ -65,9 +46,8 @@ export default {
 };
 </script>
 
-<!-- eslint-disable vue/no-mutating-props -->
 <template>
-  <Modal :show.sync="show" :on-close="closeModal">
+  <Modal v-model:show="show" :on-close="closeModal">
     <woot-modal-header :header-title="title" :header-content="message" />
     <form @submit.prevent="onConfirm">
       <woot-input

app/javascript/dashboard/components/widgets/modal/ConfirmationModal.vue

@@ -51,7 +51,7 @@ export default {
 </script>
 
 <template>
-  <Modal :show.sync="show" :on-close="cancel">
+  <Modal v-model:show="show" :on-close="cancel">
     <div class="h-auto overflow-auto flex flex-col">
       <woot-modal-header :header-title="title" :header-content="description" />
       <div class="flex flex-row justify-end gap-2 py-4 px-6 w-full">

app/javascript/dashboard/components/widgets/modal/DeleteModal.vue

@@ -1,26 +1,21 @@
-<script>
+<script setup>
 import Modal from '../../Modal.vue';
 
-export default {
-  components: {
-    Modal,
-  },
-  props: {
-    show: Boolean,
-    onClose: { type: Function, default: () => {} },
-    onConfirm: { type: Function, default: () => {} },
-    title: { type: String, default: '' },
-    message: { type: String, default: '' },
-    messageValue: { type: String, default: '' },
-    confirmText: { type: String, default: '' },
-    rejectText: { type: String, default: '' },
-  },
-};
+defineProps({
+  onClose: { type: Function, default: () => {} },
+  onConfirm: { type: Function, default: () => {} },
+  title: { type: String, default: '' },
+  message: { type: String, default: '' },
+  messageValue: { type: String, default: '' },
+  confirmText: { type: String, default: '' },
+  rejectText: { type: String, default: '' },
+});
+
+const show = defineModel('show', { type: Boolean, default: false });
 </script>
 
-<!-- eslint-disable vue/no-mutating-props -->
 <template>
-  <Modal :show.sync="show" :on-close="onClose">
+  <Modal v-model:show="show" :on-close="onClose">
     <woot-modal-header
       :header-title="title"
       :header-content="message"