@webitel/ui-sdk 23.12.37 → 23.12.39-vite

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

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

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

@@ -1,8 +1,11 @@
 <template>
-  <div class="wt-timepicker" :class="{'wt-timepicker--invalid': invalid}">
+  <div
+    class="wt-timepicker"
+    :class="{'wt-timepicker--invalid': invalid}"
+  >
     <wt-label
-      v-bind="labelProps"
       v-if="label"
+      v-bind="labelProps"
       :invalid="invalid"
     >
       {{ `${label} (${format})` }}
@@ -13,36 +16,37 @@
         :value="hour"
         :v="v"
         :label="label ? null : $t('webitelUI.timepicker.hour') "
-        :maxValue="dateMode ? null : 23"
+        :max-value="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')"
-        :maxValue="59"
+        :max-value="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')"
-        :maxValue="59"
+        :label="label ? null : $t('webitelUI.timepicker.sec')"
+        :max-value="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>
@@ -54,8 +58,12 @@ const SEC_IN_HOUR = 60 * 60;
 const SEC_IN_MIN = 60;
 
 export default {
-  name: 'wt-timepicker',
+  name: 'WtTimepicker',
   mixins: [validationMixin],
+  model: {
+    prop: 'value',
+    event: 'input',
+  },
   props: {
     value: {
       type: [String, Number],
@@ -82,10 +90,6 @@ 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
-    class="wt-tooltip-floating"
     ref="floating"
+    class="wt-tooltip-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>
+      <slot name="activator" />
     </div>
     <wt-tooltip-floating
       v-if="isVisible"
       ref="floating"
-      class="wt-tooltip__floating"
       v-clickaway="hideTooltip"
+      class="wt-tooltip__floating"
       :class="[popperClass]"
       :style="floatingStyles"
       :triggers="popperTriggers"
       @show="showTooltip"
       @hide="hideTooltip"
     >
-      <slot v-bind="{ hide: hideTooltip }"></slot>
+      <slot v-bind="{ hide: hideTooltip }" />
     </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', (done) => {
-    const callback = jest.fn();
+  it('subscribe', async () => {
+    const callback = vi.fn();
     const { subscribe } = useCachedInterval({ timeout: 10 });
     subscribe(callback);
     expect(callback).toHaveBeenCalledTimes(1);
-    setTimeout(() => {
+    return await new Promise((resolve, reject) => setTimeout(() => {
       expect(callback).toHaveBeenCalledTimes(2);
-      done();
-    }, 10);
+      resolve();
+    }, 10));
   });
 });

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

@@ -1,5 +1,6 @@
 @import './deprecated';
 @import './palette';
+@import './reusable/text-field';
 
 :root {
   // dp colors
@@ -35,59 +36,59 @@
   --success-color: var(--green-darken-4);
   --success-hover-color: var(--green-darken-3);
   --success-light-color: var(--green-lighten-4);
-  --on-success-color: var(--black);
+  --success-on-color: var(--black);
 
   // warning colors
   --warning-color: var(--orange-accent-2);
   --warning-hover-color: var(--orange-accent-1);
   --warning-light-color: var(--orange-lighten-4);
-  --on-warning-color: var(--black);
+  --warning-on-color: var(--black);
 
   // error colors
   --error-color: var(--red-accent-2);
   --error-hover-color: var(--red-lighten-2);
   --error-light-color: var(--red-lighten-4);
-  --on-error-color: var(--black);
+  --error-on-color: var(--black);
 
   // info colors
   --info-color: var(--blue-darken-1);
   --info-hover-color: var(--blue-lighten-1);
   --info-light-color: var(--blue-lighten-4);
-  --on-info-color: var(--black);
+  --info-on-color: var(--black);
 
   // job colors
   --job-color: var(--blue-darken-1);
   --job-hover-color: var(--blue-lighten-1);
   --job-light-color: var(--blue-lighten-4);
-  --on-job-color: var(--black);
+  --job-on-color: var(--black);
 
   // chat colors
   --chat-color: var(--indigo-accent-2);
   --chat-hover-color: var(--indigo-accent-2);
   --chat-light-color: var(--indigo-lighten-4);
-  --on-chat-color: var(--black);
+  --chat-on-color: var(--black);
 
   // transfer colors
   --transfer-color: var(--indigo-lighten-1);
   --transfer-hover-color: var(--indigo-lighten-2);
   --transfer-light-color: var(--indigo-lighten-4);
-  --on-transfer-color: var(--white);
+  --transfer-on-color: var(--white);
 
   // primary colors
   --primary-color: var(--amber-accent-3);
   --primary-hover-color: var(--amber-accent-2);
   --primary-light-color: var(--amber-lighten-4);
-  --on-primary-color: var(--black);
+  --primary-on-color: var(--black);
 
   // accent colors
   --accent-color: var(--purple-lighten-1);
   --sub-accent-color: var(--indigo-darken-3);
 
   // typography colors
-  --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);
+  --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);
 }
 
 :root.theme--dark {
@@ -124,57 +125,57 @@
   --success-color: var(--green-darken-4);
   --success-hover-color: var(--green-darken-3);
   --success-light-color: var(--green-lighten-3);
-  --on-success-color: var(--white);
+  --success-on-color: var(--white);
 
   // warning colors
   --warning-color: var(--orange-accent-2);
   --warning-hover-color: var(--orange-accent-1);
   --warning-light-color: var(--orange-lighten-3);
-  --on-warning-color: var(--white);
+  --warning-on-color: var(--white);
 
   // error colors
   --error-color: var(--red-accent-2);
   --error-hover-color: var(--red-lighten-2);
   --error-light-color: var(--red-lighten-3);
-  --on-error-color: var(--white);
+  --error-on-color: var(--white);
 
   // info colors
   --info-color: var(--blue-darken-1);
   --info-hover-color: var(--blue-lighten-1);
   --info-light-color: var(--blue-lighten-3);
-  --on-info-color: var(--white);
+  --info-on-color: var(--white);
 
   // job colors
   --job-color: var(--blue-darken-1);
   --job-hover-color: var(--blue-lighten-1);
   --job-light-color: var(--blue-lighten-3);
-  --on-job-color: var(--white);
+  --job-on-color: var(--white);
 
   // chat colors
   --chat-color: var(--indigo-accent-2);
   --chat-hover-color: var(--indigo-accent-2);
   --chat-light-color: var(--indigo-lighten-3);
-  --on-chat-color: var(--white);
+  --chat-on-color: var(--white);
 
   // transfer colors
   --transfer-color: var(--indigo-darken-1);
   --transfer-hover-color: var(--indigo-lighten-1);
   --transfer-light-color: var(--indigo-lighten-4);
-  --on-transfer-color: var(--white);
+  --transfer-on-color: var(--white);
 
   // primary colors
   --primary-color: var(--amber-accent-2);
   --primary-hover-color: var(--amber-accent-3);
   --primary-light-color: var(--amber-lighten-4);
-  --on-primary-color: var(--black);
+  --primary-on-color: var(--black);
 
   // accent colors
   --accent-color: var(--purple-lighten-1);
   --sub-accent-color: var(--indigo-darken-3);
 
   // typography colors
-  --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);
+  --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);
 }

