extract pagination into own module

zero.Web/App/Components/Tables/table.vue

@@ -17,17 +17,7 @@
     </div>
 
     <footer class="ui-table-pagination" v-if="pages > 1">
-      <ui-icon-button class="ui-table-pagination-next" type="white" title="Previous" icon="fth-chevron-left" :disabled="filter.page < 2" @click="setPage(filter.page - 1)" />
-      <ui-dropdown align="bottom">
-        <template v-slot:button>
-          <button type="button" class="ui-button type-blank caret-down ui-table-pagination-select">
-            <span class="ui-button-text" v-localize="{ key: '@ui.page_xofy', tokens: { x: filter.page, y: pages }}"></span>
-            <i class="ui-button-caret fth-chevron-down"></i>
-          </button>
-        </template>
-        <ui-dropdown-list :items="actions" />
-      </ui-dropdown>
-      <ui-icon-button class="ui-table-pagination-next" type="white" title="Next" icon="fth-chevron-right" :disabled="filter.page >= pages" @click="setPage(filter.page + 1)" />
+      <ui-pagination :pages="pages" :page="filter.page" @change="setPage" />
     </footer>
 
   </div>
@@ -36,6 +26,7 @@
 
 <script>
   import TableValueDirective from 'zerocomponents/Tables/table-value.js';
+  import UiPagination from 'zerocomponents/pagination.vue';
   import Strings from 'zeroservices/strings';
   import { each as _each, extend as _extend } from 'underscore';
 
@@ -61,6 +52,8 @@
       }
     },
 
+    components: { UiPagination },
+
     watch: {
       'config.columns': function (val)
       {
@@ -321,19 +314,6 @@
     }
   }
 
-  .ui-table-pagination
-  {
-    display: flex;
-    justify-content: center;
-    margin-top: var(--padding);
-    align-items: center;
-  }
-
-  .ui-table-pagination-select
-  {
-    margin: 0 20px;
-  }
-
   /* special styling for display types */
 
   .ui-table-field-bool

zero.Web/App/Components/pagination.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="ui-pagination" v-if="pages > 1">
+    <ui-icon-button class="ui-pagination-next" type="white" title="Previous" icon="fth-chevron-left" :disabled="page < 2" @click="set(page - 1)" />
+    <ui-dropdown align="bottom">
+      <template v-slot:button>
+        <button type="button" class="ui-button type-blank caret-down ui-pagination-select">
+          <span class="ui-button-text" v-localize="{ key: '@ui.page_xofy', tokens: { x: page, y: pages }}"></span>
+          <i class="ui-button-caret fth-chevron-down"></i>
+        </button>
+      </template>
+      <div>page select</div>
+      <!--<ui-dropdown-list />-->
+    </ui-dropdown>
+    <ui-icon-button class="ui-pagination-next" type="white" title="Next" icon="fth-chevron-right" :disabled="page >= pages" @click="set(page + 1)" />
+  </div>
+</template>
+
+
+<script>
+  export default {
+    name: 'uiPagination',
+
+    props: {
+      pages: {
+        type: Number,
+        default: 1
+      },
+      page: {
+        type: Number,
+        default: 1
+      }
+    },
+
+    data: () => ({
+      
+    }),
+
+    mounted ()
+    {
+      
+    },
+
+    methods: {
+
+      set(page)
+      {
+        this.$emit('update:page', page);
+        this.$emit('change', page);
+      }
+
+    }
+  }
+</script>
+
+<style lang="scss">
+  .ui-pagination
+  {
+    display: flex;
+    justify-content: center;
+    margin-top: var(--padding);
+    align-items: center;
+  }
+
+  .ui-pagination-select
+  {
+    margin: 0 20px;
+  }
+</style>