feat: added slots, shortcut prop, clear icon button

- Added prepend, prepend-inner, append, append-outer slots
- Added prop for enabling shortcut functionality
- Changed the clear icon to be a button

Author: kouts

README.md

@@ -73,9 +73,11 @@ The default class for the wrapper `div` is `search-input-wrapper` you can overri
 | searchIcon | boolean | Displays the "search" icon | true |
 | shortcutIcon | boolean | Enables the functionality for the `/` keypress and displays the "shortcut" icon | true |
 | clearIcon | boolean | Displays the "clear text" icon | true |
+| hideShortcutIconOnBlur | boolean | Whether to hide the shortcut icon when the input loses focus | true |
 | clearOnEsc | boolean | Whether to clear the input field when the `esc` key is pressed | true |
 | blurOnEsc | boolean | Whether to takes the focus out of the input field when the `esc` key is pressed | true |
 | selectOnFocus | boolean | Selects the input's text upon `/` keypress | true |
+| shortcutListenerEnabled | boolean | Enables the shortcut functionality | true |
 | shortcutKey | string | The `key` for the shortcut functionality | `/` |
 
 ## Slots
@@ -86,4 +88,8 @@ The default class for the wrapper `div` is `search-input-wrapper` you can overri
 | :--- | :--- | :--- |
 | search-icon | Slot for the search icon | - |
 | shortcut-icon | Slot for the shortcut icon | - |
-| clear-icon | Slot for the clear icon | `clear: Function` the function that clears the input |
+| clear-icon | Slot for the clear icon | `clear: Function` the function that clears the input |
+| 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 | - |

playground/App.vue

@@ -5,11 +5,11 @@ import { ref } from 'vue'
 import SearchInput from '@/SearchInput.vue'
 
 const example = ref('example1')
-const hasFocus = ref(false)
+const hasFocus1 = ref(false)
+const hasFocus2 = ref(false)
 const val1 = ref('')
 const val2 = ref('')
 const val3 = ref('')
-const val4 = ref('')
 </script>
 
 <template>
@@ -25,40 +25,64 @@ const val4 = ref('')
     <h2>Examples</h2>
     <div class="row">
       <div class="col">
-        <a href="#" class="mr-3" @click="example = 'example1'">Autogrow</a>
-        <a href="#" class="mr-3" @click="example = 'example2'">Without search icon</a>
-        <a href="#" class="mr-3" @click="example = 'example3'">Without shortcut icon</a>
-        <a href="#" @click="example = 'example4'">Without clear icon</a>
+        <a href="#" class="mr-3" @click="example = 'example1'">Storybook style</a>
+        <a href="#" class="mr-3" @click="example = 'example2'">GitHub style</a>
+        <a href="#" class="mr-3" @click="example = 'example3'">Gmail style</a>
       </div>
     </div>
     <div v-if="example === 'example1'" class="row mt-4">
       <div class="col">
-        <div>Autogrow</div>
-        <div :class="['search-input-wrapper mt-2', hasFocus ? 'w350' : 'w250']">
-          <SearchInput v-model="val1" placeholder="Search..." @focus="hasFocus = true" @blur="hasFocus = false" />
-        </div>
+        <div>Storybook style</div>
+        <SearchInput
+          v-model="val1"
+          class="search-input-wrapper mt-2 w270"
+          :placeholder="hasFocus1 ? 'Type to find...' : 'Find components'"
+          @focus="hasFocus1 = true"
+          @blur="hasFocus1 = false"
+        />
         <div class="d-flex mt-2">{{ val1 }}</div>
       </div>
     </div>
     <div v-if="example === 'example2'" class="row mt-4">
       <div class="col">
-        <div>Without search icon</div>
-        <SearchInput v-model="val2" class="search-input-wrapper no-search-icon mt-2 w250" :search-icon="false" />
+        <div>GitHub style</div>
+        <SearchInput
+          v-model="val2"
+          placeholder="Search or jump to..."
+          :class="['search-input-wrapper no-search-icon mt-2', hasFocus2 ? 'w350' : 'w270']"
+          :search-icon="false"
+          :clear-icon="false"
+          :clear-on-esc="false"
+          :select-on-focus="false"
+          :hide-shortcut-icon-on-blur="false"
+          @focus="hasFocus2 = true"
+          @blur="hasFocus2 = false"
+        />
         <div class="d-flex mt-2">{{ val2 }}</div>
       </div>
     </div>
     <div v-if="example === 'example3'" class="row mt-4">
       <div class="col">
