bkui-vue 1.0.3-beta.7 → 1.0.3-beta.70

package/lib/modal/modal.less

@@ -2,81 +2,74 @@
 @import '../info-box/info-box.less';
 
 .@{bk-prefix}-modal-ctx {
-  pointer-events: auto;
+  position: fixed;
   top: 0px;
   left: 0px;
-
+  display: none;
   width: 100%;
   height: 100%;
+  pointer-events: auto;
 
-  &.--show {
-    position: fixed;
-  }
-
-  &.--hide {
-    display: none;
-  }
-
-  .@{bk-prefix}-modal-ctx-mask {
-    display: none;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0,0,0,0.6);
-
-    &.--show {
-      position: fixed;
-      display: inherit;
-    }
+  &.is-show {
+    display: block;
   }
 }
 
-
+.@{bk-prefix}-modal-ctx-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.6);
+}
 
 .@{bk-prefix}-modal-wrapper {
   position: absolute;
   top: 50%;
   left: 50%;
-  width: 480px;
   border-radius: 2px;
-  // background: #fff;
   transform: translate(-50%, -50%);
+}
 
-  .@{bk-prefix}-modal-outside {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
-
-  &.normal {
-    width: 480px;
-    height: 240px;
-  }
-
-  &.small {
-    width: 400px;
-    height: 200px;
-  }
+.@{bk-prefix}-modal-outside {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
 
-  &.medium {
-    width: 640px;
-    height: 400px;
-  }
+.@{bk-prefix}-modal-body {
+  height: 100%;
+  overflow: hidden;
+  background: #fff;
+  border-radius: 2px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
 
-  &.large {
-    width: 960px;
-    height: 720px;
-  }
+.@{bk-prefix}-modal-content {
+  max-height: 100vh;
+  overflow: auto;
+  scrollbar-gutter: stable;
+}
 
-  .@{bk-prefix}-modal-body {
-    height: 100%;
-    width: 100%;
-    background: #fff;
-    box-shadow: 0 4px 12px rgba(0,0,0,.15);
+.@{bk-prefix}-modal-close {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  display: flex;
+  width: 32px;
+  height: 32px;
+  font-size: 18px;
+  color: #979ba5;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  transition: 0.15s;
+
+  &:hover {
+    background: #f0f1f5;
   }
 }
-
-

package/lib/modal/modal.variable.css

@@ -12,6 +12,7 @@
   --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;
@@ -123,105 +124,83 @@
   --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-modal-ctx.bk-info-wrapper .bk-modal-wrapper {
+.bk-info-wrapper .bk-modal-wrapper {
   width: 440px;
 }
-.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper.normal {
-  width: 440px;
-}
-.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper.small {
-  width: 400px;
-}
-.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-body {
-  border-radius: 2px;
-}
-.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-dialog-header {
-  padding: 24px 24px 0;
+.bk-info-wrapper .bk-modal-wrapper .bk-dialog-header .bk-dialog-title {
+  margin-top: 16px;
 }
-.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-dialog-header .bk-dialog-title {
-  height: 27px;
-  margin: 15px 0 10px;
-}
-.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-content {
-  height: 100%;
-  max-height: 100%;
-  min-height: 100%;
-  padding: 0 50px 10px;
-  word-break: break-all;
+.bk-info-wrapper .bk-dialog-footer button {
+  min-width: 88px;
 }
-.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-content .bk-info-sub-title {
-  margin-bottom: 10px;
+.bk-info-sub-title {
   text-align: center;
   word-break: break-all;
 }
-.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-footer {
-  padding: 0 65px 33px;
-  background-color: #fff;
-  border-top: none;
-}
-.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-footer .bk-dialog-footer button {
-  min-width: 88px;
-}
 .bk-modal-ctx {
-  pointer-events: auto;
+  position: fixed;
   top: 0px;
   left: 0px;
+  display: none;
   width: 100%;
   height: 100%;
+  pointer-events: auto;
 }
-.bk-modal-ctx.--show {
-  position: fixed;
-}
-.bk-modal-ctx.--hide {
-  display: none;
+.bk-modal-ctx.is-show {
+  display: block;
 }
-.bk-modal-ctx .bk-modal-ctx-mask {
-  display: none;
-  left: 0;
+.bk-modal-ctx-mask {
+  position: fixed;
   top: 0;
+  left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.6);
 }
-.bk-modal-ctx .bk-modal-ctx-mask.--show {
-  position: fixed;
-  display: inherit;
-}
 .bk-modal-wrapper {
   position: absolute;
   top: 50%;
   left: 50%;
-  width: 480px;
   border-radius: 2px;
   transform: translate(-50%, -50%);
 }
-.bk-modal-wrapper .bk-modal-outside {
+.bk-modal-outside {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
 }
-.bk-modal-wrapper.normal {
-  width: 480px;
-  height: 240px;
-}
-.bk-modal-wrapper.small {
-  width: 400px;
-  height: 200px;
-}
-.bk-modal-wrapper.medium {
-  width: 640px;
-  height: 400px;
-}
-.bk-modal-wrapper.large {
-  width: 960px;
-  height: 720px;
-}
-.bk-modal-wrapper .bk-modal-body {
+.bk-modal-body {
   height: 100%;
-  width: 100%;
+  overflow: hidden;
   background: #fff;
+  border-radius: 2px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
+.bk-modal-content {
+  max-height: 100vh;
+  overflow: auto;
+  scrollbar-gutter: stable;
+}
+.bk-modal-close {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  display: flex;
+  width: 32px;
+  height: 32px;
+  font-size: 18px;
+  color: #979ba5;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  transition: 0.15s;
+}
+.bk-modal-close:hover {
+  background: #f0f1f5;
+}

package/lib/modal/props.mixin.d.ts

@@ -60,6 +60,8 @@ export declare const propsMixin: {
     };
     direction: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
+    } & {
+        default: string;
     };
     title: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
@@ -82,10 +84,20 @@ export declare const propsMixin: {
         default: boolean;
     };
     infoType: import("vue-types").VueTypeDef<"success" | "warning" | "danger" | "primary">;
+    bodyClass: (import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    }) | (import("vue-types").VueTypeValidableDef<unknown[]> & {
+        default: () => unknown[];
+    });
     left: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     };
     top: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     };
+    hiddenDelay: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
 };

package/lib/navigation/navigation.variable.css

@@ -12,6 +12,7 @@
   --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;
@@ -123,6 +124,8 @@
   --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-navigation {
   display: flex;

package/lib/notify/notify.variable.css

@@ -12,6 +12,7 @@
   --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;
@@ -123,6 +124,8 @@
   --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-notify {
   position: fixed;

package/lib/pagination/index.js

@@ -253,7 +253,8 @@ function _isSlot(s) {
       "withValidate": false,
       "modelValue": localLimit.value,
       "onChange": handleLimitChange,
-      "disabled": proxy.disabled
+      "disabled": proxy.disabled,
+      "filterable": false
     }, _isSlot(_slot = proxy.limitList.map(function (num, index) {
       return (0,external_vue_namespaceObject.createVNode)(select_namespaceObject.BkOption, {
         "id": num,

package/lib/pagination/pagination.variable.css

@@ -12,6 +12,7 @@
   --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;
@@ -123,6 +124,8 @@
   --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-pagination {
   display: flex;

package/lib/plugin-popover/index.d.ts

@@ -23,5 +23,5 @@
  * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
  * IN THE SOFTWARE.
  */
-import $bkPopover from '../../popover/src/plugin-popover';
+import $bkPopover from '../popover/plugin-popover';
 export default $bkPopover;

package/lib/plugin-popover/index.js

@@ -380,10 +380,13 @@ var EMIT_EVENT_TYPES = _defineProperty(_defineProperty(_defineProperty(_definePr
     };
     var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
       resolveClassName = _usePrefix.resolveClassName;
+    var contentClassName = (0,external_vue_namespaceObject.computed)(function () {
+      return [resolveClassName('popover'), resolveClassName('pop2-content'), props.visible ? 'visible' : 'hidden', props.extCls];
+    });
     return {
       style: style,
       refContent: refContent,
-      resolveClassName: resolveClassName,
+      contentClassName: contentClassName,
       resetPointerEvent: resetPointerEvent,
       setContentPointerEvent: setContentPointerEvent
     };
@@ -398,7 +401,6 @@ var EMIT_EVENT_TYPES = _defineProperty(_defineProperty(_defineProperty(_definePr
       _this$$slots$default2,
       _this$$slots$default3,
       _this$$slots3;
-    var className = [this.resolveClassName('popover'), this.resolveClassName('pop2-content'), this.extCls];
     var resolveContentStyle = function resolveContentStyle(slot) {
       var _slot$;
       if (external_vue_namespaceObject.Fragment === (slot === null || slot === void 0 || (_slot$ = slot[0]) === null || _slot$ === void 0 ? void 0 : _slot$.type)) {
@@ -411,7 +413,7 @@ var EMIT_EVENT_TYPES = _defineProperty(_defineProperty(_defineProperty(_definePr
     };
     var style = resolveContentStyle((_this$$slots$default = (_this$$slots = this.$slots)["default"]) === null || _this$$slots$default === void 0 ? void 0 : _this$$slots$default.call(_this$$slots));
     return (0,external_vue_namespaceObject.createVNode)("div", {
-      "class": className,
+      "class": this.contentClassName,
       "style": style,
       "ref": "refContent"
     }, [(_this$$slots$arrow = (_this$$slots$arrow2 = (_this$$slots2 = this.$slots).arrow) === null || _this$$slots$arrow2 === void 0 ? void 0 : _this$$slots$arrow2.call(_this$$slots2)) !== null && _this$$slots$arrow !== void 0 ? _this$$slots$arrow : '', (_this$$slots$default2 = (_this$$slots$default3 = (_this$$slots3 = this.$slots)["default"]) === null || _this$$slots$default3 === void 0 ? void 0 : _this$$slots$default3.call(_this$$slots3)) !== null && _this$$slots$default2 !== void 0 ? _this$$slots$default2 : '']);
@@ -3085,9 +3087,9 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
     var delay = resolvePopoverDelay()[0];
     // 设置settimeout避免hidePopover导致显示问题
     popShowTimerId = setTimeout(function () {
-      if (popHideTimerId) {
-        clearTimeout(popHideTimerId);
-      }
+      // if (popHideTimerId) {
+      //   clearTimeout(popHideTimerId);
+      // }
       if (!props.disabled) {
         localIsShow.value = true;
       }
@@ -3628,7 +3630,7 @@ function _isSlot(s) {
     (0,external_vue_namespaceObject.onMounted)(onMountedFn);
     (0,external_vue_namespaceObject.onBeforeUnmount)(onUnmountedFn);
     var transBoundary = (0,external_vue_namespaceObject.computed)(function () {
-      return !props.disableTeleport;
+      return localIsShow.value && !props.disableTeleport;
     });
     var show = function show() {
       showFn();
@@ -3767,9 +3769,11 @@ function plugin_popover_objectSpread(e) { for (var r = 1; r < arguments.length;
 
 
 function createPopoverComponent(options) {
+  var _options$immediate;
   var $PopoverInstance = null;
   var $PopoverInstanceVm = null;
   var $PopoverInstanceEl = null;
+  var immediate = (_options$immediate = options.immediate) !== null && _options$immediate !== void 0 ? _options$immediate : true;
   var resolvedOptions = plugin_popover_objectSpread(plugin_popover_objectSpread({
     boundary: 'body',
     placement: 'top',
@@ -3862,37 +3866,52 @@ function createPopoverComponent(options) {
     }
     return document.body;
   }
-  if ($PopoverInstance === null) {
-    $PopoverInstanceEl = document.createElement('div');
-    getBoundaryDom(resolvedOptions.boundary).append($PopoverInstanceEl);
-    $PopoverInstance = (0,external_vue_namespaceObject.createApp)(popoverComponent);
-    $PopoverInstanceVm = $PopoverInstance.mount($PopoverInstanceEl);
-  }
-  function close() {
-    if ($PopoverInstance) {
-      $PopoverInstance.unmount();
-      $PopoverInstanceVm = null;
-      $PopoverInstance = null;
-      $PopoverInstanceEl.remove();
+  var install = function install() {
+    if ($PopoverInstance === null) {
+      $PopoverInstanceEl = document.createElement('div');
+      getBoundaryDom(resolvedOptions.boundary).append($PopoverInstanceEl);
+      $PopoverInstance = (0,external_vue_namespaceObject.createApp)(popoverComponent);
+      $PopoverInstanceVm = $PopoverInstance.mount($PopoverInstanceEl);
     }
+  };
+  var uninstall = function uninstall() {
+    var _$PopoverInstanceEl;
+    if (utils_isElement(options.content)) {
+      options.content.remove();
+    }
+    $PopoverInstance.unmount();
+    $PopoverInstance = null;
+    (_$PopoverInstanceEl = $PopoverInstanceEl) === null || _$PopoverInstanceEl === void 0 || _$PopoverInstanceEl.remove();
+  };
+  function close() {
+    uninstall();
+    $PopoverInstanceVm = null;
   }
-  function show() {
-    var _$PopoverInstanceVm;
-    (_$PopoverInstanceVm = $PopoverInstanceVm) === null || _$PopoverInstanceVm === void 0 || _$PopoverInstanceVm.show();
+  function show(target) {
+    var _$PopoverInstanceVm2;
+    install();
+    if (target) {
+      var _$PopoverInstanceVm;
+      (_$PopoverInstanceVm = $PopoverInstanceVm) === null || _$PopoverInstanceVm === void 0 || _$PopoverInstanceVm.updateTarget(target);
+    }
+    (_$PopoverInstanceVm2 = $PopoverInstanceVm) === null || _$PopoverInstanceVm2 === void 0 || _$PopoverInstanceVm2.show();
   }
   function update(e) {
-    var _$PopoverInstanceVm2;
-    (_$PopoverInstanceVm2 = $PopoverInstanceVm) === null || _$PopoverInstanceVm2 === void 0 || _$PopoverInstanceVm2.updateTarget(e);
+    var _$PopoverInstanceVm3;
+    (_$PopoverInstanceVm3 = $PopoverInstanceVm) === null || _$PopoverInstanceVm3 === void 0 || _$PopoverInstanceVm3.updateTarget(e);
   }
   function hide() {
-    var _$PopoverInstanceVm3;
-    (_$PopoverInstanceVm3 = $PopoverInstanceVm) === null || _$PopoverInstanceVm3 === void 0 || _$PopoverInstanceVm3.hide();
+    var _$PopoverInstanceVm4;
+    (_$PopoverInstanceVm4 = $PopoverInstanceVm) === null || _$PopoverInstanceVm4 === void 0 || _$PopoverInstanceVm4.hide();
   }
+  immediate && install();
   return {
+    install: install,
     close: close,
     show: show,
     hide: hide,
     update: update,
+    uninstall: uninstall,
     get vm() {
       return $PopoverInstanceVm;
     },

package/lib/pop-confirm/index.js

@@ -215,6 +215,13 @@ var PopConfirmProps = {
   },
   render: function render() {
     var _this = this;
+    var titleRender = function titleRender() {
+      return _this.title ? (0,external_vue_namespaceObject.createVNode)("div", {
+        "class": "".concat(_this.resolveClassName('pop-confirm-title'))
+      }, [_this.icon ? (0,external_vue_namespaceObject.createVNode)("span", {
+        "class": "".concat(_this.resolveClassName('pop-confirm-icon'))
+      }, [_this.icon]) : '', (0,external_vue_namespaceObject.createVNode)("span", null, [_this.title])]) : '';
+    };
     return (0,external_vue_namespaceObject.createVNode)(popover_namespaceObject["default"], {
       "ref": "popoverRef",
       "isShow": this.visible,
@@ -232,11 +239,7 @@ var PopConfirmProps = {
       content: function content() {
         return (0,external_vue_namespaceObject.createVNode)("div", {
           "class": "".concat(_this.resolveClassName('pop-confirm'))
-        }, [typeof _this.$slots.content === 'function' ? _this.$slots.content() : (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Fragment, null, [_this.title ? (0,external_vue_namespaceObject.createVNode)("div", {
-          "class": "".concat(_this.resolveClassName('pop-confirm-title'))
-        }, [_this.icon ? (0,external_vue_namespaceObject.createVNode)("span", {
-          "class": "".concat(_this.resolveClassName('pop-confirm-icon'))
-        }, [_this.icon]) : '', (0,external_vue_namespaceObject.createVNode)("span", null, [_this.title])]) : '', (0,external_vue_namespaceObject.createVNode)("div", {
+        }, [typeof _this.$slots.content === 'function' ? (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Fragment, null, [titleRender(), _this.$slots.content()]) : (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Fragment, null, [titleRender(), (0,external_vue_namespaceObject.createVNode)("div", {
           "class": "".concat(_this.resolveClassName('pop-confirm-content'))
         }, [!_this.title ? _this.icon : '', _this.content])]), (0,external_vue_namespaceObject.createVNode)("div", {
           "class": "".concat(_this.resolveClassName('pop-confirm-footer'))

package/lib/pop-confirm/pop-confirm.variable.css

@@ -12,6 +12,7 @@
   --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;
@@ -123,6 +124,8 @@
   --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-popover.bk-pop-confirm-box {
   padding: 16px;

package/lib/popover/content.d.ts

@@ -34,7 +34,7 @@ declare const _default: import("vue").DefineComponent<{
         maxWidth: string | number;
     }>;
     refContent: import("vue").Ref<any>;
-    resolveClassName: (cls: string) => string;
+    contentClassName: import("vue").ComputedRef<string[]>;
     resetPointerEvent: () => void;
     setContentPointerEvent: (val: string) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{