define inline property + style for tables

zero.Web.UI/App/components/pagination.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="ui-pagination" v-if="pages > 1">
-    <ui-icon-button class="ui-pagination-prev ui-pagination-button" type="light onbg" title="@ui.pagination.previous" icon="fth-chevron-left" :disabled="page < 2" @click="set(page - 1)" />
+  <div class="ui-pagination" v-if="pages > 1" :class="{'is-inline': inline }">
+    <ui-icon-button class="ui-pagination-prev ui-pagination-button" :type="buttonType" title="@ui.pagination.previous" icon="fth-chevron-left" :disabled="page < 2" @click="set(page - 1)" />
     <div class="ui-pagination-select">
       <select :value="page" @change="selectChanged">
         <option v-for="value in values" v-bind:value="value">{{value}}</option>
@@ -10,7 +10,7 @@
         <i class="ui-button-caret fth-chevron-down"></i>
       </button>
     </div>
-    <ui-icon-button class="ui-pagination-next ui-pagination-button" type="light onbg" title="@ui.pagination.next" icon="fth-chevron-right" :disabled="page >= pages" @click="set(page + 1)" />
+    <ui-icon-button class="ui-pagination-next ui-pagination-button" :type="buttonType" title="@ui.pagination.next" icon="fth-chevron-right" :disabled="page >= pages" @click="set(page + 1)" />
   </div>
 </template>
 
@@ -27,6 +27,10 @@
       page: {
         type: Number,
         default: 1
+      },
+      inline: {
+        type: Boolean,
+        default: false
       }
     },
 
@@ -34,6 +38,10 @@
       values: function ()
       {
         return Array.apply(null, Array(this.pages)).map(function (_, i) { return i + 1; });
+      },
+      buttonType()
+      {
+        return this.inline ? 'light' : 'light onbg';
       }
     },
 

zero.Web.UI/App/components/tables/table.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="ui-table-outer">
-    <div class="ui-table">
+    <div class="ui-table" :class="{'is-inline': inline }">
       <header class="ui-table-row ui-table-head">      
         <div v-for="column in columns" :key="column.key" class="ui-table-cell" :table-field="column.field" :style="column.flex">
           {{ column.label | localize }}
@@ -32,7 +32,7 @@
     </div>
 
     <footer class="ui-table-pagination" v-if="pages > 1">
-      <ui-pagination :pages="pages" :page="filter.page" @change="setPage" />
+      <ui-pagination :pages="pages" :page="filter.page" @change="setPage" :inline="inline" />
     </footer>
 
   </div>
@@ -53,6 +53,8 @@
       // order is descending
       isDescending: true
     },
+    // default items per page
+    pageSize: 30,
     // define columns and how they are displayed
     columns: {},
     // prefix for column header translations
@@ -76,6 +78,10 @@
         {
           return defaultConfig;
         }
+      },
+      inline: {
+        type: Boolean,
+        default: false
       }
     },
 
@@ -155,6 +161,8 @@
 
         this.configuration = _extend(defaultConfig, this.value);
 
+        this.filter.pageSize = this.configuration.pageSize;
+
         if (this.configuration.order.enabled)
         {
           this.filter.orderBy = this.configuration.order.by;
@@ -317,6 +325,12 @@
     font-size: var(--font-size);
     width: 100%;
     box-shadow: var(--shadow-short);
+
+    &.is-inline
+    {
+      box-shadow: none;
+      border: 1px solid var(--color-line);
+    }
   }
 
   .ui-table-row