@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
1,298 lines (1,297 loc) • 110 kB
TypeScript
import type { NeonBreadcrumbLink } from '@/model/navigation/breadcrumbs/NeonBreadcrumbLink';
import { NeonFunctionalColor } from '@/model/common/color/NeonFunctionalColor';
import type { NeonLoadOnDemandModel } from '@/model/layout/card-list/NeonLoadOnDemandModel';
import type { NeonPaginationModel } from '@/model/navigation/pagination/NeonPaginationModel';
import type { NeonCardListModel } from '@/model/layout/card-list/NeonCardListModel';
import type { NeonIdentifiable } from '@/model/common/entity/NeonIdentifiable';
import type { NeonSelectable } from '@/model/common/entity/NeonSelectable';
/**
* A page level layout component for displaying a list with a page header, filter bar, card list, pagination & an empty
* state. Use this component directly inside the NeonPage <em>contents</em> slot.
*/
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;
};
/**
* Breadcrumbs to display above the header.
*/
breadcrumbs: {
type: () => NeonBreadcrumbLink[];
default: () => never[];
};
/**
* Whether to display a back button
*/
backButton: {
type: BooleanConstructor;
default: boolean;
};
/**
* Override the label for the back button
*/
backLabel: {
type: StringConstructor;
default: string;
};
/**
* Items to display as cards. Each item should be a NeonCardListModel.
*/
items: {
type: () => Array<NeonCardListModel<NeonIdentifiable | (NeonIdentifiable & NeonSelectable)>>;
required: true;
};
/**
* Loading state for pagination, set when loading a new page.
*/
loading: {
type: BooleanConstructor;
};
/**
* Specify a selection/loading/hover color for the cards.
*/
color: {
type: () => NeonFunctionalColor;
default: () => NeonFunctionalColor;
};
/**
* Make cards selectable.
*/
selectable: {
type: BooleanConstructor;
default: boolean;
};
/**
* Model for configuring the on demand loading layout.
*/
loadOnDemand: {
type: () => NeonLoadOnDemandModel;
};
/**
* Model for configuring pagination, either pagination or loadOnDemand should be provided.
*/
pagination: {
type: () => NeonPaginationModel;
};
}>, {
emit: (event: "page-change" | "show-more" | "toggle-selected", ...args: any[]) => void;
initializing: import("vue").Ref<boolean, boolean>;
slots: Readonly<{
[name: string]: import("vue").Slot<any> | undefined;
}>;
showMore: () => void;
toggleSelected: (id: string, selected: boolean) => void;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("page-change" | "show-more" | "toggle-selected")[], "page-change" | "show-more" | "toggle-selected", 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;
};
/**
* Breadcrumbs to display above the header.
*/
breadcrumbs: {
type: () => NeonBreadcrumbLink[];
default: () => never[];
};
/**
* Whether to display a back button
*/
backButton: {
type: BooleanConstructor;
default: boolean;
};
/**
* Override the label for the back button
*/
backLabel: {
type: StringConstructor;
default: string;
};
/**
* Items to display as cards. Each item should be a NeonCardListModel.
*/
items: {
type: () => Array<NeonCardListModel<NeonIdentifiable | (NeonIdentifiable & NeonSelectable)>>;
required: true;
};
/**
* Loading state for pagination, set when loading a new page.
*/
loading: {
type: BooleanConstructor;
};
/**
* Specify a selection/loading/hover color for the cards.
*/
color: {
type: () => NeonFunctionalColor;
default: () => NeonFunctionalColor;
};
/**
* Make cards selectable.
*/
selectable: {
type: BooleanConstructor;
default: boolean;
};
/**
* Model for configuring the on demand loading layout.
*/
loadOnDemand: {
type: () => NeonLoadOnDemandModel;
};
/**
* Model for configuring pagination, either pagination or loadOnDemand should be provided.
*/
pagination: {
type: () => NeonPaginationModel;
};
}>> & Readonly<{
"onPage-change"?: ((...args: any[]) => any) | undefined;
"onShow-more"?: ((...args: any[]) => any) | undefined;
"onToggle-selected"?: ((...args: any[]) => any) | undefined;
}>, {
color: NeonFunctionalColor;
breadcrumbs: NeonBreadcrumbLink[];
loading: boolean;
backButton: boolean;
backLabel: string;
selectable: boolean;
}, {}, {
NeonSplashLoader: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
color: {
type: () => NeonFunctionalColor;
default: NeonFunctionalColor;
};
size: {
type: () => import("../../../neon").NeonSplashLoaderSize;
default: import("../../../neon").NeonSplashLoaderSize;
};
overlay: {
type: BooleanConstructor;
default: boolean;
};
fullscreen: {
type: BooleanConstructor;
default: boolean;
};
}>, {
ready: import("vue").Ref<boolean, boolean>;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
color: {
type: () => NeonFunctionalColor;
default: NeonFunctionalColor;
};
size: {
type: () => import("../../../neon").NeonSplashLoaderSize;
default: import("../../../neon").NeonSplashLoaderSize;
};
overlay: {
type: BooleanConstructor;
default: boolean;
};
fullscreen: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{}>, {
color: NeonFunctionalColor;
size: import("../../../neon").NeonSplashLoaderSize;
overlay: boolean;
fullscreen: boolean;
}, {}, {
NeonIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
name: {
type: StringConstructor;
required: true;
}; /**
* Breadcrumbs to display above the header.
*/
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;
}; /**
* Breadcrumbs to display above the header.
*/
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>;
NeonEmptyState: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
image: {
type: StringConstructor;
};
type: {
type: () => import("../../../neon").NeonEmptyStateType;
default: () => import("../../../neon").NeonEmptyStateType;
};
imageColor: {
type: () => NeonFunctionalColor;
default: () => NeonFunctionalColor;
};
title: {
type: StringConstructor;
required: true;
};
/**
* Whether to display a back button
*/
subtitle: {
type: StringConstructor;
};
ctas: {
type: () => import("../../../neon").NeonButtonModel[];
default: () => never[];
};
}>, {
emit: (event: "cta-click", ...args: any[]) => void;
NeonButtonStyle: typeof import("../../../neon").NeonButtonStyle;
NeonFunctionalColor: typeof NeonFunctionalColor;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "cta-click"[], "cta-click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
image: {
type: StringConstructor;
};
type: {
type: () => import("../../../neon").NeonEmptyStateType;
default: () => import("../../../neon").NeonEmptyStateType;
};
imageColor: {
type: () => NeonFunctionalColor;
default: () => NeonFunctionalColor;
};
title: {
type: StringConstructor;
required: true;
};
/**
* Whether to display a back button
*/
subtitle: {
type: StringConstructor;
};
ctas: {
type: () => import("../../../neon").NeonButtonModel[];
default: () => never[];
};
}>> & Readonly<{
"onCta-click"?: ((...args: any[]) => any) | undefined;
}>, {
type: import("../../../neon").NeonEmptyStateType;
imageColor: NeonFunctionalColor;
ctas: import("../../../neon").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; /**
* The subtitle of the header.
*/
}; /**
* The subtitle of the header.
*/
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: () => import("../../../neon").NeonButtonStyle;
default: import("../../../neon").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; /**
* The subtitle of the header.
*/
}; /**
* The subtitle of the header.
*/
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: () => import("../../../neon").NeonButtonStyle;
default: import("../../../neon").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: import("../../../neon").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;
}; /**
* Breadcrumbs to display above the header.
*/
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;
}; /**
* Breadcrumbs to display above the header.
*/
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;
}; /**
* Breadcrumbs to display above the header.
*/
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;
}; /**
* Breadcrumbs to display above the header.
*/
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>;
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
NeonIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
name: {
type: StringConstructor;
required: true;
}; /**
* Breadcrumbs to display above the header.
*/
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;
}; /**
* Breadcrumbs to display above the header.
*/
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>;
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>;
NeonCardList: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
items: {
type: () => NeonCardListModel<NeonIdentifiable | (NeonIdentifiable & NeonSelectable)>[];
required: true;
};
color: {
type: () => NeonFunctionalColor;
default: null; /**
* Make cards selectable.
*/
}; /**
* Make cards selectable.
*/
selectable: {
type: BooleanConstructor;
default: boolean; /**
* Model for configuring the on demand loading layout.
*/
}; /**
* Model for configuring the on demand loading layout.
*/
loadOnDemand: {
type: () => NeonLoadOnDemandModel; /**
* Model for configuring pagination, either pagination or loadOnDemand should be provided.
*/
}; /**
* Model for configuring pagination, either pagination or loadOnDemand should be provided.
*/
pagination: {
type: () => NeonPaginationModel;
};
loading: {
type: BooleanConstructor;
};
}>, {
emit: (event: "page-change" | "show-more" | "toggle-selected", ...args: any[]) => void;
n: typeof import("../../../neon").NeonNumberUtils.formatNumber;
NeonButtonStyle: typeof import("../../../neon").NeonButtonStyle;
NeonFunctionalColor: typeof NeonFunctionalColor;
NeonSize: typeof import("../../../neon").NeonSize;
ofLabel: import("vue").ComputedRef<string | undefined>;
showMoreLabel: import("vue").ComputedRef<string | undefined>;
endOfResultsLabel: import("vue").ComputedRef<string | undefined>;
total: import("vue").ComputedRef<number>;
slots: Readonly<{
[name: string]: import("vue").Slot<any> | undefined;
}>;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("page-change" | "show-more" | "toggle-selected")[], "page-change" | "show-more" | "toggle-selected", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
items: {
type: () => NeonCardListModel<NeonIdentifiable | (NeonIdentifiable & NeonSelectable)>[];
required: true;
};
color: {
type: () => NeonFunctionalColor;
default: null; /**
* Make cards selectable.
*/
}; /**
* Make cards selectable.
*/
selectable: {
type: BooleanConstructor;
default: boolean; /**
* Model for configuring the on demand loading layout.
*/
}; /**
* Model for configuring the on demand loading layout.
*/
loadOnDemand: {
type: () => NeonLoadOnDemandModel; /**
* Model for configuring pagination, either pagination or loadOnDemand should be provided.
*/
}; /**
* Model for configuring pagination, either pagination or loadOnDemand should be provided.
*/
pagination: {
type: () => NeonPaginationModel;
};
loading: {
type: BooleanConstructor;
};
}>> & Readonly<{
"onPage-change"?: ((...args: any[]) => any) | undefined;
"onShow-more"?: ((...args: any[]) => any) | undefined;
"onToggle-selected"?: ((...args: any[]) => any) | undefined;
}>, {
color: NeonFunctionalColor;
loading: boolean;
selectable: boolean;
}, {}, {
NeonSelectableCard: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
modelValue: {
type: BooleanConstructor;
required: true;
};
color: {
type: () => NeonFunctionalColor;
default: NeonFunctionalColor;
};
disabled: {
type: BooleanConstructor;
default: boolean;
};
}>, {
active: import("vue").Ref<boolean, boolean>;
clicked: () => void;
NeonResponsive: typeof import("../../../neon").NeonResponsive;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
modelValue: {
type: BooleanConstructor;
required: true;
};
color: {
type: () => NeonFunctionalColor;
default: NeonFunctionalColor;
};
disabled: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
}>, {
color: NeonFunctionalColor;
disabled: boolean;
}, {}, {
NeonCard: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
orientation: {
type: () => import("../../../neon").NeonOrientation;
default: import("../../../neon").NeonOrientation;
};
size: {
type: () => import("../../../neon").NeonSize;
default: import("../../../neon").NeonSize;
};
horizontalBorders: {
type: BooleanConstructor;
default: boolean;
};
horizontalBreakpoint: {
type: () => import("../../../neon").NeonResponsive;
default: import("../../../neon").NeonResponsive;
};
noBreak: {
type: BooleanConstructor;
default: boolean;
};
}>, {
attrs: {
[x: string]: unknown;
};
NeonOrientation: typeof import("../../../neon").NeonOrientation;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
orientation: {
type: () => import("../../../neon").NeonOrientation;
default: import("../../../neon").NeonOrientation;
};
size: {
type: () => import("../../../neon").NeonSize;
default: import("../../../neon").NeonSize;
};
horizontalBorders: {
type: BooleanConstructor;
default: boolean;
};
horizontalBreakpoint: {
type: () => import("../../../neon").NeonResponsive;
default: import("../../../neon").NeonResponsive;
};
noBreak: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{}>, {
size: import("../../../neon").NeonSize;
orientation: import("../../../neon").NeonOrientation;
horizontalBorders: boolean;
horizontalBreakpoint: import("../../../neon").NeonResponsive;
noBreak: boolean;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
NeonCardHeader: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
NeonSwitch: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
modelValue: {
type: BooleanConstructor;
required: true;
};
label: {
type: StringConstructor;
default: null;
};
indeterminate: {
type: BooleanConstructor;
default: boolean;
};
size: {
type: () => import("../../../neon").NeonSize;
default: () => import("../../../neon").NeonSize;
};
color: {
type: () => NeonFunctionalColor;
default: () => NeonFunctionalColor;
};
switchStyle: {
type: () => import("../../../neon").NeonSwitchStyle;
default: () => import("../../../neon").NeonSwitchStyle;
};
labelPosition: {
type: () => import("../../../neon").NeonHorizontalPosition;
default: () => import("../../../neon").NeonHorizontalPosition;
};
disabled: {
type: BooleanConstructor;
default: boolean;
};
}>, {
checkbox: import("vue").Ref<HTMLInputElement | null, HTMLInputElement | null>;
sanitizedAttributes: import("vue").ComputedRef<{
[x: string]: unknown;
}>;
toggleSwitch: () => void;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "indeterminate-change")[], "update:modelValue" | "indeterminate-change", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
modelValue: {
type: BooleanConstructor;
required: true;
};
label: {
type: StringConstructor;
default: null;
};
indeterminate: {
type: BooleanConstructor;
default: boolean;
};
size: {
type: () => import("../../../neon").NeonSize;
default: () => import("../../../neon").NeonSize;
};
color: {
type: () => NeonFunctionalColor;
default: () => NeonFunctionalColor;
};
switchStyle: {
type: () => import("../../../neon").NeonSwitchStyle;
default: () => import("../../../neon").NeonSwitchStyle;
};
labelPosition: {
type: () => import("../../../neon").NeonHorizontalPosition;
default: () => import("../../../neon").NeonHorizontalPosition;
};
disabled: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
"onIndeterminate-change"?: ((...args: any[]) => any) | undefined;
}>, {
color: NeonFunctionalColor;
label: string;
disabled: boolean;
size: import("../../../neon").NeonSize;
indeterminate: boolean;
switchStyle: import("../../../neon").NeonSwitchStyle;
labelPosition: import("../../../neon").NeonHorizontalPosition;
}, {}, {
NeonIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
name: {
type: StringConstructor;
required: true;
}; /**
* Breadcrumbs to display above the header.
*/
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;
}; /**
* Breadcrumbs to display above the header.
*/
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>;
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
NeonPagination: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
page: {
type: NumberConstructor;
required: true;
};
urlTemplate: {
type: StringConstructor;
};
pageSize: {
type: NumberConstructor;
default: number;
};
total: {
type: NumberConstructor;
required: true;
};
displayFirstAndLast: {
type: BooleanConstructor;
default: boolean;
};
color: {
type: () => NeonFunctionalColor;
default: () => NeonFunctionalColor;
};
}>, {
pageCount: import("vue").ComputedRef<number>;
hidePagination: import("vue").ComputedRef<boolean>;
previousPage: import("vue").ComputedRef<number>;
disabledPrevious: import("vue").ComputedRef<boolean>;
nextPage: import("vue").ComputedRef<number>;
disabledNext: import("vue").ComputedRef<boolean>;
showFirstPageWithEllipsis: import("vue").ComputedRef<boolean>;
showLastPageWithEllipsis: import("vue").ComputedRef<boolean>;
pageRange: import("vue").ComputedRef<number[]>;
url: (page: number) => string | undefined;
emit: (event: "page-change", ...args: any[]) => void;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "page-change"[], "page-change", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
page: {
type: NumberConstructor;
required: true;
};
urlTemplate: {
type: StringConstructor;
};
pageSize: {
type: NumberConstructor;
default: number;
};
total: {
type: NumberConstructor;
required: true;
};
displayFirstAndLast: {
type: BooleanConstructor;
default: boolean;
};
color: {
type: () => NeonFunctionalColor;
default: () => NeonFunctionalColor;
};
}>> & Readonly<{
"onPage-change"?: ((...args: any[]) => any) | undefined;
}>, {
color: NeonFunctionalColor;
pageSize: number;
displayFirstAndLast: boolean;
}, {}, {
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; /**
* The subtitle of the header.
*/
}; /**
* The subtitle of the header.
*/
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: () => import("../../../neon").NeonButtonStyle;
default: import("../../../neon").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: {