WtSearchBar

Props

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

Code

<script setup>
import { ref } from 'vue';

const value = ref('');
</script>

<template>
  <wt-search-bar
    :value="value"
    placeholder="Search"
    @input="value = $event"
  />
</template>

<style scoped lang="scss"></style>

Example HintedSearchBar

Code

<script setup>
import { ref } from 'vue';

const value = ref('');
</script>

<template>
  <wt-search-bar
    :value="value"
    placeholder="Search"
    hint="I am hinted!"
    @input="value = $event"
  />
</template>

<style scoped lang="scss"></style>

Example InvalidSearchBar

Code

<script setup>
import { useVuelidate } from '@vuelidate/core';
import { computed,ref } from 'vue';

const value = ref('');
const v$ = useVuelidate(
  computed(() => ({
    value: {
      required: () => false,
    },
  })),
  { value },
);

v$.value.$touch();
</script>

<template>
  <wt-search-bar
    :value="value"
    placeholder="Invalid Search"
    :v="v$"
    @input="value = $event"
  />
</template>

<style scoped lang="scss"></style>

Example SearchBarWithSearchModes

Value:

Search mode: { "value": "mode 1", "text": "Mode 1" }

Code

<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!"
    :search-mode="searchMode"
    :search-mode-options="searchModeOptions"
    @input="value = $event"
    @change:search-mode="searchMode = $event"
  />
  <p>Value: {{ value }}</p>
  <p>Search mode: {{ searchMode }}</p>
</template>

<style scoped lang="scss"></style>