bkui-vue 2.0.1-beta.10 → 2.0.1-beta.101

package/lib/cascader/index.js

@@ -510,15 +510,16 @@ function useRegistry(data) {
   // 注册item
   var register = function register(key, item) {
     if (!item) return;
-    if (data.value.has(key)) {
-      // console.warn(`repeat ${key}`, item);
-      return;
-    }
     return data.value.set(key, item);
   };
   // 删除item
-  var unregister = function unregister(key) {
-    data.value["delete"](key);
+  var unregister = function unregister(key, item) {
+    if (item) {
+      if (data.value.get(key) !== item) return;
+      data.value["delete"](key);
+    } else {
+      data.value["delete"](key);
+    }
   };
   return {
     register: register,
@@ -535,6 +536,7 @@ function useDebouncedRef(value) {
         track();
         return innerValue;
       },
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       set: function set(newValue) {
         clearTimeout(timeout);
         if (newValue === undefined || newValue === '') {
@@ -672,7 +674,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * IN THE SOFTWARE.
  */
 
-var INPUT_MIN_WIDTH = 12;
+var INPUT_MIN_WIDTH = 10;
 function common_useDebouncedRef(value) {
   var delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 200;
   var timeout;
@@ -867,6 +869,10 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 
 
 
+/**
+ * CascaderPanel 组件
+ * 用于展示级联选择器的面板，支持多选、单选、远程加载等功能。
+ */
 /* harmony default export */ const cascader_panel = ((0,external_vue_namespaceObject.defineComponent)({
   name: 'CascaderPanel',
   props: {
@@ -891,6 +897,11 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
     });
     var activePath = (0,external_vue_namespaceObject.ref)([]);
     var checkValue = (0,external_vue_namespaceObject.ref)([]);
+    /**
+     * 根据传入的值计算尺寸
+     * @param value - 数字或字符串类型的尺寸值
+     * @returns 带单位的尺寸字符串
+     */
     var getSizeComputed = function getSizeComputed(value) {
       if (typeof value === 'number') {
         return "".concat(value, "px");
@@ -899,6 +910,10 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
     };
     var panelHeight = getSizeComputed(props.height);
     var panelWidth = getSizeComputed(props.width);
+    /**
+     * 更新选中的值
+     * @param value - 选中的值数组
+     */
     var updateCheckValue = function updateCheckValue(value) {
       if (value.length === 0) {
         menus.list = menus.list.slice(0, 1);
@@ -907,6 +922,10 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
       expandByNodeList(value);
       checkValue.value = value;
     };
+    /**
+     * 根据节点列表展开菜单
+     * @param value - 节点ID数组
+     */
     var expandByNodeList = function expandByNodeList(value) {
       var targetList = [];
       // 如果配置了多选，找出最长的序列，即其最远的路径，以展开所有面板
@@ -978,6 +997,11 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
         store.config.remoteMethod(node, updateNodes);
       }
     };
+    /**
+     * 生成节点事件
+     * @param node - 节点对象
+     * @returns 事件对象
+     */
     var nodeEvent = function nodeEvent(node) {
       var _node$config = node.config,
         trigger = _node$config.trigger,
@@ -996,6 +1020,11 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
       };
       return events;
     };
+    /**
+     * 搜索面板事件
+     * @param node - 节点对象
+     * @returns 事件对象
+     */
     var searchPanelEvents = function searchPanelEvents(node) {
       var multiple = node.config.multiple;
       var events = {
@@ -1011,12 +1040,38 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
       };
       return events;
     };
+    /**
+     * 滚动到选中的节点
+     */
+    var scrollToSelected = function scrollToSelected() {
+      // 遍历每个级别的菜单
+      menus.list.forEach(function (_menu, level) {
+        // 查找当前级别中选中的或已勾选的节点
+        var selectedNode = document.querySelector(".".concat(resolveClassName('cascader-panel'), ":nth-child(").concat(level + 1, ") .").concat(resolveClassName('cascader-node.is-selected'), ", .").concat(resolveClassName('cascader-node.is-checked')));
+        if (selectedNode) {
+          (0,external_vue_namespaceObject.nextTick)(function () {
+            selectedNode.scrollIntoView();
+          });
+        }
+      });
+    };
     var noDataText = t.value.noData;
     var emptyText = t.value.emptyText;
+    /**
+     * 判断节点是否在路径中
+     * @param node - 节点对象
+     * @returns 布尔值，表示节点是否在路径中
+     */
     var isNodeInPath = function isNodeInPath(node) {
       var currentLevel = activePath.value[node.level - 1] || {};
       return currentLevel.id === node.id;
     };
+    /**
+     * 判断节点是否被选中
+     * @param node - 节点对象
+     * @param checkValue - 选中值数组
+     * @returns 布尔值，表示节点是否被选中
+     */
     var isCheckedNode = function isCheckedNode(node, checkValue) {
       var multiple = node.config.multiple;
       if (multiple) {
@@ -1031,6 +1086,11 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
       node.setNodeCheck(value ? value : false);
       nodeCheckHandler(node);
     };
+    /**
+     * 渲染节点图标
+     * @param node - 节点对象
+     * @returns 图标组件
+     */
     var iconRender = function iconRender(node) {
       return node.loading ? (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Spinner, {
         "class": resolveClassName('icon-spinner')
@@ -1038,6 +1098,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
         "class": resolveClassName('icon-angle-right')
       }, null);
     };
+    // 监听 modelValue 的变化，更新选中值
     (0,external_vue_namespaceObject.watch)(function () {
       return props.modelValue;
     }, function (value) {
@@ -1045,6 +1106,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
     }, {
       immediate: true
     });
+    // 监听 store 的变化，更新菜单列表
     (0,external_vue_namespaceObject.watch)(function () {
       return props.store;
     }, function (value) {
@@ -1066,7 +1128,8 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
       expandByNodeList: expandByNodeList,
       noDataText: noDataText,
       emptyText: emptyText,
-      resolveClassName: resolveClassName
+      resolveClassName: resolveClassName,
+      scrollToSelected: scrollToSelected
     };
   },
   render: function render() {
@@ -1582,6 +1645,10 @@ var Store = /*#__PURE__*/function () {
 
 
 
+/**
+ * Cascader 组件
+ * 用于展示级联选择器，支持多选、单选、搜索、远程加载等功能。
+ */
 /* harmony default export */ const cascader = ((0,external_vue_namespaceObject.defineComponent)({
   name: 'Cascader',
   directives: {
@@ -1777,6 +1844,10 @@ var Store = /*#__PURE__*/function () {
       (0,external_vue_namespaceObject.nextTick)(function () {
         var _inputRef$value2;
         val && ((_inputRef$value2 = inputRef.value) === null || _inputRef$value2 === void 0 ? void 0 : _inputRef$value2.focus());
+        if (val.isShow) {
+          var _cascaderPanel$value;
+          (_cascaderPanel$value = cascaderPanel.value) === null || _cascaderPanel$value === void 0 || _cascaderPanel$value.scrollToSelected(); // 滚动到选中的节点
+        }
       });
       val.isShow && focusEmitter(); // 面板打开，触发focus事件
       // 面板收起，搜索状态关闭

package/lib/checkbox/checkbox-group.d.ts

@@ -1,10 +1,5 @@
 import type { ExtractPropTypes } from 'vue';
 declare const checkboxGroupProps: {
-    name: import("vue-types").VueTypeValidableDef<string> & {
-        default: string;
-    } & {
-        default: string;
-    };
     modelValue: import("vue-types").VueTypeValidableDef<unknown[]> & {
         default: () => unknown[];
     };
@@ -19,11 +14,6 @@ declare const checkboxGroupProps: {
 };
 export type CheckboxGroupProps = Readonly<ExtractPropTypes<typeof checkboxGroupProps>>;
 declare const _default: import("vue").DefineComponent<{
-    name: import("vue-types").VueTypeValidableDef<string> & {
-        default: string;
-    } & {
-        default: string;
-    };
     modelValue: import("vue-types").VueTypeValidableDef<unknown[]> & {
         default: () => unknown[];
     };
@@ -41,11 +31,6 @@ declare const _default: import("vue").DefineComponent<{
     'update:modelValue': (value: any[]) => boolean;
     change: (value: any[]) => boolean;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
-    name: import("vue-types").VueTypeValidableDef<string> & {
-        default: string;
-    } & {
-        default: string;
-    };
     modelValue: import("vue-types").VueTypeValidableDef<unknown[]> & {
         default: () => unknown[];
     };
@@ -61,7 +46,6 @@ declare const _default: import("vue").DefineComponent<{
     onChange?: (value: any[]) => any;
     "onUpdate:modelValue"?: (value: any[]) => any;
 }, {
-    name: string;
     disabled: boolean;
     modelValue: unknown[];
     withValidate: boolean;

package/lib/checkbox/checkbox.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-checkbox-group {
   display: inline-flex;
   letter-spacing: normal;
@@ -15,9 +145,17 @@
 .bk-checkbox ~ .bk-checkbox {
   margin-left: 24px;
 }
+.bk-checkbox.is-checked.is-outline .bk-checkbox-input {
+  background: #fff;
+}
+.bk-checkbox.is-checked.is-outline .bk-checkbox-input::after {
+  border: 2px solid var(--primary-color);
+  border-top: 0;
+  border-left: 0;
+}
 .bk-checkbox.is-checked .bk-checkbox-input {
-  background: #3a84ff;
-  border-color: #3a84ff;
+  background: var(--primary-color);
+  border-color: var(--primary-color);
   transition: all 0.1s;
 }
 .bk-checkbox.is-checked .bk-checkbox-input.small::after {
@@ -38,8 +176,8 @@
   transform-origin: center;
 }
 .bk-checkbox.is-indeterminated .bk-checkbox-input {
-  background: #3a84ff;
-  border-color: #3a84ff;
+  background: var(--primary-color);
+  border-color: var(--primary-color);
   transition: all 0.1s;
 }
 .bk-checkbox.is-indeterminated .bk-checkbox-input.small::after {
@@ -64,17 +202,17 @@
 }
 .bk-checkbox.is-disabled .bk-checkbox-input {
   background: #fafbfd;
-  border-color: #dcdee5;
+  border-color: var(--disable-color);
 }
 .bk-checkbox.is-disabled .bk-checkbox-input::after {
-  background: #dcdee5;
+  background: var(--disable-color);
 }
 .bk-checkbox.is-disabled.is-checked .bk-checkbox-input {
-  background: #a3c5fd;
-  border-color: #a3c5fd;
+  background: var(--checkbox-disabled-checked-bg);
+  border-color: var(--checkbox-disabled-checked-bg);
 }
 .bk-checkbox.is-disabled.is-checked .bk-checkbox-input::after {
-  background: #a3c5fd;
+  background: var(--checkbox-disabled-checked-bg);
 }
 .bk-checkbox.is-prechecking {
   position: relative;

package/lib/checkbox/checkbox.d.ts

@@ -21,8 +21,8 @@ export declare const checkboxProps: {
     indeterminate: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     };
-    beforeChange: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
-        default: (...args: any[]) => any;
+    beforeChange: import("vue-types").VueTypeValidableDef<(event: boolean | number | string) => Promise<boolean> | boolean> & {
+        default: (event: boolean | number | string) => Promise<boolean> | boolean;
     };
     size: import("vue-types").VueTypeDef<"default" | "small" | "large" | "huge"> & {
         default: "default" | "small" | "large" | "huge";
@@ -32,6 +32,16 @@ export declare const checkboxProps: {
     } & {
         default: boolean;
     };
+    readonly: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    outline: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
 };
 export type CheckboxProps = Readonly<ExtractPropTypes<typeof checkboxProps>>;
 declare const _default: import("vue").DefineComponent<{
@@ -56,8 +66,8 @@ declare const _default: import("vue").DefineComponent<{
     indeterminate: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     };
-    beforeChange: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
-        default: (...args: any[]) => any;
+    beforeChange: import("vue-types").VueTypeValidableDef<(event: string | number | boolean) => boolean | Promise<boolean>> & {
+        default: (event: string | number | boolean) => boolean | Promise<boolean>;
     };
     size: import("vue-types").VueTypeDef<"default" | "small" | "large" | "huge"> & {
         default: "default" | "small" | "large" | "huge";
@@ -67,6 +77,16 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
+    readonly: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    outline: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
 }, {
     inputRef: import("vue").Ref<any>;
     isFocus: import("vue").Ref<boolean>;
@@ -105,8 +125,8 @@ declare const _default: import("vue").DefineComponent<{
     indeterminate: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     };
-    beforeChange: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
-        default: (...args: any[]) => any;
+    beforeChange: import("vue-types").VueTypeValidableDef<(event: string | number | boolean) => boolean | Promise<boolean>> & {
+        default: (event: string | number | boolean) => boolean | Promise<boolean>;
     };
     size: import("vue-types").VueTypeDef<"default" | "small" | "large" | "huge"> & {
         default: "default" | "small" | "large" | "huge";
@@ -116,6 +136,16 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
+    readonly: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    outline: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
 }>> & {
     onChange?: (value: any, _event?: Event) => any;
     onClick?: (_event: MouseEvent) => any;
@@ -123,11 +153,13 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     size: "default" | "small" | "large" | "huge";
     disabled: boolean;
+    outline: boolean;
+    readonly: boolean;
     trueLabel: string | number | boolean;
     falseLabel: string | number | boolean;
     checked: boolean;
     indeterminate: boolean;
-    beforeChange: (...args: any[]) => any;
+    beforeChange: (event: string | number | boolean) => boolean | Promise<boolean>;
     immediateEmitChange: boolean;
 }, {}>;
 export default _default;

package/lib/checkbox/checkbox.less

@@ -20,6 +20,18 @@
   }
 
   &.is-checked {
+    &.is-outline {
+      .@{bk-prefix}-checkbox-input {
+        background: #fff;
+
+        &::after {
+          border: 2px solid @primary-color;
+          border-top: 0;
+          border-left: 0;
+        }
+      }
+    }
+
     .@{bk-prefix}-checkbox-input {
       background: @primary-color;
       border-color: @primary-color;