@webitel/ui-sdk 23.12.37 → 23.12.39-vite

package/src/modules/AuditForm/components/audit-form-question-write-wrapper.vue

@@ -6,24 +6,24 @@
         :label="$t('reusable.required')"
         :disabled="first"
         @change="updateQuestion({ path: 'required', value: $event })"
-      ></wt-switcher>
+      />
       <div class="audit-form-question-write-header__actions">
         <wt-tooltip>
-          <template v-slot:activator>
+          <template #activator>
             <wt-icon-btn
               icon="copy"
               @click="emit('copy')"
-            ></wt-icon-btn>
+            />
           </template>
           {{ $t('reusable.copy') }}
         </wt-tooltip>
         <wt-tooltip>
-          <template v-slot:activator>
+          <template #activator>
             <wt-icon-btn
               icon="bucket"
               :disabled="first"
               @click="emit('delete')"
-            ></wt-icon-btn>
+            />
           </template>
           {{ $t('reusable.delete') }}
         </wt-tooltip>
@@ -38,7 +38,7 @@
           required
           prevent-trim
           @input="updateQuestion({ path: 'question', value: $event })"
-        ></wt-input>
+        />
         <wt-select
           :value="prettifiedQuestionType"
           :options="QuestionType"
@@ -46,14 +46,14 @@
           :clearable="false"
           :label="$t('webitelUI.auditForm.answerType')"
           @input="handleQuestionTypeChange($event.value)"
-        ></wt-select>
+        />
       </div>
       <component
         :is="QuestionTypeComponent"
         :question="question"
         mode="write"
         @change:question="emit('change:question', $event)"
-      ></component>
+      />
     </section>
   </article>
 </template>

package/src/modules/AuditForm/components/audit-form-question.vue

@@ -3,13 +3,13 @@
     :is="component"
     v-clickaway="saveQuestion"
     :class="[
-     `audit-form-question--mode-${mode}`,
-     {
-       'audit-form-question--answered': isResult,
-     },
-     {
-       'audit-form-question--sort-ignore': first && mode === 'fill'
-     }
+      `audit-form-question--mode-${mode}`,
+      {
+        'audit-form-question--answered': isResult,
+      },
+      {
+        'audit-form-question--sort-ignore': first && mode === 'fill'
+      }
     ]"
     :disable-dragging="mode === 'fill'"
     :first="first"
@@ -23,7 +23,7 @@
     @delete="emits('delete')"
     @change:question="emits('update:question', $event)"
     @change:result="emits('update:result', $event)"
-  ></component>
+  />
 </template>
 
 <script setup>

package/src/modules/AuditForm/components/audit-form.vue

@@ -1,9 +1,9 @@
 <template>
   <section class="audit-form">
     <div
-      class="audit-form__sortable-wrapper"
-      ref="sortableWrapper"
       v-if="!reloadSortable"
+      ref="sortableWrapper"
+      class="audit-form__sortable-wrapper"
     >
       <audit-form-question
         v-for="(question, key) of questions"
@@ -18,14 +18,15 @@
         @delete="deleteQuestion({ question, key})"
         @update:question="handleQuestionUpdate({ key, value: $event })"
         @update:result="handleResultUpdate({ key, value: $event })"
-      ></audit-form-question>
+      />
     </div>
     <wt-button
-      class="audit-form__add-button"
       v-if="mode === 'create' && !readonly"
+      class="audit-form__add-button"
       :disabled="isInvalidForm"
       @click="addQuestion"
-    >{{ $t('webitelUI.auditForm.addQuestion') }}
+    >
+      {{ $t('webitelUI.auditForm.addQuestion') }}
     </wt-button>
   </section>
 </template>

package/src/modules/AuditForm/components/questions/options/audit-form-question-options-write-row.vue

@@ -6,21 +6,21 @@
       :v="v$.option.name"
       prevent-trim
       @input="emit('update:option', { name: $event, score: option.score })"
