@aotearoan/neon/dist/src/components/user-input/chip/NeonChip.d.ts

Neon is a lightweight design library of Vue 3 components with minimal dependencies.

import { NeonSize } from '@/model/common/size/NeonSize';
import { NeonFunctionalColor } from '@/model/common/color/NeonFunctionalColor';
import { NeonChipAction } from '@/model/user-input/chip/NeonChipAction';
/**
 * <p>
 * <strong>NeonChip</strong> is a clickable or removable chip which can be used as a tag or to indicate selected values
 * in filters and other more complex inputs (e.g. search / multiselect). Clicking the chip results in a callback and in
 * the case it is removable, also removal of the chip. Chips are designed to fit inside inputs for creating more complex
 * input components.
 * </p>
 * <p>
 *   Chips are navigable via tab (tabindex). When focussed, use space, return or enter to click on clickable tabs and, in
 *   the case of removable tabs, use backspace and delete to remove a tab. Escape will blur a focussed tab.
 * </p>
 */
declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
    /**
     * The chip label
     */
    label: {
        type: StringConstructor;
        required: true;
    };
    /**
     * The size of the chip.
     */
    size: {
        type: () => NeonSize;
        default: NeonSize;
    };
    /**
     * The chip color.
     */
    color: {
        type: () => NeonFunctionalColor;
        default: NeonFunctionalColor;
    };
    /**
     * The action when clicking on a chip. Can be click or remove.
     */
    action: {
        type: () => NeonChipAction;
        default: NeonChipAction;
    };
    /**
     * The chip disabled state.
     */
    disabled: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * This is the name of an icon which can optionally be added to the chip.
     */
    icon: {
        type: StringConstructor;
        default: null;
    };
}>, {
    chip: import("vue").Ref<null, null>;
    open: import("vue").Ref<boolean, boolean>;
    active: import("vue").Ref<boolean, boolean>;
    role: import("vue").ComputedRef<"link" | "button" | undefined>;
    attrs: {
        [x: string]: unknown;
    };
    keyUp: () => void;
    keyDown: () => void;
    clicked: () => void;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "close")[], "click" | "close", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
    /**
     * The chip label
     */
    label: {
        type: StringConstructor;
        required: true;
    };
    /**
     * The size of the chip.
     */
    size: {
        type: () => NeonSize;
        default: NeonSize;
    };
    /**
     * The chip color.
     */
    color: {
        type: () => NeonFunctionalColor;
        default: NeonFunctionalColor;
    };
    /**
     * The action when clicking on a chip. Can be click or remove.
     */
    action: {
        type: () => NeonChipAction;
        default: NeonChipAction;
    };
    /**
     * The chip disabled state.
     */
    disabled: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * This is the name of an icon which can optionally be added to the chip.
     */
    icon: {
        type: StringConstructor;
        default: null;
    };
}>> & Readonly<{
    onClick?: ((...args: any[]) => any) | undefined;
    onClose?: ((...args: any[]) => any) | undefined;
}>, {
    color: NeonFunctionalColor;
    icon: string;
    disabled: boolean;
    size: NeonSize;
    action: NeonChipAction;
}, {}, {
    NeonIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
        name: {
            type: StringConstructor;
            required: true;
        };
        id: {
            type: StringConstructor;
            default: null;
        };
        color: {
            type: () => NeonFunctionalColor;
            default: null;
        };
        inverse: {
            type: BooleanConstructor;
            default: boolean;
        };
        disabled: {
            type: BooleanConstructor;
            default: boolean;
        };
    }>, {
        sanitizedAttributes: import("vue").ComputedRef<{
            [x: string]: unknown;
        }>;
        icon: import("vue").ComputedRef<string | undefined>;
    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
        name: {
            type: StringConstructor;
            required: true;
        };
        id: {
            type: StringConstructor;
            default: null;
        };
        color: {
            type: () => NeonFunctionalColor;
            default: null;
        };
        inverse: {
            type: BooleanConstructor;
            default: boolean;
        };
        disabled: {
            type: BooleanConstructor;
            default: boolean;
        };
    }>> & Readonly<{}>, {
        color: NeonFunctionalColor;
        id: string;
        inverse: boolean;
        disabled: boolean;
    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
export default _default;