nb-input-search

<template>
  <NbInputSearch
    nb-id="search-debounce"
    display="b"
    label="Search (debounce)"
    input-name="search-debounce"
    input-style="border"
    input-text=""
    :has-trim="true"
    interaction-trigger="debounce"
    :interaction-debounce-wait="500"
    :interaction-function="onSearch"
    @entered="onEntered"
    @changed="lastChanged = $event"
    @interaction-start="onInteractionStart"
    @interaction-end="onInteractionEnd"
    @interaction-cancel="onInteractionCancel"
    @interaction-error="onInteractionError"
  />
  <p>Current value (<code>@changed</code>): {{ lastChanged || '(empty)' }}</p>
  <ul>
    <li v-for="row in log" :key="row.id">{{ row.text }}</li>
  </ul>
</template>

<script setup>
import { ref } from 'vue'

const lastChanged = ref('')
const log = ref([])

function push(kind, detail) {
  log.value = [
    { id: Date.now() + Math.random(), text: `${kind}: ${detail}` },
    ...log.value
  ].slice(0, 25)
}

const onSearch = async (query) => {
  push('interactionFunction', query)
  // await fetch('/api?q=' + encodeURIComponent(query))
}

const onEntered = (value) => push('@entered', value)
const onInteractionStart = (p) => push('@interaction-start', `${p.source} → ${p.value}`)
const onInteractionEnd = (p) => push('@interaction-end', `${p.source} → ${p.value}`)
const onInteractionCancel = (p) => push('@interaction-cancel', p.reason)
const onInteractionError = (p) => {
  const msg = p.error instanceof Error ? p.error.message : String(p.error)
  push('@interaction-error', `${p.source} → ${msg}`)
}
</script>

<template>
  <NbInputSearch
    nb-id="search-submit-zero"
    display="b"
    label="Search (Enter / button)"
    input-name="search-submit-zero"
    input-style="border"
    input-text=""
    interaction-trigger="submit"
    :interaction-debounce-wait="0"
    :interaction-function="onSearch"
    @entered="(v) => console.log('entered', v)"
  />
</template>

<script setup>
const onSearch = async (query) => {
  console.log('search', query)
}
</script>

<template>
  <NbInputSearch
    nb-id="search-submit-wait"
    display="b"
    label="Search (submit; wait ignored on type)"
    input-name="search-submit-wait"
    input-style="border"
    input-text=""
    interaction-trigger="submit"
    :interaction-debounce-wait="500"
    :interaction-function="onSearch"
    @entered="(v) => console.log('entered', v)"
  />
</template>

<script setup>
const onSearch = async (query) => {
  console.log('search', query)
}
</script>

<template>
  <NbInputSearch
    nb-id="catalog-search"
    input-name="q"
    label="Search products"
    interaction-trigger="debounce"
    :interaction-debounce-wait="400"
    :has-trim="true"
    :interaction-function="runSearch"
    @changed="onChangedClear"
  />
  <ul v-if="results.length">
    <li v-for="item in results" :key="item.id">{{ item.text }} — {{ item.category }}</li>
  </ul>
  <p v-else-if="lastQuery !== ''">No matches for "{{ lastQuery }}".</p>
</template>

<script setup>
import { ref } from 'vue'

const CATALOG = [
  { id: '1', text: 'Wireless mouse', category: 'Peripherals' },
  { id: '2', text: 'USB hub', category: 'Accessories' },
  { id: '3', text: 'Mechanical keyboard', category: 'Peripherals' }
]

const results = ref([])
const lastQuery = ref('')

async function runSearch(query) {
  await new Promise((r) => setTimeout(r, 450))
  const q = String(query).trim().toLowerCase()
  lastQuery.value = String(query).trim()
  if (!q) {
    results.value = []
    return
  }
  results.value = CATALOG.filter((item) => item.text.toLowerCase().includes(q))
}

function onChangedClear(v) {
  if (!String(v ?? '').trim()) {
    results.value = []
    lastQuery.value = ''
  }
}
</script>