-        <div>Without shortcut icon</div>
-        <SearchInput v-model="val3" class="search-input-wrapper no-shortcut-icon mt-2 w250" :shortcut-icon="false" />
-        <div class="d-flex mt-2">{{ val3 }}</div>
-      </div>
-    </div>
-    <div v-if="example === 'example4'" class="row mt-4">
-      <div class="col">
-        <div>Without clear icon</div>
-        <SearchInput v-model="val4" class="search-input-wrapper no-clear-icon mt-2 w250" :clear-icon="false" />
-        <div class="d-flex mt-2">{{ val4 }}</div>
+        <div>Gmail style</div>
+        <SearchInput
+          v-model="val3"
+          class="search-input-wrapper gmail mt-2 w270"
+          placeholder="Search mail"
+          :clear-on-esc="false"
+          :shortcut-icon="false"
+          :shortcut-listener-enabled="false"
+        >
+          <template #append-outer>
+            <button class="settings">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+                <path
+                  d="M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z"
+                ></path>
+              </svg>
+            </button>
+          </template>
+        </SearchInput>
+        <div class="d-flex mt-2">{{ val1 }}</div>
       </div>
     </div>
   </div>
@@ -141,8 +165,8 @@ a {
   margin-right: 0.75rem;
 }
 
-.w250 {
-  width: 250px;
+.w270 {
+  width: 270px;
   transition: width 0.35s;
 }
 
@@ -153,9 +177,33 @@ a {
 
 .search-input-wrapper {
   &.no-search-icon {
-    .search-input {
+    [data-search-input='true'] {
       padding-left: 12px;
     }
   }
+
+  &.gmail {
+    input[data-search-input='true'] {
+      padding-right: 56px;
+    }
+    .search-icon {
+      &.clear {
+        right: 32px;
+      }
+    }
+    .settings {
+      position: absolute;
+      bottom: 7px;
+      right: 6px;
+      background: none;
+      border: none;
+      cursor: pointer;
+      outline: none;
+      padding: 0px;
+      line-height: 0;
+      color: $icon-color;
+      fill: $icon-color;
+    }
+  }
 }
 </style>

src/SearchInput.vue

@@ -1,8 +1,10 @@
 <template>
   <div v-bind="attrsStyles">
+    <slot name="prepend"></slot>
     <slot v-if="searchIcon" name="search-icon">
       <i class="search-icon search"></i>
     </slot>
+    <slot name="prepend-inner"></slot>
     <input
       ref="inputRef"
       type="search"
@@ -14,12 +16,14 @@
       @blur="hasFocus = false"
       @keydown="onKeydown"
     />
+    <slot name="append"></slot>
     <slot v-if="showShortcutIcon" name="shortcut-icon">
       <i class="search-icon shortcut" title='Press "/" to search'></i>
     </slot>
     <slot v-if="showClearIcon" name="clear-icon" :clear="clear">
-      <i class="search-icon clear" @mousedown="clear"></i>
+      <button class="search-icon clear" aria-label="Clear" @mousedown="clear" @keydown.space.enter="clear"></button>
     </slot>
+    <slot name="append-outer"></slot>
   </div>
 </template>
 
@@ -65,6 +69,7 @@ export default defineComponent({
     clearOnEsc: defaultBoolean(),
     blurOnEsc: defaultBoolean(),
     selectOnFocus: defaultBoolean(),
+    shortcutListenerEnabled: defaultBoolean(),
     shortcutKey: {
       type: String as PropType<KeyboardEvent['key']>,
       default: '/'
@@ -133,7 +138,7 @@ export default defineComponent({
     const removeDocumentKeydown = () => window.document.removeEventListener('keydown', onDocumentKeydown)
 
     watch(
-      () => props.shortcutIcon,
+      () => props.shortcutListenerEnabled,
       (nV) => {
         if (nV) {
           window.document.addEventListener('keydown', onDocumentKeydown)

src/styles.scss

@@ -80,18 +80,23 @@ $active-color: #1ea7fd;
       background-color: lighten($icon-color, 5%);
     }
     &.clear {
-      right: 8px;
-      bottom: 8px;
+      right: 5px;
+      bottom: 7px;
       cursor: pointer;
       z-index: 10;
       height: 18px;
       box-sizing: border-box;
       display: block;
-      width: 22px;
-      height: 22px;
+      width: 24px;
+      height: 24px;
       border: 2px solid transparent;
       border-radius: 40px;
-
+      background: none;
+      padding: 0px;
+      outline: none;
+      &:focus {
+        background: darken($input-background, 4%);
+      }
     }
     &.clear::after,
     &.clear::before {
@@ -104,8 +109,8 @@ $active-color: #1ea7fd;
       background: $icon-color;
       transform: rotate(45deg);
       border-radius: 5px;
-      top: 8px;
-      left: 1px;
+      top: 9px;
+      left: 2px;
     }
     &.clear::after {
       transform: rotate(-45deg);

tests/searchInput.spec.ts

@@ -2,6 +2,8 @@ import { mount } from '@vue/test-utils'
 import SearchInput from '@/SearchInput.vue'
 import { fieldType } from '@/SearchInput.types'
 
+const INPUT_SELECTOR = 'input[data-search-input="true"]'
+
 const createWrapper = (opts?: Record<string, unknown>) => {
   return mount(SearchInput, opts)
 }
@@ -101,9 +103,9 @@ describe('SearchInput.vue', () => {
       }
     })
 
-    const i = await wrapper.find('i.search-icon.clear')
+    const button = await wrapper.find('button.search-icon.clear')
 
-    await i.trigger('mousedown')
+    await button.trigger('mousedown')
 
     expect(wrapper.emitted()['update:modelValue'][0]).toEqual([''])
   })
@@ -132,7 +134,7 @@ describe('SearchInput.vue', () => {
     const event = new KeyboardEvent('keydown', { key: '/' })
     document.dispatchEvent(event)
 
-    const input = wrapper.find('input[data-search-input="true"]')
+    const input = wrapper.find(INPUT_SELECTOR)
 
     expect(input.element).toBe(document.activeElement)
   })
@@ -145,12 +147,12 @@ describe('SearchInput.vue', () => {
     expect(removeSpy).toHaveBeenCalled()
   })
 
-  it('removes the keydown event listener when shortcutIcon prop turns false', async () => {
+  it('removes the keydown event listener when shortcutListenerEnabled prop turns false', async () => {
     const removeSpy = jest.spyOn(document, 'removeEventListener').mockImplementation()
     const wrapper = createWrapper()
 
     wrapper.setProps({
-      shortcutIcon: false
+      shortcutListenerEnabled: false
     })
 
     expect(removeSpy).toHaveBeenCalled()
@@ -166,7 +168,7 @@ describe('SearchInput.vue', () => {
     const event = new KeyboardEvent('keydown', { key: '/' })
     document.dispatchEvent(event)
 
-    const input = await wrapper.find('input[data-search-input="true"]')
+    const input = await wrapper.find(INPUT_SELECTOR)
 
     const inputEl = input.element as HTMLInputElement
 
@@ -177,7 +179,7 @@ describe('SearchInput.vue', () => {
   it('focuses the input text when the "/" key is pressed', async () => {
     const wrapper = createWrapperContainer()
 
-    const inputs = await wrapper.findAll('input[data-search-input="true"]')
+    const inputs = await wrapper.findAll(INPUT_SELECTOR)
 
     Object.defineProperty(inputs[0].element as HTMLInputElement, 'offsetWidth', { value: 10, writable: true })
     Object.defineProperty(inputs[1].element as HTMLInputElement, 'offsetWidth', { value: 10, writable: true })
@@ -199,4 +201,56 @@ describe('SearchInput.vue', () => {
 
     expect(i).toBeTruthy()
   })
+
+  it('renders the prepend slot', async () => {
+    const wrapper = createWrapper({
+      slots: {
+        prepend: '<div class="prepend">prepend content</div>'
+      }
+    })
+
+    const prepend = wrapper.find('.prepend')
+    const i = wrapper.find('i.search-icon.search')
+
+    expect(prepend.element.nextElementSibling).toEqual(i.element)
+  })
+
+  it('renders the prepend-inner slot', async () => {
+    const wrapper = createWrapper({
+      slots: {
+        'prepend-inner': '<div class="prepend-inner">prepend-inner content</div>'
+      }
+    })
+
+    const prependInner = wrapper.find('.prepend-inner')
+    const i = wrapper.find('i.search-icon.search')
+
+    expect(i.element.nextElementSibling).toEqual(prependInner.element)
+  })
+
+  it('renders the append slot', async () => {
+    const wrapper = createWrapper({
+      slots: {
+        append: '<div class="append">append content</div>'
+      }
+    })
+
+    const append = wrapper.find('.append')
+    const i = wrapper.find('i.search-icon.shortcut')
+
+    expect(append.element.nextElementSibling).toEqual(i.element)
+  })
+
+  it('renders the append-outer slot', async () => {
+    const wrapper = createWrapper({
+      slots: {
+        'append-outer': '<div class="append-outer">append-outer content</div>'
+      }
+    })
+
+    const appendOuter = wrapper.find('.append-outer')
+    const i = wrapper.find('i.search-icon.shortcut')
+
+    expect(i.element.nextElementSibling).toEqual(appendOuter.element)
+  })
 })