@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
108 lines (107 loc) • 2.92 kB
JavaScript
import { defineComponent as p, ref as s, watch as m } from "vue";
import u from "../card-list/NeonCardList.vue.es.js";
import d from "../../presentation/header/NeonHeader.vue.es.js";
import { NeonFunctionalColor as c } from "../../../model/common/color/NeonFunctionalColor.es.js";
import f from "../../presentation/empty-state/NeonEmptyState.vue.es.js";
import g from "../../feedback/splash-loader/NeonSplashLoader.vue.es.js";
const L = p({
name: "NeonListLayout",
components: {
NeonSplashLoader: g,
NeonEmptyState: f,
NeonCardList: u,
NeonHeader: d
},
props: {
/**
* The title of the header.
*/
title: { type: String, required: !0 },
/**
* The subtitle of the header.
*/
subtitle: { type: String },
/**
* Breadcrumbs to display above the header.
*/
breadcrumbs: { type: Array, default: () => [] },
/**
* Whether to display a back button
*/
backButton: { type: Boolean, default: !0 },
/**
* Override the label for the back button
*/
backLabel: { type: String, default: "Back" },
/**
* Items to display as cards. Each item should be a NeonCardListModel.
*/
items: {
type: Array,
required: !0
},
/**
* Loading state for pagination, set when loading a new page.
*/
loading: { type: Boolean },
/**
* Specify a selection/loading/hover color for the cards.
*/
color: { type: String, default: () => c.Brand },
/**
* 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 }
},
emits: [
/**
* Emitted when the user clicks on a pagination 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(o, { emit: e, slots: r }) {
const t = s(!0), a = () => {
e("show-more");
}, n = (i, l) => {
e("toggle-selected", i, l);
};
return m(
() => o.items,
() => {
t.value && (t.value = !1);
},
{ immediate: !0 }
), {
emit: e,
initializing: t,
slots: r,
showMore: a,
toggleSelected: n
};
}
});
export {
L as default
};
//# sourceMappingURL=NeonListLayout.es.js.map