41 lines
1.4 KiB
JavaScript
41 lines
1.4 KiB
JavaScript
import Vue from 'vue'
|
|
import map from 'lodash/map'
|
|
import isEmpty from 'lodash/isEmpty'
|
|
import './with_list.scss'
|
|
|
|
const defaultEntryPropsGetter = entry => ({ entry })
|
|
const defaultKeyGetter = entry => entry.id
|
|
|
|
const withList = ({
|
|
getEntryProps = defaultEntryPropsGetter, // function to accept entry and index values and return props to be passed into the item component
|
|
getKey = defaultKeyGetter // funciton to accept entry and index values and return key prop value
|
|
}) => (ItemComponent) => (
|
|
Vue.component('withList', {
|
|
props: [
|
|
'entries', // array of entry
|
|
'entryProps', // additional props to be passed into each entry
|
|
'entryListeners' // additional event listeners to be passed into each entry
|
|
],
|
|
render (createElement) {
|
|
return (
|
|
<div class="with-list">
|
|
{map(this.entries, (entry, index) => {
|
|
const props = {
|
|
key: getKey(entry, index),
|
|
props: {
|
|
...this.$props.entryProps,
|
|
...getEntryProps(entry, index)
|
|
},
|
|
on: this.$props.entryListeners
|
|
}
|
|
return <ItemComponent {...props} />
|
|
})}
|
|
{isEmpty(this.entries) && this.$slots.empty && <div class="with-list-empty-content faint">{this.$slots.empty}</div>}
|
|
</div>
|
|
)
|
|
}
|
|
})
|
|
)
|
|
|
|
export default withList
|