fix(data-table): replace vue-events with native vue $emit and $on; re…

…move element ids, scoped some specific styles and fix some ui issues

package.json

@@ -31,8 +31,7 @@
     "vue2-circle-progress": "^1.0.3",
     "vuetable-2": "^1.6.5",
     "vuex": "2.1.1",
-    "vuex-router-sync": "4.0.2",
-    "vue-events": "^3.0.1"
+    "vuex-router-sync": "4.0.2"
   },
   "devDependencies": {
     "autoprefixer": "^6.7.2",

src/components/common/vuestic-datatable/DataTable.vue

@@ -1,9 +1,10 @@
 <template>
   <div>
     <div class="d-flex justify-content-between">
-      <filter-bar></filter-bar>
+      <filter-bar @filter="onFilterSet"></filter-bar>
       <items-per-page :options="itemsPerPage"
-                      :defaultPerPage="perPage"></items-per-page>
+                      :defaultPerPage="perPage"
+                      @items-per-page="onItemsPerPage"></items-per-page>
     </div>
     <div class="table-responsive">
       <vuetable ref="vuetable"

src/components/common/vuestic-datatable/FilterBar.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="form-group with-icon-left">
     <div class="input-group">
-      <input id="input-icon-left" name="input-icon-left" @keyup="doFilter" v-model="filterText" required/>
+      <input id="input-icon-left" name="input-icon-left" @keyup="doFilter()" v-model="filterText" required/>
       <i class="glyphicon glyphicon-search icon-left input-icon search-icon"></i>
       <label class="control-label" for="input-icon-left">Search</label><i class="bar"></i>
     </div>
@@ -18,7 +18,7 @@
     },
     methods: {
       doFilter () {
-        this.$events.fire('filter-set', this.filterText)
+        this.$emit('filter', this.filterText)
       }
     }
   }

src/components/common/vuestic-datatable/ItemsPerPage.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="form-group dropdown" v-dropdown.closeOnMenuClick>
-    <button id="itemsPerPageBtn" class="btn btn-primary btn-sm dropdown-toggle green-box-shadow" type="button"
+    <button id="itemsPerPageBtn" class="btn btn-primary btn-sm dropdown-toggle" type="button"
             data-toggle="dropdown">
       {{selected}} per page
       <i class="ion-chevron-down arrow-down"></i>
     </button>
-    <div id="itemsPerPageMenu" class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
       <a class="dropdown-item" v-for="option in options" @click="selectedItemsPerPage(option.value)">{{option.value}} per page</a>
     </div>
   </div>
@@ -36,16 +36,16 @@
     methods: {
       selectedItemsPerPage (optionValue) {
         this.selected = optionValue
-        this.$events.fire('items-per-page', this.selected)
+        this.$emit('items-per-page', this.selected)
       }
     }
   }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
   @import "../../../sass/variables";
 
-  .btn#itemsPerPageBtn, #itemsPerPageMenu {
+  .btn.dropdown-toggle, .dropdown-menu {
     min-width: 13rem;
     max-width: 13rem;
   }

src/sass/_override-bootstrap.scss

@@ -315,6 +315,11 @@ h4, .h4 {
   font-size: 1rem;
 }
 
+th.sortable:hover {
+  color: $vue-green !important;
+  opacity: .6;
+}
+
 //Badges
 
 .badge {