feat: image

components/image/PreviewGroup.tsx

@@ -0,0 +1,25 @@
+import PreviewGroup from '../vc-image/src/PreviewGroup';
+import { defineComponent, inject } from 'vue';
+import { defaultConfigProvider } from '../config-provider';
+import PropTypes from '../_util/vue-types';
+
+const InternalPreviewGroup = defineComponent({
+  name: 'AImagePreviewGroup',
+  inheritAttrs: false,
+  props: { previewPrefixCls: PropTypes.string },
+  setup(props, { attrs, slots }) {
+    const configProvider = inject('configProvider', defaultConfigProvider);
+    return () => {
+      const { getPrefixCls } = configProvider;
+      const prefixCls = getPrefixCls('image-preview', props.previewPrefixCls);
+      return (
+        <PreviewGroup
+          previewPrefixCls={prefixCls}
+          {...{ ...attrs, ...props }}
+          v-slots={slots}
+        ></PreviewGroup>
+      );
+    };
+  },
+});
+export default InternalPreviewGroup;

components/image/__tests__/demo.test.js

@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest';
+
+demoTest('image');

components/image/__tests__/index.test.js

@@ -0,0 +1,32 @@
+import Image from '..';
+import mountTest from '../../../tests/shared/mountTest';
+import { mount } from '@vue/test-utils';
+describe('Image', () => {
+  mountTest(Image);
+  it('image size', () => {
+    const wrapper = mount({
+      render() {
+        return (
+          <Image
+            width="200px"
+            src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+          />
+        );
+      },
+    });
+    expect(wrapper.find('.ant-image').element.style.width).toBe('200px');
+  });
+  it('image size number', () => {
+    const wrapper = mount({
+      render() {
+        return (
+          <Image
+            width={200}
+            src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+          />
+        );
+      },
+    });
+    expect(wrapper.find('.ant-image').element.style.width).toBe('200px');
+  });
+});

components/image/index.tsx

@@ -0,0 +1,35 @@
+import { App, defineComponent, inject, Plugin } from 'vue';
+import { defaultConfigProvider } from '../config-provider';
+import ImageInternal from '../vc-image';
+import { ImageProps, ImagePropsType } from '../vc-image/src/Image';
+
+import PreviewGroup from './PreviewGroup';
+const Image = defineComponent({
+  name: 'AImage',
+  inheritAttrs: false,
+  props: ImageProps,
+  setup(props, ctx) {
+    const { slots, attrs } = ctx;
+    const configProvider = inject('configProvider', defaultConfigProvider);
+    return () => {
+      const { getPrefixCls } = configProvider;
+      const prefixCls = getPrefixCls('image', props.prefixCls);
+      return <ImageInternal {...{ ...attrs, ...props, prefixCls }} v-slots={slots}></ImageInternal>;
+    };
+  },
+});
+
+export { ImageProps, ImagePropsType };
+
+Image.PreviewGroup = PreviewGroup;
+
+Image.install = function(app: App) {
+  app.component(Image.name, Image);
+  app.component(Image.PreviewGroup.name, Image.PreviewGroup);
+  return app;
+};
+
+export default Image as typeof Image &
+  Plugin & {
+    readonly PreviewGroup: typeof PreviewGroup;
+  };

components/image/style/index.less

