@webitel/ui-sdk 3.2.148 → 3.2.149

package/package.json

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

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

@@ -3,7 +3,7 @@
     <template v-slot:activator>
       <wt-icon-btn
         icon="rounded-info"
-        color="outline"
+        :color="iconColor"
       ></wt-icon-btn>
     </template>
     <slot></slot>
@@ -13,6 +13,12 @@
 <script>
 export default {
   name: 'wt-hint',
+  props: {
+    iconColor: {
+      type: String,
+      default: 'outline',
+    },
+  }
 };
 </script>
 

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

@@ -8,8 +8,12 @@
   >
     <div class="wt-search-bar__wrapper">
       <div class="wt-search-bar__search-icon">
-        <slot name="search-icon">
+        <slot
+          :invalid="invalid"
+          name="search-icon"
+        >
           <wt-icon
+            :color="invalidColorProvider"
             icon="search"
           ></wt-icon>
         </slot>
@@ -27,20 +31,25 @@
           :class="{ 'hidden': !value }"
           class="wt-search-bar__reset-icon-btn"
           icon="close"
+          :color="invalidColorProvider"
           @click="handleInput('')"
         ></wt-icon-btn>
         <wt-hint
           v-if="hint"
+          :iconColor="invalidColorProvider"
         >{{ hint }}
         </wt-hint>
-        <slot name="additional-actions"></slot>
+        <slot
+          :invalid="invalid"
+          name="additional-actions"
+        ></slot>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { toRefs } from 'vue';
+import { computed, toRefs } from 'vue';
 import debounce from '../../scripts/debounce';
 import { useValidation } from '../../mixins/validationMixin/useValidation';
 
@@ -85,6 +94,10 @@ const { v, customValidators } = toRefs(props);
 
 const { invalid } = useValidation({ v, customValidators });
 
+const invalidColorProvider = computed(() => {
+  return invalid ? 'danger' : null;
+});
+
 const search = debounce((value) => {
   emit('search', value);
 }, 1000);
@@ -119,10 +132,6 @@ function handleKeyup(event) {
       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);
     }