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