@webitel/ui-sdk 2.1.48 → 3.0.1

package/src/components/organisms/wt-headline-nav/__tests__/wt-headline-nav.spec.js

@@ -4,7 +4,7 @@ import WtHeadlineNav from '../wt-headline-nav.vue';
 describe('WtHeadlineNav', () => {
   it('renders a component', () => {
     const wrapper = shallowMount(WtHeadlineNav, {
-      propsData: {
+      props: {
         path: [],
       },
     });

package/src/components/organisms/wt-navigation-bar/__tests__/WtNavigationBar.spec.js

@@ -1,5 +1,5 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import VueRouter from 'vue-router';
+import { shallowMount, mount } from '@vue/test-utils';
+import { createRouter, createWebHistory } from 'vue-router';
 import WtNavigationBar from '../wt-navigation-bar.vue';
 
 const nav = [
@@ -13,9 +13,10 @@ const nav = [
   },
 ];
 
-const localVue = createLocalVue();
-localVue.use(VueRouter);
-const router = new VueRouter();
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [],
+});
 
 describe('WtNavigationBar', () => {
   it('renders a component', () => {
@@ -25,19 +26,21 @@ describe('WtNavigationBar', () => {
 
   it('renders navigation links', () => {
     const wrapper = shallowMount(WtNavigationBar, {
-      localVue,
-      router,
-      propsData: { nav },
+      global: {
+        plugins: [router],
+      },
+      props: { nav },
     });
     const navLinksLen = nav.filter((nav) => !nav.subNav).length;
     expect(wrapper.findAll('.wt-navigation-bar__nav-item-link').length).toBe(navLinksLen);
   });
 
   it('renders navigation expansions with subNav inside it', async () => {
-    const wrapper = shallowMount(WtNavigationBar, {
-      localVue,
-      router,
-      propsData: { nav },
+    const wrapper = mount(WtNavigationBar, {
+      global: {
+        plugins: [router],
+      },
+      props: { nav },
     });
     wrapper.find('.wt-navigation-bar__nav-expansion').trigger('click');
     await wrapper.vm.$nextTick();
@@ -51,10 +54,11 @@ describe('WtNavigationBar', () => {
   });
 
   it('correctly computes subNav nested routes', async () => {
-    const wrapper = shallowMount(WtNavigationBar, {
-      localVue,
-      router,
-      propsData: { nav },
+    const wrapper = mount(WtNavigationBar, {
+      global: {
+        plugins: [router],
+      },
+      props: { nav },
     });
     wrapper.find('.wt-navigation-bar__nav-expansion').trigger('click');
     await wrapper.vm.$nextTick();

package/src/components/organisms/wt-notifications-bar/wt-notifications-bar.vue

@@ -15,6 +15,7 @@
 <script>
   export default {
     name: 'wt-notifications-bar',
+    inject: ['$eventBus'],
     data: () => ({
       notificationDuration: 4000,
       notifications: [],

package/src/components/organisms/wt-status-select/wt-status-select.vue

@@ -8,13 +8,13 @@
     :searchable="false"
     @input="inputHandler"
   >
-    <template slot="singleLabel" slot-scope="{ option }">
+    <template v-slot:singleLabel="{ option }">
       <wt-indicator
         :color="option.color"
         :text="duration"
       ></wt-indicator>
     </template>
-    <template slot="option" slot-scope="{ option }">
+    <template v-slot:option="{ option }">
       <wt-indicator
         :color="option.color"
         :text="option.text"

package/src/components/organisms/wt-table/__tests__/WtTable.spec.js

@@ -51,7 +51,7 @@ describe('WtTable', () => {
 
   it('renders table data rows', () => {
     const wrapper = shallowMount(WtTable, {
-      propsData: {
+      props: {
         headers,
         data,
       },
@@ -61,7 +61,7 @@ describe('WtTable', () => {
 
   it('renders table headers', () => {
     const wrapper = shallowMount(WtTable, {
-      propsData: {
+      props: {
         headers,
         data,
         selectable: false,
@@ -73,7 +73,7 @@ describe('WtTable', () => {
 
   it('do not renders table footer by default', () => {
     const wrapper = shallowMount(WtTable, {
-      propsData: {
+      props: {
         headers,
         data,
       },
@@ -83,7 +83,7 @@ describe('WtTable', () => {
 
   it('renders table footer if footer slot is passed', () => {
     const wrapper = shallowMount(WtTable, {
-      propsData: {
+      props: {
         headers,
         data,
       },
@@ -96,7 +96,7 @@ describe('WtTable', () => {
 
   it('emits sort event at header click when sortable is true', () => {
     const wrapper = shallowMount(WtTable, {
-      propsData: {
+      props: {
         headers,
         data,
         sortable: true,
@@ -109,7 +109,7 @@ describe('WtTable', () => {
   it('draws sort arrow, if a column is sorted', () => {
     headers[0].sort = 'asc';
     const wrapper = shallowMount(WtTable, {
-      propsData: {
+      props: {
         headers,
         data,
         sortable: true,
@@ -122,7 +122,7 @@ describe('WtTable', () => {
 
   it('selects all rows at header checkbox click', async () => {
     const wrapper = shallowMount(WtTable, {
-      propsData: {
+      props: {
         headers,
         data,
         selectable: true,

package/src/components/organisms/wt-table-column-select/__tests__/WtTableColumnSelect.spec.js

@@ -4,7 +4,7 @@ import WtTableColumnSelect from '../wt-table-column-select.vue';
 describe('WtTableColumnSelect', () => {
   it('renders a component', () => {
     const wrapper = shallowMount(WtTableColumnSelect, {
-      propsData: {
+      props: {
         headers: [],
       },
     });
@@ -12,7 +12,7 @@ describe('WtTableColumnSelect', () => {
   });
   it('column select popup is invisible by default', () => {
     const wrapper = shallowMount(WtTableColumnSelect, {
-      propsData: {
+      props: {
         headers: [],
       },
     });
@@ -20,7 +20,7 @@ describe('WtTableColumnSelect', () => {
   });
   it('column select popup is opening by icon-btn click', async () => {
     const wrapper = mount(WtTableColumnSelect, {
-      propsData: {
+      props: {
         headers: [],
       },
     });

package/src/components/transitions/wt-expand-transition.vue

@@ -1,51 +1,53 @@
+<template>
+  <transition
+    name="expand"
+    @after-enter="afterEnter"
+    @enter="enter"
+    @leave="leave"
+  >
+    <slot></slot>
+  </transition>
+</template>
+
 <script>
 /* eslint-disable no-param-reassign */
 // https://markus.oberlehner.net/blog/transition-to-height-auto-with-vue/
 export default {
   name: 'wt-expand-transition',
-  functional: true,
-  render(createElement, context) {
-    const data = {
-      props: {
-        name: 'expand',
-      },
-      on: {
-        afterEnter(element) {
-          element.style.height = 'auto';
-        },
-        enter(element) {
-          const { width } = getComputedStyle(element);
-          element.style.width = width;
-          element.style.position = 'absolute';
-          element.style.visibility = 'hidden';
-          element.style.height = 'auto';
+  methods: {
+    afterEnter(element) {
+      element.style.height = 'auto';
+    },
+    enter(element) {
+      const { width } = getComputedStyle(element);
+      element.style.width = width;
+      element.style.position = 'absolute';
+      element.style.visibility = 'hidden';
+      element.style.height = 'auto';
 
-          const { height } = getComputedStyle(element);
-          element.style.width = null;
-          element.style.position = null;
-          element.style.visibility = null;
-          element.style.height = 0;
+      const { height } = getComputedStyle(element);
+      element.style.width = null;
+      element.style.position = null;
+      element.style.visibility = null;
+      element.style.height = 0;
 
-          // Force repaint to make sure the
-          // animation is triggered correctly.
-          // eslint-disable-next-line no-unused-expressions
-          getComputedStyle(element).height;
+      // Force repaint to make sure the
+      // animation is triggered correctly.
+      // eslint-disable-next-line no-unused-expressions
+      getComputedStyle(element).height;
 
-          // eslint-disable-next-line no-return-assign
-          requestAnimationFrame(() => element.style.height = height);
-        },
-        leave(element) {
-          const { height } = getComputedStyle(element);
-          element.style.height = height;
-          // eslint-disable-next-line no-unused-expressions
-          getComputedStyle(element).height;
+      // eslint-disable-next-line no-return-assign
+      requestAnimationFrame(() => element.style.height = height);
+    },
+    leave(element) {
+      const { height } = getComputedStyle(element);
+      element.style.height = height;
+      // eslint-disable-next-line no-unused-expressions
+      getComputedStyle(element).height;
 
-          // eslint-disable-next-line no-return-assign
-          requestAnimationFrame(() => element.style.height = 0);
-        },
-      },
-    };
-    return createElement('transition', data, context.children);
+      // eslint-disable-next-line no-return-assign
+      requestAnimationFrame(() => element.style.height = 0);
+    },
   },
 };
 </script>

package/src/css/components/molecules/wt-select/_multiselect.scss

@@ -1,4 +1,4 @@
-@import '~vue-multiselect/dist/vue-multiselect.min.css';
+@import '~vue-multiselect/dist/vue3-multiselect.css';
 
 .multiselect ::v-deep {
   cursor: pointer;

package/src/locale/i18n.js

@@ -1,18 +1,16 @@
-import Vue from 'vue';
-import VueI18n from 'vue-i18n';
+import { createI18n } from 'vue-i18n';
 import en from './en/en';
 import ru from './ru/ru';
 import ua from './ua/ua';
 
-Vue.use(VueI18n);
-
 const messages = {
   en,
   ru,
   ua,
 };
 
-export default new VueI18n({
+// eslint-disable-next-line new-cap
+export default new createI18n({
   locale: 'en',
   fallbackLocale: 'en',
   messages,

package/src/mixins/dataFilterMixins/__tests__/apiFilterMixin.spec.js

@@ -1,10 +1,11 @@
-import { createLocalVue, shallowMount } from '@vue/test-utils';
-import VueRouter from 'vue-router';
+import { shallowMount } from '@vue/test-utils';
+import { createRouter, createWebHistory } from 'vue-router';
 import apiFilterMixin from '../apiFilterMixin';
 
-const localVue = createLocalVue();
-localVue.use(VueRouter);
-const router = new VueRouter();
+const router = new createRouter({
+  history: createWebHistory(),
+  routes: [],
+});
 const team = ['1', '2'];
 
 describe('API filter mixin', () => {
@@ -18,14 +19,13 @@ describe('API filter mixin', () => {
   };
 
   beforeEach(() => {
-    if (Object.keys(router.currentRoute.query).length) router.replace({ query: null });
+    if (Object.keys(router.currentRoute.value.query).length) router.replace({ query: null });
   });
 
   it('Correctly sets value from $route query', async () => {
     await router.replace({ query: { team } });
     wrapper = shallowMount(Component, {
-      localVue,
-      router,
+      plugins: [router],
     });
     await wrapper.vm.$nextTick();
     expect(wrapper.vm.value).toEqual(team);

package/src/mixins/dataFilterMixins/__tests__/enumFilterMixin.spec.js

@@ -1,5 +1,5 @@
-import { createLocalVue, shallowMount } from '@vue/test-utils';
-import VueRouter from 'vue-router';
+import { shallowMount } from '@vue/test-utils';
+import { createRouter, createWebHistory } from 'vue-router';
 import enumFilterMixin from '../enumFilterMixin';
 
 const options = [{
@@ -11,9 +11,10 @@ const options = [{
     value: 'outbound',
   }];
 
-const localVue = createLocalVue();
-localVue.use(VueRouter);
-const router = new VueRouter();
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [],
+});
 
 describe('Enum filter mixin', () => {
   let wrapper;
@@ -34,8 +35,9 @@ describe('Enum filter mixin', () => {
   it('Correctly sets value from $route query', async () => {
     await router.replace({ query: { type: [options[0].value] } });
     wrapper = shallowMount(Component, {
-      localVue,
-      router,
+      global: {
+        plugins: [router],
+      },
     });
     await wrapper.vm.$nextTick();
     expect(wrapper.vm.value).toEqual([options[0]]);
@@ -44,8 +46,9 @@ describe('Enum filter mixin', () => {
   it('Correctly sets single value from $route query', async () => {
     await router.replace({ query: { type: options[0].value } });
     wrapper = shallowMount(Component, {
-      localVue,
-      router,
+      global: {
+        plugins: [router],
+      },
     });
     await wrapper.vm.$nextTick();
     expect(wrapper.vm.value).toEqual(options[0]);
@@ -54,8 +57,9 @@ describe('Enum filter mixin', () => {
   it('Resets value after $route query reset', async () => {
     await router.replace({ query: { type: [options[0].value] } });
     wrapper = shallowMount(Component, {
-      localVue,
-      router,
+      global: {
+        plugins: [router],
+      },
     });
     await wrapper.vm.$nextTick();
     expect(wrapper.vm.value).toEqual([options[0]]);

package/src/mixins/dataFilterMixins/__tests__/sortFilterMixin.spec.js

@@ -1,10 +1,11 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import VueRouter from 'vue-router';
+import { shallowMount } from '@vue/test-utils';
+import { createRouter, createWebHistory } from 'vue-router';
 import sortFilterMixin from '../sortFilterMixin';
 
-const localVue = createLocalVue();
-localVue.use(VueRouter);
-const router = new VueRouter();
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [],
+});
 
 const headers = [{
   value: 'queue',
@@ -18,8 +19,6 @@ const headers = [{
   field: 'online',
 }];
 
-const $t = () => {};
-
 describe('Sort filter mixin', () => {
   let wrapper;
   const Component = {
@@ -31,9 +30,7 @@ describe('Sort filter mixin', () => {
   beforeEach(() => {
     router.replace('/');
     wrapper = shallowMount(Component, {
-      localVue,
-      router,
-      mocks: { $t },
+      global: { plugins: [router] },
     });
   });
 

package/src/mixins/dataFilterMixins/__tests__/urlControllerMixin.spec.js

@@ -1,12 +1,12 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import VueRouter from 'vue-router';
+import { shallowMount } from '@vue/test-utils';
+import { createRouter, createWebHistory } from 'vue-router';
 import _urlControllerMixin from '../_urlControllerMixin/_urlControllerMixin';
 
-const localVue = createLocalVue();
-localVue.use(VueRouter);
-const router = new VueRouter();
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [],
+});
 
-const $t = () => {};
 const filterQuery = 'team';
 
 describe('URL Controller mixin Set and Get operations', () => {
@@ -19,9 +19,9 @@ describe('URL Controller mixin Set and Get operations', () => {
   beforeEach(() => {
     router.replace('/');
     wrapper = shallowMount(Component, {
-      localVue,
-      router,
-      mocks: { $t },
+      global: {
+        plugins: [router],
+      },
     });
   });
 

package/src/mixins/validationMixin/__tests__/validationMixin.spec.js

@@ -11,7 +11,7 @@ describe('Validation mixin', () => {
 
   it('detects validation prop', () => {
     wrapper = shallowMount(Component, {
-      propsData: {
+      props: {
         v: {
           $error: true,
         },
@@ -23,7 +23,7 @@ describe('Validation mixin', () => {
 
   it('computes error message on validation error', () => {
     wrapper = shallowMount(Component, {
-      propsData: {
+      props: {
         v: {
           $error: true,
           email: false,
@@ -35,7 +35,7 @@ describe('Validation mixin', () => {
 
   it('prioritizes error messages', () => {
     wrapper = shallowMount(Component, {
-      propsData: {
+      props: {
         v: {
           $error: true,
           required: false,

package/src/modules/QueryFilters/components/__tests__/abstract-api-filter.spec.js

@@ -32,7 +32,7 @@ describe('Abstract Api Filter', () => {
     localVue,
     store,
     router,
-    propsData: {
+    props: {
       namespace,
       filterQuery,
     },

package/src/modules/QueryFilters/components/__tests__/abstract-enum-filter.spec.js

@@ -28,7 +28,7 @@ describe('Abstract Enum Filter', () => {
     localVue,
     store,
     router,
-    propsData: {
+    props: {
       namespace,
       filterQuery,
     },

package/src/modules/QueryFilters/components/__tests__/filter-datetime.spec.js

@@ -29,7 +29,7 @@ describe('DatetimeFilter Filter', () => {
     localVue,
     store,
     router,
-    propsData: {
+    props: {
       namespace,
       filterQuery,
     },

package/src/modules/QueryFilters/components/__tests__/filter-from-to.spec.js

@@ -29,7 +29,7 @@ describe('FilterFromTo Filter', () => {
     localVue,
     store,
     router,
-    propsData: {
+    props: {
       namespace,
       filterQuery,
     },

package/src/modules/QueryFilters/components/__tests__/filter-search.spec.js

@@ -29,7 +29,7 @@ describe('Search Filter', () => {
     localVue,
     store,
     router,
-    propsData: {
+    props: {
       namespace,
       filterQuery,
     },

package/src/modules/Userinfo/components/__tests__/auth.spec.js

@@ -1,6 +1,6 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import Vuex from 'vuex';
-import VueRouter from 'vue-router';
+import { shallowMount } from '@vue/test-utils';
+import { createStore } from 'vuex';
+import { createRouter, createWebHistory } from 'vue-router';
 import JSDOM from 'jsdom';
 import authAPI from '../../api/auth';
 import userinfoAPI from '../../api/userinfo';
@@ -11,10 +11,6 @@ import '../../../../../tests/mocks/localStorageMock';
 
 localStorage.setItem('access-token', 'jest');
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
-localVue.use(VueRouter);
-
 authAPI.setToken = jest.fn();
 userinfoAPI.getSession = jest.fn(() => ({}));
 userinfoAPI.getApplicationsAccess = jest.fn(() => ({}));
@@ -23,19 +19,22 @@ describe('Auth', () => {
   let store;
   let wrapper;
   global.window = new JSDOM.JSDOM().window;
-  const router = new VueRouter();
+  const router = createRouter({
+    history: createWebHistory(),
+    routes: [],
+  });
   router.replace = jest.fn();
 
   const userinfo = new UserinfoStoreModule().getModule();
   beforeEach(() => {
-    store = new Vuex.Store({
+    store = createStore({
       modules: { userinfo },
     });
 
     wrapper = shallowMount(Auth, {
-      localVue,
-      store,
-      router,
+      global: {
+        plugins: [router, store],
+      },
     });
   });
 

package/src/plugins/breakpoint/breakpoint.plugin.js

@@ -1,3 +1,4 @@
+import { reactive } from 'vue';
 import debounce from '../../scripts/debounce';
 
 // https://stackoverflow.com/questions/41791193/vuejs-reactive-binding-for-a-plugin-how-to/41801107#41801107
@@ -124,13 +125,13 @@ const onResize = () => {
   breakpoint.mobile = current <= max;
 };
 
-const install = (Vue) => {
+const install = (app) => {
   window.addEventListener('resize', debounce(onResize), { passive: true });
 
   onResize();
 
   // eslint-disable-next-line no-param-reassign
-  Vue.prototype.$breakpoint = Vue.observable(breakpoint);
+  app.config.globalProperties.$breakpoint = reactive(breakpoint);
 };
 
 export { install };

package/src/scripts/eventBus.js

@@ -1,4 +1,8 @@
-import Vue from 'vue';
+import emitter from 'tiny-emitter/instance';
 
-const eventBus = new Vue();
-export default eventBus;
+export default {
+  $on: (...args) => emitter.on(...args),
+  $once: (...args) => emitter.once(...args),
+  $off: (...args) => emitter.off(...args),
+  $emit: (...args) => emitter.emit(...args),
+}