brotherton-erpnext/erpnext/public/js/hub/components/ItemCardsContainer.vue

<template>
	<div class="item-cards-container">
		<empty-state
			v-if="items.length === 0"
			:message="empty_state_message"
			:bordered="true"
			:height="80"
		>
		</empty-state>
		<item-card
			v-for="item in items"
			:key="item[item_id_fieldname]"
			:item="item"
			:item_id_fieldname="item_id_fieldname"
			:on_click="on_click"
			:allow_clear="editable"
			@remove-item="$emit('remove-item', item[item_id_fieldname])"
		>
		</item-card>
	</div>
</template>

<script>
import ItemCard from './ItemCard.vue';
import EmptyState from './EmptyState.vue';

export default {
	name: 'item-cards-container',
	props: {
		items: Array,
		item_id_fieldname: String,
		on_click: Function,
		editable: Boolean,

		empty_state_message: String,
		empty_state_height: Number,
		empty_state_bordered: Boolean
	},
	components: {
		ItemCard,
		EmptyState
	},
	watch: {
		items() {
			// TODO: handling doesn't work
			frappe.dom.handle_broken_images($(this.$el));
		}
	}
}
</script>

<style scoped>
	.item-cards-container {
		margin: 0 -15px;
		overflow: overlay;
	}
</style>