@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
106 lines (105 loc) • 3.37 kB
JavaScript
import { defineComponent as f, computed as t } from "vue";
import u from "../../user-input/button/NeonButton.vue.es.js";
import s from "../inline/NeonInline.vue.es.js";
import c from "../../navigation/link/NeonLink.vue.es.js";
import p from "../../navigation/pagination/NeonPagination.vue.es.js";
import N from "../stack/NeonStack.vue.es.js";
import { NeonButtonStyle as b } from "../../../model/user-input/button/NeonButtonStyle.es.js";
import { NeonSize as g } from "../../../model/common/size/NeonSize.es.js";
import { NeonFunctionalColor as O } from "../../../model/common/color/NeonFunctionalColor.es.js";
import { NeonNumberUtils as L } from "../../../utils/common/number/NeonNumberUtils.es.js";
import y from "./selectable-card/NeonSelectableCard.vue.es.js";
import S from "../../feedback/splash-loader/NeonSplashLoader.vue.es.js";
const x = f({
name: "NeonCardList",
components: {
NeonSelectableCard: y,
NeonPagination: p,
NeonButton: u,
NeonInline: s,
NeonLink: c,
NeonSplashLoader: S,
NeonStack: N
},
props: {
/**
* Items to display as cards. Each item should be a NeonCardListModel.
*/
items: {
type: Array,
required: !0
},
/**
* * Specify a selection, hover & pagination accent color for the cards.
*/
color: { type: String, default: null },
/**
* Make cards selectable.
*/
selectable: { type: Boolean, default: !1 },
/**
* Model for configuring the on-demand loading layout.
*/
loadOnDemand: { type: Object },
/**
* Model for configuring pagination, either pagination or loadOnDemand should be provided.
*/
pagination: { type: Object },
/**
* Show splash loader when loading new items.
*/
loading: { type: Boolean }
},
emits: [
/**
* Emitted when pagination is enabled and the user clicks on a page link (useful for paginated lists which are not
* the main focus of the page, i.e. should not be deep linked).
*
* @type {number} The new page number.
*/
"page-change",
/**
* Emitted when the 'Show more' button is clicked in "on demand" mode.
* @type {void}
*/
"show-more",
/**
* Emitted when in selectable mode and the selected state of a card is toggled.
* @type {string, boolean} - the id of the card which is toggled & the new selected state.
*/
"toggle-selected"
],
setup(e, { emit: a, slots: r }) {
const i = t(() => {
if (!e.pagination && e.loadOnDemand)
return e.loadOnDemand.ofLabel ?? "of";
}), m = t(() => {
var o;
if (!e.pagination)
return ((o = e.loadOnDemand) == null ? void 0 : o.showMoreLabel) ?? "Show more";
}), l = t(() => {
var o;
if (!e.pagination)
return ((o = e.loadOnDemand) == null ? void 0 : o.endOfResultsLabel) ?? "End of results";
}), d = t(() => {
var o, n;
return ((o = e.loadOnDemand) == null ? void 0 : o.total) ?? ((n = e.pagination) == null ? void 0 : n.total) ?? 0;
});
return {
emit: a,
n: L.formatNumber,
NeonButtonStyle: b,
NeonFunctionalColor: O,
NeonSize: g,
ofLabel: i,
showMoreLabel: m,
endOfResultsLabel: l,
total: d,
slots: r
};
}
});
export {
x as default
};
//# sourceMappingURL=NeonCardList.es.js.map