Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: more props for form field

Browse Source
This commit is contained in:
zernonia 2024-04-18 15:10:01 +08:00
parent 49ad6c85e4
commit 318d4c8643
11 changed files with 29 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/www/src/lib/registry/new-york/example/AutoForm.vue
View File

@ -91,9 +91,9 @@ const schema = z.object({
subSubObject: z
.object({
subSubField: z.string().default('Sub Sub Field'),
})
.describe('Sub Sub Object Description'),
}),
}),
}).describe('123 Description'),
optionalSubObject: z
.object({
optionalSubField: z.string(),

14
apps/www/src/lib/registry/new-york/ui/auto-form/AutoForm.vue
View File

@ -1,8 +1,8 @@
<script setup lang="ts" generic="U extends ZodRawShape, T extends ZodObject<U>">
import { computed } from 'vue'
import type { ZodAny, ZodObject, ZodRawShape, z } from 'zod'
import { getBaseType, getDefaultValueInZodStack } from './utils'
import type { Config, ConfigItem } from './interface'
import { getBaseSchema, getBaseType, getDefaultValueInZodStack } from './utils'
import type { Config, ConfigItem, Shape } from './interface'
import AutoFormField from './AutoFormField.vue'
const props = defineProps<{
@ -12,15 +12,7 @@ const props = defineProps<{
const shapes = computed(() => {
// @ts-expect-error ignore {} not assignable to object
const val: {
[key in keyof T]: {
type: string
default: any
required?: boolean
options?: string[]
schema?: ZodAny
}
} = {}
const val: { [key in keyof T]: Shape } = {}
const shape = props.schema.shape
Object.keys(shape).forEach((name) => {
const item = shape[name] as ZodAny

9
apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormField.vue
View File

@ -1,16 +1,11 @@
<script setup lang="ts" generic="U extends ZodAny">
import type { ZodAny } from 'zod'
import type { Config, ConfigItem } from './interface'
import type { Config, ConfigItem, Shape } from './interface'
import { DEFAULT_ZOD_HANDLERS, INPUT_COMPONENTS } from './constant'
defineProps<{
name: string
shape: {
type: string
required?: boolean
options?: any[]
schema?: ZodAny
}
shape: Shape
config?: ConfigItem | Config<U>
}>()

2
apps/www/src/lib/registry/new-york/ui/auto-form/fields/Boolean.vue
View File

@ -21,7 +21,7 @@ defineProps<{
<Switch v-if="config?.component === 'switch'" v-bind="{ ...componentField }" />
<Checkbox v-else v-bind="{ ...componentField }" />
</FormControl>
<AutoFormLabel :required="required">
<AutoFormLabel v-if="!config?.hideLabel" :required="required">
{{ config?.label || beautifyObjectName(name) }}
</AutoFormLabel>
</div>

2
apps/www/src/lib/registry/new-york/ui/auto-form/fields/Date.vue
View File

@ -25,7 +25,7 @@ const df = new DateFormatter('en-US', {
<template>
<FormField v-slot="{ componentField }" :name="name">
<FormItem>
<AutoFormLabel :required="required">
<AutoFormLabel v-if="!config?.hideLabel" :required="required">
{{ config?.label || beautifyObjectName(name) }}
</AutoFormLabel>
<FormControl>

2
apps/www/src/lib/registry/new-york/ui/auto-form/fields/Enum.vue
View File

@ -21,7 +21,7 @@ const computedOptions = computed(() => props.config?.enumProps?.options || props
<template>
<FormField v-slot="{ componentField }" :name="name">
<FormItem>
<AutoFormLabel :required="required">
<AutoFormLabel v-if="!config?.hideLabel" :required="required">
{{ config?.label || beautifyObjectName(name) }}
</AutoFormLabel>
<FormControl>

2
apps/www/src/lib/registry/new-york/ui/auto-form/fields/File.vue
View File

@ -30,7 +30,7 @@ async function parseFileAsString(file: File | undefined): Promise<string> {
<template>
<FormField v-slot="{ componentField }" :name="name">
<FormItem v-bind="$attrs">
<AutoFormLabel :required="required">
<AutoFormLabel v-if="!config?.hideLabel" :required="required">
{{ config?.label || beautifyObjectName(name) }}
</AutoFormLabel>
<FormControl>

2
apps/www/src/lib/registry/new-york/ui/auto-form/fields/Input.vue
View File

@ -16,7 +16,7 @@ defineProps<{
<template>
<FormField v-slot="{ componentField }" :name="name">
<FormItem v-bind="$attrs">
<AutoFormLabel :required="required">
<AutoFormLabel v-if="!config?.hideLabel" :required="required">
{{ config?.label || beautifyObjectName(name) }}
</AutoFormLabel>
<FormControl>

2
apps/www/src/lib/registry/new-york/ui/auto-form/fields/Number.vue
View File

@ -19,7 +19,7 @@ defineProps<{
<template>
<FormField v-slot="{ componentField }" :name="name">
<FormItem>
<AutoFormLabel :required="required">
<AutoFormLabel v-if="!config?.hideLabel" :required="required">
{{ config?.label || beautifyObjectName(name) }}
</AutoFormLabel>
<FormControl>

2
apps/www/src/lib/registry/new-york/ui/auto-form/fields/Object.vue
View File

@ -52,7 +52,7 @@ const shapes = computed(() => {
<Accordion type="multiple" class="w-full" collapsible>
<AccordionItem :value="name" class="border-none">
<AccordionTrigger class="text-base">
{{ beautifyObjectName(name) }}
{{ schema?.description || beautifyObjectName(name) }}
</AccordionTrigger>
<AccordionContent class="p-2 space-y-5">
<template v-for="(shape, key) in shapes" :key="key">

15
apps/www/src/lib/registry/new-york/ui/auto-form/interface.ts
View File

@ -1,11 +1,24 @@
import type { InputHTMLAttributes, SelectHTMLAttributes } from 'vue'
import type { z } from 'zod'
import type { ZodAny, z } from 'zod'
import type { INPUT_COMPONENTS } from './constant'
export interface Shape {
type: string
default: any
required?: boolean
options?: string[]
schema?: ZodAny
}
export interface ConfigItem {
/** Value for the `FormLabel` */
label?: string
/** Value for the `FormDescription` */
description?: string
/** Pick which component to be rendered. */
component?: keyof typeof INPUT_COMPONENTS
/** Hide `FormLabel`. */
hideLabel?: boolean
inputProps?: InputHTMLAttributes
enumProps?: SelectHTMLAttributes & { options?: any[] }
}