vxe-pc-ui 3.16.0 → 3.16.2

package/lib/image/src/preview.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");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default2=exports.default=(0,_comp.defineVxeComponent)({name:"VxeImagePreview",props:{value:Number,urlList:Array,urlField:{type:String,default:function(){return(0,_ui.getConfig)().imagePreview.urlField}},maskClosable:{type:Boolean,default:function(){return(0,_ui.getConfig)().imagePreview.maskClosable}},marginSize:{type:String,default:function(){return(0,_ui.getConfig)().imagePreview.marginSize}},showPrintButton:{type:Boolean,default:function(){return(0,_ui.getConfig)().imagePreview.showPrintButton}},showDownloadButton:{type:Boolean,default:function(){return(0,_ui.getConfig)().imagePreview.showDownloadButton}},zIndex:Number,toolbarConfig:Object,beforeDownloadMethod:Function,downloadMethod:Function},provide:function(){return{$xeImagePreview:this}},data:function(){return{xID:_xeUtils.default.uniqueId(),reactData:{activeIndex:0,offsetPct11:!1,offsetScale:0,offsetRotate:0,offsetLeft:0,offsetTop:0}}},computed:Object.assign(Object.assign({},{}),{computeUrlProp:function(){return this.urlField||"url"},computeMarginSize:function(){return _xeUtils.default.toNumber(this.marginSize||0)||16},computeToolbarOpts:function(){return Object.assign({},(0,_ui.getConfig)().imagePreview.toolbarConfig,this.toolbarConfig)},computeRotateText:function(){var e=this.reactData.offsetRotate;return e?"".concat(e,"°"):"0°"},computeScaleText:function(){var e=this.reactData.offsetScale;return e?"".concat(_xeUtils.default.ceil(100*(1+e)),"%"):"100%"},computeImgList:function(){var e=this.urlList,t=this.computeUrlProp;return e&&e.length?e.map(function(e){return _xeUtils.default.isString(e)?e:e[t]||""}):[]},computeImgTransform:function(){var e=this.reactData,t=e.offsetScale,n=e.offsetRotate,a=e.offsetLeft,o=e.offsetTop,e=[],i=1;if(t&&e.push("scale(".concat(i=1+t,")")),n&&e.push("rotate(".concat(n,"deg)")),a||o){var r=a/=i,s=o/=i;if(n)switch(n%360){case 90:case-270:r=o,s=-a;break;case 180:case-180:r=-a,s=-o;break;case 270:case-90:r=-o,s=a}e.push("translate(".concat(r,"px, ").concat(s,"px)"))}return e.length?e.join(" "):""}}),methods:{dispatchEvent:function(e,t,n){this.$emit(e,(0,_ui.createEvent)(n,{$imagePreview:this},t))},emitModel:function(e){var t=this,n=t._events;t.$emit("input",e),n&&n.modelValue?t.$emit("modelValue",e):t.$emit("model-value",e)},handleCloseEvent:function(e){this.dispatchEvent("close",{},e)},resetStyle:function(){var e=this.reactData,t=this.$refs.refElem;(0,_dom.removeClass)(t,"is--move"),Object.assign(e,{offsetPct11:!1,offsetScale:0,offsetRotate:0,offsetLeft:0,offsetTop:0})},getOffsetZoomStep:function(){var e=this.reactData.offsetScale,t=.02;return t=-.6<=e&&(t=.04,-.4<=e)&&(t=.07,0<=e)&&(t=.1,3<=e)&&(t=.25,8<=e)&&(t=.4,16<=e)&&(t=.6,24<=e)&&(t=.9,32<=e)&&(t=1.3,39<=e)&&(t=1.9,45<=e)?2.5:t},handleZoom:function(e){var t=this.reactData,n=t.offsetScale,a=this.getOffsetZoomStep();t.offsetScale=e?Number(Math.min(49,n+a).toFixed(2)):Number(Math.max(-.9,n-a).toFixed(2))},handleChangeEvent:function(e,t){var n=this,a=n.reactData,o=a.activeIndex||0,i=n.computeImgList,t=(t?o>=i.length-1?o=0:o++:o<=0?o=i.length-1:o--,i[o||0]);a.activeIndex=o,n.resetStyle(),n.emitModel(o),n.dispatchEvent("change",{url:t,activeIndex:o},e)},handleRotateImgEvent:function(e,t){var n=this.reactData,a=this.computeImgList[n.activeIndex||0],o=n.offsetRotate;t?o+=90:o-=90,n.offsetRotate=o,this.dispatchEvent("rotate",{url:a,rotateValue:o},e)},handlePct11:function(){var e=this.reactData;this.resetStyle(),e.offsetPct11=!0},handlePrintImg:function(){var e=this.reactData.activeIndex,e=this.computeImgList[e||0];_ui.VxeUI.print&&_ui.VxeUI.print({align:"center",pageBreaks:[{bodyHtml:'<img src="'.concat(e,'" style="max-width:100%;max-height:100%;">')}]})},handleDownloadEvent:function(e,t){this.dispatchEvent("download",{url:t},e)},handleDefaultDownload:function(t,n){var a=this;_ui.VxeUI.saveFile&&fetch(n).then(function(e){return e.blob().then(function(e){_ui.VxeUI.saveFile({filename:n,content:e}),a.handleDownloadEvent(t,n)})}).catch(function(){_ui.VxeUI.modal&&_ui.VxeUI.modal.message({content:(0,_ui.getI18n)("vxe.error.downErr"),status:"error"})})},handleDownloadImg:function(t){var n=this,e=n,a=n.reactData.activeIndex,o=n.computeToolbarOpts.download,o=!_xeUtils.default.isBoolean(o)&&o?Object.assign({},o):{},i=n.computeImgList[a||0],r=e.beforeDownloadMethod||o.beforeDownloadMethod||(0,_ui.getConfig)().imagePreview.beforeDownloadMethod,s=e.downloadMethod||o.downloadMethod||(0,_ui.getConfig)().imagePreview.downloadMethod;Promise.resolve(!r||r({$imagePreview:n,url:i,index:a||0})).then(function(e){e&&(s?Promise.resolve(s({$imagePreview:n,url:i,index:a||0})).then(function(){n.handleDownloadEvent(t,i)}).catch(function(e){return e}):n.handleDefaultDownload(t,i))})},handleOperationBtn:function(e,t){var n=this,a=n.reactData.activeIndex;if(n.computeImgList[a||0])switch(t){case"zoomOut":n.handleZoom(!1);break;case"zoomIn":n.handleZoom(!0);break;case"pctFull":n.resetStyle();break;case"pct11":n.handlePct11();break;case"rotateLeft":n.handleRotateImgEvent(e,!1);break;case"rotateRight":n.handleRotateImgEvent(e,!0);break;case"print":n.handlePrintImg();break;case"download":n.handleDownloadImg(e)}},wheelEvent:function(e){var t=e.deltaY;0<t?(e.preventDefault(),this.handleZoom(!1)):t<0&&(e.preventDefault(),this.handleZoom(!0))},moveEvent:function(e){var i=this.reactData,r=i.offsetTop,s=i.offsetLeft,l=this.$refs.refElem,t=(e.preventDefault(),document.onmousemove),n=document.onmouseup,c=e.pageX,u=e.pageY,d=this.computeMarginSize;document.onmousemove=function(e){var t=e.pageX,n=e.pageY,a=(0,_dom.getDomNode)(),o=a.visibleHeight,a=a.visibleWidth;e.preventDefault(),(0,_dom.addClass)(l,"is--move"),d<t&&d<n&&t<a-d&&n<o-d&&(i.offsetLeft=s+t-c,i.offsetTop=r+n-u)},document.onmouseup=function(){document.onmousemove=t,document.onmouseup=n,(0,_dom.removeClass)(l,"is--move")}},handleGlobalKeydownEvent:function(e){var t=this,n=t.reactData,a=(0,_dom.hasControlKey)(e),o=e.shiftKey,i=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ARROW_UP),r=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ARROW_DOWN),s=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ARROW_LEFT),l=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ARROW_RIGHT),c=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.R),u=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.P);i?(e.preventDefault(),o?--n.offsetTop:t.handleZoom(!0)):r?(e.preventDefault(),o?n.offsetTop+=1:t.handleZoom(!1)):s?(e.preventDefault(),o?--n.offsetLeft:t.handleChangeEvent(e,!1)):l?(e.preventDefault(),o?n.offsetLeft+=1:t.handleChangeEvent(e,!0)):c&&a?(e.preventDefault(),o?t.handleRotateImgEvent(e,!1):t.handleRotateImgEvent(e,!0)):u&&a&&(e.preventDefault(),t.handlePrintImg())},handleClickMaskEvent:function(e){this.maskClosable&&e.target===e.currentTarget&&this.dispatchEvent("close",{},e)},renderImgWrapper:function(n){var a=this,o=a.reactData.activeIndex,e=a.computeImgList,i=a.computeImgTransform;return n("div",{class:"vxe-image-preview--img-list",on:{click:a.handleClickMaskEvent}},e.map(function(e,t){t=o===t;return n("img",{class:["vxe-image-preview--img-item",{"is--active":t}],style:t?{transform:i}:{},attrs:{src:e},on:{mousedown:function(e){a.moveEvent(e)}}})}))},renderOperationBtn:function(e,t,n){var a=this,o=a.computeToolbarOpts[t],i=!_xeUtils.default.isBoolean(o)&&o?Object.assign({},o):{};return!1!==o?e("div",{class:"vxe-image-preview--operation-btn",attrs:{title:(0,_ui.getI18n)("vxe.imagePreview.operBtn.".concat(t))},on:{click:function(e){a.handleOperationBtn(e,t)}}},[e("i",{class:i.icon||(0,_ui.getIcon)()[n]})]):(0,_ui.renderEmptyElement)(a)},renderBtnWrapper:function(e){var t=this,n=t.reactData,a=t.showPrintButton,o=t.showDownloadButton,n=n.activeIndex,i=t.computeImgList,r=t.computeRotateText,s=t.computeScaleText,l=t.computeToolbarOpts;return e("div",{class:"vxe-image-preview--btn-wrapper"},[e("div",{class:"vxe-image-preview--close-wrapper"},[e("div",{class:"vxe-image-preview--close-btn",on:{click:t.handleCloseEvent}},[e("i",{class:(0,_ui.getIcon)().IMAGE_PREVIEW_CLOSE})]),e("div",{class:"vxe-image-preview--close-bg"})]),1<i.length?e("div",{class:"vxe-image-preview--previous-btn",on:{click:function(e){t.handleChangeEvent(e,!1)}}},[e("i",{class:(0,_ui.getIcon)().IMAGE_PREVIEW_PREVIOUS})]):(0,_ui.renderEmptyElement)(t),1<i.length?e("div",{class:"vxe-image-preview--next-btn",on:{click:function(e){t.handleChangeEvent(e,!0)}}},[e("i",{class:(0,_ui.getIcon)().IMAGE_PREVIEW_NEXT})]):(0,_ui.renderEmptyElement)(t),e("div",{class:"vxe-image-preview--operation-info"},[e("div",{class:"vxe-image-preview--operation-deg"},r),e("div",{class:"vxe-image-preview--operation-pct"},s)]),e("div",{class:"vxe-image-preview--operation-wrapper"},[e("div",{class:"vxe-image-preview--operation-active-count"},[e("span",{class:"vxe-image-preview--operation-active-current"},"".concat((n||0)+1)),e("span",{class:"vxe-image-preview--operation-active-total"},"/".concat(i.length))]),t.renderOperationBtn(e,"zoomOut","IMAGE_PREVIEW_ZOOM_OUT"),t.renderOperationBtn(e,"zoomIn","IMAGE_PREVIEW_ZOOM_IN"),t.renderOperationBtn(e,"pctFull","IMAGE_PREVIEW_PCT_FULL"),t.renderOperationBtn(e,"pct11","IMAGE_PREVIEW_PCT_1_1"),t.renderOperationBtn(e,"rotateLeft","IMAGE_PREVIEW_ROTATE_LEFT"),t.renderOperationBtn(e,"rotateRight","IMAGE_PREVIEW_ROTATE_RIGHT"),a||l.print?t.renderOperationBtn(e,"print","IMAGE_PREVIEW_PRINT"):(0,_ui.renderEmptyElement)(t),o||l.download?t.renderOperationBtn(e,"download","IMAGE_PREVIEW_DOWNLOAD"):(0,_ui.renderEmptyElement)(t)])])},renderVN:function(e){return e("div",{ref:"refElem",class:["vxe-image-preview",{"is--pct11":this.reactData.offsetPct11}]},[this.renderImgWrapper(e),this.renderBtnWrapper(e)])}},watch:{value:function(e){this.reactData.activeIndex=e,this.resetStyle()}},created:function(){this.reactData.activeIndex=this.value||0},mounted:function(){var e=this.$refs.refElem;e&&e.addEventListener("wheel",this.wheelEvent,{passive:!1}),_ui.globalEvents.on(this,"keydown",this.handleGlobalKeydownEvent)},beforeDestroy:function(){var e=this.$refs.refElem;e&&(e.removeEventListener("wheel",this.wheelEvent),(0,_dom.removeClass)(e,"is--move")),_ui.globalEvents.off(this,"keydown")},render:function(e){return this.renderVN(e)}});

