fix(avatar): scale value is incorrect (#796)

* fix(avatar): scale value is incorrect while use v-show

* chore(avatar): docs format & code clean

* chore

Co-authored-by: 07akioni <07akioni2@gmail.com>

CHANGELOG.en-US.md

@@ -8,6 +8,7 @@
 
 ### Fixes
 
+- Fix `n-avatar`'s scale value is incorrect while use v-show, closes [#779](https://github.com/TuSimple/naive-ui/issues/779).
 - Fix `n-menu` show a blue background when click the menu on mobile phone, closes [#799](https://github.com/TuSimple/naive-ui/issues/799).
 
 ## 2.16.1 (2020-08-06)

CHANGELOG.zh-CN.md

@@ -8,6 +8,7 @@
 
 ### Fixes
 
+- 修复 `n-avatar` 的缩放在使用 `v-show` 时不正确，关闭 [#779](https://github.com/TuSimple/naive-ui/issues/779)
 - 修复 `n-menu` 在手机端点击菜单的时候出现蓝色背景问题，关闭 [#799](https://github.com/TuSimple/naive-ui/issues/799)
 
 ## 2.16.1 (2020-08-06)

src/avatar/demos/enUS/index.demo-entry.md

@@ -13,7 +13,9 @@ icon
 name-size
 ```
 
-## Props
+## API
+
+### Avatar Props
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
@@ -24,7 +26,7 @@ name-size
 | round | `boolean` | `false` | Whether to display a rounded avatar. |
 | on-error | `(e: Event) => void` | `undefined` | Callback executed when the avatar image fails to load. |
 
-## Slots
+### Avatar Slots
 
 | Name    | Parameters | Description                       |
 | ------- | ---------- | --------------------------------- |

src/avatar/demos/zhCN/index.demo-entry.md

@@ -11,9 +11,12 @@ color
 badge
 icon
 name-size
+v-show-debug
 ```
 
-## Props
+## API
+
+### Avatar Props
 
 | 名称 | 类型 | 默认值 | 说明 |
 | --- | --- | --- | --- |
@@ -24,7 +27,7 @@ name-size
 | round | `boolean` | `false` | 头像是否圆形 |
 | on-error | `(e: Event) => void` | `undefined` | 头像的图片加载失败执行的回调 |
 
-## Slots
+### Avatar Slots
 
 | 名称    | 参数 | 说明             |
 | ------- | ---- | ---------------- |

src/avatar/demos/zhCN/v-show-debug.demo.md

@@ -0,0 +1,37 @@
+# v-show debug
+
+```html
+<n-space vertical item-style="line-height: 0;">
+  <n-space>
+    <button @click="toggle">toggle</button>
+    <n-avatar v-show="isShow">{{ value }}</n-avatar>
+    <n-avatar v-if="isShow" round>{{ value }}</n-avatar>
+  </n-space>
+  <n-input v-model:value="value" />
+</n-space>
+```
+
+```js
+import { defineComponent, onMounted, onUpdated, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
+    const isShow = ref(false)
+    const toggle = () => {
+      isShow.value = !isShow.value
+    }
+    onMounted(() => {
+      console.log('world')
+    })
+
+    onUpdated(() => {
+      console.log('hello')
+    })
+    return {
+      value: ref('Oasis111'),
+      toggle,
+      isShow
+    }
+  }
+})
+```

src/avatar/src/Avatar.tsx

@@ -1,12 +1,5 @@
-import {
-  h,
-  ref,
-  computed,
-  onUpdated,
-  onMounted,
-  defineComponent,
-  PropType
-} from 'vue'
+import { h, ref, computed, defineComponent, PropType } from 'vue'
+import { VResizeObserver } from 'vueuc'
 import { useConfig, useTheme } from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'
 import { avatarLight } from '../styles'
@@ -22,10 +15,7 @@ const avatarProps = {
     default: 'medium'
   },
   src: String,
-  circle: {
-    type: Boolean,
-    default: false
-  },
+  circle: Boolean,
   color: String,
   objectFit: {
     type: String as PropType<
@@ -33,10 +23,7 @@ const avatarProps = {
     >,
     default: 'fill'
   },
-  round: {
-    type: Boolean,
-    default: false
-  },
+  round: Boolean,
   onError: Function as PropType<(e: Event) => void>
 } as const
 
@@ -51,7 +38,7 @@ export default defineComponent({
     let memoedTextHtml: string | null = null
     const textRef = ref<HTMLElement | null>(null)
     const selfRef = ref<HTMLElement | null>(null)
-    const adjustText = (): void => {
+    const fitTextTransform = (): void => {
       const { value: textEl } = textRef
       if (textEl) {
         if (memoedTextHtml === null || memoedTextHtml !== textEl.innerHTML) {
@@ -71,11 +58,6 @@ export default defineComponent({
         }
       }
     }
-    // Not Good Impl
-    onMounted(() => adjustText())
-    onUpdated(() => {
-      adjustText()
-    })
     const themeRef = useTheme(
       'Avatar',
       'Avatar',
@@ -88,6 +70,7 @@ export default defineComponent({
       textRef,
       selfRef,
       mergedClsPrefix: mergedClsPrefixRef,
+      fitTextTransform,
       cssVars: computed(() => {
         const { size, round, circle } = props
         const {
@@ -125,13 +108,19 @@ export default defineComponent({
             style={{ objectFit: this.objectFit }}
           />
         ) : (
-          <span
-            ref="textRef"
-            class={`${mergedClsPrefix}-avatar__text`}
-            style={{ background: this.color }}
-          >
-            {$slots}
-          </span>
+          <VResizeObserver onResize={this.fitTextTransform}>
+            {{
+              default: () => (
+                <span
+                  ref="textRef"
+                  class={`${mergedClsPrefix}-avatar__text`}
+                  style={{ background: this.color }}
+                >
+                  {$slots}
+                </span>
+              )
+            }}
+          </VResizeObserver>
         )}
       </span>
     )