bkui-vue 2.0.1-beta.3 → 2.0.1-beta.30

package/lib/form/form.variable.css

@@ -1,3 +1,263 @@
+:root {
+  --bk-prefix: bk;
+  --popover-max-height: var(--popover-max-height);
+  --primary-color: var(--primary-color);
+  --success-color: var(--success-color);
+  --warning-color: var(--warning-color);
+  --danger-color: var(--danger-color);
+  --default-color: var(--default-color);
+  --gray-color: var(--gray-color);
+  --light-gray: var(--light-gray);
+  --white-color: var(--white-color);
+  --whitesmoke-color: var(--whitesmoke-color);
+  --disable-color: var(--disable-color);
+  --disable-bg-color: var(--disable-bg-color);
+  --border-color: var(--border-color);
+  --font-size-base: var(--font-size-base);
+  --font-size-medium: var(--font-size-medium);
+  --font-size-large: var(--font-size-large);
+  --line-height-base: var(--line-height-base);
+  --line-height-medium: var(--line-height-medium);
+  --line-height-large: var(--line-height-large);
+  --component-size-small: var(--component-size-small);
+  --component-size-base: var(--component-size-base);
+  --component-size-large: var(--component-size-large);
+  --component-size-small-padding: var(--component-size-small-padding);
+  --component-size-base-padding: var(--component-size-base-padding);
+  --component-size-large-padding: var(--component-size-large-padding);
+  --border-width-base: var(--border-width-base);
+  --border-style-base: var(--border-style-base);
+  --border-radius-base: var(--border-radius-base);
+  --border-style-color: var(--border-style-color);
+  --input-disabled-bg: var(--input-disabled-bg);
+  --input-disabled-border: var(--input-disabled-border);
+  --input-height-base: var(--input-height-base);
+  --input-color: var(--input-color);
+  --input-bg: var(--input-bg);
+  --input-border-color: var(--input-border-color);
+  --input-broder-radius: var(--input-broder-radius);
+  --input-shadow-color: var(--input-shadow-color);
+  --input-horizontal-padding: var(--input-horizontal-padding);
+  --input-block-color: var(--input-block-color);
+  --input-block-hover-color: var(--input-block-hover-color);
+  --input-icon-size: var(--input-icon-size);
+  --input-maxlength-color: var(--input-maxlength-color);
+  --button-primary-hover-color: var(--button-primary-hover-color);
+  --button-danger-hover-color: var(--button-danger-hover-color);
+  --button-success-hover-color: var(--button-success-hover-color);
+  --button-warning-hover-color: var(--button-warning-hover-color);
+  --button-default-hover-border-color: var(--button-default-hover-border-color);
+  --button-primary-active-color: var(--button-primary-active-color);
+  --button-danger-active-color: var(--button-danger-active-color);
+  --button-success-active-color: var(--button-success-active-color);
+  --button-warning-active-color: var(--button-warning-active-color);
+  --button-selected-bg-color: var(--button-selected-bg-color);
+  --button-disabled-selected-bg-color: var(--button-disabled-selected-bg-color);
+  --radio-font-color: var(--radio-font-color);
+  --radio-active-color: var(--radio-active-color);
+  --radio-hover-border-color: var(--radio-hover-border-color);
+  --radio-disabled-border: var(--radio-disabled-border);
+  --radio-disabled-font-color: var(--radio-disabled-font-color);
+  --radio-disabled-checked-bg: var(--radio-disabled-checked-bg);
+  --radio-button-checked-bg: var(--radio-button-checked-bg);
+  --radio-button-disabled-checked-bg: var(--radio-button-disabled-checked-bg);
+  --checkbox-disabled-checked-bg: var(--checkbox-disabled-checked-bg);
+  --fixed-navbar-background: var(--fixed-navbar-background);
+  --fixed-navbar-boxshadow-color: var(--fixed-navbar-boxshadow-color);
+  --switch-default-color: var(--switch-default-color);
+  --switch-grey-color: var(--switch-grey-color);
+  --breadcrumb-black-color: var(--breadcrumb-black-color);
+  --breadcrumb-primary-hover-color: var(--breadcrumb-primary-hover-color);
+  --breadcrumb-fn-main-color: var(--breadcrumb-fn-main-color);
+  --link-default-hover-color: var(--link-default-hover-color);
+  --link-primary-hover-color: var(--link-primary-hover-color);
+  --link-success-hover-color: var(--link-success-hover-color);
+  --link-warning-hover-color: var(--link-warning-hover-color);
+  --link-danger-hover-color: var(--link-danger-hover-color);
+  --link-default-disabled-color: var(--link-default-disabled-color);
+  --link-primary-disabled-color: var(--link-primary-disabled-color);
+  --link-success-disabled-color: var(--link-success-disabled-color);
+  --link-warning-disabled-color: var(--link-warning-disabled-color);
+  --link-danger-disabled-color: var(--link-danger-disabled-color);
+  --message-color: var(--message-color);
+  --message-primary-bg-color: var(--message-primary-bg-color);
+  --message-primary-border-color: var(--message-primary-border-color);
+  --message-primary-shadow-color: var(--message-primary-shadow-color);
+  --message-warning-bg-color: var(--message-warning-bg-color);
+  --message-warning-border-color: var(--message-warning-border-color);
+  --message-warning-shadow-color: var(--message-warning-shadow-color);
+  --message-success-bg-color: var(--message-success-bg-color);
+  --message-success-border-color: var(--message-success-border-color);
+  --message-success-shadow-color: var(--message-success-shadow-color);
+  --message-danger-bg-color: var(--message-danger-bg-color);
+  --message-danger-border-color: var(--message-danger-border-color);
+  --message-danger-shadow-color: var(--message-danger-shadow-color);
+  --slider-default-bg: var(--slider-default-bg);
+  --slider-disable-bar-bg: var(--slider-disable-bar-bg);
+  --menu-bg-color: var(--menu-bg-color);
+  --submenu-bg-color: var(--submenu-bg-color);
+  --menu-active-bg-color: var(--menu-active-bg-color);
+  --menu-color: var(--menu-color);
+  --menu-group-color: var(--menu-group-color);
+  --menu-width: var(--menu-width);
+  --menu-collapse-width: var(--menu-collapse-width);
+  --menu-active-color: var(--menu-active-color);
+  --nav-header-bg-color: var(--nav-header-bg-color);
+  --nav-bg-color: var(--nav-bg-color);
+  --date-picker-disabled-bg: var(--date-picker-disabled-bg);
+  --date-picker-dropdown-mb: var(--date-picker-dropdown-mb);
+  --date-picker-dropdown-bg: var(--date-picker-dropdown-bg);
+  --table-bg-color: var(--table-bg-color);
+  --table-border-color: var(--table-border-color);
+  --table-strip-color: var(--table-strip-color);
+  --table-head-bg-color: var(--table-head-bg-color);
+  --table-head-font-color: var(--table-head-font-color);
+  --table-body-font-color: var(--table-body-font-color);
+  --table-row-hover-bg-color: var(--table-row-hover-bg-color);
+  --table-row-active-bg-color: var(--table-row-active-bg-color);
+  --cascader-panel-border-color: var(--cascader-panel-border-color);
+  --cascader-panel-hover: var(--cascader-panel-hover);
+  --cascader-panel-active: var(--cascader-panel-active);
+  --cascader-panel-disabled-bg: var(--cascader-panel-disabled-bg);
+  --search-select-focus-border-color: var(--search-select-focus-border-color);
+  --search-select-focus-color: var(--search-select-focus-color);
+  --search-select-font-color: var(--search-select-font-color);
+  --search-select-placeholder-color: var(--search-select-placeholder-color);
+  --search-select-message-color: var(--search-select-message-color);
+  --search-select-menu-border-color: var(--search-select-menu-border-color);
+  --select-active-color: var(--select-active-color);
+  --select-hover-color: var(--select-hover-color);
+}
+:root :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;
+  --disable-bg-color: #f9fafd;
+  --border-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;
+  --component-size-small-padding: 0 12px;
+  --component-size-base-padding: 0 14px;
+  --component-size-large-padding: 0 16px;
+  --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: 8px;
+  --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: #3a84ff;
+  --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-strip-color: #fafbfd;
+  --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);
+  --select-active-color: #e1ecff;
+  --select-hover-color: #f5f7fa;
+}
 :root {
   --bk-prefix: bk;
   --popover-max-height: 216px;
@@ -109,9 +369,10 @@
   --date-picker-dropdown-bg: #fff;
   --table-bg-color: var(--white-color);
   --table-border-color: #dcdee5;
+  --table-strip-color: #fafbfd;
   --table-head-bg-color: #fafbfd;
   --table-head-font-color: #313238;
-  --table-body-font-color: #63656E;
+  --table-body-font-color: #63656e;
   --table-row-hover-bg-color: #f5f7fa;
   --table-row-active-bg-color: #f0f1f5;
   --cascader-panel-border-color: #dcdee5;

package/lib/form/index.d.ts

@@ -206,11 +206,6 @@ declare const BkForm: {
         rules: import("vue-types").VueTypeValidableDef<unknown[]> & {
             default: () => unknown[];
         };
-        autoCheck: import("vue-types").VueTypeValidableDef<boolean> & {
-            default: boolean;
-        } & {
-            default: boolean;
-        };
         description: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
         };
@@ -262,11 +257,6 @@ declare const BkForm: {
         rules: import("vue-types").VueTypeValidableDef<unknown[]> & {
             default: () => unknown[];
         };
-        autoCheck: import("vue-types").VueTypeValidableDef<boolean> & {
-            default: boolean;
-        } & {
-            default: boolean;
-        };
         description: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
         };
@@ -282,7 +272,6 @@ declare const BkForm: {
         min: number;
         maxlength: number;
         rules: unknown[];
-        autoCheck: boolean;
         description: string;
         errorDisplayType: string;
     }, {}>;

package/lib/form/index.js

@@ -5,10 +5,10 @@ import * as __WEBPACK_EXTERNAL_MODULE_vue__ from "vue";
 import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_config_provider_fe8577a3__ from "../config-provider";
 import * as __WEBPACK_EXTERNAL_MODULE_lodash_isBoolean_dcb66997__ from "lodash/isBoolean";
 import * as __WEBPACK_EXTERNAL_MODULE_lodash_isString_e6fa8a5b__ from "lodash/isString";
-import * as __WEBPACK_EXTERNAL_MODULE_lodash_get_9427f899__ from "lodash/get";
-import * as __WEBPACK_EXTERNAL_MODULE_lodash_isFunction_f90b20d6__ from "lodash/isFunction";
 import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_directives_45d4776f__ from "../directives";
 import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__ from "../icon";
+import * as __WEBPACK_EXTERNAL_MODULE_lodash_get_9427f899__ from "lodash/get";
+import * as __WEBPACK_EXTERNAL_MODULE_lodash_isFunction_f90b20d6__ from "lodash/isFunction";
 import * as __WEBPACK_EXTERNAL_MODULE_lodash_isDate_b457317b__ from "lodash/isDate";
 import * as __WEBPACK_EXTERNAL_MODULE_lodash_isEmpty_e109fd6b__ from "lodash/isEmpty";
 /******/ // The require scope
@@ -266,7 +266,6 @@ var formEvents = {
   }
 };
 /* harmony default export */ const src_form = ((0,external_vue_namespaceObject.defineComponent)({
-  // eslint-disable-next-line vue/no-reserved-component-names
   name: 'Form',
   props: formProps,
   emits: formEvents,
@@ -420,14 +419,6 @@ function _nonIterableSpread() {
 function _toConsumableArray(arr) {
   return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
 }
-;// CONCATENATED MODULE: external "lodash/get"
-var get_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
-var get_y = x => () => x
-const get_namespaceObject = get_x({ ["default"]: () => __WEBPACK_EXTERNAL_MODULE_lodash_get_9427f899__["default"] });
-;// CONCATENATED MODULE: external "lodash/isFunction"
-var isFunction_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
-var isFunction_y = x => () => x
-const isFunction_namespaceObject = isFunction_x({ ["default"]: () => __WEBPACK_EXTERNAL_MODULE_lodash_isFunction_f90b20d6__["default"] });
 ;// CONCATENATED MODULE: external "../directives"
 var directives_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var directives_y = x => () => x
@@ -436,6 +427,14 @@ const directives_namespaceObject = directives_x({ ["bkTooltips"]: () => __WEBPAC
 var icon_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var icon_y = x => () => x
 const icon_namespaceObject = icon_x({ ["ExclamationCircleShape"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.ExclamationCircleShape });
+;// CONCATENATED MODULE: external "lodash/get"
+var get_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var get_y = x => () => x
+const get_namespaceObject = get_x({ ["default"]: () => __WEBPACK_EXTERNAL_MODULE_lodash_get_9427f899__["default"] });
+;// CONCATENATED MODULE: external "lodash/isFunction"
+var isFunction_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var isFunction_y = x => () => x
+const isFunction_namespaceObject = isFunction_x({ ["default"]: () => __WEBPACK_EXTERNAL_MODULE_lodash_isFunction_f90b20d6__["default"] });
 ;// CONCATENATED MODULE: ../../packages/form/src/utils.ts
 /*
  * Tencent is pleased to support the open source community by making
@@ -580,7 +579,6 @@ var formItemProps = {
   min: shared_namespaceObject.PropTypes.number,
   maxlength: shared_namespaceObject.PropTypes.number,
   rules: shared_namespaceObject.PropTypes.array,
-  autoCheck: shared_namespaceObject.PropTypes.bool.def(false),
   description: shared_namespaceObject.PropTypes.string,
   errorDisplayType: shared_namespaceObject.PropTypes.oneOf(['tooltips', 'normal']).def('normal')
 };
@@ -903,11 +901,11 @@ var isValid = function isValid(value) {
     return (0,external_vue_namespaceObject.createVNode)("div", {
       "class": itemClassees
     }, [this.isShowLabel && (0,external_vue_namespaceObject.createVNode)("div", {
-      "class": "".concat(this.resolveClassName('form-label')),
-      "style": this.labelStyles
+      "style": this.labelStyles,
+      "class": "".concat(this.resolveClassName('form-label'))
     }, [renderLabel(), this.isFormTypeVertical && ((_this$$slots$labelApp = (_this$$slots = this.$slots).labelAppend) === null || _this$$slots$labelApp === void 0 ? void 0 : _this$$slots$labelApp.call(_this$$slots))]), (0,external_vue_namespaceObject.createVNode)("div", {
-      "class": "".concat(this.resolveClassName('form-content')),
-      "style": this.contentStyles
+      "style": this.contentStyles,
+      "class": "".concat(this.resolveClassName('form-content'))
     }, [(_this$$slots$default = (_this$$slots2 = this.$slots)["default"]) === null || _this$$slots$default === void 0 ? void 0 : _this$$slots$default.call(_this$$slots2), renderError()])]);
   }
 }));

package/lib/form/type.d.ts

@@ -18,7 +18,7 @@ export interface IFormItemRule {
     max?: number;
     maxlength?: number;
     pattern?: RegExp;
-    validator?: (any: any) => boolean | Promise<boolean>;
-    message: string | (() => string);
+    validator?: (any: any) => Promise<boolean> | boolean;
+    message: (() => string) | string;
     trigger: 'blur' | 'change';
 }

package/lib/icon/index.d.ts

@@ -1,16 +1,16 @@
 export { default as AngleDoubleDownLine } from '../icon/angle-double-down-line';
-export { default as AngleDoubleLeftLine } from '../icon/angle-double-left-line';
 export { default as AngleDoubleLeft } from '../icon/angle-double-left';
-export { default as AngleDoubleRightLine } from '../icon/angle-double-right-line';
+export { default as AngleDoubleLeftLine } from '../icon/angle-double-left-line';
 export { default as AngleDoubleRight } from '../icon/angle-double-right';
+export { default as AngleDoubleRightLine } from '../icon/angle-double-right-line';
 export { default as AngleDoubleUpLine } from '../icon/angle-double-up-line';
+export { default as AngleDown } from '../icon/angle-down';
 export { default as AngleDownFill } from '../icon/angle-down-fill';
 export { default as AngleDownLine } from '../icon/angle-down-line';
-export { default as AngleDown } from '../icon/angle-down';
 export { default as AngleLeft } from '../icon/angle-left';
 export { default as AngleRight } from '../icon/angle-right';
-export { default as AngleUpFill } from '../icon/angle-up-fill';
 export { default as AngleUp } from '../icon/angle-up';
+export { default as AngleUpFill } from '../icon/angle-up-fill';
 export { default as ArchiveFill } from '../icon/archive-fill';
 export { default as ArrowsLeft } from '../icon/arrows-left';
 export { default as ArrowsRight } from '../icon/arrows-right';
@@ -18,13 +18,13 @@ export { default as Assistant } from '../icon/assistant';
 export { default as AudioFill } from '../icon/audio-fill';
 export { default as Bk } from '../icon/bk';
 export { default as Circle } from '../icon/circle';
-export { default as CloseLine } from '../icon/close-line';
 export { default as Close } from '../icon/close';
+export { default as CloseLine } from '../icon/close-line';
 export { default as Code } from '../icon/code';
 export { default as CogShape } from '../icon/cog-shape';
 export { default as CollapseLeft } from '../icon/collapse-left';
-export { default as CopyShape } from '../icon/copy-shape';
 export { default as Copy } from '../icon/copy';
+export { default as CopyShape } from '../icon/copy-shape';
 export { default as DataShape } from '../icon/data-shape';
 export { default as Del } from '../icon/del';
 export { default as DocFill } from '../icon/doc-fill';
@@ -41,20 +41,20 @@ export { default as Eye } from '../icon/eye';
 export { default as FilliscreenLine } from '../icon/filliscreen-line';
 export { default as FixLine } from '../icon/fix-line';
 export { default as FixShape } from '../icon/fix-shape';
+export { default as Folder } from '../icon/folder';
 export { default as FolderOpen } from '../icon/folder-open';
-export { default as FolderShapeOpen } from '../icon/folder-shape-open';
 export { default as FolderShape } from '../icon/folder-shape';
-export { default as Folder } from '../icon/folder';
+export { default as FolderShapeOpen } from '../icon/folder-shape-open';
 export { default as Funnel } from '../icon/funnel';
 export { default as GragFill } from '../icon/grag-fill';
+export { default as Help } from '../icon/help';
 export { default as HelpDocumentFill } from '../icon/help-document-fill';
 export { default as HelpFill } from '../icon/help-fill';
-export { default as Help } from '../icon/help';
 export { default as ImageFill } from '../icon/image-fill';
 export { default as ImgError } from '../icon/img-error';
 export { default as ImgPlacehoulder } from '../icon/img-placehoulder';
-export { default as InfoLine } from '../icon/info-line';
 export { default as Info } from '../icon/info';
+export { default as InfoLine } from '../icon/info-line';
 export { default as LeftShape } from '../icon/left-shape';
 export { default as LeftTurnLine } from '../icon/left-turn-line';
 export { default as Loading } from '../icon/loading';
@@ -83,5 +83,5 @@ export { default as UpShape } from '../icon/up-shape';
 export { default as Upload } from '../icon/upload';
 export { default as VideoFill } from '../icon/video-fill';
 export { default as Warn } from '../icon/warn';
-export { default as WeixinPro } from '../icon/weixin-pro';
 export { default as Weixin } from '../icon/weixin';
+export { default as WeixinPro } from '../icon/weixin-pro';

package/lib/icon/index.js

@@ -25,18 +25,18 @@ import "../styles/reset.css";
  * IN THE SOFTWARE.
  */
 export { default as AngleDoubleDownLine } from './angle-double-down-line';
-export { default as AngleDoubleLeftLine } from './angle-double-left-line';
 export { default as AngleDoubleLeft } from './angle-double-left';
-export { default as AngleDoubleRightLine } from './angle-double-right-line';
+export { default as AngleDoubleLeftLine } from './angle-double-left-line';
 export { default as AngleDoubleRight } from './angle-double-right';
+export { default as AngleDoubleRightLine } from './angle-double-right-line';
 export { default as AngleDoubleUpLine } from './angle-double-up-line';
+export { default as AngleDown } from './angle-down';
 export { default as AngleDownFill } from './angle-down-fill';
 export { default as AngleDownLine } from './angle-down-line';
-export { default as AngleDown } from './angle-down';
 export { default as AngleLeft } from './angle-left';
 export { default as AngleRight } from './angle-right';
-export { default as AngleUpFill } from './angle-up-fill';
 export { default as AngleUp } from './angle-up';
+export { default as AngleUpFill } from './angle-up-fill';
 export { default as ArchiveFill } from './archive-fill';
 export { default as ArrowsLeft } from './arrows-left';
 export { default as ArrowsRight } from './arrows-right';
@@ -44,13 +44,13 @@ export { default as Assistant } from './assistant';
 export { default as AudioFill } from './audio-fill';
 export { default as Bk } from './bk';
 export { default as Circle } from './circle';
-export { default as CloseLine } from './close-line';
 export { default as Close } from './close';
+export { default as CloseLine } from './close-line';
 export { default as Code } from './code';
 export { default as CogShape } from './cog-shape';
 export { default as CollapseLeft } from './collapse-left';
-export { default as CopyShape } from './copy-shape';
 export { default as Copy } from './copy';
+export { default as CopyShape } from './copy-shape';
 export { default as DataShape } from './data-shape';
 export { default as Del } from './del';
 export { default as DocFill } from './doc-fill';
@@ -67,20 +67,20 @@ export { default as Eye } from './eye';
 export { default as FilliscreenLine } from './filliscreen-line';
 export { default as FixLine } from './fix-line';
 export { default as FixShape } from './fix-shape';
+export { default as Folder } from './folder';
 export { default as FolderOpen } from './folder-open';
-export { default as FolderShapeOpen } from './folder-shape-open';
 export { default as FolderShape } from './folder-shape';
-export { default as Folder } from './folder';
+export { default as FolderShapeOpen } from './folder-shape-open';
 export { default as Funnel } from './funnel';
 export { default as GragFill } from './grag-fill';
+export { default as Help } from './help';
 export { default as HelpDocumentFill } from './help-document-fill';
 export { default as HelpFill } from './help-fill';
-export { default as Help } from './help';
 export { default as ImageFill } from './image-fill';
 export { default as ImgError } from './img-error';
 export { default as ImgPlacehoulder } from './img-placehoulder';
-export { default as InfoLine } from './info-line';
 export { default as Info } from './info';
+export { default as InfoLine } from './info-line';
 export { default as LeftShape } from './left-shape';
 export { default as LeftTurnLine } from './left-turn-line';
 export { default as Loading } from './loading';
@@ -109,5 +109,5 @@ export { default as UpShape } from './up-shape';
 export { default as Upload } from './upload';
 export { default as VideoFill } from './video-fill';
 export { default as Warn } from './warn';
-export { default as WeixinPro } from './weixin-pro';
 export { default as Weixin } from './weixin';
+export { default as WeixinPro } from './weixin-pro';

package/lib/image/image-viewer.css

@@ -1,3 +1,133 @@
+: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;
+  --disable-bg-color: #f9fafd;
+  --border-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;
+  --component-size-small-padding: 0 12px;
+  --component-size-base-padding: 0 14px;
+  --component-size-large-padding: 0 16px;
+  --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: 8px;
+  --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: #3a84ff;
+  --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-strip-color: #fafbfd;
+  --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);
+  --select-active-color: #e1ecff;
+  --select-hover-color: #f5f7fa;
+}
 .bk-image-viewer-wrapper {
   position: fixed;
   top: 0;

package/lib/image/image-viewer.d.ts

@@ -1,4 +1,4 @@
-export type ViewerAction = 'zoomIn' | 'zoomOut' | 'clockwise' | 'anticlockwise';
+export type ViewerAction = 'anticlockwise' | 'clockwise' | 'zoomIn' | 'zoomOut';
 declare const _default: import("vue").DefineComponent<{
     urlList: {
         type: import("vue").PropType<string[]>;