feat(examples): allows to show them wrapped or in columns

enzonotario · Dec 12, 2024 · 75abc89 · 75abc89
1 parent 566f596
commit 75abc89
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 6 deletions.
diff --git a/docs/composables/useTheme.md b/docs/composables/useTheme.md
@@ -91,6 +91,7 @@ export default {
                 avoidCirculars: false, // Avoid circular references when parsing schemas.
                 lazyRendering: false, // Lazy render Paths and Tags components.
                 defaultTag: 'Default', // Default tag to use when a path has no tags.
+                wrapExamples: true, // Wrap examples in a row or show them in a column.
             },
         })
     }
@@ -153,4 +154,4 @@ export default {
 
 | Function        | Description                  | Default Value                                                                                                                             | Allowed Values                                                                                                                                     |
 |-----------------|------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------|
-| `setSpecConfig` | Sets the spec configuration. | `{ groupByTags: true, collapsePaths: false, showPathsSummary: true, avoidCirculars: false, lazyRendering: false, defaultTag: 'Default' }` | `{ groupByTags: boolean, collapsePaths: boolean, showPathsSummary: boolean, avoidCirculars: boolean, lazyRendering: boolean, defaultTag: string }` |
+| `setSpecConfig` | Sets the spec configuration. | `{ groupByTags: true, collapsePaths: false, showPathsSummary: true, avoidCirculars: false, lazyRendering: false, defaultTag: 'Default', wrapExamples: true }` | `{ groupByTags: boolean, collapsePaths: boolean, showPathsSummary: boolean, avoidCirculars: boolean, lazyRendering: boolean, defaultTag: string, wrapExamples: boolean }` |
diff --git a/src/components/Parameter/OAParameter.vue b/src/components/Parameter/OAParameter.vue
@@ -2,6 +2,7 @@
 import OACodeValue from '../Common/OACodeValue.vue'
 import { getConstraints } from '../../lib/constraintsParser'
 import { getExamples } from '../../lib/getExamples'
+import { useTheme } from '../../composables/useTheme'
 
 const props = defineProps({
   parameter: {
@@ -13,6 +14,8 @@ const props = defineProps({
 const examples = getExamples(props.parameter)
 
 const constraints = getConstraints(props.parameter.schema)
+
+const wrapExamples = useTheme().getWrapExamples()
 </script>
 
 <template>
@@ -74,15 +77,26 @@ const constraints = getConstraints(props.parameter.schema)
       </div>
       <div
         v-if="examples?.length > 1"
-        class="flex flex-row flex-wrap items-center gap-2"
+        class="flex flex-row flex-wrap gap-2"
+        :class="{
+          'items-center': wrapExamples,
+        }"
       >
         <span class="text-sm">{{ $t('Examples') }}</span>
         <div
-          v-for="(example, idx) in examples"
-          :key="idx"
-          class="flex flex-wrap gap-2"
+          class="flex gap-2"
+          :class="{
+            'flex-col': !wrapExamples,
+            'flex-row flex-wrap': wrapExamples,
+          }"
         >
-          <OACodeValue :value="example" />
+          <OACodeValue
+            v-for="(example, idx) in examples"
+            :key="idx"
+            :value="example"
+          >
+            <OACodeValue />
+          </oacodevalue>
         </div>
       </div>
 

diff --git a/src/composables/useTheme.ts b/src/composables/useTheme.ts
@@ -87,6 +87,7 @@ export interface SpecConfig {
   lazyRendering?: Ref<boolean>
   defaultTag?: string
   defaultTagDescription?: string
+  wrapExamples?: boolean
 }
 
 export interface UseThemeConfig {
@@ -267,6 +268,7 @@ const themeConfig: UseThemeConfig = {
     lazyRendering: ref(false),
     defaultTag: 'Default',
     defaultTagDescription: '',
+    wrapExamples: true,
   },
   codeSamples: {
     langs: [
@@ -602,6 +604,10 @@ export function useTheme(initialConfig: Partial<UseThemeConfigUnref> = {}) {
     return themeConfig.spec
   }
 
+  function getWrapExamples() {
+    return themeConfig?.spec?.wrapExamples
+  }
+
   function setSpecConfig(config: Partial<SpecConfig>) {
     if (!themeConfig.spec) {
       themeConfig.spec = {}
@@ -639,6 +645,10 @@ export function useTheme(initialConfig: Partial<UseThemeConfigUnref> = {}) {
     if (config.defaultTagDescription !== undefined) {
       themeConfig.spec.defaultTagDescription = config.defaultTagDescription
     }
+
+    if (config.wrapExamples !== undefined) {
+      themeConfig.spec.wrapExamples = config.wrapExamples
+    }
   }
 
   function getCodeSamplesLangs() {
@@ -753,6 +763,7 @@ export function useTheme(initialConfig: Partial<UseThemeConfigUnref> = {}) {
     getI18nConfig,
     setI18nConfig,
     getSpecConfig,
+    getWrapExamples,
     setSpecConfig,
     getCodeSamplesLangs,
     getCodeSamplesDefaultLang,

diff --git a/test/composables/useTheme.test.ts b/test/composables/useTheme.test.ts
@@ -92,7 +92,9 @@ describe('composition API', () => {
       lazyRendering: ref(false),
       defaultTag: 'Default',
       defaultTagDescription: '',
+      wrapExamples: true,
     })
+    expect(theme.getWrapExamples()).toBe(true)
   })
 
   it('can reset', () => {
@@ -336,6 +338,7 @@ describe('useTheme', () => {
       lazyRendering: ref(false),
       defaultTag: 'Default',
       defaultTagDescription: '',
+      wrapExamples: true,
     })
   })
 
@@ -346,13 +349,16 @@ describe('useTheme', () => {
       showPathsSummary: false,
       avoidCirculars: true,
       lazyRendering: true,
+      wrapExamples: false,
     })
     const result = themeConfig.getSpecConfig()
     result.groupByTags.value = false
     result.collapsePaths.value = true
     result.showPathsSummary.value = false
     result.avoidCirculars.value = true
     result.lazyRendering.value = true
+    result.wrapExamples = false
+    expect(themeConfig.getWrapExamples()).toBe(false)
   })
 
   it('returns the default links prefixes config', () => {