fix(image): adjust incorrect type definitions and documentation (#2924)

* fix: fix spelling mistakes * fix(image): adjust incorrect type definitions * fix(image): adjust incorrect type definitions
arco-design · Jan 19, 2024 · 153ab55 · 153ab55
1 parent e365a70
commit 153ab55
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 25 deletions.
diff --git a/packages/web-vue/components/image/README.en-US.md b/packages/web-vue/components/image/README.en-US.md
@@ -75,11 +75,11 @@ description: Used to show and preview pictures.
 |---|---|---|:---:|
 |src|Image src|`string`|`-`|
 |visible **(v-model)**|Whether is visible|`boolean`|`-`|
-|default-visible|Default visiblity|`boolean`|`false`|
+|default-visible|Default visibility|`boolean`|`false`|
 |mask-closable|Whether to close the modal when mask is clicked|`boolean`|`true`|
 |closable|Whether to show close button|`boolean`|`true`|
 |actions-layout|Layout of action list|`string[]`|`[  'fullScreen',  'rotateRight',  'rotateLeft',  'zoomIn',  'zoomOut',  'originalSize',]`|
-|popup-container|Set the mount point of the pop-up box, the same as the `to` of `teleport`, the default value is document.body|`HTMLElement`|`-`|
+|popup-container|Set the mount point of the pop-up box, the same as the `to` of `teleport`, the default value is document.body|`HTMLElement \| string`|`-`|
 |esc-to-close|Whether to support the ESC key to close the preview|`boolean`|`true`|
 |wheel-zoom|Whether to enable wheel zoom|`boolean`|`true`|
 |keyboard|Whether to enable keyboard shortcuts|`boolean`|`true`|
@@ -108,7 +108,7 @@ description: Used to show and preview pictures.
 |default-current|The index of the first image shown|`number`|`0`|
 |infinite|Whether to loop infinitely|`boolean`|`false`|
 |visible **(v-model)**|Whether is visible|`boolean`|`-`|
-|default-visible|Default visiblity|`boolean`|`false`|
+|default-visible|Default visibility|`boolean`|`false`|
 |mask-closable|Whether to close the modal when mask is clicked|`boolean`|`true`|
 |closable|Whether to show close button|`boolean`|`true`|
 |actions-layout|Layout of action list|`string[]`|`[  'fullScreen',  'rotateRight',  'rotateLeft',  'zoomIn',  'zoomOut',  'originalSize',]`|

diff --git a/packages/web-vue/components/image/README.zh-CN.md b/packages/web-vue/components/image/README.zh-CN.md
@@ -77,7 +77,7 @@ description: 展示和预览图片。
 |mask-closable|点击 mask 是否触发关闭|`boolean`|`true`|
 |closable|是否显示关闭按钮|`boolean`|`true`|
 |actions-layout|操作项的布局|`string[]`|`[  'fullScreen',  'rotateRight',  'rotateLeft',  'zoomIn',  'zoomOut',  'originalSize',]`|
-|popup-container|设置弹出框的挂载点，同 `teleport` 的 `to`，缺省值是 document.body|`HTMLElement`|`-`|
+|popup-container|设置弹出框的挂载点，同 `teleport` 的 `to`，缺省值是 document.body|`HTMLElement \| string`|`-`|
 |esc-to-close|是否支持 ESC 键关闭预览|`boolean`|`true`|
 |wheel-zoom|是否开启滚轮缩放|`boolean`|`true`|
 |keyboard|是否开启键盘控制|`boolean`|`true`|

diff --git a/packages/web-vue/components/image/interface.ts b/packages/web-vue/components/image/interface.ts
@@ -24,17 +24,17 @@ export interface ImageProps {
 export interface ImagePreviewProps {
   src?: string;
   visible?: boolean;
-  defaultVisible: boolean;
-  maskClosable: boolean;
-  closable: boolean;
-  actionsLayout: string[];
+  defaultVisible?: boolean;
+  maskClosable?: boolean;
+  closable?: boolean;
+  actionsLayout?: string[];
   popupContainer?: HTMLElement | string;
-  escToClose: boolean;
-  keyboard: boolean;
-  wheelZoom: boolean;
-  defaultScale: number;
-  zoomRate: number;
-  groupArrowProps: Record<string, any>;
+  escToClose?: boolean;
+  keyboard?: boolean;
+  wheelZoom?: boolean;
+  defaultScale?: number;
+  zoomRate?: number;
+  groupArrowProps?: Record<string, any>;
   onClose?: () => void;
 }
 

diff --git a/packages/web-vue/components/image/preview-group.vue b/packages/web-vue/components/image/preview-group.vue
@@ -87,7 +87,7 @@ export default defineComponent({
     },
     /**
      * @zh 默认是否可见，非受控
-     * @en Default visiblity
+     * @en Default visibility
      */
     defaultVisible: {
       type: Boolean,
@@ -152,7 +152,7 @@ export default defineComponent({
    * @slot actions
    * @version 2.46.0
    */
-  setup(props: ImagePreviewGroupProps, { emit }) {
+  setup(props, { emit }) {
     const {
       srcList,
       visible,

diff --git a/packages/web-vue/components/image/preview.vue b/packages/web-vue/components/image/preview.vue
@@ -99,7 +99,6 @@ import { getPrefixCls } from '../_utils/global-config';
 import { throttleByRaf } from '../_utils/throttle-by-raf';
 import { KEYBOARD_KEY } from '../_utils/keyboard';
 import { off, on } from '../_utils/dom';
-import { ImagePreviewProps } from './interface';
 import PreviewArrow from './preview-arrow.vue';
 import PreviewToolbar from './preview-toolbar.vue';
 import useImageLoadStatus from './hooks/use-image-load-status';
@@ -155,7 +154,7 @@ export default defineComponent({
     },
     /**
      * @zh 默认是否可见，非受控
-     * @en Default visiblity
+     * @en Default visibility
      */
     defaultVisible: {
       type: Boolean,
@@ -197,7 +196,7 @@ export default defineComponent({
      * @en Set the mount point of the pop-up box, the same as the `to` of `teleport`, the default value is document.body
      */
     popupContainer: {
-      type: [Object, String] as PropType<HTMLElement>,
+      type: [Object, String] as PropType<HTMLElement | string>,
     },
     inGroup: {
       type: Boolean,
@@ -262,7 +261,7 @@ export default defineComponent({
    * @slot actions
    * @version 2.17.0
    */
-  setup(props: ImagePreviewProps, { emit }) {
+  setup(props, { emit }) {
     const { t } = useI18n();
     const {
       src,
@@ -439,7 +438,7 @@ export default defineComponent({
       changeScale(newScale);
     }
 
-    function haneleRotate(direction: 'clockwise' | 'counterclockwise') {
+    function handleRotate(direction: 'clockwise' | 'counterclockwise') {
       const isClockwise = direction === 'clockwise';
       const newRotate = isClockwise
         ? (rotate.value + ROTATE_STEP) % 360
@@ -495,14 +494,14 @@ export default defineComponent({
           key: 'rotateRight',
           name: t('imagePreview.rotateRight'),
           content: () => h(IconRotateRight),
-          onClick: () => haneleRotate('clockwise'),
+          onClick: () => handleRotate('clockwise'),
         },
         /** 逆时针旋转 */
         {
           key: 'rotateLeft',
           name: t('imagePreview.rotateLeft'),
           content: () => h(IconRotateLeft),
-          onClick: () => haneleRotate('counterclockwise'),
+          onClick: () => handleRotate('counterclockwise'),
         },
         /** 放大 */
         {

diff --git a/packages/web-vue/components/input/README.en-US.md b/packages/web-vue/components/input/README.en-US.md
@@ -87,7 +87,7 @@ description: Basic form components have been expanded on the basis of native con
 |Attribute|Description|Type|Default|
 |---|---|---|:---:|
 |visibility **(v-model)**|Whether is visible|`boolean`|`-`|
-|default-visibility|Default visiblity|`boolean`|`true`|
+|default-visibility|Default visibility|`boolean`|`true`|
 |invisible-button|Whether to show visible buttons|`boolean`|`true`|
 ### `<input-password>` Events
 

diff --git a/packages/web-vue/components/input/input-password.vue b/packages/web-vue/components/input/input-password.vue
@@ -53,7 +53,7 @@ export default defineComponent({
     },
     /**
      * @zh 默认是否可见，非受控
-     * @en Default visiblity
+     * @en Default visibility
      */
     defaultVisibility: {
       type: Boolean,