@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
395 lines (394 loc) • 14.7 kB
TypeScript
import type { NeonBreadcrumbLink } from '@/model/navigation/breadcrumbs/NeonBreadcrumbLink';
import { NeonHeaderLevel } from '@/model/presentation/header/NeonHeaderLevel';
/**
* A header component consisting of a title, an optional subtitle, actions, labels and breadcrumbs. This component
* supports different levels of headers including Page, Section & SubSection (`NeonHeaderLevel`).
*/
declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
/**
* The title of the header.
*/
title: {
type: StringConstructor;
required: true;
};
/**
* The subtitle of the header.
*/
subtitle: {
type: StringConstructor;
};
/**
* The level of the header. Allows the header to be used in multiple contexts with different sizes.
*/
level: {
type: () => NeonHeaderLevel;
default: () => NeonHeaderLevel;
};
/**
* Breadcrumbs to display above the header (Page level only).
*/
breadcrumbs: {
type: () => NeonBreadcrumbLink[];
default: () => never[];
};
/**
* Whether to display a back button (Page level only).
*/
backButton: {
type: BooleanConstructor;
default: boolean;
};
/**
* Override the label for the back button (Page level only).
*/
backLabel: {
type: StringConstructor;
default: string;
};
}>, {
titleLevel: import("vue").ComputedRef<string>;
NeonHeaderLevel: typeof NeonHeaderLevel;
slots: Readonly<{
[name: string]: import("vue").Slot<any> | undefined;
}>;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
/**
* The title of the header.
*/
title: {
type: StringConstructor;
required: true;
};
/**
* The subtitle of the header.
*/
subtitle: {
type: StringConstructor;
};
/**
* The level of the header. Allows the header to be used in multiple contexts with different sizes.
*/
level: {
type: () => NeonHeaderLevel;
default: () => NeonHeaderLevel;
};
/**
* Breadcrumbs to display above the header (Page level only).
*/
breadcrumbs: {
type: () => NeonBreadcrumbLink[];
default: () => never[];
};
/**
* Whether to display a back button (Page level only).
*/
backButton: {
type: BooleanConstructor;
default: boolean;
};
/**
* Override the label for the back button (Page level only).
*/
backLabel: {
type: StringConstructor;
default: string;
};
}>> & Readonly<{}>, {
breadcrumbs: NeonBreadcrumbLink[];
level: NeonHeaderLevel;
backButton: boolean;
backLabel: string;
}, {}, {
NeonBreadcrumbs: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
breadcrumbs: {
type: () => NeonBreadcrumbLink[];
default: () => never[];
};
backButton: {
type: BooleanConstructor;
default: boolean;
};
backLabel: {
type: StringConstructor;
default: string;
};
responsiveStyle: {
type: () => import("../../../neon").NeonBreadcrumbResponsiveStyle;
default: import("../../../neon").NeonBreadcrumbResponsiveStyle;
};
}>, {
back: () => Promise<void>;
linksRef: import("vue").Ref<HTMLDivElement | null, HTMLDivElement | null>;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
breadcrumbs: {
type: () => NeonBreadcrumbLink[];
default: () => never[];
};
backButton: {
type: BooleanConstructor;
default: boolean;
};
backLabel: {
type: StringConstructor;
default: string;
};
responsiveStyle: {
type: () => import("../../../neon").NeonBreadcrumbResponsiveStyle;
default: import("../../../neon").NeonBreadcrumbResponsiveStyle;
};
}>> & Readonly<{}>, {
breadcrumbs: NeonBreadcrumbLink[];
backButton: boolean;
backLabel: string;
responsiveStyle: import("../../../neon").NeonBreadcrumbResponsiveStyle;
}, {}, {
NeonIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
name: {
type: StringConstructor;
required: true;
};
id: {
type: StringConstructor;
default: null;
};
color: {
type: () => import("../../../neon").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: () => import("../../../neon").NeonFunctionalColor;
default: null;
};
inverse: {
type: BooleanConstructor;
default: boolean;
};
disabled: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{}>, {
color: import("../../../neon").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;
};
id: {
type: StringConstructor;
default: null;
};
color: {
type: () => import("../../../neon").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: () => import("../../../neon").NeonFunctionalColor;
default: null;
};
inverse: {
type: BooleanConstructor;
default: boolean;
};
disabled: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{}>, {
color: import("../../../neon").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>; /**
* The title of the header.
*/
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
NeonInline: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
gap: {
type: () => import("../../../neon").NeonLayoutSize;
default: () => import("../../../neon").NeonLayoutSize;
};
breakpoint: {
type: () => import("../../../neon").NeonResponsive; /**
* The title of the header.
*/
}; /**
* The title of the header.
*/
}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
gap: {
type: () => import("../../../neon").NeonLayoutSize;
default: () => import("../../../neon").NeonLayoutSize;
};
breakpoint: {
type: () => import("../../../neon").NeonResponsive; /**
* The title of the header.
*/
}; /**
* The title of the header.
*/
}>> & Readonly<{}>, {
gap: import("../../../neon").NeonLayoutSize;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
NeonStack: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
gap: {
type: () => import("../../../neon").NeonLayoutSize;
default: () => import("../../../neon").NeonLayoutSize;
};
}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
gap: {
type: () => import("../../../neon").NeonLayoutSize;
default: () => import("../../../neon").NeonLayoutSize;
};
}>> & Readonly<{}>, {
gap: import("../../../neon").NeonLayoutSize;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
export default _default;