vxe-pc-ui 3.16.0 → 3.16.1

package/lib/image/src/image.js

@@ -0,0 +1,317 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _comp = require("../../ui/src/comp");
+var _xeUtils = _interopRequireDefault(require("xe-utils"));
+var _ui = require("../../ui");
+var _dom = require("../../ui/src/dom");
+var _util = require("./util");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function createInternalData() {
+  return {
+    // dgTime: 0,
+    // mdTime: 0
+  };
+}
+function createReactData() {
+  return {};
+}
+var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defineVxeComponent)({
+  name: 'VxeImage',
+  mixins: [_ui.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: function _default() {
+        return (0, _ui.getConfig)().image.draggable;
+      }
+    },
+    zIndex: Number,
+    maskClosable: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().image.maskClosable;
+      }
+    },
+    toolbarConfig: Object,
+    showPreview: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().image.showPreview;
+      }
+    },
+    showPrintButton: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().image.showPrintButton;
+      }
+    },
+    showDownloadButton: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().image.showDownloadButton;
+      }
+    },
+    size: {
+      type: String,
+      default: function _default() {
+        return (0, _ui.getConfig)().image.size || (0, _ui.getConfig)().size;
+      }
+    },
+    getThumbnailUrlMethod: Function
+  },
+  data: function data() {
+    var reactData = createReactData();
+    return Object.assign(Object.assign({}, {}), {
+      xID: _xeUtils.default.uniqueId(),
+      reactData: reactData
+    });
+  },
+  computed: Object.assign(Object.assign({}, {}), {
+    computeWrapperStyle: function computeWrapperStyle() {
+      var $xeImage = this;
+      var props = $xeImage;
+      var width = props.width,
+        height = props.height,
+        circle = props.circle;
+      var stys = {};
+      if (circle) {
+        // 圆形只能生效一个
+        if (width) {
+          stys.height = (0, _dom.toCssUnit)(width);
+        } else if (height) {
+          stys.width = (0, _dom.toCssUnit)(height);
+        }
+      } else {
+        if (width) {
+          stys.width = (0, _dom.toCssUnit)(width);
+        }
+        if (height) {
+          stys.height = (0, _dom.toCssUnit)(height);
+        }
+      }
+      return stys;
+    },
+    computeImgStyle: function computeImgStyle() {
+      var $xeImage = this;
+      var props = $xeImage;
+      var width = props.width,
+        height = props.height,
+        minWidth = props.minWidth,
+        minHeight = props.minHeight,
+        maxHeight = props.maxHeight,
+        maxWidth = props.maxWidth;
+      var stys = {};
+      if (width && height) {
+        stys.maxWidth = (0, _dom.toCssUnit)(width);
+        stys.maxHeight = (0, _dom.toCssUnit)(height);
+      } else {
+        if (width) {
+          stys.width = (0, _dom.toCssUnit)(width);
+        }
+        if (height) {
+          stys.height = (0, _dom.toCssUnit)(height);
+        }
+        if (minWidth) {
+          stys.minWidth = (0, _dom.toCssUnit)(minWidth);
+        }
+        if (minHeight) {
+          stys.minHeight = (0, _dom.toCssUnit)(minHeight);
+        }
+        if (maxWidth) {
+          stys.maxWidth = (0, _dom.toCssUnit)(maxWidth);
+        }
+        if (maxHeight) {
+          stys.maxHeight = (0, _dom.toCssUnit)(maxHeight);
+        }
+      }
+      return stys;
+    },
+    computeImgList: function computeImgList() {
+      var $xeImage = this;
+      var props = $xeImage;
+      var src = props.src;
+      if (src) {
+        return (_xeUtils.default.isArray(src) ? src : [src]).map(function (item) {
+          if (_xeUtils.default.isString(item)) {
+            return {
+              url: item,
+              alt: ''
+            };
+          }
+          return {
+            url: item.url,
+            alt: item.alt
+          };
+        });
+      }
+      return [];
+    },
+    computeImgItem: function computeImgItem() {
+      var $xeImage = this;
+      var imgList = $xeImage.computeImgList;
+      return imgList[0];
+    },
+    computeImgUrl: function computeImgUrl() {
+      var $xeImage = this;
+      var imgItem = $xeImage.computeImgItem;
+      return imgItem ? "".concat(imgItem.url || '') : '';
+    },
+    computeImgThumbnailUrl: function computeImgThumbnailUrl() {
+      var $xeImage = this;
+      var props = $xeImage;
+      var getThumbnailUrlFn = props.getThumbnailUrlMethod || (0, _ui.getConfig)().image.getThumbnailUrlMethod;
+      var imgUrl = $xeImage.computeImgUrl;
+      return getThumbnailUrlFn ? getThumbnailUrlFn({
+        url: imgUrl,
+        $image: $xeImage
+      }) : '';
+    }
+  }),
+  methods: {
+    //
+    // Method
+    //
+    dispatchEvent: function dispatchEvent(type, params, evnt) {
+      var $xeImage = this;
+      $xeImage.$emit(type, (0, _ui.createEvent)(evnt, {
+        $image: $xeImage
+      }, params));
+    },
+    clickEvent: function clickEvent(evnt) {
+      var $xeImage = this;
+      var props = $xeImage;
+      var internalData = $xeImage.internalData;
+      var $xeImageGroup = $xeImage.$xeImageGroup;
+      var showPreview = props.showPreview,
+        toolbarConfig = props.toolbarConfig,
+        showPrintButton = props.showPrintButton,
+        showDownloadButton = props.showDownloadButton,
+        maskClosable = props.maskClosable,
+        zIndex = props.zIndex;
+      var mdTime = internalData.mdTime,
+        dgTime = internalData.dgTime;
+      if (mdTime && dgTime && dgTime > mdTime) {
+        return;
+      }
+      var imgList = $xeImage.computeImgList;
+      var imgUrl = $xeImage.computeImgUrl;
+      if ($xeImageGroup) {
+        $xeImageGroup.handleClickImgEvent(evnt, {
+          url: imgUrl
+        });
+      } else {
+        if (showPreview && imgUrl) {
+          (0, _util.openPreviewImage)({
+            urlList: imgList,
+            toolbarConfig: toolbarConfig,
+            showPrintButton: showPrintButton,
+            showDownloadButton: showDownloadButton,
+            maskClosable: maskClosable,
+            zIndex: zIndex,
+            events: {
+              change: function change(eventParams) {
+                $xeImage.dispatchEvent('change', eventParams, eventParams.$event);
+              },
+              rotate: function rotate(eventParams) {
+                $xeImage.dispatchEvent('rotate', eventParams, eventParams.$event);
+              }
+            }
+          });
+        }
+        $xeImage.dispatchEvent('click', {
+          url: imgUrl
+        }, evnt);
+      }
+    },
+    mousedownEvent: function mousedownEvent() {
+      var $xeImage = this;
+      var internalData = $xeImage.internalData;
+      internalData.mdTime = Date.now();
+    },
+    handleDragstartEvent: function handleDragstartEvent(evnt) {
+      var $xeImage = this;
+      var internalData = $xeImage.internalData;
+      internalData.dgTime = Date.now();
+      $xeImage.dispatchEvent('dragstart', {}, evnt);
+    },
+    handleDragEvent: function handleDragEvent(evnt) {
+      var $xeImage = this;
+      $xeImage.dispatchEvent(evnt.type, {}, evnt);
+    },
+    //
+    // Render
+    //
+    renderVN: function renderVN(h) {
+      var $xeImage = this;
+      var props = $xeImage;
+      var alt = props.alt,
+        loading = props.loading,
+        circle = props.circle,
+        draggable = props.draggable;
+      var wrapperStyle = $xeImage.computeWrapperStyle;
+      var imgStyle = $xeImage.computeImgStyle;
+      var imgUrl = $xeImage.computeImgUrl;
+      var imgThumbnailUrl = $xeImage.computeImgThumbnailUrl;
+      var vSize = $xeImage.computeSize;
+      var imgDrag;
+      if (!_xeUtils.default.eqNull(draggable)) {
+        imgDrag = !!(draggable === true || draggable === 'true');
+      }
+      return h('div', {
+        class: ['vxe-image', _defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--circle', circle)],
+        style: wrapperStyle
+      }, [h('img', {
+        ref: 'refElem',
+        class: 'vxe-image-img',
+        style: imgStyle,
+        attrs: {
+          src: imgThumbnailUrl || imgUrl,
+          alt: alt,
+          loading: loading,
+          draggable: imgDrag
+        },
+        on: {
+          mousedown: $xeImage.mousedownEvent,
+          click: $xeImage.clickEvent,
+          dragstart: $xeImage.handleDragstartEvent,
+          drag: $xeImage.handleDragEvent,
+          dragend: $xeImage.handleDragEvent
+        }
+      })]);
+    }
+  },
+  created: function created() {
+    var $xeImage = this;
+    $xeImage.internalData = createInternalData();
+  },
+  beforeDestroy: function beforeDestroy() {
+    var $xeImage = this;
+    var reactData = $xeImage.reactData;
+    var internalData = $xeImage.internalData;
+    _xeUtils.default.assign(reactData, createReactData());
+    _xeUtils.default.assign(internalData, createInternalData());
+  },
+  render: function render(h) {
+    return this.renderVN(h);
+  }
+});
+/* define-vxe-component end */