package/lib/image/src/util.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.openPreviewImage = void 0;
+var _core = require("@vxe-ui/core");
+var _preview = _interopRequireDefault(require("./preview"));
+var _xeUtils = _interopRequireDefault(require("xe-utils"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var openPreviewImage = exports.openPreviewImage = function openPreviewImage(options) {
+  if (_core.VxeUI.modal) {
+    var opts = Object.assign({
+      escClosable: true
+    }, options);
+    var urlList = opts.urlList,
+      activeIndex = opts.activeIndex,
+      zIndex = opts.zIndex;
+    var _ref = opts.events || {},
+      _rotate = _ref.rotate,
+      _change = _ref.change;
+    var modalId = _xeUtils.default.uniqueId('image-preview');
+    _core.VxeUI.modal.open({
+      id: modalId,
+      title: '预览',
+      width: '100%',
+      height: '100%',
+      showHeader: false,
+      showFooter: false,
+      padding: false,
+      escClosable: opts.escClosable,
+      zIndex: zIndex,
+      className: 'vxe-image-preview-popup-wrapper',
+      slots: {
+        default: function _default(params, h) {
+          return h(_preview.default, {
+            props: {
+              value: activeIndex,
+              urlList: urlList,
+              urlField: opts.urlField,
+              marginSize: opts.marginSize,
+              maskClosable: opts.maskClosable,
+              toolbarConfig: opts.toolbarConfig,
+              showPrintButton: opts.showPrintButton,
+              showDownloadButton: opts.showDownloadButton,
+              beforeDownloadMethod: opts.beforeDownloadMethod,
+              downloadMethod: opts.downloadMethod
+            },
+            on: {
+              close: function close() {
+                _core.VxeUI.modal.close(modalId);
+              },
+              change: function change(eventParams) {
+                if (_change) {
+                  _change.call(this, eventParams);
+                }
+              },
+              rotate: function rotate(eventParams) {
+                if (_rotate) {
+                  _rotate.call(this, eventParams);
+                }
+              }
+            }
+          });
+        }
+      }
+    });
+  }
+  return Promise.resolve();
+};

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

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.openPreviewImage=void 0;var _core=require("@vxe-ui/core"),_preview=_interopRequireDefault(require("./preview")),_xeUtils=_interopRequireDefault(require("xe-utils"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var openPreviewImage=exports.openPreviewImage=function(e){var r,t,i,o,l,a,n;return _core.VxeUI.modal&&(r=Object.assign({escClosable:!0},e),t=r.urlList,i=r.activeIndex,e=r.zIndex,l=(o=r.events||{}).rotate,a=o.change,n=_xeUtils.default.uniqueId("image-preview"),_core.VxeUI.modal.open({id:n,title:"预览",width:"100%",height:"100%",showHeader:!1,showFooter:!1,padding:!1,escClosable:r.escClosable,zIndex:e,className:"vxe-image-preview-popup-wrapper",slots:{default:function(e,o){return o(_preview.default,{props:{value:i,urlList:t,urlField:r.urlField,marginSize:r.marginSize,maskClosable:r.maskClosable,toolbarConfig:r.toolbarConfig,showPrintButton:r.showPrintButton,showDownloadButton:r.showDownloadButton,beforeDownloadMethod:r.beforeDownloadMethod,downloadMethod:r.downloadMethod},on:{close:function(){_core.VxeUI.modal.close(n)},change:function(e){a&&a.call(this,e)},rotate:function(e){l&&l.call(this,e)}}})}}})),Promise.resolve()};

package/lib/image/style/index.js

@@ -0,0 +1 @@
+require('./style.css')

package/lib/image/style/style.css

@@ -0,0 +1,17 @@
+.vxe-image {
+  display: inline-flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  vertical-align: middle;
+}
+.vxe-image.is--circle {
+  border-radius: 50%;
+}
+.vxe-image.is--circle .vxe-image-img {
+  border-radius: 50%;
+}
+
+.vxe-image-img {
+  border-style: none;
+}

package/lib/image/style/style.min.css

@@ -0,0 +1 @@
+.vxe-image{display:inline-flex;flex-direction:row;justify-content:center;align-items:center;vertical-align:middle}.vxe-image.is--circle{border-radius:50%}.vxe-image.is--circle .vxe-image-img{border-radius:50%}.vxe-image-img{border-style:none}

package/lib/image-group/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.VxeImageGroup = exports.ImageGroup = void 0;
+var _core = require("@vxe-ui/core");
+var _group = _interopRequireDefault(require("../image/src/group"));
+var _dynamics = require("../dynamics");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var VxeImageGroup = exports.VxeImageGroup = Object.assign({}, _group.default, {
+  install: function install(app) {
+    app.component(_group.default.name, _group.default);
+  }
+});
+_dynamics.dynamicApp.use(VxeImageGroup);
+_core.VxeUI.component(_group.default);
+var ImageGroup = exports.ImageGroup = VxeImageGroup;
+var _default = exports.default = VxeImageGroup;

package/lib/image-group/index.min.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.VxeImageGroup=exports.ImageGroup=void 0;var _core=require("@vxe-ui/core"),_group=_interopRequireDefault(require("../image/src/group")),_dynamics=require("../dynamics");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var VxeImageGroup=exports.VxeImageGroup=Object.assign({},_group.default,{install:function(e){e.component(_group.default.name,_group.default)}}),ImageGroup=(_dynamics.dynamicApp.use(VxeImageGroup),_core.VxeUI.component(_group.default),exports.ImageGroup=VxeImageGroup),_default=exports.default=VxeImageGroup;

package/lib/image-group/style/index.js

@@ -0,0 +1 @@
+require('./style.css')

package/lib/image-group/style/style.css

@@ -0,0 +1,3 @@
+.vxe-image-group {
+  display: inline-block;
+}

package/lib/image-group/style/style.min.css

@@ -0,0 +1 @@
+.vxe-image-group{display:inline-block}

package/lib/image-preview/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.VxeImagePreview = exports.ImagePreview = void 0;
+var _preview = _interopRequireDefault(require("../image/src/preview"));
+var _core = require("@vxe-ui/core");
+var _dynamics = require("../dynamics");
+var _util = require("../image/src/util");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var VxeImagePreview = exports.VxeImagePreview = Object.assign(_preview.default, {
+  install: function install(app) {
+    app.component(_preview.default.name, _preview.default);
+  }
+});
+_core.VxeUI.previewImage = _util.openPreviewImage;
+_dynamics.dynamicApp.use(VxeImagePreview);
+_core.VxeUI.component(_preview.default);
+var ImagePreview = exports.ImagePreview = VxeImagePreview;
+var _default = exports.default = VxeImagePreview;

package/lib/image-preview/index.min.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.VxeImagePreview=exports.ImagePreview=void 0;var _preview=_interopRequireDefault(require("../image/src/preview")),_core=require("@vxe-ui/core"),_dynamics=require("../dynamics"),_util=require("../image/src/util");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var VxeImagePreview=exports.VxeImagePreview=Object.assign(_preview.default,{install:function(e){e.component(_preview.default.name,_preview.default)}}),ImagePreview=(_core.VxeUI.previewImage=_util.openPreviewImage,_dynamics.dynamicApp.use(VxeImagePreview),_core.VxeUI.component(_preview.default),exports.ImagePreview=VxeImagePreview),_default=exports.default=VxeImagePreview;

package/lib/image-preview/style/index.js

@@ -0,0 +1 @@
+require('./style.css')

package/lib/image-preview/style/style.css

@@ -0,0 +1,218 @@
+.vxe-image-preview {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.vxe-image-preview:not(.is--pct11) .vxe-image-preview--img-item {
+  max-width: 100%;
+  max-height: 100%;
+}
+.vxe-image-preview:not(.is--move) .vxe-image-preview--img-item {
+  transition: transform 0.3s ease-in-out;
+}
+.vxe-image-preview:hover .vxe-image-preview--close-wrapper,
+.vxe-image-preview:hover .vxe-image-preview--previous-btn,
+.vxe-image-preview:hover .vxe-image-preview--next-btn,
+.vxe-image-preview:hover .vxe-image-preview--operation-info,
+.vxe-image-preview:hover .vxe-image-preview--operation-wrapper {
+  opacity: 1;
+}
+.vxe-image-preview:hover .vxe-image-preview--operation-info {
+  transform: translate(0, 0);
+}
+.vxe-image-preview:hover .vxe-image-preview--previous-btn,
+.vxe-image-preview:hover .vxe-image-preview--next-btn {
+  transform: translate(0, -50%);
+}
+.vxe-image-preview:hover .vxe-image-preview--previous-btn:hover,
+.vxe-image-preview:hover .vxe-image-preview--next-btn:hover {
+  color: var(--vxe-ui-font-primary-color);
+  transform: translate(0, -50%) scale(1.2);
+}
+.vxe-image-preview:hover .vxe-image-preview--previous-btn:active,
+.vxe-image-preview:hover .vxe-image-preview--next-btn:active {
+  transform: translate(0, -50%) scale(0.9);
+}
+.vxe-image-preview:hover .vxe-image-preview--operation-wrapper {
+  transform: translate(-50%, 0);
+}
+.vxe-image-preview:hover .vxe-image-preview--operation-wrapper:hover {
+  transform: translateX(-50%) scale(1.1);
+}
+
+.vxe-image-preview--img-list {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.vxe-image-preview--img-item {
+  display: none;
+  cursor: grab;
+}
+.vxe-image-preview--img-item:active {
+  cursor: grabbing;
+}
+.vxe-image-preview--img-item.is--active {
+  display: block;
+}
+
+.vxe-image-preview--close-btn {
+  top: 0;
+  right: 0;
+  z-index: 99;
+  padding: 1em;
+  font-size: 1.5em;
+  transform: scale(1);
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+}
+
+.vxe-image-preview--close-bg {
+  position: absolute;
+  top: -7em;
+  right: -12em;
+  z-index: 99;
+  width: 30em;
+  height: 10em;
+  background-color: rgba(0, 0, 0, 0.7);
+  color: var(--vxe-ui-status-error-color);
+  transform: rotate(45deg);
+  cursor: pointer;
+  z-index: 88;
+  transition: all 0.2s ease-in-out;
+}
+
+.vxe-image-preview--close-wrapper {
+  opacity: 0;
+  transition: all 0.2s ease-in-out;
+}
+.vxe-image-preview--close-wrapper:hover .vxe-image-preview--close-btn {
+  top: 0.2em;
+  right: 0.2em;
+  transform: scale(1.2);
+  color: var(--vxe-ui-status-error-color);
+}
+.vxe-image-preview--close-wrapper:hover .vxe-image-preview--close-bg {
+  top: -5em;
+}
+
+.vxe-image-preview--operation-info,
+.vxe-image-preview--close-btn,
+.vxe-image-preview--previous-btn,
+.vxe-image-preview--next-btn,
+.vxe-image-preview--operation-wrapper {
+  position: absolute;
+  z-index: 99;
+}
+
+.vxe-image-preview--previous-btn,
+.vxe-image-preview--next-btn {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  top: 50%;
+  border-radius: 50%;
+  font-size: 1.6em;
+  width: 2.2em;
+  height: 2.2em;
+  line-height: 2.2em;
+  background-color: rgba(0, 0, 0, 0.7);
+  cursor: pointer;
+  transition: all 0.1s ease-in-out;
+}
+
+.vxe-image-preview--previous-btn {
+  left: 1vw;
+  transform: translate(-2em, -50%);
+}
+
+.vxe-image-preview--next-btn {
+  right: 1vw;
+  transform: translate(2em, -50%);
+}
+
+.vxe-image-preview--operation-info {
+  right: 0.2em;
+  bottom: 0.2em;
+  font-size: 1em;
+  padding: 0.3em 0;
+  width: 4.6em;
+  opacity: 0;
+  border-radius: var(--vxe-ui-base-border-radius);
+  text-align: center;
+  transform: translate(2em, 2em);
+  background-color: rgba(0, 0, 0, 0.7);
+  transition: all 0.2s ease-in-out;
+}
+
+.vxe-image-preview--operation-wrapper {
+  opacity: 0;
+  display: flex;
+  flex-direction: row;
+  bottom: 3vh;
+  left: 50%;
+  transform: translate(-50%, 3em);
+  padding: 0 1.5em;
+  border-radius: 3em;
+  background-color: rgba(0, 0, 0, 0.7);
+  transition: all 0.2s ease-in-out;
+}
+
+.vxe-image-preview--operation-active-count {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.2em;
+  min-width: 2.5em;
+}
+.vxe-image-preview--operation-active-count .vxe-image-preview--operation-active-current,
+.vxe-image-preview--operation-active-count .vxe-image-preview--operation-active-total {
+  display: inline-block;
+  height: 1.4em;
+}
+.vxe-image-preview--operation-active-count .vxe-image-preview--operation-active-current {
+  font-size: 2em;
+  line-height: 1.2em;
+  font-weight: 700;
+  padding-right: 0.1em;
+  min-width: 1.4em;
+  text-align: right;
+}
+
+.vxe-image-preview--operation-btn {
+  font-size: 1.6em;
+  padding: 0.5em;
+  cursor: pointer;
+  transition: all 0.1s ease-in-out;
+}
+.vxe-image-preview--operation-btn:hover {
+  color: var(--vxe-ui-font-primary-color);
+  transform: scale(1.2);
+}
+.vxe-image-preview--operation-btn:active {
+  transform: scale(0.9);
+}
+
+.vxe-image-preview-popup-wrapper {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.vxe-image-preview-popup-wrapper.vxe-modal--wrapper.type--modal .vxe-modal--box {
+  border: 0;
+  background-color: rgba(0, 0, 0, 0.1);
+  box-shadow: none;
+}
+.vxe-image-preview-popup-wrapper.vxe-modal--wrapper.type--modal .vxe-modal--content {
+  padding: 0;
+}

package/lib/image-preview/style/style.min.css

@@ -0,0 +1 @@
+.vxe-image-preview{position:relative;width:100%;height:100%;overflow:hidden}.vxe-image-preview:not(.is--pct11) .vxe-image-preview--img-item{max-width:100%;max-height:100%}.vxe-image-preview:not(.is--move) .vxe-image-preview--img-item{transition:transform .3s ease-in-out}.vxe-image-preview:hover .vxe-image-preview--close-wrapper,.vxe-image-preview:hover .vxe-image-preview--next-btn,.vxe-image-preview:hover .vxe-image-preview--operation-info,.vxe-image-preview:hover .vxe-image-preview--operation-wrapper,.vxe-image-preview:hover .vxe-image-preview--previous-btn{opacity:1}.vxe-image-preview:hover .vxe-image-preview--operation-info{transform:translate(0,0)}.vxe-image-preview:hover .vxe-image-preview--next-btn,.vxe-image-preview:hover .vxe-image-preview--previous-btn{transform:translate(0,-50%)}.vxe-image-preview:hover .vxe-image-preview--next-btn:hover,.vxe-image-preview:hover .vxe-image-preview--previous-btn:hover{color:var(--vxe-ui-font-primary-color);transform:translate(0,-50%) scale(1.2)}.vxe-image-preview:hover .vxe-image-preview--next-btn:active,.vxe-image-preview:hover .vxe-image-preview--previous-btn:active{transform:translate(0,-50%) scale(.9)}.vxe-image-preview:hover .vxe-image-preview--operation-wrapper{transform:translate(-50%,0)}.vxe-image-preview:hover .vxe-image-preview--operation-wrapper:hover{transform:translateX(-50%) scale(1.1)}.vxe-image-preview--img-list{display:flex;width:100%;height:100%;flex-direction:row;align-items:center;justify-content:center}.vxe-image-preview--img-item{display:none;cursor:grab}.vxe-image-preview--img-item:active{cursor:grabbing}.vxe-image-preview--img-item.is--active{display:block}.vxe-image-preview--close-btn{top:0;right:0;z-index:99;padding:1em;font-size:1.5em;transform:scale(1);border-radius:50%;cursor:pointer;transition:all .2s ease-in-out}.vxe-image-preview--close-bg{position:absolute;top:-7em;right:-12em;z-index:99;width:30em;height:10em;background-color:rgba(0,0,0,.7);color:var(--vxe-ui-status-error-color);transform:rotate(45deg);cursor:pointer;z-index:88;transition:all .2s ease-in-out}.vxe-image-preview--close-wrapper{opacity:0;transition:all .2s ease-in-out}.vxe-image-preview--close-wrapper:hover .vxe-image-preview--close-btn{top:.2em;right:.2em;transform:scale(1.2);color:var(--vxe-ui-status-error-color)}.vxe-image-preview--close-wrapper:hover .vxe-image-preview--close-bg{top:-5em}.vxe-image-preview--close-btn,.vxe-image-preview--next-btn,.vxe-image-preview--operation-info,.vxe-image-preview--operation-wrapper,.vxe-image-preview--previous-btn{position:absolute;z-index:99}.vxe-image-preview--next-btn,.vxe-image-preview--previous-btn{display:flex;flex-direction:row;align-items:center;justify-content:center;opacity:0;top:50%;border-radius:50%;font-size:1.6em;width:2.2em;height:2.2em;line-height:2.2em;background-color:rgba(0,0,0,.7);cursor:pointer;transition:all .1s ease-in-out}.vxe-image-preview--previous-btn{left:1vw;transform:translate(-2em,-50%)}.vxe-image-preview--next-btn{right:1vw;transform:translate(2em,-50%)}.vxe-image-preview--operation-info{right:.2em;bottom:.2em;font-size:1em;padding:.3em 0;width:4.6em;opacity:0;border-radius:var(--vxe-ui-base-border-radius);text-align:center;transform:translate(2em,2em);background-color:rgba(0,0,0,.7);transition:all .2s ease-in-out}.vxe-image-preview--operation-wrapper{opacity:0;display:flex;flex-direction:row;bottom:3vh;left:50%;transform:translate(-50%,3em);padding:0 1.5em;border-radius:3em;background-color:rgba(0,0,0,.7);transition:all .2s ease-in-out}.vxe-image-preview--operation-active-count{display:flex;flex-direction:row;align-items:center;justify-content:center;font-size:1.2em;min-width:2.5em}.vxe-image-preview--operation-active-count .vxe-image-preview--operation-active-current,.vxe-image-preview--operation-active-count .vxe-image-preview--operation-active-total{display:inline-block;height:1.4em}.vxe-image-preview--operation-active-count .vxe-image-preview--operation-active-current{font-size:2em;line-height:1.2em;font-weight:700;padding-right:.1em;min-width:1.4em;text-align:right}.vxe-image-preview--operation-btn{font-size:1.6em;padding:.5em;cursor:pointer;transition:all .1s ease-in-out}.vxe-image-preview--operation-btn:hover{color:var(--vxe-ui-font-primary-color);transform:scale(1.2)}.vxe-image-preview--operation-btn:active{transform:scale(.9)}.vxe-image-preview-popup-wrapper{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-image-preview-popup-wrapper.vxe-modal--wrapper.type--modal .vxe-modal--box{border:0;background-color:rgba(0,0,0,.1);box-shadow:none}.vxe-image-preview-popup-wrapper.vxe-modal--wrapper.type--modal .vxe-modal--content{padding:0}

package/lib/index.common.js

@@ -0,0 +1,25 @@
+"use strict";
+
+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); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports.default = void 0;
+var VxeUIExport = _interopRequireWildcard(require("./components"));
+Object.keys(VxeUIExport).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === VxeUIExport[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return VxeUIExport[key];
+    }
+  });
+});
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+/**
+ * A vue based PC component library
+ */
+var _default = exports.default = VxeUIExport;