@webitel/ui-sdk 24.12.29 → 24.12.34

package/src/modules/Appearance/components/__tests__/wt-dark-mode-switcher.spec.js

@@ -19,8 +19,12 @@ describe('WtDarkModeSwitcher', () => {
   });
 
   it('toggles dark mode class', async () => {
-    expect(window.document.documentElement.classList.contains('theme--dark')).toBe(false);
+    expect(
+      window.document.documentElement.classList.contains('theme--dark'),
+    ).toBe(false);
     await wrapper.findComponent({ name: 'wt-switcher' }).trigger('change');
-    expect(window.document.documentElement.classList.contains('theme--dark')).toBe(true);
+    expect(
+      window.document.documentElement.classList.contains('theme--dark'),
+    ).toBe(true);
   });
 });

package/src/modules/AuditForm/components/__tests__/audit-form-question-write-wrapper.spec.js

@@ -25,8 +25,12 @@ describe('AuditFormQuestionWriteWrapper', () => {
         v,
       },
     });
-    wrapper.findComponent({ name: 'wt-switcher' }).vm.$emit('change', !question.required);
-    expect(wrapper.emitted()['change:question'][0][0].required).toBe(!question.required);
+    wrapper
+      .findComponent({ name: 'wt-switcher' })
+      .vm.$emit('change', !question.required);
+    expect(wrapper.emitted()['change:question'][0][0].required).toBe(
+      !question.required,
+    );
   });
   it('correctly changes question type to Score', () => {
     const question = {};
@@ -40,7 +44,9 @@ describe('AuditFormQuestionWriteWrapper', () => {
       .find('.audit-form-question-write-content-question')
       .findComponent({ name: 'wt-select' })
       .vm.$emit('input', { value: EngineAuditQuestionType.Score });
-    expect(wrapper.emitted()['change:question'][0][0]).toEqual(generateQuestionScoreSchema());
+    expect(wrapper.emitted()['change:question'][0][0]).toEqual(
+      generateQuestionScoreSchema(),
+    );
   });
   it('correctly changes question type to Options', () => {
     const question = {};
@@ -54,6 +60,8 @@ describe('AuditFormQuestionWriteWrapper', () => {
       .find('.audit-form-question-write-content-question')
       .findComponent({ name: 'wt-select' })
       .vm.$emit('input', { value: EngineAuditQuestionType.Option });
-    expect(wrapper.emitted()['change:question'][0][0]).toEqual(generateQuestionOptionsSchema());
+    expect(wrapper.emitted()['change:question'][0][0]).toEqual(
+      generateQuestionOptionsSchema(),
+    );
   });
 });

package/src/modules/AuditForm/components/__tests__/audit-form.spec.js

@@ -4,9 +4,13 @@ import { useDestroyableSortable } from '../../../../composables/useDestroyableSo
 import { generateQuestionSchema } from '../../schemas/AuditFormQuestionSchema.js';
 import AuditForm from '../audit-form.vue';
 
-vi.mock('../../../../composables/useDestroyableSortable/useDestroyableSortable.js');
+vi.mock(
+  '../../../../composables/useDestroyableSortable/useDestroyableSortable.js',
+);
 
-useDestroyableSortable.mockImplementation(() => ({ reloadSortable: ref(false) }));
+useDestroyableSortable.mockImplementation(() => ({
+  reloadSortable: ref(false),
+}));
 
 describe('AuditForm', () => {
   it('renders a component', async () => {
@@ -41,7 +45,9 @@ describe('AuditForm', () => {
         questions: [generateQuestionSchema()],
       },
     });
-    await wrapper.findComponent({ name: 'audit-form-question' }).vm.$emit('delete', { key: 0 });
+    await wrapper
+      .findComponent({ name: 'audit-form-question' })
+      .vm.$emit('delete', { key: 0 });
     expect(wrapper.emitted()['update:questions'][0][0]).toEqual([]);
   });
   it('copy event from child question emits update with duplicated questions', async () => {
@@ -55,13 +61,20 @@ describe('AuditForm', () => {
     await wrapper
       .findComponent({ name: 'audit-form-question' })
       .vm.$emit('copy', { question, key: 0 });
-    expect(wrapper.emitted()['update:questions'][0][0]).toEqual([question, question]);
+    expect(wrapper.emitted()['update:questions'][0][0]).toEqual([
+      question,
+      question,
+    ]);
   });
   it('initializes result depending on passed questions', () => {
     const wrapper = mount(AuditForm, {
       props: {
         mode: 'fill',
-        questions: [generateQuestionSchema(), generateQuestionSchema(), generateQuestionSchema()],
+        questions: [
+          generateQuestionSchema(),
+          generateQuestionSchema(),
+          generateQuestionSchema(),
+        ],
       },
     });
     expect(wrapper.emitted()['update:result'][0][0]).toEqual([{}, {}, {}]);

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

@@ -76,8 +76,10 @@ const props = defineProps({
 const emit = defineEmits(['change:result', 'activate']);
 
 const QuestionTypeComponent = computed(() => {
-  if (props.question.type === EngineAuditQuestionType.Option) return AuditFormQuestionOptions;
-  if (props.question.type === EngineAuditQuestionType.Score) return AuditFormQuestionScore;
+  if (props.question.type === EngineAuditQuestionType.Option)
+    return AuditFormQuestionOptions;
+  if (props.question.type === EngineAuditQuestionType.Score)
+    return AuditFormQuestionScore;
   return null;
 });
 

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

@@ -92,8 +92,14 @@ const props = defineProps({
 const emit = defineEmits(['change:question', 'copy', 'delete']);
 
 const QuestionType = [
-  { value: EngineAuditQuestionType.Option, locale: 'webitelUI.auditForm.type.options' },
-  { value: EngineAuditQuestionType.Score, locale: 'webitelUI.auditForm.type.score' },
+  {
+    value: EngineAuditQuestionType.Option,
+    locale: 'webitelUI.auditForm.type.options',
+  },
+  {
+    value: EngineAuditQuestionType.Score,
+    locale: 'webitelUI.auditForm.type.score',
+  },
 ];
 
 const prettifiedQuestionType = computed(() =>
@@ -101,8 +107,10 @@ const prettifiedQuestionType = computed(() =>
 );
 
 const QuestionTypeComponent = computed(() => {
-  if (props.question.type === EngineAuditQuestionType.Option) return AuditFormQuestionOptions;
-  if (props.question.type === EngineAuditQuestionType.Score) return AuditFormQuestionScore;
+  if (props.question.type === EngineAuditQuestionType.Option)
+    return AuditFormQuestionOptions;
+  if (props.question.type === EngineAuditQuestionType.Score)
+    return AuditFormQuestionScore;
   return null;
 });
 
@@ -143,7 +151,9 @@ function handleQuestionTypeChange(type) {
 
 .audit-form-question-write-content-question {
   display: grid;
-  margin-right: calc(24px + var(--spacing-sm)); // delete icon action for type "options"
+  margin-right: calc(
+    24px + var(--spacing-sm)
+  ); // delete icon action for type "options"
   margin-bottom: var(--spacing-sm);
   grid-template-columns: 3fr 1fr;
   gap: var(--spacing-sm);

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

@@ -8,8 +8,8 @@
         'audit-form-question--answered': isResult,
       },
       {
-        'audit-form-question--sort-ignore': first && mode === 'fill'
-      }
+        'audit-form-question--sort-ignore': first && mode === 'fill',
+      },
     ]"
     :disable-dragging="mode === 'fill'"
     :first="first"
@@ -56,7 +56,12 @@ const props = defineProps({
   },
 });
 
-const emits = defineEmits(['copy', 'delete', 'update:question', 'update:result']);
+const emits = defineEmits([
+  'copy',
+  'delete',
+  'update:question',
+  'update:result',
+]);
 
 const QuestionState = {
   SAVED: 'saved',
@@ -78,7 +83,8 @@ const v$ = useVuelidate(
         }
       : {
           result: {
-            required: (value) => (question.value.required ? !isEmpty(value) : true),
+            required: (value) =>
+              question.value.required ? !isEmpty(value) : true,
           },
         },
   ),

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

@@ -13,9 +13,9 @@
         :mode="mode"
         :question="question"
         :readonly="readonly"
-        :result="(result && result[key]) ? result[key] : null"
+        :result="result && result[key] ? result[key] : null"
         @copy="copyQuestion({ question, key })"
-        @delete="deleteQuestion({ question, key})"
+        @delete="deleteQuestion({ question, key })"
         @update:question="handleQuestionUpdate({ key, value: $event })"
         @update:result="handleResultUpdate({ key, value: $event })"
       />
@@ -34,7 +34,15 @@
 <script setup>
 import { useVuelidate } from '@vuelidate/core';
 import cloneDeep from 'lodash/cloneDeep.js';
-import { computed, nextTick, onMounted, reactive, ref, watch, watchEffect } from 'vue';
+import {
+  computed,
+  nextTick,
+  onMounted,
+  reactive,
+  ref,
+  watch,
+  watchEffect,
+} from 'vue';
 import WtButton from '../../../components/wt-button/wt-button.vue';
 import { useDestroyableSortable } from '../../../composables/useDestroyableSortable/useDestroyableSortable.js';
 import { generateQuestionSchema } from '../schemas/AuditFormQuestionSchema.js';
@@ -61,7 +69,11 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['update:questions', 'update:result', 'update:validation']);
+const emit = defineEmits([
+  'update:questions',
+  'update:result',
+  'update:validation',
+]);
 
 const v$ = useVuelidate();
 
@@ -119,7 +131,8 @@ function initResult() {
 function initQuestions() {
   if (props.mode === 'create' && !props.questions.length) {
     addQuestion({ question: generateQuestionSchema({ required: true }) });
-  } else if (props.questions.length) auditQuestions.value.at(0).activateQuestion();
+  } else if (props.questions.length)
+    auditQuestions.value.at(0).activateQuestion();
 }
 
 // https://my.webitel.com/browse/WTEL-3451, https://my.webitel.com/browse/WTEL-3436
@@ -128,7 +141,9 @@ async function atQuestionAdded() {
   // wait for new question to render
   await nextTick();
   const index =
-    isQuestionAdded.index && isQuestionAdded.index === 'last' ? -1 : isQuestionAdded.index;
+    isQuestionAdded.index && isQuestionAdded.index === 'last'
+      ? -1
+      : isQuestionAdded.index;
   auditQuestions.value.at(index).activateQuestion();
 
   isQuestionAdded.value = false;
@@ -147,7 +162,9 @@ const { reloadSortable } = useDestroyableSortable(sortableWrapper, {
   },
 });
 
-watch(v$, () => emit('update:validation', { invalid: isInvalidForm.value, v$: v$.value }));
+watch(v$, () =>
+  emit('update:validation', { invalid: isInvalidForm.value, v$: v$.value }),
+);
 watchEffect(initResult);
 watch(
   () => props.questions,

package/src/modules/AuditForm/components/questions/options/__tests__/audit-form-question-options.spec.js

@@ -17,7 +17,9 @@ describe('AuditFormQuestionOptions', () => {
         mode: 'write',
       },
     });
-    wrapper.findComponent('.audit-form-question-options-write__add-button').vm.$emit('click');
+    wrapper
+      .findComponent('.audit-form-question-options-write__add-button')
+      .vm.$emit('click');
     expect(wrapper.emitted()['change:question'][0][0].options.length).toBe(2);
   });
   it('deletes existing question option at "delete" icon-btn click', () => {
@@ -27,7 +29,9 @@ describe('AuditFormQuestionOptions', () => {
         mode: 'write',
       },
     });
-    const writeRow = wrapper.findComponent({ name: 'audit-form-question-options-write-row' });
+    const writeRow = wrapper.findComponent({
+      name: 'audit-form-question-options-write-row',
+    });
     writeRow.vm.$emit('delete');
     expect(wrapper.emitted()['change:question'][0][0].options.length).toBe(0);
   });

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

@@ -10,7 +10,9 @@
         :first="key === 0"
         :option="option"
         @delete="deleteQuestionOption({ key })"
-        @update:option="updateQuestion({ path: `options[${key}]`, value: $event })"
+        @update:option="
+          updateQuestion({ path: `options[${key}]`, value: $event })
+        "
       />
       <wt-button
         class="audit-form-question-options-write__add-button"
@@ -25,16 +27,14 @@
     >
       <wt-radio
         v-for="opt of question.options"
-        :key="opt.score+opt.name"
+        :key="opt.score + opt.name"
         :label="opt.name"
         :selected="result"
         :value="opt"
         @input="emit('change:result', $event)"
       />
     </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

@@ -1,6 +1,9 @@
 <template>
   <article class="audit-form-question-score">
-    <div v-if="mode === 'write'" class="audit-form-question-score-write">
+    <div
+      v-if="mode === 'write'"
+      class="audit-form-question-score-write"
+    >
       <wt-input
         :label="$t('reusable.from')"
         :number-max="9"
@@ -24,12 +27,14 @@
     </div>
     <div
       v-else-if="mode === 'read'"
-      class="audit-form-question-score-read">
+      class="audit-form-question-score-read"
+    >
       <wt-radio
-        v-for="(value) of scoreRange"
+        v-for="value of scoreRange"
         :key="value"
         :label="`${value}`"
-        :selected="isResult ? result.score : null" :value="value"
+        :selected="isResult ? result.score : null"
+        :value="value"
         @input="emit('change:result', { score: value })"
       />
     </div>

package/src/modules/CSVExport/CSVExport.js

@@ -33,7 +33,8 @@ export default class CSVExport {
       header: true,
       delimiter,
     };
-    const localStorageOptions = JSON.parse(localStorage.getItem('csv-export-options')) || {};
+    const localStorageOptions =
+      JSON.parse(localStorage.getItem('csv-export-options')) || {};
     return {
       ...defaultOptions,
       ...localStorageOptions,
@@ -60,7 +61,9 @@ export default class CSVExport {
     let csv = '';
     let isNext = false;
     // why _columns? https://webitel.atlassian.net/browse/DEV-3797
-    let columns = params._columns || (params?.fields ? objSnakeToCamel(params?.fields) : []);
+    let columns =
+      params._columns ||
+      (params?.fields ? objSnakeToCamel(params?.fields) : []);
     let page = 1;
 
     do {

package/src/modules/CSVExport/XLSExport.js

@@ -40,21 +40,20 @@ export default class XLSExport {
   }
 
   save(data, columns) {
-    const transformedData = data.map(({
-                                        variables,
-                                        ...item
-                                      }) => {
+    const transformedData = data.map(({ variables, ...item }) => {
       const flatVariables = flatten({ variables });
 
       return columns.reduce((acc, column) => {
         return {
           ...acc,
-          [column]: this.extractNameFromObject(item[column]) || flatVariables[column] || '',
+          [column]:
+            this.extractNameFromObject(item[column]) ||
+            flatVariables[column] ||
+            '',
         };
       }, {});
     });
 
-
     const ws = XLSX.utils.json_to_sheet(transformedData);
     const columnWidths = this.calculateColumnWidths(transformedData, columns);
     ws['!cols'] = columnWidths;
@@ -69,7 +68,8 @@ export default class XLSExport {
     let data = [];
     let isNext = false;
     let page = 1;
-    const columns = params._columns ||
+    const columns =
+      params._columns ||
       (params?.fields ? objSnakeToCamel(params?.fields) : []);
 
     do {

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

@@ -58,7 +58,10 @@ describe('CSV Export', () => {
       header: false,
       delimiter: ';',
     };
-    localStorage.setItem('csv-export-options', JSON.stringify(csvExportOptions));
+    localStorage.setItem(
+      'csv-export-options',
+      JSON.stringify(csvExportOptions),
+    );
     await wrapper.vm.exportCSV();
     expect(stringify.mock.calls.pop()[1]).toMatchObject(csvExportOptions);
   });

package/src/modules/CSVExport/mixins/exportCSVMixin.js

@@ -14,7 +14,9 @@ export default {
       return this.CSVExport ? this.CSVExport.downloadProgress.count : 0;
     },
     selectedIds() {
-      return this.dataList.filter((item) => item._isSelected).map((item) => item.id);
+      return this.dataList
+        .filter((item) => item._isSelected)
+        .map((item) => item.id);
     },
     isAnySelected() {
       return !!this.selectedIds.length;

package/src/modules/CSVExport/mixins/exportXLSMixin.js

@@ -14,7 +14,9 @@ export default {
       return this.XLSExport ? this.XLSExport.downloadProgress.count : 0;
     },
     selectedIds() {
-      return this.dataList.filter((item) => item._isSelected).map((item) => item.id);
+      return this.dataList
+        .filter((item) => item._isSelected)
+        .map((item) => item.id);
     },
     isAnySelected() {
       return !!this.selectedIds.length;

package/src/modules/CardStoreModule/composables/useCardStore.js

@@ -8,8 +8,12 @@ export const useCardStore = (namespace) => {
 
   const cardNamespace = `${namespace}/card`;
 
-  const id = computed(() => getNamespacedState(store.state, cardNamespace).itemId);
-  const itemInstance = computed(() => getNamespacedState(store.state, cardNamespace).itemInstance);
+  const id = computed(
+    () => getNamespacedState(store.state, cardNamespace).itemId,
+  );
+  const itemInstance = computed(
+    () => getNamespacedState(store.state, cardNamespace).itemInstance,
+  );
 
   function loadItem(payload) {
     return store.dispatch(`${cardNamespace}/LOAD_ITEM`, payload);

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

@@ -47,9 +47,9 @@ describe('DeleteConfirmationPopup', () => {
         callback: vi.fn(),
       },
     });
-    expect(wrapper.find('.delete-confirmation-popup__content').text()).toContain(
-      deleteCount.toString(),
-    );
+    expect(
+      wrapper.find('.delete-confirmation-popup__content').text(),
+    ).toContain(deleteCount.toString());
   });
 
   it('yes button emitted close', async () => {

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

@@ -17,7 +17,7 @@
         </p>
       </div>
     </template>
-    <template #actions="{ isDeleting, close, confirm}">
+    <template #actions="{ isDeleting, close, confirm }">
       <wt-button
         :loading="isDeleting"
         @click="confirm"
@@ -62,7 +62,11 @@ const deleteMessage = computed(() => {
       count: t('webitelUI.deleteConfirmationPopup.deleteAll'),
     });
   }
-  return t('webitelUI.deleteConfirmationPopup.tableAskingAlert', { count: props.deleteCount }, null);
+  return t(
+    'webitelUI.deleteConfirmationPopup.tableAskingAlert',
+    { count: props.deleteCount },
+    null,
+  );
 });
 </script>
 
@@ -77,5 +81,4 @@ const deleteMessage = computed(() => {
 .delete-confirmation-popup__message {
   text-align: center;
 }
-
 </style>

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

@@ -11,7 +11,9 @@ vi.mock('file-saver-es', () => ({
   saveAs: vi.fn(),
 }));
 
-const dataList = [{ files: [{ name: 'jest', id: '1', mimeType: 'mime/type' }] }];
+const dataList = [
+  { files: [{ name: 'jest', id: '1', mimeType: 'mime/type' }] },
+];
 const selectedDataList = [
   {
     _isSelected: true,
@@ -24,7 +26,9 @@ const selectedDataList = [
 ];
 
 describe('File Export', () => {
-  jszipUtils.getBinaryContent.mockImplementation((url, callback) => callback(null, {}));
+  jszipUtils.getBinaryContent.mockImplementation((url, callback) =>
+    callback(null, {}),
+  );
   let wrapper;
   const Component = {
     render() {},

package/src/modules/FilesExport/mixins/exportFilesMixin.js

@@ -15,7 +15,9 @@ export default {
     },
 
     filesZippingProgress() {
-      return this.FilesExport ? Math.floor(this.FilesExport.zippingProgress.percent) : 0;
+      return this.FilesExport
+        ? Math.floor(this.FilesExport.zippingProgress.percent)
+        : 0;
     },
   },
 
@@ -29,7 +31,9 @@ export default {
       if (this.selectedItems?.length) {
         files = this.selectedItems.reduce(
           (filesAccumulator, next) =>
-            next.files ? [...filesAccumulator, ...next.files] : filesAccumulator,
+            next.files
+              ? [...filesAccumulator, ...next.files]
+              : filesAccumulator,
           [],
         );
       }

package/src/modules/FilesExport/scripts/generateMediaURL.js

@@ -1,6 +1,7 @@
 const generateMediaURL = (id) => {
   const token = localStorage.getItem('access-token');
-  const BASE_URL = process?.env?.VUE_APP_API_URL || import.meta.env.VITE_API_URL;
+  const BASE_URL =
+    process?.env?.VUE_APP_API_URL || import.meta.env.VITE_API_URL;
   return `${BASE_URL}/storage/recordings/${id}/stream?access_token=${token}`;
 };
 

package/src/modules/Filters/classes/BaseFilterSchema.js

@@ -17,7 +17,8 @@ const convertGetterArray = (context) => (getters) => {
   const availableGetters = ['value', 'query', 'localStorage'];
 
   getters.forEach((getter) => {
-    if (!availableGetters.includes(getter)) throw new Error(`Unknown getter: ${getter}`);
+    if (!availableGetters.includes(getter))
+      throw new Error(`Unknown getter: ${getter}`);
   });
 
   const getter = ({ router }) => {
@@ -45,7 +46,8 @@ const convertGetterArray = (context) => (getters) => {
 const convertSetterArray = (context) => (setters) => {
   const availableSetters = ['value', 'query', 'localStorage'];
   setters.forEach((setter) => {
-    if (!availableSetters.includes(setter)) throw new Error(`Unknown setter: ${setter}`);
+    if (!availableSetters.includes(setter))
+      throw new Error(`Unknown setter: ${setter}`);
   });
 
   const setter = async (value, { router }) => {
@@ -63,7 +65,8 @@ const convertRestoreArray = (context) => (restores) => {
   const availableRestores = ['query', 'localStorage'];
 
   restores.forEach((restore) => {
-    if (!availableRestores.includes(restore)) throw new Error(`Unknown restore: ${restore}`);
+    if (!availableRestores.includes(restore))
+      throw new Error(`Unknown restore: ${restore}`);
   });
 
   const restore = ({ router }) => {
@@ -120,7 +123,9 @@ export default class BaseFilterSchema {
     } else if (typeof getters === 'function') {
       getter = getters(this);
     } else {
-      throw new Error('Getter should be a function or an array of available getters');
+      throw new Error(
+        'Getter should be a function or an array of available getters',
+      );
     }
 
     this.get = getter;
@@ -136,7 +141,9 @@ export default class BaseFilterSchema {
     } else if (typeof setters === 'function') {
       setter = setters(this);
     } else {
-      throw new Error('Setter should be a function or an array of available setters');
+      throw new Error(
+        'Setter should be a function or an array of available setters',
+      );
     }
 
     this.set = setter;
@@ -152,7 +159,9 @@ export default class BaseFilterSchema {
     } else if (typeof restores === 'function') {
       restore = restores(this);
     } else {
-      throw new Error('Restore should be a function or an array of available restores');
+      throw new Error(
+        'Restore should be a function or an array of available restores',
+      );
     }
 
     this.restore = restore;

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

@@ -25,9 +25,13 @@ const props = defineProps({
 
 const store = useStore();
 
-const filterSchema = computed(() => getNamespacedState(store.state, props.namespace)[props.filterQuery]);
+const filterSchema = computed(
+  () => getNamespacedState(store.state, props.namespace)[props.filterQuery],
+);
 
-const value = computed(() => store.getters[`${props.namespace}/FILTER_${props.filterQuery}`]);
+const value = computed(
+  () => store.getters[`${props.namespace}/FILTER_${props.filterQuery}`],
+);
 
 const setValue = (value) => {
   const payload = { value, name: props.filterQuery };
@@ -35,6 +39,4 @@ const setValue = (value) => {
 };
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

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

@@ -33,8 +33,12 @@ const store = useStore();
 
 const localSize = ref(0);
 
-const page = computed(() => store.getters[`${props.namespace}/GET_FILTER`](pageFilterName));
-const size = computed(() => store.getters[`${props.namespace}/GET_FILTER`](sizeFilterName));
+const page = computed(() =>
+  store.getters[`${props.namespace}/GET_FILTER`](pageFilterName),
+);
+const size = computed(() =>
+  store.getters[`${props.namespace}/GET_FILTER`](sizeFilterName),
+);
 
 function setFilter(payload) {
   return store.dispatch(`${props.namespace}/SET_FILTER`, payload);
@@ -58,6 +62,4 @@ watch(
 );
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>