bkui-vue 0.0.2-beta.35 → 0.0.2-beta.37

package/lib/image/index.js

@@ -1 +1,681 @@
-!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("../shared"),require("vue"),require("../config-provider"),require("../icon"),require("vue-types"),require("lodash"),require("../directives"));else if("function"==typeof define&&define.amd)define(["../shared","vue","../config-provider","../icon","vue-types","lodash","../directives"],t);else{var o="object"==typeof exports?t(require("../shared"),require("vue"),require("../config-provider"),require("../icon"),require("vue-types"),require("lodash"),require("../directives")):t(e["../shared"],e.vue,e["../config-provider"],e["../icon"],e["vue-types"],e.lodash,e["../directives"]);for(var r in o)("object"==typeof exports?exports:e)[r]=o[r]}}(self,((e,t,o,r,a,n,i)=>(()=>{"use strict";var l={2717:e=>{e.exports=o},4061:e=>{e.exports=i},6870:e=>{e.exports=r},4212:t=>{t.exports=e},467:e=>{e.exports=n},748:e=>{e.exports=t},210:e=>{e.exports=a}},c={};function s(e){var t=c[e];if(void 0!==t)return t.exports;var o=c[e]={exports:{}};return l[e](o,o.exports,s),o.exports}s.d=(e,t)=>{for(var o in t)s.o(t,o)&&!s.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},s.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),s.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var u={};return(()=>{s.r(u),s.d(u,{Image:()=>c,ImageViewer:()=>f,default:()=>p});var e,t=s(4212),o=s(748),r=s(2717),a=s(6870),n=s(210);!function(e){e.FILL="fill",e.CONTAIN="contain",e.COVER="cover",e.NONE="none",e.SCALE_DOWN="scale-down"}(e||(e={}));var i={src:t.PropTypes.string.def(""),fallback:t.PropTypes.string.def(""),placeholder:t.PropTypes.any,fit:(0,n.toType)("fit",{}).def(e.FILL),lazy:t.PropTypes.bool,urlList:t.PropTypes.array.def([]),isShowPreviewTitle:t.PropTypes.bool.def(!0),maskClose:t.PropTypes.bool.def(!0),zIndex:t.PropTypes.number.def(2e3)},l={urlList:{type:Array,default:function(){return[]}},zIndex:t.PropTypes.number.def(2e3),initialIndex:t.PropTypes.number.def(0),isShowTitle:t.PropTypes.bool.def(!0),loops:t.PropTypes.bool.def(!0),maskClose:t.PropTypes.bool.def(!0)};const c=(0,o.defineComponent)({name:"Image",props:i,emits:["loaded","error","close","change"],setup:function(e,t){var n=t.emit,i=t.slots,l=(0,o.ref)(!0),c=(0,o.ref)(!0),s=(0,o.ref)(!1),u=(0,o.ref)(""),d=(0,o.ref)("");function v(){}(0,o.watch)((function(){return e.src}),(function(){l.value=!0,c.value=!1,d.value=e.src}));var p=(0,o.computed)((function(){var t;return(null===(t=null==e?void 0:e.urlList)||void 0===t?void 0:t.length)>0}));function m(){document.body.style.overflow=u.value,s.value=!1,n("close")}function g(e){n("change",e)}var b=(0,r.usePrefix)().resolveClassName;return function(){return(0,o.createVNode)("div",{class:"".concat(b("image"))},[l.value?(0,o.createVNode)("div",{class:"".concat(b("image-placeholder"))},[(0,o.createVNode)(a.Spinner,null,null)]):c.value?i.error?"function"==typeof i.error?i.error():i.error:(0,o.createVNode)("div",{class:"".concat(b("image-placeholder"))},[e.fallback?(0,o.createVNode)("img",{src:e.fallback,alt:"图片加载错误"},null):"",(0,o.withDirectives)((0,o.createVNode)("i",{class:"".concat(b("icon")," icon-image-fail")},null),[[(0,o.resolveDirective)("else")]])]):(0,o.createVNode)("img",{src:e.src,onClick:v,style:{objectFit:fit}},null),p.value&&s.value?(0,o.createVNode)(f,{zIndex:e.zIndex,maskClose:e.maskClose,"is-show-title":e.isShowPreviewTitle,"url-list":e.urlList,onClose:m,onChange:g},null):""])}}});var d=s(467),v=s(4061);const f=(0,o.defineComponent)({name:"ImageViewer",directives:{bkTooltips:v.bkTooltips},props:l,emits:["close","change"],setup:function(e,n){var i=n.emit,l=(0,o.effectScope)(),c=(0,o.ref)(),s=(0,o.ref)([]),u=(0,o.ref)(""),v=(0,o.ref)(e.initialIndex),f=(0,o.ref)(!1),p=(0,o.ref)(!1),m=(0,o.shallowRef)({scale:1,deg:0,offsetX:0,offsetY:0,enableTransition:!1}),g=(0,o.computed)((function(){var t;return(null===(t=null==e?void 0:e.urlList)||void 0===t?void 0:t.length)<2})),b=(0,o.computed)((function(){return 0===v.value})),h=(0,o.computed)((function(){return v.value===e.urlList.length-1})),w=(0,o.computed)((function(){return e.urlList[v.value]})),N=(0,o.computed)((function(){var e=w.value.split("/");return e[e.length-1]})),y=(0,o.computed)((function(){var e=m.value,t=e.scale,o=e.deg,r=e.offsetX,a=e.offsetY,n=e.enableTransition,i=r/t,l=a/t;switch(o%360){case 90:case-270:var c=[l,-i];i=c[0],l=c[1];break;case 180:case-180:var s=[-i,-l];i=s[0],l=s[1];break;case 270:case-90:var d=[-l,i];i=d[0],l=d[1]}var v={transform:"scale(".concat(t,") rotate(").concat(o,"deg) translate(").concat(i,"px, ").concat(l,"px)"),transition:n?"transform .3s":""};return"contain"===u.value&&(v.maxWidth="100%",v.maxHeight="100%"),v})),x=(0,o.computed)((function(){var o=2e3;return e.zIndex?o=e.zIndex:o+=t.bkZIndexManager.getModalNextIndex()||1,{zIndex:o}})),V=(0,d.throttle)((function(e){switch(Number(e.code)){case 27:T();break;case 32:f.value||(u.value="original",m.value={scale:1,deg:0,offsetX:0,offsetY:0,enableTransition:!1});break;case 37:L();break;case 38:I("zoomIn");break;case 39:C();break;case 40:I("zoomOut")}})),k=(0,d.throttle)((function(e){I((e.wheelDelta?e.wheelDelta:-e.detail)>0?"zoomIn":"zoomOut",{zoomRate:1.2,enableTransition:!1})}));function T(){document.removeEventListener("keydown",V),document.removeEventListener("mousewheel",k),l.stop(),i("close")}function L(){if(!b.value||e.loops){var t=e.urlList.length;v.value=(v.value-1+t)%t}}function C(){if(!h.value||e.loops){var t=e.urlList.length;v.value=(v.value+1)%t}}function I(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!f.value){var o=Object.assign({zoomRate:.2,rotateDeg:90,enableTransition:!0},t),r=o.zoomRate,a=o.rotateDeg,n=o.enableTransition;switch(e){case"zoomOut":m.value.scale>.2&&(m.value.scale=Number.parseFloat((m.value.scale-r).toFixed(3)));break;case"zoomIn":m.value.scale<7&&(m.value.scale=Number.parseFloat((m.value.scale+r).toFixed(3)));break;case"clockwise":m.value.deg+=a;break;case"anticlockwise":m.value.deg-=a}m.value.enableTransition=n}}function P(){p.value=!1,f.value=!1}function z(e){p.value=!0,f.value=!1,e.target.alt="加载失败"}function O(e){if(!f.value&&0===e.button&&c.value){m.value.enableTransition=!1;var t=m.value,o=t.offsetX,r=t.offsetY,a=e.pageX,n=e.pageY,i=(0,d.throttle)((function(e){m.value=Object.assign(Object.assign({},m.value),{offsetX:o+e.pageX-a,offsetY:r+e.pageY-n})}));document.addEventListener("mousemove",i),document.addEventListener("mouseup",(function e(){document.removeEventListener("mousemove",i),document.removeEventListener("mouseup",e)})),e.preventDefault()}}l.run((function(){document.addEventListener("keydown",V),document.addEventListener("mousewheel",k)}));var q=(0,r.usePrefix)().resolveClassName;return function(){return(0,o.createVNode)(o.Teleport,{to:"body"},{default:function(){return[(0,o.createVNode)(o.Transition,null,{default:function(){return[(0,o.createVNode)("div",{tabindex:"-1",ref:"wrapper",class:"".concat(q("image-viewer-wrapper")),style:x.value},[(0,o.createVNode)("div",{class:"".concat(q("image-viewer-mask")),onClick:function(){e.maskClose&&T()}},null),e.isShowTitle&&e.urlList.length?(0,o.createVNode)("div",{class:"".concat(q("image-viewer-header"))},[(0,o.createVNode)("div",null,[N]),(0,o.createVNode)("div",{class:"tc "},[v.value+1,(0,o.createTextVNode)("/"),e.urlList.length]),(0,o.createVNode)("div",{class:"quit-box tr"},[(0,o.createVNode)("div",{class:"quit-tips mr10"},[(0,o.createTextVNode)("ESC 可以退出全屏")]),(0,o.createVNode)("div",{class:"".concat(q("image-viewer-close")),onClick:T},[(0,o.createVNode)(a.Close,null,null)])])]):"",g.value?"":(0,o.createVNode)(o.Fragment,null,[(0,o.createVNode)("div",{onClick:L,class:"".concat(q("image-viewer-btn")," ").concat(q("image-viewer-prev")," ").concat(!e.loops&&b?"is-disabled":"")},[(0,o.createVNode)(a.AngleLeft,null,null)]),(0,o.createVNode)("div",{onClick:C,class:"".concat(q("image-viewer-btn")," ").concat(q("image-viewer-prev")," ").concat(!e.loops&&h?"is-disabled":"")},[(0,o.createVNode)(a.AngleRight,null,null)]),(0,o.createVNode)("div",{class:"".concat(q("image-viewer-actions-inner"))},[(0,o.withDirectives)((0,o.createVNode)(a.AngleLeft,{onClick:function(){return I("zoomOut")}},null),[[(0,o.resolveDirective)("bk-tooltips"),"{content: '提示信息', placement: 'top'}"]]),(0,o.withDirectives)((0,o.createVNode)("i",{class:"",onClick:function(){return I("zoomOut")}},null),[[(0,o.resolveDirective)("bk-tooltips"),"{content: '提示信息', placement: 'top'}"]]),(0,o.withDirectives)((0,o.createVNode)("i",{class:"".concat(q("icon")," icon-narrow-line"),onClick:function(){return I("zoomOut")}},null),[[(0,o.resolveDirective)("bk-tooltips"),"{content: '提示信息', placement: 'top'}"]])])]),(0,o.createVNode)("div",{class:"".concat(q("image-viewer-canvas")," ").concat(e.isShowTitle?q("image-viewer-has-header"):"")},[p.value?(0,o.createVNode)("div",{class:"".concat(q("image-viewer-error"))},[(0,o.createVNode)("div",null,[(0,o.createVNode)("i",{class:"".concat(q("icon")," icon-image-fail")},null)]),(0,o.createVNode)("div",null,[(0,o.createTextVNode)("抱歉，图片加载失败")])]):e.urlList.map((function(e,t){return t===v.value?"":(0,o.createVNode)("img",{key:t,ref:function(e){return s[t]=e},class:"".concat(q("image-viewer-img")),style:y.value,src:e,onLoad:P,onError:z,onMousedown:O},null)}))])])]}})]}})}}}),p=(0,t.withInstall)(c)})(),u})()));
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory(require("../shared"), require("vue"), require("../config-provider"), require("../icon"), require("vue-types"), require("lodash"), require("../directives"));
+	else if(typeof define === 'function' && define.amd)
+		define(["../shared", "vue", "../config-provider", "../icon", "vue-types", "lodash", "../directives"], factory);
+	else {
+		var a = typeof exports === 'object' ? factory(require("../shared"), require("vue"), require("../config-provider"), require("../icon"), require("vue-types"), require("lodash"), require("../directives")) : factory(root["../shared"], root["vue"], root["../config-provider"], root["../icon"], root["vue-types"], root["lodash"], root["../directives"]);
+		for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
+	}
+})(self, (__WEBPACK_EXTERNAL_MODULE__4212__, __WEBPACK_EXTERNAL_MODULE__748__, __WEBPACK_EXTERNAL_MODULE__2717__, __WEBPACK_EXTERNAL_MODULE__6870__, __WEBPACK_EXTERNAL_MODULE__210__, __WEBPACK_EXTERNAL_MODULE__467__, __WEBPACK_EXTERNAL_MODULE__4061__) => {
+return /******/ (() => { // webpackBootstrap
+/******/ 	"use strict";
+/******/ 	var __webpack_modules__ = ({
+
+/***/ 2717:
+/***/ ((module) => {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE__2717__;
+
+/***/ }),
+
+/***/ 4061:
+/***/ ((module) => {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE__4061__;
+
+/***/ }),
+
+/***/ 6870:
+/***/ ((module) => {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE__6870__;
+
+/***/ }),
+
+/***/ 4212:
+/***/ ((module) => {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE__4212__;
+
+/***/ }),
+
+/***/ 467:
+/***/ ((module) => {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE__467__;
+
+/***/ }),
+
+/***/ 748:
+/***/ ((module) => {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE__748__;
+
+/***/ }),
+
+/***/ 210:
+/***/ ((module) => {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE__210__;
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 		if (cachedModule !== undefined) {
+/******/ 			return cachedModule.exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			// no module.id needed
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/define property getters */
+/******/ 	(() => {
+/******/ 		// define getter functions for harmony exports
+/******/ 		__webpack_require__.d = (exports, definition) => {
+/******/ 			for(var key in definition) {
+/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 				}
+/******/ 			}
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
+/******/ 	(() => {
+/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/make namespace object */
+/******/ 	(() => {
+/******/ 		// define __esModule on exports
+/******/ 		__webpack_require__.r = (exports) => {
+/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 			}
+/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/************************************************************************/
+var __webpack_exports__ = {};
+// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
+(() => {
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  Image: () => (/* reexport */ src_image),
+  ImageViewer: () => (/* reexport */ image_viewer),
+  "default": () => (/* binding */ src)
+});
+
+// EXTERNAL MODULE: external "../shared"
+var external_shared_ = __webpack_require__(4212);
+// EXTERNAL MODULE: external "vue"
+var external_vue_ = __webpack_require__(748);
+// EXTERNAL MODULE: external "../config-provider"
+var external_config_provider_ = __webpack_require__(2717);
+// EXTERNAL MODULE: external "../icon"
+var external_icon_ = __webpack_require__(6870);
+// EXTERNAL MODULE: external "vue-types"
+var external_vue_types_ = __webpack_require__(210);
+;// CONCATENATED MODULE: ../../packages/image/src/props.ts
+
+
+var FitEnum;
+(function (FitEnum) {
+  FitEnum["FILL"] = "fill";
+  FitEnum["CONTAIN"] = "contain";
+  FitEnum["COVER"] = "cover";
+  FitEnum["NONE"] = "none";
+  FitEnum["SCALE_DOWN"] = "scale-down";
+})(FitEnum || (FitEnum = {}));
+var propsImage = {
+  src: external_shared_.PropTypes.string.def(''),
+  fallback: external_shared_.PropTypes.string.def(''),
+  placeholder: external_shared_.PropTypes.any,
+  fit: (0,external_vue_types_.toType)('fit', {}).def(FitEnum.FILL),
+  lazy: external_shared_.PropTypes.bool,
+  urlList: external_shared_.PropTypes.array.def([]),
+  isShowPreviewTitle: external_shared_.PropTypes.bool.def(true),
+  maskClose: external_shared_.PropTypes.bool.def(true),
+  zIndex: external_shared_.PropTypes.number.def(2000)
+};
+var propsImageViever = {
+  urlList: {
+    type: Array,
+    "default": function _default() {
+      return [];
+    }
+  },
+  zIndex: external_shared_.PropTypes.number.def(2000),
+  initialIndex: external_shared_.PropTypes.number.def(0),
+  isShowTitle: external_shared_.PropTypes.bool.def(true),
+  loops: external_shared_.PropTypes.bool.def(true),
+  maskClose: external_shared_.PropTypes.bool.def(true)
+};
+;// CONCATENATED MODULE: ../../packages/image/src/image.tsx
+
+/*
+* Tencent is pleased to support the open source community by making
+* 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+*
+* Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+*
+* 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+*
+* License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+*
+* ---------------------------------------------------
+* Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+* documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+* the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+* to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+*
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+* the Software.
+*
+* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+* THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+* CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+* IN THE SOFTWARE.
+*/
+
+
+
+
+
+/* harmony default export */ const src_image = ((0,external_vue_.defineComponent)({
+  name: 'Image',
+  props: propsImage,
+  emits: ['loaded', 'error', 'close', 'change'],
+  setup: function setup(props, _ref) {
+    var emit = _ref.emit,
+      slots = _ref.slots;
+    var loading = (0,external_vue_.ref)(true);
+    var hasError = (0,external_vue_.ref)(true);
+    var isShowViewer = (0,external_vue_.ref)(false);
+    var prevOverflow = (0,external_vue_.ref)('');
+    var imageSrc = (0,external_vue_.ref)('');
+    function clickHandler() {}
+    (0,external_vue_.watch)(function () {
+      return props.src;
+    }, function () {
+      loadImage();
+    });
+    var preview = (0,external_vue_.computed)(function () {
+      var _a;
+      return ((_a = props === null || props === void 0 ? void 0 : props.urlList) === null || _a === void 0 ? void 0 : _a.length) > 0;
+    });
+    function closeViewer() {
+      document.body.style.overflow = prevOverflow.value;
+      isShowViewer.value = false;
+      emit('close');
+    }
+    function change(val) {
+      emit('change', val);
+    }
+    function loadImage() {
+      loading.value = true;
+      hasError.value = false;
+      imageSrc.value = props.src;
+    }
+    var _usePrefix = (0,external_config_provider_.usePrefix)(),
+      resolveClassName = _usePrefix.resolveClassName;
+    return function () {
+      function getContent() {
+        if (loading.value) {
+          return (0,external_vue_.createVNode)("div", {
+            "class": "".concat(resolveClassName('image-placeholder'))
+          }, [(0,external_vue_.createVNode)(external_icon_.Spinner, null, null)]);
+        }
+        if (hasError.value) {
+          if (slots.error) {
+            if (typeof slots.error === 'function') {
+              return slots.error();
+            }
+            return slots.error;
+          }
+          return (0,external_vue_.createVNode)("div", {
+            "class": "".concat(resolveClassName('image-placeholder'))
+          }, [props.fallback ? (0,external_vue_.createVNode)("img", {
+            "src": props.fallback,
+            "alt": "\u56FE\u7247\u52A0\u8F7D\u9519\u8BEF"
+          }, null) : '', (0,external_vue_.withDirectives)((0,external_vue_.createVNode)("i", {
+            "class": "".concat(resolveClassName('icon'), " icon-image-fail")
+          }, null), [[(0,external_vue_.resolveDirective)("else")]])]);
+        }
+        // @ts-ignore
+        return (0,external_vue_.createVNode)("img", {
+          "src": props.src,
+          "onClick": clickHandler,
+          "style": {
+            objectFit: fit
+          }
+        }, null);
+      }
+      return (0,external_vue_.createVNode)("div", {
+        "class": "".concat(resolveClassName('image'))
+      }, [getContent(), preview.value && isShowViewer.value ? (0,external_vue_.createVNode)(image_viewer, {
+        "zIndex": props.zIndex,
+        "maskClose": props.maskClose,
+        "is-show-title": props.isShowPreviewTitle,
+        "url-list": props.urlList,
+        "onClose": closeViewer,
+        "onChange": change
+      }, null) : '']);
+    };
+  }
+}));
+// EXTERNAL MODULE: external "lodash"
+var external_lodash_ = __webpack_require__(467);
+// EXTERNAL MODULE: external "../directives"
+var external_directives_ = __webpack_require__(4061);
+;// CONCATENATED MODULE: ../../packages/image/src/image-viewer.tsx
+
+/*
+* Tencent is pleased to support the open source community by making
+* 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+*
+* Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+*
+* 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+*
+* License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+*
+* ---------------------------------------------------
+* Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+* documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+* the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+* to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+*
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+* the Software.
+*
+* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+* THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+* CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+* IN THE SOFTWARE.
+*/
+
+
+
+
+
+
+
+/* harmony default export */ const image_viewer = ((0,external_vue_.defineComponent)({
+  name: 'ImageViewer',
+  directives: {
+    bkTooltips: external_directives_.bkTooltips
+  },
+  props: propsImageViever,
+  emits: ['close', 'change'],
+  setup: function setup(props, _ref) {
+    var emit = _ref.emit;
+    var scopeEventListener = (0,external_vue_.effectScope)();
+    // @ts-ignore
+    var wrapper = (0,external_vue_.ref)();
+    var imgRefs = (0,external_vue_.ref)([]);
+    var mode = (0,external_vue_.ref)('');
+    var index = (0,external_vue_.ref)(props.initialIndex);
+    var loading = (0,external_vue_.ref)(false);
+    var error = (0,external_vue_.ref)(false);
+    var transform = (0,external_vue_.shallowRef)({
+      scale: 1,
+      deg: 0,
+      offsetX: 0,
+      offsetY: 0,
+      enableTransition: false
+    });
+    var isSingle = (0,external_vue_.computed)(function () {
+      var _a;
+      return ((_a = props === null || props === void 0 ? void 0 : props.urlList) === null || _a === void 0 ? void 0 : _a.length) < 2;
+    });
+    var isFirst = (0,external_vue_.computed)(function () {
+      return index.value === 0;
+    });
+    var isLast = (0,external_vue_.computed)(function () {
+      return index.value === props.urlList.length - 1;
+    });
+    var currentImg = (0,external_vue_.computed)(function () {
+      return props.urlList[index.value];
+    });
+    var currentName = (0,external_vue_.computed)(function () {
+      var arr = currentImg.value.split('/');
+      return arr[arr.length - 1];
+    });
+    var imgStyle = (0,external_vue_.computed)(function () {
+      var _transform$value = transform.value,
+        scale = _transform$value.scale,
+        deg = _transform$value.deg,
+        offsetX = _transform$value.offsetX,
+        offsetY = _transform$value.offsetY,
+        enableTransition = _transform$value.enableTransition;
+      var translateX = offsetX / scale;
+      var translateY = offsetY / scale;
+      switch (deg % 360) {
+        case 90:
+        case -270:
+          ;
+          var _ref2 = [translateY, -translateX];
+          translateX = _ref2[0];
+          translateY = _ref2[1];
+          break;
+        case 180:
+        case -180:
+          ;
+          var _ref3 = [-translateX, -translateY];
+          translateX = _ref3[0];
+          translateY = _ref3[1];
+          break;
+        case 270:
+        case -90:
+          ;
+          var _ref4 = [-translateY, translateX];
+          translateX = _ref4[0];
+          translateY = _ref4[1];
+          break;
+      }
+      var style = {
+        transform: "scale(".concat(scale, ") rotate(").concat(deg, "deg) translate(").concat(translateX, "px, ").concat(translateY, "px)"),
+        transition: enableTransition ? 'transform .3s' : ''
+      };
+      if (mode.value === 'contain') {
+        style.maxWidth = '100%';
+        style.maxHeight = '100%';
+      }
+      return style;
+    });
+    var wrapStyles = (0,external_vue_.computed)(function () {
+      var zIndex = 2000;
+      if (props.zIndex) {
+        zIndex = props.zIndex;
+      } else {
+        zIndex += external_shared_.bkZIndexManager.getModalNextIndex() || 1;
+      }
+      return {
+        zIndex: zIndex
+      };
+    });
+    var keydownHandler = (0,external_lodash_.throttle)(function (e) {
+      switch (Number(e.code)) {
+        // ESC
+        case 27:
+          hide();
+          break;
+        // SPACE
+        case 32:
+          toggleMode('original');
+          break;
+        // LEFT_ARROW
+        case 37:
+          prev();
+          break;
+        // UP_ARROW
+        case 38:
+          handleActions('zoomIn');
+          break;
+        // RIGHT_ARROW
+        case 39:
+          next();
+          break;
+        // DOWN_ARROW
+        case 40:
+          handleActions('zoomOut');
+          break;
+      }
+    });
+    var mousewheelHandler = (0,external_lodash_.throttle)(function (e /* TODO: wheelDelta is deprecated */) {
+      var delta = e.wheelDelta ? e.wheelDelta : -e.detail;
+      if (delta > 0) {
+        handleActions('zoomIn', {
+          zoomRate: 1.2,
+          enableTransition: false
+        });
+      } else {
+        handleActions('zoomOut', {
+          zoomRate: 1.2,
+          enableTransition: false
+        });
+      }
+    });
+    scopeEventListener.run(function () {
+      document.addEventListener('keydown', keydownHandler);
+      document.addEventListener('mousewheel', mousewheelHandler);
+    });
+    function hide() {
+      document.removeEventListener('keydown', keydownHandler);
+      document.removeEventListener('mousewheel', mousewheelHandler);
+      scopeEventListener.stop();
+      emit('close');
+    }
+    function toggleMode(modeNames) {
+      if (loading.value) return;
+      mode.value = modeNames;
+      reset();
+    }
+    function reset() {
+      transform.value = {
+        scale: 1,
+        deg: 0,
+        offsetX: 0,
+        offsetY: 0,
+        enableTransition: false
+      };
+    }
+    function prev() {
+      if (isFirst.value && !props.loops) return;
+      var len = props.urlList.length;
+      index.value = (index.value - 1 + len) % len;
+    }
+    function next() {
+      if (isLast.value && !props.loops) return;
+      var len = props.urlList.length;
+      index.value = (index.value + 1) % len;
+    }
+    function handleActions(action) {
+      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      if (loading.value) return;
+      var _Object$assign = Object.assign({
+          zoomRate: 0.2,
+          rotateDeg: 90,
+          enableTransition: true
+        }, options),
+        zoomRate = _Object$assign.zoomRate,
+        rotateDeg = _Object$assign.rotateDeg,
+        enableTransition = _Object$assign.enableTransition;
+      switch (action) {
+        case 'zoomOut':
+          if (transform.value.scale > 0.2) {
+            transform.value.scale = Number.parseFloat((transform.value.scale - zoomRate).toFixed(3));
+          }
+          break;
+        case 'zoomIn':
+          if (transform.value.scale < 7) {
+            transform.value.scale = Number.parseFloat((transform.value.scale + zoomRate).toFixed(3));
+          }
+          break;
+        case 'clockwise':
+          transform.value.deg += rotateDeg;
+          break;
+        case 'anticlockwise':
+          transform.value.deg -= rotateDeg;
+          break;
+      }
+      transform.value.enableTransition = enableTransition;
+    }
+    function handleImgLoad() {
+      error.value = false;
+      loading.value = false;
+    }
+    function handleImgError(e) {
+      error.value = true;
+      loading.value = false;
+      e.target.alt = '加载失败';
+    }
+    function handleMouseDown(e) {
+      if (loading.value || e.button !== 0 || !wrapper.value) return;
+      transform.value.enableTransition = false;
+      var _transform$value2 = transform.value,
+        offsetX = _transform$value2.offsetX,
+        offsetY = _transform$value2.offsetY;
+      var startX = e.pageX;
+      var startY = e.pageY;
+      var mousemove = (0,external_lodash_.throttle)(function (ev) {
+        transform.value = Object.assign(Object.assign({}, transform.value), {
+          offsetX: offsetX + ev.pageX - startX,
+          offsetY: offsetY + ev.pageY - startY
+        });
+      });
+      var mouseup = function mouseup() {
+        document.removeEventListener('mousemove', mousemove);
+        document.removeEventListener('mouseup', mouseup);
+      };
+      document.addEventListener('mousemove', mousemove);
+      document.addEventListener('mouseup', mouseup);
+      e.preventDefault();
+    }
+    var _usePrefix = (0,external_config_provider_.usePrefix)(),
+      resolveClassName = _usePrefix.resolveClassName;
+    return function () {
+      return (0,external_vue_.createVNode)(external_vue_.Teleport, {
+        "to": "body"
+      }, {
+        "default": function _default() {
+          return [(0,external_vue_.createVNode)(external_vue_.Transition, null, {
+            "default": function _default() {
+              return [(0,external_vue_.createVNode)("div", {
+                "tabindex": "-1",
+                "ref": "wrapper",
+                "class": "".concat(resolveClassName('image-viewer-wrapper')),
+                "style": wrapStyles.value
+              }, [(0,external_vue_.createVNode)("div", {
+                "class": "".concat(resolveClassName('image-viewer-mask')),
+                "onClick": function onClick() {
+                  props.maskClose && hide();
+                }
+              }, null), props.isShowTitle && props.urlList.length ? (0,external_vue_.createVNode)("div", {
+                "class": "".concat(resolveClassName('image-viewer-header'))
+              }, [(0,external_vue_.createVNode)("div", null, [currentName]), (0,external_vue_.createVNode)("div", {
+                "class": "tc "
+              }, [index.value + 1, (0,external_vue_.createTextVNode)("/"), props.urlList.length]), (0,external_vue_.createVNode)("div", {
+                "class": "quit-box tr"
+              }, [(0,external_vue_.createVNode)("div", {
+                "class": "quit-tips mr10"
+              }, [(0,external_vue_.createTextVNode)("ESC \u53EF\u4EE5\u9000\u51FA\u5168\u5C4F")]), (0,external_vue_.createVNode)("div", {
+                "class": "".concat(resolveClassName('image-viewer-close')),
+                "onClick": hide
+              }, [(0,external_vue_.createVNode)(external_icon_.Close, null, null)])])]) : '', !isSingle.value ? (0,external_vue_.createVNode)(external_vue_.Fragment, null, [(0,external_vue_.createVNode)("div", {
+                "onClick": prev,
+                "class": "".concat(resolveClassName('image-viewer-btn'), " ").concat(resolveClassName('image-viewer-prev'), " ").concat(!props.loops && isFirst ? 'is-disabled' : '')
+              }, [(0,external_vue_.createVNode)(external_icon_.AngleLeft, null, null)]), (0,external_vue_.createVNode)("div", {
+                "onClick": next,
+                "class": "".concat(resolveClassName('image-viewer-btn'), " ").concat(resolveClassName('image-viewer-prev'), " ").concat(!props.loops && isLast ? 'is-disabled' : '')
+              }, [(0,external_vue_.createVNode)(external_icon_.AngleRight, null, null)]), (0,external_vue_.createVNode)("div", {
+                "class": "".concat(resolveClassName('image-viewer-actions-inner'))
+              }, [(0,external_vue_.withDirectives)((0,external_vue_.createVNode)(external_icon_.AngleLeft, {
+                "onClick": function onClick() {
+                  return handleActions('zoomOut');
+                }
+              }, null), [[(0,external_vue_.resolveDirective)("bk-tooltips"), "{content: '\u63D0\u793A\u4FE1\u606F', placement: 'top'}"]]), (0,external_vue_.withDirectives)((0,external_vue_.createVNode)("i", {
+                "class": "",
+                "onClick": function onClick() {
+                  return handleActions('zoomOut');
+                }
+              }, null), [[(0,external_vue_.resolveDirective)("bk-tooltips"), "{content: '\u63D0\u793A\u4FE1\u606F', placement: 'top'}"]]), (0,external_vue_.withDirectives)((0,external_vue_.createVNode)("i", {
+                "class": "".concat(resolveClassName('icon'), " icon-narrow-line"),
+                "onClick": function onClick() {
+                  return handleActions('zoomOut');
+                }
+              }, null), [[(0,external_vue_.resolveDirective)("bk-tooltips"), "{content: '\u63D0\u793A\u4FE1\u606F', placement: 'top'}"]])])]) : '', (0,external_vue_.createVNode)("div", {
+                "class": "".concat(resolveClassName('image-viewer-canvas'), " ").concat(props.isShowTitle ? resolveClassName('image-viewer-has-header') : '')
+              }, [error.value ? (0,external_vue_.createVNode)("div", {
+                "class": "".concat(resolveClassName('image-viewer-error'))
+              }, [(0,external_vue_.createVNode)("div", null, [(0,external_vue_.createVNode)("i", {
+                "class": "".concat(resolveClassName('icon'), " icon-image-fail")
+              }, null)]), (0,external_vue_.createVNode)("div", null, [(0,external_vue_.createTextVNode)("\u62B1\u6B49\uFF0C\u56FE\u7247\u52A0\u8F7D\u5931\u8D25")])]) : props.urlList.map(function (url, i) {
+                if (i === index.value) {
+                  return '';
+                }
+                return (0,external_vue_.createVNode)("img", {
+                  "key": i,
+                  "ref": function ref(el) {
+                    return imgRefs[i] = el;
+                  },
+                  "class": "".concat(resolveClassName('image-viewer-img')),
+                  "style": imgStyle.value,
+                  "src": url,
+                  "onLoad": handleImgLoad,
+                  "onError": handleImgError,
+                  "onMousedown": handleMouseDown
+                }, null);
+              })])])];
+            }
+          })];
+        }
+      });
+    };
+  }
+}));
+;// CONCATENATED MODULE: ../../packages/image/src/index.ts
+/*
+* Tencent is pleased to support the open source community by making
+* 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+*
+* Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+*
+* 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+*
+* License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+*
+* ---------------------------------------------------
+* Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+* documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+* the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+* to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+*
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+* the Software.
+*
+* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+* THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+* CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+* IN THE SOFTWARE.
+*/
+
+
+
+
+var BkImage = (0,external_shared_.withInstall)(src_image);
+/* harmony default export */ const src = (BkImage);
+})();
+
+/******/ 	return __webpack_exports__;
+/******/ })()
+;
+});