90 lines
1.9 KiB
Vue
90 lines
1.9 KiB
Vue
<template>
|
|
<div
|
|
class="flex row q-mx-sm justify-between items-center no-wrap q-py-sm"
|
|
>
|
|
<q-btn
|
|
v-if="showCalendarBtn"
|
|
flat round
|
|
:color="calendarActive ? 'primary' : 'grey'"
|
|
@click="emit('toggle-calendar')"
|
|
>
|
|
<div>
|
|
<q-icon name="mdi-calendar-month-outline" size="sm"/>
|
|
<q-badge
|
|
color="red"
|
|
rounded
|
|
floating
|
|
transparent
|
|
style="position: relative; top: -6px; margin-left: -12px"
|
|
:style="{ opacity: calendarBadge ? 0.8 : 0 }"
|
|
/>
|
|
</div>
|
|
</q-btn>
|
|
|
|
<q-input
|
|
v-model="search"
|
|
clearable
|
|
clear-icon="close"
|
|
borderless
|
|
filled
|
|
:placeholder="$t(placeholder)"
|
|
dense
|
|
class="col-grow q-pt-xs q-mx-sm"
|
|
>
|
|
<template #prepend>
|
|
<q-icon name="mdi-magnify" color="grey"/>
|
|
</template>
|
|
</q-input>
|
|
|
|
<q-btn
|
|
v-if="showFilterBtn"
|
|
@click="emit('open-filters')"
|
|
flat round
|
|
:color="filterActive ? 'primary' : 'grey'"
|
|
>
|
|
<div>
|
|
<q-icon name="mdi-filter-outline" size="sm"/>
|
|
<q-badge
|
|
color="red"
|
|
rounded
|
|
floating
|
|
transparent
|
|
style="position: relative; top: -6px; margin-left: -12px"
|
|
:style="{ opacity: filterBadge ? 0.8 : 0 }"
|
|
/>
|
|
</div>
|
|
</q-btn>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const search = defineModel<string>({
|
|
required: true,
|
|
default: ''
|
|
})
|
|
|
|
defineProps({
|
|
placeholder: {
|
|
type: String,
|
|
default: 'Search...'
|
|
},
|
|
showCalendarBtn: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
showFilterBtn: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
calendarActive: Boolean,
|
|
filterActive: Boolean,
|
|
calendarBadge: Boolean,
|
|
filterBadge: Boolean
|
|
})
|
|
|
|
const emit = defineEmits([
|
|
'toggle-calendar',
|
|
'open-filters'
|
|
])
|
|
</script>
|