User-friendly Search Input Component Inspired By Github

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.

  • @update:modelValue

Preview:

User-friendly Search Input Component Inspired By Github

Changelog:

v1.1.4 (05/03/2022)

  • Bug Fixes

Download Details:

Author: kouts

Live Demo: https://vue-search-input.vercel.app/

Download Link: https://github.com/kouts/vue-search-input/archive/refs/heads/main.zip

Official Website: https://github.com/kouts/vue-search-input

Install & Download:

# NPM
$ npm i vue-search-input

You Might Be Interested In:

Tags:

Add Comment