feat: support complex types (#5)

.vitepress/theme/components/Api/Request/Params/index.vue

@@ -1,54 +1,89 @@
 <template>
   <div v-if="params">
-    <h3 class="text-xs font-semibold uppercase">
+    <h3 v-if="title" class="text-xs font-semibold uppercase">
       {{ title }}
       <span v-if="type" class="opacity-60 ml-0.5">[{{ type }}]</span>
     </h3>
     <div
-      class="bg-[var(--vp-sidebar-bg-color)] rounded-lg border border-gray-200 dark:border-gray-900 border-solid my-4 px-3"
+      class="bg-[var(--vp-sidebar-bg-color)] rounded-lg border border-gray-200 dark:border-[#2e2e32] border-solid my-4 px-2"
     >
       <div
         v-for="([key, item], index) of Object.entries(params)"
         :class="
-          classnames('py-2.5', {
-            'border-t border-solid border-gray-300 dark:border-[#2e2e32] ':
-              index !== 0
-          })
+          classnames(
+            'py-2.5',
+            index === 0
+              ? ''
+              : 'border-t border-solid border-gray-200 dark:border-[#2e2e32]'
+          )
         "
       >
-        <div class="flex justify-between">
-          <div class="flex items-baseline">
-            <span
-              v-if="item.required !== false"
-              class="text-red-500 absolute -ml-1.5 mt-0.5 text-xs"
-              >*</span
-            >
-            <span>{{ key }}</span>
-            <span class="ml-2 text-xs text-gray-500">{{ item.type }}</span>
-            <span v-if="item.default" class="ml-2 text-xs text-gray-500"
-              >Defaults to {{ item.default }}</span
-            >
-          </div>
-          <Input
-            :type="item.type"
-            :value="item.default"
+        <details class="daisy-collapse daisy-collapse-arrow rounded-none">
+          <summary
             :class="
               classnames(
-                'transition-opacity',
-                input ? 'opacity-100' : 'opacity-0'
+                'text-xl font-medium p-0 m-0 min-h-0 flex items-center',
+                item.description ? 'after:-mt-1' : 'after:-mt-4',
+                {
+                  'daisy-collapse-title': isComplex(item)
+                }
               )
             "
-            @change="(val) => handleChange(key, val)"
-          />
-        </div>
-        <div v-if="item.description" class="text-xs mt-1">
-          {{ item.description }}
-        </div>
+          >
+            <div class="text-base font-normal pl-2">
+              <div class="flex justify-between">
+                <div class="flex items-baseline">
+                  <span
+                    v-if="item.required !== false"
+                    class="text-red-500 absolute -ml-2 mt-0.5 text-xs"
+                    >*</span
+                  >
+                  <span>{{ key }}</span>
+                  <span class="ml-2 text-xs text-gray-500">{{
+                    item.type
+                  }}</span>
+                  <span
+                    v-if="item.type === 'array'"
+                    class="text-xs text-gray-500"
+                    >[{{ item.items.type }}]</span
+                  >
+                  <span v-if="item.default" class="ml-2 text-xs text-gray-500"
+                    >Defaults to {{ item.default }}</span
+                  >
+                </div>
+                <Input
+                  :type="item.type"
+                  :value="item.default"
+                  :class="
+                    classnames(
+                      'transition-opacity',
+                      input ? 'opacity-100' : 'opacity-0'
+                    )
+                  "
+                  @change="(val) => handleChange(key, val)"
+                />
+              </div>
+              <div v-if="item.description" class="text-xs mt-1">
+                {{ item.description }}
+              </div>
+            </div>
+          </summary>
+          <div v-if="isComplex(item)" class="daisy-collapse-content -mb-6 px-3">
+            <api-params v-if="item.type === 'object'" :data="item.properties" />
+            <api-params v-else :data="item.items.properties" />
+          </div>
+        </details>
       </div>
     </div>
   </div>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'api-params'
+}
+</script>
+
 <script setup lang="ts">
 import classnames from 'classnames'
 import { computed, reactive } from 'vue'
@@ -71,6 +106,10 @@ const params = computed<Record<string, Data>>(() => {
   return JSON.parse(decodeURIComponent(props.data))
 })
 
+const isComplex = (item: Data) =>
+  item.type === 'object' ||
+  (item.type === 'array' && item.items.type === 'object')
+
 const getDefaultValue = (data: Data) => {
   if (data.type !== 'file' || !data.default) {
     return data.default

.vitepress/theme/types/index.ts

@@ -1,15 +1,23 @@
-export interface Data {
-  type:
-    | 'string'
-    | 'integer'
-    | 'long'
-    | 'number'
-    | 'boolean'
-    | 'object'
-    | 'array'
-    | 'null'
-    | 'file'
+interface Common {
   description?: string
   required?: boolean
   default?: string
 }
+
+interface BaseData extends Common {
+  type: 'string' | 'integer' | 'long' | 'number' | 'boolean' | 'null' | 'file'
+}
+
+export interface ObjectData extends Common {
+  type: 'object'
+  properties: {
+    [key: string]: Data
+  }
+}
+
+export interface ArrayData extends Common {
+  type: 'array'
+  items: Data
+}
+
+export type Data = BaseData | ObjectData | ArrayData