feat(open-api): add display of request parameter and body information

INT-407

src/.vuepress/theme/client/components/global/OpenApiPath.vue

@@ -17,7 +17,26 @@
 
         <p v-if="'description' in operation">{{ operation.description }}</p>
 
-        <!-- TODO: Parameters table -->
+        <template v-if="'parameters' in operation">
+          <h4>Request parameters</h4>
+          <table>
+            <thead>
+              <th>Parameter</th>
+              <th>Info</th>
+            </thead>
+            <tr
+              v-for="(parameter, index) in operation.parameters"
+              :key="index">
+              <OpenApiRequestParam
+                v-if="isParameterType(parameter)"
+                :parameter="parameter" />
+            </tr>
+          </table>
+        </template>
+        <template v-if="'requestBody' in operation">
+          <h4>Request body</h4>
+          {{ operation.requestBody }}</template
+        >
 
         <OpenApiResponses
           v-if="'responses' in operation"
@@ -30,10 +49,17 @@
 <script setup lang="ts">
 import {type OpenAPIV3_1 as OpenApiType} from 'openapi-types';
 import OpenApiResponses from './OpenApiResponses.vue';
+import OpenApiRequestParam from './OpenApiRequestParam.vue';
 import OpenApiOperation from './OpenApiOperation.vue';
 
 defineProps<{
   title: string;
   path: OpenApiType.PathItemObject;
 }>();
+
+function isParameterType(
+  parameter: OpenApiType.ParameterObject | OpenApiType.ReferenceObject,
+): parameter is OpenApiType.ParameterObject {
+  return 'in' in parameter && 'schema' in parameter;
+}
 </script>

src/.vuepress/theme/client/components/global/OpenApiRequestParam.vue

@@ -0,0 +1,131 @@
+<template>
+  <td>
+    <template v-if="parameter.name">
+      <strong>{{ parameter.name }}</strong>
+      <span
+        v-if="parameter.required"
+        class="text-red-500"
+        title="Required">
+        *
+      </span>
+      <span
+        v-for="flag in flags"
+        :key="flag"
+        >{{ flag }}</span
+      >
+    </template>
+
+    <OpenApiSchema
+      v-if="parameter.schema"
+      :schema="parameter.schema" />
+
+    <div
+      v-if="
+        parameter.description &&
+        !(parameter.schema && 'description' in parameter.schema && parameter.schema.description?.length)
+      "
+      class="text-gray-500 text-sm"
+      v-html="parameter.description" />
+  </td>
+
+  <td>
+    <div
+      v-if="parameter.in"
+      class="oapi-res-param__param">
+      In: <code>{{ parameter.in }}</code>
+    </div>
+
+    <div
+      v-if="parameter.style"
+      class="oapi-res-param__param">
+      Style: <code>{{ parameter.style }}</code>
+    </div>
+
+    <!-- TODO use / create examples component! -->
+
+    <div
+      v-if="parameter.example"
+      class="oapi-res-param__param">
+      Example: <br v-if="exampleString.includes('\n')" /><code v-html="exampleString" />
+    </div>
+    <div
+      v-if="parameter.examples"
+      class="oapi-res-param__examples">
+      <div class="oapi-res-param__muted">Examples:</div>
+      <div
+        v-for="(example, exampleName) in parameter.examples"
+        :key="exampleName"
+        class="oapi-res-param-example">
+        <div class="oapi-res-param-example__name">
+          {{ exampleName }}
+        </div>
+        <div
+          v-if="example.summary"
+          class="oapi-res-param-example__summary">
+          {{ example.summary }}
+        </div>
+        <div
+          v-if="example.description"
+          class="oapi-res-param-example__description"
+          v-html="example.description" />
+        <div
+          v-if="example.value"
+          class="oapi-res-param-example__value">
+          <pre v-html="JSON.stringify(example.value, null, 2)" />
+        </div>
+      </div>
+    </div>
+
+    <div
+      v-if="parameter.content"
+      class="oapi-res-param__content">
+      <div class="oapi-res-param__muted">Content:</div>
+      TODO : MEDIA TYPES
+      <!--
+        <OpenApiMediaTypes
+        :current-locale="currentLocale"
+        :data="parameter.content" />
+      -->
+    </div>
+  </td>
+</template>
+
+<script setup lang="ts">
+import {computed, defineProps} from 'vue';
+import {type OpenAPIV3_1 as OpenApiType} from 'openapi-types';
+import OpenApiSchema from './OpenApiSchema.vue';
+// import OpenApiObjectModel from './OpenApiObjectModel.vue';
+// import OpenApiMediaTypes from './OpenApiMediaTypes.vue';
+
+const props = defineProps<{
+  parameter: OpenApiType.ParameterObject;
+}>();
+
+const flags = computed(() => {
+  const arr: string[] = [];
+
+  if (props.parameter.deprecated) {
+    arr.push('Deprecated');
+  }
+
+  if (props.parameter.allowEmptyValue) {
+    arr.push('Allow empty');
+  }
+
+  if (props.parameter.allowReserved) {
+    arr.push('Allow reserved');
+  }
+
+  return arr;
+});
+
+const exampleString = computed(() => {
+  const spacing = 2;
+
+  if (!props.parameter.example) return '';
+
+  if (typeof props.parameter.example === 'object') return JSON.stringify(props.parameter.example, null, spacing);
+
+  return props.parameter.example.toString();
+});
+</script>

src/.vuepress/theme/client/components/global/OpenApiSchema.vue

@@ -1,7 +1,5 @@
 <template>
-  <div
-    v-if="schema"
-    class="mb-4">
+  <div v-if="schema">
     <OpenApiSchemaInfo
       :schema="schema"
       :title="title" />

src/.vuepress/theme/client/components/global/OpenApiSchemaInfo.vue

@@ -34,17 +34,17 @@
 
     <template v-if="schema && schema.default">
       <strong class="inline-block text-sm">Default:</strong>&nbsp;
-      <pre class="inline-block m-0 p-0 text-sm">{{ schema.default }}</pre>
+      <code class="inline-block m-0 p-1 text-sm">{{ schema.default }}</code>
     </template>
 
     <template v-if="schema && schema.pattern">
       <strong class="inline-block text-sm">Pattern:</strong>&nbsp;
-      <pre class="inline-block m-0 p-0 text-sm">{{ schema.pattern }}</pre>
+      <code class="inline-block m-0 p-1 text-sm">{{ schema.pattern }}</code>
     </template>
 
     <template v-if="schema.example">
       <strong class="inline-block text-sm">Example:</strong>&nbsp;
-      <pre class="inline-block m-0 p-0 text-sm">{{ schema.example }}</pre>
+      <code class="inline-block m-0 p-1 text-sm">{{ schema.example }}</code>
     </template>
   </header>
 </template>