plus-pro-components/lib/components/display-item/index.d.ts

Page level components developed based on Element Plus.

import { TimeSelectProps } from 'element-plus/es/components/time-select/src/time-select';
import { EpPropMergeType } from 'element-plus/es/utils';
import { ElTooltipProps, TableColumnCtx, FormItemProps, ProgressFn, CascaderNode, InputAutoSize, AutocompleteProps, CheckboxGroupProps, ColorPickerProps, DatePickerProps, InputProps, InputNumberProps, RadioGroupProps, RateProps, ISelectProps, SliderProps, SwitchProps, TimePickerDefaultProps, TextProps, ImageProps, LinkProps, TagProps, ProgressProps, ColProps } from 'element-plus';
import { RecordType, PlusColumn, FieldValueType, TableValueType, FormItemValueType, OptionsType, OptionsRow, RenderTypes, PropsItemType, Mutable, OmitTypes, CascaderProps } from 'plus-pro-components';
import { PlusFormProps, PlusRadioProps, PlusDatePickerProps, PlusInputTagProps } from 'plus-pro-components';
import { CreateComponentPublicInstance, ExtractPropTypes, PropType, Ref, ComputedRef, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ComponentOptionsBase, CSSProperties } from 'vue';
import { default as DisplayItem } from './src/index.vue';

