vxe-pc-ui 3.15.28 → 3.16.0

package/es/icon-picker/style.css

@@ -1,242 +0,0 @@
-.vxe-ico-picker,
-.vxe-ico-picker--panel {
-  --vxe-ui-ico-picker-current-font-size: var(--vxe-ui-font-size-default);
-  --vxe-ui-ico-picker-current-height: var(--vxe-ui-input-height-default);
-}
-.vxe-ico-picker.size--medium,
-.vxe-ico-picker--panel.size--medium {
-  --vxe-ui-ico-picker-current-font-size: var(--vxe-ui-font-size-medium);
-  --vxe-ui-ico-picker-current-height: var(--vxe-ui-input-height-medium);
-}
-.vxe-ico-picker.size--small,
-.vxe-ico-picker--panel.size--small {
-  --vxe-ui-ico-picker-current-font-size: var(--vxe-ui-font-size-small);
-  --vxe-ui-ico-picker-current-height: var(--vxe-ui-input-height-small);
-}
-.vxe-ico-picker.size--mini,
-.vxe-ico-picker--panel.size--mini {
-  --vxe-ui-ico-picker-current-font-size: var(--vxe-ui-font-size-mini);
-  --vxe-ui-ico-picker-current-height: var(--vxe-ui-input-height-mini);
-}
-
-.vxe-ico-picker {
-  position: relative;
-  display: inline-block;
-  font-size: var(--vxe-ui-ico-picker-current-font-size);
-  color: var(--vxe-ui-font-color);
-  width: 100px;
-  border: 1px solid var(--vxe-ui-input-border-color);
-  border-radius: var(--vxe-ui-base-border-radius);
-  background-color: var(--vxe-ui-layout-background-color);
-  height: var(--vxe-ui-ico-picker-current-height);
-  line-height: var(--vxe-ui-ico-picker-current-height);
-}
-.vxe-ico-picker.is--disabled {
-  background-color: var(--vxe-ui-input-disabled-background-color);
-  color: var(--vxe-ui-font-disabled-color);
-  cursor: no-drop;
-}
-.vxe-ico-picker.show--clear:hover .vxe-ico-picker--clear-icon {
-  display: block;
-}
-.vxe-ico-picker.is--active {
-  border-color: var(--vxe-ui-font-primary-color);
-}
-
-.vxe-ico-picker--inner {
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  padding: 0 0.5em;
-}
-
-.vxe-ico-picker--input {
-  position: absolute;
-  z-index: -1;
-  width: 1px;
-  height: 1px;
-  outline: 0;
-  border: 0;
-}
-
-.vxe-ico-picker--icon {
-  flex-grow: 1;
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: left;
-  padding: 0 0.5em;
-}
-.vxe-ico-picker--icon > svg {
-  max-width: 1em;
-  max-height: 1em;
-  vertical-align: middle;
-}
-
-.vxe-ico-picker--placeholder {
-  flex-grow: 1;
-  color: var(--vxe-ui-input-placeholder-color);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.vxe-ico-picker--suffix {
-  display: flex;
-  flex-direction: row;
-  flex-shrink: 0;
-  color: var(--vxe-ui-input-placeholder-color);
-  cursor: pointer;
-}
-.vxe-ico-picker--suffix .vxe-ico-picker--suffix-icon > i {
-  display: inline-block;
-  transition: transform 0.2s ease-in-out;
-}
-
-.vxe-ico-picker--panel-search {
-  display: block;
-  flex-shrink: 0;
-  padding: var(--vxe-ui-layout-padding-default);
-}
-.vxe-ico-picker--panel-search .vxe-ico-picker-search--input {
-  width: 100%;
-}
-
-.vxe-ico-picker--readonly {
-  color: var(--vxe-ui-font-color);
-  display: inline-flex;
-}
-
-.vxe-ico-picker--clear-icon {
-  display: none;
-  padding-right: 0.5em;
-  height: 100%;
-  color: var(--vxe-ui-input-placeholder-color);
-  cursor: pointer;
-}
-.vxe-ico-picker--clear-icon:hover {
-  color: var(--vxe-ui-font-color);
-}
-.vxe-ico-picker--clear-icon:active {
-  color: var(--vxe-ui-font-primary-color);
-}
-
-.vxe-ico-picker--all-list {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-}
-
-.vxe-ico-picker--list-wrapper {
-  overflow-x: hidden;
-  overflow-y: auto;
-  height: var(--vxe-ui-icon-picker-panel-height);
-  max-height: var(--vxe-ui-icon-picker-panel-max-height, var(--vxe-ui-icon-picker-panel-height, 22.3em));
-  padding: var(--vxe-ui-layout-padding-qtr);
-}
-
-.vxe-ico-picker--list {
-  display: flex;
-  flex-direction: row;
-}
-
-.vxe-ico-picker--item {
-  display: flex;
-  flex-direction: column;
-  min-width: 4.8em;
-  width: var(--vxe-ui-icon-picker-item-width, 4.8em);
-  padding: var(--vxe-ui-layout-padding-half);
-}
-.vxe-ico-picker--item .vxe-ico-picker--item-inner {
-  padding: 0.2em;
-  border: 1px solid var(--vxe-ui-input-border-color);
-  border-radius: var(--vxe-ui-base-border-radius);
-  cursor: pointer;
-}
-.vxe-ico-picker--item .vxe-ico-picker--item-inner:hover {
-  background-color: var(--vxe-ui-base-hover-background-color);
-}
-.vxe-ico-picker--item.is--selected .vxe-ico-picker--item-inner {
-  color: var(--vxe-ui-font-primary-color);
-  border-color: var(--vxe-ui-font-primary-color);
-}
-
-.vxe-ico-picker--item-icon {
-  flex-grow: 1;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  height: 1.5em;
-  font-size: var(--vxe-ui-icon-picker-panel-icon-font-size);
-}
-.vxe-ico-picker--item-icon > svg {
-  max-width: 1em;
-  max-height: 1em;
-  vertical-align: middle;
-}
-
-.vxe-ico-picker--item-title {
-  padding: 0 0.2em;
-  line-height: 1.3em;
-  flex-shrink: 0;
-  text-align: center;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 0.9em;
-}
-
-.vxe-ico-picker--item-title,
-.vxe-ico-picker--item-icon {
-  width: 100%;
-}
-
-.vxe-ico-picker--panel-wrapper {
-  position: relative;
-  border-radius: var(--vxe-ui-base-border-radius);
-  border: 1px solid var(--vxe-ui-base-popup-border-color);
-  box-shadow: var(--vxe-ui-base-popup-box-shadow);
-  background-color: var(--vxe-ui-layout-background-color);
-}
-
-.vxe-ico-picker--panel {
-  display: none;
-  position: absolute;
-  left: 0;
-  padding: 4px 0;
-  font-size: var(--vxe-ui-ico-picker-current-font-size);
-  color: var(--vxe-ui-font-color);
-  text-align: left;
-}
-.vxe-ico-picker--panel:not(.is--transfer) {
-  min-width: 100%;
-}
-.vxe-ico-picker--panel.is--transfer {
-  position: fixed;
-}
-.vxe-ico-picker--panel.ani--leave {
-  display: block;
-  opacity: 0;
-  transform: scaleY(0.5);
-  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-  transform-origin: center top;
-  backface-visibility: hidden;
-}
-.vxe-ico-picker--panel.ani--leave[placement=top] {
-  transform-origin: center bottom;
-}
-.vxe-ico-picker--panel.ani--enter {
-  opacity: 1;
-  transform: scaleY(1);
-}
-
-.vxe-ico-picker--empty-placeholder {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  padding: 0 0.6em;
-  text-align: center;
-  min-height: 4em;
-}

package/es/icon-picker/style.min.css

@@ -1 +0,0 @@
-.vxe-ico-picker,.vxe-ico-picker--panel{--vxe-ui-ico-picker-current-font-size:var(--vxe-ui-font-size-default);--vxe-ui-ico-picker-current-height:var(--vxe-ui-input-height-default)}.vxe-ico-picker--panel.size--medium,.vxe-ico-picker.size--medium{--vxe-ui-ico-picker-current-font-size:var(--vxe-ui-font-size-medium);--vxe-ui-ico-picker-current-height:var(--vxe-ui-input-height-medium)}.vxe-ico-picker--panel.size--small,.vxe-ico-picker.size--small{--vxe-ui-ico-picker-current-font-size:var(--vxe-ui-font-size-small);--vxe-ui-ico-picker-current-height:var(--vxe-ui-input-height-small)}.vxe-ico-picker--panel.size--mini,.vxe-ico-picker.size--mini{--vxe-ui-ico-picker-current-font-size:var(--vxe-ui-font-size-mini);--vxe-ui-ico-picker-current-height:var(--vxe-ui-input-height-mini)}.vxe-ico-picker{position:relative;display:inline-block;font-size:var(--vxe-ui-ico-picker-current-font-size);color:var(--vxe-ui-font-color);width:100px;border:1px solid var(--vxe-ui-input-border-color);border-radius:var(--vxe-ui-base-border-radius);background-color:var(--vxe-ui-layout-background-color);height:var(--vxe-ui-ico-picker-current-height);line-height:var(--vxe-ui-ico-picker-current-height)}.vxe-ico-picker.is--disabled{background-color:var(--vxe-ui-input-disabled-background-color);color:var(--vxe-ui-font-disabled-color);cursor:no-drop}.vxe-ico-picker.show--clear:hover .vxe-ico-picker--clear-icon{display:block}.vxe-ico-picker.is--active{border-color:var(--vxe-ui-font-primary-color)}.vxe-ico-picker--inner{display:flex;flex-direction:row;width:100%;padding:0 .5em}.vxe-ico-picker--input{position:absolute;z-index:-1;width:1px;height:1px;outline:0;border:0}.vxe-ico-picker--icon{flex-grow:1;display:inline-flex;flex-direction:row;align-items:center;justify-content:left;padding:0 .5em}.vxe-ico-picker--icon>svg{max-width:1em;max-height:1em;vertical-align:middle}.vxe-ico-picker--placeholder{flex-grow:1;color:var(--vxe-ui-input-placeholder-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-ico-picker--suffix{display:flex;flex-direction:row;flex-shrink:0;color:var(--vxe-ui-input-placeholder-color);cursor:pointer}.vxe-ico-picker--suffix .vxe-ico-picker--suffix-icon>i{display:inline-block;transition:transform .2s ease-in-out}.vxe-ico-picker--panel-search{display:block;flex-shrink:0;padding:var(--vxe-ui-layout-padding-default)}.vxe-ico-picker--panel-search .vxe-ico-picker-search--input{width:100%}.vxe-ico-picker--readonly{color:var(--vxe-ui-font-color);display:inline-flex}.vxe-ico-picker--clear-icon{display:none;padding-right:.5em;height:100%;color:var(--vxe-ui-input-placeholder-color);cursor:pointer}.vxe-ico-picker--clear-icon:hover{color:var(--vxe-ui-font-color)}.vxe-ico-picker--clear-icon:active{color:var(--vxe-ui-font-primary-color)}.vxe-ico-picker--all-list{display:flex;flex-direction:row;flex-wrap:wrap}.vxe-ico-picker--list-wrapper{overflow-x:hidden;overflow-y:auto;height:var(--vxe-ui-icon-picker-panel-height);max-height:var(--vxe-ui-icon-picker-panel-max-height,var(--vxe-ui-icon-picker-panel-height,22.3em));padding:var(--vxe-ui-layout-padding-qtr)}.vxe-ico-picker--list{display:flex;flex-direction:row}.vxe-ico-picker--item{display:flex;flex-direction:column;min-width:4.8em;width:var(--vxe-ui-icon-picker-item-width,4.8em);padding:var(--vxe-ui-layout-padding-half)}.vxe-ico-picker--item .vxe-ico-picker--item-inner{padding:.2em;border:1px solid var(--vxe-ui-input-border-color);border-radius:var(--vxe-ui-base-border-radius);cursor:pointer}.vxe-ico-picker--item .vxe-ico-picker--item-inner:hover{background-color:var(--vxe-ui-base-hover-background-color)}.vxe-ico-picker--item.is--selected .vxe-ico-picker--item-inner{color:var(--vxe-ui-font-primary-color);border-color:var(--vxe-ui-font-primary-color)}.vxe-ico-picker--item-icon{flex-grow:1;display:flex;flex-direction:row;align-items:center;justify-content:center;height:1.5em;font-size:var(--vxe-ui-icon-picker-panel-icon-font-size)}.vxe-ico-picker--item-icon>svg{max-width:1em;max-height:1em;vertical-align:middle}.vxe-ico-picker--item-title{padding:0 .2em;line-height:1.3em;flex-shrink:0;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9em}.vxe-ico-picker--item-icon,.vxe-ico-picker--item-title{width:100%}.vxe-ico-picker--panel-wrapper{position:relative;border-radius:var(--vxe-ui-base-border-radius);border:1px solid var(--vxe-ui-base-popup-border-color);box-shadow:var(--vxe-ui-base-popup-box-shadow);background-color:var(--vxe-ui-layout-background-color)}.vxe-ico-picker--panel{display:none;position:absolute;left:0;padding:4px 0;font-size:var(--vxe-ui-ico-picker-current-font-size);color:var(--vxe-ui-font-color);text-align:left}.vxe-ico-picker--panel:not(.is--transfer){min-width:100%}.vxe-ico-picker--panel.is--transfer{position:fixed}.vxe-ico-picker--panel.ani--leave{display:block;opacity:0;transform:scaleY(.5);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transform-origin:center top;backface-visibility:hidden}.vxe-ico-picker--panel.ani--leave[placement=top]{transform-origin:center bottom}.vxe-ico-picker--panel.ani--enter{opacity:1;transform:scaleY(1)}.vxe-ico-picker--empty-placeholder{display:flex;flex-direction:row;align-items:center;justify-content:center;padding:0 .6em;text-align:center;min-height:4em}

package/es/image/index.js

@@ -1,12 +0,0 @@
-import { VxeUI } from '@vxe-ui/core';
-import VxeImageComponent from './src/image';
-import { dynamicApp } from '../dynamics';
-export const VxeImage = Object.assign({}, VxeImageComponent, {
-    install(app) {
-        app.component(VxeImageComponent.name, VxeImageComponent);
-    }
-});
-dynamicApp.use(VxeImage);
-VxeUI.component(VxeImageComponent);
-export const Image = VxeImage;
-export default VxeImage;

package/es/image/src/group.js

@@ -1,144 +0,0 @@
-import { defineVxeComponent } from '../../ui/src/comp';
-import XEUtils from 'xe-utils';
-import { getConfig, createEvent, globalMixins } from '@vxe-ui/core';
-import { openPreviewImage } from './util';
-import VxeImageComponent from './image';
-export default {
-    name: 'VxeImageGroup',
-    mixins: [
-        globalMixins.sizeMixin
-    ],
-    props: {
-        urlList: [Array, String],
-        showPreview: {
-            type: Boolean,
-            default: () => getConfig().imageGroup.showPreview
-        },
-        imageStyle: Object,
-        zIndex: Number,
-        size: {
-            type: String,
-            default: () => getConfig().imageGroup.size || getConfig().size
-        },
-        toolbarConfig: Object,
-        showPrintButton: {
-            type: Boolean,
-            default: () => getConfig().imageGroup.showPrintButton
-        },
-        showDownloadButton: {
-            type: Boolean,
-            default: () => getConfig().imageGroup.showDownloadButton
-        },
-        getThumbnailUrlMethod: Function
-    },
-    provide() {
-        const $xeImageGroup = this;
-        return {
-            $xeImageGroup
-        };
-    },
-    data() {
-        const xID = XEUtils.uniqueId();
-        const reactData = {};
-        return {
-            xID,
-            reactData
-        };
-    },
-    computed: Object.assign(Object.assign({}, {}), { computeImgList() {
-            const $xeImageGroup = this;
-            const props = $xeImageGroup;
-            const { urlList } = props;
-            if (urlList) {
-                return (XEUtils.isArray(urlList) ? urlList : [urlList]).map(item => {
-                    if (XEUtils.isString(item)) {
-                        return {
-                            url: item,
-                            alt: ''
-                        };
-                    }
-                    return {
-                        url: item.url,
-                        alt: item.alt
-                    };
-                });
-            }
-            return [];
-        },
-        computeImgStyleOpts() {
-            const $xeImageGroup = this;
-            const props = $xeImageGroup;
-            return Object.assign({}, getConfig().imageGroup.imageStyle, props.imageStyle);
-        },
-        computeGetThumbnailUrlMethod() {
-            const $xeImageGroup = this;
-            const props = $xeImageGroup;
-            return props.getThumbnailUrlMethod || getConfig().imageGroup.getThumbnailUrlMethod;
-        } }),
-    methods: {
-        //
-        // Method
-        //
-        dispatchEvent(type, params, evnt) {
-            const $xeImageGroup = this;
-            $xeImageGroup.$emit(type, createEvent(evnt, { $imageGroup: $xeImageGroup }, params));
-        },
-        handleClickImgEvent(evnt, params) {
-            const $xeImageGroup = this;
-            const props = $xeImageGroup;
-            const { showPreview, toolbarConfig, showPrintButton, showDownloadButton, zIndex } = props;
-            const { url } = params;
-            const imgList = $xeImageGroup.computeImgList;
-            if (showPreview && url) {
-                openPreviewImage({
-                    activeIndex: Math.max(0, XEUtils.findIndexOf(imgList, item => item.url === url)),
-                    urlList: imgList,
-                    toolbarConfig,
-                    showPrintButton,
-                    showDownloadButton,
-                    zIndex,
-                    events: {
-                        change(eventParams) {
-                            $xeImageGroup.dispatchEvent('change', eventParams, eventParams.$event);
-                        },
-                        rotate(eventParams) {
-                            $xeImageGroup.dispatchEvent('rotate', eventParams, eventParams.$event);
-                        }
-                    }
-                });
-            }
-            $xeImageGroup.dispatchEvent('click', { url, urlList: imgList }, evnt);
-        },
-        //
-        // Render
-        //
-        renderVN(h) {
-            const $xeImageGroup = this;
-            const imgList = $xeImageGroup.computeImgList;
-            const vSize = $xeImageGroup.computeSize;
-            const imgStyleOpts = $xeImageGroup.computeImgStyleOpts;
-            const getThumbnailUrlMethod = $xeImageGroup.computeGetThumbnailUrlMethod;
-            return h('div', {
-                class: ['vxe-image-group', {
-                        [`size--${vSize}`]: vSize
-                    }]
-            }, imgList
-                ? imgList.map((item, index) => {
-                    return h(VxeImageComponent, {
-                        key: index,
-                        props: {
-                            src: item.url,
-                            alt: item.alt,
-                            width: imgStyleOpts.width,
-                            height: imgStyleOpts.height,
-                            getThumbnailUrlMethod
-                        }
-                    });
-                })
-                : []);
-        }
-    },
-    render(h) {
-        return this.renderVN(h);
-    }
-};

package/es/image/src/image.js

@@ -1,274 +0,0 @@
-import { defineVxeComponent } from '../../ui/src/comp';
-import XEUtils from 'xe-utils';
-import { getConfig, createEvent, globalMixins } from '../../ui';
-import { toCssUnit } from '../../ui/src/dom';
-import { openPreviewImage } from './util';
-function createInternalData() {
-    return {
-    // dgTime: 0,
-    // mdTime: 0
-    };
-}
-function createReactData() {
-    return {};
-}
-export default {
-    name: 'VxeImage',
-    mixins: [
-        globalMixins.sizeMixin
-    ],
-    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
-    },
-    data() {
-        const reactData = createReactData();
-        return Object.assign(Object.assign({}, {}), { xID: XEUtils.uniqueId(), reactData });
-    },
-    computed: Object.assign(Object.assign({}, {}), { computeWrapperStyle() {
-            const $xeImage = this;
-            const props = $xeImage;
-            const { width, height, circle } = props;
-            const stys = {};
-            if (circle) {
-                // 圆形只能生效一个
-                if (width) {
-                    stys.height = toCssUnit(width);
-                }
-                else if (height) {
-                    stys.width = toCssUnit(height);
-                }
-            }
-            else {
-                if (width) {
-                    stys.width = toCssUnit(width);
-                }
-                if (height) {
-                    stys.height = toCssUnit(height);
-                }
-            }
-            return stys;
-        },
-        computeImgStyle() {
-            const $xeImage = this;
-            const props = $xeImage;
-            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);
-                }
-            }
-            return stys;
-        },
-        computeImgList() {
-            const $xeImage = this;
-            const props = $xeImage;
-            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 [];
-        },
-        computeImgItem() {
-            const $xeImage = this;
-            const imgList = $xeImage.computeImgList;
-            return imgList[0];
-        },
-        computeImgUrl() {
-            const $xeImage = this;
-            const imgItem = $xeImage.computeImgItem;
-            return imgItem ? `${imgItem.url || ''}` : '';
-        },
-        computeImgThumbnailUrl() {
-            const $xeImage = this;
-            const props = $xeImage;
-            const getThumbnailUrlFn = props.getThumbnailUrlMethod || getConfig().image.getThumbnailUrlMethod;
-            const imgUrl = $xeImage.computeImgUrl;
-            return getThumbnailUrlFn ? getThumbnailUrlFn({ url: imgUrl, $image: $xeImage }) : '';
-        } }),
-    methods: {
-        //
-        // Method
-        //
-        dispatchEvent(type, params, evnt) {
-            const $xeImage = this;
-            $xeImage.$emit(type, createEvent(evnt, { $image: $xeImage }, params));
-        },
-        clickEvent(evnt) {
-            const $xeImage = this;
-            const props = $xeImage;
-            const internalData = $xeImage.internalData;
-            const $xeImageGroup = $xeImage.$xeImageGroup;
-            const { showPreview, toolbarConfig, showPrintButton, showDownloadButton, maskClosable, zIndex } = props;
-            const { mdTime, dgTime } = internalData;
-            if (mdTime && dgTime && dgTime > mdTime) {
-                return;
-            }
-            const imgList = $xeImage.computeImgList;
-            const imgUrl = $xeImage.computeImgUrl;
-            if ($xeImageGroup) {
-                $xeImageGroup.handleClickImgEvent(evnt, { url: imgUrl });
-            }
-            else {
-                if (showPreview && imgUrl) {
-                    openPreviewImage({
-                        urlList: imgList,
-                        toolbarConfig,
-                        showPrintButton,
-                        showDownloadButton,
-                        maskClosable,
-                        zIndex,
-                        events: {
-                            change(eventParams) {
-                                $xeImage.dispatchEvent('change', eventParams, eventParams.$event);
-                            },
-                            rotate(eventParams) {
-                                $xeImage.dispatchEvent('rotate', eventParams, eventParams.$event);
-                            }
-                        }
-                    });
-                }
-                $xeImage.dispatchEvent('click', { url: imgUrl }, evnt);
-            }
-        },
-        mousedownEvent() {
-            const $xeImage = this;
-            const internalData = $xeImage.internalData;
-            internalData.mdTime = Date.now();
-        },
-        handleDragstartEvent(evnt) {
-            const $xeImage = this;
-            const internalData = $xeImage.internalData;
-            internalData.dgTime = Date.now();
-            $xeImage.dispatchEvent('dragstart', {}, evnt);
-        },
-        handleDragEvent(evnt) {
-            const $xeImage = this;
-            $xeImage.dispatchEvent(evnt.type, {}, evnt);
-        },
-        //
-        // Render
-        //
-        renderVN(h) {
-            const $xeImage = this;
-            const props = $xeImage;
-            const { alt, loading, circle, draggable } = props;
-            const wrapperStyle = $xeImage.computeWrapperStyle;
-            const imgStyle = $xeImage.computeImgStyle;
-            const imgUrl = $xeImage.computeImgUrl;
-            const imgThumbnailUrl = $xeImage.computeImgThumbnailUrl;
-            const vSize = $xeImage.computeSize;
-            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',
-                    style: imgStyle,
-                    attrs: {
-                        src: imgThumbnailUrl || imgUrl,
-                        alt,
-                        loading,
-                        draggable: imgDrag
-                    },
-                    on: {
-                        mousedown: $xeImage.mousedownEvent,
-                        click: $xeImage.clickEvent,
-                        dragstart: $xeImage.handleDragstartEvent,
-                        drag: $xeImage.handleDragEvent,
-                        dragend: $xeImage.handleDragEvent
-                    }
-                })
-            ]);
-        }
-    },
-    created() {
-        const $xeImage = this;
-        $xeImage.internalData = createInternalData();
-    },
-    beforeDestroy() {
-        const $xeImage = this;
-        const reactData = $xeImage.reactData;
-        const internalData = $xeImage.internalData;
-        XEUtils.assign(reactData, createReactData());
-        XEUtils.assign(internalData, createInternalData());
-    },
-    render(h) {
-        return this.renderVN(h);
-    }
-};