fix: image ts error

components/grid/demo/flex.vue

@@ -21,7 +21,7 @@ Child elements depending on the value of the `start`,`center`, `end`,`space-betw
 <template>
   <div id="components-grid-demo-flex">
     <p>sub-element align left</p>
-    <a-row type="flex" justify="start">
+    <a-row justify="start">
       <a-col :span="4">col-4</a-col>
       <a-col :span="4">col-4</a-col>
       <a-col :span="4">col-4</a-col>
@@ -29,7 +29,7 @@ Child elements depending on the value of the `start`,`center`, `end`,`space-betw
     </a-row>
 
     <p>sub-element align center</p>
-    <a-row type="flex" justify="center">
+    <a-row justify="center">
       <a-col :span="4">col-4</a-col>
       <a-col :span="4">col-4</a-col>
       <a-col :span="4">col-4</a-col>
@@ -37,7 +37,7 @@ Child elements depending on the value of the `start`,`center`, `end`,`space-betw
     </a-row>
 
     <p>sub-element align right</p>
-    <a-row type="flex" justify="end">
+    <a-row justify="end">
       <a-col :span="4">col-4</a-col>
       <a-col :span="4">col-4</a-col>
       <a-col :span="4">col-4</a-col>
@@ -45,7 +45,7 @@ Child elements depending on the value of the `start`,`center`, `end`,`space-betw
     </a-row>
 
     <p>sub-element monospaced arrangement</p>
-    <a-row type="flex" justify="space-between">
+    <a-row justify="space-between">
       <a-col :span="4">col-4</a-col>
       <a-col :span="4">col-4</a-col>
       <a-col :span="4">col-4</a-col>
