24.02.55: wt-search-bar search modes + docs [WTEL-3889]

docs/pages/webitel-ui/components/wt-search-bar/Readme.md

@@ -1,18 +1,40 @@
 <script setup>
-import Docs from './wt-search-bar-docs.vue';
 import ExampleSearchBar from './examples/example-search-bar.vue';
 import ExampleHintedSearchBar from './examples/example-hinted-search-bar.vue';
 import ExampleInvalidSearchBar from './examples/example-invalid-search-bar.vue';
+import ExampleSearchBarWithSearchModes from './examples/example-search-bar-with-search-modes.vue';
 </script>
 
 # WtSearchBar
 
 ## Props
-::: raw
-<Docs/>
-:::
+
+| Name                | Type     | Default  | Description                               |
+|---------------------|----------|----------|-------------------------------------------|
+| `value`             | `String` | `''`     | The value of the search bar               |
+| `placeholder`       | `String` | 'Search' | The placeholder of the search bar         |
+| `hint`              | `String` | `''`     | The hint of the search bar                |
+| `v`                 | `Object` | `''`     | Validation object                         |
+| `customValidators`  | `Array`  | `[]`     | Custom validators for validation object   |
+| `searchMode`        | `String` | `''`     | The search mode of the search bar         |
+| `searchModeOptions` | `Array`  | `[]`     | The search mode options of the search bar |
+
+## Events
+
+| Name     | Params            | Description                                                                                                |
+|----------|-------------------|------------------------------------------------------------------------------------------------------------|
+| `input`  | `value`: `String` | Emitted when the value of the search bar changes (not debounced!)                                          |
+| `search` | `value`: `String` | Sends changed value, immediately, or, if "debounced" is on, debounced. Recommended for api search requests |
+
+## Slots
+
+| Name                 | Scope                  | Description                                                                |
+|----------------------|------------------------|----------------------------------------------------------------------------|
+| `search-icon`        | `{ invalid: Boolean }` | Change default search icon                                                 |
+| `additional-actions` | `{ invalid: Boolean }` | Adding additional functionality to search bar. For example wt-context-menu |
 
 ## Example SearchBar
+
 ::: raw
 <ExampleSearchBar/>
 :::
@@ -22,6 +44,7 @@ import ExampleInvalidSearchBar from './examples/example-invalid-search-bar.vue';
 :::
 
 ## Example HintedSearchBar
+
 ::: raw
 <ExampleHintedSearchBar/>
 :::
@@ -31,10 +54,21 @@ import ExampleInvalidSearchBar from './examples/example-invalid-search-bar.vue';
 :::
 
 ## Example InvalidSearchBar
+
 ::: raw
 <ExampleInvalidSearchBar/>
 :::
 
 ::: details Code
 <<< ./examples/example-invalid-search-bar.vue
 :::
+
+## Example SearchBarWithSearchModes
+
+::: raw
+<ExampleSearchBarWithSearchModes />
+:::
+
+::: details Code
+<<< ./examples/example-search-bar-with-search-modes.vue
+:::

docs/pages/webitel-ui/components/wt-search-bar/examples/example-search-bar-with-search-modes.vue

@@ -0,0 +1,37 @@
+<script setup>
+
+import { ref } from 'vue';
+
+const value = ref('');
+
+const searchModeOptions = [
+  {
+    value: 'mode 1',
+    text: 'Mode 1',
+  },
+  {
+    value: 'mode 2',
+    text: 'Mode 2',
+  },
+];
+
+const searchMode = ref(searchModeOptions[0]);
+</script>
+
+<template>
+  <wt-search-bar
+    :value="value"
+    placeholder="Search"
+    hint="I have search modes!"
+    :searchMode="searchMode"
+    :searchModeOptions="searchModeOptions"
+    @input="value = $event"
+    @change:search-mode="searchMode = $event"
+  />
+  <p>Value: {{ value }}</p>
+  <p>Search mode: {{ searchMode }}</p>
+</template>
+
+<style scoped lang="scss">
+
+</style>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.2.54",
+  "version": "24.2.55",
   "private": false,
   "scripts": {
     "dev": "vite",

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

@@ -39,6 +39,32 @@
         >
           {{ hint }}
         </wt-hint>
+
+        <wt-context-menu
+          v-if="searchMode"
+          :options="searchModeOptions"
+          @click="emit('change:search-mode', $event.option)"
+        >
+          <template #activator>
+            <wt-tooltip>
+              <template #activator>
+                <wt-icon-btn
+                  :color="invalid ? 'error' : 'default'"
+                  icon="filter"
+                />
+              </template>
+              {{ $t('webitelUI.searchBar.settingsHint') }}
+            </wt-tooltip>
+          </template>
+          <template #option="{ value, text }">
+            <wt-radio
+              :label="text"
+              :selected="searchMode.value === value"
+              :value="true"
+            />
+          </template>
+        </wt-context-menu>
+
         <slot
           :invalid="invalid"
           name="additional-actions"
@@ -78,12 +104,20 @@ const props = defineProps({
     type: String,
     description: 'Adds hint icon + tooltip with text, passed as "hint" prop',
   },
+  searchMode: {
+    type: String,
+  },
+  searchModeOptions: {
+    type: Array,
+    default: () => ([]),
+  },
 });
 
 const emit = defineEmits([
   'input',
   'search',
   'enter',
+  'change:search-mode',
 ]);
 
 const { v, customValidators } = toRefs(props);