-    ></wt-input>
+    />
     <wt-input
       :label="$t('webitelUI.auditForm.score', 1)"
       :value="option.score"
       :v="v$.option.score"
       type="number"
       @input="emit('update:option', { name: option.name, score: $event })"
-    ></wt-input>
+    />
     <wt-tooltip class="audit-form-question-options-write-row__tooltip">
-      <template v-slot:activator>
+      <template #activator>
         <wt-icon-btn
           :disabled="first"
           icon="bucket"
           @click="emit('delete')"
-        ></wt-icon-btn>
+        />
       </template>
       {{ $t('reusable.delete') }}
     </wt-tooltip>

package/src/modules/AuditForm/components/questions/options/audit-form-question-options.vue

@@ -11,11 +11,12 @@
         :first="key === 0"
         @update:option="updateQuestion({ path: `options[${key}]`, value: $event })"
         @delete="deleteQuestionOption({ key })"
-      ></options-write-row>
+      />
       <wt-button
         class="audit-form-question-options-write__add-button"
         @click="addQuestionOption"
-      >{{ $t('reusable.add') }}
+      >
+        {{ $t('reusable.add') }}
       </wt-button>
     </div>
     <div
@@ -29,9 +30,11 @@
         :selected="result"
         :value="opt"
         @input="emit('change:result', $event)"
-      ></wt-radio>
+      />
+    </div>
+    <div v-else>
+      Unknown mode: {{ mode }}
     </div>
-    <div v-else>Unknown mode: {{ mode }}</div>
   </article>
 </template>
 

package/src/modules/AuditForm/components/questions/score/audit-form-question-score.vue

@@ -13,7 +13,7 @@
         type="number"
         required
         @input="updateQuestion({ path: 'min', value: $event })"
-      ></wt-input>
+      />
       <wt-input
         :value="question.max"
         :v="v$.question.max"
@@ -23,7 +23,7 @@
         type="number"
         required
         @input="updateQuestion({ path: 'max', value: $event })"
-      ></wt-input>
+      />
     </div>
     <div
       v-else-if="mode === 'read'"
@@ -36,7 +36,7 @@
         :value="value"
         :selected="isResult ? result.score : null"
         @input="emit('change:result', { score: value })"
-      ></wt-radio>
+      />
     </div>
   </article>
 </template>

package/src/modules/CSVExport/__tests__/CSVExport.spec.js

@@ -4,8 +4,8 @@ import stringify from 'csv-stringify/lib/sync';
 import CSVExportMixin from '../mixins/exportCSVMixin';
 import '../../../../tests/mocks/localStorageMock';
 