<div
  class="wrapper-field-search"
  ref="catalogResultsWrapperRef"
  @mouseleave="handleCatalogWrapperMouseLeave"
  @focusout="handleCatalogWrapperFocusOut"
>
  <NbInputSearch
    nb-id="search-demo-fake-catalog"
    display="b"
    label="Search product (fake API)"
    input-name="search-demo-fake-catalog"
    :input-text="catalogSearchInputValue"
    input-style="border"
    light-text-color="#ffffff"
    input-text=""
    :has-trim="true"
    interaction-trigger="debounce"
    :interaction-debounce-wait="400"
    :interaction-debounce-enforce-min-length="false"
    :interaction-debounce-min-length="3"
    :interaction-function="runCatalogSearch"
    @changed="handleCatalogSearchChanged"
    @cleared="handleCatalogSearchCleared"
    @interaction-start="handleCatalogInteractionStart"
    @blurred="handleCatalogSearchBlurred"
    @focused="handleCatalogSearchFocused"
  />

  <div v-if="isCatalogResultsVisible" class="wrapper-field-search__results" @click="closeCatalogResults">
    <div v-if="isCatalogLoading">
      <p>Carregando...</p>
    </div>
    <div v-else>
      <div v-if="filteredCatalogResults.length">
        <strong>Resultados ({{ filteredCatalogResults.length }})</strong>
        <ul>
          <li v-for="item in filteredCatalogResults" :key="item.id" @click.stop="handleCatalogResultSelect(item)">
            <strong>{{ item.text }}</strong>
            <span style="opacity: 0.75"> — {{ item.category }}</span>
          </li>
        </ul>
      </div>
      <p
        v-else
        style="margin: 0.75rem 0 0; font-size: 0.9em; opacity: 0.85"
      >
        Nenhum resultado para <code>{{ lastCatalogSearchQuery }}</code>.
      </p>
    </div>
  </div>
</div>

<script setup>
import { onMounted, onUnmounted, ref } from 'vue'

const isCatalogLoading = ref(false)
const isCatalogResultsVisible = ref(false)

const catalogResultsWrapperRef = ref(null)

const hideCatalogResults = () => {
  isCatalogLoading.value = false
  isCatalogResultsVisible.value = false
}

const shouldCloseOnBlur = ref(false)
const handleCatalogWrapperMouseLeave = () => {
  if (!shouldCloseOnBlur.value) return

  hideCatalogResults()
}

const handleCatalogWrapperFocusOut = (event) => {
  if (!shouldCloseOnBlur.value) return

  const wrapper = catalogResultsWrapperRef.value
  const next = event?.relatedTarget || null

  // Se o foco ainda está dentro do wrapper, não esconde
  if (wrapper && next && wrapper.contains(next)) return

  hideCatalogResults()
}

const handleDocumentPointerDownOutsideCatalog = (event) => {
  const wrapper = catalogResultsWrapperRef.value
  if (!wrapper) return

  const target = event?.target
  if (target && wrapper.contains(target)) return

  hideCatalogResults()
}

onMounted(() => {
  document.addEventListener('pointerdown', handleDocumentPointerDownOutsideCatalog)
})

onUnmounted(() => {
  document.removeEventListener('pointerdown', handleDocumentPointerDownOutsideCatalog)
})

/** Static catalog for fake API: filter by `text` after debounce + simulated latency */
const CATALOG_ITEMS = [
  { id: '1', text: 'Notebook Pro 14', category: 'Computers' },
  { id: '2', text: 'Notebook Pro 15', category: 'Computers' },
  { id: '3', text: 'Notebook Pro 16 2025', category: 'Computers' },
  { id: '4', text: 'Notebook Pro 16 2026', category: 'Computers' },
  { id: '5', text: 'Notebook Pro 16 2027', category: 'Computers' },
  { id: '6', text: 'Notebook Pro 17 2026', category: 'Computers' },
  { id: '7', text: 'Wireless mouse', category: 'Peripherals' },
  { id: '8', text: 'Mechanical keyboard', category: 'Peripherals' },
  { id: '9', text: '27-inch monitor', category: 'Computers' },
  { id: '10', text: 'HD webcam', category: 'Peripherals' },
  { id: '11', text: 'Headset with microphone', category: 'Audio' },
  { id: '12', text: 'Bluetooth speaker', category: 'Audio' },
  { id: '13', text: '1TB SSD', category: 'Storage' },
  { id: '14', text: 'USB-C hub', category: 'Accessories' },
  { id: '15', text: 'Aluminum notebook base', category: 'Accessories' }
]