@@ -53,7 +53,7 @@ Child elements depending on the value of the `start`,`center`, `end`,`space-betw
     </a-row>
 
     <p>sub-element align full</p>
-    <a-row type="flex" justify="space-around">
+    <a-row justify="space-around">
       <a-col :span="4">col-4</a-col>
       <a-col :span="4">col-4</a-col>
       <a-col :span="4">col-4</a-col>

components/image/demo/index.vue

@@ -5,6 +5,7 @@
     <placeholder />
     <preview-group />
     <controlled-preview />
+    <previewGroupVisibleVue />
   </demo-sort>
 </template>
 
@@ -12,8 +13,9 @@
 import Basic from './basic.vue';
 import Fallback from './fallback.vue';
 import Placeholder from './placeholder.vue';
-import PreviewGroup from './previewGroup.vue';
+import PreviewGroup from './preview-group.vue';
-import ControlledPreview from './controlledPreview.vue';
+import ControlledPreview from './controlled-preview.vue';
+import previewGroupVisibleVue from './preview-group-visible.vue';
 
 import CN from '../index.zh-CN.md';
 import US from '../index.en-US.md';
@@ -27,6 +29,7 @@ export default defineComponent({
     Placeholder,
     PreviewGroup,
     ControlledPreview,
+    previewGroupVisibleVue,
   },
 });
 </script>

components/image/demo/preview-group-visible.vue

@@ -0,0 +1,49 @@
+<docs>
+---
+order: 6
+title:
+  zh-CN: 相册模式
+  en-US: Preview from one image
+---
+
+## zh-CN
+
+从一张图片点开相册。
+
+## en-US
+
+Preview a collection from one image.
+
+</docs>
+
+<template>
+  <a-image
+    :preview="{ visible }"
+    :width="200"
+    src="https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp"
+    @click="visible = true"
+  />
+  <div style="display: none">
+    <a-image-preview-group :preview="{ visible, onVisibleChange: vis => (visible = vis) }">
+      <a-image
+        src="https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp"
+      />
+      <a-image
+        src="https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp"
+      />
+      <a-image
+        src="https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp"
+      />
+    </a-image-preview-group>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+export default defineComponent({
+  setup() {
+    return {
+      visible: ref(false),
+    };
+  },
+});
+</script>

components/image/style/index.less

@@ -7,18 +7,51 @@
 .@{image-prefix-cls} {
   position: relative;
   display: inline-block;
+
   &-img {
+    display: block;
     width: 100%;
     height: auto;
+
     &-placeholder {
       background-color: @image-bg;
-      background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=);
+      background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=');
       background-repeat: no-repeat;
       background-position: center center;
       background-size: 30%;
     }
   }
 
+  &-mask {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: @text-color-inverse;
+    background: fade(@black, 50%);
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity @animation-duration-slow;
+
+    &-info {
+      padding: 0 @padding-xss;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      .@{iconfont-css-prefix} {
+        margin-inline-end: @margin-xss;
+      }
+    }
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
   &-placeholder {
     .box();
   }
@@ -43,9 +76,11 @@
       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;
@@ -59,6 +94,7 @@
     &-moving {
       .@{image-prefix-cls}-preview-img {
         cursor: grabbing;
+
         &-wrapper {
           transition-duration: 0s;
         }
@@ -88,14 +124,17 @@
         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;
       }
@@ -118,14 +157,15 @@
       border-radius: 50%;
       cursor: pointer;
       pointer-events: auto;
+
       &-disabled {
         color: @image-preview-operation-disabled-color;
         cursor: not-allowed;
-        > .anticon {
+        > .@{iconfont-css-prefix} {
           cursor: not-allowed;
         }
       }
-      > .anticon {
+      > .@{iconfont-css-prefix} {
         font-size: 18px;
       }
     }

components/vc-image/src/Image.tsx

@@ -1,4 +1,4 @@
-import type { ImgHTMLAttributes, CSSProperties } from 'vue';
+import type { ImgHTMLAttributes, CSSProperties, PropType } from 'vue';
 import { ref, watch, defineComponent, computed, onMounted } from 'vue';
 import isNumber from 'lodash-es/isNumber';
 import cn from '../../_util/classNames';
@@ -29,21 +29,17 @@ export interface ImagePropsType extends Omit<ImgHTMLAttributes, 'placeholder' |
   preview?: boolean | ImagePreviewType;
 }
 export const imageProps = {
-  src: PropTypes.string,
+  src: String,
-  wrapperClassName: PropTypes.string,
+  wrapperClassName: String,
   wrapperStyle: PropTypes.style,
-  prefixCls: PropTypes.string,
+  prefixCls: String,
-  previewPrefixCls: PropTypes.string,
+  previewPrefixCls: String,
   placeholder: PropTypes.any,
-  fallback: PropTypes.string,
+  fallback: String,
-  preview: PropTypes.oneOfType([
+  preview: {
-    PropTypes.looseBool,
+    type: [Boolean, Object] as PropType<boolean | ImagePreviewType>,
-    PropTypes.shape({
+    default: true as boolean | ImagePreviewType,
-      visible: PropTypes.bool,
+  },
-      onVisibleChange: PropTypes.func,
-      getContainer: PropTypes.oneOfType([PropTypes.func, PropTypes.looseBool, PropTypes.string]),
-    }).loose,
-  ]).def(true),
 };
 type ImageStatus = 'normal' | 'error' | 'loading';
 

components/vc-image/src/Preview.tsx

@@ -240,73 +240,75 @@ const Preview = defineComponent({
       removeListeners();
     });
 
-    return () => (
+    return () => {
-      <Dialog
+      return (
-        {...attrs}
+        <Dialog
-        transitionName="zoom"
+          {...attrs}
-        maskTransitionName="fade"
+          transitionName="zoom"
-        closable={false}
+          maskTransitionName="fade"
-        keyboard
+          closable={false}
-        prefixCls={props.prefixCls}
+          keyboard
-        onClose={onClose}
+          prefixCls={props.prefixCls}
-        afterClose={onAfterClose}
+          onClose={onClose}
-        visible={props.visible}
+          afterClose={onAfterClose}
-        wrapClassName={wrapClassName}
+          visible={props.visible}
-        getContainer={props.getContainer}
+          wrapClassName={wrapClassName}
-      >
+          getContainer={props.getContainer}
-        <ul class={`${props.prefixCls}-operations`}>
-          {tools.map(({ icon: IconType, onClick, type, disabled }) => (
-            <li
-              class={classnames(toolClassName, {
-                [`${props.prefixCls}-operations-operation-disabled`]: disabled && disabled?.value,
-              })}
-              onClick={onClick}
-              key={type}
-            >
-              <IconType class={iconClassName} />
-            </li>
-          ))}
-        </ul>
-        <div
-          class={`${props.prefixCls}-img-wrapper`}
-          style={{
-            transform: `translate3d(${position.x}px, ${position.y}px, 0)`,
-          }}
         >
-          <img
+          <ul class={`${props.prefixCls}-operations`}>
-            onMousedown={onMouseDown}
+            {tools.map(({ icon: IconType, onClick, type, disabled }) => (
-            ref={imgRef}
+              <li
-            class={`${props.prefixCls}-img`}
+                class={classnames(toolClassName, {
-            src={combinationSrc.value}
+                  [`${props.prefixCls}-operations-operation-disabled`]: disabled && disabled?.value,
-            alt={props.alt}
+                })}
+                onClick={onClick}
+                key={type}
+              >
+                <IconType class={iconClassName} />
+              </li>
+            ))}
+          </ul>
+          <div
+            class={`${props.prefixCls}-img-wrapper`}
             style={{
-              transform: `scale3d(${scale.value}, ${scale.value}, 1) rotate(${rotate.value}deg)`,
+              transform: `translate3d(${position.x}px, ${position.y}px, 0)`,
             }}
-          />
-        </div>
-        {showLeftOrRightSwitches.value && (
-          <div
-            class={classnames(`${props.prefixCls}-switch-left`, {
-              [`${props.prefixCls}-switch-left-disabled`]: currentPreviewIndex.value <= 0,
-            })}
-            onClick={onSwitchLeft}
           >
-            <LeftOutlined />
+            <img
+              onMousedown={onMouseDown}
+              ref={imgRef}
+              class={`${props.prefixCls}-img`}
+              src={combinationSrc.value}
+              alt={props.alt}
+              style={{
+                transform: `scale3d(${scale.value}, ${scale.value}, 1) rotate(${rotate.value}deg)`,
+              }}
+            />
           </div>
-        )}
+          {showLeftOrRightSwitches.value && (
-        {showLeftOrRightSwitches.value && (
+            <div
-          <div
+              class={classnames(`${props.prefixCls}-switch-left`, {
-            class={classnames(`${props.prefixCls}-switch-right`, {
+                [`${props.prefixCls}-switch-left-disabled`]: currentPreviewIndex.value <= 0,
-              [`${props.prefixCls}-switch-right-disabled`]:
+              })}
-                currentPreviewIndex.value >= previewGroupCount.value - 1,
+              onClick={onSwitchLeft}
-            })}
+            >
-            onClick={onSwitchRight}
+              <LeftOutlined />
-          >
+            </div>
-            <RightOutlined />
+          )}
-          </div>
+          {showLeftOrRightSwitches.value && (
-        )}
+            <div
-      </Dialog>
+              class={classnames(`${props.prefixCls}-switch-right`, {
-    );
+                [`${props.prefixCls}-switch-right-disabled`]:
+                  currentPreviewIndex.value >= previewGroupCount.value - 1,
+              })}
+              onClick={onSwitchRight}
+            >
+              <RightOutlined />
+            </div>
+          )}
+        </Dialog>
+      );
+    };
   },
 });