@webitel/ui-sdk 3.2.143 → 3.2.144

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "3.2.143",
+  "version": "3.2.144",
   "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/i18n.js

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

package/src/mixins/validationMixin/useValidation.js

@@ -0,0 +1,39 @@
+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')}`;
+    }
+    // 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,
+  };
+}