@@ -0,0 +1,141 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@image-prefix-cls: ~'@{ant-prefix}-image';
+@image-preview-prefix-cls: ~'@{image-prefix-cls}-preview';
+
+.@{image-prefix-cls} {
+  position: relative;
+  display: inline-block;
+  &-img {
+    width: 100%;
+    height: auto;
+    &-placeholder {
+      background-color: @image-bg;
+      background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=);
+      background-repeat: no-repeat;
+      background-position: center center;
+      background-size: 30%;
+    }
+  }
+
+  &-placeholder {
+    .box;
+  }
+
+  &-preview {
+    .modal-mask;
+
+    height: 100%;
+    text-align: center;
+
+    &-body {
+      .box;
+      overflow: hidden;
+    }
+
+    &-img {
+      max-width: 100%;
+      max-height: 100%;
+      vertical-align: middle;
+      transform: scale3d(1, 1, 1);
+      cursor: grab;
+      transition: transform 0.3s @ease-out 0s;
+      user-select: none;
+      pointer-events: auto;
+      &-wrapper {
+        .box;
+        transition: transform 0.3s @ease-out 0s;
+        &::before {
+          display: inline-block;
+          width: 1px;
+          height: 50%;
+          margin-right: -1px;
+          content: '';
+        }
+      }
+    }
+
+    &-moving {
+      .@{image-prefix-cls}-preview-img {
+        cursor: grabbing;
+        &-wrapper {
+          transition-duration: 0s;
+        }
+      }
+    }
+
+    &-wrap {
+      z-index: @zindex-image;
+    }
+
+    &-operations {
+      .reset-component;
+      position: absolute;
+      top: 0;
+      right: 0;
+      z-index: 1;
+      display: flex;
+      flex-direction: row-reverse;
+      align-items: center;
+      width: 100%;
+      color: @image-preview-operation-color;
+      list-style: none;
+      background: fade(@modal-mask-bg, 10%);
+      pointer-events: auto;
+
+      &-operation {
+        margin-left: @control-padding-horizontal;
+        padding: @control-padding-horizontal;
+        cursor: pointer;
+        &-disabled {
+          color: @image-preview-operation-disabled-color;
+          pointer-events: none;
+        }
+        &:last-of-type {
+          margin-left: 0;
+        }
+      }
+      &-icon {
+        font-size: @image-preview-operation-size;
+      }
+    }
+
+    &-switch-left,
+    &-switch-right {
+      position: absolute;
+      top: 50%;
+      right: 10px;
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 44px;
+      height: 44px;
+      margin-top: -22px;
+      color: @image-preview-operation-color;
+      background: fade(@modal-mask-bg, 10%);
+      border-radius: 50%;
+      cursor: pointer;
+      pointer-events: auto;
+      &-disabled {
+        color: @image-preview-operation-disabled-color;
+        cursor: not-allowed;
+        > .anticon {
+          cursor: not-allowed;
+        }
+      }
+      > .anticon {
+        font-size: 18px;
+      }
+    }
+
+    &-switch-left {
+      left: 10px;
+    }
+
+    &-switch-right {
+      right: 10px;
+    }
+  }
+}

components/image/style/index.ts

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

components/index.ts

@@ -133,7 +133,7 @@ import { default as Drawer } from './drawer';
 import { default as Skeleton } from './skeleton';
 
 import { default as Comment } from './comment';
-
+import { default as Image } from './image';
 // import { default as ColorPicker } from './color-picker';
 
 import { default as ConfigProvider } from './config-provider';
@@ -209,6 +209,7 @@ const components = [
   Descriptions,
   PageHeader,
   Space,
+  Image,
 ];
 
 const install = function(app: App) {
@@ -296,6 +297,7 @@ export {
   Descriptions,
   PageHeader,
   Space,
+  Image,
 };
 
 export default {

components/style.ts

@@ -60,4 +60,5 @@ import './descriptions/style';
 import './page-header/style';
 import './form/style';
 import './space/style';
+import './image/style';
 // import './color-picker/style';

components/style/mixins/box.less

@@ -0,0 +1,7 @@
+.box(@position: absolute) {
+  position: @position;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}

components/style/mixins/index.less

@@ -8,3 +8,5 @@
 @import 'reset';
 @import 'operation-unit';
 @import 'typography';
+@import 'box';
+@import 'modal-mask';

components/style/mixins/modal-mask.less

@@ -0,0 +1,31 @@
+@import 'box';
+
+.modal-mask() {
+  pointer-events: none;
+
+  &.zoom-enter,
+  &.zoom-appear {
+    transform: none; // reset scale avoid mousePosition bug
+    opacity: 0;
+    animation-duration: @animation-duration-slow;
+    user-select: none; // https://github.com/ant-design/ant-design/issues/11777
+  }
+
+  &-mask {
+    .box(fixed);
+    z-index: @zindex-modal-mask;
+    height: 100%;
+    background-color: @modal-mask-bg;
+
+    &-hidden {
+      display: none;
+    }
+  }
+
+  &-wrap {
+    .box(fixed);
+    overflow: auto;
+    outline: 0;
+    -webkit-overflow-scrolling: touch;
+  }
+}

components/style/themes/default.less

@@ -288,6 +288,7 @@
 @zindex-dropdown: 1050;
 @zindex-picker: 1050;
 @zindex-tooltip: 1060;
+@zindex-image: 1080;
 
 // Animation
 @animation-duration-slow: 0.3s; // Modal
@@ -720,3 +721,13 @@
 @typography-title-font-weight: 600;
 @typography-title-margin-top: 1.2em;
 @typography-title-margin-bottom: 0.5em;
+
+// Image
+// ---
+@image-size-base: 48px;
+@image-font-size-base: 24px;
+@image-bg: #f5f5f5;
+@image-color: #fff;
+@image-preview-operation-size: 18px;
+@image-preview-operation-color: @text-color-dark;
+@image-preview-operation-disabled-color: fade(@image-preview-operation-color, 45%);