bkui-vue 0.0.2-beta.3 → 0.0.2-beta.31

package/lib/image/image-viewer.less

@@ -1,4 +1,6 @@
-.bk-image-viewer {
+@import '../styles/themes/themes.less';
+
+.@{bk-prefix}-image-viewer {
   &-wrapper {
     position: fixed;
     top: 0;
@@ -101,7 +103,7 @@
     color: #313238;
     text-align: center;
 
-    .bk-icon {
+    .@{bk-prefix}-icon {
       margin-bottom: 15px;
       font-size: 85px;
       line-height: 1;
@@ -133,7 +135,7 @@
       align-items: center;
       justify-content: space-around;
 
-      .bk-icon {
+      .@{bk-prefix}-icon {
         cursor: pointer;
 
         &:hover {

package/lib/image/image-viewer.variable.css

@@ -1,3 +1,125 @@
+:root {
+  --bk-prefix: bk;
+  --popover-max-height: 216px;
+  --primary-color: #3a84ff;
+  --success-color: #2dcb56;
+  --warning-color: #ff9c01;
+  --danger-color: #ea3636;
+  --default-color: #63656e;
+  --gray-color: #979ba5;
+  --light-gray: #c4c6cc;
+  --white-color: white;
+  --whitesmoke-color: #fafbfd;
+  --disable-color: #dcdee5;
+  --font-size-base: 12px;
+  --font-size-medium: 14px;
+  --font-size-large: 16px;
+  --line-height-base: 16px;
+  --line-height-medium: 16px;
+  --line-height-large: 18px;
+  --component-size-small: 26px;
+  --component-size-base: 32px;
+  --component-size-large: 40px;
+  --border-width-base: 1px;
+  --border-style-base: solid;
+  --border-radius-base: 2px;
+  --border-style-color: var(--light-gray);
+  --input-disabled-bg: #fafbfd;
+  --input-disabled-border: var(--disable-color);
+  --input-height-base: var(--component-size-base);
+  --input-color: var(--default-color);
+  --input-bg: white;
+  --input-border-color: var(--light-gray);
+  --input-broder-radius: 3px;
+  --input-shadow-color: #a3c5fd;
+  --input-horizontal-padding: 10px;
+  --input-block-color: #f5f7fa;
+  --input-block-hover-color: #eaebf0;
+  --input-icon-size: var(--font-size-medium);
+  --input-maxlength-color: #979ba5;
+  --button-primary-hover-color: #5594fa;
+  --button-danger-hover-color: #ff5656;
+  --button-success-hover-color: #45e35f;
+  --button-warning-hover-color: #ffb848;
+  --button-default-hover-border-color: #979ba5;
+  --button-primary-active-color: #2c77f4;
+  --button-danger-active-color: #db2626;
+  --button-success-active-color: #1ab943;
+  --button-warning-active-color: #eb9000;
+  --button-selected-bg-color: #e1ecff;
+  --button-disabled-selected-bg-color: #f0f1f5;
+  --radio-font-color: #63656e;
+  --radio-active-color: #5594fa;
+  --radio-hover-border-color: #979ba5;
+  --radio-disabled-border: #dcdee5;
+  --radio-disabled-font-color: #c4c6cc;
+  --radio-disabled-checked-bg: #a3c5fd;
+  --radio-button-checked-bg: #e1ecff;
+  --radio-button-disabled-checked-bg: #fafbfd;
+  --checkbox-disabled-checked-bg: #a3c5fd;
+  --fixed-navbar-background: #fff;
+  --fixed-navbar-boxshadow-color: rgba(0, 0, 0, 0.1);
+  --switch-default-color: #fff;
+  --switch-grey-color: #c4c6cc;
+  --breadcrumb-black-color: #979ba5;
+  --breadcrumb-primary-hover-color: #0082ff;
+  --breadcrumb-fn-main-color: #63656e;
+  --link-default-hover-color: #979ba5;
+  --link-primary-hover-color: #699df4;
+  --link-success-hover-color: #45e35f;
+  --link-warning-hover-color: #ffb848;
+  --link-danger-hover-color: #ff5656;
+  --link-default-disabled-color: #dcdee5;
+  --link-primary-disabled-color: #a3c5fd;
+  --link-success-disabled-color: #94f5a4;
+  --link-warning-disabled-color: #ffd695;
+  --link-danger-disabled-color: #fd9c9c;
+  --message-color: var(--default-color);
+  --message-primary-bg-color: #f0f8ff;
+  --message-primary-border-color: #e1ecff;
+  --message-primary-shadow-color: #e1e8f4;
+  --message-warning-bg-color: #fff4e2;
+  --message-warning-border-color: #ffe8c3;
+  --message-warning-shadow-color: #ede6db;
+  --message-success-bg-color: #f2fff4;
+  --message-success-border-color: #dcffe2;
+  --message-success-shadow-color: #cef0d7;
+  --message-danger-bg-color: #ffeded;
+  --message-danger-border-color: #ffdddd;
+  --message-danger-shadow-color: #f6dada;
+  --slider-default-bg: #dcdee5;
+  --slider-disable-bar-bg: #979ba5;
+  --menu-bg-color: #182132;
+  --submenu-bg-color: #151d2c;
+  --menu-active-bg-color: linear-gradient(90deg, #3f87ff 0%, #3a84ff 100%);
+  --menu-color: #96a2b9;
+  --menu-group-color: var(--default-color);
+  --menu-width: 260px;
+  --menu-collapse-width: 60px;
+  --menu-active-color: white;
+  --nav-header-bg-color: #182132;
+  --nav-bg-color: #182132;
+  --date-picker-disabled-bg: #fafbfd;
+  --date-picker-dropdown-mb: 4px;
+  --date-picker-dropdown-bg: #fff;
+  --table-bg-color: var(--white-color);
+  --table-border-color: #dcdee5;
+  --table-head-bg-color: #fafbfd;
+  --table-head-font-color: #313238;
+  --table-body-font-color: #63656E;
+  --table-row-hover-bg-color: #f5f7fa;
+  --table-row-active-bg-color: #f0f1f5;
+  --cascader-panel-border-color: #dcdee5;
+  --cascader-panel-hover: #f5f7fa;
+  --cascader-panel-active: #e1ecff;
+  --cascader-panel-disabled-bg: #fff;
+  --search-select-focus-border-color: var(--primary-color);
+  --search-select-focus-color: #3c96ff;
+  --search-select-font-color: var(--default-color);
+  --search-select-placeholder-color: var(--light-gray);
+  --search-select-message-color: var(--danger-color);
+  --search-select-menu-border-color: var(--disable-color);
+}
 .bk-image-viewer-wrapper {
   position: fixed;
   top: 0;

package/lib/image/image.css

@@ -1,3 +1,145 @@
+.bk-image-viewer-wrapper {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  background: rgba(0, 0, 0, 0.6);
+  flex-direction: column;
+}
+.bk-image-viewer-mask {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+.bk-image-viewer-header {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 9;
+  display: flex;
+  width: 100%;
+  height: 52px;
+  color: #c4c6cc;
+  background: rgba(0, 0, 0, 0.7);
+  justify-content: space-between;
+  align-items: center;
+}
+.bk-image-viewer-header > div {
+  padding: 0 25px;
+  overflow: hidden;
+  font-size: 14px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+}
+.bk-image-viewer-header .quit-box {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.bk-image-viewer-header .quit-tips {
+  font-size: 14px;
+  color: #979ba5;
+}
+.bk-image-viewer-btn {
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  color: #dcdee5;
+  background-color: rgba(0, 0, 0, 0.3);
+  border-radius: 50%;
+  opacity: 0.8;
+  box-sizing: border-box;
+  user-select: none;
+  align-items: center;
+  justify-content: center;
+}
+.bk-image-viewer-btn:hover {
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+.bk-image-viewer-close {
+  height: 52px;
+  font-size: 32px;
+  line-height: 48px;
+  color: #c4c6cc;
+  text-align: center;
+  cursor: pointer;
+}
+.bk-image-viewer-close:hover {
+  color: #fff;
+}
+.bk-image-viewer-canvas {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+}
+.bk-image-viewer-has-header {
+  padding-top: 52px;
+}
+.bk-image-viewer-error {
+  font-size: 14px;
+  color: #313238;
+  text-align: center;
+}
+.bk-image-viewer-error .bk-icon {
+  margin-bottom: 15px;
+  font-size: 85px;
+  line-height: 1;
+}
+.bk-image-viewer-actions {
+  bottom: 30px;
+  left: 50%;
+  width: 282px;
+  height: 44px;
+  padding: 0 23px;
+  background-color: rgba(0, 0, 0, 0.4);
+  border-color: #fff;
+  border-radius: 22px;
+  transform: translateX(-50%);
+}
+.bk-image-viewer-actions:hover {
+  background: rgba(0, 0, 0, 0.5);
+}
+.bk-image-viewer-actions-inner {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  font-size: 23px;
+  color: #c4c6cc;
+  text-align: justify;
+  align-items: center;
+  justify-content: space-around;
+}
+.bk-image-viewer-actions-inner .bk-icon {
+  cursor: pointer;
+}
+.bk-image-viewer-actions-inner .bk-icon:hover {
+  color: #fff;
+}
+.bk-image-viewer-next,
+.bk-image-viewer-prev {
+  top: 50%;
+  width: 80px;
+  height: 80px;
+  font-size: 40px;
+  cursor: pointer;
+}
+.bk-image-viewer-prev {
+  left: 40px;
+  transform: translateY(-50%);
+}
+.bk-image-viewer-next {
+  right: 40px;
+  text-indent: 2px;
+  transform: translateY(-50%);
+}
 .bk-image {
   position: relative;
   display: inline-block;

package/lib/image/image.d.ts

@@ -1,4 +1,3 @@
-import './image-viewer.less';
 declare const _default: import("vue").DefineComponent<{
     src: import("vue-types").VueTypeValidableDef<string> & {
         default: string;

package/lib/image/image.less

@@ -1,4 +1,7 @@
-.bk-image {
+@import '../styles/themes/themes.less';
+@import './image-viewer.less';
+
+.@{bk-prefix}-image {
   position: relative;
   display: inline-block;
   overflow: hidden;

package/lib/image/image.variable.css

@@ -1,3 +1,267 @@
+:root {
+  --bk-prefix: bk;
+  --popover-max-height: 216px;
+  --primary-color: #3a84ff;
+  --success-color: #2dcb56;
+  --warning-color: #ff9c01;
+  --danger-color: #ea3636;
+  --default-color: #63656e;
+  --gray-color: #979ba5;
+  --light-gray: #c4c6cc;
+  --white-color: white;
+  --whitesmoke-color: #fafbfd;
+  --disable-color: #dcdee5;
+  --font-size-base: 12px;
+  --font-size-medium: 14px;
+  --font-size-large: 16px;
+  --line-height-base: 16px;
+  --line-height-medium: 16px;
+  --line-height-large: 18px;
+  --component-size-small: 26px;
+  --component-size-base: 32px;
+  --component-size-large: 40px;
+  --border-width-base: 1px;
+  --border-style-base: solid;
+  --border-radius-base: 2px;
+  --border-style-color: var(--light-gray);
+  --input-disabled-bg: #fafbfd;
+  --input-disabled-border: var(--disable-color);
+  --input-height-base: var(--component-size-base);
+  --input-color: var(--default-color);
+  --input-bg: white;
+  --input-border-color: var(--light-gray);
+  --input-broder-radius: 3px;
+  --input-shadow-color: #a3c5fd;
+  --input-horizontal-padding: 10px;
+  --input-block-color: #f5f7fa;
+  --input-block-hover-color: #eaebf0;
+  --input-icon-size: var(--font-size-medium);
+  --input-maxlength-color: #979ba5;
+  --button-primary-hover-color: #5594fa;
+  --button-danger-hover-color: #ff5656;
+  --button-success-hover-color: #45e35f;
+  --button-warning-hover-color: #ffb848;
+  --button-default-hover-border-color: #979ba5;
+  --button-primary-active-color: #2c77f4;
+  --button-danger-active-color: #db2626;
+  --button-success-active-color: #1ab943;
+  --button-warning-active-color: #eb9000;
+  --button-selected-bg-color: #e1ecff;
+  --button-disabled-selected-bg-color: #f0f1f5;
+  --radio-font-color: #63656e;
+  --radio-active-color: #5594fa;
+  --radio-hover-border-color: #979ba5;
+  --radio-disabled-border: #dcdee5;
+  --radio-disabled-font-color: #c4c6cc;
+  --radio-disabled-checked-bg: #a3c5fd;
+  --radio-button-checked-bg: #e1ecff;
+  --radio-button-disabled-checked-bg: #fafbfd;
+  --checkbox-disabled-checked-bg: #a3c5fd;
+  --fixed-navbar-background: #fff;
+  --fixed-navbar-boxshadow-color: rgba(0, 0, 0, 0.1);
+  --switch-default-color: #fff;
+  --switch-grey-color: #c4c6cc;
+  --breadcrumb-black-color: #979ba5;
+  --breadcrumb-primary-hover-color: #0082ff;
+  --breadcrumb-fn-main-color: #63656e;
+  --link-default-hover-color: #979ba5;
+  --link-primary-hover-color: #699df4;
+  --link-success-hover-color: #45e35f;
+  --link-warning-hover-color: #ffb848;
+  --link-danger-hover-color: #ff5656;
+  --link-default-disabled-color: #dcdee5;
+  --link-primary-disabled-color: #a3c5fd;
+  --link-success-disabled-color: #94f5a4;
+  --link-warning-disabled-color: #ffd695;
+  --link-danger-disabled-color: #fd9c9c;
+  --message-color: var(--default-color);
+  --message-primary-bg-color: #f0f8ff;
+  --message-primary-border-color: #e1ecff;
+  --message-primary-shadow-color: #e1e8f4;
+  --message-warning-bg-color: #fff4e2;
+  --message-warning-border-color: #ffe8c3;
+  --message-warning-shadow-color: #ede6db;
+  --message-success-bg-color: #f2fff4;
+  --message-success-border-color: #dcffe2;
+  --message-success-shadow-color: #cef0d7;
+  --message-danger-bg-color: #ffeded;
+  --message-danger-border-color: #ffdddd;
+  --message-danger-shadow-color: #f6dada;
+  --slider-default-bg: #dcdee5;
+  --slider-disable-bar-bg: #979ba5;
+  --menu-bg-color: #182132;
+  --submenu-bg-color: #151d2c;
+  --menu-active-bg-color: linear-gradient(90deg, #3f87ff 0%, #3a84ff 100%);
+  --menu-color: #96a2b9;
+  --menu-group-color: var(--default-color);
+  --menu-width: 260px;
+  --menu-collapse-width: 60px;
+  --menu-active-color: white;
+  --nav-header-bg-color: #182132;
+  --nav-bg-color: #182132;
+  --date-picker-disabled-bg: #fafbfd;
+  --date-picker-dropdown-mb: 4px;
+  --date-picker-dropdown-bg: #fff;
+  --table-bg-color: var(--white-color);
+  --table-border-color: #dcdee5;
+  --table-head-bg-color: #fafbfd;
+  --table-head-font-color: #313238;
+  --table-body-font-color: #63656E;
+  --table-row-hover-bg-color: #f5f7fa;
+  --table-row-active-bg-color: #f0f1f5;
+  --cascader-panel-border-color: #dcdee5;
+  --cascader-panel-hover: #f5f7fa;
+  --cascader-panel-active: #e1ecff;
+  --cascader-panel-disabled-bg: #fff;
+  --search-select-focus-border-color: var(--primary-color);
+  --search-select-focus-color: #3c96ff;
+  --search-select-font-color: var(--default-color);
+  --search-select-placeholder-color: var(--light-gray);
+  --search-select-message-color: var(--danger-color);
+  --search-select-menu-border-color: var(--disable-color);
+}
+.bk-image-viewer-wrapper {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  background: rgba(0, 0, 0, 0.6);
+  flex-direction: column;
+}
+.bk-image-viewer-mask {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+.bk-image-viewer-header {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 9;
+  display: flex;
+  width: 100%;
+  height: 52px;
+  color: #c4c6cc;
+  background: rgba(0, 0, 0, 0.7);
+  justify-content: space-between;
+  align-items: center;
+}
+.bk-image-viewer-header > div {
+  padding: 0 25px;
+  overflow: hidden;
+  font-size: 14px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+}
+.bk-image-viewer-header .quit-box {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.bk-image-viewer-header .quit-tips {
+  font-size: 14px;
+  color: #979ba5;
+}
+.bk-image-viewer-btn {
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  color: #dcdee5;
+  background-color: rgba(0, 0, 0, 0.3);
+  border-radius: 50%;
+  opacity: 0.8;
+  box-sizing: border-box;
+  user-select: none;
+  align-items: center;
+  justify-content: center;
+}
+.bk-image-viewer-btn:hover {
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+.bk-image-viewer-close {
+  height: 52px;
+  font-size: 32px;
+  line-height: 48px;
+  color: #c4c6cc;
+  text-align: center;
+  cursor: pointer;
+}
+.bk-image-viewer-close:hover {
+  color: #fff;
+}
+.bk-image-viewer-canvas {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+}
+.bk-image-viewer-has-header {
+  padding-top: 52px;
+}
+.bk-image-viewer-error {
+  font-size: 14px;
+  color: #313238;
+  text-align: center;
+}
+.bk-image-viewer-error .bk-icon {
+  margin-bottom: 15px;
+  font-size: 85px;
+  line-height: 1;
+}
+.bk-image-viewer-actions {
+  bottom: 30px;
+  left: 50%;
+  width: 282px;
+  height: 44px;
+  padding: 0 23px;
+  background-color: rgba(0, 0, 0, 0.4);
+  border-color: #fff;
+  border-radius: 22px;
+  transform: translateX(-50%);
+}
+.bk-image-viewer-actions:hover {
+  background: rgba(0, 0, 0, 0.5);
+}
+.bk-image-viewer-actions-inner {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  font-size: 23px;
+  color: #c4c6cc;
+  text-align: justify;
+  align-items: center;
+  justify-content: space-around;
+}
+.bk-image-viewer-actions-inner .bk-icon {
+  cursor: pointer;
+}
+.bk-image-viewer-actions-inner .bk-icon:hover {
+  color: #fff;
+}
+.bk-image-viewer-next,
+.bk-image-viewer-prev {
+  top: 50%;
+  width: 80px;
+  height: 80px;
+  font-size: 40px;
+  cursor: pointer;
+}
+.bk-image-viewer-prev {
+  left: 40px;
+  transform: translateY(-50%);
+}
+.bk-image-viewer-next {
+  right: 40px;
+  text-indent: 2px;
+  transform: translateY(-50%);
+}
 .bk-image {
   position: relative;
   display: inline-block;

package/lib/image/index.d.ts

@@ -18,8 +18,8 @@ declare const BkImage: {
             style?: unknown;
             onChange?: (...args: any[]) => any;
             onError?: (...args: any[]) => any;
-            key?: string | number | symbol;
             ref?: import("vue").VNodeRef;
+            key?: string | number | symbol;
             ref_for?: boolean;
             ref_key?: string;
             onVnodeBeforeMount?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {

package/lib/image/index.js

@@ -1 +1 @@
-!function(e,n){if("object"==typeof exports&&"object"==typeof module)module.exports=n(require("../shared"),require("vue"),require("../icon"),require("vue-types"),require("lodash"),require("../directives"));else if("function"==typeof define&&define.amd)define(["../shared","vue","../icon","vue-types","lodash","../directives"],n);else{var t="object"==typeof exports?n(require("../shared"),require("vue"),require("../icon"),require("vue-types"),require("lodash"),require("../directives")):n(e["../shared"],e.vue,e["../icon"],e["vue-types"],e.lodash,e["../directives"]);for(var o in t)("object"==typeof exports?exports:e)[o]=t[o]}}(self,((e,n,t,o,r,i)=>(()=>{"use strict";var a={5458:(e,n,t)=>{var o=t(9601),r=t.n(o),i=t(2609);t.n(i)()(r()).push([e.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",""])},2609:e=>{e.exports=function(e){var n=[];return n.toString=function(){return this.map((function(n){var t="",o=void 0!==n[5];return n[4]&&(t+="@supports (".concat(n[4],") {")),n[2]&&(t+="@media ".concat(n[2]," {")),o&&(t+="@layer".concat(n[5].length>0?" ".concat(n[5]):""," {")),t+=e(n),o&&(t+="}"),n[2]&&(t+="}"),n[4]&&(t+="}"),t})).join("")},n.i=function(e,t,o,r,i){"string"==typeof e&&(e=[[null,e,void 0]]);var a={};if(o)for(var l=0;l<this.length;l++){var c=this[l][0];null!=c&&(a[c]=!0)}for(var s=0;s<e.length;s++){var u=[].concat(e[s]);o&&a[u[0]]||(void 0!==i&&(void 0===u[5]||(u[1]="@layer".concat(u[5].length>0?" ".concat(u[5]):""," {").concat(u[1],"}")),u[5]=i),t&&(u[2]?(u[1]="@media ".concat(u[2]," {").concat(u[1],"}"),u[2]=t):u[2]=t),r&&(u[4]?(u[1]="@supports (".concat(u[4],") {").concat(u[1],"}"),u[4]=r):u[4]="".concat(r)),n.push(u))}},n}},9601:e=>{e.exports=function(e){return e[1]}},4061:e=>{e.exports=i},6870:e=>{e.exports=t},4212:n=>{n.exports=e},467:e=>{e.exports=r},748:e=>{e.exports=n},210:e=>{e.exports=o}},l={};function c(e){var n=l[e];if(void 0!==n)return n.exports;var t=l[e]={id:e,exports:{}};return a[e](t,t.exports,c),t.exports}c.n=e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return c.d(n,{a:n}),n},c.d=(e,n)=>{for(var t in n)c.o(n,t)&&!c.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:n[t]})},c.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),c.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var s={};return(()=>{c.r(s),c.d(s,{Image:()=>l,ImageViewer:()=>v,default:()=>f});var e,n=c(4212),t=c(748),o=c(6870),r=c(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:n.PropTypes.string.def(""),fallback:n.PropTypes.string.def(""),placeholder:n.PropTypes.any,fit:(0,r.toType)("fit",{}).def(e.FILL),lazy:n.PropTypes.bool,urlList:n.PropTypes.array.def([]),isShowPreviewTitle:n.PropTypes.bool.def(!0),maskClose:n.PropTypes.bool.def(!0),zIndex:n.PropTypes.number.def(2e3)},a={urlList:{type:Array,default:function(){return[]}},zIndex:n.PropTypes.number.def(2e3),initialIndex:n.PropTypes.number.def(0),isShowTitle:n.PropTypes.bool.def(!0),loops:n.PropTypes.bool.def(!0),maskClose:n.PropTypes.bool.def(!0)};c(5458);const l=(0,t.defineComponent)({name:"Image",props:i,emits:["loaded","error","close","change"],setup:function(e,n){var r=n.emit,i=n.slots,a=(0,t.ref)(!0),l=(0,t.ref)(!0),c=(0,t.ref)(!1),s=(0,t.ref)(""),u=(0,t.ref)("");function d(){}(0,t.watch)((function(){return e.src}),(function(){a.value=!0,l.value=!1,u.value=e.src}));var f=(0,t.computed)((function(){var n;return(null===(n=null==e?void 0:e.urlList)||void 0===n?void 0:n.length)>0}));function p(){document.body.style.overflow=s.value,c.value=!1,r("close")}function m(e){r("change",e)}return function(){return(0,t.createVNode)("div",{class:"bk-image"},[a.value?(0,t.createVNode)("div",{class:"bk-image-placeholder"},[(0,t.createVNode)(o.Spinner,null,null)]):l.value?i.error?"function"==typeof i.error?i.error():i.error:(0,t.createVNode)("div",{class:"bk-image-placeholder"},[e.fallback?(0,t.createVNode)("img",{src:e.fallback,alt:"图片加载错误"},null):"",(0,t.withDirectives)((0,t.createVNode)("i",{class:"bk-icon icon-image-fail"},null),[[(0,t.resolveDirective)("else")]])]):(0,t.createVNode)("img",{src:e.src,onClick:d,style:{objectFit:fit}},null),f.value&&c.value?(0,t.createVNode)(v,{zIndex:e.zIndex,maskClose:e.maskClose,"is-show-title":e.isShowPreviewTitle,"url-list":e.urlList,onClose:p,onChange:m},null):""])}}});var u=c(467),d=c(4061);const v=(0,t.defineComponent)({name:"ImageViewer",directives:{bkTooltips:d.bkTooltips},props:a,emits:["close","change"],setup:function(e,r){var i=r.emit,a=(0,t.effectScope)(),l=(0,t.ref)(),c=(0,t.ref)([]),s=(0,t.ref)(""),d=(0,t.ref)(e.initialIndex),v=(0,t.ref)(!1),f=(0,t.ref)(!1),p=(0,t.shallowRef)({scale:1,deg:0,offsetX:0,offsetY:0,enableTransition:!1}),m=(0,t.computed)((function(){var n;return(null===(n=null==e?void 0:e.urlList)||void 0===n?void 0:n.length)<2})),b=(0,t.computed)((function(){return 0===d.value})),g=(0,t.computed)((function(){return d.value===e.urlList.length-1})),h=(0,t.computed)((function(){return e.urlList[d.value]})),k=(0,t.computed)((function(){var e=h.value.split("/");return e[e.length-1]})),x=(0,t.computed)((function(){var e=p.value,n=e.scale,t=e.deg,o=e.offsetX,r=e.offsetY,i=e.enableTransition,a=o/n,l=r/n;switch(t%360){case 90:case-270:var c=[l,-a];a=c[0],l=c[1];break;case 180:case-180:var u=[-a,-l];a=u[0],l=u[1];break;case 270:case-90:var d=[-l,a];a=d[0],l=d[1]}var v={transform:"scale(".concat(n,") rotate(").concat(t,"deg) translate(").concat(a,"px, ").concat(l,"px)"),transition:i?"transform .3s":""};return"contain"===s.value&&(v.maxWidth="100%",v.maxHeight="100%"),v})),w=(0,t.computed)((function(){var t=2e3;return e.zIndex?t=e.zIndex:t+=n.bkZIndexManager.getModalNextIndex()||1,{zIndex:t}})),y=(0,u.throttle)((function(e){switch(Number(e.code)){case 27:V();break;case 32:v.value||(s.value="original",p.value={scale:1,deg:0,offsetX:0,offsetY:0,enableTransition:!1});break;case 37:T();break;case 38:L("zoomIn");break;case 39:z();break;case 40:L("zoomOut")}})),N=(0,u.throttle)((function(e){L((e.wheelDelta?e.wheelDelta:-e.detail)>0?"zoomIn":"zoomOut",{zoomRate:1.2,enableTransition:!1})}));function V(){document.removeEventListener("keydown",y),document.removeEventListener("mousewheel",N),a.stop(),i("close")}function T(){if(!b.value||e.loops){var n=e.urlList.length;d.value=(d.value-1+n)%n}}function z(){if(!g.value||e.loops){var n=e.urlList.length;d.value=(d.value+1)%n}}function L(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!v.value){var t=Object.assign({zoomRate:.2,rotateDeg:90,enableTransition:!0},n),o=t.zoomRate,r=t.rotateDeg,i=t.enableTransition;switch(e){case"zoomOut":p.value.scale>.2&&(p.value.scale=Number.parseFloat((p.value.scale-o).toFixed(3)));break;case"zoomIn":p.value.scale<7&&(p.value.scale=Number.parseFloat((p.value.scale+o).toFixed(3)));break;case"clockwise":p.value.deg+=r;break;case"anticlockwise":p.value.deg-=r}p.value.enableTransition=i}}function C(){f.value=!1,v.value=!1}function I(e){f.value=!0,v.value=!1,e.target.alt="加载失败"}function j(e){if(!v.value&&0===e.button&&l.value){p.value.enableTransition=!1;var n=p.value,t=n.offsetX,o=n.offsetY,r=e.pageX,i=e.pageY,a=(0,u.throttle)((function(e){p.value=Object.assign(Object.assign({},p.value),{offsetX:t+e.pageX-r,offsetY:o+e.pageY-i})}));document.addEventListener("mousemove",a),document.addEventListener("mouseup",(function e(){document.removeEventListener("mousemove",a),document.removeEventListener("mouseup",e)})),e.preventDefault()}}return a.run((function(){document.addEventListener("keydown",y),document.addEventListener("mousewheel",N)})),function(){return(0,t.createVNode)(t.Teleport,{to:"body"},{default:function(){return[(0,t.createVNode)(t.Transition,null,{default:function(){return[(0,t.createVNode)("div",{tabindex:"-1",ref:"wrapper",class:"bk-image-viewer-wrapper",style:w.value},[(0,t.createVNode)("div",{class:"bk-image-viewer-mask",onClick:function(){e.maskClose&&V()}},null),e.isShowTitle&&e.urlList.length?(0,t.createVNode)("div",{class:"bk-image-viewer-header"},[(0,t.createVNode)("div",null,[k]),(0,t.createVNode)("div",{class:"tc "},[d.value+1,(0,t.createTextVNode)("/"),e.urlList.length]),(0,t.createVNode)("div",{class:"quit-box tr"},[(0,t.createVNode)("div",{class:"quit-tips mr10"},[(0,t.createTextVNode)("ESC 可以退出全屏")]),(0,t.createVNode)("div",{class:"bk-image-viewer-close",onClick:V},[(0,t.createVNode)(o.Close,null,null)])])]):"",m.value?"":(0,t.createVNode)(t.Fragment,null,[(0,t.createVNode)("div",{onClick:T,class:"bk-image-viewer-btn bk-image-viewer-prev ".concat(!e.loops&&b?"is-disabled":"")},[(0,t.createVNode)(o.AngleLeft,null,null)]),(0,t.createVNode)("div",{onClick:z,class:"bk-image-viewer-btn bk-image-viewer-prev ".concat(!e.loops&&g?"is-disabled":"")},[(0,t.createVNode)(o.AngleRight,null,null)]),(0,t.createVNode)("div",{class:"bk-image-viewer-actions-inner"},[(0,t.withDirectives)((0,t.createVNode)(o.AngleLeft,{onClick:function(){return L("zoomOut")}},null),[[(0,t.resolveDirective)("bk-tooltips"),"{content: '提示信息', placement: 'top'}"]]),(0,t.withDirectives)((0,t.createVNode)("i",{class:"",onClick:function(){return L("zoomOut")}},null),[[(0,t.resolveDirective)("bk-tooltips"),"{content: '提示信息', placement: 'top'}"]]),(0,t.withDirectives)((0,t.createVNode)("i",{class:"bk-icon icon-narrow-line",onClick:function(){return L("zoomOut")}},null),[[(0,t.resolveDirective)("bk-tooltips"),"{content: '提示信息', placement: 'top'}"]])])]),(0,t.createVNode)("div",{class:"bk-image-viewer-canvas ".concat(e.isShowTitle?"bk-image-viewer-has-header":"")},[f.value?(0,t.createVNode)("div",{class:"bk-image-viewer-error"},[(0,t.createVNode)("div",null,[(0,t.createVNode)("i",{class:"bk-icon icon-image-fail"},null)]),(0,t.createVNode)("div",null,[(0,t.createTextVNode)("抱歉，图片加载失败")])]):e.urlList.map((function(e,n){return n===d.value?"":(0,t.createVNode)("img",{key:n,ref:function(e){return c[n]=e},class:"bk-image-viewer-img",style:x.value,src:e,onLoad:C,onError:I,onMousedown:j},null)}))])])]}})]}})}}}),f=(0,n.withInstall)(l)})(),s})()));
+!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})()));