@gx-design-vue/image 0.1.2 → 0.2.0-alpha.0

package/dist/image.es.js

@@ -1,801 +0,0 @@
-import { createVNode, defineComponent, ref, computed, watch, nextTick, Fragment, resolveComponent, cloneVNode, Teleport, isVNode, createTextVNode, mergeProps } from "vue";
-import { ExpandOutlined, OneToOneOutlined, CloseOutlined, LeftOutlined, RightOutlined, ZoomOutOutlined, ZoomInOutlined, RotateLeftOutlined, RotateRightOutlined, LoadingOutlined } from "@ant-design/icons-vue";
-import { getPrefixCls, isServer, getSlotVNode, isInContainer, isString, getScrollContainer } from "@gx-design-vue/pro-utils";
-import { onMountedOrActivated } from "@gx-design-vue/pro-hooks";
-import { createTypes } from "vue-types";
-import { useThrottleFn, useEventListener } from "@vueuse/core";
-var config = "";
-var style = "";
-var PropTypes = createTypes({
-  func: void 0,
-  bool: void 0,
-  string: void 0,
-  number: void 0,
-  array: void 0,
-  object: void 0,
-  integer: void 0
-});
-PropTypes.extend([{
-  name: "looseBool",
-  getter: true,
-  type: Boolean,
-  default: void 0
-}, {
-  name: "style",
-  getter: true,
-  type: [String, Object],
-  default: void 0
-}, {
-  name: "VueNode",
-  getter: true,
-  type: null
-}]);
-var PropTypes$1 = PropTypes;
-const gImagePorps = {
-  appendToBody: {
-    type: Boolean,
-    default: false
-  },
-  hideOnClickModal: {
-    type: Boolean,
-    default: true
-  },
-  src: {
-    type: String,
-    default: ""
-  },
-  fit: {
-    type: String,
-    default: ""
-  },
-  lazy: PropTypes$1.bool,
-  scrollContainer: {
-    type: [String, Object]
-  },
-  placeholder: {
-    type: [Function, Object],
-    default: () => void 0
-  },
-  fallback: {
-    type: [Function, Object],
-    default: () => void 0
-  },
-  onError: {
-    type: Function
-  },
-  onClick: {
-    type: Function
-  },
-  disablePreview: PropTypes$1.bool,
-  previewSrcList: {
-    type: Array,
-    default: () => []
-  },
-  width: PropTypes$1.number,
-  height: PropTypes$1.number,
-  zIndex: {
-    type: Number,
-    default: 2e3
-  }
-};
-const gImageViewProps = {
-  urlList: {
-    type: Array,
-    default: () => []
-  },
-  zIndex: gImagePorps.zIndex,
-  initialIndex: {
-    type: Number,
-    default: 0
-  },
-  infinite: {
-    type: Boolean,
-    default: true
-  },
-  onHideOnClickModal: gImagePorps.hideOnClickModal
-};
-const EVENT_CODE = {
-  tab: "Tab",
-  enter: "Enter",
-  space: "Space",
-  left: "ArrowLeft",
-  up: "ArrowUp",
-  right: "ArrowRight",
-  down: "ArrowDown",
-  esc: "Escape",
-  delete: "Delete",
-  backspace: "Backspace"
-};
-const on = function(element, event, handler, useCapture = false) {
-  if (element && event && handler) {
-    element.addEventListener(event, handler, useCapture);
-  }
-};
-const off = function(element, event, handler, useCapture = false) {
-  if (element && event && handler) {
-    element.removeEventListener(event, handler, useCapture);
-  }
-};
-const Mode = {
-  CONTAIN: {
-    name: "contain",
-    icon: createVNode(ExpandOutlined, null, null)
-  },
-  ORIGINAL: {
-    name: "original",
-    icon: createVNode(OneToOneOutlined, null, null)
-  }
-};
-const isFirefox = function() {
-  return !isServer && !!window.navigator.userAgent.match(/firefox/i);
-};
-const mousewheelEventName = isFirefox() ? "DOMMouseScroll" : "mousewheel";
-function rafThrottle(fn) {
-  let locked = false;
-  return function(...args) {
-    if (locked)
-      return;
-    locked = true;
-    window.requestAnimationFrame(() => {
-      fn.apply(this, args);
-      locked = false;
-    });
-  };
-}
-const GImageViewer = defineComponent({
-  props: gImageViewProps,
-  emits: ["close", "switch"],
-  setup: function(props, {
-    emit
-  }) {
-    let _keyDownHandler = null;
-    let _mouseWheelHandler = null;
-    let _dragHandler = null;
-    const baseClassName = getPrefixCls({
-      suffixCls: "image-viewer"
-    });
-    const loading = ref(true);
-    const index = ref(props.initialIndex);
-    const wrapper = ref(null);
-    const img = ref(null);
-    const mode = ref(Mode.CONTAIN);
-    const transform = ref({
-      scale: 1,
-      deg: 0,
-      offsetX: 0,
-      offsetY: 0,
-      enableTransition: false
-    });
-    const isSingle = computed(() => {
-      const {
-        urlList
-      } = props;
-      return urlList.length <= 1;
-    });
-    const isFirst = computed(() => {
-      return index.value === 0;
-    });
-    const isLast = computed(() => {
-      return index.value === props.urlList.length - 1;
-    });
-    const currentImg = computed(() => {
-      return props.urlList[index.value];
-    });
-    const animateCss = ref("viewer-fade-enter-active");
-    const imgStyle = computed(() => {
-      const {
-        scale,
-        deg,
-        offsetX,
-        offsetY,
-        enableTransition
-      } = transform.value;
-      const style2 = {
-        transform: `scale(${scale}) rotate(${deg}deg)`,
-        transition: enableTransition ? "transform .3s" : "",
-        marginLeft: `${offsetX}px`,
-        marginTop: `${offsetY}px`
-      };
-      if (mode.value.name === Mode.CONTAIN.name) {
-        style2.maxWidth = style2.maxHeight = "100%";
-      }
-      return style2;
-    });
-    const hide = () => {
-      deviceSupportUninstall();
-      setTimeout(() => {
-        emit("close");
-      }, 200);
-    };
-    const deviceSupportInstall = () => {
-      animateCss.value = "viewer-fade-enter-active";
-      _keyDownHandler = rafThrottle((e) => {
-        switch (e.code) {
-          case EVENT_CODE.esc:
-            hide();
-            break;
-          case EVENT_CODE.space:
-            toggleMode();
-            break;
-          case EVENT_CODE.left:
-            prev();
-            break;
-          case EVENT_CODE.up:
-            handleActions("zoomIn");
-            break;
-          case EVENT_CODE.right:
-            next();
-            break;
-          case EVENT_CODE.down:
-            handleActions("zoomOut");
-            break;
-        }
-      });
-      _mouseWheelHandler = rafThrottle((e) => {
-        const delta = e.wheelDelta ? e.wheelDelta : -e.detail;
-        if (delta > 0) {
-          handleActions("zoomIn", {
-            zoomRate: 0.015,
-            enableTransition: false
-          });
-        } else {
-          handleActions("zoomOut", {
-            zoomRate: 0.015,
-            enableTransition: false
-          });
-        }
-      });
-      on(document, "keydown", _keyDownHandler);
-      on(document, mousewheelEventName, _mouseWheelHandler);
-    };
-    const deviceSupportUninstall = () => {
-      animateCss.value = "viewer-fade-leave-active";
-      off(document, "keydown", _keyDownHandler);
-      off(document, mousewheelEventName, _mouseWheelHandler);
-      _keyDownHandler = null;
-      _mouseWheelHandler = null;
-    };
-    const handleImgLoad = () => {
-      loading.value = false;
-    };
-    const handleImgError = (e) => {
-      loading.value = false;
-      e.target.alt = "\u52A0\u8F7D\u5931\u8D25";
-    };
-    const handleMouseDown = (e) => {
-      if (loading.value || e.button !== 0)
-        return;
-      const {
-        offsetX,
-        offsetY
-      } = transform.value;
-      const startX = e.pageX;
-      const startY = e.pageY;
-      _dragHandler = rafThrottle((ev) => {
-        transform.value = {
-          ...transform.value,
-          offsetX: offsetX + ev.pageX - startX,
-          offsetY: offsetY + ev.pageY - startY
-        };
-      });
-      on(document, "mousemove", _dragHandler);
-      on(document, "mouseup", () => {
-        off(document, "mousemove", _dragHandler);
-      });
-      e.preventDefault();
-    };
-    const reset = () => {
-      transform.value = {
-        scale: 1,
-        deg: 0,
-        offsetX: 0,
-        offsetY: 0,
-        enableTransition: false
-      };
-    };
-    const toggleMode = () => {
-      if (loading.value)
-        return;
-      const modeNames = Object.keys(Mode);
-      const modeValues = Object.values(Mode);
-      const currentMode = mode.value.name;
-      const index2 = modeValues.findIndex((i) => i.name === currentMode);
-      const nextIndex = (index2 + 1) % modeNames.length;
-      mode.value = Mode[modeNames[nextIndex]];
-      reset();
-    };
-    const prev = () => {
-      if (isFirst.value && !props.infinite)
-        return;
-      const len = props.urlList.length;
-      index.value = (index.value - 1 + len) % len;
-    };
-    const next = () => {
-      if (isLast.value && !props.infinite)
-        return;
-      const len = props.urlList.length;
-      index.value = (index.value + 1) % len;
-    };
-    const handleActions = (action, options = {}) => {
-      if (loading.value)
-        return;
-      const {
-        zoomRate,
-        rotateDeg,
-        enableTransition
-      } = {
-        zoomRate: 0.2,
-        rotateDeg: 90,
-        enableTransition: true,
-        ...options
-      };
-      switch (action) {
-        case "zoomOut":
-          if (transform.value.scale > 0.2) {
-            transform.value.scale = parseFloat((transform.value.scale - zoomRate).toFixed(3));
-          }
-          break;
-        case "zoomIn":
-          transform.value.scale = parseFloat((transform.value.scale + zoomRate).toFixed(3));
-          break;
-        case "clocelise":
-          transform.value.deg += rotateDeg;
-          break;
-        case "anticlocelise":
-          transform.value.deg -= rotateDeg;
-          break;
-      }
-      transform.value.enableTransition = enableTransition;
-    };
-    watch(currentImg, () => {
-      nextTick(() => {
-        const $img = img.value;
-        if (!$img.complete) {
-          loading.value = true;
-        }
-      });
-    });
-    watch(index, (val) => {
-      reset();
-      emit("switch", val);
-    });
-    onMountedOrActivated(() => {
-      var _a, _b;
-      deviceSupportInstall();
-      (_b = (_a = wrapper.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
-    });
-    return () => {
-      return createVNode("div", {
-        "ref": (e) => wrapper.value = e,
-        "tabindex": 1,
-        "class": [`${baseClassName}-wrapper`, `${animateCss.value}`],
-        "style": {
-          zIndex: props.zIndex
-        }
-      }, [createVNode("div", {
-        "class": `${baseClassName}-mask`,
-        "onClick": () => props.onHideOnClickModal && hide()
-      }, null), createVNode("span", {
-        "class": [`${baseClassName}-btn`, `${baseClassName}-close`],
-        "onClick": () => hide()
-      }, [createVNode(CloseOutlined, null, null)]), !isSingle.value && createVNode(Fragment, null, [createVNode("span", {
-        "class": {
-          [`${baseClassName}-btn`]: true,
-          [`${baseClassName}-prev`]: true,
-          [`is-disabled`]: !props.infinite && isFirst.value
-        },
-        "onClick": () => prev()
-      }, [createVNode(LeftOutlined, null, null)]), createVNode("span", {
-        "class": {
-          [`${baseClassName}-btn`]: true,
-          [`${baseClassName}-next`]: true,
-          [`is-disabled`]: !props.infinite && isFirst.value
-        },
-        "onClick": () => next()
-      }, [createVNode(RightOutlined, null, null)])]), createVNode("div", {
-        "class": [`${baseClassName}-btn`, `${baseClassName}-actions`]
-      }, [createVNode("div", {
-        "class": `${baseClassName}-actions-inner`
-      }, [createVNode(ZoomOutOutlined, {
-        "onClick": () => handleActions("zoomOut")
-      }, null), createVNode(ZoomInOutlined, {
-        "onClick": () => handleActions("zoomIn")
-      }, null), createVNode("i", {
-        "class": `${baseClassName}-actions-divider`
-      }, null), createVNode("i", {
-        "onClick": () => toggleMode()
-      }, [mode.value.icon]), createVNode("i", {
-        "class": `${baseClassName}-actions-divider`
-      }, null), createVNode(RotateLeftOutlined, {
-        "onClick": () => handleActions("anticlocelise")
-      }, null), createVNode(RotateRightOutlined, {
-        "onClick": () => handleActions("clocelise")
-      }, null)])]), loading.value && createVNode("div", {
-        "class": `${baseClassName}-canvas`
-      }, [createVNode(resolveComponent("a-spin"), {
-        "indicator": createVNode(LoadingOutlined, {
-          "style": {
-            color: "#fff",
-            fontSize: "40px"
-          }
-        }, null)
-      }, null)]), createVNode("div", {
-        "class": `${baseClassName}-canvas`
-      }, [props.urlList.map((url, i) => {
-        return createVNode("img", {
-          "ref": (e) => img.value = e,
-          "class": `${baseClassName}-img`,
-          "key": url,
-          "style": {
-            ...imgStyle.value,
-            display: i === index.value ? "block" : "none"
-          },
-          "src": url,
-          "onLoad": () => handleImgLoad(),
-          "onError": (e) => handleImgError(e),
-          "onMousedown": (e) => handleMouseDown(e)
-        }, null);
-      })])]);
-    };
-  }
-});
-function _isSlot(s) {
-  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
-}
-let prevOverflow$1 = "";
-const gImageViewerGroup = defineComponent({
-  props: {
-    hideOnClickModal: gImagePorps.hideOnClickModal
-  },
-  setup(props, {
-    slots
-  }) {
-    const baseClassName = getPrefixCls({
-      suffixCls: "image-viewer-group"
-    });
-    const showViewer = ref(false);
-    const initialSrc = ref("");
-    const getChildrenSlots = computed(() => {
-      var _a, _b, _c, _d, _e;
-      return ((_a = slots.default) == null ? void 0 : _a.call(slots).length) === 1 && (String((_b = slots.default) == null ? void 0 : _b.call(slots)[0].type) === String(Symbol("Fragment")) || String((_c = slots.default) == null ? void 0 : _c.call(slots)[0].type) === String(Symbol())) ? ((_d = slots.default) == null ? void 0 : _d.call(slots)[0].children) || [] : ((_e = slots.default) == null ? void 0 : _e.call(slots)) || [];
-    });
-    const previewSrcList = computed(() => {
-      const childrenArray = getChildrenSlots.value;
-      const checkedTags = childrenArray.filter((child) => isGImage(child)).map((child) => child.props.src).filter((src) => src);
-      return checkedTags || [];
-    });
-    const preview = computed(() => {
-      return Array.isArray(previewSrcList.value) && previewSrcList.value.length > 0;
-    });
-    const isGImage = (node) => {
-      return node && node.type && (node.type.isGImage || node.type.name === "GImage");
-    };
-    const imageIndex = () => {
-      let previewIndex = 0;
-      const srcIndex = previewSrcList.value.findIndex((item) => item === initialSrc.value);
-      if (srcIndex >= 0) {
-        previewIndex = srcIndex;
-      }
-      return previewIndex;
-    };
-    const clickHandler = (src) => {
-      if (!preview.value || !src) {
-        return;
-      }
-      initialSrc.value = src;
-      prevOverflow$1 = document.body.style.overflow;
-      document.body.style.overflow = "hidden";
-      showViewer.value = true;
-    };
-    const closeViewer = () => {
-      document.body.style.overflow = prevOverflow$1;
-      showViewer.value = false;
-    };
-    return () => {
-      let _slot;
-      return createVNode("div", {
-        "class": `${baseClassName}`
-      }, [createVNode(resolveComponent("a-space"), {
-        "size": 15
-      }, _isSlot(_slot = getChildrenSlots.value.map((child, index) => {
-        if (isGImage(child)) {
-          return createVNode("div", {
-            "key": index,
-            "class": `${baseClassName}-item`,
-            "onClick": () => {
-              var _a;
-              return clickHandler(((_a = child.props) == null ? void 0 : _a.src) || "");
-            }
-          }, [cloneVNode(child, {
-            disablePreview: true
-          })]);
-        }
-        return null;
-      })) ? _slot : {
-        default: () => [_slot]
-      }), createVNode(Teleport, {
-        "to": "body"
-      }, {
-        default: () => [preview.value && showViewer.value && createVNode(GImageViewer, {
-          "initialIndex": imageIndex(),
-          "urlList": previewSrcList.value,
-          "onHideOnClickModal": props.hideOnClickModal,
-          "onClose": () => closeViewer()
-        }, null)]
-      })]);
-    };
-  }
-});
-const isHtmlElement = (e) => e && e.nodeType === Node.ELEMENT_NODE;
-const isSupportObjectFit = () => document.documentElement.style.objectFit !== void 0;
-let prevOverflow = "";
-const ObjectFit = {
-  NONE: "none",
-  CONTAIN: "contain",
-  COVER: "cover",
-  FILL: "fill",
-  SCALE_DOWN: "scale-down"
-};
-const GImage = defineComponent({
-  props: gImagePorps,
-  name: "GImage",
-  inheritAttrs: false,
-  emits: ["error", "click"],
-  setup(props, {
-    slots,
-    emit,
-    attrs
-  }) {
-    const baseClassName = getPrefixCls({
-      suffixCls: "image"
-    });
-    const hasLoadError = ref(false);
-    const loading = ref(true);
-    const imgWidth = ref(0);
-    const imgHeight = ref(0);
-    const showViewer = ref(false);
-    const container = ref(null);
-    const _scrollContainer = ref();
-    let stopScrollListener;
-    let stopWheelListener;
-    const imageWidthHeightStyle = computed(() => {
-      return {
-        width: props.width ? `${props.width}px` : void 0,
-        height: props.height ? `${props.height}px` : void 0
-      };
-    });
-    const imageStyle = computed(() => {
-      const {
-        fit
-      } = props;
-      if (!isServer && fit) {
-        return isSupportObjectFit() ? {
-          "object-fit": fit,
-          ...imageWidthHeightStyle.value
-        } : {
-          ...getImageStyle(fit),
-          ...imageWidthHeightStyle.value
-        };
-      }
-      return imageWidthHeightStyle.value;
-    });
-    const alignCenter = computed(() => {
-      const {
-        fit
-      } = props;
-      return !isServer && !isSupportObjectFit() && fit !== ObjectFit.FILL;
-    });
-    const preview = computed(() => {
-      const {
-        previewSrcList
-      } = props;
-      return Array.isArray(previewSrcList) && previewSrcList.length > 0;
-    });
-    const imageIndex = computed(() => {
-      const {
-        src,
-        previewSrcList
-      } = props;
-      let previewIndex = 0;
-      const srcIndex = previewSrcList.indexOf(src);
-      if (srcIndex >= 0) {
-        previewIndex = srcIndex;
-      }
-      return previewIndex;
-    });
-    const getAttrs = computed(() => attrs);
-    const getImageStyle = (fit) => {
-      const imageWidth = props.width || imgWidth.value;
-      const imageHeight = props.height || imgHeight.value;
-      if (!container.value)
-        return {};
-      const {
-        clientWidth: containerWidth,
-        clientHeight: containerHeight
-      } = container.value;
-      if (!imageWidth || !imageHeight || !containerWidth || !containerHeight)
-        return {};
-      const imageAspectRatio = imageWidth / imageHeight;
-      const containerAspectRatio = containerWidth / containerHeight;
-      if (fit === ObjectFit.SCALE_DOWN) {
-        const isSmaller = imageWidth < containerWidth && imageHeight < containerHeight;
-        fit = isSmaller ? ObjectFit.NONE : ObjectFit.CONTAIN;
-      }
-      switch (fit) {
-        case ObjectFit.NONE:
-          return {
-            width: "auto",
-            height: "auto"
-          };
-        case ObjectFit.CONTAIN:
-          return imageAspectRatio < containerAspectRatio ? {
-            width: "auto"
-          } : {
-            height: "auto"
-          };
-        case ObjectFit.COVER:
-          return imageAspectRatio < containerAspectRatio ? {
-            height: "auto"
-          } : {
-            width: "auto"
-          };
-        default:
-          return {};
-      }
-    };
-    const loadImage = () => {
-      if (isServer)
-        return;
-      const attributes = getAttrs.value;
-      loading.value = true;
-      hasLoadError.value = false;
-      const img = new Image();
-      img.onload = (e) => handleLoad(e, img);
-      img.onerror = handleError;
-      Object.keys(attributes).forEach((key) => {
-        if (key.toLowerCase() === "onload")
-          return;
-        const value = attributes[key];
-        img.setAttribute(key, value);
-      });
-      img.src = props.src;
-    };
-    function handleLazyLoad() {
-      if (isInContainer(container.value, _scrollContainer.value)) {
-        loadImage();
-        removeLazyLoadListener();
-      }
-    }
-    const lazyLoadHandler = useThrottleFn(handleLazyLoad, 200);
-    const addLazyLoadListener = async () => {
-      var _a;
-      if (isServer)
-        return;
-      await nextTick();
-      const {
-        scrollContainer
-      } = props;
-      if (isHtmlElement(scrollContainer)) {
-        _scrollContainer.value = scrollContainer;
-      } else if (isString(scrollContainer) && scrollContainer !== "") {
-        _scrollContainer.value = (_a = document.querySelector(scrollContainer)) != null ? _a : void 0;
-      } else if (container.value) {
-        _scrollContainer.value = getScrollContainer(container.value);
-      }
-      if (_scrollContainer.value) {
-        stopScrollListener = useEventListener(_scrollContainer, "scroll", lazyLoadHandler);
-        setTimeout(() => handleLazyLoad(), 200);
-      }
-    };
-    const removeLazyLoadListener = () => {
-      if (isServer || !_scrollContainer.value || !lazyLoadHandler)
-        return;
-      stopScrollListener();
-      _scrollContainer.value = void 0;
-    };
-    const handleLoad = (_, img) => {
-      imgWidth.value = img.width;
-      imgHeight.value = img.height;
-      loading.value = false;
-      hasLoadError.value = false;
-    };
-    const handleError = (e) => {
-      loading.value = false;
-      hasLoadError.value = true;
-      emit("error", e);
-    };
-    const wheelHandler = (e) => {
-      if (!e.ctrlKey)
-        return;
-      if (e.deltaY < 0) {
-        e.preventDefault();
-        return false;
-      } else if (e.deltaY > 0) {
-        e.preventDefault();
-        return false;
-      }
-    };
-    const clickHandler = () => {
-      if (!preview.value || props.disablePreview) {
-        return;
-      }
-      stopWheelListener = useEventListener("wheel", wheelHandler, {
-        passive: false
-      });
-      prevOverflow = document.body.style.overflow;
-      document.body.style.overflow = "hidden";
-      showViewer.value = true;
-    };
-    const closeViewer = () => {
-      stopWheelListener == null ? void 0 : stopWheelListener();
-      document.body.style.overflow = prevOverflow;
-      showViewer.value = false;
-    };
-    watch(() => props.src, () => {
-      if (props.lazy) {
-        loading.value = true;
-        hasLoadError.value = false;
-        removeLazyLoadListener();
-        addLazyLoadListener();
-      } else {
-        loadImage();
-      }
-    });
-    onMountedOrActivated(() => {
-      if (props.lazy) {
-        addLazyLoadListener();
-      } else {
-        loadImage();
-      }
-    });
-    return () => {
-      const fallbackRender = getSlotVNode(slots, props, "fallback");
-      const placeholderRender = getSlotVNode(slots, props, "placeholder");
-      return createVNode(Fragment, null, [createVNode("div", {
-        "class": {
-          [`${baseClassName}`]: true,
-          [`${getAttrs.value.class}`]: getAttrs.value.class
-        },
-        "ref": (e) => container.value = e,
-        "style": {
-          ...getAttrs.value.style || {},
-          display: props.lazy ? "block" : void 0
-        },
-        "onClick": () => {
-          emit("click");
-        }
-      }, [loading.value ? placeholderRender || createVNode("div", {
-        "class": `${baseClassName}-placeholder`
-      }, null) : hasLoadError.value ? fallbackRender || createVNode("div", {
-        "class": `${baseClassName}-error`
-      }, [createTextVNode("\u52A0\u8F7D\u5931\u8D25")]) : createVNode("img", mergeProps({
-        "class": {
-          [`${baseClassName}-inner`]: true,
-          [`${baseClassName}-inner-center`]: alignCenter.value,
-          [`${baseClassName}-preview`]: preview.value
-        }
-      }, getAttrs.value, {
-        "src": props.src,
-        "style": imageStyle.value,
-        "onClick": () => clickHandler()
-      }), null), createVNode(Teleport, {
-        "to": "body",
-        "disabled": !props.appendToBody
-      }, {
-        default: () => [preview.value && showViewer.value && createVNode(GImageViewer, {
-          "zIndex": props.zIndex,
-          "initialIndex": imageIndex.value,
-          "urlList": props.previewSrcList,
-          "onHideOnClickModal": props.hideOnClickModal,
-          "onClose": () => closeViewer()
-        }, null)]
-      })])]);
-    };
-  }
-});
-GImage.isWImage = true;
-GImage.install = (app) => {
-  app.component(GImage.name, GImage);
-  return app;
-};
-export { GImage, GImageViewer as ImageViewer, gImageViewerGroup as ImageViewerGroup, GImage as default };