change(OAOperation) move to own Slot (#24)

* - change(OAOperation) move to own Slot
- feat(useTheme) `showBaseUrl` setting

* chore: release

package.json

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

src/components/Common/OAOperation.vue

@@ -1,6 +1,5 @@
 <script setup>
 import { computed, useSlots } from 'vue'
-import { useOpenapi } from 'vitepress-theme-openapi';
 
 const props = defineProps({
  operationId: {
@@ -191,6 +190,27 @@ function hasSlot(name) {
  />
  </template>
 
+ <template
+ v-if="hasSlot('path')"
+ #path="path"
+ >
+ <slot
+ name="path"
+ v-bind="path"
+ />
+ </template>
+ <template
+ v-else
+ #path="path"
+ >
+ <OAPathEndpoint
+ :path="path.path"
+ :method="path.method"
+ :base-url="path.baseUrl"
+ :hide-base-url="path.hideBaseUrl"
+ />
+ </template>
+
  <template
  v-if="hasSlot('try-it')"
  #try-it="tryIt"

src/components/Path/OAPath.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { defineProps } from 'vue'
 import { useOpenapi } from 'vitepress-theme-openapi'
+import { useTheme } from 'vitepress-theme-openapi/composables/useTheme'
 
 const props = defineProps({
  id: {
@@ -9,6 +10,8 @@ const props = defineProps({
  },
 })
 
+const theme = useTheme()
+
 const openapi = useOpenapi()
 
 const operation = openapi.getOperation(props.id)
@@ -50,7 +53,7 @@ const operationResponses = operationParsed?.responses
  <slot
  name="description"
  :operation="operation"
- :method="props.method"
+ :method="operationMethod"
  :base-url="baseUrl"
  :path="operationPath"
  />
@@ -60,7 +63,7 @@ const operationResponses = operationParsed?.responses
  v-if="Object.keys(securitySchemes).length"
  name="security"
  :operation="operation"
- :method="props.method"
+ :method="operationMethod"
  :base-url="baseUrl"
  :path="operationPath"
  :security-schemes="securitySchemes"
@@ -93,25 +96,35 @@ const operationResponses = operationParsed?.responses
  name="end-top"
  :operation-id="props.id"
  :operation="operation"
- :method="props.method"
+ :method="operationMethod"
  :base-url="baseUrl"
  :path="operationPath"
  />
 
  <div class="sticky top-[100px] inset-x-0 flex flex-col sm:px-6 space-y-4">
+ <slot
+ name="path"
+ :operation-id="props.id"
+ :operation="operation"
+ :method="operationMethod"
+ :base-url="baseUrl"
+ :path="operationPath"
+ :hide-base-url="!theme.getShowBaseURL()"
+ />
+
  <slot
  name="try-it"
  :operation-id="props.id"
  :path="operationPath"
- :method="props.method"
+ :method="operationMethod"
  :base-url="baseUrl"
  />
 
  <slot
  name="code-samples"
  :operation-id="props.id"
  :operation="operation"
- :method="props.method"
+ :method="operationMethod"
  :base-url="baseUrl"
  :path="operationPath"
  />
@@ -123,7 +136,7 @@ const operationResponses = operationParsed?.responses
  name="footer"
  :operation-id="props.id"
  :operation="operation"
- :method="props.method"
+ :method="operationMethod"
  :base-url="baseUrl"
  :path="operationPath"
  />

src/components/Path/OAPathEndpoint.vue

@@ -2,15 +2,15 @@
 import { Badge } from 'vitepress-theme-openapi/components/ui/badge'
 
 const props = defineProps({
- method: {
+ path: {
  type: String,
  required: true,
  },
- baseUrl: {
+ method: {
  type: String,
  required: true,
  },
- path: {
+ baseUrl: {
  type: String,
  required: true,
  },
@@ -30,7 +30,7 @@ const props = defineProps({
  >
  {{ props.method.toUpperCase() }}
  </Badge>
- <span class="text-gray-600 dark:text-gray-400 inline-flex items-center">
+ <span class="flex flex-row flex-shrink-0 text-gray-600 dark:text-gray-400">
  <span
  v-if="!props.hideBaseUrl"
  class="hidden md:inline-block"

src/components/Try/OATryWithVariables.vue

@@ -54,14 +54,6 @@ const curl = computed(() => {
 
 <template>
  <div class="flex flex-col space-y-2">
- <OAPathEndpoint
- v-if="!props.hideEndpoint"
- :method="operationMethod"
- :path="props.path"
- :base-url="props.baseUrl"
- hide-base-url
- />
-
  <OARequestParameters
  v-model:request="request"
  :operation-id="props.operationId"

src/composables/useTheme.ts

@@ -4,6 +4,8 @@ const locale: Ref<'es' | 'en'> = ref('en')
 
 const schemaDefaultView: Ref<'schema' | 'json'> = ref('json')
 
+const showBaseURL: Ref<boolean> = ref(false)
+
 export function useTheme() {
  function getLocale() {
  return locale.value
@@ -13,9 +15,29 @@ export function useTheme() {
  locale.value = value
  }
 
+ function getSchemaDefaultView() {
+ return schemaDefaultView.value
+ }
+
+ function setSchemaDefaultView(value: 'schema' | 'json') {
+ schemaDefaultView.value = value
+ }
+
+ function getShowBaseURL() {
+ return showBaseURL.value
+ }
+
+ function setShowBaseURL(value: boolean) {
+ showBaseURL.value = value
+ }
+
  return {
+ schemaDefaultView,
  getLocale,
  setLocale,
- schemaDefaultView,
+ getSchemaDefaultView,
+ setSchemaDefaultView,
+ getShowBaseURL,
+ setShowBaseURL,
  }
 }