[Support i18n] locale example see locales/zh-cn.js

Author: Ken Berkeley

examples/src/Advanced/comps/index.js

@@ -6,7 +6,7 @@ export default {
   Email: require('./td-Email'),
   IP: require('./td-IP'),
   Opt: require('./td-Opt'),
+  FilterTh: require('./th-Filter')
   // [Vue warn]: Do not use built-in or reserved HTML elements as component id: Filter
   // Filter: require('./th-Filter')
-  FilterTh: require('./th-Filter')
 }

examples/src/Advanced/comps/th-Createtime.vue

@@ -30,5 +30,6 @@ export default {
 .-th-createtime-comp > select {
   display: inline-block;
   width: 80px;
+  height: 26px;
 }
 </style>

examples/src/Advanced/index.vue

@@ -16,14 +16,13 @@
 </template>
 <script>
 import Vue from 'vue'
-import Datatable from '../../../'
 import mockData from '../_mockData'
-import comps from './comps/'
+import components from './comps/'
 
 export default {
-  name: 'FriendsTable', // `name` is required as a recursive component!
+  components,
+  name: 'FriendsTable', // `name` is required as a recursive component
   props: ['row'], // `props.row` from the parent FriendsTable (if exists)
-  components: { Datatable, ...comps },
   data () {
     return {    
       columns: [{
@@ -37,7 +36,7 @@ export default {
       }, {
         groupName: 'Sortable',
         columns: [
-          { title: 'User ID', field: 'uid', sort: true, visible: 'true', weight: 1 },
+          { title: 'UID', field: 'uid', label: 'User ID', sort: true, visible: 'true', weight: 1 },
           { title: 'Age', field: 'age', sort: true, thClass: 'text-info', tdClass: 'text-success' },
           { title: 'Create time', field: 'createTime', sort: true, colClass: 'w-240', thComp: 'CreatetimeTh', tdComp: 'CreatetimeTd' }
         ]

examples/src/App.vue

@@ -40,10 +40,10 @@
       </ul>
       <div class="tab-content m-t-10">
         <div class="tab-pane" :class="{ active: showTab === 'basic' }">
-          <basic />
+          <basic v-if="showTab === 'basic'" />
         </div>
         <div class="tab-pane" :class="{ active: showTab === 'advanced' }">
-          <advanced />
+          <advanced v-if="showTab === 'advanced'" />
         </div>
       </div>
     </div>

examples/src/Basic/index.vue

@@ -5,11 +5,9 @@
   </div>
 </template>
 <script>
-import Datatable from '../../../'
 import mockData from '../_mockData'
 
 export default {
-  components: { Datatable },
   data: () => ({
     columns: [
       { title: 'User ID', field: 'uid', sort: true },

examples/src/app.js

@@ -0,0 +1,12 @@
+import Vue from 'vue'
+import App from './App.vue'
+import Datatable from '../../'
+// import locale from '../../locales/zh-cn'
+
+Vue.use(Datatable)
+// Vue.use(Datatable, { locale })
+
+new Vue({
+  el: '#app',
+  render: h => h(App)
+})

index.js

@@ -0,0 +1,12 @@
+import Datatable from './lib/'
+
+export default {
+  install (Vue, options = {}) {
+    const { locale = {} } = options
+    
+    // this might be the simplest i18n solution
+    Vue.prototype.$i18n = srcTxt => locale[srcTxt] || srcTxt
+    
+    Vue.component('Datatable', Datatable)
+  }
+}

lib/HeaderSettings/index.vue

@@ -1,17 +1,17 @@
 <template>
   <div class="btn-group">
     <button class="btn btn-default dropdown-toggle" ref="dropdownBtn">
-      <i class="fa" :class="[usingBak && 'text-info', processingIcon || 'fa-cog']"></i>
+      <i class="fa" :class="[usingBak && 'text-info', processingCls || 'fa-cog']"></i>
       <span class="caret"></span>
     </button>
     <div class="dropdown-menu p-10 clearfix" :style="drpMenuStyle">
       <div class="-col-group-container">
-        <column-group v-for="group in colGroups" :key="group.groupName" ref="colGroups" :col-group="group" />
+        <column-group v-for="(group, idx) in colGroups" :key="idx" ref="colGroups" :col-group="group" />
       </div>
       <div class="m-10 clearfix">
         <div class="btn-group btn-group-sm pull-right">
           <button class="btn btn-default" @click="apply()">
-            Apply
+            {{ $i18n('Apply') }}
           </button>
           <template v-if="supportBackup">
             <button data-toggle="dropdown" class="btn btn-default dropdown-toggle box-shadow-none">
@@ -21,21 +21,21 @@
               <li @click="apply(true)">
                 <a href="javascript:;">
                   <i class="fa fa-floppy-o"></i>&nbsp;
-                  Apply and backup settings to local
+                  {{ $i18n('Apply and backup settings to local') }}
                 </a>
               </li>
               <li v-if="usingBak" @click="rmBackup()">
                 <a href="javascript:;">
                   <i class="fa fa-trash-o text-danger"></i>&nbsp;
-                  Clear local settings backup and restore
+                  {{ $i18n('Clear local settings backup and restore') }}
                 </a>
               </li>
             </ul>
           </template>
         </div>
       </div>
-      <small v-if="usingBak" class="pull-left text-muted">
-        ( Using local settings )
+      <small v-if="usingBak" class="pull-left text-muted m-t--20">
+        ( {{ $i18n('Using local settings') }} )
       </small>
     </div>
   </div>
@@ -49,8 +49,8 @@ const stringify = JSON.stringify
 const rmFromLS = k => LS.removeItem(k)
 const saveToLS = (k, v) => LS.setItem(k, stringify(v))
 const getFromLS = k => { try { return parseStr(LS.getItem(k)) } catch (e) { rmFromLS(k) } }
-// hashCode http://stackoverflow.com/a/15710692/5172890
 const hash = s => '' + s.split('').reduce((a, b) => (a = (a << 5) - a + b.charCodeAt(0), a & a), 0)
+// the hash algorithm above refers to http://stackoverflow.com/a/15710692/5172890
 
 export default {
   components: { ColumnGroup },
@@ -72,7 +72,7 @@ export default {
     return {
       origSettings,
       usingBak: false,
-      processingIcon: '',
+      processingCls: '',
       localKey: this.supportBackup && hash(origSettings) // key for local backup
     }
   },
@@ -86,7 +86,7 @@ export default {
     }
   },
   mounted () {
-    // control dropdown manually, refers to http://jsfiddle.net/rj3k550m/3
+    // control dropdown manually (refers to http://jsfiddle.net/rj3k550m/3)
     const $el = $(this.$el)
     $(this.$refs.dropdownBtn).on('click', this.toggle)
     $(document).on('click', e => {
@@ -116,26 +116,26 @@ export default {
     },
     showProcessing () {
       ['fa-spinner fa-pulse', 'fa-check', ''].forEach((cls, idx) => {
-        setTimeout(() => this.processingIcon = cls, idx * 1000)
+        setTimeout(() => this.processingCls = cls, idx * 1000)
       })
     }
   }
 }
 </script>
 <style>
-.overflow-auto {
-  overflow: auto;
+.-col-group-container {
+  border-bottom: 1px solid #ddd;
 }
 .p-10 {
   padding: 10px 10px 0 10px;
 }
 .m-10 {
   margin: 10px;
 }
+.m-t--20 {
+  margin-top: -20px;
+}
 .box-shadow-none {
   box-shadow: none !important;
 }
-.-col-group-container {
-  border-bottom: 1px solid #ddd;
-}
 </style>

lib/LimitSelect.vue

@@ -1,10 +1,10 @@
 <template>
   <label>
-    Show
-    <select class="form-control input-sm inline-select" v-model="limit">
+    {{ $i18n('show') }}
+    <select class="form-control input-sm -limit-select" v-model="limit">
       <option v-for="i in options" :value="i">{{ i }}</option>
     </select>
-    items per page
+    {{ $i18n('items per page') }}
   </label>
 </template>
 <script>
@@ -27,7 +27,7 @@ export default {
 }
 </script>
 <style>
-.inline-select {
+.-limit-select {
   display: inline-block;
   width: 65px;
 }

lib/index.vue

@@ -78,22 +78,24 @@
                 </td>
                 <td v-else>
                   <!-- show summary label if the first column field has no data -->
-                  <i v-if="!idx" class="text-muted">Summary</i>
+                  <i v-if="!idx" class="text-muted">
+                    {{ $i18n('Summary') }}
+                  </i>
                 </td>
               </template>
             </tr>
           </template><!-- v-if="data.length" -->
           <tr v-else>
             <td :colspan="colspan" class="text-center text-muted">
-              ( No Data )
+              ( {{ $i18n('No Data') }} )
             </td>
           </tr>
         </tbody>
       </table>
     </div><!-- .table-responsive -->
     <div v-if="Pagination" class="row">
       <div class="col-sm-6 nowrap">
-        <strong>Total {{ total }} ,</strong>
+        <strong>{{ $i18n('Total') }} {{ total }} {{ $i18n(',') }}</strong>
         <limit-select :query="query" />
       </div>
       <div class="col-sm-6">
@@ -150,6 +152,7 @@ export default {
       )
       // sort by columns$[i].weight in descending order
       return _orderBy(columns$.map(col => ((col.weight = col.weight || 0), col)), 'weight', 'desc')
+      
       // the sort shown below is not stable
       // return columns$.map(col => ((col.weight = col.weight || 0), col)).sort((a, b) => b.weight - a.weight)
     },