assistant-storefront/app/javascript/dashboard/modules/search/components/SearchInput.vue

<script setup>
import { ref, useTemplateRef, onMounted, onUnmounted } from 'vue';
import { debounce } from '@chatwoot/utils';
import RecentSearches from './RecentSearches.vue';

const emit = defineEmits(['search', 'selectRecentSearch']);

const searchQuery = defineModel({
  type: String,
  default: '',
});
const isInputFocused = ref(false);
const showRecentSearches = ref(false);
const searchInput = useTemplateRef('searchInput');
const recentSearchesRef = useTemplateRef('recentSearchesRef');

const handler = e => {
  if (e.key === '/' && document.activeElement.tagName !== 'INPUT') {
    e.preventDefault();
    searchInput.value.focus();
  } else if (e.key === 'Escape' && document.activeElement.tagName === 'INPUT') {
    e.preventDefault();
    searchInput.value.blur();
  }
};

const debouncedEmit = debounce(
  value =>
    emit('search', value.length > 1 || value.match(/^[0-9]+$/) ? value : ''),
  500
);

const onInput = () => {
  debouncedEmit(searchQuery.value);

  if (searchQuery.value.trim()) {
    showRecentSearches.value = false;
  } else if (isInputFocused.value) {
    showRecentSearches.value = true;
  }
};

const onFocus = () => {
  isInputFocused.value = true;
  if (!searchQuery.value.trim()) {
    showRecentSearches.value = true;
  }
};

const onBlur = () => {
  isInputFocused.value = false;
  showRecentSearches.value = false;
};

const onSelectRecentSearch = query => {
  searchQuery.value = query;
  emit('selectRecentSearch', query);
  showRecentSearches.value = false;
  searchInput.value.focus();
};

const addToRecentSearches = query => {
  if (recentSearchesRef.value) {
    recentSearchesRef.value.addRecentSearch(query);
  }
};

defineExpose({
  addToRecentSearches,
});

onMounted(() => {
  searchInput.value.focus();
  document.addEventListener('keydown', handler);
});

onUnmounted(() => {
  document.removeEventListener('keydown', handler);
});
</script>

<template>
  <div
    class="rounded-xl transition-[border-bottom] duration-[0.2s] ease-[ease-in-out] relative flex items-start flex-col border border-solid bg-n-solid-1 divide-y divide-n-strong"
    :class="{
      'border-n-brand': isInputFocused,
      'border-n-strong': !isInputFocused,
    }"
  >
    <div class="flex items-center w-full h-[3.25rem] px-4 gap-2">
      <div class="flex items-center">
        <fluent-icon
          icon="search"
          class="icon"
          aria-hidden="true"
          :class="{
            'text-n-blue-text': isInputFocused,
            'text-n-slate-10': !isInputFocused,
          }"
        />
      </div>
      <input
        ref="searchInput"
        v-model="searchQuery"
        type="search"
        class="reset-base outline-none w-full m-0 bg-transparent border-transparent shadow-none text-n-slate-12 dark:text-n-slate-12 active:border-transparent active:shadow-none hover:border-transparent hover:shadow-none focus:border-transparent focus:shadow-none placeholder:text-n-slate-10 text-base"
        :placeholder="$t('SEARCH.INPUT_PLACEHOLDER')"
        @focus="onFocus"
        @blur="onBlur"
        @input="onInput"
      />
      <span class="text-sm text-n-slate-10 flex-shrink-0">
        {{ $t('SEARCH.PLACEHOLDER_KEYBINDING') }}
      </span>
    </div>

    <slot />

    <div
      class="transition-all duration-200 ease-out grid overflow-hidden w-full !border-t-0"
      :class="
        showRecentSearches
          ? 'grid-rows-[1fr] opacity-100'
          : 'grid-rows-[0fr] opacity-0'
      "
    >
      <div class="overflow-hidden w-full">
        <RecentSearches
          ref="recentSearchesRef"
          @select-search="onSelectRecentSearch"
          @clear-all="showRecentSearches = false"
        />
      </div>
    </div>
  </div>
</template>