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/ChatList.vue

@@ -785,7 +785,7 @@ watch(conversationFilters, (newVal, oldVal) => {
 
     <DeleteCustomViews
       v-if="showDeleteFoldersModal"
-      :show-delete-popup.sync="showDeleteFoldersModal"
+      v-model:show="showDeleteFoldersModal"
       :active-custom-view="activeFolder"
       :custom-views-id="foldersId"
       :open-last-item-after-delete="openLastItemAfterDeleteInFolder"
@@ -878,7 +878,7 @@ watch(conversationFilters, (newVal, oldVal) => {
       </DynamicScroller>
     </div>
     <woot-modal
-      :show.sync="showAdvancedFilters"
+      v-model:show="showAdvancedFilters"
       :on-close="closeAdvanceFiltersModal"
       size="medium"
     >

app/javascript/dashboard/components/Modal.vue

@@ -3,9 +3,8 @@
 import { ref, computed, defineEmits, onMounted } from 'vue';
 import { useEventListener } from '@vueuse/core';
 
-const { show, modalType, closeOnBackdropClick, onClose } = defineProps({
+const { modalType, closeOnBackdropClick, onClose } = defineProps({
   closeOnBackdropClick: { type: Boolean, default: true },
-  show: Boolean,
   showCloseButton: { type: Boolean, default: true },
   onClose: { type: Function, required: true },
   fullWidth: { type: Boolean, default: false },
@@ -14,6 +13,7 @@ const { show, modalType, closeOnBackdropClick, onClose } = defineProps({
 });
 
 const emit = defineEmits(['close']);
+const show = defineModel('show', { type: Boolean, default: false });
 
 const modalClassName = computed(() => {
   const modalClassNameMap = {
@@ -32,6 +32,7 @@ const handleMouseDown = () => {
 };
 
 const close = () => {
+  show.value = false;
   emit('close');
   onClose();
 };
@@ -40,14 +41,14 @@ const onMouseUp = () => {
   if (mousedDownOnBackdrop.value) {
     mousedDownOnBackdrop.value = false;
     if (closeOnBackdropClick) {
-      onClose();
+      close();
     }
   }
 };
 
 const onKeydown = e => {
-  if (show && e.code === 'Escape') {
+  if (show.value && e.code === 'Escape') {
-    onClose();
+    close();
     e.stopPropagation();
   }
 };

app/javascript/dashboard/components/ui/Switch.vue

@@ -4,6 +4,7 @@ export default {
     modelValue: { type: Boolean, default: false },
     size: { type: String, default: '' },
   },
+  emits: ['update:modelValue', 'input'],
   methods: {
     onClick() {
       this.$emit('update:modelValue', !this.modelValue);

app/javascript/dashboard/components/widgets/AIAssistanceButton.vue

@@ -137,7 +137,7 @@ export default {
         @click="openAIAssist"
       />
       <woot-modal
-        :show.sync="showAIAssistanceModal"
+        v-model:show="showAIAssistanceModal"
         :on-close="hideAIAssistanceModal"
       >
         <AIAssistanceModal
@@ -149,7 +149,7 @@ export default {
     </div>
     <div v-else-if="shouldShowAIAssistCTAButtonForAdmin" class="relative">
       <AIAssistanceCTAButton @click="openAICta" />
-      <woot-modal :show.sync="showAICtaModal" :on-close="hideAICtaModal">
+      <woot-modal v-model:show="showAICtaModal" :on-close="hideAICtaModal">
         <AICTAModal @close="hideAICtaModal" />
       </woot-modal>
     </div>

app/javascript/dashboard/components/widgets/AutomationActionInput.vue

@@ -38,6 +38,7 @@ export default {
       default: false,
     },
   },
+  emits: ['update:modelValue', 'input', 'removeAction', 'resetAction'],
   computed: {
     action_name: {
       get() {

app/javascript/dashboard/components/widgets/AutomationActionTeamMessageInput.vue

@@ -3,6 +3,7 @@ export default {
   // The value types are dynamic, hence prop validation removed to work with our action schema
   // eslint-disable-next-line vue/require-prop-types
   props: ['teams', 'value'],
+  emits: ['input'],
   data() {
     return {
       selectedTeams: [],

app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue

@@ -47,6 +47,7 @@ export default {
     placeholder: { type: String, default: '' },
     enabledMenuOptions: { type: Array, default: () => [] },
   },
+  emits: ['blur', 'input', 'update:modelValue', 'keyup', 'focus', 'keydown'],
   setup() {
     const { uiSettings, updateUISettings } = useUISettings();
 

app/javascript/dashboard/components/widgets/conversation/EmailTranscriptModal.vue

@@ -1,20 +1,20 @@
 <script>
+import { defineModel } from 'vue';
 import { useVuelidate } from '@vuelidate/core';
 import { required, minLength, email } from '@vuelidate/validators';
 import { useAlert } from 'dashboard/composables';
+
 export default {
   props: {
-    show: {
-      type: Boolean,
-      default: false,
-    },
     currentChat: {
       type: Object,
       default: () => ({}),
     },
   },
+  emits: ['cancel'],
   setup() {
-    return { v$: useVuelidate() };
+    const show = defineModel('show', { type: Boolean, default: false });
+    return { v$: useVuelidate(), show };
   },
   data() {
     return {
@@ -80,9 +80,8 @@ export default {
 };
 </script>
 
-<!-- eslint-disable vue/no-mutating-props -->
 <template>
-  <woot-modal :show.sync="show" :on-close="onCancel">
+  <woot-modal v-model:show="show" :on-close="onCancel">
     <div class="flex flex-col h-auto overflow-auto">
       <woot-modal-header
         :header-title="$t('EMAIL_TRANSCRIPT.TITLE')"

app/javascript/dashboard/components/widgets/conversation/MessagesView.vue

@@ -547,9 +547,9 @@ export default {
         </div>
       </div>
       <ReplyBox
+        v-model:popout-reply-box="isPopOutReplyBox"
         :conversation-id="currentChat.id"
-        :popout-reply-box.sync="isPopOutReplyBox"
+        @toggle-popout="showPopOutReplyBox"
-        @togglePopout="showPopOutReplyBox"
       />
     </div>
   </div>

app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue

@@ -1,5 +1,6 @@
 <script>
-import { defineAsyncComponent } from 'vue';
+// [TODO] The popout events are needlessly complex and should be simplified
+import { defineAsyncComponent, defineModel } from 'vue';
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import { useUISettings } from 'dashboard/composables/useUISettings';
@@ -65,12 +66,7 @@ export default {
     ArticleSearchPopover,
   },
   mixins: [inboxMixin, fileUploadMixin, keyboardEventListenerMixins],
-  props: {
+  emits: ['update:popoutReplyBox', 'togglePopout'],
-    popoutReplyBox: {
-      type: Boolean,
-      default: false,
-    },
-  },
   setup() {
     const {
       uiSettings,
@@ -79,8 +75,14 @@ export default {
       fetchSignatureFlagFromUISettings,
     } = useUISettings();
 
+    const popoutReplyBox = defineModel('popoutReplyBox', {
+      type: Boolean,
+      default: false,
+    });
+
     return {
       uiSettings,
+      popoutReplyBox,
       updateUISettings,
       isEditorHotKeyEnabled,
       fetchSignatureFlagFromUISettings,
@@ -1081,15 +1083,15 @@ export default {
       :banner-message="$t('CONVERSATION.NOT_ASSIGNED_TO_YOU')"
       has-action-button
       :action-button-label="$t('CONVERSATION.ASSIGN_TO_ME')"
-      @primaryAction="onClickSelfAssign"
+      @primary-action="onClickSelfAssign"
     />
     <ReplyTopPanel
       :mode="replyType"
       :is-message-length-reaching-threshold="isMessageLengthReachingThreshold"
       :characters-remaining="charactersRemaining"
       :popout-reply-box="popoutReplyBox"
-      @setReplyMode="setReplyMode"
+      @set-reply-mode="setReplyMode"
-      @togglePopout="$emit('togglePopout')"
+      @toggle-popout="$emit('togglePopout')"
     />
     <ArticleSearchPopover
       v-if="showArticleSearchPopover && connectedPortalSlug"

app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue

@@ -17,6 +17,7 @@ export default {
       default: '',
     },
   },
+  emits: ['update:bccEmails', 'update:ccEmails', 'update:toEmails'],
   setup() {
     return { v$: useVuelidate() };
   },

app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/Modal.vue

@@ -1,4 +1,5 @@
 <script>
+import { defineModel } from 'vue';
 import TemplatesPicker from './TemplatesPicker.vue';
 import TemplateParser from './TemplateParser.vue';
 export default {
@@ -11,10 +12,12 @@ export default {
       type: Number,
       default: undefined,
     },
-    show: {
+  },
-      type: Boolean,
+  emits: ['onSend', 'cancel'],
-      default: true,
+  setup() {
-    },
+    const show = defineModel('show', { type: Boolean, default: false });
+
+    return { show };
   },
   data() {
     return {
@@ -47,9 +50,8 @@ export default {
 };
 </script>
 
-<!-- eslint-disable vue/no-mutating-props -->
 <template>
-  <woot-modal :show.sync="show" :on-close="onClose" size="modal-big">
+  <woot-modal v-model:show="show" :on-close="onClose" size="modal-big">
     <woot-modal-header
       :header-title="$t('WHATSAPP_TEMPLATES.MODAL.TITLE')"
       :header-content="modalHeaderContent"
@@ -58,13 +60,13 @@ export default {
       <TemplatesPicker
         v-if="!selectedWaTemplate"
         :inbox-id="inboxId"
-        @onSelect="pickTemplate"
+        @on-select="pickTemplate"
       />
       <TemplateParser
         v-else
         :template="selectedWaTemplate"
-        @resetTemplate="onResetTemplate"
+        @reset-template="onResetTemplate"
-        @sendMessage="onSendMessage"
+        @send-message="onSendMessage"
       />
     </div>
   </woot-modal>

app/javascript/dashboard/components/widgets/conversation/bubble/Image.vue

@@ -26,7 +26,7 @@ export default {
 <template>
   <div class="image message-text__wrap">
     <img :src="url" @click="onClick" @error="$emit('error')" />
-    <woot-modal full-width :show.sync="show" :on-close="onClose">
+    <woot-modal v-model:show="show" full-width :on-close="onClose">
       <img :src="url" class="modal-image skip-context-menu" />
     </woot-modal>
   </div>

app/javascript/dashboard/components/widgets/conversation/bubble/ImageAudioVideo.vue

@@ -116,7 +116,7 @@ export default {
     </audio>
     <GalleryView
       v-if="show"
-      :show.sync="show"
+      v-model:show="show"
       :attachment="attachment"
       :all-attachments="filteredCurrentChatAttachments"
       @error="onImgError"

app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue

@@ -106,7 +106,7 @@ export default {
     </button>
     <GalleryView
       v-if="showGalleryViewer"
-      :show.sync="showGalleryViewer"
+      v-model:show="showGalleryViewer"
       :attachment="attachment"
       :all-attachments="availableAttachments"
       @error="onClose"

app/javascript/dashboard/components/widgets/conversation/bubble/Video.vue

@@ -30,7 +30,7 @@ export default {
 <template>
   <div class="video message-text__wrap">
     <video ref="videoElement" :src="url" muted playsInline @click="onClick" />
-    <woot-modal :show.sync="show" :on-close="onClose">
+    <woot-modal v-model:show="show" :on-close="onClose">
       <video
         :src="url"
         controls

app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue

@@ -7,10 +7,6 @@ import { messageTimestamp } from 'shared/helpers/timeHelper';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 
 const props = defineProps({
-  show: {
-    type: Boolean,
-    required: true,
-  },
   attachment: {
     type: Object,
     required: true,
@@ -22,6 +18,7 @@ const props = defineProps({
 });
 
 const emit = defineEmits(['close']);
+const show = defineModel('show', { type: Boolean, default: false });
 
 const getters = useStoreGetters();
 
@@ -208,11 +205,10 @@ onMounted(() => {
 });
 </script>
 
-<!-- eslint-disable vue/no-mutating-props -->
 <template>
   <woot-modal
+    v-model:show="show"
     full-width
-    :show.sync="show"
     :show-close-button="false"
     :on-close="onClose"
   >

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue

@@ -240,7 +240,7 @@ export default {
       {{ $t('BULK_ACTION.ALL_CONVERSATIONS_SELECTED_ALERT') }}
     </div>
     <woot-modal
-      :show.sync="showCustomTimeSnoozeModal"
+      v-model:show="showCustomTimeSnoozeModal"
       :on-close="hideCustomSnoozeModal"
     >
       <CustomSnoozeModal

app/javascript/dashboard/components/widgets/conversation/linear/index.vue

@@ -122,7 +122,7 @@ onMounted(() => {
       @unlinkIssue="unlinkIssue"
     />
     <woot-modal
-      :show.sync="shouldShowPopup"
+      v-model:show="shouldShowPopup"
       :on-close="closePopup"
       :close-on-backdrop-click="false"
       class="!items-start [&>div]:!top-12 [&>div]:sticky"

app/javascript/dashboard/components/widgets/forms/Input.vue

@@ -38,7 +38,8 @@ export default {
       default: () => {},
     },
   },
-  created() {
+  emits: ['update:modelValue', 'input', 'blur'],
+  mounted() {
     // eslint-disable-next-line
     console.warn(
       '[DEPRECATED] <WootInput> has be deprecated and will be removed soon. Please use v3/components/Form/Input.vue instead'

app/javascript/dashboard/components/widgets/forms/PhoneInput.vue

@@ -29,6 +29,7 @@ export default {
       default: false,
     },
   },
+  emits: ['blur', 'input', 'setCode'],
   data() {
     return {
       selectedIndex: -1,

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: {
+    title: { type: String, default: '' },
-      type: Boolean,
+    message: { type: String, default: '' },
-      default: false,
+    confirmText: { type: String, default: '' },
-    },
+    rejectText: { type: String, default: '' },
-    title: {
+    confirmValue: { type: String, default: '' },
-      type: String,
+    confirmPlaceHolderText: { type: String, default: '' },
-      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 {
+defineProps({
-  components: {
+  onClose: { type: Function, default: () => {} },
-    Modal,
+  onConfirm: { type: Function, default: () => {} },
-  },
+  title: { type: String, default: '' },
-  props: {
+  message: { type: String, default: '' },
-    show: Boolean,
+  messageValue: { type: String, default: '' },
-    onClose: { type: Function, default: () => {} },
+  confirmText: { type: String, default: '' },
-    onConfirm: { type: Function, default: () => {} },
+  rejectText: { type: String, default: '' },
-    title: { type: String, default: '' },
+});
-    message: { type: String, default: '' },
+
-    messageValue: { type: String, default: '' },
+const show = defineModel('show', { type: Boolean, default: false });
-    confirmText: { type: String, default: '' },
-    rejectText: { type: String, default: '' },
-  },
-};
 </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"

app/javascript/dashboard/modules/contact/ContactMergeModal.vue

@@ -1,4 +1,5 @@
 <script>
+import { defineModel } from 'vue';
 import { useAlert, useTrack } from 'dashboard/composables';
 import MergeContact from 'dashboard/modules/contact/components/MergeContact.vue';
 
@@ -14,10 +15,11 @@ export default {
       type: Object,
       required: true,
     },
-    show: {
+  },
-      type: Boolean,
+  setup() {
-      default: false,
+    const show = defineModel('show', { type: Boolean, default: false });
-    },
+
+    return { show };
   },
   data() {
     return {
@@ -69,9 +71,8 @@ export default {
 };
 </script>
 
-<!-- eslint-disable vue/no-mutating-props -->
 <template>
-  <woot-modal :show.sync="show" :on-close="onClose">
+  <woot-modal v-model:show="show" :on-close="onClose">
     <woot-modal-header
       :header-title="$t('MERGE_CONTACTS.TITLE')"
       :header-content="$t('MERGE_CONTACTS.DESCRIPTION')"

app/javascript/dashboard/modules/contact/components/AddCustomAttribute.vue

@@ -1,4 +1,5 @@
 <script>
+import { defineModel } from 'vue';
 import Modal from 'dashboard/components/Modal.vue';
 import { useVuelidate } from '@vuelidate/core';
 import { required, minLength } from '@vuelidate/validators';
@@ -8,17 +9,15 @@ export default {
     Modal,
   },
   props: {
-    show: {
-      type: Boolean,
-      default: true,
-    },
     isCreating: {
       type: Boolean,
       default: false,
     },
   },
+  emits: ['create', 'cancel'],
   setup() {
-    return { v$: useVuelidate() };
+    const show = defineModel('show', { type: Boolean, default: false });
+    return { v$: useVuelidate(), show };
   },
   data() {
     return {
@@ -61,9 +60,8 @@ export default {
 };
 </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="$t('CUSTOM_ATTRIBUTES.ADD.TITLE')"
       :header-content="$t('CUSTOM_ATTRIBUTES.ADD.DESC')"

app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue

@@ -154,7 +154,7 @@ export default {
     <!-- Add To Canned Responses -->
     <woot-modal
       v-if="isCannedResponseModalOpen && enabledOptions['cannedResponse']"
-      :show.sync="isCannedResponseModalOpen"
+      v-model:show="isCannedResponseModalOpen"
       :on-close="hideCannedResponseModal"
     >
       <AddCannedModal
@@ -172,8 +172,8 @@ export default {
     <!-- Confirm Deletion -->
     <woot-delete-modal
       v-if="showDeleteModal"
+      v-model:show="showDeleteModal"
       class="context-menu--delete-modal"
-      :show.sync="showDeleteModal"
       :on-close="closeDeleteModal"
       :on-confirm="confirmDeletion"
       :title="$t('CONVERSATION.CONTEXT_MENU.DELETE_CONFIRMATION.TITLE')"

app/javascript/dashboard/modules/notes/components/ContactNote.vue

@@ -102,7 +102,7 @@ export default {
       </div>
       <woot-delete-modal
         v-if="showDeleteModal"
-        :show.sync="showDeleteModal"
+        v-model:show="showDeleteModal"
         :on-close="closeDelete"
         :on-confirm="confirmDeletion"
         :title="$t('DELETE_NOTE.CONFIRM.TITLE')"

app/javascript/dashboard/routes/dashboard/Dashboard.vue

@@ -178,7 +178,7 @@ export default {
         @closeAccountCreateModal="closeCreateAccountModal"
       />
       <WootKeyShortcutModal
-        :show.sync="showShortcutModal"
+        v-model:show="showShortcutModal"
         @close="closeKeyShortcutModal"
         @clickaway="closeKeyShortcutModal"
       />
@@ -186,7 +186,10 @@ export default {
         v-if="isNotificationPanel"
         @close="closeNotificationPanel"
       />
-      <woot-modal :show.sync="showAddLabelModal" :on-close="hideAddLabelPopup">
+      <woot-modal
+        v-model:show="showAddLabelModal"
+        :on-close="hideAddLabelPopup"
+      >
         <AddLabelModal @close="hideAddLabelPopup" />
       </woot-modal>
     </main>

app/javascript/dashboard/routes/dashboard/commands/CmdBarConversationSnooze.vue

@@ -61,7 +61,7 @@ useEmitter(CMD_SNOOZE_CONVERSATION, onCmdSnoozeConversation);
 
 <template>
   <woot-modal
-    :show.sync="showCustomSnoozeModal"
+    v-model:show="showCustomSnoozeModal"
     :on-close="hideCustomSnoozeModal"
   >
     <CustomSnoozeModal

app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue

@@ -437,7 +437,7 @@ export default {
     />
     <DeleteCustomViews
       v-if="showDeleteSegmentsModal"
-      :show-delete-popup.sync="showDeleteSegmentsModal"
+      v-model:show="showDeleteSegmentsModal"
       :active-custom-view="activeSegment"
       :custom-views-id="segmentsId"
       :active-filter-type="filterType"
@@ -451,11 +451,11 @@ export default {
       :on-close="closeContactInfoPanel"
     />
     <CreateContact :show="showCreateModal" @cancel="onToggleCreate" />
-    <woot-modal :show.sync="showImportModal" :on-close="onToggleImport">
+    <woot-modal v-model:show="showImportModal" :on-close="onToggleImport">
       <ImportContacts v-if="showImportModal" :on-close="onToggleImport" />
     </woot-modal>
     <woot-modal
-      :show.sync="showFiltersModal"
+      v-model:show="showFiltersModal"
       :on-close="closeAdvanceFiltersModal"
       size="medium"
     >

app/javascript/dashboard/routes/dashboard/contacts/components/ImportContacts.vue

@@ -53,7 +53,7 @@ export default {
 </script>
 
 <template>
-  <Modal :show.sync="show" :on-close="onClose">
+  <Modal v-model:show="show" :on-close="onClose">
     <div class="flex flex-col h-auto overflow-auto">
       <woot-modal-header :header-title="$t('IMPORT_CONTACTS.TITLE')">
         <p>

app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue

@@ -321,7 +321,7 @@ export default {
     </div>
     <woot-delete-modal
       v-if="showDeleteModal"
-      :show.sync="showDeleteModal"
+      v-model:show="showDeleteModal"
       :on-close="closeDelete"
       :on-confirm="confirmDeletion"
       :title="$t('DELETE_CONTACT.CONFIRM.TITLE')"

app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue

@@ -440,8 +440,8 @@ export default {
             </label>
             <ReplyEmailHead
               v-if="isAnEmailInbox"
-              :cc-emails.sync="ccEmails"
+              v-model:cc-emails="ccEmails"
-              :bcc-emails.sync="bccEmails"
+              v-model:bcc-emails="bccEmails"
             />
             <div class="editor-wrap">
               <WootMessageEditor

app/javascript/dashboard/routes/dashboard/conversation/contact/CreateContact.vue

@@ -1,4 +1,5 @@
 <script>
+import { defineModel } from 'vue';
 import { mapGetters } from 'vuex';
 import ContactForm from './ContactForm.vue';
 
@@ -6,13 +7,12 @@ export default {
   components: {
     ContactForm,
   },
-  props: {
+  emits: ['cancel'],
-    show: {
+  setup() {
-      type: Boolean,
+    const show = defineModel('show', { type: Boolean, default: false });
-      default: false,
-    },
-  },
 
+    return { show };
+  },
   computed: {
     ...mapGetters({
       uiFlags: 'contacts/getUIFlags',
@@ -33,9 +33,12 @@ export default {
 };
 </script>
 
-<!-- eslint-disable vue/no-mutating-props -->
 <template>
-  <woot-modal :show.sync="show" :on-close="onCancel" modal-type="right-aligned">
+  <woot-modal
+    v-model:show="show"
+    :on-close="onCancel"
+    modal-type="right-aligned"
+  >
     <div class="flex flex-col h-auto overflow-auto">
       <woot-modal-header
         :header-title="$t('CREATE_CONTACT.TITLE')"

app/javascript/dashboard/routes/dashboard/conversation/contact/EditContact.vue

@@ -1,4 +1,5 @@
 <script>
+import { defineModel } from 'vue';
 import { mapGetters } from 'vuex';
 import ContactForm from './ContactForm.vue';
 
@@ -7,16 +8,16 @@ export default {
     ContactForm,
   },
   props: {
-    show: {
-      type: Boolean,
-      default: false,
-    },
     contact: {
       type: Object,
       default: () => ({}),
     },
   },
-
+  emits: ['cancel'],
+  setup() {
+    const show = defineModel('show', { type: Boolean, default: false });
+    return { show };
+  },
   computed: {
     ...mapGetters({
       uiFlags: 'contacts/getUIFlags',
@@ -41,9 +42,12 @@ export default {
 };
 </script>
 
-<!-- eslint-disable vue/no-mutating-props -->
 <template>
-  <woot-modal :show.sync="show" :on-close="onCancel" modal-type="right-aligned">
+  <woot-modal
+    v-model:show="show"
+    :on-close="onCancel"
+    modal-type="right-aligned"
+  >
     <div class="flex flex-col h-auto overflow-auto">
       <woot-modal-header
         :header-title="`${$t('EDIT_CONTACT.TITLE')} - ${

app/javascript/dashboard/routes/dashboard/conversation/contact/NewConversation.vue

@@ -1,4 +1,5 @@
 <script>
+import { defineModel } from 'vue';
 import ConversationForm from './ConversationForm.vue';
 
 export default {
@@ -6,15 +7,16 @@ export default {
     ConversationForm,
   },
   props: {
-    show: {
-      type: Boolean,
-      default: false,
-    },
     contact: {
       type: Object,
       default: () => ({}),
     },
   },
+  emits: ['cancel'],
+  setup() {
+    const show = defineModel('show', { type: Boolean, default: false });
+    return { show };
+  },
   watch: {
     'contact.id'(id) {
       this.$store.dispatch('contacts/fetchContactableInbox', id);
@@ -42,9 +44,8 @@ export default {
 };
 </script>
 
-<!-- eslint-disable vue/no-mutating-props -->
 <template>
-  <woot-modal :show.sync="show" :on-close="onCancel">
+  <woot-modal v-model:show="show" :on-close="onCancel">
     <div class="flex flex-col h-auto overflow-auto">
       <woot-modal-header
         :header-title="$t('NEW_CONVERSATION.TITLE')"

app/javascript/dashboard/routes/dashboard/customviews/AddCustomViews.vue

@@ -83,7 +83,7 @@ export default {
 </script>
 
 <template>
-  <woot-modal :show.sync="show" :on-close="onClose">
+  <woot-modal v-model:show="show" :on-close="onClose">
     <woot-modal-header :header-title="$t('FILTER.CUSTOM_VIEWS.ADD.TITLE')" />
     <form class="w-full" @submit.prevent="saveCustomViews">
       <div class="w-full">

app/javascript/dashboard/routes/dashboard/customviews/DeleteCustomViews.vue

@@ -1,14 +1,11 @@
 <script>
+import { defineModel } from 'vue';
 import { useAlert } from 'dashboard/composables';
 import { CONTACTS_EVENTS } from '../../../helper/AnalyticsHelper/events';
 import { useTrack } from 'dashboard/composables';
 
 export default {
   props: {
-    showDeletePopup: {
-      type: Boolean,
-      default: false,
-    },
     activeCustomView: {
       type: Object,
       default: () => {},
@@ -26,7 +23,11 @@ export default {
       default: () => {},
     },
   },
-
+  emits: ['close'],
+  setup() {
+    const show = defineModel('show', { type: Boolean, default: false });
+    return { show };
+  },
   computed: {
     activeCustomViews() {
       if (this.activeFilterType === 0) {
@@ -89,12 +90,11 @@ export default {
 };
 </script>
 
-<!-- eslint-disable vue/no-mutating-props -->
 <template>
   <div>
     <woot-delete-modal
-      v-if="showDeletePopup"
+      v-if="show"
-      :show.sync="showDeletePopup"
+      v-model:show="show"
       :on-close="closeDeletePopup"
       :on-confirm="deleteSavedCustomViews"
       :title="$t('FILTER.CUSTOM_VIEWS.DELETE.MODAL.CONFIRM.TITLE')"

app/javascript/dashboard/routes/dashboard/helpcenter/components/AddLocale.vue

@@ -1,4 +1,5 @@
 <script>
+import { defineModel } from 'vue';
 import Modal from 'dashboard/components/Modal.vue';
 import { required } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
@@ -12,17 +13,15 @@ export default {
     Modal,
   },
   props: {
-    show: {
-      type: Boolean,
-      default: true,
-    },
     portal: {
       type: Object,
       default: () => ({}),
     },
   },
+  emits: ['cancel'],
   setup() {
-    return { v$: useVuelidate() };
+    const show = defineModel('show', { type: Boolean, default: false });
+    return { v$: useVuelidate(), show };
   },
   data() {
     return {
@@ -96,9 +95,8 @@ export default {
 };
 </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="$t('HELP_CENTER.PORTAL.ADD_LOCALE.TITLE')"
       :header-content="$t('HELP_CENTER.PORTAL.ADD_LOCALE.SUB_TITLE')"

app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue

@@ -336,7 +336,7 @@ export default {
       />
       <AddCategory
         v-if="showAddCategoryModal"
-        :show.sync="showAddCategoryModal"
+        v-model:show="showAddCategoryModal"
         :portal-name="selectedPortalName"
         :locale="selectedLocaleInPortal"
         :portal-slug="selectedPortalSlug"

app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue

@@ -365,7 +365,7 @@ export default {
       </div>
     </div>
     <woot-delete-modal
-      :show.sync="showDeleteConfirmationPopup"
+      v-model:show="showDeleteConfirmationPopup"
       :on-close="closeDeletePopup"
       :on-confirm="onClickDeletePortal"
       :title="$t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.DELETE_PORTAL.TITLE')"

app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue

@@ -37,6 +37,7 @@ export default {
       default: () => [],
     },
   },
+  emits: ['input', 'openPopover', 'openModal'],
   computed: {
     hasCategory() {
       return (

app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarSearch.vue

@@ -1,5 +1,6 @@
 <script>
 export default {
+  emits: ['input'],
   data() {
     return {
       searchValue: '',

app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/EditArticle.vue

@@ -204,7 +204,7 @@ export default {
       @updateMeta="updateMeta"
     />
     <woot-delete-modal
-      :show.sync="showDeleteConfirmationPopup"
+      v-model:show="showDeleteConfirmationPopup"
       :on-close="closeDeletePopup"
       :on-confirm="confirmDeletion"
       :title="$t('HELP_CENTER.DELETE_ARTICLE.MODAL.CONFIRM.TITLE')"

app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/AddCategory.vue

@@ -1,4 +1,5 @@
 <script>
+import { defineModel } from 'vue';
 import { required, minLength } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
 import { useAlert, useTrack } from 'dashboard/composables';
@@ -9,10 +10,6 @@ import NameEmojiInput from './NameEmojiInput.vue';
 export default {
   components: { NameEmojiInput },
   props: {
-    show: {
-      type: Boolean,
-      default: true,
-    },
     portalName: {
       type: String,
       default: '',
@@ -27,7 +24,8 @@ export default {
     },
   },
   setup() {
-    return { v$: useVuelidate() };
+    const show = defineModel('show', { type: Boolean, default: false });
+    return { v$: useVuelidate(), show };
   },
   data() {
     return {
@@ -111,9 +109,8 @@ export default {
 };
 </script>
 
-<!-- eslint-disable vue/no-mutating-props -->
 <template>
-  <woot-modal :show.sync="show" :on-close="onClose">
+  <woot-modal v-model:show="show" :on-close="onClose">
     <woot-modal-header
       :header-title="$t('HELP_CENTER.CATEGORY.ADD.TITLE')"
       :header-content="$t('HELP_CENTER.CATEGORY.ADD.SUB_TITLE')"

app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue

@@ -1,4 +1,5 @@
 <script>
+import { defineModel } from 'vue';
 import { required, minLength } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
 import { useAlert, useTrack } from 'dashboard/composables';
@@ -9,10 +10,6 @@ import CategoryNameIconInput from './NameEmojiInput.vue';
 export default {
   components: { CategoryNameIconInput },
   props: {
-    show: {
-      type: Boolean,
-      default: true,
-    },
     portalName: {
       type: String,
       default: '',
@@ -31,7 +28,8 @@ export default {
     },
   },
   setup() {
-    return { v$: useVuelidate() };
+    const show = defineModel('show', { type: Boolean, default: false });
+    return { v$: useVuelidate(), show };
   },
   data() {
     return {
@@ -120,9 +118,8 @@ export default {
 };
 </script>
 
-<!-- eslint-disable vue/no-mutating-props -->
 <template>
-  <woot-modal :show.sync="show" :on-close="onClose">
+  <woot-modal v-model:show="show" :on-close="onClose">
     <woot-modal-header
       :header-title="$t('HELP_CENTER.CATEGORY.EDIT.TITLE')"
       :header-content="$t('HELP_CENTER.CATEGORY.EDIT.SUB_TITLE')"

app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ListAllCategories.vue

@@ -141,7 +141,7 @@ function changeCurrentCategory(event) {
     </div>
     <EditCategory
       v-if="showEditCategoryModal"
-      :show.sync="showEditCategoryModal"
+      v-model:show="showEditCategoryModal"
       :portal-name="currentPortalName"
       :locale="selectedCategory.locale"
       :category="selectedCategory"
@@ -150,7 +150,7 @@ function changeCurrentCategory(event) {
     />
     <AddCategory
       v-if="showAddCategoryModal"
-      :show.sync="showAddCategoryModal"
+      v-model:show="showAddCategoryModal"
       :portal-name="currentPortalName"
       :locale="currentLocaleCode"
       @cancel="closeAddCategoryModal"

app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalLocales.vue

@@ -129,7 +129,7 @@ function addLocale() {
       @delete="deletePortalLocale"
     />
     <woot-modal
-      :show.sync="isAddLocaleModalOpen"
+      v-model:show="isAddLocaleModalOpen"
       :on-close="closeAddLocaleModal"
     >
       <AddLocale

app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue

@@ -92,7 +92,7 @@ export default {
       />
     </div>
     <woot-modal
-      :show.sync="isAddLocaleModalOpen"
+      v-model:show="isAddLocaleModalOpen"
       :on-close="closeAddLocaleModal"
     >
       <AddLocale

app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue

@@ -147,7 +147,7 @@ export default {
       </woot-button>
     </div>
     <woot-modal
-      :show.sync="showCustomSnoozeModal"
+      v-model:show="showCustomSnoozeModal"
       :on-close="hideCustomSnoozeModal"
     >
       <CustomSnoozeModal

app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLMonacoEditor.vue

@@ -10,6 +10,7 @@ export default {
       default: '',
     },
   },
+  emits: ['input'],
   data() {
     return {
       iframeLoading: true,

app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue

@@ -255,11 +255,11 @@ const confirmDeletion = () => {
       </table>
     </template>
 
-    <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
+    <woot-modal v-model:show="showAddPopup" :on-close="hideAddPopup">
       <AddAgent @close="hideAddPopup" />
     </woot-modal>
 
-    <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
+    <woot-modal v-model:show="showEditPopup" :on-close="hideEditPopup">
       <EditAgent
         v-if="showEditPopup"
         :id="currentAgent.id"
@@ -273,7 +273,7 @@ const confirmDeletion = () => {
     </woot-modal>
 
     <woot-delete-modal
-      :show.sync="showDeletePopup"
+      v-model:show="showDeletePopup"
       :on-close="closeDeletePopup"
       :on-confirm="confirmDeletion"
       :title="$t('AGENT_MGMT.DELETE.CONFIRM.TITLE')"

app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue

@@ -158,7 +158,7 @@ export default {
 </script>
 
 <template>
-  <woot-modal :show.sync="show" :on-close="onClose">
+  <woot-modal v-model:show="show" :on-close="onClose">
     <div class="flex flex-col h-auto overflow-auto">
       <woot-modal-header :header-title="$t('ATTRIBUTES_MGMT.ADD.TITLE')" />
 

app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue

@@ -145,7 +145,7 @@ const tableHeaders = computed(() => {
         </tr>
       </tbody>
     </table>
-    <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
+    <woot-modal v-model:show="showEditPopup" :on-close="hideEditPopup">
       <EditAttribute
         :selected-attribute="selectedAttribute"
         :is-updating="uiFlags.isUpdating"
@@ -154,7 +154,7 @@ const tableHeaders = computed(() => {
     </woot-modal>
     <woot-confirm-delete-modal
       v-if="showDeletePopup"
-      :show.sync="showDeletePopup"
+      v-model:show="showDeletePopup"
       :title="confirmDeleteTitle"
       :message="$t('ATTRIBUTES_MGMT.DELETE.CONFIRM.MESSAGE')"
       :confirm-text="deleteConfirmText"

app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue

@@ -101,7 +101,7 @@ const onClickTabChange = index => {
     </template>
     <woot-modal
       v-if="showAddPopup"
-      :show.sync="showAddPopup"
+      v-model:show="showAddPopup"
       :on-close="hideAddPopup"
     >
       <AddAttribute

app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue

@@ -224,7 +224,7 @@ const tableHeaders = computed(() => {
     </template>
 
     <woot-modal
-      :show.sync="showAddPopup"
+      v-model:show="showAddPopup"
       size="medium"
       :on-close="hideAddPopup"
     >
@@ -236,7 +236,7 @@ const tableHeaders = computed(() => {
     </woot-modal>
 
     <woot-delete-modal
-      :show.sync="showDeleteConfirmationPopup"
+      v-model:show="showDeleteConfirmationPopup"
       :on-close="closeDeletePopup"
       :on-confirm="confirmDeletion"
       :title="$t('LABEL_MGMT.DELETE.CONFIRM.TITLE')"
@@ -247,7 +247,7 @@ const tableHeaders = computed(() => {
     />
 
     <woot-modal
-      :show.sync="showEditPopup"
+      v-model:show="showEditPopup"
       size="medium"
       :on-close="hideEditPopup"
     >

app/javascript/dashboard/routes/dashboard/settings/campaigns/Campaign.vue

@@ -81,14 +81,14 @@ export default {
       @edit="openEditPopup"
       @delete="openDeletePopup"
     />
-    <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
+    <woot-modal v-model:show="showEditPopup" :on-close="hideEditPopup">
       <EditCampaign
         :selected-campaign="selectedCampaign"
         @onClose="hideEditPopup"
       />
     </woot-modal>
     <woot-delete-modal
-      :show.sync="showDeleteConfirmationPopup"
+      v-model:show="showDeleteConfirmationPopup"
       :on-close="closeDeletePopup"
       :on-confirm="confirmDeletion"
       :title="$t('CAMPAIGN.DELETE.CONFIRM.TITLE')"

app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue

@@ -48,7 +48,7 @@ export default {
       {{ buttonText }}
     </woot-button>
     <Campaign />
-    <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
+    <woot-modal v-model:show="showAddPopup" :on-close="hideAddPopup">
       <AddCampaign @onClose="hideAddPopup" />
     </woot-modal>
   </div>

app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue

@@ -82,7 +82,7 @@ export default {
 </script>
 
 <template>
-  <Modal :show.sync="show" :on-close="onClose">
+  <Modal v-model:show="show" :on-close="onClose">
     <div class="flex flex-col h-auto overflow-auto">
       <woot-modal-header
         :header-title="$t('CANNED_MGMT.ADD.TITLE')"

app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue

@@ -89,7 +89,7 @@ export default {
 </script>
 
 <template>
-  <Modal :show.sync="show" :on-close="onClose">
+  <Modal v-model:show="show" :on-close="onClose">
     <div class="flex flex-col h-auto overflow-auto">
       <woot-modal-header :header-title="pageTitle" />
       <form class="flex flex-col w-full" @submit.prevent="editCannedResponse()">

app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue

@@ -214,11 +214,11 @@ const tableHeaders = computed(() => {
       </table>
     </div>
 
-    <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
+    <woot-modal v-model:show="showAddPopup" :on-close="hideAddPopup">
       <AddCanned :on-close="hideAddPopup" />
     </woot-modal>
 
-    <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
+    <woot-modal v-model:show="showEditPopup" :on-close="hideEditPopup">
       <EditCanned
         v-if="showEditPopup"
         :id="activeResponse.id"
@@ -229,7 +229,7 @@ const tableHeaders = computed(() => {
     </woot-modal>
 
     <woot-delete-modal
-      :show.sync="showDeleteConfirmationPopup"
+      v-model:show="showDeleteConfirmationPopup"
       :on-close="closeDeletePopup"
       :on-confirm="confirmDeletion"
       :title="$t('CANNED_MGMT.DELETE.CONFIRM.TITLE')"

app/javascript/dashboard/routes/dashboard/settings/customRoles/Index.vue

@@ -174,7 +174,7 @@ const confirmDeletion = () => {
     </template>
 
     <woot-modal
-      :show.sync="showCustomRoleModal"
+      v-model:show="showCustomRoleModal"
       :on-close="hideCustomRoleModal"
     >
       <CustomRoleModal
@@ -185,7 +185,7 @@ const confirmDeletion = () => {
     </woot-modal>
 
     <woot-delete-modal
-      :show.sync="showDeleteConfirmationPopup"
+      v-model:show="showDeleteConfirmationPopup"
       :on-close="closeDeletePopup"
       :on-confirm="confirmDeletion"
       :title="$t('CUSTOM_ROLE.DELETE.CONFIRM.TITLE')"

app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue

@@ -175,7 +175,7 @@ const openDelete = inbox => {
 
     <woot-confirm-delete-modal
       v-if="showDeletePopup"
-      :show.sync="showDeletePopup"
+      v-model:show="showDeletePopup"
       :title="$t('INBOX_MGMT.DELETE.CONFIRM.TITLE')"
       :message="confirmDeleteMessage"
       :confirm-text="deleteConfirmText"

app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/Index.vue

@@ -148,7 +148,7 @@ export default {
     />
 
     <woot-delete-modal
-      :show.sync="showDeleteConfirmationPopup"
+      v-model:show="showDeleteConfirmationPopup"
       :on-close="closeDeletePopup"
       :on-confirm="confirmDeletion"
       :title="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.DELETE.TITLE')"

app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue

@@ -116,7 +116,7 @@ export default {
       </div>
     </div>
     <woot-delete-modal
-      :show.sync="showDeleteConfirmationPopup"
+      v-model:show="showDeleteConfirmationPopup"
       :on-close="closeDeletePopup"
       :on-confirm="confirmDeletion"
       :title="

app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHooks.vue

@@ -135,12 +135,12 @@ export default {
       </div>
     </div>
 
-    <woot-modal :show.sync="showAddHookModal" :on-close="hideAddHookModal">
+    <woot-modal v-model:show="showAddHookModal" :on-close="hideAddHookModal">
       <NewHook :integration-id="integrationId" @close="hideAddHookModal" />
     </woot-modal>
 
     <woot-delete-modal
-      :show.sync="showDeleteConfirmationPopup"
+      v-model:show="showDeleteConfirmationPopup"
       :on-close="closeDeletePopup"
       :on-confirm="confirmDeletion"
       :title="deleteTitle"

app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue

@@ -138,11 +138,11 @@ export default {
         </tbody>
       </table>
     </template>
-    <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
+    <woot-modal v-model:show="showAddPopup" :on-close="hideAddPopup">
       <NewWebhook v-if="showAddPopup" :on-close="hideAddPopup" />
     </woot-modal>
 
-    <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
+    <woot-modal v-model:show="showEditPopup" :on-close="hideEditPopup">
       <EditWebhook
         v-if="showEditPopup"
         :id="selectedWebHook.id"
@@ -151,7 +151,7 @@ export default {
       />
     </woot-modal>
     <woot-delete-modal
-      :show.sync="showDeleteConfirmationPopup"
+      v-model:show="showDeleteConfirmationPopup"
       :on-close="closeDeletePopup"
       :on-confirm="confirmDeletion"
       :title="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.CONFIRM.TITLE')"

app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue

@@ -167,16 +167,16 @@ onBeforeMount(() => {
       </table>
     </template>
 
-    <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
+    <woot-modal v-model:show="showAddPopup" :on-close="hideAddPopup">
       <AddLabel @close="hideAddPopup" />
     </woot-modal>
 
-    <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
+    <woot-modal v-model:show="showEditPopup" :on-close="hideEditPopup">
       <EditLabel :selected-response="selectedLabel" @close="hideEditPopup" />
     </woot-modal>
 
     <woot-delete-modal
-      :show.sync="showDeleteConfirmationPopup"
+      v-model:show="showDeleteConfirmationPopup"
       :on-close="closeDeletePopup"
       :on-confirm="confirmDeletion"
       :title="$t('LABEL_MGMT.DELETE.CONFIRM.TITLE')"

app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue

@@ -107,7 +107,7 @@ const tableHeaders = computed(() => {
         </tbody>
       </table>
       <woot-delete-modal
-        :show.sync="showDeleteConfirmationPopup"
+        v-model:show="showDeleteConfirmationPopup"
         :on-close="closeDeletePopup"
         :on-confirm="confirmDeletion"
         :title="$t('LABEL_MGMT.DELETE.CONFIRM.TITLE')"

app/javascript/dashboard/routes/dashboard/settings/sla/Index.vue

@@ -148,12 +148,12 @@ export default {
         />
       </div>
 
-      <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
+      <woot-modal v-model:show="showAddPopup" :on-close="hideAddPopup">
         <AddSLA @close="hideAddPopup" />
       </woot-modal>
 
       <woot-delete-modal
-        :show.sync="showDeleteConfirmationPopup"
+        v-model:show="showDeleteConfirmationPopup"
         :on-close="closeDeletePopup"
         :on-confirm="confirmDeletion"
         :title="$t('SLA.DELETE.CONFIRM.TITLE')"

app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue

@@ -144,7 +144,7 @@ const confirmPlaceHolderText = computed(() =>
     </div>
     <woot-confirm-delete-modal
       v-if="showDeletePopup"
-      :show.sync="showDeletePopup"
+      v-model:show="showDeletePopup"
       :title="confirmDeleteTitle"
       :message="$t('TEAMS_SETTINGS.DELETE.CONFIRM.MESSAGE')"
       :confirm-text="deleteConfirmText"

app/javascript/portal/components/PublicArticleSearch.vue

@@ -9,6 +9,7 @@ export default {
     PublicSearchInput,
     SearchSuggestions,
   },
+  emits: ['input', 'blur'],
   data() {
     return {
       searchTerm: '',

app/javascript/shared/components/GreetingsEditor.vue

@@ -25,6 +25,7 @@ export default {
       default: '',
     },
   },
+  emits: ['input'],
   data() {
     return {
       greetingsMessage: this.value,

app/javascript/shared/components/ResizableTextArea.vue

@@ -40,6 +40,14 @@ export default {
       default: false,
     },
   },
+  emits: [
+    'input',
+    'update:modelValue',
+    'typingOn',
+    'typingOff',
+    'focus',
+    'blur',
+  ],
   data() {
     return {
       typingIndicator: createTypingIndicator(

app/javascript/shared/components/ui/label/LabelDropdown.vue

@@ -170,7 +170,7 @@ export default {
           </woot-button>
 
           <woot-modal
-            :show.sync="createModalVisible"
+            v-model:show="createModalVisible"
             :on-close="hideCreateModal"
           >
             <AddLabelModal

app/javascript/v3/components/Form/RadioTags.vue

@@ -30,6 +30,7 @@ export default {
       default: '',
     },
   },
+  emits: ['input'],
 };
 </script>
 

app/javascript/v3/components/Form/Select.vue

@@ -42,6 +42,7 @@ export default {
       default: '',
     },
   },
+  emits: ['input'],
   methods: {
     onInput(e) {
       this.$emit('input', e.target.value);

app/javascript/v3/components/Form/Switch.vue

@@ -3,6 +3,7 @@ export default {
   props: {
     value: { type: Boolean, default: false },
   },
+  emits: ['input'],
   methods: {
     onClick() {
       this.$emit('input', !this.value);

app/javascript/v3/components/Form/Textarea.vue

@@ -46,6 +46,7 @@ export default {
       default: '',
     },
   },
+  emits: ['input'],
   methods: {
     onInput(e) {
       this.$emit('input', e.target.value);

app/javascript/widget/components/Form/Input.vue

@@ -27,6 +27,7 @@ export default {
       default: '',
     },
   },
+  emits: ['input'],
   setup() {
     const { getThemeClass } = useDarkMode();
     return { getThemeClass };

app/javascript/widget/components/Form/TextArea.vue

@@ -19,6 +19,7 @@ export default {
       default: '',
     },
   },
+  emits: ['input'],
   setup() {
     const { getThemeClass } = useDarkMode();
     return { getThemeClass };