Basic Components

<template>
  <div class="max-w-md">
    <SearchInput
      v-model="searchValue"
      :placeholder="$t('themeDocs.searchInput.placeholder')"
      @clear="onClear"
    />
    
    <div v-if="searchValue" class="mt-3 text-sm text-gray-600 dark:text-gray-300">
      {{ $t('themeDocs.searchInput.currentValue') }}: {{ searchValue }}
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import SearchInput from '~/components/theme/SearchInput.vue'

const searchValue = ref('')

function onClear() {
  console.log('Search cleared')
}
</script>

<template>
  <div class="space-y-4">
    <!-- 表格顶部 -->
    <div class="border dark:border-gray-700 rounded-lg overflow-hidden">
      <div class="bg-gray-50 dark:bg-gray-800 p-4">
        <div class="flex items-center justify-between">
          <h3 class="text-base font-medium dark:text-white">
            {{ $t('themeDocs.searchInput.tableTitle') }}
          </h3>
          <div class="w-64">
            <SearchInput
              v-model="tableSearchValue"
              :placeholder="$t('themeDocs.searchInput.tablePlaceholder')"
            />
          </div>
        </div>
      </div>
      <div class="p-4">
        <div class="text-gray-600 dark:text-gray-300 text-sm">
          {{ $t('themeDocs.searchInput.tableContent') }}
        </div>
      </div>
    </div>

    <!-- 导航栏 -->
    <div class="bg-white dark:bg-gray-800 border dark:border-gray-700 rounded-lg shadow">
      <div class="p-3 flex items-center justify-between">
        <div class="font-medium dark:text-white">
          {{ $t('themeDocs.searchInput.navTitle') }}
        </div>
        <div class="w-48">
          <SearchInput
            v-model="navSearchValue"
            :placeholder="$t('themeDocs.searchInput.navPlaceholder')"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import SearchInput from '~/components/theme/SearchInput.vue'

const tableSearchValue = ref('')
const navSearchValue = ref('')
</script>

<template>
  <div>
    <div class="max-w-md mb-4">
      <SearchInput
        v-model="eventSearchValue"
        :placeholder="$t('themeDocs.searchInput.eventsPlaceholder')"
        @clear="handleClear"
      />
    </div>

    <div class="text-gray-700 dark:text-gray-300 text-sm mb-2">
      {{ $t('themeDocs.searchInput.eventLogs') }}:
    </div>
    <div class="bg-gray-50 dark:bg-gray-700 rounded p-3 text-sm font-mono max-h-32 overflow-y-auto">
      <div v-for="(log, index) in eventLogs" :key="index" class="mb-1">
        {{ log }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import SearchInput from '~/components/theme/SearchInput.vue'

const eventSearchValue = ref('')
const eventLogs = ref([])

function handleClear() {
  const timestamp = new Date().toLocaleTimeString()
  eventLogs.value.unshift(`[${timestamp}] 搜索已清除`)
}

// 监听搜索值变化
watch(eventSearchValue, newValue => {
  const timestamp = new Date().toLocaleTimeString()
  eventLogs.value.unshift(`[${timestamp}] 搜索值变化: "${newValue}"`)
})
</script>