package/lib/image/src/image.min.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_dom=require("../../ui/src/dom"),_util=require("./util");function _interopRequireDefault(t){return t&&t.__esModule?t:{default:t}}function _typeof(t){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function _defineProperty(t,e,i){return(e=_toPropertyKey(e))in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}function _toPropertyKey(t){t=_toPrimitive(t,"string");return"symbol"==_typeof(t)?t:t+""}function _toPrimitive(t,e){if("object"!=_typeof(t)||!t)return t;var i=t[Symbol.toPrimitive];if(void 0===i)return("string"===e?String:Number)(t);i=i.call(t,e||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}function createInternalData(){return{}}function createReactData(){return{}}var _default2=exports.default=(0,_comp.defineVxeComponent)({name:"VxeImage",mixins:[_ui.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:function(){return(0,_ui.getConfig)().image.draggable}},zIndex:Number,maskClosable:{type:Boolean,default:function(){return(0,_ui.getConfig)().image.maskClosable}},toolbarConfig:Object,showPreview:{type:Boolean,default:function(){return(0,_ui.getConfig)().image.showPreview}},showPrintButton:{type:Boolean,default:function(){return(0,_ui.getConfig)().image.showPrintButton}},showDownloadButton:{type:Boolean,default:function(){return(0,_ui.getConfig)().image.showDownloadButton}},size:{type:String,default:function(){return(0,_ui.getConfig)().image.size||(0,_ui.getConfig)().size}},getThumbnailUrlMethod:Function},data:function(){var t=createReactData();return Object.assign(Object.assign({},{}),{xID:_xeUtils.default.uniqueId(),reactData:t})},computed:Object.assign(Object.assign({},{}),{computeWrapperStyle:function(){var t=this,e=t.width,i=t.height,n={};return t.circle?e?n.height=(0,_dom.toCssUnit)(e):i&&(n.width=(0,_dom.toCssUnit)(i)):(e&&(n.width=(0,_dom.toCssUnit)(e)),i&&(n.height=(0,_dom.toCssUnit)(i))),n},computeImgStyle:function(){var t=this,e=t.width,i=t.height,n=t.minWidth,r=t.minHeight,o=t.maxHeight,t=t.maxWidth,a={};return e&&i?(a.maxWidth=(0,_dom.toCssUnit)(e),a.maxHeight=(0,_dom.toCssUnit)(i)):(e&&(a.width=(0,_dom.toCssUnit)(e)),i&&(a.height=(0,_dom.toCssUnit)(i)),n&&(a.minWidth=(0,_dom.toCssUnit)(n)),r&&(a.minHeight=(0,_dom.toCssUnit)(r)),t&&(a.maxWidth=(0,_dom.toCssUnit)(t)),o&&(a.maxHeight=(0,_dom.toCssUnit)(o))),a},computeImgList:function(){var t=this.src;return t?(_xeUtils.default.isArray(t)?t:[t]).map(function(t){return _xeUtils.default.isString(t)?{url:t,alt:""}:{url:t.url,alt:t.alt}}):[]},computeImgItem:function(){return this.computeImgList[0]},computeImgUrl:function(){var t=this.computeImgItem;return t?"".concat(t.url||""):""},computeImgThumbnailUrl:function(){var t=this,e=t.getThumbnailUrlMethod||(0,_ui.getConfig)().image.getThumbnailUrlMethod,i=t.computeImgUrl;return e?e({url:i,$image:t}):""}}),methods:{dispatchEvent:function(t,e,i){this.$emit(t,(0,_ui.createEvent)(i,{$image:this},e))},clickEvent:function(t){var e=this,i=e.internalData,n=e.$xeImageGroup,r=e.showPreview,o=e.toolbarConfig,a=e.showPrintButton,u=e.showDownloadButton,l=e.maskClosable,s=e.zIndex,m=i.mdTime,i=i.dgTime;m&&i&&m<i||(m=e.computeImgList,i=e.computeImgUrl,n?n.handleClickImgEvent(t,{url:i}):(r&&i&&(0,_util.openPreviewImage)({urlList:m,toolbarConfig:o,showPrintButton:a,showDownloadButton:u,maskClosable:l,zIndex:s,events:{change:function(t){e.dispatchEvent("change",t,t.$event)},rotate:function(t){e.dispatchEvent("rotate",t,t.$event)}}}),e.dispatchEvent("click",{url:i},t)))},mousedownEvent:function(){this.internalData.mdTime=Date.now()},handleDragstartEvent:function(t){this.internalData.dgTime=Date.now(),this.dispatchEvent("dragstart",{},t)},handleDragEvent:function(t){this.dispatchEvent(t.type,{},t)},renderVN:function(t){var e,i=this,n=i.alt,r=i.loading,o=i.circle,a=i.draggable,u=i.computeWrapperStyle,l=i.computeImgStyle,s=i.computeImgUrl,m=i.computeImgThumbnailUrl,c=i.computeSize;return _xeUtils.default.eqNull(a)||(e=!(!0!==a&&"true"!==a)),t("div",{class:["vxe-image",_defineProperty(_defineProperty({},"size--".concat(c),c),"is--circle",o)],style:u},[t("img",{ref:"refElem",class:"vxe-image-img",style:l,attrs:{src:m||s,alt:n,loading:r,draggable:e},on:{mousedown:i.mousedownEvent,click:i.clickEvent,dragstart:i.handleDragstartEvent,drag:i.handleDragEvent,dragend:i.handleDragEvent}})])}},created:function(){this.internalData=createInternalData()},beforeDestroy:function(){var t=this.reactData,e=this.internalData;_xeUtils.default.assign(t,createReactData()),_xeUtils.default.assign(e,createInternalData())},render:function(t){return this.renderVN(t)}});