@webitel/ui-sdk 3.2.143 → 3.2.145

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "3.2.143",
+  "version": "3.2.145",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",

package/src/components/wt-search-bar/wt-search-bar.vue

@@ -2,10 +2,18 @@
   <div
     :class="{
       'wt-search-bar--outline': outline,
+      'wt-search-bar--invalid': invalid,
     }"
     class="wt-search-bar"
   >
     <div class="wt-search-bar__wrapper">
+      <div class="wt-search-bar__search-icon">
+        <slot name="search-icon">
+          <wt-icon
+            icon="search"
+          ></wt-icon>
+        </slot>
+      </div>
       <input
         :placeholder="placeholder || $t('webitelUI.searchBar.placeholder')"
         :value="value"
@@ -14,27 +22,36 @@
         @input="handleInput($event.target.value)"
         @keyup="handleKeyup"
       >
-      <div class="wt-search-bar__search-icon">
-        <slot name="search-icon">
-          <wt-icon
-            icon="search"
-          ></wt-icon>
-        </slot>
+      <div class="wt-search-bar__icon-controls">
+        <wt-icon-btn
+          :class="{ 'hidden': !value }"
+          class="wt-search-bar__reset-icon-btn"
+          icon="close"
+          @click="handleInput('')"
+        ></wt-icon-btn>
+        <wt-hint
+          v-if="hint"
+        >{{ hint }}
+        </wt-hint>
+        <slot name="additional-actions"></slot>
       </div>
-      <wt-icon-btn
-        :class="{ 'hidden': !value }"
-        class="wt-search-bar__reset-icon-btn"
-        icon="close"
-        @click="handleInput('')"
-      ></wt-icon-btn>
     </div>
   </div>
 </template>
 
 <script setup>
+import { reactive } from 'vue';
 import debounce from '../../scripts/debounce';
