bkui-vue 1.0.3-beta.9 → 2.0.1-beta.10

package/lib/info-box/info-box.css

@@ -1,39 +1,69 @@
-.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper {
-  width: 440px;
+.bk-infobox {
+  font-size: 12px;
 }
-.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper.normal {
-  width: 440px;
+.bk-infobox .bk-modal-wrapper {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
-.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper.small {
-  width: 400px;
+.bk-infobox-header {
+  padding-top: 24px;
 }
-.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-body {
-  border-radius: 2px;
+.bk-infobox-type {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
-.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-dialog-header {
-  padding: 24px 24px 0;
+.bk-infobox-icon {
+  width: 42px;
+  height: 42px;
+  font-size: 42px;
 }
-.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-dialog-header .bk-dialog-title {
-  height: 27px;
-  margin: 15px 0 10px;
+.bk-infobox-icon.success {
+  color: #2dcb56;
 }
-.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-infobox-icon.warning {
+  color: #ff9c01;
 }
-.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-content .bk-info-sub-title {
-  margin-bottom: 10px;
-  text-align: center;
-  word-break: break-all;
+.bk-infobox-icon.danger {
+  color: #ea3636;
 }
-.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-footer {
-  padding: 0 65px 33px;
-  background-color: #fff;
-  border-top: none;
+.bk-infobox-icon.loading {
+  color: #3a84ff;
 }
-.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-footer .bk-dialog-footer button {
+.bk-infobox-title {
+  padding-right: 24px;
+  padding-left: 24px;
+  margin-top: 24px;
+  font-size: 20px;
+  line-height: 32px;
+  color: #313238;
+}
+.bk-infobox-content {
+  padding-right: 24px;
+  padding-left: 24px;
+  margin-top: 16px;
+}
+.bk-infobox-footer {
+  display: flex;
+  padding-right: 24px;
+  padding-bottom: 24px;
+  padding-left: 24px;
+  margin-top: 24px;
+  align-content: center;
+}
+.bk-infobox-footer.is-position-right {
+  justify-content: right;
+}
+.bk-infobox-footer.is-position-center {
+  justify-content: center;
+}
+.bk-infobox-footer.is-position-left {
+  justify-content: left;
+}
+.bk-infobox-footer .bk-button {
   min-width: 88px;
 }
+.bk-infobox-footer .bk-button ~ .bk-button {
+  margin-left: 8px;
+}

package/lib/info-box/info-box.d.ts

@@ -1,33 +1,35 @@
 import { VNode } from 'vue';
-export interface ModalFuncProps {
+export interface Props {
     isShow?: boolean;
-    width?: string | number;
-    height?: string | number;
-    'ext-cls': string | string[];
-    type?: 'primary' | 'warning' | 'success' | 'danger';
-    infoType?: 'success' | 'danger' | 'warning' | 'loading';
-    title?: string | (() => VNode | string) | VNode;
-    subTitle?: string | (() => VNode) | VNode;
-    confirmText?: string | (() => VNode) | VNode;
-    cancelText?: string | (() => VNode) | VNode;
-    onConfirm?: (...args: any[]) => any;
-    onClosed?: (...args: any[]) => any;
-    boundary?: HTMLElement;
-    draggable?: boolean;
-    maskClose?: boolean;
-    escClose?: boolean;
-    closeIcon?: boolean;
-    headerAlign?: 'left' | 'center' | 'right';
-    footerAlign?: 'left' | 'center' | 'right';
-    contentAlign?: 'left' | 'center' | 'right';
-    dialogType?: 'show' | 'operation' | 'confirm';
+    width?: number | string;
+    extCls?: string | string[];
+    class?: string | string[];
+    infoType?: 'danger' | 'loading' | 'success' | 'warning';
+    type?: 'danger' | 'loading' | 'success' | 'warning';
+    title?: (() => VNode | string) | VNode | string;
+    subTitle?: (() => VNode) | VNode | string;
+    content?: (() => VNode) | VNode | string;
+    footer?: (() => VNode) | VNode | string;
+    headerAlign?: 'center' | 'left' | 'right';
+    footerAlign?: 'center' | 'left' | 'right';
+    contentAlign?: 'center' | 'left' | 'right';
     showMask?: boolean;
     quickClose?: boolean;
+    escClose?: boolean;
+    closeIcon?: boolean;
+    confirmText?: (() => VNode) | VNode | string;
+    theme?: 'danger' | 'primary' | 'success' | 'warning';
+    confirmButtonTheme?: 'danger' | 'primary' | 'success' | 'warning';
+    cancelText?: (() => VNode) | VNode | string;
+    beforeClose?: (action: string) => Promise<boolean> | boolean;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+    onClose?: () => void;
 }
-declare const InfoBox: (config: Partial<ModalFuncProps>) => {
+declare const InfoBox: (config: Partial<Props>) => {
     show: () => void;
     hide: () => void;
-    update: (config: Partial<ModalFuncProps>) => void;
+    update: (config: Partial<Props>) => void;
     destroy: () => void;
 };
 export default InfoBox;

package/lib/info-box/info-box.less

@@ -1,55 +1,86 @@
 @import '../styles/themes/themes.less';
-.@{bk-prefix}-modal-ctx {
-  &.@{bk-prefix}-info-wrapper {
-    .@{bk-prefix}-modal-wrapper {
-      width: 440px;
-
-      &.normal {
-        width: 440px;
-      }
-
-      &.small {
-        width: 400px;
-      }
-
-      .@{bk-prefix}-modal-body {
-        border-radius: 2px;
-      }
-
-      .@{bk-prefix}-dialog-header {
-        padding: 24px 24px 0;
-
-        .@{bk-prefix}-dialog-title {
-          height: 27px;
-          margin: 15px 0 10px;
-        }
-      }
-
-      .@{bk-prefix}-modal-content {
-        height: 100%;
-        max-height: 100%;
-        min-height: 100%;
-        padding: 0 50px 10px;
-        word-break: break-all;
-        .@{bk-prefix}-info-sub-title {
-          margin-bottom: 10px;
-          text-align: center;
-          word-break: break-all;
-        }
-      }
-
-      .@{bk-prefix}-modal-footer {
-        padding: 0 65px 33px;
-        background-color: #fff;
-        border-top: none;
-
-        .@{bk-prefix}-dialog-footer {
-          button {
-            min-width: 88px;
-          }
-        }
-      }
-    }
 
+.@{bk-prefix}-infobox {
+  font-size: 12px;
+
+  .@{bk-prefix}-modal-wrapper {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+
+.@{bk-prefix}-infobox-header {
+  padding-top: 24px;
+}
+
+.@{bk-prefix}-infobox-type {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.@{bk-prefix}-infobox-icon {
+  width: 42px;
+  height: 42px;
+  font-size: 42px;
+
+  &.success {
+    color: @success-color;
+  }
+
+  &.warning {
+    color: @warning-color;
+  }
+
+  &.danger {
+    color: @danger-color;
+  }
+
+  &.loading {
+    color: @primary-color;
+  }
+}
+
+.@{bk-prefix}-infobox-title {
+  padding-right: 24px;
+  padding-left: 24px;
+  margin-top: 24px;
+  font-size: 20px;
+  line-height: 32px;
+  color: #313238;
+}
+
+.@{bk-prefix}-infobox-content {
+  padding-right: 24px;
+  padding-left: 24px;
+  margin-top: 16px;
+}
+
+.@{bk-prefix}-infobox-footer {
+  display: flex;
+  padding-right: 24px;
+  padding-bottom: 24px;
+  padding-left: 24px;
+  margin-top: 24px;
+  align-content: center;
+
+  &.is-position-right {
+    justify-content: right;
+  }
+
+  &.is-position-center {
+    justify-content: center;
+  }
+
+  &.is-position-left {
+    justify-content: left;
+  }
+
+  .@{bk-prefix}-button {
+    min-width: 88px;
+    & ~ .@{bk-prefix}-button {
+      margin-left: 8px;
+    }
   }
 }

package/lib/info-box/info-box.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,43 +124,75 @@
   --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 {
-  width: 440px;
+.bk-infobox {
+  font-size: 12px;
 }
-.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper.normal {
-  width: 440px;
+.bk-infobox .bk-modal-wrapper {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
-.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper.small {
-  width: 400px;
+.bk-infobox-header {
+  padding-top: 24px;
 }
-.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-body {
-  border-radius: 2px;
+.bk-infobox-type {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
-.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-dialog-header {
-  padding: 24px 24px 0;
+.bk-infobox-icon {
+  width: 42px;
+  height: 42px;
+  font-size: 42px;
 }
-.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-dialog-header .bk-dialog-title {
-  height: 27px;
-  margin: 15px 0 10px;
+.bk-infobox-icon.success {
+  color: var(--success-color);
 }
-.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-infobox-icon.warning {
+  color: var(--warning-color);
 }
-.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-content .bk-info-sub-title {
-  margin-bottom: 10px;
-  text-align: center;
-  word-break: break-all;
+.bk-infobox-icon.danger {
+  color: var(--danger-color);
 }
-.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-footer {
-  padding: 0 65px 33px;
-  background-color: #fff;
-  border-top: none;
+.bk-infobox-icon.loading {
+  color: var(--primary-color);
 }
-.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-footer .bk-dialog-footer button {
+.bk-infobox-title {
+  padding-right: 24px;
+  padding-left: 24px;
+  margin-top: 24px;
+  font-size: 20px;
+  line-height: 32px;
+  color: #313238;
+}
+.bk-infobox-content {
+  padding-right: 24px;
+  padding-left: 24px;
+  margin-top: 16px;
+}
+.bk-infobox-footer {
+  display: flex;
+  padding-right: 24px;
+  padding-bottom: 24px;
+  padding-left: 24px;
+  margin-top: 24px;
+  align-content: center;
+}
+.bk-infobox-footer.is-position-right {
+  justify-content: right;
+}
+.bk-infobox-footer.is-position-center {
+  justify-content: center;
+}
+.bk-infobox-footer.is-position-left {
+  justify-content: left;
+}
+.bk-infobox-footer .bk-button {
   min-width: 88px;
 }
+.bk-infobox-footer .bk-button ~ .bk-button {
+  margin-left: 8px;
+}

package/lib/info-box/render-component.d.ts

@@ -0,0 +1,4 @@
+import type { Props } from './info-box';
+export declare const genDefaultState: () => Required<Props>;
+declare const _default: import("vue").DefineComponent<{}, () => JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/lib/input/index.d.ts

@@ -99,8 +99,8 @@ declare const BkInput: {
         } & {
             default: boolean;
         };
-        autosize: import("vue-types").VueTypeDef<Boolean | import("./input").InputAutoSize> & {
-            default: (() => Boolean) | (() => import("./input").InputAutoSize);
+        autosize: import("vue-types").VueTypeDef<boolean | import("./input").InputAutoSize> & {
+            default: boolean | (() => import("./input").InputAutoSize);
         };
         stopPropagation: import("vue-types").VueTypeValidableDef<boolean> & {
             default: boolean;
@@ -120,8 +120,8 @@ declare const BkInput: {
         onKeypress?: (_value: any, _evt: KeyboardEvent) => any;
         onKeyup?: (_value: any, _evt: KeyboardEvent) => any;
         onClear?: () => any;
-        "onUpdate:modelValue"?: (_value: any, _evt: KeyboardEvent) => any;
         onEnter?: (_value: any, _evt: KeyboardEvent) => any;
+        "onUpdate:modelValue"?: (_value: any, _evt: KeyboardEvent) => any;
     }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
         "update:modelValue": (_value: any, _evt: KeyboardEvent) => any;
         focus: (evt: FocusEvent) => FocusEvent;
@@ -237,8 +237,8 @@ declare const BkInput: {
         } & {
             default: boolean;
         };
-        autosize: import("vue-types").VueTypeDef<Boolean | import("./input").InputAutoSize> & {
-            default: (() => Boolean) | (() => import("./input").InputAutoSize);
+        autosize: import("vue-types").VueTypeDef<boolean | import("./input").InputAutoSize> & {
+            default: boolean | (() => import("./input").InputAutoSize);
         };
         stopPropagation: import("vue-types").VueTypeValidableDef<boolean> & {
             default: boolean;
@@ -258,8 +258,8 @@ declare const BkInput: {
         onKeypress?: (_value: any, _evt: KeyboardEvent) => any;
         onKeyup?: (_value: any, _evt: KeyboardEvent) => any;
         onClear?: () => any;
-        "onUpdate:modelValue"?: (_value: any, _evt: KeyboardEvent) => any;
         onEnter?: (_value: any, _evt: KeyboardEvent) => any;
+        "onUpdate:modelValue"?: (_value: any, _evt: KeyboardEvent) => any;
     }, {
         type: string;
         prefix: string;
@@ -286,7 +286,7 @@ declare const BkInput: {
         withValidate: boolean;
         overMaxLengthLimit: boolean;
         showOverflowTooltips: boolean;
-        autosize: Boolean | import("./input").InputAutoSize;
+        autosize: boolean | import("./input").InputAutoSize;
         stopPropagation: boolean;
     }, true, {}, {}, {
         P: {};
@@ -395,8 +395,8 @@ declare const BkInput: {
         } & {
             default: boolean;
         };
-        autosize: import("vue-types").VueTypeDef<Boolean | import("./input").InputAutoSize> & {
-            default: (() => Boolean) | (() => import("./input").InputAutoSize);
+        autosize: import("vue-types").VueTypeDef<boolean | import("./input").InputAutoSize> & {
+            default: boolean | (() => import("./input").InputAutoSize);
         };
         stopPropagation: import("vue-types").VueTypeValidableDef<boolean> & {
             default: boolean;
@@ -416,8 +416,8 @@ declare const BkInput: {
         onKeypress?: (_value: any, _evt: KeyboardEvent) => any;
         onKeyup?: (_value: any, _evt: KeyboardEvent) => any;
         onClear?: () => any;
-        "onUpdate:modelValue"?: (_value: any, _evt: KeyboardEvent) => any;
         onEnter?: (_value: any, _evt: KeyboardEvent) => any;
+        "onUpdate:modelValue"?: (_value: any, _evt: KeyboardEvent) => any;
     }, () => JSX.Element, {}, {}, {}, {
         type: string;
         prefix: string;
@@ -444,7 +444,7 @@ declare const BkInput: {
         withValidate: boolean;
         overMaxLengthLimit: boolean;
         showOverflowTooltips: boolean;
-        autosize: Boolean | import("./input").InputAutoSize;
+        autosize: boolean | import("./input").InputAutoSize;
         stopPropagation: boolean;
     }>;
     __isFragment?: never;
@@ -550,8 +550,8 @@ declare const BkInput: {
     } & {
         default: boolean;
     };
-    autosize: import("vue-types").VueTypeDef<Boolean | import("./input").InputAutoSize> & {
-        default: (() => Boolean) | (() => import("./input").InputAutoSize);
+    autosize: import("vue-types").VueTypeDef<boolean | import("./input").InputAutoSize> & {
+        default: boolean | (() => import("./input").InputAutoSize);
     };
     stopPropagation: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
@@ -571,8 +571,8 @@ declare const BkInput: {
     onKeypress?: (_value: any, _evt: KeyboardEvent) => any;
     onKeyup?: (_value: any, _evt: KeyboardEvent) => any;
     onClear?: () => any;
-    "onUpdate:modelValue"?: (_value: any, _evt: KeyboardEvent) => any;
     onEnter?: (_value: any, _evt: KeyboardEvent) => any;
+    "onUpdate:modelValue"?: (_value: any, _evt: KeyboardEvent) => any;
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (_value: any, _evt: KeyboardEvent) => any;
     focus: (evt: FocusEvent) => FocusEvent;
@@ -614,7 +614,7 @@ declare const BkInput: {
     withValidate: boolean;
     overMaxLengthLimit: boolean;
     showOverflowTooltips: boolean;
-    autosize: Boolean | import("./input").InputAutoSize;
+    autosize: boolean | import("./input").InputAutoSize;
     stopPropagation: boolean;
 }, {}, string, {}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("vue").Plugin<any[]>;
 export default BkInput;

package/lib/input/index.js

@@ -776,20 +776,20 @@ var inputType = {
 };
 var EVENTS;
 (function (EVENTS) {
-  EVENTS["UPDATE"] = "update:modelValue";
-  EVENTS["FOCUS"] = "focus";
   EVENTS["BLUR"] = "blur";
   EVENTS["CHANGE"] = "change";
   EVENTS["CLEAR"] = "clear";
+  EVENTS["COMPOSITIONEND"] = "compositionend";
+  EVENTS["COMPOSITIONSTART"] = "compositionstart";
+  EVENTS["COMPOSITIONUPDATE"] = "compositionupdate";
+  EVENTS["ENTER"] = "enter";
+  EVENTS["FOCUS"] = "focus";
   EVENTS["INPUT"] = "input";
-  EVENTS["KEYPRESS"] = "keypress";
   EVENTS["KEYDOWN"] = "keydown";
+  EVENTS["KEYPRESS"] = "keypress";
   EVENTS["KEYUP"] = "keyup";
-  EVENTS["ENTER"] = "enter";
   EVENTS["PASTE"] = "paste";
-  EVENTS["COMPOSITIONSTART"] = "compositionstart";
-  EVENTS["COMPOSITIONUPDATE"] = "compositionupdate";
-  EVENTS["COMPOSITIONEND"] = "compositionend";
+  EVENTS["UPDATE"] = "update:modelValue";
 })(EVENTS || (EVENTS = {}));
 function EventFunction(_value, _evt) {
   return true;
@@ -881,8 +881,8 @@ var inputEmitEventsType = (_inputEmitEventsType = {}, _defineProperty(_definePro
       },
       password: function password() {
         return (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Unvisible, {
-          "onClick": handleVisibleChange,
-          "class": suffixCls
+          "class": suffixCls,
+          "onClick": handleVisibleChange
         }, null);
       }
     };
@@ -948,8 +948,14 @@ var inputEmitEventsType = (_inputEmitEventsType = {}, _defineProperty(_definePro
       });
     });
     var tooltips = (0,external_vue_namespaceObject.computed)(function () {
+      var _props$modelValue2;
+      if (showMaxLimit.value && ceilMaxLength.value - modelValueLength.value === 0) {
+        return {
+          content: t.value.maxlengthLimitTips
+        };
+      }
       return props.showOverflowTooltips && isOverflow.value && props.modelValue ? {
-        content: props.modelValue,
+        content: (_props$modelValue2 = props.modelValue) === null || _props$modelValue2 === void 0 ? void 0 : _props$modelValue2.toString(),
         sameWidth: true
       } : {
         disabled: true
@@ -1155,8 +1161,8 @@ var inputEmitEventsType = (_inputEmitEventsType = {}, _defineProperty(_definePro
     return function () {
       var _ctx$slots$prefix, _ctx$slots, _ctx$slots$prefix2, _ctx$slots$suffix, _ctx$slots2, _ctx$slots2$suffix;
       return (0,external_vue_namespaceObject.withDirectives)((0,external_vue_namespaceObject.createVNode)("div", {
-        "class": inputCls.value,
-        "style": style
+        "style": style,
+        "class": inputCls.value
       }, [(_ctx$slots$prefix = (_ctx$slots = ctx.slots) === null || _ctx$slots === void 0 || (_ctx$slots$prefix2 = _ctx$slots.prefix) === null || _ctx$slots$prefix2 === void 0 ? void 0 : _ctx$slots$prefix2.call(_ctx$slots)) !== null && _ctx$slots$prefix !== void 0 ? _ctx$slots$prefix : props.prefix && (0,external_vue_namespaceObject.createVNode)("div", {
         "class": getCls('prefix-area')
       }, [(0,external_vue_namespaceObject.createVNode)("span", {
@@ -1165,17 +1171,17 @@ var inputEmitEventsType = (_inputEmitEventsType = {}, _defineProperty(_definePro
         "ref": inputRef,
         "spellcheck": false
       }, inputAttrs, eventListener, bindProps.value, {
-        "rows": props.rows,
-        "style": textareaCalcStyle.value
+        "style": textareaCalcStyle.value,
+        "rows": props.rows
       }, innerInputValue.value), null) : (0,external_vue_namespaceObject.createVNode)("input", (0,external_vue_namespaceObject.mergeProps)({
         "spellcheck": false
       }, inputAttrs, {
         "ref": inputRef,
         "class": "".concat(inputClsPrefix.value, "--text"),
-        "type": pwdVisible.value && props.type === 'password' ? 'text' : props.type,
-        "step": props.step,
         "max": props.max,
-        "min": props.min
+        "min": props.min,
+        "step": props.step,
+        "type": pwdVisible.value && props.type === 'password' ? 'text' : props.type
       }, eventListener, bindProps.value, innerInputValue.value), null), !isTextArea.value && props.clearable && !!props.modelValue && (0,external_vue_namespaceObject.createVNode)("span", {
         "class": clearCls.value,
         "onClick": clear