Add note for empty state to the lists using slot

This commit is contained in:
taehoon 2019-02-14 03:16:37 -05:00
parent b4a5b5203f
commit a5162bd636
3 changed files with 21 additions and 4 deletions

View file

@ -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']
}
})
)