69 lines
1.9 KiB
Vue
Executable File
69 lines
1.9 KiB
Vue
Executable File
<script setup lang="ts">
|
|
import { PhMagnifyingGlass } from '@phosphor-icons/vue'
|
|
import { type PropType } from 'vue'
|
|
|
|
interface FilterItems {
|
|
id: number
|
|
title: string
|
|
}
|
|
|
|
const props = defineProps({
|
|
placeholder: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
readonly: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
filters: {
|
|
type: Array as PropType<FilterItems[]>,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(['update:keyword', 'update:filters'])
|
|
|
|
const setKeyword = (event: Event) => {
|
|
emit('update:keyword', (event.target as HTMLInputElement).value)
|
|
}
|
|
|
|
const setFilter = (event: Event) => {
|
|
emit('update:filters', (event.target as HTMLSelectElement).value)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="relative w-full overflow-hidden rounded-lg">
|
|
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
|
<PhMagnifyingGlass size="18" class="text-gray-900" weight="regular" />
|
|
</div>
|
|
<input
|
|
@input="setKeyword"
|
|
:placeholder="placeholder"
|
|
:disabled="disabled"
|
|
:readonly="readonly"
|
|
type="text"
|
|
class="w-full px-4 py-2 pl-10 text-sm leading-6 text-gray-900 bg-gray-200 border-0 border-transparent rounded-lg placeholder:text-gray-400 outline-0 focus:outline-0 focus:border-0 focus:ring-0"
|
|
/>
|
|
<div class="absolute inset-y-0 right-0 flex items-center">
|
|
<label for="filters" class="sr-only">filters</label>
|
|
<span class="block h-5 border border-gray-600"></span>
|
|
<select
|
|
@change="setFilter"
|
|
id="filters"
|
|
name="filters"
|
|
class="h-full py-0 pl-2 text-sm text-gray-900 bg-gray-200 border-transparent rounded-lg pr-7 focus:outline-0 focus:border-0 focus:ring-0"
|
|
>
|
|
<option :key="filter.id" :value="filter.id" v-for="filter in filters">
|
|
{{ filter.title }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</template>
|