feat: Remove the usage of clickAway mixin with directive (#9323)

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

@@ -28,7 +28,6 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import { VeTable } from 'vue-easytable';
 import { getCountryFlag } from 'dashboard/helper/flag';
 
@@ -45,7 +44,7 @@ export default {
     Spinner,
     VeTable,
   },
-  mixins: [clickaway, timeMixin, rtlMixin],
+  mixins: [timeMixin, rtlMixin],
   props: {
     contacts: {
       type: Array,

app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue

@@ -78,7 +78,6 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import Spinner from 'shared/components/Spinner.vue';
 import alertMixin from 'shared/mixins/alertMixin';
 import { mapGetters } from 'vuex';
@@ -92,7 +91,7 @@ export default {
     ThumbnailGroup,
     MultiselectDropdownItems,
   },
-  mixins: [alertMixin, agentMixin, clickaway],
+  mixins: [alertMixin, agentMixin],
   props: {
     conversationId: {
       type: [Number, String],

app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue

@@ -34,7 +34,6 @@
 
 <script>
 import alertMixin from 'shared/mixins/alertMixin';
-import { mixin as clickaway } from 'vue-clickaway';
 import MacroPreview from './MacroPreview.vue';
 import { CONVERSATION_EVENTS } from '../../../../helper/AnalyticsHelper/events';
 
@@ -42,7 +41,7 @@ export default {
   components: {
     MacroPreview,
   },
-  mixins: [alertMixin, clickaway],
+  mixins: [alertMixin],
   props: {
     macro: {
       type: Object,

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

@@ -166,7 +166,6 @@
   </div>
 </template>
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import timeMixin from 'dashboard/mixins/time';
 import ContactInfoRow from './ContactInfoRow.vue';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
@@ -195,7 +194,7 @@ export default {
     NewConversation,
     ContactMergeModal,
   },
-  mixins: [alertMixin, adminMixin, clickaway, timeMixin],
+  mixins: [alertMixin, adminMixin, timeMixin],
   props: {
     contact: {
       type: Object,

app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue

@@ -48,7 +48,6 @@ import { mapGetters } from 'vuex';
 import Spinner from 'shared/components/Spinner.vue';
 import LabelDropdown from 'shared/components/ui/label/LabelDropdown.vue';
 import AddLabel from 'shared/components/ui/dropdown/AddLabel.vue';
-import { mixin as clickaway } from 'vue-clickaway';
 import adminMixin from 'dashboard/mixins/isAdmin';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 import conversationLabelMixin from 'dashboard/mixins/conversation/labelMixin';
@@ -60,12 +59,7 @@ export default {
     AddLabel,
   },
 
-  mixins: [
-    clickaway,
-    conversationLabelMixin,
-    adminMixin,
-    keyboardEventListenerMixins,
-  ],
+  mixins: [conversationLabelMixin, adminMixin, keyboardEventListenerMixins],
   props: {
     conversationId: {
       type: Number,

app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue

@@ -33,7 +33,6 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import { mapGetters } from 'vuex';
 import timeMixin from '../../../../mixins/time';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
@@ -50,7 +49,7 @@ export default {
       },
     },
   },
-  mixins: [timeMixin, messageFormatterMixin, clickaway],
+  mixins: [timeMixin, messageFormatterMixin],
   props: {
     isOnExpandedLayout: {
       type: Boolean,

app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue

@@ -34,7 +34,6 @@
 
 <script>
 import { debounce } from '@chatwoot/utils';
-import { mixin as clickaway } from 'vue-clickaway';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 
 import SearchHeader from './Header.vue';
@@ -52,7 +51,7 @@ export default {
     SearchResults,
     ArticleView,
   },
-  mixins: [clickaway, portalMixin, alertMixin, keyboardEventListenerMixins],
+  mixins: [portalMixin, alertMixin, keyboardEventListenerMixins],
   props: {
     selectedPortalSlug: {
       type: String,

app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue

@@ -138,8 +138,6 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
-
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
 import MultiselectDropdownItems from 'shared/components/ui/MultiselectDropdownItems.vue';
@@ -152,7 +150,6 @@ export default {
     WootDropdownMenu,
     MultiselectDropdownItems,
   },
-  mixins: [clickaway],
   props: {
     headerTitle: {
       type: String,

app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue

@@ -109,14 +109,13 @@
 
 <script>
 import alertMixin from 'shared/mixins/alertMixin';
-import { mixin as clickaway } from 'vue-clickaway';
 import wootConstants from 'dashboard/constants/globals';
 import { PORTALS_EVENTS } from '../../../../../helper/AnalyticsHelper/events';
 
 const { ARTICLE_STATUS_TYPES } = wootConstants;
 
 export default {
-  mixins: [alertMixin, clickaway],
+  mixins: [alertMixin],
   props: {
     isSidebarOpen: {
       type: Boolean,

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

@@ -47,13 +47,11 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import PortalSwitch from './PortalSwitch.vue';
 export default {
   components: {
     PortalSwitch,
   },
-  mixins: [clickaway],
   props: {
     portals: {
       type: Array,

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

@@ -36,13 +36,10 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
-
 const EmojiInput = () => import('shared/components/emoji/EmojiInput');
 
 export default {
   components: { EmojiInput },
-  mixins: [clickaway],
   props: {
     label: {
       type: String,

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

@@ -57,7 +57,6 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import InboxOptionMenu from './InboxOptionMenu.vue';
 import { INBOX_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 import InboxDisplayMenu from './InboxDisplayMenu.vue';
@@ -68,7 +67,7 @@ export default {
     InboxOptionMenu,
     InboxDisplayMenu,
   },
-  mixins: [clickaway, alertMixin],
+  mixins: [alertMixin],
   props: {
     isContextMenuOpen: {
       type: Boolean,

app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue

@@ -115,7 +115,6 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import { mixin as clickaway } from 'vue-clickaway';
 import rtlMixin from 'shared/mixins/rtlMixin';
 import NotificationPanelList from './NotificationPanelList.vue';
 
@@ -125,7 +124,7 @@ export default {
   components: {
     NotificationPanelList,
   },
-  mixins: [clickaway, rtlMixin],
+  mixins: [rtlMixin],
   data() {
     return {
       pageSize: 15,

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

@@ -21,7 +21,6 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import Spinner from 'shared/components/Spinner.vue';
 import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
 import campaignMixin from 'shared/mixins/campaignMixin';
@@ -34,7 +33,7 @@ export default {
     CampaignCard,
   },
 
-  mixins: [clickaway, campaignMixin],
+  mixins: [campaignMixin],
 
   props: {
     campaigns: {

app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAViewDetails.vue

@@ -22,14 +22,11 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import SLAPopoverCard from 'dashboard/components/widgets/conversation/components/SLAPopoverCard.vue';
 export default {
   components: {
     SLAPopoverCard,
   },
-  mixins: [clickaway],
-
   props: {
     slaEvents: {
       type: Array,