const filteredCatalogResults = ref([])
const lastCatalogSearchQuery = ref('')
const catalogSearchInputValue = ref('notebook')
const lastCatalogInteractionSource = ref('')
const catalogInteractionSourceCounters = ref({
  debounce: 0,
  submit: 0
})

const handleCatalogInteractionStart = (payload) => {
  const source = payload?.source === 'submit' ? 'submit' : 'debounce'
  lastCatalogInteractionSource.value = source
  catalogInteractionSourceCounters.value[source] += 1
}

/** Simulates network latency / backend filter (ms). Increase to see "Loading...". */
const CATALOG_FILTER_DELAY_MS = 1500

const searchExecutionMode = ref('latency') // 'latency' or 'no-latency'

const runCatalogSearch = async (query) => {
  if (query && lastCatalogSearchQuery.value === query) {
    isCatalogResultsVisible.value = true
    return
  }

  if (lastCatalogSearchQuery.value === '') isCatalogResultsVisible.value = true

  isCatalogLoading.value = true

  if (searchExecutionMode.value === 'latency') {
    await runCatalogSearchWithLatency(query)
  } else {
    await runCatalogSearchWithoutLatency(query)
  }
}

const runCatalogSearchWithoutLatency = async (query) => {
  try {
    const q = String(query).trim().toLowerCase()
    lastCatalogSearchQuery.value = String(query).trim()
    if (!q) {
      filteredCatalogResults.value = []
      return
    }
    filteredCatalogResults.value = CATALOG_ITEMS.filter((item) =>
      item.text.toLowerCase().includes(q)
    )
    isCatalogResultsVisible.value = true
  } finally {
    isCatalogLoading.value = false
  }
}

const runCatalogSearchWithLatency = async (query) => {
  try {
    await new Promise((resolve) => setTimeout(resolve, CATALOG_FILTER_DELAY_MS))
    const q = String(query).trim().toLowerCase()
    lastCatalogSearchQuery.value = String(query).trim()
    if (!q) {
      filteredCatalogResults.value = []
      return
    }
    filteredCatalogResults.value = CATALOG_ITEMS.filter((item) =>
      item.text.toLowerCase().includes(q)
    )
    isCatalogResultsVisible.value = true
  } finally {
    isCatalogLoading.value = false
  }
}

const handleCatalogSearchChanged = (v) => {
  catalogSearchInputValue.value = String(v ?? '')

  if (!String(v ?? '').trim()) {
    filteredCatalogResults.value = []
    lastCatalogSearchQuery.value = ''
    isCatalogResultsVisible.value = false
  }
}
const handleCatalogSearchCleared = () => {
  catalogSearchInputValue.value = ''
  lastCatalogSearchQuery.value = ''
  filteredCatalogResults.value = []
  isCatalogResultsVisible.value = false
  lastCatalogInteractionSource.value = ''
  catalogInteractionSourceCounters.value = { debounce: 0, submit: 0 }
}
const shouldCloseOnInputBlur = ref(false)
const handleCatalogSearchBlurred = () => {
  if (!shouldCloseOnInputBlur.value) return

  isCatalogLoading.value = false
  isCatalogResultsVisible.value = false
}
const handleCatalogSearchFocused = () => {
  if (lastCatalogSearchQuery.value !== '') {
    runCatalogSearch(lastCatalogSearchQuery.value)
  }
}
const handleCatalogResultSelect = (item) => {
  catalogSearchInputValue.value = ''
  lastCatalogSearchQuery.value = ''
  isCatalogResultsVisible.value = false
  filteredCatalogResults.value = []
}
const closeCatalogResults = () => {
  isCatalogResultsVisible.value = false
}
</script>