User-friendly Search Input Component Inspired By Github

Install & Download:

# NPM
$ npm i vue-search-input

Description:

A user-friendly, fully customizable search input component inspired by Github and Storybook.

It gets focus by pressing the “/” key on the keyboard and displays a close button to quickly clear what you just typed.

How to use it:

1. Import and register the search input component.

import { ref } from 'vue'
import SearchInput from 'vue-search-input'
import 'vue-search-input/dist/styles.css'

2. Add the component to the template.

<template>
  <SearchInput v-model="searchVal" />
</template>

3. Available props.

type: {
  type: String as PropType<FieldType>,
  default: 'search',
  validator: (prop: FieldType) => fieldType.includes(prop)
},
modelValue: {
  type: String,
  default: ''
},
wrapperClass: {
  type: String,
  default: 'search-input-wrapper'
},
searchIcon: defaultBoolean(),
shortcutIcon: defaultBoolean(),
clearIcon: defaultBoolean(),
hideShortcutIconOnBlur: defaultBoolean(),
clearOnEsc: defaultBoolean(),
blurOnEsc: defaultBoolean(),
selectOnFocus: defaultBoolean(),
shortcutListenerEnabled: defaultBoolean(),
shortcutKey: {
  type: String as PropType<KeyboardEvent['key']>,
  default: '/'
}

4. Slots.

search-icon: <i class=”search-icon search”></i>
shortcut-icon: <i class=”search-icon shortcut” title=’Press “/” to search’></i>
clear-icon: <button class=”search-icon clear” aria-label=”Clear” @mousedown=”clear” @keydown.space.enter=”clear”></button>
append: Adds an item inside the input wrapper, before the search icon
append-inner: Adds an item inside the input wrapper, after the search icon
prepend: Adds an item inside the input wrapper directly after the input element
prepend-outer: Adds an item inside the input wrapper directly after the clear icon

5. Fire an event after the input value has changed.