@webitel/ui-sdk 23.12.39-vite-6 → 23.12.40

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

@@ -8,8 +8,8 @@
     }"
   >
     <wt-label
-      v-if="hasLabel"
       v-bind="labelProps"
+      v-if="hasLabel"
       :for="name"
       :outline="outline"
       :disabled="disabled"
@@ -19,9 +19,7 @@
       <slot
         v-bind="{ label }"
         name="label"
-      >
-        {{ label }}
-      </slot>
+      >{{ label }}</slot>
     </wt-label>
     <div class="wt-time-input__wrapper">
       <input
@@ -38,8 +36,7 @@
     <wt-input-info
       v-if="showInfo"
       :invalid="invalid"
-    >
-      {{ validationText }}
+    >{{ validationText }}
     </wt-input-info>
   </div>
 </template>
@@ -48,7 +45,7 @@
 import validationMixin from '../../mixins/validationMixin/validationMixin';
 
 export default {
-  name: 'WtTimeInput',
+  name: 'wt-time-input',
   mixins: [validationMixin],
   props: {
     /**

package/src/components/wt-timepicker/wt-timepicker.vue

@@ -1,11 +1,8 @@
 <template>
-  <div
-    class="wt-timepicker"
-    :class="{'wt-timepicker--invalid': invalid}"
-  >
+  <div class="wt-timepicker" :class="{'wt-timepicker--invalid': invalid}">
     <wt-label
-      v-if="label"
       v-bind="labelProps"
+      v-if="label"
       :invalid="invalid"
     >
       {{ `${label} (${format})` }}
@@ -16,37 +13,36 @@
         :value="hour"
         :v="v"
         :label="label ? null : $t('webitelUI.timepicker.hour') "
-        :max-value="dateMode ? null : 23"
+        :maxValue="dateMode ? null : 23"
         :disabled="disabled"
         hide-input-info
         @input="hour = $event"
-      />
+      ></wt-time-input>
       <wt-time-input
         v-if="isMin"
         :value="min"
         :v="v"
         :label="label ? null : $t('webitelUI.timepicker.min')"
-        :max-value="59"
+        :maxValue="59"
         :disabled="disabled"
         hide-input-info
         @input="min = $event"
-      />
+      ></wt-time-input>
       <wt-time-input
         v-if="isSec"
         :value="sec"
         :v="v"
-        :label="label ? null : $t('webitelUI.timepicker.sec')"
-        :max-value="59"
+        :label="label ? null :  $t('webitelUI.timepicker.sec')"
+        :maxValue="59"
         :disabled="disabled"
         hide-input-info
         @input="sec = $event"
-      />
+      ></wt-time-input>
     </div>
     <wt-input-info
       v-if="isValidation"
       :invalid="invalid"
-    >
-      {{ validationText }}
+    >{{ validationText }}
     </wt-input-info>
   </div>
 </template>
@@ -58,12 +54,8 @@ const SEC_IN_HOUR = 60 * 60;
 const SEC_IN_MIN = 60;
 
 export default {
-  name: 'WtTimepicker',
+  name: 'wt-timepicker',
   mixins: [validationMixin],
-  model: {
-    prop: 'value',
-    event: 'input',
-  },
   props: {
     value: {
       type: [String, Number],
@@ -90,6 +82,10 @@ export default {
       description: 'Object with props, passed down to wt-label as props',
     },
   },
+  model: {
+    prop: 'value',
+    event: 'input',
+  },
 
   computed: {
     isHour() {

package/src/components/wt-tooltip/_internals/wt-tooltip-floating.vue

@@ -1,9 +1,9 @@
 <template>
   <aside
-    ref="floating"
     class="wt-tooltip-floating"
+    ref="floating"
   >
-    <slot />
+    <slot></slot>
   </aside>
 </template>
 

package/src/components/wt-tooltip/wt-tooltip.vue

@@ -3,27 +3,27 @@
     :class="{
       'wt-tooltip--contrast': contrast,
       'wt-tooltip--visible': isVisible,
-    }"
+     }"
     class="wt-tooltip"
   >
     <div
       ref="activator"
       class="wt-tooltip__activator"
     >
-      <slot name="activator" />
+      <slot name="activator"></slot>
     </div>
     <wt-tooltip-floating
       v-if="isVisible"
       ref="floating"
-      v-clickaway="hideTooltip"
       class="wt-tooltip__floating"
+      v-clickaway="hideTooltip"
       :class="[popperClass]"
       :style="floatingStyles"
       :triggers="popperTriggers"
       @show="showTooltip"
       @hide="hideTooltip"
     >
-      <slot v-bind="{ hide: hideTooltip }" />
+      <slot v-bind="{ hide: hideTooltip }"></slot>
     </wt-tooltip-floating>
   </div>
 </template>

package/src/composables/useCachedInterval/__tests__/useCachedInterval.spec.js

@@ -1,14 +1,14 @@
 import { useCachedInterval } from '../useCachedInterval';
 
 describe('useCachedInterval', () => {
-  it('subscribe', async () => {
-    const callback = vi.fn();
+  it('subscribe', (done) => {
+    const callback = jest.fn();
     const { subscribe } = useCachedInterval({ timeout: 10 });
     subscribe(callback);
     expect(callback).toHaveBeenCalledTimes(1);
-    return await new Promise((resolve, reject) => setTimeout(() => {
+    setTimeout(() => {
       expect(callback).toHaveBeenCalledTimes(2);
-      resolve();
-    }, 10));
+      done();
+    }, 10);
   });
 });

package/src/css/styleguide/colors/_colors.scss

@@ -1,6 +1,5 @@
 @import './deprecated';
 @import './palette';
-@import './reusable/text-field';
 
 :root {
   // dp colors
@@ -85,10 +84,10 @@
   --sub-accent-color: var(--indigo-darken-3);
 
   // typography colors
-  --text-main-color: var(--grey-darken-3);
-  --text-disabled-color: var(--grey-lighten-1);
-  --text-error-color: var(--error-color);
-  --text-link-color: var(--info-color);
+  --main-text-color: var(--grey-darken-3);
+  --main-text-disabled-color: var(--grey-lighten-1);
+  --negative-text-color: var(--error-color);
+  --link-color: var(--info-color);
 }
 
 :root.theme--dark {
@@ -174,8 +173,8 @@
   --sub-accent-color: var(--indigo-darken-3);
 
   // typography colors
-  --text-main-color: var(--grey-lighten-3);
-  --text-disabled-color: var(--grey-darken-1);
-  --text-error-color: var(--error-color);
-  --text-link-color: var(--info-color);
+  --main-text-color: var(--grey-lighten-3);
+  --main-text-disabled-color: var(--grey-darken-1);
+  --negative-text-color: var(--error-color);
+  --link-color: var(--info-color);
 }

package/src/locale/en/en.js

@@ -359,5 +359,10 @@ export default {
         message: 'The limit for agents to take a pause has been exceeded. The pause is unavailable right now.',
       },
     },
+    saveFailedPopup: {
+      title: 'Save failed',
+      label: 'Something went wrong, please try again',
+      exportToJson: 'Export to JSON',
+    },
   },
 };

package/src/locale/i18n.js

@@ -14,7 +14,7 @@ const messages = {
 };
 
 // eslint-disable-next-line new-cap
-export default createI18n({
+export default new createI18n({
   // legacy: false,
   locale: 'en',
   allowComposition: true,

package/src/locale/kz/kz.js

@@ -322,5 +322,10 @@ export default {
         unlimited: 'Шексіз',
       },
     },
+    saveFailedPopup: {
+      title: 'Қатені сақтау',
+      label: 'Бірдеңе дұрыс болмады.',
+      exportToJson: 'JSON файлына экспорттау',
+    },
   },
 };

package/src/locale/ru/ru.js

@@ -357,5 +357,10 @@ export default {
         message: 'Лимит операторов в паузе превышен. Перерыв сейчас недоступен.',
       },
     },
+    saveFailedPopup: {
+      title: 'Ошибка сохранения',
+      label: 'Что-то пошло не так. Пожалуйста, попробуйте еще раз',
+      exportToJson: 'Экспортировать в JSON',
+    },
   },
 };

package/src/locale/ua/ua.js

@@ -357,5 +357,10 @@ export default {
         message: 'Ліміт операторів в паузі перевищено. Перерва наразі недоступна.',
       },
     },
+    saveFailedPopup: {
+      title: 'Помилка збереження',
+      label: 'Щось пішло не так. Будь ласка, спробуйте ще раз',
+      exportToJson: 'Експортувати в JSON',
+    },
   },
 };

package/src/mixins/validationMixin/useValidation.js

@@ -3,12 +3,12 @@ import { useI18n } from 'vue-i18n';
 
 export function useValidation({ v, customValidators }) {
   const { t } = useI18n();
-  const isValidation = computed(() => !!v && !!v.value && !!Object.keys(v.value).length);
+  const isValidation = computed(() => !!v.value && !!Object.keys(v.value).length);
   const invalid = computed(() => isValidation.value && v.value.$error);
 
   const validationText = computed(() => {
     let validationText = '';
-    if (isValidation.value && invalid) {
+    if (isValidation && invalid) {
       if (v.value.required?.$invalid) validationText = t('validation.required');
       else if (v.value.numeric?.$invalid) validationText = t('validation.numeric');
       else if (v.value.email?.$invalid) validationText = t('validation.email');

package/src/modules/AgentStatusSelect/components/__tests__/wt-cc-agent-status-select.spec.js

@@ -6,13 +6,13 @@ import * as PauseCauseAPIFactory from '../../api/pause-cause';
 import WtCcAgentStatusSelect from '../wt-cc-agent-status-select.vue';
 
 const pauseCauses = [{ name: 'jest1' }, { name: 'jest2' }];
-const getAgentPauseCausesMock = vi.fn(() => ({ items: pauseCauses }));
+const getAgentPauseCausesMock = jest.fn(() => ({ items: pauseCauses }));
 // https://stackoverflow.com/a/63727813
-vi.spyOn(PauseCauseAPIFactory, 'default').mockImplementation(() => ({ getList: getAgentPauseCausesMock }));
+jest.spyOn(PauseCauseAPIFactory, 'default').mockImplementation(() => ({ getList: getAgentPauseCausesMock }));
 
-const agentStatusMock = vi.fn(() => {});
+const agentStatusMock = jest.fn(() => {});
 // https://stackoverflow.com/a/63727813
-vi.spyOn(AgentStatusAPIFactory, 'default').mockImplementation(() => ({ patch: agentStatusMock }));
+jest.spyOn(AgentStatusAPIFactory, 'default').mockImplementation(() => ({ patch: agentStatusMock }));
 
 const agent = {
   status: '',

package/src/modules/AgentStatusSelect/components/_internals/wt-cc-pause-cause-popup.vue

@@ -4,16 +4,16 @@
     min-width="480"
     @close="close"
   >
-    <template #title>
+    <template v-slot:title>
       {{ $t('webitelUI.agentStatusSelect.pauseCausePopup.title') }}
     </template>
-    <template #main>
+    <template v-slot:main>
       <form @submit.prevent="setPause">
         <ul>
           <li
+            class="wt-cc-pause-cause-popup-option"
             v-for="(option) of pauseCause"
             :key="option.id"
-            class="wt-cc-pause-cause-popup-option"
           >
             <wt-radio
               class="wt-cc-pause-cause-popup-option__radio"
@@ -21,12 +21,12 @@
               :value="option.id"
               :label="option.name"
               @input="select(option)"
-            />
+            ></wt-radio>
             <div class="wt-cc-pause-cause-popup-option__limits-wrapper">
               <span
                 :class="{
-                  'wt-cc-pause-cause-popup-option__duration--overflow': option.isOverflow,
-                }"
+                    'wt-cc-pause-cause-popup-option__duration--overflow': option.isOverflow,
+                 }"
               >
                 {{ option.duration }}
               </span>
@@ -37,18 +37,16 @@
         </ul>
       </form>
     </template>
-    <template #actions>
+    <template v-slot:actions>
       <wt-button
         :disabled="!selected"
         @click="setPause"
-      >
-        {{ $t('reusable.ok') }}
+      >{{ $t('reusable.ok') }}
       </wt-button>
       <wt-button
         color="secondary"
         @click="close"
-      >
-        {{ $t('reusable.cancel') }}
+      >{{ $t('reusable.cancel') }}
       </wt-button>
     </template>
   </wt-popup>

package/src/modules/AgentStatusSelect/components/_internals/wt-cc-status-select-error-popup.vue

@@ -4,26 +4,25 @@
     min-width="480"
     @close="close"
   >
-    <template #header>
+    <template v-slot:header>
       {{ $t('webitelUI.agentStatusSelect.statusSelectErrorPopup.title') }}
     </template>
-    <template #main>
+    <template v-slot:main>
       <article class="wt-cc-status-select-error-popup__main-wrapper">
         <wt-icon
           icon="attention"
           color="danger"
-        />
+        ></wt-icon>
         <p class="wt-cc-status-select-error-popup__message">
           {{ $t('webitelUI.agentStatusSelect.statusSelectErrorPopup.message') }}
         </p>
       </article>
     </template>
-    <template #actions>
+    <template v-slot:actions>
       <wt-button
         color="secondary"
         @click="close"
-      >
-        {{ $t('reusable.ok') }}
+      >{{ $t('reusable.ok') }}
       </wt-button>
     </template>
   </wt-popup>

package/src/modules/AgentStatusSelect/components/wt-cc-agent-status-select.vue

@@ -4,18 +4,18 @@
       :status="status"
       :status-duration="statusDuration"
       @change="handleStatusSelectInput"
-    />
+    ></wt-status-select>
     <pause-cause-popup
       v-if="isPauseCausePopup"
       :options="pauseCauses"
       @change="handlePauseCauseInput"
       @close="closePauseCausePopup"
-    />
+    ></pause-cause-popup>
     <status-select-error-popup
       v-if="error"
       :error="error"
       @close="error = null"
-    />
+    ></status-select-error-popup>
   </article>
 </template>
 

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

@@ -6,7 +6,7 @@ import {
   useDestroyableSortable,
 } from '../../../../composables/useDestroyableSortable/useDestroyableSortable';
 
-vi.mock('../../../../composables/useDestroyableSortable/useDestroyableSortable');
+jest.mock('../../../../composables/useDestroyableSortable/useDestroyableSortable');
 
 useDestroyableSortable.mockImplementation(() => ({ reloadSortable: ref(false) }));
 

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

@@ -14,14 +14,12 @@
         :class="{
           'audit-form-question-read-text--required': question.required,
         }"
-      >
-        {{ question.question }}
-      </p>
+      >{{ question.question }}</p>
       <wt-icon
-        v-if="!disableDragging && !first"
         class="audit-form-question-read__drag-icon"
+        v-if="!disableDragging && !first"
         icon="move"
-      />
+      ></wt-icon>
     </header>
     <section class="audit-form-question-read-content">
       <component
@@ -30,14 +28,12 @@
         :result="result"
         mode="read"
         @change:result="!readonly && emit('change:result', $event)"
-      />
+      ></component>
       <div
         v-show="isResult"
         class="audit-form-question--clear"
         @click="emit('change:result', {})"
-      >
-        {{ $t('webitelUI.auditForm.clearSelection') }}
-      </div>
+      >{{ $t('webitelUI.auditForm.clearSelection') }}</div>
     </section>
   </article>
 </template>
@@ -130,6 +126,6 @@ const isResult = computed(() => !isEmpty(props.result));
 .audit-form-question--clear {
   margin-top: var(--spacing-sm);;
   cursor: pointer;
-  color: var(--text-link-color);
+  color: var(--link-color);
 }
 </style>

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 #activator>
+          <template v-slot:activator>
             <wt-icon-btn
               icon="copy"
               @click="emit('copy')"
-            />
+            ></wt-icon-btn>
           </template>
           {{ $t('reusable.copy') }}
         </wt-tooltip>
         <wt-tooltip>
-          <template #activator>
+          <template v-slot: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
-      v-if="!reloadSortable"
-      ref="sortableWrapper"
       class="audit-form__sortable-wrapper"
+      ref="sortableWrapper"
+      v-if="!reloadSortable"
     >
       <audit-form-question
         v-for="(question, key) of questions"
@@ -18,15 +18,14 @@
         @delete="deleteQuestion({ question, key})"
         @update:question="handleQuestionUpdate({ key, value: $event })"
         @update:result="handleResultUpdate({ key, value: $event })"
-      />
+      ></audit-form-question>
     </div>
     <wt-button
-      v-if="mode === 'create' && !readonly"
       class="audit-form__add-button"
+      v-if="mode === 'create' && !readonly"
       :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 #activator>
+      <template v-slot: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,12 +11,11 @@
         :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
@@ -30,11 +29,9 @@
         :selected="result"
         :value="opt"
         @input="emit('change:result', $event)"
-      />
-    </div>
-    <div v-else>
-      Unknown mode: {{ mode }}
+      ></wt-radio>
     </div>
+    <div v-else>Unknown mode: {{ mode }}</div>
   </article>
 </template>