refactor: 删除 use-safe-n-form-auto-imports.tsx 文件
This commit is contained in:
@@ -1,121 +0,0 @@
|
||||
/**
|
||||
* https://www.naiveui.com/zh-CN/os-theme/components/form
|
||||
*
|
||||
* FIXME: `NForm` 和 `NFormItem` 的 slots 还没有实现。`NFormItemGi`组件。
|
||||
*/
|
||||
|
||||
import { get, set } from 'lodash-es';
|
||||
import type { FormInst, FormItemProps, FormProps } from 'naive-ui';
|
||||
import { NForm, NFormItem, formItemProps, NInput, formProps } from 'naive-ui';
|
||||
import type { Get, Paths } from 'type-fest';
|
||||
import type { SlotsType } from 'vue';
|
||||
import { Comment } from 'vue';
|
||||
|
||||
type UseSafeNFormOptions<FormValue> = {
|
||||
initialFormValue?: FormValue;
|
||||
};
|
||||
|
||||
export function useSafeNForm<T extends Record<string, any> = Record<string, unknown>>(
|
||||
options: UseSafeNFormOptions<T> = {},
|
||||
) {
|
||||
const formInst = ref<FormInst | null>(null);
|
||||
const formValue = ref<T>(structuredClone(toRaw(options.initialFormValue)) || ({} as T));
|
||||
|
||||
// 创建类型安全的 Form 组件
|
||||
type SafeNFormProps = FormProps;
|
||||
|
||||
type SafeNFormSlots = SlotsType<{
|
||||
default?: { count?: number };
|
||||
}>;
|
||||
|
||||
const SafeNForm = defineComponent<SafeNFormProps, /* Emits */ [], /* EE */ never, SafeNFormSlots>(
|
||||
(props, ctx) => {
|
||||
return () => (
|
||||
<NForm
|
||||
{...props}
|
||||
model={formValue.value}
|
||||
ref={(inst) => {
|
||||
formInst.value = inst as unknown as FormInst;
|
||||
}}
|
||||
>
|
||||
{ctx.slots.default?.({})}
|
||||
</NForm>
|
||||
);
|
||||
},
|
||||
{
|
||||
name: 'SafeNForm',
|
||||
inheritAttrs: true,
|
||||
props: formProps,
|
||||
},
|
||||
);
|
||||
// <<<<<
|
||||
|
||||
// >>>>> 创建类型安全的 FormItem 组件
|
||||
type SafeNFormItemProps<P extends Paths<T> & string> = FormItemProps & {
|
||||
path: P;
|
||||
};
|
||||
|
||||
type SafeNFormItemDefaultSlot<P extends Paths<T> & string> = {
|
||||
value: Get<T, P>;
|
||||
setValue: (val: Get<T, P>) => void;
|
||||
};
|
||||
|
||||
const SafeNFormItemImpl = defineComponent<
|
||||
SafeNFormItemProps<Paths<T> & string>,
|
||||
/* Emits */ [],
|
||||
/* EE */ never,
|
||||
SlotsType<{ default: SafeNFormItemDefaultSlot<Paths<T> & string> }>
|
||||
>(
|
||||
(props, ctx) => {
|
||||
return () => {
|
||||
const value = get(formValue.value, props.path);
|
||||
function setValue(val: typeof value) {
|
||||
set(formValue.value, props.path, val);
|
||||
}
|
||||
|
||||
const defaultSlotContent = ctx.slots.default?.({
|
||||
value,
|
||||
setValue,
|
||||
});
|
||||
|
||||
// 如果没有提供默认 slot 内容,则渲染一个 NInput 作为默认输入组件
|
||||
const renderDefaultNInput = defaultSlotContent?.some((v) => v.type !== Comment) ? null : (
|
||||
<NInput value={value} onUpdate:value={setValue} />
|
||||
);
|
||||
|
||||
return (
|
||||
<NFormItem {...props} path={props.path}>
|
||||
{defaultSlotContent}
|
||||
{renderDefaultNInput}
|
||||
</NFormItem>
|
||||
);
|
||||
};
|
||||
},
|
||||
{
|
||||
name: 'SafeNFormItem',
|
||||
inheritAttrs: false,
|
||||
props: Object.keys(formItemProps) as unknown as [keyof FormItemProps],
|
||||
},
|
||||
);
|
||||
|
||||
// Expose a generic constructor so template literals narrow `path`.
|
||||
type SafeNFormItemComponent = {
|
||||
new <P extends Paths<T> & string>(
|
||||
props: SafeNFormItemProps<P>,
|
||||
): {
|
||||
$props: SafeNFormItemProps<P>;
|
||||
$slots: {
|
||||
default?: (scope: SafeNFormItemDefaultSlot<P>) => VNode[];
|
||||
};
|
||||
};
|
||||
};
|
||||
const SafeNFormItem = SafeNFormItemImpl as SafeNFormItemComponent;
|
||||
// <<<<<
|
||||
|
||||
return {
|
||||
formValue,
|
||||
SafeNForm,
|
||||
SafeNFormItem,
|
||||
formInst,
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user