package/src/css/styleguide/colors/reusable/_text-field.scss

@@ -0,0 +1,20 @@
+// shared text field colors
+
+:root {
+  // TODO: move to separate helper-text component
+  --wt-helper-text-color: var(--text-main-color);
+  --wt-helper-text-disabled-color: var(--text-disabled-color);
+
+  --wt-text-field-error-text-color: var(--error-color);
+  --wt-text-field-placeholder-color: var(--text-main-color);
+  --wt-text-field-placeholder-error-color: var(--error-color);
+  --wt-text-field-placeholder-disabled-color: var(--text-disabled-color);
+
+  --wt-text-field-input-border-color: var(--grey-darken-1);
+  --wt-text-field-input-border-disabled-color: var(--dp-16-surface-color);
+  --wt-text-field-input-border-error-color: var(--error-color);
+}
+
+:root.theme--dark {
+  --wt-text-field-input-border-color: var(--grey-lighten-1);
+}

package/src/locale/en/en.js

@@ -44,6 +44,7 @@ export default {
       es: 'Español',
       ru: 'Русский',
       ua: 'Українська',
+      kz: 'Қазақ',
     },
     from: 'From',
     to: 'To',

package/src/locale/es/es.js

@@ -39,6 +39,7 @@ export default {
       es: 'Español',
       ru: 'Русский',
       ua: 'Українська',
+      kz: 'Қазақ',
     },
     from: 'De',
     to: 'Hasta',

