From c99293a231a24e801601a3bc1af8f4e6257f5fd1 Mon Sep 17 00:00:00 2001
From: dlohvinov <nsblnr@gmail.com>
Date: Thu, 30 May 2024 15:51:21 +0300
Subject: [PATCH] 24.06.37: filter-search.vue search opts hint and validation
 [WTEL-4539]

---
 package.json                                    |  2 +-
 .../Filters/components/filter-search.vue        | 17 +++++++++++++++++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 2c98e6f9f..673fb9d22 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.6.35",
+  "version": "24.6.37",
   "private": false,
   "scripts": {
     "dev": "vite",
diff --git a/src/modules/Filters/components/filter-search.vue b/src/modules/Filters/components/filter-search.vue
index 1ee06ac7d..dd1746866 100644
--- a/src/modules/Filters/components/filter-search.vue
+++ b/src/modules/Filters/components/filter-search.vue
@@ -2,7 +2,9 @@
   <wt-search-bar
     :search-mode="multisearch && filterName"
     :search-mode-options="multisearch && searchModeOpts"
+    :hint="multisearch && currentSearchMode.hint"
     :value="localValue"
+    :v="multisearch && v$"
     class="filter-search"
     @input="localValue = $event"
     @search="setValue({ name: filterName, value: localValue })"
@@ -11,6 +13,7 @@
 </template>
 
 <script setup>
+import { useVuelidate } from '@vuelidate/core';
 import { computed, ref, watch } from 'vue';
 import { useStore } from 'vuex';
 import FilterEvent from '../enums/FilterEvent.enum.js';
@@ -46,10 +49,24 @@ function setValue(payload) {
 
 const filterName = ref(props.multisearch ? props.searchModeOpts[0].value : props.name);
 
+const currentSearchMode = computed(
+  () => props.searchModeOpts.find(({ value }) => value === filterName.value),
+);
+
 const filterValue = computed(() => getValue(filterName.value));
 
 const localValue = ref(filterValue.value);
 
+const v$ = props.multisearch && useVuelidate(computed(() => {
+  return {
+    localValue: {
+      ...currentSearchMode.value.v || {},
+    },
+  };
+}), { localValue }, { $autoDirty: true });
+
+v$.value.$touch();
+
 async function changeMode({ value }, { clearValue = true } = {}) {
   if (clearValue) await setValue({ name: filterName.value, value: '' });
   filterName.value = value;