forked from nikita/muzika-gromche
47 lines
1.3 KiB
Vue
47 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import Clear from '@material-design-icons/svg/outlined/clear.svg'
|
|
import Search from '@material-design-icons/svg/outlined/search.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 v-model="model" type="text" role="searchbox" :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"
|
|
:disabled="clearDisabled" class="button" @click="clear"
|
|
>
|
|
<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>
|