docs: improve props types (#588)

docs/components/content/ComponentProps.vue

@@ -1,20 +1,7 @@
 <template>
   <div>
     <FieldGroup>
-      <Field v-for="prop in metaProps" :key="prop.name" v-bind="prop">
-        <code v-if="prop.default">{{ prop.default }}</code>
-
-        <Collapsible v-if="prop.schema?.kind === 'array' && prop.schema?.schema?.filter(schema => schema.kind === 'object').length">
-          <FieldGroup v-for="schema in prop.schema.schema" :key="schema.name" class="!mt-0">
-            <Field v-for="subProp in Object.values(schema.schema)" :key="(subProp as any).name" v-bind="subProp" />
-          </FieldGroup>
-        </Collapsible>
-        <Collapsible v-else-if="prop.schema?.kind === 'object' && Object.values(prop.schema.schema)?.length">
-          <FieldGroup class="!mt-0">
-            <Field v-for="subProp in Object.values(prop.schema.schema)" :key="(subProp as any).name" v-bind="subProp" />
-          </FieldGroup>
-        </Collapsible>
-      </Field>
+      <ComponentPropsField v-for="prop in meta?.meta?.props" :key="prop.name" :prop="prop" />
     </FieldGroup>
   </div>
 </template>
@@ -34,8 +21,4 @@ const camelName = useCamelCase(slug)
 const name = `U${useUpperFirst(camelName)}`
 
 const meta = await fetchComponentMeta(name)
-
-const metaProps = computed(() => useSortBy(meta?.meta?.props || [], [
-  prop => ['string', 'number', 'boolean', 'any'].indexOf(prop.type)
-]))
 </script>

docs/components/content/ComponentPropsField.vue

@@ -0,0 +1,43 @@
+<template>
+  <Field v-bind="prop">
+    <code v-if="prop.default">{{ prop.default }}</code>
+
+    <Collapsible v-if="prop.schema?.kind === 'array' && prop.schema?.schema?.filter(schema => schema.kind === 'object').length">
+      <FieldGroup v-for="schema in prop.schema.schema" :key="schema.name" class="!mt-0">
+        <ComponentPropsField v-for="subProp in Object.values(schema.schema)" :key="(subProp as any).name" :prop="subProp" />
+      </FieldGroup>
+    </Collapsible>
+    <Collapsible v-else-if="prop.schema?.kind === 'array' && prop.schema?.schema?.filter(schema => schema.kind === 'array').length">
+      <FieldGroup v-for="schema in prop.schema.schema" :key="schema.name" class="!mt-0">
+        <template v-for="subSchema in schema.schema" :key="subSchema.name">
+          <ComponentPropsField v-for="subProp in Object.values(subSchema.schema)" :key="(subProp as any).name" :prop="subProp" />
+        </template>
+      </FieldGroup>
+    </Collapsible>
+    <Collapsible v-else-if="prop.schema?.kind === 'object' && prop.schema.type !== 'Function' && Object.values(prop.schema.schema)?.length">
+      <FieldGroup class="!mt-0">
+        <ComponentPropsField v-for="subProp in Object.values(prop.schema.schema)" :key="(subProp as any).name" :prop="subProp" />
+      </FieldGroup>
+    </Collapsible>
+    <div v-else-if="prop.schema?.kind === 'enum' && prop.schema.type !== 'boolean' && startsWithCapital(prop.schema.type)" class="space-x-1 leading-7 -my-1">
+      <code v-for="value in prop.schema.schema" :key="value">{{ value }}</code>
+    </div>
+  </Field>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  prop: {
+    type: Object as PropType<any>,
+    default: () => ({})
+  }
+})
+
+function startsWithCapital (word) {
+  if (word.charAt(0).startsWith('"')) {
+    return false
+  }
+
+  return word.charAt(0) === word.charAt(0).toUpperCase()
+}
+</script>

src/runtime/components/elements/Dropdown.vue

@@ -58,7 +58,7 @@ import ULink from '../elements/Link.vue'
 import { usePopper } from '../../composables/usePopper'
 import { defuTwMerge } from '../../utils'
 import type { DropdownItem } from '../../types/dropdown'
-import type { PopperOptions } from '../../types'
+import type { PopperOptions } from '../../types/popper'
 import { useAppConfig } from '#imports'
 // TODO: Remove
 // @ts-expect-error
