<template>
  <q-td :props="props.tdProps"></q-td>
  <q-input filled dense :debounce="debounce" v-model="model" :placeholder="placeholder">
    <template #append>
      <q-icon name="search" />
    </template>
  </q-input>
</template>

<script setup lang="ts">
import { computed } from 'vue';

const props = defineProps({
  tdProps: { type: Object },
  modelValue: String,
  placeholder: { type: String, default: 'Search' },
  debounce: { type: Number, default: 300 },
});

const emit = defineEmits(['update:modelValue']);

const model = computed({
  get: () => props.modelValue,
  set: (v) => emit('update:modelValue', v),
});
</script>
