added base multiselect functionality

assets/js/Components/Listing/Row.vue

@@ -1,5 +1,5 @@
 <template>
-  <transition-group name="quickeditor" tag="div" class="listing--container" :class="{'is-dahsboard': type === 'dashboard'}">
+  <transition-group name="quickeditor" tag="div" class="listing--container" :class="{'is-dashboard': type === 'dashboard'}">
     
     <!-- check box -->
     <row-checkbox

assets/js/Components/Listing/Row/_Checkbox.vue

@@ -22,9 +22,9 @@
     watch: {
       selected(){
         if(this.selected){
-
+          this.$root.$emit('listing-row-selected', this.recordId);
         } else {
-
+          this.$root.$emit('listing-row-unselected', this.recordId);
         }
       }
     },
@@ -33,9 +33,7 @@
         let selected = this.selected;
         if(selected){
           selected = true
-          this.$root.$emit('listing-row-selected', this.recordId);
         } else {
-          this.$root.$emit('listing-row-unselected', this.recordId);
           selected = false
         }
       },

assets/js/Components/Listing/SelectedBox.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="card mb-3" v-if="recordCount > 0">
+    <div class="card-header">
+      <span class="badge is-primary mr-1">{{recordCount}}</span>
+      <template v-if="recordCount === 1">{{ctSingular}}</template>
+      <template v-else>{{ct}}</template>
+      Selected
+    </div>
+    <div class="card-body">
+      <h4>selected record ids passed</h4>
+     <p><em>(these can be used with something like axios to bulk modify/delete)</em></p> 
+<pre>
+<code>{{records}}</code>
+</pre> 
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "listing-selected-box",
+  props: ["ct", "ctSingular"],
+  mounted() {
+    this.$root.$on('listing-row-selected', id => {
+      this.recordCount++
+      this.records.push(id);
+    });
+    this.$root.$on('listing-row-unselected', id => {
+      this.recordCount--
+      let index = this.records.indexOf(id);
+      if (index > -1) {
+        this.records.splice(index, 1);
+      }
+    });
+  },
+  data: () => {
+    return {
+      recordCount: 0,
+      records: []
+    };
+  },
+  methods:{
+    
+  }
+};
+</script>

assets/js/Views/listing.js

@@ -8,6 +8,7 @@ import draggable from 'vuedraggable'
  */
 import Filter from "../Components/Listing/Filter";
 import Row from "../Components/Listing/Row";
+import SelectedBox from "../Components/Listing/SelectedBox";
 
 /**
  * Register Components
@@ -15,5 +16,6 @@ import Row from "../Components/Listing/Row";
 Vue.component("listing-filter", Filter);
 Vue.component("listing-row", Row);
 Vue.component("draggable", draggable);
+Vue.component("listing-selected-box", SelectedBox);
 
 new Vue({ el: "#listing", name: "listing" });

assets/scss/modules/base/_badge.scss

@@ -0,0 +1,15 @@
+//** Base | Badge
+
+.badge{
+  &.is-primary{
+    background: var(--primary);
+    color: var(--foreground);
+    padding: 0 $spacer / 4;
+    text-align: center;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: $font-weight-bold;
+    border-radius: $border-radius;
+  }
+}

assets/scss/modules/base/base.scss

@@ -2,4 +2,5 @@
 
 @import '_status';
 @import '_pagination';
-@import '_notification'
+@import '_notification';
+@import '_badge';

assets/scss/modules/listing/_row.scss

@@ -32,9 +32,6 @@ $checkbox-row-width: 30px;
       top: 0;
       width: 100%;
       height: 100%;
-      &:hover{
-        cursor: pointer;
-      }
       &:before, &:after{
         left: $spacer / 4;
         top: 50%;
@@ -184,6 +181,7 @@ $checkbox-row-width: 30px;
 
 .quickedit__row{
   min-height: 200px;
+  flex: auto;
   box-shadow: $card-box-shadow;
   display: flex;
   z-index: 99;

templates/content/listing.twig

@@ -20,6 +20,11 @@
 
 {% block aside %}
 
+    <listing-selected-box
+      ct="{{ contenttype.name }}"
+      ct-singular="{{ contenttype.singular_name }}"
+    ></listing-selected-box>
+
     <div class="card">
         <div class="card-header">
             {{ 'title.contentlisting'|trans }}