bkui-vue 2.0.1-beta.9 → 2.0.1-beta.90

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() {
@@ -1074,11 +1137,11 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
     var emptyWidth = parseInt(this.panelWidth, 10) > 200 ? this.panelWidth : "".concat(200, "px");
     var searchPanelRender = function searchPanelRender() {
       return _this.suggestions.length ? (0,external_vue_namespaceObject.createVNode)("ul", {
-        "class": [_this.resolveClassName('cascader-panel'), _this.resolveClassName('scroll-y')],
         "style": {
           height: _this.panelHeight,
           width: _this.panelWidth
-        }
+        },
+        "class": [_this.resolveClassName('cascader-panel'), _this.resolveClassName('scroll-y')]
       }, [_this.suggestions.map(function (node) {
         return (0,external_vue_namespaceObject.createVNode)("li", (0,external_vue_namespaceObject.mergeProps)({
           "class": [_this.resolveClassName('cascader-node'), {
@@ -1090,21 +1153,21 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
           }]
         }, _this.searchPanelEvents(node)), [node.pathNames.join(_this.separator)]);
       })]) : (0,external_vue_namespaceObject.createVNode)("div", {
-        "class": _this.resolveClassName('cascader-search-empty'),
         "style": {
           width: emptyWidth
-        }
+        },
+        "class": _this.resolveClassName('cascader-search-empty')
       }, [(0,external_vue_namespaceObject.createVNode)("span", null, [_this.noDataText])]);
     };
     return (0,external_vue_namespaceObject.createVNode)("div", {
       "class": this.resolveClassName('cascader-panel-wrapper')
     }, [this.isFiltering ? searchPanelRender() : this.menus.list.map(function (menu) {
       return (0,external_vue_namespaceObject.createVNode)("ul", {
-        "class": [_this.resolveClassName('cascader-panel'), _this.resolveClassName('scroll-y')],
         "style": {
           height: _this.panelHeight,
           width: _this.panelWidth
-        }
+        },
+        "class": [_this.resolveClassName('cascader-panel'), _this.resolveClassName('scroll-y')]
       }, [menu.length ? menu.map(function (node) {
         var _this$$slots$default, _this$$slots;
         return (0,external_vue_namespaceObject.createVNode)("li", (0,external_vue_namespaceObject.mergeProps)({
@@ -1116,13 +1179,13 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
             'is-checked': !node.config.multiple && _this.isCheckedNode(node, _this.checkValue)
           }]
         }, Object.assign(_this.nodeEvent(node), node.config.multiple ? {} : {})), [node.config.multiple && (0,external_vue_namespaceObject.createVNode)(checkbox_namespaceObject["default"], {
-          "disabled": node.isDisabled,
+          "style": "margin-right: 5px",
           "modelValue": node.checked,
           "onUpdate:modelValue": function onUpdateModelValue($event) {
             return node.checked = $event;
           },
+          "disabled": node.isDisabled,
           "indeterminate": node.isIndeterminate,
-          "style": "margin-right: 5px",
           "onChange": function onChange(val) {
             return _this.checkNode(node, !!val);
           }
@@ -1423,7 +1486,6 @@ var flatNodes = function flatNodes(data, leafOnly) {
       acc.push(node);
     } else {
       !leafOnly && acc.push(node);
-      // eslint-disable-next-line no-param-reassign
       acc = acc.concat(flatNodes(node.children, leafOnly));
     }
     return acc;
@@ -1583,6 +1645,10 @@ var Store = /*#__PURE__*/function () {
 
 
 
+/**
+ * Cascader 组件
+ * 用于展示级联选择器，支持多选、单选、搜索、远程加载等功能。
+ */
 /* harmony default export */ const cascader = ((0,external_vue_namespaceObject.defineComponent)({
   name: 'Cascader',
   directives: {
@@ -1778,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事件
       // 面板收起，搜索状态关闭
@@ -1923,11 +1993,11 @@ var Store = /*#__PURE__*/function () {
         var isOverflow = !_this.isCollapse && _this.overflowTagIndex !== null && index >= _this.overflowTagIndex;
         // 根据tag是否超出显示范围，来决定是否渲染
         return (0,external_vue_namespaceObject.createVNode)("span", {
-          "class": "tag-item",
+          "key": tag,
           "style": {
             display: isOverflow ? 'none' : ''
           },
-          "key": tag
+          "class": "tag-item"
         }, [(0,external_vue_namespaceObject.createVNode)("span", {
           "class": "tag-item-name"
         }, [tag]), (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Error, {
@@ -1954,17 +2024,17 @@ var Store = /*#__PURE__*/function () {
     // 定义popoverRender函数，用于渲染弹出框
     var popoverRender = function popoverRender() {
       return (0,external_vue_namespaceObject.createVNode)(popover_namespaceObject["default"], {
-        "placement": "bottom-start",
-        "theme": "light ".concat(_this.resolveClassName('cascader-popover')),
-        "trigger": "click",
+        "ref": "popover",
+        "class": _this.resolveClassName('cascader-popover-wrapper'),
         "arrow": false,
+        "boundary": "body",
         "disabled": _this.disabled,
         "offset": 4,
-        "class": _this.resolveClassName('cascader-popover-wrapper'),
-        "ref": "popover",
+        "placement": "bottom-start",
+        "theme": "light ".concat(_this.resolveClassName('cascader-popover')),
+        "trigger": "click",
         "onAfterHidden": _this.popoverChangeEmitter,
-        "onAfterShow": _this.popoverChangeEmitter,
-        "boundary": "body"
+        "onAfterShow": _this.popoverChangeEmitter
       }, {
         "default": function _default() {
           return _this.$slots.trigger ? _this.$slots.trigger({
@@ -1973,34 +2043,34 @@ var Store = /*#__PURE__*/function () {
           }) : (0,external_vue_namespaceObject.createVNode)("div", {
             "class": [_this.resolveClassName('cascader-name'), _this.resolveClassName('scroll-y')]
           }, [_this.multiple && _this.selectedTags.length > 0 && renderTags(), _this.filterable ? (_this.isCollapse || _this.selectedTags.length === 0) && (0,external_vue_namespaceObject.createVNode)("input", {
+            "ref": "inputRef",
             "class": [_this.resolveClassName('cascader-search-input'), {
               'is-disabled': _this.disabled
             }],
-            "type": "text",
-            "onInput": _this.searchInputHandler,
-            "onBlur": _this.searchBlueHandler,
+            "disabled": _this.disabled,
             "placeholder": _this.calcuPlaceholder,
+            "type": "text",
             "value": _this.searchKey,
-            "disabled": _this.disabled,
-            "ref": "inputRef"
+            "onBlur": _this.searchBlueHandler,
+            "onInput": _this.searchInputHandler
           }, null) : textRender()]);
         },
         content: function content() {
           return (0,external_vue_namespaceObject.createVNode)("div", {
             "class": _this.resolveClassName('cascader-popover')
           }, [(0,external_vue_namespaceObject.createVNode)(cascader_panel, {
-            "store": _this.store,
             "ref": "cascaderPanel",
             "width": _this.scrollWidth,
             "height": _this.scrollHeight,
-            "search-key": _this.searchKey,
-            "separator": _this.separator,
-            "is-filtering": _this.isFiltering,
-            "suggestions": _this.suggestions,
             "modelValue": _this.checkedValue,
             "onUpdate:modelValue": function onUpdateModelValue($event) {
               return _this.checkedValue = $event;
-            }
+            },
+            "is-filtering": _this.isFiltering,
+            "search-key": _this.searchKey,
+            "separator": _this.separator,
+            "store": _this.store,
+            "suggestions": _this.suggestions
           }, {
             "default": function _default(scope) {
               return _this.$slots["default"] ? _this.$slots["default"](scope) : (0,external_vue_namespaceObject.createVNode)("span", {
@@ -2014,6 +2084,7 @@ var Store = /*#__PURE__*/function () {
     return (0,external_vue_namespaceObject.createVNode)("div", {
       "class": [this.resolveClassName('cascader-wrapper'), this.floatMode ? 'float-mode' : '']
     }, [this.$slots.trigger ? popoverRender() : (0,external_vue_namespaceObject.createVNode)("div", {
+      "ref": "bkCascaderRef",
       "class": [this.resolveClassName('cascader'), this.extCls, {
         'is-unselected': this.modelValue.length === 0,
         'is-hover': this.isHover,
@@ -2022,11 +2093,10 @@ var Store = /*#__PURE__*/function () {
         'is-disabled': this.disabled,
         'is-simplicity': this.behavior === 'simplicity'
       }],
-      "tabindex": "0",
       "data-placeholder": this.calcuPlaceholder,
+      "tabindex": "0",
       "onMouseenter": this.setHover,
-      "onMouseleave": this.cancelHover,
-      "ref": "bkCascaderRef"
+      "onMouseleave": this.cancelHover
     }, [suffixIcon(), popoverRender()])]);
   }
 }));

package/lib/cascader/interface.d.ts

@@ -9,7 +9,7 @@ export interface INodeConfig {
 }
 export interface INode {
     checked: boolean;
-    children?: null[] | null;
+    children?: null | null[];
     config: IConfig;
     data: IData;
     leaf: boolean;

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;