feat(i18n): add basic i18n supports

demo/demo.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-config-provider class="demo" namespace="naive-ui-doc" :theme="theme">
+  <n-config-provider class="demo" namespace="naive-ui-doc" :theme="theme" :language="lang">
     <n-nimbus-service-layout :padding-body="false" :items="items">
       <template v-slot:nav>
         <doc-header
@@ -412,7 +412,7 @@ export default {
     },
     lang: {
       get () {
-        return this.$route.params.lang || 'en-us'
+        return this.$route.params.lang || 'en-US'
       },
       set (lang) {
         this.$router.push(changeLangInPath(this.$route.fullPath, lang))
@@ -435,7 +435,7 @@ export default {
 }
 
 function changeLangInPath (path, lang) {
-  const langReg = /^\/(zh-cn|en-us)\//
+  const langReg = /^\/(zh-CN|en-US)\//
   return path.replace(langReg, `/${lang}/`)
 }
 

demo/documentation/components/popconfirm/enUS/basic.md

@@ -1,12 +1,24 @@
 # Basic
 ```html
 <n-popconfirm
-  positive-text="ok"
-  negative-text="not ok"
+  @positive-click="handlePositiveClick"
+  @negative-click="handleNegativeClick"
 >
   <template v-slot:activator>
-    <n-button>Quit</n-button>
+    <n-button>Quote</n-button>
   </template>
-  Are you sure to quit this game?
+  Things pass us by. Nobody can catch them. That's the way we live our lives.
 </n-popconfirm>
+```
+```js
+export default {
+  methods: {
+    handlePositiveClick () {
+      this.$NMessage.success('Yes')
+    },
+    handleNegativeClick () {
+      this.$NMessage.warning('No')
+    }
+  }
+}
 ```

demo/documentation/components/popconfirm/enUS/customAction.md

@@ -1,17 +1,42 @@
 # Custom Action
 ```html
-<n-popconfirm>
+<n-popconfirm :controller="controller">
   <template v-slot:activator>
-    <n-button>Quit</n-button>
+    <n-button>Quote</n-button>
   </template>
-  Are you sure to quit this game?
+  For example, if I were to write about elephants, I’d have had no idea what words to use.
   <template v-slot:action>
     <n-button
       size="tiny"
-      @click="handleOopsClick"
+      @click="handleClick"
     >
-      oops!
+      Maybe
     </n-button>
   </template>
 </n-popconfirm>
+<n-popconfirm positive-text="Oops!">
+  <template v-slot:activator>
+    <n-button>Quote</n-button>
+  </template>
+  For example, if I were to write about elephants, I’d have had no idea what words to use.
+</n-popconfirm>
+```
+```js
+export default {
+  data () {
+    return {
+      controller: {}
+    }
+  },
+  methods: {
+    handleClick () {
+      this.controller.hide()
+    }
+  }
+}
+```
+```css
+.n-button {
+  margin-right: 8px;
+}
 ```

demo/documentation/components/popconfirm/zhCN/basic.md

@@ -0,0 +1,24 @@
+# 基本用法
+```html
+<n-popconfirm
+  @positive-click="handlePositiveClick"
+  @negative-click="handleNegativeClick"
+>
+  <template v-slot:activator>
+    <n-button>引用</n-button>
+  </template>
+  一切都将一去杳然，任何人都无法将其捕获。
+</n-popconfirm>
+```
+```js
+export default {
+  methods: {
+    handlePositiveClick () {
+      this.$NMessage.success('是的')
+    },
+    handleNegativeClick () {
+      this.$NMessage.warning('并不')
+    }
+  }
+}
+```

demo/documentation/components/popconfirm/zhCN/customAction.md

@@ -0,0 +1,42 @@
+# 自定义操作
+```html
+<n-popconfirm :controller="controller">
+  <template v-slot:activator>
+    <n-button>引用</n-button>
+  </template>
+  譬如，我或许可以就大象本身写一点什么，但对象的驯化却不知从何写起。
+  <template v-slot:action>
+    <n-button
+      size="tiny"
+      @click="handleClick"
+    >
+      或许吧
+    </n-button>
+  </template>
+</n-popconfirm>
+<n-popconfirm positive-text="噢!">
+  <template v-slot:activator>
+    <n-button>引用</n-button>
+  </template>
+  譬如，我或许可以就大象本身写一点什么，但对象的驯化却不知从何写起。
+</n-popconfirm>
+```
+```js
+export default {
+  data () {
+    return {
+      controller: {}
+    }
+  },
+  methods: {
+    handleClick () {
+      this.controller.hide()
+    }
+  }
+}
+```
+```css
+.n-button {
+  margin-right: 8px;
+}
+```

demo/documentation/components/popconfirm/zhCN/customIcon.md

@@ -0,0 +1,28 @@
+# Custom Icon
+```html
+<n-popconfirm
+  positive-text="ok"
+  negative-text="not ok"
+>
+  <template v-slot:icon>
+    <n-icon
+      color="red"
+    >
+      <md-hand />
+    </n-icon>
+  </template>
+  <template v-slot:activator>
+    <n-button>Quit</n-button>
+  </template>
+  Are you sure to quit this game?
+</n-popconfirm>
+```
+```js
+import mdHand from 'naive-ui/lib/icons/md-hand'
+
+export default {
+  components: {
+    mdHand
+  }
+}
+```

demo/documentation/components/popconfirm/zhCN/event.md

@@ -0,0 +1,24 @@
+# Event
+```html
+<n-popconfirm
+  @positive-click="handlePositiveClick"
+  @negative-click="handleNegativeClick"
+>
+  <template v-slot:activator>
+    <n-button>Quit</n-button>
+  </template>
+  Are you sure to quit this game?
+</n-popconfirm>
+```
+```js
+export default {
+  methods: {
+    handlePositiveClick () {
+      this.$NMessage.info('positive click')
+    },
+    handleNegativeClick () {
+      this.$NMessage.info('negative click')
+    }
+  }
+}
+```

demo/documentation/components/popconfirm/zhCN/index.md

@@ -0,0 +1,8 @@
+# 弹出确认 Popconfirm
+```demo
+basic
+custom-action
+custom-icon
+event
+no-icon
+```

demo/documentation/components/popconfirm/zhCN/noIcon.md

@@ -0,0 +1,9 @@
+# No Icon
+```html
+<n-popconfirm :show-icon="false">
+  <template v-slot:activator>
+    <n-button>No Icon</n-button>
+  </template>
+  Are you sure to quit this game?
+</n-popconfirm>
+```

demo/header.vue

@@ -1,10 +1,10 @@
 <i18n>
 {
-  "zh-cn": {
+  "zh-CN": {
     "dark": "深色",
     "light": "浅色"
   },
-  "en-us": {
+  "en-US": {
     "dark": "Dark",
     "light": "Light"
   }
@@ -69,11 +69,11 @@ export default {
       langOptions: [
         {
           label: '中文',
-          value: 'zh-cn'
+          value: 'zh-CN'
         },
         {
           label: 'English',
-          value: 'en-us'
+          value: 'en-US'
         }
       ]
     }

demo/init.js

@@ -116,7 +116,7 @@ Vue.use(NaiveUI)
 NaiveUI.setHljs(hljs)
 
 const i18n = new VueI18n({
-  locale: 'en-us'
+  locale: 'en-US'
 })
 
 Vue.component('ComponentDemo', ComponentDemo)
@@ -236,7 +236,7 @@ const routes = [
   },
   {
     path: '/*',
-    redirect: '/en-us/dark/start'
+    redirect: '/en-US/dark/start'
   }
 ]
 

demo/loaders/ComponentDocumentationEntryTemplate.vue

@@ -1,7 +1,7 @@
 <template>
   <documentation-wrapper>
-    <en-us />
-    <zh-cn />
+    <en-US />
+    <zh-CN />
   </documentation-wrapper>
 </template>
 
@@ -11,8 +11,8 @@ import enUS from './enUS/index.md'
 
 export default {
   components: {
-    'en-us': enUS,
-    'zh-cn': zhCN
+    'en-US': enUS,
+    'zh-CN': zhCN
   }
 }
 </script>

demo/utils/ComponentDemo.vue

@@ -1,10 +1,10 @@
 <i18n>
 {
-  "zh-cn": {
+  "zh-CN": {
     "show": "显示代码",
     "hide": "收起代码"
   },
-  "en-us": {
+  "en-US": {
     "show": "Show Code",
     "hide": "Hide Code"
   }

index.js

@@ -67,6 +67,9 @@ import Log from './packages/common/Log'
 import Code from './packages/common/Code'
 import Typography from './packages/common/Typography'
 
+import zhCN from './packages/locale/zhCN'
+import enUS from './packages/locale/enUS'
+
 /**
  * Deprecated Components
  */
@@ -83,7 +86,18 @@ import IconTransition from './packages/transition/IconSwitchTransition'
 
 const NaiveUI = {
   install,
-  setHljs
+  setHljs,
+  setHighlightjs: setHljs,
+  locales: {
+    'zh-CN': zhCN,
+    'en-US': enUS
+  },
+  fallbackLocale: enUS,
+  addLocale
+}
+
+function addLocale () {
+
 }
 
 function setHljs (hljs) {

packages/common/ConfigConsumer/src/main.vue

@@ -20,6 +20,7 @@ export default {
   render (h) {
     const defaultSlot = this.$scopedSlots.default ? this.$scopedSlots.default({
       theme: this.synthesizedTheme,
+      language: this.NConfigProvider ? this.NConfigProvider.inheritedLanguage : null,
       namespace: this.NConfigProvider ? this.NConfigProvider.inheritedNamespace : null,
       themeEnvironment: this.synthesizedThemeEnvironment,
       styleScheme: this.synthesizedTheme ? styleScheme[this.synthesizedTheme] : null

packages/common/ConfigProvider/src/main.vue

@@ -30,6 +30,18 @@ export default {
     themeEnvironment: {
       type: Object,
       default: null
+    },
+    language: {
+      validator (value) {
+        return ['zh-CN', 'en-US'].includes(value)
+      },
+      default: null
+    },
+    lang: {
+      validator (value) {
+        return ['zh-CN', 'en-US'].includes(value)
+      },
+      default: null
     }
   },
   computed: {
@@ -38,6 +50,10 @@ export default {
     },
     inheritedNamespace () {
       return this.namespace || (this.NConfigProvider ? this.NConfigProvider.inheritedNamespace : null)
+    },
+    inheritedLanguage () {
+      const language = this.language || this.lang
+      return language || (this.NConfigProvider ? this.NConfigProvider.inheritedLanguage : null)
     }
   },
   render (h) {

packages/common/Popconfirm/src/PopconfirmPanel.vue

@@ -26,7 +26,7 @@
             round
             @click="handleNegativeClick"
           >
-            {{ negativeText }}
+            {{ translatedNegativeText }}
           </n-button>
           <n-button
             round
@@ -34,7 +34,7 @@
             type="primary"
             @click="handlePositiveClick"
           >
-            {{ positiveText }}
+            {{ translatedPositiveText }}
           </n-button>
         </slot>
       </div>
@@ -46,21 +46,24 @@
 import NButton from '../../Button'
 import NIcon from '../../Icon'
 import mdAlert from '../../../icons/md-alert'
+import locale from '../../../mixins/locale'
 
 export default {
+  name: 'NPopconfirmPanel',
   components: {
     NButton,
     NIcon,
     mdAlert
   },
+  mixins: [ locale ],
   props: {
     positiveText: {
       type: String,
-      default: 'Confirm'
+      default: null
     },
     negativeText: {
       type: String,
-      default: 'Cancel'
+      default: null
     },
     showIcon: {
       type: Boolean,
@@ -71,6 +74,14 @@ export default {
       required: true
     }
   },
+  computed: {
+    translatedPositiveText () {
+      return this.t('positiveText') || this.positiveText
+    },
+    translatedNegativeText () {
+      return this.t('negativeText') || this.negativeText
+    }
+  },
   data () {
     return {
       showPopconfirm: false

packages/locale/enUS.js

@@ -0,0 +1,6 @@
+export default {
+  NPopconfirmPanel: {
+    positiveText: 'Confirm',
+    negativeText: 'Cancel'
+  }
+}

packages/locale/zhCN.js

@@ -0,0 +1,6 @@
+export default {
+  NPopconfirmPanel: {
+    positiveText: '确认',
+    negativeText: '取消'
+  }
+}

packages/mixins/locale.js

@@ -0,0 +1,29 @@
+function getTranslation (locales, fallbackLocale, language, componentName, key) {
+  const locale = locales[language]
+  if (locale) {
+    return locale[componentName][key]
+  } else {
+    return fallbackLocale[componentName][key]
+  }
+}
+
+export default {
+  inject: {
+    NConfigProvider: {
+      default: null
+    }
+  },
+  methods: {
+    t (key) {
+      const componentName = this.$options.name
+      const language = this.NConfigProvider.inheritedLanguage
+      return getTranslation(
+        this.$naive.locales,
+        this.$naive.fallbackLocale,
+        language,
+        componentName,
+        key
+      )
+    }
+  }
+}