diff --git a/src/utils/a2use.vue b/src/utils/a2use.vue index b5dc098..fe5a8d3 100644 --- a/src/utils/a2use.vue +++ b/src/utils/a2use.vue @@ -10,6 +10,7 @@ const { formValue, SafeNForm, SafeNFormItem, formRef } = useSafeNForm({ */ user: { name: '', + age: 0, }, phone: '', }, @@ -19,7 +20,7 @@ function handleSetUserName() { set(formValue.value, 'user.name', 'Alice'); } -function handleValidateClick_Safe_Form() { +function handleValidateClick() { formRef.value?.validate((errors) => { if (!errors) { window.$nMessage!.success('Valid'); @@ -29,19 +30,6 @@ function handleValidateClick_Safe_Form() { } }); } - -function handleValidateClick_Normal() { - formRefNormal.value?.validate((errors) => { - if (!errors) { - window.$nMessage!.success('Valid'); - } else { - console.log(errors); - window.$nMessage!.error('Invalid'); - } - }); -} - -const formRefNormal = useTemplateRef('formRefNormal'); diff --git a/src/utils/use-safe-n-form-auto-imports.tsx b/src/utils/use-safe-n-form-auto-imports.tsx index ba2193c..d91702b 100644 --- a/src/utils/use-safe-n-form-auto-imports.tsx +++ b/src/utils/use-safe-n-form-auto-imports.tsx @@ -16,6 +16,7 @@ export function useSafeNForm = Record(null); const formValue = ref(structuredClone(toRaw(options.initialFormValue)) || ({} as T)); + // 创建类型安全的 Form 组件 interface SafeNFormProps { disabled?: boolean; } @@ -23,7 +24,6 @@ export function useSafeNForm = Record; - // 创建类型安全的 Form 组件 const SafeNForm = defineComponent( (props, ctx) => { return () => ( @@ -48,31 +48,45 @@ export function useSafeNForm = Record>>>> 创建类型安全的 FormItem 组件 - interface SafeNFormItemProps { + + type SafeNFormItemProps

& string> = { label?: string; - path: Paths /* & string */; + path: P; placeholder?: string; - } - type SafeNFormItemSlots = SlotsType<{ - default: { - value: Get; - }; + }; + + type SafeNFormItemSlotScope

& string> = { + value: Get; + }; + + type SafeNFormItemSlotsDefinition

& string> = SlotsType<{ + default: SafeNFormItemSlotScope

; }>; - const SafeNFormItem = defineComponent< - SafeNFormItemProps, + type SafeNFormItemSlotFns

& string> = { + default?: (scope: SafeNFormItemSlotScope

) => any; + }; + + type SafeNFormItemComponent = new

& string>( + props: SafeNFormItemProps

, + ) => { + $props: SafeNFormItemProps

; + $slots: SafeNFormItemSlotFns

; + }; + + const SafeNFormItemImpl = defineComponent< + SafeNFormItemProps & string>, /* Emits */ [], /* EE */ never, - SafeNFormItemSlots + SafeNFormItemSlotsDefinition & string> >( (props, ctx) => { return () => { - const value = get(formValue.value, props.path) as Get; + const value = get(formValue.value, props.path) as Get; + const slots = ctx.slots; return ( - - {ctx.slots.default?.({ - value, - })} + + {slots.default?.({ value })} ); }; @@ -83,6 +97,7 @@ export function useSafeNForm = Record