@webitel/ui-sdk 2.1.48 → 3.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "2.1.48",
+  "version": "3.0.1",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",
@@ -27,45 +27,54 @@
     "CHANGELOG.md"
   ],
   "dependencies": {
+    "@vue/compat": "^3.2.47",
     "clipboard-copy": "^4.0.1",
     "core-js": "^3.6.5",
     "csv-stringify": "^5.5.3",
     "deep-copy": "^1.4.2",
     "deep-equal": "^2.0.3",
     "file-saver": "^2.0.2",
-    "floating-vue": "^1.0.0-beta.17",
+    "floating-vue": "^2.0.0-beta.20",
     "jszip": "^3.5.0",
     "jszip-utils": "^0.1.0",
     "node-polyfill-webpack-plugin": "^1.1.4",
     "plyr": "3.6.2",
-    "vue": "^2.6.11",
-    "vue-i18n": "^8.18.2",
-    "vue-multiselect": "^2.1.6",
+    "tiny-emitter": "^2.1.0",
+    "vue": "^3.2.47",
+    "vue-i18n": "^9.2.2",
+    "vue-multiselect": "^3.0.0-beta.1",
     "vue-observe-visibility": "^1.0.0",
-    "vue-router": "^3.2.0",
+    "vue-router": "^4.1.6",
     "vuejs-datepicker": "^1.6.2",
     "webitel-sdk": "^0.1.157"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.17.0",
     "@testing-library/jest-dom": "^5.16.2",
-    "@vue/cli-plugin-babel": "~5.0.4",
-    "@vue/cli-plugin-eslint": "~5.0.4",
-    "@vue/cli-plugin-router": "^5.0.4",
-    "@vue/cli-plugin-unit-jest": "^5.0.4",
-    "@vue/cli-service": "~5.0.4",
+    "@vue/cli-plugin-babel": "~5.0.8",
+    "@vue/cli-plugin-eslint": "~5.0.8",
+    "@vue/cli-plugin-router": "^5.0.8",
+    "@vue/cli-plugin-unit-jest": "^5.0.8",
+    "@vue/cli-service": "~5.0.8",
+    "@vue/compiler-sfc": "^3.2.47",
     "@vue/eslint-config-airbnb": "^6.0.0",
-    "@vue/test-utils": "^1.3.0",
-    "@vue/vue2-jest": "^27.0.0-alpha.4",
+    "@vue/test-utils": "^2.3.0",
+    "@vue/vue3-jest": "^29.2.2",
     "bamboo-jest-reporter": "^1.0.3",
     "eslint": "^8.14.0",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-vue": "^8.7.1",
     "husky": "^7.0.0",
+    "jest-environment-jsdom": "^29.4.3",
     "sass": "^1.51.0",
     "sass-loader": "^12.6.0",
     "svg-sprite-loader": "^6.0.11",
-    "vue-template-compiler": "^2.6.11",
-    "vuex": "^3.6.2"
+    "vuex": "^4.1.0"
+  },
+  "overrides": {
+    "@vue/vue3-jest": "^29.2.2",
+    "vue": "^3.2.47",
+    "babel-jest": "^29.*",
+    "jest": "^29.*"
   }
 }

package/src/components/atoms/wt-button/__tests__/WtButton.spec.js

