doc(avatar)

demo/documentation/components/avatar/enUS/badge.md

@@ -1,7 +1,7 @@
 # Badge
-
+Using it with badge would be nice (if you like tons of notifications).
 ```html
-<n-badge value="666">
+<n-badge value="999+">
-  <n-avatar>666</n-avatar>
+  <n-avatar>App</n-avatar>
 </n-badge>
 ```

demo/documentation/components/avatar/enUS/color.md

@@ -1,5 +1,5 @@
 # Color
-
+Color is depend on you even in different theme. You can set it to something related to things you want to eat.
 ```html
 <n-avatar :themed-style="{
   light: {
@@ -10,5 +10,5 @@
      color: 'red',
     backgroundColor: 'yellow'
   }
-}">Liu<br>Dehua</n-avatar>
+}">M</n-avatar>
 ```

demo/documentation/components/avatar/enUS/icon.md

@@ -1,4 +1,5 @@
 # Icon
+I like using icon in avatar.
 ```html
 <n-avatar>
   <n-icon>

demo/documentation/components/avatar/enUS/index.md

@@ -1,4 +1,6 @@
 # Avatar
+On the Internet, nobody knows you're a dog, even if you use a dog picture as avatar.
+## Demos
 ```demo
 size
 shape
@@ -7,3 +9,15 @@ badge
 icon
 name-size
 ```
+## Props
+|Name|Type|Default|Description|
+|-|-|-|-|
+|size|`'small' \| 'medium' \| 'large' \| 'huge'`| `'medium'`||
+|src|`string`|`null`||
+|round|`boolean`|`false`||
+|themed-style|`object`|`null`||
+
+## Slots
+|Name|Parameters|Description|
+|-|-|-|
+|default|()||

demo/documentation/components/avatar/enUS/nameSize.md

@@ -1,16 +1,22 @@
-# Name Size
+# Content Size
+Words' sizing would be auto adjusted in avatar.
 ```html
 <n-avatar>{{ value }}</n-avatar>
 <n-avatar circle>{{ value }}</n-avatar>
-<n-avatar circle>Liu<br>{{ value }}</n-avatar>
+<n-avatar circle>the <br>{{ value }}</n-avatar>
 <n-input v-model="value"/>
 ```
 ```js
 export default {
   data () {
     return {
-      value: 'Dehua'
+      value: 'Oasis'
     }
   }
 }
 ```
+```css
+.n-avatar {
+  margin: 0 8px 12px 0;
+}
+```

demo/documentation/components/avatar/enUS/shape.md

@@ -8,3 +8,9 @@ Avatar can be circle shaped.
 <n-avatar circle size="large" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573566445479&di=8804b1996cbf89582232a3994665454c&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3628555514%2C2933400515%26fm%3D214%26gp%3D0.jpg"/>
 <n-avatar circle :size="48" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573566445479&di=8804b1996cbf89582232a3994665454c&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3628555514%2C2933400515%26fm%3D214%26gp%3D0.jpg"/>
 ```
+
+```css
+.n-avatar {
+  margin: 0 8px 12px 0;
+}
+```

demo/documentation/components/avatar/enUS/size.md

@@ -8,3 +8,9 @@ Avatar has `small`, `medium` and `large` size.
 <n-avatar size="large" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573566445479&di=8804b1996cbf89582232a3994665454c&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3628555514%2C2933400515%26fm%3D214%26gp%3D0.jpg"/>
 <n-avatar :size="48" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573566445479&di=8804b1996cbf89582232a3994665454c&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3628555514%2C2933400515%26fm%3D214%26gp%3D0.jpg"/>
 ```
+
+```css
+.n-avatar {
+  margin: 0 8px 12px 0;
+}
+```

index.js

@@ -54,7 +54,7 @@ import ConfigConsumer from './packages/common/ConfigConsumer'
 import Descriptions from './packages/common/Descriptions'
 import List from './packages/common/List'
 import Menu from './packages/common/Menu'
-import Avatar from './packages/common/Avator'
+import Avatar from './packages/common/Avatar'
 import Result from './packages/common/Result'
 import Thing from './packages/common/Thing'
 import AutoComplete from './packages/common/AutoComplete'

packages/common/Avatar/index.js

@@ -0,0 +1,8 @@
+/* istanbul ignore file */
+import Avatar from './src/main.vue'
+
+Avatar.install = function (Vue) {
+  Vue.component(Avatar.name, Avatar)
+}
+
+export default Avatar

packages/common/Avatar/src/main.vue

@@ -0,0 +1,106 @@
+<template>
+  <span
+    class="n-avatar"
+    :class="{
+      [`n-avatar--${size}-size`]: typeof size !== 'number',
+      [`n-avatar--circle-shaped`]: circle || round,
+      [`n-${synthesizedTheme}-theme`]: synthesizedTheme
+    }"
+    :style="{
+      width: styleWidth,
+      height: styleWidth,
+      borderRadius: styleBorderRadius,
+      ...synthesizedStyle
+    }"
+  >
+    <img v-if="!$slots.default && src" :src="src">
+    <slot v-else-if="$slots.icon" name="icon" />
+    <span
+      v-else
+      ref="text"
+      class="n-avatar__text"
+      :style="{
+        transform: styleTransfrom,
+        backgroundColor: color
+      }"
+    >
+      <slot />
+    </span>
+  </span>
+</template>
+
+<script>
+import withapp from '../../../mixins/withapp'
+import themeable from '../../../mixins/themeable'
+import asthemecontext from '../../../mixins/asthemecontext'
+
+export default {
+  name: 'NAvatar',
+  mixins: [withapp, themeable, asthemecontext],
+  props: {
+    size: {
+      type: [String, Number],
+      default: 'medium'
+    },
+    src: {
+      type: String,
+      default: null
+    },
+    circle: {
+      type: Boolean,
+      default: false
+    },
+    round: {
+      type: Boolean,
+      default: false
+    },
+    color: {
+      type: String,
+      default: null
+    }
+  },
+  data () {
+    return {
+      ratio: 1
+    }
+  },
+  computed: {
+    styleTransfrom () {
+      if (this.ratio !== 1) return `translateX(-50%) translateY(-50%) scale(${this.ratio})`
+      return 'translateX(-50%) translateY(-50%)'
+    },
+    styleWidth () {
+      if (typeof this.size === 'number') {
+        return `${this.size}px`
+      }
+      return null
+    },
+    styleBorderRadius () {
+      if (!this.circle && !this.round) return null
+      if (typeof this.size === 'number') {
+        return `${this.size / 2}px`
+      }
+      return null
+    }
+  },
+  updated () {
+    this.adjustText()
+  },
+  mounted () {
+    this.adjustText()
+  },
+  methods: {
+    adjustText () {
+      if (this.$refs.text) {
+        const elWidth = this.$el.offsetWidth
+        const textWidth = this.$refs.text.offsetWidth
+        const elHeight = this.$el.offsetHeight
+        const textHeight = this.$refs.text.offsetHeight
+        const radix = (this.circle || this.round) ? 0.75 : 0.85
+        const ratio = Math.min(elWidth / textWidth * radix, elHeight / textHeight * radix)
+        this.ratio = Math.min(1, ratio)
+      }
+    }
+  }
+}
+</script>