feat(OAPlaygroundResponse): Allows to handle multiple response types (#…

…55) * feat(Badge): size variants * change(OACodeBlock): allows to pass Object/Array prop * change(OASchemaPropertyAttributes): use code instead of Badge * feat(OAPlaygroundResponse): Allows to handle multiple responses types * docs: response-types * fix(OATryItButton): interface * chore: rename openapi-response-types.json * docs: response-statuses * chore(OAPlaygroundResponse): downloadBlob * chore: release v0.0.3-alpha.32
enzonotario · Sep 26, 2024 · d539a79 · d539a79
1 parent 0844ecc
commit d539a79
Show file tree

Hide file tree

Showing 20 changed files with 554 additions and 57 deletions.
diff --git a/dev/.vitepress/config.ts b/dev/.vitepress/config.ts
@@ -48,6 +48,14 @@ export default defineConfigWithTheme({
             text: 'CriptoYA Argentina',
             link: '/criptoya-argentina',
           },
+          {
+            text: 'Response Types',
+            link: '/response-types',
+          },
+          {
+            text: 'Response Statuses',
+            link: '/response-statuses',
+          },
         ],
       },
     ],

diff --git a/dev/response-statuses/index.md b/dev/response-statuses/index.md
@@ -0,0 +1,14 @@
+---
+aside: false
+outline: false
+title: vitepress-theme-openapi
+---
+
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import spec from '../../docs/public/openapi-response-statuses.json'
+
+const { isDark } = useData()
+</script>
+
+<OASpec :spec="spec" :isDark="isDark" />
diff --git a/dev/response-types/index.md b/dev/response-types/index.md
@@ -0,0 +1,14 @@
+---
+aside: false
+outline: false
+title: vitepress-theme-openapi
+---
+
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import spec from '../../docs/public/openapi-response-types.json'
+
+const { isDark } = useData()
+</script>
+
+<OASpec :spec="spec" :isDark="isDark" />
diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
@@ -80,6 +80,14 @@ export default defineConfigWithTheme({
                 text: 'One Page',
                 link: '/example/one-page',
               },
+              {
+                text: 'Multiple Response Types',
+                link: '/example/response-types',
+              },
+              {
+                text: 'Response Statuses',
+                link: '/example/response-statuses',
+              },
             ],
           },
         ],

