<template>
  <w-input
    v-if="label"
    v-model="val"
    debounce="500"
    clearable
    :label="label"
    :color="color"
    :bg-color="bgColor"
    :dense="dense"
    :rounded="rounded"
    :placeholder="placeholder"
  >
    <template #prepend>
      <slot name="prepend" />
      <q-icon name="fal fa-search" />
    </template>
  </w-input>
  <w-input
    v-else
    v-model="val"
    debounce="500"
    clearable
    :color="color"
    :bg-color="bgColor"
    :dense="dense"
    :rounded="rounded"
    :placeholder="placeholder"
  >
    <template #prepend>
      <slot name="prepend" />
      <q-icon style="font-size: 0.8em;" name="fal fa-search" />
    </template>
  </w-input>
</template>

<script>
export default {
  name: "WSearchInput",
  props: {
    modelValue: {
      type: String,
      default: null,
    },
    label: {
      type: String,
      default: "Keywords",
    },
    placeholder: {
      type: String,
      default: null,
    },
    color: {
      type: String,
      default: null,
    },
    bgColor: {
      type: String,
      default: "white",
    },
    dense: {
      type: Boolean,
      default: false,
    },
    rounded: {
      type: Boolean,
      default: false,
    },
  },
  emits: ["update:modelValue"],
  computed: {
    val: {
      get() {
        return this.modelValue;
      },
      set(val) {
        this.$emit("update:modelValue", val);
      },
    },
  },
};
</script>
