Replaces all instances for old clickaway

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

@@ -45,7 +45,7 @@
     </div>
     <div
       v-if="showActionsDropdown"
-      v-on-clickaway="closeDropdown"
+      v-click-away="closeDropdown"
       class="dropdown-pane dropdown-pane--open"
     >
       <woot-dropdown-menu>
@@ -111,7 +111,6 @@
 
 <script>
 import { mapGetters } from 'vuex';
-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 +139,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 WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu';
 import WootDropdownHeader from 'shared/components/ui/dropdown/DropdownHeader';
@@ -40,9 +40,6 @@ export default {
     WootDropdownItem,
     AvailabilityStatusBadge,
   },
-
-  mixins: [clickaway],
-
   data() {
     return {
       isStatusMenuOpened: false,

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

@@ -2,7 +2,7 @@
   <transition name="menu-slide">
     <div
       v-if="show"
-      v-on-clickaway="onClickAway"
+      v-click-away="onClickAway"
       class="dropdown-pane"
       :class="{ 'dropdown-pane--open': show }"
     >
@@ -78,7 +78,6 @@
 </template>
 
 <script>
-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 +90,6 @@ export default {
     WootDropdownItem,
     AvailabilityStatus,
   },
-  mixins: [clickaway],
   props: {
     show: {
       type: Boolean,

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

@@ -7,7 +7,7 @@
     />
     <chrome
       v-if="isPickerOpen"
-      v-on-clickaway="closeTogglePicker"
+      v-click-away="closeTogglePicker"
       :disable-alpha="true"
       :value="value"
       class="colorpicker--chrome"
@@ -18,13 +18,11 @@
 
 <script>
 import { Chrome } from 'vue-color';
-import { mixin as clickaway } from 'vue-clickaway';
 
 export default {
   components: {
     Chrome,
   },
-  mixins: [clickaway],
   props: {
     value: {
       type: String,

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

@@ -1,5 +1,5 @@
 <template>
-  <div v-on-clickaway="closeDropdownLabel" class="label-wrap">
+  <div v-click-away="closeDropdownLabel" class="label-wrap">
     <add-label @add="toggleLabels" />
     <woot-label
       v-for="label in savedLabels"
@@ -31,7 +31,6 @@
 <script>
 import AddLabel from 'shared/components/ui/dropdown/AddLabel';
 import LabelDropdown from 'shared/components/ui/label/LabelDropdown';
-import { mixin as clickaway } from 'vue-clickaway';
 
 export default {
   components: {
@@ -39,8 +38,6 @@ export default {
     LabelDropdown,
   },
 
-  mixins: [clickaway],
-
   props: {
     allLabels: {
       type: Array,

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 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

@@ -19,13 +19,13 @@
     <div class="reply-box__top">
       <canned-response
         v-if="showMentions && hasSlashCommand"
-        v-on-clickaway="hideMentions"
+        v-click-away="hideMentions"
         :search-key="mentionSearchKey"
         @click="replaceText"
       />
       <emoji-input
         v-if="showEmojiPicker"
-        v-on-clickaway="hideEmojiPicker"
+        v-click-away="hideEmojiPicker"
         :on-click="emojiOnClick"
       />
       <reply-email-head
@@ -128,7 +128,7 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import { mixin as clickaway } from 'vue-clickaway';
+
 import alertMixin from 'shared/mixins/alertMixin';
 
 import EmojiInput from 'shared/components/emoji/EmojiInput';
@@ -173,13 +173,7 @@ export default {
     Banner,
     WhatsappTemplates,
   },
-  mixins: [
-    clickaway,
-    inboxMixin,
-    uiSettingsMixin,
-    alertMixin,
-    messageFormatterMixin,
-  ],
+  mixins: [inboxMixin, uiSettingsMixin, alertMixin, messageFormatterMixin],
   props: {
     selectedTweet: {
       type: [Object, String],

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

@@ -95,14 +95,12 @@
 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';
 
 export default {
   components: {
     Thumbnail,
     Spinner,
   },
-  mixins: [clickaway],
   props: {
     selectedInboxes: {
       type: Array,

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

@@ -1,5 +1,5 @@
 <template>
-  <div v-on-clickaway="onClose" class="labels-container">
+  <div v-click-away="onClose" class="labels-container">
     <div class="triangle">
       <svg height="12" viewBox="0 0 24 12" width="24">
         <path
@@ -73,11 +73,9 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import { mapGetters } from 'vuex';
 
 export default {
-  mixins: [clickaway],
   data() {
     return {
       query: '',

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

@@ -1,5 +1,5 @@
 <template>
-  <div v-on-clickaway="onClose" class="actions-container">
+  <div v-click-away="onClose" class="actions-container">
     <div class="triangle">
       <svg height="12" viewBox="0 0 24 12" width="24">
         <path
@@ -42,7 +42,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';
 export default {
@@ -50,7 +49,7 @@ export default {
     WootDropdownItem,
     WootDropdownMenu,
   },
-  mixins: [clickaway],
+
   props: {
     selectedInboxes: {
       type: Array,

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

@@ -1,7 +1,7 @@
 <template>
   <transition name="slide-up">
     <div class="modal-mask">
-      <div v-on-clickaway="() => $emit('clickaway')" class="modal-container">
+      <div v-click-away="() => $emit('clickaway')" class="modal-container">
         <div class="header-wrap">
           <div class="title-shortcut-key__wrap">
             <h2 class="page-title">
@@ -87,11 +87,9 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import { SHORTCUT_KEYS } from './constants';
 
 export default {
-  mixins: [clickaway],
   data() {
     return {
       shortcutKeys: SHORTCUT_KEYS,

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

@@ -9,7 +9,7 @@
     />
     <div
       v-if="isOpen"
-      v-on-clickaway="handleContextMenuClick"
+      v-click-away="handleContextMenuClick"
       class="dropdown-pane dropdown-pane--open"
       :class="`dropdown-pane--${menuPosition}`"
     >
@@ -40,8 +40,6 @@
   </div>
 </template>
 <script>
-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 +48,7 @@ export default {
     WootDropdownMenu,
     WootDropdownItem,
   },
-  mixins: [clickaway],
+
   props: {
     isOpen: {
       type: Boolean,

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

@@ -26,8 +26,7 @@
 </template>
 
 <script>
-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 +39,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,8 +138,6 @@
   </div>
 </template>
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
-
 import ContactInfoRow from './ContactInfoRow';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import SocialIcons from './SocialIcons';
@@ -161,7 +159,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

@@ -1,7 +1,7 @@
 <template>
   <div class="custom-attribute--selector">
     <div
-      v-on-clickaway="closeDropdown"
+      v-click-away="closeDropdown"
       class="label-wrap"
       @keyup.esc="closeDropdown"
     >
@@ -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 { 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

@@ -5,7 +5,7 @@
       class="contact-conversation--list"
     >
       <div
-        v-on-clickaway="closeDropdownLabel"
+        v-click-away="closeDropdownLabel"
         class="label-wrap"
         @keyup.esc="closeDropdownLabel"
       >
@@ -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 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

@@ -1,5 +1,5 @@
 <template>
-  <div v-on-clickaway="closeSearch" class="search-wrap">
+  <div v-click-away="closeSearch" class="search-wrap">
     <div class="search" :class="{ 'is-active': showSearchBox }">
       <woot-sidemenu-icon />
       <div class="icon">
@@ -54,7 +54,6 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import { mapGetters } from 'vuex';
 import timeMixin from '../../../../mixins/time';
 import ResultItem from './ResultItem';
@@ -74,7 +73,7 @@ export default {
     },
   },
 
-  mixins: [timeMixin, messageFormatterMixin, clickaway],
+  mixins: [timeMixin, messageFormatterMixin],
 
   props: {
     isOnExpandedLayout: {

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

@@ -34,7 +34,7 @@
       </woot-button>
       <div
         v-if="showSortByDropdown"
-        v-on-clickaway="closeDropdown"
+        v-click-away="closeDropdown"
         class="dropdown-pane dropdown-pane--open"
       >
         <woot-dropdown-menu>
@@ -92,8 +92,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 FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
@@ -103,7 +101,7 @@ export default {
     WootDropdownItem,
     WootDropdownMenu,
   },
-  mixins: [clickaway],
+
   props: {
     headerTitle: {
       type: String,

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

@@ -1,5 +1,5 @@
 <template>
-  <div v-on-clickaway="closePortalPopover" class="portal-popover__container">
+  <div v-click-away="closePortalPopover" class="portal-popover__container">
     <header>
       <div class="actions">
         <h2 class="block-title">
@@ -40,13 +40,12 @@
 </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/notifications/components/NotificationPanel.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="modal-mask">
     <div
-      v-on-clickaway="closeNotificationPanel"
+      v-click-away="closeNotificationPanel"
       class="notification-wrap flex-space-between"
     >
       <div class="header-wrap w-full flex-space-between">
@@ -100,7 +100,6 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import { mixin as clickaway } from 'vue-clickaway';
 
 import NotificationPanelList from './NotificationPanelList';
 
@@ -108,7 +107,7 @@ export default {
   components: {
     NotificationPanelList,
   },
-  mixins: [clickaway],
+
   data() {
     return {
       pageSize: 15,

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

@@ -16,8 +16,7 @@
 </template>
 
 <script>
-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 +31,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

@@ -21,7 +21,7 @@
   </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 +29,8 @@ import timeMixin from 'dashboard/mixins/time';
 
 export default {
   components: {
-    VeTable,
-    VePagination,
+    // VeTable,
+    // VePagination,
   },
   mixins: [timeMixin],
   props: {

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

@@ -29,7 +29,7 @@
 </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 +39,8 @@ export default {
   components: {
     EmptyState,
     Spinner,
-    VeTable,
-    VePagination,
+    // VeTable,
+    // VePagination,
   },
   props: {
     agents: {

app/javascript/dashboard/routes/login/Login.vue

@@ -16,32 +16,25 @@
       <div v-if="!email" class="small-12 medium-4 column">
         <form class="login-box column align-self-top" @submit.prevent="login()">
           <div class="column log-in-form">
-            <label :class="{ error: $v.credentials.email.$error }">
+            <label>
               {{ $t('LOGIN.EMAIL.LABEL') }}
               <input
                 v-model.trim="credentials.email"
                 type="text"
                 data-testid="email_input"
                 :placeholder="$t('LOGIN.EMAIL.PLACEHOLDER')"
-                @input="$v.credentials.email.$touch"
               />
             </label>
-            <label :class="{ error: $v.credentials.password.$error }">
+            <label>
               {{ $t('LOGIN.PASSWORD.LABEL') }}
               <input
                 v-model.trim="credentials.password"
                 type="password"
                 data-testid="password_input"
                 :placeholder="$t('LOGIN.PASSWORD.PLACEHOLDER')"
-                @input="$v.credentials.password.$touch"
               />
             </label>
             <woot-submit-button
-              :disabled="
-                $v.credentials.email.$invalid ||
-                  $v.credentials.password.$invalid ||
-                  loginApi.showLoading
-              "
               :button-text="$t('LOGIN.SUBMIT')"
               :loading="loginApi.showLoading"
               button-class="large expanded"
@@ -67,7 +60,7 @@
 </template>
 
 <script>
-import { required, email } from 'vuelidate/lib/validators';
+// import { required, email } from 'vuelidate/lib/validators';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import WootSubmitButton from '../../components/buttons/FormSubmitButton';
 import { mapGetters } from 'vuex';
@@ -99,17 +92,17 @@ export default {
       error: '',
     };
   },
-  validations: {
-    credentials: {
-      password: {
-        required,
-      },
-      email: {
-        required,
-        email,
-      },
-    },
-  },
+  // validations: {
+  //   credentials: {
+  //     password: {
+  //       required,
+  //     },
+  //     email: {
+  //       required,
+  //       email,
+  //     },
+  //   },
+  // },
   computed: {
     ...mapGetters({
       globalConfig: 'globalConfig/get',

app/javascript/packs/application.js

@@ -2,7 +2,7 @@
 /* eslint-env browser */
 /* eslint-disable no-new */
 /* Vue Core */
-
+import '@babel/polyfill';
 import Vue from 'vue';
 import VueI18n from 'vue-i18n';
 import VueRouter from 'vue-router';
@@ -14,7 +14,7 @@ import VueFormulate from '@braid/vue-formulate';
 import WootSwitch from 'components/ui/Switch';
 import WootWizard from 'components/ui/Wizard';
 import { sync } from 'vuex-router-sync';
-import Vuelidate from 'vuelidate';
+// import Vuelidate from 'vuelidate';
 import VTooltip from 'v-tooltip';
 import WootUiKit from '../dashboard/components';
 import App from '../dashboard/App';
@@ -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 {
@@ -40,6 +40,7 @@ import {
 import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
 import VueDOMPurifyHTML from 'vue-dompurify-html';
 import { domPurifyConfig } from '../shared/helpers/HTMLSanitizer';
+import VueClickAway from 'vue3-click-away';
 
 Vue.config.env = process.env;
 
@@ -61,7 +62,7 @@ Vue.use(VueDOMPurifyHTML, domPurifyConfig);
 Vue.use(VueRouter);
 Vue.use(VueI18n);
 Vue.use(WootUiKit);
-Vue.use(Vuelidate);
+// Vue.use(Vuelidate);
 Vue.use(VueFormulate, {
   rules: {
     JSON: ({ value }) => isJSONValid(value),
@@ -71,6 +72,7 @@ Vue.use(VTooltip, {
   defaultHtml: false,
 });
 Vue.use(hljs.vuePlugin);
+Vue.use(VueClickAway);
 
 Vue.component('multiselect', Multiselect);
 Vue.component('woot-switch', WootSwitch);
@@ -93,13 +95,21 @@ initializeChatwootEvents();
 initializeAnalyticsEvents();
 initalizeRouter();
 
+// window.onload = () => {
+//   window.WOOT = new Vue({
+//     router,
+//     store,
+//     i18n: i18nConfig,
+//     components: { App },
+//     template: '<App/>',
+//   }).$mount('#app');
+// };
 window.onload = () => {
   window.WOOT = new Vue({
     router,
-    store,
     i18n: i18nConfig,
-    components: { App },
-    template: '<App/>',
+    store,
+    render: h => h(App),
   }).$mount('#app');
 };
 

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    v-on-clickaway="onCloseDropdown"
+    v-click-away="onCloseDropdown"
     class="selector-wrap"
     @keyup.esc="onCloseDropdown"
   >
@@ -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';
+
 export default {
   components: {
     Thumbnail,
     MultiselectDropdownItems,
   },
-  mixins: [clickaway],
+
   props: {
     options: {
       type: Array,

app/javascript/survey/App.vue

@@ -1,7 +1,5 @@
 <template>
-  <div id="app" class="woot-survey-wrap">
-    <response />
-  </div>
+  <response />
 </template>
 
 <script>

app/javascript/widget/assets/scss/woot.scss

@@ -85,3 +85,6 @@ body {
     }
   }
 }
+.woot-widget-wrap {
+  height: 100%;
+}

app/javascript/widget/components/ChatInputWrap.vue

@@ -33,7 +33,7 @@
       </button>
       <emoji-input
         v-if="showEmojiPicker"
-        v-on-clickaway="hideEmojiPicker"
+        v-click-away="hideEmojiPicker"
         :on-click="emojiOnClick"
         @keydown.esc="hideEmojiPicker"
       />
@@ -48,7 +48,6 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import { mixin as clickaway } from 'vue-clickaway';
 
 import ChatAttachmentButton from 'widget/components/ChatAttachment.vue';
 import ChatSendButton from 'widget/components/ChatSendButton.vue';
@@ -67,7 +66,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"

app/views/survey/responses/show.html.erb

@@ -11,7 +11,7 @@
     <%= stylesheet_pack_tag 'survey' %>
   </head>
   <body>
-    <div id="app"></div>
+    <div id="app" class="woot-survey-wrap"></div>
     <%= yield %>
   </body>
 </html>

app/views/widgets/show.html.erb

@@ -37,7 +37,7 @@
     <%= stylesheet_pack_tag 'widget' %>
   </head>
   <body>
-    <div id="app"></div>
+    <div id="app" class="woot-widget-wrap"></div>
     <%= yield %>
   </body>
 </html>

config/webpack/loaders/vue.js

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

config/webpack/resolve.js

@@ -3,16 +3,12 @@ const path = require('path');
 const resolve = {
   extensions: ['.js', '.vue'],
   alias: {
-    vue$: 'vue/dist/vue.common.js',
+    vue: '@vue/compat',
     dashboard: path.resolve('./app/javascript/dashboard'),
     widget: path.resolve('./app/javascript/widget'),
     survey: path.resolve('./app/javascript/survey'),
     assets: path.resolve('./app/javascript/dashboard/assets'),
     components: path.resolve('./app/javascript/dashboard/components'),
-    './iconfont.eot': 'vue-easytable/libs/font/iconfont.eot',
-    './iconfont.woff': 'vue-easytable/libs/font/iconfont.woff',
-    './iconfont.ttf': 'vue-easytable/libs/font/iconfont.ttf',
-    './iconfont.svg': 'vue-easytable/libs/font/iconfont.svg',
   },
 };
 

package.json

@@ -26,6 +26,7 @@
     "@rails/webpacker": "5.3.0",
     "@sentry/tracing": "^6.19.7",
     "@sentry/vue": "^6.19.7",
+    "@vue/compat": "^3.1.0",
     "activestorage": "^5.2.6",
     "axios": "^0.21.2",
     "babel-plugin-syntax-jsx": "^6.18.0",
@@ -53,29 +54,28 @@
     "url-loader": "^2.0.0",
     "v-tooltip": "~2.1.3",
     "videojs-record": "^4.5.0",
-    "vue": "2.6.12",
+    "vue": "^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",
+    "vue3-click-away": "^1.2.4",
     "vuedraggable": "^2.24.3",
     "vuelidate": "0.7.7",
-    "vuex": "~2.1.1",
+    "vuex": "^3.0.0",
     "vuex-router-sync": "~4.1.2",
     "wavesurfer.js": "^6.0.4"
   },
   "devDependencies": {
     "@babel/core": "7.13.16",
     "@babel/plugin-proposal-class-properties": "7.13.0",
+    "@babel/polyfill": "^7.12.1",
     "@babel/preset-env": "7.13.15",
     "@storybook/addon-actions": "6.5.9",
     "@storybook/addon-docs": "^6.5.9",
@@ -83,6 +83,7 @@
     "@storybook/addon-links": "6.5.9",
     "@storybook/addons": "6.5.9",
     "@storybook/vue": "6.5.9",
+    "@vue/compiler-sfc": "^3.1.0",
     "@vue/test-utils": "1.1.4",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.1.0",

vue.config.js

@@ -0,0 +1,19 @@
+module.exports = {
+  chainWebpack: config => {
+    config.resolve.alias.set('vue', '@vue/compat');
+
+    config.module
+      .rule('vue')
+      .use('vue-loader')
+      .tap(options => {
+        return {
+          ...options,
+          compilerOptions: {
+            compatConfig: {
+              MODE: 2,
+            },
+          },
+        };
+      });
+  },
+};

yarn.lock

@@ -1125,6 +1125,14 @@
     "@babel/helper-create-regexp-features-plugin" "^7.12.13"
     "@babel/helper-plugin-utils" "^7.12.13"
 
+"@babel/polyfill@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.npmjs.org/@babel/polyfill/-/polyfill-7.12.1.tgz#1f2d6371d1261bbd961f3c5d5909150e12d0bd96"
+  integrity sha512-X0pi0V6gxLi6lFZpGmeNa4zxtwEmCs42isWLNjZZDE0Y8yVfgu0T2OAHlzBbdYlqbW/YXVvoBHpATEM+goCj8g==
+  dependencies:
+    core-js "^2.6.5"
+    regenerator-runtime "^0.13.4"
+
 "@babel/preset-env@7.13.15", "@babel/preset-env@^7.1.6", "@babel/preset-env@^7.12.11", "@babel/preset-env@^7.13.15":
   version "7.13.15"
   resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.13.15.tgz#c8a6eb584f96ecba183d3d414a83553a599f478f"
@@ -3244,6 +3252,11 @@
     global "~4.4.0"
     is-function "^1.0.1"
 
+"@vue/compat@^3.1.0":
+  version "3.2.37"
+  resolved "https://registry.npmjs.org/@vue/compat/-/compat-3.2.37.tgz#bd2062a2be88d06046311d5c058aefb17a1d438a"
+  integrity sha512-MIYkFAz3Fur1mtZBqrNMYTymlohCQ0ol6vtNb58cqExLSCt63xZaXyiZZYPvS6WaMXfbNBDPXMvU9tO922eFCA==
+
 "@vue/compiler-core@3.2.37":
   version "3.2.37"
   resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.37.tgz#b3c42e04c0e0f2c496ff1784e543fbefe91e215a"
@@ -3262,9 +3275,9 @@
     "@vue/compiler-core" "3.2.37"
     "@vue/shared" "3.2.37"
 
-"@vue/compiler-sfc@^3.2.0":
+"@vue/compiler-sfc@3.2.37", "@vue/compiler-sfc@^3.1.0", "@vue/compiler-sfc@^3.2.0":
   version "3.2.37"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.37.tgz#3103af3da2f40286edcd85ea495dcb35bc7f5ff4"
+  resolved "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.37.tgz#3103af3da2f40286edcd85ea495dcb35bc7f5ff4"
   integrity sha512-+7i/2+9LYlpqDv+KTtWhOZH+pa8/HnX/905MdVmAcI/mPQOBwkHHIzrsEsucyOIZQYMkXUiTkmZq5am/NyXKkg==
   dependencies:
     "@babel/parser" "^7.16.4"
@@ -3313,6 +3326,38 @@
     estree-walker "^2.0.2"
     magic-string "^0.25.7"
 
+"@vue/reactivity@3.2.37":
+  version "3.2.37"
+  resolved "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.37.tgz#5bc3847ac58828e2b78526e08219e0a1089f8848"
+  integrity sha512-/7WRafBOshOc6m3F7plwzPeCu/RCVv9uMpOwa/5PiY1Zz+WLVRWiy0MYKwmg19KBdGtFWsmZ4cD+LOdVPcs52A==
+  dependencies:
+    "@vue/shared" "3.2.37"
+
+"@vue/runtime-core@3.2.37":
+  version "3.2.37"
+  resolved "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.37.tgz#7ba7c54bb56e5d70edfc2f05766e1ca8519966e3"
+  integrity sha512-JPcd9kFyEdXLl/i0ClS7lwgcs0QpUAWj+SKX2ZC3ANKi1U4DOtiEr6cRqFXsPwY5u1L9fAjkinIdB8Rz3FoYNQ==
+  dependencies:
+    "@vue/reactivity" "3.2.37"
+    "@vue/shared" "3.2.37"
+
+"@vue/runtime-dom@3.2.37":
+  version "3.2.37"
+  resolved "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.37.tgz#002bdc8228fa63949317756fb1e92cdd3f9f4bbd"
+  integrity sha512-HimKdh9BepShW6YozwRKAYjYQWg9mQn63RGEiSswMbW+ssIht1MILYlVGkAGGQbkhSh31PCdoUcfiu4apXJoPw==
+  dependencies:
+    "@vue/runtime-core" "3.2.37"
+    "@vue/shared" "3.2.37"
+    csstype "^2.6.8"
+
+"@vue/server-renderer@3.2.37":
+  version "3.2.37"
+  resolved "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.37.tgz#840a29c8dcc29bddd9b5f5ffa22b95c0e72afdfc"
+  integrity sha512-kLITEJvaYgZQ2h47hIzPh2K3jG8c1zCVbp/o/bzQOyvzaKiCquKS7AaioPI28GNxIsE/zSx+EwWYsNxDCX95MA==
+  dependencies:
+    "@vue/compiler-ssr" "3.2.37"
+    "@vue/shared" "3.2.37"
+
 "@vue/shared@3.2.37":
   version "3.2.37"
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.37.tgz#8e6adc3f2759af52f0e85863dfb0b711ecc5c702"
@@ -5514,6 +5559,11 @@ core-js@3.11.0, core-js@^3.0.4, core-js@^3.11.0, core-js@^3.6.5, core-js@^3.8.2:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.11.0.tgz#05dac6aa70c0a4ad842261f8957b961d36eb8926"
   integrity sha512-bd79DPpx+1Ilh9+30aT5O1sgpQd4Ttg8oqkqi51ZzhedMM1omD2e6IOF48Z/DzDCZ2svp49tN/3vneTK6ZBkXw==
 
+core-js@^2.6.5:
+  version "2.6.12"
+  resolved "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
+  integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
+
 core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -5866,6 +5916,11 @@ cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
+csstype@^2.6.8:
+  version "2.6.20"
+  resolved "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz#9229c65ea0b260cf4d3d997cb06288e36a8d6dda"
+  integrity sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==
+
 csstype@^3.0.2:
   version "3.0.8"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.8.tgz#d2266a792729fb227cd216fb572f43728e1ad340"
@@ -5972,11 +6027,6 @@ date-format-parse@^0.2.6:
   resolved "https://registry.yarnpkg.com/date-format-parse/-/date-format-parse-0.2.6.tgz#7ed42817efb6ec39532169eada9670ae3c627aa7"
   integrity sha512-sdxnYAWmLopeb+6Hmw+vo3or4OCJOnh4+YoJ9p+Id3o2EnNP0INpTqx7wr8UregfMpgaSZAH473R/ytiaB3gVg==
 
-de-indent@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
-  integrity sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=
-
 debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.8, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -8028,6 +8078,11 @@ hash-sum@^1.0.2:
   resolved "https://registry.yarnpkg.com/hash-sum/-/hash-sum-1.0.2.tgz#33b40777754c6432573c120cc3808bbd10d47f04"
   integrity sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=
 
+hash-sum@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/hash-sum/-/hash-sum-2.0.0.tgz#81d01bb5de8ea4a214ad5d6ead1b523460b0b45a"
+  integrity sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==
+
 hash.js@^1.0.0, hash.js@^1.0.3:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.7.tgz#0babca538e8d4ee4a0f8988d68866537a003cf42"
@@ -8104,7 +8159,7 @@ hastscript@^6.0.0:
     property-information "^5.0.0"
     space-separated-tokens "^1.0.0"
 
-he@^1.1.0, he@^1.2.0:
+he@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
@@ -10100,7 +10155,7 @@ loader-runner@^4.2.0:
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.3.0.tgz#c1b4a163b99f614830353b16755e7149ac2314e1"
   integrity sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==
 
-loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4.0:
+loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
   integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==
@@ -10239,7 +10294,7 @@ loglevel@^1.6.8:
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.7.1.tgz#005fde2f5e6e47068f935ff28573e125ef72f197"
   integrity sha512-Hesni4s5UkWkwCGJMQGAh71PaLUmKFM60dHvq0zi/vDhhrzuk+4GgNbTXJ12YYQJn6ZKBDNIjYcuQGKudvqrIw==
 
-loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.4.0:
+loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -13478,11 +13533,6 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
 
-resize-observer-polyfill@^1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
-  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
-
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
@@ -15607,13 +15657,6 @@ vue-chartjs@3.5.1:
   dependencies:
     "@types/chart.js" "^2.7.55"
 
-vue-clickaway@~2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/vue-clickaway/-/vue-clickaway-2.1.0.tgz#392de764751f31cd20787e8fb3a6e319825f8d4f"
-  integrity sha1-OS3nZHUfMc0geH6Ps6bjGYJfjU8=
-  dependencies:
-    loose-envify "^1.2.0"
-
 vue-color@2.8.1:
   version "2.8.1"
   resolved "https://registry.yarnpkg.com/vue-color/-/vue-color-2.8.1.tgz#a090f3dcf8ed6f07afdb865cac84b19a73302e70"
@@ -15658,16 +15701,6 @@ vue-dompurify-html@^2.5.2:
   dependencies:
     dompurify "^2.3.4"
 
-vue-easytable@2.5.5:
-  version "2.5.5"
-  resolved "https://registry.yarnpkg.com/vue-easytable/-/vue-easytable-2.5.5.tgz#0d0ac244beb853859c76191c117311b5cf9654b5"
-  integrity sha512-2dp2+OWYgCn8+g6p+7tNoCuU85OGHqk1hnQ7QnS4HUyPFVAN1n4mmG+6WkIuRKrc5wsFpsg7ZiFxHQnplos3jw==
-  dependencies:
-    lodash "^4.17.20"
-    resize-observer-polyfill "^1.5.1"
-    vue "^2.6.12"
-    vue-template-compiler "^2.6.11"
-
 vue-eslint-parser@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-7.0.0.tgz#a4ed2669f87179dedd06afdd8736acbb3a3864d6"
@@ -15680,11 +15713,6 @@ vue-eslint-parser@^7.0.0:
     esquery "^1.0.1"
     lodash "^4.17.15"
 
-vue-hot-reload-api@^2.3.0:
-  version "2.3.4"
-  resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
-  integrity sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==
-
 vue-i18n@8.24.3:
   version "8.24.3"
   resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-8.24.3.tgz#2233ae11ec59e8204df58a28fc41afe9754e3b41"
@@ -15721,16 +15749,14 @@ vue-letter@^0.1.3:
   dependencies:
     lettersanitizer "^1.0.0"
 
-vue-loader@15.9.6:
-  version "15.9.6"
-  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-15.9.6.tgz#f4bb9ae20c3a8370af3ecf09b8126d38ffdb6b8b"
-  integrity sha512-j0cqiLzwbeImIC6nVIby2o/ABAWhlppyL/m5oJ67R5MloP0hj/DtFgb0Zmq3J9CG7AJ+AXIvHVnJAPBvrLyuDg==
+vue-loader@16.0.0:
+  version "16.0.0"
+  resolved "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0.tgz#7ec137c7f9029f2a5990f39dc5abbca06d60ba30"
+  integrity sha512-R20f4PWe34dqhTZ9tkyFd6nfjxEbLBHbFOsN38qg0Jl8GKMfmoyc/E8vVjjRkunE6qCydpPoH7f/tW13bD6+JA==
   dependencies:
-    "@vue/component-compiler-utils" "^3.1.0"
-    hash-sum "^1.0.2"
-    loader-utils "^1.1.0"
-    vue-hot-reload-api "^2.3.0"
-    vue-style-loader "^4.1.0"
+    chalk "^4.1.0"
+    hash-sum "^2.0.0"
+    loader-utils "^2.0.0"
 
 vue-multiselect@~2.1.6:
   version "2.1.6"
@@ -15749,22 +15775,6 @@ vue-router@~3.5.2:
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.5.2.tgz#5f55e3f251970e36c3e8d88a7cd2d67a350ade5c"
   integrity sha512-807gn82hTnjCYGrnF3eNmIw/dk7/GE4B5h69BlyCK9KHASwSloD1Sjcn06zg9fVG4fYH2DrsNBZkpLtb25WtaQ==
 
-vue-style-loader@^4.1.0:
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz#6d55863a51fa757ab24e89d9371465072aa7bc35"
-  integrity sha512-sFuh0xfbtpRlKfm39ss/ikqs9AbKCoXZBpHeVZ8Tx650o0k0q/YCM7FRvigtxpACezfq6af+a7JeqVTWvncqDg==
-  dependencies:
-    hash-sum "^1.0.2"
-    loader-utils "^1.0.2"
-
-vue-template-compiler@2.6.12, vue-template-compiler@^2.6.11:
-  version "2.6.12"
-  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.12.tgz#947ed7196744c8a5285ebe1233fe960437fcc57e"
-  integrity sha512-OzzZ52zS41YUbkCBfdXShQTe69j1gQDZ9HIX8miuC9C3rBCk9wIRjLiZZLrmX9V+Ftq/YEyv1JaVr5Y/hNtByg==
-  dependencies:
-    de-indent "^1.0.2"
-    he "^1.1.0"
-
 vue-template-es2015-compiler@^1.9.0:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
@@ -15782,10 +15792,21 @@ vue2-datepicker@^3.9.1:
   dependencies:
     date-format-parse "^0.2.6"
 
-vue@2.6.12, vue@^2.6.12:
-  version "2.6.12"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.12.tgz#f5ebd4fa6bd2869403e29a896aed4904456c9123"
-  integrity sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg==
+vue3-click-away@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/vue3-click-away/-/vue3-click-away-1.2.4.tgz#ee76a241e7cff2a345e14342d558f4801d14cc26"
+  integrity sha512-O9Z2KlvIhJT8OxaFy04eiZE9rc1Mk/bp+70dLok68ko3Kr8AW5dU+j8avSk4GDQu94FllSr4m5ul4BpzlKOw1A==
+
+vue@^3.1.0:
+  version "3.2.37"
+  resolved "https://registry.npmjs.org/vue/-/vue-3.2.37.tgz#da220ccb618d78579d25b06c7c21498ca4e5452e"
+  integrity sha512-bOKEZxrm8Eh+fveCqS1/NkG/n6aMidsI6hahas7pa0w/l7jkbssJVsRhVDs07IdDq7h9KHswZOgItnwJAgtVtQ==
+  dependencies:
+    "@vue/compiler-dom" "3.2.37"
+    "@vue/compiler-sfc" "3.2.37"
+    "@vue/runtime-dom" "3.2.37"
+    "@vue/server-renderer" "3.2.37"
+    "@vue/shared" "3.2.37"
 
 vuedraggable@^2.24.3:
   version "2.24.3"
@@ -15804,10 +15825,10 @@ vuex-router-sync@~4.1.2:
   resolved "https://registry.yarnpkg.com/vuex-router-sync/-/vuex-router-sync-4.1.3.tgz#f209ec3174de04179bfadd7994437e4c5a81c975"
   integrity sha1-8gnsMXTeBBeb+t15lEN+TFqByXU=
 
-vuex@~2.1.1:
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/vuex/-/vuex-2.1.3.tgz#4f613f8425a274b85b79a83cd28b960938bf1670"
-  integrity sha1-T2E/hCWidLhbeag80ouWCTi/FnA=
+vuex@^3.0.0:
+  version "3.6.2"
+  resolved "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz#236bc086a870c3ae79946f107f16de59d5895e71"
+  integrity sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==
 
 w3c-hr-time@^1.0.2:
   version "1.0.2"