feat(ui/image): add component image (#3)

CONTRIBUTION.md

@@ -36,5 +36,4 @@ pnpm dev
 
 - app-bar
 - snackbar
-- image
 

packages/varlet-vue2-ui/src/image/Image.vue

@@ -0,0 +1,89 @@
+<template>
+  <div
+    class="var-image var--box"
+    :style="{
+      width: toSizeUnit(width),
+      height: toSizeUnit(height),
+      'border-radius': toSizeUnit(radius),
+    }"
+    :class="[!block ? 'var--inline-block' : null]"
+    v-ripple="{ disabled: !ripple }"
+  >
+    <img
+      class="var-image__image"
+      :alt="alt"
+      :lazy-error="error"
+      :lazy-loading="loading"
+      :style="{ objectFit: fit }"
+      v-if="lazy"
+      v-lazy="src"
+      @load="handleLoad"
+      @error="handleError"
+      @click="handleClick"
+    />
+
+    <img
+      class="var-image__image"
+      :alt="alt"
+      :style="{ objectFit: fit }"
+      :src="src"
+      v-else
+      @load="handleLoad"
+      @error="handleError"
+      @click="handleClick"
+    />
+  </div>
+</template>
+
+<script>
+import Ripple from '../ripple'
+import Lazy from '../lazy'
+import { defineComponent } from '../utils/create'
+import { props } from './props'
+import { toSizeUnit } from '../utils/elements'
+
+export default defineComponent({
+  name: 'VarImage',
+  directives: {
+    Lazy,
+    Ripple,
+  },
+  props,
+  methods: {
+    toSizeUnit,
+    handleLoad(e) {
+      const el = e.currentTarget
+      const { lazy, onLoad, onError } = this
+
+      if (lazy) {
+        el._lazy.state === 'success' && onLoad?.(e)
+        el._lazy.state === 'error' && onError?.(e)
+      } else {
+        onLoad?.(e)
+      }
+    },
+
+    handleClick(e) {
+      const { onClick } = this.getListeners()
+
+      if (!onClick) {
+        return
+      }
+
+      onClick(e)
+    },
+
+    handleError(e) {
+      const { lazy, onError } = this
+
+      !lazy && onError?.(e)
+    },
+  },
+})
+</script>
+
+<style lang="less">
+@import '../styles/common';
+@import '../ripple/ripple';
+@import './image';
+</style>

packages/varlet-vue2-ui/src/image/__tests__/__snapshots__/index.spec.js.snap

