Disable VePagination and Click away

app/javascript/dashboard/components/buttons/ResolveAction.vue

@@ -111,7 +111,7 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import { mixin as clickaway } from 'vue-clickaway';
+// import { mixin as clickaway } from 'vue-clickaway';
 import alertMixin from 'shared/mixins/alertMixin';
 import snoozeTimesMixin from 'dashboard/mixins/conversation/snoozeTimesMixin.js';
 import eventListenerMixins from 'shared/mixins/eventListenerMixins';
@@ -140,7 +140,7 @@ export default {
     WootDropdownSubMenu,
     WootDropdownDivider,
   },
-  mixins: [clickaway, alertMixin, eventListenerMixins, snoozeTimesMixin],
+  mixins: [alertMixin, eventListenerMixins, snoozeTimesMixin],
   props: { conversationId: { type: [String, Number], required: true } },
   data() {
     return {

app/javascript/dashboard/components/layout/AvailabilityStatus.vue

@@ -23,7 +23,7 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import { mixin as clickaway } from 'vue-clickaway';
+// import { mixin as clickaway } from 'vue-clickaway';
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu';
 import WootDropdownHeader from 'shared/components/ui/dropdown/DropdownHeader';
@@ -41,7 +41,7 @@ export default {
     AvailabilityStatusBadge,
   },
 
-  mixins: [clickaway],
+  mixins: [],
 
   data() {
     return {

app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue

@@ -78,7 +78,7 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
+// import { mixin as clickaway } from 'vue-clickaway';
 import { mapGetters } from 'vuex';
 import Auth from '../../../api/auth';
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem';
@@ -91,7 +91,7 @@ export default {
     WootDropdownItem,
     AvailabilityStatus,
   },
-  mixins: [clickaway],
+  mixins: [],
   props: {
     show: {
       type: Boolean,

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

@@ -18,13 +18,13 @@
 
 <script>
 import { Chrome } from 'vue-color';
-import { mixin as clickaway } from 'vue-clickaway';
+// import { mixin as clickaway } from 'vue-clickaway';
 
 export default {
   components: {
     Chrome,
   },
-  mixins: [clickaway],
+  mixins: [],
   props: {
     value: {
       type: String,

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

@@ -31,7 +31,7 @@
 <script>
 import AddLabel from 'shared/components/ui/dropdown/AddLabel';
 import LabelDropdown from 'shared/components/ui/label/LabelDropdown';
-import { mixin as clickaway } from 'vue-clickaway';
+// import { mixin as clickaway } from 'vue-clickaway';
 
 export default {
   components: {
@@ -39,7 +39,7 @@ export default {
     LabelDropdown,
   },
 
-  mixins: [clickaway],
+  mixins: [],
 
   props: {
     allLabels: {

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

@@ -37,7 +37,7 @@
 </template>
 <script>
 import { mapGetters } from 'vuex';
-import { mixin as clickaway } from 'vue-clickaway';
+// import { mixin as clickaway } from 'vue-clickaway';
 import alertMixin from 'shared/mixins/alertMixin';
 import EmailTranscriptModal from './EmailTranscriptModal';
 import ResolveAction from '../../buttons/ResolveAction';
@@ -52,7 +52,7 @@ export default {
     EmailTranscriptModal,
     ResolveAction,
   },
-  mixins: [alertMixin, clickaway],
+  mixins: [alertMixin],
   data() {
     return {
       showEmailActionsModal: false,

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

@@ -128,7 +128,7 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import { mixin as clickaway } from 'vue-clickaway';
+// import { mixin as clickaway } from 'vue-clickaway';
 import alertMixin from 'shared/mixins/alertMixin';
 
 import EmojiInput from 'shared/components/emoji/EmojiInput';
@@ -174,7 +174,7 @@ export default {
     WhatsappTemplates,
   },
   mixins: [
-    clickaway,
+    // clickaway,
     inboxMixin,
     uiSettingsMixin,
     alertMixin,

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

@@ -95,14 +95,14 @@
 import { mapGetters } from 'vuex';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import Spinner from 'shared/components/Spinner';
-import { mixin as clickaway } from 'vue-clickaway';
+// import { mixin as clickaway } from 'vue-clickaway';
 
 export default {
   components: {
     Thumbnail,
     Spinner,
   },
-  mixins: [clickaway],
+  mixins: [],
   props: {
     selectedInboxes: {
       type: Array,

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

@@ -73,11 +73,11 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
+// import { mixin as clickaway } from 'vue-clickaway';
 import { mapGetters } from 'vuex';
 
 export default {
-  mixins: [clickaway],
+  mixins: [],
   data() {
     return {
       query: '',

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

@@ -42,7 +42,7 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
+// 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';
 export default {
@@ -50,7 +50,7 @@ export default {
     WootDropdownItem,
     WootDropdownMenu,
   },
-  mixins: [clickaway],
+  mixins: [],
   props: {
     selectedInboxes: {
       type: Array,

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

@@ -87,11 +87,11 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
+// import { mixin as clickaway } from 'vue-clickaway';
 import { SHORTCUT_KEYS } from './constants';
 
 export default {
-  mixins: [clickaway],
+  mixins: [],
   data() {
     return {
       shortcutKeys: SHORTCUT_KEYS,

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

@@ -40,7 +40,7 @@
   </div>
 </template>
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
+// import { mixin as clickaway } from 'vue-clickaway';
 
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu';
@@ -50,7 +50,7 @@ export default {
     WootDropdownMenu,
     WootDropdownItem,
   },
-  mixins: [clickaway],
+  mixins: [],
   props: {
     isOpen: {
       type: Boolean,

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

@@ -1,15 +1,5 @@
 <template>
   <section class="contacts-table-wrap">
-    <ve-table
-      :fixed-header="true"
-      max-height="calc(100vh - 11.4rem)"
-      scroll-width="187rem"
-      :columns="columns"
-      :table-data="tableData"
-      :border-around="false"
-      :sort-option="sortOption"
-    />
-
     <empty-state
       v-if="showSearchEmptyState"
       :title="$t('CONTACTS_PAGE.LIST.404')"
@@ -26,8 +16,8 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
+// import { mixin as clickaway } from 'vue-clickaway';
-import { VeTable } from 'vue-easytable';
+// import { VeTable } from 'vue-easytable';
 import { getCountryFlag } from 'dashboard/helper/flag';
 
 import Spinner from 'shared/components/Spinner.vue';
@@ -40,9 +30,9 @@ export default {
   components: {
     EmptyState,
     Spinner,
-    VeTable,
+    // VeTable,
   },
-  mixins: [clickaway, timeMixin],
+  mixins: [timeMixin],
   props: {
     contacts: {
       type: Array,

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

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

app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributeSelector.vue

@@ -35,14 +35,14 @@
 import CustomAttributeDropDown from './CustomAttributeDropDown.vue';
 import alertMixin from 'shared/mixins/alertMixin';
 import attributeMixin from 'dashboard/mixins/attributeMixin';
-import { mixin as clickaway } from 'vue-clickaway';
+// import { mixin as clickaway } from 'vue-clickaway';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 
 export default {
   components: {
     CustomAttributeDropDown,
   },
-  mixins: [clickaway, alertMixin, attributeMixin],
+  mixins: [alertMixin, attributeMixin],
   props: {
     attributeType: {
       type: String,

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

@@ -46,7 +46,7 @@ import { mapGetters } from 'vuex';
 import Spinner from 'shared/components/Spinner';
 import LabelDropdown from 'shared/components/ui/label/LabelDropdown';
 import AddLabel from 'shared/components/ui/dropdown/AddLabel';
-import { mixin as clickaway } from 'vue-clickaway';
+// import { mixin as clickaway } from 'vue-clickaway';
 import conversationLabelMixin from 'dashboard/mixins/conversation/labelMixin';
 
 export default {
@@ -56,7 +56,7 @@ export default {
     AddLabel,
   },
 
-  mixins: [clickaway, conversationLabelMixin],
+  mixins: [conversationLabelMixin],
   props: {
     conversationId: {
       type: Number,

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

@@ -54,7 +54,7 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
+// import { mixin as clickaway } from 'vue-clickaway';
 import { mapGetters } from 'vuex';
 import timeMixin from '../../../../mixins/time';
 import ResultItem from './ResultItem';
@@ -74,7 +74,7 @@ export default {
     },
   },
 
-  mixins: [timeMixin, messageFormatterMixin, clickaway],
+  mixins: [timeMixin, messageFormatterMixin],
 
   props: {
     isOnExpandedLayout: {

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

@@ -92,7 +92,7 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
+// 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';
@@ -103,7 +103,7 @@ export default {
     WootDropdownItem,
     WootDropdownMenu,
   },
-  mixins: [clickaway],
+  mixins: [],
   props: {
     headerTitle: {
       type: String,

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

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

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

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

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

@@ -1,13 +1,7 @@
 <template>
   <section class="campaigns-table-wrap">
     <empty-state v-if="showEmptyResult" :title="emptyMessage" />
-    <ve-table
+
-      v-else
-      :columns="columns"
-      scroll-width="190rem"
-      :table-data="tableData"
-      :border-around="true"
-    />
     <div v-if="isLoading" class="campaign--loader">
       <spinner />
       <span>{{ $t('CAMPAIGN.LIST.LOADING_MESSAGE') }}</span>
@@ -16,8 +10,8 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
+// import { mixin as clickaway } from 'vue-clickaway';
-import { VeTable } from 'vue-easytable';
+// import { VeTable } from 'vue-easytable';
 import Spinner from 'shared/components/Spinner.vue';
 import Label from 'dashboard/components/ui/Label';
 import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
@@ -32,10 +26,10 @@ export default {
   components: {
     EmptyState,
     Spinner,
-    VeTable,
+    // VeTable,
   },
 
-  mixins: [clickaway, timeMixin, campaignMixin, messageFormatterMixin],
+  mixins: [timeMixin, campaignMixin, messageFormatterMixin],
 
   props: {
     campaigns: {

app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue

@@ -1,27 +1,12 @@
 <template>
   <div class="csat--table-container">
-    <ve-table
-      max-height="calc(100vh - 35rem)"
-      :fixed-header="true"
-      :columns="columns"
-      :table-data="tableData"
-    />
     <div v-show="!tableData.length" class="csat--empty-records">
       {{ $t('CSAT_REPORTS.NO_RECORDS') }}
     </div>
-    <div v-if="metrics.totalResponseCount" class="table-pagination">
-      <ve-pagination
-        :total="metrics.totalResponseCount"
-        :page-index="pageIndex"
-        :page-size="25"
-        :page-size-option="[25]"
-        @on-page-number-change="onPageNumberChange"
-      />
-    </div>
   </div>
 </template>
 <script>
-import { VeTable, VePagination } from 'vue-easytable';
+// import { VeTable, VePagination } from 'vue-easytable';
 import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName';
 import { CSAT_RATINGS } from 'shared/constants/messages';
 import { mapGetters } from 'vuex';
@@ -29,8 +14,8 @@ import timeMixin from 'dashboard/mixins/time';
 
 export default {
   components: {
-    VeTable,
+    // VeTable,
-    VePagination,
+    // VePagination,
   },
   mixins: [timeMixin],
   props: {

app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue

@@ -1,11 +1,5 @@
 <template>
   <div class="agent-table-container">
-    <ve-table
-      max-height="calc(100vh - 35rem)"
-      :fixed-header="true"
-      :columns="columns"
-      :table-data="tableData"
-    />
     <div v-if="isLoading" class="agents-loader">
       <spinner />
       <span>{{
@@ -16,20 +10,12 @@
       v-else-if="!isLoading && !agentMetrics.length"
       :title="$t('OVERVIEW_REPORTS.AGENT_CONVERSATIONS.NO_AGENTS')"
     />
-    <div v-if="agentMetrics.length > 0" class="table-pagination">
+    <div v-if="agentMetrics.length > 0" class="table-pagination" />
-      <ve-pagination
-        :total="agents.length"
-        :page-index="pageIndex"
-        :page-size="25"
-        :page-size-option="[25]"
-        @on-page-number-change="onPageNumberChange"
-      />
-    </div>
   </div>
 </template>
 
 <script>
-import { VeTable, VePagination } from 'vue-easytable';
+// import { VeTable, VePagination } from 'vue-easytable';
 import Spinner from 'shared/components/Spinner.vue';
 import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
@@ -39,8 +25,8 @@ export default {
   components: {
     EmptyState,
     Spinner,
-    VeTable,
+    // VeTable,
-    VePagination,
+    // VePagination,
   },
   props: {
     agents: {

app/javascript/packs/application.js

@@ -30,7 +30,7 @@ import router, { initalizeRouter } from '../dashboard/routes';
 import store from '../dashboard/store';
 import constants from '../dashboard/constants';
 import * as Sentry from '@sentry/vue';
-import 'vue-easytable/libs/theme-default/index.css';
+// import 'vue-easytable/libs/theme-default/index.css';
 import { Integrations } from '@sentry/tracing';
 import posthog from 'posthog-js';
 import {

app/javascript/shared/components/ui/MultiselectDropdown.vue

@@ -60,13 +60,13 @@
 <script>
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import MultiselectDropdownItems from 'shared/components/ui/MultiselectDropdownItems';
-import { mixin as clickaway } from 'vue-clickaway';
+// import { mixin as clickaway } from 'vue-clickaway';
 export default {
   components: {
     Thumbnail,
     MultiselectDropdownItems,
   },
-  mixins: [clickaway],
+  mixins: [],
   props: {
     options: {
       type: Array,

app/javascript/widget/components/ChatInputWrap.vue

@@ -48,7 +48,7 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import { mixin as clickaway } from 'vue-clickaway';
+// import { mixin as clickaway } from 'vue-clickaway';
 
 import ChatAttachmentButton from 'widget/components/ChatAttachment.vue';
 import ChatSendButton from 'widget/components/ChatSendButton.vue';
@@ -67,7 +67,7 @@ export default {
     FluentIcon,
     ResizableTextArea,
   },
-  mixins: [clickaway, configMixin, darkModeMixin],
+  mixins: [configMixin, darkModeMixin],
   props: {
     onSendMessage: {
       type: Function,

app/javascript/widget/components/layouts/ViewWithHeader.vue

@@ -27,7 +27,7 @@
           :show-popout-button="appConfig.showPopoutButton"
         />
         <chat-header
-          v-if="isHeaderCollapsed"
+          v-else-if="isHeaderCollapsed"
           :title="channelConfig.websiteName"
           :avatar-url="channelConfig.avatarUrl"
           :show-popout-button="appConfig.showPopoutButton"

config/webpack/environment.js

@@ -2,7 +2,13 @@ const { environment } = require('@rails/webpacker');
 const { VueLoaderPlugin } = require('vue-loader');
 const resolve = require('./resolve');
 const vue = require('./loaders/vue');
-
+environment.config.merge({
+  resolve: {
+    alias: {
+      vue: '@vue/compat',
+    },
+  },
+});
 environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin());
 environment.loaders.prepend('vue', vue);
 

config/webpack/loaders/vue.js

@@ -1,6 +1,15 @@
 module.exports = {
   test: /\.vue(\.erb)?$/,
-  use: [{
+  use: [
-    loader: 'vue-loader'
+    {
-  }]
+      loader: 'vue-loader',
-}
+      options: {
+        compilerOptions: {
+          compatConfig: {
+            MODE: 2,
+          },
+        },
+      },
+    },
+  ],
+};

package.json

@@ -53,18 +53,16 @@
     "url-loader": "^2.0.0",
     "v-tooltip": "~2.1.3",
     "videojs-record": "^4.5.0",
-    "vue": "2.6.12",
+    "vue": "^3.1.0",
+    "@vue/compat": "^3.1.0",
     "vue-chartjs": "3.5.1",
-    "vue-clickaway": "~2.1.0",
     "vue-color": "2.8.1",
     "vue-dompurify-html": "^2.5.2",
-    "vue-easytable": "2.5.5",
     "vue-i18n": "8.24.3",
     "vue-letter": "^0.1.3",
-    "vue-loader": "15.9.6",
+    "vue-loader": "16.0.0",
     "vue-multiselect": "~2.1.6",
     "vue-router": "~3.5.2",
-    "vue-template-compiler": "2.6.12",
     "vue-upload-component": "2.8.22",
     "vue2-datepicker": "^3.9.1",
     "vuedraggable": "^2.24.3",
@@ -74,6 +72,7 @@
     "wavesurfer.js": "^6.0.4"
   },
   "devDependencies": {
+    "@vue/compiler-sfc": "^3.1.0",
     "@babel/core": "7.13.16",
     "@babel/plugin-proposal-class-properties": "7.13.0",
     "@babel/preset-env": "7.13.15",