vitepress-openapi 0.0.3-alpha.74 → 0.0.3-alpha.76

package/src/components/ui/select/SelectContent.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { SelectContentEmits, SelectContentProps } from 'radix-vue'
+import type { SelectContentEmits, SelectContentProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
-import { SelectContent, SelectPortal, SelectViewport, useForwardPropsEmits } from 'radix-vue'
+import { SelectContent, SelectPortal, SelectViewport, useForwardPropsEmits } from 'reka-ui'
 import { computed } from 'vue'
 import { SelectScrollDownButton, SelectScrollUpButton } from '.'
 import { cn } from '../../../lib/utils'
@@ -41,7 +41,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       "
     >
       <SelectScrollUpButton />
-      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]')">
+      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[--reka-select-trigger-height] w-full min-w-[--reka-select-trigger-width]')">
         <slot />
       </SelectViewport>
       <SelectScrollDownButton />

package/src/components/ui/select/SelectGroup.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { SelectGroupProps } from 'radix-vue'
+import type { SelectGroupProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
-import { SelectGroup } from 'radix-vue'
+import { SelectGroup } from 'reka-ui'
 import { computed } from 'vue'
 import { cn } from '../../../lib/utils'
 

package/src/components/ui/select/SelectItem.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { SelectItemProps } from 'radix-vue'
+import type { SelectItemProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { Check } from 'lucide-vue-next'
-import { SelectItem, SelectItemIndicator, SelectItemText, useForwardProps } from 'radix-vue'
+import { SelectItem, SelectItemIndicator, SelectItemText, useForwardProps } from 'reka-ui'
 import { computed } from 'vue'
 import { cn } from '../../../lib/utils'
 

package/src/components/ui/select/SelectItemText.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { SelectItemTextProps } from 'radix-vue'
-import { SelectItemText } from 'radix-vue'
+import type { SelectItemTextProps } from 'reka-ui'
+import { SelectItemText } from 'reka-ui'
 
 const props = defineProps<SelectItemTextProps>()
 </script>

package/src/components/ui/select/SelectLabel.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { SelectLabelProps } from 'radix-vue'
+import type { SelectLabelProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
-import { SelectLabel } from 'radix-vue'
+import { SelectLabel } from 'reka-ui'
 import { cn } from '../../../lib/utils'
 
 const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()

package/src/components/ui/select/SelectScrollDownButton.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { SelectScrollDownButtonProps } from 'radix-vue'
+import type { SelectScrollDownButtonProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { ChevronDown } from 'lucide-vue-next'
-import { SelectScrollDownButton, useForwardProps } from 'radix-vue'
+import { SelectScrollDownButton, useForwardProps } from 'reka-ui'
 import { computed } from 'vue'
 import { cn } from '../../../lib/utils'
 

package/src/components/ui/select/SelectScrollUpButton.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { SelectScrollUpButtonProps } from 'radix-vue'
+import type { SelectScrollUpButtonProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { ChevronUp } from 'lucide-vue-next'
-import { SelectScrollUpButton, useForwardProps } from 'radix-vue'
+import { SelectScrollUpButton, useForwardProps } from 'reka-ui'
 import { computed } from 'vue'
 import { cn } from '../../../lib/utils'
 

package/src/components/ui/select/SelectSeparator.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { SelectSeparatorProps } from 'radix-vue'
+import type { SelectSeparatorProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
-import { SelectSeparator } from 'radix-vue'
+import { SelectSeparator } from 'reka-ui'
 import { computed } from 'vue'
 import { cn } from '../../../lib/utils'
 

package/src/components/ui/select/SelectTrigger.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { SelectTriggerProps } from 'radix-vue'
+import type { SelectTriggerProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { ChevronDown } from 'lucide-vue-next'
-import { SelectIcon, SelectTrigger, useForwardProps } from 'radix-vue'
+import { SelectIcon, SelectTrigger, useForwardProps } from 'reka-ui'
 import { computed } from 'vue'
 import { cn } from '../../../lib/utils'
 

package/src/components/ui/select/SelectValue.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { SelectValueProps } from 'radix-vue'
-import { SelectValue } from 'radix-vue'
+import type { SelectValueProps } from 'reka-ui'
+import { SelectValue } from 'reka-ui'
 
 const props = defineProps<SelectValueProps>()
 </script>

package/src/components/ui/select-with-custom-option/SelectWithCustomOption.vue

@@ -73,7 +73,7 @@ const handleSelectChange = (selectedValue: string) => {
     <Select
       :model-value="value"
       class="absolute inset-0"
-      @update:model-value="handleSelectChange"
+      @update:model-value="handleSelectChange(String($event))"
     >
       <SelectTrigger :aria-label="$t('Select')">
         <SelectValue :placeholder="placeholder" class="text-start" />

package/src/components/ui/tabs/Tabs.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { TabsRootEmits, TabsRootProps } from 'radix-vue'
+import type { TabsRootEmits, TabsRootProps } from 'reka-ui'
 import type { ComputedRef } from 'vue'
-import { TabsRoot, useForwardPropsEmits } from 'radix-vue'
+import { TabsRoot, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<TabsRootProps>()
 const emits = defineEmits<TabsRootEmits>()

package/src/components/ui/tabs/TabsContent.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { TabsContentProps } from 'radix-vue'
+import type { TabsContentProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
-import { TabsContent } from 'radix-vue'
+import { TabsContent } from 'reka-ui'
 import { computed } from 'vue'
 import { cn } from '../../../lib/utils'
 

package/src/components/ui/tabs/TabsList.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { TabsListProps } from 'radix-vue'
+import type { TabsListProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
-import { TabsList } from 'radix-vue'
+import { TabsList } from 'reka-ui'
 import { computed } from 'vue'
 import { cn } from '../../../lib/utils'
 

package/src/components/ui/tabs/TabsTrigger.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { TabsTriggerProps } from 'radix-vue'
+import type { TabsTriggerProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import type { TabsTriggerVariants } from './index'
-import { TabsTrigger, useForwardProps } from 'radix-vue'
+import { TabsTrigger, useForwardProps } from 'reka-ui'
 import { computed } from 'vue'
 import { cn } from '../../../lib/utils'
 import { tabsTriggerVariants } from './index'

package/src/composables/useOpenapi.ts

@@ -12,7 +12,7 @@ export function useOpenapi({
   spec,
   config,
 }: {
-  spec?: OpenAPIDocument
+  spec?: OpenAPIDocument | string
   config?: PartialUseThemeConfig
 } = {}) {
   if (config) {
@@ -36,7 +36,7 @@ export function useOpenapi({
   function sync({
     spec,
   }: {
-    spec?: OpenAPIDocument
+    spec?: OpenAPIDocument | string
   } = {}) {
     if (spec) {
       setInstance(
@@ -58,7 +58,7 @@ export function useOpenapi({
   async function async({
     spec,
   }: {
-    spec?: OpenAPIDocument
+    spec?: OpenAPIDocument | string
   } = {}) {
     if (spec) {
       setInstance(

package/src/composables/useShiki.ts

@@ -20,7 +20,7 @@ const loading = ref(true)
 const themeConfig = useTheme()
 
 export function useShiki() {
-  async function initShiki() {
+  async function init() {
     if (shiki) {
       return
     }
@@ -48,6 +48,10 @@ export function useShiki() {
   return {
     loading,
     renderShiki,
-    initShiki,
+    init,
+    initShiki: async () => {
+      console.warn('initShiki is deprecated, use init instead')
+      await init()
+    },
   }
 }

package/src/composables/useTheme.ts

@@ -143,6 +143,7 @@ interface LanguageConfig {
   lang: string
   label: string
   highlighter: string
+  icon?: string
 }
 
 export type PartialUseThemeConfig = Partial<UnwrapNestedRefs<UseThemeConfig>>
@@ -172,21 +173,25 @@ export const availableLanguages: LanguageConfig[] = [
     lang: 'curl',
     label: 'cURL',
     highlighter: 'bash',
+    icon: 'curl',
   },
   {
     lang: 'javascript',
     label: 'JavaScript',
     highlighter: 'javascript',
+    icon: '.js',
   },
   {
     lang: 'php',
     label: 'PHP',
     highlighter: 'php',
+    icon: '.php',
   },
   {
     lang: 'python',
     label: 'Python',
     highlighter: 'python',
+    icon: '.py',
   },
 ]
 
@@ -786,7 +791,10 @@ export function useTheme(initialConfig: PartialUseThemeConfig = {}) {
     const uniqueLanguages = [...new Set(languages.map(({ lang }) => lang))]
 
     themeConfig.codeSamples.availableLanguages = uniqueLanguages.map((lang) => {
-      const language = availableLanguages.find(l => l.lang === lang)
+      const language
+        = languages.find(l => l.lang === lang)
+          ?? availableLanguages.find(l => l.lang === lang)
+
       return language || { lang, label: lang, highlighter: 'plaintext' }
     })
   }

package/src/lib/parser/parseOpenapi.ts

@@ -3,6 +3,7 @@ import type { OpenAPIDocument, ParsedOpenAPI } from '../../types'
 import { dereferenceSync } from '@trojs/openapi-dereference'
 import { $trycatch } from '@tszen/trycatch'
 import { merge } from 'allof-merge'
+import { parseYAML } from 'confbox'
 import { generateCodeSamples } from './generateCodeSamples'
 import { generateMissingOperationIds } from './generateMissingOperationIds'
 import { generateMissingSummary } from './generateMissingSummary'
@@ -12,12 +13,29 @@ import { generateResponseUi } from './generateResponseUi'
 import { generateSecurityUi } from './generateSecurityUi'
 
 export function parseOpenapi() {
+  function parseSpecContent(spec: OpenAPIDocument | string): OpenAPIDocument | null {
+    if (typeof spec === 'string') {
+      try {
+        const parsed = parseYAML(spec)
+        return parsed as OpenAPIDocument
+      } catch (e) {
+        console.error('Error parsing spec', e)
+      }
+    } else if (typeof spec === 'object') {
+      return spec as OpenAPIDocument
+    } else {
+      console.error('Invalid spec format')
+    }
+
+    return {} as OpenAPIDocument
+  }
+
   function transformSync({
     spec,
     defaultTag = undefined,
     defaultTagDescription = undefined,
   }: {
-    spec: OpenAPIDocument
+    spec: OpenAPIDocument | string
     defaultTag?: string
     defaultTagDescription?: string
   }) {
@@ -25,38 +43,42 @@ export function parseOpenapi() {
       console.warn('Transforming OpenAPI spec:', spec)
     }
 
-    if (!spec) {
+    let specContent = parseSpecContent(spec)
+
+    if (!specContent) {
       return {}
     }
 
-    if (!spec.openapi || !String(spec.openapi).startsWith('3.')) {
+    if (!specContent.openapi || !String(specContent.openapi).startsWith('3.')) {
       console.warn('Only OpenAPI 3.x is supported')
       return {}
     }
 
-    if (spec?.paths) {
-      spec = generateMissingOperationIds(spec)
-      spec = generateMissingSummary(spec)
-      spec = generateMissingTags({ spec, defaultTag, defaultTagDescription })
+    if (specContent?.paths) {
+      specContent = generateMissingOperationIds(specContent)
+      specContent = generateMissingSummary(specContent)
+      specContent = generateMissingTags({ spec: specContent, defaultTag, defaultTagDescription })
     }
 
-    spec.externalDocs = spec.externalDocs || spec.externalDocs || {}
-    spec.info = spec.info || spec.info || {}
-    spec.servers = spec.servers || spec.servers || []
-    spec.tags = spec.tags || spec.tags || []
+    specContent.externalDocs = specContent.externalDocs || {}
+    specContent.info = specContent.info || {}
+    specContent.servers = specContent.servers || []
+    specContent.tags = specContent.tags || []
 
-    return Object.assign({}, spec)
+    return Object.assign({}, specContent)
   }
 
   async function transformAsync({
     spec,
   }: {
-    spec: ParsedOpenAPI
+    spec: ParsedOpenAPI | string
   }): Promise<ParsedOpenAPI> {
-    const [result, err] = await $trycatch(() => generateCodeSamples(spec))
-    spec = err ? spec : result
+    let specContent = parseSpecContent(spec) as ParsedOpenAPI
+
+    const [result, err] = await $trycatch(() => generateCodeSamples(specContent))
+    specContent = err ? specContent : result
 
-    return spec
+    return specContent
   }
 
   function parseSync({
@@ -64,11 +86,13 @@ export function parseOpenapi() {
     defaultTag = undefined,
     defaultTagDescription = undefined,
   }: {
-    spec: OpenAPIDocument
+    spec: OpenAPIDocument | string
     defaultTag?: string
     defaultTagDescription?: string
   }): ParsedOpenAPI {
-    let parsedSpec = Object.assign({}, spec) as ParsedOpenAPI
+    const specContent = parseSpecContent(spec)
+
+    let parsedSpec = Object.assign({}, specContent) as ParsedOpenAPI
 
     const [mergedSpec, errMerge] = $trycatch(() => merge(
       transformSync({
@@ -104,7 +128,7 @@ export function parseOpenapi() {
     defaultTag = undefined,
     defaultTagDescription = undefined,
   }: {
-    spec: OpenAPIDocument
+    spec: OpenAPIDocument | string
     defaultTag?: string
     defaultTagDescription?: string
   }): Promise<ParsedOpenAPI> {