@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test image example 1`] = `
+"<div class=\\"example\\">
+  <div class=\\"app-type\\">基本使用</div>
+  <div class=\\"var-image var--box\\" style=\\"border-radius: 0px;\\"><img src=\\"https://varlet.gitee.io/varlet-ui/cat.jpg\\" class=\\"var-image__image\\" style=\\"object-fit: fill;\\"></div>
+  <div class=\\"app-type\\">填充模式</div>
+  <div style=\\"display: flex; flex-wrap: wrap;\\">
+    <div class=\\"fit-item\\">
+      <div class=\\"var-image var--box\\" style=\\"width: 85px; height: 85px; border-radius: 0px;\\"><img src=\\"https://varlet.gitee.io/varlet-ui/cat.jpg\\" class=\\"var-image__image\\" style=\\"object-fit: fill;\\"></div>
+      <div>fill</div>
+    </div>
+    <div class=\\"fit-item\\">
+      <div class=\\"var-image var--box\\" style=\\"width: 85px; height: 85px; border-radius: 0px;\\"><img src=\\"https://varlet.gitee.io/varlet-ui/cat.jpg\\" class=\\"var-image__image\\" style=\\"object-fit: cover;\\"></div>
+      <div>cover</div>
+    </div>
+    <div class=\\"fit-item\\">
+      <div class=\\"var-image var--box\\" style=\\"width: 85px; height: 85px; border-radius: 0px;\\"><img src=\\"https://varlet.gitee.io/varlet-ui/cat.jpg\\" class=\\"var-image__image\\" style=\\"object-fit: contain;\\"></div>
+      <div>contain</div>
+    </div>
+    <div class=\\"fit-item\\">
+      <div class=\\"var-image var--box\\" style=\\"width: 85px; height: 85px; border-radius: 0px;\\"><img src=\\"https://varlet.gitee.io/varlet-ui/cat.jpg\\" class=\\"var-image__image\\" style=\\"object-fit: none;\\"></div>
+      <div>none</div>
+    </div>
+    <div class=\\"fit-item\\">
+      <div class=\\"var-image var--box\\" style=\\"width: 85px; height: 85px; border-radius: 0px;\\"><img src=\\"https://varlet.gitee.io/varlet-ui/cat.jpg\\" class=\\"var-image__image\\" style=\\"object-fit: scale-down;\\"></div>
+      <div>scale-down</div>
+    </div>
+  </div>
+  <div class=\\"app-type\\">设置圆角</div>
+  <div style=\\"display: flex; flex-wrap: wrap;\\">
+    <div class=\\"var-image var--box\\" style=\\"width: 85px; height: 85px; border-radius: 10px; margin-right: 10px;\\"><img src=\\"https://varlet.gitee.io/varlet-ui/cat.jpg\\" class=\\"var-image__image\\" style=\\"object-fit: cover;\\"></div>
+    <div class=\\"var-image var--box\\" style=\\"width: 85px; height: 85px; border-radius: 50%;\\"><img src=\\"https://varlet.gitee.io/varlet-ui/cat.jpg\\" class=\\"var-image__image\\" style=\\"object-fit: cover;\\"></div>
+  </div>
+  <div class=\\"app-type\\">开启水波</div>
+  <div class=\\"var-image var--box\\" style=\\"border-radius: 0px;\\"><img src=\\"https://varlet.gitee.io/varlet-ui/cat.jpg\\" class=\\"var-image__image\\" style=\\"object-fit: fill;\\"></div>
+  <div class=\\"app-type\\">开启懒加载</div>
+  <div class=\\"var-image var--box\\" style=\\"border-radius: 0px;\\"><img class=\\"var-image__image\\" style=\\"object-fit: fill;\\" src=\\"data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\\"></div>
+</div>"
+`;
+
+exports[`test image fit 1`] = `"<div class=\\"var-image var--box\\" style=\\"border-radius: 0px;\\"><img class=\\"var-image__image\\" style=\\"object-fit: fill;\\"></div>"`;
+
+exports[`test image fit 2`] = `"<div class=\\"var-image var--box\\" style=\\"border-radius: 0px;\\"><img class=\\"var-image__image\\" style=\\"object-fit: cover;\\"></div>"`;
+
+exports[`test image fit 3`] = `"<div class=\\"var-image var--box\\" style=\\"border-radius: 0px;\\"><img class=\\"var-image__image\\" style=\\"object-fit: none;\\"></div>"`;
+
+exports[`test image fit 4`] = `"<div class=\\"var-image var--box\\" style=\\"border-radius: 0px;\\"><img class=\\"var-image__image\\" style=\\"object-fit: scale-down;\\"></div>"`;
+
+exports[`test image fit 5`] = `"<div class=\\"var-image var--box\\" style=\\"border-radius: 0px;\\"><img class=\\"var-image__image\\" style=\\"object-fit: contain;\\"></div>"`;
+
+exports[`test image src 1`] = `"<div class=\\"var-image var--box\\" style=\\"border-radius: 0px;\\"><img src=\\"https://varlet.gitee.io/varlet-ui/cat.png\\" class=\\"var-image__image\\" style=\\"object-fit: fill;\\"></div>"`;
+
+exports[`test image styles 1`] = `"<div class=\\"var-image var--box var--inline-block\\" style=\\"width: 100px; height: 100px; border-radius: 10px;\\"><img alt=\\"alt\\" src=\\"https://varlet.gitee.io/varlet-ui/cat.png\\" class=\\"var-image__image\\" style=\\"object-fit: fill;\\"></div>"`;