-jest.mock('csv-stringify/lib/sync');
-jest.mock('file-saver');
+vi.mock('csv-stringify/lib/sync');
+vi.mock('file-saver');
 const dataList = [
   { _isSelected: true, id: 1 },
   { _isSelected: true, id: 2 },

package/src/modules/DeleteConfirmationPopup/__tests__/delete-confirmation-popup.spec.js

@@ -3,7 +3,7 @@ import { ref } from 'vue';
 import { useValidation } from '../../../mixins/validationMixin/useValidation';
 import DeleteConfirmationPopup from '../components/delete-confirmation-popup.vue';
 
-jest.mock('../../../mixins/validationMixin/useValidation');
+vi.mock('../../../mixins/validationMixin/useValidation');
 
 useValidation.mockImplementation(() => ({
   isValidation: ref(false),
@@ -16,14 +16,14 @@ describe('DeleteConfirmationPopup', () => {
     const wrapper = shallowMount(DeleteConfirmationPopup, {
       props: {
         deleteCount: 1,
-        callback: jest.fn(),
+        callback: vi.fn(),
       },
     });
     expect(wrapper.classes('delete-confirmation-popup')).toBe(true);
   });
 
   it('yes button called props callback', async () => {
-    const callback = jest.fn();
+    const callback = vi.fn();
     const wrapper = mount(DeleteConfirmationPopup, {
       props: {
         deleteCount: 1,
@@ -42,7 +42,7 @@ describe('DeleteConfirmationPopup', () => {
     const wrapper = mount(DeleteConfirmationPopup, {
       props: {
         deleteCount,
-        callback: jest.fn(),
+        callback: vi.fn(),
       },
     });
     expect(wrapper.find('.delete-confirmation-popup__content').text())
@@ -53,7 +53,7 @@ describe('DeleteConfirmationPopup', () => {
     const wrapper = mount(DeleteConfirmationPopup, {
       props: {
         deleteCount: 1,
-        callback: jest.fn(),
+        callback: vi.fn(),
       },
     });
     const button = wrapper.findAllComponents({ name: 'wt-button' }).find((btn) => btn.text().includes('Yes'));
@@ -66,7 +66,7 @@ describe('DeleteConfirmationPopup', () => {
     const wrapper = mount(DeleteConfirmationPopup, {
       props: {
         deleteCount: 1,
-        callback: jest.fn(),
+        callback: vi.fn(),
       },
     });
     const button = wrapper.findAllComponents({ name: 'wt-button' }).find((btn) => btn.text().includes('No'));

package/src/modules/DeleteConfirmationPopup/components/delete-confirmation-popup.vue

@@ -4,26 +4,33 @@
     width="500"
     @close="close"
   >
-    <template v-slot:title>{{ $t('webitelUI.deleteConfirmationPopup.title') }}</template>
-    <template v-slot:main>
+    <template #title>
+      {{ $t('webitelUI.deleteConfirmationPopup.title') }}
+    </template>
+    <template #main>
       <div class="delete-confirmation-popup__content">
-        <wt-icon icon="attention" color="error"/>
+        <wt-icon
+          icon="attention"
+          color="error"
+        />
         <p class="delete-confirmation-popup__message">
           {{ deleteMessage }}
         </p>
       </div>
     </template>
-    <template v-slot:actions>
+    <template #actions>
       <wt-button
         :loading="isDeleting"
         @click="confirm"
-      >{{ $t('vocabulary.yes') }}
+      >
+        {{ $t('vocabulary.yes') }}
       </wt-button>
       <wt-button
         :disabled="isDeleting"
         color="secondary"
         @click="close"
-      >{{ $t('vocabulary.no') }}
+      >
+        {{ $t('vocabulary.no') }}
       </wt-button>
     </template>
   </wt-popup>

package/src/modules/FilesExport/__tests__/FilesExport.spec.js

@@ -5,9 +5,9 @@ import jszipUtils from 'jszip-utils';
 import FilesExportMixin from '../mixins/exportFilesMixin';
 import '../../../../tests/mocks/localStorageMock';
 
-jest.mock('jszip');
-jest.mock('jszip-utils');
-jest.mock('file-saver');
+vi.mock('jszip');
+vi.mock('jszip-utils');
+vi.mock('file-saver');
 const dataList = [
   { files: [{ name: 'jest', id: '1', mimeType: 'mime/type' }] },
 ];

package/src/modules/Filters/components/filter-pagination.vue

@@ -8,7 +8,7 @@
     @change="setSize(localSize)"
     @next="setPage(+page + 1)"
     @prev="setPage(page - 1)"
-  ></wt-pagination>
+  />
 </template>
 
 <script setup>

package/src/modules/Filters/components/filter-table-fields.vue

@@ -3,7 +3,7 @@
     :headers="headers"
     :static-headers="staticHeaders"
     @change="handleChange"
-  ></wt-table-column-select>
+  />
 </template>
 
 <script setup>

package/src/modules/Notifications/store/__tests__/NotificationsStoreModule.actions.spec.js

@@ -14,8 +14,8 @@ const state = {
 
 describe('features/notifications store: actions', () => {
   const context = {
-    dispatch: jest.fn(),
-    commit: jest.fn(),
+    dispatch: vi.fn(),
+    commit: vi.fn(),
     getters: {
       IS_MAIN_TAB: () => true,
       IS_SOUND_ALLOWED: () => true,
@@ -69,7 +69,7 @@ describe('features/notifications store: actions', () => {
   it('_SUBSCRIBE_TAB_CLOSING action commits SET_CURRENT_TAB_ID mutation', async () => {
     await notificationsModule.actions._SUBSCRIBE_TAB_CLOSING(context);
     window.dispatchEvent(new Event('storage'));
-    expect(context.commit).toHaveBeenCalledWith('SET_CURRENT_TAB_ID', 'null');
+    expect(context.commit).toHaveBeenCalledWith('SET_CURRENT_TAB_ID', null);
   });
 
   it('PLAY_SOUND action commits SET_CURRENTLY_PLAIYNG mutation with sound', async () => {

package/src/modules/QueryFilters/classes/__tests__/ApiFilterSchema.spec.js

@@ -1,7 +1,7 @@
 import ApiFilterSchema from '../ApiFilterSchema';
 
 describe('Api Filter Schema', () => {
-  const APIMock = jest.fn();
+  const APIMock = vi.fn();
   beforeEach(() => {
     APIMock.mockClear();
   });

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

@@ -15,10 +15,10 @@ describe('Abstract Api Filter', () => {
   const filterSchema = new ApiFilterSchema({
     locale: { label: '' }
   });
-  const searchMock = jest.fn();
-  const fetchSelectedMock = jest.fn(() => ({ items: [] }));
-  jest.spyOn(filterSchema, 'search').mockImplementation(searchMock);
-  jest.spyOn(filterSchema, 'fetchSelected').mockImplementation(fetchSelectedMock);
+  const searchMock = vi.fn();
+  const fetchSelectedMock = vi.fn(() => ({ items: [] }));
+  vi.spyOn(filterSchema, 'search').mockImplementation(searchMock);
+  vi.spyOn(filterSchema, 'fetchSelected').mockImplementation(fetchSelectedMock);
   const store = createStore({
     modules: {
       [namespace]: {

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

@@ -41,8 +41,8 @@ describe('DatetimeFilter Filter', () => {
   it('initial restoreValue() triggers setValue() method', async () => {
     const value = Date.now();
     await router.replace({ query: { [filterQuery]: value } });
-    const setValueMock = jest.fn();
-    jest.spyOn(baseFilterMixin.methods, 'setValue').mockImplementationOnce(setValueMock);
+    const setValueMock = vi.fn();
+    vi.spyOn(baseFilterMixin.methods, 'setValue').mockImplementationOnce(setValueMock);
     shallowMount(DatetimeFilter, mountOptions);
     expect(setValueMock).toHaveBeenCalledWith({ filter: filterQuery, value });
   });

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

@@ -39,8 +39,8 @@ describe('FilterFromTo Filter', () => {
   it('initial restoreValue() triggers setValue() method: From case', async () => {
     const value = 10;
     await router.replace({ query: { [`${filterQuery}From`]: value } });
-    const setValueMock = jest.fn();
-    jest.spyOn(baseFilterMixin.methods, 'setValue')
+    const setValueMock = vi.fn();
+    vi.spyOn(baseFilterMixin.methods, 'setValue')
     .mockImplementation(setValueMock);
     shallowMount(FilterFromTo, mountOptions);
     expect(setValueMock).toHaveBeenNthCalledWith(1, {
@@ -51,8 +51,8 @@ describe('FilterFromTo Filter', () => {
   it('initial restoreValue() triggers setValue() method: To case', async () => {
     const value = 10;
     await router.replace({ query: { [`${filterQuery}To`]: value } });
-    const setValueMock = jest.fn();
-    jest.spyOn(baseFilterMixin.methods, 'setValue')
+    const setValueMock = vi.fn();
+    vi.spyOn(baseFilterMixin.methods, 'setValue')
     .mockImplementation(setValueMock);
     shallowMount(FilterFromTo, mountOptions);
     expect(setValueMock).toHaveBeenNthCalledWith(2, {

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

@@ -39,8 +39,8 @@ describe('Search Filter', () => {
   it('initial restoreValue() triggers setValue() method', async () => {
     const search = 'jest';
     await router.replace({ query: { [filterQuery]: search } });
-    const setValueMock = jest.fn();
-    jest.spyOn(baseFilterMixin.methods, 'setValue').mockImplementationOnce(setValueMock);
+    const setValueMock = vi.fn();
+    vi.spyOn(baseFilterMixin.methods, 'setValue').mockImplementationOnce(setValueMock);
     shallowMount(SearchFilter, mountOptions);
     expect(setValueMock).toHaveBeenCalledWith({ filter: filterQuery, value: search });
   });

package/src/modules/QueryFilters/components/abstract-api-filter.vue

@@ -10,14 +10,14 @@
     @input="setValue({ filter: filterQuery, value: $event })"
     @reset="setValueToQuery({ value, filterQuery, storedProp: filterSchema.storedProp })"
     @closed="setValueToQuery({ value, filterQuery, storedProp: filterSchema.storedProp })"
-  ></wt-select>
+  />
 </template>
 
 <script>
 import apiFilterMixin from '../mixins/apiFilterMixin';
 
 export default {
-  name: 'abstract-api-filter',
+  name: 'AbstractApiFilter',
   mixins: [apiFilterMixin],
   props: {
     filterQuery: {

package/src/modules/QueryFilters/components/abstract-enum-filter.vue

@@ -9,14 +9,14 @@
     @input="setValue({ filter: filterQuery, value: $event })"
     @reset="setValueToQuery({ value, filterQuery, storedProp: filterSchema.storedProp })"
     @closed="setValueToQuery({ value, filterQuery, storedProp: filterSchema.storedProp })"
-  ></wt-select>
+  />
 </template>
 
 <script>
 import enumFilterMixin from '../mixins/enumFilterMixin';
 
 export default {
-  name: 'abstract-enum-filter',
+  name: 'AbstractEnumFilter',
   mixins: [enumFilterMixin],
   props: {
     filterQuery: {

package/src/modules/QueryFilters/components/filter-datetime.vue

@@ -4,14 +4,14 @@
     :label="label"
     mode="datetime"
     @input="handleChange"
-  ></wt-datepicker>
+  />
 </template>
 
 <script>
 import baseFilterMixin from '../mixins/baseFilterMixin/baseFilterMixin';
 
 export default {
-  name: 'filter-from',
+  name: 'FilterFrom',
   mixins: [baseFilterMixin],
   props: {
     filterQuery: {

package/src/modules/QueryFilters/components/filter-from-to.vue

@@ -6,7 +6,8 @@
         <wt-label
           class="filter-from-to__input-label"
           for="filter-from-to-from"
-        >{{ $t('reusable.from') }}
+        >
+          {{ $t('reusable.from') }}
         </wt-label>
         <wt-input
           class="filter-from-to-input"
@@ -16,13 +17,14 @@
           :number-min="0"
           :number-max="numberMax"
           @input="setFrom"
-        ></wt-input>
+        />
       </div>
       <div class="filter-from-to__input-wrapper">
         <wt-label
           class="filter-from-to__input-label"
           for="filter-from-to-to"
-        >{{ $t('reusable.to') }}
+        >
+          {{ $t('reusable.to') }}
         </wt-label>
         <wt-input
           class="filter-from-to-input"
@@ -32,7 +34,7 @@
           :number-min="0"
           :number-max="numberMax"
           @input="setTo"
-        ></wt-input>
+        />
       </div>
     </div>
   </div>
@@ -43,7 +45,7 @@ import debounce from '../../../scripts/debounce';
 import baseFilterMixin from '../mixins/baseFilterMixin/baseFilterMixin';
 
 export default {
-  name: 'filter-from-to',
+  name: 'FilterFromTo',
   mixins: [baseFilterMixin],
   props: {
     filterQuery: {
@@ -57,6 +59,11 @@ export default {
       type: Number,
     },
   },
+
+  created() {
+    this.setFrom = debounce(this.setFrom);
+    this.setTo = debounce(this.setTo);
+  },
   methods: {
     restore() {
       this.restoreFrom();
@@ -97,11 +104,6 @@ export default {
       });
     },
   },
-
-  created() {
-    this.setFrom = debounce(this.setFrom);
-    this.setTo = debounce(this.setTo);
-  },
 };
 </script>
 

package/src/modules/QueryFilters/components/filter-search.vue

@@ -2,9 +2,9 @@
   <wt-search-bar
     :value="filterSchema.value"
     debounce
+    :placeholder="$t('reusable.search')"
     @input="setValue({ filter: filterQuery, value: $event })"
     @search="setValueToQuery({ filterQuery, value: $event })"
-    :placeholder="$t('reusable.search')"
   />
 </template>
 
@@ -12,7 +12,7 @@
 import baseFilterMixin from '../mixins/baseFilterMixin/baseFilterMixin';
 
 export default {
-  name: 'filter-search',
+  name: 'FilterSearch',
   mixins: [baseFilterMixin],
   props: {
     filterQuery: {

package/src/modules/QueryFilters/components/filter-table-fields.vue

@@ -3,15 +3,20 @@
     :headers="headers"
     :static-headers="staticHeaders"
     @change="change"
-  ></wt-table-column-select>
+  />
 </template>
 
 <script>
 import baseFilterMixin from '../mixins/baseFilterMixin/baseFilterMixin';
 
 export default {
-  name: 'filter-table-fields',
+  name: 'FilterTableFields',
   mixins: [baseFilterMixin],
+
+  model: {
+    prop: 'headers',
+    event: 'change',
+  },
   props: {
     entity: {
       type: String,
@@ -31,11 +36,6 @@ export default {
     filterQuery: 'fields',
   }),
 
-  model: {
-    prop: 'headers',
-    event: 'change',
-  },
-
   methods: {
     change(headers) {
       this.setValue(headers);

package/src/modules/QueryFilters/mixins/__tests__/apiFilterMixin.spec.js

@@ -12,7 +12,7 @@ const team = ['1', '2'];
 const filterSchema = new ApiFilterSchema();
 
 describe('API filter mixin', () => {
-  const setValue = jest.fn();
+  const setValue = vi.fn();
   const Component = {
     render() {},
     mixins: [apiFilterMixin],

package/src/modules/QueryFilters/mixins/__tests__/enumFilterMixin.spec.js

@@ -17,7 +17,7 @@ const router = createRouter({
 });
 
 describe('Enum filter mixin', () => {
-  const setValue = jest.fn();
+  const setValue = vi.fn();
   const Component = {
     render() {
     },
@@ -53,7 +53,7 @@ describe('Enum filter mixin', () => {
 
   it('Attaches locales to options, if they have "locale" key', async () => {
     const options = [{
-      locale: 'jest.locale',
+      locale: 'vi.locale',
     }];
     const expectedOptions = [{
       locale: options[0].locale,

package/src/modules/QueryFilters/mixins/__tests__/paginationFilterMixin.spec.js

@@ -11,8 +11,8 @@ const page = 2;
 const size = 20;
 
 describe('Pagination filter mixin', () => {
-  const setPage = jest.fn();
-  const setSize = jest.fn();
+  const setPage = vi.fn();
+  const setSize = vi.fn();
   let wrapper;
   const Component = {
     render() {},

package/src/modules/QueryFilters/mixins/__tests__/sortFilterMixin.spec.js

@@ -32,7 +32,7 @@ const sortedHeaders = [{
 }];
 
 describe('Sort filter mixin', () => {
-  const setHeaders = jest.fn();
+  const setHeaders = vi.fn();
   const Component = {
     render() {},
     mixins: [sortFilterMixin],