Responses tab design (#25)

* change(OAResponses) ResponseCode tabs design

* feat(OAPath) path-mobile slot

* chore(docs) Custom Slots

* chore: release

docs/.vitepress/config.mts

@@ -33,6 +33,10 @@ export default defineConfigWithTheme({
                 text: 'Sidebar Items',
                 link: '/layouts/sidebar',
               },
+              {
+                text: 'Custom Slots',
+                link: '/layouts/custom-slots',
+              },
             ]
           }
         ],

docs/layouts/custom-slots.md

@@ -0,0 +1,86 @@
+---
+aside: false
+outline: false
+---
+
+# Custom Slots
+
+The `OAOperation` component provides several slots for customizing the operation layout.
+
+## Description
+
+The `description` slot allows you to customize the operation description.
+
+```vue
+---
+aside: false
+outline: false
+title: vitepress-theme-openapi
+---
+
+<script setup lang="ts">
+import { useRoute, useData } from 'vitepress'
+
+const route = useRoute()
+
+const { isDark } = useData()
+
+const operationId = route.data.params.operationId
+</script>
+
+<OAOperation :operationId="operationId" :isDark="isDark">
+
+<template #description="description">
+
+#### Custom description slot
+  
+Here you can add any Markdown content or Vue components.
+
+<div class="p-3 bg-gray-100 border">
+<p>Description content</p>
+</div>
+
+\`\`\`javascript
+console.log('Custom description slot')
+\`\`\`
+
+</template>
+
+</OAOperation>
+```
+
+This will render the following:
+
+<div class="flex flex-col p-3 rounded border dark:border-gray-700">
+
+<script setup lang="ts">
+import { useRoute, useData } from 'vitepress'
+
+const route = useRoute()
+
+const { isDark } = useData()
+</script>
+
+<OAOperation operationId="getMuseumHours" :isDark="isDark">
+
+<template #description="description">
+
+#### Custom description slot
+
+Here you can add any Markdown content or Vue components.
+
+<div class="p-3 bg-gray-100 border">
+<p>Description content</p>
+</div>
+
+```javascript
+console.log('Custom description slot')
+```
+
+</template>
+
+</OAOperation>
+
+</div>
+
+## WIP

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vitepress-theme-openapi",
   "type": "module",
-  "version": "0.0.3-alpha.22",
+  "version": "0.0.3-alpha.23",
   "packageManager": "[email protected]",
   "homepage": "https://vitepress-theme-openapi.vercel.app/",
   "repository": {

src/components/Common/OAOperation.vue

@@ -62,6 +62,28 @@ function hasSlot(name) {
       </OAHeading>
     </template>
 
+    <template
+      v-if="hasSlot('path-mobile')"
+      #path-mobile="pathMobile"
+    >
+      <slot
+        name="path-mobile"
+        v-bind="pathMobile"
+      />
+    </template>
+    <template
+      v-else
+      #path-mobile="pathMobile"
+    >
+      <OAPathEndpoint
+        :path="pathMobile.path"
+        :method="pathMobile.method"
+        :base-url="pathMobile.baseUrl"
+        :hide-base-url="pathMobile.hideBaseUrl"
+        class="sm:hidden"
+      />
+    </template>
+
     <template
       v-if="hasSlot('description')"
       #description="description"
@@ -208,6 +230,7 @@ function hasSlot(name) {
         :method="path.method"
         :base-url="path.baseUrl"
         :hide-base-url="path.hideBaseUrl"
+        class="hidden sm:flex"
       />
     </template>
 

src/components/Path/OAPath.vue

@@ -50,6 +50,16 @@ const operationResponses = operationParsed?.responses
       <div class="relative grid grid-cols-1 sm:grid-cols-2 gap-4">
         <div class="flex flex-col">
           <div class="flex flex-col space-y-4">
+            <slot
+              name="path-mobile"
+              :operation-id="props.id"
+              :operation="operation"
+              :method="operationMethod"
+              :base-url="baseUrl"
+              :path="operationPath"
+              :hide-base-url="!theme.getShowBaseURL()"
+            />
+
             <slot
               name="description"
               :operation="operation"

src/components/Response/OAResponses.vue

@@ -21,17 +21,18 @@ const responsesCodes = Object.keys(props.responses)
 </script>
 
 <template>
-  <div class="flex flex-col">
+  <div class="flex flex-col -mt-[52px]">
     <Tabs
       :default-value="responsesCodes && responsesCodes[0]"
     >
-      <TabsList class="w-full relative">
-        <TabsIndicator class="absolute left-0 h-[2px] bottom-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] rounded-full transition-[width,transform] duration-300 bg-black dark:bg-white" />
+      <TabsList class="relative w-full bg-transparent">
+        <TabsIndicator class="absolute left-0 h-full bottom-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] rounded transition-[width,transform] duration-300 bg-muted" />
+        <span class="flex-1" />
         <TabsTrigger
           v-for="responseCode in responsesCodes"
           :key="responseCode"
           :value="responseCode"
-          class="h-full"
+          class="h-full z-10"
         >
           {{ responseCode }}
         </TabsTrigger>