packages/varlet-vue2-ui/src/image/__tests__/index.spec.js

@@ -0,0 +1,130 @@
+import Vue from 'vue'
+import example from '../example'
+import Image from '..'
+import VarImage from '../Image'
+import { mount } from '@vue/test-utils'
+
+const SRC = 'https://varlet.gitee.io/varlet-ui/cat.png'
+
+test('test image example', () => {
+  const wrapper = mount(example)
+
+  expect(wrapper.html()).toMatchSnapshot()
+  wrapper.destroy()
+})
+
+test('test image src', () => {
+  const wrapper = mount(VarImage, {
+    propsData: {
+      src: SRC,
+    },
+  })
+
+  expect(wrapper.find('img').element.src).toEqual(SRC)
+  expect(wrapper.html()).toMatchSnapshot()
+  wrapper.destroy()
+})
+
+test('test image plugin', () => {
+  Vue.use(Image)
+  expect(Vue.component(Image.name)).toBeTruthy()
+})
+
+test('test image onLoad & onError', () => {
+  const onLoad = jest.fn()
+  const onError = jest.fn()
+
+  const wrapper = mount(VarImage, {
+    propsData: {
+      onLoad,
+      onError,
+    },
+  })
+
+  const img = wrapper.find('img')
+
+  img.trigger('load')
+  img.trigger('error')
+  expect(onLoad).toHaveBeenCalledTimes(1)
+  expect(onError).toHaveBeenCalledTimes(1)
+  wrapper.destroy()
+})
+
+test('test image onLoad & onError in lazy mode', () => {
+  const onLoad = jest.fn()
+  const onError = jest.fn()
+
+  const wrapper = mount(VarImage, {
+    propsData: {
+      lazy: true,
+      onLoad,
+      onError,
+    },
+  })
+
+  const img = wrapper.find('img')
+
+  img.element._lazy.state = 'success'
+  img.trigger('load')
+  expect(onLoad).toHaveBeenCalledTimes(1)
+
+  img.element._lazy.state = 'error'
+  img.trigger('load')
+  expect(onError).toHaveBeenCalledTimes(1)
+
+  wrapper.destroy()
+})
+
+test('test image onLoad & onError null callback', async () => {
+  const wrapper = mount(VarImage)
+
+  const img = wrapper.find('img')
+  img.trigger('load')
+  img.trigger('error')
+
+  await wrapper.setProps({ lazy: true })
+
+  const lazyImage = wrapper.find('img')
+  lazyImage.element._lazy.state = 'success'
+  lazyImage.trigger('load')
+  lazyImage.element._lazy.state = 'error'
+  lazyImage.trigger('load')
+  wrapper.destroy()
+})
+
+test('test image styles', () => {
+  const wrapper = mount(VarImage, {
+    propsData: {
+      src: SRC,
+      ripple: true,
+      block: false,
+      alt: 'alt',
+      width: '100px',
+      height: '100px',
+      radius: '10px',
+    },
+  })
+
+  expect(wrapper.html()).toMatchSnapshot()
+  wrapper.destroy()
+})
+
+test('test image fit', async () => {
+  const wrapper = mount(VarImage)
+
+  await wrapper.setProps({ fit: 'fill' })
+  expect(wrapper.html()).toMatchSnapshot()
+
+  await wrapper.setProps({ fit: 'cover' })
+  expect(wrapper.html()).toMatchSnapshot()
+
+  await wrapper.setProps({ fit: 'none' })
+  expect(wrapper.html()).toMatchSnapshot()
+
+  await wrapper.setProps({ fit: 'scale-down' })
+  expect(wrapper.html()).toMatchSnapshot()
+
+  await wrapper.setProps({ fit: 'contain' })
+  expect(wrapper.html()).toMatchSnapshot()
+  wrapper.destroy()
+})