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

feat: export field component, expose more slotprops

Browse Source
This commit is contained in:
zernonia 2024-04-18 17:18:40 +08:00
parent 318d4c8643
commit 7370383fbe
11 changed files with 159 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,13 +1,12 @@
<script setup lang="ts">
import { h } from 'vue'
import * as z from 'zod'
import { h, reactive } from 'vue'
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
import * as z from 'zod'
import AutoFormField from '../ui/auto-form/AutoFormField.vue'
import { Button } from '@/lib/registry/new-york/ui/button'
import { toast } from '@/lib/registry/new-york/ui/toast'
import { AutoForm, getBaseSchema, getBaseType } from '@/lib/registry/new-york/ui/auto-form'
import type { Config } from '@/lib/registry/new-york/ui/auto-form'
import { AutoForm, AutoFormField } from '@/lib/registry/new-york/ui/auto-form'
enum Sports {
Football = 'Football/Soccer',
@ -115,14 +114,11 @@ const onSubmit = handleSubmit((values) => {
description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
})
})
</script>
<template>
<AutoForm
class="w-2/3 space-y-6"
:schema="schema"
:field-config="{
const config
= reactive({
username: {
label: '123',
description: 'Test description',
inputProps: {
id: '123',
@ -167,7 +163,14 @@ const onSubmit = handleSubmit((values) => {
},
},
},
}"
}) as Config<z.infer<typeof schema>>
</script>
<template>
<AutoForm
class="w-2/3 space-y-6"
:schema="schema"
:field-config="config"
@submit="onSubmit"
>
<template #username="componentField">

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

