Graphql: highlight fields on search

components/graphql/field.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="p-2 m-2 border-b border-dashed border-brdColor">
-    <div class="field-title">
+    <div class="field-title" :class="{ 'field-highlighted': isHighlighted }">
       {{ fieldName }}
       <span v-if="fieldArgs.length > 0">
         (
@@ -25,11 +25,18 @@
   </div>
 </template>
 
+<style scoped lang="scss">
+.field-highlighted {
+  color: #ffff00;
+}
+</style>
+
 <script>
 export default {
   props: {
     gqlField: Object,
     jumpTypeCallback: Function,
+    isHighlighted: { type: Boolean, default: false },
   },
 
   computed: {

components/graphql/type.vue

@@ -1,23 +1,44 @@
 <template>
   <div class="p-2 m-2">
-    <div class="font-bold type-title">{{ gqlType.name }}</div>
+    <div class="font-bold type-title" :class="{ 'type-highlighted': isHighlighted }">
+      {{ gqlType.name }}
+    </div>
     <div class="mt-2 text-fgLightColor type-desc" v-if="gqlType.description">
       {{ gqlType.description }}
     </div>
     <div v-if="gqlType.getFields">
       <h5>{{ $t("fields") }}</h5>
       <div v-for="field in gqlType.getFields()" :key="field.name">
-        <field :gqlField="field" :jumpTypeCallback="jumpTypeCallback" />
+        <field
+          :gqlField="field"
+          :isHighlighted="isFieldHighlighted({ field })"
+          :jumpTypeCallback="jumpTypeCallback"
+        />
       </div>
     </div>
   </div>
 </template>
 
+<style scoped lang="scss">
+.type-highlighted {
+  color: #ffff00;
+}
+</style>
+
 <script>
 export default {
   props: {
     gqlType: {},
     jumpTypeCallback: Function,
+    isHighlighted: { type: Boolean, default: false },
+    highlightedFields: { type: Array, default: [] },
+  },
+  methods: {
+    isFieldHighlighted({ field }) {
+      return !!this.highlightedFields.find(
+        (highlightedField) => highlightedField.name === field.name
+      )
+    },
   },
 }
 </script>