@aotearoan/neon/dist/src/components/presentation/tabs/NeonTabs.d.ts

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

import type { NeonTabModel } from '@/model/presentation/tabs/NeonTabModel';
import { NeonFunctionalColor } from '@/model/common/color/NeonFunctionalColor';
import { NeonSize } from '@/model/common/size/NeonSize';
/**
 * A component for displaying tabbed content.
 */
declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
    /**
     * The list of tabs to display.
     * */
    tabs: {
        type: () => Array<NeonTabModel>;
        required: true;
    };
    /**
     * The key of the selected tab.
     */
    modelValue: {
        type: StringConstructor;
        required: true;
    };
    /**
     * The tab highlight color (excludes low-contrast).
     */
    color: {
        type: () => NeonFunctionalColor;
        default: NeonFunctionalColor;
    };
    /**
     * The tab size
     */
    size: {
        type: () => NeonSize;
        default: NeonSize;
    };
    /**
     * Display a border underlining all tabs. When tabs are in an element with a border-bottom it is preferable to omit the tabs border-bottom
     */
    underline: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Display tab buttons full screen width at the mobile-large breakpoint.
     */
    fullWidthMobile: {
        type: BooleanConstructor;
        default: boolean;
    };
}>, {
    onClick: (key: string, changeFocus?: boolean) => void;
    menuItem: import("vue").Ref<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
        href: {
            type: StringConstructor;
            default: null;
        };
        noStyle: {
            type: BooleanConstructor;
            default: boolean;
        };
        outlineStyle: {
            type: () => import("../../../neon").NeonOutlineStyle;
            default: import("../../../neon").NeonOutlineStyle;
        };
        externalIndicator: {
            type: BooleanConstructor;
            default: boolean;
        };
    }>, {
        neonLink: import("vue").Ref<HTMLAnchorElement | null, HTMLAnchorElement | null>;
        routerUrl: import("vue").ComputedRef<string | undefined>;
        sanitizedAttributes: import("vue").ComputedRef<{
            [x: string]: unknown;
        }>;
        activeRoute: import("vue").ComputedRef<boolean | "" | undefined>;
        exactRoute: import("vue").ComputedRef<boolean | "" | undefined>;
        onClick: () => void;
        onSpace: () => Promise<void>;
    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
        href: {
            type: StringConstructor;
            default: null;
        };
        noStyle: {
            type: BooleanConstructor;
            default: boolean;
        };
        outlineStyle: {
            type: () => import("../../../neon").NeonOutlineStyle;
            default: import("../../../neon").NeonOutlineStyle;
        };
        externalIndicator: {
            type: BooleanConstructor;
            default: boolean;
        };
    }>> & Readonly<{
        onClick?: ((...args: any[]) => any) | undefined;
    }>, {
        href: string;
        noStyle: boolean;
        outlineStyle: import("../../../neon").NeonOutlineStyle;
        externalIndicator: boolean;
    }, {}, {
        NeonIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
            name: {
                type: StringConstructor;
                required: true;
            }; /**
             * Emitted when the selected tab is changed.
             * @type {string} The key of the selected tab.
             */
            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;
            }; /**
             * Emitted when the selected tab is changed.
             * @type {string} The key of the selected tab.
             */
            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>[], import("vue").DefineComponent<import("vue").ExtractPropTypes<{
        href: {
            type: StringConstructor;
            default: null;
        };
        noStyle: {
            type: BooleanConstructor;
            default: boolean;
        };
        outlineStyle: {
            type: () => import("../../../neon").NeonOutlineStyle;
            default: import("../../../neon").NeonOutlineStyle;
        };
        externalIndicator: {
            type: BooleanConstructor;
            default: boolean;
        };
    }>, {
        neonLink: import("vue").Ref<HTMLAnchorElement | null, HTMLAnchorElement | null>;
        routerUrl: import("vue").ComputedRef<string | undefined>;
        sanitizedAttributes: import("vue").ComputedRef<{
            [x: string]: unknown;
        }>;
        activeRoute: import("vue").ComputedRef<boolean | "" | undefined>;
        exactRoute: import("vue").ComputedRef<boolean | "" | undefined>;
        onClick: () => void;
        onSpace: () => Promise<void>;
    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
        href: {
            type: StringConstructor;
            default: null;
        };
        noStyle: {
            type: BooleanConstructor;
            default: boolean;
        };
        outlineStyle: {
            type: () => import("../../../neon").NeonOutlineStyle;
            default: import("../../../neon").NeonOutlineStyle;
        };
        externalIndicator: {
            type: BooleanConstructor;
            default: boolean;
        };
    }>> & Readonly<{
        onClick?: ((...args: any[]) => any) | undefined;
    }>, {
        href: string;
        noStyle: boolean;
        outlineStyle: import("../../../neon").NeonOutlineStyle;
        externalIndicator: boolean;
    }, {}, {
        NeonIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
            name: {
                type: StringConstructor;
                required: true;
            }; /**
             * Emitted when the selected tab is changed.
             * @type {string} The key of the selected tab.
             */
            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;
            }; /**
             * Emitted when the selected tab is changed.
             * @type {string} The key of the selected tab.
             */
            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>[]>;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
    /**
     * The list of tabs to display.
     * */
    tabs: {
        type: () => Array<NeonTabModel>;
        required: true;
    };
    /**
     * The key of the selected tab.
     */
    modelValue: {
        type: StringConstructor;
        required: true;
    };
    /**
     * The tab highlight color (excludes low-contrast).
     */
    color: {
        type: () => NeonFunctionalColor;
        default: NeonFunctionalColor;
    };
    /**
     * The tab size
     */
    size: {
        type: () => NeonSize;
        default: NeonSize;
    };
    /**
     * Display a border underlining all tabs. When tabs are in an element with a border-bottom it is preferable to omit the tabs border-bottom
     */
    underline: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Display tab buttons full screen width at the mobile-large breakpoint.
     */
    fullWidthMobile: {
        type: BooleanConstructor;
        default: boolean;
    };
}>> & Readonly<{
    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
}>, {
    color: NeonFunctionalColor;
    size: NeonSize;
    underline: boolean;
    fullWidthMobile: boolean;
}, {}, {
    NeonIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
        name: {
            type: StringConstructor;
            required: true;
        }; /**
         * Emitted when the selected tab is changed.
         * @type {string} The key of the selected tab.
         */
        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;
        }; /**
         * Emitted when the selected tab is changed.
         * @type {string} The key of the selected tab.
         */
        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>;
    NeonLink: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
        href: {
            type: StringConstructor;
            default: null;
        };
        noStyle: {
            type: BooleanConstructor;
            default: boolean;
        };
        outlineStyle: {
            type: () => import("../../../neon").NeonOutlineStyle;
            default: import("../../../neon").NeonOutlineStyle;
        };
        externalIndicator: {
            type: BooleanConstructor;
            default: boolean;
        };
    }>, {
        neonLink: import("vue").Ref<HTMLAnchorElement | null, HTMLAnchorElement | null>;
        routerUrl: import("vue").ComputedRef<string | undefined>;
        sanitizedAttributes: import("vue").ComputedRef<{
            [x: string]: unknown;
        }>;
        activeRoute: import("vue").ComputedRef<boolean | "" | undefined>;
        exactRoute: import("vue").ComputedRef<boolean | "" | undefined>;
        onClick: () => void;
        onSpace: () => Promise<void>;
    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
        href: {
            type: StringConstructor;
            default: null;
        };
        noStyle: {
            type: BooleanConstructor;
            default: boolean;
        };
        outlineStyle: {
            type: () => import("../../../neon").NeonOutlineStyle;
            default: import("../../../neon").NeonOutlineStyle;
        };
        externalIndicator: {
            type: BooleanConstructor;
            default: boolean;
        };
    }>> & Readonly<{
        onClick?: ((...args: any[]) => any) | undefined;
    }>, {
        href: string;
        noStyle: boolean;
        outlineStyle: import("../../../neon").NeonOutlineStyle;
        externalIndicator: boolean;
    }, {}, {
        NeonIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
            name: {
                type: StringConstructor;
                required: true;
            }; /**
             * Emitted when the selected tab is changed.
             * @type {string} The key of the selected tab.
             */
            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;
            }; /**
             * Emitted when the selected tab is changed.
             * @type {string} The key of the selected tab.
             */
            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>;
    NeonSwiper: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
        fade: {
            type: BooleanConstructor;
            default: boolean;
        };
        orientation: {
            type: () => import("../../../neon").NeonOrientation;
            default: import("../../../neon").NeonOrientation;
        };
        hideFadeStart: {
            type: BooleanConstructor;
            default: boolean;
        };
        hideFadeEnd: {
            type: BooleanConstructor;
            default: boolean;
        };
    }>, {
        isOverflowing: import("vue").Ref<boolean, boolean>;
        isScrollStart: import("vue").Ref<boolean, boolean>;
        isScrollEnd: import("vue").Ref<boolean, boolean>;
        scrollable: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
        fade: {
            type: BooleanConstructor;
            default: boolean;
        };
        orientation: {
            type: () => import("../../../neon").NeonOrientation;
            default: import("../../../neon").NeonOrientation;
        };
        hideFadeStart: {
            type: BooleanConstructor;
            default: boolean;
        };
        hideFadeEnd: {
            type: BooleanConstructor;
            default: boolean;
        };
    }>> & Readonly<{}>, {
        orientation: import("../../../neon").NeonOrientation;
        fade: boolean;
        hideFadeStart: boolean;
        hideFadeEnd: boolean;
    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
export default _default;