add i18n support (not finished yet)

.travis.yml

@@ -23,4 +23,5 @@ deploy:
     github_token: $GITHUB_TOKEN
     local_dir: docs
     on:
+      tags: true
       branch: master

build/webpack.dist.conf.js

@@ -25,6 +25,14 @@ let webpackConfig = {
   entry: {
     app: './src/components/index.js'
   },
+  externals: {
+    vue: {
+      root: 'Vue',
+      commonjs: 'vue',
+      commonjs2: 'vue',
+      amd: 'vue'
+    }
+  },
   output: {
     path: config.dist.assetsRoot,
     filename: 'uiv.min.js',

package.json

@@ -94,6 +94,7 @@
     "sinon-chai": "^2.8.0",
     "url-loader": "^0.5.7",
     "vue": "^2.2.6",
+    "vue-i18n": "^6.1.3",
     "vue-loader": "^11.0.0",
     "vue-router": "^2.3.1",
     "vue-style-loader": "^2.0.0",

src/components/datepicker/DatePicker.vue

@@ -27,22 +27,25 @@
       <br/>
       <div class="text-center">
         <button type="button" data-action="select" class="btn btn-info btn-sm" v-if="todayBtn" @click="selectToday">
-          Today
+          {{t('uiv.datePicker.today')}}
         </button>
         <button type="button" data-action="select" class="btn btn-default btn-sm" v-if="clearBtn" @click="clearSelect">
-          Clear
+          {{t('uiv.datePicker.clear')}}
         </button>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+  import Locale from '../../mixins/locale'
   import DateView from './DateView.vue'
   import MonthView from './MonthView.vue'
   import YearView from './YearView.vue'
   import dateUtils from '../../utils/dateUtils'
+
   export default {
+    mixins: [Locale],
     components: {DateView, MonthView, YearView},
     props: {
       value: {},

src/components/datepicker/DateView.vue

@@ -19,8 +19,8 @@
       </td>
     </tr>
     <tr align="center">
-      <td v-for="day in weekDayNames" width="14.2857142857%">
-        <b>{{day}}</b>
+      <td v-for="day in weekDays" width="14.2857142857%">
+        <small>{{tWeekName(day)}}</small>
       </td>
     </tr>
     </thead>
@@ -43,15 +43,20 @@
 </template>
 
 <script>
+  import Locale from '../../mixins/locale'
   import util from '../../utils/dateUtils'
+
   export default {
+    mixins: [Locale],
     props: ['month', 'year', 'date', 'today', 'limit'],
+    data () {
+      return {
+        weekDays: [7, 1, 2, 3, 4, 5, 6]
+      }
+    },
     computed: {
       yearMonthStr () {
-        return `${this.year} ${util.getMonthNames()[this.month]}`
-      },
-      weekDayNames () {
-        return util.getWeekDayNames()
+        return `${this.year} ${this.t(`uiv.datePicker.month${this.month + 1}`)}`
       },
       monthDayRows () {
         let rows = []
@@ -104,6 +109,9 @@
       }
     },
     methods: {
+      tWeekName (index) {
+        return this.t(`uiv.datePicker.week${index}`)
+      },
       getBtnClass (date) {
         if (this.date &&
           date.date === this.date.getDate() &&

src/components/datepicker/MonthView.vue

@@ -25,7 +25,7 @@
         <button type="button" class="btn btn-sm btn-block" style="border: none"
                 :class="getBtnClass(i*3+j)"
                 @click="changeView(i*3+j)">
-          <span>{{month}}</span>
+          <span>{{ tCell(month) }}</span>
         </button>
       </td>
     </tr>
@@ -34,8 +34,10 @@
 </template>
 
 <script>
-  import util from '../../utils/dateUtils'
+  import Locale from '../../mixins/locale'
+
   export default {
+    mixins: [Locale],
     props: ['month', 'year'],
     data () {
       return {
@@ -46,11 +48,14 @@
       for (let i = 0; i < 4; i++) {
         this.rows.push([])
         for (let j = 0; j < 3; j++) {
-          this.rows[i].push(util.getMonthNames()[i * 3 + j])
+          this.rows[i].push(i * 3 + j + 1)
         }
       }
     },
     methods: {
+      tCell (cell) {
+        return this.t(`uiv.datePicker.month${cell}`)
+      },
       getBtnClass (month) {
         if (month === this.month) {
           return {'btn-primary': true}

src/components/index.js

@@ -51,6 +51,7 @@ import TimePicker from './timepicker/TimePicker.vue'
 import Typeahead from './typeahead/Typeahead.vue'
 import ProgressBar from './progressbar/ProgressBar.vue'
 import ProgressBarStack from './progressbar/ProgressBarStack.vue'
+import locale from './../locale'
 
 const components = {
   Tooltip,
@@ -72,11 +73,18 @@ const components = {
 }
 
 const install = (Vue, options = {}) => {
+  locale.use(options.locale)
+  locale.i18n(options.i18n)
   for (let key in components) {
     Vue.component(key, components[key])
   }
 }
 
+// auto install
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue)
+}
+
 export {
   install,
   Tooltip,

src/locale/index.js

@@ -0,0 +1,37 @@
+import defaultLang from './lang/en-US'
+let lang = defaultLang
+
+let i18nHandler = function () {
+  const vuei18n = Object.getPrototypeOf(this).$t
+  if (typeof vuei18n === 'function') {
+    return vuei18n.apply(this, arguments)
+  }
+}
+
+export const t = function (path, options) {
+  let value = i18nHandler.apply(this, arguments)
+  if (value !== null && typeof value !== 'undefined') {
+    return value
+  }
+  const array = path.split('.')
+  let current = lang
+
+  for (let i = 0, j = array.length; i < j; i++) {
+    const property = array[i]
+    value = current[property]
+    if (i === j - 1) return value
+    if (!value) return ''
+    current = value
+  }
+  return ''
+}
+
+export const use = function (l) {
+  lang = l || lang
+}
+
+export const i18n = function (fn) {
+  i18nHandler = fn || i18nHandler
+}
+
+export default {use, t, i18n}

src/locale/lang/en-US.js

@@ -0,0 +1,29 @@
+export default {
+  uiv: {
+    datePicker: {
+      clear: 'Clear',
+      today: 'Today',
+      month: 'Month',
+      month1: 'January',
+      month2: 'February',
+      month3: 'March',
+      month4: 'April',
+      month5: 'May',
+      month6: 'June',
+      month7: 'July',
+      month8: 'August',
+      month9: 'September',
+      month10: 'October',
+      month11: 'November',
+      month12: 'December',
+      year: 'Year',
+      week1: 'Mon',
+      week2: 'Tue',
+      week3: 'Wed',
+      week4: 'Thu',
+      week5: 'Fri',
+      week6: 'Sat',
+      week7: 'Sun'
+    }
+  }
+}

src/locale/lang/zh-CN.js

@@ -0,0 +1,29 @@
+export default {
+  uiv: {
+    datePicker: {
+      clear: '清空',
+      today: '今天',
+      month: '月',
+      month1: '一月',
+      month2: '二月',
+      month3: '三月',
+      month4: '四月',
+      month5: '五月',
+      month6: '六月',
+      month7: '七月',
+      month8: '八月',
+      month9: '九月',
+      month10: '十月',
+      month11: '十一月',
+      month12: '十二月',
+      year: '年',
+      week1: '一',
+      week2: '二',
+      week3: '三',
+      week4: '四',
+      week5: '五',
+      week6: '六',
+      week7: '日'
+    }
+  }
+}

src/main.js

@@ -5,15 +5,30 @@ import 'highlight.js/styles/github-gist.css'
 import './assets/css/common.less'
 
 import Vue from 'vue'
+import VueI18n from 'vue-i18n'
 import VueRouter from 'vue-router'
 import PageWrapper from './docs/architecture/PageWrapper.vue'
 import * as uiv from './components/index'
+import zhLocale from './locale/lang/zh-CN'
+import enLocale from './locale/lang/en-US'
+
 Vue.config.productionTip = false
 
 Vue.use(VueRouter)
+Vue.use(VueI18n)
 Vue.use(uiv)
 Vue.component('PageWrapper', PageWrapper)
 
+const messages = {
+  'zh-CN': zhLocale,
+  'en-US': enLocale
+}
+
+const i18n = new VueI18n({
+  locale: 'en-US',
+  messages
+})
+
 let routes = [
   {path: '/', component: require('./docs/pages/Home.vue')},
   {path: '/getting-started', component: require('./docs/pages/GettingStarted.vue')},
@@ -44,6 +59,7 @@ router.afterEach(route => {
 /* eslint-disable no-new */
 let app = new Vue({
   router,
+  i18n,
   template: '<PageWrapper/>',
   components: {PageWrapper}
 })

src/mixins/locale.js

@@ -0,0 +1,9 @@
+import { t } from '../locale'
+
+export default {
+  methods: {
+    t (...args) {
+      return t.apply(this, args)
+    }
+  }
+}

src/utils/dateUtils.js

@@ -2,7 +2,6 @@ import stringUtils from './stringUtils'
 
 const monthNames = ['January', 'February', 'March', 'April', 'May', 'June',
   'July', 'August', 'September', 'October', 'November', 'December']
-const weekDayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
 
 export default {
   daysInMonth (month, year) {
@@ -11,9 +10,6 @@ export default {
   getMonthNames () {
     return monthNames
   },
-  getWeekDayNames () {
-    return weekDayNames
-  },
   stringify (date, format) {
     try {
       let year = date.getFullYear()