@@ -20,7 +20,7 @@ describe('WtButton', () => {
 
   it('renders button spinner', () => {
     const wrapper = shallowMount(WtButton, {
-      propsData: {
+      props: {
         loading: true,
       },
     });

package/src/components/atoms/wt-context-menu/__tests__/WtContextMenu.spec.js

@@ -3,7 +3,7 @@ import WtContextMenu from '../wt-context-menu.vue';
 
 describe('WtContextMenu', () => {
   it('renders a component', () => {
-    const wrapper = shallowMount(WtContextMenu, { propsData: { options: [] } });
+    const wrapper = shallowMount(WtContextMenu, { props: { options: [] } });
     expect(wrapper.classes('wt-context-menu')).toBe(true);
   });
 });

package/src/components/atoms/wt-icon/__tests__/WtIcon.spec.js

@@ -4,7 +4,7 @@ import WtIcon from '../wt-icon.vue';
 describe('WtIcon', () => {
   it('renders a component', () => {
     const wrapper = shallowMount(WtIcon, {
-      propsData: {
+      props: {
         icon: 'icon-name',
       },
     });
@@ -13,7 +13,7 @@ describe('WtIcon', () => {
   it('correctly computes icon name', () => {
     const iconName = '#jest-bucket';
     const wrapper = shallowMount(WtIcon, {
-      propsData: {
+      props: {
         icon: 'bucket',
         size: 'sm',
         iconPrefix: 'jest',

package/src/components/atoms/wt-indicator/__tests__/WtIndicator.spec.js

@@ -10,7 +10,7 @@ describe('WtIndicator', () => {
   it('renders a component text, if passed', () => {
     const content = 'Hello there!';
     const wrapper = shallowMount(WtIndicator, {
-      propsData: {
+      props: {
         text: content,
       },
     });
@@ -19,7 +19,7 @@ describe('WtIndicator', () => {
 
   it('changed indicator color, if prop is passed', () => {
     const wrapper = shallowMount(WtIndicator, {
-      propsData: {
+      props: {
         color: 'primary',
       },
     });

package/src/components/atoms/wt-rounded-action/__tests__/WtRoundedAction.spec.js

@@ -3,7 +3,7 @@ import WtRoundedAction from '../wt-rounded-action.vue';
 
 describe('WtRoundedAction', () => {
   it('renders a component', () => {
-    const wrapper = shallowMount(WtRoundedAction, { propsData: { icon: 'call' } });
+    const wrapper = shallowMount(WtRoundedAction, { props: { icon: 'call' } });
     expect(wrapper.classes('wt-rounded-action')).toBe(true);
   });
 });

package/src/components/atoms/wt-tooltip/__tests__/WtTooltip.spec.js

@@ -20,7 +20,7 @@ describe('WtTooltip', () => {
 
   it('changed tooltip color, if prop is passed', () => {
     const wrapper = shallowMount(WtTooltip, {
-      propsData: {
+      props: {
         contrast: true,
       },
     });

package/src/components/index.js

@@ -107,8 +107,4 @@ const Components = {
   WtLoadBar,
 };
 
-Object.keys(Components).forEach((name) => {
-  Vue.component(name, Components[name]);
-});
-
 export default Components;

package/src/components/molecules/wt-checkbox/__tests__/WtCheckbox.spec.js

@@ -21,7 +21,7 @@ describe('WtCheckbox', () => {
         WtLabel,
         WtIcon,
       },
-      propsData: { label },
+      props: { label },
     });
     expect(wrapper.find('.wt-checkbox__label').text()).toBe(label);
   });
@@ -33,7 +33,7 @@ describe('WtCheckbox', () => {
         WtLabel,
         WtIcon,
       },
-      propsData: { selected },
+      props: { selected },
     });
     wrapper.find('.wt-checkbox__input').trigger('change');
     expect(wrapper.emitted().change[0]).toEqual([!selected]);

package/src/components/molecules/wt-datepicker/__tests__/WtDatepicker.spec.js

@@ -21,7 +21,7 @@ describe('WtDatepicker', () => {
         WtLabel,
         WtIcon,
       },
-      propsData: { label },
+      props: { label },
     });
     expect(wrapper.find('.wt-label').text()).toBe(label);
   });

package/src/components/molecules/wt-datetimepicker/__tests__/WtDatetimepicker.spec.js

@@ -1,21 +1,21 @@
-import { shallowMount, mount, createLocalVue } from '@vue/test-utils';
+import { shallowMount, mount } from '@vue/test-utils';
 import FloatingVue, { Dropdown, Popper } from 'floating-vue';
 import WtDatetimepicker from '../wt-datetimepicker.vue';
 import WtLabel from '../../wt-label/wt-label.vue';
 import WtIcon from '../../../atoms/wt-icon/wt-icon.vue';
 import WtButton from '../../../atoms/wt-button/wt-button.vue';
 
-const localVue = createLocalVue();
-localVue.use(FloatingVue);
-
 describe('WtDatetimepicker', () => {
   it('renders a component', () => {
     const wrapper = shallowMount(WtDatetimepicker, {
-      stubs: {
-        WtLabel,
-        WtIcon,
-        WtButton,
-        WtTimepicker: true,
+      global: {
+        plugins: [FloatingVue],
+        stubs: {
+          WtLabel,
+          WtIcon,
+          WtButton,
+          WtTimepicker: true,
+        },
       },
     });
     expect(wrapper.classes('wt-datetimepicker')).toBe(true);
@@ -23,14 +23,17 @@ describe('WtDatetimepicker', () => {
 
   it('renders label text when passed', () => {
     const label = 'Hello there';
-    const wrapper = shallowMount(WtDatetimepicker, {
-      stubs: {
-        WtLabel,
-        WtIcon,
-        WtButton,
-        WtTimepicker: true,
+    const wrapper = mount(WtDatetimepicker, {
+      global: {
+        plugins: [FloatingVue],
+        stubs: {
+          WtLabel,
+          WtIcon,
+          WtButton,
+          WtTimepicker: true,
+        },
       },
-      propsData: { label },
+      props: { label },
     });
     expect(wrapper.find('.wt-label').text()).toBe(label);
   });
@@ -62,7 +65,7 @@ describe('WtDatetimepicker', () => {
   //       VDropdown: Dropdown,
   //       WtTimepicker: true,
   //     },
-  //     propsData: {
+  //     props: {
   //       value: now,
   //     },
   //   });

package/src/components/molecules/wt-icon-btn/__tests__/WtIconBtn.spec.js

@@ -8,7 +8,7 @@ describe('WtIconBtn', () => {
       stubs: {
         WtIcon,
       },
-      propsData: { icon: 'bucket' },
+      props: { icon: 'bucket' },
     });
     expect(wrapper.classes('wt-icon-btn')).toBe(true);
   });

package/src/components/molecules/wt-icon-btn/wt-icon-btn.vue

@@ -13,8 +13,11 @@
 </template>
 
 <script>
+import WtIcon from '../../atoms/wt-icon/wt-icon.vue';
+
 export default {
   name: 'wt-icon-btn',
+  components: { WtIcon },
   props: {
     icon: {
       type: String,

package/src/components/molecules/wt-input/__tests__/WtInput.spec.js

@@ -18,7 +18,7 @@ describe('WtInput', () => {
       stubs: {
         WtLabel,
       },
-      propsData: { label },
+      props: { label },
     });
     expect(wrapper.find('.wt-label').text()).toBe(label);
   });

package/src/components/molecules/wt-input/wt-input.vue

@@ -30,9 +30,9 @@
         :min="numberMin"
         :placeholder="placeholder || label"
         :type="inputType"
-        :value="value"
+        :value="value || modelValue"
         class="wt-input__input"
-        v-on="listeners"
+        @input="inputHandler"
       >
       <div
         ref="after-wrapper"
@@ -72,10 +72,14 @@ export default {
   name: 'wt-input',
   mixins: [validationMixin],
   props: {
+    value: {
+      type: [String, Number],
+      default: '',
+    },
     /**
-     * Current input value (`v-model`)
+     * Current input modelValue (`v-model`)
      */
-    value: {
+    modelValue: {
       type: [String, Number],
       default: '',
     },
@@ -155,7 +159,7 @@ export default {
       description: 'Object with props, passed down to wt-label as props',
     },
   },
-
+  emits: ['update:modelValue', 'input'],
   data: () => ({
     inputType: '',
     isPasswordVisible: false,
@@ -199,16 +203,10 @@ export default {
     showPasswordIcon() {
       return this.isPasswordVisible ? 'eye--closed' : 'eye--opened';
     },
-
-    listeners() {
-      return {
-        ...this.$listeners,
-        input: this.inputHandler,
-      };
-    },
   },
   methods: {
     inputHandler(event) {
+      this.$emit('update:modelValue', event.target.value.trim());
       this.$emit('input', event.target.value.trim());
     },
 

package/src/components/molecules/wt-progress-bar/__tests__/WtProgressBar.spec.js

@@ -7,11 +7,11 @@ describe('WtProgressBar', () => {
     expect(wrapper.exists()).toBe(true);
   });
   it('isOverflow correctly computes overflow=true', () => {
-    const wrapper = shallowMount(WtProgressBar, { propsData: { value: 2, max: 1 } });
+    const wrapper = shallowMount(WtProgressBar, { props: { value: 2, max: 1 } });
     expect(wrapper.vm.isOverflow).toBe(true);
   });
   it('isOverflow correctly computes overflow=false', () => {
-    const wrapper = shallowMount(WtProgressBar, { propsData: { value: 0.99, max: 1 } });
+    const wrapper = shallowMount(WtProgressBar, { props: { value: 0.99, max: 1 } });
     expect(wrapper.vm.isOverflow).toBe(false);
   });
 });

package/src/components/molecules/wt-radio/__tests__/WtRadio.spec.js

@@ -21,7 +21,7 @@ describe('WtRadio', () => {
         WtLabel,
         WtIcon,
       },
-      propsData: { label },
+      props: { label },
     });
     expect(wrapper.find('.wt-radio__label').text()).toBe(label);
   });
@@ -34,7 +34,7 @@ describe('WtRadio', () => {
         WtLabel,
         WtIcon,
       },
-      propsData: { selected, value },
+      props: { selected, value },
     });
     wrapper.find('.wt-radio__input').trigger('input');
     expect(wrapper.emitted().input[0]).toEqual([value]);

package/src/components/molecules/wt-select/__tests__/WtSelect.spec.js

@@ -20,7 +20,7 @@ describe('WtSelect', () => {
         WtLabel,
         WtIcon: true,
       },
-      propsData: { label },
+      props: { label },
     });
     expect(wrapper.find('.wt-label').text()).toBe(label);
   });

package/src/components/molecules/wt-select/mixins/__tests__/multiselectMixin.spec.js

@@ -15,7 +15,7 @@ describe('MultiselectMixin', () => {
   it('Correctly computes internal search options', () => {
     const options = ['1', '2'];
     const wrapper = shallowMount(Component, {
-      propsData: { options },
+      props: { options },
     });
     expect(wrapper.vm.selectOptions).toBe(options);
   });
@@ -24,7 +24,7 @@ describe('MultiselectMixin', () => {
     const options = ['1', '2'];
     const searchOptions = ['1'];
     const wrapper = shallowMount(Component, {
-      propsData: { options, searchMethod: () => ({ items: searchOptions }) },
+      props: { options, searchMethod: () => ({ items: searchOptions }) },
     });
     await wrapper.vm.$nextTick();
     expect(wrapper.vm.selectOptions).toBe(searchOptions);

package/src/components/molecules/wt-select/mixins/multiselectMixin.js

@@ -84,7 +84,7 @@ export default {
     listeners() {
       return {
         ...this.$listeners,
-        input: this.input,
+        'update:model-value': this.input,
         close: this.close,
         tag: this.tag,
         'search-change': (search) => {

package/src/components/molecules/wt-select/wt-select.vue

@@ -31,7 +31,7 @@
       :options="selectOptions"
       :placeholder="placeholder || label"
       :track-by="trackBy"
-      :value="selectValue"
+      :model-value="selectValue"
       class="wt-select__select"
       v-bind="$attrs"
       @close="isOpened = false"
@@ -43,14 +43,14 @@
       </template>
 
       <!--      Slot that is used for all selected options (tags)-->
-      <template slot="tag" slot-scope="{ option }">
+      <template v-slot:tag="{ option }">
         <span class="multiselect__custom-tag">
             {{ getOptionLabel({ option, optionLabel }) }}
         </span>
       </template>
 
       <!--      Slot for custom label template for single select-->
-      <template slot="singleLabel" slot-scope="{ option }">
+      <template v-slot:singleLabel="{ option }">
         <slot name="singleLabel" v-bind="{ option, optionLabel }">
           <span class="multiselect__single-label">
             {{ getOptionLabel({ option, optionLabel }) }}
@@ -59,7 +59,7 @@
       </template>
 
       <!--      Slot for custom option template -->
-      <template slot="option" slot-scope="{ option }">
+      <template v-slot:option="{ option }">
         <slot name="option" v-bind="{ option, optionLabel }">
           {{ getOptionLabel({ option, optionLabel }) }}
         </slot>
@@ -77,7 +77,7 @@
       </template>
 
       <!--      Slot located before the tags -->
-      <template slot="clear" slot-scope="{}">
+      <template v-slot:clear="{}">
         <wt-icon-btn
           v-if="clearable"
           :class="{ 'hidden': !isValue }"

package/src/components/molecules/wt-switcher/__tests__/WtSwitcher.spec.js

@@ -14,7 +14,7 @@ describe('WtSwitcher', () => {
     const label = 'Hello there';
     const wrapper = shallowMount(WtSwitcher, {
       stubs: { WtLabel },
-      propsData: { label },
+      props: { label },
     });
     expect(wrapper.find('.wt-switcher__label').text()).toBe(label);
   });
@@ -23,7 +23,7 @@ describe('WtSwitcher', () => {
     const value = true;
     const wrapper = shallowMount(WtSwitcher, {
       stubs: { WtLabel },
-      propsData: { value },
+      props: { value },
     });
     wrapper.find('.wt-switcher__input').trigger('change');
     expect(wrapper.emitted().change[0]).toEqual([!value]);

package/src/components/molecules/wt-tabs/__tests__/WtTabs.spec.js

@@ -10,7 +10,7 @@ describe('WtTabs', () => {
 
   it('component emits change at tab click', () => {
     const wrapper = shallowMount(WtTabs, {
-      propsData: { tabs },
+      props: { tabs },
     });
     wrapper.find('.wt-tab').trigger('click');
     expect(wrapper.emitted().change.pop()).toEqual([tabs[0]]);
@@ -18,7 +18,7 @@ describe('WtTabs', () => {
 
   it('renders tab default content', () => {
     const wrapper = shallowMount(WtTabs, {
-      propsData: { tabs },
+      props: { tabs },
     });
     expect(wrapper.find('.wt-tab').text()).toBe(tabs[0].text);
   });
@@ -26,7 +26,7 @@ describe('WtTabs', () => {
   it('renders tab custom content via default slot', () => {
     const custom = 'custom name';
     const wrapper = shallowMount(WtTabs, {
-      propsData: { tabs },
+      props: { tabs },
       slots: {
         tab1: custom,
       },

package/src/components/molecules/wt-tags-input/__tests__/WtTagsInput.spec.js

@@ -12,7 +12,7 @@ describe('WtTagsInput', () => {
     const label = 'Hello there';
     const wrapper = shallowMount(WtTagsInput, {
       stubs: { WtLabel },
-      propsData: { label },
+      props: { label },
     });
     expect(wrapper.find('.wt-label').text()).toBe(label);
   });
@@ -20,7 +20,7 @@ describe('WtTagsInput', () => {
   it('by default emits "input" event at native "tag" event', () => {
     const tag = '123';
     const wrapper = shallowMount(WtTagsInput, {
-      propsData: {
+      props: {
         value: [],
       },
     });
@@ -31,7 +31,7 @@ describe('WtTagsInput', () => {
   it('in manual mode doesnt emit "input" event at native "tag" event', () => {
     const tag = '123';
     const wrapper = shallowMount(WtTagsInput, {
-      propsData: {
+      props: {
         value: [],
         manualTagging: true,
       },

package/src/components/molecules/wt-tags-input/wt-tags-input.vue

@@ -29,7 +29,7 @@
       :placeholder="placeholder || label"
       :taggable="taggable"
       :track-by="trackBy"
-      :value="selectValue"
+      :model-value="selectValue"
       class="wt-tags-input__select"
       multiple
       v-bind="$attrs"

package/src/components/molecules/wt-textarea/__tests__/WtTextarea.spec.js

@@ -18,7 +18,7 @@ describe('WtTextarea', () => {
       stubs: {
         WtLabel,
       },
-      propsData: { label },
+      props: { label },
     });
     expect(wrapper.find('.wt-label').text()).toBe(label);
   });
@@ -28,7 +28,7 @@ describe('WtTextarea', () => {
       stubs: {
         WtLabel,
       },
-      propsData: { chatMode: true },
+      props: { chatMode: true },
     });
     wrapper.find('.wt-textarea__textarea').trigger('keypress', { key: 'Enter' });
     expect(wrapper.emitted().enter).toBeTruthy();

package/src/components/molecules/wt-time-input/__tests__/WtTimeInput.spec.js

@@ -18,7 +18,7 @@ describe('WtTimeInput', () => {
       stubs: {
         WtLabel,
       },
-      propsData: { label },
+      props: { label },
     });
     expect(wrapper.find('.wt-label').text()).toBe(label);
   });

package/src/components/molecules/wt-timepicker/__tests__/WtTimepicker.spec.js

@@ -17,7 +17,7 @@ describe('WtTimepicker', () => {
       stubs: {
         WtTimeInput,
       },
-      propsData: { format: 'mm' },
+      props: { format: 'mm' },
     });
     expect(wrapper.findAllComponents(WtTimeInput).length).toBe(1);
   });
@@ -28,7 +28,7 @@ describe('WtTimepicker', () => {
       stubs: {
         WtTimeInput,
       },
-      propsData: { value },
+      props: { value },
     });
     wrapper.findAllComponents(WtTimeInput).at(0).vm.$emit('input', 21);
     expect(wrapper.emitted().input[0]).toEqual([21 * 60 * 60]);
@@ -40,7 +40,7 @@ describe('WtTimepicker', () => {
       stubs: {
         WtTimeInput,
       },
-      propsData: { value },
+      props: { value },
     });
     wrapper.findAllComponents(WtTimeInput).at(1).vm.$emit('input', 21);
     expect(wrapper.emitted().input[0]).toEqual([21 * 60]);
@@ -52,7 +52,7 @@ describe('WtTimepicker', () => {
       stubs: {
         WtTimeInput,
       },
-      propsData: { value },
+      props: { value },
     });
     wrapper.findAllComponents(WtTimeInput).at(2).vm.$emit('input', 21);
     expect(wrapper.emitted().input[0]).toEqual([21]);

package/src/components/organisms/wt-app-header/__tests__/WtAppNavigator.spec.js

@@ -14,7 +14,7 @@ describe('WtAppNavigator', () => {
   });
   it('renders specified app cards', () => {
     const wrapper = shallowMount(WtAppNavigator, {
-      propsData: {
+      props: {
         apps,
       },
     });

package/src/components/organisms/wt-app-header/__tests__/WtHeaderActions.spec.js

@@ -13,7 +13,7 @@ describe('WtHeaderActions', () => {
       account: 'acc@ou.nt',
     };
     const wrapper = shallowMount(WtHeaderActions, {
-      propsData: { user },
+      props: { user },
     });
     expect(wrapper.find('.wt-header-actions__name').text()).toBe(user.name);
     expect(wrapper.find('.wt-header-actions__account').text()).toBe(user.account);

package/src/components/organisms/wt-error-page/__tests__/wt-error-page.spec.js

@@ -3,15 +3,15 @@ import ErrorPage from '../wt-error-page.vue';
 
 describe('Error Page', () => {
   it('renders a component', () => {
-    const wrapper = shallowMount(ErrorPage, { propsData: { type: '' } });
+    const wrapper = shallowMount(ErrorPage, { props: { type: '' } });
     expect(wrapper.exists()).toBe(true);
   });
   it('renders a component with 404 type', () => {
-    const wrapper = shallowMount(ErrorPage, { propsData: { type: '404' } });
+    const wrapper = shallowMount(ErrorPage, { props: { type: '404' } });
     expect(wrapper.exists()).toBe(true);
   });
   it('renders a component with 403 type', () => {
-    const wrapper = shallowMount(ErrorPage, { propsData: { type: '403' } });
+    const wrapper = shallowMount(ErrorPage, { props: { type: '403' } });
     expect(wrapper.exists()).toBe(true);
   });
 });