@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
614 lines (613 loc) • 22.4 kB
TypeScript
import type { NeonButtonModel } from '@/model/user-input/button/NeonButtonModel';
import { NeonFunctionalColor } from '@/model/common/color/NeonFunctionalColor';
import { NeonButtonStyle } from '@/model/user-input/button/NeonButtonStyle';
import { NeonEmptyStateType } from '@/model/presentation/empty-state/NeonEmptyStateType';
/**
* NeonEmptyState is a component for displaying an empty state message with an image and optional call-to-action buttons.
* It can also be used to render error pages.
*/
declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
/**
* The image to display in the empty state. This is an icon name used by the NeonIcon component, typically an
* svg illustration.
*/
image: {
type: StringConstructor;
};
/**
* The type of empty state to render, either an empty state or an error.
*/
type: {
type: () => NeonEmptyStateType;
default: () => NeonEmptyStateType;
};
/**
* The accent color of the image. This is a functional color from the NeonFunctionalColor enum.
*/
imageColor: {
type: () => NeonFunctionalColor;
default: () => NeonFunctionalColor;
};
/**
* The title of the empty state component.
*/
title: {
type: StringConstructor;
required: true;
};
/**
* A subtitle of the empty state component.
*/
subtitle: {
type: StringConstructor;
};
/**
* A list of CTA buttons to display in the empty state. These are
* NeonButtonModel objects.
*/
ctas: {
type: () => Array<NeonButtonModel>;
default: () => never[];
};
}>, {
emit: (event: "cta-click", ...args: any[]) => void;
NeonButtonStyle: typeof NeonButtonStyle;
NeonFunctionalColor: typeof NeonFunctionalColor;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "cta-click"[], "cta-click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
/**
* The image to display in the empty state. This is an icon name used by the NeonIcon component, typically an
* svg illustration.
*/
image: {
type: StringConstructor;
};
/**
* The type of empty state to render, either an empty state or an error.
*/
type: {
type: () => NeonEmptyStateType;
default: () => NeonEmptyStateType;
};
/**
* The accent color of the image. This is a functional color from the NeonFunctionalColor enum.
*/
imageColor: {
type: () => NeonFunctionalColor;
default: () => NeonFunctionalColor;
};
/**
* The title of the empty state component.
*/
title: {
type: StringConstructor;
required: true;
};
/**
* A subtitle of the empty state component.
*/
subtitle: {
type: StringConstructor;
};
/**
* A list of CTA buttons to display in the empty state. These are
* NeonButtonModel objects.
*/
ctas: {
type: () => Array<NeonButtonModel>;
default: () => never[];
};
}>> & Readonly<{
"onCta-click"?: ((...args: any[]) => any) | undefined;
}>, {
type: NeonEmptyStateType;
imageColor: NeonFunctionalColor;
ctas: NeonButtonModel[];
}, {}, {
NeonButton: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
href: {
type: StringConstructor;
default: null;
};
label: {
type: StringConstructor;
default: null;
};
size: {
type: () => import("../../../neon").NeonButtonSize;
default: import("../../../neon").NeonButtonSize;
};
color: {
type: () => NeonFunctionalColor;
default: NeonFunctionalColor;
};
inverse: {
type: BooleanConstructor;
default: boolean;
};
alternateColor: {
type: () => NeonFunctionalColor;
default: null;
};
icon: {
type: StringConstructor;
default: null;
};
iconAriaLabel: {
type: StringConstructor;
};
iconPosition: {
type: () => import("../../../neon").NeonHorizontalPosition;
default: import("../../../neon").NeonHorizontalPosition;
};
buttonStyle: {
type: () => NeonButtonStyle;
default: NeonButtonStyle;
};
buttonType: {
type: () => import("../../../neon").NeonButtonType;
default: import("../../../neon").NeonButtonType;
};
state: {
type: () => import("../../../neon").NeonState;
default: import("../../../neon").NeonState;
};
disabled: {
type: BooleanConstructor;
default: boolean;
};
transparent: {
type: BooleanConstructor;
default: boolean;
};
outline: {
type: BooleanConstructor;
default: boolean;
};
circular: {
type: BooleanConstructor;
default: null;
};
fullWidth: {
type: BooleanConstructor;
default: null;
};
indicator: {
type: BooleanConstructor;
default: boolean;
};
indicatorExpanded: {
type: BooleanConstructor;
default: null;
};
}>, {
iconName: import("vue").ComputedRef<string>;
classes: import("vue").ComputedRef<(string | false | {
[x: string]: boolean | "" | NeonFunctionalColor;
'neon-button--text-transparent': boolean;
'neon-button--disabled': boolean;
'neon-button--inverse': boolean;
'neon-button--circular': boolean;
'neon-button--no-outline': boolean;
'neon-button--full-width': boolean;
'neon-button--with-icon neon-button--icon-only': boolean | "";
'neon-button--with-icon neon-button--icon-left': boolean | "";
'neon-button--with-icon neon-button--icon-right': boolean | "";
})[]>;
button: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
attrs: {
[x: string]: unknown;
};
sanitizedAttributes: import("vue").ComputedRef<{
[x: string]: unknown;
}>;
clickLink: () => void | undefined;
clickButton: () => void;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
href: {
type: StringConstructor;
default: null;
};
label: {
type: StringConstructor;
default: null;
};
size: {
type: () => import("../../../neon").NeonButtonSize;
default: import("../../../neon").NeonButtonSize;
};
color: {
type: () => NeonFunctionalColor;
default: NeonFunctionalColor;
};
inverse: {
type: BooleanConstructor;
default: boolean;
};
alternateColor: {
type: () => NeonFunctionalColor;
default: null;
};
icon: {
type: StringConstructor;
default: null;
};
iconAriaLabel: {
type: StringConstructor;
};
iconPosition: {
type: () => import("../../../neon").NeonHorizontalPosition;
default: import("../../../neon").NeonHorizontalPosition;
};
buttonStyle: {
type: () => NeonButtonStyle;
default: NeonButtonStyle;
};
buttonType: {
type: () => import("../../../neon").NeonButtonType;
default: import("../../../neon").NeonButtonType;
};
state: {
type: () => import("../../../neon").NeonState;
default: import("../../../neon").NeonState;
};
disabled: {
type: BooleanConstructor;
default: boolean;
};
transparent: {
type: BooleanConstructor;
default: boolean;
};
outline: {
type: BooleanConstructor;
default: boolean;
};
circular: {
type: BooleanConstructor;
default: null;
};
fullWidth: {
type: BooleanConstructor;
default: null;
};
indicator: {
type: BooleanConstructor;
default: boolean;
};
indicatorExpanded: {
type: BooleanConstructor;
default: null;
};
}>> & Readonly<{
onClick?: ((...args: any[]) => any) | undefined;
}>, {
color: NeonFunctionalColor;
icon: string;
label: string;
inverse: boolean;
disabled: boolean;
href: string;
size: import("../../../neon").NeonButtonSize;
alternateColor: NeonFunctionalColor;
outline: boolean;
iconPosition: import("../../../neon").NeonHorizontalPosition;
buttonStyle: NeonButtonStyle;
buttonType: import("../../../neon").NeonButtonType;
state: import("../../../neon").NeonState;
transparent: boolean;
circular: boolean;
fullWidth: boolean;
indicator: boolean;
indicatorExpanded: boolean;
}, {}, {
NeonExpansionIndicator: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
expanded: {
type: BooleanConstructor;
default: boolean;
};
inverse: {
type: BooleanConstructor;
default: boolean;
};
disabled: {
type: BooleanConstructor;
default: boolean;
};
color: {
type: () => NeonFunctionalColor;
default: null;
};
}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
expanded: {
type: BooleanConstructor;
default: boolean;
};
inverse: {
type: BooleanConstructor;
default: boolean;
};
disabled: {
type: BooleanConstructor;
default: boolean;
};
color: {
type: () => NeonFunctionalColor;
default: null;
};
}>> & Readonly<{}>, {
color: NeonFunctionalColor;
inverse: boolean;
disabled: boolean;
expanded: boolean;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
NeonIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
name: {
type: StringConstructor;
required: true;
};
id: {
type: StringConstructor;
default: null;
};
color: {
type: () => NeonFunctionalColor;
default: null; /**
* Emitted when a CTA button is clicked. The index of the button in the ctas array is passed as the first argument.
* @type {number} The index of the button clicked. This corresponds to the index of the button in the ctas property
* array.
*/
};
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; /**
* Emitted when a CTA button is clicked. The index of the button in the ctas array is passed as the first argument.
* @type {number} The index of the button clicked. This corresponds to the index of the button in the ctas property
* array.
*/
};
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;
};
id: {
type: StringConstructor;
default: null;
};
color: {
type: () => NeonFunctionalColor;
default: null; /**
* Emitted when a CTA button is clicked. The index of the button in the ctas array is passed as the first argument.
* @type {number} The index of the button clicked. This corresponds to the index of the button in the ctas property
* array.
*/
};
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; /**
* Emitted when a CTA button is clicked. The index of the button in the ctas array is passed as the first argument.
* @type {number} The index of the button clicked. This corresponds to the index of the button in the ctas property
* array.
*/
};
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>;
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
NeonIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
name: {
type: StringConstructor;
required: true;
};
id: {
type: StringConstructor;
default: null;
};
color: {
type: () => NeonFunctionalColor;
default: null; /**
* Emitted when a CTA button is clicked. The index of the button in the ctas array is passed as the first argument.
* @type {number} The index of the button clicked. This corresponds to the index of the button in the ctas property
* array.
*/
};
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; /**
* Emitted when a CTA button is clicked. The index of the button in the ctas array is passed as the first argument.
* @type {number} The index of the button clicked. This corresponds to the index of the button in the ctas property
* array.
*/
};
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>;
NeonInline: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
gap: {
type: () => import("../../../neon").NeonLayoutSize;
default: () => import("../../../neon").NeonLayoutSize;
};
breakpoint: {
type: () => import("../../../neon").NeonResponsive;
};
}>, {}, {}, {}, {}, 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;
};
}>> & 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;