@webitel/ui-sdk 3.2.124 → 3.2.126

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

@@ -0,0 +1,217 @@
+<template>
+  <div
+    class="wt-textarea"
+    :class="{
+      'wt-textarea--disabled': disabled,
+      'wt-textarea--invalid': invalid,
+    }"
+  >
+    <wt-label
+      :for="name"
+      :disabled="disabled"
+      :invalid="invalid"
+      v-bind="labelProps"
+    >
+      <!-- @slot Custom input label -->
+      <slot name="label" v-bind="{ label }">{{ requiredLabel }}</slot>
+    </wt-label>
+    <div class="wt-textarea__wrapper">
+      <textarea
+        :id="name"
+        ref="wt-textarea"
+        class="wt-textarea__textarea"
+        :value="value"
+        :placeholder="placeholder || label"
+        :disabled="disabled"
+        v-on="listeners"
+      ></textarea>
+      <div class="wt-textarea__after-wrapper" ref="after-wrapper">
+        <slot name="after-input"></slot>
+        <wt-icon-btn
+          class="wt-textarea__reset-icon-btn"
+          :class="{ 'hidden': !value }"
+          icon="close--filled"
+          size="sm"
+          :disabled="disabled"
+          @click="$emit('input', '')"
+        ></wt-icon-btn>
+      </div>
+    </div>
+    <wt-input-info
+      v-if="isValidation"
+      :invalid="invalid"
+    >{{ validationText }}
+    </wt-input-info>
+  </div>
+</template>
+
+<script>
+import validationMixin from '../../mixins/validationMixin/validationMixin';
+
+export default {
+  name: 'wt-textarea',
+  mixins: [validationMixin],
+  props: {
+    /**
+     * Current textarea value (`v-model`)
+     */
+    value: {
+      type: String,
+      default: '',
+    },
+    /**
+     * textarea label
+     */
+    label: {
+      type: String,
+      default: '',
+    },
+    /**
+     * textarea placeholder
+     */
+    placeholder: {
+      type: String,
+    },
+    /**
+     * Native textarea disabled attribute
+     */
+    disabled: {
+      type: Boolean,
+      default: false,
+      description: 'Native textarea disabled attribute',
+    },
+    /**
+     * textarea name
+     */
+    name: {
+      type: String,
+      default: '',
+    },
+    chatMode: {
+      type: Boolean,
+      default: false,
+    },
+    labelProps: {
+      type: Object,
+      description: 'Object with props, passed down to wt-label as props',
+    },
+  },
+  emits: ['input', 'enter'],
+  computed: {
+    listeners() {
+      return {
+        ...this.$listeners,
+        input: (event) => this.$emit('input', event.target.value),
+        keypress: (event) => this.handleKeypress(event),
+      };
+    },
+
+    requiredLabel() {
+      return this.required ? `${this.label}*` : this.label;
+    },
+  },
+
+  methods: {
+    handleKeypress(event) {
+      if (!this.chatMode) return;
+      if (event.key === 'Enter' && !event.shiftKey) {
+        this.$emit('enter');
+        event.preventDefault();
+      }
+    },
+
+    updateInputPaddings() {
+      // cant test this thing cause vue test utils doesnt render elements width :/
+      const afterWrapperWidth = this.$refs['after-wrapper'].offsetWidth;
+      const inputEl = this.$refs['wt-textarea'];
+      const defaultInputPadding = getComputedStyle(document.documentElement)
+      .getPropertyValue('--textarea-padding');
+      inputEl.style.paddingRight = `calc(${defaultInputPadding} * 2 + ${afterWrapperWidth}px)`;
+    },
+  },
+  mounted() {
+    this.updateInputPaddings();
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import './variables.scss';
+
+.wt-textarea {
+  cursor: text;
+
+  &--disabled {
+    pointer-events: none;
+  }
+}
+
+.wt-textarea__wrapper {
+  position: relative;
+}
+
+.wt-label {
+  .wt-textarea:hover &,
+  .wt-textarea:focus-within & {
+    color: var(--form-label--hover-color);
+  }
+
+  .wt-textarea--invalid:hover &,
+  .wt-textarea--invalid:focus-within & {
+    color: var(--label--invalid-color);
+  }
+}
+
+.wt-textarea__textarea {
+  @extend %typo-body-1;
+  @extend %wt-scrollbar;
+  @include wt-placeholder;
+
+  display: block;
+  width: 100%;
+  min-height: var(--textarea-min-height);
+  box-sizing: border-box;
+  padding: var(--textarea-padding);
+  color: var(--form-input-color);
+  border: var(--input-border);
+  border-color: var(--form-border-color);
+  border-radius: var(--border-radius);
+  transition: var(--transition);
+  resize: none;
+
+  &:focus {
+    @include wt-placeholder('focus');
+
+    border-color: var(--form-border--hover-color);
+  }
+
+  .wt-textarea--disabled & {
+    @include wt-placeholder('disabled');
+
+    background: var(--form-border--disabled-color);
+    border-color: var(--form-border--disabled-color);
+  }
+
+  .wt-textarea--invalid &,
+  .wt-textarea--invalid:hover & {
+    border-color: var(--false-color);
+    outline: none; // prevent outline overlapping false color
+  }
+}
+
+/* make icons black */
+.wt-textarea:hover ::v-deep .wt-icon-btn:not(.wt-textarea__reset-icon-btn) .wt-icon__icon,
+.wt-textarea:focus-within ::v-deep .wt-icon-btn:not(.wt-textarea__reset-icon-btn) .wt-icon__icon {
+  fill: var(--icon-color--hover);
+}
+
+.wt-textarea__after-wrapper {
+  display: flex;
+  gap: var(--input-after-wrapper-gap);
+  align-items: center;
+  position: absolute;
+  top: var(--input-icon-margin);
+  right: var(--input-icon-margin);
+  pointer-events: auto; // override --disabled p-events none
+}
+</style>

package/src/components/{molecules/wt-time-input → wt-time-input}/wt-time-input.vue

@@ -39,7 +39,7 @@
 </template>
 
 <script>
-import validationMixin from '../../../mixins/validationMixin/validationMixin';
+import validationMixin from '../../mixins/validationMixin/validationMixin';
 
 export default {
   name: 'wt-time-input',

package/src/components/{molecules/wt-timepicker → wt-timepicker}/wt-timepicker.vue

@@ -48,12 +48,12 @@
 </template>
 
 <script>
-import validationMixin from '../../../mixins/validationMixin/validationMixin';
+import validationMixin from '../../mixins/validationMixin/validationMixin';
 
 const SEC_IN_HOUR = 60 * 60;
 const SEC_IN_MIN = 60;
 
-export default  {
+export default {
   name: 'wt-timepicker',
   mixins: [validationMixin],
   props: {
@@ -143,6 +143,8 @@ export default  {
 </script>
 
 <style lang="scss" scoped>
+@import './variables.scss';
+
 .wt-timepicker {
   display: flex;
   flex-direction: column;

package/src/components/wt-tooltip/_variables.scss

@@ -0,0 +1,11 @@
+
+:root {
+  --tooltip-padding: var(--spacing-2xs) var(--spacing-xs);
+
+  --tooltip-light-text-color: var(--text-primary-color);
+  --tooltip-light-bg-color: var(--main-color);
+  --tooltip-dark-text-color: var(--text-contrast-color);
+  --tooltip-dark-bg-color: var(--contrast-color);
+
+  --tooltip-elevation: var(--elevation-10);
+}

package/src/components/{atoms/wt-tooltip → wt-tooltip}/wt-tooltip.vue

@@ -117,6 +117,8 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
+@import './variables.scss';
+
 .wt-tooltip {
   display: inline-block;
   height: fit-content;

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

@@ -0,0 +1,78 @@
+import {
+  useRepresentableAgentPauseCause,
+} from '../useRepresentableAgentPauseCause';
+
+let pauseCauses = [];
+
+describe('useRepresentableAgentPauseCause', () => {
+  beforeEach(() => {
+    pauseCauses = [{ durationMin: 10, limitMin: 12 }];
+  });
+
+  it('correctly computes duration', () => {
+    const {
+      representablePauseCause,
+    } = useRepresentableAgentPauseCause(pauseCauses);
+    expect(representablePauseCause.value[0].duration).toBe('00:10');
+  });
+  it('isOverflow with limit = 0 returns false', () => {
+    const pauseCauses = [{ durationMin: 10, limitMin: 0 }];
+    const {
+      representablePauseCause,
+    } = useRepresentableAgentPauseCause(pauseCauses);
+    expect(representablePauseCause.value[0].isOverflow).toBe(false);
+  });
+  it('isOverflow with duration < limit returns false', () => {
+    const pauseCauses = [{ durationMin: 10, limitMin: 15 }];
+    const {
+      representablePauseCause,
+    } = useRepresentableAgentPauseCause(pauseCauses);
+    expect(representablePauseCause.value[0].isOverflow).toBe(false);
+  });
+  it('isOverflow with duration > limit returns true', () => {
+    const pauseCauses = [{ durationMin: 15, limitMin: 10 }];
+    const {
+      representablePauseCause,
+    } = useRepresentableAgentPauseCause(pauseCauses);
+    expect(representablePauseCause.value[0].isOverflow).toBe(true);
+  });
+
+  it('isOverflow with duration = limit returns false', () => {
+    const pauseCauses = [{ durationMin: 10, limitMin: 10 }];
+    const {
+      representablePauseCause,
+    } = useRepresentableAgentPauseCause(pauseCauses);
+    expect(representablePauseCause.value[0].isOverflow).toBe(false);
+  });
+
+  it('correctly computes progressColor', () => {
+    const {
+      representablePauseCause,
+    } = useRepresentableAgentPauseCause(pauseCauses);
+    expect(representablePauseCause.value[0].progressColor).toBe('primary');
+  });
+
+  it('correctly computes progressColor with duration > limit', () => {
+    const pauseCauses = [{ durationMin: 15, limitMin: 10 }];
+    const {
+      representablePauseCause,
+    } = useRepresentableAgentPauseCause(pauseCauses);
+    expect(representablePauseCause.value[0].progressColor).toBe('danger');
+  });
+
+  it('correctly computes progressColor with duration < limit', () => {
+    const pauseCauses = [{ durationMin: 10, limitMin: 15 }];
+    const {
+      representablePauseCause,
+    } = useRepresentableAgentPauseCause(pauseCauses);
+    expect(representablePauseCause.value[0].progressColor).toBe('success');
+  });
+
+it('correctly computes progressColor with duration = limit', () => {
+    const pauseCauses = [{ durationMin: 10, limitMin: 10 }];
+    const {
+      representablePauseCause,
+    } = useRepresentableAgentPauseCause(pauseCauses);
+    expect(representablePauseCause.value[0].progressColor).toBe('primary');
+  });
+});

package/src/composables/useRepresentableAgentPauseCause/useRepresentableAgentPauseCause.js

@@ -0,0 +1,36 @@
+import { computed } from 'vue';
+import convertDuration from '../../scripts/convertDuration';
+
+const prettifyPauseCauseDuration = (min) => {
+  const SEC_IN_MIN = 60;
+  const secDuration = convertDuration(min * SEC_IN_MIN);
+  return secDuration.slice(0, -3);
+};
+
+const isDurationOverflow = ({ durationMin, limitMin }) => {
+  return (durationMin > limitMin) && limitMin !== 0;
+};
+
+const duration = ({ durationMin, limitMin }) => {
+  return isDurationOverflow({ durationMin, limitMin })
+    ? `-${prettifyPauseCauseDuration(durationMin - limitMin)}`
+    : prettifyPauseCauseDuration(durationMin);
+};
+
+const pauseCauseProgressColor = ({ durationMin, limitMin }) => {
+  if (isDurationOverflow({ durationMin, limitMin })) return 'danger';
+  if (durationMin <= (limitMin * 0.75)) return 'success';
+  return 'primary';
+};
+
+// eslint-disable-next-line import/prefer-default-export
+export const useRepresentableAgentPauseCause = (pauseCauses) => {
+  const representablePauseCause = computed(() => pauseCauses.map((pauseCause) => ({
+    ...pauseCause,
+    duration: duration(pauseCause),
+    progressColor: pauseCauseProgressColor(pauseCause),
+    isOverflow: isDurationOverflow(pauseCause),
+  })));
+
+  return { representablePauseCause };
+};

package/src/css/main.scss

@@ -1,6 +1,4 @@
 @import 'styleguide/styleguide';
-
-@import 'components/components';
 @import 'styleguide/display-helpers/display-helpers';
 
 

package/src/locale/en/en.js

@@ -340,5 +340,12 @@ export default {
     dummy: {
       text: 'There are no records yet',
     },
+    agentStatusSelect: {
+      pauseCausePopup: {
+        title: 'Select a pause cause',
+        min: 'Min',
+        unlimited: 'Unlimited',
+      },
+    },
   },
 };

package/src/locale/ru/ru.js

@@ -338,5 +338,12 @@ export default {
     dummy: {
       text: 'Записи в разделе еще не созданы',
     },
+    agentStatusSelect: {
+      pauseCausePopup: {
+        title: 'Выберите причину паузы',
+        min: 'Мин',
+        unlimited: 'Безлимит',
+      },
+    },
   },
 };

package/src/locale/ua/ua.js

@@ -338,5 +338,12 @@ export default {
     dummy: {
       text: 'Записи у розділі ще не створені',
     },
+    agentStatusSelect: {
+      pauseCausePopup: {
+        title: 'Виберіть причину паузи',
+        min: 'Хв',
+        unlimited: 'Безліміт',
+      },
+    },
   },
 };

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

@@ -40,7 +40,7 @@ import { EngineAuditQuestionType } from 'webitel-sdk';
 import isEmpty from '../../../scripts/isEmpty';
 import AuditFormQuestionOptions from './questions/options/audit-form-question-options.vue';
 import AuditFormQuestionScore from './questions/score/audit-form-question-score.vue';
-import WtIcon from '../../../components/atoms/wt-icon/wt-icon.vue';
+import WtIcon from '../../../components/wt-icon/wt-icon.vue';
 
 const props = defineProps({
   question: {

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

@@ -63,11 +63,11 @@ import set from 'lodash/set';
 import cloneDeep from 'lodash/cloneDeep';
 import { computed } from 'vue';
 import { EngineAuditQuestionType } from 'webitel-sdk';
-import WtTooltip from '../../../components/atoms/wt-tooltip/wt-tooltip.vue';
-import WtSwitcher from '../../../components/molecules/wt-switcher/wt-switcher.vue';
-import WtIconBtn from '../../../components/molecules/wt-icon-btn/wt-icon-btn.vue';
-import WtInput from '../../../components/molecules/wt-input/wt-input.vue';
-import WtSelect from '../../../components/molecules/wt-select/wt-select.vue';
+import WtTooltip from '../../../components/wt-tooltip/wt-tooltip.vue';
+import WtSwitcher from '../../../components/wt-switcher/wt-switcher.vue';
+import WtIconBtn from '../../../components/wt-icon-btn/wt-icon-btn.vue';
+import WtInput from '../../../components/wt-input/wt-input.vue';
+import WtSelect from '../../../components/wt-select/wt-select.vue';
 
 import AuditFormQuestionOptions from './questions/options/audit-form-question-options.vue';
 import AuditFormQuestionScore from './questions/score/audit-form-question-score.vue';

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

@@ -39,7 +39,7 @@ import {
 import { useVuelidate } from '@vuelidate/core';
 import { useDestroyableSortable } from '../../../composables/useDestroyableSortable/useDestroyableSortable';
 import AuditFormQuestion from './audit-form-question.vue';
-import WtButton from '../../../components/atoms/wt-button/wt-button.vue';
+import WtButton from '../../../components/wt-button/wt-button.vue';
 import { generateQuestionSchema } from '../schemas/AuditFormQuestionSchema';
 
 const props = defineProps({

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

@@ -31,9 +31,9 @@
 import { useVuelidate } from '@vuelidate/core';
 import { required, minValue, maxValue } from '@vuelidate/validators';
 import { computed, onMounted, toRefs } from 'vue';
-import WtTooltip from '../../../../../components/atoms/wt-tooltip/wt-tooltip.vue';
-import WtIconBtn from '../../../../../components/molecules/wt-icon-btn/wt-icon-btn.vue';
-import WtInput from '../../../../../components/molecules/wt-input/wt-input.vue';
+import WtTooltip from '../../../../../components/wt-tooltip/wt-tooltip.vue';
+import WtIconBtn from '../../../../../components/wt-icon-btn/wt-icon-btn.vue';
+import WtInput from '../../../../../components/wt-input/wt-input.vue';
 
 const props = defineProps({
   option: {

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

@@ -37,8 +37,8 @@
 
 <script setup>
 import OptionsWriteRow from './audit-form-question-options-write-row.vue';
-import WtButton from '../../../../../components/atoms/wt-button/wt-button.vue';
-import WtRadio from '../../../../../components/molecules/wt-radio/wt-radio.vue';
+import WtButton from '../../../../../components/wt-button/wt-button.vue';
+import WtRadio from '../../../../../components/wt-radio/wt-radio.vue';
 import updateObject from '../../../../../scripts/updateObject';
 import { generateOption } from '../../../schemas/AuditFormQuestionOptionsSchema';
 

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

@@ -47,8 +47,8 @@ import { maxValue, minValue, required } from '@vuelidate/validators';
 import { computed, onMounted, toRefs } from 'vue';
 import isEmpty from '../../../../../scripts/isEmpty';
 import updateObject from '../../../../../scripts/updateObject';
-import WtRadio from '../../../../../components/molecules/wt-radio/wt-radio.vue';
-import WtInput from '../../../../../components/molecules/wt-input/wt-input.vue';
+import WtRadio from '../../../../../components/wt-radio/wt-radio.vue';
+import WtInput from '../../../../../components/wt-input/wt-input.vue';
 
 const props = defineProps({
   question: {

package/src/components/atoms/wt-chip/wt-chip.vue

@@ -1,23 +0,0 @@
-<template>
-  <span class="wt-chip" :class="`wt-chip--${color}-color`">
-    <slot></slot>
-  </span>
-</template>
-
-<script>
-  export default {
-    name: 'wt-chip',
-    props: {
-      color: {
-        type: String,
-        default: 'main',
-        options: ['main', 'outline', 'accent', 'secondary', 'secondary-50', 'success', 'danger', 'transfer'],
-        notes: '"main" and "outline" are chip-specific colors',
-      },
-    },
-  };
-</script>
-
-<style lang="scss" scoped>
-  @import '../../../css/components/atoms/wt-chip/wt-chip';
-</style>

package/src/components/atoms/wt-divider/wt-divider.vue

@@ -1,25 +0,0 @@
-<template>
-  <hr class="wt-divider">
-</template>
-
-<script>
-  export default {
-    name: 'wt-divider',
-  };
-</script>
-
-<style lang="scss" scoped>
-  .wt-divider {
-    display: block;
-    box-sizing: border-box;
-    width: 100%;
-    max-width: 100%;
-    height: 0;
-    max-height: 0;
-    padding: 0;
-    margin: 0;
-    border: var(--divider-border);
-    border-color: var(--divider-border-color);
-    border-top-width: thin;
-  }
-</style>

package/src/components/atoms/wt-input-info/wt-input-info.vue

@@ -1,35 +0,0 @@
-<template>
-  <div
-    class="wt-input-info"
-    :class="{
-      'wt-input-info--invalid': invalid,
-    }"
-  >
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-  export default {
-    name: 'wt-input-info',
-    props: {
-      invalid: {
-        type: Boolean,
-        default: false,
-      },
-    },
-  };
-</script>
-
-<style lang="scss" scoped>
-  .wt-input-info {
-    @extend %typo-caption;
-    margin-top: var(--input-info-margin);
-    color: var(--input-info-color);
-    min-height: var(--input-info-min-height);
-
-    &--invalid {
-      color: var(--input-info--invalid-color);
-    }
-  }
-</style>