@@ -84,11 +84,9 @@ export default defineComponent({
       default: () => []
     },
     mode: {
-      type: String,
+      type: String as PropType<'click' | 'hover'>,
       default: 'click',
-      validator: (value: string) => {
-        return ['click', 'hover'].includes(value)
-      }
+      validator: (value: string) => ['click', 'hover'].includes(value)
     },
     disabled: {
       type: Boolean,

src/runtime/components/forms/Form.vue

@@ -10,7 +10,7 @@ import { useEventBus } from '@vueuse/core'
 import type { ZodSchema } from 'zod'
 import type { ValidationError as JoiError, Schema as JoiSchema } from 'joi'
 import type { ObjectSchema as YupObjectSchema, ValidationError as YupError } from 'yup'
-import type { FormError, FormEvent, FormEventType, FormSubmitEvent, Form } from '../../types'
+import type { FormError, FormEvent, FormEventType, FormSubmitEvent, Form } from '../../types/form'
 
 export default defineComponent({
   props: {

src/runtime/components/forms/FormGroup.vue

@@ -23,7 +23,7 @@ import { computed, defineComponent, provide, inject } from 'vue'
 import type { PropType } from 'vue'
 import { omit } from 'lodash-es'
 import { twMerge } from 'tailwind-merge'
-import type { FormError } from '../../types'
+import type { FormError } from '../../types/form'
 import { defuTwMerge } from '../../utils'
 import { useAppConfig } from '#imports'
 // TODO: Remove

src/runtime/components/forms/SelectMenu.vue

@@ -138,7 +138,7 @@ import UAvatar from '../elements/Avatar.vue'
 import { defuTwMerge } from '../../utils'
 import { usePopper } from '../../composables/usePopper'
 import { useFormGroup } from '../../composables/useFormGroup'
-import type { PopperOptions } from '../../types'
+import type { PopperOptions } from '../../types/popper'
 import { useAppConfig } from '#imports'
 // TODO: Remove
 // @ts-expect-error

src/runtime/components/navigation/CommandPalette.vue

@@ -173,7 +173,7 @@ export default defineComponent({
       default: 200
     },
     fuse: {
-      type: Object as PropType<Partial<UseFuseOptions<Command>>>,
+      type: Object as PropType<UseFuseOptions<Command>>,
       default: () => ({})
     },
     ui: {

src/runtime/components/overlays/ContextMenu.vue

@@ -18,7 +18,7 @@ import { omit } from 'lodash-es'
 import { twMerge, twJoin } from 'tailwind-merge'
 import { usePopper } from '../../composables/usePopper'
 import { defuTwMerge } from '../../utils'
-import type { PopperOptions } from '../../types'
+import type { PopperOptions } from '../../types/popper'
 import { useAppConfig } from '#imports'
 // TODO: Remove
 // @ts-expect-error

src/runtime/components/overlays/Notification.vue

@@ -47,7 +47,7 @@ import UIcon from '../elements/Icon.vue'
 import UAvatar from '../elements/Avatar.vue'
 import UButton from '../elements/Button.vue'
 import { useTimer } from '../../composables/useTimer'
-import type { NotificationAction } from '../../types'
+import type { NotificationAction } from '../../types/notification'
 import type { Avatar } from '../../types/avatar'
 import type { Button } from '../../types/button'
 import { defuTwMerge } from '../../utils'

src/runtime/components/overlays/Notifications.vue

@@ -25,7 +25,7 @@ import { twMerge, twJoin } from 'tailwind-merge'
 import UNotification from './Notification.vue'
 import { useToast } from '../../composables/useToast'
 import { defuTwMerge } from '../../utils'
-import type { Notification } from '../../types'
+import type { Notification } from '../../types/notification'
 import { useState, useAppConfig } from '#imports'
 // TODO: Remove
 // @ts-expect-error

src/runtime/components/overlays/Popover.vue

@@ -34,7 +34,7 @@ import { twMerge } from 'tailwind-merge'
 import { Popover as HPopover, PopoverButton as HPopoverButton, PopoverPanel as HPopoverPanel } from '@headlessui/vue'
 import { usePopper } from '../../composables/usePopper'
 import { defuTwMerge } from '../../utils'
-import type { PopperOptions } from '../../types'
+import type { PopperOptions } from '../../types/popper'
 import { useAppConfig } from '#imports'
 // TODO: Remove
 // @ts-expect-error
@@ -51,11 +51,9 @@ export default defineComponent({
   inheritAttrs: false,
   props: {
     mode: {
-      type: String,
+      type: String as PropType<'click' | 'hover'>,
       default: 'click',
-      validator: (value: string) => {
-        return ['click', 'hover'].includes(value)
-      }
+      validator: (value: string) => ['click', 'hover'].includes(value)
     },
     disabled: {
       type: Boolean,

src/runtime/components/overlays/Slideover.vue

@@ -46,7 +46,7 @@ export default defineComponent({
       default: false
     },
     side: {
-      type: String,
+      type: String as PropType<'left' | 'right'>,
       default: 'right',
       validator: (value: string) => ['left', 'right'].includes(value)
     },

src/runtime/components/overlays/Tooltip.vue

@@ -32,7 +32,7 @@ import { twMerge } from 'tailwind-merge'
 import UKbd from '../elements/Kbd.vue'
 import { usePopper } from '../../composables/usePopper'
 import { defuTwMerge } from '../../utils'
-import type { PopperOptions } from '../../types'
+import type { PopperOptions } from '../../types/popper'
 import { useAppConfig } from '#imports'
 // TODO: Remove
 // @ts-expect-error

src/runtime/composables/useFormGroup.ts

@@ -1,6 +1,6 @@
 import { inject, ref } from 'vue'
 import { type UseEventBusReturn, useDebounceFn } from '@vueuse/core'
-import type { FormEvent, FormEventType } from '../types'
+import type { FormEvent, FormEventType } from '../types/form'
 
 export const useFormGroup = () => {
     const formBus = inject<UseEventBusReturn<FormEvent, string> | undefined>('form-events', undefined)

src/runtime/composables/usePopper.ts

@@ -9,7 +9,7 @@ import preventOverflow from '@popperjs/core/lib/modifiers/preventOverflow'
 import computeStyles from '@popperjs/core/lib/modifiers/computeStyles'
 import eventListeners from '@popperjs/core/lib/modifiers/eventListeners'
 import { MaybeElement, unrefElement } from '@vueuse/core'
-import type { PopperOptions } from '../types'
+import type { PopperOptions } from '../types/popper'
 
 export const createPopper = popperGenerator({
   defaultModifiers: [...defaultModifiers, offset, flip, preventOverflow, computeStyles, eventListeners]

src/runtime/composables/useToast.ts

@@ -1,4 +1,4 @@
-import type { Notification } from '../types'
+import type { Notification } from '../types/notification'
 import { useState } from '#imports'
 
 export function useToast () {