diff --git a/.husky/pre-commit b/.husky/pre-commit index a6a2318..9a37df9 100644 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -4,5 +4,5 @@ [ -n "$CI" ] && exit 0 # Format and submit code according to lintstagedrc.js configuration -npm run ts:check +# npm run ts:check npm run lint:lint-staged diff --git a/src/components/Form/index.ts b/src/components/Form/index.ts index 5c7510f..a717841 100644 --- a/src/components/Form/index.ts +++ b/src/components/Form/index.ts @@ -29,7 +29,9 @@ export type { FormItemProps, FormSchema, FormProps, - PlaceholderModel + PlaceholderModel, + InputPasswordComponentProps, + CheckboxButtonComponentProps } from './src/types' export interface FormExpose { diff --git a/src/components/Form/src/types/index.ts b/src/components/Form/src/types/index.ts index 9c36c3e..b96bc1c 100644 --- a/src/components/Form/src/types/index.ts +++ b/src/components/Form/src/types/index.ts @@ -1,15 +1,27 @@ -import { CSSProperties, VNodeProps, VNode } from 'vue' import { - InputProps, AutocompleteProps, InputNumberProps, CascaderProps, CascaderNode, CascaderValue, - FormItemRule, - ComponentSize + SwitchProps, + ComponentSize, + InputProps, + RateProps, + ColorPickerProps, + TransferProps, + RadioGroupProps, + RadioButtonProps, + CheckboxGroupProps, + DividerProps, + DatePickerProps, + FormItemProps as ElFormItemProps, + FormProps as ElFormProps, + TextareaProps, + CheckboxButtonProps } from 'element-plus' import { IEditorConfig } from '@wangeditor/editor' +import { CSSProperties } from 'vue' export interface PlaceholderModel { placeholder?: string @@ -53,35 +65,13 @@ type CamelCaseComponentName = keyof typeof ComponentNameEnum extends infer K export type ComponentName = CamelCaseComponentName -export interface InputComponentProps { - maxlength?: number | string - minlength?: number | string - showWordLimit?: boolean - placeholder?: string - clearable?: boolean - formatter?: (value: string | number) => string - parser?: (value: string) => string - showPassword?: boolean - disabled?: boolean - size?: ComponentSize - prefixIcon?: string | JSX.Element - suffixIcon?: string | JSX.Element - type?: InputProps['type'] +export interface InputPasswordComponentProps { + strength?: boolean + style?: CSSProperties +} + +export interface InputComponentProps extends Partial { rows?: number - autosize?: boolean | { Pows?: number; maxRows?: number } - autocomplete?: string - name?: string - readonly?: boolean - max?: number | string - min?: number | string - step?: number | string - resize?: InputProps['resize'] - autofocus?: boolean - form?: string - label?: string - tabindex?: string | number - validateEvent?: boolean - inputStyle?: string | CSSProperties | CSSProperties[] | string[] on?: { blur?: (event: FocusEvent) => void focus?: (event: FocusEvent) => void @@ -98,24 +88,7 @@ export interface InputComponentProps { style?: CSSProperties } -export interface AutocompleteComponentProps { - placeholder?: string - clearable?: boolean - disabled?: boolean - valueKey?: string - debounce?: number - placement?: AutocompleteProps['placement'] - fetchSuggestions?: (queryString: string, callback: (data: string[]) => void) => void - triggerOnFocus?: boolean - selectWhenUnmatched?: boolean - name?: string - label?: string - hideLoading?: boolean - popperClass?: string - popperAppendToBody?: boolean - teleported?: boolean - highlightFirstItem?: boolean - fitInputWidth?: boolean +export interface AutocompleteComponentProps extends Partial { on?: { select?: (item: any) => void change?: (value: string | number) => void @@ -130,23 +103,7 @@ export interface AutocompleteComponentProps { style?: CSSProperties } -export interface InputNumberComponentProps { - min?: number - max?: number - step?: number - stepStrictly?: boolean - precision?: number - size?: ComponentSize - readonly?: boolean - disabled?: boolean - controls?: boolean - controlsPosition?: InputNumberProps['controlsPosition'] - name?: string - label?: string - placeholder?: string - id?: string - valueOnClear?: number | null | 'min' | 'max' - validateEvent?: boolean +export interface InputNumberComponentProps extends Partial { on?: { change?: (currentValue: number | undefined, oldValue: number | undefined) => void blur?: (event: FocusEvent) => void @@ -319,64 +276,21 @@ export interface CascaderComponentProps { style?: CSSProperties } -export interface SwitchComponentProps { - disabled?: boolean - loading?: boolean - size?: ComponentSize - width?: number | string - inlinePrompt?: boolean - activeIcon?: string | JSX.Element | null - inactiveIcon?: string | JSX.Element | null - activeText?: string - inactiveText?: string - activeValue?: boolean | string | number - inactiveValue?: boolean | string | number - name?: string - validateEvent?: boolean - beforeChange?: (value: boolean) => boolean | Promise +export interface SwitchComponentProps extends Partial { on?: { change?: (value: boolean | string | number) => void } style?: CSSProperties } -export interface RateComponentProps { - max?: number - size?: ComponentSize - disabled?: boolean - allowHalf?: boolean - lowThreshold?: number - highThreshold?: number - colors?: string[] | Record - voidColor?: string - disabledVoidColor?: string - icons?: string[] | JSX.Element[] | Record - voidIcon?: string | JSX.Element - disabledVoidIcon?: string | JSX.Element - showText?: boolean - showScore?: boolean - textColor?: string - texts?: string[] - scoreTemplate?: string - clearable?: boolean - id?: string - label?: string +export interface RateComponentProps extends Partial { on?: { change?: (value: number) => void } style?: CSSProperties } -export interface ColorPickerComponentProps { - disabled?: boolean - size?: ComponentSize - showAlpha?: boolean - colorFormat?: 'hsl' | 'hsv' | 'hex' | 'rgb' | 'hex' | 'rgb' - predefine?: string[] - validateEvent?: boolean - tabindex?: number | string - label?: string - id?: string +export interface ColorPickerComponentProps extends Partial { on?: { change?: (value: string) => void activeChange?: (value: string) => void @@ -384,30 +298,7 @@ export interface ColorPickerComponentProps { style?: CSSProperties } -export interface TransferComponentProps { - data?: any[] - filterable?: boolean - filterPlaceholder?: string - filterMethod?: (query: string, item: any) => boolean - targetOrder?: string - titles?: string[] - buttonTexts?: string[] - renderContent?: ( - h: (type: string, props: VNodeProps | null, children?: string) => VNode, - option: any - ) => JSX.Element - format?: { - noChecked?: string - hasChecked?: string - } - props?: { - label?: string - key?: string - disabled?: string - } - leftDefaultChecked?: any[] - rightDefaultChecked?: any[] - validateEvent?: boolean +export interface TransferComponentProps extends Partial { on?: { change?: ( value: number | string, @@ -434,20 +325,12 @@ export interface RadioOption { name?: string [key: string]: any } -export interface RadioGroupComponentProps { - size?: ComponentSize - disabled?: boolean - textColor?: string - fill?: string - validateEvent?: boolean - label?: string - name?: string - id?: string +export interface RadioGroupComponentProps extends Partial { options?: RadioOption[] /** * 数据源的字段别名 */ - props: { + props?: { label?: string value?: string disabled?: string @@ -456,25 +339,17 @@ export interface RadioGroupComponentProps { change?: (value: string | number | boolean) => void } slots?: { - default?: (...args: any[]) => JSX.Element | null + default?: (...args: any[]) => JSX.Element[] | null } style?: CSSProperties } -export interface RadioButtonComponentProps { - size?: ComponentSize - disabled?: boolean - textColor?: string - fill?: string - validateEvent?: boolean - label?: string - name?: string - id?: string +export interface RadioButtonComponentProps extends Partial { options?: RadioOption[] /** * 数据源的字段别名 */ - props: { + props?: { label?: string value?: string disabled?: string @@ -483,7 +358,7 @@ export interface RadioButtonComponentProps { change?: (value: string | number | boolean) => void } slots?: { - default?: (...args: any[]) => JSX.Element | null + default?: (...args: any[]) => JSX.Element[] | null } style?: CSSProperties } @@ -506,21 +381,12 @@ export interface CheckboxOption { [key: string]: any } -export interface CheckboxGroupComponentProps { - size?: ComponentSize - disabled?: boolean - min?: number - max?: number - label?: string - textColor?: string - fill?: string - tag?: string - validateEvent?: boolean +export interface CheckboxGroupComponentProps extends Partial { options?: CheckboxOption[] /** * 数据源的字段别名 */ - props: { + props?: { label?: string value?: string disabled?: string @@ -529,35 +395,31 @@ export interface CheckboxGroupComponentProps { change?: (value: string | number | boolean) => void } slots?: { - default?: (...args: any[]) => JSX.Element | null + default?: (...args: any[]) => JSX.Element[] | null } style?: CSSProperties } -export interface DividerComponentProps { - min?: number - max?: number - disabled?: boolean - step?: number - showInput?: boolean - showInputControls?: boolean - size?: ComponentSize - inputSize?: ComponentSize - showStops?: boolean - showTooltip?: boolean - formatTooltip?: (value: number) => string - range?: boolean - vertical?: boolean - height?: string - label?: string - rangeStartLabel?: string - rangeEndLabel?: string - formatValueText?: (value: number) => string - debounce?: number - tooltipClass?: string - placement?: string - marks?: Record - validateEvent?: boolean +export interface CheckboxButtonComponentProps extends Partial { + options?: CheckboxOption[] + /** + * 数据源的字段别名 + */ + props?: { + label?: string + value?: string + disabled?: string + } + on?: { + change?: (value: string | number | boolean) => void + } + slots?: { + default?: (...args: any[]) => JSX.Element[] | null + } + style?: CSSProperties +} + +export interface DividerComponentProps extends Partial { on?: { change?: (value: number) => void input?: (value: number) => void @@ -565,42 +427,7 @@ export interface DividerComponentProps { style?: CSSProperties } -export interface DatePickerComponentProps { - readonly?: boolean - disabled?: boolean - size?: ComponentSize - editable?: boolean - clearable?: boolean - placeholder?: string - startPlaceholder?: string - endPlaceholder?: string - type?: - | 'year' - | 'month' - | 'date' - | 'dates' - | 'week' - | 'datetime' - | 'datetimerange' - | 'daterange' - | 'monthrange' - format?: string - popperClass?: string - popperOptions?: Record - rangeSeparator?: string - defaultValue?: Date | [Date, Date] - defaultTime?: Date | [Date, Date] - valueFormat?: string - id?: string - name?: string - unlinkPanels?: boolean - prefixIcon?: string | JSX.Element - clearIcon?: string | JSX.Element - validateEvent?: boolean - disabledDate?: (date: Date) => boolean - shortcuts?: Array<{ text: string; value: Date | Function }> - cellClassName?: string | ((date: Date) => string | undefined) - teleported?: boolean +export interface DatePickerComponentProps extends Partial { on?: { change?: (value: string | Date | number | string[]) => void blur?: (event: FocusEvent) => void @@ -737,16 +564,7 @@ export interface FormSetProps { value: any } -export interface FormItemProps { - labelWidth?: string | number - required?: boolean - rules?: FormItemRule | FormItemRule[] - error?: string - showMessage?: boolean - inlineMessage?: boolean - size?: ComponentSize - for?: string - validateStatus?: '' | 'error' | 'validating' | 'success' +export interface FormItemProps extends Partial { style?: CSSProperties slots?: { default?: (...args: any[]) => JSX.Element | null @@ -791,8 +609,8 @@ export interface FormSchema { | DatePickerComponentProps | DateTimePickerComponentProps | TimePickerComponentProps - | EditorComponentProps - | any + | InputPasswordComponentProps + | CheckboxButtonComponentProps /** * formItem组件属性,具体可以查看element-plus文档 @@ -825,12 +643,11 @@ export interface FormSchema { optionApi?: any } -export interface FormProps { +export interface FormProps extends Partial { schema?: FormSchema[] isCol?: boolean model?: Recordable autoSetPlaceholder?: boolean isCustom?: boolean - labelWidth?: string | number [key: string]: any } diff --git a/types/global.d.ts b/types/global.d.ts index fe4b285..10558cd 100644 --- a/types/global.d.ts +++ b/types/global.d.ts @@ -10,6 +10,10 @@ declare global { declare type Recordable = Record + declare type RemoveReadonly = { + -readonly [P in keyof T]: T[P] + } + declare type ComponentRef = InstanceType declare type LocaleType = 'zh-CN' | 'en'