Vue admin table manually reloading and adjusting query params

[nfourtythree]

Description

To give greater extensibility and flexibility this PR introduces new properties, methods and events for the Vue admin table.

The ability to reload a table manually (using Craft.VueAdminTable.reload():

const adminTable = new Craft.VueAdminTable({
    // ...
});

// Reload table every 15 seconds
setInterval(function() {
    adminTable.reload();
}, 15000);

The ability to listen to and manipulate the query parameters that are created for the table data endpoint (using the onQueryParams callback):

new Craft.VueAdminTable({
  // ...
  onQueryParams: function(params) { 
    console.log('Query Params:', params); 

    params.foo = 'bar';
    return params; 
  },
  // ...
});

A full (although simplified) example of using this together could be passing a value of a custom text box to the endpoint:

<input type="text" name="foo" value="">
<div id="vue-admin-table"></div>

{% js %}
var columns = [
    { name: '__slot:title', title: 'title'  },
];

const $input = document.querySelector('input[name="foo"]');

const adminTable = new Craft.VueAdminTable({
    columns: columns,
    container: '#vue-admin-table',
    tableDataEndpoint: Craft.getActionUrl('my/custom/endpoint'),
    onQueryParams: function(params) {
        if ($input.value) {
            params.foo = $input.value;
        }
        return params;
    }
 });

 $fooInput.addEventListener('blur', function(ev) {
    adminTable.reload();
 });
{% endjs %}

Related issues

#13389

[timkelty]

No notes. 10/10 Would review again.