Expansile resource table

htdocs/ViewResourceLookup.vue

@@ -1,9 +1,9 @@
 <template>
 	<div class="input-group">
 		<span class="input-group-text">🔎</span>
-		<input class="form-control" v-model="query_raw" />
+		<input class="form-control" v-model="query_raw" @focus="collapsed = false" @blur="collapsed = true" />
 	</div>
-	<div style="max-height: 30em; overflow-y: auto;">
+	<div :class="{ collapsed }" style="max-height: 30em; overflow-y: auto;">
 		<table class="table table-striped" style="font-family: monospace;" v-if="resultset_raw && resultset_raw.length > 0">
 			<thead>
 				<tr><th></th><th>ID</th><th>Name</th><th>Type</th><th>User</th></tr>
@@ -27,6 +27,12 @@
 	</div>
 </template>
 
+<style scoped>
+	.collapsed {
+		height: 0;
+	}
+</style>
+
 <script>
 	import { debounce } from './util.mjs';
 
@@ -57,7 +63,8 @@
 			return {
 				resultset_raw: [],
 				query_raw: '',
-				query_view: ''
+				query_view: '',
+				collapsed: true
 			};
 		},
 		computed: {