package/src/locale/i18n.js

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

package/src/locale/kz/kz.js

@@ -37,7 +37,11 @@ export default {
     collapse: 'Жабу',
     generate: 'Жасау',
     lang: {
+      en: 'English',
+      es: 'Español',
       ru: 'Орысша',
+      ua: 'Українська',
+      kz: 'Қазақ',
     },
     from: 'Бастап',
     to: 'Бұрын/Дейін',

package/src/locale/ru/ru.js

@@ -44,6 +44,7 @@ export default {
       es: 'Español',
       ru: 'Русский',
       ua: 'Українська',
+      kz: 'Қазақ',
     },
     from: 'От',
     to: 'До',

package/src/locale/ua/ua.js

@@ -44,6 +44,7 @@ export default {
       es: 'Español',
       ru: 'Русский',
       ua: 'Українська',
+      kz: 'Қазақ',
     },
     from: 'Від',
     to: 'До',

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.value && !!Object.keys(v.value).length);
+  const isValidation = computed(() => !!v && !!v.value && !!Object.keys(v.value).length);
   const invalid = computed(() => isValidation.value && v.value.$error);
 
   const validationText = computed(() => {
     let validationText = '';
-    if (isValidation && invalid) {
+    if (isValidation.value && 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 = jest.fn(() => ({ items: pauseCauses }));
+const getAgentPauseCausesMock = vi.fn(() => ({ items: pauseCauses }));
 // https://stackoverflow.com/a/63727813
-jest.spyOn(PauseCauseAPIFactory, 'default').mockImplementation(() => ({ getList: getAgentPauseCausesMock }));
+vi.spyOn(PauseCauseAPIFactory, 'default').mockImplementation(() => ({ getList: getAgentPauseCausesMock }));
 
-const agentStatusMock = jest.fn(() => {});
+const agentStatusMock = vi.fn(() => {});
 // https://stackoverflow.com/a/63727813
-jest.spyOn(AgentStatusAPIFactory, 'default').mockImplementation(() => ({ patch: agentStatusMock }));
+vi.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 v-slot:title>
+    <template #title>
       {{ $t('webitelUI.agentStatusSelect.pauseCausePopup.title') }}
     </template>
-    <template v-slot:main>
+    <template #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,16 +37,18 @@
         </ul>
       </form>
     </template>
-    <template v-slot:actions>
+    <template #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,25 +4,26 @@
     min-width="480"
     @close="close"
   >
-    <template v-slot:header>
+    <template #header>
       {{ $t('webitelUI.agentStatusSelect.statusSelectErrorPopup.title') }}
     </template>
-    <template v-slot:main>
+    <template #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 v-slot:actions>
+    <template #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';
 
-jest.mock('../../../../composables/useDestroyableSortable/useDestroyableSortable');
+vi.mock('../../../../composables/useDestroyableSortable/useDestroyableSortable');
 
 useDestroyableSortable.mockImplementation(() => ({ reloadSortable: ref(false) }));
 

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

@@ -14,12 +14,14 @@
         :class="{
           'audit-form-question-read-text--required': question.required,
         }"
-      >{{ question.question }}</p>
+      >
+        {{ question.question }}
+      </p>
       <wt-icon
-        class="audit-form-question-read__drag-icon"
         v-if="!disableDragging && !first"
+        class="audit-form-question-read__drag-icon"
         icon="move"
-      ></wt-icon>
+      />
     </header>
     <section class="audit-form-question-read-content">
       <component
@@ -28,12 +30,14 @@
         :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>
@@ -126,6 +130,6 @@ const isResult = computed(() => !isEmpty(props.result));
 .audit-form-question--clear {
   margin-top: var(--spacing-sm);;
   cursor: pointer;
-  color: var(--link-color);
+  color: var(--text-link-color);
 }
 </style>