bkui-vue 0.0.1-beta.39 → 0.0.1-beta.391

package/lib/image/index.js

@@ -0,0 +1,824 @@
+import * as __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__ from "../shared";
+import * as __WEBPACK_EXTERNAL_MODULE_vue__ from "vue";
+import * as __WEBPACK_EXTERNAL_MODULE__icon_85385c3e__ from "../icon";
+import * as __WEBPACK_EXTERNAL_MODULE_vue_types_22de060a__ from "vue-types";
+import * as __WEBPACK_EXTERNAL_MODULE_lodash__ from "lodash";
+import * as __WEBPACK_EXTERNAL_MODULE__directives_9cc9ba10__ from "../directives";
+/******/ var __webpack_modules__ = ({
+
+/***/ 5458:
+/***/ ((module, __unused_webpack___webpack_exports__, __webpack_require__) => {
+
+/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9601);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2609);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
+// Imports
+
+
+var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
+// Module
+___CSS_LOADER_EXPORT___.push([module.id, ".bk-image-viewer-wrapper {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: flex;\n  background: rgba(0, 0, 0, 0.6);\n  flex-direction: column;\n}\n.bk-image-viewer-mask {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n}\n.bk-image-viewer-header {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 9;\n  display: flex;\n  width: 100%;\n  height: 52px;\n  color: #c4c6cc;\n  background: rgba(0, 0, 0, 0.7);\n  justify-content: space-between;\n  align-items: center;\n}\n.bk-image-viewer-header > div {\n  padding: 0 25px;\n  overflow: hidden;\n  font-size: 14px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  flex: 1;\n}\n.bk-image-viewer-header .quit-box {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n}\n.bk-image-viewer-header .quit-tips {\n  font-size: 14px;\n  color: #979ba5;\n}\n.bk-image-viewer-btn {\n  position: absolute;\n  z-index: 1;\n  display: flex;\n  color: #dcdee5;\n  background-color: rgba(0, 0, 0, 0.3);\n  border-radius: 50%;\n  opacity: 0.8;\n  box-sizing: border-box;\n  user-select: none;\n  align-items: center;\n  justify-content: center;\n}\n.bk-image-viewer-btn:hover {\n  color: #fff;\n  background-color: rgba(0, 0, 0, 0.4);\n}\n.bk-image-viewer-close {\n  height: 52px;\n  font-size: 32px;\n  line-height: 48px;\n  color: #c4c6cc;\n  text-align: center;\n  cursor: pointer;\n}\n.bk-image-viewer-close:hover {\n  color: #fff;\n}\n.bk-image-viewer-canvas {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n}\n.bk-image-viewer-has-header {\n  padding-top: 52px;\n}\n.bk-image-viewer-error {\n  font-size: 14px;\n  color: #313238;\n  text-align: center;\n}\n.bk-image-viewer-error .bk-icon {\n  margin-bottom: 15px;\n  font-size: 85px;\n  line-height: 1;\n}\n.bk-image-viewer-actions {\n  bottom: 30px;\n  left: 50%;\n  width: 282px;\n  height: 44px;\n  padding: 0 23px;\n  background-color: rgba(0, 0, 0, 0.4);\n  border-color: #fff;\n  border-radius: 22px;\n  transform: translateX(-50%);\n}\n.bk-image-viewer-actions:hover {\n  background: rgba(0, 0, 0, 0.5);\n}\n.bk-image-viewer-actions-inner {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  font-size: 23px;\n  color: #c4c6cc;\n  text-align: justify;\n  align-items: center;\n  justify-content: space-around;\n}\n.bk-image-viewer-actions-inner .bk-icon {\n  cursor: pointer;\n}\n.bk-image-viewer-actions-inner .bk-icon:hover {\n  color: #fff;\n}\n.bk-image-viewer-next,\n.bk-image-viewer-prev {\n  top: 50%;\n  width: 80px;\n  height: 80px;\n  font-size: 40px;\n  cursor: pointer;\n}\n.bk-image-viewer-prev {\n  left: 40px;\n  transform: translateY(-50%);\n}\n.bk-image-viewer-next {\n  right: 40px;\n  text-indent: 2px;\n  transform: translateY(-50%);\n}\n", ""]);
+// Exports
+/* unused harmony default export */ var __WEBPACK_DEFAULT_EXPORT__ = ((/* unused pure expression or super */ null && (___CSS_LOADER_EXPORT___)));
+
+
+/***/ }),
+
+/***/ 2609:
+/***/ ((module) => {
+
+
+
+/*
+  MIT License http://www.opensource.org/licenses/mit-license.php
+  Author Tobias Koppers @sokra
+*/
+module.exports = function (cssWithMappingToString) {
+  var list = []; // return the list of modules as css string
+
+  list.toString = function toString() {
+    return this.map(function (item) {
+      var content = "";
+      var needLayer = typeof item[5] !== "undefined";
+
+      if (item[4]) {
+        content += "@supports (".concat(item[4], ") {");
+      }
+
+      if (item[2]) {
+        content += "@media ".concat(item[2], " {");
+      }
+
+      if (needLayer) {
+        content += "@layer".concat(item[5].length > 0 ? " ".concat(item[5]) : "", " {");
+      }
+
+      content += cssWithMappingToString(item);
+
+      if (needLayer) {
+        content += "}";
+      }
+
+      if (item[2]) {
+        content += "}";
+      }
+
+      if (item[4]) {
+        content += "}";
+      }
+
+      return content;
+    }).join("");
+  }; // import a list of modules into the list
+
+
+  list.i = function i(modules, media, dedupe, supports, layer) {
+    if (typeof modules === "string") {
+      modules = [[null, modules, undefined]];
+    }
+
+    var alreadyImportedModules = {};
+
+    if (dedupe) {
+      for (var k = 0; k < this.length; k++) {
+        var id = this[k][0];
+
+        if (id != null) {
+          alreadyImportedModules[id] = true;
+        }
+      }
+    }
+
+    for (var _k = 0; _k < modules.length; _k++) {
+      var item = [].concat(modules[_k]);
+
+      if (dedupe && alreadyImportedModules[item[0]]) {
+        continue;
+      }
+
+      if (typeof layer !== "undefined") {
+        if (typeof item[5] === "undefined") {
+          item[5] = layer;
+        } else {
+          item[1] = "@layer".concat(item[5].length > 0 ? " ".concat(item[5]) : "", " {").concat(item[1], "}");
+          item[5] = layer;
+        }
+      }
+
+      if (media) {
+        if (!item[2]) {
+          item[2] = media;
+        } else {
+          item[1] = "@media ".concat(item[2], " {").concat(item[1], "}");
+          item[2] = media;
+        }
+      }
+
+      if (supports) {
+        if (!item[4]) {
+          item[4] = "".concat(supports);
+        } else {
+          item[1] = "@supports (".concat(item[4], ") {").concat(item[1], "}");
+          item[4] = supports;
+        }
+      }
+
+      list.push(item);
+    }
+  };
+
+  return list;
+};
+
+/***/ }),
+
+/***/ 9601:
+/***/ ((module) => {
+
+
+
+module.exports = function (i) {
+  return i[1];
+};
+
+/***/ })
+
+/******/ });
+/************************************************************************/
+/******/ // 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] = {
+/******/ 		id: moduleId,
+/******/ 		// 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/compat get default export */
+/******/ (() => {
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = (module) => {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			() => (module['default']) :
+/******/ 			() => (module);
+/******/ 		__webpack_require__.d(getter, { a: getter });
+/******/ 		return getter;
+/******/ 	};
+/******/ })();
+/******/ 
+/******/ /* 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))
+/******/ })();
+/******/ 
+/************************************************************************/
+var __webpack_exports__ = {};
+// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
+(() => {
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "Ee": () => (/* reexport */ src_image),
+  "OO": () => (/* reexport */ src_image_viewer),
+  "ZP": () => (/* binding */ src)
+});
+
+;// CONCATENATED MODULE: external "../shared"
+var x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var y = x => () => x
+const external_shared_namespaceObject = x({ ["PropTypes"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.PropTypes, ["bkZIndexManager"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.bkZIndexManager, ["withInstall"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.withInstall });
+;// CONCATENATED MODULE: external "vue"
+var external_vue_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var external_vue_y = x => () => x
+const external_vue_namespaceObject = external_vue_x({ ["Fragment"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.Fragment, ["Teleport"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.Teleport, ["Transition"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.Transition, ["computed"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.computed, ["createTextVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createTextVNode, ["createVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createVNode, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent, ["effectScope"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.effectScope, ["ref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.ref, ["resolveDirective"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.resolveDirective, ["shallowRef"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.shallowRef, ["watch"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.watch, ["withDirectives"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.withDirectives });
+;// CONCATENATED MODULE: external "../icon"
+var external_icon_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var external_icon_y = x => () => x
+const external_icon_namespaceObject = external_icon_x({ ["AngleLeft"]: () => __WEBPACK_EXTERNAL_MODULE__icon_85385c3e__.AngleLeft, ["AngleRight"]: () => __WEBPACK_EXTERNAL_MODULE__icon_85385c3e__.AngleRight, ["Close"]: () => __WEBPACK_EXTERNAL_MODULE__icon_85385c3e__.Close, ["Spinner"]: () => __WEBPACK_EXTERNAL_MODULE__icon_85385c3e__.Spinner });
+;// CONCATENATED MODULE: external "vue-types"
+var external_vue_types_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var external_vue_types_y = x => () => x
+const external_vue_types_namespaceObject = external_vue_types_x({ ["toType"]: () => __WEBPACK_EXTERNAL_MODULE_vue_types_22de060a__.toType });
+;// 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_namespaceObject.PropTypes.string.def(''),
+  fallback: external_shared_namespaceObject.PropTypes.string.def(''),
+  placeholder: external_shared_namespaceObject.PropTypes.any,
+  fit: (0,external_vue_types_namespaceObject.toType)('fit', {}).def(FitEnum.FILL),
+  lazy: external_shared_namespaceObject.PropTypes.bool,
+  urlList: external_shared_namespaceObject.PropTypes.array.def([]),
+  isShowPreviewTitle: external_shared_namespaceObject.PropTypes.bool.def(true),
+  maskClose: external_shared_namespaceObject.PropTypes.bool.def(true),
+  zIndex: external_shared_namespaceObject.PropTypes.number.def(2000)
+};
+var propsImageViever = {
+  urlList: {
+    type: Array,
+    "default": function _default() {
+      return [];
+    }
+  },
+  zIndex: external_shared_namespaceObject.PropTypes.number.def(2000),
+  initialIndex: external_shared_namespaceObject.PropTypes.number.def(0),
+  isShowTitle: external_shared_namespaceObject.PropTypes.bool.def(true),
+  loops: external_shared_namespaceObject.PropTypes.bool.def(true),
+  maskClose: external_shared_namespaceObject.PropTypes.bool.def(true)
+};
+// EXTERNAL MODULE: ../../packages/image/src/image-viewer.less
+var image_viewer = __webpack_require__(5458);
+;// 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_namespaceObject.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_namespaceObject.ref)(true);
+    var hasError = (0,external_vue_namespaceObject.ref)(true);
+    var isShowViewer = (0,external_vue_namespaceObject.ref)(false);
+    var prevOverflow = (0,external_vue_namespaceObject.ref)('');
+    var imageSrc = (0,external_vue_namespaceObject.ref)('');
+
+    function clickHandler() {}
+
+    (0,external_vue_namespaceObject.watch)(function () {
+      return props.src;
+    }, function () {
+      loadImage();
+    });
+    var preview = (0,external_vue_namespaceObject.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;
+    }
+
+    return function () {
+      function getContent() {
+        if (loading.value) {
+          return (0,external_vue_namespaceObject.createVNode)("div", {
+            "class": "bk-image-placeholder"
+          }, [(0,external_vue_namespaceObject.createVNode)(external_icon_namespaceObject.Spinner, null, null)]);
+        }
+
+        if (hasError.value) {
+          if (slots.error) {
+            if (typeof slots.error === 'function') {
+              return slots.error();
+            }
+
+            return slots.error;
+          }
+
+          return (0,external_vue_namespaceObject.createVNode)("div", {
+            "class": "bk-image-placeholder"
+          }, [props.fallback ? (0,external_vue_namespaceObject.createVNode)("img", {
+            "src": props.fallback,
+            "alt": '图片加载错误'
+          }, null) : '', (0,external_vue_namespaceObject.withDirectives)((0,external_vue_namespaceObject.createVNode)("i", {
+            "class": "bk-icon icon-image-fail"
+          }, null), [[(0,external_vue_namespaceObject.resolveDirective)("else")]])]);
+        } // @ts-ignore
+
+
+        return (0,external_vue_namespaceObject.createVNode)("img", {
+          "src": props.src,
+          "onClick": clickHandler,
+          "style": {
+            objectFit: fit
+          }
+        }, null);
+      }
+
+      return (0,external_vue_namespaceObject.createVNode)("div", {
+        "class": "bk-image"
+      }, [getContent(), preview.value && isShowViewer.value ? (0,external_vue_namespaceObject.createVNode)(src_image_viewer, {
+        "zIndex": props.zIndex,
+        "maskClose": props.maskClose,
+        "is-show-title": props.isShowPreviewTitle,
+        "url-list": props.urlList,
+        "onClose": closeViewer,
+        "onChange": change
+      }, null) : '']);
+    };
+  }
+}));
+;// CONCATENATED MODULE: external "lodash"
+var external_lodash_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var external_lodash_y = x => () => x
+const external_lodash_namespaceObject = external_lodash_x({ ["throttle"]: () => __WEBPACK_EXTERNAL_MODULE_lodash__.throttle });
+;// CONCATENATED MODULE: external "../directives"
+var external_directives_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var external_directives_y = x => () => x
+const external_directives_namespaceObject = external_directives_x({ ["bkTooltips"]: () => __WEBPACK_EXTERNAL_MODULE__directives_9cc9ba10__.bkTooltips });
+;// 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 src_image_viewer = ((0,external_vue_namespaceObject.defineComponent)({
+  name: 'ImageViewer',
+  directives: {
+    bkTooltips: external_directives_namespaceObject.bkTooltips
+  },
+  props: propsImageViever,
+  emits: ['close', 'change'],
+  setup: function setup(props, _ref) {
+    var emit = _ref.emit;
+    var scopeEventListener = (0,external_vue_namespaceObject.effectScope)(); // @ts-ignore
+
+    var wrapper = (0,external_vue_namespaceObject.ref)();
+    var imgRefs = (0,external_vue_namespaceObject.ref)([]);
+    var mode = (0,external_vue_namespaceObject.ref)('');
+    var index = (0,external_vue_namespaceObject.ref)(props.initialIndex);
+    var loading = (0,external_vue_namespaceObject.ref)(false);
+    var error = (0,external_vue_namespaceObject.ref)(false);
+    var transform = (0,external_vue_namespaceObject.shallowRef)({
+      scale: 1,
+      deg: 0,
+      offsetX: 0,
+      offsetY: 0,
+      enableTransition: false
+    });
+    var isSingle = (0,external_vue_namespaceObject.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_namespaceObject.computed)(function () {
+      return index.value === 0;
+    });
+    var isLast = (0,external_vue_namespaceObject.computed)(function () {
+      return index.value === props.urlList.length - 1;
+    });
+    var currentImg = (0,external_vue_namespaceObject.computed)(function () {
+      return props.urlList[index.value];
+    });
+    var currentName = (0,external_vue_namespaceObject.computed)(function () {
+      var arr = currentImg.value.split('/');
+      return arr[arr.length - 1];
+    });
+    var imgStyle = (0,external_vue_namespaceObject.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_namespaceObject.computed)(function () {
+      var zIndex = 2000;
+
+      if (props.zIndex) {
+        zIndex = props.zIndex;
+      } else {
+        zIndex += external_shared_namespaceObject.bkZIndexManager.getModalNextIndex() || 1;
+      }
+
+      return {
+        zIndex: zIndex
+      };
+    });
+    var keydownHandler = (0,external_lodash_namespaceObject.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_namespaceObject.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_namespaceObject.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();
+    }
+
+    return function () {
+      return (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Teleport, {
+        "to": 'body'
+      }, {
+        "default": function _default() {
+          return [(0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Transition, null, {
+            "default": function _default() {
+              return [(0,external_vue_namespaceObject.createVNode)("div", {
+                "tabindex": '-1',
+                "ref": 'wrapper',
+                "class": 'bk-image-viewer-wrapper',
+                "style": wrapStyles.value
+              }, [(0,external_vue_namespaceObject.createVNode)("div", {
+                "class": 'bk-image-viewer-mask',
+                "onClick": function onClick() {
+                  props.maskClose && hide();
+                }
+              }, null), props.isShowTitle && props.urlList.length ? (0,external_vue_namespaceObject.createVNode)("div", {
+                "class": 'bk-image-viewer-header'
+              }, [(0,external_vue_namespaceObject.createVNode)("div", null, [currentName]), (0,external_vue_namespaceObject.createVNode)("div", {
+                "class": 'tc '
+              }, [index.value + 1, (0,external_vue_namespaceObject.createTextVNode)("/"), props.urlList.length]), (0,external_vue_namespaceObject.createVNode)("div", {
+                "class": 'quit-box tr'
+              }, [(0,external_vue_namespaceObject.createVNode)("div", {
+                "class": 'quit-tips mr10'
+              }, [(0,external_vue_namespaceObject.createTextVNode)("ESC \u53EF\u4EE5\u9000\u51FA\u5168\u5C4F")]), (0,external_vue_namespaceObject.createVNode)("div", {
+                "class": 'bk-image-viewer-close',
+                "onClick": hide
+              }, [(0,external_vue_namespaceObject.createVNode)(external_icon_namespaceObject.Close, null, null)])])]) : '', !isSingle.value ? (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Fragment, null, [(0,external_vue_namespaceObject.createVNode)("div", {
+                "onClick": prev,
+                "class": "bk-image-viewer-btn bk-image-viewer-prev ".concat(!props.loops && isFirst ? 'is-disabled' : '')
+              }, [(0,external_vue_namespaceObject.createVNode)(external_icon_namespaceObject.AngleLeft, null, null)]), (0,external_vue_namespaceObject.createVNode)("div", {
+                "onClick": next,
+                "class": "bk-image-viewer-btn bk-image-viewer-prev ".concat(!props.loops && isLast ? 'is-disabled' : '')
+              }, [(0,external_vue_namespaceObject.createVNode)(external_icon_namespaceObject.AngleRight, null, null)]), (0,external_vue_namespaceObject.createVNode)("div", {
+                "class": "bk-image-viewer-actions-inner"
+              }, [(0,external_vue_namespaceObject.withDirectives)((0,external_vue_namespaceObject.createVNode)(external_icon_namespaceObject.AngleLeft, {
+                "onClick": function onClick() {
+                  return handleActions('zoomOut');
+                }
+              }, null), [[(0,external_vue_namespaceObject.resolveDirective)("bk-tooltips"), "{content: '提示信息', placement: 'top'}"]]), (0,external_vue_namespaceObject.withDirectives)((0,external_vue_namespaceObject.createVNode)("i", {
+                "class": "",
+                "onClick": function onClick() {
+                  return handleActions('zoomOut');
+                }
+              }, null), [[(0,external_vue_namespaceObject.resolveDirective)("bk-tooltips"), "{content: '提示信息', placement: 'top'}"]]), (0,external_vue_namespaceObject.withDirectives)((0,external_vue_namespaceObject.createVNode)("i", {
+                "class": "bk-icon icon-narrow-line",
+                "onClick": function onClick() {
+                  return handleActions('zoomOut');
+                }
+              }, null), [[(0,external_vue_namespaceObject.resolveDirective)("bk-tooltips"), "{content: '提示信息', placement: 'top'}"]])])]) : '', (0,external_vue_namespaceObject.createVNode)("div", {
+                "class": "bk-image-viewer-canvas ".concat(props.isShowTitle ? 'bk-image-viewer-has-header' : '')
+              }, [error.value ? (0,external_vue_namespaceObject.createVNode)("div", {
+                "class": "bk-image-viewer-error"
+              }, [(0,external_vue_namespaceObject.createVNode)("div", null, [(0,external_vue_namespaceObject.createVNode)("i", {
+                "class": "bk-icon icon-image-fail"
+              }, null)]), (0,external_vue_namespaceObject.createVNode)("div", null, [(0,external_vue_namespaceObject.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_namespaceObject.createVNode)("img", {
+                  "key": i,
+                  "ref": function ref(el) {
+                    return imgRefs[i] = el;
+                  },
+                  "class": "bk-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_namespaceObject.withInstall)(src_image);
+/* harmony default export */ const src = (BkImage);
+})();
+
+var __webpack_exports__Image = __webpack_exports__.Ee;
+var __webpack_exports__ImageViewer = __webpack_exports__.OO;
+var __webpack_exports__default = __webpack_exports__.ZP;
+export { __webpack_exports__Image as Image, __webpack_exports__ImageViewer as ImageViewer, __webpack_exports__default as default };