@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
133 lines (132 loc) • 4.15 kB
TypeScript
import { NeonButtonStyle } from '@/common/enums/NeonButtonStyle';
import { NeonSize } from '@/common/enums/NeonSize';
import { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';
import type { NeonCardListModel } from '@/common/models/NeonCardListModel';
/**
* Represent lists of objects as cards. This is intended to be a more responsive replacement for tables. This component
* will display a list of items as cards with a count (x of y) and a <em>Show more</em> button to load more results.
* There is also a slot for adding filtering or other content above the list. A slot is provided with card model & index
* parameters for customising how to display the model for each card.
*/
declare const _default: import("vue").DefineComponent<{
/**
* Model for a card in the list. This is passed through to the #card slot allowing the parent component to provide
* the card layout.
*/
model: {
type: () => Array<NeonCardListModel>;
required: true;
};
/**
* For pagination - the total count of records including those not displayed.
*/
total: {
type: NumberConstructor;
default: null;
};
/**
* Specify a hover color for the cards.
*/
color: {
type: () => NeonFunctionalColor;
default: null;
};
/**
* Specify cards are clickable. This will return click events when cards are clicked on. NOTE: use the href in the
* card model instead of clickable=true if cards are links.
*/
clickable: {
type: BooleanConstructor;
default: boolean;
};
/**
* override the default 'x of y' text.
*/
ofLabel: {
type: StringConstructor;
default: string;
};
/**
* override the 'Show more' text.
*/
showMoreLabel: {
type: StringConstructor;
default: string;
};
/**
* override the 'End of results' text.
*/
endOfResultsLabel: {
type: StringConstructor;
default: string;
};
}, {
emit: (event: "click" | "show-more", ...args: any[]) => void;
n: (value: number) => string;
NeonButtonStyle: typeof NeonButtonStyle;
NeonFunctionalColor: typeof NeonFunctionalColor;
NeonSize: typeof NeonSize;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "show-more")[], "click" | "show-more", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
/**
* Model for a card in the list. This is passed through to the #card slot allowing the parent component to provide
* the card layout.
*/
model: {
type: () => Array<NeonCardListModel>;
required: true;
};
/**
* For pagination - the total count of records including those not displayed.
*/
total: {
type: NumberConstructor;
default: null;
};
/**
* Specify a hover color for the cards.
*/
color: {
type: () => NeonFunctionalColor;
default: null;
};
/**
* Specify cards are clickable. This will return click events when cards are clicked on. NOTE: use the href in the
* card model instead of clickable=true if cards are links.
*/
clickable: {
type: BooleanConstructor;
default: boolean;
};
/**
* override the default 'x of y' text.
*/
ofLabel: {
type: StringConstructor;
default: string;
};
/**
* override the 'Show more' text.
*/
showMoreLabel: {
type: StringConstructor;
default: string;
};
/**
* override the 'End of results' text.
*/
endOfResultsLabel: {
type: StringConstructor;
default: string;
};
}>> & {
onClick?: ((...args: any[]) => any) | undefined;
"onShow-more"?: ((...args: any[]) => any) | undefined;
}, {
total: number;
color: NeonFunctionalColor;
clickable: boolean;
ofLabel: string;
showMoreLabel: string;
endOfResultsLabel: string;
}, {}>;
export default _default;