Improve gl-paginated-list

Using gl-paginated-list I've encountered a few issues that make it unusable in certain scenarios:

Issues

Pagination can't be connected to backend pagination because

• The total of the elements is derived from the list length and not a separate prop
• no event / v-model change is 'executed' when the page change

Filter function fails on integer props

The code assumes that the prop used to filter is a string listItem[this.filter].toLowerCase() while this is not always the case

The code always executes the filtering even when filterable is set to false

The header is always there even when empty

When filterable is set to false the header is an empty box, in addition with gitlab style turned on it becomes a grey empty box.

The header is shown even in responsive mode

Proposal

• add a total property
• if total property is present use it, otherwise calculate it from list.length
• execute filter only when a filter is set and filterable === true
• enable .sync modifier on the page property ( https://vuejs.org/v2/guide/components-custom-events.html#sync-Modifier )
• if the header should not be drawn hide it ( this may be swapped to have a prop that controls this, thoughts welcomed! )
• add an empty message slot to use instead of the props ( and maintain the props as well )
• rework the watchers around pageIndex to work with above requirements.
• improve responsive layout