Add note for empty state to the lists using slot

1 files changed, 9 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']
+    }
   })
 )