feat(datatable): improvements for i18n

yevdyko · Apr 16, 2018 · 73e3d26 · 73e3d26
1 parent 77f4ede
commit 73e3d26
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 2 deletions.
diff --git a/src/vuestic-theme/vuestic-components/vuestic-datatable/VuesticDataTable.vue b/src/vuestic-theme/vuestic-components/vuestic-datatable/VuesticDataTable.vue
@@ -3,13 +3,15 @@
     <div class="d-flex flex-md-row flex-column align-items-center" :class="controlsAlignmentClass">
       <filter-bar
         @filter="onFilterSet"
+        :label="filterInputLabel"
         v-show="filterInputShown"
       />
       <div class="datatable-controls d-flex flex-row">
         <div class="form-group">
           <slot name="additionalTableControl"></slot>
         </div>
         <items-per-page :options="itemsPerPage"
+                        :label="itemsPerPageLabel"
                         :defaultPerPage="defaultPerPageComputed"
                         @items-per-page="onItemsPerPage"
                         v-show="perPageSelectorShown"></items-per-page>
@@ -90,6 +92,14 @@
         type: Boolean,
         default: true
       },
+      filterInputLabel: {
+        type: String,
+        default: 'Search'
+      },
+      itemsPerPageLabel: {
+        type: String,
+        default: 'per page'
+      },
       defaultPerPage: {
         type: Number,
         default: DefaultPerPageDefinition.itemsPerPage[0].value
@@ -194,6 +204,10 @@
       this.perPage = this.defaultPerPageComputed
     },
 
+    mounted () {
+      this.$emit('initialized', this.$refs.vuetable)
+    },
+
     methods: {
       onFilterSet (filterText) {
         this.filterText = filterText

diff --git a/src/vuestic-theme/vuestic-components/vuestic-datatable/datatable-components/FilterBar.vue b/src/vuestic-theme/vuestic-components/vuestic-datatable/datatable-components/FilterBar.vue
@@ -3,14 +3,19 @@
     <div class="input-group">
       <input id="input-icon-left" name="input-icon-left" @keyup="doFilter()" v-model="filterText" required/>
       <i class="glyphicon glyphicon-search icon-left input-icon search-icon"></i>
-      <label class="control-label" for="input-icon-left">Search</label><i class="bar"></i>
+      <label class="control-label" for="input-icon-left">{{label}}</label><i class="bar"></i>
     </div>
   </div>
 </template>
 
 <script>
   export default {
     name: 'filterBar',
+    props: {
+      label: {
+        type: String
+      }
+    },
     data () {
       return {
         filterText: '',

diff --git a/src/vuestic-theme/vuestic-components/vuestic-datatable/datatable-components/ItemsPerPage.vue b/src/vuestic-theme/vuestic-components/vuestic-datatable/datatable-components/ItemsPerPage.vue
@@ -2,7 +2,7 @@
   <div class="form-group dropdown" v-dropdown.closeOnMenuClick>
     <button id="itemsPerPageBtn" class="btn btn-primary btn-sm dropdown-toggle" type="button"
             data-toggle="dropdown">
-      {{selected}} per page
+      {{selected}} {{label}}
       <i class="ion-ios-arrow-down arrow-down"></i>
     </button>
     <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
@@ -22,6 +22,9 @@
       Dropdown
     },
     props: {
+      label: {
+        type: String
+      },
       options: {
         type: Array,
         required: true