# Компонент XSearch

Компонент содержит в себе поисковую строку. Props и события может принимать и инициировать, соответственно,
как у компонента q-input.

### Импорт компонента:

Компонент базовый, поэтому его использование возможно без импорта.

```javascript
import XSearch from '@components/common/base-search/index.vue';
```

### Описание props

1. `placeholder` - Placeholder для поля ввода. По-умолчанию - Поиск.

### Шаблон

Для того, чтобы использовать компонент на странице приложения во vue, необходимо добавить его следующим образом:

```html
<x-search
  @keydown.esc="filter.search=''"
  debounce="1000"
  dense
  filled
  :placeholder="$t('base.searchBar.search')"
  v-model="filter.search"
>
</x-search>
```

В примере выше данные, хранимые в `filter.search` попадут в поисковую строку или будут взяты оттуда соответственно.

### Слоты

Для того, чтобы была возможность передать в строку поиска кастомный шаблон, предусмотрен слот `append`, который при
передаче в компонент будет располагаться в конце строки как и у `q-input`. Пример реализации переключателя для поиска
в компоненте BaseTable:

```html
<x-search
  @keydown.esc="filter.search=''"
  debounce="1000"
  dense
  filled
  :placeholder="$t('base.searchBar.search')"
  v-model="filter.search"
>
  <template v-slot:append>
    <q-btn
      @click="toggleFilter"
      dense
      flat
      icon="settings"
      round
      v-if="!!attributesCast.length"
    >
      <q-badge
        v-if="!!filterCount"
        color="red"
        floating
        style="border-radius: 50%"
      >
        {{filterCount}}
      </q-badge>
    </q-btn>
  </template>
</x-search>
```
