forked from nikita/muzika-gromche
43 lines
1.2 KiB
Vue
43 lines
1.2 KiB
Vue
<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>
|