vitepress-openapi 0.0.3-alpha.49 → 0.0.3-alpha.50

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vitepress-openapi",
   "type": "module",
-  "version": "0.0.3-alpha.49",
+  "version": "0.0.3-alpha.50",
   "homepage": "https://vitepress-openapi.vercel.app/",
   "repository": {
     "type": "git",

package/src/components/Operation/OAOperation.vue

@@ -3,6 +3,7 @@ import { computed, inject, useSlots } from 'vue'
 import { getOpenApiInstance } from '../../lib/getOpenApiInstance'
 import OAHeaderBadges from '../Common/OAHeaderBadges.vue'
 import type { OperationSlot } from '../../types'
+import OAOperationTags from './OAOperationTags.vue'
 
 const props = defineProps({
   operationId: {
@@ -110,6 +111,24 @@ function hasSlot(name: OperationSlot): boolean {
       </div>
     </template>
 
+    <template
+      v-if="hasSlot('tags')"
+      #tags="tags"
+    >
+      <slot
+        name="tags"
+        v-bind="tags"
+      />
+    </template>
+    <template
+      v-else
+      #tags="tags"
+    >
+      <OAOperationTags
+        :tags="tags.operation.tags"
+      />
+    </template>
+
     <template
       v-if="hasSlot('description')"
       #description="description"

package/src/components/Operation/OAOperationTags.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { Badge } from '../ui/badge'
+import { useTheme } from '../../composables/useTheme'
+
+const props = defineProps({
+  tags: {
+    type: Array,
+    required: true,
+  },
+})
+
+const themeConfig = useTheme()
+
+const prefix = themeConfig.getTagsLinkPrefix()
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-2">
+    <a
+      v-for="(tag, index) in props.tags"
+      :key="index"
+      :href="`${prefix}${tag}`"
+      :aria-label="$t('tags.goTo', { tag })"
+    >
+      <Badge variant="outline">
+        {{ tag }}
+      </Badge>
+    </a>
+  </div>
+</template>

package/src/components/Path/OAPath.vue

@@ -70,7 +70,7 @@ function updateRequest(newRequest) {
   <div>
     <div
       v-if="operation"
-      class="OAPath flex flex-col space-y-8"
+      class="OAPath flex flex-col space-y-4"
     >
       <template v-if="operationSlots.includes('header')">
         <slot
@@ -83,6 +83,17 @@ function updateRequest(newRequest) {
         />
       </template>
 
+      <template v-if="operationSlots.includes('tags')">
+        <slot
+          name="tags"
+          :operation="operation"
+          :method="operationMethod"
+          :base-url="baseUrl"
+          :path="operationPath"
+          :tags="operation.tags"
+        />
+      </template>
+
       <div
         :class="{
           'sm:grid-cols-1': operationCols === 1,

package/src/components/Playground/OAPlaygroundParameters.vue

@@ -86,7 +86,17 @@ const selectedSchemeName = computed(() => {
 })
 
 const selectedScheme = computed(() => {
-  return props.securitySchemes[selectedSchemeName.value]
+  const scheme = props.securitySchemes[selectedSchemeName.value]
+
+  if (!scheme) {
+    if (!Object.keys(props.securitySchemes).length) {
+      return null
+    }
+
+    return props.securitySchemes[Object.keys(props.securitySchemes)[0]]
+  }
+
+  return scheme
 })
 
 const authScheme = ref<PlaygroundSecurityScheme | null>(null)

package/src/composables/useTheme.ts

@@ -103,6 +103,7 @@ export interface UseThemeConfig {
   i18n?: Partial<I18nConfig>
   spec?: Partial<SpecConfig>
   codeSamples?: Partial<CodeSamplesConfig>
+  linksPrefixes?: Partial<LinksPrefixesConfig>
 }
 
 export interface UseThemeConfigUnref {
@@ -144,6 +145,7 @@ export interface UseThemeConfigUnref {
   i18n?: Partial<I18nConfig>
   spec?: Partial<SpecConfig>
   codeSamples?: Partial<CodeSamplesConfig>
+  linksPrefixes?: Partial<LinksPrefixesConfig>
 }
 
 export interface CodeSamplesConfig {
@@ -154,6 +156,11 @@ export interface CodeSamplesConfig {
   defaultHeaders: Record<string, string>
 }
 
+export interface LinksPrefixesConfig {
+  tags: string
+  operations: string
+}
+
 interface LanguageConfig {
   lang: string
   label: string
@@ -275,12 +282,18 @@ const themeConfig: UseThemeConfig = {
       'Content-Type': 'application/json',
     },
   },
+  linksPrefixes: {
+    tags: '/tags/',
+    operations: '/operations/',
+  },
 }
 
 const defaultThemeConfig: UseThemeConfigUnref = { ...deepUnref(themeConfig) } as UseThemeConfigUnref
 
-export function useTheme(config: Partial<UseThemeConfigUnref> = {}) {
-  if (Object.keys(config).length) {
+export function useTheme(initialConfig: Partial<UseThemeConfigUnref> = {}) {
+  setConfig(initialConfig)
+
+  function setConfig(config: Partial<UseThemeConfigUnref>) {
     if (config?.theme?.highlighterTheme) {
       // @ts-expect-error: This is a valid expression.
       themeConfig.theme.highlighterTheme = {
@@ -364,10 +377,14 @@ export function useTheme(config: Partial<UseThemeConfigUnref> = {}) {
     if (config?.codeSamples !== undefined) {
       setCodeSamplesConfig(config.codeSamples)
     }
+
+    if (config?.linksPrefixes !== undefined) {
+      setLinksPrefixesConfig(config.linksPrefixes)
+    }
   }
 
   function reset() {
-    useTheme({ ...defaultThemeConfig })
+    setConfig(defaultThemeConfig)
   }
 
   function getState() {
@@ -671,6 +688,28 @@ export function useTheme(config: Partial<UseThemeConfigUnref> = {}) {
     }
   }
 
+  function getLinksPrefixesConfig() {
+    return themeConfig.linksPrefixes
+  }
+
+  function setLinksPrefixesConfig(config: Partial<LinksPrefixesConfig>) {
+    if (config.tags) {
+      (themeConfig.linksPrefixes as LinksPrefixesConfig).tags = config.tags
+    }
+
+    if (config.operations) {
+      (themeConfig.linksPrefixes as LinksPrefixesConfig).operations = config.operations
+    }
+  }
+
+  function getTagsLinkPrefix() {
+    return themeConfig?.linksPrefixes?.tags
+  }
+
+  function getOperationsLinkPrefix() {
+    return themeConfig?.linksPrefixes?.operations
+  }
+
   return {
     schemaConfig: themeConfig.requestBody,
     reset,
@@ -721,5 +760,9 @@ export function useTheme(config: Partial<UseThemeConfigUnref> = {}) {
     getCodeSamplesGenerator,
     getCodeSamplesDefaultHeaders,
     setCodeSamplesConfig,
+    getLinksPrefixesConfig,
+    setLinksPrefixesConfig,
+    getTagsLinkPrefix,
+    getOperationsLinkPrefix,
   }
 }

package/src/index.ts

@@ -2,7 +2,7 @@ import * as VueI18n from 'vue-i18n'
 import type { EnhanceAppContext, Theme } from 'vitepress/client'
 import type { Component } from 'vue'
 import type { Awaitable } from 'vitepress'
-import { useTheme } from './composables/useTheme'
+import { DEFAULT_OPERATION_SLOTS, useTheme } from './composables/useTheme'
 import { useShiki } from './composables/useShiki'
 import * as components from './components'
 
@@ -12,6 +12,7 @@ import 'tailwindcss/tailwind.css'
 import './style.css'
 import './json.css'
 
+export { DEFAULT_OPERATION_SLOTS }
 export { useSidebar } from './composables/useSidebar'
 export { useOpenapi } from './composables/useOpenapi'
 export { useTheme } from './composables/useTheme'

package/src/locales/en.json

@@ -40,5 +40,6 @@
   "Show operations": "Show operations",
   "Operations": "Operations",
   "Default": "Default",
-  "Example": "Example"
+  "Example": "Example",
+  "tags.goTo": "View {tag} operations"
 }

package/src/locales/es.json

@@ -40,5 +40,6 @@
   "Show operations": "Mostrar operaciones",
   "Operations": "Operaciones",
   "Default": "Por defecto",
-  "Example": "Ejemplo"
+  "Example": "Ejemplo",
+  "tags.goTo": "Ver operaciones de {tag}"
 }

package/src/types.ts

@@ -6,6 +6,7 @@ import type { RemovableRef } from '@vueuse/core'
  */
 export type OperationSlot =
   | 'header'
+  | 'tags'
   | 'path'
   | 'description'
   | 'security'
@@ -18,7 +19,6 @@ export type OperationSlot =
   | 'footer'
   // TODO: Implement these slots.
   // | 'summary'
-  // | 'tags'
   // | 'servers'
 
 export type ParsedOpenAPI = OpenAPI.Document & {