SearchBox.vue

<script setup lang="ts">
import { debounce } from 'perfect-debounce'

withDefaults(
  defineProps<{
    inputClass?: string
  }>(),
  {
    inputClass: 'inline sm:block',
  },
)

const emit = defineEmits(['blur', 'focus'])

const router = useRouter()
const route = useRoute()

const isSearchFocused = ref(false)

const showSearchBar = computed(() => {
  return route.name !== 'index'
})

// Local input value (updates immediately as user types)
const searchQuery = ref((route.query.q as string) ?? '')

// Debounced URL update for search query
const updateUrlQuery = debounce((value: string) => {
  if (route.name === 'search') {
    router.replace({ query: { q: value || undefined } })
    return
  }
  if (!value) {
    return
  }

  router.push({
    name: 'search',
    query: {
      q: value,
    },
  })
}, 250)

// Watch input and debounce URL updates
watch(searchQuery, value => {
  updateUrlQuery(value)
})

// Sync input with URL when navigating (e.g., back button)
watch(
  () => route.query.q,
  urlQuery => {
    const value = (urlQuery as string) ?? ''
    if (searchQuery.value !== value) {
      searchQuery.value = value
    }
  },
)

const autofocus = import.meta.client && !isTouchDevice()
const headerSearchRef = useTemplateRef('headerSearchRef')
onMounted(() => {
  // Autofocus the search input on page load for non-touch devicese
  if (!isTouchDevice()) {
    headerSearchRef.value?.focus()
  }
})

function handleSearchBlur() {
  isSearchFocused.value = false
  emit('blur')
}
function handleSearchFocus() {
  isSearchFocused.value = true
  emit('focus')
}
</script>
<template>
  <search v-if="showSearchBar" :class="'flex-1 sm:max-w-md ' + inputClass">
    <form method="GET" action="/search" class="relative">
      <label for="header-search" class="sr-only">
        {{ $t('search.label') }}
      </label>

      <div class="relative group" :class="{ 'is-focused': isSearchFocused }">
        <div class="search-box relative flex items-center">
          <span
            class="absolute inset-is-3 text-fg-subtle font-mono text-sm pointer-events-none transition-colors duration-200 motion-reduce:transition-none group-focus-within:text-accent z-1"
          >
            /
          </span>

          <input
            id="header-search"
            ref="headerSearchRef"
            v-model="searchQuery"
            type="search"
            :autofocus="autofocus"
            name="q"
            :placeholder="$t('search.placeholder')"
            v-bind="noCorrect"
            class="w-full bg-bg-subtle border border-border rounded-md ps-7 pe-3 py-1.5 font-mono text-sm text-fg placeholder:text-fg-subtle transition-border-color duration-300 motion-reduce:transition-none focus:border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
            @focus="handleSearchFocus"
            @blur="handleSearchBlur"
          />
          <button type="submit" class="sr-only">{{ $t('search.button') }}</button>
        </div>
      </div>
    </form>
  </search>
</template>