books/ui/components/Navbar.vue

<template>
	<nav class="frappe-navbar navbar navbar-light bg-light row no-gutters border-bottom">
		<form v-if="showSearch" class="form-inline col-4 pr-3">
			<input type="text"
				v-model="searchValue"
				@input="updateSearch"
				name="search"
				class="form-control shadow-none w-100"
				:placeholder="_('Search...')">
		</form>
		<div class="navbar-text">.</div>
	</nav>
</template>
<script>
import { debounce } from 'lodash';
export default {
  data() {
    return {
        searchValue: ''
    };
  },
  computed: {
    showSearch() {
      // TODO: Make this configurable
      return /list|edit/.test(this.$route.path)
    }
  },
  mounted() {
    this.$root.$on('newList', () => this.searchValue = '')
  },
  methods: {
    updateSearch: debounce(function() {
      this.$root.$emit('navbarSearch', this.searchValue)
    }, 500)
  }
};
</script>