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

Codex Design System for Wikimedia

import { PropType } from 'vue';
import { Icon } from '@wikimedia/codex-icons';
/**
 * Interactive chip used within the ChipInput.
 *
 * This component is not available for public use and should only be used inside ChipInput.
 */
declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
    /**
     * Custom icon.
     */
    icon: {
        type: PropType<Icon>;
        default: null;
    };
    /**
     * Whether the InputChip can be removed.
     */
    disabled: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Whether the InputChip is readonly.
     */
    readonly: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * CSS class for the InputChip.
     */
    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 the chip.
     *
     * @public
     */
    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<{
    /**
     * Custom icon.
     */
    icon: {
        type: PropType<Icon>;
        default: null;
    };
    /**
     * Whether the InputChip can be removed.
     */
    disabled: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Whether the InputChip is readonly.
     */
    readonly: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * CSS class for the InputChip.
     */
    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: 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<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<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>;
export default _default;