|
|
|
@ -1,5 +1,7 @@
|
|
|
|
|
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
|
|
|
|
@ -9,6 +11,11 @@ const withList = ({
|
|
|
|
|
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">
|
|
|
|
@ -23,10 +30,10 @@ const withList = ({
|
|
|
|
|
}
|
|
|
|
|
return <ItemComponent {...props} />
|
|
|
|
|
})}
|
|
|
|
|
{isEmpty(this.entries) && this.$slots.empty && <div class="with-list-empty-content faint">{this.$slots.empty}</div>}
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
},
|
|
|
|
|
props: ['entries', 'entryProps', 'entryListeners']
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|