<script setup>
/**
 * Search input with leading search icon. Wraps PrimeVue IconField + InputIcon + InputText.
 * Use for table filters, toolbars, etc. Icon uses project icon resolution (name "search").
 */
import { computed } from "vue";
import IconField from "primevue/iconfield";
import InputIcon from "primevue/inputicon";
import InputText from "primevue/inputtext";
import { resolveIcon } from "../../lib/icons";

defineProps({
  modelValue: { type: [String, Number], default: "" },
  placeholder: { type: String, default: "Zoeken..." },
});

const emit = defineEmits([
  "update:modelValue",
  "blur",
  "focus",
  "input",
  "keydown",
  "keyup",
]);

const searchIconClass = computed(() => resolveIcon("search"));
</script>

<template>
  <IconField v-bind="$attrs">
    <InputIcon :class="searchIconClass" />
    <InputText
      :model-value="modelValue"
      :placeholder="placeholder"
      v-bind="$attrs"
      @update:model-value="emit('update:modelValue', $event)"
      @blur="emit('blur', $event)"
      @focus="emit('focus', $event)"
      @input="emit('input', $event)"
      @keydown="emit('keydown', $event)"
      @keyup="emit('keyup', $event)"
    />
  </IconField>
</template>