diff --git a/docs/example/response-statuses/index.md b/docs/example/response-statuses/index.md
@@ -0,0 +1,14 @@
+---
+aside: false
+outline: false
+title: vitepress-theme-openapi
+---
+
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import spec from '../../public/openapi-response-statuses.json'
+
+const { isDark } = useData()
+</script>
+
+<OASpec :spec="spec" :isDark="isDark" />
diff --git a/docs/example/response-types/index.md b/docs/example/response-types/index.md
@@ -0,0 +1,14 @@
+---
+aside: false
+outline: false
+title: vitepress-theme-openapi
+---
+
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import spec from '../../public/openapi-response-types.json'
+
+const { isDark } = useData()
+</script>
+
+<OASpec :spec="spec" :isDark="isDark" />
diff --git a/docs/public/openapi-response-statuses.json b/docs/public/openapi-response-statuses.json
@@ -0,0 +1,193 @@
+{
+  "openapi": "3.0.0",
+  "info": {
+    "title": "Response statuses",
+    "description": "Example of an OpenAPI document with response statuses.",
+    "version": "1.0.0",
+    "license": {
+      "name": "MIT"
+    }
+  },
+  "servers": [
+    {
+      "url": "https://httpstat.us/"
+    }
+  ],
+  "paths": {
+    "200": {
+      "get": {
+        "operationId": "get200",
+        "summary": "Get 200",
+        "description": "Example of a response with a 200 status code.",
+        "responses": {
+          "200": {
+            "description": "Successful response",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "object",
+                  "properties": {
+                    "status": {
+                      "type": "string",
+                      "example": "200 OK"
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "201": {
+      "get": {
+        "operationId": "get201",
+        "summary": "Get 201",
+        "description": "Example of a response with a 201 status code.",
+        "responses": {
+          "201": {
+            "description": "Created",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "object",
+                  "properties": {
+                    "status": {
+                      "type": "string",
+                      "example": "201 Created"
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "400": {
+      "get": {
+        "operationId": "get400",
+        "summary": "Get 400",
+        "description": "Example of a response with a 400 status code.",
+        "responses": {
+          "400": {
+            "description": "Bad Request",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "object",
+                  "properties": {
+                    "status": {
+                      "type": "string",
+                      "example": "400 Bad Request"
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "401": {
+      "get": {
+        "operationId": "get401",
+        "summary": "Get 401",
+        "description": "Example of a response with a 401 status code.",
+        "responses": {
+          "401": {
+            "description": "Unauthorized",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "object",
+                  "properties": {
+                    "status": {
+                      "type": "string",
+                      "example": "401 Unauthorized"
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "403": {
+      "get": {
+        "operationId": "get403",
+        "summary": "Get 403",
+        "description": "Example of a response with a 403 status code.",
+        "responses": {
+          "403": {
+            "description": "Forbidden",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "object",
+                  "properties": {
+                    "status": {
+                      "type": "string",
+                      "example": "403 Forbidden"
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "404": {
+      "get": {
+        "operationId": "get404",
+        "summary": "Get 404",
+        "description": "Example of a response with a 404 status code.",
+        "responses": {
+          "404": {
+            "description": "Not Found",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "object",
+                  "properties": {
+                    "status": {
+                      "type": "string",
+                      "example": "404 Not Found"
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "500": {
+      "get": {
+        "operationId": "get500",
+        "summary": "Get 500",
+        "description": "Example of a response with a 500 status code.",
+        "responses": {
+          "500": {
+            "description": "Internal Server Error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "object",
+                  "properties": {
+                    "status": {
+                      "type": "string",
+                      "example": "500 Internal Server Error"
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/docs/public/openapi-response-types.json b/docs/public/openapi-response-types.json
@@ -0,0 +1,65 @@
+{
+  "openapi": "3.0.0",
+  "info": {
+    "title": "Multiple response types",
+    "description": "Example of an OpenAPI document with multiple response types.",
+    "version": "1.0.0",
+    "license": {
+      "name": "MIT"
+    },
+    "contact": {
+      "name": "OpenAI",
+      "url": "https://openai.com"
+    },
+    "termsOfService": "https://openai.com/terms"
+  },
+  "servers": [
+    {
+      "url": "https://cdn.openai.com/API"
+    }
+  ],
+  "paths": {
+    "/docs/audio/alloy.wav": {
+      "get": {
+        "operationId": "getAudio",
+        "summary": "Get audio",
+        "description": "Example of a response with an audio file.",
+        "responses": {
+          "200": {
+            "description": "Successful response",
+            "content": {
+              "audio/wav": {
+                "schema": {
+                  "type": "string",
+                  "format": "binary",
+                  "description": "An example of the `alloy` voice."
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/images/guides/simple-cat-image-dall-e-3.webp": {
+      "get": {
+        "operationId": "getImage",
+        "summary": "Get image",
+        "description": "Example of a response with an image file.",
+        "responses": {
+          "200": {
+            "description": "Successful response",
+            "content": {
+              "image/webp": {
+                "schema": {
+                  "type": "string",
+                  "format": "binary",
+                  "description": "An image generated by DALL-E 3."
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vitepress-theme-openapi",
   "type": "module",
-  "version": "0.0.3-alpha.31",
+  "version": "0.0.3-alpha.32",
   "packageManager": "[email protected]",
   "homepage": "https://vitepress-theme-openapi.vercel.app/",
   "repository": {

diff --git a/src/components/Common/OACodeBlock.vue b/src/components/Common/OACodeBlock.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useShiki } from 'vitepress-theme-openapi/composables/useShiki'
 import { useTheme } from 'vitepress-theme-openapi'
 import VueJsonPretty from 'vue-json-pretty'
@@ -8,7 +8,7 @@ import { destr } from 'destr'
 
 const props = defineProps({
   code: {
-    type: String,
+    type: [String, Object, Array],
     required: true,
   },
   lang: {
@@ -35,6 +35,10 @@ const shiki = useShiki()
 
 const themeConfig = useTheme()
 
+const jsonData = computed(() => {
+  return typeof props.code === 'string' ? destr(props.code) : props.code
+})
+
 watch(
   [() => props.code, () => props.lang, () => props.isDark],
   async () => {
@@ -71,7 +75,7 @@ watch(
 
     <VueJsonPretty
       v-if="props.lang === 'json' && !props.disableHtmlTransform"
-      :data="destr(props.code)"
+      :data="jsonData"
       :theme="props.isDark ? 'dark' : 'light'"
       :deep="themeConfig.getJsonViewerDeep()"
       show-icon