feat: use example/examples fields from api or schema definitions

package.json

@@ -20,7 +20,7 @@
     "type": "git",
     "url": "https://github.com/koumoul-dev/vue-openapi.git"
   },
-  "main": "OpenApi.vue",
+  "main": "src/OpenApi.vue",
   "scripts": {
     "dev": "NODE_ENV=development webpack --watch",
     "test": "echo \"Error: no test specified\" && exit 1"

ParametersTable.vue → src/ParametersTable.vue

@@ -10,15 +10,15 @@
         <md-table-head>Required</md-table-head>
       </md-table-row>
     </md-table-header>
-
+    
     <md-table-body>
       <md-table-row v-if="selectedEntry.requestBody">
         <md-table-cell>Payload</md-table-cell>
         <md-table-cell>Request body</md-table-cell>
         <md-table-cell v-if="!selectedEntry.requestBody.content"></md-table-cell>
         <md-table-cell v-if="selectedEntry.requestBody.content">
           <md-select v-model="selectedEntry.requestBody.selectedType">
-            <md-option v-for="(value, content) in selectedEntry.requestBody.content" :value="content">{{content}}</md-option>
+            <md-option v-for="contentType in Object.keys(selectedEntry.requestBody.content)" :value="contentType">{{contentType}}</md-option>
           </md-select>
         </md-table-cell>
         <md-table-cell v-if="!selectedEntry.requestBody.content || !selectedEntry.requestBody.content[selectedEntry.requestBody.selectedType].schema"></md-table-cell>

RequestForm.vue → src/RequestForm.vue

@@ -1,8 +1,8 @@
 <template lang="html">
   <form novalidate @submit.stop.prevent="submit" v-if="selectedEntry" id="request-form">
     <md-input-container v-if="selectedEntry.requestBody">
-      <label>Payload</label>
-      <md-textarea v-model="currentRequest.requestBody"></md-textarea>
+      <label for="payload">Payload ({{selectedEntry.requestBody.selectedType}})</label>
+      <md-textarea name="payload" v-model="currentRequest.body"></md-textarea>
     </md-input-container>
 
     <div v-for="parameter in selectedEntry.parameters">

request.js → src/request.js

@@ -6,18 +6,34 @@ exports.reset = (request, entry) => {
   })))
   if (entry.requestBody) {
     request.contentType = Object.keys(entry.requestBody.content)[0]
-    request.requestBody = entry.requestBody.content[request.contentType].example || ''
+    let requestBody = ''
+    const contentType = entry.requestBody.content[request.contentType]
+    if (contentType.schema && contentType.schema.examples) {
+      requestBody = contentType.schema.examples[Object.keys(contentType.schema.examples)[0]]
+    }
+    if (contentType.schema.example && contentType.schema.example) {
+      requestBody = contentType.schema.example
+    }
+    if (contentType.examples) {
+      requestBody = contentType.examples[Object.keys(contentType.examples)[0]]
+    }
+    if (contentType.example) {
+      requestBody = contentType.example
+    }
+    request.body = typeof requestBody === 'string' ? requestBody : JSON.stringify(requestBody, null, 2)
   }
 }
 
 exports.fetch = (request, entry, api) => {
-  let params = Object.assign({}, ...(entry.parameters || []).filter(p => p.in === 'query' && (p.schema.type === 'array' ? request.params[p.name].length : request.params[p.name]))
+  let params = Object.assign({}, ...(entry.parameters || [])
+    .filter(p => p.in === 'query' && (p.schema.type === 'array' ? request.params[p.name].length : request.params[p.name]))
     .map(p => ({
       // TODO : join character for array should depend of p.style
       [p.name]: p.schema.type === 'array' ? request.params[p.name].join(',') : request.params[p.name]
     }))
   )
-  let headers = Object.assign({}, ...(entry.parameters || []).filter(p => p.in === 'header' && (p.schema.type === 'array' ? request.params[p.name].length : request.params[p.name]))
+  let headers = Object.assign({}, ...(entry.parameters || [])
+    .filter(p => p.in === 'header' && (p.schema.type === 'array' ? request.params[p.name].length : request.params[p.name]))
     .map(p => ({
       // TODO : join character for array should depend of p.style
       [p.name]: p.schema.type === 'array' ? request.params[p.name].join(',') : request.params[p.name]
@@ -33,7 +49,7 @@ exports.fetch = (request, entry, api) => {
   }
   if (entry.requestBody) {
     httpRequest.headers['Content-type'] = request.contentType
-    httpRequest.body = request.requestBody
+    httpRequest.body = request.body
   }
   return Vue.http(httpRequest)
 }

tags.js → src/tags.js

@@ -1,3 +1,4 @@
+import Vue from 'vue'
 import _get from 'lodash.get'
 
 const defaultStyle = {
@@ -61,7 +62,7 @@ exports.get = api => {
           entry.requestBody = _get(api, entry.requestBody.$ref.split('#/').pop().replace(/\//g, '.'))
         }
         if (entry.requestBody.content) {
-          entry.requestBody.selectedType = Object.keys(entry.requestBody.content)[0]
+          Vue.set(entry.requestBody, 'selectedType', Object.keys(entry.requestBody.content)[0])
           entry.requestBody.required = true
           Object.values(entry.requestBody.content).forEach(contentType => processContent(contentType, api))
         }
@@ -71,7 +72,7 @@ exports.get = api => {
       Object.values(entry.responses).forEach(response => {
         if (response.content) {
           // preselecting responses mime-type
-          response.selectedType = Object.keys(response.content)[0]
+          Vue.set(response, 'selectedType', Object.keys(response.content)[0])
           Object.values(response.content).forEach(contentType => processContent(contentType, api))
         }
       })

test/app.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import VueMaterial from 'vue-material'
-import OpenApi from '../OpenApi.vue'
+import OpenApi from '../src/OpenApi.vue'
 import 'vue-material/dist/vue-material.css'
 import VueResource from 'vue-resource'
 

test/petstore.json

@@ -908,13 +908,14 @@
             "description": "Pet object that needs to be added to the store",
             "schema": {
               "$ref": "#/components/schemas/Pet"
+            },
+            "example": {
+              "name": "rex",
+              "photoUrls": []
             }
           },
           "application/xml": {
-            "description": "Pet object that needs to be added to the store",
-            "schema": {
-              "$ref": "#/components/schemas/Pet"
-            }
+            "description": "Pet object that needs to be added to the store"
           }
         }
       }