From fa377c63459909890ab4d31cdd2affdb34f7fd43 Mon Sep 17 00:00:00 2001
From: Raymond Rutjes <raymond.rutjes@gmail.com>
Date: Tue, 4 Apr 2017 14:14:07 +0200
Subject: [PATCH] feat(highlight): make examples use the new Highlight
 component

---
 packages/examples/e-commerce/src/App.vue  |  8 ++++++--
 packages/examples/multi-index/src/App.vue | 24 +++++++++++++++++------
 packages/examples/quick-start/index.html  |  8 ++++++--
 3 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/packages/examples/e-commerce/src/App.vue b/packages/examples/e-commerce/src/App.vue
index 8d4dfca46..359b08324 100644
--- a/packages/examples/e-commerce/src/App.vue
+++ b/packages/examples/e-commerce/src/App.vue
@@ -64,8 +64,12 @@
                 <img class="result__image img-responsive" :src="result.image">
 
                 <div class="result__info">
-                  <h2 class="result__name" v-html="result._highlightResult.name.value"></h2>
-                  <div class="result__type" v-html="result._highlightResult.type.value"></div>
+                  <h2 class="result__name">
+                    <ais-highlight :result="result" attribute-name="name"/>
+                  </h2>
+                  <div class="result__type">
+                    <ais-highlight :result="result" attribute-name="type"/>
+                  </div>
                   <div class="result__rating">
                     <template v-for="n in 5">
                       <span v-if="n <= result.rating" class="result__star"></span>
diff --git a/packages/examples/multi-index/src/App.vue b/packages/examples/multi-index/src/App.vue
index 19e57492c..ef8dce7c5 100644
--- a/packages/examples/multi-index/src/App.vue
+++ b/packages/examples/multi-index/src/App.vue
@@ -21,10 +21,16 @@
               <img class="result__image img-responsive" :src="result.thumbnailImage">
 
               <div class="result__info">
-                <h2 class="result__name" v-html="result._highlightResult.name.value"></h2>
-                <div class="result__type" v-html="result.category"></div>
+                <h2 class="result__name">
+                  <ais-highlight :result="result" attribute-name="name"/>
+                </h2>
+                <div class="result__type">
+                  {{ result.category }}
+                </div>
 
-                <div class="result__description" v-if="result._highlightResult.shortDescription" v-html="result._highlightResult.shortDescription.value"></div>
+                <div class="result__description" >
+                  <ais-highlight v-if="result._highlightResult.shortDescription" :result="result" attribute-name="shortDescription"/>
+                </div>
 
                 <div class="result__rating">
 
@@ -51,9 +57,15 @@
               <img class="result__image img-responsive" :src="result.image">
 
               <div class="result__info">
-                <h2 class="result__name" v-html="result._highlightResult.name.value"></h2>
-                <div class="result__type" v-html="result._highlightResult.type.value"></div>
-                <div class="result__description" v-html="result._highlightResult.description.value"></div>
+                <h2 class="result__name">
+                  <ais-highlight :result="result" attribute-name="name"/>
+                </h2>
+                <div class="result__type">
+                  <ais-highlight :result="result" attribute-name="type"/>
+                </div>
+                <div class="result__description">
+                  <ais-highlight :result="result" attribute-name="description"/>
+                </div>
                 <div class="result__rating">
                   <template v-for="n in 5">
                     <span v-if="n <= result.rating" class="result__star"></span>
diff --git a/packages/examples/quick-start/index.html b/packages/examples/quick-start/index.html
index fa28df2db..fa2ba8d33 100644
--- a/packages/examples/quick-start/index.html
+++ b/packages/examples/quick-start/index.html
@@ -17,8 +17,12 @@
             <img class="result__image img-responsive" :src="result.image">
 
             <div class="result__info">
-              <h2 class="result__name" v-html="result._highlightResult.name.value"></h2>
-              <div class="result__type" v-html="result._highlightResult.type.value"></div>
+              <h2 class="result__name">
+                <ais-highlight :result="result" attribute-name="name"/>
+              </h2>
+              <div class="result__type">
+                <ais-highlight :result="result" attribute-name="type"/>
+              </div>
               <div class="result__rating">
                 <template v-for="n in 5">
                   <span v-if="n <= result.rating" class="result__star"></span>