assembly/components/SearchInput.vue

70 lines
1.4 KiB
Vue
Raw Normal View History

2021-07-21 22:08:46 +00:00
<template>
2021-08-04 19:17:26 +00:00
<div class="relative flex items-center h-9">
2021-07-21 22:08:46 +00:00
<input
2021-08-01 11:22:17 +00:00
class="w-full pl-3 pr-8 rounded-[6px] border border-grey-dark border-opacity-[0.15]"
2021-07-21 22:08:46 +00:00
type="text"
v-bind="$attrs"
v-on="inputListeners"
/>
2021-08-01 11:22:17 +00:00
<SVGSearch class="absolute w-4 h-4 search-icon right-4" />
2021-07-21 22:08:46 +00:00
</div>
</template>
<script>
import { defineComponent, computed } from '@nuxtjs/composition-api'
2021-07-24 23:40:30 +00:00
import SVGSearch from '@/assets/icons/search.svg?inline'
2021-07-21 22:08:46 +00:00
export default defineComponent({
inheritAttrs: false,
components: {
SVGSearch,
},
setup(props, context) {
// Source: https://vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components
const inputListeners = computed(() =>
Object.assign({}, context.listeners, {
input(event) {
context.emit('input', event.target.value)
},
})
)
return { inputListeners }
},
})
</script>
2021-07-24 23:40:30 +00:00
<style scoped>
.search-icon {
2021-08-01 11:22:17 +00:00
@apply text-grey-pure;
2021-07-24 23:40:30 +00:00
@apply transition;
@apply duration-150;
}
.dark .search-icon {
@apply text-grey-pure;
}
input {
@apply transition;
@apply duration-150;
}
input:focus {
@apply outline-none;
@apply border-ocean-blue-pure;
}
.dark input:focus {
@apply outline-none;
@apply border-lightest;
}
input:focus ~ .search-icon {
@apply text-ocean-blue-pure;
}
.dark input:focus ~ .search-icon {
@apply text-lightest;
}
</style>