feat:(image): add img-props prop (#349)

* feat:n-input Support hidden password

* feat(form): support require-mark-placement(#171)

* Revert "feat(form): support require-mark-placement(#171)"

This reverts commit 0627777693.

* Revert "feat:n-input Support hidden password"

This reverts commit ea6491783d.

* feat:(image): add test

* feat:(image): add test

* WIP

* WIP

* feat(image): add imgProps prop and add test

* feat(image): add imgProps type

CHANGELOG.en-US.md

@@ -5,6 +5,7 @@
 ### Feats
 
 - `n-loading-bar` export `LoadingBarApi` type
+- `n-image` add `imgProps` prop
 
 ## 2.15.2 (2021-07-02)
 

CHANGELOG.zh-CN.md

@@ -5,6 +5,7 @@
 ### Feats
 
 - `n-loading-bar` 导出 `LoadingBarApi` 类型
+- `n-image` 增加 `imgProps` 属性
 
 ## 2.15.2 (2021-07-02)
 

src/image/src/Image.tsx

@@ -1,14 +1,27 @@
-import { defineComponent, h, inject, ref, PropType } from 'vue'
+import { defineComponent, h, inject, ref, PropType, toRef } from 'vue'
 import NImagePreview from './ImagePreview'
 import type { ImagePreviewInst } from './ImagePreview'
 import { imageGroupInjectionKey } from './ImageGroup'
 import { ExtractPublicPropTypes } from '../../_utils'
 import { useConfig } from '../../_mixins'
 
+interface imgProps {
+  alt?: string
+  crossorigin?: 'anonymous' | 'use-credentials' | ''
+  decoding?: 'async' | 'auto' | 'sync'
+  height?: number
+  sizes?: string
+  src?: string
+  srcset?: string
+  usemap?: string
+  width?: number
+}
+
 const imageProps = {
   alt: String,
-  width: [String, Number] as PropType<string | number>,
   height: [String, Number] as PropType<string | number>,
+  imgProps: Object as PropType<imgProps>,
+  width: [String, Number] as PropType<string | number>,
   src: String,
   showToolbar: { type: Boolean, default: true }
 }
@@ -20,6 +33,7 @@ export default defineComponent({
   props: imageProps,
   setup (props) {
     const imageRef = ref<HTMLImageElement | null>(null)
+    const imgPropsRef = toRef(props, 'imgProps')
     const previewInstRef = ref<ImagePreviewInst | null>(null)
     const imageGroupHandle = inject(imageGroupInjectionKey, null)
     const { mergedClsPrefixRef } = imageGroupHandle || useConfig(props)
@@ -28,6 +42,7 @@ export default defineComponent({
       groupId: imageGroupHandle?.groupId,
       previewInstRef,
       imageRef,
+      imgProps: imgPropsRef,
       handleClick: () => {
         if (imageGroupHandle) {
           imageGroupHandle.setPreviewSrc(props.src)
@@ -44,19 +59,25 @@ export default defineComponent({
     }
   },
   render () {
-    const { mergedClsPrefix } = this
+    const { mergedClsPrefix, imgProps = {} } = this
+
+    const imgNode = (
+      <img
+        {...imgProps}
+        class={this.groupId}
+        ref="imageRef"
+        width={this.width ? this.width : imgProps.width}
+        height={this.height ? this.height : imgProps.height}
+        src={this.src ? this.src : imgProps.src}
+        alt={this.alt ? this.alt : imgProps.alt}
+        aria-label={this.alt ? this.alt : imgProps.alt}
+        onClick={this.handleClick}
+      />
+    )
+
     return this.groupId ? (
       <div class={`${mergedClsPrefix}-image`} role="none">
-        <img
-          class={this.groupId}
-          ref="imageRef"
-          width={this.width}
-          height={this.height}
-          src={this.src}
-          alt={this.alt}
-          aria-label={this.alt}
-          onClick={this.handleClick}
-        />
+        {imgNode}
       </div>
     ) : (
       <NImagePreview
@@ -68,15 +89,7 @@ export default defineComponent({
           default: () => {
             return (
               <div class={`${mergedClsPrefix}-image`} role="none">
-                <img
-                  ref="imageRef"
-                  width={this.width}
-                  height={this.height}
-                  src={this.src}
-                  alt={this.alt}
-                  aria-label={this.alt}
-                  onClick={this.handleClick}
-                />
+                {imgNode}
               </div>
             )
           }

src/image/tests/Image.spec.tsx

@@ -0,0 +1,67 @@
+import { mount } from '@vue/test-utils'
+import { NImage } from '../index'
+
+describe('n-image', () => {
+  it('should work with import on demand', () => {
+    mount(NImage)
+  })
+
+  it('should work with `alt` prop', async () => {
+    const wrapper = mount(NImage)
+
+    await wrapper.setProps({ alt: 'This is just a picture' })
+
+    expect(wrapper.find('img').attributes('alt')).toBe('This is just a picture')
+    expect(wrapper.find('img').attributes('aria-label')).toBe(
+      'This is just a picture'
+    )
+  })
+
+  it('should work with `width` prop', async () => {
+    const wrapper = mount(NImage)
+
+    await wrapper.setProps({ width: '200' })
+
+    expect(wrapper.find('img').attributes('width')).toBe('200')
+
+    await wrapper.setProps({ width: 200 })
+
+    expect(wrapper.find('img').attributes('width')).toBe('200')
+  })
+
+  it('should work with `height` prop', async () => {
+    const wrapper = mount(NImage)
+
+    await wrapper.setProps({ height: '300' })
+
+    expect(wrapper.find('img').attributes('height')).toBe('300')
+
+    await wrapper.setProps({ height: 300 })
+
+    expect(wrapper.find('img').attributes('height')).toBe('300')
+  })
+
+  it('should work with `src` prop', async () => {
+    const wrapper = mount(NImage)
+
+    await wrapper.setProps({
+      src: 'https://www.naiveui.com/assets/naivelogo.93278402.svg'
+    })
+
+    expect(wrapper.find('img').attributes('src')).toBe(
+      'https://www.naiveui.com/assets/naivelogo.93278402.svg'
+    )
+  })
+
+  it('should work with `showToolbar` prop', async () => {
+    const wrapper = mount(NImage)
+
+    await wrapper.setProps({
+      showToolbar: true
+    })
+
+    await wrapper.find('img').trigger('click')
+
+    expect(document.querySelector('.n-image-preview-toolbar')).not.toEqual(null)
+  })
+})