@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
78 lines (77 loc) • 2.35 kB
JavaScript
import { defineComponent as t } from "vue";
import r from "../../user-input/button/NeonButton.vue.es.js";
import n from "./card/NeonCardListCard.vue.es.js";
import m from "../inline/NeonInline.vue.es.js";
import l from "../../navigation/link/NeonLink.vue.es.js";
import i from "../stack/NeonStack.vue.es.js";
import { NeonButtonStyle as f } from "../../../common/enums/NeonButtonStyle.es.js";
import { NeonSize as p } from "../../../common/enums/NeonSize.es.js";
import { NeonFunctionalColor as a } from "../../../common/enums/NeonFunctionalColor.es.js";
import { NeonNumberUtils as u } from "../../../common/utils/NeonNumberUtils.es.js";
const w = t({
name: "NeonCardList",
components: {
NeonButton: r,
NeonCardListCard: n,
NeonInline: m,
NeonLink: l,
NeonStack: i
},
props: {
/**
* 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, required: !0 },
/**
* For pagination - the total count of records including those not displayed.
*/
total: { type: Number, default: null },
/**
* Specify a hover color for the cards.
*/
color: { type: String, 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: Boolean, default: !1 },
/**
* override the default 'x of y' text.
*/
ofLabel: { type: String, default: "of" },
/**
* override the 'Show more' text.
*/
showMoreLabel: { type: String, default: "Show more" },
/**
* override the 'End of results' text.
*/
endOfResultsLabel: { type: String, default: "End of results" }
},
emits: [
/**
* Emitted when the 'Show more' button is clicked.
* @type {void}
*/
"show-more",
/**
* Emitted when a cards are clickable & a card is clicked & not disabled.
* @type index {number}
*/
"click"
],
setup(s, { emit: o }) {
return {
emit: o,
n: (e) => u.formatNumber(e),
NeonButtonStyle: f,
NeonFunctionalColor: a,
NeonSize: p
};
}
});
export {
w as default
};
//# sourceMappingURL=NeonCardList.es.js.map