export type PlusDisplayItemInstance = InstanceType<typeof DisplayItem>;
export type { PlusDisplayItemProps } from './src/index.vue';
export declare const PlusDisplayItem: {
    new (...args: any[]): CreateComponentPublicInstance<Readonly< ExtractPropTypes<{
        index: {
            type: PropType<number>;
            default: number;
        };
        formProps: {
            type: PropType<PlusFormProps>;
            default: () => {};
        };
        rest: {
            type: PropType<RecordType>;
            default: () => {};
        };
        column: {
            type: PropType<PlusColumn>;
            required: true;
            default: () => {
                prop: string;
                label: string;
            };
        };
        editable: {
            type: PropType<boolean | "click" | "dblclick">;
            default: boolean;
        };
        row: {
            type: PropType<RecordType>;
            required: true;
            default: () => {};
        };
    }>> & {
        onChange?: ((data: {
            value: FieldValueType;
            prop: string;
            row: RecordType;
        }) => any) | undefined;
    }, {
        startCellEdit: () => void;
        stopCellEdit: () => void;
        getDisplayItemInstance: () => {
            isEdit: Ref<boolean>;
            index: number;
            rowIndex: number;
            cellIndex: any;
            prop: string;
            formInstance: ComputedRef<any>;
        };
    }, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
        change: (data: {
            value: FieldValueType;
            prop: string;
            row: RecordType;
        }) => void;
    }, VNodeProps & AllowedComponentProps & ComponentCustomProps & Readonly< ExtractPropTypes<{
        index: {
            type: PropType<number>;
            default: number;
        };
        formProps: {
            type: PropType<PlusFormProps>;
            default: () => {};
        };
        rest: {
            type: PropType<RecordType>;
            default: () => {};
        };
        column: {
            type: PropType<PlusColumn>;
            required: true;
            default: () => {
                prop: string;
                label: string;
            };
        };
        editable: {
            type: PropType<boolean | "click" | "dblclick">;
            default: boolean;
        };
        row: {
            type: PropType<RecordType>;
            required: true;
            default: () => {};
        };
    }>> & {
        onChange?: ((data: {
            value: FieldValueType;
            prop: string;
            row: RecordType;
        }) => any) | undefined;
    }, {
        index: number;
        formProps: PlusFormProps;
        rest: RecordType;
        column: PlusColumn;
        editable: boolean | "click" | "dblclick";
        row: RecordType;
    }, true, {}, {}, {
        P: {};
        B: {};
        D: {};
        C: {};
        M: {};
        Defaults: {};
    }, Readonly< ExtractPropTypes<{
        index: {
            type: PropType<number>;
            default: number;
        };
        formProps: {
            type: PropType<PlusFormProps>;
            default: () => {};
        };
        rest: {
            type: PropType<RecordType>;
            default: () => {};
        };
        column: {
            type: PropType<PlusColumn>;
            required: true;
            default: () => {
                prop: string;
                label: string;
            };
        };
        editable: {
            type: PropType<boolean | "click" | "dblclick">;
            default: boolean;
        };
        row: {
            type: PropType<RecordType>;
            required: true;
            default: () => {};
        };
    }>> & {
        onChange?: ((data: {
            value: FieldValueType;
            prop: string;
            row: RecordType;
        }) => any) | undefined;
    }, {
        startCellEdit: () => void;
        stopCellEdit: () => void;
        getDisplayItemInstance: () => {
            isEdit: Ref<boolean>;
            index: number;
            rowIndex: number;
            cellIndex: any;
            prop: string;
            formInstance: ComputedRef<any>;
        };
    }, {}, {}, {}, {
        index: number;
        formProps: PlusFormProps;
        rest: RecordType;
        column: PlusColumn;
        editable: boolean | "click" | "dblclick";
        row: RecordType;
    }>;
    __isFragment?: undefined;
    __isTeleport?: undefined;
    __isSuspense?: undefined;
} & ComponentOptionsBase<Readonly< ExtractPropTypes<{
    index: {
        type: PropType<number>;
        default: number;
    };
    formProps: {
        type: PropType<PlusFormProps>;
        default: () => {};
    };
    rest: {
        type: PropType<RecordType>;
        default: () => {};
    };
    column: {
        type: PropType<PlusColumn>;
        required: true;
        default: () => {
            prop: string;
            label: string;
        };
    };
    editable: {
        type: PropType<boolean | "click" | "dblclick">;
        default: boolean;
    };
    row: {
        type: PropType<RecordType>;
        required: true;
        default: () => {};
    };
}>> & {
    onChange?: ((data: {
        value: FieldValueType;
        prop: string;
        row: RecordType;
    }) => any) | undefined;
}, {
    startCellEdit: () => void;
    stopCellEdit: () => void;
    getDisplayItemInstance: () => {
        isEdit: Ref<boolean>;
        index: number;
        rowIndex: number;
        cellIndex: any;
        prop: string;
        formInstance: ComputedRef<any>;
    };
}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
    change: (data: {
        value: FieldValueType;
        prop: string;
        row: RecordType;
    }) => void;
}, string, {
    index: number;
    formProps: PlusFormProps;
    rest: RecordType;
    column: PlusColumn;
    editable: boolean | "click" | "dblclick";
    row: RecordType;
}, {}, string, {}> & VNodeProps & AllowedComponentProps & ComponentCustomProps & (new () => {
    $slots: Partial<Record<string, (_: {
        [x: string]: any;
        label?: string | ComputedRef<string> | undefined;
        prop: string;
        width?: string | number | undefined;
        minWidth?: string | number | undefined;
        editable?: boolean | undefined;
        valueType?: TableValueType | FormItemValueType;
        hideInDescriptions?: boolean | Ref<boolean> | ComputedRef<boolean> | undefined;
        hideInForm?: boolean | Ref<boolean> | ComputedRef<boolean> | undefined;
        hideInTable?: boolean | Ref<boolean> | ComputedRef<boolean> | undefined;
        hideInSearch?: boolean | Ref<boolean> | ComputedRef<boolean> | undefined;
        descriptionsItemProps?: RecordType | undefined;
        options?: OptionsType | undefined;
        optionsMap?: {
            label?: string | undefined;
            value?: string | undefined;
        } | undefined;
        customGetStatus?: ((data: {
            options: OptionsRow<undefined>[];
            value: string | number;
            row: RecordType;
        }) => OptionsRow<undefined>) | undefined;
        tooltip?: string | Partial< ElTooltipProps> | ComputedRef<string> | ComputedRef<Partial< ElTooltipProps>> | undefined;
        render?: ((value: any, data: {
            row: RecordType;
            column: PlusColumn;
            index: number;
        }) => RenderTypes) | undefined;
        renderHTML?: ((value: any, data: {
            row: RecordType;
            column: PlusColumn;
            index: number;
        }) => string) | undefined;
        renderHeader?: ((label: string, props: PlusColumn) => RenderTypes) | undefined;
        renderDescriptionsItem?: ((data: {
            value: string;
            column: PlusColumn;
            row: RecordType;
        }) => RenderTypes) | undefined;
        renderDescriptionsLabel?: ((data: {
            label: string;
            column: PlusColumn;
            row: RecordType;
        }) => RenderTypes) | undefined;
        order?: number | ComputedRef<number> | undefined;
        children?: PlusColumn[] | undefined;
        headerFilter?: boolean | undefined;
        disabledHeaderFilter?: boolean | undefined;
        headerIsChecked?: boolean | undefined;
        tableColumnProps?: Partial<Omit< TableColumnCtx<any>, "label " | "prop" | "width" | "minWidth"> & {
            [key: string]: any;
        }> | undefined;
        preview?: boolean | undefined;
        linkText?: string | undefined;
        formatter?: ((value: any, data: {
            row: RecordType;
            column: PlusColumn;
            index: number;
        }) => string | number) | undefined;
        formProps?: Partial< PlusFormProps> | ComputedRef<Partial< PlusFormProps>> | ((value: FieldValueType, data: {
            row: Record<string, any>;
            index: number;
        }) => Partial< PlusFormProps>) | undefined;
        formItemProps?: PropsItemType< Mutable<FormItemProps> & {
            [key: string]: any;
            style?: CSSProperties | undefined;
        }> | undefined;
        fieldProps?: PropsItemType<Partial<{
            [key: string]: any;
            style: CSSProperties;
            rows: number;
            autocomplete: string;
            type: "" | "number" | "default" | "search" | "checkbox" | "radio" | "textarea" | "text" | "circle" | "color" | "button" | "success" | "warning" | "info" | "primary" | "danger" | "reset" | "submit" | "time" | "image" | "line" | "date" | "year" | "years" | "month" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "range" | "dashboard" | "hidden" | "datetime-local" | "email" | "file" | "password" | "tel" | "url";
            loading: EpPropMergeType<BooleanConstructor, unknown, unknown> | EpPropMergeType<StringConstructor, "lazy" | "eager", unknown> | undefined;
            step: string | number;
            format: string | ProgressFn | undefined;
            filterMethod: Function | ((node: CascaderNode, keyword: string) => boolean) | undefined;
            id: string | [string, string];
            effect: string;
            height: string | number;
            autosize: InputAutoSize;
        } & Mutable<Omit< AutocompleteProps, OmitTypes> & Omit< CascaderProps, OmitTypes> & Omit< CheckboxGroupProps, OmitTypes> & Omit< ColorPickerProps, OmitTypes> & Omit< DatePickerProps, OmitTypes> & Omit< InputProps, OmitTypes> & Omit< InputNumberProps, OmitTypes> & Omit< RadioGroupProps, OmitTypes> & Omit< RateProps, OmitTypes> & Omit< ISelectProps, OmitTypes> & Omit< SliderProps, OmitTypes> & Omit< SwitchProps, OmitTypes> & Omit< TimePickerDefaultProps, OmitTypes> & Omit< TimeSelectProps, OmitTypes> & Omit< PlusRadioProps, OmitTypes> & Omit< PlusDatePickerProps, OmitTypes> & Omit< PlusInputTagProps, OmitTypes> & Omit< TextProps, OmitTypes> & Omit< ImageProps, OmitTypes> & Omit< LinkProps, OmitTypes> & Omit< TagProps, OmitTypes> & Omit< ProgressProps, OmitTypes>>>> | undefined;
        renderField?: ((value: FieldValueType, onChange: (value: FieldValueType) => void, props: PlusColumn) => RenderTypes) | undefined;
        colProps?: Partial< Mutable<ColProps> & {
            [key: string]: any;
            style?: CSSProperties | undefined;
        }> | undefined;
        hasLabel?: boolean | Ref<boolean> | ComputedRef<boolean> | undefined;
        renderLabel?: ((label: string, props: PlusColumn) => RenderTypes) | undefined;
        renderExtra?: ((column: PlusColumn) => RenderTypes) | undefined;
        fieldSlots?: {
            [slotName: string]: (data?: any) => RenderTypes;
        } | undefined;
        fieldChildrenSlot?: ((option?: OptionsRow<undefined> | undefined) => RenderTypes) | undefined;
        renderErrorMessage?: ((props: PlusColumn & {
            value?: FieldValueType;
            error?: string | undefined;
            label?: string | undefined;
        }) => RenderTypes) | undefined;
    }) => any>> & Partial<Record<string, (_: {
        [x: string]: any;
        label?: string | ComputedRef<string> | undefined;
        prop: string;
        width?: string | number | undefined;
        minWidth?: string | number | undefined;
        editable?: boolean | undefined;
        valueType?: TableValueType | FormItemValueType;
        hideInDescriptions?: boolean | Ref<boolean> | ComputedRef<boolean> | undefined;
        hideInForm?: boolean | Ref<boolean> | ComputedRef<boolean> | undefined;
        hideInTable?: boolean | Ref<boolean> | ComputedRef<boolean> | undefined;
        hideInSearch?: boolean | Ref<boolean> | ComputedRef<boolean> | undefined;
        descriptionsItemProps?: RecordType | undefined;
        options?: OptionsType | undefined;
        optionsMap?: {
            label?: string | undefined;
            value?: string | undefined;
        } | undefined;
        customGetStatus?: ((data: {
            options: OptionsRow<undefined>[];
            value: string | number;
            row: RecordType;
        }) => OptionsRow<undefined>) | undefined;
        tooltip?: string | Partial< ElTooltipProps> | ComputedRef<string> | ComputedRef<Partial< ElTooltipProps>> | undefined;
        render?: ((value: any, data: {
            row: RecordType;
            column: PlusColumn;
            index: number;
        }) => RenderTypes) | undefined;
        renderHTML?: ((value: any, data: {
            row: RecordType;
            column: PlusColumn;
            index: number;
        }) => string) | undefined;
        renderHeader?: ((label: string, props: PlusColumn) => RenderTypes) | undefined;
        renderDescriptionsItem?: ((data: {
            value: string;
            column: PlusColumn;
            row: RecordType;
        }) => RenderTypes) | undefined;
        renderDescriptionsLabel?: ((data: {
            label: string;
            column: PlusColumn;
            row: RecordType;
        }) => RenderTypes) | undefined;
        order?: number | ComputedRef<number> | undefined;
        children?: PlusColumn[] | undefined;
        headerFilter?: boolean | undefined;
        disabledHeaderFilter?: boolean | undefined;
        headerIsChecked?: boolean | undefined;
        tableColumnProps?: Partial<Omit< TableColumnCtx<any>, "label " | "prop" | "width" | "minWidth"> & {
            [key: string]: any;
        }> | undefined;
        preview?: boolean | undefined;
        linkText?: string | undefined;
        formatter?: ((value: any, data: {
            row: RecordType;
            column: PlusColumn;
            index: number;
        }) => string | number) | undefined;
        formProps?: Partial< PlusFormProps> | ComputedRef<Partial< PlusFormProps>> | ((value: FieldValueType, data: {
            row: Record<string, any>;
            index: number;
        }) => Partial< PlusFormProps>) | undefined;
        formItemProps?: PropsItemType< Mutable<FormItemProps> & {
            [key: string]: any;
            style?: CSSProperties | undefined;
        }> | undefined;
        fieldProps?: PropsItemType<Partial<{
            [key: string]: any;
            style: CSSProperties;
            rows: number;
            autocomplete: string;
            type: "" | "number" | "default" | "search" | "checkbox" | "radio" | "textarea" | "text" | "circle" | "color" | "button" | "success" | "warning" | "info" | "primary" | "danger" | "reset" | "submit" | "time" | "image" | "line" | "date" | "year" | "years" | "month" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "range" | "dashboard" | "hidden" | "datetime-local" | "email" | "file" | "password" | "tel" | "url";
            loading: EpPropMergeType<BooleanConstructor, unknown, unknown> | EpPropMergeType<StringConstructor, "lazy" | "eager", unknown> | undefined;
            step: string | number;
            format: string | ProgressFn | undefined;
            filterMethod: Function | ((node: CascaderNode, keyword: string) => boolean) | undefined;
            id: string | [string, string];
            effect: string;
            height: string | number;
            autosize: InputAutoSize;
        } & Mutable<Omit< AutocompleteProps, OmitTypes> & Omit< CascaderProps, OmitTypes> & Omit< CheckboxGroupProps, OmitTypes> & Omit< ColorPickerProps, OmitTypes> & Omit< DatePickerProps, OmitTypes> & Omit< InputProps, OmitTypes> & Omit< InputNumberProps, OmitTypes> & Omit< RadioGroupProps, OmitTypes> & Omit< RateProps, OmitTypes> & Omit< ISelectProps, OmitTypes> & Omit< SliderProps, OmitTypes> & Omit< SwitchProps, OmitTypes> & Omit< TimePickerDefaultProps, OmitTypes> & Omit< TimeSelectProps, OmitTypes> & Omit< PlusRadioProps, OmitTypes> & Omit< PlusDatePickerProps, OmitTypes> & Omit< PlusInputTagProps, OmitTypes> & Omit< TextProps, OmitTypes> & Omit< ImageProps, OmitTypes> & Omit< LinkProps, OmitTypes> & Omit< TagProps, OmitTypes> & Omit< ProgressProps, OmitTypes>>>> | undefined;
        renderField?: ((value: FieldValueType, onChange: (value: FieldValueType) => void, props: PlusColumn) => RenderTypes) | undefined;
        colProps?: Partial< Mutable<ColProps> & {
            [key: string]: any;
            style?: CSSProperties | undefined;
        }> | undefined;
        hasLabel?: boolean | Ref<boolean> | ComputedRef<boolean> | undefined;
        renderLabel?: ((label: string, props: PlusColumn) => RenderTypes) | undefined;
        renderExtra?: ((column: PlusColumn) => RenderTypes) | undefined;
        fieldSlots?: {
            [slotName: string]: (data?: any) => RenderTypes;
        } | undefined;
        fieldChildrenSlot?: ((option?: OptionsRow<undefined> | undefined) => RenderTypes) | undefined;
        renderErrorMessage?: ((props: PlusColumn & {
            value?: FieldValueType;
            error?: string | undefined;
            label?: string | undefined;
        }) => RenderTypes) | undefined;
    }) => any>> & Partial<Record<string, (_: {
        column: any;
        prop: string;
        valueType: TableValueType | FormItemValueType;
        row: RecordType;
        index: number;
        rowIndex: number;
        fieldProps: RecordType;
        options: OptionsRow<undefined>[];
        value: any;
    }) => any>> & {
        "edit-icon"?(_: {}): any;
    };
});