@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
70 lines (69 loc) • 2.39 kB
TypeScript
import { ComputedRef, InjectionKey, Ref } from 'vue';
import { ComponentSize, ComponentState } from '@vexip-ui/config';
import { EventEmitter } from '@vexip-ui/utils';
import { Rule } from './validator';
export type FormLabelAlign = 'right' | 'top' | 'left';
export type SubmitMethod = 'get' | 'post' | 'put' | 'delete';
export interface FormProps {
method: SubmitMethod;
action: string;
model: Record<string, any>;
rules: Record<string, any>;
labelWidth: number | 'auto';
labelAlign: FormLabelAlign;
allRequired: boolean;
labelSuffix: string;
hideAsterisk: boolean;
validateAll: boolean;
hideLabel: boolean;
disabled: boolean;
loading: boolean;
size: ComponentSize;
inline: boolean;
}
export interface FormItemProps {
label: string;
prop: string;
rules: Rule | Rule[];
labelWidth: number | 'auto';
required: boolean;
htmlFor: string;
errorTransition: string;
defaultValue: unknown;
hideErrorTip: boolean;
validateAll: boolean;
hideAsterisk: boolean;
}
export interface FieldOptions {
prop: ComputedRef<string>;
idFor: ComputedRef<string>;
labelId: ComputedRef<string>;
state: ComputedRef<ComponentState>;
disabled: ComputedRef<boolean>;
loading: ComputedRef<boolean>;
size: ComputedRef<ComponentSize>;
emitter: EventEmitter;
labelWidth: Ref<number>;
validate: () => Promise<string[] | null>;
reset: () => boolean;
clearError: () => void;
getValue: (defaultValue?: unknown) => unknown;
setValue: (value: unknown, strict?: boolean) => void;
sync: (instance: any) => void;
unSync: (instance: any) => void;
}
export interface FormActions {
getLabelWidth: () => number;
validate: () => Promise<string[]>;
validateFields: (props: string | string[]) => Promise<string[]>;
reset: () => void;
resetFields: (props: string | string[]) => void;
clearError: () => void;
clearFieldsError: (props: string | string[]) => void;
}
export declare const FORM_PROPS: InjectionKey<Partial<FormProps>>;
export declare const FORM_FIELDS: InjectionKey<Set<FieldOptions>>;
export declare const FORM_ACTIONS: InjectionKey<FormActions>;
export declare const FIELD_OPTIONS: InjectionKey<FieldOptions>;
export declare const submitMethods: readonly SubmitMethod[];
export declare const labelAligns: readonly FormLabelAlign[];