<script setup lang="ts">
import Search from '@material-design-icons/svg/outlined/search.svg';
import Clear from '@material-design-icons/svg/outlined/clear.svg';
import { computed } from 'vue';

const {
  placeholder = "Search…",
} = defineProps<{
  placeholder?: string,
}>();
const model = defineModel({ type: String, required: true });

const clearDisabled = computed(() => model.value === "");
function clear() {
  model.value = "";
}
</script>
<template>
  <div class="tw:flex tw:gap-1 tw:p-0.5 tw:px-1 tw:place-items-center tw:justify-center tw:text-xl input-text">
    <Search class="tw:flex-none tw:h-full tw:aspect-square tw:fill-current" style="color: #929292;" />
    <input type="text" role="searchbox" v-model="model" :placeholder class="tw:flex-1 tw:min-w-0" />
    <button type="button" role="button" name="clear" aria-roledescription="Clear search field" tabindex="-1" title="Clear"
      @click="clear" :disabled="clearDisabled" class="button">
      <Clear class="tw:flex-none tw:h-full tw:aspect-square tw:fill-current" />
    </button>
  </div>
</template>
<style scoped>
.button {
  color: #929292;
  transition: color 150ms linear;
}

.button:active:not(:disabled) {
  color: #767676;
  transition: none;
}

.button:disabled {
  color: #4a4a4a;
}
</style>
