vxe-pc-ui 4.20.33 → 4.20.35

package/es/image/src/image.js

@@ -14,254 +14,257 @@ function createInternalData() {
 function createReactData() {
   return {};
 }
-var image_default = defineVxeComponent({
-  name: "VxeImage",
-  props: {
-    src: [String, Array],
-    alt: [String, Number],
-    loading: String,
-    title: [String, Number],
-    width: [String, Number],
-    height: [String, Number],
-    minWidth: [String, Number],
-    minHeight: [String, Number],
-    maxWidth: [String, Number],
-    maxHeight: [String, Number],
-    circle: Boolean,
-    draggable: {
-      type: Boolean,
-      default: () => getConfig().image.draggable
+var image_default = (
+  /* define-vxe-component start */
+  defineVxeComponent({
+    name: "VxeImage",
+    props: {
+      src: [String, Array],
+      alt: [String, Number],
+      loading: String,
+      title: [String, Number],
+      width: [String, Number],
+      height: [String, Number],
+      minWidth: [String, Number],
+      minHeight: [String, Number],
+      maxWidth: [String, Number],
+      maxHeight: [String, Number],
+      circle: Boolean,
+      draggable: {
+        type: Boolean,
+        default: () => getConfig().image.draggable
+      },
+      zIndex: Number,
+      maskClosable: {
+        type: Boolean,
+        default: () => getConfig().image.maskClosable
+      },
+      toolbarConfig: Object,
+      showPreview: {
+        type: Boolean,
+        default: () => getConfig().image.showPreview
+      },
+      showPrintButton: {
+        type: Boolean,
+        default: () => getConfig().image.showPrintButton
+      },
+      showDownloadButton: {
+        type: Boolean,
+        default: () => getConfig().image.showDownloadButton
+      },
+      size: {
+        type: String,
+        default: () => getConfig().image.size || getConfig().size
+      },
+      getThumbnailUrlMethod: Function
     },
-    zIndex: Number,
-    maskClosable: {
-      type: Boolean,
-      default: () => getConfig().image.maskClosable
-    },
-    toolbarConfig: Object,
-    showPreview: {
-      type: Boolean,
-      default: () => getConfig().image.showPreview
-    },
-    showPrintButton: {
-      type: Boolean,
-      default: () => getConfig().image.showPrintButton
-    },
-    showDownloadButton: {
-      type: Boolean,
-      default: () => getConfig().image.showDownloadButton
-    },
-    size: {
-      type: String,
-      default: () => getConfig().image.size || getConfig().size
-    },
-    getThumbnailUrlMethod: Function
-  },
-  emits: ["click", "change", "rotate", "dragstart", "drag", "dragend"],
-  setup(props, context) {
-    const { emit } = context;
-    const xID = XEUtils.uniqueId();
-    const $xeImageGroup = inject("$xeImageGroup", null);
-    const refElem = ref();
-    const { computeSize } = useFns.useSize(props);
-    const internalData = createInternalData();
-    const reactData = reactive(createReactData());
-    const refMaps = {
-      refElem
-    };
-    const computeWrapperStyle = computed(() => {
-      const { width, height, circle } = props;
-      const stys = {};
-      if (circle) {
-        if (width) {
-          stys.width = toCssUnit(width);
-          stys.height = toCssUnit(width);
-        } else if (height) {
-          stys.width = toCssUnit(height);
-          stys.height = toCssUnit(height);
-        }
-      } else {
-        if (width) {
-          stys.width = toCssUnit(width);
-        }
-        if (height) {
-          stys.height = toCssUnit(height);
-        }
-      }
-      return stys;
-    });
-    const computeImgStyle = computed(() => {
-      const { width, height, minWidth, minHeight, maxHeight, maxWidth } = props;
-      const stys = {};
-      if (width && height) {
-        stys.maxWidth = toCssUnit(width);
-        stys.maxHeight = toCssUnit(height);
-      } else {
-        if (width) {
-          stys.width = toCssUnit(width);
+    emits: ["click", "change", "rotate", "dragstart", "drag", "dragend"],
+    setup(props, context) {
+      const { emit } = context;
+      const xID = XEUtils.uniqueId();
+      const $xeImageGroup = inject("$xeImageGroup", null);
+      const refElem = ref();
+      const { computeSize } = useFns.useSize(props);
+      const internalData = createInternalData();
+      const reactData = reactive(createReactData());
+      const refMaps = {
+        refElem
+      };
+      const computeWrapperStyle = computed(() => {
+        const { width, height, circle } = props;
+        const stys = {};
+        if (circle) {
+          if (width) {
+            stys.width = toCssUnit(width);
+            stys.height = toCssUnit(width);
+          } else if (height) {
+            stys.width = toCssUnit(height);
+            stys.height = toCssUnit(height);
+          }
+        } else {
+          if (width) {
+            stys.width = toCssUnit(width);
+          }
+          if (height) {
+            stys.height = toCssUnit(height);
+          }
         }
-        if (height) {
-          stys.height = toCssUnit(height);
+        return stys;
+      });
+      const computeImgStyle = computed(() => {
+        const { width, height, minWidth, minHeight, maxHeight, maxWidth } = props;
+        const stys = {};
+        if (width && height) {
+          stys.maxWidth = toCssUnit(width);
+          stys.maxHeight = toCssUnit(height);
+        } else {
+          if (width) {
+            stys.width = toCssUnit(width);
+          }
+          if (height) {
+            stys.height = toCssUnit(height);
+          }
+          if (minWidth) {
+            stys.minWidth = toCssUnit(minWidth);
+          }
+          if (minHeight) {
+            stys.minHeight = toCssUnit(minHeight);
+          }
+          if (maxWidth) {
+            stys.maxWidth = toCssUnit(maxWidth);
+          }
+          if (maxHeight) {
+            stys.maxHeight = toCssUnit(maxHeight);
+          }
         }
-        if (minWidth) {
-          stys.minWidth = toCssUnit(minWidth);
+        return stys;
+      });
+      const computeImgList = computed(() => {
+        const { src } = props;
+        if (src) {
+          return (XEUtils.isArray(src) ? src : [src]).map((item) => {
+            if (XEUtils.isString(item)) {
+              return {
+                url: item,
+                alt: ""
+              };
+            }
+            return {
+              url: item.url,
+              alt: item.alt
+            };
+          });
         }
-        if (minHeight) {
-          stys.minHeight = toCssUnit(minHeight);
+        return [];
+      });
+      const computeImgItem = computed(() => {
+        const imgList = computeImgList.value;
+        return imgList[0];
+      });
+      const computeImgUrl = computed(() => {
+        const imgItem = computeImgItem.value;
+        return imgItem ? `${imgItem.url || ""}` : "";
+      });
+      const computeImgThumbnailUrl = computed(() => {
+        const getThumbnailUrlFn = props.getThumbnailUrlMethod || getConfig().image.getThumbnailUrlMethod;
+        const imgUrl = computeImgUrl.value;
+        return getThumbnailUrlFn ? getThumbnailUrlFn({ url: imgUrl, $image: $xeImage }) : "";
+      });
+      const computeMaps = {
+        computeSize
+      };
+      const $xeImage = {
+        xID,
+        props,
+        context,
+        reactData,
+        internalData,
+        getRefMaps: () => refMaps,
+        getComputeMaps: () => computeMaps
+      };
+      const dispatchEvent = (type, params, evnt) => {
+        emit(type, createEvent(evnt, { $image: $xeImage }, params));
+      };
+      const imageMethods = {
+        dispatchEvent
+      };
+      const clickEvent = (evnt) => {
+        const { showPreview, toolbarConfig, showPrintButton, showDownloadButton, maskClosable, zIndex } = props;
+        const { mdTime, dgTime } = internalData;
+        if (mdTime && dgTime && dgTime > mdTime) {
+          return;
         }
-        if (maxWidth) {
-          stys.maxWidth = toCssUnit(maxWidth);
+        const imgList = computeImgList.value;
+        const imgUrl = computeImgUrl.value;
+        if ($xeImageGroup) {
+          $xeImageGroup.handleClickImgEvent(evnt, { url: imgUrl });
+        } else {
+          if (showPreview && imgUrl) {
+            openPreviewImage({
+              urlList: imgList,
+              toolbarConfig,
+              showPrintButton,
+              showDownloadButton,
+              maskClosable,
+              zIndex,
+              events: {
+                change(eventParams) {
+                  dispatchEvent("change", eventParams, eventParams.$event);
+                },
+                rotate(eventParams) {
+                  dispatchEvent("rotate", eventParams, eventParams.$event);
+                }
+              }
+            });
+          }
+          dispatchEvent("click", { url: imgUrl }, evnt);
         }
-        if (maxHeight) {
-          stys.maxHeight = toCssUnit(maxHeight);
+      };
+      const mousedownEvent = () => {
+        internalData.mdTime = Date.now();
+      };
+      const handleDragstartEvent = (evnt) => {
+        internalData.dgTime = Date.now();
+        dispatchEvent("dragstart", {}, evnt);
+      };
+      const handleDragEvent = (evnt) => {
+        dispatchEvent(evnt.type, {}, evnt);
+      };
+      const imagePrivateMethods = {};
+      Object.assign($xeImage, imageMethods, imagePrivateMethods);
+      const renderVN = () => {
+        const { alt, loading, circle, draggable } = props;
+        const wrapperStyle = computeWrapperStyle.value;
+        const imgStyle = computeImgStyle.value;
+        const imgUrl = computeImgUrl.value;
+        const imgThumbnailUrl = computeImgThumbnailUrl.value;
+        const vSize = computeSize.value;
+        let imgDrag;
+        if (!XEUtils.eqNull(draggable)) {
+          imgDrag = !!(draggable === true || draggable === "true");
         }
-      }
-      return stys;
-    });
-    const computeImgList = computed(() => {
-      const { src } = props;
-      if (src) {
-        return (XEUtils.isArray(src) ? src : [src]).map((item) => {
-          if (XEUtils.isString(item)) {
-            return {
-              url: item,
-              alt: ""
-            };
-          }
-          return {
-            url: item.url,
-            alt: item.alt
-          };
-        });
-      }
-      return [];
-    });
-    const computeImgItem = computed(() => {
-      const imgList = computeImgList.value;
-      return imgList[0];
-    });
-    const computeImgUrl = computed(() => {
-      const imgItem = computeImgItem.value;
-      return imgItem ? `${imgItem.url || ""}` : "";
-    });
-    const computeImgThumbnailUrl = computed(() => {
-      const getThumbnailUrlFn = props.getThumbnailUrlMethod || getConfig().image.getThumbnailUrlMethod;
-      const imgUrl = computeImgUrl.value;
-      return getThumbnailUrlFn ? getThumbnailUrlFn({ url: imgUrl, $image: $xeImage }) : "";
-    });
-    const computeMaps = {
-      computeSize
-    };
-    const $xeImage = {
-      xID,
-      props,
-      context,
-      reactData,
-      internalData,
-      getRefMaps: () => refMaps,
-      getComputeMaps: () => computeMaps
-    };
-    const dispatchEvent = (type, params, evnt) => {
-      emit(type, createEvent(evnt, { $image: $xeImage }, params));
-    };
-    const imageMethods = {
-      dispatchEvent
-    };
-    const clickEvent = (evnt) => {
-      const { showPreview, toolbarConfig, showPrintButton, showDownloadButton, maskClosable, zIndex } = props;
-      const { mdTime, dgTime } = internalData;
-      if (mdTime && dgTime && dgTime > mdTime) {
-        return;
-      }
-      const imgList = computeImgList.value;
-      const imgUrl = computeImgUrl.value;
-      if ($xeImageGroup) {
-        $xeImageGroup.handleClickImgEvent(evnt, { url: imgUrl });
-      } else {
-        if (showPreview && imgUrl) {
-          openPreviewImage({
-            urlList: imgList,
-            toolbarConfig,
-            showPrintButton,
-            showDownloadButton,
-            maskClosable,
-            zIndex,
-            events: {
-              change(eventParams) {
-                dispatchEvent("change", eventParams, eventParams.$event);
-              },
-              rotate(eventParams) {
-                dispatchEvent("rotate", eventParams, eventParams.$event);
+        return h(
+          "div",
+          {
+            class: [
+              "vxe-image",
+              {
+                [`size--${vSize}`]: vSize,
+                "is--circle": circle
               }
-            }
-          });
-        }
-        dispatchEvent("click", { url: imgUrl }, evnt);
-      }
-    };
-    const mousedownEvent = () => {
-      internalData.mdTime = Date.now();
-    };
-    const handleDragstartEvent = (evnt) => {
-      internalData.dgTime = Date.now();
-      dispatchEvent("dragstart", {}, evnt);
-    };
-    const handleDragEvent = (evnt) => {
-      dispatchEvent(evnt.type, {}, evnt);
-    };
-    const imagePrivateMethods = {};
-    Object.assign($xeImage, imageMethods, imagePrivateMethods);
-    const renderVN = () => {
-      const { alt, loading, circle, draggable } = props;
-      const wrapperStyle = computeWrapperStyle.value;
-      const imgStyle = computeImgStyle.value;
-      const imgUrl = computeImgUrl.value;
-      const imgThumbnailUrl = computeImgThumbnailUrl.value;
-      const vSize = computeSize.value;
-      let imgDrag;
-      if (!XEUtils.eqNull(draggable)) {
-        imgDrag = !!(draggable === true || draggable === "true");
-      }
-      return h(
-        "div",
-        {
-          class: [
-            "vxe-image",
-            {
-              [`size--${vSize}`]: vSize,
-              "is--circle": circle
-            }
-          ],
-          style: wrapperStyle
-        },
-        [
-          h("img", {
-            ref: refElem,
-            class: "vxe-image-img",
-            src: imgThumbnailUrl || imgUrl,
-            alt,
-            loading,
-            draggable: imgDrag,
-            style: imgStyle,
-            onMousedown: mousedownEvent,
-            onClick: clickEvent,
-            onDragstart: handleDragstartEvent,
-            onDrag: handleDragEvent,
-            onDragend: handleDragEvent
-          })
-        ]
-      );
-    };
-    onBeforeUnmount(() => {
-      XEUtils.assign(reactData, createReactData());
-      XEUtils.assign(internalData, createInternalData());
-    });
-    $xeImage.renderVN = renderVN;
-    return $xeImage;
-  },
-  render() {
-    return this.renderVN();
-  }
-});
+            ],
+            style: wrapperStyle
+          },
+          [
+            h("img", {
+              ref: refElem,
+              class: "vxe-image-img",
+              src: imgThumbnailUrl || imgUrl,
+              alt,
+              loading,
+              draggable: imgDrag,
+              style: imgStyle,
+              onMousedown: mousedownEvent,
+              onClick: clickEvent,
+              onDragstart: handleDragstartEvent,
+              onDrag: handleDragEvent,
+              onDragend: handleDragEvent
+            })
+          ]
+        );
+      };
+      onBeforeUnmount(() => {
+        XEUtils.assign(reactData, createReactData());
+        XEUtils.assign(internalData, createInternalData());
+      });
+      $xeImage.renderVN = renderVN;
+      return $xeImage;
+    },
+    render() {
+      return this.renderVN();
+    }
+  })
+);
 export {
   image_default as default
 };