diff options
Diffstat (limited to 'src/hocs')
| -rw-r--r-- | src/hocs/with_list/with_list.js | 11 | ||||
| -rw-r--r-- | src/hocs/with_list/with_list.scss | 6 |
2 files changed, 15 insertions, 2 deletions
diff --git a/src/hocs/with_list/with_list.js b/src/hocs/with_list/with_list.js index e5770cee..896f8fc8 100644 --- a/src/hocs/with_list/with_list.js +++ b/src/hocs/with_list/with_list.js @@ -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'] + } }) ) diff --git a/src/hocs/with_list/with_list.scss b/src/hocs/with_list/with_list.scss new file mode 100644 index 00000000..c6e13d5b --- /dev/null +++ b/src/hocs/with_list/with_list.scss @@ -0,0 +1,6 @@ +.with-list { + &-empty-content { + text-align: center; + padding: 10px; + } +}
\ No newline at end of file |