+import { useValidation } from '../../mixins/validationMixin/useValidation';
 
 const props = defineProps({
+  v: {
+    type: Object,
+  },
+  customValidators: {
+    type: Array,
+    default: () => [],
+  },
   /**
    * Current search-bar value (`v-model`)
    */
@@ -52,6 +69,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  hint: {
+    type: String,
+    description: 'Adds hint icon + tooltip with text, passed as "hint" prop',
+  },
 });
 
 const emit = defineEmits([
@@ -60,6 +81,10 @@ const emit = defineEmits([
   'enter',
 ]);
 
+const { v, customValidators } = reactive(props);
+
+const { invalid } = useValidation({ v, customValidators });
+
 const search = debounce((value) => {
   emit('search', value);
 }, 1000);
@@ -89,25 +114,35 @@ function handleKeyup(event) {
 .wt-search-bar {
   cursor: text;
 
+  &.wt-search-bar--invalid {
+    .wt-search-bar__wrapper {
+      border-color: var(--false-color);
+      outline: none; // prevent outline overlapping false color
+    }
+    //deep needed to change color for icons in slot
+    :deep .wt-icon__icon {
+      fill: var(--false-color);
+    }
+    .wt-search-bar__input {
+      color: var(--false-color);
+    }
+  }
+
   .wt-search-bar__wrapper {
-    position: relative;
+    border: var(--input-border);
+    border-color: var(--form-border-color);
+    border-radius: var(--border-radius);
+    display: flex;
+    padding: calc(var(--spacing-xs) - 1px) var(--spacing-xs);
+    align-items: center;
+    gap: var(--spacing-xs);
   }
 
   .wt-search-bar__search-icon {
-    position: absolute;
-    top: 50%;
-    left: var(--input-icon-margin);
-    transform: translateY(-50%);
-    line-height: 0;
-    pointer-events: none;
+    display: flex;
   }
 
   .wt-search-bar__reset-icon-btn {
-    position: absolute;
-    top: 50%;
-    right: var(--input-icon-margin);
-    transform: translateY(-50%);
-
     .wt-search-bar:not(:focus-within) & {
       pointer-events: none;
       opacity: 0;
@@ -121,12 +156,11 @@ function handleKeyup(event) {
     display: block;
     box-sizing: border-box;
     width: 100%;
-    padding: var(--search-bar-padding);
+    padding: 0;
     transition: var(--transition);
     color: var(--form-input-color);
-    border: var(--input-border);
-    border-color: var(--form-border-color);
-    border-radius: var(--border-radius);
+    border: none;
+    outline: none;
 
     &:focus {
       @include wt-placeholder('focus');
@@ -169,5 +203,11 @@ function handleKeyup(event) {
   .wt-search-bar__input::-webkit-search-results-decoration {
     display: none;
   }
+
+  .wt-search-bar__icon-controls {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+  }
 }
 </style>

package/src/locale/en/en.js

@@ -247,6 +247,8 @@ export default {
     url: 'Should look like url',
     regExpValidator: 'This regular expression is not valid',
     domainValidator: 'Incorrect domain',
+    decimalValidator: 'Decimal precision should be no more than { count } places',
+    integer: 'The field should contain only whole numbers',
   },
   webitelUI: {
     searchBar: {

package/src/locale/i18n.js

@@ -15,6 +15,7 @@ const messages = {
 export default new createI18n({
   // legacy: false,
   locale: 'en',
+  allowComposition: true,
   fallbackLocale: 'en',
   messages,
 });

package/src/locale/ru/ru.js

@@ -245,6 +245,8 @@ export default {
     url: 'Необходимо ввести корректный url-адрес',
     regExpValidator: 'Не правильное регулярное выражение',
     domainValidator: 'Неправильный домен',
+    decimalValidator: 'Количество десятичных знаков не должно быть больше { count }',
+    integer: 'Поле должно содержать только целые числа',
   },
   webitelUI: {
     searchBar: {

package/src/locale/ua/ua.js

@@ -245,6 +245,8 @@ export default {
     url: 'Необхідно ввести правильну url-адресу',
     regExpValidator: 'Не правильний регулярний вираз',
     domainValidator: 'Невірний домен',
+    decimalValidator: 'Кількість десяткових знаків не повинна бути більше { count }',
+    integer: 'Поле повинно містити лише цілі числа',
   },
   webitelUI: {
     searchBar: {

package/src/mixins/validationMixin/useValidation.js

@@ -0,0 +1,41 @@
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+export function useValidation({ v, customValidators }) {
+  const { t } = useI18n();
+  const isValidation = computed(() => !!v && !!Object.keys(v).length);
+  const invalid = computed(() => isValidation.value && v.$error);
+
+  const validationText = computed(() => {
+    let validationText = '';
+    if (isValidation && invalid) {
+      if (v.required?.$invalid) validationText = t('validation.required');
+      else if (v.numeric?.$invalid) validationText = t('validation.numeric');
+      else if (v.email?.$invalid) validationText = t('validation.email');
+      else if (v.gatewayHostValidator?.$invalid) validationText = t('validation.gatewayHostValidator');
+      else if (v.ipValidator?.$invalid) validationText = t('validation.ipValidator');
+      else if (v.macValidator?.$invalid) validationText = t('validation.macValidator');
+      else if (v.minValue?.$invalid) validationText = `${t('validation.minValue')} ${v.minValue.$params.min}`;
+      else if (v.maxValue?.$invalid) validationText = `${t('validation.maxValue')} ${v.maxValue.$params.max}`;
+      else if (v.sipAccountValidator?.$invalid) validationText = t('validation.sipAccountValidator');
+      else if (v.minLength?.$invalid) validationText = `${t('validation.minLength')} ${v.minLength.$params.min}`;
+      else if (v.url?.$invalid) validationText = `${t('validation.url')}`;
+      else if (v.regExpValidator?.$invalid) validationText = `${t('validation.regExpValidator')}`;
+      else if (v.sameAs?.$invalid) validationText = `${t('validation.sameAs')}`;
+      else if (v.domainValidator?.$invalid) validationText = `${t('validation.domainValidator')}`;
+      else if (v.decimalValidator?.$invalid) validationText = `${t('validation.decimalValidator')} ${v.decimalValidator.$params.count}`;
+      else if (v.integer?.$invalid) validationText = `${t('validation.integer')}`;
+    }
+    // eslint-disable-next-line no-restricted-syntax
+    for (const { name, text } of customValidators) {
+      if (v[name]?.$invalid) validationText = text;
+    }
+    return validationText;
+  });
+
+  return {
+    isValidation,
+    invalid,
+    validationText,
+  };
+}

package/src/mixins/validationMixin/validationMixin.js

@@ -33,6 +33,8 @@ export default {
         else if (this.v.regExpValidator?.$invalid) validationText = `${this.$t('validation.regExpValidator')}`;
         else if (this.v.sameAs?.$invalid) validationText = `${this.$t('validation.sameAs')}`;
         else if (this.v.domainValidator?.$invalid) validationText = `${this.$t('validation.domainValidator')}`;
+        else if (this.v.decimalValidator?.$invalid) validationText = `${this.$t('validation.decimalValidator')} ${this.v.decimalValidator.$params.count}`;
+        else if (this.v.integer?.$invalid) validationText = `${this.$t('validation.integer')}`;
       }
       // eslint-disable-next-line no-restricted-syntax
       for (const { name, text } of this.customValidators) {

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

@@ -14,7 +14,7 @@
       type="number"
       @input="emit('update:option', { name: option.name, score: $event })"
     ></wt-input>
-    <wt-tooltip>
+    <wt-tooltip class="audit-form-question-options-write-row__tooltip">
       <template v-slot:activator>
         <wt-icon-btn
           :disabled="first"
@@ -34,6 +34,7 @@ import { computed, onMounted, toRefs } from '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';
+import decimalValidator from '../../../../../validators/decimalValidator';
 
 const props = defineProps({
   option: {
@@ -63,6 +64,7 @@ const v$ = useVuelidate(
           required,
           minValue: minValue(0),
           maxValue: maxValue(10),
+          decimalValidator: decimalValidator(2),
         },
       },
     })),
@@ -77,8 +79,11 @@ onMounted(() => v$.value.$touch());
 <style lang="scss" scoped>
 .audit-form-question-options-write-row {
   display: grid;
-  align-items: center;
   grid-template-columns: 3fr 1fr 24px;
   gap: var(--spacing-sm);
+
+  &__tooltip {
+    padding-top: var(--spacing-md);
+  }
 }
 </style>

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

@@ -43,7 +43,7 @@
 
 <script setup>
 import { useVuelidate } from '@vuelidate/core';
-import { maxValue, minValue, required } from '@vuelidate/validators';
+import { maxValue, minValue, required, integer } from '@vuelidate/validators';
 import { computed, onMounted, toRefs } from 'vue';
 import isEmpty from '../../../../../scripts/isEmpty';
 import updateObject from '../../../../../scripts/updateObject';
@@ -81,11 +81,13 @@ const v$ = useVuelidate(
           minValue: minValue(0),
           maxValue: maxValue(9),
           required,
+          integer,
         },
         max: {
           minValue: minValue(1),
           maxValue: maxValue(10),
           required,
+          integer,
         },
       },
     })),

package/src/validators/decimalValidator.js

@@ -0,0 +1,9 @@
+/* [WTEL-3791] */
+/* Check value is an integer or has n* decimal places */
+import { helpers } from '@vuelidate/validators';
+
+const decimalValidator = (count) => helpers.withParams(
+    { count },
+    (value) => value % 1 == 0 || value.toString().split('.')[1].length <= count);
+
+export default decimalValidator;