@webitel/ui-sdk 3.2.145 → 3.2.147

package/package.json

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

package/src/components/wt-search-bar/__tests__/WtSearchBar.spec.js

@@ -1,5 +1,14 @@
+import { ref } from 'vue';
 import { shallowMount } from '@vue/test-utils';
 import WtSearchBar from '../wt-search-bar.vue';
+import { useValidation } from '../../../mixins/validationMixin/useValidation';
+
+jest.mock('../../../mixins/validationMixin/useValidation');
+useValidation.mockImplementation(() => ({
+  isValidation: ref(false),
+  invalid: ref(false),
+  validationText: ref(''),
+}));
 
 describe('WtSearchBar', () => {
   it('renders a component', () => {

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

@@ -40,7 +40,7 @@
 </template>
 
 <script setup>
-import { reactive } from 'vue';
+import { toRefs } from 'vue';
 import debounce from '../../scripts/debounce';
 import { useValidation } from '../../mixins/validationMixin/useValidation';
 
@@ -81,7 +81,7 @@ const emit = defineEmits([
   'enter',
 ]);
 
-const { v, customValidators } = reactive(props);
+const { v, customValidators } = toRefs(props);
 
 const { invalid } = useValidation({ v, customValidators });
 

package/src/mixins/validationMixin/useValidation.js

@@ -3,32 +3,32 @@ 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 isValidation = computed(() => !!v.value && !!Object.keys(v.value).length);
+  const invalid = computed(() => isValidation.value && v.value.$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')}`;
+      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');
+      else if (v.value.gatewayHostValidator?.$invalid) validationText = t('validation.gatewayHostValidator');
+      else if (v.value.ipValidator?.$invalid) validationText = t('validation.ipValidator');
+      else if (v.value.macValidator?.$invalid) validationText = t('validation.macValidator');
+      else if (v.value.minValue?.$invalid) validationText = `${t('validation.minValue')} ${v.value.minValue.$params.min}`;
+      else if (v.value.maxValue?.$invalid) validationText = `${t('validation.maxValue')} ${v.value.maxValue.$params.max}`;
+      else if (v.value.sipAccountValidator?.$invalid) validationText = t('validation.sipAccountValidator');
+      else if (v.value.minLength?.$invalid) validationText = `${t('validation.minLength')} ${v.value.minLength.$params.min}`;
+      else if (v.value.url?.$invalid) validationText = `${t('validation.url')}`;
+      else if (v.value.regExpValidator?.$invalid) validationText = `${t('validation.regExpValidator')}`;
+      else if (v.value.sameAs?.$invalid) validationText = `${t('validation.sameAs')}`;
+      else if (v.value.domainValidator?.$invalid) validationText = `${t('validation.domainValidator')}`;
+      else if (v.value.decimalValidator?.$invalid) validationText = `${t('validation.decimalValidator')} ${v.value.decimalValidator.$params.count}`;
+      else if (v.value.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;
+      if (v.value[name]?.$invalid) validationText = text;
     }
     return validationText;
   });