@ -10,6 +10,10 @@ const props = defineProps<{
fieldConfig?: Config<z.infer<T>>
}>()
const emits = defineEmits<{
submit: [event: Event]
}>()
const shapes = computed(() => {
// @ts-expect-error ignore {} not assignable to object
const val: { [key in keyof T]: Shape } = {}
@ -33,11 +37,11 @@ const shapes = computed(() => {
</script>
<template>
<form>
<form @submit="emits('submit', $event)">
<template v-for="(shape, key) of shapes" :key="key">
<slot
:shape="shape"
:name="key.toString()"
:name="key.toString() as keyof z.infer<T>"
:config="fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem"
>
<AutoFormField

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

@ -14,12 +14,14 @@ defineProps<{
</script>
<template>
<FormField v-slot="{ componentField }" :name="name">
<FormField v-slot="slotProps" :name="name">
<FormItem>
<div class="space-y-0 mb-3 flex items-center gap-3">
<FormControl>
<Switch v-if="config?.component === 'switch'" v-bind="{ ...componentField }" />
<Checkbox v-else v-bind="{ ...componentField }" />
<slot v-bind="slotProps">
<Switch v-if="config?.component === 'switch'" v-bind="{ ...slotProps.componentField }" />
<Checkbox v-else v-bind="{ ...slotProps.componentField }" />
</slot>
</FormControl>
<AutoFormLabel v-if="!config?.hideLabel" :required="required">
{{ config?.label || beautifyObjectName(name) }}

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

@ -23,12 +23,13 @@ const df = new DateFormatter('en-US', {
</script>
<template>
<FormField v-slot="{ componentField }" :name="name">
<FormField v-slot="slotProps" :name="name">
<FormItem>
<AutoFormLabel v-if="!config?.hideLabel" :required="required">
{{ config?.label || beautifyObjectName(name) }}
</AutoFormLabel>
<FormControl>
<slot v-bind="slotProps">
<div>
<Popover>
<PopoverTrigger as-child>
@ -36,18 +37,19 @@ const df = new DateFormatter('en-US', {
variant="outline"
:class="cn(
'w-full justify-start text-left font-normal',
!componentField.modelValue && 'text-muted-foreground',
!slotProps.componentField.modelValue && 'text-muted-foreground',
)"
>
<CalendarIcon class="mr-2 h-4 w-4" />
{{ componentField.modelValue ? df.format(componentField.modelValue.toDate(getLocalTimeZone())) : "Pick a date" }}
{{ slotProps.componentField.modelValue ? df.format(slotProps.componentField.modelValue.toDate(getLocalTimeZone())) : "Pick a date" }}
</Button>
</PopoverTrigger>
<PopoverContent class="w-auto p-0">
<Calendar initial-focus v-bind="{ ...componentField }" />
<Calendar initial-focus v-bind="slotProps.componentField" />
</PopoverContent>
</Popover>
</div>
</slot>
</FormControl>
<FormDescription v-if="config?.description">

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

@ -19,20 +19,21 @@ const computedOptions = computed(() => props.config?.enumProps?.options || props
</script>
<template>
<FormField v-slot="{ componentField }" :name="name">
<FormField v-slot="slotProps" :name="name">
<FormItem>
<AutoFormLabel v-if="!config?.hideLabel" :required="required">
{{ config?.label || beautifyObjectName(name) }}
</AutoFormLabel>
<FormControl>
<RadioGroup v-if="config?.component === 'radio'" :orientation="'vertical'" v-bind="{ ...componentField }">
<slot v-bind="slotProps">
<RadioGroup v-if="config?.component === 'radio'" :orientation="'vertical'" v-bind="{ ...slotProps.componentField }">
<div v-for="(option, index) in computedOptions" :key="option" class="mb-2 flex items-center gap-3 space-y-0">
<RadioGroupItem :id="`${option}-${index}`" :value="option" />
<Label :for="`${option}-${index}`">{{ beautifyObjectName(option) }}</Label>
</div>
</RadioGroup>
<Select v-else v-bind="{ ...componentField }">
<Select v-else v-bind="{ ...slotProps.componentField }">
<SelectTrigger class="w-full">
<SelectValue :placeholder="config?.enumProps?.placeholder" />
</SelectTrigger>
@ -42,6 +43,7 @@ const computedOptions = computed(() => props.config?.enumProps?.options || props
</SelectItem>
</SelectContent>
</Select>
</slot>
</FormControl>
<FormDescription v-if="config?.description">

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

@ -28,21 +28,23 @@ async function parseFileAsString(file: File | undefined): Promise<string> {
</script>
<template>
<FormField v-slot="{ componentField }" :name="name">
<FormField v-slot="slotProps" :name="name">
<FormItem v-bind="$attrs">
<AutoFormLabel v-if="!config?.hideLabel" :required="required">
{{ config?.label || beautifyObjectName(name) }}
</AutoFormLabel>
<FormControl>
<slot v-bind="slotProps">
<Input
type="file"
v-bind="{ ...config?.inputProps }"
@change="async (ev: InputEvent) => {
const file = (ev.target as HTMLInputElement).files?.[0]
const parsed = await parseFileAsString(file)
componentField.onInput(parsed)
slotProps.componentField.onInput(parsed)
}"
/>
</slot>
</FormControl>
<FormDescription v-if="config?.description">
{{ config.description }}

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

@ -14,14 +14,16 @@ defineProps<{
</script>
<template>
<FormField v-slot="{ componentField }" :name="name">
<FormField v-slot="slotProps" :name="name">
<FormItem v-bind="$attrs">
<AutoFormLabel v-if="!config?.hideLabel" :required="required">
{{ config?.label || beautifyObjectName(name) }}
</AutoFormLabel>
<FormControl>
<Textarea v-if="config?.component === 'textarea'" type="text" v-bind="{ ...componentField, ...config?.inputProps }" />
<Input v-else type="text" v-bind="{ ...componentField, ...config?.inputProps }" />
<slot v-bind="slotProps">
<Textarea v-if="config?.component === 'textarea'" type="text" v-bind="{ ...slotProps.componentField, ...config?.inputProps }" />
<Input v-else type="text" v-bind="{ ...slotProps.componentField, ...config?.inputProps }" />
</slot>
</FormControl>
<FormDescription v-if="config?.description">
{{ config.description }}

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

@ -17,13 +17,15 @@ defineProps<{
</script>
<template>
<FormField v-slot="{ componentField }" :name="name">
<FormField v-slot="slotProps" :name="name">
<FormItem>
<AutoFormLabel v-if="!config?.hideLabel" :required="required">
{{ config?.label || beautifyObjectName(name) }}
</AutoFormLabel>
<FormControl>
<Input type="number" v-bind="{ ...$attrs, ...componentField, ...config?.inputProps }" />
<slot v-bind="slotProps">
<Input type="number" v-bind="{ ...slotProps.componentField, ...config?.inputProps }" />
</slot>
</FormControl>
<FormDescription v-if="config?.description">
{{ config.description }}

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

@ -49,6 +49,8 @@ const shapes = computed(() => {
</script>
<template>
<section>
<slot v-bind="props">
<Accordion type="multiple" class="w-full" collapsible>
<AccordionItem :value="name" class="border-none">
<AccordionTrigger class="text-base">
@ -65,4 +67,6 @@ const shapes = computed(() => {
</AccordionContent>
</AccordionItem>
</Accordion>
</slot>
</section>
</template>

7
apps/www/src/lib/registry/new-york/ui/auto-form/fields/index.ts Normal file
View File

@ -0,0 +1,7 @@
export { default as AutoFormFieldBoolean } from './Boolean.vue'
export { default as AutoFormFieldDate } from './Date.vue'
export { default as AutoFormFieldEnum } from './Enum.vue'
export { default as AutoFormFieldFile } from './File.vue'
export { default as AutoFormFieldInput } from './Input.vue'
export { default as AutoFormFieldNumber } from './Number.vue'
export { default as AutoFormFieldObject } from './Object.vue'

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

@ -1,2 +1,6 @@
export { default as AutoForm } from './AutoForm.vue'
export { default as AutoFormField } from './AutoFormField.vue'
export { getObjectFormSchema, getBaseSchema, getBaseType, getDefaultValues } from './utils'
export type { Config, ConfigItem } from './interface'
export * from './fields'