UNPKG

hyb-naive

Version:

对naive-ui组件进行二次封装,主要包含Form表单组件,进行JSON化化配置处理,快速实现表单的录入和页面筛选器功能

724 lines (723 loc) 30.3 kB
import { FormInst, FormRules } from 'naive-ui'; import { HFormRule } from '..'; import { DefineComponent, CreateComponentPublicInstanceWithMixins, ExtractPropTypes, PropType, Ref, ComponentOptionsMixin, PublicProps, GlobalComponents, GlobalDirectives, ComponentProvideOptions } from 'vue'; import { LabelAlign, LabelPlacement, Size, FormValidateMessages } from 'naive-ui/es/form/src/interface'; import { Theme } from 'naive-ui/es/_mixins'; import { ExtractThemeOverrides } from 'naive-ui/es/_mixins/use-theme'; type ButtonProps = { text?: string; show?: boolean; disabled?: boolean; loading?: boolean; interceptEvent?: boolean; }; export type FormProps = { cols?: number; labelWidth?: number; labelPlacement?: 'left' | 'top'; size?: 'small' | 'medium' | 'large'; labelAlign?: 'left' | 'right'; disabled?: boolean; title?: string; rules: HFormRule[]; formData?: Record<string, any>; filterNullValue?: boolean; type?: 'FORM' | 'FILTER'; card?: boolean; immediateUpdate?: boolean; borderRadius?: number; searchFirstRow?: boolean; searchBtn?: { searchSpan?: number; search?: ButtonProps | boolean; reset?: ButtonProps | boolean; }; showFormBtn?: boolean; formBtn?: { cancel?: ButtonProps; confirm?: ButtonProps; }; initSearch?: boolean; }; declare function __VLS_template(): { attrs: Partial<{}>; slots: Partial<Record<string, (_: { formData: Record<string, any>; setFormData: (formData: Record<string, any>) => void; setValue: (field: string, value: any) => Promise<any>; setValues: (values: Record<string, any>) => Promise<any>; setRule: (field: string, rule: HFormRule) => HFormRule; getRule: (field: string) => HFormRule | undefined; mergeRule: (field: string, rule: HFormRule) => HFormRule; setOptions: (field: string, options: Array<{ label?: string; value?: any; [key: string]: any; }>) => Promise<any>; validate: () => Promise<Record<string, any>>; search: (formData?: Record<string, any>) => void; reset: () => void; rules: HFormRule[]; value?: any; rule?: HFormRule; }) => any>> & { search?(_: { formData: Record<string, any>; setFormData: (formData: Record<string, any>) => void; setValue: (field: string, value: any) => Promise<any>; setValues: (values: Record<string, any>) => Promise<any>; setRule: (field: string, rule: HFormRule) => HFormRule; getRule: (field: string) => HFormRule | undefined; mergeRule: (field: string, rule: HFormRule) => HFormRule; setOptions: (field: string, options: Array<{ label?: string; value?: any; [key: string]: any; }>) => Promise<any>; validate: () => Promise<Record<string, any>>; search: (formData?: Record<string, any>) => void; reset: () => void; rules: HFormRule[]; value?: any; rule?: HFormRule; }): any; }; refs: { formRef: CreateComponentPublicInstanceWithMixins<Readonly< ExtractPropTypes<{ readonly inline: BooleanConstructor; readonly labelWidth: PropType<number | string>; readonly labelAlign: PropType<LabelAlign>; readonly labelPlacement: { readonly type: PropType<LabelPlacement>; readonly default: "top"; }; readonly model: { readonly type: PropType<Record<string, any>>; readonly default: () => void; }; readonly rules: PropType<FormRules>; readonly disabled: BooleanConstructor; readonly size: PropType<Size>; readonly showRequireMark: { readonly type: PropType<boolean | undefined>; readonly default: undefined; }; readonly requireMarkPlacement: PropType<"left" | "right" | "right-hanging">; readonly showFeedback: { readonly type: BooleanConstructor; readonly default: true; }; readonly onSubmit: { readonly type: PropType<(e: Event) => void>; readonly default: (e: Event) => void; }; readonly showLabel: { readonly type: PropType<boolean | undefined>; readonly default: undefined; }; readonly validateMessages: PropType<Partial< FormValidateMessages>>; readonly theme: PropType<Theme<"Form", { blankHeightSmall: string; blankHeightMedium: string; blankHeightLarge: string; lineHeight: string; labelTextColor: string; asteriskColor: string; feedbackTextColorError: string; feedbackTextColorWarning: string; feedbackTextColor: string; feedbackPadding: string; feedbackHeightSmall: string; feedbackHeightMedium: string; feedbackHeightLarge: string; feedbackFontSizeSmall: string; feedbackFontSizeMedium: string; feedbackFontSizeLarge: string; labelFontSizeLeftSmall: string; labelFontSizeLeftMedium: string; labelFontSizeLeftLarge: string; labelFontSizeTopSmall: string; labelFontSizeTopMedium: string; labelFontSizeTopLarge: string; labelHeightSmall: string; labelHeightMedium: string; labelHeightLarge: string; labelPaddingVertical: string; labelPaddingHorizontal: string; labelTextAlignVertical: string; labelTextAlignHorizontal: string; labelFontWeight: string; }, any>>; readonly themeOverrides: PropType<ExtractThemeOverrides<Theme<"Form", { blankHeightSmall: string; blankHeightMedium: string; blankHeightLarge: string; lineHeight: string; labelTextColor: string; asteriskColor: string; feedbackTextColorError: string; feedbackTextColorWarning: string; feedbackTextColor: string; feedbackPadding: string; feedbackHeightSmall: string; feedbackHeightMedium: string; feedbackHeightLarge: string; feedbackFontSizeSmall: string; feedbackFontSizeMedium: string; feedbackFontSizeLarge: string; labelFontSizeLeftSmall: string; labelFontSizeLeftMedium: string; labelFontSizeLeftLarge: string; labelFontSizeTopSmall: string; labelFontSizeTopMedium: string; labelFontSizeTopLarge: string; labelHeightSmall: string; labelHeightMedium: string; labelHeightLarge: string; labelPaddingVertical: string; labelPaddingHorizontal: string; labelTextAlignVertical: string; labelTextAlignHorizontal: string; labelFontWeight: string; }, any>>>; readonly builtinThemeOverrides: PropType<ExtractThemeOverrides<Theme<"Form", { blankHeightSmall: string; blankHeightMedium: string; blankHeightLarge: string; lineHeight: string; labelTextColor: string; asteriskColor: string; feedbackTextColorError: string; feedbackTextColorWarning: string; feedbackTextColor: string; feedbackPadding: string; feedbackHeightSmall: string; feedbackHeightMedium: string; feedbackHeightLarge: string; feedbackFontSizeSmall: string; feedbackFontSizeMedium: string; feedbackFontSizeLarge: string; labelFontSizeLeftSmall: string; labelFontSizeLeftMedium: string; labelFontSizeLeftLarge: string; labelFontSizeTopSmall: string; labelFontSizeTopMedium: string; labelFontSizeTopLarge: string; labelHeightSmall: string; labelHeightMedium: string; labelHeightLarge: string; labelPaddingVertical: string; labelPaddingHorizontal: string; labelTextAlignVertical: string; labelTextAlignHorizontal: string; labelFontWeight: string; }, any>>>; }>> & Readonly<{}>, FormInst & { mergedClsPrefix: Ref<string, string>; }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, PublicProps, { readonly inline: boolean; readonly disabled: boolean; readonly onSubmit: (e: Event) => void; readonly labelPlacement: LabelPlacement; readonly model: Record<string, any>; readonly showRequireMark: boolean | undefined; readonly showFeedback: boolean; readonly showLabel: boolean | undefined; }, true, {}, {}, GlobalComponents, GlobalDirectives, string, {}, any, ComponentProvideOptions, { P: {}; B: {}; D: {}; C: {}; M: {}; Defaults: {}; }, Readonly< ExtractPropTypes<{ readonly inline: BooleanConstructor; readonly labelWidth: PropType<number | string>; readonly labelAlign: PropType<LabelAlign>; readonly labelPlacement: { readonly type: PropType<LabelPlacement>; readonly default: "top"; }; readonly model: { readonly type: PropType<Record<string, any>>; readonly default: () => void; }; readonly rules: PropType<FormRules>; readonly disabled: BooleanConstructor; readonly size: PropType<Size>; readonly showRequireMark: { readonly type: PropType<boolean | undefined>; readonly default: undefined; }; readonly requireMarkPlacement: PropType<"left" | "right" | "right-hanging">; readonly showFeedback: { readonly type: BooleanConstructor; readonly default: true; }; readonly onSubmit: { readonly type: PropType<(e: Event) => void>; readonly default: (e: Event) => void; }; readonly showLabel: { readonly type: PropType<boolean | undefined>; readonly default: undefined; }; readonly validateMessages: PropType<Partial< FormValidateMessages>>; readonly theme: PropType<Theme<"Form", { blankHeightSmall: string; blankHeightMedium: string; blankHeightLarge: string; lineHeight: string; labelTextColor: string; asteriskColor: string; feedbackTextColorError: string; feedbackTextColorWarning: string; feedbackTextColor: string; feedbackPadding: string; feedbackHeightSmall: string; feedbackHeightMedium: string; feedbackHeightLarge: string; feedbackFontSizeSmall: string; feedbackFontSizeMedium: string; feedbackFontSizeLarge: string; labelFontSizeLeftSmall: string; labelFontSizeLeftMedium: string; labelFontSizeLeftLarge: string; labelFontSizeTopSmall: string; labelFontSizeTopMedium: string; labelFontSizeTopLarge: string; labelHeightSmall: string; labelHeightMedium: string; labelHeightLarge: string; labelPaddingVertical: string; labelPaddingHorizontal: string; labelTextAlignVertical: string; labelTextAlignHorizontal: string; labelFontWeight: string; }, any>>; readonly themeOverrides: PropType<ExtractThemeOverrides<Theme<"Form", { blankHeightSmall: string; blankHeightMedium: string; blankHeightLarge: string; lineHeight: string; labelTextColor: string; asteriskColor: string; feedbackTextColorError: string; feedbackTextColorWarning: string; feedbackTextColor: string; feedbackPadding: string; feedbackHeightSmall: string; feedbackHeightMedium: string; feedbackHeightLarge: string; feedbackFontSizeSmall: string; feedbackFontSizeMedium: string; feedbackFontSizeLarge: string; labelFontSizeLeftSmall: string; labelFontSizeLeftMedium: string; labelFontSizeLeftLarge: string; labelFontSizeTopSmall: string; labelFontSizeTopMedium: string; labelFontSizeTopLarge: string; labelHeightSmall: string; labelHeightMedium: string; labelHeightLarge: string; labelPaddingVertical: string; labelPaddingHorizontal: string; labelTextAlignVertical: string; labelTextAlignHorizontal: string; labelFontWeight: string; }, any>>>; readonly builtinThemeOverrides: PropType<ExtractThemeOverrides<Theme<"Form", { blankHeightSmall: string; blankHeightMedium: string; blankHeightLarge: string; lineHeight: string; labelTextColor: string; asteriskColor: string; feedbackTextColorError: string; feedbackTextColorWarning: string; feedbackTextColor: string; feedbackPadding: string; feedbackHeightSmall: string; feedbackHeightMedium: string; feedbackHeightLarge: string; feedbackFontSizeSmall: string; feedbackFontSizeMedium: string; feedbackFontSizeLarge: string; labelFontSizeLeftSmall: string; labelFontSizeLeftMedium: string; labelFontSizeLeftLarge: string; labelFontSizeTopSmall: string; labelFontSizeTopMedium: string; labelFontSizeTopLarge: string; labelHeightSmall: string; labelHeightMedium: string; labelHeightLarge: string; labelPaddingVertical: string; labelPaddingHorizontal: string; labelTextAlignVertical: string; labelTextAlignHorizontal: string; labelFontWeight: string; }, any>>>; }>> & Readonly<{}>, FormInst & { mergedClsPrefix: Ref<string, string>; }, {}, {}, {}, { readonly inline: boolean; readonly disabled: boolean; readonly onSubmit: (e: Event) => void; readonly labelPlacement: LabelPlacement; readonly model: Record<string, any>; readonly showRequireMark: boolean | undefined; readonly showFeedback: boolean; readonly showLabel: boolean | undefined; }> | null; }; rootEl: any; }; type __VLS_TemplateResult = ReturnType<typeof __VLS_template>; declare const __VLS_component: DefineComponent<FormProps, { formData: Record<string, any>; setFormData: (formData: Record<string, any>) => void; setValue: (field: string, value: any) => Promise<any>; setValues: (values: Record<string, any>) => Promise<any>; setRule: (field: string, rule: HFormRule) => HFormRule; getRule: (field: string) => HFormRule | undefined; mergeRule: (field: string, rule: HFormRule) => HFormRule; setOptions: (field: string, options: Array<{ label?: string; value?: any; [key: string]: any; }>) => Promise<any>; validate: () => Promise<Record<string, any>>; search: (formData?: Record<string, any>) => void; reset: () => void; rules: HFormRule[]; value?: any; rule?: HFormRule; }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, { cancel: () => any; reset: (formData: Record<string, any>) => any; dataChange: (formData: Record<string, any>) => any; search: (formData: Record<string, any>) => any; confirm: (formData: Record<string, any>) => any; }, string, PublicProps, Readonly<FormProps> & Readonly<{ onCancel?: (() => any) | undefined; onReset?: ((formData: Record<string, any>) => any) | undefined; onDataChange?: ((formData: Record<string, any>) => any) | undefined; onSearch?: ((formData: Record<string, any>) => any) | undefined; onConfirm?: ((formData: Record<string, any>) => any) | undefined; }>, { labelWidth: number; labelPlacement: "left" | "top"; size: "small" | "medium" | "large"; labelAlign: "left" | "right"; disabled: boolean; filterNullValue: boolean; type: "FORM" | "FILTER"; card: boolean; immediateUpdate: boolean; borderRadius: number; searchFirstRow: boolean; searchBtn: { searchSpan?: number; search?: ButtonProps | boolean; reset?: ButtonProps | boolean; }; showFormBtn: boolean; }, {}, {}, {}, string, ComponentProvideOptions, false, { formRef: CreateComponentPublicInstanceWithMixins<Readonly< ExtractPropTypes<{ readonly inline: BooleanConstructor; readonly labelWidth: PropType<number | string>; readonly labelAlign: PropType<LabelAlign>; readonly labelPlacement: { readonly type: PropType<LabelPlacement>; readonly default: "top"; }; readonly model: { readonly type: PropType<Record<string, any>>; readonly default: () => void; }; readonly rules: PropType<FormRules>; readonly disabled: BooleanConstructor; readonly size: PropType<Size>; readonly showRequireMark: { readonly type: PropType<boolean | undefined>; readonly default: undefined; }; readonly requireMarkPlacement: PropType<"left" | "right" | "right-hanging">; readonly showFeedback: { readonly type: BooleanConstructor; readonly default: true; }; readonly onSubmit: { readonly type: PropType<(e: Event) => void>; readonly default: (e: Event) => void; }; readonly showLabel: { readonly type: PropType<boolean | undefined>; readonly default: undefined; }; readonly validateMessages: PropType<Partial< FormValidateMessages>>; readonly theme: PropType<Theme<"Form", { blankHeightSmall: string; blankHeightMedium: string; blankHeightLarge: string; lineHeight: string; labelTextColor: string; asteriskColor: string; feedbackTextColorError: string; feedbackTextColorWarning: string; feedbackTextColor: string; feedbackPadding: string; feedbackHeightSmall: string; feedbackHeightMedium: string; feedbackHeightLarge: string; feedbackFontSizeSmall: string; feedbackFontSizeMedium: string; feedbackFontSizeLarge: string; labelFontSizeLeftSmall: string; labelFontSizeLeftMedium: string; labelFontSizeLeftLarge: string; labelFontSizeTopSmall: string; labelFontSizeTopMedium: string; labelFontSizeTopLarge: string; labelHeightSmall: string; labelHeightMedium: string; labelHeightLarge: string; labelPaddingVertical: string; labelPaddingHorizontal: string; labelTextAlignVertical: string; labelTextAlignHorizontal: string; labelFontWeight: string; }, any>>; readonly themeOverrides: PropType<ExtractThemeOverrides<Theme<"Form", { blankHeightSmall: string; blankHeightMedium: string; blankHeightLarge: string; lineHeight: string; labelTextColor: string; asteriskColor: string; feedbackTextColorError: string; feedbackTextColorWarning: string; feedbackTextColor: string; feedbackPadding: string; feedbackHeightSmall: string; feedbackHeightMedium: string; feedbackHeightLarge: string; feedbackFontSizeSmall: string; feedbackFontSizeMedium: string; feedbackFontSizeLarge: string; labelFontSizeLeftSmall: string; labelFontSizeLeftMedium: string; labelFontSizeLeftLarge: string; labelFontSizeTopSmall: string; labelFontSizeTopMedium: string; labelFontSizeTopLarge: string; labelHeightSmall: string; labelHeightMedium: string; labelHeightLarge: string; labelPaddingVertical: string; labelPaddingHorizontal: string; labelTextAlignVertical: string; labelTextAlignHorizontal: string; labelFontWeight: string; }, any>>>; readonly builtinThemeOverrides: PropType<ExtractThemeOverrides<Theme<"Form", { blankHeightSmall: string; blankHeightMedium: string; blankHeightLarge: string; lineHeight: string; labelTextColor: string; asteriskColor: string; feedbackTextColorError: string; feedbackTextColorWarning: string; feedbackTextColor: string; feedbackPadding: string; feedbackHeightSmall: string; feedbackHeightMedium: string; feedbackHeightLarge: string; feedbackFontSizeSmall: string; feedbackFontSizeMedium: string; feedbackFontSizeLarge: string; labelFontSizeLeftSmall: string; labelFontSizeLeftMedium: string; labelFontSizeLeftLarge: string; labelFontSizeTopSmall: string; labelFontSizeTopMedium: string; labelFontSizeTopLarge: string; labelHeightSmall: string; labelHeightMedium: string; labelHeightLarge: string; labelPaddingVertical: string; labelPaddingHorizontal: string; labelTextAlignVertical: string; labelTextAlignHorizontal: string; labelFontWeight: string; }, any>>>; }>> & Readonly<{}>, FormInst & { mergedClsPrefix: Ref<string, string>; }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, PublicProps, { readonly inline: boolean; readonly disabled: boolean; readonly onSubmit: (e: Event) => void; readonly labelPlacement: LabelPlacement; readonly model: Record<string, any>; readonly showRequireMark: boolean | undefined; readonly showFeedback: boolean; readonly showLabel: boolean | undefined; }, true, {}, {}, GlobalComponents, GlobalDirectives, string, {}, any, ComponentProvideOptions, { P: {}; B: {}; D: {}; C: {}; M: {}; Defaults: {}; }, Readonly< ExtractPropTypes<{ readonly inline: BooleanConstructor; readonly labelWidth: PropType<number | string>; readonly labelAlign: PropType<LabelAlign>; readonly labelPlacement: { readonly type: PropType<LabelPlacement>; readonly default: "top"; }; readonly model: { readonly type: PropType<Record<string, any>>; readonly default: () => void; }; readonly rules: PropType<FormRules>; readonly disabled: BooleanConstructor; readonly size: PropType<Size>; readonly showRequireMark: { readonly type: PropType<boolean | undefined>; readonly default: undefined; }; readonly requireMarkPlacement: PropType<"left" | "right" | "right-hanging">; readonly showFeedback: { readonly type: BooleanConstructor; readonly default: true; }; readonly onSubmit: { readonly type: PropType<(e: Event) => void>; readonly default: (e: Event) => void; }; readonly showLabel: { readonly type: PropType<boolean | undefined>; readonly default: undefined; }; readonly validateMessages: PropType<Partial< FormValidateMessages>>; readonly theme: PropType<Theme<"Form", { blankHeightSmall: string; blankHeightMedium: string; blankHeightLarge: string; lineHeight: string; labelTextColor: string; asteriskColor: string; feedbackTextColorError: string; feedbackTextColorWarning: string; feedbackTextColor: string; feedbackPadding: string; feedbackHeightSmall: string; feedbackHeightMedium: string; feedbackHeightLarge: string; feedbackFontSizeSmall: string; feedbackFontSizeMedium: string; feedbackFontSizeLarge: string; labelFontSizeLeftSmall: string; labelFontSizeLeftMedium: string; labelFontSizeLeftLarge: string; labelFontSizeTopSmall: string; labelFontSizeTopMedium: string; labelFontSizeTopLarge: string; labelHeightSmall: string; labelHeightMedium: string; labelHeightLarge: string; labelPaddingVertical: string; labelPaddingHorizontal: string; labelTextAlignVertical: string; labelTextAlignHorizontal: string; labelFontWeight: string; }, any>>; readonly themeOverrides: PropType<ExtractThemeOverrides<Theme<"Form", { blankHeightSmall: string; blankHeightMedium: string; blankHeightLarge: string; lineHeight: string; labelTextColor: string; asteriskColor: string; feedbackTextColorError: string; feedbackTextColorWarning: string; feedbackTextColor: string; feedbackPadding: string; feedbackHeightSmall: string; feedbackHeightMedium: string; feedbackHeightLarge: string; feedbackFontSizeSmall: string; feedbackFontSizeMedium: string; feedbackFontSizeLarge: string; labelFontSizeLeftSmall: string; labelFontSizeLeftMedium: string; labelFontSizeLeftLarge: string; labelFontSizeTopSmall: string; labelFontSizeTopMedium: string; labelFontSizeTopLarge: string; labelHeightSmall: string; labelHeightMedium: string; labelHeightLarge: string; labelPaddingVertical: string; labelPaddingHorizontal: string; labelTextAlignVertical: string; labelTextAlignHorizontal: string; labelFontWeight: string; }, any>>>; readonly builtinThemeOverrides: PropType<ExtractThemeOverrides<Theme<"Form", { blankHeightSmall: string; blankHeightMedium: string; blankHeightLarge: string; lineHeight: string; labelTextColor: string; asteriskColor: string; feedbackTextColorError: string; feedbackTextColorWarning: string; feedbackTextColor: string; feedbackPadding: string; feedbackHeightSmall: string; feedbackHeightMedium: string; feedbackHeightLarge: string; feedbackFontSizeSmall: string; feedbackFontSizeMedium: string; feedbackFontSizeLarge: string; labelFontSizeLeftSmall: string; labelFontSizeLeftMedium: string; labelFontSizeLeftLarge: string; labelFontSizeTopSmall: string; labelFontSizeTopMedium: string; labelFontSizeTopLarge: string; labelHeightSmall: string; labelHeightMedium: string; labelHeightLarge: string; labelPaddingVertical: string; labelPaddingHorizontal: string; labelTextAlignVertical: string; labelTextAlignHorizontal: string; labelFontWeight: string; }, any>>>; }>> & Readonly<{}>, FormInst & { mergedClsPrefix: Ref<string, string>; }, {}, {}, {}, { readonly inline: boolean; readonly disabled: boolean; readonly onSubmit: (e: Event) => void; readonly labelPlacement: LabelPlacement; readonly model: Record<string, any>; readonly showRequireMark: boolean | undefined; readonly showFeedback: boolean; readonly showLabel: boolean | undefined; }> | null; }, any>; declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>; export default _default; type __VLS_WithTemplateSlots<T, S> = T & { new (): { $slots: S; }; };