@wikimedia/codex/dist/types/components/chip-input/ChipInput.vue.d.ts

Codex Design System for Wikimedia

import { ComponentPublicInstance, PropType } from 'vue';
import { ChipInputItem, ChipValidator, ValidationStatusType } from '../../types';
/**
 * An input field which accepts multiple values and displays them as individual
 * chip elements.
 */
declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
    /**
     * Current chips present in the input.
     *
     * Provided by `v-model` binding in the parent component.
     */
    inputChips: {
        type: PropType<ChipInputItem[]>;
        required: true;
    };
    /**
     * Current value of the text input. This prop is optional and should only be used if you
     * need to keep track of the text input value for some reason (e.g. for validation).
     *
     * Optionally provided by `v-model:input-value` binding in the parent component.
     */
    inputValue: {
        type: PropType<string | number>;
        default: null;
    };
    /**
     * Whether the text input should appear below the set of input chips.
     *
     * By default, the input chips are inline with the input.
     */
    separateInput: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * `status` attribute of the input.
     */
    status: {
        type: PropType<ValidationStatusType>;
        default: string;
        validator: import("../../types").StringTypeValidator<"default" | "warning" | "error" | "success">;
    };
    /**
     * Validation function for chip text. If it returns false, the chip will not be added and
     * the error status will be set.
     */
    chipValidator: {
        type: PropType<ChipValidator>;
        default: (value: string | number) => true;
    };
    /**
     * Whether the input is disabled.
     */
    disabled: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Whether the ChipInput is readonly.
     */
    readonly: {
        type: BooleanConstructor;
        default: boolean;
    };
}>, {
    rootElement: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
    chipsContainer: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
    separateInputWrapper: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
    input: import("vue").Ref<HTMLInputElement | undefined, HTMLInputElement | undefined>;
    computedInputValue: import("vue").WritableComputedRef<string | number, string | number>;
    rootClasses: import("vue").ComputedRef<Record<string, boolean>>;
    rootStyle: import("vue").ComputedRef<import("vue").StyleValue>;
    otherAttrs: import("vue").ComputedRef<{
        [x: string]: unknown;
    }>;
    assignChipTemplateRef: (chip: Element | ComponentPublicInstance | null, index: number) => void;
    handleChipClick: (clickedChip: ChipInputItem) => Promise<void>;
    handleChipRemove: (chipToRemove: ChipInputItem, index: number, method: "button" | "Backspace" | "Delete") => void;
    moveChipFocus: (direction: "left" | "right", startIndex: number) => void;
    onInputKeydown: (e: KeyboardEvent) => void;
    focusInput: () => void;
    onInputFocus: () => void;
    onInputBlur: () => void;
    onFocusOut: (e: FocusEvent) => void;
    computedDisabled: import("vue").ComputedRef<boolean>;
    statusMessageContent: import("vue").Ref<string, string>;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:input-chips" | "update:input-value" | "chip-click")[], "update:input-chips" | "update:input-value" | "chip-click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
    /**
     * Current chips present in the input.
     *
     * Provided by `v-model` binding in the parent component.
     */
    inputChips: {
        type: PropType<ChipInputItem[]>;
        required: true;
    };
    /**
     * Current value of the text input. This prop is optional and should only be used if you
     * need to keep track of the text input value for some reason (e.g. for validation).
     *
     * Optionally provided by `v-model:input-value` binding in the parent component.
     */
    inputValue: {
        type: PropType<string | number>;
        default: null;
    };
    /**
     * Whether the text input should appear below the set of input chips.
     *
     * By default, the input chips are inline with the input.
     */
    separateInput: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * `status` attribute of the input.
     */
    status: {
        type: PropType<ValidationStatusType>;
        default: string;
        validator: import("../../types").StringTypeValidator<"default" | "warning" | "error" | "success">;
    };
    /**
     * Validation function for chip text. If it returns false, the chip will not be added and
     * the error status will be set.
     */
    chipValidator: {
        type: PropType<ChipValidator>;
        default: (value: string | number) => true;
    };
    /**
     * Whether the input is disabled.
     */
    disabled: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Whether the ChipInput is readonly.
     */
    readonly: {
        type: BooleanConstructor;
        default: boolean;
    };
}>> & Readonly<{
    "onUpdate:input-chips"?: ((...args: any[]) => any) | undefined;
    "onUpdate:input-value"?: ((...args: any[]) => any) | undefined;
    "onChip-click"?: ((...args: any[]) => any) | undefined;
}>, {
    disabled: boolean;
    inputValue: string | number;
    status: "default" | "warning" | "error" | "success";
    readonly: boolean;
    separateInput: boolean;
    chipValidator: ChipValidator;
}, {}, {
    CdxInputChip: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
        icon: {
            type: PropType<import("@wikimedia/codex-icons").Icon>;
            default: null;
        };
        disabled: {
            type: BooleanConstructor;
            default: boolean;
        };
        readonly: {
            type: BooleanConstructor;
            default: boolean;
        };
        className: {
            type: StringConstructor;
            default: string;
        };
    }>, {
        rootElement: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
        rootClasses: import("vue").ComputedRef<{
            [x: string]: boolean;
            'cdx-input-chip--disabled': boolean;
            'cdx-input-chip--readonly': boolean;
        }>;
        ariaDescription: import("vue").ComputedRef<string>;
        onKeydown: (e: KeyboardEvent) => void;
        cdxIconClose: string;
        tabIndex: import("vue").ComputedRef<0 | -1>;
        tooltipContent: import("vue").ComputedRef<string | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
            [key: string]: any;
        }> | null>;
        textElement: import("vue").Ref<HTMLSpanElement | undefined, HTMLSpanElement | undefined>;
    }, {}, {}, {
        focus(): void;
    }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("remove-chip" | "click-chip" | "arrow-left" | "arrow-right")[], "remove-chip" | "click-chip" | "arrow-left" | "arrow-right", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
        icon: {
            type: PropType<import("@wikimedia/codex-icons").Icon>;
            default: null;
        };
        disabled: {
            type: BooleanConstructor;
            default: boolean;
        };
        readonly: {
            type: BooleanConstructor;
            default: boolean;
        };
        className: {
            type: StringConstructor;
            default: string;
        };
    }>> & Readonly<{
        "onRemove-chip"?: ((...args: any[]) => any) | undefined;
        "onClick-chip"?: ((...args: any[]) => any) | undefined;
        "onArrow-left"?: ((...args: any[]) => any) | undefined;
        "onArrow-right"?: ((...args: any[]) => any) | undefined;
    }>, {
        icon: import("@wikimedia/codex-icons").Icon;
        disabled: boolean;
        readonly: boolean;
        className: string;
    }, {}, {
        CdxButton: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
            action: {
                type: PropType<import("../../types").ButtonAction>;
                default: string;
                validator: import("../../types").StringTypeValidator<"default" | "progressive" | "destructive">;
            };
            weight: {
                type: PropType<import("../../types").ButtonWeight>;
                default: string;
                validator: import("../../types").StringTypeValidator<"normal" | "primary" | "quiet">;
            };
            size: {
                type: PropType<import("../../types").ButtonSize>;
                default: string;
                validator: import("../../types").StringTypeValidator<"medium" | "large" | "small">;
            };
        }>, {
            button: import("vue").Ref<HTMLButtonElement | undefined, HTMLButtonElement | undefined>;
            rootClasses: import("vue").ComputedRef<{
                [x: string]: boolean;
                'cdx-button--framed': boolean;
                'cdx-button--icon-only': boolean;
                'cdx-button--is-active': boolean;
            }>;
            onClick: (event: Event) => void;
            onKeyDown: () => void;
            onKeyUp: () => void;
        }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
            action: {
                type: PropType<import("../../types").ButtonAction>;
                default: string;
                validator: import("../../types").StringTypeValidator<"default" | "progressive" | "destructive">;
            };
            weight: {
                type: PropType<import("../../types").ButtonWeight>;
                default: string;
                validator: import("../../types").StringTypeValidator<"normal" | "primary" | "quiet">;
            };
            size: {
                type: PropType<import("../../types").ButtonSize>;
                default: string;
                validator: import("../../types").StringTypeValidator<"medium" | "large" | "small">;
            };
        }>> & Readonly<{
            onClick?: ((...args: any[]) => any) | undefined;
        }>, {
            size: "medium" | "large" | "small";
            action: "default" | "progressive" | "destructive";
            weight: "normal" | "primary" | "quiet";
        }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
        CdxIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
            icon: {
                type: PropType<import("@wikimedia/codex-icons").Icon>;
                required: true;
            };
            iconLabel: {
                type: StringConstructor;
                default: string;
            };
            lang: {
                type: PropType<string | null>;
                default: null;
            };
            dir: {
                type: PropType<import("../../types").HTMLDirection | null>;
                default: null;
            };
            size: {
                type: PropType<import("../../types").IconSize>;
                default: string;
                validator: import("../../types").StringTypeValidator<"medium" | "small" | "x-small">;
            };
        }>, {
            rootElement: import("vue").Ref<HTMLSpanElement | undefined, HTMLSpanElement | undefined>;
            rootClasses: import("vue").ComputedRef<{
                [x: string]: boolean;
                'cdx-icon--flipped': boolean;
            }>;
            iconSvg: import("vue").ComputedRef<string>;
            iconPath: import("vue").ComputedRef<string>;
        }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
            icon: {
                type: PropType<import("@wikimedia/codex-icons").Icon>;
                required: true;
            };
            iconLabel: {
                type: StringConstructor;
                default: string;
            };
            lang: {
                type: PropType<string | null>;
                default: null;
            };
            dir: {
                type: PropType<import("../../types").HTMLDirection | null>;
                default: null;
            };
            size: {
                type: PropType<import("../../types").IconSize>;
                default: string;
                validator: import("../../types").StringTypeValidator<"medium" | "small" | "x-small">;
            };
        }>> & Readonly<{}>, {
            lang: string | null;
            iconLabel: string;
            dir: import("../../types").HTMLDirection | null;
            size: "medium" | "small" | "x-small";
        }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
    }, {
        tooltip: import("vue").Directive;
    }, string, import("vue").ComponentProvideOptions, true, {}, any>;
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
export default _default;